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

package/dist/Chart/ChartAxis.js

@@ -0,0 +1,147 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartAxis.tsx
+ * @output Renders an axis (top, right, bottom, left) using the chart's scales
+ * @position Child of Chart; reads scales from context
+ *
+ * Ticks use CSS transitions for smooth sliding during streaming updates.
+ */
+
+import { useMemo } from 'react';
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chart axis. Renders tick marks and labels for the x or y dimension.
+ * Ticks transition smoothly when the scale domain shifts (e.g. streaming).
+ *
+ * @example
+ * ```
+ * <ChartAxis position="bottom" />
+ * <ChartAxis position="left" tickCount={5} tickFormat={currency} />
+ * <ChartAxis position="bottom" maxTicks={6} truncate={10} />
+ * ```
+ */
+export function ChartAxis({
+  position,
+  tickCount = 5,
+  maxTicks,
+  tickFormat,
+  truncate,
+  animated = true
+}) {
+  const {
+    width,
+    height,
+    xScale,
+    yScale
+  } = useChart();
+  const isHorizontal = position === 'top' || position === 'bottom';
+  const scale = isHorizontal ? xScale : yScale;
+  const ticks = useMemo(() => {
+    let allTicks;
+    if (isBandScale(scale)) {
+      allTicks = scale.domain().map(d => ({
+        value: d,
+        offset: (scale(d) ?? 0) + scale.bandwidth() / 2
+      }));
+    } else {
+      const linearScale = scale;
+      allTicks = linearScale.ticks(tickCount).map(d => ({
+        value: d,
+        offset: linearScale(d)
+      }));
+    }
+
+    // Auto-skip: show every Nth label if maxTicks is exceeded
+    if (maxTicks && allTicks.length > maxTicks) {
+      const step = Math.ceil(allTicks.length / maxTicks);
+      allTicks = allTicks.filter((_, i) => i % step === 0);
+    }
+    return allTicks;
+  }, [scale, tickCount, maxTicks]);
+  const transform = position === 'bottom' ? `translate(0,${height})` : position === 'right' ? `translate(${width},0)` : undefined;
+
+  // For the bottom axis, draw the axis line at y=0 when the domain spans negative values
+  const axisLineY = (() => {
+    if (position !== 'bottom') {
+      return 0;
+    }
+    const domain = yScale.domain();
+    if (domain[0] < 0 && domain[1] > 0) {
+      // The axis line should appear at the zero mark relative to the bottom edge
+      return yScale(0) - height;
+    }
+    return 0;
+  })();
+  const baseFormat = tickFormat ?? String;
+  const format = truncate ? value => {
+    const str = baseFormat(value);
+    return str.length > truncate ? str.slice(0, truncate) + '\u2026' : str;
+  } : baseFormat;
+  const tickSize = 6;
+
+  // Transition style for smooth tick movement during streaming
+  const tickTransition = animated ? 'transform 150ms linear, opacity 150ms ease' : undefined;
+  return /*#__PURE__*/_jsxs("g", {
+    transform: transform,
+    children: [/*#__PURE__*/_jsx("line", {
+      x1: isHorizontal ? 0 : 0,
+      x2: isHorizontal ? width : 0,
+      y1: isHorizontal ? axisLineY : 0,
+      y2: isHorizontal ? axisLineY : height,
+      stroke: "var(--color-border-emphasized)",
+      strokeWidth: 1
+    }), ticks.map(({
+      value,
+      offset
+    }) => {
+      const label = format(value);
+      // Clip ticks that are outside the visible area
+      const isVisible = isHorizontal ? offset >= -10 && offset <= width + 10 : offset >= -10 && offset <= height + 10;
+      if (isHorizontal) {
+        const y = position === 'bottom' ? tickSize : -tickSize;
+        return /*#__PURE__*/_jsxs("g", {
+          style: {
+            transform: `translateX(${offset}px)`,
+            transition: tickTransition,
+            opacity: isVisible ? 1 : 0
+          },
+          children: [/*#__PURE__*/_jsx("line", {
+            y2: y,
+            stroke: "var(--color-border-emphasized)",
+            strokeWidth: 1
+          }), /*#__PURE__*/_jsx("text", {
+            y: position === 'bottom' ? tickSize + 12 : -(tickSize + 4),
+            textAnchor: "middle",
+            fill: "var(--color-text-secondary)",
+            fontSize: 12,
+            children: label
+          })]
+        }, label);
+      }
+      // Vertical axis
+      const x = position === 'left' ? -tickSize : tickSize;
+      return /*#__PURE__*/_jsxs("g", {
+        style: {
+          transform: `translateY(${offset}px)`,
+          transition: tickTransition,
+          opacity: isVisible ? 1 : 0
+        },
+        children: [/*#__PURE__*/_jsx("line", {
+          x2: x,
+          stroke: "var(--color-border-emphasized)",
+          strokeWidth: 1
+        }), /*#__PURE__*/_jsx("text", {
+          x: position === 'left' ? -(tickSize + 4) : tickSize + 4,
+          dy: "0.32em",
+          textAnchor: position === 'left' ? 'end' : 'start',
+          fill: "var(--color-text-secondary)",
+          fontSize: 12,
+          children: label
+        })]
+      }, label);
+    })]
+  });
+}

