@rufous/ui 0.3.62 → 0.3.66

package/dist/main.cjs

@@ -2762,28 +2762,55 @@ var TextField = (0, import_react11.forwardRef)(({
     className
   ].filter(Boolean).join(" ");
   const internalRef = import_react11.default.useRef(null);
+  const numberMin = type === "number" ? slotProps?.input?.min ?? props.min : void 0;
+  const numberMax = type === "number" ? slotProps?.input?.max ?? props.max : void 0;
+  const setNativeValue = (val) => {
+    if (!internalRef.current) return;
+    const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+    setter?.call(internalRef.current, val);
+  };
+  const emitChange = (e, numericValue) => {
+    const syntheticEvent = Object.assign({}, e, {
+      target: Object.assign({}, e.target, { value: numericValue }),
+      currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
+    });
+    onChange?.(syntheticEvent);
+  };
   const handleChange = (e) => {
     if (type === "number") {
-      const raw = e.target.value;
-      const inputMax = slotProps?.input?.max ?? props.max;
+      let raw = e.target.value;
       const inputMaxLength = slotProps?.input?.maxLength ?? props.maxLength;
       if (inputMaxLength != null) {
         const digits = raw.replace(/[^0-9]/g, "");
         if (digits.length > Number(inputMaxLength)) return;
       }
-      if (inputMax != null && raw !== "") {
-        if (Number(raw) > Number(inputMax)) return;
+      if (numberMax != null && raw !== "" && Number(raw) > Number(numberMax)) {
+        raw = String(numberMax);
+        setNativeValue(raw);
       }
-      const numericValue = raw === "" ? "" : Number(raw);
-      const syntheticEvent = Object.assign({}, e, {
-        target: Object.assign({}, e.target, { value: numericValue }),
-        currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
-      });
-      onChange?.(syntheticEvent);
+      emitChange(e, raw === "" ? "" : Number(raw));
       return;
     }
     onChange?.(e);
   };
+  const handleBlur = (e) => {
+    if (type === "number") {
+      const raw = e.target.value;
+      if (raw !== "") {
+        const n = Number(raw);
+        if (!isNaN(n)) {
+          let clamped = n;
+          if (numberMin != null && clamped < Number(numberMin)) clamped = Number(numberMin);
+          if (numberMax != null && clamped > Number(numberMax)) clamped = Number(numberMax);
+          if (clamped !== n) {
+            setNativeValue(String(clamped));
+            emitChange(e, clamped);
+          }
+        }
+      }
+    }
+    onBlur?.(e);
+  };
   const triggerChange = () => {
     if (internalRef.current) {
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
@@ -2798,9 +2825,10 @@ var TextField = (0, import_react11.forwardRef)(({
   const stepBy = (delta) => {
     if (!internalRef.current) return;
     const step = Number(stepProp ?? (numberVariant ? STEP_BY_VARIANT[numberVariant] : 1));
-    const newVal = (parseFloat(internalRef.current.value) || 0) + delta * step;
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-    nativeInputValueSetter?.call(internalRef.current, String(newVal));
+    let newVal = (parseFloat(internalRef.current.value) || 0) + delta * step;
+    if (numberMax != null && newVal > Number(numberMax)) newVal = Number(numberMax);
+    if (numberMin != null && newVal < Number(numberMin)) newVal = Number(numberMin);
+    setNativeValue(String(newVal));
     triggerChange();
   };
   const handleIncrement = (e) => {
@@ -2872,7 +2900,8 @@ var TextField = (0, import_react11.forwardRef)(({
       readOnly,
       ...slotProps?.input,
       ...props,
-      onChange: handleChange
+      onChange: handleChange,
+      onBlur: handleBlur
     }
   ), InputProps?.endAdornment && /* @__PURE__ */ import_react11.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), !isTextarea && type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react11.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react11.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react11.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react11.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react11.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react11.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react11.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react11.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react11.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react11.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react11.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react11.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react11.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
@@ -13534,6 +13563,15 @@ var IconCheck = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /*
 var IconPaste = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /* @__PURE__ */ React197.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
 
 // lib/RufousTextEditor/Toolbar.tsx
+var BASIC_MOBILE_BUTTONS = /* @__PURE__ */ new Set([
+  "undo",
+  "redo",
+  "bold",
+  "italic",
+  "link",
+  "ul",
+  "ol"
+]);
 var COLOR_PALETTE = [
   // Row 1: blacks/grays
   "#000000",
@@ -13981,7 +14019,47 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   const [todoEnabled, setTodoEnabled] = (0, import_react53.useState)(false);
   const ttsRef = (0, import_react53.useRef)(null);
   const sttRef = (0, import_react53.useRef)(null);
-  const show = (id) => !visibleButtons || visibleButtons.has(id);
+  const [isMobile, setIsMobile] = (0, import_react53.useState)(false);
+  const [expanded, setExpanded] = (0, import_react53.useState)(false);
+  const [overflows, setOverflows] = (0, import_react53.useState)(false);
+  const [winW, setWinW] = (0, import_react53.useState)(typeof window !== "undefined" ? window.innerWidth : 0);
+  const rowRef = (0, import_react53.useRef)(null);
+  (0, import_react53.useEffect)(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 600px)");
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  (0, import_react53.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => {
+      setWinW(window.innerWidth);
+      setOverflows(false);
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const hasCollapsibleButtons = !visibleButtons ? true : [...visibleButtons].some((b) => !BASIC_MOBILE_BUTTONS.has(b));
+  const collapsedActive = isMobile && overflows && hasCollapsibleButtons && !expanded;
+  const show = (id) => {
+    if (visibleButtons && !visibleButtons.has(id)) return false;
+    if (collapsedActive && !BASIC_MOBILE_BUTTONS.has(id)) return false;
+    return true;
+  };
+  (0, import_react53.useLayoutEffect)(() => {
+    if (collapsedActive) return;
+    const row = rowRef.current;
+    if (!row) return;
+    const kids = Array.from(row.children).filter(
+      (el) => el.offsetParent !== null && !el.classList?.contains("rte-toolbar-toggle")
+    );
+    const firstTop = kids.length ? kids[0].offsetTop : 0;
+    const wraps = kids.some((el) => el.offsetTop - firstTop > 2);
+    const next = isMobile && wraps;
+    setOverflows((prev) => prev === next ? prev : next);
+  }, [collapsedActive, isMobile, expanded, winW, visibleButtons]);
   (0, import_react53.useEffect)(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -14055,7 +14133,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react53.default.createElement("div", { ref: rowRef, className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -14570,7 +14648,18 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         return true;
       }).run();
     } }, /* @__PURE__ */ import_react53.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react53.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-  })))), onClose && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
+  }))), isMobile && overflows && hasCollapsibleButtons && /* @__PURE__ */ import_react53.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `toolbar-btn rte-toolbar-toggle ${expanded ? "is-expanded" : ""}`,
+      onClick: () => setExpanded((v) => !v),
+      title: expanded ? "Show fewer options" : "Show more options",
+      "aria-label": expanded ? "Collapse toolbar" : "Expand toolbar",
+      "aria-expanded": expanded
+    },
+    /* @__PURE__ */ import_react53.default.createElement(ChevronDown, { size: 18 })
+  )), onClose && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",

