@hjmds/design-contracts 0.8.2

package/dist/statistic.js

@@ -0,0 +1,76 @@
+export const statisticDefaults = {
+    trendTone: "neutral",
+};
+function assertCopy(value, field) {
+    if (value.trim().length === 0) {
+        throw new TypeError(`Statistic ${field} must not be empty`);
+    }
+}
+export function validateStatisticDescriptor(descriptor) {
+    assertCopy(descriptor.id, "id");
+    if (descriptor.id !== descriptor.id.trim()) {
+        throw new TypeError("Statistic id must not start or end with whitespace");
+    }
+    assertCopy(descriptor.label, "label");
+    assertCopy(descriptor.value, "value");
+    if (descriptor.prefix !== undefined)
+        assertCopy(descriptor.prefix, "prefix");
+    if (descriptor.suffix !== undefined)
+        assertCopy(descriptor.suffix, "suffix");
+    if (descriptor.hint !== undefined)
+        assertCopy(descriptor.hint, "hint");
+    if (descriptor.trend) {
+        if (descriptor.trend.direction !== "up" &&
+            descriptor.trend.direction !== "down" &&
+            descriptor.trend.direction !== "flat") {
+            throw new TypeError(`Unsupported Statistic trend direction: ${String(descriptor.trend.direction)}`);
+        }
+        if (descriptor.trend.tone !== undefined &&
+            descriptor.trend.tone !== "neutral" &&
+            descriptor.trend.tone !== "success" &&
+            descriptor.trend.tone !== "warning" &&
+            descriptor.trend.tone !== "danger") {
+            throw new TypeError(`Unsupported Statistic trend tone: ${String(descriptor.trend.tone)}`);
+        }
+        assertCopy(descriptor.trend.label, "trend.label");
+    }
+}
+export function resolveStatisticDescriptor(descriptor) {
+    validateStatisticDescriptor(descriptor);
+    const { trend, ...copy } = descriptor;
+    if (!trend)
+        return copy;
+    return {
+        ...copy,
+        trend: {
+            ...trend,
+            tone: trend.tone ?? statisticDefaults.trendTone,
+        },
+    };
+}
+export function validateStatisticGroup(group) {
+    if (group.items.length === 0) {
+        throw new TypeError("Statistic group must contain at least one item");
+    }
+    if (group.columns !== undefined &&
+        group.columns !== 1 &&
+        group.columns !== 2 &&
+        group.columns !== 3 &&
+        group.columns !== 4) {
+        throw new RangeError("Statistic columns must be 1, 2, 3, or 4");
+    }
+    const ids = new Set();
+    for (const item of group.items) {
+        validateStatisticDescriptor(item);
+        if (ids.has(item.id)) {
+            throw new TypeError(`Duplicate Statistic id: ${item.id}`);
+        }
+        ids.add(item.id);
+    }
+}
+export const statisticTrendMarks = {
+    up: "trendUp",
+    down: "trendDown",
+    flat: "trendFlat",
+};
+//# sourceMappingURL=statistic.js.map

