welcome-ui 0.0.0-dev.1761316648080 → 0.0.0-dev.1761576812962

package/dist/Modal.mjs

@@ -0,0 +1,383 @@
+"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
+};

package/dist/NLEBE274-CnAMhwcR.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { C as U, a as A, u as T } from "./P2CTZE2T-1n7Xlf8m.mjs";
+import { t as j, v as w, f as D, c as H, h as M, _ as O, w as $, j as q, l as z, x as B, b as v, d as G, e as J, g as p, y as K } from "./LVA2YJMS-B8X1PCyC.mjs";
+import { u as L } from "./YV4JVR4I-BLeUul5N.mjs";
+import { useRef as Q, useEffect as R } from "react";
+var m = j(
+  [A],
+  [U]
+), V = m.useContext, re = m.useProviderContext, ne = m.ScopedContextProvider, k = "input";
+function W(u, r) {
+  if (r !== void 0)
+    return u != null && r != null ? r === u : !!r;
+}
+function X(u, r) {
+  return u === "input" && (!r || r === "radio");
+}
+var Y = H(function(r) {
+  var d = r, {
+    store: t,
+    name: c,
+    value: i,
+    checked: C
+  } = d, o = O(d, [
+    "store",
+    "name",
+    "value",
+    "checked"
+  ]);
+  const x = V();
+  t = t || x;
+  const a = $(o.id), l = Q(null), s = L(
+    t,
+    (e) => C ?? W(i, e == null ? void 0 : e.value)
+  );
+  R(() => {
+    !a || !s || (t == null ? void 0 : t.getState().activeId) === a || t == null || t.setActiveId(a);
+  }, [t, s, a]);
+  const P = o.onChange, S = q(l, k), n = X(S, o.type), I = z(o), [_, b] = B();
+  R(() => {
+    const e = l.current;
+    e && (n || (s !== void 0 && (e.checked = s), c !== void 0 && (e.name = c), i !== void 0 && (e.value = `${i}`)));
+  }, [_, n, s, c, i]);
+  const f = v((e) => {
+    if (I) {
+      e.preventDefault(), e.stopPropagation();
+      return;
+    }
+    (t == null ? void 0 : t.getState().value) !== i && (n || (e.currentTarget.checked = !0, b()), P == null || P(e), !e.defaultPrevented && (t == null || t.setValue(i)));
+  }), g = o.onClick, F = v((e) => {
+    g == null || g(e), !e.defaultPrevented && (n || f(e));
+  }), h = o.onFocus, y = v((e) => {
+    if (h == null || h(e), e.defaultPrevented || !n || !t) return;
+    const { moves: E, activeId: N } = t.getState();
+    E && (a && N !== a || f(e));
+  });
+  return o = G(p({
+    id: a,
+    role: n ? void 0 : "radio",
+    type: n ? "radio" : void 0,
+    "aria-checked": s
+  }, o), {
+    ref: J(l, o.ref),
+    onChange: f,
+    onClick: F,
+    onFocus: y
+  }), o = T(p({
+    store: t,
+    clickOnEnter: !n
+  }, o)), K(p({
+    name: n ? c : void 0,
+    value: n ? i : void 0,
+    checked: s
+  }, o));
+}), ie = w(
+  D(function(r) {
+    const d = Y(r);
+    return M(k, d);
+  })
+);
+export {
+  ie as R,
+  ne as a,
+  re as u
+};