@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/modal/Modal.esm.js

@@ -1,137 +1,167 @@
 import { cn as e } from "../../lib/utils.esm.js";
 import { useIsMobile as t } from "../../hooks/useMediaQuery.esm.js";
-import { overlayStack as n } from "../../lib/overlay-stack.esm.js";
-import { Portal as r } from "../../lib/Portal.esm.js";
-import { useEffect as i, useId as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { AnimatePresence as c, motion as l, useDragControls as u } from "motion/react";
+import { useScrollLock as n } from "../../hooks/useScrollLock.esm.js";
+import { useFocusTrap as r } from "../../hooks/useFocusTrap.esm.js";
+import { overlayStack as i } from "../../lib/overlay-stack.esm.js";
+import { Portal as a } from "../../lib/Portal.esm.js";
+import { ModalFocusTrapContext as o, useModalSubViews as s } from "./ModalFocusTrapContext.esm.js";
+import { useEffect as c, useId as l, useLayoutEffect as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { AnimatePresence as m, motion as h, useDragControls as g, useReducedMotion as _ } from "motion/react";
 //#region src/components/modal/Modal.tsx
-function d({ isOpen: d, onClose: f, title: p, widthPx: m, footer: h, bodyPadded: g = !1, subView: _, className: v, children: y }) {
-	let b = t(), x = a(), S = u();
-	return i(() => {
-		if (d) return n.push(x), document.body.style.overflow = "hidden", () => {
-			n.pop(x), n.isEmpty() && (document.body.style.overflow = "");
+function v({ isOpen: v, onClose: y, title: b, dismissible: x = !0, trapFocus: S = !0, onExitComplete: C, widthPx: w, footer: T, bodyPadded: E = !1, subView: D, className: O, children: k }) {
+	let A = t(), j = l(), M = l(), N = g(), P = _(), [F, I] = d(null), { context: L, isTop: R } = s(v, S, j);
+	u(() => {
+		F && (F.inert = !v);
+	}, [F, v]);
+	let z = (e, t) => {
+		x && (t.offset.y > 100 || t.velocity.y > 500) && y();
+	};
+	c(() => {
+		if (v) return i.push(j), () => {
+			i.pop(j);
 		};
-	}, [d, x]), i(() => {
+	}, [v, j]), n(v), r(F, {
+		enabled: v,
+		trapFocus: S,
+		canTrap: R
+	}), c(() => {
 		let e = (e) => {
-			e.key === "Escape" && n.isTop(x) && f();
+			e.key !== "Escape" || !x || R() && y();
 		};
-		return d && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+		return v && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		d,
-		f,
-		x
-	]), /* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ o(l.div, {
+		v,
+		y,
+		x,
+		R
+	]);
+	let B = /* @__PURE__ */ p(a, { children: [/* @__PURE__ */ f(m, { children: v && /* @__PURE__ */ f(h.div, {
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: { duration: .2 },
+		transition: { duration: P ? 0 : .2 },
 		onClick: () => {
-			n.isTop(x) && f();
+			!x || !R() || y();
 		},
-		className: "fixed inset-0 z-50 bg-black/50"
-	}, "modal-backdrop") }), /* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ s(l.div, {
-		initial: b ? { y: "100%" } : {
-			opacity: 0,
-			y: 24,
-			scale: .96
-		},
-		animate: b ? { y: 0 } : {
-			opacity: 1,
-			y: 0,
-			scale: 1
-		},
-		exit: b ? {
-			y: "100%",
-			transition: {
-				duration: .2,
+		className: "fixed inset-0 z-overlay bg-bg-overlay"
+	}, "modal-backdrop") }), /* @__PURE__ */ f(m, {
+		onExitComplete: C,
+		children: v && /* @__PURE__ */ p(h.div, {
+			ref: I,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": b ? M : void 0,
+			tabIndex: -1,
+			initial: A ? { y: "100%" } : {
+				opacity: 0,
+				y: 24,
+				scale: .96
+			},
+			animate: A ? { y: 0 } : {
+				opacity: 1,
+				y: 0,
+				scale: 1
+			},
+			exit: A ? {
+				y: "100%",
+				transition: {
+					duration: P ? 0 : .2,
+					ease: [
+						.4,
+						0,
+						1,
+						1
+					]
+				}
+			} : {
+				opacity: 0,
+				y: 24,
+				scale: .96
+			},
+			transition: P ? { duration: 0 } : A ? {
+				type: "spring",
+				damping: 38,
+				stiffness: 320
+			} : {
+				duration: .25,
 				ease: [
-					.4,
+					.32,
+					.72,
 					0,
-					1,
 					1
 				]
-			}
-		} : {
-			opacity: 0,
-			y: 24,
-			scale: .96
-		},
-		transition: b ? {
-			type: "spring",
-			damping: 38,
-			stiffness: 320
-		} : {
-			duration: .25,
-			ease: [
-				.32,
-				.72,
-				0,
-				1
-			]
-		},
-		drag: b ? "y" : !1,
-		dragListener: !1,
-		dragControls: S,
-		dragConstraints: {
-			top: 0,
-			bottom: 0
-		},
-		dragElastic: {
-			top: 0,
-			bottom: .4
-		},
-		onDragEnd: (e, t) => {
-			(t.offset.y > 100 || t.velocity.y > 500) && f();
-		},
-		className: e("fixed -bottom-8 left-0 right-0 z-50 mx-auto flex max-h-[88vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white pb-8 shadow-xl sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-h-[90vh] sm:w-auto sm:min-w-[320px] sm:max-w-[90vw] sm:rounded-lg sm:pb-0 dark:bg-neutral-800", v),
-		style: b ? void 0 : {
-			translateX: "-50%",
-			translateY: "-50%",
-			...m ? { width: m } : {}
-		},
-		children: [
-			/* @__PURE__ */ o("div", {
-				className: "flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden",
-				onPointerDown: (e) => S.start(e),
-				children: /* @__PURE__ */ o("div", { className: "h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-600" })
-			}),
-			p && /* @__PURE__ */ s("div", {
-				className: "flex items-center justify-between px-4 py-3",
-				children: [/* @__PURE__ */ o("h3", {
-					className: "text-base font-semibold text-neutral-900 sm:text-lg dark:text-white",
-					children: p
-				}), /* @__PURE__ */ o("button", {
-					onClick: f,
-					className: "rounded p-1 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300",
-					"aria-label": "닫기",
-					children: /* @__PURE__ */ o("svg", {
-						className: "h-5 w-5",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ o("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M6 18L18 6M6 6l12 12"
+			},
+			drag: A && x ? "y" : !1,
+			dragListener: !1,
+			dragControls: N,
+			dragConstraints: {
+				top: 0,
+				bottom: 0
+			},
+			dragElastic: {
+				top: 0,
+				bottom: .4
+			},
+			onDragEnd: z,
+			className: e("fixed -bottom-8 left-0 right-0 z-overlay mx-auto flex max-h-[88vh] w-full flex-col overflow-hidden rounded-t-sheet bg-bg-surface text-fg-default pb-8 shadow-overlay outline-none sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-h-[90vh] sm:w-auto sm:min-w-[320px] sm:max-w-[90vw] sm:rounded-surface sm:pb-0", O),
+			style: A ? void 0 : {
+				translateX: "-50%",
+				translateY: "-50%",
+				...w ? { width: w } : {}
+			},
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: e("flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden", !x && "pointer-events-none opacity-0"),
+					onPointerDown: (e) => {
+						x && N.start(e);
+					},
+					children: /* @__PURE__ */ f("div", { className: "h-1 w-10 rounded-full bg-bg-handle" })
+				}),
+				b && /* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between px-4 py-3",
+					children: [/* @__PURE__ */ f("h3", {
+						id: M,
+						className: "text-base font-semibold text-fg-default sm:text-lg",
+						children: b
+					}), /* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: y,
+						disabled: !x,
+						className: e("rounded-control-medium p-1 text-fg-muted hover:text-fg-default", !x && "pointer-events-none opacity-0"),
+						"aria-label": "닫기",
+						children: /* @__PURE__ */ f("svg", {
+							className: "h-5 w-5",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ f("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M6 18L18 6M6 6l12 12"
+							})
 						})
-					})
-				})]
-			}),
-			/* @__PURE__ */ s("div", {
-				className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
-				children: [/* @__PURE__ */ o("div", {
-					className: `transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden${g ? " mx-1 sm:mx-4" : ""}`,
-					children: y
-				}), _]
-			}),
-			h && /* @__PURE__ */ o("div", {
-				className: "shrink-0",
-				children: h
-			})
-		]
-	}, "modal-sheet") })] });
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
+					children: [/* @__PURE__ */ f("div", {
+						className: e("transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden", E && "mx-1 sm:mx-4"),
+						children: k
+					}), D]
+				}),
+				T && /* @__PURE__ */ f("div", {
+					className: "shrink-0",
+					children: T
+				})
+			]
+		}, "modal-sheet")
+	})] });
+	return /* @__PURE__ */ f(o.Provider, {
+		value: L,
+		children: B
+	});
 }
 //#endregion
