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

package/dist/ChartV2/ChartGrid.d.ts

@@ -0,0 +1,20 @@
+export interface ChartGridProps {
+    /** Show horizontal grid lines. Default: `true`. */
+    horizontal?: boolean;
+    /** Show vertical grid lines. Default: `false`. */
+    vertical?: boolean;
+}
+/**
+ * Grid lines behind chart marks.
+ *
+ * Pair with `<ChartAxis>` so users always see an axis line beside the
+ * grid — the components are designed to be used together.
+ *
+ * @example
+ * ```
+ * <ChartGrid />                 // horizontal grid lines (default)
+ * <ChartGrid horizontal vertical />
+ * ```
+ */
+export declare function ChartGrid({ horizontal, vertical, }: ChartGridProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartGrid.d.ts","sourceRoot":"","sources":["../../src/ChartV2/ChartGrid.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,UAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,+BAsDhB"}

package/dist/ChartV2/ChartGrid.js

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartGrid.tsx (v2)
+ * @output Grid lines behind chart marks
+ * @position Child of Chart v2; reads scales from chart context
+ */
+
+import { useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { useChart } from "../Chart/ChartContext.js";
+import { isBandScale } from "../Chart/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Grid lines behind chart marks.
+ *
+ * Pair with `<ChartAxis>` so users always see an axis line beside the
+ * grid — the components are designed to be used together.
+ *
+ * @example
+ * ```
+ * <ChartGrid />                 // horizontal grid lines (default)
+ * <ChartGrid horizontal vertical />
+ * ```
+ */
+export function ChartGrid({
+  horizontal = true,
+  vertical = false
+}) {
+  const {
+    width,
+    height,
+    xScale,
+    yScale
+  } = useChart();
+
+  // Skip the y=0 line when emphasizing it via the axis. Without this we'd
+  // double-draw on top of the axis line.
+  const hLines = useMemo(() => {
+    if (!horizontal) {
+      return [];
+    }
+    return yScale.ticks(5).filter(tick => tick !== 0).map(tick => yScale(tick));
+  }, [horizontal, yScale]);
+  const vLines = useMemo(() => {
+    if (!vertical) {
+      return [];
+    }
+    if (isBandScale(xScale)) {
+      return xScale.domain().map(d => (xScale(d) ?? 0) + xScale.bandwidth() / 2);
+    }
+    const linear = xScale;
+    return linear.ticks(5).map(d => linear(d));
+  }, [vertical, xScale]);
+  return /*#__PURE__*/_jsxs("g", {
+    children: [hLines.map(y => /*#__PURE__*/_jsx("line", {
+      x1: 0,
+      x2: width,
+      y1: y,
+      y2: y,
+      ...{
+        className: "x113i6qz xnpr05h"
+      }
+    }, `h-${y}`)), vLines.map(x => /*#__PURE__*/_jsx("line", {
+      x1: x,
+      x2: x,
+      y1: 0,
+      y2: height,
+      ...{
+        className: "x113i6qz xnpr05h"
+      }
+    }, `v-${x}`))]
+  });
+}

package/dist/ChartV2/ChartLegend.d.ts

@@ -0,0 +1,14 @@
+import type { LegendItem } from './legend';
+export type { LegendItem };
+export type LegendPosition = 'top' | 'bottom' | 'start' | 'end';
+export type LegendAlignment = 'start' | 'center' | 'end';
+export interface ChartLegendProps {
+    /** Legend items to display */
+    items?: LegendItem[];
+    /** Position of the legend relative to the chart. Default: 'bottom' */
+    position?: LegendPosition;
+    /** Alignment of the legend within its position. Default: 'start' */
+    alignment?: LegendAlignment;
+}
+export declare function ChartLegend({ items, position, alignment, }: ChartLegendProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartLegend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../src/ChartV2/ChartLegend.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEzC,YAAY,EAAC,UAAU,EAAC,CAAC;AAEzB,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEzD,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,oEAAoE;IACpE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,QAAmB,EACnB,SAAmB,GACpB,EAAE,gBAAgB,sCA8BlB"}

package/dist/ChartV2/ChartLegend.js

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartLegend.tsx
+ * @output Standalone chart legend component
+ * @position Can be used inside Chart via the `legend` prop, or independently
+ *
+ * @example
+ * // Via Chart
+ * <Chart legend={{position: 'top', alignment: 'start'}} ... />
+ *
+ * // Standalone
+ * <ChartLegend items={[{label: 'Revenue', color: '#3b82f6'}]} />
+ */
+
+import { Text } from '@astryxdesign/core';
+import { VStack, HStack } from '@astryxdesign/core';
+import { ChartSwatch, swatchVariantForType } from "./ChartSwatch.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChartLegend({
+  items = [],
+  position = 'bottom',
+  alignment = 'start'
+}) {
+  if (items.length === 0) {
+    return null;
+  }
+  const isVertical = position === 'start' || position === 'end';
+  const legendItems = items.map(item => /*#__PURE__*/_jsxs(HStack, {
+    gap: 2,
+    vAlign: "center",
+    children: [/*#__PURE__*/_jsx(ChartSwatch, {
+      color: item.color,
+      variant: swatchVariantForType(item.type)
+    }), /*#__PURE__*/_jsx(Text, {
+      type: "supporting",
+      children: item.label
+    })]
+  }, item.label));
+  if (isVertical) {
+    return /*#__PURE__*/_jsx(VStack, {
+      gap: 2,
+      hAlign: alignment,
+      children: legendItems
+    });
+  }
+  return /*#__PURE__*/_jsx(HStack, {
+    gap: 4,
+    justify: alignment,
+    vAlign: "center",
+    wrap: "wrap",
+    children: legendItems
+  });
+}

package/dist/ChartV2/ChartSwatch.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Visual variant — drives shape.
+ * - `'square'` — square chip (bar series)
+ * - `'line'` — short stroke (line, dot, area, and other non-bar series)
+ */
+export type ChartSwatchVariant = 'square' | 'line';
+export interface ChartSwatchProps {
+    /** Fill color — typically a series color token */
+    color: string;
+    /** Visual variant. Default: `'square'`. */
+    variant?: ChartSwatchVariant;
+}
+/**
+ * Color swatch primitive.
+ *
+ * Used by ChartLegend (and ChartTooltip) to render the colored
+ * indicator next to a series label. Exported as a primitive so consumers
+ * can build their own custom legend/tooltip layouts while keeping visuals
+ * consistent.
+ */
+declare function ChartSwatchImpl({ color, variant }: ChartSwatchProps): import("react").JSX.Element;
+/**
+ * Memoized — swatches are static for a given (color, variant) tuple
+ * and can render many times in a tooltip/legend with several series.
+ */
+export declare const ChartSwatch: import("react").MemoExoticComponent<typeof ChartSwatchImpl>;
+/**
+ * Map a SeriesDef.type string to its swatch variant.
+ *
+ * Bar series get a square chip; everything else (line, dot, area, and any
+ * other non-bar mark) gets a short stroke. Centralized so legend, tooltip,
+ * and any custom chrome stay consistent.
+ */
+export declare function swatchVariantForType(type: string | undefined): ChartSwatchVariant;
+export {};
+//# sourceMappingURL=ChartSwatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSwatch.d.ts","sourceRoot":"","sources":["../../src/ChartV2/ChartSwatch.tsx"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAmBD;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EAAC,KAAK,EAAE,OAAkB,EAAC,EAAE,gBAAgB,+BAQrE;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,6DAAwB,CAAC;AAEjD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,kBAAkB,CAEpB"}

package/dist/ChartV2/ChartSwatch.js

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartSwatch.tsx
+ * @output Color swatch primitive for legends, tooltips, and standalone use
+ * @position Composable primitive — used by ChartLegend (and future
+ *           ChartTooltip), or independently anywhere a series indicator
+ *           is needed.
+ *
+ * @example
+ * ```
+ * <ChartSwatch color="#3b82f6" variant="square" />
+ * <ChartSwatch color="#f59e0b" variant="line" />
+ * ```
+ */
+
+import { memo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Visual variant — drives shape.
+ * - `'square'` — square chip (bar series)
+ * - `'line'` — short stroke (line, dot, area, and other non-bar series)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  square: {
+    kzqmXN: "x1xc55vz",
+    kZKoxP: "xdk7pt",
+    kaIpWk: "x1cum3z5",
+    kUOVxO: "xckhbgb",
+    $$css: true
+  },
+  line: {
+    kzqmXN: "x1fsd2vl",
+    kZKoxP: "xuoj239",
+    kaIpWk: "xbvija",
+    $$css: true
+  }
+};
+
+/**
+ * Color swatch primitive.
+ *
+ * Used by ChartLegend (and ChartTooltip) to render the colored
+ * indicator next to a series label. Exported as a primitive so consumers
+ * can build their own custom legend/tooltip layouts while keeping visuals
+ * consistent.
+ */
+function ChartSwatchImpl({
+  color,
+  variant = 'square'
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    "aria-hidden": true,
+    ...stylex.props(styles.base, styles[variant]),
+    style: {
+      backgroundColor: color
+    }
+  });
+}
+
+/**
+ * Memoized — swatches are static for a given (color, variant) tuple
+ * and can render many times in a tooltip/legend with several series.
+ */
+export const ChartSwatch = /*#__PURE__*/memo(ChartSwatchImpl);
+
+/**
+ * Map a SeriesDef.type string to its swatch variant.
+ *
+ * Bar series get a square chip; everything else (line, dot, area, and any
+ * other non-bar mark) gets a short stroke. Centralized so legend, tooltip,
+ * and any custom chrome stay consistent.
+ */
+export function swatchVariantForType(type) {
+  return type === 'bar' ? 'square' : 'line';
+}

