@sigx/zero-daisyui 0.13.0 → 0.15.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 (54) hide show
  1. package/dist/audit.json +60 -0
  2. package/dist/css/components/combobox.css +5 -0
  3. package/dist/css/components/container.css +1 -0
  4. package/dist/css/components/input.css +9 -0
  5. package/dist/css/components/nav-list.css +7 -0
  6. package/dist/css/components/spinner.css +5 -5
  7. package/dist/css/index.css +27 -5
  8. package/dist/lynx/components/alert.css +49 -7
  9. package/dist/lynx/components/avatar-group.css +13 -1
  10. package/dist/lynx/components/avatar.css +56 -1
  11. package/dist/lynx/components/badge.css +209 -6
  12. package/dist/lynx/components/breadcrumbs.css +30 -21
  13. package/dist/lynx/components/button.css +2 -7
  14. package/dist/lynx/components/card.css +12 -2
  15. package/dist/lynx/components/carousel.css +4 -4
  16. package/dist/lynx/components/chat-log.css +5 -5
  17. package/dist/lynx/components/chat.css +1 -1
  18. package/dist/lynx/components/combobox.css +5 -0
  19. package/dist/lynx/components/container.css +3 -2
  20. package/dist/lynx/components/diff.css +1 -1
  21. package/dist/lynx/components/divider.css +53 -8
  22. package/dist/lynx/components/drawer.css +8 -8
  23. package/dist/lynx/components/empty-state.css +7 -1
  24. package/dist/lynx/components/fieldset.css +1 -1
  25. package/dist/lynx/components/grid.css +2 -2
  26. package/dist/lynx/components/kbd.css +16 -3
  27. package/dist/lynx/components/menu.css +20 -1
  28. package/dist/lynx/components/nav-list.css +15 -2
  29. package/dist/lynx/components/navbar.css +9 -5
  30. package/dist/lynx/components/pagination.css +97 -65
  31. package/dist/lynx/components/radial-progress.css +10 -10
  32. package/dist/lynx/components/select.css +1 -2
  33. package/dist/lynx/components/skeleton.css +1 -1
  34. package/dist/lynx/components/spinner.css +22 -12
  35. package/dist/lynx/components/stack.css +2 -2
  36. package/dist/lynx/components/stats.css +39 -3
  37. package/dist/lynx/components/status.css +197 -11
  38. package/dist/lynx/components/steps.css +114 -22
  39. package/dist/lynx/components/table.css +1 -1
  40. package/dist/lynx/components/tabs.css +1 -1
  41. package/dist/lynx/components/textarea.css +1 -1
  42. package/dist/lynx/components/timeline.css +12 -25
  43. package/dist/lynx/components/toast.css +331 -12
  44. package/dist/lynx/components/tree-view.css +31 -4
  45. package/dist/lynx/index.css +1382 -262
  46. package/dist/lynx/manifest.json +3 -3
  47. package/dist/manifest.json +1 -1
  48. package/dist/recipes.d.ts +6 -1
  49. package/dist/recipes.d.ts.map +1 -1
  50. package/dist/recipes.js +934 -25
  51. package/dist/recipes.js.map +1 -1
  52. package/dist/report.json +565 -89
  53. package/package.json +4 -4
  54. package/src/recipes.ts +939 -25
@@ -108,7 +108,7 @@
108
108
  .zx-select__clear-trigger {
109
109
  appearance: none;
110
110
  position: absolute;
111
- min-inline-size: 24px;
111
+ min-width: 24px;
112
112
  display: flex;
113
113
  align-items: center;
114
114
  justify-content: center;
@@ -125,7 +125,6 @@
125
125
  right: calc(var(--border) + var(--size-field) * 4 + var(--text-sm) + var(--space-xs));
126
126
  width: 24px;
127
127
  height: 24px;
128
- min-width: 24px;
129
128
  box-sizing: border-box;
130
129
  }
131
130
 
@@ -190,5 +190,5 @@
190
190
  border-radius: var(--radius-box);
191
191
  }
192
192
  @keyframes zero-daisyui-skeleton {
193
- from, to { opacity: 1; } 50% { opacity: 0.55; }
193
+ 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; }
194
194
  }
@@ -4,34 +4,44 @@
4
4
  }
5
5
 
