@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/checkbox/utils.esm.js

@@ -0,0 +1,44 @@
+//#region src/components/checkbox/utils.ts
+function e() {
+	return "appearance-none cursor-pointer transition-all duration-200 focus:outline-hidden";
+}
+function t(t = "primary") {
+	return `${e()} rounded-full border-2 ${{
+		primary: "border-neutral-300 peer-checked:bg-primary-500 peer-checked:border-primary-500 text-white",
+		secondary: "border-neutral-300 peer-checked:bg-secondary-500 peer-checked:border-secondary-500 text-white",
+		neutral: "border-neutral-300 peer-checked:bg-neutral-600 peer-checked:border-neutral-600 text-white"
+	}[t]} relative flex items-center justify-center transition-all duration-200`;
+}
+function n(t = "primary") {
+	return `${e()} rounded-sm border-2 ${{
+		primary: "border-neutral-300 peer-checked:bg-primary-500 peer-checked:border-primary-500 text-white",
+		secondary: "border-neutral-300 peer-checked:bg-secondary-500 peer-checked:border-secondary-500 text-white",
+		neutral: "border-neutral-300 peer-checked:bg-neutral-600 peer-checked:border-neutral-600 text-white"
+	}[t]} relative flex items-center justify-center transition-all duration-200`;
+}
+function r(t = "primary") {
+	return `${e()} rounded-sm border-2 bg-transparent ${{
+		primary: "border-neutral-200 peer-checked:border-primary-500 text-primary-500",
+		secondary: "border-neutral-200 peer-checked:border-secondary-500 text-secondary-500",
+		neutral: "border-neutral-200 peer-checked:border-neutral-600 text-neutral-600"
+	}[t]} relative flex items-center justify-center transition-all duration-200`;
+}
+function i(e, i = "primary") {
+	switch (e) {
+		case "circle": return t(i);
+		case "line": return n(i);
+		case "lineTransparent": return r(i);
+		default: return n(i);
+	}
+}
+function a(e = 24) {
+	return {
+		width: `${e}px`,
+		height: `${e}px`
+	};
+}
+function o() {
+	return "inline-flex items-center gap-2 cursor-pointer select-none";
+}
+//#endregion
+export { a as getCheckboxSizeStyle, i as getCheckboxVariantClasses, o as getLabelClasses };

package/dist/components/collapsible/Collapsible.cjs.js

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime");function t({open:t,durationMs:n=200,ease:r=`cubic-bezier(0.16, 1, 0.3, 1)`,unmountWhenClosed:i=!1,fade:a=!0,className:o=``,children:s}){return i&&!t?null:(0,e.jsx)(`div`,{className:`grid ${o}`,style:{gridTemplateRows:t?`1fr`:`0fr`,opacity:a?+!!t:void 0,transition:[`grid-template-rows ${n}ms ${r}`,a?`opacity ${n}ms ${r}`:null].filter(Boolean).join(`, `)},"aria-hidden":!t,children:(0,e.jsx)(`div`,{className:`overflow-hidden`,children:s})})}exports.Collapsible=t;

package/dist/components/collapsible/Collapsible.esm.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/collapsible/Collapsible.tsx
+function t({ open: t, durationMs: n = 200, ease: r = "cubic-bezier(0.16, 1, 0.3, 1)", unmountWhenClosed: i = !1, fade: a = !0, className: o = "", children: s }) {
+	return i && !t ? null : /* @__PURE__ */ e("div", {
+		className: `grid ${o}`,
+		style: {
+			gridTemplateRows: t ? "1fr" : "0fr",
+			opacity: a ? +!!t : void 0,
+			transition: [`grid-template-rows ${n}ms ${r}`, a ? `opacity ${n}ms ${r}` : null].filter(Boolean).join(", ")
+		},
+		"aria-hidden": !t,
+		children: /* @__PURE__ */ e("div", {
+			className: "overflow-hidden",
+			children: s
+		})
+	});
+}
+//#endregion
+export { t as Collapsible };

