daisyui 5.0.0-alpha.21 → 5.0.0-alpha.22

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 (75) hide show
  1. package/base/properties.css +49 -1
  2. package/base/rootcolor.css +43 -1
  3. package/base/scrollbar.css +37 -1
  4. package/colors/properties.css +500 -1
  5. package/colors/responsive.css +2510 -1
  6. package/colors/states.css +1840 -1
  7. package/components/alert/object.js +1 -1
  8. package/components/alert.css +433 -1
  9. package/components/avatar/object.js +1 -1
  10. package/components/avatar.css +385 -1
  11. package/components/badge/object.js +1 -1
  12. package/components/badge.css +589 -1
  13. package/components/button/object.js +1 -1
  14. package/components/button.css +1795 -1
  15. package/components/card/object.js +1 -1
  16. package/components/card.css +955 -1
  17. package/components/chat/object.js +1 -1
  18. package/components/chat.css +775 -1
  19. package/components/checkbox/object.js +1 -1
  20. package/components/checkbox.css +853 -1
  21. package/components/collapse.css +1039 -1
  22. package/components/countdown.css +121 -1
  23. package/components/divider/object.js +1 -1
  24. package/components/divider.css +643 -1
  25. package/components/dropdown/object.js +1 -1
  26. package/components/dropdown.css +1123 -1
  27. package/components/footer/object.js +1 -1
  28. package/components/footer.css +265 -1
  29. package/components/hero.css +181 -1
  30. package/components/input/class.json +1 -1
  31. package/components/input/object.js +1 -1
  32. package/components/input.css +1147 -1
  33. package/components/kbd/object.js +1 -1
  34. package/components/kbd.css +295 -1
  35. package/components/link.css +427 -1
  36. package/components/loading.css +271 -1
  37. package/components/mask.css +499 -1
  38. package/components/menu/object.js +1 -1
  39. package/components/menu.css +1411 -1
  40. package/components/navbar.css +151 -1
  41. package/components/progress.css +967 -1
  42. package/components/radialprogress.css +223 -1
  43. package/components/radio/object.js +1 -1
  44. package/components/radio.css +601 -1
  45. package/components/range/object.js +1 -1
  46. package/components/range.css +973 -1
  47. package/components/rating/object.js +1 -1
  48. package/components/rating.css +613 -1
  49. package/components/select/class.json +1 -1
  50. package/components/select/object.js +1 -1
  51. package/components/select.css +925 -1
  52. package/components/skeleton/object.js +1 -1
  53. package/components/skeleton.css +145 -1
  54. package/components/stack.css +157 -1
  55. package/components/status.css +385 -1
  56. package/components/steps/object.js +1 -1
  57. package/components/steps.css +853 -1
  58. package/components/swap/object.js +1 -1
  59. package/components/swap.css +553 -1
  60. package/components/tab/class.json +4 -4
  61. package/components/tab/object.js +1 -1
  62. package/components/tab.css +1333 -1
  63. package/components/table/object.js +1 -1
  64. package/components/table.css +781 -1
  65. package/components/timeline/object.js +1 -1
  66. package/components/timeline.css +1735 -1
  67. package/components/toggle/object.js +1 -1
  68. package/components/toggle.css +811 -1
  69. package/components/tooltip/object.js +1 -1
  70. package/components/tooltip.css +823 -1
  71. package/full.css +1 -1
  72. package/index.js +1 -1
  73. package/package.json +79 -78
  74. package/themes.css +1 -1
  75. package/utilities/join.css +757 -1
