@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/SideNavbar/utils/parseKeyboardShortcut.js

@@ -0,0 +1,60 @@
+"use client";
+const p = [
+  "ctrl",
+  "cmd",
+  "control",
+  "shift",
+  "alt",
+  "meta",
+  "option"
+];
+function h(t) {
+  const s = {
+    key: "",
+    ctrl: !1,
+    shift: !1,
+    alt: !1,
+    meta: !1,
+    isValid: !1
+  };
+  if (!t || typeof t != "string")
+    return s;
+  const e = t.trim();
+  if (!e)
+    return s;
+  const l = e.split("+").map((a) => a.trim().toLowerCase()).filter((a) => a.length > 0);
+  if (l.length === 0)
+    return s;
+  const i = /* @__PURE__ */ new Set();
+  let n = "";
+  for (let a = 0; a < l.length; a++) {
+    const r = l[a];
+    if (p.includes(r))
+      i.add(r);
+    else if (a === l.length - 1)
+      n = r;
+    else
+      return s;
+  }
+  if (!n)
+    return s;
+  const f = i.has("ctrl") || i.has("cmd") || i.has("control"), o = i.has("alt") || i.has("option");
+  return {
+    key: n,
+    ctrl: f,
+    shift: i.has("shift"),
+    alt: o,
+    meta: i.has("meta"),
+    isValid: !0
+  };
+}
+function m(t, s = "windows") {
+  if (!t.isValid) return "";
+  const e = [];
+  return s === "mac" ? (t.ctrl && e.push("⌘"), t.shift && e.push("⇧"), t.alt && e.push("⌥"), t.meta && e.push("⌃"), e.push(t.key.toUpperCase()), e.join("")) : (t.ctrl && e.push("Ctrl"), t.shift && e.push("Shift"), t.alt && e.push("Alt"), t.meta && e.push("Meta"), e.push(t.key.toUpperCase()), e.join("+"));
+}
+export {
+  m as formatKeyboardShortcut,
+  h as parseKeyboardShortcut
+};
+//# sourceMappingURL=parseKeyboardShortcut.js.map

