@coinbase/cds-common 0.0.0 → 8.13.1

package/esm/tour/useTour.js

@@ -0,0 +1,84 @@
+import { useCallback, useMemo } from 'react';
+
+/**
+ * The TourStepArrowComponent must forwardRef onto the underlying element for `@floating-ui` to correctly position the element.
+ */
+
+/**
+ * Web only.
+ */
+
+/** A controlled hook for managing tour state, such as the currently active tour step. */
+export const useTour = _ref => {
+  let {
+    steps,
+    activeTourStep,
+    onChange
+  } = _ref;
+  const startTour = useCallback(async tourStepId => {
+    if (typeof tourStepId === 'undefined') return onChange(steps[0]);
+    let newActiveTourStep = null;
+    if (typeof tourStepId === 'string') {
+      newActiveTourStep = steps.find(step => step.id === tourStepId);
+      newActiveTourStep || (newActiveTourStep = steps[0]);
+    }
+    if (newActiveTourStep !== activeTourStep) {
+      var _activeTourStep$onBef, _newActiveTourStep, _newActiveTourStep$on, _activeTourStep$onIna, _newActiveTourStep2, _newActiveTourStep2$o;
+      await Promise.all([activeTourStep === null || activeTourStep === void 0 || (_activeTourStep$onBef = activeTourStep.onBeforeInactive) === null || _activeTourStep$onBef === void 0 ? void 0 : _activeTourStep$onBef.call(activeTourStep), (_newActiveTourStep = newActiveTourStep) === null || _newActiveTourStep === void 0 || (_newActiveTourStep$on = _newActiveTourStep.onBeforeActive) === null || _newActiveTourStep$on === void 0 ? void 0 : _newActiveTourStep$on.call(_newActiveTourStep)]);
+      onChange(newActiveTourStep);
+      await Promise.all([activeTourStep === null || activeTourStep === void 0 || (_activeTourStep$onIna = activeTourStep.onInactive) === null || _activeTourStep$onIna === void 0 ? void 0 : _activeTourStep$onIna.call(activeTourStep), (_newActiveTourStep2 = newActiveTourStep) === null || _newActiveTourStep2 === void 0 || (_newActiveTourStep2$o = _newActiveTourStep2.onActive) === null || _newActiveTourStep2$o === void 0 ? void 0 : _newActiveTourStep2$o.call(_newActiveTourStep2)]);
+    }
+  }, [activeTourStep, steps, onChange]);
+  const setActiveTourStep = useCallback(async tourStepId => startTour(tourStepId), [startTour]);
+  const stopTour = useCallback(async () => {
+    var _activeTourStep$onBef2, _activeTourStep$onIna2;
+    if (activeTourStep === null) return;
+    await ((_activeTourStep$onBef2 = activeTourStep.onBeforeInactive) === null || _activeTourStep$onBef2 === void 0 ? void 0 : _activeTourStep$onBef2.call(activeTourStep));
+    onChange(null);
+    await ((_activeTourStep$onIna2 = activeTourStep.onInactive) === null || _activeTourStep$onIna2 === void 0 ? void 0 : _activeTourStep$onIna2.call(activeTourStep));
+  }, [activeTourStep, onChange]);
+  const goNextTourStep = useCallback(async () => {
+    var _steps$at;
+    // If no active step, or active step is the last step, or there are 0 - 1 steps, do nothing
+    if (!activeTourStep || activeTourStep.id === ((_steps$at = steps.at(-1)) === null || _steps$at === void 0 ? void 0 : _steps$at.id) || steps.length < 2) return;
+    const activeStepIndex = steps.findIndex(step => step.id === activeTourStep.id);
+    // Find next step that isn't disabled
+    for (let i = activeStepIndex + 1; i < steps.length; i++) {
+      const step = steps[i];
+      if (!step.disabled) {
+        var _activeTourStep$onBef3, _step$onBeforeActive, _activeTourStep$onIna3, _step$onActive;
+        await Promise.all([(_activeTourStep$onBef3 = activeTourStep.onBeforeInactive) === null || _activeTourStep$onBef3 === void 0 ? void 0 : _activeTourStep$onBef3.call(activeTourStep), (_step$onBeforeActive = step.onBeforeActive) === null || _step$onBeforeActive === void 0 ? void 0 : _step$onBeforeActive.call(step)]);
+        onChange(step);
+        await Promise.all([(_activeTourStep$onIna3 = activeTourStep.onInactive) === null || _activeTourStep$onIna3 === void 0 ? void 0 : _activeTourStep$onIna3.call(activeTourStep), (_step$onActive = step.onActive) === null || _step$onActive === void 0 ? void 0 : _step$onActive.call(step)]);
+        return;
+      }
+    }
+  }, [activeTourStep, steps, onChange]);
+  const goPreviousTourStep = useCallback(async () => {
+    var _steps$;
+    // If no active step, or active step is the first step, or there are 0 - 1 steps, do nothing
+    if (!activeTourStep || activeTourStep.id === ((_steps$ = steps[0]) === null || _steps$ === void 0 ? void 0 : _steps$.id) || steps.length < 2) return;
+    const activeStepIndex = steps.findIndex(step => step.id === activeTourStep.id);
+    // Find previous step that isn't disabled
+    for (let i = activeStepIndex - 1; i >= 0; i--) {
+      const step = steps[i];
+      if (!step.disabled) {
+        var _activeTourStep$onBef4, _step$onBeforeActive2, _activeTourStep$onIna4, _step$onActive2;
+        await Promise.all([(_activeTourStep$onBef4 = activeTourStep.onBeforeInactive) === null || _activeTourStep$onBef4 === void 0 ? void 0 : _activeTourStep$onBef4.call(activeTourStep), (_step$onBeforeActive2 = step.onBeforeActive) === null || _step$onBeforeActive2 === void 0 ? void 0 : _step$onBeforeActive2.call(step)]);
+        onChange(step);
+        await Promise.all([(_activeTourStep$onIna4 = activeTourStep.onInactive) === null || _activeTourStep$onIna4 === void 0 ? void 0 : _activeTourStep$onIna4.call(activeTourStep), (_step$onActive2 = step.onActive) === null || _step$onActive2 === void 0 ? void 0 : _step$onActive2.call(step)]);
+        return;
+      }
+    }
+  }, [activeTourStep, steps, onChange]);
+  const api = useMemo(() => ({
+    steps,
+    activeTourStep,
+    setActiveTourStep,
+    startTour,
+    stopTour,
+    goNextTourStep,
+    goPreviousTourStep
+  }), [steps, activeTourStep, setActiveTourStep, startTour, stopTour, goNextTourStep, goPreviousTourStep]);
+  return api;
+};

