@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/ChartV2/layout.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file layout.ts
+ * @output Computes scales, stacking, grouping, then delegates to each series.resolve()
+ * @position Called by Chart root — the single layout pass
+ *
+ * The layout engine does NOT know about specific mark types.
+ * It handles cross-series coordination (scales, stacking, grouping)
+ * then calls each series' own resolve() method.
+ */
+import { scaleLinear } from 'd3-scale';
+import type { SeriesDef, ChartScale, ResolvedPoint } from './types';
+export interface LayoutInput {
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: SeriesDef[];
+    width: number;
+    height: number;
+}
+export interface LayoutResult {
+    xScale: ChartScale;
+    yScale: ReturnType<typeof scaleLinear<number, number>>;
+    resolved: Map<string, ResolvedPoint[]>;
+}
+export declare function computeLayout({ data, xKey, series, width, height, }: LayoutInput): LayoutResult;
+//# sourceMappingURL=layout.d.ts.map

package/dist/ChartV2/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/ChartV2/layout.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAAC,WAAW,EAAY,MAAM,UAAU,CAAC;AAEhD,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,aAAa,EAEd,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;CACxC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,GACP,EAAE,WAAW,GAAG,YAAY,CAqL5B"}

package/dist/ChartV2/layout.js

@@ -0,0 +1,195 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file layout.ts
+ * @output Computes scales, stacking, grouping, then delegates to each series.resolve()
+ * @position Called by Chart root — the single layout pass
+ *
+ * The layout engine does NOT know about specific mark types.
+ * It handles cross-series coordination (scales, stacking, grouping)
+ * then calls each series' own resolve() method.
+ */
+
+import { scaleLinear, scaleBand } from 'd3-scale';
+import { stack as d3Stack, stackOrderNone, stackOffsetNone } from 'd3-shape';
+export function computeLayout({
+  data,
+  xKey,
+  series,
+  width,
+  height
+}) {
+  // ─── 1. X scale ──────────────────────────────────────────────────────
+  const xValues = data.map(d => d[xKey]);
+  const isNumericX = xValues.length > 0 && xValues.every(v => typeof v === 'number');
+  let xScale;
+  if (isNumericX) {
+    const nums = xValues;
+    xScale = scaleLinear().domain([Math.min(...nums), Math.max(...nums)]).range([0, width]).nice();
+  } else {
+    xScale = scaleBand().domain(xValues.map(String)).range([0, width]).padding(0.2);
+  }
+
+  // ─── 2. Y domain from all series dataKeys ────────────────────────────
+  const allKeys = new Set();
+  let includeZero = false;
+  for (const s of series) {
+    for (const k of s.dataKeys) {
+      allKeys.add(k);
+    }
+    if (s.layout.includeZero) {
+      includeZero = true;
+    }
+  }
+
+  // Collect which keys are stacked together so we can compute stacked extents
+  const stackGroupKeys = new Map();
+  for (const s of series) {
+    if (s.layout.stack) {
+      const group = stackGroupKeys.get(s.layout.stack) ?? [];
+      group.push(s.dataKeys[0]);
+      stackGroupKeys.set(s.layout.stack, group);
+    }
+  }
+  let yMin = Infinity,
+    yMax = -Infinity;
+
+  // For stacked series, compute the sum at each data point
+  const stackedKeys = new Set();
+  for (const [, keys] of stackGroupKeys) {
+    for (const k of keys) {
+      stackedKeys.add(k);
+    }
+    for (const d of data) {
+      let sum = 0;
+      for (const k of keys) {
+        const v = d[k];
+        if (typeof v === 'number') {
+          sum += v;
+        }
+      }
+      if (sum > yMax) {
+        yMax = sum;
+      }
+      if (sum < yMin) {
+        yMin = sum;
+      }
+    }
+  }
+
+  // For non-stacked series, use individual values
+  for (const d of data) {
+    for (const k of allKeys) {
+      if (stackedKeys.has(k)) {
+        continue;
+      } // already handled above
+      const v = d[k];
+      if (typeof v === 'number') {
+        if (v < yMin) {
+          yMin = v;
+        }
+        if (v > yMax) {
+          yMax = v;
+        }
+      }
+    }
+  }
+  if (includeZero) {
+    if (yMin > 0) {
+      yMin = 0;
+    }
+    if (yMax < 0) {
+      yMax = 0;
+    }
+  }
+  const yScale = scaleLinear().domain([yMin, yMax]).range([height, 0]).nice();
+
+  // ─── 3. Stacking ─────────────────────────────────────────────────────
+  const stackGroups = new Map();
+  for (const s of series) {
+    if (s.layout.stack) {
+      const group = stackGroups.get(s.layout.stack) ?? [];
+      group.push(s.dataKeys[0]);
+      stackGroups.set(s.layout.stack, group);
+    }
+  }
+  const stackedData = new Map();
+  for (const [, keys] of stackGroups) {
+    const stackGen = d3Stack().keys(keys).order(stackOrderNone).offset(stackOffsetNone);
+    const stacked = stackGen(data);
+    for (const layer of stacked) {
+      stackedData.set(layer.key, layer.map(d => ({
+        y0: d[0],
+        y1: d[1]
+      })));
+    }
+  }
+
+  // ─── 4. Bar grouping ─────────────────────────────────────────────────
+  // Bars can be grouped (side-by-side) whether or not they are stacked.
+  // For grouped stacks, each unique stack group name within the same bar
+  // group gets its own sub-band. For ungrouped non-stacked bars with a
+  // group key, each series gets its own sub-band.
+  const barGroups = new Map();
+  for (const s of series) {
+    if (s.type === 'bar' && s.layout.group) {
+      const group = barGroups.get(s.layout.group) ?? [];
+      // For grouped stacks: use the stack name as the group slot identifier
+      // so all series in the same stack share one slot.
+      const slotKey = s.layout.stack ?? s.key;
+      if (!group.includes(slotKey)) {
+        group.push(slotKey);
+      }
+      barGroups.set(s.layout.group, group);
+    }
+  }
+
+  // ─── 5. Resolve each series ──────────────────────────────────────────
+  const ctx = {
+    data,
+    xKey,
+    xScale,
+    yScale,
+    width,
+    height
+  };
+  const resolved = new Map();
+
+  // Determine which series is the topmost in each stack group
+  const stackTopKeys = new Set();
+  for (const [, keys] of stackGroups) {
+    // Last key in the stack group is rendered on top
+    if (keys.length > 0) {
+      stackTopKeys.add(keys[keys.length - 1]);
+    }
+  }
+  for (const s of series) {
+    const stackOffsets = stackedData.get(s.dataKeys[0]);
+
+    // Mark whether this series is the topmost in its stack
+    if (s.layout.stack) {
+      s._isTopOfStack = stackTopKeys.has(s.dataKeys[0]);
+    } else {
+      s._isTopOfStack = true;
+    }
+    let groupInfo;
+    if (s.layout.group) {
+      const groupKeys = barGroups.get(s.layout.group);
+      if (groupKeys) {
+        // For grouped stacks, the slot key is the stack name
+        const slotKey = s.layout.stack ?? s.key;
+        groupInfo = {
+          index: groupKeys.indexOf(slotKey),
+          count: groupKeys.length
+        };
+      }
+    }
+    const points = s.resolve(ctx, stackOffsets, groupInfo);
+    resolved.set(s.key, points);
+  }
+  return {
+    xScale,
+    yScale,
+    resolved
+  };
+}