package/components/radialprogress.css CHANGED
@@ -1 +1,223 @@
1
- /*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .radial-progress{height:var(--size);width:var(--size);vertical-align:middle;box-sizing:content-box;--value:0;--size:5rem;--thickness:calc(var(--size)/10);--radialprogress:calc(var(--value)*1%);background-color:#0000;border-radius:3.40282e38px;place-content:center;transition:--radialprogress .3s linear;display:inline-grid;position:relative;&:before{inset:var(--spacing-0,0px);content:"";background:radial-gradient(farthest-side,currentColor 98%,#0000)top/var(--thickness)var(--thickness)no-repeat,conic-gradient(currentColor var(--radialprogress),#0000 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--thickness)),#000 calc(100% + .5px - var(--thickness)));mask:radial-gradient(farthest-side,#0000 calc(100% - var(--thickness)),#000 calc(100% + .5px - var(--thickness)));border-radius:3.40282e38px;position:absolute}&:after{content:"";inset:calc(50% - var(--thickness)/2);transform:rotate(calc(var(--value)*3.6deg - 90deg))translate(calc(var(--size)/2 - 50%));background-color:currentColor;border-radius:3.40282e38px;transition:transform .3s linear;position:absolute}}
1
+ .radial-progress {
2
+ position: relative;
3
+ display: inline-grid;
4
+ height: var(--size);
5
+ width: var(--size);
6
+ place-content: center;
7
+ border-radius: calc(infinity * 1px);
8
+ background-color: transparent;
9
+ vertical-align: middle;
10
+ box-sizing: content-box;
11
+ --value: 0;
12
+ --size: 5rem;
13
+ --thickness: calc(var(--size) / 10);
14
+ --radialprogress: calc(var(--value) * 1%);
15
+ transition: --radialprogress .3s linear;
16
+ &:before {
17
+ position: absolute;
18
+ inset: var(--spacing-0, 0px);
19
+ border-radius: calc(infinity * 1px);
20
+ content: "";
21
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
22
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
23
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
24
+ }
25
+ &:after {
26
+ position: absolute;
27
+ border-radius: calc(infinity * 1px);
28
+ background-color: currentColor;
29
+ transition: transform .3s linear;
30
+ content: "";
31
+ inset: calc(50% - var(--thickness) / 2);
32
+ transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
33
+ }
34
+ }
35
+ @media (min-width: 640px) {
36
+ .sm\:radial-progress {
37
+ position: relative;
38
+ display: inline-grid;
39
+ height: var(--size);
40
+ width: var(--size);
41
+ place-content: center;
42
+ border-radius: calc(infinity * 1px);
43
+ background-color: transparent;
44
+ vertical-align: middle;
45
+ box-sizing: content-box;
46
+ --value: 0;
47
+ --size: 5rem;
48
+ --thickness: calc(var(--size) / 10);
49
+ --radialprogress: calc(var(--value) * 1%);
50
+ transition: --radialprogress .3s linear;
51
+ &:before {
52
+ position: absolute;
53
+ inset: var(--spacing-0, 0px);
54
+ border-radius: calc(infinity * 1px);
55
+ content: "";
56
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
57
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
58
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
59
+ }
60
+ &:after {
61
+ position: absolute;
62
+ border-radius: calc(infinity * 1px);
63
+ background-color: currentColor;
64
+ transition: transform .3s linear;
65
+ content: "";
66
+ inset: calc(50% - var(--thickness) / 2);
67
+ transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
68
+ }
69
+ }
70
+ }
71
+
72
+
73
+ @media (min-width: 768px) {
74
+ .md\:radial-progress {
75
+ position: relative;
76
+ display: inline-grid;
77
+ height: var(--size);
78
+ width: var(--size);
79
+ place-content: center;
80
+ border-radius: calc(infinity * 1px);
81
+ background-color: transparent;
82
+ vertical-align: middle;
83
+ box-sizing: content-box;
84
+ --value: 0;
85
+ --size: 5rem;
86
+ --thickness: calc(var(--size) / 10);
87
+ --radialprogress: calc(var(--value) * 1%);
88
+ transition: --radialprogress .3s linear;
89
+ &:before {
90
+ position: absolute;
91
+ inset: var(--spacing-0, 0px);
92
+ border-radius: calc(infinity * 1px);
93
+ content: "";
94
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
95
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
96
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
97
+ }
98
+ &:after {
99
+ position: absolute;
100
+ border-radius: calc(infinity * 1px);
101
+ background-color: currentColor;
102
+ transition: transform .3s linear;
103
+ content: "";
104
+ inset: calc(50% - var(--thickness) / 2);
105
+ transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
106
+ }
107
+ }
108
+ }
109
+
110
+
111
+ @media (min-width: 1024px) {
112
+ .lg\:radial-progress {
113
+ position: relative;
114
+ display: inline-grid;
115
+ height: var(--size);
116
+ width: var(--size);
117
+ place-content: center;
118
+ border-radius: calc(infinity * 1px);
119
+ background-color: transparent;
120
+ vertical-align: middle;
121
+ box-sizing: content-box;
122
+ --value: 0;
123
+ --size: 5rem;
124
+ --thickness: calc(var(--size) / 10);
125
+ --radialprogress: calc(var(--value) * 1%);
126
+ transition: --radialprogress .3s linear;
127
+ &:before {
128
+ position: absolute;
129
+ inset: var(--spacing-0, 0px);
130
+ border-radius: calc(infinity * 1px);
131
+ content: "";
132
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
133
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
134
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
135
+ }
136
+ &:after {
137
+ position: absolute;
138
+ border-radius: calc(infinity * 1px);
139
+ background-color: currentColor;
140
+ transition: transform .3s linear;
141
+ content: "";
142
+ inset: calc(50% - var(--thickness) / 2);
143
+ transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
144
+ }
145
+ }
146
+ }
147
+
148
+
149
+ @media (min-width: 1280px) {
150
+ .xl\:radial-progress {
151
+ position: relative;
152
+ display: inline-grid;
153
+ height: var(--size);
154
+ width: var(--size);
155
+ place-content: center;
156
+ border-radius: calc(infinity * 1px);
157
+ background-color: transparent;
158
+ vertical-align: middle;
159
+ box-sizing: content-box;
160
+ --value: 0;
161
+ --size: 5rem;
162
+ --thickness: calc(var(--size) / 10);
163
+ --radialprogress: calc(var(--value) * 1%);
164
+ transition: --radialprogress .3s linear;
165
+ &:before {
166
+ position: absolute;
167
+ inset: var(--spacing-0, 0px);
168
+ border-radius: calc(infinity * 1px);
169
+ content: "";
170
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
171
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
172
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
173
+ }
174
+ &:after {
175
+ position: absolute;
176
+ border-radius: calc(infinity * 1px);
177
+ background-color: currentColor;
178
+ transition: transform .3s linear;
179
+ content: "";
180
+ inset: calc(50% - var(--thickness) / 2);
181
+ transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
182
+ }
183
+ }
184
+ }
185
+
186
+
187
+ @media (min-width: 1536px) {
188
+ .\32xl\:radial-progress {
189
+ position: relative;
190
+ display: inline-grid;
191
+ height: var(--size);
192
+ width: var(--size);
193
+ place-content: center;
194
+ border-radius: calc(infinity * 1px);
195
+ background-color: transparent;
196
+ vertical-align: middle;
197
+ box-sizing: content-box;
198
+ --value: 0;
199
+ --size: 5rem;
200
+ --thickness: calc(var(--size) / 10);
201
+ --radialprogress: calc(var(--value) * 1%);
202
+ transition: --radialprogress .3s linear;
203
+ &:before {
204
+ position: absolute;
205
+ inset: var(--spacing-0, 0px);
206
+ border-radius: calc(infinity * 1px);
207
+ content: "";
208
+ background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
209
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
210
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)));
211
+ }
212
+ &:after {
213
+ position: absolute;
214
+ border-radius: calc(infinity * 1px);
215
+ background-color: currentColor;
216
+ transition: transform .3s linear;
217
+ content: "";
218
+ inset: calc(50% - var(--thickness) / 2);
219
+ transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
220
+ }
221
+ }
222
+ }
223
+
package/components/radio/object.js CHANGED
@@ -1 +1 @@
1
- export default {".radio":{"@apply border-base-content/20 text-base-content relative size-6 shrink-0 cursor-pointer appearance-none rounded-full border p-1 align-middle":{},"boxShadow":"0 1px oklch(0% 0 0 / 0.1) inset","&:before":{"@apply block size-full rounded-full":{},"content":"\"\""},"&:focus-visible":{"@apply outline-2 outline-offset-2 outline-current":{}},"&:checked,\n &[aria-checked=\"true\"]":{"animation":"radiomark var(--animation-input, 0.2s) ease-out","@apply bg-base-100 border-current":{},"&:before":{"@apply bg-current":{},"boxShadow":"0 -1px oklch(0% 0 0 / 0.1) inset,\n 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,\n 0 1px oklch(0% 0 0 / 0.1)"}}},".radio-primary":{"@apply text-primary border-current":{}},".radio-secondary":{"@apply text-secondary border-current":{}},".radio-accent":{"@apply text-accent border-current":{}},".radio-success":{"@apply text-success border-current":{}},".radio-warning":{"@apply text-warning border-current":{}},".radio-info":{"@apply text-info border-current":{}},".radio-error":{"@apply text-error border-current":{}},".radio:disabled":{"@apply cursor-not-allowed opacity-20":{}},"@keyframes radiomark":{"0%":{"padding":"5px"},"50%":{"padding":"3px"}},".radio-xs":{"&:is([type=\"radio\"])":{"@apply size-4":{}}},".radio-sm":{"&:is([type=\"radio\"])":{"@apply size-5":{}}},".radio-md":{"&:is([type=\"radio\"])":{"@apply size-6":{}}},".radio-lg":{"&:is([type=\"radio\"])":{"@apply size-8":{}}}};
1
+ export default {".radio":{"@apply text-base-content relative size-6 shrink-0 cursor-pointer appearance-none rounded-full p-1 align-middle":{},"border":"1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent)","boxShadow":"0 1px oklch(0% 0 0 / 0.1) inset","&:before":{"@apply block size-full rounded-full":{},"content":"\"\""},"&:focus-visible":{"outline":"2px solid currentColor"},"&:checked,\n &[aria-checked=\"true\"]":{"animation":"radiomark var(--animation-input, 0.2s) ease-out","@apply bg-base-100 border-current":{},"&:before":{"@apply bg-current":{},"boxShadow":"0 -1px oklch(0% 0 0 / 0.1) inset,\n 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,\n 0 1px oklch(0% 0 0 / 0.1)"}}},".radio-primary":{"@apply text-primary border-current":{}},".radio-secondary":{"@apply text-secondary border-current":{}},".radio-accent":{"@apply text-accent border-current":{}},".radio-success":{"@apply text-success border-current":{}},".radio-warning":{"@apply text-warning border-current":{}},".radio-info":{"@apply text-info border-current":{}},".radio-error":{"@apply text-error border-current":{}},".radio:disabled":{"@apply cursor-not-allowed opacity-20":{}},"@keyframes radiomark":{"0%":{"padding":"5px"},"50%":{"padding":"3px"}},".radio-xs":{"&:is([type=\"radio\"])":{"@apply size-4":{}}},".radio-sm":{"&:is([type=\"radio\"])":{"@apply size-5":{}}},".radio-md":{"&:is([type=\"radio\"])":{"@apply size-6":{}}},".radio-lg":{"&:is([type=\"radio\"])":{"@apply size-8":{}}}};