package/esm/types/AvatarBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/AvatarSize.js

@@ -0,0 +1 @@
+export {};

package/esm/types/BannerBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/BoxBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/ButtonBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/CardHeaderProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/CardMediaProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/CardRemoteImageProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/CdsPlatform.js

@@ -0,0 +1 @@
+export {};

package/esm/types/CellBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Chart.js

@@ -0,0 +1 @@
+export {};

package/esm/types/CollapsibleBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Color.js

@@ -0,0 +1 @@
+export {};

package/esm/types/ComponentEventHandlerProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/DimensionStyles.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Display.js

@@ -0,0 +1 @@
+export {};

package/esm/types/DotBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/DotCountBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/ElevationLevels.js

@@ -0,0 +1 @@
+export {};

package/esm/types/FallbackBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Grid.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Helpers.js

@@ -0,0 +1 @@
+export {};

package/esm/types/IconButtonBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/IconName.js

@@ -0,0 +1 @@
+export {};

package/esm/types/IconSize.js

@@ -0,0 +1 @@
+export {};

package/esm/types/IllustrationNames.js

@@ -0,0 +1 @@
+export {};

package/esm/types/IllustrationProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/InputBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/LottiePlayer.js

@@ -0,0 +1 @@
+export {};

package/esm/types/LottieSource.js

@@ -0,0 +1 @@
+export {};

package/esm/types/LottieStatusAnimationProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Motion.js

@@ -0,0 +1 @@
+export {};

package/esm/types/OverlayLifecycleProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Palette.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Placement.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Position.js

@@ -0,0 +1 @@
+export {};

package/esm/types/ProgressContainerWithButtonsProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/PulseBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/React.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Rect.js

@@ -0,0 +1,6 @@
+export const defaultRect = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+};

package/esm/types/Responsive.js

