@rovula/ui 0.0.45 → 0.0.47

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 (63) hide show
  1. package/dist/cjs/bundle.css +57 -28
  2. package/dist/cjs/bundle.js +2 -2
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Table/Table.d.ts +1 -0
  5. package/dist/cjs/types/components/Table/Table.stories.d.ts +2 -0
  6. package/dist/cjs/types/components/Toast/Toast.stories.d.ts +8 -0
  7. package/dist/cjs/types/components/Toast/Toaster.d.ts +2 -1
  8. package/dist/cjs/types/components/Toast/useToast.d.ts +1 -0
  9. package/dist/components/Switch/Switch.js +15 -1
  10. package/dist/components/Table/Table.js +2 -2
  11. package/dist/components/Toast/Toast.stories.js +19 -0
  12. package/dist/components/Toast/Toaster.js +4 -3
  13. package/dist/components/Toast/useToast.js +5 -2
  14. package/dist/esm/bundle.css +57 -28
  15. package/dist/esm/bundle.js +2 -2
  16. package/dist/esm/bundle.js.map +1 -1
  17. package/dist/esm/types/components/Table/Table.d.ts +1 -0
  18. package/dist/esm/types/components/Table/Table.stories.d.ts +2 -0
  19. package/dist/esm/types/components/Toast/Toast.stories.d.ts +8 -0
  20. package/dist/esm/types/components/Toast/Toaster.d.ts +2 -1
  21. package/dist/esm/types/components/Toast/useToast.d.ts +1 -0
  22. package/dist/index.d.ts +4 -1
  23. package/dist/src/theme/global.css +1249 -37
  24. package/dist/theme/global.css +1 -0
  25. package/dist/theme/themes/SKL/baseline.css +12 -0
  26. package/dist/theme/themes/SKL/color.css +78 -0
  27. package/dist/theme/themes/SKL/components/action-button.css +127 -0
  28. package/dist/theme/themes/SKL/components/button.css +512 -0
  29. package/dist/theme/themes/SKL/components/dropdown-menu.css +27 -0
  30. package/dist/theme/themes/SKL/components/loading.css +11 -0
  31. package/dist/theme/themes/SKL/components/navbar.css +8 -0
  32. package/dist/theme/themes/SKL/components/progress-bar.css +8 -0
  33. package/dist/theme/themes/SKL/components/switch.css +30 -0
  34. package/dist/theme/themes/SKL/palette.css +145 -0
  35. package/dist/theme/themes/SKL/state.css +86 -0
  36. package/dist/theme/themes/SKL/transparent.css +68 -0
  37. package/dist/theme/themes/SKL/typography.css +199 -0
  38. package/dist/theme/themes/SKL/variables.css +28 -0
  39. package/dist/theme/tokens/baseline.css +2 -1
  40. package/dist/theme/tokens/components/switch.css +30 -0
  41. package/package.json +1 -1
  42. package/src/components/Switch/Switch.tsx +37 -9
  43. package/src/components/Table/Table.tsx +7 -2
  44. package/src/components/Toast/Toast.stories.tsx +50 -0
  45. package/src/components/Toast/Toaster.tsx +5 -3
  46. package/src/components/Toast/useToast.ts +6 -2
  47. package/src/theme/global.css +1 -0
  48. package/src/theme/themes/SKL/baseline.css +12 -0
  49. package/src/theme/themes/SKL/color.css +78 -0
  50. package/src/theme/themes/SKL/components/action-button.css +127 -0
  51. package/src/theme/themes/SKL/components/button.css +512 -0
  52. package/src/theme/themes/SKL/components/dropdown-menu.css +27 -0
  53. package/src/theme/themes/SKL/components/loading.css +11 -0
  54. package/src/theme/themes/SKL/components/navbar.css +8 -0
  55. package/src/theme/themes/SKL/components/progress-bar.css +8 -0
  56. package/src/theme/themes/SKL/components/switch.css +30 -0
  57. package/src/theme/themes/SKL/palette.css +145 -0
  58. package/src/theme/themes/SKL/state.css +86 -0
  59. package/src/theme/themes/SKL/transparent.css +68 -0
  60. package/src/theme/themes/SKL/typography.css +199 -0
  61. package/src/theme/themes/SKL/variables.css +28 -0
  62. package/src/theme/tokens/baseline.css +2 -1
  63. package/src/theme/tokens/components/switch.css +30 -0
