welcome-ui 8.2.0-alpha.0 → 8.2.0

package/dist/Drawer.mjs

@@ -1,23 +1,22 @@
 "use client";
 import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { forwardRef as m } from "./System.mjs";
-import n, { th as s, css as d, useTheme as u } from "@xstyled/styled-components";
+import { forwardRef as d } from "./System.mjs";
+import n, { th as s, css as c, useTheme as h } from "@xstyled/styled-components";
 import { Box as l } from "./Box.mjs";
-import { Button as b } from "./Button.mjs";
+import { Button as v } from "./Button.mjs";
 import "./Icon.mjs";
-import { A as $ } from "./index-QaLwIvZS.mjs";
-import { Text as p } from "./Text.mjs";
-import { CloseButton as D } from "./CloseButton.mjs";
-import { D as B } from "./SYRFVSLH-B6m278Vb.mjs";
-import { D as k, u as v } from "./JC64G2H7-afsomHuH.mjs";
-import { D as C } from "./AXB53BZF-XKOjjeWO.mjs";
-const I = n.divBox`
-  overflow-y: scroll;
+import { A as k } from "./index-QaLwIvZS.mjs";
+import { Text as g } from "./Text.mjs";
+import { CloseButton as C } from "./CloseButton.mjs";
+import { D as I } from "./SYRFVSLH-B6m278Vb.mjs";
+import { D as O, u as S } from "./JC64G2H7-afsomHuH.mjs";
+import { D as T } from "./AXB53BZF-XKOjjeWO.mjs";
+const F = n.divBox`
   flex: 1;
   margin: 0 auto;
   width: 100%;
-`, S = n.divBox(
-  ({ size: t }) => d`
+`, A = n.divBox(
+  ({ size: t }) => c`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -28,35 +27,49 @@ const I = n.divBox`
     background-color: beige-20;
     transition: background-color ${s("transitions.medium")};
 
-    ${t === "sm" && d`
+    ${t === "sm" && c`
       height: 32;
       width: 32;
     `}
   `
-), T = m(
-  ({ children: t, maxWidth: r = 820, store: o, ...i }, a) => {
-    const c = u();
+), R = d(
+  ({
+    children: t,
+    getPersistentElements: r,
+    maxWidth: o = 820,
+    store: i,
+    ...a
+  }, m) => {
+    const u = h(), x = () => Array.from(
+      r ? r() : document.querySelectorAll("[data-wui-persistent]")
+    ), b = !!r || (($) => {
+      const D = $.target;
+      return !x().some(
+        (B) => B.contains(D)
+      );
+    });
     return /* @__PURE__ */ e.jsx(
-      G,
+      N,
       {
-        ...i,
+        ...a,
         autoFocusOnShow: !1,
+        getPersistentElements: x,
         h: { _: "100%", md: "calc(100% - 3rem)" },
-        hideOnInteractOutside: !0,
+        hideOnInteractOutside: b,
+        overflow: "hidden",
         placement: "bottom",
-        ref: a,
-        store: o,
+        ref: m,
+        store: i,
         style: {
-          borderTopLeftRadius: c.radii.xxl,
-          borderTopRightRadius: c.radii.xxl
+          borderTopLeftRadius: u.radii.xxl,
+          borderTopRightRadius: u.radii.xxl
         },
         withBackdrop: !0,
-        withCloseButton: !0,
-        children: /* @__PURE__ */ e.jsx(I, { maxWidth: r, children: /* @__PURE__ */ e.jsx(l, { p: { _: "xl md", md: "3xl xl" }, children: t }) })
+        children: /* @__PURE__ */ e.jsx(l, { h: "100%", mt: { _: "xl", md: "3xl" }, overflowY: "auto", w: "100%", children: /* @__PURE__ */ e.jsx(F, { maxWidth: o, children: /* @__PURE__ */ e.jsx(l, { p: { _: "0 md xl", md: "0 xl 3xl" }, children: t }) }) })
       }
     );
   }
-), F = ({
+), _ = ({
   action: t,
   icon: r,
   onBackButtonClick: o,
@@ -72,24 +85,23 @@ const I = n.divBox`
     gap: "xl",
     justifyContent: "space-between",
     mb: "xl",
