@warmio/ui 1.4.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSES/fluid-functionalism.txt +24 -0
  2. package/README.md +23 -14
  3. package/dist/badge.js +2 -2
  4. package/dist/button.js +4 -1
  5. package/dist/chunks/chunk-A2PN77YE.js +42 -0
  6. package/dist/chunks/chunk-DHV2A22F.js +240 -0
  7. package/dist/chunks/chunk-DOOSH3V6.js +72 -0
  8. package/dist/chunks/chunk-EIEA5RJJ.js +97 -0
  9. package/dist/chunks/chunk-FKGHMPVW.js +875 -0
  10. package/dist/chunks/chunk-K36HD5J5.js +133 -0
  11. package/dist/chunks/chunk-L6L3GVGM.js +130 -0
  12. package/dist/chunks/chunk-MGX6ZL6Q.js +224 -0
  13. package/dist/chunks/chunk-MVUHHKBL.js +492 -0
  14. package/dist/chunks/chunk-PJUNSOJK.js +116 -0
  15. package/dist/chunks/chunk-RVVHR7RY.js +0 -0
  16. package/dist/chunks/chunk-U7D32UN3.js +0 -0
  17. package/dist/chunks/chunk-W24JGQWM.js +65 -0
  18. package/dist/dropdown-menu.js +4 -3
  19. package/dist/entries/badge.css +178 -0
  20. package/dist/entries/button.css +422 -0
  21. package/dist/entries/dropdown-menu.css +167 -0
  22. package/dist/entries/index.css +2789 -0
  23. package/dist/entries/logo.css +147 -0
  24. package/dist/entries/product-header.css +88 -0
  25. package/dist/entries/sheet.css +666 -0
  26. package/dist/entries/sidebar.css +2108 -0
  27. package/dist/entries/text.css +97 -0
  28. package/dist/index.js +17 -13
  29. package/dist/logo.js +2 -2
  30. package/dist/product-header.js +2 -2
  31. package/dist/product-header.types.d.ts +3 -2
  32. package/dist/sheet.js +5 -3
  33. package/dist/sidebar.css +129 -0
  34. package/dist/sidebar.js +7 -3
  35. package/dist/text.css +121 -0
  36. package/dist/text.js +2 -2
  37. package/package.json +15 -5
  38. package/types/badge.d.ts +10 -2
  39. package/types/button.d.ts +65 -9
  40. package/types/sidebar.d.ts +10 -2
  41. package/types/text.d.ts +10 -2
  42. package/dist/chunks/chunk-4RQCHKAW.js +0 -105
  43. package/dist/chunks/chunk-FW2EHGRK.js +0 -748
  44. package/dist/chunks/chunk-GKEYV2XW.js +0 -10
  45. package/dist/chunks/chunk-HDCV4ACN.js +0 -469
  46. package/dist/chunks/chunk-ICC7GQXS.js +0 -74
  47. package/dist/chunks/chunk-KN6WVLCR.js +0 -261
  48. package/dist/chunks/chunk-MIMC4M6W.js +0 -86
  49. package/dist/chunks/chunk-PBWF6BDE.js +0 -88
  50. package/dist/chunks/chunk-VIB7OX7D.js +0 -10
  51. package/dist/chunks/chunk-YTDMREDR.js +0 -201
