welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/Modal.mjs

@@ -0,0 +1,365 @@
+"use client";
+import o, { useState as J, useMemo as K, Children as D, useEffect as L, cloneElement as F } from "react";
+import i, { css as f, th as l, system as H, up as Q, useTheme as v } from "@xstyled/styled-components";
+import { Shape as U } from "./Shape.mjs";
+import { forwardRef as c } from "./System.mjs";
+import { Text as p } from "./Text.mjs";
+import { Box as $ } from "./Box.mjs";
+import { CloseButton as X } from "./CloseButton.mjs";
+import { D as S } from "./SYRFVSLH-DXZgEwus.mjs";
+import { StyledSwiper as Y } from "./Swiper.mjs";
+import { IconFont as Z } from "./IconFont.mjs";
+import { Button as ee } from "./Button.mjs";
+import { u as te, D as oe } from "./JC64G2H7-HxATiU-t.mjs";
+import { D as ne } from "./AXB53BZF-DCqNWRx3.mjs";
+const W = i.divBox.withConfig({
+  shouldForwardProp: (e) => !["hideOnInteractOutside"].includes(e)
+})(
+  ({ hideOnInteractOutside: e }) => f`
+    ${l("modals.backdrop")};
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${H};
+
+    ${e && f`
+      cursor: pointer;
+    `}
+
+    &[data-enter] {
+      opacity: 1;
+    }
+  `
+), re = i.divBox(
+  ({ size: e }) => f`
+    ${l("cards.default")};
+    ${l("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;
+    }
+
+    ${Q(
+    "md",
+    f`
+        height: fit-content;
+        max-height: calc(100vh - ${l("space.xl")} * 2);
+        ${l(`modals.sizes.${e}`)};
+      `
+  )}
+  `
+), ae = i.sectionBox`
+  ${l("modals.body")};
+`, ie = i.headerBox`
+  position: sticky;
+  top: 0;
+  flex-shrink: 0;
+  z-index: 1;
+  ${l("modals.header")};
+`, le = i(p)`
+  ${l(".modals.header.subtitle")};
+  margin-bottom: 0;
+`, se = i.footerBox`
+  position: sticky;
+  bottom: 0;
+  flex-shrink: 0;
+  z-index: 1;
+  ${l("modals.footer")};
+`, me = i($)`
+  ${l("modals.footer.children")};
+`, ce = i.divBox`
+  ${l("modals.footer.information")};
+`, M = ({ isOnHeader: e, ...t }) => {
+  const n = v();
+  return /* @__PURE__ */ o.createElement(
+    S,
+    {
+      render: /* @__PURE__ */ o.createElement(
+        X,
+        {
+          left: e ? void 0 : `calc(100% - ${n.space.lg} - ${n.buttons.sizes.sm.height})`,
+          position: e ? "absolute" : "sticky",
+          right: e ? "lg" : void 0,
+          top: "lg",
+          zIndex: "1",
+          ...t
+        }
+      )
+    }
+  );
+}, N = c(({ icon: e, subtitle: t, title: n, ...r }, s) => /* @__PURE__ */ o.createElement(ie, { ref: s, textAlign: e ? "center" : null, w: "100%", ...r }, /* @__PURE__ */ o.createElement(M, { isOnHeader: !0 }), e, /* @__PURE__ */ o.createElement(p, { mb: t ? "lg" : 0, mt: e ? "xl" : 0, variant: "h4" }, n), t && /* @__PURE__ */ o.createElement(le, null, t)));
+N.displayName = "Header";
+const T = c(({ children: e, information: t, ...n }, r) => /* @__PURE__ */ o.createElement(se, { ref: r, w: "100%", ...n }, e && /* @__PURE__ */ o.createElement(me, null, e), t && /* @__PURE__ */ o.createElement(ce, null, /* @__PURE__ */ o.createElement(p, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm" }, t.title), /* @__PURE__ */ o.createElement(p, { color: "neutral-90", mb: "0", mt: "md", variant: "sm" }, t.subtitle))));
+T.displayName = "Footer";
+const z = c(
+  ({ children: e, store: t, withClosingButton: n = !0, ...r }, s) => {
+    const { borderWidths: u, space: d } = v(), [y, h] = J(!1), g = t.useState("contentElement"), B = t.useState("open"), m = K(
+      () => D.map(e, (a) => {
+        if (o.isValidElement(a)) {
+          const x = a.type;
+          return x.displayName ?? x.name ?? "";
+        }
+        return "";
+      }),
+      [e]
+    ), q = !m.includes("Header") && n, G = (a) => a === "Header" ? {
+      // if the Modal have a Body but not a Footer || have a Footer but not a Body
+      pb: m.includes("Body") && !m.includes("Footer") || m.includes("Footer") && !m.includes("Body") ? d.lg : d.xxl
+    } : a === "Body" ? {
+      pb: m.includes("Footer") ? d.lg : null,
+      pr: m.includes("Header") ? d.xxl : null
+    } : a === "Footer" ? {
+      pt: m.includes("Header") || m.includes("Body") ? null : d.lg,
+      borderWidth: y ? u.sm : "0"
+    } : {};
+    return L(() => {
+      B ? g && h(g.scrollHeight > g.offsetHeight) : h(!1);
+    }, [t, B, g]), /* @__PURE__ */ o.createElement($, { ref: s, ...r }, q ? /* @__PURE__ */ o.createElement(M, null) : null, D.map(e, (a) => {
+      var k, C;
+      if (!a) return null;
+      const x = ((k = a == null ? void 0 : a.type) == null ? void 0 : k.displayName) || ((C = a == null ? void 0 : a.type) == null ? void 0 : C.name);
+      return F(a, {
+        ...G(x),
+        ...a.props
+      });
+    }));
+  }
+);
+z.displayName = "Content";
+const _ = "calc(100vw - 2 * 2rem);", I = "calc(100vw - 2 * 1rem);", j = "calc(100vh - 2 * 5rem);", A = f`
+  width: ${I};
+  max-height: ${j};
+
+  @media (min-width: md) {
+    width: ${_};
+  }
+
+  /* for big screens */
+  @media (min-width: 1700px) {
+    max-width: 1600;
+  }
+`, O = i.div`
+  ${A};
+  flex: 1;
+
+  @media (min-width: md) {
+    aspect-ratio: 16 / 9;
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+`, E = i.divBox`
+  transition: margin-top 250ms ease-in-out;
+
+  > img,
+  > div {
+    max-width: ${I};
+    max-height: ${j};
+
+    @media (min-width: md) {
+      max-width: ${_};
+    }
+
+    /* for big screens */
+    @media (min-width: 1700px) {
+      max-width: 1600;
+    }
+  }
+`, de = i.div`
+  ${l("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}) {
+    ${A};
+  }
+
+  ${E} {
+    margin-top: xl;
+  }
+
+  &[data-enter] {
+    opacity: 1;
+
+    ${E} {
+      margin-top: 0;
+    }
+  }
+`, R = i(p).attrs({ lines: 2, variant: "h4" })`
+  margin: 0;
+`, b = "4rem", w = "6rem", ue = 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 - ${w});
+    }
+  }
+
+  ${O} {
+    background-color: neutral-90;
+    max-height: calc(100vh - 2 * 5rem - ${b});
+
+    @media (min-width: md) {
+      max-height: calc(100vh - 2 * 5rem - ${w});
+    }
+  }
+`, pe = c(
+  ({ children: e, customContent: t, subtitle: n, title: r }, s) => /* @__PURE__ */ o.createElement(ue, { ref: s }, e, /* @__PURE__ */ o.createElement(
+    $,
+    {
+      backgroundColor: "neutral-10",
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 0,
+      gap: "xxs",
+      h: { _: b, md: w },
+      justifyContent: "center",
+      px: { _: "md", md: "xl" },
+      w: "100%"
+    },
+    t,
+    !t && n && /* @__PURE__ */ o.createElement(p, { variant: "subtitle-sm" }, n),
+    !t && r && /* @__PURE__ */ o.createElement(R, null, r)
+  ))
+), fe = i(ee)`
+  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;
+  }
+
+  ${H}
+`, P = c(
+  ({ hideOnInteractOutside: e, ...t }, n) => /* @__PURE__ */ o.createElement(
+    W,
+    {
+      backgroundColor: "rgba(0, 0, 0, 0.9)",
+      hideOnInteractOutside: e,
+      ...t,
+      ref: n
+    },
+    /* @__PURE__ */ o.createElement(
+      S,
+      {
+        render: /* @__PURE__ */ o.createElement(fe, { shape: "circle", variant: "secondary" }, /* @__PURE__ */ o.createElement(Z.Cross, null))
+      }
+    )
+  )
+);
+P.displayName = "Backdrop";
+const he = ({ children: e }) => /* @__PURE__ */ o.createElement(O, null, /* @__PURE__ */ o.createElement($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 } }, e)), ge = Object.assign(de, {
+  AssetWithTitle: pe,
+  Backdrop: P,
+  Content: E,
+  Iframe: he,
+  Title: R
+});
+function Te(e) {
+  const { onClose: t, setOpen: n, ...r } = e || {};
+  return te({
+    animated: !0,
+    setOpen: (u) => {
+      !u && t && t(), n == null || n(u);
+    },
+    ...r
+  });
+}
+const xe = c(
+  ({ backdrop: e, hideOnInteractOutside: t, ...n }, r) => e === !0 ? /* @__PURE__ */ o.createElement(W, { hideOnInteractOutside: t, ref: r, ...n }) : F(e, { hideOnInteractOutside: t, ref: r, ...n })
+), $e = c(
+  ({
+    ariaLabel: e,
+    /** for render property */
+    as: t = re,
+    backdrop: n = !0,
+    children: r,
+    hideOnInteractOutside: s = !0,
+    size: u = "lg",
+    store: d,
+    ...y
+  }, h) => /* @__PURE__ */ o.createElement(
+    oe,
+    {
+      "aria-label": e,
+      backdrop: n && /* @__PURE__ */ o.createElement(xe, { backdrop: n, hideOnInteractOutside: s }),
+      hideOnInteractOutside: s,
+      ref: h,
+      render: /* @__PURE__ */ o.createElement(t, { size: u }),
+      store: d,
+      ...y
+    },
+    r
+  )
+), V = c((e, t) => /* @__PURE__ */ o.createElement(ae, { ref: t, ...e }));
+V.displayName = "Body";
+const ye = (e) => {
+  const { modals: t } = v();
+  return /* @__PURE__ */ o.createElement("div", null, /* @__PURE__ */ o.createElement(U, { ...t.cover, ...e }));
+}, Ee = c(({ as: e, store: t, ...n }, r) => /* @__PURE__ */ o.createElement(
+  ne,
+  {
+    ref: r,
+    render: e ? (s) => /* @__PURE__ */ o.createElement(e, { ...s }) : void 0,
+    store: t,
+    ...n
+  }
+)), ze = Object.assign($e, {
+  Trigger: Ee,
+  Content: z,
+  Header: N,
+  Body: V,
+  Footer: T,
+  Cover: ye
+}), _e = ge;
+export {
+  _e as AssetModal,
+  ze as Modal,
+  Te as useModal
+};

package/dist/NLEBE274-DvH3XTTw.js

@@ -0,0 +1 @@
+"use client";"use strict";const C=require("./P2CTZE2T-q8vyaGc0.js"),n=require("./LVA2YJMS-B2HZjIhJ.js"),q=require("./YV4JVR4I-DIthYWMj.js"),v=require("react");var m=n.createStoreContext([C.CompositeContextProvider],[C.CompositeScopedContextProvider]),A=m.useContext,N=m.useProviderContext,U=m.ScopedContextProvider,k="input";function y(a,o){if(o!==void 0)return a!=null&&o!=null?o===a:!!o}function J(a,o){return a==="input"&&(!o||o==="radio")}var M=n.createHook(function(o){var c=o,{store:t,name:f,value:i,checked:P}=c,r=n.__objRest(c,["store","name","value","checked"]);const x=A();t=t||x;const d=n.useId(r.id),l=v.useRef(null),s=q.useStoreState(t,e=>P??y(i,e==null?void 0:e.value));v.useEffect(()=>{!d||!s||(t==null?void 0:t.getState().activeId)===d||t==null||t.setActiveId(d)},[t,s,d]);const R=r.onChange,S=n.useTagName(l,k),u=J(S,r.type),_=n.disabledFromProps(r),[I,E]=n.useForceUpdate();v.useEffect(()=>{const e=l.current;e&&(u||(s!==void 0&&(e.checked=s),f!==void 0&&(e.name=f),i!==void 0&&(e.value=`${i}`)))},[I,u,s,f,i]);const p=n.useEvent(e=>{if(_){e.preventDefault(),e.stopPropagation();return}(t==null?void 0:t.getState().value)!==i&&(u||(e.currentTarget.checked=!0,E()),R==null||R(e),!e.defaultPrevented&&(t==null||t.setValue(i)))}),g=r.onClick,F=n.useEvent(e=>{g==null||g(e),!e.defaultPrevented&&(u||p(e))}),h=r.onFocus,T=n.useEvent(e=>{if(h==null||h(e),e.defaultPrevented||!u||!t)return;const{moves:V,activeId:b}=t.getState();V&&(d&&b!==d||p(e))});return r=n.__spreadProps(n.__spreadValues({id:d,role:u?void 0:"radio",type:u?"radio":void 0,"aria-checked":s},r),{ref:n.useMergeRefs(l,r.ref),onChange:p,onClick:F,onFocus:T}),r=C.useCompositeItem(n.__spreadValues({store:t,clickOnEnter:!u},r)),n.removeUndefinedValues(n.__spreadValues({name:u?f:void 0,value:u?i:void 0,checked:s},r))}),Y=n.memo2(n.forwardRef2(function(o){const c=M(o);return n.createElement(k,c)}));exports.Radio=Y;exports.RadioScopedContextProvider=U;exports.useRadioProviderContext=N;

package/dist/NLEBE274-FThuwZH_.mjs

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