{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Move through a long collection with clear bounds.", "categories": [ "data" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "https://mcp.xzero.co.uk/r/xzero-motion-tokens.json" ], "files": [ { "path": "registry/components/pagination/pagination.tsx", "type": "registry:component", "target": "@components/xzero/pagination/pagination.tsx", "content": "\"use client\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { ChevronLeft as NavArrowLeft, ChevronRight as NavArrowRight } from \"lucide-react\";\nimport { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, type Variants } from \"motion/react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport styles from \"./pagination.module.css\";\nexport interface PaginationProps { page: number; pageCount: number; onPageChange: (page: number) => void; label?: string }\n/** When the five page window shifts, numbers travel like a belt: each one moves by the same number of slots. */\nconst slot = 1000 / 9; // One button plus the gap (36px + 4px), as a percentage of the button width.\nconst slide: Variants = {\n enter: (shift: number) => ({ opacity: 0, x: `${slot * shift}%` }),\n center: { opacity: 1, x: \"0%\" },\n exit: (shift: number) => ({ opacity: 0, x: `${-slot * shift}%`, transition: { x: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } } }),\n};\nexport function Pagination({ page, pageCount, onPageChange, label = \"Pagination\" }: PaginationProps) {\n const reduced = useReducedMotion() ?? false;\n const navRef = useRef(null);\n const markX = useMotionValue(0);\n const markY = useMotionValue(0);\n const safePageCount = Math.max(0, Math.floor(pageCount));\n const currentPage = safePageCount > 0 ? Math.min(Math.max(1, Math.floor(page)), safePageCount) : 0;\n const start = safePageCount > 0 ? Math.max(1, Math.min(safePageCount - 4, currentPage - 2)) : 1;\n const [previousStart, setPreviousStart] = useState(start);\n const [shift, setShift] = useState(0);\n if (previousStart !== start) { setShift(start - previousStart); setPreviousStart(start); }\n const visible = Array.from({ length: Math.min(safePageCount, 5) }, (_, index) => start + index);\n\n // One mark travels to the current page's final slot. Until it has measured once (and during server render),\n // the current button draws its own border so nothing flashes before hydration.\n useLayoutEffect(() => {\n const nav = navRef.current;\n const current = nav?.querySelector(\"[aria-current='page']\");\n if (!nav || !current) return;\n const place = (instant: boolean) => {\n const x = current.offsetLeft, y = current.offsetTop;\n if (instant || reduced) { markX.jump(x); markY.jump(y); return; }\n animate(markX, x, motionTokens.spring.morph);\n animate(markY, y, motionTokens.spring.morph);\n };\n place(!(\"markReady\" in nav.dataset));\n nav.dataset.markReady = \"\";\n let size = `${nav.offsetWidth}x${nav.offsetHeight}`;\n const observer = new ResizeObserver(() => { const next = `${nav.offsetWidth}x${nav.offsetHeight}`; if (next !== size) { size = next; place(true); } });\n observer.observe(nav);\n return () => observer.disconnect();\n }, [currentPage, start, safePageCount, reduced, markX, markY]);\n\n if (!safePageCount) return