@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/search-box/SearchBoxDateRange.esm.js

@@ -0,0 +1,57 @@
+import { Button as e } from "../button/Button.esm.js";
+import { DateInput as t } from "../date-input/DateInput.esm.js";
+import { parseDateRangeValue as n, serializeDateRangeValue as r } from "./parseDateRange.esm.js";
+import { SearchBoxSheetContext as i } from "./SearchBoxSheetContext.esm.js";
+import { useContext as a, useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxDateRange.tsx
+function l({ value: l, onChange: u, presets: d, size: f }) {
+	let { from: p, to: m } = n(l), h = a(i), g = o(() => d?.map((e) => ({
+		preset: e,
+		range: e.range()
+	})) ?? [], [d]), _ = (e) => {
+		let t = e.range();
+		u(r(t.from, t.to));
+	};
+	return /* @__PURE__ */ c("div", {
+		className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ s(t, {
+					value: p,
+					onChange: (e) => u(r(e, m)),
+					size: f,
+					ariaLabel: "시작일",
+					disableMobileSheet: h
+				}),
+				/* @__PURE__ */ s("span", {
+					className: "text-neutral-400",
+					children: "~"
+				}),
+				/* @__PURE__ */ s(t, {
+					value: m,
+					onChange: (e) => u(r(p, e)),
+					size: f,
+					ariaLabel: "종료일",
+					disableMobileSheet: h
+				})
+			]
+		}), g.length > 0 && /* @__PURE__ */ s("div", {
+			className: "flex items-center gap-1",
+			children: g.map(({ preset: t, range: n }) => {
+				let r = p === n.from && m === n.to;
+				return /* @__PURE__ */ s(e, {
+					variant: r ? "primary" : "tertiary",
+					appearance: r ? "filled" : "outlined",
+					size: f,
+					onClick: () => _(t),
+					className: `whitespace-nowrap ${f === "small" ? "h-10" : ""} ${r ? "" : "border-border-tertiary! dark:border-border-secondary!"}`,
+					children: t.label
+				}, t.label);
+			})
+		})]
+	});
+}
+//#endregion
+export { l as SearchBoxDateRange };

package/dist/components/search-box/SearchBoxDateSingle.cjs.js

