@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/button/Button.esm.js

@@ -0,0 +1,77 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { getButtonBaseClasses as t, getButtonColorClasses as n, getButtonDisplayClasses as r, getButtonFocusRing as i, getButtonSizeClasses as a } from "./utils.esm.js";
+import { forwardRef as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/button/Button.tsx
+var f = () => /* @__PURE__ */ d("svg", {
+	className: "animate-button-spinner size-button-spinner-small",
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	children: [/* @__PURE__ */ u("circle", {
+		className: "opacity-button-spinner-track",
+		cx: "12",
+		cy: "12",
+		r: "10",
+		stroke: "currentColor",
+		strokeWidth: "4"
+	}), /* @__PURE__ */ u("path", {
+		className: "opacity-button-spinner-head",
+		fill: "currentColor",
+		d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	})]
+}), p = o((o, p) => {
+	let { variant: m = "primary", appearance: h = "filled", size: g = "medium", display: _ = "inline", loading: v = !1, clickThrottleMs: y = 0, leadingIcon: b, trailingIcon: x, className: S = "", children: C, ...w } = o, [T, E] = l(!1), D = c(null), O = () => {
+		y && (E(!0), D.current && clearTimeout(D.current), D.current = setTimeout(() => {
+			E(!1), D.current = null;
+		}, y));
+	};
+	s(() => () => {
+		D.current && clearTimeout(D.current);
+	}, []);
+	let k = "as" in o && o.as === "a", A = ("disabled" in o ? o.disabled : !1) || v || T, j = e(t(), n(m, h), a(g), r(_), i(m), v && "opacity-70 cursor-wait", k && A && "pointer-events-none", k && A && !v && "opacity-button-disabled", S);
+	if (k) {
+		let e = w, t = (t) => {
+			if (A) {
+				t.preventDefault();
+				return;
+			}
+			O(), e.onClick?.(t);
+		};
+		return /* @__PURE__ */ d("a", {
+			ref: p,
+			className: j,
+			"aria-disabled": A,
+			tabIndex: A ? -1 : e.tabIndex,
+			...e,
+			onClick: t,
+			children: [
+				v ? /* @__PURE__ */ u(f, {}) : b,
+				C,
+				!v && x
+			]
+		});
+	}
+	let M = w, N = (e) => {
+		if (A) {
+			e.preventDefault();
+			return;
+		}
+		O(), M.onClick?.(e);
+	};
+	return /* @__PURE__ */ d("button", {
+		ref: p,
+		className: j,
+		disabled: A,
+		...M,
+		onClick: N,
+		children: [
+			v ? /* @__PURE__ */ u(f, {}) : b,
+			C,
+			!v && x
+		]
+	});
+});
+p.displayName = "Button";
+//#endregion
+export { p as Button };

package/dist/{src/components → components}/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonBaseProps, ButtonLinkProps, ButtonVariant, ButtonAppearance, ButtonSize, ButtonDisplay, } from './types';
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonBaseProps, ButtonLinkProps, ButtonVariant, ButtonAppearance, ButtonSize, ButtonDisplay, } from './types.js';

package/dist/components/button/utils.cjs

@@ -0,0 +1 @@
+var e=(e=`primary`,t=`filled`)=>({primary:{filled:`border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},secondary:{filled:`border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},tertiary:{filled:`border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled`},danger:{filled:`border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border`}})[e][t],t=(e=`medium`)=>({mini:`h-control-mini px-control-pad-mini text-control-mini gap-button-mini rounded-control-mini`,small:`h-control-small px-control-pad-small text-control-small gap-button-small rounded-control-small`,medium:`h-control-medium px-control-pad-medium text-control-medium gap-button-medium rounded-control-medium`,large:`h-control-large px-control-pad-large text-control-large gap-button-large rounded-control-large`})[e],n=(e=`inline`)=>({inline:`inline-flex`,block:`flex w-full`})[e],r=()=>`items-center justify-center font-control-action border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button focus-visible:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none`,i=(e=`primary`)=>({primary:`focus-visible:ring-focus-primary`,secondary:`focus-visible:ring-focus-primary`,tertiary:`focus-visible:ring-border-default`,danger:`focus-visible:ring-focus-danger`})[e];exports.getButtonBaseClasses=r,exports.getButtonColorClasses=e,exports.getButtonDisplayClasses=n,exports.getButtonFocusRing=i,exports.getButtonSizeClasses=t;

