@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
208 lines (207 loc) • 6.45 kB
JavaScript
import { jsxs as m, jsx as s } from "react/jsx-runtime";
import l, { forwardRef as x, useId as _, useRef as I, useState as W } from "react";
import { cn as u } from "../../utils/index.js";
import { inputVariants as $ } from "./Input.variants.js";
import { SearchIcon as L } from "../../assets/icons/components/Search.js";
import { Warning as T } from "../../assets/icons/components/Warning.js";
import { P as i } from "../../index--V_ZsiQe.js";
function h() {
return h = Object.assign || function(t) {
for (var n = 1; n < arguments.length; n++) {
var a = arguments[n];
for (var e in a)
Object.prototype.hasOwnProperty.call(a, e) && (t[e] = a[e]);
}
return t;
}, h.apply(this, arguments);
}
function S(t, n) {
if (t == null) return {};
var a = C(t, n), e, r;
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(t);
for (r = 0; r < o.length; r++)
e = o[r], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (a[e] = t[e]);
}
return a;
}
function C(t, n) {
if (t == null) return {};
var a = {}, e = Object.keys(t), r, o;
for (o = 0; o < e.length; o++)
r = e[o], !(n.indexOf(r) >= 0) && (a[r] = t[r]);
return a;
}
var v = x(function(t, n) {
var a = t.color, e = a === void 0 ? "currentColor" : a, r = t.size, o = r === void 0 ? 24 : r, c = S(t, ["color", "size"]);
return /* @__PURE__ */ l.createElement("svg", h({
ref: n,
xmlns: "http://www.w3.org/2000/svg",
width: o,
height: o,
viewBox: "0 0 24 24",
fill: "none",
stroke: e,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, c), /* @__PURE__ */ l.createElement("path", {
d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
}), /* @__PURE__ */ l.createElement("line", {
x1: "1",
y1: "1",
x2: "23",
y2: "23"
}));
});
v.propTypes = {
color: i.string,
size: i.oneOfType([i.string, i.number])
};
v.displayName = "EyeOff";
function g() {
return g = Object.assign || function(t) {
for (var n = 1; n < arguments.length; n++) {
var a = arguments[n];
for (var e in a)
Object.prototype.hasOwnProperty.call(a, e) && (t[e] = a[e]);
}
return t;
}, g.apply(this, arguments);
}
function M(t, n) {
if (t == null) return {};
var a = R(t, n), e, r;
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(t);
for (r = 0; r < o.length; r++)
e = o[r], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (a[e] = t[e]);
}
return a;
}
function R(t, n) {
if (t == null) return {};
var a = {}, e = Object.keys(t), r, o;
for (o = 0; o < e.length; o++)
r = e[o], !(n.indexOf(r) >= 0) && (a[r] = t[r]);
return a;
}
var y = x(function(t, n) {
var a = t.color, e = a === void 0 ? "currentColor" : a, r = t.size, o = r === void 0 ? 24 : r, c = M(t, ["color", "size"]);
return /* @__PURE__ */ l.createElement("svg", g({
ref: n,
xmlns: "http://www.w3.org/2000/svg",
width: o,
height: o,
viewBox: "0 0 24 24",
fill: "none",
stroke: e,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, c), /* @__PURE__ */ l.createElement("path", {
d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
}), /* @__PURE__ */ l.createElement("circle", {
cx: "12",
cy: "12",
r: "3"
}));
});
y.propTypes = {
color: i.string,
size: i.oneOfType([i.string, i.number])
};
y.displayName = "Eye";
const A = x(
({
className: t,
error: n,
isRequired: a = !1,
isSearch: e = !1,
label: r,
labelClassName: o,
name: c,
theme: O,
type: f = "text",
helperText: w,
helperTextClassName: j,
...k
}, N) => {
const b = _(), P = I(f === "password"), [d, E] = W(() => f !== "password"), p = typeof n == "string" && n.length >= 0, z = d ? y : v;
return /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": O, children: [
r ? /* @__PURE__ */ m(
"label",
{
htmlFor: b,
className: u(
"cursor-pointer text-slate-500 flex gap-1 text-sm font-medium dark:text-slate-50 kubefirst-dark:text-slate-50",
o
),
children: [
r,
" ",
a && /* @__PURE__ */ s("span", { className: "text-red-600 text-xs mt-0.5", children: "*" })
]
}
) : null,
/* @__PURE__ */ m("div", { className: "relative", children: [
e ? /* @__PURE__ */ s(
"i",
{
className: u(
"absolute left-2.5 top-1/2 -translate-y-[50%] text-slate-400",
{
"text-red-700": p
}
),
children: /* @__PURE__ */ s(L, { className: "w-5 h-5" })
}
) : null,
/* @__PURE__ */ s(
"input",
{
id: r ? b : void 0,
ref: N,
name: c,
type: d ? P.current ? "text" : f : "password",
"data-error": p,
className: u(
$({
className: t,
variant: p ? "error" : "default"
}),
{
"pr-10": f === "password" || p,
"pl-8": e
}
),
...k
}
),
p ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-red-700 dark:text-red-500 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(T, { className: "w-5 h-5" }) }) : null,
f === "password" && !n ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(
z,
{
className: "w-5 h-5 cursor-pointer",
onClick: () => E(!d)
}
) }) : null
] }),
n ? /* @__PURE__ */ s("span", { className: "text-xs text-red-700 dark:text-red-500", children: n }) : null,
!n && w ? /* @__PURE__ */ s(
"span",
{
className: u(
"text-xs text-slate-600 dark:text-slate-200 kubefirst-dark:text-slate-200",
j
),
children: w
}
) : null
] });
}
);
A.displayName = "KonstructInput";
export {
A as Input
};