@ankhorage/zora 7.0.0 → 9.0.0

package/src/components/text/resolveTextRecipe.ts

@@ -1,214 +0,0 @@
-import {
-  type Breakpoint,
-  type FontWeight,
-  resolveResponsive,
-  type Responsive,
-  type RoleSemantics,
-  type SurfaceTheme,
-} from '@ankhorage/surface';
-import type { TextStyle } from 'react-native';
-
-import type { TextAlign, TextColor, TextEmphasis, TextVariant, TextWeight } from './types';
-
-interface VariantRecipe {
-  fontSize: number;
-  lineHeight: number;
-  weight: TextWeight;
-  textTransform?: TextStyle['textTransform'];
-  letterSpacing?: number;
-}
-
-interface ResolveTextStyleOptions {
-  theme: SurfaceTheme;
-  breakpoint: Breakpoint;
-  variant?: Responsive<TextVariant>;
-  color?: Responsive<TextColor>;
-  emphasis?: Responsive<TextEmphasis>;
-  weight?: Responsive<TextWeight>;
-  align?: Responsive<TextAlign>;
-  italic?: boolean;
-}
-
-function isMediumBreakpointOrLarger(breakpoint: Breakpoint): boolean {
-  return breakpoint === 'md' || breakpoint === 'lg' || breakpoint === 'xl';
-}
-
-function resolveWeight(theme: SurfaceTheme, weight: TextWeight): FontWeight {
-  switch (weight) {
-    case 'medium':
-      return theme.typography.weights.medium;
-    case 'semiBold':
-      return theme.typography.weights.semiBold;
-    case 'bold':
-      return theme.typography.weights.bold;
-    case 'regular':
-    default:
-      return theme.typography.weights.regular;
-  }
-}
-
-function resolveFontFamily({
-  theme,
-  variant,
-  weight,
-  italic,
-}: {
-  theme: SurfaceTheme;
-  variant: TextVariant;
-  weight: FontWeight;
-  italic: boolean;
-}): string | undefined {
-  if (variant === 'code') {
-    return 'monospace';
-  }
-
-  const fonts = italic ? theme.typography.fonts.italic : theme.typography.fonts.normal;
-
-  for (const [fontWeight, fontFamily] of Object.entries(fonts)) {
-    if (fontWeight === weight) {
-      return fontFamily;
-    }
-  }
-
-  return undefined;
-}
-
-function resolveVariantRecipe(
-  theme: SurfaceTheme,
-  variant: TextVariant,
-  breakpoint: Breakpoint,
-): VariantRecipe {
-  switch (variant) {
-    case 'lead':
-      return {
-        fontSize: isMediumBreakpointOrLarger(breakpoint)
-          ? theme.typography.sizes.l
-          : theme.typography.sizes.m,
-        lineHeight: isMediumBreakpointOrLarger(breakpoint) ? 28 : 24,
-        weight: 'regular',
-      };
-    case 'bodySmall':
-      return {
-        fontSize: theme.typography.sizes.s,
-        lineHeight: 20,
-        weight: 'regular',
-      };
-    case 'caption':
-      return {
-        fontSize: theme.typography.sizes.xs,
-        lineHeight: 16,
-        weight: 'regular',
-      };
-    case 'label':
-      return {
-        fontSize: theme.typography.sizes.s,
-        lineHeight: 18,
-        weight: 'medium',
-      };
-    case 'eyebrow':
-      return {
-        fontSize: theme.typography.sizes.xs,
-        lineHeight: 16,
-        weight: 'semiBold',
-        textTransform: 'uppercase',
-        letterSpacing: 0.8,
-      };
-    case 'code':
-      return {
-        fontSize: theme.typography.sizes.s,
-        lineHeight: 20,
-        weight: 'regular',
-      };
-    case 'body':
-    default:
-      return {
-        fontSize: theme.typography.sizes.m,
-        lineHeight: 24,
-        weight: 'regular',
-      };
-  }
-}
-
-function resolveRoleSemantics(theme: SurfaceTheme, color: TextColor): RoleSemantics {
-  switch (color) {
-    case 'secondary':
-      return theme.semantics.secondary;
-    case 'tertiary':
-      return theme.semantics.accent;
-    case 'quaternary':
-      return theme.semantics.highlight;
-    case 'neutral':
-      return theme.semantics.action.neutral;
-    case 'error':
-      return theme.semantics.error;
-    case 'info':
-      return theme.semantics.info;
-    case 'danger':
-      return theme.semantics.action.danger;
-    case 'success':
-      return theme.semantics.success;
-    case 'warning':
-      return theme.semantics.warning;
-    case 'primary':
-    default:
-      return theme.semantics.action.primary;
-  }
-}
-
-function resolveTextColor(theme: SurfaceTheme, emphasis: TextEmphasis, color?: TextColor): string {
-  if (color) {
-    const role = resolveRoleSemantics(theme, color);
-    return emphasis === 'inverse' ? role.onSolidText : role.base;
-  }
-
-  switch (emphasis) {
-    case 'muted':
-      return theme.semantics.content.muted;
-    case 'subtle':
-      return theme.semantics.content.subtle;
-    case 'inverse':
-      return theme.semantics.content.inverse;
-    case 'default':
-    default:
-      return theme.semantics.content.default;
-  }
-}
-
-export function resolveTextStyle({
-  theme,
-  breakpoint,
-  variant,
-  color,
-  emphasis,
-  weight,
-  align,
-  italic = false,
-}: ResolveTextStyleOptions): TextStyle {
-  const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
-  const resolvedEmphasis = resolveResponsive(emphasis, breakpoint) ?? 'default';
-  const resolvedColor = resolveResponsive(color, breakpoint);
-  const resolvedAlign = resolveResponsive(align, breakpoint);
-  const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);
-  const resolvedWeight = resolveWeight(
-    theme,
-    resolveResponsive(weight, breakpoint) ?? recipe.weight,
-  );
-
-  return {
-    color: resolveTextColor(theme, resolvedEmphasis, resolvedColor),
-    elevation: 0,
-    fontFamily: resolveFontFamily({
-      theme,
-      variant: resolvedVariant,
-      weight: resolvedWeight,
-      italic,
-    }),
-    fontSize: recipe.fontSize,
-    fontStyle: italic ? 'italic' : 'normal',
-    fontWeight: resolvedWeight,
-    letterSpacing: recipe.letterSpacing,
-    lineHeight: recipe.lineHeight,
-    textAlign: resolvedAlign,
-    textTransform: recipe.textTransform,
-  };
-}