package/dist/{src/components → components}/button/utils.d.ts

@@ -1,4 +1,4 @@
-import { ButtonAppearance, ButtonDisplay, ButtonSize, ButtonVariant } from './types';
+import { ButtonAppearance, ButtonDisplay, ButtonSize, ButtonVariant } from './types.js';
 export declare const getButtonColorClasses: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;
 export declare const getButtonSizeClasses: (size?: ButtonSize) => string;
 export declare const getButtonDisplayClasses: (display?: ButtonDisplay) => string;

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

@@ -0,0 +1,38 @@
+//#region src/components/button/utils.ts
+var e = (e = "primary", t = "filled") => ({
+	primary: {
+		filled: "border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled"
+	},
+	secondary: {
+		filled: "border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled"
+	},
+	tertiary: {
+		filled: "border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled"
+	},
+	danger: {
+		filled: "border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border"
+	}
+})[e][t], t = (e = "medium") => ({
+	mini: "h-control-mini px-control-pad-mini text-control-mini gap-button-mini rounded-control-mini",
+	small: "h-control-small px-control-pad-small text-control-small gap-button-small rounded-control-small",
+	medium: "h-control-medium px-control-pad-medium text-control-medium gap-button-medium rounded-control-medium",
+	large: "h-control-large px-control-pad-large text-control-large gap-button-large rounded-control-large"
+})[e], n = (e = "inline") => ({
+	inline: "inline-flex",
+	block: "flex w-full"
+})[e], r = () => "items-center justify-center font-control-action border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button focus-visible:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none", i = (e = "primary") => ({
+	primary: "focus-visible:ring-focus-primary",
+	secondary: "focus-visible:ring-focus-primary",
+	tertiary: "focus-visible:ring-border-default",
+	danger: "focus-visible:ring-focus-danger"
+})[e];
+//#endregion
+export { r as getButtonBaseClasses, e as getButtonColorClasses, n as getButtonDisplayClasses, i as getButtonFocusRing, t as getButtonSizeClasses };

package/dist/components/checkbox/Checkbox.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(({variant:n,inputType:i=`checkbox`,size:a=24,baseColor:o=`primary`,label:s,onCheckedChange:c,onChange:l,className:u=``,...d},f)=>{let p=e=>{l?.(e),c?.(e.target.checked)},m=t.getCheckboxVariantClasses(n,o),h=t.getCheckboxSizeStyle(a),g=(0,r.jsxs)(`div`,{className:`inline-flex items-center relative`,children:[(0,r.jsx)(`input`,{ref:f,type:i,className:`sr-only peer`,onChange:p,...d}),(0,r.jsx)(`div`,{className:e.cn(m,`peer-checked:[&_path]:scale-100`,u),style:h,children:(0,r.jsx)(`svg`,{className:`absolute inset-0 w-full h-full pointer-events-none`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,r.jsx)(`path`,{d:`M5 12l5 5L20 7`,stroke:`currentColor`,strokeWidth:`2.5`,strokeLinecap:`round`,strokeLinejoin:`round`,className:`origin-center scale-0 transition-transform duration-200 ease-out`})})})]});return s?(0,r.jsxs)(`label`,{className:t.getLabelClasses(),children:[g,(0,r.jsx)(`span`,{className:`text-base text-fg-default`,children:s})]}):g});i.displayName=`CheckboxInternal`;var a=(0,n.forwardRef)((e,t)=>(0,r.jsx)(i,{ref:t,variant:`circle`,...e}));a.displayName=`Checkbox.Circle`;var o=(0,n.forwardRef)((e,t)=>(0,r.jsx)(i,{ref:t,variant:`line`,...e}));o.displayName=`Checkbox.Line`;var s=(0,n.forwardRef)((e,t)=>(0,r.jsx)(i,{ref:t,variant:`lineTransparent`,...e}));s.displayName=`Checkbox.LineTransparent`;var c={Circle:a,Line:o,LineTransparent:s};exports.Checkbox=c,exports.CheckboxCircle=a,exports.CheckboxLine=o,exports.CheckboxLineTransparent=s;

