@coinbase/cds-web-visualization 3.3.0 → 3.4.0-beta.1

package/dts/chart/axis/Axis.d.ts

@@ -0,0 +1,208 @@
+import type React from 'react';
+import { type LineComponent } from '../line';
+import type { ChartTextChildren } from '../text/ChartText';
+export declare const axisLineStyles =
+  '\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n';
+export declare const axisTickMarkStyles =
+  '\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n';
+/**
+ * Animation variants for grouped axis tick labels - initial mount
+ */
+export declare const axisTickLabelsInitialAnimationVariants: {
+  initial: {
+    opacity: number;
+  };
+  animate: {
+    opacity: number;
+    transition: {
+      duration: number;
+      delay: number;
+    };
+  };
+  exit: {
+    opacity: number;
+    transition: {
+      duration: number;
+    };
+  };
+};
+/**
+ * Animation variants for axis elements - updates (used for both grid lines and tick labels)
+ */
+export declare const axisUpdateAnimationVariants: {
+  initial: {
+    opacity: number;
+  };
+  animate: {
+    opacity: number;
+    transition: {
+      duration: number;
+      delay: number;
+    };
+  };
+  exit: {
+    opacity: number;
+    transition: {
+      duration: number;
+    };
+  };
+};
+export type AxisBaseProps = {
+  /**
+   * Component to render the grid lines.
+   * @default DottedLine
+   */
+  GridLineComponent?: LineComponent;
+  /**
+   * Minimum gap between tick labels.
+   * Labels will be hidden if they are closer than this gap.
+   * @default 4
+   */
+  minTickLabelGap?: number;
+  /**
+   * Requested number of ticks to display.
+   * This value is passed into d3 and may not be respected.
+   * @note This property is overridden when `ticks` is provided.
+   * @note this property overrides the `tickInterval` property.
+   * @default 5 (for y-axis)
+   */
+  requestedTickCount?: number;
+  /**
+   * Whether to show grid lines at each tick position.
+   */
+  showGrid?: boolean;
+  /**
+   * Whether to show the axis line.
+   */
+  showLine?: boolean;
+  /**
+   * Whether to show tick marks on the axis.
+   */
+  showTickMarks?: boolean;
+  /**
+   * Size of the tick marks.
+   * @default 4
+   */
+  tickMarkSize?: number;
+  /**
+   * Custom tick configuration for the axis.
+   * When provided, this overrides the `requestedTickCount` property.
+   *
+   * - **Array**: Uses these exact values for tick positioning and labels.
+   * - **Function**: Filters based on the predicate function.
+   *   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)
+   *   - For **y-axis**: Filters d3-generated tick values
+   *
+   * @example
+   * // Exact tick values
+   * ticks: [0, 25, 50, 75, 100]
+   *
+   * @example
+   * // Show every 12th data point on x-axis
+   * ticks: (index) => index % 12 === 0
+   */
+  ticks?: number[] | ((value: number) => boolean);
+  /**
+   * Formatter function for axis tick values.
+   * Tick values will be wrapped in ChartText component.
+   *
+   * @example
+   * // Simple string formatting
+   * tickLabelFormatter: (value) => `$${prices[value]}`
+   *
+   * @example
+   * // ReactNode with conditional styling
+   * tickLabelFormatter: (index) => {
+   *   if (index % 12 === 0) {
+   *     return <tspan style={{ fontWeight: 'bold' }}>${prices[index]}</tspan>;
+   *   }
+   *   return `$${prices[index]}`;
+   * }
+   */
+  tickLabelFormatter?: (value: any) => ChartTextChildren;
+  /**
+   * Space between the axis tick mark and labels.
+   * If tick marks are not shown, this is the gap between the axis and the chart.
+   * @default 2 for x-axis, 8 for y-axis
+   */
+  tickMarkLabelGap?: number;
+  /**
+   * Interval at which to show ticks.
+   * When provided, calculates tick count based on available space.
+   * @note this property is overridden by the `requestedTickCount` and `ticks` properties.
+   * @default 32 (for x-axis)
+   */
+  tickInterval?: number;
+  /**
+   * Minimum step size for tick generation.
+   * Prevents the step from being smaller than this value.
+   * @default 1
+   */
+  tickMinStep?: number;
+  /**
+   * Maximum step size for tick generation.
+   * Prevents the step from being larger than this value.
+   */
+  tickMaxStep?: number;
+};
+export type AxisProps = AxisBaseProps & {
+  /**
+   * Custom className for the axis.
+   */
+  className?: string;
+  /**
+   * Custom classNames for the axis.
+   */
+  classNames?: {
+    /**
+     * Custom className for the root element.
+     */
+    root?: string;
+    /**
+     * Custom className for the tick labels.
+     */
+    tickLabel?: string;
+    /**
+     * Custom className for the grid lines.
+     */
+    gridLine?: string;
+    /**
+     * Custom className for the axis line.
+     */
+    line?: string;
+    /**
+     * Custom className for the tick marks.
+     */
+    tickMark?: string;
+  };
+  /**
+   * Custom style for the axis.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom styles for the axis.
+   */
+  styles?: {
+    /**
+     * Custom style for the root element.
+     */
+    root?: React.CSSProperties;
+    /**
+     * Custom style for the tick labels.
+     */
+    tickLabel?: React.CSSProperties;
+    /**
+     * Custom style for the grid lines.
+     */
+    gridLine?: React.CSSProperties;
+    /**
+     * Custom style for the axis line.
+     */
+    line?: React.CSSProperties;
+    /**
+     * Custom style for the tick marks.
+     */
+    tickMark?: React.CSSProperties;
+  };
+};
+//# sourceMappingURL=Axis.d.ts.map

