@coinbase/cds-web 8.66.2 → 9.0.0-rc.1

package/esm/visualizations/chart/CartesianChart.js

@@ -0,0 +1,379 @@
+const _excluded = ["series", "children", "layout", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "className", "classNames", "style", "styles", "accessibilityLabel"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, useRef } from 'react';
+import { useDimensions } from '../../hooks/useDimensions';
+import { cx } from '../../index';
+import { Box } from '../../layout';
+import { ScrubberProvider } from './scrubber/ScrubberProvider';
+import { CartesianChartProvider } from './ChartProvider';
+import { Legend } from './legend';
+import { defaultAxisId, defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const focusStylesCss = "focusStylesCss-fm8hd7g";
+export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      children,
+      layout = 'vertical',
+      animate = true,
+      xAxis: xAxisConfigProp,
+      yAxis: yAxisConfigProp,
+      inset,
+      enableScrubbing,
+      onScrubberPositionChange,
+      legend,
+      legendPosition = 'bottom',
+      legendAccessibilityLabel,
+      width = '100%',
+      height = '100%',
+      className,
+      classNames,
+      style,
+      styles,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    observe,
+    width: chartWidth,
+    height: chartHeight
+  } = useDimensions();
+  const svgRef = useRef(null);
+  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
+
+  // Axis configs store the properties of each axis, such as id, scale type, domain limit, etc.
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp), [xAxisConfigProp]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
+
+  // Horizontal layout supports multiple value axes on x, but only a single category axis on y.
+  // Vertical layout keeps a single x-axis to preserve existing behavior.
+  if (layout === 'horizontal' && yAxisConfig.length > 1) {
+    throw new Error('When layout="horizontal", only one y-axis is supported. See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  if (layout !== 'horizontal' && xAxisConfig.length > 1) {
+    throw new Error('Multiple x-axes are only supported when layout="horizontal". See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  const {
+    renderedAxes,
+    registerAxis,
+    unregisterAxis,
+    axisPadding
+  } = useTotalAxisPadding();
+  const chartRect = useMemo(() => {
+    if (chartWidth <= 0 || chartHeight <= 0) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const totalInset = {
+      top: calculatedInset.top + axisPadding.top,
+      right: calculatedInset.right + axisPadding.right,
+      bottom: calculatedInset.bottom + axisPadding.bottom,
+      left: calculatedInset.left + axisPadding.left
+    };
+    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, calculatedInset, axisPadding]);
+  const {
+    xAxes,
+    xScales
+  } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      xAxes: axes,
+      xScales: scales
+    };
+    xAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
+
+      // Get relevant series data
+      const relevantSeries = xAxisConfig.length > 1 ? (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => {
+        var _s$xAxisId;
+        return ((_s$xAxisId = s.xAxisId) !== null && _s$xAxisId !== void 0 ? _s$xAxisId : defaultAxisId) === axisId;
+      })) !== null && _series$filter !== void 0 ? _series$filter : [] : series !== null && series !== void 0 ? series : [];
+
+      // Calculate domain and range
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'x', layout);
+      const range = getAxisRange(axisParam, chartRect, 'x');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : layout === 'horizontal' ? 'nice' : 'strict',
+        baseline: axisParam.baseline
+      };
+
+      // Create the scale
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'x',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _objectSpread(_objectSpread({}, axisConfig), {}, {
+          domain: actualDomain
+        }));
+      }
+    });
+    return {
+      xAxes: axes,
+      xScales: scales
+    };
+  }, [xAxisConfig, series, chartRect, layout]);
+  const {
+    yAxes,
+    yScales
+  } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      yAxes: axes,
+      yScales: scales
+    };
+    yAxisConfig.forEach(axisParam => {
+      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
+      const axisId = (_axisParam$id2 = axisParam.id) !== null && _axisParam$id2 !== void 0 ? _axisParam$id2 : defaultAxisId;
+
+      // Get relevant series data
+      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series === null || series === void 0 ? void 0 : series.filter(s => {
+        var _s$yAxisId;
+        return ((_s$yAxisId = s.yAxisId) !== null && _s$yAxisId !== void 0 ? _s$yAxisId : defaultAxisId) === axisId;
+      })) !== null && _series$filter2 !== void 0 ? _series$filter2 : [] : series !== null && series !== void 0 ? series : [];
+
+      // Calculate domain and range
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
+      const range = getAxisRange(axisParam, chartRect, 'y');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) !== null && _axisParam$domainLimi2 !== void 0 ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice',
+        baseline: axisParam.baseline
+      };
+
+      // Create the scale
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'y',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _objectSpread(_objectSpread({}, axisConfig), {}, {
+          domain: actualDomain
+        }));
+      }
+    });
+    return {
+      yAxes: axes,
+      yScales: scales
+    };
+  }, [yAxisConfig, series, chartRect, layout]);
+  const getXAxis = useCallback(id => xAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [xAxes]);
+  const getYAxis = useCallback(id => yAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [yAxes]);
+  const getXScale = useCallback(id => xScales.get(id !== null && id !== void 0 ? id : defaultAxisId), [xScales]);
+  const getYScale = useCallback(id => yScales.get(id !== null && id !== void 0 ? id : defaultAxisId), [yScales]);
+  const getSeries = useCallback(seriesId => series === null || series === void 0 ? void 0 : series.find(s => s.id === seriesId), [series]);
+  const stackedDataMap = useMemo(() => {
+    if (!series) return new Map();
+    return calculateStackedSeriesData(series, layout, xAxisConfig, yAxisConfig);
+  }, [series, layout, xAxisConfig, yAxisConfig]);
+  const getStackedSeriesData = useCallback(seriesId => {
+    if (!seriesId) return undefined;
+    return stackedDataMap.get(seriesId);
+  }, [stackedDataMap]);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxisConfig = useMemo(() => {
+    var _xAxisConfig$, _yAxisConfig$;
+    return categoryAxisIsX ? (_xAxisConfig$ = xAxisConfig[0]) !== null && _xAxisConfig$ !== void 0 ? _xAxisConfig$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) !== null && _yAxisConfig$ !== void 0 ? _yAxisConfig$ : xAxisConfig[0];
+  }, [categoryAxisIsX, xAxisConfig, yAxisConfig]);
+  const dataLength = useMemo(() => {
+    // If category axis has categorical data, use that length
+    if (categoryAxisConfig.data && categoryAxisConfig.data.length > 0) {
+      return categoryAxisConfig.data.length;
+    }
+
+    // Otherwise, find the longest series
+    if (!series || series.length === 0) return 0;
+    return series.reduce((max, s) => {
+      var _seriesData$length;
+      const seriesData = getStackedSeriesData(s.id);
+      return Math.max(max, (_seriesData$length = seriesData === null || seriesData === void 0 ? void 0 : seriesData.length) !== null && _seriesData$length !== void 0 ? _seriesData$length : 0);
+    }, 0);
+  }, [categoryAxisConfig, series, getStackedSeriesData]);
+  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 = calculatedInset.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 = calculatedInset.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, calculatedInset]);
+  const contextValue = useMemo(() => ({
+    layout,
+    series: series !== null && series !== void 0 ? series : [],
+    getSeries,
+    getSeriesData: getStackedSeriesData,
+    animate,
+    width: chartWidth,
+    height: chartHeight,
+    getXAxis,
+    getYAxis,
+    getXScale,
+    getYScale,
+    drawingArea: chartRect,
+    dataLength,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  }), [layout, series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  const rootClassNames = useMemo(() => cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root), [className, classNames]);
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  const legendElement = useMemo(() => {
+    if (!legend) return;
+    if (legend === true) {
+      const isHorizontal = legendPosition === 'top' || legendPosition === 'bottom';
+      const flexDirection = isHorizontal ? 'row' : 'column';
+      return /*#__PURE__*/_jsx(Legend, {
+        accessibilityLabel: legendAccessibilityLabel,
+        flexDirection: flexDirection
+      });
+    }
+    return legend;
+  }, [legend, legendAccessibilityLabel, legendPosition]);
+  const rootBoxProps = useMemo(() => _objectSpread({
+    className: rootClassNames,
+    height,
+    style: rootStyles,
+    width
+  }, props), [rootClassNames, height, rootStyles, width, props]);
+  const chartContent = /*#__PURE__*/_jsx(Box, {
+    ref: node => {
+      observe(node);
+    },
+    height: legend ? undefined : height,
+    style: {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0
+    },
+    width: legend ? undefined : width,
+    children: /*#__PURE__*/_jsx(Box, {
+      ref: node => {
+        const svgElement = node;
+        svgRef.current = svgElement;
+        // Forward the ref to the user
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(svgElement);
+          } else {
+            ref.current = svgElement;
+          }
+        }
+      },
+      accessibilityLabel: accessibilityLabel,
+      "aria-live": "polite",
+      as: "svg",
+      className: cx(enableScrubbing && focusStylesCss, classNames === null || classNames === void 0 ? void 0 : classNames.chart),
+      height: "100%",
+      style: styles === null || styles === void 0 ? void 0 : styles.chart,
+      tabIndex: enableScrubbing ? 0 : undefined,
+      width: "100%",
+      children: children
+    })
+  });
+  return /*#__PURE__*/_jsx(CartesianChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ScrubberProvider, {
+      enableScrubbing: !!enableScrubbing,
+      onScrubberPositionChange: onScrubberPositionChange,
+      svgRef: svgRef,
+      children: legend ? /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({}, rootBoxProps), {}, {
+        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row',
+        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, chartContent, (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
+      })) : /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, rootBoxProps), {}, {
+        children: chartContent
+      }))
+    })
+  });
+}));
+import "./CartesianChart.css";

