@ankhorage/zora 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.5.1
+
+### Patch Changes
+
+- 07e9d96: Improve realistic example app chrome by adding compact AppBars with dark-mode toggles, applying semantic Screen backgrounds, and fixing native ZoraTabBar icon/label rendering.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/layout/screen/Screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA2B3C,eAAO,MAAM,MAAM,mDAAkC,CAAC"}
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAmC3C,eAAO,MAAM,MAAM,mDAAkC,CAAC"}

package/dist/layout/screen/Screen.js

@@ -1,6 +1,6 @@
 import { ScrollArea } from '@ankhorage/surface';
 import React from 'react';
-import { Container, Stack } from '../../foundation';
+import { Box, Container, Stack } from '../../foundation';
 import { resolvePageMaxWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function ScreenInner({ themeId: _themeId, mode: _mode, children, footer, scroll = true, width = 'default', testID, }) {
@@ -11,9 +11,13 @@ function ScreenInner({ themeId: _themeId, mode: _mode, children, footer, scroll
       </Stack>
     </Container>);
     if (!scroll) {
-        return content;
+        return (<Box bg="background" flex={1}>
+        {content}
+      </Box>);
     }
-    return <ScrollArea>{content}</ScrollArea>;
+    return (<ScrollArea bg="background" style={{ flex: 1 }}>
+      {content}
+    </ScrollArea>);
 }
 export const Screen = withZoraThemeScope(ScreenInner);
 //# sourceMappingURL=Screen.js.map

package/dist/layout/screen/Screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,SAAS,EACjB,MAAM,GACM;IACZ,MAAM,OAAO,GAAG,CACd,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACtE;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { ScrollArea } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Container, Stack } from '../../foundation';\nimport { resolvePageMaxWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ScreenProps } from './types';\n\nfunction ScreenInner({\n  themeId: _themeId,\n  mode: _mode,\n  children,\n  footer,\n  scroll = true,\n  width = 'default',\n  testID,\n}: ScreenProps) {\n  const content = (\n    <Container maxWidth={resolvePageMaxWidth(width)} py=\"xl\" testID={testID}>\n      <Stack gap=\"l\">\n        {children}\n        {footer}\n      </Stack>\n    </Container>\n  );\n\n  if (!scroll) {\n    return content;\n  }\n\n  return <ScrollArea>{content}</ScrollArea>;\n}\n\nexport const Screen = withZoraThemeScope(ScreenInner);\n"]}
+{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,SAAS,EACjB,MAAM,GACM;IACZ,MAAM,OAAO,GAAG,CACd,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACtE;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC3B;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAC7C;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { ScrollArea } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Box, Container, Stack } from '../../foundation';\nimport { resolvePageMaxWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ScreenProps } from './types';\n\nfunction ScreenInner({\n  themeId: _themeId,\n  mode: _mode,\n  children,\n  footer,\n  scroll = true,\n  width = 'default',\n  testID,\n}: ScreenProps) {\n  const content = (\n    <Container maxWidth={resolvePageMaxWidth(width)} py=\"xl\" testID={testID}>\n      <Stack gap=\"l\">\n        {children}\n        {footer}\n      </Stack>\n    </Container>\n  );\n\n  if (!scroll) {\n    return (\n      <Box bg=\"background\" flex={1}>\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <ScrollArea bg=\"background\" style={{ flex: 1 }}>\n      {content}\n    </ScrollArea>\n  );\n}\n\nexport const Screen = withZoraThemeScope(ScreenInner);\n"]}

package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraTabBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6C/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}
+{"version":3,"file":"ZoraTabBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoI/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}

package/dist/patterns/zora-tab-bar/ZoraTabBar.js

@@ -1,27 +1,76 @@
-import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
 import React from 'react';
-import { Surface } from '../../foundation';
+import { Pressable, Text as ReactNativeText } from 'react-native';
+import { Icon } from '../../components/icon';
+import { Box, Surface } from '../../foundation';
 import { createTabBarItemPressHandler, resolveNavigationItems, } from '../../internal/resolveZoraNavigationItems';
+import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function ZoraTabBarInner({ themeId: _themeId, mode: _mode, state, navigation, descriptors, routeMap, compact = false, chrome = 'raised', testID, }) {
+function resolveAccessibilityLabel(label, explicitLabel) {
+    if (explicitLabel !== undefined) {
+        return explicitLabel;
+    }
+    if (typeof label === 'string') {
+        return label;
+    }
+    if (typeof label === 'number') {
+        return String(label);
+    }
+    return undefined;
+}
+function ZoraTabBarInner({ themeId: _themeId, mode: _mode, state, navigation, descriptors, insets, routeMap, compact = false, chrome = 'raised', testID, }) {
+    const { theme } = useZoraTheme();
     const resolved = resolveNavigationItems({
         state,
         descriptors,
         routeMap,
         kind: 'tab',
     });
-    const items = resolved.map((item) => ({
-        id: item.route.key,
-        label: item.label,
-        icon: item.metadata?.icon,
-        badge: item.metadata?.badge,
-        active: item.active,
-        disabled: item.disabled,
-        onPress: createTabBarItemPressHandler({ item, navigation }),
-        accessibilityLabel: item.metadata?.accessibilityLabel,
-        testID: item.metadata?.testID,
-    }));
-    const content = <SurfaceTabBar compact={compact} items={items} testID={testID}/>;
+    const bottomInset = insets?.bottom ?? 0;
+    const minHeight = compact ? 56 : 64;
+    const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;
+    const labelWeight = theme.typography.weights.medium;
+    const content = (<Box bg="surface" style={{
+            borderTopColor: theme.semantics.border.default,
+            borderTopWidth: 1,
+            flexDirection: 'row',
+            minHeight: minHeight + bottomInset,
+            paddingBottom: bottomInset,
+        }} testID={testID}>
+      {resolved.map((item) => {
+            const { active } = item;
+            const { disabled } = item;
+            const contentColor = disabled
+                ? theme.semantics.content.subtle
+                : active
+                    ? theme.semantics.action.primary.base
+                    : theme.semantics.content.muted;
+            const backgroundColor = active
+                ? theme.semantics.action.primary.softBg
+                : theme.semantics.surface.default;
+            return (<Pressable accessibilityLabel={resolveAccessibilityLabel(item.label, item.metadata?.accessibilityLabel)} accessibilityRole="tab" accessibilityState={{ selected: active, disabled }} disabled={disabled} key={item.route.key} onPress={createTabBarItemPressHandler({ item, navigation })} style={{
+                    alignItems: 'center',
+                    backgroundColor,
+                    flex: 1,
+                    justifyContent: 'center',
+                    minHeight,
+                    opacity: disabled ? 0.48 : 1,
+                    paddingHorizontal: theme.spacing.s,
+                    paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,
+                }} testID={item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)}>
+            {item.metadata?.icon ? (<Icon color={contentColor} name={item.metadata.icon.name} provider={item.metadata.icon.provider} size={compact ? theme.spacing.m : theme.spacing.l}/>) : null}
+            <ReactNativeText numberOfLines={1} style={{
+                    color: contentColor,
+                    fontSize: labelSize,
+                    fontWeight: labelWeight,
+                    lineHeight: compact ? 16 : 20,
+                    marginTop: item.metadata?.icon ? theme.spacing.xs : 0,
+                    textAlign: 'center',
+                }}>
+              {item.label}
+            </ReactNativeText>
+          </Pressable>);
+        })}
+    </Box>);
     if (chrome === 'none') {
         return content;
     }

package/dist/patterns/zora-tab-bar/ZoraTabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraTabBar.js","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,QAAQ,EACjB,MAAM,GACU;IAChB,MAAM,QAAQ,GAAG,sBAAsB,CAAC;QACtC,KAAK;QACL,WAAW;QACX,QAAQ;QACR,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG;QAClB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI;QACzB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK;QAC3B,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,4BAA4B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;QAC3D,kBAAkB,EAAE,IAAI,CAAC,QAAQ,EAAE,kBAAkB;QACrD,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM;KAC9B,CAAC,CAAC,CAAC;IAEJ,MAAM,OAAO,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAAC;IAElF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,CACL,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxE;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { TabBar as SurfaceTabBar } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Surface } from '../../foundation';\nimport {\n  createTabBarItemPressHandler,\n  resolveNavigationItems,\n} from '../../internal/resolveZoraNavigationItems';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraTabBarProps } from './types';\n\nfunction ZoraTabBarInner({\n  themeId: _themeId,\n  mode: _mode,\n  state,\n  navigation,\n  descriptors,\n  routeMap,\n  compact = false,\n  chrome = 'raised',\n  testID,\n}: ZoraTabBarProps) {\n  const resolved = resolveNavigationItems({\n    state,\n    descriptors,\n    routeMap,\n    kind: 'tab',\n  });\n\n  const items = resolved.map((item) => ({\n    id: item.route.key,\n    label: item.label,\n    icon: item.metadata?.icon,\n    badge: item.metadata?.badge,\n    active: item.active,\n    disabled: item.disabled,\n    onPress: createTabBarItemPressHandler({ item, navigation }),\n    accessibilityLabel: item.metadata?.accessibilityLabel,\n    testID: item.metadata?.testID,\n  }));\n\n  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;\n\n  if (chrome === 'none') {\n    return content;\n  }\n\n  return (\n    <Surface variant=\"raised\" testID={testID ? `${testID}-chrome` : undefined}>\n      {content}\n    </Surface>\n  );\n}\n\nexport const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);\n"]}
+{"version":3,"file":"ZoraTabBar.js","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,yBAAyB,CAChC,KAAsB,EACtB,aAAsB;IAEtB,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,QAAQ,EACjB,MAAM,GACU;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,sBAAsB,CAAC;QACtC,KAAK;QACL,WAAW;QACX,QAAQ;QACR,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC;IACpD,MAAM,OAAO,GAAG,CACd,CAAC,GAAG,CACF,EAAE,CAAC,SAAS,CACZ,KAAK,CAAC,CAAC;YACL,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;YAC9C,cAAc,EAAE,CAAC;YACjB,aAAa,EAAE,KAAK;YACpB,SAAS,EAAE,SAAS,GAAG,WAAW;YAClC,aAAa,EAAE,WAAW;SAC3B,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YACxB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,MAAM,YAAY,GAAG,QAAQ;gBAC3B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;gBAChC,CAAC,CAAC,MAAM;oBACN,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;oBACrC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;YACpC,MAAM,eAAe,GAAG,MAAM;gBAC5B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;gBACvC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;YAEpC,OAAO,CACL,CAAC,SAAS,CACR,kBAAkB,CAAC,CAAC,yBAAyB,CAC3C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,EAAE,kBAAkB,CAClC,CAAC,CACF,iBAAiB,CAAC,KAAK,CACvB,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CACnD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CACpB,OAAO,CAAC,CAAC,4BAA4B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAC5D,KAAK,CAAC,CAAC;oBACL,UAAU,EAAE,QAAQ;oBACpB,eAAe;oBACf,IAAI,EAAE,CAAC;oBACP,cAAc,EAAE,QAAQ;oBACxB,SAAS;oBACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;oBAC5B,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;oBAClC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;iBAC9D,CAAC,CACF,MAAM,CAAC,CACL,IAAI,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CACnF,CAAC,CAED;YAAA,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,CACrB,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CACtC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAClD,CACH,CAAC,CAAC,CAAC,IAAI,CACR;YAAA,CAAC,eAAe,CACd,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,KAAK,CAAC,CAAC;oBACL,KAAK,EAAE,YAAY;oBACnB,QAAQ,EAAE,SAAS;oBACnB,UAAU,EAAE,WAAW;oBACvB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBAC7B,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBACrD,SAAS,EAAE,QAAQ;iBACpB,CAAC,CAEF;cAAA,CAAC,IAAI,CAAC,KAAK,CACb;YAAA,EAAE,eAAe,CACnB;UAAA,EAAE,SAAS,CAAC,CACb,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;IAEF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,CACL,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxE;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { Pressable, Text as ReactNativeText } from 'react-native';\n\nimport { Icon } from '../../components/icon';\nimport { Box, Surface } from '../../foundation';\nimport {\n  createTabBarItemPressHandler,\n  resolveNavigationItems,\n} from '../../internal/resolveZoraNavigationItems';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraTabBarProps } from './types';\n\nfunction resolveAccessibilityLabel(\n  label: React.ReactNode,\n  explicitLabel?: string,\n): string | undefined {\n  if (explicitLabel !== undefined) {\n    return explicitLabel;\n  }\n\n  if (typeof label === 'string') {\n    return label;\n  }\n\n  if (typeof label === 'number') {\n    return String(label);\n  }\n\n  return undefined;\n}\n\nfunction ZoraTabBarInner({\n  themeId: _themeId,\n  mode: _mode,\n  state,\n  navigation,\n  descriptors,\n  insets,\n  routeMap,\n  compact = false,\n  chrome = 'raised',\n  testID,\n}: ZoraTabBarProps) {\n  const { theme } = useZoraTheme();\n  const resolved = resolveNavigationItems({\n    state,\n    descriptors,\n    routeMap,\n    kind: 'tab',\n  });\n\n  const bottomInset = insets?.bottom ?? 0;\n  const minHeight = compact ? 56 : 64;\n  const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;\n  const labelWeight = theme.typography.weights.medium;\n  const content = (\n    <Box\n      bg=\"surface\"\n      style={{\n        borderTopColor: theme.semantics.border.default,\n        borderTopWidth: 1,\n        flexDirection: 'row',\n        minHeight: minHeight + bottomInset,\n        paddingBottom: bottomInset,\n      }}\n      testID={testID}\n    >\n      {resolved.map((item) => {\n        const { active } = item;\n        const { disabled } = item;\n        const contentColor = disabled\n          ? theme.semantics.content.subtle\n          : active\n            ? theme.semantics.action.primary.base\n            : theme.semantics.content.muted;\n        const backgroundColor = active\n          ? theme.semantics.action.primary.softBg\n          : theme.semantics.surface.default;\n\n        return (\n          <Pressable\n            accessibilityLabel={resolveAccessibilityLabel(\n              item.label,\n              item.metadata?.accessibilityLabel,\n            )}\n            accessibilityRole=\"tab\"\n            accessibilityState={{ selected: active, disabled }}\n            disabled={disabled}\n            key={item.route.key}\n            onPress={createTabBarItemPressHandler({ item, navigation })}\n            style={{\n              alignItems: 'center',\n              backgroundColor,\n              flex: 1,\n              justifyContent: 'center',\n              minHeight,\n              opacity: disabled ? 0.48 : 1,\n              paddingHorizontal: theme.spacing.s,\n              paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,\n            }}\n            testID={\n              item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)\n            }\n          >\n            {item.metadata?.icon ? (\n              <Icon\n                color={contentColor}\n                name={item.metadata.icon.name}\n                provider={item.metadata.icon.provider}\n                size={compact ? theme.spacing.m : theme.spacing.l}\n              />\n            ) : null}\n            <ReactNativeText\n              numberOfLines={1}\n              style={{\n                color: contentColor,\n                fontSize: labelSize,\n                fontWeight: labelWeight,\n                lineHeight: compact ? 16 : 20,\n                marginTop: item.metadata?.icon ? theme.spacing.xs : 0,\n                textAlign: 'center',\n              }}\n            >\n              {item.label}\n            </ReactNativeText>\n          </Pressable>\n        );\n      })}\n    </Box>\n  );\n\n  if (chrome === 'none') {\n    return content;\n  }\n\n  return (\n    <Surface variant=\"raised\" testID={testID ? `${testID}-chrome` : undefined}>\n      {content}\n    </Surface>\n  );\n}\n\nexport const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/layout/screen/Screen.tsx

@@ -1,7 +1,7 @@
 import { ScrollArea } from '@ankhorage/surface';
 import React from 'react';
 
-import { Container, Stack } from '../../foundation';
+import { Box, Container, Stack } from '../../foundation';
 import { resolvePageMaxWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ScreenProps } from './types';
@@ -25,10 +25,18 @@ function ScreenInner({
   );
 
   if (!scroll) {
-    return content;
+    return (
+      <Box bg="background" flex={1}>
+        {content}
+      </Box>
+    );
   }
 
-  return <ScrollArea>{content}</ScrollArea>;
+  return (
+    <ScrollArea bg="background" style={{ flex: 1 }}>
+      {content}
+    </ScrollArea>
+  );
 }
 
 export const Screen = withZoraThemeScope(ScreenInner);

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -1,25 +1,48 @@
-import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
 import React from 'react';
+import { Pressable, Text as ReactNativeText } from 'react-native';
 
-import { Surface } from '../../foundation';
+import { Icon } from '../../components/icon';
+import { Box, Surface } from '../../foundation';
 import {
   createTabBarItemPressHandler,
   resolveNavigationItems,
 } from '../../internal/resolveZoraNavigationItems';
+import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraTabBarProps } from './types';
 
