@rufous/ui 0.2.64 → 0.2.66

package/dist/main.cjs

@@ -1553,6 +1553,7 @@ var BaseDialog = ({
   dialogBodyStyle = {},
   size,
   sx,
+  form,
   TransitionComponent,
   TransitionProps = {}
 }) => {
@@ -1566,15 +1567,27 @@ var BaseDialog = ({
     {
       className: "btn-cancel",
       onClick: onCancel || onClose,
-      disabled: isLoading || isButtonLoading
+      disabled: isLoading || isButtonLoading,
+      type: "button"
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React65.createElement(
+  ), form ? /* @__PURE__ */ React65.createElement(
     "button",
     {
       className: "btn-confirm",
       disabled: disableConfirmBtn || isButtonLoading,
       style: { position: "relative" },
+      type: "submit"
+    },
+    /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, submitText),
+    isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
+  ) : onConfirm && /* @__PURE__ */ React65.createElement(
+    "button",
+    {
+      className: "btn-confirm",
+      disabled: disableConfirmBtn || isButtonLoading,
+      style: { position: "relative" },
+      type: "button",
       onClick: async () => {
         setIsSubmitting(true);
         await onConfirm?.();
@@ -1584,37 +1597,37 @@ var BaseDialog = ({
     /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
     isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
   ));
-  const dialogContent = /* @__PURE__ */ React65.createElement(
+  const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
+  const containerStyle = { minWidth, minHeight };
+  const dialogInner = /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React65.createElement(
+    import_lucide_react.X,
+    {
+      size: 18,
+      color: themeConfig?.icon || "#666666"
+    }
+  ))), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), /* @__PURE__ */ React65.createElement(
     "div",
     {
-      className: ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" "),
+      className: "dialog-body",
       style: {
-        minWidth,
-        minHeight
+        ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
+        ...dialogBodyStyle
       }
     },
-    /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React65.createElement(
-      import_lucide_react.X,
-      {
-        size: 18,
-        color: themeConfig?.icon || "#666666"
+    children
+  ), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), customButtons || renderButtons());
+  const dialogContent = form ? /* @__PURE__ */ React65.createElement(
+    "form",
+    {
+      className: containerClass,
+      style: containerStyle,
+      onSubmit: (e) => {
+        e.preventDefault();
+        form.handleSubmit?.(e);
       }
-    ))),
-    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React65.createElement(
-      "div",
-      {
-        className: "dialog-body",
-        style: {
-          ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
-          ...dialogBodyStyle
-        }
-      },
-      children
-    ),
-    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
-    customButtons || renderButtons()
-  );
+    },
+    dialogInner
+  ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
   if (TransitionComponent) {
     return /* @__PURE__ */ React65.createElement(
       TransitionComponent,
@@ -2135,6 +2148,7 @@ var AddressLookup_default = AddressLookup;
 
 // lib/TextFields/DateField.tsx
 var import_react19 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
 var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS = [
   "January",
@@ -2576,7 +2590,10 @@ var DateField = ({
   (0, import_react19.useEffect)(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (containerRef.current?.contains(target)) return;
+      if (pickerRef.current?.contains(target)) return;
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -2777,80 +2794,97 @@ var DateField = ({
     )),
     label && /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
     variant === "outlined" && /* @__PURE__ */ import_react19.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react19.default.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && /* @__PURE__ */ import_react19.default.createElement(
-    "div",
-    {
-      ref: pickerRef,
-      className: [
-        "rf-date-picker",
-        isSideVariant ? "rf-date-picker--side" : "",
-        dropUp ? "rf-date-picker--drop-up" : ""
-      ].filter(Boolean).join(" "),
-      onMouseDown: (e) => e.preventDefault()
-    },
-    /* @__PURE__ */ import_react19.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react19.default.createElement(
-      CalendarBody,
-      {
-        viewMonth,
-        viewYear,
-        selectedDate,
-        todayDate,
-        dayCells,
-        onDayClick: handleDayClick,
-        onPrev: prevMonth,
-        onNext: nextMonth,
-        onMonthSelect: setViewMonth,
-        onYearSelect: setViewYear
-      }
-    ), type === "datetime" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement(
-      SpinnerPanel,
-      {
-        hour,
-        minute,
-        ampm,
-        onHourChange: handleHourChange,
-        onMinuteChange: handleMinuteChange,
-        onHourInput: handleHourInput,
-        onMinuteInput: handleMinuteInput,
-        onAmpmToggle: handleAmpmToggle
-      }
-    )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
-    type === "datetime-side" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react19.default.createElement(
-      SpinnerPanel,
-      {
-        hour,
-        minute,
-        ampm,
-        onHourChange: handleHourChange,
-        onMinuteChange: handleMinuteChange,
-        onHourInput: handleHourInput,
-        onMinuteInput: handleMinuteInput,
-        onAmpmToggle: handleAmpmToggle
-      }
-    )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
-    type === "datetime-scroll" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react19.default.createElement(
-      ScrollColumn,
-      {
-        items: HOURS,
-        selected: hour - 1,
-        onSelect: handleScrollHour
-      }
-    ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react19.default.createElement(
-      ScrollColumn,
-      {
-        items: MINUTES,
-        selected: minute,
-        onSelect: handleScrollMinute
-      }
-    ), /* @__PURE__ */ import_react19.default.createElement(
-      ScrollColumn,
+  ), open && !disabled && (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ import_react19.default.createElement(
+      "div",
       {
-        items: AMPMS,
-        selected: ampm === "AM" ? 0 : 1,
-        onSelect: handleScrollAmpm,
-        infinite: false
-      }
-    )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+        ref: pickerRef,
+        className: [
+          "rf-date-picker",
+          "rf-date-picker--portaled",
+          isSideVariant ? "rf-date-picker--side" : "",
+          dropUp ? "rf-date-picker--drop-up" : ""
+        ].filter(Boolean).join(" "),
+        style: (() => {
+          const rect = containerRef.current?.getBoundingClientRect();
+          if (!rect) return {};
+          const top = rect.bottom + 6;
+          const spaceBelow = window.innerHeight - rect.bottom - 6;
+          const useDropUp = spaceBelow < 350 && rect.top > spaceBelow;
+          return {
+            position: "fixed",
+            left: rect.left,
+            ...useDropUp ? { bottom: window.innerHeight - rect.top + 6 } : { top },
+            zIndex: 99999
+          };
+        })(),
+        onMouseDown: (e) => e.preventDefault()
+      },
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react19.default.createElement(
+        CalendarBody,
+        {
+          viewMonth,
+          viewYear,
+          selectedDate,
+          todayDate,
+          dayCells,
+          onDayClick: handleDayClick,
+          onPrev: prevMonth,
+          onNext: nextMonth,
+          onMonthSelect: setViewMonth,
+          onYearSelect: setViewYear
+        }
+      ), type === "datetime" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement(
+        SpinnerPanel,
+        {
+          hour,
+          minute,
+          ampm,
+          onHourChange: handleHourChange,
+          onMinuteChange: handleMinuteChange,
+          onHourInput: handleHourInput,
+          onMinuteInput: handleMinuteInput,
+          onAmpmToggle: handleAmpmToggle
+        }
+      )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      type === "datetime-side" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react19.default.createElement(
+        SpinnerPanel,
+        {
+          hour,
+          minute,
+          ampm,
+          onHourChange: handleHourChange,
+          onMinuteChange: handleMinuteChange,
+          onHourInput: handleHourInput,
+          onMinuteInput: handleMinuteInput,
+          onAmpmToggle: handleAmpmToggle
+        }
+      )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
+      type === "datetime-scroll" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react19.default.createElement(
+        ScrollColumn,
+        {
+          items: HOURS,
+          selected: hour - 1,
+          onSelect: handleScrollHour
+        }
+      ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react19.default.createElement(
+        ScrollColumn,
+        {
+          items: MINUTES,
+          selected: minute,
+          onSelect: handleScrollMinute
+        }
+      ), /* @__PURE__ */ import_react19.default.createElement(
+        ScrollColumn,
+        {
+          items: AMPMS,
+          selected: ampm === "AM" ? 0 : 1,
+          onSelect: handleScrollAmpm,
+          infinite: false
+        }
+      )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+    ),
+    document.body
   )), helperText && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateField.displayName = "DateField";
@@ -5887,7 +5921,7 @@ Skeleton.displayName = "Skeleton";
 
 // lib/Tooltip/Tooltip.tsx
 var import_react35 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
+var import_react_dom2 = __toESM(require("react-dom"), 1);
 var GAP = 8;
 function computePosition(anchor, tooltip, placement) {
   const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
@@ -6106,7 +6140,7 @@ var Tooltip = ({
       ...childProps
     },
     import_react35.default.cloneElement(children)
-  ), import_react_dom.default.createPortal(tooltipElement, document.body));
+  ), import_react_dom2.default.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -6993,7 +7027,7 @@ Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
 var import_react40 = __toESM(require("react"), 1);
-var import_react_dom2 = __toESM(require("react-dom"), 1);
+var import_react_dom3 = __toESM(require("react-dom"), 1);
 var MenuDivider = () => /* @__PURE__ */ import_react40.default.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
@@ -7146,13 +7180,13 @@ var Menu = ({
     },
     children
   ));
-  return import_react_dom2.default.createPortal(portal, document.body);
+  return import_react_dom3.default.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
 // lib/Drawer/Drawer.tsx
 var import_react41 = __toESM(require("react"), 1);
-var import_react_dom3 = __toESM(require("react-dom"), 1);
+var import_react_dom4 = __toESM(require("react-dom"), 1);
 var Drawer = ({
   open,
   onClose,
@@ -7252,7 +7286,7 @@ var Drawer = ({
     },
     children
   ));
-  return import_react_dom3.default.createPortal(
+  return import_react_dom4.default.createPortal(
     /* @__PURE__ */ import_react41.default.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -7261,7 +7295,7 @@ Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
 var import_react42 = __toESM(require("react"), 1);
-var import_react_dom4 = __toESM(require("react-dom"), 1);
+var import_react_dom5 = __toESM(require("react-dom"), 1);
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -7366,7 +7400,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return import_react_dom4.default.createPortal(snackbarEl, document.body);
+  return import_react_dom5.default.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -7420,7 +7454,7 @@ Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
 var import_react44 = __toESM(require("react"), 1);
-var import_react_dom5 = __toESM(require("react-dom"), 1);
+var import_react_dom6 = __toESM(require("react-dom"), 1);
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -7563,13 +7597,13 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, popper);
   }
-  return import_react_dom5.default.createPortal(popper, document.body);
+  return import_react_dom6.default.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
 // lib/Popover/Popover.tsx
 var import_react45 = __toESM(require("react"), 1);
-var import_react_dom6 = __toESM(require("react-dom"), 1);
+var import_react_dom7 = __toESM(require("react-dom"), 1);
 function getPoint(rect, v, h) {
   const x = h === "left" ? rect.left : h === "center" ? rect.left + rect.width / 2 : rect.right;
   const y = v === "top" ? rect.top : v === "center" ? rect.top + rect.height / 2 : rect.bottom;
@@ -7672,7 +7706,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react45.default.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return import_react_dom6.default.createPortal(
+  return import_react_dom7.default.createPortal(
     /* @__PURE__ */ import_react45.default.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
@@ -8323,7 +8357,7 @@ PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
 var import_react58 = __toESM(require("react"), 1);
-var import_react_dom12 = require("react-dom");
+var import_react_dom13 = require("react-dom");
 var import_react59 = require("@tiptap/react");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
 var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
@@ -8445,7 +8479,7 @@ function createMentionSuggestion(users) {
 
 // lib/RufousTextEditor/Toolbar.tsx
 var import_react55 = __toESM(require("react"), 1);
-var import_react_dom9 = require("react-dom");
+var import_react_dom10 = require("react-dom");
 
 // lib/RufousTextEditor/TextToSpeech.tsx
 var import_react51 = __toESM(require("react"), 1);
@@ -8756,7 +8790,7 @@ var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
 var import_react53 = __toESM(require("react"), 1);
-var import_react_dom7 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
   { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -8913,7 +8947,7 @@ var AICommands = ({ editor, onAICommand }) => {
       onClick: () => handleCommandSelect(cmd)
     },
     cmd.label
-  ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom7.createPortal)(
+  ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react53.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react53.default.createElement(
       "textarea",
       {
@@ -8964,7 +8998,7 @@ var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
 var import_react54 = __toESM(require("react"), 1);
-var import_react_dom8 = require("react-dom");
+var import_react_dom9 = require("react-dom");
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
   { code: "sq", name: "Albanian" },
@@ -9155,7 +9189,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       setTranslating(false);
     }
   };
-  return (0, import_react_dom8.createPortal)(
+  return (0, import_react_dom9.createPortal)(
     /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react54.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
       "input",
       {
@@ -10065,7 +10099,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ import_react55.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && (0, import_react_dom9.createPortal)(
+  ), open && (0, import_react_dom10.createPortal)(
     /* @__PURE__ */ import_react55.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react55.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
     document.body
   ));
@@ -10967,7 +11001,7 @@ var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
 var import_react56 = __toESM(require("react"), 1);
-var import_react_dom10 = require("react-dom");
+var import_react_dom11 = require("react-dom");
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11139,7 +11173,7 @@ var ImageToolbar = ({ editor }) => {
   }, [editor]);
   const node = editor?.state.selection.node;
   const isImage = node && node.type.name === "image";
-  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom10.createPortal)(
+  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom11.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11216,7 +11250,7 @@ var ImageToolbar = ({ editor }) => {
     );
     setShowVAlign(false);
   };
-  return (0, import_react_dom10.createPortal)(
+  return (0, import_react_dom11.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
@@ -11247,7 +11281,7 @@ var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_react_dom11 = require("react-dom");
+var import_react_dom12 = require("react-dom");
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11393,7 +11427,7 @@ var VideoToolbar = ({ editor }) => {
   const node = editor?.state.selection.node;
   const isVideo = node && VIDEO_TYPES.includes(node.type.name);
   const nodeType = node?.type.name;
-  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom11.createPortal)(
+  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom12.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11440,7 +11474,7 @@ var VideoToolbar = ({ editor }) => {
       })
     );
   };
-  return (0, import_react_dom11.createPortal)(
+  return (0, import_react_dom12.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
       "div",
       {
@@ -12059,7 +12093,7 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom12.createPortal)(
+    ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom13.createPortal)(
       /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
         "input",
         {

package/dist/main.css

@@ -72,7 +72,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 99999;
+  z-index: 2000;
   backdrop-filter: blur(2px);
 }
 .dialog-container {
@@ -1125,6 +1125,12 @@ pre {
   position: relative;
   width: 100%;
 }
+.rf-date-picker.rf-date-picker--portaled {
+  position: fixed;
+  top: auto;
+  left: auto;
+  z-index: 99999;
+}
 .rf-date-picker {
   position: absolute;
   top: calc(100% + 6px);
@@ -5788,6 +5794,7 @@ pre {
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
+  height: 38px;
 }
 .add-btn,
 .btn-add {

package/dist/main.d.cts

@@ -457,6 +457,10 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface BaseDialogForm {
+    handleSubmit?: (e: React.FormEvent) => void;
+    [key: string]: any;
+}
 interface BaseDialogProps {
     open?: boolean;
     onConfirm?: () => Promise<void> | void;
@@ -484,6 +488,8 @@ interface BaseDialogProps {
     size?: "sm" | "md" | "lg" | "xl" | "fullScreen";
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /** Form object — when provided, wraps dialog in a <form> and shows a submit button */
+    form?: BaseDialogForm;
     /** A transition component (e.g. Fade, Slide, Grow, Zoom) to animate the dialog container */
     TransitionComponent?: React.ComponentType<{
         in: boolean;

package/dist/main.d.ts

@@ -457,6 +457,10 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface BaseDialogForm {
+    handleSubmit?: (e: React.FormEvent) => void;
+    [key: string]: any;
+}
 interface BaseDialogProps {
     open?: boolean;
     onConfirm?: () => Promise<void> | void;
@@ -484,6 +488,8 @@ interface BaseDialogProps {
     size?: "sm" | "md" | "lg" | "xl" | "fullScreen";
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /** Form object — when provided, wraps dialog in a <form> and shows a submit button */
+    form?: BaseDialogForm;
     /** A transition component (e.g. Fade, Slide, Grow, Zoom) to animate the dialog container */
     TransitionComponent?: React.ComponentType<{
         in: boolean;

package/dist/main.js

@@ -1381,6 +1381,7 @@ var BaseDialog = ({
   dialogBodyStyle = {},
   size,
   sx,
+  form,
   TransitionComponent,
   TransitionProps = {}
 }) => {
@@ -1394,15 +1395,27 @@ var BaseDialog = ({
     {
       className: "btn-cancel",
       onClick: onCancel || onClose,
-      disabled: isLoading || isButtonLoading
+      disabled: isLoading || isButtonLoading,
+      type: "button"
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React65.createElement(
+  ), form ? /* @__PURE__ */ React65.createElement(
+    "button",
+    {
+      className: "btn-confirm",
+      disabled: disableConfirmBtn || isButtonLoading,
+      style: { position: "relative" },
+      type: "submit"
+    },
+    /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, submitText),
+    isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
+  ) : onConfirm && /* @__PURE__ */ React65.createElement(
     "button",
     {
       className: "btn-confirm",
       disabled: disableConfirmBtn || isButtonLoading,
       style: { position: "relative" },
+      type: "button",
       onClick: async () => {
         setIsSubmitting(true);
         await onConfirm?.();
@@ -1412,37 +1425,37 @@ var BaseDialog = ({
     /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
     isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
   ));
-  const dialogContent = /* @__PURE__ */ React65.createElement(
+  const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
+  const containerStyle = { minWidth, minHeight };
+  const dialogInner = /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React65.createElement(
+    X,
+    {
+      size: 18,
+      color: themeConfig?.icon || "#666666"
+    }
+  ))), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), /* @__PURE__ */ React65.createElement(
     "div",
     {
-      className: ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" "),
+      className: "dialog-body",
       style: {
-        minWidth,
-        minHeight
+        ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
+        ...dialogBodyStyle
       }
     },
-    /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React65.createElement(
-      X,
-      {
-        size: 18,
-        color: themeConfig?.icon || "#666666"
+    children
+  ), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), customButtons || renderButtons());
+  const dialogContent = form ? /* @__PURE__ */ React65.createElement(
+    "form",
+    {
+      className: containerClass,
+      style: containerStyle,
+      onSubmit: (e) => {
+        e.preventDefault();
+        form.handleSubmit?.(e);
       }
-    ))),
-    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React65.createElement(
-      "div",
-      {
-        className: "dialog-body",
-        style: {
-          ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
-          ...dialogBodyStyle
-        }
-      },
-      children
-    ),
-    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
-    customButtons || renderButtons()
-  );
+    },
+    dialogInner
+  ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
   if (TransitionComponent) {
     return /* @__PURE__ */ React65.createElement(
       TransitionComponent,
@@ -1974,6 +1987,7 @@ import React70, {
   useEffect as useEffect4,
   useCallback
 } from "react";
+import { createPortal } from "react-dom";
 var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS = [
   "January",
@@ -2415,7 +2429,10 @@ var DateField = ({
   useEffect4(() => {
     if (!open) return;
     const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (containerRef.current?.contains(target)) return;
+      if (pickerRef.current?.contains(target)) return;
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -2616,80 +2633,97 @@ var DateField = ({
     )),
     label && /* @__PURE__ */ React70.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React70.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
     variant === "outlined" && /* @__PURE__ */ React70.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ React70.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React70.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && /* @__PURE__ */ React70.createElement(
-    "div",
-    {
-      ref: pickerRef,
-      className: [
-        "rf-date-picker",
-        isSideVariant ? "rf-date-picker--side" : "",
-        dropUp ? "rf-date-picker--drop-up" : ""
-      ].filter(Boolean).join(" "),
-      onMouseDown: (e) => e.preventDefault()
-    },
-    /* @__PURE__ */ React70.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React70.createElement(
-      CalendarBody,
-      {
-        viewMonth,
-        viewYear,
-        selectedDate,
-        todayDate,
-        dayCells,
-        onDayClick: handleDayClick,
-        onPrev: prevMonth,
-        onNext: nextMonth,
-        onMonthSelect: setViewMonth,
-        onYearSelect: setViewYear
-      }
-    ), type === "datetime" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React70.createElement(
-      SpinnerPanel,
-      {
-        hour,
-        minute,
-        ampm,
-        onHourChange: handleHourChange,
-        onMinuteChange: handleMinuteChange,
-        onHourInput: handleHourInput,
-        onMinuteInput: handleMinuteInput,
-        onAmpmToggle: handleAmpmToggle
-      }
-    )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
-    type === "datetime-side" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React70.createElement(
-      SpinnerPanel,
-      {
-        hour,
-        minute,
-        ampm,
-        onHourChange: handleHourChange,
-        onMinuteChange: handleMinuteChange,
-        onHourInput: handleHourInput,
-        onMinuteInput: handleMinuteInput,
-        onAmpmToggle: handleAmpmToggle
-      }
-    )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
-    type === "datetime-scroll" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React70.createElement(
-      ScrollColumn,
-      {
-        items: HOURS,
-        selected: hour - 1,
-        onSelect: handleScrollHour
-      }
-    ), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React70.createElement(
-      ScrollColumn,
-      {
-        items: MINUTES,
-        selected: minute,
-        onSelect: handleScrollMinute
-      }
-    ), /* @__PURE__ */ React70.createElement(
-      ScrollColumn,
+  ), open && !disabled && createPortal(
+    /* @__PURE__ */ React70.createElement(
+      "div",
       {
-        items: AMPMS,
-        selected: ampm === "AM" ? 0 : 1,
-        onSelect: handleScrollAmpm,
-        infinite: false
-      }
-    )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+        ref: pickerRef,
+        className: [
+          "rf-date-picker",
+          "rf-date-picker--portaled",
+          isSideVariant ? "rf-date-picker--side" : "",
+          dropUp ? "rf-date-picker--drop-up" : ""
+        ].filter(Boolean).join(" "),
+        style: (() => {
+          const rect = containerRef.current?.getBoundingClientRect();
+          if (!rect) return {};
+          const top = rect.bottom + 6;
+          const spaceBelow = window.innerHeight - rect.bottom - 6;
+          const useDropUp = spaceBelow < 350 && rect.top > spaceBelow;
+          return {
+            position: "fixed",
+            left: rect.left,
+            ...useDropUp ? { bottom: window.innerHeight - rect.top + 6 } : { top },
+            zIndex: 99999
+          };
+        })(),
+        onMouseDown: (e) => e.preventDefault()
+      },
+      /* @__PURE__ */ React70.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React70.createElement(
+        CalendarBody,
+        {
+          viewMonth,
+          viewYear,
+          selectedDate,
+          todayDate,
+          dayCells,
+          onDayClick: handleDayClick,
+          onPrev: prevMonth,
+          onNext: nextMonth,
+          onMonthSelect: setViewMonth,
+          onYearSelect: setViewYear
+        }
+      ), type === "datetime" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React70.createElement(
+        SpinnerPanel,
+        {
+          hour,
+          minute,
+          ampm,
+          onHourChange: handleHourChange,
+          onMinuteChange: handleMinuteChange,
+          onHourInput: handleHourInput,
+          onMinuteInput: handleMinuteInput,
+          onAmpmToggle: handleAmpmToggle
+        }
+      )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      type === "datetime-side" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React70.createElement(
+        SpinnerPanel,
+        {
+          hour,
+          minute,
+          ampm,
+          onHourChange: handleHourChange,
+          onMinuteChange: handleMinuteChange,
+          onHourInput: handleHourInput,
+          onMinuteInput: handleMinuteInput,
+          onAmpmToggle: handleAmpmToggle
+        }
+      )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
+      type === "datetime-scroll" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React70.createElement(
+        ScrollColumn,
+        {
+          items: HOURS,
+          selected: hour - 1,
+          onSelect: handleScrollHour
+        }
+      ), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React70.createElement(
+        ScrollColumn,
+        {
+          items: MINUTES,
+          selected: minute,
+          onSelect: handleScrollMinute
+        }
+      ), /* @__PURE__ */ React70.createElement(
+        ScrollColumn,
+        {
+          items: AMPMS,
+          selected: ampm === "AM" ? 0 : 1,
+          onSelect: handleScrollAmpm,
+          infinite: false
+        }
+      )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+    ),
+    document.body
   )), helperText && /* @__PURE__ */ React70.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateField.displayName = "DateField";
@@ -8257,7 +8291,7 @@ PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
 import React115, { useMemo as useMemo4, useCallback as useCallback13, useState as useState33, useRef as useRef29, useEffect as useEffect26 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
+import { createPortal as createPortal7 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
@@ -8379,7 +8413,7 @@ function createMentionSuggestion(users) {
 
 // lib/RufousTextEditor/Toolbar.tsx
 import React112, { useState as useState30, useRef as useRef26, useEffect as useEffect23, useCallback as useCallback12 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
 import React107, { useState as useState26, useEffect as useEffect20, useRef as useRef23, useCallback as useCallback9 } from "react";
@@ -8690,7 +8724,7 @@ var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
 import React109, { useState as useState28, useRef as useRef25, useEffect as useEffect22, useCallback as useCallback11 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
   { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -8847,7 +8881,7 @@ var AICommands = ({ editor, onAICommand }) => {
       onClick: () => handleCommandSelect(cmd)
     },
     cmd.label
-  ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal(
+  ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal2(
     /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React109.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React109.createElement(
       "textarea",
       {
@@ -8898,7 +8932,7 @@ var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
 import React110, { useState as useState29, useMemo as useMemo3 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
   { code: "sq", name: "Albanian" },
@@ -9089,7 +9123,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       setTranslating(false);
     }
   };
-  return createPortal2(
+  return createPortal3(
     /* @__PURE__ */ React110.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React110.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React110.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React110.createElement("h3", null, "Translate options"), /* @__PURE__ */ React110.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React110.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
       "input",
       {
@@ -9999,7 +10033,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && createPortal3(
+  ), open && createPortal4(
     /* @__PURE__ */ React112.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React112.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
     document.body
   ));
@@ -10901,7 +10935,7 @@ var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
 import React113, { useState as useState31, useEffect as useEffect24, useRef as useRef27 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11073,7 +11107,7 @@ var ImageToolbar = ({ editor }) => {
   }, [editor]);
   const node = editor?.state.selection.node;
   const isImage = node && node.type.name === "image";
-  if (!editor || !isImage || !pos) return showModal ? createPortal4(
+  if (!editor || !isImage || !pos) return showModal ? createPortal5(
     /* @__PURE__ */ React113.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11150,7 +11184,7 @@ var ImageToolbar = ({ editor }) => {
     );
     setShowVAlign(false);
   };
-  return createPortal4(
+  return createPortal5(
     /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
       "div",
       {
@@ -11181,7 +11215,7 @@ var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
 import React114, { useState as useState32, useEffect as useEffect25, useRef as useRef28 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11327,7 +11361,7 @@ var VideoToolbar = ({ editor }) => {
   const node = editor?.state.selection.node;
   const isVideo = node && VIDEO_TYPES.includes(node.type.name);
   const nodeType = node?.type.name;
-  if (!editor || !isVideo || !pos) return showModal ? createPortal5(
+  if (!editor || !isVideo || !pos) return showModal ? createPortal6(
     /* @__PURE__ */ React114.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11374,7 +11408,7 @@ var VideoToolbar = ({ editor }) => {
       })
     );
   };
-  return createPortal5(
+  return createPortal6(
     /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
       "div",
       {
@@ -11993,7 +12027,7 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal6(
+    ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal7(
       /* @__PURE__ */ React115.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React115.createElement(
         "input",
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.64",
+  "version": "0.2.66",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",