welcome-ui 8.3.0 → 9.0.0-alpha.0

package/dist/Modal.mjs

@@ -1,383 +0,0 @@
-"use client";
-import { j as o } from "./jsx-runtime-B7I4PJ0H.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-B6m278Vb.mjs";
-import { CloseButton as et } from "./CloseButton.mjs";
-import { D as ot, u as nt } from "./JC64G2H7-afsomHuH.mjs";
-import { D as rt } from "./AXB53BZF-XKOjjeWO.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
-}), _ = ({ 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
-        }
-      )
-    }
-  );
-}, A = 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(_, {}) : 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
-        });
-      })
-    ] });
-  }
-);
-A.displayName = "Content";
-const O = 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
-] }));
-O.displayName = "Footer";
-const R = 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(_, { 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
-] }));
-R.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: A,
-  Cover: jt,
-  Footer: O,
-  Header: R,
-  Trigger: bt
-}), _t = gt;
-export {
-  _t as AssetModal,
-  It as Modal,
-  zt as useModal
-};

package/dist/NLEBE274-oSxMftGy.mjs

@@ -1,84 +0,0 @@
-"use client";
-import { C as U, a as A, u as T } from "./P2CTZE2T-DOT1mNnX.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-C-kJ1lkr.mjs";
-import { u as L } from "./YV4JVR4I-DPC8mMuG.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
-};