{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "radio.tsx",
      "target": "components/ui/radio.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Radio as Base } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface RadioGroupProps<Value = string>\n  extends Omit<BaseRadioGroup.Props<Value>, \"className\"> {\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  children?: React.ReactNode;\n}\n\nfunction RadioGroupImpl<Value = string>(\n  { className, orientation = \"vertical\", ...props }: RadioGroupProps<Value>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  return (\n    <BaseRadioGroup\n      ref={ref}\n      aria-orientation={orientation}\n      className={cn(\n        \"flex gap-3\",\n        orientation === \"horizontal\" ? \"flex-row\" : \"flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport const RadioGroup = React.forwardRef(RadioGroupImpl) as <Value = string>(\n  props: RadioGroupProps<Value> & { ref?: React.Ref<HTMLDivElement> },\n) => React.ReactElement;\n(RadioGroup as { displayName?: string }).displayName = \"RadioGroup\";\n\nconst rootVariants = cva(\n  \"relative flex shrink-0 items-center justify-center rounded-full border border-border bg-surface outline-none transition-control duration-base ease-soft before:absolute before:content-[''] data-[unchecked]:hover:border-border-strong data-[checked]:border-accent data-[checked]:glow-ring active:scale-[0.98] motion-reduce:transition-none motion-reduce:transform-none focus-visible:border-transparent focus-visible:ring-focus aria-invalid:border-danger data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-4 before:-inset-3.5\",\n        md: \"h-5 w-5 before:-inset-3\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst indicatorVariants = cva(\"rounded-full bg-accent bg-gradient-accent\", {\n  variants: {\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n// Indent the description to line up under the label: control width + the gap-2.\nconst descIndent: Record<NonNullable<RadioProps[\"size\"]>, string> = {\n  sm: \"pl-6\",\n  md: \"pl-7\",\n};\n\nexport interface RadioProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof Base.Root>,\n      \"render\" | \"className\"\n    >,\n    VariantProps<typeof rootVariants> {\n  className?: string;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nexport const Radio = React.forwardRef<HTMLButtonElement, RadioProps>(\n  ({ className, size, label, description, id, disabled, ...props }, ref) => {\n    const generatedId = React.useId();\n    const radioId = id ?? generatedId;\n\n    return (\n      <Field.Root className=\"flex flex-col gap-1\" disabled={disabled}>\n        <div className=\"flex items-center gap-2\">\n          <Base.Root\n            ref={ref}\n            id={radioId}\n            disabled={disabled}\n            className={cn(rootVariants({ size }), className)}\n            {...props}\n          >\n            <Base.Indicator\n              keepMounted\n              className={cn(\n                \"flex items-center justify-center transition-control duration-base ease-spring motion-reduce:transition-none motion-reduce:transform-none data-[unchecked]:scale-0 data-[checked]:scale-100\",\n              )}\n            >\n              <span className={indicatorVariants({ size })} />\n            </Base.Indicator>\n          </Base.Root>\n          {label ? (\n            <Field.Label\n              htmlFor={radioId}\n              className=\"text-sm text-ink select-none data-[disabled]:opacity-50\"\n            >\n              {label}\n            </Field.Label>\n          ) : null}\n        </div>\n        {description ? (\n          <Field.Description\n            className={cn(\"text-xs text-muted\", descIndent[size ?? \"md\"])}\n          >\n            {description}\n          </Field.Description>\n        ) : null}\n      </Field.Root>\n    );\n  },\n);\nRadio.displayName = \"Radio\";\n"
    }
  ]
}