package/dist/statistic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statistic.js","sourceRoot":"","sources":["../src/statistic.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,SAAS,EAAE,SAAS;CAC0C,CAAC;AAsCjE,SAAS,UAAU,CAAC,KAAa,EAAE,KAAa;IAC9C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,MAAM,IAAI,SAAS,CAAC,aAAa,KAAK,oBAAoB,CAAC,CAAC;IAC9D,CAAC;AACH,CAAC;AAED,MAAM,UAAU,2BAA2B,CACzC,UAAmC;IAEnC,UAAU,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAChC,IAAI,UAAU,CAAC,EAAE,KAAK,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;QAC3C,MAAM,IAAI,SAAS,CAAC,oDAAoD,CAAC,CAAC;IAC5E,CAAC;IACD,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtC,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtC,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;QAAE,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7E,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;QAAE,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7E,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS;QAAE,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,IACE,UAAU,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI;YACnC,UAAU,CAAC,KAAK,CAAC,SAAS,KAAK,MAAM;YACrC,UAAU,CAAC,KAAK,CAAC,SAAS,KAAK,MAAM,EACrC,CAAC;YACD,MAAM,IAAI,SAAS,CACjB,0CAA0C,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAC/E,CAAC;QACJ,CAAC;QACD,IACE,UAAU,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YACnC,UAAU,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YACnC,UAAU,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YACnC,UAAU,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YACnC,UAAU,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,EAClC,CAAC;YACD,MAAM,IAAI,SAAS,CACjB,qCAAqC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CACrE,CAAC;QACJ,CAAC;QACD,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACpD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,0BAA0B,CACxC,UAAmC;IAEnC,2BAA2B,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU,CAAC;IACtC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,OAAO;QACL,GAAG,IAAI;QACP,KAAK,EAAE;YACL,GAAG,KAAK;YACR,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,iBAAiB,CAAC,SAAS;SAChD;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,sBAAsB,CACpC,KAAmC;IAEnC,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7B,MAAM,IAAI,SAAS,CAAC,gDAAgD,CAAC,CAAC;IACxE,CAAC;IACD,IACE,KAAK,CAAC,OAAO,KAAK,SAAS;QAC3B,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC,EACnB,CAAC;QACD,MAAM,IAAI,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAClE,CAAC;IACD,MAAM,GAAG,GAAG,IAAI,GAAG,EAAM,CAAC;IAC1B,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAC/B,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrB,MAAM,IAAI,SAAS,CAAC,2BAA2B,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5D,CAAC;QACD,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,WAAW;CACyC,CAAC","sourcesContent":["export type StatisticTrendDirection = \"up\" | \"down\" | \"flat\";\nexport type StatisticTrendTone = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\nexport const statisticDefaults = {\n  trendTone: \"neutral\",\n} as const satisfies Readonly<{ trendTone: StatisticTrendTone }>;\n\nexport type StatisticTrendDescriptor = Readonly<{\n  direction: StatisticTrendDirection;\n  /** Direction and meaning are independent: an increase is not always good. */\n  tone?: StatisticTrendTone;\n  /** Visible localized copy ensures the trend is never communicated by color alone. */\n  label: string;\n}>;\n\nexport type StatisticDescriptor<Id extends string = string> = Readonly<{\n  id: Id;\n  label: string;\n  /** Products own number/date/unit formatting and pass the final visible string. */\n  value: string;\n  prefix?: string;\n  suffix?: string;\n  hint?: string;\n  trend?: StatisticTrendDescriptor;\n}>;\n\nexport type StatisticGroupDescriptor<Id extends string = string> = Readonly<{\n  items: readonly StatisticDescriptor<Id>[];\n  columns?: 1 | 2 | 3 | 4;\n}>;\n\nexport type ResolvedStatisticTrendDescriptor = Omit<\n  StatisticTrendDescriptor,\n  \"tone\"\n> &\n  Readonly<{ tone: StatisticTrendTone }>;\n\nexport type ResolvedStatisticDescriptor<Id extends string = string> = Omit<\n  StatisticDescriptor<Id>,\n  \"trend\"\n> &\n  Readonly<{ trend?: ResolvedStatisticTrendDescriptor }>;\n\nfunction assertCopy(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Statistic ${field} must not be empty`);\n  }\n}\n\nexport function validateStatisticDescriptor<Id extends string>(\n  descriptor: StatisticDescriptor<Id>,\n): void {\n  assertCopy(descriptor.id, \"id\");\n  if (descriptor.id !== descriptor.id.trim()) {\n    throw new TypeError(\"Statistic id must not start or end with whitespace\");\n  }\n  assertCopy(descriptor.label, \"label\");\n  assertCopy(descriptor.value, \"value\");\n  if (descriptor.prefix !== undefined) assertCopy(descriptor.prefix, \"prefix\");\n  if (descriptor.suffix !== undefined) assertCopy(descriptor.suffix, \"suffix\");\n  if (descriptor.hint !== undefined) assertCopy(descriptor.hint, \"hint\");\n  if (descriptor.trend) {\n    if (\n      descriptor.trend.direction !== \"up\" &&\n      descriptor.trend.direction !== \"down\" &&\n      descriptor.trend.direction !== \"flat\"\n    ) {\n      throw new TypeError(\n        `Unsupported Statistic trend direction: ${String(descriptor.trend.direction)}`,\n      );\n    }\n    if (\n      descriptor.trend.tone !== undefined &&\n      descriptor.trend.tone !== \"neutral\" &&\n      descriptor.trend.tone !== \"success\" &&\n      descriptor.trend.tone !== \"warning\" &&\n      descriptor.trend.tone !== \"danger\"\n    ) {\n      throw new TypeError(\n        `Unsupported Statistic trend tone: ${String(descriptor.trend.tone)}`,\n      );\n    }\n    assertCopy(descriptor.trend.label, \"trend.label\");\n  }\n}\n\nexport function resolveStatisticDescriptor<Id extends string>(\n  descriptor: StatisticDescriptor<Id>,\n): ResolvedStatisticDescriptor<Id> {\n  validateStatisticDescriptor(descriptor);\n  const { trend, ...copy } = descriptor;\n  if (!trend) return copy;\n  return {\n    ...copy,\n    trend: {\n      ...trend,\n      tone: trend.tone ?? statisticDefaults.trendTone,\n    },\n  };\n}\n\nexport function validateStatisticGroup<Id extends string>(\n  group: StatisticGroupDescriptor<Id>,\n): void {\n  if (group.items.length === 0) {\n    throw new TypeError(\"Statistic group must contain at least one item\");\n  }\n  if (\n    group.columns !== undefined &&\n    group.columns !== 1 &&\n    group.columns !== 2 &&\n    group.columns !== 3 &&\n    group.columns !== 4\n  ) {\n    throw new RangeError(\"Statistic columns must be 1, 2, 3, or 4\");\n  }\n  const ids = new Set<Id>();\n  for (const item of group.items) {\n    validateStatisticDescriptor(item);\n    if (ids.has(item.id)) {\n      throw new TypeError(`Duplicate Statistic id: ${item.id}`);\n    }\n    ids.add(item.id);\n  }\n}\n\nexport const statisticTrendMarks = {\n  up: \"trendUp\",\n  down: \"trendDown\",\n  flat: \"trendFlat\",\n} as const satisfies Record<StatisticTrendDirection, string>;\n"]}

