@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/stack/stack.js

@@ -1,61 +1,59 @@
-import { jsx as f } from "react/jsx-runtime";
-import * as o from "react";
-import { cva as l } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as p } from "../../../lib/utils.js";
-const m = l("flex", {
-  variants: {
-    direction: {
-      vertical: "flex-col",
-      horizontal: "flex-row"
-    },
-    gap: {
-      none: "gap-0",
-      xs: "gap-1",
-      sm: "gap-2",
-      md: "gap-4",
-      lg: "gap-6",
-      xl: "gap-8"
-    },
-    align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end",
-      stretch: "items-stretch"
-    },
-    justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between"
-    },
-    wrap: {
-      true: "flex-wrap",
-      false: "flex-nowrap"
-    }
-  },
-  defaultVariants: {
-    direction: "vertical",
-    gap: "md",
-    align: "stretch",
-    justify: "start",
-    wrap: !1
-  }
-}), d = o.forwardRef(
-  ({ className: t, direction: e, gap: a, align: r, justify: s, wrap: i, ...n }, c) => /* @__PURE__ */ f(
-    "div",
-    {
-      ref: c,
-      className: p(
-        m({ direction: e, gap: a, align: r, justify: s, wrap: i }),
-        t
-      ),
-      ...n
-    }
-  )
-);
-d.displayName = "Stack";
-export {
-  d as Stack,
-  m as stackVariants
-};
-//# sourceMappingURL=stack.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/ui/stack/stack.tsx
+var i = t("flex", {
+	variants: {
+		direction: {
+			vertical: "flex-col",
+			horizontal: "flex-row"
+		},
+		gap: {
+			none: "gap-0",
+			xs: "gap-1",
+			sm: "gap-2",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		align: {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch"
+		},
+		justify: {
+			start: "justify-start",
+			center: "justify-center",
+			end: "justify-end",
+			between: "justify-between"
+		},
+		wrap: {
+			true: "flex-wrap",
+			false: "flex-nowrap"
+		}
+	},
+	defaultVariants: {
+		direction: "vertical",
+		gap: "md",
+		align: "stretch",
+		justify: "start",
+		wrap: !1
+	}
+}), a = n.forwardRef(({ className: t, direction: n, gap: a, align: o, justify: s, wrap: c, ...l }, u) => /* @__PURE__ */ r("div", {
+	ref: u,
+	className: e(i({
+		direction: n,
+		gap: a,
+		align: o,
+		justify: s,
+		wrap: c
+	}), t),
+	...l
+}));
+a.displayName = "Stack";
+//#endregion
+export { a as Stack, i as stackVariants };
+
+//# sourceMappingURL=stack.js.map

package/dist/components/ui/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../../src/components/ui/stack/stack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported 1:1 from `@acronis-platform`'s `stack`. A flexbox layout primitive — no\n// color, just direction / gap / alignment utilities.\nconst stackVariants = cva('flex', {\n  variants: {\n    direction: {\n      vertical: 'flex-col',\n      horizontal: 'flex-row',\n    },\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      stretch: 'items-stretch',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n  },\n  defaultVariants: {\n    direction: 'vertical',\n    gap: 'md',\n    align: 'stretch',\n    justify: 'start',\n    wrap: false,\n  },\n});\n\nexport interface StackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof stackVariants> {}\n\nconst Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  ({ className, direction, gap, align, justify, wrap, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        stackVariants({ direction, gap, align, justify, wrap }),\n        className\n      )}\n      {...props}\n    />\n  )\n);\nStack.displayName = 'Stack';\n\nexport { Stack, stackVariants };\n"],"names":["stackVariants","cva","Stack","React","className","direction","gap","align","justify","wrap","props","ref","jsx","cn"],"mappings":";;;;AAOA,MAAMA,IAAgBC,EAAI,QAAQ;AAAA,EAChC,UAAU;AAAA,IACR,WAAW;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,IAEd,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,WAAW;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC,GAMKC,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,WAAAC,GAAW,KAAAC,GAAK,OAAAC,GAAO,SAAAC,GAAS,MAAAC,GAAM,GAAGC,KAASC,MAC9D,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACTb,EAAc,EAAE,WAAAK,GAAW,KAAAC,GAAK,OAAAC,GAAO,SAAAC,GAAS,MAAAC,GAAM;AAAA,QACtDL;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAGV;AACAR,EAAM,cAAc;"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/ui/stack/stack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported 1:1 from `@acronis-platform`'s `stack`. A flexbox layout primitive — no\n// color, just direction / gap / alignment utilities.\nconst stackVariants = cva('flex', {\n  variants: {\n    direction: {\n      vertical: 'flex-col',\n      horizontal: 'flex-row',\n    },\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      stretch: 'items-stretch',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n  },\n  defaultVariants: {\n    direction: 'vertical',\n    gap: 'md',\n    align: 'stretch',\n    justify: 'start',\n    wrap: false,\n  },\n});\n\nexport interface StackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof stackVariants> {}\n\nconst Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  ({ className, direction, gap, align, justify, wrap, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        stackVariants({ direction, gap, align, justify, wrap }),\n        className\n      )}\n      {...props}\n    />\n  )\n);\nStack.displayName = 'Stack';\n\nexport { Stack, stackVariants };\n"],"mappings":";;;;;AAOA,IAAM,IAAgB,EAAI,QAAQ;CAChC,UAAU;EACR,WAAW;GACT,UAAU;GACV,YAAY;EACd;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;EACX;EACA,SAAS;GACP,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,WAAW;EACX,KAAK;EACL,OAAO;EACP,SAAS;EACT,MAAM;CACR;AACF,CAAC,GAMK,IAAQ,EAAM,YACjB,EAAE,cAAW,cAAW,QAAK,UAAO,YAAS,SAAM,GAAG,KAAS,MAC9D,kBAAC,OAAD;CACO;CACL,WAAW,EACT,EAAc;EAAE;EAAW;EAAK;EAAO;EAAS;CAAK,CAAC,GACtD,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAM,cAAc"}

package/dist/components/ui/stepper/stepper.js

@@ -1,70 +1,52 @@
-import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import * as f from "react";
-import { cn as u } from "../../../lib/utils.js";
-const h = f.forwardRef(
-  ({
-    className: s,
-    children: r,
-    currentStep: l,
-    totalSteps: p,
-    current: i,
-    next: t,
-    stepLabel: n = "Step",
-    ofLabel: c = "of",
-    nextLabel: d = "Next:",
-    separatorLabel: o = ": ",
-    ...m
-  }, x) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: x,
-      "data-slot": "stepper",
-      className: u("w-full", s),
-      ...m,
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            "data-slot": "stepper-summary",
-            className: "flex flex-col gap-[var(--ui-gap-4)] text-sm leading-6 lg:hidden",
-            children: [
-              /* @__PURE__ */ e("p", { "data-slot": "stepper-current-line", children: [
-                /* @__PURE__ */ e("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: [
-                  n,
-                  " ",
-                  l,
-                  " ",
-                  c,
-                  " ",
-                  p,
-                  o
-                ] }),
-                /* @__PURE__ */ a("span", { className: "text-[var(--ui-text-on-surface-primary)]", children: i })
-              ] }),
-              t != null && /* @__PURE__ */ e("p", { "data-slot": "stepper-next-line", children: [
-                /* @__PURE__ */ e("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: [
-                  d,
-                  " "
-                ] }),
-                /* @__PURE__ */ a("span", { className: "text-[var(--ui-text-on-surface-primary)]", children: t })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ a(
-          "div",
-          {
-            "data-slot": "stepper-items",
-            className: "hidden flex-wrap content-start items-start justify-start gap-[var(--ui-gap-8)] lg:flex",
-            children: r
-          }
-        )
-      ]
-    }
-  )
-);
-h.displayName = "Stepper";
-export {
-  h as Stepper
-};
-//# sourceMappingURL=stepper.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ui/stepper/stepper.tsx
+var i = t.forwardRef(({ className: t, children: i, currentStep: a, totalSteps: o, current: s, next: c, stepLabel: l = "Step", ofLabel: u = "of", nextLabel: d = "Next:", separatorLabel: f = ": ", ...p }, m) => /* @__PURE__ */ r("div", {
+	ref: m,
+	"data-slot": "stepper",
+	className: e("w-full", t),
+	...p,
+	children: [/* @__PURE__ */ r("div", {
+		"data-slot": "stepper-summary",
+		className: "flex flex-col gap-[var(--ui-stepper-breakpoint-default-line-gap)] text-sm leading-6 lg:hidden",
+		children: [/* @__PURE__ */ r("p", {
+			"data-slot": "stepper-current-line",
+			children: [/* @__PURE__ */ r("span", {
+				className: "text-[var(--ui-stepper-breakpoint-default-label-color)]",
+				children: [
+					l,
+					" ",
+					a,
+					" ",
+					u,
+					" ",
+					o,
+					f
+				]
+			}), /* @__PURE__ */ n("span", {
+				className: "text-[var(--ui-stepper-breakpoint-default-value-color)]",
+				children: s
+			})]
+		}), c != null && /* @__PURE__ */ r("p", {
+			"data-slot": "stepper-next-line",
+			children: [/* @__PURE__ */ r("span", {
+				className: "text-[var(--ui-stepper-breakpoint-default-label-color)]",
+				children: [d, " "]
+			}), /* @__PURE__ */ n("span", {
+				className: "text-[var(--ui-stepper-breakpoint-default-value-color)]",
+				children: c
+			})]
+		})]
+	}), /* @__PURE__ */ n("div", {
+		"data-slot": "stepper-items",
+		className: "hidden flex-wrap content-start items-start justify-start gap-[var(--ui-stepper-breakpoint-lg-container-gap)] lg:flex",
+		children: i
+	})]
+}));
+i.displayName = "Stepper";
+//#endregion
+export { i as Stepper };
+
+//# sourceMappingURL=stepper.js.map

