@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/examples/ExampleScreen.js

@@ -0,0 +1,76 @@
+const _excluded = ["children", "inline", "title", "titlePadding"];
+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, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { Divider } from '../layout/Divider';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Example = _ref => {
+  let {
+      children,
+      inline,
+      title,
+      titlePadding
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const childStyles = useMemo(() => {
+    const style = {
+      paddingTop: 12
+    };
+    if (inline) {
+      style.alignItems = 'flex-start';
+    }
+    return style;
+  }, [inline]);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, _extends({
+      background: "bg",
+      padding: 2,
+      paddingBottom: 3
+    }, props, {
+      children: [!!title && /*#__PURE__*/_jsx(Text, _extends({
+        font: "title3"
+      }, titlePadding, {
+        children: title
+      })), typeof children === 'function' ? children() : React.Children.map(children, (item, index) => /*#__PURE__*/_jsx(View, {
+        style: childStyles,
+        children: item
+      }, index))]
+    })), /*#__PURE__*/_jsx(Divider, {})]
+  });
+  return content;
+};
+const Screen = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    keyboardShouldPersistTaps: "always",
+    persistentScrollbar: false,
+    showsVerticalScrollIndicator: false,
+    style: {
+      backgroundColor: theme.color.bg,
+      height: '100%'
+    },
+    testID: "mobile-playground-scrollview",
+    children: [children, /*#__PURE__*/_jsx(Divider, {
+      testID: "mobile-playground-scrollview-end"
+    })]
+  });
+};
+export const ExampleScreen = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/_jsxs(VStack, {
+    testID: "mobile-playground-screen",
+    children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Screen, {
+      children: children
+    })]
+  });
+};

package/esm/gradients/LinearGradient.js

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Defs, LinearGradient as Lg, Rect, Stop, Svg } from 'react-native-svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getAlpha(color) {
+  const match = color.includes('rgba') && color.match(/,\s?([\d.]*)\)$/);
+  if (match) {
+    return match[1];
+  }
+  return '1';
+}
+const defaultStops = [0, 1];
+export function LinearGradient(_ref) {
+  let {
+    children,
+    start,
+    end,
+    stops = defaultStops,
+    colors,
+    isBelowChildren = true,
+    elevated,
+    angle = 180,
+    style,
+    pointerEvents,
+    testID
+  } = _ref;
+  const svg = useMemo(() => {
+    var _start$x, _start$y, _end$x, _end$y;
+    const anglePI = -angle * Math.PI / 180;
+    const x1 = (_start$x = start == null ? void 0 : start.x) != null ? _start$x : Math.round(50 + Math.sin(anglePI) * 50) / 100;
+    const y1 = (_start$y = start == null ? void 0 : start.y) != null ? _start$y : Math.round(50 + Math.cos(anglePI) * 50) / 100;
+    const x2 = (_end$x = end == null ? void 0 : end.x) != null ? _end$x : Math.round(50 + Math.sin(anglePI + Math.PI) * 50) / 100;
+    const y2 = (_end$y = end == null ? void 0 : end.y) != null ? _end$y : Math.round(50 + Math.cos(anglePI + Math.PI) * 50) / 100;
+    return /*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFillObject,
+      children: /*#__PURE__*/_jsxs(Svg, {
+        height: "100%",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(Defs, {
+          children: /*#__PURE__*/_jsx(Lg, {
+            id: "LinearGradient",
+            x1: x1,
+            x2: x2,
+            y1: y1,
+            y2: y2,
+            children: colors.map((color, index) => /*#__PURE__*/_jsx(Stop, {
+              offset: stops[index],
+              stopColor: color,
+              stopOpacity: getAlpha(color)
+            }, color + String(index)))
+          })
+        }), /*#__PURE__*/_jsx(Rect, {
+          fill: "url(#LinearGradient)",
+          height: "100%",
+          width: "100%"
+        })]
+      })
+    }, "GrandientSvgContainer");
+  }, [colors, start, end, angle, stops]);
+  const items = isBelowChildren || !elevated ? [svg, children] : [children, svg];
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: pointerEvents,
+    style: style,
+    testID: testID,
+    children: items
+  });
+}