package/dist/granular/ui/components/SideNavbar/utils/parseKeyboardShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseKeyboardShortcut.js","sources":["../../../../../../src/ui/components/SideNavbar/utils/parseKeyboardShortcut.ts"],"sourcesContent":["/**\n * Parsed keyboard shortcut result\n */\nexport interface ParsedKeyboardShortcut {\n  /** The main key (lowercase) */\n  key: string;\n  /** Whether Ctrl/Cmd is required */\n  ctrl: boolean;\n  /** Whether Shift is required */\n  shift: boolean;\n  /** Whether Alt is required */\n  alt: boolean;\n  /** Whether Meta (Windows/Cmd) is required */\n  meta: boolean;\n  /** Whether the shortcut is valid */\n  isValid: boolean;\n}\n\n/**\n * Known modifier keys\n */\nconst MODIFIER_KEYS = [\n  \"ctrl\",\n  \"cmd\",\n  \"control\",\n  \"shift\",\n  \"alt\",\n  \"meta\",\n  \"option\",\n] as const;\n\n/**\n * Parse a keyboard shortcut string into its components\n *\n * Supports various formats:\n * - \"Ctrl+B\" -> { key: 'b', ctrl: true, ... }\n * - \"Cmd+Shift+K\" -> { key: 'k', ctrl: true, shift: true, ... }\n * - \"Alt+Enter\" -> { key: 'enter', alt: true, ... }\n * - \"Ctrl+Shift+Alt+S\" -> { key: 's', ctrl: true, shift: true, alt: true, ... }\n *\n * Modifier aliases:\n * - \"cmd\" and \"control\" are aliases for \"ctrl\"\n * - \"option\" is an alias for \"alt\"\n *\n * @param shortcut - The keyboard shortcut string to parse\n * @returns Parsed shortcut object with key and modifiers\n *\n * @example\n * ```ts\n * parseKeyboardShortcut('Ctrl+B')\n * // { key: 'b', ctrl: true, shift: false, alt: false, meta: false, isValid: true }\n *\n * parseKeyboardShortcut('Cmd+Shift+K')\n * // { key: 'k', ctrl: true, shift: true, alt: false, meta: false, isValid: true }\n *\n * parseKeyboardShortcut('')\n * // { key: '', ctrl: false, shift: false, alt: false, meta: false, isValid: false }\n * ```\n */\nexport function parseKeyboardShortcut(\n  shortcut: string,\n): ParsedKeyboardShortcut {\n  // Default invalid result\n  const invalidResult: ParsedKeyboardShortcut = {\n    key: \"\",\n    ctrl: false,\n    shift: false,\n    alt: false,\n    meta: false,\n    isValid: false,\n  };\n\n  // Handle empty or invalid input\n  if (!shortcut || typeof shortcut !== \"string\") {\n    return invalidResult;\n  }\n\n  // Trim and normalize\n  const normalized = shortcut.trim();\n  if (!normalized) {\n    return invalidResult;\n  }\n\n  // Split by '+' and filter empty parts\n  const parts = normalized\n    .split(\"+\")\n    .map((part) => part.trim().toLowerCase())\n    .filter((part) => part.length > 0);\n\n  if (parts.length === 0) {\n    return invalidResult;\n  }\n\n  // The last non-modifier part is the main key\n  const modifiers = new Set<string>();\n  let mainKey = \"\";\n\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n\n    if (MODIFIER_KEYS.includes(part as (typeof MODIFIER_KEYS)[number])) {\n      modifiers.add(part);\n    } else if (i === parts.length - 1) {\n      // Last part should be the main key\n      mainKey = part;\n    } else {\n      // Non-modifier key in the middle is invalid\n      return invalidResult;\n    }\n  }\n\n  // Must have a main key\n  if (!mainKey) {\n    return invalidResult;\n  }\n\n  // Check for ctrl aliases (cmd, control)\n  const hasCtrl =\n    modifiers.has(\"ctrl\") || modifiers.has(\"cmd\") || modifiers.has(\"control\");\n\n  // Check for alt aliases (option)\n  const hasAlt = modifiers.has(\"alt\") || modifiers.has(\"option\");\n\n  return {\n    key: mainKey,\n    ctrl: hasCtrl,\n    shift: modifiers.has(\"shift\"),\n    alt: hasAlt,\n    meta: modifiers.has(\"meta\"),\n    isValid: true,\n  };\n}\n\n/**\n * Format a parsed shortcut back to a string (for display)\n *\n * @param shortcut - The parsed shortcut object\n * @param platform - The platform (mac uses symbols, others use text)\n * @returns Formatted shortcut string\n *\n * @example\n * ```ts\n * formatKeyboardShortcut({ key: 'b', ctrl: true, ... }, 'mac')\n * // '⌘B'\n *\n * formatKeyboardShortcut({ key: 'b', ctrl: true, ... }, 'windows')\n * // 'Ctrl+B'\n * ```\n */\nexport function formatKeyboardShortcut(\n  shortcut: ParsedKeyboardShortcut,\n  platform: \"mac\" | \"windows\" | \"linux\" = \"windows\",\n): string {\n  if (!shortcut.isValid) return \"\";\n\n  const parts: string[] = [];\n\n  if (platform === \"mac\") {\n    // macOS uses symbols\n    if (shortcut.ctrl) parts.push(\"⌘\");\n    if (shortcut.shift) parts.push(\"⇧\");\n    if (shortcut.alt) parts.push(\"⌥\");\n    if (shortcut.meta) parts.push(\"⌃\");\n    parts.push(shortcut.key.toUpperCase());\n    return parts.join(\"\");\n  }\n\n  // Windows/Linux use text\n  if (shortcut.ctrl) parts.push(\"Ctrl\");\n  if (shortcut.shift) parts.push(\"Shift\");\n  if (shortcut.alt) parts.push(\"Alt\");\n  if (shortcut.meta) parts.push(\"Meta\");\n  parts.push(shortcut.key.toUpperCase());\n  return parts.join(\"+\");\n}\n"],"names":["MODIFIER_KEYS","parseKeyboardShortcut","shortcut","invalidResult","normalized","parts","part","modifiers","mainKey","i","hasCtrl","hasAlt","formatKeyboardShortcut","platform"],"mappings":";AAqBA,MAAMA,IAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA8BO,SAASC,EACdC,GACwB;AAExB,QAAMC,IAAwC;AAAA,IAC5C,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAIX,MAAI,CAACD,KAAY,OAAOA,KAAa;AACnC,WAAOC;AAIT,QAAMC,IAAaF,EAAS,KAAA;AAC5B,MAAI,CAACE;AACH,WAAOD;AAIT,QAAME,IAAQD,EACX,MAAM,GAAG,EACT,IAAI,CAACE,MAASA,EAAK,OAAO,YAAA,CAAa,EACvC,OAAO,CAACA,MAASA,EAAK,SAAS,CAAC;AAEnC,MAAID,EAAM,WAAW;AACnB,WAAOF;AAIT,QAAMI,wBAAgB,IAAA;AACtB,MAAIC,IAAU;AAEd,WAASC,IAAI,GAAGA,IAAIJ,EAAM,QAAQI,KAAK;AACrC,UAAMH,IAAOD,EAAMI,CAAC;AAEpB,QAAIT,EAAc,SAASM,CAAsC;AAC/D,MAAAC,EAAU,IAAID,CAAI;AAAA,aACTG,MAAMJ,EAAM,SAAS;AAE9B,MAAAG,IAAUF;AAAA;AAGV,aAAOH;AAAA,EAEX;AAGA,MAAI,CAACK;AACH,WAAOL;AAIT,QAAMO,IACJH,EAAU,IAAI,MAAM,KAAKA,EAAU,IAAI,KAAK,KAAKA,EAAU,IAAI,SAAS,GAGpEI,IAASJ,EAAU,IAAI,KAAK,KAAKA,EAAU,IAAI,QAAQ;AAE7D,SAAO;AAAA,IACL,KAAKC;AAAA,IACL,MAAME;AAAA,IACN,OAAOH,EAAU,IAAI,OAAO;AAAA,IAC5B,KAAKI;AAAA,IACL,MAAMJ,EAAU,IAAI,MAAM;AAAA,IAC1B,SAAS;AAAA,EAAA;AAEb;AAkBO,SAASK,EACdV,GACAW,IAAwC,WAChC;AACR,MAAI,CAACX,EAAS,QAAS,QAAO;AAE9B,QAAMG,IAAkB,CAAA;AAExB,SAAIQ,MAAa,SAEXX,EAAS,QAAMG,EAAM,KAAK,GAAG,GAC7BH,EAAS,SAAOG,EAAM,KAAK,GAAG,GAC9BH,EAAS,OAAKG,EAAM,KAAK,GAAG,GAC5BH,EAAS,QAAMG,EAAM,KAAK,GAAG,GACjCA,EAAM,KAAKH,EAAS,IAAI,YAAA,CAAa,GAC9BG,EAAM,KAAK,EAAE,MAIlBH,EAAS,QAAMG,EAAM,KAAK,MAAM,GAChCH,EAAS,SAAOG,EAAM,KAAK,OAAO,GAClCH,EAAS,OAAKG,EAAM,KAAK,KAAK,GAC9BH,EAAS,QAAMG,EAAM,KAAK,MAAM,GACpCA,EAAM,KAAKH,EAAS,IAAI,YAAA,CAAa,GAC9BG,EAAM,KAAK,GAAG;AACvB;"}

package/dist/granular/ui/components/SideNavbar/utils/parseWidth.js

@@ -0,0 +1,19 @@
+"use client";
+function u(e) {
+  if (typeof e == "number") return e;
+  const r = parseFloat(e);
+  return isNaN(r) ? 0 : e.endsWith("rem") || e.endsWith("em") ? r * 16 : (e.endsWith("px"), r);
+}
+function i(e, r) {
+  return e === void 0 || r === void 0 ? !0 : e < r;
+}
+function o(e, r, t) {
+  let n = e;
+  return r !== void 0 && (n = Math.max(n, r)), t !== void 0 && (n = Math.min(n, t)), n;
+}
+export {
+  o as clampWidth,
+  u as parseWidthToPixels,
+  i as validateWidthBounds
+};
+//# sourceMappingURL=parseWidth.js.map

