@machinerd/js-module 0.3.1 → 0.4.1

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 (39) hide show
  1. package/README.md +147 -21
  2. package/dist/hooks/index.cjs +1 -1
  3. package/dist/hooks/index.d.cts +3 -18
  4. package/dist/hooks/index.d.mts +3 -18
  5. package/dist/hooks/index.mjs +1 -1
  6. package/dist/hooks-BDwkyixK.mjs +1 -0
  7. package/dist/hooks-D1JcFVTH.cjs +1 -0
  8. package/dist/index-CWgr7lXX.d.cts +661 -0
  9. package/dist/index-CfKO4Lbp.d.mts +661 -0
  10. package/dist/index-DiZ4xS_f.d.mts +37 -0
  11. package/dist/index-OjfbEYpE.d.cts +37 -0
  12. package/dist/index.d.cts +1 -36
  13. package/dist/index.d.mts +1 -36
  14. package/dist/skeleton-B1Jzl0cz.cjs +1 -0
  15. package/dist/skeleton-NTpsm0XR.mjs +1 -0
  16. package/dist/styles/index.css +331 -189
  17. package/dist/ui/index.cjs +1 -1
  18. package/dist/ui/index.d.cts +40 -272
  19. package/dist/ui/index.d.mts +43 -275
  20. package/dist/ui/index.mjs +1 -1
  21. package/dist/ui-client/index.cjs +1 -0
  22. package/dist/ui-client/index.d.cts +158 -0
  23. package/dist/ui-client/index.d.mts +158 -0
  24. package/dist/ui-client/index.mjs +1 -0
  25. package/dist/util/index.cjs +1 -1
  26. package/dist/util/index.d.cts +32 -22
  27. package/dist/util/index.d.mts +31 -22
  28. package/dist/util/index.mjs +1 -1
  29. package/dist/util-1BLWEgZB.cjs +1 -0
  30. package/dist/util-Dtb82Us1.mjs +1 -0
  31. package/package.json +6 -4
  32. package/dist/hooks-C9M3V-Pb.mjs +0 -1
  33. package/dist/hooks-DPYIex_y.cjs +0 -1
  34. package/dist/ui/client-only/index.cjs +0 -1
  35. package/dist/ui/client-only/index.d.cts +0 -136
  36. package/dist/ui/client-only/index.d.mts +0 -136
  37. package/dist/ui/client-only/index.mjs +0 -1
  38. package/dist/util-BrmjOcya.mjs +0 -1
  39. package/dist/util-CDkao6z3.cjs +0 -1
