npm - @dashforge/tw - Versions diffs - 0.3.0-beta → 0.5.0-beta - Mend

@dashforge/tw 0.3.0-beta → 0.5.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/CHANGELOG.md +246 -0
package/PARITY.md +483 -0
package/PERFORMANCE.md +169 -0
package/dist/index.esm.js +1055 -2
package/dist/src/components/Accordion/Accordion.d.ts +21 -0
package/dist/src/components/Accordion/Accordion.d.ts.map +1 -0
package/dist/src/components/Accordion/accordion.types.d.ts +74 -0
package/dist/src/components/Accordion/accordion.types.d.ts.map +1 -0
package/dist/src/components/Accordion/accordion.variants.d.ts +58 -0
package/dist/src/components/Accordion/accordion.variants.d.ts.map +1 -0
package/dist/src/components/Dialog/Dialog.d.ts +17 -0
package/dist/src/components/Dialog/Dialog.d.ts.map +1 -0
package/dist/src/components/Dialog/dialog.types.d.ts +75 -0
package/dist/src/components/Dialog/dialog.types.d.ts.map +1 -0
package/dist/src/components/Dialog/dialog.variants.d.ts +80 -0
package/dist/src/components/Dialog/dialog.variants.d.ts.map +1 -0
package/dist/src/components/Pagination/Pagination.d.ts +32 -0
package/dist/src/components/Pagination/Pagination.d.ts.map +1 -0
package/dist/src/components/Pagination/pagination.helpers.d.ts +23 -0
package/dist/src/components/Pagination/pagination.helpers.d.ts.map +1 -0
package/dist/src/components/Pagination/pagination.types.d.ts +120 -0
package/dist/src/components/Pagination/pagination.types.d.ts.map +1 -0
package/dist/src/components/Pagination/pagination.variants.d.ts +150 -0
package/dist/src/components/Pagination/pagination.variants.d.ts.map +1 -0
package/dist/src/components/Popover/Popover.d.ts +15 -0
package/dist/src/components/Popover/Popover.d.ts.map +1 -0
package/dist/src/components/Popover/popover.types.d.ts +45 -0
package/dist/src/components/Popover/popover.types.d.ts.map +1 -0
package/dist/src/components/Popover/popover.variants.d.ts +34 -0
package/dist/src/components/Popover/popover.variants.d.ts.map +1 -0
package/dist/src/components/Skeleton/Skeleton.d.ts +23 -0
package/dist/src/components/Skeleton/Skeleton.d.ts.map +1 -0
package/dist/src/components/Skeleton/skeleton.types.d.ts +56 -0
package/dist/src/components/Skeleton/skeleton.types.d.ts.map +1 -0
package/dist/src/components/Skeleton/skeleton.variants.d.ts +110 -0
package/dist/src/components/Skeleton/skeleton.variants.d.ts.map +1 -0
package/dist/src/components/Tabs/Tabs.d.ts +15 -0
package/dist/src/components/Tabs/Tabs.d.ts.map +1 -0
package/dist/src/components/Tabs/tabs.types.d.ts +55 -0
package/dist/src/components/Tabs/tabs.types.d.ts.map +1 -0
package/dist/src/components/Tabs/tabs.variants.d.ts +82 -0
package/dist/src/components/Tabs/tabs.variants.d.ts.map +1 -0
package/dist/src/components/Tooltip/Tooltip.d.ts +29 -0
package/dist/src/components/Tooltip/Tooltip.d.ts.map +1 -0
package/dist/src/components/Tooltip/tooltip.types.d.ts +47 -0
package/dist/src/components/Tooltip/tooltip.types.d.ts.map +1 -0
package/dist/src/components/Tooltip/tooltip.variants.d.ts +34 -0
package/dist/src/components/Tooltip/tooltip.variants.d.ts.map +1 -0
package/dist/src/index.d.ts +22 -1
package/dist/src/index.d.ts.map +1 -1
package/package.json +8 -3
package/src/components/Accordion/Accordion.test.tsx +95 -0
package/src/components/Accordion/Accordion.tsx +97 -0
package/src/components/Accordion/accordion.types.ts +66 -0
package/src/components/Accordion/accordion.variants.ts +30 -0
package/src/components/Dialog/Dialog.test.tsx +96 -0
package/src/components/Dialog/Dialog.tsx +93 -0
package/src/components/Dialog/dialog.types.ts +62 -0
package/src/components/Dialog/dialog.variants.ts +62 -0
package/src/components/Pagination/Pagination.test.tsx +314 -0
package/src/components/Pagination/Pagination.tsx +275 -0
package/src/components/Pagination/pagination.helpers.ts +102 -0
package/src/components/Pagination/pagination.types.ts +117 -0
package/src/components/Pagination/pagination.variants.ts +111 -0
package/src/components/Popover/Popover.test.tsx +72 -0
package/src/components/Popover/Popover.tsx +55 -0
package/src/components/Popover/popover.types.ts +42 -0
package/src/components/Popover/popover.variants.ts +18 -0
package/src/components/Skeleton/Skeleton.test.tsx +127 -0
package/src/components/Skeleton/Skeleton.tsx +49 -0
package/src/components/Skeleton/skeleton.types.ts +59 -0
package/src/components/Skeleton/skeleton.variants.ts +86 -0
package/src/components/Tabs/Tabs.test.tsx +74 -0
package/src/components/Tabs/Tabs.tsx +66 -0
package/src/components/Tabs/tabs.types.ts +49 -0
package/src/components/Tabs/tabs.variants.ts +58 -0
package/src/components/Tooltip/Tooltip.test.tsx +73 -0
package/src/components/Tooltip/Tooltip.tsx +70 -0
package/src/components/Tooltip/tooltip.types.ts +44 -0
package/src/components/Tooltip/tooltip.variants.ts +18 -0
package/src/index.ts +57 -1

