{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "title": "Radio Group",
  "description": "Radio buttons and selectable cards with springing dots and crop marks.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/radio-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\n\nimport { gsap, marksIn, motionScale, useAttributeCue, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nfunction RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return <RadioGroupPrimitive.Root data-slot=\"radio-group\" className={cn(\"grid gap-3\", className)} {...props} />;\n}\n\n/** The dot springs in (GSAP elastic) whenever the item becomes checked. */\nfunction RadioGroupItem({ className, ref, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  const itemRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRef(itemRef, ref);\n  useAttributeCue(itemRef, \"data-state\", (state, item) => {\n    const scale = motionScale(item);\n    const dot = item.querySelector('[data-slot=\"radio-group-dot\"]');\n    if (!scale || state !== \"checked\" || !dot) return;\n    gsap.fromTo(dot, { scale: 0.4, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.45, ease: \"elastic.out(1.1, 0.55)\", clearProps: \"scale,opacity\" });\n  });\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={mergedRef}\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio peer inline-grid aspect-square size-4 shrink-0 place-items-center rounded-full border border-input bg-card shadow-well outline-none transition-[border-color,box-shadow] duration-150 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary\",\n        className,\n      )}\n      {...props}\n    >\n      <span data-slot=\"radio-group-dot\" className=\"size-2 rounded-full bg-primary opacity-0 group-data-[state=checked]/radio:opacity-100\" />\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A whole card is the radio; the checked card is framed by crop marks that close in on it. */\nfunction RadioGroupCard({ className, children, ref, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  const cardRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRef(cardRef, ref);\n  useAttributeCue(cardRef, \"data-state\", (state, card) => state === \"checked\" && marksIn(card));\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={mergedRef}\n      data-slot=\"radio-group-card\"\n      className={cn(\n        \"group/radio-card relative grid gap-1 rounded-lg border border-border bg-card p-4 text-left text-sm shadow-control outline-none transition-[border-color,box-shadow,background-color] duration-200 ease-cue hover:border-ring/40 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:cue-marks data-[state=checked]:border-primary data-[state=checked]:bg-accent/40 data-[state=checked]:shadow-raised\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute top-3 end-3 inline-grid size-4 place-items-center rounded-full border border-input bg-card shadow-well group-data-[state=checked]/radio-card:border-primary\"\n      >\n        <span className=\"size-2 scale-0 rounded-full bg-primary transition-transform duration-300 ease-cue group-data-[state=checked]/radio-card:scale-100\" />\n      </span>\n      {children}\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem, RadioGroupCard };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/radio-group",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}