@ai-matrx/design-system 0.18.21 → 0.19.0

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

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, f as ColumnFilterKind } from '../types-Dqcb7jXO.cjs';
+import { M as MatrxColumnDef, d as ColumnFilterKind } from '../types-Di6QT0P1.cjs';
 import 'react';
 import './copy-types.cjs';
 

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

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, f as ColumnFilterKind } from '../types-BuDKVpeF.js';
+import { M as MatrxColumnDef, d as ColumnFilterKind } from '../types-D1m14boM.js';
 import 'react';
 import './copy-types.js';
 

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

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

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

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

package/dist/data-table/pagination.cjs

@@ -186,7 +186,7 @@ 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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "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" }) });
@@ -386,8 +386,18 @@ var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-// src/data-table/pagination.tsx
+// src/data-table/host.tsx
+var import_react = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var HOST_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-host-context");
+var hostRegistry = globalThis;
+var HostContext = hostRegistry[HOST_SLOT] ??= (0, import_react.createContext)({});
+function useMatrxDataTableHost() {
+  return (0, import_react.useContext)(HostContext);
+}
+
+// src/data-table/pagination.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function PageNavigationControl({
   label,
   disabledHint,
@@ -396,17 +406,17 @@ function PageNavigationControl({
   className,
   ...props
 }) {
-  const button = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Button,
     {
       ...props,
       disabled,
       "aria-label": label,
-      className: cn(visibilityClassName, className)
+      className: cn(visibilityClassName, className, "[&_svg]:size-3.5")
     }
   );
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
         className: cn(visibilityClassName, "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"),
@@ -415,9 +425,49 @@ function PageNavigationControl({
         children: button
       }
     ) : button }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContent, { children: disabled ? disabledHint : label })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipContent, { children: disabled ? disabledHint : label })
   ] });
 }
