@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/search-box/ExactMatchToggle.esm.js

@@ -0,0 +1,28 @@
+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 { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/search-box/ExactMatchToggle.tsx
+function i({ value: i, onChange: a, size: o }) {
+	let s = o === "mini", c = s ? "text-xs" : "text-sm";
+	return /* @__PURE__ */ r("label", {
+		className: "inline-flex cursor-pointer items-center gap-1 select-none",
+		children: [
+			/* @__PURE__ */ n("input", {
+				type: "checkbox",
+				checked: i,
+				onChange: (e) => a(e.target.checked),
+				className: "peer sr-only"
+			}),
+			/* @__PURE__ */ n(t, {
+				className: e(s ? "h-3.5 w-3.5" : "h-4 w-4", "stroke-3 transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-focus-primary peer-focus-visible:outline-offset-1", i ? "text-primary-fg" : "text-icon-tertiary"),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: e(c, "font-medium transition-colors", i ? "text-primary-fg" : "text-fg-subtle"),
+				children: "완전일치"
+			})
+		]
+	});
+}
+//#endregion
+export { i as ExactMatchToggle };

package/dist/components/search-box/SearchBox.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/list-filter.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.cjs"),i=require("../../node_modules/lucide-react/dist/esm/icons/search.cjs"),a=require("../../hooks/useMediaQuery.cjs"),o=require("../modal/StandardModal.cjs"),s=require("./ExactMatchToggle.cjs"),c=require("./SearchBoxChips.cjs"),l=require("./SearchBoxSheetContext.cjs"),u=require("./SearchBoxField.cjs"),d=require("./useSearchBoxState.cjs");let f=require("react"),p=require("react/jsx-runtime");function m({fields:m,values:g,onSearch:_,onClear:v,isSubmitting:y=!1,exactMatch:b,className:x=``}){let S=a.useIsMobile(),C=S?`mini`:`small`,[w,T]=(0,f.useState)(!1),{draft:E,setFieldValue:D,submit:O,clear:k,chips:A,removeChip:j}=d.useSearchBoxState({fields:m,values:g,onSearch:_,onClear:v}),M=()=>y?!1:O(),N=()=>{M()&&T(!1)};return S?(0,p.jsxs)(`div`,{className:e.cn(`w-full`,x),children:[(0,p.jsxs)(`div`,{className:`flex w-full items-center justify-end gap-1`,children:[(0,p.jsx)(h,{label:`초기화`,onClick:k,variant:`ghost`,icon:(0,p.jsx)(r.RotateCcw,{className:`h-4 w-4`})}),(0,p.jsx)(h,{label:`검색`,onClick:M,disabled:y,variant:`primary`,icon:(0,p.jsx)(i.Search,{className:`h-4 w-4`})}),(0,p.jsx)(h,{label:`필터`,onClick:()=>T(!0),variant:`ghost`,icon:(0,p.jsx)(n.ListFilter,{className:`h-4 w-4`}),activeDot:A.length>0})]}),A.length>0&&(0,p.jsx)(`div`,{className:`mt-2`,children:(0,p.jsx)(c.SearchBoxChips,{chips:A,onRemove:j})}),(0,p.jsx)(o.StandardModal,{isOpen:w,onClose:()=>T(!1),title:`필터`,primaryAction:{label:`적용`,onClick:N,loading:y},secondaryAction:{label:`닫기`,onClick:()=>T(!1)},children:(0,p.jsx)(l.SearchBoxSheetContext.Provider,{value:!0,children:(0,p.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[m.filter(e=>!e.hidden).map(e=>(0,p.jsx)(u.SearchBoxField,{field:e,value:E[e.key]??``,onChange:t=>D(e.key,t),onEnter:N,size:`small`},e.key)),b&&(0,p.jsx)(`div`,{className:`flex justify-end`,children:(0,p.jsx)(s.ExactMatchToggle,{value:b.value,onChange:b.onChange,size:`small`})})]})})})]}):(0,p.jsxs)(`div`,{className:e.cn(`w-full`,x),children:[(0,p.jsxs)(`div`,{className:`flex w-full flex-wrap items-start gap-x-3 gap-y-2`,children:[m.filter(e=>!e.hidden).map(e=>(0,p.jsx)(`div`,{className:e.className??`w-44`,children:(0,p.jsx)(u.SearchBoxField,{field:e,value:E[e.key]??``,onChange:t=>D(e.key,t),onEnter:M,size:C})},e.key)),(0,p.jsxs)(`div`,{className:`ml-auto flex items-center gap-3`,children:[b&&(0,p.jsx)(s.ExactMatchToggle,{value:b.value,onChange:b.onChange,size:C}),(0,p.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,p.jsx)(t.Button,{variant:`tertiary`,appearance:`outlined`,size:C,onClick:k,leadingIcon:(0,p.jsx)(r.RotateCcw,{className:`h-3.5 w-3.5`}),className:`h-10`,children:`초기화`}),(0,p.jsx)(t.Button,{variant:`primary`,size:C,onClick:M,loading:y,leadingIcon:(0,p.jsx)(i.Search,{className:`h-3.5 w-3.5`}),className:`h-10`,children:`검색`})]})]})]}),A.length>0&&(0,p.jsx)(`div`,{className:`mt-2`,children:(0,p.jsx)(c.SearchBoxChips,{chips:A,onRemove:j})})]})}function h({label:t,onClick:n,icon:r,variant:i,disabled:a,activeDot:o}){return(0,p.jsxs)(`button`,{type:`button`,"aria-label":t,onClick:n,disabled:a,className:e.cn(`relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50`,i===`primary`?`bg-primary text-fg-inverse hover:bg-primary-hover`:`text-icon-secondary hover:bg-bg-muted`),children:[r,o&&(0,p.jsx)(`span`,{className:`absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary`})]})}exports.SearchBox=m;

package/dist/{src/components → components}/search-box/SearchBox.d.ts

@@ -1,4 +1,4 @@
-import { SearchField, SearchValues } from './types';
+import { SearchField, SearchValues } from './types.js';
 interface Props {
     /** 호출부가 `as const satisfies readonly SearchField[]` 패턴을 쓰면 parseSearchValues가
      * 타입을 정확히 추론하므로 readonly 시그니처로 받는다. */

package/dist/components/search-box/SearchBox.esm.js

@@ -0,0 +1,155 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { ListFilter as n } from "../../node_modules/lucide-react/dist/esm/icons/list-filter.esm.js";
+import { RotateCcw as r } from "../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.esm.js";
+import { Search as i } from "../../node_modules/lucide-react/dist/esm/icons/search.esm.js";
+import { useIsMobile as a } from "../../hooks/useMediaQuery.esm.js";
+import { StandardModal as o } from "../modal/StandardModal.esm.js";
+import { ExactMatchToggle as s } from "./ExactMatchToggle.esm.js";
+import { SearchBoxChips as c } from "./SearchBoxChips.esm.js";
+import { SearchBoxSheetContext as l } from "./SearchBoxSheetContext.esm.js";
+import { SearchBoxField as u } from "./SearchBoxField.esm.js";
+import { useSearchBoxState as d } from "./useSearchBoxState.esm.js";
+import { useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBox.tsx
+function h({ fields: h, values: _, onSearch: v, onClear: y, isSubmitting: b = !1, exactMatch: x, className: S = "" }) {
+	let C = a(), w = C ? "mini" : "small", [T, E] = f(!1), { draft: D, setFieldValue: O, submit: k, clear: A, chips: j, removeChip: M } = d({
+		fields: h,
+		values: _,
+		onSearch: v,
+		onClear: y
+	}), N = () => b ? !1 : k(), P = () => {
+		N() && E(!1);
+	};
+	return C ? /* @__PURE__ */ m("div", {
+		className: e("w-full", S),
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex w-full items-center justify-end gap-1",
+				children: [
+					/* @__PURE__ */ p(g, {
+						label: "초기화",
+						onClick: A,
+						variant: "ghost",
+						icon: /* @__PURE__ */ p(r, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ p(g, {
+						label: "검색",
+						onClick: N,
+						disabled: b,
+						variant: "primary",
+						icon: /* @__PURE__ */ p(i, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ p(g, {
+						label: "필터",
+						onClick: () => E(!0),
+						variant: "ghost",
+						icon: /* @__PURE__ */ p(n, { className: "h-4 w-4" }),
+						activeDot: j.length > 0
+					})
+				]
+			}),
+			j.length > 0 && /* @__PURE__ */ p("div", {
+				className: "mt-2",
+				children: /* @__PURE__ */ p(c, {
+					chips: j,
+					onRemove: M
+				})
+			}),
+			/* @__PURE__ */ p(o, {
+				isOpen: T,
+				onClose: () => E(!1),
+				title: "필터",
+				primaryAction: {
+					label: "적용",
+					onClick: P,
+					loading: b
+				},
+				secondaryAction: {
+					label: "닫기",
+					onClick: () => E(!1)
+				},
+				children: /* @__PURE__ */ p(l.Provider, {
+					value: !0,
+					children: /* @__PURE__ */ m("div", {
+						className: "flex flex-col gap-4",
+						children: [h.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ p(u, {
+							field: e,
+							value: D[e.key] ?? "",
+							onChange: (t) => O(e.key, t),
+							onEnter: P,
+							size: "small"
+						}, e.key)), x && /* @__PURE__ */ p("div", {
+							className: "flex justify-end",
+							children: /* @__PURE__ */ p(s, {
+								value: x.value,
+								onChange: x.onChange,
+								size: "small"
+							})
+						})]
+					})
+				})
+			})
+		]
+	}) : /* @__PURE__ */ m("div", {
+		className: e("w-full", S),
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex w-full flex-wrap items-start gap-x-3 gap-y-2",
+			children: [h.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ p("div", {
+				className: e.className ?? "w-44",
+				children: /* @__PURE__ */ p(u, {
+					field: e,
+					value: D[e.key] ?? "",
+					onChange: (t) => O(e.key, t),
+					onEnter: N,
+					size: w
+				})
+			}, e.key)), /* @__PURE__ */ m("div", {
+				className: "ml-auto flex items-center gap-3",
+				children: [x && /* @__PURE__ */ p(s, {
+					value: x.value,
+					onChange: x.onChange,
+					size: w
+				}), /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ p(t, {
+						variant: "tertiary",
+						appearance: "outlined",
+						size: w,
+						onClick: A,
+						leadingIcon: /* @__PURE__ */ p(r, { className: "h-3.5 w-3.5" }),
+						className: "h-10",
+						children: "초기화"
+					}), /* @__PURE__ */ p(t, {
+						variant: "primary",
+						size: w,
+						onClick: N,
+						loading: b,
+						leadingIcon: /* @__PURE__ */ p(i, { className: "h-3.5 w-3.5" }),
+						className: "h-10",
+						children: "검색"
+					})]
+				})]
+			})]
+		}), j.length > 0 && /* @__PURE__ */ p("div", {
+			className: "mt-2",
+			children: /* @__PURE__ */ p(c, {
+				chips: j,
+				onRemove: M
+			})
+		})]
+	});
+}
+function g({ label: t, onClick: n, icon: r, variant: i, disabled: a, activeDot: o }) {
+	return /* @__PURE__ */ m("button", {
+		type: "button",
+		"aria-label": t,
+		onClick: n,
+		disabled: a,
+		className: e("relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50", i === "primary" ? "bg-primary text-fg-inverse hover:bg-primary-hover" : "text-icon-secondary hover:bg-bg-muted"),
+		children: [r, o && /* @__PURE__ */ p("span", { className: "absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary" })]
+	});
+}
+//#endregion
+export { h as SearchBox };

