{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "radio-ballot-drop", "title": "Radio Ballot Drop", "description": "A single-choice input as a paper ballot: the chosen option folds into a slip and drops through the ballot box's slot with two-phase paper physics (flutter, then settle), and switching your vote pulls the old slip back out first.", "dependencies": [], "files": [ { "path": "registry/core/radio-ballot-drop/component.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\n\n// A single-choice input rendered as a paper ballot. Each option is a real\n// role=\"radio\" button (roving tabindex, arrow-key navigation — the standard\n// WAI-ARIA radiogroup pattern) styled as a paper slip; hovering an unselected\n// slip lifts its corner. Selecting one spawns a decorative ghost clone that\n// folds, flutters, and rises through the ballot box's slot before fading —\n// changing the vote also retracts the previous ghost back out. The real\n// option element never leaves the DOM (it just switches to its \"chosen\"\n// ink), so the control stays a fully functional, always-focusable radio\n// group; the paper-drop animation is a one-shot CSS keyframe flourish, not a\n// per-frame rAF simulation.\n\nexport type BallotOption = { value: string; label: string };\n\nconst DEFAULT_OPTIONS: BallotOption[] = [\n { value: \"lisbon\", label: \"Lisbon\" },\n { value: \"kyoto\", label: \"Kyoto\" },\n { value: \"reykjavik\", label: \"Reykjavik\" },\n];\n\ntype Ghost = {\n id: number;\n label: string;\n top: number;\n left: number;\n width: number;\n height: number;\n travel: number;\n mode: \"drop\" | \"retract\";\n};\n\nlet ghostSeq = 0;\n\nexport function BallotDrop({\n options = DEFAULT_OPTIONS,\n label = \"Offsite location\",\n defaultValue,\n className = \"\",\n}: {\n /** the radio options */\n options?: BallotOption[];\n /** accessible name for the radio group */\n label?: string;\n /** uncontrolled initial selected value */\n defaultValue?: string;\n /** extra classes merged onto the rendered root element */\n className?: string;\n}) {\n const reactId = useId();\n const wrapRef = useRef(null);\n const boxRef = useRef(null);\n const optionRefs = useRef>({});\n const [selected, setSelected] = useState(defaultValue);\n const [ghosts, setGhosts] = useState([]);\n const liveRef = useRef(null);\n const reducedRef = useRef(false);\n\n useEffect(() => {\n reducedRef.current = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n }, []);\n\n const announce = useCallback((text: string) => {\n if (liveRef.current) liveRef.current.textContent = text;\n }, []);\n\n const spawnGhost = useCallback((optionEl: HTMLButtonElement, mode: Ghost[\"mode\"]) => {\n const wrap = wrapRef.current;\n const box = boxRef.current;\n if (!wrap || !box) return;\n const wrapRect = wrap.getBoundingClientRect();\n const optRect = optionEl.getBoundingClientRect();\n const boxRect = box.getBoundingClientRect();\n const top = optRect.top - wrapRect.top;\n const left = optRect.left - wrapRect.left;\n const travel = boxRect.bottom - optRect.top - optRect.height * 0.3;\n const id = ++ghostSeq;\n setGhosts((g) => [\n ...g,\n {\n id,\n label: optionEl.textContent ?? \"\",\n top,\n left,\n width: optRect.width,\n height: optRect.height,\n travel: -travel,\n mode,\n },\n ]);\n return id;\n }, []);\n\n const removeGhost = (id: number) => setGhosts((g) => g.filter((x) => x.id !== id));\n\n const choose = useCallback(\n (value: string) => {\n if (value === selected) return;\n const prevValue = selected;\n const el = optionRefs.current[value];\n setSelected(value);\n const opt = options.find((o) => o.value === value);\n announce(prevValue ? `Vote changed to ${opt?.label}` : `Voted: ${opt?.label}`);\n if (el) spawnGhost(el, \"drop\");\n if (prevValue) {\n const prevEl = optionRefs.current[prevValue];\n if (prevEl) spawnGhost(prevEl, \"retract\");\n }\n },\n [selected, options, announce, spawnGhost]\n );\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const idx = options.findIndex((o) => o.value === (selected ?? options[0]?.value));\n let next = -1;\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = (idx - 1 + options.length) % options.length;\n else if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = (idx + 1) % options.length;\n else if (e.key === \"Home\") next = 0;\n else if (e.key === \"End\") next = options.length - 1;\n else return;\n e.preventDefault();\n const target = options[next];\n if (target) {\n choose(target.value);\n optionRefs.current[target.value]?.focus();\n }\n };\n\n return (\n
\n \n\n {/* the ballot box: hairline body with a slot notch facing the options below it */}\n \n
\n
\n
\n
\n\n {/* ghost overlay: decorative paper-drop clones, never focusable */}\n
\n {ghosts.map((g) => (\n removeGhost(g.id)}\n className=\"absolute rounded-[4px] border border-border bg-[#f4f2ec] shadow-[0_4px_10px_-4px_rgba(0,0,0,0.35)]\"\n style={\n {\n top: g.top,\n left: g.left,\n width: g.width,\n height: g.height,\n \"--nsui-travel\": `${g.travel}px`,\n animation: `${\n reducedRef.current\n ? g.mode === \"drop\"\n ? \"nsui-radio-ballot-drop-reduced\"\n : \"nsui-ballot-retract-reduced\"\n : g.mode === \"drop\"\n ? \"nsui-radio-ballot-drop\"\n : \"nsui-ballot-retract\"\n } ${reducedRef.current ? 260 : 620}ms cubic-bezier(0.3,0.6,0.3,1) forwards`,\n } as React.CSSProperties\n }\n >\n \n {g.label}\n \n
\n ))}\n
\n\n \n {options.map((opt) => {\n const checked = opt.value === selected;\n return (\n {\n optionRefs.current[opt.value] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={checked}\n tabIndex={checked || (!selected && opt.value === options[0]?.value) ? 0 : -1}\n onClick={() => choose(opt.value)}\n className=\"group relative overflow-visible rounded-[6px] border border-border bg-[#f4f2ec] px-4 py-3 text-left outline-none transition-[transform,box-shadow] duration-150 ease-out motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ns-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n >\n {/* peeling corner: lifts on hover of an unselected slip */}\n \n \n {opt.label}\n \n \n \n );\n })}\n \n\n
\n

\n Use arrow keys to change your vote.\n

\n
\n );\n}\n", "type": "registry:ui", "target": "components/ui/radio-ballot-drop.tsx" } ], "cssVars": { "theme": { "color-ns-accent": "var(--ns-accent)", "color-surface": "var(--surface)" }, "light": { "ns-accent": "#006bff", "surface": "#fafafa" }, "dark": { "surface": "#171717" } }, "meta": { "collection": "core", "tags": [ "radio", "form", "input", "single-choice", "paper", "physics", "vote" ], "instruction": "Build a functioning single-choice input (a real WAI-ARIA radiogroup: an outer role=\"radiogroup\" wrapping one role=\"radio\" button per option, aria-checked reflecting selection, roving tabindex — only the checked option, or the first when none is checked, has tabIndex 0, the rest -1 — and ArrowLeft/Up, ArrowRight/Down, Home, End all move both focus and selection, exactly the standard radiogroup keyboard pattern) styled as a paper ballot. Render a small ballot-box glyph above the option list: a hairline-bordered rounded-top rectangle (border-border, bg-surface) with a short pill-shaped \"slot\" notch bridging its bottom edge, facing the options below it. Each option is a paper-slip button: a fixed off-white paper color (not a theme token — real paper reads the same in both themes, matching the registry's precedent for deliberately fixed non-token colors) with dark ink text, a small hairline-bordered corner square clipped to a triangle in the top-right that lifts (translate + slight rotate, 200ms ease-out) on :hover via a group-hover transform — this is what makes the hover state differ from default. A small filled/hollow dot at the option's trailing edge shows checked state. Selecting an option does NOT remove it from the DOM — the real button stays put and just switches its checked dot — instead it spawns a decorative aria-hidden \"ghost\" clone (absolutely positioned over the whole component, measured via getBoundingClientRect from the clicked option to the ballot box) that plays a one-shot CSS keyframe: fold + flutter (alternating small rotate wobbles while scaleY compresses toward ~0.72-0.9, translateY riding a CSS custom property --nsui-travel computed as the pixel distance from the option to the box's slot) then settle as it fades to opacity 0 partway through the rise — a discrete keyframe animation, not a per-frame physics loop, since this is a bounded one-shot flourish. Changing an existing vote spawns a SECOND ghost for the previously-selected option playing the retract keyframe (the same shape in reverse-ish motion, ending at opacity 0 by the time it reaches the option's base position so it never visibly doubles the real, already-updated unselected slip) at the same time the new choice's drop ghost plays. An aria-live=\"polite\" aria-atomic sr-only region announces \"Voted: