@ankhorage/surface 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ankhorage/surface
 
+## 1.1.0
+
+### Minor Changes
+
+- e7ee603: add router-agnostic chrome primitives
+
 ## 1.0.3
 
 ### Patch Changes

package/README.md

@@ -39,3 +39,10 @@ import { Box, Text } from '@ankhorage/surface';
 ## 🧠 Why this exists
 
 Bridges the gap between raw primitives and full UI frameworks.
+
+## 🧭 Navigation chrome primitives
+
+Surface includes **router-agnostic navigation chrome** building blocks (tab bars, drawer lists, route items).
+
+- These components **do not** implement routing, route state, deep linking, or screen switching.
+- Use **Expo Router / React Navigation** for navigation mechanics, and render UI with Surface by passing `active`, `disabled`, and `onPress`.

package/dist/components/navigation/DrawerNavigation.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DrawerNavigationProps } from './types';
+export declare function DrawerNavigation({ items, header, footer, compact, testID, }: DrawerNavigationProps): React.JSX.Element;
+//# sourceMappingURL=DrawerNavigation.d.ts.map

package/dist/components/navigation/DrawerNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/DrawerNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAe,EACf,MAAM,GACP,EAAE,qBAAqB,qBAYvB"}

package/dist/components/navigation/DrawerNavigation.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Stack } from '../../layout';
+import { DrawerNavigationItem } from './DrawerNavigationItem';
+export function DrawerNavigation({ items, header, footer, compact = false, testID, }) {
+    return (<Stack gap={compact ? 's' : 'm'} testID={testID}>
+      {header}
+      <Stack gap={compact ? 'xs' : 's'}>
+        {items.map((item) => (<DrawerNavigationItem compact={compact} item={item} key={item.id} testID={testID}/>))}
+      </Stack>
+      {footer}
+    </Stack>);
+}
+//# sourceMappingURL=DrawerNavigation.js.map

package/dist/components/navigation/DrawerNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerNavigation.js","sourceRoot":"","sources":["../../../src/components/navigation/DrawerNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,GAAG,KAAK,EACf,MAAM,GACgB;IACtB,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC9C;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAC/B;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CACrF,CAAC,CACJ;MAAA,EAAE,KAAK,CACP;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../layout';\nimport { DrawerNavigationItem } from './DrawerNavigationItem';\nimport type { DrawerNavigationProps } from './types';\n\nexport function DrawerNavigation({\n  items,\n  header,\n  footer,\n  compact = false,\n  testID,\n}: DrawerNavigationProps) {\n  return (\n    <Stack gap={compact ? 's' : 'm'} testID={testID}>\n      {header}\n      <Stack gap={compact ? 'xs' : 's'}>\n        {items.map((item) => (\n          <DrawerNavigationItem compact={compact} item={item} key={item.id} testID={testID} />\n        ))}\n      </Stack>\n      {footer}\n    </Stack>\n  );\n}\n"]}

package/dist/components/navigation/DrawerNavigationItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DrawerNavigationItemProps } from './types';
+export declare function DrawerNavigationItem({ item, compact, testID }: DrawerNavigationItemProps): React.JSX.Element;
+//# sourceMappingURL=DrawerNavigationItem.d.ts.map

package/dist/components/navigation/DrawerNavigationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerNavigationItem.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/DrawerNavigationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzD,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,OAAe,EAAE,MAAM,EAAE,EAAE,yBAAyB,qBAWhG"}

package/dist/components/navigation/DrawerNavigationItem.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavigationItem } from './NavigationItem';
+export function DrawerNavigationItem({ item, compact = false, testID }) {
+    return (<NavigationItem compact={compact} item={{
+            ...item,
+            accessibilityRole: item.accessibilityRole ?? 'button',
+        }} testID={testID}/>);
+}
+//# sourceMappingURL=DrawerNavigationItem.js.map

package/dist/components/navigation/DrawerNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerNavigationItem.js","sourceRoot":"","sources":["../../../src/components/navigation/DrawerNavigationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,MAAM,UAAU,oBAAoB,CAAC,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,EAA6B;IAC/F,OAAO,CACL,CAAC,cAAc,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC;YACJ,GAAG,IAAI;YACP,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,IAAI,QAAQ;SACtD,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { NavigationItem } from './NavigationItem';\nimport type { DrawerNavigationItemProps } from './types';\n\nexport function DrawerNavigationItem({ item, compact = false, testID }: DrawerNavigationItemProps) {\n  return (\n    <NavigationItem\n      compact={compact}\n      item={{\n        ...item,\n        accessibilityRole: item.accessibilityRole ?? 'button',\n      }}\n      testID={testID}\n    />\n  );\n}\n"]}

package/dist/components/navigation/NavigationItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NavigationItemProps } from './types';
+export declare function NavigationItem({ item, compact, testID }: NavigationItemProps): React.JSX.Element;
+//# sourceMappingURL=NavigationItem.d.ts.map

package/dist/components/navigation/NavigationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/NavigationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,OAAe,EAAE,MAAM,EAAE,EAAE,mBAAmB,qBAiEpF"}

