@coinbase/cds-mobile-visualization 3.4.0-beta.17 → 3.4.0-beta.19

package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts

@@ -1,6 +1,10 @@
 import type { ChartTextProps } from '../text';
 import { type ScrubberLabelPosition } from '../utils/scrubber';
-import type { ScrubberBeaconLabelComponent, ScrubberBeaconLabelProps } from './Scrubber';
+import type {
+  ScrubberBeaconLabelComponent,
+  ScrubberBeaconLabelProps,
+  ScrubberBeaconProps,
+} from './Scrubber';
 export type ScrubberBeaconLabelGroupBaseProps = {
   /**
    * Labels to be displayed.
@@ -33,6 +37,10 @@ export type ScrubberBeaconLabelGroupProps = ScrubberBeaconLabelGroupBaseProps &
    * @default DefaultScrubberBeaconLabel
    */
   BeaconLabelComponent?: ScrubberBeaconLabelComponent;
+  /**
+   * Transition configuration for beacon label animations.
+   */
+  transitions?: ScrubberBeaconProps['transitions'];
 };
 export declare const ScrubberBeaconLabelGroup: import('react').NamedExoticComponent<ScrubberBeaconLabelGroupProps>;
 //# sourceMappingURL=ScrubberBeaconLabelGroup.d.ts.map

package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AA2DzF,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAuLpC,CAAC"}
+{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAS3B,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AA4EpB,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAoMpC,CAAC"}

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

@@ -1,3 +1,37 @@
+import { type Transition } from './transition';
+/**
+ * A bar-specific transition that extends Transition with stagger support.
+ * When `staggerDelay` is provided, bars will animate with increasing delays
+ * based on their horizontal position (leftmost starts first, rightmost last).
+ *
+ * @example
+ * // Bars stagger in from left to right over 250ms, each animating for 750ms
+ * { type: 'timing', duration: 750, staggerDelay: 250 }
+ */
+export type BarTransition = Transition & {
+  /**
+   * Maximum stagger delay (ms) distributed across bars by x position.
+   * Leftmost bar starts immediately, rightmost starts after this delay.
+   */
+  staggerDelay?: number;
+};
+/**
+ * Strips `staggerDelay` from a transition and computes a positional delay.
+ *
+ * @param transition - The transition config (may include staggerDelay)
+ * @param normalizedX - The bar's normalized x position (0 = left edge, 1 = right edge)
+ * @returns A standard Transition with computed delay
+ */
+export declare const withStaggerDelayTransition: (
+  transition: BarTransition,
+  normalizedX: number,
+) => Transition;
+/**
+ * Default bar enter transition. Uses the default spring with a stagger delay
+ * so bars spring into place from left to right.
+ * `{ type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }`
+ */
+export declare const defaultBarEnterTransition: BarTransition;
 /**
  * Calculates the size adjustment needed for bars when accounting for gaps between them.
  * This function helps determine how much to reduce each bar's width to accommodate

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

@@ -1 +1 @@
-{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAM9E"}
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAElE;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IACvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,GACrC,YAAY,aAAa,EACzB,aAAa,MAAM,KAClB,UAOF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,aAGvC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAM9E"}

package/dts/chart/utils/path.d.ts

@@ -1,4 +1,10 @@
 import { type ChartScaleFunction } from './scale';
+import type { Transition } from './transition';
+/**
+ * Default enter transition for path-based components (Line, Area).
+ * `{ type: 'timing', duration: 500 }`
+ */
+export declare const defaultPathEnterTransition: Transition;
 export type ChartPathCurveType =
   | 'bump'
   | 'catmullRom'

package/dts/chart/utils/path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/path.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,MAAM,GACN,YAAY,GACZ,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAO,kBAA6B,oCAsBxE,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoFH,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,MAE3E,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,MAAM,EACT,GAAG,MAAM,EACT,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,UAAU,OAAO,EACjB,aAAa,OAAO,KACnB,MA0BF,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAC5B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/D,aAAa,MAAM,EACnB,SAAS,MAAM,KACd,MAgCF,CAAC"}
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/path.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,0BAA0B,EAAE,UAGxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,MAAM,GACN,YAAY,GACZ,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAO,kBAA6B,oCAsBxE,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoFH,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,MAE3E,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,MAAM,EACT,GAAG,MAAM,EACT,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,UAAU,OAAO,EACjB,aAAa,OAAO,KACnB,MA0BF,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAC5B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/D,aAAa,MAAM,EACnB,SAAS,MAAM,KACd,MAgCF,CAAC"}

package/dts/chart/utils/transition.d.ts

@@ -18,17 +18,33 @@ import { type SkPath } from '@shopify/react-native-skia';
  * // Timing animation
  * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
  */
-export type Transition =
+export type Transition = (
   | ({
       type: 'timing';
     } & WithTimingConfig)
   | ({
       type: 'spring';
-    } & WithSpringConfig);
+    } & WithSpringConfig)
+) & {
+  /**
+   * Delay in milliseconds (ms) before the animation starts.
+   *
+   * @example
+   * // Wait 2 seconds before animating
+   * { type: 'timing', duration: 500, delay: 2000 }
+   */
+  delay?: number;
+};
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
  */
 export declare const defaultTransition: Transition;
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export declare const instantTransition: Transition;
 /**
  * Duration in milliseconds for accessory elements to fade in.
  */