package/dist/main.css

@@ -8171,6 +8171,25 @@ pre {
   border-right: none;
   margin-right: 0;
 }
+.rf-rte-wrapper .toolbar-group:empty {
+  display: none;
+}
+.rf-rte-wrapper .rte-toolbar-toggle {
+  margin-left: auto;
+  color: #a81c08;
+}
+.rf-rte-wrapper .toolbar-row.with-close .rte-toolbar-toggle {
+  margin-right: 9px;
+}
+.rf-rte-wrapper .toolbar-row.with-close .rte-toolbar-toggle.is-expanded {
+  margin-right: -24px;
+}
+.rf-rte-wrapper .rte-toolbar-toggle svg {
+  transition: transform 0.2s ease;
+}
+.rf-rte-wrapper .rte-toolbar-toggle.is-expanded svg {
+  transform: rotate(180deg);
+}
 .rf-rte-wrapper .toolbar-btn {
   display: inline-flex;
   align-items: center;

package/dist/main.js

@@ -2468,28 +2468,55 @@ var TextField = forwardRef6(({
     className
   ].filter(Boolean).join(" ");
   const internalRef = React143.useRef(null);
+  const numberMin = type === "number" ? slotProps?.input?.min ?? props.min : void 0;
+  const numberMax = type === "number" ? slotProps?.input?.max ?? props.max : void 0;
+  const setNativeValue = (val) => {
+    if (!internalRef.current) return;
+    const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+    setter?.call(internalRef.current, val);
+  };
+  const emitChange = (e, numericValue) => {
+    const syntheticEvent = Object.assign({}, e, {
+      target: Object.assign({}, e.target, { value: numericValue }),
+      currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
+    });
+    onChange?.(syntheticEvent);
+  };
   const handleChange = (e) => {
     if (type === "number") {
-      const raw = e.target.value;
-      const inputMax = slotProps?.input?.max ?? props.max;
+      let raw = e.target.value;
       const inputMaxLength = slotProps?.input?.maxLength ?? props.maxLength;
       if (inputMaxLength != null) {
         const digits = raw.replace(/[^0-9]/g, "");
         if (digits.length > Number(inputMaxLength)) return;
       }
-      if (inputMax != null && raw !== "") {
-        if (Number(raw) > Number(inputMax)) return;
+      if (numberMax != null && raw !== "" && Number(raw) > Number(numberMax)) {
+        raw = String(numberMax);
+        setNativeValue(raw);
       }
-      const numericValue = raw === "" ? "" : Number(raw);
-      const syntheticEvent = Object.assign({}, e, {
-        target: Object.assign({}, e.target, { value: numericValue }),
-        currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
-      });
-      onChange?.(syntheticEvent);
+      emitChange(e, raw === "" ? "" : Number(raw));
       return;
     }
     onChange?.(e);
   };
+  const handleBlur = (e) => {
+    if (type === "number") {
+      const raw = e.target.value;
+      if (raw !== "") {
+        const n = Number(raw);
+        if (!isNaN(n)) {
+          let clamped = n;
+          if (numberMin != null && clamped < Number(numberMin)) clamped = Number(numberMin);
+          if (numberMax != null && clamped > Number(numberMax)) clamped = Number(numberMax);
+          if (clamped !== n) {
+            setNativeValue(String(clamped));
+            emitChange(e, clamped);
+          }
+        }
+      }
+    }
+    onBlur?.(e);
+  };
   const triggerChange = () => {
     if (internalRef.current) {
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
@@ -2504,9 +2531,10 @@ var TextField = forwardRef6(({
   const stepBy = (delta) => {
     if (!internalRef.current) return;
     const step = Number(stepProp ?? (numberVariant ? STEP_BY_VARIANT[numberVariant] : 1));
-    const newVal = (parseFloat(internalRef.current.value) || 0) + delta * step;
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-    nativeInputValueSetter?.call(internalRef.current, String(newVal));
+    let newVal = (parseFloat(internalRef.current.value) || 0) + delta * step;
+    if (numberMax != null && newVal > Number(numberMax)) newVal = Number(numberMax);
+    if (numberMin != null && newVal < Number(numberMin)) newVal = Number(numberMin);
+    setNativeValue(String(newVal));
     triggerChange();
   };
   const handleIncrement = (e) => {
@@ -2578,7 +2606,8 @@ var TextField = forwardRef6(({
       readOnly,
       ...slotProps?.input,
       ...props,
-      onChange: handleChange
+      onChange: handleChange,
+      onBlur: handleBlur
     }
   ), InputProps?.endAdornment && /* @__PURE__ */ React143.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), !isTextarea && type === "number" && !disabled && !readOnly && /* @__PURE__ */ React143.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React143.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React143.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React143.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React143.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React143.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React143.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React143.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React143.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React143.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React143.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React143.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React143.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React143.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
@@ -11898,7 +11927,7 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React198, { useState as useState34, useRef as useRef30, useEffect as useEffect27, useCallback as useCallback17 } from "react";
+import React198, { useState as useState34, useRef as useRef30, useEffect as useEffect27, useLayoutEffect as useLayoutEffect4, useCallback as useCallback17 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
@@ -13328,6 +13357,15 @@ var IconCheck = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /*
 var IconPaste = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /* @__PURE__ */ React197.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
 
 // lib/RufousTextEditor/Toolbar.tsx
+var BASIC_MOBILE_BUTTONS = /* @__PURE__ */ new Set([
+  "undo",
+  "redo",
+  "bold",
+  "italic",
+  "link",
+  "ul",
+  "ol"
+]);
 var COLOR_PALETTE = [
   // Row 1: blacks/grays
   "#000000",
@@ -13775,7 +13813,47 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   const [todoEnabled, setTodoEnabled] = useState34(false);
   const ttsRef = useRef30(null);
   const sttRef = useRef30(null);
-  const show = (id) => !visibleButtons || visibleButtons.has(id);
+  const [isMobile, setIsMobile] = useState34(false);
+  const [expanded, setExpanded] = useState34(false);
+  const [overflows, setOverflows] = useState34(false);
+  const [winW, setWinW] = useState34(typeof window !== "undefined" ? window.innerWidth : 0);
+  const rowRef = useRef30(null);
+  useEffect27(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 600px)");
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  useEffect27(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => {
+      setWinW(window.innerWidth);
+      setOverflows(false);
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const hasCollapsibleButtons = !visibleButtons ? true : [...visibleButtons].some((b) => !BASIC_MOBILE_BUTTONS.has(b));
+  const collapsedActive = isMobile && overflows && hasCollapsibleButtons && !expanded;
+  const show = (id) => {
+    if (visibleButtons && !visibleButtons.has(id)) return false;
+    if (collapsedActive && !BASIC_MOBILE_BUTTONS.has(id)) return false;
+    return true;
+  };
+  useLayoutEffect4(() => {
+    if (collapsedActive) return;
+    const row = rowRef.current;
+    if (!row) return;
+    const kids = Array.from(row.children).filter(
+      (el) => el.offsetParent !== null && !el.classList?.contains("rte-toolbar-toggle")
+    );
+    const firstTop = kids.length ? kids[0].offsetTop : 0;
+    const wraps = kids.some((el) => el.offsetTop - firstTop > 2);
+    const next = isMobile && wraps;
+    setOverflows((prev) => prev === next ? prev : next);
+  }, [collapsedActive, isMobile, expanded, winW, visibleButtons]);
   useEffect27(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -13849,7 +13927,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ React198.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React198.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React198.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React198.createElement(
+  return /* @__PURE__ */ React198.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React198.createElement("div", { ref: rowRef, className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React198.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React198.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -14364,7 +14442,18 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         return true;
       }).run();
     } }, /* @__PURE__ */ React198.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React198.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-  })))), onClose && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React198.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React198.createElement(
+  }))), isMobile && overflows && hasCollapsibleButtons && /* @__PURE__ */ React198.createElement(
+    "button",
+    {
+      type: "button",
+      className: `toolbar-btn rte-toolbar-toggle ${expanded ? "is-expanded" : ""}`,
+      onClick: () => setExpanded((v) => !v),
+      title: expanded ? "Show fewer options" : "Show more options",
+      "aria-label": expanded ? "Collapse toolbar" : "Expand toolbar",
+      "aria-expanded": expanded
+    },
+    /* @__PURE__ */ React198.createElement(ChevronDown, { size: 18 })
+  )), onClose && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React198.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React198.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",

package/package.json

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