@acronis-platform/ui-react 0.58.0 → 0.60.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-chart.js","sources":["../../../../src/components/ui/sankey-chart/sankey-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Sankey as RechartsSankey, Rectangle } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives — a flow\n// diagram where link width is proportional to the value flowing between nodes.\n// Like Treemap/Funnel it's a single recharts element (`<Sankey>`) themed through\n// custom `node` / `link` renderers (recharts' defaults paint one flat grey and\n// carry no token hooks). No CVA variant: a Sankey's expressiveness is the\n// nodes/links graph + geometry (plain props), not a visual \"mode\".\n//\n// Node `name`s are the color keys: each must match a `config` entry, so they\n// must be CSS-safe (they become part of a `--color-<name>` custom property).\n// The human-readable text comes from `config[name].label`.\n\n/** A node in the flow — `name` is its color/config key (CSS-safe, unique). */\nexport interface SankeyChartNode {\n  name: string;\n}\n\n/** A directed flow between two nodes, referenced by their index in `nodes`. */\nexport interface SankeyChartLink {\n  /** Index of the source node in `data.nodes`. */\n  source: number;\n  /** Index of the target node in `data.nodes`. */\n  target: number;\n  /** Flow magnitude — drives the link's width. */\n  value: number;\n  /**\n   * Ribbon color (any CSS color, e.g. a `var(--ui-*)` token), rendered at **full\n   * opacity** so it matches its node bar. Omit to use the target node's color at\n   * 35% (the default tinted ribbon).\n   */\n  color?: string;\n}\n\nexport interface SankeyChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** The graph: `nodes` (color keys) + `links` (source/target indices + value). */\n  data: {\n    nodes: ReadonlyArray<SankeyChartNode>;\n    links: ReadonlyArray<SankeyChartLink>;\n  };\n  /**\n   * Per-node map of `label` / `color`, keyed by the node's `name` (imported from\n   * the shared `Chart` primitives). Turned into `--color-<name>` custom\n   * properties. Colors are caller-supplied — reference an existing semantic\n   * `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Vertical gap between nodes in the same column. */\n  nodePadding?: number;\n  /** Thickness of each node bar. */\n  nodeWidth?: number;\n  /** Curviness of the links (0 = straight, 1 = fully curved). */\n  linkCurvature?: number;\n  /**\n   * Sort nodes vertically to minimize link crossings (recharts' relaxation).\n   * Defaults to `false` — nodes render in the order given by `data.nodes` within\n   * each column, which keeps curated flows tidy; set `true` to auto-order.\n   */\n  sort?: boolean;\n  /** Render each node's label (from `config[name].label`) beside its bar. */\n  showLabels?: boolean;\n  /** Render a legend (color dot + label + value + % per node) below the chart. */\n  showLegend?: boolean;\n  /** Show a hover tooltip on nodes and links (dot + `source → target` + value). */\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting without composing recharts yourself. Ignored when\n   * `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\n// recharts injects these into the `node` / `link` render functions but doesn't\n// export their prop types from the package root, so we type the fields we use\n// (structurally compatible with recharts' internal NodeProps / LinkProps).\ninterface SankeyNodeShapeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number };\n}\n\ninterface SankeyLinkShapeProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  // recharts spreads the original link onto `payload` (then overrides\n  // source/target with node objects), so a custom `color` survives here.\n  payload: {\n    source: { name: string };\n    target: { name: string };\n    value: number;\n    color?: string;\n  };\n}\n\n// Node bar: a rect filled from `--color-<name>`, with the config label placed on\n// whichever side keeps it inside the plot — to the right for nodes that have\n// outgoing links (sources), to the left for terminal nodes (sinks).\nfunction makeNodeRenderer(\n  config: ChartConfig,\n  sourceIndices: ReadonlySet<number>,\n  showLabels: boolean\n) {\n  return function SankeyNodeShape({\n    x,\n    y,\n    width,\n    height,\n    index,\n    payload,\n  }: SankeyNodeShapeProps) {\n    const name = String(payload.name);\n    const label = config[name]?.label ?? name;\n    const isSource = sourceIndices.has(index);\n    return (\n      <g>\n        <Rectangle\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={`var(--color-${name})`}\n          radius={2}\n        />\n        {showLabels && (\n          <text\n            x={isSource ? x + width + 6 : x - 6}\n            y={y + height / 2}\n            textAnchor={isSource ? 'start' : 'end'}\n            dominantBaseline=\"middle\"\n            className=\"fill-foreground text-xs\"\n          >\n            {label}\n          </text>\n        )}\n      </g>\n    );\n  };\n}\n\n// Link ribbon: a bezier stroked at 35% opacity in the link's own `color` if\n// given (recharts preserves custom link fields on the render `payload`), else\n// the **target** node's color (so a flow reads as \"where it goes\"). Drawn as a\n// stroke, not a fill, so the ribbon width comes from `linkWidth`.\nfunction SankeyLinkShape({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  payload,\n}: SankeyLinkShapeProps) {\n  const targetName = String(payload.target.name);\n  const stroke = payload.color ?? `var(--color-${targetName})`;\n  return (\n    <path\n      d={`M${sourceX},${sourceY}C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n      fill=\"none\"\n      stroke={stroke}\n      strokeWidth={Math.max(1, linkWidth)}\n      // An explicit per-link color is the caller's exact choice — render it at\n      // full opacity (so it matches its node bar); the default target-tint is\n      // dimmed to 35% so ribbons don't overwhelm the nodes.\n      strokeOpacity={payload.color ? 1 : 0.35}\n    />\n  );\n}\n\n// Default tooltip: recharts' Sankey payload carries no config color, and labels\n// a hovered link \"source - target\" using the node keys (a node is a single key).\n// Parse that name to a color dot (the target node's color) + the mapped config\n// labels joined with an arrow + the value — driven by `config`, so it's reliable\n// where the shared ChartTooltipContent can't resolve the Sankey payload.\n//\n// Exported (module-only, not from the package barrel) so its branches can be\n// unit-tested directly: recharts can't lay out a Sankey in happy-dom, and its\n// hover tooltip has no statically-open form the component exposes, so rendering\n// `<SankeyChart>` never reaches this code.\nexport function makeSankeyTooltip(\n  config: ChartConfig,\n  links: ReadonlyArray<SankeyChartLink>,\n  nodes: ReadonlyArray<SankeyChartNode>\n) {\n  const labelFor = (key: string): React.ReactNode => config[key]?.label ?? key;\n  // Resolve each link's dot color by its \"source - target\" name (which is the\n  // tooltip item's name): the link's own color if set, else the target's, via\n  // the `--color-<name>` bridge so a per-theme config resolves too.\n  const styleByName = new Map<string, { color: string; opacity: number }>();\n  for (const link of links) {\n    const source = nodes[link.source]?.name ?? '';\n    const target = nodes[link.target]?.name ?? '';\n    // Mirror the ribbon: an explicit color renders full-opacity; the default\n    // target tint renders at 35%.\n    styleByName.set(source + ' - ' + target, {\n      color: link.color ?? `var(--color-${target})`,\n      opacity: link.color ? 1 : 0.35,\n    });\n  }\n\n  return function SankeyTooltipContent({\n    active,\n    payload,\n  }: {\n    active?: boolean;\n    payload?: ReadonlyArray<{\n      name?: string | number;\n      value?: number | string | ReadonlyArray<number | string>;\n    }>;\n  }) {\n    if (!active || !payload?.length) return null;\n    const item = payload[0];\n    const parts = String(item?.name ?? '').split(' - ');\n    const targetKey = parts[parts.length - 1];\n    const linkStyle = styleByName.get(String(item?.name ?? ''));\n    const dotColor = linkStyle?.color ?? `var(--color-${targetKey})`;\n    const dotOpacity = linkStyle?.opacity ?? 1;\n    const value = item?.value;\n    return (\n      <div className=\"flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md\">\n        <span\n          className=\"h-2.5 w-2.5 shrink-0 rounded-[2px]\"\n          style={{ backgroundColor: dotColor, opacity: dotOpacity }}\n        />\n        <span className=\"text-muted-foreground\">\n          {/* A config label can be any ReactNode, so the arrow-joined label is\n              built as nodes rather than stringified. */}\n          {parts.map((key, index) => (\n            <React.Fragment key={`${key}-${index}`}>\n              {index > 0 && ' → '}\n              {labelFor(key)}\n            </React.Fragment>\n          ))}\n        </span>\n        {value != null && (\n          <span className=\"ms-2 font-medium tabular-nums\">\n            {formatTooltipValue(value)}\n          </span>\n        )}\n      </div>\n    );\n  };\n}\n\n// recharts types a tooltip item's value as a scalar *or* a range tuple; a plain\n// `String()` would print \"1,2\" for the tuple, so format each part and join.\nfunction formatTooltipValue(\n  value: number | string | ReadonlyArray<number | string>\n): string {\n  if (Array.isArray(value)) {\n    return value.map((part) => formatTooltipValue(part)).join(' – ');\n  }\n  return typeof value === 'number'\n    ? value.toLocaleString()\n    : String(value as string);\n}\n\nconst SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      nodePadding = 24,\n      nodeWidth = 12,\n      linkCurvature = 0.5,\n      sort = false,\n      showLabels = true,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n\n    // Node indices that appear as a link `source` have outgoing flow — used by\n    // the node renderer to place the label on the readable side.\n    const sourceIndices = React.useMemo(\n      () => new Set(data.links.map((link) => link.source)),\n      [data.links]\n    );\n\n    const nodeRenderer = React.useMemo(\n      () => makeNodeRenderer(config, sourceIndices, showLabels),\n      [config, sourceIndices, showLabels]\n    );\n\n    const defaultTooltip = React.useMemo(\n      () => makeSankeyTooltip(config, data.links, data.nodes),\n      [config, data.links, data.nodes]\n    );\n\n    // Per-node value (incoming flow, or outgoing for a source with no incoming)\n    // and its share of the largest node — drives the legend's count + %.\n    const nodeStats = React.useMemo(() => {\n      const incoming = new Map<number, number>();\n      const outgoing = new Map<number, number>();\n      for (const link of data.links) {\n        outgoing.set(link.source, (outgoing.get(link.source) ?? 0) + link.value);\n        incoming.set(link.target, (incoming.get(link.target) ?? 0) + link.value);\n      }\n      const values = data.nodes.map(\n        (_, i) => incoming.get(i) ?? outgoing.get(i) ?? 0\n      );\n      const total = values.length ? Math.max(...values) : 0;\n      return data.nodes.map((node, i) => ({\n        name: node.name,\n        value: values[i],\n        pct: total > 0 ? Math.round((values[i] / total) * 100) : 0,\n      }));\n    }, [data]);\n\n    return (\n      <div\n        ref={ref}\n        // The legend sits outside `ChartContainer`, so the root carries its own\n        // `--color-<name>` scope for it (the plot and the recharts-portaled\n        // tooltip resolve theirs from ChartContainer's).\n        data-chart={chartId}\n        className={cn('flex flex-col', className)}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ChartContainer config={config} className=\"min-h-0 flex-1\">\n          <RechartsSankey\n            data={data as { nodes: SankeyChartNode[]; links: SankeyChartLink[] }}\n            node={nodeRenderer}\n            link={SankeyLinkShape}\n            nodePadding={nodePadding}\n            nodeWidth={nodeWidth}\n            linkCurvature={linkCurvature}\n            sort={sort}\n            // recharts defaults to `justify`, which right-aligns sink nodes to\n            // the last column — so a terminal node like \"No certification\" would\n            // jump to the far right instead of staying at its real depth. `left`\n            // positions every node by its distance from the source, keeping the\n            // flow's columns intact.\n            align=\"left\"\n            // Node labels never extend past the plot's right edge: a node in the\n            // last column has no outgoing links, so its label is drawn to the\n            // LEFT of its bar (see the node renderer). Only a small gutter is\n            // needed here — a wide reserve would just shrink the diagram.\n            margin={{ top: 8, right: 24, bottom: 8, left: 24 }}\n          >\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? defaultTooltip} />\n            )}\n          </RechartsSankey>\n        </ChartContainer>\n        {showLegend && (\n          <div className=\"mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs\">\n            {nodeStats.map(({ name, value, pct }) => (\n              <div key={name} className=\"flex items-center gap-2\">\n                <span\n                  className=\"size-2.5 shrink-0 rounded-full\"\n                  style={{ backgroundColor: `var(--color-${name})` }}\n                />\n                <span className=\"truncate text-muted-foreground\">\n                  {config[name]?.label ?? name}\n                </span>\n                <span className=\"ms-auto font-semibold tabular-nums\">\n                  {value.toLocaleString()}\n                </span>\n                <span className=\"w-9 shrink-0 text-end tabular-nums text-muted-foreground\">\n                  {pct}%\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\nSankeyChart.displayName = 'SankeyChart';\n\nexport { SankeyChart };\n"],"names":["makeNodeRenderer","config","sourceIndices","showLabels","x","y","width","height","index","payload","name","label","_a","isSource","jsx","Rectangle","SankeyLinkShape","sourceX","targetX","sourceY","targetY","sourceControlX","targetControlX","linkWidth","targetName","stroke","makeSankeyTooltip","links","nodes","labelFor","key","styleByName","link","source","target","_b","active","item","parts","targetKey","linkStyle","dotColor","dotOpacity","value","jsxs","React","formatTooltipValue","part","SankeyChart","className","data","nodePadding","nodeWidth","linkCurvature","sort","showLegend","showTooltip","tooltipContent","props","ref","chartId","nodeRenderer","defaultTooltip","nodeStats","incoming","outgoing","values","_","i","total","node","cn","ChartStyle","ChartContainer","RechartsSankey","ChartTooltip","pct"],"mappings":"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"}

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

