@thewrong/ui 0.2.0 → 0.4.0

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

@@ -1,31 +1,41 @@
-import { ChevronDown as e } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
-import { CircleX as t } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
-import { CHEVRON_SIZE_CLASS as n, SLOT_BADGE_TEXT_CLASS as r, 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 { c as ce } from "../../node_modules/use-debounce/dist/index.module.esm.js";
-import { LoadingDots as le } from "./loading-dots.esm.js";
-import { forwardRef as i, useEffect as ue, useId as de, useMemo as fe, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.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 { CHEVRON_SIZE_CLASS as r, CONTROL_TEXT_CLASS as i, 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 { c as le } from "../../node_modules/use-debounce/dist/index.module.esm.js";
+import { LoadingDots as ue } from "./loading-dots.esm.js";
+import { computeSelectPanelMaxWidth as de } from "./panel-width.esm.js";
+import { forwardRef as a, useEffect as o, useId as s, useMemo as fe, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } 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, useTypeahead as Ee } from "@floating-ui/react";
 //#region src/components/select/Select.tsx
-var l = i(function({ options: i, value: l, onChange: u, variant: De, selectSize: d = "medium", label: f, labelOption: Oe = "appear", help: ke, placeholder: p = "선택해주세요", hasError: m = !1, disabled: h = !1, suffix: g, trailingIcon: _, clearable: v = !1, badge: y, searchable: b = !1, searchPlaceholder: Ae = "검색...", onSearchChange: x, isSearchLoading: S = !1, containerProps: je, containerRef: Me, className: Ne = "", panelClassName: Pe = "", id: C, name: w, onLoadMore: T, hasMore: E = !1, searchDebounceMs: D = 300, "data-testid": Fe }, O) {
-	let [k, A] = o(!1), [j, M] = o(null), [N, P] = o(""), Ie = a([]), Le = a(null), [F, Re] = o(null), [I, ze] = o(null), L = de(), Be = (e) => `${L}-opt-${e}`, Ve = j === null ? void 0 : Be(j), R = typeof x == "function", z = D === !1 || D <= 0 ? 0 : D, B = ce((e) => {
-		x?.(e);
-	}, z), V = (e, t) => {
-		R && (t || z === 0 ? (B.cancel(), x(e)) : B(e));
-	}, H = i.find((e) => String(e.value) === l), U = b && (H !== void 0 && N === H.label || H === void 0 && l !== "" && N !== ""), W = fe(() => {
-		if (!b || R || N.length === 0 || U) return i;
-		let e = N.toLowerCase();
-		return i.filter((t) => t.label.toLowerCase().includes(e));
+var f = a(function({ options: a, value: f, onChange: p, variant: m, selectSize: h = "medium", label: De, "aria-label": Oe, "aria-labelledby": ke, labelOption: Ae = "appear", help: je, placeholder: Me = "선택해주세요", hasError: g = !1, disabled: _ = !1, suffix: v, trailingIcon: y, clearable: b = !1, badge: x, searchable: S = !1, searchPlaceholder: Ne = "검색...", onSearchChange: C, isSearchLoading: w = !1, containerProps: Pe, containerRef: Fe, className: Ie = "", panelClassName: Le = "", id: Re, name: ze, onLoadMore: T, hasMore: E = !1, searchDebounceMs: D = 300, openOnFocus: Be = !1, validateSearchQuery: Ve, open: He, onOpenChange: Ue, "data-testid": O }, k) {
+	let [We, Ge] = l(!1), A = He ?? We, j = (e) => {
+		He === void 0 && Ge(e), Ue?.(e);
+	}, [M, N] = l(null), [P, F] = l(""), Ke = c([]), I = c(null), [L, qe] = l(null), [R, Je] = l(null), z = s(), Ye = s(), B = Re ?? Ye, Xe = (e) => `${z}-opt-${e}`, Ze = M === null ? void 0 : Xe(M), V = typeof C == "function", H = c(C);
+	H.current = C;
+	let Qe = D === !1 || D <= 0 ? 0 : D, $e = le((e) => {
+		H.current?.(e);
+	}, Qe), U = (e, t) => {
+		V && (t || Qe === 0 ? ($e.cancel(), H.current?.(e)) : $e(e));
+	}, W = a.find((e) => String(e.value) === f), et = c(W?.label ?? "");
+	et.current = W?.label ?? "";
+	let tt = c(U);
+	tt.current = U;
+	let nt = S && (W !== void 0 && P === W.label || W === void 0 && f !== "" && P !== ""), G = fe(() => {
+		if (!S || V || P.length === 0 || nt) return a;
+		let e = P.toLowerCase();
+		return a.filter((t) => t.label.toLowerCase().includes(e));
 	}, [
-		i,
-		b,
-		R,
-		N,
-		U
-	]), { refs: G, floatingStyles: He, context: K } = Se({
-		open: k,
-		onOpenChange: A,
+		a,
+		S,
+		V,
+		P,
+		nt
+	]), { refs: K, floatingStyles: rt, context: q } = Se({
+		open: A,
+		onOpenChange: j,
 		placement: "bottom-start",
 		whileElementsMounted: he,
 		middleware: [
@@ -33,276 +43,286 @@ var l = i(function({ options: i, value: l, onChange: u, variant: De, selectSize:
 			ge({ padding: 8 }),
 			ve({ padding: 8 }),
 			ye({
-				apply({ rects: e, elements: t, availableHeight: n }) {
+				apply({ rects: e, elements: t, availableHeight: n, availableWidth: r }) {
 					Object.assign(t.floating.style, {
 						minWidth: `${e.reference.width}px`,
+						maxWidth: `${de(e.reference.width, r)}px`,
 						maxHeight: `${Math.min(n, 320)}px`
 					});
 				},
 				padding: 8
 			})
 		]
-	}), { getReferenceProps: Ue, getFloatingProps: We, getItemProps: Ge } = Ce([
-		be(K, { enabled: !h && !b }),
-		xe(K),
-		Te(K, { role: "listbox" }),
-		we(K, {
-			listRef: Ie,
-			activeIndex: j,
-			onNavigate: M,
-			virtual: b,
+	}), { getReferenceProps: it, getFloatingProps: at, getItemProps: ot } = Ce([
+		be(q, { enabled: !_ && !S }),
+		xe(q),
+		Te(q, { role: "listbox" }),
+		we(q, {
+			listRef: Ke,
+			activeIndex: M,
+			onNavigate: N,
+			virtual: S,
 			loop: !0
 		}),
-		Ee(K, {
-			listRef: { current: W.map((e) => e.label) },
-			activeIndex: j,
-			onMatch: M,
-			enabled: !b
+		Ee(q, {
+			listRef: { current: G.map((e) => e.label) },
+			activeIndex: M,
+			onMatch: N,
+			enabled: !S
 		})
-	]), Ke = a(!1);
-	ue(() => {
-		if (k) {
-			if (Ke.current = !0, b) {
-				let e = H?.label ?? "";
-				P(e), e !== "" && requestAnimationFrame(() => {
-					Le.current?.select();
+	]), st = c(!1);
+	o(() => {
+		if (A) {
+			if (st.current = !0, S) {
+				let e = et.current;
+				F(e), e !== "" && requestAnimationFrame(() => {
+					I.current?.select();
 				});
 			}
-		} else P(""), M(null), Ke.current && V("", !0);
+		} else F(""), N(null), st.current && tt.current("", !0);
 	}, [
-		k,
-		b,
-		R,
-		x
-	]), ue(() => {
-		if (!k || !T || !E || !F || !I) return;
+		A,
+		S,
+		V
+	]), o(() => {
+		if (!A || !T || !E || !L || !R) return;
 		let e = new IntersectionObserver((e) => {
-			for (let t of e) t.isIntersecting && !S && T();
+			for (let t of e) t.isIntersecting && !w && T();
 		}, {
-			root: I,
+			root: R,
 			rootMargin: "0px 0px 80px 0px"
 		});
-		return e.observe(F), () => e.disconnect();
+		return e.observe(L), () => e.disconnect();
 	}, [
-		k,
+		A,
 		T,
 		E,
-		S,
-		F,
-		I
+		w,
+		L,
+		R
 	]);
-	let q = (e) => {
-		u(e), A(!1);
-	}, qe = (e) => {
-		e.stopPropagation(), u(""), P("");
-	}, Je = (e) => {
-		b || !v || h || !J || k || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), u(""));
-	}, Ye = (e) => {
+	let J = (e) => {
+		p(e), j(!1);
+	}, ct = (e) => {
+		e.stopPropagation(), p(""), F("");
+	}, lt = (e) => {
+		S || !b || _ || !Y || A || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), p(""));
+	}, ut = (e) => {
 		let t = e.target.value;
-		P(t), V(t, !1), k || A(!0);
-	}, Xe = (e) => {
+		Ve && !Ve(t) || (t !== P && (R && (R.scrollTop = 0), N(null)), F(t), U(t, !1), A || j(!0));
+	}, dt = (e) => {
 		if (!e.nativeEvent.isComposing) {
-			if (e.key === "Enter" && j !== null) {
+			if (e.key === "Enter" && M !== null) {
 				e.preventDefault();
-				let t = W[j];
-				t && !t.disabled && q(String(t.value));
+				let t = G[M];
+				t && !t.disabled && J(String(t.value));
 				return;
 			}
-			(e.key === "Backspace" || e.key === "Delete") && H && (!k || N === "") && (e.preventDefault(), u(""));
+			(e.key === "Backspace" || e.key === "Delete") && W && (!A || P === "") && (e.preventDefault(), p(""));
 		}
-	}, Ze = Oe === "sustain" || Oe === "appear" && !!H, J = !!H, Qe = H ? H.label : p, $e = k ? N : H?.label ?? "", Y = te[d], X = ee[d], et = r[d], Z = ne[d], tt = n[d], nt = se(De, m, h, d), Q = oe(m, h, J || k), $ = d === "mini" ? "text-xs" : d === "large" ? "text-base" : "text-sm", rt = h ? "text-text-disabled" : m ? "text-text-danger" : J ? "text-text-primary" : "text-text-tertiary";
-	return /* @__PURE__ */ c("div", {
-		ref: Me,
-		className: re(),
-		...je,
+	}, ft = Ae === "sustain" || Ae === "appear" && !!W, Y = !!W, pt = W ? W.label : Me, mt = A ? P : W?.label ?? "", ht = ne[h], X = te[h], gt = ee[h], Z = re[h], _t = r[h], vt = ce(m, g, _, h), Q = se(g, _, Y || A), $ = i[h], yt = _ ? "text-fg-disabled" : g ? "text-fg-danger" : Y ? "text-fg-default" : "text-fg-subtle";
+	return /* @__PURE__ */ d("div", {
+		ref: Fe,
+		className: e(ie(), "min-w-0"),
+		...Pe,
 		children: [
-			Ze && f && /* @__PURE__ */ s("label", {
-				className: ae(De, m),
-				htmlFor: C,
-				children: f
+			ft && De && /* @__PURE__ */ u("label", {
+				className: oe(m, g),
+				htmlFor: B,
+				children: De
 			}),
-			b ? /* @__PURE__ */ c("div", {
+			S ? /* @__PURE__ */ d("div", {
 				ref: (e) => {
-					G.setReference(e);
+					K.setReference(e);
 				},
-				...Ue(),
-				className: `${nt} flex w-full items-center ${Y} ${h ? "cursor-not-allowed" : "cursor-text"} ${Ne}`.trim().replace(/\s+/g, " "),
+				...it({ onClick: () => {
+					_ || (I.current?.focus(), A || j(!0));
+				} }),
+				role: "presentation",
+				"aria-expanded": void 0,
+				"aria-controls": void 0,
+				"aria-haspopup": void 0,
+				className: e(vt, "flex w-full min-w-0 items-center", ht, m !== "box" && "focus-within:border-primary", m !== "box" && m !== "line" && "focus-within:ring-control focus-within:ring-primary", _ ? "cursor-not-allowed" : "cursor-text", Ie),
 				children: [
-					/* @__PURE__ */ s("input", {
+					/* @__PURE__ */ u("input", {
 						ref: (e) => {
-							Le.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+							I.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
 						},
-						id: C,
+						id: B,
 						type: "text",
 						role: "combobox",
-						readOnly: !k,
-						disabled: h,
+						"aria-label": Oe,
+						"aria-labelledby": ke,
+						readOnly: !A,
+						disabled: _,
 						"aria-haspopup": "listbox",
-						"aria-expanded": k,
-						"aria-controls": k ? L : void 0,
-						"aria-activedescendant": Ve,
+						"aria-expanded": A,
+						"aria-controls": A ? z : void 0,
+						"aria-activedescendant": Ze,
 						"aria-autocomplete": "list",
-						"data-testid": Fe,
-						value: $e,
-						placeholder: H ? Ae : p,
-						onChange: Ye,
-						onKeyDown: Xe,
-						onClick: () => {
-							h || k || A(!0);
+						"data-testid": O,
+						value: mt,
+						placeholder: W ? Ne : Me,
+						onChange: ut,
+						onKeyDown: dt,
+						onFocus: () => {
+							Be && !_ && !A && j(!0);
 						},
-						className: `flex-1 bg-transparent text-left outline-hidden ${$} ${rt} ${h ? "cursor-not-allowed" : ""} placeholder:text-text-tertiary`
+						className: e("min-w-0 flex-1 truncate bg-transparent text-left outline-hidden placeholder:text-fg-subtle", $, yt, _ && "cursor-not-allowed")
 					}),
-					g && /* @__PURE__ */ s("span", {
-						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
-						children: g
+					v && /* @__PURE__ */ u("span", {
+						className: e("shrink-0 whitespace-nowrap", $, Q),
+						children: v
 					}),
-					_ && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${Q} ${X}`,
-						children: _
+					y && /* @__PURE__ */ u("span", {
+						className: e("flex shrink-0 items-center", Q, X),
+						children: y
 					}),
-					S && /* @__PURE__ */ s(le, { className: `shrink-0 text-icon-tertiary ${Z}` }),
-					v && !h && J && /* @__PURE__ */ s("button", {
+					w && /* @__PURE__ */ u(ue, { className: e("shrink-0 text-fg-subtle", Z) }),
+					b && !_ && Y && /* @__PURE__ */ u("button", {
 						type: "button",
 						tabIndex: -1,
-						onClick: qe,
+						onClick: ct,
 						"aria-label": "선택 지우기",
-						className: `flex shrink-0 cursor-pointer items-center rounded ${Q} hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/40`,
-						children: /* @__PURE__ */ s(t, {
+						className: e("flex shrink-0 cursor-pointer items-center rounded", Q, "hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring"),
+						children: /* @__PURE__ */ u(n, {
 							className: Z,
 							strokeWidth: 1.5,
 							"aria-hidden": !0
 						})
 					}),
-					y && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${X} ${et}`,
-						children: y
+					x && /* @__PURE__ */ u("span", {
+						className: e("flex shrink-0 items-center", X, gt),
+						children: x
 					}),
-					/* @__PURE__ */ s(e, {
-						className: `shrink-0 transition-transform ${tt} ${Q} ${k ? "rotate-180" : ""}`,
+					/* @__PURE__ */ u(t, {
+						className: e("shrink-0 transition-transform", _t, Q, A && "rotate-180"),
 						strokeWidth: 1.5,
 						"aria-hidden": !0
 					})
 				]
-			}) : /* @__PURE__ */ c("button", {
+			}) : /* @__PURE__ */ d("button", {
 				ref: (e) => {
-					G.setReference(e), typeof O == "function" ? O(e) : O && (O.current = e);
+					K.setReference(e), typeof k == "function" ? k(e) : k && (k.current = e);
 				},
-				id: C,
+				id: B,
 				type: "button",
-				disabled: h,
+				disabled: _,
 				"aria-haspopup": "listbox",
-				"aria-expanded": k,
-				"aria-controls": k ? L : void 0,
-				"aria-activedescendant": Ve,
-				"data-testid": Fe,
-				...Ue({ onKeyDown: Je }),
-				className: `${nt} flex w-full items-center ${Y} ${h ? "cursor-not-allowed" : "cursor-pointer"} ${Ne}`.trim().replace(/\s+/g, " "),
+				"aria-expanded": A,
+				"aria-controls": A ? z : void 0,
+				"aria-activedescendant": Ze,
+				"data-testid": O,
+				...it({ onKeyDown: lt }),
+				"aria-label": Oe,
+				"aria-labelledby": ke,
+				className: e(vt, "flex w-full min-w-0 items-center", ht, _ ? "cursor-not-allowed" : "cursor-pointer", Ie),
 				children: [
-					/* @__PURE__ */ s("span", {
-						className: `flex-1 truncate text-left ${$} ${rt}`,
-						children: Qe
+					/* @__PURE__ */ u("span", {
+						className: e("min-w-0 flex-1 truncate text-left", $, yt),
+						children: pt
 					}),
-					g && /* @__PURE__ */ s("span", {
-						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
-						children: g
+					v && /* @__PURE__ */ u("span", {
+						className: e("shrink-0 whitespace-nowrap", $, Q),
+						children: v
 					}),
-					_ && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${Q} ${X}`,
-						children: _
+					y && /* @__PURE__ */ u("span", {
+						className: e("flex shrink-0 items-center", Q, X),
+						children: y
 					}),
-					v && !h && J && /* @__PURE__ */ s("span", {
+					b && !_ && Y && /* @__PURE__ */ u("span", {
 						role: "button",
 						tabIndex: -1,
-						onClick: qe,
+						onClick: ct,
 						"aria-label": "선택 지우기",
-						className: `flex shrink-0 cursor-pointer items-center ${Q} hover:text-text-primary`,
-						children: /* @__PURE__ */ s(t, {
+						className: e("flex shrink-0 cursor-pointer items-center", Q, "hover:text-fg-default"),
+						children: /* @__PURE__ */ u(n, {
 							className: Z,
 							strokeWidth: 1.5,
 							"aria-hidden": !0
 						})
 					}),
-					y && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${X} ${et}`,
-						children: y
+					x && /* @__PURE__ */ u("span", {
+						className: e("flex shrink-0 items-center", X, gt),
+						children: x
 					}),
-					/* @__PURE__ */ s(e, {
-						className: `shrink-0 transition-transform ${tt} ${Q} ${k ? "rotate-180" : ""}`,
+					/* @__PURE__ */ u(t, {
+						className: e("shrink-0 transition-transform", _t, Q, A && "rotate-180"),
 						strokeWidth: 1.5,
 						"aria-hidden": !0
 					})
 				]
 			}),
-			w && /* @__PURE__ */ s("input", {
+			ze && /* @__PURE__ */ u("input", {
 				type: "hidden",
-				name: w,
-				value: l
+				name: ze,
+				value: f
 			}),
-			k && /* @__PURE__ */ s(me, { children: /* @__PURE__ */ s(pe, {
-				context: K,
+			A && /* @__PURE__ */ u(me, { children: /* @__PURE__ */ u(pe, {
+				context: q,
 				modal: !1,
-				initialFocus: b ? -1 : 0,
-				children: /* @__PURE__ */ s("div", {
-					ref: G.setFloating,
-					id: L,
-					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 ${Pe}`,
-					children: /* @__PURE__ */ c("div", {
-						ref: ze,
+				initialFocus: S ? -1 : 0,
+				children: /* @__PURE__ */ u("div", {
+					ref: K.setFloating,
+					id: z,
+					style: rt,
+					...at(),
+					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface shadow-overlay", Le),
+					children: /* @__PURE__ */ d("div", {
+						ref: Je,
 						className: "max-h-72 overflow-y-auto py-1",
-						children: [W.length === 0 ? /* @__PURE__ */ s("div", {
-							className: "px-3 py-4 text-center text-sm text-text-tertiary",
-							children: S ? "검색 중..." : "옵션이 없어요"
-						}) : W.map((e, t) => {
-							let n = String(e.value) === l, r = j === t;
-							return /* @__PURE__ */ c("div", {
-								id: Be(t),
+						children: [G.length === 0 ? /* @__PURE__ */ u("div", {
+							className: "px-3 py-4 text-center text-sm text-fg-subtle",
+							children: w ? "검색 중..." : "옵션이 없어요"
+						}) : G.map((t, n) => {
+							let r = String(t.value) === f, i = M === n;
+							return /* @__PURE__ */ d("div", {
+								id: Xe(n),
 								ref: (e) => {
-									Ie.current[t] = e;
+									Ke.current[n] = e;
 								},
 								role: "option",
-								"aria-selected": n,
-								"aria-disabled": e.disabled || void 0,
-								tabIndex: r ? 0 : -1,
-								...Ge({
+								"aria-selected": r,
+								"aria-disabled": t.disabled || void 0,
+								tabIndex: i ? 0 : -1,
+								...ot({
 									onClick: () => {
-										e.disabled || q(String(e.value));
+										t.disabled || J(String(t.value));
 									},
-									onKeyDown: (t) => {
-										e.disabled || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), q(String(e.value)));
+									onKeyDown: (e) => {
+										t.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), J(String(t.value)));
 									}
 								}),
-								className: `flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors ${e.disabled ? "cursor-not-allowed text-text-disabled" : n ? `font-medium text-primary-600 dark:text-primary-400 ${r ? "bg-primary-50 dark:bg-primary-900/30" : "hover:bg-primary-50/60 dark:hover:bg-primary-900/20"}` : r ? "bg-neutral-100 text-text-primary dark:bg-neutral-700" : "text-text-primary hover:bg-neutral-50 dark:hover:bg-neutral-700"}`,
-								children: [/* @__PURE__ */ c("div", {
+								className: e("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("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: [/* @__PURE__ */ d("div", {
 									className: "min-w-0 flex-1",
-									children: [/* @__PURE__ */ s("div", {
+									children: [/* @__PURE__ */ u("div", {
 										className: "truncate",
-										children: e.label
-									}), e.description && /* @__PURE__ */ s("div", {
-										className: "mt-0.5 truncate text-xs text-text-tertiary",
-										children: e.description
+										children: t.label
+									}), t.description && /* @__PURE__ */ u("div", {
+										className: "mt-0.5 truncate text-xs text-fg-subtle",
+										children: t.description
 									})]
-								}), e.trailing && /* @__PURE__ */ s("span", {
-									className: "shrink-0 text-xs text-text-tertiary",
-									children: e.trailing
+								}), t.trailing && /* @__PURE__ */ u("span", {
+									className: "shrink-0 text-xs text-fg-subtle",
+									children: t.trailing
 								})]
-							}, String(e.value));
-						}), T && E && /* @__PURE__ */ s("div", {
-							ref: Re,
+							}, String(t.value));
+						}), T && E && /* @__PURE__ */ u("div", {
+							ref: qe,
 							"aria-hidden": !0,
-							className: "flex items-center justify-center px-3 py-3 text-text-tertiary",
-							children: S && /* @__PURE__ */ s(le, {})
+							className: "flex items-center justify-center px-3 py-3 text-fg-subtle",
+							children: w && /* @__PURE__ */ u(ue, {})
 						})]
 					})
 				})
 			}) }),
-			ke && /* @__PURE__ */ s("div", {
-				className: ie(m),
-				children: ke
+			je && /* @__PURE__ */ u("div", {
+				className: ae(g),
+				children: je
 			})
 		]
 	});
 });
 //#endregion
-export { l as Select };
+export { f as Select };

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

@@ -0,0 +1,4 @@
+export { Select } from './Select.js';
+export type { SelectTriggerRef } from './Select.js';
+export { MultiSelect } from './MultiSelect.js';
+export type { SelectProps, SelectOption, SelectVariant, SelectSize, SelectLabelOption, } from './types.js';

package/dist/components/select/loading-dots.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");var n=({className:n=``})=>(0,t.jsxs)(`span`,{className:e.cn(`inline-flex items-end gap-0.5`,n),"aria-label":`로딩 중`,role:`status`,children:[(0,t.jsx)(`span`,{className:`block h-1 w-1 animate-pulse rounded-full bg-current`,style:{animationDelay:`0ms`}}),(0,t.jsx)(`span`,{className:`block h-1 w-1 animate-pulse rounded-full bg-current`,style:{animationDelay:`200ms`}}),(0,t.jsx)(`span`,{className:`block h-1 w-1 animate-pulse rounded-full bg-current`,style:{animationDelay:`400ms`}})]});exports.LoadingDots=n;

package/dist/components/select/loading-dots.d.ts

@@ -0,0 +1,3 @@
+export declare const LoadingDots: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/components/select/loading-dots.esm.js

@@ -1,23 +1,24 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/select/loading-dots.tsx
-var n = ({ className: n = "" }) => /* @__PURE__ */ t("span", {
-	className: `inline-flex items-end gap-0.5 ${n}`,
+var r = ({ className: r = "" }) => /* @__PURE__ */ n("span", {
+	className: e("inline-flex items-end gap-0.5", r),
 	"aria-label": "로딩 중",
 	role: "status",
 	children: [
-		/* @__PURE__ */ e("span", {
+		/* @__PURE__ */ t("span", {
 			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
 			style: { animationDelay: "0ms" }
 		}),
-		/* @__PURE__ */ e("span", {
+		/* @__PURE__ */ t("span", {
 			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
 			style: { animationDelay: "200ms" }
 		}),
-		/* @__PURE__ */ e("span", {
+		/* @__PURE__ */ t("span", {
 			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
 			style: { animationDelay: "400ms" }
 		})
 	]
 });
 //#endregion
-export { n as LoadingDots };
+export { r as LoadingDots };

package/dist/components/select/panel-width.cjs

@@ -0,0 +1 @@
+var e=420;function t(t,n){return Math.max(t,Math.min(n,e))}exports.computeSelectPanelMaxWidth=t;

package/dist/components/select/panel-width.d.ts

@@ -0,0 +1,2 @@
+/** 트리거 폭을 하한으로 유지하면서 화면과 최대 패널 폭에 맞춘다. */
+export declare function computeSelectPanelMaxWidth(referenceWidth: number, availableWidth: number): number;

package/dist/components/select/panel-width.esm.js

@@ -0,0 +1,7 @@
+//#region src/components/select/panel-width.ts
+var e = 420;
+function t(t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+//#endregion
+export { t as computeSelectPanelMaxWidth };

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

@@ -32,6 +32,13 @@ export interface SelectCommonProps {
      * Select 필드의 상단의 라벨
      */
     label?: string;
+    /**
+     * 트리거의 접근성 이름. 명시된 aria 속성은 시각 label보다 우선한다.
+     * 보이는 라벨이 있으면 그 텍스트를 포함한다(WCAG 2.5.3).
+     */
+    "aria-label"?: string;
+    /** 참조한 요소로 접근성 이름을 지정한다. aria-label보다 우선하며 보이는 라벨 텍스트를 포함해야 한다. */
+    "aria-labelledby"?: string;
     /**
      * label 표시 방식
      * 'appear': value가 있을 때만 label이 보여요

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

@@ -1,4 +1,4 @@
-import { SelectSize, SelectVariant } from './types';
+import { SelectSize, SelectVariant } from './types.js';
 /**
  * Select Variant에 따른 컨테이너 클래스. 2026 리디자인 box variant는 Button/Input과 동일 토큰.
  * line/big/hero는 레거시 — Input과 동일하게 추후 정리.

package/dist/components/skeleton/Skeleton.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");function n({className:n,...r}){return(0,t.jsx)(`div`,{...r,"aria-hidden":`true`,className:e.cn(`animate-pulse rounded-control-small bg-bg-muted motion-reduce:animate-none`,n)})}exports.Skeleton=n;

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import { SkeletonProps } from './types.js';
+/**
+ * 장식용 로딩 블록. 크기와 레이아웃은 소비자가 className으로 지정한다.
+ * 보조기기에는 숨겨지므로 로딩 상태 설명이 필요하면 별도 상태 문구를 제공한다.
+ */
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;