@universe-platform/ui 0.1.0-beta.6 → 0.1.0-beta.8

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 (10) hide show
  1. package/dist/globals.css +244 -0
  2. package/dist/index.d.mts +33 -1
  3. package/dist/index.d.ts +33 -1
  4. package/dist/index.js +1748 -232
  5. package/dist/index.mjs +1741 -227
  6. package/dist/phone.d.mts +38 -0
  7. package/dist/phone.d.ts +38 -0
  8. package/dist/phone.js +90 -0
  9. package/dist/phone.mjs +59 -0
  10. package/package.json +6 -1
package/dist/globals.css CHANGED
@@ -19,6 +19,9 @@
19
19
  --color-emerald-50: oklch(97.9% 0.021 166.113);
20
20
  --color-emerald-100: oklch(95% 0.052 163.051);
21
21
  --color-emerald-200: oklch(90.5% 0.093 164.15);
22
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
23
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
24
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
22
25
  --color-emerald-600: oklch(59.6% 0.145 163.225);
23
26
  --color-emerald-700: oklch(50.8% 0.118 165.612);
24
27
  --color-emerald-800: oklch(43.2% 0.095 166.913);
@@ -36,6 +39,7 @@
36
39
  --color-blue-500: oklch(62.3% 0.214 259.815);
37
40
  --color-blue-600: oklch(54.6% 0.245 262.881);
38
41
  --color-blue-700: oklch(48.8% 0.243 264.376);
42
+ --color-blue-800: oklch(42.4% 0.199 265.638);
39
43
  --color-blue-900: oklch(37.9% 0.146 265.522);
40
44
  --color-indigo-50: oklch(96.2% 0.018 272.314);
41
45
  --color-indigo-100: oklch(93% 0.034 272.788);
@@ -44,6 +48,7 @@
44
48
  --color-rose-50: oklch(96.9% 0.015 12.422);
45
49
  --color-rose-100: oklch(94.1% 0.03 12.58);
46
50
  --color-rose-200: oklch(89.2% 0.058 10.001);
51
+ --color-rose-400: oklch(71.2% 0.194 13.428);
47
52
  --color-rose-500: oklch(64.5% 0.246 16.439);
48
53
  --color-rose-600: oklch(58.6% 0.253 17.585);
49
54
  --color-rose-700: oklch(51.4% 0.222 16.935);
@@ -62,6 +67,8 @@
62
67
  --spacing: 0.25rem;
63
68
  --container-xs: 20rem;
64
69
  --container-md: 28rem;
70
+ --container-lg: 32rem;
71
+ --container-xl: 36rem;
65
72
  --text-xs: 0.75rem;
66
73
  --text-xs--line-height: calc(1 / 0.75);
67
74
  --text-sm: 0.875rem;
@@ -79,6 +86,7 @@
79
86
  --animate-spin: spin 1s linear infinite;
80
87
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
81
88
  --blur-xs: 4px;
89
+ --blur-sm: 8px;
82
90
  --blur-md: 12px;
83
91
  --default-transition-duration: 150ms;
84
92
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -271,6 +279,9 @@
271
279
  .top-2\.5 {
272
280
  top: calc(var(--spacing) * 2.5);
273
281
  }
282
+ .top-\[1px\] {
283
+ top: 1px;
284
+ }
274
285
  .top-full {
275
286
  top: 100%;
276
287
  }
@@ -301,6 +312,9 @@
301
312
  .left-2 {
302
313
  left: calc(var(--spacing) * 2);
303
314
  }
315
+ .isolate {
316
+ isolation: isolate;
317
+ }
304
318
  .z-10 {
305
319
  z-index: 10;
306
320
  }
@@ -388,18 +402,27 @@
388
402
  .h-6 {
389
403
  height: calc(var(--spacing) * 6);
390
404
  }