package/dist/granular/ui/components/SideNavbar/utils/parseWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseWidth.js","sources":["../../../../../../src/ui/components/SideNavbar/utils/parseWidth.ts"],"sourcesContent":["/**\n * Parse a width value (number or string) to pixels\n *\n * Supports:\n * - Numbers: returned as-is\n * - Pixel strings: \"320px\" -> 320\n * - Rem strings: \"20rem\" -> 320 (assuming 16px base)\n * - Em strings: \"20em\" -> 320 (assuming 16px base)\n * - Plain numbers as strings: \"320\" -> 320\n *\n * @param width - The width value to parse\n * @returns The width in pixels\n */\nexport function parseWidthToPixels(width: number | string): number {\n  if (typeof width === \"number\") return width;\n\n  const numericValue = parseFloat(width);\n  if (isNaN(numericValue)) return 0;\n\n  if (width.endsWith(\"rem\")) return numericValue * 16;\n  if (width.endsWith(\"em\")) return numericValue * 16;\n  if (width.endsWith(\"px\")) return numericValue;\n\n  return numericValue;\n}\n\n/**\n * Validate that minWidth is less than maxWidth\n *\n * @param minWidth - Minimum width in pixels\n * @param maxWidth - Maximum width in pixels\n * @returns True if valid, false otherwise\n */\nexport function validateWidthBounds(\n  minWidth?: number,\n  maxWidth?: number,\n): boolean {\n  if (minWidth === undefined || maxWidth === undefined) return true;\n  return minWidth < maxWidth;\n}\n\n/**\n * Clamp a width value between min and max bounds\n *\n * @param width - The width to clamp\n * @param minWidth - Minimum allowed width\n * @param maxWidth - Maximum allowed width\n * @returns The clamped width value\n */\nexport function clampWidth(\n  width: number,\n  minWidth?: number,\n  maxWidth?: number,\n): number {\n  let result = width;\n  if (minWidth !== undefined) result = Math.max(result, minWidth);\n  if (maxWidth !== undefined) result = Math.min(result, maxWidth);\n  return result;\n}\n"],"names":["parseWidthToPixels","width","numericValue","validateWidthBounds","minWidth","maxWidth","clampWidth","result"],"mappings":";AAaO,SAASA,EAAmBC,GAAgC;AACjE,MAAI,OAAOA,KAAU,SAAU,QAAOA;AAEtC,QAAMC,IAAe,WAAWD,CAAK;AACrC,SAAI,MAAMC,CAAY,IAAU,IAE5BD,EAAM,SAAS,KAAK,KACpBA,EAAM,SAAS,IAAI,IAAUC,IAAe,MAC5CD,EAAM,SAAS,IAAI,GAAUC;AAGnC;AASO,SAASC,EACdC,GACAC,GACS;AACT,SAAID,MAAa,UAAaC,MAAa,SAAkB,KACtDD,IAAWC;AACpB;AAUO,SAASC,EACdL,GACAG,GACAC,GACQ;AACR,MAAIE,IAASN;AACb,SAAIG,MAAa,WAAWG,IAAS,KAAK,IAAIA,GAAQH,CAAQ,IAC1DC,MAAa,WAAWE,IAAS,KAAK,IAAIA,GAAQF,CAAQ,IACvDE;AACT;"}

package/dist/granular/ui/components/Stat/Stat.js

@@ -0,0 +1,84 @@
+"use client";
+var y = Object.defineProperty, C = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var r = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var i = (t, e, s) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, o = (t, e) => {
+  for (var s in e || (e = {}))
+    c.call(e, s) && i(t, s, e[s]);
+  if (r)
+    for (var s of r(e))
+      x.call(e, s) && i(t, s, e[s]);
+  return t;
+}, f = (t, e) => C(t, j(e));
+var m = (t, e) => {
+  var s = {};
+  for (var a in t)
+    c.call(t, a) && e.indexOf(a) < 0 && (s[a] = t[a]);
+  if (t != null && r)
+    for (var a of r(t))
+      e.indexOf(a) < 0 && x.call(t, a) && (s[a] = t[a]);
+  return s;
+};
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+import { cn as d } from "../../utils/cn.js";
+const S = {
+  start: "items-start text-left",
+  center: "items-center text-center"
+}, E = {
+  neutral: "text-fg-tertiary",
+  success: "text-fg-success",
+  warning: "text-fg-warning",
+  error: "text-fg-error"
+};
+function A(H) {
+  var l = H, {
+    value: t,
+    label: e,
+    hint: s,
+    icon: a,
+    align: p = "start",
+    tone: u = "neutral",
+    className: h
+  } = l, N = m(l, [
+    "value",
+    "label",
+    "hint",
+    "icon",
+    "align",
+    "tone",
+    "className"
+  ]);
+  const b = t == null;
+  return /* @__PURE__ */ w(
+    "div",
+    f(o({
+      className: d(
+        "bg-surface-base flex-1 flex flex-col",
+        g("base", "p"),
+        g("xs", "gap-y"),
+        S[p],
+        h
+      )
+    }, N), {
+      children: [
+        a ? /* @__PURE__ */ n("span", { className: "text-icon-default inline-flex", children: a }) : null,
+        b ? /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-label": "No data",
+            className: "text-fg-tertiary text-2xl font-semibold leading-tight",
+            children: "—"
+          }
+        ) : /* @__PURE__ */ n("span", { className: "text-fg-primary text-2xl font-semibold leading-tight", children: t }),
+        /* @__PURE__ */ n("span", { className: "text-fg-secondary text-sm", children: e }),
+        s ? /* @__PURE__ */ n("span", { className: d("text-xs", E[u]), children: s }) : null
+      ]
+    })
+  );
+}
+export {
+  A as Stat
+};
+//# sourceMappingURL=Stat.js.map

