@rovula/ui 0.1.2 → 0.1.3

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 (52) hide show
  1. package/dist/cjs/bundle.css +294 -73
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/ActionButton/ActionButton.d.ts +4 -2
  5. package/dist/cjs/types/components/ActionButton/ActionButton.stories.d.ts +30 -8
  6. package/dist/cjs/types/components/ActionButton/ActionButton.styles.d.ts +2 -1
  7. package/dist/cjs/types/components/Avatar/Avatar.styles.d.ts +1 -1
  8. package/dist/cjs/types/components/Button/Button.d.ts +4 -2
  9. package/dist/cjs/types/components/Button/Button.styles.d.ts +2 -1
  10. package/dist/cjs/types/components/Button/Buttons.stories.d.ts +71 -6
  11. package/dist/cjs/types/components/Checkbox/Checkbox.stories.d.ts +13 -9
  12. package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts +10 -7
  13. package/dist/components/ActionButton/ActionButton.js +2 -1
  14. package/dist/components/ActionButton/ActionButton.stories.js +40 -7
  15. package/dist/components/ActionButton/ActionButton.styles.js +77 -17
  16. package/dist/components/Button/Button.js +9 -2
  17. package/dist/components/Button/Button.styles.js +51 -14
  18. package/dist/components/Button/Buttons.stories.js +55 -0
  19. package/dist/components/Checkbox/Checkbox.js +6 -7
  20. package/dist/components/Checkbox/Checkbox.stories.js +23 -1
  21. package/dist/components/InputFilter/InputFilter.js +1 -1
  22. package/dist/components/InputFilter/InputFilter.styles.js +1 -1
  23. package/dist/components/RadioGroup/RadioGroup.js +1 -1
  24. package/dist/components/RadioGroup/RadioGroup.stories.js +16 -1
  25. package/dist/esm/bundle.css +294 -73
  26. package/dist/esm/bundle.js +115 -115
  27. package/dist/esm/bundle.js.map +1 -1
  28. package/dist/esm/types/components/ActionButton/ActionButton.d.ts +4 -2
  29. package/dist/esm/types/components/ActionButton/ActionButton.stories.d.ts +30 -8
  30. package/dist/esm/types/components/ActionButton/ActionButton.styles.d.ts +2 -1
  31. package/dist/esm/types/components/Avatar/Avatar.styles.d.ts +1 -1
  32. package/dist/esm/types/components/Button/Button.d.ts +4 -2
  33. package/dist/esm/types/components/Button/Button.styles.d.ts +2 -1
  34. package/dist/esm/types/components/Button/Buttons.stories.d.ts +71 -6
  35. package/dist/esm/types/components/Checkbox/Checkbox.stories.d.ts +13 -9
  36. package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts +10 -7
  37. package/dist/index.d.ts +6 -3
  38. package/dist/src/theme/global.css +370 -84
  39. package/package.json +1 -1
  40. package/src/components/ActionButton/ActionButton.stories.tsx +105 -149
  41. package/src/components/ActionButton/ActionButton.styles.ts +78 -18
  42. package/src/components/ActionButton/ActionButton.tsx +7 -2
  43. package/src/components/Button/Button.styles.ts +51 -14
  44. package/src/components/Button/Button.tsx +11 -2
  45. package/src/components/Button/Buttons.stories.tsx +235 -0
  46. package/src/components/Checkbox/Checkbox.stories.tsx +50 -4
  47. package/src/components/Checkbox/Checkbox.tsx +12 -8
  48. package/src/components/InputFilter/InputFilter.styles.ts +2 -2
  49. package/src/components/InputFilter/InputFilter.tsx +21 -24
  50. package/src/components/RadioGroup/RadioGroup.stories.tsx +43 -4
  51. package/src/components/RadioGroup/RadioGroup.tsx +1 -1
  52. package/src/theme/themes/variable.css +1 -1