package/dist/ChartV2/legend.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file legend.ts
+ * @output Legend utility — derives legend items from series definitions
+ * @position Used by Chart to bridge series → legend items
+ */
+import { type SeriesDef } from './types';
+export interface LegendItem {
+    label: string;
+    color: string;
+    /** Mark type — determines swatch shape (square for bar, line for everything else) */
+    type?: string;
+}
+/**
+ * Derive legend items from series definitions.
+ * Skips utility marks and series without a color.
+ */
+export declare function deriveLegendItems(series: readonly SeriesDef[]): LegendItem[];
+//# sourceMappingURL=legend.d.ts.map

package/dist/ChartV2/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/ChartV2/legend.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAQD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,UAAU,EAAE,CAI5E"}

package/dist/ChartV2/legend.js

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file legend.ts
+ * @output Legend utility — derives legend items from series definitions
+ * @position Used by Chart to bridge series → legend items
+ */
+
+import { isUtilityMarkType } from "./types.js";
+function hasLegendColor(series) {
+  return !isUtilityMarkType(series.type) && series.color != null;
+}
+
+/**
+ * Derive legend items from series definitions.
+ * Skips utility marks and series without a color.
+ */
+export function deriveLegendItems(series) {
+  return series.filter(hasLegendColor).map(s => ({
+    label: s.label ?? s.key,
+    color: s.color,
+    type: s.type
+  }));
+}

package/dist/ChartV2/marks/area.d.ts

@@ -0,0 +1,19 @@
+import type { SeriesDef } from '../types';
+declare const CURVES: {
+    readonly linear: import("d3-shape").CurveFactory;
+    readonly monotone: import("d3-shape").CurveFactory;
+    readonly natural: import("d3-shape").CurveFactory;
+    readonly step: import("d3-shape").CurveFactory;
+};
+export interface AreaOptions {
+    color?: string;
+    opacity?: number;
+    curve?: keyof typeof CURVES;
+    stack?: string;
+    gradient?: boolean;
+    stroke?: boolean;
+    label?: string;
+}
+export declare function area(dataKey: string, options?: AreaOptions): SeriesDef;
+export {};
+//# sourceMappingURL=area.d.ts.map

