npm - @alfadocs/ui-kit-debug - Versions diffs - 1.55.0 → 1.56.0 - Mend

@alfadocs/ui-kit-debug 1.55.0 → 1.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (290) hide show

package/dist/_chunks/{stat-51CDL4au.js → stat-DmjGfXND.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { jsxs as z, jsx as i } from "react/jsx-runtime";
-import { forwardRef as X, useId as Z, useCallback as O, useRef as tt, useMemo as et } from "react";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { forwardRef as Z, useId as tt, useCallback as O, useRef as et, useMemo as rt } from "react";
 import { c as V } from "./index-D2ZczOXr.js";
 import { useTranslation as B } from "react-i18next";
-import { u as rt } from "./use-count-up-BLLetaZ8.js";
+import { u as st } from "./use-count-up-BLLetaZ8.js";
 const P = V("ds:flex ds:flex-col ds:h-full", {
   variants: {
     variant: {
@@ -106,180 +106,188 @@ const P = V("ds:flex ds:flex-col ds:h-full", {
     variant: "default",
     intent: "foreground"
   }
-}), st = V(
+}), at = V(
   "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-label",
   {
     variants: {
-      trend: {
-        up: "ds:text-[var(--success)]",
-        down: "ds:text-[var(--destructive)]",
-        flat: "ds:text-[var(--muted-foreground)]"
+      // Whether the change is good news, not which way it went: with
+      // `trendPolarity="lower-is-better"` a fall is `better`.
+      tone: {
+        better: "ds:text-[var(--success)]",
+        worse: "ds:text-[var(--destructive)]",
+        neutral: "ds:text-[var(--muted-foreground)]"
       }
     },
     defaultVariants: {
-      trend: "flat"
+      tone: "neutral"
     }
   }
-), at = { up: "↑", down: "↓", flat: "→" }, nt = {
+), nt = { up: "↑", down: "↓", flat: "→" }, it = {
   up: "stat.trend.up",
   down: "stat.trend.down",
   flat: "stat.trend.flat"
 };
-function it({
-  trend: d,
+function dt({
+  trend: a,
   delta: t,
-  deltaFormat: c = "decimal",
-  locale: a
+  deltaFormat: u = "decimal",
+  locale: n,
+  polarity: e = "higher-is-better"
 }) {
-  const { t: e, i18n: o } = B("ui"), l = typeof t == "string" ? t : new Intl.NumberFormat(a ?? o.language, {
-    style: c === "percent" ? "percent" : "decimal"
-  }).format(c === "percent" ? t / 100 : t);
-  return /* @__PURE__ */ z("span", { className: st({ trend: d }), children: [
-    /* @__PURE__ */ i("span", { "aria-hidden": "true", children: at[d] }),
-    /* @__PURE__ */ i("span", { className: "ds:sr-only", children: e(nt[d]) }),
-    l
+  const { t: i, i18n: m } = B("ui"), d = typeof t == "string" ? t : new Intl.NumberFormat(n ?? m.language, {
+    style: u === "percent" ? "percent" : "decimal"
+  }).format(u === "percent" ? t / 100 : t), r = a === "flat" ? "neutral" : a === "up" == (e === "higher-is-better") ? "better" : "worse";
+  return /* @__PURE__ */ b("span", { className: at({ tone: r }), "data-trend-tone": r, children: [
+    /* @__PURE__ */ l("span", { "aria-hidden": "true", children: nt[a] }),
+    /* @__PURE__ */ l("span", { className: "ds:sr-only", children: i(it[a]) }),
+    d,
+    r === "neutral" ? null : /* @__PURE__ */ b("span", { className: "ds:sr-only", children: [
+      " ",
+      i(r === "better" ? "stat.trend.better" : "stat.trend.worse")
+    ] })
   ] });
 }
-function dt(d, t) {
-  const c = d.trim();
-  if (c === "") return null;
-  let a = "", e = c;
-  e.startsWith("+") ? (a = "+", e = e.slice(1).trimStart()) : (e.startsWith("-") || e.startsWith("−")) && (a = "-", e = e.slice(1).trimStart());
-  let o = "";
-  const l = e.match(/[KMB]$/i);
-  l && (o = l[0], e = e.slice(0, -1).trimEnd());
-  let u = "", m = ".";
+function ot(a, t) {
+  const u = a.trim();
+  if (u === "") return null;
+  let n = "", e = u;
+  e.startsWith("+") ? (n = "+", e = e.slice(1).trimStart()) : (e.startsWith("-") || e.startsWith("−")) && (n = "-", e = e.slice(1).trimStart());
+  let i = "";
+  const m = e.match(/[KMB]$/i);
+  m && (i = m[0], e = e.slice(0, -1).trimEnd());
+  let d = "", r = ".";
   try {
-    const b = new Intl.NumberFormat(t).formatToParts(12345.6);
-    for (const n of b)
-      n.type === "group" ? u = n.value : n.type === "decimal" && (m = n.value);
+    const h = new Intl.NumberFormat(t).formatToParts(12345.6);
+    for (const c of h)
+      c.type === "group" ? d = c.value : c.type === "decimal" && (r = c.value);
   } catch {
   }
   const g = e.match(/^(\d+)\.(\d+)$/);
-  if (g && !(g[2].length === 3 && u === ".")) {
-    const n = Number.parseFloat(e);
-    if (Number.isFinite(n))
-      return { target: n, sign: a, suffix: o };
+  if (g && !(g[2].length === 3 && d === ".")) {
+    const c = Number.parseFloat(e);
+    if (Number.isFinite(c))
+      return { target: c, sign: n, suffix: i };
   }
-  let r = e;
-  u !== "" && (r = r.split(u).join("")), m !== "." && (r = r.split(m).join(".")), r = r.replace(/[\s\u00A0\u202F]/g, "");
-  const v = Number.parseFloat(r);
-  return Number.isFinite(v) ? { target: v, sign: a, suffix: o } : null;
+  let o = e;
+  d !== "" && (o = o.split(d).join("")), r !== "." && (o = o.split(r).join(".")), o = o.replace(/[\s\u00A0\u202F]/g, "");
+  const f = Number.parseFloat(o);
+  return Number.isFinite(f) ? { target: f, sign: n, suffix: i } : null;
 }
-const ct = X(
+const ct = Z(
   ({
-    label: d,
+    label: a,
     value: t,
-    format: c,
-    currency: a,
+    format: u,
+    currency: n,
     locale: e,
-    trend: o,
-    delta: l,
-    deltaFormat: u = "decimal",
-    icon: m,
-    loading: g = !1,
-    animate: r = !1,
-    animateOnEveryView: v = !1,
-    animateDurationMs: b = 1600,
-    animateLocale: n,
-    animateSeparators: h,
-    variant: x = "default",
-    size: y = "md",
+    trend: i,
+    trendPolarity: m,
+    delta: d,
+    deltaFormat: r = "decimal",
+    icon: g,
+    loading: o = !1,
+    animate: f = !1,
+    animateOnEveryView: h = !1,
+    animateDurationMs: c = 1600,
+    animateLocale: K,
+    animateSeparators: x,
+    variant: y = "default",
+    size: N = "md",
     align: I = "start",
     intent: M = "foreground",
     className: j,
     ...k
   }, R) => {
-    const { i18n: K } = B("ui"), T = Z(), f = e ?? K.language, Y = O(() => {
+    const { i18n: Y } = B("ui"), T = tt(), p = e ?? Y.language, _ = O(() => {
       if (typeof t == "string") return t;
-      switch (c) {
+      switch (u) {
         case "currency":
-          return new Intl.NumberFormat(f, {
+          return new Intl.NumberFormat(p, {
             style: "currency",
-            currency: a ?? "USD"
+            currency: n ?? "USD"
           }).format(t);
         case "percent":
-          return new Intl.NumberFormat(f, { style: "percent" }).format(
+          return new Intl.NumberFormat(p, { style: "percent" }).format(
             t
           );
         case "decimal":
-          return new Intl.NumberFormat(f, { style: "decimal" }).format(
+          return new Intl.NumberFormat(p, { style: "decimal" }).format(
             t
           );
         default:
-          return new Intl.NumberFormat(f).format(t);
+          return new Intl.NumberFormat(p).format(t);
       }
-    }, [t, c, f, a])(), N = n ?? f;
-    tt(!1);
-    const s = et(() => r ? typeof t == "number" ? Number.isFinite(t) ? { target: t, sign: "", suffix: "" } : null : dt(t, N) : null, [r, t, N]), _ = r && s !== null, q = (s == null ? void 0 : s.target) ?? 0, F = (s == null ? void 0 : s.sign) ?? "", $ = (s == null ? void 0 : s.suffix) ?? "", H = O(
-      (w) => {
+    }, [t, u, p, n])(), w = K ?? p;
+    et(!1);
+    const s = rt(() => f ? typeof t == "number" ? Number.isFinite(t) ? { target: t, sign: "", suffix: "" } : null : ot(t, w) : null, [f, t, w]), q = f && s !== null, H = (s == null ? void 0 : s.target) ?? 0, F = (s == null ? void 0 : s.sign) ?? "", $ = (s == null ? void 0 : s.suffix) ?? "", J = O(
+      (z) => {
         const E = (() => {
           try {
-            return new Intl.NumberFormat(N, {
+            return new Intl.NumberFormat(w, {
               useGrouping: !0
             });
           } catch {
             return null;
           }
         })();
-        let p;
+        let v;
         if (E)
-          if (h) {
-            const A = Math.abs(w), D = Math.trunc(A), G = A - D, J = h.thousand ?? "", S = String(D).replace(
+          if (x) {
+            const A = Math.abs(z), D = Math.trunc(A), G = A - D, Q = x.thousand ?? "", S = String(D).replace(
               /\B(?=(\d{3})+(?!\d))/g,
-              J
+              Q
             );
             if (G === 0)
-              p = S;
+              v = S;
             else {
-              const L = G.toFixed(6).replace(/0+$/, "").slice(2), Q = h.decimal ?? ".";
-              p = L ? S + Q + L : S;
+              const L = G.toFixed(6).replace(/0+$/, "").slice(2), X = x.decimal ?? ".";
+              v = L ? S + X + L : S;
             }
           } else
-            p = E.format(Math.abs(w));
+            v = E.format(Math.abs(z));
         else
-          p = String(Math.abs(w));
+          v = String(Math.abs(z));
         let W = F;
-        return F === "" && w < 0 && (W = "-"), `${W}${p}${$}`;
+        return F === "" && z < 0 && (W = "-"), `${W}${v}${$}`;
       },
-      [N, h, F, $]
-    ), C = rt({
-      to: q,
+      [w, x, F, $]
+    ), C = st({
+      to: H,
       from: 0,
-      durationMs: b,
+      durationMs: c,
       startOnVisible: !0,
-      retriggerOnReEntry: v,
+      retriggerOnReEntry: h,
       // `formatter` is the only path we use — it owns both the locale
       // formatting and the sign/suffix re-application.
-      formatter: H
+      formatter: J
     });
-    return g ? /* @__PURE__ */ z(
+    return o ? /* @__PURE__ */ b(
       "div",
       {
         ref: R,
         role: "group",
         "aria-busy": "true",
-        "aria-label": d,
+        "aria-label": a,
         "data-component": "stat",
-        className: P({ variant: x, size: y, align: I, className: j }),
+        className: P({ variant: y, size: N, align: I, className: j }),
         ...k,
         children: [
-          /* @__PURE__ */ i("div", { className: "ds:h-[var(--skeleton-label-h)] ds:w-[var(--skeleton-label-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" }),
-          /* @__PURE__ */ i("div", { className: "ds:h-[var(--skeleton-value-h)] ds:w-[var(--skeleton-value-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" })
+          /* @__PURE__ */ l("div", { className: "ds:h-[var(--skeleton-label-h)] ds:w-[var(--skeleton-label-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" }),
+          /* @__PURE__ */ l("div", { className: "ds:h-[var(--skeleton-value-h)] ds:w-[var(--skeleton-value-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" })
         ]
       }
-    ) : /* @__PURE__ */ z(
+    ) : /* @__PURE__ */ b(
       "div",
       {
         ref: R,
         role: "group",
         "aria-labelledby": T,
         "data-component": "stat",
-        className: P({ variant: x, size: y, align: I, className: j }),
+        className: P({ variant: y, size: N, align: I, className: j }),
         ...k,
         children: [
-          /* @__PURE__ */ z("span", { className: "ds:inline-flex ds:items-center", children: [
-            m && /* @__PURE__ */ i(
+          /* @__PURE__ */ b("span", { className: "ds:inline-flex ds:items-center", children: [
+            g && /* @__PURE__ */ l(
               "span",
               {
                 "aria-hidden": "true",
@@ -292,41 +300,42 @@ const ct = X(
                   "ds:text-[color:var(--accent)]",
                   "ds:forced-colors:text-[CanvasText]"
                 ].join(" "),
-                children: m
+                children: g
               }
             ),
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ l(
               "span",
               {
                 id: T,
                 className: "type-label ds:text-[var(--muted-foreground)]",
-                children: d
+                children: a
               }
             )
           ] }),
-          _ ? (
+          q ? (
             // The animated number is wrapped in an `aria-live="off"` span
             // so screen readers don't announce every interpolated frame.
             // The `role="group"` ancestor (with `aria-labelledby` pointing
             // at the label) carries the final accessible reading — the
             // animated frames are decorative only.
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ l(
               "span",
               {
                 ref: C.ref,
                 "aria-live": "off",
-                className: U({ size: y, variant: x, intent: M }),
+                className: U({ size: N, variant: y, intent: M }),
                 children: C.value
               }
             )
-          ) : /* @__PURE__ */ i("span", { className: U({ size: y, variant: x, intent: M }), children: Y }),
-          o != null && l != null && /* @__PURE__ */ i(
-            it,
+          ) : /* @__PURE__ */ l("span", { className: U({ size: N, variant: y, intent: M }), children: _ }),
+          i != null && d != null && /* @__PURE__ */ l(
+            dt,
             {
-              trend: o,
-              delta: l,
-              deltaFormat: u,
-              locale: e
+              trend: i,
+              delta: d,
+              deltaFormat: r,
+              locale: e,
+              polarity: m
             }
           )
         ]
@@ -338,4 +347,4 @@ ct.displayName = "Stat";
 export {
   ct as S
 };
-//# sourceMappingURL=stat-51CDL4au.js.map
+//# sourceMappingURL=stat-DmjGfXND.js.map

package/dist/_chunks/stat-DmjGfXND.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stat-DmjGfXND.js","sources":["../../src/components/stat/stat.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useId,\n useMemo,\n useRef,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { useCountUp } from '../../hooks/use-count-up';\n\n/* ------------------------------------------------------------------ */\n/* CVA — stat root */\n/* ------------------------------------------------------------------ */\n\n// `h-full` lets Stats grow to fill a flex / grid parent's cell, so a\n// row paired with taller cards (BenefitCard, Card, etc.) reads as a\n// matching set instead of mismatched heights. In a non-stretching\n// parent (block flow, inline) it's a no-op — block-size defers to\n// content as before. The flex-col inside still pins label/icon row\n// at the top and the number below, so growing the card adds the\n// extra space below the number instead of inserting it between\n// label and value.\nconst statVariants = cva('ds:flex ds:flex-col ds:h-full', {\n variants: {\n variant: {\n default: 'ds:gap-[var(--spacing-xs)]',\n outlined: [\n 'ds:gap-[var(--spacing-xs)]',\n 'ds:border ds:border-[color:var(--border)]',\n 'ds:rounded-[var(--radius-md)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n ].join(' '),\n // White card surface with the shared card shadow + border —\n // matches `Card variant=\"elevated\"` and `BenefitCard.elevated`\n // tokens (`--card`, `--card-border`, `--shadow-card`,\n // `--radius-lg`) so a grid of elevated Stats reads as a set of\n // shaded panels without nesting a Card around each one. The\n // border is essential in dark mode: shadow alone on a dark\n // surface loses contrast and the card boundary disappears.\n // `--surface-border-width` bumps it to 2px in the accessible themes,\n // matching Card / BenefitCard's 0.31.5 accessibility uplift.\n elevated: [\n 'ds:gap-[var(--spacing-xs)]',\n 'ds:bg-[var(--card)]',\n 'ds:text-[var(--card-foreground)]',\n 'ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))] ds:border-[color:var(--card-border)]',\n 'ds:shadow-[var(--shadow-card)]',\n 'ds:rounded-[var(--radius-lg)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n // Forced-colors: UA strips shadow, so render a border as the\n // separation cue — mirrors Card's forced-colors behaviour.\n 'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n ].join(' '),\n compact: 'ds:gap-[var(--spacing-none)]',\n },\n size: {\n sm: '',\n md: '',\n lg: '',\n },\n align: {\n start: 'ds:items-start ds:text-start',\n center: 'ds:items-center ds:text-center',\n end: 'ds:items-end ds:text-end',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n align: 'start',\n },\n});\n\n/* ------------------------------------------------------------------ */\n/* CVA — value element */\n/* ------------------------------------------------------------------ */\n\nconst valueVariants = cva('type-metric', {\n variants: {\n size: {\n sm: 'ds:[--type-metric-size:var(--font-size-xl)]',\n md: 'ds:[--type-metric-size:var(--font-size-3xl)]',\n lg: 'ds:[--type-metric-size:var(--font-size-5xl)]',\n },\n variant: {\n default: '',\n outlined: '',\n elevated: '',\n compact: '',\n },\n // Colour of the headline metric value. Defaults to `--foreground`\n // (the existing render). `primary` / `accent` are the brand intents\n // — use for hero / marketing stats where the number IS the visual\n // marker. `success` / `destructive` / `info` / `warning` map to the\n // semantic tokens for KPI tiles that want to signal status via the\n // value colour itself (e.g. revenue green, debt red). The trend\n // chevron and the label colour are independent of this prop.\n intent: {\n foreground: 'ds:text-[var(--foreground)]',\n primary: 'ds:text-[var(--primary)]',\n accent: 'ds:text-[var(--accent)]',\n success: 'ds:text-[var(--success)]',\n destructive: 'ds:text-[var(--destructive)]',\n info: 'ds:text-[var(--info)]',\n warning: 'ds:text-[var(--warning)]',\n },\n },\n compoundVariants: [\n {\n variant: 'compact',\n size: 'sm',\n className: 'ds:[--type-metric-size:var(--font-size-lg)]',\n },\n {\n variant: 'compact',\n size: 'md',\n className: 'ds:[--type-metric-size:var(--font-size-xl)]',\n },\n {\n variant: 'compact',\n size: 'lg',\n className: 'ds:[--type-metric-size:var(--font-size-2xl)]',\n },\n ],\n defaultVariants: {\n size: 'md',\n variant: 'default',\n intent: 'foreground',\n },\n});\n\n/* ------------------------------------------------------------------ */\n/* CVA — trend element */\n/* ------------------------------------------------------------------ */\n\nconst trendVariants = cva(\n 'ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-label',\n {\n variants: {\n // Whether the change is good news, not which way it went: with\n // `trendPolarity=\"lower-is-better\"` a fall is `better`.\n tone: {\n better: 'ds:text-[var(--success)]',\n worse: 'ds:text-[var(--destructive)]',\n neutral: 'ds:text-[var(--muted-foreground)]',\n },\n },\n defaultVariants: {\n tone: 'neutral',\n },\n },\n);\n\n/* ------------------------------------------------------------------ */\n/* StatTrend (internal — not exported) */\n/* ------------------------------------------------------------------ */\n\n/** Which way is good news for a metric's trend. */\nexport type StatTrendPolarity = 'higher-is-better' | 'lower-is-better';\n\ninterface StatTrendProps {\n trend: 'up' | 'down' | 'flat';\n delta: number | string;\n deltaFormat?: 'decimal' | 'percent';\n locale?: string;\n polarity?: StatTrendPolarity;\n}\n\nconst ARROW = { up: '↑', down: '↓', flat: '→' } as const;\nconst TREND_KEY = {\n up: 'stat.trend.up',\n down: 'stat.trend.down',\n flat: 'stat.trend.flat',\n} as const;\n\nfunction StatTrend({\n trend,\n delta,\n deltaFormat = 'decimal',\n locale,\n polarity = 'higher-is-better',\n}: StatTrendProps) {\n const { t, i18n } = useTranslation('ui');\n\n const formattedDelta =\n typeof delta === 'string'\n ? delta\n : new Intl.NumberFormat(locale ?? i18n.language, {\n style: deltaFormat === 'percent' ? 'percent' : 'decimal',\n }).format(deltaFormat === 'percent' ? delta / 100 : delta);\n\n // The arrow follows the number; the colour and the spoken \"better\" or\n // \"worse\" follow the polarity, so the meaning never rests on colour.\n const tone =\n trend === 'flat'\n ? 'neutral'\n : (trend === 'up') === (polarity === 'higher-is-better')\n ? 'better'\n : 'worse';\n\n return (\n <span className={trendVariants({ tone })} data-trend-tone={tone}>\n <span aria-hidden=\"true\">{ARROW[trend]}</span>\n <span className=\"ds:sr-only\">{t(TREND_KEY[trend])}</span>\n {formattedDelta}\n {tone === 'neutral' ? null : (\n <span className=\"ds:sr-only\">\n {' '}\n {t(tone === 'better' ? 'stat.trend.better' : 'stat.trend.worse')}\n </span>\n )}\n </span>\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Parse a string value into a numeric target for the count-up */\n/* ------------------------------------------------------------------ */\n\ntype ParsedValue = {\n /** Numeric target for the count-up. */\n target: number;\n /** Leading sign captured from the input string (e.g. \"+\" / \"-\"). */\n sign: '' | '+' | '-';\n /** Trailing shorthand suffix (e.g. \"K\" / \"M\" / \"B\") to re-append. */\n suffix: string;\n};\n\n/**\n * Strip locale-aware separators, a leading sign, and the K/M/B\n * shorthand suffix from a pre-formatted string so the count-up has a\n * pure numeric target to animate towards. Returns `null` for any input\n * that can't be parsed — the caller short-circuits to static rendering\n * in that case.\n */\nfunction parseStatValue(raw: string, locale: string): ParsedValue | null {\n const trimmed = raw.trim();\n if (trimmed === '') return null;\n\n // Capture leading sign so we can re-attach it every frame. Stat's\n // marketing usage (\"+500.000\", \"-12\") often relies on it.\n let sign: '' | '+' | '-' = '';\n let body = trimmed;\n if (body.startsWith('+')) {\n sign = '+';\n body = body.slice(1).trimStart();\n } else if (body.startsWith('-') || body.startsWith('−')) {\n // Hyphen-minus or the typographic minus sign — both treated as -.\n sign = '-';\n body = body.slice(1).trimStart();\n }\n\n // Trailing K / M / B shorthand (case-insensitive). Re-append verbatim\n // so \"+1.5K\" renders as \"+1.5K\" at every frame.\n let suffix = '';\n const suffixMatch = body.match(/[KMB]$/i);\n if (suffixMatch) {\n suffix = suffixMatch[0];\n body = body.slice(0, -1).trimEnd();\n }\n\n // Discover the locale's group + decimal glyphs from a probe value.\n // formatToParts is the canonical way; we fall back to `.` decimal /\n // `,` group if Intl can't tell us (no-locale envs).\n let group = '';\n let decimal = '.';\n try {\n const probe = new Intl.NumberFormat(locale).formatToParts(12345.6);\n for (const part of probe) {\n if (part.type === 'group') group = part.value;\n else if (part.type === 'decimal') decimal = part.value;\n }\n } catch {\n /* swallow — defaults already set */\n }\n\n // Heuristic for input strings that look like JS-native decimals\n // (e.g. `\"1500.25\"`) regardless of the requested locale: if the body\n // is a clean US-style decimal AND the fraction after the `.` is NOT\n // a three-digit thousands group in a locale that uses `.` as the\n // group separator, treat it as a direct numeric literal. This covers\n // the common case where a caller types `value=\"1500.25\"` and expects\n // the count-up to land on 1500.25 even though the output locale is\n // it-IT (which uses `.` for thousands).\n const usStyleMatch = body.match(/^(\\d+)\\.(\\d+)$/);\n if (usStyleMatch) {\n const fractionLen = usStyleMatch[2].length;\n if (!(fractionLen === 3 && group === '.')) {\n const direct = Number.parseFloat(body);\n if (Number.isFinite(direct)) {\n return { target: direct, sign, suffix };\n }\n }\n }\n\n // Strip every group separator we discovered, then normalise the\n // decimal separator to `.` so JS can parseFloat the result.\n // Note: when the locale's group separator is empty (e.g. some\n // numbering systems) the replace is a no-op.\n let normalised = body;\n if (group !== '') {\n normalised = normalised.split(group).join('');\n }\n if (decimal !== '.') {\n normalised = normalised.split(decimal).join('.');\n }\n\n // Defence-in-depth: strip whitespace plus NBSP (U+00A0) and NARROW\n // NO-BREAK SPACE (U+202F) that some locales (fr-FR, it-IT) use as\n // thousand separators. Hex escapes keep this source ASCII-clean.\n normalised = normalised.replace(/[\\s\\u00A0\\u202F]/g, '');\n\n const numeric = Number.parseFloat(normalised);\n if (!Number.isFinite(numeric)) return null;\n\n return { target: numeric, sign, suffix };\n}\n\n/* ------------------------------------------------------------------ */\n/* StatProps */\n/* ------------------------------------------------------------------ */\n\nexport interface StatProps\n extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof statVariants> {\n /** Metric label rendered above the value. */\n label: string;\n /** Numeric or pre-formatted string value. */\n value: number | string;\n /** Number formatting style. Omit to use default decimal formatting. */\n format?: 'decimal' | 'currency' | 'percent';\n /** ISO 4217 currency code — required when format=\"currency\". */\n currency?: string;\n /** BCP 47 locale override. Defaults to the active i18n language. */\n locale?: string;\n /** Trend direction. Requires `delta` to render the trend row. */\n trend?: 'up' | 'down' | 'flat';\n /** Trend delta magnitude, e.g. 12 for \"↑ 12%\". */\n delta?: number | string;\n /**\n * Which way is good news. `higher-is-better` (default) shows a rise in\n * the success colour; `lower-is-better` (a no-show or cancellation rate,\n * a waiting time) shows a fall in it instead. The arrow always points the\n * way the number moved, and screen readers hear \"better\" or \"worse\".\n */\n trendPolarity?: StatTrendPolarity;\n /** Number formatting style for the delta. Default \"decimal\". */\n deltaFormat?: 'decimal' | 'percent';\n /** Optional leading icon rendered at the start of the label row. */\n icon?: ReactNode;\n /**\n * Colour of the headline value. Defaults to `foreground`. Brand\n * intents (`primary`, `accent`) are for hero / marketing stats where\n * the number is the visual marker. Semantic intents\n * (`success`, `destructive`, `info`, `warning`) signal status via\n * the value colour itself — e.g. revenue green, debt red on KPI\n * tiles. Trend chevron and label colour are independent.\n */\n intent?:\n | 'foreground'\n | 'primary'\n | 'accent'\n | 'success'\n | 'destructive'\n | 'info'\n | 'warning';\n /** Renders animated skeleton placeholders instead of content. */\n loading?: boolean;\n /**\n * Animate the numeric value from 0 (or from the captured leading\n * sign) to the final value when the Stat first scrolls into view.\n * Default `false`. Marketing surfaces opt in; dashboards leave it\n * off so live metrics render immediately.\n */\n animate?: boolean;\n /**\n * When `true`, the count-up re-plays every time the Stat scrolls\n * out of view and back in. Default `false` — animate once per\n * element per session, matching the booking-website hero pattern.\n * Ignored under `prefers-reduced-motion: reduce`.\n */\n animateOnEveryView?: boolean;\n /** Animation duration in milliseconds. Default 1600. */\n animateDurationMs?: number;\n /**\n * BCP 47 locale used for the per-frame count-up formatting. Falls\n * back to `locale`, then to the active i18n language.\n */\n animateLocale?: string;\n /**\n * Override the locale's thousand / decimal glyphs for the count-up.\n * Wins over locale defaults. Pass partial overrides — `decimal`\n * alone is valid; the unspecified separator stays at the locale\n * default.\n */\n animateSeparators?: {\n thousand?: string;\n decimal?: string;\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* Stat */\n/* ------------------------------------------------------------------ */\n\nexport const Stat = forwardRef<HTMLDivElement, StatProps>(\n (\n {\n label,\n value,\n format,\n currency,\n locale,\n trend,\n trendPolarity,\n delta,\n deltaFormat = 'decimal',\n icon,\n loading = false,\n animate = false,\n animateOnEveryView = false,\n animateDurationMs = 1600,\n animateLocale,\n animateSeparators,\n variant = 'default',\n size = 'md',\n align = 'start',\n intent = 'foreground',\n className,\n ...props\n },\n ref,\n ) => {\n const { i18n } = useTranslation('ui');\n const labelId = useId();\n const lang = locale ?? i18n.language;\n\n /* -------------------------------------------------- */\n /* Static formatting — the value as it would appear */\n /* in the non-animated (or post-animation) state. */\n /* -------------------------------------------------- */\n\n const formatValue = useCallback((): string => {\n if (typeof value === 'string') return value;\n\n switch (format) {\n case 'currency':\n return new Intl.NumberFormat(lang, {\n style: 'currency',\n currency: currency ?? 'USD',\n }).format(value);\n case 'percent':\n return new Intl.NumberFormat(lang, { style: 'percent' }).format(\n value,\n );\n case 'decimal':\n return new Intl.NumberFormat(lang, { style: 'decimal' }).format(\n value,\n );\n default:\n return new Intl.NumberFormat(lang).format(value);\n }\n }, [value, format, lang, currency]);\n\n const staticValue = formatValue();\n\n /* -------------------------------------------------- */\n /* Parse the value into a numeric target for the */\n /* count-up. Numeric values use `value` directly; */\n /* string values are stripped of sign / shorthand / */\n /* locale separators and re-decorated each frame. */\n /* -------------------------------------------------- */\n\n const animationLocale = animateLocale ?? lang;\n const hasWarnedRef = useRef<boolean>(false);\n\n const parsed = useMemo<ParsedValue | null>(() => {\n if (!animate) return null;\n if (typeof value === 'number') {\n // Numeric: target is the number itself; no sign / suffix to\n // re-attach.\n return Number.isFinite(value)\n ? { target: value, sign: '', suffix: '' }\n : null;\n }\n return parseStatValue(value, animationLocale);\n }, [animate, value, animationLocale]);\n\n // Dev-mode warning when an animate-flagged Stat has an unparseable\n // string value. Render static, no throw — one warn per component.\n if (\n animate &&\n typeof value === 'string' &&\n parsed === null &&\n import.meta.env.DEV &&\n !hasWarnedRef.current\n ) {\n hasWarnedRef.current = true;\n console.warn(\n `Stat: value=\"${value}\" couldn't be parsed for the count-up animation. Rendering static.`,\n );\n }\n\n const shouldAnimate = animate && parsed !== null;\n\n /* -------------------------------------------------- */\n /* Wire the hook unconditionally — rules-of-hooks. */\n /* When `shouldAnimate` is false the hook still runs */\n /* but `to === from` so it's a no-op visually. */\n /* -------------------------------------------------- */\n\n const target = parsed?.target ?? 0;\n const sign = parsed?.sign ?? '';\n const suffix = parsed?.suffix ?? '';\n\n // Wrap the count-up formatter so the captured sign + suffix are\n // re-applied every frame. The hook hands us the locale-formatted\n // magnitude; we own the decoration around it.\n const formatter = useCallback(\n (n: number) => {\n // Use the absolute value for the magnitude so the captured\n // sign is the sole source of the rendered sign. Negative\n // numbers passed in (e.g. `to: -12`) come through unsigned;\n // we re-apply via `sign`. Always force `useGrouping: true` so\n // ICU's locale-default `min2` doesn't suppress the thousand\n // glyph on 4-digit values like 1.000 (it-IT). The user wrote\n // a stat value — they want it grouped.\n const magnitudeNF = (() => {\n try {\n return new Intl.NumberFormat(animationLocale, {\n useGrouping: true,\n });\n } catch {\n return null;\n }\n })();\n\n let magnitudeStr: string;\n if (magnitudeNF) {\n if (animateSeparators) {\n // Hand-build the grouped magnitude so we don't depend on\n // ICU's locale-by-locale grouping defaults (which differ\n // between engines and can drop the group at 4-digit\n // thresholds even with `useGrouping: true`). Locale only\n // influences sign handling, which we apply separately.\n const abs = Math.abs(n);\n const intPart = Math.trunc(abs);\n const fracPart = abs - intPart;\n const groupGlyph = animateSeparators.thousand ?? '';\n const intStr = String(intPart).replace(\n /\\B(?=(\\d{3})+(?!\\d))/g,\n groupGlyph,\n );\n if (fracPart === 0) {\n magnitudeStr = intStr;\n } else {\n const fracStr = fracPart.toFixed(6).replace(/0+$/, '').slice(2);\n const decimalGlyph = animateSeparators.decimal ?? '.';\n magnitudeStr = fracStr ? intStr + decimalGlyph + fracStr : intStr;\n }\n } else {\n magnitudeStr = magnitudeNF.format(Math.abs(n));\n }\n } else {\n magnitudeStr = String(Math.abs(n));\n }\n\n // Re-derive the sign every frame: the captured sign wins, but\n // a negative `to` with no leading sign in the source still\n // renders with a leading \"-\" so the final formatted output\n // matches locale conventions.\n let resolvedSign: string = sign;\n if (sign === '' && n < 0) resolvedSign = '-';\n\n return `${resolvedSign}${magnitudeStr}${suffix}`;\n },\n [animationLocale, animateSeparators, sign, suffix],\n );\n\n const countUp = useCountUp({\n to: target,\n from: 0,\n durationMs: animateDurationMs,\n startOnVisible: true,\n retriggerOnReEntry: animateOnEveryView,\n // `formatter` is the only path we use — it owns both the locale\n // formatting and the sign/suffix re-application.\n formatter,\n });\n\n /* -------------------------------------------------- */\n /* Loading state */\n /* -------------------------------------------------- */\n\n if (loading) {\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-busy=\"true\"\n aria-label={label}\n data-component=\"stat\"\n className={statVariants({ variant, size, align, className })}\n {...props}\n >\n <div className=\"ds:h-[var(--skeleton-label-h)] ds:w-[var(--skeleton-label-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]\" />\n <div className=\"ds:h-[var(--skeleton-value-h)] ds:w-[var(--skeleton-value-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]\" />\n </div>\n );\n }\n\n /* -------------------------------------------------- */\n /* Render */\n /* -------------------------------------------------- */\n\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-labelledby={labelId}\n data-component=\"stat\"\n className={statVariants({ variant, size, align, className })}\n {...props}\n >\n <span className=\"ds:inline-flex ds:items-center\">\n {icon && (\n <span\n aria-hidden=\"true\"\n className={[\n 'ds:me-[var(--spacing-xs)] ds:inline-flex ds:shrink-0',\n // Accent tint on the leading icon. The icon is decorative\n // (aria-hidden), so magenta-500's 3.2:1 contrast on white\n // is acceptable here — the Stat label + value still\n // carry the accessible name at `--foreground`.\n 'ds:text-[color:var(--accent)]',\n 'ds:forced-colors:text-[CanvasText]',\n ].join(' ')}\n >\n {icon}\n </span>\n )}\n <span\n id={labelId}\n className=\"type-label ds:text-[var(--muted-foreground)]\"\n >\n {label}\n </span>\n </span>\n {shouldAnimate ? (\n // The animated number is wrapped in an `aria-live=\"off\"` span\n // so screen readers don't announce every interpolated frame.\n // The `role=\"group\"` ancestor (with `aria-labelledby` pointing\n // at the label) carries the final accessible reading — the\n // animated frames are decorative only.\n <span\n ref={countUp.ref}\n aria-live=\"off\"\n className={valueVariants({ size, variant, intent })}\n >\n {countUp.value}\n </span>\n ) : (\n <span className={valueVariants({ size, variant, intent })}>\n {staticValue}\n </span>\n )}\n {trend != null && delta != null && (\n <StatTrend\n trend={trend}\n delta={delta}\n deltaFormat={deltaFormat}\n locale={locale}\n polarity={trendPolarity}\n />\n )}\n </div>\n );\n },\n);\n\nStat.displayName = 'Stat';\n"],"names":["statVariants","cva","valueVariants","trendVariants","ARROW","TREND_KEY","StatTrend","trend","delta","deltaFormat","locale","polarity","t","i18n","useTranslation","formattedDelta","tone","jsxs","jsx","parseStatValue","raw","trimmed","sign","body","suffix","suffixMatch","group","decimal","probe","part","usStyleMatch","direct","normalised","numeric","Stat","forwardRef","label","value","format","currency","trendPolarity","icon","loading","animate","animateOnEveryView","animateDurationMs","animateLocale","animateSeparators","variant","size","align","intent","className","props","ref","labelId","useId","lang","staticValue","useCallback","animationLocale","useRef","parsed","useMemo","shouldAnimate","target","formatter","n","magnitudeNF","magnitudeStr","abs","intPart","fracPart","groupGlyph","intStr","fracStr","decimalGlyph","resolvedSign","countUp","useCountUp"],"mappings":"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"}

package/dist/_chunks/{stepper-accordion-D7lnBGh2.js → stepper-accordion-DDTSOUHc.js} RENAMED Viewed

@@ -124,7 +124,11 @@ const K = [
   "ds:group-data-[state=open]/item:rotate-180"
 ].join(" "), sr = [
   "type-meta ds:text-[var(--muted-foreground)]",
-  "ds:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]",
+  // Indented under the step title from 448px of accordion width (px, not
+  // rem: a container query in rem follows the host's root font size); narrower
+  // (a phone) the content takes the full width so a form or a list in it
+  // is not squeezed beside the step number.
+  "ds:ps-[var(--spacing-md)] ds:@[448px]/stepper:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]",
   "ds:pe-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]",
   "ds:group-data-[state=open]/item:hidden"
 ].join(" "), ar = [
@@ -132,11 +136,18 @@ const K = [
   "ds:data-[state=open]:animate-[accordion-down_var(--animation-duration)_var(--ease-out)]",
   "ds:data-[state=closed]:animate-[accordion-up_var(--animation-duration)_var(--ease-in)]"
 ].join(" "), tr = [
-  "ds:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]",
+  // Indented under the step title from 448px of accordion width (px, not
+  // rem: a container query in rem follows the host's root font size); narrower
+  // (a phone) the content takes the full width so a form or a list in it
+  // is not squeezed beside the step number.
+  "ds:ps-[var(--spacing-md)] ds:@[448px]/stepper:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]",
   "ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-md)]"
-].join(" "), nr = b("ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", {
-  variants: {}
-}), or = P(
+].join(" "), nr = b(
+  "ds:@container/stepper ds:flex ds:w-full ds:min-w-0 ds:flex-col ds:gap-[var(--spacing-sm)]",
+  {
+    variants: {}
+  }
+), or = P(
   ({
     activeStep: s,
     steps: i,
@@ -248,4 +259,4 @@ or.displayName = "StepperAccordion";
 export {
   or as S
 };
-//# sourceMappingURL=stepper-accordion-D7lnBGh2.js.map
+//# sourceMappingURL=stepper-accordion-DDTSOUHc.js.map

package/dist/_chunks/stepper-accordion-DDTSOUHc.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stepper-accordion-DDTSOUHc.js","sources":["../../src/components/_shared/stepper.ts","../../src/components/stepper-accordion/stepper-accordion.tsx"],"sourcesContent":["// Shared types + state machine for the two stepper variants:\n// - src/components/stepper-progress (lightweight progress bar + caption)\n// - src/components/stepper-accordion (vertical disclosure wizard)\n//\n// Both components consume `StepSpec` and the `stateForStep` helper so the\n// four-state machine (upcoming | current | completed | error) stays in one\n// place. Rename or removal is a MAJOR per src/docs/13-maintainability.mdx.\n\n/**\n * Consumer-supplied override for a step.\n *\n * - `completed` — the step holds a value; render the tick and let the user\n * back in to change it.\n * - `error` — the step's own validation failed; always wins.\n * - `unlocked` (1.11.0) — the step has been *reached* but holds no value of\n * its own. It renders exactly like an upcoming step, but the user may open\n * it. Added for flows whose final step can never report itself \"completed\"\n * because its validity belongs to a form inside it: without this, moving\n * the cursor backwards left that step HTML-`disabled` and unreachable.\n *\n * `'completed'` and `'error'` behave exactly as before, so consumers passing\n * either (or nothing) are unaffected. A consumer that reads this union back\n * in an exhaustive `switch` needs a case for `'unlocked'`; `StepState` — the\n * union such a switch usually runs on — is deliberately untouched.\n */\nexport type StepStatus = 'completed' | 'error' | 'unlocked';\n\nexport type StepState = 'upcoming' | 'current' | 'completed' | 'error';\n\nexport interface StepSpec {\n /** Visible step label — comes from the consumer, already translated. */\n label: string;\n /** Optional secondary line (kept short; shown in accordion + progress captions). */\n description?: string;\n /**\n * Consumer-explicit status override. `error` always wins; `completed` is\n * honoured only for steps at or beyond the active index so the active step\n * always keeps `current` (otherwise a consumer pre-setting `completed` on\n * every step would silently mask the current position). `unlocked` changes\n * reachability only — see `stepIsReachable` — and never the rendered state.\n */\n status?: StepStatus;\n}\n\nexport function stateForStep(\n index: number,\n activeStep: number,\n status?: StepStatus,\n): StepState {\n if (status === 'error') return 'error';\n if (index === activeStep) return 'current';\n if (status === 'completed') return 'completed';\n if (index < activeStep) return 'completed';\n // `unlocked` deliberately falls through: it is a reachability hint, not a\n // visual state, so the returned `StepState` union is unchanged and any\n // exhaustive switch a consumer already wrote keeps compiling.\n return 'upcoming';\n}\n\n/**\n * May the user open this step?\n *\n * Everything at or before the cursor is reachable, as is any step the\n * consumer has explicitly marked `completed`, `error` or `unlocked`.\n * Steps ahead of the cursor with no status stay locked, exactly as before.\n */\nexport function stepIsReachable(\n index: number,\n activeStep: number,\n status?: StepStatus,\n): boolean {\n if (status !== undefined) return true;\n return index <= activeStep;\n}\n","import {\n forwardRef,\n useImperativeHandle,\n useMemo,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronDown, Lock } from 'lucide-react';\nimport { useTranslation } from 'react-i18next';\nimport {\n stateForStep,\n stepIsReachable,\n type StepSpec,\n type StepState,\n} from '../_shared/stepper';\n\n/* -------------------------------------------------------------------- */\n/* StepperAccordion */\n/* */\n/* Vertical disclosure wizard. The current step is expanded inline; */\n/* completed steps collapse to a one-line summary with an \"Edit\" hint */\n/* that re-opens them; upcoming steps are locked. Built on Radix */\n/* Accordion in controlled-single mode with collapsible=false so the */\n/* current panel always stays open. */\n/* -------------------------------------------------------------------- */\n\nconst STEP_VALUE_PREFIX = 'step-';\nconst makeValue = (index: number) => `${STEP_VALUE_PREFIX}${index}`;\nconst indexFromValue = (value: string): number =>\n Number(value.slice(STEP_VALUE_PREFIX.length));\n\n/* -------------------------------------------------------------------- */\n/* Indicator — shared with progress bar visual tone but sized for the */\n/* vertical wizard's dense header row. */\n/* -------------------------------------------------------------------- */\n\nconst iconDrawClasses = [\n 'ds:[stroke-dasharray:1] ds:[stroke-dashoffset:1]',\n 'ds:animate-[stepper-icon-draw_var(--animation-duration)_var(--ease-out)_forwards]',\n 'ds:motion-reduce:animate-none ds:motion-reduce:[stroke-dashoffset:0]',\n].join(' ');\n\nfunction CheckGlyph() {\n return (\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"ds:size-4\"\n >\n <path pathLength=\"1\" d=\"M5 12l5 5L20 7\" className={iconDrawClasses} />\n </svg>\n );\n}\n\nfunction CrossGlyph() {\n return (\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"ds:size-4\"\n >\n <path pathLength=\"1\" d=\"M6 6l12 12\" className={iconDrawClasses} />\n <path pathLength=\"1\" d=\"M18 6l-12 12\" className={iconDrawClasses} />\n </svg>\n );\n}\n\nconst indicatorClasses = [\n 'ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center',\n 'ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]',\n 'ds:size-[var(--min-target-size)]',\n 'ds:rounded-[var(--radius-full)]',\n 'ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-semibold)]',\n 'ds:border ds:border-[var(--border)]',\n 'ds:transition-[background-color,border-color,color]',\n 'ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]',\n 'ds:motion-reduce:transition-none',\n].join(' ');\n\nconst indicatorVariants = cva(indicatorClasses, {\n variants: {\n state: {\n upcoming: 'ds:bg-[var(--background)] ds:text-[var(--muted-foreground)]',\n current: [\n 'ds:border-[var(--primary)] ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]',\n 'ds:animate-[stepper-indicator-pop_var(--animation-duration)_var(--ease-out)_both]',\n 'ds:motion-reduce:animate-none',\n ].join(' '),\n completed:\n 'ds:border-[var(--primary)] ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]',\n error: [\n 'ds:border-[var(--destructive)] ds:bg-[var(--destructive)] ds:text-[var(--destructive-foreground)]',\n 'ds:animate-[stepper-indicator-pop_var(--animation-duration)_var(--ease-out)_both]',\n 'ds:motion-reduce:animate-none',\n ].join(' '),\n },\n },\n});\n\n/* -------------------------------------------------------------------- */\n/* Item / trigger / content variants */\n/* -------------------------------------------------------------------- */\n\nconst itemVariants = cva(\n [\n 'ds:group/item ds:overflow-hidden ds:rounded-[var(--radius-md)]',\n 'ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))] ds:border-[color:var(--card-border)] ds:bg-[var(--card)]',\n 'ds:data-[state=open]:border-[var(--primary)]',\n 'ds:transition-[border-color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]',\n 'ds:motion-reduce:transition-none',\n ].join(' '),\n {\n variants: {\n tone: {\n neutral: '',\n error: 'ds:data-[state=open]:border-[var(--destructive)]',\n },\n },\n defaultVariants: { tone: 'neutral' },\n },\n);\n\nconst triggerClasses = [\n 'ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)]',\n 'ds:min-h-[var(--min-target-size)]',\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n 'ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]',\n 'ds:text-start',\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:disabled:cursor-not-allowed',\n 'ds:transition-[background-color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]',\n 'ds:motion-reduce:transition-none',\n 'ds:hover:enabled:bg-[var(--muted)]/40',\n].join(' ');\n\nconst labelClasses = (state: StepState) =>\n [\n 'type-body-sm',\n state === 'current' || state === 'error'\n ? 'ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)]'\n : state === 'completed'\n ? 'ds:text-[var(--foreground)]'\n : 'ds:text-[var(--muted-foreground)]',\n ].join(' ');\n\nconst descriptionClasses = [\n 'type-meta ds:text-[var(--muted-foreground)]',\n 'ds:mt-[var(--spacing-xs)]',\n].join(' ');\n\nconst hintClasses = [\n 'type-meta',\n 'ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]',\n 'ds:text-[var(--muted-foreground)]',\n].join(' ');\n\nconst chevronClasses = [\n 'ds:size-4 ds:shrink-0 ds:text-[var(--muted-foreground)]',\n 'ds:transition-transform ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]',\n 'ds:motion-reduce:transition-none',\n 'ds:group-data-[state=open]/item:rotate-180',\n].join(' ');\n\nconst summaryClasses = [\n 'type-meta ds:text-[var(--muted-foreground)]',\n // Indented under the step title from 448px of accordion width (px, not\n // rem: a container query in rem follows the host's root font size); narrower\n // (a phone) the content takes the full width so a form or a list in it\n // is not squeezed beside the step number.\n 'ds:ps-[var(--spacing-md)] ds:@[448px]/stepper:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]',\n 'ds:pe-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]',\n 'ds:group-data-[state=open]/item:hidden',\n].join(' ');\n\nconst contentClasses = [\n 'ds:overflow-hidden',\n 'ds:data-[state=open]:animate-[accordion-down_var(--animation-duration)_var(--ease-out)]',\n 'ds:data-[state=closed]:animate-[accordion-up_var(--animation-duration)_var(--ease-in)]',\n].join(' ');\n\nconst contentInnerClasses = [\n // Indented under the step title from 448px of accordion width (px, not\n // rem: a container query in rem follows the host's root font size); narrower\n // (a phone) the content takes the full width so a form or a list in it\n // is not squeezed beside the step number.\n 'ds:ps-[var(--spacing-md)] ds:@[448px]/stepper:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]',\n 'ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-md)]',\n].join(' ');\n\n/* -------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------- */\n\nexport interface AccordionStepSpec extends StepSpec {\n /** Form content rendered inside the expanded panel. */\n content: ReactNode;\n /**\n * One-line summary shown under the header when the step is completed\n * and its panel is collapsed. Typically a preview of the captured\n * data — \"Mario Rossi · 12/03/1985\".\n */\n summary?: ReactNode;\n}\n\n// A size container, so the step content can drop its indent when the\n// accordion itself is narrow (whatever the viewport).\nconst rootVariants = cva(\n 'ds:@container/stepper ds:flex ds:w-full ds:min-w-0 ds:flex-col ds:gap-[var(--spacing-sm)]',\n {\n variants: {},\n },\n);\n\nexport interface StepperAccordionProps\n extends\n Omit<\n ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>,\n 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'collapsible'\n >,\n VariantProps<typeof rootVariants> {\n /** Active step (0-indexed). The matching panel is the one that is open. */\n activeStep: number;\n /** Step specs — each one provides its own content + optional summary. */\n steps: AccordionStepSpec[];\n /**\n * Fires when the user re-opens a completed step. Upcoming steps cannot\n * be activated — their triggers are disabled. The current step cannot\n * be collapsed (Radix `collapsible=false`).\n */\n onStepChange?: (index: number) => void;\n /** Override the default `aria-label` on the list wrapper. */\n 'aria-label'?: string;\n /**\n * Consumer-supplied instance id, surfaced as `data-component-id` so an\n * agent / UI bridge can address this instance.\n */\n id?: string;\n}\n\n/**\n * Imperative handle for agent-readiness. Routes state mutations through\n * the consumer's `onStepChange`, never mutating directly.\n */\nexport interface StepperAccordionHandle {\n getCurrentStep: () => number;\n getTotalSteps: () => number;\n /** Indices of currently-open panels — singleton under Radix `type=\"single\"`. */\n getOpenSteps: () => number[];\n gotoStep: (step: number) => void;\n next: () => void;\n previous: () => void;\n}\n\n/* -------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------- */\n\nconst StepperAccordion = forwardRef<\n StepperAccordionHandle,\n StepperAccordionProps\n>(\n (\n {\n activeStep,\n steps,\n onStepChange,\n 'aria-label': ariaLabel,\n id,\n className,\n ...rest\n },\n ref,\n ) => {\n const { t } = useTranslation('ui');\n const total = steps.length;\n const clampedActive = Math.max(0, Math.min(activeStep, total - 1));\n const label = ariaLabel ?? t('navigation.stepper.label');\n const editCopy = t('navigation.stepper.edit');\n const openCopy = t('navigation.stepper.open');\n const lockedCopy = t('navigation.stepper.locked');\n const completedCopy = t('navigation.stepper.completed');\n const errorCopy = t('navigation.stepper.error');\n\n const handleValueChange = (value: string) => {\n // `collapsible=false` prevents empty-string values in practice, but the\n // primitive's type still allows one — guard anyway.\n if (!value) return;\n const index = indexFromValue(value);\n if (Number.isFinite(index) && index !== clampedActive) {\n onStepChange?.(index);\n }\n };\n\n const handle = useMemo<StepperAccordionHandle>(\n () => ({\n getCurrentStep: () => clampedActive,\n getTotalSteps: () => total,\n getOpenSteps: () => [clampedActive],\n gotoStep: (step: number) => {\n if (!onStepChange) return;\n const clamped = Math.max(0, Math.min(step, Math.max(total - 1, 0)));\n if (clamped !== clampedActive) onStepChange(clamped);\n },\n next: () => {\n if (!onStepChange) return;\n if (clampedActive < total - 1) onStepChange(clampedActive + 1);\n },\n previous: () => {\n if (!onStepChange) return;\n if (clampedActive > 0) onStepChange(clampedActive - 1);\n },\n }),\n [clampedActive, total, onStepChange],\n );\n useImperativeHandle(ref, () => handle, [handle]);\n\n return (\n <AccordionPrimitive.Root\n type=\"single\"\n value={makeValue(clampedActive)}\n onValueChange={handleValueChange}\n collapsible={false}\n // Radix renders a plain div, and aria-label is prohibited on the\n // generic role. `group` lets the label name the set of steps.\n role=\"group\"\n aria-label={label}\n id={id}\n data-component=\"stepper-accordion\"\n data-component-id={id}\n className={rootVariants({ className })}\n {...rest}\n >\n {steps.map((spec, index) => {\n const state = stateForStep(index, clampedActive, spec.status);\n const isCurrent = state === 'current' || state === 'error';\n const isUpcoming = state === 'upcoming';\n // An `unlocked` step renders as `upcoming` but stays reachable —\n // only a step that is BOTH upcoming and unreachable is locked.\n const isLocked =\n isUpcoming && !stepIsReachable(index, clampedActive, spec.status);\n const itemTone = state === 'error' ? 'error' : 'neutral';\n const stepN = t('navigation.stepper.stepN', { n: index + 1 });\n\n const indicatorContent = (() => {\n if (state === 'completed') {\n return (\n <>\n <CheckGlyph />\n <span className=\"ds:sr-only\">{completedCopy}</span>\n </>\n );\n }\n if (state === 'error') {\n return (\n <>\n <CrossGlyph />\n <span className=\"ds:sr-only\">{errorCopy}</span>\n </>\n );\n }\n return <span>{index + 1}</span>;\n })();\n\n const hint = (() => {\n if (state === 'completed') {\n return <span className={hintClasses}>{editCopy}</span>;\n }\n if (isLocked) {\n return (\n <span className={hintClasses}>\n <Lock aria-hidden=\"true\" className=\"ds:size-3\" />\n {lockedCopy}\n </span>\n );\n }\n if (isUpcoming) {\n // Reachable but empty — say so, otherwise the row reads\n // identically to a locked one and nothing signals it opens.\n return <span className={hintClasses}>{openCopy}</span>;\n }\n return null;\n })();\n\n return (\n <AccordionPrimitive.Item\n key={index}\n value={makeValue(index)}\n data-step-id={String(index)}\n className={itemVariants({ tone: itemTone })}\n >\n <AccordionPrimitive.Header className=\"ds:flex\">\n <AccordionPrimitive.Trigger\n // Locked steps (upcoming, and not marked reachable by a\n // `completed` / `error` / `unlocked` status) are *HTML*-\n // disabled — they must not be\n // reachable by Tab or by Radix's arrow-key navigation ring\n // (Radix filters `item.ref.current?.disabled`, which is\n // the HTML attribute). Current is only *ARIA*-disabled so\n // keyboard users can Tab to it as a heading anchor and\n // hear \"current step\"; Radix's `collapsible=false` makes\n // the click a no-op regardless. Setting `disabled` at the\n // Trigger rather than the Item because `...triggerProps`\n // spreads after Collapsible writes its own `disabled`\n // from context, so the Item-level disabled gets overridden.\n disabled={isLocked}\n aria-disabled={isCurrent || undefined}\n // The hint is rendered text, but `aria-label` overrides\n // element content wholesale — so the affordance has to be\n // appended here too or AT hears none of it.\n aria-label={\n state === 'completed'\n ? `${stepN}, ${editCopy}`\n : isUpcoming && !isLocked\n ? `${stepN}, ${openCopy}`\n : stepN\n }\n aria-current={isCurrent ? 'step' : undefined}\n className={triggerClasses}\n >\n <span\n aria-hidden=\"true\"\n className={indicatorVariants({ state })}\n >\n {indicatorContent}\n </span>\n <span className=\"ds:flex ds:min-w-0 ds:flex-1 ds:flex-col\">\n <span className={labelClasses(state)}>{spec.label}</span>\n {spec.description ? (\n <span className={descriptionClasses}>\n {spec.description}\n </span>\n ) : null}\n </span>\n {hint}\n {isCurrent ? null : (\n <ChevronDown\n aria-hidden=\"true\"\n className={chevronClasses}\n />\n )}\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n {spec.summary && state === 'completed' ? (\n <div className={summaryClasses}>{spec.summary}</div>\n ) : null}\n <AccordionPrimitive.Content className={contentClasses}>\n <div className={contentInnerClasses}>{spec.content}</div>\n </AccordionPrimitive.Content>\n </AccordionPrimitive.Item>\n );\n })}\n </AccordionPrimitive.Root>\n );\n },\n);\nStepperAccordion.displayName = 'StepperAccordion';\n\nexport { StepperAccordion };\n"],"names":["stateForStep","index","activeStep","status","stepIsReachable","STEP_VALUE_PREFIX","makeValue","indexFromValue","value","iconDrawClasses","CheckGlyph","jsx","CrossGlyph","jsxs","indicatorClasses","indicatorVariants","cva","itemVariants","triggerClasses","labelClasses","state","descriptionClasses","hintClasses","chevronClasses","summaryClasses","contentClasses","contentInnerClasses","rootVariants","StepperAccordion","forwardRef","steps","onStepChange","ariaLabel","id","className","rest","ref","t","useTranslation","total","clampedActive","label","editCopy","openCopy","lockedCopy","completedCopy","errorCopy","handleValueChange","handle","useMemo","step","clamped","useImperativeHandle","AccordionPrimitive","spec","isCurrent","isUpcoming","isLocked","itemTone","stepN","indicatorContent","Fragment","hint","Lock","ChevronDown"],"mappings":"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"}

package/dist/_chunks/{task-editor-Ctxsa1BY.js → task-editor-ByyRu29Y.js} RENAMED Viewed

@@ -6,14 +6,14 @@ import { A as M } from "./alert-BhCstf2h.js";
 import { B as Me } from "./button-Bn16lcFM.js";
 import { I as We } from "./icon-button-COX76Jdj.js";
 import { C as Qe } from "./combobox-U5yfO6o0.js";
-import { D as ce } from "./dialog-D52AI4nF.js";
+import { D as ce } from "./dialog-CUzbnKLw.js";
 import { D as Bt } from "./date-picker-wRAcq2lt.js";
 import { F as H } from "./form-field-Ani72sVY.js";
 import { I as Ft } from "./icon-button-group-C5hhI-R5.js";
 import { P as Pt } from "./panel-header-D_mTdhUp.js";
 import { P as Ot } from "./panel-subview-BT-Apwgb.js";
 import { R as Pe } from "./radio-BBbMdbE_.js";
-import { R as jt } from "./radio-group-BT97ty7o.js";
+import { R as jt } from "./radio-group-DicxWJXP.js";
 import { S as Mt } from "./scroll-area-ZtFCv9K7.js";
 import { S as Ke } from "./select-Ce5RMk93.js";
 import { S as He } from "./skeleton-B1KTdJ4N.js";
@@ -1238,4 +1238,4 @@ export {
   vo as T,
   lo as t
 };
-//# sourceMappingURL=task-editor-Ctxsa1BY.js.map
+//# sourceMappingURL=task-editor-ByyRu29Y.js.map