@rovula/ui 0.1.3 → 0.1.4

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 (62) hide show
  1. package/dist/cjs/bundle.css +144 -40
  2. package/dist/cjs/bundle.js +4 -4
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +3 -0
  5. package/dist/cjs/types/components/InputFilter/InputFilter.stories.d.ts +3 -0
  6. package/dist/cjs/types/components/MaskedTextInput/MaskedTextInput.d.ts +3 -0
  7. package/dist/cjs/types/components/MaskedTextInput/MaskedTextInput.stories.d.ts +6 -0
  8. package/dist/cjs/types/components/PasswordInput/PasswordInput.stories.d.ts +3 -0
  9. package/dist/cjs/types/components/Search/Search.stories.d.ts +3 -0
  10. package/dist/cjs/types/components/Switch/Switch.d.ts +3 -1
  11. package/dist/cjs/types/components/Switch/Switch.stories.d.ts +12 -4
  12. package/dist/cjs/types/components/Switch/Switch.styles.d.ts +7 -0
  13. package/dist/cjs/types/components/TextInput/TextInput.d.ts +6 -0
  14. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +9 -0
  15. package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts +4 -0
  16. package/dist/cjs/types/components/Toast/Toast.d.ts +1 -0
  17. package/dist/cjs/types/components/Toast/Toast.stories.d.ts +14 -0
  18. package/dist/cjs/types/components/Toast/Toast.styles.d.ts +1 -0
  19. package/dist/components/Switch/Switch.js +4 -17
  20. package/dist/components/Switch/Switch.stories.js +12 -2
  21. package/dist/components/Switch/Switch.styles.js +39 -0
  22. package/dist/components/TextInput/TextInput.js +28 -7
  23. package/dist/components/TextInput/TextInput.stories.js +13 -0
  24. package/dist/components/TextInput/TextInput.styles.js +22 -0
  25. package/dist/components/Toast/Toast.js +5 -5
  26. package/dist/components/Toast/Toast.stories.js +11 -2
  27. package/dist/components/Toast/Toast.styles.js +38 -6
  28. package/dist/components/Toast/Toaster.js +17 -1
  29. package/dist/esm/bundle.css +144 -40
  30. package/dist/esm/bundle.js +4 -4
  31. package/dist/esm/bundle.js.map +1 -1
  32. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +3 -0
  33. package/dist/esm/types/components/InputFilter/InputFilter.stories.d.ts +3 -0
  34. package/dist/esm/types/components/MaskedTextInput/MaskedTextInput.d.ts +3 -0
  35. package/dist/esm/types/components/MaskedTextInput/MaskedTextInput.stories.d.ts +6 -0
  36. package/dist/esm/types/components/PasswordInput/PasswordInput.stories.d.ts +3 -0
  37. package/dist/esm/types/components/Search/Search.stories.d.ts +3 -0
  38. package/dist/esm/types/components/Switch/Switch.d.ts +3 -1
  39. package/dist/esm/types/components/Switch/Switch.stories.d.ts +12 -4
  40. package/dist/esm/types/components/Switch/Switch.styles.d.ts +7 -0
  41. package/dist/esm/types/components/TextInput/TextInput.d.ts +6 -0
  42. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +9 -0
  43. package/dist/esm/types/components/TextInput/TextInput.styles.d.ts +4 -0
  44. package/dist/esm/types/components/Toast/Toast.d.ts +1 -0
  45. package/dist/esm/types/components/Toast/Toast.stories.d.ts +14 -0
  46. package/dist/esm/types/components/Toast/Toast.styles.d.ts +1 -0
  47. package/dist/index.d.ts +13 -1
  48. package/dist/src/theme/global.css +191 -87
  49. package/package.json +1 -1
  50. package/src/components/Switch/Switch.stories.tsx +33 -2
  51. package/src/components/Switch/Switch.styles.ts +48 -0
  52. package/src/components/Switch/Switch.tsx +68 -45
  53. package/src/components/TextInput/TextInput.stories.tsx +82 -0
  54. package/src/components/TextInput/TextInput.styles.ts +22 -0
  55. package/src/components/TextInput/TextInput.tsx +40 -11
  56. package/src/components/Toast/Toast.stories.tsx +12 -2
  57. package/src/components/Toast/Toast.styles.tsx +38 -6
  58. package/src/components/Toast/Toast.tsx +7 -7
  59. package/src/components/Toast/Toaster.tsx +26 -4
  60. package/src/theme/themes/xspector/baseline.css +0 -1
  61. package/src/theme/tokens/components/switch.css +10 -11
  62. package/src/theme/themes/xspector/components/switch.css +0 -30
