@dloizides/ui-nav 1.32.0 → 1.34.0

package/dist/index.d.mts

@@ -1023,8 +1023,10 @@ interface DarkModeControlProps {
     testID?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
+    /** Show the text label beside the icon; an option without an icon always shows it. */
+    showLabel?: boolean;
 }
-declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, }: DarkModeControlProps) => React.ReactElement | null;
+declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, showLabel, }: DarkModeControlProps) => React.ReactElement | null;
 
 /**
  * NavBarLink — a SINGLE horizontal `NavBar` link, extracted so each link owns its

package/dist/index.d.ts

@@ -1023,8 +1023,10 @@ interface DarkModeControlProps {
     testID?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
+    /** Show the text label beside the icon; an option without an icon always shows it. */
+    showLabel?: boolean;
 }
-declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, }: DarkModeControlProps) => React.ReactElement | null;
+declare const DarkModeControl: ({ value, options, onChange, regionLabel, variant, testID, containerStyle, showLabel, }: DarkModeControlProps) => React.ReactElement | null;
 
 /**
  * NavBarLink — a SINGLE horizontal `NavBar` link, extracted so each link owns its

package/dist/index.js

@@ -952,6 +952,8 @@ function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
 var TEXT_ON_PRIMARY = "#ffffff";
 var ON_BRAND_SCALE = "onBrand";
 var USER_BLOCK_COMPACT = { marginHorizontal: 4 };
+var CONTAINER_STACKED = { flexWrap: "wrap" };
+var USER_ROW_STACKED = { flexBasis: "100%", alignItems: "flex-end", paddingBottom: 8 };
 var MAIN_STEP = "500";
 var WRAP_ANYWHERE = reactNative.Platform.OS === "web" ? { overflowWrap: "anywhere" } : null;
 function isAccountState(account) {
@@ -986,16 +988,58 @@ var Topbar = ({
   const primaryColor = theme.palette.primary["500"];
   const onPrimaryInk = onBrandInk(theme.palette);
   const { width: viewportWidth } = reactNative.useWindowDimensions();
-  const userBlockStyle = [navStyles.userBlock, viewportWidth < RAIL_FULL_BREAKPOINT ? USER_BLOCK_COMPACT : null];
+  const stacked = viewportWidth < uiLayout.HEADER_STACK_BREAKPOINT;
+  const userBlockStyle = [
+    navStyles.userBlock,
+    viewportWidth < RAIL_FULL_BREAKPOINT ? USER_BLOCK_COMPACT : null,
+    stacked ? USER_ROW_STACKED : null
+  ];
   const richAccount = account !== void 0 && isAccountState(account) ? account : void 0;
   const legacyAccount = account !== void 0 && !isAccountState(account) ? account : void 0;
   const upgrade = richAccount?.upgrade;
+  const identityBlocks = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { accessible: true, accessibilityLabel: `${user.name}, ${user.email}`, style: userBlockStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: user.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, WRAP_ANYWHERE, { color: colors.textSecondary }], children: user.email })
+    ] }) : null,
+    richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: userBlockStyle, children: [
+      richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
+        FocusableTouchable,
+        {
+          accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
+          accessibilityLabel: richAccount.displayName,
+          ringColor: primaryColor,
+          style: navStyles.accountNameBtn,
+          testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
+          onPress: richAccount.onAccount,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
+      richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: [navStyles.accountTenant, { color: colors.textSecondary }],
+          testID: NAV_TEST_IDS.accountTenant,
+          children: richAccount.tenantName
+        }
+      ) : null,
+      richAccount.plan ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
+          testID: NAV_TEST_IDS.accountPlan,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.planBadgeText, { color: planBadgeInk(theme, richAccount.plan.tone) }], children: richAccount.plan.label })
+        }
+      ) : null
+    ] }) : null
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
       style: [
         navStyles.topbarContainer,
         { borderBottomColor: colors.border, backgroundColor: colors.background },
+        stacked ? CONTAINER_STACKED : null,
         containerStyle
       ],
       children: [
@@ -1015,40 +1059,7 @@ var Topbar = ({
             }
           ) : null,
           renderTextSlot(notificationSlot, { color: colors.text }),
-          user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { accessible: true, accessibilityLabel: `${user.name}, ${user.email}`, style: userBlockStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: user.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, WRAP_ANYWHERE, { color: colors.textSecondary }], children: user.email })
-          ] }) : null,
-          richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: userBlockStyle, children: [
-            richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
-              FocusableTouchable,
-              {
-                accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
-                accessibilityLabel: richAccount.displayName,
-                ringColor: primaryColor,
-                style: navStyles.accountNameBtn,
-                testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
-                onPress: richAccount.onAccount,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
-            richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Text,
-              {
-                style: [navStyles.accountTenant, { color: colors.textSecondary }],
-                testID: NAV_TEST_IDS.accountTenant,
-                children: richAccount.tenantName
-              }
-            ) : null,
-            richAccount.plan ? /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.View,
-              {
-                style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
-                testID: NAV_TEST_IDS.accountPlan,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.planBadgeText, { color: planBadgeInk(theme, richAccount.plan.tone) }], children: richAccount.plan.label })
-              }
-            ) : null
-          ] }) : null,
+          stacked ? null : identityBlocks,
           legacyAccount ? /* @__PURE__ */ jsxRuntime.jsx(
             FocusableTouchable,
             {
@@ -1085,7 +1096,8 @@ var Topbar = ({
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: logout.label })
             }
           )
-        ] })
+        ] }),
+        stacked ? identityBlocks : null
       ]
     }
   );
@@ -2254,7 +2266,8 @@ var DarkModeControl = ({
   regionLabel,
   variant = "segmented",
   testID,
-  containerStyle
+  containerStyle,
+  showLabel = false
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
@@ -2268,6 +2281,7 @@ var DarkModeControl = ({
     if (next !== void 0) onChange(next.value);
   }, [options, currentIndex, onChange]);
   if (options.length === 0 || current === void 0) return null;
+  const labelVisible = (option) => showLabel || typeof option.renderIcon !== "function";
   if (variant === "cycle") {
     const iconColor = colors.text;
     return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { "aria-label": regionLabel, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2281,7 +2295,7 @@ var DarkModeControl = ({
         onPress: advance,
         children: [
           typeof current.renderIcon === "function" ? current.renderIcon(iconColor, DARK_MODE_ICON_SIZE) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.cycleText, { color: colors.text }], children: current.label })
+          labelVisible(current) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.cycleText, { color: colors.text }], children: current.label }) : null
         ]
       }
     ) });
@@ -2306,7 +2320,7 @@ var DarkModeControl = ({
             onPress: () => onChange(option.value),
             children: [
               typeof option.renderIcon === "function" ? option.renderIcon(textColor, DARK_MODE_ICON_SIZE) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.segmentText, { color: textColor }], children: option.label })
+              labelVisible(option) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [darkModeStyles.segmentText, { color: textColor }], children: option.label }) : null
             ]
           },
           option.value