@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/illustrations/__stories__/HeroSquare.stories.js

@@ -0,0 +1,2 @@
+import { getIllustrationSheet } from './getIllustrationSheet';
+export default getIllustrationSheet('heroSquare');

package/esm/illustrations/__stories__/Pictogram.stories.js

@@ -0,0 +1,2 @@
+import { getIllustrationSheet } from './getIllustrationSheet';
+export default getIllustrationSheet('pictogram');

package/esm/illustrations/__stories__/SpotIcon.stories.js

@@ -0,0 +1,2 @@
+import { getIllustrationSheet } from './getIllustrationSheet';
+export default getIllustrationSheet('spotIcon');

package/esm/illustrations/__stories__/SpotRectangle.stories.js

@@ -0,0 +1,2 @@
+import { getIllustrationSheet } from './getIllustrationSheet';
+export default getIllustrationSheet('spotRectangle');

package/esm/illustrations/__stories__/SpotSquare.stories.js

@@ -0,0 +1,2 @@
+import { getIllustrationSheet } from './getIllustrationSheet';
+export default getIllustrationSheet('spotSquare');

package/esm/illustrations/__stories__/getIllustrationSheet.js

@@ -0,0 +1,164 @@
+import React, { memo, useCallback } from 'react';
+import { Dimensions, FlatList } from 'react-native';
+import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
+import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/versionMap';
+import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/versionMap';
+import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/versionMap';
+import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
+import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
+import { Divider, VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { HeroSquare, Pictogram, SpotIcon, SpotRectangle, SpotSquare } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function keys(obj) {
+  return Object.keys(obj);
+}
+const images = {
+  heroSquare: keys(heroSquareVersionMap),
+  pictogram: keys(pictogramVersionMap),
+  spotRectangle: keys(spotRectangleVersionMap),
+  spotSquare: keys(spotSquareVersionMap),
+  spotIcon: keys(spotIconVersionMap)
+};
+export function getIllustrationSheet(type) {
+  /** Constants */
+  const FLAT_LIST_STYLE = {
+    width: '100%'
+  };
+  const FLAT_LIST_CONTAINER_STYLE = {
+    marginLeft: 24,
+    paddingBottom: 24,
+    alignContent: 'flex-start'
+  };
+  const SCREEN_WIDTH = Dimensions.get('window').width - FLAT_LIST_CONTAINER_STYLE.marginLeft * 2;
+  const SIZES = {
+    pictogram: {
+      height: illustrationSizes[illustrationDimensions.pictogram[0]][1],
+      width: illustrationSizes[illustrationDimensions.pictogram[0]][0],
+      scaleMultiplier: 1
+    },
+    spotSquare: {
+      height: illustrationSizes[illustrationDimensions.spotSquare[0]][1],
+      width: illustrationSizes[illustrationDimensions.spotSquare[0]][0],
+      scaleMultiplier: 0.4
+    },
+    spotRectangle: {
+      height: illustrationSizes[illustrationDimensions.spotRectangle[0]][1],
+      width: illustrationSizes[illustrationDimensions.spotRectangle[0]][0],
+      scaleMultiplier: 0.3
+    },
+    heroSquare: {
+      height: illustrationSizes[illustrationDimensions.heroSquare[0]][1],
+      width: illustrationSizes[illustrationDimensions.heroSquare[0]][0],
+      scaleMultiplier: 0.24
+    },
+    spotIcon: {
+      height: illustrationSizes[illustrationDimensions.spotIcon[0]][1],
+      width: illustrationSizes[illustrationDimensions.spotIcon[0]][0],
+      scaleMultiplier: 1
+    }
+  };
+  const ITEM_COLUMNS = Math.floor(SCREEN_WIDTH / (SIZES[type].width * SIZES[type].scaleMultiplier));
+  const names = images[type];
+  const data = [];
+  names.forEach(name => {
+    data.push({
+      name,
+      colorScheme: 'light'
+    });
+    data.push({
+      name,
+      colorScheme: 'dark'
+    });
+  });
+  const ListFooterComponent = /*#__PURE__*/memo(function ListFooterComponent() {
+    // TODO: pull from ui-mobile-playground/helpers/constants via scrollViewEnd constant
+    return /*#__PURE__*/_jsx(Divider, {
+      testID: "mobile-playground-scrollview-end"
+    });
+  });
+  const renderItem = _ref => {
+    let {
+      item
+    } = _ref;
+    const dim = SIZES[type].width + "x" + SIZES[type].height;
+    return /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: item.colorScheme,
+      theme: defaultTheme,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        background: "bg",
+        overflow: "hidden",
+        width: SIZES[type].width * SIZES[type].scaleMultiplier,
+        children: [type === 'heroSquare' &&
+        /*#__PURE__*/
+        // render a 48x48 thumbnail
+        _jsx(HeroSquare, {
+          dimension: dim,
+          name: item.name,
+          scaleMultiplier: SIZES.heroSquare.scaleMultiplier
+        }), type === 'spotSquare' &&
+        /*#__PURE__*/
+        // render a 48x48 thumbnail
+        _jsx(SpotSquare, {
+          name: item.name,
+          scaleMultiplier: SIZES.spotSquare.scaleMultiplier
+        }), type === 'spotRectangle' &&
+        /*#__PURE__*/
+        // render a 72x36 thumbnail
+        _jsx(SpotRectangle, {
+          name: item.name,
+          scaleMultiplier: SIZES.spotRectangle.scaleMultiplier
+        }), type === 'pictogram' && /*#__PURE__*/_jsx(Pictogram, {
+          dimension: dim,
+          name: item.name,
+          scaleMultiplier: SIZES.pictogram.scaleMultiplier
+        }), type === 'spotIcon' && /*#__PURE__*/_jsx(SpotIcon, {
+          dimension: dim,
+          name: item.name,
+          scaleMultiplier: SIZES.spotIcon.scaleMultiplier
+        }), /*#__PURE__*/_jsx(Text, {
+          ellipsize: "tail",
+          font: "legal",
+          children: item.name
+        })]
+      })
+    });
+  };
+  const IllustrationSheet = /*#__PURE__*/memo(function IllustrationSheet() {
+    const getItemLayout = useCallback(function getItemLayout(_data, index) {
+      return {
+        length: SIZES[type].height * SIZES[type].scaleMultiplier,
+        offset: SIZES[type].height * SIZES[type].scaleMultiplier * index,
+        index
+      };
+    }, []);
+    const keyExtractor = useCallback(function keyExtractor(item) {
+      return type + "-" + item.name + "-" + item.colorScheme;
+    }, []);
+    return /*#__PURE__*/_jsx(VStack
+    // TODO: pull from ui-mobile-playground/helpers/constants via screen constant
+    , {
+      alignItems: "center",
+      background: "bg",
+      flexGrow: 1,
+      justifyContent: "center",
+      testID: "mobile-playground-screen",
+      children: /*#__PURE__*/_jsx(FlatList, {
+        ListFooterComponent: ListFooterComponent,
+        contentContainerStyle: FLAT_LIST_CONTAINER_STYLE,
+        data: data,
+        getItemLayout: getItemLayout,
+        keyExtractor: keyExtractor,
+        numColumns: ITEM_COLUMNS,
+        renderItem: renderItem,
+        style: FLAT_LIST_STYLE
+        // TODO: pull from ui-mobile-playground/helpers/constants via scrollView constant
+        ,
+        testID: "mobile-playground-scrollview"
+      })
+    });
+  });
+  return IllustrationSheet;
+}