package/dist/components/search-box/SearchBoxChips.cjs

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/x.cjs"),t=require("../tooltip/Tooltip.cjs");let n=require("react/jsx-runtime");function r({chips:r,onRemove:i}){return r.length===0?null:(0,n.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:r.map(r=>(0,n.jsx)(t.Tooltip,{content:`${r.label} | ${r.valueLabel}`,position:`top`,children:(0,n.jsxs)(`button`,{type:`button`,onClick:()=>i(r.key),className:`inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-border bg-primary-subtle px-2 py-0.5 text-xs text-primary-fg transition-colors hover:bg-button-secondary-hover`,"aria-label":`${r.label} 필터 제거`,children:[(0,n.jsx)(`span`,{className:`shrink-0 text-fg-subtle`,children:r.label}),(0,n.jsx)(`span`,{className:`text-primary-border`,children:`|`}),(0,n.jsx)(`span`,{className:`truncate font-medium`,children:r.valueLabel}),(0,n.jsx)(e.X,{className:`h-3 w-3 shrink-0`})]})},r.key))})}exports.SearchBoxChips=r;

package/dist/components/search-box/SearchBoxChips.esm.js

@@ -0,0 +1,36 @@
+import { X as e } from "../../node_modules/lucide-react/dist/esm/icons/x.esm.js";
+import { Tooltip as t } from "../tooltip/Tooltip.esm.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxChips.tsx
+function i({ chips: i, onRemove: a }) {
+	return i.length === 0 ? null : /* @__PURE__ */ n("div", {
+		className: "flex flex-wrap items-center gap-1.5",
+		children: i.map((i) => /* @__PURE__ */ n(t, {
+			content: `${i.label} | ${i.valueLabel}`,
+			position: "top",
+			children: /* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: () => a(i.key),
+				className: "inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-border bg-primary-subtle px-2 py-0.5 text-xs text-primary-fg transition-colors hover:bg-button-secondary-hover",
+				"aria-label": `${i.label} 필터 제거`,
+				children: [
+					/* @__PURE__ */ n("span", {
+						className: "shrink-0 text-fg-subtle",
+						children: i.label
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "text-primary-border",
+						children: "|"
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "truncate font-medium",
+						children: i.valueLabel
+					}),
+					/* @__PURE__ */ n(e, { className: "h-3 w-3 shrink-0" })
+				]
+			})
+		}, i.key))
+	});
+}
+//#endregion
+export { i as SearchBoxChips };

