@rehagro/ui 1.0.5 → 1.0.7

package/dist/index.d.mts

@@ -130,6 +130,14 @@ 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 ButtonHoverStyle = {
+    /** Background color on hover */
+    backgroundColor?: string;
+    /** Border color on hover */
+    borderColor?: string;
+    /** Text color on hover */
+    color?: string;
+};
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -141,6 +149,8 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     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;
+    /** Custom hover styles - allows full control over hover appearance */
+    hoverStyle?: ButtonHoverStyle;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -159,6 +169,8 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
     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;
+    /** Custom hover styles - allows full control over hover appearance */
+    hoverStyle?: ButtonHoverStyle;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -362,6 +374,8 @@ type AvatarProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
     size?: AvatarSize;
     /** Shape variant */
     variant?: AvatarVariant;
+    /** Generate background and text color automatically based on name/alt */
+    colorFromName?: boolean;
 };
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
     /** Image source URL */
@@ -374,6 +388,8 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
     size?: AvatarSize;
     /** Shape variant */
     variant?: AvatarVariant;
+    /** Generate background and text color automatically based on name/alt */
+    colorFromName?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
 type TagSize = "sm" | "md" | "lg";
@@ -540,6 +556,8 @@ type TableProps<T> = Omit<React$1.HTMLAttributes<HTMLTableElement>, "children">
     loadingContent?: React$1.ReactNode;
     /** Whether the table has sticky header */
     stickyHeader?: boolean;
+    /** Custom header row style */
+    headerStyle?: React$1.CSSProperties;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React$1.ForwardedRef<HTMLTableElement>;

package/dist/index.d.ts

@@ -130,6 +130,14 @@ 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 ButtonHoverStyle = {
+    /** Background color on hover */
+    backgroundColor?: string;
+    /** Border color on hover */
+    borderColor?: string;
+    /** Text color on hover */
+    color?: string;
+};
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -141,6 +149,8 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     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;
+    /** Custom hover styles - allows full control over hover appearance */
+    hoverStyle?: ButtonHoverStyle;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -159,6 +169,8 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
     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;
+    /** Custom hover styles - allows full control over hover appearance */
+    hoverStyle?: ButtonHoverStyle;
     /** Shows loading state and disables interaction */
     loading?: boolean;
     /** Icon rendered to the left of children (hidden when loading) */
@@ -362,6 +374,8 @@ type AvatarProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
     size?: AvatarSize;
     /** Shape variant */
     variant?: AvatarVariant;
+    /** Generate background and text color automatically based on name/alt */
+    colorFromName?: boolean;
 };
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
     /** Image source URL */
@@ -374,6 +388,8 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
     size?: AvatarSize;
     /** Shape variant */
     variant?: AvatarVariant;
+    /** Generate background and text color automatically based on name/alt */
+    colorFromName?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
 type TagSize = "sm" | "md" | "lg";
@@ -540,6 +556,8 @@ type TableProps<T> = Omit<React$1.HTMLAttributes<HTMLTableElement>, "children">
     loadingContent?: React$1.ReactNode;
     /** Whether the table has sticky header */
     stickyHeader?: boolean;
+    /** Custom header row style */
+    headerStyle?: React$1.CSSProperties;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React$1.ForwardedRef<HTMLTableElement>;

package/dist/index.js

