@rehagro/ui 1.0.46 → 1.0.48

package/dist/index.js

@@ -3,6 +3,7 @@
 
 var React9 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1117,6 +1118,7 @@ var TextInput = React9.forwardRef(function TextInput2({
   className = "",
   wrapperClassName = "",
   borderColor,
+  backgroundColor,
   borderWidth = "sm",
   id,
   ...rest
@@ -1126,6 +1128,10 @@ var TextInput = React9.forwardRef(function TextInput2({
   const [isHelperDismissed, setIsHelperDismissed] = React9__default.default.useState(false);
   const { onChange, ...inputProps } = rest;
   const visualStatus = helperText && isHelperDismissed ? "default" : status;
+  const containerStyle = {
+    ...borderColor ? { borderColor } : {},
+    ...!disabled && backgroundColor ? { backgroundColor } : {}
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1145,7 +1151,7 @@ var TextInput = React9.forwardRef(function TextInput2({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            style: borderColor ? { borderColor } : void 0,
+            style: containerStyle,
             className: [
               "rh-flex rh-items-center rh-gap-2",
               "rh-bg-surface rh-font-body",
@@ -1593,7 +1599,8 @@ var Select = React9.forwardRef(function Select2(props, ref) {
     disabled = false,
     className = "",
     wrapperClassName = "",
-    multiple = false
+    multiple = false,
+    backgroundColor
   } = props;
   const triggerId = React9__default.default.useId();
   const listboxId = React9__default.default.useId();
@@ -1772,9 +1779,11 @@ var Select = React9.forwardRef(function Select2(props, ref) {
             disabled,
             onClick: () => !disabled && setIsOpen((o) => !o),
             onKeyDown: handleKeyDown,
+            style: backgroundColor ? { backgroundColor } : void 0,
             className: [
               "rh-group rh-flex rh-items-center rh-justify-between rh-gap-2",
-              "rh-border rh-bg-surface rh-font-body",
+              "rh-border rh-font-body",
+              !backgroundColor && "rh-bg-surface",
               "rh-transition-colors rh-duration-150",
               "rh-text-left rh-w-full",
               statusClasses2[visualStatus],
@@ -1798,7 +1807,7 @@ var Select = React9.forwardRef(function Select2(props, ref) {
                 ChevronIcon,
                 {
                   className: [
-                    "rh-w-5 rh-h-5 rh-shrink-0 rh-text-text-muted rh-transition-transform rh-duration-150",
+                    "rh-w-4 rh-h-4 rh-shrink-0 rh-text-text-muted rh-transition-transform rh-duration-150 rh-bg-surface rh-rounded-xl",
                     isOpen ? "rh-rotate-180" : ""
                   ].filter(Boolean).join(" ")
                 }
@@ -2917,6 +2926,390 @@ var Spinner = React9.forwardRef(function Spinner2({ size = "md", color = "primar
     }
   );
 });
+var DAYS_SHORT = ["D", "S", "T", "Q", "Q", "S", "S"];
+var MONTHS_PT = [
+  "Janeiro",
+  "Fevereiro",
+  "Mar\xE7o",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+function parseDate(value) {
+  if (!value) return null;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    const [y, m, d] = value.split("-").map(Number);
+    return new Date(y, m - 1, d);
+  }
+  if (/^\d{2}\/\d{2}\/\d{4}$/.test(value)) {
+    const [d, m, y] = value.split("/").map(Number);
+    return new Date(y, m - 1, d);
+  }
+  return null;
+}
+function formatISO(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function formatDisplay(date) {
+  const d = String(date.getDate()).padStart(2, "0");
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const y = date.getFullYear();
+  return `${d}/${m}/${y}`;
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+var ChevronLeftIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "rh-w-5 rh-h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z",
+    clipRule: "evenodd"
+  }
+) });
+var ChevronRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "rh-w-5 rh-h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M7.21 14.77a.75.75 0 010-1.06L11.168 10 7.23 6.29a.75.75 0 011.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+    clipRule: "evenodd"
+  }
+) });
+var DatePickerDropdown = ({
+  style,
+  selectedDate,
+  onSelect,
+  onClose,
+  containerRef
+}) => {
+  const today = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = React9.useState(
+    selectedDate ? selectedDate.getFullYear() : today.getFullYear()
+  );
+  const [viewMonth, setViewMonth] = React9.useState(
+    selectedDate ? selectedDate.getMonth() : today.getMonth()
+  );
+  const [tempDate, setTempDate] = React9.useState(selectedDate);
+  const dropdownRef = React9.useRef(null);
+  React9.useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && containerRef.current && !containerRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose, containerRef]);
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  };
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+  const prevMonthDays = getDaysInMonth(
+    viewMonth === 0 ? viewYear - 1 : viewYear,
+    viewMonth === 0 ? 11 : viewMonth - 1
+  );
+  const totalCells = firstDay + daysInMonth;
+  const trailingCount = totalCells % 7 === 0 ? 0 : 7 - totalCells % 7;
+  const isSelected = (day) => !!tempDate && tempDate.getFullYear() === viewYear && tempDate.getMonth() === viewMonth && tempDate.getDate() === day;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        style: {
+          ...style,
+          boxShadow: "0 0 9.6px 0 rgba(8, 11, 18, 0.08)",
+          width: 260
+        },
+        className: "rh-bg-surface rh-rounded-xs rh-p-5 rh-select-none rh-font-body",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  prevMonth();
+                },
+                className: "rh-p-1 hover:rh-bg-background rh-rounded rh-cursor-pointer rh-text-text",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: [
+              MONTHS_PT[viewMonth],
+              " - ",
+              viewYear
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  nextMonth();
+                },
+                className: "rh-p-1 hover:rh-bg-background rh-rounded rh-cursor-pointer rh-text-text",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-grid rh-grid-cols-7", children: DAYS_SHORT.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "rh-text-center rh-text-xs rh-text-text-muted rh-font-medium rh-py-1",
+              children: d
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "100%",
+              height: "1",
+              viewBox: "0 0 350 1",
+              fill: "none",
+              className: "rh-mb-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0.5H350", stroke: "#F5F5F5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-grid rh-grid-cols-7 rh-gap-0", children: [
+            Array.from({ length: firstDay }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "rh-w-7 rh-h-7 rh-flex rh-items-center rh-justify-center rh-text-sm rh-text-text-muted rh-opacity-40",
+                children: prevMonthDays - firstDay + i + 1
+              },
+              `prev-${i}`
+            )),
+            Array.from({ length: daysInMonth }).map((_, i) => {
+              const day = i + 1;
+              const selected = isSelected(day);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  style: { backgroundColor: selected ? "#15607A" : "transparent" },
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    setTempDate(new Date(viewYear, viewMonth, day));
+                  },
+                  className: [
+                    "rh-w-7 rh-h-7 rh-flex rh-items-center rh-justify-center rh-text-sm rh-rounded-lg rh-transition-colors rh-duration-150 rh-cursor-pointer",
+                    selected ? "rh-text-surface" : "rh-text-text hover:rh-ring-1 hover:rh-ring-[#15607A] hover:rh-bg-transparent"
+                  ].join(" "),
+                  children: day
+                },
+                day
+              );
+            }),
+            Array.from({ length: trailingCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "rh-w-7 rh-h-7 rh-flex rh-items-center rh-justify-center rh-text-sm rh-text-text-muted rh-opacity-40",
+                children: i + 1
+              },
+              `next-${i}`
+            ))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-justify-end rh-gap-2 rh-mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: { backgroundColor: "#87A851" },
+              onClick: () => {
+                if (tempDate) {
+                  onSelect(tempDate);
+                }
+                onClose();
+              },
+              className: "rh-text-sm rh-font-medium rh-px-4 rh-py-1.5 rh-rounded-lg rh-transition-colors rh-duration-150 rh-bg-success rh-text-surface",
+              children: "Aplicar"
+            }
+          ) })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+var CustomSelect = ({
+  options = [],
+  value,
+  onChange,
+  className = "",
+  type = "select"
+}) => {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [dropdownStyle, setDropdownStyle] = React9.useState({});
+  const containerRef = React9.useRef(null);
+  const calcPosition = () => {
+    if (!containerRef.current) return {};
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const DROPDOWN_HEIGHT = 320;
+    const openUpward = spaceBelow < DROPDOWN_HEIGHT && spaceAbove > spaceBelow;
+    return {
+      position: "fixed",
+      ...openUpward ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
+      left: rect.left,
+      zIndex: 2
+    };
+  };
+  const openDropdown = () => {
+    if (!isOpen) setDropdownStyle(calcPosition());
+    setIsOpen((prev) => !prev);
+  };
+  React9.useEffect(() => {
+    if (!isOpen) return;
+    const close = () => setIsOpen(false);
+    window.addEventListener("scroll", close, { capture: true, passive: true });
+    window.addEventListener("resize", close, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", close, { capture: true });
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen]);
+  const selectedOption = options.find((opt) => opt.value === value);
+  React9.useEffect(() => {
+    if (type !== "select") return;
+    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, type]);
+  const selectedDate = type === "date" ? parseDate(value) : null;
+  const handleDateSelect = (date) => {
+    if (date) {
+      onChange(formatISO(date));
+    }
+    setIsOpen(false);
+  };
+  const displayLabel = type === "date" ? selectedDate ? formatDisplay(selectedDate) : value || "\u2014" : selectedOption?.label || value;
+  const displayBg = type === "date" ? void 0 : selectedOption?.backgroundColor;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `rh-relative ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: openDropdown,
+        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__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-gap-2 rh-flex-1 rh-truncate", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "rh-truncate rh-text-[14px] rh-px-2 rh-py-1 rh-rounded-xl",
+            style: {
+              backgroundColor: displayBg || "transparent",
+              fontFamily: "Inter, sans-serif",
+              color: displayBg ? "white" : "inherit"
+            },
+            children: displayLabel
+          }
+        ) })
+      }
+    ),
+    type === "select" && isOpen && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "rh-w-4 rh-h-4", children: option.value === value && /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "13",
+                    height: "10",
+                    viewBox: "0 0 13 10",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+    ),
+    type === "date" && isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      DatePickerDropdown,
+      {
+        style: dropdownStyle,
+        selectedDate,
+        onSelect: handleDateSelect,
+        onClose: () => setIsOpen(false),
+        containerRef
+      }
+    )
+  ] });
+};
 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" },
@@ -2941,6 +3334,12 @@ function TableInner({
   stickyHeader = false,
   headerStyle,
   headerTextClassName,
+  headerTextStyle,
+  bodyBackground,
+  bodyTextStyle,
+  rowPadding,
+  addRowButton,
+  onAddRow,
   className = "",
   ...rest
 }, ref) {
@@ -2982,34 +3381,86 @@ function TableInner({
   };
   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(
+  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();
+  const isEditableCell = (column) => {
+    if (!column.editable || !column.editableValue) return false;
+    if (column.type === "date") return true;
+    return !!column.choices;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-full rh-rounded rh-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
       ref,
+      style: { backgroundColor: bodyBackground },
       className: ["rh-w-full rh-border-collapse rh-font-body", 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",
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "rh-inline-flex rh-items-center", children: [
-              column.header,
-              renderSortIcon(column)
-            ] })
-          },
-          column.key
-        )) }) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "rh-inline-flex rh-items-center", style: headerTextStyleInline, children: [
+                  column.header,
+                  renderSortIcon(column)
+                ] })
+              },
+              column.key
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("tbody", { style: { backgroundColor: bodyBackground }, 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",
@@ -3047,6 +3498,7 @@ function TableInner({
           !loading && data.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
             "tr",
             {
+              style: bodyStyleInline,
               className: [
                 "rh-border-b rh-border-border rh-transition-colors",
                 "hover:rh-bg-background",
@@ -3055,18 +3507,57 @@ function TableInner({
               children: columns.map((column) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-between rh-gap-2", children: [
+                    isEditableCell(column) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      CustomSelect,
+                      {
+                        type: column.type ?? "select",
+                        options: column.choices,
+                        value: column.editableValue(row),
+                        onChange: (value) => column.onEditChange?.(row, index, value),
+                        className: "rh-w-full rh-h-full"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.render(row, index) }),
+                    column.actionIcon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tr", { className: "rh-border-border hover:rh-bg-background/100 rh-rounde-lg", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+              ] })
+            }
+          ) })
         ] })
       ]
     }