package/dist/entries/dropdown-menu.css ADDED
@@ -0,0 +1,167 @@
1
+ /* ../ui/src/warmio/fluid-menu-highlight/fluid-menu-highlight.css */
2
+ [data-slot=fluid-menu-highlight] {
3
+ position: absolute;
4
+ top: 0;
5
+ left: 0;
6
+ z-index: -1;
7
+ list-style: none;
8
+ pointer-events: none;
9
+ border-radius: var(--radius-lg);
10
+ background-color: var(--sidebar-accent);
11
+ }
12
+ [data-slot=fluid-menu-highlight][data-kind=sidebar][data-selected=true] {
13
+ border-radius: var(--radius-full);
14
+ }
15
+ [data-slot=fluid-menu-highlight][data-kind=select]:not([data-destructive=true]) {
16
+ background-color: var(--accent);
17
+ }
18
+ [data-slot=fluid-menu-highlight][data-destructive=true] {
19
+ background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
20
+ }
21
+ .dark [data-slot=fluid-menu-highlight][data-destructive=true] {
22
+ background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
23
+ }
24
+
25
+ /* ../ui/src/warmio/dropdown-menu/dropdown-menu.css */
26
+ [data-slot=dropdown-menu-positioner] {
27
+ isolation: isolate;
28
+ z-index: var(--z-popover);
29
+ outline-style: none;
30
+ }
31
+ [data-slot=dropdown-menu-content] {
32
+ position: relative;
33
+ isolation: isolate;
34
+ z-index: var(--z-popover);
35
+ max-height: var(--available-height);
36
+ transform-origin: var(--transform-origin);
37
+ overflow-x: hidden;
38
+ overflow-y: auto;
39
+ border-radius: var(--radius-lg);
40
+ background-color: var(--popover);
41
+ padding: calc(var(--spacing) * 2);
42
+ color: var(--foreground);
43
+ outline-style: none;
44
+ box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
45
+ }
46
+ [data-slot=dropdown-menu-content][data-closed] {
47
+ overflow: hidden;
48
+ }
49
+ [data-slot=dropdown-menu-content][data-size=default] {
50
+ width: var(--anchor-width);
51
+ min-width: calc(var(--spacing) * 32);
52
+ }
53
+ [data-slot=dropdown-menu-content][data-size=auto] {
54
+ width: auto;
55
+ min-width: calc(var(--spacing) * 56);
56
+ }
57
+ [data-slot=dropdown-menu-content][data-size=sidebar] {
58
+ width: var(--sidebar-width);
59
+ }
60
+ [data-slot=dropdown-menu-content][data-spacing=roomy] {
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: calc(var(--spacing) * 2);
64
+ }
65
+ [data-slot=dropdown-menu-content] [data-fluid-menu-item]:is(:focus, [data-highlighted], [data-popup-open], [data-open], [aria-checked=true]) {
66
+ background-color: transparent !important;
67
+ }
68
+ [data-slot=dropdown-menu-item],
69
+ [data-slot=dropdown-menu-checkbox-item],
70
+ [data-slot=dropdown-menu-radio-item] {
71
+ position: relative;
72
+ display: flex;
73
+ align-items: center;
74
+ gap: calc(var(--spacing) * 2);
75
+ border-radius: var(--radius-lg);
76
+ cursor: default;
77
+ outline-style: none;
78
+ -webkit-user-select: none;
79
+ user-select: none;
80
+ }
81
+ [data-slot=dropdown-menu-item] {
82
+ width: 100%;
83
+ padding: calc(var(--spacing) * 2);
84
+ }
85
+ [data-slot=dropdown-menu-checkbox-item],
86
+ [data-slot=dropdown-menu-radio-item] {
87
+ padding-block: calc(var(--spacing) * 2);
88
+ padding-right: calc(var(--spacing) * 4);
89
+ padding-left: calc(var(--spacing) * 2);
90
+ }
91
+ [data-slot=dropdown-menu-item][data-inset],
92
+ [data-slot=dropdown-menu-checkbox-item][data-inset],
93
+ [data-slot=dropdown-menu-radio-item][data-inset],
94
+ [data-slot=dropdown-menu-label][data-inset] {
95
+ padding-left: calc(var(--spacing) * 4);
96
+ }
97
+ @media (forced-colors: active) {
98
+ [data-slot=dropdown-menu-item],
99
+ [data-slot=dropdown-menu-checkbox-item],
100
+ [data-slot=dropdown-menu-radio-item] {
101
+ outline: 2px solid transparent;
102
+ outline-offset: 2px;
103
+ }
104
+ }
105
+ [data-slot=dropdown-menu-item]:not([data-variant=destructive]):focus,
106
+ [data-slot=dropdown-menu-checkbox-item]:focus,
107
+ [data-slot=dropdown-menu-radio-item]:focus {
108
+ background-color: var(--sidebar-accent);
109
+ color: var(--foreground);
110
+ }
111
+ [data-slot=dropdown-menu-item]:not([data-variant=destructive]):focus *,
112
+ [data-slot=dropdown-menu-checkbox-item]:focus *,
113
+ [data-slot=dropdown-menu-radio-item]:focus * {
114
+ color: var(--foreground);
115
+ }
116
+ [data-slot=dropdown-menu-item][data-variant=destructive] {
117
+ color: var(--destructive);
118
+ }
119
+ [data-slot=dropdown-menu-item][data-variant=destructive] > svg {
120
+ color: var(--destructive);
121
+ }
122
+ [data-slot=dropdown-menu-item][data-variant=destructive]:focus {
123
+ background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
124
+ color: var(--destructive);
125
+ }
126
+ [data-slot=dropdown-menu-item][data-variant=destructive]:is(.dark *):focus {
127
+ background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
128
+ }
129
+ [data-slot=dropdown-menu-item]:where([data-disabled=true]),
130
+ [data-slot=dropdown-menu-item]:where([data-disabled]:not([data-disabled=false])),
131
+ [data-slot=dropdown-menu-checkbox-item]:where([data-disabled=true]),
132
+ [data-slot=dropdown-menu-checkbox-item]:where([data-disabled]:not([data-disabled=false])),
133
+ [data-slot=dropdown-menu-radio-item]:where([data-disabled=true]),
134
+ [data-slot=dropdown-menu-radio-item]:where([data-disabled]:not([data-disabled=false])) {
135
+ pointer-events: none;
136
+ opacity: 50%;
137
+ }
138
+ [data-slot=dropdown-menu-item] svg,
139
+ [data-slot=dropdown-menu-checkbox-item] svg,
140
+ [data-slot=dropdown-menu-radio-item] svg {
141
+ pointer-events: none;
142
+ flex-shrink: 0;
143
+ }
144
+ [data-slot=dropdown-menu-item] svg:not([class*=size-]),
145
+ [data-slot=dropdown-menu-checkbox-item] svg:not([class*=size-]),
146
+ [data-slot=dropdown-menu-radio-item] svg:not([class*=size-]) {
147
+ width: calc(var(--spacing) * 4);
148
+ height: calc(var(--spacing) * 4);
149
+ }
150
+ [data-slot=dropdown-menu-checkbox-item-indicator],
151
+ [data-slot=dropdown-menu-radio-item-indicator] {
152
+ position: absolute;
153
+ right: calc(var(--spacing) * 2);
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: center;
157
+ pointer-events: none;
158
+ }
159
+ [data-slot=dropdown-menu-label] {
160
+ padding: calc(var(--spacing) * 2);
161
+ }
162
+ [data-slot=dropdown-menu-separator] {
163
+ margin-block: 0;
164
+ margin-inline: 0;
165
+ height: 1px;
166
+ background-color: var(--border);
167
+ }