@astryxdesign/lab 0.1.4-canary.39ffd21 → 0.1.4-canary.3d64ef2

package/src/Schedule/Schedule.tsx

@@ -56,6 +56,8 @@ export interface ScheduleProps<
   timezoneID?: string;
   /** Header/rendering plugins. Defaults to pagination controls. */
   plugins?: ReadonlyArray<SchedulePlugin>;
+  /** Heading level for sub-headings (day labels, weekday headers) within the schedule. @default 3 */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
 
 interface EventRecord {
@@ -158,6 +160,7 @@ function ScheduleViewContent<Options extends ScheduleViewOptions>({
   onNextDate,
   nextDateLabel,
   plugins,
+  headingLevel,
 }: {
   view: ScheduleView<Options>;
   eventSource: ScheduleEventSource;
@@ -171,6 +174,7 @@ function ScheduleViewContent<Options extends ScheduleViewOptions>({
   onNextDate: () => void;
   nextDateLabel: string;
   plugins: ReadonlyArray<SchedulePlugin>;
+  headingLevel: 2 | 3 | 4 | 5 | 6;
 }) {
   const Component = view.component;
   const range = getRange(view, date);
@@ -195,6 +199,7 @@ function ScheduleViewContent<Options extends ScheduleViewOptions>({
         nextDateLabel,
         view,
         plugins,
+        headingLevel,
       }}>
       <Component options={view.options} />
     </ScheduleContext.Provider>
@@ -210,6 +215,7 @@ export function Schedule({
   onChangeDate,
   timezoneID: timezoneIDProp,
   plugins = defaultSchedulePlugins,
+  headingLevel = 3,
   xstyle,
   className,
   style,
@@ -285,6 +291,7 @@ export function Schedule({
             onNextDate={onNextDate}
             nextDateLabel={nextDateRange.label}
             plugins={plugins}
+            headingLevel={headingLevel}
           />
         }>
         <ScheduleViewContent
@@ -300,6 +307,7 @@ export function Schedule({
           onNextDate={onNextDate}
           nextDateLabel={nextDateRange.label}
           plugins={plugins}
+          headingLevel={headingLevel}
         />
       </Suspense>
     </div>

package/src/Schedule/TimeGridView.tsx

@@ -65,7 +65,7 @@ export function TimeGridView({
   maxHour: number;
   hourHeight: number;
 }) {
-  const {categories} = useScheduleContext();
+  const {categories, headingLevel} = useScheduleContext();
   const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
   const normalizedMaxHour = Math.max(
     normalizedMinHour + 1,
@@ -114,7 +114,7 @@ export function TimeGridView({
                 index === days.length - 1 && styles.timeGridHeaderCellLast,
               )}>
               <Heading
-                level={4}
+                level={headingLevel}
                 color="secondary"
                 display="block"
                 xstyle={styles.timeGridHeaderHeading}>

package/src/Schedule/context.tsx

@@ -34,6 +34,8 @@ export interface ScheduleContextValue {
   nextDateLabel: string;
   view: ScheduleViewBase;
   plugins: ReadonlyArray<SchedulePlugin>;
+  /** Heading level used for sub-headings within the schedule (day labels, weekday headers). */
+  headingLevel: 2 | 3 | 4 | 5 | 6;
 }
 
 export const ScheduleContext = createContext<ScheduleContextValue | null>(

package/src/index.ts

@@ -22,6 +22,9 @@ export {
   type SyntaxToken,
 } from '@astryxdesign/core/CodeBlock';
 
+// InfoTip — accessible info-icon help affordance (RFC facebook/astryx#3349)
+export {InfoTip, type InfoTipProps, type InfoTipSize} from './InfoTip';
+
 // Chat — experimental reasoning display
 export {
   ChatReasoning,
@@ -200,51 +203,7 @@ export {
   type SankeyContext,
 } from './Sankey';
 
-// Chart v2 — config model
-export {
-  Chart as ChartV2,
-  type ChartProps as ChartV2Props,
-  ChartLegend as ChartV2Legend,
-  type ChartLegendProps as ChartV2LegendProps,
-  type LegendItem as ChartV2LegendItem,
-  ChartAxis as ChartV2Axis,
-  type ChartAxisProps as ChartV2AxisProps,
-  ChartGrid as ChartV2Grid,
-  type ChartGridProps as ChartV2GridProps,
-  ChartSwatch as ChartV2Swatch,
-  swatchVariantForType as xdsChartV2SwatchVariantForType,
-  type ChartSwatchProps as ChartV2SwatchProps,
-  type ChartSwatchVariant as ChartV2SwatchVariant,
-  ChartTooltip as ChartV2Tooltip,
-  type ChartTooltipProps as ChartV2TooltipProps,
-  type ChartTooltipPlacement as ChartV2TooltipPlacement,
-  type TooltipSeriesValue as ChartV2TooltipSeriesValue,
-  bar,
-  line,
-  dot,
-  area,
-  band,
-  candlestick,
-  errorBar,
-  referenceLine,
-  dotGL,
-  dotGLInteractive,
-  heatmapGL,
-  streamGL,
-  useChartV2,
-  type SeriesDef,
-  type ChartV2Context,
-  type ChartPointerEvent,
-  type ResolvedPoint,
-  type ResolvedPositions,
-  type SeriesContext,
-  type ErrorBarOptions,
-  type ReferenceLineOptions,
-  type DotGLOptions,
-  type DotGLInteractiveOptions,
-  type HeatmapGLOptions,
-  type StreamGLOptions,
-  type StreamGLHandle,
-} from './ChartV2';
+// Chart v2 (config model) moved to its own package: @astryxdesign/charts.
+// It is no longer re-exported from @astryxdesign/lab.
 export * from './Stepper';
 export * from './CircularProgress';

package/dist/ChartV2/Chart.d.ts

@@ -1,32 +0,0 @@
-/**
- * @file Chart.tsx (v2)
- * @output Root chart — coordinates layout, rendering, and events
- * @position Top-level; delegates everything to series configs and interaction slots
- *
- * The chart root has ZERO knowledge of mark types. It:
- *   1. Runs the layout engine (scales + stacking + grouping)
- *   2. Calls each series' resolve() and render() methods
- *   3. Provides a single event layer for interaction children
- */
-import { type ReactNode } from 'react';
-import type { SeriesDef } from './types';
-import type { ChartMargin } from './types';
-import { type ChartLegendProps } from './ChartLegend';
-import { type ChartTooltipProps } from './ChartTooltip';
-export interface ChartProps {
-    data: Record<string, unknown>[];
-    xKey: string;
-    series: SeriesDef[];
-    height?: number;
-    margin?: Partial<ChartMargin>;
-    grid?: ReactNode;
-    axes?: ReactNode;
-    legend?: boolean | ChartLegendProps;
-    tooltip?: boolean | Omit<ChartTooltipProps, 'series'>;
-    interactions?: ReactNode;
-    children?: ReactNode;
-    title?: string;
-    subtitle?: string;
-}
-export declare function Chart({ data, xKey, series, height, margin: marginOverride, grid, axes, legend, tooltip, interactions, children, title, subtitle, }: ChartProps): import("react").JSX.Element;
-//# sourceMappingURL=Chart.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/ChartV2/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAiB,WAAW,EAAoB,MAAM,SAAS,CAAC;AAO5E,OAAO,EAAc,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkBD,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA2QZ"}

package/dist/ChartV2/Chart.js

@@ -1,281 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Chart.tsx (v2)
- * @output Root chart — coordinates layout, rendering, and events
- * @position Top-level; delegates everything to series configs and interaction slots
- *
- * The chart root has ZERO knowledge of mark types. It:
- *   1. Runs the layout engine (scales + stacking + grouping)
- *   2. Calls each series' resolve() and render() methods
- *   3. Provides a single event layer for interaction children
- */
-
-import { useId, useMemo, useRef, useState, useCallback, useLayoutEffect } from 'react';
-import { computeLayout } from "./layout.js";
-import { ChartV2Provider } from "./ChartV2Context.js";
-import { ChartProvider } from "../Chart/ChartContext.js";
-import { Text } from '@astryxdesign/core';
-import { VStack, HStack } from '@astryxdesign/core';
-import * as stylex from '@stylexjs/stylex';
-import { ChartLegend } from "./ChartLegend.js";
-import { deriveLegendItems } from "./legend.js";
-import { ChartTooltip } from "./ChartTooltip.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_MARGIN = {
-  top: 24,
-  right: 24,
-  bottom: 32,
-  left: 48
-};
-export function Chart({
-  data,
-  xKey,
-  series,
-  height = 300,
-  margin: marginOverride,
-  grid,
-  axes,
-  legend,
-  tooltip,
-  interactions,
-  children,
-  title,
-  subtitle
-}) {
-  const chartId = useId();
-  const descId = `${chartId}-desc`;
-  const containerRef = useRef(null);
-  const svgRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const pointerHandlers = useRef(new Set());
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
-    const observer = new ResizeObserver(entries => {
-      const entry = entries[0];
-      if (entry) {
-        setContainerWidth(entry.contentRect.width);
-      }
-    });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, []);
-  const margin = useMemo(() => ({
-    ...DEFAULT_MARGIN,
-    ...marginOverride
-  }), [marginOverride]);
-  const innerWidth = Math.max(0, containerWidth - margin.left - margin.right);
-  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
-
-  // ─── Layout pass ──────────────────────────────────────────────────────
-  const layout = useMemo(() => computeLayout({
-    data,
-    xKey,
-    series,
-    width: innerWidth,
-    height: innerHeight
-  }), [data, xKey, series, innerWidth, innerHeight]);
-  const seriesCtx = useMemo(() => ({
-    data,
-    xKey,
-    xScale: layout.xScale,
-    yScale: layout.yScale,
-    width: innerWidth,
-    height: innerHeight
-  }), [data, xKey, layout, innerWidth, innerHeight]);
-
-  // ─── Event dispatch ───────────────────────────────────────────────────
-  const onPointer = useCallback(handler => {
-    pointerHandlers.current.add(handler);
-    return () => {
-      pointerHandlers.current.delete(handler);
-    };
-  }, []);
-  const dispatch = useCallback(e => {
-    for (const handler of pointerHandlers.current) {
-      handler(e);
-    }
-  }, []);
-  const handlePointerMove = useCallback(e => {
-    const svg = svgRef.current;
-    if (!svg) {
-      return;
-    }
-    const point = svg.createSVGPoint();
-    point.x = e.clientX;
-    point.y = e.clientY;
-    const ctm = e.currentTarget.getScreenCTM()?.inverse();
-    if (!ctm) {
-      return;
-    }
-    const cursor = point.matrixTransform(ctm);
-
-    // Find nearest point by x-distance only (full vertical column is the hover zone)
-    let nearest = null;
-    let bestXDist = Infinity;
-    for (const [seriesKey, points] of layout.resolved) {
-      for (const p of points) {
-        const xDist = Math.abs(p.px - cursor.x);
-        if (xDist < bestXDist) {
-          bestXDist = xDist;
-          nearest = {
-            ...p,
-            seriesKey
-          };
-        }
-      }
-    }
-    dispatch({
-      x: cursor.x,
-      y: cursor.y,
-      nearest,
-      active: e.buttons > 0
-    });
-  }, [layout.resolved, dispatch]);
-  const handlePointerLeave = useCallback(() => {
-    dispatch({
-      x: -1,
-      y: -1,
-      nearest: null,
-      active: false
-    });
-  }, [dispatch]);
-
-  // ─── Context for interactions + v1 chrome ─────────────────────────────
-  const ctx = useMemo(() => ({
-    width: innerWidth,
-    height: innerHeight,
-    margin,
-    data,
-    xKey,
-    xScale: layout.xScale,
-    yScale: layout.yScale,
-    resolved: layout.resolved,
-    onPointer,
-    svgRef
-  }), [innerWidth, innerHeight, margin, data, xKey, layout, onPointer]);
-
-  // Bridge v1 context for ChartGrid/Axis compatibility
-  const v1Ctx = useMemo(() => ({
-    width: innerWidth,
-    height: innerHeight,
-    margin,
-    xKey,
-    data,
-    xScale: layout.xScale,
-    yScale: layout.yScale,
-    svgRef,
-    pointerToData: () => ({
-      x: null,
-      y: 0,
-      px: 0,
-      py: 0
-    }),
-    pixelToData: (px, py) => ({
-      x: null,
-      y: 0,
-      px,
-      py
-    })
-  }), [innerWidth, innerHeight, margin, xKey, data, layout, svgRef]);
-
-  // ─── Legend ────────────────────────────────────────────────────────────
-  const legendConfig = legend === true ? {} : legend || null;
-  const legendElement = legendConfig ? /*#__PURE__*/_jsx(ChartLegend, {
-    items: legendConfig.items ?? deriveLegendItems(series),
-    position: legendConfig.position,
-    alignment: legendConfig.alignment
-  }) : null;
-  const legendPosition = legendConfig?.position ?? 'bottom';
-  const isLegendHorizontal = legendPosition === 'start' || legendPosition === 'end';
-
-  // ─── Render ───────────────────────────────────────────────────────────
-  if (containerWidth === 0) {
-    return /*#__PURE__*/_jsx("div", {
-      ref: containerRef,
-      ...{
-        className: "xh8yej3"
-      },
-      style: {
-        height
-      }
-    });
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
-    ...{
-      className: "xh8yej3"
-    },
-    children: [(title || subtitle) && /*#__PURE__*/_jsxs("div", {
-      ...{
-        className: "x1yztbdb"
-      },
-      children: [title && /*#__PURE__*/_jsx(Text, {
-        type: "body",
-        weight: "semibold",
-        display: "block",
-        children: title
-      }), subtitle && /*#__PURE__*/_jsx(Text, {
-        type: "supporting",
-        display: "block",
-        children: subtitle
-      })]
-    }), /*#__PURE__*/_jsx(ChartV2Provider, {
-      value: ctx,
-      children: /*#__PURE__*/_jsx(ChartProvider, {
-        value: v1Ctx,
-        children: legendConfig == null ? renderSvg() : isLegendHorizontal ? /*#__PURE__*/_jsxs(HStack, {
-          gap: 4,
-          children: [legendPosition === 'start' && legendElement, /*#__PURE__*/_jsx("div", {
-            ...{
-              className: "x98rzlu xeuugli xb3r6kr"
-            },
-            children: renderSvg()
-          }), legendPosition === 'end' && legendElement]
-        }) : /*#__PURE__*/_jsxs(VStack, {
-          gap: 4,
-          children: [legendPosition === 'top' && legendElement, renderSvg(), legendPosition === 'bottom' && legendElement]
-        })
-      })
-    })]
-  });
-  function renderSvg() {
-    return /*#__PURE__*/_jsxs("svg", {
-      ref: svgRef,
-      width: "100%",
-      height: height,
-      "aria-label": title ?? undefined,
-      "aria-describedby": subtitle ? descId : undefined,
-      children: [title && /*#__PURE__*/_jsx("title", {
-        children: title
-      }), subtitle && /*#__PURE__*/_jsx("desc", {
-        id: descId,
-        children: subtitle
-      }), /*#__PURE__*/_jsxs("g", {
-        transform: `translate(${margin.left},${margin.top})`,
-        children: [grid, series.map(s => {
-          const resolved = layout.resolved.get(s.key);
-          if (!resolved) {
-            return null;
-          }
-          return /*#__PURE__*/_jsx("g", {
-            children: s.render(resolved, seriesCtx)
-          }, s.key);
-        }), axes, /*#__PURE__*/_jsx("rect", {
-          x: 0,
-          y: 0,
-          width: innerWidth,
-          height: innerHeight,
-          fill: "transparent",
-          onPointerMove: handlePointerMove,
-          onPointerLeave: handlePointerLeave
-        }), interactions, tooltip && /*#__PURE__*/_jsx(ChartTooltip, {
-          series: series,
-          ...(tooltip === true ? {} : tooltip)
-        }), children]
-      })]
-    });
-  }
-}

package/dist/ChartV2/ChartAxis.d.ts

@@ -1,36 +0,0 @@
-export interface ChartAxisProps {
-    /** Which edge to render the axis on */
-    position: 'top' | 'right' | 'bottom' | 'left';
-    /** Number of ticks (approximate — d3 decides final count) */
-    tickCount?: number;
-    /** Maximum number of tick labels to show. Labels are evenly skipped when exceeded. */
-    maxTicks?: number;
-    /** Custom tick formatter */
-    tickFormat?: (value: unknown) => string;
-    /** Truncate labels to this many characters (appends "\u2026"). */
-    truncate?: number;
-    /** Enable smooth transitions for streaming (default: true) */
-    animated?: boolean;
-    /**
-     * Show the axis edge line. Defaults to `true` for `position="bottom"`,
-     * `false` otherwise. Forced to `true` when `showTicks` is enabled.
-     * Pair with `<ChartGrid vertical />` and pass `showAxisLine` on the
-     * corresponding side axis to keep the visual edge grounded.
-     */
-    showAxisLine?: boolean;
-    /** Show perpendicular tick marks at each tick label. Default: `false`. */
-    showTicks?: boolean;
-}
-/**
- * Chart axis. Always draws tick labels; the axis edge line and tick marks
- * are independently toggleable. Pair with `<ChartGrid>` for grid lines.
- *
- * @example
- * ```
- * <ChartAxis position="bottom" />               // edge line + labels
- * <ChartAxis position="left" />                 // labels only (no edge line)
- * <ChartAxis position="left" showAxisLine showTicks />
- * ```
- */
-export declare function ChartAxis({ position, tickCount, maxTicks, tickFormat, truncate, animated, showAxisLine, showTicks, }: ChartAxisProps): import("react").JSX.Element;
-//# sourceMappingURL=ChartAxis.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ChartAxis.d.ts","sourceRoot":"","sources":["../../src/ChartV2/ChartAxis.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;IACxC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAeD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAa,EACb,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAe,EACf,YAAoC,EACpC,SAAiB,GAClB,EAAE,cAAc,+BAiIhB"}

package/dist/ChartV2/ChartAxis.js

@@ -1,161 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ChartAxis.tsx (v2)
- * @output Renders an axis (top, right, bottom, left) using the chart's scales
- * @position Child of Chart v2; reads scales from chart context
- *
- * The axis edge line and tick marks are independently toggleable so callers
- * can compose: line-only, line + ticks, or line + ticks + grid (paired with
- * `<ChartGrid>`). To stay consistent with most charts, the bottom axis
- * draws its edge line by default and other positions don't.
- *
- * Ticks use CSS transitions for smooth sliding during streaming updates.
- */
-
-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";
-const TICK_SIZE = 6;
-
-/**
- * Chart axis. Always draws tick labels; the axis edge line and tick marks
- * are independently toggleable. Pair with `<ChartGrid>` for grid lines.
- *
- * @example
- * ```
- * <ChartAxis position="bottom" />               // edge line + labels
- * <ChartAxis position="left" />                 // labels only (no edge line)
- * <ChartAxis position="left" showAxisLine showTicks />
- * ```
- */
-export function ChartAxis({
-  position,
-  tickCount = 5,
-  maxTicks,
-  tickFormat,
-  truncate,
-  animated = true,
-  showAxisLine = position === 'bottom',
-  showTicks = false
-}) {
-  // Tick marks need an axis line to anchor against; force it on when ticks
-  // are enabled so the two visuals stay coherent.
-  const renderAxisLine = showAxisLine || showTicks;
-  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 (so the axis line still represents zero, not the chart edge).
-  const axisLineY = (() => {
-    if (position !== 'bottom') {
-      return 0;
-    }
-    const domain = yScale.domain();
-    if (domain[0] < 0 && domain[1] > 0) {
-      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 tickTransition = animated ? 'transform 150ms linear, opacity 150ms ease' : undefined;
-  return /*#__PURE__*/_jsxs("g", {
-    transform: transform,
-    children: [renderAxisLine && /*#__PURE__*/_jsx("line", {
-      x1: 0,
-      x2: isHorizontal ? width : 0,
-      y1: isHorizontal ? axisLineY : 0,
-      y2: isHorizontal ? axisLineY : height,
-      ...{
-        className: "x1lo1t26 xnpr05h"
-      }
-    }), ticks.map(({
-      value,
-      offset
-    }) => {
-      const label = format(value);
-      const isVisible = isHorizontal ? offset >= -10 && offset <= width + 10 : offset >= -10 && offset <= height + 10;
-      if (isHorizontal) {
-        const y = position === 'bottom' ? TICK_SIZE : -TICK_SIZE;
-        return /*#__PURE__*/_jsxs("g", {
-          style: {
-            transform: `translateX(${offset}px)`,
-            transition: tickTransition,
-            opacity: isVisible ? 1 : 0
-          },
-          children: [showTicks && /*#__PURE__*/_jsx("line", {
-            y2: y,
-            ...{
-              className: "x1lo1t26 xnpr05h"
-            }
-          }), /*#__PURE__*/_jsx("text", {
-            y: position === 'bottom' ? TICK_SIZE + 12 : -(TICK_SIZE + 4),
-            textAnchor: "middle",
-            fill: "var(--color-text-secondary)",
-            fontSize: 12,
-            children: label
-          })]
-        }, label);
-      }
-      // Vertical axis
-      const x = position === 'left' ? -TICK_SIZE : TICK_SIZE;
-      return /*#__PURE__*/_jsxs("g", {
-        style: {
-          transform: `translateY(${offset}px)`,
-          transition: tickTransition,
-          opacity: isVisible ? 1 : 0
-        },
-        children: [showTicks && /*#__PURE__*/_jsx("line", {
-          x2: x,
-          ...{
-            className: "x1lo1t26 xnpr05h"
-          }
-        }), /*#__PURE__*/_jsx("text", {
-          x: position === 'left' ? -(TICK_SIZE + 4) : TICK_SIZE + 4,
-          dy: "0.32em",
-          textAnchor: position === 'left' ? 'end' : 'start',
-          fill: "var(--color-text-secondary)",
-          fontSize: 12,
-          children: label
-        })]
-      }, label);
-    })]
-  });
-}

package/dist/ChartV2/ChartGrid.d.ts

@@ -1,20 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}