click-ui/src/components/Checkbox/Checkbox.tsx at 6d8cfb7ec0c232ccd996243855a7490dda59c6be · ClickHouse/click-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { GenericLabel } from '@/components/GenericLabel';
import { Icon } from '@/components/Icon';

import * as RadixCheckbox from '@radix-ui/react-checkbox';
import { useId } from 'react';
import { styled } from 'styled-components';
import { FormRoot } from '@/components/FormContainer';
import { CheckboxProps, CheckboxVariants } from './Checkbox.types';

const Wrapper = styled(FormRoot)`
  align-items: center;
  max-width: fit-content;
`;

export const Checkbox = ({
  id,
  label,
  variant = 'default',
  disabled,
  orientation = 'horizontal',
  dir = 'end',
  checked,
  ...delegated
}: CheckboxProps) => {
  const defaultId = useId();
  return (
    <Wrapper
      $orientation={orientation}
      $dir={dir}
    >
      <CheckInput
        id={id ?? defaultId}
        data-testid="checkbox"
        variant={variant}
        disabled={disabled}
        aria-label={`${label}`}
        checked={checked}
        {...delegated}
      >
        <CheckIconWrapper>
          <Icon
            name={checked === 'indeterminate' ? 'minus' : 'check'}
            size="sm"
          />
        </CheckIconWrapper>
      </CheckInput>
      {label && (
        <GenericLabel
          htmlFor={id ?? defaultId}
          disabled={disabled}
        >
          {label}
        </GenericLabel>
      )}
    </Wrapper>
  );
};

const CheckInput = styled(RadixCheckbox.Root)<{
  variant: CheckboxVariants;
}>`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  ${({ theme, variant }) => `
    border-radius: ${theme.click.checkbox.radii.all};
    width: ${theme.click.checkbox.size.all};
    height: ${theme.click.checkbox.size.all};
    background: ${theme.click.checkbox.color.variations[variant].background.default};
    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};
    cursor: pointer;

    &:hover {
      background: ${theme.click.checkbox.color.variations[variant].background.hover};
    }
    &[data-state="checked"],
    &[data-state="indeterminate"] {
      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
      background: ${theme.click.checkbox.color.variations[variant].background.active};
    }
    &[data-disabled] {
      background: ${theme.click.checkbox.color.background.disabled};
      border-color: ${theme.click.checkbox.color.stroke.disabled};
      cursor: not-allowed;
      &[data-state="checked"],
      &[data-state="indeterminate"] {
        background: ${theme.click.checkbox.color.background.disabled};
        border-color: ${theme.click.checkbox.color.stroke.disabled};
      }
    }
  `};
`;

const CheckIconWrapper = styled(RadixCheckbox.Indicator)`
  ${({ theme }) => `
    color: ${theme.click.checkbox.color.check.active};
    &[data-disabled] {
      color: ${theme.click.checkbox.color.check.disabled};
    }
  `}
`;