{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "continuous-pagination-base",
  "type": "registry:component",
  "title": "Continuous Pagination (base)",
  "description": "Theme-ready base variant of 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": "'use client';\n\nimport { 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=\"text-muted-foreground hover:text-foreground border-border bg-background flex h-10 w-10 items-center justify-center rounded-lg border shadow-[0_4px_10px_hsl(var(--foreground)/0.1)] sm:h-16 sm:w-16\"\n      whileHover={{\n        scale: 1.08,\n        y: -6,\n        boxShadow: '0 6px 10px hsl(var(--foreground)/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=\"theme-injected flex items-center justify-center gap-1.5 text-sm sm:gap-3\">\n      {/* Prev */}\n      <PageButton onClick={() => paginate(active - 1)}>\n        <ChevronLeft className=\"h-5 w-5 sm:h-7 sm:w-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={`border-border relative z-10 flex h-10 w-10 items-center justify-center rounded-lg border text-sm font-medium shadow-[0_4px_10px_hsl(var(--foreground)/0.1)] transition-colors duration-300 sm:h-16 sm:w-16 ${\n                isActive\n                  ? 'text-primary-foreground'\n                  : 'text-muted-foreground hover:text-foreground bg-background'\n              }`}\n              whileHover={\n                !isActive\n                  ? {\n                      y: -6,\n                      boxShadow: isDark\n                        ? '0 10px 20px hsl(var(--foreground)/0.4)'\n                        : '0 6px 10px hsl(var(--foreground)/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 overflow-hidden rounded-lg\"\n                    initial={{ scale: 0.9, opacity: 0 }}\n                    animate={{ scale: 1, opacity: 1 }}\n                    exit={{ scale: 0.9, opacity: 0 }}\n                    transition={{\n                      type: 'spring',\n                      stiffness: 220,\n                      damping: 24,\n                      mass: 0.8,\n                    }}\n                  >\n                    <div className=\"bg-primary border-border absolute inset-0 rounded-lg border shadow-[0_8px_16px_-4px_hsl(var(--foreground)/0.7),inset_0_1px_1px_0_hsl(var(--background)/0.15)]\" />\n                    <motion.div\n                      className=\"via-background/10 absolute -inset-full skew-x-12 bg-linear-to-tr from-transparent to-transparent\"\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=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n                      style={{\n                        boxShadow:\n                          'inset 0 -4px 8px 0 hsl(var(--foreground)/0.6)',\n                      }}\n                    />\n                  </motion.div>\n                )}\n              </AnimatePresence>\n\n              <span className=\"relative z-10 text-lg font-semibold sm:text-xl\">\n                {page}\n              </span>\n            </motion.button>\n          );\n        })}\n      </div>\n\n      {/* Next */}\n      <PageButton onClick={() => paginate(active + 1)}>\n        <ChevronRight className=\"h-5 w-5 sm:h-7 sm:w-7\" />\n      </PageButton>\n    </div>\n  );\n};\n"
    }
  ]
}