package/dist/components/date-input/DateInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/calendar.cjs.js"),t=require("../date-picker/date-picker.cjs.js");let n=require("react/jsx-runtime");function r({value:r,onChange:i,size:a=`small`,ariaLabel:o,label:s,className:c=``,disableMobileSheet:l=!1}){let u=a===`mini`,d=u?`h-8`:`h-10`,f=u?`w-30`:`w-36`,p=u?`pl-2 pr-0.5`:`pl-2.5 pr-1`,m=u?`text-xs`:`text-sm`,h=u?`h-5 w-5`:`h-6 w-6`,g=u?`h-3 w-3`:`h-3.5 w-3.5`,_=`group relative ${d} ${f} ${p} flex items-center gap-1 rounded-lg border border-border-tertiary dark:border-border-secondary bg-bg-white transition-colors focus-within:border-primary-500 ${c}`,v=r?`text-text-primary`:`text-text-tertiary`,y=!!s;return(0,n.jsxs)(`div`,{className:_,children:[(0,n.jsx)(`input`,{type:`date`,value:r,onChange:e=>i(e.target.value),min:`1900-01-01`,max:`9999-12-31`,"aria-label":o??s,className:`search-box-date-input flex-1 bg-transparent ${m} outline-none ${v}`}),(0,n.jsx)(t.DatePicker,{value:r||null,onApply:e=>i(e),disableMobileSheet:l,children:(0,n.jsx)(`button`,{type:`button`,"aria-label":`달력에서 날짜 선택`,className:`flex ${h} items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200`,children:(0,n.jsx)(e.Calendar,{className:g})})}),y&&(0,n.jsx)(`span`,{"aria-hidden":`true`,className:`pointer-events-none absolute -top-2 left-2 bg-bg-white px-1 text-text-secondary group-focus-within:text-primary-500 ${u?`text-[10px]`:`text-xs`}`,children:s})]})}exports.DateInput=r;

package/dist/components/date-input/DateInput.esm.js

