@sableui/react 0.6.1 → 0.7.0

package/dist/layout/SafeArea.js

@@ -0,0 +1,26 @@
+// src/layout/SafeArea.tsx
+import { cn } from "../lib/cn.js";
+import { safeAreaInsets } from "./_safeArea.js";
+import { jsx } from "react/jsx-runtime";
+function SafeArea({
+  edges = ["top", "bottom", "left", "right"],
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(className),
+      style: { ...safeAreaInsets(edges), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  SafeArea
+};

package/dist/layout/Spacer.js

@@ -0,0 +1,9 @@
+// src/layout/Spacer.tsx
+import { jsx } from "react/jsx-runtime";
+function Spacer({ size = 1, axis = "vertical", grow, className }) {
+  const style = grow ? { flex: "1 1 0%" } : axis === "vertical" ? { height: `calc(var(--rhythm-unit) * ${size})`, flexShrink: 0 } : { width: `calc(var(--rhythm-unit) * ${size})`, flexShrink: 0 };
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className, style });
+}
+export {
+  Spacer
+};

package/dist/layout/SplitPane.js

@@ -0,0 +1,55 @@
+// src/layout/SplitPane.tsx
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function parseRatio(ratio) {
+  const [a, b] = ratio.split("/");
+  const pa = Number(a);
+  const pb = Number(b);
+  if (!Number.isFinite(pa) || pa <= 0 || !Number.isFinite(pb) || pb <= 0) {
+    return { primary: "1fr", secondary: "1fr" };
+  }
+  return { primary: `${pa}fr`, secondary: `${pb}fr` };
+}
+function resolveGap(gap) {
+  if (gap === void 0) return void 0;
+  return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
+}
+function SplitPane({
+  primary,
+  secondary,
+  collapseBelow = "lg",
+  ratio = "1/1",
+  gap,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const { primary: p, secondary: s } = parseRatio(ratio);
+  const splitGap = resolveGap(gap);
+  const mergedStyle = {
+    "--split-primary": p,
+    "--split-secondary": s,
+    ...splitGap ? { "--split-gap": splitGap } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-sable-split": true,
+      "data-collapse": collapseBelow,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: primary }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: secondary })
+      ]
+    }
+  );
+}
+SplitPane.displayName = "SplitPane";
+export {
+  SplitPane
+};

package/dist/layout/Stack.js

