sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      'relative',
5

6
      // Flex
7
      {
8
        flex: props.fluid,
9
        'inline-flex': !props.fluid,
10
      },
11

12
      // Size
13
      { 'w-full': props.multiple },
14

15
      // Color
16
      'text-surface-900 dark:text-surface-0',
17

18
      //States
19
      {
20
        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
21
          props.disabled,
22
      },
23
    ],
24
  }),
25
  inputMultiple: ({ props, state }) => ({
26
    class: [
27
      // Font
28
      'leading-none',
29

30
      // Flex
31
      'flex items-center flex-wrap',
32
      'gap-2',
33

34
      // Spacing
35
      'm-0 list-none',
36
      'py-1 px-1',
37

38
      // Size
39
      'w-full',
40

41
      // Shape
42
      'appearance-none rounded-md',
43

44
      // Color
45
      'text-surface-700 dark:text-white/80',
46
      'placeholder:text-surface-400 dark:placeholder:text-surface-500',
47
      { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
48
      'border',
49
      { 'border-surface-300 dark:border-surface-700': !props.invalid },
50

51
      // Invalid State
52
      'invalid:focus:ring-red-200',
53
      'invalid:hover:border-red-500',
54
      { 'border-red-500 dark:border-red-400': props.invalid },
55

56
      // States
57
      {
58
        'hover:border-surface-400 dark:hover:border-surface-700':
59
          !props.invalid,
60
      },
61
      {
62
        'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400':
63
          state.focused,
64
      },
65

66
      // Transition
67
      'transition duration-200 ease-in-out',
68

69
      // Misc
70
      'cursor-text overflow-hidden',
71
    ],
72
  }),
73
  inputToken: {
74
    class: ['py-1 px-0 ml-2', 'inline-flex flex-auto'],
75
  },
76
  inputChip: {
77
    class: 'flex-auto inline-flex pt-1 pb-1',
78
  },
79
  input: {
80
    class:
81
      'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full',
82
  },
83
  dropdown: {
84
    class: [
85
      'relative',
86

87
      // Alignments
88
      'items-center inline-flex justify-center text-center align-bottom',
89

90
      // Shape
91
      'rounded-r-md',
92

93
      // Size
94
      'py-2 leading-none',
95
      'w-10',
96

97
      // Colors
98
      'text-primary-contrast',
99
      'bg-primary',
100
      'border border-primary',
101

102
      // States
103
      'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
104
      'hover:bg-primary-emphasis hover:border-primary-emphasis',
105
      'focus:ring-primary-500 dark:focus:ring-primary-400',
106
    ],
107
  },
108
  loader: {
109
    class: [
110
      'text-surface-500 dark:text-surface-0/70',
111
      'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin',
112
    ],
113
  },
114
  overlay: {
115
    class: [
116
      // Colors
117
      'bg-surface-0 dark:bg-surface-900',
118
      'text-surface-700 dark:text-white/80',
119

120
      // Shape
121
      'border border-surface-300 dark:border-surface-700',
122
      'rounded-md',
123
      'shadow-md',
124

125
      // Size
126
      'overflow-auto',
127
    ],
128
  },
129
  list: {
130
    class: 'p-1 list-none m-0',
131
  },
132
  option: ({ context }) => ({
133
    class: [
134
      'relative',
135

136
      // Font
137
      'leading-none',
138

139
      // Spacing
140
      'm-0 px-3 py-2',
141
      'first:mt-0 mt-[2px]',
142

143
      // Shape
144
      'border-0 rounded',
145

146
      // Colors
147
      {
148
        'text-surface-700 dark:text-white/80':
149
          !context.focused && !context.selected,
150
        'bg-surface-200 dark:bg-surface-600/60':
151
          context.focused && !context.selected,
152
        'text-surface-700 dark:text-white/80':
153
          context.focused && !context.selected,
154
        'bg-highlight': context.selected,
155
      },
156

157
      //States
158
      {
159
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
160
          !context.focused && !context.selected,
161
      },
162
      { 'hover:bg-highlight-emphasis': context.selected },
163
      {
164
        'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]':
165
          context.focused && !context.selected,
166
      },
167

168
      // Transition
169
      'transition-shadow duration-200',
170

171
      // Misc
172
      'cursor-pointer overflow-hidden whitespace-nowrap',
173
    ],
174
  }),
175
  optionGroup: {
176
    class: [
177
      'font-semibold',
178

179
      // Spacing
180
      'm-0 py-2 px-3',
181

182
      // Colors
183
      'text-surface-400 dark:text-surface-500',
184

185
      // Misc
186
      'cursor-auto',
187
    ],
188
  },
189
  emptyMessage: {
190
    class: [
191
      // Font
192
      'leading-none',
193

194
      // Spacing
195
      'py-2 px-3',
196

197
      // Color
198
      'text-surface-800 dark:text-white/80',
199
      'bg-transparent',
200
    ],
201
  },
202
  transition: {
203
    enterFromClass: 'opacity-0 scale-y-[0.8]',
204
    enterActiveClass:
205
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
206
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
207
    leaveToClass: 'opacity-0',
208
  },
209
};
210