@@ -0,0 +1 @@
+const e=require("../button/Button.cjs.js"),t=require("../date-input/DateInput.cjs.js"),n=require("./SearchBoxSheetContext.cjs.js");let r=require("react"),i=require("react/jsx-runtime");function a({value:a,onChange:o,ariaLabel:s,presets:c,size:l}){let u=(0,r.useContext)(n.SearchBoxSheetContext),d=(0,r.useMemo)(()=>c?.map(e=>({preset:e,date:e.date()}))??[],[c]);return(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-1.5`,children:[(0,i.jsx)(t.DateInput,{value:a,onChange:o,size:l,ariaLabel:s,disableMobileSheet:u}),d.length>0&&(0,i.jsx)(`div`,{className:`flex items-center gap-1`,children:d.map(({preset:t,date:n})=>{let r=a===n;return(0,i.jsx)(e.Button,{variant:r?`primary`:`tertiary`,appearance:r?`filled`:`outlined`,size:l,onClick:()=>o(n),className:`whitespace-nowrap ${l===`small`?`h-10`:``} ${r?``:`border-border-tertiary! dark:border-border-secondary!`}`,children:t.label},t.label)})})]})}exports.SearchBoxDateSingle=a;

package/dist/components/search-box/SearchBoxDateSingle.esm.js

@@ -0,0 +1,37 @@
+import { Button as e } from "../button/Button.esm.js";
+import { DateInput as t } from "../date-input/DateInput.esm.js";
+import { SearchBoxSheetContext as n } from "./SearchBoxSheetContext.esm.js";
+import { useContext as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxDateSingle.tsx
+function s({ value: s, onChange: c, ariaLabel: l, presets: u, size: d }) {
+	let f = r(n), p = i(() => u?.map((e) => ({
+		preset: e,
+		date: e.date()
+	})) ?? [], [u]);
+	return /* @__PURE__ */ o("div", {
+		className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+		children: [/* @__PURE__ */ a(t, {
+			value: s,
+			onChange: c,
+			size: d,
+			ariaLabel: l,
+			disableMobileSheet: f
+		}), p.length > 0 && /* @__PURE__ */ a("div", {
+			className: "flex items-center gap-1",
+			children: p.map(({ preset: t, date: n }) => {
+				let r = s === n;
+				return /* @__PURE__ */ a(e, {
+					variant: r ? "primary" : "tertiary",
+					appearance: r ? "filled" : "outlined",
+					size: d,
+					onClick: () => c(n),
+					className: `whitespace-nowrap ${d === "small" ? "h-10" : ""} ${r ? "" : "border-border-tertiary! dark:border-border-secondary!"}`,
+					children: t.label
+				}, t.label);
+			})
+		})]
+	});
+}
+//#endregion
+export { s as SearchBoxDateSingle };

package/dist/components/search-box/SearchBoxField.cjs.js

@@ -0,0 +1 @@
+const e=require("./SearchBoxDateRange.cjs.js"),t=require("./SearchBoxDateSingle.cjs.js"),n=require("./SearchBoxFloatingInput.cjs.js"),r=require("./SearchBoxFloatingSelect.cjs.js"),i=require("./SearchBoxMonth.cjs.js"),a=require("./SearchBoxMultiSelect.cjs.js");let o=require("react/jsx-runtime");function s({field:s,value:c,onChange:l,onEnter:u,size:d}){return s.type===`text`?(0,o.jsx)(n.SearchBoxFloatingInput,{label:s.label,value:c,onChange:l,onEnter:u,size:d,inputMode:s.inputMode}):s.type===`multiSelect`?(0,o.jsx)(a.SearchBoxMultiSelect,{label:s.label,options:s.options,value:c,onChange:l,size:d}):s.type===`dateRange`?(0,o.jsx)(e.SearchBoxDateRange,{value:c,onChange:l,presets:s.presets,size:d}):s.type===`dateSingle`?(0,o.jsx)(t.SearchBoxDateSingle,{value:c,onChange:l,ariaLabel:s.label,presets:s.presets,size:d}):s.type===`month`?(0,o.jsx)(i.SearchBoxMonth,{value:c,onChange:l,ariaLabel:s.label,size:d}):(0,o.jsx)(r.SearchBoxFloatingSelect,{label:s.label,options:s.options,value:c,onChange:l,size:d})}exports.SearchBoxField=s;

package/dist/components/search-box/SearchBoxField.esm.js

@@ -0,0 +1,48 @@
+import { SearchBoxDateRange as e } from "./SearchBoxDateRange.esm.js";
+import { SearchBoxDateSingle as t } from "./SearchBoxDateSingle.esm.js";
+import { SearchBoxFloatingInput as n } from "./SearchBoxFloatingInput.esm.js";
+import { SearchBoxFloatingSelect as r } from "./SearchBoxFloatingSelect.esm.js";
+import { SearchBoxMonth as i } from "./SearchBoxMonth.esm.js";
+import { SearchBoxMultiSelect as a } from "./SearchBoxMultiSelect.esm.js";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxField.tsx
+function s({ field: s, value: c, onChange: l, onEnter: u, size: d }) {
+	return s.type === "text" ? /* @__PURE__ */ o(n, {
+		label: s.label,
+		value: c,
+		onChange: l,
+		onEnter: u,
+		size: d,
+		inputMode: s.inputMode
+	}) : s.type === "multiSelect" ? /* @__PURE__ */ o(a, {
+		label: s.label,
+		options: s.options,
+		value: c,
+		onChange: l,
+		size: d
+	}) : s.type === "dateRange" ? /* @__PURE__ */ o(e, {
+		value: c,
+		onChange: l,
+		presets: s.presets,
+		size: d
+	}) : s.type === "dateSingle" ? /* @__PURE__ */ o(t, {
+		value: c,
+		onChange: l,
+		ariaLabel: s.label,
+		presets: s.presets,
+		size: d
+	}) : s.type === "month" ? /* @__PURE__ */ o(i, {
+		value: c,
+		onChange: l,
+		ariaLabel: s.label,
+		size: d
+	}) : /* @__PURE__ */ o(r, {
+		label: s.label,
+		options: s.options,
+		value: c,
+		onChange: l,
+		size: d
+	});
+}
+//#endregion
+export { s as SearchBoxField };

package/dist/components/search-box/SearchBoxFloatingInput.cjs.js

@@ -0,0 +1 @@
+let e=require("react"),t=require("react/jsx-runtime");function n({label:n,value:r,onChange:i,onEnter:a,size:o,inputMode:s,trailing:c}){let[l,u]=(0,e.useState)(!1),d=(0,e.useRef)(null),f=r.length>0,p=l||f,m=o===`mini`?`h-8`:`h-10`,h=o===`mini`?`text-xs`:`text-sm`,g=o===`mini`?`px-2.5`:`px-3`;return(0,t.jsxs)(`div`,{className:`relative ${m} w-full cursor-text rounded-lg border bg-bg-white transition-colors ${l?`border-primary-500`:`border-border-tertiary dark:border-border-secondary`}`,onClick:()=>d.current?.focus(),children:[(0,t.jsx)(`input`,{ref:d,type:`text`,value:r,onChange:e=>i(e.target.value),onFocus:()=>u(!0),onBlur:()=>u(!1),onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),a?.())},inputMode:s,"aria-label":n,className:`peer h-full w-full bg-transparent ${g} ${h} text-text-primary placeholder-transparent focus:outline-hidden`,placeholder:n}),(0,t.jsx)(`span`,{"aria-hidden":`true`,className:`pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${p?`-top-2 ${o===`mini`?`text-[10px]`:`text-xs`} ${l?`text-primary-500`:`text-text-secondary`}`:`top-1/2 -translate-y-1/2 ${h} text-text-tertiary`}`,children:n}),c&&(0,t.jsx)(`div`,{className:`absolute inset-y-0 right-2 flex items-center`,children:c})]})}exports.SearchBoxFloatingInput=n;

package/dist/components/search-box/SearchBoxFloatingInput.esm.js

@@ -0,0 +1,38 @@
+import { useRef as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxFloatingInput.tsx
+function i({ label: i, value: a, onChange: o, onEnter: s, size: c, inputMode: l, trailing: u }) {
+	let [d, f] = t(!1), p = e(null), m = a.length > 0, h = d || m, g = c === "mini" ? "h-8" : "h-10", _ = c === "mini" ? "text-xs" : "text-sm", v = c === "mini" ? "px-2.5" : "px-3";
+	return /* @__PURE__ */ r("div", {
+		className: `relative ${g} w-full cursor-text rounded-lg border bg-bg-white transition-colors ${d ? "border-primary-500" : "border-border-tertiary dark:border-border-secondary"}`,
+		onClick: () => p.current?.focus(),
+		children: [
+			/* @__PURE__ */ n("input", {
+				ref: p,
+				type: "text",
+				value: a,
+				onChange: (e) => o(e.target.value),
+				onFocus: () => f(!0),
+				onBlur: () => f(!1),
+				onKeyDown: (e) => {
+					e.key === "Enter" && (e.preventDefault(), s?.());
+				},
+				inputMode: l,
+				"aria-label": i,
+				className: `peer h-full w-full bg-transparent ${v} ${_} text-text-primary placeholder-transparent focus:outline-hidden`,
+				placeholder: i
+			}),
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: `pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${h ? `-top-2 ${c === "mini" ? "text-[10px]" : "text-xs"} ${d ? "text-primary-500" : "text-text-secondary"}` : `top-1/2 -translate-y-1/2 ${_} text-text-tertiary`}`,
+				children: i
+			}),
+			u && /* @__PURE__ */ n("div", {
+				className: "absolute inset-y-0 right-2 flex items-center",
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { i as SearchBoxFloatingInput };

package/dist/components/search-box/SearchBoxFloatingSelect.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs.js");let n=require("react"),r=require("react/jsx-runtime"),i=require("@floating-ui/react");function a({label:a,options:o,value:s,onChange:c,size:l}){let[u,d]=(0,n.useState)(!1),{refs:f,floatingStyles:p,context:m}=(0,i.useFloating)({open:u,onOpenChange:d,placement:`bottom-start`,whileElementsMounted:i.autoUpdate,middleware:[(0,i.offset)(4),(0,i.flip)({fallbackAxisSideDirection:`start`}),(0,i.shift)({padding:8}),(0,i.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`})}})]}),{getReferenceProps:h,getFloatingProps:g}=(0,i.useInteractions)([(0,i.useClick)(m),(0,i.useDismiss)(m),(0,i.useRole)(m,{role:`listbox`})]),_=o.find(e=>String(e.value)===s),v=!!_,y=u||v,b=l===`mini`?`h-8`:`h-10`,x=l===`mini`?`text-xs`:`text-sm`,S=l===`mini`?`px-2.5`:`px-3`;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`button`,{ref:f.setReference,type:`button`,...h(),"aria-expanded":u,"aria-haspopup":`listbox`,className:`relative ${b} w-full rounded-lg border bg-bg-white ${S} text-left transition-colors focus-visible:border-primary-500 focus-visible:outline-hidden ${u?`border-primary-500`:`border-border-tertiary dark:border-border-secondary`}`,children:[(0,r.jsxs)(`div`,{className:`flex h-full w-full items-center justify-between gap-2`,children:[(0,r.jsx)(`span`,{className:`truncate ${x} ${v?`text-text-primary`:`text-text-tertiary`}`,children:v?_.label:``}),(0,r.jsx)(t.ChevronDown,{className:`h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform ${u?`rotate-180`:``}`})]}),(0,r.jsx)(`span`,{"aria-hidden":`true`,className:`pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${y?`-top-2 ${l===`mini`?`text-[10px]`:`text-xs`} ${u?`text-primary-500`:`text-text-secondary`}`:`top-1/2 -translate-y-1/2 ${x} text-text-tertiary`}`,children:a})]}),u&&(0,r.jsx)(i.FloatingPortal,{children:(0,r.jsxs)(`div`,{ref:f.setFloating,style:p,...g(),className:`z-9999 max-h-60 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800`,children:[o.map(t=>{let n=String(t.value),i=n===s;return(0,r.jsxs)(`button`,{type:`button`,onClick:()=>{c(n),d(!1)},className:`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 ${x} ${i?`text-text-primary`:`text-text-secondary`}`,role:`option`,"aria-selected":i,children:[(0,r.jsx)(`span`,{className:`flex-1 truncate`,children:t.label}),i&&(0,r.jsx)(e.Check,{className:`h-3 w-3 text-primary-500`,strokeWidth:3})]},n)}),o.length===0&&(0,r.jsx)(`div`,{className:`px-3 py-2 text-xs text-text-tertiary`,children:`옵션이 없어요`})]})})]})}exports.SearchBoxFloatingSelect=a;

