{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-radio-group"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/radio/radio.tsx",
      "content": "import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./radio.css\"\n\nconst radioVariants = cva(\n  \"radio-indicator inline-flex items-center justify-center shrink-0 rounded-full transition-colors cursor-pointer\",\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--layout-size-xs)] w-[var(--layout-size-xs)]\",\n        md: \"h-[var(--layout-size-sm)] w-[var(--layout-size-sm)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"sm\",\n    },\n  }\n)\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"flex flex-col gap-[var(--layout-gap-md)]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction Radio({\n  className,\n  size = \"sm\",\n  label,\n  description,\n  disabled,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item> &\n  VariantProps<typeof radioVariants> & {\n    label?: string\n    description?: string\n  }) {\n  const id = React.useId()\n\n  return (\n    <div\n      data-slot=\"radio\"\n      data-disabled={disabled || undefined}\n      className={cn(\"flex items-start gap-[var(--layout-gap-md)]\", className)}\n    >\n      <div className=\"flex items-center py-[var(--layout-padding-2xs)]\">\n        <RadioGroupPrimitive.Item\n          id={id}\n          className={cn(radioVariants({ size }))}\n          disabled={disabled}\n          {...props}\n        >\n          <RadioGroupPrimitive.Indicator\n            className={cn(\n              \"radio-dot rounded-full\",\n              size === \"sm\" ? \"size-1.5\" : \"size-2\"\n            )}\n          />\n        </RadioGroupPrimitive.Item>\n      </div>\n      {label && (\n        <label\n          htmlFor={id}\n          className={cn(\n            \"flex flex-col\",\n            disabled ? \"cursor-default\" : \"cursor-pointer\"\n          )}\n        >\n          <span\n            className={cn(\n              \"font-accent radio-label\",\n              size === \"sm\" ? \"text-content-note\" : \"text-content-body\"\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-content-note radio-description\">\n              {description}\n            </span>\n          )}\n        </label>\n      )}\n    </div>\n  )\n}\n\nexport { RadioGroup, Radio, radioVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/radio/radio.css",
      "content": "/* ================================================================\n * RADIO — Indicator & State Styles\n * Structure (flex, size, gap, radius) lives in radio.tsx via cva.\n * Theming (colors, borders, states) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Indicator — base\n * -------------------------------- */\n.radio-indicator {\n  border: var(--layout-border-thin) solid var(--border-default);\n  overflow: hidden;\n}\n\n/* --------------------------------\n * Indicator — unchecked states\n * -------------------------------- */\n.radio-indicator[data-state=\"unchecked\"] {\n  background: var(--background-neutral-faint-default);\n}\n.radio-indicator[data-state=\"unchecked\"]:not([data-disabled]):hover {\n  background: var(--background-neutral-faint-hover);\n}\n.radio-indicator[data-state=\"unchecked\"]:not([data-disabled]):active {\n  background: var(--background-neutral-faint-pressed);\n}\n\n/* --------------------------------\n * Indicator — checked states\n * -------------------------------- */\n.radio-indicator[data-state=\"checked\"] {\n  background: var(--background-brand-strong-default);\n}\n.radio-indicator[data-state=\"checked\"]:not([data-disabled]):hover {\n  background: var(--background-brand-strong-hover);\n}\n.radio-indicator[data-state=\"checked\"]:not([data-disabled]):active {\n  background: var(--background-brand-strong-pressed);\n}\n\n/* --------------------------------\n * Indicator — disabled\n * -------------------------------- */\n.radio-indicator[data-disabled] {\n  background: var(--background-disabled);\n  border-color: var(--border-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* --------------------------------\n * Focus ring (matches Button pattern)\n * -------------------------------- */\n.radio-indicator:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--border-selected);\n}\n\n/* --------------------------------\n * Checked dot\n * -------------------------------- */\n.radio-dot {\n  background: var(--text-fixed);\n}\n.radio-indicator[data-disabled] .radio-dot {\n  background: var(--text-disabled);\n}\n\n/* --------------------------------\n * Text — label & description\n * -------------------------------- */\n.radio-label {\n  color: var(--text-base-strong);\n}\n.radio-description {\n  color: var(--text-base-medium);\n}\n\n/* --------------------------------\n * Text — disabled\n * -------------------------------- */\n[data-slot=\"radio\"][data-disabled] .radio-label,\n[data-slot=\"radio\"][data-disabled] .radio-description {\n  color: var(--text-disabled);\n}\n[data-slot=\"radio\"][data-disabled] label {\n  cursor: default;\n}\n",
      "type": "registry:ui"
    }
  ]
}