6
6
  .zx-spinner__root {
7
- display: inline-block;
8
- inline-size: calc(var(--size-field) * 0.5);
9
- block-size: calc(var(--size-field) * 0.5);
7
+ display: flex;
8
+ width: calc(var(--size-selector) * 6);
9
+ height: calc(var(--size-selector) * 6);
10
10
  box-sizing: border-box;
11
11
  border-radius: 50%;
12
- border: calc(var(--border) * 2) solid var(--spinner-track);
12
+ border: 0 solid transparent;
13
13
  border-block-start-color: var(--spinner-ink);
14
14
  animation: zero-daisyui-spin 0.7s linear infinite;
15
+ flex-shrink: 0;
16
+ border-style: solid;
17
+ border-top-width: calc(var(--border) * 2);
18
+ border-right-width: calc(var(--border) * 2);
19
+ border-bottom-width: calc(var(--border) * 2);
20
+ border-left-width: calc(var(--border) * 2);
21
+ border-right-color: var(--spinner-track);
22
+ border-bottom-color: var(--spinner-track);
23
+ border-left-color: var(--spinner-track);
24
+ border-top-color: var(--spinner-ink);
15
25
  }
16
26
 
17
27
  .zx-spinner__root.zx-a-size-xs {
18
- inline-size: calc(var(--size-field) * 0.35);
19
- block-size: calc(var(--size-field) * 0.35);
28
+ width: calc(var(--size-selector) * 4);
29
+ height: calc(var(--size-selector) * 4);
20
30
  }
21
31
 
22
32
  .zx-spinner__root.zx-a-size-sm {
23
- inline-size: calc(var(--size-field) * 0.42);
24
- block-size: calc(var(--size-field) * 0.42);
33
+ width: calc(var(--size-selector) * 5);
34
+ height: calc(var(--size-selector) * 5);
25
35
  }
26
36
 
27
37
  .zx-spinner__root.zx-a-size-lg {
28
- inline-size: calc(var(--size-field) * 0.7);
29
- block-size: calc(var(--size-field) * 0.7);
38
+ width: calc(var(--size-selector) * 7);
39
+ height: calc(var(--size-selector) * 7);
30
40
  }
31
41
 
32
42
  .zx-spinner__root.zx-a-size-xl {
33
- inline-size: calc(var(--size-field) * 0.9);
34
- block-size: calc(var(--size-field) * 0.9);
43
+ width: calc(var(--size-selector) * 8);
44
+ height: calc(var(--size-selector) * 8);
35
45
  }
36
46
 