package/esm/gradients/__stories__/LinearGradient.stories.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Text } from '../../typography/Text';
+import { LinearGradient } from '../LinearGradient';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const stops = [0, 0.5, 1];
+const LinearGradientScreen = () => {
+  const theme = useTheme();
+  const {
+    bg,
+    bgPrimary,
+    bgPositive,
+    bgNegative,
+    transparent
+  } = theme.color;
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "As Background",
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        colors: [bgPrimary, bgPositive],
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "First example"
+        })
+      }), /*#__PURE__*/_jsx(LinearGradient, {
+        colors: [bgPrimary, bgPositive, bgNegative],
+        stops: stops,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Second example"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Horizontal gradient"
+      }), /*#__PURE__*/_jsx(LinearGradient, {
+        angle: 90,
+        colors: [bgPrimary, bgPositive, bgNegative],
+        stops: stops,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Horizontal angle example"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "As overlay with isBelowChildren set to false",
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        colors: [transparent, bg],
+        isBelowChildren: false,
+        children: /*#__PURE__*/_jsxs(Text, {
+          font: "body",
+          children: [loremIpsum, "..."]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "More"
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "As overlay with elevated prop",
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        elevated: true,
+        colors: [transparent, bg],
+        children: /*#__PURE__*/_jsxs(Text, {
+          font: "body",
+          children: [loremIpsum, "..."]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "More"
+      })]
+    })]
+  });
+};
+export default LinearGradientScreen;

package/esm/hooks/useA11y.js

@@ -0,0 +1,36 @@
+import { useCallback, useMemo } from 'react';
+import { AccessibilityInfo, findNodeHandle } from 'react-native';
+
+/*
+ * Custom hook to provide accessibility utilities.
+ *
+ * Returns:
+ * - setA11yFocus: Sets accessibility focus to a given ref's node handle.
+ * - announceForA11y: Announces text for screen readers.
+ *
+ * Usage:
+ *
+ * const { setA11yFocus, announceForA11y } = useA11y();
+ *
+ * setA11yFocus(myRef);
+ * announceForA11y('Text to announce');
+ *
+ */
+export const useA11y = () => {
+  const setA11yFocus = useCallback(ref => {
+    // TODO: Migrate this to fabric supported API
+    const reactTag = findNodeHandle(ref.current);
+    if (reactTag) {
+      AccessibilityInfo.setAccessibilityFocus(reactTag);
+    }
+  }, []);
+  const announceForA11y = useCallback(text => {
+    if (text) {
+      AccessibilityInfo.announceForAccessibility(text);
+    }
+  }, []);
+  return useMemo(() => ({
+    setA11yFocus,
+    announceForA11y
+  }), [setA11yFocus, announceForA11y]);
+};

package/esm/hooks/useAnimatedTransition.js

@@ -0,0 +1,24 @@
+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 { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+
+/** Animate to a new value from it's previously tracked state */
+export const useAnimatedTransition = (nextValue, motionSpec) => {
+  var _getPreviousValue;
+  const {
+    getPreviousValue,
+    addPreviousValue
+  } = usePreviousValues([0]);
+  addPreviousValue(nextValue);
+  const previousValue = (_getPreviousValue = getPreviousValue()) != null ? _getPreviousValue : 0;
+  const animatedValue = useRef(new Animated.Value(previousValue));
+  useEffect(() => {
+    var _Animated$timing;
+    (_Animated$timing = Animated.timing(animatedValue.current, convertMotionConfig(_extends({
+      toValue: nextValue
+    }, motionSpec)))) == null || _Animated$timing.start();
+  }, [nextValue, animatedValue, motionSpec]);
+  return animatedValue.current;
+};

package/esm/hooks/useAppState.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useState } from 'react';
+import { AppState } from 'react-native';
+export const useAppState = () => {
+  const [appState, setAppState] = useState(AppState.currentState);
+  const handleChange = useCallback(newState => {
+    setAppState(newState);
+  }, []);
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', handleChange);
+    return () => {
+      subscription.remove();
+    };
+  }, [handleChange]);
+  return appState;
+};