@@ -785,9 +785,6 @@ input[type=number] {
785
785
  .grid{
786
786
  display: grid;
787
787
  }
788
- .contents{
789
- display: contents;
790
- }
791
788
  .hidden{
792
789
  display: none;
793
790
  }
@@ -956,6 +953,9 @@ input[type=number] {
956
953
  .w-2{
957
954
  width: 0.5rem;
958
955
  }
956
+ .w-20{
957
+ width: 5rem;
958
+ }
959
959
  .w-28{
960
960
  width: 7rem;
961
961
  }
@@ -986,9 +986,6 @@ input[type=number] {
986
986
  .w-\[200px\]{
987
987
  width: 200px;
988
988
  }
989
- .w-\[20px\]{
990
- width: 20px;
991
- }
992
989
  .w-\[24px\]{
993
990
  width: 24px;
994
991
  }
@@ -1039,6 +1036,9 @@ input[type=number] {
1039
1036
  .max-w-\[300px\]{
1040
1037
  max-width: 300px;
1041
1038
  }
1039
+ .max-w-\[360px\]{
1040
+ max-width: 360px;
1041
+ }
1042
1042
  .max-w-full{
1043
1043
  max-width: 100%;
1044
1044
  }
@@ -1143,6 +1143,15 @@ input[type=number] {
1143
1143
  .grid-cols-9{
1144
1144
  grid-template-columns: repeat(9, minmax(0, 1fr));
1145
1145
  }
1146
+ .grid-cols-\[120px_repeat\(3\2c minmax\(0\2c 1fr\)\)\]{
1147
+ grid-template-columns: 120px repeat(3,minmax(0,1fr));
1148
+ }
1149
+ .grid-cols-\[160px_16px\]{
1150
+ grid-template-columns: 160px 16px;
1151
+ }
1152
+ .grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)\]{
1153
+ grid-template-columns: repeat(3,minmax(0,1fr));
1154
+ }
1146
1155
  .grid-cols-\[repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\]{
1147
1156
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
1148
1157
  }
@@ -1167,6 +1176,9 @@ input[type=number] {
1167
1176
  .items-center{
1168
1177
  align-items: center;
1169
1178
  }
1179
+ .items-stretch{
1180
+ align-items: stretch;
1181
+ }
1170
1182
  .justify-start{
1171
1183
  justify-content: flex-start;
1172
1184
  }
@@ -1291,12 +1303,63 @@ input[type=number] {
1291
1303
  .rounded{
1292
1304
  border-radius: 0.25rem;
1293
1305
  }
1306
+ .rounded-\[var\(--button-l-capsule\)\]{
1307
+ border-radius: var(--button-l-capsule);
1308
+ }
1309
+ .rounded-\[var\(--button-l-round\)\]{
1310
+ border-radius: var(--button-l-round);
1311
+ }
1312
+ .rounded-\[var\(--button-m-capsule\)\]{
1313
+ border-radius: var(--button-m-capsule);
1314
+ }
1315
+ .rounded-\[var\(--button-m-round\)\]{
1316
+ border-radius: var(--button-m-round);
1317
+ }
1318
+ .rounded-\[var\(--button-s-capsule\)\]{
1319
+ border-radius: var(--button-s-capsule);
1320
+ }
1321
+ .rounded-\[var\(--button-s-round\)\]{
1322
+ border-radius: var(--button-s-round);
1323
+ }
1324
+ .rounded-\[var\(--function-button-l-capsule\)\]{
1325
+ border-radius: var(--function-button-l-capsule);
1326
+ }
1327
+ .rounded-\[var\(--function-button-l-round\)\]{
1328
+ border-radius: var(--function-button-l-round);
1329
+ }
1330
+ .rounded-\[var\(--function-button-m-capsule\)\]{
1331
+ border-radius: var(--function-button-m-capsule);
1332
+ }
1333
+ .rounded-\[var\(--function-button-m-round\)\]{
1334
+ border-radius: var(--function-button-m-round);
1335
+ }
1336
+ .rounded-\[var\(--function-button-s-capsule\)\]{
1337
+ border-radius: var(--function-button-s-capsule);
1338
+ }
1339
+ .rounded-\[var\(--function-button-s-round\)\]{
1340
+ border-radius: var(--function-button-s-round);
1341
+ }
1342
+ .rounded-\[var\(--function-button-xs-capsule\)\]{
1343
+ border-radius: var(--function-button-xs-capsule);
1344
+ }
1345
+ .rounded-\[var\(--function-button-xs-round\)\]{
1346
+ border-radius: var(--function-button-xs-round);
1347
+ }
1348
+ .rounded-\[var\(--function-button-xxs-capsule\)\]{
1349
+ border-radius: var(--function-button-xxs-capsule);
1350
+ }
1351
+ .rounded-\[var\(--function-button-xxs-round\)\]{
1352
+ border-radius: var(--function-button-xxs-round);
1353
+ }
1294
1354
  .rounded-\[var\(--spacing-spacing-xxs\2c 2px\)\]{
1295
1355
  border-radius: var(--spacing-spacing-xxs,2px);
1296
1356
  }
1297
1357
  .rounded-full{
1298
1358
  border-radius: 9999px;
1299
1359
  }
1360
+ .rounded-lg{
1361
+ border-radius: var(--radius-radius-l);
1362
+ }
1300
1363
  .rounded-md{
1301
1364
  border-radius: var(--radius-radius-m);
1302
1365
  }
@@ -1309,9 +1372,6 @@ input[type=number] {
1309
1372
  .rounded-xl{
1310
1373
  border-radius: var(--radius-radius-xl);
1311
1374
  }
1312
- .rounded-xs{
1313
- border-radius: var(--radius-radius-xs);
1314
- }
1315
1375
  .rounded-l-full{
1316
1376
  border-top-left-radius: 9999px;
1317
1377
  border-bottom-left-radius: 9999px;
@@ -1375,6 +1435,18 @@ input[type=number] {
1375
1435
  .border-none{
1376
1436
  border-style: none;
1377
1437
  }
1438
+ .\!border-action-button-solid-active-hover{
1439
+ --tw-border-opacity: 1 !important;
1440
+ border-color: color-mix(in srgb, var(--action-button-solid-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
1441
+ }
1442
+ .\!border-action-button-solid-hover{
1443
+ --tw-border-opacity: 1 !important;
1444
+ border-color: color-mix(in srgb, var(--action-button-solid-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
1445
+ }
1446
+ .\!border-function-default-hover{
1447
+ --tw-border-opacity: 1 !important;
1448
+ border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
1449
+ }
1378
1450
  .border-action-button-icon-active{
1379
1451
  --tw-border-opacity: 1;
1380
1452
  border-color: color-mix(in srgb, var(--action-button-icon-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -1387,18 +1459,6 @@ input[type=number] {
1387
1459
  --tw-border-opacity: 1;
1388
1460
  border-color: color-mix(in srgb, var(--action-button-icon-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
1389
1461
  }
1390
- .border-action-button-outline-active{
1391
- --tw-border-opacity: 1;
1392
- border-color: color-mix(in srgb, var(--action-button-outline-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
1393
- }
1394
- .border-action-button-outline-default{
1395
- --tw-border-opacity: 1;
1396
- border-color: color-mix(in srgb, var(--action-button-outline-default-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
1397
- }
1398
- .border-action-button-outline-disabled{
1399
- --tw-border-opacity: 1;
1400
- border-color: color-mix(in srgb, var(--action-button-outline-disabled-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
1401
- }
1402
1462
  .border-action-button-solid-active{
1403
1463
  --tw-border-opacity: 1;
1404
1464
  border-color: color-mix(in srgb, var(--action-button-solid-active-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -1596,6 +1656,30 @@ input[type=number] {
1596
1656
  --tw-border-opacity: 1;
1597
1657
  border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
1598
1658
  }
1659
+ .\!bg-action-button-icon-active-hover{
1660
+ --tw-bg-opacity: 1 !important;
1661
+ background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
1662
+ }
1663
+ .\!bg-action-button-icon-hover{
1664
+ --tw-bg-opacity: 1 !important;
1665
+ background-color: color-mix(in srgb, var(--action-button-icon-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
1666
+ }
1667
+ .\!bg-action-button-outline-active-hover{
1668
+ --tw-bg-opacity: 1 !important;
1669
+ background-color: color-mix(in srgb, var(--action-button-outline-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
1670
+ }
1671
+ .\!bg-action-button-outline-hover{
1672
+ --tw-bg-opacity: 1 !important;
1673
+ background-color: color-mix(in srgb, var(--action-button-outline-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
1674
+ }
1675
+ .\!bg-action-button-solid-active-hover{
1676
+ --tw-bg-opacity: 1 !important;
1677
+ background-color: color-mix(in srgb, var(--action-button-solid-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
1678
+ }
1679
+ .\!bg-action-button-solid-hover{
1680
+ --tw-bg-opacity: 1 !important;
1681
+ background-color: color-mix(in srgb, var(--action-button-solid-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent) !important;
1682
+ }
1599
1683
  .bg-\[rgb\(var\(--base-bg-2\)\)\]{
1600
1684
  background-color: rgb(var(--base-bg-2));
1601
1685
  }
@@ -2839,6 +2923,24 @@ input[type=number] {
2839
2923
  .to-white{
2840
2924
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
2841
2925
  }
2926
+ .\!fill-action-button-icon-active-hover{
2927
+ fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent) !important;
2928
+ }
2929
+ .\!fill-action-button-icon-hover{
2930
+ fill: color-mix(in srgb, var(--action-button-icon-hover-text) calc(100% * 1), transparent) !important;
2931
+ }
2932
+ .\!fill-action-button-outline-active-hover{
2933
+ fill: color-mix(in srgb, var(--action-button-outline-active-hover-text) calc(100% * 1), transparent) !important;
2934
+ }
2935
+ .\!fill-action-button-outline-hover{
2936
+ fill: color-mix(in srgb, var(--action-button-outline-hover-text) calc(100% * 1), transparent) !important;
2937
+ }
2938
+ .\!fill-action-button-solid-active-hover{
2939
+ fill: color-mix(in srgb, var(--action-button-solid-active-hover-text) calc(100% * 1), transparent) !important;
2940
+ }
2941
+ .\!fill-action-button-solid-hover{
2942
+ fill: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * 1), transparent) !important;
2943
+ }
2842
2944
  .fill-action-button-icon-active{
2843
2945
  fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
2844
2946
  }
@@ -3037,33 +3139,33 @@ input[type=number] {
3037
3139
  padding-left: 2rem;
3038
3140
  padding-right: 2rem;
3039
3141
  }
3040
- .px-\[2px\]{
3041
- padding-left: 2px;
3042
- padding-right: 2px;
3142
+ .px-\[12px\]{
3143
+ padding-left: 12px;
3144
+ padding-right: 12px;
3043
3145
  }
3044
- .px-lg{
3045
- padding-left: var(--spacing-spacing-l);
3046
- padding-right: var(--spacing-spacing-l);
3146
+ .px-\[16px\]{
3147
+ padding-left: 16px;
3148
+ padding-right: 16px;
3047
3149
  }
3048
- .px-md{
3049
- padding-left: var(--spacing-spacing-m);
3050
- padding-right: var(--spacing-spacing-m);
3150
+ .px-\[1px\]{
3151
+ padding-left: 1px;
3152
+ padding-right: 1px;
3051
3153
  }
3052
- .px-sm{
3053
- padding-left: var(--spacing-spacing-s);
3054
- padding-right: var(--spacing-spacing-s);
3154
+ .px-\[24px\]{
3155
+ padding-left: 24px;
3156
+ padding-right: 24px;
3055
3157
  }
3056
- .px-xl{
3057
- padding-left: var(--spacing-spacing-xl);
3058
- padding-right: var(--spacing-spacing-xl);
3158
+ .px-\[2px\]{
3159
+ padding-left: 2px;
3160
+ padding-right: 2px;
3059
3161
  }
3060
- .px-xs{
3061
- padding-left: var(--spacing-spacing-xs);
3062
- padding-right: var(--spacing-spacing-xs);
3162
+ .px-\[4px\]{
3163
+ padding-left: 4px;
3164
+ padding-right: 4px;
3063
3165
  }
3064
- .px-xxs{
3065
- padding-left: var(--spacing-spacing-xxs);
3066
- padding-right: var(--spacing-spacing-xxs);
3166
+ .px-\[8px\]{
3167
+ padding-left: 8px;
3168
+ padding-right: 8px;
3067
3169
  }
3068
3170
  .py-1{
3069
3171
  padding-top: 0.25rem;
@@ -3093,25 +3195,29 @@ input[type=number] {
3093
3195
  padding-top: 1.5rem;
3094
3196
  padding-bottom: 1.5rem;
3095
3197
  }
3096
- .py-lg{
3097
- padding-top: var(--spacing-spacing-l);
3098
- padding-bottom: var(--spacing-spacing-l);
3198
+ .py-\[12px\]{
3199
+ padding-top: 12px;
3200
+ padding-bottom: 12px;
3099
3201
  }
3100
- .py-md{
3101
- padding-top: var(--spacing-spacing-m);
3102
- padding-bottom: var(--spacing-spacing-m);
3202
+ .py-\[16px\]{
3203
+ padding-top: 16px;
3204
+ padding-bottom: 16px;
3103
3205
  }
3104
- .py-sm{
3105
- padding-top: var(--spacing-spacing-s);
3106
- padding-bottom: var(--spacing-spacing-s);
3206
+ .py-\[1px\]{
3207
+ padding-top: 1px;
3208
+ padding-bottom: 1px;
3107
3209
  }
3108
- .py-xs{
3109
- padding-top: var(--spacing-spacing-xs);
3110
- padding-bottom: var(--spacing-spacing-xs);
3210
+ .py-\[2px\]{
3211
+ padding-top: 2px;
3212
+ padding-bottom: 2px;
3111
3213
  }
3112
- .py-xxs{
3113
- padding-top: var(--spacing-spacing-xxs);
3114
- padding-bottom: var(--spacing-spacing-xxs);
3214
+ .py-\[4px\]{
3215
+ padding-top: 4px;
3216
+ padding-bottom: 4px;
3217
+ }
3218
+ .py-\[8px\]{
3219
+ padding-top: 8px;
3220
+ padding-bottom: 8px;
3115
3221
  }
3116
3222
  .\!pe-\[38px\]{
3117
3223
  padding-inline-end: 38px !important;
@@ -3164,6 +3270,9 @@ input[type=number] {
3164
3270
  .pt-2{
3165
3271
  padding-top: 0.5rem;
3166
3272
  }
3273
+ .pt-3{
3274
+ padding-top: 0.75rem;
3275
+ }
3167
3276
  .pt-4{
3168
3277
  padding-top: 1rem;
3169
3278
  }
@@ -3370,9 +3479,36 @@ input[type=number] {
3370
3479
  .tracking-tight{
3371
3480
  letter-spacing: -0.025em;
3372
3481
  }
3482
+ .tracking-wide{
3483
+ letter-spacing: 0.025em;
3484
+ }
3373
3485
  .tracking-widest{
3374
3486
  letter-spacing: 0.1em;
3375
3487
  }
3488
+ .\!text-action-button-icon-active-hover{
3489
+ --tw-text-opacity: 1 !important;
3490
+ color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
3491
+ }
3492
+ .\!text-action-button-icon-hover{
3493
+ --tw-text-opacity: 1 !important;
3494
+ color: color-mix(in srgb, var(--action-button-icon-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
3495
+ }
3496
+ .\!text-action-button-outline-active-hover{
3497
+ --tw-text-opacity: 1 !important;
3498
+ color: color-mix(in srgb, var(--action-button-outline-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
3499
+ }
3500
+ .\!text-action-button-outline-hover{
3501
+ --tw-text-opacity: 1 !important;
3502
+ color: color-mix(in srgb, var(--action-button-outline-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
3503
+ }
3504
+ .\!text-action-button-solid-active-hover{
3505
+ --tw-text-opacity: 1 !important;
3506
+ color: color-mix(in srgb, var(--action-button-solid-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
3507
+ }
3508
+ .\!text-action-button-solid-hover{
3509
+ --tw-text-opacity: 1 !important;
3510
+ color: color-mix(in srgb, var(--action-button-solid-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
3511
+ }
3376
3512
  .\!text-primary-foreground{
3377
3513
  --tw-text-opacity: 1 !important;
3378
3514
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
@@ -3653,6 +3789,10 @@ input[type=number] {
3653
3789
  --tw-text-opacity: 1;
3654
3790
  color: color-mix(in srgb, var(--text-grey-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
3655
3791
  }
3792
+ .text-text-white{
3793
+ --tw-text-opacity: 1;
3794
+ color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
3795
+ }
3656
3796
  .text-warning{
3657
3797
  --tw-text-opacity: 1;
3658
3798
  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -3718,6 +3858,21 @@ input[type=number] {
3718
3858
  .ring-inset{
3719
3859
  --tw-ring-inset: inset;
3720
3860
  }
3861
+ .\!ring-\[var\(--action-button-outline-active-hover-border\)\]{
3862
+ --tw-ring-color: var(--action-button-outline-active-hover-border) !important;
3863
+ }
3864
+ .\!ring-\[var\(--action-button-outline-hover-border\)\]{
3865
+ --tw-ring-color: var(--action-button-outline-hover-border) !important;
3866
+ }
3867
+ .ring-\[var\(--action-button-outline-active-border\)\]{
3868
+ --tw-ring-color: var(--action-button-outline-active-border);
3869
+ }
3870
+ .ring-\[var\(--action-button-outline-default-border\)\]{
3871
+ --tw-ring-color: var(--action-button-outline-default-border);
3872
+ }
3873
+ .ring-\[var\(--action-button-outline-disabled-border\)\]{
3874
+ --tw-ring-color: var(--action-button-outline-disabled-border);
3875
+ }
3721
3876
  .ring-error{
3722
3877
  --tw-ring-opacity: 1;
3723
3878
  --tw-ring-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -3980,6 +4135,38 @@ input[type=number] {
3980
4135
  .placeholder\:text-transparent::placeholder{
3981
4136
  color: transparent;
3982
4137
  }
4138
+ .before\:pointer-events-none::before{
4139
+ content: var(--tw-content);
4140
+ pointer-events: none;
4141
+ }
4142
+ .before\:absolute::before{
4143
+ content: var(--tw-content);
4144
+ position: absolute;
4145
+ }
4146
+ .before\:inset-0::before{
4147
+ content: var(--tw-content);
4148
+ inset: 0px;
4149
+ }
4150
+ .before\:rounded-\[inherit\]::before{
4151
+ content: var(--tw-content);
4152
+ border-radius: inherit;
4153
+ }
4154
+ .before\:border::before{
4155
+ content: var(--tw-content);
4156
+ border-width: 1px;
4157
+ }
4158
+ .before\:border-0::before{
4159
+ content: var(--tw-content);
4160
+ border-width: 0px;
4161
+ }
4162
+ .before\:border-inherit::before{
4163
+ content: var(--tw-content);
4164
+ border-color: inherit;
4165
+ }
4166
+ .before\:content-\[\'\'\]::before{
4167
+ --tw-content: '';
4168
+ content: var(--tw-content);
4169
+ }
3983
4170
  .hover\:border-action-button-icon-active-hover:hover{
3984
4171
  --tw-border-opacity: 1;
3985
4172
  border-color: color-mix(in srgb, var(--action-button-icon-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -3988,14 +4175,6 @@ input[type=number] {
3988
4175
  --tw-border-opacity: 1;
3989
4176
  border-color: color-mix(in srgb, var(--action-button-icon-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
3990
4177
  }
3991
- .hover\:border-action-button-outline-active-hover:hover{
3992
- --tw-border-opacity: 1;
3993
- border-color: color-mix(in srgb, var(--action-button-outline-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
3994
- }
3995
- .hover\:border-action-button-outline-hover:hover{
3996
- --tw-border-opacity: 1;
3997
- border-color: color-mix(in srgb, var(--action-button-outline-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
3998
- }
3999
4178
  .hover\:border-action-button-solid-active-hover:hover{
4000
4179
  --tw-border-opacity: 1;
4001
4180
  border-color: color-mix(in srgb, var(--action-button-solid-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -4446,6 +4625,12 @@ input[type=number] {
4446
4625
  .hover\:opacity-100:hover{
4447
4626
  opacity: 1;
4448
4627
  }
4628
+ .hover\:ring-\[var\(--action-button-outline-active-hover-border\)\]:hover{
4629
+ --tw-ring-color: var(--action-button-outline-active-hover-border);
4630
+ }
4631
+ .hover\:ring-\[var\(--action-button-outline-hover-border\)\]:hover{
4632
+ --tw-ring-color: var(--action-button-outline-hover-border);
4633
+ }
4449
4634
  .hover\:ring-input-active-stroke:hover{
4450
4635
  --tw-ring-opacity: 1;
4451
4636
  --tw-ring-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -4553,14 +4738,6 @@ input[type=number] {
4553
4738
  --tw-border-opacity: 1;
4554
4739
  border-color: color-mix(in srgb, var(--action-button-icon-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4555
4740
  }
4556
- .active\:border-action-button-outline-active-pressed:active{
4557
- --tw-border-opacity: 1;
4558
- border-color: color-mix(in srgb, var(--action-button-outline-active-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4559
- }
4560
- .active\:border-action-button-outline-pressed:active{
4561
- --tw-border-opacity: 1;
4562
- border-color: color-mix(in srgb, var(--action-button-outline-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
4563
- }
4564
4741
  .active\:border-action-button-solid-active-pressed:active{
4565
4742
  --tw-border-opacity: 1;
4566
4743
  border-color: color-mix(in srgb, var(--action-button-solid-active-pressed-border) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -4972,6 +5149,12 @@ input[type=number] {
4972
5149
  .active\:opacity-75:active{
4973
5150
  opacity: 0.75;
4974
5151
  }
5152
+ .active\:ring-\[var\(--action-button-outline-active-pressed-border\)\]:active{
5153
+ --tw-ring-color: var(--action-button-outline-active-pressed-border);
5154
+ }
5155
+ .active\:ring-\[var\(--action-button-outline-pressed-border\)\]:active{
5156
+ --tw-ring-color: var(--action-button-outline-pressed-border);
5157
+ }
4975
5158
  .active\:ring-input-disable-stroke:active{
4976
5159
  --tw-ring-opacity: 1;
4977
5160
  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
@@ -5600,6 +5783,10 @@ input[type=number] {
5600
5783
  --tw-border-opacity: 1;
5601
5784
  border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
5602
5785
  }
5786
+ .data-\[state\=indeterminate\]\:border-function-active-solid[data-state="indeterminate"]{
5787
+ --tw-border-opacity: 1;
5788
+ border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
5789
+ }
5603
5790
  .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
5604
5791
  background-color: var(--dropdown-menu-disabled-bg) !important;
5605
5792
  }
@@ -5703,6 +5890,10 @@ input[type=number] {
5703
5890
  --tw-bg-opacity: 1;
5704
5891
  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
5705
5892
  }
5893
+ .data-\[state\=indeterminate\]\:bg-function-active-solid[data-state="indeterminate"]{
5894
+ --tw-bg-opacity: 1;
5895
+ background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
5896
+ }
5706
5897
  .data-\[state\=open\]\:bg-primary[data-state="open"]{
5707
5898
  --tw-bg-opacity: 1;
5708
5899
  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5885,6 +6076,10 @@ input[type=number] {
5885
6076
  --tw-text-opacity: 1;
5886
6077
  color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
5887
6078
  }
6079
+ .data-\[state\=indeterminate\]\:text-function-active-icon[data-state="indeterminate"]{
6080
+ --tw-text-opacity: 1;
6081
+ color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
6082
+ }
5888
6083
  .data-\[state\=open\]\:text-primary-foreground[data-state="open"]{
5889
6084
  --tw-text-opacity: 1;
5890
6085
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -5901,6 +6096,10 @@ input[type=number] {
5901
6096
  --tw-border-opacity: 1;
5902
6097
  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
5903
6098
  }
6099
+ .hover\:data-\[state\=indeterminate\]\:border-function-active-hover[data-state="indeterminate"]:hover{
6100
+ --tw-border-opacity: 1;
6101
+ border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
6102
+ }
5904
6103
  .hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover{
5905
6104
  background-color: var(--switch-active-hover-color);
5906
6105
  }
@@ -5908,6 +6107,10 @@ input[type=number] {
5908
6107
  --tw-bg-opacity: 1;
5909
6108
  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
5910
6109
  }
6110
+ .hover\:data-\[state\=indeterminate\]\:bg-function-active-hover[data-state="indeterminate"]:hover{
6111
+ --tw-bg-opacity: 1;
6112
+ background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
6113
+ }
5911
6114
  .hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover{
5912
6115
  background-color: var(--switch-hover-color);
5913
6116
  }
@@ -5915,6 +6118,14 @@ input[type=number] {
5915
6118
  --tw-text-opacity: 1;
5916
6119
  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity, 1)), transparent);
5917
6120
  }
6121
+ .disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled{
6122
+ --tw-bg-opacity: 1;
6123
+ background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
6124
+ }
6125
+ .disabled\:data-\[state\=indeterminate\]\:bg-state-disable-solid[data-state="indeterminate"]:disabled{
6126
+ --tw-bg-opacity: 1;
6127
+ background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
6128
+ }
5918
6129
  .group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"]{
5919
6130
  background-color: var(--switch-thumb-active-hover-color);
5920
6131
  }
@@ -5986,6 +6197,12 @@ input[type=number] {
5986
6197
  .\[\&\>tr\]\:last\:border-b-0:last-child>tr{
5987
6198
  border-bottom-width: 0px;
5988
6199
  }
6200
+ .\[\&\[data-state\=checked\]_\.checkbox-check-icon\]\:block[data-state=checked] .checkbox-check-icon{
6201
+ display: block;
6202
+ }
6203
+ .\[\&\[data-state\=indeterminate\]_\.checkbox-minus-icon\]\:block[data-state=indeterminate] .checkbox-minus-icon{
6204
+ display: block;
6205
+ }
5989
6206
  .\[\&_button\]\:rounded-full button{
5990
6207
  border-radius: 9999px;
5991
6208
  }
@@ -6011,6 +6228,10 @@ input[type=number] {
6011
6228
  width: 1.5rem;
6012
6229
  height: 1.5rem;
6013
6230
  }
6231
+ .\[\&_svg\]\:size-\[12px\] svg{
6232
+ width: 12px;
6233
+ height: 12px;
6234
+ }
6014
6235
  .\[\&_svg\]\:size-\[14px\] svg{
6015
6236
  width: 14px;
6016
6237
  height: 14px;