sposchedule

1
export default {
2
  root: {
3
    class: [
4
      // Spacing
5
      'p-[1.125rem] pt-0',
6

7
      // Shape
8
      'rounded-md',
9

10
      // Color
11
      'border border-surface-200 dark:border-surface-700',
12
      'bg-surface-0 dark:bg-surface-900',
13
      'text-surface-700 dark:text-surface-0/80',
14
    ],
15
  },
16
  legend: ({ props }) => ({
17
    class: [
18
      // Font
19
      'font-semibold',
20
      'leading-none',
21

22
      //Spacing
23
      'p-0 mb-[0.375rem]',
24

25
      // Shape
26
      'rounded-md',
27

28
      // Color
29
      'text-surface-700 dark:text-surface-0/80',
30
      'bg-surface-0 dark:bg-surface-900',
31

32
      // Transition
33
      'transition-none',
34

35
      // States
36
      { 'hover:bg-surface-100 dark:hover:bg-surface-800': props.toggleable },
37
    ],
38
  }),
39
  toggleButton: ({ props }) => ({
40
    class: [
41
      // Alignments
42
      'flex items-center justify-center',
43
      'relative',
44

45
      //Spacing
46
      { 'py-2 px-3': props.toggleable },
47

48
      // Shape
49
      { 'rounded-md': props.toggleable },
50

51
      // Color
52
      {
53
        'text-surface-700 dark:text-surface-200 hover:text-surface-900':
54
          props.toggleable,
55
      },
56

57
      // States
58
      {
59
        'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable,
60
      },
61
      {
62
        'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300':
63
          props.toggleable,
64
      },
65

66
      // Misc
67
      {
68
        'transition-none cursor-pointer overflow-hidden select-none':
69
          props.toggleable,
70
      },
71
    ],
72
  }),
73
  toggleIcon: {
74
    class: 'mr-2 inline-block',
75
  },
76
  legendLabel: ({ props }) => ({
77
    class: [
78
      'flex items-center justify-center leading-none',
79
      { 'py-2 px-3': !props.toggleable },
80
    ],
81
  }),
82
  content: {
83
    class: 'p-0',
84
  },
85
  transition: {
86
    enterFromClass: 'max-h-0',
87
    enterActiveClass:
88
      'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
89
    enterToClass: 'max-h-[1000px]',
90
    leaveFromClass: 'max-h-[1000px]',
91
    leaveActiveClass:
92
      'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
93
    leaveToClass: 'max-h-0',
94
  },
95
};
96