@aivenio/aquarium 1.0.0 → 1.2.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 (70) hide show
  1. package/dist/_variables.scss +20 -2
  2. package/dist/_variables_timescale.scss +20 -2
  3. package/dist/atoms.cjs +4881 -657
  4. package/dist/atoms.mjs +4873 -656
  5. package/dist/src/common/Alert/Alert.d.ts +1 -1
  6. package/dist/src/common/Alert/Alert.js +3 -3
  7. package/dist/src/common/Banner/Banner.d.ts +5 -1
  8. package/dist/src/common/Banner/Banner.js +10 -5
  9. package/dist/src/common/DataList/DataList.d.ts +24 -0
  10. package/dist/src/common/DataList/DataList.js +54 -0
  11. package/dist/src/common/DropdownMenu/DropdownMenu.d.ts +10 -3
  12. package/dist/src/common/DropdownMenu/DropdownMenu.js +14 -2
  13. package/dist/src/common/Modal/Modal.js +3 -3
  14. package/dist/src/common/Table/Table.d.ts +8 -3
  15. package/dist/src/common/Table/Table.js +20 -10
  16. package/dist/src/common/Timeline/Timeline.d.ts +18 -0
  17. package/dist/src/common/Timeline/Timeline.js +43 -0
  18. package/dist/src/common/Typography/Typography.d.ts +2 -1
  19. package/dist/src/common/Typography/Typography.js +15 -3
  20. package/dist/src/components/Alert/Alert.js +2 -2
  21. package/dist/src/components/Banner/Banner.d.ts +3 -1
  22. package/dist/src/components/Banner/Banner.js +3 -3
  23. package/dist/src/components/Box/Box.d.ts +5 -1
  24. package/dist/src/components/Box/Box.js +6 -2
  25. package/dist/src/components/Carousel/Carousel.d.ts +16 -0
  26. package/dist/src/components/Carousel/Carousel.js +89 -0
  27. package/dist/src/components/Chip/Chip.d.ts +1 -0
  28. package/dist/src/components/Chip/Chip.js +2 -2
  29. package/dist/src/components/DataList/DataList.d.ts +13 -0
  30. package/dist/src/components/DataList/DataList.js +24 -0
  31. package/dist/src/components/DataTable/DataTable.d.ts +5 -89
  32. package/dist/src/components/DataTable/DataTable.js +13 -28
  33. package/dist/src/components/Dialog/Dialog.js +35 -12
  34. package/dist/src/components/Dropdown/Dropdown.js +1 -1
  35. package/dist/src/components/DropdownMenu/DropdownMenu.d.ts +15 -1
  36. package/dist/src/components/DropdownMenu/DropdownMenu.js +26 -13
  37. package/dist/src/components/DropdownMenu/utils.d.ts +4 -0
  38. package/dist/src/components/DropdownMenu/utils.js +20 -0
  39. package/dist/src/components/Modal/Modal.js +16 -8
  40. package/dist/src/components/Section/Section.d.ts +4 -0
  41. package/dist/src/components/Section/Section.js +14 -13
  42. package/dist/src/components/Skeleton/Skeleton.d.ts +7 -2
  43. package/dist/src/components/Skeleton/Skeleton.js +5 -4
  44. package/dist/src/components/Table/Table.js +2 -2
  45. package/dist/src/components/Template/Template.d.ts +23 -0
  46. package/dist/src/components/Template/Template.js +23 -0
  47. package/dist/src/components/Timeline/Timeline.d.ts +27 -0
  48. package/dist/src/components/Timeline/Timeline.js +41 -0
  49. package/dist/src/components/index.d.ts +8 -1
  50. package/dist/src/components/index.js +9 -2
  51. package/dist/src/utils/Blueprint.d.ts +7 -0
  52. package/dist/src/utils/Blueprint.js +31 -0
  53. package/dist/src/utils/table/types.d.ts +129 -0
  54. package/dist/src/utils/table/types.js +6 -0
  55. package/dist/src/utils/table/useScrollTarget.d.ts +2 -0
  56. package/dist/src/utils/table/useScrollTarget.js +16 -0
  57. package/dist/src/{common/Table/Table.utils.d.ts → utils/table/useTableSelect.d.ts} +0 -3
  58. package/dist/src/utils/table/useTableSelect.js +27 -0
  59. package/dist/src/utils/table/useTableSort.d.ts +2 -0
  60. package/dist/src/utils/table/useTableSort.js +19 -0
  61. package/dist/styles.css +102 -26
  62. package/dist/styles_timescaledb.css +102 -26
  63. package/dist/system.cjs +3188 -2173
  64. package/dist/system.mjs +3182 -2173
  65. package/dist/tsconfig.module.tsbuildinfo +1 -1
  66. package/dist/types/ActionType.d.ts +2 -0
  67. package/dist/types/tailwindGenerated.d.ts +1 -1
  68. package/dist/types/utils.d.ts +3 -0
  69. package/package.json +3 -3
  70. package/dist/src/common/Table/Table.utils.js +0 -41
