@ai-matrx/design-system 0.18.3 → 0.18.5

package/dist/data-table/infer-filter.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, e as ColumnFilterKind } from '../types-CD4xGL5Z.cjs';
+import { M as MatrxColumnDef, e as ColumnFilterKind } from '../types-0CNCWvdK.cjs';
 import 'react';
 import './copy-types.cjs';
 

package/dist/data-table/infer-filter.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, e as ColumnFilterKind } from '../types-BhSkeZQ_.js';
+import { M as MatrxColumnDef, e as ColumnFilterKind } from '../types-cH8oLqUx.js';
 import 'react';
 import './copy-types.js';
 

package/dist/data-table/layered-filters.d.cts

@@ -1,3 +1,3 @@
-export { z as LAYERED_FILTER_OPERATORS, B as LAYERED_FILTER_OPERATOR_LABELS, D as LayeredFilterField, E as LayeredFilterOperator, L as LayeredFilterRule, F as columnFiltersToLayeredRules, G as completeLayeredFilterRules, H as decodeLayeredFilterRules, I as encodeLayeredFilterRules, J as isCompleteLayeredFilterRule, K as isLayeredFilterOperator, N as layeredFilterMatchesValue, O as layeredFilterNeedsValue, P as layeredFilterRuleSummary, Q as operatorsForLayeredField } from '../types-CD4xGL5Z.cjs';
+export { z as LAYERED_FILTER_OPERATORS, B as LAYERED_FILTER_OPERATOR_LABELS, D as LayeredFilterField, E as LayeredFilterOperator, L as LayeredFilterRule, F as columnFiltersToLayeredRules, G as completeLayeredFilterRules, H as decodeLayeredFilterRules, I as encodeLayeredFilterRules, J as isCompleteLayeredFilterRule, K as isLayeredFilterOperator, N as layeredFilterMatchesValue, O as layeredFilterNeedsValue, P as layeredFilterRuleSummary, Q as operatorsForLayeredField } from '../types-0CNCWvdK.cjs';
 import 'react';
 import './copy-types.cjs';

package/dist/data-table/layered-filters.d.ts

@@ -1,3 +1,3 @@
-export { z as LAYERED_FILTER_OPERATORS, B as LAYERED_FILTER_OPERATOR_LABELS, D as LayeredFilterField, E as LayeredFilterOperator, L as LayeredFilterRule, F as columnFiltersToLayeredRules, G as completeLayeredFilterRules, H as decodeLayeredFilterRules, I as encodeLayeredFilterRules, J as isCompleteLayeredFilterRule, K as isLayeredFilterOperator, N as layeredFilterMatchesValue, O as layeredFilterNeedsValue, P as layeredFilterRuleSummary, Q as operatorsForLayeredField } from '../types-BhSkeZQ_.js';
+export { z as LAYERED_FILTER_OPERATORS, B as LAYERED_FILTER_OPERATOR_LABELS, D as LayeredFilterField, E as LayeredFilterOperator, L as LayeredFilterRule, F as columnFiltersToLayeredRules, G as completeLayeredFilterRules, H as decodeLayeredFilterRules, I as encodeLayeredFilterRules, J as isCompleteLayeredFilterRule, K as isLayeredFilterOperator, N as layeredFilterMatchesValue, O as layeredFilterNeedsValue, P as layeredFilterRuleSummary, Q as operatorsForLayeredField } from '../types-cH8oLqUx.js';
 import 'react';
 import './copy-types.js';

package/dist/data-table/pagination.cjs

@@ -116,19 +116,8 @@ var Button = React.forwardRef(
 );
 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");
+// src/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var React3 = __toESM(require("react"), 1);
 
 // src/motion.ts
@@ -156,8 +145,61 @@ var ALL_MOTION_CLASSES = [
   MOTION_SPIN
 ];
 
-// src/icons.tsx
+// src/portal-container.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = 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/tooltip.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md",
+        animated && MOTION_POPPER,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/data-table/icons.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Icon({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRight = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+var ChevronsLeft = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m11 18-6-6 6-6m8 12-6-6 6-6" }) });
+var ChevronsRight = (p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime4.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 React4 = __toESM(require("react"), 1);
+
+// src/icons.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function radixProps(props) {
   return {
     xmlns: "http://www.w3.org/2000/svg",
@@ -170,7 +212,7 @@ function radixProps(props) {
   };
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.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",
@@ -181,7 +223,7 @@ function CheckIcon(props) {
   ) });
 }
 function RadixChevronDownIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.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",
@@ -192,7 +234,7 @@ function RadixChevronDownIcon(props) {
   ) });
 }
 function RadixChevronUpIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.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",
@@ -203,26 +245,12 @@ function RadixChevronUpIcon(props) {
   ) });
 }
 