@@ -660,6 +660,9 @@ input[type=number] {
660
660
  .top-full{
661
661
  top: 100%;
662
662
  }
663
+ .isolate{
664
+ isolation: isolate;
665
+ }
663
666
  .-z-10{
664
667
  z-index: -10;
665
668
  }
@@ -835,6 +838,10 @@ input[type=number] {
835
838
  width: 18px;
836
839
  height: 18px;
837
840
  }
841
+ .size-\[22px\]{
842
+ width: 22px;
843
+ height: 22px;
844
+ }
838
845
  .size-\[30px\]{
839
846
  width: 30px;
840
847
  height: 30px;
@@ -1066,6 +1073,14 @@ input[type=number] {
1066
1073
  .border-collapse{
1067
1074
  border-collapse: collapse;
1068
1075
  }
1076
+ .-translate-x-1\/2{
1077
+ --tw-translate-x: -50%;
1078
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1079
+ }
1080
+ .-translate-y-1\/2{
1081
+ --tw-translate-y: -50%;
1082
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1083
+ }
1069
1084
  .translate-x-\[-50\%\]{
1070
1085
  --tw-translate-x: -50%;
1071
1086
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1149,6 +1164,9 @@ input[type=number] {
1149
1164
  .grid-cols-\[160px_16px\]{
1150
1165
  grid-template-columns: 160px 16px;
1151
1166
  }
1167
+ .grid-cols-\[1fr_40px\]{
1168
+ grid-template-columns: 1fr 40px;
1169
+ }
1152
1170
  .grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)\]{
1153
1171
  grid-template-columns: repeat(3,minmax(0,1fr));
1154
1172
  }
@@ -1277,6 +1295,9 @@ input[type=number] {
1277
1295
  .overflow-hidden{
1278
1296
  overflow: hidden;
1279
1297
  }
1298
+ .overflow-visible{
1299
+ overflow: visible;
1300
+ }
1280
1301
  .overflow-x-auto{
1281
1302
  overflow-x: auto;
1282
1303
  }
@@ -1641,6 +1662,10 @@ input[type=number] {
1641
1662
  --tw-border-opacity: 1;
1642
1663
  border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
1643
1664
  }
1665
+ .border-l-warning-stroke{
1666
+ --tw-border-opacity: 1;
1667
+ border-left-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
1668
+ }
1644
1669
  .border-r-input-default-stroke{
1645
1670
  --tw-border-opacity: 1;
1646
1671
  border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -1649,6 +1674,10 @@ input[type=number] {
1649
1674
  --tw-border-opacity: 1;
1650
1675
  border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
1651
1676
  }
1677
+ .border-r-warning-stroke{
1678
+ --tw-border-opacity: 1;
1679
+ border-right-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
1680
+ }
1652
1681
  .border-t-\[var\(--footer-border-color\)\]{
1653
1682
  border-top-color: var(--footer-border-color);
1654
1683
  }
@@ -3079,12 +3108,6 @@ input[type=number] {
3079
3108
  .stroke-input-disable-stroke{
3080
3109
  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
3081
3110
  }
3082
- .stroke-input-error{
3083
- stroke: color-mix(in srgb, var(--input-color-error) calc(100% * 1), transparent);
3084
- }
3085
- .stroke-input-filled-text{
3086
- stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
3087
- }
3088
3111
  .stroke-primary-default{
3089
3112
  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
3090
3113
  }
@@ -3115,6 +3138,10 @@ input[type=number] {
3115
3138
  .p-8{
3116
3139
  padding: 2rem;
3117
3140
  }
3141
+ .px-1{
3142
+ padding-left: 0.25rem;
3143
+ padding-right: 0.25rem;
3144
+ }
3118
3145
  .px-2{
3119
3146
  padding-left: 0.5rem;
3120
3147
  padding-right: 0.5rem;
@@ -3810,6 +3837,9 @@ input[type=number] {
3810
3837
  .caret-primary{
3811
3838
  caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
3812
3839
  }
3840
+ .opacity-0{
3841
+ opacity: 0;
3842
+ }
3813
3843
  .opacity-50{
3814
3844
  opacity: 0.5;
3815
3845
  }
@@ -3824,6 +3854,11 @@ input[type=number] {
3824
3854
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
3825
3855
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3826
3856
  }
3857
+ .shadow-\[0px_8px_16px_0px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]{
3858
+ --tw-shadow: 0px 8px 16px 0px rgba(0,0,0,0.12);
3859
+ --tw-shadow-colored: 0px 8px 16px 0px var(--tw-shadow-color);
3860
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3861
+ }
3827
3862
  .shadow-lg{
3828
3863
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3829
3864
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3889,6 +3924,10 @@ input[type=number] {
3889
3924
  --tw-ring-opacity: 1;
3890
3925
  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
3891
3926
  }
3927
+ .ring-warning-stroke{
3928
+ --tw-ring-opacity: 1;
3929
+ --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
3930
+ }
3892
3931
  .ring-offset-background{
3893
3932
  --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
3894
3933
  }
@@ -3910,6 +3949,11 @@ input[type=number] {
3910
3949
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3911
3950
  transition-duration: 150ms;
3912
3951
  }
3952
+ .transition-\[transform\2c background-color\2c color\2c filter\]{
3953
+ transition-property: transform,background-color,color,filter;
3954
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3955
+ transition-duration: 150ms;
3956
+ }
3913
3957
  .transition-all{
3914
3958
  transition-property: all;
3915
3959
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3930,11 +3974,6 @@ input[type=number] {
3930
3974
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3931
3975
  transition-duration: 150ms;
3932
3976
  }
3933
- .transition-transform{
3934
- transition-property: transform;
3935
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3936
- transition-duration: 150ms;
3937
- }
3938
3977
  .delay-150{
3939
3978
  transition-delay: 150ms;
3940
3979
  }
@@ -4113,6 +4152,9 @@ input[type=number] {
4113
4152
  display: none;
4114
4153
  /* background: transparent; */
4115
4154
  }
4155
+ .\[filter\:var\(--switch-thumb-filter\)\]{
4156
+ filter: var(--switch-thumb-filter);
4157
+ }
4116
4158
  .placeholder\:text-input-default-text::-moz-placeholder{
4117
4159
  --tw-text-opacity: 1;
4118
4160
  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -4147,10 +4189,35 @@ input[type=number] {
4147
4189
  content: var(--tw-content);
4148
4190
  inset: 0px;
4149
4191
  }
4192
+ .before\:left-1::before{
4193
+ content: var(--tw-content);
4194
+ left: 0.25rem;
4195
+ }
4196
+ .before\:top-1\/2::before{
4197
+ content: var(--tw-content);
4198
+ top: 50%;
4199
+ }
4200
+ .before\:h-3::before{
4201
+ content: var(--tw-content);
4202
+ height: 0.75rem;
4203
+ }
4204
+ .before\:w-8::before{
4205
+ content: var(--tw-content);
4206
+ width: 2rem;
4207
+ }
4208
+ .before\:-translate-y-1\/2::before{
4209
+ content: var(--tw-content);
4210
+ --tw-translate-y: -50%;
4211
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4212
+ }
4150
4213
  .before\:rounded-\[inherit\]::before{
4151
4214
  content: var(--tw-content);
4152
4215
  border-radius: inherit;
4153
4216
  }
4217
+ .before\:rounded-full::before{
4218
+ content: var(--tw-content);
4219
+ border-radius: 9999px;
4220
+ }
4154
4221
  .before\:border::before{
4155
4222
  content: var(--tw-content);
4156
4223
  border-width: 1px;
@@ -4163,6 +4230,12 @@ input[type=number] {
4163
4230
  content: var(--tw-content);
4164
4231
  border-color: inherit;
4165
4232
  }
4233
+ .before\:transition-colors::before{
4234
+ content: var(--tw-content);
4235
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
4236
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4237
+ transition-duration: 150ms;
4238
+ }
4166
4239
  .before\:content-\[\'\'\]::before{
4167
4240
  --tw-content: '';
4168
4241
  content: var(--tw-content);
@@ -4643,6 +4716,10 @@ input[type=number] {
4643
4716
  --tw-ring-opacity: 1;
4644
4717
  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
4645
4718
  }
4719
+ .hover\:ring-warning-stroke:hover{
4720
+ --tw-ring-opacity: 1;
4721
+ --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
4722
+ }
4646
4723
  .hover\:placeholder\:text-input-disable-text:hover::-moz-placeholder{
4647
4724
  --tw-text-opacity: 1;
4648
4725
  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -4703,6 +4780,10 @@ input[type=number] {
4703
4780
  --tw-ring-opacity: 1;
4704
4781
  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
4705
4782
  }
4783
+ .focus\:ring-warning-stroke:focus{
4784
+ --tw-ring-opacity: 1;
4785
+ --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
4786
+ }
4706
4787
  .focus\:ring-offset-2:focus{
4707
4788
  --tw-ring-offset-width: 2px;
4708
4789
  }
@@ -5502,12 +5583,7 @@ input[type=number] {
5502
5583
  .disabled\:opacity-50:disabled{
5503
5584
  opacity: 0.5;
5504
5585
  }
5505
- .group:hover .group-hover\:ring{
5506
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
5507
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
5508
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
5509
- }
5510
- .group:disabled .group-disabled\:\!bg-\[--switch-thumb-disabled-color\]{
5586
+ .group:disabled .group-disabled\:\!bg-\[var\(--switch-thumb-disabled-color\)\]{
5511
5587
  background-color: var(--switch-thumb-disabled-color) !important;
5512
5588
  }
5513
5589
  .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2{
@@ -5669,8 +5745,8 @@ input[type=number] {
5669
5745
  --tw-translate-x: 1rem;
5670
5746
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
5671
5747
  }
5672
- .data-\[state\=unchecked\]\:-translate-x-\[2px\][data-state="unchecked"]{
5673
- --tw-translate-x: -2px;
5748
+ .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{
5749
+ --tw-translate-x: 0px;
5674
5750
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
5675
5751
  }
5676
5752
  .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"]{
@@ -5790,9 +5866,6 @@ input[type=number] {
5790
5866
  .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
5791
5867
  background-color: var(--dropdown-menu-disabled-bg) !important;
5792
5868
  }
5793
- .data-\[disabled\]\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled]{
5794
- background-color: var(--switch-disabled-color) !important;
5795
- }
5796
5869
  .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading="true"]{
5797
5870
  --tw-bg-opacity: 1;
5798
5871
  background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5880,12 +5953,12 @@ input[type=number] {
5880
5953
  .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
5881
5954
  background-color: var(--dropdown-menu-selected-bg);
5882
5955
  }
5883
- .data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state="checked"]{
5884
- background-color: var(--switch-active-color);
5885
- }
5886
5956
  .data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state="checked"]{
5887
5957
  background-color: var(--switch-thumb-active-color);
5888
5958
  }
5959
+ .data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"]{
5960
+ background-color: var(--switch-thumb-active-hover-color);
5961
+ }
5889
5962
  .data-\[state\=checked\]\:bg-function-active-solid[data-state="checked"]{
5890
5963
  --tw-bg-opacity: 1;
5891
5964
  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5902,12 +5975,12 @@ input[type=number] {
5902
5975
  --tw-bg-opacity: 1;
5903
5976
  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
5904
5977
  }
5905
- .data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state="unchecked"]{
5906
- background-color: var(--switch-default-color);
5907
- }
5908
5978
  .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state="unchecked"]{
5909
5979
  background-color: var(--switch-thumb-default-color);
5910
5980
  }
5981
+ .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state="unchecked"]{
5982
+ background-color: var(--switch-thumb-hover-color);
5983
+ }
5911
5984
  .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
5912
5985
  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
5913
5986
  }
@@ -6068,6 +6141,9 @@ input[type=number] {
6068
6141
  .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
6069
6142
  color: var(--dropdown-menu-selected-text);
6070
6143
  }
6144
+ .data-\[state\=checked\]\:text-\[var\(--state-color-primary-hover-bg\)\][data-state="checked"]{
6145
+ color: var(--state-color-primary-hover-bg);
6146
+ }
6071
6147
  .data-\[state\=checked\]\:text-function-active-icon[data-state="checked"]{
6072
6148
  --tw-text-opacity: 1;
6073
6149
  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -6084,6 +6160,9 @@ input[type=number] {
6084
6160
  --tw-text-opacity: 1;
6085
6161
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
6086
6162
  }
6163
+ .data-\[state\=unchecked\]\:text-\[var\(--state-color-tertiary-hover-bg\)\][data-state="unchecked"]{
6164
+ color: var(--state-color-tertiary-hover-bg);
6165
+ }
6087
6166
  .data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
6088
6167
  transition-property: none;
6089
6168
  }
@@ -6092,6 +6171,26 @@ input[type=number] {
6092
6171
  line-height: var(--subtitle5-line-height, 22px);
6093
6172
  font-weight: var(--subtitle5-weight, 500);
6094
6173
  }
6174
+ .data-\[disabled\]\:before\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled]::before{
6175
+ content: var(--tw-content);
6176
+ background-color: var(--switch-disabled-color) !important;
6177
+ }
6178
+ .data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-color\)\][data-state="checked"]::before{
6179
+ content: var(--tw-content);
6180
+ background-color: var(--switch-active-color);
6181
+ }
6182
+ .data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]::before{
6183
+ content: var(--tw-content);
6184
+ background-color: var(--switch-active-hover-color);
6185
+ }
6186
+ .data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-default-color\)\][data-state="unchecked"]::before{
6187
+ content: var(--tw-content);
6188
+ background-color: var(--switch-default-color);
6189
+ }
6190
+ .data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]::before{
6191
+ content: var(--tw-content);
6192
+ background-color: var(--switch-hover-color);
6193
+ }
6095
6194
  .hover\:data-\[state\=checked\]\:border-function-active-hover[data-state="checked"]:hover{
6096
6195
  --tw-border-opacity: 1;
6097
6196
  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -6100,9 +6199,6 @@ input[type=number] {
6100
6199
  --tw-border-opacity: 1;
6101
6200
  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity, 1)), transparent);
6102
6201
  }
6103
- .hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover{
6104
- background-color: var(--switch-active-hover-color);
6105
- }
6106
6202
  .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state="checked"]:hover{
6107
6203
  --tw-bg-opacity: 1;
6108
6204
  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6111,13 +6207,18 @@ input[type=number] {
6111
6207
  --tw-bg-opacity: 1;
6112
6208
  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
6113
6209
  }
6114
- .hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover{
6115
- background-color: var(--switch-hover-color);
6116
- }
6117
6210
  .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state="checked"]:hover{
6118
6211
  --tw-text-opacity: 1;
6119
6212
  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity, 1)), transparent);
