@thewrong/ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,183 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { ChevronLeft as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as r } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { AnimatedHeight as i } from "../animated-height/AnimatedHeight.esm.js";
+import { PickerSheet as a, usePickerMobile as o } from "./PickerSheet.esm.js";
+import { useMemo as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { autoUpdate as f, flip as p, offset as m, shift as h, useClick as g, useDismiss as _, useFloating as v, useInteractions as y, useRole as b } from "@floating-ui/react";
+import { addMonths as x, eachDayOfInterval as S, endOfMonth as C, endOfWeek as w, format as T, isSameDay as E, isSameMonth as D, isValid as O, parseISO as k, startOfMonth as A, startOfWeek as j, subMonths as M } from "date-fns";
+import { ko as N } from "date-fns/locale";
+//#region src/components/date-picker/date-picker.tsx
+var P = 24;
+function F({ children: e, value: t, onApply: n, disabled: r, disableMobileSheet: i }) {
+	let [s, x] = c(!1), { useSheet: S } = o(i), { refs: C, floatingStyles: w, context: T } = v({
+		open: s,
+		onOpenChange: (e) => {
+			r || x(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: f,
+		middleware: [
+			m(8),
+			p({ fallbackAxisSideDirection: "start" }),
+			h({ padding: 8 })
+		]
+	}), { getReferenceProps: E, getFloatingProps: D } = y([
+		g(T, { enabled: !r }),
+		_(T),
+		b(T, { role: "dialog" })
+	]), O = (e) => {
+		n(e), x(!1);
+	};
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+		ref: C.setReference,
+		...E(),
+		className: "inline-flex",
+		children: e
+	}), /* @__PURE__ */ u(a, {
+		isOpen: s,
+		onClose: () => x(!1),
+		useSheet: S,
+		context: T,
+		setFloating: C.setFloating,
+		floatingStyles: w,
+		getFloatingProps: D,
+		desktopClassName: "z-floating w-80 rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-6 shadow-tooltip",
+		children: /* @__PURE__ */ u(I, {
+			initialValue: t,
+			onApply: O,
+			onClose: () => x(!1)
+		})
+	})] });
+}
+function I({ initialValue: e, onApply: t, onClose: n }) {
+	let r = z(e), [i, a] = c(r), [o, s] = c(r ?? /* @__PURE__ */ new Date());
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(L, {
+		month: o,
+		onMonthChange: s,
+		onPrev: () => s(M(o, 1)),
+		onNext: () => s(x(o, 1)),
+		selected: i,
+		onDayClick: (e) => a(e)
+	}), /* @__PURE__ */ d("div", {
+		className: "mt-6 flex items-center justify-end gap-2",
+		children: [/* @__PURE__ */ u("button", {
+			type: "button",
+			onClick: n,
+			className: "cursor-pointer rounded-full bg-bg-subtle px-5 py-2 text-sm font-semibold text-fg-muted transition-colors hover:bg-bg-muted",
+			children: "닫기"
+		}), /* @__PURE__ */ u("button", {
+			type: "button",
+			onClick: () => {
+				if (!i) {
+					n();
+					return;
+				}
+				t(T(i, "yyyy-MM-dd"));
+			},
+			className: "cursor-pointer rounded-full bg-primary px-5 py-2 text-sm font-semibold text-fg-inverse transition-opacity hover:opacity-90",
+			children: "적용"
+		})]
+	})] });
+}
+function L({ month: n, onMonthChange: r, onPrev: a, onNext: o, selected: l, onDayClick: f }) {
+	let [p, m] = c(!1), h = s(() => S({
+		start: j(A(n), { weekStartsOn: 0 }),
+		end: w(C(n), { weekStartsOn: 0 })
+	}), [n]), g = s(() => {
+		let e = [];
+		for (let t = -24; t <= P; t++) e.push(x(A(/* @__PURE__ */ new Date()), t));
+		return e;
+	}, []);
+	return /* @__PURE__ */ d("div", {
+		className: "mx-auto flex w-full max-w-75 flex-col sm:w-65",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ u(R, {
+						direction: "left",
+						onClick: a
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "relative flex flex-1 justify-center",
+						children: [/* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: () => m((e) => !e),
+							className: "flex cursor-pointer items-center gap-1 rounded px-3 py-1.5 text-sm font-semibold text-fg-default transition-colors hover:bg-bg-subtle",
+							children: [T(n, "yyyy. MM."), /* @__PURE__ */ u(t, { className: "h-3.5 w-3.5 text-fg-subtle" })]
+						}), p && /* @__PURE__ */ u("div", {
+							className: "scrollbar-brand absolute top-full z-20 mt-1 max-h-60 w-35 overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface py-1 shadow-overlay",
+							children: g.map((t) => /* @__PURE__ */ u("button", {
+								type: "button",
+								onClick: () => {
+									r(t), m(!1);
+								},
+								className: e("w-full cursor-pointer bg-bg-surface px-4 py-2 text-left text-sm transition-colors", D(t, n) ? "bg-bg-muted font-semibold text-fg-default" : "text-fg-muted hover:bg-bg-subtle"),
+								children: T(t, "yyyy. MM.")
+							}, t.toISOString()))
+						})]
+					}),
+					/* @__PURE__ */ u(R, {
+						direction: "right",
+						onClick: o
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "mb-2 grid grid-cols-7",
+				children: [
+					"일",
+					"월",
+					"화",
+					"수",
+					"목",
+					"금",
+					"토"
+				].map((e) => /* @__PURE__ */ u("div", {
+					className: "py-1 text-center text-xs font-medium text-fg-subtle",
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ u(i, { children: /* @__PURE__ */ u("div", {
+				className: "grid grid-cols-7 gap-y-1",
+				children: h.map((t) => {
+					let i = D(t, n), a = !!(l && E(t, l));
+					return /* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: () => {
+							i || r(t), f(t);
+						},
+						className: "group relative flex h-9 cursor-pointer items-center justify-center text-sm",
+						"aria-label": T(t, "yyyy년 M월 d일", { locale: N }),
+						children: [a && /* @__PURE__ */ u("span", {
+							className: "absolute left-1/2 top-1/2 h-9 w-9 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary",
+							"aria-hidden": !0
+						}), /* @__PURE__ */ u("span", {
+							className: e("relative z-10", !i && "text-fg-disabled", i && !a && "text-fg-default", a && "font-bold text-fg-inverse"),
+							children: T(t, "d")
+						})]
+					}, t.toISOString());
+				})
+			}) })
+		]
+	});
+}
+function R({ direction: e, onClick: t }) {
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		onClick: t,
+		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__ */ u(e === "left" ? n : r, { className: "h-4 w-4" })
+	});
+}
+function z(e) {
+	if (!e) return null;
+	let t = k(e);
+	return O(t) ? t : null;
+}
+//#endregion
+export { F as DatePicker, I as DatePickerBody };

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.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("./PickerSheet.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("@floating-ui/react"),c=require("date-fns"),l=require("date-fns/locale");var u=24;function d({children:e,value:t,onApply:n,disabled:r,disableMobileSheet:c}){let[l,u]=(0,a.useState)(!1),{isMobile:d,useSheet:p}=i.usePickerMobile(c),{refs:m,floatingStyles:h,context:g}=(0,s.useFloating)({open:l,onOpenChange:e=>{r||u(e)},placement:`bottom-start`,whileElementsMounted:s.autoUpdate,middleware:[(0,s.offset)(8),(0,s.flip)({fallbackAxisSideDirection:`start`}),(0,s.shift)({padding:8})]}),{getReferenceProps:_,getFloatingProps:v}=(0,s.useInteractions)([(0,s.useClick)(g,{enabled:!r}),(0,s.useDismiss)(g),(0,s.useRole)(g,{role:`dialog`})]),y=e=>{n(e),u(!1)};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(`span`,{ref:m.setReference,..._(),className:`inline-flex`,children:e}),(0,o.jsx)(i.PickerSheet,{isOpen:l,onClose:()=>u(!1),useSheet:p,context:g,setFloating:m.setFloating,floatingStyles:h,getFloatingProps:v,desktopClassName:`z-floating rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-6 shadow-tooltip`,children:(0,o.jsx)(f,{value:t,isMobile:d,onApply:y,onClose:()=>u(!1)})})]})}function f({value:e,isMobile:t,onApply:n,onClose:r}){let i=h(e?.from),s=h(e?.to),[l,u]=(0,a.useState)(i),[d,f]=(0,a.useState)(s),[m,g]=(0,a.useState)(i??new Date),_=(0,c.addMonths)(m,1),v=e=>{if(!l||l&&d){u(e),f(null);return}if((0,c.isBefore)(e,l)){u(e),f(null);return}f(e)},y=(0,o.jsxs)(`div`,{className:`mt-6 flex items-center justify-end gap-2`,children:[(0,o.jsx)(`button`,{type:`button`,onClick:r,className:`cursor-pointer rounded-full bg-bg-subtle px-5 py-2 text-sm font-semibold text-fg-muted transition-colors hover:bg-bg-muted`,children:`닫기`}),(0,o.jsx)(`button`,{type:`button`,onClick:()=>{if(!l){r();return}n({from:(0,c.format)(l,`yyyy-MM-dd`),to:(0,c.format)(d??l,`yyyy-MM-dd`)})},className:`cursor-pointer rounded-full bg-primary px-5 py-2 text-sm font-semibold text-fg-inverse transition-opacity hover:opacity-90`,children:`적용`})]});return t?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(`div`,{className:`flex justify-center`,children:(0,o.jsx)(p,{month:m,onMonthChange:g,onPrev:()=>g((0,c.subMonths)(m,1)),onNext:()=>g((0,c.addMonths)(m,1)),showPrev:!0,showNext:!0,rangeFrom:l,rangeTo:d,onDayClick:v})}),y]}):(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(`div`,{className:`flex items-stretch gap-8`,children:[(0,o.jsx)(p,{month:m,onMonthChange:g,onPrev:()=>g((0,c.subMonths)(m,1)),showPrev:!0,rangeFrom:l,rangeTo:d,onDayClick:v}),(0,o.jsx)(`div`,{className:`w-px bg-border-subtle`}),(0,o.jsx)(p,{month:_,onMonthChange:e=>g((0,c.subMonths)(e,1)),onNext:()=>g((0,c.addMonths)(m,1)),showNext:!0,rangeFrom:l,rangeTo:d,onDayClick:v})]}),y]})}function p({month:n,onMonthChange:r,onPrev:i,onNext:s,showPrev:d,showNext:f,rangeFrom:p,rangeTo:h,onDayClick:g}){let[_,v]=(0,a.useState)(!1),y=(0,a.useMemo)(()=>(0,c.eachDayOfInterval)({start:(0,c.startOfWeek)((0,c.startOfMonth)(n),{weekStartsOn:0}),end:(0,c.endOfWeek)((0,c.endOfMonth)(n),{weekStartsOn:0})}),[n]),b=(0,a.useMemo)(()=>{let e=[];for(let t=-24;t<=u;t++)e.push((0,c.addMonths)((0,c.startOfMonth)(new Date),t));return e},[]);return(0,o.jsxs)(`div`,{className:`flex w-full max-w-[300px] flex-col sm:w-[260px]`,children:[(0,o.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[(0,o.jsx)(m,{direction:`left`,onClick:i,visible:!!d}),(0,o.jsxs)(`div`,{className:`relative flex flex-1 justify-center`,children:[(0,o.jsxs)(`button`,{type:`button`,onClick:()=>v(e=>!e),className:`flex cursor-pointer items-center gap-1 rounded px-3 py-1.5 text-sm font-semibold text-fg-default transition-colors hover:bg-bg-subtle`,children:[(0,c.format)(n,`yyyy. MM.`),(0,o.jsx)(t.ChevronDown,{className:`h-3.5 w-3.5 text-fg-subtle`})]}),_&&(0,o.jsx)(`div`,{className:`scrollbar-brand absolute top-full z-20 mt-1 max-h-[240px] w-[140px] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface py-1 shadow-overlay`,children:b.map(t=>(0,o.jsx)(`button`,{type:`button`,onClick:()=>{r(t),v(!1)},className:e.cn(`w-full cursor-pointer bg-bg-surface px-4 py-2 text-left text-sm transition-colors`,(0,c.isSameMonth)(t,n)?`bg-bg-muted font-semibold text-fg-default`:`text-fg-muted hover:bg-bg-subtle`),children:(0,c.format)(t,`yyyy. MM.`)},t.toISOString()))})]}),(0,o.jsx)(m,{direction:`right`,onClick:s,visible:!!f})]}),(0,o.jsx)(`div`,{className:`mb-2 grid grid-cols-7`,children:[`일`,`월`,`화`,`수`,`목`,`금`,`토`].map(e=>(0,o.jsx)(`div`,{className:`py-1 text-center text-xs font-medium text-fg-subtle`,children:e},e))}),(0,o.jsx)(`div`,{className:`grid grid-cols-7 gap-y-1`,children:y.map(t=>{let i=(0,c.isSameMonth)(t,n),a=!!(p&&(0,c.isSameDay)(t,p)),s=!!(h&&(0,c.isSameDay)(t,h)),u=!!p&&!!h&&(0,c.isAfter)(t,p)&&(0,c.isBefore)(t,h),d=a||s,f=u||s&&!!p,m=u||a&&!!h;return(0,o.jsxs)(`button`,{type:`button`,onClick:()=>{i||r(t),g(t)},className:`group relative flex h-9 cursor-pointer items-center justify-center text-sm`,"aria-label":(0,c.format)(t,`yyyy년 M월 d일`,{locale:l.ko}),children:[f&&(0,o.jsx)(`span`,{className:`absolute inset-y-0 left-0 right-1/2 bg-bg-muted`,"aria-hidden":!0}),m&&(0,o.jsx)(`span`,{className:`absolute inset-y-0 left-1/2 right-0 bg-bg-muted`,"aria-hidden":!0}),d&&(0,o.jsx)(`span`,{className:`absolute left-1/2 top-1/2 h-9 w-9 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary`,"aria-hidden":!0}),(0,o.jsx)(`span`,{className:e.cn(`relative z-10`,!i&&`text-fg-disabled`,i&&!d&&`text-fg-default`,d&&`font-bold text-fg-inverse`),children:(0,c.format)(t,`d`)})]},t.toISOString())})})]})}function m({direction:e,onClick:t,visible:i}){let a=e===`left`?n.ChevronLeft:r.ChevronRight;return i?(0,o.jsx)(`button`,{type:`button`,onClick:t,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:(0,o.jsx)(a,{className:`h-4 w-4`})}):(0,o.jsx)(`div`,{className:`w-8`})}function h(e){if(!e)return null;let t=(0,c.parseISO)(e);return(0,c.isValid)(t)?t:null}exports.DateRangePicker=d;

package/dist/{src/components → components}/date-picker/date-range-picker.d.ts

@@ -9,6 +9,8 @@ interface DateRangePickerProps {
     value?: DateRange;
     onApply: (range: DateRange) => void;
     disabled?: boolean;
+    /** 이미 바텀시트 안에 있으면 모바일에서도 popover로 표시한다. Modal에서는 생략 시 자동 적용되며, false를 명시하면 시트를 유지한다. */
+    disableMobileSheet?: boolean;
 }
 /**
  * 날짜 범위 선택 popover.
@@ -17,5 +19,5 @@ interface DateRangePickerProps {
  * 모바일에선 바텀시트로 풀스크린 전환(트리거 위치 계산 무시) + 단일 캘린더.
  * 데스크탑은 두 달 가로 배치.
  */
-export declare function DateRangePicker({ children, value, onApply, disabled, }: DateRangePickerProps): import("react").JSX.Element;
+export declare function DateRangePicker({ children, value, onApply, disabled, disableMobileSheet, }: DateRangePickerProps): import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,238 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { ChevronLeft as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as r } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { PickerSheet as i, usePickerMobile as a } from "./PickerSheet.esm.js";
+import { useMemo as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { autoUpdate as d, flip as f, offset as p, shift as m, useClick as h, useDismiss as g, useFloating as _, useInteractions as v, useRole as y } from "@floating-ui/react";
+import { addMonths as b, eachDayOfInterval as x, endOfMonth as S, endOfWeek as C, format as w, isAfter as T, isBefore as E, isSameDay as D, isSameMonth as O, isValid as k, parseISO as A, startOfMonth as j, startOfWeek as M, subMonths as N } from "date-fns";
+import { ko as P } from "date-fns/locale";
+//#region src/components/date-picker/date-range-picker.tsx
+var F = 24;
+function I({ children: e, value: t, onApply: n, disabled: r, disableMobileSheet: o }) {
+	let [b, x] = s(!1), { isMobile: S, useSheet: C } = a(o), { refs: w, floatingStyles: T, context: E } = _({
+		open: b,
+		onOpenChange: (e) => {
+			r || x(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: d,
+		middleware: [
+			p(8),
+			f({ fallbackAxisSideDirection: "start" }),
+			m({ padding: 8 })
+		]
+	}), { getReferenceProps: D, getFloatingProps: O } = v([
+		h(E, { enabled: !r }),
+		g(E),
+		y(E, { role: "dialog" })
+	]), k = (e) => {
+		n(e), x(!1);
+	};
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+		ref: w.setReference,
+		...D(),
+		className: "inline-flex",
+		children: e
+	}), /* @__PURE__ */ l(i, {
+		isOpen: b,
+		onClose: () => x(!1),
+		useSheet: C,
+		context: E,
+		setFloating: w.setFloating,
+		floatingStyles: T,
+		getFloatingProps: O,
+		desktopClassName: "z-floating rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-6 shadow-tooltip",
+		children: /* @__PURE__ */ l(L, {
+			value: t,
+			isMobile: S,
+			onApply: k,
+			onClose: () => x(!1)
+		})
+	})] });
+}
+function L({ value: e, isMobile: t, onApply: n, onClose: r }) {
+	let i = B(e?.from), a = B(e?.to), [o, d] = s(i), [f, p] = s(a), [m, h] = s(i ?? /* @__PURE__ */ new Date()), g = b(m, 1), _ = (e) => {
+		if (!o || o && f) {
+			d(e), p(null);
+			return;
+		}
+		if (E(e, o)) {
+			d(e), p(null);
+			return;
+		}
+		p(e);
+	}, v = /* @__PURE__ */ u("div", {
+		className: "mt-6 flex items-center justify-end gap-2",
+		children: [/* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: r,
+			className: "cursor-pointer rounded-full bg-bg-subtle px-5 py-2 text-sm font-semibold text-fg-muted transition-colors hover:bg-bg-muted",
+			children: "닫기"
+		}), /* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: () => {
+				if (!o) {
+					r();
+					return;
+				}
+				n({
+					from: w(o, "yyyy-MM-dd"),
+					to: w(f ?? o, "yyyy-MM-dd")
+				});
+			},
+			className: "cursor-pointer rounded-full bg-primary px-5 py-2 text-sm font-semibold text-fg-inverse transition-opacity hover:opacity-90",
+			children: "적용"
+		})]
+	});
+	return t ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+		className: "flex justify-center",
+		children: /* @__PURE__ */ l(R, {
+			month: m,
+			onMonthChange: h,
+			onPrev: () => h(N(m, 1)),
+			onNext: () => h(b(m, 1)),
+			showPrev: !0,
+			showNext: !0,
+			rangeFrom: o,
+			rangeTo: f,
+			onDayClick: _
+		})
+	}), v] }) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
+		className: "flex items-stretch gap-8",
+		children: [
+			/* @__PURE__ */ l(R, {
+				month: m,
+				onMonthChange: h,
+				onPrev: () => h(N(m, 1)),
+				showPrev: !0,
+				rangeFrom: o,
+				rangeTo: f,
+				onDayClick: _
+			}),
+			/* @__PURE__ */ l("div", { className: "w-px bg-border-subtle" }),
+			/* @__PURE__ */ l(R, {
+				month: g,
+				onMonthChange: (e) => h(N(e, 1)),
+				onNext: () => h(b(m, 1)),
+				showNext: !0,
+				rangeFrom: o,
+				rangeTo: f,
+				onDayClick: _
+			})
+		]
+	}), v] });
+}
+function R({ month: n, onMonthChange: r, onPrev: i, onNext: a, showPrev: c, showNext: d, rangeFrom: f, rangeTo: p, onDayClick: m }) {
+	let [h, g] = s(!1), _ = o(() => x({
+		start: M(j(n), { weekStartsOn: 0 }),
+		end: C(S(n), { weekStartsOn: 0 })
+	}), [n]), v = o(() => {
+		let e = [];
+		for (let t = -24; t <= F; t++) e.push(b(j(/* @__PURE__ */ new Date()), t));
+		return e;
+	}, []);
+	return /* @__PURE__ */ u("div", {
+		className: "flex w-full max-w-[300px] flex-col sm:w-[260px]",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ l(z, {
+						direction: "left",
+						onClick: i,
+						visible: !!c
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "relative flex flex-1 justify-center",
+						children: [/* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => g((e) => !e),
+							className: "flex cursor-pointer items-center gap-1 rounded px-3 py-1.5 text-sm font-semibold text-fg-default transition-colors hover:bg-bg-subtle",
+							children: [w(n, "yyyy. MM."), /* @__PURE__ */ l(t, { className: "h-3.5 w-3.5 text-fg-subtle" })]
+						}), h && /* @__PURE__ */ l("div", {
+							className: "scrollbar-brand absolute top-full z-20 mt-1 max-h-[240px] w-[140px] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface py-1 shadow-overlay",
+							children: v.map((t) => /* @__PURE__ */ l("button", {
+								type: "button",
+								onClick: () => {
+									r(t), g(!1);
+								},
+								className: e("w-full cursor-pointer bg-bg-surface px-4 py-2 text-left text-sm transition-colors", O(t, n) ? "bg-bg-muted font-semibold text-fg-default" : "text-fg-muted hover:bg-bg-subtle"),
+								children: w(t, "yyyy. MM.")
+							}, t.toISOString()))
+						})]
+					}),
+					/* @__PURE__ */ l(z, {
+						direction: "right",
+						onClick: a,
+						visible: !!d
+					})
+				]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "mb-2 grid grid-cols-7",
+				children: [
+					"일",
+					"월",
+					"화",
+					"수",
+					"목",
+					"금",
+					"토"
+				].map((e) => /* @__PURE__ */ l("div", {
+					className: "py-1 text-center text-xs font-medium text-fg-subtle",
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "grid grid-cols-7 gap-y-1",
+				children: _.map((t) => {
+					let i = O(t, n), a = !!(f && D(t, f)), o = !!(p && D(t, p)), s = !!f && !!p && T(t, f) && E(t, p), c = a || o, d = s || o && !!f, h = s || a && !!p;
+					return /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => {
+							i || r(t), m(t);
+						},
+						className: "group relative flex h-9 cursor-pointer items-center justify-center text-sm",
+						"aria-label": w(t, "yyyy년 M월 d일", { locale: P }),
+						children: [
+							d && /* @__PURE__ */ l("span", {
+								className: "absolute inset-y-0 left-0 right-1/2 bg-bg-muted",
+								"aria-hidden": !0
+							}),
+							h && /* @__PURE__ */ l("span", {
+								className: "absolute inset-y-0 left-1/2 right-0 bg-bg-muted",
+								"aria-hidden": !0
+							}),
+							c && /* @__PURE__ */ l("span", {
+								className: "absolute left-1/2 top-1/2 h-9 w-9 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary",
+								"aria-hidden": !0
+							}),
+							/* @__PURE__ */ l("span", {
+								className: e("relative z-10", !i && "text-fg-disabled", i && !c && "text-fg-default", c && "font-bold text-fg-inverse"),
+								children: w(t, "d")
+							})
+						]
+					}, t.toISOString());
+				})
+			})
+		]
+	});
+}
+function z({ direction: e, onClick: t, visible: i }) {
+	return i ? /* @__PURE__ */ l("button", {
+		type: "button",
+		onClick: t,
+		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__ */ l(e === "left" ? n : r, { className: "h-4 w-4" })
+	}) : /* @__PURE__ */ l("div", { className: "w-8" });
+}
+function B(e) {
+	if (!e) return null;
+	let t = A(e);
+	return k(t) ? t : null;
+}
+//#endregion
+export { I as DateRangePicker };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,5 @@
+export { DateRangePicker } from './date-range-picker.js';
+export type { DateRange } from './date-range-picker.js';
+export { DatePicker, DatePickerBody } from './date-picker.js';
+export { MonthPicker } from './month-picker.js';
+export type { MonthValue } from './month-picker.js';

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),r=require("./PickerSheet.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@floating-ui/react");function s({children:e,value:t,onChange:n,disabled:s,disableMobileSheet:l}){let[u,d]=(0,i.useState)(!1),{useSheet:f}=r.usePickerMobile(l),{refs:p,floatingStyles:m,context:h}=(0,o.useFloating)({open:u,onOpenChange:e=>{s||d(e)},placement:`bottom-start`,whileElementsMounted:o.autoUpdate,middleware:[(0,o.offset)(8),(0,o.flip)({fallbackAxisSideDirection:`start`}),(0,o.shift)({padding:8})]}),{getReferenceProps:g,getFloatingProps:_}=(0,o.useInteractions)([(0,o.useClick)(h,{enabled:!s}),(0,o.useDismiss)(h),(0,o.useRole)(h,{role:`dialog`})]),v=e=>{n(e),d(!1)},y=new Date,[b,x]=(0,i.useState)(t?.year??y.getFullYear()),S=(0,a.jsx)(c,{year:b,onYearChange:x,selectedYear:t?.year,selectedMonth:t?.month,currentYear:y.getFullYear(),currentMonth:y.getMonth()+1,onSelect:e=>v({year:b,month:e})});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`span`,{ref:p.setReference,...g(),className:`inline-flex`,children:e}),(0,a.jsx)(r.PickerSheet,{isOpen:u,onClose:()=>d(!1),useSheet:f,context:h,setFloating:p.setFloating,floatingStyles:m,getFloatingProps:_,desktopClassName:`z-floating w-70 rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-5 shadow-tooltip`,children:S})]})}function c({year:t,onYearChange:n,selectedYear:r,selectedMonth:i,currentYear:o,currentMonth:s,onSelect:c}){let u=Array.from({length:12},(e,t)=>t+1);return(0,a.jsxs)(`div`,{className:`flex flex-col`,children:[(0,a.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[(0,a.jsx)(l,{direction:`left`,onClick:()=>n(t-1)}),(0,a.jsxs)(`div`,{className:`flex-1 text-center text-sm font-semibold text-fg-default`,children:[t,`년`]}),(0,a.jsx)(l,{direction:`right`,onClick:()=>n(t+1)})]}),(0,a.jsx)(`div`,{className:`grid grid-cols-4 gap-2`,children:u.map(n=>{let l=r===t&&i===n;return(0,a.jsxs)(`button`,{type:`button`,onClick:()=>c(n),className:e.cn(`h-10 cursor-pointer rounded-lg text-sm transition-colors`,l?`bg-primary font-bold text-fg-inverse`:t===o&&n===s?`bg-bg-muted font-semibold text-fg-default`:`text-fg-default hover:bg-bg-subtle`),"aria-label":`${t}년 ${n}월`,"aria-pressed":l,children:[n,`월`]},n)})})]})}function l({direction:e,onClick:r}){return(0,a.jsx)(`button`,{type:`button`,onClick:r,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:(0,a.jsx)(e===`left`?t.ChevronLeft:n.ChevronRight,{className:`h-4 w-4`})})}exports.MonthPicker=s;