-// 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 import_jsx_runtime6 = 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",
+  "flex w-full items-center justify-between gap-2 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]:min-w-0 [&>span]:line-clamp-1",
   {
     variants: {
       size: {
@@ -236,7 +264,7 @@ var selectTriggerVariants = (0, import_class_variance_authority2.cva)(
     }
   }
 );
-var SelectTrigger = React3.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var SelectTrigger = React4.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -244,12 +272,12 @@ var SelectTrigger = React3.forwardRef(({ className, children, hideArrow = false,
     ...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" }) })
+      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixChevronDownIcon, { className: "h-4 w-4 shrink-0 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var SelectScrollUpButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -258,11 +286,11 @@ var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadixChevronUpIcon, {})
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixChevronUpIcon, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var SelectScrollDownButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -271,11 +299,11 @@ var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadixChevronDownIcon, {})
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixChevronDownIcon, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React3.forwardRef(
+var SelectContent = React4.forwardRef(
   ({
     className,
     children,
@@ -285,7 +313,7 @@ var SelectContent = React3.forwardRef(
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       SelectPrimitive.Content,
       {
         ref,
@@ -303,8 +331,8 @@ var SelectContent = React3.forwardRef(
         position,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectScrollUpButton, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollUpButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             SelectPrimitive.Viewport,
             {
               className: cn(
@@ -314,14 +342,14 @@ var SelectContent = React3.forwardRef(
               children
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectScrollDownButton, {})
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectScrollDownButton, {})
         ]
       }
     ) });
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var SelectLabel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   SelectPrimitive.Label,
   {
     ref,
@@ -330,7 +358,7 @@ var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React3.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var SelectItem = React4.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
   SelectPrimitive.Item,
   {
     ref,
@@ -341,14 +369,14 @@ var SelectItem = React3.forwardRef(({ className, children, description, ...props
     ),
     ...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
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.ItemText, { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -359,7 +387,37 @@ var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/data-table/pagination.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function PageNavigationControl({
+  label,
+  disabledHint,
+  visibilityClassName = "inline-flex",
+  disabled,
+  className,
+  ...props
+}) {
+  const button = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Button,
+    {
+      ...props,
+      disabled,
+      "aria-label": label,
+      className: cn(visibilityClassName, className)
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        className: cn(visibilityClassName, "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+        tabIndex: 0,
+        "aria-label": `${label} \u2014 ${disabledHint.toLowerCase()}`,
+        children: button
+      }
+    ) : button }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContent, { children: disabled ? disabledHint : label })
+  ] });
+}
 function GenericTablePagination({
   totalItems,
   itemsPerPage,
@@ -418,8 +476,8 @@ function GenericTablePagination({
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-matrx-table-footer": true, className: containerClass, children: [
+    showItemsPerPageSelect && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         className: cn(
@@ -427,13 +485,13 @@ function GenericTablePagination({
           !compact && "sm:p-1",
           selectContainerClassName
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           Select,
           {
             value: itemsPerPage.toString(),
             onValueChange: (value) => onItemsPerPageChange(parseInt(value)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 SelectTrigger,
                 {
                   "aria-label": "Rows per page",
@@ -441,31 +499,31 @@ function GenericTablePagination({
                     "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() })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)(SelectContent, { children: [
+                availablePageSizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: size.toString(), children: size }, size)),
+                showAllOption ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
               ] })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.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: [
+        children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
             startItem,
             "-",
             endItem,
             " / ",
             totalItems
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
               className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
@@ -475,7 +533,7 @@ function GenericTablePagination({
         ] })
       }
     ),
-    showPageControls && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    showPageControls && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         className: cn(
@@ -484,40 +542,40 @@ function GenericTablePagination({
           controlsContainerClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Button,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            PageNavigationControl,
             {
               variant: "outline",
               size: buttonSize,
-              "aria-label": "First page",
-              title: "First page",
+              visibilityClassName: "hidden sm:inline-flex",
+              label: "First page",
+              disabledHint: "Already on the 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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronsLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Button,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            PageNavigationControl,
             {
               variant: "outline",
               size: buttonSize,
-              "aria-label": "Previous page",
-              title: "Previous page",
+              label: "Previous page",
+              disabledHint: "Already on the first 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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
             }
           ),
-          getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Button,
             {
               variant: currentPage === page ? "default" : "outline",
@@ -532,11 +590,11 @@ function GenericTablePagination({
                 compact && page === currentPage && compactActiveButtonClass,
                 page === currentPage ? pageActiveButtonClassName : pageButtonClassName
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "relative z-10", children: page })
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative z-10", children: page })
             },
             `mobile-${page}`
           )),
-          getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Button,
             {
               variant: currentPage === page ? "default" : "outline",
@@ -550,46 +608,46 @@ function GenericTablePagination({
                 compact && page === currentPage && compactActiveButtonClass,
                 currentPage === page ? pageActiveButtonClassName : pageButtonClassName
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "relative z-10", children: page })
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative z-10", children: page })
             },
             `desktop-${page}`
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Button,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            PageNavigationControl,
             {
               variant: "outline",
               size: buttonSize,
-              "aria-label": "Next page",
-              title: "Next page",
+              label: "Next page",
+              disabledHint: "Already on the last 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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Button,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            PageNavigationControl,
             {
               variant: "outline",
               size: buttonSize,
-              "aria-label": "Last page",
-              title: "Last page",
+              visibilityClassName: "hidden sm:inline-flex",
+              label: "Last page",
+              disabledHint: "Already on the 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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronsRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
             }
           )
         ]
       }
     )
-  ] });
+  ] }) });
 }
 //# sourceMappingURL=pagination.cjs.map