@thewrong/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs.js"),n=require("../../lib/utils.cjs.js"),r=require("../../hooks/useMediaQuery.cjs.js"),i=require("../../hooks/useBottomSheetDrag.cjs.js"),a=require("../../hooks/useScrollLock.cjs.js");let o=require("react"),s=require("react/jsx-runtime"),c=require("motion/react"),l=require("@floating-ui/react");function u({children:e,value:t,onChange:n,disabled:u,disableMobileSheet:f=!1}){let[p,m]=(0,o.useState)(!1),h=r.useIsMobile()&&!f,{refs:g,floatingStyles:_,context:v}=(0,l.useFloating)({open:p,onOpenChange:e=>{u||m(e)},placement:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(8),(0,l.flip)({fallbackAxisSideDirection:`start`}),(0,l.shift)({padding:8})]}),{getReferenceProps:y,getFloatingProps:b}=(0,l.useInteractions)([(0,l.useClick)(v,{enabled:!u}),(0,l.useDismiss)(v),(0,l.useRole)(v,{role:`dialog`})]);a.useScrollLock(p&&h);let{dragControls:x,handleDragEnd:S,startDrag:C}=i.useBottomSheetDrag({onDismiss:()=>m(!1)}),w=e=>{n(e),m(!1)},T=new Date,[E,D]=(0,o.useState)(t?.year??T.getFullYear()),O=(0,s.jsx)(d,{year:E,onYearChange:D,selectedYear:t?.year,selectedMonth:t?.month,currentYear:T.getFullYear(),currentMonth:T.getMonth()+1,onSelect:e=>w({year:E,month:e})});return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{ref:g.setReference,...y(),className:`inline-flex`,children:e}),(0,s.jsx)(l.FloatingPortal,{children:h?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.AnimatePresence,{children:p&&(0,s.jsx)(c.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:`fixed inset-0 z-50 bg-black/40`,onClick:()=>m(!1)},`month-picker-dimmer`)}),(0,s.jsx)(c.AnimatePresence,{children:p&&(0,s.jsxs)(c.motion.div,{ref:g.setFloating,...b(),initial:{y:`100%`},animate:{y:0},exit:{y:`100%`,transition:{duration:.2,ease:[.4,0,1,1]}},transition:{type:`spring`,damping:30,stiffness:320},drag:`y`,dragListener:!1,dragControls:x,dragConstraints:{top:0},dragElastic:{top:0,bottom:.4},onDragEnd:S,className:`fixed inset-x-0 bottom-0 z-50 flex flex-col gap-5 rounded-t-2xl bg-bg-card p-5 pb-[max(20px,env(safe-area-inset-bottom))] shadow-2xl`,children:[(0,s.jsx)(`div`,{className:`self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing`,onPointerDown:C}),O]},`month-picker-sheet`)})]}):p&&(0,s.jsx)(`div`,{ref:g.setFloating,style:_,...b(),className:`z-9999 w-70 rounded-2xl border border-border-tertiary bg-bg-card p-5 shadow-md`,children:O})})]})}function d({year:e,onYearChange:t,selectedYear:r,selectedMonth:i,currentYear:a,currentMonth:o,onSelect:c}){let l=Array.from({length:12},(e,t)=>t+1);return(0,s.jsxs)(`div`,{className:`flex flex-col`,children:[(0,s.jsxs)(`div`,{className:`mb-4 flex items-center justify-between`,children:[(0,s.jsx)(f,{direction:`left`,onClick:()=>t(e-1)}),(0,s.jsxs)(`div`,{className:`flex-1 text-center text-sm font-semibold text-text-primary`,children:[e,`년`]}),(0,s.jsx)(f,{direction:`right`,onClick:()=>t(e+1)})]}),(0,s.jsx)(`div`,{className:`grid grid-cols-4 gap-2`,children:l.map(t=>{let l=r===e&&i===t;return(0,s.jsxs)(`button`,{type:`button`,onClick:()=>c(t),className:n.cn(`h-10 cursor-pointer rounded-lg text-sm transition-colors`,l?`bg-primary-500 font-bold text-white`:e===a&&t===o?`bg-bg-base-secondary font-semibold text-text-primary`:`text-text-primary hover:bg-bg-base-primary`),"aria-label":`${e}년 ${t}월`,"aria-pressed":l,children:[t,`월`]},t)})})]})}function f({direction:n,onClick:r}){return(0,s.jsx)(`button`,{type:`button`,onClick:r,className:`flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-tertiary text-text-secondary transition-colors hover:bg-bg-base-primary`,"aria-label":n===`left`?`이전 해`:`다음 해`,children:(0,s.jsx)(n===`left`?e.ChevronLeft:t.ChevronRight,{className:`h-4 w-4`})})}exports.MonthPicker=u;

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

