@rehagro/ui 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -613,6 +613,10 @@ function RehagroProvider({ theme, toastPosition, children }) {
         vars[config.var] = value;
       }
     }
+    if (!theme.ring && theme.primary) {
+      const triplet = toRgbTriplet(theme.primary);
+      if (triplet) vars["--rh-ring"] = triplet;
+    }
     return vars;
   }, [theme]);
   return /* @__PURE__ */ jsx("div", { className: "rh-root", style, children: /* @__PURE__ */ jsx(ToastProvider, { position: toastPosition, children }) });
@@ -1952,6 +1956,394 @@ var Tag = 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 = forwardRef(
+  function TagInput2({
+    label,
+    subtitle,
+    options = [],
+    value = [],
+    onChange,
+    placeholder,
+    status = "default",
+    size = "md",
+    radius = "md",
+    helperText,
+    disabled,
+    className = "",
+    wrapperClassName = ""
+  }, ref) {
+    const inputId = React8.useId();
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    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__ */ 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__ */ jsxs(
+            "label",
+            {
+              htmlFor: inputId,
+              className: "rh-flex rh-items-baseline rh-gap-1",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
+                subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              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" : "",
+                className
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ 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__ */ jsx("span", { className: "rh-text-text-muted", children: placeholder }),
+                  value.map((tag) => /* @__PURE__ */ 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__ */ jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => 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__ */ 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__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M6 2L2 6M2 2L6 6",
+                                    stroke: "#374151",
+                                    strokeWidth: "1.5",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round"
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    tag.value
+                  ))
+                ] }),
+                /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                          "path",
+                          {
+                            d: "M10 4V16M4 10H16",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          isOpen && options.length > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ jsx("span", { className: "rh-text-sm rh-font-normal", children: option.label }),
+                      /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                                "path",
+                                {
+                                  d: "M2 6L5 9L10 3",
+                                  stroke: "white",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ) }, option.value);
+              }) })
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: `${inputId}-helper`,
+              className: [
+                "rh-flex rh-items-center rh-gap-1 rh-text-xs",
+                helperStatusClasses3[status]
+              ].join(" "),
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var ProgressBar = 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__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: [
+            "rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-sans",
+            className
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
+              label && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              "div",
+              {
+                className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
+                style: { backgroundColor: bgColor || "#E5E7EB" },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
+                    style: {
+                      width: `${clampedValue}%`,
+                      backgroundColor: barColor || "#538CC6"
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: [
+          "rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-sans",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
+              style: { backgroundColor: bgColor || "#E5E7EB" },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
+                  style: {
+                    width: `${clampedValue}%`,
+                    backgroundColor: barColor || "#538CC6"
+                  }
+                }
+              )
+            }
+          ),
+          showPercentage && /* @__PURE__ */ 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",
@@ -1961,12 +2353,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",
@@ -1999,8 +2391,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(" "),
@@ -2022,8 +2414,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"
@@ -2046,7 +2438,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",
@@ -2081,7 +2473,7 @@ var Card = 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" : "",
@@ -2129,7 +2521,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",
@@ -2156,7 +2548,7 @@ var Spinner = forwardRef(function Spinner2({ size = "md", color = "primary", lab
       "aria-label": label,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center",
-        sizeClasses10[size],
+        sizeClasses11[size],
         colorClass,
         className
       ].filter(Boolean).join(" "),
@@ -2199,7 +2591,7 @@ var Spinner = forwardRef(function Spinner2({ size = "md", color = "primary", lab
     }
   );
 });
-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" }
@@ -2279,7 +2671,7 @@ 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",
               stickyHeader ? "rh-sticky rh-top-0 rh-bg-surface rh-z-10" : "",
@@ -2340,7 +2732,7 @@ function TableInner({
                 "td",
                 {
                   className: [
-                    sizeClasses11[size].cell,
+                    sizeClasses12[size].cell,
                     alignClasses[column.align || "left"],
                     "rh-text-text"
                   ].filter(Boolean).join(" "),
@@ -2526,6 +2918,6 @@ var GridItem = forwardRef(
   }
 );
 
-export { Avatar, Button, Card, CardContent, CardFooter, CardHeader, Checkbox, CloseIcon, Container, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, PlusIcon, RehagroProvider, SearchIcon, Select, Spinner, SuccessIcon, Table, Tag, TextInput, Toast, ToastContainer, ToastProvider, ToggleGroup, Tooltip, WarningIcon, useToast };
+export { Avatar, Button, Card, CardContent, CardFooter, CardHeader, Checkbox, CloseIcon, Container, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, PlusIcon, ProgressBar, RehagroProvider, SearchIcon, Select, Spinner, SuccessIcon, Table, Tag, TagInput, TextInput, Toast, ToastContainer, ToastProvider, ToggleGroup, Tooltip, WarningIcon, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map