@dashforge/tw 0.4.0-beta → 0.5.0-beta

package/dist/index.esm.js

@@ -7282,6 +7282,568 @@ const accordionVariants = tv({
     });
 }
 
+/**
+ * `<Skeleton>` variant recipe.
+ *
+ * Slots:
+ *  - `root` — single element (atomic component)
+ *
+ * Variant axes:
+ *  - `variant` (`text` | `rectangle` | `circle`) — shape / radius
+ *  - `animation` (`pulse` | `wave` | `none`) — how the placeholder
+ *    "breathes" while data loads. Always gated on
+ *    `prefers-reduced-motion` (no exception — animations are
+ *    purely cosmetic).
+ *
+ * Implementation notes:
+ *
+ *  - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
+ *    1.0 ↔ 0.5 over 2s, ease-in-out infinite).
+ *  - `wave` overlays a moving gradient. Implemented with a
+ *    `relative` container + an `::after` pseudo-element via a
+ *    Tailwind arbitrary-value class. The gradient slides
+ *    horizontally over the surface, mimicking the MUI Skeleton
+ *    "wave" look.
+ *  - Color uses neutral-200 (light) and neutral-800 (dark) for
+ *    the base, picked up automatically by the dashforge preset's
+ *    CSS-variable layer.
+ *
+ * Accessibility: the root has `aria-hidden="true"` (set on the JSX
+ * side, not here). Screen readers skip the skeleton entirely;
+ * the surrounding component is responsible for announcing
+ * loading state via `aria-busy` or `aria-live` if needed.
+ */ const skeletonVariants = tv({
+    slots: {
+        root: [
+            'block',
+            'bg-neutral-200 dark:bg-neutral-800',
+            'motion-reduce:animate-none'
+        ]
+    },
+    variants: {
+        variant: {
+            text: {
+                root: 'rounded h-[1em] w-full'
+            },
+            rectangle: {
+                root: 'rounded-md w-full h-[100px]'
+            },
+            circle: {
+                root: 'rounded-full w-10 h-10'
+            }
+        },
+        animation: {
+            pulse: {
+                root: 'animate-pulse'
+            },
+            wave: {
+                root: [
+                    'relative overflow-hidden',
+                    // The wave is rendered via an arbitrary-value ::after
+                    // pseudo-element with a moving linear gradient. Tailwind
+                    // doesn't ship a `wave` keyframe; we use the built-in
+                    // `animate-pulse` as a fallback if a consumer needs to
+                    // override. The gradient stop direction works in both
+                    // light and dark mode (white shimmer in light, lighter
+                    // overlay in dark).
+                    'after:absolute after:inset-0',
+                    'after:bg-gradient-to-r after:from-transparent after:via-white/40 after:to-transparent',
+                    'dark:after:via-white/10',
+                    'after:animate-pulse',
+                    'after:motion-reduce:animate-none'
+                ]
+            },
+            none: {
+                root: ''
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'text',
+        animation: 'pulse'
+    }
+});
+
+/**
+ * Dashforge TW `<Skeleton>` — loading placeholder primitive.
+ *
+ * Renders as a non-interactive `<span aria-hidden="true">` so screen
+ * readers skip it. The surrounding component is responsible for
+ * announcing loading state via `aria-busy` or `aria-live` if needed.
+ *
+ * Variants:
+ *   - `variant` — `text` (default, line shape) / `rectangle` / `circle`
+ *   - `animation` — `pulse` (default) / `wave` / `none`
+ *
+ * Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" width="200px" />
+ * <Skeleton variant="rectangle" width="100%" height="120px" />
+ * <Skeleton variant="circle" width="40px" />
+ * ```
+ */ function Skeleton(props) {
+    var _slotProps_root;
+    const { variant = 'text', animation = 'pulse', width, height, sx, slotProps } = props;
+    const v = skeletonVariants({
+        variant,
+        animation
+    });
+    // Width / height come through as inline style — Tailwind doesn't
+    // know about arbitrary user-supplied lengths. We default `circle`'s
+    // height to `width` so consumers don't have to repeat themselves.
+    const style = {};
+    if (width != null) style.width = width;
+    if (height != null) {
+        style.height = height;
+    } else if (variant === 'circle' && width != null) {
+        style.height = width;
+    }
+    return jsx("span", {
+        "aria-hidden": "true",
+        role: "presentation",
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        style: style
+    });
+}
+
+/**
+ * `<Pagination>` variant recipe.
+ *
+ * Slots:
+ *  - `root`             — outer `<nav>` container
+ *  - `summary`          — "Showing X-Y of Z" text
+ *  - `list`             — `<ul>` of page buttons
+ *  - `pageButton`       — individual page number button
+ *  - `activeButton`     — modifier applied to the current page
+ *  - `navButton`        — first/prev/next/last buttons
+ *  - `ellipsis`         — `…` rendered when range gap
+ *  - `pageSizeSelector` — native `<select>` for page size
+ *  - `jumpInput`        — direct page jump `<input>`
+ *
+ * Variant axes:
+ *  - `variant` — `default` (full kit) | `compact` (number buttons +
+ *    prev/next only) | `minimal` ("X / Y pages" + prev/next only).
+ *  - `size` — `sm` | `md` (default) | `lg`. Drives padding + text
+ *    size on the buttons.
+ */ const paginationVariants = tv({
+    slots: {
+        root: 'flex flex-wrap items-center gap-3',
+        summary: 'text-neutral-600 dark:text-neutral-400',
+        list: 'inline-flex items-center gap-1',
+        pageButton: [
+            'inline-flex items-center justify-center rounded-md',
+            'border border-neutral-300 dark:border-neutral-700',
+            'bg-white dark:bg-neutral-900',
+            'text-neutral-700 dark:text-neutral-300',
+            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none',
+            'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
+        ],
+        activeButton: [
+            'bg-primary-500 text-white border-primary-500',
+            'hover:bg-primary-600 dark:hover:bg-primary-400'
+        ],
+        navButton: [
+            'inline-flex items-center justify-center rounded-md',
+            'border border-neutral-300 dark:border-neutral-700',
+            'bg-white dark:bg-neutral-900',
+            'text-neutral-700 dark:text-neutral-300',
+            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none',
+            'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
+        ],
+        ellipsis: 'inline-flex items-center justify-center text-neutral-500 px-1',
+        pageSizeSelector: [
+            'inline-flex items-center gap-2',
+            'text-neutral-700 dark:text-neutral-300'
+        ],
+        jumpInput: [
+            'rounded-md border border-neutral-300 dark:border-neutral-700',
+            'bg-white dark:bg-neutral-900',
+            'text-neutral-900 dark:text-neutral-50',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none'
+        ]
+    },
+    variants: {
+        // Note: variant-driven visibility is enforced via conditional JSX
+        // rendering (in `Pagination.tsx`), NOT via `hidden` Tailwind class.
+        // Reason: `display: none` keeps the elements in the DOM (and in the
+        // a11y tree depending on how it's applied), which leaks into
+        // testing-library `queryByText` and feels semantically wrong for
+        // "this UI piece doesn't exist in this variant". So compact and
+        // minimal slots stay empty here.
+        variant: {
+            default: {},
+            compact: {},
+            minimal: {}
+        },
+        size: {
+            sm: {
+                summary: 'text-xs',
+                pageButton: 'h-7 min-w-7 px-2 text-xs',
+                navButton: 'h-7 min-w-7 px-2 text-xs',
+                ellipsis: 'h-7 min-w-5 text-xs',
+                pageSizeSelector: 'text-xs',
+                jumpInput: 'h-7 px-2 text-xs w-14'
+            },
+            md: {
+                summary: 'text-sm',
+                pageButton: 'h-9 min-w-9 px-3 text-sm',
+                navButton: 'h-9 min-w-9 px-3 text-sm',
+                ellipsis: 'h-9 min-w-6 text-sm',
+                pageSizeSelector: 'text-sm',
+                jumpInput: 'h-9 px-2 text-sm w-16'
+            },
+            lg: {
+                summary: 'text-base',
+                pageButton: 'h-10 min-w-10 px-4 text-base',
+                navButton: 'h-10 min-w-10 px-4 text-base',
+                ellipsis: 'h-10 min-w-7 text-base',
+                pageSizeSelector: 'text-base',
+                jumpInput: 'h-10 px-3 text-base w-20'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+
+/**
+ * Compute the array of page indices (or `'ellipsis'` sentinels) to
+ * render for a `<Pagination>`.
+ *
+ * Algorithm (standard "siblings + boundaries + ellipsis fill"):
+ *  1. Always show `boundaryCount` pages at the start and `boundaryCount`
+ *     at the end.
+ *  2. Show `siblingCount` pages on each side of the current page.
+ *  3. Fill gaps wider than 1 with `'ellipsis'`.
+ *  4. If a gap is exactly 1 page wide, include that page directly
+ *     (no ellipsis for a single hidden number).
+ *
+ * Output is 1-indexed page numbers OR the literal string `'ellipsis'`.
+ *
+ * @example
+ * ```ts
+ * range(1, 10, 1, 1)  // [1, 'ellipsis', 5, 'ellipsis', 10] when current=5
+ * range(1, 5, 1, 1)   // [1, 2, 3, 4, 5]
+ * range(1, 100, 1, 1) // edges varying with current
+ * ```
+ */ function computePageRange(currentPage, totalPages, siblingCount, boundaryCount) {
+    if (totalPages <= 0) return [];
+    if (totalPages === 1) return [
+        1
+    ];
+    // Budget: if `totalPages` fits within boundaries + siblings + current
+    // (plus the 2 hypothetical ellipsis slots), don't bother with ellipses
+    // at all — list every page. Avoids the "[1, 2, …, 5]" footgun where
+    // the user expected to see 3 and 4 explicitly.
+    const minPagesForEllipsis = 2 * boundaryCount + 2 * siblingCount + 3;
+    if (totalPages <= minPagesForEllipsis) {
+        return range(1, totalPages);
+    }
+    const startBoundary = range(1, Math.min(boundaryCount, totalPages));
+    const endBoundary = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+    const siblingsStart = Math.max(currentPage - siblingCount, boundaryCount + 2);
+    const siblingsEnd = Math.min(currentPage + siblingCount, totalPages - boundaryCount - 1);
+    const siblings = range(siblingsStart, siblingsEnd);
+    const showStartEllipsis = siblingsStart > boundaryCount + 2;
+    const showEndEllipsis = siblingsEnd < totalPages - boundaryCount - 1;
+    const out = [
+        ...startBoundary
+    ];
+    if (showStartEllipsis) {
+        out.push('ellipsis');
+    } else if (siblingsStart === boundaryCount + 2) {
+        // Single hidden page → fill it directly instead of an ellipsis.
+        out.push(boundaryCount + 1);
+    }
+    out.push(...siblings);
+    if (showEndEllipsis) {
+        out.push('ellipsis');
+    } else if (siblingsEnd === totalPages - boundaryCount - 1) {
+        out.push(totalPages - boundaryCount);
+    }
+    out.push(...endBoundary);
+    // Dedupe while preserving order (overlapping ranges produce duplicates
+    // when totalPages is small). Two distinct rules:
+    //   1. Number entries: keep only the first occurrence.
+    //   2. Ellipsis entries: collapse adjacent ellipses to one.
+    const seen = new Set();
+    const deduped = [];
+    let prevWasEllipsis = false;
+    for (const entry of out){
+        if (entry === 'ellipsis') {
+            if (!prevWasEllipsis) {
+                deduped.push('ellipsis');
+                prevWasEllipsis = true;
+            }
+            continue;
+        }
+        if (!seen.has(entry)) {
+            seen.add(entry);
+            deduped.push(entry);
+            prevWasEllipsis = false;
+        }
+    }
+    return deduped;
+}
+function range(start, end) {
+    if (end < start) return [];
+    return Array.from({
+        length: end - start + 1
+    }, (_, i)=>start + i);
+}
+
+const DEFAULT_LABELS = {
+    first: 'First',
+    prev: 'Previous',
+    next: 'Next',
+    last: 'Last',
+    page: 'Page',
+    of: 'of',
+    showing: 'Showing',
+    perPage: 'per page',
+    goToPage: 'Go to page'
+};
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+    10,
+    20,
+    50,
+    100
+];
+/**
+ * Dashforge TW `<Pagination>` — controlled pagination primitive.
+ *
+ * Three variants:
+ *  - `default`  — page-size selector + summary + page numbers + nav buttons + jump input
+ *  - `compact`  — page numbers + nav buttons only (no summary, no selector, no jump)
+ *  - `minimal`  — "Page X of Y" + prev/next only
+ *
+ * Always controlled (no internal state besides the jump-input draft).
+ *
+ * A11Y:
+ *  - `<nav aria-label="Pagination">` root
+ *  - `aria-current="page"` on the active page button
+ *  - `aria-label` on every interactive element
+ *
+ * @example
+ * ```tsx
+ * const [page, setPage] = useState(1);
+ * const [pageSize, setPageSize] = useState(20);
+ *
+ * <Pagination
+ *   page={page}
+ *   pageSize={pageSize}
+ *   totalCount={1437}
+ *   onPageChange={setPage}
+ *   onPageSizeChange={setPageSize}
+ * />
+ * ```
+ */ function Pagination(props) {
+    var _slotProps_root, _slotProps_summary, _slotProps_summary1, _slotProps_list, _slotProps_navButton, _slotProps_navButton1, _slotProps_navButton2, _slotProps_navButton3, _slotProps_pageSizeSelector, _slotProps_jumpInput;
+    const { page, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, siblingCount = 1, boundaryCount = 1, showFirstLast = true, showJumpInput = true, disabled = false, labels: labelsProp, variant = 'default', size = 'md', sx, slotProps } = props;
+    const labels = _extends({}, DEFAULT_LABELS, labelsProp);
+    const v = paginationVariants({
+        variant,
+        size
+    });
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    const safePage = Math.min(Math.max(1, page), totalPages);
+    const pages = computePageRange(safePage, totalPages, siblingCount, boundaryCount);
+    // Summary range
+    const firstItem = totalCount === 0 ? 0 : (safePage - 1) * pageSize + 1;
+    const lastItem = Math.min(safePage * pageSize, totalCount);
+    // Jump input local state (commit on Enter or blur)
+    const [jumpDraft, setJumpDraft] = useState('');
+    const goTo = useCallback((nextPage)=>{
+        if (disabled) return;
+        const clamped = Math.min(Math.max(1, nextPage), totalPages);
+        if (clamped !== safePage) onPageChange(clamped);
+    }, [
+        disabled,
+        totalPages,
+        safePage,
+        onPageChange
+    ]);
+    const commitJump = useCallback(()=>{
+        const parsed = Number(jumpDraft);
+        if (!Number.isFinite(parsed) || parsed < 1) {
+            setJumpDraft('');
+            return;
+        }
+        goTo(Math.floor(parsed));
+        setJumpDraft('');
+    }, [
+        jumpDraft,
+        goTo
+    ]);
+    const onJumpKeyDown = useCallback((e)=>{
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commitJump();
+        }
+    }, [
+        commitJump
+    ]);
+    const handlePageSize = useCallback((e)=>{
+        if (!onPageSizeChange) return;
+        const next = Number(e.target.value);
+        if (Number.isFinite(next) && next > 0) onPageSizeChange(next);
+    }, [
+        onPageSizeChange
+    ]);
+    const isMinimal = variant === 'minimal';
+    return jsxs("nav", {
+        "aria-label": "Pagination",
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            variant === 'default' && jsxs("span", {
+                className: cn(v.summary(), slotProps == null ? void 0 : (_slotProps_summary = slotProps.summary) == null ? void 0 : _slotProps_summary.className),
+                children: [
+                    labels.showing,
+                    " ",
+                    firstItem,
+                    "-",
+                    lastItem,
+                    " ",
+                    labels.of,
+                    " ",
+                    totalCount
+                ]
+            }),
+            isMinimal && jsxs("span", {
+                className: cn(v.summary(), 'text-sm', slotProps == null ? void 0 : (_slotProps_summary1 = slotProps.summary) == null ? void 0 : _slotProps_summary1.className),
+                children: [
+                    labels.page,
+                    " ",
+                    safePage,
+                    " ",
+                    labels.of,
+                    " ",
+                    totalPages
+                ]
+            }),
+            jsxs("ul", {
+                className: cn(v.list(), slotProps == null ? void 0 : (_slotProps_list = slotProps.list) == null ? void 0 : _slotProps_list.className),
+                children: [
+                    showFirstLast && !isMinimal && jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.first,
+                            disabled: disabled || safePage === 1,
+                            onClick: ()=>goTo(1),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton = slotProps.navButton) == null ? void 0 : _slotProps_navButton.className),
+                            children: "\u00AB"
+                        })
+                    }),
+                    jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.prev,
+                            disabled: disabled || safePage === 1,
+                            onClick: ()=>goTo(safePage - 1),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton1 = slotProps.navButton) == null ? void 0 : _slotProps_navButton1.className),
+                            children: "\u2039"
+                        })
+                    }),
+                    !isMinimal && pages.map((entry, idx)=>{
+                        var _slotProps_ellipsis, _slotProps_pageButton, _slotProps_activeButton;
+                        return entry === 'ellipsis' ? jsx("li", {
+                            children: jsx("span", {
+                                "aria-hidden": "true",
+                                className: cn(v.ellipsis(), slotProps == null ? void 0 : (_slotProps_ellipsis = slotProps.ellipsis) == null ? void 0 : _slotProps_ellipsis.className),
+                                children: "\u2026"
+                            })
+                        }, `e-${idx}`) : jsx("li", {
+                            children: jsx("button", {
+                                type: "button",
+                                "aria-label": `${labels.page} ${entry}`,
+                                "aria-current": entry === safePage ? 'page' : undefined,
+                                disabled: disabled,
+                                onClick: ()=>goTo(entry),
+                                className: cn(v.pageButton(), entry === safePage && v.activeButton(), slotProps == null ? void 0 : (_slotProps_pageButton = slotProps.pageButton) == null ? void 0 : _slotProps_pageButton.className, entry === safePage && (slotProps == null ? void 0 : (_slotProps_activeButton = slotProps.activeButton) == null ? void 0 : _slotProps_activeButton.className)),
+                                children: entry
+                            })
+                        }, entry);
+                    }),
+                    jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.next,
+                            disabled: disabled || safePage === totalPages,
+                            onClick: ()=>goTo(safePage + 1),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton2 = slotProps.navButton) == null ? void 0 : _slotProps_navButton2.className),
+                            children: "\u203A"
+                        })
+                    }),
+                    showFirstLast && !isMinimal && jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.last,
+                            disabled: disabled || safePage === totalPages,
+                            onClick: ()=>goTo(totalPages),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton3 = slotProps.navButton) == null ? void 0 : _slotProps_navButton3.className),
+                            children: "\u00BB"
+                        })
+                    })
+                ]
+            }),
+            variant === 'default' && onPageSizeChange && jsxs("label", {
+                className: cn(v.pageSizeSelector(), slotProps == null ? void 0 : (_slotProps_pageSizeSelector = slotProps.pageSizeSelector) == null ? void 0 : _slotProps_pageSizeSelector.className),
+                children: [
+                    jsx("span", {
+                        className: "sr-only",
+                        children: labels.perPage
+                    }),
+                    jsx("select", {
+                        value: pageSize,
+                        onChange: handlePageSize,
+                        disabled: disabled,
+                        "aria-label": labels.perPage,
+                        className: cn('rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500'),
+                        children: pageSizeOptions.map((opt)=>jsx("option", {
+                                value: opt,
+                                children: opt
+                            }, opt))
+                    }),
+                    jsx("span", {
+                        children: labels.perPage
+                    })
+                ]
+            }),
+            variant === 'default' && showJumpInput && jsxs("label", {
+                className: "inline-flex items-center gap-2",
+                children: [
+                    jsx("span", {
+                        className: "sr-only",
+                        children: labels.goToPage
+                    }),
+                    jsx("input", {
+                        type: "number",
+                        min: 1,
+                        max: totalPages,
+                        value: jumpDraft,
+                        placeholder: labels.goToPage,
+                        disabled: disabled,
+                        onChange: (e)=>setJumpDraft(e.target.value),
+                        onKeyDown: onJumpKeyDown,
+                        onBlur: commitJump,
+                        "aria-label": labels.goToPage,
+                        className: cn(v.jumpInput(), slotProps == null ? void 0 : (_slotProps_jumpInput = slotProps.jumpInput) == null ? void 0 : _slotProps_jumpInput.className)
+                    })
+                ]
+            })
+        ]
+    });
+}
+
 /**
  * @dashforge/tw
  *
@@ -7309,6 +7871,6 @@ const accordionVariants = tv({
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.4.0-beta';
+ */ const VERSION = '0.5.0-beta';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Popover, RadioGroup, SnackbarProvider, Stack, Switch, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, popoverVariants, radioGroupVariants, snackbarVariants, stackVariants, switchVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };
+export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, Skeleton, SnackbarProvider, Stack, Switch, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };

