@ankhorage/zora 7.0.0 → 8.0.0

package/src/components/text/Text.tsx

@@ -1,111 +0,0 @@
-import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
-import React from 'react';
-import { Platform, Text as ReactNativeText, type TextStyle } from 'react-native';
-
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveTextStyle } from './resolveTextRecipe';
-import { resolveTextThemeRecipe } from './resolveTextThemeRecipe';
-import type { TextProps } from './types';
-
-const textLayoutStyle = {
-  flexShrink: 1,
-  maxWidth: '100%',
-  minWidth: 0,
-  ...(Platform.OS === 'web'
-    ? {
-        overflowWrap: 'break-word',
-        whiteSpace: 'normal',
-        wordBreak: 'normal',
-      }
-    : null),
-} as unknown as TextStyle;
-
-function resolveTextContent({
-  children,
-  text,
-  i18nKey,
-}: {
-  children: TextProps['children'];
-  text: TextProps['text'];
-  i18nKey: TextProps['i18nKey'];
-}): React.ReactNode {
-  if (children !== undefined) return children;
-  if (text !== undefined) return text;
-  if (i18nKey === undefined || i18nKey === '') return null;
-  return i18nKey;
-}
-
-function TextInner({
-  themeId: _themeId,
-  mode: _mode,
-  children,
-  text,
-  i18nKey,
-  variant,
-  color,
-  emphasis,
-  align,
-  weight,
-  italic,
-  numberOfLines,
-  ellipsizeMode,
-  selectable,
-  style,
-  accessibilityLabel,
-  accessibilityHint,
-  accessibilityRole,
-  accessibilityLiveRegion,
-  nativeID,
-  testID,
-  interactionPolicy: _interactionPolicy,
-}: TextProps) {
-  const { theme } = useZoraTheme();
-  const { breakpoint } = useResponsiveRuntime();
-  const themeRecipe = resolveTextThemeRecipe(useZoraThemeRecipe('Text'));
-  const content = resolveTextContent({ children, text, i18nKey });
-  const resolvedVariant = resolveResponsive(variant ?? themeRecipe.variant, breakpoint) ?? 'body';
-  const resolvedStyle = resolveTextStyle({
-    theme,
-    breakpoint,
-    variant: resolvedVariant,
-    color: color ?? themeRecipe.color,
-    emphasis: emphasis ?? themeRecipe.emphasis,
-    align: align ?? themeRecipe.align,
-    weight: weight ?? themeRecipe.weight,
-    italic: italic ?? themeRecipe.italic ?? false,
-  });
-
-  if (content === null || content === undefined) return null;
-
-  return (
-    <ReactNativeText
-      accessibilityHint={accessibilityHint}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityLiveRegion={accessibilityLiveRegion}
-      accessibilityRole={accessibilityRole}
-      ellipsizeMode={ellipsizeMode}
-      nativeID={nativeID}
-      numberOfLines={numberOfLines}
-      selectable={selectable}
-      testID={testID}
-      style={[textLayoutStyle, resolvedStyle, style]}
-    >
-      {content}
-    </ReactNativeText>
-  );
-}
-
-/***
- * Structured copy primitive for theme-aware app text.
- *
- * `Text` owns normal body, caption, label, code, and supporting-copy variants so
- * consumers do not need to import lower-level Surface typography directly.
- *
- * @example Muted supporting copy
- * ```tsx
- * <Text variant="bodySmall" emphasis="muted">Updated just now</Text>
- * ```
- */
-export const Text = withZoraThemeScope(TextInner);

package/src/components/text/index.ts

@@ -1,9 +0,0 @@
-export { Text } from './Text';
-export type {
-  TextAlign,
-  TextColor,
-  TextEmphasis,
-  TextProps,
-  TextVariant,
-  TextWeight,
-} from './types';

package/src/components/text/meta.ts