package/src/components/text/resolveTextThemeRecipe.ts

@@ -1,48 +0,0 @@
-import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
-
-import type { TextAlign, TextColor, TextEmphasis, TextVariant, TextWeight } from './types';
-
-export function resolveTextThemeRecipe(fields: Readonly<Record<string, ThemeRecipeOverrideValue>>) {
-  return {
-    variant: readVariant(fields.variant),
-    color: readColor(fields.color),
-    emphasis: readEmphasis(fields.emphasis),
-    align: readAlign(fields.align),
-    weight: readWeight(fields.weight),
-    italic: typeof fields.italic === 'boolean' ? fields.italic : undefined,
-  };
-}
-
-function readVariant(value: ThemeRecipeOverrideValue | undefined): TextVariant | undefined {
-  if (value === 'body' || value === 'lead' || value === 'bodySmall' || value === 'caption')
-    return value;
-  if (value === 'label' || value === 'eyebrow' || value === 'code') return value;
-  return undefined;
-}
-
-function readColor(value: ThemeRecipeOverrideValue | undefined): TextColor | undefined {
-  if (typeof value !== 'string') return undefined;
-  if (value === 'primary' || value === 'secondary' || value === 'tertiary') return value;
-  if (value === 'quaternary' || value === 'neutral' || value === 'danger') return value;
-  if (value === 'success' || value === 'warning' || value === 'error' || value === 'info')
-    return value;
-  return undefined;
-}
-
-function readEmphasis(value: ThemeRecipeOverrideValue | undefined): TextEmphasis | undefined {
-  if (value === 'default' || value === 'muted' || value === 'subtle' || value === 'inverse')
-    return value;
-  return undefined;
-}
-
-function readAlign(value: ThemeRecipeOverrideValue | undefined): TextAlign | undefined {
-  if (value === 'auto' || value === 'left' || value === 'right') return value;
-  if (value === 'center' || value === 'justify') return value;
-  return undefined;
-}
-
-function readWeight(value: ThemeRecipeOverrideValue | undefined): TextWeight | undefined {
-  if (value === 'regular' || value === 'medium' || value === 'semiBold' || value === 'bold')
-    return value;
-  return undefined;
-}

package/src/components/text/themeRecipeMeta.ts

