{
  "name": "accordion-icons",
  "type": "registry:ui",
  "componentName": "accordion-icons",
  "description": "Accordion implementation with custom icons that animate on state change.",
  "files": [
    {
      "path": "accordion-icons.tsx",
      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from '@/components/core/accordion';\nimport { ChevronUp } from 'lucide-react';\n\nexport function AccordionIcons() {\n  return (\n    <Accordion\n      className='flex w-full flex-col divide-y divide-zinc-200 dark:divide-zinc-700'\n      transition={{ duration: 0.2, ease: 'easeInOut' }}\n    >\n      <AccordionItem value='getting-started' className='py-2'>\n        <AccordionTrigger className='w-full text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center justify-between'>\n            <div>Getting Started</div>\n            <ChevronUp className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:-rotate-180 dark:text-zinc-50' />\n          </div>\n        </AccordionTrigger>\n        <AccordionContent>\n          <p className='text-zinc-500 dark:text-zinc-400'>\n            Discover the fundamental concepts of Components. This section\n            guides you through the installation process and provides an overview\n            of how to integrate these components into your projects. Learn about\n            the core functionalities and how to set up your first animation\n            effectively.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value='animation-properties' className='py-2'>\n        <AccordionTrigger className='w-full text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center justify-between'>\n            <div>Animation Properties</div>\n            <ChevronUp className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:-rotate-180 dark:text-zinc-50' />\n          </div>\n        </AccordionTrigger>\n        <AccordionContent>\n          <p className='text-zinc-500 dark:text-zinc-400'>\n            Explore the comprehensive range of animation properties available in\n            Components. Understand how to manipulate timing, easing, and\n            delays to create smooth, dynamic animations. This segment also\n            covers the customization of animations to fit the flow and style of\n            your web applications.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value='advanced-usage' className='py-2'>\n        <AccordionTrigger className='w-full text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center justify-between'>\n            <div>Advanced Usage</div>\n            <ChevronUp className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:-rotate-180 dark:text-zinc-50' />\n          </div>\n        </AccordionTrigger>\n        <AccordionContent>\n          <p className='text-zinc-500 dark:text-zinc-400'>\n            Dive deeper into advanced techniques and features of\n            Components. Learn about chaining animations, creating complex\n            sequences, and utilizing motion sensors for interactive animations.\n            Gain insights on how to leverage these advanced features to enhance\n            user experience and engagement.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value='community-and-support' className='py-2'>\n        <AccordionTrigger className='w-full text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center justify-between'>\n            <div>Community and Support</div>\n            <ChevronUp className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:-rotate-180 dark:text-zinc-50' />\n          </div>\n        </AccordionTrigger>\n        <AccordionContent>\n          <p className='text-zinc-500 dark:text-zinc-400'>\n            Engage with the Components community to gain additional\n            support and insight. Find out how to participate in discussions,\n            contribute to the project, and access a wealth of shared knowledge\n            and resources. Learn about upcoming features, best practices, and\n            how to get help with your specific use cases.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/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(\n            child as React.ReactElement<{\n              value?: React.Key;\n              expanded?: boolean;\n            }>,\n            {\n            value,\n            expanded: isExpanded,\n            }\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"
    }
  ]
}