@shuriken-ui/tailwind 1.0.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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
  }