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

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -0,0 +1,118 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
+  SharedProps,
+  SparklineInteractiveHeaderSignVariant,
+  SparklineInteractiveHeaderVariant,
+} from '@coinbase/cds-common/types';
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+export type SparklineInteractiveSubHead = {
+  /**
+   * Free form percentage change
+   */
+  percent: string;
+  /**
+   * Sign to denote the change in price
+   */
+  sign: SparklineInteractiveHeaderSignVariant;
+  /**
+   * The variant to use for the price and percentage change
+   */
+  variant: SparklineInteractiveHeaderVariant;
+  /**
+   * Show the dollar amount of price change
+   */
+  priceChange?: string;
+  /**
+   * The accessoryText to show after the price and / or percentage change. An example is "All time"
+   */
+  accessoryText?: string;
+  /**
+   * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+   * @example
+   * // First, configure your i18n strings
+   * const messages = defineMessages({
+   *   subHeadPrefix: {
+   *     id: `${i18nKey}.subHeadPrefix`,
+   *     defaultMessage: 'Price increase in the amount of',
+   *     description: 'A prefix to make it clear which direction the price action was moving',
+   *   }
+   * });
+   *
+   * // then  provide the translated string the accessibilityLabel prop
+   * messages.subHeadPrefix
+   */
+  accessibilityLabel?: string;
+};
+export type SparklineInteractiveHeaderValues = {
+  /**
+   * Describes what the Header represents e.g. Bitcoin Price
+   */
+  label?: string;
+  /**
+   * Main content of header, this is usually the price
+   */
+  title?: React.ReactNode;
+  /**
+   * Provides additional information about the title, such as a price change
+   */
+  subHead?: SparklineInteractiveSubHead;
+};
+export type SparklineInteractiveHeaderRef = {
+  update: (params: SparklineInteractiveHeaderValues) => void;
+};
+export type SparklineInteractiveHeaderProps = SharedProps & {
+  /**
+   * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+   */
+  defaultTitle: React.ReactNode;
+  /**
+   * Default label, changing this prop has no effect once the default is rendered.
+   */
+  defaultLabel?: string;
+  /**
+   * Default SubHead, changing this prop has no effect once the default is rendered.
+   */
+  defaultSubHead?: SparklineInteractiveSubHead;
+  /**
+   * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+   */
+  labelNode?: React.ReactNode;
+  /**
+   * Reduce the font size used for the header itself.
+   */
+  compact?: boolean;
+};
+export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
+export declare const SparklineInteractiveHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    {
+      /**
+       * Adds content next to the header. This is useful for interactive buttons
+       */
+      trailing?: ReactNode;
+    } & SharedProps & {
+        /**
+         * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+         */
+        defaultTitle: React.ReactNode;
+        /**
+         * Default label, changing this prop has no effect once the default is rendered.
+         */
+        defaultLabel?: string;
+        /**
+         * Default SubHead, changing this prop has no effect once the default is rendered.
+         */
+        defaultSubHead?: SparklineInteractiveSubHead;
+        /**
+         * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+         */
+        labelNode?: React.ReactNode;
+        /**
+         * Reduce the font size used for the header itself.
+         */
+        compact?: boolean;
+      } & React.RefAttributes<SparklineInteractiveHeaderRef>
+  >
+>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAE1F,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAKpC,cAAc,gEAAgE,CAAC;AAE/E,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,qCAAqC,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,iCAAiC,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,GAAG;IAC1D;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,2BAA2B,WAQ1E,CAAC;AAwNF,eAAO,MAAM,0BAA0B;IANrC;;OAEG;eACQ,SAAS;;IAnPpB;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;wDAuPlB,CAAC"}

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts

