@ankhorage/zora 25.8.16 → 25.8.18

package/src/features/time-picker/composition/TimePickerField.tsx

@@ -1,9 +1,7 @@
-import { Field } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { TimePickerProps } from '../../../types/time-picker';
-import { View } from '../../layout/public';
-import { Text } from '../../typography/public';
+import { PickerField } from '../../picker/composition/PickerField';
 
 /*** Renders the shared TimePicker field frame around a platform-specific trigger. */
 export function TimePickerField({
@@ -15,18 +13,7 @@ export function TimePickerField({
   required,
   testID,
 }: TimePickerFieldProps) {
-  return (
-    <Field
-      disabled={disabled}
-      errorText={error}
-      invalid={Boolean(error)}
-      label={label ? renderLabel(label, description) : undefined}
-      required={required}
-      testID={testID}
-    >
-      {children}
-    </Field>
-  );
+  return <PickerField {...{ children, description, disabled, error, label, required, testID }} />;
 }
 
 interface TimePickerFieldProps extends Pick<
@@ -35,19 +22,3 @@ interface TimePickerFieldProps extends Pick<
 > {
   children: React.ReactNode;
 }
-
-/*** Renders the picker label and optional supporting description. */
-function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
-  return (
-    <View gap="xs">
-      <Text variant="label" weight="semiBold">
-        {label}
-      </Text>
-      {description ? (
-        <Text emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </View>
-  );
-}

package/src/features/typography/utils/headingThemeRecipeMeta.ts

@@ -1,5 +1,5 @@
 import type { ZoraThemeRecipeMeta } from '../../../types/theme-recipe';
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../theme/colorModel';
+import { typographyThemeRecipeFields } from './typographyThemeRecipeFields';
 
 export const headingThemeRecipeMeta = {
   name: 'Heading',
@@ -11,23 +11,6 @@ export const headingThemeRecipeMeta = {
       label: 'Size',
       options: ['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     },
-    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 },
+    ...typographyThemeRecipeFields,
   },
 } as const satisfies ZoraThemeRecipeMeta;

package/src/features/typography/utils/resolveHeadingRecipe.ts

@@ -1,4 +1,4 @@
-import type { FontWeight, RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+import type { SurfaceTheme } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 
 import type {
@@ -10,6 +10,7 @@ import type {
   HeadingWeight,
 } from '../../../types/heading';
 import { resolveHeadingSizeFromLevel } from './resolveHeadingSizeFromLevel';
+import { resolveTypographyStyleTokens } from './resolveTypographyStyleTokens';
 export function resolveHeadingRecipe(
   theme: SurfaceTheme,
   {
@@ -23,15 +24,21 @@ export function resolveHeadingRecipe(
   }: ResolveHeadingRecipeOptions,
 ): TextStyle {
   const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));
-  const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);
+  const tokens = resolveTypographyStyleTokens({
+    theme,
+    color,
+    emphasis,
+    weight: weight ?? recipe.weight,
+    italic,
+  });
 
   return {
-    color: resolveHeadingColor(theme, emphasis, color),
+    color: tokens.color,
     elevation: 0,
-    fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),
+    fontFamily: tokens.fontFamily,
     fontSize: recipe.fontSize,
     fontStyle: italic ? 'italic' : 'normal',
-    fontWeight: resolvedWeight,
+    fontWeight: tokens.fontWeight,
     lineHeight: recipe.lineHeight,
     textAlign: align,
   };
@@ -89,86 +96,3 @@ function resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecip
     weight: heading.weight,
   };
 }
-
-function resolveRoleSemantics(theme: SurfaceTheme, color: HeadingColor): 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 resolveHeadingColor(
-  theme: SurfaceTheme,
-  emphasis: HeadingEmphasis,
-  color?: HeadingColor,
-): 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;
-  }
-}
-
-function resolveWeight(theme: SurfaceTheme, weight: HeadingWeight): 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,
-  weight,
-  italic,
-}: {
-  theme: SurfaceTheme;
-  weight: FontWeight;
-  italic: boolean;
-}): string | undefined {
-  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;
-}

package/src/features/typography/utils/resolveHeadingThemeRecipe.ts

@@ -1,23 +1,14 @@
 import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
 
