feat(system): add Checkbox component

packages/status-react/package.json

@@ -27,11 +27,13 @@
     "@hcaptcha/react-hcaptcha": "^1.0.0",
     "@radix-ui/react-accessible-icon": "^0.1.4",
     "@radix-ui/react-alert-dialog": "^0.1.7",
+    "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-collapsible": "^0.1.6",
     "@radix-ui/react-compose-refs": "^0.1.0",
     "@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-label": "^0.1.5",
     "@radix-ui/react-popover": "^0.1.6",
     "@radix-ui/react-separator": "^0.1.4",
     "@radix-ui/react-toggle-group": "^0.1.5",

packages/status-react/src/system/checkbox/checkbox.mdx

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

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

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react'
+
+import { Text } from '../text'
+import { Indicator, Root, Wrapper } from './styles'
+
+import type { Ref } from 'react'
+
+interface Props {
+  children: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  required?: boolean
+}
+
+const Checkbox = (props: Props, ref: Ref<HTMLButtonElement>) => {
+  const { children, checked, onChange, required } = props
+
+  return (
+    <Wrapper>
+      <Root
+        ref={ref}
+        checked={checked}
+        onCheckedChange={onChange}
+        required={required}
+      >
+        <Indicator>{/* TODO: add <CheckIcon /> */}</Indicator>
+      </Root>
+      <Text>{children}</Text>
+    </Wrapper>
+  )
+}
+
+const _Checkbox = forwardRef(Checkbox)
+
+export { _Checkbox as Checkbox }
+export type { Props as CheckboxProps }

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

@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './checkbox'
+export { Checkbox } from './checkbox'

packages/status-react/src/system/checkbox/styles.tsx

@@ -0,0 +1,32 @@
+import * as Checkbox from '@radix-ui/react-checkbox'
+import { Label } from '@radix-ui/react-label'
+
+import { styled, theme } from '~/src/styles/config'
+
+export const Wrapper = styled(Label, {
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+})
+
+export const Root = styled(Checkbox.Root, {
+  height: 18,
+  width: 18,
+  flexShrink: 0,
+  borderRadius: theme.radii['1'],
+  background: theme.colors['accent-8'],
+
+  '&:hover': {},
+
+  '&[aria-checked="true"]': {
+    background: theme.colors['primary-1'],
+    color: theme.colors.white,
+    '&:hover': {},
+  },
+})
+
+export const Indicator = styled(Checkbox.Indicator, {
+  width: '100%',
+  height: '100%',
+})

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

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