@@ -0,0 +1,29 @@
+import type { StyleProp, TextStyle } from 'react-native';
+import type { SparklineInteractiveSubHead } from './SparklineInteractiveHeader';
+export type SparklineInteractiveSubHeadIconColor = SparklineInteractiveSubHead['variant'];
+export declare const styles: {
+  inputReset: {
+    padding: number;
+    margin: number;
+    backgroundColor: string;
+    overflow: 'visible';
+    lineHeight: undefined;
+  };
+  fullWidth: {
+    width: '100%';
+  };
+  tabularNumbers: {
+    fontVariant: 'tabular-nums'[];
+  };
+};
+export declare function useSparklineInteractiveHeaderStyles(): {
+  readonly title: (text: string) => StyleProp<TextStyle>;
+  readonly label: StyleProp<TextStyle>;
+  readonly subHeadIcon: (color: SparklineInteractiveSubHeadIconColor) => StyleProp<TextStyle>;
+  readonly subHead: (
+    color: SparklineInteractiveSubHeadIconColor,
+    useFullWidth?: boolean,
+  ) => StyleProp<TextStyle>;
+  readonly subHeadAccessory: () => StyleProp<TextStyle>;
+};
+//# sourceMappingURL=useSparklineInteractiveHeaderStyles.d.ts.map

package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveHeaderStyles.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAEhF,MAAM,MAAM,oCAAoC,GAAG,2BAA2B,CAAC,SAAS,CAAC,CAAC;AA0B1F,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAejB,CAAC;AAEH,wBAAgB,mCAAmC;2BA+B/B,MAAM,KAAG,SAAS,CAAC,SAAS,CAAC;oBA+BtC,SAAS,CAAC,SAAS,CAAC;kCAEJ,oCAAoC,KAAG,SAAS,CAAC,SAAS,CAAC;8BAYvE,oCAAoC,6BAE1C,SAAS,CAAC,SAAS,CAAC;qCAUD,SAAS,CAAC,SAAS,CAAC;EAqB/C"}

package/esm/chart/CartesianChart.js