-import type {
-  HeadingAlign,
-  HeadingColor,
-  HeadingEmphasis,
-  HeadingSize,
-  HeadingWeight,
-} from '../../../types/heading';
+import type { HeadingSize } from '../../../types/heading';
+import { resolveTypographyThemeRecipeFields } from './resolveTypographyThemeRecipeFields';
 
 export function resolveHeadingThemeRecipe(
   fields: Readonly<Record<string, ThemeRecipeOverrideValue>>,
 ) {
   return {
     size: readSize(fields.size),
-    color: readColor(fields.color),
-    emphasis: readEmphasis(fields.emphasis),
-    align: readAlign(fields.align),
-    weight: readWeight(fields.weight),
-    italic: typeof fields.italic === 'boolean' ? fields.italic : undefined,
+    ...resolveTypographyThemeRecipeFields(fields),
   };
 }
 
@@ -26,30 +17,3 @@ function readSize(value: ThemeRecipeOverrideValue | undefined): HeadingSize | un
   if (value === 'h4' || value === 'h5' || value === 'h6') return value;
   return undefined;
 }
-
-function readColor(value: ThemeRecipeOverrideValue | undefined): HeadingColor | 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): HeadingEmphasis | undefined {
-  if (value === 'default' || value === 'muted' || value === 'subtle' || value === 'inverse')
-    return value;
-  return undefined;
-}
-
-function readAlign(value: ThemeRecipeOverrideValue | undefined): HeadingAlign | undefined {
-  if (value === 'auto' || value === 'left' || value === 'right') return value;
-  if (value === 'center' || value === 'justify') return value;
-  return undefined;
-}
-
-function readWeight(value: ThemeRecipeOverrideValue | undefined): HeadingWeight | undefined {
-  if (value === 'regular' || value === 'medium' || value === 'semiBold' || value === 'bold')
-    return value;
-  return undefined;
-}

package/src/features/typography/utils/resolveTextStyle.ts

@@ -1,9 +1,7 @@
 import {
   type Breakpoint,
-  type FontWeight,
   resolveResponsive,
   type Responsive,
-  type RoleSemantics,
   type SurfaceTheme,
 } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
@@ -15,6 +13,7 @@ import type {
   TextVariant,
   TextWeight,
 } from '../../../types/text';
+import { resolveTypographyStyleTokens } from './resolveTypographyStyleTokens';
 /*** Resolves responsive text variants and theme semantics into a native text style. */
 export function resolveTextStyle({
   theme,
@@ -31,23 +30,21 @@ export function resolveTextStyle({
   const resolvedColor = resolveResponsive(color, breakpoint);
   const resolvedAlign = resolveResponsive(align, breakpoint);
   const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);
-  const resolvedWeight = resolveWeight(
+  const tokens = resolveTypographyStyleTokens({
     theme,
-    resolveResponsive(weight, breakpoint) ?? recipe.weight,
-  );
+    color: resolvedColor,
+    emphasis: resolvedEmphasis,
+    weight: resolveResponsive(weight, breakpoint) ?? recipe.weight,
+    italic,
+  });
 
   return {
-    color: resolveTextColor(theme, resolvedEmphasis, resolvedColor),
+    color: tokens.color,
     elevation: 0,
-    fontFamily: resolveFontFamily({
-      theme,
-      variant: resolvedVariant,
-      weight: resolvedWeight,
-      italic,
-    }),
+    fontFamily: resolvedVariant === 'code' ? 'monospace' : tokens.fontFamily,
     fontSize: recipe.fontSize,
     fontStyle: italic ? 'italic' : 'normal',
-    fontWeight: resolvedWeight,
+    fontWeight: tokens.fontWeight,
     letterSpacing: recipe.letterSpacing,
     lineHeight: recipe.lineHeight,
     textAlign: resolvedAlign,
@@ -78,46 +75,6 @@ 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,
@@ -173,48 +130,3 @@ function resolveVariantRecipe(
       };
   }
 }
-
-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;
-  }
-}

package/src/features/typography/utils/resolveTextThemeRecipe.ts

@@ -1,21 +1,12 @@
 import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
 
-import type {
-  TextAlign,
-  TextColor,
-  TextEmphasis,
-  TextVariant,
-  TextWeight,
-} from '../../../types/text';
+import type { TextVariant } from '../../../types/text';
+import { resolveTypographyThemeRecipeFields } from './resolveTypographyThemeRecipeFields';
 
 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,
+    ...resolveTypographyThemeRecipeFields(fields),
   };
 }
 
@@ -25,30 +16,3 @@ function readVariant(value: ThemeRecipeOverrideValue | undefined): TextVariant |
   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/features/typography/utils/resolveTypographyStyleTokens.ts

