@rovula/ui 0.0.23 → 0.0.25

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 (35) hide show
  1. package/dist/cjs/bundle.css +113 -0
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/DropdownMenu/DropdownMenu.d.ts +27 -0
  5. package/dist/cjs/types/components/DropdownMenu/DropdownMenu.stories.d.ts +54 -0
  6. package/dist/cjs/types/index.d.ts +1 -0
  7. package/dist/components/DropdownMenu/DropdownMenu.js +74 -0
  8. package/dist/components/DropdownMenu/DropdownMenu.stories.js +116 -0
  9. package/dist/components/Tabs/Tabs.js +0 -1
  10. package/dist/components/Text/Text.js +2 -0
  11. package/dist/esm/bundle.css +113 -0
  12. package/dist/esm/bundle.js +3 -3
  13. package/dist/esm/bundle.js.map +1 -1
  14. package/dist/esm/types/components/DropdownMenu/DropdownMenu.d.ts +27 -0
  15. package/dist/esm/types/components/DropdownMenu/DropdownMenu.stories.d.ts +54 -0
  16. package/dist/esm/types/index.d.ts +1 -0
  17. package/dist/index.d.ts +27 -1
  18. package/dist/index.js +1 -0
  19. package/dist/src/theme/global.css +189 -1
  20. package/dist/theme/themes/xspector/baseline.css +2 -1
  21. package/dist/theme/themes/xspector/color.css +2 -1
  22. package/dist/theme/themes/xspector/components/dropdown-menu.css +28 -0
  23. package/dist/theme/tokens/baseline.css +2 -1
  24. package/dist/theme/tokens/components/dropdown-menu.css +27 -0
  25. package/package.json +8 -3
  26. package/src/components/DropdownMenu/DropdownMenu.stories.tsx +394 -0
  27. package/src/components/DropdownMenu/DropdownMenu.tsx +222 -0
  28. package/src/components/Tabs/Tabs.tsx +0 -1
  29. package/src/components/Text/Text.tsx +2 -0
  30. package/src/index.ts +1 -0
  31. package/src/theme/themes/xspector/baseline.css +2 -1
  32. package/src/theme/themes/xspector/color.css +2 -1
  33. package/src/theme/themes/xspector/components/dropdown-menu.css +28 -0
  34. package/src/theme/tokens/baseline.css +2 -1
  35. package/src/theme/tokens/components/dropdown-menu.css +27 -0
