@sigx/zero-daisyui 0.2.0-beta.2 → 0.2.0-beta.4

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 (61) hide show
  1. package/README.md +8 -0
  2. package/dist/components.d.ts +3 -2
  3. package/dist/css/components/button.css +6 -0
  4. package/dist/css/components/progress.css +8 -0
  5. package/dist/css/components/select.css +12 -0
  6. package/dist/css/components/slider.css +10 -0
  7. package/dist/css/components/tabs.css +191 -19
  8. package/dist/css/index.css +227 -19
  9. package/dist/lynx/components/alert.css +1 -1
  10. package/dist/lynx/components/avatar.css +22 -7
  11. package/dist/lynx/components/badge.css +1 -1
  12. package/dist/lynx/components/button.css +6 -1
  13. package/dist/lynx/components/checkbox.css +23 -9
  14. package/dist/lynx/components/combobox.css +2 -2
  15. package/dist/lynx/components/countdown.css +1 -1
  16. package/dist/lynx/components/dialog.css +3 -3
  17. package/dist/lynx/components/divider.css +18 -19
  18. package/dist/lynx/components/drawer.css +2 -2
  19. package/dist/lynx/components/file-upload.css +18 -7
  20. package/dist/lynx/components/indicator.css +1 -1
  21. package/dist/lynx/components/input.css +2 -2
  22. package/dist/lynx/components/join.css +1 -1
  23. package/dist/lynx/components/kbd.css +1 -1
  24. package/dist/lynx/components/menu.css +1 -1
  25. package/dist/lynx/components/native-select.css +1 -1
  26. package/dist/lynx/components/number-input.css +2 -2
  27. package/dist/lynx/components/pagination.css +92 -23
  28. package/dist/lynx/components/popover.css +2 -2
  29. package/dist/lynx/components/progress.css +17 -25
  30. package/dist/lynx/components/radial-progress.css +22 -24
  31. package/dist/lynx/components/radio-group.css +23 -9
  32. package/dist/lynx/components/rating-group.css +19 -23
  33. package/dist/lynx/components/select.css +2 -2
  34. package/dist/lynx/components/slider.css +3 -0
  35. package/dist/lynx/components/spinner.css +22 -19
  36. package/dist/lynx/components/status.css +27 -20
  37. package/dist/lynx/components/steps.css +67 -18
  38. package/dist/lynx/components/switch.css +79 -37
  39. package/dist/lynx/components/table.css +51 -8
  40. package/dist/lynx/components/tabs.css +222 -21
  41. package/dist/lynx/components/textarea.css +1 -1
  42. package/dist/lynx/components/timeline.css +27 -20
  43. package/dist/lynx/components/toggle-group.css +2 -2
  44. package/dist/lynx/components/toggle.css +1 -1
  45. package/dist/lynx/components/tooltip.css +1 -1
  46. package/dist/lynx/index.css +786 -318
  47. package/dist/lynx/manifest.json +63 -13
  48. package/dist/manifest.json +61 -11
  49. package/dist/recipes.d.ts +28 -0
  50. package/dist/recipes.d.ts.map +1 -1
  51. package/dist/recipes.js +490 -75
  52. package/dist/recipes.js.map +1 -1
  53. package/dist/register.d.ts +2 -3
  54. package/dist/report.json +424 -33
  55. package/dist/tokens.d.ts +17 -5
  56. package/dist/tokens.d.ts.map +1 -1
  57. package/dist/tokens.js +22 -8
  58. package/dist/tokens.js.map +1 -1
  59. package/package.json +6 -6
  60. package/src/recipes.ts +493 -76
  61. package/src/tokens.ts +24 -8
@@ -1,6 +1,5 @@
1
1
  .zx-divider__root {
2
2
  --divider-ink: var(--color-base-300);
3
- --divider-thickness: var(--border);
4
3
  }
5
4
 
