@rehagro/ui 1.0.55 → 1.0.57

package/dist/index.d.mts

@@ -12,8 +12,8 @@ type ToastLink = {
 type ToastProps = React__default.HTMLAttributes<HTMLDivElement> & {
     /** Toast title */
     title: string;
-    /** Optional description below the title */
-    description?: string;
+    /** Optional description below the title. Accepts a string or any React node (e.g. a list of items). */
+    description?: React__default.ReactNode;
     /** Optional link below the content */
     link?: ToastLink;
     /** Visual variant */
@@ -26,8 +26,8 @@ type ToastProps = React__default.HTMLAttributes<HTMLDivElement> & {
 declare const Toast: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
     /** Toast title */
     title: string;
-    /** Optional description below the title */
-    description?: string;
+    /** Optional description below the title. Accepts a string or any React node (e.g. a list of items). */
+    description?: React__default.ReactNode;
     /** Optional link below the content */
     link?: ToastLink;
     /** Visual variant */
@@ -42,7 +42,7 @@ type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" |
 type ToastItem = {
     id: string;
     title: string;
-    description?: string;
+    description?: React__default.ReactNode;
     link?: ToastLink;
     variant: ToastVariant;
     appearance: ToastAppearance;
@@ -50,7 +50,7 @@ type ToastItem = {
     duration: number;
 };
 type ToastOptions = {
-    description?: string;
+    description?: React__default.ReactNode;
     link?: ToastLink;
     appearance?: ToastAppearance;
     /** Auto-dismiss duration in ms. 0 = permanent. Default: 5000 */
@@ -547,6 +547,12 @@ type DateSelectBaseProps = {
     endYear?: number;
     /** Custom background color for the trigger button */
     backgroundColor?: string;
+    /**
+     * Restricts which modes are available in the picker.
+     * When a single mode is provided the tab bar is hidden entirely.
+     * Defaults to all four modes: ["interval", "day", "month", "year"].
+     */
+    modes?: DateSelectMode[];
 };
 declare const DateSelect: React__default.ForwardRefExoticComponent<DateSelectBaseProps & React__default.RefAttributes<HTMLButtonElement>>;
 
@@ -911,6 +917,10 @@ type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "chil
     };
     /** Callback when add row is clicked */
     onAddRow?: () => void;
+    /** If true, rows become clickable and will call `onRowClick` when clicked */
+    rowClickable?: boolean;
+    /** Callback invoked when a row is clicked: `(row, index, event)` */
+    onRowClick?: (row: T, index: number, event?: React__default.MouseEvent<HTMLTableRowElement>) => void;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React__default.ForwardedRef<HTMLTableElement>;

package/dist/index.d.ts

@@ -12,8 +12,8 @@ type ToastLink = {
 type ToastProps = React__default.HTMLAttributes<HTMLDivElement> & {
     /** Toast title */
     title: string;
-    /** Optional description below the title */
-    description?: string;
+    /** Optional description below the title. Accepts a string or any React node (e.g. a list of items). */
+    description?: React__default.ReactNode;
     /** Optional link below the content */
     link?: ToastLink;
     /** Visual variant */
@@ -26,8 +26,8 @@ type ToastProps = React__default.HTMLAttributes<HTMLDivElement> & {
 declare const Toast: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
     /** Toast title */
     title: string;
-    /** Optional description below the title */
-    description?: string;
+    /** Optional description below the title. Accepts a string or any React node (e.g. a list of items). */
+    description?: React__default.ReactNode;
     /** Optional link below the content */
     link?: ToastLink;
     /** Visual variant */
@@ -42,7 +42,7 @@ type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" |
 type ToastItem = {
     id: string;
     title: string;
-    description?: string;
+    description?: React__default.ReactNode;
     link?: ToastLink;
     variant: ToastVariant;
     appearance: ToastAppearance;
@@ -50,7 +50,7 @@ type ToastItem = {
     duration: number;
 };
 type ToastOptions = {
-    description?: string;
+    description?: React__default.ReactNode;
     link?: ToastLink;
     appearance?: ToastAppearance;
     /** Auto-dismiss duration in ms. 0 = permanent. Default: 5000 */
@@ -547,6 +547,12 @@ type DateSelectBaseProps = {
     endYear?: number;
     /** Custom background color for the trigger button */
     backgroundColor?: string;
+    /**
+     * Restricts which modes are available in the picker.
+     * When a single mode is provided the tab bar is hidden entirely.
+     * Defaults to all four modes: ["interval", "day", "month", "year"].
+     */
+    modes?: DateSelectMode[];
 };
 declare const DateSelect: React__default.ForwardRefExoticComponent<DateSelectBaseProps & React__default.RefAttributes<HTMLButtonElement>>;
 
@@ -911,6 +917,10 @@ type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "chil
     };
     /** Callback when add row is clicked */
     onAddRow?: () => void;
+    /** If true, rows become clickable and will call `onRowClick` when clicked */
+    rowClickable?: boolean;
+    /** Callback invoked when a row is clicked: `(row, index, event)` */
+    onRowClick?: (row: T, index: number, event?: React__default.MouseEvent<HTMLTableRowElement>) => void;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React__default.ForwardedRef<HTMLTableElement>;

package/dist/index.js

@@ -2055,7 +2055,8 @@ var DateSelect = React9.forwardRef(
       wrapperClassName = "",
       startYear,
       endYear,
-      backgroundColor
+      backgroundColor,
+      modes
     } = props;
     const triggerId = React9__default.default.useId();
     const helperId = React9__default.default.useId();
@@ -2067,7 +2068,14 @@ var DateSelect = React9.forwardRef(
     );
     const isControlled = props.value !== void 0;
     const value = isControlled ? props.value ?? internalValue : internalValue;
-    const [activeMode, setActiveMode] = React9.useState(value.mode ?? "day");
+    const availableModes = React9.useMemo(
+      () => modes && modes.length > 0 ? MODE_OPTIONS.filter((o) => modes.includes(o.value)) : MODE_OPTIONS,
+      [modes]
+    );
+    const defaultMode = availableModes[0]?.value ?? "day";
+    const [activeMode, setActiveMode] = React9.useState(
+      availableModes.some((o) => o.value === (value.mode ?? "day")) ? value.mode ?? "day" : defaultMode
+    );
     const [selectedYear, setSelectedYear] = React9.useState((/* @__PURE__ */ new Date()).getFullYear());
     const [selectedMonth, setSelectedMonth] = React9.useState((/* @__PURE__ */ new Date()).getMonth());
     const rightMonth = selectedMonth === 11 ? 0 : selectedMonth + 1;
@@ -2183,19 +2191,22 @@ var DateSelect = React9.forwardRef(
       const [lo, hi] = start <= ref2 ? [start, ref2] : [ref2, start];
       return date > lo && date < hi;
     };
-    const renderModeTabs = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-border-b rh-border-border rh-bg-transparent", children: MODE_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => setActiveMode(option.value),
-        className: [
-          "rh-flex-1 rh-py-2 rh-px-4 rh-text-sm rh-transition-colors rh-duration-150 rh-text-text rh-font-bold",
-          "rh-border-b-2 -rh-mb-px",
-          activeMode === option.value ? "rh-border-primary" : "rh-border-transparent hover:rh-border-border"
-        ].join(" "),
-        children: option.label
-      },
-      option.value
-    )) });
+    const renderModeTabs = () => {
+      if (availableModes.length <= 1) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-border-b rh-border-border rh-bg-transparent", children: availableModes.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setActiveMode(option.value),
+          className: [
+            "rh-flex-1 rh-py-2 rh-px-4 rh-text-sm rh-transition-colors rh-duration-150 rh-text-text rh-font-bold",
+            "rh-border-b-2 -rh-mb-px",
+            activeMode === option.value ? "rh-border-primary" : "rh-border-transparent hover:rh-border-border"
+          ].join(" "),
+          children: option.label
+        },
+        option.value
+      )) });
+    };
     const renderYearGrid = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-p-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2722,7 +2733,7 @@ var DateSelect = React9.forwardRef(
               },
               children: [
                 renderModeTabs(),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-mt-2", children: renderContent() })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: availableModes.length > 1 ? "rh-mt-2" : "", children: renderContent() })
               ]
             }
           ),
