@thewrong/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,277 @@
+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";
+//#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));
+	}, [
+		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,
+		placement: "bottom-start",
+		whileElementsMounted: pe,
+		middleware: [
+			he(4),
+			me({ padding: 8 }),
+			ge({ padding: 8 }),
+			_e({
+				apply({ rects: e, elements: t, availableHeight: n }) {
+					Object.assign(t.floating.style, {
+						minWidth: `${e.reference.width}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,
+			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);
+			return;
+		}
+		let e = B.current, t = V.current;
+		if (!e || !t) return;
+		let n = () => {
+			let n = t.scrollWidth, r = e.clientWidth;
+			L(n > r - 1);
+		};
+		n();
+		let r = new ResizeObserver(() => {
+			requestAnimationFrame(n);
+		});
+		return r.observe(e), () => r.disconnect();
+	}, [O, p.join(",")]);
+	let J = (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)));
+		} else {
+			let e = new Set([...p, ...Y]);
+			m(o.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) => {
+		let t = e.target.value;
+		I(t), U && E(t);
+	}, Ze = (e) => {
+		if (!e.nativeEvent.isComposing && e.key === "Enter" && N !== null) {
+			e.preventDefault();
+			let t = W[N];
+			t && !t.disabled && J(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,
+		children: [
+			!O && X && /* @__PURE__ */ d("span", {
+				ref: V,
+				"aria-hidden": !0,
+				className: `pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap ${$}`,
+				children: $e
+			}),
+			Qe && g && /* @__PURE__ */ d("label", {
+				className: ae(Ee, y),
+				htmlFor: k,
+				children: g
+			}),
+			/* @__PURE__ */ f("button", {
+				ref: (e) => {
+					Ve.setReference(e), typeof j == "function" ? j(e) : j && (j.current = e);
+				},
+				id: k,
+				type: "button",
+				disabled: b,
+				"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, " "),
+				children: [
+					/* @__PURE__ */ d("span", {
+						ref: B,
+						className: `flex-1 truncate text-left ${$} ${st}`,
+						children: tt
+					}),
+					x && /* @__PURE__ */ d("span", {
+						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
+						children: x
+					}),
+					S && /* @__PURE__ */ d("span", {
+						className: `flex shrink-0 items-center ${Q} ${Z}`,
+						children: S
+					}),
+					C && !b && X && /* @__PURE__ */ d("span", {
+						role: "button",
+						tabIndex: -1,
+						onClick: Ke,
+						"aria-label": "선택 모두 지우기",
+						className: `flex shrink-0 cursor-pointer items-center ${Q} hover:text-text-primary`,
+						children: /* @__PURE__ */ d(n, {
+							className: it,
+							strokeWidth: 1.5,
+							"aria-hidden": !0
+						})
+					}),
+					w && /* @__PURE__ */ d("span", {
+						className: `flex shrink-0 items-center ${Z} ${rt}`,
+						children: w
+					}),
+					/* @__PURE__ */ d(t, {
+						className: `shrink-0 transition-transform ${at} ${Q} ${M ? "rotate-180" : ""}`,
+						strokeWidth: 1.5,
+						"aria-hidden": !0
+					})
+				]
+			}),
+			A && /* @__PURE__ */ d("input", {
+				type: "hidden",
+				name: A,
+				value: p.join(",")
+			}),
+			M && /* @__PURE__ */ d(fe, { children: /* @__PURE__ */ d(de, {
+				context: q,
+				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}`,
+					children: [
+						T && /* @__PURE__ */ f("div", {
+							className: "flex items-center gap-2 border-b border-border-tertiary px-3 py-2 dark:border-border-secondary",
+							children: [
+								/* @__PURE__ */ d(r, {
+									className: "h-4 w-4 shrink-0 text-icon-tertiary",
+									"aria-hidden": !0
+								}),
+								/* @__PURE__ */ d("input", {
+									ref: z,
+									type: "text",
+									value: F,
+									onChange: Xe,
+									onKeyDown: Ze,
+									placeholder: Oe,
+									className: "flex-1 bg-transparent text-sm outline-hidden placeholder:text-text-tertiary"
+								}),
+								D && /* @__PURE__ */ d(ce, { className: "h-4 w-4 shrink-0 text-icon-tertiary" })
+							]
+						}),
+						Fe && W.length > 0 && /* @__PURE__ */ f("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, "개"]
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							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),
+									ref: (e) => {
+										R.current[n] = e;
+									},
+									role: "option",
+									"aria-selected": i,
+									"aria-disabled": t.disabled || void 0,
+									tabIndex: a ? 0 : -1,
+									...Ge({
+										onClick: () => {
+											t.disabled || J(r);
+										},
+										onKeyDown: (e) => {
+											t.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), J(r));
+										}
+									}),
+									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"}`,
+									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"}`,
+											"aria-hidden": !0,
+											children: i && /* @__PURE__ */ d(e, {
+												className: "h-3 w-3",
+												strokeWidth: 3
+											})
+										}),
+										/* @__PURE__ */ f("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
+											})]
+										}),
+										t.trailing && /* @__PURE__ */ d("span", {
+											className: "shrink-0 text-xs text-text-tertiary",
+											children: t.trailing
+										})
+									]
+								}, r);
+							})
+						})
+					]
+				})
+			}) }),
+			v && /* @__PURE__ */ d("div", {
+				className: ie(y),
+				children: v
+			})
+		]
+	});
+});
+//#endregion
+export { p as MultiSelect };

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

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

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

