@eventcatalog/visualiser 3.21.1 → 3.22.0

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 (9) hide show
  1. package/dist/index.d.mts +116 -17
  2. package/dist/index.d.ts +116 -17
  3. package/dist/index.js +2036 -1620
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1699 -1284
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles-core.css +100 -0
  8. package/dist/styles.css +100 -0
  9. package/package.json +1 -1
package/dist/styles-core.css CHANGED
@@ -56,6 +56,12 @@
56
56
  --color-cyan-500: oklch(71.5% 0.143 215.221);
57
57
  --color-cyan-600: oklch(60.9% 0.126 221.723);
58
58
  --color-cyan-700: oklch(52% 0.105 223.128);
59
+ --color-sky-100: oklch(95.1% 0.026 236.824);
60
+ --color-sky-300: oklch(82.8% 0.111 230.318);
61
+ --color-sky-400: oklch(74.6% 0.16 232.661);
62
+ --color-sky-500: oklch(68.5% 0.169 237.323);
63
+ --color-sky-600: oklch(58.8% 0.158 241.966);
64
+ --color-sky-700: oklch(50% 0.134 242.749);
59
65
  --color-blue-100: oklch(93.2% 0.032 255.585);
60
66
  --color-blue-200: oklch(88.2% 0.059 254.128);
61
67
  --color-blue-300: oklch(80.9% 0.105 251.813);
@@ -578,6 +584,12 @@
578
584
  .eventcatalog-visualizer .max-w-60 {
579
585
  max-width: calc(var(--spacing) * 60);
580
586
  }
587
+ .eventcatalog-visualizer .max-w-\[8\.5rem\] {
588
+ max-width: 8.5rem;
589
+ }
590
+ .eventcatalog-visualizer .max-w-\[9rem\] {
591
+ max-width: 9rem;
592
+ }
581
593
  .eventcatalog-visualizer .max-w-\[120px\] {
582
594
  max-width: 120px;
583
595
  }
@@ -1120,6 +1132,24 @@
1120
1132
  .eventcatalog-visualizer .border-rose-500 {
1121
1133
  border-color: var(--color-rose-500);
1122
1134
  }
1135
+ .eventcatalog-visualizer .border-sky-400 {
1136
+ border-color: var(--color-sky-400);
1137
+ }
1138
+ .eventcatalog-visualizer .border-sky-500 {
1139
+ border-color: var(--color-sky-500);
1140
+ }
1141
+ .eventcatalog-visualizer .border-sky-500\/25 {
1142
+ border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
1143
+ @supports (color: color-mix(in lab, red, red)) {
1144
+ border-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent);
1145
+ }
1146
+ }
1147
+ .eventcatalog-visualizer .border-sky-500\/30 {
1148
+ border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
1149
+ @supports (color: color-mix(in lab, red, red)) {
1150
+ border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
1151
+ }
1152
+ }
1123
1153
  .eventcatalog-visualizer .border-slate-400 {
1124
1154
  border-color: var(--color-slate-400);
1125
1155
  }
@@ -1414,6 +1444,21 @@
1414
1444
  .eventcatalog-visualizer .bg-rose-500 {
1415
1445
  background-color: var(--color-rose-500);
1416
1446
  }
1447
+ .eventcatalog-visualizer .bg-sky-400 {
1448
+ background-color: var(--color-sky-400);
1449
+ }
1450
+ .eventcatalog-visualizer .bg-sky-500 {
1451
+ background-color: var(--color-sky-500);
1452
+ }
1453
+ .eventcatalog-visualizer .bg-sky-500\/10 {
1454
+ background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
1455
+ @supports (color: color-mix(in lab, red, red)) {
1456
+ background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
1457
+ }
1458
+ }
1459
+ .eventcatalog-visualizer .bg-sky-600 {
1460
+ background-color: var(--color-sky-600);
1461
+ }
1417
1462
  .eventcatalog-visualizer .bg-slate-500 {
1418
1463
  background-color: var(--color-slate-500);
1419
1464
  }
@@ -1570,6 +1615,14 @@
1570
1615
  --tw-gradient-from: var(--color-rose-500);
1571
1616
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1572
1617
  }