package/dist/{src/components → components}/checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps } from './types';
+import { CheckboxProps } from './types.js';
 /**
  * Checkbox.Circle 컴포넌트 — 원형 아이콘을 사용하는 체크박스
  */

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

@@ -0,0 +1,69 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { getCheckboxSizeStyle as t, getCheckboxVariantClasses as n, getLabelClasses as r } from "./utils.esm.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/checkbox/Checkbox.tsx
+var s = i(({ variant: i, inputType: s = "checkbox", size: c = 24, baseColor: l = "primary", label: u, onCheckedChange: d, onChange: f, className: p = "", ...m }, h) => {
+	let g = (e) => {
+		f?.(e), d?.(e.target.checked);
+	}, _ = n(i, l), v = t(c), y = /* @__PURE__ */ o("div", {
+		className: "inline-flex items-center relative",
+		children: [/* @__PURE__ */ a("input", {
+			ref: h,
+			type: s,
+			className: "sr-only peer",
+			onChange: g,
+			...m
+		}), /* @__PURE__ */ a("div", {
+			className: e(_, "peer-checked:[&_path]:scale-100", p),
+			style: v,
+			children: /* @__PURE__ */ a("svg", {
+				className: "absolute inset-0 w-full h-full pointer-events-none",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ a("path", {
+					d: "M5 12l5 5L20 7",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: "origin-center scale-0 transition-transform duration-200 ease-out"
+				})
+			})
+		})]
+	});
+	return u ? /* @__PURE__ */ o("label", {
+		className: r(),
+		children: [y, /* @__PURE__ */ a("span", {
+			className: "text-base text-fg-default",
+			children: u
+		})]
+	}) : y;
+});
+s.displayName = "CheckboxInternal";
+var c = i((e, t) => /* @__PURE__ */ a(s, {
+	ref: t,
+	variant: "circle",
+	...e
+}));
+c.displayName = "Checkbox.Circle";
+var l = i((e, t) => /* @__PURE__ */ a(s, {
+	ref: t,
+	variant: "line",
+	...e
+}));
+l.displayName = "Checkbox.Line";
+var u = i((e, t) => /* @__PURE__ */ a(s, {
+	ref: t,
+	variant: "lineTransparent",
+	...e
+}));
+u.displayName = "Checkbox.LineTransparent";
+var d = {
+	Circle: c,
+	Line: l,
+	LineTransparent: u
+};
+//#endregion
+export { d as Checkbox, c as CheckboxCircle, l as CheckboxLine, u as CheckboxLineTransparent };

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

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxCircle, CheckboxLine, CheckboxLineTransparent, } from './Checkbox.js';
+export type { CheckboxProps, CheckboxVariant } from './types.js';

package/dist/components/checkbox/utils.cjs

@@ -0,0 +1 @@
+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-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-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-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`){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`}exports.getCheckboxSizeStyle=a,exports.getCheckboxVariantClasses=i,exports.getLabelClasses=o;

package/dist/{src/components → components}/checkbox/utils.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps, CheckboxVariant } from './types';
+import { CheckboxProps, CheckboxVariant } from './types.js';
 /**
  * Checkbox의 기본 스타일 클래스를 반환합니다.
  */

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-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-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-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") {
+	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

@@ -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

@@ -0,0 +1,20 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/collapsible/Collapsible.tsx
+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: 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: /* @__PURE__ */ t("div", {
+			className: "overflow-hidden",
+			children: c
+		})
+	});
+}
+//#endregion
+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

@@ -0,0 +1,40 @@
+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 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__ */ r("input", {
+				type: "date",
+				value: a,
+				onChange: (e) => o(e.target.value),
+				min: "1900-01-01",
+				max: "9999-12-31",
+				"aria-label": c ?? l,
+				className: e("search-box-date-input flex-1 bg-transparent outline-none", g, b)
+			}),
+			/* @__PURE__ */ r(n, {
+				value: a || null,
+				onApply: (e) => o(e),
+				disableMobileSheet: d,
+				children: /* @__PURE__ */ r("button", {
+					type: "button",
+					"aria-label": "달력에서 날짜 선택",
+					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 })
+				})
+			}),
+			x && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				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 { 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;
 }