@ankhorage/zora 4.5.0 → 6.0.0

package/src/components/time-picker/TimePicker.tsx

@@ -1,10 +1,10 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 
+import { useBottomSheet } from '../../features/bottom-sheet/public';
 import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ActionSheet, ActionSheetItem } from '../action-sheet';
 import { Button } from '../button';
 import { Text } from '../text';
 import type { TimePickerProps } from './types';
@@ -12,6 +12,7 @@ import type { TimePickerProps } from './types';
 const MINUTES_PER_DAY = 24 * 60;
 const DEFAULT_STEP_MINUTES = 30;
 
+/*** Render the field label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
     <Stack gap="xs">
@@ -27,39 +28,34 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
   );
 }
 
+/*** Parse one HH:mm value to minutes since midnight. */
 function parseTimeToMinutes(value: string | undefined): number | undefined {
-  if (!value) {
-    return undefined;
-  }
-
+  if (!value) return undefined;
   const match = /^(\d{2}):(\d{2})$/.exec(value);
-  if (!match) {
-    return undefined;
-  }
+  if (!match) return undefined;
 
   const hours = Number(match[1]);
   const minutes = Number(match[2]);
-  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
-    return undefined;
-  }
-
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return undefined;
   return hours * 60 + minutes;
 }
 
+/*** Format minutes since midnight as HH:mm. */
 function formatMinutes(value: number): string {
   const hours = Math.floor(value / 60);
   const minutes = value % 60;
   return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
 }
 
+/*** Normalize the configured time step to a positive whole minute. */
 function resolveStepMinutes(stepMinutes: number | undefined): number {
   if (stepMinutes === undefined || !Number.isFinite(stepMinutes) || stepMinutes <= 0) {
     return DEFAULT_STEP_MINUTES;
   }
-
   return Math.max(1, Math.floor(stepMinutes));
 }
 
