@agility/plenum-ui 1.3.31 → 1.3.33
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.
- package/.storybook/Layout.jsx +1 -1
- package/lib/index.esm.js +1 -1
- package/lib/index.js +1 -1
- package/lib/{index.css → tailwind.css} +252 -63
- package/libxxx/common/brandCfg.d.ts +3 -0
- package/libxxx/common/index.d.ts +3 -0
- package/libxxx/common/storyCfg.d.ts +5 -0
- package/libxxx/components/Avatar/Avatar.d.ts +27 -0
- package/libxxx/components/Avatar/Avatar.stories.d.ts +6 -0
- package/libxxx/components/Avatar/Avatar.test.d.ts +1 -0
- package/libxxx/components/Avatar/index.d.ts +1 -0
- package/libxxx/components/Button/Button.d.ts +45 -0
- package/libxxx/components/Button/Button.stories.d.ts +10 -0
- package/libxxx/components/Button/Button.test.d.ts +1 -0
- package/libxxx/components/Button/index.d.ts +1 -0
- package/libxxx/components/ButtonDropdown/ButtonDropdown.d.ts +11 -0
- package/libxxx/components/ButtonDropdown/ButtonDropdown.stories.d.ts +8 -0
- package/libxxx/components/ButtonDropdown/index.d.ts +1 -0
- package/libxxx/components/Combobox/Combobox.d.ts +34 -0
- package/libxxx/components/Combobox/Combobox.stories.d.ts +14 -0
- package/libxxx/components/Combobox/Combobox.test.d.ts +1 -0
- package/libxxx/components/Combobox/index.d.ts +1 -0
- package/libxxx/components/Dropdown/Dropdown.d.ts +25 -0
- package/libxxx/components/Dropdown/Dropdown.stories.d.ts +9 -0
- package/libxxx/components/Dropdown/Dropdown.test.d.ts +1 -0
- package/libxxx/components/Dropdown/data.d.ts +3 -0
- package/libxxx/components/Dropdown/index.d.ts +1 -0
- package/libxxx/components/Forms/BaseField/BaseField.d.ts +34 -0
- package/libxxx/components/Forms/BaseField/BaseField.stories.d.ts +6 -0
- package/libxxx/components/Forms/BaseField/BaseField.test.d.ts +1 -0
- package/libxxx/components/Forms/BaseField/index.d.ts +1 -0
- package/libxxx/components/Forms/Checkbox/Checkbox.d.ts +23 -0
- package/libxxx/components/Forms/Checkbox/Checkbox.stories.d.ts +13 -0
- package/libxxx/components/Forms/Checkbox/Checkbox.test.d.ts +1 -0
- package/libxxx/components/Forms/Checkbox/index.d.ts +1 -0
- package/libxxx/components/Forms/InputCounter/InputCounter.d.ts +9 -0
- package/libxxx/components/Forms/InputCounter/InputCounter.stories.d.ts +6 -0
- package/libxxx/components/Forms/InputCounter/InputCounter.test.d.ts +1 -0
- package/libxxx/components/Forms/InputCounter/index.d.ts +1 -0
- package/libxxx/components/Forms/InputLabel/InputLabel.d.ts +14 -0
- package/libxxx/components/Forms/InputLabel/InputLabel.stories.d.ts +6 -0
- package/libxxx/components/Forms/InputLabel/InputLabel.test.d.ts +1 -0
- package/libxxx/components/Forms/InputLabel/index.d.ts +1 -0
- package/libxxx/components/Forms/Radio/Radio.d.ts +27 -0
- package/libxxx/components/Forms/Radio/Radio.stories.d.ts +12 -0
- package/libxxx/components/Forms/Radio/Radio.test.d.ts +1 -0
- package/libxxx/components/Forms/Radio/index.d.ts +1 -0
- package/libxxx/components/Forms/Select/Select.d.ts +27 -0
- package/libxxx/components/Forms/Select/Select.stories.d.ts +11 -0
- package/libxxx/components/Forms/Select/Select.test.d.ts +1 -0
- package/libxxx/components/Forms/Select/index.d.ts +1 -0
- package/libxxx/components/Forms/TextInput/TextInput.d.ts +37 -0
- package/libxxx/components/Forms/TextInput/TextInput.stories.d.ts +12 -0
- package/libxxx/components/Forms/TextInput/index.d.ts +1 -0
- package/libxxx/components/Forms/TextInputAddon/InputCta/InputCta.d.ts +16 -0
- package/libxxx/components/Forms/TextInputAddon/InputCta/InputCta.stories.d.ts +6 -0
- package/libxxx/components/Forms/TextInputAddon/InputCta/InputCta.test.d.ts +1 -0
- package/libxxx/components/Forms/TextInputAddon/InputCta/index.d.ts +1 -0
- package/libxxx/components/Forms/TextInputAddon/TextInputAddon.d.ts +52 -0
- package/libxxx/components/Forms/TextInputAddon/TextInputAddon.stories.d.ts +12 -0
- package/libxxx/components/Forms/TextInputAddon/index.d.ts +1 -0
- package/libxxx/components/Forms/TextInputSelect/InputSelect/InputSelect.d.ts +13 -0
- package/libxxx/components/Forms/TextInputSelect/InputSelect/InputSelect.stories.d.ts +6 -0
- package/libxxx/components/Forms/TextInputSelect/InputSelect/InputSelect.test.d.ts +1 -0
- package/libxxx/components/Forms/TextInputSelect/InputSelect/index.d.ts +1 -0
- package/libxxx/components/Forms/TextInputSelect/TextInputSelect.d.ts +48 -0
- package/libxxx/components/Forms/TextInputSelect/TextInputSelect.stories.d.ts +8 -0
- package/libxxx/components/Forms/TextInputSelect/index.d.ts +1 -0
- package/libxxx/components/Forms/Textarea/Textarea.d.ts +32 -0
- package/libxxx/components/Forms/Textarea/Textarea.stories.d.ts +12 -0
- package/libxxx/components/Forms/Textarea/Textarea.test.d.ts +1 -0
- package/libxxx/components/Forms/Textarea/index.d.ts +1 -0
- package/libxxx/components/Switch/Switch.d.ts +11 -0
- package/libxxx/components/Switch/Switch.stories.d.ts +9 -0
- package/libxxx/components/Switch/Switch.test.d.ts +1 -0
- package/libxxx/components/Switch/index.d.ts +1 -0
- package/libxxx/components/TreeView/TreeView.d.ts +36 -0
- package/libxxx/components/TreeView/TreeView.stories.d.ts +6 -0
- package/libxxx/components/TreeView/TreeView.test.d.ts +1 -0
- package/libxxx/components/TreeView/index.d.ts +1 -0
- package/libxxx/components/TreeView V1/TreeItem/TreeItem.d.ts +16 -0
- package/libxxx/components/TreeView V1/TreeItem/TreeItem.stories.d.ts +9 -0
- package/libxxx/components/TreeView V1/TreeItem/TreeItem.test.d.ts +1 -0
- package/libxxx/components/TreeView V1/TreeItem/index.d.ts +1 -0
- package/libxxx/components/TreeView V1/TreeView.d.ts +6 -0
- package/libxxx/components/TreeView V1/TreeView.stories.d.ts +6 -0
- package/libxxx/components/TreeView V1/TreeView.test.d.ts +1 -0
- package/libxxx/components/TreeView V1/context.d.ts +9 -0
- package/libxxx/components/TreeView V1/index.d.ts +1 -0
- package/libxxx/components/TreeView V1/sampleData.d.ts +71 -0
- package/libxxx/components/TreeView V1/types/tree.types.d.ts +21 -0
- package/libxxx/index.d.ts +14 -0
- package/libxxx/page/TreeNavigation/CustomNode/CustomNode.d.ts +3 -0
- package/libxxx/page/TreeNavigation/CustomNode/CustomNode.test.d.ts +1 -0
- package/libxxx/page/TreeNavigation/CustomNode/index.d.ts +1 -0
- package/libxxx/page/TreeNavigation/TreeNavigation.d.ts +8 -0
- package/libxxx/page/TreeNavigation/TreeNavigation.stories.d.ts +6 -0
- package/libxxx/page/TreeNavigation/hooks/useFetch.d.ts +14 -0
- package/libxxx/page/TreeNavigation/index.d.ts +1 -0
- package/libxxx/util/DynamicIcons.d.ts +10 -0
- package/libxxx/util/Loader.d.ts +6 -0
- package/libxxx/util/useID.d.ts +1 -0
- package/package.json +3 -3
- package/tsconfig.json +2 -2
- package/lib/index.esm.css +0 -1866
package/.storybook/Layout.jsx
CHANGED
package/lib/index.esm.js
CHANGED
|
@@ -7281,7 +7281,7 @@ var ButtonDropDown = function (_a) {
|
|
|
7281
7281
|
return (React__default.createElement("div", { className: "flex items-stretch" },
|
|
7282
7282
|
React__default.createElement(_Button, __assign$1({}, button, { className: "!rounded-r-none !border-r-0 hover:!border-r-0 " })),
|
|
7283
7283
|
React__default.createElement("div", { className: cn("w-[1px]", button.type === "primary" ? "bg-purple-700" : "", button.type === "secondary" ? "bg-purple-200" : "", button.type === "alternative" ? "bg-gray-300" : "") }),
|
|
7284
|
-
React__default.createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-
|
|
7284
|
+
React__default.createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-full rounded-l-none border !border-l-0 px-2 transition-all hover:!border-l-0", button.type === "primary"
|
|
7285
7285
|
? "border-purple-600 bg-purple-600 !text-white hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800"
|
|
7286
7286
|
: "", button.type === "secondary"
|
|
7287
7287
|
? "border-purple-100 bg-purple-100 !text-purple-700 hover:border-purple-200 hover:bg-purple-200 active:!border-purple-300 active:!bg-purple-300"
|
package/lib/index.js
CHANGED
|
@@ -7307,7 +7307,7 @@ var ButtonDropDown = function (_a) {
|
|
|
7307
7307
|
return (React__default["default"].createElement("div", { className: "flex items-stretch" },
|
|
7308
7308
|
React__default["default"].createElement(_Button, __assign$1({}, button, { className: "!rounded-r-none !border-r-0 hover:!border-r-0 " })),
|
|
7309
7309
|
React__default["default"].createElement("div", { className: cn("w-[1px]", button.type === "primary" ? "bg-purple-700" : "", button.type === "secondary" ? "bg-purple-200" : "", button.type === "alternative" ? "bg-gray-300" : "") }),
|
|
7310
|
-
React__default["default"].createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-
|
|
7310
|
+
React__default["default"].createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-full rounded-l-none border !border-l-0 px-2 transition-all hover:!border-l-0", button.type === "primary"
|
|
7311
7311
|
? "border-purple-600 bg-purple-600 !text-white hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800"
|
|
7312
7312
|
: "", button.type === "secondary"
|
|
7313
7313
|
? "border-purple-100 bg-purple-100 !text-purple-700 hover:border-purple-200 hover:bg-purple-200 active:!border-purple-300 active:!bg-purple-300"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
! tailwindcss v3.0.
|
|
2
|
+
! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -476,14 +476,18 @@ input::placeholder,textarea::placeholder {
|
|
|
476
476
|
min-height: 1.5em;
|
|
477
477
|
}
|
|
478
478
|
|
|
479
|
+
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
|
|
480
|
+
padding-top: 0;
|
|
481
|
+
padding-bottom: 0;
|
|
482
|
+
}
|
|
483
|
+
|
|
479
484
|
select {
|
|
480
485
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
481
486
|
background-position: right 0.5rem center;
|
|
482
487
|
background-repeat: no-repeat;
|
|
483
488
|
background-size: 1.5em 1.5em;
|
|
484
489
|
padding-right: 2.5rem;
|
|
485
|
-
|
|
486
|
-
color-adjust: exact;
|
|
490
|
+
print-color-adjust: exact;
|
|
487
491
|
}
|
|
488
492
|
|
|
489
493
|
[multiple] {
|
|
@@ -492,8 +496,7 @@ select {
|
|
|
492
496
|
background-repeat: unset;
|
|
493
497
|
background-size: initial;
|
|
494
498
|
padding-right: 0.75rem;
|
|
495
|
-
|
|
496
|
-
color-adjust: unset;
|
|
499
|
+
print-color-adjust: unset;
|
|
497
500
|
}
|
|
498
501
|
|
|
499
502
|
[type='checkbox'],[type='radio'] {
|
|
@@ -501,8 +504,7 @@ select {
|
|
|
501
504
|
-moz-appearance: none;
|
|
502
505
|
appearance: none;
|
|
503
506
|
padding: 0;
|
|
504
|
-
|
|
505
|
-
color-adjust: exact;
|
|
507
|
+
print-color-adjust: exact;
|
|
506
508
|
display: inline-block;
|
|
507
509
|
vertical-align: middle;
|
|
508
510
|
background-origin: border-box;
|
|
@@ -586,6 +588,7 @@ select {
|
|
|
586
588
|
}
|
|
587
589
|
|
|
588
590
|
[type='file']:focus {
|
|
591
|
+
outline: 1px solid ButtonText;
|
|
589
592
|
outline: 1px auto -webkit-focus-ring-color;
|
|
590
593
|
}
|
|
591
594
|
|
|
@@ -713,14 +716,14 @@ select {
|
|
|
713
716
|
top: 1px;
|
|
714
717
|
}
|
|
715
718
|
|
|
716
|
-
.left-0 {
|
|
717
|
-
left: 0px;
|
|
718
|
-
}
|
|
719
|
-
|
|
720
719
|
.bottom-10 {
|
|
721
720
|
bottom: 2.5rem;
|
|
722
721
|
}
|
|
723
722
|
|
|
723
|
+
.left-0 {
|
|
724
|
+
left: 0px;
|
|
725
|
+
}
|
|
726
|
+
|
|
724
727
|
.left-4 {
|
|
725
728
|
left: 1rem;
|
|
726
729
|
}
|
|
@@ -741,6 +744,10 @@ select {
|
|
|
741
744
|
z-index: 20;
|
|
742
745
|
}
|
|
743
746
|
|
|
747
|
+
.z-\[2\] {
|
|
748
|
+
z-index: 2;
|
|
749
|
+
}
|
|
750
|
+
|
|
744
751
|
.z-10 {
|
|
745
752
|
z-index: 10;
|
|
746
753
|
}
|
|
@@ -749,6 +756,10 @@ select {
|
|
|
749
756
|
margin: auto;
|
|
750
757
|
}
|
|
751
758
|
|
|
759
|
+
.\!mt-1 {
|
|
760
|
+
margin-top: 0.25rem !important;
|
|
761
|
+
}
|
|
762
|
+
|
|
752
763
|
.mt-5 {
|
|
753
764
|
margin-top: 1.25rem;
|
|
754
765
|
}
|
|
@@ -1001,6 +1012,10 @@ select {
|
|
|
1001
1012
|
width: 1.25rem;
|
|
1002
1013
|
}
|
|
1003
1014
|
|
|
1015
|
+
.w-\[1px\] {
|
|
1016
|
+
width: 1px;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1004
1019
|
.w-56 {
|
|
1005
1020
|
width: 14rem;
|
|
1006
1021
|
}
|
|
@@ -1140,6 +1155,10 @@ select {
|
|
|
1140
1155
|
align-items: center;
|
|
1141
1156
|
}
|
|
1142
1157
|
|
|
1158
|
+
.items-stretch {
|
|
1159
|
+
align-items: stretch;
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1143
1162
|
.justify-center {
|
|
1144
1163
|
justify-content: center;
|
|
1145
1164
|
}
|
|
@@ -1170,6 +1189,16 @@ select {
|
|
|
1170
1189
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
1171
1190
|
}
|
|
1172
1191
|
|
|
1192
|
+
.\!divide-purple-700 > :not([hidden]) ~ :not([hidden]) {
|
|
1193
|
+
--tw-divide-opacity: 1 !important;
|
|
1194
|
+
border-color: rgb(88 0 212 / var(--tw-divide-opacity)) !important;
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
.\!divide-purple-200 > :not([hidden]) ~ :not([hidden]) {
|
|
1198
|
+
--tw-divide-opacity: 1 !important;
|
|
1199
|
+
border-color: rgb(205 179 242 / var(--tw-divide-opacity)) !important;
|
|
1200
|
+
}
|
|
1201
|
+
|
|
1173
1202
|
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
|
|
1174
1203
|
--tw-divide-opacity: 1;
|
|
1175
1204
|
border-color: rgb(243 244 246 / var(--tw-divide-opacity));
|
|
@@ -1201,10 +1230,6 @@ select {
|
|
|
1201
1230
|
border-radius: 9999px;
|
|
1202
1231
|
}
|
|
1203
1232
|
|
|
1204
|
-
.rounded-md {
|
|
1205
|
-
border-radius: 0.375rem;
|
|
1206
|
-
}
|
|
1207
|
-
|
|
1208
1233
|
.rounded {
|
|
1209
1234
|
border-radius: 0.25rem;
|
|
1210
1235
|
}
|
|
@@ -1213,29 +1238,34 @@ select {
|
|
|
1213
1238
|
border-radius: 0px;
|
|
1214
1239
|
}
|
|
1215
1240
|
|
|
1216
|
-
.rounded-r-md {
|
|
1217
|
-
border-top-right-radius: 0.375rem;
|
|
1218
|
-
border-bottom-right-radius: 0.375rem;
|
|
1219
|
-
}
|
|
1220
|
-
|
|
1221
1241
|
.\!rounded-r-none {
|
|
1222
1242
|
border-top-right-radius: 0px !important;
|
|
1223
1243
|
border-bottom-right-radius: 0px !important;
|
|
1224
1244
|
}
|
|
1225
1245
|
|
|
1226
|
-
|
|
1227
|
-
border-top-left-radius:
|
|
1228
|
-
border-bottom-left-radius:
|
|
1246
|
+
.rounded-l-none {
|
|
1247
|
+
border-top-left-radius: 0px;
|
|
1248
|
+
border-bottom-left-radius: 0px;
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
.rounded-r {
|
|
1252
|
+
border-top-right-radius: 0.25rem;
|
|
1253
|
+
border-bottom-right-radius: 0.25rem;
|
|
1229
1254
|
}
|
|
1230
1255
|
|
|
1231
|
-
.\!rounded-
|
|
1232
|
-
border-top-
|
|
1233
|
-
border-bottom-
|
|
1256
|
+
.\!rounded-l {
|
|
1257
|
+
border-top-left-radius: 0.25rem !important;
|
|
1258
|
+
border-bottom-left-radius: 0.25rem !important;
|
|
1234
1259
|
}
|
|
1235
1260
|
|
|
1236
|
-
|
|
1237
|
-
border-top-
|
|
1238
|
-
border-bottom-
|
|
1261
|
+
.\!rounded-r {
|
|
1262
|
+
border-top-right-radius: 0.25rem !important;
|
|
1263
|
+
border-bottom-right-radius: 0.25rem !important;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
.rounded-l {
|
|
1267
|
+
border-top-left-radius: 0.25rem;
|
|
1268
|
+
border-bottom-left-radius: 0.25rem;
|
|
1239
1269
|
}
|
|
1240
1270
|
|
|
1241
1271
|
.border-8 {
|
|
@@ -1250,6 +1280,10 @@ select {
|
|
|
1250
1280
|
border-width: 2px;
|
|
1251
1281
|
}
|
|
1252
1282
|
|
|
1283
|
+
.\!border-r-0 {
|
|
1284
|
+
border-right-width: 0px !important;
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1253
1287
|
.\!border-l-0 {
|
|
1254
1288
|
border-left-width: 0px !important;
|
|
1255
1289
|
}
|
|
@@ -1260,7 +1294,17 @@ select {
|
|
|
1260
1294
|
|
|
1261
1295
|
.border-purple-700 {
|
|
1262
1296
|
--tw-border-opacity: 1;
|
|
1263
|
-
border-color: rgb(
|
|
1297
|
+
border-color: rgb(88 0 212 / var(--tw-border-opacity));
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
.border-purple-600 {
|
|
1301
|
+
--tw-border-opacity: 1;
|
|
1302
|
+
border-color: rgb(105 44 216 / var(--tw-border-opacity));
|
|
1303
|
+
}
|
|
1304
|
+
|
|
1305
|
+
.border-purple-100 {
|
|
1306
|
+
--tw-border-opacity: 1;
|
|
1307
|
+
border-color: rgb(222 204 246 / var(--tw-border-opacity));
|
|
1264
1308
|
}
|
|
1265
1309
|
|
|
1266
1310
|
.border-gray-300 {
|
|
@@ -1273,6 +1317,16 @@ select {
|
|
|
1273
1317
|
border-color: rgb(252 165 165 / var(--tw-border-opacity));
|
|
1274
1318
|
}
|
|
1275
1319
|
|
|
1320
|
+
.\!border-purple-700 {
|
|
1321
|
+
--tw-border-opacity: 1 !important;
|
|
1322
|
+
border-color: rgb(88 0 212 / var(--tw-border-opacity)) !important;
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
.\!border-purple-200 {
|
|
1326
|
+
--tw-border-opacity: 1 !important;
|
|
1327
|
+
border-color: rgb(205 179 242 / var(--tw-border-opacity)) !important;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1276
1330
|
.border-red-500 {
|
|
1277
1331
|
--tw-border-opacity: 1;
|
|
1278
1332
|
border-color: rgb(239 68 68 / var(--tw-border-opacity));
|
|
@@ -1284,7 +1338,7 @@ select {
|
|
|
1284
1338
|
|
|
1285
1339
|
.border-purple-500 {
|
|
1286
1340
|
--tw-border-opacity: 1;
|
|
1287
|
-
border-color: rgb(
|
|
1341
|
+
border-color: rgb(121 51 221 / var(--tw-border-opacity));
|
|
1288
1342
|
}
|
|
1289
1343
|
|
|
1290
1344
|
.\!border-red-500 {
|
|
@@ -1344,17 +1398,17 @@ select {
|
|
|
1344
1398
|
|
|
1345
1399
|
.bg-green-400 {
|
|
1346
1400
|
--tw-bg-opacity: 1;
|
|
1347
|
-
background-color: rgb(
|
|
1401
|
+
background-color: rgb(52 211 153 / var(--tw-bg-opacity));
|
|
1348
1402
|
}
|
|
1349
1403
|
|
|
1350
1404
|
.bg-purple-600 {
|
|
1351
1405
|
--tw-bg-opacity: 1;
|
|
1352
|
-
background-color: rgb(
|
|
1406
|
+
background-color: rgb(105 44 216 / var(--tw-bg-opacity));
|
|
1353
1407
|
}
|
|
1354
1408
|
|
|
1355
1409
|
.bg-purple-100 {
|
|
1356
1410
|
--tw-bg-opacity: 1;
|
|
1357
|
-
background-color: rgb(
|
|
1411
|
+
background-color: rgb(222 204 246 / var(--tw-bg-opacity));
|
|
1358
1412
|
}
|
|
1359
1413
|
|
|
1360
1414
|
.bg-white {
|
|
@@ -1367,6 +1421,36 @@ select {
|
|
|
1367
1421
|
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
|
|
1368
1422
|
}
|
|
1369
1423
|
|
|
1424
|
+
.bg-purple-700 {
|
|
1425
|
+
--tw-bg-opacity: 1;
|
|
1426
|
+
background-color: rgb(88 0 212 / var(--tw-bg-opacity));
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
.bg-purple-200 {
|
|
1430
|
+
--tw-bg-opacity: 1;
|
|
1431
|
+
background-color: rgb(205 179 242 / var(--tw-bg-opacity));
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.\!bg-purple-600 {
|
|
1435
|
+
--tw-bg-opacity: 1 !important;
|
|
1436
|
+
background-color: rgb(105 44 216 / var(--tw-bg-opacity)) !important;
|
|
1437
|
+
}
|
|
1438
|
+
|
|
1439
|
+
.\!bg-purple-100 {
|
|
1440
|
+
--tw-bg-opacity: 1 !important;
|
|
1441
|
+
background-color: rgb(222 204 246 / var(--tw-bg-opacity)) !important;
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
.\!bg-purple-800 {
|
|
1445
|
+
--tw-bg-opacity: 1 !important;
|
|
1446
|
+
background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
.\!bg-purple-300 {
|
|
1450
|
+
--tw-bg-opacity: 1 !important;
|
|
1451
|
+
background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;
|
|
1452
|
+
}
|
|
1453
|
+
|
|
1370
1454
|
.bg-gray-200 {
|
|
1371
1455
|
--tw-bg-opacity: 1;
|
|
1372
1456
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
|
@@ -1374,7 +1458,7 @@ select {
|
|
|
1374
1458
|
|
|
1375
1459
|
.bg-purple-500 {
|
|
1376
1460
|
--tw-bg-opacity: 1;
|
|
1377
|
-
background-color: rgb(
|
|
1461
|
+
background-color: rgb(121 51 221 / var(--tw-bg-opacity));
|
|
1378
1462
|
}
|
|
1379
1463
|
|
|
1380
1464
|
.bg-gray-50 {
|
|
@@ -1415,11 +1499,6 @@ select {
|
|
|
1415
1499
|
padding-bottom: 0.25rem;
|
|
1416
1500
|
}
|
|
1417
1501
|
|
|
1418
|
-
.py-16 {
|
|
1419
|
-
padding-top: 4rem;
|
|
1420
|
-
padding-bottom: 4rem;
|
|
1421
|
-
}
|
|
1422
|
-
|
|
1423
1502
|
.px-3 {
|
|
1424
1503
|
padding-left: 0.75rem;
|
|
1425
1504
|
padding-right: 0.75rem;
|
|
@@ -1439,10 +1518,6 @@ select {
|
|
|
1439
1518
|
padding-left: 0.75rem;
|
|
1440
1519
|
}
|
|
1441
1520
|
|
|
1442
|
-
.pr-10 {
|
|
1443
|
-
padding-right: 2.5rem;
|
|
1444
|
-
}
|
|
1445
|
-
|
|
1446
1521
|
.pr-9 {
|
|
1447
1522
|
padding-right: 2.25rem;
|
|
1448
1523
|
}
|
|
@@ -1451,6 +1526,10 @@ select {
|
|
|
1451
1526
|
padding-right: 1rem;
|
|
1452
1527
|
}
|
|
1453
1528
|
|
|
1529
|
+
.pl-1 {
|
|
1530
|
+
padding-left: 0.25rem;
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1454
1533
|
.pl-0 {
|
|
1455
1534
|
padding-left: 0px;
|
|
1456
1535
|
}
|
|
@@ -1459,6 +1538,10 @@ select {
|
|
|
1459
1538
|
padding-left: 0.5rem;
|
|
1460
1539
|
}
|
|
1461
1540
|
|
|
1541
|
+
.pr-10 {
|
|
1542
|
+
padding-right: 2.5rem;
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1462
1545
|
.pl-10 {
|
|
1463
1546
|
padding-left: 2.5rem;
|
|
1464
1547
|
}
|
|
@@ -1513,7 +1596,7 @@ select {
|
|
|
1513
1596
|
}
|
|
1514
1597
|
|
|
1515
1598
|
.font-medium {
|
|
1516
|
-
font-weight:
|
|
1599
|
+
font-weight: 600;
|
|
1517
1600
|
}
|
|
1518
1601
|
|
|
1519
1602
|
.font-semibold {
|
|
@@ -1553,7 +1636,7 @@ select {
|
|
|
1553
1636
|
|
|
1554
1637
|
.text-purple-700 {
|
|
1555
1638
|
--tw-text-opacity: 1;
|
|
1556
|
-
color: rgb(
|
|
1639
|
+
color: rgb(88 0 212 / var(--tw-text-opacity));
|
|
1557
1640
|
}
|
|
1558
1641
|
|
|
1559
1642
|
.text-gray-700 {
|
|
@@ -1561,6 +1644,26 @@ select {
|
|
|
1561
1644
|
color: rgb(55 65 81 / var(--tw-text-opacity));
|
|
1562
1645
|
}
|
|
1563
1646
|
|
|
1647
|
+
.\!text-white {
|
|
1648
|
+
--tw-text-opacity: 1 !important;
|
|
1649
|
+
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
.\!text-purple-700 {
|
|
1653
|
+
--tw-text-opacity: 1 !important;
|
|
1654
|
+
color: rgb(88 0 212 / var(--tw-text-opacity)) !important;
|
|
1655
|
+
}
|
|
1656
|
+
|
|
1657
|
+
.\!text-gray-600 {
|
|
1658
|
+
--tw-text-opacity: 1 !important;
|
|
1659
|
+
color: rgb(75 85 99 / var(--tw-text-opacity)) !important;
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
.\!text-purple-600 {
|
|
1663
|
+
--tw-text-opacity: 1 !important;
|
|
1664
|
+
color: rgb(105 44 216 / var(--tw-text-opacity)) !important;
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1564
1667
|
.text-gray-400 {
|
|
1565
1668
|
--tw-text-opacity: 1;
|
|
1566
1669
|
color: rgb(156 163 175 / var(--tw-text-opacity));
|
|
@@ -1573,7 +1676,7 @@ select {
|
|
|
1573
1676
|
|
|
1574
1677
|
.text-purple-600 {
|
|
1575
1678
|
--tw-text-opacity: 1;
|
|
1576
|
-
color: rgb(
|
|
1679
|
+
color: rgb(105 44 216 / var(--tw-text-opacity));
|
|
1577
1680
|
}
|
|
1578
1681
|
|
|
1579
1682
|
.text-red-500 {
|
|
@@ -1581,14 +1684,14 @@ select {
|
|
|
1581
1684
|
color: rgb(239 68 68 / var(--tw-text-opacity));
|
|
1582
1685
|
}
|
|
1583
1686
|
|
|
1584
|
-
.text-gray-
|
|
1687
|
+
.text-gray-500 {
|
|
1585
1688
|
--tw-text-opacity: 1;
|
|
1586
|
-
color: rgb(
|
|
1689
|
+
color: rgb(107 114 128 / var(--tw-text-opacity));
|
|
1587
1690
|
}
|
|
1588
1691
|
|
|
1589
|
-
.text-gray-
|
|
1692
|
+
.text-gray-200 {
|
|
1590
1693
|
--tw-text-opacity: 1;
|
|
1591
|
-
color: rgb(
|
|
1694
|
+
color: rgb(229 231 235 / var(--tw-text-opacity));
|
|
1592
1695
|
}
|
|
1593
1696
|
|
|
1594
1697
|
.text-gray-700\/\[\.5\] {
|
|
@@ -1597,7 +1700,7 @@ select {
|
|
|
1597
1700
|
|
|
1598
1701
|
.text-purple-500 {
|
|
1599
1702
|
--tw-text-opacity: 1;
|
|
1600
|
-
color: rgb(
|
|
1703
|
+
color: rgb(121 51 221 / var(--tw-text-opacity));
|
|
1601
1704
|
}
|
|
1602
1705
|
|
|
1603
1706
|
.opacity-50 {
|
|
@@ -1612,10 +1715,8 @@ select {
|
|
|
1612
1715
|
opacity: 1;
|
|
1613
1716
|
}
|
|
1614
1717
|
|
|
1615
|
-
.
|
|
1616
|
-
|
|
1617
|
-
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
1618
|
-
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1718
|
+
.opacity-60 {
|
|
1719
|
+
opacity: 0.6;
|
|
1619
1720
|
}
|
|
1620
1721
|
|
|
1621
1722
|
.shadow-lg {
|
|
@@ -1624,6 +1725,12 @@ select {
|
|
|
1624
1725
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1625
1726
|
}
|
|
1626
1727
|
|
|
1728
|
+
.shadow-sm {
|
|
1729
|
+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
1730
|
+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
1731
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1627
1734
|
.shadow-none {
|
|
1628
1735
|
--tw-shadow: 0 0 #0000;
|
|
1629
1736
|
--tw-shadow-colored: 0 0 #0000;
|
|
@@ -1635,7 +1742,7 @@ select {
|
|
|
1635
1742
|
}
|
|
1636
1743
|
|
|
1637
1744
|
.outline-purple-500 {
|
|
1638
|
-
outline-color: #
|
|
1745
|
+
outline-color: #7933DD;
|
|
1639
1746
|
}
|
|
1640
1747
|
|
|
1641
1748
|
.\!outline-red-500 {
|
|
@@ -1741,14 +1848,37 @@ select {
|
|
|
1741
1848
|
z-index: 10;
|
|
1742
1849
|
}
|
|
1743
1850
|
|
|
1851
|
+
.hover\:\!border-r-0:hover {
|
|
1852
|
+
border-right-width: 0px !important;
|
|
1853
|
+
}
|
|
1854
|
+
|
|
1855
|
+
.hover\:\!border-l-0:hover {
|
|
1856
|
+
border-left-width: 0px !important;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
.hover\:border-purple-700:hover {
|
|
1860
|
+
--tw-border-opacity: 1;
|
|
1861
|
+
border-color: rgb(88 0 212 / var(--tw-border-opacity));
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.hover\:border-purple-200:hover {
|
|
1865
|
+
--tw-border-opacity: 1;
|
|
1866
|
+
border-color: rgb(205 179 242 / var(--tw-border-opacity));
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.hover\:border-gray-300:hover {
|
|
1870
|
+
--tw-border-opacity: 1;
|
|
1871
|
+
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
|
1872
|
+
}
|
|
1873
|
+
|
|
1744
1874
|
.hover\:bg-purple-700:hover {
|
|
1745
1875
|
--tw-bg-opacity: 1;
|
|
1746
|
-
background-color: rgb(
|
|
1876
|
+
background-color: rgb(88 0 212 / var(--tw-bg-opacity));
|
|
1747
1877
|
}
|
|
1748
1878
|
|
|
1749
1879
|
.hover\:bg-purple-200:hover {
|
|
1750
1880
|
--tw-bg-opacity: 1;
|
|
1751
|
-
background-color: rgb(
|
|
1881
|
+
background-color: rgb(205 179 242 / var(--tw-bg-opacity));
|
|
1752
1882
|
}
|
|
1753
1883
|
|
|
1754
1884
|
.hover\:bg-gray-50:hover {
|
|
@@ -1761,6 +1891,11 @@ select {
|
|
|
1761
1891
|
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
|
|
1762
1892
|
}
|
|
1763
1893
|
|
|
1894
|
+
.hover\:bg-white:hover {
|
|
1895
|
+
--tw-bg-opacity: 1;
|
|
1896
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
1897
|
+
}
|
|
1898
|
+
|
|
1764
1899
|
.hover\:bg-gray-100:hover {
|
|
1765
1900
|
--tw-bg-opacity: 1;
|
|
1766
1901
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
|
@@ -1768,7 +1903,7 @@ select {
|
|
|
1768
1903
|
|
|
1769
1904
|
.hover\:text-purple-700:hover {
|
|
1770
1905
|
--tw-text-opacity: 1;
|
|
1771
|
-
color: rgb(
|
|
1906
|
+
color: rgb(88 0 212 / var(--tw-text-opacity));
|
|
1772
1907
|
}
|
|
1773
1908
|
|
|
1774
1909
|
.hover\:text-gray-700:hover {
|
|
@@ -1798,7 +1933,12 @@ select {
|
|
|
1798
1933
|
|
|
1799
1934
|
.focus\:border-purple-500:focus {
|
|
1800
1935
|
--tw-border-opacity: 1;
|
|
1801
|
-
border-color: rgb(
|
|
1936
|
+
border-color: rgb(121 51 221 / var(--tw-border-opacity));
|
|
1937
|
+
}
|
|
1938
|
+
|
|
1939
|
+
.focus\:bg-purple-300:focus {
|
|
1940
|
+
--tw-bg-opacity: 1;
|
|
1941
|
+
background-color: rgb(188 153 238 / var(--tw-bg-opacity));
|
|
1802
1942
|
}
|
|
1803
1943
|
|
|
1804
1944
|
.focus\:outline-none:focus {
|
|
@@ -1814,7 +1954,7 @@ select {
|
|
|
1814
1954
|
|
|
1815
1955
|
.focus\:ring-purple-500:focus {
|
|
1816
1956
|
--tw-ring-opacity: 1;
|
|
1817
|
-
--tw-ring-color: rgb(
|
|
1957
|
+
--tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity));
|
|
1818
1958
|
}
|
|
1819
1959
|
|
|
1820
1960
|
.focus\:ring-red-500:focus {
|
|
@@ -1837,6 +1977,51 @@ select {
|
|
|
1837
1977
|
--tw-ring-opacity: 0.75;
|
|
1838
1978
|
}
|
|
1839
1979
|
|
|
1980
|
+
.active\:border-purple-800:active {
|
|
1981
|
+
--tw-border-opacity: 1;
|
|
1982
|
+
border-color: rgb(79 0 191 / var(--tw-border-opacity));
|
|
1983
|
+
}
|
|
1984
|
+
|
|
1985
|
+
.active\:border-purple-300:active {
|
|
1986
|
+
--tw-border-opacity: 1;
|
|
1987
|
+
border-color: rgb(188 153 238 / var(--tw-border-opacity));
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
.active\:\!border-purple-800:active {
|
|
1991
|
+
--tw-border-opacity: 1 !important;
|
|
1992
|
+
border-color: rgb(79 0 191 / var(--tw-border-opacity)) !important;
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
.active\:\!border-purple-300:active {
|
|
1996
|
+
--tw-border-opacity: 1 !important;
|
|
1997
|
+
border-color: rgb(188 153 238 / var(--tw-border-opacity)) !important;
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
.active\:bg-purple-800:active {
|
|
2001
|
+
--tw-bg-opacity: 1;
|
|
2002
|
+
background-color: rgb(79 0 191 / var(--tw-bg-opacity));
|
|
2003
|
+
}
|
|
2004
|
+
|
|
2005
|
+
.active\:bg-purple-300:active {
|
|
2006
|
+
--tw-bg-opacity: 1;
|
|
2007
|
+
background-color: rgb(188 153 238 / var(--tw-bg-opacity));
|
|
2008
|
+
}
|
|
2009
|
+
|
|
2010
|
+
.active\:bg-gray-100:active {
|
|
2011
|
+
--tw-bg-opacity: 1;
|
|
2012
|
+
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
|
2013
|
+
}
|
|
2014
|
+
|
|
2015
|
+
.active\:\!bg-purple-800:active {
|
|
2016
|
+
--tw-bg-opacity: 1 !important;
|
|
2017
|
+
background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
.active\:\!bg-purple-300:active {
|
|
2021
|
+
--tw-bg-opacity: 1 !important;
|
|
2022
|
+
background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;
|
|
2023
|
+
}
|
|
2024
|
+
|
|
1840
2025
|
.group:hover .group-hover\:block {
|
|
1841
2026
|
display: block;
|
|
1842
2027
|
}
|
|
@@ -1851,10 +2036,14 @@ select {
|
|
|
1851
2036
|
color: rgb(239 68 68 / var(--tw-text-opacity));
|
|
1852
2037
|
}
|
|
1853
2038
|
|
|
2039
|
+
.group:hover .group-hover\:opacity-100 {
|
|
2040
|
+
opacity: 1;
|
|
2041
|
+
}
|
|
2042
|
+
|
|
1854
2043
|
@media (prefers-color-scheme: dark) {
|
|
1855
2044
|
.dark\:text-purple-500 {
|
|
1856
2045
|
--tw-text-opacity: 1;
|
|
1857
|
-
color: rgb(
|
|
2046
|
+
color: rgb(121 51 221 / var(--tw-text-opacity));
|
|
1858
2047
|
}
|
|
1859
2048
|
}
|
|
1860
2049
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export interface AvatarProps {
|
|
3
|
+
/**
|
|
4
|
+
* source url for the avatar
|
|
5
|
+
*/
|
|
6
|
+
src?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Initials we use as fallback if no src is passed
|
|
9
|
+
*/
|
|
10
|
+
initials?: string;
|
|
11
|
+
/**
|
|
12
|
+
* optional status
|
|
13
|
+
*/
|
|
14
|
+
status?: 'offline' | 'online' | 'busy';
|
|
15
|
+
/**
|
|
16
|
+
* avatar picture size (also affects status indicator)
|
|
17
|
+
*/
|
|
18
|
+
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
19
|
+
/**
|
|
20
|
+
* avatar img alt
|
|
21
|
+
*/
|
|
22
|
+
alt?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Avatar component that shows profile image or name initials of the user
|
|
26
|
+
*/
|
|
27
|
+
export declare const Avatar: FC<AvatarProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react/types-6-0';
|
|
2
|
+
import { Story } from '@storybook/react';
|
|
3
|
+
import { AvatarProps } from './Avatar';
|
|
4
|
+
declare const _default: Meta<import("@storybook/react").Args>;
|
|
5
|
+
export default _default;
|
|
6
|
+
export declare const AvatarIcon: Story<AvatarProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Avatar';
|