package/dist/components/ui/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../../src/components/ui/stepper/stepper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The stepper root. It renders the sequence two ways and lets CSS pick one:\n// a start-aligned, wrapping row of `StepperItem` children on wide viewports, and a\n// two-line text summary (\"Step 3 of 5: <current>\" / \"Next: <next>\") on narrow\n// ones. There is no `variant` prop and no `cva`: the only axis the design has\n// is the viewport width, which is not something JS decides here.\n//\n// ── Why a real media query, and why both trees always render ──\n// The Figma component models the two layouts as a `breakpoint` variant\n// (`0-1024` / `>1025`). In code that is a viewport media query, so it is\n// expressed with Tailwind's stock `lg:` variant (`hidden lg:flex` /\n// `flex lg:hidden`) rather than a `ResizeObserver`. `page-header.tsx`'s\n// `useRowOverflow` hook is deliberately *not* reused: that measures whether\n// content fits its own container (a content-fit problem), which is a different\n// question from \"how wide is the viewport\". A media query needs no measuring\n// pass, no hydration mismatch, and no layout thrash.\n//\n// Consequence, and it is intentional: **both subtrees are always in the DOM**,\n// and only their visibility differs. Nothing is `aria-hidden`, because which\n// tree is showing is not knowable from JS — the browser decides it in CSS.\n// That is correct rather than a compromise: `hidden` / `lg:hidden` resolve to\n// `display: none`, and a `display: none` subtree is not exposed to assistive\n// tech, so exactly one of the two is announced at any width. In jsdom, though,\n// no media query is evaluated, so unit tests see both at once.\n//\n// ── Breakpoint boundary: 1024, not 1025 ──\n// Figma's variant names say `0-1024` and `>1025`, which leaves 1024px itself\n// ambiguous and 1025 as the first \"desktop\" pixel. Tailwind's `lg:` is\n// `@media (min-width: 64rem)` = exactly 1024px (see the `@theme` block in\n// `src/styles/index.css` and `BREAKPOINT_LG` in `src/lib/breakpoints.ts`), so\n// 1024px renders the desktop row here. That 1px difference is accepted rather\n// than hand-rolling a one-off `1025px` query: the repo already pins the design\n// team's ranges to clean rem values and documents the rounding where it differs\n// (see the comments in `src/stories/breakpoints-demo.stories.tsx`), and\n// inventing a bespoke breakpoint for one component would put it out of step\n// with every other responsive surface in the kit.\n//\n// ── Token substitution (placeholder — re-point once design ships the tier) ──\n// Same situation as `StepperItem`: the design references `components/Stepper/*`\n// variables, but there is no `--ui-stepper-*` tier in\n// @acronis-platform/tokens-pd (a grep for `Stepper` across tokens-pd and the\n// design-tokens source returns nothing). Rather than hand-author values, this\n// consumes the semantic/generic tokens whose *resolved* value in\n// `packages/tokens-pd/css/default.css` matches the Figma variable exactly —\n// verified value-by-value:\n//\n//   components/Stepper/_global/list/gap      (4px)     -> --ui-gap-4\n//   (the item row's gap came through Figma as the generic `gap/gap-8`,\n//    the same 8px token StepperItem already uses internally)   -> --ui-gap-8\n//   components/Stepper/_global/prefix/color  (#61656b) -> --ui-text-on-surface-secondary\n//   components/Stepper/current/label/color   (#18191b) -> --ui-text-on-surface-primary\n//   components/Stepper/next/label/color      (#18191b) -> --ui-text-on-surface-primary\n//\n// The last two are separate Figma variables carrying an identical value, so one\n// semantic token covers both faithfully — and it is the same token StepperItem\n// already uses for its own label, which is the point.\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The `StepperItem` elements making up the sequence. Rendered in the wide\n   * (>= 1024px) layout only — the compact layout is a text summary and shows no\n   * items at all.\n   */\n  children?: React.ReactNode;\n  /** 1-based index of the step the user is on, e.g. `3`. Compact layout only. */\n  currentStep: React.ReactNode;\n  /** How many steps there are in total, e.g. `5`. Compact layout only. */\n  totalSteps: React.ReactNode;\n  /** The current step's name. Compact layout only. */\n  current: React.ReactNode;\n  /**\n   * The next step's name. Omit it — on the last step, say — and the whole\n   * \"Next: …\" line is left out rather than rendered empty. Compact layout only.\n   */\n  next?: React.ReactNode;\n  /**\n   * The word introducing the step counter. A prop, not an inlined literal, so\n   * the string can be translated (see `context/conventions.md` §\"Localization —\n   * no hardcoded labels\"): this component generates the text itself, unlike the\n   * step names, which the caller supplies.\n   */\n  stepLabel?: string;\n  /** The word joining the current step number to the total. Translatable — see `stepLabel`. */\n  ofLabel?: string;\n  /** The label introducing the next step's name. Translatable — see `stepLabel`. */\n  nextLabel?: string;\n  /**\n   * The punctuation joining the step counter to the current step's name. A prop\n   * for the same reason as `stepLabel`: the component generates it, and not every\n   * locale writes it as `\": \"` (French, say, spaces before the colon; CJK uses a\n   * full-width one).\n   */\n  separatorLabel?: string;\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      className,\n      children,\n      currentStep,\n      totalSteps,\n      current,\n      next,\n      stepLabel = 'Step',\n      ofLabel = 'of',\n      nextLabel = 'Next:',\n      separatorLabel = ': ',\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      data-slot=\"stepper\"\n      className={cn('w-full', className)}\n      {...props}\n    >\n      {/* Compact summary — the only thing visible below the `lg` breakpoint. */}\n      <div\n        data-slot=\"stepper-summary\"\n        className=\"flex flex-col gap-[var(--ui-gap-4)] text-sm leading-6 lg:hidden\"\n      >\n        <p data-slot=\"stepper-current-line\">\n          <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n            {stepLabel} {currentStep} {ofLabel} {totalSteps}\n            {separatorLabel}\n          </span>\n          <span className=\"text-[var(--ui-text-on-surface-primary)]\">\n            {current}\n          </span>\n        </p>\n        {next != null && (\n          <p data-slot=\"stepper-next-line\">\n            <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n              {nextLabel}{' '}\n            </span>\n            <span className=\"text-[var(--ui-text-on-surface-primary)]\">\n              {next}\n            </span>\n          </p>\n        )}\n      </div>\n\n      {/* The item row — hidden below `lg`, where the summary replaces it. */}\n      <div\n        data-slot=\"stepper-items\"\n        className=\"hidden flex-wrap content-start items-start justify-start gap-[var(--ui-gap-8)] lg:flex\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n);\nStepper.displayName = 'Stepper';\n\nexport { Stepper };\n"],"names":["Stepper","React","className","children","currentStep","totalSteps","current","next","stepLabel","ofLabel","nextLabel","separatorLabel","props","ref","jsxs","cn","jsx"],"mappings":";;;AAoGA,MAAMA,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,UAAUb,CAAS;AAAA,MAChC,GAAGU;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,gBAAAA,EAAC,KAAA,EAAE,aAAU,wBACX,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,8CACb,UAAA;AAAA,kBAAAN;AAAA,kBAAU;AAAA,kBAAEJ;AAAA,kBAAY;AAAA,kBAAEK;AAAA,kBAAQ;AAAA,kBAAEJ;AAAA,kBACpCM;AAAA,gBAAA,GACH;AAAA,gBACA,gBAAAK,EAAC,QAAA,EAAK,WAAU,4CACb,UAAAV,EAAA,CACH;AAAA,cAAA,GACF;AAAA,cACCC,KAAQ,QACP,gBAAAO,EAAC,KAAA,EAAE,aAAU,qBACX,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,8CACb,UAAA;AAAA,kBAAAJ;AAAA,kBAAW;AAAA,gBAAA,GACd;AAAA,gBACA,gBAAAM,EAAC,QAAA,EAAK,WAAU,4CACb,UAAAT,EAAA,CACH;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKJ,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAb;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AACAH,EAAQ,cAAc;"}
+{"version":3,"file":"stepper.js","names":[],"sources":["../../../../src/components/ui/stepper/stepper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The stepper root. It renders the sequence two ways and lets CSS pick one:\n// a start-aligned, wrapping row of `StepperItem` children on wide viewports, and a\n// two-line text summary (\"Step 3 of 5: <current>\" / \"Next: <next>\") on narrow\n// ones. There is no `variant` prop and no `cva`: the only axis the design has\n// is the viewport width, which is not something JS decides here.\n//\n// ── Why a real media query, and why both trees always render ──\n// The Figma component models the two layouts as a `breakpoint` variant\n// (`0-1024` / `>1025`). In code that is a viewport media query, so it is\n// expressed with Tailwind's stock `lg:` variant (`hidden lg:flex` /\n// `flex lg:hidden`) rather than a `ResizeObserver`. `page-header.tsx`'s\n// `useRowOverflow` hook is deliberately *not* reused: that measures whether\n// content fits its own container (a content-fit problem), which is a different\n// question from \"how wide is the viewport\". A media query needs no measuring\n// pass, no hydration mismatch, and no layout thrash.\n//\n// Consequence, and it is intentional: **both subtrees are always in the DOM**,\n// and only their visibility differs. Nothing is `aria-hidden`, because which\n// tree is showing is not knowable from JS — the browser decides it in CSS.\n// That is correct rather than a compromise: `hidden` / `lg:hidden` resolve to\n// `display: none`, and a `display: none` subtree is not exposed to assistive\n// tech, so exactly one of the two is announced at any width. In jsdom, though,\n// no media query is evaluated, so unit tests see both at once.\n//\n// ── Breakpoint boundary: 1024, not 1025 ──\n// Figma's variant names say `0-1024` and `>1025`, which leaves 1024px itself\n// ambiguous and 1025 as the first \"desktop\" pixel. Tailwind's `lg:` is\n// `@media (min-width: 64rem)` = exactly 1024px (see the `@theme` block in\n// `src/styles/index.css` and `BREAKPOINT_LG` in `src/lib/breakpoints.ts`), so\n// 1024px renders the desktop row here. That 1px difference is accepted rather\n// than hand-rolling a one-off `1025px` query: the repo already pins the design\n// team's ranges to clean rem values and documents the rounding where it differs\n// (see the comments in `src/stories/breakpoints-demo.stories.tsx`), and\n// inventing a bespoke breakpoint for one component would put it out of step\n// with every other responsive surface in the kit.\n//\n// ── Tokens — dedicated `--ui-stepper-*` tier (2026-08-24) ──\n// Re-synced from Figma: @acronis-platform/tokens-pd now ships a `Stepper` tier\n// (see `packages/tokens-pd/css/Stepper/default.css`), which replaces the\n// semantic/generic placeholder tokens (`--ui-gap-4`, `--ui-text-on-surface-*`)\n// this component used before that tier existed:\n//\n//   --ui-stepper-breakpoint-default-line-gap   -> the summary's two-line gap\n//   --ui-stepper-breakpoint-default-label-color -> the \"Step X of Y:\" / \"Next:\" prefix\n//   --ui-stepper-breakpoint-default-value-color -> the current/next step name\n//   --ui-stepper-breakpoint-lg-container-gap    -> the wide item row's gap\n//\n// The tier defines one shared `value-color`/`label-color` pair for both the\n// current-step line and the next-step line, so a single token covers both.\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The `StepperItem` elements making up the sequence. Rendered in the wide\n   * (>= 1024px) layout only — the compact layout is a text summary and shows no\n   * items at all.\n   */\n  children?: React.ReactNode;\n  /** 1-based index of the step the user is on, e.g. `3`. Compact layout only. */\n  currentStep: React.ReactNode;\n  /** How many steps there are in total, e.g. `5`. Compact layout only. */\n  totalSteps: React.ReactNode;\n  /** The current step's name. Compact layout only. */\n  current: React.ReactNode;\n  /**\n   * The next step's name. Omit it — on the last step, say — and the whole\n   * \"Next: …\" line is left out rather than rendered empty. Compact layout only.\n   */\n  next?: React.ReactNode;\n  /**\n   * The word introducing the step counter. A prop, not an inlined literal, so\n   * the string can be translated (see `context/conventions.md` §\"Localization —\n   * no hardcoded labels\"): this component generates the text itself, unlike the\n   * step names, which the caller supplies.\n   */\n  stepLabel?: string;\n  /** The word joining the current step number to the total. Translatable — see `stepLabel`. */\n  ofLabel?: string;\n  /** The label introducing the next step's name. Translatable — see `stepLabel`. */\n  nextLabel?: string;\n  /**\n   * The punctuation joining the step counter to the current step's name. A prop\n   * for the same reason as `stepLabel`: the component generates it, and not every\n   * locale writes it as `\": \"` (French, say, spaces before the colon; CJK uses a\n   * full-width one).\n   */\n  separatorLabel?: string;\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      className,\n      children,\n      currentStep,\n      totalSteps,\n      current,\n      next,\n      stepLabel = 'Step',\n      ofLabel = 'of',\n      nextLabel = 'Next:',\n      separatorLabel = ': ',\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      data-slot=\"stepper\"\n      className={cn('w-full', className)}\n      {...props}\n    >\n      {/* Compact summary — the only thing visible below the `lg` breakpoint. */}\n      <div\n        data-slot=\"stepper-summary\"\n        className=\"flex flex-col gap-[var(--ui-stepper-breakpoint-default-line-gap)] text-sm leading-6 lg:hidden\"\n      >\n        <p data-slot=\"stepper-current-line\">\n          <span className=\"text-[var(--ui-stepper-breakpoint-default-label-color)]\">\n            {stepLabel} {currentStep} {ofLabel} {totalSteps}\n            {separatorLabel}\n          </span>\n          <span className=\"text-[var(--ui-stepper-breakpoint-default-value-color)]\">\n            {current}\n          </span>\n        </p>\n        {next != null && (\n          <p data-slot=\"stepper-next-line\">\n            <span className=\"text-[var(--ui-stepper-breakpoint-default-label-color)]\">\n              {nextLabel}{' '}\n            </span>\n            <span className=\"text-[var(--ui-stepper-breakpoint-default-value-color)]\">\n              {next}\n            </span>\n          </p>\n        )}\n      </div>\n\n      {/* The item row — hidden below `lg`, where the summary replaces it. */}\n      <div\n        data-slot=\"stepper-items\"\n        className=\"hidden flex-wrap content-start items-start justify-start gap-[var(--ui-stepper-breakpoint-lg-container-gap)] lg:flex\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n);\nStepper.displayName = 'Stepper';\n\nexport { Stepper };\n"],"mappings":";;;;;AA8FA,IAAM,IAAU,EAAM,YAElB,EACE,cACA,aACA,gBACA,eACA,YACA,SACA,eAAY,QACZ,aAAU,MACV,eAAY,SACZ,oBAAiB,MACjB,GAAG,KAEL,MAEA,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EAAG,UAAU,CAAS;CACjC,GAAI;CAJN,UAAA,CAOE,kBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAFZ,UAAA,CAIE,kBAAC,KAAD;GAAG,aAAU;GAAb,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACG;KAAU;KAAE;KAAY;KAAE;KAAQ;KAAE;KACpC;IACG;GACN,CAAA,GAAA,kBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA,CACL;EACF,CAAA,GAAA,KAAQ,QACP,kBAAC,KAAD;GAAG,aAAU;GAAb,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,GAAW,GACR;GACN,CAAA,GAAA,kBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA,CACL;EAEF,CAAA,CAAA;CAGL,CAAA,GAAA,kBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAET;CACE,CAAA,CACF;AAET,CAAA,CAAA;AACA,EAAQ,cAAc"}