package/dist/steps.d.ts

@@ -0,0 +1,196 @@
+/**
+ * Ant Design Steps' full surface (navigation/clickable jump, dot type, custom
+ * per-item icon, vertical orientation) is intentionally not reproduced. Both
+ * known consumers (Yajalal onboarding, BurnTok sign-up) are single-cursor,
+ * horizontal, back-button-driven wizards; see docs/steps.md for the per-axis
+ * rationale.
+ */
+export type StepStatus = "pending" | "current" | "complete" | "error";
+/** Only the cursor step can be "current" or "error"; every other step is derived. */
+export type StepCursorStatus = Extract<StepStatus, "current" | "error">;
+export type StepItemDescriptor<Id extends string = string> = Readonly<{
+    id: Id;
+    label: string;
+    description?: string;
+}>;
+/**
+ * A single stable cursor (`currentStepId`) is the source of truth instead of a
+ * per-item status array, so "two current steps" or "a completed step past an
+ * unresolved error" cannot be represented. Clickable jump is out of scope, so
+ * the flow is always linear relative to the cursor.
+ */
+export type StepsDescriptor<Id extends string = string> = Readonly<{
+    steps: readonly StepItemDescriptor<Id>[];
+    currentStepId: Id;
+    currentStepStatus?: StepCursorStatus;
+}>;
+export declare const stepsDefaults: {
+    readonly currentStepStatus: "current";
+};
+export type StepsStatusLabels = Readonly<{
+    pending: string;
+    current: string;
+    complete: string;
+    error: string;
+}>;
+export type StepsAccessibleNameInfo = Readonly<{
+    position: number;
+    total: number;
+    label: string;
+}>;
+/**
+ * Products own the exact phrase order and counter-word grammar (Korean
+ * "3단계 중 2단계" does not translate structurally to English "step 2 of 3"),
+ * so the resolver invokes this composer instead of assembling copy itself.
+ */
+export type ComposeStepsAccessibleName = (info: StepsAccessibleNameInfo) => string;
+export type ResolvedStepDescriptor<Id extends string = string> = StepItemDescriptor<Id> & Readonly<{
+    status: StepStatus;
+    /** 1-indexed so position and label both preserve reading order for renderers. */
+    position: number;
+    total: number;
+    /** Primary accessible name: order + label. Never says status by itself. */
+    accessibleName: string;
+    /** Supplementary status announcement (Web aria-describedby text / RN accessibilityHint). */
+    statusLabel: string;
+}>;
+export type ResolveStepsOptions = Readonly<{
+    statusLabels: StepsStatusLabels;
+    composeAccessibleName: ComposeStepsAccessibleName;
+}>;
+export declare function validateStepItemDescriptor<Id extends string>(step: StepItemDescriptor<Id>): void;
+export declare function validateStepsDescriptor<Id extends string>(descriptor: StepsDescriptor<Id>): void;
+export declare function validateStepsStatusLabels(labels: StepsStatusLabels): void;
+/** A step is visually and semantically "reached" once it is no longer waiting. */
+export declare function isStepReached(status: StepStatus): boolean;
+/**
+ * Derives every step's status from its position relative to the single
+ * cursor, then attaches the order-preserving accessible name and the
+ * supplementary status announcement. Throws on a malformed descriptor,
+ * labels bag, or composer instead of silently rendering an inconsistent flow.
+ */
+export declare function resolveStepsDescriptor<Id extends string>(descriptor: StepsDescriptor<Id>, options: ResolveStepsOptions): readonly ResolvedStepDescriptor<Id>[];
+export declare const stepsRecipe: {
+    readonly slots: readonly ["root", "step", "indicator", "marker", "connector", "label", "description"];
+    readonly gap: 8;
+    readonly indicator: {
+        readonly size: 24;
+        readonly borderWidth: 1;
+        readonly activeBorderWidth: 2;
+        /** null means the renderer shows the step's own position number instead of a glyph. */
+        readonly marks: {
+            readonly pending: null;
+            readonly current: null;
+            readonly complete: "check";
+            readonly error: "error";
+        };
+        readonly border: {
+            readonly pending: Readonly<{
+                source: "theme";
+                key: "border";
+                alpha?: number;
+            }>;
+            readonly current: Readonly<{
+                source: "theme";
+                key: "contentBrand";
+                alpha?: number;
+            }>;
+            readonly complete: Readonly<{
+                source: "accent";
+                key: "success";
+                alpha?: number;
+            }>;
+            readonly error: Readonly<{
+                source: "theme";
+                key: "danger";
+                alpha?: number;
+            }>;
+        };
+        readonly background: {
+            readonly pending: null;
+            readonly current: null;
+            readonly complete: Readonly<{
+                source: "accent";
+                key: "success";
+                alpha?: number;
+            }>;
+            readonly error: Readonly<{
+                source: "theme";
+                key: "danger";
+                alpha?: number;
+            }>;
+        };
+        readonly content: {
+            readonly pending: Readonly<{
+                source: "theme";
+                key: "textMuted";
+                alpha?: number;
+            }>;
+            readonly current: Readonly<{
+                source: "theme";
+                key: "contentBrand";
+                alpha?: number;
+            }>;
+            readonly complete: Readonly<{
+                source: "accent";
+                key: "success";
+                alpha?: number;
+            }>;
+            readonly error: Readonly<{
+                source: "theme";
+                key: "danger";
+                alpha?: number;
+            }>;
+        };
+    };
+    readonly connector: {
+        readonly height: 1;
+        readonly tone: {
+            readonly reached: Readonly<{
+                source: "theme";
+                key: "contentBrand";
+                alpha?: number;
+            }>;
+            readonly unreached: Readonly<{
+                source: "theme";
+                key: "border";
+                alpha?: number;
+            }>;
+        };
+    };
+    readonly label: {
+        readonly textVariant: "label";
+        readonly fontWeight: "600";
+        readonly color: {
+            readonly pending: Readonly<{
+                source: "theme";
+                key: "textMuted";
+                alpha?: number;
+            }>;
+            readonly current: Readonly<{
+                source: "theme";
+                key: "text";
+                alpha?: number;
+            }>;
+            readonly complete: Readonly<{
+                source: "theme";
+                key: "text";
+                alpha?: number;
+            }>;
+            readonly error: Readonly<{
+                source: "theme";
+                key: "danger";
+                alpha?: number;
+            }>;
+        };
+    };
+    readonly description: {
+        readonly textVariant: "caption";
+        readonly color: Readonly<{
+            source: "theme";
+            key: "textMuted";
+            alpha?: number;
+        }>;
+    };
+};
+//# sourceMappingURL=steps.d.ts.map