@@ -1,34 +0,0 @@
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';
-import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
-
-export const textThemeRecipeMeta = {
-  name: 'Text',
-  kind: 'component',
-  description: 'Maps semantic Text presentation defaults into runtime props.',
-  fields: {
-    variant: {
-      type: 'choice',
-      label: 'Typography variant',
-      options: ['body', 'lead', 'bodySmall', 'caption', 'label', 'eyebrow', 'code'],
-      default: 'body',
-    },
-    color: { type: 'choice', label: 'Color', options: ZORA_COLORS },
-    emphasis: {
-      type: 'choice',
-      label: 'Emphasis',
-      options: ZORA_EMPHASES,
-      default: 'default',
-    },
-    align: {
-      type: 'choice',
-      label: 'Align',
-      options: ['auto', 'left', 'right', 'center', 'justify'],
-    },
-    weight: {
-      type: 'choice',
-      label: 'Weight',
-      options: ['regular', 'medium', 'semiBold', 'bold'],
-    },
-    italic: { type: 'boolean', label: 'Italic', default: false },
-  },
-} as const satisfies ZoraThemeRecipeMeta;

package/src/components/text/types.ts

@@ -1,41 +0,0 @@
-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/components/textarea/Textarea.tsx

@@ -1,46 +0,0 @@
-import * as Surface from '@ankhorage/surface';
-import React from 'react';
-
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TextareaProps } from './types';
-
-function TextareaInner({
-  themeId: _themeId,
-  mode: _mode,
-  size = 'l',
-  leadingIcon,
-  trailingIcon,
-  interactionPolicy,
-  ...props
-}: TextareaProps) {
-  const { theme } = useZoraTheme();
-  const iconSize = resolveIconSize(size);
-  const iconColor = theme.semantics.content.muted;
-
-  return (
-    <Surface.Textarea
-      {...props}
-      interactionPolicy={interactionPolicy}
-      leadingAccessory={
-        leadingIcon ? (
-          <Surface.Icon {...leadingIcon} color={iconColor} size={iconSize} />
-        ) : undefined
-      }
-      size={size}
-      trailingAccessory={
-        trailingIcon ? (
-          <Surface.Icon {...trailingIcon} color={iconColor} size={iconSize} />
-        ) : undefined
-      }
-    />
-  );
-}
-
-/***
- * Multi-line text input with consistent ZORA field styling.
- *
- 
- */
-export const Textarea = withZoraThemeScope(TextareaInner);

package/src/components/textarea/index.ts

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

package/src/components/textarea/meta.ts

