@rehagro/ui 1.0.52 → 1.0.54

package/dist/index.d.mts

@@ -801,6 +801,7 @@ type CustomSelectOption = {
     value: string;
     label: string;
     backgroundColor?: string;
+    textColor?: string;
 };
 
 type TableSize = "sm" | "md" | "lg";
@@ -828,14 +829,22 @@ type TableColumn<T> = {
     actionIcon?: ColumnActionIcon<T>;
     /** Whether this column is editable with a dropdown */
     editable?: boolean;
-    /** Type of editable field: "select" (default) or "date" */
-    type?: "select" | "date";
+    /** Type of editable field: "select" (default), "date", or "textInput" */
+    type?: "select" | "date" | "textInput";
     /** List of choices for the editable dropdown (required for type="select") */
     choices?: CustomSelectOption[];
+    /** Placeholder shown when there is no value */
+    editablePlaceholder?: string;
     /** Function to get the current value for the editable field */
     editableValue?: (row: T) => string;
     /** Callback when the editable value changes */
     onEditChange?: (row: T, index: number, value: string) => void;
+    /** Text color for editable field content (select/date/textInput). Can be fixed or derived from the row. */
+    editableTextColor?: string | ((row: T, index: number) => string | undefined);
+    /** Placeholder text color for editable field content. Can be fixed or derived from the row. */
+    editablePlaceholderColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for editable field elements (value chip/control/calendar/input). Can be fixed or derived from the row. */
+    editableBackgroundColor?: string | ((row: T, index: number) => string | undefined);
 };
 type SortDirection = "asc" | "desc" | null;
 type TableSort = {

package/dist/index.d.ts

@@ -801,6 +801,7 @@ type CustomSelectOption = {
     value: string;
     label: string;
     backgroundColor?: string;
+    textColor?: string;
 };
 
 type TableSize = "sm" | "md" | "lg";
@@ -828,14 +829,22 @@ type TableColumn<T> = {
     actionIcon?: ColumnActionIcon<T>;
     /** Whether this column is editable with a dropdown */
     editable?: boolean;
-    /** Type of editable field: "select" (default) or "date" */
-    type?: "select" | "date";
+    /** Type of editable field: "select" (default), "date", or "textInput" */
+    type?: "select" | "date" | "textInput";
     /** List of choices for the editable dropdown (required for type="select") */
     choices?: CustomSelectOption[];
+    /** Placeholder shown when there is no value */
+    editablePlaceholder?: string;
     /** Function to get the current value for the editable field */
     editableValue?: (row: T) => string;
     /** Callback when the editable value changes */
     onEditChange?: (row: T, index: number, value: string) => void;
+    /** Text color for editable field content (select/date/textInput). Can be fixed or derived from the row. */
+    editableTextColor?: string | ((row: T, index: number) => string | undefined);
+    /** Placeholder text color for editable field content. Can be fixed or derived from the row. */
+    editablePlaceholderColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for editable field elements (value chip/control/calendar/input). Can be fixed or derived from the row. */
+    editableBackgroundColor?: string | ((row: T, index: number) => string | undefined);
 };
 type SortDirection = "asc" | "desc" | null;
 type TableSort = {

package/dist/index.js

@@ -2114,6 +2114,21 @@ var DateSelect = React9.forwardRef(
       if (!isControlled) setInternalValue(newValue);
       props.onChange?.(newValue);
     };
+    const handleMonthClear = () => {
+      const newValue = { mode: "month" };
+      if (!isControlled) setInternalValue(newValue);
+      props.onChange?.(newValue);
+    };
+    const handleDayClear = () => {
+      const newValue = { mode: "day" };
+      if (!isControlled) setInternalValue(newValue);
+      props.onChange?.(newValue);
+    };
+    const handleYearClear = () => {
+      const newValue = { mode: "year" };
+      if (!isControlled) setInternalValue(newValue);
+      props.onChange?.(newValue);
+    };
     const displayText = React9.useMemo(() => {
       if (value.mode === "year" && value.year) return value.year.toString();
       if (value.mode === "month" && value.year != null)
@@ -2234,7 +2249,18 @@ var DateSelect = React9.forwardRef(
           },
           year
         );
-      }) })
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-justify-between rh-pt-3 rh-mt-3 rh-border-t rh-border-border/30", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleYearClear,
+          className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(EraserIcon, { className: "rh-w-4 rh-h-4" }),
+            "Limpar"
+          ]
+        }
+      ) })
     ] });
     const renderMonthGrid = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-p-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-between", children: [
@@ -2282,7 +2308,18 @@ var DateSelect = React9.forwardRef(
           },
           month
         );
