@thewrong/ui 0.2.0 → 0.4.0

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

@@ -1,125 +1,76 @@
-import { ChevronDown as e } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.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 { cn as r } from "../../lib/utils.esm.js";
-import { useIsMobile as i } from "../../hooks/useMediaQuery.esm.js";
-import { useBottomSheetDrag as a } from "../../hooks/useBottomSheetDrag.esm.js";
-import { useScrollLock as o } from "../../hooks/useScrollLock.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 { AnimatePresence as f, motion as p } from "motion/react";
-import { FloatingPortal as m, autoUpdate as h, flip as g, offset as _, shift as v, useClick as y, useDismiss as b, useFloating as x, useInteractions as S, useRole as C } from "@floating-ui/react";
-import { addMonths as w, eachDayOfInterval as T, endOfMonth as E, endOfWeek as D, format as O, isAfter as k, isBefore as A, isSameDay as j, isSameMonth as M, isValid as N, parseISO as P, startOfMonth as F, startOfWeek as I, subMonths as L } from "date-fns";
-import { ko as R } from "date-fns/locale";
+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 z = 24;
-function B({ children: e, value: t, onApply: n, disabled: r }) {
-	let [s, w] = c(!1), T = i(), { refs: E, floatingStyles: D, context: O } = x({
-		open: s,
+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 || w(e);
+			r || x(e);
 		},
 		placement: "bottom-start",
-		whileElementsMounted: h,
+		whileElementsMounted: d,
 		middleware: [
-			_(8),
-			g({ fallbackAxisSideDirection: "start" }),
-			v({ padding: 8 })
+			p(8),
+			f({ fallbackAxisSideDirection: "start" }),
+			m({ padding: 8 })
 		]
-	}), { getReferenceProps: k, getFloatingProps: A } = S([
-		y(O, { enabled: !r }),
-		b(O),
-		C(O, { role: "dialog" })
-	]);
-	o(s && T);
-	let { dragControls: j, handleDragEnd: M, startDrag: N } = a({ onDismiss: () => w(!1) }), P = (e) => {
-		n(e), w(!1);
+	}), { getReferenceProps: D, getFloatingProps: O } = v([
+		h(E, { enabled: !r }),
+		g(E),
+		y(E, { role: "dialog" })
+	]), k = (e) => {
+		n(e), x(!1);
 	};
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
-		ref: E.setReference,
-		...k(),
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+		ref: w.setReference,
+		...D(),
 		className: "inline-flex",
 		children: e
-	}), /* @__PURE__ */ u(m, { children: T ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(f, { children: s && /* @__PURE__ */ u(p.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: { duration: .2 },
-		className: "fixed inset-0 z-50 bg-black/40",
-		onClick: () => w(!1)
-	}, "date-range-picker-dimmer") }), /* @__PURE__ */ u(f, { children: s && /* @__PURE__ */ d(p.div, {
-		ref: E.setFloating,
-		...A(),
-		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: j,
-		dragConstraints: { top: 0 },
-		dragElastic: {
-			top: 0,
-			bottom: .4
-		},
-		onDragEnd: M,
-		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__ */ u("div", {
-			className: "self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing",
-			onPointerDown: N
-		}), /* @__PURE__ */ u(V, {
+	}), /* @__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: !0,
-			onApply: P,
-			onClose: () => w(!1)
-		})]
-	}, "date-range-picker-sheet") })] }) : s && /* @__PURE__ */ u("div", {
-		ref: E.setFloating,
-		style: D,
-		...A(),
-		className: "z-9999 rounded-2xl border border-border-tertiary bg-bg-card p-6 shadow-md",
-		children: /* @__PURE__ */ u(V, {
-			value: t,
-			isMobile: !1,
-			onApply: P,
-			onClose: () => w(!1)
+			isMobile: S,
+			onApply: k,
+			onClose: () => x(!1)
 		})
-	}) })] });
+	})] });
 }
