@rehagro/ui 1.0.2 → 1.0.3

package/dist/colors.types-7nLOoy6r.d.mts

@@ -0,0 +1,4 @@
+type PresetColor = "primary" | "secondary" | "danger" | "warning" | "success" | "info";
+type ButtonColor = PresetColor | (string & {});
+
+export type { ButtonColor as B, PresetColor as P };

package/dist/colors.types-7nLOoy6r.d.ts

@@ -0,0 +1,4 @@
+type PresetColor = "primary" | "secondary" | "danger" | "warning" | "success" | "info";
+type ButtonColor = PresetColor | (string & {});
+
+export type { ButtonColor as B, PresetColor as P };

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import { B as ButtonColor, P as PresetColor } from './colors.types-7nLOoy6r.mjs';
 
 type ToastVariant = "info" | "warning" | "success" | "error" | "neutral";
 type ToastAppearance = "solid" | "light" | "outline";
@@ -88,6 +89,8 @@ type RehagroTheme = {
     warningHover?: string;
     success?: string;
     successHover?: string;
+    info?: string;
+    infoHover?: string;
     /** Semantic colors */
     text?: string;
     textMuted?: string;
@@ -127,7 +130,6 @@ declare function RehagroProvider({ theme, toastPosition, children }: RehagroProv
 type ButtonVariant = "solid" | "outline" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
 type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type ButtonColor = "primary" | "secondary" | "danger" | "warning" | "success";
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -135,9 +137,9 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
-    /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
+    /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -153,9 +155,9 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
-    /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
+    /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -168,7 +170,7 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
 type IconButtonVariant = "solid" | "outline" | "ghost";
 type IconButtonSize = "sm" | "md" | "lg";
 type IconButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type IconButtonColor = "primary" | "danger" | "warning" | "success" | "secondary";
+type IconButtonColor = ButtonColor;
 type IconButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Visual style variant */
     variant?: IconButtonVariant;
@@ -176,7 +178,7 @@ type IconButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -188,7 +190,7 @@ declare const IconButton: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAt
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -374,8 +376,6 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
     variant?: AvatarVariant;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
-type PresetColor = "primary" | "secondary" | "danger" | "warning" | "success";
-
 type TagSize = "sm" | "md" | "lg";
 type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
     /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
@@ -390,6 +390,8 @@ type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
     leftIcon?: React$1.ReactNode;
     /** Optional icon rendered on the right side */
     rightIcon?: React$1.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
 };
 declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & {
     /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
@@ -404,6 +406,8 @@ declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTML
     leftIcon?: React$1.ReactNode;
     /** Optional icon rendered on the right side */
     rightIcon?: React$1.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
 } & React$1.RefAttributes<HTMLSpanElement>>;
 
 type ContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
@@ -507,4 +511,4 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
 declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, Tag, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, Tag, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import { B as ButtonColor, P as PresetColor } from './colors.types-7nLOoy6r.js';
 
 type ToastVariant = "info" | "warning" | "success" | "error" | "neutral";
 type ToastAppearance = "solid" | "light" | "outline";
@@ -88,6 +89,8 @@ type RehagroTheme = {
     warningHover?: string;
     success?: string;
     successHover?: string;
+    info?: string;
+    infoHover?: string;
     /** Semantic colors */
     text?: string;
     textMuted?: string;
@@ -127,7 +130,6 @@ declare function RehagroProvider({ theme, toastPosition, children }: RehagroProv
 type ButtonVariant = "solid" | "outline" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
 type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type ButtonColor = "primary" | "secondary" | "danger" | "warning" | "success";
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -135,9 +137,9 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
-    /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
+    /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -153,9 +155,9 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
-    /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
+    /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -168,7 +170,7 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
 type IconButtonVariant = "solid" | "outline" | "ghost";
 type IconButtonSize = "sm" | "md" | "lg";
 type IconButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type IconButtonColor = "primary" | "danger" | "warning" | "success" | "secondary";
+type IconButtonColor = ButtonColor;
 type IconButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Visual style variant */
     variant?: IconButtonVariant;
@@ -176,7 +178,7 @@ type IconButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -188,7 +190,7 @@ declare const IconButton: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAt
     size?: IconButtonSize;
     /** Border radius */
     radius?: IconButtonRadius;
-    /** Color scheme */
+    /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: IconButtonColor;
     /** Shows loading state and disables interaction */
     loading?: boolean;
@@ -374,8 +376,6 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
     variant?: AvatarVariant;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
-type PresetColor = "primary" | "secondary" | "danger" | "warning" | "success";
-
 type TagSize = "sm" | "md" | "lg";
 type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
     /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
@@ -390,6 +390,8 @@ type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
     leftIcon?: React$1.ReactNode;
     /** Optional icon rendered on the right side */
     rightIcon?: React$1.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
 };
 declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & {
     /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
@@ -404,6 +406,8 @@ declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTML
     leftIcon?: React$1.ReactNode;
     /** Optional icon rendered on the right side */
     rightIcon?: React$1.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
 } & React$1.RefAttributes<HTMLSpanElement>>;
 
 type ContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
@@ -507,4 +511,4 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
 declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, Tag, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, Tag, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };

package/dist/index.js

@@ -22,6 +22,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 },
@@ -637,29 +639,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",
@@ -691,24 +710,28 @@ var Button = React8.forwardRef(function Button2({
   ...rest
 }, ref) {
   const isDisabled = React8__default.default.useMemo(() => disabled || loading, [disabled, loading]);
-  const hoverStyle = React8__default.default.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__default.default.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__ */ jsxRuntime.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" : "",
@@ -754,29 +777,46 @@ var Button = React8.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",
@@ -800,22 +840,29 @@ var IconButton = React8.forwardRef(function IconButton2({
   loading = false,
   disabled,
   className = "",
+  style,
   children,
   ...rest
 }, ref) {
   const isDisabled = disabled || loading;
+  const preset = isPresetColor2(color);
+  const computedStyle = React8__default.default.useMemo(
+    () => preset ? style ?? {} : { ...style, ...getArbitraryColorStyle2(variant, color) },
+    [preset, color, variant, style]
+  );
   return /* @__PURE__ */ jsxRuntime.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" : "",
@@ -1776,21 +1823,46 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
     }
   );
 });
-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",
@@ -1815,27 +1887,34 @@ var Tag = React8.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__ */ jsxRuntime.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 },