singlestage 0.4.1

A UI component library for Leptos based on Basecoat UI and shadcn/ui
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

@layer components {
  /* Hacks to render properly until anchor support
      https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility
    */
  /* Webkit -- HAS TO BE FIRST */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .singlestage-dropdown-menu {
      @apply relative
      bg-transparent;
      position-area: bottom span-right;
      inset: unset;
    }
  }

  /* Firefox */
  @-moz-document url-prefix() {
    .singlestage-dropdown-menu {
      @apply relative
      bg-transparent;
      inset: unset;
    }
  }
  /* End hacks */

  .singlestage-dropdown-menu {
    @apply bg-popover
    border
    min-w-[8rem]
    overflow-x-hidden
    overflow-y-auto
    p-1
    rounded-md
    shadow-md
    text-nowrap
    text-popover-foreground
    z-50;

    .singlestage-radio-group {
      @appply block
      gap-0;
    }
  }

  .singlestage-dropdown-menu-item {
    > button {
      @apply [&_svg:not([class*='size-'])]:size-4
      [&_svg:not([class*='text-'])]:text-muted-foreground
      [&_svg]:pointer-events-none
      [&_svg]:shrink-0
      content-center
      cursor-default
      data-[disabled]:opacity-50
      data-[disabled]:pointer-events-none
      data-[inset]:pl-8
      data-[variant=destructive]:*:[svg]:!text-destructive
      data-[variant=destructive]:focus:bg-destructive/10
      data-[variant=destructive]:focus:text-destructive
      data-[variant=destructive]:text-destructive
      focus:bg-accent
      focus:text-accent-foreground
      flex
      gap-2
      h-full
      hover:bg-accent
      hover:text-accent-foreground
      items-center
      outline-hidden
      px-2
      py-1.5
      relative
      rounded-sm
      select-none
      text-sm
      w-full;
    }

    > .singlestage-label {
      @apply h-full
      w-full;
    }
  }

  .singlestage-dropdown-menu-label {
    @apply data-[inset]:pl-8
    font-medium
    px-2
    py-1.5
    text-sm;
  }

  .singlestage-dropdown-menu-separator {
    @apply -mx-1
    bg-border
    h-px
    my-1;
  }

  .singlestage-dropdown-menu-shortcut {
    @apply ml-auto
    text-muted-foreground
    text-xs
    tracking-widest;
  }

  .singlestage-dropdown-menu-sub-trigger {
    @apply cursor-default
    flex
    focus:bg-accent
    focus:text-accent-foreground
    items-center
    outline-hidden
    px-2
    py-1.5
    rounded-sm
    select-none
    text-sm;
  }

  .singlestage-dropdown-menu-sub-content {
    @apply bg-popover
    border
    min-w-[8rem]
    overflow-hidden
    p-1
    rounded-md
    shadow-lg
    text-popover-foreground
    z-50;
  }
}