61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:Teb8,"use client"; import { useEffect, useId, useLayoutEffect, useRef } from "react"; import { animate, motion, useReducedMotion } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./radio-group.module.css"; export interface RadioGroupProps { label: string; options: { value: string; label: string; description?: string }[]; value: string; onValueChange: (value: string) => void; name?: string } /** Sizes the highlight to the chosen row. A new choice glides on the morph spring; the first paint and resizes place it at once. */ function place(highlight: HTMLElement | null, row: HTMLElement | null | undefined, at: { current: string }, glide: boolean) { const next = row ? `${row.offsetTop} ${row.offsetHeight}` : ""; if (!highlight || next === at.current) return; const visible = at.current !== ""; at.current = next; if (!row) { animate(highlight, { opacity: 0 }, { duration: 0 }); return; } const target = { y: row.offsetTop, height: row.offsetHeight, opacity: 1 }; if (glide && visible) { animate(highlight, target, { ...motionTokens.spring.morph, opacity: { duration: 0 } }); return; } // Written to the element too, so the paint that drops the server fallback already shows the highlight in place. Object.assign(highlight.style, { transform: `translateY(${target.y}px)`, height: `${target.height}px`, opacity: "1" }); animate(highlight, target, { duration: 0 }); } /** One highlight travels to the chosen row while the new dot springs in and the old one shrinks away, so a change reads as a single physical move. Arrow keys take the same path. Rows and text never resize. */ export function RadioGroup({ label, options, value, onValueChange, name }: RadioGroupProps) { const id = useId(); const reduced = useReducedMotion(); const listRef = useRef(null); const highlightRef = useRef(null); const rows = useRef<(HTMLLabelElement | null)[]>([]); const shown = useRef(null); const at = useRef(""); const selected = options.findIndex(option => option.value === value); useLayoutEffect(() => { place(highlightRef.current, rows.current[selected], at, shown.current !== null && shown.current !== selected && !reduced); shown.current = selected; listRef.current?.setAttribute("data-ready", ""); }, [selected, reduced]); useEffect(() => { const list = listRef.current; if (!list || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(() => place(highlightRef.current, rows.current[shown.current ?? -1], at, false)); observer.observe(list); rows.current.forEach(row => row && observer.observe(row)); return () => observer.disconnect(); }, [options.length]); return

{label}

; } 64:Te25,.group { display: grid; min-width: 0; margin: 0; border: 0; padding: 0; } .group legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 500; } /* One highlight travels between the rows: above their borders and fills, below their text, so it never crosses a label. */ .options { position: relative; display: grid; gap: var(--space-2); } .highlight { position: absolute; top: 0; right: 0; left: 0; z-index: 1; box-sizing: border-box; border: 1px solid var(--control-on); border-radius: var(--radius-control); background: color-mix(in oklab, var(--control-on) 5%, transparent); opacity: 0; pointer-events: none; } /* Rows answer a press with color only; the mark is what moves. */ /* The mark sits centered on the left edge of the row, whether or not the option has a description. */ .option { position: relative; display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } @media (hover: hover) and (pointer: fine) { .option:hover { background: var(--surface-muted); } } .option:active { background: var(--surface-muted); } /* Until the highlight is placed (server paint or no script), the checked row carries the same look itself. */ .options:not([data-ready]) .option:has(input:checked) { border-color: var(--control-on); background: color-mix(in oklab, var(--control-on) 5%, transparent); } .option input { position: absolute; opacity: 0; } /* Rows are not stacking contexts, so their mark and copy rise above the highlight while their border and fill stay below it. */ .option > span { position: relative; z-index: 2; } .mark { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); } /* 7px keeps the dot on whole pixels inside the 15px interior of the mark. */ .mark::after, .dot { grid-area: 1 / 1; width: 7px; height: 7px; border-radius: 50%; background: var(--foreground); } /* A faint dot previews the choice while the pointer is down, then the real dot springs in on release. */ .mark::after { content: ""; opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); } .option:active:not(:has(input:checked)) .mark::after { opacity: .22; } /* The mark alone answers a press: a quick dip, then a spring back. */ .option:active .mark { transform: scale(.88); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform 100ms var(--ease-standard); } .option:has(input:checked) .mark { border-color: var(--control-on); background: var(--control-on); } .option:has(input:checked) .dot { background: var(--control-glyph); } .option strong, .option small { display: block; } .option strong { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; transition: color var(--duration-standard) var(--ease-standard); } .option:has(input:checked) strong { color: var(--foreground); } .option small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); } @media (prefers-reduced-motion: reduce) { .option, .mark, .mark::after, .option strong { transition: none; } .option:active .mark { transform: none; } } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/components/radio-group/radio-group.tsx","content":"$63","type":"registry:component","target":"@components/arc/radio-group/radio-group.tsx"},{"path":"registry/components/radio-group/radio-group.module.css","content":"$64","type":"registry:component","target":"@components/arc/radio-group/radio-group.module.css"}],"className":"h-[70svh] min-h-80"}]]}]