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

package/dts/visualizations/chart/PeriodSelector.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { type SegmentedTabsProps, type TabsActiveIndicatorProps } from '../../tabs';
+import { type TextBaseProps } from '../../typography';
+export declare const PeriodSelectorActiveIndicator: ({
+  activeTabRect,
+  background,
+  position,
+  borderRadius,
+}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | undefined;
+export type LiveTabLabelBaseProps = TextBaseProps & {
+  /**
+   * The label to display.
+   * @default 'LIVE'
+   */
+  label?: string;
+  /**
+   * Whether to hide the dot.
+   */
+  hideDot?: boolean;
+  /**
+   * Style prop for customization
+   */
+  style?: any;
+};
+export type LiveTabLabelProps = LiveTabLabelBaseProps;
+export declare const LiveTabLabel: React.NamedExoticComponent<
+  import('../../styles/styleProps').StyleProps & {
+    children?: React.ReactNode;
+    style?: import('react-native').Animated.WithAnimatedValue<
+      import('react-native').StyleProp<import('react-native').TextStyle>
+    >;
+    animated?: boolean;
+    align?: 'start' | 'end' | 'center' | 'justify';
+    font?: import('@coinbase/cds-common').ThemeVars.FontFamily | 'inherit';
+    disabled?: boolean;
+    mono?: boolean;
+    underline?: boolean;
+    tabularNumbers?: boolean;
+    numberOfLines?: number;
+    ellipsize?: import('react-native').TextProps['ellipsizeMode'];
+    noWrap?: boolean;
+    dangerouslySetColor?: import('react-native').TextStyle['color'];
+    dangerouslySetBackground?: import('react-native').TextStyle['backgroundColor'];
+    renderEmptyNode?: boolean;
+    testID?: string;
+  } & {
+    /**
+     * The label to display.
+     * @default 'LIVE'
+     */
+    label?: string;
+    /**
+     * Whether to hide the dot.
+     */
+    hideDot?: boolean;
+    /**
+     * Style prop for customization
+     */
+    style?: any;
+  } & React.RefAttributes<View>
+>;
+export type PeriodSelectorProps = SegmentedTabsProps;
+/**
+ * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
+ * It provides transparent background, primary wash active state, and full-width layout by default.
+ */
+export declare const PeriodSelector: React.NamedExoticComponent<
+  Partial<
+    Pick<
+      import('../../tabs').TabsBaseProps<string>,
+      'TabComponent' | 'TabsActiveIndicatorComponent'
+    >
+  > &
+    Omit<
+      import('../../tabs').TabsBaseProps<string>,
+      'styles' | 'TabComponent' | 'TabsActiveIndicatorComponent'
+    > &
+    Partial<
+      Pick<import('../../tabs').TabsProps<string>, 'TabComponent' | 'TabsActiveIndicatorComponent'>
+    > &
+    Omit<
+      import('../../tabs').TabsProps<string>,
+      'styles' | 'TabComponent' | 'TabsActiveIndicatorComponent'
+    > & {
+      styles?: {
+        root?: import('react-native').StyleProp<ViewStyle>;
+        tab?: import('react-native').StyleProp<ViewStyle>;
+        activeIndicator?: import('react-native').StyleProp<ViewStyle>;
+      };
+    } & React.RefAttributes<any>
+>;
+//# sourceMappingURL=PeriodSelector.d.ts.map

package/dts/visualizations/chart/PeriodSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;8BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YAjHK,CAAC;WACH,CAAC;uBAG5B,CAAC;;6BAuIH,CAAC"}

package/dts/visualizations/chart/area/Area.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { PathBaseProps, PathProps } from '../Path';
+import { type ChartPathCurveType } from '../utils';
+import type { GradientDefinition } from '../utils/gradient';
+export type AreaBaseProps = {
+  /**
+   * The ID of the series to render. Will be used to find the data from the chart context.
+   */
+  seriesId: string;
+  /**
+   * The curve interpolation method to use for the line.
+   * @default 'bump'
+   */
+  curve?: ChartPathCurveType;
+  /**
+   * The type of area to render.
+   * @default 'solid'
+   */
+  type?: 'solid' | 'dotted' | 'gradient';
+  /**
+   * Component to render the area.
+   * Takes precedence over the type prop if provided.
+   */
+  AreaComponent?: AreaComponent;
+  /**
+   * When true, the area is connected across null values.
+   */
+  connectNulls?: boolean;
+  /**
+   * The color of the area.
+   * @default color of the series or 'var(--color-fgPrimary)'
+   */
+  fill?: PathBaseProps['fill'];
+  /**
+   * Opacity of the area
+   * @note when combined with gradient, both will be applied
+   * @default 1
+   */
+  fillOpacity?: PathBaseProps['fillOpacity'];
+  /**
+   * Baseline value for the gradient.
+   * When set, overrides the default baseline.
+   *
+   * @deprecated this prop has no functionality. Use 'baseline' on axis config instead. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v5
+   */
+  baseline?: number;
+  /**
+   * Gradient configuration.
+   * When provided, creates gradient or threshold-based coloring.
+   */
+  gradient?: GradientDefinition;
+  /**
+   * Whether to animate the area.
+   * Overrides the animate value from the chart context.
+   */
+  animate?: PathBaseProps['animate'];
+};
+export type AreaProps = AreaBaseProps & Pick<PathProps, 'transitions' | 'transition'>;
+export type AreaComponentProps = Pick<
+  AreaProps,
+  'fill' | 'fillOpacity' | 'baseline' | 'gradient' | 'animate' | 'transitions' | 'transition'
+> & {
+  /**
+   * Path of the area
+   */
+  d: string;
+  /**
+   * ID of the x-axis to use.
+   * If not provided, defaults to the default x-axis.
+   * @note Only used for axis selection when layout is 'horizontal'. Vertical layout uses a single x-axis.
+   */
+  xAxisId?: string;
+  /**
+   * ID of the y-axis to use.
+   * If not provided, defaults to the default y-axis.
+   * @note Only used for axis selection when layout is 'vertical'. Horizontal layout supports a single y-axis.
+   */
+  yAxisId?: string;
+};
+export type AreaComponent = React.FC<AreaComponentProps>;
+export declare const Area: React.NamedExoticComponent<AreaProps>;
+//# sourceMappingURL=Area.d.ts.map

package/dts/visualizations/chart/area/Area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAG7C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,KAAK,kBAAkB,EAAe,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAM5D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAC5F,GAAG;IACF;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCA6FhB,CAAC"}

package/dts/visualizations/chart/area/AreaChart.d.ts

@@ -0,0 +1,153 @@
+import type { View } from 'react-native';
+import { type XAxisProps, type YAxisProps } from '../axis';
+import { type CartesianChartBaseProps, type CartesianChartProps } from '../CartesianChart';
+import { type LineProps } from '../line/Line';
+import { type CartesianAxisConfigProps, type Series } from '../utils';
+import { type AreaProps } from './Area';
+export type AreaSeries = Series &
+  Partial<
+    Pick<
+      AreaProps,
+      | 'AreaComponent'
+      | 'curve'
+      | 'fillOpacity'
+      | 'type'
+      | 'fill'
+      | 'connectNulls'
+      | 'transition'
+      | 'transitions'
+    >
+  > &
+  Partial<
+    Pick<
+      LineProps,
+      'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity' | 'transition' | 'transitions'
+    >
+  > & {
+    /**
+     * The type of line to render for this series.
+     * Overrides the chart-level lineType if provided.
+     * @default 'solid'
+     */
+    lineType?: 'solid' | 'dotted';
+  };
+export type AreaChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
+  Pick<
+    AreaProps,
+    | 'AreaComponent'
+    | 'curve'
+    | 'fillOpacity'
+    | 'type'
+    | 'connectNulls'
+    | 'transition'
+    | 'transitions'
+  > &
+  Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series supports Area and Line component props for individual customization.
+     */
+    series?: Array<AreaSeries>;
+    /**
+     * 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 [baseline, value] tuples (e.g., `[[0, 10], [0, -5]]`) 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;
+    /**
+     * Whether to show lines on top of the areas.
+     * Useful for stacked contexts to show the outline of each area.
+     */
+    showLines?: boolean;
+    /**
+     * The type of line to render.
+     * @default 'solid'
+     */
+    lineType?: 'solid' | 'dotted';
+    /**
+     * 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 AreaChartProps = AreaChartBaseProps &
+  Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'>;
+export declare const AreaChart: import('react').NamedExoticComponent<
+  Omit<CartesianChartBaseProps, 'series' | 'xAxis' | 'yAxis'> &
+    Pick<
+      AreaProps,
+      | 'type'
+      | 'fillOpacity'
+      | 'transition'
+      | 'transitions'
+      | 'curve'
+      | 'connectNulls'
+      | 'AreaComponent'
+    > &
+    Pick<LineProps, 'strokeWidth' | 'LineComponent'> & {
+      /**
+       * Configuration objects that define how to visualize the data.
+       * Each series supports Area and Line component props for individual customization.
+       */
+      series?: Array<AreaSeries>;
+      /**
+       * 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 [baseline, value] tuples (e.g., `[[0, 10], [0, -5]]`) 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;
+      /**
+       * Whether to show lines on top of the areas.
+       * Useful for stacked contexts to show the outline of each area.
+       */
+      showLines?: boolean;
+      /**
+       * The type of line to render.
+       * @default 'solid'
+       */
+      lineType?: 'solid' | 'dotted';
+      /**
+       * 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, 'series' | 'xAxis' | 'yAxis'> &
+    import('react').RefAttributes<View>
+>;
+//# sourceMappingURL=AreaChart.d.ts.map

package/dts/visualizations/chart/area/AreaChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/area/AreaChart.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,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,MAAM,EAEZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,eAAe,GACf,OAAO,GACP,aAAa,GACb,MAAM,GACN,MAAM,GACN,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,CACF,GACD,OAAO,CACL,IAAI,CACF,SAAS,EACT,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,CACtF,CACF,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,eAAe,GACf,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,GACD,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC,GAAG;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;;;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,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS;IAjDlB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;;;;;;OAOG;cACO,OAAO;IACjB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;OAGG;gBACS,OAAO;IACnB;;;OAGG;eACQ,OAAO,GAAG,QAAQ;IAC7B;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;IACtD;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;kGAiLzD,CAAC"}

package/dts/visualizations/chart/area/DottedArea.d.ts

@@ -0,0 +1,46 @@
+import { type PathProps } from '../Path';
+import type { AreaComponentProps } from './Area';
+export type DottedAreaProps = Pick<
+  PathProps,
+  | 'initialPath'
+  | 'children'
+  | 'stroke'
+  | 'strokeOpacity'
+  | 'strokeWidth'
+  | 'strokeCap'
+  | 'strokeJoin'
+  | 'clipRect'
+  | 'clipPath'
+  | 'clipOffset'
+> &
+  AreaComponentProps & {
+    /**
+     * Size of the pattern unit (width and height).
+     * @default 4
+     */
+    patternSize?: number;
+    /**
+     * Size of the dots within the pattern.
+     * @default 1
+     */
+    dotSize?: number;
+    /**
+     * Opacity at the peak values (top/bottom of gradient).
+     * @note only used when no gradient is provided
+     * @default 1
+     */
+    peakOpacity?: number;
+    /**
+     * Opacity at the baseline (0 or edge closest to 0).
+     * @note only used when no gradient is provided
+     * @default 0
+     */
+    baselineOpacity?: number;
+  };
+/**
+ * A customizable dotted area gradient component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
+export declare const DottedArea: import('react').NamedExoticComponent<DottedAreaProps>;
+//# sourceMappingURL=DottedArea.d.ts.map

package/dts/visualizations/chart/area/DottedArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAK/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACP,aAAa,GACb,UAAU,GACV,QAAQ,GACR,eAAe,GACf,aAAa,GACb,WAAW,GACX,YAAY,GACZ,UAAU,GACV,UAAU,GACV,YAAY,CACf,GACC,kBAAkB,GAAG;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,UAAU,uDAgGtB,CAAC"}

package/dts/visualizations/chart/area/GradientArea.d.ts

@@ -0,0 +1,36 @@
+import { type PathProps } from '../Path';
+import type { AreaComponentProps } from './Area';
+export type GradientAreaProps = Pick<
+  PathProps,
+  | 'initialPath'
+  | 'children'
+  | 'stroke'
+  | 'strokeOpacity'
+  | 'strokeWidth'
+  | 'strokeCap'
+  | 'strokeJoin'
+  | 'clipRect'
+  | 'clipPath'
+  | 'clipOffset'
+> &
+  AreaComponentProps & {
+    /**
+     * Opacity at peak of gradient.
+     * @note only used when no gradient is provided
+     * @default 0.3
+     */
+    peakOpacity?: number;
+    /**
+     * Opacity at the baseline.
+     * @note only used when no gradient is provided
+     * @default 0
+     */
+    baselineOpacity?: number;
+  };
+/**
+ * A customizable gradient area component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
+export declare const GradientArea: import('react').NamedExoticComponent<GradientAreaProps>;
+//# sourceMappingURL=GradientArea.d.ts.map

package/dts/visualizations/chart/area/GradientArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientArea.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/area/GradientArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,SAAS,EACP,aAAa,GACb,UAAU,GACV,QAAQ,GACR,eAAe,GACf,aAAa,GACb,WAAW,GACX,YAAY,GACZ,UAAU,GACV,UAAU,GACV,YAAY,CACf,GACC,kBAAkB,GAAG;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDA+DxB,CAAC"}

package/dts/visualizations/chart/area/SolidArea.d.ts

@@ -0,0 +1,23 @@
+import { type PathProps } from '../Path';
+import type { AreaComponentProps } from './Area';
+export type SolidAreaProps = Pick<
+  PathProps,
+  | 'initialPath'
+  | 'children'
+  | 'stroke'
+  | 'strokeOpacity'
+  | 'strokeWidth'
+  | 'strokeCap'
+  | 'strokeJoin'
+  | 'clipRect'
+  | 'clipPath'
+  | 'clipOffset'
+> &
+  AreaComponentProps;
+/**
+ * A customizable solid area component.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
+ */
+export declare const SolidArea: import('react').NamedExoticComponent<SolidAreaProps>;
+//# sourceMappingURL=SolidArea.d.ts.map