@@ -0,0 +1,39 @@
+import { Calendar as e } from "../../node_modules/lucide-react/dist/esm/icons/calendar.esm.js";
+import { DatePicker as t } from "../date-picker/date-picker.esm.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/date-input/DateInput.tsx
+function i({ value: i, onChange: a, size: o = "small", ariaLabel: s, label: c, className: l = "", disableMobileSheet: u = !1 }) {
+	let d = o === "mini", f = d ? "h-8" : "h-10", p = d ? "w-30" : "w-36", m = d ? "pl-2 pr-0.5" : "pl-2.5 pr-1", h = d ? "text-xs" : "text-sm", g = d ? "h-5 w-5" : "h-6 w-6", _ = d ? "h-3 w-3" : "h-3.5 w-3.5", v = `group relative ${f} ${p} ${m} flex items-center gap-1 rounded-lg border border-border-tertiary dark:border-border-secondary bg-bg-white transition-colors focus-within:border-primary-500 ${l}`, y = i ? "text-text-primary" : "text-text-tertiary", b = !!c;
+	return /* @__PURE__ */ r("div", {
+		className: v,
+		children: [
+			/* @__PURE__ */ n("input", {
+				type: "date",
+				value: i,
+				onChange: (e) => a(e.target.value),
+				min: "1900-01-01",
+				max: "9999-12-31",
+				"aria-label": s ?? c,
+				className: `search-box-date-input flex-1 bg-transparent ${h} outline-none ${y}`
+			}),
+			/* @__PURE__ */ n(t, {
+				value: i || null,
+				onApply: (e) => a(e),
+				disableMobileSheet: u,
+				children: /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": "달력에서 날짜 선택",
+					className: `flex ${g} items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200`,
+					children: /* @__PURE__ */ n(e, { className: _ })
+				})
+			}),
+			b && /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: `pointer-events-none absolute -top-2 left-2 bg-bg-white px-1 text-text-secondary group-focus-within:text-primary-500 ${d ? "text-[10px]" : "text-xs"}`,
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+export { i as DateInput };

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

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs.js"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs.js"),r=require("../animated-height/AnimatedHeight.cjs.js"),i=require("../../lib/utils.cjs.js"),a=require("../../hooks/useMediaQuery.cjs.js"),o=require("../../hooks/useBottomSheetDrag.cjs.js"),s=require("../../hooks/useScrollLock.cjs.js");let c=require("react"),l=require("react/jsx-runtime"),u=require("motion/react"),d=require("@floating-ui/react"),f=require("date-fns"),p=require("date-fns/locale");var m=24;function h({children:e,value:t,onApply:n,disabled:r,disableMobileSheet:i=!1}){let[f,p]=(0,c.useState)(!1),m=a.useIsMobile()&&!i,{refs:h,floatingStyles:_,context:v}=(0,d.useFloating)({open:f,onOpenChange:e=>{r||p(e)},placement:`bottom-start`,whileElementsMounted:d.autoUpdate,middleware:[(0,d.offset)(8),(0,d.flip)({fallbackAxisSideDirection:`start`}),(0,d.shift)({padding:8})]}),{getReferenceProps:y,getFloatingProps:b}=(0,d.useInteractions)([(0,d.useClick)(v,{enabled:!r}),(0,d.useDismiss)(v),(0,d.useRole)(v,{role:`dialog`})]);s.useScrollLock(f&&m);let x=e=>{n(e),p(!1)},{dragControls:S,handleDragEnd:C,startDrag:w}=o.useBottomSheetDrag({onDismiss:()=>p(!1)});return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`span`,{ref:h.setReference,...y(),className:`inline-flex`,children:e}),(0,l.jsx)(d.FloatingPortal,{children:m?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u.AnimatePresence,{children:f&&(0,l.jsx)(u.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:`fixed inset-0 z-50 bg-black/40`,onClick:()=>p(!1)},`date-picker-dimmer`)}),(0,l.jsx)(u.AnimatePresence,{children:f&&(0,l.jsxs)(u.motion.div,{ref:h.setFloating,...b(),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:S,dragConstraints:{top:0},dragElastic:{top:0,bottom:.4},onDragEnd:C,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:[(0,l.jsx)(`div`,{className:`self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing`,onPointerDown:w}),(0,l.jsx)(g,{initialValue:t,onApply:x,onClose:()=>p(!1)})]},`date-picker-sheet`)})]}):f&&(0,l.jsx)(`div`,{ref:h.setFloating,style:_,...b(),className:`z-9999 w-80 rounded-2xl border border-border-tertiary bg-bg-card p-6 shadow-md`,children:(0,l.jsx)(g,{initialValue:t,onApply:x,onClose:()=>p(!1)})})})]})}function g({initialValue:e,onApply:t,onClose:n}){let r=y(e),[i,a]=(0,c.useState)(r),[o,s]=(0,c.useState)(r??new Date);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(_,{month:o,onMonthChange:s,onPrev:()=>s((0,f.subMonths)(o,1)),onNext:()=>s((0,f.addMonths)(o,1)),selected:i,onDayClick:e=>a(e)}),(0,l.jsxs)(`div`,{className:`mt-6 flex items-center justify-end gap-2`,children:[(0,l.jsx)(`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`,children:`닫기`}),(0,l.jsx)(`button`,{type:`button`,onClick:()=>{if(!i){n();return}t((0,f.format)(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`,children:`적용`})]})]})}function _({month:t,onMonthChange:n,onPrev:a,onNext:o,selected:s,onDayClick:u}){let[d,h]=(0,c.useState)(!1),g=(0,c.useMemo)(()=>(0,f.eachDayOfInterval)({start:(0,f.startOfWeek)((0,f.startOfMonth)(t),{weekStartsOn:0}),end:(0,f.endOfWeek)((0,f.endOfMonth)(t),{weekStartsOn:0})}),[t]),_=(0,c.useMemo)(()=>{let e=[];for(let t=-24;t<=m;t++)e.push((0,f.addMonths)((0,f.startOfMonth)(new Date),t));return e},[]);return(0,l.jsxs)(`div`,{className:`mx-auto flex w-full max-w-75 flex-col sm:w-65`,children:[(0,l.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[(0,l.jsx)(v,{direction:`left`,onClick:a}),(0,l.jsxs)(`div`,{className:`relative flex flex-1 justify-center`,children:[(0,l.jsxs)(`button`,{type:`button`,onClick:()=>h(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:[(0,f.format)(t,`yyyy. MM.`),(0,l.jsx)(e.ChevronDown,{className:`h-3.5 w-3.5 text-text-tertiary`})]}),d&&(0,l.jsx)(`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:_.map(e=>(0,l.jsx)(`button`,{type:`button`,onClick:()=>{n(e),h(!1)},className:i.cn(`w-full cursor-pointer bg-bg-card px-4 py-2 text-left text-sm transition-colors`,(0,f.isSameMonth)(e,t)?`bg-bg-base-secondary font-semibold text-text-primary`:`text-text-secondary hover:bg-bg-base-primary`),children:(0,f.format)(e,`yyyy. MM.`)},e.toISOString()))})]}),(0,l.jsx)(v,{direction:`right`,onClick:o})]}),(0,l.jsx)(`div`,{className:`mb-2 grid grid-cols-7`,children:[`일`,`월`,`화`,`수`,`목`,`금`,`토`].map(e=>(0,l.jsx)(`div`,{className:`py-1 text-center text-xs font-medium text-text-tertiary`,children:e},e))}),(0,l.jsx)(r.AnimatedHeight,{children:(0,l.jsx)(`div`,{className:`grid grid-cols-7 gap-y-1`,children:g.map(e=>{let r=(0,f.isSameMonth)(e,t),a=!!(s&&(0,f.isSameDay)(e,s));return(0,l.jsxs)(`button`,{type:`button`,onClick:()=>{r||n(e),u(e)},className:`group relative flex h-9 cursor-pointer items-center justify-center text-sm`,"aria-label":(0,f.format)(e,`yyyy년 M월 d일`,{locale:p.ko}),children:[a&&(0,l.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-500`,"aria-hidden":!0}),(0,l.jsx)(`span`,{className:i.cn(`relative z-10`,!r&&`text-text-disabled`,r&&!a&&`text-text-primary`,a&&`font-bold text-white`),children:(0,f.format)(e,`d`)})]},e.toISOString())})})})]})}function v({direction:e,onClick:r}){return(0,l.jsx)(`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":e===`left`?`이전 달`:`다음 달`,children:(0,l.jsx)(e===`left`?t.ChevronLeft:n.ChevronRight,{className:`h-4 w-4`})})}function y(e){if(!e)return null;let t=(0,f.parseISO)(e);return(0,f.isValid)(t)?t:null}exports.DatePicker=h,exports.DatePickerBody=g;

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

@@ -0,0 +1,231 @@
+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";
+//#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,
+		onOpenChange: (e) => {
+			r || T(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: g,
+		middleware: [
+			v(8),
+			_({ fallbackAxisSideDirection: "start" }),
+			y({ 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(),
+		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, {
+			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)
+		})
+	}) })] });
+}
+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, {
+		month: o,
+		onMonthChange: s,
+		onPrev: () => s(I(o, 1)),
+		onNext: () => s(T(o, 1)),
+		selected: i,
+		onDayClick: (e) => a(e)
+	}), /* @__PURE__ */ f("div", {
+		className: "mt-6 flex items-center justify-end gap-2",
+		children: [/* @__PURE__ */ d("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",
+			children: "닫기"
+		}), /* @__PURE__ */ d("button", {
+			type: "button",
+			onClick: () => {
+				if (!i) {
+					n();
+					return;
+				}
+				t(k(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",
+			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(() => {
+		let e = [];
+		for (let t = -24; t <= R; t++) e.push(T(P(/* @__PURE__ */ new Date()), t));
+		return e;
+	}, []);
+	return /* @__PURE__ */ f("div", {
+		className: "mx-auto flex w-full max-w-75 flex-col sm:w-65",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ d(H, {
+						direction: "left",
+						onClick: a
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "relative flex flex-1 justify-center",
+						children: [/* @__PURE__ */ f("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", {
+								type: "button",
+								onClick: () => {
+									n(e), 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()))
+						})]
+					}),
+					/* @__PURE__ */ d(H, {
+						direction: "right",
+						onClick: o
+					})
+				]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "mb-2 grid grid-cols-7",
+				children: [
+					"일",
+					"월",
+					"화",
+					"수",
+					"목",
+					"금",
+					"토"
+				].map((e) => /* @__PURE__ */ d("div", {
+					className: "py-1 text-center text-xs font-medium text-text-tertiary",
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ d(r, { children: /* @__PURE__ */ d("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", {
+						type: "button",
+						onClick: () => {
+							r || n(e), u(e);
+						},
+						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-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")
+						})]
+					}, e.toISOString());
+				})
+			}) })
+		]
+	});
+}
+function H({ direction: e, onClick: r }) {
+	return /* @__PURE__ */ d("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": e === "left" ? "이전 달" : "다음 달",
+		children: /* @__PURE__ */ d(e === "left" ? t : n, { className: "h-4 w-4" })
+	});
+}
+function U(e) {
+	if (!e) return null;
+	let t = N(e);
+	return M(t) ? t : null;
+}
+//#endregion
+export { z as DatePicker, B as DatePickerBody };

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

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs.js"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs.js"),r=require("../../lib/utils.cjs.js"),i=require("../../hooks/useMediaQuery.cjs.js"),a=require("../../hooks/useBottomSheetDrag.cjs.js"),o=require("../../hooks/useScrollLock.cjs.js");let s=require("react"),c=require("react/jsx-runtime"),l=require("motion/react"),u=require("@floating-ui/react"),d=require("date-fns"),f=require("date-fns/locale");var p=24;function m({children:e,value:t,onApply:n,disabled:r}){let[d,f]=(0,s.useState)(!1),p=i.useIsMobile(),{refs:m,floatingStyles:g,context:_}=(0,u.useFloating)({open:d,onOpenChange:e=>{r||f(e)},placement:`bottom-start`,whileElementsMounted:u.autoUpdate,middleware:[(0,u.offset)(8),(0,u.flip)({fallbackAxisSideDirection:`start`}),(0,u.shift)({padding:8})]}),{getReferenceProps:v,getFloatingProps:y}=(0,u.useInteractions)([(0,u.useClick)(_,{enabled:!r}),(0,u.useDismiss)(_),(0,u.useRole)(_,{role:`dialog`})]);o.useScrollLock(d&&p);let{dragControls:b,handleDragEnd:x,startDrag:S}=a.useBottomSheetDrag({onDismiss:()=>f(!1)}),C=e=>{n(e),f(!1)};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{ref:m.setReference,...v(),className:`inline-flex`,children:e}),(0,c.jsx)(u.FloatingPortal,{children:p?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(l.AnimatePresence,{children:d&&(0,c.jsx)(l.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:`fixed inset-0 z-50 bg-black/40`,onClick:()=>f(!1)},`date-range-picker-dimmer`)}),(0,c.jsx)(l.AnimatePresence,{children:d&&(0,c.jsxs)(l.motion.div,{ref:m.setFloating,...y(),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:b,dragConstraints:{top:0},dragElastic:{top:0,bottom:.4},onDragEnd:x,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:[(0,c.jsx)(`div`,{className:`self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing`,onPointerDown:S}),(0,c.jsx)(h,{value:t,isMobile:!0,onApply:C,onClose:()=>f(!1)})]},`date-range-picker-sheet`)})]}):d&&(0,c.jsx)(`div`,{ref:m.setFloating,style:g,...y(),className:`z-9999 rounded-2xl border border-border-tertiary bg-bg-card p-6 shadow-md`,children:(0,c.jsx)(h,{value:t,isMobile:!1,onApply:C,onClose:()=>f(!1)})})})]})}function h({value:e,isMobile:t,onApply:n,onClose:r}){let i=v(e?.from),a=v(e?.to),[o,l]=(0,s.useState)(i),[u,f]=(0,s.useState)(a),[p,m]=(0,s.useState)(i??new Date),h=(0,d.addMonths)(p,1),_=e=>{if(!o||o&&u){l(e),f(null);return}if((0,d.isBefore)(e,o)){l(e),f(null);return}f(e)},y=(0,c.jsxs)(`div`,{className:`mt-6 flex items-center justify-end gap-2`,children:[(0,c.jsx)(`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`,children:`닫기`}),(0,c.jsx)(`button`,{type:`button`,onClick:()=>{if(!o){r();return}n({from:(0,d.format)(o,`yyyy-MM-dd`),to:(0,d.format)(u??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`,children:`적용`})]});return t?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`div`,{className:`flex justify-center`,children:(0,c.jsx)(g,{month:p,onMonthChange:m,onPrev:()=>m((0,d.subMonths)(p,1)),onNext:()=>m((0,d.addMonths)(p,1)),showPrev:!0,showNext:!0,rangeFrom:o,rangeTo:u,onDayClick:_})}),y]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`div`,{className:`flex items-stretch gap-8`,children:[(0,c.jsx)(g,{month:p,onMonthChange:m,onPrev:()=>m((0,d.subMonths)(p,1)),showPrev:!0,rangeFrom:o,rangeTo:u,onDayClick:_}),(0,c.jsx)(`div`,{className:`w-px bg-border-tertiary`}),(0,c.jsx)(g,{month:h,onMonthChange:e=>m((0,d.subMonths)(e,1)),onNext:()=>m((0,d.addMonths)(p,1)),showNext:!0,rangeFrom:o,rangeTo:u,onDayClick:_})]}),y]})}function g({month:t,onMonthChange:n,onPrev:i,onNext:a,showPrev:o,showNext:l,rangeFrom:u,rangeTo:m,onDayClick:h}){let[g,v]=(0,s.useState)(!1),y=(0,s.useMemo)(()=>(0,d.eachDayOfInterval)({start:(0,d.startOfWeek)((0,d.startOfMonth)(t),{weekStartsOn:0}),end:(0,d.endOfWeek)((0,d.endOfMonth)(t),{weekStartsOn:0})}),[t]),b=(0,s.useMemo)(()=>{let e=[];for(let t=-24;t<=p;t++)e.push((0,d.addMonths)((0,d.startOfMonth)(new Date),t));return e},[]);return(0,c.jsxs)(`div`,{className:`flex w-full max-w-[300px] flex-col sm:w-[260px]`,children:[(0,c.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[(0,c.jsx)(_,{direction:`left`,onClick:i,visible:!!o}),(0,c.jsxs)(`div`,{className:`relative flex flex-1 justify-center`,children:[(0,c.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-text-primary transition-colors hover:bg-bg-base-primary`,children:[(0,d.format)(t,`yyyy. MM.`),(0,c.jsx)(e.ChevronDown,{className:`h-3.5 w-3.5 text-text-tertiary`})]}),g&&(0,c.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-tertiary bg-bg-card py-1 shadow-lg`,children:b.map(e=>(0,c.jsx)(`button`,{type:`button`,onClick:()=>{n(e),v(!1)},className:r.cn(`w-full cursor-pointer bg-bg-card px-4 py-2 text-left text-sm transition-colors`,(0,d.isSameMonth)(e,t)?`bg-bg-base-secondary font-semibold text-text-primary`:`text-text-secondary hover:bg-bg-base-primary`),children:(0,d.format)(e,`yyyy. MM.`)},e.toISOString()))})]}),(0,c.jsx)(_,{direction:`right`,onClick:a,visible:!!l})]}),(0,c.jsx)(`div`,{className:`mb-2 grid grid-cols-7`,children:[`일`,`월`,`화`,`수`,`목`,`금`,`토`].map(e=>(0,c.jsx)(`div`,{className:`py-1 text-center text-xs font-medium text-text-tertiary`,children:e},e))}),(0,c.jsx)(`div`,{className:`grid grid-cols-7 gap-y-1`,children:y.map(e=>{let i=(0,d.isSameMonth)(e,t),a=!!(u&&(0,d.isSameDay)(e,u)),o=!!(m&&(0,d.isSameDay)(e,m)),s=!!u&&!!m&&(0,d.isAfter)(e,u)&&(0,d.isBefore)(e,m),l=a||o,p=s||o&&!!u,g=s||a&&!!m;return(0,c.jsxs)(`button`,{type:`button`,onClick:()=>{i||n(e),h(e)},className:`group relative flex h-9 cursor-pointer items-center justify-center text-sm`,"aria-label":(0,d.format)(e,`yyyy년 M월 d일`,{locale:f.ko}),children:[p&&(0,c.jsx)(`span`,{className:`absolute inset-y-0 left-0 right-1/2 bg-bg-base-secondary`,"aria-hidden":!0}),g&&(0,c.jsx)(`span`,{className:`absolute inset-y-0 left-1/2 right-0 bg-bg-base-secondary`,"aria-hidden":!0}),l&&(0,c.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-500`,"aria-hidden":!0}),(0,c.jsx)(`span`,{className:r.cn(`relative z-10`,!i&&`text-text-disabled`,i&&!l&&`text-text-primary`,l&&`font-bold text-white`),children:(0,d.format)(e,`d`)})]},e.toISOString())})})]})}function _({direction:e,onClick:r,visible:i}){let a=e===`left`?t.ChevronLeft:n.ChevronRight;return i?(0,c.jsx)(`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":e===`left`?`이전 달`:`다음 달`,children:(0,c.jsx)(a,{className:`h-4 w-4`})}):(0,c.jsx)(`div`,{className:`w-8`})}function v(e){if(!e)return null;let t=(0,d.parseISO)(e);return(0,d.isValid)(t)?t:null}exports.DateRangePicker=m;

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

@@ -0,0 +1,287 @@
+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";
+//#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,
+		onOpenChange: (e) => {
+			r || w(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: h,
+		middleware: [
+			_(8),
+			g({ fallbackAxisSideDirection: "start" }),
+			v({ 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);
+	};
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+		ref: E.setReference,
+		...k(),
+		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, {
+			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)
+		})
+	}) })] });
+}
+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) => {
+		if (!o || o && f) {
+			s(e), p(null);
+			return;
+		}
+		if (A(e, o)) {
+			s(e), p(null);
+			return;
+		}
+		p(e);
+	}, v = /* @__PURE__ */ d("div", {
+		className: "mt-6 flex items-center justify-end gap-2",
+		children: [/* @__PURE__ */ u("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",
+			children: "닫기"
+		}), /* @__PURE__ */ u("button", {
+			type: "button",
+			onClick: () => {
+				if (!o) {
+					r();
+					return;
+				}
+				n({
+					from: O(o, "yyyy-MM-dd"),
+					to: O(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",
+			children: "적용"
+		})]
+	});
+	return t ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+		className: "flex justify-center",
+		children: /* @__PURE__ */ u(H, {
+			month: m,
+			onMonthChange: h,
+			onPrev: () => h(L(m, 1)),
+			onNext: () => h(w(m, 1)),
+			showPrev: !0,
+			showNext: !0,
+			rangeFrom: o,
+			rangeTo: f,
+			onDayClick: _
+		})
+	}), v] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
+		className: "flex items-stretch gap-8",
+		children: [
+			/* @__PURE__ */ u(H, {
+				month: m,
+				onMonthChange: h,
+				onPrev: () => h(L(m, 1)),
+				showPrev: !0,
+				rangeFrom: o,
+				rangeTo: f,
+				onDayClick: _
+			}),
+			/* @__PURE__ */ u("div", { className: "w-px bg-border-tertiary" }),
+			/* @__PURE__ */ u(H, {
+				month: g,
+				onMonthChange: (e) => h(L(e, 1)),
+				onNext: () => h(w(m, 1)),
+				showNext: !0,
+				rangeFrom: o,
+				rangeTo: f,
+				onDayClick: _
+			})
+		]
+	}), 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(() => {
+		let e = [];
+		for (let t = -24; t <= z; t++) e.push(w(F(/* @__PURE__ */ new Date()), t));
+		return e;
+	}, []);
+	return /* @__PURE__ */ d("div", {
+		className: "flex w-full max-w-[300px] flex-col sm:w-[260px]",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ u(U, {
+						direction: "left",
+						onClick: i,
+						visible: !!o
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "relative flex flex-1 justify-center",
+						children: [/* @__PURE__ */ d("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", {
+								type: "button",
+								onClick: () => {
+									n(e), 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()))
+						})]
+					}),
+					/* @__PURE__ */ u(U, {
+						direction: "right",
+						onClick: a,
+						visible: !!l
+					})
+				]
+			}),
+			/* @__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-text-tertiary",
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ u("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", {
+						type: "button",
+						onClick: () => {
+							i || n(e), m(e);
+						},
+						className: "group relative flex h-9 cursor-pointer items-center justify-center text-sm",
+						"aria-label": O(e, "yyyy년 M월 d일", { locale: R }),
+						children: [
+							l && /* @__PURE__ */ u("span", {
+								className: "absolute inset-y-0 left-0 right-1/2 bg-bg-base-secondary",
+								"aria-hidden": !0
+							}),
+							h && /* @__PURE__ */ u("span", {
+								className: "absolute inset-y-0 left-1/2 right-0 bg-bg-base-secondary",
+								"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",
+								"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")
+							})
+						]
+					}, e.toISOString());
+				})
+			})
+		]
+	});
+}
+function U({ direction: e, onClick: r, visible: i }) {
+	return i ? /* @__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",
+		"aria-label": e === "left" ? "이전 달" : "다음 달",
+		children: /* @__PURE__ */ u(e === "left" ? t : n, { className: "h-4 w-4" })
+	}) : /* @__PURE__ */ u("div", { className: "w-8" });
+}
+function W(e) {
+	if (!e) return null;
+	let t = P(e);
+	return N(t) ? t : null;
+}
+//#endregion
+export { B as DateRangePicker };