welcome-ui/dist/Modal.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as o } from "./jsx-runtime-Bqq1Hxg9.mjs";
import i, { css as x, th as a, up as G, system as J, useTheme as w } from "@xstyled/styled-components";
import K, { useState as L, useMemo as Q, Children as D, useEffect as U, cloneElement as F } from "react";
import { Shape as X } from "./Shape.mjs";
import { forwardRef as c } from "./System.mjs";
import { Box as $ } from "./Box.mjs";
import { Text as p } from "./Text.mjs";
import { StyledSwiper as Y } from "./Swiper.mjs";
import { Button as Z } from "./Button.mjs";
import { IconsFont as tt } from "./IconsFont.mjs";
import { D as H } from "./SYRFVSLH-DPBHrVeS.mjs";
import { CloseButton as et } from "./CloseButton.mjs";
import { D as ot, u as nt } from "./JC64G2H7-ifBZq_RU.mjs";
import { D as rt } from "./AXB53BZF-BU4qmiUA.mjs";
const S = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", E = "calc(100vh - 2 * 5rem);", M = x`
  width: ${W};
  max-height: ${E};

  @media (min-width: md) {
    width: ${S};
  }

  /* for big screens */
  @media (min-width: 1700px) {
    max-width: 1600;
  }
`, N = i.div`
  ${M};
  flex: 1;

  @media (min-width: md) {
    aspect-ratio: 16 / 9;
  }

  iframe {
    width: 100%;
    height: 100%;
  }
`, j = i.divBox`
  transition: margin-top 250ms ease-in-out;

  > img,
  > div {
    max-width: ${W};
    max-height: ${E};

    @media (min-width: md) {
      max-width: ${S};
    }

    /* for big screens */
    @media (min-width: 1700px) {
      max-width: 1600;
    }
  }
`, st = i.div`
  ${a("modals.default")};
  position: fixed;
  inset: 0;
  margin: auto;
  display: flex;
  height: fit-content;
  width: fit-content;
  flex-direction: column;
  opacity: 0;
  transition: opacity 250ms ease-in-out;

  &:has(${Y}) {
    ${M};
  }

  ${j} {
    margin-top: xl;
  }

  &[data-enter] {
    opacity: 1;

    ${j} {
      margin-top: 0;
    }
  }
`, T = i(p).attrs({ lines: 2, variant: "h4" })`
  margin: 0;
`, b = "4rem", v = "6rem", it = i.divBox`
  display: flex;
  flex-direction: column;
  border-radius: xxl;
  overflow: hidden;

  > img {
    width: auto;
    max-width: fit-content;
    max-height: calc(100vh - 2 * 5rem - ${b});
    flex-shrink: 0;

    @media (min-width: md) {
      max-height: calc(100vh - 2 * 5rem - ${v});
    }
  }

  ${N} {
    background-color: neutral-90;
    max-height: calc(100vh - 2 * 5rem - ${b});

    @media (min-width: md) {
      max-height: calc(100vh - 2 * 5rem - ${v});
    }
  }
`, at = c(
  ({ children: t, customContent: e, subtitle: n, title: r }, l) => /* @__PURE__ */ o.jsxs(it, { ref: l, children: [
    t,
    /* @__PURE__ */ o.jsxs(
      $,
      {
        backgroundColor: "neutral-10",
        display: "flex",
        flexDirection: "column",
        flexShrink: 0,
        gap: "xxs",
        h: { _: b, md: v },
        justifyContent: "center",
        px: { _: "md", md: "xl" },
        w: "100%",
        children: [
          e,
          !e && n ? /* @__PURE__ */ o.jsx(p, { variant: "subtitle-sm", children: n }) : null,
          !e && r ? /* @__PURE__ */ o.jsx(T, { children: r }) : null
        ]
      }
    )
  ] })
), z = i.divBox.withConfig({
  shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
})(
  ({ hideOnInteractOutside: t }) => x`
    ${a("modals.backdrop")};
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 150ms ease-in-out;

    ${t && x`
      cursor: pointer;
    `}

    &[data-enter] {
      opacity: 1;
    }
  `
), lt = i.divBox(
  ({ size: t }) => x`
    ${a("cards.default")};
    ${a("modals.default")};
    position: fixed;
    inset: 0;
    margin: auto;
    margin-top: xl;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    display: flex;
    flex-direction: column;
    align-self: center;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
    opacity: 0;
    transition:
      opacity 250ms ease-in-out,
      margin-top 250ms ease-in-out;

    &[data-enter] {
      opacity: 1;
      margin-top: 0;
    }

    ${G(
    "md",
    x`
        height: fit-content;
        max-height: calc(100vh - ${a("space.xl")} * 2);
        ${a(`modals.sizes.${t}`)};
      `
  )}
  `
), dt = i.sectionBox`
  ${a("modals.body")};