6120
6213
  }
6214
+ .hover\:data-\[state\=checked\]\:before\:bg-\[var\(--switch-active-hover-color\)\][data-state="checked"]:hover::before{
6215
+ content: var(--tw-content);
6216
+ background-color: var(--switch-active-hover-color);
6217
+ }
6218
+ .hover\:data-\[state\=unchecked\]\:before\:bg-\[var\(--switch-hover-color\)\][data-state="unchecked"]:hover::before{
6219
+ content: var(--tw-content);
6220
+ background-color: var(--switch-hover-color);
6221
+ }
6121
6222
  .disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled{
6122
6223
  --tw-bg-opacity: 1;
6123
6224
  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6132,12 +6233,6 @@ input[type=number] {
6132
6233
  .group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state="unchecked"]{
6133
6234
  background-color: var(--switch-thumb-hover-color);
6134
6235
  }
6135
- .group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state="checked"]{
6136
- --tw-ring-color: var(--switch-thumb-active-hover-ring);
6137
- }
6138
- .group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state="unchecked"]{
6139
- --tw-ring-color: var(--switch-thumb-hover-ring);
6140
- }
6141
6236
  @media (min-width: 640px){
6142
6237
 
6143
6238
  .sm\:mt-0{
@@ -6203,6 +6298,15 @@ input[type=number] {
6203
6298
  .\[\&\[data-state\=indeterminate\]_\.checkbox-minus-icon\]\:block[data-state=indeterminate] .checkbox-minus-icon{
6204
6299
  display: block;
6205
6300
  }
6301
+ .\[\&_\.switch-thumb-halo\]\:opacity-100 .switch-thumb-halo{
6302
+ opacity: 1;
6303
+ }
6304
+ .group:hover .group-hover\:\[\&_\.switch-thumb-halo\]\:opacity-100 .switch-thumb-halo{
6305
+ opacity: 1;
6306
+ }
6307
+ .group:disabled .group-disabled\:\[\&_\.switch-thumb-halo\]\:opacity-0 .switch-thumb-halo{
6308
+ opacity: 0;
6309
+ }
6206
6310
  .\[\&_button\]\:rounded-full button{
6207
6311
  border-radius: 9999px;
6208
6312
  }