package/dist/index.esm.js CHANGED Viewed

@@ -11,6 +11,11 @@ import { useDashFieldMeta } from '@dashforge/forms';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixTabs from '@radix-ui/react-tabs';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixAccordion from '@radix-ui/react-accordion';
 function _extends() {
     _extends = Object.assign || function assign(target) {
@@ -6791,6 +6796,1054 @@ AspectRatio.displayName = 'AspectRatio';
 });
 VisuallyHidden.displayName = 'VisuallyHidden';
+/**
+ * `<Dialog>` variant recipe.
+ *
+ * Slots:
+ *  - `overlay`  — backdrop (Radix's `DialogOverlay`)
+ *  - `content`  — the dialog box itself
+ *  - `title`    — heading at the top
+ *  - `description` — secondary text under the title
+ *  - `closeButton` — top-right `×` button
+ *  - `body`     — main scrollable area
+ *  - `actions`  — footer action bar
+ *
+ * Three sizes (`sm` / `md` / `lg`) drive the content max-width.
+ * Motion is gated by `prefers-reduced-motion` so the slide-in
+ * animation collapses to an instant appear on users that opt out.
+ */ const dialogVariants = tv({
+    slots: {
+        overlay: [
+            'fixed inset-0 z-50 bg-neutral-950/60 backdrop-blur-sm',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        content: [
+            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+            'w-full bg-white dark:bg-neutral-900 rounded-lg shadow-xl',
+            'border border-neutral-200 dark:border-neutral-800',
+            'p-6 flex flex-col gap-4 max-h-[90vh]',
+            'focus:outline-none',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        title: 'text-lg font-semibold leading-tight text-neutral-900 dark:text-neutral-50',
+        description: 'text-sm text-neutral-600 dark:text-neutral-400',
+        closeButton: [
+            'absolute top-4 right-4 inline-flex items-center justify-center',
+            'h-8 w-8 rounded-md text-neutral-500 hover:text-neutral-900',
+            'dark:text-neutral-400 dark:hover:text-neutral-50',
+            'hover:bg-neutral-100 dark:hover:bg-neutral-800',
+            'focus:outline-none focus:ring-2 focus:ring-primary-500',
+            'transition-colors'
+        ],
+        body: 'flex-1 overflow-y-auto',
+        actions: 'flex justify-end gap-2 pt-2'
+    },
+    variants: {
+        size: {
+            sm: {
+                content: 'max-w-sm'
+            },
+            md: {
+                content: 'max-w-md'
+            },
+            lg: {
+                content: 'max-w-2xl'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+/**
+ * Dashforge TW `<Dialog>` — declarative modal dialog.
+ *
+ * Built on `@radix-ui/react-dialog`:
+ *  - APG dialog pattern out of the box (focus trap, restore focus on
+ *    close, Esc-to-close, `aria-modal`, `aria-labelledby`).
+ *  - Renders into a portal (no z-index hell).
+ *  - Scroll lock on `<body>` while open.
+ *
+ * Use the imperative `useDialog()` (export from this same module) if
+ * you want a `confirm()`-style return value pattern (similar to
+ * `useConfirm()` from `ConfirmDialog`). Use `<Dialog>` when you want
+ * the control flow living in your component tree.
+ */ function Dialog(props) {
+    var _slotProps_overlay, _slotProps_content, _slotProps_title, _slotProps_description, _slotProps_body, _slotProps_closeButton;
+    const { open, onOpenChange, children, title, description, showCloseButton = true, disableBackdropClose = false, disableEscapeClose = false, size = 'md', sx, slotProps } = props;
+    const v = dialogVariants({
+        size
+    });
+    return jsx(RadixDialog.Root, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: jsxs(RadixDialog.Portal, {
+            children: [
+                jsx(RadixDialog.Overlay, {
+                    className: cn(v.overlay(), slotProps == null ? void 0 : (_slotProps_overlay = slotProps.overlay) == null ? void 0 : _slotProps_overlay.className)
+                }),
+                jsxs(RadixDialog.Content, {
+                    className: cn(v.content(), sx, slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                    onPointerDownOutside: (event)=>{
+                        if (disableBackdropClose) event.preventDefault();
+                    },
+                    onEscapeKeyDown: (event)=>{
+                        if (disableEscapeClose) event.preventDefault();
+                    },
+                    children: [
+                        title != null && jsx(RadixDialog.Title, {
+                            className: cn(v.title(), slotProps == null ? void 0 : (_slotProps_title = slotProps.title) == null ? void 0 : _slotProps_title.className),
+                            children: title
+                        }),
+                        description != null && jsx(RadixDialog.Description, {
+                            className: cn(v.description(), slotProps == null ? void 0 : (_slotProps_description = slotProps.description) == null ? void 0 : _slotProps_description.className),
+                            children: description
+                        }),
+                        jsx("div", {
+                            className: cn(v.body(), slotProps == null ? void 0 : (_slotProps_body = slotProps.body) == null ? void 0 : _slotProps_body.className),
+                            children: children
+                        }),
+                        showCloseButton && jsx(RadixDialog.Close, {
+                            "aria-label": "Close",
+                            className: cn(v.closeButton(), slotProps == null ? void 0 : (_slotProps_closeButton = slotProps.closeButton) == null ? void 0 : _slotProps_closeButton.className),
+                            children: jsx("svg", {
+                                width: "1em",
+                                height: "1em",
+                                viewBox: "0 0 16 16",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "1.5",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                "aria-hidden": "true",
+                                children: jsx("path", {
+                                    d: "M4 4l8 8M12 4l-8 8"
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+const tabsVariants = tv({
+    slots: {
+        root: 'flex',
+        list: 'inline-flex items-center gap-1',
+        trigger: [
+            'inline-flex items-center justify-center whitespace-nowrap',
+            'text-sm font-medium transition-colors',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'disabled:opacity-50 disabled:pointer-events-none',
+            'motion-reduce:transition-none'
+        ],
+        content: [
+            'mt-3 focus:outline-none',
+            'data-[state=inactive]:hidden'
+        ]
+    },
+    variants: {
+        variant: {
+            underline: {
+                list: 'border-b border-neutral-200 dark:border-neutral-800',
+                trigger: [
+                    'px-3 py-2 border-b-2 border-transparent text-neutral-600 dark:text-neutral-400',
+                    'hover:text-neutral-900 dark:hover:text-neutral-50',
+                    'data-[state=active]:border-primary-500 data-[state=active]:text-primary-700',
+                    'dark:data-[state=active]:text-primary-400'
+                ]
+            },
+            pill: {
+                list: 'rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1',
+                trigger: [
+                    'px-3 py-1.5 rounded-md text-neutral-600 dark:text-neutral-400',
+                    'hover:text-neutral-900 dark:hover:text-neutral-50',
+                    'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-900',
+                    'data-[state=active]:text-neutral-900 dark:data-[state=active]:text-neutral-50',
+                    'data-[state=active]:shadow-sm'
+                ]
+            }
+        },
+        orientation: {
+            horizontal: {
+                root: 'flex-col',
+                list: 'flex-row'
+            },
+            vertical: {
+                root: 'flex-row gap-4',
+                list: 'flex-col items-stretch'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'underline',
+        orientation: 'horizontal'
+    }
+});
+/**
+ * Dashforge TW `<Tabs>` — declarative tab navigation.
+ *
+ * Built on `@radix-ui/react-tabs`:
+ *  - APG tabs pattern (arrow-key navigation, automatic activation,
+ *    `role="tablist"` + `role="tab"` + `role="tabpanel"`).
+ *  - Controlled / uncontrolled (`value` / `defaultValue`).
+ *
+ * Two variant axes:
+ *  - `variant` — `underline` (default) | `pill`
+ *  - `orientation` — `horizontal` (default) | `vertical`
+ */ function Tabs(props) {
+    var _items_, _slotProps_root, _slotProps_list;
+    const { items, value, defaultValue, onValueChange, variant = 'underline', orientation = 'horizontal', sx, slotProps } = props;
+    const v = tabsVariants({
+        variant,
+        orientation
+    });
+    const resolvedDefault = defaultValue != null ? defaultValue : (_items_ = items[0]) == null ? void 0 : _items_.value;
+    return jsxs(RadixTabs.Root, {
+        value: value,
+        defaultValue: resolvedDefault,
+        onValueChange: onValueChange,
+        orientation: orientation,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            jsx(RadixTabs.List, {
+                className: cn(v.list(), slotProps == null ? void 0 : (_slotProps_list = slotProps.list) == null ? void 0 : _slotProps_list.className),
+                children: items.map((item)=>{
+                    var _slotProps_trigger;
+                    return jsx(RadixTabs.Trigger, {
+                        value: item.value,
+                        disabled: item.disabled,
+                        className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                        children: item.label
+                    }, item.value);
+                })
+            }),
+            items.map((item)=>{
+                var _slotProps_content;
+                return jsx(RadixTabs.Content, {
+                    value: item.value,
+                    className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                    children: item.content
+                }, item.value);
+            })
+        ]
+    });
+}
+const tooltipVariants = tv({
+    slots: {
+        content: [
+            'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
+            'bg-neutral-900 text-neutral-50',
+            'dark:bg-neutral-50 dark:text-neutral-900',
+            'shadow-md',
+            'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        arrow: 'fill-neutral-900 dark:fill-neutral-50'
+    }
+});
+/**
+ * Dashforge TW `<Tooltip>` — hoverable / focusable tooltip.
+ *
+ * Built on `@radix-ui/react-tooltip`:
+ *  - APG tooltip pattern: `role="tooltip"`, `aria-describedby` wired
+ *    to the trigger automatically (Radix manages the id linkage).
+ *  - Shows on hover OR keyboard focus.
+ *  - Dismissed on Escape or pointer leave.
+ *
+ * Wrap any single React node — it becomes the trigger via Radix's
+ * `asChild` slot. The trigger inherits `aria-describedby` so screen
+ * readers announce the tooltip content along with the trigger.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Delete this item">
+ *   <Button variant="ghost">
+ *     <TrashIcon />
+ *   </Button>
+ * </Tooltip>
+ * ```
+ *
+ * Each consumer can also wrap the entire app once in
+ * `<RadixTooltip.Provider>` to share delay/skip configuration; we
+ * include a per-component provider here for ease-of-use.
+ */ function Tooltip(props) {
+    var _slotProps_content, _slotProps_arrow;
+    const { children, content, side = 'top', align = 'center', hideArrow = false, delayDuration = 200, open, onOpenChange, sideOffset = 4, slotProps } = props;
+    const v = tooltipVariants();
+    return jsx(RadixTooltip.Provider, {
+        delayDuration: delayDuration,
+        children: jsxs(RadixTooltip.Root, {
+            open: open,
+            onOpenChange: onOpenChange,
+            children: [
+                jsx(RadixTooltip.Trigger, {
+                    asChild: true,
+                    children: children
+                }),
+                jsx(RadixTooltip.Portal, {
+                    children: jsxs(RadixTooltip.Content, {
+                        side: side,
+                        align: align,
+                        sideOffset: sideOffset,
+                        className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                        children: [
+                            content,
+                            !hideArrow && jsx(RadixTooltip.Arrow, {
+                                className: cn(v.arrow(), slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+const popoverVariants = tv({
+    slots: {
+        content: [
+            'z-50 rounded-md border border-neutral-200 dark:border-neutral-800',
+            'bg-white dark:bg-neutral-900 p-4 shadow-lg',
+            'text-sm text-neutral-900 dark:text-neutral-50',
+            'focus:outline-none',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        arrow: 'fill-white dark:fill-neutral-900'
+    }
+});
+/**
+ * Dashforge TW `<Popover>` — clickable floating content panel.
+ *
+ * Built on `@radix-ui/react-popover`:
+ *  - Focus trap inside the popover (Tab cycles within).
+ *  - Outside-click + Escape dismiss.
+ *  - APG dialog-like semantics (`role="dialog"` on content).
+ *  - Portal-rendered.
+ *
+ * Use `<Popover>` for menus / pickers / settings panels with
+ * interactive children. Use `<Tooltip>` for read-only hints.
+ */ function Popover(props) {
+    var _slotProps_content, _slotProps_arrow;
+    const { children, content, side = 'bottom', align = 'center', showArrow = false, open, onOpenChange, sideOffset = 8, width, slotProps } = props;
+    const v = popoverVariants();
+    return jsxs(RadixPopover.Root, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: [
+            jsx(RadixPopover.Trigger, {
+                asChild: true,
+                children: children
+            }),
+            jsx(RadixPopover.Portal, {
+                children: jsxs(RadixPopover.Content, {
+                    side: side,
+                    align: align,
+                    sideOffset: sideOffset,
+                    style: width != null ? {
+                        width
+                    } : undefined,
+                    className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                    children: [
+                        content,
+                        showArrow && jsx(RadixPopover.Arrow, {
+                            className: cn(v.arrow(), slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+const accordionVariants = tv({
+    slots: {
+        root: 'w-full',
+        item: 'border-b border-neutral-200 dark:border-neutral-800',
+        header: 'flex',
+        trigger: [
+            'flex flex-1 items-center justify-between py-3 text-left',
+            'text-sm font-medium text-neutral-900 dark:text-neutral-50',
+            'transition-all hover:underline',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:rounded',
+            '[&[data-state=open]>svg]:rotate-180',
+            'disabled:opacity-50 disabled:pointer-events-none',
+            'motion-reduce:transition-none'
+        ],
+        content: [
+            'overflow-hidden text-sm text-neutral-700 dark:text-neutral-300',
+            'data-[state=open]:animate-accordion-down',
+            'data-[state=closed]:animate-accordion-up',
+            'motion-reduce:animate-none'
+        ],
+        chevron: [
+            'h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ]
+    }
+});
+/**
+ * Dashforge TW `<Accordion>` — collapsible section list.
+ *
+ * Built on `@radix-ui/react-accordion`:
+ *  - APG accordion pattern: `role="region"` on content, header
+ *    button with `aria-expanded` and `aria-controls` linked to
+ *    the panel.
+ *  - Keyboard support: Space / Enter toggle, ArrowDown / ArrowUp
+ *    move focus between triggers, Home / End to extremes.
+ *  - Two modes:
+ *    - `type="single"` — at most one section open at a time;
+ *      `collapsible` allows clicking the open section to close it
+ *      (default true).
+ *    - `type="multiple"` — multiple sections open simultaneously.
+ *
+ * The trigger renders a chevron that flips 180° via CSS
+ * (`data-state=open` selector) — no React state, no JS animation.
+ */ function Accordion(props) {
+    var _props_collapsible;
+    var _slotProps_root;
+    const v = accordionVariants();
+    const { items, sx, slotProps } = props;
+    const renderItems = (items, slotProps)=>items.map((item)=>{
+            var _slotProps_item, _slotProps_header, _slotProps_trigger, _slotProps_chevron, _slotProps_content;
+            return jsxs(RadixAccordion.Item, {
+                value: item.value,
+                disabled: item.disabled,
+                className: cn(v.item(), slotProps == null ? void 0 : (_slotProps_item = slotProps.item) == null ? void 0 : _slotProps_item.className),
+                children: [
+                    jsx(RadixAccordion.Header, {
+                        className: cn(v.header(), slotProps == null ? void 0 : (_slotProps_header = slotProps.header) == null ? void 0 : _slotProps_header.className),
+                        children: jsxs(RadixAccordion.Trigger, {
+                            className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                            children: [
+                                item.header,
+                                jsx("svg", {
+                                    className: cn(v.chevron(), slotProps == null ? void 0 : (_slotProps_chevron = slotProps.chevron) == null ? void 0 : _slotProps_chevron.className),
+                                    width: "1em",
+                                    height: "1em",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "1.5",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    "aria-hidden": "true",
+                                    children: jsx("path", {
+                                        d: "M4 6l4 4 4-4"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    jsx(RadixAccordion.Content, {
+                        className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                        children: jsx("div", {
+                            className: "pb-3 pt-0",
+                            children: item.content
+                        })
+                    })
+                ]
+            }, item.value);
+        });
+    if (props.type === 'multiple') {
+        var _slotProps_root1;
+        return jsx(RadixAccordion.Root, {
+            type: "multiple",
+            value: props.value,
+            defaultValue: props.defaultValue,
+            onValueChange: props.onValueChange,
+            className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root1 = slotProps.root) == null ? void 0 : _slotProps_root1.className),
+            children: renderItems(items, slotProps)
+        });
+    }
+    return jsx(RadixAccordion.Root, {
+        type: "single",
+        collapsible: (_props_collapsible = props.collapsible) != null ? _props_collapsible : true,
+        value: props.value,
+        defaultValue: props.defaultValue,
+        onValueChange: props.onValueChange,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: renderItems(items, slotProps)
+    });
+}
+/**
+ * `<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
  *
@@ -6818,6 +7871,6 @@ VisuallyHidden.displayName = 'VisuallyHidden';
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.3.0-beta';
+ */ const VERSION = '0.5.0-beta';
-export { AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DateTimePicker, Divider, Grid, LeftNav, NumberField, OTPField, RadioGroup, SnackbarProvider, Stack, Switch, TextField, Textarea, TopBar, Typography, VERSION, VisuallyHidden, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dateTimePickerVariants, dividerLineVariants, dividerVariants, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, radioGroupVariants, snackbarVariants, stackVariants, switchVariants, textFieldVariants, textareaVariants, 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 };