@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/page/__stories__/PageHeaderInPage.stories.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button, ButtonGroup, IconButton } from '../../buttons';
+import { ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { PageFooter } from '../PageFooter';
+import { PageHeader } from '../PageHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const exampleProps = {
+  start: /*#__PURE__*/_jsx(IconButton, {
+    name: "backArrow",
+    onPress: NoopFn,
+    testID: "header-back-button"
+  }),
+  title: /*#__PURE__*/_jsx(Text, {
+    font: "title3",
+    children: "Page Title"
+  }),
+  endButtons: /*#__PURE__*/_jsxs(ButtonGroup, {
+    block: true,
+    accessibilityLabel: "Group",
+    children: [/*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      children: "Back"
+    }), /*#__PURE__*/_jsx(Button, {
+      variant: "primary",
+      children: "Next"
+    })]
+  })
+};
+const PageHeaderInPage = () => {
+  const inset = useSafeAreaInsets();
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(ExampleScreen, {
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 0,
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(PageHeader, {
+          background: "bg",
+          end: /*#__PURE__*/_jsx(IconButton, {
+            name: "close",
+            testID: "header-back-button"
+          }),
+          position: "sticky",
+          start: exampleProps.start,
+          title: exampleProps.title,
+          top: "0"
+        }), /*#__PURE__*/_jsx(VStack, {
+          alignContent: "center",
+          alignItems: "center",
+          dangerouslySetBackground: "#FADADD",
+          flexGrow: 1,
+          flexShrink: 1,
+          height: "500px",
+          justifyContent: "center",
+          padding: 10,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "title1",
+            children: "Primary Content"
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: inset.bottom / 2,
+        left: 0,
+        right: 0
+      },
+      children: /*#__PURE__*/_jsx(PageFooter, {
+        action: exampleProps.endButtons
+      })
+    })]
+  });
+};
+export default PageHeaderInPage;

package/esm/section-header/SectionHeader.js

@@ -0,0 +1,60 @@
+const _excluded = ["title", "start", "icon", "iconActive", "testID", "balance", "description", "end", "accessibilityLabel", "padding"];
+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 } from 'react';
+import { Icon } from '../icons';
+import { HStack, VStack } from '../layout';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_ref, ref) {
+  let {
+      title,
+      start,
+      icon,
+      iconActive,
+      testID,
+      balance,
+      description,
+      end,
+      accessibilityLabel,
+      padding = 2
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(HStack, _extends({
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    flexWrap: "wrap",
+    gap: 1,
+    justifyContent: "space-between",
+    padding: padding,
+    testID: testID
+  }, props, {
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      gap: 0.5,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [!!start && start, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          accessibilityRole: "header",
+          font: "title3",
+          children: title
+        }) : title, typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
+          active: iconActive,
+          color: "fg",
+          name: icon,
+          size: "xs"
+        }) : icon]
+      }), typeof balance === 'string' ? /*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: balance
+      }) : balance, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "body",
+        numberOfLines: 2,
+        children: description
+      }) : description]
+    }), !!end && /*#__PURE__*/_jsx(HStack, {
+      children: end
+    })]
+  }));
+}));

package/esm/section-header/__figma__/SectionHeader.figma.js

