@rehagro/ui 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -13,7 +13,11 @@ var TOKEN_MAP = {
   danger: { var: "--rh-danger", isColor: true },
   dangerHover: { var: "--rh-danger-hover", isColor: true },
   warning: { var: "--rh-warning", isColor: true },
+  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 },
@@ -613,11 +617,62 @@ function RehagroProvider({ theme, toastPosition, children }) {
   }, [theme]);
   return /* @__PURE__ */ jsx("div", { className: "rh-root", style, children: /* @__PURE__ */ jsx(ToastProvider, { position: toastPosition, children }) });
 }
-var variantClasses = {
-  solid: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
-  outline: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary hover:rh-text-surface",
-  ghost: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10"
+function toRgbTriplet2(value) {
+  if (value.startsWith("#")) {
+    const h = value.replace("#", "");
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    if ([r, g, b].some(Number.isNaN)) return void 0;
+    return `${r} ${g} ${b}`;
+  }
+  const m = value.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
+  if (m) return `${m[1]} ${m[2]} ${m[3]}`;
+  const parts = value.trim().split(/\s+/);
+  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",
+    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",
+    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",
+    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",
@@ -637,27 +692,40 @@ var Button = forwardRef(function Button2({
   variant = "solid",
   size = "md",
   radius = "sm",
+  color = "primary",
+  hoverColor,
   loading = false,
   disabled,
   leftIcon,
   rightIcon,
   className = "",
+  style,
   children,
   ...rest
 }, ref) {
   const isDisabled = React8.useMemo(() => disabled || loading, [disabled, loading]);
+  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: 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",
-        variantClasses[variant],
+        preset ? variantColorClasses[variant][color] : "hover:rh-brightness-90",
         sizeClasses[size],
         radiusClasses[radius],
         isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -703,29 +771,46 @@ var Button = forwardRef(function Button2({
     }
   );
 });
-var variantColorClasses = {
+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",
@@ -749,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",
-        variantColorClasses[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" : "",
@@ -1464,7 +1556,7 @@ var Select = forwardRef(
     );
   }
 );
-var variantClasses2 = {
+var variantClasses = {
   light: "rh-bg-surface rh-text-text rh-border rh-border-border rh-shadow-md",
   default: "rh-bg-primary/10 rh-text-text rh-border rh-border-primary/20 rh-shadow-md",
   dark: "rh-bg-primary rh-text-surface rh-shadow-md"
@@ -1604,7 +1696,7 @@ var Tooltip = forwardRef(
               className: [
                 "rh-absolute rh-z-50 rh-w-max rh-max-w-xs rh-rounded-xs",
                 tooltipPlacementClasses[placement],
-                variantClasses2[variant],
+                variantClasses[variant],
                 sizeClasses6[size],
                 className
               ].filter(Boolean).join(" "),
@@ -1691,7 +1783,7 @@ var imageSizeClasses = {
   lg: "rh-w-12 rh-h-12",
   xl: "rh-w-16 rh-h-16"
 };
-var variantClasses3 = {
+var variantClasses2 = {
   circle: "rh-rounded-full",
   square: "rh-rounded-sm"
 };
@@ -1709,7 +1801,7 @@ var Avatar = forwardRef(function Avatar2({ src, alt = "", initials, size = "md",
         "rh-inline-flex rh-items-center rh-justify-center rh-shrink-0 rh-overflow-hidden",
         "rh-bg-primary rh-text-surface rh-font-sans rh-font-medium rh-select-none",
         sizeClasses7[size],
-        variantClasses3[variant],
+        variantClasses2[variant],
         className
       ].filter(Boolean).join(" "),
       ...rest,
@@ -1718,13 +1810,118 @@ var Avatar = forwardRef(function Avatar2({ src, alt = "", initials, size = "md",
         {
           src,
           alt,
-          className: [imageSizeClasses[size], variantClasses3[variant], "rh-object-cover"].join(" "),
+          className: [imageSizeClasses[size], variantClasses2[variant], "rh-object-cover"].join(" "),
           onError: () => setImgError(true)
         }
       ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: fallbackLabel })
     }
   );
 });
+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",
+  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",
+  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",
+  md: "rh-text-sm rh-px-2.5 rh-py-1 rh-gap-1.5",
+  lg: "rh-text-sm rh-px-3 rh-py-1.5 rh-gap-1.5"
+};
+function getCustomColorStyles(color, active) {
+  if (active) {
+    return { backgroundColor: color, borderColor: color, color: "#fff" };
+  }
+  return {
+    backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)`,
+    borderColor: `color-mix(in srgb, ${color} 30%, transparent)`,
+    color
+  };
+}
+var Tag = forwardRef(function Tag2({
+  color = "primary",
+  size = "md",
+  active = false,
+  title,
+  leftIcon,
+  rightIcon,
+  className = "",
+  disabled,
+  style,
+  children,
+  ...rest
+}, ref) {
+  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: 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",
+        "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 },
+      ...rest,
+      children: [
+        leftIcon,
+        title,
+        children,
+        rightIcon
+      ]
+    }
+  );
+});
 var Container = forwardRef(
   function Container2({ fluid = false, className = "", children, ...rest }, ref) {
     return /* @__PURE__ */ jsx(
@@ -1894,6 +2091,6 @@ var GridItem = forwardRef(
   }
 );
 
-export { Avatar, Button, Checkbox, CloseIcon, Container, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, PlusIcon, RehagroProvider, SearchIcon, Select, SuccessIcon, TextInput, Toast, ToastContainer, ToastProvider, Tooltip, WarningIcon, useToast };
+export { Avatar, Button, Checkbox, CloseIcon, Container, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, PlusIcon, RehagroProvider, SearchIcon, Select, SuccessIcon, Tag, TextInput, Toast, ToastContainer, ToastProvider, Tooltip, WarningIcon, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map