@@ -0,0 +1,147 @@
+import { ChevronLeft as e } from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { cn as n } from "../../lib/utils.esm.js";
+import { useIsMobile as r } from "../../hooks/useMediaQuery.esm.js";
+import { useBottomSheetDrag as i } from "../../hooks/useBottomSheetDrag.esm.js";
+import { useScrollLock as a } from "../../hooks/useScrollLock.esm.js";
+import { useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AnimatePresence as u, motion as d } from "motion/react";
+import { FloatingPortal as f, autoUpdate as p, flip as m, offset as h, shift as g, useClick as _, useDismiss as v, useFloating as y, useInteractions as b, useRole as x } from "@floating-ui/react";
+//#region src/components/date-picker/month-picker.tsx
+function S({ children: e, value: t, onChange: n, disabled: S, disableMobileSheet: w = !1 }) {
+	let [T, E] = o(!1), D = r() && !w, { refs: O, floatingStyles: k, context: A } = y({
+		open: T,
+		onOpenChange: (e) => {
+			S || E(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: p,
+		middleware: [
+			h(8),
+			m({ fallbackAxisSideDirection: "start" }),
+			g({ padding: 8 })
+		]
+	}), { getReferenceProps: j, getFloatingProps: M } = b([
+		_(A, { enabled: !S }),
+		v(A),
+		x(A, { role: "dialog" })
+	]);
+	a(T && D);
+	let { dragControls: N, handleDragEnd: P, startDrag: F } = i({ onDismiss: () => E(!1) }), I = (e) => {
+		n(e), E(!1);
+	}, L = /* @__PURE__ */ new Date(), [R, z] = o(t?.year ?? L.getFullYear()), B = /* @__PURE__ */ c(C, {
+		year: R,
+		onYearChange: z,
+		selectedYear: t?.year,
+		selectedMonth: t?.month,
+		currentYear: L.getFullYear(),
+		currentMonth: L.getMonth() + 1,
+		onSelect: (e) => I({
+			year: R,
+			month: e
+		})
+	});
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+		ref: O.setReference,
+		...j(),
+		className: "inline-flex",
+		children: e
+	}), /* @__PURE__ */ c(f, { children: D ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u, { children: T && /* @__PURE__ */ c(d.div, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		className: "fixed inset-0 z-50 bg-black/40",
+		onClick: () => E(!1)
+	}, "month-picker-dimmer") }), /* @__PURE__ */ c(u, { children: T && /* @__PURE__ */ l(d.div, {
+		ref: O.setFloating,
+		...M(),
+		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__ */ c("div", {
+			className: "self-center h-1 w-10 rounded-full bg-bg-base-tertiary cursor-grab touch-none active:cursor-grabbing",
+			onPointerDown: F
+		}), B]
+	}, "month-picker-sheet") })] }) : T && /* @__PURE__ */ c("div", {
+		ref: O.setFloating,
+		style: k,
+		...M(),
+		className: "z-9999 w-70 rounded-2xl border border-border-tertiary bg-bg-card p-5 shadow-md",
+		children: B
+	}) })] });
+}
+function C({ year: e, onYearChange: t, selectedYear: r, selectedMonth: i, currentYear: a, currentMonth: o, onSelect: s }) {
+	let u = Array.from({ length: 12 }, (e, t) => t + 1);
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ l("div", {
+			className: "mb-4 flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ c(w, {
+					direction: "left",
+					onClick: () => t(e - 1)
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "flex-1 text-center text-sm font-semibold text-text-primary",
+					children: [e, "년"]
+				}),
+				/* @__PURE__ */ c(w, {
+					direction: "right",
+					onClick: () => t(e + 1)
+				})
+			]
+		}), /* @__PURE__ */ c("div", {
+			className: "grid grid-cols-4 gap-2",
+			children: u.map((t) => {
+				let c = r === e && i === t;
+				return /* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: () => s(t),
+					className: n("h-10 cursor-pointer rounded-lg text-sm transition-colors", c ? "bg-primary-500 font-bold text-white" : e === a && t === o ? "bg-bg-base-secondary font-semibold text-text-primary" : "text-text-primary hover:bg-bg-base-primary"),
+					"aria-label": `${e}년 ${t}월`,
+					"aria-pressed": c,
+					children: [t, "월"]
+				}, t);
+			})
+		})]
+	});
+}
+function w({ direction: n, onClick: r }) {
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		onClick: r,
+		className: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-tertiary text-text-secondary transition-colors hover:bg-bg-base-primary",
+		"aria-label": n === "left" ? "이전 해" : "다음 해",
+		children: /* @__PURE__ */ c(n === "left" ? e : t, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+export { S as MonthPicker };

package/dist/components/drawer/Drawer.cjs.js

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs.js"),t=require("../../hooks/useMediaQuery.cjs.js"),n=require("../../lib/overlay-stack.cjs.js"),r=require("../../lib/Portal.cjs.js");let i=require("react"),a=require("react/jsx-runtime"),o=require("motion/react");function s({open:s,onClose:c,title:l,widthPx:u=480,className:d,children:f}){let p=t.useIsMobile(),m={width:u,maxWidth:`100vw`},h=(0,i.useId)(),g=(0,o.useDragControls)();return(0,i.useEffect)(()=>{if(s)return n.overlayStack.push(h),document.body.style.overflow=`hidden`,()=>{n.overlayStack.pop(h),n.overlayStack.isEmpty()&&(document.body.style.overflow=``)}},[s,h]),(0,i.useEffect)(()=>{let e=e=>{e.key===`Escape`&&n.overlayStack.isTop(h)&&c()};return s&&window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[s,c,h]),(0,a.jsxs)(r.Portal,{children:[(0,a.jsx)(o.AnimatePresence,{children:s&&(0,a.jsx)(o.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:()=>{n.overlayStack.isTop(h)&&c()},className:`fixed inset-0 z-50 bg-black/50`},`drawer-backdrop`)}),(0,a.jsx)(o.AnimatePresence,{children:s&&(0,a.jsxs)(o.motion.div,{initial:p?{y:`100%`}:{x:`100%`},animate:p?{y:0}:{x:0},exit:p?{y:`100%`,transition:{duration:.2,ease:[.4,0,1,1]}}:{x:`100%`},transition:p?{type:`spring`,damping:38,stiffness:320}:{type:`spring`,damping:30,stiffness:280},drag:p?`y`:!1,dragListener:!1,dragControls:g,dragConstraints:{top:0,bottom:0},dragElastic:{top:0,bottom:.4},onDragEnd:(e,t)=>{(t.offset.y>100||t.velocity.y>500)&&c()},className:e.cn(`fixed z-50 flex flex-col overflow-x-hidden bg-bg-white dark:bg-neutral-800 -bottom-8 left-0 right-0 max-h-[88vh] w-full rounded-t-2xl pb-8 sm:bottom-0 sm:left-auto sm:right-0 sm:top-0 sm:max-h-none sm:h-full sm:w-auto sm:rounded-none sm:pb-0`,d),style:p?void 0:m,children:[(0,a.jsx)(`div`,{className:`flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden`,onPointerDown:e=>g.start(e),children:(0,a.jsx)(`div`,{className:`h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-600`})}),l&&(0,a.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border-tertiary px-4 py-3 dark:border-neutral-700`,children:[(0,a.jsx)(`h3`,{className:`text-base font-semibold text-text-primary sm:text-lg dark:text-white`,children:l}),(0,a.jsx)(`button`,{onClick:c,className:`rounded p-1 text-text-tertiary hover:text-text-secondary dark:hover:text-neutral-300`,"aria-label":`닫기`,children:(0,a.jsx)(`svg`,{className:`h-5 w-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,a.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M6 18L18 6M6 6l12 12`})})})]}),(0,a.jsx)(`div`,{className:`flex-1 overflow-auto`,children:f})]},`drawer-sheet`)})]})}exports.Drawer=s;

package/dist/components/drawer/Drawer.esm.js

@@ -0,0 +1,113 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useIsMobile as t } from "../../hooks/useMediaQuery.esm.js";
+import { overlayStack as n } from "../../lib/overlay-stack.esm.js";
+import { Portal as r } from "../../lib/Portal.esm.js";
+import { useEffect as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { AnimatePresence as c, motion as l, useDragControls as u } from "motion/react";
+//#region src/components/drawer/Drawer.tsx
+function d({ open: d, onClose: f, title: p, widthPx: m = 480, className: h, children: g }) {
+	let _ = t(), v = {
+		width: m,
+		maxWidth: "100vw"
+	}, y = a(), b = u();
+	return i(() => {
+		if (d) return n.push(y), document.body.style.overflow = "hidden", () => {
+			n.pop(y), n.isEmpty() && (document.body.style.overflow = "");
+		};
+	}, [d, y]), i(() => {
+		let e = (e) => {
+			e.key === "Escape" && n.isTop(y) && f();
+		};
+		return d && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		d,
+		f,
+		y
+	]), /* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ o(l.div, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		onClick: () => {
+			n.isTop(y) && f();
+		},
+		className: "fixed inset-0 z-50 bg-black/50"
+	}, "drawer-backdrop") }), /* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ s(l.div, {
+		initial: _ ? { y: "100%" } : { x: "100%" },
+		animate: _ ? { y: 0 } : { x: 0 },
+		exit: _ ? {
+			y: "100%",
+			transition: {
+				duration: .2,
+				ease: [
+					.4,
+					0,
+					1,
+					1
+				]
+			}
+		} : { x: "100%" },
+		transition: _ ? {
+			type: "spring",
+			damping: 38,
+			stiffness: 320
+		} : {
+			type: "spring",
+			damping: 30,
+			stiffness: 280
+		},
+		drag: _ ? "y" : !1,
+		dragListener: !1,
+		dragControls: b,
+		dragConstraints: {
+			top: 0,
+			bottom: 0
+		},
+		dragElastic: {
+			top: 0,
+			bottom: .4
+		},
+		onDragEnd: (e, t) => {
+			(t.offset.y > 100 || t.velocity.y > 500) && f();
+		},
+		className: e("fixed z-50 flex flex-col overflow-x-hidden bg-bg-white dark:bg-neutral-800 -bottom-8 left-0 right-0 max-h-[88vh] w-full rounded-t-2xl pb-8 sm:bottom-0 sm:left-auto sm:right-0 sm:top-0 sm:max-h-none sm:h-full sm:w-auto sm:rounded-none sm:pb-0", h),
+		style: _ ? void 0 : v,
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden",
+				onPointerDown: (e) => b.start(e),
+				children: /* @__PURE__ */ o("div", { className: "h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-600" })
+			}),
+			p && /* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between border-b border-border-tertiary px-4 py-3 dark:border-neutral-700",
+				children: [/* @__PURE__ */ o("h3", {
+					className: "text-base font-semibold text-text-primary sm:text-lg dark:text-white",
+					children: p
+				}), /* @__PURE__ */ o("button", {
+					onClick: f,
+					className: "rounded p-1 text-text-tertiary hover:text-text-secondary dark:hover:text-neutral-300",
+					"aria-label": "닫기",
+					children: /* @__PURE__ */ o("svg", {
+						className: "h-5 w-5",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ o("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M6 18L18 6M6 6l12 12"
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex-1 overflow-auto",
+				children: g
+			})
+		]
+	}, "drawer-sheet") })] });
+}
+//#endregion
+export { d as Drawer };