package/dist/{src/components → components}/date-picker/month-picker.d.ts

@@ -12,6 +12,7 @@ interface MonthPickerProps {
     /**
      * true면 모바일에서도 바텀시트 대신 popover로 뜬다. 이미 바텀시트(SearchBox 필터 등) 안에
      * 있을 때 시트가 겹치는 걸 막는다.
+     * 생략하면 Modal 안에서는 자동으로 popover를 쓰며, false를 명시하면 바텀시트를 유지한다.
      */
     disableMobileSheet?: boolean;
 }

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

@@ -0,0 +1,103 @@
+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 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) => {
+			v || S(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: l,
+		middleware: [
+			d(8),
+			u({ fallbackAxisSideDirection: "start" }),
+			f({ padding: 8 })
+		]
+	}), { 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: A.getFullYear(),
+		currentMonth: A.getMonth() + 1,
+		onSelect: (e) => k({
+			year: j,
+			month: e
+		})
+	});
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+		ref: w.setReference,
+		...D(),
+		className: "inline-flex",
+		children: e
+	}), /* @__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 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__ */ c("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ c("div", {
+			className: "mb-4 flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ s(b, {
+					direction: "left",
+					onClick: () => n(t - 1)
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "flex-1 text-center text-sm font-semibold text-fg-default",
+					children: [t, "년"]
+				}),
+				/* @__PURE__ */ s(b, {
+					direction: "right",
+					onClick: () => n(t + 1)
+				})
+			]
+		}), /* @__PURE__ */ s("div", {
+			className: "grid grid-cols-4 gap-2",
+			children: u.map((n) => {
+				let s = r === t && i === n;
+				return /* @__PURE__ */ c("button", {
+					type: "button",
+					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 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-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 { 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;