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:T1f04,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const EASE = [0.23, 1, 0.32, 1] as const; const ROLL = { duration: 0.18, ease: EASE } as const; const STILL = { duration: 0 } as const; const slotFor = (digits: number) => Math.max(32, 18 + digits * 8); const GAP = 4; const range = (from: number, to: number) => Array.from({ length: to - from + 1 }, (_, i) => from + i); const arrow = (can: boolean) => `flex h-8 w-8 shrink-0 items-center justify-center rounded-[9px] outline-none transition-colors duration-150 focus-visible:bg-[#4568FF]/[0.06] focus-visible:shadow-[inset_0_0_0_1px_#4568FF] dark:focus-visible:bg-[#93B0FF]/[0.1] dark:focus-visible:shadow-[inset_0_0_0_1px_#93B0FF] ${ can ? "text-stone-500 hover:bg-stone-100 hover:text-stone-800 dark:text-stone-400 dark:hover:bg-white/[0.06] dark:hover:text-stone-200" : "text-stone-300 dark:text-white/20" }`; export type PaginationItem = number | "gap-l" | "gap-r"; export function paginate( page: number, count: number, siblings: number, boundaries: number, ): PaginationItem[] { const total = 2 * boundaries + 2 * siblings + 3; if (count <= total) return range(1, count); const nearStart = page < boundaries + siblings + 2; const nearEnd = page > count - boundaries - siblings - 1; if (nearStart) { return [ ...range(1, 2 * siblings + boundaries + 2), "gap-r", ...range(count - boundaries + 1, count), ]; } if (nearEnd) { return [ ...range(1, boundaries), "gap-l", ...range(count - 2 * siblings - boundaries - 1, count), ]; } return [ ...range(1, boundaries), "gap-l", ...range(page - siblings, page + siblings), "gap-r", ...range(count - boundaries + 1, count), ]; } export type UsePaginationOptions = { count: number; page?: number; defaultPage?: number; siblings?: number; boundaries?: number; onPageChange?: (page: number) => void; }; export function usePagination({ count, page, defaultPage = 1, siblings = 1, boundaries = 1, onPageChange, }: UsePaginationOptions) { const clampTo = useCallback( (value: number) => Math.min(Math.max(1, value), Math.max(1, count)), [count], ); const [internal, setInternal] = useState(() => clampTo(defaultPage)); const controlled = page !== undefined; const current = clampTo(controlled ? page : internal); const emit = useRef(onPageChange); emit.current = onPageChange; const previous = useRef(current); const direction = current >= previous.current ? 1 : -1; useEffect(() => { previous.current = current; }, [current]); const goTo = useCallback( (value: number) => { const next = clampTo(value); if (next === previous.current) return; if (!controlled) setInternal(next); emit.current?.(next); }, [clampTo, controlled], ); const items = paginate(current, count, siblings, boundaries); return { page: current, count, items, direction, thumbIndex: items.indexOf(current), canPrev: current > 1, canNext: current < count, goTo, prev: () => goTo(current - 1), next: () => goTo(current + 1), }; } export type PaginationProps = { count: number; page?: number; defaultPage?: number; siblings?: number; boundaries?: number; onPageChange?: (page: number) => void; label?: string; className?: string; }; function Chevron({ flip = false }: { flip?: boolean }) { return ( ); } export function Pagination({ count, page, defaultPage, siblings, boundaries, onPageChange, label = "Pagination", className = "", }: PaginationProps) { const pagination = usePagination({ count, page, defaultPage, siblings, boundaries, onPageChange, }); const { items, direction, thumbIndex, canPrev, canNext } = pagination; const current = pagination.page; const reduced = useReducedMotion(); const digits = String(Math.max(1, count)).length; const slot = slotFor(digits); const [spoken, setSpoken] = useState(""); useEffect(() => { const t = setTimeout( () => setSpoken(`Page ${current} of ${Math.max(1, count)}`), 500, ); return () => clearTimeout(t); }, [current, count]); return (

{spoken}

); } 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/pagination.tsx","content":"$52","type":"registry:ui","target":"components/interior/pagination.tsx"}],"className":"h-[70svh] min-h-80"}]]}]