package/dts/chart/axis/Axis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,eAAO,MAAM,cAAc,oFAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAI9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sCAAsC;;;;;;;;;;;;;;;;;CAiBlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;CAiBvC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;;;;;;;;;;;;;;OAgBG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,iBAAiB,CAAC;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;CACH,CAAC"}

package/dts/chart/axis/XAxis.d.ts

@@ -0,0 +1,16 @@
+import { type AxisBaseProps, type AxisProps } from './Axis';
+export type XAxisBaseProps = AxisBaseProps & {
+  /**
+   * The position of the axis relative to the chart's drawing area.
+   * @default 'bottom'
+   */
+  position?: 'top' | 'bottom';
+  /**
+   * Height of the axis. This value is inclusive of the padding.
+   * @default 32
+   */
+  height?: number;
+};
+export type XAxisProps = AxisProps & XAxisBaseProps;
+export declare const XAxis: import('react').NamedExoticComponent<XAxisProps>;
+//# sourceMappingURL=XAxis.d.ts.map

package/dts/chart/axis/XAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAIf,MAAM,QAAQ,CAAC;AAShB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAqOjB,CAAC"}

package/dts/chart/axis/YAxis.d.ts

@@ -0,0 +1,21 @@
+import type { AxisBaseProps, AxisProps } from './Axis';
+export type YAxisBaseProps = AxisBaseProps & {
+  /**
+   * The ID of the axis to render.
+   * Defaults to defaultAxisId if not specified.
+   */
+  axisId?: string;
+  /**
+   * The position of the axis relative to the chart's drawing area.
+   * @default 'right'
+   */
+  position?: 'left' | 'right';
+  /**
+   * Width of the axis. This value is inclusive of the padding.
+   * @default 44
+   */
+  width?: number;
+};
+export type YAxisProps = AxisProps & YAxisBaseProps;
+export declare const YAxis: import('react').NamedExoticComponent<YAxisProps>;
+//# sourceMappingURL=YAxis.d.ts.map

package/dts/chart/axis/YAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAevD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAoNjB,CAAC"}

package/dts/chart/axis/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Axis';
+export * from './XAxis';
+export * from './YAxis';
+//# sourceMappingURL=index.d.ts.map

