{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pagination","type":"registry:component","title":"Animated Pagination","description":"Page navigation with a gliding current-page pill, page numbers that slide as the window moves, and ellipses that jump several pages.","author":"Saurabh ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/pagination.tsx","type":"registry:component","target":"@components/motion/pagination.tsx","content":"\"use client\";\n// beui.dev/components/motion/pagination\n\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { AnimatePresence, LayoutGroup, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ComponentPropsWithRef,\n type ReactElement,\n type ReactNode,\n useId,\n useState,\n} from \"react\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"@/lib/ease\";\nimport { PresenceGate, type PresenceGateRenderProps } from \"@/lib/presence-gate\";\nimport { cn } from \"@/lib/utils\";\n\ntype PaginationItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\n/**\n * The pages to show: `boundaries` pages at each end, `siblings` either side of\n * the current page, and an ellipsis for every gap of two or more pages. The\n * result keeps one length while the current page moves, so the row never\n * changes width as you page through.\n */\nexport function paginationRange(\n page: number,\n totalPages: number,\n siblings = 1,\n boundaries = 1,\n): PaginationItem[] {\n const range = (start: number, end: number) =>\n Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);\n // Boundaries, siblings, the current page and two ellipses.\n const slots = boundaries * 2 + siblings * 2 + 3;\n if (totalPages <= slots) return range(1, totalPages);\n\n const left = Math.max(page - siblings, boundaries);\n const right = Math.min(page + siblings, totalPages - boundaries);\n const showStart = left > boundaries + 2;\n const showEnd = right < totalPages - (boundaries + 1);\n\n if (!showStart && showEnd) {\n return [\n ...range(1, siblings * 2 + boundaries + 2),\n \"ellipsis-end\",\n ...range(totalPages - boundaries + 1, totalPages),\n ];\n }\n if (showStart && !showEnd) {\n return [\n ...range(1, boundaries),\n \"ellipsis-start\",\n ...range(totalPages - (boundaries + 1 + siblings * 2), totalPages),\n ];\n }\n return [\n ...range(1, boundaries),\n \"ellipsis-start\",\n ...range(left, right),\n \"ellipsis-end\",\n ...range(totalPages - boundaries + 1, totalPages),\n ];\n}\n\nexport interface PaginationProps\n extends Omit, \"onChange\" | \"children\"> {\n totalPages: number;\n page?: number;\n defaultPage?: number;\n onPageChange?: (page: number) => void;\n /** Pages shown either side of the current one. */\n siblings?: number;\n /** Pages always shown at each end. */\n boundaries?: number;\n /** Pages an ellipsis jumps when pressed. */\n jump?: number;\n /**\n * Render pages as links. Each control still calls `onPageChange`, so a\n * client router can update state while the href keeps the page shareable.\n */\n getHref?: (page: number) => string;\n /** Render your router's Link, spreading these props onto it. */\n renderLink?: (props: ComponentPropsWithRef<\"a\">) => ReactElement;\n}\n\nconst CONTROL =\n \"relative inline-flex h-8 min-w-8 items-center justify-center rounded-full px-2 text-sm tabular-nums sm:h-9 sm:min-w-9 outline-none transition-[color,background-color,transform] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.94] motion-reduce:active:scale-100\";\n\nexport function Pagination({\n totalPages,\n page,\n defaultPage = 1,\n onPageChange,\n siblings = 1,\n boundaries = 1,\n jump = 5,\n getHref,\n renderLink,\n className,\n \"aria-label\": ariaLabel = \"Pagination\",\n ...props\n}: PaginationProps) {\n const id = useId();\n const reduce = useReducedMotion();\n const total = Math.max(1, Math.floor(totalPages));\n const clamp = (value: number) => Math.min(total, Math.max(1, Math.round(value)));\n const [internal, setInternal] = useState(() => clamp(defaultPage));\n const current = clamp(page ?? internal);\n\n const go = (next: number) => {\n const target = clamp(next);\n if (target === current) return;\n if (page === undefined) setInternal(target);\n onPageChange?.(target);\n };\n\n // One control: a link when hrefs are given, otherwise a button.\n const control = (\n target: number,\n {\n label,\n current: isCurrent = false,\n disabled = false,\n className: controlClass,\n children,\n gate,\n }: {\n label: string;\n current?: boolean;\n disabled?: boolean;\n className?: string;\n children: ReactNode;\n /** Releases a control the moment it starts leaving. */\n gate?: PresenceGateRenderProps[\"gate\"];\n },\n ) => {\n const shared = {\n ...gate,\n \"aria-label\": label,\n \"aria-current\": isCurrent ? (\"page\" as const) : undefined,\n className: cn(CONTROL, controlClass),\n children,\n };\n // A disabled control is always a button: a link cannot be disabled.\n if (getHref && !disabled) {\n const linkProps: ComponentPropsWithRef<\"a\"> = {\n ...shared,\n href: getHref(target),\n onClick: (event) => {\n if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n go(target);\n },\n };\n return renderLink ? renderLink(linkProps) : ;\n }\n return (\n