package/dist/steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../src/steps.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEtE,qFAAqF;AACrF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;AAExE,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IACpE,EAAE,EAAE,EAAE,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IACjE,KAAK,EAAE,SAAS,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC;IACzC,aAAa,EAAE,EAAE,CAAC;IAClB,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;CACtC,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;CAE4C,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,MAAM,0BAA0B,GAAG,CACvC,IAAI,EAAE,uBAAuB,KAC1B,MAAM,CAAC;AAEZ,MAAM,MAAM,sBAAsB,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM,IAC3D,kBAAkB,CAAC,EAAE,CAAC,GACpB,QAAQ,CAAC;IACP,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,cAAc,EAAE,MAAM,CAAC;IACvB,4FAA4F;IAC5F,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEP,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,YAAY,EAAE,iBAAiB,CAAC;IAChC,qBAAqB,EAAE,0BAA0B,CAAC;CACnD,CAAC,CAAC;AAQH,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,MAAM,EAC1D,IAAI,EAAE,kBAAkB,CAAC,EAAE,CAAC,GAC3B,IAAI,CASN;AAED,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,MAAM,EACvD,UAAU,EAAE,eAAe,CAAC,EAAE,CAAC,GAC9B,IAAI,CA0BN;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAUzE;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO,CAEzD;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,MAAM,EACtD,UAAU,EAAE,eAAe,CAAC,EAAE,CAAC,EAC/B,OAAO,EAAE,mBAAmB,GAC3B,SAAS,sBAAsB,CAAC,EAAE,CAAC,EAAE,CAyCvC;AAED,eAAO,MAAM,WAAW;;;;;;;QAepB,uFAAuF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE1F,CAAC"}

package/dist/steps.js

