@ankhorage/zora 4.5.0 → 5.0.0

package/src/internal/resolveZoraNavigationItems.ts

@@ -1,157 +0,0 @@
-import type React from 'react';
-
-import type {
-  ZoraNavigationRouteMetadata,
-  ZoraNavigationRouteState,
-} from '../components/navigation-item';
-import type { ZoraNavigationRouteMap } from '../components/navigation-list';
-
-interface ZoraNavigationDescriptorOptions {
-  title?: string;
-  tabBarLabel?: unknown;
-  drawerLabel?: unknown;
-}
-
-export interface ZoraNavigationDescriptor {
-  options?: ZoraNavigationDescriptorOptions;
-}
-
-export type ZoraNavigationDescriptors = Readonly<
-  Record<string, ZoraNavigationDescriptor | undefined>
->;
-
-export interface ZoraNavigationState {
-  index: number;
-  routes: readonly ZoraNavigationRouteState[];
-}
-
-interface ZoraTabPressEvent {
-  type: 'tabPress';
-  target: string;
-  canPreventDefault: true;
-}
-
-interface ZoraTabPressEventResult {
-  defaultPrevented: boolean;
-}
-
-export interface ZoraTabBarNavigation {
-  emit?: (event: ZoraTabPressEvent) => ZoraTabPressEventResult;
-  navigate: (name: string) => void;
-}
-
-export interface ZoraDrawerNavigation {
-  navigate: (name: string) => void;
-  closeDrawer?: () => void;
-}
-
-export interface ZoraResolvedNavigationItem {
-  route: ZoraNavigationRouteState;
-  metadata?: ZoraNavigationRouteMetadata;
-  label: React.ReactNode;
-  active: boolean;
-  disabled: boolean;
-}
-
-export type ZoraRouteLabelSource = 'routeMap' | 'descriptor' | 'name';
-
-export function resolveRouteLabel({
-  route,
-  metadata,
-  descriptor,
-  kind,
-}: {
-  route: ZoraNavigationRouteState;
-  metadata: ZoraNavigationRouteMetadata | undefined;
-  descriptor: ZoraNavigationDescriptor | undefined;
-  kind: 'tab' | 'drawer';
-}): { label: React.ReactNode; source: ZoraRouteLabelSource } {
-  if (metadata?.label !== undefined) {
-    return { label: metadata.label, source: 'routeMap' };
-  }
-
-  const options = descriptor?.options;
-  const configuredLabel = kind === 'tab' ? options?.tabBarLabel : options?.drawerLabel;
-  const fallback =
-    configuredLabel === undefined || typeof configuredLabel === 'function'
-      ? options?.title
-      : configuredLabel;
-
-  if (fallback !== undefined) {
-    return { label: fallback as React.ReactNode, source: 'descriptor' };
-  }
-
-  return { label: route.name, source: 'name' };
-}
-
-export function resolveNavigationItems({
-  state,
-  descriptors,
-  routeMap,
-  kind,
-}: {
-  state: ZoraNavigationState;
-  descriptors?: ZoraNavigationDescriptors | undefined;
-  routeMap?: ZoraNavigationRouteMap | undefined;
-  kind: 'tab' | 'drawer';
-}): readonly ZoraResolvedNavigationItem[] {
-  const activeRoute = state.routes[state.index];
-
-  return state.routes.map((route) => {
-    const metadata = routeMap?.[route.name];
-    const descriptor = descriptors?.[route.key];
-    const { label } = resolveRouteLabel({ route, metadata, descriptor, kind });
-    const disabled = Boolean(metadata?.disabled);
-
-    return {
-      route,
-      metadata,
-      label,
-      active: activeRoute ? activeRoute.key === route.key : false,
-      disabled,
-    };
-  });
-}
-
-export function createTabBarItemPressHandler({
-  item,
-  navigation,
-}: {
-  item: ZoraResolvedNavigationItem;
-  navigation: ZoraTabBarNavigation;
-}): (() => void) | undefined {
-  if (item.disabled || item.active) {
-    return undefined;
-  }
-
-  return () => {
-    const result = navigation.emit?.({
-      type: 'tabPress',
-      target: item.route.key,
-      canPreventDefault: true,
-    });
-
-    if (result?.defaultPrevented) {
-      return;
-    }
-
-    navigation.navigate(item.route.name);
-  };
-}
-
-export function createDrawerItemPressHandler({
-  item,
-  navigation,
-}: {
-  item: ZoraResolvedNavigationItem;
-  navigation: ZoraDrawerNavigation;
-}): (() => void) | undefined {
-  if (item.disabled) {
-    return undefined;
-  }
-
-  return () => {
-    navigation.navigate(item.route.name);
-    navigation.closeDrawer?.();
-  };
-}

package/src/navigationExports.test.ts

