{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-142",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/checkbox.json",
    "https://coss.com/origin/r/label.json",
    "https://coss.com/origin/r/input.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-142.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const checkboxId = useId();\n  const inputId = useId();\n  const [checked, setChecked] = useState<boolean | \"indeterminate\">(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (checked === true && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [checked]);\n\n  return (\n    <div>\n      <div className=\"flex items-start gap-2\">\n        <Checkbox\n          aria-controls={inputId}\n          aria-describedby={`${checkboxId}-description`}\n          checked={checked}\n          id={checkboxId}\n          onCheckedChange={setChecked}\n        />\n        <div className=\"grow\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor={checkboxId}>Checkbox with expansion</Label>\n            <p\n              className=\"text-muted-foreground text-xs\"\n              id={`${checkboxId}-description`}\n            >\n              You can use this checkbox with a label and a description.\n            </p>\n          </div>\n          {/* Expandable field */}\n          <div\n            aria-labelledby={checkboxId}\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={checked ? \"expanded\" : \"collapsed\"}\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={!checked}\n                  id=\"checkbox-11-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}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "checkbox",
      "label",
      "collapsible",
      "radix"
    ]
  }
}