package/esm/illustrations/createIllustration.js

@@ -0,0 +1,55 @@
+import React, { memo, useMemo } from 'react';
+import { SvgXml } from 'react-native-svg';
+import { convertDimensionToSize } from '@coinbase/cds-common/utils/convertDimensionToSize';
+import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSizeWithMultiplier';
+import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createIllustration(variant, config) {
+  const defaultSize = getDefaultSizeObjectForIllustration(variant);
+  const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
+    var _config$name;
+    let {
+      fallback = null,
+      name,
+      dimension,
+      scaleMultiplier,
+      testID,
+      accessibilityHint,
+      accessibilityLabel
+    } = _ref;
+    const {
+      activeColorScheme
+    } = useTheme();
+    const requireFn = (_config$name = config[name]) == null ? void 0 : _config$name[activeColorScheme];
+    const xml = useMemo(() => requireFn == null ? void 0 : requireFn(), [requireFn]);
+    const style = useMemo(() => {
+      let size = defaultSize;
+      if (dimension) {
+        size = convertDimensionToSize(dimension);
+      }
+      if (scaleMultiplier) {
+        size = convertSizeWithMultiplier(size, scaleMultiplier);
+      }
+      return size;
+    }, [dimension, scaleMultiplier]);
+    if (!xml) {
+      if (isDevelopment()) {
+        console.error("Unable to find illustration with name: " + name);
+      }
+      return fallback;
+    }
+    return /*#__PURE__*/_jsx(SvgXml, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "image",
+      accessible: !!accessibilityLabel,
+      style: style,
+      testID: testID,
+      xml: xml
+    });
+  });
+  Illustration.displayName = "Illustration";
+  return Illustration;
+}