405
+ .h-7 {
406
+ height: calc(var(--spacing) * 7);
407
+ }
391
408
  .h-8 {
392
409
  height: calc(var(--spacing) * 8);
393
410
  }
394
411
  .h-9 {
395
412
  height: calc(var(--spacing) * 9);
396
413
  }
414
+ .h-10 {
415
+ height: calc(var(--spacing) * 10);
416
+ }
397
417
  .h-\[18px\] {
398
418
  height: 18px;
399
419
  }
400
420
  .h-full {
401
421
  height: 100%;
402
422
  }
423
+ .max-h-48 {
424
+ max-height: calc(var(--spacing) * 48);
425
+ }
403
426
  .max-h-60 {
404
427
  max-height: calc(var(--spacing) * 60);
405
428
  }
@@ -442,6 +465,9 @@
442
465
  .w-10 {
443
466
  width: calc(var(--spacing) * 10);
444
467
  }
468
+ .w-14 {
469
+ width: calc(var(--spacing) * 14);
470
+ }
445
471
  .w-56 {
446
472
  width: calc(var(--spacing) * 56);
447
473
  }
@@ -454,9 +480,18 @@
454
480
  .w-px {
455
481
  width: 1px;
456
482
  }
483
+ .max-w-\[140px\] {
484
+ max-width: 140px;
485
+ }
486
+ .max-w-\[150px\] {
487
+ max-width: 150px;
488
+ }
457
489
  .max-w-\[calc\(100\%-24px\)\] {
458
490
  max-width: calc(100% - 24px);
459
491
  }
492
+ .max-w-lg {
493
+ max-width: var(--container-lg);
494
+ }
460
495
  .max-w-md {
461
496
  max-width: var(--container-md);
462
497
  }
@@ -472,12 +507,18 @@
472
507
  .min-w-\[50px\] {
473
508
  min-width: 50px;
474
509
  }
510
+ .min-w-\[140px\] {
511
+ min-width: 140px;
512
+ }
475
513
  .min-w-\[250px\] {
476
514
  min-width: 250px;
477
515
  }
478
516
  .flex-1 {
479
517
  flex: 1;
480
518
  }
519
+ .flex-shrink-0 {
520
+ flex-shrink: 0;
521
+ }
481
522
  .shrink-0 {
482
523
  flex-shrink: 0;
483
524
  }
@@ -497,6 +538,9 @@
497
538
  --tw-scale-z: 105%;
498
539
  scale: var(--tw-scale-x) var(--tw-scale-y);
499
540
  }
541
+ .rotate-90 {
542
+ rotate: 90deg;
543
+ }
500
544
  .rotate-180 {
501
545
  rotate: 180deg;
502
546
  }
@@ -509,6 +553,9 @@
509
553
  .cursor-col-resize {
510
554
  cursor: col-resize;
511
555
  }
556
+ .cursor-default {
557
+ cursor: default;
558
+ }
512
559
  .cursor-grab {
513
560
  cursor: grab;
514
561
  }
@@ -551,6 +598,9 @@
551
598
  .justify-start {
552
599
  justify-content: flex-start;
553
600
  }
601
+ .gap-0\.5 {
602
+ gap: calc(var(--spacing) * 0.5);
603
+ }
554
604
  .gap-1 {
555
605
  gap: var(--spacing);
556
606
  }
@@ -576,6 +626,13 @@
576
626
  margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
577
627
  }
578
628
  }