1618
+ .eventcatalog-visualizer .from-sky-400 {
1619
+ --tw-gradient-from: var(--color-sky-400);
1620
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1621
+ }
1622
+ .eventcatalog-visualizer .from-sky-500 {
1623
+ --tw-gradient-from: var(--color-sky-500);
1624
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1625
+ }
1573
1626
  .eventcatalog-visualizer .from-slate-400 {
1574
1627
  --tw-gradient-from: var(--color-slate-400);
1575
1628
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1702,6 +1755,14 @@
1702
1755
  --tw-gradient-to: var(--color-rose-700);
1703
1756
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1704
1757
  }
1758
+ .eventcatalog-visualizer .to-sky-600 {
1759
+ --tw-gradient-to: var(--color-sky-600);
1760
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1761
+ }
1762
+ .eventcatalog-visualizer .to-sky-700 {
1763
+ --tw-gradient-to: var(--color-sky-700);
1764
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1765
+ }
1705
1766
  .eventcatalog-visualizer .to-slate-600 {
1706
1767
  --tw-gradient-to: var(--color-slate-600);
1707
1768
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1747,6 +1808,9 @@
1747
1808
  .eventcatalog-visualizer .stroke-1 {
1748
1809
  stroke-width: 1;
1749
1810
  }
1811
+ .eventcatalog-visualizer .object-contain {
1812
+ object-fit: contain;
1813
+ }
1750
1814
  .eventcatalog-visualizer .object-cover {
1751
1815
  object-fit: cover;
1752
1816
  }
@@ -2295,6 +2359,18 @@
2295
2359
  .eventcatalog-visualizer .text-rose-100 {
2296
2360
  color: var(--color-rose-100);
2297
2361
  }
2362
+ .eventcatalog-visualizer .text-sky-100 {
2363
+ color: var(--color-sky-100);
2364
+ }
2365
+ .eventcatalog-visualizer .text-sky-300 {
2366
+ color: var(--color-sky-300);
2367
+ }
2368
+ .eventcatalog-visualizer .text-sky-500 {
2369
+ color: var(--color-sky-500);
2370
+ }
2371
+ .eventcatalog-visualizer .text-sky-700 {
2372
+ color: var(--color-sky-700);
2373
+ }
2298
2374
  .eventcatalog-visualizer .text-slate-100 {
2299
2375
  color: var(--color-slate-100);
2300
2376
  }
@@ -2539,6 +2615,15 @@
2539
2615
  --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
2540
2616
  }
2541
2617
  }
2618
+ .eventcatalog-visualizer .ring-sky-400 {
2619
+ --tw-ring-color: var(--color-sky-400);
2620
+ }
2621
+ .eventcatalog-visualizer .ring-sky-400\/60 {
2622
+ --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 60%, transparent);
2623
+ @supports (color: color-mix(in lab, red, red)) {
2624
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
2625
+ }
2626
+ }
2542
2627
  .eventcatalog-visualizer .ring-slate-400\/60 {
2543
2628
  --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
2544
2629
  @supports (color: color-mix(in lab, red, red)) {
@@ -2921,6 +3006,11 @@
2921
3006
  color: var(--color-pink-300);
2922
3007
  }
2923
3008
  }
3009
+ .eventcatalog-visualizer .dark\:text-sky-300 {
3010
+ @media (prefers-color-scheme: dark) {
3011
+ color: var(--color-sky-300);
3012
+ }
3013
+ }
2924
3014
  .eventcatalog-visualizer .dark\:text-teal-300 {
2925
3015
  @media (prefers-color-scheme: dark) {
2926
3016
  color: var(--color-teal-300);
@@ -2951,6 +3041,16 @@
2951
3041
  width: 100%;
2952
3042
  }
2953
3043
  }