@@ -700,6 +700,7 @@ var Button = React8.forwardRef(function Button2({
   radius = "sm",
   color = "primary",
   hoverColor,
+  hoverStyle,
   loading = false,
   disabled,
   leftIcon,
@@ -712,13 +713,15 @@ var Button = React8.forwardRef(function Button2({
   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]);
+    const baseStyle = preset ? hoverColor ? { [`--rh-${color}-hover`]: toRgbTriplet2(hoverColor) ?? hoverColor } : {} : getArbitraryColorStyle(variant, color);
+    const hoverVars = hoverStyle ? {
+      "--btn-hover-bg": hoverStyle.backgroundColor,
+      "--btn-hover-border": hoverStyle.borderColor,
+      "--btn-hover-color": hoverStyle.color
+    } : {};
+    return { ...style, ...baseStyle, ...hoverVars };
+  }, [preset, color, variant, hoverColor, hoverStyle, style]);
+  const hasCustomHover = Boolean(hoverStyle);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -731,7 +734,9 @@ var Button = React8.forwardRef(function Button2({
         "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",
-        preset ? variantColorClasses[variant][color] : "hover:rh-brightness-90",
+        preset && !hasCustomHover ? variantColorClasses[variant][color] : "",
+        !preset && !hasCustomHover ? "hover:rh-brightness-90" : "",
+        hasCustomHover ? "btn-custom-hover" : "",
         sizeClasses[size],
         radiusClasses[radius],
         isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -904,8 +909,8 @@ var IconButton = React8.forwardRef(function IconButton2({
   );
 });
 var statusClasses = {
-  default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring focus-within:rh-ring-offset-2",
-  error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger focus-within:rh-ring-offset-2"
+  default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring",
+  error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger"
 };
 var sizeClasses3 = {
   sm: "rh-h-input-sm rh-text-sm rh-px-input-x-sm",
@@ -931,113 +936,101 @@ var helperStatusClasses = {
   default: "rh-text-text-muted",
   error: "rh-text-danger"
 };
-var TextInput = React8.forwardRef(
-  function TextInput2({
-    label,
-    subtitle,
-    status = "default",
-    size = "md",
-    radius = "xs",
-    leftIcon,
-    rightIcon,
-    helperText,
-    disabled,
-    className = "",
-    wrapperClassName = "",
-    id,
-    ...rest
-  }, ref) {
-    const inputId = id || React8__default.default.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: [
-          "rh-flex rh-flex-col rh-gap-1 rh-font-sans",
-          wrapperClassName
-        ].filter(Boolean).join(" "),
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
-            {
-              htmlFor: inputId,
-              className: "rh-flex rh-items-baseline rh-gap-1",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
-                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: [
-                "rh-flex rh-items-center rh-gap-2",
-                "rh-border rh-bg-surface rh-font-sans",
-                "rh-transition-colors rh-duration-150",
-                statusClasses[status],
-                radiusClasses3[radius],
-                sizeClasses3[size],
-                disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "",
-                className
-              ].filter(Boolean).join(" "),
-              children: [
-                leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: [
-                      "rh-inline-flex rh-shrink-0 rh-text-text-muted",
-                      iconSizeClasses[size]
-                    ].join(" "),
-                    "aria-hidden": "true",
-                    children: leftIcon
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    ref,
-                    id: inputId,
-                    disabled,
-                    "aria-invalid": status === "error" || void 0,
-                    "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-                    className: [
-                      "rh-flex-1 rh-bg-transparent rh-outline-none",
-                      "rh-text-text placeholder:rh-text-text-muted",
-                      disabled ? "rh-cursor-not-allowed" : ""
-                    ].filter(Boolean).join(" "),
-                    ...rest
-                  }
-                ),
-                rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: [
-                      "rh-inline-flex rh-shrink-0 rh-text-text-muted",
-                      iconSizeClasses[size]
-                    ].join(" "),
-                    "aria-hidden": "true",
-                    children: rightIcon
-                  }
-                )
-              ]
-            }
-          ),
-          helperText && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              id: `${inputId}-helper`,
-              className: [
-                "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-                helperStatusClasses[status]
-              ].join(" "),
-              children: helperText
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+var TextInput = React8.forwardRef(function TextInput2({
+  label,
+  subtitle,
+  status = "default",
+  size = "md",
+  radius = "xs",
+  leftIcon,
+  rightIcon,
+  helperText,
+  disabled,
+  className = "",
+  wrapperClassName = "",
+  id,
+  ...rest
+}, ref) {
+  const inputId = id || React8__default.default.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["rh-flex rh-flex-col rh-gap-[0.5rem] rh-font-sans", wrapperClassName].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: [
+              "rh-flex rh-items-center rh-gap-2",
+              "rh-border rh-bg-surface rh-font-sans",
+              "rh-transition-colors rh-duration-150",
+              statusClasses[status],
+              radiusClasses3[radius],
+              sizeClasses3[size],
+              disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "",
+              className
+            ].filter(Boolean).join(" "),
+            children: [
+              leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: [
+                    "rh-inline-flex rh-shrink-0 rh-text-text-muted",
+                    iconSizeClasses[size]
+                  ].join(" "),
+                  "aria-hidden": "true",
+                  children: leftIcon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref,
+                  id: inputId,
+                  disabled,
+                  "aria-invalid": status === "error" || void 0,
+                  "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+                  className: [
+                    "rh-flex-1 rh-bg-transparent rh-outline-none",
+                    "rh-text-text placeholder:rh-text-text-muted",
+                    disabled ? "rh-cursor-not-allowed" : ""
+                  ].filter(Boolean).join(" "),
+                  ...rest
+                }
+              ),
+              rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: [
+                    "rh-inline-flex rh-shrink-0 rh-text-text-muted",
+                    iconSizeClasses[size]
+                  ].join(" "),
+                  "aria-hidden": "true",
+                  children: rightIcon
+                }
+              )
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            id: `${inputId}-helper`,
+            className: [
+              "rh-flex rh-items-center rh-gap-1 rh-text-xs",
+              helperStatusClasses[status]
+            ].join(" "),
+            children: helperText
+          }
+        )
+      ]
+    }
+  );
+});
 var sizeClasses4 = {
   sm: "rh-h-4 rh-w-4",
   md: "rh-h-5 rh-w-5",
@@ -1777,6 +1770,33 @@ var Tooltip = React8.forwardRef(
     );
   }
 );
