@ankhorage/zora 7.0.0 → 8.0.0

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/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;
+}

package/src/types/media-card.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { ZoraCardTone } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+interface MediaCardWithImageSource {
+  imageSource: ImageSourcePropType;
+  imageLabel?: string;
+  image?: never;
+}
+
+interface MediaCardWithImageSlot {
+  image: React.ReactNode;
+  imageSource?: never;
+  imageLabel?: never;
+}
+
+interface MediaCardWithoutImage {
+  image?: never;
+  imageSource?: never;
+  imageLabel?: never;
+}
+
+export type MediaCardImageProps =
+  MediaCardWithImageSource | MediaCardWithImageSlot | MediaCardWithoutImage;
+
+interface MediaCardBaseProps extends ZoraBaseProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  badges?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  onPress?: () => void;
+  imageAspectRatio?: number;
+}
+
+export type MediaCardProps = MediaCardBaseProps & MediaCardImageProps;

package/src/types/metric-card.ts

@@ -0,0 +1,18 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraCardTone, ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface MetricCardProps extends ZoraBaseProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: ButtonIconSpec;
+  delta?: React.ReactNode;
+  deltaColor?: ZoraColor;
+  actions?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  onPress?: () => void;
+}

package/src/types/post-card.ts

@@ -0,0 +1,71 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { AvatarShape, AvatarSize } from '../features/avatar/public';
+import type { ZoraCardTone, ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface PostAuthorAvatar {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  color?: ZoraColor;
+}
+
+export interface PostAuthor {
+  name: React.ReactNode;
+  subtitle?: React.ReactNode;
+  avatar?: PostAuthorAvatar;
+}
+
+interface PostCardSourceMedia {
+  source: ImageSourcePropType;
+  label: string;
+  aspectRatio?: number;
+  children?: never;
+}
+
+interface PostCardCustomMedia {
+  children: React.ReactNode;
+  label?: string;
+  aspectRatio?: number;
+  source?: never;
+}
+
+export type PostCardMedia = PostCardSourceMedia | PostCardCustomMedia;
+
+export interface PostAction {
+  id: string;
+  label: string;
+  icon?: ButtonIconSpec;
+  count?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+export interface PostCommentPreview {
+  id: string;
+  author?: PostAuthor;
+  text: React.ReactNode;
+  meta?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export interface PostCardProps extends ZoraBaseProps {
+  author: PostAuthor;
+  text?: React.ReactNode;
+  children?: React.ReactNode;
+  media?: PostCardMedia | readonly PostCardMedia[];
+  actions?: readonly PostAction[];
+  comments?: readonly PostCommentPreview[];
+  headerAction?: React.ReactNode;
+  footer?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  onPress?: () => void;
+}

package/src/types/product-card.ts

@@ -0,0 +1,23 @@
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ProductCardProps extends ZoraBaseProps {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  brand?: string;
+  vendor?: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  price?: string;
+  currency?: string;
+  badges?: readonly string[];
+  meta?: readonly {
+    label: string;
+    value: string;
+  }[];
+  primaryActionLabel?: string;
+  secondaryActionLabel?: string;
+  onPress?: () => void;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+}

package/src/types/splash-screen.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+
+import type { BoxProps } from '../features/layout/public';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type SplashScreenLogoShape = 'circle' | 'square' | 'rounded';
+
+export interface SplashScreenProps extends ZoraBaseProps {
+  logo?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  children?: React.ReactNode;
+  minHeight?: BoxProps['minHeight'];
+  backgroundColor?: BoxProps['bg'];
+  logoSize?: number;
+  logoLabel?: string;
+  logoShape?: SplashScreenLogoShape;
+}

package/src/types/surface.ts

@@ -0,0 +1,7 @@
+import type { SurfaceProps as SurfaceSurfaceProps } from '@ankhorage/surface';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type { SurfaceVariant } from '@ankhorage/surface';
+export interface SurfaceProps
+  extends ZoraBaseProps, Omit<SurfaceSurfaceProps, 'mode' | 'themeId'> {}

package/src/types/text.ts

@@ -0,0 +1,41 @@
+import type { Responsive } from '@ankhorage/surface';
+import type React from 'react';
+import type {
+  AccessibilityRole,
+  StyleProp,
+  TextProps as ReactNativeTextProps,
+  TextStyle,
+} from 'react-native';
+
+import type { ZoraColor, ZoraEmphasis } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
+
+export type TextColor = ZoraColor;
+export type TextEmphasis = ZoraEmphasis;
+
+export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
+
+export type TextAlign = NonNullable<TextStyle['textAlign']>;
+
+export interface TextProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  text?: string;
+  i18nKey?: string;
+  variant?: Responsive<TextVariant>;
+  color?: Responsive<TextColor>;
+  emphasis?: Responsive<TextEmphasis>;
+  align?: Responsive<TextAlign>;
+  weight?: Responsive<TextWeight>;
+  italic?: boolean;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  selectable?: boolean;
+  style?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityLiveRegion?: ReactNativeTextProps['accessibilityLiveRegion'];
+  nativeID?: string;
+}

package/src/types/upload.ts

@@ -43,9 +43,15 @@ export interface ValidateUploadAssetInput {
 }
 
 export interface UploaderProps extends ZoraBaseProps {
-  value: UploadAsset | null;
-  onChange: (next: UploadAsset | null) => void;
-  label: React.ReactNode;
+  value?: UploadAsset | null;
+  onChange?: (next: UploadAsset | null) => void;
+  onValueChange?: (next: UploadAsset | null) => void;
+  onUploadRequest?: (event: { asset: UploadAsset }) => void;
+  onRemoveRequest?: (event: { asset: UploadAsset }) => void;
+  onValidationError?: (event: { message: string }) => void;
+  uploadState?: 'idle' | 'uploading' | 'removing';
+  uploadProgress?: number;
+  label?: React.ReactNode;
   description?: React.ReactNode;
   helperText?: React.ReactNode;
   errorText?: React.ReactNode;

package/src/utils/createManifestBindings.ts

@@ -0,0 +1,47 @@
+import type { UiComponentBindingMeta } from '@ankhorage/contracts';
+
+import type { ZoraComponentMeta } from '../metadata/types';
+
+/*** Derives scalar bindings and normalized events from explicit component authoring schemas. */
+export function createManifestBindings(
+  props: ZoraComponentMeta['props'],
+  events: ZoraComponentMeta['events'] = {},
+): UiComponentBindingMeta {
+  return {
+    props: Object.fromEntries(
+      Object.entries(props)
+        .filter(([, schema]) => schema.type !== 'action')
+        .map(([key, schema]) => [
+          key,
+          {
+            label: schema.label ?? key,
+            acceptsFallback: true,
+            acceptsTransforms: true,
+            value: {
+              type:
+                schema.type === 'boolean' || schema.type === 'number' || schema.type === 'array'
+                  ? schema.type
+                  : schema.type === 'media' || schema.type === 'imageAsset'
+                    ? 'imageAsset'
+                    : schema.type === 'spacing' || schema.type === 'radius'
+                      ? 'unknown'
+                      : schema.type === 'enum' &&
+                          schema.enum?.length &&
+                          schema.enum.every((value) => typeof value === 'number')
+                        ? 'number'
+                        : 'string',
+            },
+          },
+        ]),
+    ),
+    events: Object.fromEntries(
+      Object.entries(events).map(([key, event]) => [
+        key,
+        {
+          label: event.label,
+          payload: { eventType: event.eventType, fields: event.payloadFields ?? [] },
+        },
+      ]),
+    ),
+  };
+}

package/src/utils/finalizeFeatureMetadata.ts

@@ -0,0 +1,26 @@
+import { FEATURE_MANIFEST_ELEMENTS } from '../constants';
+import type { ZoraComponentMetaRegistry } from '../metadata/types';
+import { createManifestBindings } from './createManifestBindings';
+
+/*** Completes feature bindings while preserving each component's explicit value contracts. */
+export function finalizeFeatureMetadata(
+  registry: ZoraComponentMetaRegistry,
+): ZoraComponentMetaRegistry {
+  const names: ReadonlySet<string> = new Set(Object.values(FEATURE_MANIFEST_ELEMENTS).flat());
+  return Object.fromEntries(
+    Object.entries(registry).map(([name, meta]) => {
+      if (!names.has(name)) return [name, meta];
+      const bindings = createManifestBindings(meta.props, meta.events);
+      return [
+        name,
+        {
+          ...meta,
+          bindings: {
+            props: { ...bindings.props, ...meta.bindings?.props },
+            events: { ...bindings.events, ...meta.bindings?.events },
+          },
+        },
+      ];
+    }),
+  );
+}

package/dist/components/avatar/Avatar.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { AvatarProps } from './types';
-/***
- * Displays a user or entity avatar with image support and initials fallback.
- */
-export declare const Avatar: (props: AvatarProps) => React.ReactElement | null;
-//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/avatar/Avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,WAAW,EAA2B,MAAM,SAAS,CAAC;AAqIpE;;GAEG;AACH,eAAO,MAAM,MAAM,mDAAkC,CAAC"}