{
  "name": "accordion",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "accordion.tsx",
      "content": "'use client';\nimport {\n  motion,\n  AnimatePresence,\n  Transition,\n  Variants,\n  Variant,\n  MotionConfig,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport React, { createContext, useContext, useState, ReactNode } from 'react';\n\nexport type AccordionContextType = {\n  expandedValue: React.Key | null;\n  toggleItem: (value: React.Key) => void;\n  variants?: { expanded: Variant; collapsed: Variant };\n};\n\nconst AccordionContext = createContext<AccordionContextType | undefined>(\n  undefined\n);\n\nfunction useAccordion() {\n  const context = useContext(AccordionContext);\n  if (!context) {\n    throw new Error('useAccordion must be used within an AccordionProvider');\n  }\n  return context;\n}\n\nexport type AccordionProviderProps = {\n  children: ReactNode;\n  variants?: { expanded: Variant; collapsed: Variant };\n  expandedValue?: React.Key | null;\n  onValueChange?: (value: React.Key | null) => void;\n};\n\nfunction AccordionProvider({\n  children,\n  variants,\n  expandedValue: externalExpandedValue,\n  onValueChange,\n}: AccordionProviderProps) {\n  const [internalExpandedValue, setInternalExpandedValue] =\n    useState<React.Key | null>(null);\n\n  const expandedValue =\n    externalExpandedValue !== undefined\n      ? externalExpandedValue\n      : internalExpandedValue;\n\n  const toggleItem = (value: React.Key) => {\n    const newValue = expandedValue === value ? null : value;\n    if (onValueChange) {\n      onValueChange(newValue);\n    } else {\n      setInternalExpandedValue(newValue);\n    }\n  };\n\n  return (\n    <AccordionContext.Provider value={{ expandedValue, toggleItem, variants }}>\n      {children}\n    </AccordionContext.Provider>\n  );\n}\n\nexport type AccordionProps = {\n  children: ReactNode;\n  className?: string;\n  transition?: Transition;\n  variants?: { expanded: Variant; collapsed: Variant };\n  expandedValue?: React.Key | null;\n  onValueChange?: (value: React.Key | null) => void;\n};\n\nfunction Accordion({\n  children,\n  className,\n  transition,\n  variants,\n  expandedValue,\n  onValueChange,\n}: AccordionProps) {\n  return (\n    <MotionConfig transition={transition}>\n      <div className={cn('relative', className)} aria-orientation='vertical'>\n        <AccordionProvider\n          variants={variants}\n          expandedValue={expandedValue}\n          onValueChange={onValueChange}\n        >\n          {children}\n        </AccordionProvider>\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport type AccordionItemProps = {\n  value: React.Key;\n  children: ReactNode;\n  className?: string;\n};\n\nfunction AccordionItem({ value, children, className }: AccordionItemProps) {\n  const { expandedValue } = useAccordion();\n  const isExpanded = value === expandedValue;\n\n  return (\n    <div\n      className={cn('overflow-hidden', className)}\n      {...(isExpanded ? { 'data-expanded': '' } : {'data-closed': ''})}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            ...child.props,\n            value,\n            expanded: isExpanded,\n          });\n        }\n        return child;\n      })}\n    </div>\n  );\n}\n\nexport type AccordionTriggerProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nfunction AccordionTrigger({\n  children,\n  className,\n  ...props\n}: AccordionTriggerProps) {\n  const { toggleItem, expandedValue } = useAccordion();\n  const value = (props as { value?: React.Key }).value;\n  const isExpanded = value === expandedValue;\n\n  return (\n    <button\n      onClick={() => value !== undefined && toggleItem(value)}\n      aria-expanded={isExpanded}\n      type='button'\n      className={cn('group', className)}\n      {...(isExpanded ? { 'data-expanded': '' } : {'data-closed': ''})}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport type AccordionContentProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nfunction AccordionContent({\n  children,\n  className,\n  ...props\n}: AccordionContentProps) {\n  const { expandedValue, variants } = useAccordion();\n  const value = (props as { value?: React.Key }).value;\n  const isExpanded = value === expandedValue;\n\n  const BASE_VARIANTS: Variants = {\n    expanded: { height: 'auto', opacity: 1 },\n    collapsed: { height: 0, opacity: 0 },\n  };\n\n  const combinedVariants = {\n    expanded: { ...BASE_VARIANTS.expanded, ...variants?.expanded },\n    collapsed: { ...BASE_VARIANTS.collapsed, ...variants?.collapsed },\n  };\n\n  return (\n    <AnimatePresence initial={false}>\n      {isExpanded && (\n        <motion.div\n          initial='collapsed'\n          animate='expanded'\n          exit='collapsed'\n          variants={combinedVariants}\n          className={className}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
      "type": "registry:ui"
    }
  ]
}