package/dist/components/navigation/NavigationItem.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+export function NavigationItem({ item, compact = false, testID }) {
+    const { theme } = useTheme();
+    const active = Boolean(item.active);
+    const disabled = Boolean(item.disabled);
+    const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
+    const resolvedAccessibilityState = resolveNavigationAccessibilityState(active, disabled, item.accessibilityState);
+    return (<ButtonBase accessibilityLabel={item.accessibilityLabel} accessibilityRole={item.accessibilityRole ?? 'button'} accessibilityState={resolvedAccessibilityState} disabled={disabled} onPress={item.onPress} testID={resolvedTestID}>
+      {(state) => {
+            const presentation = resolveNavigationItemPresentation(theme, {
+                active,
+                disabled,
+                state,
+            });
+            return (<Box px="m" py={compact ? 's' : 'm'} radius="m" style={{
+                    backgroundColor: presentation.backgroundColor,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    opacity: presentation.opacity,
+                }}>
+            {item.icon ? (<View style={{ marginRight: theme.spacing.s }}>
+                <Icon color={presentation.contentColor} name={item.icon.name} provider={item.icon.provider} size={compact ? 's' : 'm'}/>
+              </View>) : null}
+            <Box flex={1}>
+              <Text color={presentation.contentColor} numberOfLines={1} variant={compact ? 'bodySmall' : 'body'} weight="medium">
+                {item.label}
+              </Text>
+            </Box>
+            {item.badge ? <View style={{ marginLeft: theme.spacing.s }}>{item.badge}</View> : null}
+          </Box>);
+        }}
+    </ButtonBase>);
+}
+//# sourceMappingURL=NavigationItem.js.map

package/dist/components/navigation/NavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../src/components/navigation/NavigationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,mCAAmC,EAAE,iCAAiC,EAAE,MAAM,WAAW,CAAC;AAGnG,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,EAAuB;IACnF,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACzF,MAAM,0BAA0B,GAAG,mCAAmC,CACpE,MAAM,EACN,QAAQ,EACR,IAAI,CAAC,kBAAkB,CACxB,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,kBAAkB,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAC5C,iBAAiB,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,QAAQ,CAAC,CACtD,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,cAAc,CAAC,CAEvB;MAAA,CAAC,CAAC,KAAK,EAAE,EAAE;YACT,MAAM,YAAY,GAAG,iCAAiC,CAAC,KAAK,EAAE;gBAC5D,MAAM;gBACN,QAAQ;gBACR,KAAK;aACN,CAAC,CAAC;YAEH,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,GAAG,CACN,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CACxB,MAAM,CAAC,GAAG,CACV,KAAK,CAAC,CAAC;oBACL,eAAe,EAAE,YAAY,CAAC,eAAe;oBAC7C,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,YAAY,CAAC,OAAO;iBAC9B,CAAC,CAEF;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAC5C;gBAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CACjC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CACrB,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC7B,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAE9B;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;YAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACX;cAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CACjC,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CACxC,MAAM,CAAC,QAAQ,CAEf;gBAAA,CAAC,IAAI,CAAC,KAAK,CACb;cAAA,EAAE,IAAI,CACR;YAAA,EAAE,GAAG,CACL;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CACxF;UAAA,EAAE,GAAG,CAAC,CACP,CAAC;QACJ,CAAC,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Box } from '../../layout';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { Icon } from '../../primitives/icon';\nimport { Text } from '../../primitives/text';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';\nimport type { NavigationItemProps } from './types';\n\nexport function NavigationItem({ item, compact = false, testID }: NavigationItemProps) {\n  const { theme } = useTheme();\n  const active = Boolean(item.active);\n  const disabled = Boolean(item.disabled);\n  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);\n  const resolvedAccessibilityState = resolveNavigationAccessibilityState(\n    active,\n    disabled,\n    item.accessibilityState,\n  );\n\n  return (\n    <ButtonBase\n      accessibilityLabel={item.accessibilityLabel}\n      accessibilityRole={item.accessibilityRole ?? 'button'}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={disabled}\n      onPress={item.onPress}\n      testID={resolvedTestID}\n    >\n      {(state) => {\n        const presentation = resolveNavigationItemPresentation(theme, {\n          active,\n          disabled,\n          state,\n        });\n\n        return (\n          <Box\n            px=\"m\"\n            py={compact ? 's' : 'm'}\n            radius=\"m\"\n            style={{\n              backgroundColor: presentation.backgroundColor,\n              flexDirection: 'row',\n              alignItems: 'center',\n              opacity: presentation.opacity,\n            }}\n          >\n            {item.icon ? (\n              <View style={{ marginRight: theme.spacing.s }}>\n                <Icon\n                  color={presentation.contentColor}\n                  name={item.icon.name}\n                  provider={item.icon.provider}\n                  size={compact ? 's' : 'm'}\n                />\n              </View>\n            ) : null}\n            <Box flex={1}>\n              <Text\n                color={presentation.contentColor}\n                numberOfLines={1}\n                variant={compact ? 'bodySmall' : 'body'}\n                weight=\"medium\"\n              >\n                {item.label}\n              </Text>\n            </Box>\n            {item.badge ? <View style={{ marginLeft: theme.spacing.s }}>{item.badge}</View> : null}\n          </Box>\n        );\n      }}\n    </ButtonBase>\n  );\n}\n"]}

package/dist/components/navigation/NavigationList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NavigationListProps } from './types';
+export declare function NavigationList({ items, orientation, compact, testID, }: NavigationListProps): React.JSX.Element;
+//# sourceMappingURL=NavigationList.d.ts.map

package/dist/components/navigation/NavigationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAwB,EACxB,OAAe,EACf,MAAM,GACP,EAAE,mBAAmB,qBAYrB"}

