{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "continuous-pagination",
  "type": "registry:component",
  "title": "Continuous Pagination",
  "description": "A premium, fully responsive pagination component featuring spring animations and a 3D-styled active state with a dynamic shimmer effect.",
  "dependencies": [
    "lucide-react",
    "motion",
    "next-themes"
  ],
  "files": [
    {
      "path": "components/watermelon/continuous-pagination.tsx",
      "type": "registry:component",
      "content": "import { useState, type FC, type ReactNode } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\n/* --- Types --- */\n\nexport interface ContinuousPaginationProps {\n    totalPages?: number;\n    defaultPage?: number;\n}\n\n/* --- Sub-Components --- */\n\ninterface PageButtonProps {\n    children: ReactNode;\n    onClick: () => void;\n}\n\nconst PageButton: FC<PageButtonProps> = ({ children, onClick }) => {\n    return (\n        <motion.button\n            onClick={onClick}\n            className=\"h-10 w-10 sm:h-16 sm:w-16 rounded-lg sm:rounded-xl flex items-center justify-center text-[#706F78] dark:text-zinc-500 hover:text-[#65656c] dark:hover:text-zinc-300 border border-slate-500/20 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-[0_4px_10px_rgba(0,0,0,0.12)]\"\n            whileHover={{\n                scale: 1.08,\n                y: -6,\n                boxShadow: \"0 6px 10px rgba(0,0,0,0.12)\",\n            }}\n            whileTap={{ scale: 0.92 }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 20 }}\n        >\n            {children}\n        </motion.button>\n    );\n};\n\n/* --- Main Component --- */\n\nexport const ContinuousPagination: FC<ContinuousPaginationProps> = ({\n    totalPages = 5,\n    defaultPage = 1,\n}) => {\n    const [active, setActive] = useState<number>(defaultPage);\n    const { resolvedTheme } = useTheme();\n\n    const isDark = resolvedTheme === \"dark\";\n\n    const paginate = (page: number) => {\n        if (page < 1 || page > totalPages) return;\n        setActive(page);\n    };\n\n    return (\n        <div className=\"flex items-center justify-center gap-1.5 sm:gap-3 text-sm\">\n            {/* Prev */}\n            <PageButton onClick={() => paginate(active - 1)}>\n                <ChevronLeft className=\"w-5 h-5 sm:w-7 sm:h-7\" />\n            </PageButton>\n\n            {/* Pages */}\n            <div className=\"relative flex gap-1.5 sm:gap-3\">\n                {Array.from({ length: totalPages }).map((_, i) => {\n                    const page = i + 1;\n                    const isActive = page === active;\n\n                    return (\n                        <motion.button\n                            key={page}\n                            onClick={() => paginate(page)}\n                            className={`relative z-10 h-10 w-10 sm:h-16 sm:w-16 rounded-lg sm:rounded-xl flex items-center justify-center text-sm font-medium transition-colors duration-300 border border-slate-500/20 dark:border-zinc-800 shadow-[0_4px_10px_rgba(0,0,0,0.12)]\n                ${isActive\n                                    ? \"text-white\"\n                                    : \"text-gray-500 dark:text-zinc-500 hover:text-gray-800 dark:hover:text-zinc-300 bg-white dark:bg-zinc-900\"\n                                }`}\n                            whileHover={\n                                !isActive\n                                    ? {\n                                        y: -6,\n                                        boxShadow: isDark\n                                            ? \"0 10px 20px rgba(0,0,0,0.4)\"\n                                            : \"0 6px 10px rgba(0,0,0,0.12)\",\n                                    }\n                                    : {}\n                            }\n                            whileTap={{ scale: 0.92 }}\n                            transition={{ type: \"spring\", stiffness: 260, damping: 18 }}\n                        >\n                            {/* Active background */}\n                            <AnimatePresence>\n                                {isActive && (\n                                    <motion.div\n                                        layoutId=\"active-bg\"\n                                        className=\"absolute inset-0 rounded-lg sm:rounded-xl overflow-hidden\"\n                                        initial={{ scale: 0.9, opacity: 0 }}\n                                        animate={{ scale: 1, opacity: 1 }}\n                                        exit={{ scale: 0.9, opacity: 0 }}\n                                        transition={{ type: \"spring\", stiffness: 220, damping: 24, mass: 0.8 }}\n                                    >\n                                        <div\n                                            className=\"absolute inset-0 rounded-lg sm:rounded-xl\"\n                                            style={{\n                                                background: `linear-gradient(135deg, #2a2a2e 0%, #1a1a1c 50%, #0a0a0c 100%)`,\n                                                border: `1px solid #3a3a3e`,\n                                                boxShadow: `\n                            0 8px 16px -4px rgba(0,0,0,0.7),\n                            inset 0 1px 1px 0 rgba(255, 255, 255, 0.15)\n                          `,\n                                            }}\n                                        />\n                                        <motion.div\n                                            className=\"absolute -inset-full bg-linear-to-tr from-transparent via-white/10 to-transparent skew-x-12\"\n                                            animate={{ x: [\"-100%\", \"200%\"] }}\n                                            transition={{\n                                                duration: 3,\n                                                repeat: Infinity,\n                                                repeatDelay: 5,\n                                                ease: \"easeInOut\",\n                                            }}\n                                        />\n                                        <span\n                                            className=\"absolute inset-0 rounded-[inherit] pointer-events-none\"\n                                            style={{\n                                                boxShadow: \"inset 0 -4px 8px 0 rgba(0, 0, 0, 0.6)\",\n                                            }}\n                                        />\n                                    </motion.div>\n                                )}\n                            </AnimatePresence>\n\n                            <span className=\"relative z-10 text-lg sm:text-xl font-semibold\">{page}</span>\n                        </motion.button>\n                    );\n                })}\n            </div>\n\n            {/* Next */}\n            <PageButton onClick={() => paginate(active + 1)}>\n                <ChevronRight className=\"w-5 h-5 sm:w-7 sm:h-7\" />\n            </PageButton>\n        </div>\n    );\n};"
    }
  ]
}