basalt-ui 1.41.0 → 2.0.0

package/dist/charts/Bars.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { barY } from "@tanstack/charts/bar";
+import { group } from "@tanstack/charts/group";
+import { stack } from "@tanstack/charts/stack";
+import { useCallback, useMemo } from "react";
+import { CartesianRung } from "./CartesianChart.js";
+import { emphasis, lineMark } from "./marks.js";
+import { rowX } from "./types.js";
+const DEFAULT_BAR_OPACITY = 0.85;
+const paint = (color, opacity) => opacity >= 1 ? color : `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent)`;
+let warnedLogStack = false;
+function guardLogStack(layout, onLog) {
+  if (!onLog || layout === "grouped") return;
+  const message = `Bars: ${layout} bars cannot use a log axis; use layout: 'grouped'`;
+  if (process.env.NODE_ENV !== "production") throw new Error(message);
+  if (!warnedLogStack) console.error(message);
+  warnedLogStack = true;
+}
+function Bars(props) {
+  const { bars, lines, layout = "stacked", barOpacity, ...rest } = props;
+  guardLogStack(layout, bars.length > 0 && rest.y?.scale === "log");
+  const series = useMemo(
+    () => [
+      ...bars.map((b) => ({ ...b, mark: "bar" })),
+      ...(lines ?? []).map((l) => ({ ...l, mark: "line" }))
+    ],
+    [bars, lines]
+  );
+  const marks = useCallback(
+    (plot) => {
+      const barKeys = new Set(bars.map((b) => b.key));
+      const visibleBars = plot.visible.filter((s) => barKeys.has(s.key));
+      const byKey = new Map(bars.map((b) => [b.key, b]));
+      const rows = visibleBars.flatMap((s) => plot.rows(s.key));
+      const h = plot.highlighted;
+      const fill = (row) => {
+        const bar = byKey.get(row.series);
+        if (!bar) return "transparent";
+        const base = barOpacity?.(row.datum, row.series) ?? bar.fillOpacity ?? DEFAULT_BAR_OPACITY;
+        return paint(bar.color, base * emphasis(h, { key: row.series }));
+      };
+      const order = visibleBars.map((s) => s.key);
+      const out = [];
+      if (rows.length > 0)
+        out.push(
+          barY(rows, {
+            id: "bars",
+            x: rowX,
+            y: "y",
+            z: "series",
+            fill,
+            layout: layout === "grouped" ? group({ padding: 0.1 }) : stack({ order, ...layout === "normalized" && { offset: "normalize" } })
+          })
+        );
+      for (const s of plot.visible) {
+        if (barKeys.has(s.key)) continue;
+        out.push(lineMark(plot, s));
+      }
+      return out;
+    },
+    [bars, layout, barOpacity]
+  );
+  return /* @__PURE__ */ jsx(
+    CartesianRung,
+    {
+      ...rest,
+      series,
+      marks,
+      band: true,
+      reverseRows: layout !== "grouped",
+      ...layout !== "grouped" && { stack: layout }
+    }
+  );
+}
+export {
+  Bars
+};

package/dist/charts/CartesianChart.d.ts

