@thewrong/ui 0.1.0 → 0.3.0

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

@@ -2,6 +2,18 @@ export interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
+    /** false면 ESC, 백드롭, 닫기 버튼과 바텀시트 드래그로 닫히지 않는다. @default true */
+    dismissible?: boolean;
+    /**
+     * false면 Tab 가두기, 배경 포커스 복귀와 레이어·토스트 제거로 body에 유실된 포커스 복구를 끈다.
+     * 초기 포커스와 닫힐 때의 복원 규칙은 유지한다 —
+     * 닫는 시점에 포커스가 시트·부유 레이어 안이거나 body이면 열기 직전 요소로 복원하고,
+     * 소비자가 배경의 다른 요소로 옮겨 둔 포커스는 그대로 둔다.
+     * ModalSubView에도 같은 설정이 적용된다. @default true
+     */
+    trapFocus?: boolean;
+    /** 닫힘 모션이 끝난 뒤 호출한다. isOpen을 false로 바꾸지 않고 컴포넌트를 언마운트하면 호출되지 않는다. */
+    onExitComplete?: () => void;
     /**
      * 데스크탑(sm+) 모달의 고정 폭(px). 지정하지 않으면 콘텐츠 폭에 fit (`sm:w-auto`).
      *
@@ -27,10 +39,17 @@ export interface ModalProps {
      * subView가 있으면 시트 높이가 자동으로 viewport 기준으로 강제된다 (콘텐츠 따라 자라지 않음).
      */
     subView?: React.ReactNode;
+    /**
+     * 시트(카드) 루트에 병합되는 클래스. 인스턴스별로 배경·여백 등을 덮을 때 쓴다.
+     * `cn`(tailwind-merge)으로 병합되어 같은 속성은 이 값이 이긴다. 백드롭에는 적용되지 않는다.
+     * 폭은 `widthPx`로 고정하는 것이 정책이므로 너비 클래스 대신 `widthPx`를 우선 쓸 것.
+     */
+    className?: string;
     children: React.ReactNode;
 }
 /**
  * 데스크탑(`sm`+)에서는 중앙 정렬 모달, 모바일에서는 화면 하단에서 올라오는 bottom-sheet으로 동작.
+ * 열리면 첫 tabbable(제목과 활성 닫기 버튼이 있으면 닫기 버튼)에 포커스하며, 다른 필드는 `autoFocus`를 준다.
  *
  * - 모바일: 시트가 화면 하단에 붙고 상단 모서리만 둥글다. 핸들 바 표시.
  *   진입/퇴장 모션은 화면 밖에서 슬라이드 (`y: "100%" → 0 → "100%"`).
@@ -45,7 +64,20 @@ export interface ModalProps {
  * 등으로 변할 수 있으면 `widthPx`로 고정해 시트가 흔들리지 않게 할 것.
  *
  * **레이어드 오버레이**: ESC/백드롭은 `overlayStack`에서 자신이 top일 때만 반응한다.
- * ActionToast나 ModalSubView가 위에 떠 있으면(더 높은 priority/나중 push) 자동으로 양보된다.
+ * ActionToast나 열린 ModalSubView가 위에 떠 있으면 자동으로 양보된다.
  * 모달 위에 또 모달을 쌓는 대신 ModalSubView(푸시 네비)나 ActionToast(재확인)로 푸는 것을 권장.
+ *
+ * **포커스 트랩**: `aria-controls`로 연결된 Floating UI 포털 또는 `data-focus-trap-layer`가
+ * 붙은 포털만 부유 레이어로 인정한다. 연결을 알 수 없는 포털의 Tab은 모달로 돌아오므로
+ * 해당 포털에 표식을 붙이거나 `trapFocus={false}`를 사용한다. 표식은 문서 전체에서 찾으므로
+ * 현재 트랩에 편입할 포털에만 붙인다. `role="dialog"` + `aria-modal="true"`인 포털(서드파티
+ * 다이얼로그 등)은 표식이 있어도 편입하지 않으므로 `trapFocus={false}`를 사용한다.
+ * 가드 없는 부유 레이어(Popover·표식 포털)는 트리거 바로 뒤가 아니라 모달의
+ * 모든 tabbable 뒤에 붙는다. 포털 DOM 위치와 무관하게 순환을 일정하게 하기 위해 트리거에서
+ * Tab을 누르면 다음 필드로 가고, 패널은 한 바퀴의 마지막에 지난다. 열자마자 패널을 조작하려면
+ * 패널 안으로 바로 포커스를 옮기는 컴포넌트나 Select·DatePicker처럼 floating-ui 포커스 관리가 있는 패널을 쓴다.
+ * 액션 토스트가 top이면 트랩은 양보하며, 그동안에는 Tab이 모달 밖으로 나갈 수 있다
+ * (`backdrop: false` 알림성 토스트 포함). Tab으로 모달 밖에 떨어진 포커스는 고리로 되돌리고,
+ * 마우스로 옮긴 포커스는 건드리지 않는다.
  */
