@rehagro/ui 1.0.46 → 1.0.48

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
 
@@ -1111,6 +1112,7 @@ var TextInput = forwardRef(function TextInput2({
   className = "",
   wrapperClassName = "",
   borderColor,
+  backgroundColor,
   borderWidth = "sm",
   id,
   ...rest
@@ -1120,6 +1122,10 @@ var TextInput = forwardRef(function TextInput2({
   const [isHelperDismissed, setIsHelperDismissed] = React9.useState(false);
   const { onChange, ...inputProps } = rest;
   const visualStatus = helperText && isHelperDismissed ? "default" : status;
+  const containerStyle = {
+    ...borderColor ? { borderColor } : {},
+    ...!disabled && backgroundColor ? { backgroundColor } : {}
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1139,7 +1145,7 @@ var TextInput = forwardRef(function TextInput2({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            style: borderColor ? { borderColor } : void 0,
+            style: containerStyle,
             className: [
               "rh-flex rh-items-center rh-gap-2",
               "rh-bg-surface rh-font-body",
@@ -1587,7 +1593,8 @@ var Select = forwardRef(function Select2(props, ref) {
     disabled = false,
     className = "",
     wrapperClassName = "",
-    multiple = false
+    multiple = false,
+    backgroundColor
   } = props;
   const triggerId = React9.useId();
   const listboxId = React9.useId();
@@ -1766,9 +1773,11 @@ var Select = 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],
@@ -1792,7 +1801,7 @@ var Select = 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(" ")
                 }
@@ -2911,6 +2920,390 @@ var Spinner = forwardRef(function Spinner2({ size = "md", color = "primary", lab
     }
   );
 });
+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__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "rh-w-5 rh-h-5", "aria-hidden": "true", children: /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "rh-w-5 rh-h-5", "aria-hidden": "true", children: /* @__PURE__ */ 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] = useState(
+    selectedDate ? selectedDate.getFullYear() : today.getFullYear()
+  );
+  const [viewMonth, setViewMonth] = useState(
+    selectedDate ? selectedDate.getMonth() : today.getMonth()
+  );
+  const [tempDate, setTempDate] = useState(selectedDate);
+  const dropdownRef = useRef(null);
+  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 createPortal(
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "rh-flex rh-items-center rh-justify-between", children: [
+            /* @__PURE__ */ 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__ */ jsx(ChevronLeftIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: [
+              MONTHS_PT[viewMonth],
+              " - ",
+              viewYear
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(ChevronRightIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "rh-grid rh-grid-cols-7", children: DAYS_SHORT.map((d, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rh-text-center rh-text-xs rh-text-text-muted rh-font-medium rh-py-1",
+              children: d
+            },
+            i
+          )) }),
+          /* @__PURE__ */ 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__ */ jsx("path", { d: "M0 0.5H350", stroke: "#F5F5F5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "rh-grid rh-grid-cols-7 rh-gap-0", children: [
+            Array.from({ length: firstDay }).map((_, i) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "rh-flex rh-justify-end rh-gap-2 rh-mt-4", children: /* @__PURE__ */ 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] = useState(false);
+  const [dropdownStyle, setDropdownStyle] = useState({});
+  const containerRef = 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);
+  };
+  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);
+  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__ */ jsxs("div", { ref: containerRef, className: `rh-relative ${className}`, children: [
+    /* @__PURE__ */ 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__ */ 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: displayBg || "transparent",
+              fontFamily: "Inter, sans-serif",
+              color: displayBg ? "white" : "inherit"
+            },
+            children: displayLabel
+          }
+        ) })
+      }
+    ),
+    type === "select" && 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
+    ),
+    type === "date" && isOpen && /* @__PURE__ */ 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" },
@@ -2935,6 +3328,12 @@ function TableInner({
   stickyHeader = false,
   headerStyle,
   headerTextClassName,
+  headerTextStyle,
+  bodyBackground,
+  bodyTextStyle,
+  rowPadding,
+  addRowButton,
+  onAddRow,
   className = "",
   ...rest
 }, ref) {
@@ -2976,34 +3375,86 @@ 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();
+  const isEditableCell = (column) => {
+    if (!column.editable || !column.editableValue) return false;
+    if (column.type === "date") return true;
+    return !!column.choices;
+  };
+  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",
@@ -3041,6 +3492,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",
@@ -3049,18 +3501,57 @@ 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: [
+                    isEditableCell(column) ? /* @__PURE__ */ 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__ */ 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
+              ] })
+            }
+          ) })
         ] })
       ]
     }