@coinbase/cds-mobile-visualization 3.4.0-beta.4 → 3.4.0-beta.6

package/esm/chart/utils/transition.js

@@ -0,0 +1,221 @@
+const _excluded = ["type"],
+  _excluded2 = ["type"],
+  _excluded3 = ["type"];
+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, 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':
+      {
+        const timingConfig = _objectWithoutPropertiesLoose(transition, _excluded);
+        return withTiming(targetValue, timingConfig);
+      }
+    case 'spring':
+      {
+        const springConfig = _objectWithoutPropertiesLoose(transition, _excluded2);
+        return withSpring(targetValue, springConfig);
+      }
+    default:
+      {
+        // Fallback to default transition config
+        const springConfig = _objectWithoutPropertiesLoose(defaultTransition, _excluded3);
+        return withSpring(targetValue, springConfig);
+      }
+  }
+};
+
+/**
+ * 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;
+  const isInitialRender = useRef(true);
+  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const targetPathRef = useRef(currentPath);
+  const progress = useSharedValue(0);
+  const {
+    fromPath,
+    toPath
+  } = useMemo(() => {
+    const isNewPath = targetPathRef.current !== currentPath;
+    if (!isNewPath) {
+      return {
+        fromPath: previousPathRef.current,
+        toPath: targetPathRef.current
+      };
+    }
+    const currentProgress = progress.value;
+    const isInterrupting = currentProgress > 0 && currentProgress < 1;
+    if (isInterrupting) {
+      // Animation was interrupted - capture current interpolated path
+      const pathInterpolator = interpolatePath(previousPathRef.current, targetPathRef.current);
+      const currentInterpolatedPath = pathInterpolator(currentProgress);
+      return {
+        fromPath: currentInterpolatedPath,
+        toPath: currentPath
+      };
+    }
+
+    // Normal transition (from completed position to new target)
+    const startPath = isInitialRender.current && initialPath ? initialPath : targetPathRef.current;
+    return {
+      fromPath: startPath,
+      toPath: currentPath
+    };
+  }, [currentPath, initialPath, progress]);
+  useEffect(() => {
+    const isPathChange = targetPathRef.current !== currentPath;
+    const isInitialAnimation = isInitialRender.current && initialPath;
+
+    // Trigger animation if path changed OR if this is the initial render with an initialPath
+    if (isPathChange || isInitialAnimation) {
+      // Update refs for next render
+      previousPathRef.current = fromPath;
+      targetPathRef.current = toPath;
+      progress.value = 0;
+      progress.value = buildTransition(1, transition);
+      isInitialRender.current = false;
+    }
+  }, [currentPath, initialPath, transition, fromPath, toPath, progress]);
+  return useD3PathInterpolation(progress, fromPath, toPath);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.4",
+  "version": "3.4.0-beta.6",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -32,10 +32,11 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.17.4",
-    "@coinbase/cds-lottie-files": "^3.3.2",
-    "@coinbase/cds-mobile": "^8.17.4",
-    "@coinbase/cds-utils": "^2.3.3",
+    "@coinbase/cds-common": "^8.21.8",
+    "@coinbase/cds-lottie-files": "^3.3.3",
+    "@coinbase/cds-mobile": "^8.21.8",
+    "@coinbase/cds-utils": "^2.3.4",
+    "@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 +53,12 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.17.4",
-    "@coinbase/cds-lottie-files": "^3.3.2",
-    "@coinbase/cds-mobile": "^8.17.4",
-    "@coinbase/cds-utils": "^2.3.3",
+    "@coinbase/cds-common": "^8.21.8",
+    "@coinbase/cds-lottie-files": "^3.3.3",
+    "@coinbase/cds-mobile": "^8.21.8",
+    "@coinbase/cds-utils": "^2.3.4",
     "@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",

package/dts/chart/Point.d.ts

@@ -1,103 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-import type { ChartTextChildren } from './text/ChartText';
-import { type ChartTextProps } from './text';
-/**
- * Parameters passed to renderPoints callback function.
- */
-export type RenderPointsParams = {
-  /**
-   * X coordinate in SVG pixel space.
-   */
-  x: number;
-  /**
-   * Y coordinate in SVG pixel space.
-   */
-  y: number;
-  /**
-   * X coordinate in data space (usually same as index).
-   */
-  dataX: number;
-  /**
-   * Y coordinate in data space (same as value).
-   */
-  dataY: number;
-};
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
- */
-export type PointConfig = {
-  /**
-   * The fill color of the point.
-   */
-  fill?: string;
-  /**
-   * Optional Y-axis id to specify which axis to plot along.
-   * Defaults to the first y-axis
-   */
-  yAxisId?: string;
-  /**
-   * Radius of the point.
-   * @default 4
-   */
-  radius?: number;
-  /**
-   * Opacity of the point.
-   */
-  opacity?: number;
-  /**
-   * Handler for when the point is clicked.
-   */
-  onPress?: (point: { x: number; y: number; dataX: number; dataY: number }) => void;
-  /**
-   * Handler for when the scrubber enters this point.
-   */
-  onScrubberEnter?: (point: { x: number; y: number }) => void;
-  /**
-   * Color of the outer stroke around the point.
-   * @default theme.color.bg
-   */
-  stroke?: string;
-  /**
-   * Outer stroke width of the point.
-   * Set to  0 to remove the stroke.
-   * @default 2
-   */
-  strokeWidth?: number;
-  /**
-   * Simple text label to display at the point position.
-   * If provided, a ChartText will be automatically rendered.
-   */
-  label?: ChartTextChildren;
-  /**
-   * Configuration for the automatically rendered label.
-   * Only used when `label` prop is provided.
-   */
-  labelProps?: Omit<ChartTextProps, 'x' | 'y' | 'children'>;
-  /**
-   * Accessibility label for screen readers to describe the point.
-   * If not provided, a default label will be generated using the data coordinates.
-   */
-  accessibilityLabel?: string;
-};
-export type PointProps = SharedProps &
-  PointConfig & {
-    /**
-     * X coordinate in data space (not pixel coordinates).
-     */
-    dataX: number;
-    /**
-     * Y coordinate in data space (not pixel coordinates).
-     */
-    dataY: number;
-    /**
-     * Optional pixel coordinates to use instead of calculating from dataX/dataY.
-     * Useful for performance when coordinates are already calculated.
-     */
-    pixelCoordinates?: {
-      x: number;
-      y: number;
-    };
-  };
-export declare const Point: import('react').NamedExoticComponent<PointProps>;
-//# sourceMappingURL=Point.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../src/chart/Point.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGxD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;IAC1D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,WAAW,GAAG;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C,CAAC;AAEJ,eAAO,MAAM,KAAK,kDAyFjB,CAAC"}

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

