@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/segmented-control/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlOption<V extends string> {
+    /** 이 칸이 나타내는 값. */
+    value: V;
+    /** 칸에 표시할 라벨. */
+    label: ReactNode;
+    /** 라벨 앞에 표시할 선택적 아이콘. */
+    icon?: ReactNode;
+    /** 이 칸만 개별적으로 비활성화합니다. */
+    disabled?: boolean;
+}
+export interface SegmentedControlProps<V extends string> {
+    /** 현재 선택된 값. */
+    value: V;
+    /** 값이 바뀌면 호출됩니다. */
+    onChange: (next: V) => void;
+    /** 표시할 옵션 목록. */
+    options: readonly SegmentedControlOption<V>[];
+    /**
+     * 내부 네이티브 radio input들이 공유할 `name`.
+     * @default useId()로 생성된 고유 값
+     */
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** 전체 컨트롤을 비활성화합니다. */
+    disabled?: boolean;
+    /** 컨테이너에 추가할 클래스. */
+    className?: string;
+}

package/dist/components/select/MultiSelect.cjs

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

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

@@ -1,4 +1,4 @@
-import { SelectCommonProps, SelectOption } from './types';
+import { SelectCommonProps, SelectOption } from './types.js';
 /**
  * MultiSelect의 search 관련 props discriminated union.
  * `searchable=true`일 때만 검색 prop이 의미가 있다 — Select와 동일 패턴.
@@ -12,7 +12,11 @@ type MultiSelectSearchProps = {
     searchable: true;
     /** 패널 검색 input placeholder. */
     searchPlaceholder?: string;
-    /** 외부 검색(서버) 콜백. 제공 시 클라이언트 필터를 끄고 입력만 외부에 전달. */
+    /**
+     * 외부 검색(서버) 콜백. 제공 시 클라이언트 필터를 끄고 입력만 외부에 전달.
+     * 마운트 시점에는 호출되지 않으며, 한 번 열렸다 닫힐 때 빈 문자열로 호출된다.
+     * 초기 옵션은 소비자가 직접 불러온다.
+     */
     onSearchChange?: (query: string) => void;
     /** 외부 검색 로딩 상태. 패널 검색 input 옆 LoadingDots. */
     isSearchLoading?: boolean;
@@ -26,7 +30,11 @@ type MultiSelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceh
     onChange: (values: string[]) => void;
     /** 트리거 추가 className. */
     className?: string;
