@rarui/styles 1.28.1 → 1.29.0-rc.1
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/CHANGELOG.md +5 -18
- package/dist/index.css +1 -1
- package/dist/index.d.ts +130 -70
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/themes/dark.js +1 -1
- package/package.json +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -7140,22 +7140,7 @@ declare const styles: {
|
|
|
7140
7140
|
* Defines the visual variant of the badge, affecting its background style, border and text.
|
|
7141
7141
|
*/
|
|
7142
7142
|
variant: {
|
|
7143
|
-
solid: {
|
|
7144
|
-
":after": {
|
|
7145
|
-
transition: "opacity 150ms ease";
|
|
7146
|
-
content: "";
|
|
7147
|
-
position: "absolute";
|
|
7148
|
-
opacity: number;
|
|
7149
|
-
inset: number;
|
|
7150
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7151
|
-
borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7152
|
-
};
|
|
7153
|
-
selectors: {
|
|
7154
|
-
"&:hover:after": {
|
|
7155
|
-
opacity: number;
|
|
7156
|
-
};
|
|
7157
|
-
};
|
|
7158
|
-
};
|
|
7143
|
+
solid: {};
|
|
7159
7144
|
outlined: {
|
|
7160
7145
|
backgroundColor: "transparent";
|
|
7161
7146
|
};
|
|
@@ -7232,22 +7217,7 @@ export declare const button: {
|
|
|
7232
7217
|
};
|
|
7233
7218
|
};
|
|
7234
7219
|
variant: {
|
|
7235
|
-
solid: {
|
|
7236
|
-
":after": {
|
|
7237
|
-
transition: "opacity 150ms ease";
|
|
7238
|
-
content: "";
|
|
7239
|
-
position: "absolute";
|
|
7240
|
-
opacity: number;
|
|
7241
|
-
inset: number;
|
|
7242
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7243
|
-
borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7244
|
-
};
|
|
7245
|
-
selectors: {
|
|
7246
|
-
"&:hover:after": {
|
|
7247
|
-
opacity: number;
|
|
7248
|
-
};
|
|
7249
|
-
};
|
|
7250
|
-
};
|
|
7220
|
+
solid: {};
|
|
7251
7221
|
outlined: {
|
|
7252
7222
|
backgroundColor: "transparent";
|
|
7253
7223
|
};
|
|
@@ -7889,6 +7859,7 @@ declare const styles$2: {
|
|
|
7889
7859
|
};
|
|
7890
7860
|
};
|
|
7891
7861
|
}>;
|
|
7862
|
+
overlay: string;
|
|
7892
7863
|
};
|
|
7893
7864
|
export type IconButtonVariants = RecipeVariants<typeof styles$2.iconButton>;
|
|
7894
7865
|
export declare const iconButton: {
|
|
@@ -7977,6 +7948,7 @@ export declare const iconButton: {
|
|
|
7977
7948
|
};
|
|
7978
7949
|
};
|
|
7979
7950
|
}>;
|
|
7951
|
+
overlay: string;
|
|
7980
7952
|
};
|
|
7981
7953
|
};
|
|
7982
7954
|
declare const styles$3: {
|
|
@@ -8004,9 +7976,6 @@ declare const styles$3: {
|
|
|
8004
7976
|
};
|
|
8005
7977
|
};
|
|
8006
7978
|
};
|
|
8007
|
-
/**
|
|
8008
|
-
* Determines if the input have borders or not.
|
|
8009
|
-
*/
|
|
8010
7979
|
border: {
|
|
8011
7980
|
true: {
|
|
8012
7981
|
borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -8015,17 +7984,6 @@ declare const styles$3: {
|
|
|
8015
7984
|
borderWidth: number;
|
|
8016
7985
|
};
|
|
8017
7986
|
};
|
|
8018
|
-
size: {
|
|
8019
|
-
large: {
|
|
8020
|
-
height: "3rem";
|
|
8021
|
-
};
|
|
8022
|
-
medium: {
|
|
8023
|
-
height: "2.5rem";
|
|
8024
|
-
};
|
|
8025
|
-
small: {
|
|
8026
|
-
height: "2rem";
|
|
8027
|
-
};
|
|
8028
|
-
};
|
|
8029
7987
|
}>;
|
|
8030
7988
|
input: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
8031
7989
|
/**
|
|
@@ -8035,21 +7993,24 @@ declare const styles$3: {
|
|
|
8035
7993
|
false: {};
|
|
8036
7994
|
};
|
|
8037
7995
|
/**
|
|
8038
|
-
* Specifies the size of the
|
|
7996
|
+
* Specifies the size of the badge, controlling its dimensions.
|
|
8039
7997
|
*/
|
|
8040
7998
|
size: {
|
|
8041
7999
|
large: {
|
|
8000
|
+
height: "3rem";
|
|
8042
8001
|
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8043
8002
|
lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8044
8003
|
};
|
|
8045
8004
|
medium: {
|
|
8005
|
+
height: "2.75rem";
|
|
8046
8006
|
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8047
8007
|
lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8048
8008
|
};
|
|
8049
8009
|
small: {
|
|
8010
|
+
height: "2rem";
|
|
8050
8011
|
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8051
8012
|
lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8052
|
-
padding: `
|
|
8013
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
|
|
8053
8014
|
};
|
|
8054
8015
|
};
|
|
8055
8016
|
}>;
|
|
@@ -8086,14 +8047,12 @@ declare const styles$3: {
|
|
|
8086
8047
|
};
|
|
8087
8048
|
size: {
|
|
8088
8049
|
large: {
|
|
8089
|
-
padding: `
|
|
8050
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
|
|
8090
8051
|
};
|
|
8091
8052
|
medium: {
|
|
8092
|
-
padding: `
|
|
8093
|
-
};
|
|
8094
|
-
small: {
|
|
8095
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
|
|
8053
|
+
padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8096
8054
|
};
|
|
8055
|
+
small: {};
|
|
8097
8056
|
};
|
|
8098
8057
|
}>;
|
|
8099
8058
|
};
|
|
@@ -8129,17 +8088,6 @@ export declare const input: {
|
|
|
8129
8088
|
borderWidth: number;
|
|
8130
8089
|
};
|
|
8131
8090
|
};
|
|
8132
|
-
size: {
|
|
8133
|
-
large: {
|
|
8134
|
-
height: "3rem";
|
|
8135
|
-
};
|
|
8136
|
-
medium: {
|
|
8137
|
-
height: "2.5rem";
|
|
8138
|
-
};
|
|
8139
|
-
small: {
|
|
8140
|
-
height: "2rem";
|
|
8141
|
-
};
|
|
8142
|
-
};
|
|
8143
8091
|
}>;
|
|
8144
8092
|
input: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
8145
8093
|
divider: {
|
|
@@ -8147,17 +8095,20 @@ export declare const input: {
|
|
|
8147
8095
|
};
|
|
8148
8096
|
size: {
|
|
8149
8097
|
large: {
|
|
8098
|
+
height: "3rem";
|
|
8150
8099
|
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8151
8100
|
lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8152
8101
|
};
|
|
8153
8102
|
medium: {
|
|
8103
|
+
height: "2.75rem";
|
|
8154
8104
|
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8155
8105
|
lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8156
8106
|
};
|
|
8157
8107
|
small: {
|
|
8108
|
+
height: "2rem";
|
|
8158
8109
|
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8159
8110
|
lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8160
|
-
padding: `
|
|
8111
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
|
|
8161
8112
|
};
|
|
8162
8113
|
};
|
|
8163
8114
|
}>;
|
|
@@ -8194,14 +8145,12 @@ export declare const input: {
|
|
|
8194
8145
|
};
|
|
8195
8146
|
size: {
|
|
8196
8147
|
large: {
|
|
8197
|
-
padding: `
|
|
8148
|
+
padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
|
|
8198
8149
|
};
|
|
8199
8150
|
medium: {
|
|
8200
|
-
padding: `
|
|
8201
|
-
};
|
|
8202
|
-
small: {
|
|
8203
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
|
|
8151
|
+
padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8204
8152
|
};
|
|
8153
|
+
small: {};
|
|
8205
8154
|
};
|
|
8206
8155
|
}>;
|
|
8207
8156
|
};
|
|
@@ -10797,6 +10746,117 @@ export declare const stepper: {
|
|
|
10797
10746
|
}>;
|
|
10798
10747
|
};
|
|
10799
10748
|
};
|
|
10749
|
+
declare const tabsStyles: {
|
|
10750
|
+
ul: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
10751
|
+
/**
|
|
10752
|
+
* Determines whether the tabs should have an underline style.
|
|
10753
|
+
*/
|
|
10754
|
+
underlined: {
|
|
10755
|
+
true: {
|
|
10756
|
+
padding: number;
|
|
10757
|
+
borderRadius: number;
|
|
10758
|
+
borderColor: "transparent";
|
|
10759
|
+
backgroundColor: "transparent";
|
|
10760
|
+
borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10761
|
+
};
|
|
10762
|
+
};
|
|
10763
|
+
}>;
|
|
10764
|
+
li: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
10765
|
+
/**
|
|
10766
|
+
* Determines whether the tabs should occupy the full width of their container.
|
|
10767
|
+
*/
|
|
10768
|
+
full: {
|
|
10769
|
+
true: {
|
|
10770
|
+
flex: "1";
|
|
10771
|
+
};
|
|
10772
|
+
};
|
|
10773
|
+
}>;
|
|
10774
|
+
button: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
10775
|
+
/**
|
|
10776
|
+
* Determines whether the tabs should have an underline style.
|
|
10777
|
+
*/
|
|
10778
|
+
underlined: {
|
|
10779
|
+
true: {
|
|
10780
|
+
borderRadius: number;
|
|
10781
|
+
borderColor: "transparent";
|
|
10782
|
+
backgroundColor: "transparent";
|
|
10783
|
+
borderBottomColor: "transparent";
|
|
10784
|
+
":hover": {
|
|
10785
|
+
boxShadow: "none";
|
|
10786
|
+
borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10787
|
+
};
|
|
10788
|
+
":disabled": {
|
|
10789
|
+
borderBottomColor: "transparent";
|
|
10790
|
+
};
|
|
10791
|
+
};
|
|
10792
|
+
};
|
|
10793
|
+
/**
|
|
10794
|
+
* Indicates whether the button is currently selected. This is used to style the button accordingly.
|
|
10795
|
+
*/
|
|
10796
|
+
selected: {
|
|
10797
|
+
true: {
|
|
10798
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10799
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10800
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10801
|
+
":disabled": {
|
|
10802
|
+
backgroundColor: "transparent";
|
|
10803
|
+
borderColor: "transparent";
|
|
10804
|
+
};
|
|
10805
|
+
};
|
|
10806
|
+
};
|
|
10807
|
+
}>;
|
|
10808
|
+
};
|
|
10809
|
+
export type TabsVariants = NonNullable<RecipeVariants<typeof tabsStyles.ul>> & NonNullable<RecipeVariants<typeof tabsStyles.li>> & NonNullable<RecipeVariants<typeof tabsStyles.button>>;
|
|
10810
|
+
export declare const tabs: {
|
|
10811
|
+
classnames: {
|
|
10812
|
+
ul: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
10813
|
+
underlined: {
|
|
10814
|
+
true: {
|
|
10815
|
+
padding: number;
|
|
10816
|
+
borderRadius: number;
|
|
10817
|
+
borderColor: "transparent";
|
|
10818
|
+
backgroundColor: "transparent";
|
|
10819
|
+
borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10820
|
+
};
|
|
10821
|
+
};
|
|
10822
|
+
}>;
|
|
10823
|
+
li: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
10824
|
+
full: {
|
|
10825
|
+
true: {
|
|
10826
|
+
flex: "1";
|
|
10827
|
+
};
|
|
10828
|
+
};
|
|
10829
|
+
}>;
|
|
10830
|
+
button: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
10831
|
+
underlined: {
|
|
10832
|
+
true: {
|
|
10833
|
+
borderRadius: number;
|
|
10834
|
+
borderColor: "transparent";
|
|
10835
|
+
backgroundColor: "transparent";
|
|
10836
|
+
borderBottomColor: "transparent";
|
|
10837
|
+
":hover": {
|
|
10838
|
+
boxShadow: "none";
|
|
10839
|
+
borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10840
|
+
};
|
|
10841
|
+
":disabled": {
|
|
10842
|
+
borderBottomColor: "transparent";
|
|
10843
|
+
};
|
|
10844
|
+
};
|
|
10845
|
+
};
|
|
10846
|
+
selected: {
|
|
10847
|
+
true: {
|
|
10848
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10849
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10850
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10851
|
+
":disabled": {
|
|
10852
|
+
backgroundColor: "transparent";
|
|
10853
|
+
borderColor: "transparent";
|
|
10854
|
+
};
|
|
10855
|
+
};
|
|
10856
|
+
};
|
|
10857
|
+
}>;
|
|
10858
|
+
};
|
|
10859
|
+
};
|
|
10800
10860
|
|
|
10801
10861
|
export {
|
|
10802
10862
|
checkbox$1 as checkbox,
|