package/dist/components/info-tooltip/InfoTooltip.cjs.js

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime");function t({content:t,position:n=`top`}){return(0,e.jsxs)(`div`,{className:`relative inline-flex items-center group`,children:[(0,e.jsx)(`div`,{className:`w-3.5 h-3.5 rounded-full bg-primary-500 dark:bg-primary-600 flex items-center justify-center cursor-help hover:bg-primary-600 dark:hover:bg-primary-500 transition-colors`,children:(0,e.jsx)(`span`,{className:`text-[9px] font-bold text-white`,children:`?`})}),(0,e.jsxs)(`div`,{className:`absolute ${{top:`bottom-full left-1/2 -translate-x-1/2 mb-2`,bottom:`top-full left-1/2 -translate-x-1/2 mt-2`,left:`right-full top-1/2 -translate-y-1/2 mr-2`,right:`left-full top-1/2 -translate-y-1/2 ml-2`}[n]} z-50 px-3 py-2 bg-neutral-900 dark:bg-neutral-700 text-white text-xs rounded shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none w-64 whitespace-normal`,children:[t,(0,e.jsx)(`div`,{className:`absolute w-2 h-2 bg-neutral-900 dark:bg-neutral-700 transform rotate-45 ${n===`top`?`bottom-[-4px] left-1/2 -translate-x-1/2`:n===`bottom`?`top-[-4px] left-1/2 -translate-x-1/2`:n===`left`?`right-[-4px] top-1/2 -translate-y-1/2`:`left-[-4px] top-1/2 -translate-y-1/2`}`})]})]})}exports.InfoTooltip=t;

