@universe-platform/ui 0.1.0-beta.7 → 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 +136 -3
  2. package/dist/index.d.mts +21 -2
  3. package/dist/index.d.ts +21 -2
  4. package/dist/index.js +768 -103
  5. package/dist/index.mjs +763 -100
  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,8 @@
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);
22
24
  --color-emerald-500: oklch(69.6% 0.17 162.48);
23
25
  --color-emerald-600: oklch(59.6% 0.145 163.225);
24
26
  --color-emerald-700: oklch(50.8% 0.118 165.612);
@@ -37,6 +39,7 @@
37
39
  --color-blue-500: oklch(62.3% 0.214 259.815);
38
40
  --color-blue-600: oklch(54.6% 0.245 262.881);
39
41
  --color-blue-700: oklch(48.8% 0.243 264.376);
42
+ --color-blue-800: oklch(42.4% 0.199 265.638);
40
43
  --color-blue-900: oklch(37.9% 0.146 265.522);
41
44
  --color-indigo-50: oklch(96.2% 0.018 272.314);
42
45
  --color-indigo-100: oklch(93% 0.034 272.788);
@@ -45,6 +48,7 @@
45
48
  --color-rose-50: oklch(96.9% 0.015 12.422);
46
49
  --color-rose-100: oklch(94.1% 0.03 12.58);
47
50
  --color-rose-200: oklch(89.2% 0.058 10.001);
51
+ --color-rose-400: oklch(71.2% 0.194 13.428);
48
52
  --color-rose-500: oklch(64.5% 0.246 16.439);
49
53
  --color-rose-600: oklch(58.6% 0.253 17.585);
50
54
  --color-rose-700: oklch(51.4% 0.222 16.935);
@@ -63,6 +67,8 @@
63
67
  --spacing: 0.25rem;
64
68
  --container-xs: 20rem;
65
69
  --container-md: 28rem;
70
+ --container-lg: 32rem;
71
+ --container-xl: 36rem;
66
72
  --text-xs: 0.75rem;
67
73
  --text-xs--line-height: calc(1 / 0.75);
68
74
  --text-sm: 0.875rem;
@@ -80,6 +86,7 @@
80
86
  --animate-spin: spin 1s linear infinite;
81
87
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
82
88
  --blur-xs: 4px;
89
+ --blur-sm: 8px;
83
90
  --blur-md: 12px;
84
91
  --default-transition-duration: 150ms;
85
92
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -365,9 +372,6 @@
365
372
  .hidden {
366
373
  display: none;
367
374
  }
368
- .inline {
369
- display: inline;
370
- }
371
375
  .inline-block {
372
376
  display: inline-block;
373
377
  }
@@ -407,6 +411,9 @@
407
411
  .h-9 {
408
412
  height: calc(var(--spacing) * 9);
409
413
  }
414
+ .h-10 {
415
+ height: calc(var(--spacing) * 10);
416
+ }
410
417
  .h-\[18px\] {
411
418
  height: 18px;
412
419
  }
@@ -476,9 +483,15 @@
476
483
  .max-w-\[140px\] {
477
484
  max-width: 140px;
478
485
  }
486
+ .max-w-\[150px\] {
487
+ max-width: 150px;
488
+ }
479
489
  .max-w-\[calc\(100\%-24px\)\] {
480
490
  max-width: calc(100% - 24px);
481
491
  }
492
+ .max-w-lg {
493
+ max-width: var(--container-lg);
494
+ }
482
495
  .max-w-md {
483
496
  max-width: var(--container-md);
484
497
  }
@@ -494,12 +507,18 @@
494
507
  .min-w-\[50px\] {
495
508
  min-width: 50px;
496
509
  }
510
+ .min-w-\[140px\] {
511
+ min-width: 140px;
512
+ }
497
513
  .min-w-\[250px\] {
498
514
  min-width: 250px;
499
515
  }
500
516
  .flex-1 {
501
517
  flex: 1;
502
518
  }
519
+ .flex-shrink-0 {
520
+ flex-shrink: 0;
521
+ }
503
522
  .shrink-0 {
504
523
  flex-shrink: 0;
505
524
  }