-    /** 드롭다운 패널 추가 className. */
+    /**
+     * 드롭다운 패널 추가 className. 긴 라벨이 패널을 뷰포트 밖으로 밀어내지 않도록 인라인 maxWidth가
+     * 패널 폭을 `max(트리거 폭, min(가용 폭, 420px))`로 제한하므로 `max-w-*`/`min-w-*`로
+     * 이 범위를 넘길 수 없다. 범위 안에서는 `w-*`로 지정하고, 더 큰 폭이 필요하면 트리거 폭을 조정한다.
+     */
     panelClassName?: string;
     /**
      * 트리거에 보여줄 풀 텍스트 포맷터. 기본은 라벨을 콤마로 연결.

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

@@ -0,0 +1,279 @@
+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 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";
+//#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();
+		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,
+		placement: "bottom-start",
+		whileElementsMounted: me,
+		middleware: [
+			ge(4),
+			he({ padding: 8 }),
+			_e({ padding: 8 }),
+			ve({
+				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: 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,
+			loop: !0
+		})
+	]), et = d(!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);
+			return;
+		}
+		let e = He.current, t = Ue.current;
+		if (!e || !t) return;
+		let n = () => {
+			let n = t.scrollWidth, r = e.clientWidth;
+			R(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)));
+	}, 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)));
+		} else {
+			let e = new Set([...h, ...J]);
+			g(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);
+	}, at = (e) => {
+		if (!e.nativeEvent.isComposing && e.key === "Enter" && P !== null) {
+			e.preventDefault();
+			let t = U[P];
+			t && !t.disabled && q(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,
+		className: e(ie(), "min-w-0"),
+		...Ae,
+		children: [
+			!A && X && /* @__PURE__ */ p("span", {
+				ref: Ue,
+				"aria-hidden": !0,
+				className: e("pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap", $),
+				children: st
+			}),
+			ot && v && /* @__PURE__ */ p("label", {
+				className: oe(De, x),
+				htmlFor: Ge,
+				children: v
+			}),
+			/* @__PURE__ */ m("button", {
+				ref: (e) => {
+					Ye.setReference(e), typeof M == "function" ? M(e) : M && (M.current = e);
+				},
+				id: Ge,
+				type: "button",
+				disabled: S,
+				"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),
+				children: [
+					/* @__PURE__ */ p("span", {
+						ref: He,
+						className: e("min-w-0 flex-1 truncate text-left", $, ht),
+						children: lt
+					}),
+					C && /* @__PURE__ */ p("span", {
+						className: e("shrink-0 whitespace-nowrap", $, Q),
+						children: C
+					}),
+					w && /* @__PURE__ */ p("span", {
+						className: e("flex shrink-0 items-center", Q, Z),
+						children: w
+					}),
+					T && !S && X && /* @__PURE__ */ p("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,
+							strokeWidth: 1.5,
+							"aria-hidden": !0
+						})
+					}),
+					E && /* @__PURE__ */ p("span", {
+						className: e("flex shrink-0 items-center", Z, dt),
+						children: E
+					}),
+					/* @__PURE__ */ p(n, {
+						className: e("shrink-0 transition-transform", pt, Q, N && "rotate-180"),
+						strokeWidth: 1.5,
+						"aria-hidden": !0
+					})
+				]
+			}),
+			j && /* @__PURE__ */ p("input", {
+				type: "hidden",
+				name: j,
+				value: h.join(",")
+			}),
+			N && /* @__PURE__ */ p(pe, { children: /* @__PURE__ */ p(fe, {
+				context: K,
+				modal: !1,
+				initialFocus: D ? -1 : 0,
+				children: /* @__PURE__ */ m("div", {
+					ref: Ye.setFloating,
+					id: V,
+					style: Xe,
+					...Qe(),
+					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface text-fg-default shadow-overlay", Ne),
+					children: [
+						D && /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-2 border-b border-border-subtle px-3 py-2",
+							children: [
+								/* @__PURE__ */ p(i, {
+									className: "h-4 w-4 shrink-0 text-fg-subtle",
+									"aria-hidden": !0
+								}),
+								/* @__PURE__ */ p("input", {
+									ref: z,
+									type: "text",
+									value: I,
+									onChange: it,
+									onKeyDown: at,
+									placeholder: ke,
+									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" })
+							]
+						}),
+						Ie && U.length > 0 && /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: nt,
+							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", {
+								className: "text-fg-subtle",
+								children: [J.length, "개"]
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							ref: B,
+							className: "max-h-72 overflow-y-auto py-1",
+							children: U.length === 0 ? /* @__PURE__ */ p("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),
+									ref: (e) => {
+										Ve.current[r] = e;
+									},
+									role: "option",
+									"aria-selected": a,
+									"aria-disabled": n.disabled || void 0,
+									tabIndex: o ? 0 : -1,
+									...$e({
+										onClick: () => {
+											n.disabled || q(i);
+										},
+										onKeyDown: (e) => {
+											n.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q(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", {
+											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, {
+												className: "h-3 w-3",
+												strokeWidth: 3
+											})
+										}),
+										/* @__PURE__ */ m("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ p("div", {
+												className: e("truncate", a && "font-medium"),
+												children: n.label
+											}), n.description && /* @__PURE__ */ p("div", {
+												className: "mt-0.5 truncate text-xs text-fg-subtle",
+												children: n.description
+											})]
+										}),
+										n.trailing && /* @__PURE__ */ p("span", {
+											className: "shrink-0 text-xs text-fg-subtle",
+											children: n.trailing
+										})
+									]
+								}, i);
+							})
+						})
+					]
+				})
+			}) }),
+			b && /* @__PURE__ */ p("div", {
+				className: ae(x),
+				children: b
+			})
+		]
+	});
+});
+//#endregion
+export { h 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,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;

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;
 /**