@rehagro/ui 1.0.32 → 1.0.34

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 (10) hide show
  1. package/dist/index.d.mts +9 -0
  2. package/dist/index.d.ts +9 -0
  3. package/dist/index.js +58 -23
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +58 -23
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/native.js.map +1 -1
  8. package/dist/native.mjs.map +1 -1
  9. package/dist/styles.css +3 -3
  10. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -91,6 +91,15 @@ type RehagroTheme = {
91
91
  successHover?: string;
92
92
  info?: string;
93
93
  infoHover?: string;
94
+ /** Subtle background for outline/ghost hover.
95
+ * Accepts any CSS color value (hex, rgb, named).
96
+ * When omitted, derived automatically via color-mix from the base color. */
97
+ primarySubtle?: string;
98
+ secondarySubtle?: string;
99
+ dangerSubtle?: string;
100
+ warningSubtle?: string;
101
+ successSubtle?: string;
102
+ infoSubtle?: string;
94
103
  /** Semantic colors */
95
104
  text?: string;
96
105
  textMuted?: string;
package/dist/index.d.ts CHANGED
@@ -91,6 +91,15 @@ type RehagroTheme = {
91
91
  successHover?: string;
92
92
  info?: string;
93
93
  infoHover?: string;
94
+ /** Subtle background for outline/ghost hover.
95
+ * Accepts any CSS color value (hex, rgb, named).
96
+ * When omitted, derived automatically via color-mix from the base color. */
97
+ primarySubtle?: string;
98
+ secondarySubtle?: string;
99
+ dangerSubtle?: string;
100
+ warningSubtle?: string;
101
+ successSubtle?: string;
102
+ infoSubtle?: string;
94
103
  /** Semantic colors */
95
104
  text?: string;
96
105
  textMuted?: string;
package/dist/index.js CHANGED
@@ -24,6 +24,12 @@ var TOKEN_MAP = {
24
24
  successHover: { var: "--rh-success-hover", isColor: true },
25
25
  info: { var: "--rh-info", isColor: true },
26
26
  infoHover: { var: "--rh-info-hover", isColor: true },
27
+ primarySubtle: { var: "--rh-primary-subtle", isColor: true, raw: true },
28
+ secondarySubtle: { var: "--rh-secondary-subtle", isColor: true, raw: true },
29
+ dangerSubtle: { var: "--rh-danger-subtle", isColor: true, raw: true },
30
+ warningSubtle: { var: "--rh-warning-subtle", isColor: true, raw: true },
31
+ successSubtle: { var: "--rh-success-subtle", isColor: true, raw: true },
32
+ infoSubtle: { var: "--rh-info-subtle", isColor: true, raw: true },
27
33
  text: { var: "--rh-text", isColor: true },
28
34
  textMuted: { var: "--rh-text-muted", isColor: true },
29
35
  surface: { var: "--rh-surface", isColor: true },
@@ -699,7 +705,9 @@ function RehagroProvider({ theme, toastPosition, children }) {
699
705
  for (const [key, config] of Object.entries(TOKEN_MAP)) {
700
706
  const value = theme[key];
701
707
  if (!value) continue;
702
- if (config.isColor) {
708
+ if (config.raw) {
709
+ vars[config.var] = value;
710
+ } else if (config.isColor) {
703
711
  const triplet = toRgbTriplet(value);
704
712
  if (triplet) vars[config.var] = triplet;
705
713
  } else {
@@ -739,30 +747,56 @@ var PRESET_COLORS = /* @__PURE__ */ new Set([
739
747
  "info"
740
748
  ]);
741
749
  var isPresetColor = (c) => PRESET_COLORS.has(c);
742
- var variantColorClasses = {
750
+ var variantBaseClasses = {
743
751
  solid: {
744
- primary: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
745
- secondary: "rh-bg-secondary rh-text-surface rh-border-secondary hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
746
- danger: "rh-bg-danger rh-text-surface rh-border-danger hover:rh-bg-danger-hover hover:rh-border-danger-hover",
747
- warning: "rh-bg-warning rh-text-surface rh-border-warning hover:rh-bg-warning-hover hover:rh-border-warning-hover",
748
- success: "rh-bg-success rh-text-surface rh-border-success hover:rh-bg-success-hover hover:rh-border-success-hover",
749
- info: "rh-bg-info rh-text-surface rh-border-info hover:rh-bg-info-hover hover:rh-border-info-hover"
752
+ primary: "rh-bg-primary rh-text-surface rh-border-primary",
753
+ secondary: "rh-bg-secondary rh-text-surface rh-border-secondary",
754
+ danger: "rh-bg-danger rh-text-surface rh-border-danger",
755
+ warning: "rh-bg-warning rh-text-surface rh-border-warning",
756
+ success: "rh-bg-success rh-text-surface rh-border-success",
757
+ info: "rh-bg-info rh-text-surface rh-border-info"
750
758
  },
751
759
  outline: {
752
- primary: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary/[0.16]",
753
- secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary/[0.16]",
754
- danger: "rh-bg-transparent rh-text-danger rh-border-danger hover:rh-bg-danger/[0.16]",
755
- warning: "rh-bg-transparent rh-text-warning rh-border-warning hover:rh-bg-warning/[0.16]",
756
- success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success/[0.16]",
757
- info: "rh-bg-transparent rh-text-info rh-border-info hover:rh-bg-info/[0.16]"
760
+ primary: "rh-bg-transparent rh-text-primary rh-border-primary",
761
+ secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary",
762
+ danger: "rh-bg-transparent rh-text-danger rh-border-danger",
763
+ warning: "rh-bg-transparent rh-text-warning rh-border-warning",
764
+ success: "rh-bg-transparent rh-text-success rh-border-success",
765
+ info: "rh-bg-transparent rh-text-info rh-border-info"
758
766
  },
759
767
  ghost: {
760
- primary: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10",
761
- secondary: "rh-bg-transparent rh-text-secondary rh-border-transparent hover:rh-bg-secondary/10",
762
- danger: "rh-bg-transparent rh-text-danger rh-border-transparent hover:rh-bg-danger/10",
763
- warning: "rh-bg-transparent rh-text-warning rh-border-transparent hover:rh-bg-warning/10",
764
- success: "rh-bg-transparent rh-text-success rh-border-transparent hover:rh-bg-success/10",
765
- info: "rh-bg-transparent rh-text-info rh-border-transparent hover:rh-bg-info/10"
768
+ primary: "rh-bg-transparent rh-text-primary rh-border-transparent",
769
+ secondary: "rh-bg-transparent rh-text-secondary rh-border-transparent",
770
+ danger: "rh-bg-transparent rh-text-danger rh-border-transparent",
771
+ warning: "rh-bg-transparent rh-text-warning rh-border-transparent",
772
+ success: "rh-bg-transparent rh-text-success rh-border-transparent",
773
+ info: "rh-bg-transparent rh-text-info rh-border-transparent"
774
+ }
775
+ };
776
+ var variantHoverClasses = {
777
+ solid: {
778
+ primary: "hover:rh-bg-primary-hover hover:rh-border-primary-hover",
779
+ secondary: "hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
780
+ danger: "hover:rh-bg-danger-hover hover:rh-border-danger-hover",
781
+ warning: "hover:rh-bg-warning-hover hover:rh-border-warning-hover",
782
+ success: "hover:rh-bg-success-hover hover:rh-border-success-hover",
783
+ info: "hover:rh-bg-info-hover hover:rh-border-info-hover"
784
+ },
785
+ outline: {
786
+ primary: "hover:rh-bg-primary-subtle",
787
+ secondary: "hover:rh-bg-secondary-subtle",
788
+ danger: "hover:rh-bg-danger-subtle",
789
+ warning: "hover:rh-bg-warning-subtle",
790
+ success: "hover:rh-bg-success-subtle",
791
+ info: "hover:rh-bg-info-subtle"
792
+ },
793
+ ghost: {
794
+ primary: "hover:rh-bg-primary/10",
795
+ secondary: "hover:rh-bg-secondary/10",
796
+ danger: "hover:rh-bg-danger/10",
797
+ warning: "hover:rh-bg-warning/10",
798
+ success: "hover:rh-bg-success/10",
799
+ info: "hover:rh-bg-info/10"
766
800
  }
767
801
  };
768
802
  function getArbitraryColorStyle(variant, color) {
@@ -826,7 +860,8 @@ var Button = React9.forwardRef(function Button2({
826
860
  "rh-border rh-font-display rh-font-medium",
827
861
  "rh-transition-colors rh-duration-150",
828
862
  "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
829
- preset && !hasCustomHover ? variantColorClasses[variant][color] : "",
863
+ preset ? variantBaseClasses[variant][color] : "",
864
+ preset && !hasCustomHover ? variantHoverClasses[variant][color] : "",
830
865
  !preset && !hasCustomHover ? "hover:rh-brightness-90" : "",
831
866
  hasCustomHover ? "btn-custom-hover" : "",
832
867
  sizeClasses[size],
@@ -883,7 +918,7 @@ var PRESET_COLORS2 = /* @__PURE__ */ new Set([
883
918
  "info"
884
919
  ]);
885
920
  var isPresetColor2 = (c) => PRESET_COLORS2.has(c);
886
- var variantColorClasses2 = {
921
+ var variantColorClasses = {
887
922
  solid: {
888
923
  primary: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
889
924
  secondary: "rh-bg-secondary rh-text-surface rh-border-secondary hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
@@ -959,7 +994,7 @@ var IconButton = React9.forwardRef(function IconButton2({
959
994
  "rh-border rh-font-display",
960
995
  "rh-transition-colors rh-duration-150",
961
996
  "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
962
- preset ? variantColorClasses2[variant][color] : "hover:rh-brightness-90",
997
+ preset ? variantColorClasses[variant][color] : "hover:rh-brightness-90",
963
998
  sizeClasses2[size],
964
999
  radiusClasses2[radius],
965
1000
  isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",