package/dist/components/search-box/SearchBoxDateRange.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../date-input/DateInput.cjs"),r=require("./parseDateRange.cjs"),i=require("./SearchBoxSheetContext.cjs");let a=require("react"),o=require("react/jsx-runtime");function s({value:s,onChange:c,presets:l,size:u}){let{from:d,to:f}=r.parseDateRangeValue(s),p=(0,a.useContext)(i.SearchBoxSheetContext),m=(0,a.useMemo)(()=>l?.map(e=>({preset:e,range:e.range()}))??[],[l]),h=e=>{let t=e.range();c(r.serializeDateRangeValue(t.from,t.to))};return(0,o.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-1.5`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,o.jsx)(n.DateInput,{value:d,onChange:e=>c(r.serializeDateRangeValue(e,f)),size:u,className:u===`mini`?`h-8 rounded-control-mini`:`h-10 rounded-control-small`,ariaLabel:`시작일`,disableMobileSheet:p}),(0,o.jsx)(`span`,{className:`text-fg-subtle`,children:`~`}),(0,o.jsx)(n.DateInput,{value:f,onChange:e=>c(r.serializeDateRangeValue(d,e)),size:u,className:u===`mini`?`h-8 rounded-control-mini`:`h-10 rounded-control-small`,ariaLabel:`종료일`,disableMobileSheet:p})]}),m.length>0&&(0,o.jsx)(`div`,{className:`flex items-center gap-1`,children:m.map(({preset:n,range:r})=>{let i=d===r.from&&f===r.to;return(0,o.jsx)(t.Button,{variant:i?`primary`:`tertiary`,appearance:i?`filled`:`outlined`,size:u,onClick:()=>h(n),className:e.cn(`whitespace-nowrap`,u===`mini`?`h-8`:`h-10`),children:n.label},n.label)})})]})}exports.SearchBoxDateRange=s;