629
+ .space-y-3 {
630
+ :where(& > :not(:last-child)) {
631
+ --tw-space-y-reverse: 0;
632
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
633
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
634
+ }
635
+ }
579
636
  .truncate {
580
637
  overflow: hidden;
581
638
  text-overflow: ellipsis;
@@ -605,6 +662,10 @@
605
662
  .rounded-xl {
606
663
  border-radius: var(--radius-xl);
607
664
  }
665
+ .rounded-t-lg {
666
+ border-top-left-radius: var(--radius-lg);
667
+ border-top-right-radius: var(--radius-lg);
668
+ }
608
669
  .rounded-b-xl {
609
670
  border-bottom-right-radius: var(--radius-xl);
610
671
  border-bottom-left-radius: var(--radius-xl);
@@ -660,15 +721,24 @@
660
721
  .border-blue-300 {
661
722
  border-color: var(--color-blue-300);
662
723
  }
724
+ .border-blue-400 {
725
+ border-color: var(--color-blue-400);
726
+ }
663
727
  .border-emerald-200 {
664
728
  border-color: var(--color-emerald-200);
665
729
  }
730
+ .border-emerald-300 {
731
+ border-color: var(--color-emerald-300);
732
+ }
666
733
  .border-indigo-200 {
667
734
  border-color: var(--color-indigo-200);
668
735
  }
669
736
  .border-rose-200 {
670
737
  border-color: var(--color-rose-200);
671
738
  }
739
+ .border-rose-400 {
740
+ border-color: var(--color-rose-400);
741
+ }
672
742
  .border-sky-200 {
673
743
  border-color: var(--color-sky-200);
674
744
  }
@@ -687,9 +757,15 @@
687
757
  .border-slate-300 {
688
758
  border-color: var(--color-slate-300);
689
759
  }
760
+ .border-transparent {
761
+ border-color: transparent;
762
+ }
690
763
  .border-t-transparent {
691
764
  border-top-color: transparent;
692
765
  }
766
+ .border-b-transparent {
767
+ border-bottom-color: transparent;
768
+ }
693
769
  .bg-amber-50 {
694
770
  background-color: var(--color-amber-50);
695
771
  }
@@ -708,6 +784,12 @@
708
784
  .bg-emerald-50 {
709
785
  background-color: var(--color-emerald-50);
710
786
  }
787
+ .bg-emerald-50\/40 {
788
+ background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 40%, transparent);
789
+ @supports (color: color-mix(in lab, red, red)) {
790
+ background-color: color-mix(in oklab, var(--color-emerald-50) 40%, transparent);
791
+ }
792
+ }
711
793
  .bg-emerald-100 {
712
794
  background-color: var(--color-emerald-100);
713
795
  }
@@ -720,6 +802,12 @@
720
802
  .bg-rose-50 {
721
803
  background-color: var(--color-rose-50);
722
804
  }
805
+ .bg-rose-50\/20 {
806
+ background-color: color-mix(in srgb, oklch(96.9% 0.015 12.422) 20%, transparent);
807
+ @supports (color: color-mix(in lab, red, red)) {
808
+ background-color: color-mix(in oklab, var(--color-rose-50) 20%, transparent);
809
+ }
810
+ }
723
811
  .bg-rose-100 {
724
812
  background-color: var(--color-rose-100);
725
813
  }
@@ -732,9 +820,21 @@
732
820
  .bg-slate-50 {
733
821
  background-color: var(--color-slate-50);
734
822
  }
823
+ .bg-slate-50\/50 {
824
+ background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
825
+ @supports (color: color-mix(in lab, red, red)) {
826
+ background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
827
+ }
828
+ }
735
829
  .bg-slate-100 {
736
830
  background-color: var(--color-slate-100);
737
831
  }
832
+ .bg-slate-100\/50 {
833
+ background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent);
834
+ @supports (color: color-mix(in lab, red, red)) {
835
+ background-color: color-mix(in oklab, var(--color-slate-100) 50%, transparent);
836
+ }
837
+ }
738
838
  .bg-slate-100\/80 {
739
839
  background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 80%, transparent);
