sposchedule

1
export default {
2
  root: {
3
    class: [
4
      // Shape
5
      'rounded-lg',
6
      'shadow-lg',
7
      'border-0',
8

9
      // Positioning
10
      'z-40 transform origin-center',
11
      'mt-3 absolute left-0 top-0',
12

13
      // Color
14
      'bg-surface-0 dark:bg-surface-900',
15
      'text-surface-700 dark:text-surface-0/80',
16

17
      // Before: Arrow
18
      'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
19
      'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900',
20
    ],
21
  },
22
  content: {
23
    class: [
24
      'p-4 items-center flex',
25
      'rounded-t-lg',
26
      'border-x border-t last:border-b border-surface-200 dark:border-surface-700',
27
    ],
28
  },
29
  icon: {
30
    class: 'text-2xl mr-4',
31
  },
32
  footer: {
33
    class: [
34
      // Flexbox and Alignment
35
      'flex items-center justify-end',
36
      'shrink-0',
37
      'text-right',
38
      'gap-2',
39

40
      // Spacing
41
      'px-4',
42
      'pb-4',
43

44
      // Shape
45
      'border-t-0',
46
      'rounded-b-lg',
47

48
      // Colors
49
      'bg-surface-0 dark:bg-surface-900',
50
      'text-surface-700 dark:text-surface-0/80',
51
      'border-x border-b border-surface-200 dark:border-surface-700',
52
    ],
53
  },
54
  transition: {
55
    enterFromClass: 'opacity-0 scale-y-[0.8]',
56
    enterActiveClass:
57
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
58
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
59
    leaveToClass: 'opacity-0',
60
  },
61
};
62