+function PaginationAction({
+  HostAction,
+  active = false,
+  disabledHint,
+  visibilityClassName = "inline-flex",
+  fallbackClassName,
+  ...props
+}) {
+  if (HostAction) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: visibilityClassName, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      HostAction,
+      {
+        ...props,
+        active,
+        tooltip: props.disabled ? disabledHint : props.tooltip ?? props.ariaLabel
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    PageNavigationControl,
+    {
+      variant: "outline",
+      size: "icon",
+      visibilityClassName,
+      label: props.ariaLabel,
+      disabledHint,
+      disabled: props.disabled,
+      onClick: props.onClick,
+      className: cn(
+        PAGINATION_ACTION_CLASS,
+        active && PAGINATION_ACTIVE_CLASS,
+        fallbackClassName
+      ),
+      "aria-current": active ? "page" : void 0,
+      children: props.children
+    }
+  );
+}
+var PAGINATION_ACTION_CLASS = "relative isolate h-11 w-11 min-h-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 [&>*]:relative [&>*]:z-10";
+var PAGINATION_ACTIVE_CLASS = "text-primary-foreground before:border-primary before:bg-primary hover:before:bg-primary/90";
 function GenericTablePagination({
   totalItems,
   itemsPerPage,
@@ -443,8 +493,10 @@ function GenericTablePagination({
   layoutType = "grid",
   labelFormat,
   compact = false,
-  hideEntriesInfo = false
+  hideEntriesInfo = false,
+  progressive
 }) {
+  const host = useMatrxDataTableHost();
   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);
@@ -460,24 +512,22 @@ function GenericTablePagination({
   };
   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 startItem = totalItems === 0 ? 0 : progressive ? 1 : (currentPage - 1) * effectiveItemsPerPage + 1;
+  const endItem = Math.min(progressive?.shownCount ?? 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",
+    "w-full items-center",
+    !compact && "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",
+    compact ? "box-border h-11 gap-0 px-0 py-0" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
     className,
     containerClassName
   );
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-matrx-table-footer": true, className: containerClass, children: [
+    showItemsPerPageSelect && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: cn(
@@ -485,45 +535,45 @@ function GenericTablePagination({
           !compact && "sm:p-1",
           selectContainerClassName
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Select,
           {
             value: itemsPerPage.toString(),
             onValueChange: (value) => onItemsPerPageChange(parseInt(value)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.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"
+                    compact ? "relative isolate h-11 w-16 border-0 bg-transparent px-1 text-xs before:absolute before:inset-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 [&_svg]:h-3.5 [&_svg]:w-3.5" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectValue, { placeholder: itemsPerPage.toString() })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectValue, { placeholder: itemsPerPage.toString() })
                 }
               ),
-              /* @__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_runtime8.jsxs)(SelectContent, { children: [
+                availablePageSizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectItem, { value: size.toString(), children: size }, size)),
+                showAllOption ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
               ] })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
-        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: [
+        children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
             startItem,
             "-",
             endItem,
             " / ",
             totalItems
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "span",
             {
               className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
@@ -533,7 +583,17 @@ function GenericTablePagination({
         ] })
       }
     ),
-    showPageControls && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    progressive ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      PaginationAction,
+      {
+        HostAction: host.ToolbarAction,
+        ariaLabel: progressive.hasMore ? "Show more rows" : "All rows shown",
+        disabledHint: "All rows shown",
+        disabled: !progressive.hasMore,
+        onClick: progressive.onShowMore,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRight, { className: "h-3.5 w-3.5 rotate-90" })
+      }
+    ) : showPageControls && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn(
@@ -542,107 +602,85 @@ function GenericTablePagination({
           controlsContainerClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            PageNavigationControl,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              visibilityClassName: "hidden sm:inline-flex",
-              label: "First page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "First page",
               disabledHint: "Already on the first page",
+              visibilityClassName: "hidden sm:inline-flex",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(1),
               disabled: isFirstPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronsLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronsLeft, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            PageNavigationControl,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              label: "Previous page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "Previous page",
               disabledHint: "Already on the first page",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage - 1),
               disabled: isFirstPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronLeft, { className: "h-3.5 w-3.5" })
             }
           ),
-          getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Button,
+          getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            PaginationAction,
             {
-              variant: currentPage === page ? "default" : "outline",
-              size: buttonSize,
-              "aria-label": `Page ${page}`,
-              "aria-current": currentPage === page ? "page" : void 0,
-              onClick: () => onPageChange(page),
-              className: cn(
+              HostAction: host.ToolbarAction,
+              ariaLabel: `Page ${page}`,
+              active: currentPage === page,
+              disabledHint: `Already on page ${page}`,
+              visibilityClassName: 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
+                page === currentPage ? "inline-flex" : "hidden min-[360px]:inline-flex"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative z-10", children: page })
+              fallbackClassName: page === currentPage ? pageActiveButtonClassName : pageButtonClassName,
+              onClick: () => onPageChange(page),
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: page })
             },
             `mobile-${page}`
           )),
-          getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Button,
+          getPageNumbers().map((page) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            PaginationAction,
             {
-              variant: currentPage === page ? "default" : "outline",
-              size: buttonSize,
-              "aria-label": `Page ${page}`,
-              "aria-current": currentPage === page ? "page" : void 0,
+              HostAction: host.ToolbarAction,
+              ariaLabel: `Page ${page}`,
+              active: currentPage === page,
+              disabledHint: `Already on page ${page}`,
+              visibilityClassName: "hidden sm:inline-flex",
+              fallbackClassName: currentPage === page ? pageActiveButtonClassName : pageButtonClassName,
               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_runtime7.jsx)("span", { className: "relative z-10", children: page })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: page })
             },
             `desktop-${page}`
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            PageNavigationControl,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              label: "Next page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "Next page",
               disabledHint: "Already on the last page",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage + 1),
               disabled: isLastPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRight, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            PageNavigationControl,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              visibilityClassName: "hidden sm:inline-flex",
-              label: "Last page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "Last page",
               disabledHint: "Already on the last page",
+              visibilityClassName: "hidden sm:inline-flex",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(totalPages),
               disabled: isLastPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronsRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronsRight, { className: "h-3.5 w-3.5" })
             }
           )
         ]