modern-react-ui-components
Version:
Modern React + TypeScript component library with Toaster, Input, and DatePicker components
503 lines (502 loc) • 16.7 kB
JavaScript
import { jsxs as d, jsx as e } from "react/jsx-runtime";
import A, { forwardRef as J, useState as z, useRef as W, useEffect as P } from "react";
const U = "_toast_1bjuo_1", K = "_slideIn_1bjuo_1", Q = "_content_1bjuo_31", X = "_icon_1bjuo_45", ee = "_messageContainer_1bjuo_59", te = "_message_1bjuo_59", ne = "_subtitle_1bjuo_89", oe = "_dismissButton_1bjuo_105", ae = "_success_1bjuo_153", se = "_failed_1bjuo_161", le = "_info_1bjuo_169", ce = "_attention_1bjuo_177", re = "_exiting_1bjuo_231", ie = "_slideOut_1bjuo_1", M = {
toast: U,
slideIn: K,
content: Q,
icon: X,
messageContainer: ee,
message: te,
subtitle: ne,
dismissButton: oe,
success: ae,
failed: se,
info: le,
attention: ce,
exiting: re,
slideOut: ie
}, de = ({ type: h }) => /* @__PURE__ */ e(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
height: "24px",
viewBox: "0 -960 960 960",
width: "24px",
fill: "#003134",
className: M.icon,
children: /* @__PURE__ */ e("path", { d: "M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" })
}
), _e = ({ onClick: h }) => /* @__PURE__ */ e(
"button",
{
className: M.dismissButton,
onClick: h,
"aria-label": "Dismiss notification",
type: "button",
children: /* @__PURE__ */ e(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
height: "20px",
viewBox: "0 -960 960 960",
width: "20px",
fill: "#003134",
children: /* @__PURE__ */ e("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
}
)
}
), ue = ({
type: h,
message: N,
subtitle: w,
onDismiss: c,
autoHide: _ = !0,
autoHideDelay: x = 5e3,
className: b
}) => {
A.useEffect(() => {
if (_ && c) {
const C = setTimeout(c, x);
return () => clearTimeout(C);
}
}, [_, x, c]);
const f = `${M.toast} ${M[h]} ${b || ""}`;
return /* @__PURE__ */ d("div", { className: f, role: "alert", "aria-live": "polite", children: [
/* @__PURE__ */ d("div", { className: M.content, children: [
/* @__PURE__ */ e(de, { type: h }),
/* @__PURE__ */ d("div", { className: M.messageContainer, children: [
/* @__PURE__ */ e("div", { className: M.message, children: N }),
w && /* @__PURE__ */ e("div", { className: M.subtitle, children: w })
] })
] }),
c && /* @__PURE__ */ e(_e, { onClick: c })
] });
}, he = "_container_n390d_1", me = "_toastWrapper_n390d_19", ge = "_top-right_n390d_33", be = "_top-left_n390d_43", ve = "_bottom-right_n390d_53", fe = "_bottom-left_n390d_65", Ce = "_topCenter_n390d_77", pe = "_bottomCenter_n390d_89", we = "_toast_n390d_19", I = {
container: he,
toastWrapper: me,
"top-right": "_top-right_n390d_33",
topRight: ge,
"top-left": "_top-left_n390d_43",
topLeft: be,
"bottom-right": "_bottom-right_n390d_53",
bottomRight: ve,
"bottom-left": "_bottom-left_n390d_65",
bottomLeft: fe,
topCenter: Ce,
bottomCenter: pe,
toast: we
}, Ct = ({
toasts: h,
onDismiss: N,
position: w = "top-right"
}) => /* @__PURE__ */ e("div", { className: `${I.container} ${I[w]}`, children: h.map((c, _) => /* @__PURE__ */ e(
"div",
{
className: I.toastWrapper,
style: {
"--index": _,
zIndex: 1e3 - _
},
children: /* @__PURE__ */ e(
ue,
{
...c,
onDismiss: () => N(c.id),
className: I.toast
}
)
},
c.id
)) }), xe = "_container_bl000_1", ye = "_fullWidth_bl000_15", Me = "_label_bl000_23", Ne = "_labelDisabled_bl000_39", De = "_required_bl000_47", $e = "_input_bl000_59", Te = "_small_bl000_91", Ye = "_medium_bl000_105", ze = "_large_bl000_119", Fe = "_hover_bl000_143", ke = "_focus_bl000_151", Be = "_active_bl000_159", He = "_error_bl000_167", Se = "_disabled_bl000_175", je = "_helperText_bl000_199", qe = "_helperTextDisabled_bl000_215", Ie = "_errorText_bl000_223", m = {
container: xe,
fullWidth: ye,
label: Me,
labelDisabled: Ne,
required: De,
input: $e,
small: Te,
medium: Ye,
large: ze,
default: "_default_bl000_135",
hover: Fe,
focus: ke,
active: Be,
error: He,
disabled: Se,
helperText: je,
helperTextDisabled: qe,
errorText: Ie
}, Ve = J(({
// Core input props
value: h,
onChange: N,
placeholder: w,
type: c = "text",
// UI props
label: _,
helperText: x,
errorText: b,
// State props
required: f = !1,
disabled: C = !1,
// Layout props
size: l = "medium",
state: D,
fullWidth: v = !1,
className: $,
id: a,
...r
}, F) => {
const [V, H] = z(!1), [O, k] = z(!1), T = a || `input-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, S = `${T}-helper`, j = `${T}-error`, B = D || (C ? "disabled" : b ? "error" : V ? "focus" : O ? "hover" : "default"), G = [
m.input,
m[l],
m[B],
v && m.fullWidth,
$
].filter(Boolean).join(" "), L = [
m.container,
v && m.fullWidth
].filter(Boolean).join(" ");
return /* @__PURE__ */ d("div", { className: L, children: [
_ && /* @__PURE__ */ d(
"label",
{
htmlFor: T,
className: `${m.label} ${B === "disabled" ? m.labelDisabled : ""}`,
children: [
_,
f && /* @__PURE__ */ e("span", { className: m.required, "aria-label": "required", children: " *" })
]
}
),
/* @__PURE__ */ e(
"input",
{
ref: F,
id: T,
className: G,
type: c,
value: h,
onChange: N,
placeholder: w,
required: f,
disabled: C,
onFocus: (p) => {
var u;
H(!0), (u = r.onFocus) == null || u.call(r, p);
},
onBlur: (p) => {
var u;
H(!1), (u = r.onBlur) == null || u.call(r, p);
},
onMouseEnter: (p) => {
var u;
C || k(!0), (u = r.onMouseEnter) == null || u.call(r, p);
},
onMouseLeave: (p) => {
var u;
k(!1), (u = r.onMouseLeave) == null || u.call(r, p);
},
"aria-describedby": [
x && S,
b && j
].filter(Boolean).join(" ") || void 0,
"aria-invalid": !!b,
"aria-required": f,
...r
}
),
x && !b && /* @__PURE__ */ e(
"span",
{
id: S,
className: `${m.helperText} ${B === "disabled" ? m.helperTextDisabled : ""}`,
children: x
}
),
b && /* @__PURE__ */ e(
"span",
{
id: j,
className: m.errorText,
role: "alert",
children: b
}
)
] });
});
Ve.displayName = "Input";
const Oe = "_container_xc1gz_1", Ge = "_label_xc1gz_19", Le = "_inputContainer_xc1gz_35", Re = "_input_xc1gz_35", Ze = "_disabled_xc1gz_97", We = "_calendarIcon_xc1gz_111", Ee = "_dropdown_xc1gz_163", Ae = "_header_xc1gz_193", Je = "_navButton_xc1gz_211", Pe = "_navButtons_xc1gz_247", Ue = "_headerTitle_xc1gz_257", Ke = "_headerText_xc1gz_307", Qe = "_chevron_xc1gz_317", Xe = "_chevronOpen_xc1gz_329", et = "_content_xc1gz_349", tt = "_calendarGrid_xc1gz_359", nt = "_weekHeader_xc1gz_371", ot = "_weekDay_xc1gz_385", at = "_daysGrid_xc1gz_403", st = "_dayCell_xc1gz_415", lt = "_otherMonth_xc1gz_457", ct = "_currentMonth_xc1gz_465", rt = "_selected_xc1gz_473", it = "_today_xc1gz_485", dt = "_monthGrid_xc1gz_507", _t = "_monthCell_xc1gz_519", ut = "_yearGrid_xc1gz_573", ht = "_yearCell_xc1gz_585", n = {
container: Oe,
label: Ge,
inputContainer: Le,
input: Re,
disabled: Ze,
calendarIcon: We,
dropdown: Ee,
header: Ae,
navButton: Je,
navButtons: Pe,
headerTitle: Ue,
headerText: Ke,
chevron: Qe,
chevronOpen: Xe,
content: et,
calendarGrid: tt,
weekHeader: nt,
weekDay: ot,
daysGrid: at,
dayCell: st,
otherMonth: lt,
currentMonth: ct,
selected: rt,
today: it,
monthGrid: dt,
monthCell: _t,
yearGrid: ut,
yearCell: ht
}, mt = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
], gt = [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
], bt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], pt = ({
label: h,
placeholder: N = "Placeholder",
value: w,
onChange: c,
disabled: _ = !1,
required: x = !1,
className: b
// format = 'MM/DD/YYYY' // Reserved for future use
}) => {
const [f, C] = z(!1), [l, D] = z(/* @__PURE__ */ new Date()), [v, $] = z("day"), [a, r] = z(w || null), F = W(null), V = W(null);
P(() => {
const o = (t) => {
F.current && !F.current.contains(t.target) && C(!1);
};
return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
}, []);
const H = (o) => {
if (!o) return "";
const t = String(o.getMonth() + 1).padStart(2, "0"), y = String(o.getDate()).padStart(2, "0"), g = o.getFullYear();
return `${t}/${y}/${g}`;
}, O = (o) => {
r(o), c == null || c(o), C(!1);
}, k = () => {
_ || C(!f);
}, T = (o) => {
const t = new Date(l);
o === "prev" ? t.setMonth(t.getMonth() - 1) : t.setMonth(t.getMonth() + 1), D(t);
}, S = (o) => {
const t = new Date(l);
o === "prev" ? t.setFullYear(t.getFullYear() - 1) : t.setFullYear(t.getFullYear() + 1), D(t);
}, j = (o) => {
const t = new Date(l);
o === "prev" ? t.setFullYear(t.getFullYear() - 12) : t.setFullYear(t.getFullYear() + 12), D(t);
}, B = () => {
const o = new Date(l.getFullYear(), l.getMonth(), 1), t = new Date(o);
t.setDate(t.getDate() - o.getDay());
const y = [], g = /* @__PURE__ */ new Date();
for (let i = 0; i < 42; i++) {
const s = new Date(t);
s.setDate(t.getDate() + i);
const Y = s.getMonth() === l.getMonth(), q = a && s.getDate() === a.getDate() && s.getMonth() === a.getMonth() && s.getFullYear() === a.getFullYear(), E = s.getDate() === g.getDate() && s.getMonth() === g.getMonth() && s.getFullYear() === g.getFullYear();
y.push(
/* @__PURE__ */ e(
"button",
{
className: `${n.dayCell} ${Y ? n.currentMonth : n.otherMonth} ${q ? n.selected : ""} ${E ? n.today : ""}`,
onClick: () => O(s),
children: s.getDate()
},
i
)
);
}
return /* @__PURE__ */ d("div", { className: n.calendarGrid, children: [
/* @__PURE__ */ e("div", { className: n.weekHeader, children: bt.map((i) => /* @__PURE__ */ e("div", { className: n.weekDay, children: i }, i)) }),
/* @__PURE__ */ e("div", { className: n.daysGrid, children: y })
] });
}, G = () => {
const o = l.getFullYear(), t = a == null ? void 0 : a.getMonth(), y = a == null ? void 0 : a.getFullYear();
return /* @__PURE__ */ e("div", { className: n.monthGrid, children: gt.map((g, i) => {
const s = y === o && t === i;
return /* @__PURE__ */ e(
"button",
{
className: `${n.monthCell} ${s ? n.selected : ""}`,
onClick: () => {
const Y = new Date(l);
Y.setMonth(i), D(Y), $("day");
},
children: g
},
g
);
}) });
}, L = () => {
const o = l.getFullYear(), t = Math.floor(o / 12) * 12, y = a == null ? void 0 : a.getFullYear(), g = [];
for (let i = 0; i < 12; i++) {
const s = t + i, Y = y === s;
g.push(
/* @__PURE__ */ e(
"button",
{
className: `${n.yearCell} ${Y ? n.selected : ""}`,
onClick: () => {
const q = new Date(l);
q.setFullYear(s), D(q), $("month");
},
children: s
},
s
)
);
}
return /* @__PURE__ */ e("div", { className: n.yearGrid, children: g });
}, p = () => {
switch (v) {
case "day":
return `${mt[l.getMonth()]} ${l.getFullYear()}`;
case "month":
return l.getFullYear().toString();
case "year":
const o = l.getFullYear(), t = Math.floor(o / 12) * 12;
return `${t} - ${t + 11}`;
default:
return "";
}
}, u = () => {
v === "day" ? $("month") : v === "month" && $("year");
}, R = (o) => {
switch (v) {
case "day":
T(o);
break;
case "month":
S(o);
break;
case "year":
j(o);
break;
}
}, Z = `datepicker-${Date.now()}`;
return /* @__PURE__ */ d("div", { ref: F, className: `${n.container} ${b || ""}`, children: [
h && /* @__PURE__ */ d("label", { htmlFor: Z, className: n.label, children: [
h,
x && "*"
] }),
/* @__PURE__ */ d("div", { className: n.inputContainer, children: [
/* @__PURE__ */ e(
"input",
{
ref: V,
id: Z,
type: "text",
className: `${n.input} ${_ ? n.disabled : ""}`,
placeholder: N,
value: a ? H(a) : "",
onClick: k,
readOnly: !0,
disabled: _
}
),
/* @__PURE__ */ e(
"button",
{
type: "button",
className: n.calendarIcon,
onClick: k,
disabled: _,
"aria-label": "Open calendar",
children: /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 16C7 15.45 7.45 15 8 15C8.55 15 9 15.45 9 16C9 16.55 8.55 17 8 17C7.45 17 7 16.55 7 16ZM12 15H16C16.55 15 17 15.45 17 16C17 16.55 16.55 17 16 17H12C11.45 17 11 16.55 11 16C11 15.45 11.45 15 12 15ZM18 20H6C5.449 20 5 19.551 5 19V13H19V19C19 19.551 18.551 20 18 20ZM6 6H7V7C7 7.55 7.45 8 8 8C8.55 8 9 7.55 9 7V6H15V7C15 7.55 15.45 8 16 8C16.55 8 17 7.55 17 7V6H18C18.551 6 19 6.449 19 7V11H5V7C5 6.449 5.449 6 6 6ZM18 4H17V3C17 2.45 16.55 2 16 2C15.45 2 15 2.45 15 3V4H9V3C9 2.45 8.55 2 8 2C7.45 2 7 2.45 7 3V4H6C4.346 4 3 5.346 3 7V19C3 20.654 4.346 22 6 22H18C19.654 22 21 20.654 21 19V7C21 5.346 19.654 4 18 4Z", fill: "#003134" }) })
}
)
] }),
f && /* @__PURE__ */ d("div", { className: n.dropdown, children: [
/* @__PURE__ */ d("div", { className: n.header, children: [
/* @__PURE__ */ d(
"button",
{
className: n.headerTitle,
onClick: u,
children: [
/* @__PURE__ */ e("span", { className: n.headerText, children: p() }),
/* @__PURE__ */ e(
"svg",
{
className: `${n.chevron} ${f ? n.chevronOpen : ""}`,
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
children: /* @__PURE__ */ e(
"path",
{
d: "M18 9L12 15L6 9",
stroke: "#003134",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
}
)
]
}
),
/* @__PURE__ */ d("div", { className: n.navButtons, children: [
/* @__PURE__ */ e(
"button",
{
className: n.navButton,
onClick: () => R("prev"),
children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
}
),
/* @__PURE__ */ e(
"button",
{
className: n.navButton,
onClick: () => R("next"),
children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
}
)
] })
] }),
/* @__PURE__ */ d("div", { className: n.content, children: [
v === "day" && B(),
v === "month" && G(),
v === "year" && L()
] })
] })
] });
};
export {
pt as DatePicker,
Ve as Input,
Ct as ToastContainer,
ue as Toaster
};