@dloizides/ui-nav 1.20.0 → 1.22.0

package/dist/index.mjs

@@ -1,152 +1,13 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { Platform, StyleSheet, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator } from 'react-native';
+import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse } from '@dloizides/ui-motion';
-import { ModalDropdown } from '@dloizides/ui-layout';
+import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
-var IS_WEB = Platform.OS === "web";
-var FOCUS_RING_WIDTH = 2;
-var FOCUS_RING_OFFSET = 2;
-var HOVER_TRANSITION_MS = 150;
-var TINT_TRANSITION_MS = 160;
-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 webTransition(properties, durationMs, reducedMotion) {
-  if (!IS_WEB) return void 0;
-  const transition = {
-    transitionProperty: properties,
-    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
-  };
-  return transition;
-}
-function hoverTransitionStyle(reducedMotion) {
-  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
-}
-function tintTransitionStyle(reducedMotion) {
-  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
-}
-function rotateTransitionStyle(reducedMotion) {
-  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
-}
-var MIN_TARGET = 36;
-var styles = StyleSheet.create({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    columnGap: 8,
-    paddingHorizontal: 12,
-    minHeight: MIN_TARGET,
-    borderWidth: 1,
-    borderRadius: 8
-  },
-  label: { fontSize: 14 },
-  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
-  badgeText: { fontSize: 11, fontWeight: "700" }
-});
-var CommandPaletteTrigger = ({
-  label,
-  hint,
-  shortcut,
-  onPress,
-  testID
-}) => {
-  const { theme } = useUi();
-  const colors = theme.colors;
-  const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React.useState(false);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityHint: hint,
-      accessibilityLabel: label,
-      accessibilityRole: "button",
-      style: [
-        styles.trigger,
-        { backgroundColor: colors.surface, borderColor: colors.border },
-        focusRingStyle(focused, primary)
-      ],
-      testID,
-      onBlur: () => setFocused(false),
-      onFocus: () => setFocused(true),
-      onPress,
-      children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label }),
-        /* @__PURE__ */ jsx(View, { style: [styles.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: colors.textSecondary }], children: shortcut }) })
-      ]
-    }
-  );
-};
-
-// src/sidebarFilter.ts
-function searchTokens(query) {
-  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
-}
-function labelMatches(item, tokens) {
-  const label = item.label.toLowerCase();
-  return tokens.every((token) => label.includes(token));
-}
-function filterNavItems(items, query) {
-  const tokens = searchTokens(query);
-  if (tokens.length === 0) return [...items];
-  return filterByTokens(items, tokens);
-}
-function filterByTokens(items, tokens) {
-  const kept = [];
-  for (const item of items) {
-    const selfMatch = labelMatches(item, tokens);
-    const children = item.children ?? [];
-    if (selfMatch) {
-      kept.push(item);
-      continue;
-    }
-    if (children.length === 0) continue;
-    const prunedChildren = filterByTokens(children, tokens);
-    if (prunedChildren.length > 0) kept.push({ ...item, children: prunedChildren });
-  }
-  return kept;
-}
-function isFilterActive(query) {
-  return searchTokens(query).length > 0;
-}
-
-// src/isRouteActive.ts
-function isRouteActive(pathname, route, exact = false) {
-  if (exact) return pathname === route;
-  if (route === "/") return pathname === "/";
-  return pathname === route || pathname.startsWith(`${route}/`);
-}
-function leafRoutes(items) {
-  return items.flatMap((item) => {
-    const children = item.children ?? [];
-    const isGroup = children.length > 0;
-    return isGroup ? leafRoutes(children) : [{ route: item.route, exact: item.exact === true }];
-  });
-}
-function resolveActiveRoute(items, pathname) {
-  let winner;
-  let winnerLength = -1;
-  for (const leaf of leafRoutes(items)) {
-    const matches = isRouteActive(pathname, leaf.route, leaf.exact);
-    const isLonger = leaf.route.length > winnerLength;
-    if (matches && isLonger) {
-      winner = leaf.route;
-      winnerLength = leaf.route.length;
-    }
-  }
-  return winner;
-}
+var MIN_TOUCH_TARGET = 44;
 var ACTIVE_BORDER_RADIUS = 4;
 var ACTIVE_ACCENT_WIDTH = 3;
 var NAV_ROW_RADIUS = 8;
