{
  "title": "Collapsible",
  "description": "An interactive component which expands/collapses a panel with smooth spring height morphing and mask-gradient transitions.",
  "name": "motion-collapsible",
  "dependencies": [
    "motion",
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/collapsible.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { AnimatePresence, type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface CollapsibleProps extends CollapsiblePrimitive.Root.Props {}\n\nfunction Collapsible({ className, children, ...props }: CollapsibleProps) {\n    return (\n        <CollapsiblePrimitive.Root data-slot=\"collapsible\" className={cn(\"w-full\", className)} {...props}>\n            {children}\n        </CollapsiblePrimitive.Root>\n    );\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n    return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nexport interface CollapsibleContentProps extends CollapsiblePrimitive.Panel.Props {\n    transition?: Transition;\n}\n\nfunction CollapsibleContent({\n    transition = { type: \"spring\", stiffness: 200, damping: 24 },\n    className,\n    children,\n    ...props\n}: CollapsibleContentProps) {\n    return (\n        <CollapsiblePrimitive.Panel\n            data-slot=\"collapsible-content\"\n            keepMounted\n            {...props}\n            render={(panelProps, state) => (\n                <AnimatePresence initial={false}>\n                    {state.open && (\n                        <motion.div\n                            {...panelProps}\n                            key=\"collapsible-panel\"\n                            initial={{ height: 0, opacity: 0, \"--mask-stop\": \"0%\", y: -6 }}\n                            animate={{ height: \"auto\", opacity: 1, \"--mask-stop\": \"100%\", y: 0 }}\n                            exit={{ height: 0, opacity: 0, \"--mask-stop\": \"0%\", y: -6 }}\n                            transition={transition}\n                            style={{\n                                maskImage: \"linear-gradient(black var(--mask-stop), transparent var(--mask-stop))\",\n                                WebkitMaskImage:\n                                    \"linear-gradient(black var(--mask-stop), transparent var(--mask-stop))\",\n                                overflow: \"hidden\",\n                            }}>\n                            <div className={cn(className)}>{children}</div>\n                        </motion.div>\n                    )}\n                </AnimatePresence>\n            )}\n        />\n    );\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"
    }
  ],
  "mcp": {
    "description": "An interactive component which expands/collapses a panel. Provides spring height morphing, mask-gradient edge reveal, and smooth state transitions.",
    "tags": [
      "component",
      "collapsible",
      "paceui",
      "animation",
      "disclosure"
    ]
  }
}