package/dist/ChartV2/ChartTooltip.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+import { type TooltipSeriesValue } from './tooltip';
+import type { SeriesDef } from './types';
+export type ChartTooltipPlacement = 'auto' | 'right' | 'left' | 'top';
+export interface ChartTooltipProps {
+    /**
+     * Series definitions — used to map the hovered datum to per-series rows.
+     * When rendered via `<Chart tooltip />`, Chart injects this automatically.
+     * When composing directly, pass the same `series` array you gave Chart.
+     */
+    series?: readonly SeriesDef[];
+    /**
+     * Custom render function. Receives the x-value and one row per visible series.
+     * Returning `null` hides the card while still rendering the band highlight + dots.
+     */
+    render?: (xValue: unknown, seriesValues: TooltipSeriesValue[]) => ReactNode;
+    /**
+     * Whether to draw a hover indicator at the focused x-position.
+     * Picks the right shape automatically:
+     * - **band-highlight rect** when the chart includes bar series on a band scale
+     * - **vertical crosshair line** for line / area / dot charts
+     *
+     * Default: `true`.
+     */
+    hoverIndicator?: boolean;
+    /**
+     * Whether to draw a hover dot at each series' point (skipped for bars).
+     * Default: `true`.
+     */
+    showHoverDots?: boolean;
+    /**
+     * Card placement relative to the hovered point:
+     * - `'auto'` (default): right of the point, flips to left if it would overflow
+     * - `'right'` / `'left'` / `'top'`: pinned position
+     */
+    placement?: ChartTooltipPlacement;
+}
+/**
+ * Composable grouped tooltip for Chart.
+ *
+ * Subscribes to the chart's pointer event stream and only re-renders when the
+ * hovered data index changes (not on every pointer move). Card position is
+ * updated imperatively via a ref to keep pointer-move cost ~free.
+ */
+export declare function ChartTooltip({ series, render, hoverIndicator, showHoverDots, placement, }: ChartTooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../src/ChartV2/ChartTooltip.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAC,SAAS,EAAoB,MAAM,SAAS,CAAC;AAG1D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAEtE,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,KAAK,SAAS,CAAC;IAC5E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AA2DD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAW,EACX,MAAM,EACN,cAAqB,EACrB,aAAoB,EACpB,SAAkB,GACnB,EAAE,iBAAiB,+BA4NnB"}

package/dist/ChartV2/ChartTooltip.js

@@ -0,0 +1,267 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartTooltip.tsx
+ * @output Grouped chart tooltip — shows all series values at the hovered x-position.
+ *         Composable: drop into `<Chart tooltip>` or render directly inside a chart
+ *         to take full control of props.
+ * @position Reads from ChartV2Context — must render inside an <Chart>.
+ *
+ * @example
+ * ```
+ * // Default — declarative on Chart
+ * <Chart tooltip />
+ *
+ * // Custom render function via Chart prop
+ * <Chart tooltip={{render: (x, rows) => <MyCard x={x} rows={rows} />}} />
+ *
+ * // Composable — drop into the chart's children for full control
+ * <Chart>
+ *   <ChartTooltip hoverIndicator={false} placement="top" />
+ * </Chart>
+ * ```
+ */
+
+'use client';
+
+import { memo, useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, radiusVars, shadowVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { Text } from '@astryxdesign/core';
+import { VStack, HStack } from '@astryxdesign/core';
+import { useChartV2 } from "./ChartV2Context.js";
+import { ChartSwatch, swatchVariantForType } from "./ChartSwatch.js";
+import { deriveTooltipSeriesValues, shouldRenderHoverDot } from "./tooltip.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Default tooltip body — used when `render` is not provided. */
+const DefaultTooltipContent = /*#__PURE__*/memo(function DefaultTooltipContent({
+  xValue,
+  rows
+}) {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      type: "body",
+      weight: "semibold",
+      children: String(xValue)
+    }), rows.length === 1 ? /*#__PURE__*/_jsx(Text, {
+      type: "supporting",
+      children: String(rows[0].value)
+    }) : /*#__PURE__*/_jsx(VStack, {
+      gap: 1,
+      children: rows.map(row => /*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        vAlign: "center",
+        children: [/*#__PURE__*/_jsx(ChartSwatch, {
+          color: row.color,
+          variant: swatchVariantForType(row.type)
+        }), /*#__PURE__*/_jsx(Text, {
+          type: "supporting",
+          children: row.label
+        }), /*#__PURE__*/_jsx(Text, {
+          type: "supporting",
+          weight: "semibold",
+          children: String(row.value)
+        })]
+      }, row.key))
+    })]
+  });
+});
+
+/**
+ * Composable grouped tooltip for Chart.
+ *
+ * Subscribes to the chart's pointer event stream and only re-renders when the
+ * hovered data index changes (not on every pointer move). Card position is
+ * updated imperatively via a ref to keep pointer-move cost ~free.
+ */
+export function ChartTooltip({
+  series = [],
+  render,
+  hoverIndicator = true,
+  showHoverDots = true,
+  placement = 'auto'
+}) {
+  const {
+    data,
+    xKey,
+    resolved,
+    onPointer,
+    svgRef,
+    margin,
+    xScale,
+    width,
+    height
+  } = useChartV2();
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const cardRef = useRef(null);
+
+  // Stable Set of resolved series keys — used by deriveTooltipSeriesValues.
+  // Recomputed only when the resolved map identity changes (per layout pass).
+  const resolvedKeys = useMemo(() => new Set(resolved.keys()), [resolved]);
+
+  // ─── Card positioning ──────────────────────────────────────────────────
+  // Imperative — the card is portaled, and we don't want pointer-move to
+  // trigger React renders.
+  const positionCard = useCallback(e => {
+    const card = cardRef.current;
+    const svg = svgRef.current;
+    if (!card) {
+      return;
+    }
+    if (!svg || !e.nearest) {
+      card.style.display = 'none';
+      return;
+    }
+    const svgRect = svg.getBoundingClientRect();
+    const screenX = svgRect.left + margin.left + e.nearest.px;
+    const screenY = svgRect.top + margin.top;
+    const cardWidth = card.offsetWidth;
+    const cardHeight = card.offsetHeight;
+    const viewportWidth = window.innerWidth;
+    const gap = 8;
+    let x;
+    let y = screenY;
+    switch (placement) {
+      case 'left':
+        x = screenX - cardWidth - gap;
+        break;
+      case 'right':
+        x = screenX + gap;
+        break;
+      case 'top':
+        x = screenX - cardWidth / 2;
+        y = screenY - cardHeight - gap;
+        break;
+      case 'auto':
+      default:
+        {
+          const rightX = screenX + gap;
+          x = rightX + cardWidth > viewportWidth ? screenX - cardWidth - gap : rightX;
+        }
+    }
+    card.style.left = `${x}px`;
+    card.style.top = `${y}px`;
+    card.style.display = 'block';
+  }, [svgRef, margin, placement]);
+
+  // ─── Subscribe to pointer events ───────────────────────────────────────
+  useEffect(() => {
+    let currentIndex = null;
+    const unsub = onPointer(e => {
+      const newIndex = e.nearest?.dataIndex ?? null;
+      if (newIndex !== currentIndex) {
+        currentIndex = newIndex;
+        setHoveredIndex(newIndex);
+      }
+      positionCard(e);
+    });
+    return unsub;
+  }, [onPointer, positionCard]);
+
+  // ─── Derived data ──────────────────────────────────────────────────────
+  const datum = hoveredIndex != null ? data[hoveredIndex] : undefined;
+  const xValue = datum?.[xKey];
+  const seriesValues = useMemo(() => deriveTooltipSeriesValues(series, datum, resolvedKeys), [series, datum, resolvedKeys]);
+
+  // Hover dots — read from the resolved map at the hovered index.
+  const dots = useMemo(() => {
+    if (!showHoverDots || hoveredIndex == null) {
+      return null;
+    }
+    const elements = [];
+    for (const s of series) {
+      if (!shouldRenderHoverDot(s.type)) {
+        continue;
+      }
+      const points = resolved.get(s.key);
+      const point = points?.find(p => p.dataIndex === hoveredIndex);
+      if (!point) {
+        continue;
+      }
+      elements.push(/*#__PURE__*/_jsx("circle", {
+        cx: point.px,
+        cy: point.py,
+        r: 4,
+        fill: "var(--color-background-surface)",
+        stroke: s.color ?? 'var(--color-border-emphasized)',
+        strokeWidth: 2,
+        pointerEvents: "none"
+      }, s.key));
+    }
+    return elements;
+  }, [showHoverDots, hoveredIndex, series, resolved]);
+
+  // Hover indicator — band-highlight rect for bar charts, vertical crosshair
+  // line for line/area charts. Same source-of-truth (hoveredIndex), distinct
+  // visual idioms picked automatically based on the series mix.
+  const hoverIndicatorElement = useMemo(() => {
+    if (!hoverIndicator || hoveredIndex == null) {
+      return null;
+    }
+    const xv = data[hoveredIndex]?.[xKey];
+    if (xv == null) {
+      return null;
+    }
+    const isBandScale = 'bandwidth' in xScale;
+    const hasBars = series.some(s => s.type === 'bar');
+
+    // Bar charts on a band scale → soft column highlight.
+    if (hasBars && isBandScale) {
+      const bandScale = xScale;
+      const x = bandScale(String(xv)) ?? 0;
+      const bw = bandScale.bandwidth();
+      const pad = 8;
+      const rectX = Math.max(0, x - pad);
+      const rectRight = Math.min(width, x + bw + pad);
+      const rectWidth = rectRight - rectX;
+      const topPad = Math.min(pad, margin.top);
+      return /*#__PURE__*/_jsx("rect", {
+        x: rectX,
+        y: -topPad,
+        width: rectWidth,
+        height: height + topPad,
+        fill: "currentColor",
+        opacity: 0.06,
+        rx: 4,
+        pointerEvents: "none"
+      });
+    }
+
+    // Line / area / dot charts → vertical crosshair through the point.
+    const px = isBandScale ? (xScale(String(xv)) ?? 0) + xScale.bandwidth() / 2 : xScale(xv);
+    return /*#__PURE__*/_jsx("line", {
+      x1: px,
+      x2: px,
+      y1: 0,
+      y2: height,
+      ...{
+        className: "x1lo1t26 xnpr05h"
+      },
+      pointerEvents: "none"
+    });
+  }, [hoverIndicator, hoveredIndex, series, xScale, data, xKey, width, height, margin.top]);
+
+  // ─── Render ────────────────────────────────────────────────────────────
+  if (typeof document === 'undefined') {
+    // SSR: no DOM portal target; band highlight + dots still render in SVG.
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [hoverIndicatorElement, dots]
+    });
+  }
+  const cardContent = hoveredIndex == null ? null : render ? render(xValue, seriesValues) : /*#__PURE__*/_jsx(DefaultTooltipContent, {
+    xValue: xValue,
+    rows: seriesValues
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [hoverIndicatorElement, dots, /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
+      ref: cardRef,
+      ...{
+        className: "xixxii4 x1prclbq x1hviunn xce4md1 xrrkdod x14hfi27 x47corl xuxw1ft x1q2oy4v x1s85apg"
+      },
+      children: cardContent
+    }), document.body)]
+  });
+}

