motile-ui 1.0.3 → 1.1.0

package/dist/components/Drawer/Drawer.js

@@ -1,21 +1,21 @@
 import { jsx as u } from "react/jsx-runtime";
-import W, { forwardRef as w, useRef as _, useState as E, useEffect as M, createContext as G, useContext as J } from "react";
+import W, { forwardRef as w, useState as g, useEffect as Y, useRef as _, createContext as G, useContext as J } from "react";
 import { createPortal as Q } from "react-dom";
-import { Slot as Y } from "../../utils/Slot.js";
+import { Slot as M } from "../../utils/Slot.js";
 import { useScrollLock as X } from "../../hooks/useScrollLock.js";
 import { useClickOutside as Z } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as k } from "../../hooks/useEscapeKey.js";
 import './Drawer.css';/* empty css           */
 const $ = G(null), f = () => {
-  const t = J($);
-  if (!t)
+  const r = J($);
+  if (!r)
     throw new Error("Drawer components must be used within Drawer.Root");
-  return t;
+  return r;
 }, C = ({
-  children: t,
+  children: r,
   open: s,
   defaultOpen: n = !1,
-  onOpenChange: r,
+  onOpenChange: t,
   closeOnBackdrop: e = !0,
   closeOnDrag: o = !0,
   maxHeight: d = "70dvh",
@@ -23,8 +23,8 @@ const $ = G(null), f = () => {
   maxWidth: y,
   zIndex: h = 9999
 }) => {
-  const a = _(null), m = _(null), l = _(null), v = _(0), b = _(!1), [A, g] = E(!1), [x, N] = E(n), [F, U] = E(n), D = s !== void 0 ? s : F, R = (i) => {
-    s === void 0 && U(i), r == null || r(i);
+  const a = _(null), m = _(null), l = _(null), v = _(0), b = _(!1), [A, N] = g(!1), [x, R] = g(n), [F, U] = g(n), D = s !== void 0 ? s : F, T = (i) => {
+    s === void 0 && U(i), t == null || t(i);
   }, S = typeof e == "boolean" ? { escapeKey: e, clickOutside: e } : {
     escapeKey: (e == null ? void 0 : e.escapeKey) ?? !1,
     clickOutside: (e == null ? void 0 : e.clickOutside) ?? !1
@@ -35,23 +35,23 @@ const $ = G(null), f = () => {
   });
   const p = () => {
     if (!a.current) {
-      g(!1), setTimeout(() => {
-        N(!1), R(!1);
+      N(!1), setTimeout(() => {
+        R(!1), T(!1);
       }, 300);
       return;
     }
-    a.current.style.transition = "transform 0.3s ease", a.current.style.transform = "translateY(100%)", g(!1), setTimeout(() => {
-      N(!1), R(!1);
+    a.current.style.transition = "transform 0.3s ease", a.current.style.transform = "translateY(100%)", N(!1), setTimeout(() => {
+      R(!1), T(!1);
     }, 300);
   };
-  M(() => {
-    D ? N(!0) : x && p();
-  }, [D]), M(() => {
+  Y(() => {
+    D ? R(!0) : x && p();
+  }, [D]), Y(() => {
     if (!x || !a.current) return;
     const i = a.current;
     i.style.transition = "none", i.style.transform = "translateY(100%)", requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        i.style.transition = "transform 0.3s ease", i.style.transform = "translateY(0)", g(!0);
+        i.style.transition = "transform 0.3s ease", i.style.transform = "translateY(0)", N(!0);
       });
     });
   }, [x]), Z({
@@ -64,7 +64,7 @@ const $ = G(null), f = () => {
   });
   const j = {
     open: x,
-    setOpen: R,
+    setOpen: T,
     closeOnBackdrop: e,
     closeOnDrag: o,
     maxHeight: d,
@@ -81,8 +81,8 @@ const $ = G(null), f = () => {
     handleDragMove: (i) => {
       if (!o || !a.current || l.current === null || !m.current)
         return;
-      const T = i - l.current;
-      m.current.scrollTop <= 0 && T > 0 && (b.current = !0, v.current = T, a.current.style.transition = "none", a.current.style.transform = `translateY(${T}px)`);
+      const E = i - l.current;
+      m.current.scrollTop <= 0 && E > 0 && (b.current = !0, v.current = E, a.current.style.transition = "none", a.current.style.transform = `translateY(${E}px)`);
     },
     handleDragEnd: () => {
       if (!o || !a.current) return;
@@ -90,42 +90,44 @@ const $ = G(null), f = () => {
       a.current.style.transition = "transform 0.3s ease", b.current && v.current > i ? p() : (a.current.style.transform = "translateY(0)", v.current = 0), b.current = !1, l.current = null;
     }
   };
-  return /* @__PURE__ */ u($.Provider, { value: j, children: t });
+  return /* @__PURE__ */ u($.Provider, { value: j, children: r });
 };
 C.displayName = "Drawer.Root";
 const P = w(
-  ({ children: t, asChild: s, onClick: n, ...r }, e) => {
+  ({ children: r, asChild: s, onClick: n, ...t }, e) => {
     const { setOpen: o } = f(), d = (c) => {
       n == null || n(c), o(!0);
     };
     return s ? /* @__PURE__ */ u(
-      Y,
+      M,
       {
-        ...r,
+        ...t,
         onClick: d,
         ref: e,
-        children: t
+        children: r
       }
-    ) : /* @__PURE__ */ u("button", { type: "button", onClick: d, ref: e, ...r, children: t });
+    ) : /* @__PURE__ */ u("button", { type: "button", onClick: d, ref: e, ...t, children: r });
   }
 );
 P.displayName = "Drawer.Trigger";
 const V = ({
-  children: t,
+  children: r,
   container: s
 }) => {
-  const { open: n } = f();
-  return !n || typeof document > "u" ? null : Q(t, s || document.body);
+  const { open: n } = f(), [t, e] = g(!1);
+  return Y(() => {
+    e(!0);
+  }, []), !t || !n ? null : Q(r, s || document.body);
 };
 V.displayName = "Drawer.Portal";
 const H = w(
-  ({ className: t, ...s }, n) => {
-    const { isVisible: r, zIndex: e } = f();
+  ({ className: r, ...s }, n) => {
+    const { isVisible: t, zIndex: e } = f();
     return /* @__PURE__ */ u(
       "div",
       {
         ref: n,
-        className: `motile-drawer__overlay ${r ? "motile-drawer__overlay--visible" : ""} ${t || ""}`,
+        className: `motile-drawer__overlay ${t ? "motile-drawer__overlay--visible" : ""} ${r || ""}`,
         style: { zIndex: e },
         role: "presentation",
         ...s
@@ -135,7 +137,7 @@ const H = w(
 );
 H.displayName = "Drawer.Overlay";
 const K = w(
-  ({ className: t, style: s, children: n, ...r }, e) => {
+  ({ className: r, style: s, children: n, ...t }, e) => {
     const { drawerRef: o, isVisible: d, maxHeight: c, width: y, maxWidth: h, zIndex: a } = f(), m = {
       ...c !== "70dvh" && { "--drawer-max-height": c },
       ...y !== "480px" && { "--drawer-width": y },
@@ -149,12 +151,12 @@ const K = w(
         ref: (l) => {
           typeof e == "function" ? e(l) : e && (e.current = l), o.current = l;
         },
-        className: `motile-drawer__content ${d ? "motile-drawer__content--visible" : ""} ${t || ""}`,
+        className: `motile-drawer__content ${d ? "motile-drawer__content--visible" : ""} ${r || ""}`,
         style: m,
         onClick: (l) => l.stopPropagation(),
         role: "dialog",
         "aria-modal": "true",
-        ...r,
+        ...t,
         children: n
       }
     );
@@ -162,15 +164,15 @@ const K = w(
 );
 K.displayName = "Drawer.Content";
 const L = w(
-  ({ className: t, ...s }, n) => {
-    const { handleDragStart: r, handleDragMove: e, handleDragEnd: o } = f(), d = (a) => {
-      r(a.touches[0].clientY);
+  ({ className: r, ...s }, n) => {
+    const { handleDragStart: t, handleDragMove: e, handleDragEnd: o } = f(), d = (a) => {
+      t(a.touches[0].clientY);
     }, c = (a) => {
       e(a.touches[0].clientY);
     }, y = () => {
       o();
     }, h = (a) => {
-      r(a.clientY);
+      t(a.clientY);
       const m = (v) => {
         e(v.clientY);
       }, l = () => {
@@ -182,7 +184,7 @@ const L = w(
       "div",
       {
         ref: n,
-        className: `motile-drawer__header ${t || ""}`,
+        className: `motile-drawer__header ${r || ""}`,
         onTouchStart: d,
         onTouchMove: c,
         onTouchEnd: y,
@@ -195,13 +197,13 @@ const L = w(
 );
 L.displayName = "Drawer.Handle";
 const I = w(
-  ({ children: t, asChild: s, className: n, ...r }, e) => s && W.isValidElement(t) ? /* @__PURE__ */ u(
-    Y,
+  ({ children: r, asChild: s, className: n, ...t }, e) => s && W.isValidElement(r) ? /* @__PURE__ */ u(
+    M,
     {
-      ...r,
+      ...t,
       className: `motile-drawer__title ${n || ""}`,
       ref: e,
-      children: t
+      children: r
     }
   ) : /* @__PURE__ */ u("div", { className: "motile-drawer__title-wrapper", children: /* @__PURE__ */ u(
     "h2",
@@ -209,22 +211,22 @@ const I = w(
       ref: e,
       id: "motile-drawer-title",
       className: `motile-drawer__title ${n || ""}`,
-      ...r,
-      children: t
+      ...t,
+      children: r
     }
   ) })
 );
 I.displayName = "Drawer.Title";
 const z = w(
-  ({ className: t, children: s, ...n }, r) => {
+  ({ className: r, children: s, ...n }, t) => {
     const { bodyRef: e } = f();
     return /* @__PURE__ */ u(
       "div",
       {
         ref: (o) => {
-          typeof r == "function" ? r(o) : r && (r.current = o), e.current = o;
+          typeof t == "function" ? t(o) : t && (t.current = o), e.current = o;
         },
-        className: `motile-drawer__body ${t || ""}`,
+        className: `motile-drawer__body ${r || ""}`,
         "data-scroll-allowed": !0,
         ...n,
         children: s
@@ -234,19 +236,19 @@ const z = w(
 );
 z.displayName = "Drawer.Body";
 const q = w(
-  ({ children: t, asChild: s, onClick: n, ...r }, e) => {
+  ({ children: r, asChild: s, onClick: n, ...t }, e) => {
     const { handleClose: o } = f(), d = (c) => {
       n == null || n(c), o();
     };
     return s ? /* @__PURE__ */ u(
-      Y,
+      M,
       {
-        ...r,
+        ...t,
         onClick: d,
         ref: e,
-        children: t
+        children: r
       }
-    ) : /* @__PURE__ */ u("button", { type: "button", onClick: d, ref: e, ...r, children: t });
+    ) : /* @__PURE__ */ u("button", { type: "button", onClick: d, ref: e, ...t, children: r });
   }
 );
 q.displayName = "Drawer.Close";

package/dist/components/Modal/Modal.js

@@ -1,17 +1,17 @@
-import { jsx as l, jsxs as H } from "react/jsx-runtime";
-import n, { useRef as K, useId as h, createContext as L, useContext as k } from "react";
-import { createPortal as O } from "react-dom";
-import { Slot as P } from "../../utils/Slot.js";
-import { useClickOutside as V } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as q } from "../../hooks/useEscapeKey.js";
-import { useScrollLock as z } from "../../hooks/useScrollLock.js";
+import { jsx as l, jsxs as L } from "react/jsx-runtime";
+import n, { useRef as k, useState as O, useEffect as P, useId as h, createContext as V, useContext as q } from "react";
+import { createPortal as z } from "react-dom";
+import { Slot as A } from "../../utils/Slot.js";
+import { useClickOutside as D } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as G } from "../../hooks/useEscapeKey.js";
+import { useScrollLock as J } from "../../hooks/useScrollLock.js";
 import './Modal.css';/* empty css          */
-const v = L(null), m = () => {
-  const o = k(v);
+const v = V(null), m = () => {
+  const o = q(v);
   if (!o)
     throw new Error("Modal compound components must be used within Modal.Root");
   return o;
-}, A = ({
+}, Q = ({
   open: o,
   onOpenChange: t,
   children: e
@@ -35,47 +35,51 @@ const v = L(null), m = () => {
     width: d,
     maxWidth: r,
     zIndex: s = 1e3,
-    className: f,
+    className: u,
     onClick: i,
     style: $,
     ...p
   }, g) => {
-    const { open: c, onOpenChange: u } = m(), M = K(null), b = typeof e == "boolean" ? e : e.clickOutside ?? !1, S = typeof e == "boolean" ? e : e.escapeKey ?? !1;
-    z({
+    const { open: c, onOpenChange: f } = m(), M = k(null), [S, E] = O(!1);
+    P(() => {
+      E(!0);
+    }, []);
+    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, T = typeof e == "boolean" ? e : e.escapeKey ?? !1;
+    J({
       enabled: c && !a,
       allowedSelectors: [".motile-modal__content"]
-    }), V({
+    }), D({
       refs: [M],
       handler: () => {
-        b && u(!1);
+        b && f(!1);
       },
       enabled: c
-    }), q({
+    }), G({
       handler: () => {
-        S && u(!1);
+        T && f(!1);
       },
       enabled: c
     });
-    const T = (y) => {
-      i == null || i(y), y.target === y.currentTarget && b && u(!1);
+    const j = (y) => {
+      i == null || i(y), y.target === y.currentTarget && b && f(!1);
     };
-    if (!c || typeof document > "u") return null;
-    const j = {
+    if (!S || !c) return null;
+    const F = {
       zIndex: s,
       ...$
-    }, E = {
+    }, H = {
       ...d && { "--modal-width": d },
       ...r && { "--modal-max-width": r },
       zIndex: s + 1
-    }, F = /* @__PURE__ */ l(
+    }, K = /* @__PURE__ */ l(
       "div",
       {
         ref: g,
-        className: `motile-modal__backdrop ${f || ""}`,
+        className: `motile-modal__backdrop ${u || ""}`,
         "data-state": c ? "open" : "closed",
         "data-variant": t,
-        onClick: T,
-        style: j,
+        onClick: j,
+        style: F,
         ...p,
         children: /* @__PURE__ */ l(
           "div",
@@ -83,13 +87,13 @@ const v = L(null), m = () => {
             ref: M,
             className: "motile-modal",
             "data-variant": t,
-            style: E,
+            style: H,
             children: p.children
           }
         )
       }
     );
-    return O(F, o || document.body);
+    return z(K, o || document.body);
   }
 );
 _.displayName = "Modal.Overlay";
@@ -144,14 +148,14 @@ const x = n.forwardRef(
 x.displayName = "Modal.Body";
 const R = n.forwardRef(
   ({ asChild: o, className: t, onClick: e, children: a, ...d }, r) => {
-    const { onOpenChange: s } = m(), f = (i) => {
+    const { onOpenChange: s } = m(), u = (i) => {
       e == null || e(i), s(!1);
     };
     return o ? /* @__PURE__ */ l(
-      P,
+      A,
       {
         ...d,
-        onClick: f,
+        onClick: u,
         ref: r,
         children: a
       }
@@ -161,10 +165,10 @@ const R = n.forwardRef(
         ref: r,
         type: "button",
         className: `motile-modal__close ${t || ""}`,
-        onClick: f,
+        onClick: u,
         "aria-label": "닫기",
         ...d,
-        children: a || /* @__PURE__ */ H(
+        children: a || /* @__PURE__ */ L(
           "svg",
           {
             width: "18",
@@ -208,8 +212,8 @@ const I = n.forwardRef(
   )
 );
 I.displayName = "Modal.Header";
-const Z = {
-  Root: A,
+const te = {
+  Root: Q,
   Overlay: _,
   Content: N,
   Title: w,
@@ -219,13 +223,13 @@ const Z = {
   Header: I
 };
 export {
-  Z as Modal,
+  te as Modal,
   x as ModalBody,
   R as ModalClose,
   N as ModalContent,
   C as ModalFooter,
   I as ModalHeader,
   _ as ModalOverlay,
-  A as ModalRoot,
+  Q as ModalRoot,
   w as ModalTitle
 };