@coinbase/cds-mobile-visualization 3.4.0-beta.1 → 3.4.0-beta.11

package/esm/chart/utils/transition.js

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useAnimatedReaction, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { notifyChange, Skia } from '@shopify/react-native-skia';
+import { interpolatePath } from 'd3-interpolate-path';
+
+/**
+ * Transition for animations.
+ * Supports timing and spring animation types.
+ * Used for paths, positions, opacity, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 10, stiffness: 100 }
+ *
+ * @example
+ * // Timing animation
+ * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
+ */
+
+/**
+ * Default transition configuration used across all chart components.
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120
+};
+
+/**
+ * Duration in milliseconds for accessory elements to fade in.
+ */
+export const accessoryFadeTransitionDuration = 150;
+
+/**
+ * Delay in milliseconds before accessory elements fade in.
+ */
+export 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
+ */
+export const useD3PathInterpolation = (progress, fromPath, toPath) => {
+  // Pre-compute intermediate paths on JS thread using d3-interpolate-path
+  const {
+    fromSkiaPath,
+    i0,
+    i1,
+    toSkiaPath
+  } = useMemo(() => {
+    var _Skia$Path$MakeFromSV, _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
+    const pathInterpolator = interpolatePath(fromPath, toPath);
+    const d = 1e-3;
+    return {
+      fromSkiaPath: (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(fromPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make(),
+      i0: (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(d))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make(),
+      i1: (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - d))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make(),
+      toSkiaPath: (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(toPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make()
+    };
+  }, [fromPath, toPath]);
+  const result = useSharedValue(fromSkiaPath);
+  useAnimatedReaction(() => progress.value, t => {
+    'worklet';
+
+    var _i1$interpolate;
+    result.value = (_i1$interpolate = i1.interpolate(i0, t)) != null ? _i1$interpolate : toSkiaPath;
+    notifyChange(result);
+  }, [fromSkiaPath, i0, i1, toSkiaPath]);
+  return result;
+};
+
+// Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
+/**
+ * @worklet
+ */
+
+export const useInterpolator = (factory, value, interpolator, input, output, options) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = useSharedValue(init);
+  useAnimatedReaction(() => value.value, val => {
+    result.value = interpolator(val, input, output, options, result.value);
+    notifyChange(result);
+  }, [input, output, options]);
+  return result;
+};
+
+/**
+ * Builds a react-native-reanimated animation based on the configuration.
+ *
+ * @param targetValue - The target value to animate to
+ * @param config - The transition configuration
+ * @returns The animation value to assign to a shared value
+ *
+ * @example
+ * // Use directly for animation
+ * progress.value = 0;
+ * progress.value = buildTransition(1, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Coordinate animations
+ * animatedX.value = buildTransition(100, { type: 'spring', damping: 10, stiffness: 100 });
+ * animatedY.value = buildTransition(200, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Timing animation
+ * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
+ */
+export const buildTransition = (targetValue, transition) => {
+  'worklet';
+
+  switch (transition.type) {
+    case 'timing':
+      {
+        return withTiming(targetValue, transition);
+      }
+    case 'spring':
+      {
+        return withSpring(targetValue, transition);
+      }
+    default:
+      {
+        // Fallback to default transition config
+        return withSpring(targetValue, defaultTransition);
+      }
+  }
+};
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @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
+ * @returns Animated SkPath as a shared value
+ *
+ * @example
+ * // Simple path transition
+ * const path = usePathTransition({
+ *   currentPath: d ?? '',
+ *   animate: shouldAnimate,
+ *   transition: { type: 'timing', duration: 3000 }
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const path = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   animate: true,
+ *   transition: { type: 'timing', duration: 300 }
+ * });
+ */
+export const usePathTransition = _ref => {
+  let {
+    currentPath,
+    initialPath,
+    transition = defaultTransition
+  } = _ref;
+  // Track the previous path - updated in useEffect AFTER render,
+  // so during render it naturally holds the "from" path value
+  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const progress = useSharedValue(0);
+
+  // During render: previousPathRef still has old value, currentPath is new
+  const fromPath = previousPathRef.current;
+  const toPath = currentPath;
+  useEffect(() => {
+    const shouldAnimate = previousPathRef.current !== currentPath;
+    if (shouldAnimate) {
+      // Update ref for next path change (happens after this render)
+      previousPathRef.current = currentPath;
+
+      // Animate from old path to new path
+      progress.value = 0;
+      progress.value = buildTransition(1, transition);
+    }
+  }, [currentPath, transition, progress]);
+  return useD3PathInterpolation(progress, fromPath, toPath);
+};

package/esm/sparkline/__stories__/Sparkline.stories.js

@@ -12,8 +12,7 @@ import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScr
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { HStack } from '@coinbase/cds-mobile/layout/HStack';
 import { VStack } from '@coinbase/cds-mobile/layout/VStack';
-import { TextBody } from '@coinbase/cds-mobile/typography/TextBody';
-import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { Sparkline } from '../Sparkline';
 import { SparklineArea } from '../SparklineArea';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,13 +41,15 @@ const SparklineExample = _ref => {
         alignItems: "flex-end",
         justifyContent: "center",
         paddingStart: 2,
-        children: [/*#__PURE__*/_jsx(TextBody, {
+        children: [/*#__PURE__*/_jsx(Text, {
           align: "end",
+          font: "body",
           numberOfLines: 1,
           children: "$2,874.49"
-        }), /*#__PURE__*/_jsx(TextBody, {
+        }), /*#__PURE__*/_jsx(Text, {
           align: "end",
           color: "fgMuted",
+          font: "body",
           numberOfLines: 1,
           children: "+36.08%"
         })]
@@ -61,12 +62,14 @@ const SparklineExample = _ref => {
     }),
     children: /*#__PURE__*/_jsxs(VStack, {
       justifyContent: "center",
-      children: [/*#__PURE__*/_jsx(TextHeadline, {
+      children: [/*#__PURE__*/_jsx(Text, {
         ellipsize: "tail",
+        font: "headline",
         numberOfLines: 1,
         children: name
-      }), /*#__PURE__*/_jsx(TextBody, {
+      }), /*#__PURE__*/_jsx(Text, {
         ellipsize: "tail",
+        font: "body",
         numberOfLines: 1,
         children: symbol
       })]
@@ -84,8 +87,9 @@ const SparklineScalingExample = props => {
   const path = useSparklinePath(_extends({}, dimensions, props));
   const area = useSparklineArea(_extends({}, dimensions, props));
   return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+    children: [/*#__PURE__*/_jsxs(Text, {
       ellipsize: "tail",
+      font: "headline",
       numberOfLines: 1,
       children: ["Scale: ", props.yAxisScalingFactor]
     }), /*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {

package/esm/sparkline/__stories__/SparklineGradient.stories.js

@@ -11,7 +11,7 @@ import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { VStack } from '@coinbase/cds-mobile/layout';
-import { TextBody, TextHeadline } from '@coinbase/cds-mobile/typography';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineArea } from '../SparklineArea';
 import { SparklineGradient } from '../SparklineGradient';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,12 +45,14 @@ const SparklineGradientExample = _ref => {
       }),
       children: /*#__PURE__*/_jsxs(VStack, {
         justifyContent: "center",
-        children: [/*#__PURE__*/_jsx(TextHeadline, {
+        children: [/*#__PURE__*/_jsx(Text, {
           ellipsize: "tail",
+          font: "headline",
           numberOfLines: 1,
           children: name
-        }), /*#__PURE__*/_jsx(TextBody, {
+        }), /*#__PURE__*/_jsx(Text, {
           ellipsize: "tail",
+          font: "body",
           numberOfLines: 1,
           children: symbol
         })]
@@ -75,8 +77,9 @@ const SparklineScalingExample = props => {
   const path = useSparklinePath(_extends({}, dimensions, props));
   const area = useSparklineArea(_extends({}, dimensions, props));
   return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+    children: [/*#__PURE__*/_jsxs(Text, {
       ellipsize: "tail",
+      font: "headline",
       numberOfLines: 1,
       children: ["Scale: ", props.yAxisScalingFactor]
     }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {

package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js

@@ -3,7 +3,7 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { sparklineInteractiveData, sparklineInteractiveHoverData, strokeColor } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Box } from '@coinbase/cds-mobile/layout';
-import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineInteractiveHeader } from '../../sparkline-interactive-header/SparklineInteractiveHeader';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -175,7 +175,8 @@ const SparklineInteractiveScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Default"
@@ -187,7 +188,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Compact"
@@ -200,7 +202,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Disable Scrubbing"
@@ -213,7 +216,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Hide period selector"
@@ -226,7 +230,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Hide min/max label"
@@ -239,7 +244,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Default period All"
@@ -252,7 +258,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fill Disabled"
@@ -265,7 +272,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Y axis scaling"
@@ -278,7 +286,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fallback"
@@ -289,7 +298,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fallback Negative"
@@ -301,7 +311,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fallback Compact"
@@ -313,7 +324,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "No Hover Date"
@@ -326,7 +338,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "With Header Node"
@@ -338,7 +351,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "No padding"
@@ -352,7 +366,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 4,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingY: 3,
           children: "In Container With 4 padding"
         }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
@@ -365,7 +380,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom screen padding 6"
@@ -378,7 +394,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Hover data"
@@ -391,7 +408,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Auto Stoke Color"
@@ -403,7 +421,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom RGB Stoke Color"
@@ -415,7 +434,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom RGBA Stoke Color"
@@ -427,7 +447,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "No Data In SelectedPeriod"
@@ -441,7 +462,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Enable Interaction When Outside"
@@ -454,7 +476,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom Node Header Styles"
@@ -471,7 +494,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Dotted Fill Type"
@@ -484,7 +508,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Y Scale Custom"

package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js

@@ -6,7 +6,7 @@ import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Icon } from '@coinbase/cds-mobile/icons';
 import { Box, HStack } from '@coinbase/cds-mobile/layout';
-import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { useSparklineInteractiveHeaderStyles } from '../useSparklineInteractiveHeaderStyles';
@@ -155,7 +155,8 @@ const HeaderLabel = () => {
       active: true,
       name: "wallet",
       size: "s"
-    }), /*#__PURE__*/_jsx(TextTitle3, {
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "title3",
       children: "CustomHeader"
     })]
   });
@@ -468,7 +469,8 @@ const SparklineInteractiveHeaderScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example"
@@ -480,7 +482,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Trailing"
@@ -493,7 +496,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Custom Label"
@@ -506,7 +510,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with AltHeader"
@@ -518,7 +523,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with Smaller Period Set"
@@ -530,7 +536,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with No Period Set"
@@ -543,7 +550,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Custom Title"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.1",
+  "version": "3.4.0-beta.11",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -16,6 +16,10 @@
       "types": "./dts/index.d.ts",
       "default": "./esm/index.js"
     },
+    "./chart": {
+      "types": "./dts/chart/index.d.ts",
+      "default": "./esm/chart/index.js"
+    },
     "./sparkline": {
       "types": "./dts/sparkline/index.d.ts",
       "default": "./esm/sparkline/index.js"
@@ -32,10 +36,11 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.13.5",
-    "@coinbase/cds-lottie-files": "^3.3.1",
-    "@coinbase/cds-mobile": "^8.13.5",
-    "@coinbase/cds-utils": "^2.3.2",
+    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-lottie-files": "^3.3.4",
+    "@coinbase/cds-mobile": "^8.36.2",
+    "@coinbase/cds-utils": "^2.3.5",
+    "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
     "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.16.2",
@@ -52,11 +57,12 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.13.5",
-    "@coinbase/cds-lottie-files": "^3.3.1",
-    "@coinbase/cds-mobile": "^8.13.5",
-    "@coinbase/cds-utils": "^2.3.2",
+    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-lottie-files": "^3.3.4",
+    "@coinbase/cds-mobile": "^8.36.2",
+    "@coinbase/cds-utils": "^2.3.5",
     "@figma/code-connect": "^1.3.4",
+    "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",
     "react-native-gesture-handler": "2.16.2",
     "react-native-reanimated": "3.14.0",