{
  "name": "transition-panel-tabs",
  "type": "registry:ui",
  "componentName": "transition-panel",
  "description": "Tab interface using transition panel for smooth content switching.",
  "files": [
    {
      "path": "transition-panel-tabs.tsx",
      "content": "'use client';\nimport React, { useState } from 'react';\nimport { TransitionPanel } from '@/components/core/transition-panel';\n\nexport function TabsTransitionPanel() {\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const ITEMS = [\n    {\n      title: 'Aesthetics',\n      subtitle: 'Refining Visual Harmony',\n      content:\n        'Explore the principles of motion aesthetics that enhance the visual appeal of interfaces. Learn to balance timing, easing, and the flow of motion to create seamless user experiences.',\n    },\n    {\n      title: 'Art',\n      subtitle: 'Narrative and Expression',\n      content:\n        'Delve into how motion can be used as an artistic tool to tell stories and evoke emotions, making digital interactions feel more human and expressive.',\n    },\n    {\n      title: 'Technique',\n      subtitle: 'Mastering Motion Tools',\n      content:\n        'Gain proficiency in advanced techniques such as physics-based animations, 3D transformations, and complex sequencing to elevate your design skills and implementation.',\n    },\n  ];\n\n  return (\n    <div>\n      <div className='mb-4 flex space-x-2'>\n        {ITEMS.map((item, index) => (\n          <button\n            key={index}\n            onClick={() => setActiveIndex(index)}\n            className={`rounded-md px-3 py-1 text-sm font-medium ${\n              activeIndex === index\n                ? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'\n                : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-400'\n            }`}\n          >\n            {item.title}\n          </button>\n        ))}\n      </div>\n      <div className='overflow-hidden border-t border-zinc-200 dark:border-zinc-700'>\n        <TransitionPanel\n          activeIndex={activeIndex}\n          transition={{ duration: 0.2, ease: 'easeInOut' }}\n          variants={{\n            enter: { opacity: 0, y: -50, filter: 'blur(4px)' },\n            center: { opacity: 1, y: 0, filter: 'blur(0px)' },\n            exit: { opacity: 0, y: 50, filter: 'blur(4px)' },\n          }}\n        >\n          {ITEMS.map((item, index) => (\n            <div key={index} className='py-2'>\n              <h3 className='mb-2 font-medium text-zinc-800 dark:text-zinc-100'>\n                {item.subtitle}\n              </h3>\n              <p className='text-zinc-600 dark:text-zinc-400'>{item.content}</p>\n            </div>\n          ))}\n        </TransitionPanel>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/transition-panel.tsx",
      "content": "'use client';\nimport {\n  AnimatePresence,\n  Transition,\n  Variant,\n  motion,\n  MotionProps,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport type TransitionPanelProps = {\n  children: React.ReactNode[];\n  className?: string;\n  transition?: Transition;\n  activeIndex: number;\n  variants?: { enter: Variant; center: Variant; exit: Variant };\n} & MotionProps;\n\nexport function TransitionPanel({\n  children,\n  className,\n  transition,\n  variants,\n  activeIndex,\n  ...motionProps\n}: TransitionPanelProps) {\n  return (\n    <div className={cn('relative', className)}>\n      <AnimatePresence\n        initial={false}\n        mode='popLayout'\n        custom={motionProps.custom}\n      >\n        <motion.div\n          key={activeIndex}\n          variants={variants}\n          transition={transition}\n          initial='enter'\n          animate='center'\n          exit='exit'\n          {...motionProps}\n        >\n          {children[activeIndex]}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}