51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1f4c,import { Slot, Slottable } from "@radix-ui/react-slot"; import type { VariantProps } from "class-variance-authority"; import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import type { ComponentProps } from "react"; import { cn } from "@/registry/default/lib/utils"; import { buttonVariants } from "@/registry/default/ui/button"; /** * Links to the pages of a long list: search results, a blog archive, a * table. It is a `

` landmark named "Pagination" (change it with * `aria-label`) around a list of links, so Tab moves through them and Enter * follows one. The current page is announced with `aria-current="page"`. * Use `getPaginationRange` to work out which numbers to show. On the first * or last page, leave `href` off Previous / Next and pass `aria-disabled`, * which dims them and takes them out of the Tab order. Nothing animates. * * @example * * * * * * {getPaginationRange({ page, pageCount }).map((entry, index) => ( * * {entry === "ellipsis" ? ( * * ) : ( * * {entry} * * )} * * ))} * * * * * */ function Pagination({ className, "aria-label": label = "Pagination", ...props }: ComponentProps<"nav">) { return (

); } function PaginationContent({ className, ...props }: ComponentProps<"ul">) { return (

; } interface PaginationLinkProps extends ComponentProps<"a">, Pick, "size"> { /** Marks the link as the current page: `aria-current="page"`, `data-active` and the outline style. */ isActive?: boolean; /** Render the single child (next/link, a router Link) with the link styles instead. */ asChild?: boolean; } /** A link to one page, styled as a square button. Pass `asChild` to use your framework's link component. */ function PaginationLink({ className, isActive = false, size = "icon", asChild = false, ...props }: PaginationLinkProps) { const Comp = asChild ? Slot : "a"; // "outline" is the button variant name, not the Tailwind utility. // tailwind-compat-ignore-next-line const variant = isActive ? "outline" : "ghost"; return ( ); } interface PaginationStepProps extends Omit { /** Visible text next to the arrow, hidden below the `sm` breakpoint. */ label?: string; } /** * Link to the previous page. Its accessible name is "Go to previous page" * (change it with `aria-label`); `label` is the visible text, shown from * `sm` up. With `asChild`, the arrow and text go inside your link component. */ function PaginationPrevious({ label = "Previous", "aria-label": ariaLabel = "Go to previous page", className, children, ...props }: PaginationStepProps) { return ( ); } /** * Link to the next page. Its accessible name is "Go to next page" (change * it with `aria-label`); `label` is the visible text, shown from `sm` up. * With `asChild`, the text and arrow go inside your link component. */ function PaginationNext({ label = "Next", "aria-label": ariaLabel = "Go to next page", className, children, ...props }: PaginationStepProps) { return ( {label} {children} ); } interface PaginationEllipsisProps extends ComponentProps<"span"> { /** Text for screen readers in place of the dots. */ label?: string; } /** Stands in for the page numbers that are left out. The dots are hidden; `label` is read instead. */ function PaginationEllipsis({ label = "More pages", className, ...props }: PaginationEllipsisProps) { return ( ); } interface PaginationRangeOptions { /** The current page, starting at 1. Clamped to 1 … `pageCount`. */ page: number; /** How many pages there are. */ pageCount: number; /** Pages shown on each side of the current one. */ siblings?: number; /** Pages always shown at the start and at the end. */ boundaries?: number; } function range(start: number, end: number) { return Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index); } /** * Works out which page numbers to render: the first and last `boundaries` * pages, `siblings` pages either side of the current one, and "ellipsis" * where pages are left out. An ellipsis only replaces two or more pages, and * the result has the same length wherever the current page is, so the * links do not shift as you move through them. * * @example * getPaginationRange({ page: 5, pageCount: 10 }); * // [1, "ellipsis", 4, 5, 6, "ellipsis", 10] */ function getPaginationRange({ page, pageCount, siblings = 1, boundaries = 1, }: PaginationRangeOptions): (number | "ellipsis")[] { const total = Math.max(0, Math.floor(pageCount)); if (total === 0) return []; const around = Math.max(0, Math.floor(siblings)); const edges = Math.max(0, Math.floor(boundaries)); const current = Math.min(total, Math.max(1, Math.floor(page))); // Edges, siblings, the current page and room for two ellipses. const slots = around * 2 + 3 + edges * 2; if (slots >= total) return range(1, total); const left = Math.max(current - around, edges); const right = Math.min(current + around, total - edges); const leftGap = left > edges + 2; const rightGap = right < total - (edges + 1); if (!leftGap && rightGap) { return [...range(1, around * 2 + edges + 2), "ellipsis", ...range(total - edges + 1, total)]; } if (leftGap && !rightGap) { return [...range(1, edges), "ellipsis", ...range(total - (edges + 1 + around * 2), total)]; } return [ ...range(1, edges), "ellipsis", ...range(left, right), "ellipsis", ...range(total - edges + 1, total), ]; } export { getPaginationRange, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationEllipsisProps, type PaginationLinkProps, type PaginationRangeOptions, type PaginationStepProps, }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot@^1.3.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot@^1.3.3"}]]}]}],["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","lucide-react@^1.48.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.48.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/button"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/pagination.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]