@ai-matrx/design-system 0.14.3 → 0.15.2

package/dist/data-table/pagination.js

@@ -0,0 +1,563 @@
+"use client";
+"use client";
+
+// src/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        /**
+         * An explicit spelling of `default`, identical by construction. It is
+         * not decoration: matrx-frontend's `ButtonMine` fork carried it, ~17
+         * call sites say `variant="primary"`, and the alternative to keeping
+         * the word was a host shim translating a prop — the massage C22 bans.
+         */
+        primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        /** The affirmative twin of `destructive` — confirm, approve, publish. */
+        success: "bg-success text-success-foreground shadow-sm hover:bg-success/90",
+        outline: "border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        subtle: "border border-transparent bg-muted/50 text-foreground hover:border-border hover:bg-muted"
+      },
+      /**
+       * ONE size scale, xs → 3xl, plus the two icon boxes. The top and bottom
+       * of the scale came in from matrx-frontend's `ButtonMine` fork (2026-09-07):
+       * a dense toolbar needs `xs`, and a marketing/hero call to action needs
+       * `xl`+. A host that has to reach outside this scale forks the button,
+       * which is exactly how `ButtonMine` was born.
+       */
+      size: {
+        xs: "h-6 rounded-md px-1 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        /** An explicit spelling of `default` (the fork's middle rung). */
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-6",
+        xl: "h-12 px-8 py-3 text-base",
+        "2xl": "h-14 px-10 py-3 text-base",
+        "3xl": "h-16 px-12 py-3 text-base",
+        icon: "h-9 w-9",
+        "icon-sm": "h-7 w-7",
+        /** A circular icon box — an avatar-shaped control, not a square one. */
+        roundIcon: "h-8 w-8 rounded-full p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/data-table/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Icon({ children, ...props }) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...props, children });
+}
+var ChevronLeft = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRight = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }) });
+var ChevronsLeft = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m11 18-6-6 6-6m8 12-6-6 6-6" }) });
+var ChevronsRight = (p) => /* @__PURE__ */ jsx2(Icon, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m5 18 6-6-6-6m8 12 6-6-6-6" }) });
+
+// src/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva as cva2 } from "class-variance-authority";
+import * as React3 from "react";
+
+// src/motion.ts
+var MOTION_OVERLAY = "matrx-motion-overlay";
+var MOTION_DIALOG = "matrx-motion-dialog";
+var POPPER_OFFSET = "matrx-popper-offset";
+var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
+var MOTION_POPPER = "matrx-motion-popper";
+var MOTION_SHEET = {
+  top: "matrx-motion-sheet-top",
+  bottom: "matrx-motion-sheet-bottom",
+  left: "matrx-motion-sheet-left",
+  right: "matrx-motion-sheet-right",
+  center: "matrx-motion-sheet-center"
+};
+var MOTION_PULSE = "matrx-pulse";
+var MOTION_SPIN = "matrx-spin";
+var ALL_MOTION_CLASSES = [
+  MOTION_OVERLAY,
+  MOTION_DIALOG,
+  MOTION_BOTTOM_SHEET,
+  MOTION_POPPER,
+  ...Object.values(MOTION_SHEET),
+  MOTION_PULSE,
+  MOTION_SPIN
+];
+
+// src/icons.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function radixProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 15 15",
+    width: 15,
+    height: 15,
+    fill: "none",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx3("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function RadixChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx3("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function RadixChevronUpIcon(props) {
+  return /* @__PURE__ */ jsx3("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+
+// src/portal-container.tsx
+import * as React2 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CONTEXT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.portal-container-context");
+var contextRegistry = globalThis;
+var PortalContainerContext = contextRegistry[CONTEXT_SLOT] ??= React2.createContext(void 0);
+function usePortalContainer(explicit) {
+  const injected = React2.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/select.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var selectTriggerVariants = cva2(
+  "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground transition-colors hover:bg-accent hover:border-accent-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 py-1 text-xs",
+        default: "h-9 px-3 py-1",
+        lg: "h-10 px-3 py-2"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var SelectTrigger = React3.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx5(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx5(RadixChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs3(
+      SelectPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          animated && MOTION_POPPER,
+          // The resting gap from the trigger. It is the `translate` property
+          // (POPPER_OFFSET), never Tailwind translate utilities: those compose
+          // with `transform` on a v4 host and are REPLACED by it on a v3 one,
+          // so on v3 the animation ate the gap and the surface snapped 4px at
+          // the end. Same law as the centred dialog card — see motion.ts.
+          position === "popper" && POPPER_OFFSET,
+          className
+        ),
+        position,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx5(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx5(
+            SelectPrimitive.Viewport,
+            {
+              className: cn(
+                "p-0.5 overflow-y-auto",
+                position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx5(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      description ? "flex-col items-start gap-0.5 py-1.5" : "items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ jsx5("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/data-table/pagination.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function GenericTablePagination({
+  totalItems,
+  itemsPerPage,
+  currentPage,
+  onPageChange,
+  onItemsPerPageChange,
+  pageSizeOptions = [5, 10, 25, 50, 100],
+  className = "",
+  showItemsPerPageSelect = true,
+  showPageInfo = true,
+  showPageControls = true,
+  maxPagesToShow = 5,
+  containerClassName = "",
+  selectContainerClassName = "",
+  infoContainerClassName = "",
+  controlsContainerClassName = "",
+  pageButtonClassName = "",
+  pageActiveButtonClassName = "",
+  navButtonClassName = "",
+  allValue = totalItems,
+  allOptionLabel = "All",
+  showAllOption = true,
+  layoutType = "grid",
+  labelFormat,
+  compact = false,
+  hideEntriesInfo = false
+}) {
+  const positivePageSizes = pageSizeOptions.filter((size) => size > 0);
+  const availablePageSizes = itemsPerPage > 0 && !positivePageSizes.includes(itemsPerPage) ? [...positivePageSizes, itemsPerPage].sort((a, b) => a - b) : positivePageSizes;
+  const effectiveItemsPerPage = itemsPerPage === 0 ? Math.max(totalItems, 1) : Math.max(itemsPerPage, 1);
+  const totalPages = Math.max(1, Math.ceil(totalItems / effectiveItemsPerPage));
+  const getPageNumbers = (limit = maxPagesToShow) => {
+    let startPage = Math.max(1, currentPage - Math.floor(limit / 2));
+    const endPage = Math.min(totalPages, startPage + limit - 1);
+    startPage = Math.max(1, endPage - limit + 1);
+    return Array.from(
+      { length: endPage - startPage + 1 },
+      (_, i) => startPage + i
+    );
+  };
+  const isFirstPageDisabled = currentPage <= 1;
+  const isLastPageDisabled = currentPage >= totalPages;
+  const startItem = totalItems === 0 ? 0 : (currentPage - 1) * effectiveItemsPerPage + 1;
+  const endItem = Math.min(currentPage * effectiveItemsPerPage, totalItems);
+  const defaultLabelFormat = (start, end, total) => {
+    return compact ? `${start}-${end} of ${total}` : `Showing ${start} to ${end} of ${total} entries`;
+  };
+  const formatLabel = labelFormat || defaultLabelFormat;
+  const buttonSize = compact ? "sm" : "icon";
+  const compactButtonClass = "relative isolate h-11 w-11 min-w-11 border-0 bg-transparent p-0 text-xs shadow-none before:absolute before:inset-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:bg-transparent hover:before:bg-accent disabled:bg-transparent disabled:before:opacity-40 [&_svg]:relative [&_svg]:z-10 lg:h-7 lg:min-h-7 lg:w-7 lg:min-w-7 lg:border lg:border-input lg:bg-background lg:before:hidden lg:hover:bg-accent";
+  const compactActiveButtonClass = "text-primary-foreground before:border-primary before:bg-primary hover:before:bg-primary/90 lg:border-primary lg:bg-primary lg:hover:bg-primary/90";
+  const containerClass = cn(
+    "w-full items-center border-t border-border",
+    layoutType === "grid" ? "grid grid-cols-[auto_minmax(0,1fr)_auto]" : "flex flex-nowrap justify-between",
+    compact ? "h-11 gap-0 px-0 py-0 lg:h-8" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
+    className,
+    containerClassName
+  );
+  return /* @__PURE__ */ jsxs4("div", { "data-matrx-table-footer": true, className: containerClass, children: [
+    showItemsPerPageSelect && /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 justify-start",
+          !compact && "sm:p-1",
+          selectContainerClassName
+        ),
+        children: /* @__PURE__ */ jsxs4(
+          Select,
+          {
+            value: itemsPerPage.toString(),
+            onValueChange: (value) => onItemsPerPageChange(parseInt(value)),
+            children: [
+              /* @__PURE__ */ jsx6(
+                SelectTrigger,
+                {
+                  "aria-label": "Rows per page",
+                  className: cn(
+                    "focus:ring-0",
+                    compact ? "relative isolate h-11 w-14 border-0 bg-transparent px-2 text-xs before:absolute before:inset-x-1 before:inset-y-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:before:bg-accent [&>*]:relative [&>*]:z-10 lg:h-7 lg:min-h-7 lg:w-16 lg:border lg:border-input lg:bg-background lg:px-2 lg:before:hidden" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
+                  ),
+                  children: /* @__PURE__ */ jsx6(SelectValue, { placeholder: itemsPerPage.toString() })
+                }
+              ),
+              /* @__PURE__ */ jsxs4(SelectContent, { children: [
+                availablePageSizes.map((size) => /* @__PURE__ */ jsx6(SelectItem, { value: size.toString(), children: size }, size)),
+                showAllOption ? /* @__PURE__ */ jsx6(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn("flex min-w-0 justify-center", infoContainerClassName),
+        children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsxs4("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
+            startItem,
+            "-",
+            endItem,
+            " / ",
+            totalItems
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
+              children: formatLabel(startItem, endItem, totalItems)
+            }
+          )
+        ] })
+      }
+    ),
+    showPageControls && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 items-center justify-end",
+          compact ? "gap-0" : "gap-0.5 sm:gap-1",
+          controlsContainerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx6(
+            Button,
+            {
+              variant: "outline",
+              size: buttonSize,
+              "aria-label": "First page",
+              title: "First page",
+              onClick: () => onPageChange(1),
+              disabled: isFirstPageDisabled,
+              className: cn(
+                "hidden sm:inline-flex",
+                compact ? compactButtonClass : "h-8 w-8 p-0",
+                navButtonClassName
+              ),
+              children: /* @__PURE__ */ jsx6(ChevronsLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Button,
+            {
+              variant: "outline",
+              size: buttonSize,
+              "aria-label": "Previous page",
+              title: "Previous page",
+              onClick: () => onPageChange(currentPage - 1),
+              disabled: isFirstPageDisabled,
+              className: cn(
+                compact ? compactButtonClass : "h-8 w-8 p-0",
+                navButtonClassName
+              ),
+              children: /* @__PURE__ */ jsx6(ChevronLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          ),
+          getPageNumbers(3).map((page) => /* @__PURE__ */ jsx6(
+            Button,
+            {
+              variant: currentPage === page ? "default" : "outline",
+              size: buttonSize,
+              "aria-label": `Page ${page}`,
+              "aria-current": currentPage === page ? "page" : void 0,
+              onClick: () => onPageChange(page),
+              className: cn(
+                "sm:hidden",
+                page === currentPage ? "inline-flex" : "hidden min-[360px]:inline-flex",
+                compact ? compactButtonClass : "h-8 w-8 p-0",
+                compact && page === currentPage && compactActiveButtonClass,
+                page === currentPage ? pageActiveButtonClassName : pageButtonClassName
+              ),
+              children: /* @__PURE__ */ jsx6("span", { className: "relative z-10", children: page })
+            },
+            `mobile-${page}`
+          )),
+          getPageNumbers().map((page) => /* @__PURE__ */ jsx6(
+            Button,
+            {
+              variant: currentPage === page ? "default" : "outline",
+              size: buttonSize,
+              "aria-label": `Page ${page}`,
+              "aria-current": currentPage === page ? "page" : void 0,
+              onClick: () => onPageChange(page),
+              className: cn(
+                "hidden sm:inline-flex",
+                compact ? compactButtonClass : "h-8 w-8 p-0",
+                compact && page === currentPage && compactActiveButtonClass,
+                currentPage === page ? pageActiveButtonClassName : pageButtonClassName
+              ),
+              children: /* @__PURE__ */ jsx6("span", { className: "relative z-10", children: page })
+            },
+            `desktop-${page}`
+          )),
+          /* @__PURE__ */ jsx6(
+            Button,
+            {
+              variant: "outline",
+              size: buttonSize,
+              "aria-label": "Next page",
+              title: "Next page",
+              onClick: () => onPageChange(currentPage + 1),
+              disabled: isLastPageDisabled,
+              className: cn(
+                compact ? compactButtonClass : "h-8 w-8 p-0",
+                navButtonClassName
+              ),
+              children: /* @__PURE__ */ jsx6(ChevronRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Button,
+            {
+              variant: "outline",
+              size: buttonSize,
+              "aria-label": "Last page",
+              title: "Last page",
+              onClick: () => onPageChange(totalPages),
+              disabled: isLastPageDisabled,
+              className: cn(
+                "hidden sm:inline-flex",
+                compact ? compactButtonClass : "h-8 w-8 p-0",
+                navButtonClassName
+              ),
+              children: /* @__PURE__ */ jsx6(ChevronsRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  GenericTablePagination as default
+};
+//# sourceMappingURL=pagination.js.map