@rehagro/ui 1.0.45 → 1.0.47

package/dist/index.mjs

@@ -1,6 +1,7 @@
 "use client";
 import React9, { forwardRef, createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/provider/RehagroProvider.tsx
 
@@ -1099,6 +1100,7 @@ var getSubtitleClassName = (subtitle) => subtitle.trim() === "*" ? "rh-text-dang
 var TextInput = forwardRef(function TextInput2({
   label,
   labelWeight = "medium",
+  labelColor = "#080B12",
   subtitle,
   status = "default",
   size = "md",
@@ -1125,7 +1127,14 @@ var TextInput = forwardRef(function TextInput2({
       className: ["rh-flex rh-flex-col rh-gap-[0.5rem] rh-font-body", 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 ${labelWeightClasses[labelWeight]} rh-text-text`, children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `rh-text-sm ${labelWeightClasses[labelWeight]}`,
+              style: { color: labelColor },
+              children: label
+            }
+          ),
           subtitle && /* @__PURE__ */ jsx("span", { className: `rh-text-sm ${getSubtitleClassName(subtitle)}`, children: subtitle })
         ] }),
         /* @__PURE__ */ jsxs(
@@ -1180,8 +1189,9 @@ var TextInput = forwardRef(function TextInput2({
                 "span",
                 {
                   className: [
-                    "rh-inline-flex rh-shrink-0 rh-text-text-muted",
-                    iconSizeClasses[size]
+                    "rh-inline-flex rh-shrink-0 rh-items-center rh-justify-center rh-whitespace-nowrap rh-text-text-muted",
+                    iconSizeClasses[size],
+                    "rh-w-auto rh-min-w-fit"
                   ].join(" "),
                   "aria-hidden": "true",
                   children: rightIcon
@@ -2902,6 +2912,103 @@ var Spinner = forwardRef(function Spinner2({ size = "md", color = "primary", lab
     }
   );
 });
+var CustomSelect = ({ options, value, onChange, className = "" }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownStyle, setDropdownStyle] = useState({});
+  const containerRef = useRef(null);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleOpen = () => {
+    if (!isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownStyle({
+        position: "fixed",
+        top: rect.bottom + 4,
+        left: rect.left,
+        zIndex: 2
+      });
+    }
+    setIsOpen((prev) => !prev);
+  };
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `rh-relative ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpen,
+        className: "rh-w-full rh-h-full rh-flex rh-items-center rh-justify-between rh-py-1 rh-bg-transparent hover:rh-bg-background/50 rh-cursor-pointer rh-text-left",
+        children: /* @__PURE__ */ jsx("div", { className: "rh-flex rh-items-center rh-gap-2 rh-flex-1 rh-truncate", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "rh-truncate rh-text-[14px] rh-px-2 rh-py-1 rh-rounded-xl",
+            style: {
+              backgroundColor: selectedOption?.backgroundColor || "transparent",
+              fontFamily: "Inter, sans-serif",
+              color: selectedOption?.backgroundColor ? "white" : "inherit"
+            },
+            children: selectedOption?.label || value
+          }
+        ) })
+      }
+    ),
+    isOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...dropdownStyle,
+            boxShadow: "0 10px 20px 0 rgba(0, 0, 0, 0.05)"
+          },
+          className: "rh-bg-surface rh-border rh-border-border rh-rounded-xs rh-max-h-60 rh-overflow-auto rh-pr-3",
+          children: options.map((option) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                onChange(option.value);
+                setIsOpen(false);
+              },
+              className: "rh-flex rh-items-center rh-gap-2 rh-px-3 rh-py-2 rh-text-left hover:rh-bg-background/50 rh-cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "rh-w-4 rh-h-4", children: option.value === value && /* @__PURE__ */ jsx("svg", { width: "13", height: "10", viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12.7826 1.2813L4.78255 9.2813C4.71287 9.35122 4.63008 9.4067 4.53891 9.44455C4.44775 9.48241 4.35001 9.50189 4.2513 9.50189C4.15259 9.50189 4.05485 9.48241 3.96369 9.44455C3.87252 9.4067 3.78973 9.35122 3.72005 9.2813L0.220051 5.7813C0.150286 5.71154 0.0949458 5.62871 0.0571893 5.53756C0.0194329 5.44641 1.03958e-09 5.34871 0 5.25005C-1.03958e-09 5.15139 0.0194329 5.05369 0.0571893 4.96254C0.0949458 4.87139 0.150286 4.78857 0.220051 4.7188C0.289816 4.64904 0.372638 4.5937 0.46379 4.55594C0.554942 4.51818 0.652639 4.49875 0.751301 4.49875C0.849963 4.49875 0.947659 4.51818 1.03881 4.55594C1.12996 4.5937 1.21279 4.64904 1.28255 4.7188L4.25193 7.68818L11.7213 0.220051C11.8622 0.0791546 12.0533 0 12.2526 0C12.4518 0 12.6429 0.0791546 12.7838 0.220051C12.9247 0.360947 13.0039 0.552044 13.0039 0.751301C13.0039 0.950559 12.9247 1.14165 12.7838 1.28255L12.7826 1.2813Z",
+                    fill: "#374151"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "rh-truncate rh-p-1 rh-px-2 rh-rounded-xl rh-text-white rh-text-[14px]",
+                    style: {
+                      backgroundColor: option.backgroundColor || "transparent",
+                      fontFamily: "Inter, sans-serif"
+                    },
+                    children: option.label
+                  }
+                )
+              ]
+            },
+            option.value
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+};
 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" },
