@shuriken-ui/tailwind 4.0.0-alpha.2 → 4.0.0-alpha.20

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 (65) hide show
  1. package/README.md +20 -74
  2. package/lib/css/dark.css +64 -0
  3. package/lib/css/focus.css +4 -0
  4. package/{src → lib}/css/mark.css +0 -3
  5. package/{src → lib}/css/mask.css +0 -3
  6. package/{src → lib}/css/slimscroll.css +8 -8
  7. package/lib/index.css +16 -0
  8. package/lib/theme.css +189 -0
  9. package/package.json +13 -53
  10. package/LICENSE.md +0 -21
  11. package/src/css/accordion.css +0 -175
  12. package/src/css/autocomplete.css +0 -511
  13. package/src/css/avatar-group.css +0 -138
  14. package/src/css/avatar.css +0 -738
  15. package/src/css/breadcrumb.css +0 -63
  16. package/src/css/button-action.css +0 -108
  17. package/src/css/button-close.css +0 -117
  18. package/src/css/button-group.css +0 -236
  19. package/src/css/button-icon.css +0 -97
  20. package/src/css/button.css +0 -565
  21. package/src/css/card.css +0 -69
  22. package/src/css/checkbox.css +0 -99
  23. package/src/css/dropdown-divider.css +0 -6
  24. package/src/css/dropdown-item.css +0 -62
  25. package/src/css/dropdown.css +0 -102
  26. package/src/css/focus.css +0 -12
  27. package/src/css/fullscreen-dropfile.css +0 -63
  28. package/src/css/heading.css +0 -78
  29. package/src/css/icon-box.css +0 -305
  30. package/src/css/input-file-regular.css +0 -255
  31. package/src/css/input-file.css +0 -224
  32. package/src/css/input-help-text.css +0 -7
  33. package/src/css/input-number.css +0 -469
  34. package/src/css/input.css +0 -402
  35. package/src/css/kbd.css +0 -94
  36. package/src/css/label.css +0 -6
  37. package/src/css/link.css +0 -8
  38. package/src/css/list.css +0 -23
  39. package/src/css/listbox.css +0 -511
  40. package/src/css/message-text.css +0 -72
  41. package/src/css/message.css +0 -245
  42. package/src/css/modal.css +0 -51
  43. package/src/css/pagination.css +0 -93
  44. package/src/css/paragraph.css +0 -78
  45. package/src/css/placeholder-page.css +0 -44
  46. package/src/css/placeload.css +0 -13
  47. package/src/css/progress-circle.css +0 -18
  48. package/src/css/progress.css +0 -90
  49. package/src/css/prose.css +0 -22
  50. package/src/css/radio.css +0 -73
  51. package/src/css/select.css +0 -404
  52. package/src/css/snack.css +0 -101
  53. package/src/css/switch-ball.css +0 -94
  54. package/src/css/switch-thin.css +0 -76
  55. package/src/css/tab-slider.css +0 -190
  56. package/src/css/tabs.css +0 -175
  57. package/src/css/tag.css +0 -312
  58. package/src/css/text.css +0 -78
  59. package/src/css/textarea.css +0 -228
  60. package/src/css/theme-switch.css +0 -65
  61. package/src/css/theme-toggle.css +0 -62
  62. package/src/css/toast.css +0 -132
  63. package/src/css/tooltip.css +0 -99
  64. package/src/index.css +0 -58
  65. package/src/theme.css +0 -80