`, ct = i.headerBox`
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 1;
  ${a("modals.header")};
`, mt = i(p)`
  ${a(".modals.header.subtitle")};
  margin-bottom: 0;
`, ut = i.footerBox`
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  z-index: 1;
  ${a("modals.footer")};
`, pt = i($)`
  ${a("modals.footer.children")};
`, xt = i.divBox`
  ${a("modals.footer.information")};
`, ht = i(Z)`
  position: absolute;
  right: xl;
  top: xl;

  /* Hack for secondary variant on dark mode */
  color: neutral-90;
  border-color: neutral-10;
  background-color: neutral-10;

  &:hover {
    background-color: neutral-40;
  }

  ${J}
`, I = c(
  ({ hideOnInteractOutside: t, ...e }, n) => /* @__PURE__ */ o.jsx(
    z,
    {
      backgroundColor: "rgba(0, 0, 0, 0.9)",
      hideOnInteractOutside: t,
      ...e,
      ref: n,
      children: /* @__PURE__ */ o.jsx(
        H,
        {
          render: /* @__PURE__ */ o.jsx(ht, { shape: "circle", variant: "secondary", children: /* @__PURE__ */ o.jsx(tt.Cross, {}) })
        }
      )
    }
  )
);
I.displayName = "Backdrop";
const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(N, { children: /* @__PURE__ */ o.jsx($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 }, children: t }) }), gt = Object.assign(st, {
  AssetWithTitle: at,
  Backdrop: I,
  Content: j,
  Iframe: ft,
  Title: T
}), R = ({ isOnHeader: t, ...e }) => {
  const n = w();
  return /* @__PURE__ */ o.jsx(
    H,
    {
      render: /* @__PURE__ */ o.jsx(
        et,
        {
          left: t ? void 0 : `calc(100% - ${n.space.lg} - ${n.buttons.sizes.sm.height})`,
          position: t ? "absolute" : "sticky",
          right: t ? "lg" : void 0,
          top: "lg",
          zIndex: "1",
          ...e
        }
      )
    }
  );
}, _ = c(
  ({ children: t, store: e, withClosingButton: n = !0, ...r }, l) => {
    const { borderWidths: u, space: m } = w(), [y, h] = L(!1), f = e.useState("contentElement"), B = e.useState("open"), d = Q(
      () => D.map(t, (s) => {
        if (K.isValidElement(s)) {
          const g = s.type;
          return g.displayName ?? g.name ?? "";
        }
        return "";
      }),
      [t]
    ), V = !d.includes("Header") && n, q = (s) => s === "Header" ? {
      // if the Modal have a Body but not a Footer || have a Footer but not a Body
      pb: d.includes("Body") && !d.includes("Footer") || d.includes("Footer") && !d.includes("Body") ? m.lg : m.xxl
    } : s === "Body" ? {
      pb: d.includes("Footer") ? m.lg : null,
      pr: d.includes("Header") ? m.xxl : null
    } : s === "Footer" ? {
      borderWidth: y ? u.sm : "0",
      pt: d.includes("Header") || d.includes("Body") ? null : m.lg
    } : {};
    return U(() => {
      B ? f && h(f.scrollHeight > f.offsetHeight) : h(!1);
    }, [e, B, f]), /* @__PURE__ */ o.jsxs($, { ref: l, ...r, children: [
      V ? /* @__PURE__ */ o.jsx(R, {}) : null,
      D.map(t, (s) => {
        var k, C;
        if (!s) return null;
        const g = ((k = s == null ? void 0 : s.type) == null ? void 0 : k.displayName) || ((C = s == null ? void 0 : s.type) == null ? void 0 : C.name);
        return F(s, {
          ...q(g),
          ...s.props
        });
      })
    ] });
  }
);
_.displayName = "Content";
const A = c(({ children: t, information: e, ...n }, r) => /* @__PURE__ */ o.jsxs(ut, { ref: r, w: "100%", ...n, children: [
  t ? /* @__PURE__ */ o.jsx(pt, { children: t }) : null,
  e ? /* @__PURE__ */ o.jsxs(xt, { children: [
    /* @__PURE__ */ o.jsx(p, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm", children: e.title }),
    /* @__PURE__ */ o.jsx(p, { color: "neutral-90", mb: "0", mt: "md", variant: "sm", children: e.subtitle })
  ] }) : null
] }));
A.displayName = "Footer";
const O = c(({ icon: t, subtitle: e, title: n, ...r }, l) => /* @__PURE__ */ o.jsxs(ct, { ref: l, textAlign: t ? "center" : null, w: "100%", ...r, children: [
  /* @__PURE__ */ o.jsx(R, { isOnHeader: !0 }),
  t,
  /* @__PURE__ */ o.jsx(p, { mb: e ? "lg" : 0, mt: t ? "xl" : 0, variant: "h4", children: n }),
  e ? /* @__PURE__ */ o.jsx(mt, { children: e }) : null
] }));
O.displayName = "Header";
function zt(t) {
  const { onClose: e, setOpen: n, ...r } = t || {};
  return nt({
    animated: !0,
    setOpen: (u) => {
      !u && e && e(), n == null || n(u);
    },
    ...r
  });
}
const $t = c(
  ({ backdrop: t, hideOnInteractOutside: e, ...n }, r) => t === !0 ? /* @__PURE__ */ o.jsx(z, { hideOnInteractOutside: e, ref: r, ...n }) : F(t, { hideOnInteractOutside: e, ref: r, ...n })
), yt = c(
  ({
    ariaLabel: t,
    /** for render property */
    as: e = lt,
    backdrop: n = !0,
    children: r,
    hideOnInteractOutside: l = !0,
    size: u = "lg",
    store: m,
    ...y
  }, h) => /* @__PURE__ */ o.jsx(
    ot,
    {
      "aria-label": t,
      backdrop: n ? /* @__PURE__ */ o.jsx($t, { backdrop: n, hideOnInteractOutside: l }) : null,
      hideOnInteractOutside: l,
      ref: h,
      render: /* @__PURE__ */ o.jsx(e, { size: u }),
      store: m,
      ...y,
      children: r
    }
  )
), P = c((t, e) => /* @__PURE__ */ o.jsx(dt, { ref: e, ...t }));
P.displayName = "Body";
const jt = (t) => {
  const { modals: e } = w();
  return /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(X, { ...e.cover, ...t }) });
}, bt = c(({ as: t, store: e, ...n }, r) => /* @__PURE__ */ o.jsx(
  rt,
  {
    ref: r,
    render: t ? (l) => /* @__PURE__ */ o.jsx(t, { ...l }) : void 0,
    store: e,
    ...n
  }
)), It = Object.assign(yt, {
  Body: P,
  Content: _,
  Cover: jt,
  Footer: A,
  Header: O,
  Trigger: bt
}), Rt = gt;
export {
  Rt as AssetModal,
  It as Modal,
  zt as useModal
};