package/dts/visualizations/chart/area/SolidArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidArea.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/area/SolidArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,aAAa,GACb,UAAU,GACV,QAAQ,GACR,eAAe,GACf,aAAa,GACb,WAAW,GACX,YAAY,GACZ,UAAU,GACV,UAAU,GACV,YAAY,CACf,GACC,kBAAkB,CAAC;AAErB;;;;GAIG;AACH,eAAO,MAAM,SAAS,sDAqCrB,CAAC"}

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

@@ -0,0 +1,6 @@
+export * from './Area';
+export * from './AreaChart';
+export * from './DottedArea';
+export * from './GradientArea';
+export * from './SolidArea';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/area/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,174 @@
+import type React from 'react';
+import { type LineComponent } from '../line';
+import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
+import { type AxisBandPlacement } from '../utils';
+/**
+ * Animation transition for axis elements (grid lines, tick marks, tick labels).
+ * Matches web's axisUpdateAnimationTransition timing.
+ */
+export declare const axisUpdateAnimationTransition: {
+  duration: number;
+};
+export type AxisTickLabelComponentProps = Pick<
+  ChartTextProps,
+  | 'x'
+  | 'y'
+  | 'children'
+  | 'dx'
+  | 'dy'
+  | 'font'
+  | 'fontFamilies'
+  | 'fontSize'
+  | 'fontWeight'
+  | 'fontStyle'
+  | 'color'
+  | 'horizontalAlignment'
+  | 'verticalAlignment'
+  | 'opacity'
+>;
+export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
+export type AxisBaseProps = {
+  /**
+   * Placement of grid lines relative to each band.
+   * Options: 'start', 'middle', 'end', 'edges'
+   * @note This property only applies to band scales.
+   * @default 'edges'
+   */
+  bandGridLinePlacement?: AxisBandPlacement;
+  /**
+   * Placement of tick marks relative to each band.
+   * Options: 'start', 'middle', 'end', 'edges'
+   * @note This property only applies to band scales.
+   * @default 'middle'
+   */
+  bandTickMarkPlacement?: AxisBandPlacement;
+  /**
+   * Label text to display for the axis.
+   */
+  label?: string;
+  /**
+   * Gap between the tick labels and the axis label.
+   * @default 4
+   */
+  labelGap?: number;
+  /**
+   * 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 value axes by layout:
+   * - X axis when chart layout is horizontal
+   * - Y axis when chart layout is vertical
+   */
+  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);
+  /**
+   * 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 & {
+  /**
+   * Component to render the grid lines.
+   * @default DottedLine
+   */
+  GridLineComponent?: LineComponent;
+  /**
+   * Component to render the axis line.
+   * @default SolidLine
+   */
+  LineComponent?: LineComponent;
+  /**
+   * Component to render the tick marks.
+   * @default SolidLine
+   */
+  TickMarkLineComponent?: LineComponent;
+  /**
+   * Formatter function for axis tick values.
+   * Tick values will be wrapped in ChartText component.
+   *
+   * @example
+   * // XAxis
+   * tickLabelFormatter: (index) => {
+   *   return `$${prices[index]}`;
+   * }
+   *
+   * @example
+   * // YAxis
+   * tickLabelFormatter: (value) => `$${prices[value]}`
+   */
+  tickLabelFormatter?: (value: number) => ChartTextChildren;
+  /**
+   * Component to render tick labels.
+   * Allows for custom styling and formatting that works cross-platform.
+   *
+   * @example
+   * // Custom tick label component with offset positioning
+   * TickLabelComponent={(props) => (
+   *   <DefaultAxisTickLabel {...props} dx={4} dy={-12} />
+   * )}
+   * @default DefaultAxisTickLabel
+   */
+  TickLabelComponent?: AxisTickLabelComponent;
+};
+//# sourceMappingURL=Axis.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/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,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAmC,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEnF;;;GAGG;AACH,eAAO,MAAM,6BAA6B;;CAEzC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,mBAAmB,GACnB,SAAS,CACZ,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;OAQG;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;;;;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;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC;;;;;;;;;;;;;OAaG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,iBAAiB,CAAC;IAC1D;;;;;;;;;;OAUG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C,CAAC"}

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

@@ -0,0 +1,8 @@
+import type { AxisTickLabelComponentProps } from './Axis';
+export type DefaultAxisTickLabelProps = AxisTickLabelComponentProps;
+/**
+ * DefaultAxisTickLabel is the default label component for axis tick labels.
+ * Provides standard styling for both X and Y axis tick labels.
+ */
+export declare const DefaultAxisTickLabel: import('react').NamedExoticComponent<AxisTickLabelComponentProps>;
+//# sourceMappingURL=DefaultAxisTickLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultAxisTickLabel.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/DefaultAxisTickLabel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,MAAM,MAAM,yBAAyB,GAAG,2BAA2B,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,mEAE/B,CAAC"}