welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
176 lines (175 loc) • 6.87 kB
JavaScript
"use client";
import { jsx as s, jsxs as d } from "react/jsx-runtime";
import { u as C } from "./RTNCFSKZ-P4icqVD0.js";
import { D as I, u as y } from "./NI3IVY7K-DxnarnKs.js";
import { forwardRef as i, isValidElement as B, cloneElement as S, useState as A, useEffect as T } from "react";
import { c as n } from "./index-PAaZGbyz.js";
import { f as z } from "./forwardRefWithAs-8eP3ZN15.js";
import { D as v } from "./DSAASPLT-COUlh0RL.js";
import "./Icon-BisRi8B3.js";
import { C as j } from "./index-BJLXLdM3.js";
import { Button as E } from "./Button.js";
import { Text as m } from "./Text.js";
import { CloseButton as M } from "./CloseButton.js";
import { D as H } from "./ZTXFEM5L-BEA_1pIo.js";
const R = "_root_1vbnu_3", W = "_hideOnInteractOutside_1vbnu_19", F = "_dialog_1vbnu_117", l = {
root: R,
"asset-backdrop": "_asset-backdrop_1vbnu_8",
hideOnInteractOutside: W,
"iframe-wrapper": "_iframe-wrapper_1vbnu_25",
"asset-wrapper": "_asset-wrapper_1vbnu_48",
"asset-title-wrapper": "_asset-title-wrapper_1vbnu_56",
"asset-title": "_asset-title_1vbnu_56",
"asset-content": "_asset-content_1vbnu_96",
dialog: F,
"close-button": "_close-button_1vbnu_159"
}, V = n(l), q = ({ children: t, ...e }) => /* @__PURE__ */ s(E, { className: V("close-button"), shape: "circle", variant: "secondary", ...e, children: t }), G = n(l), J = i(
({ hideOnInteractOutside: t, ...e }, o) => /* @__PURE__ */ s(
"div",
{
className: G("asset-backdrop", t && "hideOnInteractOutside"),
...e,
ref: o,
children: /* @__PURE__ */ s(
v,
{
render: /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(j, {}) })
}
)
}
)
), K = n(l), L = ({
children: t,
className: e,
...o
}) => /* @__PURE__ */ s("div", { className: K("root", "asset-content", e), ...o, children: t }), P = n(l), N = ({ children: t, className: e, ...o }) => /* @__PURE__ */ s(m, { as: "p", className: P("asset-title", e), lines: 2, variant: "h4", ...o, children: t }), g = n(l), Q = i(
({ children: t, customContent: e, subtitle: o, title: r, ...a }, c) => /* @__PURE__ */ d("div", { className: g("root", "asset-wrapper"), ref: c, ...a, children: [
t,
/* @__PURE__ */ d("div", { className: g("root", "asset-title-wrapper"), children: [
e,
!e && o ? /* @__PURE__ */ s(m, { variant: "subtitle-sm", children: o }) : null,
!e && r ? /* @__PURE__ */ s(N, { children: r }) : null
] })
] })
), U = n(l), X = ({
children: t,
...e
}) => /* @__PURE__ */ s("div", { className: U("root", "dialog"), ...e, children: t }), Y = n(l), Z = ({ children: t }) => /* @__PURE__ */ s("div", { className: Y("root", "iframe-wrapper"), children: t }), tt = Object.assign(X, {
AssetWithTitle: Q,
Backdrop: J,
Content: L,
Iframe: Z,
Title: N
}), et = "_root_4g0z0_4", ot = "_body_4g0z0_48", st = "_footer_4g0z0_48", rt = "_header_4g0z0_48", nt = "_scrollable_4g0z0_60", at = "_content_4g0z0_66", ct = "_close_4g0z0_66", it = "_backdrop_4g0z0_85", lt = "_hideOnInteractOutside_4g0z0_96", _t = "_icon_4g0z0_127", _ = {
root: et,
body: ot,
footer: st,
header: rt,
scrollable: nt,
content: at,
"with-close-button": "_with-close-button_4g0z0_66",
close: ct,
"size-lg": "_size-lg_4g0z0_69",
"size-md": "_size-md_4g0z0_73",
"size-sm": "_size-sm_4g0z0_77",
"size-xs": "_size-xs_4g0z0_81",
backdrop: it,
hideOnInteractOutside: lt,
"header-subtitle": "_header-subtitle_4g0z0_124",
"header-title": "_header-title_4g0z0_124",
icon: _t,
"footer-children-wrapper": "_footer-children-wrapper_4g0z0_158",
"footer-information": "_footer-information_4g0z0_163",
"footer-information-title": "_footer-information-title_4g0z0_170",
"footer-information-subtitle": "_footer-information-subtitle_4g0z0_174"
}, dt = n(_), mt = i(
({ backdrop: t, hideOnInteractOutside: e, ...o }, r) => t === !0 ? /* @__PURE__ */ s(
"div",
{
className: dt("backdrop", e && "hideOnInteractOutside"),
ref: r,
...o
}
) : B(t) ? S(t, { ref: r, ...o }) : null
), ut = n(_), ft = i(({ className: t, ...e }, o) => /* @__PURE__ */ s("section", { className: ut("body", t), ref: o, ...e })), pt = n(_), x = (t) => /* @__PURE__ */ s(v, { render: /* @__PURE__ */ s(M, { className: pt("close"), ...t }) }), ht = n(_), bt = i(
({ children: t, className: e, withClosingButton: o = !0, ...r }, a) => /* @__PURE__ */ d(
"div",
{
className: ht("content", o && "with-close-button", e),
ref: a,
...r,
children: [
/* @__PURE__ */ s(x, {}),
t
]
}
)
), u = n(_), gt = i(
({ children: t, className: e, information: o, ...r }, a) => /* @__PURE__ */ d("footer", { className: u("footer", e), ref: a, ...r, children: [
t ? /* @__PURE__ */ s("div", { className: u("footer-children-wrapper"), children: t }) : null,
o ? /* @__PURE__ */ d("div", { className: u("footer-information"), children: [
/* @__PURE__ */ s(m, { className: u("footer-information-title"), variant: "subtitle-sm", children: o.title }),
/* @__PURE__ */ s(m, { className: u("footer-information-subtitle"), variant: "sm", children: o.subtitle })
] }) : null
] })
), p = n(_), zt = i(
({ className: t, icon: e, subtitle: o, title: r, ...a }, c) => /* @__PURE__ */ d("header", { className: p("header", e && "icon", t), ref: c, ...a, children: [
/* @__PURE__ */ s(x, {}),
e,
/* @__PURE__ */ s(m, { className: p("header-title"), variant: "h4", children: r }),
o ? /* @__PURE__ */ s(m, { className: p("header-subtitle"), children: o }) : null
] })
), vt = z(
({ as: t, store: e, ...o }, r) => /* @__PURE__ */ s(H, { ref: r, render: t ? /* @__PURE__ */ s(t, {}) : void 0, store: e, ...o })
), Nt = n(_);
function Et(t) {
const { onClose: e, setOpen: o, ...r } = t || {};
return y({
setOpen: (c) => {
!c && e && e(), o == null || o(c);
},
...r
});
}
const xt = z(
({
ariaLabel: t,
/** for render property */
as: e,
backdrop: o = !0,
children: r,
className: a,
hideOnInteractOutside: c = !0,
size: $ = "lg",
store: h,
...w
}, O) => {
const [D, k] = A(!1), { contentElement: f, open: b } = C(h);
return T(() => {
b && f && k(f.scrollHeight > f.offsetHeight);
}, [f, b]), /* @__PURE__ */ s(
I,
{
backdrop: /* @__PURE__ */ s(mt, { backdrop: o, hideOnInteractOutside: c }),
hideOnInteractOutside: c,
ref: O,
render: e ? /* @__PURE__ */ s(e, {}) : /* @__PURE__ */ s("div", { className: Nt("root", `size-${$}`, D && "scrollable", a) }),
store: h,
...w,
"aria-label": t,
children: r
}
);
}
), Mt = Object.assign(xt, {
Body: ft,
Content: bt,
Footer: gt,
Header: zt,
Trigger: vt
}), Ht = tt;
export {
Ht as AssetModal,
Mt as Modal,
Et as useModal
};