@@ -0,0 +1,308 @@
+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";
+//#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));
+	}, [
+		i,
+		b,
+		R,
+		N,
+		U
+	]), { refs: G, floatingStyles: He, context: K } = Se({
+		open: k,
+		onOpenChange: A,
+		placement: "bottom-start",
+		whileElementsMounted: he,
+		middleware: [
+			_e(4),
+			ge({ padding: 8 }),
+			ve({ padding: 8 }),
+			ye({
+				apply({ rects: e, elements: t, availableHeight: n }) {
+					Object.assign(t.floating.style, {
+						minWidth: `${e.reference.width}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,
+			loop: !0
+		}),
+		Ee(K, {
+			listRef: { current: W.map((e) => e.label) },
+			activeIndex: j,
+			onMatch: M,
+			enabled: !b
+		})
+	]), Ke = a(!1);
+	ue(() => {
+		if (k) {
+			if (Ke.current = !0, b) {
+				let e = H?.label ?? "";
+				P(e), e !== "" && requestAnimationFrame(() => {
+					Le.current?.select();
+				});
+			}
+		} else P(""), M(null), Ke.current && V("", !0);
+	}, [
+		k,
+		b,
+		R,
+		x
+	]), ue(() => {
+		if (!k || !T || !E || !F || !I) return;
+		let e = new IntersectionObserver((e) => {
+			for (let t of e) t.isIntersecting && !S && T();
+		}, {
+			root: I,
+			rootMargin: "0px 0px 80px 0px"
+		});
+		return e.observe(F), () => e.disconnect();
+	}, [
+		k,
+		T,
+		E,
+		S,
+		F,
+		I
+	]);
+	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 t = e.target.value;
+		P(t), V(t, !1), k || A(!0);
+	}, Xe = (e) => {
+		if (!e.nativeEvent.isComposing) {
+			if (e.key === "Enter" && j !== null) {
+				e.preventDefault();
+				let t = W[j];
+				t && !t.disabled && q(String(t.value));
+				return;
+			}
+			(e.key === "Backspace" || e.key === "Delete") && H && (!k || N === "") && (e.preventDefault(), u(""));
+		}
+	}, 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,
+		children: [
+			Ze && f && /* @__PURE__ */ s("label", {
+				className: ae(De, m),
+				htmlFor: C,
+				children: f
+			}),
+			b ? /* @__PURE__ */ c("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, " "),
+				children: [
+					/* @__PURE__ */ s("input", {
+						ref: (e) => {
+							Le.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+						},
+						id: C,
+						type: "text",
+						role: "combobox",
+						readOnly: !k,
+						disabled: h,
+						"aria-haspopup": "listbox",
+						"aria-expanded": k,
+						"aria-controls": k ? L : void 0,
+						"aria-activedescendant": Ve,
+						"aria-autocomplete": "list",
+						"data-testid": Fe,
+						value: $e,
+						placeholder: H ? Ae : p,
+						onChange: Ye,
+						onKeyDown: Xe,
+						onClick: () => {
+							h || k || A(!0);
+						},
+						className: `flex-1 bg-transparent text-left outline-hidden ${$} ${rt} ${h ? "cursor-not-allowed" : ""} placeholder:text-text-tertiary`
+					}),
+					g && /* @__PURE__ */ s("span", {
+						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
+						children: g
+					}),
+					_ && /* @__PURE__ */ s("span", {
+						className: `flex shrink-0 items-center ${Q} ${X}`,
+						children: _
+					}),
+					S && /* @__PURE__ */ s(le, { className: `shrink-0 text-icon-tertiary ${Z}` }),
+					v && !h && J && /* @__PURE__ */ s("button", {
+						type: "button",
+						tabIndex: -1,
+						onClick: qe,
+						"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,
+							strokeWidth: 1.5,
+							"aria-hidden": !0
+						})
+					}),
+					y && /* @__PURE__ */ s("span", {
+						className: `flex shrink-0 items-center ${X} ${et}`,
+						children: y
+					}),
+					/* @__PURE__ */ s(e, {
+						className: `shrink-0 transition-transform ${tt} ${Q} ${k ? "rotate-180" : ""}`,
+						strokeWidth: 1.5,
+						"aria-hidden": !0
+					})
+				]
+			}) : /* @__PURE__ */ c("button", {
+				ref: (e) => {
+					G.setReference(e), typeof O == "function" ? O(e) : O && (O.current = e);
+				},
+				id: C,
+				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, " "),
+				children: [
+					/* @__PURE__ */ s("span", {
+						className: `flex-1 truncate text-left ${$} ${rt}`,
+						children: Qe
+					}),
+					g && /* @__PURE__ */ s("span", {
+						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
+						children: g
+					}),
+					_ && /* @__PURE__ */ s("span", {
+						className: `flex shrink-0 items-center ${Q} ${X}`,
+						children: _
+					}),
+					v && !h && J && /* @__PURE__ */ s("span", {
+						role: "button",
+						tabIndex: -1,
+						onClick: qe,
+						"aria-label": "선택 지우기",
+						className: `flex shrink-0 cursor-pointer items-center ${Q} hover:text-text-primary`,
+						children: /* @__PURE__ */ s(t, {
+							className: Z,
+							strokeWidth: 1.5,
+							"aria-hidden": !0
+						})
+					}),
+					y && /* @__PURE__ */ s("span", {
+						className: `flex shrink-0 items-center ${X} ${et}`,
+						children: y
+					}),
+					/* @__PURE__ */ s(e, {
+						className: `shrink-0 transition-transform ${tt} ${Q} ${k ? "rotate-180" : ""}`,
+						strokeWidth: 1.5,
+						"aria-hidden": !0
+					})
+				]
+			}),
+			w && /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: w,
+				value: l
+			}),
+			k && /* @__PURE__ */ s(me, { children: /* @__PURE__ */ s(pe, {
+				context: K,
+				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,
+						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),
+								ref: (e) => {
+									Ie.current[t] = e;
+								},
+								role: "option",
+								"aria-selected": n,
+								"aria-disabled": e.disabled || void 0,
+								tabIndex: r ? 0 : -1,
+								...Ge({
+									onClick: () => {
+										e.disabled || q(String(e.value));
+									},
+									onKeyDown: (t) => {
+										e.disabled || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), q(String(e.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: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ s("div", {
+										className: "truncate",
+										children: e.label
+									}), e.description && /* @__PURE__ */ s("div", {
+										className: "mt-0.5 truncate text-xs text-text-tertiary",
+										children: e.description
+									})]
+								}), e.trailing && /* @__PURE__ */ s("span", {
+									className: "shrink-0 text-xs text-text-tertiary",
+									children: e.trailing
+								})]
+							}, String(e.value));
+						}), T && E && /* @__PURE__ */ s("div", {
+							ref: Re,
+							"aria-hidden": !0,
+							className: "flex items-center justify-center px-3 py-3 text-text-tertiary",
+							children: S && /* @__PURE__ */ s(le, {})
+						})]
+					})
+				})
+			}) }),
+			ke && /* @__PURE__ */ s("div", {
+				className: ie(m),
+				children: ke
+			})
+		]
+	});
+});
+//#endregion
+export { l as Select };

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

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

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

@@ -0,0 +1,23 @@
+import { jsx as e, jsxs as t } 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}`,
+	"aria-label": "로딩 중",
+	role: "status",
+	children: [
+		/* @__PURE__ */ e("span", {
+			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
+			style: { animationDelay: "0ms" }
+		}),
+		/* @__PURE__ */ e("span", {
+			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
+			style: { animationDelay: "200ms" }
+		}),
+		/* @__PURE__ */ e("span", {
+			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
+			style: { animationDelay: "400ms" }
+		})
+	]
+});
+//#endregion
+export { n as LoadingDots };

package/dist/components/switch/Switch.cjs.js

@@ -0,0 +1 @@
+const e=require("./utils.cjs.js");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(({size:t=`medium`,label:r,className:i=``,disabled:a=!1,onCheckedChange:o,onChange:s,...c},l)=>(0,n.jsxs)(`label`,{className:`inline-flex items-center gap-2 ${a?`cursor-not-allowed`:`cursor-pointer`} ${i}`,children:[(0,n.jsxs)(`span`,{className:`relative inline-flex items-center`,children:[(0,n.jsx)(`input`,{ref:l,type:`checkbox`,className:`peer sr-only`,disabled:a,onChange:e=>{s?.(e),o?.(e.target.checked)},...c}),(0,n.jsx)(`span`,{"aria-hidden":!0,className:e.getSwitchTrackClasses(t,a)}),(0,n.jsx)(`span`,{"aria-hidden":!0,className:e.getSwitchThumbClasses(t)})]}),r&&(0,n.jsx)(`span`,{className:a?`text-sm text-text-disabled`:`text-sm text-text-primary`,children:r})]}));r.displayName=`Switch`,exports.Switch=r;

package/dist/components/switch/Switch.esm.js

@@ -0,0 +1,36 @@
+import { getSwitchThumbClasses as e, getSwitchTrackClasses as t } from "./utils.esm.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/switch/Switch.tsx
+var a = n(({ size: n = "medium", label: a, className: o = "", disabled: s = !1, onCheckedChange: c, onChange: l, ...u }, d) => /* @__PURE__ */ i("label", {
+	className: `inline-flex items-center gap-2 ${s ? "cursor-not-allowed" : "cursor-pointer"} ${o}`,
+	children: [/* @__PURE__ */ i("span", {
+		className: "relative inline-flex items-center",
+		children: [
+			/* @__PURE__ */ r("input", {
+				ref: d,
+				type: "checkbox",
+				className: "peer sr-only",
+				disabled: s,
+				onChange: (e) => {
+					l?.(e), c?.(e.target.checked);
+				},
+				...u
+			}),
+			/* @__PURE__ */ r("span", {
+				"aria-hidden": !0,
+				className: t(n, s)
+			}),
+			/* @__PURE__ */ r("span", {
+				"aria-hidden": !0,
+				className: e(n)
+			})
+		]
+	}), a && /* @__PURE__ */ r("span", {
+		className: s ? "text-sm text-text-disabled" : "text-sm text-text-primary",
+		children: a
+	})]
+}));
+a.displayName = "Switch";
+//#endregion
+export { a as Switch };

package/dist/components/switch/utils.cjs.js

@@ -0,0 +1 @@
+var e={small:{track:`h-5 w-9`,thumb:`h-3.5 w-3.5`,translate:`peer-checked:translate-x-4`},medium:{track:`h-6 w-11`,thumb:`h-4.5 w-4.5`,translate:`peer-checked:translate-x-5`}};function t(t,n){let{track:r}=e[t];return n?[`relative inline-flex shrink-0 items-center rounded-full`,r,`bg-bg-disabled cursor-not-allowed`].join(` `):[`relative inline-flex shrink-0 items-center rounded-full cursor-pointer`,r,`bg-neutral-200 dark:bg-neutral-700`,`peer-checked:bg-primary-500`,`peer-focus-visible:ring-2 peer-focus-visible:ring-primary-300 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-card`,`transition-colors duration-200 ease-out`].join(` `)}function n(t){let{thumb:n,translate:r}=e[t];return[`pointer-events-none absolute left-[3px] top-[3px] inline-block rounded-full bg-white shadow-sm`,n,r,`transition-transform duration-200 ease-out`].join(` `)}exports.getSwitchThumbClasses=n,exports.getSwitchTrackClasses=t;