@coinbase/cds-mobile 0.0.0 → 8.13.1

package/esm/dots/__figma__/DotCount.figma.js

@@ -0,0 +1,16 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { DotCount } from '../DotCount';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotCount, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A11976', {
+  imports: ["import { DotCount } from '@coinbase/cds-mobile/dots/DotCount';"],
+  props: {
+    count: figma.enum('type', {
+      'single digit': 1,
+      '2 digits': 12,
+      '3+ digits': 123
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(DotCount, _extends({}, props))
+});

package/esm/dots/__figma__/DotStatusColor.figma.js

@@ -0,0 +1,23 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { DotStatusColor } from '../DotStatusColor';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotStatusColor, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A11983', {
+  imports: ["import { DotStatusColor } from '@coinbase/cds-mobile/dots/DotStatusColor';"],
+  props: {
+    variant: figma.enum('variant', {
+      positive: 'positive',
+      negative: 'negative',
+      primary: 'primary',
+      foregroundMuted: 'foregroundMuted'
+    }),
+    size: figma.enum('size', {
+      l: 'l',
+      m: 'm',
+      s: 's',
+      xs: 'xs'
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(DotStatusColor, _extends({}, props))
+});

package/esm/dots/__figma__/DotSymbol.figma.js

@@ -0,0 +1,45 @@
+const _excluded = ["children"];
+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 { DotSymbol } from '../DotSymbol';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotSymbol, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A12033', {
+  imports: ["import { DotSymbol } from'@coinbase/cds-mobile/dots/DotSymbol';"],
+  props: {
+    children: figma.enum('symbol size', {
+      l: figma.instance('48 media'),
+      m: figma.instance('32 media'),
+      s: figma.instance('32 media'),
+      xs: figma.instance('24 media')
+    }),
+    symbol: figma.enum('symbol size', {
+      l: figma.instance('l dot'),
+      m: figma.instance('m dot'),
+      s: figma.instance('s dot'),
+      xs: figma.instance('xs dot')
+    }),
+    pin: figma.enum('pin', {
+      'bottom-end': 'bottom-end',
+      'bottom-start': 'bottom-start',
+      'top-start': 'top-start',
+      'top-end': 'top-end'
+    }),
+    size: figma.enum('symbol size', {
+      l: 'l',
+      m: 'm',
+      s: 's',
+      xs: 'xs'
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(DotSymbol, _extends({}, props, {
+      children: children
+    }));
+  }
+});

package/esm/dots/__stories__/Dot.stories.js

@@ -0,0 +1,480 @@
+import React from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { avatarSizes } from '@coinbase/cds-common/internal/data/avatars';
+import { iconSizes } from '@coinbase/cds-common/internal/data/iconData';
+import { avatarDotSizeMap, avatarIconSizeMap } from '@coinbase/cds-common/tokens/dot';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons/Icon';
+import { Box } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Avatar } from '../../media/Avatar';
+import { Text } from '../../typography/Text';
+import { DotCount } from '../DotCount';
+import { DotStatusColor } from '../DotStatusColor';
+import { DotSymbol } from '../DotSymbol';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const VARIANTS = ['positive', 'negative', 'primary', 'foregroundMuted', 'warning'];
+const PIN_DIRECTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+const SIZES = ['s', 'm', 'l'];
+const DotCountBasic = () => {
+  const counts = [1, 100, 30, 2, 0, 99];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [counts.map(count => /*#__PURE__*/_jsx(Box, {
+      alignItems: "flex-start",
+      padding: 1,
+      children: /*#__PURE__*/_jsx(DotCount, {
+        count: count
+      })
+    }, "DotCount-" + count)), /*#__PURE__*/_jsx(Box, {
+      alignItems: "flex-start",
+      padding: 1,
+      children: /*#__PURE__*/_jsx(DotCount, {
+        count: 11,
+        max: 9
+      })
+    })]
+  });
+};
+const DotCountVariant = () => {
+  return /*#__PURE__*/_jsx(VStack, {
+    alignItems: "flex-start",
+    gap: 1,
+    children: /*#__PURE__*/_jsx(DotCount, {
+      count: 30,
+      variant: "negative"
+    })
+  }, "DotCount-variant-negative");
+};
+const DotCountPlacements = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    alignItems: "flex-start",
+    gap: 4,
+    padding: 1,
+    paddingBottom: 4,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "top-end"
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 30,
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "square",
+        size: "xl"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 30,
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "square",
+        size: "l"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 1,
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "calendar",
+        size: "m"
+      })
+    }), /*#__PURE__*/_jsxs(DotCount, {
+      count: 0,
+      pin: "top-end",
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Count = 0. Dot should not show up"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "calendar",
+        size: "m"
+      })]
+    })]
+  }, "DotCount-placement-top-end");
+};
+const DotCountOverlap = () => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DotCount, {
+      count: 1,
+      overlap: "circular",
+      pin: "top-end",
+      variant: "negative",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "circle",
+        size: "l"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 30,
+      overlap: "circular",
+      pin: "top-end",
+      variant: "negative",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "circle",
+        size: "xl"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 100,
+      overlap: "circular",
+      pin: "top-end",
+      variant: "negative",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "circle",
+        size: "xxl"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 99,
+      overlap: "circular",
+      pin: "top-end",
+      variant: "negative",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "circle",
+        size: "xxxl"
+      })
+    })]
+  });
+};
+const DotCountComplex = () => {
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(DotCount, {
+      count: 2,
+      overlap: "circular",
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "circle",
+        size: "xxxl"
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      })]
+    })]
+  });
+};
+const DotCountStyle = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(DotCount, {
+    count: 30,
+    styles: {
+      container: {
+        borderRadius: 4,
+        backgroundColor: theme.color.bgPositive,
+        borderColor: theme.color.fg
+      }
+    }
+  });
+};
+const DotStatusColorBasic = () => {
+  return /*#__PURE__*/_jsx(DotStatusColor, {
+    variant: "positive"
+  });
+};
+const DotStatusColorVariant = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: VARIANTS.map(variant => /*#__PURE__*/_jsx(VStack, {
+      alignItems: "flex-start",
+      gap: 1,
+      children: /*#__PURE__*/_jsx(DotStatusColor, {
+        variant: variant
+      })
+    }, "DotStatusColor-variant-" + variant))
+  });
+};
+const DotStatusColorSizes = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: SIZES.map(size => /*#__PURE__*/_jsx(VStack, {
+      alignItems: "flex-start",
+      gap: 1,
+      children: /*#__PURE__*/_jsx(DotStatusColor, {
+        size: size,
+        variant: "negative"
+      })
+    }, "DotStatusColor-size-" + size))
+  });
+};
+const DotStatusColorPlacements = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: PIN_DIRECTIONS.map(pinDirection => /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-start",
+      gap: 4,
+      padding: 1,
+      paddingBottom: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: pinDirection
+      }), /*#__PURE__*/_jsx(DotStatusColor, {
+        pin: pinDirection,
+        variant: "positive",
+        children: /*#__PURE__*/_jsx(Avatar, {
+          shape: "square",
+          size: "l"
+        })
+      }), /*#__PURE__*/_jsx(DotStatusColor, {
+        pin: pinDirection,
+        variant: "positive",
+        children: /*#__PURE__*/_jsx(Avatar, {
+          shape: "square",
+          size: "xxl"
+        })
+      }), /*#__PURE__*/_jsx(DotStatusColor, {
+        pin: pinDirection,
+        variant: "positive",
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "calendar",
+          size: "l"
+        })
+      })]
+    }, "DotStatusColor-placement-" + pinDirection))
+  });
+};
+const DotStatusColorOverlap = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: PIN_DIRECTIONS.map(pinDirection => avatarSizes.map(avatarSize => /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-start",
+      gap: 4,
+      padding: 1,
+      paddingBottom: 4,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        font: "label1",
+        children: [pinDirection, ", avatarSize: ", avatarSize]
+      }), /*#__PURE__*/_jsx(DotStatusColor, {
+        overlap: "circular",
+        pin: pinDirection,
+        variant: "positive",
+        children: /*#__PURE__*/_jsx(Avatar, {
+          shape: "circle",
+          size: avatarSize
+        })
+      })]
+    }, "DotStatusColor-overlap-" + pinDirection + "-" + avatarSize)))
+  });
+};
+const DotSymbolPlacements = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: PIN_DIRECTIONS.map(pinDirection => /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-start",
+      gap: 4,
+      padding: 1,
+      paddingBottom: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: pinDirection
+      }), /*#__PURE__*/_jsx(DotSymbol, {
+        pin: pinDirection,
+        size: "m",
+        source: assets.eth.imageUrl,
+        children: /*#__PURE__*/_jsx(Avatar, {
+          shape: "square",
+          size: "xxxl"
+        })
+      }), /*#__PURE__*/_jsx(DotSymbol, {
+        pin: pinDirection,
+        size: "m",
+        source: assets.eth.imageUrl,
+        children: /*#__PURE__*/_jsx(Avatar, {
+          shape: "square",
+          size: "xl"
+        })
+      }), /*#__PURE__*/_jsx(DotSymbol, {
+        pin: pinDirection,
+        size: "m",
+        source: assets.eth.imageUrl,
+        children: /*#__PURE__*/_jsx(Icon, {
+          active: true,
+          name: "airdrop",
+          size: "l"
+        })
+      })]
+    }, "dotsymbol-placement-" + pinDirection))
+  });
+};
+const DotSymbolSizes = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: SIZES.map(size => /*#__PURE__*/_jsx(VStack, {
+      alignItems: "flex-start",
+      gap: 1,
+      children: /*#__PURE__*/_jsx(DotSymbol, {
+        size: size,
+        source: assets.eth.imageUrl
+      })
+    }, "dotsymbol-size-" + size))
+  });
+};
+const DotSymbolIcon = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: PIN_DIRECTIONS.map(pinDirection => avatarSizes.map(avatarSize => /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-start",
+      gap: 4,
+      padding: 1,
+      paddingBottom: 4,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        font: "label1",
+        children: ["Pin Direction: ", pinDirection, " Avatar Size: ", avatarSize, " Icon Size:", ' ', avatarIconSizeMap[avatarSize]]
+      }), /*#__PURE__*/_jsx(DotSymbol, {
+        active: true,
+        iconName: "safe",
+        overlap: "circular",
+        pin: pinDirection,
+        size: avatarIconSizeMap[avatarSize],
+        children: /*#__PURE__*/_jsx(Avatar, {
+          size: avatarSize,
+          src: assets.eth.imageUrl
+        })
+      })]
+    }, "dotsymbol-icons-" + pinDirection + "-" + avatarSize)))
+  });
+};
+const DotSymbolOverlap = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: PIN_DIRECTIONS.map(pinDirection => iconSizes.map(size => {
+      var _assets$ada;
+      return /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        gap: 4,
+        padding: 1,
+        paddingBottom: 4,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          font: "label1",
+          children: [pinDirection, ", dot-size: ", size]
+        }), /*#__PURE__*/_jsx(DotSymbol, {
+          overlap: "circular",
+          pin: pinDirection,
+          size: size,
+          source: ((_assets$ada = assets.ada) == null ? void 0 : _assets$ada.imageUrl) || assets.btc.imageUrl,
+          children: /*#__PURE__*/_jsx(Avatar, {
+            size: "xxxl",
+            src: assets.eth.imageUrl
+          })
+        })]
+      }, "dotsymbol-overlap-" + size + "-" + pinDirection);
+    }))
+  });
+};
+const DotSymbolComplex = () => {
+  var _assets$polygon;
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(DotSymbol, {
+      overlap: "circular",
+      pin: "bottom-end",
+      size: avatarDotSizeMap.xxxl,
+      source: ((_assets$polygon = assets.polygon) == null ? void 0 : _assets$polygon.imageUrl) || assets.btc.imageUrl,
+      children: /*#__PURE__*/_jsx(Avatar, {
+        shape: "square",
+        size: "xxl"
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: "Hello Hello"
+      })]
+    })]
+  });
+};
+const DotScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Basic",
+      children: /*#__PURE__*/_jsx(DotCountBasic, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Placements",
+      children: /*#__PURE__*/_jsx(DotCountPlacements, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Variant",
+      children: /*#__PURE__*/_jsx(DotCountVariant, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Overlap",
+      children: /*#__PURE__*/_jsx(DotCountOverlap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Complex",
+      children: /*#__PURE__*/_jsx(DotCountComplex, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Style",
+      children: /*#__PURE__*/_jsx(DotCountStyle, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotStatusColor Basic",
+      children: /*#__PURE__*/_jsx(DotStatusColorBasic, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotStatusColor Variant",
+      children: /*#__PURE__*/_jsx(DotStatusColorVariant, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotStatusColor Sizes",
+      children: /*#__PURE__*/_jsx(DotStatusColorSizes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotStatusColor Placements",
+      children: /*#__PURE__*/_jsx(DotStatusColorPlacements, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotStatusColor Overlap",
+      children: /*#__PURE__*/_jsx(DotStatusColorOverlap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotSymbol Basic",
+      children: /*#__PURE__*/_jsx(DotSymbol, {
+        source: {
+          uri: assets.btc.imageUrl
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotSymbol Sizes",
+      children: /*#__PURE__*/_jsx(DotSymbolSizes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotSymbol Placements",
+      children: /*#__PURE__*/_jsx(DotSymbolPlacements, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotSymbol Icons",
+      children: /*#__PURE__*/_jsx(DotSymbolIcon, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotSymbol Overlap",
+      children: /*#__PURE__*/_jsx(DotSymbolOverlap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotSymbol Complex",
+      children: /*#__PURE__*/_jsx(DotSymbolComplex, {})
+    })]
+  });
+};
+export default DotScreen;

package/esm/dots/__stories__/DotMisc.stories.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons/Icon';
+import { Box } from '../../layout/Box';
+import { DotCount } from '../DotCount';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DotCountDynamic = () => {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(prev => prev === 0 ? Math.floor(Math.random() * 99) : 0);
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "flex-start",
+    minHeight: 100,
+    padding: 1,
+    children: /*#__PURE__*/_jsx(DotCount, {
+      count: count,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "airdrop",
+        size: "m"
+      })
+    })
+  });
+};
+const DotMiscScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "DotCount Dynamic",
+      children: /*#__PURE__*/_jsx(DotCountDynamic, {})
+    })
+  });
+};
+export default DotMiscScreen;

package/esm/dots/dotStyles.js

@@ -0,0 +1,10 @@
+export const getTransform = (translateX, translateY) => {
+  return {
+    position: 'absolute',
+    transform: [{
+      translateX
+    }, {
+      translateY
+    }]
+  };
+};

package/esm/dots/index.js

@@ -0,0 +1,3 @@
+export * from './DotCount';
+export * from './DotStatusColor';
+export * from './DotSymbol';

package/esm/dots/useDotsLayout.js

@@ -0,0 +1,8 @@
+import { useCallback, useMemo, useState } from 'react';
+export const useDotsLayout = () => {
+  const [size, setSize] = useState(null);
+  const onLayout = useCallback(event => {
+    setSize(event.nativeEvent.layout);
+  }, []);
+  return useMemo(() => [size, onLayout], [onLayout, size]);
+};