@situaction/traquiste-mobile 1.0.0 → 1.1.0-next.1

package/build/components/navigation/GeneralNav/GeneralNav.d.ts

@@ -0,0 +1,21 @@
+/** Top navigation bar — left ghost button + title grouped left, right Buttons pushed to the far right */
+import React from 'react';
+import type { ButtonVariant } from '../../Button';
+export type GeneralNavAction = {
+    /** Icon element to pass to Button's iconLeft prop */
+    icon: React.ReactElement;
+    onPress: () => void;
+    /** Button variant — defaults to 'ghost' for left, 'ghost' for right */
+    variant?: ButtonVariant;
+    accessibilityLabel?: string;
+};
+export interface GeneralNavProps {
+    /** Page title — always required */
+    title: string;
+    /** Optional left action — rendered as a ghost icon-only Button */
+    leftIcon?: GeneralNavAction;
+    /** One or two right actions — each rendered as a ghost icon-only Button */
+    rightActions?: GeneralNavAction[];
+}
+export declare function GeneralNav({ title, leftIcon, rightActions, }: GeneralNavProps): React.JSX.Element;
+//# sourceMappingURL=GeneralNav.d.ts.map

package/build/components/navigation/GeneralNav/GeneralNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralNav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/GeneralNav/GeneralNav.tsx"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGlD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,YAAY,GACb,EAAE,eAAe,qBAyCjB"}

package/build/components/navigation/GeneralNav/GeneralNav.js

@@ -0,0 +1,25 @@
+/** Top navigation bar — left ghost button + title grouped left, right Buttons pushed to the far right */
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useTheme } from '../../../context/ThemeContext';
+import { Button } from '../../Button';
+import { styles } from './GeneralNav.styles';
+export function GeneralNav({ title, leftIcon, rightActions, }) {
+    const { colors, fontFamily } = useTheme();
+    const nav = colors.generalNav;
+    return (<View style={[styles.container, { backgroundColor: colors.background.primary }]}>
+      {/* Left group: ghost button + title — takes all available space */}
+      <View style={styles.leftGroup}>
+        {leftIcon && (<Button variant={leftIcon.variant ?? 'ghost'} content="icon-only-rounded" size="M" iconLeft={leftIcon.icon} onPress={leftIcon.onPress} accessibilityLabel={leftIcon.accessibilityLabel}/>)}
+        <Text style={[styles.title, { color: nav.navTextIcons, fontFamily }]} numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+
+      {/* Right actions — ghost icon-only Buttons, pushed to far right by leftGroup flex: 1 */}
+      {rightActions && rightActions.length > 0 && (<View style={styles.rightGroup}>
+          {rightActions.map((action, index) => (<Button key={index} variant={action.variant ?? 'ghost'} content="icon-only-rounded" size="M" iconLeft={action.icon} onPress={action.onPress} accessibilityLabel={action.accessibilityLabel}/>))}
+        </View>)}
+    </View>);
+}
+//# sourceMappingURL=GeneralNav.js.map

