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

package/CHANGELOG.md

@@ -0,0 +1,67 @@
+# @xds/lab
+
+# 0.1.2
+
+---
+
+# 0.1.1
+
+---
+
+# 0.1.0
+
+---
+
+# 0.0.15
+
+#### Breaking Changes
+
+- **Fully unprefixed** — `@xds/lab` drops the `XDS*` prefix entirely (no compat aliases): import `Stepper`, `Step`, `ChartV2`, `Schedule`, etc. directly. (#2954)
+
+#### New Components
+
+- **Stepper / Step** — Moved here from `@xds/core` for an API rework; visual overhaul with a segmented bar, indicator modes, and density. (#2335, #2308)
+- **Schedule** — New scheduling component. (#2366)
+
+#### New Features
+
+- **ChartV2** — New v2 axis + grid with composable styling, plus tooltip, axis formatters, and tick controls. (#2287, #2189)
+
+#### Fixes
+
+- Adopt `handleRef` for imperative component handles, and rebrand internal SVG ids `xds-` → `astryx-`. (#2363, #2952)
+
+# 0.0.13
+
+#### New Features
+
+- **XDSChart** — Composable d3-based chart components (#1389)
+- **XDSChartColors** — Palette accessor for data visualization (#1388)
+- **XDSSankeyChart** — Ribbon-based flow visualization (#1516)
+- **Advanced charts** — WebGL, streaming, confidence intervals, candlestick (#1397)
+- **Radial charts + 3D charts** + `useXDSChartRange` (#1440)
+- **Chart interactions** — brush, crosshair, zoom, select, highlight, reference lines (#1463)
+- **Chart v2 architecture** — config model with series renderers (#1548, #1730)
+
+#### Fixes
+
+- Chart Tier 1 correctness — xKey in context, bars from zero (#1402)
+- Chart Tier 2 — remove hardcoded colors, document DPR contract (#1424)
+- Rewrite zoom/pan + fix yDomain ratcheting (#1527)
+- Merge Crosshair into Tooltip, use XDS Layer for top-layer rendering (#1514)
+- CodeEditor: perf/theme stories, remove span fallback (#1470)
+- CodeBlock: per-line tokens, skip default color, fix `::highlight` selectors (#1369)
+
+#### Patch Changes
+
+- Updated dependencies
+  - @xds/core@0.0.13
+
+---
+
+# 0.0.5
+
+#### Patch Changes
+
+- Updated dependencies
+  - @xds/core@0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Meta Platforms, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,47 @@
-placeholder
+# @astryxdesign/lab
+
+Experimental Astryx components. This package is a staging area for components being developed before graduating to `@astryxdesign/core`. It ships to npm **only under the `@canary` dist-tag** — there is never a stable (`latest`) release.
+
+## Purpose
+
+Components in lab:
+
+- Are importable in storybook and sandbox for testing
+- Are publishable for early external testing via the `@canary` tag only
+- Can be iterated on freely without worrying about breaking stable consumers
+- Compose with `@astryxdesign/core` components (use the theme, follow naming conventions)
+- Graduate to `@astryxdesign/core` after thorough engineering review
+
+## What's here vs what's in core
+
+**Lab:** Works, has basic props, maybe has stories. API might change. Not accessibility-hardened, not vibe-tested, not fully themed. **Canary-only — no stability promise.**
+
+**Core:** Full keyboard/a11y, hover guards, theming story, status states, spec compliance, vibe tested. Shipped to consumers on `latest`.
+
+## Usage
+
+Inside the monorepo (storybook/sandbox), imports resolve via pnpm workspaces:
+
+```tsx
+import {CodeEditor} from '@astryxdesign/lab';
+```
+
+### Trying lab components in your own project (canary)
+
+Lab is published **only** under the `@canary` dist-tag, so you must request that tag explicitly. There is no `latest` version to install.
+
+```bash
+npm install @astryxdesign/lab@canary @astryxdesign/core@canary
+```
+
+```tsx
+import {CodeEditor} from '@astryxdesign/lab';
+import '@astryxdesign/core/astryx.css';
+import '@astryxdesign/lab/lab.css';
+```
+
+> Canary builds track the latest commit on `main` (`0.x.y-canary.<sha>`). They can break between any two versions — pin an exact version if you need stability.
+
+## Why no stable release?
+
+`package.json` keeps `"private": true` plus an `"astryx": { "canaryOnly": true }` marker. The release workflow's stable (`latest`) job skips both private and `canaryOnly` packages, while the canary job strips `private` in its ephemeral CI checkout only (never in git) to publish the `@canary` tag. The committed `private: true` is npm's hard guarantee that no stable publish can ever happen — **do not remove it.**

package/dist/Chart/Chart.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @file Chart.tsx
+ * @output Root chart container — sets up SVG, scales, and context
+ * @position Parent component; all chart marks/axes/interactions are children
+ *
+ * Handles the d3 margin convention: outer SVG at full size, inner <g> translated
+ * by margins. Children receive scales and dimensions via context.
+ */
+import { type ReactNode } from 'react';
+import type { ChartMargin } from './types';
+/**
+ * Controls how the y-axis domain is computed:
+ * - `'auto'` — includes 0 when all values are positive (default, bar-friendly)
+ * - `'zero'` — symmetric range centered on 0 (good for +/- data)
+ * - `'data'` — tight fit to data extent only (no forced zero)
+ */
+export type YBaseline = 'auto' | 'zero' | 'data';
+export interface ChartProps {
+    /** The dataset — array of objects with consistent keys */
+    data: Record<string, unknown>[];
+    /**
+     * Key for the x-axis domain values.
+     * String values produce a band scale; numeric values produce a linear scale.
+     */
+    xKey: string;
+    /**
+     * Key(s) for the y-axis domain values.
+     * Used to compute the y-domain across all series.
+     */
+    yKeys: string[];
+    /** Chart height in pixels. Width is responsive (fills container). */
+    height?: number;
+    /** Override default margins */
+    margin?: Partial<ChartMargin>;
+    /**
+     * How the y-axis domain is computed.
+     * - `'auto'` — includes 0 when all values are positive (default)
+     * - `'zero'` — symmetric around 0 (use for profit/loss, sentiment, etc.)
+     * - `'data'` — tight fit to data extent
+     */
+    yBaseline?: YBaseline;
+    /**
+     * Explicit y-axis domain [min, max].
+     * When provided, this is the y-axis range. Data outside it is not clipped
+     * visually but will extend beyond the chart area.
+     */
+    yDomain?: [number, number];
+    /**
+     * Explicit x-axis domain [min, max] for linear/time scales.
+     * When provided, this is the x-axis range — the chart renders exactly
+     * this window. Use for streaming charts where the range shifts over time.
+     * Ignored for band (categorical) scales.
+     */
+    xDomain?: [number, number];
+    /**
+     * Set touch-action on the chart container. Use 'none' when interactive
+     * components (brush, zoom, crosshair) are present to prevent scroll
+     * interference on mobile.
+     */
+    interactive?: boolean;
+    /** Chart contents — axes, marks, tooltips */
+    children: ReactNode;
+}
+/**
+ * Root chart container. Computes scales from data and provides them to children.
+ *
+ * @example
+ * ```
+ * <Chart data={data} xKey="month" yKeys={['revenue']} height={300}>
+ *   <ChartAxis position="bottom" />
+ *   <ChartAxis position="left" />
+ *   <ChartBar dataKey="revenue" color={useChartColors().categorical(1)[0]} />
+ * </Chart>
+ * ```
+ */
+export declare function Chart({ data, xKey, yKeys, height, margin: marginOverride, yBaseline, yDomain: yDomainProp, xDomain: xDomainProp, interactive, children, }: ChartProps): import("react").JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,+BA6MZ"}

package/dist/Chart/Chart.js

@@ -0,0 +1,247 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Chart.tsx
+ * @output Root chart container — sets up SVG, scales, and context
+ * @position Parent component; all chart marks/axes/interactions are children
+ *
+ * Handles the d3 margin convention: outer SVG at full size, inner <g> translated
+ * by margins. Children receive scales and dimensions via context.
+ */
+
+import { useMemo, useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { scaleLinear, scaleBand } from 'd3-scale';
+import { isBandScale } from "./utils.js";
+import { ChartProvider } from "./ChartContext.js";
+
+/**
+ * Controls how the y-axis domain is computed:
+ * - `'auto'` — includes 0 when all values are positive (default, bar-friendly)
+ * - `'zero'` — symmetric range centered on 0 (good for +/- data)
+ * - `'data'` — tight fit to data extent only (no forced zero)
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_MARGIN = {
+  top: 16,
+  right: 16,
+  bottom: 32,
+  left: 48
+};
+
+/**
+ * Root chart container. Computes scales from data and provides them to children.
+ *
+ * @example
+ * ```
+ * <Chart data={data} xKey="month" yKeys={['revenue']} height={300}>
+ *   <ChartAxis position="bottom" />
+ *   <ChartAxis position="left" />
+ *   <ChartBar dataKey="revenue" color={useChartColors().categorical(1)[0]} />
+ * </Chart>
+ * ```
+ */
+export function Chart({
+  data,
+  xKey,
+  yKeys,
+  height = 300,
+  margin: marginOverride,
+  yBaseline = 'auto',
+  yDomain: yDomainProp,
+  xDomain: xDomainProp,
+  interactive = false,
+  children
+}) {
+  const containerRef = useRef(null);
+  const svgRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  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();
+  }, []);
+
+  // Block scroll/zoom on the container when interactive.
+  // Must be non-passive to actually prevent default on touch events.
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el || !interactive) {
+      return;
+    }
+    const prevent = e => e.preventDefault();
+    el.addEventListener('touchstart', prevent, {
+      passive: false
+    });
+    el.addEventListener('touchmove', prevent, {
+      passive: false
+    });
+    return () => {
+      el.removeEventListener('touchstart', prevent);
+      el.removeEventListener('touchmove', prevent);
+    };
+  }, [interactive]);
+  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);
+  const xScale = useMemo(() => {
+    const xValues = data.map(d => d[xKey]);
+    const isNumeric = xValues.every(v => typeof v === 'number');
+    if (isNumeric) {
+      if (xDomainProp) {
+        // Explicit domain is authoritative — use as-is
+        return scaleLinear().domain(xDomainProp).range([0, innerWidth]);
+      }
+      // Auto-compute from data
+      const nums = xValues;
+      let min = Infinity;
+      let max = -Infinity;
+      for (const n of nums) {
+        if (n < min) {
+          min = n;
+        }
+        if (n > max) {
+          max = n;
+        }
+      }
+      return scaleLinear().domain([min, max]).range([0, innerWidth]).nice();
+    }
+
+    // Categorical — xDomain doesn't apply to band scales
+    return scaleBand().domain(xValues.map(String)).range([0, innerWidth]).padding(0.2);
+  }, [data, xKey, innerWidth, xDomainProp]);
+  const yScale = useMemo(() => {
+    if (yDomainProp) {
+      // Explicit domain is authoritative — use as-is.
+      // No baseline adjustment, no .nice(). The caller owns the domain
+      // (e.g. zoom/pan controls) and rounding would cause ratcheting.
+      return scaleLinear().domain(yDomainProp).range([innerHeight, 0]);
+    }
+
+    // Auto-compute from data
+    let min = Infinity;
+    let max = -Infinity;
+    for (const d of data) {
+      for (const key of yKeys) {
+        const v = d[key];
+        if (typeof v === 'number') {
+          if (v < min) {
+            min = v;
+          }
+          if (v > max) {
+            max = v;
+          }
+        }
+      }
+    }
+    if (yBaseline === 'zero') {
+      const abs = Math.max(Math.abs(min), Math.abs(max));
+      min = -abs;
+      max = abs;
+    } else if (yBaseline === 'auto') {
+      if (min > 0) {
+        min = 0;
+      }
+      if (max < 0) {
+        max = 0;
+      }
+    }
+    return scaleLinear().domain([min, max]).range([innerHeight, 0]).nice();
+  }, [data, yKeys, innerHeight, yBaseline, yDomainProp]);
+  const pixelToData = useCallback((px, py) => {
+    const y = yScale.invert(py);
+    let x;
+    if (isBandScale(xScale)) {
+      const domain = xScale.domain();
+      const step = xScale.step();
+      const idx = Math.min(domain.length - 1, Math.max(0, Math.floor(px / step)));
+      x = domain[idx];
+    } else {
+      x = xScale.invert(px);
+    }
+    return {
+      x,
+      y,
+      px,
+      py
+    };
+  }, [xScale, yScale]);
+  const pointerToData = useCallback(e => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return {
+        x: null,
+        y: 0,
+        px: 0,
+        py: 0
+      };
+    }
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    // Transform to the inner <g> coordinate space (accounts for margins)
+    const gEl = svg.querySelector('g');
+    const ctm = gEl?.getScreenCTM?.()?.inverse();
+    const local = ctm ? pt.matrixTransform(ctm) : {
+      x: 0,
+      y: 0
+    };
+    return pixelToData(local.x, local.y);
+  }, [pixelToData]);
+  const ctx = useMemo(() => ({
+    width: innerWidth,
+    height: innerHeight,
+    margin,
+    xKey,
+    data,
+    xScale,
+    yScale,
+    svgRef,
+    pointerToData,
+    pixelToData
+  }), [innerWidth, innerHeight, margin, xKey, data, xScale, yScale, pointerToData, pixelToData]);
+  const containerStyle = {
+    width: '100%',
+    touchAction: interactive ? 'none' : undefined,
+    userSelect: interactive ? 'none' : undefined
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    style: containerStyle,
+    children: containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
+      ref: svgRef,
+      width: containerWidth,
+      height: height,
+      style: interactive ? {
+        touchAction: 'none'
+      } : undefined,
+      children: [/*#__PURE__*/_jsx("defs", {
+        children: /*#__PURE__*/_jsx("clipPath", {
+          id: "astryx-chart-plot",
+          children: /*#__PURE__*/_jsx("rect", {
+            x: 0,
+            y: 0,
+            width: innerWidth,
+            height: innerHeight
+          })
+        })
+      }), /*#__PURE__*/_jsx("g", {
+        transform: `translate(${margin.left},${margin.top})`,
+        children: /*#__PURE__*/_jsx(ChartProvider, {
+          value: ctx,
+          children: children
+        })
+      })]
+    })
+  });
+}

package/dist/Chart/ChartArea.d.ts

@@ -0,0 +1,28 @@
+export interface ChartAreaProps {
+    /** Data key for the upper bound. If omitted, uses `baseline`. */
+    yUpper?: string;
+    /** Data key for the lower bound. If omitted, uses `baseline`. */
+    yLower?: string;
+    /** Fallback data key when only one bound is specified. */
+    baseline?: string;
+    /** Fill color */
+    color: string;
+    /** Fill opacity (default: 0.2) */
+    opacity?: number;
+    /** Optional stroke on the band edges */
+    stroke?: boolean;
+    /** Stroke width when stroke is enabled */
+    strokeWidth?: number;
+}
+/**
+ * Area band between two y-values. Use for confidence intervals, error ranges,
+ * or any min/max band around a line.
+ *
+ * @example
+ * ```
+ * <ChartArea yUpper="upper95" yLower="lower95" color={colors[0]} />
+ * <ChartArea yUpper="upper95" baseline="mean" color={colors[0]} />
+ * ```
+ */
+export declare function ChartArea({ yUpper, yLower, baseline, color, opacity, stroke, strokeWidth, }: ChartAreaProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartArea.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartArea.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAa,EACb,MAAc,EACd,WAAe,GAChB,EAAE,cAAc,sCA0ChB"}

package/dist/Chart/ChartArea.js

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartArea.tsx
+ * @output Renders a filled area between two y-bounds — confidence intervals, bands, ranges
+ * @position Child of Chart; reads scales from context
+ */
+
+import { useMemo } from 'react';
+import { area, curveMonotoneX } from 'd3-shape';
+import { useChart } from "./ChartContext.js";
+import { xPixel } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Area band between two y-values. Use for confidence intervals, error ranges,
+ * or any min/max band around a line.
+ *
+ * @example
+ * ```
+ * <ChartArea yUpper="upper95" yLower="lower95" color={colors[0]} />
+ * <ChartArea yUpper="upper95" baseline="mean" color={colors[0]} />
+ * ```
+ */
+export function ChartArea({
+  yUpper,
+  yLower,
+  baseline,
+  color,
+  opacity = 0.2,
+  stroke = false,
+  strokeWidth = 1
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale
+  } = useChart();
+  const upperKey = yUpper ?? baseline;
+  const lowerKey = yLower ?? baseline;
+  const pathD = useMemo(() => {
+    if (!upperKey || !lowerKey) {
+      return '';
+    }
+    const generator = area().x(d => xPixel(d, xKey, xScale)).y0(d => {
+      const v = typeof d[lowerKey] === 'number' ? d[lowerKey] : 0;
+      return yScale(v);
+    }).y1(d => {
+      const v = typeof d[upperKey] === 'number' ? d[upperKey] : 0;
+      return yScale(v);
+    }).curve(curveMonotoneX);
+    return generator(data) ?? '';
+  }, [data, xKey, xScale, yScale, upperKey, lowerKey]);
+  if (!pathD) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("path", {
+      d: pathD,
+      fill: color,
+      fillOpacity: opacity,
+      stroke: "none"
+    }), stroke && /*#__PURE__*/_jsx("path", {
+      d: pathD,
+      fill: "none",
+      stroke: color,
+      strokeWidth: strokeWidth,
+      strokeOpacity: opacity * 2
+    })]
+  });
+}

package/dist/Chart/ChartAxis.d.ts

@@ -0,0 +1,27 @@
+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;
+}
+/**
+ * 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 declare function ChartAxis({ position, tickCount, maxTicks, tickFormat, truncate, animated, }: ChartAxisProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartAxis.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAxis.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartAxis.tsx"],"names":[],"mappings":"AAeA,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;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAa,EACb,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAe,GAChB,EAAE,cAAc,+BAyIhB"}