@rehagro/ui 1.0.46 → 1.0.47

package/dist/index.d.mts

@@ -733,8 +733,18 @@ declare const Spinner: React__default.ForwardRefExoticComponent<React__default.H
     label?: string;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
+type CustomSelectOption = {
+    value: string;
+    label: string;
+    backgroundColor?: string;
+};
+
 type TableSize = "sm" | "md" | "lg";
 type TableVariant = "default" | "striped";
+type ColumnActionIcon<T> = {
+    icon: React__default.ReactNode;
+    onClick: (row: T, index: number) => void;
+};
 type TableColumn<T> = {
     /** Unique key for this column */
     key: string;
@@ -744,16 +754,39 @@ type TableColumn<T> = {
     render: (row: T, index: number) => React__default.ReactNode;
     /** Column width (CSS value) */
     width?: string;
+    /** Maximum column width (CSS value) */
+    maxWidth?: string;
     /** Text alignment */
     align?: "left" | "center" | "right";
     /** Whether this column is sortable */
     sortable?: boolean;
+    /** Action icon to show in this column (clickable) */
+    actionIcon?: ColumnActionIcon<T>;
+    /** Whether this column is editable with a dropdown */
+    editable?: boolean;
+    /** List of choices for the editable dropdown */
+    choices?: CustomSelectOption[];
+    /** 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;
 };
 type SortDirection = "asc" | "desc" | null;
 type TableSort = {
     key: string;
     direction: SortDirection;
 };
+type HeaderTextStyle = {
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string | number;
+};
+type HeaderStyle = {
+    backgroundColor?: string;
+    height?: string;
+    border?: string;
+};
 type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "children"> & {
     /** Column definitions */
     columns: TableColumn<T>[];
@@ -778,9 +811,27 @@ type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "chil
     /** Whether the table has sticky header */
     stickyHeader?: boolean;
     /** Custom header row style */
-    headerStyle?: React__default.CSSProperties;
+    headerStyle?: HeaderStyle;
+    /** Custom body row style */
+    bodyBackground?: string;
+    /** Custom body text style (color, font, weight) */
+    bodyTextStyle?: HeaderTextStyle;
     /** Custom header text class (overrides default rh-text-text-muted) */
     headerTextClassName?: string;
+    /** Custom header text style (color, font, weight) */
+    headerTextStyle?: HeaderTextStyle;
+    /** Custom row padding (CSS value for all sides or object with x/y) */
+    rowPadding?: string | {
+        x?: string;
+        y?: string;
+    };
+    /** Add row button */
+    addRowButton?: {
+        icon?: React__default.ReactNode;
+        text?: React__default.ReactNode;
+    };
+    /** Callback when add row is clicked */
+    onAddRow?: () => void;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React__default.ForwardedRef<HTMLTableElement>;

package/dist/index.d.ts

@@ -733,8 +733,18 @@ declare const Spinner: React__default.ForwardRefExoticComponent<React__default.H
     label?: string;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
+type CustomSelectOption = {
+    value: string;
+    label: string;
+    backgroundColor?: string;
+};
+
 type TableSize = "sm" | "md" | "lg";
 type TableVariant = "default" | "striped";
+type ColumnActionIcon<T> = {
+    icon: React__default.ReactNode;
+    onClick: (row: T, index: number) => void;
+};
 type TableColumn<T> = {
     /** Unique key for this column */
     key: string;
@@ -744,16 +754,39 @@ type TableColumn<T> = {
     render: (row: T, index: number) => React__default.ReactNode;
     /** Column width (CSS value) */
     width?: string;
+    /** Maximum column width (CSS value) */
+    maxWidth?: string;
     /** Text alignment */
     align?: "left" | "center" | "right";
     /** Whether this column is sortable */
     sortable?: boolean;
+    /** Action icon to show in this column (clickable) */
+    actionIcon?: ColumnActionIcon<T>;
+    /** Whether this column is editable with a dropdown */
+    editable?: boolean;
+    /** List of choices for the editable dropdown */
+    choices?: CustomSelectOption[];
+    /** 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;
 };
 type SortDirection = "asc" | "desc" | null;
 type TableSort = {
     key: string;
     direction: SortDirection;
 };
+type HeaderTextStyle = {
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string | number;
+};
+type HeaderStyle = {
+    backgroundColor?: string;
+    height?: string;
+    border?: string;
+};
 type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "children"> & {
     /** Column definitions */
     columns: TableColumn<T>[];
@@ -778,9 +811,27 @@ type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "chil
     /** Whether the table has sticky header */
     stickyHeader?: boolean;
     /** Custom header row style */
-    headerStyle?: React__default.CSSProperties;
+    headerStyle?: HeaderStyle;
+    /** Custom body row style */
+    bodyBackground?: string;
+    /** Custom body text style (color, font, weight) */
+    bodyTextStyle?: HeaderTextStyle;
     /** Custom header text class (overrides default rh-text-text-muted) */
     headerTextClassName?: string;
+    /** Custom header text style (color, font, weight) */
+    headerTextStyle?: HeaderTextStyle;
+    /** Custom row padding (CSS value for all sides or object with x/y) */
+    rowPadding?: string | {
+        x?: string;
+        y?: string;
+    };
+    /** Add row button */
+    addRowButton?: {
+        icon?: React__default.ReactNode;
+        text?: React__default.ReactNode;
+    };
+    /** Callback when add row is clicked */
+    onAddRow?: () => void;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React__default.ForwardedRef<HTMLTableElement>;

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 }; }
 
@@ -2917,6 +2918,103 @@ var Spinner = React9.forwardRef(function Spinner2({ size = "md", color = "primar
     }
   );
 });
+var CustomSelect = ({ options, value, onChange, className = "" }) => {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [dropdownStyle, setDropdownStyle] = React9.useState({});
+  const containerRef = React9.useRef(null);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleOpen = () => {
+    if (!isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownStyle({
+        position: "fixed",
+        top: rect.bottom + 4,
+        left: rect.left,
+        zIndex: 2
+      });
+    }
+    setIsOpen((prev) => !prev);
+  };
+  React9.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `rh-relative ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpen,
+        className: "rh-w-full rh-h-full rh-flex rh-items-center rh-justify-between rh-py-1 rh-bg-transparent hover:rh-bg-background/50 rh-cursor-pointer rh-text-left",
+        children: /* @__PURE__ */ 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: selectedOption?.backgroundColor || "transparent",
+              fontFamily: "Inter, sans-serif",
+              color: selectedOption?.backgroundColor ? "white" : "inherit"
+            },
+            children: selectedOption?.label || value
+          }
+        ) })
+      }
+    ),
+    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
+    )
+  ] });
+};
 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 +3039,12 @@ function TableInner({
   stickyHeader = false,
   headerStyle,
   headerTextClassName,
+  headerTextStyle,
+  bodyBackground,
+  bodyTextStyle,
+  rowPadding,
+  addRowButton,
+  onAddRow,
   className = "",
   ...rest
 }, ref) {
@@ -2982,34 +3086,81 @@ 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();
+  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 +3198,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 +3207,56 @@ 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: [
+                    column.editable && column.choices && column.editableValue ? /* @__PURE__ */ jsxRuntime.jsx(
+                      CustomSelect,
+                      {
+                        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
+              ] })
+            }
+          ) })
         ] })
       ]
     }