{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "title": "Collapsible",
  "description": "Content opens to its real height on a spring and its rows fall in one after another.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/collapsible.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/collapsible`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport { CollapsiblePanel as CollapsiblePanelPart } from \"@ui-sdk/react/collapsible\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/collapsible\"\n\n/* Height: the panel grows to its measured height over 380ms. Cascade: each direct child\n   rises 8px out of a 4px blur, 32ms after the one before, so the content arrives as the space\n   opens (the children jump to their start while the panel has data-starting-style, otherwise\n   their own delay would hold them visible through that first frame). On close everything\n   leaves together, quickly. Only opacity, translate and filter\n   transition on the children, so the stagger never slows their own hover states. */\nfunction CollapsiblePanel({ className, ...props }: React.ComponentProps<typeof CollapsiblePanelPart>) {\n  return (\n    <CollapsiblePanelPart\n      className={cn(\n        \"h-(--collapsible-panel-height) overflow-hidden\",\n        \"transition-[height] duration-[calc(380ms*var(--kf-speed,1))] ease-house\",\n        \"data-starting-style:h-0 data-ending-style:h-0 data-ending-style:duration-[calc(260ms*var(--kf-speed,1))]\",\n        \"*:transition-[opacity,translate,filter] *:duration-[calc(420ms*var(--kf-speed,1))] *:ease-spring\",\n        \"*:[transition-delay:calc((min(sibling-index(),10)-1)*calc(32ms*var(--kf-speed,1))+calc(40ms*var(--kf-speed,1)))]\",\n        \"data-starting-style:*:translate-y-2 data-starting-style:*:opacity-0 data-starting-style:*:blur-[4px] data-starting-style:*:transition-none\",\n        \"data-ending-style:*:opacity-0 data-ending-style:*:blur-[4px] data-ending-style:*:duration-[calc(150ms*var(--kf-speed,1))] data-ending-style:*:ease-house data-ending-style:*:[transition-delay:0ms]\",\n        \"motion-reduce:transition-none! motion-reduce:*:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { CollapsiblePanel }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/collapsible.tsx"
    },
    {
      "path": "registry/components/keyframery/collapsible.tsx",
      "content": "\"use client\"\n\n/* Styled collapsible: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible as CollapsibleRoot,\n  CollapsiblePanel as CollapsiblePanelPart,\n  CollapsibleTrigger as CollapsibleTriggerPart,\n} from \"@/components/keyframery/primitives/collapsible\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Collapsible({ className, ...props }: React.ComponentProps<typeof CollapsibleRoot>) {\n  return <CollapsibleRoot className={cn(\"flex w-full flex-col\", className)} {...props} />\n}\n\n/* A quiet row: muted text that wakes up on hover, with a chevron that turns when the panel opens. */\nfunction CollapsibleTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsibleTriggerPart>) {\n  return (\n    <CollapsibleTriggerPart\n      className={cn(\n        \"group/collapsible-trigger flex h-9 w-full cursor-pointer items-center gap-3 rounded-[9px] px-2.5 text-left text-[13px] leading-none font-medium text-muted-foreground outline-none select-none\",\n        \"[transition:color_calc(150ms*var(--kf-speed,1)),background-color_calc(150ms*var(--kf-speed,1)),scale_calc(220ms*var(--kf-speed,1))_var(--ease-pop)] motion-reduce:transition-none!\",\n        \"not-data-disabled:hover:bg-foreground/[0.045] not-data-disabled:hover:text-foreground\",\n        \"not-data-disabled:active:scale-[0.98] not-data-disabled:active:bg-foreground/[0.07]\",\n        \"data-open:text-foreground\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-40\",\n        className,\n      )}\n      {...props}\n    >\n      {(state) => (\n        <>\n          <span className=\"min-w-0 flex-1 truncate\">\n            {typeof children === \"function\" ? children(state) : children}\n          </span>\n          <svg\n            aria-hidden\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-4 shrink-0 transition-[rotate] duration-[calc(480ms*var(--kf-speed,1))] ease-spring group-data-open/collapsible-trigger:rotate-180 motion-reduce:transition-none!\"\n          >\n            <path d=\"m4 6 4 4 4-4\" />\n          </svg>\n        </>\n      )}\n    </CollapsibleTriggerPart>\n  )\n}\n\n/* Height and the cascade of the content come from the primitive: put rows straight inside. */\nfunction CollapsiblePanel({ className, ...props }: React.ComponentProps<typeof CollapsiblePanelPart>) {\n  return <CollapsiblePanelPart className={cn(className)} {...props} />\n}\n\nexport { Collapsible, CollapsiblePanel, CollapsibleTrigger }\n",
      "type": "registry:component",
      "target": "components/keyframery/collapsible.tsx"
    }
  ],
  "type": "registry:component"
}