package/esm/hooks/useCellSpacing.js

@@ -0,0 +1,27 @@
+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 { useMemo } from 'react';
+import { defaultSpacingConfig } from '@coinbase/cds-common/tokens/cell';
+export const innerDefaults = defaultSpacingConfig.innerSpacing;
+export const outerDefaults = defaultSpacingConfig.outerSpacing;
+/**
+ * Takes the inner and outerSpacing props from the Cell component and merges with their default values.
+ */
+export function useCellSpacing(_temp) {
+  let {
+    innerSpacing,
+    outerSpacing
+  } = _temp === void 0 ? {} : _temp;
+  return useMemo(() => {
+    var _innerSpacing$padding, _innerSpacing$padding2, _outerSpacing$padding, _outerSpacing$padding2;
+    return {
+      inner: _extends({}, innerDefaults, {
+        paddingX: (_innerSpacing$padding = innerSpacing == null ? void 0 : innerSpacing.padding) != null ? _innerSpacing$padding : innerDefaults.paddingX,
+        paddingY: (_innerSpacing$padding2 = innerSpacing == null ? void 0 : innerSpacing.padding) != null ? _innerSpacing$padding2 : innerDefaults.paddingY
+      }, innerSpacing),
+      outer: _extends({}, outerDefaults, {
+        paddingX: (_outerSpacing$padding = outerSpacing == null ? void 0 : outerSpacing.padding) != null ? _outerSpacing$padding : outerDefaults.paddingX,
+        paddingY: (_outerSpacing$padding2 = outerSpacing == null ? void 0 : outerSpacing.padding) != null ? _outerSpacing$padding2 : outerDefaults.paddingY
+      }, outerSpacing)
+    };
+  }, [innerSpacing, outerSpacing]);
+}

package/esm/hooks/useCheckboxGroupState.js

@@ -0,0 +1 @@
+export { useGroupToggler as useCheckboxGroupState } from '@coinbase/cds-common/hooks/useGroupToggler';

package/esm/hooks/useContentSize.js

@@ -0,0 +1,15 @@
+import { useCallback, useMemo, useState } from 'react';
+// TO DO: Default `width` and `height` to null on initial render
+export const useContentSize = () => {
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const onContentSizeChange = useCallback((width, height) => {
+    setSize({
+      width,
+      height
+    });
+  }, []);
+  return useMemo(() => [size, onContentSizeChange], [onContentSizeChange, size]);
+};

package/esm/hooks/useDeviceColorScheme.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { Appearance, Platform, useColorScheme } from 'react-native';
+import { useAppState } from './useAppState';
+
+/** Update device preference on app state change for Android. React Native's useColorScheme does not seem to fire on Android on App State change - this fixes that. */
+export const useDeviceColorScheme = () => {
+  const appState = useAppState();
+  const colorSchemeSubscription = useColorScheme();
+  const [devicePreference, setDevicePreference] = useState(colorSchemeSubscription);
+  const isAndroid = Platform.OS === 'android';
+  useEffect(() => {
+    // There is a bug with the useColorScheme on RN 0.65.2 that fires dark once the app becomes inactive
+    // we only want to set the device preference when the app is active.
+
+    if (appState === 'active') {
+      if (isAndroid) {
+        const colorScheme = Appearance.getColorScheme();
+        setDevicePreference(colorScheme);
+        return;
+      }
+      setDevicePreference(colorSchemeSubscription);
+    }
+  }, [colorSchemeSubscription, appState, isAndroid]);
+  return devicePreference != null ? devicePreference : 'light';
+};

