@dloizides/ui-nav 1.1.1 → 1.3.0

package/dist/index.js

@@ -61,6 +61,79 @@ var navStyles = reactNative.StyleSheet.create({
   planBadge: { marginTop: 2, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, alignSelf: "flex-end" },
   planBadgeText: { fontSize: 11, fontWeight: "700" }
 });
+var navBarStyles = reactNative.StyleSheet.create({
+  // --- Horizontal top NavBar ---
+  container: {
+    borderBottomWidth: 1,
+    paddingHorizontal: 12
+  },
+  inner: {
+    minHeight: 56,
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    columnGap: 8,
+    rowGap: 4,
+    paddingVertical: 8
+  },
+  brand: { marginRight: 16 },
+  toggle: {
+    marginLeft: "auto",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 4,
+    // a11y: keep the hamburger a comfortable ≥44×44 touch target.
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toggleGlyph: { fontSize: 20, fontWeight: "700" },
+  links: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    columnGap: 4,
+    rowGap: 4
+  },
+  // Collapsed (below breakpoint): links drop onto their own full-width line,
+  // stacked vertically — mirrors the v1 `.gn-links` responsive behaviour.
+  linksStacked: {
+    width: "100%",
+    flexBasis: "100%",
+    flexDirection: "column",
+    alignItems: "stretch",
+    rowGap: 2,
+    marginTop: 8
+  },
+  link: {
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    // a11y: comfortable ≥44 tall touch target (rounded-pill hover/active affordance).
+    minHeight: 44,
+    justifyContent: "center"
+  },
+  linkStacked: { paddingVertical: 10 },
+  linkIcon: { marginRight: 6 },
+  linkText: { fontSize: 15, fontWeight: "600" },
+  right: {
+    marginLeft: "auto",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 8
+  },
+  rightStacked: {
+    width: "100%",
+    flexBasis: "100%",
+    marginTop: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 8
+  }
+});
 var expandableStyles = reactNative.StyleSheet.create({
   childItem: {
     borderRadius: 4,
@@ -84,6 +157,31 @@ var expandableStyles = reactNative.StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
+var IS_WEB = reactNative.Platform.OS === "web";
+var FOCUS_RING_WIDTH = 2;
+var FOCUS_RING_OFFSET = 2;
+var HOVER_TRANSITION_MS = 150;
+function focusRingStyle(focused, ringColor) {
+  if (!IS_WEB || !focused) return void 0;
+  const ring = {
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineStyle: "solid",
+    outlineColor: ringColor,
+    outlineOffset: FOCUS_RING_OFFSET
+  };
+  return ring;
+}
+function hoverTransitionStyle(reducedMotion) {
+  if (!IS_WEB) return void 0;
+  const transition = {
+    transitionProperty: "color, background-color",
+    transitionDuration: reducedMotion ? "0ms" : `${HOVER_TRANSITION_MS}ms`
+  };
+  return transition;
+}
+function ariaCurrentProps(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -95,6 +193,7 @@ var NavExpandableItem = ({
   depth = 0
 }) => {
   const [expanded, setExpanded] = react.useState(false);
+  const [focused, setFocused] = react.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
@@ -115,9 +214,18 @@ var NavExpandableItem = ({
         accessibilityHint: navigateHint(item.label),
         accessibilityLabel: item.label,
         accessibilityRole: "button",
-        style: [expandableStyles.childItem, paddingStyle, isActive ? activeItemStyle : void 0],
+        accessibilityState: { selected: isActive },
+        style: [
+          expandableStyles.childItem,
+          paddingStyle,
+          isActive ? activeItemStyle : void 0,
+          focusRingStyle(focused, primaryColor)
+        ],
         testID: item.testID ?? item.key,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
         onPress: () => onNavigate(item.route),
+        ...ariaCurrentProps(isActive),
         children: [
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -141,8 +249,10 @@ var NavExpandableItem = ({
         accessibilityLabel: item.label,
         accessibilityRole: "button",
         accessibilityState: { expanded },
-        style: [expandableStyles.header, headerPaddingStyle],
+        style: [expandableStyles.header, headerPaddingStyle, focusRingStyle(focused, primaryColor)],
         testID: item.testID ?? item.key,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
         onPress: toggle,
         children: [
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
@@ -226,7 +336,11 @@ var NAV_TEST_IDS = {
   /** small plan badge (free / pro / enterprise). */
   accountPlan: "topbar-account-plan",
   /** default testID for the rich header's upgrade action (overridable per-action). */
-  accountUpgrade: "topbar-account-upgrade"
+  accountUpgrade: "topbar-account-upgrade",
+  /** responsive hamburger toggle in the horizontal NavBar (shown below the breakpoint). */
+  navBarToggle: "navbar-toggle",
+  /** links container in the horizontal NavBar. */
+  navBarLinks: "navbar-links"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -238,6 +352,32 @@ var APP_SHELL_SUFFIX = {
   error: "-error",
   forbidden: "-forbidden"
 };
+var FocusableTouchable = ({
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = "button",
+  ringColor,
+  style,
+  testID,
+  children
+}) => {
+  const [focused, setFocused] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityHint,
+      accessibilityLabel,
+      accessibilityRole,
+      style: [style, focusRingStyle(focused, ringColor)],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children
+    }
+  );
+};
 var TEXT_ON_PRIMARY = "#ffffff";
 function isAccountState(account) {
   return "displayName" in account;
@@ -275,11 +415,11 @@ var Topbar = ({
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: left }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: language.hint,
               accessibilityLabel: language.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: navStyles.topbarRowItem,
               onPress: language.onPress,
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
@@ -292,11 +432,11 @@ var Topbar = ({
           ] }) : null,
           richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
             richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.TouchableOpacity,
+              FocusableTouchable,
               {
                 accessibilityHint: richAccount.displayName,
                 accessibilityLabel: richAccount.displayName,
-                accessibilityRole: "button",
+                ringColor: primaryColor,
                 testID: NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
                 children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
@@ -320,11 +460,11 @@ var Topbar = ({
             ) : null
           ] }) : null,
           legacyAccount ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: legacyAccount.hint,
               accessibilityLabel: legacyAccount.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: legacyAccount.testID,
               onPress: legacyAccount.onPress,
@@ -332,11 +472,11 @@ var Topbar = ({
             }
           ) : null,
           upgrade ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: upgrade.hint,
               accessibilityLabel: upgrade.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: upgrade.testID ?? NAV_TEST_IDS.accountUpgrade,
               onPress: upgrade.onPress,
@@ -344,12 +484,11 @@ var Topbar = ({
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
-              accessible: true,
               accessibilityHint: logout.hint,
               accessibilityLabel: logout.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: logout.testID,
               onPress: richAccount ? richAccount.onLogout : logout.onPress,
@@ -361,6 +500,175 @@ var Topbar = ({
     }
   );
 };
+var TEXT_ON_PRIMARY2 = "#ffffff";
+function ariaCurrentProps2(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
+var NavBarLink = ({
+  item,
+  isActive,
+  collapsed,
+  iconSize,
+  reducedMotion,
+  colors,
+  navigateHint,
+  onPress
+}) => {
+  const [hovered, setHovered] = react.useState(false);
+  const [focused, setFocused] = react.useState(false);
+  const isHovered = hovered && !isActive;
+  const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
+  const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: navigateHint(item.label),
+      accessibilityLabel: item.label,
+      accessibilityRole: "link",
+      accessibilityState: { selected: isActive },
+      style: [
+        navBarStyles.link,
+        collapsed ? navBarStyles.linkStacked : void 0,
+        pillStyle,
+        hoverTransitionStyle(reducedMotion),
+        focusRingStyle(focused, colors.ring)
+      ],
+      testID: item.testID ?? item.key,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false),
+      onPress: () => onPress(item.route),
+      ...ariaCurrentProps2(isActive),
+      children: [
+        typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, iconSize) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.linkText, { color: textColor }], children: item.label })
+      ]
+    }
+  );
+};
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function getReducedMotionQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
+  return window.matchMedia(REDUCED_MOTION_QUERY);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = react.useState(() => getReducedMotionQuery()?.matches ?? false);
+  react.useEffect(() => {
+    const mql = getReducedMotionQuery();
+    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
+    const onChange = () => setReduced(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener?.("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+var LINKS_REGION_ID = "navbar-links-region";
+var DEFAULT_COLLAPSE_BELOW = 760;
+var MENU_GLYPH = "\u2630";
+function ariaControlsProps(id) {
+  return { "aria-controls": id };
+}
+var NavBar = ({
+  items,
+  pathname,
+  onNavigate,
+  regionLabel,
+  navigateHint = (label) => label,
+  brand,
+  right,
+  menuLabel = "Menu",
+  menuHint = "",
+  renderMenuIcon,
+  collapseBelow = DEFAULT_COLLAPSE_BELOW,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  const { width } = reactNative.useWindowDimensions();
+  const reducedMotion = useReducedMotion();
+  const [open, setOpen] = react.useState(false);
+  const [toggleFocused, setToggleFocused] = react.useState(false);
+  const collapsed = width < collapseBelow;
+  const showLinks = !collapsed || open;
+  const toggleMenu = react.useCallback(() => setOpen((v) => !v), []);
+  const handlePress = react.useCallback(
+    (route) => {
+      setOpen(false);
+      onNavigate(route);
+    },
+    [onNavigate]
+  );
+  const linkColors = react.useMemo(
+    () => ({
+      rest: colors.textSecondary,
+      hoverText: colors.text,
+      hoverBg: colors.surfaceElevated,
+      activeBg: primaryColor,
+      ring: primaryColor
+    }),
+    [colors.textSecondary, colors.text, colors.surfaceElevated, primaryColor]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      accessibilityRole: "none",
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [
+        navBarStyles.container,
+        { backgroundColor: colors.surface, borderBottomColor: colors.border },
+        containerStyle
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navBarStyles.inner, children: [
+        brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: brand }) : null,
+        collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            accessibilityHint: menuHint,
+            accessibilityLabel: menuLabel,
+            accessibilityRole: "button",
+            accessibilityState: { expanded: open },
+            "aria-expanded": open,
+            style: [navBarStyles.toggle, focusRingStyle(toggleFocused, primaryColor)],
+            testID: NAV_TEST_IDS.navBarToggle,
+            onBlur: () => setToggleFocused(false),
+            onFocus: () => setToggleFocused(true),
+            onPress: toggleMenu,
+            ...ariaControlsProps(LINKS_REGION_ID),
+            children: typeof renderMenuIcon === "function" ? renderMenuIcon(colors.text, open) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.toggleGlyph, { color: colors.text }], children: MENU_GLYPH })
+          }
+        ) : null,
+        showLinks ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            nativeID: LINKS_REGION_ID,
+            style: collapsed ? navBarStyles.linksStacked : navBarStyles.links,
+            testID: NAV_TEST_IDS.navBarLinks,
+            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              NavBarLink,
+              {
+                collapsed,
+                colors: linkColors,
+                iconSize: NAV_ICON_SIZE,
+                isActive: isRouteActive(pathname, item.route),
+                item,
+                navigateHint,
+                reducedMotion,
+                onPress: handlePress
+              },
+              item.key
+            ))
+          }
+        ) : null,
+        showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
+      ] })
+    }
+  );
+};
 function resolveContentMaxWidth(width, viewport) {
   if (width === "full") return "full";
   const wideMinViewport = width.wideMinViewport ?? Number.POSITIVE_INFINITY;
@@ -485,6 +793,7 @@ exports.BASE_INDENT = BASE_INDENT;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.NAV_ICON_SIZE = NAV_ICON_SIZE;
 exports.NAV_TEST_IDS = NAV_TEST_IDS;
+exports.NavBar = NavBar;
 exports.NavExpandableItem = NavExpandableItem;
 exports.Sidebar = Sidebar;
 exports.Topbar = Topbar;