package/dist/ChartV2/marks/area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/area.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,QAAA,MAAM,MAAM;;;;;CAKF,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,SAAS,CAsF1E"}

package/dist/ChartV2/marks/area.js

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/area.tsx
+ * @output Area series — fill under line with stacking + gradient support
+ */
+
+import { area as d3Area, curveLinear, curveMonotoneX, curveNatural, curveStep } from 'd3-shape';
+import { line as d3Line } from 'd3-shape';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CURVES = {
+  linear: curveLinear,
+  monotone: curveMonotoneX,
+  natural: curveNatural,
+  step: curveStep
+};
+export function area(dataKey, options = {}) {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const opacity = options.opacity ?? 0.3;
+  const curve = options.curve ?? 'monotone';
+  const gradient = options.gradient ?? false;
+  const stroke = options.stroke ?? true;
+  return {
+    type: 'area',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color,
+    label: options.label ?? dataKey,
+    layout: {
+      stack: options.stack,
+      includeZero: true
+    },
+    resolve(ctx, stackOffsets) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        let py, py0;
+        if (stackOffsets) {
+          py = yScale(stackOffsets[i].y1);
+          py0 = yScale(stackOffsets[i].y0);
+        } else {
+          const v = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+          py = yScale(v);
+          py0 = yScale(0);
+        }
+        points.push({
+          px,
+          py,
+          py0,
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved) {
+      if (resolved.length === 0) {
+        return null;
+      }
+      const curveFactory = CURVES[curve];
+      const areaGen = d3Area().x(d => d.px).y0(d => d.py0).y1(d => d.py).curve(curveFactory);
+      const pathD = areaGen(resolved) ?? '';
+      const lineGen = d3Line().x(d => d.px).y(d => d.py).curve(curveFactory);
+      const strokeD = lineGen(resolved) ?? '';
+      const gradientId = `area-grad-${dataKey}`;
+      return /*#__PURE__*/_jsxs("g", {
+        children: [gradient && /*#__PURE__*/_jsx("defs", {
+          children: /*#__PURE__*/_jsxs("linearGradient", {
+            id: gradientId,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [/*#__PURE__*/_jsx("stop", {
+              offset: "0%",
+              stopColor: color,
+              stopOpacity: opacity
+            }), /*#__PURE__*/_jsx("stop", {
+              offset: "100%",
+              stopColor: color,
+              stopOpacity: 0
+            })]
+          })
+        }), /*#__PURE__*/_jsx("path", {
+          d: pathD,
+          fill: gradient ? `url(#${gradientId})` : color,
+          fillOpacity: gradient ? 1 : opacity,
+          stroke: "none"
+        }), stroke && /*#__PURE__*/_jsx("path", {
+          d: strokeD,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 2
+        })]
+      });
+    }
+  };
+}

package/dist/ChartV2/marks/band.d.ts

@@ -0,0 +1,9 @@
+import type { SeriesDef } from '../types';
+export interface BandOptions {
+    upper: string;
+    lower: string;
+    color?: string;
+    opacity?: number;
+}
+export declare function band(options: BandOptions): SeriesDef;
+//# sourceMappingURL=band.d.ts.map

package/dist/ChartV2/marks/band.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"band.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/band.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAmDpD"}

