@shuriken-ui/tailwind 1.1.0 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
package/dist/config.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import * as tailwindcss_types_config from 'tailwindcss/types/config';
2
1
  import * as typography from '@tailwindcss/typography';
2
+ import * as tailwindcss_types_config from 'tailwindcss/types/config';
3
3
  import { Config } from 'tailwindcss';
4
4
 
5
5
  declare const _default: {
@@ -7,11 +7,11 @@ declare const _default: {
7
7
  presets: {
8
8
  darkMode: "class";
9
9
  content: never[];
10
- plugins: (typeof typography | {
11
- handler: () => void;
12
- } | {
10
+ plugins: ({
13
11
  handler: tailwindcss_types_config.PluginCreator;
14
12
  config?: Partial<Config> | undefined;
13
+ } | typeof typography | {
14
+ handler: () => void;
15
15
  })[];
16
16
  theme: {
17
17
  fontFamily: {
package/dist/config.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import * as tailwindcss_types_config from 'tailwindcss/types/config';
2
1
  import * as typography from '@tailwindcss/typography';
2
+ import * as tailwindcss_types_config from 'tailwindcss/types/config';
3
3
  import { Config } from 'tailwindcss';
4
4
 
5
5
  declare const _default: {
@@ -7,11 +7,11 @@ declare const _default: {
7
7
  presets: {
8
8
  darkMode: "class";
9
9
  content: never[];
10
- plugins: (typeof typography | {
11
- handler: () => void;
12
- } | {
10
+ plugins: ({
13
11
  handler: tailwindcss_types_config.PluginCreator;
14
12
  config?: Partial<Config> | undefined;
13
+ } | typeof typography | {
14
+ handler: () => void;
15
15
  })[];
16
16
  theme: {
17
17
  fontFamily: {
package/dist/config.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import * as tailwindcss_types_config from 'tailwindcss/types/config';
2
1
  import * as typography from '@tailwindcss/typography';
2
+ import * as tailwindcss_types_config from 'tailwindcss/types/config';
3
3
  import { Config } from 'tailwindcss';
4
4
 
5
5
  declare const _default: {
@@ -7,11 +7,11 @@ declare const _default: {
7
7
  presets: {
8
8
  darkMode: "class";
9
9
  content: never[];
10
- plugins: (typeof typography | {
11
- handler: () => void;
12
- } | {
10
+ plugins: ({
13
11
  handler: tailwindcss_types_config.PluginCreator;
14
12
  config?: Partial<Config> | undefined;
13
+ } | typeof typography | {
14
+ handler: () => void;
15
15
  })[];
16
16
  theme: {
17
17
  fontFamily: {
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}`]: {}
@@ -2766,6 +2847,7 @@ const defaultButtonConfig = {
2766
2847
  };
2767
2848
  const button = plugin__default.withOptions(
2768
2849
  function(options) {
2850
+ console.log("register button plugin");
2769
2851
  let { prefix } = defu.defu(options, defaultPluginOptions);
2770
2852
  if (prefix) {
2771
2853
  prefix = `${prefix}-`;
@@ -2826,9 +2908,12 @@ const button = plugin__default.withOptions(
2826
2908
  }
2827
2909
  }
2828
2910
  },
2911
+ // #region Loading
2829
2912
  [`&.${prefix}button-loading`]: {
2830
2913
  [`@apply !text-transparent`]: {}
2831
2914
  },
2915
+ // #endregion
2916
+ // #region Sizes
2832
2917
  [`&.${prefix}button-small`]: {
2833
2918
  [`@apply h-8 px-3 py-1 text-${config.buttonSmall.text}`]: {},
2834
2919
  [`.${prefix}button-icon`]: {
@@ -2853,6 +2938,8 @@ const button = plugin__default.withOptions(
2853
2938
  [`@apply w-${config.buttonBig.iconSize} h-${config.buttonBig.iconSize}`]: {}
2854
2939
  }
2855
2940
  },
2941
+ // #endregion
2942
+ // #region Shapes
2856
2943
  [`&.${prefix}button-rounded`]: {
2857
2944
  [`@apply rounded-${config.buttonRounded}`]: {}
2858
2945
  },
@@ -2868,6 +2955,8 @@ const button = plugin__default.withOptions(
2868
2955
  [`@apply flex absolute h-${config.buttonFull.badgeSize} w-${config.buttonFull.badgeSize} top-0 -end-1 -mt-0.5 me-2`]: {}
2869
2956
  }
2870
2957
  },
2958
+ // #endregion
2959
+ // #region Flavors
2871
2960
  [`&.${prefix}button-solid`]: {
2872
2961
  [`&.${prefix}button-default`]: {
2873
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}`]: {},
@@ -3006,6 +3095,7 @@ const button = plugin__default.withOptions(
3006
3095
  }
3007
3096
  }
3008
3097
  }
3098
+ // #endregion
3009
3099
  }
3010
3100
  });
3011
3101
  };
@@ -3771,7 +3861,7 @@ const heading = plugin__default.withOptions(
3771
3861
  );
3772
3862
  addComponents({
3773
3863
  [`.${prefix}heading`]: {
3774
- [`@apply font-heading`]: {},
3864
+ [`@apply font-sans`]: {},
3775
3865
  [`&.${prefix}heading-xs`]: {
3776
3866
  [`@apply text-${config.textXS}`]: {}
3777
3867
  },
@@ -4723,7 +4813,7 @@ const defaultInputConfig = {
4723
4813
  textPlaceholderDark: "muted-600"
4724
4814
  },
4725
4815
  muted: {
4726
- bg: "muted-200",
4816
+ bg: "muted-100",
4727
4817
  bgDark: "muted-900/75",
4728
4818
  border: "muted-200",
4729
4819
  borderDark: "muted-700",
@@ -5117,7 +5207,7 @@ const input = plugin__default.withOptions(
5117
5207
  );
5118
5208
 
5119
5209
  const defaultLabelConfig = {
5120
- font: "alt",
5210
+ font: "sans",
5121
5211
  text: "muted-400",
5122
5212
  textDark: "muted-400/80"
5123
5213
  };
@@ -5182,7 +5272,7 @@ const link = plugin__default.withOptions(
5182
5272
  }
5183
5273
  );
5184
5274
 
5185
- const defaultlistConfig = {
5275
+ const defaultListConfig = {
5186
5276
  ul: "disc",
5187
5277
  ol: "decimal",
5188
5278
  base: {
@@ -5230,7 +5320,7 @@ const list = plugin__default.withOptions(
5230
5320
  return {
5231
5321
  theme: {
5232
5322
  shurikenUi: {
5233
- list: defaultlistConfig
5323
+ list: defaultListConfig
5234
5324
  }
5235
5325
  }
5236
5326
  };
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}`]: {}
@@ -2755,6 +2836,7 @@ const defaultButtonConfig = {
2755
2836
  };
2756
2837
  const button = plugin.withOptions(
2757
2838
  function(options) {
2839
+ console.log("register button plugin");
2758
2840
  let { prefix } = defu(options, defaultPluginOptions);
2759
2841
  if (prefix) {
2760
2842
  prefix = `${prefix}-`;
@@ -2815,9 +2897,12 @@ const button = plugin.withOptions(
2815
2897
  }
2816
2898
  }
2817
2899
  },
2900
+ // #region Loading
2818
2901
  [`&.${prefix}button-loading`]: {
2819
2902
  [`@apply !text-transparent`]: {}
2820
2903
  },
2904
+ // #endregion
2905
+ // #region Sizes
2821
2906
  [`&.${prefix}button-small`]: {
2822
2907
  [`@apply h-8 px-3 py-1 text-${config.buttonSmall.text}`]: {},
2823
2908
  [`.${prefix}button-icon`]: {
@@ -2842,6 +2927,8 @@ const button = plugin.withOptions(
2842
2927
  [`@apply w-${config.buttonBig.iconSize} h-${config.buttonBig.iconSize}`]: {}
2843
2928
  }
2844
2929
  },
2930
+ // #endregion
2931
+ // #region Shapes
2845
2932
  [`&.${prefix}button-rounded`]: {
2846
2933
  [`@apply rounded-${config.buttonRounded}`]: {}
2847
2934
  },
@@ -2857,6 +2944,8 @@ const button = plugin.withOptions(
2857
2944
  [`@apply flex absolute h-${config.buttonFull.badgeSize} w-${config.buttonFull.badgeSize} top-0 -end-1 -mt-0.5 me-2`]: {}
2858
2945
  }
2859
2946
  },
2947
+ // #endregion
2948
+ // #region Flavors
2860
2949
  [`&.${prefix}button-solid`]: {
2861
2950
  [`&.${prefix}button-default`]: {
2862
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}`]: {},
@@ -2995,6 +3084,7 @@ const button = plugin.withOptions(
2995
3084
  }
2996
3085
  }
2997
3086
  }
3087
+ // #endregion
2998
3088
  }
2999
3089
  });
3000
3090
  };
@@ -3760,7 +3850,7 @@ const heading = plugin.withOptions(
3760
3850
  );
3761
3851
  addComponents({
3762
3852
  [`.${prefix}heading`]: {
3763
- [`@apply font-heading`]: {},
3853
+ [`@apply font-sans`]: {},
3764
3854
  [`&.${prefix}heading-xs`]: {
3765
3855
  [`@apply text-${config.textXS}`]: {}
3766
3856
  },
@@ -4712,7 +4802,7 @@ const defaultInputConfig = {
4712
4802
  textPlaceholderDark: "muted-600"
4713
4803
  },
4714
4804
  muted: {
4715
- bg: "muted-200",
4805
+ bg: "muted-100",
4716
4806
  bgDark: "muted-900/75",
4717
4807
  border: "muted-200",
4718
4808
  borderDark: "muted-700",
@@ -5106,7 +5196,7 @@ const input = plugin.withOptions(
5106
5196
  );
5107
5197
 
5108
5198
  const defaultLabelConfig = {
5109
- font: "alt",
5199
+ font: "sans",
5110
5200
  text: "muted-400",
5111
5201
  textDark: "muted-400/80"
5112
5202
  };
@@ -5171,7 +5261,7 @@ const link = plugin.withOptions(
5171
5261
  }
5172
5262
  );
5173
5263
 
5174
- const defaultlistConfig = {
5264
+ const defaultListConfig = {
5175
5265
  ul: "disc",
5176
5266
  ol: "decimal",
5177
5267
  base: {
@@ -5219,7 +5309,7 @@ const list = plugin.withOptions(
5219
5309
  return {
5220
5310
  theme: {
5221
5311
  shurikenUi: {
5222
- list: defaultlistConfig
5312
+ list: defaultListConfig
5223
5313
  }
5224
5314
  }
5225
5315
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shuriken-ui/tailwind",
3
- "version": "1.1.0",
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
  }