@@ -0,0 +1,241 @@
+const _excluded = ["series", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "children", "width", "height", "style", "allowOverflowGestures"];
+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 React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import { Svg } from 'react-native-svg';
+import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
+import { Box } from '@coinbase/cds-mobile/layout';
+import { ScrubberProvider } from './scrubber/ScrubberProvider';
+import { CartesianChartProvider } from './ChartProvider';
+import { defaultAxisId, defaultChartInset, getAxisConfig, getAxisDomain, getAxisRange, getAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      animate = true,
+      enableScrubbing,
+      xAxis: xAxisConfigInput,
+      yAxis: yAxisConfigInput,
+      inset: insetInput,
+      onScrubberPositionChange,
+      children,
+      width = '100%',
+      height = '100%',
+      style,
+      allowOverflowGestures
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [containerLayout, onContainerLayout] = useLayout();
+  const chartWidth = typeof width === 'number' ? width : containerLayout.width;
+  const chartHeight = typeof height === 'number' ? height : containerLayout.height;
+  const userInset = useMemo(() => {
+    return getChartInset(insetInput, defaultChartInset);
+  }, [insetInput]);
+
+  // there can only be one x axis but the helper function always returns an array
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigInput)[0], [xAxisConfigInput]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigInput), [yAxisConfigInput]);
+  const {
+    renderedAxes,
+    registerAxis,
+    unregisterAxis,
+    axisPadding
+  } = useTotalAxisPadding();
+  const totalInset = useMemo(() => ({
+    top: userInset.top + axisPadding.top,
+    right: userInset.right + axisPadding.right,
+    bottom: userInset.bottom + axisPadding.bottom,
+    left: userInset.left + axisPadding.left
+  }), [userInset, axisPadding]);
+  const chartRect = useMemo(() => {
+    if (chartWidth <= 0 || chartHeight <= 0) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const availableWidth = chartWidth - totalInset.left - totalInset.right;
+    const availableHeight = chartHeight - totalInset.top - totalInset.bottom;
+    return {
+      x: totalInset.left,
+      y: totalInset.top,
+      width: availableWidth > 0 ? availableWidth : 0,
+      height: availableHeight > 0 ? availableHeight : 0
+    };
+  }, [chartHeight, chartWidth, totalInset]);
+  const xAxis = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return undefined;
+    const domain = getAxisDomain(xAxisConfig, series != null ? series : [], 'x');
+    const range = getAxisRange(xAxisConfig, chartRect, 'x');
+    const axisConfig = {
+      scaleType: xAxisConfig.scaleType,
+      domain,
+      range,
+      data: xAxisConfig.data,
+      categoryPadding: xAxisConfig.categoryPadding,
+      domainLimit: xAxisConfig.domainLimit
+    };
+    return axisConfig;
+  }, [xAxisConfig, series, chartRect]);
+  const yAxes = useMemo(() => {
+    const axes = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return axes;
+    yAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
+
+      // Get relevant series data
+      const relevantSeries = (_series$filter = series == null ? void 0 : series.filter(s => {
+        var _s$yAxisId;
+        return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
+      })) != null ? _series$filter : [];
+
+      // Calculate domain and range in one pass
+      const domain = getAxisDomain(axisParam, relevantSeries, 'y');
+      const range = getAxisRange(axisParam, chartRect, 'y');
+      axes.set(axisId, {
+        scaleType: axisParam.scaleType,
+        domain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : 'nice'
+      });
+    });
+    return axes;
+  }, [yAxisConfig, series, chartRect]);
+  const xScale = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0 || xAxis === undefined) return undefined;
+    return getAxisScale({
+      config: xAxis,
+      type: 'x',
+      range: xAxis.range,
+      dataDomain: xAxis.domain
+    });
+  }, [chartRect, xAxis]);
+  const yScales = useMemo(() => {
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return scales;
+    yAxes.forEach((axisConfig, axisId) => {
+      const scale = getAxisScale({
+        config: axisConfig,
+        type: 'y',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+      }
+    });
+    return scales;
+  }, [chartRect, yAxes]);
+  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
+  const getXScale = useCallback(() => xScale, [xScale]);
+  const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
+  const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
+
+  // Compute stacked data for series with stack properties
+  const stackedDataMap = useMemo(() => {
+    if (!series) return new Map();
+    return calculateStackedSeriesData(series);
+  }, [series]);
+  const getStackedSeriesData = useCallback(seriesId => {
+    if (!seriesId) return undefined;
+    return stackedDataMap.get(seriesId);
+  }, [stackedDataMap]);
+  const getAxisBounds = useCallback(axisId => {
+    const axis = renderedAxes.get(axisId);
+    if (!axis || !chartRect) return;
+    const axesAtPosition = Array.from(renderedAxes.values()).filter(a => a.position === axis.position).sort((a, b) => a.id.localeCompare(b.id));
+    const axisIndex = axesAtPosition.findIndex(a => a.id === axisId);
+    if (axisIndex === -1) return;
+
+    // Calculate offset from previous axes at the same position
+    const offsetFromPreviousAxes = axesAtPosition.slice(0, axisIndex).reduce((sum, a) => sum + a.size, 0);
+    if (axis.position === 'top') {
+      // Position above the chart rect, accounting for user inset
+      const startY = userInset.top + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'bottom') {
+      // Position below the chart rect, accounting for user inset
+      const startY = chartRect.y + chartRect.height + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'left') {
+      // Position to the left of the chart rect, accounting for user inset
+      const startX = userInset.left + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    } else {
+      // right - position to the right of the chart rect, accounting for user inset
+      const startX = chartRect.x + chartRect.width + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    }
+  }, [renderedAxes, chartRect, userInset]);
+  const contextValue = useMemo(() => ({
+    series: series != null ? series : [],
+    getSeries,
+    getSeriesData: getStackedSeriesData,
+    animate,
+    width: chartWidth,
+    height: chartHeight,
+    getXAxis,
+    getYAxis,
+    getXScale,
+    getYScale,
+    drawingArea: chartRect,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, registerAxis, unregisterAxis, getAxisBounds]);
+  const containerStyles = useMemo(() => {
+    const dynamicStyles = {};
+    if (typeof width === 'string') {
+      dynamicStyles.width = width;
+    }
+    if (typeof height === 'string') {
+      dynamicStyles.height = height;
+    }
+    return [style, dynamicStyles];
+  }, [style, width, height]);
+  return /*#__PURE__*/_jsx(CartesianChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ScrubberProvider, {
+      allowOverflowGestures: allowOverflowGestures,
+      enableScrubbing: enableScrubbing,
+      onScrubberPositionChange: onScrubberPositionChange,
+      children: /*#__PURE__*/_jsx(Box, _extends({
+        ref: ref,
+        accessibilityLiveRegion: "polite",
+        accessibilityRole: "image",
+        onLayout: onContainerLayout,
+        style: containerStyles
+      }, props, {
+        children: /*#__PURE__*/_jsx(Svg, {
+          height: chartHeight,
+          width: chartWidth,
+          children: children
+        })
+      }))
+    })
+  });
+}));