package/dist/granular/ui/components/Stat/Stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","sources":["../../../../../src/ui/components/Stat/Stat.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type StatTone = \"neutral\" | \"success\" | \"warning\" | \"error\";\nexport type StatAlign = \"start\" | \"center\";\n\nexport interface StatProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The metric value to display. Strings are rendered verbatim — formatting\n   * (number locale, currency, units, relative time, etc.) is the consumer's\n   * responsibility, not the design system's. Pass `null` or `undefined` to\n   * render the empty-state placeholder (see \"Empty state\" below).\n   */\n  value: ReactNode;\n  /**\n   * Short metric label (e.g. \"Votos\", \"Alinhamento\"). Required for screen\n   * reader context — the label describes what the value means.\n   */\n  label: string;\n  /**\n   * Optional third line of context below the value (e.g. \"no banco\",\n   * \"últimos 12 m\", \"+3% no mês\"). The `tone` prop styles THIS line — see\n   * `tone` for the contract.\n   */\n  hint?: ReactNode;\n  /**\n   * Optional icon rendered above the value (home-style stats use icons;\n   * detail-page stats typically don't).\n   */\n  icon?: ReactNode;\n  /**\n   * Block alignment. `start` left-aligns label/value/hint (detail-page\n   * style); `center` centers them (home-hero style).\n   * @default 'start'\n   */\n  align?: StatAlign;\n  /**\n   * Semantic tone for the metric — `neutral` for plain stats, the others\n   * for classified states (good/warning/bad).\n   *\n   * **Scope (contract).** Tone affects ONLY the `hint`, not the `value`,\n   * `label`, or `icon`. The `value` always renders in `text-fg-primary`\n   * regardless of tone; the `label` in `text-fg-secondary`; the `icon` in\n   * `text-icon-default`. This is deliberate — a colored value would\n   * compete with the label for attention and bias the reader's\n   * interpretation of the metric. If a future requirement needs the\n   * `value` (or icon) to inherit tone, that becomes a new prop or a\n   * semver-bound default change, not a surprise expansion of `tone`.\n   *\n   * Tone maps directly to the semantic foreground tokens (no new\n   * vocabulary): `neutral` → `text-fg-tertiary`, `success` →\n   * `text-fg-success`, `warning` → `text-fg-warning`, `error` →\n   * `text-fg-error`. See `.claude/rules/colors.md`.\n   *\n   * @default 'neutral'\n   */\n  tone?: StatTone;\n}\n\nconst alignClasses: Record<StatAlign, string> = {\n  start: \"items-start text-left\",\n  center: \"items-center text-center\",\n};\n\nconst toneHintClasses: Record<StatTone, string> = {\n  neutral: \"text-fg-tertiary\",\n  success: \"text-fg-success\",\n  warning: \"text-fg-warning\",\n  error: \"text-fg-error\",\n};\n\n/**\n * `Stat` — a single statistic block (icon? + value + label + hint?).\n *\n * Composes with `StatGroup` (1-px-divider strip or grid) but is also\n * valid standalone — a single `Stat` outside a group is a legitimate use\n * case for a hero metric.\n *\n * ### Empty state contract\n *\n * When `value` is `null` OR `undefined`, the component renders the\n * em-dash placeholder `—` (U+2014) with `aria-label=\"No data\"` on its\n * wrapper. The label is intentionally hard-coded in English in this\n * version; a screen reader announcing \"No data\" in an otherwise\n * Portuguese app is a known inconsistency accepted for now — if i18n\n * becomes a requirement, an `emptyLabel?: string` prop will be added in\n * a follow-up PR (semver-safe addition).\n *\n * Other falsy values — `0`, `\"\"`, `false`, an empty fragment — are\n * **legitimate values** and render as-is. The empty trigger is only\n * `null`/`undefined`, because `0` (count = zero) is meaningful data that\n * the consumer would not want masked.\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in\n * the `./server` entry alongside `StatGroup`. Consumer-supplied `icon`\n * may itself be a client component; React's RSC boundary handles that\n * normally.\n *\n * @example\n * ```tsx\n * // Home-style (centered, with icon)\n * <Stat\n *   icon={<Users size={20} aria-hidden=\"true\" />}\n *   value=\"9,4 mil\"\n *   label=\"Parlamentares\"\n *   align=\"center\"\n * />\n *\n * // Detail-page-style (start-aligned, with hint)\n * <Stat\n *   value=\"87%\"\n *   label=\"Alinhamento\"\n *   hint=\"últimos 12 meses\"\n *   tone=\"success\"\n * />\n * ```\n */\nexport function Stat({\n  value,\n  label,\n  hint,\n  icon,\n  align = \"start\",\n  tone = \"neutral\",\n  className,\n  ...props\n}: StatProps) {\n  const isEmpty = value === null || value === undefined;\n\n  return (\n    <div\n      className={cn(\n        \"bg-surface-base flex-1 flex flex-col\",\n        getSpacingClass(\"base\", \"p\"),\n        getSpacingClass(\"xs\", \"gap-y\"),\n        alignClasses[align],\n        className,\n      )}\n      {...props}\n    >\n      {icon ? (\n        <span className=\"text-icon-default inline-flex\">{icon}</span>\n      ) : null}\n      {isEmpty ? (\n        <span\n          aria-label=\"No data\"\n          className=\"text-fg-tertiary text-2xl font-semibold leading-tight\"\n        >\n          —\n        </span>\n      ) : (\n        <span className=\"text-fg-primary text-2xl font-semibold leading-tight\">\n          {value}\n        </span>\n      )}\n      <span className=\"text-fg-secondary text-sm\">{label}</span>\n      {hint ? (\n        <span className={cn(\"text-xs\", toneHintClasses[tone])}>{hint}</span>\n      ) : null}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"names":["alignClasses","toneHintClasses","Stat","_a","_b","value","label","hint","icon","align","tone","className","props","__objRest","isEmpty","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAMA,IAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,QAAQ;AACV,GAEMC,IAA4C;AAAA,EAChD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAkDO,SAASC,EAAKC,GASP;AATO,MAAAC,IAAAD,GACnB;AAAA,WAAAE;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,MAPmBP,GAQhBQ,IAAAC,EARgBT,GAQhB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMU,IAAUT,KAAU;AAE1B,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAgB,QAAQ,GAAG;AAAA,QAC3BA,EAAgB,MAAM,OAAO;AAAA,QAC7BnB,EAAaS,CAAK;AAAA,QAClBE;AAAA,MAAA;AAAA,OAEEC,IARL;AAAA,MAUE,UAAA;AAAA,QAAAJ,IACC,gBAAAY,EAAC,QAAA,EAAK,WAAU,iCAAiC,aAAK,IACpD;AAAA,QACHN,IACC,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA,IAID,gBAAAA,EAAC,QAAA,EAAK,WAAU,wDACb,UAAAf,GACH;AAAA,QAEF,gBAAAe,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAd,GAAM;AAAA,QAClDC,IACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAG,WAAWjB,EAAgBS,CAAI,CAAC,GAAI,UAAAH,EAAA,CAAK,IAC3D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/granular/ui/components/Stat/StatGroup.js

