@rehagro/ui 1.0.4 → 1.0.6

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",
@@ -1894,7 +1936,7 @@ var Tag = React8.forwardRef(function Tag2({
 }, ref) {
   const preset = isPresetColor3(color);
   const clickable = !!rest.onClick && !disabled;
-  const colorClasses = preset ? active ? activePresetClasses[color] : inactivePresetClasses[color] : "";
+  const colorClasses2 = 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(
@@ -1912,7 +1954,7 @@ var Tag = React8.forwardRef(function Tag2({
         "rh-cursor-pointer",
         clickable ? "rh-cursor-pointer" : "",
         sizeClasses8[size],
-        colorClasses,
+        colorClasses2,
         hoverClasses,
         disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
         className
@@ -1928,6 +1970,411 @@ var Tag = React8.forwardRef(function Tag2({
     }
   );
 });
+var PRESET_COLORS4 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
+var sizeClasses9 = {
+  sm: { container: "rh-h-8", button: "rh-px-2 rh-text-xs" },
+  md: { container: "rh-h-9", button: "rh-px-3 rh-text-sm" },
+  lg: { container: "rh-h-10", button: "rh-px-4 rh-text-sm" }
+};
+var radiusClasses5 = {
+  none: "rh-rounded-none",
+  xs: "rh-rounded-xs",
+  sm: "rh-rounded-sm",
+  md: "rh-rounded-md",
+  lg: "rh-rounded-lg",
+  xl: "rh-rounded-xl",
+  full: "rh-rounded-full"
+};
+function getActiveStyles(color, isPreset) {
+  if (isPreset) return {};
+  return { backgroundColor: color, color: "#fff" };
+}
+function ToggleGroupInner({
+  options,
+  value,
+  onChange,
+  size = "md",
+  radius = "full",
+  color = "primary",
+  disabled = false,
+  className = "",
+  ...rest
+}, ref) {
+  const preset = isPresetColor4(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: [
+        "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" : "",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children: options.map((option) => {
+        const isActive = value === option.value;
+        const isDisabled = disabled || option.disabled;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isActive,
+            "aria-label": option["aria-label"],
+            disabled: isDisabled,
+            onClick: () => !isDisabled && onChange(option.value),
+            className: [
+              "rh-flex rh-items-center rh-justify-center rh-h-full",
+              "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 ? "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,
+            children: [
+              option.icon,
+              option.label
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var ToggleGroup = React8.forwardRef(ToggleGroupInner);
+var variantClasses3 = {
+  elevated: "rh-bg-surface rh-shadow-md rh-border-0",
+  outlined: "rh-bg-surface rh-border rh-border-border rh-shadow-none",
+  filled: "rh-bg-background rh-border-0 rh-shadow-none"
+};
+var radiusClasses6 = {
+  none: "rh-rounded-none",
+  xs: "rh-rounded-xs",
+  sm: "rh-rounded-sm",
+  md: "rh-rounded-md",
+  lg: "rh-rounded-lg",
+  xl: "rh-rounded-xl"
+};
+var paddingClasses = {
+  none: "rh-p-0",
+  sm: "rh-p-3",
+  md: "rh-p-4",
+  lg: "rh-p-6"
+};
+var Card = React8.forwardRef(function Card2({
+  variant = "outlined",
+  radius = "sm",
+  padding = "md",
+  clickable = false,
+  disabled = false,
+  className = "",
+  children,
+  ...rest
+}, ref) {
+  const isInteractive = clickable && !disabled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: clickable ? "button" : void 0,
+      tabIndex: isInteractive ? 0 : void 0,
+      "aria-disabled": disabled || void 0,
+      className: [
+        "rh-font-sans rh-transition-all rh-duration-150",
+        variantClasses3[variant],
+        radiusClasses6[radius],
+        paddingClasses[padding],
+        isInteractive ? "rh-cursor-pointer hover:rh-shadow-lg hover:rh-scale-[1.01] active:rh-scale-[0.99]" : "",
+        disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children
+    }
+  );
+});
+var CardHeader = React8.forwardRef(function CardHeader2({ className = "", children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: ["rh-flex rh-items-center rh-justify-between rh-gap-4", className].filter(Boolean).join(" "),
+      ...rest,
+      children
+    }
+  );
+});
+var CardContent = React8.forwardRef(function CardContent2({ className = "", children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: ["rh-mt-2", className].filter(Boolean).join(" "), ...rest, children });
+});
+var CardFooter = React8.forwardRef(function CardFooter2({ className = "", children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: [
+        "rh-flex rh-items-center rh-justify-end rh-gap-2 rh-mt-4 rh-pt-4 rh-border-t rh-border-border",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children
+    }
+  );
+});
+var PRESET_COLORS5 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
+var sizeClasses10 = {
+  xs: "rh-w-3 rh-h-3",
+  sm: "rh-w-4 rh-h-4",
+  md: "rh-w-6 rh-h-6",
+  lg: "rh-w-8 rh-h-8",
+  xl: "rh-w-12 rh-h-12"
+};
+var colorClasses = {
+  primary: "rh-text-primary",
+  secondary: "rh-text-secondary",
+  danger: "rh-text-danger",
+  warning: "rh-text-warning",
+  success: "rh-text-success",
+  info: "rh-text-info"
+};
+var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primary", label = "Carregando...", className = "", style, ...rest }, ref) {
+  const preset = isPresetColor5(color);
+  const colorClass = preset ? colorClasses[color] : "";
+  const customStyle = preset ? style : { ...style, color };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-label": label,
+      className: [
+        "rh-inline-flex rh-items-center rh-justify-center",
+        sizeClasses10[size],
+        colorClass,
+        className
+      ].filter(Boolean).join(" "),
+      style: customStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "rh-animate-spin",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "rh-opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "rh-opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-sr-only", children: label })
+      ]
+    }
+  );
+});
+var sizeClasses11 = {
+  sm: { cell: "rh-px-2 rh-py-2 rh-text-xs", header: "rh-px-2 rh-py-2 rh-text-xs" },
+  md: { cell: "rh-px-3 rh-py-3 rh-text-sm", header: "rh-px-3 rh-py-3 rh-text-xs" },
+  lg: { cell: "rh-px-4 rh-py-4 rh-text-sm", header: "rh-px-4 rh-py-3 rh-text-sm" }
+};
+var alignClasses = {
+  left: "rh-text-left",
+  center: "rh-text-center",
+  right: "rh-text-right"
+};
+function TableInner({
+  columns,
+  data,
+  rowKey,
+  size = "md",
+  variant = "default",
+  sort,
+  onSortChange,
+  loading = false,
+  emptyContent = "Nenhum dado encontrado",
+  loadingContent,
+  stickyHeader = false,
+  headerStyle,
+  className = "",
+  ...rest
+}, ref) {
+  const handleSort = (column) => {
+    if (!column.sortable || !onSortChange) return;
+    const newDirection = sort?.key === column.key ? sort.direction === "asc" ? "desc" : sort.direction === "desc" ? null : "asc" : "asc";
+    onSortChange({ key: column.key, direction: newDirection });
+  };
+  const renderSortIcon = (column) => {
+    if (!column.sortable) return null;
+    const isAsc = sort?.key === column.key && sort.direction === "asc";
+    const isDesc = sort?.key === column.key && sort.direction === "desc";
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-ml-1 rh-inline-flex rh-flex-col rh-gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "8",
+          height: "5",
+          viewBox: "0 0 8 5",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: isAsc ? "rh-text-primary" : "rh-text-text-muted",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 0L7.4641 4.5H0.535898L4 0Z", fill: "currentColor" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "8",
+          height: "5",
+          viewBox: "0 0 8 5",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: isDesc ? "rh-text-primary" : "rh-text-text-muted",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 5L0.535898 0.5H7.4641L4 5Z", fill: "currentColor" })
+        }
+      )
+    ] });
+  };
+  const isEmpty = !loading && data.length === 0;
+  const colSpan = columns.length;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-full rh-overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      ref,
+      className: [
+        "rh-w-full rh-border-collapse rh-font-sans",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children: [
+        /* @__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",
+            style: { width: column.width },
+            className: [
+              sizeClasses11[size].header,
+              alignClasses[column.align || "left"],
+              "rh-font-semibold rh-text-text-muted rh-whitespace-nowrap",
+              stickyHeader ? "rh-sticky rh-top-0 rh-bg-surface rh-z-10" : "",
+              column.sortable ? "rh-cursor-pointer rh-select-none hover:rh-text-text" : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => handleSort(column),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-inline-flex rh-items-center", children: [
+              column.header,
+              renderSortIcon(column)
+            ] })
+          },
+          column.key
+        )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "rh-text-center rh-py-8", children: loadingContent || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-center rh-gap-2 rh-text-text-muted", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                className: "rh-animate-spin rh-h-5 rh-w-5",
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      className: "rh-opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      className: "rh-opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                    }
+                  )
+                ]
+              }
+            ),
+            "Carregando..."
+          ] }) }) }),
+          isEmpty && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "rh-text-center rh-py-8 rh-text-text-muted", children: emptyContent }) }),
+          !loading && data.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: [
+                "rh-border-b rh-border-border rh-transition-colors",
+                "hover:rh-bg-background",
+                variant === "striped" && index % 2 === 1 ? "rh-bg-background/50" : ""
+              ].filter(Boolean).join(" "),
+              children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  className: [
+                    sizeClasses11[size].cell,
+                    alignClasses[column.align || "left"],
+                    "rh-text-text"
+                  ].filter(Boolean).join(" "),
+                  children: column.render(row, index)
+                },
+                column.key
+              ))
+            },
+            rowKey(row, index)
+          ))
+        ] })
+      ]
+    }
+  ) });
+}
+var Table = React8.forwardRef(TableInner);
 var Container = React8.forwardRef(
   function Container2({ fluid = false, className = "", children, ...rest }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2099,6 +2546,10 @@ var GridItem = React8.forwardRef(
 
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.CloseIcon = CloseIcon;
 exports.Container = Container;
@@ -2114,12 +2565,15 @@ exports.PlusIcon = PlusIcon;
 exports.RehagroProvider = RehagroProvider;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;
+exports.Spinner = Spinner;
 exports.SuccessIcon = SuccessIcon;
+exports.Table = Table;
 exports.Tag = Tag;
 exports.TextInput = TextInput;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
 exports.ToastProvider = ToastProvider;
+exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.WarningIcon = WarningIcon;
 exports.useToast = useToast;