@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/copyable-text/CopyableText.d.ts

@@ -0,0 +1,22 @@
+export interface CopyableTextProps {
+    /** 클립보드에 복사할 실제 값. */
+    value: string;
+    /**
+     * 화면에 렌더할 내용. 생략하면 `value`를 그대로 보여준다.
+     * 값과 표시 텍스트가 다른 소비처(예: 코드 + 부가 라벨)를 위한 옵션.
+     */
+    children?: React.ReactNode;
+    /**
+     * 토스트·aria-label에 쓰는 항목 이름(예: "코드"). 생략하면 일반 문구를 쓴다.
+     * packages는 도메인 단어를 소유하지 않으므로 호출부가 넘긴 문자열을 그대로 쓴다.
+     */
+    label?: string;
+    className?: string;
+    /** 값 옆이 아닌 폼 컨트롤의 trailing slot에 놓을 때 아이콘만 표시한다. */
+    iconOnly?: boolean;
+    /** 복사 성공 상태(아이콘 전환)를 유지하는 시간(ms). 기본 1500. */
+    feedbackDurationMs?: number;
+}
+/** 클립보드 복사 결과를 아이콘과 토스트로 알린다. 보안 컨텍스트와 clipboard 권한이 필요하며,
+ * 앱 루트에 ToastProvider를 둔다. 표시 텍스트가 복사 값과 다르면 children을 지정한다. */
+export declare function CopyableText({ value, children, label, className, iconOnly, feedbackDurationMs, }: CopyableTextProps): import("react").JSX.Element;

