@rehagro/ui 1.0.51 → 1.0.53

package/dist/index.d.mts

@@ -801,6 +801,7 @@ type CustomSelectOption = {
     value: string;
     label: string;
     backgroundColor?: string;
+    textColor?: string;
 };
 
 type TableSize = "sm" | "md" | "lg";
@@ -836,6 +837,16 @@ type TableColumn<T> = {
     editableValue?: (row: T) => string;
     /** Callback when the editable value changes */
     onEditChange?: (row: T, index: number, value: string) => void;
+    /** Text color for the editable select/date value. Can be fixed or derived from the row. */
+    editableTextColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for the editable select/date value. Can be fixed or derived from the row. */
+    editableBackgroundColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for the editable select/date control itself. Can be fixed or derived from the row. */
+    editableSelectBackgroundColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for the editable date calendar panel. Can be fixed or derived from the row. */
+    editableCalendarBackgroundColor?: string | ((row: T, index: number) => string | undefined);
+    /** Text color for the editable date calendar panel, excluding the apply button. */
+    editableCalendarTextColor?: 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";
@@ -836,6 +837,16 @@ type TableColumn<T> = {
     editableValue?: (row: T) => string;
     /** Callback when the editable value changes */
     onEditChange?: (row: T, index: number, value: string) => void;
+    /** Text color for the editable select/date value. Can be fixed or derived from the row. */
+    editableTextColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for the editable select/date value. Can be fixed or derived from the row. */
+    editableBackgroundColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for the editable select/date control itself. Can be fixed or derived from the row. */
+    editableSelectBackgroundColor?: string | ((row: T, index: number) => string | undefined);
+    /** Background color for the editable date calendar panel. Can be fixed or derived from the row. */
+    editableCalendarBackgroundColor?: string | ((row: T, index: number) => string | undefined);
+    /** Text color for the editable date calendar panel, excluding the apply button. */
+    editableCalendarTextColor?: string | ((row: T, index: number) => string | undefined);
 };
 type SortDirection = "asc" | "desc" | null;
 type TableSort = {

package/dist/index.js

@@ -1841,7 +1841,7 @@ var Select = React9.forwardRef(function Select2(props, ref) {
             className: [
               "rh-absolute rh-z-50 rh-w-full rh-mt-1",
               "rh-border rh-border-border rh-bg-surface",
-              "rh-shadow-md rh-overflow-auto rh-max-h-60",
+              "rh-shadow-md rh-overflow-y-auto rh-overscroll-contain rh-max-h-60",
               "rh-py-1",
               dropdownRadiusClasses[radius]
             ].filter(Boolean).join(" "),
@@ -3819,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",
   {
@@ -3840,9 +3851,14 @@ var DatePickerDropdown = ({
   selectedDate,
   onSelect,
   onClose,
-  containerRef
+  containerRef,
+  backgroundColor,
+  textColor,
+  calendarTextColor
 }) => {
   const today = /* @__PURE__ */ new Date();
+  const opaqueBackgroundColor = removeHexAlpha(backgroundColor);
+  const calendarTextStyle = calendarTextColor ? { color: calendarTextColor } : void 0;
   const [viewYear, setViewYear] = React9.useState(
     selectedDate ? selectedDate.getFullYear() : today.getFullYear()
   );
@@ -3893,6 +3909,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
         },
@@ -3903,6 +3921,7 @@ var DatePickerDropdown = ({
               "button",
               {
                 type: "button",
+                style: calendarTextStyle,
                 onMouseDown: (e) => {
                   e.preventDefault();
                   prevMonth();
@@ -3911,7 +3930,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
@@ -3920,6 +3939,7 @@ var DatePickerDropdown = ({
               "button",
               {
                 type: "button",
+                style: calendarTextStyle,
                 onMouseDown: (e) => {
                   e.preventDefault();
                   nextMonth();
@@ -3933,6 +3953,7 @@ 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
@@ -3954,6 +3975,7 @@ var DatePickerDropdown = ({
               "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}`
@@ -3965,7 +3987,10 @@ 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));
@@ -3983,6 +4008,7 @@ var DatePickerDropdown = ({
               "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}`
@@ -4014,6 +4040,11 @@ var CustomSelect = ({
   value,
   onChange,
   className = "",
+  textColor,
+  backgroundColor,
+  selectBackgroundColor,
+  calendarBackgroundColor,
+  calendarTextColor,
   type = "select"
 }) => {
   const [isOpen, setIsOpen] = React9.useState(false);
@@ -4068,14 +4099,16 @@ var CustomSelect = ({
     setIsOpen(false);
   };
   const displayLabel = type === "date" ? selectedDate ? formatDisplay(selectedDate) : value || "\u2014" : selectedOption?.label || value;
-  const displayBg = type === "date" ? void 0 : selectedOption?.backgroundColor;
+  const displayBg = type === "date" ? backgroundColor : selectedOption?.backgroundColor || backgroundColor;
+  const displayTextColor = type === "date" ? textColor : selectedOption?.textColor || textColor || (displayBg ? "white" : "inherit");
   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",
+        style: { backgroundColor: selectBackgroundColor || void 0 },
+        className: "rh-w-full rh-h-full rh-flex rh-items-center rh-border rh-bg-surface rh-rounded-sm rh-border-transparent rh-justify-between rh-py-2\n        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-truncate", children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -4083,7 +4116,7 @@ var CustomSelect = ({
             style: {
               backgroundColor: displayBg || "transparent",
               fontFamily: "Inter, sans-serif",
-              color: displayBg ? "white" : "inherit"
+              color: displayTextColor
             },
             children: displayLabel
           }
@@ -4096,9 +4129,10 @@ var CustomSelect = ({
         {
           style: {
             ...dropdownStyle,
+            backgroundColor: selectBackgroundColor || void 0,
             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",
+          className: "rh-border rh-border-border rh-rounded-xs rh-max-h-60 rh-overflow-auto",
           children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -4108,9 +4142,9 @@ 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(
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-4", children: option.value === value && /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
                     width: "13",
@@ -4132,8 +4166,9 @@ var CustomSelect = ({
                   {
                     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"
+                      backgroundColor: option.backgroundColor || backgroundColor || "transparent",
+                      fontFamily: "Inter, sans-serif",
+                      color: option.textColor || textColor || (option.backgroundColor || backgroundColor ? "white" : "inherit")
                     },
                     children: option.label
                   }
@@ -4153,7 +4188,10 @@ var CustomSelect = ({
         selectedDate,
         onSelect: handleDateSelect,
         onClose: () => setIsOpen(false),
-        containerRef
+        containerRef,
+        backgroundColor: calendarBackgroundColor,
+        textColor,
+        calendarTextColor
       }
     )
   ] });
@@ -4265,6 +4303,36 @@ function TableInner({
     if (column.type === "date") 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 getEditableSelectBackgroundColor = (column, row, index) => {
+    if (typeof column.editableSelectBackgroundColor === "function") {
+      return column.editableSelectBackgroundColor(row, index);
+    }
+    return column.editableSelectBackgroundColor;
+  };
+  const getEditableCalendarBackgroundColor = (column, row, index) => {
+    if (typeof column.editableCalendarBackgroundColor === "function") {
+      return column.editableCalendarBackgroundColor(row, index);
+    }
+    return column.editableCalendarBackgroundColor;
+  };
+  const getEditableCalendarTextColor = (column, row, index) => {
+    if (typeof column.editableCalendarTextColor === "function") {
+      return column.editableCalendarTextColor(row, index);
+    }
+    return column.editableCalendarTextColor;
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-full rh-rounded rh-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
@@ -4368,6 +4436,23 @@ function TableInner({
                         type: column.type ?? "select",
                         options: column.choices,
                         value: column.editableValue(row),
+                        textColor: getEditableTextColor(column, row, index),
+                        backgroundColor: getEditableBackgroundColor(column, row, index),
+                        selectBackgroundColor: getEditableSelectBackgroundColor(
+                          column,
+                          row,
+                          index
+                        ),
+                        calendarBackgroundColor: getEditableCalendarBackgroundColor(
+                          column,
+                          row,
+                          index
+                        ),
+                        calendarTextColor: getEditableCalendarTextColor(
+                          column,
+                          row,
+                          index
+                        ),
                         onChange: (value) => column.onEditChange?.(row, index, value),
                         className: "rh-w-full rh-h-full"
                       }
@@ -4390,14 +4475,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: [