@shuriken-ui/tailwind 1.2.5 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/dist/preset.cjs +578 -33
  2. package/dist/preset.mjs +578 -33
  3. package/package.json +21 -21
package/dist/preset.cjs CHANGED
@@ -490,7 +490,7 @@ const autocomplete = plugin__default.withOptions(
490
490
  [`@apply relative`]: {}
491
491
  },
492
492
  [`.${prefix}autocomplete-icon`]: {
493
- [`@apply text-${config.icon.text} absolute start-0 top-0 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
493
+ [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
494
494
  },
495
495
  [`.${prefix}autocomplete-input`]: {
496
496
  [`@apply ${prefix}focus w-${config.input.size} font-${config.input.font} transition-all duration-${config.input.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {},
@@ -2107,7 +2107,7 @@ const buttonClose = plugin__default.withOptions(
2107
2107
  );
2108
2108
  addComponents({
2109
2109
  [`.${prefix}button-close`]: {
2110
- [`@apply flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]: {},
2110
+ [`@apply ${prefix}focus flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]: {},
2111
2111
  [`.${prefix}button-icon`]: {
2112
2112
  [`@apply h-${config.buttonIcon.size} w-${config.buttonIcon.size} fill-current`]: {}
2113
2113
  },
@@ -2352,7 +2352,7 @@ const buttonIcon = plugin__default.withOptions(
2352
2352
  );
2353
2353
  addComponents({
2354
2354
  [`.${prefix}button-icon`]: {
2355
- [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline outline-none transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
2355
+ [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
2356
2356
  [`&.${prefix}button-small`]: {
2357
2357
  [`@apply h-${config.buttonSmall.size} w-${config.buttonSmall.size} p-${config.buttonSmall.space}`]: {}
2358
2358
  },
@@ -3339,16 +3339,16 @@ const checkbox = plugin__default.withOptions(
3339
3339
  [`.${prefix}checkbox-error`]: {
3340
3340
  [`@apply text-${config.error.text} ms-1 inline-block font-${config.error.font} text-${config.error.textSixe}`]: {}
3341
3341
  },
3342
- [`&.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
3342
+ [`&.${prefix}checkbox-rounded .${prefix}checkbox-outer, &.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
3343
3343
  [`@apply rounded`]: {}
3344
3344
  },
3345
- [`&.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
3345
+ [`&.${prefix}checkbox-smooth .${prefix}checkbox-outer, &.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
3346
3346
  [`@apply rounded-${config.rounded.smooth}`]: {}
3347
3347
  },
3348
- [`&.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
3348
+ [`&.${prefix}checkbox-curved .${prefix}checkbox-outer, &.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
3349
3349
  [`@apply rounded-${config.rounded.curved}`]: {}
3350
3350
  },
3351
- [`&.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
3351
+ [`&.${prefix}checkbox-full .${prefix}checkbox-outer, &.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
3352
3352
  [`@apply rounded-${config.rounded.full}`]: {}
3353
3353
  },
3354
3354
  [`&.${prefix}checkbox-default`]: {
@@ -3460,7 +3460,7 @@ const dropdownItem = plugin__default.withOptions(
3460
3460
  );
3461
3461
  addComponents({
3462
3462
  [`.${prefix}dropdown-item`]: {
3463
- [`@apply flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
3463
+ [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
3464
3464
  [`.${prefix}item-content`]: {
3465
3465
  [`@apply grow`]: {}
3466
3466
  },
@@ -3725,10 +3725,11 @@ const dropdown = plugin__default.withOptions(
3725
3725
 
3726
3726
  const defaultFocusConfig = {
3727
3727
  offset: "2",
3728
- width: "1",
3728
+ width: "2",
3729
3729
  style: "dashed",
3730
3730
  color: "muted-300",
3731
- colorDark: "muted-600"
3731
+ colorDark: "muted-600",
3732
+ mode: "always"
3732
3733
  };
3733
3734
  const focus = plugin__default.withOptions(
3734
3735
  function(options) {
@@ -3740,16 +3741,14 @@ const focus = plugin__default.withOptions(
3740
3741
  const config = theme(
3741
3742
  "shurikenUi.focus"
3742
3743
  );
3744
+ const mode = config.mode === "focus-visible" ? "&:has(:focus-visible), &:focus-visible" : "&:focus-within";
3743
3745
  addComponents({
3744
3746
  [`.${prefix}focus`]: {
3745
3747
  [`@apply outline-${config.width} outline-${config.style} outline-offset-${config.offset}`]: {},
3746
3748
  "@apply outline-transparent": {},
3747
- "&:focus-within": {
3749
+ [mode]: {
3748
3750
  [`@apply outline-${config.color} dark:outline-${config.colorDark}`]: {},
3749
3751
  [`@apply outline-${config.style} ring-0`]: {}
3750
- },
3751
- "&:focus-visible": {
3752
- [`@apply outline-${config.width}`]: {}
3753
3752
  }
3754
3753
  }
3755
3754
  });
@@ -4346,7 +4345,7 @@ const inputFileRegular = plugin__default.withOptions(
4346
4345
  [`@apply relative`]: {}
4347
4346
  },
4348
4347
  [`.${prefix}input-file-inner`]: {
4349
- [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]: {}
4348
+ [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {}
4350
4349
  },
4351
4350
  [`.${prefix}input-file-addon`]: {
4352
4351
  [`@apply pointer-events-none flex shrink-0 items-center justify-center gap-1 transition-colors duration-100`]: {}
@@ -4621,7 +4620,7 @@ const inputFile = plugin__default.withOptions(
4621
4620
  );
4622
4621
  addComponents({
4623
4622
  [`.${prefix}input-file`]: {
4624
- [`@apply relative block`]: {},
4623
+ [`@apply relative block ${prefix}focus`]: {},
4625
4624
  [`&.${prefix}input-file-drop`]: {
4626
4625
  [`@apply relative h-${config.drop.size} border-dashed border-2 border-${config.drop.border} dark:border-${config.drop.borderDark} hover:border-${config.drop.borderHover} dark:hover:border-${config.drop.borderHoverDark} bg-${config.drop.bg} dark:bg-${config.drop.bgDark} flex justify-center items-center transition-colors duration-${config.drop.duration}`]: {},
4627
4626
  [`.${prefix}drop-area-inner`]: {
@@ -4663,7 +4662,7 @@ const inputFile = plugin__default.withOptions(
4663
4662
  [`@apply font-${config.combo.label.font} sr-only text-${config.combo.label.text}`]: {}
4664
4663
  },
4665
4664
  [`.${prefix}combo-input`]: {
4666
- [`@apply block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]: {}
4665
+ [`@apply outline-none block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]: {}
4667
4666
  }
4668
4667
  },
4669
4668
  [`&.${prefix}input-file-rounded`]: {
@@ -4945,7 +4944,7 @@ const input = plugin__default.withOptions(
4945
4944
  [`@apply relative`]: {}
4946
4945
  },
4947
4946
  [`.${prefix}input-icon`]: {
4948
- [`@apply text-${config.icon.text} absolute start-0 top-0 z-20 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
4947
+ [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
4949
4948
  },
4950
4949
  [`.${prefix}input-error-text`]: {
4951
4950
  [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
@@ -5222,6 +5221,557 @@ const input = plugin__default.withOptions(
5222
5221
  }
5223
5222
  );
5224
5223
 
5224
+ const defaultInputNumberConfig = {
5225
+ label: {
5226
+ float: {
5227
+ text: "primary-500",
5228
+ duration: "300",
5229
+ size: "5"
5230
+ }
5231
+ },
5232
+ icon: {
5233
+ text: "muted-400",
5234
+ duration: "300"
5235
+ },
5236
+ errorText: {
5237
+ text: "danger-600",
5238
+ textSize: "[0.65rem]",
5239
+ font: "sans",
5240
+ fontWeight: "medium"
5241
+ },
5242
+ input: {
5243
+ focusSize: "full",
5244
+ font: "sans",
5245
+ duration: "300",
5246
+ focusVisible: {
5247
+ labelFloat: {
5248
+ text: "primary-500",
5249
+ textDark: "primary-500"
5250
+ },
5251
+ icon: {
5252
+ text: "primary-500"
5253
+ }
5254
+ },
5255
+ action: {
5256
+ text: "muted-400",
5257
+ duration: "300"
5258
+ },
5259
+ rounded: {
5260
+ default: "md",
5261
+ smooth: "lg",
5262
+ curved: "xl",
5263
+ full: "full"
5264
+ },
5265
+ sm: {
5266
+ label: {
5267
+ text: "xs"
5268
+ },
5269
+ iconOrAction: {
5270
+ size: "8"
5271
+ },
5272
+ iconOrAcionInner: {
5273
+ size: "4"
5274
+ },
5275
+ placeload: {
5276
+ size: "8"
5277
+ }
5278
+ },
5279
+ md: {
5280
+ label: {
5281
+ text: "[0.825rem]"
5282
+ },
5283
+ iconOrAction: {
5284
+ size: "10"
5285
+ },
5286
+ iconOrAcionInner: {
5287
+ size: "[1.15rem]"
5288
+ },
5289
+ placeload: {
5290
+ size: "10"
5291
+ }
5292
+ },
5293
+ lg: {
5294
+ label: {
5295
+ text: "sm"
5296
+ },
5297
+ iconOrAction: {
5298
+ size: "12"
5299
+ },
5300
+ iconOrAcionInner: {
5301
+ size: "5"
5302
+ },
5303
+ placeload: {
5304
+ size: "12"
5305
+ }
5306
+ },
5307
+ default: {
5308
+ bg: "white",
5309
+ bgDark: "muted-900",
5310
+ border: "muted-300",
5311
+ borderDark: "muted-700",
5312
+ text: "muted-600",
5313
+ textDark: "muted-200",
5314
+ textPlaceholder: "muted-300",
5315
+ textPlaceholderDark: "muted-500"
5316
+ },
5317
+ defaultContrast: {
5318
+ bg: "white",
5319
+ bgDark: "muted-950",
5320
+ border: "muted-300",
5321
+ borderDark: "muted-800",
5322
+ text: "muted-600",
5323
+ textDark: "muted-200",
5324
+ textPlaceholder: "muted-300",
5325
+ textPlaceholderDark: "muted-600"
5326
+ },
5327
+ muted: {
5328
+ bg: "muted-100",
5329
+ bgDark: "muted-900",
5330
+ border: "muted-200",
5331
+ borderDark: "muted-700",
5332
+ text: "muted-600",
5333
+ textDark: "muted-200",
5334
+ textPlaceholder: "muted-300",
5335
+ textPlaceholderDark: "muted-500"
5336
+ },
5337
+ mutedContrast: {
5338
+ bg: "muted-100",
5339
+ bgDark: "muted-950",
5340
+ border: "muted-100",
5341
+ borderDark: "muted-800",
5342
+ text: "muted-600",
5343
+ textDark: "muted-200",
5344
+ textPlaceholder: "muted-300",
5345
+ textPlaceholderDark: "muted-600"
5346
+ },
5347
+ notLoading: {
5348
+ text: "muted-300",
5349
+ textDark: "muted-600"
5350
+ },
5351
+ error: {
5352
+ border: "danger-500",
5353
+ borderDark: "danger-500",
5354
+ icon: {
5355
+ text: "danger-500"
5356
+ }
5357
+ },
5358
+ hasNotIcon: {
5359
+ text: {
5360
+ sm: "xs",
5361
+ md: "sm",
5362
+ lg: "sm"
5363
+ },
5364
+ labelFloat: {
5365
+ sm: "xs",
5366
+ md: {
5367
+ text: "xs",
5368
+ focusVisible: {
5369
+ text: "xs"
5370
+ },
5371
+ placeholderShown: {
5372
+ text: "[0.825rem]"
5373
+ }
5374
+ },
5375
+ lg: {
5376
+ text: "xs",
5377
+ focusVisible: {
5378
+ text: "xs"
5379
+ },
5380
+ placeholderShown: {
5381
+ text: "[0.825rem]"
5382
+ }
5383
+ }
5384
+ }
5385
+ },
5386
+ hasIcon: {
5387
+ text: {
5388
+ sm: "xs",
5389
+ md: "sm",
5390
+ lg: "base"
5391
+ },
5392
+ labelFloat: {
5393
+ sm: "xs",
5394
+ md: {
5395
+ text: "xs",
5396
+ focusVisible: {
5397
+ text: "xs"
5398
+ },
5399
+ placeholderShown: {
5400
+ text: "[0.825rem]"
5401
+ }
5402
+ },
5403
+ lg: {
5404
+ text: "xs",
5405
+ focusVisible: {
5406
+ text: "xs"
5407
+ },
5408
+ placeholderShown: {
5409
+ text: "[0.825rem]"
5410
+ }
5411
+ }
5412
+ }
5413
+ },
5414
+ hasAction: {
5415
+ spaceSM: "8",
5416
+ spaceMD: "10",
5417
+ spaceLG: "12"
5418
+ }
5419
+ }
5420
+ };
5421
+ const inputNumber = plugin__default.withOptions(
5422
+ function(options) {
5423
+ let { prefix } = defu.defu(options, defaultPluginOptions);
5424
+ if (prefix) {
5425
+ prefix = `${prefix}-`;
5426
+ }
5427
+ return function({ addComponents, theme }) {
5428
+ const config = theme(
5429
+ "shurikenUi.inputNumber"
5430
+ );
5431
+ addComponents({
5432
+ [`.${prefix}input-number-wrapper`]: {
5433
+ [`@apply relative`]: {},
5434
+ [`.${prefix}input-number-label, .${prefix}label-float`]: {
5435
+ [`@apply ${prefix}label`]: {}
5436
+ },
5437
+ [`.${prefix}label-float`]: {
5438
+ [`@apply text-${config.label.float.text} pointer-events-none absolute inline-flex h-${config.label.float.size} select-none items-center leading-none transition-all duration-${config.label.float.duration}`]: {}
5439
+ },
5440
+ [`.${prefix}input-number-outer`]: {
5441
+ [`@apply ${prefix}focus relative`]: {}
5442
+ },
5443
+ [`.${prefix}input-number-icon`]: {
5444
+ [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
5445
+ },
5446
+ [`.${prefix}input-number-buttons`]: {
5447
+ [`@apply absolute top-1 end-1 flex`]: {}
5448
+ },
5449
+ [`.${prefix}input-number-buttons button`]: {
5450
+ [`@apply outline-none flex items-center justify-center`]: {},
5451
+ [`@apply border border-muted-200 dark:border-muted-800 last:border-s-0`]: {},
5452
+ [`@apply text-muted-400 hover:text-muted-600 dark:hover:text-muted-100`]: {},
5453
+ [`@apply focus:text-muted-600 dark:focus:text-muted-100`]: {},
5454
+ [`@apply transition-colors duration-300`]: {}
5455
+ },
5456
+ [`.${prefix}input-number-buttons svg`]: {
5457
+ [`@apply h-4 w-4`]: {}
5458
+ },
5459
+ [`.${prefix}input-number-error-text`]: {
5460
+ [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
5461
+ },
5462
+ [`.${prefix}input-number`]: {
5463
+ [`@apply outline-none w-${config.input.focusSize} font-${config.input.font} transition-all duration-${config.input.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {},
5464
+ [`&:focus-visible ~ .${prefix}label-float`]: {
5465
+ [`@apply !text-${config.input.focusVisible.labelFloat.text} dark:!text-${config.input.focusVisible.labelFloat.textDark}`]: {}
5466
+ },
5467
+ [`&:focus-visible ~ .${prefix}input-number-icon`]: {
5468
+ [`@apply !text-${config.input.focusVisible.icon.text}`]: {}
5469
+ },
5470
+ [`&:disabled ~ .${prefix}input-number-icon`]: {
5471
+ [`@apply cursor-not-allowed opacity-75`]: {}
5472
+ }
5473
+ },
5474
+ [`.${prefix}input-number-placeload`]: {
5475
+ [`@apply absolute start-0 top-0 flex w-full items-center px-4`]: {},
5476
+ [`.${prefix}placeload`]: {
5477
+ [`@apply h-3 w-full max-w-[50%] rounded`]: {}
5478
+ }
5479
+ },
5480
+ [`.${prefix}input-number-action`]: {
5481
+ [`@apply text-${config.input.action.text} absolute end-0 top-0 flex items-center justify-center transition-colors duration-${config.input.action.duration}`]: {}
5482
+ },
5483
+ [`&.${prefix}input-number-focus`]: {
5484
+ [`.${prefix}input-number`]: {
5485
+ [`@apply focus:border-primary-500 dark:focus:border-primary-500`]: {}
5486
+ }
5487
+ },
5488
+ [`&.${prefix}input-number-rounded`]: {
5489
+ [`.${prefix}input-number, .${prefix}input-number-outer`]: {
5490
+ [`@apply rounded-${config.input.rounded.default}`]: {}
5491
+ },
5492
+ [`.${prefix}input-number-buttons button`]: {
5493
+ [`@apply first:rounded-s-${config.input.rounded.default}`]: {},
5494
+ [`@apply last:rounded-e-${config.input.rounded.default}`]: {}
5495
+ }
5496
+ },
5497
+ [`&.${prefix}input-number-smooth`]: {
5498
+ [`.${prefix}input-number, .${prefix}input-number-outer`]: {
5499
+ [`@apply rounded-${config.input.rounded.smooth}`]: {}
5500
+ },
5501
+ [`.${prefix}input-number-buttons button`]: {
5502
+ [`@apply first:rounded-s-${config.input.rounded.smooth}`]: {},
5503
+ [`@apply last:rounded-e-${config.input.rounded.smooth}`]: {}
5504
+ }
5505
+ },
5506
+ [`&.${prefix}input-number-curved`]: {
5507
+ [`.${prefix}input-number, .${prefix}input-number-outer`]: {
5508
+ [`@apply rounded-${config.input.rounded.curved}`]: {}
5509
+ },
5510
+ [`.${prefix}input-number-buttons button`]: {
5511
+ [`@apply first:rounded-s-${config.input.rounded.curved}`]: {},
5512
+ [`@apply last:rounded-e-${config.input.rounded.curved}`]: {}
5513
+ }
5514
+ },
5515
+ [`&.${prefix}input-number-full`]: {
5516
+ [`.${prefix}input-number, .${prefix}input-number-outer`]: {
5517
+ [`@apply rounded-${config.input.rounded.full}`]: {}
5518
+ },
5519
+ [`.${prefix}input-number-buttons button`]: {
5520
+ [`@apply first:rounded-s-${config.input.rounded.full}`]: {},
5521
+ [`@apply last:rounded-e-${config.input.rounded.full}`]: {}
5522
+ }
5523
+ },
5524
+ [`&.${prefix}input-number-sm`]: {
5525
+ [`.${prefix}input-number-label`]: {
5526
+ [`@apply pb-1 text-${config.input.sm.label.text}`]: {}
5527
+ },
5528
+ [`.${prefix}label-float`]: {
5529
+ [`@apply top-1.5`]: {}
5530
+ },
5531
+ [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
5532
+ [`@apply h-${config.input.sm.iconOrAction.size} w-${config.input.sm.iconOrAction.size}`]: {},
5533
+ [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
5534
+ [`@apply h-${config.input.sm.iconOrAcionInner.size} w-${config.input.sm.iconOrAcionInner.size}`]: {}
5535
+ }
5536
+ },
5537
+ [`.${prefix}input-number-placeload`]: {
5538
+ [`@apply h-${config.input.sm.placeload.size}`]: {}
5539
+ },
5540
+ [`.${prefix}input-number-buttons button`]: {
5541
+ [`@apply h-6 w-6`]: {}
5542
+ }
5543
+ },
5544
+ [`&.${prefix}input-number-md`]: {
5545
+ [`.${prefix}input-number-label`]: {
5546
+ [`@apply pb-1 text-${config.input.md.label.text}`]: {}
5547
+ },
5548
+ [`.${prefix}label-float`]: {
5549
+ [`@apply top-2.5`]: {}
5550
+ },
5551
+ [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
5552
+ [`@apply h-${config.input.md.iconOrAction.size} w-${config.input.md.iconOrAction.size}`]: {},
5553
+ [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
5554
+ [`@apply h-${config.input.md.iconOrAcionInner.size} w-${config.input.md.iconOrAcionInner.size}`]: {}
5555
+ }
5556
+ },
5557
+ [`.${prefix}input-number-placeload`]: {
5558
+ [`@apply h-${config.input.md.placeload.size}`]: {}
5559
+ },
5560
+ [`.${prefix}input-number-buttons button`]: {
5561
+ [`@apply h-8 w-8`]: {}
5562
+ }
5563
+ },
5564
+ [`&.${prefix}input-number-lg`]: {
5565
+ [`.${prefix}input-number-label`]: {
5566
+ [`@apply pb-1 text-${config.input.lg.label.text}`]: {}
5567
+ },
5568
+ [`.${prefix}label-float`]: {
5569
+ [`@apply top-3.5`]: {}
5570
+ },
5571
+ [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
5572
+ [`@apply h-${config.input.lg.iconOrAction.size} w-${config.input.lg.iconOrAction.size}`]: {},
5573
+ [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
5574
+ [`@apply h-${config.input.lg.iconOrAcionInner.size} w-${config.input.lg.iconOrAcionInner.size}`]: {}
5575
+ }
5576
+ },
5577
+ [`.${prefix}input-number-placeload`]: {
5578
+ [`@apply h-${config.input.lg.placeload.size}`]: {}
5579
+ },
5580
+ [`.${prefix}input-number-buttons button`]: {
5581
+ [`@apply h-10 w-10`]: {}
5582
+ }
5583
+ },
5584
+ [`&.${prefix}input-number-default`]: {
5585
+ [`.${prefix}input-number`]: {
5586
+ [`@apply border bg-${config.input.default.bg} border-${config.input.default.border} text-${config.input.default.text} placeholder:text-${config.input.default.textPlaceholder} dark:border-${config.input.default.borderDark} dark:bg-${config.input.default.bgDark} dark:text-${config.input.default.textDark} dark:placeholder:text-${config.input.default.textPlaceholderDark}`]: {}
5587
+ },
5588
+ [`.${prefix}input-number-buttons button`]: {
5589
+ [`@apply hover:bg-muted-100 dark:hover:bg-muted-800`]: {},
5590
+ [`@apply focus:bg-muted-100 dark:focus:bg-muted-800`]: {}
5591
+ }
5592
+ },
5593
+ [`&.${prefix}input-number-default-contrast`]: {
5594
+ [`.${prefix}input-number`]: {
5595
+ [`@apply border bg-${config.input.defaultContrast.bg} border-${config.input.defaultContrast.border} text-${config.input.defaultContrast.text} placeholder:text-${config.input.defaultContrast.textPlaceholder} dark:border-${config.input.defaultContrast.borderDark} dark:bg-${config.input.defaultContrast.bgDark} dark:text-${config.input.defaultContrast.textDark} dark:placeholder:text-${config.input.defaultContrast.textPlaceholderDark}`]: {}
5596
+ },
5597
+ [`.${prefix}input-number-buttons button`]: {
5598
+ [`@apply hover:bg-muted-100 dark:hover:bg-muted-900`]: {},
5599
+ [`@apply focus:bg-muted-100 dark:focus:bg-muted-900`]: {}
5600
+ }
5601
+ },
5602
+ [`&.${prefix}input-number-muted`]: {
5603
+ [`.${prefix}input-number`]: {
5604
+ [`@apply border bg-${config.input.muted.bg} border-${config.input.muted.border} text-${config.input.muted.text} placeholder:text-${config.input.muted.textPlaceholder} dark:border-${config.input.muted.borderDark} dark:bg-${config.input.muted.bgDark} dark:text-${config.input.muted.textDark} dark:placeholder:text-${config.input.muted.textPlaceholderDark}`]: {}
5605
+ },
5606
+ [`.${prefix}input-number-buttons button`]: {
5607
+ [`@apply hover:bg-white dark:hover:bg-muted-800`]: {},
5608
+ [`@apply focus:bg-white dark:focus:bg-muted-800`]: {}
5609
+ }
5610
+ },
5611
+ [`&.${prefix}input-number-muted-contrast`]: {
5612
+ [`.${prefix}input-number`]: {
5613
+ [`@apply border bg-${config.input.mutedContrast.bg} border-${config.input.mutedContrast.border} text-${config.input.mutedContrast.text} placeholder:text-${config.input.mutedContrast.textPlaceholder} dark:border-${config.input.mutedContrast.borderDark} dark:bg-${config.input.mutedContrast.bgDark} dark:text-${config.input.mutedContrast.textDark} dark:placeholder:text-${config.input.mutedContrast.textPlaceholderDark}`]: {}
5614
+ },
5615
+ [`.${prefix}input-number-buttons button`]: {
5616
+ [`@apply hover:bg-white dark:hover:bg-muted-900`]: {},
5617
+ [`@apply focus:bg-white dark:focus:bg-muted-900`]: {}
5618
+ }
5619
+ },
5620
+ [`&:not(.${prefix}input-number-loading)`]: {
5621
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5622
+ [`@apply text-${config.input.notLoading.text} dark:text-${config.input.notLoading.textDark}`]: {}
5623
+ }
5624
+ },
5625
+ [`&.${prefix}input-number-loading`]: {
5626
+ [`.${prefix}input-number`]: {
5627
+ [`@apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent`]: {}
5628
+ },
5629
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5630
+ [`@apply text-transparent`]: {}
5631
+ },
5632
+ [`.${prefix}input-number-icon`]: {
5633
+ [`@apply opacity-0`]: {}
5634
+ }
5635
+ },
5636
+ [`&.${prefix}input-number-label-float`]: {
5637
+ [`.${prefix}input-number`]: {
5638
+ [`@apply placeholder:text-transparent dark:placeholder:text-transparent`]: {}
5639
+ }
5640
+ },
5641
+ [`&.${prefix}input-number-error`]: {
5642
+ [`.${prefix}input-number`]: {
5643
+ [`@apply !border-${config.input.error.border} dark:!border-${config.input.error.borderDark}`]: {}
5644
+ },
5645
+ [`.${prefix}input-number-icon`]: {
5646
+ [`@apply !text-${config.input.error.icon.text}`]: {}
5647
+ }
5648
+ },
5649
+ [`&:not(.${prefix}has-icon).${prefix}input-number-sm`]: {
5650
+ [`.${prefix}input-number`]: {
5651
+ [`@apply h-8 py-1 text-${config.input.hasNotIcon.text.sm} leading-4 ps-2 pe-14`]: {}
5652
+ }
5653
+ },
5654
+ [`&.${prefix}has-icon.${prefix}input-number-sm`]: {
5655
+ [`.${prefix}input-number`]: {
5656
+ [`@apply h-8 py-1 text-${config.input.hasIcon.text.sm} leading-4 pe-14 ps-8`]: {}
5657
+ }
5658
+ },
5659
+ [`&:not(.${prefix}has-icon).${prefix}input-number-md`]: {
5660
+ [`.${prefix}input-number`]: {
5661
+ [`@apply h-10 py-2 text-${config.input.hasNotIcon.text.md} leading-5 ps-3 pe-20`]: {}
5662
+ }
5663
+ },
5664
+ [`&.${prefix}has-icon.${prefix}input-number-md`]: {
5665
+ [`.${prefix}input-number`]: {
5666
+ [`@apply h-10 py-2 text-${config.input.hasIcon.text.md} leading-5 pe-20 ps-10`]: {}
5667
+ }
5668
+ },
5669
+ [`&:not(.${prefix}has-icon).${prefix}input-number-lg`]: {
5670
+ [`.${prefix}input-number`]: {
5671
+ [`@apply h-12 py-2 text-${config.input.hasNotIcon.text.lg} leading-5 ps-4 pe-24`]: {}
5672
+ }
5673
+ },
5674
+ [`&.${prefix}has-icon.${prefix}input-number-lg`]: {
5675
+ [`.${prefix}input-number`]: {
5676
+ [`@apply h-12 py-2 text-${config.input.hasIcon.text.lg} leading-5 pe-24 ps-11`]: {}
5677
+ }
5678
+ },
5679
+ [`&.${prefix}has-action.${prefix}input-number-sm`]: {
5680
+ [`.${prefix}input-number`]: {
5681
+ [`@apply pe-${config.input.hasAction.spaceSM}`]: {}
5682
+ }
5683
+ },
5684
+ [`&.${prefix}has-action.${prefix}input-number-md`]: {
5685
+ [`.${prefix}input-number`]: {
5686
+ [`@apply pe-${config.input.hasAction.spaceMD}`]: {}
5687
+ }
5688
+ },
5689
+ [`&.${prefix}has-action.${prefix}input-number-lg`]: {
5690
+ [`.${prefix}input-number`]: {
5691
+ [`@apply pe-${config.input.hasAction.spaceLG}`]: {}
5692
+ }
5693
+ },
5694
+ [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-sm`]: {
5695
+ [`.${prefix}label-float`]: {
5696
+ [`@apply start-3 -ms-3 -mt-7 text-${config.input.hasNotIcon.labelFloat.sm}`]: {}
5697
+ },
5698
+ [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
5699
+ [`@apply !-ms-3 !-mt-7`]: {}
5700
+ },
5701
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5702
+ [`@apply ms-0 mt-0`]: {}
5703
+ }
5704
+ },
5705
+ [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-sm`]: {
5706
+ [`.${prefix}label-float`]: {
5707
+ [`@apply start-8 -ms-8 -mt-7 text-${config.input.hasIcon.labelFloat.sm}`]: {}
5708
+ },
5709
+ [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
5710
+ [`@apply !-ms-8 !-mt-7`]: {}
5711
+ },
5712
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5713
+ [`@apply ms-0 mt-0`]: {}
5714
+ }
5715
+ },
5716
+ [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-md`]: {
5717
+ [`.${prefix}label-float`]: {
5718
+ [`@apply start-3 -ms-3 -mt-8 text-${config.input.hasNotIcon.labelFloat.md.text}`]: {}
5719
+ },
5720
+ [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
5721
+ [`@apply !-ms-3 !-mt-8 !text-${config.input.hasNotIcon.labelFloat.md.focusVisible.text}`]: {}
5722
+ },
5723
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5724
+ [`@apply ms-0 mt-0 text-${config.input.hasNotIcon.labelFloat.md.placeholderShown.text}`]: {}
5725
+ }
5726
+ },
5727
+ [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-md`]: {
5728
+ [`.${prefix}label-float`]: {
5729
+ [`@apply start-10 -ms-10 -mt-8 text-${config.input.hasIcon.labelFloat.md.text}`]: {}
5730
+ },
5731
+ [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
5732
+ [`@apply !-ms-10 !-mt-8 !text-${config.input.hasIcon.labelFloat.md.focusVisible.text}`]: {}
5733
+ },
5734
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5735
+ [`@apply ms-0 mt-0 text-${config.input.hasIcon.labelFloat.md.placeholderShown.text}`]: {}
5736
+ }
5737
+ },
5738
+ [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-lg`]: {
5739
+ [`.${prefix}label-float`]: {
5740
+ [`@apply start-3 -ms-3 -mt-8 text-${config.input.hasNotIcon.labelFloat.lg.text}`]: {}
5741
+ },
5742
+ [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
5743
+ [`@apply !-ms-3 !-mt-9 !text-${config.input.hasNotIcon.labelFloat.lg.focusVisible.text}`]: {}
5744
+ },
5745
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5746
+ [`@apply ms-0 mt-0 text-${config.input.hasNotIcon.labelFloat.lg.placeholderShown.text}`]: {}
5747
+ }
5748
+ },
5749
+ [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-lg`]: {
5750
+ [`.${prefix}label-float`]: {
5751
+ [`@apply start-11 -ms-10 -mt-8 text-${config.input.hasIcon.labelFloat.lg.text}`]: {}
5752
+ },
5753
+ [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
5754
+ [`@apply !-ms-10 !-mt-9 !text-${config.input.hasIcon.labelFloat.lg.focusVisible.text}`]: {}
5755
+ },
5756
+ [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
5757
+ [`@apply ms-0 mt-0 text-${config.input.hasIcon.labelFloat.lg.placeholderShown.text}`]: {}
5758
+ }
5759
+ }
5760
+ }
5761
+ });
5762
+ };
5763
+ },
5764
+ function() {
5765
+ return {
5766
+ theme: {
5767
+ shurikenUi: {
5768
+ inputNumber: defaultInputNumberConfig
5769
+ }
5770
+ }
5771
+ };
5772
+ }
5773
+ );
5774
+
5225
5775
  const defaultLabelConfig = {
5226
5776
  font: "sans",
5227
5777
  text: "muted-400",
@@ -5686,7 +6236,7 @@ const listbox = plugin__default.withOptions(
5686
6236
  }
5687
6237
  },
5688
6238
  [`.${prefix}listbox-icon`]: {
5689
- [`@apply text-${config.icon.text} absolute start-0 top-0 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
6239
+ [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
5690
6240
  },
5691
6241
  [`.${prefix}listbox-chevron`]: {
5692
6242
  [`@apply pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center border-s`]: {},
@@ -6440,7 +6990,7 @@ const message = plugin__default.withOptions(
6440
6990
  [`@apply text-${config.messageInnerText.textColor} px-3 block font-${config.messageInnerText.font} text-${config.messageInnerText.text}`]: {}
6441
6991
  },
6442
6992
  [`.${prefix}message-close`]: {
6443
- [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {},
6993
+ [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {},
6444
6994
  [`.${prefix}close-icon`]: {
6445
6995
  [`@apply h-${config.messageClose.iconSize} w-${config.messageClose.iconSize}`]: {}
6446
6996
  }
@@ -7602,7 +8152,7 @@ const select = plugin__default.withOptions(
7602
8152
  [`@apply relative`]: {}
7603
8153
  },
7604
8154
  [`.${prefix}select-icon`]: {
7605
- [`@apply text-${config.icon.text} absolute start-0 top-0 z-20 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
8155
+ [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
7606
8156
  },
7607
8157
  [`.${prefix}select-error-text`]: {
7608
8158
  [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
@@ -7630,7 +8180,7 @@ const select = plugin__default.withOptions(
7630
8180
  },
7631
8181
  [`.${prefix}select-chevron`]: {
7632
8182
  "@apply pointer-events-none": {},
7633
- [`@apply text-${config.select.chevron.text} absolute end-0 top-0 z-20 flex items-center justify-center transition-transform duration-${config.select.chevron.duration}`]: {}
8183
+ [`@apply text-${config.select.chevron.text} absolute end-0 top-0 z-10 flex items-center justify-center transition-transform duration-${config.select.chevron.duration}`]: {}
7634
8184
  },
7635
8185
  [`&.${prefix}select-multiple`]: {
7636
8186
  [`.${prefix}select`]: {
@@ -7989,7 +8539,7 @@ const snack = plugin__default.withOptions(
7989
8539
  );
7990
8540
  addComponents({
7991
8541
  [`.${prefix}snack`]: {
7992
- [`@apply ${prefix}focus inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent overflow-hidden`]: {},
8542
+ [`@apply inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent`]: {},
7993
8543
  [`.${prefix}snack-icon`]: {
7994
8544
  [`@apply border-${config.icon.border} -ms-0.5 flex items-center justify-center rounded-${config.icon.rounded} border bg-${config.icon.bg}`]: {}
7995
8545
  },
@@ -8115,13 +8665,13 @@ const switchBall = plugin__default.withOptions(
8115
8665
  [`.${prefix}switch-ball`]: {
8116
8666
  [`@apply flex cursor-pointer items-center`]: {},
8117
8667
  [`.${prefix}switch-ball-outer`]: {
8118
- [`@apply relative block`]: {}
8668
+ [`@apply ${prefix}focus relative block rounded-${config.handle.rounded}`]: {}
8119
8669
  },
8120
8670
  [`.${prefix}switch-ball-handle`]: {
8121
8671
  [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute start-0.5 top-1/2 z-10 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition focus:w-6`]: {}
8122
8672
  },
8123
8673
  [`.${prefix}switch-ball-track`]: {
8124
- [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]: {}
8674
+ [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]: {}
8125
8675
  },
8126
8676
  [`.${prefix}switch-ball-icon`]: {
8127
8677
  [`@apply pointer-events-none absolute start-2 top-1/2 z-10 h-${config.icon.size} w-${config.icon.size} translate-y-0 fill-current text-${config.icon.text} opacity-0 transition duration-${config.icon.duration}`]: {}
@@ -8143,9 +8693,6 @@ const switchBall = plugin__default.withOptions(
8143
8693
  [`&:checked ~ .${prefix}switch-ball-handle`]: {
8144
8694
  [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]: {}
8145
8695
  },
8146
- [`&:checked ~ .${prefix}switch-ball-track`]: {
8147
- [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]: {}
8148
- },
8149
8696
  [`&:checked ~ .${prefix}switch-ball-icon`]: {
8150
8697
  [`@apply -translate-y-1/2 opacity-100`]: {}
8151
8698
  }
@@ -8237,13 +8784,13 @@ const switchThin = plugin__default.withOptions(
8237
8784
  [`.${prefix}switch-thin`]: {
8238
8785
  [`@apply flex cursor-pointer items-center`]: {},
8239
8786
  [`.${prefix}switch-thin-outer`]: {
8240
- [`@apply relative block h-4`]: {}
8787
+ [`@apply ${prefix}focus relative block h-4 rounded-${config.handle.rounded}`]: {}
8241
8788
  },
8242
8789
  [`.${prefix}switch-thin-handle`]: {
8243
8790
  [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute -start-1 top-1/2 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition`]: {}
8244
8791
  },
8245
8792
  [`.${prefix}switch-thin-track`]: {
8246
- [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]: {}
8793
+ [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]: {}
8247
8794
  },
8248
8795
  [`.${prefix}switch-thin-single-label`]: {
8249
8796
  [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
@@ -8261,9 +8808,6 @@ const switchThin = plugin__default.withOptions(
8261
8808
  [`@apply absolute z-20 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]: {},
8262
8809
  [`&:checked ~ .${prefix}switch-thin-handle`]: {
8263
8810
  [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]: {}
8264
- },
8265
- [`&:checked ~ .${prefix}switch-thin-track`]: {
8266
- [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]: {}
8267
8811
  }
8268
8812
  },
8269
8813
  [`&.${prefix}switch-thin-primary .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]: {
@@ -9958,6 +10502,7 @@ const components = [
9958
10502
  inputFileRegular,
9959
10503
  inputFile,
9960
10504
  input,
10505
+ inputNumber,
9961
10506
  label,
9962
10507
  link,
9963
10508
  list,