package/esm/chart/ChartProvider.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export const useCartesianChartContext = () => {
+  const context = useContext(CartesianChartContext);
+  if (!context) {
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See http://cds.coinbase.com/components/graphs/CartesianChart.');
+  }
+  return context;
+};
+export const CartesianChartProvider = CartesianChartContext.Provider;

package/esm/chart/Path.js

@@ -0,0 +1,133 @@
+const _excluded = ["clipRect", "clipOffset", "d", "fill", "stroke", "strokeWidth", "strokeOpacity", "fillOpacity", "strokeDasharray", "testID", "animate"];
+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; }
+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, useCallback, useEffect, useId, useMemo, useRef } from 'react';
+import Reanimated, { runOnJS, useAnimatedProps, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ClipPath, Defs, G, Path as SvgPath, Rect } from 'react-native-svg';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import * as interpolate from 'd3-interpolate-path';
+import { useCartesianChartContext } from './ChartProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedRect = Reanimated.createAnimatedComponent(Rect);
+const AnimatedSvgRect = /*#__PURE__*/memo(_ref => {
+  let {
+    width,
+    totalOffset,
+    rectProps
+  } = _ref;
+  const animatedWidth = useSharedValue(width + totalOffset);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      width: animatedWidth.value
+    };
+  });
+  useEffect(() => {
+    animatedWidth.value = withTiming(width + totalOffset, {
+      duration: 1000
+    });
+  }, [animatedWidth, width, totalOffset]);
+  return /*#__PURE__*/_jsx(AnimatedRect, _extends({
+    animatedProps: animatedProps
+  }, rectProps));
+});
+export const Path = /*#__PURE__*/memo(_ref2 => {
+  let {
+      clipRect,
+      clipOffset,
+      d = '',
+      fill,
+      stroke,
+      strokeWidth,
+      strokeOpacity,
+      fillOpacity,
+      strokeDasharray,
+      testID,
+      animate: animateProp
+    } = _ref2,
+    pathProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const pathRef = useRef(null);
+  const {
+    animate: animateContext,
+    drawingArea: contextRect
+  } = useCartesianChartContext();
+  const rect = clipRect != null ? clipRect : contextRect;
+  const animate = animateProp != null ? animateProp : animateContext;
+  const clipPathId = useId();
+  const animationProgress = useSharedValue(0);
+  const targetPath = useMemo(() => d, [d]);
+  const previousPath = usePreviousValue(targetPath);
+  const fromPath = useMemo(() => {
+    if (!animate) return targetPath;
+    return previousPath != null ? previousPath : targetPath;
+  }, [animate, previousPath, targetPath]);
+  const pathInterpolator = useMemo(() => interpolate.interpolatePath(fromPath, targetPath), [fromPath, targetPath]);
+  const updatePath = useCallback(progress => {
+    var _pathRef$current;
+    if (!pathInterpolator) return;
+    const val = Number(progress.toFixed(4));
+    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
+      d: pathInterpolator(val)
+    });
+  }, [pathInterpolator]);
+  useAnimatedReaction(() => animationProgress.value, progress => {
+    'worklet';
+
+    runOnJS(updatePath)(progress);
+  }, [updatePath]);
+  useEffect(() => {
+    if (!pathRef.current) return;
+    if (!animate || !pathInterpolator) {
+      pathRef.current.setNativeProps({
+        d: targetPath
+      });
+      animationProgress.value = 1;
+      return;
+    }
+    animationProgress.value = 0;
+    animationProgress.value = withTiming(1, {
+      duration: 200
+    });
+  }, [animate, animationProgress, targetPath, pathInterpolator]);
+  if (!d || !rect) return;
+
+  // 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 != null ? clipOffset : 0) * 2; // Applied on both sides
+
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: animate ? /*#__PURE__*/_jsx(ClipPath, {
+        id: clipPathId,
+        children: /*#__PURE__*/_jsx(AnimatedSvgRect, {
+          rectProps: {
+            height: rect.height + totalOffset,
+            x: rect.x - (clipOffset != null ? clipOffset : 0),
+            y: rect.y - (clipOffset != null ? clipOffset : 0)
+          },
+          totalOffset: totalOffset,
+          width: rect.width
+        })
+      }) : /*#__PURE__*/_jsx(ClipPath, {
+        id: clipPathId,
+        children: /*#__PURE__*/_jsx(Rect, {
+          height: contextRect.height + totalOffset,
+          width: contextRect.width + totalOffset,
+          x: contextRect.x - (clipOffset != null ? clipOffset : 0),
+          y: contextRect.y - (clipOffset != null ? clipOffset : 0)
+        })
+      })
+    }), /*#__PURE__*/_jsx(SvgPath, _extends({
+      ref: pathRef,
+      clipPath: "url(#" + clipPathId + ")",
+      clipRule: "nonzero",
+      d: fromPath,
+      fill: fill,
+      fillOpacity: fillOpacity,
+      stroke: stroke,
+      strokeDasharray: strokeDasharray,
+      strokeOpacity: strokeOpacity,
+      strokeWidth: strokeWidth,
+      testID: testID
+    }, pathProps))]
+  });
+});