package/dist/components/ui/stepper-item/stepper-item.js

@@ -1,97 +1,85 @@
-import { jsxs as p, Fragment as m, jsx as d } from "react/jsx-runtime";
-import * as l from "react";
-import { mergeProps as v } from "@base-ui/react/merge-props";
-import { useRender as f } from "@base-ui/react/use-render";
-import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as x } from "../../../lib/utils.js";
-const b = g(
-  "inline-flex items-center gap-[var(--ui-gap-8)] rounded-lg px-[var(--ui-gap-16)] py-[var(--ui-gap-8)] text-sm leading-6 outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
-  {
-    variants: {
-      variant: {
-        current: "bg-[var(--ui-background-surface-active)] text-[var(--ui-text-on-surface-primary)]",
-        completed: "text-[var(--ui-text-on-surface-primary)]",
-        future: "pointer-events-none text-[var(--ui-text-on-surface-disabled)]"
-      },
-      // Declared as an axis so the variant x state matrix below can key off it;
-      // on its own it paints nothing, because only `completed` reacts to it.
-      state: {
-        idle: "",
-        hover: "",
-        active: ""
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "completed",
-        state: "hover",
-        class: "bg-[var(--ui-background-surface-hover)]"
-      },
-      {
-        variant: "completed",
-        state: "active",
-        class: "bg-[var(--ui-background-surface-active)]"
-      }
-    ],
-    defaultVariants: {
-      variant: "current",
-      state: "idle"
-    }
-  }
-), h = l.forwardRef(
-  ({
-    className: i,
-    variant: e = "current",
-    state: r = "idle",
-    avatar: s,
-    label: t,
-    render: a,
-    children: n,
-    ...o
-  }, u) => {
-    const c = {
-      "data-slot": "stepper-item",
-      "data-variant": e,
-      "data-state": r,
-      ...e === "future" ? {
-        "aria-disabled": !0,
-        // `pointer-events-none` only stops the mouse. Without this, a step
-        // composed as a real control (`render={<button />}`) would still be
-        // reachable by Tab and activatable by Enter/Space, which contradicts
-        // what `aria-disabled` promises. A consumer prop still wins — `props`
-        // is merged after these.
-        tabIndex: -1,
-        // ARIA 1.2: `aria-disabled` on an element with no widget role is not
-        // announced, and the default rendering here is a plain `<div>`. Give
-        // it an explicit role so "unavailable" actually reaches assistive
-        // tech — the same fix `BreadcrumbPage` applies to the current-page
-        // `<span>`. Skipped when the consumer composes a real element via
-        // `render`, which brings its own (correct) role.
-        ...a ? {} : { role: "link" }
-      } : {}
-    };
-    return f({
-      render: a,
-      ref: u,
-      defaultTagName: "div",
-      props: v(
-        {
-          ...c,
-          className: x(b({ variant: e, state: r }), i),
-          children: /* @__PURE__ */ p(m, { children: [
-            s,
-            t != null && /* @__PURE__ */ d("span", { className: "min-w-0 truncate", children: t }),
-            n
-          ] })
-        },
-        o
-      )
-    });
-  }
-);
-h.displayName = "StepperItem";
-export {
-  h as StepperItem,
-  b as stepperItemVariants
-};
-//# sourceMappingURL=stepper-item.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRender as o } from "@base-ui/react/use-render";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+//#region src/components/ui/stepper-item/stepper-item.tsx
+var c = t("ui-stepper-item-global-container-text-style inline-flex items-center gap-[var(--ui-stepper-item-global-container-gap)] rounded-[var(--ui-stepper-item-global-container-border-radius)] border-[length:var(--ui-stepper-item-current-container-border-width)] border-solid border-transparent ps-[var(--ui-stepper-item-global-container-padding-l)] pe-[var(--ui-stepper-item-global-container-padding-r)] py-[var(--ui-stepper-item-global-container-padding-y)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]", {
+	variants: {
+		variant: {
+			current: "border-[var(--ui-stepper-item-current-container-border-color)] bg-[var(--ui-stepper-item-current-container-color)] text-[var(--ui-stepper-item-current-label-color)]",
+			completed: "text-[var(--ui-stepper-item-completed-label-color)]",
+			future: "pointer-events-none bg-[var(--ui-stepper-item-future-container-color)] text-[var(--ui-stepper-item-future-label-color)]"
+		},
+		state: {
+			idle: "",
+			hover: "",
+			active: "",
+			focus: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "completed",
+			state: "idle",
+			class: "bg-[var(--ui-stepper-item-completed-container-color-idle)]"
+		},
+		{
+			variant: "completed",
+			state: "hover",
+			class: "bg-[var(--ui-stepper-item-completed-container-color-hover)]"
+		},
+		{
+			variant: "completed",
+			state: "active",
+			class: "bg-[var(--ui-stepper-item-completed-container-color-active)]"
+		},
+		{
+			variant: "completed",
+			state: "focus",
+			class: "ring-[3px] ring-[var(--ui-stepper-item-completed-container-color-focus-ring)]"
+		}
+	],
+	defaultVariants: {
+		variant: "current",
+		state: "idle"
+	}
+}), l = n.forwardRef(({ className: t, variant: n = "current", state: l = "idle", avatar: u, label: d, render: f, children: p, ...m }, h) => {
+	let g = {
+		"data-slot": "stepper-item",
+		"data-variant": n,
+		"data-state": l,
+		...n === "future" ? {
+			"aria-disabled": !0,
+			tabIndex: -1,
+			...f ? {} : { role: "link" }
+		} : {}
+	};
+	return o({
+		render: f,
+		ref: h,
+		defaultTagName: "div",
+		props: s({
+			...g,
+			className: e(c({
+				variant: n,
+				state: l
+			}), t),
+			children: /* @__PURE__ */ a(r, { children: [
+				u,
+				d != null && /* @__PURE__ */ i("span", {
+					className: "min-w-0 truncate",
+					children: d
+				}),
+				p
+			] })
+		}, m)
+	});
+});
+l.displayName = "StepperItem";
+//#endregion
+export { l as StepperItem, c as stepperItemVariants };
+
+//# sourceMappingURL=stepper-item.js.map

