diff --git a/packages/status-react/package.json b/packages/status-react/package.json index 5813e388..1e3b7cc4 100644 --- a/packages/status-react/package.json +++ b/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", diff --git a/packages/status-react/src/system/checkbox/checkbox.mdx b/packages/status-react/src/system/checkbox/checkbox.mdx new file mode 100644 index 00000000..ea6efcc4 --- /dev/null +++ b/packages/status-react/src/system/checkbox/checkbox.mdx @@ -0,0 +1,5 @@ +# Checkbox + +```tsx +import { Checkbox } from '@status-im/components' +``` diff --git a/packages/status-react/src/system/checkbox/checkbox.tsx b/packages/status-react/src/system/checkbox/checkbox.tsx new file mode 100644 index 00000000..74f0b99e --- /dev/null +++ b/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) => { + const { children, checked, onChange, required } = props + + return ( + + + {/* TODO: add */} + + {children} + + ) +} + +const _Checkbox = forwardRef(Checkbox) + +export { _Checkbox as Checkbox } +export type { Props as CheckboxProps } diff --git a/packages/status-react/src/system/checkbox/index.tsx b/packages/status-react/src/system/checkbox/index.tsx new file mode 100644 index 00000000..e3a61943 --- /dev/null +++ b/packages/status-react/src/system/checkbox/index.tsx @@ -0,0 +1,2 @@ +export type { CheckboxProps } from './checkbox' +export { Checkbox } from './checkbox' diff --git a/packages/status-react/src/system/checkbox/styles.tsx b/packages/status-react/src/system/checkbox/styles.tsx new file mode 100644 index 00000000..ed73d613 --- /dev/null +++ b/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%', +}) diff --git a/packages/status-react/src/system/index.tsx b/packages/status-react/src/system/index.tsx index a4b205e2..c6b1a346 100644 --- a/packages/status-react/src/system/index.tsx +++ b/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 {