@bizapps/ui 1.12.3 → 1.14.0

package/dist/main.cjs

@@ -430,7 +430,7 @@ var buttonVariants = classVarianceAuthority.cva(
         primary: "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
         secondary: "cursor-pointer bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
         cancel: "cursor-pointer bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
-        outline: "border border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
+        outline: "cursor-pointer border-[1.5px] border-muted-foreground/35 bg-transparent text-muted-foreground hover:border-primary/30 hover:bg-primary/10 hover:text-primary focus-visible:ring-primary/30",
         ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30 border-none",
         cancelGhost: "cursor-pointer bg-destructive/10 text-red-600 hover:bg-destructive/15 hover:text-red-600 focus-visible:ring-ring/30"
       },
@@ -7269,6 +7269,21 @@ function Checkbox({
     }
   );
 }
+
+// src/components/compounds/Pagination/table-pagination-labels.ts
+var DEFAULT_TABLE_PAGINATION_LABELS = {
+  navigation: "Table pagination",
+  range: (from, to, total) => `Showing ${from}\u2013${to} of ${total}`,
+  previous: "Previous",
+  next: "Next",
+  goToPreviousPage: "Go to previous page",
+  goToNextPage: "Go to next page",
+  rowsPerPage: "Rows per page",
+  selectedRows: (count) => `${count} row${count > 1 ? "s" : ""} selected`
+};
+function resolveTablePaginationLabels(labels) {
+  return { ...DEFAULT_TABLE_PAGINATION_LABELS, ...labels };
+}
 function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
@@ -7391,8 +7406,10 @@ function TablePaginationBase({
   totalRecords,
   rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE,
   onPageChange,
-  onPerPageChange
+  onPerPageChange,
+  labels: labelsProp
 }) {
+  const labels = resolveTablePaginationLabels(labelsProp);
   const rowsPerPageLabelId = react.useId();
   const pageItems = getPageItems(page, totalPages);
   const hasRecords = totalRecords !== void 0 && totalRecords > 0;
@@ -7410,30 +7427,23 @@ function TablePaginationBase({
     "nav",
     {
       role: "navigation",
-      "aria-label": "Table pagination",
+      "aria-label": labels.navigation,
       "data-slot": "table-pagination",
       className: "flex flex-wrap items-center justify-between gap-4 py-2",
       children: [
-        totalRecords !== void 0 && totalRecords > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", children: [
-          "Showing ",
-          from,
-          "\u2013",
-          to,
-          " of ",
-          totalRecords
-        ] }),
+        totalRecords !== void 0 && totalRecords > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.range(from, to, totalRecords) }),
         /* @__PURE__ */ jsxRuntime.jsxs("ul", { "data-slot": "pagination-content", className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
             {
               variant: "ghost",
               size: "sm",
-              "aria-label": "Go to previous page",
+              "aria-label": labels.goToPreviousPage,
               disabled: page <= 1,
               onClick: () => onPageChange(page - 1),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { "data-icon": "inline-start" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Previous" })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: labels.previous })
               ]
             }
           ) }),
@@ -7454,18 +7464,18 @@ function TablePaginationBase({
             {
               variant: "ghost",
               size: "sm",
-              "aria-label": "Go to next page",
+              "aria-label": labels.goToNextPage,
               disabled: page >= totalPages,
               onClick: () => onPageChange(page + 1),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Next" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: labels.next }),
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { "data-icon": "inline-end" })
               ]
             }
           ) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { id: rowsPerPageLabelId, className: "text-muted-foreground text-sm", children: "Rows per page" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { id: rowsPerPageLabelId, className: "text-muted-foreground text-sm", children: labels.rowsPerPage }),
           /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: String(perPage), onValueChange: (v) => onPerPageChange(Number(v)), children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-labelledby": rowsPerPageLabelId, className: "w-20", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: rowsPerPageOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(opt), children: opt }, opt)) })
@@ -8883,15 +8893,20 @@ function DataTableRowActions({
     }) })
   ] });
 }