package/dist/Chart/ChartBar.d.ts

@@ -0,0 +1,19 @@
+export interface ChartBarProps {
+    /** Which data key to visualize */
+    dataKey: string;
+    /** Bar fill color (hex string, CSS var, etc.) */
+    color: string;
+    /** Corner radius on bar tops */
+    radius?: number;
+}
+/**
+ * Bar marks. Requires a band xScale (categorical x-axis).
+ * Bars grow from the zero line — handles both positive and negative values.
+ *
+ * @example
+ * ```
+ * <ChartBar dataKey="revenue" color={useChartColors().categorical(1)[0]} />
+ * ```
+ */
+export declare function ChartBar({ dataKey, color, radius }: ChartBarProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartBar.d.ts.map

package/dist/Chart/ChartBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBar.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartBar.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,MAAU,EAAC,EAAE,aAAa,sCAyCnE"}

package/dist/Chart/ChartBar.js

@@ -0,0 +1,61 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartBar.tsx
+ * @output Renders vertical bars for a data key
+ * @position Child of Chart; reads scales from context
+ */
+
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Bar marks. Requires a band xScale (categorical x-axis).
+ * Bars grow from the zero line — handles both positive and negative values.
+ *
+ * @example
+ * ```
+ * <ChartBar dataKey="revenue" color={useChartColors().categorical(1)[0]} />
+ * ```
+ */
+export function ChartBar({
+  dataKey,
+  color,
+  radius = 4
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale
+  } = useChart();
+  if (!isBandScale(xScale)) {
+    return null;
+  }
+
+  // Zero line position — bars grow from here
+  const zeroY = yScale(0);
+  return /*#__PURE__*/_jsx("g", {
+    children: data.map((d, i) => {
+      const xVal = xScale(String(d[xKey]));
+      if (xVal == null) {
+        return null;
+      }
+      const yVal = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+      const yPos = yScale(yVal);
+
+      // Bar grows from zero line toward the value
+      const barY = Math.min(yPos, zeroY);
+      const barHeight = Math.abs(yPos - zeroY);
+      return /*#__PURE__*/_jsx("rect", {
+        x: xVal,
+        y: barY,
+        width: xScale.bandwidth(),
+        height: Math.max(0, barHeight),
+        fill: color,
+        rx: radius,
+        ry: radius
+      }, i);
+    })
+  });
+}

package/dist/Chart/ChartBrush.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @file ChartBrush.tsx
+ * @output Drag-to-select region. Supports x-only or 2D (xy) brush modes.
+ * @position Child of Chart; reads scales from context
+ */
+import React from 'react';
+/**
+ * Brush direction mode:
+ * - `'x'` — horizontal range selection (default)
+ * - `'xy'` — 2D rectangular selection
+ */
+export type BrushMode = 'x' | 'xy';
+export interface BrushRange {
+    x: [number, number];
+    y?: [number, number];
+}
+export interface ChartBrushProps {
+    /**
+     * Brush direction mode.
+     * - `'x'` — horizontal selection (default, good for time ranges)
+     * - `'xy'` — rectangular 2D selection (good for scatter plots)
+     *
+     * @default 'x'
+     */
+    mode?: BrushMode;
+    /**
+     * Called when the user finishes a brush gesture.
+     * Receives the selected range in data coordinates and the matching data points.
+     */
+    onBrush?: (range: BrushRange, data: Record<string, unknown>[]) => void;
+    /**
+     * Called when the brush is cleared (click without drag).
+     */
+    onClear?: () => void;
+    /**
+     * Brush overlay color.
+     * @default 'var(--color-accent)'
+     */
+    color?: string;
+    /**
+     * Brush overlay opacity.
+     * @default 0.15
+     */
+    opacity?: number;
+}
+/**
+ * Brush interaction for range selection.
+ *
+ * @example
+ * ```tsx
+ * // X-only (default)
+ * <ChartBrush onBrush={({x}) => setZoom(x)} />
+ *
+ * // 2D rectangular
+ * <ChartBrush mode="xy" onBrush={({x, y}, points) => setSelected(points)} />
+ * ```
+ */
+export declare function ChartBrush({ mode, onBrush, onClear, color, opacity, }: ChartBrushProps): React.JSX.Element;
+//# sourceMappingURL=ChartBrush.d.ts.map

package/dist/Chart/ChartBrush.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBrush.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartBrush.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC;IAEvE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAiBD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAU,EACV,OAAO,EACP,OAAO,EACP,KAA6B,EAC7B,OAAc,GACf,EAAE,eAAe,qBAgJjB"}

package/dist/Chart/ChartBrush.js

@@ -0,0 +1,197 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartBrush.tsx
+ * @output Drag-to-select region. Supports x-only or 2D (xy) brush modes.
+ * @position Child of Chart; reads scales from context
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+
+/**
+ * Brush direction mode:
+ * - `'x'` — horizontal range selection (default)
+ * - `'xy'` — 2D rectangular selection
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function localCoords(e) {
+  const svg = e.currentTarget.ownerSVGElement;
+  if (!svg) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+  const pt = svg.createSVGPoint();
+  pt.x = e.clientX;
+  pt.y = e.clientY;
+  const local = pt.matrixTransform(e.currentTarget.getScreenCTM()?.inverse());
+  return {
+    x: local.x,
+    y: local.y
+  };
+}
+
+/**
+ * Brush interaction for range selection.
+ *
+ * @example
+ * ```tsx
+ * // X-only (default)
+ * <ChartBrush onBrush={({x}) => setZoom(x)} />
+ *
+ * // 2D rectangular
+ * <ChartBrush mode="xy" onBrush={({x, y}, points) => setSelected(points)} />
+ * ```
+ */
+export function ChartBrush({
+  mode = 'x',
+  onBrush,
+  onClear,
+  color = 'var(--color-accent)',
+  opacity = 0.15
+}) {
+  const {
+    width,
+    height,
+    data,
+    xKey,
+    xScale,
+    yScale
+  } = useChart();
+  const [brush, setBrush] = useState(null);
+  const dragging = useRef(false);
+  const startRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const onPointerDown = useCallback(e => {
+    e.target.setPointerCapture(e.pointerId);
+    dragging.current = true;
+    const {
+      x,
+      y
+    } = localCoords(e);
+    startRef.current = {
+      x,
+      y
+    };
+    setBrush({
+      x0: x,
+      y0: y,
+      x1: x,
+      y1: y
+    });
+  }, []);
+  const onPointerMove = useCallback(e => {
+    if (!dragging.current) {
+      return;
+    }
+    const {
+      x,
+      y
+    } = localCoords(e);
+    const {
+      x: sx,
+      y: sy
+    } = startRef.current;
+    if (mode === 'x') {
+      setBrush({
+        x0: Math.min(sx, x),
+        y0: 0,
+        x1: Math.max(sx, x),
+        y1: height
+      });
+    } else {
+      setBrush({
+        x0: Math.min(sx, x),
+        y0: Math.min(sy, y),
+        x1: Math.max(sx, x),
+        y1: Math.max(sy, y)
+      });
+    }
+  }, [mode, height]);
+  const onPointerUp = useCallback(() => {
+    dragging.current = false;
+    if (!brush) {
+      return;
+    }
+    const dx = Math.abs(brush.x1 - brush.x0);
+    const dy = Math.abs(brush.y1 - brush.y0);
+
+    // Too small — treat as click (clear)
+    if (dx < 3 && (mode === 'x' || dy < 3)) {
+      setBrush(null);
+      onClear?.();
+      return;
+    }
+    if (isBandScale(xScale)) {
+      // Band scale — can't invert meaningfully for range
+      setBrush(null);
+      return;
+    }
+    const linear = xScale;
+    const xMin = linear.invert(brush.x0);
+    const xMax = linear.invert(brush.x1);
+    const range = {
+      x: [xMin, xMax]
+    };
+    let selected;
+    if (mode === 'xy') {
+      const yMin = yScale.invert(brush.y1); // y is inverted (top=0)
+      const yMax = yScale.invert(brush.y0);
+      range.y = [yMin, yMax];
+      selected = data.filter(d => {
+        const xv = d[xKey];
+        if (typeof xv !== 'number' || xv < xMin || xv > xMax) {
+          return false;
+        }
+        // Check all numeric values against y range
+        return Object.entries(d).some(([k, v]) => k !== xKey && typeof v === 'number' && v >= yMin && v <= yMax);
+      });
+    } else {
+      selected = data.filter(d => {
+        const v = d[xKey];
+        return typeof v === 'number' && v >= xMin && v <= xMax;
+      });
+    }
+    onBrush?.(range, selected);
+  }, [brush, mode, xScale, yScale, data, xKey, onBrush, onClear]);
+  const rectX = brush ? brush.x0 : 0;
+  const rectY = brush ? brush.y0 : 0;
+  const rectW = brush ? brush.x1 - brush.x0 : 0;
+  const rectH = brush ? brush.y1 - brush.y0 : 0;
+  const brushRectStyle = {
+    cursor: 'crosshair',
+    touchAction: 'none',
+    userSelect: 'none'
+  };
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height,
+      fill: "transparent",
+      style: brushRectStyle,
+      onPointerDown: onPointerDown,
+      onPointerMove: onPointerMove,
+      onPointerUp: onPointerUp,
+      onPointerCancel: onPointerUp
+    }), brush && (rectW > 1 || rectH > 1) && /*#__PURE__*/_jsx("rect", {
+      x: rectX,
+      y: rectY,
+      width: rectW,
+      height: rectH,
+      fill: color,
+      fillOpacity: opacity,
+      stroke: color,
+      strokeWidth: 1,
+      strokeOpacity: 0.4,
+      rx: mode === 'xy' ? 2 : 0,
+      pointerEvents: "none"
+    })]
+  });
+}