package/esm/visualizations/chart/ChartProvider.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export 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 https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  return context;
+};
+export const CartesianChartProvider = CartesianChartContext.Provider;

package/esm/visualizations/chart/Path.js

@@ -0,0 +1,125 @@
+const _excluded = ["d", "initialPath", "transitions"],
+  _excluded2 = ["animate", "clipRect", "clipOffset", "d", "transitions", "transition"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { defaultPathEnterTransition } from './utils/path';
+import { defaultTransition, getTransition, usePathTransition } from './utils/transition';
+import { useCartesianChartContext } from './ChartProvider';
+
+/**
+ * Duration in seconds for path enter transition.
+ * @deprecated Use `transitions.enter` on the Path component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const pathEnterTransitionDuration = 0.5;
+const AnimatedPath = /*#__PURE__*/memo(_ref => {
+  let {
+      d = '',
+      initialPath,
+      transitions
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const interpolatedPath = usePathTransition({
+    currentPath: d,
+    initialPath,
+    transitions
+  });
+  const animateEnterOpacity = Boolean(transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity);
+  return /*#__PURE__*/_jsx(motion.path, _objectSpread({}, _objectSpread({
+    animate: animateEnterOpacity ? {
+      opacity: 1
+    } : undefined,
+    initial: animateEnterOpacity ? {
+      opacity: 0
+    } : false,
+    transition: animateEnterOpacity ? {
+      opacity: transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity
+    } : undefined,
+    d: interpolatedPath
+  }, pathProps)));
+});
+export const Path = /*#__PURE__*/memo(_ref2 => {
+  let {
+      animate: animateProp,
+      clipRect,
+      clipOffset = 0,
+      d = '',
+      transitions,
+      transition
+    } = _ref2,
+    pathProps = _objectWithoutProperties(_ref2, _excluded2);
+  const clipPathId = useId();
+  const context = useCartesianChartContext();
+  const rect = clipRect !== undefined ? clipRect : context.drawingArea;
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : context.animate;
+  const clipPath = rect !== null ? "url(#".concat(clipPathId, ")") : undefined;
+  const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter]);
+  const updateTransition = useMemo(() => getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition]);
+  const enterOpacityTransition = useMemo(() => {
+    if (!animate) return null;
+    return transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity;
+  }, [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity]);
+  const animateClip = 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
+
+  const clipPathAnimation = useMemo(() => {
+    if (rect === null) return;
+    const categoryAxisIsX = context.layout !== 'horizontal';
+    const fullWidth = rect.width + totalOffset;
+    const fullHeight = rect.height + totalOffset;
+    return {
+      hidden: {
+        width: categoryAxisIsX ? 0 : fullWidth,
+        height: categoryAxisIsX ? fullHeight : 0
+      },
+      visible: {
+        width: fullWidth,
+        height: fullHeight,
+        transition: {
+          type: 'timing',
+          duration: pathEnterTransitionDuration
+        }
+      }
+    };
+  }, [rect, totalOffset, context.layout]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [rect !== null && /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        id: clipPathId,
+        children: animateClip ? /*#__PURE__*/_jsx(motion.rect, {
+          animate: "visible",
+          height: rect.height + totalOffset,
+          initial: "hidden",
+          variants: clipPathAnimation,
+          width: rect.width + totalOffset,
+          x: rect.x - clipOffset,
+          y: rect.y - clipOffset
+        }) : /*#__PURE__*/_jsx("rect", {
+          height: rect.height + totalOffset,
+          width: rect.width + totalOffset,
+          x: rect.x - clipOffset,
+          y: rect.y - clipOffset
+        })
+      })
+    }), /*#__PURE__*/_jsx(AnimatedPath, _objectSpread({
+      clipPath: clipPath,
+      d: d,
+      transitions: {
+        enter: enterTransition,
+        enterOpacity: enterOpacityTransition,
+        update: updateTransition
+      }
+    }, pathProps))]
+  });
+});

