{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "disclosure-group",
  "title": "disclosure-group",
  "description": "disclosure-group",
  "dependencies": [
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/disclosure-group.tsx",
      "content": "\"use client\"\n\nimport { use } from \"react\"\nimport { Button, type ButtonProps } from \"react-aria-components/Button\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport {\n  Disclosure as PrimitiveDisclosure,\n  type DisclosureProps,\n} from \"react-aria-components/Disclosure\"\nimport type {\n  DisclosureGroupProps,\n  DisclosurePanelProps,\n} from \"react-aria-components/DisclosureGroup\"\nimport {\n  DisclosureGroup as PrimitiveDisclosureGroup,\n  DisclosurePanel as PrimitiveDisclosurePanel,\n  DisclosureStateContext,\n} from \"react-aria-components/DisclosureGroup\"\nimport { Heading } from \"react-aria-components/Heading\"\nimport { twJoin, cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\n\nexport function DisclosureGroup({ className, ...props }: DisclosureGroupProps) {\n  return (\n    <PrimitiveDisclosureGroup\n      className={cx(\n        [\n          \"[--disclosure-gutter-x:--spacing(4)]\",\n          \"[--disclosure-radius:var(--radius-lg)]\",\n          \"[--disclosure-collapsed-border:var(--color-border)]\",\n          \"[--disclosure-expanded-border:var(--color-muted-foreground)]/30\",\n          \"[--disclosure-collapsed-bg:var(--color-background)]\",\n          \"[--disclosure-collapsed-foreground:var(--color-muted-foreground)]\",\n          \"[--disclosure-expanded-bg:var(--color-secondary)]/20\",\n          \"[--disclosure-expanded-foreground:var(--color-foreground)]\",\n          \"flex flex-col gap-y-2\",\n        ],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function Disclosure({ className, ...props }: DisclosureProps) {\n  return (\n    <PrimitiveDisclosure\n      className={composeRenderProps(className, (className, { isExpanded, isFocusVisibleWithin }) =>\n        cn(\n          \"group/disclosure-item inset-ring inset-ring-(--disclosure-collapsed-border,transparent) w-full rounded-(--disclosure-radius,--spacing(0)) bg-(--disclosure-collapsed-bg,transparent) duration-200\",\n          (isExpanded || isFocusVisibleWithin) &&\n            \"inset-ring-(--disclosure-expanded-border,transparent) bg-(--disclosure-expanded-bg)\",\n          \"has-data-hovered:inset-ring-(--disclosure-expanded-border,transparent) has-data-hovered:bg-(--disclosure-expanded-bg)\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface DisclosureTriggerProps extends ButtonProps {\n  ref?: React.Ref<HTMLButtonElement>\n  triggerIndicator?: boolean\n}\n\nexport function DisclosureTrigger({\n  ref,\n  className,\n  triggerIndicator = true,\n  ...props\n}: DisclosureTriggerProps) {\n  const state = use(DisclosureStateContext)!\n  return (\n    <Heading>\n      <Button\n        {...props}\n        ref={ref}\n        slot=\"trigger\"\n        className={cx(\n          [\n            \"relative isolate flex w-full cursor-default items-center justify-between px-(--disclosure-gutter-x,--spacing(0)) py-[calc(var(--disclosure-gutter-x,--spacing(0))-(--spacing(1)))] text-start font-medium text-sm/6 outline-hidden\",\n            \"[&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4 **:[svg]:shrink-0\",\n            \"disabled:opacity-50\",\n            state.isExpanded\n              ? \"rounded-t-(--disclosure-radius) rounded-b-none text-(--disclosure-expanded-foreground)\"\n              : \"rounded-(--disclosure-radius) text-(--disclosure-collapsed-foreground) hover:text-(--disclosure-expanded-foreground)\",\n          ],\n          className\n        )}\n      >\n        {(values) => (\n          <>\n            {typeof props.children === \"function\" ? props.children(values) : props.children}\n            {triggerIndicator && <DisclosureIndicator />}\n          </>\n        )}\n      </Button>\n    </Heading>\n  )\n}\n\nexport function DisclosureIndicator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"disclosure-indicator\"\n      className={cn(\n        \"pointer-events-none relative ms-(--disclosure-gutter-x,--spacing(0)) -me-[calc(var(--disclosure-gutter-x,--spacing(0))-(--spacing(2)))] flex size-6 shrink-0 items-center justify-center [--width:--spacing(2.5)]\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className={twJoin([\n          \"absolute h-[1.5px] w-(--width) origin-center bg-current transition-transform duration-300\",\n          \"rotate-90 group-expanded/disclosure-item:rotate-0 group-expanded:rotate-0\",\n        ])}\n      />\n      <span className=\"absolute h-[1.5px] w-(--width) origin-center bg-current transition-transform duration-300\" />\n    </span>\n  )\n}\n\nexport function DisclosurePanel({ className, ...props }: DisclosurePanelProps) {\n  return (\n    <PrimitiveDisclosurePanel\n      data-slot=\"disclosure-panel\"\n      className={cx(\n        \"h-(--disclosure-panel-height) overflow-clip text-sm/6 transition-[height] duration-200\",\n        className\n      )}\n    >\n      <div\n        data-slot=\"disclosure-panel-content\"\n        className=\"justify-start self-stretch text-pretty px-(--disclosure-gutter-x,--spacing(0)) pt-2 pb-(--disclosure-gutter-x,--spacing(0)) text-(--disclosure-collapsed-foreground)\"\n      >\n        {props.children}\n      </div>\n    </PrimitiveDisclosurePanel>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}