@@ -628,10 +628,18 @@ body {
628
628
  .m-0{
629
629
  margin: 0px;
630
630
  }
631
+ .-mx-2{
632
+ margin-left: -0.5rem;
633
+ margin-right: -0.5rem;
634
+ }
631
635
  .mx-auto{
632
636
  margin-left: auto;
633
637
  margin-right: auto;
634
638
  }
639
+ .my-2{
640
+ margin-top: 0.5rem;
641
+ margin-bottom: 0.5rem;
642
+ }
635
643
  .ml-2{
636
644
  margin-left: 0.5rem;
637
645
  }
@@ -641,6 +649,9 @@ body {
641
649
  .ml-4{
642
650
  margin-left: 1rem;
643
651
  }
652
+ .ml-auto{
653
+ margin-left: auto;
654
+ }
644
655
  .mr-2{
645
656
  margin-right: 0.5rem;
646
657
  }
@@ -800,6 +811,9 @@ body {
800
811
  .h-full{
801
812
  height: 100%;
802
813
  }
814
+ .h-px{
815
+ height: 1px;
816
+ }
803
817
  .h-screen{
804
818
  height: 100vh;
805
819
  }
@@ -812,6 +826,9 @@ body {
812
826
  .w-10{
813
827
  width: 2.5rem;
814
828
  }
829
+ .w-2{
830
+ width: 0.5rem;
831
+ }
815
832
  .w-4{
816
833
  width: 1rem;
817
834
  }
@@ -860,6 +877,9 @@ body {
860
877
  .min-w-72{
861
878
  min-width: 18rem;
862
879
  }
880
+ .min-w-\[154px\]{
881
+ min-width: 154px;
882
+ }
863
883
  .max-w-lg{
864
884
  max-width: 32rem;
865
885
  }
@@ -905,6 +925,9 @@ body {
905
925
  .animate-spin{
906
926
  animation: spin 1s linear infinite;
907
927
  }
928
+ .cursor-default{
929
+ cursor: default;
930
+ }
908
931
  .cursor-pointer{
909
932
  cursor: pointer;
910
933
  }
@@ -1275,6 +1298,15 @@ body {
1275
1298
  .bg-\[rgb\(var\(--navbar-bg-color\)\)\]{
1276
1299
  background-color: rgb(var(--navbar-bg-color));
1277
1300
  }
1301
+ .bg-\[var\(--dropdown-menu-default-bg\)\]{
1302
+ background-color: var(--dropdown-menu-default-bg);
1303
+ }
1304
+ .bg-\[var\(--dropdown-menu-selected-bg\)\]{
1305
+ background-color: var(--dropdown-menu-selected-bg);
1306
+ }
1307
+ .bg-\[var\(--dropdown-menu-seperator-bg\)\]{
1308
+ background-color: var(--dropdown-menu-seperator-bg);
1309
+ }
1278
1310
  .bg-action-button-icon-active{
1279
1311
  --tw-bg-opacity: 1;
1280
1312
  background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1616,6 +1648,10 @@ body {
1616
1648
  padding-left: 0.25rem;
1617
1649
  padding-right: 0.25rem;
1618
1650
  }
1651
+ .px-2{
1652
+ padding-left: 0.5rem;
1653
+ padding-right: 0.5rem;
1654
+ }
1619
1655
  .px-3{
1620
1656
  padding-left: 0.75rem;
1621
1657
  padding-right: 0.75rem;
@@ -1668,6 +1704,10 @@ body {
1668
1704
  padding-top: 0.25rem;
1669
1705
  padding-bottom: 0.25rem;
1670
1706
  }
1707
+ .py-1\.5{
1708
+ padding-top: 0.375rem;
1709
+ padding-bottom: 0.375rem;
1710
+ }
1671
1711
  .py-14{
1672
1712
  padding-top: 3.5rem;
1673
1713
  padding-bottom: 3.5rem;
@@ -1726,6 +1766,18 @@ body {
1726
1766
  .pe-\[72px\]{
1727
1767
  padding-inline-end: 72px;
1728
1768
  }
1769
+ .pl-8{
1770
+ padding-left: 2rem;
1771
+ }
1772
+ .pl-9{
1773
+ padding-left: 2.25rem;
1774
+ }
1775
+ .pr-4{
1776
+ padding-right: 1rem;
1777
+ }
1778
+ .pr-xxl{
1779
+ padding-right: var(--spacing-spacing-xxl);
1780
+ }
1729
1781
  .ps-11{
1730
1782
  padding-inline-start: 2.75rem;
1731
1783
  }
@@ -1756,6 +1808,9 @@ body {
1756
1808
  .align-middle{
1757
1809
  vertical-align: middle;
1758
1810
  }
1811
+ .font-poppins{
1812
+ font-family: Poppins, sans-serif;
1813
+ }
1759
1814
  .text-body1{
1760
1815
  font-size: var(--body1-size, 16px);
1761
1816
  line-height: var(--body1-line-height, 20px);
@@ -1904,6 +1959,10 @@ body {
1904
1959
  font-size: 1.25rem;
1905
1960
  line-height: 1.75rem;
1906
1961
  }
1962
+ .text-xs{
1963
+ font-size: 0.75rem;
1964
+ line-height: 1rem;
1965
+ }
1907
1966
  .font-bold{
1908
1967
  font-weight: 700;
1909
1968
  }
@@ -1922,6 +1981,9 @@ body {
1922
1981
  .tracking-tight{
1923
1982
  letter-spacing: -0.025em;
1924
1983
  }
1984
+ .tracking-widest{
1985
+ letter-spacing: 0.1em;
1986
+ }
1925
1987
  .\!text-primary-foreground{
1926
1988
  --tw-text-opacity: 1 !important;
1927
1989
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent) !important;
@@ -1929,6 +1991,12 @@ body {
1929
1991
  .text-\[rgb\(var\(--navbar-text-color\)\)\]{
1930
1992
  color: rgb(var(--navbar-text-color));
1931
1993
  }
1994
+ .text-\[var\(--dropdown-menu-default-text\)\]{
1995
+ color: var(--dropdown-menu-default-text);
1996
+ }
1997
+ .text-\[var\(--dropdown-menu-selected-text\)\]{
1998
+ color: var(--dropdown-menu-selected-text);
1999
+ }
1932
2000
  .text-\[var\(--loading-process-color\)\]{
1933
2001
  color: var(--loading-process-color);
1934
2002
  }
@@ -2174,9 +2242,17 @@ body {
2174
2242
  .caret-primary{
2175
2243
  caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
2176
2244
  }
2245
+ .opacity-60{
2246
+ opacity: 0.6;
2247
+ }
2177
2248
  .opacity-70{
2178
2249
  opacity: 0.7;
2179
2250
  }
2251
+ .shadow-\[0px_2px_24px_0px_rgba\(145\2c _158\2c _171\2c _0\.24\)\]{
2252
+ --tw-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
2253
+ --tw-shadow-colored: 0px 2px 24px 0px var(--tw-shadow-color);
2254
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2255
+ }
2180
2256
  .shadow-lg{
2181
2257
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2182
2258
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2187,6 +2263,10 @@ body {
2187
2263
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
2188
2264
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2189
2265
  }
2266
+ .shadow-\[var\(--dropdown-menu-shadow\)\]{
2267
+ --tw-shadow-color: var(--dropdown-menu-shadow);
2268
+ --tw-shadow: var(--tw-shadow-colored);
2269
+ }
2190
2270
  .outline-none{
2191
2271
  outline: 2px solid transparent;
2192
2272
  outline-offset: 2px;
@@ -2904,6 +2984,13 @@ body {
2904
2984
  --tw-border-opacity: 1;
2905
2985
  border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity)), transparent);
2906
2986
  }
2987
+ .focus\:\!bg-\[var\(--dropdown-menu-hover-bg\)\]:focus{
2988
+ background-color: var(--dropdown-menu-hover-bg) !important;
2989
+ }
2990
+ .focus\:bg-primary:focus{
2991
+ --tw-bg-opacity: 1;
2992
+ background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
2993
+ }
2907
2994
  .focus\:pe-10:focus{
2908
2995
  padding-inline-end: 2.5rem;
2909
2996
  }
@@ -2913,6 +3000,9 @@ body {
2913
3000
  .focus\:pe-8:focus{
2914
3001
  padding-inline-end: 2rem;
2915
3002
  }
3003
+ .focus\:\!text-\[var\(--dropdown-menu-hover-text\)\]:focus{
3004
+ color: var(--dropdown-menu-hover-text) !important;
3005
+ }
2916
3006
  .focus\:text-input-filled-text:focus{
2917
3007
  --tw-text-opacity: 1;
2918
3008
  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -3393,6 +3483,9 @@ body {
3393
3483
  --tw-text-opacity: 1;
3394
3484
  color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity)), transparent);
3395
3485
  }
3486
+ .active\:opacity-75:active{
3487
+ opacity: 0.75;
3488
+ }
3396
3489
  .active\:ring-input-disable-stroke:active{
3397
3490
  --tw-ring-opacity: 1;
3398
3491
  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity)), transparent);
@@ -3842,6 +3935,9 @@ body {
3842
3935
  .peer:disabled ~ .peer-disabled\:opacity-70{
3843
3936
  opacity: 0.7;
3844
3937
  }
3938
+ .data-\[disabled\]\:pointer-events-none[data-disabled]{
3939
+ pointer-events: none;
3940
+ }
3845
3941
  .data-\[state\=checked\]\:translate-x-4[data-state=checked]{
3846
3942
  --tw-translate-x: 1rem;
3847
3943
  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));
@@ -3938,6 +4034,9 @@ body {
3938
4034
  --tw-border-opacity: 1;
3939
4035
  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), transparent);
3940
4036
  }
4037
+ .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
4038
+ background-color: var(--dropdown-menu-disabled-bg) !important;
4039
+ }
3941
4040
  .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
3942
4041
  --tw-bg-opacity: 1;
3943
4042
  background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4022,6 +4121,9 @@ body {
4022
4121
  --tw-bg-opacity: 1;
4023
4122
  background-color: color-mix(in srgb, var(--button-warning-solid-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
4024
4123
  }
4124
+ .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
4125
+ background-color: var(--dropdown-menu-selected-bg);
4126
+ }
4025
4127
  .data-\[state\=checked\]\:bg-primary[data-state=checked]{
4026
4128
  --tw-bg-opacity: 1;
4027
4129
  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4107,6 +4209,9 @@ body {
4107
4209
  .data-\[loading\=true\]\:fill-button-warning-solid-active[data-loading=true]{
4108
4210
  fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
4109
4211
  }
4212
+ .data-\[disabled\]\:\!text-\[var\(--dropdown-menu-disabled-text\)\][data-disabled]{
4213
+ color: var(--dropdown-menu-disabled-text) !important;
4214
+ }
4110
4215
  .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true]{
4111
4216
  --tw-text-opacity: 1;
4112
4217
  color: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4191,6 +4296,9 @@ body {
4191
4296
  --tw-text-opacity: 1;
4192
4297
  color: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * var(--tw-text-opacity)), transparent);
4193
4298
  }
4299
+ .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
4300
+ color: var(--dropdown-menu-selected-text);
4301
+ }
4194
4302
  .data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{
4195
4303
  --tw-text-opacity: 1;
4196
4304
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4199,6 +4307,11 @@ body {
4199
4307
  --tw-text-opacity: 1;
4200
4308
  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
4201
4309
  }
4310
+ .data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked']{
4311
+ font-size: var(--subtitle5-size, 14px);
4312
+ line-height: var(--subtitle5-line-height, 22px);
4313
+ font-weight: var(--subtitle5-weight, 500);
4314
+ }
4202
4315
  @media (min-width: 640px){
4203
4316
 
4204
4317
  .sm\:mt-0{