package/esm/visualizations/chart/PeriodSelector.css

@@ -0,0 +1 @@
+@layer cds{.dotBaseCss-dg0k9xb{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--space-1);height:var(--space-1);background:currentColor;border-radius:1000px;margin-inline-end:var(--space-0_75);}}

package/esm/visualizations/chart/PeriodSelector.js

@@ -0,0 +1,130 @@
+const _excluded = ["activeTabRect", "background", "position", "borderRadius", "style"],
+  _excluded2 = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
+  _excluded3 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { m as motion } from 'framer-motion';
+import { cx } from '../../index';
+import { Box } from '../../layout';
+import { SegmentedTabs, tabsTransitionConfig } from '../../tabs';
+import { SegmentedTab } from '../../tabs/SegmentedTab';
+import { Text } from '../../typography';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MotionBox = motion(Box);
+
+// Animated active indicator to support smooth transition of background color
+export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
+  let {
+      activeTabRect,
+      background = 'bgPrimaryWash',
+      position = 'absolute',
+      borderRadius = 1000,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    width,
+    height,
+    x
+  } = activeTabRect;
+  const activeAnimation = useMemo(() => ({
+    width,
+    x
+  }), [width, x]);
+  if (!width) return null;
+  return /*#__PURE__*/_jsx(MotionBox, _objectSpread({
+    animate: activeAnimation,
+    borderRadius: borderRadius,
+    "data-testid": "period-selector-active-indicator",
+    height: height,
+    initial: false,
+    left: 0,
+    position: position,
+    role: "none",
+    style: _objectSpread({
+      backgroundColor: "var(--color-".concat(background, ")"),
+      transition: 'background-color 0.2s ease'
+    }, style),
+    transition: tabsTransitionConfig
+  }, props));
+});
+export const liveTabLabelDefaultElement = 'span';
+// is this bad to use var(--space-1) for height and width?
+const dotBaseCss = "dotBaseCss-dg0k9xb";
+export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      as,
+      color = 'fgNegative',
+      label = 'LIVE',
+      display = 'inline-flex',
+      alignItems = 'center',
+      font = 'label1',
+      hideDot
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const Component = as !== null && as !== void 0 ? as : liveTabLabelDefaultElement;
+  return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
+    ref: ref,
+    alignItems: alignItems,
+    as: Component,
+    color: color,
+    display: display,
+    font: font
+  }, props), {}, {
+    children: [!hideDot && /*#__PURE__*/_jsx("span", {
+      className: dotBaseCss
+    }), label]
+  }));
+}));
+
+// Custom tab component with primary color for active state
+const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _objectSpread({
+  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,
+      className,
+      classNames,
+      style,
+      styles
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/_jsx(SegmentedTabs, _objectSpread({
+    ref: ref,
+    TabComponent: TabComponent,
+    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+    activeBackground: activeBackground,
+    background: background,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    classNames: {
+      tab: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
+      activeIndicator: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator
+    },
+    justifyContent: justifyContent,
+    style: styles !== null && styles !== void 0 && styles.root ? _objectSpread(_objectSpread({}, style), styles.root) : style,
+    styles: {
+      tab: styles === null || styles === void 0 ? void 0 : styles.tab,
+      activeIndicator: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
+    },
+    width: width
+  }, props));
+}));
+import "./PeriodSelector.css";