@@ -0,0 +1 @@
+export {};

package/esm/types/ResponsiveProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/SectionHeaderProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Shape.js

@@ -0,0 +1 @@
+export {};

package/esm/types/SharedAccessibilityProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/SharedProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/SpacingProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/SparklineInteractiveHeaderBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/SpreadPropsSafely.js

@@ -0,0 +1 @@
+export {};

package/esm/types/StickyFooterProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/TagBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/TextBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/TooltipBaseProps.js

@@ -0,0 +1 @@
+export {};

package/esm/types/TypeOrNumber.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Visibility.js

@@ -0,0 +1 @@
+export {};

package/esm/types/Weight.js

@@ -0,0 +1 @@
+export {};

package/esm/types/index.js

@@ -0,0 +1,58 @@
+// codegen:start {preset: barrel, include: ./*.ts}
+export * from './AvatarBaseProps';
+export * from './AvatarSize';
+export * from './BannerBaseProps';
+export * from './BoxBaseProps';
+export * from './ButtonBaseProps';
+export * from './CardHeaderProps';
+export * from './CardMediaProps';
+export * from './CardRemoteImageProps';
+export * from './CdsPlatform';
+export * from './CellBaseProps';
+export * from './Chart';
+export * from './CollapsibleBaseProps';
+export * from './Color';
+export * from './ComponentEventHandlerProps';
+export * from './DimensionStyles';
+export * from './Display';
+export * from './DotBaseProps';
+export * from './DotCountBaseProps';
+export * from './ElevationLevels';
+export * from './FallbackBaseProps';
+export * from './Grid';
+export * from './Helpers';
+export * from './IconButtonBaseProps';
+export * from './IconName';
+export * from './IconSize';
+export * from './IllustrationNames';
+export * from './IllustrationProps';
+export * from './InputBaseProps';
+export * from './LottiePlayer';
+export * from './LottieSource';
+export * from './LottieStatusAnimationProps';
+export * from './Motion';
+export * from './OverlayLifecycleProps';
+export * from './Palette';
+export * from './Placement';
+export * from './Position';
+export * from './ProgressContainerWithButtonsProps';
+export * from './PulseBaseProps';
+export * from './React';
+export * from './Rect';
+export * from './Responsive';
+export * from './ResponsiveProps';
+export * from './SectionHeaderProps';
+export * from './Shape';
+export * from './SharedAccessibilityProps';
+export * from './SharedProps';
+export * from './SpacingProps';
+export * from './SparklineInteractiveHeaderBaseProps';
+export * from './SpreadPropsSafely';
+export * from './StickyFooterProps';
+export * from './TagBaseProps';
+export * from './TextBaseProps';
+export * from './TooltipBaseProps';
+export * from './TypeOrNumber';
+export * from './Visibility';
+export * from './Weight';
+// codegen:end

package/esm/utils/cell.js

@@ -0,0 +1,5 @@
+export const hasCellPriority = (priorityToMatch, priority) => {
+  if (!priority) return false;
+  if (Array.isArray(priority)) return priority.includes(priorityToMatch);
+  return priority === priorityToMatch;
+};

package/esm/utils/chart.js

@@ -0,0 +1,14 @@
+export const minMax = (data, dataToNumFn) => {
+  let min;
+  let max;
+  for (const datum of data) {
+    const value = dataToNumFn(datum);
+    if (min === undefined || value < dataToNumFn(min)) {
+      min = datum;
+    }
+    if (max === undefined || value > dataToNumFn(max)) {
+      max = datum;
+    }
+  }
+  return [min, max];
+};

package/esm/utils/circle.js

@@ -0,0 +1,12 @@
+export function getRadius(containerSize) {
+  let strokeWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return containerSize / 2 - strokeWidth / 2;
+}
+export function getCircumference(radius) {
+  return 2 * Math.PI * radius;
+}
+
+// size is diameter + strokeWidth
+export function getCenter(containerSize) {
+  return containerSize / 2;
+}

package/esm/utils/convertDimensionToAspectRatio.js

@@ -0,0 +1,5 @@
+import { illustrationSizes } from '../tokens/illustrations';
+/** Returns the aspect ratio tuple for a given dimension */
+export function convertDimensionToAspectRatio(dimension) {
+  return illustrationSizes[dimension];
+}

