{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "title": "radio-group",
  "description": "One choice from a list, each with its own label. The Checkbox's look in a circle: md is 16px, lg 20px. The group stacks (vertical) or wraps in a row (horizontal). For two to five short options as pills or tiles, use choice-group.",
  "dependencies": [
    "@radix-ui/react-radio-group@^1",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/ui/radio-group.tsx",
      "content": "'use client';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\n/*\n * One choice from a list, each with its own label, such as a form's plan\n * options. For two to five short options as pills or tiles, use ChoiceGroup.\n */\nconst radioGroupVariants = cva('', {\n  variants: {\n    orientation: {\n      vertical: 'grid gap-3',\n      horizontal: 'flex flex-wrap items-center gap-x-6 gap-y-3',\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n});\n\n/* The Checkbox's look in a circle: the strong 3:1 edge, filled with the primary colour when chosen. */\nconst radioGroupItemVariants = cva(\n  'peer grid shrink-0 cursor-pointer place-content-center rounded-full border border-input-strong bg-transparent transition-[border-color,background-color] duration-200 outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=unchecked]:hover:border-muted-foreground',\n  {\n    variants: {\n      size: {\n        md: 'size-4 [&_[data-slot=radio-group-indicator]]:size-1.5',\n        /* A settings row with a line of explanation. */\n        lg: 'size-5 [&_[data-slot=radio-group-indicator]]:size-2',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nfunction RadioGroup({\n  className,\n  orientation,\n  ...props\n}: ComponentProps<typeof RadioGroupPrimitive.Root> & VariantProps<typeof radioGroupVariants>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      orientation={orientation ?? 'vertical'}\n      className={cn(radioGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  size,\n  ...props\n}: ComponentProps<typeof RadioGroupPrimitive.Item> & VariantProps<typeof radioGroupItemVariants>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(radioGroupItemVariants({ size }), className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"block rounded-full bg-primary-foreground\"\n      />\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem, radioGroupItemVariants, radioGroupVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}