@@ -0,0 +1,57 @@
+import type { ReactElement } from 'react';
+import type { CartesianDefinition } from './compile.js';
+import type { CartesianChartProps, ChartSeries, ChartX } from './types.js';
+/** Kind-only compile switches, never on the public props. */
+export type RungOptions = {
+    /** A band x scale (bars). */
+    band?: boolean;
+    /** Tooltip rows bottom-up, so a stack reads top-down. */
+    reverseRows?: boolean;
+    /** How the bar series combine for the auto domain. */
+    stack?: 'stacked' | 'normalized';
+};
+/** What a chart's definition is compiled from, besides its own props: the chrome's live state. */
+export type ShellContext = {
+    /** Unique per mounted chart (React `useId`). */
+    chartId: string;
+    /** Series keys the legend has toggled off. */
+    hidden: ReadonlySet<string>;
+    /** The legend entry under the pointer. */
+    highlighted: string | null;
+    /** A coarse primary pointer. */
+    coarse: boolean;
+    /** The measured width; 0 unless the shell was asked to track it (`byWidth`). */
+    width: number;
+};
+export type ChartShellProps<T> = Pick<CartesianChartProps<T, ChartX>, 'ariaLabel' | 'legend' | 'height' | 'state' | 'className' | 'style'> & {
+    /** The legend and tooltip source. */
+    series: readonly ChartSeries<T>[];
+    /** Compiles the definition; memoized on its own identity and the context. Keep it stable. */
+    compile: (ctx: ShellContext) => CartesianDefinition;
+    /** Recompile when the measured width changes (default: it is not an input). */
+    byWidth?: boolean;
+};
+/**
+ * The chrome around every chart: size, the `hidden`/`highlighted` legend state, the derived legend
+ * (and its `ChartCard` header slot), the `state` placeholders and the engine mount. The rung and
+ * the composed kinds differ only in the definition they compile.
+ */
+export declare function ChartShell<T>(props: ChartShellProps<T>): ReactElement;
+export declare function CartesianRung<T, X extends ChartX>(props: CartesianChartProps<T, X> & RungOptions): ReactElement;
+/**
+ * The cartesian rung with consumer marks. Required `ariaLabel`; `marks(plot)` returns TanStack
+ * marks imported from the allowed `@tanstack/charts/*` subpaths, drawn from `plot.rows(key)`.
+ *
+ * ```tsx
+ * import { lineY } from '@tanstack/charts/line'
+ * <CartesianChart
+ *   ariaLabel="Load"
+ *   data={rows}
+ *   x={(d) => d.at}
+ *   series={[{ key: 'load', label: 'Load', color: VX.line, getValue: (d) => d.load }]}
+ *   marks={(plot) => [lineY(plot.rows('load'), { x: 'x', y: 'y', stroke: VX.line })]}
+ * />
+ * ```
+ */
+export declare function CartesianChart<T, X extends ChartX>(props: CartesianChartProps<T, X>): ReactElement;
+//# sourceMappingURL=CartesianChart.d.ts.map

package/dist/charts/CartesianChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/charts/CartesianChart.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAiB,YAAY,EAAa,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAKpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEvE,6DAA6D;AAC7D,MAAM,MAAM,WAAW,GAAG;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,CAAA;CACjC,CAAA;AAgCD,kGAAkG;AAClG,MAAM,MAAM,YAAY,GAAG;IACzB,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAA;IACf,8CAA8C;IAC9C,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC3B,0CAA0C;IAC1C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CACnC,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,EAC9B,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CACpE,GAAG;IACF,qCAAqC;IACrC,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,6FAA6F;IAC7F,OAAO,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,mBAAmB,CAAA;IACnD,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAuErE;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC/C,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAC7C,YAAY,CAmBd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAChD,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC/B,YAAY,CAEd"}

