@rarui/styles 1.30.1 → 1.30.3

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 +16 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +48 -56
  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
@@ -7141,18 +7141,13 @@ declare const styles: {
7141
7141
  */
7142
7142
  variant: {
7143
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
7144
  selectors: {
7154
7145
  "&:hover:after": {
7155
- opacity: number;
7146
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7147
+ };
7148
+ "&:active:after": {
7149
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7150
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7156
7151
  };
7157
7152
  };
7158
7153
  };
@@ -7233,18 +7228,13 @@ export declare const button: {
7233
7228
  };
7234
7229
  variant: {
7235
7230
  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
7231
  selectors: {
7246
7232
  "&:hover:after": {
7247
- opacity: number;
7233
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7234
+ };
7235
+ "&:active:after": {
7236
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7237
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7248
7238
  };
7249
7239
  };
7250
7240
  };
@@ -7914,34 +7904,32 @@ declare const iconButtonStyles: {
7914
7904
  /**
7915
7905
  * Defines the visual variant of the icon button, affecting its background style, border and text.
7916
7906
  */
7917
- solid: {};
7907
+ solid: {
7908
+ selectors: {
7909
+ "&:hover:after": {
7910
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7911
+ };
7912
+ "&:active:after": {
7913
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7914
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7915
+ };
7916
+ };
7917
+ };
7918
7918
  outlined: {
7919
7919
  backgroundColor: "transparent";
7920
7920
  };
7921
7921
  ghost: {
7922
7922
  backgroundColor: "transparent";
7923
7923
  borderColor: "transparent";
7924
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7925
- ":hover": {
7926
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7927
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7928
- };
7929
- ":active": {
7930
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7931
- };
7932
7924
  };
7933
7925
  tonal: {
7934
- border: "none";
7935
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7926
+ borderColor: "transparent";
7936
7927
  };
7937
7928
  };
7938
7929
  rounded: {
7939
7930
  true: {
7940
7931
  borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7941
- ":hover": {
7942
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7943
- };
7944
- ":active": {
7932
+ ":after": {
7945
7933
  borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7946
7934
  };
7947
7935
  };
@@ -8002,34 +7990,32 @@ export declare const iconButton: {
8002
7990
  };
8003
7991
  };
8004
7992
  variant: {
8005
- solid: {};
7993
+ solid: {
7994
+ selectors: {
7995
+ "&:hover:after": {
7996
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7997
+ };
7998
+ "&:active:after": {
7999
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8000
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8001
+ };
8002
+ };
8003
+ };
8006
8004
  outlined: {
8007
8005
  backgroundColor: "transparent";
8008
8006
  };
8009
8007
  ghost: {
8010
8008
  backgroundColor: "transparent";
8011
8009
  borderColor: "transparent";
8012
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8013
- ":hover": {
8014
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8015
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8016
- };
8017
- ":active": {
8018
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8019
- };
8020
8010
  };
8021
8011
  tonal: {
8022
- border: "none";
8023
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8012
+ borderColor: "transparent";
8024
8013
  };
8025
8014
  };
8026
8015
  rounded: {
8027
8016
  true: {
8028
8017
  borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8029
- ":hover": {
8030
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8031
- };
8032
- ":active": {
8018
+ ":after": {
8033
8019
  borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8034
8020
  };
8035
8021
  };
@@ -9739,12 +9725,14 @@ declare const styles$6: {
9739
9725
  size: {
9740
9726
  small: {
9741
9727
  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})`;
9728
+ gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9742
9729
  };
9743
9730
  medium: {
9744
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9731
+ 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})`;
9745
9732
  };
9746
9733
  large: {
9747
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9734
+ 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})`;
9735
+ gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9748
9736
  };
9749
9737
  };
9750
9738
  /**
@@ -9794,6 +9782,7 @@ declare const styles$6: {
9794
9782
  };
9795
9783
  }>;
9796
9784
  content: string;
9785
+ iconContainer: string;
9797
9786
  toastContainer: import("@vanilla-extract/recipes").RuntimeFn<{
9798
9787
  position: {
9799
9788
  bottomRight: {
@@ -9873,12 +9862,14 @@ export declare const toast: {
9873
9862
  size: {
9874
9863
  small: {
9875
9864
  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})`;
9865
+ gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9876
9866
  };
9877
9867
  medium: {
9878
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9868
+ 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})`;
9879
9869
  };
9880
9870
  large: {
9881
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9871
+ 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})`;
9872
+ gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9882
9873
  };
9883
9874
  };
9884
9875
  variant: {
@@ -9925,6 +9916,7 @@ export declare const toast: {
9925
9916
  };
9926
9917
  }>;
9927
9918
  content: string;
9919
+ iconContainer: string;
9928
9920
  toastContainer: import("@vanilla-extract/recipes").RuntimeFn<{
9929
9921
  position: {
9930
9922
  bottomRight: {
@@ -10656,7 +10648,7 @@ declare const modalStyles: {
10656
10648
  */
10657
10649
  padding: {
10658
10650
  base: {
10659
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10651
+ 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})`;
10660
10652
  };
10661
10653
  none: {
10662
10654
  padding: number;
@@ -10678,7 +10670,7 @@ export declare const modal: {
10678
10670
  modal: import("@vanilla-extract/recipes").RuntimeFn<{
10679
10671
  padding: {
10680
10672
  base: {
10681
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10673
+ 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})`;
10682
10674
  };
10683
10675
  none: {
10684
10676
  padding: number;