@acronis-platform/ui-react 2.0.0 → 4.0.0

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

@@ -1,52 +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(
+import { cn as x } from "../../../lib/utils.js";
+const v = f.forwardRef(
   ({
-    className: s,
-    children: r,
-    currentStep: l,
-    totalSteps: p,
+    className: r,
+    children: l,
+    currentStep: p,
+    totalSteps: s,
     current: i,
     next: t,
     stepLabel: n = "Step",
-    ofLabel: c = "of",
+    ofLabel: o = "of",
     nextLabel: d = "Next:",
-    separatorLabel: o = ": ",
+    separatorLabel: c = ": ",
     ...m
-  }, x) => /* @__PURE__ */ e(
+  }, u) => /* @__PURE__ */ e(
     "div",
     {
-      ref: x,
+      ref: u,
       "data-slot": "stepper",
-      className: u("w-full", s),
+      className: x("w-full", r),
       ...m,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
             "data-slot": "stepper-summary",
-            className: "flex flex-col gap-[var(--ui-gap-4)] text-sm leading-6 lg:hidden",
+            className: "flex flex-col gap-[var(--ui-stepper-breakpoint-default-line-gap)] 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: [
+                /* @__PURE__ */ e("span", { className: "text-[var(--ui-stepper-breakpoint-default-label-color)]", children: [
                   n,
                   " ",
-                  l,
+                  p,
                   " ",
-                  c,
+                  o,
                   " ",
-                  p,
-                  o
+                  s,
+                  c
                 ] }),
-                /* @__PURE__ */ a("span", { className: "text-[var(--ui-text-on-surface-primary)]", children: i })
+                /* @__PURE__ */ a("span", { className: "text-[var(--ui-stepper-breakpoint-default-value-color)]", 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: [
+                /* @__PURE__ */ e("span", { className: "text-[var(--ui-stepper-breakpoint-default-label-color)]", children: [
                   d,
                   " "
                 ] }),
-                /* @__PURE__ */ a("span", { className: "text-[var(--ui-text-on-surface-primary)]", children: t })
+                /* @__PURE__ */ a("span", { className: "text-[var(--ui-stepper-breakpoint-default-value-color)]", children: t })
               ] })
             ]
           }
@@ -55,16 +55,16 @@ const h = f.forwardRef(
           "div",
           {
             "data-slot": "stepper-items",
-            className: "hidden flex-wrap content-start items-start justify-start gap-[var(--ui-gap-8)] lg:flex",
-            children: r
+            className: "hidden flex-wrap content-start items-start justify-start gap-[var(--ui-stepper-breakpoint-lg-container-gap)] lg:flex",
+            children: l
           }
         )
       ]
     }
   )
 );
-h.displayName = "Stepper";
+v.displayName = "Stepper";
 export {
-  h as Stepper
+  v 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","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"],"names":["Stepper","React","className","children","currentStep","totalSteps","current","next","stepLabel","ofLabel","nextLabel","separatorLabel","props","ref","jsxs","cn","jsx"],"mappings":";;;AA8FA,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,2DACb,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,2DACb,UAAAV,EAAA,CACH;AAAA,cAAA,GACF;AAAA,cACCC,KAAQ,QACP,gBAAAO,EAAC,KAAA,EAAE,aAAU,qBACX,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,2DACb,UAAA;AAAA,kBAAAJ;AAAA,kBAAW;AAAA,gBAAA,GACd;AAAA,gBACA,gBAAAM,EAAC,QAAA,EAAK,WAAU,2DACb,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;"}

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

@@ -1,36 +1,55 @@
-import { jsxs as p, Fragment as m, jsx as d } from "react/jsx-runtime";
-import * as l from "react";
+import { jsxs as l, Fragment as m, jsx as u } from "react/jsx-runtime";
+import * as d from "react";
 import { mergeProps as v } from "@base-ui/react/merge-props";
-import { useRender as f } from "@base-ui/react/use-render";
+import { useRender as b } 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)]",
+import { cn as f } from "../../../lib/utils.js";
+const x = g(
+  "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: "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)]"
+        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)]"
       },
       // 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.
