@ai-matrx/design-system 0.14.3 → 0.15.2

package/dist/data-table/pagination.cjs

@@ -0,0 +1,595 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/data-table/pagination.tsx
+var pagination_exports = {};
+__export(pagination_exports, {
+  default: () => GenericTablePagination
+});
+module.exports = __toCommonJS(pagination_exports);
+
+// src/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var React = __toESM(require("react"), 1);
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/data-table/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Icon({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...props, children });
+}
+var ChevronLeft = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRight = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+var ChevronsLeft = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m11 18-6-6 6-6m8 12-6-6 6-6" }) });
+var ChevronsRight = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m5 18 6-6-6-6m8 12 6-6-6-6" }) });
+
+// src/select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var React3 = __toESM(require("react"), 1);
+
+// 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
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var selectTriggerVariants = (0, import_class_variance_authority2.cva)(
+  "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__ */ (0, import_jsx_runtime5.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadixChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      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__ */ (0, import_jsx_runtime5.jsx)(SelectScrollUpButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime5.jsx)(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  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__ */ (0, import_jsx_runtime5.jsxs)(
+  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__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
+  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
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-matrx-table-footer": true, className: containerClass, children: [
+    showItemsPerPageSelect && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 justify-start",
+          !compact && "sm:p-1",
+          selectContainerClassName
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          Select,
+          {
+            value: itemsPerPage.toString(),
+            onValueChange: (value) => onItemsPerPageChange(parseInt(value)),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                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__ */ (0, import_jsx_runtime6.jsx)(SelectValue, { placeholder: itemsPerPage.toString() })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SelectContent, { children: [
+                availablePageSizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectItem, { value: size.toString(), children: size }, size)),
+                showAllOption ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn("flex min-w-0 justify-center", infoContainerClassName),
+        children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
+            startItem,
+            "-",
+            endItem,
+            " / ",
+            totalItems
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "span",
+            {
+              className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
+              children: formatLabel(startItem, endItem, totalItems)
+            }
+          )
+        ] })
+      }
+    ),
+    showPageControls && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 items-center justify-end",
+          compact ? "gap-0" : "gap-0.5 sm:gap-1",
+          controlsContainerClassName
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)(ChevronsLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)(ChevronLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          ),
+          getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "relative z-10", children: page })
+            },
+            `mobile-${page}`
+          )),
+          getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "relative z-10", children: page })
+            },
+            `desktop-${page}`
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)(ChevronRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            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__ */ (0, import_jsx_runtime6.jsx)(ChevronsRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=pagination.cjs.map