package/dist/components/search-box/SearchBoxFloatingSelect.esm.js

@@ -0,0 +1,74 @@
+import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { FloatingPortal as o, autoUpdate as s, flip as c, offset as l, shift as u, size as d, useClick as f, useDismiss as p, useFloating as m, useInteractions as h, useRole as g } from "@floating-ui/react";
+//#region src/components/search-box/SearchBoxFloatingSelect.tsx
+function _({ label: _, options: v, value: y, onChange: b, size: x }) {
+	let [S, C] = n(!1), { refs: w, floatingStyles: T, context: E } = m({
+		open: S,
+		onOpenChange: C,
+		placement: "bottom-start",
+		whileElementsMounted: s,
+		middleware: [
+			l(4),
+			c({ fallbackAxisSideDirection: "start" }),
+			u({ padding: 8 }),
+			d({ apply({ rects: e, elements: t }) {
+				Object.assign(t.floating.style, { minWidth: `${e.reference.width}px` });
+			} })
+		]
+	}), { getReferenceProps: D, getFloatingProps: O } = h([
+		f(E),
+		p(E),
+		g(E, { role: "listbox" })
+	]), k = v.find((e) => String(e.value) === y), A = !!k, j = S || A, M = x === "mini" ? "h-8" : "h-10", N = x === "mini" ? "text-xs" : "text-sm", P = x === "mini" ? "px-2.5" : "px-3";
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("button", {
+		ref: w.setReference,
+		type: "button",
+		...D(),
+		"aria-expanded": S,
+		"aria-haspopup": "listbox",
+		className: `relative ${M} w-full rounded-lg border bg-bg-white ${P} text-left transition-colors focus-visible:border-primary-500 focus-visible:outline-hidden ${S ? "border-primary-500" : "border-border-tertiary dark:border-border-secondary"}`,
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex h-full w-full items-center justify-between gap-2",
+			children: [/* @__PURE__ */ i("span", {
+				className: `truncate ${N} ${A ? "text-text-primary" : "text-text-tertiary"}`,
+				children: A ? k.label : ""
+			}), /* @__PURE__ */ i(t, { className: `h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform ${S ? "rotate-180" : ""}` })]
+		}), /* @__PURE__ */ i("span", {
+			"aria-hidden": "true",
+			className: `pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${j ? `-top-2 ${x === "mini" ? "text-[10px]" : "text-xs"} ${S ? "text-primary-500" : "text-text-secondary"}` : `top-1/2 -translate-y-1/2 ${N} text-text-tertiary`}`,
+			children: _
+		})]
+	}), S && /* @__PURE__ */ i(o, { children: /* @__PURE__ */ a("div", {
+		ref: w.setFloating,
+		style: T,
+		...O(),
+		className: "z-9999 max-h-60 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
+		children: [v.map((t) => {
+			let n = String(t.value), r = n === y;
+			return /* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: () => {
+					b(n), C(!1);
+				},
+				className: `flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 ${N} ${r ? "text-text-primary" : "text-text-secondary"}`,
+				role: "option",
+				"aria-selected": r,
+				children: [/* @__PURE__ */ i("span", {
+					className: "flex-1 truncate",
+					children: t.label
+				}), r && /* @__PURE__ */ i(e, {
+					className: "h-3 w-3 text-primary-500",
+					strokeWidth: 3
+				})]
+			}, n);
+		}), v.length === 0 && /* @__PURE__ */ i("div", {
+			className: "px-3 py-2 text-xs text-text-tertiary",
+			children: "옵션이 없어요"
+		})]
+	}) })] });
+}
+//#endregion
+export { _ as SearchBoxFloatingSelect };