@@ -0,0 +1,61 @@
+"use client";
+var p = Object.defineProperty, u = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var e = Object.getOwnPropertySymbols;
+var t = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var s = (r, d, i) => d in r ? p(r, d, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[d] = i, c = (r, d) => {
+  for (var i in d || (d = {}))
+    t.call(d, i) && s(r, i, d[i]);
+  if (e)
+    for (var i of e(d))
+      g.call(d, i) && s(r, i, d[i]);
+  return r;
+}, m = (r, d) => u(r, x(d));
+var n = (r, d) => {
+  var i = {};
+  for (var o in r)
+    t.call(r, o) && d.indexOf(o) < 0 && (i[o] = r[o]);
+  if (r != null && e)
+    for (var o of e(r))
+      d.indexOf(o) < 0 && g.call(r, o) && (i[o] = r[o]);
+  return i;
+};
+import { jsx as b } from "react/jsx-runtime";
+import { getRadiusClass as v } from "../../tokens/radius.js";
+import { cn as C } from "../../utils/cn.js";
+const G = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function R(h) {
+  var l = h, {
+    layout: r = "grid",
+    cols: d = 4,
+    className: i,
+    children: o
+  } = l, a = n(l, [
+    "layout",
+    "cols",
+    "className",
+    "children"
+  ]);
+  const f = r === "grid";
+  return /* @__PURE__ */ b(
+    "div",
+    m(c({
+      className: C(
+        "bg-line-default border border-line-default overflow-hidden gap-px",
+        v("lg"),
+        f ? `grid grid-cols-2 ${G[d]}` : "flex",
+        i
+      )
+    }, a), {
+      children: o
+    })
+  );
+}
+export {
+  R as StatGroup
+};
+//# sourceMappingURL=StatGroup.js.map

package/dist/granular/ui/components/Stat/StatGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatGroup.js","sources":["../../../../../src/ui/components/Stat/StatGroup.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type StatGroupLayout = \"strip\" | \"grid\";\nexport type StatGroupCols = 2 | 3 | 4;\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `strip` — single horizontal row, no wrap. Each `Stat` shares the row\n   * width via `flex-1`. Use when you guarantee the horizontal space\n   * (hero areas, wide dashboards). On narrow viewports the row does NOT\n   * reflow — choose `grid` if you need responsive collapse.\n   *\n   * `grid` — multi-column grid that reflows. Always 2-up on mobile,\n   * expands to `cols` columns at the `md` breakpoint (768 px) and up.\n   * Five or more children spill to a second row with the divider lines\n   * preserved.\n   *\n   * @default 'grid'\n   */\n  layout?: StatGroupLayout;\n  /**\n   * Desktop column count (≥ 768 px). Only effective in `layout=\"grid\"`;\n   * ignored in `layout=\"strip\"`. Mobile is always 2 columns regardless.\n   *\n   * @default 4\n   */\n  cols?: StatGroupCols;\n  children: ReactNode;\n}\n\n// Tailwind v4 generates `md:grid-cols-N` for N ∈ {2,3,4} statically from\n// the literal class string. The map below ensures the strings exist\n// verbatim in the source so JIT picks them up.\nconst gridColsMd: Record<StatGroupCols, string> = {\n  2: \"md:grid-cols-2\",\n  3: \"md:grid-cols-3\",\n  4: \"md:grid-cols-4\",\n};\n\n/**\n * `StatGroup` — container for one or more `Stat` blocks with 1-px\n * dividers between them.\n *\n * ### Divider technique\n *\n * The container has `bg-line-default` and `gap-px` (1 px); each child\n * `Stat` carries its own `bg-surface-base`. The 1 px of gap exposes the\n * container's background as the divider line, while each cell masks its\n * own area with `bg-surface-base`. Works identically for the strip\n * layout (vertical dividers) and the grid layout (vertical AND\n * horizontal dividers, automatically, as the grid reflows). No separate\n * `Divider` component, no per-cell border logic.\n *\n * The outer ring is `border border-line-default` matching the gap color,\n * with `rounded-lg` and `overflow-hidden` clipping the inner cells to\n * the radius.\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in\n * `./server` alongside `Stat`.\n *\n * @example\n * ```tsx\n * <StatGroup layout=\"strip\">\n *   <Stat icon={<Users />} value=\"9,4 mil\" label=\"Parlamentares\" align=\"center\" />\n *   <Stat icon={<FileText />} value=\"3,2 mil\" label=\"Proposições\" align=\"center\" />\n *   <Stat icon={<Vote />} value=\"1,1 mil\" label=\"Votações\" align=\"center\" />\n *   <Stat icon={<Clock />} value=\"há 18 dias\" label=\"Última atualização\" align=\"center\" />\n * </StatGroup>\n *\n * <StatGroup layout=\"grid\" cols={4}>\n *   <Stat value=\"87%\" label=\"Alinhamento\" hint=\"últimos 12 m\" tone=\"success\" />\n *   <Stat value={null} label=\"Sem orientação\" hint=\"no período\" />\n *   <Stat value=\"R$ 187.472,95\" label=\"Gastos\" hint=\"no mandato\" />\n *   <Stat value=\"42\" label=\"Votações\" hint=\"no banco\" />\n * </StatGroup>\n * ```\n */\nexport function StatGroup({\n  layout = \"grid\",\n  cols = 4,\n  className,\n  children,\n  ...props\n}: StatGroupProps) {\n  const isGrid = layout === \"grid\";\n\n  return (\n    <div\n      className={cn(\n        \"bg-line-default border border-line-default overflow-hidden gap-px\",\n        getRadiusClass(\"lg\"),\n        isGrid ? `grid grid-cols-2 ${gridColsMd[cols]}` : \"flex\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport default StatGroup;\n"],"names":["gridColsMd","StatGroup","_a","_b","layout","cols","className","children","props","__objRest","isGrid","jsx","__spreadProps","__spreadValues","cn","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAMA,IAA4C;AAAA,EAChD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AA0CO,SAASC,EAAUC,GAMP;AANO,MAAAC,IAAAD,GACxB;AAAA,YAAAE,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,UAAAC;AAAA,MAJwBJ,GAKrBK,IAAAC,EALqBN,GAKrB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMO,IAASN,MAAW;AAE1B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAe,IAAI;AAAA,QACnBL,IAAS,oBAAoBV,EAAWK,CAAI,CAAC,KAAK;AAAA,QAClDC;AAAA,MAAA;AAAA,OAEEE,IAPL;AAAA,MASE,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Stepper/Stepper.js

@@ -0,0 +1,248 @@
+"use client";
+var R = Object.defineProperty, D = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var q = Object.getOwnPropertySymbols;
+var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
+var I = (t, i, a) => i in t ? R(t, i, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[i] = a, g = (t, i) => {
+  for (var a in i || (i = {}))
+    G.call(i, a) && I(t, a, i[a]);
+  if (q)
+    for (var a of q(i))
+      H.call(i, a) && I(t, a, i[a]);
+  return t;
+}, h = (t, i) => D(t, E(i));
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as J } from "react";
+import { Check as z } from "lucide-react";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+import { getRadiusClass as b } from "../../tokens/radius.js";
+import { getAnimationClass as B } from "../../tokens/animations.js";
+import { Button as u } from "../../primitives/Button/Button.js";
+import K from "../../primitives/Separator/Separator.js";
+function Z({
+  steps: t,
+  currentStep: i,
+  defaultCurrentStep: a = 0,
+  onStepChange: o,
+  onComplete: $,
+  allowNavigation: m = !0,
+  showStepNumbers: N = !0,
+  orientation: F = "horizontal",
+  className: y = ""
+}) {
+  const [L, x] = J(a), f = i !== void 0, d = f ? i : L, k = (e) => e < d ? "completed" : e === d ? "active" : "pending", j = () => {
+    if (d < t.length - 1) {
+      const e = d + 1;
+      f || x(e), o == null || o(e);
+    } else
+      $ == null || $();
+  }, S = () => {
+    if (d > 0) {
+      const e = d - 1;
+      f || x(e), o == null || o(e);
+    }
+  }, p = (e) => {
+    m && (t[e].disabled || (f || x(e), o == null || o(e)));
+  }, w = t[d], A = d === 0, P = d === t.length - 1;
+  return F === "vertical" ? /* @__PURE__ */ n("div", { className: `flex ${l("base", "gap")} ${y}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-col", children: t.map((e, s) => {
+      const c = e.status || k(s), v = s === d;
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          className: `flex items-start ${l("md", "gap")}`,
+          children: [
+            /* @__PURE__ */ n("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ r(
+                "button",
+                h(g({
+                  type: "button",
+                  onClick: () => p(s),
+                  disabled: !m || e.disabled,
+                  "aria-label": e.title ? `Step ${s + 1}: ${e.title}` : `Step ${s + 1}`
+                }, c === "pending" ? { "data-marker": "pending" } : {}), {
+                  className: `
+                      flex
+                      items-center
+                      justify-center
+                      w-10
+                      h-10
+                      ${b("full")}
+                      border-2
+                      ${B("base")}
+                      ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                      ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                    `,
+                  children: c === "completed" ? /* @__PURE__ */ r(z, { className: "h-5 w-5" }) : N ? s + 1 : null
+                })
+              ),
+              s < t.length - 1 && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: `
+                        w-0.5
+                        h-12
+                        ${l("sm", "mt")}
+                        ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
+                      `
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n("div", { className: `flex-1 ${l("xl", "pb")}`, children: [
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => p(s),
+                  disabled: !m || e.disabled,
+                  className: `
+                      text-left
+                      ${v ? "font-semibold" : "font-medium"}
+                      ${c === "active" ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                      ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                    `,
+                  children: e.title
+                }
+              ),
+              e.description && /* @__PURE__ */ r(
+                "p",
+                {
+                  className: `text-sm text-fg-tertiary ${l("xs", "mt")}`,
+                  children: e.description
+                }
+              )
+            ] })
+          ]
+        },
+        e.id
+      );
+    }) }),
+    /* @__PURE__ */ n("div", { className: "flex-1", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: `
+            ${l("lg", "p")}
+            border
+            border-line-default
+            ${b("lg")}
+            bg-surface-base
+          `,
+          children: w.content
+        }
+      ),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: `flex justify-between ${l("base", "mt")} ${l("base", "gap")}`,
+          children: [
+            /* @__PURE__ */ r(
+              u,
+              {
+                variant: "outline",
+                onClick: S,
+                disabled: A,
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ r(u, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
+          ]
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ n("div", { className: `${l("lg", "space-y")} ${y}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center", children: t.map((e, s) => {
+      const c = e.status || k(s), v = s === d;
+      return /* @__PURE__ */ n("div", { className: "flex items-center flex-1", children: [
+        /* @__PURE__ */ n("div", { className: "flex flex-col items-center flex-1", children: [
+          /* @__PURE__ */ r(
+            "button",
+            h(g({
+              type: "button",
+              onClick: () => p(s),
+              disabled: !m || e.disabled,
+              "aria-label": e.title ? `Step ${s + 1}: ${e.title}` : `Step ${s + 1}`
+            }, c === "pending" ? { "data-marker": "pending" } : {}), {
+              className: `
+                    flex
+                    items-center
+                    justify-center
+                    w-10
+                    h-10
+                    ${b("full")}
+                    border-2
+                    ${B("base")}
+                    ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                    ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                  `,
+              children: c === "completed" ? /* @__PURE__ */ r(z, { className: "h-5 w-5" }) : N ? s + 1 : null
+            })
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: `${l("sm", "mt")} text-center ${l("sm", "px")}`,
+              children: [
+                /* @__PURE__ */ r(
+                  "p",
+                  {
+                    className: `
+                      text-sm
+                      font-medium
+                      ${v ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                    `,
+                    children: e.title
+                  }
+                ),
+                e.description && /* @__PURE__ */ r(
+                  "p",
+                  {
+                    className: `text-xs text-fg-tertiary ${l("xs", "mt")}`,
+                    children: e.description
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        s < t.length - 1 && /* @__PURE__ */ r("div", { className: `flex-1 ${l("base", "mx")}`, children: /* @__PURE__ */ r(
+          K,
+          {
+            className: `
+                      ${c === "completed" ? "border-success" : "border-line-emphasis"}
+                    `
+          }
+        ) })
+      ] }, e.id);
+    }) }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: `
+        ${l("lg", "p")}
+        border
+        border-line-default
+        ${b("lg")}
+        bg-surface-base
+      `,
+        children: w.content
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: `flex justify-between ${l("base", "gap")}`, children: [
+      /* @__PURE__ */ r(
+        u,
+        {
+          variant: "outline",
+          onClick: S,
+          disabled: A,
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ r(u, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
+    ] })
+  ] });
+}
+export {
+  Z as default
+};
+//# sourceMappingURL=Stepper.js.map

package/dist/granular/ui/components/Stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../../../src/ui/components/Stepper/Stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport Button from \"../../primitives/Button/Button\";\nimport Separator from \"../../primitives/Separator/Separator\";\n\nexport type StepperStatus = \"pending\" | \"active\" | \"completed\" | \"error\";\n\nexport interface StepperStep {\n  id: string;\n  title: string;\n  description?: string;\n  content: ReactNode;\n  status?: StepperStatus;\n  disabled?: boolean;\n}\n\nexport interface StepperProps {\n  steps: StepperStep[];\n  currentStep?: number;\n  defaultCurrentStep?: number;\n  onStepChange?: (stepIndex: number) => void;\n  onComplete?: () => void;\n  allowNavigation?: boolean;\n  showStepNumbers?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string;\n}\n\n/**\n * Stepper Component\n *\n * A multi-step wizard component for guided workflows.\n * Supports validation, navigation, and completion callbacks.\n * Follows Atomic Design principles as an Organism component.\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { id: '1', title: 'Step 1', content: <div>Content 1</div> },\n *     { id: '2', title: 'Step 2', content: <div>Content 2</div> },\n *   ]}\n *   onComplete={() => console.log('Completed!')}\n * />\n * ```\n */\nexport default function Stepper({\n  steps,\n  currentStep: controlledCurrentStep,\n  defaultCurrentStep = 0,\n  onStepChange,\n  onComplete,\n  allowNavigation = true,\n  showStepNumbers = true,\n  orientation = \"horizontal\",\n  className = \"\",\n}: StepperProps) {\n  const [internalCurrentStep, setInternalCurrentStep] =\n    useState(defaultCurrentStep);\n\n  const isControlled = controlledCurrentStep !== undefined;\n  const currentStepIndex = isControlled\n    ? controlledCurrentStep\n    : internalCurrentStep;\n\n  const getStepStatus = (index: number): StepperStatus => {\n    if (index < currentStepIndex) return \"completed\";\n    if (index === currentStepIndex) return \"active\";\n    return \"pending\";\n  };\n\n  const handleNext = () => {\n    if (currentStepIndex < steps.length - 1) {\n      const nextStep = currentStepIndex + 1;\n      if (!isControlled) {\n        setInternalCurrentStep(nextStep);\n      }\n      onStepChange?.(nextStep);\n    } else {\n      onComplete?.();\n    }\n  };\n\n  const handlePrevious = () => {\n    if (currentStepIndex > 0) {\n      const prevStep = currentStepIndex - 1;\n      if (!isControlled) {\n        setInternalCurrentStep(prevStep);\n      }\n      onStepChange?.(prevStep);\n    }\n  };\n\n  const handleStepClick = (index: number) => {\n    if (!allowNavigation) return;\n    if (steps[index].disabled) return;\n\n    if (!isControlled) {\n      setInternalCurrentStep(index);\n    }\n    onStepChange?.(index);\n  };\n\n  const currentStep = steps[currentStepIndex];\n  const isFirstStep = currentStepIndex === 0;\n  const isLastStep = currentStepIndex === steps.length - 1;\n\n  if (orientation === \"vertical\") {\n    return (\n      <div className={`flex ${getSpacingClass(\"base\", \"gap\")} ${className}`}>\n        {/* Steps List */}\n        <div className=\"flex flex-col\">\n          {steps.map((step, index) => {\n            const status = step.status || getStepStatus(index);\n            const isActive = index === currentStepIndex;\n\n            return (\n              <div\n                key={step.id}\n                className={`flex items-start ${getSpacingClass(\"md\", \"gap\")}`}\n              >\n                {/* Step Indicator */}\n                <div className=\"flex flex-col items-center\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleStepClick(index)}\n                    disabled={!allowNavigation || step.disabled}\n                    aria-label={\n                      step.title\n                        ? `Step ${index + 1}: ${step.title}`\n                        : `Step ${index + 1}`\n                    }\n                    // data-marker=\"pending\" — see .claude/rules/colors.md\n                    // \"fg-quaternary: AA-by-construction exception\". Anchors\n                    // the directed a11y suppression to the pending-marker\n                    // ROLE, not to style classes; survives a future restyle\n                    // of the bubble.\n                    {...(status === \"pending\"\n                      ? { \"data-marker\": \"pending\" }\n                      : {})}\n                    className={`\n                      flex\n                      items-center\n                      justify-center\n                      w-10\n                      h-10\n                      ${getRadiusClass(\"full\")}\n                      border-2\n                      ${getAnimationClass(\"base\")}\n                      ${\n                        status === \"completed\"\n                          ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n                          : status === \"active\"\n                            ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n                            : status === \"error\"\n                              ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n                              : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n                      }\n                      ${!allowNavigation || step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                    `}\n                  >\n                    {status === \"completed\" ? (\n                      <Check className=\"h-5 w-5\" />\n                    ) : showStepNumbers ? (\n                      index + 1\n                    ) : null}\n                  </button>\n                  {index < steps.length - 1 && (\n                    <div\n                      className={`\n                        w-0.5\n                        h-12\n                        ${getSpacingClass(\"sm\", \"mt\")}\n                        ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n                      `}\n                    />\n                  )}\n                </div>\n\n                {/* Step Content */}\n                <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n                  <button\n                    type=\"button\"\n                    onClick={() => handleStepClick(index)}\n                    disabled={!allowNavigation || step.disabled}\n                    className={`\n                      text-left\n                      ${isActive ? \"font-semibold\" : \"font-medium\"}\n                      ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n                      ${!allowNavigation || step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                    `}\n                  >\n                    {step.title}\n                  </button>\n                  {step.description && (\n                    <p\n                      className={`text-sm text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n                    >\n                      {step.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Step Content */}\n        <div className=\"flex-1\">\n          <div\n            className={`\n            ${getSpacingClass(\"lg\", \"p\")}\n            border\n            border-line-default\n            ${getRadiusClass(\"lg\")}\n            bg-surface-base\n          `}\n          >\n            {currentStep.content}\n          </div>\n\n          {/* Navigation */}\n          <div\n            className={`flex justify-between ${getSpacingClass(\"base\", \"mt\")} ${getSpacingClass(\"base\", \"gap\")}`}\n          >\n            <Button\n              variant=\"outline\"\n              onClick={handlePrevious}\n              disabled={isFirstStep}\n            >\n              Previous\n            </Button>\n            <Button variant=\"primary\" onClick={handleNext}>\n              {isLastStep ? \"Complete\" : \"Next\"}\n            </Button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Horizontal orientation\n  return (\n    <div className={`${getSpacingClass(\"lg\", \"space-y\")} ${className}`}>\n      {/* Steps List */}\n      <div className=\"flex items-center\">\n        {steps.map((step, index) => {\n          const status = step.status || getStepStatus(index);\n          const isActive = index === currentStepIndex;\n\n          return (\n            <div key={step.id} className=\"flex items-center flex-1\">\n              <div className=\"flex flex-col items-center flex-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => handleStepClick(index)}\n                  disabled={!allowNavigation || step.disabled}\n                  aria-label={\n                    step.title\n                      ? `Step ${index + 1}: ${step.title}`\n                      : `Step ${index + 1}`\n                  }\n                  // data-marker=\"pending\" — see .claude/rules/colors.md\n                  // \"fg-quaternary: AA-by-construction exception\".\n                  {...(status === \"pending\"\n                    ? { \"data-marker\": \"pending\" }\n                    : {})}\n                  className={`\n                    flex\n                    items-center\n                    justify-center\n                    w-10\n                    h-10\n                    ${getRadiusClass(\"full\")}\n                    border-2\n                    ${getAnimationClass(\"base\")}\n                    ${\n                      status === \"completed\"\n                        ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n                        : status === \"active\"\n                          ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n                          : status === \"error\"\n                            ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n                            : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n                    }\n                    ${!allowNavigation || step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                  `}\n                >\n                  {status === \"completed\" ? (\n                    <Check className=\"h-5 w-5\" />\n                  ) : showStepNumbers ? (\n                    index + 1\n                  ) : null}\n                </button>\n                <div\n                  className={`${getSpacingClass(\"sm\", \"mt\")} text-center ${getSpacingClass(\"sm\", \"px\")}`}\n                >\n                  <p\n                    className={`\n                      text-sm\n                      font-medium\n                      ${isActive ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n                    `}\n                  >\n                    {step.title}\n                  </p>\n                  {step.description && (\n                    <p\n                      className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n                    >\n                      {step.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n              {index < steps.length - 1 && (\n                <div className={`flex-1 ${getSpacingClass(\"base\", \"mx\")}`}>\n                  <Separator\n                    className={`\n                      ${status === \"completed\" ? \"border-success\" : \"border-line-emphasis\"}\n                    `}\n                  />\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Step Content */}\n      <div\n        className={`\n        ${getSpacingClass(\"lg\", \"p\")}\n        border\n        border-line-default\n        ${getRadiusClass(\"lg\")}\n        bg-surface-base\n      `}\n      >\n        {currentStep.content}\n      </div>\n\n      {/* Navigation */}\n      <div className={`flex justify-between ${getSpacingClass(\"base\", \"gap\")}`}>\n        <Button\n          variant=\"outline\"\n          onClick={handlePrevious}\n          disabled={isFirstStep}\n        >\n          Previous\n        </Button>\n        <Button variant=\"primary\" onClick={handleNext}>\n          {isLastStep ? \"Complete\" : \"Next\"}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":["Stepper","steps","controlledCurrentStep","defaultCurrentStep","onStepChange","onComplete","allowNavigation","showStepNumbers","orientation","className","internalCurrentStep","setInternalCurrentStep","useState","isControlled","currentStepIndex","getStepStatus","index","handleNext","nextStep","handlePrevious","prevStep","handleStepClick","currentStep","isFirstStep","isLastStep","jsxs","getSpacingClass","jsx","step","status","isActive","__spreadProps","__spreadValues","getRadiusClass","getAnimationClass","Check","Button","Separator"],"mappings":"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"}