@bizapps/ui 1.12.3 → 1.13.0

package/dist/main.d.cts

@@ -2526,7 +2526,7 @@ interface FloatingSidebarProps extends Omit<ComponentProps<'nav'>, 'children'> {
  */
 declare function FloatingSidebar({ modules, resolveIcon, renderLink, open: openProp, defaultOpen, onOpenChange, side, width, collapsedWidth, type, openModuleIds: openModulesProp, defaultOpenModuleIds, onOpenModulesChange, hideEmptyModules, activeItemId: activeItemProp, defaultActiveItemId, onItemSelect, favoriteIds: favoritesProp, defaultFavoriteIds, onFavoritesChange, showFavorites, loading, emptyState, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, shortcut, labels: labelsProp, className, ref, style, onPointerDownCapture, onFocusCapture, ...navProps }: FloatingSidebarProps): react.JSX.Element;
 
-type AppHubTone = 'green' | 'yellow' | 'navy' | 'orange' | 'purple' | 'grey';
+type AppHubTone = 'green' | 'yellow' | 'navy' | 'orange' | 'purple' | 'grey' | 'sky' | 'rose' | 'teal' | 'indigo' | 'slate' | 'fuchsia';
 interface AppHubApp {
     /** Unique id; used as the React key and matched against `currentAppId`. */
     id: string;
@@ -2538,7 +2538,7 @@ interface AppHubApp {
     description?: string;
     /** Group heading. Ungrouped apps form a first, heading-less section. */
     group?: string;
-    /** Icon tone. Defaults to `'grey'`; locked apps always use grey. */
+    /** Icon tone. Defaults to `'grey'`; locked apps and unknown values always use grey. */
     tone?: AppHubTone;
     /** Shows the app in the rail. Defaults to `false`; keep it to 6 or fewer. */
     inRail?: boolean;

package/dist/main.d.ts

@@ -2526,7 +2526,7 @@ interface FloatingSidebarProps extends Omit<ComponentProps<'nav'>, 'children'> {
  */
 declare function FloatingSidebar({ modules, resolveIcon, renderLink, open: openProp, defaultOpen, onOpenChange, side, width, collapsedWidth, type, openModuleIds: openModulesProp, defaultOpenModuleIds, onOpenModulesChange, hideEmptyModules, activeItemId: activeItemProp, defaultActiveItemId, onItemSelect, favoriteIds: favoritesProp, defaultFavoriteIds, onFavoritesChange, showFavorites, loading, emptyState, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, shortcut, labels: labelsProp, className, ref, style, onPointerDownCapture, onFocusCapture, ...navProps }: FloatingSidebarProps): react.JSX.Element;
 
-type AppHubTone = 'green' | 'yellow' | 'navy' | 'orange' | 'purple' | 'grey';
+type AppHubTone = 'green' | 'yellow' | 'navy' | 'orange' | 'purple' | 'grey' | 'sky' | 'rose' | 'teal' | 'indigo' | 'slate' | 'fuchsia';
 interface AppHubApp {
     /** Unique id; used as the React key and matched against `currentAppId`. */
     id: string;
@@ -2538,7 +2538,7 @@ interface AppHubApp {
     description?: string;
     /** Group heading. Ungrouped apps form a first, heading-less section. */
     group?: string;
-    /** Icon tone. Defaults to `'grey'`; locked apps always use grey. */
+    /** Icon tone. Defaults to `'grey'`; locked apps and unknown values always use grey. */
     tone?: AppHubTone;
     /** Shows the app in the rail. Defaults to `false`; keep it to 6 or fewer. */
     inRail?: boolean;

package/dist/main.js

@@ -10566,16 +10566,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 = 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",
@@ -10624,7 +10637,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__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxs(
       AppHubLink,
@@ -10712,7 +10725,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