@choice-ui/react 1.3.10

package/dist/esm/components/textarea/dist/index.js

@@ -0,0 +1,862 @@
+import { ScrollArea } from "../../scroll-area/dist/index.js";
+import React, { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect, Children, isValidElement, memo } from "react";
+import { useUnmount, useEventCallback, useIsomorphicLayoutEffect } from "usehooks-ts";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
+import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+var ResizeHandle = memo(function ResizeHandle2({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M9.11111 2L2 9.11111M10 6.44444L6.44444 10",
+              className: "stroke-secondary-foreground",
+              strokeWidth: "1",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+ResizeHandle.displayName = "ResizeHandle";
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+var noop = () => {
+};
+var pick = (props, obj) => props.reduce(
+  (acc, prop) => {
+    if (prop in obj) {
+      acc[prop] = obj[prop];
+    }
+    return acc;
+  },
+  {}
+);
+var HIDDEN_TEXTAREA_STYLE = {
+  "min-height": "0",
+  "max-height": "none",
+  height: "0",
+  visibility: "hidden",
+  overflow: "hidden",
+  position: "absolute",
+  "z-index": "-1000",
+  top: "0",
+  right: "0",
+  display: "block"
+};
+var forceHiddenStyles = (node) => {
+  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {
+    node.style.setProperty(
+      key,
+      HIDDEN_TEXTAREA_STYLE[key],
+      "important"
+    );
+  });
+};
+var force_hidden_styles_default = forceHiddenStyles;
+var hiddenTextareaCache = /* @__PURE__ */ new WeakMap();
+var getOrCreateHiddenTextarea = () => {
+  if (!isBrowser || !(document == null ? void 0 : document.createElement)) {
+    return null;
+  }
+  let hiddenTextarea = hiddenTextareaCache.get(document);
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement("textarea");
+    hiddenTextarea.setAttribute("tabindex", "-1");
+    hiddenTextarea.setAttribute("aria-hidden", "true");
+    force_hidden_styles_default(hiddenTextarea);
+    hiddenTextareaCache.set(document, hiddenTextarea);
+  }
+  return hiddenTextarea;
+};
+var getHeight = (node, sizingData) => {
+  const height = node.scrollHeight;
+  if (sizingData.sizingStyle.boxSizing === "border-box") {
+    return height + sizingData.borderSize;
+  }
+  return height - sizingData.paddingSize;
+};
+function calculateNodeHeight(sizingData, value, minRows = 1, maxRows = Infinity) {
+  if (!isBrowser || !(document == null ? void 0 : document.createElement)) {
+    const estimatedRowHeight = 20;
+    const estimatedHeight = Math.max(estimatedRowHeight * minRows, estimatedRowHeight);
+    return [estimatedHeight, estimatedRowHeight];
+  }
+  if (minRows < 1) minRows = 1;
+  if (maxRows < minRows) maxRows = minRows;
+  const hiddenTextarea = getOrCreateHiddenTextarea();
+  if (!hiddenTextarea) {
+    const fallbackRowHeight = 16;
+    return [fallbackRowHeight * minRows, fallbackRowHeight];
+  }
+  if (hiddenTextarea.parentNode === null) {
+    document.body.appendChild(hiddenTextarea);
+  }
+  const { paddingSize, borderSize, sizingStyle } = sizingData;
+  const { boxSizing } = sizingStyle;
+  try {
+    Object.keys(sizingStyle).forEach((_key) => {
+      const key = _key;
+      const value2 = sizingStyle[key];
+      if (value2 != null) {
+        hiddenTextarea.style[key] = String(value2);
+      }
+    });
+    force_hidden_styles_default(hiddenTextarea);
+    hiddenTextarea.value = value || "x";
+    let height = getHeight(hiddenTextarea, sizingData);
+    hiddenTextarea.value = value || "x";
+    height = getHeight(hiddenTextarea, sizingData);
+    hiddenTextarea.value = "x";
+    const rowHeight = Math.max(hiddenTextarea.scrollHeight - paddingSize, 1);
+    let minHeight = rowHeight * minRows;
+    if (boxSizing === "border-box") {
+      minHeight = minHeight + paddingSize + borderSize;
+    }
+    height = Math.max(minHeight, height);
+    if (maxRows !== Infinity) {
+      let maxHeight = rowHeight * maxRows;
+      if (boxSizing === "border-box") {
+        maxHeight = maxHeight + paddingSize + borderSize;
+      }
+      height = Math.min(maxHeight, height);
+    }
+    return [Math.max(height, 1), Math.max(rowHeight, 1)];
+  } catch (error) {
+    const fallbackRowHeight = 16;
+    return [fallbackRowHeight * minRows, fallbackRowHeight];
+  }
+}
+var SIZING_STYLE = [
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRightWidth",
+  "borderTopWidth",
+  "boxSizing",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  // non-standard
+  "tabSize",
+  "textIndent",
+  // non-standard
+  "textRendering",
+  "textTransform",
+  "width",
+  "wordBreak",
+  "wordSpacing",
+  "scrollbarGutter"
+];
+var isIE = isBrowser ? !!document.documentElement.currentStyle : false;
+var safeParseFloat = (value, defaultValue = 0) => {
+  if (!value) return defaultValue;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? defaultValue : parsed;
+};
+var getSizingData = (node) => {
+  if (!isBrowser || !(window == null ? void 0 : window.getComputedStyle)) {
+    return null;
+  }
+  try {
+    if (!node.isConnected) {
+      return null;
+    }
+    const rect = node.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+    }
+    const style = window.getComputedStyle(node);
+    if (!style) {
+      return null;
+    }
+    const sizingStyle = pick(
+      SIZING_STYLE,
+      style
+    );
+    const { boxSizing } = sizingStyle;
+    if (!boxSizing || boxSizing === "") {
+      return null;
+    }
+    if (isIE && boxSizing === "border-box" && sizingStyle.width) {
+      const width = safeParseFloat(sizingStyle.width);
+      const borderRight = safeParseFloat(sizingStyle.borderRightWidth);
+      const borderLeft = safeParseFloat(sizingStyle.borderLeftWidth);
+      const paddingRight = safeParseFloat(sizingStyle.paddingRight);
+      const paddingLeft = safeParseFloat(sizingStyle.paddingLeft);
+      sizingStyle.width = `${width + borderRight + borderLeft + paddingRight + paddingLeft}px`;
+    }
+    const paddingSize = safeParseFloat(sizingStyle.paddingBottom) + safeParseFloat(sizingStyle.paddingTop);
+    const borderSize = safeParseFloat(sizingStyle.borderBottomWidth) + safeParseFloat(sizingStyle.borderTopWidth);
+    return {
+      sizingStyle,
+      paddingSize: Math.max(paddingSize, 0),
+      borderSize: Math.max(borderSize, 0)
+    };
+  } catch (error) {
+    return null;
+  }
+};
+var get_sizing_data_default = getSizingData;
+function useLatest(value) {
+  const ref = React.useRef(value);
+  ref.current = value;
+  return ref;
+}
+function useComposedRef(libRef, userRef) {
+  return React.useCallback(
+    (node) => {
+      libRef.current = node;
+      if (typeof userRef === "function") {
+        userRef(node);
+      } else if (userRef) {
+        const ref = userRef;
+        ref.current = node;
+      }
+    },
+    [libRef, userRef]
+  );
+}
+function useListener(target, type, listener) {
+  const latestListener = useLatest(listener);
+  useIsomorphicLayoutEffect(() => {
+    if (!isBrowser || !target) {
+      return;
+    }
+    const handler = (ev) => latestListener.current(ev);
+    try {
+      target.addEventListener(type, handler);
+      return () => {
+        try {
+          target.removeEventListener(type, handler);
+        } catch (error) {
+        }
+      };
+    } catch (error) {
+      return;
+    }
+  }, [target, type, latestListener]);
+}
+var useFormResetListener = (libRef, listener) => {
+  const stableListener = React.useCallback(
+    (ev) => {
+      var _a;
+      if (((_a = libRef.current) == null ? void 0 : _a.form) === ev.target) {
+        listener(ev);
+      }
+    },
+    [libRef, listener]
+  );
+  useListener(isBrowser ? document.body : null, "reset", stableListener);
+};
+var useWindowResizeListener = (listener) => {
+  useListener(isBrowser ? window : null, "resize", listener);
+};
+var useFontsLoadedListener = (listener) => {
+  const safeListener = React.useCallback(
+    (event) => {
+      try {
+        listener(event);
+      } catch (error) {
+      }
+    },
+    [listener]
+  );
+  useListener(
+    isBrowser && document.fonts ? document.fonts : null,
+    "loadingdone",
+    safeListener
+  );
+};
+function useDebounce(func, delay) {
+  const timeoutRef = useRef();
+  const funcRef = useRef(func);
+  useIsomorphicLayoutEffect(() => {
+    funcRef.current = func;
+  });
+  const debouncedFn = useMemo(() => {
+    return (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        funcRef.current(...args);
+      }, delay);
+    };
+  }, [delay]);
+  return debouncedFn;
+}
+var TextareaAutosize = forwardRef(
+  function TextareaAutosize2({
+    cacheMeasurements = true,
+    maxRows,
+    minRows = 1,
+    onChange = noop,
+    onHeightChange = noop,
+    style,
+    debounceMs = 0,
+    ...props
+  }, userRef) {
+    const isControlled = props.value !== void 0;
+    const libRef = React.useRef(null);
+    const ref = useComposedRef(libRef, userRef);
+    const heightRef = React.useRef(0);
+    const measurementsCacheRef = React.useRef();
+    const lastValueRef = React.useRef("");
+    const normalizedMinRows = Math.max(minRows, 1);
+    const normalizedMaxRows = maxRows && maxRows >= normalizedMinRows ? maxRows : void 0;
+    const resizeTextarea = React.useCallback(() => {
+      const node = libRef.current;
+      if (!node || !isBrowser) return;
+      const currentValue = node.value || node.placeholder || "";
+      try {
+        const nodeSizingData = get_sizing_data_default(node);
+        if (!nodeSizingData) {
+          requestAnimationFrame(() => {
+            const retryData = get_sizing_data_default(node);
+            if (!retryData) return;
+            if (cacheMeasurements) {
+              measurementsCacheRef.current = retryData;
+              lastValueRef.current = currentValue;
+            }
+            const [height2, rowHeight2] = calculateNodeHeight(
+              retryData,
+              currentValue,
+              normalizedMinRows,
+              normalizedMaxRows
+            );
+            if (heightRef.current !== height2) {
+              heightRef.current = height2;
+              node.style.setProperty("height", `${height2}px`, "important");
+              onHeightChange(height2, { rowHeight: rowHeight2 });
+            }
+          });
+          return;
+        }
+        if (cacheMeasurements) {
+          measurementsCacheRef.current = nodeSizingData;
+          lastValueRef.current = currentValue;
+        }
+        const [height, rowHeight] = calculateNodeHeight(
+          nodeSizingData,
+          currentValue,
+          normalizedMinRows,
+          normalizedMaxRows
+        );
+        if (heightRef.current !== height) {
+          heightRef.current = height;
+          node.style.setProperty("height", `${height}px`, "important");
+          onHeightChange(height, { rowHeight });
+        }
+      } catch (error) {
+      }
+    }, [cacheMeasurements, normalizedMinRows, normalizedMaxRows, onHeightChange]);
+    const debouncedResize = useDebounce(resizeTextarea, debounceMs);
+    const handleChange = React.useCallback(
+      (event) => {
+        if (!isControlled) {
+          if (debounceMs > 0) {
+            debouncedResize();
+          } else {
+            resizeTextarea();
+          }
+        }
+        onChange(event);
+      },
+      [isControlled, debounceMs, debouncedResize, resizeTextarea, onChange]
+    );
+    const formResetCallback = React.useCallback(() => {
+      var _a;
+      if (!isControlled) {
+        const currentValue = ((_a = libRef.current) == null ? void 0 : _a.value) || "";
+        requestAnimationFrame(() => {
+          const node = libRef.current;
+          if (node && currentValue !== node.value) {
+            resizeTextarea();
+          }
+        });
+      }
+    }, [isControlled, resizeTextarea]);
+    useIsomorphicLayoutEffect(resizeTextarea);
+    useFormResetListener(libRef, formResetCallback);
+    useWindowResizeListener(resizeTextarea);
+    useFontsLoadedListener(resizeTextarea);
+    React.useEffect(() => {
+      const node = libRef.current;
+      if (!node || !isBrowser || typeof IntersectionObserver === "undefined") {
+        return;
+      }
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              requestAnimationFrame(() => {
+                resizeTextarea();
+              });
+            }
+          });
+        },
+        { threshold: 0 }
+      );
+      observer.observe(node);
+      return () => {
+        observer.disconnect();
+      };
+    }, [resizeTextarea]);
+    React.useEffect(() => {
+      resizeTextarea();
+    }, [style == null ? void 0 : style.lineHeight, style == null ? void 0 : style.padding, resizeTextarea]);
+    const mergedStyle = useMemo(() => {
+      if (!isBrowser) {
+        const estimatedRowHeight = 20;
+        const estimatedHeight = estimatedRowHeight * normalizedMinRows;
+        return {
+          ...style,
+          minHeight: `${estimatedHeight}px`
+        };
+      }
+      return style;
+    }, [style, normalizedMinRows]);
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        style: mergedStyle,
+        onChange: isBrowser ? handleChange : onChange,
+        ref
+      }
+    );
+  }
+);
+TextareaAutosize.displayName = "TextareaAutosize";
+var TextareaTv = tcv({
+  slots: {
+    container: "relative rounded-md border border-transparent min-w-0",
+    textarea: [
+      "w-full min-w-0",
+      "px-2 py-1",
+      "cursor-text",
+      "bg-transparent",
+      "placeholder:text-secondary-foreground",
+      "resize-none appearance-none",
+      "focus:outline-none",
+      "overflow-hidden"
+    ],
+    viewport: "h-full w-full",
+    content: "flex flex-col",
+    resizeHandle: [
+      "absolute right-0 bottom-0 cursor-ns-resize",
+      "flex size-6 items-center justify-center",
+      "select-none"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {
+        container: "bg-secondary-background",
+        textarea: "text-default-foreground"
+      },
+      light: {
+        container: "bg-gray-100",
+        textarea: "text-gray-900 placeholder:text-black/50"
+      },
+      dark: {
+        container: "bg-gray-700",
+        textarea: "text-white placeholder:text-white/40"
+      },
+      reset: {}
+    },
+    resize: {
+      auto: {},
+      handle: {
+        textarea: "min-h-[inherit] pr-6"
+      },
+      false: {}
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {},
+      false: {}
+    },
+    readOnly: {
+      true: {
+        textarea: "cursor-default"
+      },
+      false: {}
+    },
+    isDragging: {
+      true: {
+        container: "border-selected-boundary border-dashed",
+        textarea: "pointer-events-none"
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      selected: true,
+      disabled: false,
+      class: {
+        container: [
+          "bg-default-background",
+          "not-focus-within:border-selected-boundary/50",
+          "focus-within:border-selected-boundary"
+        ]
+      }
+    },
+    {
+      variant: "default",
+      selected: false,
+      disabled: false,
+      isDragging: false,
+      class: {
+        container: "hover:not-focus-within:border-default-boundary"
+      }
+    },
+    {
+      variant: "light",
+      selected: false,
+      disabled: false,
+      isDragging: false,
+      class: {
+        container: ["hover:not-focus-within:border-gray-200"]
+      }
+    },
+    {
+      variant: "dark",
+      selected: false,
+      disabled: false,
+      isDragging: false,
+      class: {
+        container: ["hover:not-focus-within:border-gray-600"]
+      }
+    },
+    {
+      variant: ["light", "dark", "default"],
+      selected: false,
+      disabled: false,
+      class: {
+        container: "focus-within:border-selected-boundary"
+      }
+    },
+    {
+      variant: "default",
+      disabled: true,
+      class: {
+        container: "border-secondary-background bg-secondary-background",
+        textarea: "text-disabled-foreground"
+      }
+    },
+    {
+      variant: "light",
+      disabled: true,
+      class: {
+        container: "bg-gray-100",
+        textarea: "text-black/50"
+      }
+    },
+    {
+      variant: "dark",
+      disabled: true,
+      class: {
+        container: "bg-gray-700",
+        textarea: "text-white/40"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    selected: false,
+    disabled: false,
+    readOnly: false,
+    resize: "auto"
+  }
+});
+var DEFAULT_TEXTAREA_CONSTANTS = {
+  lineHeight: 16,
+  padding: 4
+};
+var TextareaContent = forwardRef(
+  function TextareaContent2(props, ref) {
+    const { className, style, onChange, ...rest } = props;
+    const autosizeStyle = style ? { ...style, height: style.height } : void 0;
+    const handleChange = onChange ? (e) => onChange(e.target.value) : void 0;
+    return /* @__PURE__ */ jsx(
+      TextareaAutosize,
+      {
+        ref,
+        className,
+        style: autosizeStyle,
+        onChange: handleChange,
+        ...rest
+      }
+    );
+  }
+);
+TextareaContent.displayName = "Textarea.Content";
+var TextareaBase = forwardRef(
+  function TextareaBase2(props, ref) {
+    const {
+      allowNewline = true,
+      className,
+      disabled,
+      readOnly,
+      selected,
+      value,
+      variant = "default",
+      resize = "auto",
+      minRows = 3,
+      maxRows,
+      lineHeight = DEFAULT_TEXTAREA_CONSTANTS.lineHeight,
+      padding = DEFAULT_TEXTAREA_CONSTANTS.padding,
+      onBlur,
+      onChange,
+      onFocus,
+      onIsEditingChange,
+      children,
+      focusSelection = "all",
+      scrollRef,
+      contentRef,
+      ...rest
+    } = props;
+    const textareaRef = useRef(null);
+    const viewportRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [viewportHeight, setViewportHeight] = useState();
+    useImperativeHandle(ref, () => textareaRef.current, []);
+    useUnmount(() => {
+      onIsEditingChange == null ? void 0 : onIsEditingChange(false);
+    });
+    const tx = useMemo(() => {
+      return TextareaTv({ variant, selected, disabled, readOnly, resize, isDragging });
+    }, [variant, selected, disabled, readOnly, resize, isDragging]);
+    const handleChange = useEventCallback((e) => {
+      onChange == null ? void 0 : onChange(e.target.value);
+    });
+    const handleFocus = useEventCallback((e) => {
+      if (focusSelection === "all") {
+        e.target.select();
+      } else if (focusSelection === "end") {
+        const textarea = e.target;
+        setTimeout(() => {
+          const length = textarea.value.length;
+          textarea.setSelectionRange(length, length);
+        }, 0);
+      }
+      onFocus == null ? void 0 : onFocus(e);
+      onIsEditingChange == null ? void 0 : onIsEditingChange(true);
+    });
+    const handleBlur = useEventCallback((e) => {
+      onBlur == null ? void 0 : onBlur(e);
+      onIsEditingChange == null ? void 0 : onIsEditingChange(false);
+    });
+    const handleKeyDown = useEventCallback((e) => {
+      var _a;
+      if (!allowNewline && e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+      }
+      (_a = rest.onKeyDown) == null ? void 0 : _a.call(rest, e);
+    });
+    const { style, ...restWithoutStyle } = rest;
+    const baseTextareaProps = useMemo(
+      () => ({
+        ...restWithoutStyle,
+        ref: textareaRef,
+        "data-1p-ignore": true,
+        spellCheck: false,
+        autoComplete: "off",
+        value,
+        disabled,
+        readOnly,
+        className: tx.textarea(),
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown
+      }),
+      [
+        restWithoutStyle,
+        value,
+        disabled,
+        readOnly,
+        tx,
+        handleChange,
+        handleFocus,
+        handleBlur,
+        handleKeyDown
+      ]
+    );
+    const heightConstraints = useMemo(() => {
+      const minHeight = minRows ? minRows * lineHeight + padding * 2 : void 0;
+      const maxHeight = maxRows ? maxRows * lineHeight + padding * 2 : void 0;
+      return { minHeight, maxHeight };
+    }, [minRows, maxRows, lineHeight, padding]);
+    const textareaAutosizeProps = useMemo(
+      () => ({
+        ...baseTextareaProps,
+        minRows,
+        maxRows: void 0,
+        // 在 ScrollArea 中不限制 maxRows
+        style: {
+          lineHeight: `${lineHeight}px`,
+          padding: `${padding}px`
+        }
+      }),
+      [baseTextareaProps, minRows, lineHeight, padding]
+    );
+    const containerClasses = useMemo(() => tcx(tx.container(), className), [tx, className]);
+    const handleMouseDown = useEventCallback((e) => {
+      var _a;
+      if (resize !== "handle" || disabled || readOnly) return;
+      e.preventDefault();
+      setIsDragging(true);
+      const startY = e.clientY;
+      const startHeight = ((_a = viewportRef.current) == null ? void 0 : _a.offsetHeight) || heightConstraints.minHeight || 100;
+      const handleMouseMove = (e2) => {
+        const deltaY = e2.clientY - startY;
+        let newHeight = startHeight + deltaY;
+        if (heightConstraints.minHeight) {
+          newHeight = Math.max(newHeight, heightConstraints.minHeight);
+        }
+        if (heightConstraints.maxHeight) {
+          newHeight = Math.min(newHeight, heightConstraints.maxHeight);
+        }
+        setViewportHeight(newHeight);
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    });
+    const viewportStyle = useMemo(() => {
+      if (resize === "auto") {
+        return heightConstraints.maxHeight ? { maxHeight: `${heightConstraints.maxHeight}px` } : void 0;
+      }
+      if (resize === "handle") {
+        const height = viewportHeight || heightConstraints.minHeight || 100;
+        return { height: `${height}px` };
+      }
+      if (resize === false && rest.rows) {
+        const fixedHeight = rest.rows * lineHeight + padding * 2;
+        return { height: `${fixedHeight}px` };
+      }
+      return void 0;
+    }, [resize, heightConstraints, rest.rows, viewportHeight, lineHeight, padding]);
+    const contentStyle = useMemo(
+      () => ({
+        minHeight: viewportHeight || heightConstraints.minHeight
+      }),
+      [viewportHeight, heightConstraints.minHeight]
+    );
+    const bodyRef = useRef();
+    useEffect(() => {
+      if (!bodyRef.current) {
+        bodyRef.current = document.body;
+      }
+      bodyRef.current.style.cursor = isDragging ? "ns-resize" : "";
+    }, [isDragging]);
+    useEffect(() => {
+      return () => {
+        if (bodyRef.current) {
+          bodyRef.current.style.cursor = "";
+        }
+      };
+    }, []);
+    const hasContentChild = useMemo(() => {
+      let foundContent = false;
+      Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === TextareaContent) {
+          foundContent = true;
+        }
+      });
+      return foundContent;
+    }, [children]);
+    const renderContent = () => {
+      if (hasContentChild) {
+        return Children.map(children, (child) => {
+          if (isValidElement(child) && child.type === TextareaContent) {
+            const mergedStyle = {
+              lineHeight: `${lineHeight}px`,
+              padding: `${padding}px`,
+              ...child.props.style
+            };
+            return /* @__PURE__ */ jsx(
+              TextareaAutosize,
+              {
+                ...textareaAutosizeProps,
+                ...child.props,
+                className: tcx(tx.textarea(), child.props.className),
+                style: mergedStyle,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown
+              }
+            );
+          }
+          return child;
+        });
+      }
+      return /* @__PURE__ */ jsx(TextareaAutosize, { ...textareaAutosizeProps });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: tcx(containerClasses, "relative"), children: [
+      /* @__PURE__ */ jsx(ScrollArea, { type: "scroll", children: /* @__PURE__ */ jsx(
+        ScrollArea.Viewport,
+        {
+          ref: mergeRefs(viewportRef, scrollRef),
+          className: tx.viewport(),
+          style: viewportStyle,
+          children: /* @__PURE__ */ jsx(
+            ScrollArea.Content,
+            {
+              ref: contentRef,
+              className: tx.content(),
+              style: contentStyle,
+              children: renderContent()
+            }
+          )
+        }
+      ) }),
+      resize === "handle" && /* @__PURE__ */ jsx(
+        ResizeHandle,
+        {
+          className: tx.resizeHandle(),
+          onMouseDown: handleMouseDown
+        }
+      )
+    ] });
+  }
+);
+TextareaBase.displayName = "Textarea";
+var Textarea = Object.assign(TextareaBase, {
+  Content: TextareaContent
+});
+export {
+  ResizeHandle,
+  Textarea
+};