@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
189 lines (188 loc) • 6.83 kB
JavaScript
import { o as W } from "./chunk-cI0lbGMq.js";
import { t as $ } from "./prop-types-CE0Kfmwk.js";
import { t as i } from "./utils-COaoD3PI.js";
import { SearchIcon as S } from "./assets/icons/components/Search.js";
import { WarningIcon as T } from "./assets/icons/components/Warning.js";
import { Typography as m } from "./components/Typography/Typography.js";
import { inputVariants as M } from "./components/Input/Input.variants.js";
import p, { forwardRef as y, useId as C, useRef as R, useState as A } from "react";
import { jsx as s, jsxs as d } from "react/jsx-runtime";
var l = /* @__PURE__ */ W($());
function g() {
return g = Object.assign || function(t) {
for (var r = 1; r < arguments.length; r++) {
var n = arguments[r];
for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
}
return t;
}, g.apply(this, arguments);
}
function B(t, r) {
if (t == null) return {};
var n = q(t, r), e, a;
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(t);
for (a = 0; a < o.length; a++)
e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
}
return n;
}
function q(t, r) {
if (t == null) return {};
var n = {}, e = Object.keys(t), a, o;
for (o = 0; o < e.length; o++)
a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
return n;
}
var x = y(function(t, r) {
var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = B(t, ["color", "size"]);
return /* @__PURE__ */ p.createElement("svg", g({
ref: r,
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__ */ p.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__ */ p.createElement("line", {
x1: "1",
y1: "1",
x2: "23",
y2: "23"
}));
});
x.propTypes = {
color: l.default.string,
size: l.default.oneOfType([l.default.string, l.default.number])
};
x.displayName = "EyeOff";
function v() {
return v = Object.assign || function(t) {
for (var r = 1; r < arguments.length; r++) {
var n = arguments[r];
for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
}
return t;
}, v.apply(this, arguments);
}
function D(t, r) {
if (t == null) return {};
var n = F(t, r), e, a;
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(t);
for (a = 0; a < o.length; a++)
e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
}
return n;
}
function F(t, r) {
if (t == null) return {};
var n = {}, e = Object.keys(t), a, o;
for (o = 0; o < e.length; o++)
a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
return n;
}
var w = y(function(t, r) {
var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = D(t, ["color", "size"]);
return /* @__PURE__ */ p.createElement("svg", v({
ref: r,
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__ */ p.createElement("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ p.createElement("circle", {
cx: "12",
cy: "12",
r: "3"
}));
});
w.propTypes = {
color: l.default.string,
size: l.default.oneOfType([l.default.string, l.default.number])
};
w.displayName = "Eye";
var K = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRequired: a = !1, isSearch: o = !1, label: c, labelAction: O, labelClassName: j, labelWrapperClassName: k, name: N, theme: E, type: f = "text", ...P }, _) => {
const b = C(), z = R(f === "password"), [h, I] = A(() => f !== "password"), u = typeof r == "string" && r.length >= 0, L = h ? w : x;
return /* @__PURE__ */ d("div", {
className: "flex flex-col gap-2 w-full relative",
"data-theme": E,
children: [
c ? /* @__PURE__ */ d("div", {
className: i("flex items-center justify-between", k),
children: [/* @__PURE__ */ d(m, {
component: "label",
variant: "labelLarge",
htmlFor: b,
className: i("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", j),
children: [
c,
" ",
a && /* @__PURE__ */ s(m, {
component: "span",
className: i("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"),
children: "*"
})
]
}), O]
}) : null,
/* @__PURE__ */ d("div", {
className: "relative",
children: [
o ? /* @__PURE__ */ s("i", {
className: i("absolute", "left-2.5", "top-1/2", "-translate-y-[50%]", "text-slate-400", "dark:text-metal-400", { "text-red-700": u }),
children: /* @__PURE__ */ s(S, { className: "w-5 h-5" })
}) : null,
/* @__PURE__ */ s("input", {
id: c ? b : void 0,
ref: _,
name: N,
type: h ? z.current ? "text" : f : "password",
"data-error": u,
className: i(M({
className: t,
variant: u ? "error" : "default"
}), {
"pr-10": f === "password" || u,
"pl-8": o
}),
...P
}),
u ? /* @__PURE__ */ s("i", {
className: i("-translate-y-[50%]", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"),
children: /* @__PURE__ */ s(T, { className: "w-5 h-5" })
}) : null,
f === "password" && !r ? /* @__PURE__ */ s("i", {
className: i("-translate-y-[50%]", "absolute", "right-3", "text-slate-400", "top-1/2"),
children: /* @__PURE__ */ s(L, {
className: "w-5 h-5 cursor-pointer",
onClick: () => I(!h)
})
}) : null
]
}),
r ? /* @__PURE__ */ s(m, {
component: "span",
className: i("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"),
children: r
}) : null,
!r && n ? /* @__PURE__ */ s(m, {
component: "span",
variant: "body1",
className: i("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", e),
children: n
}) : null
]
});
});
K.displayName = "KonstructInput";
export {
K as t
};