package/dist/src/components/Pagination/Pagination.d.ts

@@ -0,0 +1,32 @@
+import type { PaginationProps } from './pagination.types.js';
+/**
+ * Dashforge TW `<Pagination>` — controlled pagination primitive.
+ *
+ * Three variants:
+ *  - `default`  — page-size selector + summary + page numbers + nav buttons + jump input
+ *  - `compact`  — page numbers + nav buttons only (no summary, no selector, no jump)
+ *  - `minimal`  — "Page X of Y" + prev/next only
+ *
+ * Always controlled (no internal state besides the jump-input draft).
+ *
+ * A11Y:
+ *  - `<nav aria-label="Pagination">` root
+ *  - `aria-current="page"` on the active page button
+ *  - `aria-label` on every interactive element
+ *
+ * @example
+ * ```tsx
+ * const [page, setPage] = useState(1);
+ * const [pageSize, setPageSize] = useState(20);
+ *
+ * <Pagination
+ *   page={page}
+ *   pageSize={pageSize}
+ *   totalCount={1437}
+ *   onPageChange={setPage}
+ *   onPageSizeChange={setPageSize}
+ * />
+ * ```
+ */
+export declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/src/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,uBAAuB,CAAC;AAgB/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiOhD"}

package/dist/src/components/Pagination/pagination.helpers.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Compute the array of page indices (or `'ellipsis'` sentinels) to
+ * render for a `<Pagination>`.
+ *
+ * Algorithm (standard "siblings + boundaries + ellipsis fill"):
+ *  1. Always show `boundaryCount` pages at the start and `boundaryCount`
+ *     at the end.
+ *  2. Show `siblingCount` pages on each side of the current page.
+ *  3. Fill gaps wider than 1 with `'ellipsis'`.
+ *  4. If a gap is exactly 1 page wide, include that page directly
+ *     (no ellipsis for a single hidden number).
+ *
+ * Output is 1-indexed page numbers OR the literal string `'ellipsis'`.
+ *
+ * @example
+ * ```ts
+ * range(1, 10, 1, 1)  // [1, 'ellipsis', 5, 'ellipsis', 10] when current=5
+ * range(1, 5, 1, 1)   // [1, 2, 3, 4, 5]
+ * range(1, 100, 1, 1) // edges varying with current
+ * ```
+ */
+export declare function computePageRange(currentPage: number, totalPages: number, siblingCount: number, boundaryCount: number): (number | 'ellipsis')[];
+//# sourceMappingURL=pagination.helpers.d.ts.map

package/dist/src/components/Pagination/pagination.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/pagination.helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,CAAC,MAAM,GAAG,UAAU,CAAC,EAAE,CAsEzB"}