-function V({ value: e, isMobile: t, onApply: n, onClose: r }) {
-	let i = W(e?.from), a = W(e?.to), [o, s] = c(i), [f, p] = c(a), [m, h] = c(i ?? /* @__PURE__ */ new Date()), g = w(m, 1), _ = (e) => {
+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) {
-			s(e), p(null);
+			d(e), p(null);
 			return;
 		}
-		if (A(e, o)) {
-			s(e), p(null);
+		if (E(e, o)) {
+			d(e), p(null);
 			return;
 		}
 		p(e);
-	}, v = /* @__PURE__ */ d("div", {
+	}, v = /* @__PURE__ */ u("div", {
 		className: "mt-6 flex items-center justify-end gap-2",
-		children: [/* @__PURE__ */ u("button", {
+		children: [/* @__PURE__ */ l("button", {
 			type: "button",
 			onClick: r,
-			className: "cursor-pointer rounded-full bg-bg-base-primary px-5 py-2 text-sm font-semibold text-text-secondary transition-colors hover:bg-bg-base-secondary",
+			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", {
+		}), /* @__PURE__ */ l("button", {
 			type: "button",
 			onClick: () => {
 				if (!o) {
@@ -127,44 +78,44 @@ function V({ value: e, isMobile: t, onApply: n, onClose: r }) {
 					return;
 				}
 				n({
-					from: O(o, "yyyy-MM-dd"),
-					to: O(f ?? o, "yyyy-MM-dd")
+					from: w(o, "yyyy-MM-dd"),
+					to: w(f ?? o, "yyyy-MM-dd")
 				});
 			},
-			className: "cursor-pointer rounded-full bg-primary-500 px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90",
+			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__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+	return t ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
 		className: "flex justify-center",
-		children: /* @__PURE__ */ u(H, {
+		children: /* @__PURE__ */ l(R, {
 			month: m,
 			onMonthChange: h,
-			onPrev: () => h(L(m, 1)),
-			onNext: () => h(w(m, 1)),
+			onPrev: () => h(N(m, 1)),
+			onNext: () => h(b(m, 1)),
 			showPrev: !0,
 			showNext: !0,
 			rangeFrom: o,
 			rangeTo: f,
 			onDayClick: _
 		})
-	}), v] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
+	}), v] }) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
 		className: "flex items-stretch gap-8",
 		children: [
-			/* @__PURE__ */ u(H, {
+			/* @__PURE__ */ l(R, {
 				month: m,
 				onMonthChange: h,
-				onPrev: () => h(L(m, 1)),
+				onPrev: () => h(N(m, 1)),
 				showPrev: !0,
 				rangeFrom: o,
 				rangeTo: f,
 				onDayClick: _
 			}),
-			/* @__PURE__ */ u("div", { className: "w-px bg-border-tertiary" }),
-			/* @__PURE__ */ u(H, {
+			/* @__PURE__ */ l("div", { className: "w-px bg-border-subtle" }),
+			/* @__PURE__ */ l(R, {
 				month: g,
-				onMonthChange: (e) => h(L(e, 1)),
-				onNext: () => h(w(m, 1)),
+				onMonthChange: (e) => h(N(e, 1)),
+				onNext: () => h(b(m, 1)),
 				showNext: !0,
 				rangeFrom: o,
 				rangeTo: f,
@@ -173,53 +124,53 @@ function V({ value: e, isMobile: t, onApply: n, onClose: r }) {
 		]
 	}), v] });
 }
-function H({ month: t, onMonthChange: n, onPrev: i, onNext: a, showPrev: o, showNext: l, rangeFrom: f, rangeTo: p, onDayClick: m }) {
-	let [h, g] = c(!1), _ = s(() => T({
-		start: I(F(t), { weekStartsOn: 0 }),
-		end: D(E(t), { weekStartsOn: 0 })
-	}), [t]), v = s(() => {
+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 <= z; t++) e.push(w(F(/* @__PURE__ */ new Date()), t));
+		for (let t = -24; t <= F; t++) e.push(b(j(/* @__PURE__ */ new Date()), t));
 		return e;
 	}, []);
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ u("div", {
 		className: "flex w-full max-w-[300px] flex-col sm:w-[260px]",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ u("div", {
 				className: "mb-4 flex items-center justify-between",
 				children: [
-					/* @__PURE__ */ u(U, {
+					/* @__PURE__ */ l(z, {
 						direction: "left",
 						onClick: i,
-						visible: !!o
+						visible: !!c
 					}),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ u("div", {
 						className: "relative flex flex-1 justify-center",
-						children: [/* @__PURE__ */ d("button", {
+						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-text-primary transition-colors hover:bg-bg-base-primary",
-							children: [O(t, "yyyy. MM."), /* @__PURE__ */ u(e, { className: "h-3.5 w-3.5 text-text-tertiary" })]
-						}), h && /* @__PURE__ */ u("div", {
-							className: "scrollbar-brand absolute top-full z-20 mt-1 max-h-[240px] w-[140px] overflow-y-auto rounded-lg border border-border-tertiary bg-bg-card py-1 shadow-lg",
-							children: v.map((e) => /* @__PURE__ */ u("button", {
+							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: () => {
-									n(e), g(!1);
+									r(t), g(!1);
 								},
-								className: r("w-full cursor-pointer bg-bg-card px-4 py-2 text-left text-sm transition-colors", M(e, t) ? "bg-bg-base-secondary font-semibold text-text-primary" : "text-text-secondary hover:bg-bg-base-primary"),
-								children: O(e, "yyyy. MM.")
-							}, e.toISOString()))
+								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__ */ u(U, {
+					/* @__PURE__ */ l(z, {
 						direction: "right",
 						onClick: a,
-						visible: !!l
+						visible: !!d
 					})
 				]
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ l("div", {
 				className: "mb-2 grid grid-cols-7",
 				children: [
 					"일",
@@ -229,59 +180,59 @@ function H({ month: t, onMonthChange: n, onPrev: i, onNext: a, showPrev: o, show
 					"목",
 					"금",
 					"토"
-				].map((e) => /* @__PURE__ */ u("div", {
-					className: "py-1 text-center text-xs font-medium text-text-tertiary",
+				].map((e) => /* @__PURE__ */ l("div", {
+					className: "py-1 text-center text-xs font-medium text-fg-subtle",
 					children: e
 				}, e))
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ l("div", {
 				className: "grid grid-cols-7 gap-y-1",
-				children: _.map((e) => {
-					let i = M(e, t), a = !!(f && j(e, f)), o = !!(p && j(e, p)), s = !!f && !!p && k(e, f) && A(e, p), c = a || o, l = s || o && !!f, h = s || a && !!p;
-					return /* @__PURE__ */ d("button", {
+				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 || n(e), m(e);
+							i || r(t), m(t);
 						},
 						className: "group relative flex h-9 cursor-pointer items-center justify-center text-sm",
-						"aria-label": O(e, "yyyy년 M월 d일", { locale: R }),
+						"aria-label": w(t, "yyyy년 M월 d일", { locale: P }),
 						children: [
-							l && /* @__PURE__ */ u("span", {
-								className: "absolute inset-y-0 left-0 right-1/2 bg-bg-base-secondary",
+							d && /* @__PURE__ */ l("span", {
+								className: "absolute inset-y-0 left-0 right-1/2 bg-bg-muted",
 								"aria-hidden": !0
 							}),
-							h && /* @__PURE__ */ u("span", {
-								className: "absolute inset-y-0 left-1/2 right-0 bg-bg-base-secondary",
+							h && /* @__PURE__ */ l("span", {
+								className: "absolute inset-y-0 left-1/2 right-0 bg-bg-muted",
 								"aria-hidden": !0
 							}),
-							c && /* @__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-500",
+							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__ */ u("span", {
-								className: r("relative z-10", !i && "text-text-disabled", i && !c && "text-text-primary", c && "font-bold text-white"),
-								children: O(e, "d")
+							/* @__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")
 							})
 						]
-					}, e.toISOString());
+					}, t.toISOString());
 				})
 			})
 		]
 	});
 }
-function U({ direction: e, onClick: r, visible: i }) {
-	return i ? /* @__PURE__ */ u("button", {
+function z({ direction: e, onClick: t, visible: i }) {
+	return i ? /* @__PURE__ */ l("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",
+		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" ? t : n, { className: "h-4 w-4" })
-	}) : /* @__PURE__ */ u("div", { className: "w-8" });
+		children: /* @__PURE__ */ l(e === "left" ? n : r, { className: "h-4 w-4" })
+	}) : /* @__PURE__ */ l("div", { className: "w-8" });
 }
-function W(e) {
+function B(e) {
 	if (!e) return null;
-	let t = P(e);
-	return N(t) ? t : null;
+	let t = A(e);
+	return k(t) ? t : null;
 }
 //#endregion
-export { B as DateRangePicker };
+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;
 }