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

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.4 (10/27/2025 PST)
+
+This is an artificial version bump with no new change.
+
+## 3.4.0-beta.3 (10/6/2025 PST)
+
+This is an artificial version bump with no new change.
+
 ## 3.4.0-beta.2 (10/6/2025 PST)
 
 This is an artificial version bump with no new change.

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

@@ -1,34 +1,20 @@
-const _excluded = ["label"];
+const _excluded = ["label"],
+  _excluded2 = ["label", "font", "hideDot", "style"];
 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 { forwardRef, memo, useMemo, useState } from 'react';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { IconButton } from '@coinbase/cds-mobile/buttons';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { HStack } from '@coinbase/cds-mobile/layout';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { TextHeadline, TextLabel1 } from '@coinbase/cds-mobile/typography';
+import { TextLabel1 } from '@coinbase/cds-mobile/typography';
+import { Text } from '@coinbase/cds-mobile/typography/Text';
 import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  component: PeriodSelector,
-  title: 'Components/Chart/PeriodSelector'
-};
-const Example = _ref => {
-  let {
-    children,
-    title,
-    description
-  } = _ref;
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(TextHeadline, {
-      children: title
-    }), description, children]
-  });
-};
 const PeriodSelectorExample = () => {
   const tabs = [{
     id: '1H',
@@ -79,7 +65,7 @@ const MinWidthPeriodSelectorExample = () => {
   const [activeTab, setActiveTab] = useState(tabs[0]);
   return /*#__PURE__*/_jsx(PeriodSelector, {
     activeTab: activeTab,
-    gap: 2,
+    gap: 0.5,
     onChange: tab => setActiveTab(tab),
     tabs: tabs,
     width: "fit-content"
@@ -116,7 +102,6 @@ const LivePeriodSelectorExample = () => {
   });
 };
 const TooManyPeriodsSelectorExample = () => {
-  const theme = useTheme();
   const tabs = useMemo(() => [{
     id: '1H',
     label: /*#__PURE__*/_jsx(LiveTabLabel, {})
@@ -145,55 +130,48 @@ const TooManyPeriodsSelectorExample = () => {
   const [activeTab, setActiveTab] = useState(tabs[0]);
   const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
   const activeBackground = useMemo(() => !isLive ? 'bgPrimaryWash' : 'bgNegativeWash', [isLive]);
-  const gradientOverlayStyles = useMemo(() => [{
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    width: theme.space[4],
-    backgroundColor: theme.color.bgPrimary,
-    opacity: 0.8
-  }], [theme.space, theme.color.bgPrimary]);
   return /*#__PURE__*/_jsxs(HStack, {
     alignItems: "center",
     justifyContent: "space-between",
     maxWidth: "100%",
-    overflow: "hidden",
     width: "100%",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      flexGrow: 1,
-      overflow: "hidden",
-      position: "relative",
-      children: [/*#__PURE__*/_jsx(Box, {
-        overflow: "scroll",
-        paddingEnd: 2,
-        children: /*#__PURE__*/_jsx(PeriodSelector, {
-          activeBackground: activeBackground,
-          activeTab: activeTab,
-          gap: 1,
-          justifyContent: "flex-start",
-          onChange: setActiveTab,
-          tabs: tabs,
-          width: "fit-content"
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: gradientOverlayStyles
-      })]
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      contentContainerStyle: {
+        paddingEnd: 8,
+        flexGrow: 1
+      },
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(PeriodSelector, {
+        activeBackground: activeBackground,
+        activeTab: activeTab,
+        gap: 1,
+        justifyContent: "flex-start",
+        onChange: setActiveTab,
+        tabs: tabs,
+        width: "fit-content"
+      })
     }), /*#__PURE__*/_jsx(IconButton, {
       compact: true,
       accessibilityLabel: "Configure chart",
       flexShrink: 0,
-      height: 36,
       name: "filter",
       variant: "secondary"
     })]
   });
 };
 const btcColor = assets.btc.color;
-const BTCActiveIndicator = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
-  background: btcColor + "1A"
-})));
+const BTCActiveIndicator = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    activeTab
+  } = useTabsContext();
+  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
+  const backgroundColor = useMemo(() => isLive ? theme.color.bgNegativeWash : btcColor + "1A", [isLive, theme.color.bgNegativeWash]);
+  return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
+    background: backgroundColor
+  }));
+});
 const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
   const theme = useTheme();
   const {
@@ -205,30 +183,66 @@ const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
     background: backgroundColor
   }));
 });