-export { d as Modal };
+export { v as Modal };

package/dist/components/modal/ModalFocusTrapContext.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/overlay-stack.cjs");let t=require("react");var n={isOpen:!0,trapFocus:!0,registerSubView:()=>()=>{},isTopSubView:t=>e.overlayStack.isTop(t)},r=(0,t.createContext)(n);function i(n,r,i){let a=(0,t.useRef)(new Set),o=(0,t.useCallback)(e=>{let t=a.current;return t.add(e),()=>{t.delete(e)}},[]),s=(0,t.useCallback)(t=>{let n=Array.from(a.current);return n[n.length-1]===t&&(e.overlayStack.isTop(t)||e.overlayStack.isTop(i))},[i]);return{context:(0,t.useMemo)(()=>({isOpen:n,trapFocus:r,registerSubView:o,isTopSubView:s}),[n,r,o,s]),isTop:(0,t.useCallback)(()=>n&&a.current.size===0&&e.overlayStack.isTop(i),[n,i])}}exports.ModalFocusTrapContext=r,exports.defaultModalFocusTrapContext=n,exports.useModalSubViews=i;

package/dist/components/modal/ModalFocusTrapContext.d.ts

@@ -0,0 +1,18 @@
+interface ModalFocusTrapContextValue {
+    isOpen: boolean;
+    trapFocus: boolean;
+    registerSubView: (id: string) => () => void;
+    isTopSubView: (id: string) => boolean;
+}
+export declare const defaultModalFocusTrapContext: ModalFocusTrapContextValue;
+export declare const ModalFocusTrapContext: import('react').Context<ModalFocusTrapContextValue>;
+export declare function useModalSubViews(isOpen: boolean, trapFocus: boolean, overlayId: string): {
+    context: {
+        isOpen: boolean;
+        trapFocus: boolean;
+        registerSubView: (id: string) => () => void;
+        isTopSubView: (id: string) => boolean;
+    };
+    isTop: () => boolean;
+};
+export {};