@@ -0,0 +1,50 @@
+const _excluded = ["searchNode"];
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { HStack } from '../../layout';
+import { SectionHeader } from '../SectionHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(SectionHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=19270%3A19118', {
+  imports: ["import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';"],
+  props: {
+    title: figma.children('string.section title'),
+    balance: figma.enum('type', {
+      'with balance (bottom)': figma.children(['Balance Header', 'Subdetails'])
+    }),
+    searchNode: figma.boolean('show search', {
+      true: figma.children('Search Input (Desktop)'),
+      false: undefined
+    }),
+    spacingBottom: figma.boolean('show bottom spacing', {
+      true: undefined,
+      false: 0
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('↳ start'),
+      false: undefined
+    }),
+    icon: figma.boolean('show icon', {
+      true: figma.children('icon'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.string('↳ string'),
+      false: undefined
+    }),
+    end: figma.boolean('show start', {
+      true: figma.instance('↳ end'),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let {
+        searchNode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsxs(HStack, {
+      children: [/*#__PURE__*/_jsx(SectionHeader, _extends({}, props)), searchNode]
+    });
+  }
+});

package/esm/section-header/__stories__/SectionHeader.stories.js

@@ -0,0 +1,133 @@
+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 React, { useState } from 'react';
+import { View } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button, IconButton } from '../../buttons';
+import { SelectChip } from '../../chips/SelectChip';
+import { SearchInput, SelectOption } from '../../controls';
+import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { Divider, HStack } from '../../layout';
+import { RemoteImage } from '../../media';
+import { Link } from '../../typography/Link';
+import { Text } from '../../typography/Text';
+import { SectionHeader } from '../SectionHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultProps = {
+  title: 'SectionHeader',
+  start: /*#__PURE__*/_jsx(RemoteImage, {
+    shape: "circle",
+    size: "m",
+    source: assets.btc.imageUrl
+  }),
+  icon: /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    color: "fg",
+    name: "info",
+    size: "xs"
+  }),
+  balance: /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "flex-end",
+    flexWrap: "wrap",
+    gap: 0.5,
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      font: "title3",
+      numberOfLines: 1,
+      children: "$3,9081.01"
+    }), /*#__PURE__*/_jsx(Text, {
+      color: "fgPositive",
+      font: "body",
+      children: "\u2197 6.37%"
+    })]
+  }),
+  description: 'Add up to 2 lines of text.',
+  testID: 'section-header'
+};
+const sortOptions = ['BTC', 'ETH', 'LTC'];
+const SelectChipDropdown = () => {
+  const [value, setValue] = useState(sortOptions[0]);
+  return /*#__PURE__*/_jsx(HStack, {
+    justifyContent: "flex-end",
+    children: /*#__PURE__*/_jsx(SelectChip, {
+      active: value !== undefined,
+      onChange: setValue,
+      value: value,
+      children: sortOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+        title: option,
+        value: option
+      }, option))
+    })
+  });
+};
+const SectionHeaderScreen = () => {
+  return /*#__PURE__*/_jsx(View, {
+    children: /*#__PURE__*/_jsxs(ExampleScreen, {
+      children: [/*#__PURE__*/_jsx(SectionHeader, {
+        title: "SectionHeader"
+      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        end: /*#__PURE__*/_jsx(HStack, {
+          paddingTop: 1,
+          children: /*#__PURE__*/_jsx(SearchInput, {
+            compact: true,
+            onChangeText: NoopFn,
+            placeholder: "Placeholder",
+            value: ""
+          })
+        })
+      })), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        end: /*#__PURE__*/_jsx(SelectChipDropdown, {})
+      })), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, {
+        end: /*#__PURE__*/_jsx(HStack, {
+          paddingTop: 1,
+          children: /*#__PURE__*/_jsx(SearchInput, {
+            compact: true,
+            onChangeText: NoopFn,
+            placeholder: "Placeholder",
+            value: ""
+          })
+        }),
+        title: defaultProps.title
+      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        balance: null,
+        end: /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          variant: "secondary",
+          children: "Button"
+        })
+      })), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        balance: null,
+        end: /*#__PURE__*/_jsxs(HStack, {
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            name: "caretLeft"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            name: "caretRight"
+          })]
+        })
+      })), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        balance: null,
+        end: /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: /*#__PURE__*/_jsx(Link, {
+            to: "http://www.coinbase.com",
+            children: "See all"
+          })
+        })
+      })), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        end: /*#__PURE__*/_jsx(IconButton, {
+          name: "upload"
+        }),
+        padding: 0,
+        title: "CompactHeader"
+      })), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {
+        balance: null,
+        end: /*#__PURE__*/_jsx(IconButton, {
+          name: "upload"
+        })
+      }))]
+    })
+  });
+};
+export default SectionHeaderScreen;

package/esm/stepper/DefaultStepperHeaderHorizontal.js

@@ -0,0 +1,78 @@
+const _excluded = ["activeStep", "complete", "flatStepIds", "style", "paddingBottom", "width", "font", "fontFamily"];
+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, useEffect, useMemo } from 'react';
+import { animated, useSpring } from '@react-spring/native';
+import { HStack } from '../layout/HStack';
+import { Text } from '../typography/Text';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const AnimatedHStack = animated(HStack);
+export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function DefaultStepperHeaderHorizontal(_ref) {
+  let {
+      activeStep,
+      complete,
+      flatStepIds,
+      style,
+      paddingBottom = 1.5,
+      width = '100%',
+      font = 'caption',
+      fontFamily = font
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [spring, springApi] = useSpring({
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    },
+    reset: true
+  }, []);
+
+  // TO DO: resetting the spring doesn't work like it does in react-spring on web
+  // need to look into this deeper and understand why there is a difference in behavior
+  useEffect(() => {
+    springApi.start({
+      from: {
+        opacity: 0
+      },
+      to: {
+        opacity: 1
+      },
+      reset: true
+    });
+  }, [springApi, activeStep]);
+  const styles = useMemo(() => [style, spring], [style, spring]);
+  const flatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
+  const emptyText = ' '; // Simple space for React Native
+
+  return /*#__PURE__*/_jsx(AnimatedHStack, _extends({
+    paddingBottom: paddingBottom,
+    position: "relative",
+    style: styles,
+    width: width
+  }, props, {
+    children: /*#__PURE__*/_jsx(Text, {
+      alignItems: "center",
+      display: "flex",
+      font: "caption",
+      fontFamily: fontFamily,
+      children: !activeStep || complete ? emptyText : /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          accessibilityElementsHidden: true,
+          color: "fgMuted",
+          font: font,
+          fontFamily: fontFamily,
+          paddingEnd: 1,
+          children: [flatStepIndex + 1, "/", flatStepIds.length]
+        }), activeStep.label && typeof activeStep.label === 'string' ? /*#__PURE__*/_jsx(Text, {
+          font: font,
+          fontFamily: fontFamily,
+          numberOfLines: 1,
+          children: activeStep.label
+        }) : activeStep.label]
+      })
+    })
+  }));
+});

