@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

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

@@ -0,0 +1,22 @@
+import { type AxisBaseProps, type AxisProps } from './Axis';
+export type XAxisBaseProps = AxisBaseProps & {
+  /**
+   * The ID of the axis to render.
+   * Defaults to defaultAxisId if not specified.
+   * @note Only used for axis selection when layout is 'horizontal'. Vertical layout uses a single x-axis.
+   */
+  axisId?: string;
+  /**
+   * 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 when no label is provided, 52 when a label is provided
+   */
+  height?: number;
+};
+export type XAxisProps = AxisProps & XAxisBaseProps;
+export declare const XAxis: import('react').NamedExoticComponent<XAxisProps>;
+//# sourceMappingURL=XAxis.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;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,kDA6RjB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { type AxisBaseProps, type AxisProps } from './Axis';
+export type YAxisBaseProps = AxisBaseProps & {
+  /**
+   * The ID of the axis to render.
+   * Defaults to defaultAxisId if not specified.
+   * @note Only used for axis selection when layout is 'vertical'. Horizontal layout supports a single y-axis.
+   */
+  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 when no label is provided, 64 when a label is provided
+   */
+  width?: number;
+};
+export type YAxisProps = AxisProps & YAxisBaseProps;
+export declare const YAxis: import('react').NamedExoticComponent<YAxisProps>;
+//# sourceMappingURL=YAxis.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;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,kDA2RjB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import type { Rect } from '@coinbase/cds-common';
+import { type BarTransition, type Transition } from '../utils';
+export type BarBaseProps = Rect & {
+  /**
+   * Border radius for the bar.
+   * @default 4
+   */
+  borderRadius?: number;
+  /** Whether to round the top of the bar. */
+  roundTop?: boolean;
+  /** Whether to round the bottom of the bar. */
+  roundBottom?: boolean;
+  /** Origin of the bar. */
+  origin?: number;
+  /** The x-axis data value for this bar. */
+  dataX?: number | [number, number] | null;
+  /** The y-axis data value for this bar. */
+  dataY?: number | [number, number] | null;
+  /** The ID of the series this bar belongs to. */
+  seriesId?: string;
+  /** 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;
+  /** Component to render the bar. */
+  BarComponent?: BarComponent;
+  /** Minimum bar size in pixels. When set, bars shorter than this value are expanded. */
+  minSize?: number;
+};
+export type BarProps = BarBaseProps & {
+  /**
+   * Transition configuration for enter and update animations.
+   * @note Disable an animation by passing in null.
+   *
+   * @default transitions = {{
+   *   enter: { type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 },
+   *   enterOpacity: { type: 'timing', duration: 200 },
+   *   update: { type: 'spring', stiffness: 900, damping: 120 }
+   * }}
+   *
+   * @example
+   * // Custom staggered enter and spring update
+   * transitions={{ enter: { type: 'timing', duration: 500, staggerDelay: 300 }, update: { type: 'spring', damping: 20 } }}
+   *
+   * @example
+   * // Disable enter animation
+   * transitions={{ enter: null }}
+   */
+  transitions?: {
+    /**
+     * Transition for the initial enter/reveal animation.
+     * Set to `null` to disable.
+     */
+    enter?: BarTransition | null;
+    /**
+     * Transition for the initial enter opacity animation.
+     * Uses a default subtle fade when undefined (unless `enter` is disabled).
+     * @note falls back to `enter` timing offsets (`delay` and `staggerDelay`) when not provided.
+     * Set to `null` to disable enter opacity animation. Automatically set to null if enter transition is disabled.
+     */
+    enterOpacity?: BarTransition | null;
+    /**
+     * Transition for subsequent data update animations.
+     * Set to `null` to disable.
+     */
+    update?: BarTransition | null;
+  };
+  /**
+   * Transition for updates.
+   * @deprecated Use `transitions.update` instead. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v4
+   */
+  transition?: Transition;
+};
+export type BarComponentProps = Omit<BarProps, 'BarComponent'> & {
+  /**
+   * The path data for the bar shape.
+   */
+  d: string;
+};
+export type BarComponent = React.FC<BarComponentProps>;
+/**
+ * Simple bar component that renders a single bar at the specified position.
+ *
+ * This component is intentionally kept simple - it just renders a static 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/visualizations/chart/bar/Bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAIjD,OAAO,EAAE,KAAK,aAAa,EAAc,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG;IACpC;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAC7B;;;;;WAKG;QACH,YAAY,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QACpC;;;WAGG;QACH,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;KAC/B,CAAC;IACF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG;IAC/D;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG,sCA2Df,CAAC"}

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

@@ -0,0 +1,156 @@
+import type { View } from 'react-native';
+import { type XAxisProps, type YAxisProps } from '../axis';
+import { type CartesianChartBaseProps, type CartesianChartProps } from '../CartesianChart';
+import { type CartesianAxisConfigProps } from '../utils';
+import { type BarPlotProps } from './BarPlot';
+import type { BarSeries } from './BarStack';
+export type BarChartBaseProps = Omit<
+  CartesianChartBaseProps,
+  | 'xAxis'
+  | 'yAxis'
+  | 'series'
+  | 'borderRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+> &
+  Pick<
+    BarPlotProps,
+    | 'barPadding'
+    | 'BarComponent'
+    | 'fillOpacity'
+    | 'stroke'
+    | 'strokeWidth'
+    | 'borderRadius'
+    | 'BarStackComponent'
+    | 'roundBaseline'
+    | 'stackGap'
+    | 'barMinSize'
+    | 'stackMinSize'
+    | 'transitions'
+    | 'transition'
+  > & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series can optionally define its own BarComponent.
+     */
+    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;
+    /**
+     * Configuration for x-axis.
+     * Accepts axis config and axis props.
+     * To show the axis, set `showXAxis` to true.
+     */
+    xAxis?: Partial<CartesianAxisConfigProps> & XAxisProps;
+    /**
+     * Configuration for y-axis.
+     * Accepts axis config and axis props.
+     * To show the axis, set `showYAxis` to true.
+     */
+    yAxis?: Partial<CartesianAxisConfigProps> & YAxisProps;
+  };
+export type BarChartProps = BarChartBaseProps &
+  Omit<
+    CartesianChartProps,
+    | 'xAxis'
+    | 'yAxis'
+    | 'series'
+    | 'borderRadius'
+    | 'borderTopLeftRadius'
+    | 'borderTopRightRadius'
+    | 'borderBottomLeftRadius'
+    | 'borderBottomRightRadius'
+  >;
+export declare const BarChart: import('react').NamedExoticComponent<
+  Omit<
+    CartesianChartBaseProps,
+    | 'borderRadius'
+    | 'borderBottomLeftRadius'
+    | 'borderBottomRightRadius'
+    | 'borderTopLeftRadius'
+    | 'borderTopRightRadius'
+    | 'series'
+    | 'xAxis'
+    | 'yAxis'
+  > &
+    Pick<
+      BarPlotProps,
+      | 'borderRadius'
+      | 'fillOpacity'
+      | 'stroke'
+      | 'strokeWidth'
+      | 'transition'
+      | 'transitions'
+      | 'BarComponent'
+      | 'BarStackComponent'
+      | 'roundBaseline'
+      | 'stackGap'
+      | 'barMinSize'
+      | 'stackMinSize'
+      | 'barPadding'
+    > & {
+      /**
+       * Configuration objects that define how to visualize the data.
+       * Each series can optionally define its own BarComponent.
+       */
+      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;
+      /**
+       * Configuration for x-axis.
+       * Accepts axis config and axis props.
+       * To show the axis, set `showXAxis` to true.
+       */
+      xAxis?: Partial<CartesianAxisConfigProps> & XAxisProps;
+      /**
+       * Configuration for y-axis.
+       * Accepts axis config and axis props.
+       * To show the axis, set `showYAxis` to true.
+       */
+      yAxis?: Partial<CartesianAxisConfigProps> & YAxisProps;
+    } & Omit<
+      CartesianChartProps,
+      | 'borderRadius'
+      | 'borderBottomLeftRadius'
+      | 'borderBottomRightRadius'
+      | 'borderTopLeftRadius'
+      | 'borderTopRightRadius'
+      | 'series'
+      | 'xAxis'
+      | 'yAxis'
+    > &
+    import('react').RefAttributes<View>
+>;
+//# sourceMappingURL=BarChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,wBAAwB,EAAsC,MAAM,UAAU,CAAC;AAE7F,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,uBAAuB,EACrB,OAAO,GACP,OAAO,GACP,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,CAC5B,GACC,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,GACd,aAAa,GACb,YAAY,CACf,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;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CACF,mBAAmB,EACjB,OAAO,GACP,OAAO,GACP,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,CAC5B,CAAC;AAEJ,eAAO,MAAM,QAAQ;IAjDjB;;;OAGG;aACM,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;OAOG;cACO,OAAO;IACjB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;IACtD;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;2NAgKzD,CAAC"}

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