+var AVATAR_COLORS = [
+  { bg: "#FBF1E6", text: "#D6822D" },
+  // Laranja
+  { bg: "#EDF3FA", text: "#538CC6" },
+  // Azul
+  { bg: "#F3E5F5", text: "#9C27B0" },
+  // Roxo
+  { bg: "#E8F5E9", text: "#4CAF50" },
+  // Verde
+  { bg: "#FFF3E0", text: "#FF9800" },
+  // Amarelo
+  { bg: "#FFEBEE", text: "#F44336" },
+  // Vermelho
+  { bg: "#E3F2FD", text: "#2196F3" },
+  // Azul claro
+  { bg: "#F3E5F5", text: "#673AB7" },
+  // Violeta
+  { bg: "#E0F2F1", text: "#009688" },
+  // Teal
+  { bg: "#FBE9E7", text: "#FF5722" }
+  // Deep Orange
+];
+function getAvatarColors(name) {
+  const hash = name.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const index = hash % AVATAR_COLORS.length;
+  return AVATAR_COLORS[index];
+}
 var sizeClasses7 = {
   sm: "rh-w-8 rh-h-8 rh-text-xs",
   md: "rh-w-10 rh-h-10 rh-text-sm",
@@ -1793,9 +1813,14 @@ var variantClasses2 = {
   circle: "rh-rounded-full",
   square: "rh-rounded-sm"
 };
-var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size = "md", variant = "circle", className = "", ...rest }, ref) {
+var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size = "md", variant = "circle", colorFromName = false, className = "", style, ...rest }, ref) {
   const [imgError, setImgError] = React8.useState(false);
   const showImage = src && !imgError;
+  const avatarColors = React8.useMemo(() => {
+    if (!colorFromName) return null;
+    const name = initials || alt || "";
+    return name ? getAvatarColors(name) : null;
+  }, [colorFromName, initials, alt]);
   const fallbackLabel = initials ? initials.slice(0, 2).toUpperCase() : alt ? alt.split(" ").slice(0, 2).map((w) => w[0]).join("").toUpperCase() : "?";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1805,11 +1830,16 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
       "aria-label": showImage ? void 0 : alt || initials,
       className: [
         "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",
+        avatarColors ? "" : "rh-bg-primary rh-text-surface",
+        "rh-font-sans rh-font-medium rh-select-none",
         sizeClasses7[size],
         variantClasses2[variant],
         className
       ].filter(Boolean).join(" "),
+      style: {
+        ...avatarColors && { backgroundColor: avatarColors.bg, color: avatarColors.text },
+        ...style
+      },
       ...rest,
       children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
         "img",
@@ -1973,8 +2003,8 @@ function ToggleGroupInner({
       ref,
       role: "group",
       className: [
-        "rh-inline-flex rh-items-center rh-border rh-border-border rh-bg-surface rh-overflow-hidden",
-        "rh-p-0.5",
+        "rh-inline-flex rh-items-center rh-bg-muted rh-overflow-hidden",
+        "rh-p-1 rh-gap-0.5",
         radiusClasses5[radius],
         sizeClasses9[size].container,
         disabled ? "rh-opacity-50 rh-cursor-not-allowed" : "",
@@ -1995,13 +2025,13 @@ function ToggleGroupInner({
             onClick: () => !isDisabled && onChange(option.value),
             className: [
               "rh-flex rh-items-center rh-justify-center rh-h-full",
-              "rh-border-0 rh-bg-transparent rh-font-sans rh-font-medium",
-              "rh-transition-colors rh-duration-150",
+              "rh-border-0 rh-font-sans rh-font-medium",
+              "rh-transition-all rh-duration-150",
               "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
               radiusClasses5[radius],
               sizeClasses9[size].button,
-              isActive && preset ? `rh-bg-border rh-text-text` : "",
-              !isActive ? "rh-text-text-muted hover:rh-bg-border/50" : "",
+              isActive ? "rh-bg-surface rh-text-text rh-shadow-sm" : "rh-bg-transparent rh-text-text-muted",
+              !isActive && !isDisabled ? "hover:rh-bg-surface/50" : "",
               isDisabled ? "rh-cursor-not-allowed rh-pointer-events-none" : "rh-cursor-pointer"
             ].filter(Boolean).join(" "),
             style: isActive && !preset ? getActiveStyles(color, preset) : void 0,
@@ -2197,6 +2227,7 @@ function TableInner({
   emptyContent = "Nenhum dado encontrado",
   loadingContent,
   stickyHeader = false,
+  headerStyle,
   className = "",
   ...rest
 }, ref) {
@@ -2248,7 +2279,7 @@ function TableInner({
       ].filter(Boolean).join(" "),
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rh-border-b rh-border-border", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rh-border-b rh-border-border", style: headerStyle, children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
           "th",
           {
             scope: "col",