{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-pagination-shadcnui",
  "type": "registry:component",
  "title": "Animated Pagination",
  "description": "Pagination with smooth page transition indicator",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/navigation/animated-pagination.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function AnimatedPagination() {\n  const [currentPage, setCurrentPage] = useState(1);\n  const totalPages = 5;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <motion.button\n        onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}\n        disabled={currentPage === 1}\n        className=\"flex h-9 w-9 items-center justify-center rounded-lg border  disabled:opacity-50\"\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <ChevronLeft className=\"h-4 w-4\" />\n      </motion.button>\n\n      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n        <motion.button\n          key={page}\n          onClick={() => setCurrentPage(page)}\n          className=\"relative h-9 w-9 rounded-lg text-sm font-medium\"\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n          style={{\n            color: currentPage === page ? \"white\" : \"var(--foreground)\",\n          }}\n        >\n          {currentPage === page && (\n            <motion.div\n              layoutId=\"pagination-indicator\"\n              className=\"absolute inset-0 rounded-lg bg-accent\"\n              transition={{ type: \"spring\", stiffness: 380, damping: 30 }}\n            />\n          )}\n          <span className=\"relative z-10\">{page}</span>\n        </motion.button>\n      ))}\n\n      <motion.button\n        onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}\n        disabled={currentPage === totalPages}\n        className=\"flex h-9 w-9 items-center justify-center rounded-lg border  disabled:opacity-50\"\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <ChevronRight className=\"h-4 w-4\" />\n      </motion.button>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-pagination-shadcnui.tsx"
    }
  ]
}