-    mt: "-md",
+    pb: "md",
     position: "sticky",
-    py: "md",
     top: 0,
     zIndex: 1,
     children: [
       /* @__PURE__ */ e.jsxs(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" }, children: [
-        !!o && /* @__PURE__ */ e.jsx(b, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e.jsx($, {}) }),
-        !!r && /* @__PURE__ */ e.jsx(O, { icon: r }),
+        !!o && /* @__PURE__ */ e.jsx(v, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e.jsx(k, {}) }),
+        !!r && /* @__PURE__ */ e.jsx(E, { icon: r }),
         /* @__PURE__ */ e.jsxs(l, { display: "flex", flexDirection: "column", gap: "xxs", children: [
-          /* @__PURE__ */ e.jsx(p, { pr: "xl", variant: "h3", children: a }),
+          /* @__PURE__ */ e.jsx(g, { pr: "xl", variant: "h3", children: a }),
           i
         ] })
       ] }),
       t ? /* @__PURE__ */ e.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t }) : null
     ]
   }
-), O = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.jsx(S, { size: r, children: /* @__PURE__ */ e.jsx(t, { color: "neutral-90", size: r }) }), R = (t) => {
+), E = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.jsx(A, { size: r, children: /* @__PURE__ */ e.jsx(t, { color: "neutral-90", size: r }) }), P = (t) => {
   switch (t) {
     case "bottom":
       return {
@@ -120,25 +132,25 @@ const I = n.divBox`
         transform: "translateY(-100%)"
       };
   }
-}, x = ["sm", "md", "lg"], _ = (t, r) => {
+}, f = ["sm", "md", "lg"], Y = (t, r) => {
   switch (r) {
     case "bottom":
     case "top":
-      return x.includes(t) ? s(`drawers.sizes.vertical.${t}`) : {
+      return f.includes(t) ? s(`drawers.sizes.vertical.${t}`) : {
         height: t
       };
     case "left":
     case "right":
-      return x.includes(t) ? s(`drawers.sizes.horizontal.${t}`) : {
+      return f.includes(t) ? s(`drawers.sizes.horizontal.${t}`) : {
         width: t
       };
   }
-}, A = n.divBox(
-  ({ placement: t, size: r }) => d`
+}, L = n.divBox(
+  ({ placement: t, size: r }) => c`
     ${s("cards.default")};
     ${s("drawers.default")};
-    ${R(t)}
-    ${_(r, t)}
+    ${P(t)}
+    ${Y(r, t)}
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -152,10 +164,10 @@ const I = n.divBox`
       transform: translate(0, 0);
     }
   `
-), f = n.divBox.withConfig({
+), w = n.divBox.withConfig({
   shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
 })(
-  ({ hideOnInteractOutside: t }) => d`
+  ({ hideOnInteractOutside: t }) => c`
     ${s("drawers.backdrop")};
     position: fixed;
     top: 0;
@@ -165,7 +177,7 @@ const I = n.divBox`
     opacity: 0;
     transition: opacity 150ms ease-in-out;
 
-    ${t && d`
+    ${t && c`
       cursor: pointer;
     `}
 
@@ -173,34 +185,31 @@ const I = n.divBox`
       opacity: 1;
     }
   `
-), Y = n.divBox`
+), W = n.divBox`
   ${s("drawers.title")};
-`, E = n.divBox`
+`, X = n.divBox`
   ${s("drawers.content")};
-`, L = n(D)`
+`, q = n(C)`
   ${s("drawers.closeButton")};
-`, P = n.divBox`
+`, z = n.divBox`
   ${s("drawers.footer")};
-`, h = ({ zIndex: t = "2", ...r }) => {
-  const o = u();
-  return /* @__PURE__ */ e.jsx(l, { h: "0", children: /* @__PURE__ */ e.jsx(
-    B,
+`, j = ({ zIndex: t = "2", ...r }) => {
+  const o = h();
+  return /* @__PURE__ */ e.jsx(l, { h: "0", position: "sticky", top: 0, zIndex: t, children: /* @__PURE__ */ e.jsx(
+    I,
     {
       render: /* @__PURE__ */ e.jsx(
-        L,
+        q,
         {
           left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
           mt: "lg",
-          position: "sticky",
-          top: "0",
-          zIndex: t,
           ...r
         }
       )
     }
   ) });
-}, X = m((t, r) => /* @__PURE__ */ e.jsx(E, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), z = m((t, r) => /* @__PURE__ */ e.jsx(
-  P,
+}, H = d((t, r) => /* @__PURE__ */ e.jsx(X, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), Z = d((t, r) => /* @__PURE__ */ e.jsx(
+  z,
   {
     bottom: { md: "auto", xs: 0 },
     position: { md: "static", xs: "sticky" },
@@ -208,8 +217,8 @@ const I = n.divBox`
     w: "100%",
     ...t
   }
-)), H = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.jsx(
-  Y,
+)), J = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.jsx(
+  W,
   {
     alignItems: "center",
     display: "flex",
@@ -219,61 +228,61 @@ const I = n.divBox`
     w: "100%",
     zIndex: r,
     ...o,
-    children: /* @__PURE__ */ e.jsx(p, { m: "0", variant: "h3", w: "100%", children: t })
+    children: /* @__PURE__ */ e.jsx(g, { m: "0", variant: "h3", w: "100%", children: t })
   }
-), Z = m(
+), K = d(
   ({
     children: t,
     hideOnInteractOutside: r = !0,
     placement: o = "right",
     size: i = "lg",
     store: a,
-    withBackdrop: c = !1,
-    withCloseButton: w = !0,
-    ...j
-  }, y) => /* @__PURE__ */ e.jsx(
-    k,
+    withBackdrop: m = !1,
+    withCloseButton: u = !0,
+    ...x
+  }, p) => /* @__PURE__ */ e.jsx(
+    O,
     {
-      backdrop: c ? /* @__PURE__ */ e.jsx(f, { hideOnInteractOutside: r }) : !1,
+      backdrop: m ? /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: r }) : !1,
       hideOnInteractOutside: r,
-      modal: c,
-      ref: y,
-      render: /* @__PURE__ */ e.jsx(A, { placement: o, size: i }),
+      modal: m,
+      ref: p,
+      render: /* @__PURE__ */ e.jsx(L, { placement: o, size: i }),
       store: a,
-      ...j,
+      ...x,
       children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        w ? /* @__PURE__ */ e.jsx(h, {}) : null,
+        u ? /* @__PURE__ */ e.jsx(j, {}) : null,
         t
       ] })
     }
   )
 );
-function st(t = {}) {
-  return v({ animated: !0, ...t });
+function ct(t = {}) {
+  return S({ animated: !0, ...t });
 }
-const q = ({
+const M = ({
   hideOnInteractOutside: t = !0,
   ...r
-}) => /* @__PURE__ */ e.jsx(f, { hideOnInteractOutside: t, ...r }), g = m(({ as: t, store: r, ...o }, i) => /* @__PURE__ */ e.jsx(
-  C,
+}) => /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: t, ...r }), y = d(({ as: t, store: r, ...o }, i) => /* @__PURE__ */ e.jsx(
+  T,
   {
     ref: i,
     render: t ? (a) => /* @__PURE__ */ e.jsx(t, { ...a }) : void 0,
     store: r,
     ...o
   }
-)), G = Object.assign(Z, {
-  Backdrop: q,
-  Close: h,
-  Content: X,
-  Footer: z,
-  Title: H,
-  Trigger: g
-}), nt = Object.assign(T, { Header: F, Trigger: g });
+)), N = Object.assign(K, {
+  Backdrop: M,
+  Close: j,
+  Content: H,
+  Footer: Z,
+  Title: J,
+  Trigger: y
+}), dt = Object.assign(R, { Header: _, Trigger: y });
 export {
-  nt as AssetDrawer,
-  G as Drawer,
-  q as DrawerBackdrop,
-  g as Trigger,
-  st as useDrawer
+  dt as AssetDrawer,
+  N as Drawer,
+  M as DrawerBackdrop,
+  y as Trigger,
+  ct as useDrawer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "8.2.0-alpha.0",
+  "version": "8.2.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"