package/esm/illustrations/index.js

@@ -0,0 +1,5 @@
+export * from './HeroSquare';
+export * from './Pictogram';
+export * from './SpotIcon';
+export * from './SpotRectangle';
+export * from './SpotSquare';

package/esm/index.js

@@ -0,0 +1,3 @@
+export * from './core/theme';
+export * from './hooks/useTheme';
+export * from './system/ThemeProvider';

package/esm/jest.d.js

@@ -0,0 +1,3 @@
+/// <reference types='react-native-gesture-handler/jestSetup' />
+/// <reference types='react-native-accessibility-engine' />
+/// <reference types='@testing-library/jest-native/extend-expect' />

package/esm/layout/Box.js

@@ -0,0 +1,250 @@
+const _excluded = ["children", "style", "animated", "testID", "pin", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textAlign", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Animated, View } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { pinStyles } from '../styles/pinStyles';
+import { getStyles } from '../styles/styleProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const getElevationStyles = (elevation, theme, background) => {
+  const elevationStyles = {
+    0: {},
+    1: _extends({
+      elevation: 2
+    }, background === undefined ? {
+      backgroundColor: theme.color.bgElevation1
+    } : {}, theme.shadow.elevation1),
+    2: _extends({
+      elevation: 8
+    }, background === undefined ? {
+      backgroundColor: theme.color.bgElevation2
+    } : {}, theme.shadow.elevation2)
+  };
+  return elevationStyles[elevation];
+};
+const getBorderedStyles = (_ref, theme) => {
+  let {
+    bordered,
+    borderedHorizontal,
+    borderedVertical,
+    borderedStart,
+    borderedEnd,
+    borderedTop,
+    borderedBottom
+  } = _ref;
+  const borderStyles = {
+    bordered: {
+      borderWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    },
+    borderedHorizontal: {
+      borderStartWidth: theme.borderWidth[100],
+      borderEndWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    },
+    borderedVertical: {
+      borderTopWidth: theme.borderWidth[100],
+      borderBottomWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    },
+    borderedStart: {
+      borderStartWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    },
+    borderedEnd: {
+      borderEndWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    },
+    borderedTop: {
+      borderTopWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    },
+    borderedBottom: {
+      borderBottomWidth: theme.borderWidth[100],
+      borderStyle: 'solid',
+      borderColor: theme.color.bgLine
+    }
+  };
+  return [bordered && borderStyles.bordered, borderedHorizontal && borderStyles.borderedHorizontal, borderedVertical && borderStyles.borderedVertical, borderedStart && borderStyles.borderedStart, borderedEnd && borderStyles.borderedEnd, borderedTop && borderStyles.borderedTop, borderedBottom && borderStyles.borderedBottom];
+};
+export const Box = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      children,
+      style,
+      animated,
+      testID,
+      pin,
+      bordered,
+      borderedTop,
+      borderedBottom,
+      borderedStart,
+      borderedEnd,
+      borderedHorizontal,
+      borderedVertical,
+      dangerouslySetBackground,
+      // Begin style props
+      display,
+      position,
+      overflow,
+      zIndex,
+      gap,
+      columnGap,
+      rowGap,
+      justifyContent,
+      alignContent,
+      alignItems,
+      alignSelf,
+      flexDirection,
+      flexWrap,
+      color,
+      background,
+      borderColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderTopWidth,
+      borderEndWidth,
+      borderBottomWidth,
+      borderStartWidth,
+      elevation,
+      borderWidth,
+      borderRadius,
+      font,
+      fontFamily = font,
+      fontSize = font,
+      fontWeight = font,
+      lineHeight = font,
+      textAlign,
+      textDecorationStyle,
+      textDecorationLine,
+      textTransform,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd,
+      margin,
+      marginX,
+      marginY,
+      marginTop,
+      marginBottom,
+      marginStart,
+      marginEnd,
+      userSelect,
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      aspectRatio,
+      top,
+      bottom,
+      left,
+      right,
+      transform,
+      flexBasis,
+      flexShrink,
+      flexGrow,
+      opacity
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const Component = animated ? Animated.View : View;
+  const theme = useTheme();
+  const styles = useMemo(() => [getBorderedStyles({
+    bordered,
+    borderedHorizontal,
+    borderedVertical,
+    borderedStart,
+    borderedEnd,
+    borderedTop,
+    borderedBottom
+  }, theme), getStyles({
+    display,
+    position,
+    overflow,
+    zIndex,
+    gap,
+    columnGap,
+    rowGap,
+    justifyContent,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexWrap,
+    color,
+    background,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderEndWidth,
+    borderBottomWidth,
+    borderStartWidth,
+    elevation,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    textAlign,
+    textDecorationStyle,
+    textDecorationLine,
+    textTransform,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginBottom,
+    marginStart,
+    marginEnd,
+    userSelect,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    aspectRatio,
+    top,
+    bottom,
+    left,
+    right,
+    transform,
+    flexBasis,
+    flexShrink,
+    flexGrow,
+    opacity
+  }, theme), elevation ? getElevationStyles(elevation, theme, background) : undefined, pin && pinStyles[pin], dangerouslySetBackground ? {
+    backgroundColor: dangerouslySetBackground
+  } : undefined, style], [display, position, overflow, zIndex, gap, columnGap, rowGap, justifyContent, alignContent, alignItems, alignSelf, flexDirection, flexWrap, color, background, borderColor, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopWidth, borderEndWidth, borderBottomWidth, borderStartWidth, elevation, fontFamily, fontSize, fontWeight, lineHeight, textAlign, textDecorationStyle, textDecorationLine, textTransform, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd, margin, marginX, marginY, marginTop, marginBottom, marginStart, marginEnd, userSelect, width, height, minWidth, minHeight, maxWidth, maxHeight, aspectRatio, top, bottom, left, right, transform, flexBasis, flexShrink, flexGrow, opacity, dangerouslySetBackground, pin, bordered, borderedHorizontal, borderedVertical, borderedStart, borderedEnd, borderedTop, borderedBottom, theme, style]);
+  return /*#__PURE__*/_jsx(Component, _extends({
+    ref: ref,
+    style: styles,
+    testID: testID
+  }, props, {
+    children: children
+  }));
+}));
+Box.displayName = 'Box';

