welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
246 lines (245 loc) • 8.47 kB
JavaScript
"use client";
import './Modal.css';
import { jsx as t, jsxs as _ } from "react/jsx-runtime";
import { b as K } from "./Q5W46E73-5xQblshY.js";
import { D as L, u as Q } from "./Z32PU2LQ-DMjfxuT9.js";
import { forwardRef as c, isValidElement as U, cloneElement as X, useState as Y, useEffect as Z } from "react";
import { Window as i } from "./Window.js";
import { c as r } from "./index-B6iGEm-i.js";
import { f as N } from "./forwardRefWithAs-8eP3ZN15.js";
import { D as $ } from "./OCCHVUS4-BJVLPRH8.js";
import { Icon as k } from "./Icon.js";
import { Text as b } from "./Text.js";
import { Checkbox as ee } from "./Checkbox.js";
import { Field as oe } from "./Field.js";
import { D as se } from "./APVORPDK-i7Z_eBMP.js";
const te = "_root_1sqpb_3", ae = "_hideOnInteractOutside_1sqpb_19", re = "_dialog_1sqpb_130", d = {
root: te,
"asset-backdrop": "_asset-backdrop_1sqpb_8",
hideOnInteractOutside: ae,
"iframe-wrapper": "_iframe-wrapper_1sqpb_25",
"asset-wrapper": "_asset-wrapper_1sqpb_48",
"asset-title-wrapper": "_asset-title-wrapper_1sqpb_56",
"asset-title": "_asset-title_1sqpb_56",
"asset-content": "_asset-content_1sqpb_97",
dialog: re,
"close-button": "_close-button_1sqpb_172"
}, ne = r(d), O = ({ children: e, ...o }) => /* @__PURE__ */ t(i.Header.CloseButton, { className: ne("close-button"), ...o, children: e });
O.displayName = "AssetModal.Close";
const le = r(d), B = c(
({ hideOnInteractOutside: e, ...o }, s) => /* @__PURE__ */ t(
"div",
{
className: le("asset-backdrop", e && "hideOnInteractOutside"),
...o,
ref: s,
children: /* @__PURE__ */ t(
$,
{
render: /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(k, { name: "times" }) })
}
)
}
)
);
B.displayName = "AssetModal.Backdrop";
const ie = r(d), A = ({
children: e,
className: o,
...s
}) => /* @__PURE__ */ t("div", { className: ie("root", "asset-content", o), ...s, children: e });
A.displayName = "AssetModal.Content";
const ce = r(d), w = ({ children: e, ...o }) => /* @__PURE__ */ t(b, { as: "p", className: ce("asset-title"), lines: 2, variant: "heading-md-strong", ...o, children: e });
w.displayName = "AssetModal.Title";
const M = r(d), C = c(
({ children: e, customContent: o, subtitle: s, title: a, ...n }, l) => /* @__PURE__ */ _("div", { className: M("root", "asset-wrapper"), ref: l, ...n, children: [
e,
/* @__PURE__ */ _("div", { className: M("root", "asset-title-wrapper"), children: [
o,
!o && s ? /* @__PURE__ */ t(b, { variant: "label-md", children: s }) : null,
!o && a ? /* @__PURE__ */ t(w, { children: a }) : null
] })
] })
);
C.displayName = "AssetModal.AssetWithTitle";
const de = r(d), T = c(
({ children: e, className: o, ...s }, a) => /* @__PURE__ */ t("div", { className: de("root", "dialog", o), ref: a, ...s, children: e })
);
T.displayName = "AssetModal";
const fe = r(d), D = ({ children: e }) => /* @__PURE__ */ t("div", { className: fe("root", "iframe-wrapper"), children: e });
D.displayName = "AssetModal.Iframe";
const _e = Object.assign(T, {
AssetWithTitle: C,
Backdrop: B,
Content: A,
Iframe: D,
Title: w
}), me = "_root_f1ife_4", pe = "_body_f1ife_50", ue = "_header_f1ife_50", be = "_footer_f1ife_53", he = "_scrollable_f1ife_59", Ne = "_content_f1ife_65", ye = "_close_f1ife_65", ge = "_fullscreen_f1ife_68", we = "_backdrop_f1ife_102", xe = "_hideOnInteractOutside_f1ife_113", f = {
root: me,
body: pe,
header: ue,
footer: be,
scrollable: he,
content: Ne,
"with-close-button": "_with-close-button_f1ife_65",
close: ye,
fullscreen: ge,
"window-media": "_window-media_f1ife_80",
"size-lg": "_size-lg_f1ife_90",
"size-md": "_size-md_f1ife_94",
"size-sm": "_size-sm_f1ife_98",
backdrop: we,
hideOnInteractOutside: xe,
"body-header": "_body-header_f1ife_138",
"body-header-subtitle": "_body-header-subtitle_f1ife_144",
"footer-children-wrapper": "_footer-children-wrapper_f1ife_158",
"variant-right": "_variant-right_f1ife_165",
"variant-full": "_variant-full_f1ife_169",
"footer-checkbox": "_footer-checkbox_f1ife_176",
"footer-buttons": "_footer-buttons_f1ife_179"
}, Me = r(f), q = c(
({ backdrop: e, hideOnInteractOutside: o, ...s }, a) => e === !0 ? /* @__PURE__ */ t(
"div",
{
className: Me("backdrop", o && "hideOnInteractOutside"),
ref: a,
...s
}
) : U(e) ? X(e, { ref: a, ...s }) : null
);
q.displayName = "Modal.Backdrop";
const g = r(f), H = N(
({ as: e = "section", children: o, className: s, iconName: a, subtitle: n, title: l, ...m }, y) => {
const p = !!(a || l);
return /* @__PURE__ */ _(e, { className: g("body", s), ref: y, ...m, children: [
p ? /* @__PURE__ */ _("div", { className: g("body-header"), children: [
a ? /* @__PURE__ */ t(k, { name: a, size: "lg" }) : null,
l ? /* @__PURE__ */ t(b, { variant: "heading-md-strong", children: l }) : null
] }) : null,
n ? /* @__PURE__ */ t(b, { className: g("body-header-subtitle"), variant: "body-lg", children: n }) : null,
o
] });
}
);
H.displayName = "Modal.Body";
const v = r(f), I = N(
({ children: e, className: o, withClosingButton: s = !0, ...a }, n) => /* @__PURE__ */ _(
"div",
{
className: v("content", s && "with-close-button", o),
ref: n,
...a,
children: [
s ? /* @__PURE__ */ t($, { render: /* @__PURE__ */ t(i.Header.CloseButton, { className: v("close") }) }) : null,
e
]
}
)
);
I.displayName = "Modal.Content";
const h = r(f), W = ({ children: e, className: o, ...s }) => /* @__PURE__ */ t("div", { className: h("footer-buttons", o), ...s, children: e });
W.displayName = "Modal.Footer.Buttons";
const z = ({
checked: e,
handleCheckbox: o,
label: s = "Don't show this again",
...a
}) => /* @__PURE__ */ t(oe, { className: h("footer-checkbox"), ...a, inline: !0, label: s, children: /* @__PURE__ */ t(ee, { checked: e, onChange: o }) });
z.displayName = "Modal.Footer.Checkbox";
const S = c(
({ children: e, className: o, variant: s = "right", ...a }, n) => /* @__PURE__ */ t("footer", { className: h("footer", o), ref: n, ...a, children: e ? /* @__PURE__ */ t("div", { className: h("footer-children-wrapper", `variant-${s}`), children: e }) : null })
);
S.displayName = "Modal.Footer";
const ve = Object.assign(S, {
Buttons: W,
Checkbox: z
}), $e = r(f), F = c(
({ children: e, className: o, ...s }, a) => /* @__PURE__ */ t(i.Header, { className: $e("header", o), ref: a, ...s, children: e })
);
F.displayName = "Modal.Header";
const j = N(
({ as: e, store: o, ...s }, a) => /* @__PURE__ */ t(
se,
{
ref: a,
render: e ? /* @__PURE__ */ t(e, {}) : void 0,
store: o,
...s
}
)
);
j.displayName = "Modal.Trigger";
const ke = r(f), E = c(({ className: e, ...o }, s) => /* @__PURE__ */ t(i.Media, { className: ke("window-media", e), ref: s, ...o }));
E.displayName = "Modal.WindowMedia";
const Oe = r(f);
function Ee(e) {
const { onClose: o, setOpen: s, ...a } = e || {};
return Q({
setOpen: (l) => {
!l && o && o(), s == null || s(l);
},
...a
});
}
const P = N(
({
ariaLabel: e,
/** for render property */
as: o,
backdrop: s = !0,
children: a,
className: n,
fullscreen: l = !1,
hideOnInteractOutside: m = !0,
size: y = "lg",
store: p,
...R
}, V) => {
const [G, J] = Y(!1), { contentElement: u, open: x } = K(p);
return Z(() => {
x && u && J(u.scrollHeight > u.offsetHeight);
}, [u, x]), /* @__PURE__ */ t(
L,
{
backdrop: /* @__PURE__ */ t(q, { backdrop: s, hideOnInteractOutside: m }),
hideOnInteractOutside: m,
ref: V,
render: o ? /* @__PURE__ */ t(o, {}) : /* @__PURE__ */ t(
"div",
{
className: Oe(
"root",
`size-${y}`,
G && "scrollable",
l && "fullscreen",
n
)
}
),
store: p,
...R,
"aria-label": e,
children: a
}
);
}
);
P.displayName = "Modal";
const Pe = Object.assign(P, {
Body: H,
Content: I,
Footer: ve,
Header: F,
Trigger: j,
WindowBody: i.Body,
WindowBoxText: i.BoxText,
WindowHeader: i.Header,
WindowMedia: E,
WindowTabPanel: i.TabPanel
}), Re = _e;
export {
Re as AssetModal,
Pe as Modal,
f as modalClasses,
Ee as useModal
};