@dreamtree-org/twreact-ui 1.3.1 → 1.3.3

package/dist/esm/components/charts/chartTheme.js

@@ -0,0 +1,126 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useSyncExternalStore, useId } from 'react';
+import { prefersReducedMotion } from '../../utils/position.js';
+
+var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
+var DEFAULT_CHART_COLORS = ["primary", "success", "warning", "error", "info", "secondary", "gray"];
+var TOKEN_RE = new RegExp("^(".concat(CHART_PALETTES.join("|"), ")(?:-(50|[1-9]00|950))?$"));
+var CHROME_VARS = {
+  grid: "--dt-line",
+  axis: "--dt-muted",
+  surface: "--dt-surface",
+  text: "--dt-foreground"
+};
+/** `"primary"` → `"--dt-primary-500"`, `"error-300"` → `"--dt-error-300"`; null for anything else. */
+function tokenVar(color) {
+  var m = TOKEN_RE.exec(String(color || ""));
+  return m ? "--dt-".concat(m[1], "-").concat(m[2] || "500") : null;
+}
+function readVar(name) {
+  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return "";
+  return window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+// SVG presentation attributes do not resolve var() in every engine, so a token is
+// turned into a concrete rgb() string when the browser can tell us its value. The
+// var() form is the SSR / jsdom fallback, and what the first (hydrating) client
+// render uses so it matches the server's HTML (`live` = false).
+function resolveVar(name) {
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var value = live ? readVar(name) : "";
+  return value ? "rgb(".concat(value.split(/[\s,]+/).join(" "), ")") : "rgb(var(".concat(name, "))");
+}
+/**
+ * A series colour: a palette token (`primary`, `success-600`, …) resolves to the
+ * matching `--dt-*` variable; any other string is treated as a CSS colour supplied
+ * by the consumer (e.g. a colour stored with the data).
+ */
+function resolveColor(color) {
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var name = tokenVar(color);
+  return name ? resolveVar(name, live) : color;
+}
+function seriesColors(categories, colors) {
+  var live = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var palette = colors && colors.length ? colors : DEFAULT_CHART_COLORS;
+  return categories.map(function (_, i) {
+    return resolveColor(palette[i % palette.length], live);
+  });
+}
+function readChrome(live) {
+  return Object.fromEntries(Object.entries(CHROME_VARS).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      k = _ref2[0],
+      v = _ref2[1];
+    return [k, resolveVar(v, live)];
+  }));
+}
+// The theme is an external store: the attributes on <html> that flip it. The
+// server snapshot is null, so a hydrating render keeps the var() fallback the
+// server rendered and React re-renders with live colours right after (#130).
+function subscribeTheme(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver !== "function") return function () {};
+  var observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "style"]
+  });
+  return function () {
+    return observer.disconnect();
+  };
+}
+function themeSnapshot() {
+  if (typeof document === "undefined") return null;
+  var el = document.documentElement;
+  return "".concat(el.className, "|").concat(el.getAttribute("data-theme") || "", "|").concat(el.getAttribute("style") || "");
+}
+var serverThemeSnapshot = function serverThemeSnapshot() {
+  return null;
+};
+/**
+ * Chart chrome + series colours, re-read whenever the theme flips (the `dark`
+ * class or `data-theme` on <html>) so axes and series follow dark mode without
+ * a remount.
+ */
+function useChartTheme(categories, colors) {
+  // The snapshot only signals a change; the values come from the live document.
+  var live = useSyncExternalStore(subscribeTheme, themeSnapshot, serverThemeSnapshot) !== null;
+  return {
+    chrome: readChrome(live),
+    series: seriesColors(categories, colors, live)
+  };
+}
+function subscribeReducedMotion(onChange) {
+  var _query$addEventListen;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return function () {};
+  var query = window.matchMedia("(prefers-reduced-motion: reduce)");
+  (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", onChange);
+  return function () {
+    var _query$removeEventLis;
+    return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", onChange);
+  };
+}
+var serverReducedMotion = function serverReducedMotion() {
+  return false;
+};
+/**
+ * `true` while the user asks the OS for reduced motion; follows changes live.
+ * `false` on the server and while hydrating, so the first render matches.
+ */
+function useReducedMotion() {
+  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
+}
+var defaultValueFormatter = function defaultValueFormatter(value) {
+  return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
+};
+/**
+ * A per-instance id for the SVG defs recharts draws (clip paths). recharts 2
+ * falls back to a module-level counter, which differs between the server and the
+ * client; an id from React.useId() is the same on both. Only [A-Za-z0-9_-] so it
+ * is safe inside `url(#…)`.
+ */
+function useChartId() {
+  return "dt-chart-".concat(useId().replace(/[^A-Za-z0-9_-]/g, ""));
+}
+
+export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme, useReducedMotion };

package/dist/esm/components/core/Select.js

