{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-navigator-base",
  "type": "registry:component",
  "title": "Carousel Navigator (base)",
  "description": "Theme-ready base variant of 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  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    button: 'bg-primary text-primary-foreground',\n    dot: 'bg-secondary',\n    progress: 'bg-secondary',\n  },\n  {\n    button: 'bg-primary text-primary-foreground',\n    dot: 'bg-secondary',\n    progress: 'bg-secondary',\n  },\n  {\n    button: 'bg-primary text-primary-foreground',\n    dot: 'bg-secondary',\n    progress: 'bg-secondary',\n  },\n  {\n    button: 'bg-primary text-primary-foreground',\n    dot: 'bg-secondary',\n    progress: 'bg-secondary',\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      className=\"theme-injected flex items-center justify-center gap-1 rounded-4xl border border-border bg-card px-4 py-3 font-sans 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      disabled={disabled}\n      className={`flex h-12 w-12 cursor-pointer items-center justify-center rounded-4xl font-sans shadow-sm transition-colors duration-300 ${disabled ? 'cursor-not-allowed bg-input text-muted-foreground opacity-60' : `${themeColor} hover:brightness-95`}`}\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-4xl bg-primary shadow-[0_0_8px_hsl(var(--primary)/0.4)]\"\n        />\n      )}\n    </motion.button>\n  );\n};\n"
    }
  ]
}