package/src/css/input.css DELETED
@@ -1,402 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-input */
3
-
4
- @utility nui-input-wrapper {
5
- @apply relative;
6
-
7
- .nui-input-label, .nui-label-float {
8
- @apply nui-label;
9
- }
10
-
11
- &:not(.nui-input-loading) {
12
- .nui-input:placeholder-shown ~ .nui-label-float {
13
- @apply text-muted-300 dark:text-muted-600;
14
- }
15
- }
16
-
17
- &:not(.nui-has-icon).nui-input-sm {
18
- .nui-input {
19
- @apply h-8 py-1 text-xs leading-4 px-2;
20
- }
21
- }
22
-
23
- &:not(.nui-has-icon).nui-input-md {
24
- .nui-input {
25
- @apply h-10 py-2 text-sm leading-5 px-3;
26
- }
27
- }
28
-
29
- &:not(.nui-has-icon).nui-input-lg {
30
- .nui-input {
31
- @apply h-12 py-2 text-sm leading-5 px-4;
32
- }
33
- }
34
-
35
- &:not(.nui-has-icon).nui-input-xl {
36
- .nui-input {
37
- @apply h-14 py-2 text-base leading-5 px-4;
38
- }
39
- }
40
-
41
- &.nui-input-label-float:not(.nui-has-icon).nui-input-sm {
42
- .nui-label-float {
43
- @apply start-3 -ms-3 -mt-7 text-xs;
44
- }
45
-
46
- .nui-input:focus-visible ~ .nui-label-float {
47
- @apply !-ms-3 !-mt-7;
48
- }
49
-
50
- .nui-input:placeholder-shown ~ .nui-label-float {
51
- @apply ms-0 mt-0;
52
- }
53
- }
54
-
55
- &.nui-input-label-float:not(.nui-has-icon).nui-input-md {
56
- .nui-label-float {
57
- @apply start-3 -ms-3 -mt-8 text-xs;
58
- }
59
-
60
- .nui-input:focus-visible ~ .nui-label-float {
61
- @apply !-ms-3 !-mt-8 !text-xs;
62
- }
63
-
64
- .nui-input:placeholder-shown ~ .nui-label-float {
65
- @apply ms-0 mt-0 text-[0.825rem];
66
- }
67
- }
68
-
69
- &.nui-input-label-float:not(.nui-has-icon).nui-input-lg {
70
- .nui-label-float {
71
- @apply start-3 -ms-3 -mt-9 text-xs;
72
- }
73
-
74
- .nui-input:focus-visible ~ .nui-label-float {
75
- @apply !-ms-3 !-mt-9 !text-xs;
76
- }
77
-
78
- .nui-input:placeholder-shown ~ .nui-label-float {
79
- @apply ms-0 mt-0 text-[0.825rem];
80
- }
81
- }
82
-
83
- &.nui-input-label-float:not(.nui-has-icon).nui-input-xl {
84
- .nui-label-float {
85
- @apply start-3 -ms-3 -mt-10 text-xs;
86
- }
87
-
88
- .nui-input:focus-visible ~ .nui-label-float {
89
- @apply !-ms-3 !-mt-10 !text-xs;
90
- }
91
-
92
- .nui-input:placeholder-shown ~ .nui-label-float {
93
- @apply ms-0 mt-0 text-[0.825rem];
94
- }
95
- }
96
- }
97
- @utility nui-label-float {
98
- @apply h-5 absolute inline-flex items-center select-none pointer-events-none;
99
- @apply font-sans text-primary-500 leading-none;
100
- @apply transition-all duration-300;
101
- }
102
- @utility nui-input-outer {
103
- @apply relative;
104
- }
105
- @utility nui-input-icon {
106
- @apply absolute start-0 top-0 z-10 flex items-center justify-center;
107
- @apply text-muted-400 dark:text-muted-400;
108
- @apply transition-colors duration-300;
109
- }
110
- @utility nui-input {
111
- @apply nui-focus w-full font-sans disabled:cursor-not-allowed disabled:opacity-75;
112
- @apply transition-all duration-300;
113
-
114
- &:focus-visible ~ .nui-label-float {
115
- @apply !text-primary-500 dark:!text-primary-500;
116
- }
117
-
118
- &:focus-visible ~ .nui-input-icon {
119
- @apply !text-primary-500 dark:!text-primary-500;
120
- }
121
-
122
- &:disabled ~ .nui-input-icon {
123
- @apply cursor-not-allowed opacity-75;
124
- }
125
- }
126
- @utility nui-input-placeload {
127
- @apply absolute start-0 top-0 flex w-full items-center px-4;
128
-
129
- .nui-placeload {
130
- @apply h-3 w-full max-w-[75%] rounded;
131
- }
132
- }
133
- @utility nui-input-action {
134
- @apply absolute end-0 top-0 flex items-center justify-center;
135
- @apply text-muted-400 dark:text-muted-400;
136
- @apply transition-colors duration-300;
137
- }
138
- @utility nui-input-rounded-sm {
139
- .nui-input {
140
- @apply rounded-md;
141
- }
142
- }
143
- @utility nui-input-rounded-md {
144
- .nui-input {
145
- @apply rounded-lg;
146
- }
147
- }
148
- @utility nui-input-rounded-lg {
149
- .nui-input {
150
- @apply rounded-xl;
151
- }
152
- }
153
- @utility nui-input-rounded-full {
154
- .nui-input {
155
- @apply rounded-full;
156
- }
157
- }
158
- @utility nui-input-sm {
159
- .nui-input-label {
160
- @apply pb-1 text-xs;
161
- }
162
-
163
- .nui-label-float {
164
- @apply top-1.5;
165
- }
166
-
167
- .nui-input-icon, .nui-input-action {
168
- @apply h-8 w-8;
169
-
170
- .nui-input-icon-inner, .nui-input-action-inner {
171
- @apply h-4 w-4;
172
- }
173
- }
174
-
175
- .nui-input-placeload {
176
- @apply h-8;
177
- }
178
- }
179
- @utility nui-input-md {
180
- .nui-input-label {
181
- @apply pb-1 text-[0.825rem];
182
- }
183
-
184
- .nui-label-float {
185
- @apply top-2.5;
186
- }
187
-
188
- .nui-input-icon, .nui-input-action {
189
- @apply h-10 w-10;
190
-
191
- .nui-input-icon-inner, .nui-input-action-inner {
192
- @apply h-[1.15rem] w-[1.15rem];
193
- }
194
- }
195
-
196
- .nui-input-placeload {
197
- @apply h-10;
198
- }
199
- }
200
- @utility nui-input-lg {
201
- .nui-input-label {
202
- @apply pb-1 text-sm;
203
- }
204
-
205
- .nui-label-float {
206
- @apply top-3.5;
207
- }
208
-
209
- .nui-input-icon, .nui-input-action {
210
- @apply h-12 w-12;
211
-
212
- .nui-input-icon-inner, .nui-input-action-inner {
213
- @apply h-5 w-5;
214
- }
215
- }
216
-
217
- .nui-input-placeload {
218
- @apply h-12;
219
- }
220
- }
221
- @utility nui-input-xl {
222
- .nui-input-label {
223
- @apply pb-1 text-sm;
224
- }
225
-
226
- .nui-label-float {
227
- @apply top-[1.1rem];
228
- }
229
-
230
- .nui-input-icon, .nui-input-action {
231
- @apply h-14 w-14;
232
-
233
- .nui-input-icon-inner, .nui-input-action-inner {
234
- @apply h-5 w-5;
235
- }
236
- }
237
-
238
- .nui-input-placeload {
239
- @apply h-14;
240
- }
241
- }
242
- @utility nui-input-default {
243
- .nui-input {
244
- @apply text-muted-600 dark:text-muted-200;
245
- @apply placeholder:text-muted-300 dark:placeholder:text-muted-500;
246
- @apply bg-white dark:bg-muted-900;
247
- @apply border border-muted-300 dark:border-muted-700;
248
- @apply hover:border-muted-300 dark:hover:border-muted-700;
249
- }
250
- }
251
- @utility nui-input-default-contrast {
252
- .nui-input {
253
- @apply text-muted-600 dark:text-muted-200;
254
- @apply placeholder:text-muted-300 dark:placeholder:text-muted-600;
255
- @apply bg-white dark:bg-muted-950;
256
- @apply border border-muted-300 dark:border-muted-800;
257
- @apply hover:border-muted-300 dark:hover:border-muted-800;
258
- }
259
- }
260
- @utility nui-input-muted {
261
- .nui-input {
262
- @apply text-muted-600 dark:text-muted-200;
263
- @apply placeholder:text-muted-300 dark:placeholder:text-muted-500;
264
- @apply bg-muted-100 dark:bg-muted-900;
265
- @apply border border-muted-100 dark:border-muted-700;
266
- @apply hover:border-muted-100 dark:hover:border-muted-700;
267
- }
268
- }
269
- @utility nui-input-muted-contrast {
270
- .nui-input {
271
- @apply text-muted-600 dark:text-muted-200;
272
- @apply placeholder:text-muted-300 dark:placeholder:text-muted-600;
273
- @apply bg-muted-100 dark:bg-muted-950;
274
- @apply border border-muted-100 dark:border-muted-800;
275
- @apply hover:border-muted-100 dark:hover:border-muted-800;
276
- }
277
- }
278
- @utility nui-input-focus {
279
- .nui-input {
280
- @apply focus:!border-primary-500 dark:focus:!border-primary-500;
281
- @apply focus:hover:!border-primary-500 dark:focus:hover:!border-primary-500;
282
- }
283
- }
284
- @utility nui-input-loading {
285
- .nui-input {
286
- @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
287
- }
288
-
289
- .nui-input:placeholder-shown ~ .nui-label-float {
290
- @apply text-transparent;
291
- }
292
-
293
- .nui-input-icon {
294
- @apply opacity-0;
295
- }
296
- }
297
- @utility nui-input-label-float {
298
- .nui-input {
299
- @apply placeholder:text-transparent dark:placeholder:text-transparent;
300
- }
301
- }
302
- @utility nui-input-error {
303
- .nui-input {
304
- @apply !border-danger-500 dark:!border-danger-500;
305
- }
306
-
307
- .nui-input-icon {
308
- @apply !text-danger-500 dark:!text-danger-500;
309
- }
310
- }
311
- @utility nui-has-icon {
312
- .nui-input {
313
- @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
314
- }
315
- }
316
- @utility nui-has-icon {
317
- .nui-input {
318
- @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
319
- }
320
- }
321
- @utility nui-has-icon {
322
- .nui-input {
323
- @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
324
- }
325
- }
326
- @utility nui-has-icon {
327
- .nui-input {
328
- @apply h-14 py-2 text-base leading-5 pe-4 ps-[3.25rem];
329
- }
330
- }
331
- @utility nui-has-action {
332
- .nui-input {
333
- @apply pe-8;
334
- }
335
- }
336
- @utility nui-has-action {
337
- .nui-input {
338
- @apply pe-10;
339
- }
340
- }
341
- @utility nui-has-action {
342
- .nui-input {
343
- @apply pe-12;
344
- }
345
- }
346
- @utility nui-has-action {
347
- .nui-input {
348
- @apply pe-14;
349
- }
350
- }
351
- @utility nui-input-label-float {
352
- .nui-label-float {
353
- @apply start-8 -ms-8 -mt-7 text-xs;
354
- }
355
-
356
- .nui-input:focus-visible ~ .nui-label-float {
357
- @apply !-ms-8 !-mt-7;
358
- }
359
-
360
- .nui-input:placeholder-shown ~ .nui-label-float {
361
- @apply ms-0 mt-0;
362
- }
363
- }
364
- @utility nui-input-label-float {
365
- .nui-label-float {
366
- @apply start-10 -ms-10 -mt-8 text-xs;
367
- }
368
-
369
- .nui-input:focus-visible ~ .nui-label-float {
370
- @apply !-ms-10 !-mt-8 !text-xs;
371
- }
372
-
373
- .nui-input:placeholder-shown ~ .nui-label-float {
374
- @apply ms-0 mt-0 text-[0.825rem];
375
- }
376
- }
377
- @utility nui-input-label-float {
378
- .nui-label-float {
379
- @apply start-11 -ms-9 -mt-10 text-xs;
380
- }
381
-
382
- .nui-input:focus-visible ~ .nui-label-float {
383
- @apply !-ms-10 !-mt-9 !text-xs;
384
- }
385
-
386
- .nui-input:placeholder-shown ~ .nui-label-float {
387
- @apply ms-0 mt-0 text-[0.825rem];
388
- }
389
- }
390
- @utility nui-input-label-float {
391
- .nui-label-float {
392
- @apply start-[3.25rem] ms-[-3.25rem] -mt-8 text-xs;
393
- }
394
-
395
- .nui-input:focus-visible ~ .nui-label-float {
396
- @apply !ms-[-3.25rem] !-mt-10 !text-xs;
397
- }
398
-
399
- .nui-input:placeholder-shown ~ .nui-label-float {
400
- @apply ms-0 mt-0 text-[0.825rem];
401
- }
402
- }
package/src/css/kbd.css DELETED
@@ -1,94 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-kbd */
3
-
4
- @utility nui-kbd {
5
- @apply inline-flex items-center justify-center;
6
- @apply font-mono leading-none text-muted-700 dark:text-muted-200;
7
- }
8
- @utility nui-kbd-icon-outer {
9
- @apply inline-flex items-center justify-center;
10
- }
11
- @utility nui-kbd-icon {
12
- @apply shrink-0;
13
- }
14
- @utility nui-kbd-rounded-sm {
15
- @apply rounded-sm;
16
- }
17
- @utility nui-kbd-rounded-md {
18
- @apply rounded-md;
19
- }
20
- @utility nui-kbd-rounded-lg {
21
- @apply rounded-lg;
22
- }
23
- @utility nui-kbd-rounded-full {
24
- @apply rounded-full;
25
- }
26
- @utility nui-kbd-xs {
27
- @apply font-medium;
28
- @apply min-h-[1.2em] min-w-[1.2em];
29
- @apply px-1 py-0.5;
30
- @apply leading-4 text-xs;
31
-
32
- .nui-kbd-icon-outer {
33
- @apply w-4 h-4;
34
- }
35
-
36
- .nui-kbd-icon-inner {
37
- @apply w-3.5 h-3.5;
38
- }
39
- }
40
- @utility nui-kbd-sm {
41
- @apply min-h-[1.6em] min-w-[1.6em];
42
- @apply px-1 py-0.5;
43
- @apply leading-5 text-sm;
44
-
45
- .nui-kbd-icon-outer {
46
- @apply w-5 h-5;
47
- }
48
-
49
- .nui-kbd-icon-inner {
50
- @apply w-3.5 h-3.5;
51
- }
52
- }
53
- @utility nui-kbd-md {
54
- @apply min-h-[2.2em] min-w-[2.2em];
55
- @apply px-2 py-1;
56
- @apply leading-6 text-base;
57
-
58
- .nui-kbd-icon-outer {
59
- @apply w-5 h-5;
60
- }
61
-
62
- .nui-kbd-icon-inner {
63
- @apply w-4 h-4;
64
- }
65
- }
66
- @utility nui-kbd-lg {
67
- @apply min-h-[2.5em] min-w-[2.5em];
68
- @apply px-4 py-1;
69
- @apply leading-7 text-lg;
70
-
71
- .nui-kbd-icon-outer {
72
- @apply w-6 h-6;
73
- }
74
-
75
- .nui-kbd-icon-inner {
76
- @apply w-5 h-5;
77
- }
78
- }
79
- @utility nui-kbd-default {
80
- @apply bg-white dark:bg-muted-800 border border-b-2;
81
- @apply border-muted-500/20 dark:border-muted-300/20;
82
- }
83
- @utility nui-kbd-default-contrast {
84
- @apply bg-white dark:bg-muted-950 border border-b-2;
85
- @apply border-muted-500/20 dark:border-muted-400/20;
86
- }
87
- @utility nui-kbd-muted {
88
- @apply bg-muted-50 dark:bg-muted-800 border border-b-2;
89
- @apply border-muted-600/20 dark:border-muted-300/20;
90
- }
91
- @utility nui-kbd-muted-contrast {
92
- @apply bg-muted-50 dark:bg-muted-950 border border-b-2;
93
- @apply border-muted-600/20 dark:border-muted-400/20;
94
- }
package/src/css/label.css DELETED
@@ -1,6 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-label */
3
-
4
- @utility nui-label {
5
- @apply inline-block font-sans leading-none text-muted-400 dark:text-muted-400/80;
6
- }
package/src/css/link.css DELETED
@@ -1,8 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-link */
3
-
4
- @utility nui-link {
5
- @apply font-sans underline-offset-4 hover:underline focus:underline;
6
- @apply hover:text-primary-500 dark:hover:text-primary-400;
7
- @apply focus:text-primary-500 dark:focus:text-primary-400;
8
- }
package/src/css/list.css DELETED
@@ -1,23 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-list */
3
-
4
- @utility nui-list {
5
- }
6
- @utility nui-list-ul {
7
- @apply list-disc;
8
- }
9
- @utility nui-list-ol {
10
- @apply list-decimal;
11
- }
12
- @utility nui-list-base {
13
- @apply space-y-1 font-sans;
14
- @apply text-muted-700 dark:text-muted-300;
15
- @apply marker:text-muted-500 dark:marker:text-muted-400;
16
- }
17
- @utility nui-list-media {
18
- @apply space-y-4 marker:text-muted-500 dark:marker:text-muted-400;
19
-
20
- .nui-list-item {
21
- @apply flex gap-2;
22
- }
23
- }