-function DataTableFooter({ pagination, selectedCount, className }) {
+function DataTableFooter({ pagination, selectedCount, labels, className }) {
+  const mergedLabels = react.useMemo(
+    () => ({ ...pagination.labels, ...labels }),
+    [pagination.labels, labels]
+  );
+  const { selectedRows } = resolveTablePaginationLabels(mergedLabels);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-slot": "data-table-footer",
       className: cn("flex items-center justify-between border-t px-4 py-2", className),
       children: [
-        selectedCount != null && selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: `${selectedCount} row${selectedCount > 1 ? "s" : ""} selected` }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination }) })
+        selectedCount != null && selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: selectedRows(selectedCount) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination, labels: mergedLabels }) })
       ]
     }
   );
@@ -9989,7 +10004,7 @@ function ModuleCard({
   onTooltipOpenChange,
   onFlyoutClose,
   list,
-  query,
+  query: rawQuery,
   onQueryChange,
   onHeaderClick,
   onSelect
@@ -10021,6 +10036,8 @@ function ModuleCard({
     setToggle({ collapsed, open, accordion: toggle.collapsed === collapsed });
   }
   const accordion = toggle.accordion && !reduced;
+  const searchable = module.searchable !== false;
+  const query = searchable ? rawQuery : "";
   const items = filterItems(module.items, query);
   const isEmpty = module.items.length === 0;
   const emptyMessage = /* @__PURE__ */ jsxRuntime.jsx(
@@ -10210,7 +10227,7 @@ function ModuleCard({
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "floating-sidebar-module-body", style: { width: bodyWidth }, children: [
                   isEmpty && emptyMessage,
-                  !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                  !isEmpty && searchable && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       "data-slot": "floating-sidebar-search-bar",
@@ -10304,7 +10321,7 @@ function ModuleCard({
                 }
               ),
               isEmpty && emptyMessage,
-              !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+              !isEmpty && searchable && /* @__PURE__ */ jsxRuntime.jsx(
                 ModuleSearch,
                 {
                   moduleLabel: module.label,
@@ -10592,16 +10609,29 @@ function filterApps(apps, query) {
     (app) => `${app.label} ${app.description ?? ""}`.toLowerCase().includes(needle)
   );
 }
+var toneClasses = {
+  green: "bg-green-100 text-green-800",
+  yellow: "bg-yellow-200 text-yellow-800",
+  navy: "bg-main-blue-primary/10 text-main-blue-primary",
+  orange: "bg-orange-100 text-orange-800",
+  purple: "bg-purple-100 text-purple-600",
+  grey: "bg-light-200 text-main-grey",
+  // Remaining apps catalogue colours, with the catalogue's own tile and ink pairs.
+  // They have no DS scale, so they resolve to the Tailwind default palette.
+  sky: "bg-sky-100 text-sky-600",
+  rose: "bg-rose-100 text-rose-600",
+  teal: "bg-teal-100 text-teal-600",
+  indigo: "bg-indigo-100 text-indigo-600",
+  slate: "bg-slate-100 text-slate-500",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-600"
+};
+function getAppHubTone(app) {
+  if (app.locked || app.tone === void 0 || !Object.hasOwn(toneClasses, app.tone)) return "grey";
+  return app.tone;
+}
 var appHubIconVariants = classVarianceAuthority.cva("relative flex shrink-0 items-center justify-center", {
   variants: {
-    tone: {
-      green: "bg-green-100 text-green-800",
-      yellow: "bg-yellow-200 text-yellow-800",
-      navy: "bg-main-blue-primary/10 text-main-blue-primary",
-      orange: "bg-orange-100 text-orange-800",
-      purple: "bg-purple-100 text-purple-600",
-      grey: "bg-light-200 text-main-grey"
-    },
+    tone: toneClasses,
     size: {
       tile: "size-12 rounded-2xl [&_svg]:size-5",
       row: "size-9 rounded-xl [&_svg]:size-4.5",
@@ -10650,7 +10680,7 @@ function AppHubCounter({ count, className }) {
 function AppHubTile({ app, current = false }) {
   const { labels, appName } = useAppHubContext();
   const name = getAppAccessibleName(app, labels, appName);
-  const tone = app.tone ?? "grey";
+  const tone = getAppHubTone(app);
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
       AppHubLink,
@@ -10738,7 +10768,7 @@ function AppHubRow({
       {
         "aria-hidden": "true",
         className: appHubIconVariants({
-          tone: locked ? "grey" : app.tone ?? "grey",
+          tone: getAppHubTone(app),
           size: variant === "panel" ? "row" : "sheet"
         }),
         children: app.icon