@@ -2926,6 +3033,12 @@ function TableInner({
   stickyHeader = false,
   headerStyle,
   headerTextClassName,
+  headerTextStyle,
+  bodyBackground,
+  bodyTextStyle,
+  rowPadding,
+  addRowButton,
+  onAddRow,
   className = "",
   ...rest
 }, ref) {
@@ -2967,34 +3080,81 @@ function TableInner({
   };
   const isEmpty = !loading && data.length === 0;
   const colSpan = columns.length;
-  return /* @__PURE__ */ jsx("div", { className: "rh-w-full rh-overflow-x-auto", children: /* @__PURE__ */ jsxs(
+  const headerTextStyleInline = {
+    color: headerTextStyle?.color,
+    fontFamily: headerTextStyle?.fontFamily,
+    fontSize: headerTextStyle?.fontSize,
+    fontWeight: headerTextStyle?.fontWeight
+  };
+  const bodyStyleInline = {
+    color: bodyTextStyle?.color,
+    fontFamily: bodyTextStyle?.fontFamily,
+    fontSize: bodyTextStyle?.fontSize,
+    fontWeight: bodyTextStyle?.fontWeight
+  };
+  const getRowPaddingStyle = () => {
+    if (typeof rowPadding === "string") {
+      return { padding: rowPadding };
+    }
+    if (typeof rowPadding === "object") {
+      const style = {};
+      if (rowPadding.x) {
+        style.paddingLeft = rowPadding.x;
+        style.paddingRight = rowPadding.x;
+      }
+      if (rowPadding.y) {
+        style.paddingTop = rowPadding.y;
+        style.paddingBottom = rowPadding.y;
+      }
+      return style;
+    }
+    return {};
+  };
+  const rowPaddingStyle = getRowPaddingStyle();
+  return /* @__PURE__ */ jsx("div", { className: "rh-w-full rh-rounded rh-overflow-hidden", children: /* @__PURE__ */ jsxs(
     "table",
     {
       ref,
+      style: { backgroundColor: bodyBackground },
       className: ["rh-w-full rh-border-collapse rh-font-body", className].filter(Boolean).join(" "),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "rh-border-b rh-border-border", style: headerStyle, children: columns.map((column) => /* @__PURE__ */ jsx(
-          "th",
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
+          "tr",
           {
-            scope: "col",
-            style: { width: column.width },
-            className: [
-              sizeClasses12[size].header,
-              alignClasses[column.align || "left"],
-              `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(" "),
-            onClick: () => handleSort(column),
-            children: /* @__PURE__ */ jsxs("span", { className: "rh-inline-flex rh-items-center", children: [
-              column.header,
-              renderSortIcon(column)
-            ] })
-          },
-          column.key
-        )) }) }),
-        /* @__PURE__ */ jsxs("tbody", { children: [
+            className: "rh-border-b rh-border-border",
+            style: {
+              backgroundColor: headerStyle?.backgroundColor,
+              height: headerStyle?.height,
+              border: headerStyle?.border
+            },
+            children: columns.map((column) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                style: {
+                  width: column.width,
+                  maxWidth: column.maxWidth,
+                  ...rowPaddingStyle
+                },
+                className: [
+                  rowPadding ? "" : sizeClasses12[size].header,
+                  alignClasses[column.align || "left"],
+                  `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(" "),
+                onClick: () => handleSort(column),
+                children: /* @__PURE__ */ jsxs("span", { className: "rh-inline-flex rh-items-center", style: headerTextStyleInline, children: [
+                  column.header,
+                  renderSortIcon(column)
+                ] })
+              },
+              column.key
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("tbody", { style: { backgroundColor: bodyBackground }, children: [
           loading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, className: "rh-text-center rh-py-8", children: loadingContent || /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-justify-center rh-gap-2 rh-text-text-muted", children: [
             /* @__PURE__ */ jsxs(
               "svg",
@@ -3032,6 +3192,7 @@ function TableInner({
           !loading && data.map((row, index) => /* @__PURE__ */ jsx(
             "tr",
             {
+              style: bodyStyleInline,
               className: [
                 "rh-border-b rh-border-border rh-transition-colors",
                 "hover:rh-bg-background",
@@ -3040,18 +3201,56 @@ function TableInner({
               children: columns.map((column) => /* @__PURE__ */ jsx(
                 "td",
                 {
+                  style: { width: column.width, maxWidth: column.maxWidth, ...rowPaddingStyle },
                   className: [
-                    sizeClasses12[size].cell,
+                    rowPadding ? "" : sizeClasses12[size].cell,
                     alignClasses[column.align || "left"],
                     "rh-text-text"
                   ].filter(Boolean).join(" "),
-                  children: column.render(row, index)
+                  children: /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-justify-between rh-gap-2", children: [
+                    column.editable && column.choices && column.editableValue ? /* @__PURE__ */ jsx(
+                      CustomSelect,
+                      {
+                        options: column.choices,
+                        value: column.editableValue(row),
+                        onChange: (value) => column.onEditChange?.(row, index, value),
+                        className: "rh-w-full rh-h-full"
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { children: column.render(row, index) }),
+                    column.actionIcon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "rh-cursor-pointer hover:rh-bg-background/50 rh-p-1 rh-rounded",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          column.actionIcon?.onClick(row, index);
+                        },
+                        children: column.actionIcon.icon
+                      }
+                    )
+                  ] })
                 },
                 column.key
               ))
             },
             rowKey(row, index)
-          ))
+          )),
+          addRowButton && !loading && /* @__PURE__ */ jsx("tr", { className: "rh-border-border hover:rh-bg-background/100 rh-rounde-lg", children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan,
+              style: rowPaddingStyle,
+              className: [
+                rowPadding ? "" : sizeClasses12[size].cell,
+                "rh-text-center rh-cursor-pointer rh-text-[#9CA3AF] rh-font-medium"
+              ].filter(Boolean).join(" "),
+              onClick: onAddRow,
+              children: /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-justify-center rh-gap-2 rh-h-6 rh-font-bold rh-text-sm", children: [
+                addRowButton.icon,
+                addRowButton.text
+              ] })
+            }
+          ) })
         ] })
       ]
     }