package/dist/components/navigation/NavigationList.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Stack } from '../../layout';
+import { NavigationItem } from './NavigationItem';
+export function NavigationList({ items, orientation = 'vertical', compact = false, testID, }) {
+    return (<Stack direction={orientation === 'horizontal' ? 'row' : 'column'} gap={compact ? 'xs' : 's'} testID={testID}>
+      {items.map((item) => (<NavigationItem compact={compact} item={item} key={item.id} testID={testID}/>))}
+    </Stack>);
+}
+//# sourceMappingURL=NavigationList.js.map

package/dist/components/navigation/NavigationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/navigation/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,GAAG,UAAU,EACxB,OAAO,GAAG,KAAK,EACf,MAAM,GACc;IACpB,OAAO,CACL,CAAC,KAAK,CACJ,SAAS,CAAC,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC3D,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAC1B,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAC/E,CAAC,CACJ;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../layout';\nimport { NavigationItem } from './NavigationItem';\nimport type { NavigationListProps } from './types';\n\nexport function NavigationList({\n  items,\n  orientation = 'vertical',\n  compact = false,\n  testID,\n}: NavigationListProps) {\n  return (\n    <Stack\n      direction={orientation === 'horizontal' ? 'row' : 'column'}\n      gap={compact ? 'xs' : 's'}\n      testID={testID}\n    >\n      {items.map((item) => (\n        <NavigationItem compact={compact} item={item} key={item.id} testID={testID} />\n      ))}\n    </Stack>\n  );\n}\n"]}

package/dist/components/navigation/TabBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TabBarProps } from './types';
+export declare function TabBar({ items, compact, testID }: TabBarProps): React.JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/components/navigation/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,OAAe,EAAE,MAAM,EAAE,EAAE,WAAW,qBAiBrE"}

package/dist/components/navigation/TabBar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box } from '../../layout';
+import { useTheme } from '../../theme/ThemeContext';
+import { TabBarItem } from './TabBarItem';
+export function TabBar({ items, compact = false, testID }) {
+    const { theme } = useTheme();
+    return (<Box style={{
+            flexDirection: 'row',
+            borderTopColor: theme.semantics.border.default,
+            borderTopWidth: 1,
+        }} testID={testID}>
+      {items.map((item) => (<TabBarItem compact={compact} item={item} key={item.id} testID={testID}/>))}
+    </Box>);
+}
+//# sourceMappingURL=TabBar.js.map

package/dist/components/navigation/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../src/components/navigation/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,EAAe;IACpE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;YAC9C,cAAc,EAAE,CAAC;SAClB,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAC3E,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../layout';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { TabBarItem } from './TabBarItem';\nimport type { TabBarProps } from './types';\n\nexport function TabBar({ items, compact = false, testID }: TabBarProps) {\n  const { theme } = useTheme();\n\n  return (\n    <Box\n      style={{\n        flexDirection: 'row',\n        borderTopColor: theme.semantics.border.default,\n        borderTopWidth: 1,\n      }}\n      testID={testID}\n    >\n      {items.map((item) => (\n        <TabBarItem compact={compact} item={item} key={item.id} testID={testID} />\n      ))}\n    </Box>\n  );\n}\n"]}

package/dist/components/navigation/TabBarItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TabBarItemProps } from './types';
+export declare function TabBarItem({ item, compact, testID }: TabBarItemProps): React.JSX.Element;
+//# sourceMappingURL=TabBarItem.d.ts.map

package/dist/components/navigation/TabBarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarItem.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/TabBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,OAAe,EAAE,MAAM,EAAE,EAAE,eAAe,qBAsE5E"}

package/dist/components/navigation/TabBarItem.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+export function TabBarItem({ item, compact = false, testID }) {
+    const { theme } = useTheme();
+    const active = Boolean(item.active);
+    const disabled = Boolean(item.disabled);
+    const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
+    const resolvedAccessibilityState = resolveNavigationAccessibilityState(active, disabled, item.accessibilityState);
+    return (<ButtonBase accessibilityLabel={item.accessibilityLabel} accessibilityRole={item.accessibilityRole ?? 'tab'} accessibilityState={resolvedAccessibilityState} disabled={disabled} onPress={item.onPress} style={{ flex: 1 }} testID={resolvedTestID}>
+      {(state) => {
+            const presentation = resolveNavigationItemPresentation(theme, {
+                active,
+                disabled,
+                state,
+            });
+            const contentColor = disabled
+                ? theme.semantics.content.muted
+                : active
+                    ? theme.semantics.action.primary.base
+                    : theme.semantics.content.muted;
+            return (<Box px="m" py={compact ? 's' : 'm'} style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: presentation.backgroundColor,
+                    opacity: presentation.opacity,
+                }}>
+            {item.icon ? (<View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
+                <Icon color={contentColor} name={item.icon.name} provider={item.icon.provider} size={compact ? 's' : 'm'}/>
+              </View>) : null}
+            {item.label ? (<Text color={contentColor} numberOfLines={1} variant={compact ? 'bodySmall' : 'label'} weight="medium">
+                {item.label}
+              </Text>) : null}
+          </Box>);
+        }}
+    </ButtonBase>);
+}
+//# sourceMappingURL=TabBarItem.js.map

