@thewrong/ui 0.2.0 → 0.4.0

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

@@ -1,180 +1,132 @@
-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 { AnimatedHeight as r } from "../animated-height/AnimatedHeight.esm.js";
-import { cn as i } from "../../lib/utils.esm.js";
-import { useIsMobile as a } from "../../hooks/useMediaQuery.esm.js";
-import { useBottomSheetDrag as o } from "../../hooks/useBottomSheetDrag.esm.js";
-import { useScrollLock as s } from "../../hooks/useScrollLock.esm.js";
-import { useMemo as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { AnimatePresence as p, motion as m } from "motion/react";
-import { FloatingPortal as h, autoUpdate as g, flip as _, offset as v, shift as y, useClick as b, useDismiss as x, useFloating as S, useInteractions as C, useRole as w } from "@floating-ui/react";
-import { addMonths as T, eachDayOfInterval as E, endOfMonth as D, endOfWeek as O, format as k, isSameDay as A, isSameMonth as j, isValid as M, parseISO as N, startOfMonth as P, startOfWeek as F, subMonths as I } from "date-fns";
-import { ko as L } 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 { 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 R = 24;
-function z({ children: e, value: t, onApply: n, disabled: r, disableMobileSheet: i = !1 }) {
-	let [c, T] = l(!1), E = a() && !i, { refs: D, floatingStyles: O, context: k } = S({
-		open: c,
+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 || T(e);
+			r || x(e);
 		},
 		placement: "bottom-start",
-		whileElementsMounted: g,
+		whileElementsMounted: f,
 		middleware: [
-			v(8),
-			_({ fallbackAxisSideDirection: "start" }),
-			y({ padding: 8 })
+			m(8),
+			p({ fallbackAxisSideDirection: "start" }),
+			h({ padding: 8 })
 		]
-	}), { getReferenceProps: A, getFloatingProps: j } = C([
-		b(k, { enabled: !r }),
-		x(k),
-		w(k, { role: "dialog" })
-	]);
-	s(c && E);
-	let M = (e) => {
-		n(e), T(!1);
-	}, { dragControls: N, handleDragEnd: P, startDrag: F } = o({ onDismiss: () => T(!1) });
-	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
-		ref: D.setReference,
-		...A(),
+	}), { 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__ */ d(h, { children: E ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(p, { children: c && /* @__PURE__ */ d(m.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: { duration: .2 },
-		className: "fixed inset-0 z-50 bg-black/40",
-		onClick: () => T(!1)
-	}, "date-picker-dimmer") }), /* @__PURE__ */ d(p, { children: c && /* @__PURE__ */ f(m.div, {
-		ref: D.setFloating,
-		...j(),
-		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__ */ d("div", {
-			className: "self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing",
-			onPointerDown: F
-		}), /* @__PURE__ */ d(B, {
+	}), /* @__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: M,
-			onClose: () => T(!1)
-		})]
-	}, "date-picker-sheet") })] }) : c && /* @__PURE__ */ d("div", {
-		ref: D.setFloating,
-		style: O,
-		...j(),
-		className: "z-9999 w-80 rounded-2xl border border-border-tertiary bg-bg-card p-6 shadow-md",
-		children: /* @__PURE__ */ d(B, {
-			initialValue: t,
-			onApply: M,
-			onClose: () => T(!1)
+			onApply: O,
+			onClose: () => x(!1)
 		})
-	}) })] });
+	})] });
 }
