@thewrong/ui 0.3.0 → 0.4.0

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

@@ -7,32 +7,32 @@ import { CHEVRON_SIZE_CLASS as a, CONTROL_TEXT_CLASS as o, SLOT_BADGE_TEXT_CLASS
 import { getInputContainerClasses as ie, getInputHelpClasses as ae, getInputLabelClasses as oe, getInputTrailingIconColor as se, getInputVariantClasses as ce } from "../input/utils.esm.js";
 import { LoadingDots as le } from "./loading-dots.esm.js";
 import { computeSelectPanelMaxWidth as ue } from "./panel-width.esm.js";
-import { forwardRef as s, useEffect as c, useId as l, useLayoutEffect as de, useMemo as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { FloatingFocusManager as fe, FloatingPortal as pe, autoUpdate as me, flip as he, offset as ge, shift as _e, size as ve, useClick as ye, useDismiss as be, useFloating as xe, useInteractions as Se, useListNavigation as Ce, useRole as we } from "@floating-ui/react";
+import { forwardRef as s, useEffect as c, useId as de, useLayoutEffect as fe, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { FloatingFocusManager as pe, FloatingPortal as me, autoUpdate as he, flip as ge, offset as _e, shift as ve, size as ye, useClick as be, useDismiss as xe, useFloating as Se, useInteractions as Ce, useListNavigation as we, useRole as Te } from "@floating-ui/react";
 //#region src/components/select/MultiSelect.tsx
-var Te = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), Ee = (e) => e.length === 0 ? "" : `${e.length}개 선택`, h = s(function({ options: s, value: h, onChange: g, variant: De, selectSize: _ = "medium", label: v, labelOption: y = "appear", help: b, placeholder: Oe = "선택해주세요", hasError: x = !1, disabled: S = !1, suffix: C, trailingIcon: w, clearable: T = !1, badge: E, searchable: D = !1, searchPlaceholder: ke = "검색...", onSearchChange: O, isSearchLoading: k = !1, containerProps: Ae, containerRef: je, className: Me = "", panelClassName: Ne = "", formatTrigger: Pe = Te, formatCollapsed: Fe = Ee, disableAutoCollapse: A = !1, showSelectAll: Ie = !1, id: Le, name: j, "data-testid": Re }, M) {
-	let [N, ze] = f(!1), [P, F] = f(null), [I, L] = f(""), [Be, R] = f(!1), Ve = d([]), z = d(null), B = d(null), He = d(null), Ue = d(null), V = l(), We = l(), Ge = Le ?? We, Ke = (e) => `${V}-opt-${e}`, qe = P === null ? void 0 : Ke(P), Je = typeof O == "function", H = d(O);
-	H.current = O;
-	let U = u(() => {
-		if (!D || Je || I.length === 0) return s;
-		let e = I.toLowerCase();
+var Ee = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), De = (e) => e.length === 0 ? "" : `${e.length}개 선택`, m = s(function({ options: s, value: m, onChange: h, variant: Oe, selectSize: g = "medium", label: _, "aria-label": ke, "aria-labelledby": Ae, labelOption: v = "appear", help: y, placeholder: je = "선택해주세요", hasError: b = !1, disabled: x = !1, suffix: Me, trailingIcon: Ne, clearable: S = !1, badge: C, searchable: w = !1, searchPlaceholder: Pe = "검색...", onSearchChange: T, isSearchLoading: E = !1, containerProps: Fe, containerRef: Ie, className: Le = "", panelClassName: Re = "", formatTrigger: ze = Ee, formatCollapsed: Be = De, disableAutoCollapse: D = !1, showSelectAll: Ve = !1, id: He, name: O, "data-testid": Ue }, k) {
+	let [A, We] = d(!1), [j, M] = d(null), [N, P] = d(""), [Ge, Ke] = d(!1), qe = u([]), F = u(null), I = u(null), L = u(null), R = u(null), z = de(), Je = de(), B = He ?? Je, V = (e) => `${z}-opt-${e}`, Ye = j === null ? void 0 : V(j), H = typeof T == "function", U = u(T);
+	U.current = T;
+	let W = l(() => {
+		if (!w || H || N.length === 0) return s;
+		let e = N.toLowerCase();
 		return s.filter((t) => t.label.toLowerCase().includes(e));
 	}, [
 		s,
-		D,
-		Je,
-		I
-	]), W = u(() => new Set(h), [h]), G = u(() => s.filter((e) => W.has(String(e.value))), [s, W]), { refs: Ye, floatingStyles: Xe, context: K } = xe({
-		open: N,
-		onOpenChange: ze,
+		w,
+		H,
+		N
+	]), G = l(() => new Set(m), [m]), K = l(() => s.filter((e) => G.has(String(e.value))), [s, G]), { refs: q, floatingStyles: Xe, context: J } = Se({
+		open: A,
+		onOpenChange: We,
 		placement: "bottom-start",
-		whileElementsMounted: me,
+		whileElementsMounted: he,
 		middleware: [
-			ge(4),
-			he({ padding: 8 }),
-			_e({ padding: 8 }),
-			ve({
+			_e(4),
+			ge({ padding: 8 }),
+			ve({ padding: 8 }),
+			ye({
 				apply({ rects: e, elements: t, availableHeight: n, availableWidth: r }) {
 					Object.assign(t.floating.style, {
 						minWidth: `${e.reference.width}px`,
@@ -43,187 +43,189 @@ var Te = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), Ee = (e)
 				padding: 8
 			})
 		]
-	}), { getReferenceProps: Ze, getFloatingProps: Qe, getItemProps: $e } = Se([
-		ye(K, { enabled: !S }),
-		be(K),
-		we(K, { role: "listbox" }),
-		Ce(K, {
-			listRef: Ve,
-			activeIndex: P,
-			onNavigate: F,
-			virtual: D,
+	}), { getReferenceProps: Ze, getFloatingProps: Qe, getItemProps: $e } = Ce([
+		be(J, { enabled: !x }),
+		xe(J),
+		Te(J, { role: "listbox" }),
+		we(J, {
+			listRef: qe,
+			activeIndex: j,
+			onNavigate: M,
+			virtual: w,
 			loop: !0
 		})
-	]), et = d(!1);
+	]), et = u(!1);
 	c(() => {
-		N ? et.current = !0 : (L(""), F(null), et.current && H.current?.(""));
-	}, [N]), c(() => {
-		N && D && z.current && z.current.focus();
-	}, [N, D]), de(() => {
-		if (A) {
-			R(!1);
+		A ? et.current = !0 : (P(""), M(null), et.current && U.current?.(""));
+	}, [A]), c(() => {
+		A && w && F.current && F.current.focus();
+	}, [A, w]), fe(() => {
+		if (D) {
+			Ke(!1);
 			return;
 		}
-		let e = He.current, t = Ue.current;
+		let e = L.current, t = R.current;
 		if (!e || !t) return;
 		let n = () => {
 			let n = t.scrollWidth, r = e.clientWidth;
-			R(n > r - 1);
+			Ke(n > r - 1);
 		};
 		n();
 		let r = new ResizeObserver(() => {
 			requestAnimationFrame(n);
 		});
 		return r.observe(e), () => r.disconnect();
-	}, [A, h.join(",")]);
-	let q = (e) => {
-		let t = new Set(W);
-		t.has(e) ? t.delete(e) : t.add(e), g(s.filter((e) => t.has(String(e.value))).map((e) => String(e.value)));
+	}, [D, m.join(",")]);
+	let Y = (e) => {
+		let t = new Set(G);
+		t.has(e) ? t.delete(e) : t.add(e), h(s.filter((e) => t.has(String(e.value))).map((e) => String(e.value)));
 	}, tt = (e) => {
-		e.stopPropagation(), g([]);
-	}, J = U.filter((e) => !e.disabled).map((e) => String(e.value)), Y = J.length > 0 && J.every((e) => W.has(e)), nt = () => {
-		if (Y) {
-			let e = new Set(J);
-			g(h.filter((t) => !e.has(t)));
+		e.stopPropagation(), h([]);
+	}, X = W.filter((e) => !e.disabled).map((e) => String(e.value)), nt = X.length > 0 && X.every((e) => G.has(e)), rt = () => {
+		if (nt) {
+			let e = new Set(X);
+			h(m.filter((t) => !e.has(t)));
 		} else {
-			let e = new Set([...h, ...J]);
-			g(s.filter((t) => e.has(String(t.value))).map((e) => String(e.value)));
+			let e = new Set([...m, ...X]);
+			h(s.filter((t) => e.has(String(t.value))).map((e) => String(e.value)));
 		}
-	}, rt = (e) => {
-		!T || S || h.length === 0 || N || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), g([]));
 	}, it = (e) => {
-		let t = e.target.value;
-		t !== I && (B.current && (B.current.scrollTop = 0), F(null)), L(t), H.current?.(t);
+		!S || x || m.length === 0 || A || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), h([]));
 	}, at = (e) => {
-		if (!e.nativeEvent.isComposing && e.key === "Enter" && P !== null) {
+		let t = e.target.value;
+		t !== N && (I.current && (I.current.scrollTop = 0), M(null)), P(t), U.current?.(t);
+	}, ot = (e) => {
+		if (!e.nativeEvent.isComposing && e.key === "Enter" && j !== null) {
 			e.preventDefault();
-			let t = U[P];
-			t && !t.disabled && q(String(t.value));
+			let t = W[j];
+			t && !t.disabled && Y(String(t.value));
 		}
-	}, X = G.length > 0, ot = y === "sustain" || y === "appear" && X, st = X ? Pe(G) : "", ct = X ? Fe(G) : "", lt = X ? Be ? ct : st : Oe, ut = ne[_], Z = te[_], dt = ee[_], ft = re[_], pt = a[_], mt = ce(De, x, S, _), Q = se(x, S, X || N), $ = o[_], ht = S ? "text-fg-disabled" : x ? "text-fg-danger" : X ? "text-fg-default" : "text-fg-subtle";
-	return /* @__PURE__ */ m("div", {
-		ref: je,
+	}, Z = K.length > 0, st = v === "sustain" || v === "appear" && Z, ct = Z ? ze(K) : "", lt = Z ? Be(K) : "", ut = Z ? Ge ? lt : ct : je, dt = ne[g], ft = te[g], pt = ee[g], mt = re[g], ht = a[g], gt = ce(Oe, b, x, g), Q = se(b, x, Z || A), $ = o[g], _t = x ? "text-fg-disabled" : b ? "text-fg-danger" : Z ? "text-fg-default" : "text-fg-subtle";
+	return /* @__PURE__ */ p("div", {
+		ref: Ie,
 		className: e(ie(), "min-w-0"),
-		...Ae,
+		...Fe,
 		children: [
-			!A && X && /* @__PURE__ */ p("span", {
-				ref: Ue,
+			!D && Z && /* @__PURE__ */ f("span", {
+				ref: R,
 				"aria-hidden": !0,
 				className: e("pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap", $),
-				children: st
+				children: ct
 			}),
-			ot && v && /* @__PURE__ */ p("label", {
-				className: oe(De, x),
-				htmlFor: Ge,
-				children: v
+			st && _ && /* @__PURE__ */ f("label", {
+				className: oe(Oe, b),
+				htmlFor: B,
+				children: _
 			}),
-			/* @__PURE__ */ m("button", {
+			/* @__PURE__ */ p("button", {
 				ref: (e) => {
-					Ye.setReference(e), typeof M == "function" ? M(e) : M && (M.current = e);
+					q.setReference(e), typeof k == "function" ? k(e) : k && (k.current = e);
 				},
-				id: Ge,
+				id: B,
 				type: "button",
-				disabled: S,
+				disabled: x,
 				"aria-haspopup": "listbox",
-				"aria-expanded": N,
-				"aria-controls": N ? V : void 0,
-				"aria-activedescendant": qe,
-				"data-testid": Re,
-				...Ze({ onKeyDown: rt }),
-				className: e(mt, "flex w-full min-w-0 items-center", ut, S ? "cursor-not-allowed" : "cursor-pointer", Me),
+				"aria-expanded": A,
+				"aria-controls": A ? z : void 0,
+				"aria-activedescendant": Ye,
+				"data-testid": Ue,
+				...Ze({ onKeyDown: it }),
+				"aria-label": ke,
+				"aria-labelledby": Ae,
+				className: e(gt, "flex w-full min-w-0 items-center", dt, x ? "cursor-not-allowed" : "cursor-pointer", Le),
 				children: [
-					/* @__PURE__ */ p("span", {
-						ref: He,
-						className: e("min-w-0 flex-1 truncate text-left", $, ht),
-						children: lt
+					/* @__PURE__ */ f("span", {
+						ref: L,
+						className: e("min-w-0 flex-1 truncate text-left", $, _t),
+						children: ut
 					}),
-					C && /* @__PURE__ */ p("span", {
+					Me && /* @__PURE__ */ f("span", {
 						className: e("shrink-0 whitespace-nowrap", $, Q),
-						children: C
+						children: Me
 					}),
-					w && /* @__PURE__ */ p("span", {
-						className: e("flex shrink-0 items-center", Q, Z),
-						children: w
+					Ne && /* @__PURE__ */ f("span", {
+						className: e("flex shrink-0 items-center", Q, ft),
+						children: Ne
 					}),
-					T && !S && X && /* @__PURE__ */ p("span", {
+					S && !x && Z && /* @__PURE__ */ f("span", {
 						role: "button",
 						tabIndex: -1,
 						onClick: tt,
 						"aria-label": "선택 모두 지우기",
 						className: e("flex shrink-0 cursor-pointer items-center", Q, "hover:text-fg-default"),
-						children: /* @__PURE__ */ p(r, {
-							className: ft,
+						children: /* @__PURE__ */ f(r, {
+							className: mt,
 							strokeWidth: 1.5,
 							"aria-hidden": !0
 						})
 					}),
-					E && /* @__PURE__ */ p("span", {
-						className: e("flex shrink-0 items-center", Z, dt),
-						children: E
+					C && /* @__PURE__ */ f("span", {
+						className: e("flex shrink-0 items-center", ft, pt),
+						children: C
 					}),
-					/* @__PURE__ */ p(n, {
-						className: e("shrink-0 transition-transform", pt, Q, N && "rotate-180"),
+					/* @__PURE__ */ f(n, {
+						className: e("shrink-0 transition-transform", ht, Q, A && "rotate-180"),
 						strokeWidth: 1.5,
 						"aria-hidden": !0
 					})
 				]
 			}),
-			j && /* @__PURE__ */ p("input", {
+			O && /* @__PURE__ */ f("input", {
 				type: "hidden",
-				name: j,
-				value: h.join(",")
+				name: O,
+				value: m.join(",")
 			}),
-			N && /* @__PURE__ */ p(pe, { children: /* @__PURE__ */ p(fe, {
-				context: K,
+			A && /* @__PURE__ */ f(me, { children: /* @__PURE__ */ f(pe, {
+				context: J,
 				modal: !1,
-				initialFocus: D ? -1 : 0,
-				children: /* @__PURE__ */ m("div", {
-					ref: Ye.setFloating,
-					id: V,
+				initialFocus: w ? -1 : 0,
+				children: /* @__PURE__ */ p("div", {
+					ref: q.setFloating,
+					id: z,
 					style: Xe,
 					...Qe(),
-					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface text-fg-default shadow-overlay", Ne),
+					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface text-fg-default shadow-overlay", Re),
 					children: [
-						D && /* @__PURE__ */ m("div", {
+						w && /* @__PURE__ */ p("div", {
 							className: "flex items-center gap-2 border-b border-border-subtle px-3 py-2",
 							children: [
-								/* @__PURE__ */ p(i, {
+								/* @__PURE__ */ f(i, {
 									className: "h-4 w-4 shrink-0 text-fg-subtle",
 									"aria-hidden": !0
 								}),
-								/* @__PURE__ */ p("input", {
-									ref: z,
+								/* @__PURE__ */ f("input", {
+									ref: F,
 									type: "text",
-									value: I,
-									onChange: it,
-									onKeyDown: at,
-									placeholder: ke,
+									value: N,
+									onChange: at,
+									onKeyDown: ot,
+									placeholder: Pe,
 									className: "flex-1 bg-transparent text-sm outline-hidden placeholder:text-fg-subtle"
 								}),
-								k && /* @__PURE__ */ p(le, { className: "h-4 w-4 shrink-0 text-fg-subtle" })
+								E && /* @__PURE__ */ f(le, { className: "h-4 w-4 shrink-0 text-fg-subtle" })
 							]
 						}),
-						Ie && U.length > 0 && /* @__PURE__ */ m("button", {
+						Ve && W.length > 0 && /* @__PURE__ */ p("button", {
 							type: "button",
-							onClick: nt,
+							onClick: rt,
 							className: "flex w-full items-center justify-between border-b border-border-subtle px-3 py-2 text-xs text-fg-muted transition-colors hover:bg-bg-subtle",
-							children: [/* @__PURE__ */ p("span", { children: Y ? "전체 해제" : "전체 선택" }), /* @__PURE__ */ m("span", {
+							children: [/* @__PURE__ */ f("span", { children: nt ? "전체 해제" : "전체 선택" }), /* @__PURE__ */ p("span", {
 								className: "text-fg-subtle",
-								children: [J.length, "개"]
+								children: [X.length, "개"]
 							})]
 						}),
-						/* @__PURE__ */ p("div", {
-							ref: B,
+						/* @__PURE__ */ f("div", {
+							ref: I,
 							className: "max-h-72 overflow-y-auto py-1",
-							children: U.length === 0 ? /* @__PURE__ */ p("div", {
+							children: W.length === 0 ? /* @__PURE__ */ f("div", {
 								className: "px-3 py-4 text-center text-sm text-fg-subtle",
-								children: k ? "검색 중..." : "옵션이 없어요"
-							}) : U.map((n, r) => {
-								let i = String(n.value), a = W.has(i), o = P === r;
-								return /* @__PURE__ */ m("div", {
-									id: Ke(r),
+								children: E ? "검색 중..." : "옵션이 없어요"
+							}) : W.map((n, r) => {
+								let i = String(n.value), a = G.has(i), o = j === r;
+								return /* @__PURE__ */ p("div", {
+									id: V(r),
 									ref: (e) => {
-										Ve.current[r] = e;
+										qe.current[r] = e;
 									},
 									role: "option",
 									"aria-selected": a,
@@ -231,33 +233,33 @@ var Te = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), Ee = (e)
 									tabIndex: o ? 0 : -1,
 									...$e({
 										onClick: () => {
-											n.disabled || q(i);
+											n.disabled || Y(i);
 										},
 										onKeyDown: (e) => {
-											n.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q(i));
+											n.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), Y(i));
 										}
 									}),
 									className: e("flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors", n.disabled ? "cursor-not-allowed text-fg-disabled" : o ? "bg-bg-subtle text-fg-default" : "text-fg-default hover:bg-bg-subtle"),
 									children: [
-										/* @__PURE__ */ p("span", {
+										/* @__PURE__ */ f("span", {
 											className: e("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-checkbox border", a ? "border-primary bg-primary text-fg-inverse" : "border-border-subtle"),
 											"aria-hidden": !0,
-											children: a && /* @__PURE__ */ p(t, {
+											children: a && /* @__PURE__ */ f(t, {
 												className: "h-3 w-3",
 												strokeWidth: 3
 											})
 										}),
-										/* @__PURE__ */ m("div", {
+										/* @__PURE__ */ p("div", {
 											className: "min-w-0 flex-1",
-											children: [/* @__PURE__ */ p("div", {
+											children: [/* @__PURE__ */ f("div", {
 												className: e("truncate", a && "font-medium"),
 												children: n.label
-											}), n.description && /* @__PURE__ */ p("div", {
+											}), n.description && /* @__PURE__ */ f("div", {
 												className: "mt-0.5 truncate text-xs text-fg-subtle",
 												children: n.description
 											})]
 										}),
-										n.trailing && /* @__PURE__ */ p("span", {
+										n.trailing && /* @__PURE__ */ f("span", {
 											className: "shrink-0 text-xs text-fg-subtle",
 											children: n.trailing
 										})
@@ -268,12 +270,12 @@ var Te = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), Ee = (e)
 					]
 				})
 			}) }),
-			b && /* @__PURE__ */ p("div", {
-				className: ae(x),
-				children: b
+			y && /* @__PURE__ */ f("div", {
+				className: ae(b),
+				children: y
 			})
 		]
 	});
 });
 //#endregion
-export { h as MultiSelect };
+export { m as MultiSelect };

package/dist/components/select/Select.cjs

@@ -1 +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/circle-x.cjs"),r=require("../_shared/form-size-tokens.cjs"),i=require("../input/utils.cjs"),ee=require("../../node_modules/use-debounce/dist/index.module.cjs"),te=require("./loading-dots.cjs"),ne=require("./panel-width.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("@floating-ui/react");var c=(0,a.forwardRef)(function({options:c,value:l,onChange:u,variant:d,selectSize:f=`medium`,label:re,labelOption:ie=`appear`,help:ae,placeholder:oe=`선택해주세요`,hasError:p=!1,disabled:m=!1,suffix:h,trailingIcon:g,clearable:_=!1,badge:v,searchable:y=!1,searchPlaceholder:se=`검색...`,onSearchChange:b,isSearchLoading:x=!1,containerProps:ce,containerRef:le,className:ue=``,panelClassName:de=``,id:fe,name:S,onLoadMore:C,hasMore:w=!1,searchDebounceMs:T=300,openOnFocus:pe=!1,validateSearchQuery:me,open:he,onOpenChange:ge,"data-testid":_e},E){let[ve,ye]=(0,a.useState)(!1),D=he??ve,O=e=>{he===void 0&&ye(e),ge?.(e)},[k,A]=(0,a.useState)(null),[j,M]=(0,a.useState)(``),N=(0,a.useRef)([]),P=(0,a.useRef)(null),[F,be]=(0,a.useState)(null),[I,xe]=(0,a.useState)(null),L=(0,a.useId)(),Se=(0,a.useId)(),R=fe??Se,Ce=e=>`${L}-opt-${e}`,we=k===null?void 0:Ce(k),z=typeof b==`function`,B=(0,a.useRef)(b);B.current=b;let V=T===!1||T<=0?0:T,Te=ee.c(e=>{B.current?.(e)},V),H=(e,t)=>{z&&(t||V===0?(Te.cancel(),B.current?.(e)):Te(e))},U=c.find(e=>String(e.value)===l),Ee=(0,a.useRef)(U?.label??``);Ee.current=U?.label??``;let De=(0,a.useRef)(H);De.current=H;let Oe=y&&(U!==void 0&&j===U.label||U===void 0&&l!==``&&j!==``),W=(0,a.useMemo)(()=>{if(!y||z||j.length===0||Oe)return c;let e=j.toLowerCase();return c.filter(t=>t.label.toLowerCase().includes(e))},[c,y,z,j,Oe]),{refs:G,floatingStyles:ke,context:K}=(0,s.useFloating)({open:D,onOpenChange:O,placement:`bottom-start`,whileElementsMounted:s.autoUpdate,middleware:[(0,s.offset)(4),(0,s.flip)({padding:8}),(0,s.shift)({padding:8}),(0,s.size)({apply({rects:e,elements:t,availableHeight:n,availableWidth:r}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`,maxWidth:`${ne.computeSelectPanelMaxWidth(e.reference.width,r)}px`,maxHeight:`${Math.min(n,320)}px`})},padding:8})]}),{getReferenceProps:Ae,getFloatingProps:je,getItemProps:Me}=(0,s.useInteractions)([(0,s.useClick)(K,{enabled:!m&&!y}),(0,s.useDismiss)(K),(0,s.useRole)(K,{role:`listbox`}),(0,s.useListNavigation)(K,{listRef:N,activeIndex:k,onNavigate:A,virtual:y,loop:!0}),(0,s.useTypeahead)(K,{listRef:{current:W.map(e=>e.label)},activeIndex:k,onMatch:A,enabled:!y})]),Ne=(0,a.useRef)(!1);(0,a.useEffect)(()=>{if(D){if(Ne.current=!0,y){let e=Ee.current;M(e),e!==``&&requestAnimationFrame(()=>{P.current?.select()})}}else M(``),A(null),Ne.current&&De.current(``,!0)},[D,y,z]),(0,a.useEffect)(()=>{if(!D||!C||!w||!F||!I)return;let e=new IntersectionObserver(e=>{for(let t of e)t.isIntersecting&&!x&&C()},{root:I,rootMargin:`0px 0px 80px 0px`});return e.observe(F),()=>e.disconnect()},[D,C,w,x,F,I]);let q=e=>{u(e),O(!1)},Pe=e=>{e.stopPropagation(),u(``),M(``)},Fe=e=>{y||!_||m||!J||D||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),u(``))},Ie=e=>{let t=e.target.value;me&&!me(t)||(t!==j&&(I&&(I.scrollTop=0),A(null)),M(t),H(t,!1),D||O(!0))},Le=e=>{if(!e.nativeEvent.isComposing){if(e.key===`Enter`&&k!==null){e.preventDefault();let t=W[k];t&&!t.disabled&&q(String(t.value));return}(e.key===`Backspace`||e.key===`Delete`)&&U&&(!D||j===``)&&(e.preventDefault(),u(``))}},Re=ie===`sustain`||ie===`appear`&&!!U,J=!!U,ze=U?U.label:oe,Be=D?j:U?.label??``,Ve=r.SLOT_GAP_CLASS[f],Y=r.SLOT_CHILD_ICON_CLASS[f],He=r.SLOT_BADGE_TEXT_CLASS[f],X=r.SLOT_ICON_SIZE_CLASS[f],Ue=r.CHEVRON_SIZE_CLASS[f],We=i.getInputVariantClasses(d,p,m,f),Z=i.getInputTrailingIconColor(p,m,J||D),Q=r.CONTROL_TEXT_CLASS[f],$=m?`text-fg-disabled`:p?`text-fg-danger`:J?`text-fg-default`:`text-fg-subtle`;return(0,o.jsxs)(`div`,{ref:le,className:e.cn(i.getInputContainerClasses(),`min-w-0`),...ce,children:[Re&&re&&(0,o.jsx)(`label`,{className:i.getInputLabelClasses(d,p),htmlFor:R,children:re}),y?(0,o.jsxs)(`div`,{ref:e=>{G.setReference(e)},...Ae({onClick:()=>{m||(P.current?.focus(),D||O(!0))}}),className:e.cn(We,`flex w-full min-w-0 items-center`,Ve,d!==`box`&&`focus-within:border-primary`,d!==`box`&&d!==`line`&&`focus-within:ring-control focus-within:ring-primary`,m?`cursor-not-allowed`:`cursor-text`,ue),children:[(0,o.jsx)(`input`,{ref:e=>{P.current=e,typeof E==`function`?E(e):E&&(E.current=e)},id:R,type:`text`,role:`combobox`,readOnly:!D,disabled:m,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-controls":D?L:void 0,"aria-activedescendant":we,"aria-autocomplete":`list`,"data-testid":_e,value:Be,placeholder:U?se:oe,onChange:Ie,onKeyDown:Le,onFocus:()=>{pe&&!m&&!D&&O(!0)},className:e.cn(`min-w-0 flex-1 truncate bg-transparent text-left outline-hidden placeholder:text-fg-subtle`,Q,$,m&&`cursor-not-allowed`)}),h&&(0,o.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,Q,Z),children:h}),g&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Y),children:g}),x&&(0,o.jsx)(te.LoadingDots,{className:e.cn(`shrink-0 text-fg-subtle`,X)}),_&&!m&&J&&(0,o.jsx)(`button`,{type:`button`,tabIndex:-1,onClick:Pe,"aria-label":`선택 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center rounded`,Z,`hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring`),children:(0,o.jsx)(n.CircleX,{className:X,strokeWidth:1.5,"aria-hidden":!0})}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Y,He),children:v}),(0,o.jsx)(t.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Ue,Z,D&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}):(0,o.jsxs)(`button`,{ref:e=>{G.setReference(e),typeof E==`function`?E(e):E&&(E.current=e)},id:R,type:`button`,disabled:m,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-controls":D?L:void 0,"aria-activedescendant":we,"data-testid":_e,...Ae({onKeyDown:Fe}),className:e.cn(We,`flex w-full min-w-0 items-center`,Ve,m?`cursor-not-allowed`:`cursor-pointer`,ue),children:[(0,o.jsx)(`span`,{className:e.cn(`min-w-0 flex-1 truncate text-left`,Q,$),children:ze}),h&&(0,o.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,Q,Z),children:h}),g&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Y),children:g}),_&&!m&&J&&(0,o.jsx)(`span`,{role:`button`,tabIndex:-1,onClick:Pe,"aria-label":`선택 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center`,Z,`hover:text-fg-default`),children:(0,o.jsx)(n.CircleX,{className:X,strokeWidth:1.5,"aria-hidden":!0})}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Y,He),children:v}),(0,o.jsx)(t.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Ue,Z,D&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}),S&&(0,o.jsx)(`input`,{type:`hidden`,name:S,value:l}),D&&(0,o.jsx)(s.FloatingPortal,{children:(0,o.jsx)(s.FloatingFocusManager,{context:K,modal:!1,initialFocus:y?-1:0,children:(0,o.jsx)(`div`,{ref:G.setFloating,id:L,style:ke,...je(),className:e.cn(`z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface shadow-overlay`,de),children:(0,o.jsxs)(`div`,{ref:xe,className:`max-h-72 overflow-y-auto py-1`,children:[W.length===0?(0,o.jsx)(`div`,{className:`px-3 py-4 text-center text-sm text-fg-subtle`,children:x?`검색 중...`:`옵션이 없어요`}):W.map((t,n)=>{let r=String(t.value)===l,i=k===n;return(0,o.jsxs)(`div`,{id:Ce(n),ref:e=>{N.current[n]=e},role:`option`,"aria-selected":r,"aria-disabled":t.disabled||void 0,tabIndex:i?0:-1,...Me({onClick:()=>{t.disabled||q(String(t.value))},onKeyDown:e=>{t.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),q(String(t.value)))}}),className:e.cn(`flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors`,t.disabled?`cursor-not-allowed text-fg-disabled`:r?e.cn(`font-medium text-primary-fg`,i?`bg-primary-subtle`:`bg-primary-subtle/60 hover:bg-primary-subtle/80`):i?`bg-bg-subtle text-fg-default`:`text-fg-default hover:bg-bg-subtle`),children:[(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`div`,{className:`truncate`,children:t.label}),t.description&&(0,o.jsx)(`div`,{className:`mt-0.5 truncate text-xs text-fg-subtle`,children:t.description})]}),t.trailing&&(0,o.jsx)(`span`,{className:`shrink-0 text-xs text-fg-subtle`,children:t.trailing})]},String(t.value))}),C&&w&&(0,o.jsx)(`div`,{ref:be,"aria-hidden":!0,className:`flex items-center justify-center px-3 py-3 text-fg-subtle`,children:x&&(0,o.jsx)(te.LoadingDots,{})})]})})})}),ae&&(0,o.jsx)(`div`,{className:i.getInputHelpClasses(p),children:ae})]})});exports.Select=c;
+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/circle-x.cjs"),r=require("../_shared/form-size-tokens.cjs"),i=require("../input/utils.cjs"),ee=require("../../node_modules/use-debounce/dist/index.module.cjs"),te=require("./loading-dots.cjs"),ne=require("./panel-width.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("@floating-ui/react");var c=(0,a.forwardRef)(function({options:c,value:l,onChange:u,variant:d,selectSize:f=`medium`,label:re,"aria-label":ie,"aria-labelledby":ae,labelOption:oe=`appear`,help:p,placeholder:m=`선택해주세요`,hasError:h=!1,disabled:g=!1,suffix:_,trailingIcon:v,clearable:y=!1,badge:b,searchable:x=!1,searchPlaceholder:se=`검색...`,onSearchChange:S,isSearchLoading:C=!1,containerProps:ce,containerRef:le,className:ue=``,panelClassName:de=``,id:fe,name:pe,onLoadMore:w,hasMore:T=!1,searchDebounceMs:E=300,openOnFocus:me=!1,validateSearchQuery:he,open:ge,onOpenChange:_e,"data-testid":ve},D){let[ye,be]=(0,a.useState)(!1),O=ge??ye,k=e=>{ge===void 0&&be(e),_e?.(e)},[A,j]=(0,a.useState)(null),[M,N]=(0,a.useState)(``),P=(0,a.useRef)([]),F=(0,a.useRef)(null),[I,xe]=(0,a.useState)(null),[L,Se]=(0,a.useState)(null),R=(0,a.useId)(),Ce=(0,a.useId)(),z=fe??Ce,we=e=>`${R}-opt-${e}`,Te=A===null?void 0:we(A),B=typeof S==`function`,V=(0,a.useRef)(S);V.current=S;let Ee=E===!1||E<=0?0:E,De=ee.c(e=>{V.current?.(e)},Ee),H=(e,t)=>{B&&(t||Ee===0?(De.cancel(),V.current?.(e)):De(e))},U=c.find(e=>String(e.value)===l),Oe=(0,a.useRef)(U?.label??``);Oe.current=U?.label??``;let ke=(0,a.useRef)(H);ke.current=H;let Ae=x&&(U!==void 0&&M===U.label||U===void 0&&l!==``&&M!==``),W=(0,a.useMemo)(()=>{if(!x||B||M.length===0||Ae)return c;let e=M.toLowerCase();return c.filter(t=>t.label.toLowerCase().includes(e))},[c,x,B,M,Ae]),{refs:G,floatingStyles:je,context:K}=(0,s.useFloating)({open:O,onOpenChange:k,placement:`bottom-start`,whileElementsMounted:s.autoUpdate,middleware:[(0,s.offset)(4),(0,s.flip)({padding:8}),(0,s.shift)({padding:8}),(0,s.size)({apply({rects:e,elements:t,availableHeight:n,availableWidth:r}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`,maxWidth:`${ne.computeSelectPanelMaxWidth(e.reference.width,r)}px`,maxHeight:`${Math.min(n,320)}px`})},padding:8})]}),{getReferenceProps:Me,getFloatingProps:Ne,getItemProps:Pe}=(0,s.useInteractions)([(0,s.useClick)(K,{enabled:!g&&!x}),(0,s.useDismiss)(K),(0,s.useRole)(K,{role:`listbox`}),(0,s.useListNavigation)(K,{listRef:P,activeIndex:A,onNavigate:j,virtual:x,loop:!0}),(0,s.useTypeahead)(K,{listRef:{current:W.map(e=>e.label)},activeIndex:A,onMatch:j,enabled:!x})]),Fe=(0,a.useRef)(!1);(0,a.useEffect)(()=>{if(O){if(Fe.current=!0,x){let e=Oe.current;N(e),e!==``&&requestAnimationFrame(()=>{F.current?.select()})}}else N(``),j(null),Fe.current&&ke.current(``,!0)},[O,x,B]),(0,a.useEffect)(()=>{if(!O||!w||!T||!I||!L)return;let e=new IntersectionObserver(e=>{for(let t of e)t.isIntersecting&&!C&&w()},{root:L,rootMargin:`0px 0px 80px 0px`});return e.observe(I),()=>e.disconnect()},[O,w,T,C,I,L]);let q=e=>{u(e),k(!1)},Ie=e=>{e.stopPropagation(),u(``),N(``)},Le=e=>{x||!y||g||!J||O||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),u(``))},Re=e=>{let t=e.target.value;he&&!he(t)||(t!==M&&(L&&(L.scrollTop=0),j(null)),N(t),H(t,!1),O||k(!0))},ze=e=>{if(!e.nativeEvent.isComposing){if(e.key===`Enter`&&A!==null){e.preventDefault();let t=W[A];t&&!t.disabled&&q(String(t.value));return}(e.key===`Backspace`||e.key===`Delete`)&&U&&(!O||M===``)&&(e.preventDefault(),u(``))}},Be=oe===`sustain`||oe===`appear`&&!!U,J=!!U,Ve=U?U.label:m,He=O?M:U?.label??``,Ue=r.SLOT_GAP_CLASS[f],Y=r.SLOT_CHILD_ICON_CLASS[f],We=r.SLOT_BADGE_TEXT_CLASS[f],X=r.SLOT_ICON_SIZE_CLASS[f],Ge=r.CHEVRON_SIZE_CLASS[f],Ke=i.getInputVariantClasses(d,h,g,f),Z=i.getInputTrailingIconColor(h,g,J||O),Q=r.CONTROL_TEXT_CLASS[f],$=g?`text-fg-disabled`:h?`text-fg-danger`:J?`text-fg-default`:`text-fg-subtle`;return(0,o.jsxs)(`div`,{ref:le,className:e.cn(i.getInputContainerClasses(),`min-w-0`),...ce,children:[Be&&re&&(0,o.jsx)(`label`,{className:i.getInputLabelClasses(d,h),htmlFor:z,children:re}),x?(0,o.jsxs)(`div`,{ref:e=>{G.setReference(e)},...Me({onClick:()=>{g||(F.current?.focus(),O||k(!0))}}),role:`presentation`,"aria-expanded":void 0,"aria-controls":void 0,"aria-haspopup":void 0,className:e.cn(Ke,`flex w-full min-w-0 items-center`,Ue,d!==`box`&&`focus-within:border-primary`,d!==`box`&&d!==`line`&&`focus-within:ring-control focus-within:ring-primary`,g?`cursor-not-allowed`:`cursor-text`,ue),children:[(0,o.jsx)(`input`,{ref:e=>{F.current=e,typeof D==`function`?D(e):D&&(D.current=e)},id:z,type:`text`,role:`combobox`,"aria-label":ie,"aria-labelledby":ae,readOnly:!O,disabled:g,"aria-haspopup":`listbox`,"aria-expanded":O,"aria-controls":O?R:void 0,"aria-activedescendant":Te,"aria-autocomplete":`list`,"data-testid":ve,value:He,placeholder:U?se:m,onChange:Re,onKeyDown:ze,onFocus:()=>{me&&!g&&!O&&k(!0)},className:e.cn(`min-w-0 flex-1 truncate bg-transparent text-left outline-hidden placeholder:text-fg-subtle`,Q,$,g&&`cursor-not-allowed`)}),_&&(0,o.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,Q,Z),children:_}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Y),children:v}),C&&(0,o.jsx)(te.LoadingDots,{className:e.cn(`shrink-0 text-fg-subtle`,X)}),y&&!g&&J&&(0,o.jsx)(`button`,{type:`button`,tabIndex:-1,onClick:Ie,"aria-label":`선택 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center rounded`,Z,`hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring`),children:(0,o.jsx)(n.CircleX,{className:X,strokeWidth:1.5,"aria-hidden":!0})}),b&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Y,We),children:b}),(0,o.jsx)(t.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Ge,Z,O&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}):(0,o.jsxs)(`button`,{ref:e=>{G.setReference(e),typeof D==`function`?D(e):D&&(D.current=e)},id:z,type:`button`,disabled:g,"aria-haspopup":`listbox`,"aria-expanded":O,"aria-controls":O?R:void 0,"aria-activedescendant":Te,"data-testid":ve,...Me({onKeyDown:Le}),"aria-label":ie,"aria-labelledby":ae,className:e.cn(Ke,`flex w-full min-w-0 items-center`,Ue,g?`cursor-not-allowed`:`cursor-pointer`,ue),children:[(0,o.jsx)(`span`,{className:e.cn(`min-w-0 flex-1 truncate text-left`,Q,$),children:Ve}),_&&(0,o.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,Q,Z),children:_}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Y),children:v}),y&&!g&&J&&(0,o.jsx)(`span`,{role:`button`,tabIndex:-1,onClick:Ie,"aria-label":`선택 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center`,Z,`hover:text-fg-default`),children:(0,o.jsx)(n.CircleX,{className:X,strokeWidth:1.5,"aria-hidden":!0})}),b&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Y,We),children:b}),(0,o.jsx)(t.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Ge,Z,O&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}),pe&&(0,o.jsx)(`input`,{type:`hidden`,name:pe,value:l}),O&&(0,o.jsx)(s.FloatingPortal,{children:(0,o.jsx)(s.FloatingFocusManager,{context:K,modal:!1,initialFocus:x?-1:0,children:(0,o.jsx)(`div`,{ref:G.setFloating,id:R,style:je,...Ne(),className:e.cn(`z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface shadow-overlay`,de),children:(0,o.jsxs)(`div`,{ref:Se,className:`max-h-72 overflow-y-auto py-1`,children:[W.length===0?(0,o.jsx)(`div`,{className:`px-3 py-4 text-center text-sm text-fg-subtle`,children:C?`검색 중...`:`옵션이 없어요`}):W.map((t,n)=>{let r=String(t.value)===l,i=A===n;return(0,o.jsxs)(`div`,{id:we(n),ref:e=>{P.current[n]=e},role:`option`,"aria-selected":r,"aria-disabled":t.disabled||void 0,tabIndex:i?0:-1,...Pe({onClick:()=>{t.disabled||q(String(t.value))},onKeyDown:e=>{t.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),q(String(t.value)))}}),className:e.cn(`flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors`,t.disabled?`cursor-not-allowed text-fg-disabled`:r?e.cn(`font-medium text-primary-fg`,i?`bg-primary-subtle`:`bg-primary-subtle/60 hover:bg-primary-subtle/80`):i?`bg-bg-subtle text-fg-default`:`text-fg-default hover:bg-bg-subtle`),children:[(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`div`,{className:`truncate`,children:t.label}),t.description&&(0,o.jsx)(`div`,{className:`mt-0.5 truncate text-xs text-fg-subtle`,children:t.description})]}),t.trailing&&(0,o.jsx)(`span`,{className:`shrink-0 text-xs text-fg-subtle`,children:t.trailing})]},String(t.value))}),w&&T&&(0,o.jsx)(`div`,{ref:xe,"aria-hidden":!0,className:`flex items-center justify-center px-3 py-3 text-fg-subtle`,children:C&&(0,o.jsx)(te.LoadingDots,{})})]})})})}),p&&(0,o.jsx)(`div`,{className:i.getInputHelpClasses(h),children:p})]})});exports.Select=c;