740
840
  @supports (color: color-mix(in lab, red, red)) {
@@ -747,6 +847,12 @@
747
847
  .bg-slate-300 {
748
848
  background-color: var(--color-slate-300);
749
849
  }
850
+ .bg-slate-900\/60 {
851
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
852
+ @supports (color: color-mix(in lab, red, red)) {
853
+ background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
854
+ }
855
+ }
750
856
  .bg-transparent {
751
857
  background-color: transparent;
752
858
  }
@@ -792,6 +898,9 @@
792
898
  .p-4 {
793
899
  padding: calc(var(--spacing) * 4);
794
900
  }
901
+ .p-5 {
902
+ padding: calc(var(--spacing) * 5);
903
+ }
795
904
  .px-1 {
796
905
  padding-inline: var(--spacing);
797
906
  }
@@ -819,21 +928,36 @@
819
928
  .py-1\.5 {
820
929
  padding-block: calc(var(--spacing) * 1.5);
821
930
  }
931
+ .py-2 {
932
+ padding-block: calc(var(--spacing) * 2);
933
+ }
822
934
  .py-2\.5 {
823
935
  padding-block: calc(var(--spacing) * 2.5);
824
936
  }
825
937
  .py-3 {
826
938
  padding-block: calc(var(--spacing) * 3);
827
939
  }
940
+ .py-4 {
941
+ padding-block: calc(var(--spacing) * 4);
942
+ }
943
+ .py-6 {
944
+ padding-block: calc(var(--spacing) * 6);
945
+ }
828
946
  .py-12 {
829
947
  padding-block: calc(var(--spacing) * 12);
830
948
  }
949
+ .pt-2 {
950
+ padding-top: calc(var(--spacing) * 2);
951
+ }
831
952
  .pr-2 {
832
953
  padding-right: calc(var(--spacing) * 2);
833
954
  }
834
955
  .pr-9 {
835
956
  padding-right: calc(var(--spacing) * 9);
836
957
  }
958
+ .pb-1 {
959
+ padding-bottom: var(--spacing);
960
+ }
837
961
  .pb-2\.5 {
838
962
  padding-bottom: calc(var(--spacing) * 2.5);
839
963
  }
@@ -855,6 +979,10 @@
855
979
  .font-sans {
856
980
  font-family: var(--font-sans);
857
981
  }
982
+ .text-base {
983
+ font-size: var(--text-base);
984
+ line-height: var(--tw-leading, var(--text-base--line-height));
985
+ }
858
986
  .text-sm {
859
987
  font-size: var(--text-sm);
860
988
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -913,12 +1041,21 @@
913
1041
  .text-blue-700 {
914
1042
  color: var(--color-blue-700);
915
1043
  }
1044
+ .text-blue-800 {
1045
+ color: var(--color-blue-800);
1046
+ }
1047
+ .text-emerald-500 {
1048
+ color: var(--color-emerald-500);
1049
+ }
916
1050
  .text-emerald-600 {
917
1051
  color: var(--color-emerald-600);
918
1052
  }
919
1053
  .text-emerald-700 {
920
1054
  color: var(--color-emerald-700);
921
1055
  }
1056
+ .text-emerald-800 {
1057
+ color: var(--color-emerald-800);
1058
+ }
922
1059
  .text-emerald-900 {
923
1060
  color: var(--color-emerald-900);
924
1061
  }
@@ -976,6 +1113,9 @@
976
1113
  .opacity-0 {
977
1114
  opacity: 0%;
978
1115
  }
1116
+ .opacity-25 {
1117
+ opacity: 25%;
1118
+ }
979
1119
  .opacity-40 {
980
1120
  opacity: 40%;
981
1121
  }
@@ -988,6 +1128,10 @@
988
1128
  .opacity-100 {
989
1129
  opacity: 100%;
990
1130
  }
1131
+ .shadow {
1132
+ --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));
1133
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1134
+ }
991
1135
  .shadow-2xl {
992
1136
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
993
1137
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1016,12 +1160,23 @@
1016
1160
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1017
1161
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1018
1162
  }
1163
+ .ring-1 {
1164
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1165
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1166
+ }
1019
1167
  .shadow-teal-500\/20 {
1020
1168
  --tw-shadow-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
1021
1169
  @supports (color: color-mix(in lab, red, red)) {
1022
1170
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-teal-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
1023
1171
  }
1024
1172
  }