@@ -0,0 +1,160 @@
+import { fontWeight, glyph, spacing, stroke } from "./foundations.js";
+import { semanticColors } from "./semantic-colors.js";
+export const stepsDefaults = {
+    currentStepStatus: "current",
+};
+function assertNonEmpty(value, field) {
+    if (value.trim().length === 0) {
+        throw new TypeError(`Steps ${field} must not be empty`);
+    }
+}
+export function validateStepItemDescriptor(step) {
+    assertNonEmpty(step.id, "item id");
+    if (step.id !== step.id.trim()) {
+        throw new TypeError("Steps item id must not start or end with whitespace");
+    }
+    assertNonEmpty(step.label, "item label");
+    if (step.description !== undefined) {
+        assertNonEmpty(step.description, "item description");
+    }
+}
+export function validateStepsDescriptor(descriptor) {
+    if (descriptor.steps.length < 2) {
+        throw new RangeError("Steps must contain at least two steps");
+    }
+    const ids = new Set();
+    for (const step of descriptor.steps) {
+        validateStepItemDescriptor(step);
+        if (ids.has(step.id)) {
+            throw new TypeError(`Duplicate Steps item id: ${step.id}`);
+        }
+        ids.add(step.id);
+    }
+    if (!ids.has(descriptor.currentStepId)) {
+        throw new RangeError(`Steps currentStepId does not match any step id: ${String(descriptor.currentStepId)}`);
+    }
+    if (descriptor.currentStepStatus !== undefined &&
+        descriptor.currentStepStatus !== "current" &&
+        descriptor.currentStepStatus !== "error") {
+        throw new TypeError(`Unsupported Steps currentStepStatus: ${String(descriptor.currentStepStatus)}`);
+    }
+}
+export function validateStepsStatusLabels(labels) {
+    if (labels === null || typeof labels !== "object") {
+        throw new TypeError("Steps statusLabels must be an object");
+    }
+    for (const key of ["pending", "current", "complete", "error"]) {
+        const value = labels[key];
+        if (typeof value !== "string" || value.trim().length === 0) {
+            throw new TypeError(`Steps statusLabels.${key} must not be empty`);
+        }
+    }
+}
+/** A step is visually and semantically "reached" once it is no longer waiting. */
+export function isStepReached(status) {
+    return status !== "pending";
+}
+/**
+ * Derives every step's status from its position relative to the single
+ * cursor, then attaches the order-preserving accessible name and the
+ * supplementary status announcement. Throws on a malformed descriptor,
+ * labels bag, or composer instead of silently rendering an inconsistent flow.
+ */
+export function resolveStepsDescriptor(descriptor, options) {
+    validateStepsDescriptor(descriptor);
+    validateStepsStatusLabels(options.statusLabels);
+    if (typeof options.composeAccessibleName !== "function") {
+        throw new TypeError("Steps composeAccessibleName must be a function");
+    }
+    const currentStepStatus = descriptor.currentStepStatus ?? stepsDefaults.currentStepStatus;
+    const total = descriptor.steps.length;
+    const cursorIndex = descriptor.steps.findIndex((step) => step.id === descriptor.currentStepId);
+    return descriptor.steps.map((step, index) => {
+        const status = index < cursorIndex
+            ? "complete"
+            : index > cursorIndex
+                ? "pending"
+                : currentStepStatus;
+        const position = index + 1;
+        const accessibleName = options.composeAccessibleName({
+            position,
+            total,
+            label: step.label,
+        });
+        if (typeof accessibleName !== "string" || accessibleName.trim().length === 0) {
+            throw new TypeError("Steps composeAccessibleName must return a non-empty string");
+        }
+        return {
+            ...step,
+            status,
+            position,
+            total,
+            accessibleName,
+            statusLabel: options.statusLabels[status],
+        };
+    });
+}
+export const stepsRecipe = {
+    slots: [
+        "root",
+        "step",
+        "indicator",
+        "marker",
+        "connector",
+        "label",
+        "description",
+    ],
+    gap: spacing.xs,
+    indicator: {
+        size: glyph.md,
+        borderWidth: stroke.default,
+        activeBorderWidth: stroke.strong,
+        /** null means the renderer shows the step's own position number instead of a glyph. */
+        marks: {
+            pending: null,
+            current: null,
+            complete: "check",
+            error: "error",
+        },
+        border: {
+            pending: semanticColors.border.default,
+            current: semanticColors.content.brand,
+            complete: semanticColors.feedback.success.border,
+            error: semanticColors.feedback.danger.border,
+        },
+        background: {
+            pending: null,
+            current: null,
+            complete: semanticColors.feedback.success.badgeBackground,
+            error: semanticColors.feedback.danger.badgeBackground,
+        },
+        content: {
+            pending: semanticColors.content.secondary,
+            current: semanticColors.content.brand,
+            complete: semanticColors.feedback.success.foreground,
+            error: semanticColors.feedback.danger.foreground,
+        },
+    },
+    connector: {
+        height: stroke.default,
+        tone: {
+            reached: semanticColors.content.brand,
+            unreached: semanticColors.border.default,
+        },
+    },
+    label: {
+        textVariant: "label",
+        fontWeight: fontWeight.semibold,
+        color: {
+            pending: semanticColors.content.secondary,
+            current: semanticColors.content.primary,
+            complete: semanticColors.content.primary,
+            error: semanticColors.feedback.danger.foreground,
+        },
+    },
+    description: {
+        textVariant: "caption",
+        color: semanticColors.content.secondary,
+    },
+};
+//# sourceMappingURL=steps.js.map

