From 8efa04f054a51b26ccdc9287d0ae8d14d592f315 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Fri, 18 Mar 2022 14:31:56 +0100
Subject: [PATCH] feat(system): add Separator primitive

---
 packages/status-react/package.json            |  1 +
 .../src/system/separator/index.tsx            |  1 +
 .../src/system/separator/separator.tsx        | 31 +++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 packages/status-react/src/system/separator/index.tsx
 create mode 100644 packages/status-react/src/system/separator/separator.tsx

diff --git a/packages/status-react/package.json b/packages/status-react/package.json
index 8ba441cf..6700dbe7 100644
--- a/packages/status-react/package.json
+++ b/packages/status-react/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-context-menu": "^0.1.6",
     "@radix-ui/react-dialog": "^0.1.7",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "@radix-ui/react-separator": "^0.1.4",
     "@radix-ui/react-tooltip": "^0.1.7",
     "@radix-ui/react-visually-hidden": "^0.1.4",
     "@status-im/core": "^0.0.0",
diff --git a/packages/status-react/src/system/separator/index.tsx b/packages/status-react/src/system/separator/index.tsx
new file mode 100644
index 00000000..d287f418
--- /dev/null
+++ b/packages/status-react/src/system/separator/index.tsx
@@ -0,0 +1 @@
+export { Separator } from './separator'
diff --git a/packages/status-react/src/system/separator/separator.tsx b/packages/status-react/src/system/separator/separator.tsx
new file mode 100644
index 00000000..033a2e22
--- /dev/null
+++ b/packages/status-react/src/system/separator/separator.tsx
@@ -0,0 +1,31 @@
+import { Root } from '@radix-ui/react-separator'
+
+import { styled } from '~/src/styles/config'
+
+export const Separator = styled(Root, {
+  border: 'none',
+  margin: 0,
+  flexShrink: 0,
+  backgroundColor: '$accent-7',
+  cursor: 'default',
+
+  variants: {
+    size: {
+      '1': {
+        '&[data-orientation="horizontal"]': {
+          height: '1px',
+          width: '100%',
+        },
+
+        '&[data-orientation="vertical"]': {
+          width: '1px',
+          height: '100%',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: '1',
+  },
+})