6
5
  .zx-divider__root {
@@ -11,14 +10,30 @@
11
10
 
12
11
  .zx-divider__root.zx-o-horizontal {
13
12
  inline-size: 100%;
14
- block-size: var(--divider-thickness);
13
+ block-size: var(--border);
14
+ }
15
+
16
+ .zx-divider__root.zx-o-horizontal.zx-a-size-lg {
17
+ block-size: calc(var(--border) * 2);
18
+ }
19
+
20
+ .zx-divider__root.zx-o-horizontal.zx-a-size-xl {
21
+ block-size: calc(var(--border) * 3);
15
22
  }
16
23
 
17
24
  .zx-divider__root.zx-o-vertical {
18
- inline-size: var(--divider-thickness);
25
+ inline-size: var(--border);
19
26
  min-block-size: 1em;
20
27
  }
21
28
 
29
+ .zx-divider__root.zx-o-vertical.zx-a-size-lg {
30
+ inline-size: calc(var(--border) * 2);
31
+ }
32
+
33
+ .zx-divider__root.zx-o-vertical.zx-a-size-xl {
34
+ inline-size: calc(var(--border) * 3);
35
+ }
36
+
22
37
  .zx-divider__root.zx-a-color-primary {
23
38
  --divider-ink: var(--color-primary);
24
39
  }
@@ -50,19 +65,3 @@
50
65
  .zx-divider__root.zx-a-color-error {
51
66
  --divider-ink: var(--color-error);
52
67
  }
53
-
54
- .zx-divider__root.zx-a-size-xs {
55
- --divider-thickness: var(--border);
56
- }
57
-
58
- .zx-divider__root.zx-a-size-sm {
59
- --divider-thickness: var(--border);
60
- }
61
-
62
- .zx-divider__root.zx-a-size-lg {
63
- --divider-thickness: calc(var(--border) * 2);
64
- }
65
-
66
- .zx-divider__root.zx-a-size-xl {
67
- --divider-thickness: calc(var(--border) * 3);
68
- }
@@ -1,6 +1,6 @@
1
1
  .zx-drawer__trigger {
2
2
  appearance: none;
3
- display: inline-flex;
3
+ display: flex;
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  gap: 0.5em;
@@ -56,7 +56,7 @@
56
56
 
57
57
  .zx-drawer__close {
58
58
  appearance: none;
59
- display: inline-flex;
59
+ display: flex;
60
60
  align-items: center;
61
61
  justify-content: center;
62
62
  gap: 0.5em;
@@ -1,6 +1,5 @@
1
1
  .zx-file-upload__root {
2
2
  --fu-accent: var(--color-primary);
3
- --fu-pad: var(--space-lg);
4
3
  --fu-font: var(--text-sm);
5
4
  }
6
5
 
@@ -21,7 +20,7 @@
21
20
 
22
21
  .zx-file-upload__trigger {
23
22
  appearance: none;
24
- display: inline-flex;
23
+ display: flex;
25
24
  align-items: center;
26
25
  gap: var(--space-xs);
27
26
  padding: var(--space-xs) var(--space-lg);
@@ -51,7 +50,7 @@
51
50
 
52
51
  .zx-file-upload__dropzone {
53
52
  justify-self: stretch;
54
- padding: var(--fu-pad);
53
+ padding: var(--space-lg);
55
54
  text-align: center;
56
55
  font-size: var(--fu-font);
57
56
  border: calc(var(--border) * 2) dashed var(--color-base-300);
@@ -60,6 +59,22 @@
60
59
  cursor: pointer;
61
60
  }
62
61
 
62
+ .zx-file-upload__dropzone.zx-a-size-xs {
63
+ padding: var(--space-sm);
64
+ }
65
+
66
+ .zx-file-upload__dropzone.zx-a-size-sm {
67
+ padding: var(--space-md);
68
+ }
69
+
70
+ .zx-file-upload__dropzone.zx-a-size-lg {
71
+ padding: var(--space-xl);
72
+ }
73
+
74
+ .zx-file-upload__dropzone.zx-a-size-xl {
75
+ padding: calc(var(--space-xl) * 1.25);
76
+ }
77
+
63
78
  .zx-root .zx-file-upload__dropzone {
64
79
  color: #07070899;
65
80
  }
@@ -329,21 +344,17 @@
329
344
  }
330
345
 
331
346
  .zx-file-upload__root.zx-a-size-xs {
332
- --fu-pad: var(--space-sm);
333
347
  --fu-font: var(--text-xs);
334
348
  }
335
349
 
336
350
  .zx-file-upload__root.zx-a-size-sm {
337
- --fu-pad: var(--space-md);
338
351
  --fu-font: var(--text-xs);
339
352
  }
340
353
 
341
354
  .zx-file-upload__root.zx-a-size-lg {
342
- --fu-pad: var(--space-xl);
343
355
  --fu-font: var(--text-md);
344
356
  }
345
357
 
346
358
  .zx-file-upload__root.zx-a-size-xl {
347
- --fu-pad: calc(var(--space-xl) * 1.25);
348
359
  --fu-font: var(--text-md);
349
360
  }
@@ -1,6 +1,6 @@
1
1
  .zx-indicator__root {
2
2
  position: relative;
3
- display: inline-flex;
3
+ display: flex;
4
4
  vertical-align: middle;
5
5
  max-width: max-content;
6
6
  }
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .zx-input__root {
6
- display: inline-flex;
6
+ display: flex;
7
7
  flex-direction: column;
8
8
  gap: var(--space-sm);
9
9
  }
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .zx-input__control {
41
- display: inline-flex;
41
+ display: flex;
42
42
  align-items: stretch;
43
43
  box-sizing: border-box;
44
44
  height: calc(var(--size-field) * 12);
@@ -1,5 +1,5 @@
1
1
  .zx-join__root {
2
- display: inline-flex;
2
+ display: flex;
3
3
  align-items: stretch;
4
4
  }
5
5
 
@@ -4,7 +4,7 @@
4
4
  }
5
5
 
6
6
  .zx-kbd__root {
7
- display: inline-flex;
7
+ display: flex;
8
8
  align-items: center;
9
9
  justify-content: center;
10
10
  min-inline-size: 1.75em;
@@ -1,6 +1,6 @@
1
1
  .zx-menu__trigger {
2
2
  appearance: none;
3
- display: inline-flex;
3
+ display: flex;
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  gap: 0.5em;
@@ -4,7 +4,7 @@
4
4
 
5
5
  .zx-native-select__root {
6
6
  position: relative;
7
- display: inline-flex;
7
+ display: flex;
8
8
  align-items: center;
9
9
  }
10
10
 
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .zx-number-input__root {
6
- display: inline-flex;
6
+ display: flex;
7
7
  flex-direction: column;
8
8
  gap: var(--space-sm);
9
9
  }
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .zx-number-input__control {
41
- display: inline-flex;
41
+ display: flex;
42
42
  align-items: stretch;
43
43
  box-sizing: border-box;
44
44
  height: calc(var(--size-field) * 12);
@@ -1,7 +1,6 @@
1
1
  .zx-pagination__root {
2
2
  --pg-accent: var(--color-primary);
3
3
  --pg-accent-content: var(--color-primary-content);
4
- --pg-size: calc(var(--size-field) * 10);
5
4
  --pg-font: var(--text-sm);
6
5
  }
7
6
 
@@ -12,11 +11,11 @@
12
11
  }
13
12
 
14
13
  .zx-pagination__item {
15
- display: inline-flex;
14
+ display: flex;
16
15
  align-items: center;
17
16
  justify-content: center;
18
- min-inline-size: var(--pg-size);
19
- block-size: var(--pg-size);
17
+ min-inline-size: calc(var(--size-field) * 10);
18
+ block-size: calc(var(--size-field) * 10);
20
19
  padding-inline: var(--space-2xs);
21
20
  background: var(--color-base-200);
22
21
  color: var(--color-base-content);
@@ -30,6 +29,26 @@
30
29
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
31
30
  }
32
31
 
32
+ .zx-pagination__item.zx-a-size-xs {
33
+ min-inline-size: calc(var(--size-field) * 7);
34
+ block-size: calc(var(--size-field) * 7);
35
+ }
36
+
37
+ .zx-pagination__item.zx-a-size-sm {
38
+ min-inline-size: calc(var(--size-field) * 9);
39
+ block-size: calc(var(--size-field) * 9);
40
+ }
41
+
42
+ .zx-pagination__item.zx-a-size-lg {
43
+ min-inline-size: calc(var(--size-field) * 12);
44
+ block-size: calc(var(--size-field) * 12);
45
+ }
46
+
47
+ .zx-pagination__item.zx-a-size-xl {
48
+ min-inline-size: calc(var(--size-field) * 14);
49
+ block-size: calc(var(--size-field) * 14);
50
+ }
51
+
33
52
  .zx-pagination__item.zx-s-active {
34
53
  background: var(--pg-accent);
35
54
  color: var(--pg-accent-content);
@@ -46,15 +65,35 @@
46
65
  }
47
66
 
48
67
  .zx-pagination__ellipsis {
49
- display: inline-flex;
68
+ display: flex;
50
69
  align-items: center;
51
70
  justify-content: center;
52
- min-inline-size: var(--pg-size);
53
- block-size: var(--pg-size);
71
+ min-inline-size: calc(var(--size-field) * 10);
72
+ block-size: calc(var(--size-field) * 10);
54
73
  font-size: var(--pg-font);
55
74
  user-select: none;
56
75
  }
57
76
 
77
+ .zx-pagination__ellipsis.zx-a-size-xs {
78
+ min-inline-size: calc(var(--size-field) * 7);
79
+ block-size: calc(var(--size-field) * 7);
80
+ }
81
+
82
+ .zx-pagination__ellipsis.zx-a-size-sm {
83
+ min-inline-size: calc(var(--size-field) * 9);
84
+ block-size: calc(var(--size-field) * 9);
85
+ }
86
+
87
+ .zx-pagination__ellipsis.zx-a-size-lg {
88
+ min-inline-size: calc(var(--size-field) * 12);
89
+ block-size: calc(var(--size-field) * 12);
90
+ }
91
+
92
+ .zx-pagination__ellipsis.zx-a-size-xl {
93
+ min-inline-size: calc(var(--size-field) * 14);
94
+ block-size: calc(var(--size-field) * 14);
95
+ }
96
+
58
97
  .zx-root .zx-pagination__ellipsis {
59
98
  color: #08080aa6;
60
99
  }
@@ -76,11 +115,11 @@
76
115
  }
77
116
 
78
117
  .zx-pagination__prev-trigger {
79
- display: inline-flex;
118
+ display: flex;
80
119
  align-items: center;
81
120
  justify-content: center;
82
- min-inline-size: var(--pg-size);
83
- block-size: var(--pg-size);
121
+ min-inline-size: calc(var(--size-field) * 10);
122
+ block-size: calc(var(--size-field) * 10);
84
123
  background: var(--color-base-200);
85
124
  color: var(--color-base-content);
86
125
  border: none;
@@ -92,6 +131,26 @@
92
131
  transition: background var(--duration-fast) var(--ease-standard);
93
132
  }
94
133
 
134
+ .zx-pagination__prev-trigger.zx-a-size-xs {
135
+ min-inline-size: calc(var(--size-field) * 7);
136
+ block-size: calc(var(--size-field) * 7);
137
+ }
138
+
139
+ .zx-pagination__prev-trigger.zx-a-size-sm {
140
+ min-inline-size: calc(var(--size-field) * 9);
141
+ block-size: calc(var(--size-field) * 9);
142
+ }
143
+
144
+ .zx-pagination__prev-trigger.zx-a-size-lg {
145
+ min-inline-size: calc(var(--size-field) * 12);
146
+ block-size: calc(var(--size-field) * 12);
147
+ }
148
+
149
+ .zx-pagination__prev-trigger.zx-a-size-xl {
150
+ min-inline-size: calc(var(--size-field) * 14);
151
+ block-size: calc(var(--size-field) * 14);
152
+ }
153
+
95
154
  .zx-pagination__prev-trigger.zx-f-disabled {
96
155
  opacity: var(--disabled-opacity);
97
156
  cursor: not-allowed;
@@ -103,11 +162,11 @@
103
162
  }
104
163
 
105
164
  .zx-pagination__next-trigger {
106
- display: inline-flex;
165
+ display: flex;
107
166
  align-items: center;
108
167
  justify-content: center;
109
- min-inline-size: var(--pg-size);
110
- block-size: var(--pg-size);
168
+ min-inline-size: calc(var(--size-field) * 10);
169
+ block-size: calc(var(--size-field) * 10);
111
170
  background: var(--color-base-200);
112
171
  color: var(--color-base-content);
113
172
  border: none;
@@ -119,6 +178,26 @@
119
178
  transition: background var(--duration-fast) var(--ease-standard);
120
179
  }
121
180
 
181
+ .zx-pagination__next-trigger.zx-a-size-xs {
182
+ min-inline-size: calc(var(--size-field) * 7);
183
+ block-size: calc(var(--size-field) * 7);
184
+ }
185
+
186
+ .zx-pagination__next-trigger.zx-a-size-sm {
187
+ min-inline-size: calc(var(--size-field) * 9);
188
+ block-size: calc(var(--size-field) * 9);
189
+ }
190
+
191
+ .zx-pagination__next-trigger.zx-a-size-lg {
192
+ min-inline-size: calc(var(--size-field) * 12);
193
+ block-size: calc(var(--size-field) * 12);
194
+ }
195
+
196
+ .zx-pagination__next-trigger.zx-a-size-xl {
197
+ min-inline-size: calc(var(--size-field) * 14);
198
+ block-size: calc(var(--size-field) * 14);
199
+ }
200
+
122
201
  .zx-pagination__next-trigger.zx-f-disabled {
123
202
  opacity: var(--disabled-opacity);
124
203
  cursor: not-allowed;
@@ -170,19 +249,9 @@
170
249
  }
171
250
 
172
251
  .zx-pagination__root.zx-a-size-xs {
173
- --pg-size: calc(var(--size-field) * 7);
174
252
  --pg-font: var(--text-xs);
175
253
  }
176
254
 
177
- .zx-pagination__root.zx-a-size-sm {
178
- --pg-size: calc(var(--size-field) * 9);
179
- }
180
-
181
- .zx-pagination__root.zx-a-size-lg {
182
- --pg-size: calc(var(--size-field) * 12);
183
- }
184
-
185
255
  .zx-pagination__root.zx-a-size-xl {
186
- --pg-size: calc(var(--size-field) * 14);
187
256
  --pg-font: var(--text-lg);
188
257
  }
@@ -1,6 +1,6 @@
1
1
  .zx-popover__trigger {
2
2
  appearance: none;
3
- display: inline-flex;
3
+ display: flex;
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  gap: 0.5em;
@@ -57,7 +57,7 @@
57
57
 
58
58
  .zx-popover__close {
59
59
  appearance: none;
60
- display: inline-flex;
60
+ display: flex;
61
61
  align-items: center;
62
62
  justify-content: center;
63
63
  gap: 0.5em;
@@ -1,7 +1,3 @@
1
- .zx-progress__root {
2
- --progress-track-size: calc(var(--size-selector) * 2.5);
3
- }
4
-
5
1
  .zx-root .zx-progress__root {
6
2
  --progress-accent: #4c45db;
7
3
  }
@@ -36,12 +32,28 @@
36
32
 
37
33
  .zx-progress__track {
38
34
  width: 100%;
39
- height: var(--progress-track-size);
35
+ height: calc(var(--size-selector) * 2.5);
40
36
  background: var(--color-base-300);
41
37
  border-radius: var(--radius-box);
42
38
  overflow: hidden;
43
39
  }
44
40
 
41
+ .zx-progress__track.zx-a-size-xs {
42
+ height: var(--size-selector);
43
+ }
44
+
45
+ .zx-progress__track.zx-a-size-sm {
46
+ height: calc(var(--size-selector) * 1.5);
47
+ }
48
+
49
+ .zx-progress__track.zx-a-size-lg {
50
+ height: calc(var(--size-selector) * 3.5);
51
+ }
52
+
53
+ .zx-progress__track.zx-a-size-xl {
54
+ height: calc(var(--size-selector) * 4.5);
55
+ }
56
+
45
57
  .zx-progress__range {
46
58
  height: 100%;
47
59
  background: var(--progress-accent);
@@ -238,26 +250,6 @@
238
250
  .zx-root.zx-theme-sunset .zx-progress__root.zx-a-color-error {
239
251
  --progress-accent: #e4a7a9;
240
252
  }
241
-
242
- .zx-progress__root.zx-a-size-xs {
243
- --progress-track-size: var(--size-selector);
244
- }
245
-
246
- .zx-progress__root.zx-a-size-sm {
247
- --progress-track-size: calc(var(--size-selector) * 1.5);
248
- }
249
-
250
- .zx-progress__root.zx-a-size-md {
251
- --progress-track-size: calc(var(--size-selector) * 2.5);
252
- }
253
-
254
- .zx-progress__root.zx-a-size-lg {
255
- --progress-track-size: calc(var(--size-selector) * 3.5);
256
- }
257
-
258
- .zx-progress__root.zx-a-size-xl {
259
- --progress-track-size: calc(var(--size-selector) * 4.5);
260
- }
261
253
  @keyframes zero-daisy-indeterminate {
262
254
  from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }
263
255
  }
@@ -1,6 +1,4 @@
1
1
  .zx-radial-progress__root {
2
- --radial-size: calc(var(--size-selector) * 16);
3
- --radial-thickness: calc(var(--size-selector) * 1.5);
4
2
  --radial-ink: var(--color-primary);
5
3
  --radial-track: var(--color-base-200);
6
4
  }
@@ -9,11 +7,31 @@
9
7
  position: relative;
10
8
  display: inline-grid;
11
9
  place-items: center;
12
- inline-size: var(--radial-size);
13
- block-size: var(--radial-size);
10
+ inline-size: calc(var(--size-selector) * 16);
11
+ block-size: calc(var(--size-selector) * 16);
14
12
  border-radius: 50%;
15
13
  }
16
14
 
15
+ .zx-radial-progress__root.zx-a-size-xs {
16
+ inline-size: calc(var(--size-selector) * 10);
17
+ block-size: calc(var(--size-selector) * 10);
18
+ }
19
+
20
+ .zx-radial-progress__root.zx-a-size-sm {
21
+ inline-size: calc(var(--size-selector) * 13);
22
+ block-size: calc(var(--size-selector) * 13);
23
+ }
24
+
25
+ .zx-radial-progress__root.zx-a-size-lg {
26
+ inline-size: calc(var(--size-selector) * 20);
27
+ block-size: calc(var(--size-selector) * 20);
28
+ }
29
+
30
+ .zx-radial-progress__root.zx-a-size-xl {
31
+ inline-size: calc(var(--size-selector) * 24);
32
+ block-size: calc(var(--size-selector) * 24);
33
+ }
34
+
17
35
  .zx-root .zx-radial-progress__root.zx-s-complete {
18
36
  --radial-ink: #00748c;
19
37
  }
@@ -96,26 +114,6 @@
96
114
  .zx-radial-progress__root.zx-a-color-error {
97
115
  --radial-ink: var(--color-error);
98
116
  }
99
-
100
- .zx-radial-progress__root.zx-a-size-xs {
101
- --radial-size: calc(var(--size-selector) * 10);
102
- --radial-thickness: calc(var(--size-selector) * 1);
103
- }
104
-
105
- .zx-radial-progress__root.zx-a-size-sm {
106
- --radial-size: calc(var(--size-selector) * 13);
107
- --radial-thickness: calc(var(--size-selector) * 1.25);
108
- }
109
-
110
- .zx-radial-progress__root.zx-a-size-lg {
111
- --radial-size: calc(var(--size-selector) * 20);
112
- --radial-thickness: calc(var(--size-selector) * 2);
113
- }
114
-
115
- .zx-radial-progress__root.zx-a-size-xl {
116
- --radial-size: calc(var(--size-selector) * 24);
117
- --radial-thickness: calc(var(--size-selector) * 2.5);
118
- }
119
117
  @keyframes zero-daisyui-radial-spin {
120
118
  to { transform: rotate(360deg); }
121
119
  }
@@ -1,5 +1,4 @@
1
1
  .zx-radio-group__root {
2
- --radio-size: calc(var(--size-selector) * 6);
3
2
  --radio-pad: 0.25rem;
4
3
  --radio-accent: var(--color-primary);
5
4
  }
@@ -20,7 +19,7 @@
20
19
  }
21
20
 
22
21
  .zx-radio-group__item {
23
- display: inline-flex;
22
+ display: flex;
24
23
  align-items: center;
25
24
  gap: 0.625rem;
26
25
  cursor: pointer;
@@ -37,8 +36,8 @@
37
36
  vertical-align: middle;
38
37
  flex-shrink: 0;
39
38
  box-sizing: border-box;
40
- width: var(--radio-size);
41
- height: var(--radio-size);
39
+ width: calc(var(--size-selector) * 6);
40
+ height: calc(var(--size-selector) * 6);
42
41
  padding: var(--radio-pad);
43
42
  border-radius: 9999px;
44
43
  color: var(--radio-accent);
@@ -47,6 +46,26 @@
47
46
  transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
48
47
  }
49
48
 
49
+ .zx-radio-group__item-control.zx-a-size-xs {
50
+ width: calc(var(--size-selector) * 4);
51
+ height: calc(var(--size-selector) * 4);
52
+ }
53
+
54
+ .zx-radio-group__item-control.zx-a-size-sm {
55
+ width: calc(var(--size-selector) * 5);
56
+ height: calc(var(--size-selector) * 5);
57
+ }
58
+
59
+ .zx-radio-group__item-control.zx-a-size-lg {
60
+ width: calc(var(--size-selector) * 7);
61
+ height: calc(var(--size-selector) * 7);
62
+ }
63
+
64
+ .zx-radio-group__item-control.zx-a-size-xl {
65
+ width: calc(var(--size-selector) * 8);
66
+ height: calc(var(--size-selector) * 8);
67
+ }
68
+
50
69
  .zx-radio-group__item-control.zx-s-checked {
51
70
  border-color: currentColor;
52
71
  animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
@@ -111,7 +130,6 @@
111
130
  }
112
131
 
113
132
  .zx-radio-group__root.zx-a-size-xs {
114
- --radio-size: calc(var(--size-selector) * 4);
115
133
  --radio-pad: 0.125rem;
116
134
  }
117
135
 
@@ -120,7 +138,6 @@
120
138
  }
121
139
 
122
140
  .zx-radio-group__root.zx-a-size-sm {
123
- --radio-size: calc(var(--size-selector) * 5);
124
141
  --radio-pad: 0.1875rem;
125
142
  }
126
143
 
@@ -129,7 +146,6 @@
129
146
  }
130
147
 
131
148
  .zx-radio-group__root.zx-a-size-md {
132
- --radio-size: calc(var(--size-selector) * 6);
133
149
  --radio-pad: 0.25rem;
134
150
  }
135
151
 
@@ -138,7 +154,6 @@
138
154
  }
139
155
 
140
156
  .zx-radio-group__root.zx-a-size-lg {
141
- --radio-size: calc(var(--size-selector) * 7);
142
157
  --radio-pad: 0.3125rem;
143
158
  }
144
159
 
@@ -147,7 +162,6 @@
147
162
  }
148
163
 
149
164
  .zx-radio-group__root.zx-a-size-xl {
150
- --radio-size: calc(var(--size-selector) * 8);
151
165
  --radio-pad: 0.375rem;
152
166
  }
153
167