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', + }, +})