-const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       label
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     activeTab
   } = useTabsContext();
   const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
-  const textColor = isActive ? btcColor : undefined;
+  const theme = useTheme();
+
+  // If label is already a React element (like LiveTabLabel), pass it through directly
+  // For string labels, wrap with custom BTC color when active
+  const wrappedLabel = typeof label === 'string' ? /*#__PURE__*/_jsx(TextLabel1, {
+    dangerouslySetColor: isActive ? btcColor : theme.color.fg,
+    children: label
+  }) : label;
   return /*#__PURE__*/_jsx(SegmentedTab, _extends({
     ref: ref,
-    label: /*#__PURE__*/_jsx(TextLabel1, {
-      dangerouslySetColor: textColor,
-      children: label
-    })
+    label: wrappedLabel
   }, props));
 }));
+const BTCLiveLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      label = 'LIVE',
+      font = 'label1',
+      hideDot,
+      style
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const theme = useTheme();
+  const dotStyle = useMemo(() => ({
+    width: theme.space[1],
+    height: theme.space[1],
+    borderRadius: 1000,
+    marginRight: theme.space[0.75],
+    backgroundColor: btcColor
+  }), [theme.space]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center'
+    }, style],
+    children: [!hideDot && /*#__PURE__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, _extends({
+      font: font,
+      style: {
+        color: btcColor
+      }
+    }, props, {
+      children: label
+    }))]
+  });
+}));
 const ColoredPeriodSelectorExample = () => {
   const tabs = [{
     id: '1H',
-    label: /*#__PURE__*/_jsx(LiveTabLabel, {
-      dangerouslySetColor: btcColor
-    })
+    label: /*#__PURE__*/_jsx(BTCLiveLabel, {})
   }, {
     id: '1D',
     label: '1D'
@@ -283,12 +297,26 @@ const ColoredExcludingLivePeriodSelectorExample = () => {
     tabs: tabs
   });
 };
-export const All = () => {
-  return /*#__PURE__*/_jsx(VStack, {
-    gap: 2,
-    children: /*#__PURE__*/_jsx(Example, {
-      title: "Basic Example",
+export default function All() {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
       children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
-    })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Min Width",
+      children: /*#__PURE__*/_jsx(MinWidthPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Live Period",
+      children: /*#__PURE__*/_jsx(LivePeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Too Many Periods",
+      children: /*#__PURE__*/_jsx(TooManyPeriodsSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored (BTC)",
+      children: /*#__PURE__*/_jsx(ColoredPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored Excluding Live",
+      children: /*#__PURE__*/_jsx(ColoredExcludingLivePeriodSelectorExample, {})
+    })]
   });
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.2",
+  "version": "3.4.0-beta.4",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -32,9 +32,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.14.0",
+    "@coinbase/cds-common": "^8.17.4",
     "@coinbase/cds-lottie-files": "^3.3.2",
-    "@coinbase/cds-mobile": "^8.14.0",
+    "@coinbase/cds-mobile": "^8.17.4",
     "@coinbase/cds-utils": "^2.3.3",
     "react": "^18.3.1",
     "react-native": "^0.74.5",
@@ -52,9 +52,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.14.0",
+    "@coinbase/cds-common": "^8.17.4",
     "@coinbase/cds-lottie-files": "^3.3.2",
-    "@coinbase/cds-mobile": "^8.14.0",
+    "@coinbase/cds-mobile": "^8.17.4",
     "@coinbase/cds-utils": "^2.3.3",
     "@figma/code-connect": "^1.3.4",
     "@types/react": "^18.3.12",