@rarui/styles 1.13.0 → 1.14.0
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 +7 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +289 -14
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -15,6 +15,175 @@ export interface ThemeProviderContextProps {
|
|
|
15
15
|
currentTheme: Theme;
|
|
16
16
|
}
|
|
17
17
|
export declare const useTheme: () => ThemeProviderContextProps;
|
|
18
|
+
declare const styles: {
|
|
19
|
+
container: string;
|
|
20
|
+
avatar: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
21
|
+
size: {
|
|
22
|
+
small: {
|
|
23
|
+
width: "20px";
|
|
24
|
+
height: "20px";
|
|
25
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
26
|
+
};
|
|
27
|
+
medium: {
|
|
28
|
+
width: "30px";
|
|
29
|
+
height: "30px";
|
|
30
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
31
|
+
};
|
|
32
|
+
large: {
|
|
33
|
+
width: "40px";
|
|
34
|
+
height: "40px";
|
|
35
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
36
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
37
|
+
};
|
|
38
|
+
xLarge: {
|
|
39
|
+
width: "60px";
|
|
40
|
+
height: "60px";
|
|
41
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
42
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
}>;
|
|
46
|
+
badge: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
47
|
+
size: {
|
|
48
|
+
small: {
|
|
49
|
+
left: "18px";
|
|
50
|
+
};
|
|
51
|
+
medium: {
|
|
52
|
+
left: "24px";
|
|
53
|
+
};
|
|
54
|
+
large: {
|
|
55
|
+
top: "-4px";
|
|
56
|
+
left: "30px";
|
|
57
|
+
};
|
|
58
|
+
xLarge: {
|
|
59
|
+
left: "44px";
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
}>;
|
|
63
|
+
};
|
|
64
|
+
export type AvatarVariants = RecipeVariants<typeof styles.avatar>;
|
|
65
|
+
export declare const avatar: {
|
|
66
|
+
classnames: {
|
|
67
|
+
container: string;
|
|
68
|
+
avatar: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
69
|
+
size: {
|
|
70
|
+
small: {
|
|
71
|
+
width: "20px";
|
|
72
|
+
height: "20px";
|
|
73
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
74
|
+
};
|
|
75
|
+
medium: {
|
|
76
|
+
width: "30px";
|
|
77
|
+
height: "30px";
|
|
78
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
79
|
+
};
|
|
80
|
+
large: {
|
|
81
|
+
width: "40px";
|
|
82
|
+
height: "40px";
|
|
83
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
84
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
85
|
+
};
|
|
86
|
+
xLarge: {
|
|
87
|
+
width: "60px";
|
|
88
|
+
height: "60px";
|
|
89
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
90
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
}>;
|
|
94
|
+
badge: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
95
|
+
size: {
|
|
96
|
+
small: {
|
|
97
|
+
left: "18px";
|
|
98
|
+
};
|
|
99
|
+
medium: {
|
|
100
|
+
left: "24px";
|
|
101
|
+
};
|
|
102
|
+
large: {
|
|
103
|
+
top: "-4px";
|
|
104
|
+
left: "30px";
|
|
105
|
+
};
|
|
106
|
+
xLarge: {
|
|
107
|
+
left: "44px";
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
}>;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
declare const styles$1: {
|
|
114
|
+
badge: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
115
|
+
appearance: {
|
|
116
|
+
brand: {
|
|
117
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
118
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
119
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
120
|
+
};
|
|
121
|
+
danger: {
|
|
122
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
123
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
124
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
125
|
+
};
|
|
126
|
+
success: {
|
|
127
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
128
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
129
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
130
|
+
};
|
|
131
|
+
warning: {
|
|
132
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
133
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
134
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
135
|
+
};
|
|
136
|
+
info: {
|
|
137
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
138
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
139
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
140
|
+
};
|
|
141
|
+
neutral: {
|
|
142
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
143
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
144
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
145
|
+
};
|
|
146
|
+
inverted: {
|
|
147
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
148
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
149
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
size: {
|
|
153
|
+
large: {
|
|
154
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
|
|
155
|
+
height: "3rem";
|
|
156
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
157
|
+
fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
158
|
+
};
|
|
159
|
+
medium: {
|
|
160
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
|
|
161
|
+
height: "2em";
|
|
162
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
163
|
+
fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
164
|
+
};
|
|
165
|
+
small: {
|
|
166
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
|
|
167
|
+
height: "1.5rem";
|
|
168
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
169
|
+
fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
170
|
+
};
|
|
171
|
+
dot: {
|
|
172
|
+
height: "0.5rem";
|
|
173
|
+
width: "0.5rem";
|
|
174
|
+
};
|
|
175
|
+
};
|
|
176
|
+
variant: {
|
|
177
|
+
solid: {};
|
|
178
|
+
outlined: {
|
|
179
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
180
|
+
borderStyle: "solid";
|
|
181
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
182
|
+
};
|
|
183
|
+
};
|
|
184
|
+
}>;
|
|
185
|
+
};
|
|
186
|
+
export type BadgeVariants = RecipeVariants<typeof styles$1.badge>;
|
|
18
187
|
export declare const badge: {
|
|
19
188
|
classnames: {
|
|
20
189
|
badge: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -6843,7 +7012,7 @@ export declare const box: {
|
|
|
6843
7012
|
}
|
|
6844
7013
|
]>;
|
|
6845
7014
|
};
|
|
6846
|
-
declare const styles: {
|
|
7015
|
+
declare const styles$2: {
|
|
6847
7016
|
button: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
6848
7017
|
appearance: {
|
|
6849
7018
|
brand: {
|
|
@@ -6919,7 +7088,7 @@ declare const styles: {
|
|
|
6919
7088
|
}>;
|
|
6920
7089
|
overlay: string;
|
|
6921
7090
|
};
|
|
6922
|
-
export type ButtonVariants = RecipeVariants<typeof styles.button>;
|
|
7091
|
+
export type ButtonVariants = RecipeVariants<typeof styles$2.button>;
|
|
6923
7092
|
export declare const button: {
|
|
6924
7093
|
classnames: {
|
|
6925
7094
|
button: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -7083,7 +7252,7 @@ declare const checkbox$1: {
|
|
|
7083
7252
|
overlay: string;
|
|
7084
7253
|
};
|
|
7085
7254
|
};
|
|
7086
|
-
declare const styles$
|
|
7255
|
+
declare const styles$3: {
|
|
7087
7256
|
chip: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
7088
7257
|
pill: {
|
|
7089
7258
|
true: {
|
|
@@ -7119,7 +7288,7 @@ declare const paddingProperties: {
|
|
|
7119
7288
|
medium: string;
|
|
7120
7289
|
small: string;
|
|
7121
7290
|
};
|
|
7122
|
-
export type ChipVariants = RecipeVariants<typeof styles$
|
|
7291
|
+
export type ChipVariants = RecipeVariants<typeof styles$3.chip>;
|
|
7123
7292
|
export interface ChipSprinkle {
|
|
7124
7293
|
/**
|
|
7125
7294
|
* The padding properties are used to generate space around an chip's content area.
|
|
@@ -7322,7 +7491,7 @@ export declare const icon: {
|
|
|
7322
7491
|
}
|
|
7323
7492
|
]>;
|
|
7324
7493
|
};
|
|
7325
|
-
declare const styles$
|
|
7494
|
+
declare const styles$4: {
|
|
7326
7495
|
iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
7327
7496
|
appearance: {
|
|
7328
7497
|
brand: {
|
|
@@ -7392,7 +7561,7 @@ declare const styles$2: {
|
|
|
7392
7561
|
}>;
|
|
7393
7562
|
overlay: string;
|
|
7394
7563
|
};
|
|
7395
|
-
export type IconButtonVariants = RecipeVariants<typeof styles$
|
|
7564
|
+
export type IconButtonVariants = RecipeVariants<typeof styles$4.iconButton>;
|
|
7396
7565
|
export declare const iconButton: {
|
|
7397
7566
|
classnames: {
|
|
7398
7567
|
iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -7617,7 +7786,7 @@ export declare const skeleton: {
|
|
|
7617
7786
|
}
|
|
7618
7787
|
]>;
|
|
7619
7788
|
};
|
|
7620
|
-
declare const styles$
|
|
7789
|
+
declare const styles$5: {
|
|
7621
7790
|
status: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
7622
7791
|
appearance: {
|
|
7623
7792
|
success: {
|
|
@@ -7670,7 +7839,7 @@ declare const styles$3: {
|
|
|
7670
7839
|
};
|
|
7671
7840
|
}>;
|
|
7672
7841
|
};
|
|
7673
|
-
export type StatusVariants = RecipeVariants<typeof styles$
|
|
7842
|
+
export type StatusVariants = RecipeVariants<typeof styles$5.status>;
|
|
7674
7843
|
declare const status$1: {
|
|
7675
7844
|
classnames: {
|
|
7676
7845
|
status: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -8310,7 +8479,7 @@ export declare const title: {
|
|
|
8310
8479
|
}
|
|
8311
8480
|
]>;
|
|
8312
8481
|
};
|
|
8313
|
-
declare const styles$
|
|
8482
|
+
declare const styles$6: {
|
|
8314
8483
|
banner: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
8315
8484
|
appearance: {
|
|
8316
8485
|
brand: {
|
|
@@ -8345,7 +8514,7 @@ declare const styles$4: {
|
|
|
8345
8514
|
};
|
|
8346
8515
|
}>;
|
|
8347
8516
|
};
|
|
8348
|
-
export type BannerVariants = RecipeVariants<typeof styles$
|
|
8517
|
+
export type BannerVariants = RecipeVariants<typeof styles$6.banner>;
|
|
8349
8518
|
export declare const banner: {
|
|
8350
8519
|
classnames: {
|
|
8351
8520
|
banner: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -8383,7 +8552,7 @@ export declare const banner: {
|
|
|
8383
8552
|
}>;
|
|
8384
8553
|
};
|
|
8385
8554
|
};
|
|
8386
|
-
declare const styles$
|
|
8555
|
+
declare const styles$7: {
|
|
8387
8556
|
toast: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
8388
8557
|
placement: {
|
|
8389
8558
|
topRight: {};
|
|
@@ -8512,7 +8681,7 @@ declare const styles$5: {
|
|
|
8512
8681
|
};
|
|
8513
8682
|
}>;
|
|
8514
8683
|
};
|
|
8515
|
-
export type ToastVariants = RecipeVariants<typeof styles$
|
|
8684
|
+
export type ToastVariants = RecipeVariants<typeof styles$7.toast>;
|
|
8516
8685
|
export declare const toast: {
|
|
8517
8686
|
classnames: {
|
|
8518
8687
|
toast: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -8644,7 +8813,7 @@ export declare const toast: {
|
|
|
8644
8813
|
}>;
|
|
8645
8814
|
};
|
|
8646
8815
|
};
|
|
8647
|
-
declare const styles$
|
|
8816
|
+
declare const styles$8: {
|
|
8648
8817
|
toggle: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
8649
8818
|
size: {
|
|
8650
8819
|
large: {
|
|
@@ -8713,7 +8882,7 @@ declare const styles$6: {
|
|
|
8713
8882
|
};
|
|
8714
8883
|
}>;
|
|
8715
8884
|
};
|
|
8716
|
-
export type ToggleVariants = RecipeVariants<typeof styles$
|
|
8885
|
+
export type ToggleVariants = RecipeVariants<typeof styles$8.toggle>;
|
|
8717
8886
|
export declare const toggle: {
|
|
8718
8887
|
classnames: {
|
|
8719
8888
|
toggle: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
@@ -8785,6 +8954,112 @@ export declare const toggle: {
|
|
|
8785
8954
|
}>;
|
|
8786
8955
|
};
|
|
8787
8956
|
};
|
|
8957
|
+
declare const dividerBorderWidthProperties: {
|
|
8958
|
+
"1": string;
|
|
8959
|
+
"2": string;
|
|
8960
|
+
};
|
|
8961
|
+
export type DividerBorderStyle = "solid" | "dashed";
|
|
8962
|
+
export interface DividerSprinkle {
|
|
8963
|
+
/**
|
|
8964
|
+
* The **`size`** CSS property sets an element's area.
|
|
8965
|
+
* @default 100%
|
|
8966
|
+
*/
|
|
8967
|
+
size?: string | Conditions<string>;
|
|
8968
|
+
/**
|
|
8969
|
+
* The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
|
|
8970
|
+
*/
|
|
8971
|
+
type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
|
|
8972
|
+
/**
|
|
8973
|
+
* The **`thickness`** shorthand CSS property sets the width of an element's.
|
|
8974
|
+
*/
|
|
8975
|
+
thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
|
|
8976
|
+
}
|
|
8977
|
+
export declare const divider: {
|
|
8978
|
+
classnames: {
|
|
8979
|
+
divider: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
8980
|
+
[x: string]: {
|
|
8981
|
+
[x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
|
|
8982
|
+
};
|
|
8983
|
+
}>;
|
|
8984
|
+
};
|
|
8985
|
+
sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
|
|
8986
|
+
{
|
|
8987
|
+
config: {
|
|
8988
|
+
borderStyle: {
|
|
8989
|
+
values: {
|
|
8990
|
+
[x: string]: {
|
|
8991
|
+
default: string;
|
|
8992
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
8993
|
+
};
|
|
8994
|
+
};
|
|
8995
|
+
staticScale: string[];
|
|
8996
|
+
name: "borderStyle";
|
|
8997
|
+
};
|
|
8998
|
+
borderTopWidth: {
|
|
8999
|
+
values: {
|
|
9000
|
+
1: {
|
|
9001
|
+
default: string;
|
|
9002
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9003
|
+
};
|
|
9004
|
+
2: {
|
|
9005
|
+
default: string;
|
|
9006
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9007
|
+
};
|
|
9008
|
+
};
|
|
9009
|
+
staticScale: {
|
|
9010
|
+
"1": string;
|
|
9011
|
+
"2": string;
|
|
9012
|
+
};
|
|
9013
|
+
name: "borderTopWidth";
|
|
9014
|
+
};
|
|
9015
|
+
borderLeftWidth: {
|
|
9016
|
+
values: {
|
|
9017
|
+
1: {
|
|
9018
|
+
default: string;
|
|
9019
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9020
|
+
};
|
|
9021
|
+
2: {
|
|
9022
|
+
default: string;
|
|
9023
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9024
|
+
};
|
|
9025
|
+
};
|
|
9026
|
+
staticScale: {
|
|
9027
|
+
"1": string;
|
|
9028
|
+
"2": string;
|
|
9029
|
+
};
|
|
9030
|
+
name: "borderLeftWidth";
|
|
9031
|
+
};
|
|
9032
|
+
};
|
|
9033
|
+
} & {
|
|
9034
|
+
config: {
|
|
9035
|
+
width: {
|
|
9036
|
+
dynamic: {
|
|
9037
|
+
default: string;
|
|
9038
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9039
|
+
};
|
|
9040
|
+
dynamicScale: true;
|
|
9041
|
+
name: "width";
|
|
9042
|
+
vars: {
|
|
9043
|
+
default: string;
|
|
9044
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9045
|
+
};
|
|
9046
|
+
};
|
|
9047
|
+
height: {
|
|
9048
|
+
dynamic: {
|
|
9049
|
+
default: string;
|
|
9050
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9051
|
+
};
|
|
9052
|
+
dynamicScale: true;
|
|
9053
|
+
name: "height";
|
|
9054
|
+
vars: {
|
|
9055
|
+
default: string;
|
|
9056
|
+
conditions: Record<"xs" | "xl" | "md" | "lg", string>;
|
|
9057
|
+
};
|
|
9058
|
+
};
|
|
9059
|
+
};
|
|
9060
|
+
}
|
|
9061
|
+
]>;
|
|
9062
|
+
};
|
|
8788
9063
|
|
|
8789
9064
|
export {
|
|
8790
9065
|
checkbox$1 as checkbox,
|