{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "creative-tab",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/tab.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React, {\n  createContext,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\n// Improved TypeScript interfaces with more specific types\ninterface TabContextType {\n  activeTab: string;\n  setActiveTab: (value: string) => void;\n  wobbly: boolean;\n  hover: boolean;\n  defaultValue: string;\n  prevIndex: number;\n  setPrevIndex: (value: number) => void;\n  tabsOrder: string[];\n}\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Custom hook with memoization\nexport const useTabs = () => {\n  const context = useContext(TabContext);\n  if (!context) {\n    throw new Error('useTabs must be used within a TabsProvider');\n  }\n  return context;\n};\n\n// Props interfaces with more specific types\ninterface TabsProviderProps {\n  children: ReactNode;\n  defaultValue: string;\n  wobbly?: boolean;\n  hover?: boolean;\n}\n\ninterface TabsBtnProps {\n  children: ReactNode;\n  className?: string;\n  value: string;\n}\n\ninterface TabsContentProps {\n  children: ReactNode;\n  className?: string;\n  value: string;\n  yValue?: boolean;\n}\n\nexport const TabsProvider: React.FC<TabsProviderProps> = React.memo(\n  ({ children, defaultValue, wobbly = true, hover = false }) => {\n    // Use useCallback to memoize state setters\n    const [activeTab, setActiveTab] = useState(defaultValue);\n    const [prevIndex, setPrevIndex] = useState(0);\n\n    // Memoize tabs order to prevent unnecessary recalculations\n    const tabsOrder = useMemo(() => {\n      return React.Children.toArray(children)\n        .filter((child) => isValidElement(child) && child.type === TabsContent)\n        .map((child) => (child as React.ReactElement<any>).props.value);\n    }, [children]);\n\n    // Memoize context value to prevent unnecessary re-renders\n    const contextValue = useMemo(\n      () => ({\n        activeTab,\n        setActiveTab,\n        wobbly,\n        hover,\n        defaultValue,\n        setPrevIndex,\n        prevIndex,\n        tabsOrder,\n      }),\n      [activeTab, setActiveTab, wobbly, hover, defaultValue, prevIndex, tabsOrder]\n    );\n\n    return <TabContext.Provider value={contextValue}>{children}</TabContext.Provider>;\n  }\n);\n\n// Memoized TabsBtn component\nexport const TabsBtn: React.FC<TabsBtnProps> = React.memo(({ children, className, value }) => {\n  const { activeTab, setPrevIndex, setActiveTab, defaultValue, hover, wobbly, tabsOrder } =\n    useTabs();\n\n  // Use useCallback to memoize the click handler\n  const handleClick = useCallback(() => {\n    setPrevIndex(tabsOrder.indexOf(activeTab));\n    setActiveTab(value);\n  }, [setPrevIndex, tabsOrder, activeTab, setActiveTab, value]);\n\n  return (\n    <motion.div\n      className={cn(`cursor-pointer 2xl:p-2 p-2 2xl:px-4 px-2 rounded-md relative`, className)}\n      onFocus={() => hover && handleClick()}\n      onMouseEnter={() => hover && handleClick()}\n      onClick={handleClick}\n    >\n      {children}\n\n      <AnimatePresence mode='wait'>\n        {activeTab === value && (\n          <>\n            <motion.div\n              transition={{\n                layout: {\n                  duration: 0.2,\n                  ease: 'easeInOut',\n                  delay: 0.2,\n                },\n              }}\n              layoutId={defaultValue}\n              className='absolute w-full h-full left-0 top-0 dark:bg-primary-base bg-white rounded-md z-1'\n            />\n\n            {wobbly && (\n              <>\n                <motion.div\n                  transition={{\n                    layout: {\n                      duration: 0.4,\n                      ease: 'easeInOut',\n                      delay: 0.04,\n                    },\n                  }}\n                  layoutId={defaultValue}\n                  className='absolute w-full h-full left-0 top-0 dark:bg-primary-base bg-white rounded-md z-1 tab-shadow'\n                />\n                <motion.div\n                  transition={{\n                    layout: {\n                      duration: 0.4,\n                      ease: 'easeOut',\n                      delay: 0.2,\n                    },\n                  }}\n                  layoutId={`${defaultValue}b`}\n                  className='absolute w-full h-full left-0 top-0 dark:bg-primary-base bg-white rounded-md z-1 tab-shadow'\n                />\n              </>\n            )}\n          </>\n        )}\n      </AnimatePresence>\n    </motion.div>\n  );\n});\n\n// Memoized TabsContent component\nexport const TabsContent: React.FC<TabsContentProps> = React.memo(\n  ({ children, className, value, yValue }) => {\n    const { activeTab, tabsOrder, prevIndex } = useTabs();\n\n    // Memoize direction calculation\n    const isForward = useMemo(\n      () => tabsOrder.indexOf(activeTab) > prevIndex,\n      [tabsOrder, activeTab, prevIndex]\n    );\n\n    return (\n      <AnimatePresence mode='popLayout'>\n        {activeTab === value && (\n          <motion.div\n            initial={{ opacity: 0, y: yValue ? (isForward ? 10 : -10) : 0 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: yValue ? (isForward ? -50 : 50) : 0 }}\n            transition={{\n              duration: 0.3,\n              ease: 'easeInOut',\n              delay: 0.5,\n            }}\n            className={cn('p-2 px-4 rounded-md relative', className)}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    );\n  }\n);\n\n// Add display names for better debugging\nTabsProvider.displayName = 'TabsProvider';\nTabsBtn.displayName = 'TabsBtn';\nTabsContent.displayName = 'TabsContent';\n",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/tabs/home-tab.tsx",
      "content": "// thanks to maximeheckel\n\nimport preview from '@/assets/preview/Preview';\nimport { TabsBtn, TabsContent, TabsProvider } from '@/components/ui/tab';\nimport Image from 'next/image';\nimport React, { useState } from 'react';\n\nfunction HomeTab() {\n  return (\n    <>\n      <TabsProvider defaultValue={'accordion'} wobbly={true}>\n        <div className='flex justify-center pt-4'>\n          <div className='flex items-center capitalize w-fit dark:bg-[#1a1c20] bg-neutral-300 p-1 dark:text-white text-black rounded-md border'>\n            <TabsBtn value='accordion'>\n              <span className='relative z-2 '>Accordion</span>\n            </TabsBtn>\n            <TabsBtn value='globe'>\n              <span className='relative z-2 '>Globe</span>\n            </TabsBtn>\n            <TabsBtn value='mousetrail'>\n              <span className='relative z-2 '>Mouse Trail</span>\n            </TabsBtn>\n          </div>\n        </div>\n\n        <TabsContent value='accordion' yValue={false}>\n          <div className='dark:bg-black bg-white  mx-auto max-w-[450px] lg:h-[300px] md:h-[240px] h-[190px]  dark:text-white text-black p-4 border  shadow-md rounded-md space-y-2'>\n            <Image\n              className='rounded-xl h-full object-contain'\n              src={preview.galleryNew}\n              width={600}\n              height={680}\n              alt={'gallery'}\n            />\n          </div>\n        </TabsContent>\n        <TabsContent value='globe' yValue={false}>\n          <div className='dark:bg-black bg-white  mx-auto max-w-[450px] lg:h-[300px] md:h-[240px] h-[190px] dark:text-white text-black p-4 border shadow-md rounded-md space-y-2'>\n            <Image\n              className='rounded-xl h-full object-contain'\n              src={preview.globe}\n              width={600}\n              height={680}\n              alt={'globe'}\n            />\n          </div>\n        </TabsContent>\n        <TabsContent value='mousetrail' yValue={false}>\n          <div className='dark:bg-black bg-white  mx-auto max-w-[450px] lg:h-[300px] md:h-[240px] h-[190px] dark:text-white text-black p-4 border shadow-md rounded-md space-y-2'>\n            <Image\n              className='rounded-xl h-full object-contain'\n              src={preview.mousetrail}\n              width={600}\n              height={680}\n              alt={'mousetrail'}\n            />\n          </div>\n        </TabsContent>\n      </TabsProvider>\n    </>\n  );\n}\n\nexport default HomeTab;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}