package/esm/hooks/useDeviceFontScale.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+import { PixelRatio } from 'react-native';
+import { useAppState } from './useAppState';
+
+/** Update font scale on app change. RN does not offer a hook for tapping into this like useColorScheme so we have to manually handle based on app state. */
+export const useDeviceFontScale = () => {
+  const [fontScale, setFontScale] = useState(PixelRatio.getFontScale());
+  const fontScaleRef = useRef(PixelRatio.getFontScale());
+  const appState = useAppState();
+  useEffect(() => {
+    if (appState === 'active') {
+      const newFontScale = PixelRatio.getFontScale();
+      if (fontScaleRef.current !== newFontScale) {
+        setFontScale(newFontScale);
+        fontScaleRef.current = newFontScale;
+      }
+    }
+  }, [appState]);
+  return fontScale;
+};

package/esm/hooks/useDimensions.js

@@ -0,0 +1,19 @@
+import { useWindowDimensions } from 'react-native';
+import { useStatusBarHeight } from './useStatusBarHeight';
+
+// The bottom Navigation bar height needs the be accounted for but could not find a lib to help with this.
+export const IOS_BOTTOM_NAV_BAR_HEIGHT = 50;
+
+// This is the beginning of our new dimensions hook. It will build on the old retail `useDimensions` hook.
+export function useDimensions() {
+  const {
+    height: screenHeight,
+    width: screenWidth
+  } = useWindowDimensions();
+  const statusBarHeight = useStatusBarHeight();
+  return {
+    screenHeight,
+    screenWidth,
+    statusBarHeight
+  };
+}

package/esm/hooks/useDotPinStyles.js

@@ -0,0 +1,28 @@
+export const useDotPinStyles = function (childrenSize, dotSize, overlap) {
+  if (childrenSize === void 0) {
+    childrenSize = null;
+  }
+  if (dotSize === void 0) {
+    dotSize = null;
+  }
+  if (childrenSize === null || dotSize === null) {
+    return null;
+  }
+  const dotSizeWidth = typeof dotSize === 'number' ? dotSize : dotSize.width;
+  const dotSizeHeight = typeof dotSize === 'number' ? dotSize : dotSize.height;
+  const baseOffsets = {
+    end: childrenSize.width - dotSizeWidth / 2,
+    start: -(dotSizeWidth / 2),
+    bottom: childrenSize.height - dotSizeHeight / 2,
+    top: -(dotSizeHeight / 2)
+  };
+  const widthOffset = (childrenSize.width / 2 - dotSizeWidth / 2) / 2.5;
+  const heightOffset = (childrenSize.height / 2 - dotSizeHeight / 2) / 2.5;
+  if (overlap === 'circular') {
+    baseOffsets.end -= widthOffset;
+    baseOffsets.start += widthOffset;
+    baseOffsets.bottom -= heightOffset;
+    baseOffsets.top += heightOffset;
+  }
+  return baseOffsets;
+};

package/esm/hooks/useEventHandler.js