@@ -1,15 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, test } from 'bun:test';
-
-describe('navigation exports', () => {
-  test('exports navigation chrome from src/index.ts', () => {
-    const source = readFileSync(join(process.cwd(), 'src', 'index.ts'), 'utf8');
-
-    expect(source).toContain('export { NavigationItem }');
-    expect(source).toContain('export { NavigationList }');
-    expect(source).toContain('export { ZoraTabBar }');
-    expect(source).toContain('export { ZoraDrawerContent }');
-  });
-});

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-
-import { Drawer } from '../../components/drawer';
-import { Modal } from '../../components/modal';
-import type { ZoraContentWidth } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Panel } from '../panel';
-import type { ResponsivePanelProps, ResponsivePanelScroll, ResponsivePanelSize } from './types';
-
-function resolvePanelWidth(size: ResponsivePanelSize): number {
-  switch (size) {
-    case 'compact':
-      return 300;
-    case 'wide':
-      return 420;
-    case 'extraWide':
-      return 560;
-    case 'default':
-    default:
-      return 360;
-  }
-}
-
-function resolveModalWidth(size: ResponsivePanelSize | undefined): ZoraContentWidth | undefined {
-  switch (size) {
-    case 'compact':
-      return 'narrow';
-    case 'wide':
-    case 'extraWide':
-      return 'wide';
-    case 'default':
-      return 'default';
-    default:
-      return undefined;
-  }
-}
-
-function renderPanelBody(children: React.ReactNode, scroll: ResponsivePanelScroll) {
-  if (children == null) return null;
-
-  if (scroll === 'content') {
-    return (
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator
-        style={styles.scrollBody}
-      >
-        {children}
-      </ScrollView>
-    );
-  }
-
-  return children;
-}
-
-function ResponsivePanelInner({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  description,
-  actions,
-  footer,
-  children,
-  open,
-  onOpenChange,
-  side = 'right',
-  desktopMode = 'inline',
-  mobileMode = 'drawer',
-  compact = true,
-  size,
-  scroll = 'none',
-  testID,
-  interactionPolicy,
-}: ResponsivePanelProps) {
-  if (!open) return null;
-
-  const passive = interactionPolicy === 'passive';
-  const body = renderPanelBody(children, scroll);
-
-  // For now, we assume desktopMode determines the rendering.
-  // In a real app, this would react to window size.
-  if (desktopMode === 'floating') {
-    if (mobileMode === 'modal') {
-      const modalWidth = resolveModalWidth(size);
-
-      return (
-        <Modal
-          description={description}
-          footer={footer}
-          interactionPolicy={interactionPolicy}
-          onDismiss={() => {
-            if (passive) return;
-
-            onOpenChange(false);
-          }}
-          testID={testID}
-          title={title}
-          visible={open}
-          width={modalWidth}
-        >
-          {body}
-        </Modal>
-      );
-    }
-
-    return (
-      <Drawer
-        description={description}
-        footer={footer}
-        interactionPolicy={interactionPolicy}
-        onDismiss={() => {
-          if (passive) return;
-
-          onOpenChange(false);
-        }}
-        position={side}
-        testID={testID}
-        title={title}
-        visible={open}
-      >
-        {body}
-      </Drawer>
-    );
-  }
-
-  const panel = (
-    <Panel
-      actions={actions}
-      compact={compact}
-      description={description}
-      footer={footer}
-      interactionPolicy={interactionPolicy}
-      testID={testID}
-      title={title}
-    >
-      {body}
-    </Panel>
-  );
-
-  if (size === undefined) return panel;
-
-  return <View style={[styles.inlineSizedPanel, { width: resolvePanelWidth(size) }]}>{panel}</View>;
-}
-
-const styles = StyleSheet.create({
-  inlineSizedPanel: {
-    maxWidth: '100%',
-  },
-  scrollBody: {
-    flexGrow: 0,
-    maxHeight: '100%',
-  },
-  scrollContent: {
-    flexGrow: 1,
-  },
-});
-
-/***
- * Adaptive secondary surface that can render as an inline panel, drawer, or modal.
- *
- * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
- * content to work across compact mobile screens and wider desktop layouts.
- *
- 
- * @example Scrollable wide panel
- * ```tsx
- * <ResponsivePanel open title="APIs" size="wide" scroll="content">...</ResponsivePanel>
- * ```
- */
-export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

package/src/patterns/responsive-panel/index.ts

@@ -1,2 +0,0 @@
-export * from './ResponsivePanel';
-export * from './types';

package/src/patterns/responsive-panel/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const responsivePanelMeta = {
-  name: 'ResponsivePanel',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Responsive panel pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/responsive-panel/types.ts

@@ -1,25 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ResponsivePanelSide = 'left' | 'right';
-export type ResponsivePanelDesktopMode = 'inline' | 'floating';
-export type ResponsivePanelMobileMode = 'drawer' | 'modal';
-export type ResponsivePanelSize = 'compact' | 'default' | 'wide' | 'extraWide';
-export type ResponsivePanelScroll = 'none' | 'content';
-
-export interface ResponsivePanelProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  actions?: React.ReactNode;
-  footer?: React.ReactNode;
-  children?: React.ReactNode;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  side?: ResponsivePanelSide;
-  desktopMode?: ResponsivePanelDesktopMode;
-  mobileMode?: ResponsivePanelMobileMode;
-  compact?: boolean;
-  size?: ResponsivePanelSize;
-  scroll?: ResponsivePanelScroll;
-}

