feat(system): add ButtonGroup component

packages/status-react/src/system/button-group/button-group.docs.mdx

@@ -0,0 +1,5 @@
+# ButtonGroup
+
+```tsx
+import { ButtonGroup } from '@status-im/components'
+```

packages/status-react/src/system/button-group/button-group.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { Button, Group } from './styles'
+
+interface Props<V> {
+  value: V
+  onChange: (value: V) => void
+  children: React.ReactElement[]
+}
+
+const ButtonGroup = <Value extends string>(props: Props<Value>) => {
+  const { children, value, onChange } = props
+
+  const handleChange = (value: string) => {
+    // Ensure non-empty value
+    if (value) {
+      onChange(value as Value)
+    }
+  }
+
+  return (
+    <Group type="single" value={value} onValueChange={handleChange}>
+      {children}
+    </Group>
+  )
+}
+
+interface ItemProps {
+  value: string
+  children: string
+}
+
+const ButtonGroupItem = (props: ItemProps) => {
+  const { value, children } = props
+
+  return <Button value={value}>{children}</Button>
+}
+
+ButtonGroup.Item = ButtonGroupItem
+
+export { ButtonGroup }
+export type { Props as ButtonGroupProps }

packages/status-react/src/system/button-group/index.tsx

@@ -0,0 +1,2 @@
+export type { ButtonGroupProps } from './button-group'
+export { ButtonGroup } from './button-group'

packages/status-react/src/system/button-group/styles.tsx

@@ -0,0 +1,41 @@
+import { Item, Root } from '@radix-ui/react-toggle-group'
+
+import { styled } from '~/src/styles/config'
+
+export const Group = styled(Root, {
+  backgroundColor: '$primary-3',
+  borderRadius: '$2',
+  height: 36,
+  display: 'inline-flex',
+  alignItems: 'stretch',
+})
+
+export const Button = styled(Item, {
+  backgroundColor: '$transparent',
+  color: '$primary-1',
+  display: 'inline-flex',
+  fontSize: 15,
+  lineHeight: 1.2,
+  fontWeight: '$500',
+  padding: '8px 36px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginLeft: 1,
+
+  '&:first-child': {
+    marginLeft: 0,
+    borderTopLeftRadius: '$2',
+    borderBottomLeftRadius: '$2',
+  },
+
+  '&:last-child': {
+    borderTopRightRadius: '$2',
+    borderBottomRightRadius: '$2',
+  },
+
+  '&[data-state=on]': {
+    backgroundColor: '$primary-1',
+    color: '$white',
+    borderRadius: '$2',
+  },
+})

packages/status-react/src/system/index.tsx

@@ -1,6 +1,7 @@
 export { Avatar } from './avatar'
 export { Box } from './box'
 export { Button } from './button'
+export { ButtonGroup } from './button-group'
 export { ContextMenu, ContextMenuTrigger } from './context-menu'
 export { CopyInput } from './copy-input'
 export {