@@ -0,0 +1,6 @@
+/**
+ * Avoid having to deal with transitive version issues.
+ * CDS common is dep of cds-mobile.
+ * This allows consumers to pull directly from cds-mobile.
+ */
+export { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';

package/esm/hooks/useHasNotch.js

@@ -0,0 +1,9 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export const useHasNotch = () => {
+  const {
+    top
+  } = useSafeAreaInsets();
+  // we choose to hide the statusbar on iOS for devices with a notch, which
+  // has a top inset of more than 20.
+  return top > 20;
+};

package/esm/hooks/useHorizontallyScrollingPressables.js

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import throttle from 'lodash/throttle';
+const fallbackLayout = {
+  width: 0,
+  x: 0,
+  y: 0,
+  height: 0
+};
+export const useHorizontallyScrollingPressables = function (selectedPressableId, _temp) {
+  let {
+    scrollThrottleWaitTime = 200,
+    setActivePressableLayout
+  } = _temp === void 0 ? {} : _temp;
+  const scrollRef = useRef(null);
+  const scrollDetails = useRef({
+    xPosition: 0,
+    containerWidth: 0,
+    contentWidth: 0
+  });
+  const pressablesLayoutsMap = useRef(new Map());
+  const [isScrollContentOverflowing, setIsScrollContentOverflowing] = useState(false);
+  const [isScrollContentOffscreenRight, setIsScrollContentOffscreenRight] = useState(false);
+  const checkIsContentOverflowing = useCallback(() => {
+    const isOverflowing = scrollDetails.current.contentWidth > scrollDetails.current.containerWidth;
+    setIsScrollContentOverflowing(prevState => prevState === isOverflowing ? prevState : isOverflowing);
+  }, []);
+  const checkIsContentOffscreenRight = useCallback(() => {
+    const isOffscreenRight = scrollDetails.current.xPosition + scrollDetails.current.containerWidth + 1 <
+    // +1 offset to account for fractional values
+    scrollDetails.current.contentWidth;
+    setIsScrollContentOffscreenRight(prevState => prevState === isOffscreenRight ? prevState : isOffscreenRight);
+  }, []);
+  const throttledhandleScroll = useRef(throttle(xPosition => {
+    scrollDetails.current.xPosition = xPosition;
+    checkIsContentOffscreenRight();
+  }, scrollThrottleWaitTime)).current;
+  const handleScroll = useCallback(event => {
+    throttledhandleScroll(event.nativeEvent.contentOffset.x);
+  }, [throttledhandleScroll]);
+  const handleScrollContainerLayout = useCallback(event => {
+    scrollDetails.current.containerWidth = event.nativeEvent.layout.width;
+    checkIsContentOverflowing();
+    checkIsContentOffscreenRight();
+  }, [checkIsContentOffscreenRight, checkIsContentOverflowing]);
+  const handleScrollContentSizeChange = useCallback(contentWidth => {
+    scrollDetails.current.contentWidth = contentWidth;
+    checkIsContentOverflowing();
+    checkIsContentOffscreenRight();
+  }, [checkIsContentOffscreenRight, checkIsContentOverflowing]);
+  const handleActivePressableUpdate = useCallback(layout => {
+    setActivePressableLayout == null || setActivePressableLayout(layout);
+
+    /** Check if active pressable is offscreen and trigger a scroll event */
+    const isOffscreenLeft = layout.x < scrollDetails.current.xPosition;
+    const isOffscreenRight = layout.x + layout.width - scrollDetails.current.xPosition > scrollDetails.current.containerWidth;
+    const isOffscreen = isOffscreenLeft || isOffscreenRight;
+    if (isOffscreen) {
+      var _scrollRef$current;
+      (_scrollRef$current = scrollRef.current) == null || _scrollRef$current.scrollTo({
+        x: layout.x,
+        animated: true
+      });
+    }
+  }, [setActivePressableLayout]);
+  const getPressableLayoutHandler = useCallback(id => {
+    return function handlePressableLayout(_ref) {
+      let {
+        nativeEvent: {
+          layout
+        }
+      } = _ref;
+      pressablesLayoutsMap.current.set(id, layout);
+      if (id === selectedPressableId) {
+        handleActivePressableUpdate(layout);
+      }
+    };
+  }, [handleActivePressableUpdate, selectedPressableId]);
+
+  /** ⚡️ Side effects 🛼
+   *  We need to keep an eye on the value because
+   *  we'll have to calculate everything and handle
+   *  scroll and layout events whenever it updates
+   */
+  useEffect(() => {
+    var _pressablesLayoutsMap;
+    const layout = (_pressablesLayoutsMap = pressablesLayoutsMap.current.get(selectedPressableId)) != null ? _pressablesLayoutsMap : fallbackLayout;
+    /** Set the active tab */
+    handleActivePressableUpdate(layout);
+  }, [handleActivePressableUpdate, selectedPressableId]);
+  useEffect(() => {
+    return () => {
+      throttledhandleScroll.cancel();
+    };
+  }, [throttledhandleScroll]);
+  return {
+    scrollRef,
+    isScrollContentOverflowing,
+    isScrollContentOffscreenRight,
+    handleScroll,
+    handleScrollContainerLayout,
+    handleScrollContentSizeChange,
+    getPressableLayoutHandler
+  };
+};

package/esm/hooks/useInputBorderAnimation.js

@@ -0,0 +1,32 @@
+import { useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { animateInputBorderInConfig, animateInputBorderOutConfig } from '@coinbase/cds-common/animation/border';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useTheme } from './useTheme';
+// Animating opacity of 2nd Layer Input Border.
+// This is the focused border styling
+const borderInConfig = convertMotionConfig(animateInputBorderInConfig);
+const borderOutConfig = convertMotionConfig(animateInputBorderOutConfig);
+const variantColorMap = {
+  primary: 'bgPrimary',
+  positive: 'bgPositive',
+  negative: 'bgNegative',
+  foreground: 'fg',
+  foregroundMuted: 'fgMuted',
+  secondary: 'bgSecondary'
+};
+export const useInputBorderAnimation = (fromVariant, toVariant) => {
+  const theme = useTheme();
+  const focusedBorderOpacity = useRef(new Animated.Value(0)).current;
+  const fromVariantRgbaString = theme.color[variantColorMap[fromVariant]];
+  const toVariantRgbaString = theme.color[variantColorMap[toVariant]];
+  return useMemo(() => {
+    return {
+      animateInputBorderIn: Animated.timing(focusedBorderOpacity, borderInConfig),
+      animateInputBorderOut: Animated.timing(focusedBorderOpacity, borderOutConfig),
+      focusedBorderRgba: toVariantRgbaString,
+      unFocusedBorderRgba: fromVariantRgbaString,
+      focusedBorderOpacity
+    };
+  }, [focusedBorderOpacity, fromVariantRgbaString, toVariantRgbaString]);
+};

package/esm/hooks/useInputBorderStyle.js

@@ -0,0 +1,55 @@
+import { useEffect, useMemo } from 'react';
+import { inputBorderWidth } from '@coinbase/cds-common/tokens/input';
+import { useInputBorderAnimation } from './useInputBorderAnimation';
+
+/**
+ *
+ * @param focused
+ * @param initialVariant
+ * @param focusedVariant
+ * @param bordered
+ */
+export const useInputBorderStyle = function (focused, initialVariant, focusedVariant, bordered) {
+  if (bordered === void 0) {
+    bordered = true;
+  }
+  const {
+    animateInputBorderIn,
+    animateInputBorderOut,
+    focusedBorderRgba,
+    unFocusedBorderRgba,
+    focusedBorderOpacity
+  } = useInputBorderAnimation(initialVariant, focusedVariant);
+
+  /** Border style for when input is not focused */
+  const borderUnfocusedStyle = useMemo(() => {
+    return {
+      borderColor: focused ? focusedBorderRgba : initialVariant === 'secondary' ? 'transparent' : unFocusedBorderRgba,
+      borderWidth: bordered ? inputBorderWidth : 0
+    };
+  }, [focused, focusedBorderRgba, initialVariant, unFocusedBorderRgba, bordered]);
+
+  /** Border style for when input is focused */
+  const borderFocusedStyle = useMemo(() => {
+    return {
+      opacity: focusedBorderOpacity,
+      borderColor: focusedBorderRgba,
+      borderWidth: bordered ? inputBorderWidth : 0
+    };
+  }, [focusedBorderOpacity, focusedBorderRgba, bordered]);
+  useEffect(() => {
+    if (focused) {
+      animateInputBorderOut.stop();
+      animateInputBorderIn.start();
+    } else {
+      animateInputBorderIn.stop();
+      animateInputBorderOut.start();
+    }
+  }, [animateInputBorderIn, animateInputBorderOut, focused]);
+  return useMemo(() => {
+    return {
+      borderUnfocusedStyle,
+      borderFocusedStyle
+    };
+  }, [borderUnfocusedStyle, borderFocusedStyle]);
+};

package/esm/hooks/useLayout.js

@@ -0,0 +1,14 @@
+import { useCallback, useMemo, useState } from 'react';
+export const useLayout = () => {
+  // TODO: default sizing is problematic. Change to null.
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const onLayout = useCallback(event => {
+    setSize(event.nativeEvent.layout);
+  }, []);
+  return useMemo(() => [size, onLayout], [onLayout, size]);
+};