22 lines
3.8 KiB
JSON
22 lines
3.8 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "headless-accordion",
|
|
"type": "registry:ui",
|
|
"title": "Headless Accordion",
|
|
"description": "A vertically stacked set of interactive headings that each reveal an associated section of content built with Headless UI.",
|
|
"dependencies": [
|
|
"lucide-react",
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/headless-disclosure"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/headless/accordion/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport {\n Disclosure,\n DisclosureButton,\n DisclosurePanel,\n type DisclosureProps,\n type DisclosureButtonProps,\n type DisclosurePanelProps,\n} from '@/components/animate-ui/headless/disclosure';\n\ntype AccordionProps<TTag extends React.ElementType = 'div'> =\n React.ComponentProps<TTag> & {\n children: React.ReactNode;\n as?: TTag;\n };\n\nfunction Accordion<TTag extends React.ElementType = 'div'>({\n as: Component = 'div',\n ...props\n}: AccordionProps<TTag>) {\n return <Component data-slot=\"accordion\" {...props} />;\n}\n\ntype AccordionItemProps<TTag extends React.ElementType = 'div'> =\n DisclosureProps<TTag> & {\n className?: string;\n as?: TTag;\n };\n\nfunction AccordionItem<TTag extends React.ElementType = 'div'>(\n props: AccordionItemProps<TTag>,\n) {\n const { className, as = 'div', ...rest } = props;\n\n return (\n <Disclosure\n data-slot=\"accordion-item\"\n {...rest}\n as={as as React.ElementType}\n className={cn('border-b', className)}\n />\n );\n}\n\ntype AccordionButtonProps<TTag extends React.ElementType = 'button'> =\n DisclosureButtonProps<TTag> & {\n transition?: Transition;\n chevron?: boolean;\n className?: string;\n as?: TTag;\n };\n\nfunction AccordionButton<TTag extends React.ElementType = 'button'>(\n props: AccordionButtonProps<TTag>,\n) {\n const {\n children,\n className,\n transition = { type: 'spring', stiffness: 150, damping: 17 },\n chevron = true,\n ...rest\n } = props;\n\n return (\n <DisclosureButton\n data-slot=\"accordion-button\"\n {...rest}\n className={cn(\n 'flex w-full text-start flex-1 items-center justify-between py-4 font-medium hover:underline',\n className,\n )}\n >\n {(bag) => (\n <>\n {typeof children === 'function' ? children(bag) : children}\n\n {chevron && (\n <motion.div\n data-slot=\"accordion-button-chevron\"\n animate={{ rotate: bag.open ? 180 : 0 }}\n transition={transition}\n >\n <ChevronDown className=\"size-5 shrink-0\" />\n </motion.div>\n )}\n </>\n )}\n </DisclosureButton>\n );\n}\n\ntype AccordionPanelProps<TTag extends React.ElementType = 'div'> =\n DisclosurePanelProps<TTag> & {\n as?: TTag;\n };\n\nfunction AccordionPanel<TTag extends React.ElementType = 'div'>(\n props: AccordionPanelProps<TTag>,\n) {\n const { children, className, as = 'div', ...rest } = props;\n\n return (\n <DisclosurePanel\n data-slot=\"accordion-panel\"\n {...rest}\n as={as as React.ElementType}\n >\n {(bag) => (\n <div className={cn('pb-4 pt-0 text-sm', className)}>\n {typeof children === 'function' ? children(bag) : children}\n </div>\n )}\n </DisclosurePanel>\n );\n}\n\nexport {\n Accordion,\n AccordionItem,\n AccordionButton,\n AccordionPanel,\n type AccordionProps,\n type AccordionItemProps,\n type AccordionButtonProps,\n type AccordionPanelProps,\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/headless/accordion.tsx"
|
|
}
|
|
]
|
|
} |