package/dist/components/search-box/SearchBoxMonth.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/calendar.cjs.js"),t=require("../date-picker/month-picker.cjs.js"),n=require("./SearchBoxSheetContext.cjs.js");let r=require("react"),i=require("react/jsx-runtime");function a(e){let[t,n]=e.split(`-`),r=Number(t),i=Number(n);if(!(!r||!i))return{year:r,month:i}}function o({year:e,month:t}){return`${e}-${String(t).padStart(2,`0`)}`}function s({value:s,onChange:c,ariaLabel:l,size:u}){let d=(0,r.useContext)(n.SearchBoxSheetContext),f=a(s),p=f?`${f.year}년 ${f.month}월`:`년월 선택`;return(0,i.jsx)(t.MonthPicker,{value:f,onChange:e=>c(o(e)),disableMobileSheet:d,children:(0,i.jsxs)(`button`,{type:`button`,"aria-label":l,className:`inline-flex w-full items-center gap-2 rounded-lg border border-border-tertiary bg-bg-card px-3 text-sm text-text-primary transition-colors hover:bg-bg-base-primary dark:border-border-secondary ${u===`small`?`h-10 py-2`:`h-9 py-1.5`}`,children:[(0,i.jsx)(e.Calendar,{className:`h-4 w-4 shrink-0 text-text-secondary`}),(0,i.jsx)(`span`,{className:f?``:`text-text-tertiary`,children:p})]})})}exports.SearchBoxMonth=s;

package/dist/components/search-box/SearchBoxMonth.esm.js

@@ -0,0 +1,35 @@
+import { Calendar as e } from "../../node_modules/lucide-react/dist/esm/icons/calendar.esm.js";
+import { MonthPicker as t } from "../date-picker/month-picker.esm.js";
+import { SearchBoxSheetContext as n } from "./SearchBoxSheetContext.esm.js";
+import { useContext as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxMonth.tsx
+function o(e) {
+	let [t, n] = e.split("-"), r = Number(t), i = Number(n);
+	if (!(!r || !i)) return {
+		year: r,
+		month: i
+	};
+}
+function s({ year: e, month: t }) {
+	return `${e}-${String(t).padStart(2, "0")}`;
+}
+function c({ value: c, onChange: l, ariaLabel: u, size: d }) {
+	let f = r(n), p = o(c), m = p ? `${p.year}년 ${p.month}월` : "년월 선택";
+	return /* @__PURE__ */ i(t, {
+		value: p,
+		onChange: (e) => l(s(e)),
+		disableMobileSheet: f,
+		children: /* @__PURE__ */ a("button", {
+			type: "button",
+			"aria-label": u,
+			className: `inline-flex w-full items-center gap-2 rounded-lg border border-border-tertiary bg-bg-card px-3 text-sm text-text-primary transition-colors hover:bg-bg-base-primary dark:border-border-secondary ${d === "small" ? "h-10 py-2" : "h-9 py-1.5"}`,
+			children: [/* @__PURE__ */ i(e, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ i("span", {
+				className: p ? "" : "text-text-tertiary",
+				children: m
+			})]
+		})
+	});
+}
+//#endregion
+export { c as SearchBoxMonth };

package/dist/components/search-box/SearchBoxMultiSelect.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs.js");let n=require("react"),r=require("react/jsx-runtime"),i=require("@floating-ui/react");function a({label:a,options:o,value:s,onChange:c,size:l}){let[u,d]=(0,n.useState)(!1),{refs:f,floatingStyles:p,context:m}=(0,i.useFloating)({open:u,onOpenChange:d,placement:`bottom-start`,whileElementsMounted:i.autoUpdate,middleware:[(0,i.offset)(4),(0,i.flip)({fallbackAxisSideDirection:`start`}),(0,i.shift)({padding:8}),(0,i.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`})}})]}),{getReferenceProps:h,getFloatingProps:g}=(0,i.useInteractions)([(0,i.useClick)(m),(0,i.useDismiss)(m),(0,i.useRole)(m,{role:`listbox`})]),_=s?s.split(`,`).filter(Boolean):[],v=new Set(_),y=_.length>0,b=u||y,x=e=>{let t=new Set(v);t.has(e)?t.delete(e):t.add(e),c(o.filter(e=>t.has(String(e.value))).map(e=>String(e.value)).join(`,`))},S=l===`mini`?`h-8`:`h-10`,C=l===`mini`?`text-xs`:`text-sm`,w=l===`mini`?`px-2.5`:`px-3`,T=y?o.filter(e=>v.has(String(e.value))).map(e=>e.label).join(`, `):``;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`button`,{ref:f.setReference,type:`button`,...h(),"aria-expanded":u,"aria-haspopup":`listbox`,className:`relative ${S} w-full rounded-lg border bg-bg-white ${w} text-left transition-colors focus-visible:border-primary-500 focus-visible:outline-hidden ${u?`border-primary-500`:`border-border-tertiary dark:border-border-secondary`}`,children:[(0,r.jsxs)(`div`,{className:`flex h-full w-full items-center justify-between gap-2`,children:[(0,r.jsx)(`span`,{className:`truncate ${C} ${y?`text-text-primary`:`text-text-tertiary`}`,children:T}),(0,r.jsx)(t.ChevronDown,{className:`h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform ${u?`rotate-180`:``}`})]}),(0,r.jsx)(`span`,{"aria-hidden":`true`,className:`pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${b?`-top-2 ${l===`mini`?`text-[10px]`:`text-xs`} ${u?`text-primary-500`:`text-text-secondary`}`:`top-1/2 -translate-y-1/2 ${C} text-text-tertiary`}`,children:a})]}),u&&(0,r.jsx)(i.FloatingPortal,{children:(0,r.jsxs)(`div`,{ref:f.setFloating,style:p,...g(),className:`z-9999 max-h-60 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800`,children:[o.map(t=>{let n=String(t.value),i=v.has(n);return(0,r.jsxs)(`button`,{type:`button`,onClick:()=>x(n),className:`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 ${C} ${i?`text-text-primary`:`text-text-secondary`}`,role:`option`,"aria-selected":i,children:[(0,r.jsx)(`span`,{className:`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${i?`border-primary-500 bg-primary-500 text-white`:`border-neutral-300 dark:border-neutral-600`}`,children:i&&(0,r.jsx)(e.Check,{className:`h-3 w-3`,strokeWidth:3})}),(0,r.jsx)(`span`,{className:`flex-1 truncate`,children:t.label})]},n)}),o.length===0&&(0,r.jsx)(`div`,{className:`px-3 py-2 text-xs text-text-tertiary`,children:`옵션이 없어요`})]})})]})}exports.SearchBoxMultiSelect=a;

package/dist/components/search-box/SearchBoxMultiSelect.esm.js

@@ -0,0 +1,78 @@
+import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { FloatingPortal as o, autoUpdate as s, flip as c, offset as l, shift as u, size as d, useClick as f, useDismiss as p, useFloating as m, useInteractions as h, useRole as g } from "@floating-ui/react";
+//#region src/components/search-box/SearchBoxMultiSelect.tsx
+function _({ label: _, options: v, value: y, onChange: b, size: x }) {
+	let [S, C] = n(!1), { refs: w, floatingStyles: T, context: E } = m({
+		open: S,
+		onOpenChange: C,
+		placement: "bottom-start",
+		whileElementsMounted: s,
+		middleware: [
+			l(4),
+			c({ fallbackAxisSideDirection: "start" }),
+			u({ padding: 8 }),
+			d({ apply({ rects: e, elements: t }) {
+				Object.assign(t.floating.style, { minWidth: `${e.reference.width}px` });
+			} })
+		]
+	}), { getReferenceProps: D, getFloatingProps: O } = h([
+		f(E),
+		p(E),
+		g(E, { role: "listbox" })
+	]), k = y ? y.split(",").filter(Boolean) : [], A = new Set(k), j = k.length > 0, M = S || j, N = (e) => {
+		let t = new Set(A);
+		t.has(e) ? t.delete(e) : t.add(e), b(v.filter((e) => t.has(String(e.value))).map((e) => String(e.value)).join(","));
+	}, P = x === "mini" ? "h-8" : "h-10", F = x === "mini" ? "text-xs" : "text-sm", I = x === "mini" ? "px-2.5" : "px-3", L = j ? v.filter((e) => A.has(String(e.value))).map((e) => e.label).join(", ") : "";
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("button", {
+		ref: w.setReference,
+		type: "button",
+		...D(),
+		"aria-expanded": S,
+		"aria-haspopup": "listbox",
+		className: `relative ${P} w-full rounded-lg border bg-bg-white ${I} text-left transition-colors focus-visible:border-primary-500 focus-visible:outline-hidden ${S ? "border-primary-500" : "border-border-tertiary dark:border-border-secondary"}`,
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex h-full w-full items-center justify-between gap-2",
+			children: [/* @__PURE__ */ i("span", {
+				className: `truncate ${F} ${j ? "text-text-primary" : "text-text-tertiary"}`,
+				children: L
+			}), /* @__PURE__ */ i(t, { className: `h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform ${S ? "rotate-180" : ""}` })]
+		}), /* @__PURE__ */ i("span", {
+			"aria-hidden": "true",
+			className: `pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${M ? `-top-2 ${x === "mini" ? "text-[10px]" : "text-xs"} ${S ? "text-primary-500" : "text-text-secondary"}` : `top-1/2 -translate-y-1/2 ${F} text-text-tertiary`}`,
+			children: _
+		})]
+	}), S && /* @__PURE__ */ i(o, { children: /* @__PURE__ */ a("div", {
+		ref: w.setFloating,
+		style: T,
+		...O(),
+		className: "z-9999 max-h-60 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
+		children: [v.map((t) => {
+			let n = String(t.value), r = A.has(n);
+			return /* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: () => N(n),
+				className: `flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 ${F} ${r ? "text-text-primary" : "text-text-secondary"}`,
+				role: "option",
+				"aria-selected": r,
+				children: [/* @__PURE__ */ i("span", {
+					className: `flex h-4 w-4 shrink-0 items-center justify-center rounded border ${r ? "border-primary-500 bg-primary-500 text-white" : "border-neutral-300 dark:border-neutral-600"}`,
+					children: r && /* @__PURE__ */ i(e, {
+						className: "h-3 w-3",
+						strokeWidth: 3
+					})
+				}), /* @__PURE__ */ i("span", {
+					className: "flex-1 truncate",
+					children: t.label
+				})]
+			}, n);
+		}), v.length === 0 && /* @__PURE__ */ i("div", {
+			className: "px-3 py-2 text-xs text-text-tertiary",
+			children: "옵션이 없어요"
+		})]
+	}) })] });
+}
+//#endregion
+export { _ as SearchBoxMultiSelect };

