sposchedule

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

6
      // Alignment
7
      'flex items-center justify-center',
8
      'py-2 px-4',
9
      'rounded-md border',
10

11
      // Color
12
      'bg-surface-100 dark:bg-surface-950',
13
      {
14
        'text-surface-600 dark:text-white/60 before:bg-transparent':
15
          !context.active,
16
        'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800':
17
          context.active,
18
      },
19

20
      // States
21
      {
22
        'hover:text-surface-800 dark:hover:text-white/80':
23
          !props.disabled && !props.modelValue,
24
        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400':
25
          !props.disabled,
26
      },
27

28
      // Invalid State
29
      {
30
        'border-red-500 dark:border-red-400': props.invalid,
31
        'border-surface-100 dark:border-surface-950': !props.invalid,
32
      },
33

34
      // Before
35
      'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
36

37
      // Transitions
38
      'transition-all duration-200',
39

40
      // Misc
41
      {
42
        'cursor-pointer': !props.disabled,
43
        'opacity-60 select-none pointer-events-none cursor-default':
44
          props.disabled,
45
      },
46
    ],
47
  }),
48
  content: 'relative items-center inline-flex justify-center gap-2',
49
  label: 'font-medium leading-[normal] text-center w-full z-10 relative',
50
  icon: 'relative z-10 mr-2',
51
};
52