@ankhorage/zora 25.8.15 → 25.8.17

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}`;
-}

package/src/features/uploader/application/use-cases/validateUploadAsset.test.ts

@@ -35,8 +35,8 @@ describe('validateUploadAsset', () => {
   });
 
   test('rejects assets above the configured size', () => {
-    expect(validateUploadAsset({ asset: IMAGE_ASSET, maxSizeBytes: 1_000 })).toContain(
-      'File is too large',
+    expect(validateUploadAsset({ asset: IMAGE_ASSET, maxSizeBytes: 1_000 })).toBe(
+      'File is too large (2 KB). Max 1000 B.',
     );
   });
 

package/src/features/uploader/application/use-cases/validateUploadAsset.ts

@@ -1,3 +1,5 @@
+import { formatBytes } from '@ankhorage/utility/number';
+
 import type { ValidateUploadAssetInput } from '../../../../types/upload';
 
 /*** Validates a picked upload asset against MIME, extension, size, and caller rules. */
@@ -89,23 +91,3 @@ function parseAccept(accept: string | undefined): readonly string[] {
     .map((token) => token.trim())
     .filter((token) => token.length > 0);
 }
-
-/*** Formats a byte count for concise upload validation feedback. */
-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}`;
-}

package/src/features/web-component-artifact/composition/createWebDesiredStateWithNodeAsync.ts

@@ -1,9 +1,9 @@
 import { randomUUID } from 'node:crypto';
 import { readFile, rename, rm, writeFile } from 'node:fs/promises';
 import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import { readWebDesiredStateWithNodeAsync } from '../adapters/outbound/node/readWebDesiredStateWithNodeAsync';
+import { readWebComponentPackageMetadataAsync } from './readWebComponentPackageMetadataAsync';
 import { synchronizeWebComponentArtifactsWithNodeAsync } from './synchronizeWebComponentArtifactsWithNodeAsync';
 
 /*** Add one requested web component and regenerate the complete declared set. */
@@ -13,10 +13,7 @@ export async function createWebDesiredStateWithNodeAsync(input: {
 }) {
   const desired = await readWebDesiredStateWithNodeAsync(input.projectRoot, true);
   const components = [...new Set([...desired.components, input.component])].sort();
-  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../..');
-  const packageJson = JSON.parse(await readFile(resolve(packageRoot, 'package.json'), 'utf8')) as {
-    readonly version: string;
-  };
+  const { packageRoot, packageVersion } = await readWebComponentPackageMetadataAsync();
   const desiredPath = resolve(input.projectRoot, 'zora.web.json');
   const previous = await readFile(desiredPath, 'utf8').catch((error: unknown) => {
     if (isMissingFile(error)) return undefined;
@@ -29,7 +26,7 @@ export async function createWebDesiredStateWithNodeAsync(input: {
       components,
       outputDirectory: resolve(input.projectRoot, '.ankh', 'zora', 'web'),
       packageRoot,
-      packageVersion: packageJson.version,
+      packageVersion,
     });
   } catch (error) {
     if (next !== previous) {

package/src/features/web-component-artifact/composition/readWebComponentPackageMetadataAsync.ts

@@ -0,0 +1,18 @@
+import { readFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/*** Reads the active ZORA package location and version for generated web artifacts. */
+export async function readWebComponentPackageMetadataAsync(): Promise<WebComponentPackageMetadata> {
+  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../..');
+  const packageJson = JSON.parse(await readFile(resolve(packageRoot, 'package.json'), 'utf8')) as {
+    readonly version: string;
+  };
+
+  return { packageRoot, packageVersion: packageJson.version };
+}
+
+interface WebComponentPackageMetadata {
+  readonly packageRoot: string;
+  readonly packageVersion: string;
+}

package/src/features/web-component-artifact/composition/synchronizeDeclaredWebComponentsWithNodeAsync.ts

@@ -1,21 +1,17 @@
-import { readFile } from 'node:fs/promises';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
 
 import { readWebDesiredStateWithNodeAsync } from '../adapters/outbound/node/readWebDesiredStateWithNodeAsync';
+import { readWebComponentPackageMetadataAsync } from './readWebComponentPackageMetadataAsync';
 import { synchronizeWebComponentArtifactsWithNodeAsync } from './synchronizeWebComponentArtifactsWithNodeAsync';
 
 /*** Load project desired state and sync it from the active ZORA package release. */
 export async function synchronizeDeclaredWebComponentsWithNodeAsync(projectRoot: string) {
   const desired = await readWebDesiredStateWithNodeAsync(projectRoot, false);
-  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../..');
-  const packageJson = JSON.parse(await readFile(resolve(packageRoot, 'package.json'), 'utf8')) as {
-    readonly version: string;
-  };
+  const { packageRoot, packageVersion } = await readWebComponentPackageMetadataAsync();
   return await synchronizeWebComponentArtifactsWithNodeAsync({
     components: desired.components,
     outputDirectory: resolve(projectRoot, '.ankh', 'zora', 'web'),
     packageRoot,
-    packageVersion: packageJson.version,
+    packageVersion,
   });
 }

package/web-dist/chunks/{Accordion-rqr10gn4.js → Accordion-1495be5z.js}

@@ -18,7 +18,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveBadgeRecipe,
   Badge2
@@ -28,7 +28,7 @@ import {
 } from "./Accordion-1fsrnq73.js";
 import {
   Avatar2
-} from "./Accordion-tyh8jj9d.js";
+} from "./Accordion-cbbafww1.js";
 import {
   Button2
 } from "./Accordion-czcaf5x2.js";

package/web-dist/chunks/{Accordion-m2hcc8g4.js → Accordion-3qphhsb4.js}

@@ -13,7 +13,7 @@ import {
 } from "./Accordion-799z2zf6.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   applySelectionIntent
 } from "./Accordion-n4et7etk.js";

package/web-dist/chunks/{Accordion-gn8ptzwb.js → Accordion-4x8gdqqs.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 
 // src/features/form/field/adapters/inbound/Field.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-9aczb0k2.js → Accordion-58bpmzdj.js}

@@ -10,10 +10,10 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Avatar2
-} from "./Accordion-tyh8jj9d.js";
+} from "./Accordion-cbbafww1.js";
 import {
   Badge2
 } from "./Accordion-xgxxg1hz.js";

package/web-dist/chunks/{Accordion-2jy53kzk.js → Accordion-69c4pfz2.js}

@@ -7,7 +7,7 @@ import {
 } from "./Accordion-vj1m2wck.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   View3
 } from "./Accordion-z5a0tx18.js";
@@ -23,7 +23,7 @@ import {
 } from "./Accordion-wyxmd0n0.js";
 import {
   SectionHeader2
-} from "./Accordion-g08740h4.js";
+} from "./Accordion-c912kzs0.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-rqhh2m5b.js → Accordion-7n93d7fa.js}