package/dts/chart/axis/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dts/chart/bar/Bar.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+export type BarComponentProps = {
+  /**
+   * X coordinate of the bar (left edge).
+   */
+  x: number;
+  /**
+   * Y coordinate of the bar (top edge).
+   */
+  y: number;
+  /**
+   * Width of the bar.
+   */
+  width: number;
+  /**
+   * Height of the bar.
+   */
+  height: number;
+  /**
+   * Border radius of the bar.
+   */
+  borderRadius?: number;
+  /**
+   * Whether to round the top of the bar.
+   */
+  roundTop?: boolean;
+  /**
+   * Whether to round the bottom of the bar.
+   */
+  roundBottom?: boolean;
+  /**
+   * Y coordinate of the baseline/origin for animations.
+   * Used to calculate initial animation state.
+   */
+  originY?: number;
+  /**
+   * The x-axis data value for this bar.
+   */
+  dataX?: number | string;
+  /**
+   * The y-axis data value for this bar.
+   */
+  dataY?: number | [number, number] | null;
+  /**
+   * The path data for the bar shape.
+   */
+  d: SVGProps<SVGPathElement>['d'];
+  /**
+   * Fill color for the bar.
+   */
+  fill?: string;
+  /**
+   * Fill opacity for the bar.
+   */
+  fillOpacity?: number;
+  /**
+   * Stroke color for the bar outline.
+   */
+  stroke?: string;
+  /**
+   * Stroke width for the bar outline.
+   */
+  strokeWidth?: number;
+};
+export type BarComponent = React.FC<BarComponentProps>;
+export type BarProps = Omit<BarComponentProps, 'd'> & {
+  /**
+   * Border radius for the bar.
+   * @default 4
+   */
+  borderRadius?: BarComponentProps['borderRadius'];
+  /**
+   * Component to render the bar.
+   */
+  BarComponent?: BarComponent;
+};
+/**
+ * Simple bar component that renders a single bar at the specified position.
+ *
+ * This component is intentionally kept simple - it just renders a bar at the given
+ * x, y, width, height coordinates. Complex positioning logic (like handling stacks,
+ * groups, gaps, etc.) should be handled by parent components like BarChart or BarStack.
+ *
+ * @example
+ * ```tsx
+ * <Bar x={10} y={20} width={50} height={100} fill="blue" />
+ * ```
+ */
+export declare const Bar: React.NamedExoticComponent<BarProps>;
+//# sourceMappingURL=Bar.d.ts.map

package/dts/chart/bar/Bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAEvD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,GAAG;IACpD;;;OAGG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG,sCAgDf,CAAC"}

package/dts/chart/bar/BarChart.d.ts

@@ -0,0 +1,53 @@
+import { type XAxisProps, type YAxisProps } from '../axis';
+import { type CartesianChartProps } from '../CartesianChart';
+import { type AxisConfigProps, type Series } from '../utils';
+import { type BarProps } from './Bar';
+import { type BarPlotProps } from './BarPlot';
+export type BarSeries = Series &
+  Partial<Pick<BarProps, 'BarComponent' | 'fill' | 'fillOpacity' | 'stroke' | 'strokeWidth'>>;
+export type BarChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'> &
+  Pick<
+    BarPlotProps,
+    | 'barPadding'
+    | 'BarComponent'
+    | 'fillOpacity'
+    | 'stroke'
+    | 'strokeWidth'
+    | 'borderRadius'
+    | 'BarStackComponent'
+    | 'roundBaseline'
+    | 'stackGap'
+    | 'barMinSize'
+    | 'stackMinSize'
+  > & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series supports Bar component props for individual customization.
+     */
+    series?: Array<BarSeries>;
+    /**
+     * Whether to stack the areas on top of each other.
+     * When true, each series builds cumulative values on top of the previous series.
+     *
+     * **Note**: Only applies to series data containing singular numbers (e.g., `[10, 20, 30]`).
+     * Series with start & end value tuples (e.g., `[[0, 10], [5, 20]]`) will be skipped during stacking
+     * and rendered as-is.
+     */
+    stacked?: boolean;
+    /**
+     * Whether to show the X axis.
+     */
+    showXAxis?: boolean;
+    /**
+     * Whether to show the Y axis.
+     */
+    showYAxis?: boolean;
+    xAxis?: Partial<AxisConfigProps> & XAxisProps;
+    yAxis?: Partial<AxisConfigProps> & YAxisProps;
+  };
+export declare const BarChart: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    Omit<BarChartProps, 'ref'> & import('react').RefAttributes<SVGSVGElement>
+  >
+>;
+//# sourceMappingURL=BarChart.d.ts.map