@@ -1,74 +0,0 @@
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';
-import type { ZoraComponentMeta } from '../../metadata';
-
-const themeAuthoring = {
-  authority: 'theme',
-  scope: 'component',
-  allowInstanceOverride: true,
-} as const;
-
-export const textMeta = {
-  name: 'Text',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: { label: 'Text', defaultProps: { text: 'Text' } },
-  i18n: { fields: [{ keyProp: 'i18nKey', defaultTextProp: 'text' }] },
-  props: {
-    text: {
-      type: 'string',
-      category: 'Content',
-      label: 'Text',
-      default: 'Text',
-      authoring: { authority: 'instance' },
-    },
-    i18nKey: {
-      type: 'string',
-      category: 'Content',
-      label: 'i18n key',
-      authoring: { authority: 'instance' },
-    },
-    variant: {
-      type: 'enum',
-      category: 'Typography',
-      label: 'Variant',
-      enum: ['body', 'lead', 'bodySmall', 'caption', 'label', 'eyebrow', 'code'],
-      authoring: themeAuthoring,
-    },
-    color: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Color',
-      enum: ZORA_COLORS,
-      authoring: themeAuthoring,
-    },
-    emphasis: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Emphasis',
-      enum: ZORA_EMPHASES,
-      authoring: themeAuthoring,
-    },
-    align: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Align',
-      enum: ['auto', 'left', 'right', 'center', 'justify'],
-      authoring: themeAuthoring,
-    },
-    weight: {
-      type: 'enum',
-      category: 'Typography',
-      label: 'Weight',
-      enum: ['regular', 'medium', 'semiBold', 'bold'],
-      authoring: themeAuthoring,
-    },
-    italic: { type: 'boolean', category: 'Typography', label: 'Italic', authoring: themeAuthoring },
-    numberOfLines: {
-      type: 'number',
-      category: 'Layout',
-      label: 'Line clamp',
-      authoring: { authority: 'instance' },
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/components/text/resolveTextRecipe.test.ts

@@ -1,380 +0,0 @@
-import type {
-  Breakpoint,
-  FontWeight,
-  Responsive,
-  RoleSemantics,
-  SurfaceTheme,
-} from '@ankhorage/surface';
-import { describe, expect, mock, test } from 'bun:test';
-
-const breakpointOrder: readonly Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl'];
-
-function isResponsiveRecord<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-function readResponsiveValue<T>(
-  value: Partial<Record<Breakpoint, T>>,
-  breakpoint: Breakpoint,
-): T | undefined {
-  switch (breakpoint) {
-    case 'base':
-      return value.base;
-    case 'sm':
-      return value.sm;
-    case 'md':
-      return value.md;
-    case 'lg':
-      return value.lg;
-    case 'xl':
-      return value.xl;
-  }
-}
-
-function resolveResponsiveMock<T>(
-  value: Responsive<T> | undefined,
-  breakpoint: Breakpoint,
-): T | undefined {
-  if (value === undefined) return undefined;
-  if (!isResponsiveRecord(value)) return value;
-
-  const activeIndex = breakpointOrder.indexOf(breakpoint);
-  for (let i = activeIndex; i >= 0; i -= 1) {
-    const key = breakpointOrder.at(i);
-    if (!key) continue;
-    const candidate = readResponsiveValue(value, key);
-    if (candidate !== undefined) return candidate;
-  }
-
-  return undefined;
-}
-
-await mock.module('@ankhorage/surface', () => ({
-  resolveResponsive: resolveResponsiveMock,
-}));
-
-const { resolveTextStyle } = await import('./resolveTextRecipe');
-
-const emptyFonts: Record<FontWeight, string | undefined> = {
-  '100': undefined,
-  '200': undefined,
-  '300': undefined,
-  '400': undefined,
-  '500': undefined,
-  '600': undefined,
-  '700': undefined,
-  '800': undefined,
-  '900': undefined,
-  bold: undefined,
-  normal: undefined,
-};
-
-function createRole(base: string): RoleSemantics {
-  return {
-    base,
-    hover: `${base}-hover`,
-    strong: `${base}-strong`,
-    softBg: `${base}-soft-bg`,
-    softHover: `${base}-soft-hover`,
-    softActive: `${base}-soft-active`,
-    outline: `${base}-outline`,
-    onSolidText: `${base}-on-solid-text`,
-  };
-}
-
-function createTestTheme(): SurfaceTheme {
-  return {
-    colors: {
-      primary: '#0f766e',
-      secondary: '#2563eb',
-      accent: '#7c3aed',
-      highlight: '#f59e0b',
-      background: '#ffffff',
-      surface: '#ffffff',
-      text: '#111827',
-      textSecondary: '#4b5563',
-      border: '#d1d5db',
-      error: '#dc2626',
-      success: '#16a34a',
-      warning: '#d97706',
-    },
-    config: {
-      id: 'zora-test',
-      name: 'ZORA Test',
-      light: {
-        primaryColor: '#0f766e',
-        harmony: 'analogous',
-      },
-      dark: {
-        primaryColor: '#2dd4bf',
-        harmony: 'analogous',
-      },
-    },
-    radii: {
-      none: 0,
-      s: 4,
-      m: 8,
-      l: 16,
-      full: 9999,
-    },
-    swatches: {
-      primary: {
-        50: '#f0fdfa',
-        100: '#ccfbf1',
-        200: '#99f6e4',
-        300: '#5eead4',
-        400: '#2dd4bf',
-        500: '#14b8a6',
-        600: '#0d9488',
-        700: '#0f766e',
-        800: '#115e59',
-        900: '#134e4a',
-        950: '#042f2e',
-      },
-      neutral: {
-        50: '#f9fafb',
-        100: '#f3f4f6',
-        200: '#e5e7eb',
-        300: '#d1d5db',
-        400: '#9ca3af',
-        500: '#6b7280',
-        600: '#4b5563',
-        700: '#374151',
-        800: '#1f2937',
-        900: '#111827',
-        950: '#030712',
-      },
-    },
-    semantics: {
-      neutral: {
-        bg: '#ffffff',
-        bgSubtle: '#f9fafb',
-        surface: '#ffffff',
-        surfaceHover: '#f3f4f6',
-        surfaceActive: '#e5e7eb',
-        border: '#d1d5db',
-        borderStrong: '#9ca3af',
-        divider: '#e5e7eb',
-        text: '#111827',
-        textMuted: '#4b5563',
-        textSubtle: '#6b7280',
-      },
-      brand: createRole('#0f766e'),
-      secondary: createRole('#2563eb'),
-      accent: createRole('#7c3aed'),
-      highlight: createRole('#f59e0b'),
-      danger: createRole('#dc2626'),
-      success: createRole('#16a34a'),
-      warning: createRole('#d97706'),
-      surface: {
-        default: '#ffffff',
-        subtle: '#f9fafb',
-        raised: '#ffffff',
-      },
-      content: {
-        default: '#111827',
-        muted: '#4b5563',
-        subtle: '#6b7280',
-        inverse: '#ffffff',
-      },
-      border: {
-        default: '#d1d5db',
-        strong: '#9ca3af',
-        focus: '#0f766e',
-      },
-      action: {
-        primary: createRole('#0f766e'),
-        neutral: createRole('#4b5563'),
-        danger: createRole('#dc2626'),
-      },
-    },
-    shadows: {
-      soft: 2,
-      medium: 4,
-      hard: 8,
-    },
-    spacing: {
-      none: 0,
-      xs: 4,
-      s: 8,
-      m: 16,
-      l: 24,
-      xl: 32,
-      xxl: 48,
-    },
-    typography: {
-      headings: {
-        1: { size: 32, lineHeight: 40, weight: 'bold' },
-        2: { size: 24, lineHeight: 32, weight: 'bold' },
-        3: { size: 20, lineHeight: 28, weight: 'bold' },
-        4: { size: 18, lineHeight: 24, weight: 'semiBold' },
-        5: { size: 16, lineHeight: 22, weight: 'semiBold' },
-        6: { size: 14, lineHeight: 20, weight: 'semiBold' },
-      },
-      sizes: {
-        xs: 12,
-        s: 14,
-        m: 16,
-        l: 18,
-        xl: 20,
-        xxl: 24,
-        '3xl': 30,
-        h1: 32,
-        h2: 24,
-        h3: 20,
-        h4: 18,
-        h5: 16,
-        h6: 14,
-      },
-      weights: {
-        thin: '100',
-        extraLight: '200',
-        light: '300',
-        regular: '400',
-        medium: '500',
-        semiBold: '600',
-        bold: '700',
-        extraBold: '800',
-        black: '900',
-      },
-      fonts: {
-        normal: { ...emptyFonts },
-        italic: { ...emptyFonts },
-      },
-    },
-  };
-}
-
-const theme = createTestTheme();
-
-describe('resolveTextStyle', () => {
-  test('resolves default body text from theme typography and content color', () => {
-    const style = resolveTextStyle({ theme, breakpoint: 'base' });
-
-    expect(style.fontSize).toBe(theme.typography.sizes.m);
-    expect(style.lineHeight).toBe(24);
-    expect(style.fontWeight).toBe(theme.typography.weights.regular);
-    expect(style.color).toBe(theme.semantics.content.default);
-    expect(style.elevation).toBe(0);
-  });
-
-  test('maps bodySmall, caption, and label recipes', () => {
-    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'bodySmall' })).toMatchObject({
-      fontSize: theme.typography.sizes.s,
-      lineHeight: 20,
-      fontWeight: theme.typography.weights.regular,
-    });
-
-    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'caption' })).toMatchObject({
-      fontSize: theme.typography.sizes.xs,
-      lineHeight: 16,
-      fontWeight: theme.typography.weights.regular,
-    });
-
-    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'label' })).toMatchObject({
-      fontSize: theme.typography.sizes.s,
-      lineHeight: 18,
-      fontWeight: theme.typography.weights.medium,
-    });
-  });
-
-  test('resolves lead smaller on base and larger on md', () => {
-    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'lead' })).toMatchObject({
-      fontSize: theme.typography.sizes.m,
-      lineHeight: 24,
-    });
-
-    expect(resolveTextStyle({ theme, breakpoint: 'md', variant: 'lead' })).toMatchObject({
-      fontSize: theme.typography.sizes.l,
-      lineHeight: 28,
-    });
-  });
-
-  test('resolves eyebrow uppercase, letter spacing, and semibold weight', () => {
-    const style = resolveTextStyle({ theme, breakpoint: 'base', variant: 'eyebrow' });
-
-    expect(style.textTransform).toBe('uppercase');
-    expect(style.letterSpacing).toBe(0.8);
-    expect(style.fontWeight).toBe(theme.typography.weights.semiBold);
-  });
-
-  test('resolves code as monospace text', () => {
-    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'code' }).fontFamily).toBe(
-      'monospace',
-    );
-  });
-
-  test('maps emphasis and color to semantic colors', () => {
-    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'default' }).color).toBe(
-      theme.semantics.content.default,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'muted' }).color).toBe(
-      theme.semantics.content.muted,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'subtle' }).color).toBe(
-      theme.semantics.content.subtle,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'inverse' }).color).toBe(
-      theme.semantics.content.inverse,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'primary' }).color).toBe(
-      theme.semantics.action.primary.base,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'danger' }).color).toBe(
-      theme.semantics.action.danger.base,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'success' }).color).toBe(
-      theme.semantics.success.base,
-    );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'warning' }).color).toBe(
-      theme.semantics.warning.base,
-    );
-    expect(
-      resolveTextStyle({ theme, breakpoint: 'base', color: 'primary', emphasis: 'inverse' }).color,
-    ).toBe(theme.semantics.action.primary.onSolidText);
-  });
-
-  test('allows explicit weight to override the recipe weight', () => {
-    const style = resolveTextStyle({
-      theme,
-      breakpoint: 'base',
-      variant: 'caption',
-      weight: 'bold',
-    });
-
-    expect(style.fontWeight).toBe(theme.typography.weights.bold);
-  });
-
-  test('uses italic font family when available', () => {
-    const fontTheme = createTestTheme();
-    fontTheme.typography.fonts.italic[fontTheme.typography.weights.medium] = 'ZoraMediumItalic';
-
-    const style = resolveTextStyle({
-      theme: fontTheme,
-      breakpoint: 'base',
-      italic: true,
-      weight: 'medium',
-    });
-
-    expect(style.fontStyle).toBe('italic');
-    expect(style.fontFamily).toBe('ZoraMediumItalic');
-  });
-
-  test('resolves responsive variant, color, emphasis, align, and weight values', () => {
-    const style = resolveTextStyle({
-      theme,
-      breakpoint: 'md',
-      variant: { base: 'bodySmall', md: 'lead' },
-      emphasis: { base: 'muted', md: 'default' },
-      color: { base: 'neutral', md: 'primary' },
-      align: { base: 'center', md: 'left' },
-      weight: { base: 'regular', md: 'semiBold' },
-    });
-
-    expect(style.fontSize).toBe(theme.typography.sizes.l);
-    expect(style.lineHeight).toBe(28);
-    expect(style.color).toBe(theme.semantics.action.primary.base);
-    expect(style.textAlign).toBe('left');
-    expect(style.fontWeight).toBe(theme.typography.weights.semiBold);
-  });
-});