50: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"] 51: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"] 52:T50d3,"use client" import * as React from "react" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { IconChevronLeft, IconChevronRight, IconDots, } from "@tabler/icons-react" import { cn } from "cn" import { buttonVariants } from "@/components/ui/button" import { usePagination, type PaginationItemData, type UsePaginationOptions, } from "@/hooks/use-pagination" import { prefersReducedMotion, useSlidingHighlight } from "@/lib/motion" function clampInt(value: unknown, fallback: number, min: number, max: number) { const number = Math.floor(Number(value)) if (!Number.isFinite(number)) { return fallback } return Math.min(max, Math.max(min, number)) } const linkClassName = "h-9 min-w-[max(--spacing(9),calc(var(--pagination-digits,1)*1ch+--spacing(4)))] px-2 tabular-nums pointer-coarse:h-11 pointer-coarse:min-w-11 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:text-foreground aria-[current=page]:inset-ring-border aria-[current=page]:bg-background dark:aria-[current=page]:bg-input/30 dark:aria-[current=page]:inset-ring-input group-has-[>[data-slot=pagination-indicator][data-visible]]/pagination:aria-[current=page]:bg-transparent group-has-[>[data-slot=pagination-indicator][data-visible]]/pagination:aria-[current=page]:inset-ring-transparent group-has-[>[data-slot=pagination-indicator][data-visible]]/pagination:aria-[current=page]:hover:bg-transparent" type PaginationProps = React.ComponentProps<"nav"> & { page?: number defaultPage?: number count?: number onPageChange?: (page: number) => void siblings?: number boundaries?: number getPageHref?: (page: number) => string compact?: boolean | "auto" jump?: boolean } const indicatorClassName = "pointer-events-none absolute top-0 -z-1 rounded-md bg-background opacity-0 inset-ring-(length:--hairline) forced-colors:border inset-ring-border transition-[transform,width,height,opacity] duration-300 ease-out-quint data-instant:transition-opacity data-visible:opacity-100 motion-reduce:transition-opacity dark:bg-input/30 dark:inset-ring-input" const linkSelector = "[data-slot=pagination-link][aria-current=page]" function focusableItems(nav: HTMLElement) { return Array.from( nav.querySelectorAll("a[href], a[role=link], button") ).filter( (item) => item.getClientRects().length > 0 && item.getAttribute("aria-disabled") !== "true" && !item.hasAttribute("disabled") && getComputedStyle(item).visibility !== "hidden" ) } function handleArrowKeys(event: React.KeyboardEvent) { const keys = ["ArrowLeft", "ArrowRight", "Home", "End"] const target = event.target as HTMLElement if ( event.defaultPrevented || !keys.includes(event.key) || event.altKey || event.ctrlKey || event.metaKey || target.closest("input, textarea, [contenteditable=true]") ) { return } const items = focusableItems(event.currentTarget) const index = items.indexOf(target) if (index === -1) { return } const rtl = getComputedStyle(event.currentTarget).direction === "rtl" const forward = event.key === "ArrowRight" ? !rtl : rtl const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : Math.min(items.length - 1, Math.max(0, index + (forward ? 1 : -1))) event.preventDefault() items[next]?.focus() } function Pagination({ className, children, page, defaultPage = 1, count, onPageChange, siblings, boundaries, getPageHref, compact = "auto", jump = true, style, onKeyDown, ref, ...props }: PaginationProps) { const auto = count !== undefined const navRef = React.useRef(null) const indicatorRef = React.useRef(null) useSlidingHighlight(navRef, indicatorRef, linkSelector, "aria-current") const setRef = React.useCallback( (node: HTMLElement | null) => { navRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) return ( ) } function isPlainClick(event: React.MouseEvent) { return ( event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey ) } function measureList(list: HTMLElement) { const layouts = list.closest("[data-slot=pagination-layouts]") if (!layouts) { return 0 } const clone = list.cloneNode(true) as HTMLElement clone.removeAttribute("id") clone.setAttribute("aria-hidden", "true") clone.inert = true clone.className = cn(list.className, "invisible fixed top-0 left-0 flex") const digits = getComputedStyle(layouts).getPropertyValue( "--pagination-digits" ) clone.style.setProperty("--pagination-digits", digits) clone.style.fontSize = getComputedStyle(list).fontSize document.body.appendChild(clone) const width = clone.getBoundingClientRect().width clone.remove() return width } function PaginationAuto({ page: pageProp, defaultPage, count, onPageChange, siblings, boundaries, getPageHref, compact, jump, }: Required> & Pick< PaginationProps, "page" | "onPageChange" | "siblings" | "boundaries" | "getPageHref" | "jump" >) { const [internalPage, setInternalPage] = React.useState(defaultPage) const pagination = usePagination({ page: pageProp ?? internalPage, count, siblings, boundaries, }) const fullRef = React.useRef(null) const indicatorRef = React.useRef(null) const listRef = React.useRef(null) const layoutsRef = React.useRef(null) const slots = Math.min( pagination.count, clampInt(boundaries ?? 1, 1, 0, 10) * 2 + clampInt(siblings ?? 1, 1, 0, 10) * 2 + 3 ) const digits = String(pagination.count).length const vars = { "--pagination-digits": digits, "--pagination-needed": `calc(${slots} * max(2.25rem, ${digits}ch + 1rem) + ${slots + 1} * 0.25rem + 10.5rem)`, } as React.CSSProperties useSlidingHighlight(fullRef, indicatorRef, linkSelector, "aria-current") React.useLayoutEffect(() => { const list = listRef.current const layouts = layoutsRef.current if (compact !== "auto" || !list || !layouts) { return } const update = () => { const width = measureList(list) if (width > 0) { layouts.style.setProperty( "--pagination-needed", `${Math.ceil(width)}px` ) } } update() document.fonts?.addEventListener("loadingdone", update) return () => document.fonts?.removeEventListener("loadingdone", update) }) const go = (next: number) => { const target = clampInt(next, 1, 1, Math.max(1, pagination.count)) if (target === pagination.page) { return } if (pageProp === undefined) { setInternalPage(target) } onPageChange?.(target) } const canJump = jump !== false && (!!onPageChange || !getPageHref) const jumpTo = (target: number) => { if (!onPageChange && getPageHref) { window.location.assign(getPageHref(target)) return } go(target) } const linkProps = (target: number, disabled = false) => { const href = getPageHref?.(target) return { disabled, href, render: href ? undefined : ) } type PaginationEllipsisProps = React.ComponentProps<"span"> & { count?: number onJump?: (page: number) => void } function PaginationEllipsis({ className, count, onJump, ...props }: PaginationEllipsisProps) { if (onJump && count && count > 0) { return ( ) } return ( ) } export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, usePagination, } export type { PaginationEllipsisProps, PaginationItemData, PaginationLinkProps, PaginationProps, UsePaginationOptions, } 4f:["$","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","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/button.json","https://hextaui.com/r/motion.json","https://hextaui.com/r/use-pagination.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/pagination.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]