+      // Every state — `idle` included — gets its own token in that matrix, so a
+      // brand override on any one of them is honored (the convention in
+      // `context/conventions.md`: wire each state to its own token even when the
+      // default brand's value happens to match another's).
       state: {
         idle: "",
         hover: "",
-        active: ""
+        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-background-surface-hover)]"
+        class: "bg-[var(--ui-stepper-item-completed-container-color-hover)]"
       },
       {
         variant: "completed",
         state: "active",
-        class: "bg-[var(--ui-background-surface-active)]"
+        class: "bg-[var(--ui-stepper-item-completed-container-color-active)]"
+      },
+      {
+        // `-focus-ring` resolves to the exact same value as `--ui-focus-primary`
+        // (verified in tokens-pd) — it names a ring color, not a fill, so this
+        // renders the same 3px ring `focus-visible` already draws automatically
+        // on a composed control, rather than a solid background.
+        variant: "completed",
+        state: "focus",
+        class: "ring-[3px] ring-[var(--ui-stepper-item-completed-container-color-focus-ring)]"
       }
     ],
     defaultVariants: {
@@ -38,17 +57,17 @@ const b = g(
       state: "idle"
     }
   }
-), h = l.forwardRef(
+), h = d.forwardRef(
   ({
     className: i,
     variant: e = "current",
     state: r = "idle",
-    avatar: s,
+    avatar: o,
     label: t,
     render: a,
     children: n,
-    ...o
-  }, u) => {
+    ...p
+  }, s) => {
     const c = {
       "data-slot": "stepper-item",
       "data-variant": e,
@@ -70,21 +89,21 @@ const b = g(
         ...a ? {} : { role: "link" }
       } : {}
     };
-    return f({
+    return b({
       render: a,
-      ref: u,
+      ref: s,
       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 }),
+          className: f(x({ variant: e, state: r }), i),
+          children: /* @__PURE__ */ l(m, { children: [
+            o,
+            t != null && /* @__PURE__ */ u("span", { className: "min-w-0 truncate", children: t }),
             n
           ] })
         },
-        o
+        p
       )
     });
   }
@@ -92,6 +111,6 @@ const b = g(
 h.displayName = "StepperItem";
 export {
   h as StepperItem,
-  b as stepperItemVariants
+  x 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","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"],"names":["stepperItemVariants","cva","StepperItem","React","className","variant","state","avatar","label","render","children","props","ref","attributes","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AA8DA,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;AAAA;AAAA;AAAA;AAAA,MAQJ,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;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,MAET;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET;AAAA;AAAA;AAAA;AAAA;AAAA,QAKE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OACE;AAAA,MAAA;AAAA,IACJ;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;"}

package/dist/components/ui/table/table.js

@@ -1,12 +1,12 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import * as i from "react";
 import { ArrowUpIcon as u, ArrowDownIcon as v, ArrowsDownUpIcon as g } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as o } from "../../../lib/utils.js";
-const m = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ r(
+import { cn as r } from "../../../lib/utils.js";
+const m = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ o(
   "table",
   {
     ref: l,
-    className: o(
+    className: r(
       "w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]",
       a
     ),
@@ -14,22 +14,22 @@ const m = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r("div", {
   }
 ) }));
 m.displayName = "Table";
-const h = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r("thead", { ref: l, className: o(a), ...e }));
+const h = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o("thead", { ref: l, className: r(a), ...e }));
 h.displayName = "TableHeader";
-const p = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
+const p = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "tbody",
   {
     ref: l,
-    className: o("[&_tr:last-child]:border-0", a),
+    className: r("[&_tr:last-child]:border-0", a),
     ...e
   }
 ));
 p.displayName = "TableBody";