package/dist/components/navigation/TabBarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarItem.js","sourceRoot":"","sources":["../../../src/components/navigation/TabBarItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Box } from '../../layout';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { Icon } from '../../primitives/icon';\nimport { Text } from '../../primitives/text';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';\nimport type { TabBarItemProps } from './types';\n\nexport function TabBarItem({ item, compact = false, testID }: TabBarItemProps) {\n  const { theme } = useTheme();\n  const active = Boolean(item.active);\n  const disabled = Boolean(item.disabled);\n  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);\n  const resolvedAccessibilityState = resolveNavigationAccessibilityState(\n    active,\n    disabled,\n    item.accessibilityState,\n  );\n\n  return (\n    <ButtonBase\n      accessibilityLabel={item.accessibilityLabel}\n      accessibilityRole={item.accessibilityRole ?? 'tab'}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={disabled}\n      onPress={item.onPress}\n      style={{ flex: 1 }}\n      testID={resolvedTestID}\n    >\n      {(state) => {\n        const presentation = resolveNavigationItemPresentation(theme, {\n          active,\n          disabled,\n          state,\n        });\n        const contentColor = disabled\n          ? theme.semantics.content.muted\n          : active\n            ? theme.semantics.action.primary.base\n            : theme.semantics.content.muted;\n\n        return (\n          <Box\n            px=\"m\"\n            py={compact ? 's' : 'm'}\n            style={{\n              flex: 1,\n              alignItems: 'center',\n              justifyContent: 'center',\n              backgroundColor: presentation.backgroundColor,\n              opacity: presentation.opacity,\n            }}\n          >\n            {item.icon ? (\n              <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>\n                <Icon\n                  color={contentColor}\n                  name={item.icon.name}\n                  provider={item.icon.provider}\n                  size={compact ? 's' : 'm'}\n                />\n              </View>\n            ) : null}\n            {item.label ? (\n              <Text\n                color={contentColor}\n                numberOfLines={1}\n                variant={compact ? 'bodySmall' : 'label'}\n                weight=\"medium\"\n              >\n                {item.label}\n              </Text>\n            ) : null}\n          </Box>\n        );\n      }}\n    </ButtonBase>\n  );\n}\n"]}

package/dist/components/navigation/helpers.d.ts

@@ -0,0 +1,15 @@
+import type { AccessibilityState } from 'react-native';
+import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
+import type { SurfaceTheme } from '../../theme/types';
+export declare function resolveNavigationAccessibilityState(active: boolean, disabled: boolean, accessibilityState?: AccessibilityState): AccessibilityState;
+export interface ResolvedNavigationItemPresentation {
+    backgroundColor: string;
+    contentColor: string;
+    opacity: number;
+}
+export declare function resolveNavigationItemPresentation(theme: SurfaceTheme, { active, disabled, state, }: {
+    active: boolean;
+    disabled: boolean;
+    state: InteractionState;
+}): ResolvedNavigationItemPresentation;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/navigation/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,OAAO,EACjB,kBAAkB,CAAC,EAAE,kBAAkB,GACtC,kBAAkB,CAYpB;AAED,MAAM,WAAW,kCAAkC;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,YAAY,EACnB,EACE,MAAM,EACN,QAAQ,EACR,KAAK,GACN,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC;CACzB,GACA,kCAAkC,CA+BpC"}

package/dist/components/navigation/helpers.js

@@ -0,0 +1,40 @@
+export function resolveNavigationAccessibilityState(active, disabled, accessibilityState) {
+    const resolved = { ...(accessibilityState ?? {}) };
+    if (active) {
+        resolved.selected = true;
+    }
+    if (disabled) {
+        resolved.disabled = true;
+    }
+    return resolved;
+}
+export function resolveNavigationItemPresentation(theme, { active, disabled, state, }) {
+    const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;
+    const opacity = disabled ? 0.72 : 1;
+    const contentColor = disabled
+        ? theme.semantics.content.muted
+        : active
+            ? theme.semantics.action.primary.base
+            : theme.semantics.content.default;
+    if (active) {
+        return {
+            backgroundColor: interactionState.pressed
+                ? theme.semantics.action.primary.softActive
+                : interactionState.hovered
+                    ? theme.semantics.action.primary.softHover
+                    : theme.semantics.action.primary.softBg,
+            contentColor,
+            opacity,
+        };
+    }
+    return {
+        backgroundColor: interactionState.pressed
+            ? theme.semantics.neutral.surfaceActive
+            : interactionState.hovered
+                ? theme.semantics.neutral.surfaceHover
+                : 'transparent',
+        contentColor,
+        opacity,
+    };
+}
+//# sourceMappingURL=helpers.js.map

