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

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

"use client";
import { jsxs as u, jsx as t } from "react/jsx-runtime";
import { forwardRef as $, useMemo as q, useState as A, useCallback as h } from "react";
import I from "classnames";
import { useLocalTheme as D } from "css-vars-hook";
import { IconFile as G } from "../../internal/Icons/IconFile.js";
import { ValidationState as H } from "../../internal/inputs/ValidationProps.js";
import { useValidation as J } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as K } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as P } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as Q } from "../../internal/inputs/useValidationIcon.js";
import { useInternalId as U } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as W } from "../../internal/hooks/useInternalRef.js";
import e from "./InputFile.module.css.js";
const X = $(
  ({
    id: N,
    className: V,
    placeholder: l = "",
    disabled: F,
    value: g,
    onChange: s = () => {
    },
    onFocus: x = () => {
    },
    onBlur: R = () => {
    },
    onKeyDown: v = () => {
    },
    onKeyUp: y = () => {
    },
    defaultValue: b,
    size: r = 16,
    errorMessage: w,
    revalidateOnFormChange: C,
    validation: o,
    displayIcon: m = !0,
    ...j
  }, L) => {
    const { LocalRoot: S } = D(), T = q(
      () => ({
        "input-width": `${r}ch`
      }),
      [r]
    ), c = U(N), [k, a] = A(""), B = !!o, { validateTextual: d, validity: f, setValidity: i } = J({
      validation: o,
      hasValidators: B
    }), n = W(L);
    P({ errorMessage: w, inputRef: n, setValidity: i, validation: o }), K(n, d, C);
    const E = Q(f), M = h(
      (p) => {
        s(p), a(p.target.files[0].name);
      },
      [s, a]
    ), O = h(() => {
      a(""), i(H.error);
    }, [i]);
    return /* @__PURE__ */ u(
      S,
      {
        theme: T,
        className: I(
          e["input-file"],
          { [e.withValidationIcon]: m },
          V
        ),
        children: [
          /* @__PURE__ */ u("div", { className: e.toggle, children: [
            /* @__PURE__ */ t(
              "input",
              {
                ...j,
                id: c,
                type: "file",
                placeholder: l,
                className: e.input,
                ref: n,
                disabled: F,
                value: g,
                defaultValue: b,
                onChange: M,
                onBlur: R,
                onFocus: x,
                onKeyUp: y,
                onKeyDown: v,
                onInvalid: O,
                onInput: d
              }
            ),
            /* @__PURE__ */ t(G, { className: I(e.icon) })
          ] }),
          /* @__PURE__ */ t("label", { htmlFor: c, className: e.label, children: k || l }),
          m && f && /* @__PURE__ */ t(E, { className: e.validity })
        ]
      }
    );
  }
);
X.displayName = "InputFile";
export {
  X as InputFile
};
//# sourceMappingURL=InputFile.js.map