@mieweb/ui 0.11.0-dev.28 → 0.11.0-dev.29

package/dist/chunk-2VISTX7O.js

@@ -0,0 +1,802 @@
+import { RichTextEditor } from './chunk-43QBEF6N.js';
+import { RequiredMark } from './chunk-3IMM2PM4.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React2 from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+var TextAreaRich = React2.forwardRef(
+  ({ className, markdownShortcuts = true, defaultToolbar = "hidden", ...rest }, ref) => /* @__PURE__ */ jsx(
+    RichTextEditor,
+    {
+      ref,
+      chromeless: true,
+      blockMenu: true,
+      markdownShortcuts,
+      defaultToolbar,
+      className: cn(
+        // Textarea's chrome: border, radius, focus ring (on the wrapper via
+        // focus-within since the editable sits inside it).
+        "border-input rounded-lg border",
+        "transition-colors duration-200",
+        "focus-within:ring-ring focus-within:border-transparent focus-within:ring-2",
+        className
+      ),
+      ...rest
+    }
+  )
+);
+TextAreaRich.displayName = "TextAreaRich";
+var textareaVariants = cva(
+  [
+    "w-full px-3 py-2",
+    "border border-input rounded-lg",
+    "bg-background text-foreground",
+    "placeholder:text-muted-foreground",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "resize-y"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm min-h-[60px]",
+        md: "text-base min-h-[80px]",
+        lg: "text-lg min-h-[100px]"
+      },
+      hasError: {
+        true: "border-destructive focus:ring-destructive",
+        false: ""
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      },
+      labelVariant: {
+        stacked: "",
+        floating: "peer placeholder:text-transparent"
+      },
+      autoResize: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Floating labels reserve top padding so entered text always starts
+      // below the floated label, plus a little extra min-height.
+      {
+        labelVariant: "floating",
+        size: "sm",
+        className: "pt-5 min-h-[76px]"
+      },
+      {
+        labelVariant: "floating",
+        size: "md",
+        className: "pt-6 min-h-[96px]"
+      },
+      {
+        labelVariant: "floating",
+        size: "lg",
+        className: "pt-7 min-h-[120px]"
+      },
+      // Auto-growing textareas start at the same visual height as a
+      // single-line Input (h-8/h-10/h-12): min-height matches the Input
+      // size token and the vertical padding is tuned so one line of text
+      // plus padding plus borders lands exactly on that height.
+      {
+        autoResize: true,
+        labelVariant: "stacked",
+        size: "sm",
+        className: "min-h-8 py-[5px]"
+      },
+      {
+        autoResize: true,
+        labelVariant: "stacked",
+        size: "md",
+        className: "min-h-10 py-[7px]"
+      },
+      {
+        autoResize: true,
+        labelVariant: "stacked",
+        size: "lg",
+        className: "min-h-12 py-[9px]"
+      },
+      // Floating label + auto-grow: single line below the floated label.
+      {
+        autoResize: true,
+        labelVariant: "floating",
+        size: "sm",
+        className: "min-h-[50px]"
+      },
+      {
+        autoResize: true,
+        labelVariant: "floating",
+        size: "md",
+        className: "min-h-[58px]"
+      },
+      {
+        autoResize: true,
+        labelVariant: "floating",
+        size: "lg",
+        className: "min-h-[66px]"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      hasError: false,
+      resize: "vertical",
+      labelVariant: "stacked",
+      autoResize: true
+    }
+  }
+);
+var floatingLabelVariants = cva(
+  [
+    "absolute start-3 pointer-events-none select-none",
+    "transition-all duration-200 ease-out"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "text-sm top-3",
+          "peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1",
+          "peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]"
+        ],
+        md: [
+          "text-base top-4",
+          "peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5",
+          "peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs"
+        ],
+        lg: [
+          "text-lg top-5",
+          "peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2",
+          "peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm"
+        ]
+      },
+      hasError: {
+        true: "text-destructive",
+        false: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
+    }
+  }
+);
+var TextAreaPlain = React2.forwardRef(
+  ({
+    className,
+    size,
+    hasError,
+    resize,
+    label,
+    labelVariant = "stacked",
+    hideLabel,
+    error,
+    helperText,
+    maxLength,
+    showCount = false,
+    autoResize = true,
+    required = false,
+    requiredVariant,
+    id,
+    rows,
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const internalRef = React2.useRef(null);
+    const [internalValue, setInternalValue] = React2.useState(
+      defaultValue || ""
+    );
+    const generatedId = React2.useId();
+    const textareaId = id || generatedId;
+    const errorId = `${textareaId}-error`;
+    const helperId = `${textareaId}-helper`;
+    const countId = `${textareaId}-count`;
+    React2.useImperativeHandle(ref, () => internalRef.current);
+    const currentValue = value !== void 0 ? String(value) : internalValue;
+    const characterCount = currentValue.length;
+    const userFloorRef = React2.useRef(null);
+    const expectedHeightRef = React2.useRef(null);
+    const initialFloorCapturedRef = React2.useRef(false);
+    const adjustHeight = React2.useCallback(() => {
+      const textarea = internalRef.current;
+      if (textarea && autoResize) {
+        textarea.style.height = "auto";
+        const borders = textarea.offsetHeight - textarea.clientHeight;
+        const next = Math.max(
+          textarea.scrollHeight + borders,
+          userFloorRef.current ?? 0
+        );
+        textarea.style.height = `${next}px`;
+        expectedHeightRef.current = textarea.offsetHeight || next;
+      }
+    }, [autoResize]);
+    React2.useEffect(() => {
+      const textarea = internalRef.current;
+      if (textarea && autoResize && !initialFloorCapturedRef.current) {
+        initialFloorCapturedRef.current = true;
+        const configured = textarea.offsetHeight;
+        adjustHeight();
+        if (configured - textarea.offsetHeight > 1) {
+          userFloorRef.current = configured;
+          textarea.style.height = `${configured}px`;
+          expectedHeightRef.current = textarea.offsetHeight || configured;
+        }
+        return;
+      }
+      adjustHeight();
+    }, [currentValue, adjustHeight, autoResize]);
+    React2.useEffect(() => {
+      const textarea = internalRef.current;
+      if (!autoResize || !textarea || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      let lastWidth = textarea.offsetWidth;
+      const observer = new ResizeObserver(() => {
+        const expected = expectedHeightRef.current;
+        const height = textarea.offsetHeight;
+        if (expected !== null && Math.abs(height - expected) > 1) {
+          userFloorRef.current = height;
+          expectedHeightRef.current = height;
+        }
+        if (textarea.offsetWidth !== lastWidth) {
+          lastWidth = textarea.offsetWidth;
+          adjustHeight();
+        }
+      });
+      observer.observe(textarea);
+      return () => observer.disconnect();
+    }, [autoResize, adjustHeight]);
+    const handleChange = React2.useCallback(
+      (e) => {
+        if (value === void 0) {
+          setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+        adjustHeight();
+      },
+      [value, onChange, adjustHeight]
+    );
+    const describedByIds = [
+      error ? errorId : null,
+      helperText && !error ? helperId : null,
+      showCount ? countId : null,
+      ariaDescribedBy
+    ].filter(Boolean).join(" ");
+    const isFloating = labelVariant === "floating" && !!label && !hideLabel;
+    const requiredMark = required && /* @__PURE__ */ jsx(RequiredMark, { variant: requiredVariant });
+    const textareaElement = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "data-slot": "textarea",
+        "data-auto-resize": autoResize ? "true" : void 0,
+        ref: internalRef,
+        id: textareaId,
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        onChange: handleChange,
+        maxLength,
+        "aria-invalid": hasError || !!error,
+        "aria-describedby": describedByIds || void 0,
+        required,
+        rows: autoResize ? rows ?? 1 : rows,
+        placeholder: isFloating ? " " : placeholder,
+        className: cn(
+          textareaVariants({
+            size,
+            hasError: hasError || !!error,
+            resize,
+            labelVariant: isFloating ? "floating" : "stacked",
+            autoResize
+          }),
+          className
+        ),
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "textarea-wrapper", className: "flex flex-col gap-1.5", children: [
+      label && !isFloating && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          "data-slot": "textarea-label",
+          htmlFor: textareaId,
+          className: cn(
+            "text-foreground text-sm font-medium",
+            hideLabel && "sr-only"
+          ),
+          children: [
+            label,
+            requiredMark
+          ]
+        }
+      ),
+      isFloating ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        textareaElement,
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-slot": "textarea-label",
+            htmlFor: textareaId,
+            className: floatingLabelVariants({
+              size,
+              hasError: hasError || !!error
+            }),
+            children: [
+              label,
+              requiredMark
+            ]
+          }
+        )
+      ] }) : textareaElement,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "textarea-footer",
+          className: "flex items-center justify-between gap-2",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              error && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: errorId,
+                  "data-slot": "textarea-error",
+                  className: "text-destructive-700 dark:text-destructive-400 text-sm",
+                  role: "alert",
+                  children: error
+                }
+              ),
+              helperText && !error && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: helperId,
+                  "data-slot": "textarea-helper",
+                  className: "text-muted-foreground text-sm",
+                  children: helperText
+                }
+              )
+            ] }),
+            showCount && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                id: countId,
+                "data-slot": "textarea-count",
+                className: cn(
+                  "text-muted-foreground shrink-0 text-xs",
+                  maxLength && characterCount >= maxLength && "text-destructive"
+                ),
+                children: [
+                  characterCount,
+                  maxLength && `/${maxLength}`
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+TextAreaPlain.displayName = "TextAreaPlain";
+function escapeHtml(text) {
+  return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function normalizeNewlines(text) {
+  return text.replace(/\r\n?/g, "\n");
+}
+function plainToHtml(text) {
+  if (!text) return "";
+  return normalizeNewlines(text).split("\n").map((line) => line ? `<p>${escapeHtml(line)}</p>` : "<p><br></p>").join("");
+}
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "P",
+  "DIV",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "LI",
+  "UL",
+  "OL",
+  "BLOCKQUOTE",
+  "PRE",
+  "TABLE",
+  "CAPTION",
+  "THEAD",
+  "TBODY",
+  "TFOOT",
+  "TR"
+]);
+var CELL_TAGS = /* @__PURE__ */ new Set(["TD", "TH"]);
+var TABLE_STRUCTURE_TAGS = /* @__PURE__ */ new Set([
+  "TABLE",
+  "THEAD",
+  "TBODY",
+  "TFOOT",
+  "TR"
+]);
+var IGNORED_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT"]);
+function nodeListToText(nodes) {
+  let out = "";
+  let afterCell = false;
+  for (const node of nodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent ?? "";
+      const parentTag = node.parentElement?.tagName;
+      if (!text.trim() && parentTag && TABLE_STRUCTURE_TAGS.has(parentTag)) {
+        continue;
+      }
+      out += text;
+      if (text.trim()) afterCell = false;
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = node;
+    if (IGNORED_TAGS.has(el.tagName)) continue;
+    if (el.tagName === "BR") {
+      afterCell = false;
+      out += "\n";
+      continue;
+    }
+    if (CELL_TAGS.has(el.tagName)) {
+      if (afterCell) out += "	";
+      out += nodeListToText(el.childNodes);
+      afterCell = true;
+      continue;
+    }
+    afterCell = false;
+    if (BLOCK_TAGS.has(el.tagName)) {
+      if (out && !out.endsWith("\n")) out += "\n";
+      let inner = nodeListToText(el.childNodes);
+      if (inner === "\n") inner = "";
+      out += inner;
+      if (inner === "" || !inner.endsWith("\n")) out += "\n";
+      continue;
+    }
+    out += nodeListToText(el.childNodes);
+  }
+  return out;
+}
+function htmlToPlain(html) {
+  if (!html) return "";
+  const root = document.createElement("template");
+  root.innerHTML = html;
+  const text = nodeListToText(root.content.childNodes);
+  return text.endsWith("\n") ? text.slice(0, -1) : text;
+}
+function sanitizePastedHtml(html) {
+  return plainToHtml(htmlToPlain(html));
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (process.env.NODE_ENV !== "production" && !warned.has(key)) {
+    warned.add(key);
+    console.warn(`[mieweb/ui Textarea] ${message}`);
+  }
+}
+var RichTextarea = React2.forwardRef(
+  ({
+    label,
+    labelVariant = "stacked",
+    hideLabel,
+    error,
+    helperText,
+    maxLength,
+    showCount,
+    autoResize = true,
+    requiredVariant,
+    size = "md",
+    hasError,
+    resize,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    name,
+    form,
+    id,
+    rows,
+    required,
+    readOnly,
+    disabled,
+    placeholder,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    warnOnce(
+      "rich-upgrade",
+      'Since 0.12.0 Textarea renders a rich text surface (plain-text value contract unchanged). Watch for: CSS "textarea" selectors, E2E fill()/type(), and maxLength no longer blocking typing. Opt out per field with richText={false} or use TextAreaPlain. See MIGRATION.md.'
+    );
+    if (labelVariant === "floating") {
+      warnOnce(
+        "floating",
+        'labelVariant="floating" is not supported by the rich surface; falling back to a stacked label. Use TextAreaPlain for floating labels.'
+      );
+    }
+    if (autoResize === false) {
+      warnOnce(
+        "autoResize",
+        "autoResize={false} is ignored; the rich surface always grows with content. Use TextAreaPlain for a fixed-height textarea."
+      );
+    }
+    if (resize !== void 0) {
+      warnOnce(
+        "resize",
+        "resize is ignored; the rich surface has no native resize handle. Use TextAreaPlain for drag-resizing."
+      );
+    }
+    if (maxLength !== void 0) {
+      warnOnce(
+        "maxLength",
+        "maxLength is not enforced while typing; the character count still reflects it. Enforce limits in onChange or use TextAreaPlain."
+      );
+    }
+    const reactId = React2.useId();
+    const errorId = `${reactId}-error`;
+    const helperId = `${reactId}-helper`;
+    const countId = `${reactId}-count`;
+    const controlledValue = value !== void 0 ? normalizeNewlines(String(value)) : void 0;
+    const [state, setState] = React2.useState(() => {
+      const plain = controlledValue ?? (defaultValue !== void 0 ? normalizeNewlines(String(defaultValue)) : "");
+      return { html: plainToHtml(plain), plain };
+    });
+    if (controlledValue !== void 0 && controlledValue !== state.plain) {
+      setState({ html: plainToHtml(controlledValue), plain: controlledValue });
+    }
+    const hiddenRef = React2.useRef(null);
+    const editorWrapperRef = React2.useRef(null);
+    React2.useEffect(() => {
+      const editable = editorWrapperRef.current?.querySelector(
+        '[role="textbox"]'
+      );
+      if (editable && htmlToPlain(editable.innerHTML) !== state.plain) {
+        editable.innerHTML = state.html;
+      }
+    });
+    const focusEditor = React2.useCallback(() => {
+      editorWrapperRef.current?.querySelector('[role="textbox"]')?.focus();
+    }, []);
+    React2.useImperativeHandle(ref, () => {
+      const node = hiddenRef.current;
+      node.focus = focusEditor;
+      node.blur = () => {
+        const editable = editorWrapperRef.current?.querySelector(
+          '[role="textbox"]'
+        );
+        if (document.activeElement === editable) editable?.blur();
+      };
+      return node;
+    }, [focusEditor]);
+    const [externalLabelId, setExternalLabelId] = React2.useState();
+    React2.useEffect(() => {
+      if (!id) return;
+      const externalLabel = document.querySelector(
+        `label[for="${globalThis.CSS.escape(id)}"]`
+      );
+      if (!externalLabel) return;
+      if (!externalLabel.id) externalLabel.id = `${reactId}-external-label`;
+      setExternalLabelId(externalLabel.id);
+      const handleClick = () => focusEditor();
+      externalLabel.addEventListener("click", handleClick);
+      return () => externalLabel.removeEventListener("click", handleClick);
+    }, [id, reactId, focusEditor]);
+    const retargetEvent = React2.useCallback(
+      (event) => {
+        const node = hiddenRef.current;
+        if (!node) return event;
+        const retargeted = Object.create(event);
+        Object.defineProperties(retargeted, {
+          target: { value: node, enumerable: true },
+          currentTarget: { value: node, enumerable: true },
+          stopPropagation: { value: () => event.stopPropagation() },
+          preventDefault: { value: () => event.preventDefault() }
+        });
+        return retargeted;
+      },
+      []
+    );
+    const focusStaysInside = (event) => {
+      const related = event.relatedTarget;
+      if (!related) return false;
+      if (event.currentTarget.contains(related)) return true;
+      const menuId = related.closest('[data-slot="dropdown-menu"]')?.querySelector('[role="menu"]')?.id;
+      return !!menuId && !!event.currentTarget.querySelector(
+        `[aria-controls="${globalThis.CSS.escape(menuId)}"]`
+      );
+    };
+    const handleHtmlChange = (html) => {
+      const plain = htmlToPlain(html);
+      setState({ html, plain });
+      const node = hiddenRef.current;
+      if (onChange && node) {
+        node.value = plain;
+        const nativeEvent = new Event("change");
+        onChange({
+          target: node,
+          currentTarget: node,
+          type: "change",
+          bubbles: false,
+          cancelable: false,
+          defaultPrevented: false,
+          eventPhase: 0,
+          isTrusted: false,
+          timeStamp: Date.now(),
+          nativeEvent,
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isDefaultPrevented: () => false,
+          isPropagationStopped: () => false,
+          persist: () => {
+          }
+        });
+      }
+    };
+    const showError = !!error;
+    const invalid = hasError || showError;
+    const describedByIds = [
+      showError ? errorId : null,
+      helperText && !showError ? helperId : null,
+      showCount ? countId : null,
+      ariaDescribedBy
+    ].filter(Boolean).join(" ") || void 0;
+    const characterCount = state.plain.length;
+    const lineHeightPx = size === "sm" ? 20 : size === "lg" ? 28 : 24;
+    const editorStyle = rows ? (
+      // 7px block padding each side, matching the editable's py-[7px].
+      { minHeight: `${rows * lineHeightPx + 14}px` }
+    ) : void 0;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "textarea-wrapper", className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          "data-slot": "textarea-label",
+          className: cn(
+            "text-foreground text-sm font-medium",
+            hideLabel && "sr-only"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx(RequiredMark, { variant: requiredVariant })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorWrapperRef,
+          className: "w-full",
+          onBlur: onBlur && ((event) => {
+            if (focusStaysInside(event)) return;
+            onBlur(retargetEvent(event));
+          }),
+          onFocus: onFocus && ((event) => {
+            if (focusStaysInside(event)) return;
+            onFocus(retargetEvent(event));
+          }),
+          onKeyDown: onKeyDown && ((event) => onKeyDown(retargetEvent(event))),
+          onKeyUp: onKeyUp && ((event) => onKeyUp(retargetEvent(event))),
+          children: /* @__PURE__ */ jsx(
+            TextAreaRich,
+            {
+              value: state.html,
+              onChange: handleHtmlChange,
+              placeholder,
+              disabled,
+              readOnly,
+              id,
+              sanitizeHtml: sanitizePastedHtml,
+              "aria-label": ariaLabel ?? label,
+              "aria-labelledby": ariaLabelledBy ?? externalLabelId,
+              "aria-describedby": describedByIds,
+              "aria-invalid": invalid || void 0,
+              "aria-required": required || void 0,
+              editorClassName: cn(
+                // A native textarea renders repeated spaces and tabs
+                // faithfully; normal HTML layout would collapse them.
+                "whitespace-pre-wrap",
+                size === "sm" && "text-sm",
+                size === "lg" && "text-lg"
+              ),
+              editorStyle,
+              className: cn(
+                size === "sm" && "text-sm",
+                size === "lg" && "text-lg",
+                invalid && "border-destructive focus-within:ring-destructive focus-within:border-destructive",
+                disabled && "cursor-not-allowed opacity-50",
+                className
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          "data-slot": "textarea-mirror",
+          ref: hiddenRef,
+          hidden: true,
+          readOnly: true,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          name,
+          form,
+          required,
+          disabled,
+          value: state.plain
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "textarea-footer",
+          className: "flex items-center justify-between gap-2",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              showError && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: errorId,
+                  "data-slot": "textarea-error",
+                  className: "text-destructive-700 dark:text-destructive-400 text-sm",
+                  role: "alert",
+                  children: error
+                }
+              ),
+              helperText && !showError && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: helperId,
+                  "data-slot": "textarea-helper",
+                  className: "text-muted-foreground text-sm",
+                  children: helperText
+                }
+              )
+            ] }),
+            showCount && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                id: countId,
+                "data-slot": "textarea-count",
+                className: cn(
+                  "text-muted-foreground shrink-0 text-xs",
+                  maxLength && characterCount >= maxLength && "text-destructive"
+                ),
+                children: [
+                  characterCount,
+                  maxLength && `/${maxLength}`
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+RichTextarea.displayName = "RichTextarea";
+var Textarea = React2.forwardRef(
+  ({ richText = true, ...props }, ref) => richText ? /* @__PURE__ */ jsx(RichTextarea, { ref, ...props }) : /* @__PURE__ */ jsx(TextAreaPlain, { ref, ...props })
+);
+Textarea.displayName = "Textarea";
+
+export { TextAreaPlain, TextAreaRich, Textarea, htmlToPlain, plainToHtml, textareaVariants };
+//# sourceMappingURL=chunk-2VISTX7O.js.map
+//# sourceMappingURL=chunk-2VISTX7O.js.map