package/dist/components/ui/stepper-item/stepper-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-item.js","sources":["../../../../src/components/ui/stepper-item/stepper-item.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// One step in a stepper: an Avatar marker (the step's number, icon, or image)\n// followed by the step name. `variant` is the step's structural role in the\n// sequence — `current` (where the user is), `completed` (already passed, and so\n// realistically clickable to jump back), `future` (not reachable yet). `state`\n// is the interaction state, and it only produces a different look on a\n// `completed` step: `current` is always painted in its highlighted look and\n// `future` is always painted disabled, which is exactly what the Figma component\n// set models — only five state x variant combos exist there\n// (active+current, idle/hover/active+completed, disabled+future).\n//\n// The Avatar is fully consumer-supplied and consumer-styled: this component\n// renders the element it is given verbatim and never sizes, tints, or recolors\n// it. That is why the Figma variables that color the digit *inside* the circle\n// (`components/Stepper/Item/{current,future}/label/color/*`) are deliberately\n// not consumed here — they belong to whatever the caller puts in the `avatar`\n// slot.\n//\n// ── Token substitution (placeholder — re-point once design ships the tier) ──\n// The design references `components/Stepper/Item/*`, which is not \"ready for\n// dev\": there is no `--ui-stepper-item-*` tier in @acronis-platform/tokens-pd\n// (a grep for `Stepper` across tokens-pd and the design-tokens source returns\n// nothing). Rather than hand-author values, this consumes the semantic/generic\n// tokens whose *resolved* value in `packages/tokens-pd/css/default.css` matches\n// the Figma variable exactly — verified value-by-value:\n//\n//   components/Stepper/Item/_global/container/gap          (8px)     -> --ui-gap-8\n//   components/Stepper/Item/_global/container/paddingY      (8px)     -> --ui-gap-8\n//   (padding-x came through Figma as the generic `gap/gap-16`)        -> --ui-gap-16\n//   components/Stepper/Item/_global/container/borderRadius  (8px)     -> `rounded-lg`\n//   components/Stepper/Item/_global/container/color/active  (#e2ebf5) -> --ui-background-surface-active\n//   components/Stepper/Item/_global/container/color/hover   (#eef2f7) -> --ui-background-surface-hover\n//   semantics/colors/text/onSurface/primary                 (#18191b) -> --ui-text-on-surface-primary\n//   semantics/colors/text/onSurface/disabled                (#afb2b6) -> --ui-text-on-surface-disabled\n//\n// The radius is the one exception that stays a static Tailwind utility: tokens-pd\n// has no generic radius scale at all — every `*border-radius*` token is\n// component-owned (e.g. `--ui-card-filter-global-container-border-radius`) — so\n// there is nothing honest to point at, and inventing a token name would be worse\n// than an 8px utility. Figma also defines three separate\n// `completed/label/color/{idle,hover,active}` variables, but all three carry the\n// identical `#18191b`, so the single semantic token covers them faithfully.\n//\n// `focus-visible` lives on the base class rather than a variant: the default\n// `<div>` is never focusable, so the ring only ever appears on a step composed\n// as a real control via `render` — the same 3px `--ui-focus-primary` ring\n// `CardFilter` and `BreadcrumbLink` use.\nconst stepperItemVariants = cva(\n  'inline-flex items-center gap-[var(--ui-gap-8)] rounded-lg px-[var(--ui-gap-16)] py-[var(--ui-gap-8)] text-sm leading-6 outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  {\n    variants: {\n      variant: {\n        current:\n          'bg-[var(--ui-background-surface-active)] text-[var(--ui-text-on-surface-primary)]',\n        completed: 'text-[var(--ui-text-on-surface-primary)]',\n        future:\n          'pointer-events-none text-[var(--ui-text-on-surface-disabled)]',\n      },\n      // Declared as an axis so the variant x state matrix below can key off it;\n      // on its own it paints nothing, because only `completed` reacts to it.\n      state: {\n        idle: '',\n        hover: '',\n        active: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'completed',\n        state: 'hover',\n        class: 'bg-[var(--ui-background-surface-hover)]',\n      },\n      {\n        variant: 'completed',\n        state: 'active',\n        class: 'bg-[var(--ui-background-surface-active)]',\n      },\n    ],\n    defaultVariants: {\n      variant: 'current',\n      state: 'idle',\n    },\n  }\n);\n\n/** Kept in lockstep with the `cva` axes above. */\nexport type StepperItemVariant = NonNullable<\n  VariantProps<typeof stepperItemVariants>['variant']\n>;\nexport type StepperItemState = NonNullable<\n  VariantProps<typeof stepperItemVariants>['state']\n>;\n\nexport interface StepperItemProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * The step's structural role in the sequence. Drives the container background\n   * and the label color. Defaults to `current` for prop ergonomics — in a real\n   * sequence every step declares its own.\n   */\n  variant?: StepperItemVariant;\n  /**\n   * Interaction state. Only produces a different look when `variant` is\n   * `completed` (`idle` has no background, `hover` and `active` paint one).\n   * Ignored for `current`, which always renders in its highlighted look, and for\n   * `future`, which always renders disabled and non-interactive.\n   */\n  state?: StepperItemState;\n  /**\n   * The step's marker — required, and entirely the caller's to compose. Pass any\n   * `Avatar` composition (color scheme, initials / icon / image, size overrides);\n   * this component renders it verbatim and never styles it.\n   */\n  avatar: React.ReactElement;\n  /** The step name. */\n  label?: React.ReactNode;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. a `<button>`, since a completed step is usually a way\n   * back to an earlier step.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst StepperItem = React.forwardRef<HTMLDivElement, StepperItemProps>(\n  (\n    {\n      className,\n      variant = 'current',\n      state = 'idle',\n      avatar,\n      label,\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Hoisted out of the `mergeProps` literal: `data-*` keys aren't part of the\n    // Base UI element prop type, so they only pass the excess-property check\n    // when spread in (same shape as CardFilter's `data-selected`).\n    const attributes = {\n      'data-slot': 'stepper-item',\n      'data-variant': variant,\n      'data-state': state,\n      ...(variant === 'future'\n        ? {\n            'aria-disabled': true,\n            // `pointer-events-none` only stops the mouse. Without this, a step\n            // composed as a real control (`render={<button />}`) would still be\n            // reachable by Tab and activatable by Enter/Space, which contradicts\n            // what `aria-disabled` promises. A consumer prop still wins — `props`\n            // is merged after these.\n            tabIndex: -1,\n            // ARIA 1.2: `aria-disabled` on an element with no widget role is not\n            // announced, and the default rendering here is a plain `<div>`. Give\n            // it an explicit role so \"unavailable\" actually reaches assistive\n            // tech — the same fix `BreadcrumbPage` applies to the current-page\n            // `<span>`. Skipped when the consumer composes a real element via\n            // `render`, which brings its own (correct) role.\n            ...(render ? {} : { role: 'link' }),\n          }\n        : {}),\n    };\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          ...attributes,\n          className: cn(stepperItemVariants({ variant, state }), className),\n          children: (\n            <>\n              {avatar}\n              {label != null && (\n                <span className=\"min-w-0 truncate\">{label}</span>\n              )}\n              {children}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nStepperItem.displayName = 'StepperItem';\n\nexport { StepperItem, stepperItemVariants };\n"],"names":["stepperItemVariants","cva","StepperItem","React","className","variant","state","avatar","label","render","children","props","ref","attributes","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAuDA,MAAMA,IAAsBC;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WAAW;AAAA,QACX,QACE;AAAA,MAAA;AAAA;AAAA;AAAA,MAIJ,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAyCMC,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAa;AAAA,MACjB,aAAa;AAAA,MACb,gBAAgBR;AAAA,MAChB,cAAcC;AAAA,MACd,GAAID,MAAY,WACZ;AAAA,QACE,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOV,GAAII,IAAS,CAAA,IAAK,EAAE,MAAM,OAAA;AAAA,MAAO,IAEnC,CAAA;AAAA,IAAC;AAGP,WAAOK,EAAU;AAAA,MACf,QAAAL;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOG;AAAA,QACL;AAAA,UACE,GAAGF;AAAA,UACH,WAAWG,EAAGhB,EAAoB,EAAE,SAAAK,GAAS,OAAAC,EAAA,CAAO,GAAGF,CAAS;AAAA,UAChE,UACE,gBAAAa,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAX;AAAA,YACAC,KAAS,QACR,gBAAAW,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,YAE3CE;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,QAGJC;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAT,EAAY,cAAc;"}
+{"version":3,"file":"stepper-item.js","names":[],"sources":["../../../../src/components/ui/stepper-item/stepper-item.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// One step in a stepper: an Avatar marker (the step's number, icon, or image)\n// followed by the step name. `variant` is the step's structural role in the\n// sequence — `current` (where the user is, highlighted with a fill and border),\n// `completed` (already passed, and so realistically clickable to jump back —\n// its container reacts to `state`), `future` (not reachable yet, always\n// disabled). `state` is the interaction look and only paints anything on a\n// `completed` step: `current` is always rendered highlighted and `future` is\n// always rendered disabled, which is exactly what the Figma component set\n// models.\n//\n// The Avatar is fully consumer-supplied and consumer-styled: this component\n// renders the element it is given verbatim and never sizes, tints, or recolors\n// it. Figma's `current`/`future` avatars DO recolor the digit *inside* the\n// circle to `--ui-stepper-item-{current,future}-label-color` — the exact same\n// token this component uses for the step name — overriding Avatar's own\n// per-scheme label color (verified directly in the Figma reference markup: the\n// digit's `text-[color:…]` references `components/Stepper/Item/{current,\n// future}/label/color`, not `components/Avatar/label/color/*`). Because the\n// marker is a caller-owned slot, that override is the caller's job, not this\n// component's — compose it as\n// `<Avatar className=\"text-[var(--ui-stepper-item-current-label-color)]\" …>`\n// (see the stories/demo for the current and future variants). `completed`'s\n// checkmark is a fixed icon asset, not text, so it needs no such override.\n//\n// ── Tokens — dedicated `--ui-stepper-item-*` tier (2026-08-24) ──\n// Re-synced from Figma: @acronis-platform/tokens-pd now ships a `Stepper` tier\n// (see `packages/tokens-pd/css/Stepper/default.css`), which replaces the\n// semantic/generic placeholder tokens (`--ui-background-surface-*`,\n// `--ui-text-on-surface-*`) this component used before that tier existed. The\n// tier's `global-container-padding-{l,r}` are asymmetric (8px / 16px) — the\n// start side sits closer to the avatar, the end side gives the label room — so\n// padding is split rather than collapsed into the tier's single\n// `global-container-padding-x` token (8px, matching only the start side) or a\n// `px-*` utility. Mapped with logical `ps-`/`pe-` so the asymmetry mirrors\n// with the flex order under `dir=\"rtl\"` (Figma's `paddingLeft/Right` naming\n// describes its LTR frame, not a physical side).\n//\n// The label's typography comes from the same tier as a generated *class*\n// (`.ui-stepper-item-global-container-text-style` — family / 14px / 500 / 24px /\n// letter-spacing) rather than as `--ui-*` custom properties, so it is applied\n// verbatim by name, the way `Alert`, `InputOTP`, and the sidebars apply theirs.\n// Transcribing it into discrete utilities would silently drop the properties\n// that have no utility here (family, letter-spacing) and drift when the tier\n// changes.\n//\n// The border width is reserved on the *base* class with a transparent color, not\n// declared only on `current`: the container is an inline-flex box with auto\n// width/height, so a border that exists on one variant and not the others makes\n// the current step render ~2px larger than its siblings and knocks the row's\n// avatars and labels out of alignment. Every variant therefore reserves the same\n// box, and only `current` paints the border color (the same shape `tag.tsx`\n// uses). `current`'s width token is the shared one because it's the only width\n// the tier ships.\nconst stepperItemVariants = cva(\n  'ui-stepper-item-global-container-text-style inline-flex items-center gap-[var(--ui-stepper-item-global-container-gap)] rounded-[var(--ui-stepper-item-global-container-border-radius)] border-[length:var(--ui-stepper-item-current-container-border-width)] border-solid border-transparent ps-[var(--ui-stepper-item-global-container-padding-l)] pe-[var(--ui-stepper-item-global-container-padding-r)] py-[var(--ui-stepper-item-global-container-padding-y)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  {\n    variants: {\n      variant: {\n        current:\n          'border-[var(--ui-stepper-item-current-container-border-color)] bg-[var(--ui-stepper-item-current-container-color)] text-[var(--ui-stepper-item-current-label-color)]',\n        completed: 'text-[var(--ui-stepper-item-completed-label-color)]',\n        future:\n          'pointer-events-none bg-[var(--ui-stepper-item-future-container-color)] text-[var(--ui-stepper-item-future-label-color)]',\n      },\n      // Declared as an axis so the variant x state matrix below can key off it;\n      // on its own it paints nothing, because only `completed` reacts to it.\n      // Every state — `idle` included — gets its own token in that matrix, so a\n      // brand override on any one of them is honored (the convention in\n      // `context/conventions.md`: wire each state to its own token even when the\n      // default brand's value happens to match another's).\n      state: {\n        idle: '',\n        hover: '',\n        active: '',\n        focus: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'completed',\n        state: 'idle',\n        class: 'bg-[var(--ui-stepper-item-completed-container-color-idle)]',\n      },\n      {\n        variant: 'completed',\n        state: 'hover',\n        class: 'bg-[var(--ui-stepper-item-completed-container-color-hover)]',\n      },\n      {\n        variant: 'completed',\n        state: 'active',\n        class: 'bg-[var(--ui-stepper-item-completed-container-color-active)]',\n      },\n      {\n        // `-focus-ring` resolves to the exact same value as `--ui-focus-primary`\n        // (verified in tokens-pd) — it names a ring color, not a fill, so this\n        // renders the same 3px ring `focus-visible` already draws automatically\n        // on a composed control, rather than a solid background.\n        variant: 'completed',\n        state: 'focus',\n        class:\n          'ring-[3px] ring-[var(--ui-stepper-item-completed-container-color-focus-ring)]',\n      },\n    ],\n    defaultVariants: {\n      variant: 'current',\n      state: 'idle',\n    },\n  }\n);\n\n/** Kept in lockstep with the `cva` axes above. */\nexport type StepperItemVariant = NonNullable<\n  VariantProps<typeof stepperItemVariants>['variant']\n>;\nexport type StepperItemState = NonNullable<\n  VariantProps<typeof stepperItemVariants>['state']\n>;\n\nexport interface StepperItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * The step's structural role in the sequence. Drives the container background\n   * and the label color. Defaults to `current` for prop ergonomics — in a real\n   * sequence every step declares its own.\n   */\n  variant?: StepperItemVariant;\n  /**\n   * Interaction state. Only produces a different look when `variant` is\n   * `completed` — each of `idle`, `hover`, `active`, and `focus` is wired to its\n   * own token, so a brand can style any of them independently. Ignored for\n   * `current`, which always renders in its highlighted look, and for `future`,\n   * which always renders disabled and non-interactive.\n   */\n  state?: StepperItemState;\n  /**\n   * The step's marker — required, and entirely the caller's to compose. Pass any\n   * `Avatar` composition (color scheme, initials / icon / image, size overrides);\n   * this component renders it verbatim and never styles it.\n   */\n  avatar: React.ReactElement;\n  /** The step name. */\n  label?: React.ReactNode;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. a `<button>`, since a completed step is usually a way\n   * back to an earlier step.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst StepperItem = React.forwardRef<HTMLDivElement, StepperItemProps>(\n  (\n    {\n      className,\n      variant = 'current',\n      state = 'idle',\n      avatar,\n      label,\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Hoisted out of the `mergeProps` literal: `data-*` keys aren't part of the\n    // Base UI element prop type, so they only pass the excess-property check\n    // when spread in (same shape as CardFilter's `data-selected`).\n    const attributes = {\n      'data-slot': 'stepper-item',\n      'data-variant': variant,\n      'data-state': state,\n      ...(variant === 'future'\n        ? {\n            'aria-disabled': true,\n            // `pointer-events-none` only stops the mouse. Without this, a step\n            // composed as a real control (`render={<button />}`) would still be\n            // reachable by Tab and activatable by Enter/Space, which contradicts\n            // what `aria-disabled` promises. A consumer prop still wins — `props`\n            // is merged after these.\n            tabIndex: -1,\n            // ARIA 1.2: `aria-disabled` on an element with no widget role is not\n            // announced, and the default rendering here is a plain `<div>`. Give\n            // it an explicit role so \"unavailable\" actually reaches assistive\n            // tech — the same fix `BreadcrumbPage` applies to the current-page\n            // `<span>`. Skipped when the consumer composes a real element via\n            // `render`, which brings its own (correct) role.\n            ...(render ? {} : { role: 'link' }),\n          }\n        : {}),\n    };\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          ...attributes,\n          className: cn(stepperItemVariants({ variant, state }), className),\n          children: (\n            <>\n              {avatar}\n              {label != null && (\n                <span className=\"min-w-0 truncate\">{label}</span>\n              )}\n              {children}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nStepperItem.displayName = 'StepperItem';\n\nexport { StepperItem, stepperItemVariants };\n"],"mappings":";;;;;;;;AA8DA,IAAM,IAAsB,EAC1B,whBACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WAAW;GACX,QACE;EACJ;EAOA,OAAO;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,OAAO;EACT;EACA;GACE,SAAS;GACT,OAAO;GACP,OAAO;EACT;EACA;GACE,SAAS;GACT,OAAO;GACP,OAAO;EACT;EACA;GAKE,SAAS;GACT,OAAO;GACP,OACE;EACJ;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF,GAyCM,IAAc,EAAM,YAEtB,EACE,cACA,aAAU,WACV,WAAQ,QACR,WACA,UACA,WACA,aACA,GAAG,KAEL,MACG;CAIH,IAAM,IAAa;EACjB,aAAa;EACb,gBAAgB;EAChB,cAAc;EACd,GAAI,MAAY,WACZ;GACE,iBAAiB;GAMjB,UAAU;GAOV,GAAI,IAAS,CAAC,IAAI,EAAE,MAAM,OAAO;EACnC,IACA,CAAC;CACP;CAEA,OAAO,EAAU;EACf;EACA;EACA,gBAAgB;EAChB,OAAO,EACL;GACE,GAAG;GACH,WAAW,EAAG,EAAoB;IAAE;IAAS;GAAM,CAAC,GAAG,CAAS;GAChE,UACE,kBAAA,GAAA,EAAA,UAAA;IACG;IACA,KAAS,QACR,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA;IAAY,CAAA;IAEjD;GACD,EAAA,CAAA;EAEN,GACA,CACF;CACF,CAAC;AACH,CACF;AACA,EAAY,cAAc"}