@ankhorage/zora 7.0.0 → 9.0.0

package/src/theme/themeScopeStructure.test.ts

@@ -53,32 +53,34 @@ const scopeGuardDirs = [
 const scopeGuardFiles = scopeGuardDirs.flatMap(collectSourceFiles);
 
 const scopedComponentFiles = [
+  join(srcDir, 'features', 'list', 'adapters', 'inbound', 'FlatList.tsx'),
+  join(srcDir, 'features', 'list', 'adapters', 'inbound', 'SectionList.tsx'),
+  join(srcDir, 'features', 'bottom-sheet', 'adapters', 'inbound', 'BottomSheet.tsx'),
   join(srcDir, 'components', 'app-bar', 'AppBar.tsx'),
-  join(srcDir, 'components', 'badge', 'Badge.tsx'),
-  join(srcDir, 'components', 'button', 'Button.tsx'),
-  join(srcDir, 'components', 'button-group', 'ButtonGroup.tsx'),
-  join(srcDir, 'components', 'card', 'Card.tsx'),
-  join(srcDir, 'components', 'media-card', 'MediaCard.tsx'),
-  join(srcDir, 'components', 'metric-card', 'MetricCard.tsx'),
-  join(srcDir, 'components', 'checkbox', 'Checkbox.tsx'),
-  join(srcDir, 'components', 'checkbox', 'CheckboxGroup.tsx'),
+  join(srcDir, 'features', 'badge', 'adapters', 'inbound', 'Badge.tsx'),
+  join(srcDir, 'features', 'button', 'adapters', 'inbound', 'Button.tsx'),
+  join(srcDir, 'features', 'button', 'adapters', 'inbound', 'ButtonGroup.tsx'),
+  join(srcDir, 'features', 'card', 'adapters', 'inbound', 'Card.tsx'),
+  join(srcDir, 'features', 'card', 'adapters', 'inbound', 'MediaCard.tsx'),
+  join(srcDir, 'features', 'card', 'adapters', 'inbound', 'MetricCard.tsx'),
+  join(srcDir, 'features', 'form', 'checkbox', 'adapters', 'inbound', 'Checkbox.tsx'),
+  join(srcDir, 'features', 'form', 'checkbox', 'adapters', 'inbound', 'CheckboxGroup.tsx'),
   join(srcDir, 'components', 'form', 'Form.tsx'),
   join(srcDir, 'components', 'form', 'FormActions.tsx'),
   join(srcDir, 'components', 'form', 'FormError.tsx'),
   join(srcDir, 'components', 'form', 'FormField.tsx'),
-  join(srcDir, 'components', 'heading', 'Heading.tsx'),
-  join(srcDir, 'components', 'icon', 'Icon.tsx'),
-  join(srcDir, 'components', 'icon-button', 'IconButton.tsx'),
-  join(srcDir, 'components', 'input', 'Input.tsx'),
+  join(srcDir, 'features', 'typography', 'adapters', 'inbound', 'Heading.tsx'),
+  join(srcDir, 'features', 'icon', 'adapters', 'inbound', 'Icon.tsx'),
+  join(srcDir, 'features', 'button', 'adapters', 'inbound', 'IconButton.tsx'),
+  join(srcDir, 'features', 'form', 'text-input', 'adapters', 'inbound', 'TextInput.tsx'),
   join(srcDir, 'components', 'modal', 'Modal.tsx'),
-  join(srcDir, 'components', 'progress', 'Progress.tsx'),
-  join(srcDir, 'components', 'radio', 'Radio.tsx'),
-  join(srcDir, 'components', 'radio', 'RadioGroup.tsx'),
+  join(srcDir, 'features', 'progress', 'adapters', 'inbound', 'Progress.tsx'),
+  join(srcDir, 'features', 'form', 'radio', 'adapters', 'inbound', 'Radio.tsx'),
+  join(srcDir, 'features', 'form', 'radio', 'adapters', 'inbound', 'RadioGroup.tsx'),
   join(srcDir, 'components', 'rating', 'Rating.tsx'),
   join(srcDir, 'components', 'select', 'Select.tsx'),
   join(srcDir, 'components', 'tabs', 'Tabs.tsx'),
-  join(srcDir, 'components', 'text', 'Text.tsx'),
-  join(srcDir, 'components', 'textarea', 'Textarea.tsx'),
+  join(srcDir, 'features', 'typography', 'adapters', 'inbound', 'Text.tsx'),
   join(srcDir, 'components', 'toolbar', 'Toolbar.tsx'),
   join(srcDir, 'components', 'toolbar', 'ToolbarAction.tsx'),
 
@@ -96,7 +98,7 @@ const scopedComponentFiles = [
   join(srcDir, 'patterns', 'collection-editor', 'CollectionEditor.tsx'),
   join(srcDir, 'patterns', 'confirm-dialog', 'ConfirmDialog.tsx'),
   join(srcDir, 'patterns', 'disclosure-section', 'DisclosureSection.tsx'),
-  join(srcDir, 'patterns', 'empty-state', 'EmptyState.tsx'),
+  join(srcDir, 'features', 'empty-state', 'adapters', 'inbound', 'EmptyState.tsx'),
   join(srcDir, 'patterns', 'form-field', 'FormField.tsx'),
   join(srcDir, 'patterns', 'inspector-field', 'InspectorField.tsx'),
   join(srcDir, 'patterns', 'list', 'List.tsx'),
@@ -113,40 +115,39 @@ const scopedComponentFiles = [
   join(srcDir, 'patterns', 'tree-view', 'TreeItem.tsx'),
   join(srcDir, 'patterns', 'tree-view', 'TreeView.tsx'),
 
-  join(srcDir, 'foundation', 'Box.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Box.tsx'),
   join(srcDir, 'foundation', 'Center.tsx'),
-  join(srcDir, 'foundation', 'Container.tsx'),
-  join(srcDir, 'foundation', 'Divider.tsx'),
-  join(srcDir, 'foundation', 'Grid.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Container.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Divider.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Grid.tsx'),
   join(srcDir, 'foundation', 'Inline.tsx'),
   join(srcDir, 'foundation', 'Show.tsx'),
   join(srcDir, 'foundation', 'Spacer.tsx'),
-  join(srcDir, 'foundation', 'Stack.tsx'),
-  join(srcDir, 'foundation', 'Surface.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Stack.tsx'),
+  join(srcDir, 'features', 'surface', 'adapters', 'inbound', 'Surface.tsx'),
 ] as const;
 
 const scopedPropTypeFiles = [
   join(srcDir, 'components', 'app-bar', 'types.ts'),
-  join(srcDir, 'components', 'badge', 'types.ts'),
-  join(srcDir, 'components', 'button', 'types.ts'),
-  join(srcDir, 'components', 'button-group', 'types.ts'),
-  join(srcDir, 'components', 'card', 'types.ts'),
-  join(srcDir, 'components', 'media-card', 'types.ts'),
-  join(srcDir, 'components', 'metric-card', 'types.ts'),
-  join(srcDir, 'components', 'checkbox', 'types.ts'),
+  join(srcDir, 'types', 'badge.ts'),
+  join(srcDir, 'types', 'button.ts'),
+  join(srcDir, 'types', 'button-group.ts'),
+  join(srcDir, 'types', 'card.ts'),
+  join(srcDir, 'types', 'media-card.ts'),
+  join(srcDir, 'types', 'metric-card.ts'),
+  join(srcDir, 'types', 'checkbox.ts'),
   join(srcDir, 'components', 'form', 'types.ts'),
-  join(srcDir, 'components', 'heading', 'types.ts'),
-  join(srcDir, 'components', 'icon', 'Icon.tsx'),
-  join(srcDir, 'components', 'icon-button', 'types.ts'),
-  join(srcDir, 'components', 'input', 'types.ts'),
+  join(srcDir, 'types', 'heading.ts'),
+  join(srcDir, 'types', 'icon.ts'),
+  join(srcDir, 'types', 'icon-button.ts'),
+  join(srcDir, 'types', 'text-input.ts'),
   join(srcDir, 'components', 'modal', 'types.ts'),
-  join(srcDir, 'components', 'progress', 'types.ts'),
-  join(srcDir, 'components', 'radio', 'types.ts'),
+  join(srcDir, 'types', 'progress.ts'),
+  join(srcDir, 'types', 'radio.ts'),
   join(srcDir, 'components', 'rating', 'types.ts'),
   join(srcDir, 'components', 'select', 'types.ts'),
   join(srcDir, 'components', 'tabs', 'types.ts'),
-  join(srcDir, 'components', 'text', 'types.ts'),
-  join(srcDir, 'components', 'textarea', 'types.ts'),
+  join(srcDir, 'types', 'text.ts'),
   join(srcDir, 'components', 'toolbar', 'types.ts'),
 
   join(srcDir, 'layout', 'app-shell', 'types.ts'),
@@ -160,7 +161,7 @@ const scopedPropTypeFiles = [
   join(srcDir, 'patterns', 'collection-editor', 'types.ts'),
   join(srcDir, 'patterns', 'confirm-dialog', 'types.ts'),
   join(srcDir, 'patterns', 'disclosure-section', 'types.ts'),
-  join(srcDir, 'patterns', 'empty-state', 'types.ts'),
+  join(srcDir, 'types', 'empty-state.ts'),
   join(srcDir, 'patterns', 'form-field', 'types.ts'),
   join(srcDir, 'patterns', 'inspector-field', 'types.ts'),
   join(srcDir, 'patterns', 'list', 'types.ts'),

package/src/types/activity-indicator.ts

@@ -0,0 +1,8 @@
+import type { ActivityIndicatorProps as ReactNativeActivityIndicatorProps } from 'react-native';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ActivityIndicatorProps
+  extends ZoraBaseProps, Omit<ReactNativeActivityIndicatorProps, 'color'> {
+  color?: ReactNativeActivityIndicatorProps['color'];
+}

package/src/types/avatar-group.ts

@@ -0,0 +1,24 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { AvatarShape, AvatarSize } from '../features/avatar/public';
+import type { ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface AvatarGroupItem {
+  id?: string;
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  iconFallback?: ButtonIconSpec;
+  label?: string;
+  color?: ZoraColor;
+}
+
+export interface AvatarGroupProps extends ZoraBaseProps {
+  items: readonly AvatarGroupItem[];
+  max?: number;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  overflowLabel?: (overflowCount: number) => string;
+}

package/src/types/avatar.ts

@@ -0,0 +1,20 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export type AvatarShape = 'circle' | 'rounded';
+
+export interface AvatarProps extends ZoraBaseProps {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  iconFallback?: ButtonIconSpec;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  color?: ZoraColor;
+}

package/src/types/badge.ts

@@ -0,0 +1,15 @@
+import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBadgeVariant, ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface BadgeProps
+  extends
+    ZoraBaseProps,
+    Omit<SurfaceBadgeProps, 'content' | 'size' | 'color' | 'variant' | 'mode' | 'themeId'> {
+  children?: React.ReactNode;
+  color?: ZoraColor;
+  variant?: ZoraBadgeVariant;
+  size?: ZoraControlSize;
+}

package/src/types/button-group.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+
+import type { StackProps } from '../features/layout/public';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type ButtonGroupAlign = 'start' | 'center' | 'end' | 'stretch' | 'between';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical' | 'responsive';
+
+export interface ButtonGroupProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  align?: ButtonGroupAlign;
+  orientation?: ButtonGroupOrientation;
+  gap?: StackProps['gap'];
+  reverse?: boolean;
+}

package/src/types/button.ts

@@ -0,0 +1,15 @@
+import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ButtonProps
+  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'color' | 'variant'> {
+  children?: React.ReactNode;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/types/card.ts

@@ -0,0 +1,19 @@
+import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraCardTone } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface CardProps
+  extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  padding?: string;
+  radius?: string;
+}

package/src/types/checkbox.ts

@@ -0,0 +1,29 @@
+import type { CheckboxProps as SurfaceCheckboxProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface CheckboxProps
+  extends ZoraBaseProps, Omit<SurfaceCheckboxProps, 'mode' | 'themeId'> {}
+
+export interface CheckboxGroupOption<TValue extends string> {
+  value: TValue;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}
+
+export interface CheckboxGroupProps<TValue extends string>
+  extends
+    ZoraBaseProps,
+    Pick<
+      Omit<SurfaceCheckboxProps, 'mode' | 'themeId'>,
+      'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'
+    > {
+  value: readonly TValue[];
+  onValueChange: (value: TValue[]) => void;
+  options: readonly CheckboxGroupOption<TValue>[];
+  orientation?: 'horizontal' | 'vertical';
+  gap?: 'xs' | 's' | 'm' | 'l';
+}

package/src/types/chip-group.ts

@@ -0,0 +1,36 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ChipGroupItem<TValue extends string = string> {
+  value: TValue;
+  label: React.ReactNode;
+  icon?: ButtonIconSpec;
+  disabled?: boolean;
+  testID?: string;
+}
+
+interface ChipGroupBaseProps<TValue extends string> extends ZoraBaseProps {
+  items: readonly ChipGroupItem<TValue>[];
+  color?: ZoraColor;
+  size?: ZoraControlSize;
+  wrap?: boolean;
+  disabled?: boolean;
+}
+
+interface ChipGroupSingleProps<TValue extends string> {
+  multiple?: false;
+  value?: TValue;
+  onValueChange?: (value: TValue) => void;
+}
+
+interface ChipGroupMultipleProps<TValue extends string> {
+  multiple: true;
+  value?: readonly TValue[];
+  onValueChange?: (value: TValue[]) => void;
+}
+
+export type ChipGroupProps<TValue extends string = string> = ChipGroupBaseProps<TValue> &
+  (ChipGroupSingleProps<TValue> | ChipGroupMultipleProps<TValue>);

package/src/types/chip.ts

@@ -0,0 +1,29 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ChipProps extends ZoraBaseProps {
+  children: React.ReactNode;
+  icon?: ButtonIconSpec;
+  selected?: boolean;
+  disabled?: boolean;
+  color?: ZoraColor;
+  size?: ZoraControlSize;
+  onPress?: () => void;
+}
+
+export interface ChipColors {
+  backgroundColor: string;
+  borderColor: string;
+  contentColor: string;
+  opacity?: number;
+}
+
+export interface ChipInteractionState {
+  pressed: boolean;
+  hovered: boolean;
+  focused: boolean;
+  disabled: boolean;
+}

package/src/types/content-rail.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type ContentRailDirection = 'auto' | 'ltr' | 'rtl';
+export type ContentRailItemSize = 'compact' | 'regular' | 'wide' | 'responsive' | 'content';
+export type ContentRailMotion = 'system' | 'animated' | 'reduced';
+export type ContentRailSpacing = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export interface ContentRailControlPressEvent {
+  direction: 'previous' | 'next';
+  targetIndex: number;
+}
+
+export interface ContentRailVisibleRangeChangeEvent {
+  firstVisibleIndex: number;
+  lastVisibleIndex: number;
+  itemCount: number;
+}
+
+export interface ContentRailProps extends ZoraBaseProps {
+  children?: ReactNode;
+  itemSize?: ContentRailItemSize;
+  gap?: ContentRailSpacing;
+  padding?: ContentRailSpacing;
+  peek?: number;
+  showControls?: boolean;
+  bounces?: boolean;
+  showsScrollIndicator?: boolean;
+  direction?: ContentRailDirection;
+  motion?: ContentRailMotion;
+  accessibilityLabel?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  onControlPress?: (event: ContentRailControlPressEvent) => void | Promise<void>;
+  onVisibleRangeChange?: (event: ContentRailVisibleRangeChangeEvent) => void | Promise<void>;
+}

package/src/types/data-table.ts

@@ -0,0 +1,58 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { MenuActionIntent } from '../components/menu';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type DataTableColumnAlign = 'start' | 'center' | 'end';
+export type DataTableDensity = 'comfortable' | 'compact';
+export type DataTableSortDirection = 'asc' | 'desc';
+
+export interface DataTableSortState {
+  columnId: string;
+  direction: DataTableSortDirection;
+}
+
+export interface DataTableCellContext<TRow extends object> {
+  row: TRow;
+  rowIndex: number;
+  column: DataTableColumn<TRow>;
+  value: unknown;
+}
+
+export interface DataTableColumn<TRow extends object> {
+  id: string;
+  header: React.ReactNode;
+  accessor?: keyof TRow;
+  align?: DataTableColumnAlign;
+  width?: number;
+  minWidth?: number;
+  sortable?: boolean;
+  renderCell?: (context: DataTableCellContext<TRow>) => React.ReactNode;
+}
+
+export interface DataTableRowAction<TRow extends object> {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: ButtonIconSpec;
+  intent?: MenuActionIntent;
+  disabled?: boolean;
+  onPress?: (row: TRow) => void;
+}
+
+export interface DataTableProps<TRow extends object> extends ZoraBaseProps {
+  columns: readonly DataTableColumn<TRow>[];
+  rows: readonly TRow[];
+  rowId?: (row: TRow, index: number) => string;
+  rowKey?: keyof TRow;
+  rowActions?: (row: TRow, index: number) => readonly DataTableRowAction<TRow>[];
+  sort?: DataTableSortState;
+  onSortChange?: (sort: DataTableSortState) => void;
+  loading?: boolean;
+  loadingRows?: number;
+  emptyTitle?: React.ReactNode;
+  emptyDescription?: React.ReactNode;
+  density?: DataTableDensity;
+  testID?: string;
+}

package/src/types/empty-state.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+import type { ZoraButtonVariant, ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface EmptyStateAction {
+  label: React.ReactNode;
+  onPress: () => void;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
+}
+
+export interface EmptyStateProps extends ZoraBaseProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  primaryAction?: EmptyStateAction;
+  secondaryAction?: EmptyStateAction;
+  footer?: React.ReactNode;
+}

package/src/types/heading.ts

@@ -0,0 +1,38 @@
+import type { Responsive } from '@ankhorage/surface';
+import type React from 'react';
+import type { AccessibilityRole, StyleProp, TextStyle } from 'react-native';
+
+import type { ZoraColor, ZoraEmphasis } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type HeadingColor = ZoraColor;
+export type HeadingEmphasis = ZoraEmphasis;
+
+export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
+
+export type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
+
+export interface HeadingProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  text?: string;
+  i18nKey?: string;
+  level?: HeadingLevel;
+  size?: Responsive<HeadingSize>;
+  color?: Responsive<HeadingColor>;
+  emphasis?: Responsive<HeadingEmphasis>;
+  align?: Responsive<HeadingAlign>;
+  weight?: Responsive<HeadingWeight>;
+  italic?: boolean;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  selectable?: boolean;
+  style?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  nativeID?: string;
+}

package/src/types/icon-button.ts

@@ -0,0 +1,17 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+
+import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface IconButtonProps extends ZoraBaseProps {
+  icon?: ButtonIconSpec;
+  iconName?: Extract<ButtonIconSpec, { provider?: 'Ionicons' }>['name'];
+  label: string;
+  variant?: ZoraButtonVariant;
+  color?: ZoraColor;
+  size?: ZoraControlSize;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}

package/src/types/icon.ts

@@ -0,0 +1,5 @@
+import type { IconProps as SurfaceIconProps } from '@ankhorage/surface';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type IconProps = ZoraBaseProps & SurfaceIconProps;

package/src/types/image.ts

@@ -0,0 +1,11 @@
+import type { ImageProps as SurfaceImageProps, SurfaceImageSource } from '@ankhorage/surface';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+import type { UploadAsset } from './upload';
+
+export type { ImageFit, SurfaceImageSource } from '@ankhorage/surface';
+
+export interface ImageProps
+  extends ZoraBaseProps, Omit<SurfaceImageProps, 'mode' | 'source' | 'themeId'> {
+  source?: SurfaceImageSource | UploadAsset | null;
+}

package/src/types/layout.ts

@@ -0,0 +1,17 @@
+import type {
+  BoxProps as SurfaceBoxProps,
+  ContainerProps as SurfaceContainerProps,
+  DividerProps as SurfaceDividerProps,
+  GridProps as SurfaceGridProps,
+  StackProps as SurfaceStackProps,
+} from '@ankhorage/surface';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface BoxProps extends ZoraBaseProps, Omit<SurfaceBoxProps, 'mode' | 'themeId'> {}
+export interface ContainerProps
+  extends ZoraBaseProps, Omit<SurfaceContainerProps, 'mode' | 'themeId'> {}
+export interface DividerProps
+  extends ZoraBaseProps, Omit<SurfaceDividerProps, 'mode' | 'themeId'> {}
+export interface GridProps extends ZoraBaseProps, Omit<SurfaceGridProps, 'mode' | 'themeId'> {}
+export interface StackProps extends ZoraBaseProps, Omit<SurfaceStackProps, 'mode' | 'themeId'> {}

package/src/types/manifest-bottom-sheet.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface BottomSheetProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  snapPoints?: readonly (number | string)[];
+  initialIndex?: number;
+  enableDynamicSizing?: boolean;
+  enablePanDownToClose?: boolean;
+  dismissOnBackdropPress?: boolean;
+  keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';
+  keyboardBlurBehavior?: 'none' | 'restore';
+  onDismiss?: () => void;
+  onIndexChange?: (event: { index: number }) => void;
+}

package/src/types/manifest-list.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ManifestListProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  horizontal?: boolean;
+  refreshing?: boolean;
+  initialNumToRender?: number;
+  maxToRenderPerBatch?: number;
+  windowSize?: number;
+  onEndReachedThreshold?: number;
+  showsScrollIndicator?: boolean;
+  bounces?: boolean;
+  showSeparators?: boolean;
+  headerText?: string;
+  footerText?: string;
+  emptyText?: string;
+  onRefresh?: () => void;
+  onEndReached?: (event: { distanceFromEnd: number }) => void;
+  onVisibleItemsChange?: (event: { keys: readonly string[] }) => void;
+}
+
+export interface ManifestListSection {
+  key: string;
+  title?: string;
+  itemCount: number;
+}
+
+export interface ManifestSectionListProps extends ManifestListProps {
+  sections: readonly ManifestListSection[];
+  stickySectionHeadersEnabled?: boolean;
+}