1173
+ .ring-rose-400 {
1174
+ --tw-ring-color: var(--color-rose-400);
1175
+ }
1176
+ .blur {
1177
+ --tw-blur: blur(8px);
1178
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1179
+ }
1025
1180
  .grayscale {
1026
1181
  --tw-grayscale: grayscale(100%);
1027
1182
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1031,6 +1186,11 @@
1031
1186
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1032
1187
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1033
1188
  }
1189
+ .backdrop-blur-sm {
1190
+ --tw-backdrop-blur: blur(var(--blur-sm));
1191
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1192
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1193
+ }
1034
1194
  .backdrop-blur-xs {
1035
1195
  --tw-backdrop-blur: blur(var(--blur-xs));
1036
1196
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1102,6 +1262,20 @@
1102
1262
  color: var(--color-blue-900);
1103
1263
  }
1104
1264
  }
1265
+ .hover\:border-emerald-400 {
1266
+ &:hover {
1267
+ @media (hover: hover) {
1268
+ border-color: var(--color-emerald-400);
1269
+ }
1270
+ }
1271
+ }
1272
+ .hover\:bg-blue-50 {
1273
+ &:hover {
1274
+ @media (hover: hover) {
1275
+ background-color: var(--color-blue-50);
1276
+ }
1277
+ }
1278
+ }
1105
1279
  .hover\:bg-blue-50\/30 {
1106
1280
  &:hover {
1107
1281
  @media (hover: hover) {
@@ -1119,6 +1293,27 @@
1119
1293
  }
1120
1294
  }
1121
1295
  }
1296
+ .hover\:bg-blue-700 {
1297
+ &:hover {
1298
+ @media (hover: hover) {
1299
+ background-color: var(--color-blue-700);
1300
+ }
1301
+ }
1302
+ }
1303
+ .hover\:bg-emerald-50 {
1304
+ &:hover {
1305
+ @media (hover: hover) {
1306
+ background-color: var(--color-emerald-50);
1307
+ }
1308
+ }
1309
+ }
1310
+ .hover\:bg-emerald-100 {
1311
+ &:hover {
1312
+ @media (hover: hover) {
1313
+ background-color: var(--color-emerald-100);
1314
+ }
1315
+ }
1316
+ }
1122
1317
  .hover\:bg-emerald-700 {
1123
1318
  &:hover {
1124
1319
  @media (hover: hover) {
@@ -1140,6 +1335,16 @@
1140
1335
  }
1141
1336
  }
1142
1337
  }
1338
+ .hover\:bg-slate-50\/80 {
1339
+ &:hover {
1340
+ @media (hover: hover) {
1341
+ background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 80%, transparent);
1342
+ @supports (color: color-mix(in lab, red, red)) {
1343
+ background-color: color-mix(in oklab, var(--color-slate-50) 80%, transparent);
1344
+ }
1345
+ }
1346
+ }
1347
+ }
1143
1348
  .hover\:bg-slate-100 {
1144
1349
  &:hover {
1145
1350
  @media (hover: hover) {
@@ -1154,6 +1359,16 @@
1154
1359
  }
1155
1360
  }
1156
1361
  }
1362
+ .hover\:bg-slate-200\/50 {
1363
+ &:hover {
1364
+ @media (hover: hover) {
1365
+ background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
1366
+ @supports (color: color-mix(in lab, red, red)) {
1367
+ background-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent);
1368
+ }
1369
+ }
1370
+ }
1371
+ }
1157
1372
  .hover\:bg-slate-200\/60 {
1158
1373
  &:hover {
1159
1374
  @media (hover: hover) {
@@ -1164,6 +1379,16 @@
1164
1379
  }
1165
1380
  }
1166
1381
  }
