@gear-js/vara-ui
Version:
React UI components used across Vara applications
320 lines (319 loc) • 18.5 kB
JavaScript
import { jsxs as _, jsx as r, Fragment as M } from "react/jsx-runtime";
import * as c from "react";
import { useMemo as L, useState as y, useEffect as I, cloneElement as q } from "react";
import { createPortal as B } from "react-dom";
function k(e) {
var s, t, o = "";
if (typeof e == "string" || typeof e == "number") o += e;
else if (typeof e == "object") if (Array.isArray(e)) {
var n = e.length;
for (s = 0; s < n; s++) e[s] && (t = k(e[s])) && (o && (o += " "), o += t);
} else for (t in e) e[t] && (o && (o += " "), o += t);
return o;
}
function m() {
for (var e, s, t = 0, o = "", n = arguments.length; t < n; t++) (e = arguments[t]) && (s = k(e)) && (o && (o += " "), o += s);
return o;
}
const W = "_button_b1oxl_9", X = "_loading_b1oxl_34", Y = "_spin_b1oxl_1", R = "_icon_b1oxl_62", Z = "_block_b1oxl_75", T = "_noWrap_b1oxl_79", V = "_primary_b1oxl_83", A = "_contrast_b1oxl_96", P = "_plain_b1oxl_127", O = "_grey_b1oxl_149", z = "_border_b1oxl_172", H = "_danger_b1oxl_200", G = "_transparent_b1oxl_212", F = "_noText_b1oxl_234", D = "_small_b1oxl_238", J = "_medium_b1oxl_247", u = {
button: W,
loading: X,
spin: Y,
icon: R,
block: Z,
noWrap: T,
primary: V,
contrast: A,
plain: P,
grey: O,
border: z,
danger: H,
transparent: G,
"x-small": "_x-small_b1oxl_229",
noText: F,
small: D,
medium: J,
default: "_default_b1oxl_256",
"x-large": "_x-large_b1oxl_265"
}, $ = (e) => {
const {
className: s,
text: t,
icon: o,
disabled: n,
isLoading: l,
type: a = "button",
color: i = "primary",
size: h = "default",
children: C,
block: g,
noWrap: S,
...E
} = e;
return /* @__PURE__ */ _(
"button",
{
type: a,
className: m(
u.button,
u[i],
u[h],
l && u.loading,
!t && !C && u.noText,
g && u.block,
S && u.noWrap,
s
),
disabled: n || l,
...E,
children: [
o && /* @__PURE__ */ r(o, { className: u.icon }),
t && /* @__PURE__ */ r("span", { children: t }),
C
]
}
);
}, K = "_container_1sxvj_1", Q = "_label_1sxvj_7", U = "_inputWrapper_1sxvj_19", t1 = "_error_1sxvj_51", e1 = "_block_1sxvj_70", o1 = "_small_1sxvj_74", n1 = "_medium_1sxvj_82", l1 = "_large_1sxvj_90", b = {
container: K,
label: Q,
inputWrapper: U,
error: t1,
block: e1,
small: o1,
medium: n1,
large: l1
};
function w({ size: e = "medium", label: s, className: t, block: o, children: n, error: l }) {
return /* @__PURE__ */ _("label", { className: m(b.container, b[e], t, o && b.block), children: [
s && /* @__PURE__ */ r("span", { className: b.label, children: s }),
/* @__PURE__ */ r("span", { className: b.inputWrapper, children: n }),
l && /* @__PURE__ */ r("span", { className: b.error, children: l })
] });
}
const s1 = "_icon_14iem_1", a1 = "_input_14iem_6", v = {
icon: s1,
input: a1
}, mt = ({ icon: e, className: s, label: t, error: o, type: n = "text", size: l, block: a, ...i }) => /* @__PURE__ */ _(w, { className: s, label: t, error: o, size: l, block: a, children: [
e && /* @__PURE__ */ r(e, { className: v.icon }),
/* @__PURE__ */ r("input", { className: v.input, type: n, "aria-invalid": !!o, ...i })
] }), r1 = "_textarea_tjcpk_1", c1 = {
textarea: r1
}, ht = ({ className: e, label: s, error: t, size: o, rows: n = 5, block: l, ...a }) => /* @__PURE__ */ r(w, { className: e, label: s, error: t, size: o, block: l, children: /* @__PURE__ */ r("textarea", { rows: n, className: c1.textarea, "aria-invalid": !!t, ...a }) }), i1 = "_select_3svy3_1", _1 = {
select: i1
}, Ct = ({ options: e, className: s, label: t, error: o, size: n, block: l, ...a }) => {
const i = L(() => e.map((h, C) => /* @__PURE__ */ r("option", { ...h }, C)), [e]);
return /* @__PURE__ */ r(w, { className: s, label: t, error: o, size: n, block: l, children: /* @__PURE__ */ r("select", { className: _1.select, "aria-invalid": !!o, ...a, children: i }) });
}, d1 = "_label_1fc0o_1", m1 = "_input_1fc0o_17", h1 = "_checkbox_1fc0o_26", C1 = "_box_1fc0o_26", u1 = "_small_1fc0o_133", f = {
label: d1,
input: m1,
checkbox: h1,
box: C1,
switch: "_switch_1fc0o_78",
default: "_default_1fc0o_126",
small: u1
}, ut = ({ label: e, className: s, type: t = "checkbox", size: o = "default", error: n, ...l }) => /* @__PURE__ */ _("label", { className: m(f.label, s, f[o]), children: [
/* @__PURE__ */ r("input", { type: "checkbox", className: f.input, "aria-invalid": !!n, ...l }),
/* @__PURE__ */ r("span", { className: m(f.box, f[t]) }),
e
] }), p1 = "_label_14xl5_1", b1 = "_input_14xl5_19", g1 = "_box_14xl5_25", f1 = "_small_14xl5_92", x = {
label: p1,
input: b1,
box: g1,
small: f1,
default: "_default_14xl5_98"
}, pt = ({ label: e, className: s, size: t = "default", error: o, ...n }) => /* @__PURE__ */ _("label", { className: m(x.label, s, x[t]), children: [
/* @__PURE__ */ r("input", { type: "radio", className: x.input, "aria-invalid": !!o, ...n }),
/* @__PURE__ */ r("span", { className: x.box }),
e
] }), N = (e) => /* @__PURE__ */ c.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("path", { d: "M15 5L5 15M5 5L15 15", stroke: "black", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), x1 = (e) => /* @__PURE__ */ c.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("path", { d: "M14.1163 6.42625C13.8806 6.18 13.6369 5.92625 13.545 5.70312C13.46 5.49875 13.455 5.16 13.45 4.83187C13.4406 4.22187 13.4306 3.53062 12.95 3.05C12.4694 2.56937 11.7781 2.55937 11.1681 2.55C10.84 2.545 10.5013 2.54 10.2969 2.455C10.0744 2.36312 9.82 2.11937 9.57375 1.88375C9.1425 1.46937 8.6525 1 8 1C7.3475 1 6.85812 1.46937 6.42625 1.88375C6.18 2.11937 5.92625 2.36312 5.70312 2.455C5.5 2.54 5.16 2.545 4.83187 2.55C4.22187 2.55937 3.53062 2.56937 3.05 3.05C2.56937 3.53062 2.5625 4.22187 2.55 4.83187C2.545 5.16 2.54 5.49875 2.455 5.70312C2.36312 5.92562 2.11937 6.18 1.88375 6.42625C1.46937 6.8575 1 7.3475 1 8C1 8.6525 1.46937 9.14187 1.88375 9.57375C2.11937 9.82 2.36312 10.0737 2.455 10.2969C2.54 10.5013 2.545 10.84 2.55 11.1681C2.55937 11.7781 2.56937 12.4694 3.05 12.95C3.53062 13.4306 4.22187 13.4406 4.83187 13.45C5.16 13.455 5.49875 13.46 5.70312 13.545C5.92562 13.6369 6.18 13.8806 6.42625 14.1163C6.8575 14.5306 7.3475 15 8 15C8.6525 15 9.14187 14.5306 9.57375 14.1163C9.82 13.8806 10.0737 13.6369 10.2969 13.545C10.5013 13.46 10.84 13.455 11.1681 13.45C11.7781 13.4406 12.4694 13.4306 12.95 12.95C13.4306 12.4694 13.4406 11.7781 13.45 11.1681C13.455 10.84 13.46 10.5013 13.545 10.2969C13.6369 10.0744 13.8806 9.82 14.1163 9.57375C14.5306 9.1425 15 8.6525 15 8C15 7.3475 14.5306 6.85812 14.1163 6.42625ZM10.8538 6.85375L7.35375 10.3538C7.30731 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.93429 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1462 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3692 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6914 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375Z", fill: "currentColor" })), w1 = (e) => /* @__PURE__ */ c.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("path", { d: "M14.7083 7.29503L8.70519 1.29128C8.51783 1.10503 8.26437 1.00049 8.00019 1.00049C7.736 1.00049 7.48255 1.10503 7.29519 1.29128L1.29519 7.29503C1.10894 7.48239 1.00439 7.73585 1.00439 8.00003C1.00439 8.26422 1.10894 8.51767 1.29519 8.70503L7.29831 14.7088C7.48568 14.895 7.73913 14.9996 8.00331 14.9996C8.2675 14.9996 8.52095 14.895 8.70831 14.7088L14.7114 8.70503C14.8977 8.51767 15.0022 8.26422 15.0022 8.00003C15.0022 7.73585 14.8977 7.48239 14.7114 7.29503H14.7083ZM7.50019 5.00003C7.50019 4.86742 7.55287 4.74025 7.64664 4.64648C7.7404 4.55271 7.86758 4.50003 8.00019 4.50003C8.1328 4.50003 8.25997 4.55271 8.35374 4.64648C8.44751 4.74025 8.50019 4.86742 8.50019 5.00003V8.50003C8.50019 8.63264 8.44751 8.75982 8.35374 8.85358C8.25997 8.94735 8.1328 9.00003 8.00019 9.00003C7.86758 9.00003 7.7404 8.94735 7.64664 8.85358C7.55287 8.75982 7.50019 8.63264 7.50019 8.50003V5.00003ZM8.00019 11.5C7.85185 11.5 7.70685 11.456 7.58351 11.3736C7.46017 11.2912 7.36404 11.1741 7.30728 11.037C7.25051 10.9 7.23566 10.7492 7.2646 10.6037C7.29354 10.4582 7.36497 10.3246 7.46986 10.2197C7.57475 10.1148 7.70838 10.0434 7.85387 10.0144C7.99936 9.9855 8.15016 10.0004 8.2872 10.0571C8.42424 10.1139 8.54138 10.21 8.62379 10.3334C8.7062 10.4567 8.75019 10.6017 8.75019 10.75C8.75019 10.9489 8.67117 11.1397 8.53052 11.2804C8.38987 11.421 8.1991 11.5 8.00019 11.5Z", fill: "currentColor" })), v1 = (e) => /* @__PURE__ */ c.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.99758 14.6651C11.6799 14.6651 14.6651 11.6799 14.6651 7.99758C14.6651 4.31522 11.6799 1.33008 7.99758 1.33008C4.31522 1.33008 1.33008 4.31522 1.33008 7.99758C1.33008 11.6799 4.31522 14.6651 7.99758 14.6651ZM7.99512 4.70508C7.64994 4.70508 7.37012 4.9849 7.37012 5.33008C7.37012 5.67526 7.64994 5.95508 7.99512 5.95508C8.3403 5.95508 8.62017 5.67526 8.62017 5.33008C8.62017 4.9849 8.3403 4.70508 7.99512 4.70508ZM8.62012 7.99675C8.62012 7.65157 8.3403 7.37175 7.99512 7.37175C7.64994 7.37175 7.37012 7.65157 7.37012 7.99675V10.6634C7.37012 11.0086 7.64994 11.2884 7.99512 11.2884C8.3403 11.2884 8.62012 11.0086 8.62012 10.6634V7.99675Z", fill: "currentColor" })), y1 = (e) => /* @__PURE__ */ c.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("path", { d: "M12.0492 4.28213C10.9287 3.16171 9.34091 2.51558 7.59498 2.6943C5.07232 2.94863 2.99645 4.997 2.71462 7.51967C2.33657 10.8534 4.91422 13.6648 8.1655 13.6648C10.3582 13.6648 12.2416 12.3794 13.1215 10.5304C13.3414 10.0698 13.0115 9.54055 12.5028 9.54055C12.2485 9.54055 12.0079 9.67802 11.8979 9.90486C11.1212 11.5752 9.25843 12.6337 7.2238 12.1801C5.69783 11.8433 4.46743 10.5991 4.14436 9.07313C3.56697 6.40612 5.59472 4.04155 8.1655 4.04155C9.30654 4.04155 10.3239 4.51584 11.0662 5.26508L10.0283 6.30301C9.59524 6.73606 9.89768 7.47842 10.5094 7.47842H12.9771C13.3552 7.47842 13.6645 7.16911 13.6645 6.79105V4.32338C13.6645 3.71161 12.9221 3.40229 12.4891 3.83534L12.0492 4.28213Z", fill: "currentColor" })), k1 = (e) => /* @__PURE__ */ c.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_11299_325)" }, /* @__PURE__ */ c.createElement("path", { d: "M8.00016 5.33325V7.99992M8.00016 10.6666H8.00683M14.6668 7.99992C14.6668 11.6818 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6818 1.3335 7.99992C1.3335 4.31802 4.31826 1.33325 8.00016 1.33325C11.6821 1.33325 14.6668 4.31802 14.6668 7.99992Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_11299_325" }, /* @__PURE__ */ c.createElement("rect", { width: 16, height: 16, fill: "white" })))), $1 = "_root_9hjq2_6", N1 = "_container_9hjq2_14", j1 = "_header_9hjq2_29", S1 = "_title_9hjq2_34", E1 = "_button_9hjq2_38", M1 = "_body_9hjq2_42", L1 = "_footer_9hjq2_53", I1 = "_alert_9hjq2_65", q1 = "_notification_9hjq2_85", B1 = "_success_9hjq2_114", W1 = "_error_9hjq2_124", X1 = "_info_9hjq2_134", Y1 = "_loading_9hjq2_144", R1 = "_icon_9hjq2_153", Z1 = "_rotating_9hjq2_1", d = {
root: $1,
container: N1,
header: j1,
title: S1,
button: E1,
body: M1,
footer: L1,
alert: I1,
notification: q1,
success: B1,
error: W1,
info: X1,
loading: Y1,
icon: R1,
rotating: Z1
}, T1 = {
success: x1,
error: w1,
info: v1,
loading: y1
};
function bt({ alert: e, close: s }) {
const { content: t, options: o, footer: n } = e, { variant: l = "alert", type: a, title: i, style: h, isClosed: C } = o, g = l === "alert" || a === "loading" ? T1[a] : k1;
return /* @__PURE__ */ _("div", { className: m(d.container, d[l], d[a]), style: h, children: [
/* @__PURE__ */ _("header", { className: d.header, children: [
/* @__PURE__ */ r(g, { className: d.icon }),
/* @__PURE__ */ r("h2", { className: d.title, children: i || a }),
C && /* @__PURE__ */ r($, { icon: N, color: "transparent", size: "medium", className: d.button, onClick: s })
] }),
/* @__PURE__ */ r("div", { className: d.body, children: t }),
n && /* @__PURE__ */ r("p", { className: d.footer, children: n })
] });
}
function j(e, s) {
const [t, o] = y();
return I(() => {
const n = document.getElementById(e);
if (n) return o(n);
const l = document.createElement("div");
return l.id = e, document.body.appendChild(l), o(l), () => {
l && document.body.removeChild(l);
};
}, [e]), t ? B(s, t) : null;
}
const V1 = "_container_1hl7v_1", A1 = {
container: V1
};
function P1({ as: e, children: s, className: t, ...o }) {
return /* @__PURE__ */ r(e || "div", { className: m(A1.container, t), ...o, children: s });
}
const O1 = "_overlay_13tex_25", z1 = "_fadeIn_13tex_1", H1 = "_modal_13tex_47", G1 = "_scaleIn_13tex_1", F1 = "_slideIn_13tex_1", D1 = "_header_13tex_84", J1 = "_heading_13tex_89", K1 = "_headingContainer_13tex_100", Q1 = "_body_13tex_107", U1 = "_footer_13tex_108", tt = "_small_13tex_116", et = "_medium_13tex_120", ot = "_large_13tex_124", p = {
overlay: O1,
fadeIn: z1,
modal: H1,
scaleIn: G1,
slideIn: F1,
header: D1,
heading: J1,
headingContainer: K1,
body: Q1,
footer: U1,
small: tt,
medium: et,
large: ot
}, gt = ({ heading: e, close: s, children: t, className: o, headerAddon: n, footer: l, maxWidth: a = "small" }) => {
const i = ({ target: C, currentTarget: g }) => {
C === g && s();
}, h = !["small", "medium", "large"].includes(a);
return j(
"modal-root",
/* @__PURE__ */ r("div", { className: p.overlay, onClick: i, children: /* @__PURE__ */ _(
"div",
{
className: m(p.modal, !h && p[a]),
style: h ? { maxWidth: a } : void 0,
children: [
/* @__PURE__ */ _("header", { className: p.header, children: [
/* @__PURE__ */ _("div", { className: p.headingContainer, children: [
/* @__PURE__ */ r("h3", { className: p.heading, children: e }),
n
] }),
/* @__PURE__ */ r($, { icon: N, color: "transparent", size: "medium", onClick: s })
] }),
t && /* @__PURE__ */ r(P1, { className: m(p.body, o), children: t }),
l && /* @__PURE__ */ r("footer", { className: p.footer, children: l })
]
}
) })
);
}, nt = (e, s) => {
const t = e.getBoundingClientRect(), o = 8;
let n = 0, l = 0, a = "";
switch (s) {
case "top-start": {
n = t.top + window.scrollY - o, l = t.left + window.scrollX, a = "translate(0, -100%)";
break;
}
case "top": {
n = t.top + window.scrollY - o, l = t.left + window.scrollX + t.width / 2, a = "translate(-50%, -100%)";
break;
}
case "top-end": {
n = t.top + window.scrollY - o, l = t.right + window.scrollX, a = "translate(-100%, -100%)";
break;
}
case "right-start": {
n = t.top + window.scrollY, l = t.right + window.scrollX + o, a = "translate(0, 0)";
break;
}
case "right": {
n = t.top + window.scrollY + t.height / 2, l = t.right + window.scrollX + o, a = "translate(0, -50%)";
break;
}
case "right-end": {
n = t.bottom + window.scrollY, l = t.right + window.scrollX + o, a = "translate(0, -100%)";
break;
}
case "bottom-start": {
n = t.bottom + window.scrollY + o, l = t.left + window.scrollX, a = "translate(0, 0)";
break;
}
case "bottom": {
n = t.bottom + window.scrollY + o, l = t.left + window.scrollX + t.width / 2, a = "translate(-50%, 0)";
break;
}
case "bottom-end": {
n = t.bottom + window.scrollY + o, l = t.right - window.scrollX, a = "translate(-100%, 0)";
break;
}
case "left-start": {
n = t.top + window.scrollY, l = t.left + window.screenX - o, a = "translate(-100%, 0)";
break;
}
case "left": {
n = t.top + window.scrollY + t.height / 2, l = t.left + window.screenX - o, a = "translate(-100%, -50%)";
break;
}
case "left-end": {
n = t.bottom + window.scrollY, l = t.left + window.screenX - o, a = "translate(-100%, -100%)";
break;
}
}
return { top: n, left: l, transform: a };
}, lt = "_tooltip_1fvg5_17", st = "_fadeIn_1fvg5_1", at = "_scaleIn_1fvg5_1", rt = {
tooltip: lt,
fadeIn: st,
scaleIn: at
};
function ct({ value: e, style: s }) {
return j(
"tooltip-root",
/* @__PURE__ */ r("div", { className: rt.tooltip, style: s, children: e })
);
}
function ft({ value: e, position: s = "top", children: t }) {
const [o, n] = y();
return /* @__PURE__ */ _(M, { children: [
q(t, {
onMouseOver: (a) => {
const i = a.currentTarget;
i && n(nt(i, s));
},
onMouseLeave: () => n(void 0)
}),
o && /* @__PURE__ */ r(ct, { value: e, style: o })
] });
}
export {
bt as Alert,
$ as Button,
ut as Checkbox,
mt as Input,
w as LabelContainer,
gt as Modal,
pt as Radio,
P1 as ScrollArea,
Ct as Select,
ht as Textarea,
ft as Tooltip,
d as alertStyles,
u as buttonStyles,
f as checkboxStyles,
v as inputStyles,
b as labelContainerStyles,
p as modalStyles,
x as radioStyles,
A1 as scrollAreaStyles,
_1 as selectStyles,
c1 as textareaStyles,
rt as tooltipStyles
};