@@ -1,92 +1,120 @@
-import { jsx as t, jsxs as S } from "react/jsx-runtime";
-import * as A from "react";
-import { ScatterChart as T, CartesianGrid as b, XAxis as L, YAxis as N, ZAxis as j, Scatter as w } from "recharts";
-import { cn as M } from "../../../lib/utils.js";
-import { ChartContainer as R, ChartTooltip as $, ChartTooltipContent as B, ChartLegend as D, ChartLegendContent as G } from "../chart/chart.js";
-const X = A.forwardRef(
+import { jsx as t, jsxs as H } from "react/jsx-runtime";
+import * as X from "react";
+import { ScatterChart as Y, CartesianGrid as Z, XAxis as _, YAxis as q, ZAxis as z, Scatter as E } from "recharts";
+import { cn as I } from "../../../lib/utils.js";
+import { ChartContainer as J, ChartTooltip as O, ChartTooltipContent as P, ChartLegend as Q, ChartLegendContent as U } from "../chart/chart.js";
+import { resolveAxisDomain as V } from "../chart/chart-format.js";
+const W = X.forwardRef(
   ({
-    className: l,
+    className: c,
     config: s,
-    series: c,
+    series: m,
     xKey: n,
-    yKey: o,
-    zKey: a,
-    zRange: m = [60, 400],
-    shape: d = "circle",
+    yKey: l,
+    zKey: i,
+    zRange: d = [60, 400],
+    shape: h = "circle",
     xAxisLabel: r,
-    yAxisLabel: i,
-    xUnit: f,
-    yUnit: h,
+    yAxisLabel: o,
+    xUnit: u,
+    yUnit: f,
     showGrid: p = !0,
-    showTooltip: u = !0,
+    showTooltip: v = !0,
     showLegend: C = !0,
-    tooltipContent: g,
-    ...v
-  }, k) => {
-    const y = r ? { value: r, position: "insideBottom", offset: -8 } : void 0, x = i ? {
-      value: i,
+    showXAxis: k = !0,
+    showYAxis: g = !0,
+    xTickFormatter: y,
+    yTickFormatter: S,
+    xAxisAngle: e,
+    xAxisInterval: D,
+    yAxisTickCount: T,
+    yAxisDomain: N,
+    gridDashed: b,
+    gridHorizontal: j,
+    gridVertical: w,
+    tooltipContent: F,
+    ...L
+  }, M) => {
+    const R = r ? { value: r, position: "insideBottom", offset: -8 } : void 0, $ = o ? {
+      value: o,
       angle: -90,
       position: "insideLeft",
       style: { textAnchor: "middle" }
-    } : void 0;
-    return /* @__PURE__ */ t("div", { ref: k, className: M(l), ...v, children: /* @__PURE__ */ t(
-      R,
+    } : void 0, B = V(N), G = r || e != null ? 30 + (e != null ? 20 : 0) + (r ? 18 : 0) : void 0;
+    return /* @__PURE__ */ t("div", { ref: M, className: I(c), ...L, children: /* @__PURE__ */ t(
+      J,
       {
         config: s,
         className: "size-full [&_.recharts-label]:fill-foreground",
-        children: /* @__PURE__ */ S(
-          T,
+        children: /* @__PURE__ */ H(
+          Y,
           {
             margin: { top: 16, right: 16, bottom: 16, left: 16 },
             children: [
-              p && /* @__PURE__ */ t(b, {}),
+              p && /* @__PURE__ */ t(
+                Z,
+                {
+                  horizontal: j ?? !0,
+                  vertical: w ?? !0,
+                  strokeDasharray: b ? "3 3" : void 0
+                }
+              ),
               /* @__PURE__ */ t(
-                L,
+                _,
                 {
                   type: "number",
                   dataKey: n,
                   name: n,
-                  unit: f,
+                  unit: u,
+                  hide: !k,
                   tickLine: !1,
                   axisLine: !1,
                   tickMargin: 8,
-                  height: r ? 48 : void 0,
-                  label: y
+                  tickFormatter: y,
+                  angle: e,
+                  interval: D,
+                  textAnchor: e != null ? e < 0 ? "end" : "start" : void 0,
+                  height: G,
+                  label: R
                 }
               ),
               /* @__PURE__ */ t(
-                N,
+                q,
                 {
                   type: "number",
-                  dataKey: o,
-                  name: o,
-                  unit: h,
+                  dataKey: l,
+                  name: l,
+                  unit: f,
+                  hide: !g,
                   tickLine: !1,
                   axisLine: !1,
                   tickMargin: 8,
-                  width: i ? 72 : void 0,
-                  label: x
+                  tickFormatter: S,
+                  tickCount: T,
+                  domain: B,
+                  width: o ? 72 : void 0,
+                  label: $
                 }
               ),
-              a && /* @__PURE__ */ t(j, { type: "number", dataKey: a, range: m, name: a }),
-              u && /* @__PURE__ */ t(
-                $,
+              i && /* @__PURE__ */ t(z, { type: "number", dataKey: i, range: d, name: i }),
+              v && /* @__PURE__ */ t(
+                O,
                 {
                   cursor: { strokeDasharray: "3 3" },
-                  content: g ?? /* @__PURE__ */ t(B, {})
+                  content: F ?? /* @__PURE__ */ t(P, {})
                 }
               ),
-              C && /* @__PURE__ */ t(D, { content: /* @__PURE__ */ t(G, {}) }),
-              c.map((e) => /* @__PURE__ */ t(
-                w,
+              C && /* @__PURE__ */ t(Q, { content: /* @__PURE__ */ t(U, {}) }),
+              m.map((a) => /* @__PURE__ */ t(
+                E,
                 {
-                  name: e.key,
-                  data: e.data,
-                  fill: `var(--color-${e.key})`,
-                  shape: d,
+                  name: a.key,
+                  data: a.data,
+                  fill: `var(--color-${a.key})`,
+                  shape: h,
                   isAnimationActive: !1
                 },
-                e.key
+                a.key
               ))
             ]
           }
@@ -95,8 +123,8 @@ const X = A.forwardRef(
     ) });
   }
 );
-X.displayName = "ScatterChart";
+W.displayName = "ScatterChart";
 export {
-  X as ScatterChart
+  W as ScatterChart
 };
 //# sourceMappingURL=scatter-chart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scatter-chart.js","sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\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. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\n  /**\n   * Per-series map of `label` / `color`, keyed by `series[].key` (imported from\n   * the shared `Chart` primitives). Turned into `--color-<key>` custom\n   * properties. Colors are caller-supplied — reference an existing semantic\n   * `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: 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 X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`). */\n  yUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\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 ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\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: -8 }\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    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && <CartesianGrid />}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${s.key})`}\n                shape={shape}\n                isAnimationActive={false}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"names":["ScatterChart","React","className","config","series","xKey","yKey","zKey","zRange","shape","xAxisLabel","yAxisLabel","xUnit","yUnit","showGrid","showTooltip","showLegend","tooltipContent","props","ref","xAxisTitle","yAxisTitle","jsx","cn","ChartContainer","jsxs","RechartsScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","Scatter"],"mappings":";;;;;AAuFA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC,IAAS,CAAC,IAAI,GAAG;AAAA,IACjB,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAaV,IACf,EAAE,OAAOA,GAAY,UAAU,gBAAyB,QAAQ,GAAA,IAChE,QACEW,IAAaV,IACf;AAAA,MACE,OAAOA;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAA;AAAA,IAAkB,IAEzC;AAEJ,WACE,gBAAAW,EAAC,SAAI,KAAAH,GAAU,WAAWI,EAAGrB,CAAS,GAAI,GAAGgB,GAC3C,UAAA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAArB;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAsB;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AAAA,YAE/C,UAAA;AAAA,cAAAZ,uBAAaa,GAAA,EAAc;AAAA,cAC5B,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAASvB;AAAA,kBACT,MAAMA;AAAA,kBACN,MAAMO;AAAA,kBACN,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,QAAQF,IAAa,KAAK;AAAA,kBAC1B,OAAOU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAET,gBAAAE;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAASvB;AAAA,kBACT,MAAMA;AAAA,kBACN,MAAMO;AAAA,kBACN,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAOF,IAAa,KAAK;AAAA,kBACzB,OAAOU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAERd,KACC,gBAAAe,EAACQ,GAAA,EAAM,MAAK,UAAS,SAASvB,GAAM,OAAOC,GAAQ,MAAMD,EAAA,CAAM;AAAA,cAEhEQ,KACC,gBAAAO;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,QAAQ,EAAE,iBAAiB,MAAA;AAAA,kBAC3B,SAASd,KAAkB,gBAAAK,EAACU,GAAA,CAAA,CAAoB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGnDhB,KAAc,gBAAAM,EAACW,GAAA,EAAY,SAAS,gBAAAX,EAACY,KAAmB,GAAI;AAAA,cAC5D9B,EAAO,IAAI,CAAC+B,MACX,gBAAAb;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBAEC,MAAMD,EAAE;AAAA,kBACR,MAAMA,EAAE;AAAA,kBACR,MAAM,eAAeA,EAAE,GAAG;AAAA,kBAC1B,OAAA1B;AAAA,kBACA,mBAAmB;AAAA,gBAAA;AAAA,gBALd0B,EAAE;AAAA,cAAA,CAOV;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAnC,EAAa,cAAc;"}
+{"version":3,"file":"scatter-chart.js","sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\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. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps {\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\n  /**\n   * Per-series map of `label` / `color`, keyed by `series[].key` (imported from\n   * the shared `Chart` primitives). Turned into `--color-<key>` custom\n   * properties. Colors are caller-supplied — reference an existing semantic\n   * `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: string;\n  /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\n  showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\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    // 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: -8 }\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    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? true}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\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              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${s.key})`}\n                shape={shape}\n                isAnimationActive={false}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"names":["ScatterChart","React","className","config","series","xKey","yKey","zKey","zRange","shape","xAxisLabel","yAxisLabel","xUnit","yUnit","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","props","ref","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","jsx","cn","ChartContainer","jsxs","RechartsScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","Scatter"],"mappings":"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"}

package/dist/components/ui/toolbar/toolbar.js

@@ -1,26 +1,27 @@
-import { jsx as a, jsxs as R } from "react/jsx-runtime";
-import * as l from "react";
-import { Toolbar as v } from "@base-ui/react/toolbar";
+import { jsx as l, jsxs as C } from "react/jsx-runtime";
+import * as i from "react";
+import { Toolbar as R } from "@base-ui/react/toolbar";
 import { cn as T } from "../../../lib/utils.js";
-import { Button as x } from "../button/button.js";
-import { DropdownMenu as F, DropdownMenuTrigger as L, DropdownMenuContent as _, DropdownMenuItem as I } from "../dropdown-menu/dropdown-menu.js";
+import { Button as E } from "../button/button.js";
+import { DropdownMenu as _, DropdownMenuTrigger as F, DropdownMenuContent as I, DropdownMenuItem as P } from "../dropdown-menu/dropdown-menu.js";
 import { ButtonMenu as A } from "../button-menu/button-menu.js";
-const j = l.forwardRef(
-  ({ className: r, ...t }, n) => /* @__PURE__ */ a(
+const k = i.createContext(!1), j = i.forwardRef(
+  ({ className: r, disabled: t, ...n }, c) => /* @__PURE__ */ l(k.Provider, { value: !!t, children: /* @__PURE__ */ l(
     "fieldset",
     {
-      ref: n,
+      ref: c,
       className: T(
         "m-0 flex min-w-0 items-center gap-4 border-0 p-0",
         r
       ),
-      ...t
+      disabled: t,
+      ...n
     }
-  )
+  ) })
 );
 j.displayName = "Toolbar";
-const P = l.forwardRef(
-  ({ className: r, ...t }, n) => /* @__PURE__ */ a(
+const X = i.forwardRef(
+  ({ className: r, ...t }, n) => /* @__PURE__ */ l(
     "div",
     {
       ref: n,
@@ -32,21 +33,21 @@ const P = l.forwardRef(
     }
   )
 );
-P.displayName = "ToolbarActions";
+X.displayName = "ToolbarActions";
 const M = 16;
-function X(r, t, n, m) {
+function G(r, t, n, c) {
   const d = r.length;
   if (d === 0) return 0;
-  if (r.reduce((c, h) => c + h, 0) + n * (d - 1) <= m) return d;
+  if (r.reduce((u, p) => u + p, 0) + n * (d - 1) <= c) return d;
   let o = t, s = 0;
-  for (let c = 0; c < d; c++) {
-    const h = o + r[c] + n;
-    if (h > m) break;
-    o = h, s++;
+  for (let u = 0; u < d; u++) {
+    const p = o + r[u] + n;
+    if (p > c) break;
+    o = p, s++;
   }
   return s;
 }
-function G(r) {
+function V(r) {
   const t = Array.from(r.childNodes).filter(
     (o) => {
       var s;
@@ -54,74 +55,63 @@ function G(r) {
     }
   );
   if (t.length === 0) return r.getBoundingClientRect().width;
-  const n = getComputedStyle(r), m = parseFloat(n.columnGap) || 0, d = (parseFloat(n.paddingLeft) || 0) + (parseFloat(n.paddingRight) || 0) + (parseFloat(n.borderLeftWidth) || 0) + (parseFloat(n.borderRightWidth) || 0);
+  const n = getComputedStyle(r), c = parseFloat(n.columnGap) || 0, d = (parseFloat(n.paddingLeft) || 0) + (parseFloat(n.paddingRight) || 0) + (parseFloat(n.borderLeftWidth) || 0) + (parseFloat(n.borderRightWidth) || 0);
   return t.map((o) => {
     if (o.nodeType === Node.TEXT_NODE) {
       const s = document.createRange();
       return s.selectNodeContents(o), s.getBoundingClientRect().width;
     }
     return o.getBoundingClientRect().width;
-  }).reduce((o, s) => o + s, 0) + m * (t.length - 1) + d;
+  }).reduce((o, s) => o + s, 0) + c * (t.length - 1) + d;
 }
-function V(...r) {
+function z(...r) {
   return (t) => {
     for (const n of r)
       n && (typeof n == "function" ? n(t) : n.current = t);
   };
 }
-const z = l.forwardRef(
-  ({ className: r, actions: t, moreActionsLabel: n = "More actions", ...m }, d) => {
-    const u = l.useRef(null), o = l.useRef(
+const $ = i.forwardRef(
+  ({ className: r, actions: t, moreActionsLabel: n = "More actions", ...c }, d) => {
+    const f = i.useRef(null), o = i.useRef(
       /* @__PURE__ */ new Map()
-    ), s = l.useRef(null), [c, h] = l.useState(t.length), [k, C] = l.useState(!1), [g, B] = l.useState(!1);
-    l.useEffect(() => {
-      var p;
-      const e = (p = u.current) == null ? void 0 : p.closest("fieldset");
-      if (!e) return;
-      const i = () => B(e.disabled);
-      i();
-      const f = new MutationObserver(i);
-      return f.observe(e, {
-        attributes: !0,
-        attributeFilter: ["disabled"]
-      }), () => f.disconnect();
-    }, []), l.useEffect(() => {
-      g && C(!1);
-    }, [g]);
-    const y = l.useCallback(() => {
-      var E;
-      const e = u.current, i = e == null ? void 0 : e.parentElement;
-      if (!e || !i) return;
-      const f = Array.from(i.children).filter((b) => b !== e).reduce((b, w) => b + G(w), 0), p = Math.max(i.children.length - 1, 0), O = i.clientWidth - f - M * p, S = t.map(
-        (b) => {
+    ), s = i.useRef(null), [u, p] = i.useState(t.length), [B, v] = i.useState(!1), m = i.useContext(k), D = B && !m;
+    i.useEffect(() => {
+      m && v(!1);
+    }, [m]);
+    const y = i.useCallback(() => {
+      var x;
+      const e = f.current, a = e == null ? void 0 : e.parentElement;
+      if (!e || !a) return;
+      const g = Array.from(a.children).filter((h) => h !== e).reduce((h, w) => h + V(w), 0), b = Math.max(a.children.length - 1, 0), W = a.clientWidth - g - M * b, L = t.map(
+        (h) => {
           var w;
-          return ((w = o.current.get(b.key)) == null ? void 0 : w.getBoundingClientRect().width) ?? 0;
+          return ((w = o.current.get(h.key)) == null ? void 0 : w.getBoundingClientRect().width) ?? 0;
         }
-      ), W = ((E = s.current) == null ? void 0 : E.getBoundingClientRect().width) ?? 0;
-      h(
-        X(
+      ), S = ((x = s.current) == null ? void 0 : x.getBoundingClientRect().width) ?? 0;
+      p(
+        G(
+          L,
           S,
-          W,
           M,
-          O
+          W
         )
       );
     }, [t]);
-    l.useLayoutEffect(() => {
-      var f;
+    i.useLayoutEffect(() => {
+      var g;
       y();
-      const e = (f = u.current) == null ? void 0 : f.parentElement;
+      const e = (g = f.current) == null ? void 0 : g.parentElement;
       if (!e) return;
-      const i = new ResizeObserver(y);
-      return i.observe(e), Array.from(e.children).forEach((p) => {
-        p !== u.current && i.observe(p);
-      }), () => i.disconnect();
+      const a = new ResizeObserver(y);
+      return a.observe(e), Array.from(e.children).forEach((b) => {
+        b !== f.current && a.observe(b);
+      }), () => a.disconnect();
     }, [y, t]);
-    const D = t.slice(0, c), N = t.slice(c);
-    return /* @__PURE__ */ R(
-      v.Root,
+    const O = t.slice(0, u), N = t.slice(u);
+    return /* @__PURE__ */ C(
+      R.Root,
       {
-        ref: V(u, d),
+        ref: z(f, d),
         className: T(
           // `overflow-hidden` clips the invisible measurement clone below —
           // it's `position: absolute` + `visibility: hidden`, which keeps
@@ -133,40 +123,40 @@ const z = l.forwardRef(
           "relative flex min-w-0 flex-nowrap items-center gap-4 overflow-hidden",
           r
         ),
-        ...m,
+        ...c,
         children: [
-          D.map((e) => /* @__PURE__ */ a(
-            v.Button,
+          O.map((e) => /* @__PURE__ */ l(
+            R.Button,
             {
               disabled: e.disabled,
               focusableWhenDisabled: !e.disabled,
               onClick: e.onSelect,
-              render: /* @__PURE__ */ a(x, { variant: "ghost", children: e.label })
+              render: /* @__PURE__ */ l(E, { variant: "ghost", children: e.label })
             },
             e.key
           )),
-          N.length > 0 && /* @__PURE__ */ R(
-            F,
+          N.length > 0 && /* @__PURE__ */ C(
+            _,
             {
-              open: k,
-              onOpenChange: C,
-              disabled: g,
+              open: D,
+              onOpenChange: v,
+              disabled: m,
               children: [
-                /* @__PURE__ */ a(
-                  v.Button,
+                /* @__PURE__ */ l(
+                  R.Button,
                   {
-                    render: /* @__PURE__ */ a(
-                      L,
+                    render: /* @__PURE__ */ l(
+                      F,
                       {
-                        render: /* @__PURE__ */ a(A, { variant: "secondary", children: n })
+                        render: /* @__PURE__ */ l(A, { variant: "secondary", children: n })
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ a(_, { align: "start", children: N.map((e) => /* @__PURE__ */ a(
-                  I,
+                /* @__PURE__ */ l(I, { align: "start", children: N.map((e) => /* @__PURE__ */ l(
+                  P,
                   {
-                    disabled: e.disabled || g,
+                    disabled: e.disabled || m,
                     onClick: e.onSelect,
                     children: e.label
                   },
@@ -175,18 +165,18 @@ const z = l.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ R(
+          /* @__PURE__ */ C(
             "div",
             {
               "aria-hidden": !0,
               inert: !0,
               className: "pointer-events-none invisible absolute start-0 top-0 flex items-center gap-4",
               children: [
-                t.map((e) => /* @__PURE__ */ a(
-                  x,
+                t.map((e) => /* @__PURE__ */ l(
+                  E,
                   {
-                    ref: (i) => {
-                      o.current.set(e.key, i);
+                    ref: (a) => {
+                      o.current.set(e.key, a);
                     },
                     variant: "ghost",
                     tabIndex: -1,
@@ -194,7 +184,7 @@ const z = l.forwardRef(
                   },
                   e.key
                 )),
-                /* @__PURE__ */ a(A, { ref: s, variant: "secondary", tabIndex: -1, children: n })
+                /* @__PURE__ */ l(A, { ref: s, variant: "secondary", tabIndex: -1, children: n })
               ]
             }
           )
@@ -203,12 +193,12 @@ const z = l.forwardRef(
     );
   }
 );
-z.displayName = "ToolbarActionList";
+$.displayName = "ToolbarActionList";
 export {
   j as Toolbar,
-  z as ToolbarActionList,
-  P as ToolbarActions,
-  X as computeVisibleActionCount,
-  G as measureNaturalWidth
+  $ as ToolbarActionList,
+  X as ToolbarActions,
+  G as computeVisibleActionCount,
+  V as measureNaturalWidth
 };
 //# sourceMappingURL=toolbar.js.map