37
47
  .zx-spinner__root.zx-a-color-primary {
@@ -12,7 +12,7 @@
12
12
 
13
13
  .zx-stack__root {
14
14
  display: flex;
15
- min-inline-size: 0;
15
+ min-width: 0;
16
16
  column-gap: var(--l-gap-x);
17
17
  row-gap: var(--l-gap-y);
18
18
  align-items: var(--l-align);
@@ -31,5 +31,5 @@
31
31
  .zx-stack__item {
32
32
  --l-grow: 0;
33
33
  flex-grow: var(--l-grow);
34
- min-inline-size: 0;
34
+ min-width: 0;
35
35
  }
@@ -8,6 +8,7 @@
8
8
  border: var(--border) solid var(--color-base-200);
9
9
  border-radius: var(--radius-box);
10
10
  background: var(--color-base-100);
11
+ flex-direction: row;
11
12
  }
12
13
 
13
14
  .zx-stats__root.zx-o-vertical {
@@ -15,12 +16,31 @@
15
16
  }
16
17
 
17
18
  .zx-stats__item {
18
- display: grid;
19
+ display: flex;
19
20
  grid-template-columns: 1fr auto;
20
21
  column-gap: var(--space-md);
21
22
  align-content: center;
22
23
  flex: 1 1 0%;
23
- padding: var(--space-lg) var(--space-xl);
24
+ padding: 0;
25
+ flex-direction: column;
26
+ justify-content: center;
27
+ position: relative;
28
+ padding-top: var(--space-lg);
29
+ padding-bottom: var(--space-lg);
30
+ padding-left: var(--space-xl);
31
+ padding-right: var(--space-xl);
32
+ }
33
+
34
+ .zx-stats__item.zx-o-horizontal {
35
+ border-left-width: var(--border);
36
+ border-left-style: solid;
37
+ border-left-color: var(--color-base-200);
38
+ }
39
+
40
+ .zx-stats__item.zx-o-vertical {
41
+ border-top-width: var(--border);
42
+ border-top-style: solid;
43
+ border-top-color: var(--color-base-200);
24
44
  }
25
45
 
26
46
  .zx-stats__title {
@@ -85,7 +105,14 @@
85
105
  .zx-stats__figure {
86
106
  grid-column: 2;
87
107
  grid-row: 1 / span 3;
88
- align-self: center;
108
+ align-self: auto;
109
+ position: absolute;
110
+ top: 0;
111
+ bottom: 0;
112
+ right: var(--space-xl);
113
+ display: flex;
114
+ flex-direction: column;
115
+ justify-content: center;
89
116
  }
90
117
 
91
118
  .zx-root .zx-stats__item.zx-a-color-primary {
@@ -263,3 +290,12 @@
263
290
  .zx-stats__value.zx-a-size-xl {
264
291
  font-size: var(--text-3xl);
265
292
  }
293
+ .zx-stats__item.zx-m-first.zx-o-horizontal {
294
+ border-left-width: calc(var(--border) * 0);
295
+ }
296
+ .zx-stats__item.zx-m-first.zx-o-vertical {
297
+ border-top-width: calc(var(--border) * 0);
298
+ }
299
+ .zx-stats__item.zx-m-figure {
300
+ padding-right: calc(var(--space-xl) + var(--space-md) + 32px);
301
+ }
@@ -2,69 +2,255 @@
2
2
  --status-ink: var(--color-base-content);
3
3
  }
4
4
 
5
+ .zx-root .zx-status__root {
6
+ --status-halo: #18181b40;
7
+ }
8
+
9
+ .zx-root.zx-theme-dark .zx-status__root {
10
+ --status-halo: #ecf9ff40;
11
+ }
12
+
13
+ .zx-root.zx-theme-dim .zx-status__root {
14
+ --status-halo: #b2ccd640;
15
+ }
16
+
17
+ .zx-root.zx-theme-nord .zx-status__root {
18
+ --status-halo: #2e344040;
19
+ }
20
+
21
+ .zx-root.zx-theme-sunset .zx-status__root {
22
+ --status-halo: #9fb9d040;
23
+ }
24
+
5
25
  .zx-status__root {
6
- display: inline-block;
7
- inline-size: calc(var(--size-selector) * 2.5);
8
- block-size: calc(var(--size-selector) * 2.5);
26
+ display: flex;
27
+ width: calc(var(--size-selector) * 2.5);
28
+ height: calc(var(--size-selector) * 2.5);
9
29
  box-sizing: border-box;
10
30
  vertical-align: middle;
11
31
  background: var(--status-ink);
12
32
  border: calc((var(--size-selector) * 2.5) / 2) solid var(--status-ink);
13
33
  border-radius: 9999px;
34
+ box-shadow: 0 0 0 calc((var(--size-selector) * 2.5) / 4) var(--status-halo);
35
+ flex-shrink: 0;
14
36
  }
15
37
 
16
38
  .zx-status__root.zx-a-size-xs {
17
- inline-size: calc(var(--size-selector) * 1.5);
18
- block-size: calc(var(--size-selector) * 1.5);
39
+ width: calc(var(--size-selector) * 1.5);
40
+ height: calc(var(--size-selector) * 1.5);
19
41
  border: calc((var(--size-selector) * 1.5) / 2) solid var(--status-ink);
42
+ box-shadow: 0 0 0 calc((var(--size-selector) * 1.5) / 4) var(--status-halo);
20
43
  }
21
44
 
22
45
  .zx-status__root.zx-a-size-sm {
23
- inline-size: calc(var(--size-selector) * 2);
24
- block-size: calc(var(--size-selector) * 2);
46
+ width: calc(var(--size-selector) * 2);
47
+ height: calc(var(--size-selector) * 2);
25
48
  border: calc((var(--size-selector) * 2) / 2) solid var(--status-ink);
49
+ box-shadow: 0 0 0 calc((var(--size-selector) * 2) / 4) var(--status-halo);
26
50
  }
27
51
 
28
52
  .zx-status__root.zx-a-size-lg {
29
- inline-size: calc(var(--size-selector) * 3);
30
- block-size: calc(var(--size-selector) * 3);
53
+ width: calc(var(--size-selector) * 3);
54
+ height: calc(var(--size-selector) * 3);
31
55
  border: calc((var(--size-selector) * 3) / 2) solid var(--status-ink);
56
+ box-shadow: 0 0 0 calc((var(--size-selector) * 3) / 4) var(--status-halo);
32
57
  }
33
58
 
34
59
  .zx-status__root.zx-a-size-xl {
35
- inline-size: calc(var(--size-selector) * 3.5);
36
- block-size: calc(var(--size-selector) * 3.5);
60
+ width: calc(var(--size-selector) * 3.5);
61
+ height: calc(var(--size-selector) * 3.5);
37
62
  border: calc((var(--size-selector) * 3.5) / 2) solid var(--status-ink);
63
+ box-shadow: 0 0 0 calc((var(--size-selector) * 3.5) / 4) var(--status-halo);
38
64
  }
39
65
 
40
66
  .zx-status__root.zx-a-color-primary {
41
67
  --status-ink: var(--color-primary);
42
68
  }
43
69
 
70
+ .zx-root .zx-status__root.zx-a-color-primary {
71
+ --status-halo: #422ad540;
72
+ }
73
+
74
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-primary {
75
+ --status-halo: #605dff40;
76
+ }
77
+
78
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-primary {
79
+ --status-halo: #9fe88d40;
80
+ }
81
+
82
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-primary {
83
+ --status-halo: #5e81ac40;
84
+ }
85
+
86
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-primary {
87
+ --status-halo: #ff865b40;
88
+ }
89
+
44
90
  .zx-status__root.zx-a-color-secondary {
45
91
  --status-ink: var(--color-secondary);
46
92
  }
47
93
 
94
+ .zx-root .zx-status__root.zx-a-color-secondary {
95
+ --status-halo: #f4309840;
96
+ }
97
+
98
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-secondary {
99
+ --status-halo: #f4309840;
100
+ }
101
+
102
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-secondary {
103
+ --status-halo: #ff7d5d40;
104
+ }
105
+
106
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-secondary {
107
+ --status-halo: #81a1c140;
108
+ }
109
+
110
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-secondary {
111
+ --status-halo: #fd6f9c40;
112
+ }
113
+
48
114
  .zx-status__root.zx-a-color-accent {
49
115
  --status-ink: var(--color-accent);
50
116
  }
51
117
 
118
+ .zx-root .zx-status__root.zx-a-color-accent {
119
+ --status-halo: #00d3bb40;
120
+ }
121
+
122
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-accent {
123
+ --status-halo: #00d3bb40;
124
+ }
125
+
126
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-accent {
127
+ --status-halo: #c792e940;
128
+ }
129
+
130
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-accent {
131
+ --status-halo: #88c0d040;
132
+ }
133
+
134
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-accent {
135
+ --status-halo: #b387fa40;
136
+ }
137
+
52
138
  .zx-status__root.zx-a-color-neutral {
53
139
  --status-ink: var(--color-neutral);
54
140
  }
55
141
 
142
+ .zx-root .zx-status__root.zx-a-color-neutral {
143
+ --status-halo: #09090b40;
144
+ }
145
+
146
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-neutral {
147
+ --status-halo: #09090b40;
148
+ }
149
+
150
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-neutral {
151
+ --status-halo: #1c212b40;
152
+ }
153
+
154
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-neutral {
155
+ --status-halo: #4c566a40;
156
+ }
157
+
158
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-neutral {
159
+ --status-halo: #1b262c40;
160
+ }
161
+
56
162
  .zx-status__root.zx-a-color-info {
57
163
  --status-ink: var(--color-info);
58
164
  }
59
165
 
166
+ .zx-root .zx-status__root.zx-a-color-info {
167
+ --status-halo: #00bafe40;
168
+ }
169
+
170
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-info {
171
+ --status-halo: #00bafe40;
172
+ }
173
+
174
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-info {
175
+ --status-halo: #28ebff40;
176
+ }
177
+
178
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-info {
179
+ --status-halo: #b48ead40;
180
+ }
181
+
182
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-info {
183
+ --status-halo: #89e0eb40;
184
+ }
185
+
60
186
  .zx-status__root.zx-a-color-success {
61
187
  --status-ink: var(--color-success);
62
188
  }
63
189
 
190
+ .zx-root .zx-status__root.zx-a-color-success {
191
+ --status-halo: #00d39040;
192
+ }
193
+
194
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-success {
195
+ --status-halo: #00d39040;
196
+ }
197
+
198
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-success {
199
+ --status-halo: #62efbd40;
200
+ }
201
+
202
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-success {
203
+ --status-halo: #a3be8d40;
204
+ }
205
+
206
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-success {
207
+ --status-halo: #addfad40;
208
+ }
209
+
64
210
  .zx-status__root.zx-a-color-warning {
65
211
  --status-ink: var(--color-warning);
66
212
  }
67
213
 
214
+ .zx-root .zx-status__root.zx-a-color-warning {
215
+ --status-halo: #fcb70040;
216
+ }
217
+
218
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-warning {
219
+ --status-halo: #fcb70040;
220
+ }
221
+
222
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-warning {
223
+ --status-halo: #efd05740;
224
+ }
225
+
226
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-warning {
227
+ --status-halo: #ebcb8b40;
228
+ }
229
+
230
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-warning {
231
+ --status-halo: #f1c89240;
232
+ }
233
+
68
234
  .zx-status__root.zx-a-color-error {
69
235
  --status-ink: var(--color-error);
70
236
  }
237
+
238
+ .zx-root .zx-status__root.zx-a-color-error {
239
+ --status-halo: #ff627d40;
240
+ }
241
+
242
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-error {
243
+ --status-halo: #ff627d40;
244
+ }
245
+
246
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-error {
247
+ --status-halo: #ffae9b40;
248
+ }
249
+
250
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-error {
251
+ --status-halo: #bf616a40;
252
+ }
253
+
254
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-error {
255
+ --status-halo: #ffbbbd40;
256
+ }