package/dist/components/modal/ModalFocusTrapContext.esm.js

@@ -0,0 +1,36 @@
+import { overlayStack as e } from "../../lib/overlay-stack.esm.js";
+import { createContext as t, useCallback as n, useMemo as r, useRef as i } from "react";
+//#region src/components/modal/ModalFocusTrapContext.ts
+var a = {
+	isOpen: !0,
+	trapFocus: !0,
+	registerSubView: () => () => {},
+	isTopSubView: (t) => e.isTop(t)
+}, o = t(a);
+function s(t, a, o) {
+	let s = i(/* @__PURE__ */ new Set()), c = n((e) => {
+		let t = s.current;
+		return t.add(e), () => {
+			t.delete(e);
+		};
+	}, []), l = n((t) => {
+		let n = Array.from(s.current);
+		return n[n.length - 1] === t && (e.isTop(t) || e.isTop(o));
+	}, [o]);
+	return {
+		context: r(() => ({
+			isOpen: t,
+			trapFocus: a,
+			registerSubView: c,
+			isTopSubView: l
+		}), [
+			t,
+			a,
+			c,
+			l
+		]),
+		isTop: n(() => t && s.current.size === 0 && e.isTop(o), [t, o])
+	};
+}
+//#endregion
+export { o as ModalFocusTrapContext, a as defaultModalFocusTrapContext, s as useModalSubViews };

