{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "title": "Radio Group",
  "description": "A set of checkable buttons—known as radio buttons.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/radio-group.jsx",
      "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { buttonVariants } from \"@/registry/optics/button\";\nimport { cn } from \"@/lib/utils\";\nimport { CircleIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nfunction RadioGroup({ className = \"\", ...props }) {\n\treturn (\n\t\t<RadioGroupPrimitive\n\t\t\tdata-slot=\"radio-group\"\n\t\t\tclassName={cn(\"grid gap-3 w-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction RadioGroupItem({ className = \"\", ...props }) {\n\tconst [isChecked, setIsChecked] = React.useState(false);\n\tconst ref = React.useRef(null);\n\n\t// Detectar cambios en el estado del radio usando MutationObserver\n\tReact.useEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) return;\n\n\t\t// Función para verificar el estado\n\t\tconst checkState = () => {\n\t\t\tconst checked =\n\t\t\t\telement.hasAttribute(\"data-checked\") ||\n\t\t\t\telement.getAttribute(\"aria-checked\") === \"true\";\n\t\t\tsetIsChecked(checked);\n\t\t};\n\n\t\t// Verificar estado inicial\n\t\tcheckState();\n\n\t\t// Observar cambios en atributos\n\t\tconst observer = new MutationObserver(checkState);\n\t\tobserver.observe(element, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: [\"data-checked\", \"aria-checked\"],\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<RadioPrimitive.Root\n\t\t\tref={ref}\n\t\t\tdata-slot=\"radio-group-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full squircle-none transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tbuttonVariants({\n\t\t\t\t\tvariant: isChecked ? \"default\" : \"outline\",\n\t\t\t\t\tsize: \"icon-xs\",\n\t\t\t\t\tclassName: \"rounded-full squircle-none\",\n\t\t\t\t}),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioPrimitive.Indicator\n\t\t\t\tdata-slot=\"radio-group-indicator\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group-aria-invalid/radio-group-item:text-destructive flex size-4 p-4 items-center justify-center text-white\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<CircleIcon className=\"absolute top-1/2 left-1/2 size-2.5! -translate-x-1/2 -translate-y-1/2 fill-current\" />\n\t\t\t</RadioPrimitive.Indicator>\n\t\t</RadioPrimitive.Root>\n\t);\n}\n\nRadioGroup.displayName = \"RadioGroup\";\nRadioGroupItem.displayName = \"RadioGroupItem\";\n\nexport { RadioGroup, RadioGroupItem };\n",
      "type": "registry:component",
      "target": "components/optics/radio-group.jsx"
    }
  ],
  "type": "registry:component"
}