@acronis-platform/ui-react 4.0.0 → 4.1.0

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

@@ -1,163 +1,124 @@
-import { jsxs as l, jsx as r, Fragment as S } from "react/jsx-runtime";
-import * as h 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 { cn as v } from "../../../lib/utils.js";
-import { resolveChartColors as E, ChartStyle as C } from "../chart/chart.js";
-import { CHART_DEFAULT_PALETTE as F } from "../chart/chart-palette.js";
-import { Tooltip as I, TooltipTrigger as L, TooltipContent as O } from "../tooltip/tooltip.js";
-const R = (n) => n.toLocaleString(), q = A(
-  "flex w-full overflow-hidden rounded-full bg-input",
-  {
-    variants: {
-      size: {
-        sm: "h-1.5",
-        md: "h-2.5",
-        lg: "h-4"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function M({
-  chartId: n,
-  config: s,
-  color: o,
-  label: i,
-  percent: d,
-  segmentKey: u,
-  value: m,
-  valueFormatter: f,
-  renderContent: t
-}) {
-  return /* @__PURE__ */ l(
-    O,
-    {
-      "data-chart": n,
-      className: v(
-        "border border-border bg-background text-foreground shadow-md",
-        !t && "flex items-center gap-2"
-      ),
-      children: [
-        /* @__PURE__ */ r(C, { id: n, config: s }),
-        t ? t({ key: u, value: m, label: i, percent: d, color: o }) : /* @__PURE__ */ l(S, { children: [
-          /* @__PURE__ */ r(
-            "span",
-            {
-              className: "size-2.5 shrink-0 rounded-full",
-              style: { backgroundColor: o }
-            }
-          ),
-          /* @__PURE__ */ r("span", { className: "font-semibold", children: i }),
-          /* @__PURE__ */ l("span", { className: "text-muted-foreground tabular-nums", children: [
-            f(m),
-            " · ",
-            d,
-            "%"
-          ] })
-        ] })
-      ]
-    }
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../tooltip/tooltip.js";
+import { CHART_DEFAULT_PALETTE as a } from "../chart/chart-palette.js";
+import { ChartStyle as o, resolveChartColors as s } from "../chart/chart.js";
+import * as c from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/ui/category-bar/category-bar.tsx
+var f = (e) => e.toLocaleString(), p = t("flex w-full overflow-hidden rounded-full bg-input", {
+	variants: { size: {
+		sm: "h-1.5",
+		md: "h-2.5",
+		lg: "h-4"
+	} },
+	defaultVariants: { size: "md" }
+});
+function m({ chartId: t, config: n, color: i, label: a, percent: s, segmentKey: c, value: f, valueFormatter: p, renderContent: m }) {
+	return /* @__PURE__ */ d(r, {
+		"data-chart": t,
+		className: e("border border-border bg-background text-foreground shadow-md", !m && "flex items-center gap-2"),
+		children: [/* @__PURE__ */ u(o, {
+			id: t,
+			config: n
+		}), m ? m({
+			key: c,
+			value: f,
+			label: a,
+			percent: s,
+			color: i
+		}) : /* @__PURE__ */ d(l, { children: [
+			/* @__PURE__ */ u("span", {
+				className: "size-2.5 shrink-0 rounded-full",
+				style: { backgroundColor: i }
+			}),
+			/* @__PURE__ */ u("span", {
+				className: "font-semibold",
+				children: a
+			}),
+			/* @__PURE__ */ d("span", {
+				className: "text-muted-foreground tabular-nums",
+				children: [
+					p(f),
+					" · ",
+					s,
+					"%"
+				]
+			})
+		] })]
+	});
 }
-const V = h.forwardRef(
-  ({
-    className: n,
-    data: s,
-    config: o,
-    palette: i = F,
-    size: d,
-    showLegend: u = !1,
-    showTooltip: m = !0,
-    tooltipContent: f,
-    valueFormatter: t = R,
-    defaultOpenIndex: T,
-    "aria-label": w,
-    ...$
-  }, j) => {
-    const p = `chart-${h.useId().replace(/:/g, "")}`, b = h.useMemo(
-      () => E(o, i),
-      [o, i]
-    ), g = s.reduce((e, a) => e + a.value, 0), x = (e) => {
-      var a;
-      return ((a = o[e]) == null ? void 0 : a.label) ?? e;
-    }, z = (e) => {
-      var c;
-      const a = (c = o[e]) == null ? void 0 : c.label;
-      return typeof a == "string" || typeof a == "number" ? String(a) : e;
-    }, y = (e) => `var(--color-${e})`, N = (e) => g > 0 ? Math.round(e / g * 100) : 0, B = w ?? s.map((e) => `${z(e.key)} ${t(e.value)}`).join(", ");
-    return /* @__PURE__ */ l(
-      "div",
-      {
-        ref: j,
-        "data-chart": p,
-        className: v("flex w-full flex-col gap-3", n),
-        ...$,
-        children: [
-          /* @__PURE__ */ r(C, { id: p, config: b }),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              className: q({ size: d }),
-              role: "img",
-              "aria-label": B,
-              children: s.map((e, a) => {
-                const c = y(e.key), k = /* @__PURE__ */ r(
-                  "div",
-                  {
-                    className: "h-full min-w-0",
-                    style: { flex: `${e.value} 0 0%`, backgroundColor: c }
-                  },
-                  e.key
-                );
-                return m ? /* @__PURE__ */ l(I, { defaultOpen: a === T, children: [
-                  /* @__PURE__ */ r(L, { render: k }),
-                  /* @__PURE__ */ r(
-                    M,
-                    {
-                      chartId: p,
-                      config: b,
-                      color: c,
-                      label: x(e.key),
-                      percent: N(e.value),
-                      segmentKey: e.key,
-                      value: e.value,
-                      valueFormatter: t,
-                      renderContent: f
-                    }
-                  )
-                ] }, e.key) : k;
-              })
-            }
-          ),
-          u && /* @__PURE__ */ r("ul", { className: "flex flex-wrap justify-between gap-x-6 gap-y-3", children: s.map((e) => /* @__PURE__ */ l("li", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ l("span", { className: "flex items-center gap-1.5 text-sm leading-none text-muted-foreground", children: [
-              /* @__PURE__ */ r(
-                "span",
-                {
-                  className: "size-2.5 shrink-0 rounded-sm",
-                  style: { backgroundColor: y(e.key) }
-                }
-              ),
-              x(e.key)
-            ] }),
-            /* @__PURE__ */ l("span", { className: "flex items-baseline gap-1.5 leading-none tabular-nums", children: [
-              /* @__PURE__ */ r("span", { className: "text-base font-semibold text-foreground", children: t(e.value) }),
-              /* @__PURE__ */ l("span", { className: "text-sm text-muted-foreground", children: [
-                N(e.value),
-                "%"
-              ] })
-            ] })
-          ] }, e.key)) })
-        ]
-      }
-    );
-  }
-);
-V.displayName = "CategoryBar";
-export {
-  V as CategoryBar,
-  q as categoryBarVariants
-};
-//# sourceMappingURL=category-bar.js.map
+var h = c.forwardRef(({ className: t, data: r, config: l, palette: h = a, size: g, showLegend: _ = !1, showTooltip: v = !0, tooltipContent: y, valueFormatter: b = f, defaultOpenIndex: x, "aria-label": S, ...C }, w) => {
+	let T = `chart-${c.useId().replace(/:/g, "")}`, E = c.useMemo(() => s(l, h), [l, h]), D = r.reduce((e, t) => e + t.value, 0), O = (e) => l[e]?.label ?? e, k = (e) => {
+		let t = l[e]?.label;
+		return typeof t == "string" || typeof t == "number" ? String(t) : e;
+	}, A = (e) => `var(--color-${e})`, j = (e) => D > 0 ? Math.round(e / D * 100) : 0, M = S ?? r.map((e) => `${k(e.key)} ${b(e.value)}`).join(", ");
+	return /* @__PURE__ */ d("div", {
+		ref: w,
+		"data-chart": T,
+		className: e("flex w-full flex-col gap-3", t),
+		...C,
+		children: [
+			/* @__PURE__ */ u(o, {
+				id: T,
+				config: E
+			}),
+			/* @__PURE__ */ u("div", {
+				className: p({ size: g }),
+				role: "img",
+				"aria-label": M,
+				children: r.map((e, t) => {
+					let r = A(e.key), a = /* @__PURE__ */ u("div", {
+						className: "h-full min-w-0",
+						style: {
+							flex: `${e.value} 0 0%`,
+							backgroundColor: r
+						}
+					}, e.key);
+					return v ? /* @__PURE__ */ d(n, {
+						defaultOpen: t === x,
+						children: [/* @__PURE__ */ u(i, { render: a }), /* @__PURE__ */ u(m, {
+							chartId: T,
+							config: E,
+							color: r,
+							label: O(e.key),
+							percent: j(e.value),
+							segmentKey: e.key,
+							value: e.value,
+							valueFormatter: b,
+							renderContent: y
+						})]
+					}, e.key) : a;
+				})
+			}),
+			_ && /* @__PURE__ */ u("ul", {
+				className: "flex flex-wrap justify-between gap-x-6 gap-y-3",
+				children: r.map((e) => /* @__PURE__ */ d("li", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ d("span", {
+						className: "flex items-center gap-1.5 text-sm leading-none text-muted-foreground",
+						children: [/* @__PURE__ */ u("span", {
+							className: "size-2.5 shrink-0 rounded-sm",
+							style: { backgroundColor: A(e.key) }
+						}), O(e.key)]
+					}), /* @__PURE__ */ d("span", {
+						className: "flex items-baseline gap-1.5 leading-none tabular-nums",
+						children: [/* @__PURE__ */ u("span", {
+							className: "text-base font-semibold text-foreground",
+							children: b(e.value)
+						}), /* @__PURE__ */ d("span", {
+							className: "text-sm text-muted-foreground",
+							children: [j(e.value), "%"]
+						})]
+					})]
+				}, e.key))
+			})
+		]
+	});
+});
+h.displayName = "CategoryBar";
+//#endregion
+export { h as CategoryBar, p as categoryBarVariants };
+
+//# sourceMappingURL=category-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"category-bar.js","sources":["../../../../src/components/ui/category-bar/category-bar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_DEFAULT_PALETTE,\n  ChartStyle,\n  resolveChartColors,\n  type ChartConfig,\n  type ChartPalette,\n  type ResolvedChartConfig,\n} from '../chart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A category bar: a single horizontal bar split into proportional colored\n// segments — one part-to-whole across a handful of categories, in one row\n// (onboarding stages, certification status, a rating scale). Unlike `Meter`\n// (one value per row, stacked into a bar list), all segments share the same bar.\n// It's a plain flex composition, not a recharts chart: each segment's width is\n// `value / total`, so exact proportions and the count/% legend are direct DOM,\n// with no axes/grid to hide. Segment colors come from the `palette` prop, the\n// same dataviz palettes the recharts charts use.\n//\n// Colors are consumed through the same `--color-<key>` bridge the recharts\n// charts use: `ChartStyle` emits one custom property per config entry, so a\n// `theme: { light, dark }` entry works as well as a flat `color` — reading\n// `config[key].color` directly would render a themed config colorless. The\n// tooltip is portaled out of the bar's DOM, so its popup carries its own\n// `data-chart` scope + `ChartStyle` to keep the bridge resolvable there.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\n// Track height only — the flex/rounded/overflow chrome is static.\nconst categoryBarVariants = cva(\n  'flex w-full overflow-hidden rounded-full bg-input',\n  {\n    variants: {\n      size: {\n        sm: 'h-1.5',\n        md: 'h-2.5',\n        lg: 'h-4',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface CategoryBarSegment {\n  /** Key into `config` for this segment's label + color. */\n  key: string;\n  /** The segment's value — its width is this over the sum of all values. */\n  value: number;\n}\n\n/** The resolved segment passed to a custom `tooltipContent` renderer. */\nexport interface CategoryBarTooltipContext extends CategoryBarSegment {\n  /** Resolved `config` label (falls back to the key); may be any `ReactNode`. */\n  label: React.ReactNode;\n  /** Share of the total as a rounded percentage (0–100). */\n  percent: number;\n  /**\n   * CSS color reference for the segment — the `var(--color-<key>)` bridge, which\n   * resolves the palette stop assigned to this segment. Usable anywhere a CSS\n   * color is (e.g. a `style` background); not a literal value.\n   */\n  color: string;\n}\n\nexport interface CategoryBarProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof categoryBarVariants> {\n  /** Ordered segments (left → right). Widths are proportional to `value`. */\n  data: ReadonlyArray<CategoryBarSegment>;\n  /** Maps each segment `key` to a `label` and, optionally, a palette `tone`. */\n  config: ChartConfig;\n  /**\n   * The dataviz palette the segments are painted from. Segments take a stop of\n   * it in the palette's defined order, or the one their `tone` names. Defaults\n   * to `categorical`.\n   */\n  palette?: ChartPalette;\n  /** Show the legend below the bar (color dot + label + value + %). */\n  showLegend?: boolean;\n  /** Show a hover tooltip per segment (dot + label + value + %). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content per segment — replaces the default (dot + label +\n   * `value · %`) inside the same card. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n  /** Format the numeric value (legend + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Render the tooltip for this segment index initially open (VR/testing). */\n  defaultOpenIndex?: number;\n  /**\n   * Accessible summary of the whole bar. Defaults to a `label value` list built\n   * from the data; pass a fuller sentence for screen readers if you have one.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * One segment's hover card.\n *\n * It re-declares `data-chart` and re-renders `ChartStyle` because the popup is\n * portaled out of the bar: outside that subtree the `--color-*` bridge the\n * swatch reads has nothing to resolve against.\n */\nfunction CategoryBarSegmentTooltip({\n  chartId,\n  config,\n  color,\n  label,\n  percent,\n  segmentKey,\n  value,\n  valueFormatter,\n  renderContent,\n}: {\n  chartId: string;\n  config: ResolvedChartConfig;\n  color: string;\n  label: React.ReactNode;\n  percent: number;\n  segmentKey: string;\n  value: number;\n  valueFormatter: (value: number) => string;\n  // Not named `render`: in this package that name is reserved for Base UI's\n  // polymorphic composition prop (see `<TooltipTrigger render={…} />` below).\n  renderContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n}) {\n  return (\n    <TooltipContent\n      data-chart={chartId}\n      className={cn(\n        'border border-border bg-background text-foreground shadow-md',\n        !renderContent && 'flex items-center gap-2'\n      )}\n    >\n      <ChartStyle id={chartId} config={config} />\n      {renderContent ? (\n        renderContent({ key: segmentKey, value, label, percent, color })\n      ) : (\n        <>\n          <span\n            className=\"size-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n          <span className=\"font-semibold\">{label}</span>\n          <span className=\"text-muted-foreground tabular-nums\">\n            {valueFormatter(value)} · {percent}%\n          </span>\n        </>\n      )}\n    </TooltipContent>\n  );\n}\n\nconst CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>(\n  (\n    {\n      className,\n      data,\n      config,\n      palette = CHART_DEFAULT_PALETTE,\n      size,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      valueFormatter = defaultFormat,\n      defaultOpenIndex,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n    // Resolved here rather than by a `ChartContainer`: this component paints\n    // plain divs, not a recharts plot, so it owns the `--color-*` emission for\n    // both the bar and its portaled per-segment tooltip.\n    const resolvedConfig = React.useMemo(\n      () => resolveChartColors(config, palette),\n      [config, palette]\n    );\n\n    const total = data.reduce((sum, seg) => sum + seg.value, 0);\n    const labelFor = (key: string): React.ReactNode =>\n      config[key]?.label ?? key;\n    // The aria-label has to be a plain string, so a rich (element) label can't\n    // be used there — fall back to the key rather than stringifying it into\n    // \"[object Object]\".\n    const labelTextFor = (key: string) => {\n      const label = config[key]?.label;\n      return typeof label === 'string' || typeof label === 'number'\n        ? String(label)\n        : key;\n    };\n    const colorOf = (key: string) => `var(--color-${key})`;\n    const pctOf = (value: number) =>\n      total > 0 ? Math.round((value / total) * 100) : 0;\n\n    // A locale-neutral fallback: \"<label> <value>\" pairs. Consumers can pass a\n    // fuller `aria-label` sentence.\n    const summary =\n      ariaLabel ??\n      data\n        .map((seg) => `${labelTextFor(seg.key)} ${valueFormatter(seg.value)}`)\n        .join(', ');\n\n    return (\n      <div\n        ref={ref}\n        data-chart={chartId}\n        className={cn('flex w-full flex-col gap-3', className)}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={resolvedConfig} />\n        <div\n          className={categoryBarVariants({ size })}\n          role=\"img\"\n          aria-label={summary}\n        >\n          {data.map((seg, index) => {\n            const color = colorOf(seg.key);\n            // flex-grow proportional to value with a zero basis → widths are\n            // exactly value/total; a zero-value segment collapses.\n            const segment = (\n              <div\n                key={seg.key}\n                className=\"h-full min-w-0\"\n                style={{ flex: `${seg.value} 0 0%`, backgroundColor: color }}\n              />\n            );\n\n            if (!showTooltip) return segment;\n\n            return (\n              <Tooltip key={seg.key} defaultOpen={index === defaultOpenIndex}>\n                <TooltipTrigger render={segment} />\n                <CategoryBarSegmentTooltip\n                  chartId={chartId}\n                  config={resolvedConfig}\n                  color={color}\n                  label={labelFor(seg.key)}\n                  percent={pctOf(seg.value)}\n                  segmentKey={seg.key}\n                  value={seg.value}\n                  valueFormatter={valueFormatter}\n                  renderContent={tooltipContent}\n                />\n              </Tooltip>\n            );\n          })}\n        </div>\n\n        {showLegend && (\n          <ul className=\"flex flex-wrap justify-between gap-x-6 gap-y-3\">\n            {data.map((seg) => (\n              <li key={seg.key} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-center gap-1.5 text-sm leading-none text-muted-foreground\">\n                  <span\n                    className=\"size-2.5 shrink-0 rounded-sm\"\n                    style={{ backgroundColor: colorOf(seg.key) }}\n                  />\n                  {labelFor(seg.key)}\n                </span>\n                <span className=\"flex items-baseline gap-1.5 leading-none tabular-nums\">\n                  <span className=\"text-base font-semibold text-foreground\">\n                    {valueFormatter(seg.value)}\n                  </span>\n                  <span className=\"text-sm text-muted-foreground\">\n                    {pctOf(seg.value)}%\n                  </span>\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n);\nCategoryBar.displayName = 'CategoryBar';\n\nexport { CategoryBar, categoryBarVariants };\n"],"names":["defaultFormat","value","categoryBarVariants","cva","CategoryBarSegmentTooltip","chartId","config","color","label","percent","segmentKey","valueFormatter","renderContent","jsxs","TooltipContent","cn","jsx","ChartStyle","Fragment","CategoryBar","React","className","data","palette","CHART_DEFAULT_PALETTE","size","showLegend","showTooltip","tooltipContent","defaultOpenIndex","ariaLabel","props","ref","resolvedConfig","resolveChartColors","total","sum","seg","labelFor","key","_a","labelTextFor","colorOf","pctOf","summary","index","segment","Tooltip","TooltipTrigger"],"mappings":"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"}
+{"version":3,"file":"category-bar.js","names":[],"sources":["../../../../src/components/ui/category-bar/category-bar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_DEFAULT_PALETTE,\n  ChartStyle,\n  resolveChartColors,\n  type ChartConfig,\n  type ChartPalette,\n  type ResolvedChartConfig,\n} from '../chart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A category bar: a single horizontal bar split into proportional colored\n// segments — one part-to-whole across a handful of categories, in one row\n// (onboarding stages, certification status, a rating scale). Unlike `Meter`\n// (one value per row, stacked into a bar list), all segments share the same bar.\n// It's a plain flex composition, not a recharts chart: each segment's width is\n// `value / total`, so exact proportions and the count/% legend are direct DOM,\n// with no axes/grid to hide. Segment colors come from the `palette` prop, the\n// same dataviz palettes the recharts charts use.\n//\n// Colors are consumed through the same `--color-<key>` bridge the recharts\n// charts use: `ChartStyle` emits one custom property per config entry, so a\n// `theme: { light, dark }` entry works as well as a flat `color` — reading\n// `config[key].color` directly would render a themed config colorless. The\n// tooltip is portaled out of the bar's DOM, so its popup carries its own\n// `data-chart` scope + `ChartStyle` to keep the bridge resolvable there.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\n// Track height only — the flex/rounded/overflow chrome is static.\nconst categoryBarVariants = cva(\n  'flex w-full overflow-hidden rounded-full bg-input',\n  {\n    variants: {\n      size: {\n        sm: 'h-1.5',\n        md: 'h-2.5',\n        lg: 'h-4',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface CategoryBarSegment {\n  /** Key into `config` for this segment's label + color. */\n  key: string;\n  /** The segment's value — its width is this over the sum of all values. */\n  value: number;\n}\n\n/** The resolved segment passed to a custom `tooltipContent` renderer. */\nexport interface CategoryBarTooltipContext extends CategoryBarSegment {\n  /** Resolved `config` label (falls back to the key); may be any `ReactNode`. */\n  label: React.ReactNode;\n  /** Share of the total as a rounded percentage (0–100). */\n  percent: number;\n  /**\n   * CSS color reference for the segment — the `var(--color-<key>)` bridge, which\n   * resolves the palette stop assigned to this segment. Usable anywhere a CSS\n   * color is (e.g. a `style` background); not a literal value.\n   */\n  color: string;\n}\n\nexport interface CategoryBarProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof categoryBarVariants> {\n  /** Ordered segments (left → right). Widths are proportional to `value`. */\n  data: ReadonlyArray<CategoryBarSegment>;\n  /** Maps each segment `key` to a `label` and, optionally, a palette `tone`. */\n  config: ChartConfig;\n  /**\n   * The dataviz palette the segments are painted from. Segments take a stop of\n   * it in the palette's defined order, or the one their `tone` names. Defaults\n   * to `categorical`.\n   */\n  palette?: ChartPalette;\n  /** Show the legend below the bar (color dot + label + value + %). */\n  showLegend?: boolean;\n  /** Show a hover tooltip per segment (dot + label + value + %). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content per segment — replaces the default (dot + label +\n   * `value · %`) inside the same card. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n  /** Format the numeric value (legend + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Render the tooltip for this segment index initially open (VR/testing). */\n  defaultOpenIndex?: number;\n  /**\n   * Accessible summary of the whole bar. Defaults to a `label value` list built\n   * from the data; pass a fuller sentence for screen readers if you have one.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * One segment's hover card.\n *\n * It re-declares `data-chart` and re-renders `ChartStyle` because the popup is\n * portaled out of the bar: outside that subtree the `--color-*` bridge the\n * swatch reads has nothing to resolve against.\n */\nfunction CategoryBarSegmentTooltip({\n  chartId,\n  config,\n  color,\n  label,\n  percent,\n  segmentKey,\n  value,\n  valueFormatter,\n  renderContent,\n}: {\n  chartId: string;\n  config: ResolvedChartConfig;\n  color: string;\n  label: React.ReactNode;\n  percent: number;\n  segmentKey: string;\n  value: number;\n  valueFormatter: (value: number) => string;\n  // Not named `render`: in this package that name is reserved for Base UI's\n  // polymorphic composition prop (see `<TooltipTrigger render={…} />` below).\n  renderContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n}) {\n  return (\n    <TooltipContent\n      data-chart={chartId}\n      className={cn(\n        'border border-border bg-background text-foreground shadow-md',\n        !renderContent && 'flex items-center gap-2'\n      )}\n    >\n      <ChartStyle id={chartId} config={config} />\n      {renderContent ? (\n        renderContent({ key: segmentKey, value, label, percent, color })\n      ) : (\n        <>\n          <span\n            className=\"size-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n          <span className=\"font-semibold\">{label}</span>\n          <span className=\"text-muted-foreground tabular-nums\">\n            {valueFormatter(value)} · {percent}%\n          </span>\n        </>\n      )}\n    </TooltipContent>\n  );\n}\n\nconst CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>(\n  (\n    {\n      className,\n      data,\n      config,\n      palette = CHART_DEFAULT_PALETTE,\n      size,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      valueFormatter = defaultFormat,\n      defaultOpenIndex,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n    // Resolved here rather than by a `ChartContainer`: this component paints\n    // plain divs, not a recharts plot, so it owns the `--color-*` emission for\n    // both the bar and its portaled per-segment tooltip.\n    const resolvedConfig = React.useMemo(\n      () => resolveChartColors(config, palette),\n      [config, palette]\n    );\n\n    const total = data.reduce((sum, seg) => sum + seg.value, 0);\n    const labelFor = (key: string): React.ReactNode =>\n      config[key]?.label ?? key;\n    // The aria-label has to be a plain string, so a rich (element) label can't\n    // be used there — fall back to the key rather than stringifying it into\n    // \"[object Object]\".\n    const labelTextFor = (key: string) => {\n      const label = config[key]?.label;\n      return typeof label === 'string' || typeof label === 'number'\n        ? String(label)\n        : key;\n    };\n    const colorOf = (key: string) => `var(--color-${key})`;\n    const pctOf = (value: number) =>\n      total > 0 ? Math.round((value / total) * 100) : 0;\n\n    // A locale-neutral fallback: \"<label> <value>\" pairs. Consumers can pass a\n    // fuller `aria-label` sentence.\n    const summary =\n      ariaLabel ??\n      data\n        .map((seg) => `${labelTextFor(seg.key)} ${valueFormatter(seg.value)}`)\n        .join(', ');\n\n    return (\n      <div\n        ref={ref}\n        data-chart={chartId}\n        className={cn('flex w-full flex-col gap-3', className)}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={resolvedConfig} />\n        <div\n          className={categoryBarVariants({ size })}\n          role=\"img\"\n          aria-label={summary}\n        >\n          {data.map((seg, index) => {\n            const color = colorOf(seg.key);\n            // flex-grow proportional to value with a zero basis → widths are\n            // exactly value/total; a zero-value segment collapses.\n            const segment = (\n              <div\n                key={seg.key}\n                className=\"h-full min-w-0\"\n                style={{ flex: `${seg.value} 0 0%`, backgroundColor: color }}\n              />\n            );\n\n            if (!showTooltip) return segment;\n\n            return (\n              <Tooltip key={seg.key} defaultOpen={index === defaultOpenIndex}>\n                <TooltipTrigger render={segment} />\n                <CategoryBarSegmentTooltip\n                  chartId={chartId}\n                  config={resolvedConfig}\n                  color={color}\n                  label={labelFor(seg.key)}\n                  percent={pctOf(seg.value)}\n                  segmentKey={seg.key}\n                  value={seg.value}\n                  valueFormatter={valueFormatter}\n                  renderContent={tooltipContent}\n                />\n              </Tooltip>\n            );\n          })}\n        </div>\n\n        {showLegend && (\n          <ul className=\"flex flex-wrap justify-between gap-x-6 gap-y-3\">\n            {data.map((seg) => (\n              <li key={seg.key} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-center gap-1.5 text-sm leading-none text-muted-foreground\">\n                  <span\n                    className=\"size-2.5 shrink-0 rounded-sm\"\n                    style={{ backgroundColor: colorOf(seg.key) }}\n                  />\n                  {labelFor(seg.key)}\n                </span>\n                <span className=\"flex items-baseline gap-1.5 leading-none tabular-nums\">\n                  <span className=\"text-base font-semibold text-foreground\">\n                    {valueFormatter(seg.value)}\n                  </span>\n                  <span className=\"text-sm text-muted-foreground\">\n                    {pctOf(seg.value)}%\n                  </span>\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n);\nCategoryBar.displayName = 'CategoryBar';\n\nexport { CategoryBar, categoryBarVariants };\n"],"mappings":";;;;;;;;;AAgCA,IAAM,KAAiB,MAAkB,EAAM,eAAe,GAGxD,IAAsB,EAC1B,qDACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAgEA,SAAS,EAA0B,EACjC,YACA,WACA,UACA,UACA,YACA,eACA,UACA,mBACA,oBAaC;CACD,OACE,kBAAC,GAAD;EACE,cAAY;EACZ,WAAW,EACT,gEACA,CAAC,KAAiB,yBACpB;EALF,UAAA,CAOE,kBAAC,GAAD;GAAY,IAAI;GAAiB;EAAS,CAAA,GACzC,IACC,EAAc;GAAE,KAAK;GAAY;GAAO;GAAO;GAAS;EAAM,CAAC,IAE/D,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,EAAM;GACjC,CAAA;GACD,kBAAC,QAAD;IAAM,WAAU;IAAiB,UAAA;GAAY,CAAA;GAC7C,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACG,EAAe,CAAK;KAAE;KAAI;KAAQ;IAC/B;;EACN,EAAA,CAAA,CAEU;;AAEpB;AAEA,IAAM,IAAc,EAAM,YAEtB,EACE,cACA,SACA,WACA,aAAU,GACV,SACA,gBAAa,IACb,iBAAc,IACd,mBACA,oBAAiB,GACjB,qBACA,cAAc,GACd,GAAG,KAEL,MACG;CAEH,IAAM,IAAU,SADC,EAAM,MACE,CAAA,CAAS,QAAQ,MAAM,EAAE,KAI5C,IAAiB,EAAM,cACrB,EAAmB,GAAQ,CAAO,GACxC,CAAC,GAAQ,CAAO,CAClB,GAEM,IAAQ,EAAK,QAAQ,GAAK,MAAQ,IAAM,EAAI,OAAO,CAAC,GACpD,KAAY,MAChB,EAAO,EAAI,EAAE,SAAS,GAIlB,KAAgB,MAAgB;EACpC,IAAM,IAAQ,EAAO,EAAI,EAAE;EAC3B,OAAO,OAAO,KAAU,YAAY,OAAO,KAAU,WACjD,OAAO,CAAK,IACZ;CACN,GACM,KAAW,MAAgB,eAAe,EAAI,IAC9C,KAAS,MACb,IAAQ,IAAI,KAAK,MAAO,IAAQ,IAAS,GAAG,IAAI,GAI5C,IACJ,KACA,EACG,KAAK,MAAQ,GAAG,EAAa,EAAI,GAAG,EAAE,GAAG,EAAe,EAAI,KAAK,GAAG,CAAC,CACrE,KAAK,IAAI;CAEd,OACE,kBAAC,OAAD;EACO;EACL,cAAY;EACZ,WAAW,EAAG,8BAA8B,CAAS;EACrD,GAAI;EAJN,UAAA;GAME,kBAAC,GAAD;IAAY,IAAI;IAAS,QAAQ;GAAiB,CAAA;GAClD,kBAAC,OAAD;IACE,WAAW,EAAoB,EAAE,QAAK,CAAC;IACvC,MAAK;IACL,cAAY;IAEX,UAAA,EAAK,KAAK,GAAK,MAAU;KACxB,IAAM,IAAQ,EAAQ,EAAI,GAAG,GAGvB,IACJ,kBAAC,OAAD;MAEE,WAAU;MACV,OAAO;OAAE,MAAM,GAAG,EAAI,MAAM;OAAQ,iBAAiB;MAAM;KAC5D,GAHM,EAAI,GAGV;KAKH,OAFK,IAGH,kBAAC,GAAD;MAAuB,aAAa,MAAU;MAA9C,UAAA,CACE,kBAAC,GAAD,EAAgB,QAAQ,EAAU,CAAA,GAClC,kBAAC,GAAD;OACW;OACT,QAAQ;OACD;OACP,OAAO,EAAS,EAAI,GAAG;OACvB,SAAS,EAAM,EAAI,KAAK;OACxB,YAAY,EAAI;OAChB,OAAO,EAAI;OACK;OAChB,eAAe;MAChB,CAAA,CACM;KAbK,GAAA,EAAI,GAaT,IAhBc;IAkB3B,CAAC;GACE,CAAA;GAEJ,KACC,kBAAC,MAAD;IAAI,WAAU;IACX,UAAA,EAAK,KAAK,MACT,kBAAC,MAAD;KAAkB,WAAU;KAA5B,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAAC,QAAD;OACE,WAAU;OACV,OAAO,EAAE,iBAAiB,EAAQ,EAAI,GAAG,EAAE;MAC5C,CAAA,GACA,EAAS,EAAI,GAAG,CACb;KACN,CAAA,GAAA,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OACb,UAAA,EAAe,EAAI,KAAK;MACrB,CAAA,GACN,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACG,EAAM,EAAI,KAAK,GAAE,GACd;MACF,CAAA,CAAA;KACJ,CAAA,CAAA;IAhBK,GAAA,EAAI,GAgBT,CACL;GACC,CAAA;EAEH;;AAET,CACF;AACA,EAAY,cAAc"}