package/build/components/navigation/GeneralNav/GeneralNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralNav.js","sourceRoot":"","sources":["../../../../src/components/navigation/GeneralNav/GeneralNav.tsx"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAoB7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,YAAY,GACI;IAChB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;IAE9B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAC9E;MAAA,CAAC,kEAAkE,CACnE;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,QAAQ,IAAI,CACX,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,CACrC,OAAO,CAAC,mBAAmB,CAC3B,IAAI,CAAC,GAAG,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CACxB,OAAO,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAC1B,kBAAkB,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAChD,CACH,CACD;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,YAAY,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACrF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,uFAAuF,CACxF;MAAA,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1C,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC7B;UAAA,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,CACnC,OAAO,CAAC,mBAAmB,CAC3B,IAAI,CAAC,GAAG,CACR,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACtB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACxB,kBAAkB,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAC9C,CACH,CAAC,CACJ;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["/** Top navigation bar — left ghost button + title grouped left, right Buttons pushed to the far right */\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport { useTheme } from '../../../context/ThemeContext';\nimport { Button } from '../../Button';\nimport type { ButtonVariant } from '../../Button';\nimport { styles } from './GeneralNav.styles';\n\nexport type GeneralNavAction = {\n  /** Icon element to pass to Button's iconLeft prop */\n  icon: React.ReactElement;\n  onPress: () => void;\n  /** Button variant — defaults to 'ghost' for left, 'ghost' for right */\n  variant?: ButtonVariant;\n  accessibilityLabel?: string;\n};\n\nexport interface GeneralNavProps {\n  /** Page title — always required */\n  title: string;\n  /** Optional left action — rendered as a ghost icon-only Button */\n  leftIcon?: GeneralNavAction;\n  /** One or two right actions — each rendered as a ghost icon-only Button */\n  rightActions?: GeneralNavAction[];\n}\n\nexport function GeneralNav({\n  title,\n  leftIcon,\n  rightActions,\n}: GeneralNavProps) {\n  const { colors, fontFamily } = useTheme();\n  const nav = colors.generalNav;\n\n  return (\n    <View style={[styles.container, { backgroundColor: colors.background.primary }]}>\n      {/* Left group: ghost button + title — takes all available space */}\n      <View style={styles.leftGroup}>\n        {leftIcon && (\n          <Button\n            variant={leftIcon.variant ?? 'ghost'}\n            content=\"icon-only-rounded\"\n            size=\"M\"\n            iconLeft={leftIcon.icon}\n            onPress={leftIcon.onPress}\n            accessibilityLabel={leftIcon.accessibilityLabel}\n          />\n        )}\n        <Text style={[styles.title, { color: nav.navTextIcons, fontFamily }]} numberOfLines={1}>\n          {title}\n        </Text>\n      </View>\n\n      {/* Right actions — ghost icon-only Buttons, pushed to far right by leftGroup flex: 1 */}\n      {rightActions && rightActions.length > 0 && (\n        <View style={styles.rightGroup}>\n          {rightActions.map((action, index) => (\n            <Button\n              key={index}\n              variant={action.variant ?? 'ghost'}\n              content=\"icon-only-rounded\"\n              size=\"M\"\n              iconLeft={action.icon}\n              onPress={action.onPress}\n              accessibilityLabel={action.accessibilityLabel}\n            />\n          ))}\n        </View>\n      )}\n    </View>\n  );\n}"]}

package/build/components/navigation/GeneralNav/GeneralNav.styles.d.ts

@@ -0,0 +1,33 @@
+/** Width/height of the left and right icon slots (touch target) */
+export declare const SLOT_SIZE = 44;
+/** Fixed height of the navigation bar */
+export declare const NAV_HEIGHT = 56;
+export declare const styles: {
+    container: {
+        width: "100%";
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingHorizontal: number;
+    };
+    /** Groups the optional left icon and the title — takes all available space */
+    leftGroup: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    title: {
+        flex: number;
+        fontSize: number;
+        fontWeight: "700";
+        fontFamily: string;
+        lineHeight: number;
+    };
+    rightGroup: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+};
+//# sourceMappingURL=GeneralNav.styles.d.ts.map

package/build/components/navigation/GeneralNav/GeneralNav.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralNav.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/GeneralNav/GeneralNav.styles.ts"],"names":[],"mappings":"AAGA,mEAAmE;AACnE,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,yCAAyC;AACzC,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B,eAAO,MAAM,MAAM;;;;;;;;IAQjB,8EAA8E;;;;;;;;;;;;;;;;;;;CAmB9E,CAAC"}

package/build/components/navigation/GeneralNav/GeneralNav.styles.js

@@ -0,0 +1,35 @@
+/** Static layout styles for GeneralNav — colors and shadow injected via useTheme() */
+import { StyleSheet } from 'react-native';
+/** Width/height of the left and right icon slots (touch target) */
+export const SLOT_SIZE = 44;
+/** Fixed height of the navigation bar */
+export const NAV_HEIGHT = 56;
+export const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: NAV_HEIGHT,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 10,
+    },
+    /** Groups the optional left icon and the title — takes all available space */
+    leftGroup: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    title: {
+        flex: 1,
+        fontSize: 28,
+        fontWeight: '700',
+        fontFamily: 'Urbanist',
+        lineHeight: 34,
+    },
+    rightGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+});
+//# sourceMappingURL=GeneralNav.styles.js.map

package/build/components/navigation/GeneralNav/GeneralNav.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralNav.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/GeneralNav/GeneralNav.styles.ts"],"names":[],"mappings":"AAAA,sFAAsF;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,mEAAmE;AACnE,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC;AAC5B,yCAAyC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;AAE7B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,UAAU;QAClB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,iBAAiB,EAAE,EAAE;KACtB;IACD,8EAA8E;IAC9E,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;KACP;IACD,KAAK,EAAE;QACL,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,EAAE;KACf;IACD,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;KACP;CACF,CAAC,CAAC","sourcesContent":["/** Static layout styles for GeneralNav — colors and shadow injected via useTheme() */\nimport { StyleSheet } from 'react-native';\n\n/** Width/height of the left and right icon slots (touch target) */\nexport const SLOT_SIZE = 44;\n/** Fixed height of the navigation bar */\nexport const NAV_HEIGHT = 56;\n\nexport const styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    height: NAV_HEIGHT,\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 10,\n  },\n  /** Groups the optional left icon and the title — takes all available space */\n  leftGroup: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  title: {\n    flex: 1,\n    fontSize: 28,\n    fontWeight: '700',\n    fontFamily: 'Urbanist',\n    lineHeight: 34,\n  },\n  rightGroup: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n  },\n});"]}

