{
  "name": "accordion-variant",
  "type": "registry:ui",
  "componentName": "accordion-variant",
  "description": "Styled variant of the accordion component with custom appearance.",
  "files": [
    {
      "path": "accordion-variant.tsx",
      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from '@/components/core/accordion';\nimport { ChevronRight } from 'lucide-react';\n\nexport function AccordionVariant() {\n  return (\n    <Accordion\n      className='flex w-full flex-col'\n      transition={{ type: 'spring', stiffness: 120, damping: 20 }}\n      variants={{\n        expanded: {\n          opacity: 1,\n          scale: 1,\n        },\n        collapsed: {\n          opacity: 0,\n          scale: 0.7,\n        },\n      }}\n    >\n      <AccordionItem value='getting-started' className='py-2'>\n        <AccordionTrigger className='w-full py-0.5 text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center'>\n            <ChevronRight className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:rotate-90 dark:text-zinc-50' />\n            <div className='ml-2 text-zinc-950 dark:text-zinc-50'>\n              How do I start with Components?\n            </div>\n          </div>\n        </AccordionTrigger>\n        <AccordionContent className='origin-left'>\n          <p className='pl-6 pr-2 text-zinc-500 dark:text-zinc-400'>\n            Kick off your experience by setting up Components. This\n            section covers the basics of installation and how to add animations\n            to your projects. You’ll get familiar with the initial setup and the\n            core features quickly.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value='animation-properties' className='py-2'>\n        <AccordionTrigger className='w-full py-0.5 text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center'>\n            <ChevronRight className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:rotate-90 dark:text-zinc-50' />\n            <div className='ml-2 text-zinc-950 dark:text-zinc-50'>\n              What are the key animation properties?\n            </div>\n          </div>\n        </AccordionTrigger>\n        <AccordionContent className='origin-left'>\n          <p className='pl-6 pr-2 text-zinc-500 dark:text-zinc-400'>\n            Discover a variety of properties to customize your animations. Learn\n            to adjust timing, easing, and delays for smoother effects. This\n            guide will help you tailor these settings to your app’s needs.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value='advanced-features' className='py-2'>\n        <AccordionTrigger className='w-full py-0.5 text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center'>\n            <ChevronRight className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:rotate-90 dark:text-zinc-50' />\n            <div className='ml-2 text-zinc-950 dark:text-zinc-50'>\n              How do I use advanced features?\n            </div>\n          </div>\n        </AccordionTrigger>\n        <AccordionContent className='origin-left'>\n          <p className='pl-6 pr-2 text-zinc-500 dark:text-zinc-400'>\n            Advance your skills by using more complex functions of\n            Components. Explore how to link animations together, create\n            intricate sequences, and interact with motion sensors for dynamic\n            effects.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value='community-support' className='py-2'>\n        <AccordionTrigger className='w-full py-0.5 text-left text-zinc-950 dark:text-zinc-50'>\n          <div className='flex items-center'>\n            <ChevronRight className='h-4 w-4 text-zinc-950 transition-transform duration-200 group-data-expanded:rotate-90 dark:text-zinc-50' />\n            <div className='ml-2 text-zinc-950 dark:text-zinc-50'>\n              How do I engage with the community?\n            </div>\n          </div>\n        </AccordionTrigger>\n        <AccordionContent className='origin-left'>\n          <p className='pl-6 pr-2 text-zinc-500 dark:text-zinc-400'>\n            Connect with the Components community for support and\n            collaboration. Learn how to contribute, share knowledge, and access\n            helpful resources. Stay updated on new updates and collective\n            insights.\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"
    }
  ]
}