package/dist/components/search-box/SearchBoxSheetContext.cjs.js

@@ -0,0 +1 @@
+var e=(0,require("react").createContext)(!1);exports.SearchBoxSheetContext=e;

package/dist/components/search-box/SearchBoxSheetContext.esm.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+//#region src/components/search-box/SearchBoxSheetContext.ts
+var t = e(!1);
+//#endregion
+export { t as SearchBoxSheetContext };

package/dist/components/search-box/dateRangePresets.cjs.js

@@ -0,0 +1 @@
+const e=require("./parseDateRange.cjs.js");let t=require("date-fns");var n=`yyyy-MM-dd`;function r(){let e=(0,t.format)(new Date,n);return{from:e,to:e}}function i(){let{from:t,to:n}=r();return e.serializeDateRangeValue(t,n)}var a=[{label:`전일`,range:()=>{let e=(0,t.format)((0,t.subDays)(new Date,1),n);return{from:e,to:e}}},{label:`당일`,range:()=>{let e=(0,t.format)(new Date,n);return{from:e,to:e}}},{label:`당월`,range:()=>{let e=new Date;return{from:(0,t.format)((0,t.startOfMonth)(e),n),to:(0,t.format)((0,t.endOfMonth)(e),n)}}},{label:`전월`,range:()=>{let e=(0,t.subMonths)(new Date,1);return{from:(0,t.format)((0,t.startOfMonth)(e),n),to:(0,t.format)((0,t.endOfMonth)(e),n)}}}];exports.DEFAULT_DATE_RANGE_PRESETS=a,exports.getTodayDateRange=r,exports.getTodayDateRangeValue=i;

package/dist/components/search-box/dateRangePresets.esm.js

