{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "radio-group-motion", "title": "Group-motion radio", "description": "Styled radio: the Group-motion set. 5 decorative radio variations (SlideRadio, PopRadio, FadeRadio, SpringRadio, MorphRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.", "dependencies": [ "motion@^12.42.2" ], "registryDependencies": [ "@ai2/tokens" ], "files": [ { "path": "registry/ai2/styled/radio-group-motion.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Motion radio-group family: 5 selection groups where the selection marker is\n carried between options with a framer layoutId. The variants differ in the\n character of the transition: slide, pop, cross-fade, spring and shape change. The\n layoutId is unique per instance via useId (so that 25 examples on the same page\n do not animate across each other). role=\"radiogroup\" + role=\"radio\", roving\n tabindex, arrow-key navigation and selection. Color comes ONLY from tokens, via\n alpha color-mix. Under reduced-motion the marker jumps instantly. Renders with no\n props too. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype RadioOption = { value: string; label: React.ReactNode }\n\ninterface RadioGroupProps {\n className?: string\n size?: StyledSize\n options?: RadioOption[]\n value?: string\n defaultValue?: string\n onValueChange?: (v: string) => void\n}\n\nconst DEFAULT_OPTIONS: RadioOption[] = [\n { value: \"a\", label: \"Option A\" },\n { value: \"b\", label: \"Option B\" },\n { value: \"c\", label: \"Option C\" },\n]\n\nconst textSize: Record = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n xl: \"text-lg\",\n}\n\nconst padSize: Record = {\n sm: \"px-2.5 py-1\",\n md: \"px-3 py-1.5\",\n lg: \"px-4 py-2\",\n xl: \"px-5 py-2.5\",\n}\n\nfunction useRadioGroup(props: Pick) {\n const { value, defaultValue, onValueChange, options } = props\n const opts = options && options.length > 0 ? options : DEFAULT_OPTIONS\n const reduce = useReducedMotion()\n const [internal, setInternal] = React.useState(defaultValue ?? opts[0]?.value)\n const selected = value ?? internal\n const select = React.useCallback(\n (v: string) => {\n if (value === undefined) setInternal(v)\n onValueChange?.(v)\n },\n [value, onValueChange]\n )\n return { opts, selected, select, reduce }\n}\n\n/* Arrow-key navigation + selection (together with the roving tabindex). */\nfunction useRadioKeys(opts: RadioOption[], select: (v: string) => void) {\n const refs = React.useRef<(HTMLButtonElement | null)[]>([])\n const setRef = (i: number) => (el: HTMLButtonElement | null) => {\n refs.current[i] = el\n }\n const onKeyDown = (i: number) => (e: React.KeyboardEvent) => {\n const last = opts.length - 1\n let next = -1\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = i === last ? 0 : i + 1\n else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = i === 0 ? last : i - 1\n if (next < 0) return\n e.preventDefault()\n const target = opts[next]\n if (!target) return\n select(target.value)\n refs.current[next]?.focus()\n }\n return { setRef, onKeyDown }\n}\n\nconst focusRing =\n \"outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n\ntype IndicatorMotion = {\n initial?: Record\n animate?: Record\n exit?: Record\n}\n\n/* Shared shell: a horizontal option row plus an indicator carried by layoutId. */\nfunction MotionShell({\n props,\n transition,\n indicatorClass,\n indicatorMotion,\n activeText = \"text-primary-foreground\",\n trackClass = \"bg-muted\",\n}: {\n props: RadioGroupProps\n transition: Record\n indicatorClass: string\n indicatorMotion?: IndicatorMotion\n activeText?: string\n trackClass?: string\n}) {\n const { className, size = \"md\", options, value, defaultValue, onValueChange } = props\n const { opts, selected, select, reduce } = useRadioGroup({ options, value, defaultValue, onValueChange })\n const { setRef, onKeyDown } = useRadioKeys(opts, select)\n const groupId = React.useId()\n const activeIndex = opts.findIndex((o) => o.value === selected)\n const t = reduce ? { duration: 0 } : transition\n const anim = reduce ? undefined : indicatorMotion\n\n return (\n \n {opts.map((opt, i) => {\n const active = opt.value === selected\n const roving = active || (activeIndex < 0 && i === 0)\n return (\n select(opt.value)}\n data-slot=\"styled-radio-item\"\n className={cn(\n \"relative z-10 cursor-pointer rounded-md font-medium transition-colors\",\n focusRing,\n textSize[size],\n padSize[size],\n active ? activeText : \"text-muted-foreground hover:text-foreground\"\n )}\n >\n {active ? (\n \n ) : null}\n {opt.label}\n \n )\n })}\n \n )\n}\n\n/* Slide: the marker slides between the options with a plain tween. */\nexport function SlideRadio(props: RadioGroupProps) {\n return (\n \n )\n}\n\n/* Pop: the indicator does a short scale pop while it travels. */\nexport function PopRadio(props: RadioGroupProps) {\n return (\n \n )\n}\n\n/* Fade: isaret tasinirken capraz gecisle solar ve belirir. */\nexport function FadeRadio(props: RadioGroupProps) {\n return (\n \n )\n}\n\n/* Spring: yayli, hafif zipli tasima. */\nexport function SpringRadio(props: RadioGroupProps) {\n return (\n \n )\n}\n\n/* Morph: isaret tasinirken alt cizgiden dolu pill'e sekil degistirir. */\nexport function MorphRadio(props: RadioGroupProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/radio-group-motion.tsx" } ], "categories": [ "styled", "radio" ], "type": "registry:component" }