package/dist/components/navigation/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/navigation/helpers.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,mCAAmC,CACjD,MAAe,EACf,QAAiB,EACjB,kBAAuC;IAEvC,MAAM,QAAQ,GAAuB,EAAE,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,CAAC;IAEvE,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAQD,MAAM,UAAU,iCAAiC,CAC/C,KAAmB,EACnB,EACE,MAAM,EACN,QAAQ,EACR,KAAK,GAKN;IAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzF,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;QAC/B,CAAC,CAAC,MAAM;YACN,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;YACrC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;IAEtC,IAAI,MAAM,EAAE,CAAC;QACX,OAAO;YACL,eAAe,EAAE,gBAAgB,CAAC,OAAO;gBACvC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU;gBAC3C,CAAC,CAAC,gBAAgB,CAAC,OAAO;oBACxB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS;oBAC1C,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;YAC3C,YAAY;YACZ,OAAO;SACR,CAAC;IACJ,CAAC;IAED,OAAO;QACL,eAAe,EAAE,gBAAgB,CAAC,OAAO;YACvC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;YACvC,CAAC,CAAC,gBAAgB,CAAC,OAAO;gBACxB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;gBACtC,CAAC,CAAC,aAAa;QACnB,YAAY;QACZ,OAAO;KACR,CAAC;AACJ,CAAC","sourcesContent":["import type { AccessibilityState } from 'react-native';\n\nimport type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';\nimport type { SurfaceTheme } from '../../theme/types';\n\nexport function resolveNavigationAccessibilityState(\n  active: boolean,\n  disabled: boolean,\n  accessibilityState?: AccessibilityState,\n): AccessibilityState {\n  const resolved: AccessibilityState = { ...(accessibilityState ?? {}) };\n\n  if (active) {\n    resolved.selected = true;\n  }\n\n  if (disabled) {\n    resolved.disabled = true;\n  }\n\n  return resolved;\n}\n\nexport interface ResolvedNavigationItemPresentation {\n  backgroundColor: string;\n  contentColor: string;\n  opacity: number;\n}\n\nexport function resolveNavigationItemPresentation(\n  theme: SurfaceTheme,\n  {\n    active,\n    disabled,\n    state,\n  }: {\n    active: boolean;\n    disabled: boolean;\n    state: InteractionState;\n  },\n): ResolvedNavigationItemPresentation {\n  const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;\n\n  const opacity = disabled ? 0.72 : 1;\n  const contentColor = disabled\n    ? theme.semantics.content.muted\n    : active\n      ? theme.semantics.action.primary.base\n      : theme.semantics.content.default;\n\n  if (active) {\n    return {\n      backgroundColor: interactionState.pressed\n        ? theme.semantics.action.primary.softActive\n        : interactionState.hovered\n          ? theme.semantics.action.primary.softHover\n          : theme.semantics.action.primary.softBg,\n      contentColor,\n      opacity,\n    };\n  }\n\n  return {\n    backgroundColor: interactionState.pressed\n      ? theme.semantics.neutral.surfaceActive\n      : interactionState.hovered\n        ? theme.semantics.neutral.surfaceHover\n        : 'transparent',\n    contentColor,\n    opacity,\n  };\n}\n"]}

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,8 @@
+export { DrawerNavigation } from './DrawerNavigation';
+export { DrawerNavigationItem } from './DrawerNavigationItem';
+export { NavigationItem } from './NavigationItem';
+export { NavigationList } from './NavigationList';
+export { TabBar } from './TabBar';
+export { TabBarItem } from './TabBarItem';
+export type { DrawerNavigationItemProps, DrawerNavigationProps, NavigationItemIcon, NavigationItemProps, NavigationItemSpec, NavigationListProps, TabBarItemProps, TabBarProps, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,WAAW,GACZ,MAAM,SAAS,CAAC"}

package/dist/components/navigation/index.js

@@ -0,0 +1,7 @@
+export { DrawerNavigation } from './DrawerNavigation';
+export { DrawerNavigationItem } from './DrawerNavigationItem';
+export { NavigationItem } from './NavigationItem';
+export { NavigationList } from './NavigationList';
+export { TabBar } from './TabBar';
+export { TabBarItem } from './TabBarItem';
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { DrawerNavigation } from './DrawerNavigation';\nexport { DrawerNavigationItem } from './DrawerNavigationItem';\nexport { NavigationItem } from './NavigationItem';\nexport { NavigationList } from './NavigationList';\nexport { TabBar } from './TabBar';\nexport { TabBarItem } from './TabBarItem';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './types';\n"]}

package/dist/components/navigation/types.d.ts

@@ -0,0 +1,51 @@
+import type React from 'react';
+import type { AccessibilityRole, AccessibilityState } from 'react-native';
+import type { IconProps } from '../../primitives/icon';
+export type NavigationItemIcon = Pick<IconProps, 'name' | 'provider'>;
+export interface NavigationItemSpec {
+    id: string;
+    label: React.ReactNode;
+    icon?: NavigationItemIcon;
+    badge?: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    onPress?: (() => void) | undefined;
+    accessibilityLabel?: string;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityState?: AccessibilityState;
+    testID?: string;
+}
+export interface NavigationItemProps {
+    item: NavigationItemSpec;
+    compact?: boolean;
+    testID?: string;
+}
+export interface NavigationListProps {
+    items: readonly NavigationItemSpec[];
+    orientation?: 'vertical' | 'horizontal';
+    compact?: boolean;
+    testID?: string;
+}
+export interface TabBarProps {
+    items: readonly NavigationItemSpec[];
+    compact?: boolean;
+    testID?: string;
+}
+export interface TabBarItemProps {
+    item: NavigationItemSpec;
+    compact?: boolean;
+    testID?: string;
+}
+export interface DrawerNavigationProps {
+    items: readonly NavigationItemSpec[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    compact?: boolean;
+    testID?: string;
+}
+export interface DrawerNavigationItemProps {
+    item: NavigationItemSpec;
+    compact?: boolean;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;AAEtE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/navigation/types.js

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

package/dist/components/navigation/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/navigation/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { AccessibilityRole, AccessibilityState } from 'react-native';\n\nimport type { IconProps } from '../../primitives/icon';\n\nexport type NavigationItemIcon = Pick<IconProps, 'name' | 'provider'>;\n\nexport interface NavigationItemSpec {\n  id: string;\n  label: React.ReactNode;\n  icon?: NavigationItemIcon;\n  badge?: React.ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  onPress?: (() => void) | undefined;\n  accessibilityLabel?: string;\n  accessibilityRole?: AccessibilityRole;\n  accessibilityState?: AccessibilityState;\n  testID?: string;\n}\n\nexport interface NavigationItemProps {\n  item: NavigationItemSpec;\n  compact?: boolean;\n  testID?: string;\n}\n\nexport interface NavigationListProps {\n  items: readonly NavigationItemSpec[];\n  orientation?: 'vertical' | 'horizontal';\n  compact?: boolean;\n  testID?: string;\n}\n\nexport interface TabBarProps {\n  items: readonly NavigationItemSpec[];\n  compact?: boolean;\n  testID?: string;\n}\n\nexport interface TabBarItemProps {\n  item: NavigationItemSpec;\n  compact?: boolean;\n  testID?: string;\n}\n\nexport interface DrawerNavigationProps {\n  items: readonly NavigationItemSpec[];\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  compact?: boolean;\n  testID?: string;\n}\n\nexport interface DrawerNavigationItemProps {\n  item: NavigationItemSpec;\n  compact?: boolean;\n  testID?: string;\n}\n"]}

package/dist/index.d.ts

@@ -22,6 +22,8 @@ export type { MenuItem, MenuProps } from './components/menu';
 export { Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
+export type { DrawerNavigationItemProps, DrawerNavigationProps, NavigationItemIcon, NavigationItemProps, NavigationItemSpec, NavigationListProps, TabBarItemProps, TabBarProps, } from './components/navigation';
+export { DrawerNavigation, DrawerNavigationItem, NavigationItem, NavigationList, TabBar, TabBarItem, } from './components/navigation';
 export type { RadioProps } from './components/radio';
 export { Radio } from './components/radio';
 export type { SwitchProps } from './components/switch';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -10,6 +10,7 @@ export { Label } from './components/label';
 export { ListItem } from './components/list-item';
 export { Menu } from './components/menu';
 export { Modal } from './components/modal';
+export { DrawerNavigation, DrawerNavigationItem, NavigationItem, NavigationList, TabBar, TabBarItem, } from './components/navigation';
 export { Radio } from './components/radio';
 export { Switch } from './components/switch';
 export { Tab, TabList, TabPanel, Tabs } from './components/tabs';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastTone } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastTone } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/components/navigation/DrawerNavigation.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Stack } from '../../layout';
+import { DrawerNavigationItem } from './DrawerNavigationItem';
+import type { DrawerNavigationProps } from './types';
+
+export function DrawerNavigation({
+  items,
+  header,
+  footer,
+  compact = false,
+  testID,
+}: DrawerNavigationProps) {
+  return (
+    <Stack gap={compact ? 's' : 'm'} testID={testID}>
+      {header}
+      <Stack gap={compact ? 'xs' : 's'}>
+        {items.map((item) => (
+          <DrawerNavigationItem compact={compact} item={item} key={item.id} testID={testID} />
+        ))}
+      </Stack>
+      {footer}
+    </Stack>
+  );
+}

package/src/components/navigation/DrawerNavigationItem.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { NavigationItem } from './NavigationItem';
+import type { DrawerNavigationItemProps } from './types';
+
+export function DrawerNavigationItem({ item, compact = false, testID }: DrawerNavigationItemProps) {
+  return (
+    <NavigationItem
+      compact={compact}
+      item={{
+        ...item,
+        accessibilityRole: item.accessibilityRole ?? 'button',
+      }}
+      testID={testID}
+    />
+  );
+}

package/src/components/navigation/NavigationItem.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+import type { NavigationItemProps } from './types';
+
+export function NavigationItem({ item, compact = false, testID }: NavigationItemProps) {
+  const { theme } = useTheme();
+  const active = Boolean(item.active);
+  const disabled = Boolean(item.disabled);
+  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
+  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
+    active,
+    disabled,
+    item.accessibilityState,
+  );
+
+  return (
+    <ButtonBase
+      accessibilityLabel={item.accessibilityLabel}
+      accessibilityRole={item.accessibilityRole ?? 'button'}
+      accessibilityState={resolvedAccessibilityState}
+      disabled={disabled}
+      onPress={item.onPress}
+      testID={resolvedTestID}
+    >
+      {(state) => {
+        const presentation = resolveNavigationItemPresentation(theme, {
+          active,
+          disabled,
+          state,
+        });
+
+        return (
+          <Box
+            px="m"
+            py={compact ? 's' : 'm'}
+            radius="m"
+            style={{
+              backgroundColor: presentation.backgroundColor,
+              flexDirection: 'row',
+              alignItems: 'center',
+              opacity: presentation.opacity,
+            }}
+          >
+            {item.icon ? (
+              <View style={{ marginRight: theme.spacing.s }}>
+                <Icon
+                  color={presentation.contentColor}
+                  name={item.icon.name}
+                  provider={item.icon.provider}
+                  size={compact ? 's' : 'm'}
+                />
+              </View>
+            ) : null}
+            <Box flex={1}>
+              <Text
+                color={presentation.contentColor}
+                numberOfLines={1}
+                variant={compact ? 'bodySmall' : 'body'}
+                weight="medium"
+              >
+                {item.label}
+              </Text>
+            </Box>
+            {item.badge ? <View style={{ marginLeft: theme.spacing.s }}>{item.badge}</View> : null}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/navigation/NavigationList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Stack } from '../../layout';
+import { NavigationItem } from './NavigationItem';
+import type { NavigationListProps } from './types';
+
+export function NavigationList({
+  items,
+  orientation = 'vertical',
+  compact = false,
+  testID,
+}: NavigationListProps) {
+  return (
+    <Stack
+      direction={orientation === 'horizontal' ? 'row' : 'column'}
+      gap={compact ? 'xs' : 's'}
+      testID={testID}
+    >
+      {items.map((item) => (
+        <NavigationItem compact={compact} item={item} key={item.id} testID={testID} />
+      ))}
+    </Stack>
+  );
+}

package/src/components/navigation/TabBar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Box } from '../../layout';
+import { useTheme } from '../../theme/ThemeContext';
+import { TabBarItem } from './TabBarItem';
+import type { TabBarProps } from './types';
+
+export function TabBar({ items, compact = false, testID }: TabBarProps) {
+  const { theme } = useTheme();
+
+  return (
+    <Box
+      style={{
+        flexDirection: 'row',
+        borderTopColor: theme.semantics.border.default,
+        borderTopWidth: 1,
+      }}
+      testID={testID}
+    >
+      {items.map((item) => (
+        <TabBarItem compact={compact} item={item} key={item.id} testID={testID} />
+      ))}
+    </Box>
+  );
+}

package/src/components/navigation/TabBarItem.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+import type { TabBarItemProps } from './types';
+
+export function TabBarItem({ item, compact = false, testID }: TabBarItemProps) {
+  const { theme } = useTheme();
+  const active = Boolean(item.active);
+  const disabled = Boolean(item.disabled);
+  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
+  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
+    active,
+    disabled,
+    item.accessibilityState,
+  );
+
+  return (
+    <ButtonBase
+      accessibilityLabel={item.accessibilityLabel}
+      accessibilityRole={item.accessibilityRole ?? 'tab'}
+      accessibilityState={resolvedAccessibilityState}
+      disabled={disabled}
+      onPress={item.onPress}
+      style={{ flex: 1 }}
+      testID={resolvedTestID}
+    >
+      {(state) => {
+        const presentation = resolveNavigationItemPresentation(theme, {
+          active,
+          disabled,
+          state,
+        });
+        const contentColor = disabled
+          ? theme.semantics.content.muted
+          : active
+            ? theme.semantics.action.primary.base
+            : theme.semantics.content.muted;
+
+        return (
+          <Box
+            px="m"
+            py={compact ? 's' : 'm'}
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: presentation.backgroundColor,
+              opacity: presentation.opacity,
+            }}
+          >
+            {item.icon ? (
+              <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
+                <Icon
+                  color={contentColor}
+                  name={item.icon.name}
+                  provider={item.icon.provider}
+                  size={compact ? 's' : 'm'}
+                />
+              </View>
+            ) : null}
+            {item.label ? (
+              <Text
+                color={contentColor}
+                numberOfLines={1}
+                variant={compact ? 'bodySmall' : 'label'}
+                weight="medium"
+              >
+                {item.label}
+              </Text>
+            ) : null}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/navigation/helpers.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+
+describe('navigation helpers', () => {
+  it('forces selected and disabled when active/disabled are true', () => {
+    expect(
+      resolveNavigationAccessibilityState(true, true, {
+        selected: false,
+        disabled: false,
+      }),
+    ).toEqual({
+      selected: true,
+      disabled: true,
+    });
+  });
+
+  it('preserves user-provided state when not active/disabled', () => {
+    expect(
+      resolveNavigationAccessibilityState(false, false, {
+        disabled: false,
+        selected: false,
+        expanded: true,
+      }),
+    ).toEqual({
+      disabled: false,
+      selected: false,
+      expanded: true,
+    });
+  });
+
+  it('resolves active presentation via primary soft semantics', () => {
+    const theme = createTheme();
+    const state = { pressed: false, hovered: true, focused: false, disabled: false };
+    const resolved = resolveNavigationItemPresentation(theme, {
+      active: true,
+      disabled: false,
+      state,
+    });
+
+    expect(resolved.backgroundColor).toBe(theme.semantics.action.primary.softHover);
+    expect(resolved.contentColor).toBe(theme.semantics.action.primary.base);
+    expect(resolved.opacity).toBe(1);
+  });
+
+  it('resolves inactive presentation via neutral hover/active semantics', () => {
+    const theme = createTheme();
+    const state = { pressed: true, hovered: true, focused: false, disabled: false };
+    const resolved = resolveNavigationItemPresentation(theme, {
+      active: false,
+      disabled: false,
+      state,
+    });
+
+    expect(resolved.backgroundColor).toBe(theme.semantics.neutral.surfaceActive);
+    expect(resolved.contentColor).toBe(theme.semantics.content.default);
+    expect(resolved.opacity).toBe(1);
+  });
+
+  it('ignores hover/pressed presentation when disabled', () => {
+    const theme = createTheme();
+    const state = { pressed: true, hovered: true, focused: false, disabled: true };
+    const resolved = resolveNavigationItemPresentation(theme, {
+      active: true,
+      disabled: true,
+      state,
+    });
+
+    expect(resolved.backgroundColor).toBe(theme.semantics.action.primary.softBg);
+    expect(resolved.contentColor).toBe(theme.semantics.content.muted);
+    expect(resolved.opacity).toBe(0.72);
+  });
+});

package/src/components/navigation/helpers.ts

@@ -0,0 +1,72 @@
+import type { AccessibilityState } from 'react-native';
+
+import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
+import type { SurfaceTheme } from '../../theme/types';
+
+export function resolveNavigationAccessibilityState(
+  active: boolean,
+  disabled: boolean,
+  accessibilityState?: AccessibilityState,
+): AccessibilityState {
+  const resolved: AccessibilityState = { ...(accessibilityState ?? {}) };
+
+  if (active) {
+    resolved.selected = true;
+  }
+
+  if (disabled) {
+    resolved.disabled = true;
+  }
+
+  return resolved;
+}
+
+export interface ResolvedNavigationItemPresentation {
+  backgroundColor: string;
+  contentColor: string;
+  opacity: number;
+}
+
+export function resolveNavigationItemPresentation(
+  theme: SurfaceTheme,
+  {
+    active,
+    disabled,
+    state,
+  }: {
+    active: boolean;
+    disabled: boolean;
+    state: InteractionState;
+  },
+): ResolvedNavigationItemPresentation {
+  const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;
+
+  const opacity = disabled ? 0.72 : 1;
+  const contentColor = disabled
+    ? theme.semantics.content.muted
+    : active
+      ? theme.semantics.action.primary.base
+      : theme.semantics.content.default;
+
+  if (active) {
+    return {
+      backgroundColor: interactionState.pressed
+        ? theme.semantics.action.primary.softActive
+        : interactionState.hovered
+          ? theme.semantics.action.primary.softHover
+          : theme.semantics.action.primary.softBg,
+      contentColor,
+      opacity,
+    };
+  }
+
+  return {
+    backgroundColor: interactionState.pressed
+      ? theme.semantics.neutral.surfaceActive
+      : interactionState.hovered
+        ? theme.semantics.neutral.surfaceHover
+        : 'transparent',
+    contentColor,
+    opacity,
+  };
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,16 @@
+export { DrawerNavigation } from './DrawerNavigation';
+export { DrawerNavigationItem } from './DrawerNavigationItem';
+export { NavigationItem } from './NavigationItem';
+export { NavigationList } from './NavigationList';
+export { TabBar } from './TabBar';
+export { TabBarItem } from './TabBarItem';
+export type {
+  DrawerNavigationItemProps,
+  DrawerNavigationProps,
+  NavigationItemIcon,
+  NavigationItemProps,
+  NavigationItemSpec,
+  NavigationListProps,
+  TabBarItemProps,
+  TabBarProps,
+} from './types';

package/src/components/navigation/policy.test.ts

@@ -0,0 +1,44 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { extname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'bun:test';
+
+const navigationDir = fileURLToPath(new URL('.', import.meta.url));
+
+const forbiddenPatterns = [
+  'expo-router',
+  '@react-navigation',
+  'AppManifest',
+  'NavigatorSpec',
+  'generated app',
+  'templates',
+] as const;
+
+function listNavigationSources() {
+  return readdirSync(navigationDir)
+    .filter((entry) => {
+      const extension = extname(entry);
+      if (!(extension === '.ts' || extension === '.tsx')) {
+        return false;
+      }
+
+      return !entry.includes('.test.');
+    })
+    .map((entry) => join(navigationDir, entry));
+}
+
+describe('navigation module boundaries', () => {
+  it('does not import routers, manifests, or generated app code', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    sources.forEach(({ content, path }) => {
+      forbiddenPatterns.forEach((pattern) => {
+        expect(content, path).not.toContain(pattern);
+      });
+    });
+  });
+});

package/src/components/navigation/types.ts

@@ -0,0 +1,59 @@
+import type React from 'react';
+import type { AccessibilityRole, AccessibilityState } from 'react-native';
+
+import type { IconProps } from '../../primitives/icon';
+
+export type NavigationItemIcon = Pick<IconProps, 'name' | 'provider'>;
+
+export interface NavigationItemSpec {
+  id: string;
+  label: React.ReactNode;
+  icon?: NavigationItemIcon;
+  badge?: React.ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  onPress?: (() => void) | undefined;
+  accessibilityLabel?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+  testID?: string;
+}
+
+export interface NavigationItemProps {
+  item: NavigationItemSpec;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface NavigationListProps {
+  items: readonly NavigationItemSpec[];
+  orientation?: 'vertical' | 'horizontal';
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface TabBarProps {
+  items: readonly NavigationItemSpec[];
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface TabBarItemProps {
+  item: NavigationItemSpec;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface DrawerNavigationProps {
+  items: readonly NavigationItemSpec[];
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface DrawerNavigationItemProps {
+  item: NavigationItemSpec;
+  compact?: boolean;
+  testID?: string;
+}

package/src/index.test.ts

@@ -21,6 +21,7 @@ const expectedRootExports = [
   "export { IconButton } from './components/icon-button';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",
+  "export {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';",
   "export { Menu } from './components/menu';",
   "export { Modal } from './components/modal';",
   "export { Radio } from './components/radio';",

package/src/index.ts

@@ -22,6 +22,24 @@ export type { MenuItem, MenuProps } from './components/menu';
 export { Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
+export type {
+  DrawerNavigationItemProps,
+  DrawerNavigationProps,
+  NavigationItemIcon,
+  NavigationItemProps,
+  NavigationItemSpec,
+  NavigationListProps,
+  TabBarItemProps,
+  TabBarProps,
+} from './components/navigation';
+export {
+  DrawerNavigation,
+  DrawerNavigationItem,
+  NavigationItem,
+  NavigationList,
+  TabBar,
+  TabBarItem,
+} from './components/navigation';
 export type { RadioProps } from './components/radio';
 export { Radio } from './components/radio';
 export type { SwitchProps } from './components/switch';