package/dist/charts/CartesianChart.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useState } from "react";
+import { useInChartCard } from "./card-context.js";
+import { compileCartesian } from "./compile.js";
+import { ChartEngine, idPrefixOf } from "./host.js";
+import { ChartLegend, legendEntries } from "./legend.js";
+import { INITIAL_WIDTH, useChartSize } from "./sizing.js";
+import { ChartPlaceholder, resolveChartState } from "./state.js";
+const rootStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  // `width: 100%` because a size container cannot take its width from its content: without it
+  // the root collapses to 0 in a flex row or an auto grid track.
+  width: "100%",
+  minWidth: 0,
+  containerType: "inline-size"
+};
+const headerLegendStyle = { marginTop: 8 };
+function useShallowStable(next) {
+  const [kept, setKept] = useState(next);
+  const same = [.../* @__PURE__ */ new Set([...Object.keys(kept), ...Object.keys(next)])].every(
+    (k) => Object.is(kept[k], next[k])
+  );
+  if (!same) setKept(next);
+  return same ? kept : next;
+}
+function ChartShell(props) {
+  const { ariaLabel, legend, height, state, className, style, series, compile, byWidth } = props;
+  const chartId = useId();
+  const inCard = useInChartCard();
+  const { ref, width: measured, coarse } = useChartSize();
+  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+  const [highlighted, setHighlighted] = useState(null);
+  const width = byWidth ? measured || INITIAL_WIDTH : 0;
+  const definition = useMemo(
+    () => compile({ chartId, hidden, highlighted, coarse, width }),
+    [compile, chartId, hidden, highlighted, coarse, width]
+  );
+  const config = legend === false ? null : legend ?? {};
+  const entryCount = legendEntries(series, false)[0]?.length ?? 0;
+  const shown = config !== null && entryCount > 0;
+  const toggle = config?.toggle ?? entryCount >= 2;
+  const onToggle = useCallback((key) => {
+    setHidden((prev) => {
+      const next = new Set(prev);
+      if (!next.delete(key)) next.add(key);
+      return next;
+    });
+  }, []);
+  const legendNode = useMemo(
+    () => shown ? /* @__PURE__ */ jsx(
+      ChartLegend,
+      {
+        series,
+        hidden,
+        mode: "auto",
+        groups: config?.groups === true,
+        toggle,
+        onToggle,
+        onHighlight: setHighlighted
+      }
+    ) : null,
+    [shown, series, hidden, config?.groups, toggle, onToggle]
+  );
+  const atTop = config?.placement === "top" || config?.placement === "header";
+  const asHeaderRow = config?.placement === "header" && inCard;
+  const resolved = resolveChartState(state);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-basalt-chart": "",
+      ...className !== void 0 && { className },
+      style: style ? { ...rootStyle, ...style } : rootStyle,
+      children: [
+        atTop && (asHeaderRow ? /* @__PURE__ */ jsx("div", { style: headerLegendStyle, children: legendNode }) : legendNode),
+        resolved === null ? /* @__PURE__ */ jsx(
+          ChartEngine,
+          {
+            definition,
+            ariaLabel,
+            height,
+            idPrefix: idPrefixOf(chartId),
+            coarse
+          }
+        ) : /* @__PURE__ */ jsx(ChartPlaceholder, { state, height }),
+        !atTop && legendNode
+      ]
+    }
+  );
+}
+function CartesianRung(props) {
+  const { ariaLabel, legend, height, state, className, style, series, ...spec } = props;
+  const stable = useShallowStable({ ...spec, series });
+  const compile = useCallback(
+    (ctx) => compileCartesian({ ...stable, ...ctx }),
+    [stable]
+  );
+  return /* @__PURE__ */ jsx(
+    ChartShell,
+    {
+      series,
+      compile,
+      ariaLabel,
+      ...legend !== void 0 && { legend },
+      ...height !== void 0 && { height },
+      ...state !== void 0 && { state },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
+    }
+  );
+}
+function CartesianChart(props) {
+  return /* @__PURE__ */ jsx(CartesianRung, { ...props });
+}
+export {
+  CartesianChart,
+  CartesianRung,
+  ChartShell
+};

package/dist/charts/ChartCard.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+import type { DeltaPolarity } from '../dashboard/delta-badge.js';
+import type { ChartState, ResponsiveChartHeight } from './types.js';
+/** The three boxes a `ChartCard` paints. */
+export type ChartCardSlot = 'root' | 'header' | 'body';
+export type ChartCardProps = BasaltProps & SlotStylesProps<ChartCardSlot> & {
+    title?: string;
+    icon?: ReactNode;
+    /** A muted line below the title row; does not by itself render the header. */
+    subtitle?: string;
+    /** `WidgetHeader`'s info glyph beside the title. */
+    info?: string;
+    /** A pre-formatted metric value, with `delta` on the hero row. */
+    value?: string;
+    delta?: number;
+    deltaPeriod?: string;
+    deltaPolarity?: DeltaPolarity;
+    /** A mono count tag after the title. */
+    count?: number;
+    /** Right-aligned controls. */
+    actions?: ReactNode;
+    /** A resolved state replaces `children` with its placeholder; the header stays. */
+    state?: ChartState;
+    /** Body height while a placeholder shows. Default: the chart height law, i.e. exactly the box an
+     * unsized chart takes — pass the chart's own `height` when it states one, so a `<Suspense
+     * fallback={<ChartCard state={{ pending: true }} …/>}>` reserves the final size. */
+    placeholderHeight?: number | ResponsiveChartHeight;
+    /** A retry button or a "clear filters" link under the placeholder. */
+    stateAction?: ReactNode;
+    children?: ReactNode;
+};
+export declare function ChartCard({ actions, state, placeholderHeight, stateAction, className, classNames, style, children, ...header }: ChartCardProps): ReactElement;
+//# sourceMappingURL=ChartCard.d.ts.map