package/esm/stepper/DefaultStepperIconVertical.js

@@ -0,0 +1,34 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "defaultName", "activeName", "descendentActiveName", "visitedName", "completeName", "size", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor"];
+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 } from 'react';
+import { Icon } from '../icons/Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperIconVertical = /*#__PURE__*/memo(function DefaultStepperIconVertical(_ref) {
+  let {
+      depth,
+      active,
+      visited,
+      complete,
+      isDescendentActive,
+      defaultName = 'outline',
+      activeName = 'outline',
+      descendentActiveName = 'outline',
+      visitedName = 'circleCheckmark',
+      completeName = 'circleCheckmark',
+      size = 's',
+      defaultColor = 'bgLine',
+      activeColor = 'bgLinePrimarySubtle',
+      descendentActiveColor = 'bgLinePrimarySubtle',
+      visitedColor = 'bgPrimary',
+      completeColor = 'bgPrimary'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (depth > 0) return null;
+  return /*#__PURE__*/_jsx(Icon, _extends({
+    active: true,
+    color: complete ? completeColor : active ? activeColor : isDescendentActive ? descendentActiveColor : visited ? visitedColor : defaultColor,
+    name: complete ? completeName : active ? activeName : isDescendentActive ? descendentActiveName : visited ? visitedName : defaultName,
+    size: size
+  }, props));
+});

package/esm/stepper/DefaultStepperLabelVertical.js

@@ -0,0 +1,61 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "completedStepAccessibilityLabel", "setActiveStepLabelElement", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor", "paddingBottom", "font", "fontFamily"];
+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, useCallback, useMemo } from 'react';
+import { Box } from '../layout/Box';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperLabelVertical = /*#__PURE__*/memo(function DefaultStepperLabelVertical(_ref) {
+  let {
+      step,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      style,
+      completedStepAccessibilityLabel,
+      setActiveStepLabelElement,
+      defaultColor = 'fgMuted',
+      activeColor = 'fgPrimary',
+      descendentActiveColor = 'fgPrimary',
+      visitedColor = 'fgMuted',
+      completeColor = 'fgMuted',
+      paddingBottom = 3,
+      font = depth === 0 ? 'label1' : 'label2',
+      fontFamily = font
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const flatStepIndex = flatStepIds.indexOf(step.id);
+  const accessibilityLabel = useMemo(() => {
+    var _ref2, _step$accessibilityLa;
+    const pagination = flatStepIndex + 1 + " of " + flatStepIds.length;
+    const stepLabel = typeof step.label === 'string' ? step.label : null;
+    const baseLabel = (_ref2 = (_step$accessibilityLa = step.accessibilityLabel) != null ? _step$accessibilityLa : stepLabel) != null ? _ref2 : "Step " + (flatStepIndex + 1);
+    return "" + baseLabel + (visited || complete ? " (" + completedStepAccessibilityLabel + ")" : '') + " " + pagination;
+  }, [step.accessibilityLabel, step.label, flatStepIndex, visited, complete, flatStepIds.length, completedStepAccessibilityLabel]);
+  const accessibilityState = useMemo(() => ({
+    selected: active
+  }), [active]);
+  const registerActiveStepLabel = useCallback(node => {
+    if (!active) return;
+    if (node) setActiveStepLabelElement(node);
+  }, [active, setActiveStepLabelElement]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    ref: registerActiveStepLabel,
+    accessible: true,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: accessibilityState,
+    paddingBottom: paddingBottom,
+    style: style
+  }, props, {
+    children: !!step.label && typeof step.label === 'string' ? /*#__PURE__*/_jsx(Text, {
+      color: complete ? completeColor : active ? activeColor : isDescendentActive ? descendentActiveColor : visited ? visitedColor : defaultColor,
+      font: font,
+      fontFamily: fontFamily,
+      numberOfLines: 1,
+      children: step.label
+    }) : step.label
+  }));
+});

