@coinbase/cds-common 0.0.0 → 8.13.1

package/esm/stepper/utils.js

@@ -0,0 +1,45 @@
+/**
+ * Checks if a step or any of its descendants contains the target step ID
+ */
+export function containsStep(_ref) {
+  let {
+    step,
+    targetStepId
+  } = _ref;
+  if (!step.subSteps) return false;
+  return step.subSteps.some(subStep => {
+    if (subStep.id === targetStepId) return true;
+    return containsStep({
+      step: subStep,
+      targetStepId
+    });
+  });
+}
+
+/**
+ * Flattens a tree of steps into a linear array in the order they appear when rendered
+ */
+export function flattenSteps(steps) {
+  const result = [];
+  for (const step of steps) {
+    result.push(step);
+    if (step.subSteps) result.push(...flattenSteps(step.subSteps));
+  }
+  return result;
+}
+
+/**
+ * Checks if a step should be considered "visited" based on step progression.
+ * A step is visited if it comes before the active step in the flattened order.
+ */
+export function isStepVisited(_ref2) {
+  let {
+    step,
+    activeStepId,
+    flatStepIds
+  } = _ref2;
+  const currentIndex = flatStepIds.indexOf(step.id);
+  const activeIndex = flatStepIds.indexOf(activeStepId);
+  // Step is visited if the active step comes after it in the flattened order
+  return activeIndex > currentIndex;
+}

package/esm/system/EventHandlerProvider.js

@@ -0,0 +1,24 @@
+import React, { createContext, useMemo } from 'react';
+
+// Event Custom Config
+// {
+//   actions: [],
+//   component_name: 'trade',
+//   custom_data: {
+//     side: 'buy'
+//   }
+// }
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_EVENT_HANDLER_CONTEXT = {};
+export const EventHandlerContext = /*#__PURE__*/createContext(DEFAULT_EVENT_HANDLER_CONTEXT);
+export const EventHandlerProvider = _ref => {
+  let {
+    config,
+    children
+  } = _ref;
+  const configuration = useMemo(() => config !== null && config !== void 0 ? config : DEFAULT_EVENT_HANDLER_CONTEXT, [config]);
+  return /*#__PURE__*/_jsx(EventHandlerContext.Provider, {
+    value: configuration,
+    children: children
+  });
+};

package/esm/system/LocaleProvider.js

@@ -0,0 +1,19 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LocaleContext = /*#__PURE__*/createContext({
+  locale: 'en-US'
+});
+export const LocaleProvider = _ref => {
+  let {
+    locale,
+    children
+  } = _ref;
+  const value = useMemo(() => ({
+    locale
+  }), [locale]);
+  return /*#__PURE__*/_jsx(LocaleContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+export const useLocale = () => useContext(LocaleContext);

package/esm/system/RefMapContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+export const RefMapContext = /*#__PURE__*/createContext({});
+export const useRefMapContext = () => {
+  const context = useContext(RefMapContext);
+  if (!context.refs) throw Error('useRefMapContext must be called inside a RefMapProvider');
+  return context;
+};

package/esm/tabs/TabsContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+export const TabsContext = /*#__PURE__*/createContext(undefined);
+export const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) throw Error('useTabsContext must be used within a TabsContext.Provider');
+  return context;
+};

package/esm/tabs/useTabs.js

