@rarui/styles 1.29.0-rc.1 → 1.29.0-rc.2

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
@@ -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
  };
@@ -7327,7 +7357,7 @@ declare const checkbox$1: {
7327
7357
  overlay: string;
7328
7358
  };
7329
7359
  };
7330
- declare const styles$1: {
7360
+ declare const chipStyles: {
7331
7361
  chip: import("@vanilla-extract/recipes").RuntimeFn<{
7332
7362
  /**
7333
7363
  * Specifies whether the chip will be displayed in the pill shape
@@ -7373,7 +7403,7 @@ declare const paddingProperties: {
7373
7403
  medium: string;
7374
7404
  small: string;
7375
7405
  };
7376
- export type ChipVariants = RecipeVariants<typeof styles$1.chip>;
7406
+ export type ChipVariants = RecipeVariants<typeof chipStyles.chip>;
7377
7407
  export interface ChipSprinkle {
7378
7408
  /**
7379
7409
  * The padding properties are used to generate space around an chip's content area.
@@ -7381,29 +7411,6 @@ export interface ChipSprinkle {
7381
7411
  padding?: AddDollar<keyof typeof paddingProperties> | Conditions<AddDollar<keyof typeof paddingProperties>>;
7382
7412
  }
7383
7413
  export declare const chip: {
7384
- sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
7385
- {
7386
- config: {
7387
- padding: {
7388
- values: {
7389
- medium: {
7390
- default: string;
7391
- conditions: Record<"xs" | "xl" | "md" | "lg", string>;
7392
- };
7393
- small: {
7394
- default: string;
7395
- conditions: Record<"xs" | "xl" | "md" | "lg", string>;
7396
- };
7397
- };
7398
- staticScale: {
7399
- medium: string;
7400
- small: string;
7401
- };
7402
- name: "padding";
7403
- };
7404
- };
7405
- }
7406
- ]>;
7407
7414
  classnames: {
7408
7415
  chip: import("@vanilla-extract/recipes").RuntimeFn<{
7409
7416
  pill: {
@@ -7437,6 +7444,29 @@ export declare const chip: {
7437
7444
  close: string;
7438
7445
  overlay: string;
7439
7446
  };
7447
+ sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
7448
+ {
7449
+ config: {
7450
+ padding: {
7451
+ values: {
7452
+ medium: {
7453
+ default: string;
7454
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
7455
+ };
7456
+ small: {
7457
+ default: string;
7458
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
7459
+ };
7460
+ };
7461
+ staticScale: {
7462
+ medium: string;
7463
+ small: string;
7464
+ };
7465
+ name: "padding";
7466
+ };
7467
+ };
7468
+ }
7469
+ ]>;
7440
7470
  };
7441
7471
  declare const dividerBorderWidthProperties: {
7442
7472
  "1": string;
@@ -7764,7 +7794,7 @@ export declare const icon: {
7764
7794
  }
7765
7795
  ]>;
7766
7796
  };
7767
- declare const styles$2: {
7797
+ declare const iconButtonStyles: {
7768
7798
  iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
7769
7799
  /**
7770
7800
  * Determines the visual style of the icon button, influencing its color scheme and appearance.
@@ -7859,9 +7889,8 @@ declare const styles$2: {
7859
7889
  };
7860
7890
  };
7861
7891
  }>;
7862
- overlay: string;
7863
7892
  };
7864
- export type IconButtonVariants = RecipeVariants<typeof styles$2.iconButton>;
7893
+ export type IconButtonVariants = RecipeVariants<typeof iconButtonStyles.iconButton>;
7865
7894
  export declare const iconButton: {
7866
7895
  classnames: {
7867
7896
  iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -7948,10 +7977,9 @@ export declare const iconButton: {
7948
7977
  };
7949
7978
  };
7950
7979
  }>;
7951
- overlay: string;
7952
7980
  };
7953
7981
  };
7954
- declare const styles$3: {
7982
+ declare const styles$1: {
7955
7983
  container: import("@vanilla-extract/recipes").RuntimeFn<{
7956
7984
  /**
7957
7985
  * Determines the visual style of the input, affecting its border
@@ -7976,6 +8004,9 @@ declare const styles$3: {
7976
8004
  };
7977
8005
  };
7978
8006
  };
8007
+ /**
8008
+ * Determines if the input have borders or not.
8009
+ */
7979
8010
  border: {
7980
8011
  true: {
7981
8012
  borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7984,6 +8015,17 @@ declare const styles$3: {
7984
8015
  borderWidth: number;
7985
8016
  };
7986
8017
  };
8018
+ size: {
8019
+ large: {
8020
+ height: "3rem";
8021
+ };
8022
+ medium: {
8023
+ height: "2.5rem";
8024
+ };
8025
+ small: {
8026
+ height: "2rem";
8027
+ };
8028
+ };
7987
8029
  }>;
7988
8030
  input: import("@vanilla-extract/recipes").RuntimeFn<{
7989
8031
  /**
@@ -7993,24 +8035,21 @@ declare const styles$3: {
7993
8035
  false: {};
7994
8036
  };
7995
8037
  /**
7996
- * Specifies the size of the badge, controlling its dimensions.
8038
+ * Specifies the size of the input, controlling its dimensions.
7997
8039
  */
7998
8040
  size: {
7999
8041
  large: {
8000
- height: "3rem";
8001
8042
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8002
8043
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8003
8044
  };
8004
8045
  medium: {
8005
- height: "2.75rem";
8006
8046
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8007
8047
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8008
8048
  };
8009
8049
  small: {
8010
- height: "2rem";
8011
8050
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8012
8051
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
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})`;
8052
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8014
8053
  };
8015
8054
  };
8016
8055
  }>;
@@ -8047,16 +8086,18 @@ declare const styles$3: {
8047
8086
  };
8048
8087
  size: {
8049
8088
  large: {
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})`;
8089
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8051
8090
  };
8052
8091
  medium: {
8053
- 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})`;
8054
8096
  };
8055
- small: {};
8056
8097
  };
8057
8098
  }>;
8058
8099
  };
8059
- export type InputVariants = RecipeVariants<typeof styles$3.container> & RecipeVariants<typeof styles$3.input>;
8100
+ export type InputVariants = RecipeVariants<typeof styles$1.container> & RecipeVariants<typeof styles$1.input>;
8060
8101
  export declare const input: {
8061
8102
  classnames: {
8062
8103
  container: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8088,6 +8129,17 @@ export declare const input: {
8088
8129
  borderWidth: number;
8089
8130
  };
8090
8131
  };
8132
+ size: {
8133
+ large: {
8134
+ height: "3rem";
8135
+ };
8136
+ medium: {
8137
+ height: "2.5rem";
8138
+ };
8139
+ small: {
8140
+ height: "2rem";
8141
+ };
8142
+ };
8091
8143
  }>;
8092
8144
  input: import("@vanilla-extract/recipes").RuntimeFn<{
8093
8145
  divider: {
@@ -8095,20 +8147,17 @@ export declare const input: {
8095
8147
  };
8096
8148
  size: {
8097
8149
  large: {
8098
- height: "3rem";
8099
8150
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8100
8151
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8101
8152
  };
8102
8153
  medium: {
8103
- height: "2.75rem";
8104
8154
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8105
8155
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8106
8156
  };
8107
8157
  small: {
8108
- height: "2rem";
8109
8158
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8110
8159
  lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
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})`;
8160
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8112
8161
  };
8113
8162
  };
