@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/{chunk-PEGJ2KHC.js → chunk-65VXCN5N.js}

@@ -47,15 +47,12 @@ var InputNumber = ({
     },
     [formatter, precision]
   );
-  const parseValue = react.useCallback(
-    (str) => {
-      if (str === "" || str === "-") return null;
-      if (parser) return parser(str);
-      const num = Number(str);
-      return Number.isNaN(num) ? null : num;
-    },
-    [parser]
-  );
+  const parseValue = (str) => {
+    if (str === "" || str === "-") return null;
+    if (parser) return parser(str);
+    const num = Number(str);
+    return Number.isNaN(num) ? null : num;
+  };
   react.useEffect(() => {
     if (!focused) {
       setDisplayValue(toDisplayValue(currentValue));
@@ -66,69 +63,54 @@ var InputNumber = ({
       inputRef.current.focus();
     }
   }, [autoFocus]);
-  const commitValue = react.useCallback(
-    (val) => {
-      let finalVal = val;
-      if (finalVal !== null) {
-        finalVal = tigercatCore.clampValue(finalVal, min, max);
-        if (precision !== void 0) {
-          finalVal = tigercatCore.formatPrecision(finalVal, precision);
-        }
-      }
-      if (!isControlled) {
-        setInternalValue(finalVal);
+  const commitValue = (val) => {
+    let finalVal = val;
+    if (finalVal !== null) {
+      finalVal = tigercatCore.clampValue(finalVal, min, max);
+      if (precision !== void 0) {
+        finalVal = tigercatCore.formatPrecision(finalVal, precision);
       }
-      onChange?.(finalVal);
-      setDisplayValue(toDisplayValue(finalVal));
-    },
-    [min, max, precision, isControlled, onChange, toDisplayValue]
-  );
-  const handleStep = react.useCallback(
-    (direction) => {
-      if (disabled || readonly) return;
-      const next = tigercatCore.stepValue(currentValue, step, direction, min, max, precision);
-      commitValue(next);
-    },
-    [currentValue, step, min, max, precision, disabled, readonly, commitValue]
-  );
-  const handleInput = react.useCallback((e) => {
+    }
+    if (!isControlled) {
+      setInternalValue(finalVal);
+    }
+    onChange?.(finalVal);
+    setDisplayValue(toDisplayValue(finalVal));
+  };
+  const handleStep = (direction) => {
+    if (disabled || readonly) return;
+    const next = tigercatCore.stepValue(currentValue, step, direction, min, max, precision);
+    commitValue(next);
+  };
+  const handleInput = (e) => {
     setDisplayValue(e.target.value);
-  }, []);
-  const handleBlur = react.useCallback(
-    (e) => {
-      setFocused(false);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    const parsed = parseValue(displayValue);
+    commitValue(parsed);
+    onBlur?.(e);
+  };
+  const handleFocus = (e) => {
+    setFocused(true);
+    if (formatter && currentValue !== null) {
+      setDisplayValue(String(currentValue));
+    }
+    onFocus?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if (!keyboard || disabled || readonly) return;
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleStep("up");
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleStep("down");
+    } else if (e.key === "Enter") {
       const parsed = parseValue(displayValue);
       commitValue(parsed);
-      onBlur?.(e);
-    },
-    [displayValue, parseValue, commitValue, onBlur]
-  );
-  const handleFocus = react.useCallback(
-    (e) => {
-      setFocused(true);
-      if (formatter && currentValue !== null) {
-        setDisplayValue(String(currentValue));
-      }
-      onFocus?.(e);
-    },
-    [formatter, currentValue, onFocus]
-  );
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      if (!keyboard || disabled || readonly) return;
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        handleStep("up");
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        handleStep("down");
-      } else if (e.key === "Enter") {
-        const parsed = parseValue(displayValue);
-        commitValue(parsed);
-      }
-    },
-    [keyboard, disabled, readonly, handleStep, parseValue, displayValue, commitValue]
-  );
+    }
+  };
   const atMin = tigercatCore.isAtMin(currentValue, min);
   const atMax = tigercatCore.isAtMax(currentValue, max);
   const wrapperClasses = react.useMemo(

package/dist/{chunk-6PXNWGR5.mjs → chunk-6744DTEB.mjs}

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useId, useMemo, useState, useCallback } from 'react';
+import React, { createContext, useContext, useId, useMemo, useState, useCallback, useRef } from 'react';
 import { classNames, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, isKeyActive, getTabItemClasses, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -16,6 +16,7 @@ var Tabs = ({
   closable = false,
   centered = false,
   destroyInactiveTabPane = false,
+  lazy = false,
   className,
   style,
   onChange,
@@ -92,6 +93,7 @@ var Tabs = ({
       tabPosition,
       closable,
       destroyInactiveTabPane,
+      lazy,
       idBase,
       handleTabClick,
       handleTabClose
@@ -103,6 +105,7 @@ var Tabs = ({
       tabPosition,
       closable,
       destroyInactiveTabPane,
+      lazy,
       idBase,
       handleTabClick,
       handleTabClose
@@ -159,6 +162,8 @@ var TabPane = ({
   const isActive = useMemo(() => {
     return isKeyActive(tabKey, tabsContext.activeKey);
   }, [tabKey, tabsContext.activeKey]);
+  const hasBeenActivatedRef = useRef(isActive);
+  if (isActive) hasBeenActivatedRef.current = true;
   const isClosable = useMemo(() => {
     return closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
   }, [closable, tabsContext.closable, tabsContext.type]);
@@ -254,9 +259,9 @@ var TabPane = ({
           icon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: icon }),
           /* @__PURE__ */ jsx("span", { children: label }),
           isClosable && /* @__PURE__ */ jsx(
-            "button",
+            "span",
             {
-              type: "button",
+              role: "button",
               className: tabCloseButtonClasses,
               "aria-label": `Close ${String(label)}`,
               tabIndex: -1,
@@ -276,7 +281,7 @@ var TabPane = ({
       }
     );
   }
-  const shouldRender = isActive || !tabsContext.destroyInactiveTabPane;
+  const shouldRender = tabsContext.lazy ? hasBeenActivatedRef.current && (isActive || !tabsContext.destroyInactiveTabPane) : isActive || !tabsContext.destroyInactiveTabPane;
   if (!shouldRender) {
     return null;
   }

package/dist/chunk-6E7FPBRR.mjs

@@ -0,0 +1,192 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { classNames, imageViewerBackdropClasses, imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, imageViewerNavBtnClasses, imageViewerImgClasses, imageViewerToolbarClasses, imageViewerToolbarBtnClasses, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/ImageViewer.tsx
+function SvgIcon({ pathD, label }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx("path", { d: pathD })
+    }
+  );
+}
+var ImageViewer = ({
+  images,
+  open = false,
+  currentIndex = 0,
+  zoomable = true,
+  rotatable = true,
+  showNav = true,
+  showCounter = true,
+  maskClosable = true,
+  minZoom = 0.5,
+  maxZoom = 3,
+  className,
+  onClose,
+  onIndexChange
+}) => {
+  const [index, setIndex] = useState(currentIndex);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  useEffect(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  const handleClose = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const handlePrev = useCallback(() => {
+    const newIndex = (index - 1 + images.length) % images.length;
+    setIndex(newIndex);
+    setZoom(1);
+    setRotation(0);
+    onIndexChange?.(newIndex);
+  }, [index, images.length, onIndexChange]);
+  const handleNext = useCallback(() => {
+    const newIndex = (index + 1) % images.length;
+    setIndex(newIndex);
+    setZoom(1);
+    setRotation(0);
+    onIndexChange?.(newIndex);
+  }, [index, images.length, onIndexChange]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, handleClose, handlePrev, handleNext]);
+  const backdropClasses = useMemo(
+    () => classNames(imageViewerBackdropClasses, className),
+    [className]
+  );
+  if (!open || images.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: backdropClasses,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Image viewer",
+      onClick: (e) => {
+        if (maskClosable && e.target === e.currentTarget) handleClose();
+      },
+      children: [
+        showCounter && images.length > 1 && /* @__PURE__ */ jsxs("div", { className: imageViewerCounterClasses, children: [
+          index + 1,
+          " / ",
+          images.length
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button",
+            children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.close, label: "Close" })
+          }
+        ),
+        showNav && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.prev, label: "Previous" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.next, label: "Next" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: imageViewerImgClasses,
+            src: images[index],
+            alt: `Image ${index + 1}`,
+            style: { transform: `scale(${zoom}) rotate(${rotation}deg)` },
+            draggable: false
+          }
+        ),
+        (zoomable || rotatable) && /* @__PURE__ */ jsxs("div", { className: imageViewerToolbarClasses, children: [
+          zoomable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imageViewerToolbarBtnClasses,
+                onClick: () => setZoom(clampZoom(zoom - 0.25, minZoom, maxZoom)),
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomOut, label: "Zoom out" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imageViewerToolbarBtnClasses,
+                onClick: () => setZoom(clampZoom(zoom + 0.25, minZoom, maxZoom)),
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomIn, label: "Zoom in" })
+              }
+            )
+          ] }),
+          rotatable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imageViewerToolbarBtnClasses,
+                onClick: () => setRotation(normalizeRotation(rotation - 90)),
+                "aria-label": "Rotate left",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateLeft, label: "Rotate left" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imageViewerToolbarBtnClasses,
+                onClick: () => setRotation(normalizeRotation(rotation + 90)),
+                "aria-label": "Rotate right",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateRight, label: "Rotate right" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { ImageViewer };

package/dist/{chunk-NQFHS4W2.mjs → chunk-6KKUJT6B.mjs}

@@ -1,4 +1,4 @@
-import { RadioGroupContext } from './chunk-HPXLUJFJ.mjs';
+import { RadioGroupContext } from './chunk-PN33UCWB.mjs';
 import { useContext, useState, useMemo } from 'react';
 import { getRadioVisualClasses, defaultRadioColors, getRadioDotClasses, getRadioLabelClasses, classNames, radioRootBaseClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-OXT5RN55.mjs → chunk-6P3JIUSI.mjs}

@@ -1,7 +1,7 @@
-import { Textarea } from './chunk-VCNZEQEB.mjs';
-import { Button } from './chunk-ENSLMM3L.mjs';
+import { Textarea } from './chunk-7QZ4XT2P.mjs';
+import { Button } from './chunk-3KMKMAE3.mjs';
 import { Tag } from './chunk-TGKNEMD4.mjs';
-import { Text } from './chunk-LIV33O73.mjs';
+import { Text } from './chunk-HLS4CHWX.mjs';
 import { Avatar } from './chunk-FE7PEZTI.mjs';
 import { useState, useMemo } from 'react';
 import { buildCommentTree, clipCommentTreeDepth, classNames, formatCommentTime } from '@expcat/tigercat-core';

package/dist/chunk-73BP3WQN.mjs

@@ -0,0 +1,210 @@
+import { useId, useState, useRef, useEffect, useMemo } from 'react';
+import { filterAutoCompleteOptions, classNames, autoCompleteBaseClasses, getAutoCompleteInputClasses, icon20ViewBox, closeSolidIcon20PathD, autoCompleteDropdownClasses, getAutoCompleteOptionClasses, autoCompleteEmptyStateClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/AutoComplete.tsx
+var AUTOCOMPLETE_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "options",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "notFoundText",
+  "filterOption",
+  "defaultActiveFirstOption",
+  "allowFreeInput",
+  "onChange",
+  "onSelect",
+  "onSearch"
+]);
+var AutoComplete = (props) => {
+  const {
+    value = "",
+    options = [],
+    placeholder = "",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    notFoundText = "No matches found",
+    filterOption = true,
+    defaultActiveFirstOption = true,
+    className,
+    onChange,
+    onSelect,
+    onSearch,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!AUTOCOMPLETE_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = useId();
+  const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(String(value ?? ""));
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setInputValue(String(value ?? ""));
+  }, [value]);
+  const filteredOptions = useMemo(
+    () => filterAutoCompleteOptions(options, inputValue, filterOption),
+    [options, inputValue, filterOption]
+  );
+  const showClearButton = clearable && !disabled && inputValue !== "";
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+    if (defaultActiveFirstOption && filteredOptions.length > 0) {
+      setActiveIndex(0);
+    }
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setActiveIndex(-1);
+  }
+  function handleInput(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    onChange?.(val);
+    onSearch?.(val);
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    if (defaultActiveFirstOption) {
+      const newFiltered = filterAutoCompleteOptions(options, val, filterOption);
+      setActiveIndex(newFiltered.length > 0 ? 0 : -1);
+    }
+  }
+  function handleSelect(option) {
+    if (option.disabled) return;
+    setInputValue(option.label);
+    onChange?.(option.value);
+    onSelect?.(option.value, option);
+    closeDropdown();
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    setInputValue("");
+    onChange?.("");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }
+  function handleKeyDown(e) {
+    if (!isOpen) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openDropdown();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (filteredOptions.length > 0) {
+          setActiveIndex((prev) => {
+            let next = prev + 1;
+            while (next < filteredOptions.length && filteredOptions[next].disabled) next++;
+            return next < filteredOptions.length ? next : prev;
+          });
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (filteredOptions.length > 0) {
+          setActiveIndex((prev) => {
+            let p = prev - 1;
+            while (p >= 0 && filteredOptions[p].disabled) p--;
+            return p >= 0 ? p : prev;
+          });
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+          handleSelect(filteredOptions[activeIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        closeDropdown();
+        break;
+    }
+  }
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  const containerClasses = classNames(autoCompleteBaseClasses, className);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, ...divProps, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: getAutoCompleteInputClasses(size, disabled, isOpen),
+        value: inputValue,
+        placeholder,
+        disabled,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        "aria-activedescendant": isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+        autoComplete: "off",
+        onChange: handleInput,
+        onFocus: openDropdown,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    showClearButton && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-autocomplete-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-autocomplete-clear-hover,var(--tiger-text,#111827))] transition-colors",
+        "aria-label": "Clear",
+        onClick: handleClear,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            viewBox: icon20ViewBox,
+            fill: "currentColor",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx("path", { d: closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+          }
+        )
+      }
+    ),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { id: listboxId, role: "listbox", className: autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${listboxId}-option-${index}`,
+        role: "option",
+        "aria-selected": String(option.value) === String(value),
+        "aria-disabled": option.disabled,
+        className: getAutoCompleteOptionClasses(
+          String(option.value) === String(value),
+          !!option.disabled,
+          size
+        ),
+        onClick: () => handleSelect(option),
+        onMouseEnter: () => setActiveIndex(index),
+        children: option.label
+      },
+      String(option.value)
+    )) }),
+    isOpen && inputValue && filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { className: classNames(autoCompleteDropdownClasses, autoCompleteEmptyStateClasses), children: notFoundText })
+  ] });
+};
+
+export { AutoComplete };

package/dist/{chunk-77PE7OFK.mjs → chunk-7MASYF4S.mjs}

@@ -1,4 +1,4 @@
-import { useTigerConfig } from './chunk-VEGBO77D.mjs';
+import { useTigerConfig } from './chunk-CRSMECWE.mjs';
 import { useMemo, useRef, useState, useCallback } from 'react';
 import { getSpinnerSVG, mergeTigerLocale, getUploadLabels, classNames, prepareUploadFiles, fileToUploadFile, getDragAreaClasses, interpolateUploadLabel, formatFileSize, getUploadButtonClasses, getFileListItemClasses, icon20ViewBox, getUploadStatusIconClasses, successCircleSolidIcon20PathD, errorCircleSolidIcon20PathD, closeSolidIcon20PathD, getPictureCardClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-VCNZEQEB.mjs → chunk-7QZ4XT2P.mjs}

@@ -1,8 +1,8 @@
-import { forwardRef, useRef, useState, useLayoutEffect, useMemo } from 'react';
+import { useControlledState } from './chunk-UQMPEMY7.mjs';
+import { forwardRef, useRef, useLayoutEffect, useMemo } from 'react';
 import { autoResizeTextarea, classNames, getInputClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/Textarea.tsx
 var Textarea = forwardRef(
   ({
     size = "md",
@@ -27,9 +27,10 @@ var Textarea = forwardRef(
     ...props
   }, ref) => {
     const textareaRef = useRef(null);
-    const [internalValue, setInternalValue] = useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
+    const [currentValue, setInternalValue, isControlled] = useControlledState(
+      value,
+      defaultValue || ""
+    );
     const setRefs = (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") ref(node);