@thewrong/ui 0.2.0 → 0.4.0

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

@@ -4,23 +4,23 @@ function e() {
 }
 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"
+		primary: "border-border-default peer-checked:bg-primary peer-checked:border-primary text-fg-inverse",
+		secondary: "border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse",
+		neutral: "border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse"
 	}[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"
+	return `${e()} rounded-checkbox border-2 ${{
+		primary: "border-border-default peer-checked:bg-primary peer-checked:border-primary text-fg-inverse",
+		secondary: "border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse",
+		neutral: "border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse"
 	}[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"
+	return `${e()} rounded-checkbox border-2 bg-transparent ${{
+		primary: "border-border-subtle peer-checked:border-primary text-primary-fg",
+		secondary: "border-border-subtle peer-checked:border-neutral-fill text-neutral-fg",
+		neutral: "border-border-subtle peer-checked:border-neutral-fill text-neutral-fg"
 	}[t]} relative flex items-center justify-center transition-all duration-200`;
 }
 function i(e, i = "primary") {

package/dist/components/collapsible/Collapsible.cjs

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

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

@@ -1,19 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t } 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}`,
+function n({ open: n, durationMs: r = 200, ease: i = "cubic-bezier(0.16, 1, 0.3, 1)", unmountWhenClosed: a = !1, fade: o = !0, className: s = "", children: c }) {
+	return a && !n ? null : /* @__PURE__ */ t("div", {
+		className: e("grid", s),
 		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(", ")
+			gridTemplateRows: n ? "1fr" : "0fr",
+			opacity: o ? +!!n : void 0,
+			transition: [`grid-template-rows ${r}ms ${i}`, o ? `opacity ${r}ms ${i}` : null].filter(Boolean).join(", ")
 		},
-		"aria-hidden": !t,
-		children: /* @__PURE__ */ e("div", {
+		"aria-hidden": !n,
+		children: /* @__PURE__ */ t("div", {
 			className: "overflow-hidden",
-			children: s
+			children: c
 		})
 	});
 }
 //#endregion
-export { t as Collapsible };
+export { n as Collapsible };

package/dist/components/collapsible/index.d.ts

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

package/dist/components/copyable-text/CopyableText.cjs

@@ -0,0 +1 @@
+require("../../_virtual/_rolldown/runtime.cjs");const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/copy.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("react-hot-toast");var s=1500;function c({value:c,children:l,label:u,className:d,iconOnly:f=!1,feedbackDurationMs:p=s}){let[m,h]=(0,i.useState)(!1),g=(0,i.useRef)(null);(0,i.useEffect)(()=>()=>{g.current!==null&&window.clearTimeout(g.current)},[]);let _=async()=>{try{await navigator.clipboard.writeText(c),h(!0),o.default.success(u?`${u}을(를) 복사했습니다.`:`복사했습니다.`),g.current!==null&&window.clearTimeout(g.current),g.current=window.setTimeout(()=>{h(!1),g.current=null},p)}catch{o.default.error(u?`${u} 복사에 실패했습니다.`:`복사에 실패했습니다.`)}},v=m?(0,a.jsx)(n.Check,{"aria-hidden":`true`,className:f?`size-4`:`size-3.5 shrink-0`}):(0,a.jsx)(r.Copy,{"aria-hidden":`true`,className:f?`size-4`:`size-3.5 shrink-0 opacity-60`});return f?(0,a.jsx)(t.Button,{type:`button`,variant:`secondary`,appearance:`transparent`,"aria-label":u?`${u} 복사`:`복사`,title:u?`클릭하여 ${u} 복사`:`클릭하여 복사`,size:`mini`,className:e.cn(`w-control-mini px-0`,m&&`text-success-fg`,d),onClick:()=>void _(),children:v}):(0,a.jsxs)(`button`,{type:`button`,onClick:()=>void _(),"aria-label":u?`${u} 복사`:`복사`,title:u?`클릭하여 ${u} 복사`:`클릭하여 복사`,className:e.cn(`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`,m&&`text-success-fg`,d),children:[(0,a.jsx)(`span`,{children:l??c}),v]})}exports.CopyableText=c;

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