@codex-storage/marketplace-ui-components/dist/components/Input/Input.js

Marketplace UI components for Codex decentralized storage network.

import { jsxs as d, jsx as r } from "react/jsx-runtime";
import { forwardRef as w, useState as y, useEffect as E } from "react";
import { attributes as F } from "../utils/attributes.js";
import { classnames as l } from "../utils/classnames.js";
import '../../assets/Input.css';const g = w(
  ({
    id: s,
    label: c,
    helper: n,
    style: h,
    Icon: i,
    inputClassName: u,
    variant: v = "big",
    inputContainerClassName: x = "",
    disabled: f = !1,
    onChange: a,
    mode: e,
    isInvalid: t = !1,
    value: b,
    ...j
  }, N) => {
    const [m, o] = y(t);
    E(() => {
      e === "manual" && o(t);
    }, [e, t]);
    const k = (p) => {
      e === "auto" && o(p.currentTarget.checkValidity() !== !0), a == null || a(p);
    };
    return /* @__PURE__ */ d(
      "div",
      {
        className: l(
          ["input"],
          ["input--invalid", m || t],
          ["input--icon", !!i],
          ["input--" + v],
          [u || ""]
        ),
        children: [
          c && /* @__PURE__ */ r("label", { htmlFor: s, children: c }),
          /* @__PURE__ */ d("div", { className: l([x]), children: [
            i && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(i, {}) }),
            /* @__PURE__ */ r(
              "input",
              {
                id: s,
                ref: N,
                className: l([u || ""]),
                onChange: k,
                style: h,
                ...F({
                  disabled: f,
                  "aria-disabled": f,
                  "aria-invalid": m || t
                }),
                ...j,
                value: b || ""
              }
            )
          ] }),
          n && /* @__PURE__ */ r("small", { children: n })
        ]
      }
    );
  }
);
export {
  g as Input
};
//# sourceMappingURL=Input.js.map