@@ -0,0 +1,113 @@
+import type { FontWeight, RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+
+import type { ZoraColor, ZoraEmphasis } from '../../../types/theme';
+
+/*** Resolves the Surface-derived style tokens shared by Heading and Text. */
+export function resolveTypographyStyleTokens({
+  theme,
+  color,
+  emphasis,
+  weight,
+  italic,
+}: ResolveTypographyStyleTokensInput): ResolveTypographyStyleTokensOutput {
+  const role = color ? resolveRoleSemantics(theme, color) : undefined;
+  const fontWeight = resolveWeight(theme, weight);
+
+  return {
+    color: role
+      ? emphasis === 'inverse'
+        ? role.onSolidText
+        : role.base
+      : resolveEmphasisColor(theme, emphasis),
+    fontFamily: resolveFontFamily(theme, fontWeight, italic),
+    fontWeight,
+  };
+}
+
+interface ResolveTypographyStyleTokensInput {
+  readonly theme: SurfaceTheme;
+  readonly color: TypographyColor | undefined;
+  readonly emphasis: TypographyEmphasis;
+  readonly weight: TypographyWeight;
+  readonly italic: boolean;
+}
+
+interface ResolveTypographyStyleTokensOutput {
+  readonly color: string;
+  readonly fontFamily: string | undefined;
+  readonly fontWeight: FontWeight;
+}
+
+type TypographyColor = ZoraColor;
+type TypographyEmphasis = ZoraEmphasis;
+type TypographyWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
+
+function resolveRoleSemantics(theme: SurfaceTheme, color: TypographyColor): 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 resolveEmphasisColor(theme: SurfaceTheme, emphasis: TypographyEmphasis): string {
+  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;
+  }
+}
+
+function resolveWeight(theme: SurfaceTheme, weight: TypographyWeight): 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: SurfaceTheme,
+  weight: FontWeight,
+  italic: boolean,
+): string | undefined {
+  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;
+}

package/src/features/typography/utils/resolveTypographyThemeRecipeFields.ts

@@ -0,0 +1,27 @@
+import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
+
+import { ZORA_COLORS, ZORA_EMPHASES } from '../../theme/colorModel';
+
+const ALIGNMENTS = ['auto', 'left', 'right', 'center', 'justify'] as const;
+const WEIGHTS = ['regular', 'medium', 'semiBold', 'bold'] as const;
+
+/*** Resolves the common scalar presentation fields in Typography theme recipes. */
+export function resolveTypographyThemeRecipeFields(
+  fields: Readonly<Record<string, ThemeRecipeOverrideValue>>,
+) {
+  return {
+    color: readChoice(fields.color, ZORA_COLORS),
+    emphasis: readChoice(fields.emphasis, ZORA_EMPHASES),
+    align: readChoice(fields.align, ALIGNMENTS),
+    weight: readChoice(fields.weight, WEIGHTS),
+    italic: typeof fields.italic === 'boolean' ? fields.italic : undefined,
+  };
+}
+
+function readChoice<T extends string>(
+  value: ThemeRecipeOverrideValue | undefined,
+  choices: readonly T[],
+): T | undefined {
+  if (typeof value !== 'string') return undefined;
+  return choices.find((choice) => choice === value);
+}

package/src/features/typography/utils/textThemeRecipeMeta.ts

@@ -1,5 +1,5 @@
 import type { ZoraThemeRecipeMeta } from '../../../types/theme-recipe';
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../theme/colorModel';
+import { typographyThemeRecipeFields } from './typographyThemeRecipeFields';
 
 export const textThemeRecipeMeta = {
   name: 'Text',
@@ -12,23 +12,6 @@ export const textThemeRecipeMeta = {
       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 },
+    ...typographyThemeRecipeFields,
   },
 } as const satisfies ZoraThemeRecipeMeta;

package/src/features/typography/utils/typographyThemeRecipeFields.ts

@@ -0,0 +1,23 @@
+import { ZORA_COLORS, ZORA_EMPHASES } from '../../theme/colorModel';
+
+/*** Defines the common presentation fields used by Typography theme recipes. */
+export const typographyThemeRecipeFields = {
+  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;

package/src/features/uploader/adapters/inbound/Uploader.tsx

@@ -1,3 +1,4 @@
+import { formatBytes } from '@ankhorage/utility/number';
 import React from 'react';
 
 import type { UploadAsset, UploaderProps, UploadType } from '../../../../types/upload';
@@ -445,23 +446,3 @@ function formatUnknownError(error: unknown): string {
 
   return 'Something went wrong.';
 }
-
-/*** Formats an upload byte limit for concise helper text. */
-function formatBytes(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) {
-    return '0 B';
-  }
-
-  const units = ['B', 'KB', 'MB', 'GB'] as const;
-  let size = value;
-  let unitIndex = 0;
-
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex += 1;
-  }
-
-  const unit = units.at(unitIndex) ?? 'B';
-  const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;
-  return `${rounded} ${unit}`;
-}