package/build/components/navigation/GeneralNav/index.d.ts

@@ -0,0 +1,3 @@
+export { GeneralNav } from './GeneralNav';
+export type { GeneralNavProps, GeneralNavAction } from './GeneralNav';
+//# sourceMappingURL=index.d.ts.map

package/build/components/navigation/GeneralNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/GeneralNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/build/components/navigation/GeneralNav/index.js

@@ -0,0 +1,2 @@
+export { GeneralNav } from './GeneralNav';
+//# sourceMappingURL=index.js.map

package/build/components/navigation/GeneralNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/GeneralNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { GeneralNav } from './GeneralNav';\nexport type { GeneralNavProps, GeneralNavAction } from './GeneralNav';"]}

package/build/components/navigation/MobileCanva/MobileCanva.d.ts

@@ -0,0 +1,11 @@
+/** MobileCanva — responsive app shell used as preview frame in Storybook and docs */
+import React from 'react';
+import type { TabBarProps } from '../TabBar';
+export interface MobileCanvaProps {
+    /** Content rendered inside the white area */
+    children?: React.ReactNode;
+    /** Override the inner TabBar — defaults to [Table, MapTrifold, Bell, User] */
+    tabBarProps?: TabBarProps;
+}
+export declare function MobileCanva({ children, tabBarProps }: MobileCanvaProps): React.JSX.Element;
+//# sourceMappingURL=MobileCanva.d.ts.map

package/build/components/navigation/MobileCanva/MobileCanva.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCanva.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/MobileCanva.tsx"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,gBAAgB,qBAkCtE"}

package/build/components/navigation/MobileCanva/MobileCanva.js

@@ -0,0 +1,55 @@
+/** MobileCanva — responsive app shell used as preview frame in Storybook and docs */
+import React, { useState } from 'react';
+import { View, StyleSheet, StatusBar } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Table, MapTrifold, Bell, User } from 'phosphor-react-native';
+import { useTheme } from '../../../context/ThemeContext';
+import { TabBar } from '../TabBar';
+export function MobileCanva({ children, tabBarProps }) {
+    const { colors } = useTheme();
+    const insets = useSafeAreaInsets();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const defaultTabBarProps = {
+        activeIndex,
+        tabs: [
+            { icon: <Table />, onPress: () => setActiveIndex(0) },
+            { icon: <MapTrifold />, onPress: () => setActiveIndex(1) },
+            { icon: <Bell />, onPress: () => setActiveIndex(2), notif: true },
+            { icon: <User />, onPress: () => setActiveIndex(3) },
+        ],
+    };
+    const resolvedTabBarProps = tabBarProps ?? defaultTabBarProps;
+    return (<SafeAreaView style={[styles.root, { backgroundColor: colors.canva.shellBackground }]} edges={['top']}>
+      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent/>
+      <View style={styles.shell}>
+        <View style={[styles.content, {
+                backgroundColor: colors.canva.contentBackground,
+                borderColor: colors.canva.contentBorder,
+            }]}>
+          {children}
+        </View>
+
+        <View style={{ paddingBottom: insets.bottom }}>
+          <TabBar {...resolvedTabBarProps}/>
+        </View>
+      </View>
+    </SafeAreaView>);
+}
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+    shell: {
+        flex: 1,
+        paddingHorizontal: 6,
+        paddingTop: 4,
+        gap: 4,
+    },
+    content: {
+        flex: 1,
+        borderRadius: 12,
+        borderWidth: 1,
+        overflow: 'hidden',
+    },
+});
+//# sourceMappingURL=MobileCanva.js.map