@@ -715,8 +715,8 @@ input[type='number'].no-arrows {
715
715
  .mt-4 {
716
716
  margin-top: 12px !important;
717
717
  }
718
- .ml-4 {
719
- margin-left: 12px !important;
718
+ .mb-5 {
719
+ margin-bottom: 16px !important;
720
720
  }
721
721
  .mr-4 {
722
722
  margin-right: 12px !important;
@@ -763,6 +763,9 @@ input[type='number'].no-arrows {
763
763
  .table {
764
764
  display: table !important;
765
765
  }
766
+ .\!table {
767
+ display: table !important;
768
+ }
766
769
  .grid {
767
770
  display: grid !important;
768
771
  }
@@ -796,12 +799,18 @@ input[type='number'].no-arrows {
796
799
  .h-\[50px\] {
797
800
  height: 50px !important;
798
801
  }
799
- .h-\[32px\] {
800
- height: 32px !important;
802
+ .h-5 {
803
+ height: 16px !important;
801
804
  }
802
805
  .h-full {
803
806
  height: 100% !important;
804
807
  }
808
+ .h-\[6px\] {
809
+ height: 6px !important;
810
+ }
811
+ .h-\[32px\] {
812
+ height: 32px !important;
813
+ }
805
814
  .h-\[174px\] {
806
815
  height: 174px !important;
807
816
  }
@@ -811,9 +820,6 @@ input[type='number'].no-arrows {
811
820
  .h-1px {
812
821
  height: 1px !important;
813
822
  }
814
- .h-5 {
815
- height: 16px !important;
816
- }
817
823
  .h-6 {
818
824
  height: 24px !important;
819
825
  }
@@ -832,12 +838,24 @@ input[type='number'].no-arrows {
832
838
  .min-h-full {
833
839
  min-height: 100% !important;
834
840
  }
841
+ .min-h-\[50px\] {
842
+ min-height: 50px !important;
843
+ }
835
844
  .w-full {
836
845
  width: 100% !important;
837
846
  }
838
847
  .w-3 {
839
848
  width: 8px !important;
840
849
  }
850
+ .w-5 {
851
+ width: 16px !important;
852
+ }
853
+ .w-1 {
854
+ width: 2px !important;
855
+ }
856
+ .w-\[6px\] {
857
+ width: 6px !important;
858
+ }
841
859
  .w-\[32px\] {
842
860
  width: 32px !important;
843
861
  }
@@ -847,15 +865,9 @@ input[type='number'].no-arrows {
847
865
  .w-1px {
848
866
  width: 1px !important;
849
867
  }
850
- .w-1 {
851
- width: 2px !important;
852
- }
853
868
  .w-2 {
854
869
  width: 4px !important;
855
870
  }
856
- .w-5 {
857
- width: 16px !important;
858
- }
859
871
  .w-6 {
860
872
  width: 24px !important;
861
873
  }
@@ -949,6 +961,15 @@ input[type='number'].no-arrows {
949
961
  .resize {
950
962
  resize: both !important;
951
963
  }
964
+ .snap-x {
965
+ scroll-snap-type: x var(--tw-scroll-snap-strictness) !important;
966
+ }
967
+ .snap-mandatory {
968
+ --tw-scroll-snap-strictness: mandatory !important;
969
+ }
970
+ .snap-start {
971
+ scroll-snap-align: start !important;
972
+ }
952
973
  .appearance-none {
953
974
  -webkit-appearance: none !important;
954
975
  -moz-appearance: none !important;
@@ -957,6 +978,9 @@ input[type='number'].no-arrows {
957
978
  .auto-cols-fr {
958
979
  grid-auto-columns: minmax(0, 1fr) !important;
959
980
  }
981
+ .grid-flow-col {
982
+ grid-auto-flow: column !important;
983
+ }
960
984
  .grid-cols-\[auto_1fr_auto\] {
961
985
  grid-template-columns: auto 1fr auto !important;
962
986
  }
@@ -969,6 +993,9 @@ input[type='number'].no-arrows {
969
993
  .grid-cols-3 {
970
994
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
971
995
  }
996
+ .grid-cols-\[16px_1fr\] {
997
+ grid-template-columns: 16px 1fr !important;
998
+ }
972
999
  .grid-cols-\[auto_1fr\] {
973
1000
  grid-template-columns: auto 1fr !important;
974
1001
  }
@@ -978,6 +1005,9 @@ input[type='number'].no-arrows {
978
1005
  .flex-row {
979
1006
  flex-direction: row !important;
980
1007
  }
1008
+ .flex-row-reverse {
1009
+ flex-direction: row-reverse !important;
1010
+ }
981
1011
  .flex-col {
982
1012
  flex-direction: column !important;
983
1013
  }
@@ -990,6 +1020,12 @@ input[type='number'].no-arrows {
990
1020
  .items-center {
991
1021
  align-items: center !important;
992
1022
  }
1023
+ .items-stretch {
1024
+ align-items: stretch !important;
1025
+ }
1026
+ .justify-start {
1027
+ justify-content: flex-start !important;
1028
+ }
993
1029
  .justify-end {
994
1030
  justify-content: flex-end !important;
995
1031
  }
@@ -1048,6 +1084,9 @@ input[type='number'].no-arrows {
1048
1084
  .self-center {
1049
1085
  align-self: center !important;
1050
1086
  }
1087
+ .justify-self-center {
1088
+ justify-self: center !important;
1089
+ }
1051
1090
  .overflow-hidden {
1052
1091
  overflow: hidden !important;
1053
1092
  }
@@ -1057,6 +1096,12 @@ input[type='number'].no-arrows {
1057
1096
  .overflow-x-hidden {
1058
1097
  overflow-x: hidden !important;
1059
1098
  }
1099
+ .overflow-x-scroll {
1100
+ overflow-x: scroll !important;
1101
+ }
1102
+ .scroll-smooth {
1103
+ scroll-behavior: smooth !important;
1104
+ }
1060
1105
  .whitespace-nowrap {
1061
1106
  white-space: nowrap !important;
1062
1107
  }
@@ -1108,22 +1153,22 @@ input[type='number'].no-arrows {
1108
1153
  --tw-border-opacity: 1 !important;
1109
1154
  border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
1110
1155
  }
1111
- .border-navyBlue-100 {
1112
- --tw-border-opacity: 1 !important;
1113
- border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
1114
- }
1115
1156
  .border-grey-5 {
1116
1157
  --tw-border-opacity: 1 !important;
1117
1158
  border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
1118
1159
  }
1119
- .border-grey-50 {
1160
+ .border-navyBlue-100 {
1120
1161
  --tw-border-opacity: 1 !important;
1121
- border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
1162
+ border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
1122
1163
  }
1123
1164
  .border-grey-10 {
1124
1165
  --tw-border-opacity: 1 !important;
1125
1166
  border-color: rgb(225 225 227 / var(--tw-border-opacity)) !important;
1126
1167
  }
1168
+ .border-grey-50 {
1169
+ --tw-border-opacity: 1 !important;
1170
+ border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
1171
+ }
1127
1172
  .border-grey-40 {
1128
1173
  --tw-border-opacity: 1 !important;
1129
1174
  border-color: rgb(150 150 160 / var(--tw-border-opacity)) !important;
@@ -1166,14 +1211,14 @@ input[type='number'].no-arrows {
1166
1211
  --tw-bg-opacity: 1 !important;
1167
1212
  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
1168
1213
  }
1169
- .bg-navyBlue-100 {
1170
- --tw-bg-opacity: 1 !important;
1171
- background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
1172
- }
1173
1214
  .bg-white {
1174
1215
  --tw-bg-opacity: 1 !important;
1175
1216
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
1176
1217
  }
1218
+ .bg-navyBlue-100 {
1219
+ --tw-bg-opacity: 1 !important;
1220
+ background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
1221
+ }
1177
1222
  .bg-grey-5 {
1178
1223
  --tw-bg-opacity: 1 !important;
1179
1224
  background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
@@ -1194,6 +1239,10 @@ input[type='number'].no-arrows {
1194
1239
  --tw-bg-opacity: 1 !important;
1195
1240
  background-color: rgb(216 0 5 / var(--tw-bg-opacity)) !important;
1196
1241
  }
1242
+ .bg-grey-30 {
1243
+ --tw-bg-opacity: 1 !important;
1244
+ background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
1245
+ }
1197
1246
  .bg-current {
1198
1247
  background-color: currentColor !important;
1199
1248
  }
@@ -1258,12 +1307,12 @@ input[type='number'].no-arrows {
1258
1307
  .p-5 {
1259
1308
  padding: 16px !important;
1260
1309
  }
1261
- .p-3 {
1262
- padding: 8px !important;
1263
- }
1264
1310
  .p-6 {
1265
1311
  padding: 24px !important;
1266
1312
  }
1313
+ .p-3 {
1314
+ padding: 8px !important;
1315
+ }
1267
1316
  .p-2 {
1268
1317
  padding: 4px !important;
1269
1318
  }
@@ -1994,6 +2043,18 @@ input[type='number'].no-arrows {
1994
2043
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
1995
2044
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
1996
2045
  }
2046
+ .focus-visible\:ring-1.focus-visible {
2047
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2048
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2049
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
2050
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
2051
+ }
2052
+ .focus-visible\:ring-1:focus-visible {
2053
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2054
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2055
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
2056
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
2057
+ }
1997
2058
  .focus-visible\:ring-inset.focus-visible {
1998
2059
  --tw-ring-inset: inset !important;
1999
2060
  }
@@ -2016,6 +2077,14 @@ input[type='number'].no-arrows {
2016
2077
  --tw-ring-opacity: 1 !important;
2017
2078
  --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity)) !important;
2018
2079
  }
2080
+ .focus-visible\:ring-info-70.focus-visible {
2081
+ --tw-ring-opacity: 1 !important;
2082
+ --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
2083
+ }
2084
+ .focus-visible\:ring-info-70:focus-visible {
2085
+ --tw-ring-opacity: 1 !important;
2086
+ --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
2087
+ }
2019
2088
  .active\:bg-primary-90:active {
2020
2089
  --tw-bg-opacity: 1 !important;
2021
2090
  background-color: rgb(1 116 186 / var(--tw-bg-opacity)) !important;
@@ -2099,9 +2168,16 @@ input[type='number'].no-arrows {
2099
2168
  --tw-ring-opacity: 1 !important;
2100
2169
  --tw-ring-color: rgb(210 210 214 / var(--tw-ring-opacity)) !important;
2101
2170
  }
2171
+ .group:last-child .group-last\:border-b-0 {
2172
+ border-bottom-width: 0px !important;
2173
+ }
2102
2174
  .group:hover .group-hover\:visible {
2103
2175
  visibility: visible !important;
2104
2176
  }
2177
+ .group:hover .group-hover\:bg-grey-0 {
2178
+ --tw-bg-opacity: 1 !important;
2179
+ background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
2180
+ }
2105
2181
  .group:hover .group-hover\:bg-grey-30 {
2106
2182
  --tw-bg-opacity: 1 !important;
2107
2183
  background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;