sposchedule

1
export default {
2
  root: {
3
    class: [
4
      'relative',
5

6
      // Alignment
7
      'inline-flex',
8
      'align-bottom',
9

10
      // Size
11
      'w-5',
12
      'h-5',
13

14
      // Misc
15
      'cursor-pointer',
16
      'select-none',
17
    ],
18
  },
19
  box: ({ props, context }) => ({
20
    class: [
21
      // Alignment
22
      'flex',
23
      'items-center',
24
      'justify-center',
25

26
      // Size
27
      'w-5',
28
      'h-5',
29

30
      // Shape
31
      'rounded',
32
      'border',
33

34
      // Colors
35
      {
36
        'border-surface-300 dark:border-surface-700':
37
          !context.checked && !props.invalid,
38
        'bg-surface-0 dark:bg-surface-950':
39
          !context.checked && !props.invalid && !props.disabled,
40
        'border-primary bg-primary': context.checked,
41
      },
42

43
      // Invalid State
44
      'invalid:focus:ring-red-200',
45
      'invalid:hover:border-red-500',
46
      { 'border-red-500 dark:border-red-400': props.invalid },
47

48
      // States
49
      {
50
        'peer-hover:border-surface-400 dark:peer-hover:border-surface-600':
51
          !props.disabled && !context.checked && !props.invalid,
52
        'peer-hover:bg-primary-emphasis peer-hover:border-primary-emphasis':
53
          !props.disabled && context.checked,
54
        'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
55
          !props.disabled,
56
        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
57
          props.disabled,
58
      },
59

60
      // Transitions
61
      'transition-colors',
62
      'duration-200',
63
    ],
64
  }),
65
  input: {
66
    class: [
67
      'peer',
68

69
      // Size
70
      'w-full ',
71
      'h-full',
72

73
      // Position
74
      'absolute',
75
      'top-0 left-0',
76
      'z-10',
77

78
      // Spacing
79
      'p-0',
80
      'm-0',
81

82
      // Shape
83
      'opacity-0',
84
      'rounded',
85
      'outline-none',
86
      'border border-surface-300 dark:border-surface-700',
87

88
      // Misc
89
      'appearance-none',
90
      'cursor-pointer',
91
    ],
92
  },
93
  icon: ({ context, state }) => ({
94
    class: [
95
      // Size
96
      'w-[0.875rem]',
97
      'h-[0.875rem]',
98

99
      // Colors
100
      {
101
        'text-white dark:text-surface-950': context.checked,
102
        'text-primary': state.d_indeterminate,
103
      },
104

105
      // Transitions
106
      'transition-all',
107
      'duration-200',
108
    ],
109
  }),
110
};
111