@rehagro/ui 1.0.8 → 1.0.10

package/dist/index.js

@@ -940,8 +940,15 @@ var helperStatusClasses = {
   default: "rh-text-text-muted",
   error: "rh-text-danger"
 };
+var labelWeightClasses = {
+  normal: "rh-font-normal",
+  medium: "rh-font-medium",
+  semibold: "rh-font-semibold",
+  bold: "rh-font-bold"
+};
 var TextInput = React8.forwardRef(function TextInput2({
   label,
+  labelWeight = "medium",
   subtitle,
   status = "default",
   size = "md",
@@ -962,7 +969,7 @@ var TextInput = React8.forwardRef(function TextInput2({
       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 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rh-text-sm ${labelWeightClasses[labelWeight]} rh-text-text`, children: label }),
           subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1962,6 +1969,398 @@ var Tag = React8.forwardRef(function Tag2({
     }
   );
 });
+var statusClasses3 = {
+  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"
+};
+var sizeClasses9 = {
+  sm: "rh-min-h-[36px] rh-text-sm rh-px-2 rh-py-1",
+  md: "rh-h-[44px] rh-text-sm rh-px-2 rh-py-[6px]",
+  lg: "rh-min-h-[52px] rh-text-base rh-px-3 rh-py-2"
+};
+var radiusClasses5 = {
+  none: "rh-rounded-none",
+  xxs: "rh-rounded-xxs",
+  xs: "rh-rounded-xs",
+  sm: "rh-rounded-sm",
+  md: "rh-rounded-[8px]",
+  lg: "rh-rounded-lg",
+  xl: "rh-rounded-xl",
+  full: "rh-rounded-full"
+};
+var helperStatusClasses3 = {
+  default: "rh-text-text-muted",
+  error: "rh-text-danger"
+};
+var tagSizeClasses = {
+  sm: "rh-h-6 rh-text-xs rh-py-0.5 rh-px-1.5",
+  md: "rh-h-[28px] rh-text-sm rh-py-[2px] rh-px-[6px]",
+  lg: "rh-h-8 rh-text-sm rh-py-0.5 rh-px-2"
+};
+var deleteButtonSizeClasses = {
+  sm: "rh-w-3 rh-h-3",
+  md: "rh-w-[12px] rh-h-[12px]",
+  lg: "rh-w-4 rh-h-4"
+};
+var addButtonSizeClasses = {
+  sm: "rh-w-4 rh-h-4",
+  md: "rh-w-5 rh-h-5",
+  lg: "rh-w-5 rh-h-5"
+};
+var TagInput = React8.forwardRef(
+  function TagInput2({
+    label,
+    subtitle,
+    options = [],
+    value = [],
+    onChange,
+    placeholder,
+    status = "default",
+    size = "md",
+    radius = "md",
+    helperText,
+    disabled,
+    className = "",
+    wrapperClassName = ""
+  }, ref) {
+    const inputId = React8__default.default.useId();
+    const [isOpen, setIsOpen] = React8.useState(false);
+    const containerRef = React8.useRef(null);
+    React8.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleRemoveTag = (tagValue) => {
+      if (disabled) return;
+      onChange(value.filter((tag) => tag.value !== tagValue));
+    };
+    const handleToggleOption = (option) => {
+      if (disabled) return;
+      const isSelected = value.some((v) => v.value === option.value);
+      if (isSelected) {
+        onChange(value.filter((v) => v.value !== option.value));
+      } else {
+        onChange([...value, option]);
+      }
+    };
+    const handleAddClick = () => {
+      if (disabled) return;
+      setIsOpen(!isOpen);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: (node) => {
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+          containerRef.current = node;
+        },
+        className: [
+          "rh-flex rh-flex-col rh-gap-2 rh-font-sans rh-relative",
+          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-semibold rh-text-text", children: label }),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onClick: disabled ? void 0 : handleAddClick,
+              className: [
+                "rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
+                "rh-border rh-bg-surface rh-font-sans",
+                "rh-transition-colors rh-duration-150",
+                statusClasses3[status],
+                radiusClasses5[radius],
+                sizeClasses9[size],
+                disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
+                className
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-flex-row rh-flex-wrap rh-items-center rh-gap-2 rh-flex-1", children: [
+                  value.length === 0 && placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-text-muted", children: placeholder }),
+                  value.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: [
+                        "rh-inline-flex rh-items-center rh-justify-center rh-gap-1",
+                        "rh-bg-gray-200 rh-border rh-border-gray-200 rh-rounded-[4px]",
+                        tagSizeClasses[size]
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleRemoveTag(tag.value);
+                            },
+                            disabled,
+                            className: [
+                              "rh-flex rh-items-center rh-justify-center",
+                              "rh-bg-white rh-rounded-full",
+                              "rh-cursor-pointer hover:rh-bg-gray-100",
+                              "disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
+                              deleteButtonSizeClasses[size]
+                            ].join(" "),
+                            "aria-label": `Remover ${tag.label}`,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "svg",
+                              {
+                                viewBox: "0 0 8 8",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                className: "rh-w-[8px] rh-h-[8px]",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  "path",
+                                  {
+                                    d: "M6 2L2 6M2 2L6 6",
+                                    stroke: "#374151",
+                                    strokeWidth: "1.5",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round"
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    tag.value
+                  ))
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleAddClick,
+                    disabled,
+                    className: [
+                      "rh-flex rh-items-center rh-justify-center rh-shrink-0",
+                      "rh-text-text-muted hover:rh-text-text",
+                      "rh-cursor-pointer",
+                      "disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
+                      addButtonSizeClasses[size]
+                    ].join(" "),
+                    "aria-label": "Adicionar",
+                    "aria-expanded": isOpen,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        className: "rh-w-full rh-h-full",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "path",
+                          {
+                            d: "M10 4V16M4 10H16",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          isOpen && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: [
+                "rh-absolute rh-top-full rh-left-0 rh-right-0 rh-z-50",
+                "rh-mt-1 rh-bg-surface rh-border rh-border-border",
+                "rh-rounded-[8px] rh-shadow-lg rh-overflow-hidden"
+              ].join(" "),
+              children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "rh-max-h-[200px] rh-overflow-y-auto", children: options.map((option) => {
+                const isSelected = value.some((v) => v.value === option.value);
+                return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleToggleOption(option),
+                    className: [
+                      "rh-w-full rh-flex rh-items-center rh-justify-between",
+                      "rh-px-3 rh-py-3 rh-text-left",
+                      "rh-border-b rh-border-border/50 last:rh-border-b-0",
+                      "hover:rh-bg-gray-50 rh-transition-colors",
+                      isSelected ? "rh-text-text" : "rh-text-text-muted"
+                    ].join(" "),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-normal", children: option.label }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: [
+                            "rh-w-5 rh-h-5 rh-rounded rh-border-2 rh-flex rh-items-center rh-justify-center",
+                            isSelected ? "rh-bg-primary rh-border-primary" : "rh-bg-white rh-border-gray-300"
+                          ].join(" "),
+                          children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                            "svg",
+                            {
+                              viewBox: "0 0 12 12",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
+                              className: "rh-w-3 rh-h-3",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                "path",
+                                {
+                                  d: "M2 6L5 9L10 3",
+                                  stroke: "white",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ) }, option.value);
+              }) })
+            }
+          ),
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: `${inputId}-helper`,
+              className: [
+                "rh-flex rh-items-center rh-gap-1 rh-text-xs",
+                helperStatusClasses3[status]
+              ].join(" "),
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var ProgressBar = React8.forwardRef(
+  function ProgressBar2({
+    value,
+    label,
+    size = "sm",
+    showPercentage = true,
+    barColor,
+    bgColor,
+    className = ""
+  }, ref) {
+    const clampedValue = Math.min(100, Math.max(0, value));
+    if (size === "lg") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: [
+            "rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-sans",
+            className
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
+              label && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "rh-font-sora rh-font-bold rh-text-base rh-leading-6 rh-text-[#374151] rh-flex-1",
+                  children: label
+                }
+              ),
+              showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right",
+                  children: [
+                    clampedValue,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
+                style: { backgroundColor: bgColor || "#E5E7EB" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
+                    style: {
+                      width: `${clampedValue}%`,
+                      backgroundColor: barColor || "#538CC6"
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: [
+          "rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-sans",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
+              style: { backgroundColor: bgColor || "#E5E7EB" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
+                  style: {
+                    width: `${clampedValue}%`,
+                    backgroundColor: barColor || "#538CC6"
+                  }
+                }
+              )
+            }
+          ),
+          showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right rh-min-w-[40px]",
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 var PRESET_COLORS4 = /* @__PURE__ */ new Set([
   "primary",
   "secondary",
@@ -1971,12 +2370,12 @@ var PRESET_COLORS4 = /* @__PURE__ */ new Set([
   "info"
 ]);
 var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
-var sizeClasses9 = {
+var sizeClasses10 = {
   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 = {
+var radiusClasses6 = {
   none: "rh-rounded-none",
   xs: "rh-rounded-xs",
   sm: "rh-rounded-sm",
@@ -2009,8 +2408,8 @@ function ToggleGroupInner({
       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,
+        radiusClasses6[radius],
+        sizeClasses10[size].container,
         disabled ? "rh-opacity-50 rh-cursor-not-allowed" : "",
         className
       ].filter(Boolean).join(" "),
@@ -2032,8 +2431,8 @@ function ToggleGroupInner({
               "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,
+              radiusClasses6[radius],
+              sizeClasses10[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"
@@ -2056,7 +2455,7 @@ var variantClasses3 = {
   outlined: "rh-bg-surface rh-border rh-border-border rh-shadow-none",
   filled: "rh-bg-background rh-border-0 rh-shadow-none"
 };
-var radiusClasses6 = {
+var radiusClasses7 = {
   none: "rh-rounded-none",
   xs: "rh-rounded-xs",
   sm: "rh-rounded-sm",
@@ -2091,7 +2490,7 @@ var Card = React8.forwardRef(function Card2({
       className: [
         "rh-font-sans rh-transition-all rh-duration-150",
         variantClasses3[variant],
-        radiusClasses6[radius],
+        radiusClasses7[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" : "",
@@ -2139,7 +2538,7 @@ var PRESET_COLORS5 = /* @__PURE__ */ new Set([
   "info"
 ]);
 var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
-var sizeClasses10 = {
+var sizeClasses11 = {
   xs: "rh-w-3 rh-h-3",
   sm: "rh-w-4 rh-h-4",
   md: "rh-w-6 rh-h-6",
@@ -2166,7 +2565,7 @@ var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primar
       "aria-label": label,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center",
-        sizeClasses10[size],
+        sizeClasses11[size],
         colorClass,
         className
       ].filter(Boolean).join(" "),
@@ -2209,7 +2608,7 @@ var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primar
     }
   );
 });
-var sizeClasses11 = {
+var sizeClasses12 = {
   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" }
@@ -2232,6 +2631,7 @@ function TableInner({
   loadingContent,
   stickyHeader = false,
   headerStyle,
+  headerTextClassName,
   className = "",
   ...rest
 }, ref) {
@@ -2289,9 +2689,9 @@ function TableInner({
             scope: "col",
             style: { width: column.width },
             className: [
-              sizeClasses11[size].header,
+              sizeClasses12[size].header,
               alignClasses[column.align || "left"],
-              "rh-font-semibold rh-text-text-muted rh-whitespace-nowrap",
+              `rh-font-semibold rh-whitespace-nowrap ${headerTextClassName || "rh-text-text-muted"}`,
               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(" "),
@@ -2350,7 +2750,7 @@ function TableInner({
                 "td",
                 {
                   className: [
-                    sizeClasses11[size].cell,
+                    sizeClasses12[size].cell,
                     alignClasses[column.align || "left"],
                     "rh-text-text"
                   ].filter(Boolean).join(" "),
@@ -2554,6 +2954,7 @@ exports.IconButton = IconButton;
 exports.InfoIcon = InfoIcon;
 exports.NeutralIcon = NeutralIcon;
 exports.PlusIcon = PlusIcon;
+exports.ProgressBar = ProgressBar;
 exports.RehagroProvider = RehagroProvider;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;
@@ -2561,6 +2962,7 @@ exports.Spinner = Spinner;
 exports.SuccessIcon = SuccessIcon;
 exports.Table = Table;
 exports.Tag = Tag;
+exports.TagInput = TagInput;
 exports.TextInput = TextInput;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;