package/dist/components/info-tooltip/InfoTooltip.esm.js

@@ -0,0 +1,24 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/info-tooltip/InfoTooltip.tsx
+function n({ content: n, position: r = "top" }) {
+	return /* @__PURE__ */ t("div", {
+		className: "relative inline-flex items-center group",
+		children: [/* @__PURE__ */ e("div", {
+			className: "w-3.5 h-3.5 rounded-full bg-primary-500 dark:bg-primary-600 flex items-center justify-center cursor-help hover:bg-primary-600 dark:hover:bg-primary-500 transition-colors",
+			children: /* @__PURE__ */ e("span", {
+				className: "text-[9px] font-bold text-white",
+				children: "?"
+			})
+		}), /* @__PURE__ */ t("div", {
+			className: `absolute ${{
+				top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+				bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+				left: "right-full top-1/2 -translate-y-1/2 mr-2",
+				right: "left-full top-1/2 -translate-y-1/2 ml-2"
+			}[r]} z-50 px-3 py-2 bg-neutral-900 dark:bg-neutral-700 text-white text-xs rounded shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none w-64 whitespace-normal`,
+			children: [n, /* @__PURE__ */ e("div", { className: `absolute w-2 h-2 bg-neutral-900 dark:bg-neutral-700 transform rotate-45 ${r === "top" ? "bottom-[-4px] left-1/2 -translate-x-1/2" : r === "bottom" ? "top-[-4px] left-1/2 -translate-x-1/2" : r === "left" ? "right-[-4px] top-1/2 -translate-y-1/2" : "left-[-4px] top-1/2 -translate-y-1/2"}` })]
+		})]
+	});
+}
+//#endregion
+export { n as InfoTooltip };

