{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-collapsible-2","type":"registry:block","title":"Collapsible with checkbox settings","description":"Collapsible with checkbox settings","dependencies":[],"registryDependencies":["button","card","checkbox","collapsible","field"],"files":[{"path":"c-collapsible-2.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst settings = [\n  { id: \"push\", label: \"Push notifications\", defaultChecked: true },\n  { id: \"email\", label: \"Email notifications\", defaultChecked: false },\n  { id: \"sms\", label: \"SMS notifications\", defaultChecked: false },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"h-40 w-full max-w-xs\">\n      <Collapsible className=\"flex flex-col gap-2\" defaultOpen>\n        <CollapsibleTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"bg-background! w-full justify-start\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"ChevronRightIcon\"\n            tabler=\"IconChevronRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"CaretRightIcon\"\n            remixicon=\"RiArrowRightSLine\"\n            aria-hidden=\"true\"\n            className=\"size-4 group-data-panel-open/button:rotate-90\"\n          />\n          <span className=\"sr-only\">Toggle notification settings</span>\n          Notification settings\n        </CollapsibleTrigger>\n\n        <CollapsibleContent>\n          <Card className=\"p-0\">\n            <FieldGroup className=\"gap-0 divide-y\">\n              {settings.map((item) => (\n                <Field key={item.id}>\n                  <FieldLabel className=\"px-3 py-2\">\n                    <Checkbox defaultChecked={item.defaultChecked} />\n                    <FieldTitle>{item.label}</FieldTitle>\n                  </FieldLabel>\n                </Field>\n              ))}\n            </FieldGroup>\n          </Card>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  )\n}","target":"components/examples/c-collapsible-2.tsx"}],"meta":{"order":2}}