package/esm/stepper/DefaultStepperProgressHorizontal.js

@@ -0,0 +1,42 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "progress", "complete", "isDescendentActive", "progressSpringConfig", "animate", "disableAnimateOnMount", "style", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "borderRadius", "height"];
+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 } from 'react';
+import { animated, to } from '@react-spring/native';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedBox = animated(Box);
+export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function DefaultStepperProgressHorizontal(_ref) {
+  let {
+      active,
+      visited,
+      progress,
+      complete,
+      isDescendentActive,
+      style,
+      background = 'bgLine',
+      defaultFill = 'bgPrimary',
+      activeFill = 'bgPrimary',
+      descendentActiveFill = 'bgPrimary',
+      visitedFill = 'bgLinePrimarySubtle',
+      completeFill = 'bgLinePrimarySubtle',
+      borderRadius = 200,
+      height = 4
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    accessibilityElementsHidden: true,
+    background: background,
+    borderRadius: borderRadius,
+    flexGrow: 1,
+    height: height,
+    style: style
+  }, props, {
+    children: /*#__PURE__*/_jsx(AnimatedBox, {
+      background: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
+      borderRadius: borderRadius,
+      height: "100%",
+      width: to([progress], width => width * 100 + "%")
+    })
+  }));
+});

package/esm/stepper/DefaultStepperProgressVertical.js

@@ -0,0 +1,87 @@
+const _excluded = ["step", "parentStep", "activeStepId", "progress", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "activeStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "minHeight", "width"];
+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, useCallback, useMemo } from 'react';
+import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
+import { flattenSteps } from '@coinbase/cds-common/stepper/utils';
+import { animated, to, useSpring } from '@react-spring/native';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedBox = animated(Box);
+export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function DefaultStepperProgressVertical(_ref) {
+  let {
+      step,
+      activeStepId,
+      progress,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      style,
+      progressSpringConfig,
+      animate = true,
+      disableAnimateOnMount,
+      background = 'bgLine',
+      defaultFill = 'bgLinePrimarySubtle',
+      activeFill = 'bgLinePrimarySubtle',
+      descendentActiveFill = 'bgLinePrimarySubtle',
+      visitedFill = 'bgPrimary',
+      completeFill = 'bgPrimary',
+      minHeight = 16,
+      width = 2
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const hasMounted = useHasMounted();
+  const isLastStep = flatStepIds[flatStepIds.length - 1] === step.id;
+
+  // Count the total number of sub-steps in the current step's tree
+  const countAllSubSteps = useCallback(steps => {
+    const flatSteps = flattenSteps(steps);
+    return flatSteps.length;
+  }, []);
+
+  // Find the position of a target step in the flattened substep tree (1-based index)
+  const findSubStepPosition = useCallback((steps, targetId) => {
+    if (!targetId) return -1;
+    const flatSteps = flattenSteps(steps);
+    const stepIndex = flatSteps.findIndex(step => step.id === targetId);
+    return stepIndex + 1;
+  }, []);
+  const progressHeight = useMemo(() => {
+    var _step$subSteps;
+    const totalSubSteps = countAllSubSteps((_step$subSteps = step.subSteps) != null ? _step$subSteps : []);
+    if (complete) return 1;
+    if (active && totalSubSteps === 0) return 1;
+    if (active && !isDescendentActive) return 0;
+    if (isDescendentActive) {
+      var _step$subSteps2;
+      const activePosition = findSubStepPosition((_step$subSteps2 = step.subSteps) != null ? _step$subSteps2 : [], activeStepId);
+      return activePosition / totalSubSteps;
+    }
+    if (visited) return 1;
+    return 0;
+  }, [countAllSubSteps, step.subSteps, complete, active, isDescendentActive, visited, findSubStepPosition, activeStepId]);
+  const fillHeightSpring = useSpring({
+    height: progressHeight,
+    immediate: !animate || disableAnimateOnMount && !hasMounted,
+    config: progressSpringConfig
+  });
+  if (depth > 0 || isLastStep) return null;
+  return /*#__PURE__*/_jsx(Box, _extends({
+    background: background,
+    flexGrow: 1,
+    minHeight: minHeight,
+    position: "relative",
+    style: style,
+    width: width
+  }, props, {
+    children: /*#__PURE__*/_jsx(AnimatedBox, {
+      background: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
+      height: to([progress, fillHeightSpring.height], (p, h) => p * h * 100 + "%"),
+      position: "absolute",
+      width: "100%"
+    })
+  }));
+});