package/dist/components/modal/ModalSubView.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/arrow-left.cjs"),n=require("../../hooks/useFocusTrap.cjs"),r=require("../../lib/overlay-stack.cjs"),i=require("./ModalFocusTrapContext.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("motion/react");function c({open:c,onBack:l,title:u,headerRight:d,bodyPadded:f=!0,contentPadded:p=!0,variant:m=`full`,children:h}){let g=(0,a.useId)(),_=(0,s.useReducedMotion)(),[v,y]=(0,a.useState)(null),[b,x]=(0,a.useState)(null),{isOpen:S,trapFocus:C,registerSubView:w,isTopSubView:T}=(0,a.useContext)(i.ModalFocusTrapContext),E=c&&S;(0,a.useEffect)(()=>{if(!E)return;let e=w(g);return r.overlayStack.push(g),()=>{r.overlayStack.pop(g),e()}},[E,g,w]),n.useFocusTrap(v,{enabled:E,trapFocus:C,canTrap:()=>T(g),cover:m===`drawer`?b:v}),(0,a.useEffect)(()=>{let e=e=>{e.key===`Escape`&&T(g)&&l()};return E&&window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[E,l,g,T]);let D=(0,o.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-border-subtle px-4 py-3`,children:[(0,o.jsx)(`button`,{type:`button`,onClick:l,className:`rounded-control-medium p-1 text-fg-muted transition-colors hover:bg-bg-subtle hover:text-fg-default`,"aria-label":`뒤로 가기`,children:(0,o.jsx)(t.ArrowLeft,{className:`h-4 w-4`})}),u&&(0,o.jsx)(`div`,{className:`flex-1 text-sm font-semibold text-fg-default`,children:u}),d]}),O=(0,o.jsx)(`div`,{className:e.cn(`transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden`,f&&`mx-1 sm:mx-4`),children:p?(0,o.jsx)(`div`,{className:`px-2 py-3 sm:px-4 sm:py-5`,children:h}):h});return m===`drawer`?(0,o.jsx)(s.AnimatePresence,{children:c&&(0,o.jsxs)(`div`,{ref:x,className:`absolute inset-0 z-10`,children:[(0,o.jsx)(s.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:_?0:.2},onClick:l,className:`absolute inset-0 bg-black/40`},`subview-drawer-backdrop`),(0,o.jsxs)(s.motion.div,{ref:y,tabIndex:-1,initial:{x:`100%`},animate:{x:0},exit:{x:`100%`,transition:{duration:_?0:.2,ease:[.4,0,1,1]}},transition:_?{duration:0}:{type:`spring`,damping:30,stiffness:320},className:`absolute right-0 top-0 bottom-0 flex w-[85%] max-w-md flex-col bg-bg-surface text-fg-default shadow-overlay outline-none`,children:[D,O]},`subview-drawer-sheet`)]})}):(0,o.jsx)(s.AnimatePresence,{children:c&&(0,o.jsxs)(s.motion.div,{ref:y,tabIndex:-1,initial:{x:`100%`},animate:{x:0},exit:{x:`100%`},transition:{duration:_?0:.25,ease:`easeOut`},className:`absolute inset-0 z-10 flex flex-col bg-bg-surface text-fg-default outline-none`,children:[D,O]})})}exports.ModalSubView=c;

package/dist/{src/components → components}/modal/ModalSubView.d.ts

@@ -43,8 +43,13 @@ export interface ModalSubViewProps {
  * 들어가면 서브뷰 안에서만 스크롤이 생겨 부모와 높이가 어긋나 보인다. 긴 목록은 부모 모달 자체를
  * 그만큼 키우거나(`widthPx`/콘텐츠 양 조정), 별도 페이지/Drawer로 분리할 것.
  *
+ * **포커스**: 열리면 뒤로 가기 버튼에 포커스하고 닫히면 연 요소로 돌아간다. 열린 동안 Tab은
+ * 서브뷰와, 서브뷰가 덮지 않은 부모 시트 영역(헤더·footer 등)을 DOM 순서로 돈다. 덮인 본문으로는
+ * 가지 않는다 — 화면에 보이고 마우스로 누를 수 있는 요소는 키보드로도 닿아야 하기 때문이다.
+ * 부모와 서브뷰가 같은 커밋에서 함께 열리는 경우도 지원한다.
+ *
  * **ESC 동작**: SubView가 열려있는 동안 ESC는 SubView의 `onBack`을 부르고 모달은 유지된다.
- * `overlayStack`을 push해 Modal보다 위 layer로 등록 — Modal의 ESC 핸들러는 자기가 top일 때만 실행.
+ * 부모가 열린 서브뷰에 양보하므로 부모와 동시에 열려도 서브뷰부터 닫힌다.
  *
  * @example
  * ```tsx

package/dist/components/modal/ModalSubView.esm.js

@@ -1,64 +1,82 @@
-import { ArrowLeft as e } from "../../node_modules/lucide-react/dist/esm/icons/arrow-left.esm.js";
-import { overlayStack as t } from "../../lib/overlay-stack.esm.js";
-import { useEffect as n, useId as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { AnimatePresence as o, motion as s } from "motion/react";
+import { cn as e } from "../../lib/utils.esm.js";
+import { ArrowLeft as t } from "../../node_modules/lucide-react/dist/esm/icons/arrow-left.esm.js";
+import { useFocusTrap as n } from "../../hooks/useFocusTrap.esm.js";
+import { overlayStack as r } from "../../lib/overlay-stack.esm.js";
+import { ModalFocusTrapContext as i } from "./ModalFocusTrapContext.esm.js";
+import { useContext as a, useEffect as o, useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { AnimatePresence as d, motion as f, useReducedMotion as p } from "motion/react";
 //#region src/components/modal/ModalSubView.tsx
-function c({ open: c, onBack: l, title: u, headerRight: d, bodyPadded: f = !0, contentPadded: p = !0, variant: m = "full", children: h }) {
-	let g = r();
-	n(() => {
-		if (c) return t.push(g), () => {
-			t.pop(g);
+function m({ open: m, onBack: h, title: g, headerRight: _, bodyPadded: v = !0, contentPadded: y = !0, variant: b = "full", children: x }) {
+	let S = s(), C = p(), [w, T] = c(null), [E, D] = c(null), { isOpen: O, trapFocus: k, registerSubView: A, isTopSubView: j } = a(i), M = m && O;
+	o(() => {
+		if (!M) return;
+		let e = A(S);
+		return r.push(S), () => {
+			r.pop(S), e();
 		};
-	}, [c, g]), n(() => {
+	}, [
+		M,
+		S,
+		A
+	]), n(w, {
+		enabled: M,
+		trapFocus: k,
+		canTrap: () => j(S),
+		cover: b === "drawer" ? E : w
+	}), o(() => {
 		let e = (e) => {
-			e.key === "Escape" && t.isTop(g) && l();
+			e.key === "Escape" && j(S) && h();
 		};
-		return c && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+		return M && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		c,
-		l,
-		g
+		M,
+		h,
+		S,
+		j
 	]);
-	let _ = /* @__PURE__ */ a("div", {
-		className: "flex items-center gap-2 border-b border-border-tertiary px-4 py-3 dark:border-neutral-700",
+	let N = /* @__PURE__ */ u("div", {
+		className: "flex items-center gap-2 border-b border-border-subtle px-4 py-3",
 		children: [
-			/* @__PURE__ */ i("button", {
+			/* @__PURE__ */ l("button", {
 				type: "button",
-				onClick: l,
-				className: "rounded p-1 text-text-tertiary transition-colors hover:bg-bg-base-secondary hover:text-text-secondary dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200",
+				onClick: h,
+				className: "rounded-control-medium p-1 text-fg-muted transition-colors hover:bg-bg-subtle hover:text-fg-default",
 				"aria-label": "뒤로 가기",
-				children: /* @__PURE__ */ i(e, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ l(t, { className: "h-4 w-4" })
 			}),
-			u && /* @__PURE__ */ i("div", {
-				className: "flex-1 text-sm font-semibold text-text-primary dark:text-white",
-				children: u
+			g && /* @__PURE__ */ l("div", {
+				className: "flex-1 text-sm font-semibold text-fg-default",
+				children: g
 			}),
-			d
+			_
 		]
-	}), v = /* @__PURE__ */ i("div", {
-		className: `transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden${f ? " mx-1 sm:mx-4" : ""}`,
-		children: p ? /* @__PURE__ */ i("div", {
+	}), P = /* @__PURE__ */ l("div", {
+		className: e("transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden", v && "mx-1 sm:mx-4"),
+		children: y ? /* @__PURE__ */ l("div", {
 			className: "px-2 py-3 sm:px-4 sm:py-5",
-			children: h
-		}) : h
+			children: x
+		}) : x
 	});
-	return m === "drawer" ? /* @__PURE__ */ i(o, { children: c && /* @__PURE__ */ a("div", {
+	return b === "drawer" ? /* @__PURE__ */ l(d, { children: m && /* @__PURE__ */ u("div", {
+		ref: D,
 		className: "absolute inset-0 z-10",
-		children: [/* @__PURE__ */ i(s.div, {
+		children: [/* @__PURE__ */ l(f.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			exit: { opacity: 0 },
-			transition: { duration: .2 },
-			onClick: l,
+			transition: { duration: C ? 0 : .2 },
+			onClick: h,
 			className: "absolute inset-0 bg-black/40"
-		}, "subview-drawer-backdrop"), /* @__PURE__ */ a(s.div, {
+		}, "subview-drawer-backdrop"), /* @__PURE__ */ u(f.div, {
+			ref: T,
+			tabIndex: -1,
 			initial: { x: "100%" },
 			animate: { x: 0 },
 			exit: {
 				x: "100%",
 				transition: {
-					duration: .2,
+					duration: C ? 0 : .2,
 					ease: [
 						.4,
 						0,
@@ -67,25 +85,27 @@ function c({ open: c, onBack: l, title: u, headerRight: d, bodyPadded: f = !0, c
 					]
 				}
 			},
-			transition: {
+			transition: C ? { duration: 0 } : {
 				type: "spring",
 				damping: 30,
 				stiffness: 320
 			},
-			className: "absolute right-0 top-0 bottom-0 flex w-[85%] max-w-md flex-col bg-bg-white shadow-xl dark:bg-neutral-800",
-			children: [_, v]
+			className: "absolute right-0 top-0 bottom-0 flex w-[85%] max-w-md flex-col bg-bg-surface text-fg-default shadow-overlay outline-none",
+			children: [N, P]
 		}, "subview-drawer-sheet")]
-	}) }) : /* @__PURE__ */ i(o, { children: c && /* @__PURE__ */ a(s.div, {
+	}) }) : /* @__PURE__ */ l(d, { children: m && /* @__PURE__ */ u(f.div, {
+		ref: T,
+		tabIndex: -1,
 		initial: { x: "100%" },
 		animate: { x: 0 },
 		exit: { x: "100%" },
 		transition: {
-			duration: .25,
+			duration: C ? 0 : .25,
 			ease: "easeOut"
 		},
-		className: "absolute inset-0 z-10 flex flex-col bg-bg-white dark:bg-neutral-800",
-		children: [_, v]
+		className: "absolute inset-0 z-10 flex flex-col bg-bg-surface text-fg-default outline-none",
+		children: [N, P]
 	}) });
 }
 //#endregion
-export { c as ModalSubView };
+export { m as ModalSubView };

package/dist/components/modal/StandardModal.cjs

@@ -0,0 +1 @@
+const e=require("../button/Button.cjs"),t=require("../../hooks/useMediaQuery.cjs"),n=require("./Modal.cjs");let r=require("react/jsx-runtime");function i({isOpen:i,onClose:a,title:o,dismissible:s,trapFocus:c,onExitComplete:l,widthPx:u,subView:d,primaryAction:f,secondaryAction:p,leftAction:m,bodyNoPadding:h,children:g}){let _=t.useIsMobile(),v=f||p||m,y=_?`mini`:`small`,b=(t,n)=>(0,r.jsx)(e.Button,{variant:t.variant??n.variant,appearance:t.appearance??n.appearance,size:y,display:`block`,leadingIcon:t.leadingIcon,onClick:t.onClick,loading:t.loading,disabled:t.disabled,children:t.label});return(0,r.jsx)(n.Modal,{isOpen:i,onClose:a,title:o,dismissible:s,trapFocus:c,onExitComplete:l,widthPx:u,bodyPadded:!0,subView:d,footer:v?(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-2 border-t border-border-subtle px-4 py-3 sm:px-5 sm:py-4`,children:[(0,r.jsx)(`div`,{children:m&&(0,r.jsx)(`div`,{className:`w-[88px] sm:w-28`,children:b(m,{variant:`tertiary`,appearance:`outlined`})})}),(0,r.jsxs)(`div`,{className:`flex gap-2`,children:[p&&(0,r.jsx)(`div`,{className:`w-16 sm:w-24`,children:b(p,{variant:`secondary`,appearance:`outlined`})}),f&&(0,r.jsx)(`div`,{className:`w-16 sm:w-24`,children:b(f,{variant:`primary`})})]})]}):void 0,children:h?g:(0,r.jsx)(`div`,{className:`px-2 py-3 sm:px-4 sm:py-5`,children:g})})}exports.StandardModal=i;

package/dist/{src/components → components}/modal/StandardModal.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonAppearance, ButtonVariant } from '../../../components/button';
+import { ButtonAppearance, ButtonVariant } from '../button/index.js';
 export interface StandardModalAction {
     label: ReactNode;
     onClick: () => void;
@@ -14,6 +14,12 @@ export interface StandardModalProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
+    /** Modal의 `dismissible`로 전달한다. footer 액션 버튼의 표시는 바꾸지 않는다. @default true */
+    dismissible?: boolean;
+    /** Modal의 `trapFocus`로 전달한다(규칙은 Modal 참고). @default true */
+    trapFocus?: boolean;
+    /** Modal의 `onExitComplete`로 전달한다. 닫힘 모션이 끝난 뒤 호출된다. */
+    onExitComplete?: () => void;
     widthPx?: number;
     /** 우측 슬라이드 서브뷰. ModalSubView 그대로 전달. */
     subView?: ReactNode;
@@ -56,4 +62,4 @@ export interface StandardModalProps {
  * </StandardModal>
  * ```
  */
-export declare function StandardModal({ isOpen, onClose, title, widthPx, subView, primaryAction, secondaryAction, leftAction, bodyNoPadding, children, }: StandardModalProps): import("react").JSX.Element;
+export declare function StandardModal({ isOpen, onClose, title, dismissible, trapFocus, onExitComplete, widthPx, subView, primaryAction, secondaryAction, leftAction, bodyNoPadding, children, }: StandardModalProps): import("react").JSX.Element;

package/dist/components/modal/StandardModal.esm.js

@@ -3,11 +3,11 @@ import { useIsMobile as t } from "../../hooks/useMediaQuery.esm.js";
 import { Modal as n } from "./Modal.esm.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/modal/StandardModal.tsx
-function a({ isOpen: a, onClose: o, title: s, widthPx: c, subView: l, primaryAction: u, secondaryAction: d, leftAction: f, bodyNoPadding: p, children: m }) {
-	let h = t(), g = u || d || f, _ = h ? "mini" : "small", v = (t, n) => /* @__PURE__ */ r(e, {
+function a({ isOpen: a, onClose: o, title: s, dismissible: c, trapFocus: l, onExitComplete: u, widthPx: d, subView: f, primaryAction: p, secondaryAction: m, leftAction: h, bodyNoPadding: g, children: _ }) {
+	let v = t(), y = p || m || h, b = v ? "mini" : "small", x = (t, n) => /* @__PURE__ */ r(e, {
 		variant: t.variant ?? n.variant,
 		appearance: t.appearance ?? n.appearance,
-		size: _,
+		size: b,
 		display: "block",
 		leadingIcon: t.leadingIcon,
 		onClick: t.onClick,
@@ -19,34 +19,37 @@ function a({ isOpen: a, onClose: o, title: s, widthPx: c, subView: l, primaryAct
 		isOpen: a,
 		onClose: o,
 		title: s,
-		widthPx: c,
+		dismissible: c,
+		trapFocus: l,
+		onExitComplete: u,
+		widthPx: d,
 		bodyPadded: !0,
-		subView: l,
-		footer: g ? /* @__PURE__ */ i("div", {
-			className: "flex items-center justify-between gap-2 border-t border-neutral-200 px-4 py-3 sm:px-5 sm:py-4 dark:border-neutral-700",
-			children: [/* @__PURE__ */ r("div", { children: f && /* @__PURE__ */ r("div", {
+		subView: f,
+		footer: y ? /* @__PURE__ */ i("div", {
+			className: "flex items-center justify-between gap-2 border-t border-border-subtle px-4 py-3 sm:px-5 sm:py-4",
+			children: [/* @__PURE__ */ r("div", { children: h && /* @__PURE__ */ r("div", {
 				className: "w-[88px] sm:w-28",
-				children: v(f, {
+				children: x(h, {
 					variant: "tertiary",
 					appearance: "outlined"
 				})
 			}) }), /* @__PURE__ */ i("div", {
 				className: "flex gap-2",
-				children: [d && /* @__PURE__ */ r("div", {
+				children: [m && /* @__PURE__ */ r("div", {
 					className: "w-16 sm:w-24",
-					children: v(d, {
+					children: x(m, {
 						variant: "secondary",
 						appearance: "outlined"
 					})
-				}), u && /* @__PURE__ */ r("div", {
+				}), p && /* @__PURE__ */ r("div", {
 					className: "w-16 sm:w-24",
-					children: v(u, { variant: "primary" })
+					children: x(p, { variant: "primary" })
 				})]
 			})]
 		}) : void 0,
-		children: p ? m : /* @__PURE__ */ r("div", {
+		children: g ? _ : /* @__PURE__ */ r("div", {
 			className: "px-2 py-3 sm:px-4 sm:py-5",
-			children: m
+			children: _
 		})
 	});
 }

package/dist/components/modal/index.d.ts

@@ -0,0 +1,6 @@
+export { Modal } from './Modal.js';
+export type { ModalProps } from './Modal.js';
+export { ModalSubView } from './ModalSubView.js';
+export type { ModalSubViewProps } from './ModalSubView.js';
+export { StandardModal } from './StandardModal.js';
+export type { StandardModalAction, StandardModalProps } from './StandardModal.js';

package/dist/components/month-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { MonthRangePicker } from './month-range-picker.js';
+export type { MonthRange, MonthRangePickerProps } from './month-range-picker.js';