{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-collapsible",
  "title": "RetroCollapsible",
  "description": "A Mac OS 9 styled collapsible disclosure with rotating triangle indicator, Charcoal heading trigger, and indented Geneva content area, built on UI SDK Collapsible.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.1",
    "@ui-sdk/react@0.1.0-beta.1"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-collapsible.tsx",
      "content": "\"use client\"\n\n/*\n * RetroCollapsible on UI SDK Collapsible.\n *\n * Crafted moments:\n *  - The disclosure triangle turns the way the Finder's did, in two hard\n *    frames through 45°, not a smooth spin. Both flairs.\n *  - The content morphs its height open and shut (220ms open, 180ms close)\n *    so whatever sits below slides instead of jumping. Classic flair and\n *    reduced motion pop it open at once.\n */\n\nimport * as React from \"react\"\nimport {\n  Collapsible as CollapsiblePrimitive,\n  CollapsiblePanel as CollapsiblePanelPrimitive,\n  CollapsibleTrigger as CollapsibleTriggerPrimitive,\n} from \"@ui-sdk/react/collapsible\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Common = { className?: string; children?: React.ReactNode }\n\nfunction RetroCollapsible({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof CollapsiblePrimitive>, \"className\" | \"children\"> &\n  Common) {\n  return <CollapsiblePrimitive className={cn(\"w-full\", className)} {...props} />\n}\n\nfunction RetroCollapsibleTrigger({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof CollapsibleTriggerPrimitive>, \"className\" | \"children\"> &\n  Common) {\n  return (\n    <CollapsibleTriggerPrimitive\n      className={cn(\n        \"group/collapsible-trigger flex flex-row items-center gap-1 cursor-pointer select-none\",\n        \"os9-heading text-[12px]\",\n        \"focus-visible:os9-focus-ring\",\n        className\n      )}\n      {...props}\n    >\n      {/* Disclosure triangle: 0° → 45° → 90° in two frames */}\n      <svg\n        width=\"8\"\n        height=\"8\"\n        viewBox=\"0 0 8 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={cn(\n          \"shrink-0 transition-transform duration-[110ms] [transition-timing-function:steps(2,end)]\",\n          \"motion-reduce:transition-none\",\n          \"group-data-open/collapsible-trigger:rotate-90\"\n        )}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M2 1L6 4L2 7Z\" fill=\"var(--os9-black)\" />\n      </svg>\n      {children}\n    </CollapsibleTriggerPrimitive>\n  )\n}\n\nfunction RetroCollapsibleContent({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof CollapsiblePanelPrimitive>, \"className\" | \"children\"> &\n  Common) {\n  return (\n    <CollapsiblePanelPrimitive\n      className={cn(\n        \"h-(--collapsible-panel-height) overflow-hidden\",\n        \"transition-[height] duration-220 ease-[cubic-bezier(0.23,1,0.32,1)]\",\n        \"data-starting-style:h-0 data-ending-style:h-0 data-ending-style:duration-180\",\n        \"in-data-[flair=classic]:transition-none motion-reduce:transition-none\"\n      )}\n      {...props}\n    >\n      <div className={cn(\"pl-4 font-[family-name:var(--os9-font-sans)] text-[10px]\", className)}>\n        {children}\n      </div>\n    </CollapsiblePanelPrimitive>\n  )\n}\n\nexport { RetroCollapsible, RetroCollapsibleTrigger, RetroCollapsibleContent }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}