package/dist/steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.js","sourceRoot":"","sources":["../src/steps.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColorReference } from \"./color-references.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\nimport type { SemanticIconName } from \"./icon.js\";\nimport { fontWeight, glyph, spacing, stroke } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * Ant Design Steps' full surface (navigation/clickable jump, dot type, custom\n * per-item icon, vertical orientation) is intentionally not reproduced. Both\n * known consumers (Yajalal onboarding, BurnTok sign-up) are single-cursor,\n * horizontal, back-button-driven wizards; see docs/steps.md for the per-axis\n * rationale.\n */\nexport type StepStatus = \"pending\" | \"current\" | \"complete\" | \"error\";\n\n/** Only the cursor step can be \"current\" or \"error\"; every other step is derived. */\nexport type StepCursorStatus = Extract<StepStatus, \"current\" | \"error\">;\n\nexport type StepItemDescriptor<Id extends string = string> = Readonly<{\n  id: Id;\n  label: string;\n  description?: string;\n}>;\n\n/**\n * A single stable cursor (`currentStepId`) is the source of truth instead of a\n * per-item status array, so \"two current steps\" or \"a completed step past an\n * unresolved error\" cannot be represented. Clickable jump is out of scope, so\n * the flow is always linear relative to the cursor.\n */\nexport type StepsDescriptor<Id extends string = string> = Readonly<{\n  steps: readonly StepItemDescriptor<Id>[];\n  currentStepId: Id;\n  currentStepStatus?: StepCursorStatus;\n}>;\n\nexport const stepsDefaults = {\n  currentStepStatus: \"current\",\n} as const satisfies Readonly<{ currentStepStatus: StepCursorStatus }>;\n\nexport type StepsStatusLabels = Readonly<{\n  pending: string;\n  current: string;\n  complete: string;\n  error: string;\n}>;\n\nexport type StepsAccessibleNameInfo = Readonly<{\n  position: number;\n  total: number;\n  label: string;\n}>;\n\n/**\n * Products own the exact phrase order and counter-word grammar (Korean\n * \"3단계 중 2단계\" does not translate structurally to English \"step 2 of 3\"),\n * so the resolver invokes this composer instead of assembling copy itself.\n */\nexport type ComposeStepsAccessibleName = (\n  info: StepsAccessibleNameInfo,\n) => string;\n\nexport type ResolvedStepDescriptor<Id extends string = string> =\n  StepItemDescriptor<Id> &\n    Readonly<{\n      status: StepStatus;\n      /** 1-indexed so position and label both preserve reading order for renderers. */\n      position: number;\n      total: number;\n      /** Primary accessible name: order + label. Never says status by itself. */\n      accessibleName: string;\n      /** Supplementary status announcement (Web aria-describedby text / RN accessibilityHint). */\n      statusLabel: string;\n    }>;\n\nexport type ResolveStepsOptions = Readonly<{\n  statusLabels: StepsStatusLabels;\n  composeAccessibleName: ComposeStepsAccessibleName;\n}>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Steps ${field} must not be empty`);\n  }\n}\n\nexport function validateStepItemDescriptor<Id extends string>(\n  step: StepItemDescriptor<Id>,\n): void {\n  assertNonEmpty(step.id, \"item id\");\n  if (step.id !== step.id.trim()) {\n    throw new TypeError(\"Steps item id must not start or end with whitespace\");\n  }\n  assertNonEmpty(step.label, \"item label\");\n  if (step.description !== undefined) {\n    assertNonEmpty(step.description, \"item description\");\n  }\n}\n\nexport function validateStepsDescriptor<Id extends string>(\n  descriptor: StepsDescriptor<Id>,\n): void {\n  if (descriptor.steps.length < 2) {\n    throw new RangeError(\"Steps must contain at least two steps\");\n  }\n  const ids = new Set<Id>();\n  for (const step of descriptor.steps) {\n    validateStepItemDescriptor(step);\n    if (ids.has(step.id)) {\n      throw new TypeError(`Duplicate Steps item id: ${step.id}`);\n    }\n    ids.add(step.id);\n  }\n  if (!ids.has(descriptor.currentStepId)) {\n    throw new RangeError(\n      `Steps currentStepId does not match any step id: ${String(descriptor.currentStepId)}`,\n    );\n  }\n  if (\n    descriptor.currentStepStatus !== undefined &&\n    descriptor.currentStepStatus !== \"current\" &&\n    descriptor.currentStepStatus !== \"error\"\n  ) {\n    throw new TypeError(\n      `Unsupported Steps currentStepStatus: ${String(descriptor.currentStepStatus)}`,\n    );\n  }\n}\n\nexport function validateStepsStatusLabels(labels: StepsStatusLabels): void {\n  if (labels === null || typeof labels !== \"object\") {\n    throw new TypeError(\"Steps statusLabels must be an object\");\n  }\n  for (const key of [\"pending\", \"current\", \"complete\", \"error\"] as const) {\n    const value = labels[key];\n    if (typeof value !== \"string\" || value.trim().length === 0) {\n      throw new TypeError(`Steps statusLabels.${key} must not be empty`);\n    }\n  }\n}\n\n/** A step is visually and semantically \"reached\" once it is no longer waiting. */\nexport function isStepReached(status: StepStatus): boolean {\n  return status !== \"pending\";\n}\n\n/**\n * Derives every step's status from its position relative to the single\n * cursor, then attaches the order-preserving accessible name and the\n * supplementary status announcement. Throws on a malformed descriptor,\n * labels bag, or composer instead of silently rendering an inconsistent flow.\n */\nexport function resolveStepsDescriptor<Id extends string>(\n  descriptor: StepsDescriptor<Id>,\n  options: ResolveStepsOptions,\n): readonly ResolvedStepDescriptor<Id>[] {\n  validateStepsDescriptor(descriptor);\n  validateStepsStatusLabels(options.statusLabels);\n  if (typeof options.composeAccessibleName !== \"function\") {\n    throw new TypeError(\"Steps composeAccessibleName must be a function\");\n  }\n\n  const currentStepStatus =\n    descriptor.currentStepStatus ?? stepsDefaults.currentStepStatus;\n  const total = descriptor.steps.length;\n  const cursorIndex = descriptor.steps.findIndex(\n    (step) => step.id === descriptor.currentStepId,\n  );\n\n  return descriptor.steps.map((step, index) => {\n    const status: StepStatus =\n      index < cursorIndex\n        ? \"complete\"\n        : index > cursorIndex\n          ? \"pending\"\n          : currentStepStatus;\n    const position = index + 1;\n    const accessibleName = options.composeAccessibleName({\n      position,\n      total,\n      label: step.label,\n    });\n    if (typeof accessibleName !== \"string\" || accessibleName.trim().length === 0) {\n      throw new TypeError(\n        \"Steps composeAccessibleName must return a non-empty string\",\n      );\n    }\n    return {\n      ...step,\n      status,\n      position,\n      total,\n      accessibleName,\n      statusLabel: options.statusLabels[status],\n    };\n  });\n}\n\nexport const stepsRecipe = {\n  slots: [\n    \"root\",\n    \"step\",\n    \"indicator\",\n    \"marker\",\n    \"connector\",\n    \"label\",\n    \"description\",\n  ] as const,\n  gap: spacing.xs,\n  indicator: {\n    size: glyph.md,\n    borderWidth: stroke.default,\n    activeBorderWidth: stroke.strong,\n    /** null means the renderer shows the step's own position number instead of a glyph. */\n    marks: {\n      pending: null,\n      current: null,\n      complete: \"check\",\n      error: \"error\",\n    },\n    border: {\n      pending: semanticColors.border.default,\n      current: semanticColors.content.brand,\n      complete: semanticColors.feedback.success.border,\n      error: semanticColors.feedback.danger.border,\n    },\n    background: {\n      pending: null,\n      current: null,\n      complete: semanticColors.feedback.success.badgeBackground,\n      error: semanticColors.feedback.danger.badgeBackground,\n    },\n    content: {\n      pending: semanticColors.content.secondary,\n      current: semanticColors.content.brand,\n      complete: semanticColors.feedback.success.foreground,\n      error: semanticColors.feedback.danger.foreground,\n    },\n  },\n  connector: {\n    height: stroke.default,\n    tone: {\n      reached: semanticColors.content.brand,\n      unreached: semanticColors.border.default,\n    },\n  },\n  label: {\n    textVariant: \"label\",\n    fontWeight: fontWeight.semibold,\n    color: {\n      pending: semanticColors.content.secondary,\n      current: semanticColors.content.primary,\n      complete: semanticColors.content.primary,\n      error: semanticColors.feedback.danger.foreground,\n    },\n  },\n  description: {\n    textVariant: \"caption\",\n    color: semanticColors.content.secondary,\n  },\n} as const satisfies {\n  slots: readonly string[];\n  gap: number;\n  indicator: {\n    size: number;\n    borderWidth: number;\n    activeBorderWidth: number;\n    marks: Record<StepStatus, SemanticIconName | null>;\n    border: Record<StepStatus, ColorReference>;\n    background: Record<StepStatus, ColorReference | null>;\n    content: Record<StepStatus, ColorReference>;\n  };\n  connector: {\n    height: number;\n    tone: Record<\"reached\" | \"unreached\", ColorReference>;\n  };\n  label: {\n    textVariant: TextVariant;\n    fontWeight: FontWeightValue;\n    color: Record<StepStatus, ColorReference>;\n  };\n  description: {\n    textVariant: TextVariant;\n    color: ColorReference;\n  };\n};\n"]}

