@sytechui/input 2.4.33

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @sytechui/input
+
+Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.
+
+This package contains the Input component and the TextArea component.
+
+Please refer to the [documentation](https://heroui.com/docs/components/input) for more information.
+
+## Installation
+
+```sh
+yarn add @sytechui/input
+# or
+npm i @sytechui/input
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-6SGLJYRO.mjs

@@ -0,0 +1,442 @@
+"use client";
+
+// src/use-input.ts
+import { mapPropsVariants, useProviderContext, useLabelPlacement } from "@sytechui/system";
+import { useSafeLayoutEffect } from "@sytechui/use-safe-layout-effect";
+import { useFocusRing } from "@react-aria/focus";
+import { input, cn } from "@sytechui/theme";
+import { useDOMRef, filterDOMProps } from "@sytechui/react-utils";
+import { useFocusWithin, useHover, usePress } from "@react-aria/interactions";
+import {
+  dataAttr,
+  isEmpty,
+  objectToDeps,
+  safeAriaLabel,
+  chain,
+  mergeProps
+} from "@sytechui/shared-utils";
+import { useControlledState } from "@react-stately/utils";
+import { useMemo, useCallback, useState } from "react";
+import { useTextField } from "@react-aria/textfield";
+import { FormContext, useSlottedContext } from "@sytechui/form";
+function useInput(originalProps) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const globalContext = useProviderContext();
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const [props, variantProps] = mapPropsVariants(originalProps, input.variantKeys);
+  const {
+    ref,
+    as,
+    type,
+    label,
+    baseRef,
+    wrapperRef,
+    description,
+    className,
+    classNames,
+    autoFocus,
+    startContent,
+    endContent,
+    onClear,
+    onChange,
+    validationState,
+    validationBehavior = (_a = formValidationBehavior != null ? formValidationBehavior : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _a : "native",
+    innerWrapperRef: innerWrapperRefProp,
+    onValueChange = () => {
+    },
+    ...otherProps
+  } = props;
+  const handleValueChange = useCallback(
+    (value) => {
+      onValueChange(value != null ? value : "");
+    },
+    [onValueChange]
+  );
+  const [isFocusWithin, setFocusWithin] = useState(false);
+  const Component = as || "div";
+  const disableAnimation = (_c = (_b = originalProps.disableAnimation) != null ? _b : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _c : false;
+  const domRef = useDOMRef(ref);
+  const baseDomRef = useDOMRef(baseRef);
+  const inputWrapperRef = useDOMRef(wrapperRef);
+  const innerWrapperRef = useDOMRef(innerWrapperRefProp);
+  const [inputValue, setInputValue] = useControlledState(
+    props.value,
+    (_d = props.defaultValue) != null ? _d : "",
+    handleValueChange
+  );
+  const isFileTypeInput = type === "file";
+  const hasUploadedFiles = ((_g = (_f = (_e = domRef == null ? void 0 : domRef.current) == null ? void 0 : _e.files) == null ? void 0 : _f.length) != null ? _g : 0) > 0;
+  const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type);
+  const isFilled = !isEmpty(inputValue) || isFilledByDefault || hasUploadedFiles;
+  const isFilledWithin = isFilled || isFocusWithin;
+  const isHiddenType = type === "hidden";
+  const isMultiline = originalProps.isMultiline;
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className, isFilled ? "is-filled" : "");
+  const handleClear = useCallback(() => {
+    var _a2;
+    if (isFileTypeInput) {
+      domRef.current.value = "";
+    } else {
+      setInputValue("");
+    }
+    onClear == null ? void 0 : onClear();
+    (_a2 = domRef.current) == null ? void 0 : _a2.focus();
+  }, [setInputValue, onClear, isFileTypeInput]);
+  useSafeLayoutEffect(() => {
+    if (!domRef.current) return;
+    setInputValue(domRef.current.value);
+  }, [domRef.current]);
+  const {
+    labelProps,
+    inputProps,
+    isInvalid: isAriaInvalid,
+    validationErrors,
+    validationDetails,
+    descriptionProps,
+    errorMessageProps
+  } = useTextField(
+    {
+      ...originalProps,
+      validationBehavior,
+      autoCapitalize: originalProps.autoCapitalize,
+      value: inputValue,
+      "aria-label": originalProps.label ? originalProps["aria-label"] : safeAriaLabel(originalProps["aria-label"], originalProps.placeholder),
+      inputElementType: isMultiline ? "textarea" : "input",
+      onChange: setInputValue
+    },
+    domRef
+  );
+  if (isFileTypeInput) {
+    delete inputProps.value;
+    delete inputProps.onChange;
+  }
+  const { isFocusVisible, isFocused, focusProps } = useFocusRing({
+    autoFocus,
+    isTextInput: true
+  });
+  const { isHovered, hoverProps } = useHover({ isDisabled: !!(originalProps == null ? void 0 : originalProps.isDisabled) });
+  const { isHovered: isLabelHovered, hoverProps: labelHoverProps } = useHover({
+    isDisabled: !!(originalProps == null ? void 0 : originalProps.isDisabled)
+  });
+  const { focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible } = useFocusRing();
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: setFocusWithin
+  });
+  const { pressProps: clearPressProps } = usePress({
+    isDisabled: !!(originalProps == null ? void 0 : originalProps.isDisabled) || !!(originalProps == null ? void 0 : originalProps.isReadOnly),
+    onPress: handleClear
+  });
+  const isInvalid = validationState === "invalid" || isAriaInvalid;
+  const labelPlacement = useLabelPlacement({
+    labelPlacement: originalProps.labelPlacement,
+    label
+  });
+  const errorMessage = typeof props.errorMessage === "function" ? props.errorMessage({ isInvalid, validationErrors, validationDetails }) : props.errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" "));
+  const isClearable = !!onClear || originalProps.isClearable;
+  const hasElements = !!label || !!description || !!errorMessage;
+  const hasPlaceholder = !!props.placeholder;
+  const hasLabel = !!label;
+  const hasHelper = !!description || !!errorMessage;
+  const isOutsideLeft = labelPlacement === "outside-left";
+  const isOutsideTop = labelPlacement === "outside-top";
+  const shouldLabelBeOutside = (
+    // label is outside only when some placeholder is there
+    labelPlacement === "outside" || // label is outside regardless of placeholder
+    isOutsideLeft || isOutsideTop
+  );
+  const shouldLabelBeInside = labelPlacement === "inside";
+  const isPlaceholderShown = domRef.current ? (!domRef.current.value || domRef.current.value === "" || !inputValue || inputValue === "") && hasPlaceholder : false;
+  const hasStartContent = !!startContent;
+  const isLabelOutside = shouldLabelBeOutside ? isOutsideLeft || isOutsideTop || hasPlaceholder || labelPlacement === "outside" && hasStartContent : false;
+  const isLabelOutsideAsPlaceholder = labelPlacement === "outside" && !hasPlaceholder && !hasStartContent;
+  const slots = useMemo(
+    () => input({
+      ...variantProps,
+      isInvalid,
+      labelPlacement,
+      isClearable,
+      disableAnimation
+    }),
+    [
+      objectToDeps(variantProps),
+      isInvalid,
+      labelPlacement,
+      isClearable,
+      hasStartContent,
+      disableAnimation
+    ]
+  );
+  const getBaseProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ref: baseDomRef,
+        className: slots.base({ class: baseStyles }),
+        "data-slot": "base",
+        "data-filled": dataAttr(
+          isFilled || hasPlaceholder || hasStartContent || isPlaceholderShown || isFileTypeInput
+        ),
+        "data-filled-within": dataAttr(
+          isFilledWithin || hasPlaceholder || hasStartContent || isPlaceholderShown || isFileTypeInput
+        ),
+        "data-focus-within": dataAttr(isFocusWithin),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-readonly": dataAttr(originalProps.isReadOnly),
+        "data-focus": dataAttr(isFocused),
+        "data-hover": dataAttr(isHovered || isLabelHovered),
+        "data-required": dataAttr(originalProps.isRequired),
+        "data-invalid": dataAttr(isInvalid),
+        "data-disabled": dataAttr(originalProps.isDisabled),
+        "data-has-elements": dataAttr(hasElements),
+        "data-has-helper": dataAttr(hasHelper),
+        "data-has-label": dataAttr(hasLabel),
+        "data-has-value": dataAttr(!isPlaceholderShown),
+        "data-hidden": dataAttr(isHiddenType),
+        ...focusWithinProps,
+        ...props2
+      };
+    },
+    [
+      slots,
+      baseStyles,
+      isFilled,
+      isFocused,
+      isHovered,
+      isLabelHovered,
+      isInvalid,
+      hasHelper,
+      hasLabel,
+      hasElements,
+      isPlaceholderShown,
+      hasStartContent,
+      isFocusWithin,
+      isFocusVisible,
+      isFilledWithin,
+      hasPlaceholder,
+      focusWithinProps,
+      isHiddenType,
+      originalProps.isReadOnly,
+      originalProps.isRequired,
+      originalProps.isDisabled
+    ]
+  );
+  const getLabelProps = useCallback(
+    (props2 = {}) => {
+      return {
+        "data-slot": "label",
+        className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
+        ...mergeProps(labelProps, labelHoverProps, props2)
+      };
+    },
+    [slots, isLabelHovered, labelProps, classNames == null ? void 0 : classNames.label]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape" && inputValue && (isClearable || onClear) && !originalProps.isReadOnly) {
+        setInputValue("");
+        onClear == null ? void 0 : onClear();
+      }
+    },
+    [inputValue, setInputValue, onClear, isClearable, originalProps.isReadOnly]
+  );
+  const getInputProps = useCallback(
+    (props2 = {}) => {
+      return {
+        "data-slot": "input",
+        "data-filled": dataAttr(isFilled),
+        "data-filled-within": dataAttr(isFilledWithin),
+        "data-has-start-content": dataAttr(hasStartContent),
+        "data-has-end-content": dataAttr(!!endContent),
+        "data-type": type,
+        className: slots.input({
+          class: cn(
+            classNames == null ? void 0 : classNames.input,
+            isFilled ? "is-filled" : "",
+            isMultiline ? "pe-0" : "",
+            type === "password" ? "[&::-ms-reveal]:hidden" : ""
+          )
+        }),
+        ...mergeProps(
+          focusProps,
+          inputProps,
+          filterDOMProps(otherProps, {
+            enabled: true,
+            labelable: true,
+            omitEventNames: new Set(Object.keys(inputProps))
+          }),
+          props2
+        ),
+        "aria-readonly": dataAttr(originalProps.isReadOnly),
+        onChange: chain(inputProps.onChange, onChange),
+        onKeyDown: chain(inputProps.onKeyDown, props2.onKeyDown, handleKeyDown),
+        ref: domRef
+      };
+    },
+    [
+      slots,
+      inputValue,
+      focusProps,
+      inputProps,
+      otherProps,
+      isFilled,
+      isFilledWithin,
+      hasStartContent,
+      endContent,
+      classNames == null ? void 0 : classNames.input,
+      originalProps.isReadOnly,
+      originalProps.isRequired,
+      onChange,
+      handleKeyDown
+    ]
+  );
+  const getInputWrapperProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ref: inputWrapperRef,
+        "data-slot": "input-wrapper",
+        "data-hover": dataAttr(isHovered || isLabelHovered),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-focus": dataAttr(isFocused),
+        className: slots.inputWrapper({
+          class: cn(classNames == null ? void 0 : classNames.inputWrapper, isFilled ? "is-filled" : "")
+        }),
+        ...mergeProps(props2, hoverProps),
+        onClick: (e) => {
+          if (domRef.current && e.currentTarget === e.target) {
+            domRef.current.focus();
+          }
+        },
+        style: {
+          cursor: "text",
+          ...props2.style
+        }
+      };
+    },
+    [
+      slots,
+      isHovered,
+      isLabelHovered,
+      isFocusVisible,
+      isFocused,
+      inputValue,
+      classNames == null ? void 0 : classNames.inputWrapper
+    ]
+  );
+  const getInnerWrapperProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        ref: innerWrapperRef,
+        "data-slot": "inner-wrapper",
+        onClick: (e) => {
+          if (domRef.current && e.currentTarget === e.target) {
+            domRef.current.focus();
+          }
+        },
+        className: slots.innerWrapper({
+          class: cn(classNames == null ? void 0 : classNames.innerWrapper, props2 == null ? void 0 : props2.className)
+        })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.innerWrapper]
+  );
+  const getMainWrapperProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        "data-slot": "main-wrapper",
+        className: slots.mainWrapper({
+          class: cn(classNames == null ? void 0 : classNames.mainWrapper, props2 == null ? void 0 : props2.className)
+        })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.mainWrapper]
+  );
+  const getHelperWrapperProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        "data-slot": "helper-wrapper",
+        className: slots.helperWrapper({
+          class: cn(classNames == null ? void 0 : classNames.helperWrapper, props2 == null ? void 0 : props2.className)
+        })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.helperWrapper]
+  );
+  const getDescriptionProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        ...descriptionProps,
+        "data-slot": "description",
+        className: slots.description({ class: cn(classNames == null ? void 0 : classNames.description, props2 == null ? void 0 : props2.className) })
+      };
+    },
+    [slots, classNames == null ? void 0 : classNames.description]
+  );
+  const getErrorMessageProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        ...errorMessageProps,
+        "data-slot": "error-message",
+        className: slots.errorMessage({ class: cn(classNames == null ? void 0 : classNames.errorMessage, props2 == null ? void 0 : props2.className) })
+      };
+    },
+    [slots, errorMessageProps, classNames == null ? void 0 : classNames.errorMessage]
+  );
+  const getClearButtonProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ...props2,
+        type: "button",
+        tabIndex: -1,
+        disabled: originalProps.isDisabled,
+        "aria-label": "clear input",
+        "data-slot": "clear-button",
+        "data-focus-visible": dataAttr(isClearButtonFocusVisible),
+        className: slots.clearButton({
+          class: cn(classNames == null ? void 0 : classNames.clearButton, props2 == null ? void 0 : props2.className)
+        }),
+        ...mergeProps(clearPressProps, clearFocusProps)
+      };
+    },
+    [slots, isClearButtonFocusVisible, clearPressProps, clearFocusProps, classNames == null ? void 0 : classNames.clearButton]
+  );
+  return {
+    Component,
+    classNames,
+    domRef,
+    label,
+    description,
+    startContent,
+    endContent,
+    labelPlacement,
+    isClearable,
+    hasHelper,
+    hasStartContent,
+    isLabelOutside,
+    isOutsideLeft,
+    isOutsideTop,
+    isLabelOutsideAsPlaceholder,
+    shouldLabelBeOutside,
+    shouldLabelBeInside,
+    hasPlaceholder,
+    isInvalid,
+    errorMessage,
+    getBaseProps,
+    getLabelProps,
+    getInputProps,
+    getMainWrapperProps,
+    getInputWrapperProps,
+    getInnerWrapperProps,
+    getHelperWrapperProps,
+    getDescriptionProps,
+    getErrorMessageProps,
+    getClearButtonProps
+  };
+}
+
+export {
+  useInput
+};

package/dist/chunk-PPYXCOZH.mjs

@@ -0,0 +1,105 @@
+"use client";
+import {
+  useInput
+} from "./chunk-6SGLJYRO.mjs";
+
+// src/input.tsx
+import { CloseFilledIcon } from "@sytechui/shared-icons";
+import { useMemo } from "react";
+import { forwardRef } from "@sytechui/system";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef((props, ref) => {
+  const {
+    Component,
+    label,
+    description,
+    isClearable,
+    startContent,
+    endContent,
+    labelPlacement,
+    hasHelper,
+    isOutsideLeft,
+    isOutsideTop,
+    shouldLabelBeOutside,
+    errorMessage,
+    isInvalid,
+    getBaseProps,
+    getLabelProps,
+    getInputProps,
+    getInnerWrapperProps,
+    getInputWrapperProps,
+    getMainWrapperProps,
+    getHelperWrapperProps,
+    getDescriptionProps,
+    getErrorMessageProps,
+    getClearButtonProps
+  } = useInput({ ...props, ref });
+  const labelContent = label ? /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: label }) : null;
+  const end = useMemo(() => {
+    if (isClearable) {
+      return /* @__PURE__ */ jsx("button", { ...getClearButtonProps(), children: endContent || /* @__PURE__ */ jsx(CloseFilledIcon, {}) });
+    }
+    return endContent;
+  }, [isClearable, getClearButtonProps]);
+  const helperWrapper = useMemo(() => {
+    const shouldShowError = isInvalid && errorMessage;
+    const hasContent = shouldShowError || description;
+    if (!hasHelper || !hasContent) return null;
+    return /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: shouldShowError ? /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: errorMessage }) : /* @__PURE__ */ jsx("div", { ...getDescriptionProps(), children: description }) });
+  }, [
+    hasHelper,
+    isInvalid,
+    errorMessage,
+    description,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps
+  ]);
+  const innerWrapper = useMemo(() => {
+    return /* @__PURE__ */ jsxs("div", { ...getInnerWrapperProps(), children: [
+      startContent,
+      /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+      end
+    ] });
+  }, [startContent, end, getInputProps, getInnerWrapperProps]);
+  const mainWrapper = useMemo(() => {
+    if (shouldLabelBeOutside) {
+      return /* @__PURE__ */ jsxs("div", { ...getMainWrapperProps(), children: [
+        /* @__PURE__ */ jsxs("div", { ...getInputWrapperProps(), children: [
+          !isOutsideLeft && !isOutsideTop ? labelContent : null,
+          innerWrapper
+        ] }),
+        helperWrapper
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { ...getInputWrapperProps(), children: [
+        labelContent,
+        innerWrapper
+      ] }),
+      helperWrapper
+    ] });
+  }, [
+    labelPlacement,
+    helperWrapper,
+    shouldLabelBeOutside,
+    labelContent,
+    innerWrapper,
+    errorMessage,
+    description,
+    getMainWrapperProps,
+    getInputWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps
+  ]);
+  return /* @__PURE__ */ jsxs(Component, { ...getBaseProps(), children: [
+    isOutsideLeft || isOutsideTop ? labelContent : null,
+    mainWrapper
+  ] });
+});
+Input.displayName = "HeroUI.Input";
+var input_default = Input;
+
+export {
+  input_default
+};

package/dist/chunk-ZTVVBFTB.mjs

@@ -0,0 +1,102 @@
+"use client";
+import {
+  useInput
+} from "./chunk-6SGLJYRO.mjs";
+
+// src/textarea.tsx
+import { dataAttr, mergeProps } from "@sytechui/shared-utils";
+import { forwardRef } from "@sytechui/system";
+import { useMemo, useState } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import { CloseFilledIcon } from "@sytechui/shared-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Textarea = forwardRef(
+  ({
+    style,
+    minRows = 3,
+    maxRows = 8,
+    cacheMeasurements = false,
+    disableAutosize = false,
+    onHeightChange,
+    ...otherProps
+  }, ref) => {
+    const {
+      Component,
+      label,
+      description,
+      startContent,
+      endContent,
+      hasHelper,
+      shouldLabelBeOutside,
+      shouldLabelBeInside,
+      isInvalid,
+      errorMessage,
+      getBaseProps,
+      getLabelProps,
+      getInputProps,
+      getInnerWrapperProps,
+      getInputWrapperProps,
+      getHelperWrapperProps,
+      getDescriptionProps,
+      getErrorMessageProps,
+      isClearable,
+      getClearButtonProps
+    } = useInput({ ...otherProps, ref, isMultiline: true });
+    const [hasMultipleRows, setIsHasMultipleRows] = useState(minRows > 1);
+    const [isLimitReached, setIsLimitReached] = useState(false);
+    const labelContent = label ? /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: label }) : null;
+    const inputProps = getInputProps();
+    const handleHeightChange = (height, meta) => {
+      if (minRows === 1) {
+        setIsHasMultipleRows(height >= meta.rowHeight * 2);
+      }
+      if (maxRows > minRows) {
+        const limitReached = height >= maxRows * meta.rowHeight;
+        setIsLimitReached(limitReached);
+      }
+      onHeightChange == null ? void 0 : onHeightChange(height, meta);
+    };
+    const content = disableAutosize ? /* @__PURE__ */ jsx("textarea", { ...inputProps, style: mergeProps(inputProps.style, style != null ? style : {}) }) : /* @__PURE__ */ jsx(
+      TextareaAutosize,
+      {
+        ...inputProps,
+        cacheMeasurements,
+        "data-hide-scroll": dataAttr(!isLimitReached),
+        maxRows,
+        minRows,
+        style: mergeProps(inputProps.style, style != null ? style : {}),
+        onHeightChange: handleHeightChange
+      }
+    );
+    const clearButtonContent = useMemo(() => {
+      return isClearable ? /* @__PURE__ */ jsx("button", { ...getClearButtonProps(), children: /* @__PURE__ */ jsx(CloseFilledIcon, {}) }) : null;
+    }, [isClearable, getClearButtonProps]);
+    const innerWrapper = useMemo(() => {
+      if (startContent || endContent) {
+        return /* @__PURE__ */ jsxs("div", { ...getInnerWrapperProps(), children: [
+          startContent,
+          content,
+          endContent
+        ] });
+      }
+      return /* @__PURE__ */ jsx("div", { ...getInnerWrapperProps(), children: content });
+    }, [startContent, inputProps, endContent, getInnerWrapperProps]);
+    const shouldShowError = isInvalid && errorMessage;
+    const hasHelperContent = shouldShowError || description;
+    return /* @__PURE__ */ jsxs(Component, { ...getBaseProps(), children: [
+      shouldLabelBeOutside ? labelContent : null,
+      /* @__PURE__ */ jsxs("div", { ...getInputWrapperProps(), "data-has-multiple-rows": dataAttr(hasMultipleRows), children: [
+        shouldLabelBeInside ? labelContent : null,
+        innerWrapper,
+        clearButtonContent
+      ] }),
+      hasHelper && hasHelperContent ? /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: shouldShowError ? /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: errorMessage }) : /* @__PURE__ */ jsx("div", { ...getDescriptionProps(), children: description }) }) : null
+    ] });
+  }
+);
+Textarea.displayName = "HeroUI.Textarea";
+var textarea_default = Textarea;
+
+export {
+  textarea_default
+};