@mendylanda/ui 0.3.0-alpha.1 → 0.3.0-alpha.10

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 (55) hide show
  1. package/README.md +20 -3
  2. package/dist/class-names.js +1 -1
  3. package/dist/filters/filter-bar.d.ts +1 -1
  4. package/dist/filters/filter-bar.js +53 -12
  5. package/dist/filters/filter-menu-focus.d.ts +1 -1
  6. package/dist/filters/filter-menu-panel.d.ts +1 -1
  7. package/dist/filters/use-menu-placement.d.ts +1 -1
  8. package/dist/primitives/popover.d.ts +5 -0
  9. package/dist/primitives/popover.js +10 -0
  10. package/dist/styles.css +147 -17
  11. package/dist/styles.tailwind3.css +147 -17
  12. package/dist/table/clipboard.d.ts +1 -1
  13. package/dist/table/clipboard.js +35 -22
  14. package/dist/table/column-widths.d.ts +9 -0
  15. package/dist/table/column-widths.js +23 -0
  16. package/dist/table/columns.d.ts +6 -0
  17. package/dist/table/columns.js +4 -0
  18. package/dist/table/data-table.d.ts +3 -0
  19. package/dist/table/data-table.js +6 -3
  20. package/dist/table/index.d.ts +1 -0
  21. package/dist/table/index.js +1 -0
  22. package/dist/table/table-column-settings.d.ts +6 -0
  23. package/dist/table/table-column-settings.js +55 -0
  24. package/dist/table/table-controls.d.ts +1 -3
  25. package/dist/table/table-controls.js +4 -45
  26. package/dist/table/table-feedback.d.ts +5 -1
  27. package/dist/table/table-feedback.js +4 -3
  28. package/dist/table/table-filters.d.ts +8 -0
  29. package/dist/table/table-filters.js +9 -0
  30. package/dist/table/table-frame.d.ts +10 -0
  31. package/dist/table/table-frame.js +10 -0
  32. package/dist/table/table-layout.d.ts +1 -0
  33. package/dist/table/table-layout.js +27 -10
  34. package/dist/table/table-loading.d.ts +2 -1
  35. package/dist/table/table-loading.js +4 -3
  36. package/dist/table/table-parts.d.ts +20 -2
  37. package/dist/table/table-parts.js +91 -37
  38. package/dist/table/table-view.d.ts +19 -2
  39. package/dist/table/table-view.js +58 -19
  40. package/dist/table/use-column-window.d.ts +42 -0
  41. package/dist/table/use-column-window.js +65 -0
  42. package/dist/table/use-data-table.d.ts +2 -2
  43. package/dist/table/use-data-table.js +15 -2
  44. package/dist/table/use-fill-layout.d.ts +2 -0
  45. package/dist/table/use-fill-layout.js +67 -0
  46. package/dist/table/use-inline-row-selection.d.ts +10 -0
  47. package/dist/table/use-inline-row-selection.js +33 -0
  48. package/dist/table/use-stable-array.d.ts +3 -0
  49. package/dist/table/use-stable-array.js +16 -0
  50. package/dist/table/use-table-interaction.d.ts +1 -1
  51. package/dist/table/use-table-interaction.js +32 -3
  52. package/dist/table/use-table-results.d.ts +8 -0
  53. package/dist/table/use-table-results.js +63 -0
  54. package/dist/utils.js +13 -2
  55. package/package.json +8 -7
package/dist/styles.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --font-weight-semibold: 600;
17
17
  --tracking-widest: 0.1em;
18
18
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
19
+ --animate-spin: mendy-spin 1s linear infinite;
19
20
  --animate-pulse: mendy-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
20
21
  --default-transition-duration: 150ms;
21
22
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -102,6 +103,9 @@
102
103
  .mui-014aadadffad:where([data-mendy-ui], [data-mendy-ui] *) {
103
104
  isolation: isolate;
104
105
  }
106
+ .mui-d7efd1b0b0f9:where([data-mendy-ui], [data-mendy-ui] *) {
107
+ z-index: 1;
108
+ }
105
109
  .mui-418e44ad4f9e:where([data-mendy-ui], [data-mendy-ui] *) {
106
110
  z-index: 10;
107
111
  }
@@ -153,6 +157,12 @@
153
157
  .mui-8cc46fa87f41:where([data-mendy-ui], [data-mendy-ui] *) {
154
158
  margin-inline-end: calc(var(--spacing) * -1.5);
155
159
  }
