@rehagro/ui 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -16,6 +16,8 @@ var TOKEN_MAP = {
   warningHover: { var: "--rh-warning-hover", isColor: true },
   success: { var: "--rh-success", isColor: true },
   successHover: { var: "--rh-success-hover", isColor: true },
+  info: { var: "--rh-info", isColor: true },
+  infoHover: { var: "--rh-info-hover", isColor: true },
   text: { var: "--rh-text", isColor: true },
   textMuted: { var: "--rh-text-muted", isColor: true },
   surface: { var: "--rh-surface", isColor: true },
@@ -631,29 +633,46 @@ function toRgbTriplet2(value) {
   if (parts.length === 3 && parts.every((p) => !Number.isNaN(Number(p)))) return value.trim();
   return void 0;
 }
+var PRESET_COLORS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor = (c) => PRESET_COLORS.has(c);
 var variantColorClasses = {
   solid: {
     primary: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
     secondary: "rh-bg-secondary rh-text-surface rh-border-secondary hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
     danger: "rh-bg-danger rh-text-surface rh-border-danger hover:rh-bg-danger-hover hover:rh-border-danger-hover",
     warning: "rh-bg-warning rh-text-surface rh-border-warning hover:rh-bg-warning-hover hover:rh-border-warning-hover",
-    success: "rh-bg-success rh-text-surface rh-border-success hover:rh-bg-success-hover hover:rh-border-success-hover"
+    success: "rh-bg-success rh-text-surface rh-border-success hover:rh-bg-success-hover hover:rh-border-success-hover",
+    info: "rh-bg-info rh-text-surface rh-border-info hover:rh-bg-info-hover hover:rh-border-info-hover"
   },
   outline: {
     primary: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary hover:rh-text-surface",
     secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary hover:rh-text-surface",
     danger: "rh-bg-transparent rh-text-danger rh-border-danger hover:rh-bg-danger hover:rh-text-surface",
     warning: "rh-bg-transparent rh-text-warning rh-border-warning hover:rh-bg-warning hover:rh-text-surface",
-    success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success hover:rh-text-surface"
+    success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success hover:rh-text-surface",
+    info: "rh-bg-transparent rh-text-info rh-border-info hover:rh-bg-info hover:rh-text-surface"
   },
   ghost: {
     primary: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10",
     secondary: "rh-bg-transparent rh-text-secondary rh-border-transparent hover:rh-bg-secondary/10",
     danger: "rh-bg-transparent rh-text-danger rh-border-transparent hover:rh-bg-danger/10",
     warning: "rh-bg-transparent rh-text-warning rh-border-transparent hover:rh-bg-warning/10",
-    success: "rh-bg-transparent rh-text-success rh-border-transparent hover:rh-bg-success/10"
+    success: "rh-bg-transparent rh-text-success rh-border-transparent hover:rh-bg-success/10",
+    info: "rh-bg-transparent rh-text-info rh-border-transparent hover:rh-bg-info/10"
   }
 };
+function getArbitraryColorStyle(variant, color) {
+  if (variant === "solid") return { backgroundColor: color, borderColor: color, color: "#fff" };
+  if (variant === "outline") return { borderColor: color, color };
+  return { color, borderColor: "transparent" };
+}
 var sizeClasses = {
   sm: "rh-text-sm rh-px-3 rh-py-1.5",
   md: "rh-text-sm rh-px-4 rh-py-2",
@@ -685,24 +704,28 @@ var Button = forwardRef(function Button2({
   ...rest
 }, ref) {
   const isDisabled = React8.useMemo(() => disabled || loading, [disabled, loading]);
-  const hoverStyle = React8.useMemo(() => {
-    if (!hoverColor) return style;
-    const triplet = toRgbTriplet2(hoverColor);
-    return { ...style, [`--rh-${color}-hover`]: triplet ?? hoverColor };
-  }, [hoverColor, color, style]);
+  const preset = isPresetColor(color);
+  const computedStyle = React8.useMemo(() => {
+    if (preset) {
+      if (!hoverColor) return style ?? {};
+      const triplet = toRgbTriplet2(hoverColor);
+      return { ...style, [`--rh-${color}-hover`]: triplet ?? hoverColor };
+    }
+    return { ...style, ...getArbitraryColorStyle(variant, color) };
+  }, [preset, color, variant, hoverColor, style]);
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
       disabled: isDisabled,
       "aria-busy": loading || void 0,
-      style: hoverStyle,
+      style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center rh-gap-2",
         "rh-border rh-font-sans rh-font-medium",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
-        variantColorClasses[variant][color],
+        preset ? variantColorClasses[variant][color] : "hover:rh-brightness-90",
         sizeClasses[size],
         radiusClasses[radius],
         isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -748,29 +771,46 @@ var Button = forwardRef(function Button2({
     }
   );
 });
+var PRESET_COLORS2 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor2 = (c) => PRESET_COLORS2.has(c);
 var variantColorClasses2 = {
   solid: {
     primary: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
+    secondary: "rh-bg-secondary rh-text-surface rh-border-secondary hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
     danger: "rh-bg-danger rh-text-surface rh-border-danger hover:rh-bg-danger-hover hover:rh-border-danger-hover",
     warning: "rh-bg-warning rh-text-surface rh-border-warning hover:rh-bg-warning-hover hover:rh-border-warning-hover",
     success: "rh-bg-success rh-text-surface rh-border-success hover:rh-bg-success-hover hover:rh-border-success-hover",
-    secondary: "rh-bg-secondary rh-text-surface rh-border-secondary hover:rh-bg-secondary-hover hover:rh-border-secondary-hover"
+    info: "rh-bg-info rh-text-surface rh-border-info hover:rh-bg-info-hover hover:rh-border-info-hover"
   },
   outline: {
     primary: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary hover:rh-text-surface",
+    secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary hover:rh-text-surface",
     danger: "rh-bg-transparent rh-text-danger rh-border-danger hover:rh-bg-danger hover:rh-text-surface",
     warning: "rh-bg-transparent rh-text-warning rh-border-warning hover:rh-bg-warning hover:rh-text-surface",
     success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success hover:rh-text-surface",
-    secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary hover:rh-text-surface"
+    info: "rh-bg-transparent rh-text-info rh-border-info hover:rh-bg-info hover:rh-text-surface"
   },
   ghost: {
     primary: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10",
+    secondary: "rh-bg-transparent rh-text-secondary rh-border-transparent hover:rh-bg-secondary/10",
     danger: "rh-bg-transparent rh-text-danger rh-border-transparent hover:rh-bg-danger/10",
     warning: "rh-bg-transparent rh-text-warning rh-border-transparent hover:rh-bg-warning/10",
     success: "rh-bg-transparent rh-text-success rh-border-transparent hover:rh-bg-success/10",
-    secondary: "rh-bg-transparent rh-text-secondary rh-border-transparent hover:rh-bg-secondary/10"
+    info: "rh-bg-transparent rh-text-info rh-border-transparent hover:rh-bg-info/10"
   }
 };
+function getArbitraryColorStyle2(variant, color) {
+  if (variant === "solid") return { backgroundColor: color, borderColor: color, color: "#fff" };
+  if (variant === "outline") return { borderColor: color, color };
+  return { color, borderColor: "transparent" };
+}
 var sizeClasses2 = {
   sm: "rh-h-8 rh-w-8 rh-text-sm",
   md: "rh-h-10 rh-w-10 rh-text-base",
@@ -794,22 +834,29 @@ var IconButton = forwardRef(function IconButton2({
   loading = false,
   disabled,
   className = "",
+  style,
   children,
   ...rest
 }, ref) {
   const isDisabled = disabled || loading;
+  const preset = isPresetColor2(color);
+  const computedStyle = React8.useMemo(
+    () => preset ? style ?? {} : { ...style, ...getArbitraryColorStyle2(variant, color) },
+    [preset, color, variant, style]
+  );
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       disabled: isDisabled,
       "aria-busy": loading || void 0,
+      style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center",
         "rh-border rh-font-sans",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
-        variantColorClasses2[variant][color],
+        preset ? variantColorClasses2[variant][color] : "hover:rh-brightness-90",
         sizeClasses2[size],
         radiusClasses2[radius],
         isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -1770,21 +1817,46 @@ var Avatar = forwardRef(function Avatar2({ src, alt = "", initials, size = "md",
     }
   );
 });
-var PRESET_COLORS = /* @__PURE__ */ new Set(["primary", "secondary", "danger", "warning", "success"]);
-var isPresetColor = (color) => PRESET_COLORS.has(color);
+var PRESET_COLORS3 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor3 = (color) => PRESET_COLORS3.has(color);
 var activePresetClasses = {
   primary: "rh-bg-primary rh-text-surface rh-border-primary",
   secondary: "rh-bg-secondary rh-text-surface rh-border-secondary",
   danger: "rh-bg-danger rh-text-surface rh-border-danger",
   warning: "rh-bg-warning rh-text-surface rh-border-warning",
-  success: "rh-bg-success rh-text-surface rh-border-success"
+  success: "rh-bg-success rh-text-surface rh-border-success",
+  info: "rh-bg-info rh-text-surface rh-border-info"
 };
 var inactivePresetClasses = {
   primary: "rh-bg-primary/10 rh-text-primary rh-border-primary/30",
   secondary: "rh-bg-secondary/10 rh-text-secondary rh-border-secondary/30",
   danger: "rh-bg-danger/10 rh-text-danger rh-border-danger/30",
   warning: "rh-bg-warning/10 rh-text-warning rh-border-warning/30",
-  success: "rh-bg-success/10 rh-text-success rh-border-success/30"
+  success: "rh-bg-success/10 rh-text-success rh-border-success/30",
+  info: "rh-bg-info/10 rh-text-info rh-border-info/30"
+};
+var hoverActivePresetClasses = {
+  primary: "hover:rh-bg-primary-hover hover:rh-border-primary-hover",
+  secondary: "hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
+  danger: "hover:rh-bg-danger-hover hover:rh-border-danger-hover",
+  warning: "hover:rh-bg-warning-hover hover:rh-border-warning-hover",
+  success: "hover:rh-bg-success-hover hover:rh-border-success-hover",
+  info: "hover:rh-bg-info-hover hover:rh-border-info-hover"
+};
+var hoverInactivePresetClasses = {
+  primary: "hover:rh-bg-primary/20 hover:rh-border-primary/50",
+  secondary: "hover:rh-bg-secondary/20 hover:rh-border-secondary/50",
+  danger: "hover:rh-bg-danger/20 hover:rh-border-danger/50",
+  warning: "hover:rh-bg-warning/20 hover:rh-border-warning/50",
+  success: "hover:rh-bg-success/20 hover:rh-border-success/50",
+  info: "hover:rh-bg-info/20 hover:rh-border-info/50"
 };
 var sizeClasses8 = {
   sm: "rh-text-xs rh-px-2 rh-py-0.5 rh-gap-1",
@@ -1809,27 +1881,34 @@ var Tag = forwardRef(function Tag2({
   leftIcon,
   rightIcon,
   className = "",
+  disabled,
   style,
   children,
   ...rest
 }, ref) {
-  const preset = isPresetColor(color);
+  const preset = isPresetColor3(color);
+  const clickable = !!rest.onClick && !disabled;
   const colorClasses = preset ? active ? activePresetClasses[color] : inactivePresetClasses[color] : "";
+  const hoverClasses = clickable && preset ? active ? hoverActivePresetClasses[color] : hoverInactivePresetClasses[color] : clickable ? "hover:rh-brightness-95" : "";
   const customStyles = preset ? {} : getCustomColorStyles(color, active);
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ref,
-      role: rest.onClick ? "button" : void 0,
-      tabIndex: rest.onClick ? 0 : void 0,
-      "aria-pressed": rest.onClick ? active : void 0,
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable ? 0 : void 0,
+      "aria-pressed": clickable ? active : void 0,
+      "aria-disabled": disabled || void 0,
       className: [
         "rh-inline-flex rh-items-center rh-font-sans rh-font-medium rh-rounded-full",
         "rh-border rh-whitespace-nowrap rh-select-none",
         "rh-transition-colors rh-duration-150",
-        rest.onClick ? "rh-cursor-pointer" : "",
+        "rh-cursor-pointer",
+        clickable ? "rh-cursor-pointer" : "",
         sizeClasses8[size],
         colorClasses,
+        hoverClasses,
+        disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
         className
       ].filter(Boolean).join(" "),
       style: { ...customStyles, ...style },