package/dts/chart/bar/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EACL,KAAK,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG,MAAM,GAC5B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC;AAE9F,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GACjF,IAAI,CACF,YAAY,EACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,mBAAmB,GACnB,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,CACjB,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,eAAO,MAAM,QAAQ,2JA4IpB,CAAC"}

package/dts/chart/bar/BarPlot.d.ts

@@ -0,0 +1,29 @@
+import type { BarStackGroupProps } from './BarStackGroup';
+export type BarPlotProps = Pick<
+  BarStackGroupProps,
+  | 'barPadding'
+  | 'BarComponent'
+  | 'fillOpacity'
+  | 'stroke'
+  | 'strokeWidth'
+  | 'borderRadius'
+  | 'roundBaseline'
+  | 'stackGap'
+  | 'barMinSize'
+  | 'stackMinSize'
+  | 'BarStackComponent'
+> & {
+  /**
+   * Array of series IDs to render.
+   * If not provided, renders all series in the chart.
+   */
+  seriesIds?: string[];
+};
+/**
+ * BarPlot component that handles multiple series with proper stacking coordination.
+ * Groups series by stack ID + y-axis ID combination and renders BarStackGroup for each group.
+ * This allows series with different y-axes to be rendered side by side while preventing
+ * cross-axis stacking (e.g., comparing $1M vs $1B companies on different scales).
+ */
+export declare const BarPlot: import('react').NamedExoticComponent<BarPlotProps>;
+//# sourceMappingURL=BarPlot.d.ts.map

package/dts/chart/bar/BarPlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarPlot.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarPlot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,kBAAkB,EAChB,YAAY,GACZ,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,GACd,mBAAmB,CACtB,GAAG;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oDAmGnB,CAAC"}

package/dts/chart/bar/BarStack.d.ts

@@ -0,0 +1,111 @@
+import React from 'react';
+import type { Rect } from '@coinbase/cds-common';
+import type { ChartScaleFunction } from '../utils';
+import { type BarProps } from './Bar';
+import type { BarSeries } from './BarChart';
+export type BarStackComponentProps = {
+  /**
+   * The x position of the stack.
+   */
+  x: number;
+  /**
+   * The y position of the stack.
+   */
+  y: number;
+  /**
+   * The width of the stack.
+   */
+  width: number;
+  /**
+   * The height of the stack.
+   */
+  height: number;
+  /**
+   * The bar elements to render within the stack.
+   */
+  children: React.ReactNode;
+  /**
+   * The index of the category this stack belongs to.
+   */
+  categoryIndex: number;
+  /**
+   * Border radius for the bar.
+   * @default 4
+   */
+  borderRadius?: number;
+  /**
+   * Whether to round the top corners.
+   */
+  roundTop?: boolean;
+  /**
+   * Whether to round the bottom corners.
+   */
+  roundBottom?: boolean;
+  /**
+   * The y-origin for animations (baseline position).
+   */
+  yOrigin?: number;
+};
+export type BarStackComponent = React.FC<BarStackComponentProps>;
+export type BarStackProps = Pick<
+  BarProps,
+  'BarComponent' | 'fillOpacity' | 'stroke' | 'strokeWidth' | 'borderRadius'
+> & {
+  /**
+   * Array of series configurations that belong to this stack.
+   */
+  series: BarSeries[];
+  /**
+   * The category index for this stack.
+   */
+  categoryIndex: number;
+  /**
+   * X position for this stack.
+   */
+  x: number;
+  /**
+   * Width of this stack.
+   */
+  width: number;
+  /**
+   * Y scale function.
+   */
+  yScale: ChartScaleFunction;
+  /**
+   * Chart rect for bounds.
+   */
+  rect: Rect;
+  /**
+   * Y axis ID to use.
+   * If not provided, will use the yAxisId from the first series.
+   */
+  yAxisId?: string;
+  /**
+   * Custom component to render the stack container.
+   * Can be used to add clip paths, outlines, or other custom styling.
+   * @default DefaultBarStack
+   */
+  BarStackComponent?: BarStackComponent;
+  /**
+   * Whether to round the baseline of a bar (where the value is 0).
+   */
+  roundBaseline?: boolean;
+  /**
+   * Gap between bars in the stack.
+   */
+  stackGap?: number;
+  /**
+   * Minimum size for individual bars in the stack.
+   */
+  barMinSize?: number;
+  /**
+   * Minimum size for the entire stack.
+   */
+  stackMinSize?: number;
+};
+/**
+ * BarStack component that renders a single stack of bars at a specific category index.
+ * Handles the stacking logic for bars within a single category.
+ */
+export declare const BarStack: React.NamedExoticComponent<BarStackProps>;
+//# sourceMappingURL=BarStack.d.ts.map