package/dist/components/input/Input.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs.js"),t=require("../_shared/form-size-tokens.cjs.js"),n=require("./utils.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(({variant:a,inputSize:o=`medium`,label:s,labelOption:c=`appear`,help:l,hasError:u=!1,disabled:d=!1,prefix:f,suffix:p,trailingIcon:m,clearable:h=!1,badge:g,placeholder:_,format:v,containerProps:y,containerRef:b,value:x,defaultValue:S,onChange:C,onFocus:w,onBlur:T,className:E=``,...D},O)=>{let[k,A]=(0,r.useState)(!1),[j,M]=(0,r.useState)(()=>{let e=x??S??``;return v?v.transform(e).toString():e.toString()}),N=(0,r.useRef)(null),P=x!==void 0,F=P?x.toString():j,I=v?v.transform(F).toString():F,L=e=>{let t=e.target.value;if(v){let n=v.transform(t).toString(),r=v.reset?v.reset(n).toString():n;P||M(n),C?.({...e,target:{...e.target,value:r}})}else P||M(t),C?.(e)},R=e=>{A(!0),w?.(e)},z=e=>{A(!1),T?.(e)},B=D.ref,V=e=>{N.current=e,typeof O==`function`?O(e):O&&(O.current=e),typeof B==`function`?B(e):B&&`current`in B&&(B.current=e)},H=()=>{let e=N.current;e&&((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set)?.call(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.focus())},U=I.length>0,W=n.getInputContainerClasses(),G=n.getInputVariantClasses(a,u,d,o),K=n.getInputClasses(a,u,d,U,o),q=n.getInputTrailingIconColor(u,d,U||k),J=c===`sustain`||c===`appear`&&!!I,Y=a===`box`,X=t.SLOT_GAP_CLASS[o],Z=t.SLOT_CHILD_ICON_CLASS[o],Q=t.SLOT_BADGE_TEXT_CLASS[o],$=t.SLOT_ICON_SIZE_CLASS[o],ee=(0,i.jsxs)(`div`,{className:Y?`${G} flex items-center ${X} ${E}`.trim().replace(/\s+/g,` `):`relative flex items-center text-sm`,children:[f&&(0,i.jsx)(`span`,{className:`whitespace-nowrap text-sm ${q}`,children:f}),(0,i.jsx)(`input`,{...D,ref:V,className:Y?K:`${K} ${G} ${u?`border-error-500 focus:border-error-500 focus:ring-error-500`:``} ${d?`opacity-50`:``} ${E}`.trim().replace(/\s+/g,` `),value:I,onChange:L,onFocus:R,onBlur:z,disabled:d,placeholder:_}),p&&(0,i.jsx)(`span`,{className:`whitespace-nowrap text-sm ${q}`,children:p}),m&&(0,i.jsx)(`span`,{className:`flex shrink-0 items-center ${q} ${Z}`,children:m}),h&&!d&&U&&(0,i.jsx)(`button`,{type:`button`,onClick:H,"aria-label":`입력 지우기`,className:`flex shrink-0 cursor-pointer items-center rounded ${q} hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/40`,children:(0,i.jsx)(e.CircleX,{className:$,strokeWidth:1.5,"aria-hidden":`true`})}),g&&(0,i.jsx)(`span`,{className:`flex shrink-0 items-center ${Z} ${Q}`,children:g})]});return(0,i.jsxs)(`div`,{ref:b,className:W,...y,children:[J&&s&&(0,i.jsx)(`label`,{className:n.getInputLabelClasses(a,u),htmlFor:D.id,children:s}),ee,l&&(0,i.jsx)(`div`,{className:n.getInputHelpClasses(u),children:l})]})});a.displayName=`Input`,exports.Input=a;

package/dist/components/input/Input.esm.js

@@ -0,0 +1,95 @@
+import { CircleX as e } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
+import { SLOT_BADGE_TEXT_CLASS as t, SLOT_CHILD_ICON_CLASS as n, SLOT_GAP_CLASS as r, SLOT_ICON_SIZE_CLASS as i } from "../_shared/form-size-tokens.esm.js";
+import { getInputClasses as ee, getInputContainerClasses as te, getInputHelpClasses as a, getInputLabelClasses as o, getInputTrailingIconColor as s, getInputVariantClasses as c } from "./utils.esm.js";
+import { forwardRef as l, useRef as ne, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/input/Input.tsx
+var p = l(({ variant: l, inputSize: p = "medium", label: m, labelOption: h = "appear", help: g, hasError: _ = !1, disabled: v = !1, prefix: y, suffix: b, trailingIcon: x, clearable: S = !1, badge: C, placeholder: w, format: T, containerProps: E, containerRef: D, value: O, defaultValue: k, onChange: A, onFocus: re, onBlur: ie, className: j = "", ...M }, N) => {
+	let [P, F] = u(!1), [I, L] = u(() => {
+		let e = O ?? k ?? "";
+		return T ? T.transform(e).toString() : e.toString();
+	}), R = ne(null), z = O !== void 0, B = z ? O.toString() : I, V = T ? T.transform(B).toString() : B, H = (e) => {
+		let t = e.target.value;
+		if (T) {
+			let n = T.transform(t).toString(), r = T.reset ? T.reset(n).toString() : n;
+			z || L(n), A?.({
+				...e,
+				target: {
+					...e.target,
+					value: r
+				}
+			});
+		} else z || L(t), A?.(e);
+	}, U = (e) => {
+		F(!0), re?.(e);
+	}, W = (e) => {
+		F(!1), ie?.(e);
+	}, G = M.ref, K = (e) => {
+		R.current = e, typeof N == "function" ? N(e) : N && (N.current = e), typeof G == "function" ? G(e) : G && "current" in G && (G.current = e);
+	}, q = () => {
+		let e = R.current;
+		e && ((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+	}, J = V.length > 0, ae = te(), Y = c(l, _, v, p), X = ee(l, _, v, J, p), Z = s(_, v, J || P), oe = h === "sustain" || h === "appear" && !!V, Q = l === "box", se = r[p], $ = n[p], ce = t[p], le = i[p], ue = /* @__PURE__ */ f("div", {
+		className: Q ? `${Y} flex items-center ${se} ${j}`.trim().replace(/\s+/g, " ") : "relative flex items-center text-sm",
+		children: [
+			y && /* @__PURE__ */ d("span", {
+				className: `whitespace-nowrap text-sm ${Z}`,
+				children: y
+			}),
+			/* @__PURE__ */ d("input", {
+				...M,
+				ref: K,
+				className: Q ? X : `${X} ${Y} ${_ ? "border-error-500 focus:border-error-500 focus:ring-error-500" : ""} ${v ? "opacity-50" : ""} ${j}`.trim().replace(/\s+/g, " "),
+				value: V,
+				onChange: H,
+				onFocus: U,
+				onBlur: W,
+				disabled: v,
+				placeholder: w
+			}),
+			b && /* @__PURE__ */ d("span", {
+				className: `whitespace-nowrap text-sm ${Z}`,
+				children: b
+			}),
+			x && /* @__PURE__ */ d("span", {
+				className: `flex shrink-0 items-center ${Z} ${$}`,
+				children: x
+			}),
+			S && !v && J && /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: q,
+				"aria-label": "입력 지우기",
+				className: `flex shrink-0 cursor-pointer items-center rounded ${Z} hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/40`,
+				children: /* @__PURE__ */ d(e, {
+					className: le,
+					strokeWidth: 1.5,
+					"aria-hidden": "true"
+				})
+			}),
+			C && /* @__PURE__ */ d("span", {
+				className: `flex shrink-0 items-center ${$} ${ce}`,
+				children: C
+			})
+		]
+	});
+	return /* @__PURE__ */ f("div", {
+		ref: D,
+		className: ae,
+		...E,
+		children: [
+			oe && m && /* @__PURE__ */ d("label", {
+				className: o(l, _),
+				htmlFor: M.id,
+				children: m
+			}),
+			ue,
+			g && /* @__PURE__ */ d("div", {
+				className: a(_),
+				children: g
+			})
+		]
+	});
+});
+p.displayName = "Input";
+//#endregion
+export { p as Input };

package/dist/components/input/PasswordInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/eye-off.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/eye.cjs.js"),n=require("./Input.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(({disabled:a,...o},s)=>{let[c,l]=(0,r.useState)(!1);return(0,i.jsx)(n.Input,{...o,ref:s,disabled:a,type:c?`text`:`password`,trailingIcon:(0,i.jsx)(`button`,{type:`button`,onClick:()=>l(e=>!e),disabled:a,"aria-label":c?`비밀번호 숨기기`:`비밀번호 표시`,className:`flex items-center justify-center text-text-tertiary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50`,children:c?(0,i.jsx)(e.EyeOff,{className:`h-4 w-4`,strokeWidth:1.5}):(0,i.jsx)(t.Eye,{className:`h-4 w-4`,strokeWidth:1.5})})})});a.displayName=`PasswordInput`,exports.PasswordInput=a;

package/dist/components/input/PasswordInput.esm.js

@@ -0,0 +1,29 @@
+import { EyeOff as e } from "../../node_modules/lucide-react/dist/esm/icons/eye-off.esm.js";
+import { Eye as t } from "../../node_modules/lucide-react/dist/esm/icons/eye.esm.js";
+import { Input as n } from "./Input.esm.js";
+import { forwardRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/input/PasswordInput.tsx
+var o = r(({ disabled: r, ...o }, s) => {
+	let [c, l] = i(!1);
+	return /* @__PURE__ */ a(n, {
+		...o,
+		ref: s,
+		disabled: r,
+		type: c ? "text" : "password",
+		trailingIcon: /* @__PURE__ */ a("button", {
+			type: "button",
+			onClick: () => l((e) => !e),
+			disabled: r,
+			"aria-label": c ? "비밀번호 숨기기" : "비밀번호 표시",
+			className: "flex items-center justify-center text-text-tertiary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50",
+			children: a(c ? e : t, {
+				className: "h-4 w-4",
+				strokeWidth: 1.5
+			})
+		})
+	});
+});
+o.displayName = "PasswordInput";
+//#endregion
+export { o as PasswordInput };

package/dist/components/input/format.cjs.js

@@ -0,0 +1 @@
+function e(e){return e.replace(/\B(?=(\d{3})+(?!\d))/g,`,`)}function t(e){return e.replace(/,/g,``)}function n(e){let t=e.toString().replace(/[^\d]/g,``);return t.length<=3?t:t.length<=7?`${t.slice(0,3)}-${t.slice(3)}`:t.length<=10?`${t.slice(0,3)}-${t.slice(3,7)}-${t.slice(7)}`:`${t.slice(0,3)}-${t.slice(3,7)}-${t.slice(7,11)}`}function r(e){return e.toString().replace(/-/g,``)}function i(t){let n=t.toString().replace(/[^\d]/g,``);return n?e(n):``}function a(e){return t(e.toString())}var o={phoneNumber:{transform:n,reset:r},price:{transform:i,reset:a}};exports.inputFormats=o;

package/dist/components/input/format.esm.js

@@ -0,0 +1,33 @@
+//#region src/components/input/format.ts
+function e(e) {
+	return e.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function t(e) {
+	return e.replace(/,/g, "");
+}
+function n(e) {
+	let t = e.toString().replace(/[^\d]/g, "");
+	return t.length <= 3 ? t : t.length <= 7 ? `${t.slice(0, 3)}-${t.slice(3)}` : t.length <= 10 ? `${t.slice(0, 3)}-${t.slice(3, 7)}-${t.slice(7)}` : `${t.slice(0, 3)}-${t.slice(3, 7)}-${t.slice(7, 11)}`;
+}
+function r(e) {
+	return e.toString().replace(/-/g, "");
+}
+function i(t) {
+	let n = t.toString().replace(/[^\d]/g, "");
+	return n ? e(n) : "";
+}
+function a(e) {
+	return t(e.toString());
+}
+var o = {
+	phoneNumber: {
+		transform: n,
+		reset: r
+	},
+	price: {
+		transform: i,
+		reset: a
+	}
+};
+//#endregion
+export { o as inputFormats };

package/dist/components/input/utils.cjs.js

@@ -0,0 +1 @@
+var e={large:`h-12 rounded-xl border px-5 transition-colors focus-within:outline-hidden`,medium:`h-11 rounded-xl border px-3.5 transition-colors focus-within:outline-hidden`,small:`h-9 rounded-lg border px-3 transition-colors focus-within:outline-hidden`,mini:`h-7 rounded-md border px-2 transition-colors focus-within:outline-hidden`},t=(t,n,r,i=`medium`)=>{if(t===`box`){let t=e[i];return r?[t,`bg-bg-disabled border-border-tertiary dark:border-border-secondary`].join(` `):n?[t,`bg-bg-white border-border-danger`].join(` `):[t,`bg-bg-white border-border-tertiary dark:border-border-secondary focus-within:border-border-primary`].join(` `)}return{box:``,line:`border-b-2 border-neutral-300 dark:border-neutral-600 px-0 py-2 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-0`,big:`border-2 border-neutral-300 dark:border-neutral-600 rounded px-5 py-4 text-lg focus:border-primary-500 dark:focus:border-primary-400 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-0 h-[52px]`,hero:`border-2 border-neutral-300 dark:border-neutral-600 rounded px-6 py-5 text-xl font-semibold focus:border-primary-500 dark:focus:border-primary-400 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-0 h-[64px]`}[t]},n=(e,t,n,r,i=`medium`)=>{let a=`w-full bg-transparent ${i===`mini`?`text-xs`:i===`large`?`text-base`:`text-sm`} focus:outline-hidden disabled:cursor-not-allowed`;return e===`box`?n?[a,`text-text-disabled placeholder:text-text-disabled`].join(` `):t?[a,`text-text-danger placeholder:text-text-danger`].join(` `):r?[a,`text-text-primary placeholder:text-text-tertiary`].join(` `):[a,`text-text-tertiary placeholder:text-text-tertiary`].join(` `):[`w-full bg-white dark:bg-neutral-800 text-sm text-neutral-900 dark:text-white placeholder:text-neutral-400 transition-all duration-200 ease-out focus:outline-hidden disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed disabled:border-neutral-200`].join(` `)},r=(e,t,n)=>t?`text-icon-disabled`:e?`text-icon-danger`:n?`text-icon-secondary`:`text-icon-tertiary`,i=()=>`w-full`,a=(e,t)=>[`block text-xs font-medium mb-2`,t?`text-text-danger`:`text-text-secondary`].join(` `),o=e=>[`mt-2 text-sm`,e?`text-text-danger`:`text-text-secondary`].join(` `);exports.getInputClasses=n,exports.getInputContainerClasses=i,exports.getInputHelpClasses=o,exports.getInputLabelClasses=a,exports.getInputTrailingIconColor=r,exports.getInputVariantClasses=t;

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

@@ -0,0 +1,23 @@
+//#region src/components/input/utils.ts
+var e = {
+	large: "h-12 rounded-xl border px-5 transition-colors focus-within:outline-hidden",
+	medium: "h-11 rounded-xl border px-3.5 transition-colors focus-within:outline-hidden",
+	small: "h-9 rounded-lg border px-3 transition-colors focus-within:outline-hidden",
+	mini: "h-7 rounded-md border px-2 transition-colors focus-within:outline-hidden"
+}, t = (t, n, r, i = "medium") => {
+	if (t === "box") {
+		let t = e[i];
+		return r ? [t, "bg-bg-disabled border-border-tertiary dark:border-border-secondary"].join(" ") : n ? [t, "bg-bg-white border-border-danger"].join(" ") : [t, "bg-bg-white border-border-tertiary dark:border-border-secondary focus-within:border-border-primary"].join(" ");
+	}
+	return {
+		box: "",
+		line: "border-b-2 border-neutral-300 dark:border-neutral-600 px-0 py-2 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-0",
+		big: "border-2 border-neutral-300 dark:border-neutral-600 rounded px-5 py-4 text-lg focus:border-primary-500 dark:focus:border-primary-400 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-0 h-[52px]",
+		hero: "border-2 border-neutral-300 dark:border-neutral-600 rounded px-6 py-5 text-xl font-semibold focus:border-primary-500 dark:focus:border-primary-400 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-0 h-[64px]"
+	}[t];
+}, n = (e, t, n, r, i = "medium") => {
+	let a = `w-full bg-transparent ${i === "mini" ? "text-xs" : i === "large" ? "text-base" : "text-sm"} focus:outline-hidden disabled:cursor-not-allowed`;
+	return e === "box" ? n ? [a, "text-text-disabled placeholder:text-text-disabled"].join(" ") : t ? [a, "text-text-danger placeholder:text-text-danger"].join(" ") : r ? [a, "text-text-primary placeholder:text-text-tertiary"].join(" ") : [a, "text-text-tertiary placeholder:text-text-tertiary"].join(" ") : ["w-full bg-white dark:bg-neutral-800 text-sm text-neutral-900 dark:text-white placeholder:text-neutral-400 transition-all duration-200 ease-out focus:outline-hidden disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed disabled:border-neutral-200"].join(" ");
+}, r = (e, t, n) => t ? "text-icon-disabled" : e ? "text-icon-danger" : n ? "text-icon-secondary" : "text-icon-tertiary", i = () => "w-full", a = (e, t) => ["block text-xs font-medium mb-2", t ? "text-text-danger" : "text-text-secondary"].join(" "), o = (e) => ["mt-2 text-sm", e ? "text-text-danger" : "text-text-secondary"].join(" ");
+//#endregion
+export { n as getInputClasses, i as getInputContainerClasses, o as getInputHelpClasses, a as getInputLabelClasses, r as getInputTrailingIconColor, t as getInputVariantClasses };

package/dist/components/loading-spinner/LoadingSpinner.cjs.js

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime");var t={sm:`h-4 w-4`,md:`h-6 w-6`,lg:`h-8 w-8`};function n({size:n=`md`}){return(0,e.jsxs)(`svg`,{className:`animate-spin ${t[n]} text-primary-500 dark:text-primary-400`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,children:[(0,e.jsx)(`circle`,{className:`opacity-25`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`4`}),(0,e.jsx)(`path`,{className:`opacity-75`,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`})]})}function r({message:t=`데이터를 불러오는 중이에요...`,size:r=`md`,className:i=``}){return(0,e.jsx)(`div`,{className:`flex items-center justify-center h-full min-h-[200px] ${i}`,children:(0,e.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,e.jsx)(n,{size:r}),t&&(0,e.jsx)(`span`,{className:`text-sm text-neutral-500 dark:text-neutral-400`,children:t})]})})}function i({size:t=`sm`}){return(0,e.jsx)(`div`,{className:`flex items-center justify-center py-3`,children:(0,e.jsx)(n,{size:t})})}exports.InlineSpinner=i,exports.LoadingSpinner=r,exports.Spinner=n;

package/dist/components/loading-spinner/LoadingSpinner.esm.js

@@ -0,0 +1,47 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/loading-spinner/LoadingSpinner.tsx
+var n = {
+	sm: "h-4 w-4",
+	md: "h-6 w-6",
+	lg: "h-8 w-8"
+};
+function r({ size: r = "md" }) {
+	return /* @__PURE__ */ t("svg", {
+		className: `animate-spin ${n[r]} text-primary-500 dark:text-primary-400`,
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ e("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ e("path", {
+			className: "opacity-75",
+			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"
+		})]
+	});
+}
+function i({ message: n = "데이터를 불러오는 중이에요...", size: i = "md", className: a = "" }) {
+	return /* @__PURE__ */ e("div", {
+		className: `flex items-center justify-center h-full min-h-[200px] ${a}`,
+		children: /* @__PURE__ */ t("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [/* @__PURE__ */ e(r, { size: i }), n && /* @__PURE__ */ e("span", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400",
+				children: n
+			})]
+		})
+	});
+}
+function a({ size: t = "sm" }) {
+	return /* @__PURE__ */ e("div", {
+		className: "flex items-center justify-center py-3",
+		children: /* @__PURE__ */ e(r, { size: t })
+	});
+}
+//#endregion
+export { a as InlineSpinner, i as LoadingSpinner, r as Spinner };