@@ -0,0 +1,42 @@
+// src/layout/Stack.tsx
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function resolveGap(gap) {
+  return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
+}
+function Stack({
+  gap = 2,
+  align = "stretch",
+  justify = "start",
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const mergedStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: ALIGN[align],
+    justifyContent: JUSTIFY[justify],
+    gap: resolveGap(gap),
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+}
+export {
+  Stack
+};

package/dist/layout/_responsive.js

@@ -0,0 +1,16 @@
+// src/layout/_responsive.ts
+var BREAKPOINTS = ["base", "sm", "md", "lg", "xl", "2xl"];
+function responsiveVars(prefix, value) {
+  if (value === void 0) return {};
+  if (typeof value === "number") return { [`${prefix}-base`]: value };
+  const out = {};
+  for (const bp of BREAKPOINTS) {
+    const v = value[bp];
+    if (v != null) out[`${prefix}-${bp}`] = v;
+  }
+  return out;
+}
+export {
+  BREAKPOINTS,
+  responsiveVars
+};

package/dist/layout/_safeArea.js

@@ -0,0 +1,18 @@
+// src/layout/_safeArea.ts
+var EDGE_PROP = {
+  top: "paddingTop",
+  bottom: "paddingBottom",
+  left: "paddingLeft",
+  right: "paddingRight"
+};
+function safeAreaInsets(edges) {
+  const out = {};
+  for (const edge of edges) {
+    out[EDGE_PROP[edge]] = `env(safe-area-inset-${edge}, 0px)`;
+  }
+  return out;
+}
+export {
+  EDGE_PROP,
+  safeAreaInsets
+};

package/dist/layout/index.d.ts

@@ -94,19 +94,38 @@ interface GridProps extends ComponentPropsWithRef<"div"> {
      */
     cols?: Responsive<number>;
     /**
-     * Make cells "breathe": `repeat(auto-fit, minmax(minItemWidth, 1fr))`.
-     * The grid grows/wraps responsively without breakpoints. e.g. "16rem".
+     * Make cells "breathe": as many columns of at least `minItemWidth` as fit,
+     * sharing the leftover space. The grid grows/wraps responsively without
+     * breakpoints. e.g. "16rem".
      */
     minItemWidth?: string;
-    /** Gap between cells. Number = rhythm units (×8px); string = raw CSS. Default `--grid-gutter`. */
-    gap?: number | string;
+    /**
+     * What a `minItemWidth` grid does with columns it has no items for — the
+     * difference only shows when there are fewer items than fit one row.
+     *
+     * - `"fill"` (default) — `auto-fill`: the row keeps every column it has room
+     *   for, so items keep their size whatever their count. One search result is
+     *   one cover wide, not a banner. Right for collections: results, shelves,
+     *   galleries, anything whose count is data.
+     * - `"fit"` — `auto-fit`: empty columns collapse and the items stretch to
+     *   share the row. Right only for a fixed set designed to span it — three
+     *   KPI cards, a row of plan tiers.
+     */
+    track?: "fill" | "fit";
+    /**
+     * Gap between cells. Number = rhythm units (×8px); `[row, column]` = two
+     * rhythm counts, for a gallery whose rows want more air than its columns;
+     * string = raw CSS. Default `--grid-gutter`.
+     */
+    gap?: number | readonly [row: number, column: number] | string;
 }
 /**
  * CSS Grid layout primitive. Three modes: a fixed `cols` count, a responsive
  * `cols` breakpoint map (fewer columns on small screens), or `minItemWidth`
- * auto-fit cells that breathe with no breakpoints at all.
+ * cells that breathe with no breakpoints at all (`track` decides whether a
+ * sparse row keeps its empty columns or stretches its items across them).
  */
-declare function Grid({ cols, minItemWidth, gap, className, style, children, ref, ...rest }: GridProps): react.JSX.Element;
+declare function Grid({ cols, minItemWidth, track, gap, className, style, children, ref, ...rest }: GridProps): react.JSX.Element;
 
 interface ColumnsProps extends ComponentPropsWithRef<"div"> {
     /**

package/dist/layout/index.js

@@ -1,2 +1,14 @@
-export { AspectBox, Bleed, Center, Col, Columns, Grid, GridOverlay, Page, Region, Row, SafeArea, Spacer, SplitPane, Stack } from '../chunk-3IWZYBGH.js';
-import '../chunk-SRQWQUTW.js';
+// src/layout/index.ts
+export * from "./Region.js";
+export * from "./Page.js";
+export * from "./Grid.js";
+export * from "./Columns.js";
+export * from "./Stack.js";
+export * from "./Row.js";
+export * from "./Spacer.js";
+export * from "./Center.js";
+export * from "./AspectBox.js";
+export * from "./Bleed.js";
+export * from "./SplitPane.js";
+export * from "./SafeArea.js";
+export * from "./GridOverlay.js";

package/dist/lib/anchored-scroll.js

@@ -0,0 +1,7 @@
+// src/lib/anchored-scroll.ts
+var anchoredScroll = "max-h-[var(--available-height)] overflow-y-auto overscroll-contain scrollbar-quiet";
+var anchoredListScroll = "max-h-[min(18rem,var(--available-height))] overflow-y-auto overscroll-contain scrollbar-quiet";
+export {
+  anchoredListScroll,
+  anchoredScroll
+};

package/dist/lib/bleed.js

@@ -0,0 +1,7 @@
+// src/lib/bleed.ts
+var BLEED_LAST_END = "*:last:data-[bleed=auto]:-me-(--button-pe,var(--button-px))";
+var BLEED_FIRST_START = "*:first:data-[bleed=auto]:-ms-(--button-ps,var(--button-px))";
+export {
+  BLEED_FIRST_START,
+  BLEED_LAST_END
+};

package/dist/lib/chart/cartesian.js

@@ -0,0 +1,365 @@
+"use client";
+
+// src/lib/chart/cartesian.tsx
+import { useId } from "react";
+import { cn } from "../cn.js";
+import { ChartFrame } from "./chart-frame.js";
+import { ChartLegend } from "./chart-legend.js";
+import { ChartTooltipContent } from "./chart-tooltip.js";
+import { approxTextWidth, categoryText, chartFormatters } from "./format.js";
+import { areaPath, linePath, rectPath } from "./geometry.js";
+import { GLIDE, barTransition, drawTransition, morphTransition, pathStyle, riseTransition, stagger } from "./motion.js";
+import { bandScale, extent, linearScale, niceTicks, pointScale, stack } from "./scale.js";
+import {
+  chartColor,
+  numberValue,
+  resolveSeries,
+  toneColor
+} from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AXIS_TEXT = "fill-muted-foreground text-caption tabular-nums";
+var RULE = "stroke-foreground/10";
+var SURFACE = "stroke-(--sable-surface-bg,var(--background))";
+var GAP = 2;
+function CartesianChart(props) {
+  const {
+    kind,
+    data,
+    index,
+    series: rawSeries,
+    label,
+    className,
+    valueFormatter,
+    indexFormatter,
+    locale,
+    tooltip = true,
+    legend,
+    animate = true,
+    activeIndex,
+    defaultActiveIndex,
+    onActiveIndexChange,
+    curve = "smooth",
+    stacked = false,
+    gradient = false,
+    dots = false,
+    labels = false,
+    orientation = "vertical",
+    colorBy = "series",
+    negativeTone,
+    radius = 4,
+    barWidth = 24
+  } = props;
+  const horizontal = kind === "bar" && orientation === "horizontal";
+  const xAxis = props.xAxis ?? !horizontal;
+  const yAxis = props.yAxis ?? horizontal;
+  const grid = props.grid ?? !horizontal;
+  const uid = useId().replace(/:/g, "");
+  const series = resolveSeries(rawSeries);
+  const fmt = chartFormatters(locale, valueFormatter);
+  const expand = stacked === "expand";
+  const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+  const n = data.length;
+  const values = series.map((s) => data.map((d) => numberValue(d[s.key])));
+  const stacks = stacked ? stack(values, expand) : null;
+  const categories = data.map((d) => categoryText(d[index], locale));
+  const tickText = (i) => indexFormatter ? indexFormatter(categories[i]) : categories[i];
+  const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
+  const showLegend = legend ?? series.length > 1;
+  const hasNegative = values.some((s) => s.some((v) => v < 0));
+  const domainValues = stacks ? stacks.flatMap((s) => s.map(([a, b]) => [a, b])) : values;
+  const [lo, hi] = expand ? [0, 1] : extent(domainValues, kind !== "line");
+  const colorAt = (s, i) => {
+    if (negativeTone && values[s][i] < 0) return toneColor(negativeTone);
+    if (colorBy === "index") return chartColor(i);
+    return series[s].colorValue;
+  };
+  const axisValue = (v) => expand ? percent.format(v) : fmt.axis(v);
+  const fullValue = (s, i) => {
+    const v = values[s][i];
+    if (!expand || !stacks) return fmt.full(v);
+    const [a, b] = stacks[s][i];
+    return `${fmt.full(v)} (${percent.format(Math.abs(b - a))})`;
+  };
+  const layoutFor = (size) => {
+    const valueSpan = horizontal ? size.width : size.height;
+    const ticks = niceTicks(lo, hi, Math.max(2, Math.min(6, Math.round(valueSpan / 56))));
+    const domain = expand ? [0, 1] : [ticks[0], ticks[ticks.length - 1]];
+    const valueTicks = expand ? [0, 0.25, 0.5, 0.75, 1] : ticks;
+    const categoryWidth = Math.max(0, ...categories.map((_, i) => approxTextWidth(tickText(i))));
+    const valueWidth = Math.max(0, ...valueTicks.map((t) => approxTextWidth(axisValue(t))));
+    const labelRoom = labels ? horizontal ? Math.max(...values.flat().map((v) => approxTextWidth(fmt.full(v)))) + 8 : 20 : 0;
+    const inset = kind === "bar" ? 0 : dots ? 6 : 2;
+    const left = (yAxis ? (horizontal ? categoryWidth : valueWidth) + 10 : 0) + inset;
+    const right = inset + (horizontal ? labelRoom : 0);
+    const top = (dots ? 6 : 4) + (horizontal ? 0 : labelRoom);
+    const bottom = xAxis ? 26 : dots ? 6 : 2;
+    const x0 = left;
+    const x1 = Math.max(x0 + 1, size.width - right);
+    const y0 = top;
+    const y1 = Math.max(y0 + 1, size.height - bottom);
+    const value = horizontal ? linearScale(domain, [x0, x1]) : linearScale(domain, [y1, y0]);
+    const base = value(Math.max(domain[0], Math.min(domain[1], 0)));
+    const catRange = horizontal ? [y0, y1] : [x0, x1];
+    const band = kind === "bar" ? bandScale(n, catRange, series.length > 1 && !stacked ? 0.2 : 0.3, 0) : null;
+    const point = kind === "bar" ? null : pointScale(n, catRange);
+    const center = (i) => band ? band.at(i) + band.bandwidth / 2 : point?.at(i) ?? 0;
+    return { x0, x1, y0, y1, value, base, valueTicks, band, point, center };
+  };
+  const hitTest = (x, y, size) => {
+    if (!n) return null;
+    const L = layoutFor(size);
+    const pos = horizontal ? y : x;
+    let best = 0;
+    let dist = Number.POSITIVE_INFINITY;
+    for (let i = 0; i < n; i++) {
+      const d = Math.abs(L.center(i) - pos);
+      if (d < dist) {
+        dist = d;
+        best = i;
+      }
+    }
+    return best;
+  };
+  const describe = (i) => `${categories[i]}: ${series.map((s, k) => `${s.label} ${fullValue(k, i)}`).join(", ")}`;
+  const tooltipFor = (i, size) => {
+    const L = layoutFor(size);
+    const total = values.reduce((sum, s) => sum + s[i], 0);
+    const content = /* @__PURE__ */ jsx(
+      ChartTooltipContent,
+      {
+        indicator: tooltipOptions.indicator,
+        label: tooltipOptions.hideLabel ? void 0 : tooltipOptions.labelFormatter ? tooltipOptions.labelFormatter(categories[i], data[i]) : categories[i],
+        rows: series.map((s, k) => ({ key: s.key, label: s.label, value: fullValue(k, i), color: colorAt(k, i), icon: s.icon })),
+        total: tooltipOptions.showTotal ? fmt.full(total) : void 0
+      }
+    );
+    if (horizontal) {
+      const end = Math.max(0, ...series.map((_, k) => stacks ? stacks[k][i][1] : values[k][i]));
+      return { content, x: Math.min(L.value(end), L.x1), y: L.center(i) };
+    }
+    return { content, x: L.center(i), y: (L.y0 + L.y1) / 2 };
+  };
+  const table = {
+    headers: [index.charAt(0).toUpperCase() + index.slice(1), ...series.map((s) => s.label)],
+    rows: data.map((_, i) => [categories[i], ...series.map((_2, k) => fullValue(k, i))])
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      label,
+      className,
+      count: n,
+      interactive: tooltip !== false,
+      animate,
+      activeIndex,
+      defaultActiveIndex,
+      onActiveIndexChange,
+      hitTest,
+      tooltip: tooltip === false ? void 0 : tooltipFor,
+      describe,
+      table,
+      legend: showLegend ? /* @__PURE__ */ jsx(ChartLegend, { items: series.map((s) => ({ key: s.key, label: s.label, color: s.colorValue, icon: s.icon })) }) : null,
+      children: ({ size, activeIndex: active }) => {
+        const L = layoutFor(size);
+        const marks = [];
+        const activeDots = [];
+        const widths = categories.map((_, i) => approxTextWidth(tickText(i)));
+        const slot = (horizontal ? L.y1 - L.y0 : L.x1 - L.x0) / Math.max(1, n) || 1;
+        const every = Math.max(1, Math.ceil((horizontal ? 18 : Math.max(0, ...widths) + 12) / slot));
+        const categoryAxis = categories.map((_, i) => {
+          if ((n - 1 - i) % every !== 0) return null;
+          const p = L.center(i);
+          if (horizontal) {
+            return /* @__PURE__ */ jsx("text", { x: L.x0 - 10, y: p, dy: "0.32em", textAnchor: "end", className: AXIS_TEXT, children: tickText(i) }, `c${i}`);
+          }
+          const half = widths[i] / 2;
+          const x = Math.min(Math.max(p, L.x0 + half), L.x1 - half);
+          return /* @__PURE__ */ jsx("text", { x, y: L.y1 + 18, textAnchor: "middle", className: AXIS_TEXT, children: tickText(i) }, `c${i}`);
+        });
+        const gridLines = L.valueTicks.map((t) => {
+          const p = L.value(t);
+          return horizontal ? /* @__PURE__ */ jsx("line", { x1: p, x2: p, y1: L.y0, y2: L.y1, className: RULE }, `g${t}`) : /* @__PURE__ */ jsx("line", { x1: L.x0, x2: L.x1, y1: p, y2: p, className: RULE }, `g${t}`);
+        });
+        const valueAxis = L.valueTicks.map((t) => {
+          const p = L.value(t);
+          return horizontal ? /* @__PURE__ */ jsx("text", { x: p, y: L.y1 + 18, textAnchor: "middle", className: AXIS_TEXT, children: axisValue(t) }, `v${t}`) : /* @__PURE__ */ jsx("text", { x: L.x0 - 10, y: p, dy: "0.32em", textAnchor: "end", className: AXIS_TEXT, children: axisValue(t) }, `v${t}`);
+        });
+        let cursor = null;
+        if (active != null && active < n) {
+          const c = L.center(active);
+          const move = { transform: horizontal ? `translate(0px, ${c}px)` : `translate(${c}px, 0px)`, transition: GLIDE };
+          if (L.band) {
+            const w = L.band.bandwidth;
+            cursor = /* @__PURE__ */ jsx("g", { style: move, children: horizontal ? /* @__PURE__ */ jsx("rect", { x: L.x0, y: -w / 2, width: L.x1 - L.x0, height: w, rx: 6, className: "fill-foreground/5" }) : /* @__PURE__ */ jsx("rect", { x: -w / 2, y: L.y0, width: w, height: L.y1 - L.y0, rx: 6, className: "fill-foreground/5" }) });
+          } else {
+            cursor = /* @__PURE__ */ jsx("g", { style: move, children: /* @__PURE__ */ jsx("line", { x1: 0, x2: 0, y1: L.y0, y2: L.y1, className: "stroke-foreground/25" }) });
+          }
+        }
+        if (kind === "bar" && L.band) {
+          const band = L.band;
+          const groups = stacked ? 1 : series.length;
+          const thickness = Math.max(2, Math.min(barWidth, (band.bandwidth - GAP * (groups - 1)) / groups));
+          const groupSize = thickness * groups + GAP * (groups - 1);
+          series.forEach((_, k) => {
+            for (let i = 0; i < n; i++) {
+              const [a, b] = stacks ? stacks[k][i] : [0, values[k][i]];
+              if (a === b) continue;
+              const offset = band.at(i) + (band.bandwidth - groupSize) / 2 + (stacked ? 0 : k * (thickness + GAP));
+              const positive = b >= a;
+              const onAnother = stacks ? stacks.some((other, j) => j < k && other[i][0] !== other[i][1] && Math.sign(other[i][1] - other[i][0]) === Math.sign(b - a)) : false;
+              const outer = !stacks || !stacks.some((other, j) => j > k && other[i][0] !== other[i][1] && Math.sign(other[i][1] - other[i][0]) === Math.sign(b - a));
+              const r = outer ? radius : 0;
+              const p0 = L.value(a);
+              const p1 = L.value(b);
+              const dir = Math.sign(p1 - p0) || 1;
+              const start = p0 + (onAnother ? GAP * dir : 0);
+              let d;
+              let origin;
+              if (horizontal) {
+                const x = Math.min(start, p1);
+                const w = Math.max(1, Math.abs(p1 - start));
+                d = rectPath(x, offset, w, thickness, positive ? [0, r, r, 0] : [r, 0, 0, r]);
+                origin = `${L.base}px 0px`;
+              } else {
+                const y = Math.min(start, p1);
+                const h = Math.max(1, Math.abs(p1 - start));
+                d = rectPath(offset, y, thickness, h, positive ? [r, r, 0, 0] : [0, 0, r, r]);
+                origin = `0px ${L.base}px`;
+              }
+              const dim = active != null && active !== i;
+              marks.push(
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d,
+                    className: cn(
+                      horizontal ? "[[data-reveal=out]_&]:scale-x-0" : "[[data-reveal=out]_&]:scale-y-0",
+                      dim && "opacity-40"
+                    ),
+                    style: {
+                      ...pathStyle(d),
+                      fill: colorAt(k, i),
+                      transformOrigin: origin,
+                      transition: barTransition(stagger(i))
+                    }
+                  },
+                  `b${k}-${i}`
+                )
+              );
+              if (labels && (!stacked || outer)) {
+                const end = stacks ? stacks[k][i][1] : values[k][i];
+                const text = stacked ? fmt.full(values.reduce((sum, sv) => sum + sv[i], 0)) : fmt.full(values[k][i]);
+                const shown = expand ? percent.format(1) : text;
+                const labelClass = "fill-foreground text-caption tabular-nums [[data-reveal=out]_&]:opacity-0";
+                if (labels === "inside" && horizontal && thickness >= 16) {
+                  marks.push(
+                    /* @__PURE__ */ jsx("text", { x: Math.min(p0, p1) + 8, y: offset + thickness / 2, dy: "0.32em", className: "fill-background text-label-sm [[data-reveal=out]_&]:opacity-0", style: { transition: riseTransition(stagger(i)) }, children: categories[i] }, `li${k}-${i}`)
+                  );
+                }
+                marks.push(
+                  horizontal ? /* @__PURE__ */ jsx("text", { x: L.value(end) + (end >= 0 ? 6 : -6), y: offset + thickness / 2, dy: "0.32em", textAnchor: end >= 0 ? "start" : "end", className: labelClass, style: { transition: riseTransition(stagger(i)) }, children: shown }, `l${k}-${i}`) : /* @__PURE__ */ jsx("text", { x: offset + thickness / 2, y: L.value(end) + (end >= 0 ? -7 : 15), textAnchor: "middle", className: labelClass, style: { transition: riseTransition(stagger(i)) }, children: shown }, `l${k}-${i}`)
+                );
+              }
+            }
+          });
+        } else if (L.point) {
+          const pts = (k, which) => data.map((_, i) => [L.center(i), L.value(stacks ? stacks[k][i][which] : which === 0 ? 0 : values[k][i])]);
+          const order = series.map((_, k) => k);
+          if (kind === "area" && !stacks) order.reverse();
+          for (const k of order) {
+            const s = series[k];
+            const top = pts(k, 1);
+            if (kind === "area") {
+              const bottom = stacks ? pts(k, 0) : top.map(([x]) => [x, L.base]);
+              const d = areaPath(top, bottom, curve);
+              const fillId = `${uid}-fill-${k}`;
+              if (gradient) {
+                marks.push(
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: fillId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: s.colorValue, stopOpacity: stacks ? 0.5 : 0.22 }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: s.colorValue, stopOpacity: 0.02 })
+                  ] }) }, `d${k}`)
+                );
+              }
+              marks.push(
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d,
+                    className: "[[data-reveal=out]_&]:scale-y-0 [[data-reveal=out]_&]:opacity-0",
+                    style: {
+                      ...pathStyle(d),
+                      fill: gradient ? `url(#${fillId})` : s.colorValue,
+                      // A wash where areas overlap; firmer when stacked, where each band is its own.
+                      fillOpacity: gradient ? 1 : stacks ? 0.32 : 0.14,
+                      transformOrigin: `0px ${L.base}px`,
+                      transition: riseTransition(stagger(k, 80))
+                    }
+                  },
+                  `a${k}`
+                )
+              );
+            }
+            const line = linePath(top, curve);
+            marks.push(
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: line,
+                  pathLength: 1,
+                  fill: "none",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "[stroke-dasharray:1] [stroke-dashoffset:0] [[data-reveal=out]_&]:[stroke-dashoffset:1]",
+                  style: { ...pathStyle(line), stroke: s.colorValue, transition: drawTransition(stagger(k, 120)) }
+                },
+                `s${k}`
+              )
+            );
+            if (dots || labels) {
+              top.forEach(([x, y], i) => {
+                if (dots)
+                  marks.push(
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: x,
+                        cy: y,
+                        r: 4,
+                        strokeWidth: 2,
+                        className: cn(SURFACE, "[[data-reveal=out]_&]:opacity-0"),
+                        style: { fill: colorBy === "index" ? colorAt(k, i) : s.colorValue, transition: morphTransition(), transitionDelay: `calc(${300 + i * 25}ms * var(--motion-scale, 1))` }
+                      },
+                      `p${k}-${i}`
+                    )
+                  );
+                if (labels)
+                  marks.push(
+                    /* @__PURE__ */ jsx("text", { x, y: y - 12, textAnchor: "middle", className: "fill-foreground text-caption tabular-nums [[data-reveal=out]_&]:opacity-0", style: { transition: morphTransition() }, children: fmt.full(values[k][i]) }, `t${k}-${i}`)
+                  );
+              });
+            }
+            if (active != null && active < n) {
+              const [x, y] = top[active];
+              activeDots.push(/* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, strokeWidth: 2, className: SURFACE, style: { fill: s.colorValue, cx: x, cy: y, transition: GLIDE } }, `ap${k}`));
+            }
+          }
+        }
+        const zero = kind === "bar" && (hasNegative || !grid);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          grid ? /* @__PURE__ */ jsx("g", { children: gridLines }) : null,
+          cursor,
+          /* @__PURE__ */ jsx("g", { children: marks }),
+          /* @__PURE__ */ jsx("g", { children: activeDots }),
+          zero ? horizontal ? /* @__PURE__ */ jsx("line", { x1: L.base, x2: L.base, y1: L.y0, y2: L.y1, className: "stroke-foreground/20" }) : /* @__PURE__ */ jsx("line", { x1: L.x0, x2: L.x1, y1: L.base, y2: L.base, className: "stroke-foreground/20" }) : null,
+          (horizontal ? xAxis : yAxis) ? /* @__PURE__ */ jsx("g", { children: valueAxis }) : null,
+          (horizontal ? yAxis : xAxis) ? /* @__PURE__ */ jsx("g", { children: categoryAxis }) : null
+        ] });
+      }
+    }
+  );
+}
+export {
+  CartesianChart
+};