@@ -1,45 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-import { type PathProps } from '../Path';
-export type GradientLineProps = SharedProps &
-  Omit<PathProps, 'stroke' | 'strokeOpacity' | 'strokeWidth'> & {
-    /**
-     * The color of the line.
-     * @default theme.color.bgLine
-     */
-    stroke?: string;
-    /**
-     * Opacity of the line.
-     * @default 1
-     */
-    strokeOpacity?: number;
-    /**
-     * Path stroke width
-     * @default 2
-     */
-    strokeWidth?: number;
-    /**
-     * The color of the start of the gradient.
-     * @default stroke or theme.color.bgLine
-     */
-    startColor?: string;
-    /**
-     * The color of the end of the gradient.
-     * @default stroke or theme.color.bgLine
-     */
-    endColor?: string;
-    /**
-     * Opacity of the start color.
-     * @default strokeOpacity
-     */
-    startOpacity?: number;
-    /**
-     * Opacity of the end color.
-     * @default strokeOpacity
-     */
-    endOpacity?: number;
-  };
-/**
- * A gradient line component which uses path element.
- */
-export declare const GradientLine: import('react').NamedExoticComponent<GradientLineProps>;
-//# sourceMappingURL=GradientLine.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GradientLine.d.ts","sourceRoot":"","sources":["../../../src/chart/line/GradientLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI9D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,eAAe,GAAG,aAAa,CAAC,GAAG;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,YAAY,yDAmDxB,CAAC"}

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

@@ -1,75 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-export type ScrubberBeaconRef = {
-  /**
-   * Triggers a single pulse animation.
-   */
-  pulse: () => void;
-};
-export type ScrubberBeaconProps = SharedProps & {
-  /**
-   * Optional data X coordinate to position the beacon.
-   * If not provided, uses the scrubber position from context.
-   */
-  dataX?: number;
-  /**
-   * Optional data Y coordinate to position the beacon.
-   * If not provided, looks up the Y value from series data at scrubber position.
-   */
-  dataY?: number;
-  /**
-   * Filter to only show dot for specific series (used for hover-based positioning).
-   */
-  seriesId?: string;
-  /**
-   * Color of the beacon point.
-   * If not provided, uses the series color.
-   */
-  color?: string;
-  /**
-   * Opacity of the beacon.
-   * @default 1
-   */
-  opacity?: number;
-  /**
-   * Pulse the scrubber beacon while it is at rest.
-   */
-  idlePulse?: boolean;
-};
-/**
- * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
- */
-export declare const ScrubberBeacon: import('react').MemoExoticComponent<
-  import('react').ForwardRefExoticComponent<
-    SharedProps & {
-      /**
-       * Optional data X coordinate to position the beacon.
-       * If not provided, uses the scrubber position from context.
-       */
-      dataX?: number;
-      /**
-       * Optional data Y coordinate to position the beacon.
-       * If not provided, looks up the Y value from series data at scrubber position.
-       */
-      dataY?: number;
-      /**
-       * Filter to only show dot for specific series (used for hover-based positioning).
-       */
-      seriesId?: string;
-      /**
-       * Color of the beacon point.
-       * If not provided, uses the series color.
-       */
-      color?: string;
-      /**
-       * Opacity of the beacon.
-       * @default 1
-       */
-      opacity?: number;
-      /**
-       * Pulse the scrubber beacon while it is at rest.
-       */
-      idlePulse?: boolean;
-    } & import('react').RefAttributes<ScrubberBeaconRef>
-  >
->;
-//# sourceMappingURL=ScrubberBeacon.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeacon.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAe9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;IAjCzB;;;OAGG;YACK,MAAM;IACd;;;OAGG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;OAGG;YACK,MAAM;IACd;;;OAGG;cACO,MAAM;IAChB;;OAEG;gBACS,OAAO;sDAgMpB,CAAC"}

