@coinbase/cds-mobile-visualization 3.4.0-beta.20 → 3.4.0-beta.22

package/CHANGELOG.md

@@ -8,6 +8,20 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.22 (3/4/2026 PST)
+
+#### 🚀 Updates
+
+- Improve PeriodSelector types. [[#464](https://github.com/coinbase/cds/pull/464)]
+- Skip null path transitions. [[#464](https://github.com/coinbase/cds/pull/464)]
+- Fix path transition on incompatible paths. [[#464](https://github.com/coinbase/cds/pull/464)]
+
+## 3.4.0-beta.21 (3/2/2026 PST)
+
+#### 🚀 Updates
+
+- Fix issues with animations that spread props. [[#463](https://github.com/coinbase/cds/pull/463)]
+
 ## 3.4.0-beta.20 (2/27/2026 PST)
 
 #### 🚀 Updates

package/dts/chart/Path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAI5B;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;CACjB,CAAC;AA0EJ,eAAO,MAAM,IAAI,iDAyKf,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAI5B;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;CACjB,CAAC;AAqEJ,eAAO,MAAM,IAAI,iDA2Kf,CAAC"}

package/dts/chart/PeriodSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
 import { type SegmentedTabsProps, type TabsActiveIndicatorProps } from '@coinbase/cds-mobile/tabs';
 import { type TextBaseProps } from '@coinbase/cds-mobile/typography';
 export declare const PeriodSelectorActiveIndicator: ({
@@ -62,17 +62,29 @@ export declare const LiveTabLabel: React.MemoExoticComponent<
     } & React.RefAttributes<View>
   >
 >;
-export type PeriodSelectorProps = Omit<SegmentedTabsProps, 'styles'> &
-  Pick<SegmentedTabsProps, 'styles'>;
+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.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    Omit<SegmentedTabsProps, 'styles'> &
-      Pick<SegmentedTabsProps, 'styles'> &
-      React.RefAttributes<any>
+    Partial<
+      Pick<
+        import('@coinbase/cds-mobile/tabs').TabsProps<string>,
+        'TabComponent' | 'TabsActiveIndicatorComponent'
+      >
+    > &
+      Omit<
+        import('@coinbase/cds-mobile/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/chart/PeriodSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,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;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,GAClE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,cAAc,gKA0B1B,CAAC"}
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,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;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YApIwD,CAAC;WACjC,CAAC;uBACoB,CAAC;;8BA4JxE,CAAC"}

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

@@ -8,10 +8,22 @@ export type AreaSeries = Series &
   Partial<
     Pick<
       AreaProps,
-      'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'fill' | 'connectNulls' | 'transition'
+      | 'AreaComponent'
+      | 'curve'
+      | 'fillOpacity'
+      | 'type'
+      | 'fill'
+      | 'connectNulls'
+      | 'transition'
+      | 'transitions'
     >
   > &
-  Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>> & {
+  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.
@@ -22,7 +34,13 @@ export type AreaSeries = Series &
 export type AreaChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
   Pick<
     AreaProps,
-    'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'connectNulls' | 'transition'
+    | 'AreaComponent'
+    | 'curve'
+    | 'fillOpacity'
+    | 'type'
+    | 'connectNulls'
+    | 'transition'
+    | 'transitions'
   > &
   Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
     /**
@@ -77,7 +95,13 @@ export declare const AreaChart: import('react').MemoExoticComponent<
     Omit<CartesianChartBaseProps, 'series' | 'xAxis' | 'yAxis'> &
       Pick<
         AreaProps,
-        'type' | 'transition' | 'curve' | 'connectNulls' | 'fillOpacity' | 'AreaComponent'
+        | 'type'
+        | 'transitions'
+        | 'transition'
+        | 'curve'
+        | 'connectNulls'
+        | 'fillOpacity'
+        | 'AreaComponent'
       > &
       Pick<LineProps, 'strokeWidth' | 'LineComponent'> & {
         /**

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

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/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,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACT,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CAC5F,CACF,GACD,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,GAAG;IACjF;;;;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,EACT,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CACnF,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,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,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,eAAe,CAAC,GAAG,UAAU;IAC7C;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;mGAkLhD,CAAC"}
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/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,eAAe,EAIpB,KAAK,MAAM,EACZ,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,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,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,eAAe,CAAC,GAAG,UAAU;IAC7C;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;mGAoLhD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/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,uDA0EtB,CAAC"}
+{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/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,uDAgFtB,CAAC"}

package/dts/chart/line/Line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/chart/line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EACL,KAAK,kBAAkB,EAGvB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,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,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EACH,OAAO,GACP,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,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,QAAQ,GAAG,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CACnG,GACC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC1C;;OAEG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCA+LhB,CAAC"}
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/chart/line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EACL,KAAK,kBAAkB,EAGvB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,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,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EACH,OAAO,GACP,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,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,QAAQ,GAAG,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CACnG,GACC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC1C;;OAEG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCAqMhB,CAAC"}

package/dts/chart/line/LineChart.d.ts

@@ -22,6 +22,7 @@ export type LineSeries = Series &
       | 'points'
       | 'connectNulls'
       | 'transition'
+      | 'transitions'
     >
   >;
 export type LineChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
@@ -38,6 +39,7 @@ export type LineChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis'
     | 'strokeOpacity'
     | 'connectNulls'
     | 'transition'
+    | 'transitions'
     | 'opacity'
   > & {
     /**
@@ -76,6 +78,7 @@ export declare const LineChart: import('react').MemoExoticComponent<
         | 'type'
         | 'opacity'
         | 'strokeWidth'
+        | 'transitions'
         | 'transition'
         | 'curve'
         | 'connectNulls'

package/dts/chart/line/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/chart/line/LineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,eAAe,EAAoC,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAE/F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,OAAO,GACP,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,eAAe,GACf,eAAe,GACf,QAAQ,GACR,aAAa,GACb,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CACf,CACF,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,eAAe,GACf,OAAO,GACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,cAAc,GACd,YAAY,GACZ,SAAS,CACZ,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS;IA9BlB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;IAC7C;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;mGA8HhD,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/chart/line/LineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,eAAe,EAAoC,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAE/F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,OAAO,GACP,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,eAAe,GACf,eAAe,GACf,QAAQ,GACR,aAAa,GACb,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,CACF,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,eAAe,GACf,OAAO,GACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,cAAc,GACd,YAAY,GACZ,aAAa,GACb,SAAS,CACZ,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS;IA9BlB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;IAC7C;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;mGAgIhD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;aAyCN,CAAC;cAId,CAAC;aAMe,CAAC;wBAGuD,CAAC;;;IAlEtF;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAiMrB,CAAC"}
+{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;aA2CxB,CAAC;cAEyB,CAAC;aAO/B,CAAC;wBAGW,CAAC;;;IAnEjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAiMrB,CAAC"}

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

@@ -23,9 +23,9 @@ export type BarTransition = Transition & {
  * @returns A standard Transition with computed delay
  */
 export declare const withStaggerDelayTransition: (
-  transition: BarTransition,
+  transition: BarTransition | null,
   normalizedX: number,
-) => Transition;
+) => Transition | null;
 /**
  * Default bar enter transition. Uses the default spring with a stagger delay
  * so bars spring into place from left to right.

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,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"}
+{"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,GAAG,IAAI,EAChC,aAAa,MAAM,KAClB,UAAU,GAAG,IAQf,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/transition.d.ts

@@ -67,7 +67,7 @@ export declare const getTransition: (
   value: Transition | null | undefined,
   animate: boolean,
   defaultValue: Transition,
-) => Transition;
+) => Transition | null;
 /**
  * @worklet
  */
@@ -107,7 +107,10 @@ export declare const useInterpolator: <T>(
  * // Timing animation
  * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
  */
-export declare const buildTransition: (targetValue: number, transition: Transition) => number;
+export declare const buildTransition: (
+  targetValue: number,
+  transition: Transition | null,
+) => number;
 /**
  * Hook for path animation state and transitions.
  *
@@ -161,12 +164,12 @@ export declare const usePathTransition: ({
      * Only used when `initialPath` is provided.
      * If not provided, falls back to `update`.
      */
-    enter?: Transition;
+    enter?: Transition | null;
     /**
      * Transition for subsequent data update animations.
      * @default defaultTransition
      */
-    update?: Transition;
+    update?: Transition | null;
   };
   /**
    * Transition for updates.

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,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"}
+{"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;AAOF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,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,GAAG,IAAI,KAAG,MA4BpF,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,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAkFrB,CAAC"}

package/esm/chart/Path.js

@@ -92,18 +92,19 @@ export const Path = /*#__PURE__*/memo(props => {
   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]);
+  const shouldAnimateClip = animate && enterTransition !== null;
 
   // 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
   const totalOffset = clipOffset * 2; // Applied on both sides
 
   // Animation progress for clip path reveal
-  const clipProgress = useSharedValue(animate ? 0 : 1);
+  const clipProgress = useSharedValue(shouldAnimateClip ? 0 : 1);
   useEffect(() => {
-    if (animate && isReady) {
+    if (shouldAnimateClip && isReady) {
       clipProgress.value = buildTransition(1, enterTransition);
     }
-  }, [animate, isReady, clipProgress, enterTransition]);
+  }, [shouldAnimateClip, isReady, clipProgress, enterTransition]);
 
   // Create initial and target clip paths for animation
   const {
@@ -139,7 +140,7 @@ export const Path = /*#__PURE__*/memo(props => {
   }, [rect, clipOffset, totalOffset]);
 
   // Use usePathInterpolation for animated clip path
-  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animate && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
+  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], shouldAnimateClip && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
 
   // Resolve the final clip path:
   // 1. If clipPath prop was explicitly provided, use it (even if null = no clipping)
@@ -152,13 +153,13 @@ export const Path = /*#__PURE__*/memo(props => {
     }
 
     // If not animating or paths are null, return target clip path
-    if (!animate || !targetClipPath) {
+    if (!shouldAnimateClip || !targetClipPath) {
       return targetClipPath;
     }
 
     // Return undefined here since we'll use animatedClipPath directly
     return undefined;
-  }, [clipPathProp, animate, targetClipPath]);
+  }, [clipPathProp, shouldAnimateClip, targetClipPath]);
 
   // Convert SVG path string to SkPath for static rendering
   const staticPath = useDerivedValue(() => {
@@ -206,7 +207,7 @@ export const Path = /*#__PURE__*/memo(props => {
   });
 
   // Determine which clip path to use
-  const finalClipPath = animate && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+  const finalClipPath = shouldAnimateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
 
   // If finalClipPath is null, render without clipping
   if (finalClipPath === null) {

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

@@ -5,7 +5,7 @@ import { IconButton } from '@coinbase/cds-mobile/buttons/IconButton';
 import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
 import { Text } from '@coinbase/cds-mobile/typography';
-import { Area } from '../area/Area';
+import { AreaChart } from '../area/AreaChart';
 import { BarChart } from '../bar/BarChart';
 import { CartesianChart } from '../CartesianChart';
 import { Line } from '../line/Line';
@@ -143,8 +143,9 @@ const TransitionAreaChart = /*#__PURE__*/memo(_ref2 => {
     idlePulse,
     scrubberRef
   } = _ref2;
-  return /*#__PURE__*/_jsxs(CartesianChart, {
+  return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
+    showLines: true,
     height: 200,
     inset: {
       top: 16,
@@ -156,18 +157,13 @@ const TransitionAreaChart = /*#__PURE__*/memo(_ref2 => {
       id: 'values',
       data
     }],
-    children: [/*#__PURE__*/_jsx(Area, {
-      seriesId: "values",
-      transitions: transitions
-    }), /*#__PURE__*/_jsx(Line, {
-      seriesId: "values",
-      transitions: transitions
-    }), /*#__PURE__*/_jsx(Scrubber, {
+    transitions: transitions,
+    children: /*#__PURE__*/_jsx(Scrubber, {
       ref: scrubberRef,
       hideOverlay: true,
       idlePulse: idlePulse,
       transitions: transitions
-    })]
+    })
   });
 });
 const MultiLineChart = /*#__PURE__*/memo(_ref3 => {

package/esm/chart/area/AreaChart.js

@@ -1,8 +1,8 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "transitions", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId"],
-  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType"];
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type"];
 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 { forwardRef, memo, useMemo } from 'react';
@@ -22,6 +22,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       type,
       connectNulls,
       transition,
+      transitions,
       LineComponent,
       strokeWidth,
       showXAxis,
@@ -128,13 +129,14 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         fillOpacity: fillOpacity,
         seriesId: id,
         transition: transition,
+        transitions: transitions,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series == null ? void 0 : series.map(_ref5 => {
       let {
-          id,
+          id
+
           // Area type (don't pass to Line)
-          lineType: seriesLineType
         } = _ref5,
         otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _extends({
@@ -144,7 +146,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         seriesId: id,
         strokeWidth: strokeWidth,
         transition: transition,
-        type: seriesLineType != null ? seriesLineType : lineType
+        transitions: transitions,
+        type: lineType
       }, otherPropsFromSeries), id);
     })), children]
   }));

package/esm/chart/area/DottedArea.js

@@ -3,13 +3,13 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group, Skia } from '@shopify/react-native-skia';
+import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { createGradient, getBaseline } from '../utils';
 import { getDottedAreaPath } from '../utils/path';
-import { usePathTransition } from '../utils/transition';
+import { defaultTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A customizable dotted area gradient component.
@@ -38,8 +38,12 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
     animate,
     getYAxis
   } = useCartesianChartContext();
+  const shouldAnimate = animateProp != null ? animateProp : animate;
   const yAxisConfig = getYAxis(yAxisId);
   const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const updateTransition = useMemo(() => {
+    return (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition !== undefined ? transition : defaultTransition;
+  }, [transitions == null ? void 0 : transitions.update, transition]);
   const dottedPath = useMemo(() => {
     if (!drawingArea) return '';
     return getDottedAreaPath({
@@ -49,27 +53,24 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       height: drawingArea.height
     }, patternSize, dotSize);
   }, [drawingArea, patternSize, dotSize]);
-  const animatedClipPath = usePathTransition({
+  const clipPath = usePathTransition({
     currentPath: d,
     transitions: {
-      update: transition
+      update: shouldAnimate ? updateTransition : null
     }
   });
-  const staticClipPath = useMemo(() => {
-    var _Skia$Path$MakeFromSV;
-    if (!d) return;
-    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined;
-  }, [d]);
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
     if (!yAxisConfig) return;
     const baselineValue = getBaseline(yAxisConfig.domain, baseline);
     return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
   }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+
+  // Update transition is used for clip path, we skip update animation on Path itself
   return /*#__PURE__*/_jsx(Group, {
-    clip: animate ? animatedClipPath : staticClipPath,
+    clip: clipPath,
     children: /*#__PURE__*/_jsx(Path, _extends({
-      animate: animateProp != null ? animateProp : animate,
+      animate: shouldAnimate,
       d: dottedPath,
       fill: fill,
       transition: transition,

package/esm/chart/line/Line.js

@@ -150,7 +150,8 @@ export const Line = /*#__PURE__*/memo(_ref => {
         // If points is true, render with defaults
         if (points === true) {
           return /*#__PURE__*/_jsx(Point, _extends({
-            transition: transition
+            transition: transition,
+            transitions: transitions
           }, defaults), seriesId + "-" + xValue);
         }
 
@@ -159,7 +160,8 @@ export const Line = /*#__PURE__*/memo(_ref => {
         if (!result) return;
         const pointConfig = result === true ? {} : result;
         return /*#__PURE__*/_jsx(Point, _extends({
-          transition: transition
+          transition: transition,
+          transitions: transitions
         }, defaults, pointConfig), seriesId + "-" + xValue);
       })
     })]

package/esm/chart/line/LineChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children"],
+const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded4 = ["id", "data", "label", "color", "yAxisId"];
@@ -25,6 +25,7 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       strokeOpacity,
       connectNulls,
       transition,
+      transitions,
       opacity,
       showXAxis,
       showYAxis,
@@ -97,7 +98,6 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
       axisId: yAxisId
     }, yAxisVisualProps)), series == null ? void 0 : series.map(_ref4 => {
-      var _linePropsFromSeries$;
       let {
           id
         } = _ref4,
@@ -114,7 +114,8 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         showArea: showArea,
         strokeOpacity: strokeOpacity,
         strokeWidth: strokeWidth,
-        transition: (_linePropsFromSeries$ = linePropsFromSeries.transition) != null ? _linePropsFromSeries$ : transition,
+        transition: transition,
+        transitions: transitions,
         type: type
       }, linePropsFromSeries), id);
     }), children]

package/esm/chart/utils/bar.js

@@ -22,6 +22,7 @@ import { defaultTransition } from './transition';
  */
 export const withStaggerDelayTransition = (transition, normalizedX) => {
   var _baseTransition$delay;
+  if (!transition) return null;
   const {
       staggerDelay
     } = transition,

package/esm/chart/utils/transition.js

@@ -1,5 +1,3 @@
-const _excluded = ["delay"];
-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 { useEffect, useMemo, useRef } from 'react';
 import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
 import { notifyChange, Skia } from '@shopify/react-native-skia';
@@ -58,13 +56,18 @@ export const defaultAccessoryEnterTransition = {
   delay: accessoryFadeTransitionDelay
 };
 
+// Avoid exact endpoint samples, which can intermittently produce non-interpolatable
+// path pairs for SkPath.interpolate on complex morphs.
+// See https://github.com/wcandillon/can-it-be-done-in-react-native/blob/db8d6ee7024e37e8f8d2cb237c0b953b5fc766fe/season5/src/Headspace/Play.tsx
+const pathInterpolationEpsilon = 1e-3;
+
 /**
  * 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 const getTransition = (value, animate, defaultValue) => {
-  if (!animate || value === null) return instantTransition;
+  if (!animate || value === null) return null;
   return value != null ? value : defaultValue;
 };
 
@@ -108,20 +111,18 @@ export const useInterpolator = (factory, value, interpolator, input, output, opt
 export const buildTransition = (targetValue, transition) => {
   'worklet';
 
-  const {
-      delay: delayMs
-    } = transition,
-    config = _objectWithoutPropertiesLoose(transition, _excluded);
+  if (transition === null) return targetValue;
+  const delayMs = transition.delay;
   let animation;
-  switch (config.type) {
+  switch (transition.type) {
     case 'timing':
       {
-        animation = withTiming(targetValue, config);
+        animation = withTiming(targetValue, transition);
         break;
       }
     case 'spring':
       {
-        animation = withSpring(targetValue, config);
+        animation = withSpring(targetValue, transition);
         break;
       }
     default:
@@ -165,14 +166,14 @@ export const buildTransition = (targetValue, transition) => {
  * });
  */
 export const usePathTransition = _ref => {
-  var _transitions$update, _Skia$Path$MakeFromSV;
+  var _Skia$Path$MakeFromSV;
   let {
     currentPath,
     initialPath,
     transitions,
     transition = defaultTransition
   } = _ref;
-  const updateTransition = (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition;
+  const updateTransition = (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
   const enterTransition = transitions == null ? void 0 : transitions.enter;
   const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
   const isFirstAnimation = useRef(!!initialPath);
@@ -185,24 +186,36 @@ export const usePathTransition = _ref => {
   const result = useSharedValue(initialSkiaPath);
   useEffect(() => {
     if (targetPathRef.current !== currentPath) {
-      var _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
+      var _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4, _Skia$Path$MakeFromSV5;
       let fromPath = targetPathRef.current;
       if (interpolatorRef.current) {
         const p = Math.min(Math.max(progress.value, 0), 1);
         fromPath = interpolatorRef.current(p);
       }
       targetPathRef.current = currentPath;
-      const pathInterpolator = interpolatePath(fromPath, currentPath);
-      interpolatorRef.current = pathInterpolator;
-      normalizedStartShared.value = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(0))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
-      normalizedEndShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
-      fallbackPathShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
       const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
       isFirstAnimation.current = false;
+      if (activeTransition === null) {
+        var _Skia$Path$MakeFromSV2;
+        const targetPath = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+        interpolatorRef.current = null;
+        normalizedStartShared.value = targetPath;
+        normalizedEndShared.value = targetPath;
+        fallbackPathShared.value = targetPath;
+        progress.value = 1;
+        result.value = targetPath;
+        notifyChange(result);
+        return;
+      }
+      const pathInterpolator = interpolatePath(fromPath, currentPath);
+      interpolatorRef.current = pathInterpolator;
+      normalizedStartShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+      normalizedEndShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+      fallbackPathShared.value = (_Skia$Path$MakeFromSV5 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV5 : Skia.Path.Make();
       progress.value = 0;
       progress.value = buildTransition(1, activeTransition);
     }
-  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared]);
+  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
   useAnimatedReaction(() => ({
     p: progress.value,
     to: fallbackPathShared.value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.20",
+  "version": "3.4.0-beta.22",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",