52: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"] 53: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"] 54:T107b,'use client' import { forwardRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, } from 'react' import { ChevronLeftGlyph, ChevronRightGlyph } from '@/lib/internal-glyphs' import { useLiquefyConfig } from '@/lib/provider' import { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop' import { useLiquidGlass } from '@/hooks/use-liquid-glass' export type LiquidPaginationProps = Omit, 'onChange'> & LiquidStyleProps & { count: number defaultPage?: number label?: string onPageChange?: (page: number) => void page?: number siblingCount?: number } type PaginationButtonProps = ButtonHTMLAttributes & { children: ReactNode } // Same jelly springs the button family uses: pointer tilt/squish plus a release // overshoot fired on click, so every page control purun like a LiquidButton. const PaginationButton = ({ children, className, onClick, ...props }: PaginationButtonProps) => { const config = useLiquefyConfig() const [glassRef, , pulse] = useLiquidGlass(undefined, { bounce: 0.08, disabled: props.disabled, glow: config.glow, intensity: config.intensity, lens: config.lens && config.transparency, lensStrength: config.refraction, motion: config.motion, ripple: config.ripple, shimmer: config.shimmer, sparkle: config.sparkle, tilt: 2.2, tint: config.tint, webgl: false, wobbliness: config.wobbliness, }) return ( ) } const buildRange = (count: number, page: number, siblingCount: number): Array => { if (count <= 5 + siblingCount * 2) return Array.from({ length: count }, (_, index) => index + 1) const start = Math.max(2, page - siblingCount) const end = Math.min(count - 1, page + siblingCount) const range: Array = [1] if (start > 2) range.push('ellipsis') for (let index = start; index <= end; index += 1) range.push(index) if (end < count - 1) range.push('ellipsis') range.push(count) return range } export const LiquidPagination = forwardRef(({ className, count, defaultPage = 1, label = 'Pagination', onPageChange, page, siblingCount = 1, style, styles, ...props }, ref) => { const [internalPage, setInternalPage] = useState(defaultPage) const currentPage = page ?? internalPage const goTo = (nextPage: number) => { const clamped = Math.min(count, Math.max(1, nextPage)) if (page === undefined) setInternalPage(clamped) onPageChange?.(clamped) } const root = useLiquidStyles('lq-pagination', { className, style, styles }) return ( ) }) LiquidPagination.displayName = 'LiquidPagination' 51:["$","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":[null,["$","$L52",null,{"namespace":"@liquefy-ui","registryDependencies":["https://liquefy-ui.com/r/liquefy-ui.json","https://liquefy-ui.com/r/internal-glyphs.json","https://liquefy-ui.com/r/provider.json","https://liquefy-ui.com/r/styles-prop.json","https://liquefy-ui.com/r/use-liquid-glass.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/liquid-pagination.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]