@@ -0,0 +1,59 @@
+import { serializeDateRangeValue as e } from "./parseDateRange.esm.js";
+import { endOfMonth as t, format as n, startOfMonth as r, subDays as i, subMonths as a } from "date-fns";
+//#region src/components/search-box/dateRangePresets.ts
+var o = "yyyy-MM-dd";
+function s() {
+	let e = n(/* @__PURE__ */ new Date(), o);
+	return {
+		from: e,
+		to: e
+	};
+}
+function c() {
+	let { from: t, to: n } = s();
+	return e(t, n);
+}
+var l = [
+	{
+		label: "전일",
+		range: () => {
+			let e = n(i(/* @__PURE__ */ new Date(), 1), o);
+			return {
+				from: e,
+				to: e
+			};
+		}
+	},
+	{
+		label: "당일",
+		range: () => {
+			let e = n(/* @__PURE__ */ new Date(), o);
+			return {
+				from: e,
+				to: e
+			};
+		}
+	},
+	{
+		label: "당월",
+		range: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				from: n(r(e), o),
+				to: n(t(e), o)
+			};
+		}
+	},
+	{
+		label: "전월",
+		range: () => {
+			let e = a(/* @__PURE__ */ new Date(), 1);
+			return {
+				from: n(r(e), o),
+				to: n(t(e), o)
+			};
+		}
+	}
+];
+//#endregion
+export { l as DEFAULT_DATE_RANGE_PRESETS, s as getTodayDateRange, c as getTodayDateRangeValue };

package/dist/components/search-box/parseDateRange.cjs.js

@@ -0,0 +1 @@
+var e=`~`;function t(t){if(!t)return{from:``,to:``};let n=t.indexOf(e);return n===-1?{from:t,to:``}:{from:t.slice(0,n),to:t.slice(n+1)}}function n(t,n){return!t&&!n?``:`${t}${e}${n}`}exports.parseDateRangeValue=t,exports.serializeDateRangeValue=n;

package/dist/components/search-box/parseDateRange.esm.js

@@ -0,0 +1,21 @@
+//#region src/components/search-box/parseDateRange.ts
+var e = "~";
+function t(t) {
+	if (!t) return {
+		from: "",
+		to: ""
+	};
+	let n = t.indexOf(e);
+	return n === -1 ? {
+		from: t,
+		to: ""
+	} : {
+		from: t.slice(0, n),
+		to: t.slice(n + 1)
+	};
+}
+function n(t, n) {
+	return !t && !n ? "" : `${t}${e}${n}`;
+}
+//#endregion
+export { t as parseDateRangeValue, n as serializeDateRangeValue };

package/dist/components/search-box/parseSearchValues.cjs.js

@@ -0,0 +1 @@
+const e=require("./parseDateRange.cjs.js");function t(e){return e?e.split(`,`).filter(Boolean):[]}function n(n,r){let i={};for(let a of n){let n=a.hidden?``:r[a.key]??``;a.type===`multiSelect`?i[a.key]=t(n):a.type===`dateRange`?i[a.key]=e.parseDateRangeValue(n):i[a.key]=n}return i}exports.parseMultiSelectValue=t,exports.parseSearchValues=n;

package/dist/components/search-box/parseSearchValues.esm.js

@@ -0,0 +1,15 @@
+import { parseDateRangeValue as e } from "./parseDateRange.esm.js";
+//#region src/components/search-box/parseSearchValues.ts
+function t(e) {
+	return e ? e.split(",").filter(Boolean) : [];
+}
+function n(n, r) {
+	let i = {};
+	for (let a of n) {
+		let n = a.hidden ? "" : r[a.key] ?? "";
+		a.type === "multiSelect" ? i[a.key] = t(n) : a.type === "dateRange" ? i[a.key] = e(n) : i[a.key] = n;
+	}
+	return i;
+}
+//#endregion
+export { t as parseMultiSelectValue, n as parseSearchValues };

package/dist/components/search-box/useSearchBoxState.cjs.js

@@ -0,0 +1 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("./parseDateRange.cjs.js");let n=require("react"),r=require("react-hot-toast");r=e.__toESM(r,1);function i({fields:e,values:i,onSearch:l,onClear:u}){let[d,f]=(0,n.useState)(()=>a(e,i)),p=(0,n.useRef)(i);return(0,n.useEffect)(()=>{let t=p.current;c(i,t,e)||(f(n=>{let r={...n};for(let a of e)(n[a.key]??``)===(t[a.key]??``)&&(r[a.key]=i[a.key]??``);return r}),p.current=i)},[i]),{draft:d,setFieldValue:(e,t)=>{f(n=>({...n,[e]:t}))},submit:()=>{for(let n of e){if(n.hidden||n.type!==`dateRange`)continue;let{from:e,to:i}=t.parseDateRangeValue(d[n.key]??``);if(e&&i&&e>i)return r.default.error(`${n.label} 종료일이 시작일보다 빠를 수 없어요`),!1}return l(s(e,d)),!0},clear:()=>{let t=o(e);f(t),u?u():l(t)},chips:e.map(e=>{if(e.hidden)return null;let t=i[e.key]??``;if(t===``)return null;if(e.type===`select`){let n=e.options.find(e=>String(e.value)===t);return{key:e.key,label:e.label,valueLabel:n?.label??t}}if(e.type===`multiSelect`){let n=t.split(`,`).filter(Boolean);if(n.length===0)return null;let r=new Map(e.options.map(e=>[String(e.value),e.label])),i=n.map(e=>r.get(e)??e);return{key:e.key,label:e.label,valueLabel:i.join(`, `)}}return null}).filter(e=>e!==null),removeChip:e=>{let t={...i,[e]:``};f(t),l(t)}}}function a(e,t){let n={};for(let r of e)n[r.key]=t[r.key]??``;return n}function o(e){let t={};for(let n of e)t[n.key]=``;return t}function s(e,t){let n={...t};for(let t of e)t.hidden&&(n[t.key]=``);return n}function c(e,t,n){for(let r of n)if((e[r.key]??``)!==(t[r.key]??``))return!1;return!0}exports.useSearchBoxState=i;

package/dist/components/search-box/useSearchBoxState.esm.js