package/dist/ChartV2/marks/band.js

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/band.tsx
+ * @output Band (confidence interval) series
+ */
+
+import { area as d3Area, curveMonotoneX } from 'd3-shape';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function band(options) {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const opacity = options.opacity ?? 0.15;
+  return {
+    type: 'band',
+    key: `band-${options.upper}-${options.lower}`,
+    dataKeys: [options.upper, options.lower],
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        const upper = typeof d[options.upper] === 'number' ? d[options.upper] : 0;
+        const lower = typeof d[options.lower] === 'number' ? d[options.lower] : 0;
+        points.push({
+          px,
+          py: yScale(upper),
+          py0: yScale(lower),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved) {
+      if (resolved.length === 0) {
+        return null;
+      }
+      const areaGen = d3Area().x(d => d.px).y0(d => d.py0).y1(d => d.py).curve(curveMonotoneX);
+      const pathD = areaGen(resolved) ?? '';
+      return /*#__PURE__*/_jsx("path", {
+        d: pathD,
+        fill: color,
+        fillOpacity: opacity,
+        stroke: "none"
+      });
+    }
+  };
+}

package/dist/ChartV2/marks/bar.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file marks/bar.tsx
+ * @output Bar series — self-contained resolve + render
+ * @position Standalone mark; chart root calls resolve() then render()
+ */
+import type { SeriesDef } from '../types';
+export type ColorAccessor = string | ((datum: Record<string, unknown>, index: number) => string);
+export interface BarOptions {
+    color?: ColorAccessor;
+    opacity?: number;
+    radius?: number;
+    stack?: string;
+    group?: string;
+    label?: string;
+}
+export declare function bar(dataKey: string, options?: BarOptions): SeriesDef;
+//# sourceMappingURL=bar.d.ts.map

package/dist/ChartV2/marks/bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/bar.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgDD,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,SAAS,CAwFxE"}

package/dist/ChartV2/marks/bar.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/bar.tsx
+ * @output Bar series — self-contained resolve + render
+ * @position Standalone mark; chart root calls resolve() then render()
+ */
+
+/**
+ * Build an SVG path for a rectangle with only the top corners rounded.
+ * When `r` is 0, produces a simple rect path with no curves.
+ */
+function roundedTopRect(x, y, w, h, r) {
+  // Clamp radius to half the smaller dimension
+  const cr = Math.min(r, w / 2, h / 2);
+  if (cr <= 0) {
+    return `M${x},${y + h}V${y}H${x + w}V${y + h}Z`;
+  }
+  return `M${x},${y + h}` + `V${y + cr}Q${x},${y} ${x + cr},${y}` + `H${x + w - cr}Q${x + w},${y} ${x + w},${y + cr}` + `V${y + h}Z`;
+}
+
+/**
+ * Build an SVG path for a rectangle with only the bottom corners rounded.
+ */
+function roundedBottomRect(x, y, w, h, r) {
+  const cr = Math.min(r, w / 2, h / 2);
+  if (cr <= 0) {
+    return `M${x},${y}V${y + h}H${x + w}V${y}Z`;
+  }
+  return `M${x},${y}` + `V${y + h - cr}Q${x},${y + h} ${x + cr},${y + h}` + `H${x + w - cr}Q${x + w},${y + h} ${x + w},${y + h - cr}` + `V${y}Z`;
+}
+export function bar(dataKey, options = {}) {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const opacity = options.opacity ?? 1;
+  const radius = options.radius ?? 4;
+  let barWidth = 0;
+  let barOffset = 0;
+  const seriesDef = {
+    type: 'bar',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color: typeof color === 'string' ? color : undefined,
+    label: options.label ?? dataKey,
+    layout: {
+      stack: options.stack,
+      group: options.group,
+      includeZero: true
+    },
+    resolve(ctx, stackOffsets, groupInfo) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      if (!('bandwidth' in xScale)) {
+        return [];
+      }
+      const bandScale = xScale;
+      const bw = bandScale.bandwidth();
+      if (groupInfo) {
+        const gutter = bw * 0.05;
+        const totalGutters = gutter * (groupInfo.count - 1);
+        barWidth = (bw - totalGutters) / groupInfo.count;
+        barOffset = groupInfo.index * (barWidth + gutter);
+      } else {
+        barWidth = bw;
+        barOffset = 0;
+      }
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const xBase = bandScale(String(d[xKey])) ?? 0;
+        const px = xBase + barOffset + barWidth / 2;
+        let py;
+        let py0;
+        if (stackOffsets) {
+          py = yScale(stackOffsets[i].y1);
+          py0 = yScale(stackOffsets[i].y0);
+        } else {
+          const v = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+          py = yScale(v);
+          py0 = yScale(0);
+        }
+        points.push({
+          px,
+          py,
+          py0,
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      const {
+        data
+      } = ctx;
+      const isTop = seriesDef._isTopOfStack !== false;
+      const r = isTop ? radius : 0;
+      return /*#__PURE__*/_jsx("g", {
+        opacity: opacity,
+        children: resolved.map((p, i) => {
+          const d = data[p.dataIndex];
+          const fill = typeof color === 'function' ? color(d, p.dataIndex) : color;
+          const x = p.px - barWidth / 2;
+          const y = Math.min(p.py, p.py0);
+          const h = Math.max(0, Math.abs(p.py0 - p.py));
+          const growsUp = p.py <= p.py0;
+          const d_attr = growsUp ? roundedTopRect(x, y, barWidth, h, r) : roundedBottomRect(x, y, barWidth, h, r);
+          return /*#__PURE__*/_jsx("path", {
+            d: d_attr,
+            fill: fill
+          }, i);
+        })
+      });
+    }
+  };
+  return seriesDef;
+}

package/dist/ChartV2/marks/candlestick.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file marks/candlestick.tsx
+ * @output Candlestick (OHLC) series
+ */
+import type { SeriesDef } from '../types';
+export interface CandlestickOptions {
+    open: string;
+    high: string;
+    low: string;
+    close: string;
+    upColor?: string;
+    downColor?: string;
+}
+export declare function candlestick(options: CandlestickOptions): SeriesDef;
+//# sourceMappingURL=candlestick.d.ts.map

package/dist/ChartV2/marks/candlestick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"candlestick.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/candlestick.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,CAsFlE"}