{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transition-tab-motion",
  "type": "registry:component",
  "description": "A tab component with transition effects.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/tabs/transition-tab/TransitionTabMotion.tsx",
      "content": "'use client';\r\nimport React, { useState } from 'react';\r\nimport {\r\n  AnimatePresence,\r\n  Transition,\r\n  Variant,\r\n  motion,\r\n  MotionProps,\r\n} from 'motion/react';\r\nimport { cn } from '@/lib/utils';\r\n\r\n type TransitionPanelProps = {\r\n  children: React.ReactNode[];\r\n  className?: string;\r\n  transition?: Transition;\r\n  activeIndex: number;\r\n  variants?: { enter: Variant; center: Variant; exit: Variant };\r\n} & MotionProps;\r\n\r\n function TransitionPanel({\r\n  children,\r\n  className,\r\n  transition,\r\n  variants,\r\n  activeIndex,\r\n  ...motionProps\r\n}: TransitionPanelProps) {\r\n  return (\r\n    <div className={cn('relative', className)}>\r\n      <AnimatePresence\r\n        initial={false}\r\n        mode='popLayout'\r\n        custom={motionProps.custom}\r\n      >\r\n        <motion.div\r\n          key={activeIndex}\r\n          variants={variants}\r\n          transition={transition}\r\n          initial='enter'\r\n          animate='center'\r\n          exit='exit'\r\n          {...motionProps}\r\n        >\r\n          {children[activeIndex]}\r\n        </motion.div>\r\n      </AnimatePresence>\r\n    </div>\r\n  );\r\n}\r\n\r\n\r\nconst ITEMS = [\r\n  {\r\n    title: 'AI Table Builder',\r\n    subtitle: 'Transforming Data into Insights',\r\n    content:\r\n      'Quickly generate interactive tables powered by AI. Import data, auto-format columns, and enable features like sorting, filtering, and pagination without writing manual code. Perfect for dashboards, admin panels, and data-heavy applications.',\r\n  },\r\n  {\r\n    title: 'AI Form Builder',\r\n    subtitle: 'Streamlined Form Creation',\r\n    content:\r\n      'Design complex forms effortlessly with AI. From simple contact forms to multi-step onboarding flows, the builder handles validation, conditional logic, and responsive layouts — helping you collect accurate data faster.',\r\n  },\r\n  {\r\n    title: 'AI Chart Builder',\r\n    subtitle: 'Visualizing Data Intelligently',\r\n    content:\r\n      'Turn raw numbers into beautiful, interactive charts with AI assistance. Choose from line, bar, pie, or advanced visualizations, and let the builder suggest the best chart type for your dataset to highlight key insights instantly.',\r\n  },\r\n];\r\n\r\n\r\nexport default function TransitionTabMotion() {\r\n  const [activeIndex, setActiveIndex] = useState(0);\r\n\r\n  return (\r\n    <div>\r\n      {/* Tabs */}\r\n      <div className=\"mb-4 flex space-x-2\">\r\n        {ITEMS.map(({ title }, index) => {\r\n          const isActive = activeIndex === index;\r\n          return (\r\n            <button\r\n              key={title}\r\n              onClick={() => setActiveIndex(index)}\r\n              className={`rounded-md px-4 py-2 text-sm font-medium transition-colors\r\n                ${isActive\r\n                  ? 'bg-primary text-white'\r\n                  : 'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400'\r\n                }`}\r\n            >\r\n              {title}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {/* Transition Content */}\r\n      <div className=\"overflow-hidden border-t border-zinc-200 dark:border-zinc-700\">\r\n        <TransitionPanel\r\n          activeIndex={activeIndex}\r\n          transition={{ duration: 0.2, ease: 'easeInOut' }}\r\n          variants={{\r\n            enter: { opacity: 0, y: -50, filter: 'blur(4px)' },\r\n            center: { opacity: 1, y: 0, filter: 'blur(0px)' },\r\n            exit: { opacity: 0, y: 50, filter: 'blur(4px)' },\r\n          }}\r\n        >\r\n          {ITEMS.map(({ subtitle, content }, index) => (\r\n            <div key={index} className=\"py-2\">\r\n              <h3 className=\"mb-2 font-medium text-zinc-800 dark:text-zinc-100\">\r\n                {subtitle}\r\n              </h3>\r\n              <p className=\"text-zinc-600 dark:text-zinc-400 text-base\">{content}</p>\r\n            </div>\r\n          ))}\r\n        </TransitionPanel>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/tabs/transition-tab/TransitionTabMotion.tsx"
    }
  ]
}