@acronis-platform/ui-react 3.0.0 → 4.1.0

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

@@ -1,147 +1,124 @@
-import { jsxs as l, jsx as a, Fragment as z } from "react/jsx-runtime";
-import * as N from "react";
-import { cva as B } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as k } from "../../../lib/utils.js";
-import { ChartStyle as v } from "../chart/chart.js";
-import { Tooltip as S, TooltipTrigger as I, TooltipContent as O } from "../tooltip/tooltip.js";
-const q = (o) => o.toLocaleString(), F = B("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"
-  }
+"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 R({
-  chartId: o,
-  config: n,
-  color: t,
-  label: d,
-  percent: m,
-  segmentKey: f,
-  value: u,
-  valueFormatter: s,
-  renderContent: c
-}) {
-  return /* @__PURE__ */ l(
-    O,
-    {
-      "data-chart": o,
-      className: k(
-        "border border-border bg-background text-foreground shadow-md",
-        !c && "flex items-center gap-2"
-      ),
-      children: [
-        /* @__PURE__ */ a(v, { id: o, config: n }),
-        c ? c({ key: f, value: u, label: d, percent: m, color: t }) : /* @__PURE__ */ l(z, { children: [
-          /* @__PURE__ */ a(
-            "span",
-            {
-              className: "size-2.5 shrink-0 rounded-full",
-              style: { backgroundColor: t }
-            }
-          ),
-          /* @__PURE__ */ a("span", { className: "font-semibold", children: d }),
-          /* @__PURE__ */ l("span", { className: "text-muted-foreground tabular-nums", children: [
-            s(u),
-            " · ",
-            m,
-            "%"
-          ] })
-        ] })
-      ]
-    }
-  );
+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 = N.forwardRef(
-  ({
-    className: o,
-    data: n,
-    config: t,
-    size: d,
-    showLegend: m = !1,
-    showTooltip: f = !0,
-    tooltipContent: u,
-    valueFormatter: s = q,
-    defaultOpenIndex: c,
-    "aria-label": w,
-    ...C
-  }, T) => {
-    const p = `chart-${N.useId().replace(/:/g, "")}`, h = n.reduce((e, r) => e + r.value, 0), b = (e) => {
-      var r;
-      return ((r = t[e]) == null ? void 0 : r.label) ?? e;
-    }, $ = (e) => {
-      var i;
-      const r = (i = t[e]) == null ? void 0 : i.label;
-      return typeof r == "string" || typeof r == "number" ? String(r) : e;
-    }, x = (e) => `var(--color-${e})`, y = (e) => h > 0 ? Math.round(e / h * 100) : 0, j = w ?? n.map((e) => `${$(e.key)} ${s(e.value)}`).join(", ");
-    return /* @__PURE__ */ l(
-      "div",
-      {
-        ref: T,
-        "data-chart": p,
-        className: k("flex w-full flex-col gap-3", o),
-        ...C,
-        children: [
-          /* @__PURE__ */ a(v, { id: p, config: t }),
-          /* @__PURE__ */ a("div", { className: F({ size: d }), role: "img", "aria-label": j, children: n.map((e, r) => {
-            const i = x(e.key), g = /* @__PURE__ */ a(
-              "div",
-              {
-                className: "h-full min-w-0",
-                style: { flex: `${e.value} 0 0%`, backgroundColor: i }
-              },
-              e.key
-            );
-            return f ? /* @__PURE__ */ l(S, { defaultOpen: r === c, children: [
-              /* @__PURE__ */ a(I, { render: g }),
-              /* @__PURE__ */ a(
-                R,
-                {
-                  chartId: p,
-                  config: t,
-                  color: i,
-                  label: b(e.key),
-                  percent: y(e.value),
-                  segmentKey: e.key,
-                  value: e.value,
-                  valueFormatter: s,
-                  renderContent: u
-                }
-              )
-            ] }, e.key) : g;
-          }) }),
-          m && /* @__PURE__ */ a("ul", { className: "flex flex-wrap justify-between gap-x-6 gap-y-3", children: n.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__ */ a(
-                "span",
-                {
-                  className: "size-2.5 shrink-0 rounded-sm",
-                  style: { backgroundColor: x(e.key) }
-                }
-              ),
-              b(e.key)
-            ] }),
-            /* @__PURE__ */ l("span", { className: "flex items-baseline gap-1.5 leading-none tabular-nums", children: [
-              /* @__PURE__ */ a("span", { className: "text-base font-semibold text-foreground", children: s(e.value) }),
-              /* @__PURE__ */ l("span", { className: "text-sm text-muted-foreground", children: [
-                y(e.value),
-                "%"
-              ] })
-            ] })
-          ] }, e.key)) })
-        ]
-      }
-    );
-  }
-);
-V.displayName = "CategoryBar";
-export {
-  V as CategoryBar,
-  F 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 { ChartStyle, type ChartConfig } 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 are caller-supplied via `config`\n// (existing semantic `--ui-*` tokens); there is no chart palette tier yet.\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('flex w-full overflow-hidden rounded-full bg-input', {\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\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 config entry's `color` or its per-theme `theme` value. Usable\n   * anywhere a CSS color is (e.g. a `style` background); not a literal value.\n   */\n  color: string;\n}\n\nexport interface CategoryBarProps\n  extends 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 `color` (an existing `--ui-*` token). */\n  config: ChartConfig;\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: ChartConfig;\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      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\n    const total = data.reduce((sum, seg) => sum + seg.value, 0);\n    const labelFor = (key: string): React.ReactNode => 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={config} />\n        <div className={categoryBarVariants({ size })} role=\"img\" aria-label={summary}>\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={config}\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","size","showLegend","showTooltip","tooltipContent","defaultOpenIndex","ariaLabel","props","ref","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":"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"}

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

@@ -1,170 +1,134 @@
-function _(t) {
-  switch (t) {
-    case "auto":
-      return ["auto", "auto"];
-    case "zero":
-      return [0, "auto"];
-    case "dataMin-dataMax":
-      return ["dataMin", "dataMax"];
-    default:
-      return;
-  }
+//#region src/components/ui/chart/chart-format.ts
+function e(e) {
+	switch (e) {
+		case "auto": return ["auto", "auto"];
+		case "zero": return [0, "auto"];
+		case "dataMin-dataMax": return ["dataMin", "dataMax"];
+		default: return;
+	}
 }
-function S(t) {
-  if (t != null)
-    return t < 0 ? "end" : "start";
+function t(e) {
+	if (e != null) return e < 0 ? "end" : "start";
 }
-function p(t, n) {
-  if (!(!t && n == null))
-    return 30 + (n != null ? 20 : 0) + (t ? 18 : 0);
+function n(e, t) {
+	if (!(!e && t == null)) return 30 + (t == null ? 0 : 20) + (e ? 18 : 0);
 }
-function E(t, n = "insideBottom", i = 0) {
-  if (t)
-    return { value: t, position: n, offset: i };
+function r(e, t = "insideBottom", n = 0) {
+	if (e) return {
+		value: e,
+		position: t,
+		offset: n
+	};
 }
-function L(t, n = "left") {
-  if (t)
-    return {
-      value: t,
-      angle: n === "left" ? -90 : 90,
-      position: n === "left" ? "insideLeft" : "insideRight",
-      style: { textAnchor: "middle" }
-    };
+function i(e, t = "left") {
+	if (e) return {
+		value: e,
+		angle: t === "left" ? -90 : 90,
+		position: t === "left" ? "insideLeft" : "insideRight",
+		style: { textAnchor: "middle" }
+	};
 }
-function T(t, n, i) {
-  if (n.length === 0) return;
-  const o = (e, f) => {
-    if (e === void 0) return f;
-    const a = n.findIndex((d) => d[i] === e);
-    return a !== -1 ? a : typeof e == "number" && Number.isInteger(e) && e >= 0 && e < n.length ? e : -1;
-  }, r = o(t.from, 0), s = o(t.to, n.length - 1);
-  if (!(r === -1 || s === -1 || r > s))
-    return [r, s];
+function a(e, t, n) {
+	if (t.length === 0) return;
+	let r = (e, r) => {
+		if (e === void 0) return r;
+		let i = t.findIndex((t) => t[n] === e);
+		return i === -1 ? typeof e == "number" && Number.isInteger(e) && e >= 0 && e < t.length ? e : -1 : i;
+	}, i = r(e.from, 0), a = r(e.to, t.length - 1);
+	if (!(i === -1 || a === -1 || i > a)) return [i, a];
 }
-function h(t) {
-  const { animate: n = !1, animationDuration: i, animationBegin: o, animationEasing: r } = t;
-  return {
-    isAnimationActive: n ? "auto" : !1,
-    ...i !== void 0 ? { animationDuration: i } : {},
-    ...o !== void 0 ? { animationBegin: o } : {},
-    ...r !== void 0 ? { animationEasing: r } : {}
-  };
+function o(e) {
+	let { animate: t = !1, animationDuration: n, animationBegin: r, animationEasing: i } = e;
+	return {
+		isAnimationActive: t ? "auto" : !1,
+		...n === void 0 ? {} : { animationDuration: n },
+		...r === void 0 ? {} : { animationBegin: r },
+		...i === void 0 ? {} : { animationEasing: i }
+	};
 }
-const l = "fill-[var(--ui-text-on-surface-primary)]!", m = "fill-[var(--ui-text-on-status-strong-neutral)]!", v = 12, y = {
-  top: 16,
-  right: 24,
-  bottom: 5,
-  left: 12
-}, A = /* @__PURE__ */ new Set([
-  "center",
-  "centerTop",
-  "centerBottom",
-  "insideTop",
-  "insideBottom",
-  "insideLeft",
-  "insideRight",
-  "insideStart",
-  "insideEnd",
-  "end"
+var s = "fill-[var(--ui-text-on-surface-primary)]!", c = "fill-[var(--ui-text-on-status-strong-neutral)]!", l = 12, u = {
+	top: 16,
+	right: 24,
+	bottom: 5,
+	left: 12
+}, d = /* @__PURE__ */ new Set([
+	"center",
+	"centerTop",
+	"centerBottom",
+	"insideTop",
+	"insideBottom",
+	"insideLeft",
+	"insideRight",
+	"insideStart",
+	"insideEnd",
+	"end"
 ]);
-function C(t) {
-  const { labelPosition: n, isStacked: i = !1, growingEnd: o = "top" } = t;
-  return n !== void 0 ? n : i ? "center" : o;
+function f(e) {
+	let { labelPosition: t, isStacked: n = !1, growingEnd: r = "top" } = e;
+	return t === void 0 ? n ? "center" : r : t;
 }
-function x(t, n = {}) {
-  return n.translucentSeries ? l : A.has(t) ? m : l;
+function p(e, t = {}) {
+	return t.translucentSeries ? s : d.has(e) ? c : s;
 }
-function I(t) {
-  if (t)
-    return (n) => n == null ? "" : t(n);
+function m(e) {
+	if (e) return (t) => t == null ? "" : e(t);
 }
-function N(t) {
-  return t ? Array.isArray(t) ? t : [t] : [];
+function h(e) {
+	return e ? Array.isArray(e) ? e : [e] : [];
 }
-function B(t, n, i) {
-  if (!t) return;
-  if (typeof t.value == "number") return t.value;
-  if (!t.average) return;
-  const o = typeof t.average == "string" ? [t.average] : i, r = n.flatMap(
-    (s) => o.map((e) => s[e]).filter((e) => typeof e == "number")
-  );
-  if (r.length !== 0)
-    return r.reduce((s, e) => s + e, 0) / r.length;
+function g(e, t, n) {
+	if (!e) return;
+	if (typeof e.value == "number") return e.value;
+	if (!e.average) return;
+	let r = typeof e.average == "string" ? [e.average] : n, i = t.flatMap((e) => r.map((t) => e[t]).filter((e) => typeof e == "number"));
+	if (i.length !== 0) return i.reduce((e, t) => e + t, 0) / i.length;
 }
-const c = "var(--ui-text-on-surface-secondary)";
-function F(t, n = "insideTopRight") {
-  return {
-    stroke: c,
-    strokeDasharray: "4 4",
-    ifOverflow: "extendDomain",
-    label: t ? {
-      value: t,
-      position: n,
-      fill: c,
-      fontSize: v
-    } : void 0
-  };
+var _ = "var(--ui-text-on-surface-secondary)";
+function v(e, t = "insideTopRight") {
+	return {
+		stroke: _,
+		strokeDasharray: "4 4",
+		ifOverflow: "extendDomain",
+		label: e ? {
+			value: e,
+			position: t,
+			fill: _,
+			fontSize: 12
+		} : void 0
+	};
 }
-const g = 28, R = "Chart range selector";
-function H({
-  brushHeight: t,
-  brushAriaLabel: n = R
-}) {
-  return {
-    // recharts drops the brush entirely when height <= 0, which would turn
-    // `showBrush` into a silent no-op — treat a non-positive height as unset.
-    height: t != null && t > 0 ? t : g,
-    fill: "var(--ui-background-surface-secondary)",
-    stroke: "var(--ui-text-on-surface-secondary)",
-    travellerWidth: 8,
-    ariaLabel: n
-  };
+var y = 28, b = "Chart range selector";
+function x({ brushHeight: e, brushAriaLabel: t = b }) {
+	return {
+		height: e != null && e > 0 ? e : 28,
+		fill: "var(--ui-background-surface-secondary)",
+		stroke: "var(--ui-text-on-surface-secondary)",
+		travellerWidth: 8,
+		ariaLabel: t
+	};
 }
-const u = (t) => {
-  if (typeof t == "string" && t.trim() === "") return null;
-  const n = typeof t == "number" ? t : Number(t);
-  return Number.isFinite(n) ? n : null;
-}, k = (t) => {
-  const n = u(t);
-  return n === null ? String(t) : new Intl.NumberFormat("en", {
-    notation: "compact",
-    maximumFractionDigits: 1
-  }).format(n);
-}, b = (t) => {
-  const n = u(t);
-  return n === null ? String(t) : `${n}%`;
+var S = (e) => {
+	if (typeof e == "string" && e.trim() === "") return null;
+	let t = typeof e == "number" ? e : Number(e);
+	return Number.isFinite(t) ? t : null;
+}, C = (e) => {
+	let t = S(e);
+	return t === null ? String(e) : new Intl.NumberFormat("en", {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(t);
+}, w = (e) => {
+	let t = S(e);
+	return t === null ? String(e) : `${t}%`;
 };
-function O(t, n = "en") {
-  const i = new Intl.NumberFormat(n, t);
-  return (o) => {
-    const r = u(o);
-    return r === null ? String(o) : i.format(r);
-  };
+function T(e, t = "en") {
+	let n = new Intl.NumberFormat(t, e);
+	return (e) => {
+		let t = S(e);
+		return t === null ? String(e) : n.format(t);
+	};
 }
-export {
-  R as CHART_BRUSH_ARIA_LABEL,
-  g as CHART_BRUSH_HEIGHT,
-  l as CHART_LABEL_FILL_CLASS,
-  m as CHART_LABEL_FILL_ON_SERIES_CLASS,
-  v as CHART_LABEL_FONT_SIZE,
-  y as CHART_LABEL_MARGIN,
-  c as CHART_REFERENCE_LINE_STROKE,
-  O as createTickFormatter,
-  k as formatCompactNumber,
-  b as formatPercent,
-  h as resolveAnimation,
-  _ as resolveAxisDomain,
-  H as resolveBrushProps,
-  C as resolveCartesianLabelPosition,
-  T as resolveCategoryRange,
-  B as resolveChartReferenceValue,
-  x as resolveLabelFillClass,
-  F as resolveReferenceLineProps,
-  S as resolveRotatedTickAnchor,
-  p as resolveXAxisHeight,
-  E as resolveXAxisTitle,
-  L as resolveYAxisTitle,
-  I as toLabelFormatter,
-  N as toReferenceLineList
-};
-//# sourceMappingURL=chart-format.js.map
+//#endregion
+export { b as CHART_BRUSH_ARIA_LABEL, y as CHART_BRUSH_HEIGHT, s as CHART_LABEL_FILL_CLASS, c as CHART_LABEL_FILL_ON_SERIES_CLASS, l as CHART_LABEL_FONT_SIZE, u as CHART_LABEL_MARGIN, _ as CHART_REFERENCE_LINE_STROKE, T as createTickFormatter, C as formatCompactNumber, w as formatPercent, o as resolveAnimation, e as resolveAxisDomain, x as resolveBrushProps, f as resolveCartesianLabelPosition, a as resolveCategoryRange, g as resolveChartReferenceValue, p as resolveLabelFillClass, v as resolveReferenceLineProps, t as resolveRotatedTickAnchor, n as resolveXAxisHeight, r as resolveXAxisTitle, i as resolveYAxisTitle, m as toLabelFormatter, h as toReferenceLineList };
+
+//# sourceMappingURL=chart-format.js.map