+function resolveAccessibilityLabel(
+  label: React.ReactNode,
+  explicitLabel?: string,
+): string | undefined {
+  if (explicitLabel !== undefined) {
+    return explicitLabel;
+  }
+
+  if (typeof label === 'string') {
+    return label;
+  }
+
+  if (typeof label === 'number') {
+    return String(label);
+  }
+
+  return undefined;
+}
+
 function ZoraTabBarInner({
   themeId: _themeId,
   mode: _mode,
   state,
   navigation,
   descriptors,
+  insets,
   routeMap,
   compact = false,
   chrome = 'raised',
   testID,
 }: ZoraTabBarProps) {
+  const { theme } = useZoraTheme();
   const resolved = resolveNavigationItems({
     state,
     descriptors,
@@ -27,19 +50,85 @@ function ZoraTabBarInner({
     kind: 'tab',
   });
 
-  const items = resolved.map((item) => ({
-    id: item.route.key,
-    label: item.label,
-    icon: item.metadata?.icon,
-    badge: item.metadata?.badge,
-    active: item.active,
-    disabled: item.disabled,
-    onPress: createTabBarItemPressHandler({ item, navigation }),
-    accessibilityLabel: item.metadata?.accessibilityLabel,
-    testID: item.metadata?.testID,
-  }));
-
-  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;
+  const bottomInset = insets?.bottom ?? 0;
+  const minHeight = compact ? 56 : 64;
+  const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;
+  const labelWeight = theme.typography.weights.medium;
+  const content = (
+    <Box
+      bg="surface"
+      style={{
+        borderTopColor: theme.semantics.border.default,
+        borderTopWidth: 1,
+        flexDirection: 'row',
+        minHeight: minHeight + bottomInset,
+        paddingBottom: bottomInset,
+      }}
+      testID={testID}
+    >
+      {resolved.map((item) => {
+        const { active } = item;
+        const { disabled } = item;
+        const contentColor = disabled
+          ? theme.semantics.content.subtle
+          : active
+            ? theme.semantics.action.primary.base
+            : theme.semantics.content.muted;
+        const backgroundColor = active
+          ? theme.semantics.action.primary.softBg
+          : theme.semantics.surface.default;
+
+        return (
+          <Pressable
+            accessibilityLabel={resolveAccessibilityLabel(
+              item.label,
+              item.metadata?.accessibilityLabel,
+            )}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active, disabled }}
+            disabled={disabled}
+            key={item.route.key}
+            onPress={createTabBarItemPressHandler({ item, navigation })}
+            style={{
+              alignItems: 'center',
+              backgroundColor,
+              flex: 1,
+              justifyContent: 'center',
+              minHeight,
+              opacity: disabled ? 0.48 : 1,
+              paddingHorizontal: theme.spacing.s,
+              paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,
+            }}
+            testID={
+              item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)
+            }
+          >
+            {item.metadata?.icon ? (
+              <Icon
+                color={contentColor}
+                name={item.metadata.icon.name}
+                provider={item.metadata.icon.provider}
+                size={compact ? theme.spacing.m : theme.spacing.l}
+              />
+            ) : null}
+            <ReactNativeText
+              numberOfLines={1}
+              style={{
+                color: contentColor,
+                fontSize: labelSize,
+                fontWeight: labelWeight,
+                lineHeight: compact ? 16 : 20,
+                marginTop: item.metadata?.icon ? theme.spacing.xs : 0,
+                textAlign: 'center',
+              }}
+            >
+              {item.label}
+            </ReactNativeText>
+          </Pressable>
+        );
+      })}
+    </Box>
+  );
 
   if (chrome === 'none') {
     return content;