{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:item",
  "title": "Collapsible",
  "description": "An expandable/collapsible panel controlled by a button.",
  "files": [
    {
      "path": "registry/brook/ui/collapsible/collapsible.tsx",
      "content": "\"use client\";\n\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./collapsible.module.css\";\n\nfunction CollapsibleRoot({ className, ...props }: Collapsible.Root.Props) {\n  return <Collapsible.Root className={cn(styles.root, className)} {...props} />;\n}\n\nfunction CollapsibleTrigger({ className, children, ...props }: Collapsible.Trigger.Props) {\n  return (\n    <Collapsible.Trigger className={cn(styles.trigger, className)} {...props}>\n      {children}\n      <svg aria-hidden=\"true\" className={styles.chevron} fill=\"none\" height=\"16\" viewBox=\"0 0 24 24\" width=\"16\">\n        <path d=\"m7 15 5 5 5-5\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" />\n        <path d=\"m7 9 5-5 5 5\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" />\n      </svg>\n    </Collapsible.Trigger>\n  );\n}\n\nfunction CollapsiblePanel({ className, ...props }: Collapsible.Panel.Props) {\n  return <Collapsible.Panel className={cn(styles.panel, className)} data-slot=\"collapsible-panel\" {...props} />;\n}\n\nexport { CollapsibleRoot as Collapsible, CollapsiblePanel, CollapsibleTrigger };\n",
      "type": "registry:file",
      "target": "~/components/ui/collapsible/collapsible.tsx"
    },
    {
      "path": "registry/brook/ui/collapsible/collapsible.module.css",
      "content": ".root {\n  display: flex;\n  width: 100%;\n  max-width: 14rem;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--foreground);\n}\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0;\n  outline: 0;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  background-color: var(--mix-card-15-bg);\n  color: var(--foreground);\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease-out;\n  border: 1px solid var(--border);\n\n  &:hover {\n    background-color: var(--mix-card-50-bg);\n  }\n\n  &:active {\n    background-color: var(--mix-card-15-bg);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &:hover {\n      background-color: var(--muted);\n    }\n  }\n\n  &[data-panel-open] .chevron path:first-child {\n    transform: translate(0, -10px);\n  }\n\n  &[data-panel-open] .chevron path:last-child {\n    transform: translate(0, 10px);\n  }\n}\n\n.chevron {\n  width: 0.75rem;\n  height: 0.75rem;\n  flex-shrink: 0;\n  color: var(--muted-foreground);\n\n  & path:first-child {\n    transition: transform 200ms var(--ease-out-expo);\n    transform-origin: center;\n  }\n\n  & path:last-child {\n    transition: transform 200ms var(--ease-out-expo);\n    transform-origin: center;\n  }\n}\n\n.panel {\n  display: flex;\n  height: var(--collapsible-panel-height);\n  flex-direction: column;\n  justify-content: end;\n  overflow: hidden;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  transition: all 150ms ease-out;\n  width: 100%;\n  box-sizing: border-box;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    height: 0;\n  }\n\n  &[data-closed] {\n    height: 0;\n    border: none;\n    animation: slideUp 250ms var(--ease-out-expo);\n  }\n\n  &[data-panel-open] {\n    animation: slideDown 250ms var(--ease-out-expo);\n  }\n}\n\n@keyframes slideDown {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--collapsible-panel-height);\n  }\n}\n\n@keyframes slideUp {\n  from {\n    height: var(--collapsible-panel-height);\n  }\n  to {\n    height: 0;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/collapsible/collapsible.module.css"
    }
  ]
}