@@ -534,6 +553,9 @@
534
553
  .cursor-col-resize {
535
554
  cursor: col-resize;
536
555
  }
556
+ .cursor-default {
557
+ cursor: default;
558
+ }
537
559
  .cursor-grab {
538
560
  cursor: grab;
539
561
  }
@@ -604,6 +626,13 @@
604
626
  margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
605
627
  }
606
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
+ }
607
636
  .truncate {
608
637
  overflow: hidden;
609
638
  text-overflow: ellipsis;
@@ -698,12 +727,18 @@
698
727
  .border-emerald-200 {
699
728
  border-color: var(--color-emerald-200);
700
729
  }
730
+ .border-emerald-300 {
731
+ border-color: var(--color-emerald-300);
732
+ }
701
733
  .border-indigo-200 {
702
734
  border-color: var(--color-indigo-200);
703
735
  }
704
736
  .border-rose-200 {
705
737
  border-color: var(--color-rose-200);
706
738
  }
739
+ .border-rose-400 {
740
+ border-color: var(--color-rose-400);
741
+ }
707
742
  .border-sky-200 {
708
743
  border-color: var(--color-sky-200);
709
744
  }
@@ -767,6 +802,12 @@
767
802
  .bg-rose-50 {
768
803
  background-color: var(--color-rose-50);
769
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
+ }
770
811
  .bg-rose-100 {
771
812
  background-color: var(--color-rose-100);
772
813
  }
@@ -806,6 +847,12 @@
806
847
  .bg-slate-300 {
807
848
  background-color: var(--color-slate-300);
808
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
+ }
809
856
  .bg-transparent {
810
857
  background-color: transparent;
811
858
  }
@@ -851,6 +898,9 @@
851
898
  .p-4 {
852
899
  padding: calc(var(--spacing) * 4);
853
900
  }
901
+ .p-5 {
902
+ padding: calc(var(--spacing) * 5);
903
+ }
854
904
  .px-1 {
855
905
  padding-inline: var(--spacing);
856
906
  }
@@ -929,6 +979,10 @@
929
979
  .font-sans {
930
980
  font-family: var(--font-sans);
931
981
  }
982
+ .text-base {
983
+ font-size: var(--text-base);
984
+ line-height: var(--tw-leading, var(--text-base--line-height));
985
+ }
932
986
  .text-sm {
933
987
  font-size: var(--text-sm);
934
988
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -987,6 +1041,9 @@
987
1041
  .text-blue-700 {
988
1042
  color: var(--color-blue-700);
989
1043
  }
1044
+ .text-blue-800 {
1045
+ color: var(--color-blue-800);
1046
+ }
990
1047
  .text-emerald-500 {
991
1048
  color: var(--color-emerald-500);
992
1049
  }
@@ -996,6 +1053,9 @@
996
1053
  .text-emerald-700 {
997
1054
  color: var(--color-emerald-700);
998
1055
  }
1056
+ .text-emerald-800 {
1057
+ color: var(--color-emerald-800);
1058
+ }
999
1059
  .text-emerald-900 {
1000
1060
  color: var(--color-emerald-900);
1001
1061
  }
@@ -1068,6 +1128,10 @@
1068
1128
  .opacity-100 {
1069
1129
  opacity: 100%;
1070
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
+ }
1071
1135
  .shadow-2xl {
1072
1136
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1073
1137
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1096,12 +1160,23 @@
1096
1160
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1097
1161
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1098
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
+ }
1099
1167
  .shadow-teal-500\/20 {
1100
1168
  --tw-shadow-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
1101
1169
  @supports (color: color-mix(in lab, red, red)) {
1102
1170
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-teal-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
1103
1171
  }
1104
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
+ }
1105
1180
  .grayscale {
1106
1181
  --tw-grayscale: grayscale(100%);
1107
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,);
@@ -1111,6 +1186,11 @@
1111
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,);
1112
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,);
1113
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
+ }
1114
1194
  .backdrop-blur-xs {
1115
1195
  --tw-backdrop-blur: blur(var(--blur-xs));
1116
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,);
@@ -1182,6 +1262,13 @@
1182
1262
  color: var(--color-blue-900);
