@rehagro/ui 1.0.1 → 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";
@@ -85,7 +86,11 @@ type RehagroTheme = {
     danger?: string;
     dangerHover?: string;
     warning?: string;
+    warningHover?: string;
     success?: string;
+    successHover?: string;
+    info?: string;
+    infoHover?: string;
     /** Semantic colors */
     text?: string;
     textMuted?: string;
@@ -132,6 +137,10 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** 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. 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;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -146,6 +155,10 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** 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. 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;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -157,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;
@@ -165,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;
@@ -177,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;
@@ -363,6 +376,40 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
     variant?: AvatarVariant;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
+type TagSize = "sm" | "md" | "lg";
+type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
+    /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
+    color?: PresetColor | (string & {});
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    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(...)") */
+    color?: PresetColor | (string & {});
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    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> & {
     /**
      * Remove o padding horizontal lateral.
@@ -464,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 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, 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";
@@ -85,7 +86,11 @@ type RehagroTheme = {
     danger?: string;
     dangerHover?: string;
     warning?: string;
+    warningHover?: string;
     success?: string;
+    successHover?: string;
+    info?: string;
+    infoHover?: string;
     /** Semantic colors */
     text?: string;
     textMuted?: string;
@@ -132,6 +137,10 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** 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. 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;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -146,6 +155,10 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
     size?: ButtonSize;
     /** Border radius */
     radius?: ButtonRadius;
+    /** 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. 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;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -157,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;
@@ -165,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;
@@ -177,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;
@@ -363,6 +376,40 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
     variant?: AvatarVariant;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
+type TagSize = "sm" | "md" | "lg";
+type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
+    /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
+    color?: PresetColor | (string & {});
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    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(...)") */
+    color?: PresetColor | (string & {});
+    /** Tag size */
+    size?: TagSize;
+    /** Active (selected) state */
+    active?: boolean;
+    /** Tag label text */
+    title: string;
+    /** Optional icon rendered on the left side */
+    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> & {
     /**
      * Remove o padding horizontal lateral.
@@ -464,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 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, 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

@@ -19,7 +19,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 },
@@ -619,11 +623,62 @@ function RehagroProvider({ theme, toastPosition, children }) {
   }, [theme]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-root", style, children: /* @__PURE__ */ jsxRuntime.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",
@@ -643,27 +698,40 @@ var Button = React8.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__default.default.useMemo(() => disabled || loading, [disabled, loading]);
+  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: 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" : "",
@@ -709,29 +777,46 @@ var Button = React8.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",
@@ -755,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",
-        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" : "",
@@ -1470,7 +1562,7 @@ var Select = React8.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"
@@ -1610,7 +1702,7 @@ var Tooltip = React8.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(" "),
@@ -1697,7 +1789,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"
 };
@@ -1715,7 +1807,7 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
         "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,
@@ -1724,13 +1816,118 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
         {
           src,
           alt,
-          className: [imageSizeClasses[size], variantClasses3[variant], "rh-object-cover"].join(" "),
+          className: [imageSizeClasses[size], variantClasses2[variant], "rh-object-cover"].join(" "),
           onError: () => setImgError(true)
         }
       ) : /* @__PURE__ */ jsxRuntime.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 = React8.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__ */ jsxRuntime.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 = React8.forwardRef(
   function Container2({ fluid = false, className = "", children, ...rest }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1918,6 +2115,7 @@ exports.RehagroProvider = RehagroProvider;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;
 exports.SuccessIcon = SuccessIcon;
+exports.Tag = Tag;
 exports.TextInput = TextInput;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;