@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
222 lines (221 loc) • 6.64 kB
JavaScript
import { jsxs as O, jsx as c } from "react/jsx-runtime";
import l, { forwardRef as p, useState as E, useId as k } from "react";
import { cn as z } from "../../utils/index.js";
import { inputVariants as N } from "./Input.variants.js";
import { P as a } from "../../index-C5psggHV.js";
import { useTheme as $ } from "../../contexts/theme.hook.js";
function u() {
return u = Object.assign || function(e) {
for (var o = 1; o < arguments.length; o++) {
var r = arguments[o];
for (var t in r)
Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
}
return e;
}, u.apply(this, arguments);
}
function _(e, o) {
if (e == null) return {};
var r = L(e, o), t, n;
if (Object.getOwnPropertySymbols) {
var i = Object.getOwnPropertySymbols(e);
for (n = 0; n < i.length; n++)
t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
}
return r;
}
function L(e, o) {
if (e == null) return {};
var r = {}, t = Object.keys(e), n, i;
for (i = 0; i < t.length; i++)
n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
return r;
}
var y = p(function(e, o) {
var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = _(e, ["color", "size"]);
return /* @__PURE__ */ l.createElement("svg", u({
ref: o,
xmlns: "http://www.w3.org/2000/svg",
width: i,
height: i,
viewBox: "0 0 24 24",
fill: "none",
stroke: t,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, s), /* @__PURE__ */ l.createElement("circle", {
cx: "12",
cy: "12",
r: "10"
}), /* @__PURE__ */ l.createElement("line", {
x1: "12",
y1: "8",
x2: "12",
y2: "12"
}), /* @__PURE__ */ l.createElement("line", {
x1: "12",
y1: "16",
x2: "12.01",
y2: "16"
}));
});
y.propTypes = {
color: a.string,
size: a.oneOfType([a.string, a.number])
};
y.displayName = "AlertCircle";
function m() {
return m = Object.assign || function(e) {
for (var o = 1; o < arguments.length; o++) {
var r = arguments[o];
for (var t in r)
Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
}
return e;
}, m.apply(this, arguments);
}
function W(e, o) {
if (e == null) return {};
var r = T(e, o), t, n;
if (Object.getOwnPropertySymbols) {
var i = Object.getOwnPropertySymbols(e);
for (n = 0; n < i.length; n++)
t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
}
return r;
}
function T(e, o) {
if (e == null) return {};
var r = {}, t = Object.keys(e), n, i;
for (i = 0; i < t.length; i++)
n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
return r;
}
var v = p(function(e, o) {
var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = W(e, ["color", "size"]);
return /* @__PURE__ */ l.createElement("svg", m({
ref: o,
xmlns: "http://www.w3.org/2000/svg",
width: i,
height: i,
viewBox: "0 0 24 24",
fill: "none",
stroke: t,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, s), /* @__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: a.string,
size: a.oneOfType([a.string, a.number])
};
v.displayName = "EyeOff";
function h() {
return h = Object.assign || function(e) {
for (var o = 1; o < arguments.length; o++) {
var r = arguments[o];
for (var t in r)
Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
}
return e;
}, h.apply(this, arguments);
}
function C(e, o) {
if (e == null) return {};
var r = I(e, o), t, n;
if (Object.getOwnPropertySymbols) {
var i = Object.getOwnPropertySymbols(e);
for (n = 0; n < i.length; n++)
t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
}
return r;
}
function I(e, o) {
if (e == null) return {};
var r = {}, t = Object.keys(e), n, i;
for (i = 0; i < t.length; i++)
n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
return r;
}
var g = p(function(e, o) {
var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = C(e, ["color", "size"]);
return /* @__PURE__ */ l.createElement("svg", h({
ref: o,
xmlns: "http://www.w3.org/2000/svg",
width: i,
height: i,
viewBox: "0 0 24 24",
fill: "none",
stroke: t,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, s), /* @__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"
}));
});
g.propTypes = {
color: a.string,
size: a.oneOfType([a.string, a.number])
};
g.displayName = "Eye";
const S = p(
({
className: e,
error: o,
label: r,
labelClassName: t,
name: n,
type: i,
theme: s,
...w
}, b) => {
const [f, x] = E(!1), d = k(), { theme: j } = $(), P = f ? g : v;
return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5 w-full", children: [
r ? /* @__PURE__ */ c("label", { htmlFor: d, className: z("cursor-pointer", t), children: r }) : null,
/* @__PURE__ */ O("div", { className: "relative", children: [
/* @__PURE__ */ c(
"input",
{
id: d,
ref: b,
name: n,
type: f ? "text" : i,
className: N({
className: e,
theme: s ?? j,
variant: o ? "error" : "default"
}),
...w
}
),
o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(y, { className: "w-5 h-5" }) }) : null,
i === "password" && !o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-slate-400 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(
P,
{
className: "w-5 h-5 cursor-pointer",
onClick: () => x(!f)
}
) }) : null
] }),
o ? /* @__PURE__ */ c("span", { className: "text-xs text-red-600 -mt-0.5", children: o }) : null
] });
}
);
S.displayName = "Input";
export {
S as Input
};