@@ -1,46 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const textareaMeta = {
-  name: 'Textarea',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: {
-    label: 'Textarea',
-    defaultProps: {
-      placeholder: 'Enter text…',
-      value: '',
-    },
-  },
-  props: {
-    placeholder: {
-      type: 'string',
-      category: 'Content',
-      label: 'Placeholder',
-    },
-    value: {
-      type: 'string',
-      category: 'Content',
-      label: 'Value',
-      default: '',
-    },
-    size: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Size',
-      enum: ['s', 'm', 'l'],
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-    },
-    readOnly: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Read-only',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/components/textarea/types.ts

@@ -1,16 +0,0 @@
-import type * as Surface from '@ankhorage/surface';
-
-import type { ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TextareaProps
-  extends
-    ZoraBaseProps,
-    Omit<
-      Surface.TextareaProps,
-      'leadingAccessory' | 'size' | 'trailingAccessory' | 'mode' | 'themeId'
-    > {
-  size?: ZoraControlSize;
-  leadingIcon?: Surface.ButtonIconSpec;
-  trailingIcon?: Surface.ButtonIconSpec;
-}

package/src/features/uploader/meta.ts

@@ -1,11 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const uploaderMeta = {
-  name: 'Uploader',
-  category: 'pattern',
-  description: 'Picks and manages one image, video, document, or generic file upload.',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Upload transport callbacks remain runtime-owned and are not serialized into AppManifest.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/foundation/Box.tsx

@@ -1,23 +0,0 @@
-import { Box as SurfaceBox, type BoxProps as SurfaceBoxProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface BoxProps extends ZoraBaseProps, Omit<SurfaceBoxProps, 'mode' | 'themeId'> {}
-
-function BoxInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: BoxProps) {
-  return <SurfaceBox {...props} />;
-}
-
-/***
- * Base layout primitive for themed spacing, color, border, flex, and responsive props.
- *
- 
- */
-export const Box = withZoraThemeScope(BoxInner);

package/src/foundation/Container.tsx

@@ -1,27 +0,0 @@
-import {
-  Container as SurfaceContainer,
-  type ContainerProps as SurfaceContainerProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface ContainerProps
-  extends ZoraBaseProps, Omit<SurfaceContainerProps, 'mode' | 'themeId'> {}
-
-function ContainerInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: ContainerProps) {
-  return <SurfaceContainer {...props} />;
-}
-
-/***
- * Constrains page content to semantic widths with responsive padding.
- *
- 
- */
-export const Container = withZoraThemeScope(ContainerInner);

package/src/foundation/Divider.tsx

@@ -1,27 +0,0 @@
-import {
-  Divider as SurfaceDivider,
-  type DividerProps as SurfaceDividerProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface DividerProps
-  extends ZoraBaseProps, Omit<SurfaceDividerProps, 'mode' | 'themeId'> {}
-
-function DividerInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: DividerProps) {
-  return <SurfaceDivider {...props} />;
-}
-
-/***
- * Renders a themed visual separator between content sections.
- *
- 
- */
-export const Divider = withZoraThemeScope(DividerInner);

package/src/foundation/Grid.tsx

@@ -1,23 +0,0 @@
-import { Grid as SurfaceGrid, type GridProps as SurfaceGridProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface GridProps extends ZoraBaseProps, Omit<SurfaceGridProps, 'mode' | 'themeId'> {}
-
-function GridInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: GridProps) {
-  return <SurfaceGrid {...props} />;
-}
-
-/***
- * Creates responsive grid layouts for cards, tiles, and dashboard content.
- *
- 
- */
-export const Grid = withZoraThemeScope(GridInner);

package/src/foundation/Stack.tsx

@@ -1,23 +0,0 @@
-import { Stack as SurfaceStack, type StackProps as SurfaceStackProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface StackProps extends ZoraBaseProps, Omit<SurfaceStackProps, 'mode' | 'themeId'> {}
-
-function StackInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: StackProps) {
-  return <SurfaceStack {...props} />;
-}
-
-/***
- * Arranges layout items in one direction with theme spacing.
- *
- 
- */
-export const Stack = withZoraThemeScope(StackInner);

package/src/foundation/Surface.tsx

@@ -1,30 +0,0 @@
-import {
-  Surface as SurfaceSurface,
-  type SurfaceProps as SurfaceSurfaceProps,
-  type SurfaceVariant,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export type { SurfaceVariant };
-
-export interface SurfaceProps
-  extends ZoraBaseProps, Omit<SurfaceSurfaceProps, 'mode' | 'themeId'> {}
-
-function SurfaceInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: SurfaceProps) {
-  return <SurfaceSurface {...props} />;
-}
-
-/***
- * Provides a semantic themed region for elevated, subtle, or bordered content.
- *
- 
- */
-export const Surface = withZoraThemeScope(SurfaceInner);

package/src/patterns/content-rail/ContentRail.test.ts

@@ -1,44 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import type {
-  ContentRailControlPressEvent,
-  ContentRailProps,
-  ContentRailVisibleRangeChangeEvent,
-} from '../../index';
-
-describe('ContentRail public contract', () => {
-  test('exports serializable manifest and event inputs from the package root', () => {
-    const props: ContentRailProps = {
-      direction: 'rtl',
-      gap: 'm',
-      itemSize: 'responsive',
-      motion: 'reduced',
-      padding: 'm',
-      peek: 32,
-      showControls: true,
-    };
-    const control: ContentRailControlPressEvent = { direction: 'next', targetIndex: 2 };
-    const range: ContentRailVisibleRangeChangeEvent = {
-      firstVisibleIndex: 1,
-      lastVisibleIndex: 3,
-      itemCount: 6,
-    };
-
-    expect(() => JSON.stringify(props)).not.toThrow();
-    expect(() => JSON.stringify(control)).not.toThrow();
-    expect(() => JSON.stringify(range)).not.toThrow();
-  });
-
-  test('keeps product data, navigation, and platform coupling outside the pattern', async () => {
-    const source = await Bun.file('src/patterns/content-rail/ContentRail.tsx').text();
-
-    expect(source).toContain('ScrollView');
-    expect(source).toContain('I18nManager.isRTL');
-    expect(source).toContain('accessibilityRole="list"');
-    expect(source).toContain('reducedMotion');
-    expect(source).toContain('accessibilityLiveRegion="polite"');
-    expect(source).not.toContain('expo-');
-    expect(source).not.toContain('fetch(');
-    expect(source).not.toContain('router');
-  });
-});