{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "Accessible disclosure primitive with measured open and close motion.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/collapsible-knobs.ts",
      "target": "@components/control-ui/knob-contracts/collapsible-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/collapsible.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const collapsibleKnobs = [] as const;\nexport type CollapsibleKnobStyle = Partial<Record<(typeof collapsibleKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/collapsible.css",
      "target": "@components/control-ui/styles/recipes/collapsible.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"collapsible\"][data-slot=\"trigger\"]) {\n    outline: none;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"collapsible\"][data-slot=\"trigger\"] > svg) {\n    transition: rotate var(--duration-base) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"collapsible\"][data-slot=\"content\"]) {\n    transition-property: height, opacity;\n    transition-duration: var(--duration-slow);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"collapsible\"][data-slot=\"content\"][data-starting-style]),\n  :where([data-control-family=\"collapsible\"][data-slot=\"content\"][data-ending-style]) {\n    opacity: 0;\n  }\n\n  :where([data-control-family=\"collapsible\"][data-slot=\"trigger\"][data-state=\"open\"] > svg) {\n    rotate: 90deg;\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/collapsible.tsx",
      "target": "@components/control-ui/ui/collapsible.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport type { OpenChangeEventDetails, RenderProp } from \"@/components/control-ui/control-props\";\nimport type { CollapsibleKnobStyle } from \"@/components/control-ui/knob-contracts/collapsible-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type CollapsibleProps = Omit<ComponentProps<\"div\">, \"onChange\"> & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;\n  children?: ReactNode;\n} & { style?: CSSProperties & CollapsibleKnobStyle };\n\nexport type CollapsibleTriggerProps = Omit<ComponentProps<\"button\">, \"style\"> & {\n  \"data-slot\"?: string;\n  render?: RenderProp<ComponentProps<\"button\">, { open: boolean }>;\n  nativeButton?: boolean;\n  style?: CSSProperties & CollapsibleKnobStyle;\n};\n\nexport type CollapsibleContentProps = ComponentProps<\"div\"> & {\n  \"data-slot\"?: string;\n  keepMounted?: boolean;\n} & { style?: CSSProperties & CollapsibleKnobStyle };\n\nfunction CollapsibleTriggerElement({\n  triggerProps,\n  open,\n  render,\n  className,\n  children,\n}: {\n  triggerProps: ComponentProps<\"button\"> & { \"data-control-ui\"?: string; \"data-control-family\"?: string; \"data-slot\"?: string };\n  open: boolean;\n  render: CollapsibleTriggerProps[\"render\"];\n  className?: string;\n  children: ReactNode;\n}) {\n  const state = { open };\n\n  return useRender({\n    defaultTagName: \"button\",\n    render,\n    state,\n    props: {\n      ...triggerProps,\n      \"data-control-ui\": triggerProps[\"data-control-ui\"] ?? \"collapsible\",\n      \"data-control-family\": triggerProps[\"data-control-family\"] ?? \"collapsible\",\n      \"data-slot\": triggerProps[\"data-slot\"] ?? \"trigger\",\n      \"data-state\": open ? \"open\" : \"closed\",\n      className: cn(triggerProps.className, className),\n      children,\n    },\n  });\n}\n\n// emits its own anatomy and state hooks, so consumers never style on Base UI's private attributes\nexport function Collapsible({ className, ...props }: CollapsibleProps) {\n  return (\n    <CollapsiblePrimitive.Root\n      className={className}\n      render={(renderProps, state) => (\n        <div\n          data-control-ui=\"collapsible\"\n          data-control-family=\"collapsible\"\n          data-slot=\"root\"\n          {...renderProps}\n          data-state={state.open ? \"open\" : \"closed\"}\n          className={renderProps.className}\n        />\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CollapsibleTrigger({ render, className, children, ...props }: CollapsibleTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-control-ui=\"collapsible\"\n      data-control-family=\"collapsible\"\n      data-slot=\"trigger\"\n      className=\"cursor-pointer\"\n      {...props}\n      render={(triggerProps, state) => (\n        <CollapsibleTriggerElement triggerProps={triggerProps} open={state.open} render={render} className={className}>\n          {children}\n        </CollapsibleTriggerElement>\n      )}\n    />\n  );\n}\n\nexport function CollapsibleContent({ className, children, ...props }: CollapsibleContentProps) {\n  return (\n    <CollapsiblePrimitive.Panel\n      className=\"h-[var(--collapsible-panel-height)] overflow-hidden data-ending-style:h-0 data-starting-style:h-0\"\n      {...props}\n      render={(renderProps, state) => (\n        <div\n          data-control-ui=\"collapsible\"\n          data-control-family=\"collapsible\"\n          data-slot=\"content\"\n          {...renderProps}\n          data-state={state.open ? \"open\" : \"closed\"}\n          className={renderProps.className}\n        />\n      )}\n    >\n      <div className={className}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/collapsible.css\"": {}
  },
  "meta": {}
}