19 lines
3.4 KiB
JSON
19 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-collapsible",
|
|
"type": "registry:ui",
|
|
"title": "Collapsible",
|
|
"description": "An interactive component which expands/collapses a panel.",
|
|
"dependencies": [
|
|
"motion",
|
|
"radix-ui"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix/collapsible/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport {\n AnimatePresence,\n motion,\n type HTMLMotionProps,\n type Transition,\n} from 'motion/react';\n\ntype CollapsibleContextType = {\n isOpen: boolean;\n};\n\nconst CollapsibleContext = React.createContext<\n CollapsibleContextType | undefined\n>(undefined);\n\nconst useCollapsible = (): CollapsibleContextType => {\n const context = React.useContext(CollapsibleContext);\n if (!context) {\n throw new Error('useCollapsible must be used within a Collapsible');\n }\n return context;\n};\n\ntype CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>;\n\nfunction Collapsible({ children, ...props }: CollapsibleProps) {\n const [isOpen, setIsOpen] = React.useState(\n props?.open ?? props?.defaultOpen ?? false,\n );\n\n React.useEffect(() => {\n if (props?.open !== undefined) setIsOpen(props.open);\n }, [props?.open]);\n\n const handleOpenChange = React.useCallback(\n (open: boolean) => {\n setIsOpen(open);\n props.onOpenChange?.(open);\n },\n [props],\n );\n\n return (\n <CollapsibleContext.Provider value={{ isOpen }}>\n <CollapsiblePrimitive.Root\n data-slot=\"collapsible\"\n {...props}\n onOpenChange={handleOpenChange}\n >\n {children}\n </CollapsiblePrimitive.Root>\n </CollapsibleContext.Provider>\n );\n}\n\ntype CollapsibleTriggerProps = React.ComponentProps<\n typeof CollapsiblePrimitive.Trigger\n>;\n\nfunction CollapsibleTrigger(props: CollapsibleTriggerProps) {\n return (\n <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n );\n}\n\ntype CollapsibleContentProps = React.ComponentProps<\n typeof CollapsiblePrimitive.Content\n> &\n HTMLMotionProps<'div'> & {\n transition?: Transition;\n };\n\nfunction CollapsibleContent({\n className,\n children,\n transition = { type: 'spring', stiffness: 150, damping: 22 },\n ...props\n}: CollapsibleContentProps) {\n const { isOpen } = useCollapsible();\n\n return (\n <AnimatePresence>\n {isOpen && (\n <CollapsiblePrimitive.Content asChild forceMount {...props}>\n <motion.div\n key=\"collapsible-content\"\n data-slot=\"collapsible-content\"\n layout\n initial={{ opacity: 0, height: 0, overflow: 'hidden' }}\n animate={{ opacity: 1, height: 'auto', overflow: 'hidden' }}\n exit={{ opacity: 0, height: 0, overflow: 'hidden' }}\n transition={transition}\n className={className}\n {...props}\n >\n {children}\n </motion.div>\n </CollapsiblePrimitive.Content>\n )}\n </AnimatePresence>\n );\n}\n\nexport {\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n useCollapsible,\n type CollapsibleContextType,\n type CollapsibleProps,\n type CollapsibleTriggerProps,\n type CollapsibleContentProps,\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/radix/collapsible.tsx"
|
|
}
|
|
]
|
|
} |