{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-156",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/input.json",
    "https://coss.com/origin/r/label.json",
    "https://coss.com/origin/r/radio-group.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-156.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\n\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const radioId = useId();\n  const inputId = useId();\n  const [selectedValue, setSelectedValue] = useState(\"without-expansion\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (selectedValue === \"with-expansion\" && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [selectedValue]);\n\n  return (\n    <RadioGroup\n      className=\"gap-6\"\n      onValueChange={setSelectedValue}\n      value={selectedValue}\n    >\n      <div>\n        <div className=\"flex items-start gap-2\">\n          <RadioGroupItem\n            aria-controls={inputId}\n            aria-describedby={`${radioId}-1-description`}\n            id={`${radioId}-1`}\n            value=\"with-expansion\"\n          />\n          <div className=\"grow\">\n            <div className=\"grid grow gap-2\">\n              <Label htmlFor={`${radioId}-1`}>Radio with expansion</Label>\n              <p\n                className=\"text-muted-foreground text-xs\"\n                id={`${radioId}-1-description`}\n              >\n                You can use this radio with a label and a description.\n              </p>\n            </div>\n            {/* Expandable field */}\n            <div\n              aria-labelledby={`${radioId}-1`}\n              className=\"grid transition-all ease-in-out data-[state=collapsed]:grid-rows-[0fr] data-[state=expanded]:grid-rows-[1fr] data-[state=collapsed]:opacity-0 data-[state=expanded]:opacity-100\"\n              data-state={\n                selectedValue === \"with-expansion\" ? \"expanded\" : \"collapsed\"\n              }\n              id={inputId}\n              role=\"region\"\n            >\n              <div className=\"-m-2 pointer-events-none overflow-hidden p-2\">\n                <div className=\"pointer-events-auto mt-3\">\n                  <Input\n                    aria-label=\"Additional Information\"\n                    disabled={selectedValue !== \"with-expansion\"}\n                    id=\"radio-05-additional-info\"\n                    placeholder=\"Enter details\"\n                    ref={inputRef}\n                    type=\"text\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex items-start gap-2\">\n        <RadioGroupItem\n          aria-describedby={`${radioId}-2-description`}\n          id={`${radioId}-2`}\n          value=\"without-expansion\"\n        />\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={`${radioId}-2`}>Radio without expansion</Label>\n          <p\n            className=\"text-muted-foreground text-xs\"\n            id={`${radioId}-2-description`}\n          >\n            You can use this checkbox with a label and a description.\n          </p>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "radio",
      "label",
      "collapsible",
      "radix"
    ]
  }
}