@ai-matrx/design-system 0.19.2 → 0.19.4

package/dist/data-table/index.cjs

@@ -1855,7 +1855,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__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
@@ -1909,8 +1909,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,
@@ -1964,8 +1964,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
   );
@@ -1990,7 +1990,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__ */ (0, import_jsx_runtime20.jsx)(SelectValue, { placeholder: itemsPerPage.toString() })
                 }
@@ -2009,7 +2009,7 @@ function GenericTablePagination({
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
         children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "truncate text-[10px] tabular-nums text-muted-foreground sm:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: [
             startItem,
             "-",
             endItem,
@@ -2019,7 +2019,7 @@ function GenericTablePagination({
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "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)
             }
           )
@@ -2034,13 +2034,13 @@ function GenericTablePagination({
         disabledHint: "All rows shown",
         disabled: !progressive.hasMore,
         onClick: progressive.onShowMore,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-3.5 w-3.5 rotate-90" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-5 w-5 rotate-90" })
       }
     ) : showPageControls && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "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
         ),
@@ -2055,7 +2055,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(1),
               disabled: isFirstPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsLeft, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsLeft, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2067,7 +2067,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage - 1),
               disabled: isFirstPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronLeft, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronLeft, { className: "h-5 w-5" })
             }
           ),
           getPageNumbers(3).map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2110,7 +2110,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage + 1),
               disabled: isLastPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2123,7 +2123,7 @@ function GenericTablePagination({
               fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(totalPages),
               disabled: isLastPageDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsRight, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronsRight, { className: "h-5 w-5" })
             }
           )
         ]
@@ -2222,6 +2222,8 @@ function IconContent({
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       children
     }
   );
@@ -7896,7 +7898,7 @@ function TableToolbarAction({
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(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: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-3.5 w-3.5", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(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: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
@@ -9438,7 +9440,7 @@ function MatrxDataTableCore({
                       ),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Input,
                             {
@@ -9460,7 +9462,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__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-5 w-5" })
                               }
                             ) }),
                             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Clear search" })
@@ -9480,7 +9482,7 @@ function MatrxDataTableCore({
                                 searchMatchMode === "whole_words" ? "contains" : "whole_words"
                               ),
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WholeWord, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WholeWord, { className: "h-5 w-5" }),
                                 searchMatchMode === "whole_words" ? "Whole words" : "Contains"
                               ]
                             }
@@ -9502,7 +9504,7 @@ function MatrxDataTableCore({
                       }
                     ) : null,
                     toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative w-full max-w-xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         Input,
                         {
@@ -9521,7 +9523,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__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-5 w-5" })
                           }
                         ) }),
                         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Clear match-any search" })
@@ -10183,7 +10185,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();
@@ -10193,7 +10195,7 @@ function MatrxDataTableCore({
                                                             openWindow(row);
                                                           }
                                                         },
-                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
+                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-5 w-5" })
                                                       }
                                                     ) }),
                                                     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: opensWindowOnRowClick ? "Open in side panel" : "Open in window" })
@@ -10311,14 +10313,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__ */ (0, import_jsx_runtime38.jsxs)(
                         "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__ */ (0, import_jsx_runtime38.jsx)(
                               Loader2,
@@ -10328,17 +10330,17 @@ function MatrxDataTableCore({
                                 className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
                               }
                             ) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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()}`}` }),
-                              appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "truncate 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__ */ (0, import_jsx_runtime38.jsxs)("p", { className: "hidden truncate sm:block", children: [
                                 "Source fixed through",
                                 " ",
                                 new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
                                 "."
                               ] }) : null,
-                              !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "Local search and filters cover loaded rows." }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null,
-                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { role: "status", className: "break-words", children: [
+                              !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "hidden truncate sm:block", children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "hidden truncate sm:block", children: "Local search and filters cover loaded rows." }) : null,
+                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "truncate text-destructive", children: scrollPagination.error.message }) : null,
+                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { role: "status", className: "truncate", children: [
                                 appendScrollPolicy.reason,
                                 " Load more remains available."
                               ] }) : null
@@ -10356,7 +10358,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__ */ (0, import_jsx_runtime38.jsx)(SelectValue, {})
                               }
@@ -10370,6 +10372,7 @@ function MatrxDataTableCore({
                         {
                           type: "button",
                           variant: "outline",
+                          className: "h-11 shrink-0 px-3 text-sm",
                           onClick: appendQuery.pagination.loadAll.stop,
                           children: "Stop loading"
                         }
@@ -10378,16 +10381,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__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex shrink-0 gap-0", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                           Button,
                           {
                             type: "button",
-                            size: "sm",
                             variant: "outline",
+                            className: "h-11 px-3 text-sm",
                             disabled: isLoading || isFetching,
                             onClick: () => void scrollPagination.requestNextPage(),
                             children: "Load more"
@@ -10397,14 +10401,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__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
+                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "shrink-0 truncate px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
                     ]
                   }
                 ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -10476,7 +10480,7 @@ function MatrxDataTableCore({
                           className: "h-7 w-7",
                           "aria-label": "Open in window",
                           onClick: () => openWindow(selectedRow),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { className: "h-5 w-5" })
                         }
                       ) }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Open in window" })
@@ -10535,7 +10539,7 @@ function MatrxDataTableCore({
                             closeWindow();
                             openDetail(windowRow);
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRightOpen, { className: "h-5 w-5" })
                         }
                       ) }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Open in side panel" })