input-field-zn
Version:
A lightweight and customizable React input field component with built-in icons for user, email, and password inputs. Includes password visibility toggle (eye/eye-slash) and modern styling support for easy integration in any form.
362 lines (361 loc) • 14.5 kB
JavaScript
import te, { useState as ne } from "react";
var N = { exports: {} }, h = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var z;
function ae() {
if (z) return h;
z = 1;
var s = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
function l(i, A, o) {
var c = null;
if (o !== void 0 && (c = "" + o), A.key !== void 0 && (c = "" + A.key), "key" in A) {
o = {};
for (var u in A)
u !== "key" && (o[u] = A[u]);
} else o = A;
return A = o.ref, {
$$typeof: s,
type: i,
key: c,
ref: A !== void 0 ? A : null,
props: o
};
}
return h.Fragment = d, h.jsx = l, h.jsxs = l, h;
}
var v = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var W;
function oe() {
return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
function s(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === M ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case f:
return "Fragment";
case B:
return "Profiler";
case x:
return "StrictMode";
case Y:
return "Suspense";
case U:
return "SuspenseList";
case L:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case k:
return "Portal";
case I:
return e.displayName || "Context";
case P:
return (e._context.displayName || "Context") + ".Consumer";
case C:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case _:
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
case R:
r = e._payload, e = e._init;
try {
return s(e(r));
} catch {
}
}
return null;
}
function d(e) {
return "" + e;
}
function l(e) {
try {
d(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
n
), d(e);
}
}
function i(e) {
if (e === f) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === R)
return "<...>";
try {
var r = s(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function A() {
var e = g.A;
return e === null ? null : e.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function c(e) {
if (p.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function u(e, r) {
function t() {
Z || (Z = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function y() {
var e = s(this.type);
return G[e] || (G[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function F(e, r, t, n, O, J) {
var a = t.ref;
return e = {
$$typeof: w,
type: e,
key: r,
props: t,
_owner: n
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: y
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: O
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: J
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function T(e, r, t, n, O, J) {
var a = r.children;
if (a !== void 0)
if (n)
if (ee(a)) {
for (n = 0; n < a.length; n++)
E(a[n]);
Object.freeze && Object.freeze(a);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else E(a);
if (p.call(r, "key")) {
a = s(e);
var b = Object.keys(r).filter(function(re) {
return re !== "key";
});
n = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", H[a + n] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
n,
a,
b,
a
), H[a + n] = !0);
}
if (a = null, t !== void 0 && (l(t), a = "" + t), c(r) && (l(r.key), a = "" + r.key), "key" in r) {
t = {};
for (var D in r)
D !== "key" && (t[D] = r[D]);
} else t = r;
return a && u(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), F(
e,
a,
t,
A(),
O,
J
);
}
function E(e) {
S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === R && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
}
function S(e) {
return typeof e == "object" && e !== null && e.$$typeof === w;
}
var m = te, w = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), P = Symbol.for("react.consumer"), I = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), Y = Symbol.for("react.suspense"), U = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), L = Symbol.for("react.activity"), M = Symbol.for("react.client.reference"), g = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, p = Object.prototype.hasOwnProperty, ee = Array.isArray, V = console.createTask ? console.createTask : function() {
return null;
};
m = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var Z, G = {}, Q = m.react_stack_bottom_frame.bind(
m,
o
)(), X = V(i(o)), H = {};
v.Fragment = f, v.jsx = function(e, r, t) {
var n = 1e4 > g.recentlyCreatedOwnerStacks++;
return T(
e,
r,
t,
!1,
n ? Error("react-stack-top-frame") : Q,
n ? V(i(e)) : X
);
}, v.jsxs = function(e, r, t) {
var n = 1e4 > g.recentlyCreatedOwnerStacks++;
return T(
e,
r,
t,
!0,
n ? Error("react-stack-top-frame") : Q,
n ? V(i(e)) : X
);
};
})()), v;
}
var K;
function Ae() {
return K || (K = 1, process.env.NODE_ENV === "production" ? N.exports = ae() : N.exports = oe()), N.exports;
}
var j = Ae();
const se = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABOvAAATrwFj5o7DAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAUtJREFUWIXt1btKA0EYxfGfF2JEiIJWagqxMmjhiyg+itfnEGwECxUfwEZ8iECsvFWaQg12KWwkghbZBdFVZ5ddIZADp9jdmTn/mZ35hr56UGPYQR0vkevYjr4VqiXc4/0H32GxqPAZtH4Jj/2E6SIATgLCYx/nHT6O1xQAr6iEDDwYCLCMUgrgUtQnN4Cg2WTpEwrwmAHgIUOfHzWEZ+F7oCV8csHaSgGwnnc43VU4Dwg/i9oWohL20EkI7mBXutNiICPIPNZQi56vcKpbintLaVZgAXP+vvFedC+s26xQn1XGJprCT0DsJjYwkjW8iosMwV/dwGza8AoucwiPfYuJNAAHOYbH3g8Nr+KtAICOhF+RVK9XFVPJhrESAlBLeJeXvo2dBFAuEGA8BKBRIMBFSKNR3Mh/E15LsbpTOEI7h+A2DjEZGt7Xv+oDF2PoQpIaUrYAAAAASUVORK5CYII=", le = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEVSURBVFiF7dY/SgNBHMXxz24UC8GAlaWFlZXgBezsLDxMvIK6egB703gTC/ECVhJ0bxCwMBb5RaJE3T/JbuE+GBhmZ/d931sYhk6d2MAVRpg0NEa4DG/XDRp/H1mCV+zUrbGi8hRrLZlD2sMmjloCyCDBAGPN/ftxeCbQD5p93Ddg/oiD8OzDC05ioYezFbXxhnOsh9cxns1tuMP2itqYT72FG7zHsy8bl93GT6nn9yx8cRlt/Jb6T4A6bRRJXQigShtFU5cCKNJG2dSlARa1sWt6mAxiXiZ1ZYBJJDsVp1gojbWiqT9HMqOooCc8xPwQe1U+UgdgKUrbNO8AZgB5i/55imGLALdMr8aZ5q/lF+Hd6Z/rA/MffNsYsm44AAAAAElFTkSuQmCC", ie = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFxSURBVFiF7ZZNTsJAGIYf0TRoxBuIB7CHgUN4DRNX4MYQDStZ4Rl0pXdQwSMU94YFiYW66DSdlla++SFseJMvM23fme+ZmXY6YK4QGABTYK5iqu6FFv2JFQBDYAkkNREDD8rrPflbKdkMeAZegO/Ss1ffEEOt8wjoAA3teQPoKqjMd+8reUg6tVny83+8bQ0iBi59AAzIR9UR+Lua/84HwBf56BsbvChP9k5MJOZNaqvyA1gJ/CvlBbjwAXCqyrnAm+lHlS0fAFvVHqBKAXBLcVNxjQjoI9wd+x4Tl6MnAfA58nLMyskOKgASCaWDCjl3/hIeObSdACNVv8LjYUSylp9AU2vTVECStgXZLsEjsNCuF+SzYSRbgLji3q9lX2uSTOM7cKy1OSFdFuMlsAVIKE75yKBdQS6f4VlN3Ug73wdcAFo1dSO5bMVL4Eb1cQ0c2uTc/wuqANZ+mR4VSQCetggwlpgC0lNRhN8jWY+KI9kfgkLcIXf5FVgAAAAASUVORK5CYII=", q = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA6AAAAOgBhtX2rwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHWSURBVFiF7dYxaxRBFAfw3wYTLAUvCCkl3OULBBKuN0W6gJDiPoDFtalE0CLdYXOfQr+JSK63sUojplDRBC5wY7F7MC47s3sQueYGHsyyb/7vPzPv/d8UIQTrHFtrjb4hsCGAR6suKIriCZ5HBl+XFkL4sRJgCKHVsIe3uEZosevKd68TdkvgY3zAvEPgus2rtccrE8AO3mORAJ9hgpcYY4qrhO+i8t3uRACDKkAT2E+MEqSLiszvxNrP2M8SwDn+ZIL3O+TLQYbEL5w1EsAp7jN3OqoF6uE13mFY+zduyY2TfwjgKLPzgFktwAVua/d8WbuOVE6E6oQOl41wgJuMc8AkAt/FXSLZhpHftAXzO/pbylJ5Kj8+RfNXeNzgU+BF9P2lBbOHj12l+Fk0z6nnPJp/64itrzyO3HFNo6MdataHW/Qiv0kL5g0GS+dD6dIJyoQqIvDLGok7XNQSNaUlQZnwR/UyPJGX3HEtwFBZgm+wW/s3yuDc4zQlRGdKsUiVzkEHIeorRSu18/M2Kd5XymaKxDi+joadp4LPMOjajLarJEo1oytlnY+VDWmSufOFsrHtdO6GEZH1tOMGIv/tQVIs9bjreOgn2coEHnqs/VW8IbAh8Bc0KUGPznM4zQAAAABJRU5ErkJggg==", $ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAjNJREFUWIXt1r9vTmEUB/BPW4N6m6KhSETDQAeDhkGTakQiBqnJZLBVN5MwGLwW1dXgHyDxMx2EhQhDk2orrZitJYJgQjVqeJ63uW7vfe9to+3Sb3Lyvs+5557zPc85z3kua1jDKqMptW7ARezFm5UgsC617sZQ/N+BauLZJvTiGLqwFVuij6/4gCmM4gm+L4VQM8YxFyVJ4FAMNFdCfmI4JrRobMRYwtn1JZKoyTN05gVL9wDMYDeOxHWP0Bsv8R7P4/ObuIG7mEQFuzL87UE//mAkN+2IFjzOyaRa9DKOR5J5uzEcY2Sizb9bX4ZEL/rQntB1YLqOjzG0poM3C9tTpqZZPfE76hsTO1HPx4hQsnncK3hhEhM5O5FszMGEviihWzXDgRJZXxLmQBGJGWE+wIUSfvsJA6TI8HR0eiqlzyLRl2ObJdPpSZiH2Rz9lfhbxWuh9htK+pzHuRJML0fbbfiV8bya4bdMCQZqxrcLDMcTjgdzbNIknhb4vJM0riju2pPRtgnXhHlfj0QXvuT4eiV1DAnDod4g+iSM1RraI6k+5Y5oTUaxOR28hhZhXOaR+JjYiSTKHNE5PEpnnr6MZnBfaLQeC78XKjgjHLE2bMc+nMB+7Ih2Ry28wN7hfIxRCp3CVVrUyfWkWjZYPXTjIX4sB4mGRRBpFep/GAewU6j9LD4LTTqFF3iLB0L94WoRkeVAujHPZhk1Zin/E74Jo3kirhd8A6wU1uPgagVfQyH+Ar0WRqIx2JFcAAAAAElFTkSuQmCC", ue = (s) => {
const d = {
user: se,
email: le,
password: ie,
eye: q,
eyeSlash: $
}, [l, i] = ne(!1), {
value: A,
name: o,
type: c,
placeholder: u = "Enter text",
onChange: y,
className: F,
...T
} = s, {
icon: E = !1,
width: S = "22px",
top: m = "7px",
left: w = "6px",
right: k = "6px",
iconPosition: f = "left",
iconPath: x,
iconName: B = "user",
iconEye: P = !1,
iconEyePath: I = [q, $],
iconClassName: C = "",
iconTint: Y = 0.3,
iconEyeTint: U = 0.3
} = s?.iconOverRide || {}, _ = x || d[B], R = I, L = () => {
i(!l);
}, M = (g) => {
let p = g;
return g === "password" && (p = l ? "text" : "password"), p;
};
return /* @__PURE__ */ j.jsxs("div", { className: `inf-container ${F}`, children: [
/* @__PURE__ */ j.jsx(
"input",
{
className: "inf-input",
type: M(c),
name: o,
value: A,
onChange: y,
placeholder: u,
style: {
paddingLeft: E && f === "left" ? "28px" : "8px",
paddingRight: E && f === "right" ? "28px" : "8px"
},
...T
}
),
E && /* @__PURE__ */ j.jsx(
"img",
{
className: `inf-img ${C}`,
src: _,
style: {
width: S,
[f]: w,
top: m,
right: k,
filter: `invert(${Y})`
},
alt: o
}
),
P && /* @__PURE__ */ j.jsx(
"img",
{
onClick: L,
className: `inf-img inf-eye-slash ${C}`,
src: l ? R[0] : R[1],
style: { filter: `invert(${U})` },
alt: o
}
)
] });
};
export {
ue as default
};