@acronis-platform/ui-react 0.57.1 → 0.60.0

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

@@ -0,0 +1,177 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import * as m from "react";
+import { cva as Y } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { AreaChart as _, CartesianGrid as q, XAxis as E, YAxis as J, Area as P } from "recharts";
+import { cn as Q } from "../../../lib/utils.js";
+import { ChartContainer as U, ChartTooltip as W, ChartTooltipContent as Z, ChartLegend as b, ChartLegendContent as tt } from "../chart/chart.js";
+import { resolveAxisDomain as at } from "../chart/chart-format.js";
+const et = Y("", {
+  variants: {
+    layout: {
+      single: "",
+      stacked: ""
+    },
+    fill: {
+      solid: "",
+      gradient: ""
+    }
+  },
+  defaultVariants: {
+    layout: "single",
+    fill: "gradient"
+  }
+}), rt = m.forwardRef(
+  ({
+    className: p,
+    config: h,
+    data: u,
+    dataKeys: l,
+    xKey: v,
+    xAxisLabel: r,
+    yAxisLabel: o,
+    yUnit: C,
+    layout: i = "single",
+    fill: n = "gradient",
+    curve: g = "monotone",
+    strokeWidth: $ = 2,
+    fillOpacity: y = 0.4,
+    showDots: d = !1,
+    connectNulls: k = !1,
+    showGrid: T = !0,
+    showTooltip: D = !0,
+    showLegend: G = !0,
+    showXAxis: I = !0,
+    showYAxis: N = !0,
+    xTickFormatter: O,
+    yTickFormatter: j,
+    xAxisAngle: e,
+    xAxisInterval: z,
+    yAxisTickCount: A,
+    yAxisDomain: F,
+    gridDashed: L,
+    gridHorizontal: R,
+    gridVertical: V,
+    tooltipContent: w,
+    ...x
+  }, B) => {
+    const H = i === "stacked", s = n === "gradient", K = r ? { value: r, position: "insideBottom", offset: 0 } : void 0, M = o ? {
+      value: o,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, S = at(F), X = r || e != null ? 30 + (e != null ? 20 : 0) + (r ? 18 : 0) : void 0, c = `area-gradient-${m.useId().replace(/:/g, "")}`;
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: B,
+        "data-layout": i,
+        "data-fill": n,
+        className: Q(et({ layout: i, fill: n }), p),
+        ...x,
+        children: /* @__PURE__ */ t(
+          U,
+          {
+            config: h,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ f(_, { data: u, children: [
+              s && /* @__PURE__ */ t("defs", { children: l.map((a) => /* @__PURE__ */ f(
+                "linearGradient",
+                {
+                  id: `${c}-${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
+              )) }),
+              T && /* @__PURE__ */ t(
+                q,
+                {
+                  horizontal: R ?? !0,
+                  vertical: V ?? !1,
+                  strokeDasharray: L ? "3 3" : void 0
+                }
+              ),
+              /* @__PURE__ */ t(
+                E,
+                {
+                  dataKey: v,
+                  type: "category",
+                  hide: !I,
+                  tickLine: !1,
+                  axisLine: !1,
+                  tickMargin: 8,
+                  tickFormatter: O,
+                  angle: e,
+                  interval: z,
+                  textAnchor: e != null ? e < 0 ? "end" : "start" : void 0,
+                  height: X,
+                  label: K
+                }
+              ),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  type: "number",
+                  hide: !N,
+                  tickLine: !1,
+                  axisLine: !1,
+                  unit: C,
+                  tickFormatter: j,
+                  tickCount: A,
+                  domain: S,
+                  width: o ? 72 : void 0,
+                  label: M
+                }
+              ),
+              D && /* @__PURE__ */ t(W, { content: w ?? /* @__PURE__ */ t(Z, {}) }),
+              G && /* @__PURE__ */ t(b, { content: /* @__PURE__ */ t(tt, {}) }),
+              l.map((a) => /* @__PURE__ */ t(
+                P,
+                {
+                  type: g ?? "monotone",
+                  dataKey: a,
+                  stackId: H ? "a" : void 0,
+                  stroke: `var(--color-${a})`,
+                  strokeWidth: $,
+                  fill: s ? `url(#${c}-${a})` : `var(--color-${a})`,
+                  fillOpacity: s ? 1 : y,
+                  dot: d ? { r: 3 } : !1,
+                  activeDot: d ? { r: 5 } : !1,
+                  connectNulls: k,
+                  isAnimationActive: !1
+                },
+                a
+              ))
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+rt.displayName = "AreaChart";
+export {
+  rt as AreaChart,
+  et 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  resolveAxisDomain,\n  type ChartConfig,\n  type CartesianChartProps,\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    CartesianChartProps {\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  /** 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  showLegend?: boolean;\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      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\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    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // Room for the X tick row: recharts' default 30, plus a rotated tick row\n    // (+20) and/or the axis title (+18). Additive — both can be present at once,\n    // which the old label-or-angle ternary under-allocated.\n    const xAxisHeight =\n      xAxisLabel || xAxisAngle != null\n        ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\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 && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={\n                xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n              }\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\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","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","props","ref","isStacked","isGradient","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","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,11 @@
-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 V } from "react/jsx-runtime";
+import * as Q from "react";
+import { cva as U } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { BarChart as W, CartesianGrid as X, XAxis as j, YAxis as w, Bar as Y, ReferenceLine as Z } from "recharts";
+import { cn as x } from "../../../lib/utils.js";
+import { ChartContainer as A, ChartTooltip as tt, ChartTooltipContent as at, ChartLegend as rt, ChartLegendContent as et } from "../chart/chart.js";
+import { resolveAxisDomain as ot } from "../chart/chart-format.js";
+const it = U("", {
   variants: {
     orientation: {
       vertical: "",
@@ -19,86 +20,191 @@ const K = A("", {
     orientation: "vertical",
     layout: "grouped"
   }
-}), S = B.forwardRef(
+});
+function nt(e, v, u) {
+  if (!e) return;
+  if (typeof e.value == "number") return e.value;
+  if (!e.average) return;
+  const s = typeof e.average == "string" ? [e.average] : u, l = v.flatMap(
+    (o) => s.map((a) => o[a]).filter((a) => typeof a == "number")
+  );
+  if (l.length !== 0)
+    return l.reduce((o, a) => o + a, 0) / l.length;
+}
+const lt = Q.forwardRef(
   ({
-    className: f,
-    config: m,
-    data: p,
-    dataKeys: n,
+    className: e,
+    config: v,
+    data: u,
+    dataKeys: s,
     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: h,
+    xUnit: R,
+    yUnit: S,
+    orientation: r = "vertical",
+    layout: f = "grouped",
+    barRadius: d = 4,
+    showGrid: T = !0,
+    showTooltip: G = !0,
+    showLegend: H = !0,
+    showXAxis: y = !0,
+    showYAxis: g = !0,
+    xTickFormatter: C,
+    yTickFormatter: k,
+    xAxisAngle: i,
+    xAxisInterval: z,
+    yAxisTickCount: B,
+    yAxisDomain: M,
+    gridDashed: O,
+    gridHorizontal: _,
+    gridVertical: q,
+    tooltipContent: E,
+    ...I
+  }, J) => {
+    const K = r === "horizontal" ? "vertical" : "horizontal", b = f === "stacked", L = o ? Array.isArray(o) ? o : [o] : [], D = a ? { value: a, position: "insideBottom", offset: 0 } : void 0, $ = h ? {
+      value: h,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, F = ot(M), N = a || i != null ? 30 + (i != null ? 20 : 0) + (a ? 18 : 0) : void 0, P = r === "horizontal" ? [0, d, d, 0] : [d, d, 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: J,
+        "data-orientation": r,
+        "data-layout": f,
+        className: x(it({ orientation: r, layout: f }), e),
+        ...I,
+        children: /* @__PURE__ */ t(
+          A,
+          {
+            config: v,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ p(W, { data: u, layout: K, children: [
+              T && /* @__PURE__ */ t(
+                X,
+                {
+                  horizontal: _ ?? r === "vertical",
+                  vertical: q ?? r === "horizontal",
+                  strokeDasharray: O ? "3 3" : void 0
+                }
+              ),
+              r === "horizontal" ? /* @__PURE__ */ p(V, { children: [
+                /* @__PURE__ */ t(
+                  j,
+                  {
+                    type: "number",
+                    hide: !y,
+                    tickLine: !1,
+                    axisLine: !1,
+                    unit: R,
+                    tickFormatter: C,
+                    angle: i,
+                    interval: z,
+                    textAnchor: i != null ? i < 0 ? "end" : "start" : void 0,
+                    tickCount: B,
+                    domain: F,
+                    height: N,
+                    label: D
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  w,
+                  {
+                    dataKey: l,
+                    type: "category",
+                    hide: !g,
+                    tickLine: !1,
+                    axisLine: !1,
+                    tickFormatter: k,
+                    width: h ? 96 : 80,
+                    label: $
+                  }
+                )
+              ] }) : /* @__PURE__ */ p(V, { children: [
+                /* @__PURE__ */ t(
+                  j,
+                  {
+                    dataKey: l,
+                    type: "category",
+                    hide: !y,
+                    tickLine: !1,
+                    axisLine: !1,
+                    tickFormatter: C,
+                    angle: i,
+                    interval: z,
+                    textAnchor: i != null ? i < 0 ? "end" : "start" : void 0,
+                    height: N,
+                    label: D
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  w,
+                  {
+                    type: "number",
+                    hide: !g,
+                    tickLine: !1,
+                    axisLine: !1,
+                    unit: S,
+                    tickFormatter: k,
+                    tickCount: B,
+                    domain: F,
+                    width: h ? 72 : void 0,
+                    label: $
+                  }
+                )
+              ] }),
+              G && /* @__PURE__ */ t(tt, { content: E ?? /* @__PURE__ */ t(at, {}) }),
+              H && /* @__PURE__ */ t(rt, { content: /* @__PURE__ */ t(et, {}) }),
+              s.map((n, m) => {
+                const c = b ? m === s.length - 1 : !0;
+                return /* @__PURE__ */ t(
+                  Y,
+                  {
+                    dataKey: n,
+                    fill: `var(--color-${n})`,
+                    stackId: b ? "a" : void 0,
+                    radius: d > 0 && c ? P : void 0,
+                    isAnimationActive: !1
+                  },
+                  n
+                );
+              }),
+              L.map((n, m) => {
+                const c = nt(n, u, s);
+                return c === void 0 ? null : /* @__PURE__ */ t(
+                  Z,
+                  {
+                    ...r === "horizontal" ? { x: c } : { y: c },
+                    stroke: "var(--ui-text-on-surface-secondary)",
+                    strokeDasharray: "4 4",
+                    ifOverflow: "extendDomain",
+                    label: n.label ? {
+                      value: n.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
+                  },
+                  `${n.label ?? "ref"}-${m}`
+                );
+              })
+            ] })
+          }
+        )
       }
     );
   }
 );
-S.displayName = "BarChart";
+lt.displayName = "BarChart";
 export {
-  S as BarChart,
-  K as barChartVariants
+  lt as BarChart,
+  nt as barChartReferenceValue,
+  it 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  resolveAxisDomain,\n  type ChartConfig,\n  type CartesianChartProps,\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    CartesianChartProps {\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  /** Unit suffix on X-axis tick values (recharts `unit`) — applies when the X axis is numeric (`orientation=\"horizontal\"`). */\n  xUnit?: string;\n  /** Corner radius applied to the growing end of each bar. */\n  barRadius?: number;\n  showLegend?: boolean;\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      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\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    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // Room for the X tick row: recharts' default 30, plus a rotated tick row\n    // (+20) and/or the axis title (+18). Additive — both can be present at once,\n    // which the old label-or-angle ternary under-allocated.\n    const xAxisHeight =\n      xAxisLabel || xAxisAngle != null\n        ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\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={gridHorizontal ?? orientation === 'vertical'}\n                vertical={gridVertical ?? orientation === 'horizontal'}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            {orientation === 'horizontal' ? (\n              <>\n                {/* Horizontal bars put the values on X, so the value-axis\n                    props (tickCount/domain) belong here — recharts ignores both\n                    on the category axis. */}\n                <XAxis\n                  type=\"number\"\n                  hide={!showXAxis}\n                  tickLine={false}\n                  axisLine={false}\n                  unit={xUnit}\n                  tickFormatter={xTickFormatter}\n                  angle={xAxisAngle}\n                  interval={xAxisInterval}\n                  textAnchor={\n                    xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n                  }\n                  tickCount={yAxisTickCount}\n                  domain={yDomain}\n                  height={xAxisHeight}\n                  label={xAxisTitle}\n                />\n                <YAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  hide={!showYAxis}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={yTickFormatter}\n                  width={yAxisLabel ? 96 : 80}\n                  label={yAxisTitle}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  hide={!showXAxis}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={xTickFormatter}\n                  angle={xAxisAngle}\n                  interval={xAxisInterval}\n                  textAnchor={\n                    xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n                  }\n                  height={xAxisHeight}\n                  label={xAxisTitle}\n                />\n                <YAxis\n                  type=\"number\"\n                  hide={!showYAxis}\n                  tickLine={false}\n                  axisLine={false}\n                  unit={yUnit}\n                  tickFormatter={yTickFormatter}\n                  tickCount={yAxisTickCount}\n                  domain={yDomain}\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","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","props","ref","rechartsLayout","isStacked","referenceLines","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","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: {