@@ -21,7 +21,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-m6mp8aea.js → Accordion-a42brn0p.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Card2
-} from "./Accordion-rqr10gn4.js";
+} from "./Accordion-1495be5z.js";
 
 // src/features/empty-state/adapters/inbound/EmptyState.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-g08740h4.js → Accordion-c912kzs0.js}

@@ -8,7 +8,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 
 // src/features/section/adapters/inbound/SectionHeader.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-tyh8jj9d.js → Accordion-cbbafww1.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-11ej93t5.js → Accordion-cjjg81ry.js}

@@ -10,10 +10,10 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Card2
-} from "./Accordion-rqr10gn4.js";
+} from "./Accordion-1495be5z.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Badge2
 } from "./Accordion-xgxxg1hz.js";

package/web-dist/chunks/{Accordion-vkd002gw.js → Accordion-d0bebw9j.js}

@@ -15,13 +15,13 @@ import {
   FormError2,
   hasRequiredRule,
   useFormController
-} from "./Accordion-wqyrrptg.js";
+} from "./Accordion-jyemxzat.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Field2
-} from "./Accordion-gn8ptzwb.js";
+} from "./Accordion-4x8gdqqs.js";
 import {
   TextInput2
 } from "./Accordion-y2pss5p0.js";

package/web-dist/chunks/{Accordion-vjcd5kxc.js → Accordion-gntmfcmz.js}

@@ -24,7 +24,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveOverlayAnimation
 } from "./Accordion-n7y08rz5.js";

package/web-dist/chunks/{Accordion-wqyrrptg.js → Accordion-jyemxzat.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-p7d5svfq.js → Accordion-kmwhjw1k.js}

@@ -22,7 +22,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Icon2
 } from "./Accordion-1fsrnq73.js";

package/web-dist/chunks/{Accordion-26prtnm7.js → Accordion-ptxa6trg.js}

@@ -22,7 +22,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveFieldState,
   resolveIndicatorSize,

package/web-dist/chunks/{Accordion-4yq92mxp.js → Accordion-ve81xazy.js}

@@ -13,7 +13,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveIconSize
 } from "./Accordion-961ncx4e.js";

package/web-dist/chunks/Accordion-vnb3vntm.js

@@ -0,0 +1,79 @@
+'use client';
+import {
+  View2
+} from "./Accordion-ep35792s.js";
+import {
+  Text3
+} from "./Accordion-vqx3exsq.js";
+import {
+  Field3
+} from "./Accordion-45nc4bte.js";
+
+// src/features/picker/composition/PickerHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PickerHeader({ description, title }) {
+  return /* @__PURE__ */ jsxs(View2, {
+    gap: "xxs",
+    children: [
+      /* @__PURE__ */ jsx(Text3, {
+        align: "center",
+        variant: "label",
+        weight: "semiBold",
+        children: title
+      }),
+      description ? /* @__PURE__ */ jsx(Text3, {
+        align: "center",
+        emphasis: "muted",
+        variant: "bodySmall",
+        children: description
+      }) : null
+    ]
+  });
+}
+
+// src/features/picker/composition/PickerField.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PickerField({
+  children,
+  description,
+  disabled,
+  error,
+  label,
+  required,
+  testID
+}) {
+  return /* @__PURE__ */ jsx2(Field3, {
+    disabled,
+    errorText: error,
+    invalid: Boolean(error),
+    label: label ? /* @__PURE__ */ jsx2(PickerFieldLabel, {
+      description,
+      label
+    }) : undefined,
+    required,
+    testID,
+    children
+  });
+}
+function PickerFieldLabel({
+  description,
+  label
+}) {
+  return /* @__PURE__ */ jsxs2(View2, {
+    gap: "xs",
+    children: [
+      /* @__PURE__ */ jsx2(Text3, {
+        variant: "label",
+        weight: "semiBold",
+        children: label
+      }),
+      description ? /* @__PURE__ */ jsx2(Text3, {
+        emphasis: "muted",
+        variant: "bodySmall",
+        children: description
+      }) : null
+    ]
+  });
+}
+
+export { PickerHeader, PickerField };