3044
+ .eventcatalog-visualizer .\[\&\>svg\]\:h-2 {
3045
+ .eventcatalog-visualizer &>svg {
3046
+ height: calc(var(--spacing) * 2);
3047
+ }
3048
+ }
3049
+ .eventcatalog-visualizer .\[\&\>svg\]\:w-2 {
3050
+ .eventcatalog-visualizer &>svg {
3051
+ width: calc(var(--spacing) * 2);
3052
+ }
3053
+ }
2954
3054
  .eventcatalog-visualizer .react-flow {
2955
3055
  direction: ltr;
2956
3056
  --xy-edge-stroke-default: #b1b1b7;
package/dist/styles.css CHANGED
@@ -56,6 +56,12 @@
56
56
  --color-cyan-500: oklch(71.5% 0.143 215.221);
57
57
  --color-cyan-600: oklch(60.9% 0.126 221.723);
58
58
  --color-cyan-700: oklch(52% 0.105 223.128);
59
+ --color-sky-100: oklch(95.1% 0.026 236.824);
60
+ --color-sky-300: oklch(82.8% 0.111 230.318);
61
+ --color-sky-400: oklch(74.6% 0.16 232.661);
62
+ --color-sky-500: oklch(68.5% 0.169 237.323);
63
+ --color-sky-600: oklch(58.8% 0.158 241.966);
64
+ --color-sky-700: oklch(50% 0.134 242.749);
59
65
  --color-blue-100: oklch(93.2% 0.032 255.585);
60
66
  --color-blue-200: oklch(88.2% 0.059 254.128);
61
67
  --color-blue-300: oklch(80.9% 0.105 251.813);
@@ -578,6 +584,12 @@
578
584
  .eventcatalog-visualizer .max-w-60 {
579
585
  max-width: calc(var(--spacing) * 60);
580
586
  }
587
+ .eventcatalog-visualizer .max-w-\[8\.5rem\] {
588
+ max-width: 8.5rem;
589
+ }
590
+ .eventcatalog-visualizer .max-w-\[9rem\] {
591
+ max-width: 9rem;
592
+ }
581
593
  .eventcatalog-visualizer .max-w-\[120px\] {
582
594
  max-width: 120px;
583
595
  }
@@ -1120,6 +1132,24 @@
1120
1132
  .eventcatalog-visualizer .border-rose-500 {
1121
1133
  border-color: var(--color-rose-500);
1122
1134
  }
1135
+ .eventcatalog-visualizer .border-sky-400 {
1136
+ border-color: var(--color-sky-400);
1137
+ }
1138
+ .eventcatalog-visualizer .border-sky-500 {
1139
+ border-color: var(--color-sky-500);
1140
+ }
1141
+ .eventcatalog-visualizer .border-sky-500\/25 {
1142
+ border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
1143
+ @supports (color: color-mix(in lab, red, red)) {
1144
+ border-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent);
1145
+ }
1146
+ }
1147
+ .eventcatalog-visualizer .border-sky-500\/30 {
1148
+ border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
1149
+ @supports (color: color-mix(in lab, red, red)) {
1150
+ border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
1151
+ }
1152
+ }
1123
1153
  .eventcatalog-visualizer .border-slate-400 {
1124
1154
  border-color: var(--color-slate-400);
1125
1155
  }
@@ -1414,6 +1444,21 @@
1414
1444
  .eventcatalog-visualizer .bg-rose-500 {
1415
1445
  background-color: var(--color-rose-500);
1416
1446
  }
1447
+ .eventcatalog-visualizer .bg-sky-400 {
1448
+ background-color: var(--color-sky-400);
1449
+ }
1450
+ .eventcatalog-visualizer .bg-sky-500 {
1451
+ background-color: var(--color-sky-500);
1452
+ }
1453
+ .eventcatalog-visualizer .bg-sky-500\/10 {
1454
+ background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
1455
+ @supports (color: color-mix(in lab, red, red)) {
1456
+ background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
1457
+ }
1458
+ }
1459
+ .eventcatalog-visualizer .bg-sky-600 {
1460
+ background-color: var(--color-sky-600);
1461
+ }
1417
1462
  .eventcatalog-visualizer .bg-slate-500 {
1418
1463
  background-color: var(--color-slate-500);
1419
1464
  }
@@ -1570,6 +1615,14 @@
1570
1615
  --tw-gradient-from: var(--color-rose-500);
1571
1616
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1572
1617
  }