package/dist/{src/components → components}/search-box/SearchBoxDateRange.d.ts

@@ -1,4 +1,4 @@
-import { DateRangePreset } from './types';
+import { DateRangePreset } from './types.js';
 interface Props {
     /** "from~to" CSV. 빈 문자열이면 양쪽 모두 비어있음. */
     value: string;

package/dist/components/search-box/SearchBoxDateRange.esm.js

@@ -0,0 +1,60 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { DateInput as n } from "../date-input/DateInput.esm.js";
+import { parseDateRangeValue as r, serializeDateRangeValue as i } from "./parseDateRange.esm.js";
+import { SearchBoxSheetContext as a } from "./SearchBoxSheetContext.esm.js";
+import { useContext as o, useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxDateRange.tsx
+function u({ value: u, onChange: d, presets: f, size: p }) {
+	let { from: m, to: h } = r(u), g = o(a), _ = s(() => f?.map((e) => ({
+		preset: e,
+		range: e.range()
+	})) ?? [], [f]), v = (e) => {
+		let t = e.range();
+		d(i(t.from, t.to));
+	};
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+		children: [/* @__PURE__ */ l("div", {
+			className: "flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ c(n, {
+					value: m,
+					onChange: (e) => d(i(e, h)),
+					size: p,
+					className: p === "mini" ? "h-8 rounded-control-mini" : "h-10 rounded-control-small",
+					ariaLabel: "시작일",
+					disableMobileSheet: g
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "text-fg-subtle",
+					children: "~"
+				}),
+				/* @__PURE__ */ c(n, {
+					value: h,
+					onChange: (e) => d(i(m, e)),
+					size: p,
+					className: p === "mini" ? "h-8 rounded-control-mini" : "h-10 rounded-control-small",
+					ariaLabel: "종료일",
+					disableMobileSheet: g
+				})
+			]
+		}), _.length > 0 && /* @__PURE__ */ c("div", {
+			className: "flex items-center gap-1",
+			children: _.map(({ preset: n, range: r }) => {
+				let i = m === r.from && h === r.to;
+				return /* @__PURE__ */ c(t, {
+					variant: i ? "primary" : "tertiary",
+					appearance: i ? "filled" : "outlined",
+					size: p,
+					onClick: () => v(n),
+					className: e("whitespace-nowrap", p === "mini" ? "h-8" : "h-10"),
+					children: n.label
+				}, n.label);
+			})
+		})]
+	});
+}
+//#endregion
+export { u as SearchBoxDateRange };