package/esm/layout/Divider.js

@@ -0,0 +1,37 @@
+const _excluded = ["color", "direction"];
+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, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Divider = /*#__PURE__*/memo(function Divider(_ref) {
+  let {
+      color = 'bgLine',
+      direction = 'horizontal'
+    } = _ref,
+    boxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const style = useMemo(() => [styles[direction], {
+    backgroundColor: theme.color[color]
+  }], [direction, theme.color, color]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    alignItems: "stretch",
+    alignSelf: "stretch"
+  }, boxProps, {
+    children: /*#__PURE__*/_jsx(View, {
+      style: style
+    })
+  }));
+});
+const styles = StyleSheet.create({
+  horizontal: {
+    height: 1,
+    flexGrow: 1
+  },
+  vertical: {
+    width: 1,
+    flexGrow: 1
+  }
+});

package/esm/layout/Fallback.js

@@ -0,0 +1,98 @@
+const _excluded = ["height", "shape", "width", "disableRandomRectWidth", "rectWidthVariant"];
+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; }
+// Simplified version of https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/lib/ShimmerPlaceholder.js
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { useFallbackShape } from '@coinbase/cds-common/hooks/useFallbackShape';
+import { LinearGradient } from '../gradients/LinearGradient';
+import { useTheme } from '../hooks/useTheme';
+import { fallbackShimmer } from '../styles/fallbackShimmer';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Fallback = /*#__PURE__*/memo(function Fallback(_ref) {
+  let {
+      height,
+      shape = 'rectangle',
+      width: baseWidth,
+      disableRandomRectWidth,
+      rectWidthVariant
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const fallbackShapeOptions = useMemo(() => ({
+    disableRandomRectWidth,
+    rectWidthVariant
+  }), [disableRandomRectWidth, rectWidthVariant]);
+  const {
+    width,
+    borderRadius
+  } = useFallbackShape(shape, baseWidth, fallbackShapeOptions);
+  const {
+    activeColorScheme
+  } = useTheme();
+  const shimmerColor = fallbackShimmer[activeColorScheme];
+  const shimmerPosition = useRef(new Animated.Value(-1));
+  useEffect(() => {
+    const shimmerAnimation = Animated.loop(Animated.timing(shimmerPosition.current, {
+      toValue: 1,
+      duration: 1300,
+      useNativeDriver: true,
+      // Disable interaction otherwise all `InteractionManager` listeners
+      // will hang indefinitely since Fallbacks will be rendered offscreen.
+      isInteraction: false
+    }), {
+      iterations: 10
+    });
+    const animateShimmer = () => {
+      shimmerAnimation.start();
+    };
+    animateShimmer();
+    return () => shimmerAnimation.stop();
+  }, []);
+  const containerStyle = useMemo(() => ({
+    width: width,
+    height: height,
+    overflow: 'hidden',
+    backgroundColor: shimmerColor[0],
+    borderRadius
+  }), [width, height, shimmerColor, borderRadius]);
+  const outputRange = useMemo(() => typeof width === 'number' ? [-width, width] : [-400, 400], [width]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    width: width
+  }, props, {
+    children: /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.child, {
+          transform: [{
+            translateX: shimmerPosition.current.interpolate({
+              inputRange: [-1, 1],
+              outputRange
+            })
+          }]
+        }],
+        children: /*#__PURE__*/_jsx(LinearGradient, {
+          colors: shimmerColor,
+          end: gradEnd,
+          start: gradStart,
+          stops: gradLocations,
+          style: styles.child
+        })
+      })
+    })
+  }));
+});
+const gradStart = {
+  x: -1,
+  y: 0.5
+};
+const gradEnd = {
+  x: 2,
+  y: 0.5
+};
+const gradLocations = [0.3, 0.5, 0.7];
+const styles = StyleSheet.create({
+  child: {
+    flex: 1
+  }
+});

package/esm/layout/Group.js

@@ -0,0 +1,40 @@
+const _excluded = ["children", "direction", "divider", "gap", "renderItem"];
+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, useMemo } from 'react';
+import { flattenAndJoinNodes } from '../utils/flattenAndJoinNodes';
+import { Box } from './Box';
+import { Spacer } from './Spacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead.
+ * @danger Make sure to add a `key` prop to each item.
+ */
+export const Group = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Group(_ref, forwardedRef) {
+  let {
+      children,
+      direction = 'vertical',
+      divider,
+      gap,
+      renderItem
+    } = _ref,
+    boxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const contents = useMemo(() => flattenAndJoinNodes({
+    children,
+    gap,
+    divider,
+    renderItem,
+    direction,
+    Spacer,
+    ItemWrapper: Box
+  }), [children, direction, divider, gap, renderItem]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    ref: forwardedRef,
+    alignItems: "stretch",
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    flexWrap: "nowrap"
+  }, boxProps, {
+    children: contents
+  }));
+}));
+Group.displayName = 'Group';