1618
+ .eventcatalog-visualizer .from-sky-400 {
1619
+ --tw-gradient-from: var(--color-sky-400);
1620
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1621
+ }
1622
+ .eventcatalog-visualizer .from-sky-500 {
1623
+ --tw-gradient-from: var(--color-sky-500);
1624
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1625
+ }
1573
1626
  .eventcatalog-visualizer .from-slate-400 {
1574
1627
  --tw-gradient-from: var(--color-slate-400);
1575
1628
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1702,6 +1755,14 @@
1702
1755
  --tw-gradient-to: var(--color-rose-700);
1703
1756
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1704
1757
  }
1758
+ .eventcatalog-visualizer .to-sky-600 {
1759
+ --tw-gradient-to: var(--color-sky-600);
1760
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1761
+ }
1762
+ .eventcatalog-visualizer .to-sky-700 {
1763
+ --tw-gradient-to: var(--color-sky-700);
1764
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1765
+ }
1705
1766
  .eventcatalog-visualizer .to-slate-600 {
1706
1767
  --tw-gradient-to: var(--color-slate-600);
1707
1768
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1747,6 +1808,9 @@
1747
1808
  .eventcatalog-visualizer .stroke-1 {
1748
1809
  stroke-width: 1;
1749
1810
  }
1811
+ .eventcatalog-visualizer .object-contain {
1812
+ object-fit: contain;
1813
+ }
1750
1814
  .eventcatalog-visualizer .object-cover {
1751
1815
  object-fit: cover;
1752
1816
  }
@@ -2295,6 +2359,18 @@
2295
2359
  .eventcatalog-visualizer .text-rose-100 {
2296
2360
  color: var(--color-rose-100);
2297
2361
  }
2362
+ .eventcatalog-visualizer .text-sky-100 {
2363
+ color: var(--color-sky-100);
2364
+ }
2365
+ .eventcatalog-visualizer .text-sky-300 {
2366
+ color: var(--color-sky-300);
2367
+ }
2368
+ .eventcatalog-visualizer .text-sky-500 {
2369
+ color: var(--color-sky-500);
2370
+ }
2371
+ .eventcatalog-visualizer .text-sky-700 {
2372
+ color: var(--color-sky-700);
2373
+ }
2298
2374
  .eventcatalog-visualizer .text-slate-100 {
2299
2375
  color: var(--color-slate-100);
2300
2376
  }
@@ -2539,6 +2615,15 @@
2539
2615
  --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
2540
2616
  }
2541
2617
  }
2618
+ .eventcatalog-visualizer .ring-sky-400 {
2619
+ --tw-ring-color: var(--color-sky-400);
2620
+ }
2621
+ .eventcatalog-visualizer .ring-sky-400\/60 {
2622
+ --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 60%, transparent);
2623
+ @supports (color: color-mix(in lab, red, red)) {
2624
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
2625
+ }
2626
+ }
2542
2627
  .eventcatalog-visualizer .ring-slate-400\/60 {
2543
2628
  --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
2544
2629
  @supports (color: color-mix(in lab, red, red)) {
@@ -2921,6 +3006,11 @@
2921
3006
  color: var(--color-pink-300);
2922
3007
  }
2923
3008
  }
3009
+ .eventcatalog-visualizer .dark\:text-sky-300 {
3010
+ @media (prefers-color-scheme: dark) {
3011
+ color: var(--color-sky-300);
3012
+ }
3013
+ }
2924
3014
  .eventcatalog-visualizer .dark\:text-teal-300 {
2925
3015
  @media (prefers-color-scheme: dark) {
2926
3016
  color: var(--color-teal-300);
@@ -2951,6 +3041,16 @@
2951
3041
  width: 100%;
2952
3042
  }
2953
3043
  }
3044
+ .eventcatalog-visualizer .\[\&\>svg\]\:h-2 {
3045
+ .eventcatalog-visualizer &>svg {
3046
+ height: calc(var(--spacing) * 2);
3047
+ }
3048
+ }
3049
+ .eventcatalog-visualizer .\[\&\>svg\]\:w-2 {
3050
+ .eventcatalog-visualizer &>svg {
3051
+ width: calc(var(--spacing) * 2);
3052
+ }
3053
+ }
2954
3054
  .eventcatalog-visualizer .react-flow {
2955
3055
  direction: ltr;
2956
3056
  --xy-edge-stroke-default: #b1b1b7;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eventcatalog/visualiser",
3
- "version": "3.21.1",
3
+ "version": "3.22.0",
4
4
  "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",