@shuriken-ui/tailwind 1.0.2 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/index.cjs +1 -0
  2. package/dist/index.mjs +1 -0
  3. package/dist/preset.cjs +155 -39
  4. package/dist/preset.mjs +155 -39
  5. package/package.json +27 -4
package/dist/index.cjs CHANGED
@@ -10,6 +10,7 @@ require('tailwindcss/plugin');
10
10
  require('defu');
11
11
 
12
12
  function withShurikenUI(config) {
13
+ console.log("withShurikenUI", config);
13
14
  if (preset.hasPreset(config)) {
14
15
  return config;
15
16
  }
package/dist/index.mjs CHANGED
@@ -9,6 +9,7 @@ import 'tailwindcss/plugin';
9
9
  import 'defu';
10
10
 
11
11
  function withShurikenUI(config) {
12
+ console.log("withShurikenUI", config);
12
13
  if (hasPreset(config)) {
13
14
  return config;
14
15
  }
package/dist/preset.cjs CHANGED
@@ -1086,7 +1086,7 @@ const avatar = plugin__default.withOptions(
1086
1086
  },
1087
1087
  [`.${prefix}avatar-badge`]: {
1088
1088
  [`@apply dark:bg-${config.avatarBadge.bgDark} absolute z-10 block overflow-hidden rounded-${config.avatarBadge.rounded} bg-${config.avatarBadge.bg}`]: {},
1089
- [`.badge-img`]: {
1089
+ [`.${prefix}badge-img`]: {
1090
1090
  [`@apply relative h-${config.avatarBadge.img.size} w-${config.avatarBadge.img.size} scale-90 rounded-${config.avatarBadge.img.rounded} object-cover`]: {}
1091
1091
  }
1092
1092
  },
@@ -1163,20 +1163,29 @@ const avatar = plugin__default.withOptions(
1163
1163
  [`.${prefix}avatar-text`]: {
1164
1164
  [`@apply text-${config.avatarXXS.text}`]: {}
1165
1165
  },
1166
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1166
+ [`&.${prefix}avatar-straight`]: {
1167
1167
  [`@apply rounded-none`]: {},
1168
+ [`.${prefix}avatar-inner`]: {
1169
+ [`@apply rounded-none`]: {}
1170
+ },
1168
1171
  [`.${prefix}avatar-dot`]: {
1169
1172
  [`@apply end-${config.avatarXXS.straightPosition} top-${config.avatarXXS.straightPosition}`]: {}
1170
1173
  }
1171
1174
  },
1172
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1175
+ [`&.${prefix}avatar-rounded`]: {
1173
1176
  [`@apply rounded`]: {},
1177
+ [`.${prefix}avatar-inner`]: {
1178
+ [`@apply rounded`]: {}
1179
+ },
1174
1180
  [`.${prefix}avatar-dot`]: {
1175
1181
  [`@apply end-${config.avatarXXS.roundedOrInnerDotPosition} top-${config.avatarXXS.roundedOrInnerDotPosition}`]: {}
1176
1182
  }
1177
1183
  },
1178
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1184
+ [`&.${prefix}avatar-curved`]: {
1179
1185
  [`@apply rounded-${config.avatarXXS.curvedOrInner.rounded}`]: {},
1186
+ [`.${prefix}avatar-inner`]: {
1187
+ [`@apply rounded-${config.avatarXXS.curvedOrInner.rounded}`]: {}
1188
+ },
1180
1189
  [`.${prefix}avatar-dot`]: {
1181
1190
  [`@apply end-${config.avatarXXS.curvedOrInner.dotPosition} top-${config.avatarXXS.curvedOrInner.dotPosition}`]: {}
1182
1191
  }
@@ -1198,20 +1207,29 @@ const avatar = plugin__default.withOptions(
1198
1207
  [`.${prefix}avatar-text`]: {
1199
1208
  [`@apply text-${config.avatarXS.text}`]: {}
1200
1209
  },
1201
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1210
+ [`&.${prefix}avatar-straight`]: {
1202
1211
  [`@apply rounded-none`]: {},
1212
+ [`.${prefix}avatar-inner`]: {
1213
+ [`@apply rounded-none`]: {}
1214
+ },
1203
1215
  [`.${prefix}avatar-dot`]: {
1204
1216
  [`@apply end-${config.avatarXS.straightPosition} top-${config.avatarXS.straightPosition}`]: {}
1205
1217
  }
1206
1218
  },
1207
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1219
+ [`&.${prefix}avatar-rounded`]: {
1208
1220
  [`@apply rounded`]: {},
1221
+ [`.${prefix}avatar-inner`]: {
1222
+ [`@apply rounded`]: {}
1223
+ },
1209
1224
  [`.${prefix}avatar-dot`]: {
1210
1225
  [`@apply end-${config.avatarXS.roundedOrInnerDotPosition} top-${config.avatarXS.roundedOrInnerDotPosition}`]: {}
1211
1226
  }
1212
1227
  },
1213
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1228
+ [`&.${prefix}avatar-curved`]: {
1214
1229
  [`@apply rounded-${config.avatarXS.curvedOrInner.rounded}`]: {},
1230
+ [`.${prefix}avatar-inner`]: {
1231
+ [`@apply rounded-${config.avatarXS.curvedOrInner.rounded}`]: {}
1232
+ },
1215
1233
  [`.${prefix}avatar-dot`]: {
1216
1234
  [`@apply end-${config.avatarXS.curvedOrInner.dotPosition} top-${config.avatarXS.curvedOrInner.dotPosition}`]: {}
1217
1235
  }
@@ -1233,20 +1251,29 @@ const avatar = plugin__default.withOptions(
1233
1251
  [`.${prefix}avatar-text`]: {
1234
1252
  [`@apply text-${config.avatarSM.text}`]: {}
1235
1253
  },
1236
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1254
+ [`&.${prefix}avatar-straight`]: {
1237
1255
  [`@apply rounded-none`]: {},
1256
+ [`.${prefix}avatar-inner`]: {
1257
+ [`@apply rounded-none`]: {}
1258
+ },
1238
1259
  [`.${prefix}avatar-dot`]: {
1239
1260
  [`@apply end-${config.avatarSM.straightPosition} top-${config.avatarSM.straightPosition}`]: {}
1240
1261
  }
1241
1262
  },
1242
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1263
+ [`&.${prefix}avatar-rounded`]: {
1243
1264
  [`@apply rounded-${config.avatarSM.roundedOrInner.rounded}`]: {},
1265
+ [`.${prefix}avatar-inner`]: {
1266
+ [`@apply rounded-${config.avatarSM.roundedOrInner.rounded}`]: {}
1267
+ },
1244
1268
  [`.${prefix}avatar-dot`]: {
1245
1269
  [`@apply end-${config.avatarSM.roundedOrInner.dotPosition} top-${config.avatarSM.roundedOrInner.dotPosition}`]: {}
1246
1270
  }
1247
1271
  },
1248
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1272
+ [`&.${prefix}avatar-curved`]: {
1249
1273
  [`@apply rounded-${config.avatarSM.curvedOrInner.rounded}`]: {},
1274
+ [`.${prefix}avatar-inner`]: {
1275
+ [`@apply rounded-${config.avatarSM.curvedOrInner.rounded}`]: {}
1276
+ },
1250
1277
  [`.${prefix}avatar-dot`]: {
1251
1278
  [`@apply end-${config.avatarSM.curvedOrInner.dotPosition} top-${config.avatarSM.curvedOrInner.dotPosition}`]: {}
1252
1279
  }
@@ -1268,20 +1295,29 @@ const avatar = plugin__default.withOptions(
1268
1295
  [`.${prefix}avatar-text`]: {
1269
1296
  [`@apply text-${config.avatarMD.text}`]: {}
1270
1297
  },
1271
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1298
+ [`&.${prefix}avatar-straight`]: {
1272
1299
  [`@apply rounded-none`]: {},
1300
+ [`.${prefix}avatar-inner`]: {
1301
+ [`@apply rounded-none`]: {}
1302
+ },
1273
1303
  [`.${prefix}avatar-dot`]: {
1274
1304
  [`@apply end-${config.avatarMD.straightPosition} top-${config.avatarMD.straightPosition}`]: {}
1275
1305
  }
1276
1306
  },
1277
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1307
+ [`&.${prefix}avatar-rounded`]: {
1278
1308
  [`@apply rounded-${config.avatarMD.roundedOrInner.rounded}`]: {},
1309
+ [`.${prefix}avatar-inner`]: {
1310
+ [`@apply rounded-${config.avatarMD.roundedOrInner.rounded}`]: {}
1311
+ },
1279
1312
  [`.${prefix}avatar-dot`]: {
1280
1313
  [`@apply end-${config.avatarMD.roundedOrInner.dotPosition} top-${config.avatarMD.roundedOrInner.dotPosition}`]: {}
1281
1314
  }
1282
1315
  },
1283
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1316
+ [`&.${prefix}avatar-curved`]: {
1284
1317
  [`@apply rounded-${config.avatarMD.curvedOrInner.rounded}`]: {},
1318
+ [`.${prefix}avatar-inner`]: {
1319
+ [`@apply rounded-${config.avatarMD.curvedOrInner.rounded}`]: {}
1320
+ },
1285
1321
  [`.${prefix}avatar-dot`]: {
1286
1322
  [`@apply end-${config.avatarMD.curvedOrInner.dotPosition} top-${config.avatarMD.curvedOrInner.dotPosition}`]: {}
1287
1323
  }
@@ -1303,20 +1339,29 @@ const avatar = plugin__default.withOptions(
1303
1339
  [`.${prefix}avatar-text`]: {
1304
1340
  [`@apply text-${config.avatarLG.text}`]: {}
1305
1341
  },
1306
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1342
+ [`&.${prefix}avatar-straight`]: {
1307
1343
  [`@apply rounded-none`]: {},
1344
+ [`.${prefix}avatar-inner`]: {
1345
+ [`@apply rounded-none`]: {}
1346
+ },
1308
1347
  [`.${prefix}avatar-dot`]: {
1309
1348
  [`@apply end-${config.avatarLG.straightPosition} top-${config.avatarLG.straightPosition}`]: {}
1310
1349
  }
1311
1350
  },
1312
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1351
+ [`&.${prefix}avatar-rounded`]: {
1313
1352
  [`@apply rounded-${config.avatarLG.roundedOrInner.rounded}`]: {},
1353
+ [`.${prefix}avatar-inner`]: {
1354
+ [`@apply rounded-${config.avatarLG.roundedOrInner.rounded}`]: {}
1355
+ },
1314
1356
  [`.${prefix}avatar-dot`]: {
1315
1357
  [`@apply end-${config.avatarLG.roundedOrInner.dotPosition} top-${config.avatarLG.roundedOrInner.dotPosition}`]: {}
1316
1358
  }
1317
1359
  },
1318
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1360
+ [`&.${prefix}avatar-curved`]: {
1319
1361
  [`@apply rounded-${config.avatarLG.curvedOrInner.rounded}`]: {},
1362
+ [`.${prefix}avatar-inner`]: {
1363
+ [`@apply rounded-${config.avatarLG.curvedOrInner.rounded}`]: {}
1364
+ },
1320
1365
  [`.${prefix}avatar-dot`]: {
1321
1366
  [`@apply end-${config.avatarLG.curvedOrInner.dotPosition} top-${config.avatarLG.curvedOrInner.dotPosition}`]: {}
1322
1367
  }
@@ -1338,20 +1383,29 @@ const avatar = plugin__default.withOptions(
1338
1383
  [`.${prefix}avatar-text`]: {
1339
1384
  [`@apply text-${config.avatarXL.text}`]: {}
1340
1385
  },
1341
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1386
+ [`&.${prefix}avatar-straight`]: {
1342
1387
  [`@apply rounded-none`]: {},
1388
+ [`.${prefix}avatar-inner`]: {
1389
+ [`@apply rounded-none`]: {}
1390
+ },
1343
1391
  [`.${prefix}avatar-dot`]: {
1344
1392
  [`@apply end-${config.avatarXL.straightPosition} top-${config.avatarXL.straightPosition}`]: {}
1345
1393
  }
1346
1394
  },
1347
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1395
+ [`&.${prefix}avatar-rounded`]: {
1348
1396
  [`@apply rounded-${config.avatarXL.roundedOrInner.rounded}`]: {},
1397
+ [`.${prefix}avatar-inner`]: {
1398
+ [`@apply rounded-${config.avatarXL.roundedOrInner.rounded}`]: {}
1399
+ },
1349
1400
  [`.${prefix}avatar-dot`]: {
1350
1401
  [`@apply end-${config.avatarXL.roundedOrInner.dotPosition} top-${config.avatarXL.roundedOrInner.dotPosition}`]: {}
1351
1402
  }
1352
1403
  },
1353
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1404
+ [`&.${prefix}avatar-curved`]: {
1354
1405
  [`@apply rounded-${config.avatarXL.curvedOrInner.rounded}`]: {},
1406
+ [`.${prefix}avatar-inner`]: {
1407
+ [`@apply rounded-${config.avatarXL.curvedOrInner.rounded}`]: {}
1408
+ },
1355
1409
  [`.${prefix}avatar-dot`]: {
1356
1410
  [`@apply end-${config.avatarXL.curvedOrInner.dotPosition} top-${config.avatarXL.curvedOrInner.dotPosition}`]: {}
1357
1411
  }
@@ -1373,20 +1427,29 @@ const avatar = plugin__default.withOptions(
1373
1427
  [`.${prefix}avatar-text`]: {
1374
1428
  [`@apply text-${config.avatar2XL.text}`]: {}
1375
1429
  },
1376
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1430
+ [`&.${prefix}avatar-straight`]: {
1377
1431
  [`@apply rounded-none`]: {},
1432
+ [`.${prefix}avatar-inner`]: {
1433
+ [`@apply rounded-none`]: {}
1434
+ },
1378
1435
  [`.${prefix}avatar-dot`]: {
1379
1436
  [`@apply end-${config.avatar2XL.straightPosition} top-${config.avatar2XL.straightPosition}`]: {}
1380
1437
  }
1381
1438
  },
1382
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1439
+ [`&.${prefix}avatar-rounded`]: {
1383
1440
  [`@apply rounded-${config.avatar2XL.roundedOrInner.rounded}`]: {},
1441
+ [`.${prefix}avatar-inner`]: {
1442
+ [`@apply rounded-${config.avatar2XL.roundedOrInner.rounded}`]: {}
1443
+ },
1384
1444
  [`.${prefix}avatar-dot`]: {
1385
1445
  [`@apply end-${config.avatar2XL.roundedOrInner.dotPosition} top-${config.avatar2XL.roundedOrInner.dotPosition}`]: {}
1386
1446
  }
1387
1447
  },
1388
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1448
+ [`&.${prefix}avatar-curved`]: {
1389
1449
  [`@apply rounded-${config.avatar2XL.curvedOrInner.rounded}`]: {},
1450
+ [`.${prefix}avatar-inner`]: {
1451
+ [`@apply rounded-${config.avatar2XL.curvedOrInner.rounded}`]: {}
1452
+ },
1390
1453
  [`.${prefix}avatar-dot`]: {
1391
1454
  [`@apply end-${config.avatar2XL.curvedOrInner.dotPosition} top-${config.avatar2XL.curvedOrInner.dotPosition}`]: {}
1392
1455
  }
@@ -1408,20 +1471,29 @@ const avatar = plugin__default.withOptions(
1408
1471
  [`.${prefix}avatar-text`]: {
1409
1472
  [`@apply text-${config.avatar3XL.text}`]: {}
1410
1473
  },
1411
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1474
+ [`&.${prefix}avatar-straight`]: {
1412
1475
  [`@apply rounded-none`]: {},
1476
+ [`.${prefix}avatar-inner`]: {
1477
+ [`@apply rounded-none`]: {}
1478
+ },
1413
1479
  [`.${prefix}avatar-dot`]: {
1414
1480
  [`@apply end-${config.avatar3XL.straightPosition} top-${config.avatar3XL.straightPosition}`]: {}
1415
1481
  }
1416
1482
  },
1417
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1483
+ [`&.${prefix}avatar-rounded`]: {
1418
1484
  [`@apply rounded-${config.avatar3XL.roundedOrInner.rounded}`]: {},
1485
+ [`.${prefix}avatar-inner`]: {
1486
+ [`@apply rounded-${config.avatar3XL.roundedOrInner.rounded}`]: {}
1487
+ },
1419
1488
  [`.${prefix}avatar-dot`]: {
1420
1489
  [`@apply end-${config.avatar3XL.roundedOrInner.dotPosition} top-${config.avatar3XL.roundedOrInner.dotPosition}`]: {}
1421
1490
  }
1422
1491
  },
1423
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1492
+ [`&.${prefix}avatar-curved`]: {
1424
1493
  [`@apply rounded-${config.avatar3XL.curvedOrInner.rounded}`]: {},
1494
+ [`.${prefix}avatar-inner`]: {
1495
+ [`@apply rounded-${config.avatar3XL.curvedOrInner.rounded}`]: {}
1496
+ },
1425
1497
  [`.${prefix}avatar-dot`]: {
1426
1498
  [`@apply end-${config.avatar3XL.curvedOrInner.dotPosition} top-${config.avatar3XL.curvedOrInner.dotPosition}`]: {}
1427
1499
  }
@@ -1443,20 +1515,29 @@ const avatar = plugin__default.withOptions(
1443
1515
  [`.${prefix}avatar-text`]: {
1444
1516
  [`@apply text-${config.avatar4XL.text}`]: {}
1445
1517
  },
1446
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1518
+ [`&.${prefix}avatar-straight`]: {
1447
1519
  [`@apply rounded-none`]: {},
1520
+ [`.${prefix}avatar-inner`]: {
1521
+ [`@apply rounded-none`]: {}
1522
+ },
1448
1523
  [`.${prefix}avatar-dot`]: {
1449
1524
  [`@apply end-${config.avatar4XL.straightPosition} top-${config.avatar4XL.straightPosition}`]: {}
1450
1525
  }
1451
1526
  },
1452
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1527
+ [`&.${prefix}avatar-rounded`]: {
1453
1528
  [`@apply rounded-${config.avatar4XL.roundedOrInner.rounded}`]: {},
1529
+ [`.${prefix}avatar-inner`]: {
1530
+ [`@apply rounded-${config.avatar4XL.roundedOrInner.rounded}`]: {}
1531
+ },
1454
1532
  [`.${prefix}avatar-dot`]: {
1455
1533
  [`@apply end-${config.avatar4XL.roundedOrInner.dotPosition} top-${config.avatar4XL.roundedOrInner.dotPosition}`]: {}
1456
1534
  }
1457
1535
  },
1458
1536
  [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1459
1537
  [`@apply rounded-${config.avatar4XL.curvedOrInner.rounded}`]: {},
1538
+ [`.${prefix}avatar-inner`]: {
1539
+ [`@apply rounded-${config.avatar4XL.curvedOrInner.rounded}`]: {}
1540
+ },
1460
1541
  [`.${prefix}avatar-dot`]: {
1461
1542
  [`@apply end-${config.avatar4XL.curvedOrInner.dotPosition} top-${config.avatar4XL.curvedOrInner.dotPosition}`]: {}
1462
1543
  }
@@ -1470,7 +1551,7 @@ const avatar = plugin__default.withOptions(
1470
1551
  [`&.${prefix}avatar-full`]: {
1471
1552
  [`@apply rounded-${config.avatarFull.rounded}`]: {},
1472
1553
  [`.${prefix}avatar-inner`]: {
1473
- [`@apply rounded-${config.avatarFull.avatarInnerRounded}`]: {}
1554
+ [`@apply rounded-${config.avatarFull.rounded}`]: {}
1474
1555
  },
1475
1556
  [`.${prefix}avatar-badge`]: {
1476
1557
  [`@apply -bottom-${config.avatarFull.avatarBadgePosition} -end-${config.avatarFull.avatarBadgePosition}`]: {}
@@ -1524,6 +1605,15 @@ const defaultAvatarGroupConfig = {
1524
1605
  font: "normal"
1525
1606
  }
1526
1607
  },
1608
+ avatarGroupXXS: {
1609
+ outer: {
1610
+ size: "6"
1611
+ },
1612
+ count: {
1613
+ size: "6",
1614
+ text: "xs"
1615
+ }
1616
+ },
1527
1617
  avatarGroupXS: {
1528
1618
  outer: {
1529
1619
  size: "8"
@@ -1589,6 +1679,23 @@ const avatarGroup = plugin__default.withOptions(
1589
1679
  [`@apply text-${config.avatarCount.text.text} dark:text-${config.avatarCount.text.textDark} -ms-1 font-sans font-${config.avatarCount.text.font} uppercase`]: {}
1590
1680
  }
1591
1681
  },
1682
+ [`&.${prefix}avatar-group-xxs`]: {
1683
+ [`.${prefix}avatar-outer`]: {
1684
+ [`@apply h-${config.avatarGroupXXS.outer.size} w-${config.avatarGroupXXS.outer.size}`]: {},
1685
+ [`&:first-child`]: {
1686
+ [`@apply hover:-ms-2 hover:me-2 focus:-ms-2 focus:me-2`]: {}
1687
+ },
1688
+ [`&:not(:first-child)`]: {
1689
+ [`@apply -ms-2 hover:-ms-4 hover:me-2 focus:-ms-4 focus:me-2`]: {}
1690
+ }
1691
+ },
1692
+ [`.${prefix}avatar-count`]: {
1693
+ [`@apply -ms-2 h-${config.avatarGroupXXS.count.size} w-${config.avatarGroupXXS.count.size}`]: {},
1694
+ [`.${prefix}avatar-count-text`]: {
1695
+ [`@apply text-${config.avatarGroupXXS.count.text}`]: {}
1696
+ }
1697
+ }
1698
+ },
1592
1699
  [`&.${prefix}avatar-group-xs`]: {
1593
1700
  [`.${prefix}avatar-outer`]: {
1594
1701
  [`@apply h-${config.avatarGroupXS.outer.size} w-${config.avatarGroupXS.outer.size}`]: {},
@@ -2740,6 +2847,7 @@ const defaultButtonConfig = {
2740
2847
  };
2741
2848
  const button = plugin__default.withOptions(
2742
2849
  function(options) {
2850
+ console.log("register button plugin");
2743
2851
  let { prefix } = defu.defu(options, defaultPluginOptions);
2744
2852
  if (prefix) {
2745
2853
  prefix = `${prefix}-`;
@@ -2800,9 +2908,12 @@ const button = plugin__default.withOptions(
2800
2908
  }
2801
2909
  }
2802
2910
  },
2911
+ // #region Loading
2803
2912
  [`&.${prefix}button-loading`]: {
2804
2913
  [`@apply !text-transparent`]: {}
2805
2914
  },
2915
+ // #endregion
2916
+ // #region Sizes
2806
2917
  [`&.${prefix}button-small`]: {
2807
2918
  [`@apply h-8 px-3 py-1 text-${config.buttonSmall.text}`]: {},
2808
2919
  [`.${prefix}button-icon`]: {
@@ -2827,6 +2938,8 @@ const button = plugin__default.withOptions(
2827
2938
  [`@apply w-${config.buttonBig.iconSize} h-${config.buttonBig.iconSize}`]: {}
2828
2939
  }
2829
2940
  },
2941
+ // #endregion
2942
+ // #region Shapes
2830
2943
  [`&.${prefix}button-rounded`]: {
2831
2944
  [`@apply rounded-${config.buttonRounded}`]: {}
2832
2945
  },
@@ -2842,6 +2955,8 @@ const button = plugin__default.withOptions(
2842
2955
  [`@apply flex absolute h-${config.buttonFull.badgeSize} w-${config.buttonFull.badgeSize} top-0 -end-1 -mt-0.5 me-2`]: {}
2843
2956
  }
2844
2957
  },
2958
+ // #endregion
2959
+ // #region Flavors
2845
2960
  [`&.${prefix}button-solid`]: {
2846
2961
  [`&.${prefix}button-default`]: {
2847
2962
  [`@apply text-${config.buttonSolid.default.text} bg-${config.buttonSolid.default.bg} border border-${config.buttonSolid.default.border} dark:text-${config.buttonSolid.default.textDark} dark:bg-${config.buttonSolid.default.bgDark} dark:border-${config.buttonSolid.default.borderDark} dark:hover:enabled:bg-${config.buttonSolid.default.bgHoverEnabledDark} dark:focus-visible:bg-${config.buttonSolid.default.bgFocusVisibleDark} dark:active:enabled:bg-${config.buttonSolid.default.bgActiveEnabledDark} hover:enabled:bg-${config.buttonSolid.default.bgHoverEnabled} focus-visible:bg-${config.buttonSolid.default.bgFocusVisible} active:enabled:bg-${config.buttonSolid.default.bgActiveEnabled}`]: {},
@@ -2980,6 +3095,7 @@ const button = plugin__default.withOptions(
2980
3095
  }
2981
3096
  }
2982
3097
  }
3098
+ // #endregion
2983
3099
  }
2984
3100
  });
2985
3101
  };
@@ -3745,7 +3861,7 @@ const heading = plugin__default.withOptions(
3745
3861
  );
3746
3862
  addComponents({
3747
3863
  [`.${prefix}heading`]: {
3748
- [`@apply font-heading`]: {},
3864
+ [`@apply font-sans`]: {},
3749
3865
  [`&.${prefix}heading-xs`]: {
3750
3866
  [`@apply text-${config.textXS}`]: {}
3751
3867
  },
@@ -4697,7 +4813,7 @@ const defaultInputConfig = {
4697
4813
  textPlaceholderDark: "muted-600"
4698
4814
  },
4699
4815
  muted: {
4700
- bg: "muted-200",
4816
+ bg: "muted-100",
4701
4817
  bgDark: "muted-900/75",
4702
4818
  border: "muted-200",
4703
4819
  borderDark: "muted-700",
@@ -5091,7 +5207,7 @@ const input = plugin__default.withOptions(
5091
5207
  );
5092
5208
 
5093
5209
  const defaultLabelConfig = {
5094
- font: "alt",
5210
+ font: "sans",
5095
5211
  text: "muted-400",
5096
5212
  textDark: "muted-400/80"
5097
5213
  };
@@ -5156,7 +5272,7 @@ const link = plugin__default.withOptions(
5156
5272
  }
5157
5273
  );
5158
5274
 
5159
- const defaultlistConfig = {
5275
+ const defaultListConfig = {
5160
5276
  ul: "disc",
5161
5277
  ol: "decimal",
5162
5278
  base: {
@@ -5204,7 +5320,7 @@ const list = plugin__default.withOptions(
5204
5320
  return {
5205
5321
  theme: {
5206
5322
  shurikenUi: {
5207
- list: defaultlistConfig
5323
+ list: defaultListConfig
5208
5324
  }
5209
5325
  }
5210
5326
  };
@@ -5336,7 +5452,7 @@ const defaultListboxConfig = {
5336
5452
  },
5337
5453
  default: {
5338
5454
  bg: "white",
5339
- bgDark: "muted-900/75",
5455
+ bgDark: "muted-900",
5340
5456
  border: "muted-300",
5341
5457
  borderDark: "muted-700",
5342
5458
  borderFocus: "muted-300",
@@ -5360,7 +5476,7 @@ const defaultListboxConfig = {
5360
5476
  },
5361
5477
  defaultContrast: {
5362
5478
  bg: "white",
5363
- bgDark: "muted-950/75",
5479
+ bgDark: "muted-950",
5364
5480
  border: "muted-300",
5365
5481
  borderDark: "muted-800",
5366
5482
  borderFocus: "muted-300",
@@ -5379,12 +5495,12 @@ const defaultListboxConfig = {
5379
5495
  border: "muted-200",
5380
5496
  borderDark: "muted-800",
5381
5497
  bg: "white",
5382
- bgDark: "muted-950/70"
5498
+ bgDark: "muted-950"
5383
5499
  }
5384
5500
  },
5385
5501
  muted: {
5386
5502
  bg: "muted-200",
5387
- bgDark: "muted-900/75",
5503
+ bgDark: "muted-900",
5388
5504
  border: "muted-300",
5389
5505
  borderDark: "muted-700",
5390
5506
  borderFocus: "muted-300",
@@ -5408,7 +5524,7 @@ const defaultListboxConfig = {
5408
5524
  },
5409
5525
  mutedContrast: {
5410
5526
  bg: "muted-200",
5411
- bgDark: "muted-950/75",
5527
+ bgDark: "muted-950",
5412
5528
  border: "muted-300",
5413
5529
  borderDark: "muted-800",
5414
5530
  borderFocus: "muted-300",
@@ -5427,7 +5543,7 @@ const defaultListboxConfig = {
5427
5543
  border: "muted-200",
5428
5544
  borderDark: "muted-800",
5429
5545
  bg: "white",
5430
- bgDark: "muted-950/70"
5546
+ bgDark: "muted-950"
5431
5547
  }
5432
5548
  },
5433
5549
  notLoading: {
package/dist/preset.mjs CHANGED
@@ -1075,7 +1075,7 @@ const avatar = plugin.withOptions(
1075
1075
  },
1076
1076
  [`.${prefix}avatar-badge`]: {
1077
1077
  [`@apply dark:bg-${config.avatarBadge.bgDark} absolute z-10 block overflow-hidden rounded-${config.avatarBadge.rounded} bg-${config.avatarBadge.bg}`]: {},
1078
- [`.badge-img`]: {
1078
+ [`.${prefix}badge-img`]: {
1079
1079
  [`@apply relative h-${config.avatarBadge.img.size} w-${config.avatarBadge.img.size} scale-90 rounded-${config.avatarBadge.img.rounded} object-cover`]: {}
1080
1080
  }
1081
1081
  },
@@ -1152,20 +1152,29 @@ const avatar = plugin.withOptions(
1152
1152
  [`.${prefix}avatar-text`]: {
1153
1153
  [`@apply text-${config.avatarXXS.text}`]: {}
1154
1154
  },
1155
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1155
+ [`&.${prefix}avatar-straight`]: {
1156
1156
  [`@apply rounded-none`]: {},
1157
+ [`.${prefix}avatar-inner`]: {
1158
+ [`@apply rounded-none`]: {}
1159
+ },
1157
1160
  [`.${prefix}avatar-dot`]: {
1158
1161
  [`@apply end-${config.avatarXXS.straightPosition} top-${config.avatarXXS.straightPosition}`]: {}
1159
1162
  }
1160
1163
  },
1161
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1164
+ [`&.${prefix}avatar-rounded`]: {
1162
1165
  [`@apply rounded`]: {},
1166
+ [`.${prefix}avatar-inner`]: {
1167
+ [`@apply rounded`]: {}
1168
+ },
1163
1169
  [`.${prefix}avatar-dot`]: {
1164
1170
  [`@apply end-${config.avatarXXS.roundedOrInnerDotPosition} top-${config.avatarXXS.roundedOrInnerDotPosition}`]: {}
1165
1171
  }
1166
1172
  },
1167
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1173
+ [`&.${prefix}avatar-curved`]: {
1168
1174
  [`@apply rounded-${config.avatarXXS.curvedOrInner.rounded}`]: {},
1175
+ [`.${prefix}avatar-inner`]: {
1176
+ [`@apply rounded-${config.avatarXXS.curvedOrInner.rounded}`]: {}
1177
+ },
1169
1178
  [`.${prefix}avatar-dot`]: {
1170
1179
  [`@apply end-${config.avatarXXS.curvedOrInner.dotPosition} top-${config.avatarXXS.curvedOrInner.dotPosition}`]: {}
1171
1180
  }
@@ -1187,20 +1196,29 @@ const avatar = plugin.withOptions(
1187
1196
  [`.${prefix}avatar-text`]: {
1188
1197
  [`@apply text-${config.avatarXS.text}`]: {}
1189
1198
  },
1190
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1199
+ [`&.${prefix}avatar-straight`]: {
1191
1200
  [`@apply rounded-none`]: {},
1201
+ [`.${prefix}avatar-inner`]: {
1202
+ [`@apply rounded-none`]: {}
1203
+ },
1192
1204
  [`.${prefix}avatar-dot`]: {
1193
1205
  [`@apply end-${config.avatarXS.straightPosition} top-${config.avatarXS.straightPosition}`]: {}
1194
1206
  }
1195
1207
  },
1196
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1208
+ [`&.${prefix}avatar-rounded`]: {
1197
1209
  [`@apply rounded`]: {},
1210
+ [`.${prefix}avatar-inner`]: {
1211
+ [`@apply rounded`]: {}
1212
+ },
1198
1213
  [`.${prefix}avatar-dot`]: {
1199
1214
  [`@apply end-${config.avatarXS.roundedOrInnerDotPosition} top-${config.avatarXS.roundedOrInnerDotPosition}`]: {}
1200
1215
  }
1201
1216
  },
1202
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1217
+ [`&.${prefix}avatar-curved`]: {
1203
1218
  [`@apply rounded-${config.avatarXS.curvedOrInner.rounded}`]: {},
1219
+ [`.${prefix}avatar-inner`]: {
1220
+ [`@apply rounded-${config.avatarXS.curvedOrInner.rounded}`]: {}
1221
+ },
1204
1222
  [`.${prefix}avatar-dot`]: {
1205
1223
  [`@apply end-${config.avatarXS.curvedOrInner.dotPosition} top-${config.avatarXS.curvedOrInner.dotPosition}`]: {}
1206
1224
  }
@@ -1222,20 +1240,29 @@ const avatar = plugin.withOptions(
1222
1240
  [`.${prefix}avatar-text`]: {
1223
1241
  [`@apply text-${config.avatarSM.text}`]: {}
1224
1242
  },
1225
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1243
+ [`&.${prefix}avatar-straight`]: {
1226
1244
  [`@apply rounded-none`]: {},
1245
+ [`.${prefix}avatar-inner`]: {
1246
+ [`@apply rounded-none`]: {}
1247
+ },
1227
1248
  [`.${prefix}avatar-dot`]: {
1228
1249
  [`@apply end-${config.avatarSM.straightPosition} top-${config.avatarSM.straightPosition}`]: {}
1229
1250
  }
1230
1251
  },
1231
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1252
+ [`&.${prefix}avatar-rounded`]: {
1232
1253
  [`@apply rounded-${config.avatarSM.roundedOrInner.rounded}`]: {},
1254
+ [`.${prefix}avatar-inner`]: {
1255
+ [`@apply rounded-${config.avatarSM.roundedOrInner.rounded}`]: {}
1256
+ },
1233
1257
  [`.${prefix}avatar-dot`]: {
1234
1258
  [`@apply end-${config.avatarSM.roundedOrInner.dotPosition} top-${config.avatarSM.roundedOrInner.dotPosition}`]: {}
1235
1259
  }
1236
1260
  },
1237
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1261
+ [`&.${prefix}avatar-curved`]: {
1238
1262
  [`@apply rounded-${config.avatarSM.curvedOrInner.rounded}`]: {},
1263
+ [`.${prefix}avatar-inner`]: {
1264
+ [`@apply rounded-${config.avatarSM.curvedOrInner.rounded}`]: {}
1265
+ },
1239
1266
  [`.${prefix}avatar-dot`]: {
1240
1267
  [`@apply end-${config.avatarSM.curvedOrInner.dotPosition} top-${config.avatarSM.curvedOrInner.dotPosition}`]: {}
1241
1268
  }
@@ -1257,20 +1284,29 @@ const avatar = plugin.withOptions(
1257
1284
  [`.${prefix}avatar-text`]: {
1258
1285
  [`@apply text-${config.avatarMD.text}`]: {}
1259
1286
  },
1260
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1287
+ [`&.${prefix}avatar-straight`]: {
1261
1288
  [`@apply rounded-none`]: {},
1289
+ [`.${prefix}avatar-inner`]: {
1290
+ [`@apply rounded-none`]: {}
1291
+ },
1262
1292
  [`.${prefix}avatar-dot`]: {
1263
1293
  [`@apply end-${config.avatarMD.straightPosition} top-${config.avatarMD.straightPosition}`]: {}
1264
1294
  }
1265
1295
  },
1266
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1296
+ [`&.${prefix}avatar-rounded`]: {
1267
1297
  [`@apply rounded-${config.avatarMD.roundedOrInner.rounded}`]: {},
1298
+ [`.${prefix}avatar-inner`]: {
1299
+ [`@apply rounded-${config.avatarMD.roundedOrInner.rounded}`]: {}
1300
+ },
1268
1301
  [`.${prefix}avatar-dot`]: {
1269
1302
  [`@apply end-${config.avatarMD.roundedOrInner.dotPosition} top-${config.avatarMD.roundedOrInner.dotPosition}`]: {}
1270
1303
  }
1271
1304
  },
1272
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1305
+ [`&.${prefix}avatar-curved`]: {
1273
1306
  [`@apply rounded-${config.avatarMD.curvedOrInner.rounded}`]: {},
1307
+ [`.${prefix}avatar-inner`]: {
1308
+ [`@apply rounded-${config.avatarMD.curvedOrInner.rounded}`]: {}
1309
+ },
1274
1310
  [`.${prefix}avatar-dot`]: {
1275
1311
  [`@apply end-${config.avatarMD.curvedOrInner.dotPosition} top-${config.avatarMD.curvedOrInner.dotPosition}`]: {}
1276
1312
  }
@@ -1292,20 +1328,29 @@ const avatar = plugin.withOptions(
1292
1328
  [`.${prefix}avatar-text`]: {
1293
1329
  [`@apply text-${config.avatarLG.text}`]: {}
1294
1330
  },
1295
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1331
+ [`&.${prefix}avatar-straight`]: {
1296
1332
  [`@apply rounded-none`]: {},
1333
+ [`.${prefix}avatar-inner`]: {
1334
+ [`@apply rounded-none`]: {}
1335
+ },
1297
1336
  [`.${prefix}avatar-dot`]: {
1298
1337
  [`@apply end-${config.avatarLG.straightPosition} top-${config.avatarLG.straightPosition}`]: {}
1299
1338
  }
1300
1339
  },
1301
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1340
+ [`&.${prefix}avatar-rounded`]: {
1302
1341
  [`@apply rounded-${config.avatarLG.roundedOrInner.rounded}`]: {},
1342
+ [`.${prefix}avatar-inner`]: {
1343
+ [`@apply rounded-${config.avatarLG.roundedOrInner.rounded}`]: {}
1344
+ },
1303
1345
  [`.${prefix}avatar-dot`]: {
1304
1346
  [`@apply end-${config.avatarLG.roundedOrInner.dotPosition} top-${config.avatarLG.roundedOrInner.dotPosition}`]: {}
1305
1347
  }
1306
1348
  },
1307
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1349
+ [`&.${prefix}avatar-curved`]: {
1308
1350
  [`@apply rounded-${config.avatarLG.curvedOrInner.rounded}`]: {},
1351
+ [`.${prefix}avatar-inner`]: {
1352
+ [`@apply rounded-${config.avatarLG.curvedOrInner.rounded}`]: {}
1353
+ },
1309
1354
  [`.${prefix}avatar-dot`]: {
1310
1355
  [`@apply end-${config.avatarLG.curvedOrInner.dotPosition} top-${config.avatarLG.curvedOrInner.dotPosition}`]: {}
1311
1356
  }
@@ -1327,20 +1372,29 @@ const avatar = plugin.withOptions(
1327
1372
  [`.${prefix}avatar-text`]: {
1328
1373
  [`@apply text-${config.avatarXL.text}`]: {}
1329
1374
  },
1330
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1375
+ [`&.${prefix}avatar-straight`]: {
1331
1376
  [`@apply rounded-none`]: {},
1377
+ [`.${prefix}avatar-inner`]: {
1378
+ [`@apply rounded-none`]: {}
1379
+ },
1332
1380
  [`.${prefix}avatar-dot`]: {
1333
1381
  [`@apply end-${config.avatarXL.straightPosition} top-${config.avatarXL.straightPosition}`]: {}
1334
1382
  }
1335
1383
  },
1336
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1384
+ [`&.${prefix}avatar-rounded`]: {
1337
1385
  [`@apply rounded-${config.avatarXL.roundedOrInner.rounded}`]: {},
1386
+ [`.${prefix}avatar-inner`]: {
1387
+ [`@apply rounded-${config.avatarXL.roundedOrInner.rounded}`]: {}
1388
+ },
1338
1389
  [`.${prefix}avatar-dot`]: {
1339
1390
  [`@apply end-${config.avatarXL.roundedOrInner.dotPosition} top-${config.avatarXL.roundedOrInner.dotPosition}`]: {}
1340
1391
  }
1341
1392
  },
1342
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1393
+ [`&.${prefix}avatar-curved`]: {
1343
1394
  [`@apply rounded-${config.avatarXL.curvedOrInner.rounded}`]: {},
1395
+ [`.${prefix}avatar-inner`]: {
1396
+ [`@apply rounded-${config.avatarXL.curvedOrInner.rounded}`]: {}
1397
+ },
1344
1398
  [`.${prefix}avatar-dot`]: {
1345
1399
  [`@apply end-${config.avatarXL.curvedOrInner.dotPosition} top-${config.avatarXL.curvedOrInner.dotPosition}`]: {}
1346
1400
  }
@@ -1362,20 +1416,29 @@ const avatar = plugin.withOptions(
1362
1416
  [`.${prefix}avatar-text`]: {
1363
1417
  [`@apply text-${config.avatar2XL.text}`]: {}
1364
1418
  },
1365
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1419
+ [`&.${prefix}avatar-straight`]: {
1366
1420
  [`@apply rounded-none`]: {},
1421
+ [`.${prefix}avatar-inner`]: {
1422
+ [`@apply rounded-none`]: {}
1423
+ },
1367
1424
  [`.${prefix}avatar-dot`]: {
1368
1425
  [`@apply end-${config.avatar2XL.straightPosition} top-${config.avatar2XL.straightPosition}`]: {}
1369
1426
  }
1370
1427
  },
1371
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1428
+ [`&.${prefix}avatar-rounded`]: {
1372
1429
  [`@apply rounded-${config.avatar2XL.roundedOrInner.rounded}`]: {},
1430
+ [`.${prefix}avatar-inner`]: {
1431
+ [`@apply rounded-${config.avatar2XL.roundedOrInner.rounded}`]: {}
1432
+ },
1373
1433
  [`.${prefix}avatar-dot`]: {
1374
1434
  [`@apply end-${config.avatar2XL.roundedOrInner.dotPosition} top-${config.avatar2XL.roundedOrInner.dotPosition}`]: {}
1375
1435
  }
1376
1436
  },
1377
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1437
+ [`&.${prefix}avatar-curved`]: {
1378
1438
  [`@apply rounded-${config.avatar2XL.curvedOrInner.rounded}`]: {},
1439
+ [`.${prefix}avatar-inner`]: {
1440
+ [`@apply rounded-${config.avatar2XL.curvedOrInner.rounded}`]: {}
1441
+ },
1379
1442
  [`.${prefix}avatar-dot`]: {
1380
1443
  [`@apply end-${config.avatar2XL.curvedOrInner.dotPosition} top-${config.avatar2XL.curvedOrInner.dotPosition}`]: {}
1381
1444
  }
@@ -1397,20 +1460,29 @@ const avatar = plugin.withOptions(
1397
1460
  [`.${prefix}avatar-text`]: {
1398
1461
  [`@apply text-${config.avatar3XL.text}`]: {}
1399
1462
  },
1400
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1463
+ [`&.${prefix}avatar-straight`]: {
1401
1464
  [`@apply rounded-none`]: {},
1465
+ [`.${prefix}avatar-inner`]: {
1466
+ [`@apply rounded-none`]: {}
1467
+ },
1402
1468
  [`.${prefix}avatar-dot`]: {
1403
1469
  [`@apply end-${config.avatar3XL.straightPosition} top-${config.avatar3XL.straightPosition}`]: {}
1404
1470
  }
1405
1471
  },
1406
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1472
+ [`&.${prefix}avatar-rounded`]: {
1407
1473
  [`@apply rounded-${config.avatar3XL.roundedOrInner.rounded}`]: {},
1474
+ [`.${prefix}avatar-inner`]: {
1475
+ [`@apply rounded-${config.avatar3XL.roundedOrInner.rounded}`]: {}
1476
+ },
1408
1477
  [`.${prefix}avatar-dot`]: {
1409
1478
  [`@apply end-${config.avatar3XL.roundedOrInner.dotPosition} top-${config.avatar3XL.roundedOrInner.dotPosition}`]: {}
1410
1479
  }
1411
1480
  },
1412
- [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1481
+ [`&.${prefix}avatar-curved`]: {
1413
1482
  [`@apply rounded-${config.avatar3XL.curvedOrInner.rounded}`]: {},
1483
+ [`.${prefix}avatar-inner`]: {
1484
+ [`@apply rounded-${config.avatar3XL.curvedOrInner.rounded}`]: {}
1485
+ },
1414
1486
  [`.${prefix}avatar-dot`]: {
1415
1487
  [`@apply end-${config.avatar3XL.curvedOrInner.dotPosition} top-${config.avatar3XL.curvedOrInner.dotPosition}`]: {}
1416
1488
  }
@@ -1432,20 +1504,29 @@ const avatar = plugin.withOptions(
1432
1504
  [`.${prefix}avatar-text`]: {
1433
1505
  [`@apply text-${config.avatar4XL.text}`]: {}
1434
1506
  },
1435
- [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: {
1507
+ [`&.${prefix}avatar-straight`]: {
1436
1508
  [`@apply rounded-none`]: {},
1509
+ [`.${prefix}avatar-inner`]: {
1510
+ [`@apply rounded-none`]: {}
1511
+ },
1437
1512
  [`.${prefix}avatar-dot`]: {
1438
1513
  [`@apply end-${config.avatar4XL.straightPosition} top-${config.avatar4XL.straightPosition}`]: {}
1439
1514
  }
1440
1515
  },
1441
- [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: {
1516
+ [`&.${prefix}avatar-rounded`]: {
1442
1517
  [`@apply rounded-${config.avatar4XL.roundedOrInner.rounded}`]: {},
1518
+ [`.${prefix}avatar-inner`]: {
1519
+ [`@apply rounded-${config.avatar4XL.roundedOrInner.rounded}`]: {}
1520
+ },
1443
1521
  [`.${prefix}avatar-dot`]: {
1444
1522
  [`@apply end-${config.avatar4XL.roundedOrInner.dotPosition} top-${config.avatar4XL.roundedOrInner.dotPosition}`]: {}
1445
1523
  }
1446
1524
  },
1447
1525
  [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: {
1448
1526
  [`@apply rounded-${config.avatar4XL.curvedOrInner.rounded}`]: {},
1527
+ [`.${prefix}avatar-inner`]: {
1528
+ [`@apply rounded-${config.avatar4XL.curvedOrInner.rounded}`]: {}
1529
+ },
1449
1530
  [`.${prefix}avatar-dot`]: {
1450
1531
  [`@apply end-${config.avatar4XL.curvedOrInner.dotPosition} top-${config.avatar4XL.curvedOrInner.dotPosition}`]: {}
1451
1532
  }
@@ -1459,7 +1540,7 @@ const avatar = plugin.withOptions(
1459
1540
  [`&.${prefix}avatar-full`]: {
1460
1541
  [`@apply rounded-${config.avatarFull.rounded}`]: {},
1461
1542
  [`.${prefix}avatar-inner`]: {
1462
- [`@apply rounded-${config.avatarFull.avatarInnerRounded}`]: {}
1543
+ [`@apply rounded-${config.avatarFull.rounded}`]: {}
1463
1544
  },
1464
1545
  [`.${prefix}avatar-badge`]: {
1465
1546
  [`@apply -bottom-${config.avatarFull.avatarBadgePosition} -end-${config.avatarFull.avatarBadgePosition}`]: {}
@@ -1513,6 +1594,15 @@ const defaultAvatarGroupConfig = {
1513
1594
  font: "normal"
1514
1595
  }
1515
1596
  },
1597
+ avatarGroupXXS: {
1598
+ outer: {
1599
+ size: "6"
1600
+ },
1601
+ count: {
1602
+ size: "6",
1603
+ text: "xs"
1604
+ }
1605
+ },
1516
1606
  avatarGroupXS: {
1517
1607
  outer: {
1518
1608
  size: "8"
@@ -1578,6 +1668,23 @@ const avatarGroup = plugin.withOptions(
1578
1668
  [`@apply text-${config.avatarCount.text.text} dark:text-${config.avatarCount.text.textDark} -ms-1 font-sans font-${config.avatarCount.text.font} uppercase`]: {}
1579
1669
  }
1580
1670
  },
1671
+ [`&.${prefix}avatar-group-xxs`]: {
1672
+ [`.${prefix}avatar-outer`]: {
1673
+ [`@apply h-${config.avatarGroupXXS.outer.size} w-${config.avatarGroupXXS.outer.size}`]: {},
1674
+ [`&:first-child`]: {
1675
+ [`@apply hover:-ms-2 hover:me-2 focus:-ms-2 focus:me-2`]: {}
1676
+ },
1677
+ [`&:not(:first-child)`]: {
1678
+ [`@apply -ms-2 hover:-ms-4 hover:me-2 focus:-ms-4 focus:me-2`]: {}
1679
+ }
1680
+ },
1681
+ [`.${prefix}avatar-count`]: {
1682
+ [`@apply -ms-2 h-${config.avatarGroupXXS.count.size} w-${config.avatarGroupXXS.count.size}`]: {},
1683
+ [`.${prefix}avatar-count-text`]: {
1684
+ [`@apply text-${config.avatarGroupXXS.count.text}`]: {}
1685
+ }
1686
+ }
1687
+ },
1581
1688
  [`&.${prefix}avatar-group-xs`]: {
1582
1689
  [`.${prefix}avatar-outer`]: {
1583
1690
  [`@apply h-${config.avatarGroupXS.outer.size} w-${config.avatarGroupXS.outer.size}`]: {},
@@ -2729,6 +2836,7 @@ const defaultButtonConfig = {
2729
2836
  };
2730
2837
  const button = plugin.withOptions(
2731
2838
  function(options) {
2839
+ console.log("register button plugin");
2732
2840
  let { prefix } = defu(options, defaultPluginOptions);
2733
2841
  if (prefix) {
2734
2842
  prefix = `${prefix}-`;
@@ -2789,9 +2897,12 @@ const button = plugin.withOptions(
2789
2897
  }
2790
2898
  }
2791
2899
  },
2900
+ // #region Loading
2792
2901
  [`&.${prefix}button-loading`]: {
2793
2902
  [`@apply !text-transparent`]: {}
2794
2903
  },
2904
+ // #endregion
2905
+ // #region Sizes
2795
2906
  [`&.${prefix}button-small`]: {
2796
2907
  [`@apply h-8 px-3 py-1 text-${config.buttonSmall.text}`]: {},
2797
2908
  [`.${prefix}button-icon`]: {
@@ -2816,6 +2927,8 @@ const button = plugin.withOptions(
2816
2927
  [`@apply w-${config.buttonBig.iconSize} h-${config.buttonBig.iconSize}`]: {}
2817
2928
  }
2818
2929
  },
2930
+ // #endregion
2931
+ // #region Shapes
2819
2932
  [`&.${prefix}button-rounded`]: {
2820
2933
  [`@apply rounded-${config.buttonRounded}`]: {}
2821
2934
  },
@@ -2831,6 +2944,8 @@ const button = plugin.withOptions(
2831
2944
  [`@apply flex absolute h-${config.buttonFull.badgeSize} w-${config.buttonFull.badgeSize} top-0 -end-1 -mt-0.5 me-2`]: {}
2832
2945
  }
2833
2946
  },
2947
+ // #endregion
2948
+ // #region Flavors
2834
2949
  [`&.${prefix}button-solid`]: {
2835
2950
  [`&.${prefix}button-default`]: {
2836
2951
  [`@apply text-${config.buttonSolid.default.text} bg-${config.buttonSolid.default.bg} border border-${config.buttonSolid.default.border} dark:text-${config.buttonSolid.default.textDark} dark:bg-${config.buttonSolid.default.bgDark} dark:border-${config.buttonSolid.default.borderDark} dark:hover:enabled:bg-${config.buttonSolid.default.bgHoverEnabledDark} dark:focus-visible:bg-${config.buttonSolid.default.bgFocusVisibleDark} dark:active:enabled:bg-${config.buttonSolid.default.bgActiveEnabledDark} hover:enabled:bg-${config.buttonSolid.default.bgHoverEnabled} focus-visible:bg-${config.buttonSolid.default.bgFocusVisible} active:enabled:bg-${config.buttonSolid.default.bgActiveEnabled}`]: {},
@@ -2969,6 +3084,7 @@ const button = plugin.withOptions(
2969
3084
  }
2970
3085
  }
2971
3086
  }
3087
+ // #endregion
2972
3088
  }
2973
3089
  });
2974
3090
  };
@@ -3734,7 +3850,7 @@ const heading = plugin.withOptions(
3734
3850
  );
3735
3851
  addComponents({
3736
3852
  [`.${prefix}heading`]: {
3737
- [`@apply font-heading`]: {},
3853
+ [`@apply font-sans`]: {},
3738
3854
  [`&.${prefix}heading-xs`]: {
3739
3855
  [`@apply text-${config.textXS}`]: {}
3740
3856
  },
@@ -4686,7 +4802,7 @@ const defaultInputConfig = {
4686
4802
  textPlaceholderDark: "muted-600"
4687
4803
  },
4688
4804
  muted: {
4689
- bg: "muted-200",
4805
+ bg: "muted-100",
4690
4806
  bgDark: "muted-900/75",
4691
4807
  border: "muted-200",
4692
4808
  borderDark: "muted-700",
@@ -5080,7 +5196,7 @@ const input = plugin.withOptions(
5080
5196
  );
5081
5197
 
5082
5198
  const defaultLabelConfig = {
5083
- font: "alt",
5199
+ font: "sans",
5084
5200
  text: "muted-400",
5085
5201
  textDark: "muted-400/80"
5086
5202
  };
@@ -5145,7 +5261,7 @@ const link = plugin.withOptions(
5145
5261
  }
5146
5262
  );
5147
5263
 
5148
- const defaultlistConfig = {
5264
+ const defaultListConfig = {
5149
5265
  ul: "disc",
5150
5266
  ol: "decimal",
5151
5267
  base: {
@@ -5193,7 +5309,7 @@ const list = plugin.withOptions(
5193
5309
  return {
5194
5310
  theme: {
5195
5311
  shurikenUi: {
5196
- list: defaultlistConfig
5312
+ list: defaultListConfig
5197
5313
  }
5198
5314
  }
5199
5315
  };
@@ -5325,7 +5441,7 @@ const defaultListboxConfig = {
5325
5441
  },
5326
5442
  default: {
5327
5443
  bg: "white",
5328
- bgDark: "muted-900/75",
5444
+ bgDark: "muted-900",
5329
5445
  border: "muted-300",
5330
5446
  borderDark: "muted-700",
5331
5447
  borderFocus: "muted-300",
@@ -5349,7 +5465,7 @@ const defaultListboxConfig = {
5349
5465
  },
5350
5466
  defaultContrast: {
5351
5467
  bg: "white",
5352
- bgDark: "muted-950/75",
5468
+ bgDark: "muted-950",
5353
5469
  border: "muted-300",
5354
5470
  borderDark: "muted-800",
5355
5471
  borderFocus: "muted-300",
@@ -5368,12 +5484,12 @@ const defaultListboxConfig = {
5368
5484
  border: "muted-200",
5369
5485
  borderDark: "muted-800",
5370
5486
  bg: "white",
5371
- bgDark: "muted-950/70"
5487
+ bgDark: "muted-950"
5372
5488
  }
5373
5489
  },
5374
5490
  muted: {
5375
5491
  bg: "muted-200",
5376
- bgDark: "muted-900/75",
5492
+ bgDark: "muted-900",
5377
5493
  border: "muted-300",
5378
5494
  borderDark: "muted-700",
5379
5495
  borderFocus: "muted-300",
@@ -5397,7 +5513,7 @@ const defaultListboxConfig = {
5397
5513
  },
5398
5514
  mutedContrast: {
5399
5515
  bg: "muted-200",
5400
- bgDark: "muted-950/75",
5516
+ bgDark: "muted-950",
5401
5517
  border: "muted-300",
5402
5518
  borderDark: "muted-800",
5403
5519
  borderFocus: "muted-300",
@@ -5416,7 +5532,7 @@ const defaultListboxConfig = {
5416
5532
  border: "muted-200",
5417
5533
  borderDark: "muted-800",
5418
5534
  bg: "white",
5419
- bgDark: "muted-950/70"
5535
+ bgDark: "muted-950"
5420
5536
  }
5421
5537
  },
5422
5538
  notLoading: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shuriken-ui/tailwind",
3
- "version": "1.0.2",
3
+ "version": "1.2.0",
4
4
  "license": "MIT",
5
5
  "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
6
6
  "repository": "shuriken-ui/tailwind",
@@ -47,7 +47,9 @@
47
47
  "dist"
48
48
  ],
49
49
  "scripts": {
50
+ "dev": "storybook dev -p 6006",
50
51
  "build": "unbuild",
52
+ "build:storybook": "storybook build",
51
53
  "lint": "run-s lint:eslint:fix lint:prettier:fix",
52
54
  "lint:prettier": "prettier --check \"./**/*.(ts|vue|css|scss|md)\"",
53
55
  "lint:prettier:fix": "prettier --write \"./**/*.(ts|vue|css|scss|md)\"",
@@ -55,6 +57,8 @@
55
57
  "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix --ext .vue,.ts .",
56
58
  "test": "run-p test:*",
57
59
  "test:lint": "run-s lint:eslint lint:prettier",
60
+ "test:vitest": "vitest",
61
+ "coverage": "vitest run --coverage",
58
62
  "prepack": "pnpm run build",
59
63
  "release": "run-s test release:*",
60
64
  "release:standard-version": "standard-version",
@@ -71,20 +75,39 @@
71
75
  "devDependencies": {
72
76
  "@commitlint/cli": "^17.7.1",
73
77
  "@commitlint/config-conventional": "^17.7.0",
78
+ "@open-wc/lit-helpers": "0.6.0",
79
+ "@storybook/addon-essentials": "^7.3.1",
80
+ "@storybook/addon-links": "^7.3.1",
81
+ "@storybook/addon-styling": "^1.3.6",
82
+ "@storybook/blocks": "^7.3.1",
83
+ "@storybook/web-components": "^7.3.1",
84
+ "@storybook/web-components-vite": "^7.3.1",
74
85
  "@types/node": "18.15.11",
75
86
  "@typescript-eslint/eslint-plugin": "^6.4.1",
87
+ "@vitest/coverage-v8": "^0.34.3",
88
+ "@vitest/ui": "^0.34.3",
89
+ "autoprefixer": "^10.4.15",
76
90
  "commitlint": "^17.7.1",
77
91
  "eslint": "8.48.0",
78
92
  "eslint-config-prettier": "9.0.0",
93
+ "eslint-plugin-storybook": "^0.6.13",
79
94
  "eslint-plugin-tailwindcss": "3.13.0",
80
95
  "eslint-plugin-unicorn": "^48.0.1",
96
+ "jsdom": "^22.1.0",
81
97
  "lint-staged": "^14.0.1",
98
+ "lit": "^2.8.0",
82
99
  "npm-run-all": "^4.1.5",
100
+ "postcss": "^8.4.28",
83
101
  "prettier": "^3.0.2",
102
+ "react": "^18.2.0",
103
+ "react-dom": "^18.2.0",
84
104
  "simple-git-hooks": "^2.9.0",
85
105
  "standard-version": "^9.5.0",
106
+ "storybook": "^7.3.1",
86
107
  "typescript": "^5.2.2",
87
- "unbuild": "^2.0.0"
108
+ "unbuild": "^2.0.0",
109
+ "vitest": "^0.34.3",
110
+ "vitest-axe": "1.0.0-pre.2"
88
111
  },
89
112
  "simple-git-hooks": {
90
113
  "pre-commit": "pnpm lint-staged",
@@ -92,8 +115,8 @@
92
115
  },
93
116
  "lint-staged": {
94
117
  "*.ts?(x)": [
95
- "eslint",
96
- "prettier --parser=typescript --write"
118
+ "prettier --parser=typescript --write",
119
+ "eslint --fix"
97
120
  ]
98
121
  }
99
122
  }