@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/date-picker/month-picker.esm.js

@@ -1,147 +1,103 @@
-import { ChevronLeft as e } from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
-import { ChevronRight as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
-import { cn as n } from "../../lib/utils.esm.js";
-import { useIsMobile as r } from "../../hooks/useMediaQuery.esm.js";
-import { useBottomSheetDrag as i } from "../../hooks/useBottomSheetDrag.esm.js";
-import { useScrollLock as a } from "../../hooks/useScrollLock.esm.js";
-import { useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { AnimatePresence as u, motion as d } from "motion/react";
-import { FloatingPortal as f, autoUpdate as p, flip as m, offset as h, shift as g, useClick as _, useDismiss as v, useFloating as y, useInteractions as b, useRole as x } from "@floating-ui/react";
+import { cn as e } from "../../lib/utils.esm.js";
+import { ChevronLeft as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { PickerSheet as r, usePickerMobile as i } from "./PickerSheet.esm.js";
+import { useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { autoUpdate as l, flip as u, offset as d, shift as f, useClick as p, useDismiss as m, useFloating as h, useInteractions as g, useRole as _ } from "@floating-ui/react";
 //#region src/components/date-picker/month-picker.tsx
-function S({ children: e, value: t, onChange: n, disabled: S, disableMobileSheet: w = !1 }) {
-	let [T, E] = o(!1), D = r() && !w, { refs: O, floatingStyles: k, context: A } = y({
-		open: T,
+function v({ children: e, value: t, onChange: n, disabled: v, disableMobileSheet: b }) {
+	let [x, S] = a(!1), { useSheet: C } = i(b), { refs: w, floatingStyles: T, context: E } = h({
+		open: x,
 		onOpenChange: (e) => {
-			S || E(e);
+			v || S(e);
 		},
 		placement: "bottom-start",
-		whileElementsMounted: p,
+		whileElementsMounted: l,
 		middleware: [
-			h(8),
-			m({ fallbackAxisSideDirection: "start" }),
-			g({ padding: 8 })
+			d(8),
+			u({ fallbackAxisSideDirection: "start" }),
+			f({ padding: 8 })
 		]
-	}), { getReferenceProps: j, getFloatingProps: M } = b([
-		_(A, { enabled: !S }),
-		v(A),
-		x(A, { role: "dialog" })
-	]);
-	a(T && D);
-	let { dragControls: N, handleDragEnd: P, startDrag: F } = i({ onDismiss: () => E(!1) }), I = (e) => {
-		n(e), E(!1);
-	}, L = /* @__PURE__ */ new Date(), [R, z] = o(t?.year ?? L.getFullYear()), B = /* @__PURE__ */ c(C, {
-		year: R,
-		onYearChange: z,
+	}), { getReferenceProps: D, getFloatingProps: O } = g([
+		p(E, { enabled: !v }),
+		m(E),
+		_(E, { role: "dialog" })
+	]), k = (e) => {
+		n(e), S(!1);
+	}, A = /* @__PURE__ */ new Date(), [j, M] = a(t?.year ?? A.getFullYear()), N = /* @__PURE__ */ s(y, {
+		year: j,
+		onYearChange: M,
 		selectedYear: t?.year,
 		selectedMonth: t?.month,
-		currentYear: L.getFullYear(),
-		currentMonth: L.getMonth() + 1,
-		onSelect: (e) => I({
-			year: R,
+		currentYear: A.getFullYear(),
+		currentMonth: A.getMonth() + 1,
+		onSelect: (e) => k({
+			year: j,
 			month: e
 		})
 	});
-	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
-		ref: O.setReference,
-		...j(),
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+		ref: w.setReference,
+		...D(),
 		className: "inline-flex",
 		children: e
-	}), /* @__PURE__ */ c(f, { children: D ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u, { children: T && /* @__PURE__ */ c(d.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: { duration: .2 },
-		className: "fixed inset-0 z-50 bg-black/40",
-		onClick: () => E(!1)
-	}, "month-picker-dimmer") }), /* @__PURE__ */ c(u, { children: T && /* @__PURE__ */ l(d.div, {
-		ref: O.setFloating,
-		...M(),
-		initial: { y: "100%" },
-		animate: { y: 0 },
-		exit: {
-			y: "100%",
-			transition: {
-				duration: .2,
-				ease: [
-					.4,
-					0,
-					1,
-					1
-				]
-			}
-		},
-		transition: {
-			type: "spring",
-			damping: 30,
-			stiffness: 320
-		},
-		drag: "y",
-		dragListener: !1,
-		dragControls: N,
-		dragConstraints: { top: 0 },
-		dragElastic: {
-			top: 0,
-			bottom: .4
-		},
-		onDragEnd: P,
-		className: "fixed inset-x-0 bottom-0 z-50 flex flex-col gap-5 rounded-t-2xl bg-bg-card p-5 pb-[max(20px,env(safe-area-inset-bottom))] shadow-2xl",
-		children: [/* @__PURE__ */ c("div", {
-			className: "self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing",
-			onPointerDown: F
-		}), B]
-	}, "month-picker-sheet") })] }) : T && /* @__PURE__ */ c("div", {
-		ref: O.setFloating,
-		style: k,
-		...M(),
-		className: "z-9999 w-70 rounded-2xl border border-border-tertiary bg-bg-card p-5 shadow-md",
-		children: B
-	}) })] });
+	}), /* @__PURE__ */ s(r, {
+		isOpen: x,
+		onClose: () => S(!1),
+		useSheet: C,
+		context: E,
+		setFloating: w.setFloating,
+		floatingStyles: T,
+		getFloatingProps: O,
+		desktopClassName: "z-floating w-70 rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-5 shadow-tooltip",
+		children: N
+	})] });
 }
