@thewrong/ui 0.2.0 → 0.3.0

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

@@ -1,106 +1,116 @@
-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 { 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";
+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 fe, useId as pe, useMemo as me, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { FloatingFocusManager as he, FloatingPortal as ge, autoUpdate as _e, flip as ve, offset as ye, shift as be, size as xe, useClick as Se, useDismiss as Ce, useFloating as we, useInteractions as Te, useListNavigation as Ee, useRole as De, useTypeahead as Oe } 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;
+var u = a(function({ options: a, value: u, onChange: d, variant: f, selectSize: p = "medium", label: ke, labelOption: Ae = "appear", help: je, placeholder: Me = "선택해주세요", hasError: m = !1, disabled: h = !1, suffix: g, trailingIcon: _, clearable: v = !1, badge: y, searchable: b = !1, searchPlaceholder: Ne = "검색...", onSearchChange: x, isSearchLoading: S = !1, containerProps: Pe, containerRef: Fe, className: C = "", panelClassName: Ie = "", id: Le, name: Re, onLoadMore: w, hasMore: T = !1, searchDebounceMs: E = 300, openOnFocus: ze = !1, validateSearchQuery: D, open: Be, onOpenChange: Ve, "data-testid": He }, O) {
+	let [Ue, We] = s(!1), k = Be ?? Ue, A = (e) => {
+		Be === void 0 && We(e), Ve?.(e);
+	}, [j, M] = s(null), [N, P] = s(""), Ge = o([]), F = o(null), [I, Ke] = s(null), [L, qe] = s(null), R = pe(), Je = pe(), z = Le ?? Je, Ye = (e) => `${R}-opt-${e}`, Xe = j === null ? void 0 : Ye(j), B = typeof x == "function", V = o(x);
+	V.current = x;
+	let Ze = E === !1 || E <= 0 ? 0 : E, Qe = le((e) => {
+		V.current?.(e);
+	}, Ze), H = (e, t) => {
+		B && (t || Ze === 0 ? (Qe.cancel(), V.current?.(e)) : Qe(e));
+	}, U = a.find((e) => String(e.value) === u), $e = o(U?.label ?? "");
+	$e.current = U?.label ?? "";
+	let et = o(H);
+	et.current = H;
+	let tt = b && (U !== void 0 && N === U.label || U === void 0 && u !== "" && N !== ""), W = me(() => {
+		if (!b || B || N.length === 0 || tt) return a;
 		let e = N.toLowerCase();
-		return i.filter((t) => t.label.toLowerCase().includes(e));
+		return a.filter((t) => t.label.toLowerCase().includes(e));
 	}, [
-		i,
+		a,
 		b,
-		R,
+		B,
 		N,
-		U
-	]), { refs: G, floatingStyles: He, context: K } = Se({
+		tt
+	]), { refs: G, floatingStyles: nt, context: K } = we({
 		open: k,
 		onOpenChange: A,
 		placement: "bottom-start",
-		whileElementsMounted: he,
+		whileElementsMounted: _e,
 		middleware: [
-			_e(4),
-			ge({ padding: 8 }),
+			ye(4),
 			ve({ padding: 8 }),
-			ye({
-				apply({ rects: e, elements: t, availableHeight: n }) {
+			be({ padding: 8 }),
+			xe({
+				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,
+	}), { getReferenceProps: rt, getFloatingProps: it, getItemProps: at } = Te([
+		Se(K, { enabled: !h && !b }),
+		Ce(K),
+		De(K, { role: "listbox" }),
+		Ee(K, {
+			listRef: Ge,
 			activeIndex: j,
 			onNavigate: M,
 			virtual: b,
 			loop: !0
 		}),
-		Ee(K, {
+		Oe(K, {
 			listRef: { current: W.map((e) => e.label) },
 			activeIndex: j,
 			onMatch: M,
 			enabled: !b
 		})
-	]), Ke = a(!1);
-	ue(() => {
+	]), ot = o(!1);
+	fe(() => {
 		if (k) {
-			if (Ke.current = !0, b) {
-				let e = H?.label ?? "";
+			if (ot.current = !0, b) {
+				let e = $e.current;
 				P(e), e !== "" && requestAnimationFrame(() => {
-					Le.current?.select();
+					F.current?.select();
 				});
 			}
-		} else P(""), M(null), Ke.current && V("", !0);
+		} else P(""), M(null), ot.current && et.current("", !0);
 	}, [
 		k,
 		b,
-		R,
-		x
-	]), ue(() => {
-		if (!k || !T || !E || !F || !I) return;
+		B
+	]), fe(() => {
+		if (!k || !w || !T || !I || !L) return;
 		let e = new IntersectionObserver((e) => {
-			for (let t of e) t.isIntersecting && !S && T();
+			for (let t of e) t.isIntersecting && !S && w();
 		}, {
-			root: I,
+			root: L,
 			rootMargin: "0px 0px 80px 0px"
 		});
-		return e.observe(F), () => e.disconnect();
+		return e.observe(I), () => e.disconnect();
 	}, [
 		k,
+		w,
 		T,
-		E,
 		S,
-		F,
-		I
+		I,
+		L
 	]);
 	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) => {
+		d(e), A(!1);
+	}, st = (e) => {
+		e.stopPropagation(), d(""), P("");
+	}, ct = (e) => {
+		b || !v || h || !J || k || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), d(""));
+	}, lt = (e) => {
 		let t = e.target.value;
-		P(t), V(t, !1), k || A(!0);
-	}, Xe = (e) => {
+		D && !D(t) || (t !== N && (L && (L.scrollTop = 0), M(null)), P(t), H(t, !1), k || A(!0));
+	}, ut = (e) => {
 		if (!e.nativeEvent.isComposing) {
 			if (e.key === "Enter" && j !== null) {
 				e.preventDefault();
@@ -108,201 +118,203 @@ var l = i(function({ options: i, value: l, onChange: u, variant: De, selectSize:
 				t && !t.disabled && q(String(t.value));
 				return;
 			}
-			(e.key === "Backspace" || e.key === "Delete") && H && (!k || N === "") && (e.preventDefault(), u(""));
+			(e.key === "Backspace" || e.key === "Delete") && U && (!k || N === "") && (e.preventDefault(), d(""));
 		}
-	}, 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,
+	}, dt = Ae === "sustain" || Ae === "appear" && !!U, J = !!U, ft = U ? U.label : Me, pt = k ? N : U?.label ?? "", mt = ne[p], Y = te[p], ht = ee[p], X = re[p], gt = r[p], _t = ce(f, m, h, p), Z = se(m, h, J || k), Q = i[p], $ = h ? "text-fg-disabled" : m ? "text-fg-danger" : J ? "text-fg-default" : "text-fg-subtle";
+	return /* @__PURE__ */ l("div", {
+		ref: Fe,
+		className: e(ie(), "min-w-0"),
+		...Pe,
 		children: [
-			Ze && f && /* @__PURE__ */ s("label", {
-				className: ae(De, m),
-				htmlFor: C,
-				children: f
+			dt && ke && /* @__PURE__ */ c("label", {
+				className: oe(f, m),
+				htmlFor: z,
+				children: ke
 			}),
-			b ? /* @__PURE__ */ c("div", {
+			b ? /* @__PURE__ */ l("div", {
 				ref: (e) => {
 					G.setReference(e);
 				},
-				...Ue(),
-				className: `${nt} flex w-full items-center ${Y} ${h ? "cursor-not-allowed" : "cursor-text"} ${Ne}`.trim().replace(/\s+/g, " "),
+				...rt({ onClick: () => {
+					h || (F.current?.focus(), k || A(!0));
+				} }),
+				className: e(_t, "flex w-full min-w-0 items-center", mt, f !== "box" && "focus-within:border-primary", f !== "box" && f !== "line" && "focus-within:ring-control focus-within:ring-primary", h ? "cursor-not-allowed" : "cursor-text", C),
 				children: [
-					/* @__PURE__ */ s("input", {
+					/* @__PURE__ */ c("input", {
 						ref: (e) => {
-							Le.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+							F.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
 						},
-						id: C,
+						id: z,
 						type: "text",
 						role: "combobox",
 						readOnly: !k,
 						disabled: h,
 						"aria-haspopup": "listbox",
 						"aria-expanded": k,
-						"aria-controls": k ? L : void 0,
-						"aria-activedescendant": Ve,
+						"aria-controls": k ? R : void 0,
+						"aria-activedescendant": Xe,
 						"aria-autocomplete": "list",
-						"data-testid": Fe,
-						value: $e,
-						placeholder: H ? Ae : p,
-						onChange: Ye,
-						onKeyDown: Xe,
-						onClick: () => {
-							h || k || A(!0);
+						"data-testid": He,
+						value: pt,
+						placeholder: U ? Ne : Me,
+						onChange: lt,
+						onKeyDown: ut,
+						onFocus: () => {
+							ze && !h && !k && A(!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", Q, $, h && "cursor-not-allowed")
 					}),
-					g && /* @__PURE__ */ s("span", {
-						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
+					g && /* @__PURE__ */ c("span", {
+						className: e("shrink-0 whitespace-nowrap", Q, Z),
 						children: g
 					}),
-					_ && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${Q} ${X}`,
+					_ && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Z, Y),
 						children: _
 					}),
-					S && /* @__PURE__ */ s(le, { className: `shrink-0 text-icon-tertiary ${Z}` }),
-					v && !h && J && /* @__PURE__ */ s("button", {
+					S && /* @__PURE__ */ c(ue, { className: e("shrink-0 text-fg-subtle", X) }),
+					v && !h && J && /* @__PURE__ */ c("button", {
 						type: "button",
 						tabIndex: -1,
-						onClick: qe,
+						onClick: st,
 						"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: Z,
+						className: e("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: /* @__PURE__ */ c(n, {
+							className: X,
 							strokeWidth: 1.5,
 							"aria-hidden": !0
 						})
 					}),
-					y && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${X} ${et}`,
+					y && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Y, ht),
 						children: y
 					}),
-					/* @__PURE__ */ s(e, {
-						className: `shrink-0 transition-transform ${tt} ${Q} ${k ? "rotate-180" : ""}`,
+					/* @__PURE__ */ c(t, {
+						className: e("shrink-0 transition-transform", gt, Z, k && "rotate-180"),
 						strokeWidth: 1.5,
 						"aria-hidden": !0
 					})
 				]
-			}) : /* @__PURE__ */ c("button", {
+			}) : /* @__PURE__ */ l("button", {
 				ref: (e) => {
 					G.setReference(e), typeof O == "function" ? O(e) : O && (O.current = e);
 				},
-				id: C,
+				id: z,
 				type: "button",
 				disabled: h,
 				"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-controls": k ? R : void 0,
+				"aria-activedescendant": Xe,
+				"data-testid": He,
+				...rt({ onKeyDown: ct }),
+				className: e(_t, "flex w-full min-w-0 items-center", mt, h ? "cursor-not-allowed" : "cursor-pointer", C),
 				children: [
-					/* @__PURE__ */ s("span", {
-						className: `flex-1 truncate text-left ${$} ${rt}`,
-						children: Qe
+					/* @__PURE__ */ c("span", {
+						className: e("min-w-0 flex-1 truncate text-left", Q, $),
+						children: ft
 					}),
-					g && /* @__PURE__ */ s("span", {
-						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
+					g && /* @__PURE__ */ c("span", {
+						className: e("shrink-0 whitespace-nowrap", Q, Z),
 						children: g
 					}),
-					_ && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${Q} ${X}`,
+					_ && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Z, Y),
 						children: _
 					}),
-					v && !h && J && /* @__PURE__ */ s("span", {
+					v && !h && J && /* @__PURE__ */ c("span", {
 						role: "button",
 						tabIndex: -1,
-						onClick: qe,
+						onClick: st,
 						"aria-label": "선택 지우기",
-						className: `flex shrink-0 cursor-pointer items-center ${Q} hover:text-text-primary`,
-						children: /* @__PURE__ */ s(t, {
-							className: Z,
+						className: e("flex shrink-0 cursor-pointer items-center", Z, "hover:text-fg-default"),
+						children: /* @__PURE__ */ c(n, {
+							className: X,
 							strokeWidth: 1.5,
 							"aria-hidden": !0
 						})
 					}),
-					y && /* @__PURE__ */ s("span", {
-						className: `flex shrink-0 items-center ${X} ${et}`,
+					y && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Y, ht),
 						children: y
 					}),
-					/* @__PURE__ */ s(e, {
-						className: `shrink-0 transition-transform ${tt} ${Q} ${k ? "rotate-180" : ""}`,
+					/* @__PURE__ */ c(t, {
+						className: e("shrink-0 transition-transform", gt, Z, k && "rotate-180"),
 						strokeWidth: 1.5,
 						"aria-hidden": !0
 					})
 				]
 			}),
-			w && /* @__PURE__ */ s("input", {
+			Re && /* @__PURE__ */ c("input", {
 				type: "hidden",
-				name: w,
-				value: l
+				name: Re,
+				value: u
 			}),
-			k && /* @__PURE__ */ s(me, { children: /* @__PURE__ */ s(pe, {
+			k && /* @__PURE__ */ c(ge, { children: /* @__PURE__ */ c(he, {
 				context: K,
 				modal: !1,
 				initialFocus: b ? -1 : 0,
-				children: /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ c("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,
+					id: R,
+					style: nt,
+					...it(),
+					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface shadow-overlay", Ie),
+					children: /* @__PURE__ */ l("div", {
+						ref: qe,
 						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: [W.length === 0 ? /* @__PURE__ */ c("div", {
+							className: "px-3 py-4 text-center text-sm text-fg-subtle",
 							children: S ? "검색 중..." : "옵션이 없어요"
-						}) : W.map((e, t) => {
-							let n = String(e.value) === l, r = j === t;
-							return /* @__PURE__ */ c("div", {
-								id: Be(t),
+						}) : W.map((t, n) => {
+							let r = String(t.value) === u, i = j === n;
+							return /* @__PURE__ */ l("div", {
+								id: Ye(n),
 								ref: (e) => {
-									Ie.current[t] = e;
+									Ge.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,
+								...at({
 									onClick: () => {
-										e.disabled || q(String(e.value));
+										t.disabled || q(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(), q(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__ */ l("div", {
 									className: "min-w-0 flex-1",
-									children: [/* @__PURE__ */ s("div", {
+									children: [/* @__PURE__ */ c("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__ */ c("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__ */ c("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));
+						}), w && T && /* @__PURE__ */ c("div", {
+							ref: Ke,
 							"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: S && /* @__PURE__ */ c(ue, {})
 						})]
 					})
 				})
 			}) }),
-			ke && /* @__PURE__ */ s("div", {
-				className: ie(m),
-				children: ke
+			je && /* @__PURE__ */ c("div", {
+				className: ae(m),
+				children: je
 			})
 		]
 	});
 });
 //#endregion
-export { l as Select };
+export { u 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/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;

package/dist/components/skeleton/Skeleton.esm.js

@@ -0,0 +1,12 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		...r,
+		"aria-hidden": "true",
+		className: e("animate-pulse rounded-control-small bg-bg-muted motion-reduce:animate-none", n)
+	});
+}
+//#endregion
+export { n as Skeleton };

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps } from './types.js';

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-hidden">;

package/dist/components/stepper/Stepper.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../animated-height/AnimatedHeight.cjs");let n=require("react/jsx-runtime"),r=require("motion/react");function i(e,t){if(t.reducedMotion||t.transition===`none`||e===`center`)return{opacity:1,x:0,y:0,scale:1};if(t.transition===`fade`)return{opacity:0,x:0,y:0,scale:1};if(t.transition===`scale`)return{opacity:0,x:0,y:0,scale:e===`enter`?.98:1.02};let n=c(t.slideDirection),r=e===`enter`?t.direction:-t.direction;return{opacity:0,x:(n.x??0)*r,y:(n.y??0)*r,scale:1}}var a={enter:e=>i(`enter`,e),center:e=>i(`center`,e),exit:e=>i(`exit`,e)};function o({steps:r,currentStep:i,orientation:a=`horizontal`,allowNonLinear:o=!1,onStepChange:c,renderStepContent:l,stepContentTransition:u=`height`,className:d}){return(0,n.jsx)(`ol`,{className:e.cn(`flex`,a===`horizontal`?`w-full items-start`:`flex-col gap-5`,d),"aria-label":`진행 단계`,children:r.map((d,f)=>{let p=f<i?`completed`:f===i?`current`:`pending`,m=o&&!!c,h=a===`vertical`?l?.({step:d,index:f,status:p}):null,g=(0,n.jsx)(`span`,{className:e.cn(`flex h-7 w-7 shrink-0 items-center justify-center rounded-chip border text-xs font-semibold transition-colors`,p===`current`&&`border-primary bg-primary text-fg-inverse`,p===`completed`&&`border-primary bg-primary-subtle text-primary-fg`,p===`pending`&&`border-border-subtle bg-bg-surface text-fg-subtle`),"aria-hidden":`true`,children:f+1});return(0,n.jsxs)(`li`,{className:e.cn(`relative flex min-w-0`,a===`horizontal`?`flex-1 items-start`:`grid grid-cols-[1.75rem_minmax(0,1fr)] gap-x-3`),"aria-current":p===`current`?`step`:void 0,"data-status":p,children:[m?(0,n.jsxs)(`button`,{type:`button`,className:e.cn(`flex min-w-0 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary`,a===`horizontal`?`w-full flex-col items-center gap-1.5`:`col-span-2 grid grid-cols-[1.75rem_minmax(0,1fr)] items-center gap-x-3`),onClick:()=>c?.(f),"aria-label":`${f+1}단계: ${d.label}`,children:[g,(0,n.jsx)(s,{step:d,orientation:a,status:p})]}):(0,n.jsxs)(`div`,{className:e.cn(`flex min-w-0`,a===`horizontal`?`w-full flex-col items-center gap-1.5 text-center`:`col-span-2 grid grid-cols-[1.75rem_minmax(0,1fr)] items-center gap-x-3`),children:[g,(0,n.jsx)(s,{step:d,orientation:a,status:p})]}),a===`vertical`&&l&&(0,n.jsx)(`div`,{className:`col-start-2 min-w-0`,"data-step-content":d.id,children:(0,n.jsx)(t.AnimatedHeight,{durationMs:u===`height`?220:0,children:(0,n.jsx)(`div`,{hidden:p===`pending`,className:`px-3 pt-3`,children:h})})}),f<r.length-1&&(0,n.jsx)(`span`,{className:e.cn(`absolute bg-border-subtle`,a===`horizontal`?`left-[calc(50%+18px)] right-[calc(-50%+18px)] top-3.5 h-px`:`left-3.5 top-9 h-[calc(100%+4px)] w-px`),"aria-hidden":`true`})]},d.id)})})}function s({step:t,orientation:r,status:i}){return(0,n.jsxs)(`span`,{className:e.cn(`min-w-0`,r===`horizontal`&&`px-1`),children:[(0,n.jsx)(`span`,{className:e.cn(`block truncate font-medium`,r===`horizontal`?`text-xs`:`text-sm`,i===`current`&&`text-fg-default`,i===`completed`&&`text-fg-muted`,i===`pending`&&`text-fg-subtle`),children:t.label}),t.description&&(0,n.jsx)(`span`,{className:`mt-0.5 hidden text-xs text-fg-muted sm:block`,children:t.description})]})}function c(e){return e===`left`?{x:20}:e===`right`?{x:-20}:e===`up`?{y:20}:{y:-20}}function l({stepKey:e,direction:t=1,transition:i=`fade`,slideDirection:a=`left`,children:o,className:s}){let c={direction:t,transition:i,slideDirection:a,reducedMotion:!!(0,r.useReducedMotion)()};return(0,n.jsx)(r.AnimatePresence,{mode:`wait`,initial:!1,custom:c,children:(0,n.jsx)(u,{className:s,custom:c,children:o},e)})}function u({custom:e,className:t,children:i}){return(0,n.jsx)(r.motion.div,{className:t,custom:e,variants:a,initial:`enter`,animate:`center`,exit:`exit`,transition:{duration:e.reducedMotion||e.transition===`none`?0:.18},children:i})}exports.Stepper=o,exports.StepperContent=l;