motile-ui 1.3.1 → 1.4.0

package/README.md

@@ -43,6 +43,8 @@
 - 📱 **모바일 최적화** - 터치 친화적 인터랙션과 반응형 디자인
 - ♿ **접근성** - WCAG 2.1 AA 준수 컴포넌트
 - 🎯 **트리쉐이킹 지원** - 필요한 것만 import
+- 🧅 **중첩 오버레이 안전** - Sheet 위 Sheet처럼 오버레이가 겹쳐도 뒤로가기·ESC·스크롤 잠금이 한 겹씩 정확히 동작
+- ⌨️ **스크롤 시 키보드 닫기** - 모바일에서 입력에 포커스한 채 스크롤하면 소프트 키보드를 자동으로 닫음 (useAutoBlur 훅 · autoBlur prop)
 - 📖 **풍부한 문서** - Storybook을 통한 라이브 예제 제공
 
 ---
@@ -234,6 +236,8 @@ MIT © [Innopers](https://github.com/Innopers)
 - 📱 **Mobile Optimized** - Touch-friendly interactions and responsive design
 - ♿ **Accessible** - WCAG 2.1 AA compliant components
 - 🎯 **Tree-shakeable** - Import only what you need
+- 🧅 **Nesting-Safe Overlays** - Back navigation, ESC, and scroll lock peel one layer at a time when overlays stack (e.g. Sheet over Sheet)
+- ⌨️ **Dismiss Keyboard on Scroll** - On mobile, scrolling with an input focused auto-dismisses the soft keyboard (useAutoBlur hook · autoBlur prop)
 - 📖 **Well Documented** - Comprehensive docs with live examples via Storybook
 
 ---

package/dist/components/Drawer/Drawer.js

@@ -60,7 +60,9 @@ const $ = G(null), f = () => {
     enabled: D && S.clickOutside
   }), Z({
     handler: p,
-    enabled: D && S.escapeKey
+    enabled: D && S.escapeKey,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   });
   const j = {
     open: x,

package/dist/components/Input/Input.d.ts

@@ -56,6 +56,12 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
      * Floating label (focus 전에는 placeholder 위치, focus/값 있을 때 위로 이동)
      */
     label?: string;
+    /**
+     * 모바일에서 이 입력에 포커스된 채 스크롤하면 포커스를 해제해 소프트 키보드를
+     * 닫습니다 (useAutoBlur 내장). 데스크톱(비터치)에는 영향이 없습니다.
+     * @default false
+     */
+    autoBlur?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Input/Input.js

@@ -1,78 +1,82 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { forwardRef as D, useId as F, useRef as G, useEffect as H } from "react";
+import { forwardRef as H, useId as J, useRef as v, useEffect as K } from "react";
+import { useAutoBlur as O } from "../../hooks/useAutoBlur.js";
 import './Input.css';/* empty css          */
-const J = D(
+const P = H(
   ({
-    id: N,
+    id: y,
     autoFocus: $ = !1,
-    autoSelect: _ = !1,
-    variant: v = "outlined",
-    isError: y,
+    autoSelect: f = !1,
+    variant: B = "outlined",
+    isError: C,
     errorMessage: r,
     onClear: m,
     leftIcon: d,
     rightIcon: p,
-    className: C,
-    value: o,
-    color: f,
-    style: B,
-    maxLength: h,
+    className: R,
+    value: l,
+    color: _,
+    style: j,
+    maxLength: u,
     label: i,
+    autoBlur: x = !1,
     placeholder: b,
     ...w
-  }, j) => {
-    const x = F().replace(/:/g, ""), n = N ?? `motile-input-${x}`, R = G(null), l = j || R, s = y ?? !!r;
-    H(() => {
-      if ($ && l.current) {
-        const A = setTimeout(() => {
-          l.current && (l.current.focus(), _ && l.current.select());
+  }, L) => {
+    const k = J().replace(/:/g, ""), n = y ?? `motile-input-${k}`, E = v(null), o = L || E, N = v(null);
+    O({ containerRef: N, enabled: x });
+    const s = C ?? !!r;
+    K(() => {
+      if ($ && o.current) {
+        const G = setTimeout(() => {
+          o.current && (o.current.focus(), f && o.current.select());
         }, 50);
-        return () => clearTimeout(A);
+        return () => clearTimeout(G);
       }
-    }, [$, _]);
-    const e = "motile-input", u = m && o, L = !!d, k = u || p, E = [
+    }, [$, f]);
+    const e = "motile-input", h = m && l, S = !!d, T = h || p, z = [
       e,
-      `${e}--${v}`,
+      `${e}--${B}`,
       s && `${e}--error`,
-      L && `${e}--with-left-icon`,
-      k && `${e}--with-right-content`,
+      S && `${e}--with-left-icon`,
+      T && `${e}--with-right-content`,
       i && `${e}--with-label`,
-      C
-    ].filter(Boolean).join(" "), S = [
+      R
+    ].filter(Boolean).join(" "), A = [
       `${e}-wrapper`,
       i && `${e}-wrapper--with-label`,
       s && `${e}-wrapper--shake`
-    ].filter(Boolean).join(" "), T = [
+    ].filter(Boolean).join(" "), I = [
       `${e}__label`,
       s && `${e}__label--error`
-    ].filter(Boolean).join(" "), z = f ? { "--motile-input-color": f } : void 0, I = {
-      ...B
-    }, g = o ? String(o).length : 0, c = h !== void 0, q = [
+    ].filter(Boolean).join(" "), g = _ ? { "--motile-input-color": _ } : void 0, q = {
+      ...j
+    }, D = l ? String(l).length : 0, c = u !== void 0, F = [
       w["aria-describedby"],
       r ? `${n}-error` : void 0,
       c ? `${n}-counter` : void 0
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ a("div", { className: `${e}-root`, children: [
-      /* @__PURE__ */ a("div", { className: S, style: z, children: [
-        i && /* @__PURE__ */ t("label", { className: T, htmlFor: n, children: i }),
+    return /* @__PURE__ */ a("div", { className: `${e}-root`, ref: N, children: [
+      /* @__PURE__ */ a("div", { className: A, style: g, children: [
+        i && /* @__PURE__ */ t("label", { className: I, htmlFor: n, children: i }),
         d && /* @__PURE__ */ t("div", { className: `${e}__left-icon`, children: d }),
         /* @__PURE__ */ t(
           "input",
           {
             id: n,
             ...w,
-            "aria-describedby": q,
+            "aria-describedby": F,
             "aria-invalid": s || void 0,
-            ref: l,
-            className: E,
-            value: o,
-            maxLength: h,
-            style: I,
+            ref: o,
+            className: z,
+            value: l,
+            maxLength: u,
+            style: q,
             placeholder: i ? b || " " : b
           }
         ),
-        p && !u && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
-        u && /* @__PURE__ */ t(
+        p && !h && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
+        h && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -106,9 +110,9 @@ const J = D(
               }
             ),
             c && /* @__PURE__ */ a("span", { id: `${n}-counter`, className: `${e}__counter`, children: [
-              g,
+              D,
               "/",
-              h
+              u
             ] })
           ]
         }
@@ -116,7 +120,7 @@ const J = D(
     ] });
   }
 );
-J.displayName = "Input";
+P.displayName = "Input";
 export {
-  J as Input
+  P as Input
 };

package/dist/components/Modal/Modal.js

@@ -1,13 +1,13 @@
-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 { jsx as l, jsxs as K } from "react/jsx-runtime";
+import n, { useRef as L, useState as O, useEffect as P, useId as v, createContext as V, useContext as q } from "react";
 import { createPortal as z } from "react-dom";
 import { useClickOutside as A } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as D } from "../../hooks/useEscapeKey.js";
 import { useScrollLock as G } from "../../hooks/useScrollLock.js";
 import { Slot as J } from "../../utils/Slot.js";
 import './Modal.css';/* empty css          */
-const v = V(null), m = () => {
-  const o = q(v);
+const _ = V(null), m = () => {
+  const o = q(_);
   if (!o)
     throw new Error("Modal compound components must be used within Modal.Root");
   return o;
@@ -16,7 +16,7 @@ const v = V(null), m = () => {
   onOpenChange: t,
   children: e
 }) => {
-  const a = h(), d = h(), r = n.useMemo(
+  const a = v(), d = v(), r = n.useMemo(
     () => ({
       open: o,
       onOpenChange: t,
@@ -25,8 +25,8 @@ const v = V(null), m = () => {
     }),
     [o, t, a, d]
   );
-  return /* @__PURE__ */ l(v.Provider, { value: r, children: e });
-}, _ = n.forwardRef(
+  return /* @__PURE__ */ l(_.Provider, { value: r, children: e });
+}, N = n.forwardRef(
   ({
     container: o,
     variant: t = "scale",
@@ -37,14 +37,14 @@ const v = V(null), m = () => {
     zIndex: s = 1e3,
     className: u,
     onClick: i,
-    style: $,
+    style: g,
     ...p
-  }, g) => {
-    const { open: c, onOpenChange: f } = m(), M = k(null), [S, E] = O(!1);
+  }, S) => {
+    const { open: c, onOpenChange: f } = m(), M = L(null), [E, T] = O(!1);
     P(() => {
-      E(!0);
+      T(!0);
     }, []);
-    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, T = typeof e == "boolean" ? e : e.escapeKey ?? !1;
+    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, h = typeof e == "boolean" ? e : e.escapeKey ?? !1;
     G({
       enabled: c && !a,
       allowedSelectors: [".motile-modal__content"]
@@ -56,30 +56,32 @@ const v = V(null), m = () => {
       enabled: c
     }), D({
       handler: () => {
-        T && f(!1);
+        h && f(!1);
       },
-      enabled: c
+      enabled: c && h,
+      stacked: !0
+      // 중첩 오버레이에서 ESC는 최상단만 닫는다
     });
     const j = (y) => {
       i == null || i(y), y.target === y.currentTarget && b && f(!1);
     };
-    if (!S || !c) return null;
-    const F = {
+    if (!E || !c) return null;
+    const k = {
       zIndex: s,
-      ...$
-    }, H = {
+      ...g
+    }, F = {
       ...d && { "--modal-width": d },
       ...r && { "--modal-max-width": r },
       zIndex: s + 1
-    }, K = /* @__PURE__ */ l(
+    }, H = /* @__PURE__ */ l(
       "div",
       {
-        ref: g,
+        ref: S,
         className: `motile-modal__backdrop ${u || ""}`,
         "data-state": c ? "open" : "closed",
         "data-variant": t,
         onClick: j,
-        style: F,
+        style: k,
         ...p,
         children: /* @__PURE__ */ l(
           "div",
@@ -87,17 +89,17 @@ const v = V(null), m = () => {
             ref: M,
             className: "motile-modal",
             "data-variant": t,
-            style: H,
+            style: F,
             children: p.children
           }
         )
       }
     );
-    return z(K, o || document.body);
+    return z(H, o || document.body);
   }
 );
-_.displayName = "Modal.Overlay";
-const N = n.forwardRef(
+N.displayName = "Modal.Overlay";
+const w = n.forwardRef(
   ({ className: o, forceMount: t, ...e }, a) => {
     const { open: d, titleId: r, descriptionId: s } = m();
     return !d && !t ? null : /* @__PURE__ */ l(
@@ -115,8 +117,8 @@ const N = n.forwardRef(
     );
   }
 );
-N.displayName = "Modal.Content";
-const w = n.forwardRef(
+w.displayName = "Modal.Content";
+const x = n.forwardRef(
   ({ className: o, ...t }, e) => {
     const { titleId: a } = m();
     return /* @__PURE__ */ l(
@@ -130,8 +132,8 @@ const w = n.forwardRef(
     );
   }
 );
-w.displayName = "Modal.Title";
-const x = n.forwardRef(
+x.displayName = "Modal.Title";
+const R = n.forwardRef(
   ({ className: o, ...t }, e) => {
     const { descriptionId: a } = m();
     return /* @__PURE__ */ l(
@@ -145,8 +147,8 @@ const x = n.forwardRef(
     );
   }
 );
-x.displayName = "Modal.Body";
-const R = n.forwardRef(
+R.displayName = "Modal.Body";
+const C = n.forwardRef(
   ({ asChild: o, className: t, onClick: e, children: a, ...d }, r) => {
     const { onOpenChange: s } = m(), u = (i) => {
       e == null || e(i), s(!1);
@@ -168,7 +170,7 @@ const R = n.forwardRef(
         onClick: u,
         "aria-label": "닫기",
         ...d,
-        children: a || /* @__PURE__ */ L(
+        children: a || /* @__PURE__ */ K(
           "svg",
           {
             width: "18",
@@ -189,8 +191,8 @@ const R = n.forwardRef(
     );
   }
 );
-R.displayName = "Modal.Close";
-const C = n.forwardRef(
+C.displayName = "Modal.Close";
+const I = n.forwardRef(
   ({ className: o, ...t }, e) => /* @__PURE__ */ l(
     "div",
     {
@@ -200,8 +202,8 @@ const C = n.forwardRef(
     }
   )
 );
-C.displayName = "Modal.Footer";
-const I = n.forwardRef(
+I.displayName = "Modal.Footer";
+const $ = n.forwardRef(
   ({ className: o, ...t }, e) => /* @__PURE__ */ l(
     "div",
     {
@@ -211,25 +213,25 @@ const I = n.forwardRef(
     }
   )
 );
-I.displayName = "Modal.Header";
+$.displayName = "Modal.Header";
 const te = {
   Root: Q,
-  Overlay: _,
-  Content: N,
-  Title: w,
-  Body: x,
-  Close: R,
-  Footer: C,
-  Header: I
+  Overlay: N,
+  Content: w,
+  Title: x,
+  Body: R,
+  Close: C,
+  Footer: I,
+  Header: $
 };
 export {
   te as Modal,
-  x as ModalBody,
-  R as ModalClose,
-  N as ModalContent,
-  C as ModalFooter,
-  I as ModalHeader,
-  _ as ModalOverlay,
+  R as ModalBody,
+  C as ModalClose,
+  w as ModalContent,
+  I as ModalFooter,
+  $ as ModalHeader,
+  N as ModalOverlay,
   Q as ModalRoot,
-  w as ModalTitle
+  x as ModalTitle
 };

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
-import { jsxs as $, jsx as g } from "react/jsx-runtime";
-import k, { useCallback as b, useId as N, useRef as I, useMemo as j, createContext as E, useContext as T } from "react";
+import { jsxs as y, jsx as g } from "react/jsx-runtime";
+import $, { useCallback as b, useId as N, useRef as I, useMemo as j, createContext as E, useContext as T } from "react";
 import { useClickOutside as h } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as A } from "../../hooks/useEscapeKey.js";
 import { FloatingArrow as B } from "../../utils/FloatingArrow.js";
@@ -17,7 +17,7 @@ function K({
   defaultValue: p = !1,
   onChange: o
 }) {
-  const e = t !== void 0, [r, s] = k.useState(p), l = e ? t : r, c = b(
+  const e = t !== void 0, [r, s] = $.useState(p), l = e ? t : r, c = b(
     (a) => {
       const d = typeof a == "function" ? a(l) : a;
       e || s(d), o == null || o(d);
@@ -38,15 +38,15 @@ function M({
   open: a,
   defaultOpen: d = !1,
   onOpenChange: m,
-  onClickOutside: f,
+  onClickOutside: u,
   onDismiss: v,
-  autoClose: u = !0
+  autoClose: f = !0
 }) {
   const n = N().replace(/:/g, ""), x = I(null), w = I(null), P = I(null), [R, i] = K({
     value: a,
     defaultValue: d,
     onChange: m
-  }), y = j(
+  }), k = j(
     () => ({
       open: R,
       setOpen: i,
@@ -56,10 +56,10 @@ function M({
       showArrow: r,
       zIndex: s,
       color: l,
-      autoClose: u,
+      autoClose: f,
       bounceCount: c,
       onOpenChange: m,
-      onClickOutside: f,
+      onClickOutside: u,
       onDismiss: v,
       triggerId: `${n}-trigger`,
       contentId: `${n}-content`,
@@ -76,15 +76,15 @@ function M({
       r,
       s,
       l,
-      u,
+      f,
       c,
       m,
-      f,
+      u,
       v,
       n
     ]
   );
-  return /* @__PURE__ */ g(S.Provider, { value: y, children: /* @__PURE__ */ g("div", { ref: P, className: "motile-popover-wrapper", children: t }) });
+  return /* @__PURE__ */ g(S.Provider, { value: k, children: /* @__PURE__ */ g("div", { ref: P, className: "motile-popover-wrapper", children: t }) });
 }
 function V({ children: t, asChild: p = !1 }) {
   const { open: o, setOpen: e, triggerId: r, contentId: s, triggerRef: l } = C(), c = b(() => {
@@ -129,9 +129,9 @@ function q({
     showArrow: a,
     zIndex: d,
     color: m,
-    autoClose: f,
+    autoClose: u,
     bounceCount: v,
-    onClickOutside: u,
+    onClickOutside: f,
     onDismiss: n,
     contentId: x,
     contentRef: w,
@@ -140,23 +140,27 @@ function q({
   if (A({
     handler: b(
       (i) => {
-        f && (n == null || n(i), i.defaultPrevented || r(!1));
+        u && (n == null || n(i), i.defaultPrevented || r(!1));
       },
-      [f, n, r]
+      [u, n, r]
     ),
-    enabled: e
+    // enabled를 정직하게 계산 — 닫히지 않을(autoClose=false) 팝오버가
+    // ESC 스택의 top을 점유해 아래 오버레이의 ESC를 삼키지 않게
+    enabled: e && u,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   }), h({
     refs: [P],
     handler: b(
       (i) => {
-        f && (u == null || u(i), n == null || n(i), i.defaultPrevented || r(!1));
+        u && (f == null || f(i), n == null || n(i), i.defaultPrevented || r(!1));
       },
-      [f, u, n, r]
+      [u, f, n, r]
     ),
     enabled: e
   }), !e) return null;
   const R = v !== 0;
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: w,