package/esm/chart/PeriodSelector.js

@@ -0,0 +1,136 @@
+const _excluded = ["color", "label", "font", "hideDot", "style"],
+  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+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 React, { forwardRef, memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
+import { Text } from '@coinbase/cds-mobile/typography/Text';
+
+// Animated active indicator to support smooth transition of background color
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PeriodSelectorActiveIndicator = _ref => {
+  let {
+    activeTabRect,
+    background = 'bgPrimaryWash',
+    position = 'absolute',
+    borderRadius = 1000
+  } = _ref;
+  const theme = useTheme();
+  const {
+    width,
+    height,
+    x
+  } = activeTabRect;
+
+  // Get the target background color
+  const backgroundColorKey = background;
+  const targetColor = theme.color[backgroundColorKey] || background;
+
+  // Track previous values for first render detection
+  const previousActiveTabRect = React.useRef(activeTabRect);
+  const previousColor = React.useRef(targetColor);
+
+  // Combined animated value for position, size, and color
+  const newAnimatedValues = {
+    x,
+    width,
+    backgroundColor: targetColor
+  };
+  const animatedValues = useSharedValue(newAnimatedValues);
+  const isFirstRenderWithWidth = previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
+  if (previousActiveTabRect.current !== activeTabRect || previousColor.current !== targetColor) {
+    previousActiveTabRect.current = activeTabRect;
+    previousColor.current = targetColor;
+    animatedValues.value = isFirstRenderWithWidth ? newAnimatedValues : withSpring(newAnimatedValues, tabsSpringConfig);
+  }
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: animatedValues.value.x
+    }],
+    width: animatedValues.value.width,
+    backgroundColor: animatedValues.value.backgroundColor
+  }), [animatedValues]);
+  if (!width) return null;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: position,
+      height,
+      borderRadius
+    }, animatedStyles],
+    testID: "period-selector-active-indicator"
+  });
+};
+const styles = StyleSheet.create({
+  liveContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      color = 'fgNegative',
+      label = 'LIVE',
+      font = 'label1',
+      hideDot,
+      style
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const theme = useTheme();
+  const colorKey = color;
+  const textColor = theme.color[colorKey] || color;
+  const dotStyle = useMemo(() => ({
+    width: theme.space[1],
+    height: theme.space[1],
+    borderRadius: 1000,
+    marginRight: theme.space[0.75],
+    backgroundColor: textColor
+  }), [theme.space, textColor]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.liveContainer, style],
+    children: [!hideDot && /*#__PURE__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, _extends({
+      color: color,
+      font: font
+    }, props, {
+      children: label
+    }))]
+  });
+}));
+
+// Custom tab component with primary color for active state
+const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
+  ref: ref,
+  activeColor: "fgPrimary",
+  font: "label1"
+}, props))));
+/**
+ * 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 const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      background = 'transparent',
+      activeBackground = 'bgPrimaryWash',
+      width = '100%',
+      justifyContent = 'space-between',
+      TabComponent = PeriodSelectorTab,
+      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(SegmentedTabs, _extends({
+    ref: ref,
+    TabComponent: TabComponent,
+    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+    activeBackground: activeBackground,
+    background: background,
+    justifyContent: justifyContent,
+    width: width
+  }, props));
+}));