@@ -0,0 +1,43 @@
+import { useCallback, useMemo } from 'react';
+/** A controlled hook for managing tabs state, such as the currently active tab. */
+export const useTabs = _ref => {
+  let {
+    tabs,
+    activeTab,
+    disabled,
+    onChange
+  } = _ref;
+  const updateActiveTab = useCallback(tabId => {
+    let newActiveTab = null;
+    if (typeof tabId === 'string') {
+      var _tabs$find;
+      newActiveTab = (_tabs$find = tabs.find(tab => tab.id === tabId)) !== null && _tabs$find !== void 0 ? _tabs$find : tabs[0];
+    }
+    if (newActiveTab !== activeTab) onChange(newActiveTab);
+  }, [activeTab, tabs, onChange]);
+  const goNextTab = useCallback(() => {
+    if (!activeTab || activeTab === tabs.at(-1)) return;
+    const activeTabIndex = tabs.indexOf(activeTab);
+    // Find next tab that isn't disabled
+    for (let i = activeTabIndex + 1; i < tabs.length; i++) {
+      if (!tabs[i].disabled) return onChange(tabs[i]);
+    }
+  }, [activeTab, onChange, tabs]);
+  const goPreviousTab = useCallback(() => {
+    if (!activeTab || activeTab === tabs[0]) return;
+    const activeTabIndex = tabs.indexOf(activeTab);
+    // Find previous tab that isn't disabled
+    for (let i = activeTabIndex - 1; i > -1; i--) {
+      if (!tabs[i].disabled) return onChange(tabs[i]);
+    }
+  }, [activeTab, onChange, tabs]);
+  const api = useMemo(() => ({
+    tabs,
+    activeTab,
+    disabled,
+    updateActiveTab,
+    goNextTab,
+    goPreviousTab
+  }), [tabs, activeTab, disabled, updateActiveTab, goNextTab, goPreviousTab]);
+  return api;
+};

package/esm/tokens/accordion.js

@@ -0,0 +1,6 @@
+export const accordionSpacing = {
+  paddingTop: 2,
+  paddingX: 3,
+  paddingBottom: 3
+};
+export const accordionMinWidth = 300;

package/esm/tokens/appSwitcher.js

@@ -0,0 +1,3 @@
+export const appSwitcherWidth = 359;
+export const denseAppSwitcherWidth = 324;
+export const appSwitcherMaxSize = 600;

package/esm/tokens/avatar.js

@@ -0,0 +1,13 @@
+export const colorSchemeMap = {
+  blue: 'blue60',
+  teal: 'teal60',
+  purple: 'purple60',
+  pink: 'pink60',
+  green: 'green60',
+  gray: 'gray60',
+  orange: 'orange60',
+  yellow: 'yellow60',
+  indigo: 'indigo60',
+  red: 'red60',
+  chartreuse: 'chartreuse60'
+};

package/esm/tokens/banner.js

@@ -0,0 +1,39 @@
+export const variants = {
+  informational: {
+    background: 'bgSecondary',
+    iconColor: 'fgPrimary',
+    textColor: 'fg',
+    primaryActionColor: 'fgPrimary',
+    secondaryActionColor: 'fg',
+    iconButtonColor: 'fg',
+    borderColor: 'bgPrimary'
+  },
+  promotional: {
+    background: 'bgPrimaryWash',
+    iconColor: 'fgPrimary',
+    textColor: 'fg',
+    primaryActionColor: 'fgPrimary',
+    secondaryActionColor: 'fg',
+    iconButtonColor: 'fg',
+    borderColor: 'bgPrimary'
+  },
+  warning: {
+    background: 'bgWarningWash',
+    iconColor: 'fgWarning',
+    textColor: 'fg',
+    primaryActionColor: 'fgPrimary',
+    secondaryActionColor: 'fg',
+    iconButtonColor: 'fg',
+    borderColor: 'bgWarning'
+  },
+  error: {
+    background: 'bgNegativeWash',
+    iconColor: 'fgNegative',
+    textColor: 'fg',
+    primaryActionColor: 'fgPrimary',
+    secondaryActionColor: 'fg',
+    iconButtonColor: 'fg',
+    borderColor: 'bgNegative'
+  }
+};
+export const bannerMinWidth = 320;

package/esm/tokens/borderRadius.js

@@ -0,0 +1,7 @@
+export const shapeBorderRadius = {
+  circle: 1e5,
+  squircle: 8,
+  square: 4,
+  rectangle: 0,
+  hexagon: 0
+};

package/esm/tokens/button.js