@@ -0,0 +1,87 @@
+import { parseDateRangeValue as e } from "./parseDateRange.esm.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import i from "react-hot-toast";
+//#region src/components/search-box/useSearchBoxState.ts
+function a({ fields: a, values: u, onSearch: d, onClear: f }) {
+	let [p, m] = r(() => o(a, u)), h = n(u);
+	return t(() => {
+		let e = h.current;
+		l(u, e, a) || (m((t) => {
+			let n = { ...t };
+			for (let r of a) (t[r.key] ?? "") === (e[r.key] ?? "") && (n[r.key] = u[r.key] ?? "");
+			return n;
+		}), h.current = u);
+	}, [u]), {
+		draft: p,
+		setFieldValue: (e, t) => {
+			m((n) => ({
+				...n,
+				[e]: t
+			}));
+		},
+		submit: () => {
+			for (let t of a) {
+				if (t.hidden || t.type !== "dateRange") continue;
+				let { from: n, to: r } = e(p[t.key] ?? "");
+				if (n && r && n > r) return i.error(`${t.label} 종료일이 시작일보다 빠를 수 없어요`), !1;
+			}
+			return d(c(a, p)), !0;
+		},
+		clear: () => {
+			let e = s(a);
+			m(e), f ? f() : d(e);
+		},
+		chips: a.map((e) => {
+			if (e.hidden) return null;
+			let t = u[e.key] ?? "";
+			if (t === "") return null;
+			if (e.type === "select") {
+				let n = e.options.find((e) => String(e.value) === t);
+				return {
+					key: e.key,
+					label: e.label,
+					valueLabel: n?.label ?? t
+				};
+			}
+			if (e.type === "multiSelect") {
+				let n = t.split(",").filter(Boolean);
+				if (n.length === 0) return null;
+				let r = new Map(e.options.map((e) => [String(e.value), e.label])), i = n.map((e) => r.get(e) ?? e);
+				return {
+					key: e.key,
+					label: e.label,
+					valueLabel: i.join(", ")
+				};
+			}
+			return null;
+		}).filter((e) => e !== null),
+		removeChip: (e) => {
+			let t = {
+				...u,
+				[e]: ""
+			};
+			m(t), d(t);
+		}
+	};
+}
+function o(e, t) {
+	let n = {};
+	for (let r of e) n[r.key] = t[r.key] ?? "";
+	return n;
+}
+function s(e) {
+	let t = {};
+	for (let n of e) t[n.key] = "";
+	return t;
+}
+function c(e, t) {
+	let n = { ...t };
+	for (let t of e) t.hidden && (n[t.key] = "");
+	return n;
+}
+function l(e, t, n) {
+	for (let r of n) if ((e[r.key] ?? "") !== (t[r.key] ?? "")) return !1;
+	return !0;
+}
+//#endregion
+export { a as useSearchBoxState };

