@hanzo/ui 8.0.8 → 8.0.11

package/dist/{chunk-GDGVXU7W.js → chunk-YSURJUOA.js}

@@ -968,6 +968,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__ */ 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__ */ jsx(
+    YStack,
+    {
+      width: size,
+      height: size,
+      rounded: "$3",
+      bg: "$color4",
+      items: "center",
+      justify: "center",
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsx(Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color12", children: monogram(org.displayName || org.name) })
+    }
+  );
+}
 
 // src/product/scope.ts
 function browserStorage() {
@@ -1037,14 +1075,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__ */ jsx("img", { src: org.logo, alt: "", style: { height: size, width: size, objectFit: "contain", display: "block", borderRadius: 6 } });
-  }
-  return /* @__PURE__ */ jsx(YStack, { width: size, height: size, rounded: "$3", bg: "$color4", items: "center", justify: "center", children: /* @__PURE__ */ jsx(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] = useState(false);
   const [query, setQuery] = useState("");
@@ -1104,10 +1135,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 = useMemo(
-    () => rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) },
-    [rows, currentId]
-  );
+  const current = 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 = useCallback(
     (org) => {
       setOpen(false);
@@ -1129,7 +1161,11 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }) {
     }
   };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(OrgAvatar, { org: current, size: 18 }), iconAfter: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 13 }), children: current.displayName || titleCase(current.name) }) }),
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} \xB7 switch organization`, children: /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [
+      /* @__PURE__ */ jsx(OrgMark, { org: current, size: 30 }),
+      /* @__PURE__ */ jsx(Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }),
+      /* @__PURE__ */ jsx(ChevronsUpDown, { size: 15, color: "$color9" })
+    ] }) }) }),
     /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
       /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }),
       /* @__PURE__ */ jsx(
@@ -1200,7 +1236,7 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }) {
                 bg: org.name === currentId ? "$color4" : "transparent",
                 hoverStyle: { bg: "$color5" },
                 children: [
-                  /* @__PURE__ */ jsx(OrgAvatar, { org }),
+                  /* @__PURE__ */ jsx(OrgMark, { org }),
                   /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }),
                   org.name === currentId ? /* @__PURE__ */ jsx(Check, { size: 15 }) : null
                 ]
@@ -1994,6 +2030,6 @@ function useToast() {
   return ctx;
 }
 
-export { AppHeader, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, ContextMenu, DataTable, Donut, Donut2, DropdownMenu, EmptyState, FadeIn, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, FloatingMenu, GenericLogo, HanzoMark, HintButton, LG, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, MiniBars, OrgSwitcher, PageHeader, Panel, PortalTheme, PrimaryButton, ProductIcon, ProviderLogo, Reorder, SERIES, SURFACES, SelectMenu, SlideOver, Sparkline, Sparkline2, StatusTag, ToastProvider, UtilBar, asColor, colorForIndex, filterOptions, filterOrgs, isKnownOption, orgScope, otherSurfaces, providerInitials, renderMenuItems, rowShift, targetIndex, useToast, utilColor };
-//# sourceMappingURL=chunk-GDGVXU7W.js.map
-//# sourceMappingURL=chunk-GDGVXU7W.js.map
+export { AppHeader, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, ContextMenu, DataTable, Donut, Donut2, DropdownMenu, EmptyState, FadeIn, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, FloatingMenu, GenericLogo, HanzoMark, HintButton, LG, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, MiniBars, OrgMark, OrgSwitcher, PageHeader, Panel, PortalTheme, PrimaryButton, ProductIcon, ProviderLogo, Reorder, SERIES, SURFACES, SelectMenu, SlideOver, Sparkline, Sparkline2, StatusTag, ToastProvider, UtilBar, asColor, colorForIndex, filterOptions, filterOrgs, isKnownOption, monogram, orgScope, otherSurfaces, providerInitials, renderMenuItems, rowShift, targetIndex, useToast, utilColor };
+//# sourceMappingURL=chunk-YSURJUOA.js.map
+//# sourceMappingURL=chunk-YSURJUOA.js.map