+/*** Generate selectable HH:mm values within the configured range. */
 function generateTimeOptions({
   minTime,
   maxTime,
@@ -71,11 +67,8 @@ function generateTimeOptions({
   const options: string[] = [];
 
   for (let minute = 0; minute < MINUTES_PER_DAY; minute += step) {
-    if (minute >= min && minute <= max) {
-      options.push(formatMinutes(minute));
-    }
+    if (minute >= min && minute <= max) options.push(formatMinutes(minute));
   }
-
   return options;
 }
 
@@ -97,18 +90,33 @@ function TimePickerInner({
   testID,
   interactionPolicy,
 }: TimePickerProps) {
+  const { dismiss, present } = useBottomSheet();
   const passive = interactionPolicy === 'passive';
-  const [visible, setVisible] = React.useState(false);
-  const options = React.useMemo(
-    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
-    [maxTime, minTime, stepMinutes],
-  );
   const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
 
+  /*** Present the time options through the shared BottomSheet controller. */
   function openPicker() {
     if (passive) return;
-
-    setVisible(true);
+    present({
+      content: (
+        <TimePickerSheet
+          description={description}
+          formatTime={formatTime}
+          interactionPolicy={interactionPolicy}
+          label={label}
+          maxTime={maxTime}
+          minTime={minTime}
+          onDismiss={dismiss}
+          onSelect={(time) => {
+            onValueChange?.(time);
+            dismiss();
+          }}
+          stepMinutes={stepMinutes}
+          testID={testID}
+          value={value}
+        />
+      ),
+    });
   }
 
   return (
@@ -130,45 +138,124 @@ function TimePickerInner({
       >
         {displayValue}
       </Button>
-      <ActionSheet
-        description={description}
-        interactionPolicy={interactionPolicy}
-        onDismiss={() => {
-          if (passive) return;
-
-          setVisible(false);
-        }}
-        testID={testID ? `${testID}-sheet` : undefined}
-        title={label ?? 'Choose time'}
-        visible={visible}
-      >
-        <ScrollView style={{ maxHeight: 360 }}>
-          <Stack gap="xxs">
-            {options.map((option) => (
-              <ActionSheetItem
-                interactionPolicy={interactionPolicy}
-                key={option}
-                label={formatTime ? formatTime(option) : option}
-                onPress={() => {
-                  if (passive) return;
-
-                  onValueChange?.(option);
-                  setVisible(false);
-                }}
-                selected={option === value}
-                testID={testID ? `${testID}-option-${option}` : undefined}
-              />
-            ))}
-          </Stack>
-        </ScrollView>
-      </ActionSheet>
     </Field>
   );
 }
 
+interface TimePickerSheetProps extends Pick<
+  TimePickerProps,
+  | 'description'
+  | 'formatTime'
+  | 'interactionPolicy'
+  | 'label'
+  | 'maxTime'
+  | 'minTime'
+  | 'stepMinutes'
+  | 'testID'
+  | 'value'
+> {
+  onDismiss: () => void;
+  onSelect: (value: string) => void;
+}
+
+/*** Render time selection content inside the shared BottomSheet host. */
+function TimePickerSheet({
+  description,
+  formatTime,
+  interactionPolicy,
+  label,
+  maxTime,
+  minTime,
+  onDismiss,
+  onSelect,
+  stepMinutes,
+  testID,
+  value,
+}: TimePickerSheetProps) {
+  const options = React.useMemo(
+    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
+    [maxTime, minTime, stepMinutes],
+  );
+
+  return (
+    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
+      <PickerSheetHeader description={description} title={label ?? 'Choose time'} />
+      <ScrollView style={styles.options}>
+        <Stack gap="xxs">
+          {options.map((option) => (
+            <TimePickerOption
+              formatTime={formatTime}
+              interactionPolicy={interactionPolicy}
+              key={option}
+              onSelect={onSelect}
+              option={option}
+              selected={option === value}
+              testID={testID}
+            />
+          ))}
+        </Stack>
+      </ScrollView>
+      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
+        Cancel
+      </Button>
+    </Stack>
+  );
+}
+
+/*** Render the shared title block used by the time sheet. */
+function PickerSheetHeader({
+  description,
+  title,
+}: {
+  description: React.ReactNode | undefined;
+  title: React.ReactNode;
+}) {
+  return (
+    <Stack gap="xxs">
+      <Text align="center" variant="label" weight="semiBold">
+        {title}
+      </Text>
+      {description ? (
+        <Text align="center" emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
+
+/*** Render one accessible selectable time option. */
+function TimePickerOption({
+  formatTime,
+  interactionPolicy,
+  onSelect,
+  option,
+  selected,
+  testID,
+}: Pick<TimePickerSheetProps, 'formatTime' | 'interactionPolicy' | 'testID'> & {
+  onSelect: (value: string) => void;
+  option: string;
+  selected: boolean;
+}) {
+  return (
+    <Button
+      accessibilityState={{ selected }}
+      fullWidth
+      interactionPolicy={interactionPolicy}
+      onPress={() => onSelect(option)}
+      testID={testID ? `${testID}-option-${option}` : undefined}
+      variant={selected ? 'soft' : 'ghost'}
+    >
+      {formatTime ? formatTime(option) : option}
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  options: { maxHeight: 360 },
+});
+
 /***
- * Time input control with wheel selection and formatted display value.
- *
- 
+ * Time input control with bottom-sheet selection and formatted display value.
  */
 export const TimePicker = withZoraThemeScope(TimePickerInner);

package/src/components/time-picker/meta.ts

@@ -5,6 +5,6 @@ export const timePickerMeta = {
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Code-facing ActionSheet-backed time picker; not represented as a manifest node in v1.',
+  note: 'Code-facing BottomSheet-backed time picker; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/expo57Migration.test.ts

@@ -14,6 +14,14 @@ const EXPO_EXAMPLE_DIRS = [
   'examples/social_community/private-messaging',
   'examples/social_community/visual-discovery',
 ] as const;
+const ROUTER_EXAMPLE_DIRS = EXPO_EXAMPLE_DIRS.filter(
+  (directory) => directory !== 'examples/expo-showcase',
+);
+const ZORA_PROVIDER_HOSTS = [
+  ['examples/basic-app', 'App.tsx'],
+  ['examples/expo-showcase', 'App.tsx'],
+  ...ROUTER_EXAMPLE_DIRS.map((directory) => [directory, 'app', '_layout.tsx'] as const),
+] as const;
 const RNVI_PLUGINS = [
   '@react-native-vector-icons/fontawesome',
   '@react-native-vector-icons/fontawesome5',
@@ -63,6 +71,9 @@ describe('portable ZORA package boundary', () => {
     expect(readValue(peers, 'react-native-svg')).toBe('15.15.4');
     expect(readValue(development, 'react-native-svg')).toBe('15.15.4');
     expect(readValue(peers, 'react-native-web')).toMatch(TILDE_SEMVER_RANGE);
+    expect(readValue(peers, 'react-native-gesture-handler')).toMatch(TILDE_SEMVER_RANGE);
+    expect(readValue(peers, 'react-native-reanimated')).toMatch(EXACT_SEMVER_VERSION);
+    expect(readValue(peers, 'react-native-worklets')).toMatch(EXACT_SEMVER_VERSION);
     expect(development.typescript).toMatch(TILDE_SEMVER_RANGE);
 
     for (const expoPackage of ['@expo/vector-icons', 'expo-font', 'expo-linear-gradient']) {
@@ -101,6 +112,9 @@ describe('Expo 57 example boundary', () => {
       expect(expoVersion).toMatch(EXACT_SEMVER_VERSION);
       expect(dependencies.react).toMatch(EXACT_SEMVER_VERSION);
       expect(readValue(dependencies, 'react-native')).toMatch(EXACT_SEMVER_VERSION);
+      expect(readValue(dependencies, 'react-native-gesture-handler')).toMatch(TILDE_SEMVER_RANGE);
+      expect(readValue(dependencies, 'react-native-reanimated')).toMatch(EXACT_SEMVER_VERSION);
+      expect(readValue(dependencies, 'react-native-worklets')).toMatch(EXACT_SEMVER_VERSION);
       expect(readValue(dependencies, 'react-native-web')).toMatch(TILDE_SEMVER_RANGE);
       expect(development.typescript).toMatch(TILDE_SEMVER_RANGE);
       expect(readValue(dependencies, '@expo/vector-icons')).toBeUndefined();
@@ -117,6 +131,48 @@ describe('Expo 57 example boundary', () => {
       'utf8',
     );
     expect(scaffoldSource).toContain(`expo: '${expoVersion}',`);
+    expect(scaffoldSource).toContain("navigator: '^3.2.3'");
+    expect(scaffoldSource).toContain("from 'expo-router/unstable-native-tabs'");
+    expect(scaffoldSource).toContain('<GestureHandlerRootView style={{ flex: 1 }}>');
+    expect(scaffoldSource).not.toContain('ZoraTabBar');
+  });
+
+  test('uses Navigator native tabs in every router example', () => {
+    for (const directory of ROUTER_EXAMPLE_DIRS) {
+      const packageJson = readExamplePackage(directory);
+      const dependencies = readRecord(packageJson, 'dependencies');
+      const layoutSource = readFileSync(
+        join(ROOT, directory, 'app', '(tabs)', '_layout.tsx'),
+        'utf8',
+      );
+
+      expect(readValue(dependencies, '@ankhorage/navigator')).toMatch(CARET_SEMVER_RANGE);
+      expect(layoutSource).toContain("from '@ankhorage/navigator/tabs/native-icons'");
+      expect(layoutSource).toContain("from 'expo-router/unstable-native-tabs'");
+      expect(layoutSource).toContain("Platform.OS === 'web'");
+      expect(layoutSource).toContain('Promise.resolve(null)');
+      expect(layoutSource).toContain('<NativeTabs>');
+      expect(layoutSource).not.toContain('ZoraTabBar');
+      expect(layoutSource).not.toContain('ZoraNavigationRouteMap');
+    }
+  });
+
+  test('keeps GestureHandlerRootView outside ZoraProvider in every host app', () => {
+    for (const sourcePath of ZORA_PROVIDER_HOSTS) {
+      const [directory] = sourcePath;
+      const source = readFileSync(join(ROOT, ...sourcePath), 'utf8');
+      const packageJson = readExamplePackage(directory);
+      const dependencies = readRecord(packageJson, 'dependencies');
+      const gestureRootPosition = source.indexOf('<GestureHandlerRootView');
+      const zoraProviderPosition = source.indexOf('<ZoraProvider');
+
+      expect(readValue(dependencies, 'react-native-gesture-handler')).toMatch(TILDE_SEMVER_RANGE);
+      expect(readValue(dependencies, 'react-native-reanimated')).toMatch(EXACT_SEMVER_VERSION);
+      expect(readValue(dependencies, 'react-native-worklets')).toMatch(EXACT_SEMVER_VERSION);
+      expect(source).toContain("from 'react-native-gesture-handler'");
+      expect(gestureRootPosition).toBeGreaterThan(-1);
+      expect(zoraProviderPosition).toBeGreaterThan(gestureRootPosition);
+    }
   });
 
   test('registers all scoped RNVI packages in each Expo app config', () => {

package/src/features/bottom-sheet/public.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test';
+
+describe('ZORA BottomSheet public contract', () => {
+  test('publishes an explicit ZORA subpath backed by Surface', async () => {
+    const packageJson = (await Bun.file('package.json').json()) as {
+      dependencies: Readonly<Record<string, string>>;
+      exports: Readonly<Record<string, unknown>>;
+      peerDependencies: Readonly<Record<string, string>>;
+    };
+    const source = await Bun.file('src/features/bottom-sheet/public.ts').text();
+
+    expect(packageJson.exports['./bottom-sheet']).toBeDefined();
+    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^4\./u);
+    expect(source).toContain("from '@ankhorage/surface/bottom-sheet'");
+    const {
+      'react-native-gesture-handler': gestureHandlerPeer,
+      'react-native-reanimated': reanimatedPeer,
+      'react-native-worklets': workletsPeer,
+    } = packageJson.peerDependencies;
+    expect(gestureHandlerPeer).toBeDefined();
+    expect(reanimatedPeer).toBeDefined();
+    expect(workletsPeer).toBeDefined();
+  });
+
+  test('installs the shared provider and removes picker ActionSheet dependencies', async () => {
+    const [provider, datePicker, timePicker] = await Promise.all([
+      Bun.file('src/theme/ZoraProvider.tsx').text(),
+      Bun.file('src/components/date-picker/DatePicker.tsx').text(),
+      Bun.file('src/components/time-picker/TimePicker.tsx').text(),
+    ]);
+
+    expect(provider).toContain('<BottomSheetProvider>{children}</BottomSheetProvider>');
+    expect(provider).not.toContain('GestureHandlerRootView');
+    expect(datePicker).toContain('useBottomSheet()');
+    expect(timePicker).toContain('useBottomSheet()');
+    expect(datePicker).not.toContain("from '../action-sheet'");
+    expect(timePicker).not.toContain("from '../action-sheet'");
+  });
+});

package/src/features/bottom-sheet/public.ts

@@ -0,0 +1,5 @@
+export type {
+  BottomSheetController,
+  BottomSheetPresentOptions,
+} from '@ankhorage/surface/bottom-sheet';
+export { useBottomSheet } from '@ankhorage/surface/bottom-sheet';

package/src/index.ts

@@ -1,5 +1,3 @@
-export type { ActionSheetItemProps, ActionSheetProps } from './components/action-sheet';
-export { ActionSheet, ActionSheetItem } from './components/action-sheet';
 export type { AppBarMode, AppBarOverflowAction, AppBarProps } from './components/app-bar';
 export { AppBar } from './components/app-bar';
 export type { AvatarProps, AvatarShape, AvatarSize } from './components/avatar';
@@ -39,8 +37,6 @@ export type {
 export { DataTable } from './components/data-table';
 export type { DatePickerProps, DatePickerValue } from './components/date-picker';
 export { DatePicker } from './components/date-picker';
-export type { DrawerProps } from './components/drawer';
-export { Drawer } from './components/drawer';
 export type {
   FormActionsProps,
   FormErrorProps,
@@ -105,14 +101,6 @@ export type { MetricCardProps } from './components/metric-card';
 export { MetricCard } from './components/metric-card';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
-export type {
-  NavigationItemProps,
-  ZoraNavigationRouteMetadata,
-  ZoraNavigationRouteState,
-} from './components/navigation-item';
-export { NavigationItem } from './components/navigation-item';
-export type { NavigationListProps, ZoraNavigationRouteMap } from './components/navigation-list';
-export { NavigationList } from './components/navigation-list';
 export type { PaginationProps } from './components/pagination';
 export { Pagination } from './components/pagination';
 export type { ProgressProps, ProgressRingProps } from './components/progress';
@@ -356,15 +344,6 @@ export type {
   ReaderSurfaceProps,
 } from './patterns/reader';
 export { ReaderSurface, resolveReaderProgress } from './patterns/reader';
-export type {
-  ResponsivePanelDesktopMode,
-  ResponsivePanelMobileMode,
-  ResponsivePanelProps,
-  ResponsivePanelScroll,
-  ResponsivePanelSide,
-  ResponsivePanelSize,
-} from './patterns/responsive-panel';
-export { ResponsivePanel } from './patterns/responsive-panel';
 export type {
   BarcodeScannerViewProps,
   BarcodeScanResult,
@@ -396,10 +375,6 @@ export type { TimelineItem, TimelineProps } from './patterns/timeline';
 export { Timeline } from './patterns/timeline';
 export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';
 export { TreeItem, TreeView } from './patterns/tree-view';
-export type { ZoraDrawerContentProps } from './patterns/zora-drawer-content';
-export { ZoraDrawerContent } from './patterns/zora-drawer-content';
-export type { ZoraTabBarProps } from './patterns/zora-tab-bar';
-export { ZoraTabBar } from './patterns/zora-tab-bar';
 export type {
   ComposedZoraPluginCatalog,
   ComposedZoraPluginMetadataCatalog,

package/src/interactionPolicy.test.ts

@@ -44,7 +44,6 @@ describe('InteractionPolicy declaration', () => {
       readPattern('product-card', 'types.ts'),
       readPattern('reader', 'types.ts'),
       readPattern('scanner', 'types.ts'),
-      readPattern('zora-tab-bar', 'types.ts'),
       readComponent('select', 'types.ts'),
       readPattern('tree-view', 'types.ts'),
     ];
@@ -229,22 +228,6 @@ describe('BarcodeScannerView', () => {
   });
 });
 
-describe('ZoraTabBar', () => {
-  test('does not discard interactionPolicy', () => {
-    const source = readPattern('zora-tab-bar', 'ZoraTabBar.tsx');
-
-    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
-  });
-
-  test('prevents navigation under passive without disabled semantics', () => {
-    const source = readPattern('zora-tab-bar', 'ZoraTabBar.tsx');
-
-    expect(source).toMatch(/onPress=\{[\s\S]*?interactionPolicy === 'passive'\s*\?\s*undefined/);
-    expect(source).not.toMatch(/disabled:\s*interactionPolicy === 'passive'/);
-    expect(source).not.toMatch(/accessibilityState.*disabled.*interactionPolicy === 'passive'/);
-  });
-});
-
 describe('Select', () => {
   test('keeps Picker enabled controlled only by real disabled prop', () => {
     const source = readComponent('select', 'Select.tsx');

package/src/metadata/componentMeta.ts

@@ -1,4 +1,3 @@
-import { actionSheetItemMeta, actionSheetMeta } from '../components/action-sheet/meta';
 import { appBarMeta } from '../components/app-bar/meta';
 import { avatarMeta } from '../components/avatar/meta';
 import { avatarGroupMeta } from '../components/avatar-group/meta';
@@ -12,7 +11,6 @@ import { chipMeta } from '../components/chip/meta';
 import { chipGroupMeta } from '../components/chip-group/meta';
 import { dataTableMeta } from '../components/data-table/meta';
 import { datePickerMeta } from '../components/date-picker/meta';
-import { drawerMeta } from '../components/drawer/meta';
 import { formActionsMeta, formErrorMeta, formFieldMeta, formMeta } from '../components/form/meta';
 import { gradientMeta } from '../components/gradient/meta';
 import { headingMeta } from '../components/heading/meta';
@@ -24,8 +22,6 @@ import { mediaCardMeta } from '../components/media-card/meta';
 import { dropdownMenuMeta, menuMeta } from '../components/menu/meta';
 import { metricCardMeta } from '../components/metric-card/meta';
 import { modalMeta } from '../components/modal/meta';
-import { navigationItemMeta } from '../components/navigation-item/meta';
-import { navigationListMeta } from '../components/navigation-list/meta';
 import { paginationMeta } from '../components/pagination/meta';
 import { progressMeta, progressRingMeta } from '../components/progress/meta';
 import { radioGroupMeta, radioMeta } from '../components/radio/meta';
@@ -79,7 +75,6 @@ import { panelMeta } from '../patterns/panel/meta';
 import { postCardMeta } from '../patterns/post-card/meta';
 import { productCardMeta } from '../patterns/product-card/meta';
 import { readerSurfaceMeta } from '../patterns/reader/meta';
-import { responsivePanelMeta } from '../patterns/responsive-panel/meta';
 import {
   barcodeScannerViewMeta,
   cameraPermissionViewMeta,
@@ -93,15 +88,11 @@ import { themeComposerMeta } from '../patterns/theme-composer/meta';
 import { paletteItemMeta, tileGridMeta } from '../patterns/tile-grid/meta';
 import { timelineMeta } from '../patterns/timeline/meta';
 import { treeItemMeta, treeViewMeta } from '../patterns/tree-view/meta';
-import { zoraDrawerContentMeta } from '../patterns/zora-drawer-content/meta';
-import { zoraTabBarMeta } from '../patterns/zora-tab-bar/meta';
 import { themeModeToggleMeta } from '../theme/ThemeModeToggle.meta';
 import type { ZoraComponentMetaRegistry } from './types';
 
 export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ...foundationMetas,
-  ActionSheet: actionSheetMeta,
-  ActionSheetItem: actionSheetItemMeta,
   AppBar: appBarMeta,
   Avatar: avatarMeta,
   AvatarGroup: avatarGroupMeta,
@@ -116,7 +107,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ChipGroup: chipGroupMeta,
   DataTable: dataTableMeta,
   DatePicker: datePickerMeta,
-  Drawer: drawerMeta,
   DropdownMenu: dropdownMenuMeta,
   Form: formMeta,
   FormActions: formActionsMeta,
@@ -132,8 +122,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Menu: menuMeta,
   MetricCard: metricCardMeta,
   Modal: modalMeta,
-  NavigationItem: navigationItemMeta,
-  NavigationList: navigationListMeta,
   Pagination: paginationMeta,
   Progress: progressMeta,
   ProgressRing: progressRingMeta,
@@ -188,7 +176,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Panel: panelMeta,
   PostCard: postCardMeta,
   ProductCard: productCardMeta,
-  ResponsivePanel: responsivePanelMeta,
   ReaderSurface: readerSurfaceMeta,
   BarcodeScannerView: barcodeScannerViewMeta,
   CameraPermissionView: cameraPermissionViewMeta,
@@ -204,6 +191,4 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Timeline: timelineMeta,
   TreeItem: treeItemMeta,
   TreeView: treeViewMeta,
-  ZoraDrawerContent: zoraDrawerContentMeta,
-  ZoraTabBar: zoraTabBarMeta,
 };

package/src/platformAcceptance.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from 'bun:test';
 
-test('passes the isolated Surface 3 and RN Web 0.21 acceptance suite', () => {
+test('passes the isolated Surface 4 and RN Web 0.21 acceptance suite', () => {
   const subprocess = Bun.spawnSync({
     cmd: [process.execPath, 'test', 'test-fixtures/platformAcceptance.test.tsx'],
     stderr: 'pipe',

package/src/registry.ts

@@ -1,7 +1,6 @@
 import type { InteractionPolicyProps } from '@ankhorage/surface';
 import type React from 'react';
 
-import { ActionSheet, ActionSheetItem } from './components/action-sheet';
 import { AppBar } from './components/app-bar';
 import { Avatar } from './components/avatar';
 import { AvatarGroup } from './components/avatar-group';
@@ -15,7 +14,6 @@ import { Chip } from './components/chip';
 import { ChipGroup } from './components/chip-group';
 import { DataTable } from './components/data-table';
 import { DatePicker } from './components/date-picker';
-import { Drawer } from './components/drawer';
 import { Form, FormActions, FormError, FormField } from './components/form';
 import { Gradient } from './components/gradient';
 import { Heading } from './components/heading';
@@ -27,8 +25,6 @@ import { MediaCard } from './components/media-card';
 import { DropdownMenu, Menu } from './components/menu';
 import { MetricCard } from './components/metric-card';
 import { Modal } from './components/modal';
-import { NavigationItem } from './components/navigation-item';
-import { NavigationList } from './components/navigation-list';
 import { Pagination } from './components/pagination';
 import { Progress, ProgressRing } from './components/progress';
 import { Radio, RadioGroup } from './components/radio';
@@ -88,7 +84,6 @@ import { Panel } from './patterns/panel';
 import { PostCard } from './patterns/post-card';
 import { ProductCard } from './patterns/product-card';
 import { ReaderSurface } from './patterns/reader';
-import { ResponsivePanel } from './patterns/responsive-panel';
 import { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';
 import { SectionHeader } from './patterns/section-header';
 import { SelectableItem } from './patterns/selection';
@@ -98,8 +93,6 @@ import { ThemeComposer } from './patterns/theme-composer';
 import { PaletteItem, TileGrid } from './patterns/tile-grid';
 import { Timeline } from './patterns/timeline';
 import { TreeItem, TreeView } from './patterns/tree-view';
-import { ZoraDrawerContent } from './patterns/zora-drawer-content';
-import { ZoraTabBar } from './patterns/zora-tab-bar';
 import { ThemeModeToggle } from './theme/ThemeModeToggle';
 
 export type ZoraComponentRegistry = Readonly<Record<string, React.ElementType>>;
@@ -128,8 +121,6 @@ type _RegistryInteractionPolicyCheck = _AssertTrue<
 >;
 
 const _ZORA_COMPONENT_REGISTRY = {
-  ActionSheet,
-  ActionSheetItem,
   AppBar,
   Avatar,
   AvatarGroup,
@@ -144,7 +135,6 @@ const _ZORA_COMPONENT_REGISTRY = {
   ChipGroup,
   DataTable,
   DatePicker,
-  Drawer,
   DropdownMenu,
   Form,
   FormActions,
@@ -160,8 +150,6 @@ const _ZORA_COMPONENT_REGISTRY = {
   Menu,
   MetricCard,
   Modal,
-  NavigationItem,
-  NavigationList,
   Pagination,
   Progress,
   ProgressRing,
@@ -225,7 +213,6 @@ const _ZORA_COMPONENT_REGISTRY = {
   Panel,
   PostCard,
   ProductCard,
-  ResponsivePanel,
   ReaderSurface,
   BarcodeScannerView,
   CameraPermissionView,
@@ -240,8 +227,6 @@ const _ZORA_COMPONENT_REGISTRY = {
   Timeline,
   TreeItem,
   TreeView,
-  ZoraDrawerContent,
-  ZoraTabBar,
 } as const satisfies ZoraComponentRegistry;
 
 export const ZORA_COMPONENT_REGISTRY: ZoraComponentRegistry = _ZORA_COMPONENT_REGISTRY;