package/dist/charts/ChartCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCard.d.ts","sourceRoot":"","sources":["../../src/charts/ChartCard.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAM7D,OAAO,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAoEhE,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEtD,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,eAAe,CAAC,aAAa,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;wFAEoF;IACpF,iBAAiB,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IAClD,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAKH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,cAAc,GAAG,YAAY,CA4C/B"}

package/dist/charts/ChartCard.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../common/isomorphic-layout-effect.js";
+import { cx } from "../common/props.js";
+import { WidgetHeader } from "../dashboard/widget-header.js";
+import { VX } from "../tokens/index.js";
+import { ChartCardContext } from "./card-context.js";
+import classes from "./chart-card.module.css";
+import { ChartPlaceholder, resolveChartState } from "./state.js";
+const cardStyle = {
+  display: "flex",
+  flexDirection: "column",
+  minHeight: 0,
+  containerType: "inline-size",
+  containerName: "basalt-card",
+  borderRadius: VX.radiusCard,
+  boxShadow: VX.shadowCard,
+  backgroundColor: VX.surface.panel
+};
+const CARD_SHORT_HEIGHT = 280;
+const SHORT_EXIT_SLACK = 24;
+const STATED_BOX = '[data-basalt-box]:not([data-basalt-box="fill"])';
+function useShortCard() {
+  const [node, setNode] = useState(null);
+  const [short, setShort] = useState(false);
+  const shortRef = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    if (!node) return;
+    if (node.querySelector(STATED_BOX)) {
+      shortRef.current = false;
+      setShort(false);
+      return;
+    }
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const height = entries[0]?.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+      const limit = shortRef.current ? CARD_SHORT_HEIGHT + SHORT_EXIT_SLACK : CARD_SHORT_HEIGHT;
+      const next = height > 0 && height < limit;
+      if (next === shortRef.current) return;
+      shortRef.current = next;
+      setShort(next);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  return { ref: setNode, short };
+}
+const bodyClipStyle = {
+  borderBottomLeftRadius: VX.radiusCard,
+  borderBottomRightRadius: VX.radiusCard,
+  overflow: "hidden",
+  flex: "1 1 auto",
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  padding: "2px var(--vx-space-card-inset-x, 0.8125rem) var(--vx-space-card-inset-y, 0.6875rem)"
+};
+const HEADER_TRIGGERS = ["title", "info", "value", "icon", "count"];
+function ChartCard({
+  actions,
+  state,
+  placeholderHeight,
+  stateAction,
+  className,
+  classNames,
+  style,
+  children,
+  ...header
+}) {
+  const { ref, short } = useShortCard();
+  const resolved = resolveChartState(state);
+  const hasHeader = actions !== void 0 || HEADER_TRIGGERS.some((k) => header[k] !== void 0);
+  return /* @__PURE__ */ jsx(ChartCardContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-basalt-chart-card": "",
+      className: cx(classNames?.root, className),
+      style: { ...cardStyle, ...style },
+      ...resolved === "pending" && { "aria-busy": "true" },
+      ...short && { "data-basalt-card-short": "" },
+      children: [
+        hasHeader && /* @__PURE__ */ jsx("div", { className: cx(classes.header, classNames?.header), children: /* @__PURE__ */ jsx(
+          WidgetHeader,
+          {
+            tier: "widget",
+            ...header,
+            title: header.title ?? "",
+            ...actions !== void 0 && {
+              actions: /* @__PURE__ */ jsx("span", { "data-basalt-tier": "widget", children: actions })
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...classNames?.body !== void 0 && { className: classNames.body },
+            style: bodyClipStyle,
+            children: resolved === null ? children : /* @__PURE__ */ jsx(
+              ChartPlaceholder,
+              {
+                state,
+                ...placeholderHeight !== void 0 && { height: placeholderHeight },
+                action: stateAction
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  ChartCard
+};

package/dist/charts/Donut.d.ts

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+import type { BasaltProps } from '../common/props.js';
+import type { ChartState, ResponsiveChartHeight } from './types.js';
+export type DonutDatum<K extends string = string> = {
+    key: K;
+    value: number;
+};
+export type DonutProps<K extends string = string> = BasaltProps & {
+    /** The accessible name. Required. */
+    ariaLabel: string;
+    data: readonly DonutDatum<K>[];
+    /** A `VX.*` ref or a consumer series token per key. */
+    colorForKey: (key: K) => string;
+    formatValue: (v: number) => string;
+    /** Legend and tooltip label for a key. Default: the key. */
+    seriesLabel?: (key: K) => string;
+    /** The ring's centre text, and the smaller line under it. */
+    centerLabel?: string;
+    centerSubLabel?: string;
+    /** Default 240. */
+    height?: number | ResponsiveChartHeight;
+    state?: ChartState;
+};
+export declare function Donut<K extends string = string>(props: DonutProps<K>): ReactElement;
+//# sourceMappingURL=Donut.d.ts.map

package/dist/charts/Donut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../src/charts/Donut.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAUlD,OAAO,KAAK,EAAe,UAAU,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE7E,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE7E,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,GAAG;IAChE,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9B,uDAAuD;IACvD,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAkED,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,CAkJnF"}

package/dist/charts/Donut.js

@@ -0,0 +1,191 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tooltip as tooltipHost } from "@tanstack/charts/tooltip";
+import { portal } from "@tanstack/charts/tooltip/portal";
+import { pie, polar, radialArc } from "@tanstack/charts/polar";
+import { useCallback, useId, useMemo, useState } from "react";
+import { alpha, VX } from "../tokens/index.js";
+import { ChartEngine, idPrefixOf } from "./host.js";
+import { ChartLegend } from "./legend.js";
+import { useCoarsePointer } from "../common/use-media-query.js";
+import { chartBoxVars, isShortChart } from "./box.js";
+import classes from "./donut.module.css";
+import { ChartPlaceholder, resolveChartState } from "./state.js";
+import { CHART_THEME, DIMMED } from "./theme.js";
+const MAX_SLICES = 6;
+const DEFAULT_HEIGHT = 240;
+const INNER_RATIO = 0.62;
+const OTHER_ID = "other";
+const identityLabel = (key) => key;
+function aggregate(data) {
+  const sums = /* @__PURE__ */ new Map();
+  for (const d of data) {
+    if (!Number.isFinite(d.value) || d.value <= 0) continue;
+    sums.set(d.key, (sums.get(d.key) ?? 0) + d.value);
+  }
+  return [...sums].map(([key, value]) => ({ key, value }));
+}
+function foldOther(all) {
+  if (all.length <= MAX_SLICES) return { kept: [...all], other: null };
+  const top = new Set(
+    all.toSorted((a, b) => b.value - a.value).slice(0, MAX_SLICES).map((d) => d.key)
+  );
+  let other = 0;
+  const kept = [];
+  for (const d of all) {
+    if (top.has(d.key)) kept.push(d);
+    else other += d.value;
+  }
+  return { kept, other };
+}
+const percent = (value, total) => `${total > 0 ? Math.round(value / total * 100) : 0}%`;
+const centerStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  fontFamily: "var(--basalt-font-mono)"
+};
+const rootStyle = { containerType: "inline-size", width: "100%", minWidth: 0 };
+function Donut(props) {
+  const {
+    ariaLabel,
+    data,
+    colorForKey,
+    formatValue,
+    seriesLabel = identityLabel,
+    centerLabel,
+    centerSubLabel,
+    height = DEFAULT_HEIGHT,
+    state,
+    className,
+    style
+  } = props;
+  const chartId = useId();
+  const coarse = useCoarsePointer();
+  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+  const [highlighted, setHighlighted] = useState(null);
+  const onToggle = useCallback((key) => {
+    setHidden((prev) => {
+      const next = new Set(prev);
+      if (!next.delete(key)) next.add(key);
+      return next;
+    });
+  }, []);
+  const slices = useMemo(() => {
+    const { kept, other } = foldOther(aggregate(data));
+    const out = kept.map((d) => ({
+      id: `k:${d.key}`,
+      label: seriesLabel(d.key),
+      color: colorForKey(d.key),
+      value: d.value
+    }));
+    if (other !== null)
+      out.push({ id: OTHER_ID, label: "Other", color: alpha(VX.neutral, 0.5), value: other });
+    return out;
+  }, [data, colorForKey, seriesLabel]);
+  const total = slices.reduce((sum, s) => sum + s.value, 0);
+  const series = useMemo(
+    () => slices.map((s) => ({
+      key: s.id,
+      label: s.label,
+      color: s.color,
+      mark: "bar",
+      getValue: () => s.value,
+      note: `${formatValue(s.value)} \xB7 ${percent(s.value, total)}`
+    })),
+    [slices, total, formatValue]
+  );
+  const definition = useMemo(() => {
+    const drawn = slices.filter((s) => !hidden.has(s.id));
+    const arcs = pie(drawn, { value: "value" });
+    return {
+      chart: () => ({
+        marks: [
+          polar({
+            inset: 4,
+            scales: { angle: null, radius: null },
+            marks: [
+              radialArc(arcs, {
+                key: "id",
+                innerRadius: ({ radius }) => radius * INNER_RATIO,
+                cornerRadius: 3,
+                fill: (a) => highlighted === null || highlighted === a.id ? a.color : alpha(a.color, DIMMED)
+              })
+            ]
+          })
+        ],
+        scales: { x: null, y: null },
+        theme: CHART_THEME
+      }),
+      tooltip: {
+        use: tooltipHost,
+        portal,
+        content: (points) => {
+          const slice = points[0]?.datum;
+          if (!slice) return { rows: [] };
+          return {
+            title: slice.label,
+            rows: [
+              { label: "Value", value: formatValue(slice.value), color: slice.color },
+              { label: "Share", value: percent(slice.value, total) }
+            ]
+          };
+        }
+      }
+    };
+  }, [slices, hidden, highlighted, total, formatValue]);
+  const legend = /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      series,
+      hidden,
+      mode: "chips",
+      groups: false,
+      toggle: series.length >= 2,
+      onToggle,
+      onHighlight: setHighlighted
+    }
+  );
+  const resolved = resolveChartState(state);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-basalt-chart": "",
+      ...className !== void 0 && { className },
+      style: { ...rootStyle, ...style },
+      children: /* @__PURE__ */ jsxs("div", { className: classes.row, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classes.ring,
+            style: chartBoxVars(height),
+            ...isShortChart(height) && { "data-basalt-chart-short": "" },
+            children: [
+              resolved === null ? /* @__PURE__ */ jsx(
+                ChartEngine,
+                {
+                  definition,
+                  ariaLabel,
+                  height: "fill",
+                  idPrefix: idPrefixOf(chartId),
+                  coarse
+                }
+              ) : /* @__PURE__ */ jsx(ChartPlaceholder, { state, height: "fill" }),
+              resolved === null && (centerLabel !== void 0 || centerSubLabel !== void 0) && /* @__PURE__ */ jsxs("div", { style: centerStyle, children: [
+                centerLabel !== void 0 && /* @__PURE__ */ jsx("span", { style: { color: VX.ink, fontSize: VX.text.lg, fontWeight: 600 }, children: centerLabel }),
+                centerSubLabel !== void 0 && /* @__PURE__ */ jsx("span", { style: { color: VX.axis, fontSize: VX.text.micro }, children: centerSubLabel })
+              ] })
+            ]
+          }
+        ),
+        resolved === null && legend
+      ] })
+    }
+  );
+}
+export {
+  Donut
+};