@thewhatmatters/wmds 0.2.0

package/bin/wmds-check.mjs

@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+/**
+ * wmds-check — a consumer audit for apps built on @thewhatmatters/wmds. Run it in the app's CI:
+ *
+ *   npx wmds-check                 # scans ./src, ./app, ./components, ./pages (whichever exist)
+ *   npx wmds-check app components  # or name the folders
+ *   npx wmds-check --json          # machine-readable output
+ *   npx wmds-check --max-warnings 0
+ *
+ * Rules (errors fail the run; warnings fail it only past --max-warnings):
+ *   raw-control       error  <button>, <input>, <select>, <textarea> where a WMDS component exists
+ *   important-override error `!` utilities in className on a component imported from @thewhatmatters/wmds
+ *   raw-color         error  hex / rgb / hsl colors in className or style
+ *   raw-type          warn   text-xs…text-9xl or text-[…] sizes — use type-* utilities
+ *   raw-motion        warn   duration-[…] / ease-[…] / delay-[…] utilities, or numeric Motion durations
+ *   pattern-drift     warn   a pasted pattern differs from docs/patterns/<id>.tsx in the installed package
+ *   pattern-stale     warn   a pasted pattern's header names an older package version
+ *   pattern-removed   error  a pasted pattern's id no longer ships
+ *
+ * Silence one line with a trailing or preceding comment: `wmds-check-ignore raw-control <reason>`.
+ * The checks are line-based heuristics, not a parser: they favor few false negatives, and every
+ * finding names the line so a reviewer can judge it.
+ */
+import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+
+const args = process.argv.slice(2);
+const json = args.includes("--json");
+const maxWarningsIndex = args.indexOf("--max-warnings");
+const maxWarnings = maxWarningsIndex === -1 ? Infinity : Number(args[maxWarningsIndex + 1]);
+const roots = args.filter((arg, index) => !arg.startsWith("--") && (maxWarningsIndex === -1 || index !== maxWarningsIndex + 1));
+const cwd = process.cwd();
+const scanRoots = (roots.length ? roots : ["src", "app", "components", "pages"]).filter((dir) =>
+  existsSync(path.resolve(cwd, dir)),
+);
+
+const require = createRequire(path.join(cwd, "package.json"));
+let packageRoot = null;
+let packageVersion = null;
+try {
+  const manifest = require.resolve("@thewhatmatters/wmds/package.json");
+  packageRoot = path.dirname(manifest);
+  packageVersion = JSON.parse(readFileSync(manifest, "utf8")).version;
+} catch {
+  // Not installed: the pattern rules are skipped.
+}
+
+const skipDirs = new Set(["node_modules", ".next", "dist", "build", "out", ".git", "coverage", "storybook-static"]);
+const files = [];
+const walk = (dir) => {
+  for (const name of readdirSync(dir)) {
+    const file = path.join(dir, name);
+    if (statSync(file).isDirectory()) {
+      if (!skipDirs.has(name)) walk(file);
+    } else if (/\.(tsx|jsx|ts|js|mdx)$/.test(name) && !/\.(test|spec|stories)\./.test(name)) {
+      files.push(file);
+    }
+  }
+};
+for (const root of scanRoots) walk(path.resolve(cwd, root));
+
+const findings = [];
+const report = (file, line, rule, severity, message) =>
+  findings.push({ file: path.relative(cwd, file), line, rule, severity, message });
+
+const ignored = (lines, index, rule) => {
+  const here = lines[index] ?? "";
+  const above = lines[index - 1] ?? "";
+  return [here, above].some((text) => text.includes("wmds-check-ignore") && (text.includes(rule) || !/wmds-check-ignore\s+[a-z-]+/.test(text)));
+};
+
+const rawControls = [
+  ["button", "Button / IconButton"],
+  ["input", "Input / Checkbox / Radio / Switch"],
+  ["select", "Select"],
+  ["textarea", "TextArea / PromptBar"],
+];
+
+const strip = (source) =>
+  source
+    .split("\n")
+    .filter((line) => !/^\/\/ (@thewhatmatters\/wmds@|Storybook:|Show code)/.test(line))
+    .join("\n")
+    .trim();
+
+for (const file of files) {
+  const source = readFileSync(file, "utf8");
+  const lines = source.split("\n");
+
+  // WMDS components imported in this file.
+  const wmdsNames = new Set();
+  for (const match of source.matchAll(/import\s*\{([^}]*)\}\s*from\s*["']@thewhatmatters\/wmds["']/g)) {
+    for (const part of match[1].split(",")) {
+      const name = part.trim().replace(/^type\s+/, "").split(/\s+as\s+/).pop();
+      if (name && /^[A-Z]/.test(name)) wmdsNames.add(name);
+    }
+  }
+
+  lines.forEach((line, index) => {
+    const n = index + 1;
+    for (const [tag, use] of rawControls) {
+      const element = new RegExp(`<${tag}(\\s|>|/)`);
+      if (element.test(line) && !(tag === "input" && /type=["']hidden["']/.test(line)) && !ignored(lines, index, "raw-control")) {
+        report(file, n, "raw-control", "error", `raw <${tag}> — use WMDS ${use}`);
+      }
+    }
+
+    const tagMatch = line.match(/<([A-Z][\w.]*)\b/);
+    const component = tagMatch?.[1].split(".")[0];
+    if (component && wmdsNames.has(component)) {
+      // className on this line or the next few lines of the same element.
+      const element = lines.slice(index, index + 8).join("\n").split(/\/?>/)[0];
+      const classes = element.match(/className=(?:"([^"]*)"|\{`([^`]*)`\}|\{"([^"]*)"\})/);
+      const value = classes?.[1] ?? classes?.[2] ?? classes?.[3] ?? "";
+      const important = value.split(/\s+/).filter((token) => /(^|:)!/.test(token));
+      if (important.length && !ignored(lines, index, "important-override")) {
+        report(file, n, "important-override", "error", `${important.join(" ")} on <${tagMatch[1]}> — className is layout only; ask WMDS for the variant`);
+      }
+    }
+
+    if (/(className|class|style)=/.test(line) || /(color|background|border|fill|stroke)\s*:/.test(line)) {
+      if (/#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|oklch\(/.test(line) && !/var\(--/.test(line.match(/#[0-9a-fA-F]{3,8}|rgba?\(.*?\)|hsla?\(.*?\)|oklch\(.*?\)/)?.[0] ?? "") && !ignored(lines, index, "raw-color")) {
+        report(file, n, "raw-color", "error", "raw color value — use a semantic color utility or token");
+      }
+    }
+    if (/className=/.test(line) || /\bcn\(|clsx\(/.test(line)) {
+      const sizes = line.match(/(^|[\s"'`:])text-(xs|sm|base|lg|[2-9]?xl|\[\d[^\]]*\])(?=[\s"'`]|$)/g);
+      if (sizes && !ignored(lines, index, "raw-type")) {
+        report(file, n, "raw-type", "warn", `${sizes.map((s) => s.trim()).join(" ")} — use type-* utilities`);
+      }
+      const motion = line.match(/\b(duration|ease|delay)-\[[^\]]+\]/g);
+      if (motion && !ignored(lines, index, "raw-motion")) {
+        report(file, n, "raw-motion", "warn", `${motion.join(" ")} — use duration-fast|medium|slow and ease-standard`);
+      }
+    }
+    if (/transition=\{\{[^}]*\bduration:\s*\d/.test(line) && !/duration:\s*0\b/.test(line) && !ignored(lines, index, "raw-motion")) {
+      report(file, n, "raw-motion", "warn", "numeric Motion duration — use motionTransitionProp()");
+    }
+  });
+
+  // Pasted patterns.
+  const header = lines[0]?.match(/^\/\/ @thewhatmatters\/wmds@([\w.-]+) · (.+)$/);
+  const id = source.match(/\?path=\/story\/([\w-]+)/)?.[1];
+  if (header && id && packageRoot) {
+    const shipped = path.join(packageRoot, "docs", "patterns", `${id}.tsx`);
+    if (!existsSync(shipped)) {
+      report(file, 1, "pattern-removed", "error", `pattern ${id} no longer ships in ${packageVersion} — see CHANGELOG.md`);
+    } else {
+      if (header[1] !== packageVersion) {
+        report(file, 1, "pattern-stale", "warn", `pasted from ${header[1]}, installed ${packageVersion} — re-copy if CHANGELOG names it`);
+      }
+      if (strip(readFileSync(shipped, "utf8")) !== strip(source)) {
+        report(file, 1, "pattern-drift", "warn", `differs from docs/patterns/${id}.tsx — allowed edits are content, data, handlers, exports`);
+      }
+    }
+  }
+}
+
+const errors = findings.filter((finding) => finding.severity === "error").length;
+const warnings = findings.length - errors;
+
+if (json) {
+  console.log(JSON.stringify({ package: packageVersion, scanned: files.length, errors, warnings, findings }, null, 2));
+} else {
+  for (const finding of findings) {
+    console.log(`${finding.file}:${finding.line}  ${finding.severity === "error" ? "error" : "warn "}  ${finding.rule}  ${finding.message}`);
+  }
+  console.log(
+    `wmds-check: ${files.length} files, ${errors} error${errors === 1 ? "" : "s"}, ${warnings} warning${warnings === 1 ? "" : "s"}${packageVersion ? ` (@thewhatmatters/wmds ${packageVersion})` : " (@thewhatmatters/wmds not installed: pattern rules skipped)"}`,
+  );
+}
+process.exit(errors > 0 || warnings > maxWarnings ? 1 : 0);

package/dist/cluster.css

@@ -0,0 +1,14 @@
+/**
+ * Cluster control scale — shared heights for controls in one row
+ * (Card header, filter rails, toolbar groups).
+ *
+ * `--spacing` stays 4px (ADR-0007). Cluster tiers = 7 / 9 / 11 × spacing.
+ * See ADR-0011 and Foundation → Cluster.
+ */
+
+:root {
+  /* 7 / 9 / 11 × 4px — mirrored by h-7 / h-9 / min-h-11 in clusterScale.ts */
+  --cluster-height-sm: 1.75rem; /* 28px */
+  --cluster-height-md: 2.25rem; /* 36px */
+  --cluster-height-lg: 2.75rem; /* 44px */
+}

package/dist/collapse.css

@@ -0,0 +1,24 @@
+/** Shared height-collapse motion — List panels, Table filter rows. */
+.motion-collapse {
+  display: grid;
+  transition:
+    grid-template-rows var(--duration-medium) var(--ease-standard),
+    opacity var(--duration-medium) var(--ease-standard);
+}
+
+.motion-collapse[data-visible="true"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.motion-collapse[data-visible="false"] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-collapse {
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/colors.css

@@ -0,0 +1,282 @@
+/**
+ * WMDS color sheet — Astryx-aligned semantic roles.
+ * Light defaults on :root; dark swaps the same names under [data-theme="dark"].
+ * PitchKit kit appearance also uses [data-theme="soft"] — same role names, warmer paper.
+ * Reference: https://astryx.atmeta.com/docs/color
+ *
+ * Surface hierarchy: body → surface → card → popover.
+ * Status roles: error | success | warning (+ *-muted, on-*).
+ * Brand actions: primary / on-primary (WhatMatters — separate from accent).
+ */
+:root {
+  /* Surface hierarchy — body/muted lightened for softer inset wells (test) */
+  --color-background-body: #f8f8f8;
+  --color-background-surface: #ffffff;
+  --color-background-card: #ffffff;
+  --color-background-popover: #ffffff;
+  --color-background-muted: #f8f8f8;
+
+  /* Text — three-step ladder: primary → secondary (interactive idle + supporting) → disabled (placeholder only) */
+  --color-text-primary: #171717;
+  --color-text-secondary: #404040;
+  --color-text-disabled: #b3b3b3;
+  --color-text-accent: #262626;
+
+  /* Accent (neutral UI chrome — not brand) */
+  --color-accent: #262626;
+  --color-accent-muted: #f8f8f8;
+  --color-on-accent: #ffffff;
+
+  /* Overlays & neutral fills */
+  --color-neutral: #0000000f;
+  --color-overlay: #00000080;
+  --color-overlay-hover: #0000000d;
+  --color-overlay-pressed: #0000001a;
+
+  /*
+   * Borders and elevation chrome (ADR-0029).
+   * `--color-border` is the divider ink — warm 6%, not the floating-surface edge.
+   * Floating pills and menus use `--color-elevation-edge` / `--color-elevation-surface`
+   * plus `--shadow-soft-sm` (diffuse shadow + inset ring).
+   * `--color-border-control` stays at WCAG 3:1 for input, select, and search.
+   * `--color-fill-selected` is the current-nav pill (#eee).
+   */
+  --color-border: rgb(42 36 28 / 6%);
+  --color-border-emphasized: #d9d9d9;
+  --color-border-control: #8c8c8c;
+  --color-fill-selected: #eeeeee;
+  --color-elevation-edge: rgb(255 255 253 / 90%);
+  --color-elevation-surface: rgb(255 255 253 / 90%);
+
+  /* Loading placeholders — skeleton screens (Astryx Skeleton) */
+  --color-skeleton: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-muted));
+
+  /* Status — error */
+  --color-error: #a50c25;
+  --color-error-muted: #facecb;
+  --color-on-error: #ffffff;
+
+  /* Status — success */
+  --color-success: #007004;
+  --color-success-muted: #c5e5c0;
+  --color-on-success: #ffffff;
+
+  /* Status — warning */
+  --color-warning: #745b00;
+  --color-warning-muted: #f8da9d;
+  --color-on-warning: #ffffff;
+
+  /* Info (WMDS extension — Astryx blue family) */
+  --color-info: #00458c;
+  --color-info-muted: #c4ddfb;
+  --color-on-info: #ffffff;
+
+  /*
+   * Brand / primary actions (WhatMatters default).
+   *
+   * Consumer brand override — the ONLY per-app color hook. An app may set
+   * `--color-primary` (and optionally `--color-on-primary`) on `:root` and on
+   * `[data-theme="dark"]` in a stylesheet imported AFTER `@thewhatmatters/wmds/styles.css`.
+   * `--color-focus-ring` and the primary hover / active mixes (stateColors.css) derive
+   * from `--color-primary`, so one light value and one dark value re-brand every
+   * primary control. Accent, status, chart, type, and grid tokens are not overridable
+   * per app — see CONSUMING.md → Brand override.
+   */
+  --color-primary: #39485c;
+  --color-on-primary: #fafafa;
+
+  /*
+   * WhatMatters brand navy. Not status info (`--color-info`, #00458c) and not
+   * the action brand (`--color-primary`, slate). Matches the hero focus tile.
+   * White on #011272 is 15.8:1.
+   * `--color-brand-soft` is the wordmark: 40% white on the navy (about #6771aa, 3.4:1).
+   * 20% white falls to about #34418e (1.7:1) and disappears into the field.
+   */
+  --color-brand: #011272;
+  --color-on-brand: #ffffff;
+  --color-brand-outline: var(--color-brand);
+  --color-brand-soft: color-mix(in srgb, var(--color-on-brand) 40%, var(--color-brand));
+
+  /* Derived from --color-primary — 62% clears WCAG 3:1 on white and #f8f8f8 */
+  --color-focus-ring: color-mix(in srgb, var(--color-primary) 62%, transparent);
+
+  /*
+   * Chart — categorical series (no semantic meaning).
+   * Use for multi-series marks, legends, and stacked hues — not KPI meaning or RAG thresholds.
+   * See ADR-0013; resolve via chartSeriesColor(index) in chartTheme.ts.
+   */
+  --color-chart-categorical-1: #4a6fa5;
+  --color-chart-categorical-2: #2e9b9b;
+  --color-chart-categorical-3: #3d8b5f;
+  --color-chart-categorical-4: #c88b1a;
+  --color-chart-categorical-5: #d45b3a;
+  --color-chart-categorical-6: #7b5bb8;
+  --color-chart-categorical-7: #b8436b;
+  --color-chart-categorical-8: #5b8ca8;
+  --color-chart-categorical-9: #8b7a2e;
+  --color-chart-categorical-10: #006d77;
+  --color-chart-categorical-11: #9b5de5;
+  --color-chart-categorical-12: #c97b5a;
+
+  /*
+   * Chart — RAG threshold scale (segmented capacity meters only).
+   * Four fill stops: red → orange → yellow → green across bar width.
+   * Not for text, badges, or categorical series — see ADR-0013.
+   */
+  --color-chart-rag-1: #a50c25;
+  --color-chart-rag-2: #e85a00;
+  --color-chart-rag-3: #e6b800;
+  --color-chart-rag-4: #007004;
+
+  /*
+   * Elevation (ADR-0029). Warm ink, not neutral black.
+   * soft-sm = nav / menu: tight veil + 8×28 spread + 4% inset ring.
+   * soft-card = cards: tight veil + 16×32 spread, no stroke.
+   */
+  --shadow-soft-sm:
+    0 2px 4px rgb(35 30 24 / 3%),
+    0 8px 28px -8px rgb(35 30 24 / 12%),
+    inset 0 0 0 1px rgb(35 30 24 / 4%);
+  --shadow-soft-card:
+    0 1px 2px rgb(26 26 24 / 6%),
+    0 16px 32px -12px rgb(26 26 24 / 10%);
+  --shadow-drop-sm: 0 2px 4px rgb(35 30 24 / 3%);
+  --shadow-drop-lg: 0 2px 4px rgb(35 30 24 / 4%), 0 12px 40px -12px rgb(35 30 24 / 16%);
+
+  /* Above Dialog / Sheet / Panel (100) and Toast (70). Theme-independent. ADR-0031. */
+  --z-confetti: 110;
+}
+
+[data-theme="dark"] {
+  --color-background-body: #1b1b1b;
+  --color-background-surface: #262626;
+  --color-background-card: #1b1b1b;
+  --color-background-popover: #1b1b1b;
+  --color-background-muted: #1b1b1b;
+
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #b3b3b3;
+  --color-text-disabled: #737373;
+  --color-text-accent: #ebebeb;
+
+  --color-accent: #ebebeb;
+  --color-accent-muted: #262626;
+  --color-on-accent: #171717;
+
+  --color-neutral: #ffffff1a;
+  --color-overlay: #000000cc;
+  --color-overlay-hover: #ffffff0d;
+  --color-overlay-pressed: #ffffff1a;
+
+  --color-border: rgb(255 255 255 / 8%);
+  --color-border-emphasized: #404040;
+  --color-border-control: #8c8c8c;
+  --color-fill-selected: #303030;
+  --color-elevation-edge: rgb(255 255 255 / 14%);
+  --color-elevation-surface: rgb(38 38 38 / 94%);
+
+  --color-skeleton: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-background-muted));
+
+  --color-error: #ffc6c1;
+  --color-error-muted: #ff9e973d;
+  --color-on-error: #171717;
+
+  --color-success: #9fe59b;
+  --color-success-muted: #84c9803d;
+  --color-on-success: #171717;
+
+  --color-warning: #fdcf4f;
+  --color-warning-muted: #deb4333d;
+  --color-on-warning: #171717;
+
+  --color-info: #9eb7ff;
+  --color-info-muted: #9eb7ff3d;
+  --color-on-info: #171717;
+
+  --color-primary: #5a6d85;
+  --color-on-primary: #fafaf8;
+
+  /*
+   * The field stays #011272. That navy on #1b1b1b is 1.09:1 and on #262626 is 1.04:1,
+   * so it cannot be the hand outline. `--color-brand-outline` is 45% navy / 55% white
+   * (about #8d94c0): 5.1:1 on #262626 and 5.8:1 on #1b1b1b.
+   */
+  --color-brand: #011272;
+  --color-on-brand: #ffffff;
+  --color-brand-outline: color-mix(in srgb, var(--color-brand) 45%, white);
+  --color-brand-soft: color-mix(in srgb, var(--color-on-brand) 40%, var(--color-brand));
+
+  /*
+   * Derived from --color-primary: lift the brand toward white so the ring stays
+   * visible on dark surfaces, then apply ring alpha. Follows a consumer override.
+   */
+  /* 48% of the lifted brand clears WCAG 3:1 on #262626 and #1b1b1b */
+  --color-focus-ring: color-mix(
+    in srgb,
+    color-mix(in oklch, var(--color-primary) 30%, white) 48%,
+    transparent
+  );
+
+  --color-chart-categorical-1: #8aadd4;
+  --color-chart-categorical-2: #52c4c4;
+  --color-chart-categorical-3: #6bc47a;
+  --color-chart-categorical-4: #e5b020;
+  --color-chart-categorical-5: #f08868;
+  --color-chart-categorical-6: #b898e8;
+  --color-chart-categorical-7: #e87898;
+  --color-chart-categorical-8: #98b8d8;
+  --color-chart-categorical-9: #c8b858;
+  --color-chart-categorical-10: #40b8c8;
+  --color-chart-categorical-11: #c098f0;
+  --color-chart-categorical-12: #e89878;
+
+  --color-chart-rag-1: #ff8a84;
+  --color-chart-rag-2: #ffb347;
+  --color-chart-rag-3: #fdcf4f;
+  --color-chart-rag-4: #9fe59b;
+
+  --shadow-soft-sm:
+    0 2px 4px rgb(0 0 0 / 22%),
+    0 8px 28px -8px rgb(0 0 0 / 32%),
+    inset 0 0 0 1px rgb(255 255 255 / 10%);
+  --shadow-soft-card:
+    0 1px 2px rgb(0 0 0 / 22%),
+    0 16px 32px -12px rgb(0 0 0 / 28%);
+  --shadow-drop-sm: 0 2px 4px rgb(0 0 0 / 18%);
+  --shadow-drop-lg: 0 4px 8px rgb(0 0 0 / 20%), 0 16px 48px -12px rgb(0 0 0 / 36%);
+}
+
+/**
+ * PitchKit public-kit appearance — not a new semantic role set.
+ * Same --color-* names as light, remapped to a warmer paper floor.
+ */
+[data-theme="soft"] {
+  --color-background-body: #f3eee6;
+  --color-background-surface: #fffaf4;
+  --color-background-card: #fffaf4;
+  --color-background-popover: #fffaf4;
+  --color-background-muted: #ebe4d8;
+
+  --color-text-primary: #2a241c;
+  --color-text-secondary: #5c5348;
+  --color-text-disabled: #a39888;
+  --color-text-accent: #3d3429;
+
+  --color-accent: #3d3429;
+  --color-accent-muted: #ebe4d8;
+  --color-on-accent: #fffaf4;
+
+  --color-neutral: #2a241c14;
+  --color-overlay: #2a241c80;
+  --color-overlay-hover: #2a241c0d;
+  --color-overlay-pressed: #2a241c1a;
+
+  --color-border: rgb(42 36 28 / 6%);
+  --color-border-emphasized: #ddd4c4;
+  --color-border-control: #868686;
+  --color-fill-selected: #eee8e0;
+  --color-elevation-edge: rgb(255 250 244 / 90%);
+  --color-elevation-surface: rgb(255 250 244 / 90%);
+
+  --color-skeleton: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-muted));
+}

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import { type ImgHTMLAttributes } from "react";
+import { type StatusTone } from "../Status/statusDotStyles";
+import { type AvatarSize } from "./avatarStyles";
+export type { AvatarSize } from "./avatarStyles";
+export { avatarSizeForCluster, avatarSizePx, avatarSizes } from "./avatarStyles";
+/** Layout-only — not for size or surface overrides. */
+export type AvatarLayoutClassName = string;
+export interface AvatarPresence {
+    tone: StatusTone;
+    /** Screen reader label — e.g. "Online", "Busy". */
+    label: string;
+    pulsing?: boolean;
+}
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "children"> {
+    /** Display name — alt text, initials source, and accessible name. */
+    name: string;
+    size?: AvatarSize;
+    presence?: AvatarPresence;
+    className?: AvatarLayoutClassName;
+}
+export declare function Avatar({ name, src, size, presence, className, onError, ...imgProps }: AvatarProps): import("react").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/atoms/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAUL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEjF,uDAAuD;AACvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IAChG,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,EACH,IAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,QAAQ,EACZ,EAAE,WAAW,+BAmDb"}

package/dist/components/atoms/Avatar/Avatar.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { statusDotBaseClasses as t, statusDotPulseClass as n, statusDotToneClasses as r } from "../Status/statusDotStyles.js";
+import { avatarFallbackShellClasses as i, avatarIconClasses as a, avatarImageClasses as o, avatarInitialsClasses as s, avatarInitialsFromName as c, avatarPresenceAnchorClasses as l, avatarPresenceRingClasses as u, avatarRootClasses as d, avatarShellSizeClasses as f, avatarSizeForCluster as p, avatarSizePx as m, avatarSizes as h } from "./avatarStyles.js";
+import { useState as g } from "react";
+import { User as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/atoms/Avatar/Avatar.tsx
+function b({ name: p, src: m, size: h = "md", presence: b, className: x, onError: S, ...C }) {
+	let [w, T] = g(!1), E = c(p), D = m != null && m.length > 0 && !w, O = !D && E.length > 0;
+	return /* @__PURE__ */ y("span", {
+		className: e(d, f[h], x),
+		"data-size": h,
+		children: [D ? /* @__PURE__ */ v("img", {
+			...C,
+			src: m,
+			alt: p,
+			className: o,
+			onError: (e) => {
+				T(!0), S?.(e);
+			}
+		}) : O ? /* @__PURE__ */ v("span", {
+			className: i,
+			role: "img",
+			"aria-label": p,
+			children: /* @__PURE__ */ v("span", {
+				className: s[h],
+				"aria-hidden": !0,
+				children: E
+			})
+		}) : /* @__PURE__ */ v("span", {
+			className: i,
+			role: "img",
+			"aria-label": p,
+			children: /* @__PURE__ */ v(_, {
+				strokeWidth: 2,
+				className: a[h],
+				"aria-hidden": !0
+			})
+		}), b == null ? null : /* @__PURE__ */ v("span", {
+			className: l,
+			children: /* @__PURE__ */ v("span", {
+				role: "img",
+				"aria-label": b.label,
+				title: b.label,
+				className: e(u, t, r[b.tone], b.pulsing ? n : void 0)
+			})
+		})]
+	});
+}
+//#endregion
+export { b as Avatar, p as avatarSizeForCluster, m as avatarSizePx, h as avatarSizes };

package/dist/components/atoms/Avatar/avatarStyles.d.ts

@@ -0,0 +1,23 @@
+import type { ClusterTier } from "../../../lib/clusterScale";
+export declare const avatarSizes: readonly ["xsm", "sm", "md", "lg", "xl"];
+export type AvatarSize = (typeof avatarSizes)[number];
+/** WMDS avatar scale — media tiers (not cluster hit targets). */
+export declare const avatarSizePx: Record<AvatarSize, number>;
+export declare const avatarShellSizeClasses: Record<AvatarSize, string>;
+export declare const avatarRootClasses = "relative inline-flex shrink-0 overflow-visible";
+export declare const avatarImageClasses = "size-full rounded-full object-cover";
+export declare const avatarFallbackShellClasses: string;
+export declare const avatarInitialsClasses: Record<AvatarSize, string>;
+export declare const avatarIconClasses: Record<AvatarSize, string>;
+/**
+ * Presence dot center on the circle rim — ~50° from east (5 o'clock).
+ * Size-independent; 45° overlaps trailing initials on `sm`.
+ */
+export declare const avatarPresenceAnchorClasses: string;
+export declare const avatarPresenceRingClasses = "rounded-full ring-2 ring-surface";
+/** Cluster row pairing — md cluster → md avatar (36px). */
+export declare const avatarSizeForClusterMap: Record<ClusterTier, AvatarSize>;
+export declare function avatarSizeForCluster(tier: ClusterTier): AvatarSize;
+/** Derive 1–2 uppercase initials from a display name. */
+export declare function avatarInitialsFromName(name: string): string;
+//# sourceMappingURL=avatarStyles.d.ts.map

package/dist/components/atoms/Avatar/avatarStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Avatar/avatarStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,WAAW,0CAA2C,CAAC;AAEpE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMnD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAM7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,mDAAmD,CAAC;AAElF,eAAO,MAAM,kBAAkB,wCAAwC,CAAC;AAExE,eAAO,MAAM,0BAA0B,QAEtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAM5D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMxD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,QAGvC,CAAC;AAEF,eAAO,MAAM,yBAAyB,qCAAqC,CAAC;AAE5E,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAInE,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,CAElE;AAED,yDAAyD;AACzD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAS3D"}

package/dist/components/atoms/Avatar/avatarStyles.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+//#region src/components/atoms/Avatar/avatarStyles.ts
+var n = [
+	"xsm",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], r = {
+	xsm: 20,
+	sm: 24,
+	md: 36,
+	lg: 48,
+	xl: 128
+}, i = {
+	xsm: "size-5",
+	sm: "size-6",
+	md: "size-9",
+	lg: "size-12",
+	xl: "size-32"
+}, a = "relative inline-flex shrink-0 overflow-visible", o = "size-full rounded-full object-cover", s = e("flex size-full items-center justify-center rounded-full bg-body ring-1 ring-border"), c = {
+	xsm: e(t("caption"), "font-medium uppercase leading-none text-fg"),
+	sm: e(t("caption"), "font-medium uppercase leading-none text-fg"),
+	md: e(t("ui-label"), "font-medium uppercase leading-none text-fg"),
+	lg: e(t("body"), "font-medium uppercase leading-none text-fg"),
+	xl: e(t("subheading"), "font-semibold uppercase leading-none text-fg")
+}, l = {
+	xsm: "size-2.5 shrink-0 stroke-current text-muted",
+	sm: "size-3 shrink-0 stroke-current text-muted",
+	md: "size-4 shrink-0 stroke-current text-muted",
+	lg: "size-6 shrink-0 stroke-current text-muted",
+	xl: "size-12 shrink-0 stroke-current text-muted"
+}, u = e("absolute -translate-x-1/2 -translate-y-1/2", "left-[calc(50%+50%*cos(50deg))] top-[calc(50%+50%*sin(50deg))]"), d = "rounded-full ring-2 ring-surface", f = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+function p(e) {
+	return f[e];
+}
+function m(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : `${t[0][0] ?? ""}${t[1][0] ?? ""}`.toUpperCase();
+}
+//#endregion
+export { s as avatarFallbackShellClasses, l as avatarIconClasses, o as avatarImageClasses, c as avatarInitialsClasses, m as avatarInitialsFromName, u as avatarPresenceAnchorClasses, d as avatarPresenceRingClasses, a as avatarRootClasses, i as avatarShellSizeClasses, p as avatarSizeForCluster, f as avatarSizeForClusterMap, r as avatarSizePx, n as avatarSizes };