@acronis-platform/ui-react 0.57.1 → 0.58.0

package/dist/components/ui/area-chart/area-chart.js

@@ -0,0 +1,149 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import * as f from "react";
+import { cva as R } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { AreaChart as V, CartesianGrid as k, XAxis as w, YAxis as z, Area as B } from "recharts";
+import { cn as K } from "../../../lib/utils.js";
+import { ChartContainer as M, ChartTooltip as S, ChartTooltipContent as X, ChartLegend as Y, ChartLegendContent as _ } from "../chart/chart.js";
+const b = R("", {
+  variants: {
+    layout: {
+      single: "",
+      stacked: ""
+    },
+    fill: {
+      solid: "",
+      gradient: ""
+    }
+  },
+  defaultVariants: {
+    layout: "single",
+    fill: "gradient"
+  }
+}), q = f.forwardRef(
+  ({
+    className: p,
+    config: m,
+    data: h,
+    dataKeys: s,
+    xKey: g,
+    xAxisLabel: e,
+    yAxisLabel: r,
+    yUnit: v,
+    layout: i = "single",
+    fill: o = "gradient",
+    curve: C = "monotone",
+    strokeWidth: u = 2,
+    fillOpacity: $ = 0.4,
+    showDots: l = !1,
+    connectNulls: A = !1,
+    showGrid: x = !0,
+    showTooltip: y = !0,
+    showLegend: T = !0,
+    tooltipContent: G,
+    ...I
+  }, L) => {
+    const N = i === "stacked", n = o === "gradient", O = e ? { value: e, position: "insideBottom", offset: 0 } : void 0, j = r ? {
+      value: r,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, d = `area-gradient-${f.useId().replace(/:/g, "")}`;
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: L,
+        "data-layout": i,
+        "data-fill": o,
+        className: K(b({ layout: i, fill: o }), p),
+        ...I,
+        children: /* @__PURE__ */ t(
+          M,
+          {
+            config: m,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ c(V, { data: h, children: [
+              n && /* @__PURE__ */ t("defs", { children: s.map((a) => /* @__PURE__ */ c(
+                "linearGradient",
+                {
+                  id: `${d}-${a}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ t(
+                      "stop",
+                      {
+                        offset: "5%",
+                        stopColor: `var(--color-${a})`,
+                        stopOpacity: 0.8
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      "stop",
+                      {
+                        offset: "95%",
+                        stopColor: `var(--color-${a})`,
+                        stopOpacity: 0.1
+                      }
+                    )
+                  ]
+                },
+                a
+              )) }),
+              x && /* @__PURE__ */ t(k, { vertical: !1 }),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  dataKey: g,
+                  type: "category",
+                  tickLine: !1,
+                  axisLine: !1,
+                  tickMargin: 8,
+                  height: e ? 48 : void 0,
+                  label: O
+                }
+              ),
+              /* @__PURE__ */ t(
+                z,
+                {
+                  type: "number",
+                  tickLine: !1,
+                  axisLine: !1,
+                  unit: v,
+                  width: r ? 72 : void 0,
+                  label: j
+                }
+              ),
+              y && /* @__PURE__ */ t(S, { content: G ?? /* @__PURE__ */ t(X, {}) }),
+              T && /* @__PURE__ */ t(Y, { content: /* @__PURE__ */ t(_, {}) }),
+              s.map((a) => /* @__PURE__ */ t(
+                B,
+                {
+                  type: C ?? "monotone",
+                  dataKey: a,
+                  stackId: N ? "a" : void 0,
+                  stroke: `var(--color-${a})`,
+                  strokeWidth: u,
+                  fill: n ? `url(#${d}-${a})` : `var(--color-${a})`,
+                  fillOpacity: n ? 1 : $,
+                  dot: l ? { r: 3 } : !1,
+                  activeDot: l ? { r: 5 } : !1,
+                  connectNulls: A,
+                  isAnimationActive: !1
+                },
+                a
+              ))
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+q.displayName = "AreaChart";
+export {
+  q as AreaChart,
+  b as areaChartVariants
+};
+//# sourceMappingURL=area-chart.js.map

package/dist/components/ui/area-chart/area-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart.js","sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n  variants: {\n    layout: {\n      single: '',\n      stacked: '',\n    },\n    fill: {\n      solid: '',\n      gradient: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'single',\n    fill: 'gradient',\n  },\n});\n\nexport interface AreaChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof areaChartVariants> {\n  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n  data: ReadonlyArray<Record<string, string | number | null>>;\n  /**\n   * Per-series map of `label` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n  yUnit?: string;\n  /** Interpolation between points. */\n  curve?: 'linear' | 'monotone' | 'step';\n  /** Stroke width of each area's top border. */\n  strokeWidth?: number;\n  /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n  fillOpacity?: number;\n  /** Render a dot at each data point. */\n  showDots?: boolean;\n  /** Bridge `null` gaps in the data instead of breaking the area. */\n  connectNulls?: boolean;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n   * `indicator` — to customize formatting, per-series rows, or extra fields\n   * without composing recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'gradient',\n      curve = 'monotone',\n      strokeWidth = 2,\n      fillOpacity = 0.4,\n      showDots = false,\n      connectNulls = false,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const isStacked = layout === 'stacked';\n    const isGradient = fill === 'gradient';\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    // recharts renders SVG <defs> once per chart; the gradient ids must be unique\n    // across chart instances on the page. useId gives a stable per-instance id;\n    // strip the colons React emits (invalid in a url(#…) reference) — same guard\n    // the shared ChartContainer applies to its chart id.\n    const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n\n    return (\n      <div\n        ref={ref}\n        data-layout={layout}\n        data-fill={fill}\n        className={cn(areaChartVariants({ layout, fill }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart data={data as readonly unknown[]}>\n            {isGradient && (\n              <defs>\n                {dataKeys.map((key) => (\n                  <linearGradient\n                    key={key}\n                    id={`${gradientId}-${key}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop\n                      offset=\"5%\"\n                      stopColor={`var(--color-${key})`}\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor={`var(--color-${key})`}\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                ))}\n              </defs>\n            )}\n            {showGrid && <CartesianGrid vertical={false} />}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key) => (\n              <Area\n                key={key}\n                type={curve ?? 'monotone'}\n                dataKey={key}\n                stackId={isStacked ? 'a' : undefined}\n                stroke={`var(--color-${key})`}\n                strokeWidth={strokeWidth}\n                fill={isGradient ? `url(#${gradientId}-${key})` : `var(--color-${key})`}\n                fillOpacity={isGradient ? 1 : fillOpacity}\n                dot={showDots ? { r: 3 } : false}\n                activeDot={showDots ? { r: 5 } : false}\n                connectNulls={connectNulls}\n                isAnimationActive={false}\n              />\n            ))}\n          </RechartsAreaChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"names":["areaChartVariants","cva","AreaChart","React","className","config","data","dataKeys","xKey","xAxisLabel","yAxisLabel","yUnit","layout","fill","curve","strokeWidth","fillOpacity","showDots","connectNulls","showGrid","showTooltip","showLegend","tooltipContent","props","ref","isStacked","isGradient","xAxisTitle","yAxisTitle","gradientId","jsx","cn","ChartContainer","jsxs","RechartsAreaChart","key","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area"],"mappings":"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"}

package/dist/components/ui/bar-chart/bar-chart.js

@@ -1,10 +1,10 @@
-import { jsx as t, jsxs as o, Fragment as c } from "react/jsx-runtime";
-import * as B from "react";
-import { cva as A } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { BarChart as N, CartesianGrid as j, XAxis as d, YAxis as h, Bar as w } from "recharts";
-import { cn as T } from "../../../lib/utils.js";
-import { ChartContainer as V, ChartTooltip as $, ChartTooltipContent as F, ChartLegend as G, ChartLegendContent as I } from "../chart/chart.js";
-const K = A("", {
+import { jsx as t, jsxs as p, Fragment as C } from "react/jsx-runtime";
+import * as R from "react";
+import { cva as S } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { BarChart as F, CartesianGrid as G, XAxis as z, YAxis as k, Bar as I, ReferenceLine as M } from "recharts";
+import { cn as O } from "../../../lib/utils.js";
+import { ChartContainer as X, ChartTooltip as Y, ChartTooltipContent as _, ChartLegend as q, ChartLegendContent as E } from "../chart/chart.js";
+const H = S("", {
   variants: {
     orientation: {
       vertical: "",
@@ -19,86 +19,161 @@ const K = A("", {
     orientation: "vertical",
     layout: "grouped"
   }
-}), S = B.forwardRef(
+});
+function J(e, h, d) {
+  if (!e) return;
+  if (typeof e.value == "number") return e.value;
+  if (!e.average) return;
+  const n = typeof e.average == "string" ? [e.average] : d, l = h.flatMap(
+    (o) => n.map((a) => o[a]).filter((a) => typeof a == "number")
+  );
+  if (l.length !== 0)
+    return l.reduce((o, a) => o + a, 0) / l.length;
+}
+const K = R.forwardRef(
   ({
-    className: f,
-    config: m,
-    data: p,
+    className: e,
+    config: h,
+    data: d,
     dataKeys: n,
     xKey: l,
-    orientation: a = "vertical",
-    layout: e = "grouped",
-    barRadius: r = 4,
-    showGrid: u = !0,
-    showTooltip: C = !0,
-    showLegend: v = !0,
-    ...L
-  }, g) => {
-    const y = a === "horizontal" ? "vertical" : "horizontal", s = e === "stacked", x = a === "horizontal" ? [0, r, r, 0] : [r, r, 0, 0];
+    referenceLine: o,
+    xAxisLabel: a,
+    yAxisLabel: u,
+    xUnit: x,
+    yUnit: B,
+    orientation: r = "vertical",
+    layout: f = "grouped",
+    barRadius: s = 4,
+    showGrid: b = !0,
+    showTooltip: T = !0,
+    showLegend: w = !0,
+    tooltipContent: $,
+    ...A
+  }, N) => {
+    const V = r === "horizontal" ? "vertical" : "horizontal", m = f === "stacked", j = o ? Array.isArray(o) ? o : [o] : [], g = a ? { value: a, position: "insideBottom", offset: 0 } : void 0, y = u ? {
+      value: u,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, D = r === "horizontal" ? [0, s, s, 0] : [s, s, 0, 0];
     return /* @__PURE__ */ t(
       "div",
       {
-        ref: g,
-        "data-orientation": a,
-        "data-layout": e,
-        className: T(K({ orientation: a, layout: e }), f),
-        ...L,
-        children: /* @__PURE__ */ t(V, { config: m, className: "size-full", children: /* @__PURE__ */ o(N, { data: p, layout: y, children: [
-          u && /* @__PURE__ */ t(
-            j,
-            {
-              horizontal: a === "vertical",
-              vertical: a === "horizontal"
-            }
-          ),
-          a === "horizontal" ? /* @__PURE__ */ o(c, { children: [
-            /* @__PURE__ */ t(d, { type: "number", tickLine: !1, axisLine: !1 }),
-            /* @__PURE__ */ t(
-              h,
-              {
-                dataKey: l,
-                type: "category",
-                tickLine: !1,
-                axisLine: !1,
-                width: 80
-              }
-            )
-          ] }) : /* @__PURE__ */ o(c, { children: [
-            /* @__PURE__ */ t(
-              d,
-              {
-                dataKey: l,
-                type: "category",
-                tickLine: !1,
-                axisLine: !1
-              }
-            ),
-            /* @__PURE__ */ t(h, { type: "number", tickLine: !1, axisLine: !1 })
-          ] }),
-          C && /* @__PURE__ */ t($, { content: /* @__PURE__ */ t(F, {}) }),
-          v && /* @__PURE__ */ t(G, { content: /* @__PURE__ */ t(I, {}) }),
-          n.map((i, z) => {
-            const k = s ? z === n.length - 1 : !0;
-            return /* @__PURE__ */ t(
-              w,
-              {
-                dataKey: i,
-                fill: `var(--color-${i})`,
-                stackId: s ? "a" : void 0,
-                radius: r > 0 && k ? x : void 0,
-                isAnimationActive: !1
-              },
-              i
-            );
-          })
-        ] }) })
+        ref: N,
+        "data-orientation": r,
+        "data-layout": f,
+        className: O(H({ orientation: r, layout: f }), e),
+        ...A,
+        children: /* @__PURE__ */ t(
+          X,
+          {
+            config: h,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ p(F, { data: d, layout: V, children: [
+              b && /* @__PURE__ */ t(
+                G,
+                {
+                  horizontal: r === "vertical",
+                  vertical: r === "horizontal"
+                }
+              ),
+              r === "horizontal" ? /* @__PURE__ */ p(C, { children: [
+                /* @__PURE__ */ t(
+                  z,
+                  {
+                    type: "number",
+                    tickLine: !1,
+                    axisLine: !1,
+                    unit: x,
+                    height: a ? 48 : void 0,
+                    label: g
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    dataKey: l,
+                    type: "category",
+                    tickLine: !1,
+                    axisLine: !1,
+                    width: u ? 96 : 80,
+                    label: y
+                  }
+                )
+              ] }) : /* @__PURE__ */ p(C, { children: [
+                /* @__PURE__ */ t(
+                  z,
+                  {
+                    dataKey: l,
+                    type: "category",
+                    tickLine: !1,
+                    axisLine: !1,
+                    height: a ? 48 : void 0,
+                    label: g
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    type: "number",
+                    tickLine: !1,
+                    axisLine: !1,
+                    unit: B,
+                    width: u ? 72 : void 0,
+                    label: y
+                  }
+                )
+              ] }),
+              T && /* @__PURE__ */ t(Y, { content: $ ?? /* @__PURE__ */ t(_, {}) }),
+              w && /* @__PURE__ */ t(q, { content: /* @__PURE__ */ t(E, {}) }),
+              n.map((i, v) => {
+                const c = m ? v === n.length - 1 : !0;
+                return /* @__PURE__ */ t(
+                  I,
+                  {
+                    dataKey: i,
+                    fill: `var(--color-${i})`,
+                    stackId: m ? "a" : void 0,
+                    radius: s > 0 && c ? D : void 0,
+                    isAnimationActive: !1
+                  },
+                  i
+                );
+              }),
+              j.map((i, v) => {
+                const c = J(i, d, n);
+                return c === void 0 ? null : /* @__PURE__ */ t(
+                  M,
+                  {
+                    ...r === "horizontal" ? { x: c } : { y: c },
+                    stroke: "var(--ui-text-on-surface-secondary)",
+                    strokeDasharray: "4 4",
+                    ifOverflow: "extendDomain",
+                    label: i.label ? {
+                      value: i.label,
+                      // Sit the caption at the top of the line: above the
+                      // right end of a horizontal line (vertical bars), or
+                      // above the top of a vertical line (horizontal bars).
+                      position: r === "horizontal" ? "top" : "insideTopRight",
+                      fill: "var(--ui-text-on-surface-secondary)",
+                      fontSize: 12
+                    } : void 0
+                  },
+                  `${i.label ?? "ref"}-${v}`
+                );
+              })
+            ] })
+          }
+        )
       }
     );
   }
 );
-S.displayName = "BarChart";
+K.displayName = "BarChart";
 export {
-  S as BarChart,
-  K as barChartVariants
+  K as BarChart,
+  J as barChartReferenceValue,
+  H as barChartVariants
 };
 //# sourceMappingURL=bar-chart.js.map

package/dist/components/ui/bar-chart/bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","sources":["../../../../src/components/ui/bar-chart/bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Bar-chart variant set (B2): `orientation` (which way the\n// bars grow) and `layout` (grouped side-by-side vs stacked). The classes stay\n// empty because the recharts SVG — not CSS — draws the bars: the same two props\n// drive recharts' `layout` prop, the axis roles, the `stackId`, and the corner\n// radius below. CVA is kept so the variant set is a first-class, spec-conformant\n// part of the API (matched against ui-spec's api.yaml enums) and exposed via\n// `VariantProps`; the resolved values are also mirrored onto `data-orientation`\n// / `data-layout` for styling hooks and tests.\nconst barChartVariants = cva('', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: '',\n    },\n    layout: {\n      grouped: '',\n      stacked: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    layout: 'grouped',\n  },\n});\n\nexport interface BarChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof barChartVariants> {\n  /** Row-per-category data. Each object holds the category key + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Corner radius applied to the growing end of each bar. */\n  barRadius?: number;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      xKey,\n      orientation = 'vertical',\n      layout = 'grouped',\n      barRadius = 4,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      ...props\n    },\n    ref\n  ) => {\n    // Our `orientation` is bar-direction; recharts' `layout` is the opposite axis.\n    const rechartsLayout = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n    const isStacked = layout === 'stacked';\n\n    // Round only the growing end: top for vertical bars, right for horizontal.\n    const endRadius: [number, number, number, number] =\n      orientation === 'horizontal'\n        ? [0, barRadius, barRadius, 0]\n        : [barRadius, barRadius, 0, 0];\n\n    return (\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-layout={layout}\n        className={cn(barChartVariants({ orientation, layout }), className)}\n        {...props}\n      >\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsBarChart data={data as readonly unknown[]} layout={rechartsLayout}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={orientation === 'vertical'}\n                vertical={orientation === 'horizontal'}\n              />\n            )}\n            {orientation === 'horizontal' ? (\n              <>\n                <XAxis type=\"number\" tickLine={false} axisLine={false} />\n                <YAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  tickLine={false}\n                  axisLine={false}\n                  width={80}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  tickLine={false}\n                  axisLine={false}\n                />\n                <YAxis type=\"number\" tickLine={false} axisLine={false} />\n              </>\n            )}\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key, index) => {\n              // In a stack only the last segment's end is rounded; grouped bars\n              // each round their own end.\n              const rounded = isStacked ? index === dataKeys.length - 1 : true;\n              return (\n                <Bar\n                  key={key}\n                  dataKey={key}\n                  fill={`var(--color-${key})`}\n                  stackId={isStacked ? 'a' : undefined}\n                  radius={barRadius > 0 && rounded ? endRadius : undefined}\n                  isAnimationActive={false}\n                />\n              );\n            })}\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nBarChart.displayName = 'BarChart';\n\nexport { BarChart, barChartVariants };\n"],"names":["barChartVariants","cva","BarChart","React","className","config","data","dataKeys","xKey","orientation","layout","barRadius","showGrid","showTooltip","showLegend","props","ref","rechartsLayout","isStacked","endRadius","jsx","cn","ChartContainer","jsxs","RechartsBarChart","CartesianGrid","Fragment","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","key","index","rounded","Bar"],"mappings":"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"}
+{"version":3,"file":"bar-chart.js","sources":["../../../../src/components/ui/bar-chart/bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Bar-chart variant set (B2): `orientation` (which way the\n// bars grow) and `layout` (grouped side-by-side vs stacked). The classes stay\n// empty because the recharts SVG — not CSS — draws the bars: the same two props\n// drive recharts' `layout` prop, the axis roles, the `stackId`, and the corner\n// radius below. CVA is kept so the variant set is a first-class, spec-conformant\n// part of the API (matched against ui-spec's api.yaml enums) and exposed via\n// `VariantProps`; the resolved values are also mirrored onto `data-orientation`\n// / `data-layout` for styling hooks and tests.\nconst barChartVariants = cva('', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: '',\n    },\n    layout: {\n      grouped: '',\n      stacked: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    layout: 'grouped',\n  },\n});\n\nexport interface BarChartReferenceLine {\n  /** Fixed position on the value axis. Takes precedence over `average`. */\n  value?: number;\n  /**\n   * Draw the line at the mean of one series (a `dataKeys` entry) or, when\n   * `true`, of every plotted series' values.\n   */\n  average?: boolean | string;\n  /** Optional caption rendered alongside the line. */\n  label?: string;\n}\n\n/**\n * Resolve a `referenceLine` config to a position on the value axis: a fixed\n * `value` wins; otherwise the mean of the requested series (a single `dataKeys`\n * entry, or all of them when `average` is `true`). Returns `undefined` when\n * there is nothing to draw (no config, or no numeric values to average).\n * Exported for unit tests; not part of the package's public API.\n */\nexport function barChartReferenceValue(\n  referenceLine: BarChartReferenceLine | undefined,\n  data: ReadonlyArray<Record<string, string | number>>,\n  dataKeys: string[]\n): number | undefined {\n  if (!referenceLine) return undefined;\n  if (typeof referenceLine.value === 'number') return referenceLine.value;\n  if (!referenceLine.average) return undefined;\n\n  const keys =\n    typeof referenceLine.average === 'string'\n      ? [referenceLine.average]\n      : dataKeys;\n  const nums = data.flatMap((row) =>\n    keys\n      .map((key) => row[key])\n      .filter((value): value is number => typeof value === 'number')\n  );\n  if (nums.length === 0) return undefined;\n  return nums.reduce((sum, n) => sum + n, 0) / nums.length;\n}\n\nexport interface BarChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof barChartVariants> {\n  /** Row-per-category data. Each object holds the category key + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /**\n   * One or more dashed reference/average lines on the value axis (Y for vertical\n   * bars, X for horizontal). Each is driven by a fixed `value` or a computed\n   * series `average`. Pass a single object or an array to draw several at once.\n   */\n  referenceLine?: BarChartReferenceLine | BarChartReferenceLine[];\n  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix on X-axis tick values (recharts `unit`) — applies when the X axis is numeric (`orientation=\"horizontal\"`). */\n  xUnit?: string;\n  /** Unit suffix on Y-axis tick values (recharts `unit`) — applies when the Y axis is numeric (`orientation=\"vertical\"`). */\n  yUnit?: string;\n  /** Corner radius applied to the growing end of each bar. */\n  barRadius?: number;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n   * `indicator` — to customize formatting, per-series rows, or extra fields\n   * without composing recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      xKey,\n      referenceLine,\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\n      orientation = 'vertical',\n      layout = 'grouped',\n      barRadius = 4,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Our `orientation` is bar-direction; recharts' `layout` is the opposite axis.\n    const rechartsLayout = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n    const isStacked = layout === 'stacked';\n\n    const referenceLines = referenceLine\n      ? Array.isArray(referenceLine)\n        ? referenceLine\n        : [referenceLine]\n      : [];\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    // Round only the growing end: top for vertical bars, right for horizontal.\n    const endRadius: [number, number, number, number] =\n      orientation === 'horizontal'\n        ? [0, barRadius, barRadius, 0]\n        : [barRadius, barRadius, 0, 0];\n\n    return (\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-layout={layout}\n        className={cn(barChartVariants({ orientation, layout }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data as readonly unknown[]} layout={rechartsLayout}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={orientation === 'vertical'}\n                vertical={orientation === 'horizontal'}\n              />\n            )}\n            {orientation === 'horizontal' ? (\n              <>\n                <XAxis\n                  type=\"number\"\n                  tickLine={false}\n                  axisLine={false}\n                  unit={xUnit}\n                  height={xAxisLabel ? 48 : undefined}\n                  label={xAxisTitle}\n                />\n                <YAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  tickLine={false}\n                  axisLine={false}\n                  width={yAxisLabel ? 96 : 80}\n                  label={yAxisTitle}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  tickLine={false}\n                  axisLine={false}\n                  height={xAxisLabel ? 48 : undefined}\n                  label={xAxisTitle}\n                />\n                <YAxis\n                  type=\"number\"\n                  tickLine={false}\n                  axisLine={false}\n                  unit={yUnit}\n                  width={yAxisLabel ? 72 : undefined}\n                  label={yAxisTitle}\n                />\n              </>\n            )}\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key, index) => {\n              // In a stack only the last segment's end is rounded; grouped bars\n              // each round their own end.\n              const rounded = isStacked ? index === dataKeys.length - 1 : true;\n              return (\n                <Bar\n                  key={key}\n                  dataKey={key}\n                  fill={`var(--color-${key})`}\n                  stackId={isStacked ? 'a' : undefined}\n                  radius={barRadius > 0 && rounded ? endRadius : undefined}\n                  isAnimationActive={false}\n                />\n              );\n            })}\n            {referenceLines.map((ref, index) => {\n              const value = barChartReferenceValue(ref, data, dataKeys);\n              if (value === undefined) return null;\n              return (\n                <ReferenceLine\n                  key={`${ref.label ?? 'ref'}-${index}`}\n                  // Draw on the value axis: Y for vertical bars, X for horizontal.\n                  {...(orientation === 'horizontal' ? { x: value } : { y: value })}\n                  stroke=\"var(--ui-text-on-surface-secondary)\"\n                  strokeDasharray=\"4 4\"\n                  // extendDomain so a target beyond the data max stays visible.\n                  ifOverflow=\"extendDomain\"\n                  label={\n                    ref.label\n                      ? {\n                          value: ref.label,\n                          // Sit the caption at the top of the line: above the\n                          // right end of a horizontal line (vertical bars), or\n                          // above the top of a vertical line (horizontal bars).\n                          position:\n                            orientation === 'horizontal'\n                              ? 'top'\n                              : 'insideTopRight',\n                          fill: 'var(--ui-text-on-surface-secondary)',\n                          fontSize: 12,\n                        }\n                      : undefined\n                  }\n                />\n              );\n            })}\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nBarChart.displayName = 'BarChart';\n\nexport { BarChart, barChartVariants };\n"],"names":["barChartVariants","cva","barChartReferenceValue","referenceLine","data","dataKeys","keys","nums","row","key","value","sum","n","BarChart","React","className","config","xKey","xAxisLabel","yAxisLabel","xUnit","yUnit","orientation","layout","barRadius","showGrid","showTooltip","showLegend","tooltipContent","props","ref","rechartsLayout","isStacked","referenceLines","xAxisTitle","yAxisTitle","endRadius","jsx","cn","ChartContainer","jsxs","RechartsBarChart","CartesianGrid","Fragment","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","index","rounded","Bar","ReferenceLine"],"mappings":"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"}

package/dist/components/ui/button-icon-input/button-icon-input.js

@@ -0,0 +1,36 @@
+import * as e from "react";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+import { useRender as u } from "@base-ui/react/use-render";
+import { cva as c } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as l } from "../../../lib/utils.js";
+const v = c(
+  "inline-flex size-[var(--ui-button-icon-input-global-container-width)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-input-global-container-border-radius)] outline-none transition-colors cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--ui-button-icon-input-normal-container-color-disabled)] disabled:text-[var(--ui-button-icon-input-normal-icon-color-disabled)] focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        normal: "bg-[var(--ui-button-icon-input-normal-container-color-idle)] text-[var(--ui-button-icon-input-normal-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-normal-container-color-hover)] hover:text-[var(--ui-button-icon-input-normal-icon-color-hover)] active:bg-[var(--ui-button-icon-input-normal-container-color-active)] active:text-[var(--ui-button-icon-input-normal-icon-color-active)] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-button-icon-input-normal-icon-size)]",
+        error: "bg-[var(--ui-button-icon-input-error-container-color-idle)] text-[var(--ui-button-icon-input-error-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-error-container-color-hover)] hover:text-[var(--ui-button-icon-input-error-icon-color-hover)] active:bg-[var(--ui-button-icon-input-error-container-color-active)] active:text-[var(--ui-button-icon-input-error-icon-color-active)] focus-visible:ring-[var(--ui-focus-error)] [&_svg]:size-[var(--ui-button-icon-input-error-icon-size)]"
+      }
+    },
+    defaultVariants: {
+      variant: "normal"
+    }
+  }
+), s = e.forwardRef(({ className: o, variant: n, render: r, ...i }, t) => u({
+  render: r,
+  ref: t,
+  defaultTagName: "button",
+  props: a(
+    {
+      type: "button",
+      className: l(v({ variant: n, className: o }))
+    },
+    i
+  )
+}));
+s.displayName = "ButtonIconInput";
+export {
+  s as ButtonIconInput,
+  v as buttonIconInputVariants
+};
+//# sourceMappingURL=button-icon-input.js.map

package/dist/components/ui/button-icon-input/button-icon-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-icon-input.js","sources":["../../../../src/components/ui/button-icon-input/button-icon-input.tsx"],"sourcesContent":["import * 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// Mirrors the Figma \"ButtonIconInput\" component set: a smaller icon-only\n// button (20px box, 16px glyph) meant to live inside an input's box (e.g. the\n// clear/reveal affordance), as opposed to `ButtonIcon`'s standalone 32px/24px\n// sizing. `variant` (`normal` / `error`) picks the field's tone — `error`\n// mirrors the input's error-state red — and each interaction state\n// (idle/hover/active) is wired to its own `--ui-button-icon-input-*` token per\n// variant (they use distinct tokens, not a shared `global` tier like\n// `ButtonIcon`). The Figma set has no `disabled` variant for `error` (only\n// `normal` does), so disabled always uses the `normal` disabled tokens\n// regardless of `variant` — there's no dead-token fallback here, just the one\n// disabled treatment the design actually defines. Focus is a 3px ring —\n// `--ui-focus-primary` for `normal`, `--ui-focus-error` for `error` —\n// matching the field it sits in.\nconst buttonIconInputVariants = cva(\n  'inline-flex size-[var(--ui-button-icon-input-global-container-width)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-input-global-container-border-radius)] outline-none transition-colors cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--ui-button-icon-input-normal-container-color-disabled)] disabled:text-[var(--ui-button-icon-input-normal-icon-color-disabled)] focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        normal:\n          'bg-[var(--ui-button-icon-input-normal-container-color-idle)] text-[var(--ui-button-icon-input-normal-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-normal-container-color-hover)] hover:text-[var(--ui-button-icon-input-normal-icon-color-hover)] active:bg-[var(--ui-button-icon-input-normal-container-color-active)] active:text-[var(--ui-button-icon-input-normal-icon-color-active)] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-button-icon-input-normal-icon-size)]',\n        error:\n          'bg-[var(--ui-button-icon-input-error-container-color-idle)] text-[var(--ui-button-icon-input-error-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-error-container-color-hover)] hover:text-[var(--ui-button-icon-input-error-icon-color-hover)] active:bg-[var(--ui-button-icon-input-error-container-color-active)] active:text-[var(--ui-button-icon-input-error-icon-color-active)] focus-visible:ring-[var(--ui-focus-error)] [&_svg]:size-[var(--ui-button-icon-input-error-icon-size)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'normal',\n    },\n  }\n);\n\nexport interface ButtonIconInputProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonIconInputVariants> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * Small icon-only button meant to sit inside an input's box. The icon is\n * passed as `children`; provide an `aria-label` (or `aria-labelledby`) so the\n * control has an accessible name.\n */\nconst ButtonIconInput = React.forwardRef<\n  HTMLButtonElement,\n  ButtonIconInputProps\n>(({ className, variant, render, ...props }, ref) => {\n  return useRender({\n    render,\n    ref,\n    defaultTagName: 'button',\n    props: mergeProps<'button'>(\n      {\n        type: 'button',\n        className: cn(buttonIconInputVariants({ variant, className })),\n      },\n      props\n    ),\n  });\n});\nButtonIconInput.displayName = 'ButtonIconInput';\n\nexport { ButtonIconInput, buttonIconInputVariants };\n"],"names":["buttonIconInputVariants","cva","ButtonIconInput","React","className","variant","render","props","ref","useRender","mergeProps","cn"],"mappings":";;;;;AAoBA,MAAMA,IAA0BC;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QACE;AAAA,QACF,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAkBC,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MACpCC,EAAU;AAAA,EACf,QAAAH;AAAA,EACA,KAAAE;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAOE;AAAA,IACL;AAAA,MACE,MAAM;AAAA,MACN,WAAWC,EAAGX,EAAwB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,IAAA;AAAA,IAE/DG;AAAA,EAAA;AACF,CACD,CACF;AACDL,EAAgB,cAAc;"}

package/dist/components/ui/button-menu/button-menu.js

@@ -6,7 +6,7 @@ import { ChevronUpIcon as m, ChevronDownIcon as p } from "@acronis-platform/icon
 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 y } from "../../../lib/utils.js";
 const h = g(
-  "inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0",
+  "inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/dist/components/ui/button-menu/button-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-menu.js","sources":["../../../../src/components/ui/button-menu/button-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonMenu\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the **open** state\n// — the chevron flips down→up and the container takes its `*-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-*` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-*` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity). Focus: the\n// Figma focus state is a 3px `--ui-focus-primary` ring flush to the button edge\n// (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonMenuVariants = cva(\n  'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n        secondary:\n          'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  }\n);\n\nexport interface ButtonMenuProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof buttonMenuVariants> {\n  /**\n   * Whether the associated menu is open. Flips the trailing chevron\n   * (down → up), applies the open (`*-active`) treatment, and reflects\n   * `aria-expanded`. Control this in sync with the menu you trigger.\n   */\n  open?: boolean;\n  /** Label content rendered before the chevron. */\n  children?: React.ReactNode;\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n */\nconst ButtonMenu = React.forwardRef<HTMLButtonElement, ButtonMenuProps>(\n  ({ className, variant, open, render, children, ...props }, ref) => {\n    const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'button',\n      props: mergeProps<'button'>(\n        {\n          className: cn(buttonMenuVariants({ variant, className })),\n          'aria-expanded': open,\n          // `data-open` drives the open (`*-active`) token switch via attribute\n          // selectors; present only while open, and typed loosely because\n          // React's button attribute map doesn't include arbitrary data-* keys\n          // as literals.\n          ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n          children: (\n            <>\n              {children}\n              <Chevron />\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nButtonMenu.displayName = 'ButtonMenu';\n\nexport { ButtonMenu, buttonMenuVariants };\n"],"names":["buttonMenuVariants","cva","ButtonMenu","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA2BA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACxD,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAW,cAAc;"}
+{"version":3,"file":"button-menu.js","sources":["../../../../src/components/ui/button-menu/button-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonMenu\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the **open** state\n// — the chevron flips down→up and the container takes its `*-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-*` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-*` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity). Focus: the\n// Figma focus state is a 3px `--ui-focus-primary` ring flush to the button edge\n// (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonMenuVariants = cva(\n  'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n        secondary:\n          'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  }\n);\n\nexport interface ButtonMenuProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof buttonMenuVariants> {\n  /**\n   * Whether the associated menu is open. Flips the trailing chevron\n   * (down → up), applies the open (`*-active`) treatment, and reflects\n   * `aria-expanded`. Control this in sync with the menu you trigger.\n   */\n  open?: boolean;\n  /** Label content rendered before the chevron. */\n  children?: React.ReactNode;\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n */\nconst ButtonMenu = React.forwardRef<HTMLButtonElement, ButtonMenuProps>(\n  ({ className, variant, open, render, children, ...props }, ref) => {\n    const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'button',\n      props: mergeProps<'button'>(\n        {\n          className: cn(buttonMenuVariants({ variant, className })),\n          'aria-expanded': open,\n          // `data-open` drives the open (`*-active`) token switch via attribute\n          // selectors; present only while open, and typed loosely because\n          // React's button attribute map doesn't include arbitrary data-* keys\n          // as literals.\n          ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n          children: (\n            <>\n              {children}\n              <Chevron />\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nButtonMenu.displayName = 'ButtonMenu';\n\nexport { ButtonMenu, buttonMenuVariants };\n"],"names":["buttonMenuVariants","cva","ButtonMenu","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA2BA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACxD,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAW,cAAc;"}