@rehagro/ui 1.0.3 → 1.0.5

package/dist/index.js

@@ -1894,7 +1894,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 +1912,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 +1928,410 @@ 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-border rh-border-border rh-bg-surface rh-overflow-hidden",
+        "rh-p-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-bg-transparent 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",
+              radiusClasses5[radius],
+              sizeClasses9[size].button,
+              isActive && preset ? `rh-bg-border rh-text-text` : "",
+              !isActive ? "rh-text-text-muted hover:rh-bg-border/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,
+  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", 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 +2503,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 +2522,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;