@rovula/ui 0.0.23 → 0.0.24
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.
- package/dist/cjs/bundle.css +113 -0
- package/dist/cjs/bundle.js.map +1 -1
- package/dist/cjs/types/components/DropdownMenu/DropdownMenu.d.ts +27 -0
- package/dist/cjs/types/components/DropdownMenu/DropdownMenu.stories.d.ts +54 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +74 -0
- package/dist/components/DropdownMenu/DropdownMenu.stories.js +116 -0
- package/dist/components/Tabs/Tabs.js +0 -1
- package/dist/components/Text/Text.js +2 -0
- package/dist/esm/bundle.css +113 -0
- package/dist/esm/bundle.js.map +1 -1
- package/dist/esm/types/components/DropdownMenu/DropdownMenu.d.ts +27 -0
- package/dist/esm/types/components/DropdownMenu/DropdownMenu.stories.d.ts +54 -0
- package/dist/src/theme/global.css +189 -1
- package/dist/theme/themes/xspector/baseline.css +2 -1
- package/dist/theme/themes/xspector/color.css +2 -1
- package/dist/theme/themes/xspector/components/dropdown-menu.css +28 -0
- package/dist/theme/tokens/baseline.css +2 -1
- package/dist/theme/tokens/components/dropdown-menu.css +27 -0
- package/package.json +8 -3
- package/src/components/DropdownMenu/DropdownMenu.stories.tsx +394 -0
- package/src/components/DropdownMenu/DropdownMenu.tsx +222 -0
- package/src/components/Tabs/Tabs.tsx +0 -1
- package/src/components/Text/Text.tsx +2 -0
- package/src/theme/themes/xspector/baseline.css +2 -1
- package/src/theme/themes/xspector/color.css +2 -1
- package/src/theme/themes/xspector/components/dropdown-menu.css +28 -0
- package/src/theme/tokens/baseline.css +2 -1
- package/src/theme/tokens/components/dropdown-menu.css +27 -0
package/dist/cjs/bundle.css
CHANGED
|
@@ -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{
|