after-effects-plugin/plainly-plugin/src/ui/components/common/Checkbox.tsx at d6aeb1f4367b5fb6a20c1d39dcf0b1eb0033e5f7 · plainly-videos/after-effects-plugin · 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
import classNames from 'classnames';

export function Checkbox({
  id,
  name,
  label,
  description,
  defaultChecked = true,
  onChange,
  disabled = false,
}: {
  id: string;
  name: string;
  label: string;
  description?: string;
  defaultChecked?: boolean;
  onChange: React.Dispatch<React.SetStateAction<boolean>>;
  disabled?: boolean;
}) {
  return (
    <div
      className={classNames(
        'flex gap-3',
        disabled && 'pointer-events-none opacity-50',
      )}
    >
      <div className="flex h-6 shrink-0 items-center">
        <div className="group grid size-4 grid-cols-1">
          <input
            defaultChecked={defaultChecked}
            id={id}
            name={name}
            type="checkbox"
            aria-describedby={`${id}-description`}
            className="col-start-1 row-start-1 appearance-none rounded border border-white/10 bg-white/5 checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-white/10 disabled:bg-transparent forced-colors:appearance-auto"
            onChange={(e) => onChange(e.target.checked)}
            disabled={disabled}
          />
          <svg
            fill="none"
            viewBox="0 0 14 14"
            className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-white/25"
          >
            <title>Check</title>
            <path
              d="M3 8L6 11L11 3.5"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="opacity-0 group-has-[:checked]:opacity-100"
            />
            <path
              d="M3 7H11"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="opacity-0 group-has-[:indeterminate]:opacity-100"
            />
          </svg>
        </div>
      </div>
      <div className="text-xs">
        <label htmlFor={id} className="font-medium text-white">
          {label}
        </label>
        <p id={`${id}-description`} className="text-gray-400">
          {description}
        </p>
      </div>
    </div>
  );
}