@@ -127,7 +127,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     onMenuItemRender = _ref.onMenuItemRender,
     className = _ref.className,
     _ref$allowClear = _ref.allowClear,
-    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
     _ref$creatable = _ref.creatable,
     creatable = _ref$creatable === void 0 ? false : _ref$creatable,
     onCreateOption = _ref.onCreateOption,
@@ -564,7 +564,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             }, opt.value);
           })
         }), jsxs("div", {
-          className: "text-xs text-primary-500",
+          className: "text-xs text-primary-700",
           children: ["+", rest]
         })]
       });

package/dist/esm/components/core/Table/MobileCard.js

@@ -128,6 +128,7 @@ function MobileCard(_ref) {
         }), menuActions.length > 0 && jsxs("div", {
           className: "relative",
           children: [jsx("button", {
+            type: "button",
             ref: function ref(el) {
               return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
             },
@@ -137,8 +138,10 @@ function MobileCard(_ref) {
             "aria-expanded": activeActionRowKey === actionCellKey,
             className: "p-1.5 rounded hover:bg-gray-200",
             title: "Actions",
+            "aria-label": "Actions",
             children: jsx(MoreVertical, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             })
           }), activeActionRowKey === actionCellKey && jsx(ActionMenu, {
             actions: menuActions,
@@ -166,7 +169,7 @@ function MobileCard(_ref) {
         return jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsx("div", {
-            className: "text-xs font-medium text-primary-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsx("div", {
             className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",

package/dist/esm/components/core/Table/MobileFilters.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import { Search } from 'lucide-react';
 
 /**
@@ -17,6 +17,7 @@ function MobileFilters(_ref) {
     visibleColumns = _ref.visibleColumns,
     filters = _ref.filters,
     handleFilter = _ref.handleFilter;
+  var idPrefix = React.useId();
   return jsxs("div", {
     className: "mb-4 p-3 bg-gray-50 rounded-lg",
     children: [jsxs("div", {
@@ -25,12 +26,14 @@ function MobileFilters(_ref) {
         className: "text-sm font-medium",
         children: "Filters"
       }), jsx("button", {
+        type: "button",
         onClick: function onClick() {
           return setShowMobileFilters(function (s) {
             return !s;
           });
         },
-        className: "text-xs text-primary-500",
+        "aria-expanded": !!showMobileFilters,
+        className: "text-xs font-medium text-primary-700",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxs("div", {
@@ -40,6 +43,7 @@ function MobileFilters(_ref) {
         children: [jsx("input", {
           type: "text",
           placeholder: "Search...",
+          "aria-label": "Search",
           className: "w-full rounded-md border border-gray-300 px-4 py-2 text-sm",
           value: searchInput,
           onChange: function onChange(e) {
@@ -47,14 +51,17 @@ function MobileFilters(_ref) {
           },
           onKeyDown: onGlobalKeyDown
         }), jsx(Search, {
-          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400"
+          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400",
+          "aria-hidden": "true"
         })]
       }), filterable && visibleColumns.map(function (column) {
         return jsxs("div", {
           children: [jsx("label", {
+            htmlFor: "".concat(idPrefix, "-filter-").concat(column.key),
             className: "block text-xs font-medium mb-1",
             children: column.label
           }), jsx("input", {
+            id: "".concat(idPrefix, "-filter-").concat(column.key),
             type: "text",
             placeholder: "Filter ".concat(column.label),
             className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm",

package/dist/esm/components/core/Table/Table.js

@@ -1179,10 +1179,13 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         children: [showReloadButton && jsx(Fragment, {
           children: renderReloadButton ? typeof renderReloadButton === "function" ? renderReloadButton() : renderReloadButton : jsxs("button", {
             type: "button",
+            "aria-label": "Reload",
+            title: "Reload",
             className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
             onClick: onReload,
             children: [jsx(RefreshCcw, {
-              className: "size-4"
+              className: "size-4",
+              "aria-hidden": "true"
             }), jsx("span", {
               className: "hidden sm:inline",
               children: "Reload"
@@ -1323,7 +1326,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
               children: "#"
             }), selectable && jsx("th", {
               className: "w-12 px-6 py-3",
@@ -1336,7 +1339,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             }), visibleColumns.map(function (column) {
               var _column$rules;
               return jsx("th", {
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider", {
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", {
                   "cursor-pointer hover:bg-gray-100": sortable && column.sortable !== false
                 }),
                 onClick: function onClick() {
@@ -1427,7 +1430,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                 children: [jsx("div", {
                   className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
                 }), jsx("span", {
-                  className: "text-sm text-primary-500",
+                  className: "text-sm text-muted",
                   children: "Loading..."
                 })]
               })
@@ -1445,7 +1448,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                       className: "h-8 w-8"
                     })
                   }), jsx("span", {
-                    className: "text-sm text-primary-500",
+                    className: "text-sm text-muted",
                     children: "No results found."
                   })]
                 })
@@ -1490,7 +1493,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
           children: [jsx("div", {
             className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
           }), jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "Loading..."
           })]
         })
@@ -1504,7 +1507,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               className: "h-8 w-8"
             })
           }), jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "No results found."
           })]
         })

package/dist/esm/components/rich-text/RichTextEditor.js

@@ -0,0 +1,244 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useEffect, useImperativeHandle } from 'react';
+import { useEditor, useEditorState, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { selectToolbarState, DEFAULT_TOOLBAR, RichTextToolbar } from './RichTextToolbar.js';
+
+var _excluded = ["id", "className", "editorClassName", "label", "error", "helperText", "required", "disabled", "readOnly", "placeholder", "value", "defaultValue", "onChange", "outputFormat", "onFocus", "onBlur", "toolbar", "toolbarLabel", "minHeight", "maxHeight", "autoFocus", "extensions", "aria-label", "aria-describedby"];
+// Tailwind's preflight strips list bullets, heading sizes, etc. These arbitrary
+// variants restore readable defaults inside the editable area only.
+var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-gray-900 focus:outline-none dark:text-gray-100", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
+var toCss = function toCss(v) {
+  return typeof v === "number" ? "".concat(v, "px") : v;
+};
+function sameContent(editor, value) {
+  if (typeof value === "string") return value === editor.getHTML();
+  return JSON.stringify(value) === JSON.stringify(editor.getJSON());
+}
+var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    className = _ref.className,
+    editorClassName = _ref.editorClassName,
+    label = _ref.label,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    placeholder = _ref.placeholder,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$outputFormat = _ref.outputFormat,
+    outputFormat = _ref$outputFormat === void 0 ? "html" : _ref$outputFormat,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    _ref$toolbar = _ref.toolbar,
+    toolbar = _ref$toolbar === void 0 ? DEFAULT_TOOLBAR : _ref$toolbar,
+    _ref$toolbarLabel = _ref.toolbarLabel,
+    toolbarLabel = _ref$toolbarLabel === void 0 ? "Formatting" : _ref$toolbarLabel,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 120 : _ref$minHeight,
+    maxHeight = _ref.maxHeight,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    extensions = _ref.extensions,
+    ariaLabel = _ref["aria-label"],
+    ariaDescribedBy = _ref["aria-describedby"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var reactId = useId();
+  var editorId = id || "rich-text-".concat(reactId);
+  var labelId = "".concat(editorId, "-label");
+  var errorId = "".concat(editorId, "-error");
+  var helperId = "".concat(editorId, "-helper");
+  var editable = !disabled && !readOnly;
+  var rootRef = useRef(null);
+  var callbacks = useLatestRef({
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    outputFormat: outputFormat
+  });
+  var describedBy = [error ? errorId : null, helperText ? helperId : null, ariaDescribedBy].filter(Boolean).join(" ") || undefined;
+  var attributes = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    id: editorId,
+    role: "textbox",
+    "aria-multiline": "true"
+  }, label ? {
+    "aria-labelledby": labelId
+  } : {
+    "aria-label": ariaLabel || placeholder || "Rich text editor"
+  }), describedBy ? {
+    "aria-describedby": describedBy
+  } : {}), error ? {
+    "aria-invalid": "true"
+  } : {}), required ? {
+    "aria-required": "true"
+  } : {}), readOnly ? {
+    "aria-readonly": "true"
+  } : {}), disabled ? {
+    "aria-disabled": "true"
+  } : {}), placeholder ? {
+    "aria-placeholder": placeholder
+  } : {}), {}, {
+    "class": cn(CONTENT_CLASSES, editorClassName)
+  });
+  var attributesKey = JSON.stringify(attributes);
+  var editor = useEditor({
+    extensions: [StarterKit.configure({
+      link: {
+        openOnClick: false,
+        autolink: true,
+        defaultProtocol: "https"
+      }
+    })].concat(_toConsumableArray(extensions || [])),
+    content: (_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : "",
+    editable: editable,
+    autofocus: autoFocus,
+    // Render on the client after mount: safe for SSR / Next.js hydration.
+    immediatelyRender: false,
+    editorProps: {
+      attributes: attributes
+    },
+    onUpdate: function onUpdate(_ref3) {
+      var instance = _ref3.editor;
+      var _callbacks$current = callbacks.current,
+        cb = _callbacks$current.onChange,
+        format = _callbacks$current.outputFormat;
+      cb === null || cb === void 0 || cb(format === "json" ? instance.getJSON() : instance.getHTML(), instance);
+    },
+    onFocus: function onFocus(_ref4) {
+      var _callbacks$current$on, _callbacks$current2;
+      var event = _ref4.event;
+      return (_callbacks$current$on = (_callbacks$current2 = callbacks.current).onFocus) === null || _callbacks$current$on === void 0 ? void 0 : _callbacks$current$on.call(_callbacks$current2, event);
+    },
+    onBlur: function onBlur(_ref5) {
+      var _callbacks$current$on2, _callbacks$current3;
+      var event = _ref5.event;
+      return (_callbacks$current$on2 = (_callbacks$current3 = callbacks.current).onBlur) === null || _callbacks$current$on2 === void 0 ? void 0 : _callbacks$current$on2.call(_callbacks$current3, event);
+    }
+  });
+  var watched = useEditorState({
+    editor: editor,
+    selector: function selector(_ref6) {
+      var instance = _ref6.editor;
+      return selectToolbarState(instance);
+    }
+  });
+  // useEditorState only re-selects on the next transaction after the editor
+  // mounts, so read the state directly until then.
+  var state = watched !== null && watched !== void 0 ? watched : selectToolbarState(editor);
+  useEffect(function () {
+    if (editor && value !== undefined && value !== null && !sameContent(editor, value)) {
+      editor.commands.setContent(value, {
+        emitUpdate: false
+      });
+    }
+  }, [editor, value]);
+  useEffect(function () {
+    if (editor && editor.isEditable !== editable) editor.setEditable(editable, false);
+  }, [editor, editable]);
+  useEffect(function () {
+    if (editor) editor.setOptions({
+      editorProps: {
+        attributes: JSON.parse(attributesKey)
+      }
+    });
+  }, [editor, attributesKey]);
+  useImperativeHandle(ref, function () {
+    return {
+      editor: editor,
+      element: rootRef.current,
+      focus: function focus() {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.focus();
+      },
+      clear: function clear() {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.clearContent(true);
+      },
+      getHTML: function getHTML() {
+        return editor ? editor.getHTML() : "";
+      },
+      getJSON: function getJSON() {
+        return editor ? editor.getJSON() : null;
+      },
+      setContent: function setContent(content) {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.setContent(content);
+      }
+    };
+  }, [editor]);
+  var focusEditor = function focusEditor() {
+    if (editable) editor === null || editor === void 0 || editor.commands.focus();
+  };
+  var items = Array.isArray(toolbar) ? toolbar : toolbar === false ? [] : DEFAULT_TOOLBAR;
+  var showToolbar = !readOnly && items.length > 0;
+  var showPlaceholder = placeholder && (state ? state.isEmpty : !(value !== null && value !== void 0 ? value : defaultValue));
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: rootRef,
+    className: cn("w-full", className),
+    "data-disabled": disabled || undefined
+  }, rest), {}, {
+    children: [label && jsxs("label", {
+      id: labelId,
+      onClick: focusEditor,
+      className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200",
+      children: [label, required && jsx("span", {
+        className: "ml-1 text-error-500",
+        "aria-hidden": "true",
+        children: "*"
+      })]
+    }), jsxs("div", {
+      className: cn("overflow-hidden rounded-md border bg-white dark:bg-gray-900", error ? "border-error-500" : "border-gray-300 dark:border-gray-600", disabled && "cursor-not-allowed opacity-50"),
+      children: [showToolbar && jsx(RichTextToolbar, {
+        editor: editor,
+        state: state,
+        items: items,
+        disabled: disabled,
+        controlsId: editorId,
+        label: toolbarLabel
+      }), jsxs("div", {
+        className: cn("relative overflow-y-auto focus-within:ring-2 focus-within:ring-inset", error ? "focus-within:ring-error-500" : "focus-within:ring-primary-500"),
+        style: {
+          minHeight: toCss(minHeight),
+          maxHeight: toCss(maxHeight)
+        },
+        onMouseDown: function onMouseDown(e) {
+          if (e.target === e.currentTarget) {
+            e.preventDefault();
+            focusEditor();
+          }
+        },
+        children: [showPlaceholder && jsx("div", {
+          className: "pointer-events-none absolute left-3 top-3 select-none text-sm text-gray-400 dark:text-gray-500",
+          "aria-hidden": "true",
+          children: placeholder
+        }), jsx(EditorContent, {
+          editor: editor
+        })]
+      })]
+    }), error && jsxs("p", {
+      id: errorId,
+      className: "mt-1 flex items-center gap-1 text-sm text-error-600 dark:text-error-400",
+      "aria-live": "polite",
+      children: [jsx(AlertCircle, {
+        className: "h-4 w-4 shrink-0",
+        "aria-hidden": "true"
+      }), error]
+    }), helperText && jsx("p", {
+      id: helperId,
+      className: "mt-1 text-sm text-gray-500 dark:text-gray-400",
+      children: helperText
+    })]
+  }));
+});
+RichTextEditor.displayName = "RichTextEditor";
+
+export { RichTextEditor as default };