package/esm/utils/convertDimensionToSize.js

@@ -0,0 +1,9 @@
+import { illustrationSizes } from '../tokens/illustrations';
+/** Statically lookup a dimension string such as "24x24" and return it's size object { width: 24, height: 24 } */
+export function convertDimensionToSize(dimension) {
+  const [width, height] = illustrationSizes[dimension];
+  return {
+    width,
+    height
+  };
+}

package/esm/utils/convertSizeWithMultiplier.js

@@ -0,0 +1,7 @@
+/** Take a width, height object return the same object with a multiplier applied. */
+export function convertSizeWithMultiplier(size, multiplier) {
+  return {
+    width: size.width * multiplier,
+    height: size.height * multiplier
+  };
+}

package/esm/utils/debounce.js

@@ -0,0 +1,16 @@
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+export function debounce(func, timeout) {
+  let timer;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, timeout);
+  };
+}

package/esm/utils/delay.js

@@ -0,0 +1,6 @@
+/** Delay
+ * @example await delay(200);
+ */
+export const delay = async milliseconds => new Promise(resolve => {
+  setTimeout(resolve, milliseconds);
+});

package/esm/utils/flattenNodes.js

@@ -0,0 +1,33 @@
+/*
+  Similar to React's built-in Children.toArray method, this utility takes children and returns them as an array for
+  introspection or filtering. Different from Children.toArray, it will flatten arrays and React.Fragments into a
+  regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders.
+*/
+
+import { Children, cloneElement, isValidElement } from 'react';
+import { isFragment } from 'react-is';
+// typeguard to check for props in a ReactChild
+export function hasProps(child) {
+  return child.props !== undefined;
+}
+
+// eslint-disable-next-line no-restricted-exports
+export default function flattenNodes(children) {
+  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return Children.toArray(children).reduce((acc, node, nodeIndex) => {
+    if (isFragment(node)) {
+      var _node$key;
+      return [...acc, ...flattenNodes(node.props.children, depth + 1, keys.concat((_node$key = node.key) !== null && _node$key !== void 0 ? _node$key : nodeIndex))];
+    }
+    if (/*#__PURE__*/isValidElement(node)) {
+      return [...acc, /*#__PURE__*/cloneElement(node, {
+        key: keys.concat(String(node.key)).join('.')
+      })];
+    }
+    if (typeof node === 'string' || typeof node === 'number') {
+      return [...acc, node];
+    }
+    return acc;
+  }, []);
+}

package/esm/utils/formatCount.js

@@ -0,0 +1,43 @@
+/**
+ * Formats a count number into a string representation.
+ * @param count - The count number to be formatted.
+ * @returns The formatted count as a string.
+ *
+ * @example
+ * // returns '999'
+ * formatCount(999)
+ *
+ * @example
+ * // returns '1.5K'
+ * formatCount(1500)
+ *
+ * @example
+ * // returns '1.5M
+ * formatCount(1500000)
+ * @example
+ * // returns '1.5B'
+ * formatCount(1500000000)
+ *
+ * @example
+ * // returns '1.5T'
+ * formatCount(1500000000000)
+ */
+export const formatCount = count => {
+  let divisor = 1;
+  let label = '';
+  if (count >= 1000000000000) {
+    divisor = 1000000000000;
+    label = 'T';
+  } else if (count >= 1000000000) {
+    divisor = 1000000000;
+    label = 'B';
+  } else if (count >= 1000000) {
+    divisor = 1000000;
+    label = 'M';
+  } else if (count >= 1000) {
+    divisor = 1000;
+    label = 'K';
+  }
+  const v = Math.floor(count / divisor * 10) / 10;
+  return "".concat(v).concat(label);
+};

package/esm/utils/getAccessibleColor.js