@@ -38,19 +54,20 @@ export declare const accessoryFadeTransitionDuration = 150;
  */
 export declare const accessoryFadeTransitionDelay = 350;
 /**
- * Custom hook that uses d3-interpolate-path for more robust path interpolation.
- * then use Skia's native interpolation in the worklet.
- *
- * @param progress - Shared value between 0 and 1
- * @param fromPath - Starting path as SVG string
- * @param toPath - Ending path as SVG string
- * @returns Interpolated SkPath as a shared value
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
  */
-export declare const useD3PathInterpolation: (
-  progress: SharedValue<number>,
-  fromPath: string,
-  toPath: string,
-) => SharedValue<SkPath>;
+export declare const defaultAccessoryEnterTransition: Transition;
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export declare const getTransition: (
+  value: Transition | null | undefined,
+  animate: boolean,
+  defaultValue: Transition,
+) => Transition;
 /**
  * @worklet
  */
@@ -96,15 +113,16 @@ export declare const buildTransition: (targetValue: number, transition: Transiti
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns Animated SkPath as a shared value
  *
  * @example
  * // Simple path transition
  * const path = usePathTransition({
  *   currentPath: d ?? '',
- *   animate: shouldAnimate,
- *   transition: { type: 'timing', duration: 3000 }
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
  * });
  *
  * @example
@@ -112,13 +130,16 @@ export declare const buildTransition: (targetValue: number, transition: Transiti
  * const path = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   animate: true,
- *   transition: { type: 'timing', duration: 300 }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
  * });
  */
 export declare const usePathTransition: ({
   currentPath,
   initialPath,
+  transitions,
   transition,
 }: {
   /**
@@ -132,7 +153,24 @@ export declare const usePathTransition: ({
    */
   initialPath?: string;
   /**
-   * Transition configuration
+   * Transition configuration for enter and update animations.
+   */
+  transitions?: {
+    /**
+     * Transition for the initial enter animation (initialPath → currentPath).
+     * Only used when `initialPath` is provided.
+     * If not provided, falls back to `update`.
+     */
+    enter?: Transition;
+    /**
+     * Transition for subsequent data update animations.
+     * @default defaultTransition
+     */
+    update?: Transition;
+  };
+  /**
+   * Transition for updates.
+   * @deprecated Use `transitions.update` instead.
    */
   transition?: Transition;
 }) => SharedValue<SkPath>;

package/dts/chart/utils/transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAIhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,CAAC,MAAM,CAAC,EAC7B,UAAU,MAAM,EAChB,QAAQ,MAAM,KACb,WAAW,CAAC,MAAM,CA2BpB,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,KAAG,MAc7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,GAAI,2CAI/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAwBrB,CAAC"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAKhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,CACrB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAC1C,GAAG;IACF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAGF,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,KAAG,MAyB7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAoErB,CAAC"}

package/esm/chart/Path.js

@@ -1,11 +1,12 @@
-const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transition"],
-  _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transition"];
+const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions"],
+  _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useEffect, useMemo } from 'react';
-import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { Group, Path as SkiaPath, Skia, usePathInterpolation } from '@shopify/react-native-skia';
-import { usePathTransition } from './utils/transition';
+import { defaultPathEnterTransition } from './utils/path';
+import { buildTransition, defaultTransition, getTransition, usePathTransition } from './utils/transition';
 import { useCartesianChartContext } from './ChartProvider';
 import { unwrapAnimatedValue } from './utils';
 