@@ -4089,6 +4100,7 @@ var CustomSelect = ({
           value,
           placeholder,
           rows: 1,
+          onClick: (e) => e.stopPropagation(),
           onInput: (e) => {
             onChange(e.currentTarget.value);
             resizeTextArea();
@@ -4097,7 +4109,7 @@ var CustomSelect = ({
             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"
+          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 hover:rh-ring-2 hover:rh-ring-gray-200"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.rh-table-textarea::placeholder { color: ${inputPlaceholderColor}; }` })
@@ -4108,13 +4120,16 @@ var CustomSelect = ({
       "button",
       {
         type: "button",
-        onClick: openDropdown,
+        onClick: (e) => {
+          e.stopPropagation();
+          openDropdown();
+        },
         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-text-[14px] rh-px-2 rh-py-0.5 rh-rounded-xl rh-whitespace-normal rh-break-words",
+            className: "rh-text-[14px] rh-px-3.5 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
           }
@@ -4133,6 +4148,7 @@ var CustomSelect = ({
               type: "button",
               onMouseDown: (e) => {
                 e.preventDefault();
+                e.stopPropagation();
                 onChange(option.value);
                 setIsOpen(false);
               },
@@ -4193,6 +4209,8 @@ function TableInner({
   columns,
   data,
   rowKey,
+  rowClickable = false,
+  onRowClick,
   size = "md",
   variant = "default",
   sort,
@@ -4396,9 +4414,18 @@ function TableInner({
               style: bodyStyleInline,
               className: [
                 "rh-border-b rh-border-border rh-transition-colors",
+                rowClickable ? "rh-cursor-pointer" : "",
                 "hover:rh-bg-background/50",
                 variant === "striped" && index % 2 === 1 ? "rh-bg-background/50" : ""
               ].filter(Boolean).join(" "),
+              onClick: (e) => {
+                if (!rowClickable || !onRowClick) return;
+                const target = e.target;
+                if (!target) return;
+                const interactiveSelector = 'button, a, input, select, textarea, label, [role="button"], [data-no-row-click]';
+                if (target.closest(interactiveSelector)) return;
+                onRowClick(row, index, e);
+              },
               children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
                 {
@@ -4408,7 +4435,7 @@ function TableInner({
                     alignClasses[column.align || "left"],
                     "rh-text-text"
                   ].filter(Boolean).join(" "),
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-between rh-gap-2", children: [
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-stretch rh-justify-between rh-gap-2 rh-h-full", children: [
                     isEditableCell(column) ? /* @__PURE__ */ jsxRuntime.jsx(
                       CustomSelect,
                       {