package/dist/Chart/ChartCandlestick.d.ts

@@ -0,0 +1,50 @@
+export interface ChartCandlestickProps {
+    /** Data key for the high/max value (top of whisker) */
+    high: string;
+    /** Data key for the low/min value (bottom of whisker) */
+    low: string;
+    /** Data key for the open/Q1 value (bottom of body) */
+    open: string;
+    /** Data key for the close/Q3 value (top of body) */
+    close: string;
+    /**
+     * Visual variant:
+     * - `'default'` — filled body with whiskers
+     * - `'bar'` — OHLC bar — vertical range line, left tick at open, right tick at close
+     */
+    variant?: 'default' | 'bar';
+    /** Color when close >= open (bullish / positive) */
+    upColor?: string;
+    /** Color when close < open (bearish / negative) */
+    downColor?: string;
+    /** Fixed color — overrides up/down logic. Use for box plots. */
+    color?: string;
+    /** Body width as fraction of band width (default: 0.6) */
+    bodyWidth?: number;
+    /** Stroke width for whiskers and bar lines */
+    strokeWidth?: number;
+    /** Corner radius on body (default variant only) */
+    radius?: number;
+}
+/**
+ * Candlestick / box-whisker marks.
+ *
+ * @example
+ * ```
+ * // Financial OHLC
+ * <ChartCandlestick
+ *   high="high" low="low" open="open" close="close"
+ *   upColor={useChartColors().semantic.positive}
+ *   downColor={useChartColors().semantic.negative}
+ * />
+ *
+ * // OHLC bar
+ * <ChartCandlestick
+ *   variant="bar"
+ *   high="max" low="min" open="q1" close="median"
+ *   color={useChartColors().categorical(1)[0]}
+ * />
+ * ```
+ */
+export declare function ChartCandlestick({ high, low, open, close, variant, upColor, downColor, color, bodyWidth, strokeWidth, radius, }: ChartCandlestickProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartCandlestick.d.ts.map

package/dist/Chart/ChartCandlestick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCandlestick.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartCandlestick.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAe,EACf,WAAiB,EACjB,MAAU,GACX,EAAE,qBAAqB,sCA6GvB"}

package/dist/Chart/ChartCandlestick.js

@@ -0,0 +1,138 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartCandlestick.tsx
+ * @output Renders candlestick/box-whisker marks for OHLC or statistical data
+ * @position Child of Chart; reads scales from context
+ *
+ * Two variants:
+ * - `'default'` — filled body with whiskers (traditional candlestick/box plot)
+ * - `'bar'` — OHLC bar — vertical line with open/close ticks
+ */
+
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Candlestick / box-whisker marks.
+ *
+ * @example
+ * ```
+ * // Financial OHLC
+ * <ChartCandlestick
+ *   high="high" low="low" open="open" close="close"
+ *   upColor={useChartColors().semantic.positive}
+ *   downColor={useChartColors().semantic.negative}
+ * />
+ *
+ * // OHLC bar
+ * <ChartCandlestick
+ *   variant="bar"
+ *   high="max" low="min" open="q1" close="median"
+ *   color={useChartColors().categorical(1)[0]}
+ * />
+ * ```
+ */
+export function ChartCandlestick({
+  high,
+  low,
+  open,
+  close,
+  variant = 'default',
+  upColor,
+  downColor,
+  color,
+  bodyWidth = 0.6,
+  strokeWidth = 1.5,
+  radius = 2
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale
+  } = useChart();
+  if (!isBandScale(xScale)) {
+    return null;
+  }
+  const bw = xScale.bandwidth();
+  return /*#__PURE__*/_jsx("g", {
+    children: data.map((d, i) => {
+      const xVal = xScale(String(d[xKey]));
+      if (xVal == null) {
+        return null;
+      }
+      const hVal = typeof d[high] === 'number' ? d[high] : 0;
+      const lVal = typeof d[low] === 'number' ? d[low] : 0;
+      const oVal = typeof d[open] === 'number' ? d[open] : 0;
+      const cVal = typeof d[close] === 'number' ? d[close] : 0;
+      const isUp = cVal >= oVal;
+      const fill = color ?? (isUp ? upColor ?? 'var(--color-data-categorical-green)' : downColor ?? 'var(--color-data-categorical-red)');
+      const centerX = xVal + bw / 2;
+      const yHigh = yScale(hVal);
+      const yLow = yScale(lVal);
+      const yOpen = yScale(oVal);
+      const yClose = yScale(cVal);
+      const bodyTop = Math.min(yOpen, yClose);
+      const bodyBot = Math.max(yOpen, yClose);
+      if (variant === 'bar') {
+        // OHLC bar: vertical line (high→low), left tick at open, right tick at close
+        const tickLen = bw * bodyWidth * 0.4;
+        return /*#__PURE__*/_jsxs("g", {
+          children: [/*#__PURE__*/_jsx("line", {
+            x1: centerX,
+            x2: centerX,
+            y1: yHigh,
+            y2: yLow,
+            stroke: fill,
+            strokeWidth: strokeWidth
+          }), /*#__PURE__*/_jsx("line", {
+            x1: centerX - tickLen,
+            x2: centerX,
+            y1: yOpen,
+            y2: yOpen,
+            stroke: fill,
+            strokeWidth: strokeWidth
+          }), /*#__PURE__*/_jsx("line", {
+            x1: centerX,
+            x2: centerX + tickLen,
+            y1: yClose,
+            y2: yClose,
+            stroke: fill,
+            strokeWidth: strokeWidth
+          })]
+        }, i);
+      }
+
+      // Default variant: filled body with whiskers
+      const bodyW = bw * bodyWidth;
+      const bodyX = centerX - bodyW / 2;
+      const bodyH = Math.max(1, bodyBot - bodyTop);
+      return /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("line", {
+          x1: centerX,
+          x2: centerX,
+          y1: yHigh,
+          y2: bodyTop,
+          stroke: fill,
+          strokeWidth: strokeWidth
+        }), /*#__PURE__*/_jsx("line", {
+          x1: centerX,
+          x2: centerX,
+          y1: bodyBot,
+          y2: yLow,
+          stroke: fill,
+          strokeWidth: strokeWidth
+        }), /*#__PURE__*/_jsx("rect", {
+          x: bodyX,
+          y: bodyTop,
+          width: bodyW,
+          height: bodyH,
+          fill: fill,
+          rx: radius,
+          ry: radius
+        })]
+      }, i);
+    })
+  });
+}

package/dist/Chart/ChartContext.d.ts

@@ -0,0 +1,5 @@
+import type { ChartContext } from './types';
+export declare const ChartProvider: import("react").Provider<ChartContext | null>;
+/** Access the chart context. Throws if used outside <Chart>. */
+export declare function useChart(): ChartContext;
+//# sourceMappingURL=ChartContext.d.ts.map

package/dist/Chart/ChartContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContext.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartContext.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,aAAa,+CAAoB,CAAC;AAE/C,gEAAgE;AAChE,wBAAgB,QAAQ,IAAI,YAAY,CAMvC"}