@rarui/styles 1.27.0 → 1.28.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +28 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +169 -21
  4. package/dist/index.js +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -7140,7 +7140,22 @@ 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: {};
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
+ };
7144
7159
  outlined: {
7145
7160
  backgroundColor: "transparent";
7146
7161
  };
@@ -7217,7 +7232,22 @@ export declare const button: {
7217
7232
  };
7218
7233
  };
7219
7234
  variant: {
7220
- solid: {};
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
+ };
7221
7251
  outlined: {
7222
7252
  backgroundColor: "transparent";
7223
7253
  };
@@ -7366,6 +7396,7 @@ declare const styles$1: {
7366
7396
  };
7367
7397
  };
7368
7398
  }>;
7399
+ close: string;
7369
7400
  overlay: string;
7370
7401
  };
7371
7402
  declare const paddingProperties: {
@@ -7433,6 +7464,7 @@ export declare const chip: {
7433
7464
  };
7434
7465
  };
7435
7466
  }>;
7467
+ close: string;
7436
7468
  overlay: string;
7437
7469
  };
7438
7470
  };
@@ -7857,7 +7889,6 @@ declare const styles$2: {
7857
7889
  };
7858
7890
  };
7859
7891
  }>;
7860
- overlay: string;
7861
7892
  };
7862
7893
  export type IconButtonVariants = RecipeVariants<typeof styles$2.iconButton>;
7863
7894
  export declare const iconButton: {
@@ -7946,7 +7977,6 @@ export declare const iconButton: {
7946
7977
  };
7947
7978
  };
7948
7979
  }>;
7949
- overlay: string;
7950
7980
  };
7951
7981
  };
7952
7982
  declare const styles$3: {
@@ -7974,6 +8004,28 @@ declare const styles$3: {
7974
8004
  };
7975
8005
  };
7976
8006
  };
8007
+ /**
8008
+ * Determines if the input have borders or not.
8009
+ */
8010
+ border: {
8011
+ true: {
8012
+ borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8013
+ };
8014
+ false: {
8015
+ borderWidth: number;
8016
+ };
8017
+ };
8018
+ size: {
8019
+ large: {
8020
+ height: "3rem";
8021
+ };
8022
+ medium: {
8023
+ height: "2.5rem";
8024
+ };
8025
+ small: {
8026
+ height: "2rem";
8027
+ };
8028
+ };
7977
8029
  }>;
7978
8030
  input: import("@vanilla-extract/recipes").RuntimeFn<{
7979
8031
  /**
@@ -7983,24 +8035,21 @@ declare const styles$3: {
7983
8035
  false: {};
7984
8036
  };
7985
8037
  /**
7986
- * Specifies the size of the badge, controlling its dimensions.
8038
+ * Specifies the size of the input, controlling its dimensions.
7987
8039
  */
7988
8040
  size: {
7989
8041
  large: {
7990
- height: "3rem";
7991
8042
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7992
8043
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7993
8044
  };
7994
8045
  medium: {
7995
- height: "2.75rem";
7996
8046
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7997
8047
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7998
8048
  };
7999
8049
  small: {
8000
- height: "2rem";
8001
8050
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8002
8051
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8003
- 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})`;
8052
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8004
8053
  };
8005
8054
  };
8006
8055
  }>;
@@ -8037,12 +8086,14 @@ declare const styles$3: {
8037
8086
  };
8038
8087
  size: {
8039
8088
  large: {
8040
- 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})`;
8089
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8041
8090
  };
8042
8091
  medium: {
8043
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8092
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8093
+ };
8094
+ small: {
8095
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8044
8096
  };
8045
- small: {};
8046
8097
  };
8047
8098
  }>;
8048
8099
  };
@@ -8070,6 +8121,25 @@ export declare const input: {
8070
8121
  };
8071
8122
  };
8072
8123
  };
8124
+ border: {
8125
+ true: {
8126
+ borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8127
+ };
8128
+ false: {
8129
+ borderWidth: number;
8130
+ };
8131
+ };
8132
+ size: {
8133
+ large: {
8134
+ height: "3rem";
8135
+ };
8136
+ medium: {
8137
+ height: "2.5rem";
8138
+ };
8139
+ small: {
8140
+ height: "2rem";
8141
+ };
8142
+ };
8073
8143
  }>;