8114
8163
  }>;
@@ -8145,17 +8194,19 @@ export declare const input: {
8145
8194
  };
8146
8195
  size: {
8147
8196
  large: {
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})`;
8197
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
8149
8198
  };
8150
8199
  medium: {
8151
- 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})`;
8152
8204
  };
8153
- small: {};
8154
8205
  };
8155
8206
  }>;
8156
8207
  };
8157
8208
  };
8158
- declare const styles$4: {
8209
+ declare const styles$2: {
8159
8210
  label: import("@vanilla-extract/recipes").RuntimeFn<{
8160
8211
  /**
8161
8212
  * Specifies whether the label is hidden or not
@@ -8174,7 +8225,7 @@ declare const styles$4: {
8174
8225
  };
8175
8226
  }>;
8176
8227
  };
8177
- export type LabelVariants = RecipeVariants<typeof styles$4.label>;
8228
+ export type LabelVariants = RecipeVariants<typeof styles$2.label>;
8178
8229
  export declare const label: {
8179
8230
  classnames: {
8180
8231
  label: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8193,7 +8244,7 @@ export declare const label: {
8193
8244
  }>;
8194
8245
  };
8195
8246
  };
8196
- declare const styles$5: {
8247
+ declare const styles$3: {
8197
8248
  link: import("@vanilla-extract/recipes").RuntimeFn<{
8198
8249
  /**
8199
8250
  * Determines the visual style of the link.
@@ -8231,7 +8282,7 @@ declare const styles$5: {
8231
8282
  };
8232
8283
  }>;
8233
8284
  };
8234
- export type LinkVariants = RecipeVariants<typeof styles$5.link>;
8285
+ export type LinkVariants = RecipeVariants<typeof styles$3.link>;
8235
8286
  export declare const link: {
8236
8287
  classnames: {
8237
8288
  link: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8358,7 +8409,7 @@ export declare const progress: {
8358
8409
  }
8359
8410
  ]>;
8360
8411
  };
8361
- declare const styles$6: {
8412
+ declare const styles$4: {
8362
8413
  radioButton: import("@vanilla-extract/recipes").RuntimeFn<{
8363
8414
  /**
8364
8415
  * Specifies the size of the radiobutton
@@ -8422,7 +8473,7 @@ declare const styles$6: {
8422
8473
  input: string;
8423
8474
  container: string;
8424
8475
  };
8425
- export type RadioButtonVariants = RecipeVariants<typeof styles$6.radioButton>;
8476
+ export type RadioButtonVariants = RecipeVariants<typeof styles$4.radioButton>;
8426
8477
  export declare const radioButton: {
8427
8478
  classnames: {
8428
8479
  radioButton: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8642,8 +8693,11 @@ declare const selectStyles: {
8642
8693
  };
8643
8694
  };
8644
8695
  }>;
8696
+ list: string;
8697
+ close: string;
8645
8698
  };
8646
8699
  export type SelectVariants = NonNullable<RecipeVariants<typeof selectStyles.select>>;
8700
+ export type SelectSprinkle = Pick<StandardLonghandProperties, "maxHeight">;
8647
8701
  export declare const select: {
8648
8702
  classnames: {
8649
8703
  select: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8680,9 +8734,29 @@ export declare const select: {
8680
8734
  };
8681
8735
  };
8682
8736
  }>;
8737
+ list: string;
8738
+ close: string;
8683
8739
  };
8740
+ sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
8741
+ {
8742
+ config: {
8743
+ maxHeight: {
8744
+ dynamic: {
8745
+ default: string;
8746
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
8747
+ };
8748
+ dynamicScale: true;
8749
+ name: "maxHeight";
8750
+ vars: {
8751
+ default: string;
8752
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
8753
+ };
8754
+ };
8755
+ };
8756
+ }
8757
+ ]>;
8684
8758
  };
8685
- declare const styles$7: {
8759
+ declare const styles$5: {
8686
8760
  status: import("@vanilla-extract/recipes").RuntimeFn<{
8687
8761
  /**
8688
8762
  * Determines the visual style of the status, influencing its color scheme.
@@ -8747,7 +8821,7 @@ declare const styles$7: {
8747
8821
  };
8748
8822
  }>;
8749
8823
  };
8750
- export type StatusVariants = RecipeVariants<typeof styles$7.status>;
8824
+ export type StatusVariants = RecipeVariants<typeof styles$5.status>;
8751
8825
  declare const status$1: {
8752
8826
  classnames: {
8753
8827
  status: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9468,7 +9542,7 @@ export declare const banner: {
9468
9542
  }>;
9469
9543
  };
9470
9544
  };
9471
- declare const styles$8: {
9545
+ declare const styles$6: {
9472
9546
  toast: import("@vanilla-extract/recipes").RuntimeFn<{
9473
9547
  /**
9474
9548
  * Where the toast is located
@@ -9609,7 +9683,7 @@ declare const styles$8: {
9609
9683
  };
9610
9684
  }>;
9611
9685
  };
9612
- export type ToastVariants = RecipeVariants<typeof styles$8.toast>;
9686
+ export type ToastVariants = RecipeVariants<typeof styles$6.toast>;
9613
9687
  export declare const toast: {
9614
9688
  classnames: {
9615
9689
  toast: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9741,7 +9815,7 @@ export declare const toast: {
9741
9815
  }>;
9742
9816
  };
9743
9817
  };
9744
- declare const styles$9: {
9818
+ declare const styles$7: {
9745
9819
  toggle: import("@vanilla-extract/recipes").RuntimeFn<{
9746
9820
  /**
9747
9821
  * Specifies the size of the toggle, controlling its dimensions.
@@ -9816,7 +9890,7 @@ declare const styles$9: {
9816
9890
  };
9817
9891
  }>;
9818
9892
  };
9819
- export type ToggleVariants = RecipeVariants<typeof styles$9.toggle>;
9893
+ export type ToggleVariants = RecipeVariants<typeof styles$7.toggle>;
9820
9894
  export declare const toggle: {
9821
9895
  classnames: {
9822
9896
  toggle: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9888,7 +9962,7 @@ export declare const toggle: {
9888
9962
  }>;
9889
9963
  };
9890
9964
  };
9891
- declare const styles$10: {
9965
+ declare const styles$8: {
9892
9966
  tooltip: import("@vanilla-extract/recipes").RuntimeFn<{
9893
9967
  /**
9894
9968
  * Specifies whether the color scheme should be inverted
@@ -9927,7 +10001,7 @@ declare const styles$10: {
9927
10001
  }>;
9928
10002
  container: string;
9929
10003
  };
9930
- export type TooltipVariants = RecipeVariants<typeof styles$10.tooltip>;
10004
+ export type TooltipVariants = RecipeVariants<typeof styles$8.tooltip>;
9931
10005
  export declare const tooltip: {
9932
10006
  classnames: {
9933
10007
  tooltip: import("@vanilla-extract/recipes").RuntimeFn<{