@@ -0,0 +1,31 @@
+import type { BarStackGroupProps } from './BarStackGroup';
+export type BarPlotBaseProps = 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[];
+};
+export type BarPlotProps = BarPlotBaseProps &
+  Pick<BarStackGroupProps, 'transitions' | 'transition'>;
+/**
+ * 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/visualizations/chart/bar/BarPlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarPlot.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/BarPlot.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,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,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,IAAI,CAAC,kBAAkB,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAQzD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oDAmGnB,CAAC"}

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Rect } from '@coinbase/cds-common';
+import type { ChartScaleFunction, Series } from '../utils';
+import { type BarBaseProps, type BarComponent, type BarProps } from './Bar';
+/**
+ * Extended series type that includes bar-specific properties.
+ */
+export type BarSeries = Series & {
+  /**
+   * Custom component to render bars for this series.
+   */
+  BarComponent?: BarComponent;
+};
+export type BarStackBaseProps = Pick<
+  BarBaseProps,
+  'BarComponent' | 'fillOpacity' | 'stroke' | 'strokeWidth' | 'borderRadius'
+> & {
+  /**
+   * Array of series configurations that belong to this stack.
+   */
+  series: BarSeries[];
+  /**
+   * The category index for this stack.
+   */
+  categoryIndex: number;
+  /**
+   * Position of this stack along the index (categorical) axis.
+   */
+  indexPos: number;
+  /**
+   * Thickness of this stack.
+   */
+  thickness: number;
+  /**
+   * Scale for the independent (categorical) axis.
+   */
+  indexScale: ChartScaleFunction;
+  /**
+   * Scale for the dependent (magnitude) axis.
+   */
+  valueScale: ChartScaleFunction;
+  /**
+   * Chart rect for bounds.
+   */
+  rect: Rect;
+  /**
+   * X axis ID to use.
+   * If not provided, defaults to defaultAxisId.
+   * @note Only used for axis selection when layout is 'horizontal'. Vertical layout uses a single x-axis.
+   */
+  xAxisId?: string;
+  /**
+   * Y axis ID to use.
+   * If not provided, defaults to defaultAxisId.
+   * @note Only used for axis selection when layout is 'vertical'. Horizontal layout supports a single y-axis.
+   */
+  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;
+};
+export type BarStackProps = BarStackBaseProps & Pick<BarProps, 'transitions' | 'transition'>;
+export type BarStackComponentProps = Pick<
+  BarStackProps,
+  'categoryIndex' | 'borderRadius' | 'transitions' | 'transition'
+> & {
+  /**
+   * 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;
+  /**
+   * Whether to round the top corners.
+   */
+  roundTop?: boolean;
+  /**
+   * Whether to round the bottom corners.
+   */
+  roundBottom?: boolean;
+  /**
+   * Stack animation origin.
+   * - number: baseline on the value axis
+   * - tuple: [start, end] clip range for stacked min-size enter animation
+   */
+  origin?: number | [number, number];
+};
+export type BarStackComponent = React.FC<BarStackComponentProps>;
+/**
+ * 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/visualizations/chart/bar/BarStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarStack.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/BarStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAIjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAK3D,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,YAAY,EACZ,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,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,kBAAkB,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,kBAAkB,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IACX;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;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,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAE7F,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,aAAa,EACb,eAAe,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,CAChE,GAAG;IACF;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,QAAQ,2CA6MpB,CAAC"}

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

@@ -0,0 +1,37 @@
+import { type BarStackProps } from './BarStack';
+export type BarStackGroupProps = Pick<
+  BarStackProps,
+  | 'BarComponent'
+  | 'fillOpacity'
+  | 'stroke'
+  | 'strokeWidth'
+  | 'borderRadius'
+  | 'roundBaseline'
+  | 'stackGap'
+  | 'barMinSize'
+  | 'stackMinSize'
+  | 'BarStackComponent'
+  | 'transitions'
+  | 'transition'
+> &
+  Pick<BarStackProps, 'series' | 'xAxisId' | '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/visualizations/chart/bar/BarStackGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarStackGroup.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/BarStackGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,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,GACnB,aAAa,GACb,YAAY,CACf,GACC,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,GAAG;IACtD;;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,0DA4FzB,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { BarComponentProps } from './Bar';
+export type DefaultBarProps = BarComponentProps;
+/**
+ * Default bar component that renders a solid bar with animation support.
+ */
+export declare const DefaultBar: import('react').NamedExoticComponent<BarComponentProps>;
+//# sourceMappingURL=DefaultBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultBar.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/DefaultBar.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,UAAU,yDAgItB,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { BarStackComponentProps } from './BarStack';
+export type DefaultBarStackProps = BarStackComponentProps;
+/**
+ * Default stack component that renders children in a group with animated clip path.
+ */
+export declare const DefaultBarStack: import('react').NamedExoticComponent<BarStackComponentProps>;
+//# sourceMappingURL=DefaultBarStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultBarStack.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/bar/DefaultBarStack.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,eAAe,8DAqF3B,CAAC"}