@@ -26,17 +27,14 @@ const AnimatedPath = /*#__PURE__*/memo(_ref => {
       strokeCap,
       strokeJoin,
       children,
-      transition
+      transitions
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const isDAnimated = typeof d !== 'string';
-
-  // When d is animated, usePathTransition handles static path transitions.
-  // For animated d values, we skip usePathTransition and use useDerivedValue directly.
   const animatedPath = usePathTransition({
     currentPath: isDAnimated ? '' : d,
     initialPath,
-    transition
+    transitions
   });
   const isFilled = fill !== undefined && fill !== 'none';
   const isStroked = stroke !== undefined && stroke !== 'none';
@@ -84,12 +82,16 @@ export const Path = /*#__PURE__*/memo(props => {
       strokeCap,
       strokeJoin,
       children,
+      transitions,
       transition
     } = props,
     pathProps = _objectWithoutPropertiesLoose(props, _excluded2);
   const context = useCartesianChartContext();
   const rect = clipRect != null ? clipRect : context.drawingArea;
   const animate = animateProp != null ? animateProp : context.animate;
+  const isReady = !!context.getXScale();
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
+  const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
 
   // The clip offset provides extra padding to prevent path from being cut off
   // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
@@ -97,15 +99,11 @@ export const Path = /*#__PURE__*/memo(props => {
 
   // Animation progress for clip path reveal
   const clipProgress = useSharedValue(animate ? 0 : 1);
-
-  // Trigger clip path animation when component mounts and animate is true
   useEffect(() => {
-    if (animate) {
-      clipProgress.value = withTiming(1, {
-        duration: pathEnterTransitionDuration
-      });
+    if (animate && isReady) {
+      clipProgress.value = buildTransition(1, enterTransition);
     }
-  }, [animate, clipProgress]);
+  }, [animate, isReady, clipProgress, enterTransition]);
 
   // Create initial and target clip paths for animation
   const {
@@ -200,7 +198,10 @@ export const Path = /*#__PURE__*/memo(props => {
     strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
     strokeWidth: strokeWidth,
-    transition: transition,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    },
     children: children
   });
 

package/esm/chart/__stories__/CartesianChart.stories.js

@@ -7,7 +7,7 @@ import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScr
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
 import { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, Group, Skia } from '@shopify/react-native-skia';
+import { Circle, Group } from '@shopify/react-native-skia';
 import { Area } from '../area/Area';
 import { XAxis, YAxis } from '../axis';
 import { BarPlot } from '../bar/BarPlot';
@@ -485,80 +485,6 @@ function TradingTrends() {
     })]
   });
 }
-const UVGradient = {
-  axis: 'y',
-  stops: [{
-    offset: 0,
-    color: 'green'
-  }, {
-    offset: 3,
-    color: 'yellow'
-  }, {
-    offset: 5,
-    color: 'orange'
-  }, {
-    offset: 8,
-    color: 'red'
-  }, {
-    offset: 10,
-    color: 'purple'
-  }]
-};
-const PreviousData = /*#__PURE__*/memo(_ref0 => {
-  let {
-    children,
-    currentHour,
-    clipOffset = 0
-  } = _ref0;
-  // we will clip the data to the current hour
-  const {
-    drawingArea,
-    getXScale
-  } = useCartesianChartContext();
-  const xScale = getXScale();
-  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
-  const clipPath = useMemo(() => {
-    if (!xScale || currentHourX === undefined) return null;
-
-    // Create a rectangle from top-left of drawing area to currentHourX on the right
-    // Apply clipOffset to left, top, and bottom edges only (NOT to currentHourX)
-    const pathString = "M " + (drawingArea.x - clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + (drawingArea.x - clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
-    return Skia.Path.MakeFromSVGString(pathString);
-  }, [xScale, currentHourX, drawingArea, clipOffset]);
-  if (!clipPath) return null;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    opacity: 0.75,
-    children: children
-  });
-});
-const FutureData = /*#__PURE__*/memo(_ref1 => {
-  let {
-    children,
-    currentHour,
-    clipOffset = 0
-  } = _ref1;
-  // we will clip the data from the current hour to the right edge
-  const {
-    drawingArea,
-    getXScale
-  } = useCartesianChartContext();
-  const xScale = getXScale();
-  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
-  const clipPath = useMemo(() => {
-    if (!xScale || currentHourX === undefined) return null;
-
-    // Create a rectangle from currentHourX to right edge of drawing area
-    // Apply clipOffset to top, bottom, and right, but NOT left (currentHourX)
-    const pathString = "M " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
-    return Skia.Path.MakeFromSVGString(pathString);
-  }, [xScale, currentHourX, drawingArea, clipOffset]);
-  if (!clipPath) return null;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    children: children
-  });
-});
 const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
   const theme = useTheme();
   const dataPoints = useMemo(() => [{
@@ -642,13 +568,13 @@ const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
   const yMax = Math.max(...yValues);
 
   // Custom label component that places labels to the top-right
-  const TopRightPointLabel = useCallback(_ref10 => {
+  const TopRightPointLabel = useCallback(_ref0 => {
     let {
       x,
       y,
       offset = 0,
       children
-    } = _ref10;
+    } = _ref0;
     return /*#__PURE__*/_jsx(ChartText, {
       font: "label1",
       fontWeight: 600,