package/dist/components/select/MultiSelect.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs.js"),n=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs.js"),r=require("../../node_modules/lucide-react/dist/esm/icons/search.cjs.js"),i=require("../_shared/form-size-tokens.cjs.js"),a=require("../input/utils.cjs.js"),ee=require("./loading-dots.cjs.js");let o=require("react"),s=require("react/jsx-runtime"),c=require("@floating-ui/react");var te=e=>e.length===0?``:e.map(e=>e.label).join(`, `),ne=e=>e.length===0?``:`${e.length}개 선택`,l=(0,o.forwardRef)(function({options:l,value:u,onChange:d,variant:f,selectSize:p=`medium`,label:m,labelOption:h=`appear`,help:g,placeholder:re=`선택해주세요`,hasError:_=!1,disabled:v=!1,suffix:y,trailingIcon:b,clearable:x=!1,badge:S,searchable:C=!1,searchPlaceholder:ie=`검색...`,onSearchChange:w,isSearchLoading:T=!1,containerProps:ae,containerRef:oe,className:se=``,panelClassName:ce=``,formatTrigger:le=te,formatCollapsed:ue=ne,disableAutoCollapse:E=!1,showSelectAll:de=!1,id:D,name:O,"data-testid":fe},k){let[A,pe]=(0,o.useState)(!1),[j,M]=(0,o.useState)(null),[N,P]=(0,o.useState)(``),[me,F]=(0,o.useState)(!1),I=(0,o.useRef)([]),L=(0,o.useRef)(null),R=(0,o.useRef)(null),z=(0,o.useRef)(null),B=(0,o.useId)(),V=e=>`${B}-opt-${e}`,he=j===null?void 0:V(j),H=typeof w==`function`,U=(0,o.useMemo)(()=>{if(!C||H||N.length===0)return l;let e=N.toLowerCase();return l.filter(t=>t.label.toLowerCase().includes(e))},[l,C,H,N]),W=(0,o.useMemo)(()=>new Set(u),[u]),G=(0,o.useMemo)(()=>l.filter(e=>W.has(String(e.value))),[l,W]),{refs:K,floatingStyles:ge,context:q}=(0,c.useFloating)({open:A,onOpenChange:pe,placement:`bottom-start`,whileElementsMounted:c.autoUpdate,middleware:[(0,c.offset)(4),(0,c.flip)({padding:8}),(0,c.shift)({padding:8}),(0,c.size)({apply({rects:e,elements:t,availableHeight:n}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`,maxHeight:`${Math.min(n,320)}px`})},padding:8})]}),{getReferenceProps:_e,getFloatingProps:ve,getItemProps:ye}=(0,c.useInteractions)([(0,c.useClick)(q,{enabled:!v}),(0,c.useDismiss)(q),(0,c.useRole)(q,{role:`listbox`}),(0,c.useListNavigation)(q,{listRef:I,activeIndex:j,onNavigate:M,virtual:C,loop:!0})]);(0,o.useEffect)(()=>{A||(P(``),M(null),H&&w(``))},[A,H,w]),(0,o.useEffect)(()=>{A&&C&&L.current&&L.current.focus()},[A,C]),(0,o.useLayoutEffect)(()=>{if(E){F(!1);return}let e=R.current,t=z.current;if(!e||!t)return;let n=()=>{let n=t.scrollWidth,r=e.clientWidth;F(n>r-1)};n();let r=new ResizeObserver(()=>{requestAnimationFrame(n)});return r.observe(e),()=>r.disconnect()},[E,u.join(`,`)]);let J=e=>{let t=new Set(W);t.has(e)?t.delete(e):t.add(e),d(l.filter(e=>t.has(String(e.value))).map(e=>String(e.value)))},be=e=>{e.stopPropagation(),d([])},Y=U.filter(e=>!e.disabled).map(e=>String(e.value)),xe=Y.length>0&&Y.every(e=>W.has(e)),Se=()=>{if(xe){let e=new Set(Y);d(u.filter(t=>!e.has(t)))}else{let e=new Set([...u,...Y]);d(l.filter(t=>e.has(String(t.value))).map(e=>String(e.value)))}},Ce=e=>{!x||v||u.length===0||A||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),d([]))},we=e=>{let t=e.target.value;P(t),H&&w(t)},Te=e=>{if(!e.nativeEvent.isComposing&&e.key===`Enter`&&j!==null){e.preventDefault();let t=U[j];t&&!t.disabled&&J(String(t.value))}},X=G.length>0,Ee=h===`sustain`||h===`appear`&&X,De=X?le(G):``,Oe=X?ue(G):``,ke=X?me?Oe:De:re,Ae=i.SLOT_GAP_CLASS[p],Z=i.SLOT_CHILD_ICON_CLASS[p],je=i.SLOT_BADGE_TEXT_CLASS[p],Me=i.SLOT_ICON_SIZE_CLASS[p],Ne=i.CHEVRON_SIZE_CLASS[p],Pe=a.getInputVariantClasses(f,_,v,p),Q=a.getInputTrailingIconColor(_,v,X||A),$=p===`mini`?`text-xs`:p===`large`?`text-base`:`text-sm`,Fe=v?`text-text-disabled`:_?`text-text-danger`:X?`text-text-primary`:`text-text-tertiary`;return(0,s.jsxs)(`div`,{ref:oe,className:a.getInputContainerClasses(),...ae,children:[!E&&X&&(0,s.jsx)(`span`,{ref:z,"aria-hidden":!0,className:`pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap ${$}`,children:De}),Ee&&m&&(0,s.jsx)(`label`,{className:a.getInputLabelClasses(f,_),htmlFor:D,children:m}),(0,s.jsxs)(`button`,{ref:e=>{K.setReference(e),typeof k==`function`?k(e):k&&(k.current=e)},id:D,type:`button`,disabled:v,"aria-haspopup":`listbox`,"aria-expanded":A,"aria-controls":A?B:void 0,"aria-activedescendant":he,"data-testid":fe,..._e({onKeyDown:Ce}),className:`${Pe} flex w-full items-center ${Ae} ${v?`cursor-not-allowed`:`cursor-pointer`} ${se}`.trim().replace(/\s+/g,` `),children:[(0,s.jsx)(`span`,{ref:R,className:`flex-1 truncate text-left ${$} ${Fe}`,children:ke}),y&&(0,s.jsx)(`span`,{className:`shrink-0 whitespace-nowrap ${$} ${Q}`,children:y}),b&&(0,s.jsx)(`span`,{className:`flex shrink-0 items-center ${Q} ${Z}`,children:b}),x&&!v&&X&&(0,s.jsx)(`span`,{role:`button`,tabIndex:-1,onClick:be,"aria-label":`선택 모두 지우기`,className:`flex shrink-0 cursor-pointer items-center ${Q} hover:text-text-primary`,children:(0,s.jsx)(n.CircleX,{className:Me,strokeWidth:1.5,"aria-hidden":!0})}),S&&(0,s.jsx)(`span`,{className:`flex shrink-0 items-center ${Z} ${je}`,children:S}),(0,s.jsx)(t.ChevronDown,{className:`shrink-0 transition-transform ${Ne} ${Q} ${A?`rotate-180`:``}`,strokeWidth:1.5,"aria-hidden":!0})]}),O&&(0,s.jsx)(`input`,{type:`hidden`,name:O,value:u.join(`,`)}),A&&(0,s.jsx)(c.FloatingPortal,{children:(0,s.jsx)(c.FloatingFocusManager,{context:q,modal:!1,initialFocus:C?-1:0,children:(0,s.jsxs)(`div`,{ref:K.setFloating,id:B,style:ge,...ve(),className:`z-9999 overflow-hidden rounded-lg border border-border-tertiary bg-bg-white shadow-lg dark:border-border-secondary dark:bg-neutral-800 ${ce}`,children:[C&&(0,s.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-border-tertiary px-3 py-2 dark:border-border-secondary`,children:[(0,s.jsx)(r.Search,{className:`h-4 w-4 shrink-0 text-icon-tertiary`,"aria-hidden":!0}),(0,s.jsx)(`input`,{ref:L,type:`text`,value:N,onChange:we,onKeyDown:Te,placeholder:ie,className:`flex-1 bg-transparent text-sm outline-hidden placeholder:text-text-tertiary`}),T&&(0,s.jsx)(ee.LoadingDots,{className:`h-4 w-4 shrink-0 text-icon-tertiary`})]}),de&&U.length>0&&(0,s.jsxs)(`button`,{type:`button`,onClick:Se,className:`flex w-full items-center justify-between border-b border-border-tertiary px-3 py-2 text-xs text-text-secondary transition-colors hover:bg-neutral-50 dark:border-border-secondary dark:hover:bg-neutral-700`,children:[(0,s.jsx)(`span`,{children:xe?`전체 해제`:`전체 선택`}),(0,s.jsxs)(`span`,{className:`text-text-tertiary`,children:[Y.length,`개`]})]}),(0,s.jsx)(`div`,{className:`max-h-72 overflow-y-auto py-1`,children:U.length===0?(0,s.jsx)(`div`,{className:`px-3 py-4 text-center text-sm text-text-tertiary`,children:T?`검색 중...`:`옵션이 없어요`}):U.map((t,n)=>{let r=String(t.value),i=W.has(r),a=j===n;return(0,s.jsxs)(`div`,{id:V(n),ref:e=>{I.current[n]=e},role:`option`,"aria-selected":i,"aria-disabled":t.disabled||void 0,tabIndex:a?0:-1,...ye({onClick:()=>{t.disabled||J(r)},onKeyDown:e=>{t.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),J(r))}}),className:`flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors ${t.disabled?`cursor-not-allowed text-text-disabled`:a?`bg-neutral-100 text-text-primary dark:bg-neutral-700`:`text-text-primary hover:bg-neutral-50 dark:hover:bg-neutral-700`}`,children:[(0,s.jsx)(`span`,{className:`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${i?`border-primary-500 bg-primary-500 text-white`:`border-border-tertiary dark:border-border-secondary`}`,"aria-hidden":!0,children:i&&(0,s.jsx)(e.Check,{className:`h-3 w-3`,strokeWidth:3})}),(0,s.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,s.jsx)(`div`,{className:`truncate ${i?`font-medium`:``}`,children:t.label}),t.description&&(0,s.jsx)(`div`,{className:`mt-0.5 truncate text-xs text-text-tertiary`,children:t.description})]}),t.trailing&&(0,s.jsx)(`span`,{className:`shrink-0 text-xs text-text-tertiary`,children:t.trailing})]},r)})})]})})}),g&&(0,s.jsx)(`div`,{className:a.getInputHelpClasses(_),children:g})]})});exports.MultiSelect=l;