package/dist/components/search-box/SearchBoxDateSingle.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../date-input/DateInput.cjs"),r=require("./SearchBoxSheetContext.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({value:o,onChange:s,ariaLabel:c,presets:l,size:u}){let d=(0,i.useContext)(r.SearchBoxSheetContext),f=(0,i.useMemo)(()=>l?.map(e=>({preset:e,date:e.date()}))??[],[l]);return(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-1.5`,children:[(0,a.jsx)(n.DateInput,{value:o,onChange:s,size:u,className:u===`mini`?`h-8 rounded-control-mini`:`h-10 rounded-control-small`,ariaLabel:c,disableMobileSheet:d}),f.length>0&&(0,a.jsx)(`div`,{className:`flex items-center gap-1`,children:f.map(({preset:n,date:r})=>{let i=o===r;return(0,a.jsx)(t.Button,{variant:i?`primary`:`tertiary`,appearance:i?`filled`:`outlined`,size:u,onClick:()=>s(r),className:e.cn(`whitespace-nowrap`,u===`mini`?`h-8`:`h-10`),children:n.label},n.label)})})]})}exports.SearchBoxDateSingle=o;

package/dist/{src/components → components}/search-box/SearchBoxDateSingle.d.ts

@@ -1,4 +1,4 @@
-import { DateSinglePreset } from './types';
+import { DateSinglePreset } from './types.js';
 interface Props {
     /** yyyy-MM-dd 또는 빈 문자열. */
     value: string;

package/dist/components/search-box/SearchBoxDateSingle.esm.js

@@ -0,0 +1,39 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { DateInput as n } from "../date-input/DateInput.esm.js";
+import { SearchBoxSheetContext as r } from "./SearchBoxSheetContext.esm.js";
+import { useContext as i, useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxDateSingle.tsx
+function c({ value: c, onChange: l, ariaLabel: u, presets: d, size: f }) {
+	let p = i(r), m = a(() => d?.map((e) => ({
+		preset: e,
+		date: e.date()
+	})) ?? [], [d]);
+	return /* @__PURE__ */ s("div", {
+		className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+		children: [/* @__PURE__ */ o(n, {
+			value: c,
+			onChange: l,
+			size: f,
+			className: f === "mini" ? "h-8 rounded-control-mini" : "h-10 rounded-control-small",
+			ariaLabel: u,
+			disableMobileSheet: p
+		}), m.length > 0 && /* @__PURE__ */ o("div", {
+			className: "flex items-center gap-1",
+			children: m.map(({ preset: n, date: r }) => {
+				let i = c === r;
+				return /* @__PURE__ */ o(t, {
+					variant: i ? "primary" : "tertiary",
+					appearance: i ? "filled" : "outlined",
+					size: f,
+					onClick: () => l(r),
+					className: e("whitespace-nowrap", f === "mini" ? "h-8" : "h-10"),
+					children: n.label
+				}, n.label);
+			})
+		})]
+	});
+}
+//#endregion
+export { c as SearchBoxDateSingle };

package/dist/components/search-box/SearchBoxField.cjs

@@ -0,0 +1 @@
+const e=require("./SearchBoxDateRange.cjs"),t=require("./SearchBoxDateSingle.cjs"),n=require("./SearchBoxFloatingInput.cjs"),r=require("./SearchBoxFloatingSelect.cjs"),i=require("./SearchBoxMonth.cjs"),a=require("./SearchBoxMultiSelect.cjs");let o=require("react/jsx-runtime");function s({field:s,value:c,onChange:l,onEnter:u,size:d}){return s.type===`text`?(0,o.jsx)(n.SearchBoxFloatingInput,{label:s.label,value:c,onChange:l,onEnter:u,size:d,inputMode:s.inputMode}):s.type===`multiSelect`?(0,o.jsx)(a.SearchBoxMultiSelect,{label:s.label,options:s.options,value:c,onChange:l,size:d}):s.type===`dateRange`?(0,o.jsx)(e.SearchBoxDateRange,{value:c,onChange:l,presets:s.presets,size:d}):s.type===`dateSingle`?(0,o.jsx)(t.SearchBoxDateSingle,{value:c,onChange:l,ariaLabel:s.label,presets:s.presets,size:d}):s.type===`month`?(0,o.jsx)(i.SearchBoxMonth,{value:c,onChange:l,ariaLabel:s.label,size:d}):(0,o.jsx)(r.SearchBoxFloatingSelect,{label:s.label,options:s.options,value:c,onChange:l,size:d})}exports.SearchBoxField=s;

package/dist/{src/components → components}/search-box/SearchBoxField.d.ts

@@ -1,4 +1,4 @@
-import { SearchField } from './types';
+import { SearchField } from './types.js';
 interface Props {
     field: SearchField;
     value: string;

package/dist/components/search-box/SearchBoxField.esm.js

@@ -0,0 +1,48 @@
+import { SearchBoxDateRange as e } from "./SearchBoxDateRange.esm.js";
+import { SearchBoxDateSingle as t } from "./SearchBoxDateSingle.esm.js";
+import { SearchBoxFloatingInput as n } from "./SearchBoxFloatingInput.esm.js";
+import { SearchBoxFloatingSelect as r } from "./SearchBoxFloatingSelect.esm.js";
+import { SearchBoxMonth as i } from "./SearchBoxMonth.esm.js";
+import { SearchBoxMultiSelect as a } from "./SearchBoxMultiSelect.esm.js";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxField.tsx
+function s({ field: s, value: c, onChange: l, onEnter: u, size: d }) {
+	return s.type === "text" ? /* @__PURE__ */ o(n, {
+		label: s.label,
+		value: c,
+		onChange: l,
+		onEnter: u,
+		size: d,
+		inputMode: s.inputMode
+	}) : s.type === "multiSelect" ? /* @__PURE__ */ o(a, {
+		label: s.label,
+		options: s.options,
+		value: c,
+		onChange: l,
+		size: d
+	}) : s.type === "dateRange" ? /* @__PURE__ */ o(e, {
+		value: c,
+		onChange: l,
+		presets: s.presets,
+		size: d
+	}) : s.type === "dateSingle" ? /* @__PURE__ */ o(t, {
+		value: c,
+		onChange: l,
+		ariaLabel: s.label,
+		presets: s.presets,
+		size: d
+	}) : s.type === "month" ? /* @__PURE__ */ o(i, {
+		value: c,
+		onChange: l,
+		ariaLabel: s.label,
+		size: d
+	}) : /* @__PURE__ */ o(r, {
+		label: s.label,
+		options: s.options,
+		value: c,
+		onChange: l,
+		size: d
+	});
+}
+//#endregion
+export { s as SearchBoxField };

package/dist/components/search-box/SearchBoxFloatingInput.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({label:r,value:i,onChange:a,onEnter:o,size:s,inputMode:c,trailing:l}){let[u,d]=(0,t.useState)(!1),f=(0,t.useRef)(null),p=i.length>0,m=u||p,h=s===`mini`?`h-8`:`h-10`,g=s===`mini`?`rounded-control-mini`:`rounded-control-small`,_=s===`mini`?`text-xs`:`text-sm`,v=s===`mini`?`px-2.5`:`px-3`;return(0,n.jsxs)(`div`,{className:e.cn(`relative w-full cursor-text border bg-bg-surface transition-colors`,h,g,u?`border-primary`:`border-border-subtle`),onClick:()=>f.current?.focus(),children:[(0,n.jsx)(`input`,{ref:f,type:`text`,value:i,onChange:e=>a(e.target.value),onFocus:()=>d(!0),onBlur:()=>d(!1),onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),o?.())},inputMode:c,"aria-label":r,className:e.cn(`peer h-full w-full bg-transparent text-fg-default placeholder-transparent focus:outline-hidden`,v,_),placeholder:r}),(0,n.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface`,m?[`-top-2`,s===`mini`?`text-[10px]`:`text-xs`,u?`text-primary-fg`:`text-fg-muted`]:[`top-1/2 -translate-y-1/2 text-fg-subtle`,_]),children:r}),l&&(0,n.jsx)(`div`,{className:`absolute inset-y-0 right-2 flex items-center`,children:l})]})}exports.SearchBoxFloatingInput=r;