@@ -0,0 +1,64 @@
+export const variants = {
+  primary: {
+    color: 'fgInverse',
+    background: 'bgPrimary',
+    borderColor: 'bgPrimary'
+  },
+  secondary: {
+    color: 'fg',
+    background: 'bgSecondary',
+    borderColor: 'bgSecondary'
+  },
+  tertiary: {
+    color: 'fgInverse',
+    background: 'bgInverse',
+    borderColor: 'bgInverse'
+  },
+  foregroundMuted: {
+    color: 'fgMuted',
+    background: 'bgSecondary',
+    borderColor: 'bgLine'
+  },
+  positive: {
+    color: 'fgInverse',
+    background: 'bgPositive',
+    borderColor: 'bgPositive'
+  },
+  negative: {
+    color: 'fgInverse',
+    background: 'bgNegative',
+    borderColor: 'bgNegative'
+  }
+};
+export const transparentVariants = {
+  primary: {
+    color: 'fgPrimary',
+    background: 'bg',
+    borderColor: 'transparent'
+  },
+  secondary: {
+    color: 'fg',
+    background: 'bg',
+    borderColor: 'transparent'
+  },
+  tertiary: {
+    color: 'fg',
+    background: 'bg',
+    borderColor: 'transparent'
+  },
+  foregroundMuted: {
+    color: 'fgMuted',
+    background: 'bg',
+    borderColor: 'transparent'
+  },
+  positive: {
+    color: 'fgPositive',
+    background: 'bg',
+    borderColor: 'transparent'
+  },
+  negative: {
+    color: 'fgNegative',
+    background: 'bg',
+    borderColor: 'transparent'
+  }
+};

package/esm/tokens/card.js

@@ -0,0 +1,29 @@
+import { convertDimensionToSize } from '../utils/convertDimensionToSize';
+export const cardSizes = {
+  small: {
+    width: 136,
+    height: 144
+  },
+  medium: {
+    width: 312,
+    height: 192
+  },
+  large: {
+    width: undefined,
+    height: undefined
+  }
+};
+export const defaultMediaDimension = '96x96';
+export const defaultPictogramMediaDimension = '64x64';
+export const defaultMediaSize = convertDimensionToSize(defaultMediaDimension);
+export const defaultSpacingBottom = 2;
+export const upsellCardMinHeight = 158;
+export const upsellCardDefaultWidth = 327;
+export const containedAssetCardLargeWidth = 359;
+export const containedAssetCardSmallDimension = 156;
+export const containedAssetCardLargeDimension = 327;
+export const floatingAssetCardLargeWidth = 359;
+export const floatingAssetCardSmallDimension = 156;
+export const defaultNudgeCardWidth = 327;
+export const contentCardMinWidth = 280;
+export const contentCardMaxWidth = 800;

package/esm/tokens/cell.js

@@ -0,0 +1,40 @@
+import { gutter } from './sizing';
+export const mediaSize = 32;
+
+// Height of the inner cell without padding
+export const imageSize = 48;
+export const pictogramScaleMultiplier = 1;
+export const listHeight = 80;
+export const compactListHeight = 40;
+
+/** Spacing configs for Cells to be parsed in [web/mobile]/hooks/useCellSpacing */
+
+/** Default spacing config */
+export const defaultSpacingConfig = {
+  innerSpacing: {
+    paddingX: 2,
+    paddingY: 1,
+    marginX: -2
+  },
+  outerSpacing: {
+    paddingX: gutter,
+    paddingY: 1,
+    marginX: 0
+  }
+};
+export const selectOptionHeight = 56;
+export const cellPriorities = ['start', 'middle', 'end'];
+export const cellHelperTextVariants = {
+  information: {
+    iconName: 'info',
+    color: 'fgMuted'
+  },
+  warning: {
+    iconName: 'warning',
+    color: 'fgWarning'
+  },
+  error: {
+    iconName: 'error',
+    color: 'fgNegative'
+  }
+};

package/esm/tokens/chip.js

@@ -0,0 +1 @@
+export const chipMaxWidth = 200;

package/esm/tokens/dot.js

@@ -0,0 +1,31 @@
+export const avatarIconSizeMap = {
+  xxxl: 's',
+  xxl: 's',
+  xl: 's',
+  l: 'xs',
+  m: 'xs',
+  s: 'xs'
+};
+export const avatarDotSizeMap = {
+  xxxl: 'm',
+  xxl: 'm',
+  xl: 'm',
+  l: 's',
+  m: 'xs',
+  s: 'xs'
+};
+export const dotCountSize = 24;
+
+// This works for the purposes of TabNavigation, but it's not stable
+// TODO Update this with more stable values
+export const dotSizeTokens = {
+  s: 28,
+  m: 36,
+  l: 42
+};
+export const getDotSize = count => {
+  if (!count || count < 10) return dotSizeTokens.s;
+  if (count >= 10) return dotSizeTokens.m;
+  if (count >= 100) return dotSizeTokens.l;
+  return dotSizeTokens.s;
+};

