@thewrong/ui 0.2.0 → 0.4.0

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

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

package/dist/components/select/Select.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/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;

package/dist/{src/components → components}/select/Select.d.ts

@@ -1,4 +1,4 @@
-import { SelectCommonProps, SelectOption } from './types';
+import { SelectCommonProps, SelectOption } from './types.js';
 /**
  * Select의 search 관련 props discriminated union.
  * `searchable=true`일 때만 onSearchChange/isSearchLoading/onLoadMore/hasMore/searchDebounceMs/searchPlaceholder가 의미가 있다.
@@ -12,6 +12,8 @@ type SelectSearchProps = {
     onLoadMore?: never;
     hasMore?: never;
     searchDebounceMs?: never;
+    openOnFocus?: never;
+    validateSearchQuery?: never;
 } | {
     searchable: true;
     /** 트리거 input의 검색 placeholder. selected 있을 때 fallback으로 노출. */
@@ -33,6 +35,10 @@ type SelectSearchProps = {
      * @default 300
      */
     searchDebounceMs?: number | false;
+    /** searchable 입력에 포커스만 해도 패널을 연다. @default false */
+    openOnFocus?: boolean;
+    /** searchable 입력의 다음 검색어를 검사한다. false면 검색어와 검색 콜백에 반영하지 않는다. */
+    validateSearchQuery?: (query: string) => boolean;
 };
 /** Select의 search 외 base props (SelectCommonProps에서 search 관련 제외). */
 type SelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceholder" | "onSearchChange" | "isSearchLoading"> & {
@@ -42,7 +48,11 @@ type SelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceholder
     value: string;
     /** 값 변경 콜백. clearable로 비울 때도 빈 문자열로 호출. */
     onChange: (value: string) => void;
-    /** 드롭다운 패널 추가 className. */
+    /**
+     * 드롭다운 패널 추가 className. 긴 라벨이 패널을 뷰포트 밖으로 밀어내지 않도록 인라인 maxWidth가
+     * 패널 폭을 `max(트리거 폭, min(가용 폭, 420px))`로 제한하므로 `max-w-*`/`min-w-*`로
+     * 이 범위를 넘길 수 없다. 범위 안에서는 `w-*`로 지정하고, 더 큰 폭이 필요하면 트리거 폭을 조정한다.
+     */
     panelClassName?: string;
     /** 트리거 추가 className. */
     className?: string;
@@ -50,6 +60,10 @@ type SelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceholder
     id?: string;
     /** name (form 제출용 hidden input). */
     name?: string;
+    /** 지정하면 드롭다운 열림 상태를 제어한다. 생략하면 내부 상태를 사용한다. */
+    open?: boolean;
+    /** 드롭다운 열기·닫기 요청을 전달한다. open을 제어할 때는 이 값으로 상태를 갱신한다. */
+    onOpenChange?: (open: boolean) => void;
 };
 type SelectProps = SelectBaseProps & SelectSearchProps;
 /**