-function B({ initialValue: e, onApply: t, onClose: n }) {
-	let r = U(e), [i, a] = l(r), [o, s] = l(r ?? /* @__PURE__ */ new Date());
-	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(V, {
+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(I(o, 1)),
-		onNext: () => s(T(o, 1)),
+		onPrev: () => s(M(o, 1)),
+		onNext: () => s(x(o, 1)),
 		selected: i,
 		onDayClick: (e) => a(e)
-	}), /* @__PURE__ */ f("div", {
+	}), /* @__PURE__ */ d("div", {
 		className: "mt-6 flex items-center justify-end gap-2",
-		children: [/* @__PURE__ */ d("button", {
+		children: [/* @__PURE__ */ u("button", {
 			type: "button",
 			onClick: n,
-			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__ */ d("button", {
+		}), /* @__PURE__ */ u("button", {
 			type: "button",
 			onClick: () => {
 				if (!i) {
 					n();
 					return;
 				}
-				t(k(i, "yyyy-MM-dd"));
+				t(T(i, "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: "적용"
 		})]
 	})] });
 }
-function V({ month: t, onMonthChange: n, onPrev: a, onNext: o, selected: s, onDayClick: u }) {
-	let [p, m] = l(!1), h = c(() => E({
-		start: F(P(t), { weekStartsOn: 0 }),
-		end: O(D(t), { weekStartsOn: 0 })
-	}), [t]), g = c(() => {
+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 <= R; t++) e.push(T(P(/* @__PURE__ */ new Date()), t));
+		for (let t = -24; t <= P; t++) e.push(x(A(/* @__PURE__ */ new Date()), t));
 		return e;
 	}, []);
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ d("div", {
 		className: "mx-auto flex w-full max-w-75 flex-col sm:w-65",
 		children: [
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				className: "mb-4 flex items-center justify-between",
 				children: [
-					/* @__PURE__ */ d(H, {
+					/* @__PURE__ */ u(R, {
 						direction: "left",
 						onClick: a
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ d("div", {
 						className: "relative flex flex-1 justify-center",
-						children: [/* @__PURE__ */ f("button", {
+						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-text-primary transition-colors hover:bg-bg-base-primary",
-							children: [k(t, "yyyy. MM."), /* @__PURE__ */ d(e, { className: "h-3.5 w-3.5 text-text-tertiary" })]
-						}), p && /* @__PURE__ */ d("div", {
-							className: "scrollbar-brand absolute top-full z-20 mt-1 max-h-60 w-35 overflow-y-auto rounded-lg border border-border-tertiary bg-bg-card py-1 shadow-lg",
-							children: g.map((e) => /* @__PURE__ */ d("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: [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: () => {
-									n(e), m(!1);
+									r(t), m(!1);
 								},
-								className: i("w-full cursor-pointer bg-bg-card px-4 py-2 text-left text-sm transition-colors", j(e, t) ? "bg-bg-base-secondary font-semibold text-text-primary" : "text-text-secondary hover:bg-bg-base-primary"),
-								children: k(e, "yyyy. MM.")
-							}, e.toISOString()))
+								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__ */ d(H, {
+					/* @__PURE__ */ u(R, {
 						direction: "right",
 						onClick: o
 					})
 				]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ u("div", {
 				className: "mb-2 grid grid-cols-7",
 				children: [
 					"일",
@@ -184,48 +136,48 @@ function V({ month: t, onMonthChange: n, onPrev: a, onNext: o, selected: s, onDa
 					"목",
 					"금",
 					"토"
-				].map((e) => /* @__PURE__ */ d("div", {
-					className: "py-1 text-center text-xs font-medium text-text-tertiary",
+				].map((e) => /* @__PURE__ */ u("div", {
+					className: "py-1 text-center text-xs font-medium text-fg-subtle",
 					children: e
 				}, e))
 			}),
-			/* @__PURE__ */ d(r, { children: /* @__PURE__ */ d("div", {
+			/* @__PURE__ */ u(i, { children: /* @__PURE__ */ u("div", {
 				className: "grid grid-cols-7 gap-y-1",
-				children: h.map((e) => {
-					let r = j(e, t), a = !!(s && A(e, s));
-					return /* @__PURE__ */ f("button", {
+				children: h.map((t) => {
+					let i = D(t, n), a = !!(l && E(t, l));
+					return /* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: () => {
-							r || n(e), u(e);
+							i || r(t), f(t);
 						},
 						className: "group relative flex h-9 cursor-pointer items-center justify-center text-sm",
-						"aria-label": k(e, "yyyy년 M월 d일", { locale: L }),
-						children: [a && /* @__PURE__ */ d("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",
+						"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__ */ d("span", {
-							className: i("relative z-10", !r && "text-text-disabled", r && !a && "text-text-primary", a && "font-bold text-white"),
-							children: k(e, "d")
+						}), /* @__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")
 						})]
-					}, e.toISOString());
+					}, t.toISOString());
 				})
 			}) })
 		]
 	});
 }
-function H({ direction: e, onClick: r }) {
-	return /* @__PURE__ */ d("button", {
+function R({ direction: e, onClick: t }) {
+	return /* @__PURE__ */ u("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__ */ d(e === "left" ? t : n, { className: "h-4 w-4" })
+		children: /* @__PURE__ */ u(e === "left" ? n : r, { className: "h-4 w-4" })
 	});
 }
-function U(e) {
+function z(e) {
 	if (!e) return null;
-	let t = N(e);
-	return M(t) ? t : null;
+	let t = k(e);
+	return O(t) ? t : null;
 }
 //#endregion
-export { z as DatePicker, B as DatePickerBody };
+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 {};