1382
+ .hover\:bg-slate-200\/70 {
1383
+ &:hover {
1384
+ @media (hover: hover) {
1385
+ background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent);
1386
+ @supports (color: color-mix(in lab, red, red)) {
1387
+ background-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent);
1388
+ }
1389
+ }
1390
+ }
1391
+ }
1167
1392
  .hover\:text-blue-500 {
1168
1393
  &:hover {
1169
1394
  @media (hover: hover) {
@@ -1178,6 +1403,13 @@
1178
1403
  }
1179
1404
  }
1180
1405
  }
1406
+ .hover\:text-emerald-600 {
1407
+ &:hover {
1408
+ @media (hover: hover) {
1409
+ color: var(--color-emerald-600);
1410
+ }
1411
+ }
1412
+ }
1181
1413
  .hover\:text-green-700 {
1182
1414
  &:hover {
1183
1415
  @media (hover: hover) {
@@ -1213,6 +1445,13 @@
1213
1445
  }
1214
1446
  }
1215
1447
  }
1448
+ .hover\:opacity-80 {
1449
+ &:hover {
1450
+ @media (hover: hover) {
1451
+ opacity: 80%;
1452
+ }
1453
+ }
1454
+ }
1216
1455
  .focus\:border-blue-500 {
1217
1456
  &:focus {
1218
1457
  border-color: var(--color-blue-500);
@@ -1314,6 +1553,11 @@
1314
1553
  width: calc(var(--spacing) * 64);
1315
1554
  }
1316
1555
  }
