xtreme-ui/dist/components/base/Textfield/Textfield.js

Collection of reusable components that can be used in web projects

"use client";
import { jsxs as I, jsx as r } from "react/jsx-runtime";
import { forwardRef as D, useId as L, useMemo as f } from "react";
import U from "clsx";
import { Icon as B } from "../Icon/Icon.js";
/* empty css               */
const M = D((m, T) => {
  const {
    className: v,
    style: C,
    type: e = "text",
    textarea: t,
    placeholder: n,
    autoComplete: h = "off",
    active: E,
    autoFocus: x,
    icon: a,
    iconType: F = "regular",
    value: l,
    onChange: y,
    onFocus: b,
    onBlur: N,
    onKeyUp: c,
    onKeyDown: s,
    onEnterKey: i
  } = m, K = L(), u = m.id ?? K, p = f(() => {
    if (t === !0) return null;
    if (a) return a;
    if (e === "number") return "23";
    if (e === "search") return "f002";
    if (e === "password") return "f30d";
  }, [t, a, e]), d = f(() => {
    if (n) return n;
    if (e === "number") return "Enter a number";
    if (e === "search") return "Search";
    if (e === "password") return "Enter password";
    if (e === "phone") return "Enter phone number";
  }, [n, e]), j = f(() => e === "phone" ? "number" : e, [e]), g = (o) => {
    c == null || c(o);
  }, w = (o) => {
    o.key === "Enter" && (i == null || i(o)), s == null || s(o);
  }, k = U(
    "xtrTextfield",
    p && "withIcon",
    t && "textarea",
    l && "hasValue",
    e === "phone" && "phone",
    E && "active",
    v
  );
  return /* @__PURE__ */ I(
    "div",
    {
      ref: T,
      className: k,
      role: "textbox",
      style: C,
      children: [
        /* @__PURE__ */ r("label", { className: "placeholder", htmlFor: u, children: d }),
        p && !t && /* @__PURE__ */ r(B, { code: p, type: F }),
        e === "phone" && /* @__PURE__ */ I("div", { className: "dialCode", children: [
          /* @__PURE__ */ r("span", { style: { backgroundImage: "url(https://flagcdn.com/in.svg)" } }),
          /* @__PURE__ */ r("p", { children: "+91" })
        ] }),
        t ? /* @__PURE__ */ r(
          "textarea",
          {
            className: "input",
            id: u,
            autoFocus: x,
            autoComplete: h,
            value: l,
            onChange: y,
            onFocus: b,
            onBlur: N,
            onKeyUp: g,
            onKeyDown: w,
            "aria-label": d
          }
        ) : /* @__PURE__ */ r(
          "input",
          {
            className: "input",
            id: u,
            type: j,
            autoFocus: x,
            autoComplete: h,
            value: l,
            onChange: y,
            onFocus: b,
            onBlur: N,
            onKeyUp: g,
            onKeyDown: w,
            "aria-label": d
          }
        )
      ]
    }
  );
});
M.displayName = "Textfield";
export {
  M as Textfield
};