package/dist/components/modal/Modal.cjs.js

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs.js"),t=require("../../hooks/useMediaQuery.cjs.js"),n=require("../../lib/overlay-stack.cjs.js"),r=require("../../lib/Portal.cjs.js");let i=require("react"),a=require("react/jsx-runtime"),o=require("motion/react");function s({isOpen:s,onClose:c,title:l,widthPx:u,footer:d,bodyPadded:f=!1,subView:p,className:m,children:h}){let g=t.useIsMobile(),_=(0,i.useId)(),v=(0,o.useDragControls)();return(0,i.useEffect)(()=>{if(s)return n.overlayStack.push(_),document.body.style.overflow=`hidden`,()=>{n.overlayStack.pop(_),n.overlayStack.isEmpty()&&(document.body.style.overflow=``)}},[s,_]),(0,i.useEffect)(()=>{let e=e=>{e.key===`Escape`&&n.overlayStack.isTop(_)&&c()};return s&&window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[s,c,_]),(0,a.jsxs)(r.Portal,{children:[(0,a.jsx)(o.AnimatePresence,{children:s&&(0,a.jsx)(o.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:()=>{n.overlayStack.isTop(_)&&c()},className:`fixed inset-0 z-50 bg-black/50`},`modal-backdrop`)}),(0,a.jsx)(o.AnimatePresence,{children:s&&(0,a.jsxs)(o.motion.div,{initial:g?{y:`100%`}:{opacity:0,y:24,scale:.96},animate:g?{y:0}:{opacity:1,y:0,scale:1},exit:g?{y:`100%`,transition:{duration:.2,ease:[.4,0,1,1]}}:{opacity:0,y:24,scale:.96},transition:g?{type:`spring`,damping:38,stiffness:320}:{duration:.25,ease:[.32,.72,0,1]},drag:g?`y`:!1,dragListener:!1,dragControls:v,dragConstraints:{top:0,bottom:0},dragElastic:{top:0,bottom:.4},onDragEnd:(e,t)=>{(t.offset.y>100||t.velocity.y>500)&&c()},className:e.cn(`fixed -bottom-8 left-0 right-0 z-50 mx-auto flex max-h-[88vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white pb-8 shadow-xl sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-h-[90vh] sm:w-auto sm:min-w-[320px] sm:max-w-[90vw] sm:rounded-lg sm:pb-0 dark:bg-neutral-800`,m),style:g?void 0:{translateX:`-50%`,translateY:`-50%`,...u?{width:u}:{}},children:[(0,a.jsx)(`div`,{className:`flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden`,onPointerDown:e=>v.start(e),children:(0,a.jsx)(`div`,{className:`h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-600`})}),l&&(0,a.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3`,children:[(0,a.jsx)(`h3`,{className:`text-base font-semibold text-neutral-900 sm:text-lg dark:text-white`,children:l}),(0,a.jsx)(`button`,{onClick:c,className:`rounded p-1 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300`,"aria-label":`닫기`,children:(0,a.jsx)(`svg`,{className:`h-5 w-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,a.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M6 18L18 6M6 6l12 12`})})})]}),(0,a.jsxs)(`div`,{className:`relative flex min-h-0 flex-1 flex-col overflow-hidden`,children:[(0,a.jsx)(`div`,{className:`transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden${f?` mx-1 sm:mx-4`:``}`,children:h}),p]}),d&&(0,a.jsx)(`div`,{className:`shrink-0`,children:d})]},`modal-sheet`)})]})}exports.Modal=s;