koval-ui/dist/src/lib/Textarea/Textarea.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as G, jsx as o } from "react/jsx-runtime";
import { forwardRef as H, useCallback as a, useMemo as J } from "react";
import K from "classnames";
import { useLocalTheme as Q } from "css-vars-hook";
import { ValidationState as U } from "../../internal/inputs/ValidationProps.js";
import { useValidation as W } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as X } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as Y } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as Z } from "../../internal/inputs/useValidationIcon.js";
import { useInternalId as _ } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as $ } from "../../internal/hooks/useInternalRef.js";
import r from "./Textarea.module.css.js";
const z = H(
  ({
    prefix: c,
    className: h,
    placeholder: x = "",
    disabled: I,
    value: V,
    onChange: d = () => {
    },
    onFocus: N = () => {
    },
    onBlur: b = () => {
    },
    onKeyDown: g = () => {
    },
    onKeyUp: R = () => {
    },
    defaultValue: L,
    id: T,
    readOnly: n,
    cols: y = 20,
    rows: C = 3,
    resize: f = "both",
    revalidateOnFormChange: S,
    validation: s,
    errorMessage: j,
    displayIcon: w = !0,
    ...t
  }, B) => {
    const F = !!s || !!t.required || typeof t.maxLength == "number" || typeof t.minLength == "number", { validateTextual: l, validity: p, setValidity: m } = W({ validation: s, hasValidators: F }), i = $(B);
    X(i, l, S), Y({ errorMessage: j, inputRef: i, setValidity: m, validation: s });
    const k = Z(p), q = a(
      (e) => {
        d(e);
      },
      [d]
    ), v = a(() => {
      m(U.error);
    }, [m]), E = a(
      (e) => {
        l(e);
      },
      [l]
    ), M = a(
      (e) => {
        n && e.target.select();
      },
      [n]
    ), u = _(T), { LocalRoot: A } = Q(), D = J(
      () => ({
        resize: f
      }),
      [f]
    );
    return /* @__PURE__ */ G(A, { theme: D, className: K(r.wrapper, h), children: [
      c && /* @__PURE__ */ o("label", { className: r.prefix, htmlFor: u, children: /* @__PURE__ */ o(c, {}) }),
      /* @__PURE__ */ o(
        "textarea",
        {
          ...t,
          cols: y,
          rows: C,
          readOnly: n,
          id: u,
          placeholder: x,
          className: r.textarea,
          ref: i,
          disabled: I,
          value: V,
          defaultValue: L,
          onChange: q,
          onBlur: b,
          onFocus: N,
          onKeyUp: R,
          onKeyDown: g,
          onInvalid: v,
          onInput: E,
          onSelect: M
        }
      ),
      w && p && /* @__PURE__ */ o(k, { className: r.validation })
    ] });
  }
);
z.displayName = "Textarea";
export {
  z as Textarea
};
//# sourceMappingURL=Textarea.js.map