@@ -1,16 +1,16 @@
1
- /*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
6
  --komc-color-sky-950: #006699;
7
+ --komc-color-blue-50: oklch(97% 0.014 254.604);
7
8
  --komc-color-blue-500: oklch(62.3% 0.214 259.815);
8
9
  --komc-color-indigo-600: oklch(51.1% 0.262 276.966);
9
10
  --komc-color-indigo-700: oklch(45.7% 0.24 277.023);
10
11
  --komc-color-gray-50: #fafafa;
11
12
  --komc-color-gray-100: oklch(96.7% 0.003 264.542);
12
13
  --komc-color-gray-200: #f5f5f5;
13
- --komc-color-gray-300: oklch(87.2% 0.01 258.338);
14
14
  --komc-color-gray-500: #e5e5e5;
15
15
  --komc-color-gray-600: oklch(44.6% 0.03 256.802);
16
16
  --komc-color-gray-700: #cccccc;
@@ -19,23 +19,31 @@
19
19
  --komc-color-neutral-100: oklch(97% 0 0);
20
20
  --komc-color-neutral-200: oklch(92.2% 0 0);
21
21
  --komc-color-neutral-300: oklch(87% 0 0);
22
- --komc-color-neutral-400: oklch(70.8% 0 0);
22
+ --komc-color-neutral-500: oklch(55.6% 0 0);
23
+ --komc-color-neutral-600: oklch(43.9% 0 0);
23
24
  --komc-color-black: #000;
24
25
  --komc-color-white: #fff;
25
26
  --komc-spacing: 0.25rem;
26
- --komc-container-xs: 20rem;
27
27
  --komc-container-sm: 24rem;
28
28
  --komc-container-md: 28rem;
29
29
  --komc-container-lg: 32rem;
30
30
  --komc-container-xl: 36rem;
31
31
  --komc-container-2xl: 42rem;
32
- --komc-container-3xl: 48rem;
33
- --komc-container-4xl: 56rem;
34
- --komc-container-5xl: 64rem;
35
- --komc-container-6xl: 72rem;
36
- --komc-container-7xl: 80rem;
37
32
  --komc-text-xs: 0.75rem;
38
33
  --komc-text-xs--line-height: calc(1 / 0.75);
34
+ --komc-text-sm: 0.875rem;
35
+ --komc-text-sm--line-height: calc(1.25 / 0.875);
36
+ --komc-text-base: 1rem;
37
+ --komc-text-base--line-height: calc(1.5 / 1);
38
+ --komc-text-lg: 1.125rem;
39
+ --komc-text-lg--line-height: calc(1.75 / 1.125);
40
+ --komc-font-weight-light: 300;
41
+ --komc-font-weight-normal: 400;
42
+ --komc-font-weight-medium: 500;
43
+ --komc-font-weight-semibold: 600;
44
+ --komc-font-weight-bold: 700;
45
+ --komc-font-weight-extrabold: 800;
46
+ --komc-font-weight-black: 900;
39
47
  --komc-radius-sm: 0.25rem;
40
48
  --komc-radius-md: 0.375rem;
41
49
  --komc-radius-lg: 0.5rem;
@@ -47,6 +55,7 @@
47
55
  --komc-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
48
56
  --komc-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
49
57
  --komc-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
58
+ --komc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
50
59
  --komc-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
51
60
  --komc-default-transition-duration: 150ms;
52
61
  --komc-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -73,17 +82,8 @@
73
82
  .komc\:relative {
74
83
  position: relative;
75
84
  }
76
- .komc\:sticky {
77
- position: sticky;
78
- }
79
- .komc\:top-0 {
80
- top: calc(var(--komc-spacing) * 0);
81
- }
82
- .komc\:top-1\/2 {
83
- top: calc(1 / 2 * 100%);
84
- }
85
- .komc\:top-3 {
86
- top: calc(var(--komc-spacing) * 3);
85
+ .komc\:inset-0 {
86
+ inset: calc(var(--komc-spacing) * 0);
87
87
  }
88
88
  .komc\:top-full {
89
89
  top: 100%;
@@ -94,15 +94,9 @@
94
94
  .komc\:right-5 {
95
95
  right: calc(var(--komc-spacing) * 5);
96
96
  }
97
- .komc\:right-full {
98
- right: 100%;
99
- }
100
97
  .komc\:bottom-0 {
101
98
  bottom: calc(var(--komc-spacing) * 0);
102
99
  }
103
- .komc\:bottom-3 {
104
- bottom: calc(var(--komc-spacing) * 3);
105
- }
106
100
  .komc\:bottom-full {
107
101
  bottom: 100%;
108
102
  }
@@ -115,18 +109,12 @@
115
109
  .komc\:left-5 {
116
110
  left: calc(var(--komc-spacing) * 5);
117
111
  }
118
- .komc\:left-full {
119
- left: 100%;
120
- }
121
112
  .komc\:z-10 {
122
113
  z-index: 10;
123
114
  }
124
115
  .komc\:z-99 {
125
116
  z-index: 99;
126
117
  }
127
- .komc\:z-1000 {
128
- z-index: 1000;
129
- }
130
118
  .komc\:mx-auto {
131
119
  margin-inline: auto;
132
120
  }
@@ -136,17 +124,17 @@
136
124
  .komc\:-mt-4 {
137
125
  margin-top: calc(var(--komc-spacing) * -4);
138
126
  }
139
- .komc\:mt-1 {
140
- margin-top: calc(var(--komc-spacing) * 1);
141
- }
142
- .komc\:-mr-1 {
143
- margin-right: calc(var(--komc-spacing) * -1);
127
+ .komc\:mt-3 {
128
+ margin-top: calc(var(--komc-spacing) * 3);
144
129
  }
145
130
  .komc\:-mb-1 {
146
131
  margin-bottom: calc(var(--komc-spacing) * -1);
147
132
  }
148
- .komc\:-ml-1 {
149
- margin-left: calc(var(--komc-spacing) * -1);
133
+ .komc\:mb-2 {
134
+ margin-bottom: calc(var(--komc-spacing) * 2);
135
+ }
136
+ .komc\:mb-4 {
137
+ margin-bottom: calc(var(--komc-spacing) * 4);
150
138
  }
151
139
  .komc\:-ml-4 {
152
140
  margin-left: calc(var(--komc-spacing) * -4);
@@ -160,6 +148,9 @@
160
148
  .komc\:grid {
161
149
  display: grid;
162
150
  }
151
+ .komc\:hidden {
152
+ display: none;
153
+ }
163
154
  .komc\:inline-flex {
164
155
  display: inline-flex;
165
156
  }
@@ -202,35 +193,20 @@
202
193
  .komc\:h-16 {
203
194
  height: calc(var(--komc-spacing) * 16);
204
195
  }
205
- .komc\:h-18 {
206
- height: calc(var(--komc-spacing) * 18);
207
- }
208
196
  .komc\:h-20 {
209
197
  height: calc(var(--komc-spacing) * 20);
210
198
  }
211
- .komc\:h-22 {
212
- height: calc(var(--komc-spacing) * 22);
213
- }
214
- .komc\:h-22\.5 {
215
- height: calc(var(--komc-spacing) * 22.5);
216
- }
217
199
  .komc\:h-24 {
218
200
  height: calc(var(--komc-spacing) * 24);
219
201
  }
220
- .komc\:h-26 {
221
- height: calc(var(--komc-spacing) * 26);
222
- }
223
202
  .komc\:h-28 {
224
203
  height: calc(var(--komc-spacing) * 28);
225
204
  }
226
- .komc\:h-30 {
227
- height: calc(var(--komc-spacing) * 30);
228
- }
229
- .komc\:h-50 {
230
- height: calc(var(--komc-spacing) * 50);
205
+ .komc\:h-40 {
206
+ height: calc(var(--komc-spacing) * 40);
231
207
  }
232
- .komc\:h-400 {
233
- height: calc(var(--komc-spacing) * 400);
208
+ .komc\:h-56 {
209
+ height: calc(var(--komc-spacing) * 56);
234
210
  }
235
211
  .komc\:h-auto {
236
212
  height: auto;
@@ -241,14 +217,29 @@
241
217
  .komc\:h-full {
242
218
  height: 100%;
243
219
  }
244
- .komc\:min-h-10 {
245
- min-height: calc(var(--komc-spacing) * 10);
220
+ .komc\:min-h-0 {
221
+ min-height: calc(var(--komc-spacing) * 0);
246
222
  }
247
223
  .komc\:min-h-15 {
248
224
  min-height: calc(var(--komc-spacing) * 15);
249
225
  }
250
- .komc\:min-h-400 {
251
- min-height: calc(var(--komc-spacing) * 400);
226
+ .komc\:min-h-16 {
227
+ min-height: calc(var(--komc-spacing) * 16);
228
+ }
229
+ .komc\:min-h-32 {
230
+ min-height: calc(var(--komc-spacing) * 32);
231
+ }
232
+ .komc\:min-h-48 {
233
+ min-height: calc(var(--komc-spacing) * 48);
234
+ }
235
+ .komc\:min-h-56 {
236
+ min-height: calc(var(--komc-spacing) * 56);
237
+ }
238
+ .komc\:min-h-96 {
239
+ min-height: calc(var(--komc-spacing) * 96);
240
+ }
241
+ .komc\:min-h-screen {
242
+ min-height: 100vh;
252
243
  }
253
244
  .komc\:w-2 {
254
245
  width: calc(var(--komc-spacing) * 2);
@@ -265,27 +256,9 @@
265
256
  .komc\:max-w-2xl {
266
257
  max-width: var(--komc-container-2xl);
267
258
  }
268
- .komc\:max-w-3xl {
269
- max-width: var(--komc-container-3xl);
270
- }
271
- .komc\:max-w-4xl {
272
- max-width: var(--komc-container-4xl);
273
- }
274
- .komc\:max-w-5xl {
275
- max-width: var(--komc-container-5xl);
276
- }
277
- .komc\:max-w-6xl {
278
- max-width: var(--komc-container-6xl);
279
- }
280
- .komc\:max-w-7xl {
281
- max-width: var(--komc-container-7xl);
282
- }
283
259
  .komc\:max-w-70 {
284
260
  max-width: calc(var(--komc-spacing) * 70);
285
261
  }
286
- .komc\:max-w-330 {
287
- max-width: calc(var(--komc-spacing) * 330);
288
- }
289
262
  .komc\:max-w-full {
290
263
  max-width: 100%;
291
264
  }
@@ -301,12 +274,15 @@
301
274
  .komc\:max-w-xl {
302
275
  max-width: var(--komc-container-xl);
303
276
  }
304
- .komc\:max-w-xs {
305
- max-width: var(--komc-container-xs);
306
- }
307
277
  .komc\:min-w-0 {
308
278
  min-width: calc(var(--komc-spacing) * 0);
309
279
  }
280
+ .komc\:min-w-\[320px\] {
281
+ min-width: 320px;
282
+ }
283
+ .komc\:min-w-\[min\(100\%\,320px\)\] {
284
+ min-width: min(100%, 320px);
285
+ }
310
286
  .komc\:shrink-0 {
311
287
  flex-shrink: 0;
312
288
  }
@@ -320,18 +296,6 @@
320
296
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
321
297
  translate: var(--tw-translate-x) var(--tw-translate-y);
322
298
  }
323
- .komc\:-translate-x-2 {
324
- --tw-translate-x: calc(var(--komc-spacing) * -2);
325
- translate: var(--tw-translate-x) var(--tw-translate-y);
326
- }
327
- .komc\:translate-x-2 {
328
- --tw-translate-x: calc(var(--komc-spacing) * 2);
329
- translate: var(--tw-translate-x) var(--tw-translate-y);
330
- }
331
- .komc\:-translate-y-1\/2 {
332
- --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
333
- translate: var(--tw-translate-x) var(--tw-translate-y);
334
- }
335
299
  .komc\:-translate-y-2 {
336
300
  --tw-translate-y: calc(var(--komc-spacing) * -2);
337
301
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -343,27 +307,39 @@
343
307
  .komc\:animate-pulse {
344
308
  animation: var(--komc-animate-pulse);
345
309
  }
310
+ .komc\:cursor-default {
311
+ cursor: default;
312
+ }
346
313
  .komc\:cursor-pointer {
347
314
  cursor: pointer;
348
315
  }
349
- .komc\:grid-cols-4 {
350
- grid-template-columns: repeat(4, minmax(0, 1fr));
351
- }
352
- .komc\:grid-cols-5 {
353
- grid-template-columns: repeat(5, minmax(0, 1fr));
316
+ .komc\:grid-cols-2 {
317
+ grid-template-columns: repeat(2, minmax(0, 1fr));
354
318
  }
355
319
  .komc\:flex-col {
356
320
  flex-direction: column;
357
321
  }
322
+ .komc\:flex-wrap {
323
+ flex-wrap: wrap;
324
+ }
358
325
  .komc\:items-center {
359
326
  align-items: center;
360
327
  }
328
+ .komc\:items-start {
329
+ align-items: flex-start;
330
+ }
361
331
  .komc\:justify-between {
362
332
  justify-content: space-between;
363
333
  }
364
334
  .komc\:justify-center {
365
335
  justify-content: center;
366
336
  }
337
+ .komc\:justify-end {
338
+ justify-content: flex-end;
339
+ }
340
+ .komc\:justify-items-center {
341
+ justify-items: center;
342
+ }
367
343
  .komc\:gap-0 {
368
344
  gap: calc(var(--komc-spacing) * 0);
369
345
  }
@@ -382,12 +358,18 @@
382
358
  .komc\:gap-5 {
383
359
  gap: calc(var(--komc-spacing) * 5);
384
360
  }
361
+ .komc\:gap-6 {
362
+ gap: calc(var(--komc-spacing) * 6);
363
+ }
385
364
  .komc\:gap-x-2 {
386
365
  column-gap: calc(var(--komc-spacing) * 2);
387
366
  }
388
367
  .komc\:overflow-hidden {
389
368
  overflow: hidden;
390
369
  }
370
+ .komc\:rounded {
371
+ border-radius: 0.25rem;
372
+ }
391
373
  .komc\:rounded-2xl {
392
374
  border-radius: var(--komc-radius-2xl);
393
375
  }
@@ -416,6 +398,10 @@
416
398
  border-style: var(--tw-border-style);
417
399
  border-width: 1px;
418
400
  }
401
+ .komc\:border-2 {
402
+ border-style: var(--tw-border-style);
403
+ border-width: 2px;
404
+ }
419
405
  .komc\:border-t {
420
406
  border-top-style: var(--tw-border-style);
421
407
  border-top-width: 1px;
@@ -432,9 +418,6 @@
432
418
  --tw-border-style: none;
433
419
  border-style: none;
434
420
  }
435
- .komc\:border-black {
436
- border-color: var(--komc-color-black);
437
- }
438
421
  .komc\:border-blue-500 {
439
422
  border-color: var(--komc-color-blue-500);
440
423
  }
@@ -447,6 +430,9 @@
447
430
  .komc\:border-neutral-200 {
448
431
  border-color: var(--komc-color-neutral-200);
449
432
  }
433
+ .komc\:border-neutral-300 {
434
+ border-color: var(--komc-color-neutral-300);
435
+ }
450
436
  .komc\:border-sky-450 {
451
437
  border-color: var(--komc-color-sky-450);
452
438
  }
@@ -462,6 +448,15 @@
462
448
  .komc\:bg-\[rgb\(95\,95\,96\)\] {
463
449
  background-color: rgb(95,95,96);
464
450
  }
451
+ .komc\:bg-black\/50 {
452
+ background-color: var(--komc-color-black);
453
+ @supports (color: color-mix(in lab, red, red)) {
454
+ background-color: color-mix(in oklab, var(--komc-color-black) 50%, transparent);
455
+ }
456
+ }
457
+ .komc\:bg-blue-50 {
458
+ background-color: var(--komc-color-blue-50);
459
+ }
465
460
  .komc\:bg-blue-500 {
466
461
  background-color: var(--komc-color-blue-500);
467
462
  }
@@ -471,21 +466,18 @@
471
466
  .komc\:bg-gray-200 {
472
467
  background-color: var(--komc-color-gray-200);
473
468
  }
474
- .komc\:bg-gray-300 {
475
- background-color: var(--komc-color-gray-300);
476
- }
477
469
  .komc\:bg-indigo-600 {
478
470
  background-color: var(--komc-color-indigo-600);
479
471
  }
480
472
  .komc\:bg-inherit {
481
473
  background-color: inherit;
482
474
  }
475
+ .komc\:bg-neutral-50 {
476
+ background-color: var(--komc-color-neutral-50);
477
+ }
483
478
  .komc\:bg-neutral-100 {
484
479
  background-color: var(--komc-color-neutral-100);
485
480
  }
486
- .komc\:bg-neutral-400 {
487
- background-color: var(--komc-color-neutral-400);
488
- }
489
481
  .komc\:bg-night-700 {
490
482
  background-color: var(--komc-color-night-700);
491
483
  }
@@ -501,6 +493,9 @@
501
493
  .komc\:bg-white {
502
494
  background-color: var(--komc-color-white);
503
495
  }
496
+ .komc\:p-0 {
497
+ padding: calc(var(--komc-spacing) * 0);
498
+ }
504
499
  .komc\:p-1 {
505
500
  padding: calc(var(--komc-spacing) * 1);
506
501
  }
@@ -510,8 +505,11 @@
510
505
  .komc\:p-4 {
511
506
  padding: calc(var(--komc-spacing) * 4);
512
507
  }
513
- .komc\:p-40 {
514
- padding: calc(var(--komc-spacing) * 40);
508
+ .komc\:p-6 {
509
+ padding: calc(var(--komc-spacing) * 6);
510
+ }
511
+ .komc\:p-8 {
512
+ padding: calc(var(--komc-spacing) * 8);
515
513
  }
516
514
  .komc\:px-0 {
517
515
  padding-inline: calc(var(--komc-spacing) * 0);
@@ -540,16 +538,62 @@
540
538
  .komc\:px-6 {
541
539
  padding-inline: calc(var(--komc-spacing) * 6);
542
540
  }
541
+ .komc\:py-1 {
542
+ padding-block: calc(var(--komc-spacing) * 1);
543
+ }
544
+ .komc\:py-2 {
545
+ padding-block: calc(var(--komc-spacing) * 2);
546
+ }
543
547
  .komc\:pt-4 {
544
548
  padding-top: calc(var(--komc-spacing) * 4);
545
549
  }
546
550
  .komc\:pl-4 {
547
551
  padding-left: calc(var(--komc-spacing) * 4);
548
552
  }
553
+ .komc\:text-base {
554
+ font-size: var(--komc-text-base);
555
+ line-height: var(--tw-leading, var(--komc-text-base--line-height));
556
+ }
557
+ .komc\:text-lg {
558
+ font-size: var(--komc-text-lg);
559
+ line-height: var(--tw-leading, var(--komc-text-lg--line-height));
560
+ }
561
+ .komc\:text-sm {
562
+ font-size: var(--komc-text-sm);
563
+ line-height: var(--tw-leading, var(--komc-text-sm--line-height));
564
+ }
549
565
  .komc\:text-xs {
550
566
  font-size: var(--komc-text-xs);
551
567
  line-height: var(--tw-leading, var(--komc-text-xs--line-height));
552
568
  }
569
+ .komc\:font-black {
570
+ --tw-font-weight: var(--komc-font-weight-black);
571
+ font-weight: var(--komc-font-weight-black);
572
+ }
573
+ .komc\:font-bold {
574
+ --tw-font-weight: var(--komc-font-weight-bold);
575
+ font-weight: var(--komc-font-weight-bold);
576
+ }
577
+ .komc\:font-extrabold {
578
+ --tw-font-weight: var(--komc-font-weight-extrabold);
579
+ font-weight: var(--komc-font-weight-extrabold);
580
+ }
581
+ .komc\:font-light {
582
+ --tw-font-weight: var(--komc-font-weight-light);
583
+ font-weight: var(--komc-font-weight-light);
584
+ }
585
+ .komc\:font-medium {
586
+ --tw-font-weight: var(--komc-font-weight-medium);
587
+ font-weight: var(--komc-font-weight-medium);
588
+ }
589
+ .komc\:font-normal {
590
+ --tw-font-weight: var(--komc-font-weight-normal);
591
+ font-weight: var(--komc-font-weight-normal);
592
+ }
593
+ .komc\:font-semibold {
594
+ --tw-font-weight: var(--komc-font-weight-semibold);
595
+ font-weight: var(--komc-font-weight-semibold);
596
+ }
553
597
  .komc\:break-all {
554
598
  word-break: break-all;
555
599
  }
@@ -565,6 +609,12 @@
565
609
  .komc\:text-gray-800 {
566
610
  color: var(--komc-color-gray-800);
567
611
  }
612
+ .komc\:text-neutral-500 {
613
+ color: var(--komc-color-neutral-500);
614
+ }
615
+ .komc\:text-neutral-600 {
616
+ color: var(--komc-color-neutral-600);
617
+ }
568
618
  .komc\:text-white {
569
619
  color: var(--komc-color-white);
570
620
  }
@@ -574,6 +624,14 @@
574
624
  .komc\:opacity-100 {
575
625
  opacity: 100%;
576
626
  }
627
+ .komc\:shadow-lg {
628
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
629
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
630
+ }
631
+ .komc\:shadow-sm {
632
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
633
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
634
+ }
577
635
  .komc\:drop-shadow-2xl {
578
636
  --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
579
637
  --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-2xl));
@@ -627,10 +685,58 @@
627
685
  --tw-duration: 300ms;
628
686
  transition-duration: 300ms;
629
687
  }
688
+ .komc\:ease-in-out {
689
+ --tw-ease: var(--komc-ease-in-out);
690
+ transition-timing-function: var(--komc-ease-in-out);
691
+ }
630
692
  .komc\:outline-none {
631
693
  --tw-outline-style: none;
632
694
  outline-style: none;
633
695
  }
696
+ .komc\:after\:pointer-events-none {
697
+ &::after {
698
+ content: var(--tw-content);
699
+ pointer-events: none;
700
+ }
701
+ }
702
+ .komc\:after\:invisible {
703
+ &::after {
704
+ content: var(--tw-content);
705
+ visibility: hidden;
706
+ }
707
+ }
708
+ .komc\:after\:h-0 {
709
+ &::after {
710
+ content: var(--tw-content);
711
+ height: calc(var(--komc-spacing) * 0);
712
+ }
713
+ }
714
+ .komc\:after\:overflow-hidden {
715
+ &::after {
716
+ content: var(--tw-content);
717
+ overflow: hidden;
718
+ }
719
+ }
720
+ .komc\:after\:font-bold {
721
+ &::after {
722
+ content: var(--tw-content);
723
+ --tw-font-weight: var(--komc-font-weight-bold);
724
+ font-weight: var(--komc-font-weight-bold);
725
+ }
726
+ }
727
+ .komc\:after\:content-\[attr\(data-text\)\] {
728
+ &::after {
729
+ --tw-content: attr(data-text);
730
+ content: var(--tw-content);
731
+ }
732
+ }
733
+ .komc\:after\:select-none {
734
+ &::after {
735
+ content: var(--tw-content);
736
+ -webkit-user-select: none;
737
+ user-select: none;
738
+ }
739
+ }
634
740
  .komc\:hover\:border-transparent {
635
741
  &:hover {
636
742
  @media (hover: hover) {
@@ -673,20 +779,6 @@
673
779
  }
674
780
  }
675
781
  }
676
- .komc\:hover\:bg-neutral-50 {
677
- &:hover {
678
- @media (hover: hover) {
679
- background-color: var(--komc-color-neutral-50);
680
- }
681
- }
682
- }
683
- .komc\:hover\:bg-neutral-200 {
684
- &:hover {
685
- @media (hover: hover) {
686
- background-color: var(--komc-color-neutral-200);
687
- }
688
- }
689
- }
690
782
  .komc\:hover\:bg-night-700 {
691
783
  &:hover {
692
784
  @media (hover: hover) {
@@ -771,11 +863,6 @@
771
863
  }
772
864
  }
773
865
  }
774
- .komc\:focus\:border-neutral-300 {
775
- &:focus {
776
- border-color: var(--komc-color-neutral-300);
777
- }
778
- }
779
866
  .komc\:active\:border-transparent {
780
867
  &:active {
781
868
  border-color: transparent;
@@ -916,9 +1003,30 @@
916
1003
  color: var(--komc-color-gray-800);
917
1004
  }
918
1005
  }
919
- .komc\:xl\:p-10 {
920
- @media (width >= 80rem) {
921
- padding: calc(var(--komc-spacing) * 10);
1006
+ .komc\:data-\[state\=closed\]\:scale-95 {
1007
+ &[data-state="closed"] {
1008
+ --tw-scale-x: 95%;
1009
+ --tw-scale-y: 95%;
1010
+ --tw-scale-z: 95%;
1011
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1012
+ }
1013
+ }
1014
+ .komc\:data-\[state\=closed\]\:opacity-0 {
1015
+ &[data-state="closed"] {
1016
+ opacity: 0%;
1017
+ }
1018
+ }
1019
+ .komc\:data-\[state\=open\]\:scale-100 {
1020
+ &[data-state="open"] {
1021
+ --tw-scale-x: 100%;
1022
+ --tw-scale-y: 100%;
1023
+ --tw-scale-z: 100%;
1024
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1025
+ }
1026
+ }
1027
+ .komc\:data-\[state\=open\]\:opacity-100 {
1028
+ &[data-state="open"] {
1029
+ opacity: 100%;
922
1030
  }
923
1031
  }
924
1032
  .komc\:\[\&_svg\]\:transition-colors {
@@ -1003,127 +1111,155 @@
1003
1111
  inherits: false;
1004
1112
  initial-value: solid;
1005
1113
  }
1006
- @property --tw-blur {
1114
+ @property --tw-font-weight {
1007
1115
  syntax: "*";
1008
1116
  inherits: false;
1009
1117
  }
1010
- @property --tw-brightness {
1118
+ @property --tw-shadow {
1011
1119
  syntax: "*";
1012
1120
  inherits: false;
1121
+ initial-value: 0 0 #0000;
1013
1122
  }
1014
- @property --tw-contrast {
1123
+ @property --tw-shadow-color {
1015
1124
  syntax: "*";
1016
1125
  inherits: false;
1017
1126
  }
1018
- @property --tw-grayscale {
1127
+ @property --tw-shadow-alpha {
1128
+ syntax: "<percentage>";
1129
+ inherits: false;
1130
+ initial-value: 100%;
1131
+ }
1132
+ @property --tw-inset-shadow {
1019
1133
  syntax: "*";
1020
1134
  inherits: false;
1135
+ initial-value: 0 0 #0000;
1021
1136
  }
1022
- @property --tw-hue-rotate {
1137
+ @property --tw-inset-shadow-color {
1023
1138
  syntax: "*";
1024
1139
  inherits: false;
1025
1140
  }
1026
- @property --tw-invert {
1141
+ @property --tw-inset-shadow-alpha {
1142
+ syntax: "<percentage>";
1143
+ inherits: false;
1144
+ initial-value: 100%;
1145
+ }
1146
+ @property --tw-ring-color {
1027
1147
  syntax: "*";
1028
1148
  inherits: false;
1029
1149
  }
1030
- @property --tw-opacity {
1150
+ @property --tw-ring-shadow {
1031
1151
  syntax: "*";
1032
1152
  inherits: false;
1153
+ initial-value: 0 0 #0000;
1033
1154
  }
1034
- @property --tw-saturate {
1155
+ @property --tw-inset-ring-color {
1035
1156
  syntax: "*";
1036
1157
  inherits: false;
1037
1158
  }
1038
- @property --tw-sepia {
1159
+ @property --tw-inset-ring-shadow {
1039
1160
  syntax: "*";
1040
1161
  inherits: false;
1162
+ initial-value: 0 0 #0000;
1041
1163
  }
1042
- @property --tw-drop-shadow {
1164
+ @property --tw-ring-inset {
1043
1165
  syntax: "*";
1044
1166
  inherits: false;
1045
1167
  }
1046
- @property --tw-drop-shadow-color {
1168
+ @property --tw-ring-offset-width {
1169
+ syntax: "<length>";
1170
+ inherits: false;
1171
+ initial-value: 0px;
1172
+ }
1173
+ @property --tw-ring-offset-color {
1047
1174
  syntax: "*";
1048
1175
  inherits: false;
1176
+ initial-value: #fff;
1049
1177
  }
1050
- @property --tw-drop-shadow-alpha {
1051
- syntax: "<percentage>";
1178
+ @property --tw-ring-offset-shadow {
1179
+ syntax: "*";
1052
1180
  inherits: false;
1053
- initial-value: 100%;
1181
+ initial-value: 0 0 #0000;
1054
1182
  }
1055
- @property --tw-drop-shadow-size {
1183
+ @property --tw-blur {
1056
1184
  syntax: "*";
1057
1185
  inherits: false;
1058
1186
  }
1059
- @property --tw-duration {
1187
+ @property --tw-brightness {
1060
1188
  syntax: "*";
1061
1189
  inherits: false;
1062
1190
  }
1063
- @property --tw-shadow {
1191
+ @property --tw-contrast {
1064
1192
  syntax: "*";
1065
1193
  inherits: false;
1066
- initial-value: 0 0 #0000;
1067
1194
  }
1068
- @property --tw-shadow-color {
1195
+ @property --tw-grayscale {
1069
1196
  syntax: "*";
1070
1197
  inherits: false;
1071
1198
  }
1072
- @property --tw-shadow-alpha {
1073
- syntax: "<percentage>";
1199
+ @property --tw-hue-rotate {
1200
+ syntax: "*";
1074
1201
  inherits: false;
1075
- initial-value: 100%;
1076
1202
  }
1077
- @property --tw-inset-shadow {
1203
+ @property --tw-invert {
1078
1204
  syntax: "*";
1079
1205
  inherits: false;
1080
- initial-value: 0 0 #0000;
1081
1206
  }
1082
- @property --tw-inset-shadow-color {
1207
+ @property --tw-opacity {
1083
1208
  syntax: "*";
1084
1209
  inherits: false;
1085
1210
  }
1086
- @property --tw-inset-shadow-alpha {
1087
- syntax: "<percentage>";
1211
+ @property --tw-saturate {
1212
+ syntax: "*";
1088
1213
  inherits: false;
1089
- initial-value: 100%;
1090
1214
  }
1091
- @property --tw-ring-color {
1215
+ @property --tw-sepia {
1092
1216
  syntax: "*";
1093
1217
  inherits: false;
1094
1218
  }
1095
- @property --tw-ring-shadow {
1219
+ @property --tw-drop-shadow {
1096
1220
  syntax: "*";
1097
1221
  inherits: false;
1098
- initial-value: 0 0 #0000;
1099
1222
  }
1100
- @property --tw-inset-ring-color {
1223
+ @property --tw-drop-shadow-color {
1101
1224
  syntax: "*";
1102
1225
  inherits: false;
1103
1226
  }
1104
- @property --tw-inset-ring-shadow {
1227
+ @property --tw-drop-shadow-alpha {
1228
+ syntax: "<percentage>";
1229
+ inherits: false;
1230
+ initial-value: 100%;
1231
+ }
1232
+ @property --tw-drop-shadow-size {
1105
1233
  syntax: "*";
1106
1234
  inherits: false;
1107
- initial-value: 0 0 #0000;
1108
1235
  }
1109
- @property --tw-ring-inset {
1236
+ @property --tw-duration {
1110
1237
  syntax: "*";
1111
1238
  inherits: false;
1112
1239
  }
1113
- @property --tw-ring-offset-width {
1114
- syntax: "<length>";
1240
+ @property --tw-ease {
1241
+ syntax: "*";
1115
1242
  inherits: false;
1116
- initial-value: 0px;
1117
1243
  }
1118
- @property --tw-ring-offset-color {
1244
+ @property --tw-content {
1119
1245
  syntax: "*";
1246
+ initial-value: "";
1120
1247
  inherits: false;
1121
- initial-value: #fff;
1122
1248
  }
1123
- @property --tw-ring-offset-shadow {
1249
+ @property --tw-scale-x {
1124
1250
  syntax: "*";
1125
1251
  inherits: false;
1126
- initial-value: 0 0 #0000;
1252
+ initial-value: 1;
1253
+ }
1254
+ @property --tw-scale-y {
1255
+ syntax: "*";
1256
+ inherits: false;
1257
+ initial-value: 1;
1258
+ }
1259
+ @property --tw-scale-z {
1260
+ syntax: "*";
1261
+ inherits: false;
1262
+ initial-value: 1;
1127
1263
  }
1128
1264
  @keyframes pulse {
1129
1265
  50% {
@@ -1137,20 +1273,7 @@
1137
1273
  --tw-translate-y: 0;
1138
1274
  --tw-translate-z: 0;
1139
1275
  --tw-border-style: solid;
1140
- --tw-blur: initial;
1141
- --tw-brightness: initial;
1142
- --tw-contrast: initial;
1143
- --tw-grayscale: initial;
1144
- --tw-hue-rotate: initial;
1145
- --tw-invert: initial;
1146
- --tw-opacity: initial;
1147
- --tw-saturate: initial;
1148
- --tw-sepia: initial;
1149
- --tw-drop-shadow: initial;
1150
- --tw-drop-shadow-color: initial;
1151
- --tw-drop-shadow-alpha: 100%;
1152
- --tw-drop-shadow-size: initial;
1153
- --tw-duration: initial;
1276
+ --tw-font-weight: initial;
1154
1277
  --tw-shadow: 0 0 #0000;
1155
1278
  --tw-shadow-color: initial;
1156
1279
  --tw-shadow-alpha: 100%;
@@ -1165,6 +1288,25 @@
1165
1288
  --tw-ring-offset-width: 0px;
1166
1289
  --tw-ring-offset-color: #fff;
1167
1290
  --tw-ring-offset-shadow: 0 0 #0000;
1291
+ --tw-blur: initial;
1292
+ --tw-brightness: initial;
1293
+ --tw-contrast: initial;
1294
+ --tw-grayscale: initial;
1295
+ --tw-hue-rotate: initial;
1296
+ --tw-invert: initial;
1297
+ --tw-opacity: initial;
1298
+ --tw-saturate: initial;
1299
+ --tw-sepia: initial;
1300
+ --tw-drop-shadow: initial;
1301
+ --tw-drop-shadow-color: initial;
1302
+ --tw-drop-shadow-alpha: 100%;
1303
+ --tw-drop-shadow-size: initial;
1304
+ --tw-duration: initial;
1305
+ --tw-ease: initial;
1306
+ --tw-content: "";
1307
+ --tw-scale-x: 1;
1308
+ --tw-scale-y: 1;
1309
+ --tw-scale-z: 1;
1168
1310
  }
1169
1311
  }
1170
1312
  }