@dloizides/ui-nav 1.0.1

package/dist/index.js

@@ -0,0 +1,309 @@
+'use strict';
+
+var reactNative = require('react-native');
+var uiFeedback = require('@dloizides/ui-feedback');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var authWeb = require('@dloizides/auth-web');
+
+// src/Sidebar.tsx
+
+// src/isRouteActive.ts
+function isRouteActive(pathname, route) {
+  if (route === "/") return pathname === "/";
+  return pathname === route || pathname.startsWith(`${route}/`);
+}
+var ACTIVE_BORDER_RADIUS = 4;
+var navStyles = reactNative.StyleSheet.create({
+  // --- Sidebar ---
+  sidebarContainer: {
+    width: 220,
+    paddingTop: 24,
+    paddingHorizontal: 12,
+    borderRightWidth: 1,
+    height: "100%"
+  },
+  sidebarTitle: {
+    fontWeight: "700",
+    marginBottom: 12
+  },
+  sidebarItem: {
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+    borderRadius: 4
+  },
+  sidebarItemText: {
+    fontSize: 16
+  },
+  sidebarSpacer: {
+    flex: 1
+  },
+  // --- Topbar ---
+  topbarContainer: {
+    height: 64,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  topbarLeft: { flex: 1 },
+  topbarRight: { flexDirection: "row", alignItems: "center" },
+  topbarRowItem: { marginHorizontal: 8, alignItems: "center" },
+  topbarLabel: { fontSize: 14 },
+  userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
+  userName: { fontWeight: "600" },
+  userEmail: { fontSize: 12 },
+  accountBtn: { marginLeft: 8, paddingHorizontal: 10, paddingVertical: 6, borderRadius: 4 },
+  accountText: { fontWeight: "600" }
+});
+var expandableStyles = reactNative.StyleSheet.create({
+  childItem: {
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 6
+  },
+  childItemText: { fontSize: 14 },
+  childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },
+  chevron: { marginLeft: "auto" },
+  childrenContainer: { overflow: "hidden" },
+  header: {
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  headerText: { fontSize: 15, fontWeight: "600", marginLeft: 6 },
+  iconWrapper: { width: 20, alignItems: "center" }
+});
+var BASE_INDENT = 12;
+var NAV_ICON_SIZE = 14;
+var CHEVRON_ICON_SIZE = 12;
+var NavExpandableItem = ({
+  item,
+  pathname,
+  onNavigate,
+  navigateHint,
+  expandHint,
+  collapseHint,
+  renderChevron,
+  depth = 0
+}) => {
+  const [expanded, setExpanded] = react.useState(false);
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  const toggle = react.useCallback(() => setExpanded((v) => !v), []);
+  const indent = depth * BASE_INDENT;
+  const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+  const isActive = isRouteActive(pathname, item.route);
+  const activeItemStyle = react.useMemo(
+    () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
+    [colors.border]
+  );
+  const paddingStyle = react.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = react.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  if (!hasChildren)
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.TouchableOpacity,
+      {
+        accessibilityHint: navigateHint(item.label),
+        accessibilityLabel: item.label,
+        accessibilityRole: "button",
+        style: [expandableStyles.childItem, paddingStyle, isActive ? activeItemStyle : void 0],
+        testID: item.testID ?? item.key,
+        onPress: () => onNavigate(item.route),
+        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(
+            reactNative.Text,
+            {
+              style: [
+                typeof item.renderIcon === "function" ? expandableStyles.childItemTextWithIcon : expandableStyles.childItemText,
+                { color: isActive ? primaryColor : colors.text }
+              ],
+              children: item.label
+            }
+          )
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.TouchableOpacity,
+      {
+        accessibilityHint: expanded ? collapseHint : expandHint,
+        accessibilityLabel: item.label,
+        accessibilityRole: "button",
+        accessibilityState: { expanded },
+        style: [expandableStyles.header, headerPaddingStyle],
+        testID: item.testID ?? item.key,
+        onPress: toggle,
+        children: [
+          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [expandableStyles.headerText, { color: colors.text }], children: item.label }),
+          typeof renderChevron === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.chevron, children: renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE) }) : null
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      NavExpandableItem,
+      {
+        collapseHint,
+        depth: depth + 1,
+        expandHint,
+        item: child,
+        navigateHint,
+        pathname,
+        renderChevron,
+        onNavigate
+      },
+      child.key
+    )) }) : null
+  ] });
+};
+var Sidebar = ({
+  items,
+  pathname,
+  onNavigate,
+  title,
+  regionLabel,
+  navigateHint = (label) => label,
+  expandHint = "",
+  collapseHint = "",
+  renderChevron,
+  header,
+  footer,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      accessibilityRole: "none",
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [
+        navStyles.sidebarContainer,
+        { backgroundColor: colors.surface, borderRightColor: colors.border },
+        containerStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
+        header,
+        items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          NavExpandableItem,
+          {
+            collapseHint,
+            expandHint,
+            item,
+            navigateHint,
+            pathname,
+            renderChevron,
+            onNavigate
+          },
+          item.key
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarSpacer }),
+        footer
+      ]
+    }
+  );
+};
+var TEXT_ON_PRIMARY = "#ffffff";
+var Topbar = ({
+  left,
+  language,
+  notificationSlot,
+  user,
+  account,
+  logout,
+  containerStyle
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        navStyles.topbarContainer,
+        { borderBottomColor: colors.border, backgroundColor: colors.background },
+        containerStyle
+      ],
+      children: [
+        /* @__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,
+            {
+              accessibilityHint: language.hint,
+              accessibilityLabel: language.label,
+              accessibilityRole: "button",
+              style: navStyles.topbarRowItem,
+              onPress: language.onPress,
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
+            }
+          ) : null,
+          notificationSlot,
+          user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
+          ] }) : null,
+          account ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TouchableOpacity,
+            {
+              accessibilityHint: account.hint,
+              accessibilityLabel: account.label,
+              accessibilityRole: "button",
+              style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
+              testID: account.testID,
+              onPress: account.onPress,
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: account.label })
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TouchableOpacity,
+            {
+              accessible: true,
+              accessibilityHint: logout.hint,
+              accessibilityLabel: logout.label,
+              accessibilityRole: "button",
+              style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
+              testID: logout.testID,
+              onPress: logout.onPress,
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: logout.label })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+function roleRoutesToNavItems(routes, translate) {
+  return routes.map((entry) => ({
+    key: entry.role,
+    route: entry.route,
+    label: entry.labelKey !== void 0 ? translate(entry.labelKey) : entry.route
+  }));
+}
+function accessibleNavItems(user, table, translate) {
+  return roleRoutesToNavItems(authWeb.resolveAccessibleRoutes(user, table), translate);
+}
+
+exports.ACTIVE_BORDER_RADIUS = ACTIVE_BORDER_RADIUS;
+exports.BASE_INDENT = BASE_INDENT;
+exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
+exports.NAV_ICON_SIZE = NAV_ICON_SIZE;
+exports.NavExpandableItem = NavExpandableItem;
+exports.Sidebar = Sidebar;
+exports.Topbar = Topbar;
+exports.accessibleNavItems = accessibleNavItems;
+exports.expandableStyles = expandableStyles;
+exports.isRouteActive = isRouteActive;
+exports.navStyles = navStyles;
+exports.roleRoutesToNavItems = roleRoutesToNavItems;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/isRouteActive.ts","../src/styles.ts","../src/NavExpandableItem.tsx","../src/Sidebar.tsx","../src/Topbar.tsx","../src/roleNav.ts"],"names":["StyleSheet","useState","useUi","useCallback","useMemo","jsxs","TouchableOpacity","jsx","View","Text","resolveAccessibleRoutes"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Active-route matcher shared by the sidebar entries. Ported verbatim from the\n * twin app sidebars: an item is active when the current pathname equals its\n * route or is nested under it (`/foo` matches `/foo` and `/foo/bar`, but `/`\n * only matches `/`).\n */\nexport function isRouteActive(pathname: string, route: string): boolean {\n  if (route === '/') return pathname === '/';\n  return pathname === route || pathname.startsWith(`${route}/`);\n}\n","/**\n * Layout styles for the nav shell — ported verbatim (dimensions unchanged) from\n * erevna-web / katalogos-web `theme/utils/layoutSidebar.ts` + `layoutTopbar.ts`,\n * so a migrated app's sidebar/topbar keep the exact same metrics. Colours are\n * NOT baked in here; they are applied at render time from the UiProvider theme.\n */\nimport { StyleSheet } from 'react-native';\n\nexport const ACTIVE_BORDER_RADIUS = 4;\n\nexport const navStyles = StyleSheet.create({\n  // --- Sidebar ---\n  sidebarContainer: {\n    width: 220,\n    paddingTop: 24,\n    paddingHorizontal: 12,\n    borderRightWidth: 1,\n    height: '100%',\n  },\n  sidebarTitle: {\n    fontWeight: '700',\n    marginBottom: 12,\n  },\n  sidebarItem: {\n    paddingVertical: 10,\n    paddingHorizontal: 6,\n    borderRadius: 4,\n  },\n  sidebarItemText: {\n    fontSize: 16,\n  },\n  sidebarSpacer: {\n    flex: 1,\n  },\n\n  // --- Topbar ---\n  topbarContainer: {\n    height: 64,\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  topbarLeft: { flex: 1 },\n  topbarRight: { flexDirection: 'row', alignItems: 'center' },\n  topbarRowItem: { marginHorizontal: 8, alignItems: 'center' },\n  topbarLabel: { fontSize: 14 },\n  userBlock: { marginHorizontal: 12, alignItems: 'flex-end' },\n  userName: { fontWeight: '600' },\n  userEmail: { fontSize: 12 },\n  accountBtn: { marginLeft: 8, paddingHorizontal: 10, paddingVertical: 6, borderRadius: 4 },\n  accountText: { fontWeight: '600' },\n});\n\nexport const expandableStyles = StyleSheet.create({\n  childItem: {\n    borderRadius: 4,\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 6,\n  },\n  childItemText: { fontSize: 14 },\n  childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },\n  chevron: { marginLeft: 'auto' },\n  childrenContainer: { overflow: 'hidden' },\n  header: {\n    borderRadius: 4,\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 8,\n  },\n  headerText: { fontSize: 15, fontWeight: '600', marginLeft: 6 },\n  iconWrapper: { width: 20, alignItems: 'center' },\n});\n\n/** Base indent applied per nesting depth in the expandable item. */\nexport const BASE_INDENT = 12;\n/** Default icon size for nav item icons. */\nexport const NAV_ICON_SIZE = 14;\n/** Chevron icon size for expandable sections. */\nexport const CHEVRON_ICON_SIZE = 12;\n","/**\n * NavExpandableItem — a single sidebar entry that is either a leaf (navigates)\n * or an expandable section (toggles nested children). Ported from the twin\n * erevna/katalogos `Sidebar/NavExpandableItem`, made config-driven: labels are\n * pre-localized strings, icons are render slots, colours come from `useUi`.\n */\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { Text, TouchableOpacity, View } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nimport {\n  BASE_INDENT,\n  CHEVRON_ICON_SIZE,\n  NAV_ICON_SIZE,\n  ACTIVE_BORDER_RADIUS,\n  expandableStyles as styles,\n} from './styles';\nimport { isRouteActive } from './isRouteActive';\nimport type { NavItem } from './types';\n\nexport interface NavExpandableItemProps {\n  item: NavItem;\n  pathname: string;\n  onNavigate: (route: string) => void;\n  /** a11y hint for a leaf item, given its label. */\n  navigateHint: (label: string) => string;\n  /** a11y hint shown when the section is collapsed (press expands). */\n  expandHint: string;\n  /** a11y hint shown when the section is expanded (press collapses). */\n  collapseHint: string;\n  /** Optional chevron icon renderer for expandable sections. */\n  renderChevron?: (expanded: boolean, color: string, size: number) => React.ReactNode;\n  depth?: number;\n}\n\nexport const NavExpandableItem = ({\n  item,\n  pathname,\n  onNavigate,\n  navigateHint,\n  expandHint,\n  collapseHint,\n  renderChevron,\n  depth = 0,\n}: NavExpandableItemProps): React.ReactElement => {\n  const [expanded, setExpanded] = useState(false);\n  const { theme } = useUi();\n  const colors = theme.colors;\n  const primaryColor = theme.palette.primary['500'];\n\n  const toggle = useCallback(() => setExpanded((v) => !v), []);\n\n  const indent = depth * BASE_INDENT;\n  const hasChildren = Array.isArray(item.children) && item.children.length > 0;\n  const isActive = isRouteActive(pathname, item.route);\n\n  const activeItemStyle = useMemo(\n    () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),\n    [colors.border],\n  );\n  const paddingStyle = useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);\n  const headerPaddingStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);\n\n  if (!hasChildren)\n    return (\n      <TouchableOpacity\n        accessibilityHint={navigateHint(item.label)}\n        accessibilityLabel={item.label}\n        accessibilityRole=\"button\"\n        style={[styles.childItem, paddingStyle, isActive ? activeItemStyle : undefined]}\n        testID={item.testID ?? item.key}\n        onPress={() => onNavigate(item.route)}\n      >\n        {typeof item.renderIcon === 'function' ? (\n          <View style={styles.iconWrapper}>{item.renderIcon(colors.textSecondary, NAV_ICON_SIZE)}</View>\n        ) : null}\n        <Text\n          style={[\n            typeof item.renderIcon === 'function' ? styles.childItemTextWithIcon : styles.childItemText,\n            { color: isActive ? primaryColor : colors.text },\n          ]}\n        >\n          {item.label}\n        </Text>\n      </TouchableOpacity>\n    );\n\n  return (\n    <View>\n      <TouchableOpacity\n        accessibilityHint={expanded ? collapseHint : expandHint}\n        accessibilityLabel={item.label}\n        accessibilityRole=\"button\"\n        accessibilityState={{ expanded }}\n        style={[styles.header, headerPaddingStyle]}\n        testID={item.testID ?? item.key}\n        onPress={toggle}\n      >\n        {typeof item.renderIcon === 'function' ? (\n          <View style={styles.iconWrapper}>{item.renderIcon(colors.text, NAV_ICON_SIZE)}</View>\n        ) : null}\n        <Text style={[styles.headerText, { color: colors.text }]}>{item.label}</Text>\n        {typeof renderChevron === 'function' ? (\n          <View style={styles.chevron}>{renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE)}</View>\n        ) : null}\n      </TouchableOpacity>\n\n      {expanded ? (\n        <View style={styles.childrenContainer}>\n          {item.children?.map((child) => (\n            <NavExpandableItem\n              key={child.key}\n              collapseHint={collapseHint}\n              depth={depth + 1}\n              expandHint={expandHint}\n              item={child}\n              navigateHint={navigateHint}\n              pathname={pathname}\n              renderChevron={renderChevron}\n              onNavigate={onNavigate}\n            />\n          ))}\n        </View>\n      ) : null}\n    </View>\n  );\n};\n\nexport default NavExpandableItem;\n","/**\n * Sidebar — the config-driven left navigation shell promoted from the\n * byte-identical erevna-web / katalogos-web `Sidebar`. It renders a caller\n * supplied `NavItem[]` (leaf + expandable), highlights the active route, and\n * exposes header/footer slots for app-specific chrome (title, dark-mode toggle,\n * logout, notification bell). Every colour is read from the UiProvider theme.\n */\nimport React from 'react';\n\nimport { Text, View, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nimport { isRouteActive } from './isRouteActive';\nimport { NavExpandableItem } from './NavExpandableItem';\nimport { navStyles as styles } from './styles';\nimport type { NavItem } from './types';\n\nexport interface SidebarProps {\n  /** Nav entries — already role-filtered / grouped by the app. */\n  items: NavItem[];\n  /** Current active route/path. */\n  pathname: string;\n  /** Navigation callback — receives a `NavItem.route`. */\n  onNavigate: (route: string) => void;\n  /** Localized menu title (heading). */\n  title: string;\n  /** Localized accessibility label for the navigation landmark. */\n  regionLabel: string;\n  /** a11y hint for a leaf item, given its label. Defaults to the label. */\n  navigateHint?: (label: string) => string;\n  /** a11y hint shown when an expandable section is collapsed. */\n  expandHint?: string;\n  /** a11y hint shown when an expandable section is expanded. */\n  collapseHint?: string;\n  /** Optional chevron renderer for expandable sections. */\n  renderChevron?: (expanded: boolean, color: string, size: number) => React.ReactNode;\n  /** Optional header slot rendered above the items (e.g. a Home shortcut). */\n  header?: React.ReactNode;\n  /** Optional footer slot rendered after a flex spacer (dark-mode toggle, logout). */\n  footer?: React.ReactNode;\n  /** Extra container style overrides. */\n  containerStyle?: ViewStyle | ViewStyle[];\n}\n\nexport const Sidebar = ({\n  items,\n  pathname,\n  onNavigate,\n  title,\n  regionLabel,\n  navigateHint = (label) => label,\n  expandHint = '',\n  collapseHint = '',\n  renderChevron,\n  header,\n  footer,\n  containerStyle,\n}: SidebarProps): React.ReactElement => {\n  const { theme } = useUi();\n  const colors = theme.colors;\n\n  return (\n    <View\n      accessibilityRole=\"none\"\n      aria-label={regionLabel}\n      role=\"navigation\"\n      style={[\n        styles.sidebarContainer,\n        { backgroundColor: colors.surface, borderRightColor: colors.border },\n        containerStyle,\n      ]}\n    >\n      <Text accessibilityRole=\"header\" style={[styles.sidebarTitle, { color: colors.text }]}>\n        {title}\n      </Text>\n\n      {header}\n\n      {items.map((item) => (\n        <NavExpandableItem\n          key={item.key}\n          collapseHint={collapseHint}\n          expandHint={expandHint}\n          item={item}\n          navigateHint={navigateHint}\n          pathname={pathname}\n          renderChevron={renderChevron}\n          onNavigate={onNavigate}\n        />\n      ))}\n\n      <View style={styles.sidebarSpacer} />\n\n      {footer}\n    </View>\n  );\n};\n\nexport { isRouteActive };\nexport default Sidebar;\n","/**\n * Topbar — the config-driven top navigation bar promoted from the byte-identical\n * erevna-web / katalogos-web `Topbar`. Structured slots replace the app-specific\n * wiring: a `left` logo slot, an optional language toggle, a notification slot,\n * an optional user block, an optional account button, and a required logout\n * action. Every colour comes from the UiProvider theme.\n */\nimport React from 'react';\n\nimport { Text, TouchableOpacity, View, type ViewStyle } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nimport { navStyles as styles } from './styles';\n\n/** Text color for elements on primary-colored backgrounds. */\nconst TEXT_ON_PRIMARY = '#ffffff';\n\nexport interface TopbarAction {\n  label: string;\n  hint: string;\n  onPress: () => void;\n  testID?: string;\n}\n\nexport interface TopbarUser {\n  name: string;\n  email: string;\n}\n\nexport interface TopbarProps {\n  /** Left slot — typically the tenant logo. */\n  left?: React.ReactNode;\n  /** Optional language toggle. */\n  language?: { label: string; hint: string; onPress: () => void };\n  /** Optional notification slot (e.g. a notification bell). */\n  notificationSlot?: React.ReactNode;\n  /** Optional user identity block. */\n  user?: TopbarUser;\n  /** Optional account button. */\n  account?: TopbarAction;\n  /** Required logout action. */\n  logout: TopbarAction;\n  /** Extra container style overrides. */\n  containerStyle?: ViewStyle | ViewStyle[];\n}\n\nexport const Topbar = ({\n  left,\n  language,\n  notificationSlot,\n  user,\n  account,\n  logout,\n  containerStyle,\n}: TopbarProps): React.ReactElement => {\n  const { theme } = useUi();\n  const colors = theme.colors;\n  const primaryColor = theme.palette.primary['500'];\n\n  return (\n    <View\n      style={[\n        styles.topbarContainer,\n        { borderBottomColor: colors.border, backgroundColor: colors.background },\n        containerStyle,\n      ]}\n    >\n      <View style={styles.topbarLeft}>{left}</View>\n      <View style={styles.topbarRight}>\n        {language ? (\n          <TouchableOpacity\n            accessibilityHint={language.hint}\n            accessibilityLabel={language.label}\n            accessibilityRole=\"button\"\n            style={styles.topbarRowItem}\n            onPress={language.onPress}\n          >\n            <Text style={[styles.topbarLabel, { color: colors.text }]}>{language.label}</Text>\n          </TouchableOpacity>\n        ) : null}\n\n        {notificationSlot}\n\n        {user ? (\n          <View style={styles.userBlock}>\n            <Text style={[styles.userName, { color: colors.text }]}>{user.name}</Text>\n            <Text style={[styles.userEmail, { color: colors.textSecondary }]}>{user.email}</Text>\n          </View>\n        ) : null}\n\n        {account ? (\n          <TouchableOpacity\n            accessibilityHint={account.hint}\n            accessibilityLabel={account.label}\n            accessibilityRole=\"button\"\n            style={[styles.accountBtn, { backgroundColor: primaryColor }]}\n            testID={account.testID}\n            onPress={account.onPress}\n          >\n            <Text style={[styles.accountText, { color: TEXT_ON_PRIMARY }]}>{account.label}</Text>\n          </TouchableOpacity>\n        ) : null}\n\n        <TouchableOpacity\n          accessible\n          accessibilityHint={logout.hint}\n          accessibilityLabel={logout.label}\n          accessibilityRole=\"button\"\n          style={[styles.accountBtn, { backgroundColor: primaryColor }]}\n          testID={logout.testID}\n          onPress={logout.onPress}\n        >\n          <Text style={[styles.accountText, { color: TEXT_ON_PRIMARY }]}>{logout.label}</Text>\n        </TouchableOpacity>\n      </View>\n    </View>\n  );\n};\n\nexport default Topbar;\n","/**\n * Role-gated nav helpers — build a `NavItem[]` from a user's roles, reusing the\n * existing `resolveAccessibleRoutes` from `@dloizides/auth-web` (the same helper\n * the multi-role dashboard nav uses) rather than reimplementing role filtering.\n *\n * The app supplies its ordered `RoleRouteTable` (role → route + optional\n * `labelKey`) and a `translate` fn (its `FM`); this returns the ordered set of\n * `NavItem`s the user's roles unlock — most privileged first, empty when none.\n */\nimport { resolveAccessibleRoutes } from '@dloizides/auth-web';\nimport type { RoleRoute, RoleRouteTable } from '@dloizides/auth-web';\n\nimport type { NavItem } from './types';\n\n/** The user shape `resolveAccessibleRoutes` accepts (derived — no extra dep). */\nexport type NavUser = Parameters<typeof resolveAccessibleRoutes>[0];\n\n/** Map already-resolved role routes to nav items, localizing each `labelKey`. */\nexport function roleRoutesToNavItems(\n  routes: RoleRoute[],\n  translate: (key: string) => string,\n): NavItem[] {\n  return routes.map((entry) => ({\n    key: entry.role,\n    route: entry.route,\n    label: entry.labelKey !== undefined ? translate(entry.labelKey) : entry.route,\n  }));\n}\n\n/**\n * Resolve the nav items a user can reach, in table (priority) order. Wraps\n * `resolveAccessibleRoutes` so role gating lives in one place.\n */\nexport function accessibleNavItems(\n  user: NavUser,\n  table: RoleRouteTable,\n  translate: (key: string) => string,\n): NavItem[] {\n  return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,296 @@
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+import { useUi } from '@dloizides/ui-feedback';
+import { useState, useCallback, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { resolveAccessibleRoutes } from '@dloizides/auth-web';
+
+// src/Sidebar.tsx
+
+// src/isRouteActive.ts
+function isRouteActive(pathname, route) {
+  if (route === "/") return pathname === "/";
+  return pathname === route || pathname.startsWith(`${route}/`);
+}
+var ACTIVE_BORDER_RADIUS = 4;
+var navStyles = StyleSheet.create({
+  // --- Sidebar ---
+  sidebarContainer: {
+    width: 220,
+    paddingTop: 24,
+    paddingHorizontal: 12,
+    borderRightWidth: 1,
+    height: "100%"
+  },
+  sidebarTitle: {
+    fontWeight: "700",
+    marginBottom: 12
+  },
+  sidebarItem: {
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+    borderRadius: 4
+  },
+  sidebarItemText: {
+    fontSize: 16
+  },
+  sidebarSpacer: {
+    flex: 1
+  },
+  // --- Topbar ---
+  topbarContainer: {
+    height: 64,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  topbarLeft: { flex: 1 },
+  topbarRight: { flexDirection: "row", alignItems: "center" },
+  topbarRowItem: { marginHorizontal: 8, alignItems: "center" },
+  topbarLabel: { fontSize: 14 },
+  userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
+  userName: { fontWeight: "600" },
+  userEmail: { fontSize: 12 },
+  accountBtn: { marginLeft: 8, paddingHorizontal: 10, paddingVertical: 6, borderRadius: 4 },
+  accountText: { fontWeight: "600" }
+});
+var expandableStyles = StyleSheet.create({
+  childItem: {
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 6
+  },
+  childItemText: { fontSize: 14 },
+  childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },
+  chevron: { marginLeft: "auto" },
+  childrenContainer: { overflow: "hidden" },
+  header: {
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  headerText: { fontSize: 15, fontWeight: "600", marginLeft: 6 },
+  iconWrapper: { width: 20, alignItems: "center" }
+});
+var BASE_INDENT = 12;
+var NAV_ICON_SIZE = 14;
+var CHEVRON_ICON_SIZE = 12;
+var NavExpandableItem = ({
+  item,
+  pathname,
+  onNavigate,
+  navigateHint,
+  expandHint,
+  collapseHint,
+  renderChevron,
+  depth = 0
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  const toggle = useCallback(() => setExpanded((v) => !v), []);
+  const indent = depth * BASE_INDENT;
+  const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+  const isActive = isRouteActive(pathname, item.route);
+  const activeItemStyle = useMemo(
+    () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
+    [colors.border]
+  );
+  const paddingStyle = useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
+  if (!hasChildren)
+    return /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        accessibilityHint: navigateHint(item.label),
+        accessibilityLabel: item.label,
+        accessibilityRole: "button",
+        style: [expandableStyles.childItem, paddingStyle, isActive ? activeItemStyle : void 0],
+        testID: item.testID ?? item.key,
+        onPress: () => onNavigate(item.route),
+        children: [
+          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                typeof item.renderIcon === "function" ? expandableStyles.childItemTextWithIcon : expandableStyles.childItemText,
+                { color: isActive ? primaryColor : colors.text }
+              ],
+              children: item.label
+            }
+          )
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        accessibilityHint: expanded ? collapseHint : expandHint,
+        accessibilityLabel: item.label,
+        accessibilityRole: "button",
+        accessibilityState: { expanded },
+        style: [expandableStyles.header, headerPaddingStyle],
+        testID: item.testID ?? item.key,
+        onPress: toggle,
+        children: [
+          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
+          /* @__PURE__ */ jsx(Text, { style: [expandableStyles.headerText, { color: colors.text }], children: item.label }),
+          typeof renderChevron === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.chevron, children: renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE) }) : null
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsx(View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsx(
+      NavExpandableItem,
+      {
+        collapseHint,
+        depth: depth + 1,
+        expandHint,
+        item: child,
+        navigateHint,
+        pathname,
+        renderChevron,
+        onNavigate
+      },
+      child.key
+    )) }) : null
+  ] });
+};
+var Sidebar = ({
+  items,
+  pathname,
+  onNavigate,
+  title,
+  regionLabel,
+  navigateHint = (label) => label,
+  expandHint = "",
+  collapseHint = "",
+  renderChevron,
+  header,
+  footer,
+  containerStyle
+}) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "none",
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [
+        navStyles.sidebarContainer,
+        { backgroundColor: colors.surface, borderRightColor: colors.border },
+        containerStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
+        header,
+        items.map((item) => /* @__PURE__ */ jsx(
+          NavExpandableItem,
+          {
+            collapseHint,
+            expandHint,
+            item,
+            navigateHint,
+            pathname,
+            renderChevron,
+            onNavigate
+          },
+          item.key
+        )),
+        /* @__PURE__ */ jsx(View, { style: navStyles.sidebarSpacer }),
+        footer
+      ]
+    }
+  );
+};
+var TEXT_ON_PRIMARY = "#ffffff";
+var Topbar = ({
+  left,
+  language,
+  notificationSlot,
+  user,
+  account,
+  logout,
+  containerStyle
+}) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const primaryColor = theme.palette.primary["500"];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        navStyles.topbarContainer,
+        { borderBottomColor: colors.border, backgroundColor: colors.background },
+        containerStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: navStyles.topbarLeft, children: left }),
+        /* @__PURE__ */ jsxs(View, { style: navStyles.topbarRight, children: [
+          language ? /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              accessibilityHint: language.hint,
+              accessibilityLabel: language.label,
+              accessibilityRole: "button",
+              style: navStyles.topbarRowItem,
+              onPress: language.onPress,
+              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
+            }
+          ) : null,
+          notificationSlot,
+          user ? /* @__PURE__ */ jsxs(View, { style: navStyles.userBlock, children: [
+            /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
+            /* @__PURE__ */ jsx(Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
+          ] }) : null,
+          account ? /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              accessibilityHint: account.hint,
+              accessibilityLabel: account.label,
+              accessibilityRole: "button",
+              style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
+              testID: account.testID,
+              onPress: account.onPress,
+              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: account.label })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              accessible: true,
+              accessibilityHint: logout.hint,
+              accessibilityLabel: logout.label,
+              accessibilityRole: "button",
+              style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
+              testID: logout.testID,
+              onPress: logout.onPress,
+              children: /* @__PURE__ */ jsx(Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: logout.label })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+function roleRoutesToNavItems(routes, translate) {
+  return routes.map((entry) => ({
+    key: entry.role,
+    route: entry.route,
+    label: entry.labelKey !== void 0 ? translate(entry.labelKey) : entry.route
+  }));
+}
+function accessibleNavItems(user, table, translate) {
+  return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
+}
+
+export { ACTIVE_BORDER_RADIUS, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NavExpandableItem, Sidebar, Topbar, accessibleNavItems, expandableStyles, isRouteActive, navStyles, roleRoutesToNavItems };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map