package/dts/chart/text/SmartChartTextGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SmartChartTextGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/text/SmartChartTextGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAiBF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,gEAwL/B,CAAC"}

package/esm/chart/Point.js

@@ -1,111 +0,0 @@
-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); }
-import { memo, useEffect, useMemo } from 'react';
-import { Circle, G } from 'react-native-svg';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from './ChartProvider';
-import { ChartText } from './text';
-import { projectPoint, useScrubberContext } from './utils';
-
-/**
- * Parameters passed to renderPoints callback function.
- */
-
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
- */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Point = /*#__PURE__*/memo(_ref => {
-  let {
-    dataX,
-    dataY,
-    yAxisId,
-    fill,
-    radius = 4,
-    opacity,
-    onPress,
-    onScrubberEnter,
-    stroke,
-    strokeWidth = 2,
-    accessibilityLabel,
-    label,
-    labelProps,
-    pixelCoordinates,
-    testID
-  } = _ref;
-  const theme = useTheme();
-  const effectiveStroke = stroke != null ? stroke : theme.color.bg;
-  const {
-    getXScale,
-    getYScale
-  } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
-  const xScale = getXScale();
-  const yScale = getYScale(yAxisId);
-
-  // Scrubber detection: check if this point is highlighted by the scrubber
-  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
-
-  // Use provided pixelCoordinates or calculate from data coordinates
-  const pixelCoordinate = useMemo(() => {
-    if (pixelCoordinates) {
-      return pixelCoordinates;
-    }
-    if (!xScale || !yScale) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
-    return projectPoint({
-      x: dataX,
-      y: dataY,
-      xScale,
-      yScale
-    });
-  }, [pixelCoordinates, xScale, yScale, dataX, dataY]);
-  useEffect(() => {
-    if (isScrubberHighlighted && onScrubberEnter) {
-      onScrubberEnter({
-        x: pixelCoordinate.x,
-        y: pixelCoordinate.y
-      });
-    }
-  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
-  if (!xScale || !yScale) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(G, {
-      opacity: opacity,
-      testID: testID,
-      transform: [{
-        translateX: pixelCoordinate.x
-      }, {
-        translateY: pixelCoordinate.y
-      }],
-      children: /*#__PURE__*/_jsx(Circle, {
-        accessibilityLabel: accessibilityLabel,
-        cx: 0,
-        cy: 0,
-        fill: fill != null ? fill : theme.color.fgPrimary,
-        onPress: onPress ? event => onPress({
-          dataX,
-          dataY,
-          x: pixelCoordinate.x,
-          y: pixelCoordinate.y
-        }) : undefined,
-        r: radius,
-        stroke: effectiveStroke,
-        strokeWidth: strokeWidth
-      })
-    }), label && /*#__PURE__*/_jsx(ChartText, _extends({
-      x: pixelCoordinate.x,
-      y: pixelCoordinate.y
-    }, labelProps, {
-      children: label
-    }))]
-  });
-});

package/esm/chart/line/GradientLine.js

@@ -1,62 +0,0 @@
-const _excluded = ["fill", "stroke", "startColor", "endColor", "strokeOpacity", "startOpacity", "endOpacity", "strokeLinecap", "strokeLinejoin", "strokeWidth", "animate"];
-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, useId } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * A gradient line component which uses path element.
- */
-export const GradientLine = /*#__PURE__*/memo(_ref => {
-  var _ref2, _ref3;
-  let {
-      fill = 'none',
-      stroke,
-      startColor,
-      endColor,
-      strokeOpacity = 1,
-      startOpacity = strokeOpacity,
-      endOpacity = strokeOpacity,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
-      strokeWidth = 2,
-      animate
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const context = useCartesianChartContext();
-  const theme = useTheme();
-  const patternId = useId();
-  const shouldAnimate = animate != null ? animate : context.animate;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsxs(LinearGradient, {
-        id: patternId,
-        x1: "0%",
-        x2: "0%",
-        y1: "0%",
-        y2: "100%",
-        children: [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: (_ref2 = startColor != null ? startColor : stroke) != null ? _ref2 : theme.color.bgLine,
-          stopOpacity: startOpacity
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: (_ref3 = endColor != null ? endColor : stroke) != null ? _ref3 : theme.color.bgLine,
-          stopOpacity: endOpacity
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Path, _extends({
-      animate: shouldAnimate,
-      clipOffset: strokeWidth,
-      fill: fill,
-      stroke: "url(#" + patternId + ")",
-      strokeLinecap: strokeLinecap,
-      strokeLinejoin: strokeLinejoin,
-      strokeOpacity: strokeOpacity,
-      strokeWidth: strokeWidth
-    }, props))]
-  });
-});