feat: implement Separator atom

src/ui/atoms/index.ts

@@ -9,6 +9,7 @@ export { Input } from './input';
 export { Label } from './label';
 export { List } from './list';
 export { Notification } from './notification';
+export { Separator } from './separator';
 export { Surface } from './surface';
 export { Text } from './text';
 export { TextArea } from './text-area';

src/ui/atoms/separator/index.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Variant } from 'lib/types';
+
+const map = (properties: Variant) => ({
+  'data-variant': properties.variant || 'default',
+});
+
+export const Separator = styled.div.attrs(map)`
+  width: 100%;
+  border-top: var(--woly-border-width) solid var(--woly-canvas-disabled);
+  margin: calc(3px - (var(--woly-border-width) / 2)) 0;
+`;

src/ui/atoms/separator/usage.mdx

@@ -0,0 +1,41 @@
+---
+name: separator
+category: atoms
+package: 'woly'
+---
+
+import { Playground, block } from 'box-styles'
+import { Heading, Input, Separator } from 'ui'
+
+`Sepatator` is a line that divides blocks or content.
+
+### Example
+
+<Playground direction="vertical">
+  <div style={{ width: '300px' }}>
+    <div style={{ margin: '18px 0' }}>
+      <Heading size={2}>User List</Heading>
+    </div>
+    <Separator variant="primary" />
+    <Input
+      type="text"
+      name="name"
+      placeholder="Search"
+      onChange={() => console.info('On input change')}
+      variant="primary"
+      style={{ margin: '10px 0' }}
+    />
+  </div>
+</Playground>
+
+### Kinds
+
+| Name        | Description    |
+| ----------- | -------------- |
+| `Separator` | Base separator |
+
+### Props
+
+| Name      | Type     | Default     | Description                               |
+| --------- | -------- | ----------- | ----------------------------------------- |
+| `variant` | `string` | `'default'` | Variant prop to style Separator component |