1183
1263
  }
1184
1264
  }
1265
+ .hover\:border-emerald-400 {
1266
+ &:hover {
1267
+ @media (hover: hover) {
1268
+ border-color: var(--color-emerald-400);
1269
+ }
1270
+ }
1271
+ }
1185
1272
  .hover\:bg-blue-50 {
1186
1273
  &:hover {
1187
1274
  @media (hover: hover) {
@@ -1206,6 +1293,20 @@
1206
1293
  }
1207
1294
  }
1208
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
+ }
1209
1310
  .hover\:bg-emerald-100 {
1210
1311
  &:hover {
1211
1312
  @media (hover: hover) {
@@ -1234,6 +1335,16 @@
1234
1335
  }
1235
1336
  }
1236
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
+ }
1237
1348
  .hover\:bg-slate-100 {
1238
1349
  &:hover {
1239
1350
  @media (hover: hover) {
@@ -1268,6 +1379,16 @@
1268
1379
  }
1269
1380
  }
1270
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
+ }
1271
1392
  .hover\:text-blue-500 {
1272
1393
  &:hover {
1273
1394
  @media (hover: hover) {
@@ -1324,6 +1445,13 @@
1324
1445
  }
1325
1446
  }
1326
1447
  }
1448
+ .hover\:opacity-80 {
1449
+ &:hover {
1450
+ @media (hover: hover) {
1451
+ opacity: 80%;
1452
+ }
1453
+ }
1454
+ }
1327
1455
  .focus\:border-blue-500 {
1328
1456
  &:focus {
1329
1457
  border-color: var(--color-blue-500);
@@ -1425,6 +1553,11 @@
1425
1553
  width: calc(var(--spacing) * 64);
1426
1554
  }
1427
1555
  }
1556
+ .sm\:max-w-xl {
1557
+ @media (width >= 40rem) {
1558
+ max-width: var(--container-xl);
1559
+ }
1560
+ }
1428
1561
  .sm\:flex-row {
1429
1562
  @media (width >= 40rem) {
1430
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
@@ -57,7 +71,6 @@ interface ColumnDef {
57
71
  displayField?: string;
58
72
  currencySymbol?: string;
59
73
  subTableDisplayFields?: string[];
60
- actionTemplate?: string | null;
61
74
  contactMapping?: {
62
75
  phoneCol?: string;
63
76
  emailCol?: string;
@@ -69,6 +82,12 @@ interface ColumnDef {
69
82
  } | null;
70
83
  order?: number;
71
84
  isHidden?: boolean;
85
+ config?: {
86
+ enableWhatsApp?: boolean;
87
+ actionType?: string;
88
+ actionPhoneColumn?: string;
89
+ [key: string]: any;
90
+ } | null;
72
91
  }
73
92
  interface SchemaDef {
74
93
  columns?: ColumnDef[];
@@ -132,4 +151,4 @@ declare function ToastProvider({ children }: {
132
151
 
133
152
  declare function useToast(): ToastContextType;
134
153
 
135
- 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
@@ -57,7 +71,6 @@ interface ColumnDef {
57
71
  displayField?: string;
58
72
  currencySymbol?: string;
59
73
  subTableDisplayFields?: string[];
60
- actionTemplate?: string | null;
61
74
  contactMapping?: {
62
75
  phoneCol?: string;
63
76
  emailCol?: string;
@@ -69,6 +82,12 @@ interface ColumnDef {
69
82
  } | null;
70
83
  order?: number;
71
84
  isHidden?: boolean;
85
+ config?: {
86
+ enableWhatsApp?: boolean;
87
+ actionType?: string;
88
+ actionPhoneColumn?: string;
89
+ [key: string]: any;
90
+ } | null;
72
91
  }
73
92
  interface SchemaDef {
74
93
  columns?: ColumnDef[];
@@ -132,4 +151,4 @@ declare function ToastProvider({ children }: {
132
151
 
133
152
  declare function useToast(): ToastContextType;
134
153
 
135
- 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 };