@rarui/styles 1.12.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/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$1: {
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$1.chip>;
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$2: {
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$2.iconButton>;
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$3: {
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$3.status>;
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,80 @@ export declare const title: {
8310
8479
  }
8311
8480
  ]>;
8312
8481
  };
8313
- declare const styles$4: {
8482
+ declare const styles$6: {
8483
+ banner: import("@vanilla-extract/recipes").RuntimeFn<{
8484
+ appearance: {
8485
+ brand: {
8486
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8487
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8488
+ };
8489
+ info: {
8490
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8491
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8492
+ };
8493
+ neutral: {
8494
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8495
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8496
+ };
8497
+ inverted: {
8498
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8499
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8500
+ };
8501
+ warning: {
8502
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8503
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8504
+ };
8505
+ error: {
8506
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8507
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8508
+ };
8509
+ };
8510
+ floating: {
8511
+ true: {
8512
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8513
+ };
8514
+ };
8515
+ }>;
8516
+ };
8517
+ export type BannerVariants = RecipeVariants<typeof styles$6.banner>;
8518
+ export declare const banner: {
8519
+ classnames: {
8520
+ banner: import("@vanilla-extract/recipes").RuntimeFn<{
8521
+ appearance: {
8522
+ brand: {
8523
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8524
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8525
+ };
8526
+ info: {
8527
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8528
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8529
+ };
8530
+ neutral: {
8531
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8532
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8533
+ };
8534
+ inverted: {
8535
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8536
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8537
+ };
8538
+ warning: {
8539
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8540
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8541
+ };
8542
+ error: {
8543
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8544
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8545
+ };
8546
+ };
8547
+ floating: {
8548
+ true: {
8549
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8550
+ };
8551
+ };
8552
+ }>;
8553
+ };
8554
+ };
8555
+ declare const styles$7: {
8314
8556
  toast: import("@vanilla-extract/recipes").RuntimeFn<{
8315
8557
  placement: {
8316
8558
  topRight: {};
@@ -8439,7 +8681,7 @@ declare const styles$4: {
8439
8681
  };
8440
8682
  }>;
8441
8683
  };
8442
- export type ToastVariants = RecipeVariants<typeof styles$4.toast>;
8684
+ export type ToastVariants = RecipeVariants<typeof styles$7.toast>;
8443
8685
  export declare const toast: {
8444
8686
  classnames: {
8445
8687
  toast: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8571,7 +8813,7 @@ export declare const toast: {
8571
8813
  }>;
8572
8814
  };
8573
8815
  };
8574
- declare const styles$5: {
8816
+ declare const styles$8: {
8575
8817
  toggle: import("@vanilla-extract/recipes").RuntimeFn<{
8576
8818
  size: {
8577
8819
  large: {
@@ -8640,7 +8882,7 @@ declare const styles$5: {
8640
8882
  };
8641
8883
  }>;
8642
8884
  };
8643
- export type ToggleVariants = RecipeVariants<typeof styles$5.toggle>;
8885
+ export type ToggleVariants = RecipeVariants<typeof styles$8.toggle>;
8644
8886
  export declare const toggle: {
8645
8887
  classnames: {
8646
8888
  toggle: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8712,6 +8954,112 @@ export declare const toggle: {
8712
8954
  }>;
8713
8955
  };
8714
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
+ };
8715
9063
 
8716
9064
  export {
8717
9065
  checkbox$1 as checkbox,