package/dist/components/search-box/SearchBoxFloatingInput.esm.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxFloatingInput.tsx
+function a({ label: a, value: o, onChange: s, onEnter: c, size: l, inputMode: u, trailing: d }) {
+	let [f, p] = n(!1), m = t(null), h = o.length > 0, g = f || h, _ = l === "mini" ? "h-8" : "h-10", v = l === "mini" ? "rounded-control-mini" : "rounded-control-small", y = l === "mini" ? "text-xs" : "text-sm", b = l === "mini" ? "px-2.5" : "px-3";
+	return /* @__PURE__ */ i("div", {
+		className: e("relative w-full cursor-text border bg-bg-surface transition-colors", _, v, f ? "border-primary" : "border-border-subtle"),
+		onClick: () => m.current?.focus(),
+		children: [
+			/* @__PURE__ */ r("input", {
+				ref: m,
+				type: "text",
+				value: o,
+				onChange: (e) => s(e.target.value),
+				onFocus: () => p(!0),
+				onBlur: () => p(!1),
+				onKeyDown: (e) => {
+					e.key === "Enter" && (e.preventDefault(), c?.());
+				},
+				inputMode: u,
+				"aria-label": a,
+				className: e("peer h-full w-full bg-transparent text-fg-default placeholder-transparent focus:outline-hidden", b, y),
+				placeholder: a
+			}),
+			/* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: e("pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface", g ? [
+					"-top-2",
+					l === "mini" ? "text-[10px]" : "text-xs",
+					f ? "text-primary-fg" : "text-fg-muted"
+				] : ["top-1/2 -translate-y-1/2 text-fg-subtle", y]),
+				children: a
+			}),
+			d && /* @__PURE__ */ r("div", {
+				className: "absolute inset-y-0 right-2 flex items-center",
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { a as SearchBoxFloatingInput };

package/dist/components/search-box/SearchBoxFloatingSelect.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");let r=require("react"),i=require("react/jsx-runtime"),a=require("@floating-ui/react");function o({label:o,options:s,value:c,onChange:l,size:u}){let[d,f]=(0,r.useState)(!1),{refs:p,floatingStyles:m,context:h}=(0,a.useFloating)({open:d,onOpenChange:f,placement:`bottom-start`,whileElementsMounted:a.autoUpdate,middleware:[(0,a.offset)(4),(0,a.flip)({fallbackAxisSideDirection:`start`}),(0,a.shift)({padding:8}),(0,a.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`})}})]}),{getReferenceProps:g,getFloatingProps:_}=(0,a.useInteractions)([(0,a.useClick)(h),(0,a.useDismiss)(h),(0,a.useRole)(h,{role:`listbox`})]),v=s.find(e=>String(e.value)===c),y=!!v,b=d||y,x=u===`mini`?`h-8`:`h-10`,S=u===`mini`?`rounded-control-mini`:`rounded-control-small`,C=u===`mini`?`text-xs`:`text-sm`,w=u===`mini`?`px-2.5`:`px-3`;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`button`,{ref:p.setReference,type:`button`,...g(),"aria-expanded":d,"aria-haspopup":`listbox`,className:e.cn(`relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden`,x,S,w,d?`border-primary`:`border-border-subtle`),children:[(0,i.jsxs)(`div`,{className:`flex h-full w-full items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:e.cn(`truncate`,C,y?`text-fg-default`:`text-fg-subtle`),children:y?v.label:``}),(0,i.jsx)(n.ChevronDown,{className:e.cn(`h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform`,d&&`rotate-180`)})]}),(0,i.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface`,b?[`-top-2`,u===`mini`?`text-[10px]`:`text-xs`,d?`text-primary-fg`:`text-fg-muted`]:[`top-1/2 -translate-y-1/2 text-fg-subtle`,C]),children:o})]}),d&&(0,i.jsx)(a.FloatingPortal,{children:(0,i.jsxs)(`div`,{ref:p.setFloating,style:m,..._(),className:`z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay`,children:[s.map(n=>{let r=String(n.value),a=r===c;return(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{l(r),f(!1)},className:e.cn(`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle`,C,a?`text-fg-default`:`text-fg-muted`),role:`option`,"aria-selected":a,children:[(0,i.jsx)(`span`,{className:`flex-1 truncate`,children:n.label}),a&&(0,i.jsx)(t.Check,{className:`h-3 w-3 text-primary-fg`,strokeWidth:3})]},r)}),s.length===0&&(0,i.jsx)(`div`,{className:`px-3 py-2 text-xs text-fg-subtle`,children:`옵션이 없어요`})]})})]})}exports.SearchBoxFloatingSelect=o;

package/dist/{src/components → components}/search-box/SearchBoxFloatingSelect.d.ts

@@ -1,4 +1,4 @@
-import { SelectOption } from '../../../components/select';
+import { SelectOption } from '../select/index.js';
 interface Props {
     /** 라벨 — 미선택일 땐 인풋 안의 placeholder처럼, 선택/포커스 시 상단 보더로 부유. */
     label: string;

package/dist/components/search-box/SearchBoxFloatingSelect.esm.js

@@ -0,0 +1,79 @@
+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 { useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, size as f, useClick as p, useDismiss as m, useFloating as h, useInteractions as g, useRole as _ } from "@floating-ui/react";
+//#region src/components/search-box/SearchBoxFloatingSelect.tsx
+function v({ label: v, options: y, value: b, onChange: x, size: S }) {
+	let [C, w] = r(!1), { refs: T, floatingStyles: E, context: D } = h({
+		open: C,
+		onOpenChange: w,
+		placement: "bottom-start",
+		whileElementsMounted: c,
+		middleware: [
+			u(4),
+			l({ fallbackAxisSideDirection: "start" }),
+			d({ padding: 8 }),
+			f({ apply({ rects: e, elements: t }) {
+				Object.assign(t.floating.style, { minWidth: `${e.reference.width}px` });
+			} })
+		]
+	}), { getReferenceProps: O, getFloatingProps: k } = g([
+		p(D),
+		m(D),
+		_(D, { role: "listbox" })
+	]), A = y.find((e) => String(e.value) === b), j = !!A, M = C || j, N = S === "mini" ? "h-8" : "h-10", P = S === "mini" ? "rounded-control-mini" : "rounded-control-small", F = S === "mini" ? "text-xs" : "text-sm", I = S === "mini" ? "px-2.5" : "px-3";
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("button", {
+		ref: T.setReference,
+		type: "button",
+		...O(),
+		"aria-expanded": C,
+		"aria-haspopup": "listbox",
+		className: e("relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden", N, P, I, C ? "border-primary" : "border-border-subtle"),
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex h-full w-full items-center justify-between gap-2",
+			children: [/* @__PURE__ */ a("span", {
+				className: e("truncate", F, j ? "text-fg-default" : "text-fg-subtle"),
+				children: j ? A.label : ""
+			}), /* @__PURE__ */ a(n, { className: e("h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform", C && "rotate-180") })]
+		}), /* @__PURE__ */ a("span", {
+			"aria-hidden": "true",
+			className: e("pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface", M ? [
+				"-top-2",
+				S === "mini" ? "text-[10px]" : "text-xs",
+				C ? "text-primary-fg" : "text-fg-muted"
+			] : ["top-1/2 -translate-y-1/2 text-fg-subtle", F]),
+			children: v
+		})]
+	}), C && /* @__PURE__ */ a(s, { children: /* @__PURE__ */ o("div", {
+		ref: T.setFloating,
+		style: E,
+		...k(),
+		className: "z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay",
+		children: [y.map((n) => {
+			let r = String(n.value), i = r === b;
+			return /* @__PURE__ */ o("button", {
+				type: "button",
+				onClick: () => {
+					x(r), w(!1);
+				},
+				className: e("flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle", F, i ? "text-fg-default" : "text-fg-muted"),
+				role: "option",
+				"aria-selected": i,
+				children: [/* @__PURE__ */ a("span", {
+					className: "flex-1 truncate",
+					children: n.label
+				}), i && /* @__PURE__ */ a(t, {
+					className: "h-3 w-3 text-primary-fg",
+					strokeWidth: 3
+				})]
+			}, r);
+		}), y.length === 0 && /* @__PURE__ */ a("div", {
+			className: "px-3 py-2 text-xs text-fg-subtle",
+			children: "옵션이 없어요"
+		})]
+	}) })] });
+}
+//#endregion
+export { v as SearchBoxFloatingSelect };

package/dist/components/search-box/SearchBoxMonth.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/calendar.cjs"),n=require("../date-picker/month-picker.cjs"),r=require("./SearchBoxSheetContext.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(e){let[t,n]=e.split(`-`),r=Number(t),i=Number(n);if(!(!r||!i))return{year:r,month:i}}function s({year:e,month:t}){return`${e}-${String(t).padStart(2,`0`)}`}function c({value:c,onChange:l,ariaLabel:u,size:d}){let f=(0,i.useContext)(r.SearchBoxSheetContext),p=o(c),m=p?`${p.year}년 ${p.month}월`:`년월 선택`;return(0,a.jsx)(n.MonthPicker,{value:p,onChange:e=>l(s(e)),disableMobileSheet:f,children:(0,a.jsxs)(`button`,{type:`button`,"aria-label":u,className:e.cn(`inline-flex w-full items-center gap-2 border border-border-subtle bg-bg-surface px-3 text-sm text-fg-default transition-colors hover:bg-bg-subtle`,d===`mini`?`h-8 rounded-control-mini py-1.5`:`h-10 rounded-control-small py-2`),children:[(0,a.jsx)(t.Calendar,{className:`h-4 w-4 shrink-0 text-fg-muted`}),(0,a.jsx)(`span`,{className:p?``:`text-fg-subtle`,children:m})]})})}exports.SearchBoxMonth=c;

package/dist/components/search-box/SearchBoxMonth.esm.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Calendar as t } from "../../node_modules/lucide-react/dist/esm/icons/calendar.esm.js";
+import { MonthPicker as n } from "../date-picker/month-picker.esm.js";
+import { SearchBoxSheetContext as r } from "./SearchBoxSheetContext.esm.js";
+import { useContext as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxMonth.tsx
+function s(e) {
+	let [t, n] = e.split("-"), r = Number(t), i = Number(n);
+	if (!(!r || !i)) return {
+		year: r,
+		month: i
+	};
+}
+function c({ year: e, month: t }) {
+	return `${e}-${String(t).padStart(2, "0")}`;
+}
+function l({ value: l, onChange: u, ariaLabel: d, size: f }) {
+	let p = i(r), m = s(l), h = m ? `${m.year}년 ${m.month}월` : "년월 선택";
+	return /* @__PURE__ */ a(n, {
+		value: m,
+		onChange: (e) => u(c(e)),
+		disableMobileSheet: p,
+		children: /* @__PURE__ */ o("button", {
+			type: "button",
+			"aria-label": d,
+			className: e("inline-flex w-full items-center gap-2 border border-border-subtle bg-bg-surface px-3 text-sm text-fg-default transition-colors hover:bg-bg-subtle", f === "mini" ? "h-8 rounded-control-mini py-1.5" : "h-10 rounded-control-small py-2"),
+			children: [/* @__PURE__ */ a(t, { className: "h-4 w-4 shrink-0 text-fg-muted" }), /* @__PURE__ */ a("span", {
+				className: m ? "" : "text-fg-subtle",
+				children: h
+			})]
+		})
+	});
+}
+//#endregion
+export { l as SearchBoxMonth };

package/dist/components/search-box/SearchBoxMultiSelect.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");let r=require("react"),i=require("react/jsx-runtime"),a=require("@floating-ui/react");function o({label:o,options:s,value:c,onChange:l,size:u}){let[d,f]=(0,r.useState)(!1),{refs:p,floatingStyles:m,context:h}=(0,a.useFloating)({open:d,onOpenChange:f,placement:`bottom-start`,whileElementsMounted:a.autoUpdate,middleware:[(0,a.offset)(4),(0,a.flip)({fallbackAxisSideDirection:`start`}),(0,a.shift)({padding:8}),(0,a.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`})}})]}),{getReferenceProps:g,getFloatingProps:_}=(0,a.useInteractions)([(0,a.useClick)(h),(0,a.useDismiss)(h),(0,a.useRole)(h,{role:`listbox`})]),v=c?c.split(`,`).filter(Boolean):[],y=new Set(v),b=v.length>0,x=d||b,S=e=>{let t=new Set(y);t.has(e)?t.delete(e):t.add(e),l(s.filter(e=>t.has(String(e.value))).map(e=>String(e.value)).join(`,`))},C=u===`mini`?`h-8`:`h-10`,w=u===`mini`?`rounded-control-mini`:`rounded-control-small`,T=u===`mini`?`text-xs`:`text-sm`,E=u===`mini`?`px-2.5`:`px-3`,D=b?s.filter(e=>y.has(String(e.value))).map(e=>e.label).join(`, `):``;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`button`,{ref:p.setReference,type:`button`,...g(),"aria-expanded":d,"aria-haspopup":`listbox`,className:e.cn(`relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden`,C,w,E,d?`border-primary`:`border-border-subtle`),children:[(0,i.jsxs)(`div`,{className:`flex h-full w-full items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:e.cn(`truncate`,T,b?`text-fg-default`:`text-fg-subtle`),children:D}),(0,i.jsx)(n.ChevronDown,{className:e.cn(`h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform`,d&&`rotate-180`)})]}),(0,i.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface`,x?[`-top-2`,u===`mini`?`text-[10px]`:`text-xs`,d?`text-primary-fg`:`text-fg-muted`]:[`top-1/2 -translate-y-1/2 text-fg-subtle`,T]),children:o})]}),d&&(0,i.jsx)(a.FloatingPortal,{children:(0,i.jsxs)(`div`,{ref:p.setFloating,style:m,..._(),className:`z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay`,children:[s.map(n=>{let r=String(n.value),a=y.has(r);return(0,i.jsxs)(`button`,{type:`button`,onClick:()=>S(r),className:e.cn(`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle`,T,a?`text-fg-default`:`text-fg-muted`),role:`option`,"aria-selected":a,children:[(0,i.jsx)(`span`,{className:e.cn(`flex h-4 w-4 shrink-0 items-center justify-center rounded border`,a?`border-primary bg-primary text-fg-inverse`:`border-border-default`),children:a&&(0,i.jsx)(t.Check,{className:`h-3 w-3`,strokeWidth:3})}),(0,i.jsx)(`span`,{className:`flex-1 truncate`,children:n.label})]},r)}),s.length===0&&(0,i.jsx)(`div`,{className:`px-3 py-2 text-xs text-fg-subtle`,children:`옵션이 없어요`})]})})]})}exports.SearchBoxMultiSelect=o;

package/dist/{src/components → components}/search-box/SearchBoxMultiSelect.d.ts

@@ -1,4 +1,4 @@
-import { SelectOption } from '../../../components/select';
+import { SelectOption } from '../select/index.js';
 interface Props {
     /** 라벨 — 미선택일 땐 트리거 안의 placeholder처럼, 선택/오픈 시 상단 보더로 부유. */
     label: string;
@@ -15,7 +15,7 @@ interface Props {
  * 시그니처를 유지한다. 빈 값이면 미선택, "A,B"면 두 항목 선택.
  *
  * SearchBoxFloatingInput/Select와 동일한 플로팅 라벨 UX. 보더와 라벨이 포커스/오픈 시
- * primary-500으로 통일된다.
+ * 시맨틱 primary 색을 따른다.
  *
  * number[] 전용 드롭다운은 적합하지 않아 별도 inline 컴포넌트로 둔다.
  *