1556
+ .sm\:max-w-xl {
1557
+ @media (width >= 40rem) {
1558
+ max-width: var(--container-xl);
1559
+ }
1560
+ }
1317
1561
  .sm\:flex-row {
1318
1562
  @media (width >= 40rem) {
1319
1563
  flex-direction: row;
package/dist/index.d.mts CHANGED
@@ -4,6 +4,20 @@ import React, { ReactNode } from 'react';
4
4
 
5
5
  declare function cn(...inputs: ClassValue[]): string;
6
6
 
7
+ /**
8
+ * WhatsApp opener and phone formatting utilities.
9
+ */
10
+ /**
11
+ * Robust WhatsApp Opener (Desktop App with Web Fallback).
12
+ * Tries the direct protocol first (whatsapp://) and falls back to WhatsApp Web
13
+ * if the app is not installed (window didn't lose focus).
14
+ */
15
+ declare function openWhatsAppChat(phone: string, defaultCountryCode?: string): void;
16
+ /**
17
+ * Formats a phone number for local UI display (e.g. Israeli 05X-XXX-XXXX format).
18
+ */
19
+ declare function formatPhoneDisplay(phone: string): string;
20
+
7
21
  /**
8
22
  * Core definitions for Universe UI components.
9
23
  * These interfaces define the standard contract that all generic visual components
@@ -53,10 +67,27 @@ interface ColumnDef {
53
67
  isRequired?: boolean;
54
68
  isUnique?: boolean;
55
69
  referencedTableId?: string;
70
+ referencedTableName?: string;
56
71
  displayField?: string;
57
72
  currencySymbol?: string;
73
+ subTableDisplayFields?: string[];
74
+ contactMapping?: {
75
+ phoneCol?: string;
76
+ emailCol?: string;
77
+ nameParts?: Array<{
78
+ type: 'LOCAL' | 'PARENT';
79
+ parentTableId?: string;
80
+ columnId: string;
81
+ }>;
82
+ } | null;
58
83
  order?: number;
59
84
  isHidden?: boolean;
85
+ config?: {
86
+ enableWhatsApp?: boolean;
87
+ actionType?: string;
88
+ actionPhoneColumn?: string;
89
+ [key: string]: any;
90
+ } | null;
60
91
  }
61
92
  interface SchemaDef {
62
93
  columns?: ColumnDef[];
@@ -70,6 +101,7 @@ interface DriveFileValue {
70
101
  fileId: string;
71
102
  fileUrl: string;
72
103
  fileName: string;
104
+ url?: string;
73
105
  }
74
106
 
75
107
  interface TableConfig extends SchemaDef {
@@ -119,4 +151,4 @@ declare function ToastProvider({ children }: {
119
151
 
120
152
  declare function useToast(): ToastContextType;
121
153
 
122
- export { type BaseComponentProps, type ColumnDef, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, type DeleteRecordPayload, type DriveFileValue, type RecordData, type SchemaDef, TableBlock, type TableBlockProps, type TableConfig, type TableData, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, cn, useToast };
154
+ export { type BaseComponentProps, type ColumnDef, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, type DeleteRecordPayload, type DriveFileValue, type RecordData, type SchemaDef, TableBlock, type TableBlockProps, type TableConfig, type TableData, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, cn, formatPhoneDisplay, openWhatsAppChat, useToast };
package/dist/index.d.ts CHANGED
@@ -4,6 +4,20 @@ import React, { ReactNode } from 'react';
4
4
 
5
5
  declare function cn(...inputs: ClassValue[]): string;
6
6
 
7
+ /**
8
+ * WhatsApp opener and phone formatting utilities.
9
+ */
10
+ /**
11
+ * Robust WhatsApp Opener (Desktop App with Web Fallback).
12
+ * Tries the direct protocol first (whatsapp://) and falls back to WhatsApp Web
13
+ * if the app is not installed (window didn't lose focus).
14
+ */
15
+ declare function openWhatsAppChat(phone: string, defaultCountryCode?: string): void;
16
+ /**
17
+ * Formats a phone number for local UI display (e.g. Israeli 05X-XXX-XXXX format).
18
+ */
19
+ declare function formatPhoneDisplay(phone: string): string;
20
+
7
21
  /**
8
22
  * Core definitions for Universe UI components.
9
23
  * These interfaces define the standard contract that all generic visual components
@@ -53,10 +67,27 @@ interface ColumnDef {
53
67
  isRequired?: boolean;
54
68
  isUnique?: boolean;
55
69
  referencedTableId?: string;
70
+ referencedTableName?: string;
56
71
  displayField?: string;
57
72
  currencySymbol?: string;
73
+ subTableDisplayFields?: string[];
74
+ contactMapping?: {
75
+ phoneCol?: string;
76
+ emailCol?: string;
77
+ nameParts?: Array<{
78
+ type: 'LOCAL' | 'PARENT';
79
+ parentTableId?: string;
80
+ columnId: string;
81
+ }>;
82
+ } | null;
58
83
  order?: number;
59
84
  isHidden?: boolean;
85
+ config?: {
86
+ enableWhatsApp?: boolean;
87
+ actionType?: string;
88
+ actionPhoneColumn?: string;
89
+ [key: string]: any;
90
+ } | null;
60
91
  }
61
92
  interface SchemaDef {
62
93
  columns?: ColumnDef[];
@@ -70,6 +101,7 @@ interface DriveFileValue {
70
101
  fileId: string;
71
102
  fileUrl: string;
72
103
  fileName: string;
104
+ url?: string;
73
105
  }
74
106
 
75
107
  interface TableConfig extends SchemaDef {
@@ -119,4 +151,4 @@ declare function ToastProvider({ children }: {
119
151
 
120
152
  declare function useToast(): ToastContextType;
121
153
 
122
- export { type BaseComponentProps, type ColumnDef, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, type DeleteRecordPayload, type DriveFileValue, type RecordData, type SchemaDef, TableBlock, type TableBlockProps, type TableConfig, type TableData, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, cn, useToast };
154
+ export { type BaseComponentProps, type ColumnDef, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, type DeleteRecordPayload, type DriveFileValue, type RecordData, type SchemaDef, TableBlock, type TableBlockProps, type TableConfig, type TableData, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, cn, formatPhoneDisplay, openWhatsAppChat, useToast };