-function C({ year: e, onYearChange: t, selectedYear: r, selectedMonth: i, currentYear: a, currentMonth: o, onSelect: s }) {
+function y({ year: t, onYearChange: n, selectedYear: r, selectedMonth: i, currentYear: a, currentMonth: o, onSelect: l }) {
 	let u = Array.from({ length: 12 }, (e, t) => t + 1);
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "flex flex-col",
-		children: [/* @__PURE__ */ l("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: "mb-4 flex items-center justify-between",
 			children: [
-				/* @__PURE__ */ c(w, {
+				/* @__PURE__ */ s(b, {
 					direction: "left",
-					onClick: () => t(e - 1)
+					onClick: () => n(t - 1)
 				}),
-				/* @__PURE__ */ l("div", {
-					className: "flex-1 text-center text-sm font-semibold text-text-primary",
-					children: [e, "년"]
+				/* @__PURE__ */ c("div", {
+					className: "flex-1 text-center text-sm font-semibold text-fg-default",
+					children: [t, "년"]
 				}),
-				/* @__PURE__ */ c(w, {
+				/* @__PURE__ */ s(b, {
 					direction: "right",
-					onClick: () => t(e + 1)
+					onClick: () => n(t + 1)
 				})
 			]
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ s("div", {
 			className: "grid grid-cols-4 gap-2",
-			children: u.map((t) => {
-				let c = r === e && i === t;
-				return /* @__PURE__ */ l("button", {
+			children: u.map((n) => {
+				let s = r === t && i === n;
+				return /* @__PURE__ */ c("button", {
 					type: "button",
-					onClick: () => s(t),
-					className: n("h-10 cursor-pointer rounded-lg text-sm transition-colors", c ? "bg-primary-500 font-bold text-white" : e === a && t === o ? "bg-bg-base-secondary font-semibold text-text-primary" : "text-text-primary hover:bg-bg-base-primary"),
-					"aria-label": `${e}년 ${t}월`,
-					"aria-pressed": c,
-					children: [t, "월"]
-				}, t);
+					onClick: () => l(n),
+					className: e("h-10 cursor-pointer rounded-lg text-sm transition-colors", s ? "bg-primary font-bold text-fg-inverse" : t === a && n === o ? "bg-bg-muted font-semibold text-fg-default" : "text-fg-default hover:bg-bg-subtle"),
+					"aria-label": `${t}년 ${n}월`,
+					"aria-pressed": s,
+					children: [n, "월"]
+				}, n);
 			})
 		})]
 	});
 }
-function w({ direction: n, onClick: r }) {
-	return /* @__PURE__ */ c("button", {
+function b({ direction: e, onClick: r }) {
+	return /* @__PURE__ */ s("button", {
 		type: "button",
 		onClick: r,
-		className: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-tertiary text-text-secondary transition-colors hover:bg-bg-base-primary",
-		"aria-label": n === "left" ? "이전 해" : "다음 해",
-		children: /* @__PURE__ */ c(n === "left" ? e : t, { className: "h-4 w-4" })
+		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",
+		"aria-label": e === "left" ? "이전 해" : "다음 해",
+		children: /* @__PURE__ */ s(e === "left" ? t : n, { className: "h-4 w-4" })
 	});
 }
 //#endregion
-export { S as MonthPicker };
+export { v as MonthPicker };

package/dist/components/drawer/Drawer.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../hooks/useMediaQuery.cjs"),n=require("../../hooks/useScrollLock.cjs"),r=require("../../hooks/useFocusTrap.cjs"),i=require("../../lib/overlay-stack.cjs"),a=require("../../lib/Portal.cjs"),o=require("../modal/ModalFocusTrapContext.cjs");let s=require("react"),c=require("react/jsx-runtime"),l=require("motion/react");function u({open:u,onClose:d,title:f,dismissible:p=!0,trapFocus:m=!0,onExitComplete:h,widthPx:g=480,className:_,children:v}){let y=t.useIsMobile(),b={width:g,maxWidth:`100vw`},x=(0,s.useId)(),S=(0,s.useId)(),C=(0,l.useDragControls)(),w=(0,l.useReducedMotion)(),[T,E]=(0,s.useState)(null),{context:D,isTop:O}=o.useModalSubViews(u,m,x);(0,s.useLayoutEffect)(()=>{T&&(T.inert=!u)},[T,u]);let k=(e,t)=>{p&&(t.offset.y>100||t.velocity.y>500)&&d()};(0,s.useEffect)(()=>{if(u)return i.overlayStack.push(x),()=>{i.overlayStack.pop(x)}},[u,x]),n.useScrollLock(u),r.useFocusTrap(T,{enabled:u,trapFocus:m,canTrap:O}),(0,s.useEffect)(()=>{let e=e=>{e.key!==`Escape`||!p||O()&&d()};return u&&window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[u,d,p,O]);let A=(0,c.jsxs)(a.Portal,{children:[(0,c.jsx)(l.AnimatePresence,{children:u&&(0,c.jsx)(l.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:w?0:.2},onClick:()=>{!p||!O()||d()},className:`fixed inset-0 z-overlay bg-bg-overlay`},`drawer-backdrop`)}),(0,c.jsx)(l.AnimatePresence,{onExitComplete:h,children:u&&(0,c.jsxs)(l.motion.div,{ref:E,role:`dialog`,"aria-modal":`true`,"aria-labelledby":f?S:void 0,tabIndex:-1,initial:y?{y:`100%`}:{x:`100%`},animate:y?{y:0}:{x:0},exit:y?{y:`100%`,transition:{duration:w?0:.2,ease:[.4,0,1,1]}}:{x:`100%`},transition:w?{duration:0}:y?{type:`spring`,damping:38,stiffness:320}:{type:`spring`,damping:30,stiffness:280},drag:y&&p?`y`:!1,dragListener:!1,dragControls:C,dragConstraints:{top:0,bottom:0},dragElastic:{top:0,bottom:.4},onDragEnd:k,className:e.cn(`fixed z-overlay flex flex-col overflow-x-hidden bg-bg-surface text-fg-default outline-none -bottom-8 left-0 right-0 max-h-[88vh] w-full rounded-t-sheet pb-8 sm:bottom-0 sm:left-auto sm:right-0 sm:top-0 sm:max-h-none sm:h-full sm:w-auto sm:rounded-none sm:pb-0`,_),style:y?void 0:b,children:[(0,c.jsx)(`div`,{className:e.cn(`flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden`,!p&&`pointer-events-none opacity-0`),onPointerDown:e=>{p&&C.start(e)},children:(0,c.jsx)(`div`,{className:`h-1 w-10 rounded-full bg-bg-handle`})}),f&&(0,c.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border-subtle px-4 py-3`,children:[(0,c.jsx)(`h3`,{id:S,className:`text-base font-semibold text-fg-default sm:text-lg`,children:f}),(0,c.jsx)(`button`,{type:`button`,onClick:d,disabled:!p,className:e.cn(`rounded-control-medium p-1 text-fg-muted hover:text-fg-default`,!p&&`pointer-events-none opacity-0`),"aria-label":`닫기`,children:(0,c.jsx)(`svg`,{className:`h-5 w-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,c.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M6 18L18 6M6 6l12 12`})})})]}),(0,c.jsx)(`div`,{className:`flex-1 overflow-auto`,children:v})]},`drawer-sheet`)})]});return(0,c.jsx)(o.ModalFocusTrapContext.Provider,{value:D,children:A})}exports.Drawer=u;

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,45 @@
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    /** false면 ESC, 백드롭, 닫기 버튼과 바텀시트 드래그로 닫히지 않는다. @default true */
+    dismissible?: boolean;
+    /**
+     * false면 Tab 가두기, 배경 포커스 복귀와 레이어·토스트 제거로 body에 유실된 포커스 복구를 끈다.
+     * 초기 포커스와 닫힐 때의 복원 규칙은 유지한다 —
+     * 닫는 시점에 포커스가 시트·부유 레이어 안이거나 body이면 열기 직전 요소로 복원하고,
+     * 소비자가 배경의 다른 요소로 옮겨 둔 포커스는 그대로 둔다.
+     * 안에 둔 ModalSubView에도 같은 설정이 적용된다. @default true
+     */
+    trapFocus?: boolean;
+    /** 닫힘 모션이 끝난 뒤 호출한다. open을 false로 바꾸지 않고 컴포넌트를 언마운트하면 호출되지 않는다. */
+    onExitComplete?: () => void;
+    /** 데스크탑(sm+) 드로어 폭(px). 기본 480. 모바일은 무관 (바텀시트). */
+    widthPx?: number;
+    /**
+     * 시트(패널) 루트에 병합되는 클래스. 인스턴스별로 배경·여백 등을 덮을 때 쓴다.
+     * `cn`(tailwind-merge)으로 병합되어 같은 속성은 이 값이 이긴다. 백드롭에는 적용되지 않는다.
+     */
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * 데스크탑(`sm`+)에서는 화면 우측에서 슬라이드 인 하는 사이드 드로어,
+ * 모바일에서는 화면 하단에서 올라오는 bottom-sheet으로 동작.
+ * 열리면 첫 tabbable(제목과 활성 닫기 버튼이 있으면 닫기 버튼)에 포커스하며, 다른 필드는 `autoFocus`를 준다.
+ *
+ * 모바일 분기·드래그-다운 닫기·바텀시트 하단 틈 방지 패턴은 Modal과 동일.
+ *
+ * **레이어드 오버레이**: ESC/백드롭은 `overlayStack`에서 자신이 top일 때만 반응한다.
+ * ActionToast나 열린 ModalSubView가 위에 떠 있으면 자동으로 양보된다.
+ *
+ * **포커스 트랩**: `aria-controls`로 연결된 Floating UI 포털 또는 `data-focus-trap-layer`가
+ * 붙은 포털만 부유 레이어로 인정한다. 연결을 알 수 없는 포털의 Tab은 드로어로 돌아오므로
+ * 해당 포털에 표식을 붙이거나 `trapFocus={false}`를 사용한다. 표식은 문서 전체에서 찾으므로
+ * 현재 트랩에 편입할 포털에만 붙인다. `role="dialog"` + `aria-modal="true"`인 포털(서드파티
+ * 다이얼로그 등)은 표식이 있어도 편입하지 않으므로 `trapFocus={false}`를 사용한다.
+ * 액션 토스트가 top이면 트랩은 양보하며, 그동안에는 Tab이 드로어 밖으로 나갈 수 있다
+ * (`backdrop: false` 알림성 토스트 포함). Tab으로 드로어 밖에 떨어진 포커스는 고리로 되돌리고,
+ * 마우스로 옮긴 포커스는 건드리지 않는다.
+ */
+export declare function Drawer({ open, onClose, title, dismissible, trapFocus, onExitComplete, widthPx, className, children, }: DrawerProps): import("react").JSX.Element;

package/dist/components/drawer/Drawer.esm.js

@@ -1,113 +1,143 @@
 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 "../modal/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/drawer/Drawer.tsx
-function d({ open: d, onClose: f, title: p, widthPx: m = 480, className: h, children: g }) {
-	let _ = t(), v = {
-		width: m,
+function v({ open: v, onClose: y, title: b, dismissible: x = !0, trapFocus: S = !0, onExitComplete: C, widthPx: w = 480, className: T, children: E }) {
+	let D = t(), O = {
+		width: w,
 		maxWidth: "100vw"
-	}, y = a(), b = u();
-	return i(() => {
-		if (d) return n.push(y), document.body.style.overflow = "hidden", () => {
-			n.pop(y), n.isEmpty() && (document.body.style.overflow = "");
+	}, k = l(), A = l(), j = g(), M = _(), [N, P] = d(null), { context: F, isTop: I } = s(v, S, k);
+	u(() => {
+		N && (N.inert = !v);
+	}, [N, v]);
+	let L = (e, t) => {
+		x && (t.offset.y > 100 || t.velocity.y > 500) && y();
+	};
+	c(() => {
+		if (v) return i.push(k), () => {
+			i.pop(k);
 		};
-	}, [d, y]), i(() => {
+	}, [v, k]), n(v), r(N, {
+		enabled: v,
+		trapFocus: S,
+		canTrap: I
+	}), c(() => {
 		let e = (e) => {
-			e.key === "Escape" && n.isTop(y) && f();
+			e.key !== "Escape" || !x || I() && y();
 		};
-		return d && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+		return v && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		d,
-		f,
-		y
-	]), /* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ o(l.div, {
+		v,
+		y,
+		x,
+		I
+	]);
+	let R = /* @__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: M ? 0 : .2 },
 		onClick: () => {
-			n.isTop(y) && f();
+			!x || !I() || y();
 		},
-		className: "fixed inset-0 z-50 bg-black/50"
-	}, "drawer-backdrop") }), /* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ s(l.div, {
-		initial: _ ? { y: "100%" } : { x: "100%" },
-		animate: _ ? { y: 0 } : { x: 0 },
-		exit: _ ? {
-			y: "100%",
-			transition: {
-				duration: .2,
-				ease: [
-					.4,
-					0,
-					1,
-					1
-				]
-			}
-		} : { x: "100%" },
-		transition: _ ? {
-			type: "spring",
-			damping: 38,
-			stiffness: 320
-		} : {
-			type: "spring",
-			damping: 30,
-			stiffness: 280
-		},
-		drag: _ ? "y" : !1,
-		dragListener: !1,
-		dragControls: b,
-		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 z-50 flex flex-col overflow-x-hidden bg-bg-white dark:bg-neutral-800 -bottom-8 left-0 right-0 max-h-[88vh] w-full rounded-t-2xl pb-8 sm:bottom-0 sm:left-auto sm:right-0 sm:top-0 sm:max-h-none sm:h-full sm:w-auto sm:rounded-none sm:pb-0", h),
-		style: _ ? void 0 : v,
-		children: [
-			/* @__PURE__ */ o("div", {
-				className: "flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden",
-				onPointerDown: (e) => b.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 border-b border-border-tertiary px-4 py-3 dark:border-neutral-700",
-				children: [/* @__PURE__ */ o("h3", {
-					className: "text-base font-semibold text-text-primary sm:text-lg dark:text-white",
-					children: p
-				}), /* @__PURE__ */ o("button", {
-					onClick: f,
-					className: "rounded p-1 text-text-tertiary hover:text-text-secondary 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"
+		className: "fixed inset-0 z-overlay bg-bg-overlay"
+	}, "drawer-backdrop") }), /* @__PURE__ */ f(m, {
+		onExitComplete: C,
+		children: v && /* @__PURE__ */ p(h.div, {
+			ref: P,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": b ? A : void 0,
+			tabIndex: -1,
+			initial: D ? { y: "100%" } : { x: "100%" },
+			animate: D ? { y: 0 } : { x: 0 },
+			exit: D ? {
+				y: "100%",
+				transition: {
+					duration: M ? 0 : .2,
+					ease: [
+						.4,
+						0,
+						1,
+						1
+					]
+				}
+			} : { x: "100%" },
+			transition: M ? { duration: 0 } : D ? {
+				type: "spring",
+				damping: 38,
+				stiffness: 320
+			} : {
+				type: "spring",
+				damping: 30,
+				stiffness: 280
+			},
+			drag: D && x ? "y" : !1,
+			dragListener: !1,
+			dragControls: j,
+			dragConstraints: {
+				top: 0,
+				bottom: 0
+			},
+			dragElastic: {
+				top: 0,
+				bottom: .4
+			},
+			onDragEnd: L,
+			className: e("fixed z-overlay flex flex-col overflow-x-hidden bg-bg-surface text-fg-default outline-none -bottom-8 left-0 right-0 max-h-[88vh] w-full rounded-t-sheet pb-8 sm:bottom-0 sm:left-auto sm:right-0 sm:top-0 sm:max-h-none sm:h-full sm:w-auto sm:rounded-none sm:pb-0", T),
+			style: D ? void 0 : O,
+			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 && j.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 border-b border-border-subtle px-4 py-3",
+					children: [/* @__PURE__ */ f("h3", {
+						id: A,
+						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__ */ o("div", {
-				className: "flex-1 overflow-auto",
-				children: g
-			})
-		]
-	}, "drawer-sheet") })] });
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "flex-1 overflow-auto",
+					children: E
+				})
+			]
+		}, "drawer-sheet")
+	})] });
+	return /* @__PURE__ */ f(o.Provider, {
+		value: F,
+		children: R
+	});
 }
 //#endregion
-export { d as Drawer };
+export { v as Drawer };

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer.js';
+export type { DrawerProps } from './Drawer.js';

package/dist/components/error-boundary/ErrorBoundary.cjs

@@ -0,0 +1 @@
+const e=require("./chunk-reload.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={error:null,isChunkError:!1},i=class extends t.Component{constructor(...t){super(...t),this.state=r,this.reset=()=>{this.setState(r)},this.reload=()=>{this.props.chunkReloadPort?e.reloadAfterClearingChunkGuard(this.props.chunkReloadPort):typeof window<`u`&&window.location.reload()}}static getDerivedStateFromError(t){return{error:t,isChunkError:e.isChunkLoadError(t)}}componentDidCatch(t,n){let r=e.isChunkLoadError(t);this.props.onError?.(t,n,r),r&&this.props.chunkReloadPort&&e.reloadOnceForChunkError(this.props.chunkReloadPort)}render(){let{error:e,isChunkError:t}=this.state;return e?this.props.fallbackRender?this.props.fallbackRender({error:e,isChunkError:t,reset:this.reset,reload:this.reload}):(0,n.jsxs)(`div`,{role:`alert`,className:`flex flex-col items-start gap-3 rounded-control-medium border-control border-border-subtle bg-bg-surface p-4 text-fg-default`,children:[(0,n.jsx)(`p`,{children:this.props.message??`문제가 발생했습니다.`}),(0,n.jsx)(`button`,{type:`button`,className:`rounded-control-small bg-primary px-3 py-2 text-fg-inverse`,onClick:t?this.reload:this.reset,children:t?this.props.reloadLabel??`새로고침`:this.props.retryLabel??`다시 시도`})]}):this.props.children}};exports.ErrorBoundary=i;

package/dist/components/error-boundary/ErrorBoundary.d.ts

@@ -0,0 +1,23 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { ErrorBoundaryProps } from './types.js';
+interface ErrorBoundaryState {
+    error: Error | null;
+    isChunkError: boolean;
+}
+/**
+ * 자손의 렌더 오류를 포착하고 다시 시도할 수 있는 경계.
+ *
+ * 청크 오류의 자동 새로고침에는 영속 가드가 필요하다. 저장소 접근이 막히거나
+ * chunkReloadPort가 없으면 반복 새로고침을 피하기 위해 폴백을 유지한다.
+ * 포트와 fallbackRender를 주입하면 복구·안내 방식을 직접 지정할 수 있다.
+ * 이벤트 핸들러나 비동기 콜백의 오류는 React 경계가 포착하지 않으므로 호출부에서 처리한다.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    private reset;
+    private reload;
+    render(): ReactNode;
+}
+export {};

package/dist/components/error-boundary/ErrorBoundary.esm.js

@@ -0,0 +1,46 @@
+import { isChunkLoadError as e, reloadAfterClearingChunkGuard as t, reloadOnceForChunkError as n } from "./chunk-reload.esm.js";
+import { Component as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/error-boundary/ErrorBoundary.tsx
+var o = {
+	error: null,
+	isChunkError: !1
+}, s = class extends r {
+	constructor(...e) {
+		super(...e), this.state = o, this.reset = () => {
+			this.setState(o);
+		}, this.reload = () => {
+			this.props.chunkReloadPort ? t(this.props.chunkReloadPort) : typeof window < "u" && window.location.reload();
+		};
+	}
+	static getDerivedStateFromError(t) {
+		return {
+			error: t,
+			isChunkError: e(t)
+		};
+	}
+	componentDidCatch(t, r) {
+		let i = e(t);
+		this.props.onError?.(t, r, i), i && this.props.chunkReloadPort && n(this.props.chunkReloadPort);
+	}
+	render() {
+		let { error: e, isChunkError: t } = this.state;
+		return e ? this.props.fallbackRender ? this.props.fallbackRender({
+			error: e,
+			isChunkError: t,
+			reset: this.reset,
+			reload: this.reload
+		}) : /* @__PURE__ */ a("div", {
+			role: "alert",
+			className: "flex flex-col items-start gap-3 rounded-control-medium border-control border-border-subtle bg-bg-surface p-4 text-fg-default",
+			children: [/* @__PURE__ */ i("p", { children: this.props.message ?? "문제가 발생했습니다." }), /* @__PURE__ */ i("button", {
+				type: "button",
+				className: "rounded-control-small bg-primary px-3 py-2 text-fg-inverse",
+				onClick: t ? this.reload : this.reset,
+				children: t ? this.props.reloadLabel ?? "새로고침" : this.props.retryLabel ?? "다시 시도"
+			})]
+		}) : this.props.children;
+	}
+};
+//#endregion
+export { s as ErrorBoundary };

package/dist/components/error-boundary/chunk-reload.cjs

@@ -0,0 +1 @@
+var e=3e4,t=null;function n(e,t){if(typeof e!=`object`||!e||!(t in e))return;let n=e[t];return typeof n==`string`?n:void 0}function r(e){if(n(e,`name`)===`ChunkLoadError`)return!0;let t=n(e,`message`);return t?/Loading chunk [\w-]+ failed/i.test(t)||/Failed to fetch dynamically imported module/i.test(t)||/error loading dynamically imported module/i.test(t)||/Importing a module script failed/i.test(t)||/Unable to preload CSS for/i.test(t):!1}function i(e,t,n){return e===null||!Number.isFinite(e)?!1:t-e<n}function a(e,n={}){let r=(n.now??Date.now)(),a=n.ttlMs??3e4,o;try{o=e.get()}catch{return!1}if(i(o,r,a)||i(t,r,a))return!1;try{if(e.set(r),e.get()!==r)return!1}catch{return!1}return t=r,!0}function o(e,t={}){let n=a(e,t);return n&&e.reload(),n}function s(e){t=null;try{e.remove()}catch{}}function c(e){s(e),e.reload()}function l(e,t=window,r=()=>!0,i,o){let s=new Set,c=t=>{let c=t.payload,l=c instanceof Error?c:Error(typeof c==`string`?c:n(c,`message`)??`Vite preload failed`),u=r(t),d=!0;try{d=o?.(t)??!0}catch{}let f=()=>{try{(typeof d==`function`?d():d)&&e.report(l,u?`navigation`:`preload`)}catch{}},p=typeof d==`function`;if(p||f(),!u&&!p)return;let m=()=>{a(e)&&e.reload()};if(i||p){let e=setTimeout(()=>{s.delete(e),p&&f(),u&&!i?.(t)&&m()},0);s.add(e)}else m()};return t.addEventListener(`vite:preloadError`,c),()=>{t.removeEventListener(`vite:preloadError`,c);for(let e of s)clearTimeout(e);s.clear()}}exports.CHUNK_RELOAD_TTL_MS=e,exports.clearChunkReloadGuard=s,exports.isChunkLoadError=r,exports.listenForChunkPreloadError=l,exports.reloadAfterClearingChunkGuard=c,exports.reloadOnceForChunkError=o,exports.tryAcquireChunkReloadGuard=a;