package/esm/tokens/drawer.js

@@ -0,0 +1,11 @@
+/** Max percentage of View height the drawer can take up */
+export const verticalDrawerPercentageOfView = 0.75;
+/** Max percentage of View width the drawer can take up */
+export const horizontalDrawerPercentageOfView = 0.85;
+/** The maximum percentage of the View height that the Drawer can take up before being considered large */
+export const drawerHeightThreshold = 0.4;
+/** HandleBar offset from Tray/Bottom Drawer */
+export const handleBarOffset = 60;
+export const handleBarHeight = 4;
+/** Based on trial and error this seems to normalize the relationship between pan gesture distance and drawer translation */
+export const normalizeDrawerPanDistanceMultiplier = 1.1;

package/esm/tokens/illustrations.js

@@ -0,0 +1,28 @@
+export const illustrationDimensions = {
+  heroSquare: ['240x240', '200x200'],
+  spotRectangle: ['240x120'],
+  spotSquare: ['96x96'],
+  spotIcon: ['32x32', '24x24'],
+  pictogram: ['48x48', '64x64']
+};
+export const illustrationDimensionDefaults = {
+  all: '48x48',
+  heroSquare: '240x240',
+  pictogram: '48x48',
+  spotSquare: '96x96',
+  spotIcon: '32x32',
+  spotRectangle: '240x120'
+};
+
+/** [width, height] tuples for allowed dimensions */
+export const illustrationSizes = {
+  '24x24': [24, 24],
+  '32x32': [32, 32],
+  '48x48': [48, 48],
+  '64x64': [64, 64],
+  '96x96': [96, 96],
+  '120x120': [120, 120],
+  '200x200': [200, 200],
+  '240x120': [240, 120],
+  '240x240': [240, 240]
+};

package/esm/tokens/input.js

@@ -0,0 +1,5 @@
+/** Focused/Unfocused Styling */
+export const inputBorderWidth = 1;
+export const focusedInputBorderWidth = 2;
+export const inputStackGap = 0.5;
+export const helperTextHeight = 20;

package/esm/tokens/interactable.js

@@ -0,0 +1,4 @@
+export const opacityHovered = 0.88;
+export const opacityPressed = 0.82;
+export const accessibleOpacityDisabled = 0.5;
+export const opacityDisabled = 0.75;

package/esm/tokens/interactableHeight.js

@@ -0,0 +1,4 @@
+export const interactableHeight = {
+  regular: 56,
+  compact: 40
+};

package/esm/tokens/menu.js

@@ -0,0 +1,2 @@
+export const sidebarMenuMinWidth = 240;
+export const sidebarMenuMaxWidth = 327;

package/esm/tokens/multiContentModule.js

@@ -0,0 +1 @@
+export const defaultMaxWidth = 450;

package/esm/tokens/navigation.js

@@ -0,0 +1 @@
+export const navigationBarMinHeight = 80;

package/esm/tokens/overlays.js

@@ -0,0 +1 @@
+export const FOCUSABLE_ELEMENTS = 'a[href], button:not([disabled]), textarea, input, select';

package/esm/tokens/page.js

@@ -0,0 +1,2 @@
+export const pageHeaderHeight = 72;
+export const pageFooterHeight = 80;

package/esm/tokens/select.js

@@ -0,0 +1,26 @@
+import { gutter } from './sizing';
+export const labelTextColor = 'foreground';
+
+/** Spacing config for Select Option (web) */
+export const selectCellSpacingConfig = {
+  outerSpacing: {
+    paddingX: 0,
+    paddingY: 0
+  },
+  innerSpacing: {
+    marginX: 0,
+    paddingX: 2
+  }
+};
+
+/** Spacing config for Select Option (mobile) */
+export const selectCellMobileSpacingConfig = {
+  outerSpacing: {
+    paddingX: 0,
+    paddingY: 0
+  },
+  innerSpacing: {
+    marginX: 0,
+    paddingX: gutter
+  }
+};

package/esm/tokens/sidebar.js