package/dist/tag.d.ts

@@ -0,0 +1,128 @@
+import { type ColorReferencePalette } from "./color-references.js";
+export type TagTone = "neutral" | "info" | "success" | "attention" | "brand";
+export declare const tagDefaults: {
+    readonly tone: "neutral";
+};
+/**
+ * A single piece of static metadata (a position, a grade, a season). Tag has
+ * no interaction axis at all — no selected, no pressed, no closable. Removing
+ * or toggling a tag is deselection, which belongs to `Chip`.
+ */
+export type TagDescriptor = Readonly<{
+    label: string;
+    tone?: TagTone;
+}>;
+export type ResolvedTagDescriptor = Readonly<{
+    label: string;
+    tone: TagTone;
+}>;
+export declare function validateTagDescriptor(descriptor: TagDescriptor): void;
+export declare function resolveTagDescriptor(descriptor: TagDescriptor): ResolvedTagDescriptor;
+/**
+ * Rectangular, not the pill `radius.full` that `chipRecipe` and `badgeRecipe`
+ * use, so a static Tag never reads as a pressable Chip or a status Badge at a
+ * glance. No `states` and no `focus` contract: nothing here is ever pressed
+ * or focused.
+ */
+export declare const tagRecipe: {
+    readonly slots: readonly ["root", "label"];
+    readonly defaults: {
+        readonly tone: "neutral";
+    };
+    readonly tones: {
+        readonly neutral: {
+            readonly background: Readonly<{
+                source: "theme";
+                key: "surfaceAlt";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "theme";
+                key: "textMuted";
+                alpha?: number;
+            }>;
+            readonly border: null;
+        };
+        readonly brand: {
+            readonly background: Readonly<{
+                source: "theme";
+                key: "surfaceAccent";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "theme";
+                key: "contentBrand";
+                alpha?: number;
+            }>;
+            readonly border: null;
+        };
+        readonly info: {
+            readonly background: Readonly<{
+                source: "accent";
+                key: "info";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "accent";
+                key: "info";
+                alpha?: number;
+            }>;
+            readonly border: Readonly<{
+                source: "accent";
+                key: "info";
+                alpha?: number;
+            }>;
+        };
+        readonly success: {
+            readonly background: Readonly<{
+                source: "accent";
+                key: "success";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "accent";
+                key: "success";
+                alpha?: number;
+            }>;
+            readonly border: Readonly<{
+                source: "accent";
+                key: "success";
+                alpha?: number;
+            }>;
+        };
+        readonly attention: {
+            readonly background: Readonly<{
+                source: "accent";
+                key: "attention";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "accent";
+                key: "attention";
+                alpha?: number;
+            }>;
+            readonly border: Readonly<{
+                source: "accent";
+                key: "attention";
+                alpha?: number;
+            }>;
+        };
+    };
+    readonly size: {
+        readonly minHeight: 20;
+        readonly paddingHorizontal: 4;
+        readonly gap: 4;
+        readonly textVariant: "caption";
+        readonly fontWeight: "600";
+    };
+    readonly radius: "sm";
+    readonly borderWidth: 1;
+};
+export type ResolvedTagPresentation = Readonly<{
+    background: string;
+    content: string;
+    border: string | null;
+}>;
+/** Resolve the same Tag recipe for non-CSS renderers. */
+export declare function resolveTagPresentation(tone: TagTone, palette: ColorReferencePalette): ResolvedTagPresentation;
+//# sourceMappingURL=tag.d.ts.map

package/dist/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../src/tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7E,eAAO,MAAM,WAAW;;CAEwB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf,CAAC,CAAC;AAgBH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,aAAa,GAAG,IAAI,CAQrE;AAED,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,aAAa,GACxB,qBAAqB,CAMvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CZ,CAAC;AAEX,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC,CAAC;AAEH,yDAAyD;AACzD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,qBAAqB,GAC7B,uBAAuB,CAUzB"}