@@ -209,7 +70,15 @@ var navStyles = StyleSheet.create({
   userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
   userName: { fontWeight: "600" },
   userEmail: { fontSize: 12 },
-  accountBtn: { marginLeft: 8, paddingHorizontal: 10, paddingVertical: 6, borderRadius: 4 },
+  accountBtn: {
+    marginLeft: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 4,
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    justifyContent: "center"
+  },
   accountText: { fontWeight: "600" },
   // --- Rich account-state header (Move 1c) ---
   accountTenant: { fontSize: 12 },
@@ -245,8 +114,8 @@ var navBarStyles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: 4,
     // a11y: keep the hamburger a comfortable ≥44×44 touch target.
-    minWidth: 44,
-    minHeight: 44,
+    minWidth: MIN_TOUCH_TARGET,
+    minHeight: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -288,7 +157,7 @@ var navBarStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     // a11y: comfortable ≥44 tall touch target (rounded-pill hover/active affordance).
-    minHeight: 44,
+    minHeight: MIN_TOUCH_TARGET,
     justifyContent: "center"
   },
   linkStacked: { paddingVertical: 10 },
@@ -324,7 +193,7 @@ var pillNavStyles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 999,
-    minHeight: 36,
+    minHeight: MIN_TOUCH_TARGET,
     flexDirection: "row",
     alignItems: "center",
     columnGap: 6,
@@ -345,7 +214,8 @@ var darkModeStyles = StyleSheet.create({
   segment: {
     paddingHorizontal: 12,
     paddingVertical: 8,
-    minHeight: 36,
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
     flexDirection: "row",
     alignItems: "center",
     columnGap: 6,
@@ -356,8 +226,8 @@ var darkModeStyles = StyleSheet.create({
   cycle: {
     paddingHorizontal: 12,
     paddingVertical: 8,
-    minHeight: 44,
-    minWidth: 44,
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
     borderRadius: 8,
     flexDirection: "row",
     alignItems: "center",
@@ -402,6 +272,7 @@ var expandableStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 9,
+    minHeight: MIN_TOUCH_TARGET,
     borderLeftWidth: ACTIVE_ACCENT_WIDTH,
     borderLeftColor: "transparent"
   },
@@ -429,7 +300,8 @@ var expandableStyles = StyleSheet.create({
     borderRadius: NAV_ROW_RADIUS,
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 8
+    paddingVertical: 8,
+    minHeight: MIN_TOUCH_TARGET
   },
   // Depth-0 module groups render as docs-style SECTION HEADERS: extra top rhythm
   // to separate one module from the next.
@@ -449,6 +321,145 @@ var expandableStyles = StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
+var IS_WEB = Platform.OS === "web";
+var FOCUS_RING_WIDTH = 2;
+var FOCUS_RING_OFFSET = 2;
+var HOVER_TRANSITION_MS = 150;
+var TINT_TRANSITION_MS = 160;
+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 webTransition(properties, durationMs, reducedMotion) {
+  if (!IS_WEB) return void 0;
+  const transition = {
+    transitionProperty: properties,
+    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
+  };
+  return transition;
+}
+function hoverTransitionStyle(reducedMotion) {
+  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
+}
+function tintTransitionStyle(reducedMotion) {
+  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
+}
+function rotateTransitionStyle(reducedMotion) {
+  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
+}
+var styles = StyleSheet.create({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    columnGap: 8,
+    paddingHorizontal: 12,
+    minHeight: MIN_TOUCH_TARGET,
+    borderWidth: 1,
+    borderRadius: 8
+  },
+  label: { fontSize: 14 },
+  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
+  badgeText: { fontSize: 11, fontWeight: "700" }
+});
+var CommandPaletteTrigger = ({
+  label,
+  hint,
+  shortcut,
+  onPress,
+  testID
+}) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      style: [
+        styles.trigger,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsx(View, { style: [styles.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
+
+// src/sidebarFilter.ts
+function searchTokens(query) {
+  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+function labelMatches(item, tokens) {
+  const label = item.label.toLowerCase();
+  return tokens.every((token) => label.includes(token));
+}
+function filterNavItems(items, query) {
+  const tokens = searchTokens(query);
+  if (tokens.length === 0) return [...items];
+  return filterByTokens(items, tokens);
+}
+function filterByTokens(items, tokens) {
+  const kept = [];
+  for (const item of items) {
+    const selfMatch = labelMatches(item, tokens);
+    const children = item.children ?? [];
+    if (selfMatch) {
+      kept.push(item);
+      continue;
+    }
+    if (children.length === 0) continue;
+    const prunedChildren = filterByTokens(children, tokens);
+    if (prunedChildren.length > 0) kept.push({ ...item, children: prunedChildren });
+  }
+  return kept;
+}
+function isFilterActive(query) {
+  return searchTokens(query).length > 0;
+}
+
+// src/isRouteActive.ts
+function isRouteActive(pathname, route, exact = false) {
+  if (exact) return pathname === route;
+  if (route === "/") return pathname === "/";
+  return pathname === route || pathname.startsWith(`${route}/`);
+}
+function leafRoutes(items) {
+  return items.flatMap((item) => {
+    const children = item.children ?? [];
+    const isGroup = children.length > 0;
+    return isGroup ? leafRoutes(children) : [{ route: item.route, exact: item.exact === true }];
+  });
+}
+function resolveActiveRoute(items, pathname) {
+  let winner;
+  let winnerLength = -1;
+  for (const leaf of leafRoutes(items)) {
+    const matches = isRouteActive(pathname, leaf.route, leaf.exact);
+    const isLonger = leaf.route.length > winnerLength;
+    if (matches && isLonger) {
+      winner = leaf.route;
+      winnerLength = leaf.route.length;
+    }
+  }
+  return winner;
+}
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 function getReducedMotionQuery() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
@@ -640,15 +651,12 @@ var NavExpandableItem = ({
     )) }) })
   ] });
 };
-
-// src/searchAffordance.ts
-var DEFAULT_SEARCH_BREAKPOINT = 768;
+var DEFAULT_SEARCH_BREAKPOINT = LAYOUT_COLLAPSE_BREAKPOINT;
 function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
   return viewport >= breakpoint ? "inline" : "palette";
 }
 var FIELD_MIN_HEIGHT = 38;
 var CLEAR_GLYPH = "\u2715";
-var CLEAR_MIN_TARGET = 28;
 var styles2 = StyleSheet.create({
   wrap: {
     flexDirection: "row",
@@ -666,8 +674,8 @@ var styles2 = StyleSheet.create({
     minHeight: FIELD_MIN_HEIGHT
   },
   clear: {
-    minWidth: CLEAR_MIN_TARGET,
-    minHeight: CLEAR_MIN_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    minHeight: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 6
@@ -1397,7 +1405,6 @@ function useContentBody(state, children, testID) {
 }
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
-var MENU_MIN_TARGET = 44;
 var MENU_GLYPH_FONT_SIZE = 20;
 var MENU_TOGGLE_PADDING = 12;
 var DRAWER_Z_INDEX = 50;
@@ -1435,8 +1442,8 @@ var styles4 = StyleSheet.create({
   // and receive presses instead of the scrim swallowing them.
   panel: { position: "absolute", top: 0, bottom: 0, left: 0, width: DRAWER_WIDTH, zIndex: PANEL_Z_INDEX },
   menuToggle: {
-    minWidth: MENU_MIN_TARGET,
-    minHeight: MENU_MIN_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    minHeight: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center",
     paddingHorizontal: MENU_TOGGLE_PADDING
@@ -1505,9 +1512,7 @@ var MobileDrawer = ({
     )
   ] });
 };
-
-// src/railMode.ts
-var RAIL_FULL_BREAKPOINT = 768;
+var RAIL_FULL_BREAKPOINT = LAYOUT_COLLAPSE_BREAKPOINT;
 var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
 function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
   if (!hasSidebar) return "none";