package/dist/components/copyable-text/CopyableText.esm.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { Check as n } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { Copy as r } from "../../node_modules/lucide-react/dist/esm/icons/copy.esm.js";
+import { toast as i } from "../toast/index.esm.js";
+import { useEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/copyable-text/CopyableText.tsx
+var u = 1500;
+function d({ value: d, children: f, label: p, className: m, iconOnly: h = !1, feedbackDurationMs: g = u }) {
+	let [_, v] = s(!1), y = o(null);
+	a(() => () => {
+		y.current !== null && window.clearTimeout(y.current);
+	}, []);
+	let b = async () => {
+		try {
+			await navigator.clipboard.writeText(d), v(!0), i.success(p ? `${p}을(를) 복사했습니다.` : "복사했습니다."), y.current !== null && window.clearTimeout(y.current), y.current = window.setTimeout(() => {
+				v(!1), y.current = null;
+			}, g);
+		} catch {
+			i.error(p ? `${p} 복사에 실패했습니다.` : "복사에 실패했습니다.");
+		}
+	}, x = _ ? /* @__PURE__ */ c(n, {
+		"aria-hidden": "true",
+		className: h ? "size-4" : "size-3.5 shrink-0"
+	}) : /* @__PURE__ */ c(r, {
+		"aria-hidden": "true",
+		className: h ? "size-4" : "size-3.5 shrink-0 opacity-60"
+	});
+	return h ? /* @__PURE__ */ c(t, {
+		type: "button",
+		variant: "secondary",
+		appearance: "transparent",
+		"aria-label": p ? `${p} 복사` : "복사",
+		title: p ? `클릭하여 ${p} 복사` : "클릭하여 복사",
+		size: "mini",
+		className: e("w-control-mini px-0", _ && "text-success-fg", m),
+		onClick: () => void b(),
+		children: x
+	}) : /* @__PURE__ */ l("button", {
+		type: "button",
+		onClick: () => void b(),
+		"aria-label": p ? `${p} 복사` : "복사",
+		title: p ? `클릭하여 ${p} 복사` : "클릭하여 복사",
+		className: e("inline-flex items-center gap-1 rounded-control-mini text-fg-accent underline decoration-transparent underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-none focus-visible:ring-control focus-visible:ring-focus-primary-soft", _ && "text-success-fg", m),
+		children: [/* @__PURE__ */ c("span", { children: f ?? d }), x]
+	});
+}
+//#endregion
+export { d as CopyableText };

package/dist/components/copyable-text/index.d.ts

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

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

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

package/dist/{src/components → components}/date-input/DateInput.d.ts

@@ -13,6 +13,7 @@ interface Props {
     /**
      * true면 trailing 캘린더 버튼이 모바일에서도 popover로만 떠 자체 바텀시트를 만들지 않는다.
      * 호출부가 이미 시트(예: SearchBox 모바일 바텀시트) 안에 있을 때 시트 두 개 겹침 회피.
+     * 생략하면 Modal·Drawer 안에서 자동 적용되며, false를 명시하면 시트를 유지한다.
      */
     disableMobileSheet?: boolean;
 }

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

@@ -1,39 +1,40 @@
-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";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Calendar as t } from "../../node_modules/lucide-react/dist/esm/icons/calendar.esm.js";
+import { DatePicker as n } from "../date-picker/date-picker.esm.js";
+import { jsx as r, jsxs as i } 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,
+function a({ value: a, onChange: o, size: s = "small", ariaLabel: c, label: l, className: u = "", disableMobileSheet: d }) {
+	let f = s === "mini", p = f ? "h-control-small" : "h-control-medium", m = f ? "w-30" : "w-36", h = f ? "pl-control-pad-mini pr-0.5" : "pl-control-pad-small pr-1", g = f ? "text-control-mini" : "text-control-small", _ = f ? "h-5 w-5" : "h-6 w-6", v = f ? "h-3 w-3" : "h-3.5 w-3.5", y = e("group relative flex items-center gap-1 rounded-lg border border-border-subtle bg-bg-surface transition-colors focus-within:border-primary", p, m, h, u), b = a ? "text-fg-default" : "text-fg-subtle", x = !!l;
+	return /* @__PURE__ */ i("div", {
+		className: y,
 		children: [
-			/* @__PURE__ */ n("input", {
+			/* @__PURE__ */ r("input", {
 				type: "date",
-				value: i,
-				onChange: (e) => a(e.target.value),
+				value: a,
+				onChange: (e) => o(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}`
+				"aria-label": c ?? l,
+				className: e("search-box-date-input flex-1 bg-transparent outline-none", g, b)
 			}),
-			/* @__PURE__ */ n(t, {
-				value: i || null,
-				onApply: (e) => a(e),
-				disableMobileSheet: u,
-				children: /* @__PURE__ */ n("button", {
+			/* @__PURE__ */ r(n, {
+				value: a || null,
+				onApply: (e) => o(e),
+				disableMobileSheet: d,
+				children: /* @__PURE__ */ r("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: _ })
+					className: e("flex items-center justify-center rounded text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-default", _),
+					children: /* @__PURE__ */ r(t, { className: v })
 				})
 			}),
-			b && /* @__PURE__ */ n("span", {
+			x && /* @__PURE__ */ r("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
+				className: e("pointer-events-none absolute -top-2 left-2 bg-bg-surface px-1 text-fg-muted group-focus-within:text-primary-fg", f ? "text-[10px]" : "text-xs"),
+				children: l
 			})
 		]
 	});
 }
 //#endregion
-export { i as DateInput };
+export { a as DateInput };

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

@@ -0,0 +1 @@
+export { DateInput } from './DateInput.js';

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

@@ -0,0 +1 @@
+const e=require("../../hooks/useMediaQuery.cjs"),t=require("../../hooks/useBottomSheetDrag.cjs"),n=require("../../hooks/useScrollLock.cjs"),r=require("../modal/ModalFocusTrapContext.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("motion/react"),s=require("@floating-ui/react");function c(t){let n=e.useIsMobile(),a=(0,i.useContext)(r.ModalFocusTrapContext);return{isMobile:n,useSheet:n&&!(t??a!==r.defaultModalFocusTrapContext)}}function l({isOpen:e,onClose:r,useSheet:i,context:c,setFloating:l,floatingStyles:u,getFloatingProps:d,desktopClassName:f,initialFocus:p=-1,children:m}){let h=(0,o.useReducedMotion)(),{dragControls:g,handleDragEnd:_,startDrag:v}=t.useBottomSheetDrag({onDismiss:r});return n.useScrollLock(e&&i),(0,a.jsx)(s.FloatingPortal,{children:i?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.AnimatePresence,{children:e&&(0,a.jsx)(o.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:h?0:.2},className:`fixed inset-0 z-overlay bg-bg-overlay`,onClick:r},`picker-dimmer`)}),(0,a.jsx)(o.AnimatePresence,{children:e&&(0,a.jsxs)(o.motion.div,{ref:l,...d(),initial:{y:`100%`},animate:{y:0},exit:{y:`100%`,transition:{duration:h?0:.2,ease:[.4,0,1,1]}},transition:h?{duration:0}:{type:`spring`,damping:30,stiffness:320},drag:`y`,dragListener:!1,dragControls:g,dragConstraints:{top:0},dragElastic:{top:0,bottom:.4},onDragEnd:_,className:`fixed inset-x-0 bottom-0 z-overlay flex flex-col gap-5 rounded-t-2xl bg-bg-surface text-fg-default p-5 pb-[max(20px,env(safe-area-inset-bottom))] shadow-overlay`,children:[(0,a.jsx)(`div`,{className:`self-center h-1 w-10 rounded-full bg-bg-handle cursor-grab touch-none active:cursor-grabbing`,onPointerDown:v}),m]},`picker-sheet`)})]}):e&&(0,a.jsx)(s.FloatingFocusManager,{context:c,modal:!1,initialFocus:p,children:(0,a.jsx)(`div`,{ref:l,style:u,...d(),"data-picker-panel":``,className:f,children:m})})})}exports.PickerSheet=l,exports.usePickerMobile=c;

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

@@ -0,0 +1,22 @@
+import { FloatingContext, useInteractions } from '@floating-ui/react';
+import { CSSProperties, ReactNode, RefObject } from 'react';
+/** 명시된 설정이 없으면 Modal 안에서 popover로 표시한다. */
+export declare function usePickerMobile(disableMobileSheet?: boolean): {
+    isMobile: boolean;
+    useSheet: boolean;
+};
+interface PickerSheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    useSheet: boolean;
+    context: FloatingContext;
+    setFloating: (node: HTMLElement | null) => void;
+    floatingStyles: CSSProperties;
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    desktopClassName: string;
+    initialFocus?: number | RefObject<HTMLElement | null>;
+    children: ReactNode;
+}
+/** 피커의 floating 패널과 모바일 시트 표면. 내용과 선택 상태는 호출부가 소유한다. */
+export declare function PickerSheet({ isOpen, onClose, useSheet, context, setFloating, floatingStyles, getFloatingProps, desktopClassName, initialFocus, children, }: PickerSheetProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,77 @@
+import { useIsMobile as e } from "../../hooks/useMediaQuery.esm.js";
+import { useBottomSheetDrag as t } from "../../hooks/useBottomSheetDrag.esm.js";
+import { useScrollLock as n } from "../../hooks/useScrollLock.esm.js";
+import { ModalFocusTrapContext as r, defaultModalFocusTrapContext as i } from "../modal/ModalFocusTrapContext.esm.js";
+import { useContext as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AnimatePresence as l, motion as u, useReducedMotion as d } from "motion/react";
+import { FloatingFocusManager as f, FloatingPortal as p } from "@floating-ui/react";
+//#region src/components/date-picker/PickerSheet.tsx
+function m(t) {
+	let n = e(), o = a(r);
+	return {
+		isMobile: n,
+		useSheet: n && !(t ?? o !== i)
+	};
+}
+function h({ isOpen: e, onClose: r, useSheet: i, context: a, setFloating: m, floatingStyles: h, getFloatingProps: g, desktopClassName: _, initialFocus: v = -1, children: y }) {
+	let b = d(), { dragControls: x, handleDragEnd: S, startDrag: C } = t({ onDismiss: r });
+	return n(e && i), /* @__PURE__ */ s(p, { children: i ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l, { children: e && /* @__PURE__ */ s(u.div, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: b ? 0 : .2 },
+		className: "fixed inset-0 z-overlay bg-bg-overlay",
+		onClick: r
+	}, "picker-dimmer") }), /* @__PURE__ */ s(l, { children: e && /* @__PURE__ */ c(u.div, {
+		ref: m,
+		...g(),
+		initial: { y: "100%" },
+		animate: { y: 0 },
+		exit: {
+			y: "100%",
+			transition: {
+				duration: b ? 0 : .2,
+				ease: [
+					.4,
+					0,
+					1,
+					1
+				]
+			}
+		},
+		transition: b ? { duration: 0 } : {
+			type: "spring",
+			damping: 30,
+			stiffness: 320
+		},
+		drag: "y",
+		dragListener: !1,
+		dragControls: x,
+		dragConstraints: { top: 0 },
+		dragElastic: {
+			top: 0,
+			bottom: .4
+		},
+		onDragEnd: S,
+		className: "fixed inset-x-0 bottom-0 z-overlay flex flex-col gap-5 rounded-t-2xl bg-bg-surface text-fg-default p-5 pb-[max(20px,env(safe-area-inset-bottom))] shadow-overlay",
+		children: [/* @__PURE__ */ s("div", {
+			className: "self-center h-1 w-10 rounded-full bg-bg-handle cursor-grab touch-none active:cursor-grabbing",
+			onPointerDown: C
+		}), y]
+	}, "picker-sheet") })] }) : e && /* @__PURE__ */ s(f, {
+		context: a,
+		modal: !1,
+		initialFocus: v,
+		children: /* @__PURE__ */ s("div", {
+			ref: m,
+			style: h,
+			...g(),
+			"data-picker-panel": "",
+			className: _,
+			children: y
+		})
+	}) });
+}
+//#endregion
+export { h as PickerSheet, m as usePickerMobile };

package/dist/components/date-picker/date-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("../animated-height/AnimatedHeight.cjs"),a=require("./PickerSheet.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("@floating-ui/react"),l=require("date-fns"),u=require("date-fns/locale");var d=24;function f({children:e,value:t,onApply:n,disabled:r,disableMobileSheet:i}){let[l,u]=(0,o.useState)(!1),{useSheet:d}=a.usePickerMobile(i),{refs:f,floatingStyles:m,context:h}=(0,c.useFloating)({open:l,onOpenChange:e=>{r||u(e)},placement:`bottom-start`,whileElementsMounted:c.autoUpdate,middleware:[(0,c.offset)(8),(0,c.flip)({fallbackAxisSideDirection:`start`}),(0,c.shift)({padding:8})]}),{getReferenceProps:g,getFloatingProps:_}=(0,c.useInteractions)([(0,c.useClick)(h,{enabled:!r}),(0,c.useDismiss)(h),(0,c.useRole)(h,{role:`dialog`})]),v=e=>{n(e),u(!1)};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{ref:f.setReference,...g(),className:`inline-flex`,children:e}),(0,s.jsx)(a.PickerSheet,{isOpen:l,onClose:()=>u(!1),useSheet:d,context:h,setFloating:f.setFloating,floatingStyles:m,getFloatingProps:_,desktopClassName:`z-floating w-80 rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-6 shadow-tooltip`,children:(0,s.jsx)(p,{initialValue:t,onApply:v,onClose:()=>u(!1)})})]})}function p({initialValue:e,onApply:t,onClose:n}){let r=g(e),[i,a]=(0,o.useState)(r),[c,u]=(0,o.useState)(r??new Date);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(m,{month:c,onMonthChange:u,onPrev:()=>u((0,l.subMonths)(c,1)),onNext:()=>u((0,l.addMonths)(c,1)),selected:i,onDayClick:e=>a(e)}),(0,s.jsxs)(`div`,{className:`mt-6 flex items-center justify-end gap-2`,children:[(0,s.jsx)(`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:`닫기`}),(0,s.jsx)(`button`,{type:`button`,onClick:()=>{if(!i){n();return}t((0,l.format)(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 m({month:n,onMonthChange:r,onPrev:a,onNext:c,selected:f,onDayClick:p}){let[m,g]=(0,o.useState)(!1),_=(0,o.useMemo)(()=>(0,l.eachDayOfInterval)({start:(0,l.startOfWeek)((0,l.startOfMonth)(n),{weekStartsOn:0}),end:(0,l.endOfWeek)((0,l.endOfMonth)(n),{weekStartsOn:0})}),[n]),v=(0,o.useMemo)(()=>{let e=[];for(let t=-24;t<=d;t++)e.push((0,l.addMonths)((0,l.startOfMonth)(new Date),t));return e},[]);return(0,s.jsxs)(`div`,{className:`mx-auto flex w-full max-w-75 flex-col sm:w-65`,children:[(0,s.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[(0,s.jsx)(h,{direction:`left`,onClick:a}),(0,s.jsxs)(`div`,{className:`relative flex flex-1 justify-center`,children:[(0,s.jsxs)(`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:[(0,l.format)(n,`yyyy. MM.`),(0,s.jsx)(t.ChevronDown,{className:`h-3.5 w-3.5 text-fg-subtle`})]}),m&&(0,s.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-subtle bg-bg-surface py-1 shadow-overlay`,children:v.map(t=>(0,s.jsx)(`button`,{type:`button`,onClick:()=>{r(t),g(!1)},className:e.cn(`w-full cursor-pointer bg-bg-surface px-4 py-2 text-left text-sm transition-colors`,(0,l.isSameMonth)(t,n)?`bg-bg-muted font-semibold text-fg-default`:`text-fg-muted hover:bg-bg-subtle`),children:(0,l.format)(t,`yyyy. MM.`)},t.toISOString()))})]}),(0,s.jsx)(h,{direction:`right`,onClick:c})]}),(0,s.jsx)(`div`,{className:`mb-2 grid grid-cols-7`,children:[`일`,`월`,`화`,`수`,`목`,`금`,`토`].map(e=>(0,s.jsx)(`div`,{className:`py-1 text-center text-xs font-medium text-fg-subtle`,children:e},e))}),(0,s.jsx)(i.AnimatedHeight,{children:(0,s.jsx)(`div`,{className:`grid grid-cols-7 gap-y-1`,children:_.map(t=>{let i=(0,l.isSameMonth)(t,n),a=!!(f&&(0,l.isSameDay)(t,f));return(0,s.jsxs)(`button`,{type:`button`,onClick:()=>{i||r(t),p(t)},className:`group relative flex h-9 cursor-pointer items-center justify-center text-sm`,"aria-label":(0,l.format)(t,`yyyy년 M월 d일`,{locale:u.ko}),children:[a&&(0,s.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,s.jsx)(`span`,{className:e.cn(`relative z-10`,!i&&`text-fg-disabled`,i&&!a&&`text-fg-default`,a&&`font-bold text-fg-inverse`),children:(0,l.format)(t,`d`)})]},t.toISOString())})})})]})}function h({direction:e,onClick:t}){return(0,s.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,s.jsx)(e===`left`?n.ChevronLeft:r.ChevronRight,{className:`h-4 w-4`})})}function g(e){if(!e)return null;let t=(0,l.parseISO)(e);return(0,l.isValid)(t)?t:null}exports.DatePicker=f,exports.DatePickerBody=p;

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

@@ -9,6 +9,7 @@ interface DatePickerProps {
     /**
      * true면 모바일에서도 자체 바텀시트 대신 데스크톱과 동일한 popover로 표시.
      * 호출부가 이미 바텀시트(예: SearchBox 모바일 시트) 안에 있어 시트 두 개가 겹치는 걸 피할 때 사용.
+     * 생략하면 Modal 안에서는 자동으로 popover를 쓰며, false를 명시하면 바텀시트를 유지한다.
      */
     disableMobileSheet?: boolean;
 }

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 };