@hanzo/ui 8.0.8 → 8.0.11

package/dist/{chunk-HSPMQQVJ.cjs → chunk-M2ILMK44.cjs}

@@ -969,6 +969,44 @@ function AppHeader({
     ] })
   ] });
 }
+function monogram(name) {
+  const words = name.trim().split(/[\s._/-]+/).filter(Boolean);
+  const letters = words.slice(0, 2).map((w) => w[0] ?? "").join("");
+  return (letters || name.trim().slice(0, 2)).toUpperCase();
+}
+function OrgMark({ org, size = 22, maxW }) {
+  if (org.logo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: org.logo,
+        alt: "",
+        style: {
+          height: size,
+          width: maxW ? "auto" : size,
+          maxWidth: maxW ?? size,
+          objectFit: "contain",
+          display: "block",
+          borderRadius: 6,
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.YStack,
+    {
+      width: size,
+      height: size,
+      rounded: "$3",
+      bg: "$color4",
+      items: "center",
+      justify: "center",
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color12", children: monogram(org.displayName || org.name) })
+    }
+  );
+}
 
 // src/product/scope.ts
 function browserStorage() {
@@ -1038,14 +1076,7 @@ function filterOrgs(orgs, query) {
   );
 }
 var titleCase = (s) => s ? s[0].toUpperCase() + s.slice(1) : s;
-var initialsOf = (o) => (o.displayName || o.name).split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
-function OrgAvatar({ org, size = 22 }) {
-  if (org.logo) {
-    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: org.logo, alt: "", style: { height: size, width: size, objectFit: "contain", display: "block", borderRadius: 6 } });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { width: size, height: size, rounded: "$3", bg: "$color4", items: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: "$1", fontWeight: "800", color: "$color12", children: initialsOf(org) }) });
-}
-function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }) {
+function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picker = false }) {
   const currentId = scope.currentOrg();
   const [open, setOpen] = react.useState(false);
   const [query, setQuery] = react.useState("");
@@ -1105,10 +1136,11 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }) {
     if (orgs) return filterOrgs(rows, query);
     return [{ name: currentId, displayName: titleCase(currentId) }];
   }, [orgs, rows, query, currentId]);
-  const current = react.useMemo(
-    () => rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) },
-    [rows, currentId]
-  );
+  const current = react.useMemo(() => {
+    if (given && given.name === currentId) return given;
+    return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
+  }, [given, rows, currentId]);
+  const currentLabel = current.displayName || titleCase(current.name);
   const select = react.useCallback(
     (org) => {
       setOpen(false);
@@ -1130,7 +1162,11 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }) {
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(gui.Popover, { open, onOpenChange: setOpen, placement: "bottom-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsxRuntime.jsx(OrgAvatar, { org: current, size: 18 }), iconAfter: /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ChevronsUpDown, { size: 13 }), children: current.displayName || titleCase(current.name) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} \xB7 switch organization`, children: /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OrgMark, { org: current, size: 30 }),
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ChevronsUpDown, { size: 15, color: "$color9" })
+    ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { gap: "$2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1201,7 +1237,7 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }) {
                 bg: org.name === currentId ? "$color4" : "transparent",
                 hoverStyle: { bg: "$color5" },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(OrgAvatar, { org }),
+                  /* @__PURE__ */ jsxRuntime.jsx(OrgMark, { org }),
                   /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }),
                   org.name === currentId ? /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.Check, { size: 15 }) : null
                 ]
@@ -2032,6 +2068,7 @@ exports.MenuPanel = MenuPanel;
 exports.MenuSeparatorView = MenuSeparatorView;
 exports.MetricCard = MetricCard;
 exports.MiniBars = MiniBars;
+exports.OrgMark = OrgMark;
 exports.OrgSwitcher = OrgSwitcher;
 exports.PageHeader = PageHeader;
 exports.Panel = Panel;
@@ -2054,6 +2091,7 @@ exports.colorForIndex = colorForIndex;
 exports.filterOptions = filterOptions;
 exports.filterOrgs = filterOrgs;
 exports.isKnownOption = isKnownOption;
+exports.monogram = monogram;
 exports.orgScope = orgScope;
 exports.otherSurfaces = otherSurfaces;
 exports.providerInitials = providerInitials;
@@ -2062,5 +2100,5 @@ exports.rowShift = rowShift;
 exports.targetIndex = targetIndex;
 exports.useToast = useToast;
 exports.utilColor = utilColor;
-//# sourceMappingURL=chunk-HSPMQQVJ.cjs.map
-//# sourceMappingURL=chunk-HSPMQQVJ.cjs.map
+//# sourceMappingURL=chunk-M2ILMK44.cjs.map
+//# sourceMappingURL=chunk-M2ILMK44.cjs.map