fix(Spinner): new Spinner component

src/lib/Popover/Popover.tsx

@@ -1,6 +1,6 @@
-import { Options, Placement } from '@popperjs/core';
-import { AnimatePresence, motion, Variants } from 'framer-motion';
 import React, { useMemo } from 'react';
+import type { Options } from '@popperjs/core';
+import { AnimatePresence, motion, Variants } from 'framer-motion';
 import Portal from '../Portal';
 import { styled } from '../stitches.config';
 import { sameWidth, useKeyboardHandles, useOnClickOutside, usePopper } from '../utils';

src/lib/Spinner/Spinner.tsx

@@ -0,0 +1,61 @@
+import { StitchesProps } from '@stitches/react';
+import React from 'react';
+import { styled, css } from '../stitches.config';
+import { createVariant } from '../theme/variants';
+
+const rotate = css.keyframes({
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+const dash = css.keyframes({
+  '0%': {
+    strokeDasharray: '1, 150',
+    strokeDashoffset: '0',
+  },
+  '50%': {
+    strokeDasharray: '90, 150',
+    strokeDashoffset: '-35',
+  },
+  '100%': {
+    strokeDasharray: '90, 150',
+    strokeDashoffset: '-124',
+  },
+});
+
+const Main = styled('svg', {
+  animation: `${rotate} 2s linear infinite`,
+  variants: {
+    size: createVariant({
+      sm: {
+        size: '$5',
+      },
+      md: {
+        size: '$8',
+      },
+      lg: {
+        size: '$16',
+      },
+      xl: {
+        size: '$24',
+      },
+    }),
+  },
+});
+
+const Circle = styled('circle', {
+  stroke: 'currentColor',
+  strokeLinecap: 'round',
+  animation: `${dash} 1.5s ease-in-out infinite`,
+});
+
+const Spinner: React.FC<Omit<StitchesProps<typeof Main>, 'as'>> = ({ size = 'md', ...props }) => {
+  return (
+    <Main size={size} {...props} viewBox="0 0 50 50" role="progressbar" aria-valuemin={0} aria-valuemax={100}>
+      <Circle cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
+    </Main>
+  );
+};
+
+export default Spinner;

src/lib/Spinner/index.ts

@@ -0,0 +1 @@
+export { default } from './Spinner';

src/lib/index.ts

@@ -13,6 +13,7 @@ export { default as ListItem } from './ListItem';
 export { default as Menu } from './Menu';
 export { default as Picker } from './Picker';
 export { default as Section } from './Section';
+export { default as Spinner } from './Spinner';
 export { default as Switch } from './Switch';
 export { default as Text } from './Text';
 export { default as TextField } from './TextField';

src/pages/components/Spinner.mdx

@@ -0,0 +1,16 @@
+---
+name: Spinner
+---
+
+import { Playground } from 'dokz';
+import { Flex, Spinner } from '@fxtrot/ui';
+
+# Spinner
+
+<Playground>
+  <Flex space="lg" flow="row" cross="center" css={{ bc: '$gray050', p: '$8' }}>
+    <Spinner size="sm" />
+    <Spinner size="md" />
+    <Spinner size="lg" />
+  </Flex>
+</Playground>