-export declare function Modal({ isOpen, onClose, title, widthPx, footer, bodyPadded, subView, children, }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ isOpen, onClose, title, dismissible, trapFocus, onExitComplete, widthPx, footer, bodyPadded, subView, className, children, }: ModalProps): import("react").JSX.Element;

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

@@ -0,0 +1,167 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useIsMobile as t } from "../../hooks/useMediaQuery.esm.js";
+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 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);
+		};
+	}, [v, j]), n(v), r(F, {
+		enabled: v,
+		trapFocus: S,
+		canTrap: R
+	}), c(() => {
+		let e = (e) => {
+			e.key !== "Escape" || !x || R() && y();
+		};
+		return v && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		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: P ? 0 : .2 },
+		onClick: () => {
+			!x || !R() || y();
+		},
+		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: [
+					.32,
+					.72,
+					0,
+					1
+				]
+			},
+			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__ */ 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 { 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

@@ -0,0 +1,111 @@
+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 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();
+		};
+	}, [
+		M,
+		S,
+		A
+	]), n(w, {
+		enabled: M,
+		trapFocus: k,
+		canTrap: () => j(S),
+		cover: b === "drawer" ? E : w
+	}), o(() => {
+		let e = (e) => {
+			e.key === "Escape" && j(S) && h();
+		};
+		return M && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		M,
+		h,
+		S,
+		j
+	]);
+	let N = /* @__PURE__ */ u("div", {
+		className: "flex items-center gap-2 border-b border-border-subtle px-4 py-3",
+		children: [
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				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__ */ l(t, { className: "h-4 w-4" })
+			}),
+			g && /* @__PURE__ */ l("div", {
+				className: "flex-1 text-sm font-semibold text-fg-default",
+				children: g
+			}),
+			_
+		]
+	}), 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: x
+		}) : x
+	});
+	return b === "drawer" ? /* @__PURE__ */ l(d, { children: m && /* @__PURE__ */ u("div", {
+		ref: D,
+		className: "absolute inset-0 z-10",
+		children: [/* @__PURE__ */ l(f.div, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: C ? 0 : .2 },
+			onClick: h,
+			className: "absolute inset-0 bg-black/40"
+		}, "subview-drawer-backdrop"), /* @__PURE__ */ u(f.div, {
+			ref: T,
+			tabIndex: -1,
+			initial: { x: "100%" },
+			animate: { x: 0 },
+			exit: {
+				x: "100%",
+				transition: {
+					duration: C ? 0 : .2,
+					ease: [
+						.4,
+						0,
+						1,
+						1
+					]
+				}
+			},
+			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-surface text-fg-default shadow-overlay outline-none",
+			children: [N, P]
+		}, "subview-drawer-sheet")]
+	}) }) : /* @__PURE__ */ l(d, { children: m && /* @__PURE__ */ u(f.div, {
+		ref: T,
+		tabIndex: -1,
+		initial: { x: "100%" },
+		animate: { x: 0 },
+		exit: { x: "100%" },
+		transition: {
+			duration: C ? 0 : .25,
+			ease: "easeOut"
+		},
+		className: "absolute inset-0 z-10 flex flex-col bg-bg-surface text-fg-default outline-none",
+		children: [N, P]
+	}) });
+}
+//#endregion
+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

@@ -0,0 +1,57 @@
+import { Button as e } from "../button/Button.esm.js";
+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, 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: b,
+		display: "block",
+		leadingIcon: t.leadingIcon,
+		onClick: t.onClick,
+		loading: t.loading,
+		disabled: t.disabled,
+		children: t.label
+	});
+	return /* @__PURE__ */ r(n, {
+		isOpen: a,
+		onClose: o,
+		title: s,
+		dismissible: c,
+		trapFocus: l,
+		onExitComplete: u,
+		widthPx: d,
+		bodyPadded: !0,
+		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: x(h, {
+					variant: "tertiary",
+					appearance: "outlined"
+				})
+			}) }), /* @__PURE__ */ i("div", {
+				className: "flex gap-2",
+				children: [m && /* @__PURE__ */ r("div", {
+					className: "w-16 sm:w-24",
+					children: x(m, {
+						variant: "secondary",
+						appearance: "outlined"
+					})
+				}), p && /* @__PURE__ */ r("div", {
+					className: "w-16 sm:w-24",
+					children: x(p, { variant: "primary" })
+				})]
+			})]
+		}) : void 0,
+		children: g ? _ : /* @__PURE__ */ r("div", {
+			className: "px-2 py-3 sm:px-4 sm:py-5",
+			children: _
+		})
+	});
+}
+//#endregion
+export { a as StandardModal };

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';

