sposchedule

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

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

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

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

23
      // Size
24
      'w-5 h-5',
25

26
      // Shape
27
      'border outline-transparent',
28
      'rounded-full',
29

30
      // Transition
31
      'transition duration-200 ease-in-out',
32

33
      // Colors
34
      {
35
        'text-surface-700 dark:text-white/80': context.checked,
36
        'border-surface-300 dark:border-surface-700':
37
          !context.checked && !props.invalid,
38
        'border-primary bg-primary': context.checked && !props.disabled,
39
      },
40
      // Invalid State
41
      { 'border-red-500 dark:border-red-400': props.invalid },
42

43
      // States
44
      {
45
        'peer-hover:border-surface-400 dark:peer-hover:border-surface-400':
46
          !props.disabled && !props.invalid && !context.checked,
47
        'peer-hover:border-primary-emphasis':
48
          !props.disabled && !context.checked,
49
        'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300':
50
          !props.disabled && !context.checked,
51
        'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
52
          !props.disabled,
53
        'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default':
54
          props.disabled,
55
      },
56
    ],
57
  }),
58
  input: {
59
    class: [
60
      'peer',
61

62
      // Size
63
      'w-full ',
64
      'h-full',
65

66
      // Position
67
      'absolute',
68
      'top-0 left-0',
69
      'z-10',
70

71
      // Spacing
72
      'p-0',
73
      'm-0',
74

75
      // Shape
76
      'opacity-0',
77
      'rounded-md',
78
      'outline-none',
79
      'border-1 border-surface-200 dark:border-surface-700',
80

81
      // Misc
82
      'appearance-none',
83
      'cursor-pointer',
84
    ],
85
  },
86
  icon: ({ context }) => ({
87
    class: [
88
      'block',
89

90
      // Shape
91
      'rounded-full',
92

93
      // Size
94
      'w-3 h-3',
95

96
      // Conditions
97
      {
98
        'bg-surface-0 dark:bg-surface-900': context.checked,
99
        'bg-primary': !context.checked,
100
        'backface-hidden invisible scale-[0.1]': !context.checked,
101
        'transform visible translate-z-0 scale-[1,1]': context.checked,
102
      },
103

104
      // Transition
105
      'transition duration-200',
106
    ],
107
  }),
108
};
109