{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"disclosure-web","type":"registry:item","title":"Disclosure","description":"A trigger and content panel that reveals or hides a single section of supplementary information.","files":[{"path":"snippets/web/disclosure.tsx","content":"import React from \"react\";\nimport { Button, Chip, Disclosure } from \"@heroui/react\";\nimport { Icon } from \"@iconify/react\";\n\nexport function DisclosureExample() {\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <div className=\"flex items-center gap-4\">\n        <Button variant=\"primary\" onPress={() => setIsExpanded(!isExpanded)}>\n          {isExpanded ? \"Collapse\" : \"Expand\"} from outside\n        </Button>\n        <Chip color={isExpanded ? \"success\" : \"default\"}>\n          State: {isExpanded ? \"Expanded\" : \"Collapsed\"}\n        </Chip>\n      </div>\n      <Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>\n        <Disclosure.Trigger className=\"mb-2 flex w-full items-center justify-between rounded-md border border-gray-300 px-4 py-2 text-start hover:bg-gray-50\">\n          <span>Toggle content</span>\n          <Icon\n            className=\"size-4 transition-transform duration-200 data-[state=open]:rotate-180\"\n            icon=\"gravity-ui:chevron-down\"\n          />\n        </Disclosure.Trigger>\n        <Disclosure.Content>\n          <Disclosure.Body className=\"rounded-lg border p-4\">\n            <p className=\"text-sm\">\n              This disclosure is controlled from outside. You can toggle it using the button above\n              or by clicking the trigger.\n            </p>\n          </Disclosure.Body>\n        </Disclosure.Content>\n      </Disclosure>\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/disclosure.tsx"}],"author":"heroui","dependencies":["@heroui/react","@iconify/react"]}