Checkbox

1import * as React from 'react'
2import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
3import { cn } from '@/lib/utils'
4 
5export interface CheckboxProps
6  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
7  label?: string
8}
9 
10const Checkbox = React.forwardRef<
11  React.ElementRef<typeof CheckboxPrimitive.Root>,
12  CheckboxProps
13>(({ className, label, id, ...props }, ref) => {
14  const checkboxId = id ?? label?.toLowerCase().replace(/\s+/g, '-')
15 
16  return (
17    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}>
18      <CheckboxPrimitive.Root
19        ref={ref}
20        id={checkboxId}
21        className={cn(
22          'peer h-4 w-4 shrink-0 rounded-none',
23          'border border-[var(--border)]',
24          'bg-[var(--surface)]',
25          'focus-visible:outline-none',
26          'focus-visible:border-[var(--border-active)]',
27          'focus-visible:shadow-[var(--glow-green)]',
28          'disabled:cursor-not-allowed disabled:opacity-40',
29          'data-[state=checked]:border-[var(--color-green)]',
30          'data-[state=checked]:bg-[var(--surface-raised)]',
31          'data-[state=checked]:shadow-[var(--glow-green)]',
32          'transition-all duration-150',
33          className
34        )}
35        {...props}
36      >
37        <CheckboxPrimitive.Indicator
38          style={{
39            display:        'flex',
40            alignItems:     'center',
41            justifyContent: 'center',
42            width:          '100%',
43            height:         '100%',
44          }}
45        >
46          <span
47            style={{
48              color:      'var(--color-green)',
49              fontSize:   '0.6rem',
50              lineHeight: 1,
51              textShadow: 'var(--text-glow-green)',
52              userSelect: 'none',
53            }}
54          >
55            ■
56          </span>
57        </CheckboxPrimitive.Indicator>
58      </CheckboxPrimitive.Root>
59 
60      {label && (
61        <label
62          htmlFor={checkboxId}
63          style={{
64            fontSize:      '0.75rem',
65            color:         'var(--text-secondary)',
66            letterSpacing: '0.05em',
67            cursor:        'pointer',
68            userSelect:    'none',
69          }}
70        >
71          {label}
72        </label>
73      )}
74    </div>
75  )
76})
77Checkbox.displayName = CheckboxPrimitive.Root.displayName
78 
79export { Checkbox }