{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-navigator",
  "type": "registry:component",
  "title": "Carousel Navigator",
  "description": "A dynamic carousel navigator with theme-adaptive background transitions and progress-syncing indicators.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/carousel-navigator.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { type FC } from 'react';\n\ntype ThemeConfig = {\n  bg: string;\n  button: string;\n  dot: string;\n  progress: string;\n};\n\ninterface CarouselNavigatorProps {\n  totalSlides?: number;\n  autoDelay?: number;\n  themes?: ThemeConfig[];\n  currentIndex: number;\n  onIndexChange: (index: number) => void;\n}\n\nconst DEFAULT_TOTAL_SLIDES = 4;\nconst DEFAULT_AUTO_DELAY = 5000;\n\nconst DEFAULT_THEMES: ThemeConfig[] = [\n  {\n    bg: 'bg-zinc-100',\n    button: 'bg-zinc-900',\n    dot: 'bg-zinc-300',\n    progress: 'bg-zinc-300',\n  },\n  {\n    bg: 'bg-blue-100',\n    button: 'bg-blue-600',\n    dot: 'bg-blue-300',\n    progress: 'bg-blue-300',\n  },\n  {\n    bg: 'bg-green-100',\n    button: 'bg-green-600',\n    dot: 'bg-green-400',\n    progress: 'bg-green-400',\n  },\n  {\n    bg: 'bg-yellow-100',\n    button: 'bg-yellow-400',\n    dot: 'bg-yellow-300',\n    progress: 'bg-yellow-300',\n  },\n];\n\nexport const CarouselNavigator: FC<CarouselNavigatorProps> = ({\n  totalSlides = DEFAULT_TOTAL_SLIDES,\n  autoDelay = DEFAULT_AUTO_DELAY,\n  themes = DEFAULT_THEMES,\n  currentIndex,\n  onIndexChange,\n}) => {\n  const theme = themes[currentIndex];\n\n  const goPrev = () =>\n    onIndexChange((currentIndex - 1 + totalSlides) % totalSlides);\n\n  const goNext = () => onIndexChange((currentIndex + 1) % totalSlides);\n\n  return (\n    <motion.div\n      animate={{\n        backgroundColor: theme.bg.replace('bg-[', '').replace(']', ''),\n      }}\n      className=\"flex items-center justify-center gap-1 rounded-full px-4 py-3 transition-colors duration-300\"\n    >\n      <ArrowButton\n        onClick={goPrev}\n        themeColor={theme.button}\n        disabled={currentIndex === 0}\n      >\n        <ChevronLeft size={24} strokeWidth={3} />\n      </ArrowButton>\n\n      <div className=\"flex items-center gap-2 px-2\">\n        {Array.from({ length: totalSlides }).map((_, i) => (\n          <Indicator\n            key={i}\n            isActive={i === currentIndex}\n            theme={theme}\n            autoDelay={autoDelay}\n            onClick={() => onIndexChange(i)}\n          />\n        ))}\n      </div>\n\n      <ArrowButton onClick={goNext} themeColor={theme.button}>\n        <ChevronRight size={24} strokeWidth={3} />\n      </ArrowButton>\n    </motion.div>\n  );\n};\n\nconst ArrowButton = ({ children, onClick, themeColor, disabled }: any) => {\n  return (\n    <motion.button\n      onClick={onClick}\n      whileTap={{ scale: 0.9 }}\n      className={`flex h-12 w-12 items-center justify-center rounded-full text-white shadow-sm transition-colors cursor-pointer duration-300 ${disabled ? 'bg-gray-300 opacity-50' : themeColor}`}\n    >\n      {children}\n    </motion.button>\n  );\n};\n\nconst Indicator = ({\n  isActive,\n  theme,\n  autoDelay,\n  onClick,\n}: {\n  isActive: boolean;\n  theme: ThemeConfig;\n  autoDelay: number;\n  onClick: () => void;\n}) => {\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={onClick}\n      layout\n      transition={{ type: 'spring', stiffness: 300, damping: 30 }}\n      style={{ borderRadius:24}}\n      className={`relative h-3 cursor-pointer  focus:outline-none ${isActive ? `w-12 ${theme.progress}` : `w-3 ${theme.dot}`} transition-colors duration-300`}\n    >\n      {isActive && (\n        <motion.div\n          initial={{ width: '0%' }}\n          animate={{ width: '100%' }}\n          transition={{ duration: autoDelay / 1000, ease: 'linear' }}\n          className=\"absolute inset-0 rounded-full bg-white shadow-[0_0_8px_rgba(255,255,255,0.5)]\"\n        />\n      )}\n    </motion.button>\n  );\n};\n"
    }
  ]
}