@rehagro/ui 1.0.5 → 1.0.6

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" : "",
@@ -1777,6 +1782,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 +1825,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 +1842,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 +2015,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 +2037,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 +2239,7 @@ function TableInner({
   emptyContent = "Nenhum dado encontrado",
   loadingContent,
   stickyHeader = false,
+  headerStyle,
   className = "",
   ...rest
 }, ref) {
@@ -2248,7 +2291,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",