160
+ .mui-477d8f4dfce9:where([data-mendy-ui], [data-mendy-ui] *) {
161
+ margin-inline-end: calc(var(--spacing) * 1);
162
+ }
163
+ .mui-68d781378b03:where([data-mendy-ui], [data-mendy-ui] *) {
164
+ margin-inline-end: calc(var(--spacing) * 2);
165
+ }
156
166
  .mui-f28fea81a5cd:where([data-mendy-ui], [data-mendy-ui] *) {
157
167
  margin-top: calc(var(--spacing) * 2);
158
168
  }
@@ -209,6 +219,10 @@
209
219
  width: calc(var(--spacing) * 4);
210
220
  height: calc(var(--spacing) * 4);
211
221
  }
222
+ .mui-2bd43fb57913:where([data-mendy-ui], [data-mendy-ui] *) {
223
+ width: calc(var(--spacing) * 5);
224
+ height: calc(var(--spacing) * 5);
225
+ }
212
226
  .mui-0712570dcc9f:where([data-mendy-ui], [data-mendy-ui] *) {
213
227
  width: calc(var(--spacing) * 6);
214
228
  height: calc(var(--spacing) * 6);
@@ -248,6 +262,9 @@
248
262
  .mui-ce1945804664:where([data-mendy-ui], [data-mendy-ui] *) {
249
263
  height: calc(var(--spacing) * 6);
250
264
  }
265
+ .mui-c8e50836f8a1:where([data-mendy-ui], [data-mendy-ui] *) {
266
+ height: calc(var(--spacing) * 7);
267
+ }
251
268
  .mui-1fb07b38c63b:where([data-mendy-ui], [data-mendy-ui] *) {
252
269
  height: calc(var(--spacing) * 8);
253
270
  }
@@ -272,8 +289,11 @@
272
289
  .mui-1f061e70178e:where([data-mendy-ui], [data-mendy-ui] *) {
273
290
  max-height: var(--radix-dropdown-menu-content-available-height);
274
291
  }
275
- .mui-b057efba3283:where([data-mendy-ui], [data-mendy-ui] *) {
276
- max-height: calc(var(--spacing) * 96);
292
+ .mui-4d3f1304ebb2:where([data-mendy-ui], [data-mendy-ui] *) {
293
+ max-height: var(--radix-popover-content-available-height);
294
+ }
295
+ .mui-da0beef015c9:where([data-mendy-ui], [data-mendy-ui] *) {
296
+ max-height: 400px;
277
297
  }
278
298
  .mui-80baa5d03af7:where([data-mendy-ui], [data-mendy-ui] *) {
279
299
  max-height: calc(var(--filter-menu-height) - 2px);
@@ -287,6 +307,9 @@
287
307
  .mui-dcd942c18ddc:where([data-mendy-ui], [data-mendy-ui] *) {
288
308
  max-height: var(--radix-dropdown-menu-content-available-height);
289
309
  }
310
+ .mui-7bd696ca6be3:where([data-mendy-ui], [data-mendy-ui] *) {
311
+ max-height: 100%;
312
+ }
290
313
  .mui-410da8dfa8ac:where([data-mendy-ui], [data-mendy-ui] *) {
291
314
  min-height: calc(var(--spacing) * 0);
292
315
  }
@@ -314,12 +337,12 @@
314
337
  .mui-4ac4ec8dfbce:where([data-mendy-ui], [data-mendy-ui] *) {
315
338
  width: calc(var(--spacing) * 40);
316
339
  }
317
- .mui-72b37c1a040d:where([data-mendy-ui], [data-mendy-ui] *) {
318
- width: calc(var(--spacing) * 64);
319
- }
320
340
  .mui-37535002f0f7:where([data-mendy-ui], [data-mendy-ui] *) {
321
341
  width: calc(var(--spacing) * 72);
322
342
  }
343
+ .mui-a4cce7869436:where([data-mendy-ui], [data-mendy-ui] *) {
344
+ width: 300px;
345
+ }
323
346
  .mui-fc6a57ff7553:where([data-mendy-ui], [data-mendy-ui] *) {
324
347
  width: var(--mendy-filter-editor-width,19rem);
325
348
  }
@@ -365,6 +388,9 @@
365
388
  .mui-27ead27a81df:where([data-mendy-ui], [data-mendy-ui] *) {
366
389
  flex-shrink: 0;
367
390
  }
391
+ .mui-adca5146416e:where([data-mendy-ui], [data-mendy-ui] *) {
392
+ flex-grow: 1;
393
+ }
368
394
  .mui-215061302c50:where([data-mendy-ui], [data-mendy-ui] *) {
369
395
  border-collapse: collapse;
370
396
  }
@@ -375,6 +401,12 @@
375
401
  --mendy-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
376
402
  translate: var(--mendy-tw-translate-x) var(--mendy-tw-translate-y);
377
403
  }
404
+ .mui-4e3f08588318:where([data-mendy-ui], [data-mendy-ui] *) {
405
+ rotate: calc(45deg * -1);
406
+ }
407
+ .mui-c80411b7591f:where([data-mendy-ui], [data-mendy-ui] *) {
408
+ rotate: 45deg;
409
+ }
378
410
  .mui-aa214ea38326:where([data-mendy-ui], [data-mendy-ui] *) {
379
411
  transform: var(--mendy-tw-rotate-x,) var(--mendy-tw-rotate-y,) var(--mendy-tw-rotate-z,) var(--mendy-tw-skew-x,) var(--mendy-tw-skew-y,);
380
412
  }
@@ -384,12 +416,21 @@
384
416
  .mui-7b3cd77eb999:where([data-mendy-ui], [data-mendy-ui] *) {
385
417
  animation: var(--animate-pulse);
386
418
  }
419
+ .mui-2c14b55d77e6:where([data-mendy-ui], [data-mendy-ui] *) {
420
+ animation: var(--animate-spin);
421
+ }
387
422
  .mui-2194d094b585:where([data-mendy-ui], [data-mendy-ui] *) {
388
423
  cursor: col-resize;
389
424
  }
390
425
  .mui-d343f41ba73e:where([data-mendy-ui], [data-mendy-ui] *) {
391
426
  cursor: default;
392
427
  }
428
+ .mui-f2e47d9c52ad:where([data-mendy-ui], [data-mendy-ui] *) {
429
+ cursor: grab;
430
+ }
431
+ .mui-d2fa8848968d:where([data-mendy-ui], [data-mendy-ui] *) {
432
+ cursor: pointer;
433
+ }
393
434
  .mui-739a9a000791:where([data-mendy-ui], [data-mendy-ui] *) {
394
435
  touch-action: none;
395
436
  }
@@ -551,6 +592,9 @@
551
592
  border-color: color-mix(in oklab, var(--muted-foreground, #737373) 50%, transparent);
552
593
  }
553
594
  }
595
+ .mui-515f9fdc6db7:where([data-mendy-ui], [data-mendy-ui] *) {
596
+ border-color: var(--primary, #171717);
597
+ }
554
598
  .mui-292affc1f780:where([data-mendy-ui], [data-mendy-ui] *) {
555
599
  background-color: var(--accent, #f5f5f5);
556
600
  }
@@ -569,6 +613,9 @@
569
613
  .mui-047624ec0c39:where([data-mendy-ui], [data-mendy-ui] *) {
570
614
  background-color: var(--color-green-100);
571
615
  }
616
+ .mui-6ba846e1630e:where([data-mendy-ui], [data-mendy-ui] *) {
617
+ background-color: inherit;
618
+ }
572
619
  .mui-87ecb59f2d2d:where([data-mendy-ui], [data-mendy-ui] *) {
573
620
  background-color: var(--muted, #f5f5f5);
574
621
  }
@@ -638,6 +685,12 @@
638
685
  .mui-b5edc3ea7c91:where([data-mendy-ui], [data-mendy-ui] *) {
639
686
  padding-block: calc(var(--spacing) * 2);
640
687
  }
688
+ .mui-d3cea061f2f3:where([data-mendy-ui], [data-mendy-ui] *) {
689
+ padding-block: calc(var(--spacing) * 3);
690
+ }
691
+ .mui-96b92a971c95:where([data-mendy-ui], [data-mendy-ui] *) {
692
+ padding-block: calc(var(--spacing) * 5);
693
+ }
641
694
  .mui-078d945937da:where([data-mendy-ui], [data-mendy-ui] *) {
642
695
  padding-inline-start: calc(var(--spacing) * 8);
643
696
  }
@@ -778,6 +831,13 @@
778
831
  --mendy-tw-shadow: 0 1px 2px 0 var(--mendy-tw-shadow-color, rgb(0 0 0 / 0.05));
779
832
  box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
780
833
  }
834
+ .mui-853be6c11609:where([data-mendy-ui], [data-mendy-ui] *) {
835
+ --mendy-tw-ring-shadow: var(--mendy-tw-ring-inset,) 0 0 0 calc(2px + var(--mendy-tw-ring-offset-width)) var(--mendy-tw-ring-color, currentcolor);
836
+ box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
837
+ }
838
+ .mui-fd9d0b696aac:where([data-mendy-ui], [data-mendy-ui] *) {
839
+ --mendy-tw-ring-color: var(--primary, #171717);
840
+ }
781
841
  .mui-59edd3d33673:where([data-mendy-ui], [data-mendy-ui] *) {
782
842
  --mendy-tw-outline-style: none;
783
843
  outline-style: none;
@@ -790,6 +850,10 @@
790
850
  outline-style: var(--mendy-tw-outline-style);
791
851
  outline-width: 1px;
792
852
  }
853
+ .mui-e42932b7a79c:where([data-mendy-ui], [data-mendy-ui] *) {
854
+ --mendy-tw-blur: blur(8px);
855
+ filter: var(--mendy-tw-blur,) var(--mendy-tw-brightness,) var(--mendy-tw-contrast,) var(--mendy-tw-grayscale,) var(--mendy-tw-hue-rotate,) var(--mendy-tw-invert,) var(--mendy-tw-saturate,) var(--mendy-tw-sepia,) var(--mendy-tw-drop-shadow,);
856
+ }
793
857
  .mui-e0122edc668b:where([data-mendy-ui], [data-mendy-ui] *) {
794
858
  --mendy-tw-drop-shadow-size: drop-shadow(0 3px 3px var(--mendy-tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
795
859
  --mendy-tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
@@ -854,6 +918,13 @@
854
918
  }
855
919
  }
856
920
  }
921
+ .mui-34a57d4b4103:where([data-mendy-ui], [data-mendy-ui] *) {
922
+ &:is(:where(.mui-ad936fcbed63):hover *) {
923
+ @media (hover: hover) {
924
+ opacity: 50%;
925
+ }
926
+ }
927
+ }
857
928
  .mui-9af9a4182597:where([data-mendy-ui], [data-mendy-ui] *) {
858
929
  &:is(:where(.mui-ad936fcbed63)[data-disabled="true"] *) {
859
930
  pointer-events: none;
@@ -939,12 +1010,6 @@
939
1010
  border-inline-start-width: 0px;
940
1011
  }
941
1012
  }
942
- .mui-beeef6663906:where([data-mendy-ui], [data-mendy-ui] *) {
943
- &:last-child {
944
- border-inline-end-style: var(--mendy-tw-border-style);
945
- border-inline-end-width: 0px;
946
- }
947
- }
948
1013
  .mui-37ad15a95595:where([data-mendy-ui], [data-mendy-ui] *) {
949
1014
  &:hover {
950
1015
  @media (hover: hover) {
@@ -952,22 +1017,22 @@
952
1017
  }
953
1018
  }
954
1019
  }
955
- .mui-63b29dace366:where([data-mendy-ui], [data-mendy-ui] *) {
1020
+ .mui-bb6a4b3e902d:where([data-mendy-ui], [data-mendy-ui] *) {
956
1021
  &:hover {
957
1022
  @media (hover: hover) {
958
- background-color: var(--accent, #f5f5f5);
1023
+ background-color: var(--destructive, #dc2626);
959
1024
  @supports (color: color-mix(in lab, red, red)) {
960
- background-color: color-mix(in oklab, var(--accent, #f5f5f5) 50%, transparent);
1025
+ background-color: color-mix(in oklab, var(--destructive, #dc2626) 90%, transparent);
961
1026
  }
962
1027
  }
963
1028
  }
964
1029
  }
965
- .mui-bb6a4b3e902d:where([data-mendy-ui], [data-mendy-ui] *) {
1030
+ .mui-5cbdd1b32f1a:where([data-mendy-ui], [data-mendy-ui] *) {
966
1031
  &:hover {
967
1032
  @media (hover: hover) {
968
- background-color: var(--destructive, #dc2626);
1033
+ background-color: var(--muted, #f5f5f5);
969
1034
  @supports (color: color-mix(in lab, red, red)) {
970
- background-color: color-mix(in oklab, var(--destructive, #dc2626) 90%, transparent);
1035
+ background-color: color-mix(in oklab, var(--muted, #f5f5f5) 50%, transparent);
971
1036
  }
972
1037
  }
973
1038
  }
@@ -1060,6 +1125,11 @@
1060
1125
  }
1061
1126
  }
1062
1127
  }
1128
+ .mui-b8b1747fa763:where([data-mendy-ui], [data-mendy-ui] *) {
1129
+ &:focus-visible {
1130
+ opacity: 100%;
1131
+ }
1132
+ }
1063
1133
  .mui-39be5a15b766:where([data-mendy-ui], [data-mendy-ui] *) {
1064
1134
  &:focus-visible {
1065
1135
  --mendy-tw-ring-shadow: var(--mendy-tw-ring-inset,) 0 0 0 calc(1px + var(--mendy-tw-ring-offset-width)) var(--mendy-tw-ring-color, currentcolor);
@@ -1129,6 +1199,11 @@
1129
1199
  --mendy-tw-ring-inset: inset;
1130
1200
  }
1131
1201
  }
1202
+ .mui-71998ea7a2d0:where([data-mendy-ui], [data-mendy-ui] *) {
1203
+ &:active {
1204
+ cursor: grabbing;
1205
+ }
1206
+ }
1132
1207
  .mui-8d3c1014b967:where([data-mendy-ui], [data-mendy-ui] *) {
1133
1208
  &:disabled {
1134
1209
  pointer-events: none;
@@ -1139,11 +1214,25 @@
1139
1214
  cursor: not-allowed;
1140
1215
  }
1141
1216
  }
1217
+ .mui-d2e4a66bb430:where([data-mendy-ui], [data-mendy-ui] *) {
1218
+ &:disabled {
1219
+ opacity: 0% !important;
1220
+ }
1221
+ }
1142
1222
  .mui-4600b77303d6:where([data-mendy-ui], [data-mendy-ui] *) {
1143
1223
  &:disabled {
1144
1224
  opacity: 50%;
1145
1225
  }
1146
1226
  }
1227
+ .mui-978f422895e5:where([data-mendy-ui], [data-mendy-ui] *) {
1228
+ &:is(:where(.mui-ad936fcbed63):hover *) {
1229
+ @media (hover: hover) {
1230
+ &:disabled {
1231
+ opacity: 50% !important;
1232
+ }
1233
+ }
1234
+ }
1235
+ }
1147
1236
  .mui-7eb7501a2ef0:where([data-mendy-ui], [data-mendy-ui] *) {
1148
1237
  &:has(*:focus) {
1149
1238
  border-color: var(--ring, #737373);
@@ -1356,6 +1445,18 @@
1356
1445
  color: var(--primary-foreground, #fafafa);
1357
1446
  }
1358
1447
  }
1448
+ .mui-d0c2ae8419e1:where([data-mendy-ui], [data-mendy-ui] *) {
1449
+ &[data-state="checked"] {
1450
+ opacity: 100%;
1451
+ }
1452
+ }
1453
+ .mui-9c02852bfc55:where([data-mendy-ui], [data-mendy-ui] *) {
1454
+ &[data-state="checked"] {
1455
+ &:disabled {
1456
+ opacity: 100% !important;
1457
+ }
1458
+ }
1459
+ }
1359
1460
  .mui-37d8a3f448ff:where([data-mendy-ui], [data-mendy-ui] *) {
1360
1461
  &[data-state="closed"] {
1361
1462
  animation: none !important;
@@ -1378,6 +1479,18 @@
1378
1479
  --mendy-tw-exit-scale: .95;
1379
1480
  }
1380
1481
  }
1482
+ .mui-e2ed522ed9b7:where([data-mendy-ui], [data-mendy-ui] *) {
1483
+ &[data-state="indeterminate"] {
1484
+ opacity: 100%;
1485
+ }
1486
+ }
1487
+ .mui-cbd3aed703f7:where([data-mendy-ui], [data-mendy-ui] *) {
1488
+ &[data-state="indeterminate"] {
1489
+ &:disabled {
1490
+ opacity: 100% !important;
1491
+ }
1492
+ }
1493
+ }
1381
1494
  .mui-bae1e782f277:where([data-mendy-ui], [data-mendy-ui] *) {
1382
1495
  &[data-state="open"] {
1383
1496
  animation: mendy-enter var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
@@ -1704,6 +1817,18 @@
1704
1817
  color: var(--muted-foreground, #737373);
1705
1818
  }
1706
1819
  }
1820
+ .mui-fa8e1efead3c:where([data-mendy-ui], [data-mendy-ui] *) {
1821
+ @media (hover:none) {
1822
+ opacity: 100%;
1823
+ }
1824
+ }
1825
+ .mui-eaedb91f8774:where([data-mendy-ui], [data-mendy-ui] *) {
1826
+ @media (hover:none) {
1827
+ &:disabled {
1828
+ opacity: 100% !important;
1829
+ }
1830
+ }
1831
+ }
1707
1832
  .mui-b8293c91796c:where([data-mendy-ui], [data-mendy-ui] *) {
1708
1833
  [data-slot=card-content] & {
1709
1834
  background-color: transparent;
@@ -2031,6 +2156,11 @@
2031
2156
  syntax: "*";
2032
2157
  inherits: false;
2033
2158
  }
2159
+ @keyframes mendy-spin {
2160
+ to {
2161
+ transform: rotate(360deg);
2162
+ }
2163
+ }
2034
2164
  @keyframes mendy-pulse {
2035
2165
  50% {
2036
2166
  opacity: 0.5;