package/dts/chart/bar/BarStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarStack.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAGjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAA0B,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,QAAQ,EACR,cAAc,GAAG,aAAa,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAC3E,GAAG;IACF;;OAEG;IACH,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,kBAAkB,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IACX;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,2CAijBpB,CAAC"}

package/dts/chart/bar/BarStackGroup.d.ts

@@ -0,0 +1,35 @@
+import type { BarStackProps } from './BarStack';
+export type BarStackGroupProps = Pick<
+  BarStackProps,
+  | 'BarComponent'
+  | 'fillOpacity'
+  | 'stroke'
+  | 'strokeWidth'
+  | 'borderRadius'
+  | 'roundBaseline'
+  | 'stackGap'
+  | 'barMinSize'
+  | 'stackMinSize'
+  | 'BarStackComponent'
+> &
+  Pick<BarStackProps, 'series' | 'yAxisId'> & {
+    /**
+     * Index of this stack within the category (0-based).
+     */
+    stackIndex: number;
+    /**
+     * Total number of stacks per category.
+     */
+    totalStacks: number;
+    /**
+     * Padding between bar groups (0-1).
+     * @default 0.1
+     */
+    barPadding?: number;
+  };
+/**
+ * BarStackGroup component that renders a group of stacks across all categories.
+ * Delegates the actual stacking logic to BarStack for each category.
+ */
+export declare const BarStackGroup: import('react').NamedExoticComponent<BarStackGroupProps>;
+//# sourceMappingURL=BarStackGroup.d.ts.map

package/dts/chart/bar/BarStackGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarStackGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarStackGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,GACd,mBAAmB,CACtB,GACC,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC1C;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,aAAa,0DAkFzB,CAAC"}

package/dts/chart/bar/DefaultBar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { BarComponentProps } from './Bar';
+export type DefaultBarProps = BarComponentProps & {
+  /**
+   * Custom class name for the bar.
+   */
+  className?: string;
+  /**
+   * Custom styles for the bar.
+   */
+  style?: React.CSSProperties;
+};
+/**
+ * Default bar component that renders a solid bar with animation.
+ */
+export declare const DefaultBar: React.NamedExoticComponent<DefaultBarProps>;
+//# sourceMappingURL=DefaultBar.d.ts.map

package/dts/chart/bar/DefaultBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultBar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/DefaultBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAM7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,6CAuCtB,CAAC"}

package/dts/chart/bar/DefaultBarStack.d.ts

@@ -0,0 +1,16 @@
+import type { BarStackComponentProps } from './BarStack';
+export type DefaultBarStackProps = BarStackComponentProps & {
+  /**
+   * Custom class name for the stack group.
+   */
+  className?: string;
+  /**
+   * Custom styles for the stack group.
+   */
+  style?: React.CSSProperties;
+};
+/**
+ * Default stack component that renders children in a group with animated clip path.
+ */
+export declare const DefaultBarStack: import('react').NamedExoticComponent<DefaultBarStackProps>;
+//# sourceMappingURL=DefaultBarStack.d.ts.map

package/dts/chart/bar/DefaultBarStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultBarStack.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/DefaultBarStack.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,GAAG;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,4DA8C3B,CAAC"}

package/dts/chart/bar/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Bar';
+export * from './BarChart';
+export * from './BarPlot';
+export * from './BarStack';
+export * from './BarStackGroup';
+export * from './DefaultBar';
+export * from './DefaultBarStack';
+//# sourceMappingURL=index.d.ts.map

package/dts/chart/bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/index.ts"],"names":[],"mappings":"AACA,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}