package/dist/ChartV2/ChartV2Context.d.ts

@@ -0,0 +1,4 @@
+import type { ChartV2Context } from './types';
+export declare const ChartV2Provider: import("react").Provider<ChartV2Context | null>;
+export declare function useChartV2(): ChartV2Context;
+//# sourceMappingURL=ChartV2Context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartV2Context.d.ts","sourceRoot":"","sources":["../../src/ChartV2/ChartV2Context.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAG5C,eAAO,MAAM,eAAe,iDAAe,CAAC;AAE5C,wBAAgB,UAAU,IAAI,cAAc,CAM3C"}

package/dist/ChartV2/ChartV2Context.js

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import { createContext, useContext } from 'react';
+const Ctx = /*#__PURE__*/createContext(null);
+export const ChartV2Provider = Ctx.Provider;
+export function useChartV2() {
+  const ctx = useContext(Ctx);
+  if (!ctx) {
+    throw new Error('Must be used inside <Chart>');
+  }
+  return ctx;
+}

package/dist/ChartV2/index.d.ts

@@ -0,0 +1,13 @@
+export { Chart, type ChartProps } from './Chart';
+export { ChartAxis, type ChartAxisProps } from './ChartAxis';
+export { ChartGrid, type ChartGridProps } from './ChartGrid';
+export { ChartLegend, type ChartLegendProps, type LegendPosition, type LegendAlignment, } from './ChartLegend';
+export { type LegendItem } from './legend';
+export { ChartSwatch, swatchVariantForType, type ChartSwatchProps, type ChartSwatchVariant, } from './ChartSwatch';
+export { ChartTooltip, type ChartTooltipProps, type ChartTooltipPlacement, } from './ChartTooltip';
+export { type TooltipSeriesValue } from './tooltip';
+export { bar, line, dot, area, band, candlestick, errorBar, referenceLine, dotGL, dotGLInteractive, heatmapGL, streamGL, } from './marks';
+export type { BarOptions, LineOptions, DotOptions, AreaOptions, BandOptions, CandlestickOptions, ErrorBarOptions, ReferenceLineOptions, DotGLOptions, DotGLInteractiveOptions, HeatmapGLOptions, StreamGLOptions, StreamGLHandle, } from './marks';
+export { useChartV2 } from './ChartV2Context';
+export type { SeriesDef, ChartV2Context, ChartPointerEvent, ResolvedPoint, ResolvedPositions, SeriesContext, } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ChartV2/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AACzC,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,GAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAC,KAAK,kBAAkB,EAAC,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,GAAG,EACH,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,QAAQ,GACT,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAC5C,YAAY,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,aAAa,GACd,MAAM,SAAS,CAAC"}

package/dist/ChartV2/index.js

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { Chart } from "./Chart.js";
+export { ChartAxis } from "./ChartAxis.js";
+export { ChartGrid } from "./ChartGrid.js";
+export { ChartLegend } from "./ChartLegend.js";
+export { ChartSwatch, swatchVariantForType } from "./ChartSwatch.js";
+export { ChartTooltip } from "./ChartTooltip.js";
+export { bar, line, dot, area, band, candlestick, errorBar, referenceLine, dotGL, dotGLInteractive, heatmapGL, streamGL } from "./marks/index.js";
+export { useChartV2 } from "./ChartV2Context.js";