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

Collection of reusable components that can be used in web projects

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