@jackcrane/ui 0.1.15 → 0.1.17

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 (3) hide show
  1. package/dist/jcui.cjs.js +142 -140
  2. package/dist/jcui.es.js +142 -140
  3. package/package.json +2 -1
package/dist/jcui.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
1
+ (function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
2
2
  syntax: "<color>";
3
3
  inherits: true;
4
4
  initial-value: transparent;
@@ -988,7 +988,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
988
988
  inherits: true;
989
989
  initial-value: transparent;
990
990
  }
991
- ._trigger_1u214_7 {
991
+ ._trigger_dqtrb_7 {
992
992
  display: inline-flex;
993
993
  align-items: center;
994
994
  justify-content: space-between;
@@ -1000,101 +1000,102 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1000
1000
  border: var(--border-thickness) solid var(--border-color);
1001
1001
  cursor: pointer;
1002
1002
  }
1003
- ._trigger_1u214_7:hover {
1003
+ ._trigger_dqtrb_7:hover {
1004
1004
  --select-bg: var(--secondary-color-100);
1005
1005
  }
1006
- ._trigger_1u214_7:active {
1006
+ ._trigger_dqtrb_7:active {
1007
1007
  --select-bg: var(--secondary-color-200);
1008
1008
  }
1009
- ._large_1u214_31 {
1009
+ ._large_dqtrb_31 {
1010
1010
  font-size: 1.25rem;
1011
1011
  padding: 0.75rem 1.25rem;
1012
1012
  }
1013
- ._small_1u214_36 {
1013
+ ._small_dqtrb_36 {
1014
1014
  font-size: 0.75rem;
1015
1015
  padding: 0.25rem 0.5rem;
1016
1016
  }
1017
- ._disabled_1u214_41 {
1017
+ ._disabled_dqtrb_41 {
1018
1018
  opacity: 0.5;
1019
1019
  cursor: not-allowed;
1020
1020
  }
1021
- ._icon_1u214_46 {
1021
+ ._icon_dqtrb_46 {
1022
1022
  opacity: 0.7;
1023
1023
  }
1024
1024
  /* Dropdown */
1025
- ._content_1u214_52 {
1025
+ ._content_dqtrb_52 {
1026
1026
  background-color: var(--body-bg);
1027
1027
  border: var(--border-thickness) solid var(--border-color);
1028
+ z-index: 110;
1028
1029
  }
1029
- ._item_1u214_57 {
1030
+ ._item_dqtrb_58 {
1030
1031
  padding: 0.4rem 0.6rem;
1031
1032
  font-size: 0.875rem;
1032
1033
  cursor: pointer;
1033
1034
  outline: none;
1034
1035
  }
1035
- ._item_1u214_57[data-highlighted] {
1036
+ ._item_dqtrb_58[data-highlighted] {
1036
1037
  background-color: var(--secondary-color-100);
1037
1038
  }
1038
- ._item_1u214_57[data-state="checked"] {
1039
+ ._item_dqtrb_58[data-state="checked"] {
1039
1040
  background-color: var(--secondary-color-200);
1040
1041
  }
1041
- ._item_1u214_57[data-disabled] {
1042
+ ._item_dqtrb_58[data-disabled] {
1042
1043
  opacity: 0.4;
1043
1044
  pointer-events: none;
1044
1045
  }
1045
1046
  /* Variants (match Button) */
1046
- ._primary_1u214_79 {
1047
+ ._primary_dqtrb_80 {
1047
1048
  --select-bg: var(--primary-color-100);
1048
1049
  --border-color: var(--primary-color-300);
1049
1050
  --button-color: var(--primary-color-800);
1050
1051
  --border-accent-color: var(--primary-color-600);
1051
1052
  }
1052
- ._primary_1u214_79:hover {
1053
+ ._primary_dqtrb_80:hover {
1053
1054
  --select-bg: var(--primary-color-200);
1054
1055
  }
1055
- ._success_1u214_89 {
1056
+ ._success_dqtrb_90 {
1056
1057
  --select-bg: var(--success-color-100);
1057
1058
  --border-color: var(--success-color-300);
1058
1059
  --button-color: var(--success-color-800);
1059
1060
  --border-accent-color: var(--success-color-600);
1060
1061
  }
1061
- ._success_1u214_89:hover {
1062
+ ._success_dqtrb_90:hover {
1062
1063
  --select-bg: var(--success-color-200);
1063
1064
  }
1064
- ._warning_1u214_99 {
1065
+ ._warning_dqtrb_100 {
1065
1066
  --select-bg: var(--warning-color-100);
1066
1067
  --border-color: var(--warning-color-300);
1067
1068
  --button-color: var(--warning-color-800);
1068
1069
  --border-accent-color: var(--warning-color-600);
1069
1070
  }
1070
- ._warning_1u214_99:hover {
1071
+ ._warning_dqtrb_100:hover {
1071
1072
  --select-bg: var(--warning-color-200);
1072
1073
  }
1073
- ._danger_1u214_109 {
1074
+ ._danger_dqtrb_110 {
1074
1075
  --select-bg: var(--danger-color-100);
1075
1076
  --border-color: var(--danger-color-300);
1076
1077
  --button-color: var(--danger-color-800);
1077
1078
  --border-accent-color: var(--danger-color-600);
1078
1079
  }
1079
- ._danger_1u214_109:hover {
1080
+ ._danger_dqtrb_110:hover {
1080
1081
  --select-bg: var(--danger-color-200);
1081
1082
  }
1082
- ._info_1u214_119 {
1083
+ ._info_dqtrb_120 {
1083
1084
  --select-bg: var(--info-color-100);
1084
1085
  --border-color: var(--info-color-300);
1085
1086
  --button-color: var(--info-color-800);
1086
1087
  --border-accent-color: var(--info-color-600);
1087
1088
  }
1088
- ._info_1u214_119:hover {
1089
+ ._info_dqtrb_120:hover {
1089
1090
  --select-bg: var(--info-color-200);
1090
1091
  }
1091
- ._secondary_1u214_129 {
1092
+ ._secondary_dqtrb_130 {
1092
1093
  --select-bg: var(--secondary-color-100);
1093
1094
  --border-color: var(--secondary-color-300);
1094
1095
  --button-color: var(--secondary-color-800);
1095
1096
  --border-accent-color: var(--secondary-color-600);
1096
1097
  }
1097
- ._secondary_1u214_129:hover {
1098
+ ._secondary_dqtrb_130:hover {
1098
1099
  --select-bg: var(--secondary-color-200);
1099
1100
  }
1100
1101
  @property --segment-bg {
@@ -1122,7 +1123,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1122
1123
  inherits: true;
1123
1124
  initial-value: inherit;
1124
1125
  }
1125
- ._root_1dix2_31 {
1126
+ ._root_wrsjc_31 {
1126
1127
  --segment-bg: var(--body-bg);
1127
1128
  --segment-item-hover-bg: var(--secondary-color-100);
1128
1129
  --segment-item-active-bg: var(--secondary-color-300);
@@ -1132,10 +1133,11 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1132
1133
  display: inline-flex;
1133
1134
  align-items: stretch;
1134
1135
  justify-content: flex-start;
1136
+ isolation: isolate;
1135
1137
  background-color: var(--segment-bg);
1136
1138
  color: var(--segment-item-color);
1137
1139
  }
1138
- ._item_1dix2_46 {
1140
+ ._item_wrsjc_47 {
1139
1141
  all: unset;
1140
1142
  box-sizing: border-box;
1141
1143
  position: relative;
@@ -1154,23 +1156,23 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1154
1156
  border-left: var(--border-thickness) solid var(--border-color);
1155
1157
  margin-right: calc(-1 * var(--border-thickness));
1156
1158
  }
1157
- ._item_1dix2_46:last-child {
1159
+ ._item_wrsjc_47:last-child {
1158
1160
  border-right: var(--border-thickness) solid var(--border-color);
1159
1161
  margin-right: 0;
1160
1162
  }
1161
- ._item_1dix2_46:hover {
1163
+ ._item_wrsjc_47:hover {
1162
1164
  background-color: var(--segment-item-hover-bg);
1163
1165
  }
1164
- ._item_1dix2_46:focus-visible {
1166
+ ._item_wrsjc_47:focus-visible {
1165
1167
  outline: none;
1166
1168
  box-shadow: inset 0 0 0 1px var(--border-accent-color);
1167
1169
  }
1168
- ._item_1dix2_46[data-state="on"] {
1170
+ ._item_wrsjc_47[data-state="on"] {
1169
1171
  background-color: var(--segment-item-active-bg);
1170
1172
  color: var(--segment-item-active-color);
1171
1173
  z-index: 1;
1172
1174
  }
1173
- ._chamferEnabled_1dix2_86 ._item_1dix2_46[data-state="on"]::after {
1175
+ ._chamferEnabled_wrsjc_87 ._item_wrsjc_47[data-state="on"]::after {
1174
1176
  content: "";
1175
1177
  position: absolute;
1176
1178
  top: calc(-1 * var(--border-thickness));
@@ -1199,30 +1201,30 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1199
1201
  linear-gradient(var(--chamfer-color), var(--chamfer-color)) left bottom /
1200
1202
  var(--bt) var(--cd) no-repeat;
1201
1203
  }
1202
- ._chamferEnabled_1dix2_86 ._item_1dix2_46[data-state="on"]:last-child::after {
1204
+ ._chamferEnabled_wrsjc_87 ._item_wrsjc_47[data-state="on"]:last-child::after {
1203
1205
  right: calc(-1 * var(--border-thickness));
1204
1206
  }
1205
- ._item_1dix2_46[data-disabled] {
1207
+ ._item_wrsjc_47[data-disabled] {
1206
1208
  opacity: 0.5;
1207
1209
  pointer-events: none;
1208
1210
  }
1209
- ._large_1dix2_126 ._item_1dix2_46 {
1211
+ ._large_wrsjc_127 ._item_wrsjc_47 {
1210
1212
  font-size: 1.25rem;
1211
1213
  padding: 0.75rem 1.25rem;
1212
1214
  }
1213
- ._small_1dix2_131 ._item_1dix2_46 {
1215
+ ._small_wrsjc_132 ._item_wrsjc_47 {
1214
1216
  font-size: 0.75rem;
1215
1217
  padding: 0.25rem 0.5rem;
1216
1218
  }
1217
- ._disabled_1dix2_136 {
1219
+ ._disabled_wrsjc_137 {
1218
1220
  opacity: 0.6;
1219
1221
  cursor: not-allowed;
1220
1222
  }
1221
- ._itemDisabled_1dix2_141 {
1223
+ ._itemDisabled_wrsjc_142 {
1222
1224
  cursor: not-allowed;
1223
1225
  }
1224
1226
  /* Variants */
1225
- ._primary_1dix2_147 {
1227
+ ._primary_wrsjc_148 {
1226
1228
  --segment-bg: var(--primary-color-100);
1227
1229
  --border-color: var(--primary-color-300);
1228
1230
  --border-accent-color: var(--primary-color-600);
@@ -1231,7 +1233,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1231
1233
  --segment-item-color: var(--primary-color-800);
1232
1234
  --segment-item-active-color: var(--primary-color-900);
1233
1235
  }
1234
- ._secondary_1dix2_157 {
1236
+ ._secondary_wrsjc_158 {
1235
1237
  --segment-bg: var(--secondary-color-100);
1236
1238
  --border-color: var(--secondary-color-300);
1237
1239
  --border-accent-color: var(--secondary-color-600);
@@ -1240,7 +1242,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1240
1242
  --segment-item-color: var(--secondary-color-800);
1241
1243
  --segment-item-active-color: var(--secondary-color-900);
1242
1244
  }
1243
- ._success_1dix2_167 {
1245
+ ._success_wrsjc_168 {
1244
1246
  --segment-bg: var(--success-color-100);
1245
1247
  --border-color: var(--success-color-300);
1246
1248
  --border-accent-color: var(--success-color-600);
@@ -1249,7 +1251,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1249
1251
  --segment-item-color: var(--success-color-800);
1250
1252
  --segment-item-active-color: var(--success-color-900);
1251
1253
  }
1252
- ._warning_1dix2_177 {
1254
+ ._warning_wrsjc_178 {
1253
1255
  --segment-bg: var(--warning-color-100);
1254
1256
  --border-color: var(--warning-color-300);
1255
1257
  --border-accent-color: var(--warning-color-600);
@@ -1258,7 +1260,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1258
1260
  --segment-item-color: var(--warning-color-800);
1259
1261
  --segment-item-active-color: var(--warning-color-900);
1260
1262
  }
1261
- ._danger_1dix2_187 {
1263
+ ._danger_wrsjc_188 {
1262
1264
  --segment-bg: var(--danger-color-100);
1263
1265
  --border-color: var(--danger-color-300);
1264
1266
  --border-accent-color: var(--danger-color-600);
@@ -1267,7 +1269,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1267
1269
  --segment-item-color: var(--danger-color-800);
1268
1270
  --segment-item-active-color: var(--danger-color-900);
1269
1271
  }
1270
- ._info_1dix2_197 {
1272
+ ._info_wrsjc_198 {
1271
1273
  --segment-bg: var(--info-color-100);
1272
1274
  --border-color: var(--info-color-300);
1273
1275
  --border-accent-color: var(--info-color-600);
@@ -1281,7 +1283,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1281
1283
  inherits: true;
1282
1284
  initial-value: transparent;
1283
1285
  }
1284
- ._trigger_7ctf7_7 {
1286
+ ._trigger_131sy_7 {
1285
1287
  display: inline-flex;
1286
1288
  align-items: center;
1287
1289
  justify-content: space-between;
@@ -1294,38 +1296,38 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1294
1296
  color: var(--button-color, inherit);
1295
1297
  cursor: pointer;
1296
1298
  }
1297
- ._trigger_7ctf7_7:hover {
1299
+ ._trigger_131sy_7:hover {
1298
1300
  --dropdown-bg: var(--secondary-color-100);
1299
1301
  }
1300
- ._trigger_7ctf7_7:active {
1302
+ ._trigger_131sy_7:active {
1301
1303
  --dropdown-bg: var(--secondary-color-200);
1302
1304
  }
1303
- ._pageBackground_7ctf7_29 {
1305
+ ._pageBackground_131sy_29 {
1304
1306
  --dropdown-bg: var(--body-bg);
1305
1307
  --button-bg: var(--body-bg);
1306
1308
  }
1307
- ._pageBackground_7ctf7_29:hover,
1308
- ._pageBackground_7ctf7_29:active {
1309
+ ._pageBackground_131sy_29:hover,
1310
+ ._pageBackground_131sy_29:active {
1309
1311
  --dropdown-bg: var(--body-bg);
1310
1312
  --button-bg: var(--body-bg);
1311
1313
  }
1312
- ._large_7ctf7_40 {
1314
+ ._large_131sy_40 {
1313
1315
  font-size: 1.25rem;
1314
1316
  padding: 0.75rem 1.25rem;
1315
1317
  }
1316
- ._small_7ctf7_45 {
1318
+ ._small_131sy_45 {
1317
1319
  font-size: 0.75rem;
1318
1320
  padding: 0.25rem 0.5rem;
1319
1321
  }
1320
- ._disabled_7ctf7_50 {
1322
+ ._disabled_131sy_50 {
1321
1323
  opacity: 0.5;
1322
1324
  cursor: not-allowed;
1323
1325
  }
1324
- ._icon_7ctf7_55 {
1326
+ ._icon_131sy_55 {
1325
1327
  opacity: 0.65;
1326
1328
  font-size: 0.85rem;
1327
1329
  }
1328
- ._content_7ctf7_60 {
1330
+ ._content_131sy_60 {
1329
1331
  background-color: var(--body-bg);
1330
1332
  border: var(--border-thickness) solid var(--border-color);
1331
1333
  --button-bg: var(--body-bg);
@@ -1334,31 +1336,31 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1334
1336
  display: inline-flex;
1335
1337
  flex-direction: column;
1336
1338
  width: fit-content;
1337
- z-index: 10;
1339
+ z-index: 110;
1338
1340
  position: relative;
1339
1341
  will-change: transform, opacity;
1340
1342
  transform: translateY(-1px);
1341
1343
  }
1342
- ._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
1344
+ ._content_131sy_60[data-state="closed"] ._viewport_131sy_75 {
1343
1345
  animation: none;
1344
1346
  }
1345
- ._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
1346
- animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1347
+ ._content_131sy_60[data-state="open"][data-side="bottom"] ._viewport_131sy_75 {
1348
+ animation: _slideUpAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1347
1349
  transform-origin: top center;
1348
1350
  }
1349
- ._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
1350
- animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1351
+ ._content_131sy_60[data-state="open"][data-side="top"] ._viewport_131sy_75 {
1352
+ animation: _slideDownAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1351
1353
  transform-origin: bottom center;
1352
1354
  }
1353
- ._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
1354
- animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1355
+ ._content_131sy_60[data-state="open"][data-side="left"] ._viewport_131sy_75 {
1356
+ animation: _slideRightAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1355
1357
  transform-origin: right center;
1356
1358
  }
1357
- ._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
1358
- animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1359
+ ._content_131sy_60[data-state="open"][data-side="right"] ._viewport_131sy_75 {
1360
+ animation: _slideLeftAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1359
1361
  transform-origin: left center;
1360
1362
  }
1361
- ._viewport_7ctf7_75 {
1363
+ ._viewport_131sy_75 {
1362
1364
  display: flex;
1363
1365
  flex-direction: column;
1364
1366
  animation-duration: 180ms;
@@ -1367,7 +1369,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1367
1369
  will-change: transform, opacity;
1368
1370
  transform: none;
1369
1371
  }
1370
- ._item_7ctf7_109 {
1372
+ ._item_131sy_109 {
1371
1373
  display: flex;
1372
1374
  align-items: center;
1373
1375
  justify-content: flex-start;
@@ -1380,91 +1382,91 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1380
1382
  background: transparent;
1381
1383
  text-decoration: none;
1382
1384
  }
1383
- ._item_7ctf7_109[data-highlighted] {
1385
+ ._item_131sy_109[data-highlighted] {
1384
1386
  background-color: var(--secondary-color-100);
1385
1387
  }
1386
- ._item_7ctf7_109[data-disabled] {
1388
+ ._item_131sy_109[data-disabled] {
1387
1389
  opacity: 0.5;
1388
1390
  cursor: not-allowed;
1389
1391
  }
1390
- ._itemLabel_7ctf7_132 {
1392
+ ._itemLabel_131sy_132 {
1391
1393
  flex: 1;
1392
1394
  }
1393
- ._itemIcon_7ctf7_136 {
1395
+ ._itemIcon_131sy_136 {
1394
1396
  display: inline-flex;
1395
1397
  align-items: center;
1396
1398
  justify-content: center;
1397
1399
  width: 1.25rem;
1398
1400
  height: 1.25rem;
1399
1401
  }
1400
- ._itemIcon_7ctf7_136 svg {
1402
+ ._itemIcon_131sy_136 svg {
1401
1403
  height: 1.25rem;
1402
1404
  }
1403
- ._separator_7ctf7_148 {
1405
+ ._separator_131sy_148 {
1404
1406
  height: var(--border-thickness);
1405
1407
  background-color: var(--border-color);
1406
1408
  }
1407
- ._arrow_7ctf7_153 {
1409
+ ._arrow_131sy_153 {
1408
1410
  fill: var(--body-bg);
1409
1411
  stroke: var(--border-color);
1410
1412
  stroke-width: var(--border-thickness);
1411
1413
  stroke-linejoin: round;
1412
1414
  }
1413
- ._primary_7ctf7_160 {
1415
+ ._primary_131sy_160 {
1414
1416
  --dropdown-bg: var(--primary-color-100);
1415
1417
  --border-color: var(--primary-color-300);
1416
1418
  --button-color: var(--primary-color-800);
1417
1419
  --border-accent-color: var(--primary-color-600);
1418
1420
  }
1419
- ._primary_7ctf7_160:hover {
1421
+ ._primary_131sy_160:hover {
1420
1422
  --dropdown-bg: var(--primary-color-200);
1421
1423
  }
1422
- ._success_7ctf7_171 {
1424
+ ._success_131sy_171 {
1423
1425
  --dropdown-bg: var(--success-color-100);
1424
1426
  --border-color: var(--success-color-300);
1425
1427
  --button-color: var(--success-color-800);
1426
1428
  --border-accent-color: var(--success-color-600);
1427
1429
  }
1428
- ._success_7ctf7_171:hover {
1430
+ ._success_131sy_171:hover {
1429
1431
  --dropdown-bg: var(--success-color-200);
1430
1432
  }
1431
- ._warning_7ctf7_182 {
1433
+ ._warning_131sy_182 {
1432
1434
  --dropdown-bg: var(--warning-color-100);
1433
1435
  --border-color: var(--warning-color-300);
1434
1436
  --button-color: var(--warning-color-800);
1435
1437
  --border-accent-color: var(--warning-color-600);
1436
1438
  }
1437
- ._warning_7ctf7_182:hover {
1439
+ ._warning_131sy_182:hover {
1438
1440
  --dropdown-bg: var(--warning-color-200);
1439
1441
  }
1440
- ._danger_7ctf7_193 {
1442
+ ._danger_131sy_193 {
1441
1443
  --dropdown-bg: var(--danger-color-100);
1442
1444
  --border-color: var(--danger-color-300);
1443
1445
  --button-color: var(--danger-color-800);
1444
1446
  --border-accent-color: var(--danger-color-600);
1445
1447
  }
1446
- ._danger_7ctf7_193:hover {
1448
+ ._danger_131sy_193:hover {
1447
1449
  --dropdown-bg: var(--danger-color-200);
1448
1450
  }
1449
- ._info_7ctf7_204 {
1451
+ ._info_131sy_204 {
1450
1452
  --dropdown-bg: var(--info-color-100);
1451
1453
  --border-color: var(--info-color-300);
1452
1454
  --button-color: var(--info-color-800);
1453
1455
  --border-accent-color: var(--info-color-600);
1454
1456
  }
1455
- ._info_7ctf7_204:hover {
1457
+ ._info_131sy_204:hover {
1456
1458
  --dropdown-bg: var(--info-color-200);
1457
1459
  }
1458
- ._secondary_7ctf7_215 {
1460
+ ._secondary_131sy_215 {
1459
1461
  --dropdown-bg: var(--secondary-color-100);
1460
1462
  --border-color: var(--secondary-color-300);
1461
1463
  --button-color: var(--secondary-color-800);
1462
1464
  --border-accent-color: var(--secondary-color-600);
1463
1465
  }
1464
- ._secondary_7ctf7_215:hover {
1466
+ ._secondary_131sy_215:hover {
1465
1467
  --dropdown-bg: var(--secondary-color-200);
1466
1468
  }
1467
- @keyframes _slideUpAndFade_7ctf7_1 {
1469
+ @keyframes _slideUpAndFade_131sy_1 {
1468
1470
  from {
1469
1471
  opacity: 0;
1470
1472
  transform: translateY(2px);
@@ -1474,7 +1476,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1474
1476
  transform: translateY(0);
1475
1477
  }
1476
1478
  }
1477
- @keyframes _slideRightAndFade_7ctf7_1 {
1479
+ @keyframes _slideRightAndFade_131sy_1 {
1478
1480
  from {
1479
1481
  opacity: 0;
1480
1482
  transform: translateX(-2px);
@@ -1484,7 +1486,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1484
1486
  transform: translateX(0);
1485
1487
  }
1486
1488
  }
1487
- @keyframes _slideDownAndFade_7ctf7_1 {
1489
+ @keyframes _slideDownAndFade_131sy_1 {
1488
1490
  from {
1489
1491
  opacity: 0;
1490
1492
  transform: translateY(-2px);
@@ -1494,7 +1496,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1494
1496
  transform: translateY(0);
1495
1497
  }
1496
1498
  }
1497
- @keyframes _slideLeftAndFade_7ctf7_1 {
1499
+ @keyframes _slideLeftAndFade_131sy_1 {
1498
1500
  from {
1499
1501
  opacity: 0;
1500
1502
  transform: translateX(2px);
@@ -2089,7 +2091,7 @@ hr {
2089
2091
  padding-left: 0.5rem;
2090
2092
  padding-right: 0.5rem;
2091
2093
  width: 100%;
2092
- }`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2094
+ }`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
2093
2095
  "use strict";
2094
2096
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2095
2097
  const React = require("react");
@@ -25482,19 +25484,19 @@ var Content2$2 = SelectContent;
25482
25484
  var Viewport = SelectViewport;
25483
25485
  var Item = SelectItem;
25484
25486
  var ItemText = SelectItemText;
25485
- const trigger$1 = "_trigger_1u214_7";
25486
- const large$2 = "_large_1u214_31";
25487
- const small$2 = "_small_1u214_36";
25488
- const disabled$2 = "_disabled_1u214_41";
25489
- const icon$1 = "_icon_1u214_46";
25490
- const content$3 = "_content_1u214_52";
25491
- const item$2 = "_item_1u214_57";
25492
- const primary$4 = "_primary_1u214_79";
25493
- const success$4 = "_success_1u214_89";
25494
- const warning$4 = "_warning_1u214_99";
25495
- const danger$4 = "_danger_1u214_109";
25496
- const info$4 = "_info_1u214_119";
25497
- const secondary$4 = "_secondary_1u214_129";
25487
+ const trigger$1 = "_trigger_dqtrb_7";
25488
+ const large$2 = "_large_dqtrb_31";
25489
+ const small$2 = "_small_dqtrb_36";
25490
+ const disabled$2 = "_disabled_dqtrb_41";
25491
+ const icon$1 = "_icon_dqtrb_46";
25492
+ const content$3 = "_content_dqtrb_52";
25493
+ const item$2 = "_item_dqtrb_58";
25494
+ const primary$4 = "_primary_dqtrb_80";
25495
+ const success$4 = "_success_dqtrb_90";
25496
+ const warning$4 = "_warning_dqtrb_100";
25497
+ const danger$4 = "_danger_dqtrb_110";
25498
+ const info$4 = "_info_dqtrb_120";
25499
+ const secondary$4 = "_secondary_dqtrb_130";
25498
25500
  const styles$5 = {
25499
25501
  trigger: trigger$1,
25500
25502
  large: large$2,
@@ -25754,19 +25756,19 @@ var ToggleGroupItemImpl = React.forwardRef(
25754
25756
  );
25755
25757
  var Root2$1 = ToggleGroup;
25756
25758
  var Item2$2 = ToggleGroupItem;
25757
- const root = "_root_1dix2_31";
25758
- const item$1 = "_item_1dix2_46";
25759
- const chamferEnabled = "_chamferEnabled_1dix2_86";
25760
- const large$1 = "_large_1dix2_126";
25761
- const small$1 = "_small_1dix2_131";
25762
- const disabled$1 = "_disabled_1dix2_136";
25763
- const itemDisabled = "_itemDisabled_1dix2_141";
25764
- const primary$3 = "_primary_1dix2_147";
25765
- const secondary$3 = "_secondary_1dix2_157";
25766
- const success$3 = "_success_1dix2_167";
25767
- const warning$3 = "_warning_1dix2_177";
25768
- const danger$3 = "_danger_1dix2_187";
25769
- const info$3 = "_info_1dix2_197";
25759
+ const root = "_root_wrsjc_31";
25760
+ const item$1 = "_item_wrsjc_47";
25761
+ const chamferEnabled = "_chamferEnabled_wrsjc_87";
25762
+ const large$1 = "_large_wrsjc_127";
25763
+ const small$1 = "_small_wrsjc_132";
25764
+ const disabled$1 = "_disabled_wrsjc_137";
25765
+ const itemDisabled = "_itemDisabled_wrsjc_142";
25766
+ const primary$3 = "_primary_wrsjc_148";
25767
+ const secondary$3 = "_secondary_wrsjc_158";
25768
+ const success$3 = "_success_wrsjc_168";
25769
+ const warning$3 = "_warning_wrsjc_178";
25770
+ const danger$3 = "_danger_wrsjc_188";
25771
+ const info$3 = "_info_wrsjc_198";
25770
25772
  const styles$4 = {
25771
25773
  root,
25772
25774
  item: item$1,
@@ -26853,29 +26855,29 @@ var Portal2 = DropdownMenuPortal;
26853
26855
  var Content2 = DropdownMenuContent;
26854
26856
  var Item2 = DropdownMenuItem;
26855
26857
  var Separator2 = DropdownMenuSeparator;
26856
- const trigger = "_trigger_7ctf7_7";
26857
- const pageBackground = "_pageBackground_7ctf7_29";
26858
- const large = "_large_7ctf7_40";
26859
- const small = "_small_7ctf7_45";
26860
- const disabled = "_disabled_7ctf7_50";
26861
- const icon = "_icon_7ctf7_55";
26862
- const content$2 = "_content_7ctf7_60";
26863
- const viewport = "_viewport_7ctf7_75";
26864
- const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
26865
- const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
26866
- const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
26867
- const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
26868
- const item = "_item_7ctf7_109";
26869
- const itemLabel = "_itemLabel_7ctf7_132";
26870
- const itemIcon = "_itemIcon_7ctf7_136";
26871
- const separator = "_separator_7ctf7_148";
26872
- const arrow = "_arrow_7ctf7_153";
26873
- const primary$2 = "_primary_7ctf7_160";
26874
- const success$2 = "_success_7ctf7_171";
26875
- const warning$2 = "_warning_7ctf7_182";
26876
- const danger$2 = "_danger_7ctf7_193";
26877
- const info$2 = "_info_7ctf7_204";
26878
- const secondary$2 = "_secondary_7ctf7_215";
26858
+ const trigger = "_trigger_131sy_7";
26859
+ const pageBackground = "_pageBackground_131sy_29";
26860
+ const large = "_large_131sy_40";
26861
+ const small = "_small_131sy_45";
26862
+ const disabled = "_disabled_131sy_50";
26863
+ const icon = "_icon_131sy_55";
26864
+ const content$2 = "_content_131sy_60";
26865
+ const viewport = "_viewport_131sy_75";
26866
+ const slideUpAndFade = "_slideUpAndFade_131sy_1";
26867
+ const slideDownAndFade = "_slideDownAndFade_131sy_1";
26868
+ const slideRightAndFade = "_slideRightAndFade_131sy_1";
26869
+ const slideLeftAndFade = "_slideLeftAndFade_131sy_1";
26870
+ const item = "_item_131sy_109";
26871
+ const itemLabel = "_itemLabel_131sy_132";
26872
+ const itemIcon = "_itemIcon_131sy_136";
26873
+ const separator = "_separator_131sy_148";
26874
+ const arrow = "_arrow_131sy_153";
26875
+ const primary$2 = "_primary_131sy_160";
26876
+ const success$2 = "_success_131sy_171";
26877
+ const warning$2 = "_warning_131sy_182";
26878
+ const danger$2 = "_danger_131sy_193";
26879
+ const info$2 = "_info_131sy_204";
26880
+ const secondary$2 = "_secondary_131sy_215";
26879
26881
  const styles$3 = {
26880
26882
  trigger,
26881
26883
  pageBackground,
package/dist/jcui.es.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
1
+ (function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
2
2
  syntax: "<color>";
3
3
  inherits: true;
4
4
  initial-value: transparent;
@@ -988,7 +988,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
988
988
  inherits: true;
989
989
  initial-value: transparent;
990
990
  }
991
- ._trigger_1u214_7 {
991
+ ._trigger_dqtrb_7 {
992
992
  display: inline-flex;
993
993
  align-items: center;
994
994
  justify-content: space-between;
@@ -1000,101 +1000,102 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1000
1000
  border: var(--border-thickness) solid var(--border-color);
1001
1001
  cursor: pointer;
1002
1002
  }
1003
- ._trigger_1u214_7:hover {
1003
+ ._trigger_dqtrb_7:hover {
1004
1004
  --select-bg: var(--secondary-color-100);
1005
1005
  }
1006
- ._trigger_1u214_7:active {
1006
+ ._trigger_dqtrb_7:active {
1007
1007
  --select-bg: var(--secondary-color-200);
1008
1008
  }
1009
- ._large_1u214_31 {
1009
+ ._large_dqtrb_31 {
1010
1010
  font-size: 1.25rem;
1011
1011
  padding: 0.75rem 1.25rem;
1012
1012
  }
1013
- ._small_1u214_36 {
1013
+ ._small_dqtrb_36 {
1014
1014
  font-size: 0.75rem;
1015
1015
  padding: 0.25rem 0.5rem;
1016
1016
  }
1017
- ._disabled_1u214_41 {
1017
+ ._disabled_dqtrb_41 {
1018
1018
  opacity: 0.5;
1019
1019
  cursor: not-allowed;
1020
1020
  }
1021
- ._icon_1u214_46 {
1021
+ ._icon_dqtrb_46 {
1022
1022
  opacity: 0.7;
1023
1023
  }
1024
1024
  /* Dropdown */
1025
- ._content_1u214_52 {
1025
+ ._content_dqtrb_52 {
1026
1026
  background-color: var(--body-bg);
1027
1027
  border: var(--border-thickness) solid var(--border-color);
1028
+ z-index: 110;
1028
1029
  }
1029
- ._item_1u214_57 {
1030
+ ._item_dqtrb_58 {
1030
1031
  padding: 0.4rem 0.6rem;
1031
1032
  font-size: 0.875rem;
1032
1033
  cursor: pointer;
1033
1034
  outline: none;
1034
1035
  }
1035
- ._item_1u214_57[data-highlighted] {
1036
+ ._item_dqtrb_58[data-highlighted] {
1036
1037
  background-color: var(--secondary-color-100);
1037
1038
  }
1038
- ._item_1u214_57[data-state="checked"] {
1039
+ ._item_dqtrb_58[data-state="checked"] {
1039
1040
  background-color: var(--secondary-color-200);
1040
1041
  }
1041
- ._item_1u214_57[data-disabled] {
1042
+ ._item_dqtrb_58[data-disabled] {
1042
1043
  opacity: 0.4;
1043
1044
  pointer-events: none;
1044
1045
  }
1045
1046
  /* Variants (match Button) */
1046
- ._primary_1u214_79 {
1047
+ ._primary_dqtrb_80 {
1047
1048
  --select-bg: var(--primary-color-100);
1048
1049
  --border-color: var(--primary-color-300);
1049
1050
  --button-color: var(--primary-color-800);
1050
1051
  --border-accent-color: var(--primary-color-600);
1051
1052
  }
1052
- ._primary_1u214_79:hover {
1053
+ ._primary_dqtrb_80:hover {
1053
1054
  --select-bg: var(--primary-color-200);
1054
1055
  }
1055
- ._success_1u214_89 {
1056
+ ._success_dqtrb_90 {
1056
1057
  --select-bg: var(--success-color-100);
1057
1058
  --border-color: var(--success-color-300);
1058
1059
  --button-color: var(--success-color-800);
1059
1060
  --border-accent-color: var(--success-color-600);
1060
1061
  }
1061
- ._success_1u214_89:hover {
1062
+ ._success_dqtrb_90:hover {
1062
1063
  --select-bg: var(--success-color-200);
1063
1064
  }
1064
- ._warning_1u214_99 {
1065
+ ._warning_dqtrb_100 {
1065
1066
  --select-bg: var(--warning-color-100);
1066
1067
  --border-color: var(--warning-color-300);
1067
1068
  --button-color: var(--warning-color-800);
1068
1069
  --border-accent-color: var(--warning-color-600);
1069
1070
  }
1070
- ._warning_1u214_99:hover {
1071
+ ._warning_dqtrb_100:hover {
1071
1072
  --select-bg: var(--warning-color-200);
1072
1073
  }
1073
- ._danger_1u214_109 {
1074
+ ._danger_dqtrb_110 {
1074
1075
  --select-bg: var(--danger-color-100);
1075
1076
  --border-color: var(--danger-color-300);
1076
1077
  --button-color: var(--danger-color-800);
1077
1078
  --border-accent-color: var(--danger-color-600);
1078
1079
  }
1079
- ._danger_1u214_109:hover {
1080
+ ._danger_dqtrb_110:hover {
1080
1081
  --select-bg: var(--danger-color-200);
1081
1082
  }
1082
- ._info_1u214_119 {
1083
+ ._info_dqtrb_120 {
1083
1084
  --select-bg: var(--info-color-100);
1084
1085
  --border-color: var(--info-color-300);
1085
1086
  --button-color: var(--info-color-800);
1086
1087
  --border-accent-color: var(--info-color-600);
1087
1088
  }
1088
- ._info_1u214_119:hover {
1089
+ ._info_dqtrb_120:hover {
1089
1090
  --select-bg: var(--info-color-200);
1090
1091
  }
1091
- ._secondary_1u214_129 {
1092
+ ._secondary_dqtrb_130 {
1092
1093
  --select-bg: var(--secondary-color-100);
1093
1094
  --border-color: var(--secondary-color-300);
1094
1095
  --button-color: var(--secondary-color-800);
1095
1096
  --border-accent-color: var(--secondary-color-600);
1096
1097
  }
1097
- ._secondary_1u214_129:hover {
1098
+ ._secondary_dqtrb_130:hover {
1098
1099
  --select-bg: var(--secondary-color-200);
1099
1100
  }
1100
1101
  @property --segment-bg {
@@ -1122,7 +1123,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1122
1123
  inherits: true;
1123
1124
  initial-value: inherit;
1124
1125
  }
1125
- ._root_1dix2_31 {
1126
+ ._root_wrsjc_31 {
1126
1127
  --segment-bg: var(--body-bg);
1127
1128
  --segment-item-hover-bg: var(--secondary-color-100);
1128
1129
  --segment-item-active-bg: var(--secondary-color-300);
@@ -1132,10 +1133,11 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1132
1133
  display: inline-flex;
1133
1134
  align-items: stretch;
1134
1135
  justify-content: flex-start;
1136
+ isolation: isolate;
1135
1137
  background-color: var(--segment-bg);
1136
1138
  color: var(--segment-item-color);
1137
1139
  }
1138
- ._item_1dix2_46 {
1140
+ ._item_wrsjc_47 {
1139
1141
  all: unset;
1140
1142
  box-sizing: border-box;
1141
1143
  position: relative;
@@ -1154,23 +1156,23 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1154
1156
  border-left: var(--border-thickness) solid var(--border-color);
1155
1157
  margin-right: calc(-1 * var(--border-thickness));
1156
1158
  }
1157
- ._item_1dix2_46:last-child {
1159
+ ._item_wrsjc_47:last-child {
1158
1160
  border-right: var(--border-thickness) solid var(--border-color);
1159
1161
  margin-right: 0;
1160
1162
  }
1161
- ._item_1dix2_46:hover {
1163
+ ._item_wrsjc_47:hover {
1162
1164
  background-color: var(--segment-item-hover-bg);
1163
1165
  }
1164
- ._item_1dix2_46:focus-visible {
1166
+ ._item_wrsjc_47:focus-visible {
1165
1167
  outline: none;
1166
1168
  box-shadow: inset 0 0 0 1px var(--border-accent-color);
1167
1169
  }
1168
- ._item_1dix2_46[data-state="on"] {
1170
+ ._item_wrsjc_47[data-state="on"] {
1169
1171
  background-color: var(--segment-item-active-bg);
1170
1172
  color: var(--segment-item-active-color);
1171
1173
  z-index: 1;
1172
1174
  }
1173
- ._chamferEnabled_1dix2_86 ._item_1dix2_46[data-state="on"]::after {
1175
+ ._chamferEnabled_wrsjc_87 ._item_wrsjc_47[data-state="on"]::after {
1174
1176
  content: "";
1175
1177
  position: absolute;
1176
1178
  top: calc(-1 * var(--border-thickness));
@@ -1199,30 +1201,30 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1199
1201
  linear-gradient(var(--chamfer-color), var(--chamfer-color)) left bottom /
1200
1202
  var(--bt) var(--cd) no-repeat;
1201
1203
  }
1202
- ._chamferEnabled_1dix2_86 ._item_1dix2_46[data-state="on"]:last-child::after {
1204
+ ._chamferEnabled_wrsjc_87 ._item_wrsjc_47[data-state="on"]:last-child::after {
1203
1205
  right: calc(-1 * var(--border-thickness));
1204
1206
  }
1205
- ._item_1dix2_46[data-disabled] {
1207
+ ._item_wrsjc_47[data-disabled] {
1206
1208
  opacity: 0.5;
1207
1209
  pointer-events: none;
1208
1210
  }
1209
- ._large_1dix2_126 ._item_1dix2_46 {
1211
+ ._large_wrsjc_127 ._item_wrsjc_47 {
1210
1212
  font-size: 1.25rem;
1211
1213
  padding: 0.75rem 1.25rem;
1212
1214
  }
1213
- ._small_1dix2_131 ._item_1dix2_46 {
1215
+ ._small_wrsjc_132 ._item_wrsjc_47 {
1214
1216
  font-size: 0.75rem;
1215
1217
  padding: 0.25rem 0.5rem;
1216
1218
  }
1217
- ._disabled_1dix2_136 {
1219
+ ._disabled_wrsjc_137 {
1218
1220
  opacity: 0.6;
1219
1221
  cursor: not-allowed;
1220
1222
  }
1221
- ._itemDisabled_1dix2_141 {
1223
+ ._itemDisabled_wrsjc_142 {
1222
1224
  cursor: not-allowed;
1223
1225
  }
1224
1226
  /* Variants */
1225
- ._primary_1dix2_147 {
1227
+ ._primary_wrsjc_148 {
1226
1228
  --segment-bg: var(--primary-color-100);
1227
1229
  --border-color: var(--primary-color-300);
1228
1230
  --border-accent-color: var(--primary-color-600);
@@ -1231,7 +1233,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1231
1233
  --segment-item-color: var(--primary-color-800);
1232
1234
  --segment-item-active-color: var(--primary-color-900);
1233
1235
  }
1234
- ._secondary_1dix2_157 {
1236
+ ._secondary_wrsjc_158 {
1235
1237
  --segment-bg: var(--secondary-color-100);
1236
1238
  --border-color: var(--secondary-color-300);
1237
1239
  --border-accent-color: var(--secondary-color-600);
@@ -1240,7 +1242,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1240
1242
  --segment-item-color: var(--secondary-color-800);
1241
1243
  --segment-item-active-color: var(--secondary-color-900);
1242
1244
  }
1243
- ._success_1dix2_167 {
1245
+ ._success_wrsjc_168 {
1244
1246
  --segment-bg: var(--success-color-100);
1245
1247
  --border-color: var(--success-color-300);
1246
1248
  --border-accent-color: var(--success-color-600);
@@ -1249,7 +1251,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1249
1251
  --segment-item-color: var(--success-color-800);
1250
1252
  --segment-item-active-color: var(--success-color-900);
1251
1253
  }
1252
- ._warning_1dix2_177 {
1254
+ ._warning_wrsjc_178 {
1253
1255
  --segment-bg: var(--warning-color-100);
1254
1256
  --border-color: var(--warning-color-300);
1255
1257
  --border-accent-color: var(--warning-color-600);
@@ -1258,7 +1260,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1258
1260
  --segment-item-color: var(--warning-color-800);
1259
1261
  --segment-item-active-color: var(--warning-color-900);
1260
1262
  }
1261
- ._danger_1dix2_187 {
1263
+ ._danger_wrsjc_188 {
1262
1264
  --segment-bg: var(--danger-color-100);
1263
1265
  --border-color: var(--danger-color-300);
1264
1266
  --border-accent-color: var(--danger-color-600);
@@ -1267,7 +1269,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1267
1269
  --segment-item-color: var(--danger-color-800);
1268
1270
  --segment-item-active-color: var(--danger-color-900);
1269
1271
  }
1270
- ._info_1dix2_197 {
1272
+ ._info_wrsjc_198 {
1271
1273
  --segment-bg: var(--info-color-100);
1272
1274
  --border-color: var(--info-color-300);
1273
1275
  --border-accent-color: var(--info-color-600);
@@ -1281,7 +1283,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1281
1283
  inherits: true;
1282
1284
  initial-value: transparent;
1283
1285
  }
1284
- ._trigger_7ctf7_7 {
1286
+ ._trigger_131sy_7 {
1285
1287
  display: inline-flex;
1286
1288
  align-items: center;
1287
1289
  justify-content: space-between;
@@ -1294,38 +1296,38 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1294
1296
  color: var(--button-color, inherit);
1295
1297
  cursor: pointer;
1296
1298
  }
1297
- ._trigger_7ctf7_7:hover {
1299
+ ._trigger_131sy_7:hover {
1298
1300
  --dropdown-bg: var(--secondary-color-100);
1299
1301
  }
1300
- ._trigger_7ctf7_7:active {
1302
+ ._trigger_131sy_7:active {
1301
1303
  --dropdown-bg: var(--secondary-color-200);
1302
1304
  }
1303
- ._pageBackground_7ctf7_29 {
1305
+ ._pageBackground_131sy_29 {
1304
1306
  --dropdown-bg: var(--body-bg);
1305
1307
  --button-bg: var(--body-bg);
1306
1308
  }
1307
- ._pageBackground_7ctf7_29:hover,
1308
- ._pageBackground_7ctf7_29:active {
1309
+ ._pageBackground_131sy_29:hover,
1310
+ ._pageBackground_131sy_29:active {
1309
1311
  --dropdown-bg: var(--body-bg);
1310
1312
  --button-bg: var(--body-bg);
1311
1313
  }
1312
- ._large_7ctf7_40 {
1314
+ ._large_131sy_40 {
1313
1315
  font-size: 1.25rem;
1314
1316
  padding: 0.75rem 1.25rem;
1315
1317
  }
1316
- ._small_7ctf7_45 {
1318
+ ._small_131sy_45 {
1317
1319
  font-size: 0.75rem;
1318
1320
  padding: 0.25rem 0.5rem;
1319
1321
  }
1320
- ._disabled_7ctf7_50 {
1322
+ ._disabled_131sy_50 {
1321
1323
  opacity: 0.5;
1322
1324
  cursor: not-allowed;
1323
1325
  }
1324
- ._icon_7ctf7_55 {
1326
+ ._icon_131sy_55 {
1325
1327
  opacity: 0.65;
1326
1328
  font-size: 0.85rem;
1327
1329
  }
1328
- ._content_7ctf7_60 {
1330
+ ._content_131sy_60 {
1329
1331
  background-color: var(--body-bg);
1330
1332
  border: var(--border-thickness) solid var(--border-color);
1331
1333
  --button-bg: var(--body-bg);
@@ -1334,31 +1336,31 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1334
1336
  display: inline-flex;
1335
1337
  flex-direction: column;
1336
1338
  width: fit-content;
1337
- z-index: 10;
1339
+ z-index: 110;
1338
1340
  position: relative;
1339
1341
  will-change: transform, opacity;
1340
1342
  transform: translateY(-1px);
1341
1343
  }
1342
- ._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
1344
+ ._content_131sy_60[data-state="closed"] ._viewport_131sy_75 {
1343
1345
  animation: none;
1344
1346
  }
1345
- ._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
1346
- animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1347
+ ._content_131sy_60[data-state="open"][data-side="bottom"] ._viewport_131sy_75 {
1348
+ animation: _slideUpAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1347
1349
  transform-origin: top center;
1348
1350
  }
1349
- ._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
1350
- animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1351
+ ._content_131sy_60[data-state="open"][data-side="top"] ._viewport_131sy_75 {
1352
+ animation: _slideDownAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1351
1353
  transform-origin: bottom center;
1352
1354
  }
1353
- ._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
1354
- animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1355
+ ._content_131sy_60[data-state="open"][data-side="left"] ._viewport_131sy_75 {
1356
+ animation: _slideRightAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1355
1357
  transform-origin: right center;
1356
1358
  }
1357
- ._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
1358
- animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1359
+ ._content_131sy_60[data-state="open"][data-side="right"] ._viewport_131sy_75 {
1360
+ animation: _slideLeftAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
1359
1361
  transform-origin: left center;
1360
1362
  }
1361
- ._viewport_7ctf7_75 {
1363
+ ._viewport_131sy_75 {
1362
1364
  display: flex;
1363
1365
  flex-direction: column;
1364
1366
  animation-duration: 180ms;
@@ -1367,7 +1369,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1367
1369
  will-change: transform, opacity;
1368
1370
  transform: none;
1369
1371
  }
1370
- ._item_7ctf7_109 {
1372
+ ._item_131sy_109 {
1371
1373
  display: flex;
1372
1374
  align-items: center;
1373
1375
  justify-content: flex-start;
@@ -1380,91 +1382,91 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1380
1382
  background: transparent;
1381
1383
  text-decoration: none;
1382
1384
  }
1383
- ._item_7ctf7_109[data-highlighted] {
1385
+ ._item_131sy_109[data-highlighted] {
1384
1386
  background-color: var(--secondary-color-100);
1385
1387
  }
1386
- ._item_7ctf7_109[data-disabled] {
1388
+ ._item_131sy_109[data-disabled] {
1387
1389
  opacity: 0.5;
1388
1390
  cursor: not-allowed;
1389
1391
  }
1390
- ._itemLabel_7ctf7_132 {
1392
+ ._itemLabel_131sy_132 {
1391
1393
  flex: 1;
1392
1394
  }
1393
- ._itemIcon_7ctf7_136 {
1395
+ ._itemIcon_131sy_136 {
1394
1396
  display: inline-flex;
1395
1397
  align-items: center;
1396
1398
  justify-content: center;
1397
1399
  width: 1.25rem;
1398
1400
  height: 1.25rem;
1399
1401
  }
1400
- ._itemIcon_7ctf7_136 svg {
1402
+ ._itemIcon_131sy_136 svg {
1401
1403
  height: 1.25rem;
1402
1404
  }
1403
- ._separator_7ctf7_148 {
1405
+ ._separator_131sy_148 {
1404
1406
  height: var(--border-thickness);
1405
1407
  background-color: var(--border-color);
1406
1408
  }
1407
- ._arrow_7ctf7_153 {
1409
+ ._arrow_131sy_153 {
1408
1410
  fill: var(--body-bg);
1409
1411
  stroke: var(--border-color);
1410
1412
  stroke-width: var(--border-thickness);
1411
1413
  stroke-linejoin: round;
1412
1414
  }
1413
- ._primary_7ctf7_160 {
1415
+ ._primary_131sy_160 {
1414
1416
  --dropdown-bg: var(--primary-color-100);
1415
1417
  --border-color: var(--primary-color-300);
1416
1418
  --button-color: var(--primary-color-800);
1417
1419
  --border-accent-color: var(--primary-color-600);
1418
1420
  }
1419
- ._primary_7ctf7_160:hover {
1421
+ ._primary_131sy_160:hover {
1420
1422
  --dropdown-bg: var(--primary-color-200);
1421
1423
  }
1422
- ._success_7ctf7_171 {
1424
+ ._success_131sy_171 {
1423
1425
  --dropdown-bg: var(--success-color-100);
1424
1426
  --border-color: var(--success-color-300);
1425
1427
  --button-color: var(--success-color-800);
1426
1428
  --border-accent-color: var(--success-color-600);
1427
1429
  }
1428
- ._success_7ctf7_171:hover {
1430
+ ._success_131sy_171:hover {
1429
1431
  --dropdown-bg: var(--success-color-200);
1430
1432
  }
1431
- ._warning_7ctf7_182 {
1433
+ ._warning_131sy_182 {
1432
1434
  --dropdown-bg: var(--warning-color-100);
1433
1435
  --border-color: var(--warning-color-300);
1434
1436
  --button-color: var(--warning-color-800);
1435
1437
  --border-accent-color: var(--warning-color-600);
1436
1438
  }
1437
- ._warning_7ctf7_182:hover {
1439
+ ._warning_131sy_182:hover {
1438
1440
  --dropdown-bg: var(--warning-color-200);
1439
1441
  }
1440
- ._danger_7ctf7_193 {
1442
+ ._danger_131sy_193 {
1441
1443
  --dropdown-bg: var(--danger-color-100);
1442
1444
  --border-color: var(--danger-color-300);
1443
1445
  --button-color: var(--danger-color-800);
1444
1446
  --border-accent-color: var(--danger-color-600);
1445
1447
  }
1446
- ._danger_7ctf7_193:hover {
1448
+ ._danger_131sy_193:hover {
1447
1449
  --dropdown-bg: var(--danger-color-200);
1448
1450
  }
1449
- ._info_7ctf7_204 {
1451
+ ._info_131sy_204 {
1450
1452
  --dropdown-bg: var(--info-color-100);
1451
1453
  --border-color: var(--info-color-300);
1452
1454
  --button-color: var(--info-color-800);
1453
1455
  --border-accent-color: var(--info-color-600);
1454
1456
  }
1455
- ._info_7ctf7_204:hover {
1457
+ ._info_131sy_204:hover {
1456
1458
  --dropdown-bg: var(--info-color-200);
1457
1459
  }
1458
- ._secondary_7ctf7_215 {
1460
+ ._secondary_131sy_215 {
1459
1461
  --dropdown-bg: var(--secondary-color-100);
1460
1462
  --border-color: var(--secondary-color-300);
1461
1463
  --button-color: var(--secondary-color-800);
1462
1464
  --border-accent-color: var(--secondary-color-600);
1463
1465
  }
1464
- ._secondary_7ctf7_215:hover {
1466
+ ._secondary_131sy_215:hover {
1465
1467
  --dropdown-bg: var(--secondary-color-200);
1466
1468
  }
1467
- @keyframes _slideUpAndFade_7ctf7_1 {
1469
+ @keyframes _slideUpAndFade_131sy_1 {
1468
1470
  from {
1469
1471
  opacity: 0;
1470
1472
  transform: translateY(2px);
@@ -1474,7 +1476,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1474
1476
  transform: translateY(0);
1475
1477
  }
1476
1478
  }
1477
- @keyframes _slideRightAndFade_7ctf7_1 {
1479
+ @keyframes _slideRightAndFade_131sy_1 {
1478
1480
  from {
1479
1481
  opacity: 0;
1480
1482
  transform: translateX(-2px);
@@ -1484,7 +1486,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1484
1486
  transform: translateX(0);
1485
1487
  }
1486
1488
  }
1487
- @keyframes _slideDownAndFade_7ctf7_1 {
1489
+ @keyframes _slideDownAndFade_131sy_1 {
1488
1490
  from {
1489
1491
  opacity: 0;
1490
1492
  transform: translateY(-2px);
@@ -1494,7 +1496,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
1494
1496
  transform: translateY(0);
1495
1497
  }
1496
1498
  }
1497
- @keyframes _slideLeftAndFade_7ctf7_1 {
1499
+ @keyframes _slideLeftAndFade_131sy_1 {
1498
1500
  from {
1499
1501
  opacity: 0;
1500
1502
  transform: translateX(2px);
@@ -2089,7 +2091,7 @@ hr {
2089
2091
  padding-left: 0.5rem;
2090
2092
  padding-right: 0.5rem;
2091
2093
  width: 100%;
2092
- }`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2094
+ }`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
2093
2095
  import * as React from "react";
2094
2096
  import React__default, { useContext, createContext as createContext$1, useId as useId$1, forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect, useCallback, createElement } from "react";
2095
2097
  import * as ReactDOM from "react-dom";
@@ -25464,19 +25466,19 @@ var Content2$2 = SelectContent;
25464
25466
  var Viewport = SelectViewport;
25465
25467
  var Item = SelectItem;
25466
25468
  var ItemText = SelectItemText;
25467
- const trigger$1 = "_trigger_1u214_7";
25468
- const large$2 = "_large_1u214_31";
25469
- const small$2 = "_small_1u214_36";
25470
- const disabled$2 = "_disabled_1u214_41";
25471
- const icon$1 = "_icon_1u214_46";
25472
- const content$3 = "_content_1u214_52";
25473
- const item$2 = "_item_1u214_57";
25474
- const primary$4 = "_primary_1u214_79";
25475
- const success$4 = "_success_1u214_89";
25476
- const warning$4 = "_warning_1u214_99";
25477
- const danger$4 = "_danger_1u214_109";
25478
- const info$4 = "_info_1u214_119";
25479
- const secondary$4 = "_secondary_1u214_129";
25469
+ const trigger$1 = "_trigger_dqtrb_7";
25470
+ const large$2 = "_large_dqtrb_31";
25471
+ const small$2 = "_small_dqtrb_36";
25472
+ const disabled$2 = "_disabled_dqtrb_41";
25473
+ const icon$1 = "_icon_dqtrb_46";
25474
+ const content$3 = "_content_dqtrb_52";
25475
+ const item$2 = "_item_dqtrb_58";
25476
+ const primary$4 = "_primary_dqtrb_80";
25477
+ const success$4 = "_success_dqtrb_90";
25478
+ const warning$4 = "_warning_dqtrb_100";
25479
+ const danger$4 = "_danger_dqtrb_110";
25480
+ const info$4 = "_info_dqtrb_120";
25481
+ const secondary$4 = "_secondary_dqtrb_130";
25480
25482
  const styles$5 = {
25481
25483
  trigger: trigger$1,
25482
25484
  large: large$2,
@@ -25736,19 +25738,19 @@ var ToggleGroupItemImpl = React__default.forwardRef(
25736
25738
  );
25737
25739
  var Root2$1 = ToggleGroup;
25738
25740
  var Item2$2 = ToggleGroupItem;
25739
- const root = "_root_1dix2_31";
25740
- const item$1 = "_item_1dix2_46";
25741
- const chamferEnabled = "_chamferEnabled_1dix2_86";
25742
- const large$1 = "_large_1dix2_126";
25743
- const small$1 = "_small_1dix2_131";
25744
- const disabled$1 = "_disabled_1dix2_136";
25745
- const itemDisabled = "_itemDisabled_1dix2_141";
25746
- const primary$3 = "_primary_1dix2_147";
25747
- const secondary$3 = "_secondary_1dix2_157";
25748
- const success$3 = "_success_1dix2_167";
25749
- const warning$3 = "_warning_1dix2_177";
25750
- const danger$3 = "_danger_1dix2_187";
25751
- const info$3 = "_info_1dix2_197";
25741
+ const root = "_root_wrsjc_31";
25742
+ const item$1 = "_item_wrsjc_47";
25743
+ const chamferEnabled = "_chamferEnabled_wrsjc_87";
25744
+ const large$1 = "_large_wrsjc_127";
25745
+ const small$1 = "_small_wrsjc_132";
25746
+ const disabled$1 = "_disabled_wrsjc_137";
25747
+ const itemDisabled = "_itemDisabled_wrsjc_142";
25748
+ const primary$3 = "_primary_wrsjc_148";
25749
+ const secondary$3 = "_secondary_wrsjc_158";
25750
+ const success$3 = "_success_wrsjc_168";
25751
+ const warning$3 = "_warning_wrsjc_178";
25752
+ const danger$3 = "_danger_wrsjc_188";
25753
+ const info$3 = "_info_wrsjc_198";
25752
25754
  const styles$4 = {
25753
25755
  root,
25754
25756
  item: item$1,
@@ -26835,29 +26837,29 @@ var Portal2 = DropdownMenuPortal;
26835
26837
  var Content2 = DropdownMenuContent;
26836
26838
  var Item2 = DropdownMenuItem;
26837
26839
  var Separator2 = DropdownMenuSeparator;
26838
- const trigger = "_trigger_7ctf7_7";
26839
- const pageBackground = "_pageBackground_7ctf7_29";
26840
- const large = "_large_7ctf7_40";
26841
- const small = "_small_7ctf7_45";
26842
- const disabled = "_disabled_7ctf7_50";
26843
- const icon = "_icon_7ctf7_55";
26844
- const content$2 = "_content_7ctf7_60";
26845
- const viewport = "_viewport_7ctf7_75";
26846
- const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
26847
- const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
26848
- const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
26849
- const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
26850
- const item = "_item_7ctf7_109";
26851
- const itemLabel = "_itemLabel_7ctf7_132";
26852
- const itemIcon = "_itemIcon_7ctf7_136";
26853
- const separator = "_separator_7ctf7_148";
26854
- const arrow = "_arrow_7ctf7_153";
26855
- const primary$2 = "_primary_7ctf7_160";
26856
- const success$2 = "_success_7ctf7_171";
26857
- const warning$2 = "_warning_7ctf7_182";
26858
- const danger$2 = "_danger_7ctf7_193";
26859
- const info$2 = "_info_7ctf7_204";
26860
- const secondary$2 = "_secondary_7ctf7_215";
26840
+ const trigger = "_trigger_131sy_7";
26841
+ const pageBackground = "_pageBackground_131sy_29";
26842
+ const large = "_large_131sy_40";
26843
+ const small = "_small_131sy_45";
26844
+ const disabled = "_disabled_131sy_50";
26845
+ const icon = "_icon_131sy_55";
26846
+ const content$2 = "_content_131sy_60";
26847
+ const viewport = "_viewport_131sy_75";
26848
+ const slideUpAndFade = "_slideUpAndFade_131sy_1";
26849
+ const slideDownAndFade = "_slideDownAndFade_131sy_1";
26850
+ const slideRightAndFade = "_slideRightAndFade_131sy_1";
26851
+ const slideLeftAndFade = "_slideLeftAndFade_131sy_1";
26852
+ const item = "_item_131sy_109";
26853
+ const itemLabel = "_itemLabel_131sy_132";
26854
+ const itemIcon = "_itemIcon_131sy_136";
26855
+ const separator = "_separator_131sy_148";
26856
+ const arrow = "_arrow_131sy_153";
26857
+ const primary$2 = "_primary_131sy_160";
26858
+ const success$2 = "_success_131sy_171";
26859
+ const warning$2 = "_warning_131sy_182";
26860
+ const danger$2 = "_danger_131sy_193";
26861
+ const info$2 = "_info_131sy_204";
26862
+ const secondary$2 = "_secondary_131sy_215";
26861
26863
  const styles$3 = {
26862
26864
  trigger,
26863
26865
  pageBackground,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jackcrane/ui",
3
- "version": "0.1.15",
3
+ "version": "0.1.17",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "main": "dist/jcui.cjs.js",
@@ -52,6 +52,7 @@
52
52
  }
53
53
  },
54
54
  "devDependencies": {
55
+ "@types/node": "^20.19.11",
55
56
  "@types/react": "^19.2.5",
56
57
  "@types/react-dom": "^19.2.3",
57
58
  "@vitejs/plugin-react": "^5.1.1",