@@ -0,0 +1,50 @@
+import { rgb } from 'd3-color';
+import { isAccessibleColor } from '../color/isAccessibleColor';
+const contrastRatio = (l1, l2) => {
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+};
+/**
+ * People with low vision often have difficulty reading text that does not contrast with its background.
+ * This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further.
+ * Providing a minimum luminance contrast ratio between the text and its background can make the text more
+ * readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.
+ *
+ * If foreground='auto:
+ * 2. Return white or black based on contrast ratio with background.
+ *
+ * If foreground does not exist or doesn't meet contrast criteria:
+ * 1. Check background color contrast ratios with white and black
+ * 2. Return the color with higher contrast.
+ */
+export const getAccessibleColor = _ref => {
+  let {
+    background,
+    foreground,
+    usage = 'normalText',
+    enhanced
+  } = _ref;
+  if (foreground === 'auto') return isAccessibleColor({
+    background,
+    foreground: 'white',
+    usage,
+    enhanced
+  }) ? 'rgb(255,255,255)' : 'rgb(0,0,0)';
+  const {
+    r,
+    g,
+    b
+  } = rgb(background);
+  const rLuminance = (r / 255) ** 2.2;
+  const gLuminance = (g / 255) ** 2.2;
+  const bLuminance = (b / 255) ** 2.2;
+
+  // sRGB constants
+  const colorLuminance = 0.2126 * rLuminance + 0.7151 * gLuminance + 0.0721 * bLuminance;
+
+  // Contrast ratios with white and black
+  const whiteContrast = contrastRatio(colorLuminance, 1); // White luminance = 1
+  const blackContrast = contrastRatio(colorLuminance, 0); // Black luminance = 0
+
+  // Return the color with higher contrast
+  return whiteContrast >= blackContrast ? '#ffffff' : '#000000';
+};

package/esm/utils/getButtonSpacingProps.js

@@ -0,0 +1,24 @@
+const buttonPaddingX = {
+  default: 4,
+  compact: 2,
+  flush: 2
+};
+const buttonPaddingY = {
+  default: 2,
+  compact: 1
+};
+export const getButtonSpacingProps = _ref => {
+  let {
+    compact,
+    flush
+  } = _ref;
+  if (flush) return {
+    paddingX: buttonPaddingX.flush,
+    marginEnd: flush === 'end' ? -buttonPaddingX.flush : undefined,
+    marginStart: flush === 'start' ? -buttonPaddingX.flush : undefined
+  };
+  return {
+    paddingX: compact ? buttonPaddingX.compact : buttonPaddingX.default,
+    paddingY: compact ? buttonPaddingY.compact : buttonPaddingY.default
+  };
+};

package/esm/utils/getDefaultAspectRatioForIllustration.js

@@ -0,0 +1,6 @@
+import { illustrationDimensionDefaults, illustrationSizes } from '../tokens/illustrations';
+/** Returns the default aspect ratio tuple for an illustration variant */
+export function getDefaultAspectRatioForIllustration(variant) {
+  const dimensions = illustrationDimensionDefaults[variant];
+  return illustrationSizes[dimensions];
+}

package/esm/utils/getDefaultSizeObjectForIllustration.js

@@ -0,0 +1,7 @@
+import { illustrationDimensionDefaults } from '../tokens/illustrations';
+import { convertDimensionToSize } from './convertDimensionToSize';
+
+/** Returns the default size object for an illustration variant */
+export function getDefaultSizeObjectForIllustration(variant) {
+  return convertDimensionToSize(illustrationDimensionDefaults[variant !== null && variant !== void 0 ? variant : 'all']);
+}

package/esm/utils/getRectWidthVariant.js

@@ -0,0 +1 @@
+export const getRectWidthVariant = (variant, increment) => variant === undefined ? undefined : variant + increment;

package/esm/utils/getWidthInEm.js

@@ -0,0 +1,13 @@
+/**
+ * Returns the width of an element in em units by dividing its computed width by font-size.
+ * Useful for animating width across font-size changes without hardcoding pixels.
+ */
+export const getWidthInEm = element => {
+  const {
+    width,
+    fontSize
+  } = getComputedStyle(element);
+  const widthPx = parseFloat(width);
+  const fontSizePx = parseFloat(fontSize);
+  return "".concat(widthPx / fontSizePx, "em");
+};

package/esm/utils/join.js

@@ -0,0 +1,11 @@
+import React, { Fragment } from 'react';
+
+/**
+ * Util for adding a separator element between react components excluding the last item
+ */
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export const join = (arr, node) => arr.map((item, index) => /*#__PURE__*/_jsx(Fragment, {
+  children: /*#__PURE__*/_jsxs(_Fragment, {
+    children: [item, index !== arr.length - 1 && node]
+  })
+}, index));