package/dts/visualizations/chart/bar/PercentageBarChart.d.ts

@@ -0,0 +1,104 @@
+import type { View } from 'react-native';
+import type { BarChartBaseProps, BarChartProps } from './BarChart';
+import type { BarSeries } from './BarStack';
+/** Extended series type that supports single data values. */
+export type PercentageBarSeries = Omit<BarSeries, 'data' | 'stackId' | 'xAxisId' | 'yAxisId'> & {
+  /**
+   * Data for this series.
+   *
+   * Can be either:
+   * - Single number: `1400`
+   * - Array of numbers: `[10, 15, 20]`
+   */
+  data: number | Array<number | null>;
+};
+export type PercentageBarChartBaseProps = Omit<
+  BarChartBaseProps,
+  | 'series'
+  | 'stacked'
+  | 'layout'
+  | 'roundBaseline'
+  | 'inset'
+  | 'enableScrubbing'
+  | 'onScrubberPositionChange'
+> & {
+  /**
+   * Configuration objects that define how to visualize the data.
+   * Each series contains its own data.
+   */
+  series?: PercentageBarSeries[];
+  /**
+   * Chart layout - describes the direction bars/areas grow.
+   * - 'vertical': Bars grow vertically. X is category axis, Y is value axis.
+   * - 'horizontal' (default): Bars grow horizontally. Y is category axis, X is value axis.
+   * @default 'horizontal'
+   */
+  layout?: BarChartBaseProps['layout'];
+  /**
+   * Whether to round the baseline of a bar (where the value is 0).
+   * @default true
+   */
+  roundBaseline?: BarChartBaseProps['roundBaseline'];
+  /**
+   * Inset around the entire chart (outside the axes).
+   * @default 0
+   */
+  inset?: BarChartBaseProps['inset'];
+};
+export type PercentageBarChartProps = PercentageBarChartBaseProps &
+  Omit<
+    BarChartProps,
+    | 'series'
+    | 'stacked'
+    | 'layout'
+    | 'roundBaseline'
+    | 'inset'
+    | 'enableScrubbing'
+    | 'onScrubberPositionChange'
+  >;
+export declare const PercentageBarChart: import('react').NamedExoticComponent<
+  Omit<
+    BarChartBaseProps,
+    | 'inset'
+    | 'layout'
+    | 'stacked'
+    | 'series'
+    | 'roundBaseline'
+    | 'enableScrubbing'
+    | 'onScrubberPositionChange'
+  > & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series contains its own data.
+     */
+    series?: PercentageBarSeries[];
+    /**
+     * Chart layout - describes the direction bars/areas grow.
+     * - 'vertical': Bars grow vertically. X is category axis, Y is value axis.
+     * - 'horizontal' (default): Bars grow horizontally. Y is category axis, X is value axis.
+     * @default 'horizontal'
+     */
+    layout?: BarChartBaseProps['layout'];
+    /**
+     * Whether to round the baseline of a bar (where the value is 0).
+     * @default true
+     */
+    roundBaseline?: BarChartBaseProps['roundBaseline'];
+    /**
+     * Inset around the entire chart (outside the axes).
+     * @default 0
+     */
+    inset?: BarChartBaseProps['inset'];
+  } & Omit<
+      BarChartProps,
+      | 'inset'
+      | 'layout'
+      | 'stacked'
+      | 'series'
+      | 'roundBaseline'
+      | 'enableScrubbing'
+      | 'onScrubberPositionChange'
+    > &
+    import('react').RefAttributes<View>
+>;
+//# sourceMappingURL=PercentageBarChart.d.ts.map