package/dist/cjs/bundle.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  @import "./tokens/baseline.css";
3
3
  @import "./themes/xspector/baseline.css";
4
+ @import "./themes/SKL/baseline.css";
4
5
 
5
6
  /*
6
7
  ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
@@ -671,6 +672,9 @@ input[type=number] {
671
672
  .-mr-2{
672
673
  margin-right: -0.5rem;
673
674
  }
675
+ .-mt-\[30px\]{
676
+ margin-top: -30px;
677
+ }
674
678
  .ml-2{
675
679
  margin-left: 0.5rem;
676
680
  }
@@ -1333,6 +1337,10 @@ input[type=number] {
1333
1337
  --tw-border-opacity: 1;
1334
1338
  border-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-border-opacity)), transparent);
1335
1339
  }
1340
+ .border-info{
1341
+ --tw-border-opacity: 1;
1342
+ border-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-border-opacity)), transparent);
1343
+ }
1336
1344
  .border-info-stroke{
1337
1345
  --tw-border-opacity: 1;
1338
1346
  border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity)), transparent);
@@ -1726,6 +1734,10 @@ input[type=number] {
1726
1734
  --tw-bg-opacity: 1;
1727
1735
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1728
1736
  }
1737
+ .bg-green-500{
1738
+ --tw-bg-opacity: 1;
1739
+ background-color: rgb(34 197 94 / var(--tw-bg-opacity));
1740
+ }
1729
1741
  .bg-grey-10{
1730
1742
  --tw-bg-opacity: 1;
1731
1743
  background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1986,6 +1998,10 @@ input[type=number] {
1986
1998
  --tw-bg-opacity: 1;
1987
1999
  background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity)), transparent);
1988
2000
  }
2001
+ .bg-pink-100{
2002
+ --tw-bg-opacity: 1;
2003
+ background-color: rgb(252 231 243 / var(--tw-bg-opacity));
2004
+ }
1989
2005
  .bg-primary{
1990
2006
  --tw-bg-opacity: 1;
1991
2007
  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2114,6 +2130,10 @@ input[type=number] {
2114
2130
  --tw-bg-opacity: 1;
2115
2131
  background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity)), transparent);
2116
2132
  }
2133
+ .bg-red-100{
2134
+ --tw-bg-opacity: 1;
2135
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
2136
+ }
2117
2137
  .bg-secondary{
2118
2138
  --tw-bg-opacity: 1;
2119
2139
  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2182,10 +2202,6 @@ input[type=number] {
2182
2202
  --tw-bg-opacity: 1;
2183
2203
  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity)), transparent);
2184
2204
  }
2185
- .bg-secondary-active{
2186
- --tw-bg-opacity: 1;
2187
- background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), transparent);
2188
- }
2189
2205
  .bg-secondary-default{
2190
2206
  --tw-bg-opacity: 1;
2191
2207
  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3262,6 +3278,10 @@ input[type=number] {
3262
3278
  --tw-text-opacity: 1;
3263
3279
  color: rgb(107 114 128 / var(--tw-text-opacity));
3264
3280
  }
3281
+ .text-grey2-500{
3282
+ --tw-text-opacity: 1;
3283
+ color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-text-opacity)), transparent);
3284
+ }
3265
3285
  .text-info{
3266
3286
  --tw-text-opacity: 1;
3267
3287
  color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -3289,6 +3309,10 @@ input[type=number] {
3289
3309
  --tw-text-opacity: 1;
3290
3310
  color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity)), transparent);
3291
3311
  }
3312
+ .text-red-500{
3313
+ --tw-text-opacity: 1;
3314
+ color: rgb(239 68 68 / var(--tw-text-opacity));
3315
+ }
3292
3316
  .text-secondary{
3293
3317
  --tw-text-opacity: 1;
3294
3318
  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4950,9 +4974,8 @@ input[type=number] {
4950
4974
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
4951
4975
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
4952
4976
  }
4953
- .group:disabled .group-disabled\:bg-state-disable-solid{
4954
- --tw-bg-opacity: 1;
4955
- background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
4977
+ .group:disabled .group-disabled\:bg-\[--switch-thumb-disabled-color\]{
4978
+ background-color: var(--switch-thumb-disabled-color);
4956
4979
  }
4957
4980
  .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2{
4958
4981
  top: 0.5rem;
@@ -5214,8 +5237,8 @@ input[type=number] {
5214
5237
  .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
5215
5238
  background-color: var(--dropdown-menu-disabled-bg) !important;
5216
5239
  }
5217
- .data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled]{
5218
- background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
5240
+ .data-\[disabled\]\:bg-\[var\(--switch-disabled-color\)\][data-disabled]{
5241
+ background-color: var(--switch-disabled-color);
5219
5242
  }
5220
5243
  .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
5221
5244
  --tw-bg-opacity: 1;
@@ -5304,13 +5327,16 @@ input[type=number] {
5304
5327
  .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
5305
5328
  background-color: var(--dropdown-menu-selected-bg);
5306
5329
  }
5330
+ .data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state=checked]{
5331
+ background-color: var(--switch-active-color);
5332
+ }
5333
+ .data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state=checked]{
5334
+ background-color: var(--switch-thumb-active-color);
5335
+ }
5307
5336
  .data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
5308
5337
  --tw-bg-opacity: 1;
5309
5338
  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
5310
5339
  }
5311
- .data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked]{
5312
- background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
5313
- }
5314
5340
  .data-\[state\=open\]\:bg-primary[data-state=open]{
5315
5341
  --tw-bg-opacity: 1;
5316
5342
  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5319,12 +5345,11 @@ input[type=number] {
5319
5345
  --tw-bg-opacity: 1;
5320
5346
  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
5321
5347
  }
5322
- .data-\[state\=unchecked\]\:bg-tertiary-active[data-state=unchecked]{
5323
- --tw-bg-opacity: 1;
5324
- background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * var(--tw-bg-opacity)), transparent);
5348
+ .data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state=unchecked]{
5349
+ background-color: var(--switch-default-color);
5325
5350
  }
5326
- .data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
5327
- background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
5351
+ .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state=unchecked]{
5352
+ background-color: var(--switch-thumb-default-color);
5328
5353
  }
5329
5354
  .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
5330
5355
  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
@@ -5510,27 +5535,31 @@ input[type=number] {
5510
5535
  --tw-border-opacity: 1;
5511
5536
  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
5512
5537
  }
5538
+ .hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state=checked]:hover{
5539
+ background-color: var(--switch-active-hover-color);
5540
+ }
5513
5541
  .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover{
5514
5542
  --tw-bg-opacity: 1;
5515
5543
  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
5516
5544
  }
5517
- .hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover{
5518
- background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
5519
- }
5520
- .hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover{
5521
- background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
5545
+ .hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state=unchecked]:hover{
5546
+ background-color: var(--switch-hover-color);
5522
5547
  }
5523
5548
  .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
5524
5549
  --tw-text-opacity: 1;
5525
5550
  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
5526
5551
  }
5527
- .group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked]{
5528
- --tw-ring-opacity: 1;
5529
- --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
5552
+ .group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state=checked]{
5553
+ background-color: var(--switch-thumb-active-hover-color);
5530
5554
  }
5531
- .group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked]{
5532
- --tw-ring-opacity: 1;
5533
- --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
5555
+ .group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state=unchecked]{
5556
+ background-color: var(--switch-thumb-hover-color);
5557
+ }
5558
+ .group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state=checked]{
5559
+ --tw-ring-color: var(--switch-thumb-active-hover-ring);
5560
+ }
5561
+ .group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state=unchecked]{
5562
+ --tw-ring-color: var(--switch-thumb-hover-ring);
5534
5563
  }
5535
5564
  @media (min-width: 640px){
5536
5565