@ai-matrx/design-system 0.19.3 → 0.19.5

package/dist/data-table/index.js

@@ -1819,7 +1819,7 @@ function PageNavigationControl({
       ...props,
       disabled,
       "aria-label": label,
-      className: cn(visibilityClassName, className, "[&_svg]:size-3.5")
+      className: cn(visibilityClassName, className, "[&_svg]:size-5")
     }
   );
   return /* @__PURE__ */ jsxs13(Tooltip, { children: [
@@ -1873,8 +1873,8 @@ function PaginationAction({
     }
   );
 }
-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";
+var PAGINATION_ACTION_CLASS = "h-11 w-11 min-h-11 min-w-11 rounded-md border border-border bg-card p-0 text-sm shadow-none hover:bg-accent disabled:opacity-40 [&_svg]:size-5";
+var PAGINATION_ACTIVE_CLASS = "border-primary bg-primary text-primary-foreground hover:bg-primary/90";
 function GenericTablePagination({
   totalItems,
   itemsPerPage,
@@ -1928,8 +1928,8 @@ function GenericTablePagination({
   const containerClass = cn(
     "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 ? "box-border h-11 gap-0 px-0 py-0" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
+    layoutType === "grid" ? progressive ? "grid grid-cols-[auto_minmax(0,1fr)_auto]" : "grid grid-cols-[auto_minmax(0,1fr)] sm:grid-cols-[auto_minmax(0,1fr)_auto]" : "flex flex-nowrap justify-between",
+    compact ? "box-border min-h-11 gap-0 px-0 py-0" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
     className,
     containerClassName
   );
@@ -1954,7 +1954,7 @@ function GenericTablePagination({
                   "aria-label": "Rows per page",
                   className: cn(
                     "focus:ring-0",
-                    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"
+                    compact ? "h-11 min-w-20 rounded-md border border-border bg-card px-3 text-sm hover:bg-accent [&_svg]:size-5" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
                   ),
                   children: /* @__PURE__ */ jsx20(SelectValue, { placeholder: itemsPerPage.toString() })
                 }
@@ -1973,7 +1973,7 @@ function GenericTablePagination({
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
         children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ jsxs13(Fragment, { children: [
-          /* @__PURE__ */ jsxs13("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
+          /* @__PURE__ */ jsxs13("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: [
             startItem,
             "-",
             endItem,
@@ -1983,7 +1983,7 @@ function GenericTablePagination({
           /* @__PURE__ */ jsx20(
             "span",
             {
-              className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
+              className: `hidden whitespace-nowrap ${compact ? "text-sm" : "text-sm"} min-w-0 truncate text-muted-foreground sm:inline`,
               children: formatLabel(startItem, endItem, totalItems)
             }
           )
@@ -1998,13 +1998,13 @@ function GenericTablePagination({
         disabledHint: "All rows shown",
         disabled: !progressive.hasMore,
         onClick: progressive.onShowMore,
-        children: /* @__PURE__ */ jsx20(ChevronRight, { className: "h-3.5 w-3.5 rotate-90" })
+        children: /* @__PURE__ */ jsx20(ChevronRight, { className: "h-5 w-5 rotate-90" })
       }
     ) : showPageControls && /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cn(
-          "flex min-w-0 items-center justify-end",
+          "col-span-2 flex min-w-0 items-center justify-end sm:col-span-1",
           compact ? "gap-0" : "gap-0.5 sm:gap-1",
           controlsContainerClassName
         ),
@@ -2019,7 +2019,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(1),
               disabled: isFirstPageDisabled,
-              children: /* @__PURE__ */ jsx20(ChevronsLeft, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx20(ChevronsLeft, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ jsx20(
@@ -2031,7 +2031,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage - 1),
               disabled: isFirstPageDisabled,
-              children: /* @__PURE__ */ jsx20(ChevronLeft, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx20(ChevronLeft, { className: "h-5 w-5" })
             }
           ),
           getPageNumbers(3).map((page) => /* @__PURE__ */ jsx20(
@@ -2074,7 +2074,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage + 1),
               disabled: isLastPageDisabled,
-              children: /* @__PURE__ */ jsx20(ChevronRight, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx20(ChevronRight, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ jsx20(
@@ -2087,7 +2087,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(totalPages),
               disabled: isLastPageDisabled,
-              children: /* @__PURE__ */ jsx20(ChevronsRight, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx20(ChevronsRight, { className: "h-5 w-5" })
             }
           )
         ]
@@ -7914,7 +7914,7 @@ function TableToolbarAction({
     return /* @__PURE__ */ jsx38(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children });
   }
   return /* @__PURE__ */ jsxs28(Tooltip, { children: [
-    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38("span", { className: "inline-flex", children: /* @__PURE__ */ jsx38(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-3.5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: isValidElement2(children) ? cloneElement2(children, { className: cn("h-3.5 w-3.5", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38("span", { className: "inline-flex", children: /* @__PURE__ */ jsx38(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: isValidElement2(children) ? cloneElement2(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
     /* @__PURE__ */ jsx38(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
@@ -9456,7 +9456,7 @@ function MatrxDataTableCore({
                       ),
                       children: [
                         /* @__PURE__ */ jsxs28("div", { className: "relative min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsx38(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                          /* @__PURE__ */ jsx38(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                           /* @__PURE__ */ jsx38(
                             Input,
                             {
@@ -9478,7 +9478,7 @@ function MatrxDataTableCore({
                                 "aria-label": "Clear search",
                                 className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                                 onClick: () => setSearchValue(""),
-                                children: /* @__PURE__ */ jsx38(X, { className: "h-3.5 w-3.5" })
+                                children: /* @__PURE__ */ jsx38(X, { className: "h-5 w-5" })
                               }
                             ) }),
                             /* @__PURE__ */ jsx38(TooltipContent, { children: "Clear search" })
@@ -9498,7 +9498,7 @@ function MatrxDataTableCore({
                                 searchMatchMode === "whole_words" ? "contains" : "whole_words"
                               ),
                               children: [
-                                /* @__PURE__ */ jsx38(WholeWord, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ jsx38(WholeWord, { className: "h-5 w-5" }),
                                 searchMatchMode === "whole_words" ? "Whole words" : "Contains"
                               ]
                             }
@@ -9520,7 +9520,7 @@ function MatrxDataTableCore({
                       }
                     ) : null,
                     toolbar?.anyOf ? /* @__PURE__ */ jsxs28("div", { className: "relative w-full max-w-xs", children: [
-                      /* @__PURE__ */ jsx38(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx38(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                       /* @__PURE__ */ jsx38(
                         Input,
                         {
@@ -9539,7 +9539,7 @@ function MatrxDataTableCore({
                             "aria-label": "Clear match-any search",
                             className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                             onClick: () => setAnyOfValue(""),
-                            children: /* @__PURE__ */ jsx38(X, { className: "h-3.5 w-3.5" })
+                            children: /* @__PURE__ */ jsx38(X, { className: "h-5 w-5" })
                           }
                         ) }),
                         /* @__PURE__ */ jsx38(TooltipContent, { children: "Clear match-any search" })
@@ -10201,7 +10201,7 @@ function MatrxDataTableCore({
                                                         type: "button",
                                                         variant: "ghost",
                                                         size: "icon",
-                                                        className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-3.5",
+                                                        className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-5",
                                                         "aria-label": opensWindowOnRowClick ? "Open in side panel" : "Open in window",
                                                         onClick: (e) => {
                                                           e.stopPropagation();
@@ -10211,7 +10211,7 @@ function MatrxDataTableCore({
                                                             openWindow(row);
                                                           }
                                                         },
-                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ jsx38(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx38(PanelRight, { className: "h-3.5 w-3.5" })
+                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ jsx38(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx38(PanelRight, { className: "h-5 w-5" })
                                                       }
                                                     ) }),
                                                     /* @__PURE__ */ jsx38(TooltipContent, { children: opensWindowOnRowClick ? "Open in side panel" : "Open in window" })
@@ -10329,14 +10329,14 @@ function MatrxDataTableCore({
                   "div",
                   {
                     "data-matrx-table-footer": true,
-                    className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border",
+                    className: "flex min-h-11 shrink-0 flex-wrap items-center gap-0 border-t border-border",
                     "aria-busy": isLoading || isFetching,
                     children: [
                       /* @__PURE__ */ jsxs28(
                         "div",
                         {
                           ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
-                          className: "flex w-full min-w-0 flex-none items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1",
+                          className: "flex w-full min-w-0 items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1 sm:text-sm",
                           children: [
                             isLoading ? /* @__PURE__ */ jsx38(
                               Loader2,
@@ -10346,8 +10346,8 @@ function MatrxDataTableCore({
                                 className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
                               }
                             ) : null,
-                            /* @__PURE__ */ jsxs28("div", { className: "min-w-0", children: [
-                              /* @__PURE__ */ jsx38("p", { className: "break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
+                            /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ jsx38("p", { className: "font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
                               appendQuery.pagination.sourceUntil ? /* @__PURE__ */ jsxs28("p", { children: [
                                 "Source fixed through",
                                 " ",
@@ -10355,8 +10355,8 @@ function MatrxDataTableCore({
                                 "."
                               ] }) : null,
                               !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ jsx38("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ jsx38("p", { children: "Local search and filters cover loaded rows." }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ jsx38("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null,
-                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ jsxs28("p", { role: "status", className: "break-words", children: [
+                              scrollPagination.error ? /* @__PURE__ */ jsx38("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
+                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ jsxs28("p", { role: "status", children: [
                                 appendScrollPolicy.reason,
                                 " Load more remains available."
                               ] }) : null
@@ -10374,7 +10374,7 @@ function MatrxDataTableCore({
                               SelectTrigger,
                               {
                                 "aria-label": "Rows per load",
-                                className: "h-8 w-20 shrink-0 text-xs sm:w-24",
+                                className: "h-11 min-w-20 shrink-0 rounded-md border border-border bg-card px-3 text-sm [&_svg]:size-5",
                                 disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
                                 children: /* @__PURE__ */ jsx38(SelectValue, {})
                               }
@@ -10388,6 +10388,7 @@ function MatrxDataTableCore({
                         {
                           type: "button",
                           variant: "outline",
+                          className: "h-11 shrink-0 px-3 text-sm",
                           onClick: appendQuery.pagination.loadAll.stop,
                           children: "Stop loading"
                         }
@@ -10396,16 +10397,17 @@ function MatrxDataTableCore({
                         {
                           type: "button",
                           variant: "outline",
+                          className: "h-11 shrink-0 px-3 text-sm",
                           onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
                           children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
                         }
-                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ jsxs28("div", { className: "flex flex-wrap gap-1", children: [
+                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ jsxs28("div", { className: "flex shrink-0 gap-0", children: [
                         /* @__PURE__ */ jsx38(
                           Button,
                           {
                             type: "button",
-                            size: "sm",
                             variant: "outline",
+                            className: "h-11 px-3 text-sm",
                             disabled: isLoading || isFetching,
                             onClick: () => void scrollPagination.requestNextPage(),
                             children: "Load more"
@@ -10415,14 +10417,14 @@ function MatrxDataTableCore({
                           Button,
                           {
                             type: "button",
-                            size: "sm",
                             variant: "ghost",
+                            className: "h-11 px-3 text-sm",
                             disabled: isLoading || isFetching,
                             onClick: appendQuery.pagination.loadAll.request,
                             children: "Load all"
                           }
                         ) : null
-                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ jsx38("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
+                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ jsx38("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
                     ]
                   }
                 ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ jsx38("div", { className: "shrink-0", children: /* @__PURE__ */ jsx38(
@@ -10494,7 +10496,7 @@ function MatrxDataTableCore({
                           className: "h-7 w-7",
                           "aria-label": "Open in window",
                           onClick: () => openWindow(selectedRow),
-                          children: /* @__PURE__ */ jsx38(PanelRight, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ jsx38(PanelRight, { className: "h-5 w-5" })
                         }
                       ) }),
                       /* @__PURE__ */ jsx38(TooltipContent, { children: "Open in window" })
@@ -10553,7 +10555,7 @@ function MatrxDataTableCore({
                             closeWindow();
                             openDetail(windowRow);
                           },
-                          children: /* @__PURE__ */ jsx38(PanelRightOpen, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ jsx38(PanelRightOpen, { className: "h-5 w-5" })
                         }
                       ) }),
                       /* @__PURE__ */ jsx38(TooltipContent, { children: "Open in side panel" })