package/build/components/navigation/MobileCanva/MobileCanva.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCanva.js","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/MobileCanva.tsx"],"names":[],"mappings":"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","sourcesContent":["/** MobileCanva — responsive app shell used as preview frame in Storybook and docs */\nimport React, { useState } from 'react';\nimport { View, StyleSheet, StatusBar } from 'react-native';\nimport { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { Table, MapTrifold, Bell, User } from 'phosphor-react-native';\nimport { useTheme } from '../../../context/ThemeContext';\nimport { TabBar } from '../TabBar';\nimport type { TabBarProps } from '../TabBar';\n\nexport interface MobileCanvaProps {\n  /** Content rendered inside the white area */\n  children?: React.ReactNode;\n  /** Override the inner TabBar — defaults to [Table, MapTrifold, Bell, User] */\n  tabBarProps?: TabBarProps;\n}\n\nexport function MobileCanva({ children, tabBarProps }: MobileCanvaProps) {\n  const { colors } = useTheme();\n  const insets = useSafeAreaInsets();\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const defaultTabBarProps: TabBarProps = {\n    activeIndex,\n    tabs: [\n      { icon: <Table />,      onPress: () => setActiveIndex(0) },\n      { icon: <MapTrifold />, onPress: () => setActiveIndex(1) },\n      { icon: <Bell />,       onPress: () => setActiveIndex(2), notif: true },\n      { icon: <User />,       onPress: () => setActiveIndex(3) },\n    ],\n  };\n\n  const resolvedTabBarProps = tabBarProps ?? defaultTabBarProps;\n\n  return (\n    <SafeAreaView style={[styles.root, { backgroundColor: colors.canva.shellBackground }]} edges={['top']}>\n      <StatusBar barStyle=\"dark-content\" backgroundColor=\"transparent\" translucent />\n      <View style={styles.shell}>\n        <View style={[styles.content, {\n          backgroundColor: colors.canva.contentBackground,\n          borderColor:     colors.canva.contentBorder,\n        }]}>\n          {children}\n        </View>\n\n        <View style={{ paddingBottom: insets.bottom }}>\n          <TabBar {...resolvedTabBarProps} />\n        </View>\n      </View>\n    </SafeAreaView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n  },\n  shell: {\n    flex:            1,\n    paddingHorizontal: 6,\n    paddingTop:      4,\n    gap:             4,\n  },\n  content: {\n    flex:         1,\n    borderRadius: 12,\n    borderWidth:  1,\n    overflow:     'hidden',\n  },\n});"]}

package/build/components/navigation/MobileCanva/MobileCanva.styles.d.ts

@@ -0,0 +1,93 @@
+export declare const SHELL_WIDTH = 390;
+export declare const SHELL_HEIGHT = 844;
+export declare const HOMEBAR_WIDTH = 144;
+export declare const HOMEBAR_HEIGHT = 5;
+export declare const KEY_HEIGHT = 42;
+export declare const KEY_GAP = 4;
+export declare const ROW_GAP = 8;
+export declare const styles: {
+    shell: {
+        width: number;
+        height: number;
+        padding: number;
+        gap: number;
+        overflow: "hidden";
+    };
+    content: {
+        flex: number;
+        borderRadius: number;
+        borderWidth: number;
+        overflow: "hidden";
+    };
+    homebarContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+        paddingVertical: number;
+    };
+    homebar: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    board: {
+        overflow: "hidden";
+    };
+    toolbar: {
+        flexDirection: "row";
+        justifyContent: "space-around";
+        alignItems: "center";
+        height: number;
+        paddingHorizontal: number;
+    };
+    toolbarBtn: {
+        padding: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    gifLabel: {
+        fontSize: number;
+        fontWeight: "700";
+        fontFamily: string;
+    };
+    rows: {
+        paddingHorizontal: number;
+        paddingBottom: number;
+        gap: number;
+    };
+    row: {
+        flexDirection: "row";
+        gap: number;
+    };
+    key: {
+        flex: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    keyWide: {
+        flex: number;
+    };
+    keySpace: {
+        flex: number;
+    };
+    keyLabel: {
+        fontSize: number;
+        fontWeight: "400";
+        fontFamily: string;
+    };
+    keyLabelSmall: {
+        fontSize: number;
+        fontWeight: "500";
+        fontFamily: string;
+    };
+};
+//# sourceMappingURL=MobileCanva.styles.d.ts.map

package/build/components/navigation/MobileCanva/MobileCanva.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCanva.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/MobileCanva.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,MAAO,CAAC;AAChC,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,MAAO,CAAC;AAClC,eAAO,MAAM,cAAc,IAAI,CAAC;AAChC,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,OAAO,IAAO,CAAC;AAC5B,eAAO,MAAM,OAAO,IAAO,CAAC;AAE5B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFjB,CAAC"}

package/build/components/navigation/MobileCanva/MobileCanva.styles.js

@@ -0,0 +1,94 @@
+/** Static layout styles for MobileCanva — colors injected via useTheme() */
+import { StyleSheet } from 'react-native';
+export const SHELL_WIDTH = 390;
+export const SHELL_HEIGHT = 844;
+export const HOMEBAR_WIDTH = 144;
+export const HOMEBAR_HEIGHT = 5;
+export const KEY_HEIGHT = 42;
+export const KEY_GAP = 4;
+export const ROW_GAP = 8;
+export const styles = StyleSheet.create({
+    // --- Shell ---
+    shell: {
+        width: SHELL_WIDTH,
+        height: SHELL_HEIGHT,
+        padding: 6,
+        gap: 6,
+        overflow: 'hidden',
+    },
+    content: {
+        flex: 1,
+        borderRadius: 12,
+        borderWidth: 1,
+        overflow: 'hidden',
+    },
+    homebarContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 8,
+    },
+    homebar: {
+        width: HOMEBAR_WIDTH,
+        height: HOMEBAR_HEIGHT,
+        borderRadius: 3,
+    },
+    // --- BoardKeyboard ---
+    board: {
+        overflow: 'hidden',
+    },
+    toolbar: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        height: 44,
+        paddingHorizontal: 8,
+    },
+    toolbarBtn: {
+        padding: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    gifLabel: {
+        fontSize: 12,
+        fontWeight: '700',
+        fontFamily: 'Urbanist',
+    },
+    rows: {
+        paddingHorizontal: 4,
+        paddingBottom: 8,
+        gap: ROW_GAP,
+    },
+    row: {
+        flexDirection: 'row',
+        gap: KEY_GAP,
+    },
+    key: {
+        flex: 1,
+        height: KEY_HEIGHT,
+        borderRadius: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 0,
+        elevation: 2,
+    },
+    keyWide: {
+        flex: 1.5,
+    },
+    keySpace: {
+        flex: 4,
+    },
+    keyLabel: {
+        fontSize: 16,
+        fontWeight: '400',
+        fontFamily: 'Urbanist',
+    },
+    keyLabelSmall: {
+        fontSize: 12,
+        fontWeight: '500',
+        fontFamily: 'Urbanist',
+    },
+});
+//# sourceMappingURL=MobileCanva.styles.js.map

package/build/components/navigation/MobileCanva/MobileCanva.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCanva.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/MobileCanva.styles.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,WAAW,GAAI,GAAG,CAAC;AAChC,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC;AAChC,MAAM,CAAC,MAAM,aAAa,GAAI,GAAG,CAAC;AAClC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;AAC7B,MAAM,CAAC,MAAM,OAAO,GAAM,CAAC,CAAC;AAC5B,MAAM,CAAC,MAAM,OAAO,GAAM,CAAC,CAAC;AAE5B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,gBAAgB;IAChB,KAAK,EAAE;QACL,KAAK,EAAK,WAAW;QACrB,MAAM,EAAI,YAAY;QACtB,OAAO,EAAG,CAAC;QACX,GAAG,EAAO,CAAC;QACX,QAAQ,EAAE,QAAQ;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAU,CAAC;QACf,YAAY,EAAE,EAAE;QAChB,WAAW,EAAG,CAAC;QACf,QAAQ,EAAM,QAAQ;KACvB;IACD,gBAAgB,EAAE;QAChB,UAAU,EAAO,QAAQ;QACzB,cAAc,EAAG,QAAQ;QACzB,eAAe,EAAE,CAAC;KACnB;IACD,OAAO,EAAE;QACP,KAAK,EAAS,aAAa;QAC3B,MAAM,EAAQ,cAAc;QAC5B,YAAY,EAAE,CAAC;KAChB;IAED,wBAAwB;IACxB,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ;KACnB;IACD,OAAO,EAAE;QACP,aAAa,EAAG,KAAK;QACrB,cAAc,EAAE,cAAc;QAC9B,UAAU,EAAM,QAAQ;QACxB,MAAM,EAAU,EAAE;QAClB,iBAAiB,EAAE,CAAC;KACrB;IACD,UAAU,EAAE;QACV,OAAO,EAAS,CAAC;QACjB,UAAU,EAAM,QAAQ;QACxB,cAAc,EAAE,QAAQ;KACzB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAI,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,UAAU;KACvB;IACD,IAAI,EAAE;QACJ,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAM,CAAC;QACpB,GAAG,EAAgB,OAAO;KAC3B;IACD,GAAG,EAAE;QACH,aAAa,EAAE,KAAK;QACpB,GAAG,EAAY,OAAO;KACvB;IACD,GAAG,EAAE;QACH,IAAI,EAAY,CAAC;QACjB,MAAM,EAAU,UAAU;QAC1B,YAAY,EAAI,CAAC;QACjB,UAAU,EAAM,QAAQ;QACxB,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAK,MAAM;QACtB,YAAY,EAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACvC,aAAa,EAAG,GAAG;QACnB,YAAY,EAAI,CAAC;QACjB,SAAS,EAAO,CAAC;KAClB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,GAAG;KACV;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,CAAC;KACR;IACD,QAAQ,EAAE;QACR,QAAQ,EAAI,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,UAAU;KACvB;IACD,aAAa,EAAE;QACb,QAAQ,EAAI,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,UAAU;KACvB;CACF,CAAC,CAAC","sourcesContent":["/** Static layout styles for MobileCanva — colors injected via useTheme() */\nimport { StyleSheet } from 'react-native';\n\nexport const SHELL_WIDTH  = 390;\nexport const SHELL_HEIGHT = 844;\nexport const HOMEBAR_WIDTH  = 144;\nexport const HOMEBAR_HEIGHT = 5;\nexport const KEY_HEIGHT = 42;\nexport const KEY_GAP    = 4;\nexport const ROW_GAP    = 8;\n\nexport const styles = StyleSheet.create({\n  // --- Shell ---\n  shell: {\n    width:    SHELL_WIDTH,\n    height:   SHELL_HEIGHT,\n    padding:  6,\n    gap:      6,\n    overflow: 'hidden',\n  },\n  content: {\n    flex:         1,\n    borderRadius: 12,\n    borderWidth:  1,\n    overflow:     'hidden',\n  },\n  homebarContainer: {\n    alignItems:      'center',\n    justifyContent:  'center',\n    paddingVertical: 8,\n  },\n  homebar: {\n    width:        HOMEBAR_WIDTH,\n    height:       HOMEBAR_HEIGHT,\n    borderRadius: 3,\n  },\n\n  // --- BoardKeyboard ---\n  board: {\n    overflow: 'hidden',\n  },\n  toolbar: {\n    flexDirection:  'row',\n    justifyContent: 'space-around',\n    alignItems:     'center',\n    height:         44,\n    paddingHorizontal: 8,\n  },\n  toolbarBtn: {\n    padding:        8,\n    alignItems:     'center',\n    justifyContent: 'center',\n  },\n  gifLabel: {\n    fontSize:   12,\n    fontWeight: '700',\n    fontFamily: 'Urbanist',\n  },\n  rows: {\n    paddingHorizontal: 4,\n    paddingBottom:     8,\n    gap:               ROW_GAP,\n  },\n  row: {\n    flexDirection: 'row',\n    gap:           KEY_GAP,\n  },\n  key: {\n    flex:           1,\n    height:         KEY_HEIGHT,\n    borderRadius:   5,\n    alignItems:     'center',\n    justifyContent: 'center',\n    shadowColor:    '#000',\n    shadowOffset:   { width: 0, height: 1 },\n    shadowOpacity:  0.2,\n    shadowRadius:   0,\n    elevation:      2,\n  },\n  keyWide: {\n    flex: 1.5,\n  },\n  keySpace: {\n    flex: 4,\n  },\n  keyLabel: {\n    fontSize:   16,\n    fontWeight: '400',\n    fontFamily: 'Urbanist',\n  },\n  keyLabelSmall: {\n    fontSize:   12,\n    fontWeight: '500',\n    fontFamily: 'Urbanist',\n  },\n});"]}

package/build/components/navigation/MobileCanva/MobileCanva.types.d.ts

@@ -0,0 +1,21 @@
+/** Type definitions for the MobileCanva component */
+import type { ReactNode } from 'react';
+import type { TabBarProps } from '../TabBar';
+export type MobileCanvaVariant = 'default' | 'board';
+export interface MobileCanvaProps {
+    /** Shell variant — default or with Android keyboard */
+    variant?: MobileCanvaVariant;
+    /** Content rendered inside the white content area */
+    children?: ReactNode;
+    /** Override the inner TabBar — defaults to [Table, MapTrifold, Bell, User] */
+    tabBarProps?: TabBarProps;
+    /** Show the iOS home indicator bar */
+    showHomebar?: boolean;
+    /** Called when a letter key is pressed (board variant) */
+    onKeyPress?: (key: string) => void;
+    /** Called when backspace is pressed (board variant) */
+    onBackspace?: () => void;
+    /** Called when send is pressed (board variant) */
+    onSend?: () => void;
+}
+//# sourceMappingURL=MobileCanva.types.d.ts.map

package/build/components/navigation/MobileCanva/MobileCanva.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCanva.types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/MobileCanva.types.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/build/components/navigation/MobileCanva/MobileCanva.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MobileCanva.types.js.map

package/build/components/navigation/MobileCanva/MobileCanva.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCanva.types.js","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/MobileCanva.types.ts"],"names":[],"mappings":"","sourcesContent":["/** Type definitions for the MobileCanva component */\nimport type { ReactNode } from 'react';\nimport type { TabBarProps } from '../TabBar';\n\nexport type MobileCanvaVariant = 'default' | 'board';\n\nexport interface MobileCanvaProps {\n  /** Shell variant — default or with Android keyboard */\n  variant?: MobileCanvaVariant;\n  /** Content rendered inside the white content area */\n  children?: ReactNode;\n  /** Override the inner TabBar — defaults to [Table, MapTrifold, Bell, User] */\n  tabBarProps?: TabBarProps;\n  /** Show the iOS home indicator bar */\n  showHomebar?: boolean;\n  /** Called when a letter key is pressed (board variant) */\n  onKeyPress?: (key: string) => void;\n  /** Called when backspace is pressed (board variant) */\n  onBackspace?: () => void;\n  /** Called when send is pressed (board variant) */\n  onSend?: () => void;\n}"]}

package/build/components/navigation/MobileCanva/index.d.ts

@@ -0,0 +1,3 @@
+export { MobileCanva } from './MobileCanva';
+export type { MobileCanvaProps } from './MobileCanva';
+//# sourceMappingURL=index.d.ts.map

package/build/components/navigation/MobileCanva/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/build/components/navigation/MobileCanva/index.js

@@ -0,0 +1,2 @@
+export { MobileCanva } from './MobileCanva';
+//# sourceMappingURL=index.js.map

package/build/components/navigation/MobileCanva/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/MobileCanva/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { MobileCanva } from './MobileCanva';\nexport type { MobileCanvaProps } from './MobileCanva';"]}

package/build/components/navigation/PageNav/PageNav.d.ts

@@ -0,0 +1,46 @@
+/**
+ * PageNav — page-level navigation header.
+ *
+ * White background, title + icon centered, ghost icon-only buttons.
+ * Optional slot below the header row for tabs or subtitles.
+ */
+import React from 'react';
+import type { ButtonVariant } from '../../Button';
+export interface RightAction {
+    /** Icon element for the button */
+    icon: React.ReactElement;
+    /** Callback on press */
+    onPress: () => void;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+}
+export interface PageNavProps {
+    /** Page title — centered in the header */
+    title?: string;
+    /** Title size — 's' (16px), 'm' (18px), 'l' (20px, default) */
+    titleSize?: 's' | 'm' | 'l';
+    /** Optional Phosphor icon shown left of the title */
+    titleIcon?: React.ReactElement;
+    /**
+     * Left action buttons — rendered left to right (first item = far left).
+     * Each item: { icon, onPress }.
+     */
+    leftActions?: RightAction[];
+    /**
+     * Right action buttons — rendered right to left (first item = far right).
+     * Each item: { icon, onPress }.
+     */
+    rightActions?: RightAction[];
+    /**
+     * Variant applied to all action buttons (back + right actions).
+     * Defaults to 'ghost'.
+     */
+    buttonVariant?: ButtonVariant;
+    /** Optional content rendered after the title in the centered title group */
+    titleChildren?: React.ReactNode;
+    /** Optional content below the header row (34px slot) */
+    children?: React.ReactNode;
+}
+export declare function PageNav({ title, titleIcon, leftActions, rightActions, buttonVariant, titleSize, titleChildren, children, }: PageNavProps): React.JSX.Element;
+export default PageNav;
+//# sourceMappingURL=PageNav.d.ts.map

package/build/components/navigation/PageNav/PageNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageNav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/PageNav/PageNav.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAOlD,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAuB,EACvB,SAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,YAAY,qBA8Dd;AAED,eAAe,OAAO,CAAC"}

package/build/components/navigation/PageNav/PageNav.js

@@ -0,0 +1,48 @@
+/**
+ * PageNav — page-level navigation header.
+ *
+ * White background, title + icon centered, ghost icon-only buttons.
+ * Optional slot below the header row for tabs or subtitles.
+ */
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useTheme } from '../../../context/ThemeContext';
+import { Button } from '../../Button';
+import { styles } from './PageNav.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function PageNav({ title, titleIcon, leftActions, rightActions, buttonVariant = 'ghost', titleSize = 'l', titleChildren, children, }) {
+    const { colors, fontFamily } = useTheme();
+    return (<View style={styles.container}>
+      {/* ── Header row ─────────────────────────────────────────── */}
+      <View style={styles.headerRow}>
+
+        {/* Left action buttons — absolute, first item = far left */}
+        {leftActions?.map((action, index) => (<View key={index} style={[styles.btnLeft, { left: index * 40 }]}>
+            <Button variant={buttonVariant} content="icon-only-rounded" size="M" iconLeft={action.icon} onPress={action.onPress} accessibilityLabel={action.accessibilityLabel}/>
+          </View>))}
+
+        {/* Centered title group */}
+        <View style={styles.titleGroup}>
+          {titleIcon != null && titleIcon}
+          {title != null && (<Text style={[styles.title, titleSize === 's' ? styles.titleS : titleSize === 'm' ? styles.titleM : styles.titleL, { color: colors.text.primary, fontFamily }]}>
+              {title}
+            </Text>)}
+          {titleChildren}
+        </View>
+
+        {/* Right action buttons — absolute, first item = far right */}
+        {rightActions?.map((action, index) => (<View key={index} style={[styles.btnRight, { right: index * 40 }]}>
+            <Button variant={buttonVariant} content="icon-only-rounded" size="M" iconLeft={action.icon} onPress={action.onPress} accessibilityLabel={action.accessibilityLabel}/>
+          </View>))}
+      </View>
+
+      {/* ── Optional slot below header ──────────────────────────── */}
+      {children != null && (<View style={styles.slot}>
+          {children}
+        </View>)}
+    </View>);
+}
+export default PageNav;
+//# sourceMappingURL=PageNav.js.map

package/build/components/navigation/PageNav/PageNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageNav.js","sourceRoot":"","sources":["../../../../src/components/navigation/PageNav/PageNav.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * PageNav — page-level navigation header.\n *\n * White background, title + icon centered, ghost icon-only buttons.\n * Optional slot below the header row for tabs or subtitles.\n */\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport { useTheme } from '../../../context/ThemeContext';\nimport { Button } from '../../Button';\nimport type { ButtonVariant } from '../../Button';\nimport { styles } from './PageNav.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface RightAction {\n  /** Icon element for the button */\n  icon: React.ReactElement;\n  /** Callback on press */\n  onPress: () => void;\n  /** Accessibility label for screen readers */\n  accessibilityLabel?: string;\n}\n\nexport interface PageNavProps {\n  /** Page title — centered in the header */\n  title?: string;\n  /** Title size — 's' (16px), 'm' (18px), 'l' (20px, default) */\n  titleSize?: 's' | 'm' | 'l';\n  /** Optional Phosphor icon shown left of the title */\n  titleIcon?: React.ReactElement;\n  /**\n   * Left action buttons — rendered left to right (first item = far left).\n   * Each item: { icon, onPress }.\n   */\n  leftActions?: RightAction[];\n  /**\n   * Right action buttons — rendered right to left (first item = far right).\n   * Each item: { icon, onPress }.\n   */\n  rightActions?: RightAction[];\n  /**\n   * Variant applied to all action buttons (back + right actions).\n   * Defaults to 'ghost'.\n   */\n  buttonVariant?: ButtonVariant;\n  /** Optional content rendered after the title in the centered title group */\n  titleChildren?: React.ReactNode;\n  /** Optional content below the header row (34px slot) */\n  children?: React.ReactNode;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function PageNav({\n  title,\n  titleIcon,\n  leftActions,\n  rightActions,\n  buttonVariant = 'ghost',\n  titleSize = 'l',\n  titleChildren,\n  children,\n}: PageNavProps) {\n  const { colors, fontFamily } = useTheme();\n\n  return (\n    <View style={styles.container}>\n      {/* ── Header row ─────────────────────────────────────────── */}\n      <View style={styles.headerRow}>\n\n        {/* Left action buttons — absolute, first item = far left */}\n        {leftActions?.map((action, index) => (\n          <View\n            key={index}\n            style={[styles.btnLeft, { left: index * 40 }]}\n          >\n            <Button\n              variant={buttonVariant}\n              content=\"icon-only-rounded\"\n              size=\"M\"\n              iconLeft={action.icon}\n              onPress={action.onPress}\n              accessibilityLabel={action.accessibilityLabel}\n            />\n          </View>\n        ))}\n\n        {/* Centered title group */}\n        <View style={styles.titleGroup}>\n          {titleIcon != null && titleIcon}\n          {title != null && (\n            <Text style={[styles.title, titleSize === 's' ? styles.titleS : titleSize === 'm' ? styles.titleM : styles.titleL, { color: colors.text.primary, fontFamily }]}>\n              {title}\n            </Text>\n          )}\n          {titleChildren}\n        </View>\n\n        {/* Right action buttons — absolute, first item = far right */}\n        {rightActions?.map((action, index) => (\n          <View\n            key={index}\n            style={[styles.btnRight, { right: index * 40 }]}\n          >\n            <Button\n              variant={buttonVariant}\n              content=\"icon-only-rounded\"\n              size=\"M\"\n              iconLeft={action.icon}\n              onPress={action.onPress}\n              accessibilityLabel={action.accessibilityLabel}\n            />\n          </View>\n        ))}\n      </View>\n\n      {/* ── Optional slot below header ──────────────────────────── */}\n      {children != null && (\n        <View style={styles.slot}>\n          {children}\n        </View>\n      )}\n    </View>\n  );\n}\n\nexport default PageNav;"]}