8074
8144
  input: import("@vanilla-extract/recipes").RuntimeFn<{
8075
8145
  divider: {
@@ -8077,20 +8147,17 @@ export declare const input: {
8077
8147
  };
8078
8148
  size: {
8079
8149
  large: {
8080
- height: "3rem";
8081
8150
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8082
8151
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8083
8152
  };
8084
8153
  medium: {
8085
- height: "2.75rem";
8086
8154
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8087
8155
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8088
8156
  };
8089
8157
  small: {
8090
- height: "2rem";
8091
8158
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8092
8159
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8093
- 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})`;
8160
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8094
8161
  };
8095
8162
  };
8096
8163
  }>;
@@ -8127,12 +8194,14 @@ export declare const input: {
8127
8194
  };
8128
8195
  size: {
8129
8196
  large: {
8130
- 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})`;
8197
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8131
8198
  };
8132
8199
  medium: {
8133
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8200
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8201
+ };
8202
+ small: {
8203
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8134
8204
  };
8135
- small: {};
8136
8205
  };
8137
8206
  }>;
8138
8207
  };
@@ -8583,6 +8652,87 @@ export declare const skeleton: {
8583
8652
  }
8584
8653
  ]>;
8585
8654
  };
8655
+ declare const selectStyles: {
8656
+ select: import("@vanilla-extract/recipes").RuntimeFn<{
8657
+ /**
8658
+ * Determines the visual style of the input, affecting its border
8659
+ */
8660
+ appearance: {
8661
+ success: {
8662
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8663
+ ":hover": {
8664
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8665
+ };
8666
+ ":focus": {
8667
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8668
+ };
8669
+ };
8670
+ error: {
8671
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8672
+ ":hover": {
8673
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8674
+ };
8675
+ ":focus": {
8676
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8677
+ };
8678
+ };
8679
+ };
8680
+ /**
8681
+ * Specifies the size of the badge, controlling its dimensions.
8682
+ */
8683
+ size: {
8684
+ large: {
8685
+ minHeight: "3rem";
8686
+ };
8687
+ medium: {
8688
+ minHeight: "2.75rem";
8689
+ };
8690
+ small: {
8691
+ minHeight: "2rem";
8692
+ 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})`;
8693
+ };
8694
+ };
8695
+ }>;
8696
+ };
8697
+ export type SelectVariants = NonNullable<RecipeVariants<typeof selectStyles.select>>;
8698
+ export declare const select: {
8699
+ classnames: {
8700
+ select: import("@vanilla-extract/recipes").RuntimeFn<{
8701
+ appearance: {
8702
+ success: {
8703
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8704
+ ":hover": {
8705
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8706
+ };
8707
+ ":focus": {
8708
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8709
+ };
8710
+ };
8711
+ error: {
8712
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8713
+ ":hover": {
8714
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8715
+ };
8716
+ ":focus": {
8717
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8718
+ };
8719
+ };
8720
+ };
8721
+ size: {
8722
+ large: {
8723
+ minHeight: "3rem";
8724
+ };
8725
+ medium: {
8726
+ minHeight: "2.75rem";
8727
+ };
8728
+ small: {
8729
+ minHeight: "2rem";
8730
+ 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})`;
8731
+ };
8732
+ };
8733
+ }>;
8734
+ };
8735
+ };
8586
8736
  declare const styles$7: {
8587
8737
  status: import("@vanilla-extract/recipes").RuntimeFn<{
8588
8738
  /**
@@ -9998,7 +10148,6 @@ declare const dropdownStyles: {
9998
10148
  };
9999
10149
  }>;
10000
10150
  dropdownItem: string;
10001
- container: string;
10002
10151
  };
10003
10152
  export type DropdownVariants = RecipeVariants<typeof dropdownStyles.dropdown>;
10004
10153
  export type DropdownSprinkle = Pick<StandardLonghandProperties, "width" | "maxWidth">;
@@ -10015,7 +10164,6 @@ export declare const dropdown: {
10015
10164
  };
10016
10165
  }>;
10017
10166
  dropdownItem: string;
10018
- container: string;
10019
10167
  };
10020
10168
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
10021
10169
  {