package/src/patterns/zora-drawer-content/ZoraDrawerContent.tsx

@@ -1,60 +0,0 @@
-import { DrawerNavigation as SurfaceDrawerNavigation } from '@ankhorage/surface';
-import React from 'react';
-
-import {
-  createDrawerItemPressHandler,
-  resolveNavigationItems,
-} from '../../internal/resolveZoraNavigationItems';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ZoraDrawerContentProps } from './types';
-
-function ZoraDrawerContentInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  state,
-  navigation,
-  descriptors,
-  routeMap,
-  compact = false,
-  header,
-  footer,
-  testID,
-}: ZoraDrawerContentProps) {
-  const resolved = resolveNavigationItems({
-    state,
-    descriptors,
-    routeMap,
-    kind: 'drawer',
-  });
-
-  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: createDrawerItemPressHandler({ item, navigation }),
-    accessibilityLabel: item.metadata?.accessibilityLabel,
-    testID: item.metadata?.testID,
-  }));
-
-  return (
-    <SurfaceDrawerNavigation
-      compact={compact}
-      footer={footer}
-      header={header}
-      interactionPolicy={interactionPolicy}
-      items={items}
-      testID={testID}
-    />
-  );
-}
-
-/***
- * Standard drawer content pattern for ZORA navigation lists.
- *
- 
- */
-export const ZoraDrawerContent = withZoraThemeScope(ZoraDrawerContentInner);

package/src/patterns/zora-drawer-content/index.ts

@@ -1,2 +0,0 @@
-export type { ZoraDrawerContentProps } from './types';
-export { ZoraDrawerContent } from './ZoraDrawerContent';

package/src/patterns/zora-drawer-content/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const zoraDrawerContentMeta = {
-  name: 'ZoraDrawerContent',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Navigation chrome pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/zora-drawer-content/types.ts

@@ -1,20 +0,0 @@
-import type React from 'react';
-
-import type { ZoraNavigationRouteMap } from '../../components/navigation-list';
-import type {
-  ZoraDrawerNavigation,
-  ZoraNavigationDescriptors,
-  ZoraNavigationState,
-} from '../../internal/resolveZoraNavigationItems';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ZoraDrawerContentProps extends ZoraBaseProps {
-  state: ZoraNavigationState;
-  navigation: ZoraDrawerNavigation;
-  descriptors?: ZoraNavigationDescriptors | undefined;
-  routeMap?: ZoraNavigationRouteMap | undefined;
-  compact?: boolean;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  testID?: string;
-}

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

@@ -1,157 +0,0 @@
-import React from 'react';
-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';
-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,
-  interactionPolicy,
-  state,
-  navigation,
-  descriptors,
-  insets,
-  routeMap,
-  compact = false,
-  chrome = 'raised',
-  testID,
-}: ZoraTabBarProps) {
-  const { theme } = useZoraTheme();
-  const resolved = resolveNavigationItems({
-    state,
-    descriptors,
-    routeMap,
-    kind: 'tab',
-  });
-
-  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={
-              interactionPolicy === 'passive'
-                ? undefined
-                : 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
-                {...item.metadata.icon}
-                color={contentColor}
-                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;
-  }
-
-  return (
-    <Surface
-      interactionPolicy={interactionPolicy}
-      testID={testID ? `${testID}-chrome` : undefined}
-      variant="raised"
-    >
-      {content}
-    </Surface>
-  );
-}
-
-/***
- * Bottom tab bar pattern with badge support and active state styling.
- *
- 
- */
-export const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);

package/src/patterns/zora-tab-bar/index.ts

@@ -1,2 +0,0 @@
-export type { ZoraTabBarProps } from './types';
-export { ZoraTabBar } from './ZoraTabBar';

package/src/patterns/zora-tab-bar/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const zoraTabBarMeta = {
-  name: 'ZoraTabBar',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Navigation chrome pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/zora-tab-bar/types.ts

@@ -1,18 +0,0 @@
-import type { ZoraNavigationRouteMap } from '../../components/navigation-list';
-import type {
-  ZoraNavigationDescriptors,
-  ZoraNavigationState,
-  ZoraTabBarNavigation,
-} from '../../internal/resolveZoraNavigationItems';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ZoraTabBarProps extends ZoraBaseProps {
-  state: ZoraNavigationState;
-  navigation: ZoraTabBarNavigation;
-  descriptors?: ZoraNavigationDescriptors | undefined;
-  insets?: { top?: number; bottom?: number; left?: number; right?: number } | undefined;
-  routeMap?: ZoraNavigationRouteMap | undefined;
-  compact?: boolean;
-  chrome?: 'none' | 'raised';
-  testID?: string;
-}