-const f = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
+const f = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "tfoot",
   {
     ref: l,
-    className: o(
+    className: r(
       "border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0",
       a
     ),
@@ -38,12 +38,12 @@ const f = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
 ));
 f.displayName = "TableFooter";
 const w = i.forwardRef(
-  ({ className: a, selected: e, ...l }, t) => /* @__PURE__ */ r(
+  ({ className: a, selected: e, ...l }, t) => /* @__PURE__ */ o(
     "tr",
     {
       ref: t,
       "data-state": e ? "selected" : void 0,
-      className: o(
+      className: r(
         "border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]",
         // The design documents a keyboard-nav focus state on the row itself
         // (a ring spanning the full row). Rows aren't focusable by default, so
@@ -58,7 +58,7 @@ const w = i.forwardRef(
 w.displayName = "TableRow";
 function x({ direction: a }) {
   const e = "size-[var(--ui-table-header-sort-icon-size)]";
-  return a === "asc" ? /* @__PURE__ */ r(u, { className: o(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ r(v, { className: o(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ r(g, { className: o(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
+  return a === "asc" ? /* @__PURE__ */ o(u, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ o(v, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ o(g, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
 }
 const y = i.forwardRef(
   ({
@@ -69,12 +69,12 @@ const y = i.forwardRef(
     onSort: s,
     wrap: c,
     ...d
-  }, b) => /* @__PURE__ */ r(
+  }, b) => /* @__PURE__ */ o(
     "th",
     {
       ref: b,
       "aria-sort": t === "asc" ? "ascending" : t === "desc" ? "descending" : l ? "none" : void 0,
-      className: o(
+      className: r(
         "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0",
         c ? "whitespace-normal" : "h-[var(--ui-table-global-cell-min-height)]",
         // Per the design, a sortable header tints the whole cell on hover/press
@@ -91,7 +91,7 @@ const y = i.forwardRef(
           className: "flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none",
           children: [
             e,
-            /* @__PURE__ */ r(x, { direction: t })
+            /* @__PURE__ */ o(x, { direction: t })
           ]
         }
       ) : e
@@ -100,12 +100,12 @@ const y = i.forwardRef(
 );
 y.displayName = "TableHead";
 const N = i.forwardRef(
-  ({ className: a, wrap: e, ...l }, t) => /* @__PURE__ */ r(
+  ({ className: a, wrap: e, ...l }, t) => /* @__PURE__ */ o(
     "td",
     {
       ref: t,
-      className: o(
-        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] [&:has([role=checkbox])]:pe-0",
+      className: r(
+        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0",
         e ? "whitespace-normal" : "h-[var(--ui-table-global-cell-min-height)]",
         a
       ),
@@ -114,12 +114,12 @@ const N = i.forwardRef(
   )
 );
 N.displayName = "TableCell";
-const T = i.forwardRef(({ className: a, header: e, ...l }, t) => /* @__PURE__ */ r(
+const T = i.forwardRef(({ className: a, header: e, ...l }, t) => /* @__PURE__ */ o(
   e ? "th" : "td",
   {
     ref: t,
-    className: o(
-      "w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle",
+    className: r(
+      "w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors",
       e ? "bg-[var(--ui-table-header-cell-color-idle)]" : "bg-[var(--ui-table-data-cell-color-idle)]",
       a
     ),
@@ -127,11 +127,11 @@ const T = i.forwardRef(({ className: a, header: e, ...l }, t) => /* @__PURE__ */
   }
 ));
 T.displayName = "TableSelectCell";
-const R = i.forwardRef(({ className: a, bulkSelectionActive: e, children: l, ...t }, s) => /* @__PURE__ */ r(
+const R = i.forwardRef(({ className: a, bulkSelectionActive: e, children: l, ...t }, s) => /* @__PURE__ */ o(
   "td",
   {
     ref: s,
-    className: o(
+    className: r(
       "w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]",
       !e && "rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
       a
@@ -141,11 +141,11 @@ const R = i.forwardRef(({ className: a, bulkSelectionActive: e, children: l, ...
   }
 ));
 R.displayName = "TableActionsCell";
-const C = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
+const C = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "th",
   {
     ref: l,
-    className: o(
+    className: r(
       "w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
       a
     ),
@@ -153,11 +153,11 @@ const C = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
   }
 ));
 C.displayName = "TableSettingsCell";
-const A = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
+const A = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "caption",
   {
     ref: l,
-    className: o("mt-4 text-sm text-muted-foreground", a),
+    className: r("mt-4 text-sm text-muted-foreground", a),
     ...e
   }
 ));

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableSelectCell","header","TableActionsCell","bulkSelectionActive","TableSettingsCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableSelectCell","header","TableActionsCell","bulkSelectionActive","TableSettingsCell","TableCaption"],"mappings":"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"}