-      }) })
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-justify-between rh-pt-3 rh-mt-3 rh-border-t rh-border-border/30", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleMonthClear,
+          className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(EraserIcon, { className: "rh-w-4 rh-h-4" }),
+            "Limpar"
+          ]
+        }
+      ) })
     ] });
     const renderIntervalNav = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-gap-4 rh-p-1", children: [
@@ -2540,7 +2577,18 @@ var DateSelect = React9.forwardRef(
               },
               i
             )) }),
-            renderDayGrid(selectedYear, selectedMonth)
+            renderDayGrid(selectedYear, selectedMonth),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-justify-between rh-pt-3 rh-mt-3 rh-border-t rh-border-border/30", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleDayClear,
+                className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(EraserIcon, { className: "rh-w-4 rh-h-4" }),
+                  "Limpar"
+                ]
+              }
+            ) })
           ] });
         case "month":
           return renderMonthGrid();
@@ -3730,7 +3778,7 @@ var DAYS_SHORT = ["D", "S", "T", "Q", "Q", "S", "S"];
 var MONTHS_PT = [
   "Janeiro",
   "Fevereiro",
-  "Mar\xE7o",
+  "Marco",
   "Abril",
   "Maio",
   "Junho",
@@ -3771,6 +3819,17 @@ function getDaysInMonth(year, month) {
 function getFirstDayOfMonth(year, month) {
   return new Date(year, month, 1).getDay();
 }
+function removeHexAlpha(color) {
+  if (!color) return color;
+  if (/^#[0-9a-fA-F]{4}$/.test(color)) {
+    const [, r, g, b] = color;
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  if (/^#[0-9a-fA-F]{8}$/.test(color)) {
+    return color.slice(0, 7);
+  }
+  return color;
+}
 var ChevronLeftIcon2 = () => /* @__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",
   {
@@ -3792,15 +3851,17 @@ var DatePickerDropdown = ({
   selectedDate,
   onSelect,
   onClose,
-  containerRef
+  containerRef,
+  backgroundColor,
+  textColor
 }) => {
   const today = /* @__PURE__ */ new Date();
+  const opaqueBackgroundColor = removeHexAlpha(backgroundColor);
+  const calendarTextStyle = textColor ? { color: textColor } : void 0;
   const [viewYear, setViewYear] = React9.useState(
     selectedDate ? selectedDate.getFullYear() : today.getFullYear()
   );
-  const [viewMonth, setViewMonth] = React9.useState(
-    selectedDate ? selectedDate.getMonth() : today.getMonth()
-  );
+  const [viewMonth, setViewMonth] = React9.useState(selectedDate ? selectedDate.getMonth() : today.getMonth());
   const [tempDate, setTempDate] = React9.useState(selectedDate);
   const dropdownRef = React9.useRef(null);
   React9.useEffect(() => {
@@ -3831,12 +3892,8 @@ var DatePickerDropdown = ({
   };
   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 prevMonthDays = getDaysInMonth(viewMonth === 0 ? viewYear - 1 : viewYear, viewMonth === 0 ? 11 : viewMonth - 1);
+  const trailingCount = (firstDay + daysInMonth) % 7 === 0 ? 0 : 7 - (firstDay + daysInMonth) % 7;
   const isSelected = (day) => !!tempDate && tempDate.getFullYear() === viewYear && tempDate.getMonth() === viewMonth && tempDate.getDate() === day;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3845,6 +3902,8 @@ var DatePickerDropdown = ({
         ref: dropdownRef,
         style: {
           ...style,
+          backgroundColor: opaqueBackgroundColor,
+          color: textColor,
           boxShadow: "0 0 9.6px 0 rgba(8, 11, 18, 0.08)",
           width: 260
         },
@@ -3855,6 +3914,7 @@ var DatePickerDropdown = ({
               "button",
               {
                 type: "button",
+                style: calendarTextStyle,
                 onMouseDown: (e) => {
                   e.preventDefault();
                   prevMonth();
@@ -3863,7 +3923,7 @@ var DatePickerDropdown = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon2, {})
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-text-sm rh-font-medium rh-text-text", style: calendarTextStyle, children: [
               MONTHS_PT[viewMonth],
               " - ",
               viewYear
@@ -3872,6 +3932,7 @@ var DatePickerDropdown = ({
               "button",
               {
                 type: "button",
+                style: calendarTextStyle,
                 onMouseDown: (e) => {
                   e.preventDefault();
                   nextMonth();
@@ -3885,31 +3946,14 @@ var DatePickerDropdown = ({
             "div",
             {
               className: "rh-text-center rh-text-xs rh-text-text-muted rh-font-medium rh-py-1",
+              style: calendarTextStyle,
               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.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: 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", style: calendarTextStyle, children: prevMonthDays - firstDay + i + 1 }, `prev-${i}`)),
             Array.from({ length: daysInMonth }).map((_, i) => {
               const day = i + 1;
               const selected = isSelected(day);
@@ -3917,7 +3961,7 @@ var DatePickerDropdown = ({
                 "button",
                 {
                   type: "button",
-                  style: { backgroundColor: selected ? "#15607A" : "transparent" },
+                  style: { backgroundColor: selected ? "#15607A" : "transparent", ...calendarTextStyle },
                   onMouseDown: (e) => {
                     e.preventDefault();
                     setTempDate(new Date(viewYear, viewMonth, day));
@@ -3931,14 +3975,7 @@ var DatePickerDropdown = ({
                 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}`
-            ))
+            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", style: calendarTextStyle, 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",
@@ -3946,9 +3983,7 @@ var DatePickerDropdown = ({
               type: "button",
               style: { backgroundColor: "#87A851" },
               onClick: () => {
-                if (tempDate) {
-                  onSelect(tempDate);
-                }
+                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",
@@ -3966,11 +4001,29 @@ var CustomSelect = ({
   value,
   onChange,
   className = "",
+  placeholder,
+  textColor,
+  placeholderColor,
+  backgroundColor,
   type = "select"
 }) => {
   const [isOpen, setIsOpen] = React9.useState(false);
   const [dropdownStyle, setDropdownStyle] = React9.useState({});
   const containerRef = React9.useRef(null);
+  const textAreaRef = React9.useRef(null);
+  const resizeTextArea = React9__default.default.useCallback(() => {
+    if (type !== "textInput" || !textAreaRef.current) return;
+    const textarea = textAreaRef.current;
+    textarea.style.height = "auto";
+    if (textarea.value) {
+      textarea.style.height = `${textarea.scrollHeight}px`;
+      return;
+    }
+    const previousValue = textarea.value;
+    textarea.value = placeholder || "";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+    textarea.value = previousValue;
+  }, [type, placeholder]);
   const calcPosition = () => {
     if (!containerRef.current) return {};
     const rect = containerRef.current.getBoundingClientRect();
@@ -3999,6 +4052,9 @@ var CustomSelect = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen]);
+  React9.useEffect(() => {
+    resizeTextArea();
+  }, [resizeTextArea, value]);
   const selectedOption = options.find((opt) => opt.value === value);
   React9.useEffect(() => {
     if (type !== "select") return;
@@ -4014,29 +4070,52 @@ var CustomSelect = ({
   }, [isOpen, type]);
   const selectedDate = type === "date" ? parseDate(value) : null;
   const handleDateSelect = (date) => {
-    if (date) {
-      onChange(formatISO(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;
+  const hasValue = value != null && value !== "";
+  const displayLabel = type === "date" ? selectedDate ? formatDisplay(selectedDate) : hasValue ? value : placeholder || "-" : selectedOption?.label || (hasValue ? value : placeholder || "");
+  const displayBg = type === "date" ? backgroundColor : selectedOption?.backgroundColor || backgroundColor;
+  const displayTextColor = type === "date" ? textColor : selectedOption?.textColor || (hasValue ? textColor : placeholderColor) || (displayBg ? "white" : "inherit");
+  if (type === "textInput") {
+    const inputTextColor = textColor || "#111827";
+    const inputPlaceholderColor = placeholderColor || "#9CA3AF";
+    const textInputWrapperClassName = className.replace(/\brh-h-full\b/g, "").trim();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `rh-relative rh-h-full rh-flex rh-items-center ${textInputWrapperClassName}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: textAreaRef,
+          value,
+          placeholder,
+          rows: 1,
+          onInput: (e) => {
+            onChange(e.currentTarget.value);
+            resizeTextArea();
+          },
+          style: {
+            color: inputTextColor,
+            backgroundColor: backgroundColor || "transparent"
+          },
+          className: "rh-table-textarea rh-flex rh-items-center rh-leading-[20px] rh-py-[7px] rh-w-full rh-min-h-[40px] rh-text-sm rh-px-1 rh-border rh-bg-surface rh-rounded-xs rh-border-transparent rh-line-height-[20px] rh-outline-none rh-resize-none rh-overflow-hidden hover:rh-border-primary focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.rh-table-textarea::placeholder { color: ${inputPlaceholderColor}; }` })
+    ] });
+  }
   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(
+        style: { backgroundColor: backgroundColor || void 0 },
+        className: "rh-w-full rh-min-h-[40px] rh-flex rh-items-center rh-border rh-bg-surface rh-rounded-sm rh-border-transparent rh-justify-between rh-py-2 hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 rh-cursor-pointer rh-text-left",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-gap-2 rh-flex-1 rh-px-0.5", 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"
-            },
+            className: "rh-text-[14px] rh-px-2 rh-py-0.5 rh-rounded-xl rh-whitespace-normal rh-break-words",
+            style: { backgroundColor: displayBg || "transparent", fontFamily: "Inter, sans-serif", color: displayTextColor },
             children: displayLabel
           }
         ) })
@@ -4046,11 +4125,8 @@ var CustomSelect = ({
       /* @__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",
+          style: { ...dropdownStyle, backgroundColor: backgroundColor || void 0, boxShadow: "0 10px 20px 0 rgba(0, 0, 0, 0.05)" },
+          className: "rh-border rh-border-border rh-rounded-xs rh-max-h-60 rh-overflow-auto",
           children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -4060,32 +4136,23 @@ var CustomSelect = ({
                 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",
+              className: "rh-flex rh-items-center rh-gap-2 rh-px-3 rh-py-2 rh-text-left hover:rh-bg-background/50 rh-w-full rh-cursor-pointer",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-4 rh-h-4", children: option.value === value && /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-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",
                   {
-                    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"
-                      }
-                    )
+                    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]",
+                    className: "rh-p-0.5 rh-px-2 rh-rounded-xl rh-text-white rh-text-[14px] rh-whitespace-normal rh-break-words",
                     style: {
-                      backgroundColor: option.backgroundColor || "transparent",
-                      fontFamily: "Inter, sans-serif"
+                      backgroundColor: option.backgroundColor || backgroundColor || "transparent",
+                      fontFamily: "Inter, sans-serif",
+                      color: option.textColor || textColor || (option.backgroundColor || backgroundColor ? "white" : "inherit")
                     },
                     children: option.label
                   }
@@ -4105,7 +4172,9 @@ var CustomSelect = ({
         selectedDate,
         onSelect: handleDateSelect,
         onClose: () => setIsOpen(false),
-        containerRef
+        containerRef,
+        backgroundColor,
+        textColor
       }
     )
   ] });
@@ -4214,9 +4283,27 @@ function TableInner({
   const rowPaddingStyle = getRowPaddingStyle();
   const isEditableCell = (column) => {
     if (!column.editable || !column.editableValue) return false;
-    if (column.type === "date") return true;
+    if (column.type === "date" || column.type === "textInput") return true;
     return !!column.choices;
   };
+  const getEditableTextColor = (column, row, index) => {
+    if (typeof column.editableTextColor === "function") {
+      return column.editableTextColor(row, index);
+    }
+    return column.editableTextColor;
+  };
+  const getEditableBackgroundColor = (column, row, index) => {
+    if (typeof column.editableBackgroundColor === "function") {
+      return column.editableBackgroundColor(row, index);
+    }
+    return column.editableBackgroundColor;
+  };
+  const getEditablePlaceholderColor = (column, row, index) => {
+    if (typeof column.editablePlaceholderColor === "function") {
+      return column.editablePlaceholderColor(row, index);
+    }
+    return column.editablePlaceholderColor;
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-full rh-rounded rh-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
@@ -4301,7 +4388,7 @@ function TableInner({
               style: bodyStyleInline,
               className: [
                 "rh-border-b rh-border-border rh-transition-colors",
-                "hover:rh-bg-background",
+                "hover:rh-bg-background/50",
                 variant === "striped" && index % 2 === 1 ? "rh-bg-background/50" : ""
               ].filter(Boolean).join(" "),
               children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -4320,10 +4407,14 @@ function TableInner({
                         type: column.type ?? "select",
                         options: column.choices,
                         value: column.editableValue(row),
+                        placeholder: column.editablePlaceholder,
+                        textColor: getEditableTextColor(column, row, index),
+                        placeholderColor: getEditablePlaceholderColor(column, row, index),
+                        backgroundColor: getEditableBackgroundColor(column, row, index),
                         onChange: (value) => column.onEditChange?.(row, index, value),
                         className: "rh-w-full rh-h-full"
                       }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.render(row, index) }),
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: "100%" }, children: column.render(row, index) }),
                     column.actionIcon && /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
@@ -4342,14 +4433,12 @@ function TableInner({
             },
             rowKey(row, index)
           )),
-          addRowButton && !loading && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rh-border-border hover:rh-bg-background/50 rh-rounde-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+          addRowButton && !loading && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rh-border-border hover:rh-bg-background/50 rh-cursor-pointer rh-py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               colSpan,
-              style: rowPaddingStyle,
               className: [
-                rowPadding ? "" : sizeClasses13[size].cell,
-                "rh-text-center rh-cursor-pointer rh-text-[#9CA3AF] rh-font-medium"
+                "rh-text-center rh-cursor-pointer rh-text-[#9CA3AF] rh-font-medium rh-px-4 rh-py-3 rh-rounded-b"
               ].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: [