package/dist/components/month-range-picker/month-range-picker.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),i=require("../date-picker/PickerSheet.cjs"),a=require("./month-range-utils.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("@floating-ui/react");function l({year:t,from:i,to:c,onSelect:l,onYearChange:u,onMove:d,focusedMonth:f,onFocusMonth:p,focusOnMount:m,initialFocusRef:h,showPrev:g=!0,showNext:_=!0}){let v=(0,o.useRef)([]),y=(0,o.useRef)({focusedMonth:f,year:t}),b=(0,o.useRef)(!1);(0,o.useEffect)(()=>{if(!m&&!b.current){if(y.current.focusedMonth===f&&y.current.year===t)return;b.current=!0}f.year===t&&v.current[f.month-1]?.focus()},[m,f,t]);let x=e=>{d(a.shiftMonth({year:t,month:1},e-1))};return(0,s.jsxs)(`div`,{children:[(0,s.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[g?(0,s.jsx)(`button`,{type:`button`,"aria-label":`이전 해`,className:`flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-subtle text-fg-muted transition-colors hover:bg-bg-subtle`,onClick:()=>u(t-1),children:(0,s.jsx)(n.ChevronLeft,{className:`h-4 w-4`})}):(0,s.jsx)(`span`,{className:`w-8`}),(0,s.jsxs)(`div`,{className:`flex-1 text-center text-sm font-semibold text-fg-default`,children:[t,`년`]}),_?(0,s.jsx)(`button`,{type:`button`,"aria-label":`다음 해`,className:`flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-subtle text-fg-muted transition-colors hover:bg-bg-subtle`,onClick:()=>u(t+1),children:(0,s.jsx)(r.ChevronRight,{className:`h-4 w-4`})}):(0,s.jsx)(`span`,{className:`w-8`})]}),(0,s.jsx)(`div`,{className:`grid grid-cols-4 gap-2`,children:Array.from({length:12},(n,r)=>{let o=r+1,u={year:t,month:o},m=new Date,g=m.getFullYear()===t&&m.getMonth()+1===o,_=!!(i&&a.compareMonths(u,i)===0||c&&a.compareMonths(u,c)===0),y=!!i&&!!c&&a.compareMonths(u,i)>0&&a.compareMonths(u,c)<0;return(0,s.jsxs)(`button`,{ref:e=>{v.current[o-1]=e,h&&f.year===t&&o===f.month&&(h.current=e)},type:`button`,tabIndex:f.year===t&&o===f.month?0:-1,"aria-label":`${t}년 ${o}월`,"aria-pressed":_,className:e.cn(`h-10 cursor-pointer rounded-lg text-sm transition-colors`,_?`bg-primary font-bold text-fg-inverse`:y?`bg-bg-muted text-fg-default`:g?`bg-bg-muted font-semibold text-fg-default`:`text-fg-default hover:bg-bg-subtle`),onClick:()=>{l(u),p(u)},onKeyDown:e=>{let n=null;if(e.key===`ArrowLeft`&&(n=o-1),e.key===`ArrowRight`&&(n=o+1),e.key===`ArrowUp`&&(n=o-4),e.key===`ArrowDown`&&(n=o+4),e.key===`Home`&&(n=1),e.key===`End`&&(n=12),e.key===`PageUp`||e.key===`PageDown`){e.preventDefault(),d({year:t+(e.key===`PageUp`?-1:1),month:o});return}n!==null&&(e.preventDefault(),x(n))},children:[o,`월`]},o)})})]})}function u({children:e,value:t,onApply:n,disabled:r=!1,disableMobileSheet:a}){let[l,u]=(0,o.useState)(!1),f=(0,o.useRef)(null),p=r||!!e.props.disabled,{isMobile:m,useSheet:h}=i.usePickerMobile(a),{refs:g,floatingStyles:_,context:v}=(0,c.useFloating)({open:l,onOpenChange:e=>{p||u(e)},placement:`bottom-start`,whileElementsMounted:c.autoUpdate,middleware:[(0,c.offset)(8),(0,c.flip)({fallbackAxisSideDirection:`start`}),(0,c.shift)({padding:8})]}),{getReferenceProps:y,getFloatingProps:b}=(0,c.useInteractions)([(0,c.useClick)(v,{enabled:!p}),(0,c.useDismiss)(v),(0,c.useRole)(v,{role:`dialog`})]),x=y(),S=typeof e.type!=`string`||[`button`,`input`,`select`,`textarea`].includes(e.type),C=(0,o.cloneElement)(e,{"aria-haspopup":`dialog`,"aria-expanded":l,"aria-controls":typeof x[`aria-controls`]==`string`?x[`aria-controls`]:void 0,"aria-disabled":p||void 0,...p&&S?{disabled:!0}:{}});return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{ref:g.setReference,...x,className:`inline-flex w-full`,children:C}),(0,s.jsx)(i.PickerSheet,{isOpen:l,onClose:()=>u(!1),useSheet:h,context:v,setFloating:g.setFloating,floatingStyles:_,getFloatingProps:e=>b({...e,"aria-label":`월 범위 선택`}),desktopClassName:`z-floating max-w-[calc(100vw-16px)] rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-5 shadow-tooltip`,initialFocus:f,children:(0,s.jsx)(d,{value:t,isMobile:m,focusOnMount:h,initialFocusRef:f,onClose:()=>u(!1),onApply:e=>{n(e),u(!1)}})})]})}function d({value:n,isMobile:r,focusOnMount:i,initialFocusRef:c,onApply:u,onClose:d}){let f=n?.from??{year:new Date().getFullYear(),month:new Date().getMonth()+1},[p,m]=(0,o.useState)(n?.from??null),[h,g]=(0,o.useState)(n?.to??null),[_,v]=(0,o.useState)(f.year),[y,b]=(0,o.useState)(f),x=e=>{let t=a.selectMonth({from:p,to:h},e);m(t.from),g(t.to)},S=()=>{let e=a.completeMonthRange({from:p,to:h});e?u(e):d()},C=e=>{if(b(e),r){v(e.year);return}a.compareMonths(e,{year:_,month:1})<0?v(e.year):a.compareMonths(e,{year:_+1,month:12})>0&&v(e.year-1)};return(0,s.jsxs)(`div`,{className:`min-w-60`,children:[(0,s.jsxs)(`div`,{className:e.cn(r?``:`grid grid-cols-[1fr_auto_1fr] gap-5`),children:[(0,s.jsx)(l,{year:_,from:p,to:h,onSelect:x,onYearChange:v,onMove:C,focusedMonth:y,onFocusMonth:b,focusOnMount:i,initialFocusRef:c,showPrev:!0,showNext:r}),!r&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`div`,{className:`w-px bg-border-subtle`}),(0,s.jsx)(l,{year:_+1,from:p,to:h,onSelect:x,onYearChange:e=>v(e-1),onMove:C,focusedMonth:y,onFocusMonth:b,focusOnMount:i,showPrev:!1,showNext:!0})]})]}),(0,s.jsxs)(`div`,{className:`mt-6 flex justify-end gap-2`,children:[(0,s.jsx)(t.Button,{type:`button`,size:`small`,variant:`tertiary`,appearance:`transparent`,onClick:d,children:`닫기`}),(0,s.jsx)(t.Button,{type:`button`,size:`small`,onClick:S,children:`적용`})]})]})}exports.MonthRangePicker=u;

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

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { MonthRange } from './month-range-utils.js';
+export type { MonthRange } from './month-range-utils.js';
+export interface MonthRangePickerProps {
+    children: ReactElement;
+    value?: MonthRange;
+    onApply: (range: MonthRange) => void;
+    disabled?: boolean;
+    /** 이미 바텀시트 안이면 모바일에서도 popover를 사용한다. 생략하면 Modal 안에서 자동 적용되며, false를 명시하면 시트를 유지한다. */
+    disableMobileSheet?: boolean;
+}
+/**
+ * 두 월을 선택해 범위를 적용한다. 한 월만 선택하면 시작과 끝이 같은 범위가 된다.
+ * 모바일 시트는 포커스를 가두지 않는다. 포커스 순환이 필요하면 Modal 안에서 사용한다.
+ */
+export declare function MonthRangePicker({ children, value, onApply, disabled, disableMobileSheet, }: MonthRangePickerProps): import("react").JSX.Element;