@@ -0,0 +1,2 @@
+export const sidebarGutter = 1;
+export const sidebarHorizontalSpacing = 2;

package/esm/tokens/sizing.js

@@ -0,0 +1,2 @@
+export const gutter = 3;
+export const tapTarget = 40;

package/esm/tokens/sparkline.js

@@ -0,0 +1,24 @@
+import { durations } from '../motion/tokens';
+export const chartHeight = 320;
+export const chartCompactHeight = 120;
+export const maskOpacity = 0.8;
+export const lineOpacity = 0.4;
+export const lineDashArray = [2, 4];
+export const fadeDuration = durations.moderate1;
+
+// This list may not be exhaustive, but callsites use period.label as a fallback
+export const periodLabelMap = {
+  '1H': '1 hour',
+  '1D': '1 day',
+  '1W': '1 week',
+  '1M': '1 month',
+  '1Y': '1 year'
+};
+export const subheadIconSignMap = {
+  positive: '+',
+  negative: '-',
+  upwardTrend: '\u2197',
+  downwardTrend: '\u2198',
+  '': ''
+};
+export const borderWidth = 2;

package/esm/tokens/tags.js

@@ -0,0 +1,66 @@
+export const tagHorizontalSpacing = {
+  informational: 0.5,
+  promotional: 1
+};
+export const tagFontMap = {
+  informational: 'label1',
+  promotional: 'caption'
+};
+export const tagBorderRadiusMap = {
+  informational: 100,
+  promotional: 1000
+};
+export const tagColorMap = {
+  informational: {
+    green: {
+      background: 'green0',
+      foreground: 'green60'
+    },
+    blue: {
+      background: 'blue0',
+      foreground: 'blue60'
+    },
+    yellow: {
+      background: 'yellow0',
+      foreground: 'yellow70'
+    },
+    purple: {
+      background: 'purple0',
+      foreground: 'purple80'
+    },
+    red: {
+      background: 'red0',
+      foreground: 'red60'
+    },
+    gray: {
+      background: 'gray10',
+      foreground: 'gray80'
+    }
+  },
+  promotional: {
+    green: {
+      background: 'green60',
+      foreground: 'green0'
+    },
+    blue: {
+      background: 'blue60',
+      foreground: 'blue0'
+    },
+    yellow: {
+      background: 'yellow30',
+      foreground: 'yellow70'
+    },
+    purple: {
+      background: 'purple80',
+      foreground: 'purple0'
+    },
+    red: {
+      background: 'red60',
+      foreground: 'red0'
+    },
+    gray: {
+      background: 'gray80',
+      foreground: 'gray10'
+    }
+  }
+};

package/esm/tokens/tile.js

@@ -0,0 +1,9 @@
+export const pictogramSize = 48;
+export const pictogramWrapperSize = 62;
+
+/*
+ * Multipliers used to ensure estimation of asset dimensions
+ * are as close as possible to dimensions in Figma specs
+ * so that overflow detection works as expected
+ */
+export const pictogramScaleMultiplier = 0.8;

package/esm/tokens/toast.js

@@ -0,0 +1,4 @@
+export const defaultDuration = 5000;
+export const withActionDuration = 2000;
+export const perCharsDuration = 300;
+export const charsThreshold = 50;

package/esm/tokens/tooltip.js

@@ -0,0 +1,5 @@
+export const tooltipMaxWidth = 260;
+
+// Padding around text inside tooltip.
+export const tooltipPaddingX = 2;
+export const tooltipPaddingY = 1;

package/esm/tokens/zIndex.js

@@ -0,0 +1,15 @@
+export const zIndex = {
+  interactable: 1,
+  navigation: 2,
+  // Begin portal components
+  portal: 100001,
+  popoverMenu: 2,
+  modal: 3,
+  dropdown: 4,
+  tooltip: 5,
+  toast: 6,
+  alert: 7,
+  tray: 4,
+  // End portal components
+  max: 2147483647
+};

package/esm/tour/TourContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+export const TourContext = /*#__PURE__*/createContext(undefined);
+export const useTourContext = () => {
+  const context = useContext(TourContext);
+  if (!context) throw Error('useTourContext must be called inside a Tour');
+  return context;
+};