@petnow/ui 5.4.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 6.0.0
+
+### Breaking
+
+- **`Select`** is no longer a native `<select>`. It is built on Radix Select, like the Select in
+  petify-admin-console: the trigger keeps the `TextField` look, and the options open in a panel below it
+  (portal to `body`, 8px radius, border, shadow) with a check in front of the picked option and the
+  picked option in the accent color. Keyboard (arrows, Enter, Escape, typeahead) and ARIA come from Radix.
+  - `ref` reaches the trigger `<button>` (`HTMLButtonElement`), and the rest props are button attributes,
+    not `<select>` attributes. `name`, `form` and `required` still work: inside a form, Radix renders a
+    hidden `<select>`, so the value reaches `FormData` and browser validation.
+  - Mobile browsers show this panel instead of the system picker.
+  - An option value cannot be `""`; `""` means nothing is picked and shows `placeholder`. Options with
+    `""` are left out. Once picked, the user cannot go back to "nothing picked"; the native `<select>`
+    let them pick the placeholder again. Set `value` to `""` in code if a form needs that.
+  - A form `reset` restores `defaultValue` (or nothing) on screen and in the hidden `<select>`; a
+    controlled `Select` gets it through `onChange`.
+- **`TextFieldSelect`** is removed. It was only a button that called `onPress`, without a list. Use
+  `Select` (or `Combobox` to search). See [`docs/migration/v5-to-v6.md`](docs/migration/v5-to-v6.md).
+
+### Changes
+
+- `Combobox` opens its list in the same panel as `Select`, through a Radix Popover portal, so a parent with
+  `overflow: hidden` or a scroll container no longer clips it, and the list flips above the input when
+  there is no room below. Its options use the `Select` row (left check slot, accent color for the picked
+  option). The list is in the DOM only while it is open, so the input and toggle set `aria-controls` only
+  then. Escape on an open list closes only the list, not a surrounding dialog.
+- TextField stories no longer show select-like fields: the `SelectField` and `SelectFieldSmallError`
+  stories are removed, and `NormalWithErrorAndCounter` no longer shows a dropdown chevron.
+
 ## 5.4.0
 
 ### Added

package/dist/combobox.js

@@ -1,201 +1,215 @@
 "use client";
 import { t as e } from "./TailwindUtil-DiNvXuNl.js";
-import { a as t, n, o as r, t as ee } from "./fieldStyles-DyZu__hI.js";
-import { ChevronDownIcon as te } from "./icons/action/chevron-down.js";
-import { n as ne, r as re, t as ie } from "./mergeRefs-BHwdBwNQ.js";
+import { a as t, i as n, t as r } from "./fieldStyles-DXyDrzxD.js";
+import { ChevronDownIcon as ee } from "./icons/action/chevron-down.js";
+import { c as te, d as ne, l as re, n as ie, o as ae, t as oe, u as se } from "./mergeRefs-CsNeQOZ6.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
+import { useCallback as ce, useEffect as o, useId as le, useMemo as ue, useRef as s, useState as c } from "react";
+import { Popover as l } from "radix-ui";
 //#region src/components/combobox/Combobox.tsx
-var d = (e) => e.toLocaleLowerCase().replace(/\s+/g, ""), f = (e, t) => d(e.label).includes(d(t)), p = ({ id: p, label: m, options: ae, value: h, onChange: oe, filter: g = f, emptyText: _, toggleLabel: v, invalidSelectionText: y = "Select an option from the list.", errorText: b, assistiveText: x, size: S = "large", name: C, required: w, disabled: T = !1, placeholder: se, className: ce, autoComplete: le = "off", "aria-describedby": ue, onBlur: de, onKeyDown: fe, onClick: pe, ref: E, ...D }) => {
-	let me = s(), O = p ?? me, k = `${O}-listbox`, A = `${O}-message`, j = (e) => `${O}-option-${e}`, M = !!b, he = !!(b || x), N = `${O}-label`, P = l(null), F = c(() => ie(P, E), [E]), I = l(null), L = l(!1), R = ae.map((e) => typeof e == "string" ? {
+var u = (e) => e.toLocaleLowerCase().replace(/\s+/g, ""), de = (e, t) => u(e.label).includes(u(t)), d = ({ id: d, label: f, options: fe, value: p, onChange: pe, filter: m = de, emptyText: h, toggleLabel: g, invalidSelectionText: _ = "Select an option from the list.", errorText: v, assistiveText: y, size: b = "large", name: x, required: S, disabled: C = !1, placeholder: me, className: he, autoComplete: ge = "off", "aria-describedby": _e, onBlur: ve, onKeyDown: ye, onClick: w, ref: T, ...E }) => {
+	let be = le(), D = d ?? be, O = `${D}-listbox`, k = `${D}-message`, A = (e) => `${D}-option-${e}`, j = !!v, M = !!(v || y), N = `${D}-label`, P = s(null), xe = ue(() => oe(P, T), [T]), F = s(null), I = s(!1), L = fe.map((e) => typeof e == "string" ? {
 		value: e,
 		label: e
-	} : e), z = R.find((e) => e.value === h), [B, V] = u(null), [H, U] = u(!1), [W, G] = u(-1), K = R.map((e, t) => ({
+	} : e), R = L.find((e) => e.value === p), [z, B] = c(null), [V, H] = c(!1), [U, W] = c(-1), G = L.map((e, t) => ({
 		option: e,
 		index: t
-	})).filter(({ option: e }) => !B || g(e, B)), q = H && !T && (K.length > 0 || _ !== void 0), J = K.filter(({ option: e }) => !e.disabled);
+	})).filter(({ option: e }) => !z || m(e, z)), K = V && !C && (G.length > 0 || h !== void 0), q = G.filter(({ option: e }) => !e.disabled), J = s(-1);
 	o(() => {
-		let e = L.current;
-		L.current = !1, !(!q || W < 0 || !e) && document.getElementById(j(W))?.scrollIntoView?.({ block: "nearest" });
-	}, [q, W]), o(() => {
-		h !== I.current && V(null), I.current = null;
-	}, [h]), o(() => {
-		I.current = null;
+		let e = I.current;
+		if (I.current = !1, !K || U < 0 || !e) return;
+		let t = document.getElementById(A(U));
+		t ? t.scrollIntoView?.({ block: "nearest" }) : J.current = U;
+	}, [K, U]);
+	let Se = ce((e) => {
+		!e || J.current < 0 || (document.getElementById(`${D}-option-${J.current}`)?.scrollIntoView?.({ block: "nearest" }), J.current = -1);
+	}, [D]);
+	o(() => {
+		p !== F.current && B(null), F.current = null;
+	}, [p]), o(() => {
+		F.current = null;
 	});
-	let Y = !!(w && !z && B);
+	let Y = !!(S && !R && z);
 	o(() => {
-		P.current?.setCustomValidity(Y ? y : "");
-	}, [Y, y]);
+		P.current?.setCustomValidity(Y ? _ : "");
+	}, [Y, _]);
 	let X = (e) => {
-		I.current = e, oe(e);
+		F.current = e, pe(e);
 	}, Z = () => {
-		L.current = !0, U(!0), G(z && !z.disabled ? R.indexOf(z) : -1);
+		I.current = !0, H(!0), W(R && !R.disabled ? L.indexOf(R) : -1);
 	}, Q = () => {
-		U(!1), V(null), G(-1);
+		H(!1), B(null), W(-1);
 	}, $ = (e) => {
 		e.disabled || (X(e.value), Q());
-	}, ge = (e) => {
-		if (J.length === 0) return;
-		let t = J.findIndex(({ index: e }) => e === W), n = t === -1 ? e === 1 ? 0 : J.length - 1 : (t + e + J.length) % J.length;
-		L.current = !0, G(J[n].index);
-	}, _e = (e) => {
-		if (fe?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing || e.keyCode === 229)) switch (e.key) {
+	}, Ce = (e) => {
+		if (q.length === 0) return;
+		let t = q.findIndex(({ index: e }) => e === U), n = t === -1 ? e === 1 ? 0 : q.length - 1 : (t + e + q.length) % q.length;
+		I.current = !0, W(q[n].index);
+	}, we = (e) => {
+		if (ye?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing || e.keyCode === 229)) switch (e.key) {
 			case "ArrowDown":
 			case "ArrowUp":
-				if (e.preventDefault(), H && e.altKey && e.key === "ArrowUp") {
+				if (e.preventDefault(), V && e.altKey && e.key === "ArrowUp") {
 					Q();
 					return;
 				}
-				if (!H) {
-					U(!0);
-					let t = z && !z.disabled ? R.indexOf(z) : -1, n = e.key === "ArrowDown" ? J[0] : J[J.length - 1];
-					L.current = !0, G(t >= 0 || e.altKey ? t : n?.index ?? -1);
+				if (!V) {
+					H(!0);
+					let t = R && !R.disabled ? L.indexOf(R) : -1, n = e.key === "ArrowDown" ? q[0] : q[q.length - 1];
+					I.current = !0, W(t >= 0 || e.altKey ? t : n?.index ?? -1);
 					return;
 				}
-				ge(e.key === "ArrowDown" ? 1 : -1);
+				Ce(e.key === "ArrowDown" ? 1 : -1);
 				return;
 			case "Enter":
-				q && W >= 0 && (e.preventDefault(), $(R[W]));
+				K && U >= 0 && (e.preventDefault(), $(L[U]));
 				return;
 			case "Escape":
-				(q || B !== null) && (e.preventDefault(), Q());
+				(K || z !== null) && (e.preventDefault(), Q());
 				return;
 		}
-	}, ve = (e) => {
-		let t = e.trim() ? R.find((t) => !t.disabled && d(t.label) === d(e)) : void 0;
-		if (t ? t.value !== h && X(t.value) : h !== "" && X(""), document.activeElement !== P.current) {
-			V(t ? null : e);
+	}, Te = (e) => {
+		let t = e.trim() ? L.find((t) => !t.disabled && u(t.label) === u(e)) : void 0;
+		if (t ? t.value !== p && X(t.value) : p !== "" && X(""), document.activeElement !== P.current) {
+			B(t ? null : e);
 			return;
 		}
-		V(e), U(!0);
-		let n = R.findIndex((t) => !t.disabled && (!e || g(t, e)));
-		L.current = !0, G(t ? R.indexOf(t) : e ? n : -1);
+		B(e), H(!0);
+		let n = L.findIndex((t) => !t.disabled && (!e || m(t, e)));
+		I.current = !0;
+		let r = t && m(t, e);
+		W(r ? L.indexOf(t) : e ? n : -1);
 	};
 	return /* @__PURE__ */ a("div", {
-		className: e("flex w-full min-w-0 flex-col gap-2", ce),
+		className: e("flex w-full min-w-0 flex-col gap-2", he),
 		children: [
-			m && /* @__PURE__ */ i(ne, {
+			f && /* @__PURE__ */ i(se, {
 				id: N,
-				htmlFor: O,
-				size: S,
-				required: w,
-				children: m
+				htmlFor: D,
+				size: b,
+				required: S,
+				children: f
 			}),
-			/* @__PURE__ */ a("div", {
-				className: "relative",
+			/* @__PURE__ */ a(l.Root, {
+				open: K,
 				children: [
-					/* @__PURE__ */ a("div", {
-						className: "relative",
-						children: [/* @__PURE__ */ i("input", {
-							...D,
-							ref: F,
-							id: O,
-							type: "text",
-							role: "combobox",
-							"aria-expanded": q,
-							"aria-controls": k,
-							"aria-autocomplete": "list",
-							"aria-activedescendant": q && W >= 0 ? j(W) : void 0,
-							"aria-invalid": M || void 0,
-							"aria-describedby": r(ue, he && A),
-							autoComplete: le,
-							required: w,
-							disabled: T,
-							placeholder: se,
-							value: B ?? z?.label ?? "",
-							onChange: (e) => ve(e.target.value),
-							onKeyDown: _e,
-							onClick: (e) => {
-								pe?.(e), !H && !e.defaultPrevented && Z();
-							},
-							onBlur: (e) => {
-								de?.(e), Q();
-							},
-							className: e(n({
-								size: S,
-								hasError: M,
-								disabled: T
-							}), "text-text-base-neutral-5 placeholder:text-text-base-neutral-2 w-full min-w-0 truncate outline-none disabled:cursor-not-allowed", !T && !M && "focus:border-border-base-neutral-4", S === "large" ? "pr-14" : "pr-12", t(S))
-						}), /* @__PURE__ */ i("button", {
-							type: "button",
-							tabIndex: -1,
-							"aria-label": v ?? m ?? D["aria-label"],
-							"aria-controls": k,
-							"aria-expanded": q,
-							disabled: T,
-							onMouseDown: (e) => e.preventDefault(),
-							onClick: () => {
-								q ? Q() : Z(), P.current?.focus();
-							},
-							className: e("absolute inset-y-0 right-0 flex cursor-pointer items-center justify-center disabled:cursor-not-allowed", S === "large" ? "w-14" : "w-12"),
-							children: /* @__PURE__ */ i(te, {
-								"aria-hidden": "true",
-								className: e("size-6 transition-transform duration-200", q ? "text-icon-prominent-accent-1 rotate-180" : "text-icon-base-neutral-3")
-							})
-						})]
+					/* @__PURE__ */ i(l.Anchor, {
+						asChild: !0,
+						children: /* @__PURE__ */ a("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ i("input", {
+								...E,
+								ref: xe,
+								id: D,
+								type: "text",
+								role: "combobox",
+								"aria-expanded": K,
+								"aria-controls": K ? O : void 0,
+								"aria-autocomplete": "list",
+								"aria-activedescendant": K && U >= 0 ? A(U) : void 0,
+								"aria-invalid": j || void 0,
+								"aria-describedby": t(_e, M && k),
+								autoComplete: ge,
+								required: S,
+								disabled: C,
+								placeholder: me,
+								value: z ?? R?.label ?? "",
+								onChange: (e) => Te(e.target.value),
+								onKeyDown: we,
+								onClick: (e) => {
+									w?.(e), !V && !e.defaultPrevented && Z();
+								},
+								onBlur: (e) => {
+									ve?.(e), Q();
+								},
+								className: e(r({
+									size: b,
+									hasError: j,
+									disabled: C
+								}), "text-text-base-neutral-5 placeholder:text-text-base-neutral-2 w-full min-w-0 truncate outline-none disabled:cursor-not-allowed", !C && !j && "focus:border-border-base-neutral-4", b === "large" ? "pr-14" : "pr-12", n(b))
+							}), /* @__PURE__ */ i("button", {
+								type: "button",
+								tabIndex: -1,
+								"aria-label": g ?? f ?? E["aria-label"],
+								"aria-controls": K ? O : void 0,
+								"aria-expanded": K,
+								disabled: C,
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => {
+									K ? Q() : Z(), P.current?.focus();
+								},
+								className: e("absolute inset-y-0 right-0 flex cursor-pointer items-center justify-center disabled:cursor-not-allowed", b === "large" ? "w-14" : "w-12"),
+								children: /* @__PURE__ */ i(ee, {
+									"aria-hidden": "true",
+									className: e("size-6 transition-transform duration-200", K ? "text-icon-prominent-accent-1 rotate-180" : "text-icon-base-neutral-3")
+								})
+							})]
+						})
 					}),
-					C && /* @__PURE__ */ i("input", {
+					x && /* @__PURE__ */ i("input", {
 						type: "hidden",
-						name: C,
-						value: h,
-						disabled: T,
-						form: D.form
+						name: x,
+						value: p,
+						disabled: C,
+						form: E.form
 					}),
-					/* @__PURE__ */ a("ul", {
-						id: k,
-						role: "listbox",
-						"aria-labelledby": m ? N : void 0,
-						"aria-label": m ? void 0 : D["aria-label"],
-						hidden: !q,
-						onMouseDown: (e) => e.preventDefault(),
-						className: e("border-border-base-neutral-2 bg-surface-base-neutral-1 absolute z-20 mt-2 max-h-72 w-full overflow-y-auto border py-1 shadow-lg", ee),
-						children: [K.map(({ option: t, index: n }) => {
-							let r = t.value === h;
-							return /* @__PURE__ */ a("li", {
-								id: j(n),
-								role: "option",
-								"aria-selected": r,
-								"aria-disabled": t.disabled || void 0,
-								onMouseMove: () => {
-									L.current = !1, t.disabled || G(n);
-								},
-								onClick: () => $(t),
-								className: e("text-text-base-neutral-5 flex cursor-pointer items-center gap-3 px-3 py-2.5 select-none", S === "large" ? "text-body-16-regular" : "text-body-14-regular", n === W && "bg-surface-base-neutral-2", r && "font-medium", t.disabled && "cursor-not-allowed opacity-50"),
-								children: [/* @__PURE__ */ i("span", {
-									className: "min-w-0 flex-1 truncate",
-									children: t.label
-								}), r && /* @__PURE__ */ i("svg", {
-									"aria-hidden": "true",
-									viewBox: "0 0 20 20",
-									fill: "none",
-									className: "text-icon-prominent-accent-1 size-4 shrink-0",
-									children: /* @__PURE__ */ i("path", {
-										d: "m4 10 3.5 3.5L16 5",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round"
-									})
-								})]
-							}, t.value);
-						}), K.length === 0 && _ !== void 0 && /* @__PURE__ */ i("li", {
-							role: "presentation",
-							className: "text-text-base-neutral-2 text-body-14-regular px-3 py-2.5",
-							children: _
-						})]
-					})
+					/* @__PURE__ */ i(l.Portal, { children: /* @__PURE__ */ i(l.Content, {
+						asChild: !0,
+						align: "start",
+						sideOffset: 8,
+						onOpenAutoFocus: (e) => e.preventDefault(),
+						onCloseAutoFocus: (e) => e.preventDefault(),
+						onInteractOutside: (e) => e.preventDefault(),
+						onEscapeKeyDown: (e) => {
+							e.isComposing || e.keyCode === 229 || (e.preventDefault(), Q());
+						},
+						children: /* @__PURE__ */ a("ul", {
+							ref: Se,
+							id: O,
+							role: "listbox",
+							"aria-labelledby": f ? N : void 0,
+							"aria-label": f ? void 0 : E["aria-label"],
+							onMouseDown: (e) => e.preventDefault(),
+							className: e(ae, "w-(--radix-popover-trigger-width)"),
+							children: [G.map(({ option: t, index: n }) => {
+								let r = t.value === p;
+								return /* @__PURE__ */ a("li", {
+									id: A(n),
+									role: "option",
+									"aria-selected": r,
+									"aria-disabled": t.disabled || void 0,
+									onMouseMove: () => {
+										I.current = !1, t.disabled || W(n);
+									},
+									onClick: () => $(t),
+									className: e(te(b), n === U && "bg-surface-base-neutral-2", r && "text-text-prominent-accent-1 font-medium", t.disabled && "cursor-not-allowed opacity-50"),
+									children: [/* @__PURE__ */ i("span", {
+										className: ie,
+										children: r && /* @__PURE__ */ i(re, {})
+									}), /* @__PURE__ */ i("span", {
+										className: "min-w-0 flex-1 truncate",
+										children: t.label
+									})]
+								}, t.value);
+							}), G.length === 0 && h !== void 0 && /* @__PURE__ */ i("li", {
+								role: "presentation",
+								className: "text-text-base-neutral-2 text-body-14-regular px-4 py-3",
+								children: h
+							})]
+						})
+					}) })
 				]
 			}),
-			/* @__PURE__ */ i(re, {
-				id: A,
-				size: S,
-				errorText: b,
-				assistiveText: x
+			/* @__PURE__ */ i(ne, {
+				id: k,
+				size: b,
+				errorText: v,
+				assistiveText: y
 			})
 		]
 	});
 };
 //#endregion
-export { p as Combobox };
+export { d as Combobox };
 
 //# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../icons/action/ChevronDownIcon\";\n\nimport type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { FieldLabel, FieldMessage } from \"@/components/ui/field\";\nimport {\n  FIELD_RADIUS,\n  fieldContainerVariants,\n  fieldValueFontSize,\n  joinIds,\n  type FieldSize,\n} from \"@/components/ui/fieldStyles\";\nimport { mergeRefs } from \"@/utils/mergeRefs\";\nimport { cn } from \"@/utils/TailwindUtil\";\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface ComboboxProps\n  extends Omit<\n    ComponentPropsWithRef<\"input\">,\n    \"size\" | \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"role\" | \"children\"\n  > {\n  /** 칸 위에 보이는 이름. `<label>`로 입력에 연결된다. */\n  label?: string;\n  /** 문자열 옵션은 값과 표시 이름이 같다. */\n  options: (string | ComboboxOption)[];\n  /** 고른 옵션의 값. 고르지 않았으면 `\"\"`. */\n  value: string;\n  /** 옵션을 고르면 그 값으로, 고른 뒤 다시 입력하기 시작하면 `\"\"`로 호출된다. */\n  onChange: (value: string) => void;\n  /** 입력한 검색어로 옵션을 거른다. 기본은 대소문자·공백을 무시한 부분 일치. */\n  filter?: (option: ComboboxOption, query: string) => boolean;\n  /** 맞는 옵션이 없을 때 목록에 보이는 문구. 없으면 목록을 닫는다. */\n  emptyText?: ReactNode;\n  /** 목록 열기 버튼의 접근 가능한 이름. 기본은 `label`. */\n  toggleLabel?: string;\n  /** `required`인데 입력한 글자가 옵션으로 골라지지 않았을 때 브라우저 검증 메시지. 다국어 페이지에서는 번역해 넘긴다. */\n  invalidSelectionText?: string;\n  errorText?: string;\n  assistiveText?: ReactNode;\n  size?: FieldSize;\n}\n\nconst normalize = (text: string) => text.toLocaleLowerCase().replace(/\\s+/g, \"\");\n\nconst defaultFilter = (option: ComboboxOption, query: string) => normalize(option.label).includes(normalize(query));\n\n/**\n * 입력해서 검색하고 목록에서 하나를 고르는 입력(WAI-ARIA combobox, list autocomplete).\n * 포커스는 입력에 남고 목록의 현재 항목은 `aria-activedescendant`로 알린다.\n * 고른 값만 `value`가 되고, 입력한 글자는 고르기 전까지 값이 아니다.\n */\nconst Combobox = ({\n  id,\n  label,\n  options,\n  value,\n  onChange,\n  filter = defaultFilter,\n  emptyText,\n  toggleLabel,\n  invalidSelectionText = \"Select an option from the list.\",\n  errorText,\n  assistiveText,\n  size = \"large\",\n  name,\n  required,\n  disabled = false,\n  placeholder,\n  className,\n  autoComplete = \"off\",\n  \"aria-describedby\": ariaDescribedBy,\n  onBlur,\n  onKeyDown,\n  onClick,\n  ref,\n  ...inputProps\n}: ComboboxProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const listboxId = `${inputId}-listbox`;\n  const messageId = `${inputId}-message`;\n  const optionId = (index: number) => `${inputId}-option-${index}`;\n  const hasError = Boolean(errorText);\n  const hasMessage = Boolean(errorText || assistiveText);\n  const labelId = `${inputId}-label`;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const setRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n  // 이 컴포넌트가 onChange로 낸 값. 바깥에서 value를 바꿨는지 구분한다.\n  const emittedValue = useRef<string | null>(null);\n  // 키보드로 옮길 때만 현재 항목을 스크롤한다. 마우스 hover로 스크롤하면 목록이 흔들린다.\n  const scrollOnMove = useRef(false);\n\n  const normalized = options.map((option) => (typeof option === \"string\" ? { value: option, label: option } : option));\n  const selected = normalized.find((option) => option.value === value);\n  // null이면 검색 중이 아니고, 입력에는 고른 옵션 이름이 보인다.\n  const [query, setQuery] = useState<string | null>(null);\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  // 인덱스는 전체 옵션 기준이라 거르더라도 id가 다른 옵션으로 넘어가지 않는다.\n  const matches = normalized\n    .map((option, index) => ({ option, index }))\n    .filter(({ option }) => (query ? filter(option, query) : true));\n  const expanded = open && !disabled && (matches.length > 0 || emptyText !== undefined);\n  const enabledMatches = matches.filter(({ option }) => !option.disabled);\n\n  useEffect(() => {\n    const shouldScroll = scrollOnMove.current;\n    scrollOnMove.current = false;\n    if (!expanded || activeIndex < 0 || !shouldScroll) return;\n    document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: \"nearest\" });\n    // optionId는 inputId에서만 바뀐다.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [expanded, activeIndex]);\n\n  // 바깥에서 value가 바뀌면(폼 reset 등) 입력 중인 검색어를 버리고 새 값의 이름을 보인다.\n  useEffect(() => {\n    if (value !== emittedValue.current) setQuery(null);\n    emittedValue.current = null;\n  }, [value]);\n\n  // 부모가 낸 값을 받아들이지 않아 value가 그대로면, 다음 바깥 변경을 우리 값으로 오인하지 않게 비운다.\n  useEffect(() => {\n    emittedValue.current = null;\n  });\n\n  // 브라우저 검증은 보이는 글자를 본다. 글자는 있는데 고른 옵션이 없으면 통과하지 않게 한다.\n  const selectionMissing = Boolean(required && !selected && query);\n  useEffect(() => {\n    inputRef.current?.setCustomValidity(selectionMissing ? invalidSelectionText : \"\");\n  }, [selectionMissing, invalidSelectionText]);\n\n  const emit = (next: string) => {\n    emittedValue.current = next;\n    onChange(next);\n  };\n\n  const openList = () => {\n    scrollOnMove.current = true;\n    setOpen(true);\n    setActiveIndex(selected && !selected.disabled ? normalized.indexOf(selected) : -1);\n  };\n\n  const close = () => {\n    setOpen(false);\n    setQuery(null);\n    setActiveIndex(-1);\n  };\n\n  const pick = (option: ComboboxOption) => {\n    if (option.disabled) return;\n    emit(option.value);\n    close();\n  };\n\n  const move = (step: 1 | -1) => {\n    if (enabledMatches.length === 0) return;\n    const position = enabledMatches.findIndex(({ index }) => index === activeIndex);\n    const next =\n      position === -1\n        ? step === 1\n          ? 0\n          : enabledMatches.length - 1\n        : (position + step + enabledMatches.length) % enabledMatches.length;\n    scrollOnMove.current = true;\n    setActiveIndex(enabledMatches[next].index);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    // IME 조합(한글·일본어) 중 Enter·방향키는 조합을 확정하는 키다. keyCode 229는 Safari용.\n    if (event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229) return;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (open && event.altKey && event.key === \"ArrowUp\") {\n          close();\n          return;\n        }\n        if (!open) {\n          // 열 때는 고른 옵션을, 고른 게 없으면 방향에 맞는 첫 옵션을 가리킨다. Alt는 열기만 한다.\n          setOpen(true);\n          const selectedIndex = selected && !selected.disabled ? normalized.indexOf(selected) : -1;\n          const edge = event.key === \"ArrowDown\" ? enabledMatches[0] : enabledMatches[enabledMatches.length - 1];\n          scrollOnMove.current = true;\n          setActiveIndex(selectedIndex >= 0 || event.altKey ? selectedIndex : (edge?.index ?? -1));\n          return;\n        }\n        move(event.key === \"ArrowDown\" ? 1 : -1);\n        return;\n      case \"Enter\":\n        if (expanded && activeIndex >= 0) {\n          event.preventDefault();\n          pick(normalized[activeIndex]);\n        }\n        return;\n      case \"Escape\":\n        if (expanded || query !== null) {\n          event.preventDefault();\n          close();\n        }\n        return;\n    }\n  };\n\n  const handleInput = (text: string) => {\n    // 브라우저 자동완성처럼 옵션 이름과 똑같이 입력되면 그 옵션을 고른 것으로 본다.\n    const exact = text.trim()\n      ? normalized.find((option) => !option.disabled && normalize(option.label) === normalize(text))\n      : undefined;\n    if (exact) {\n      if (exact.value !== value) emit(exact.value);\n    } else if (value !== \"\") {\n      emit(\"\");\n    }\n\n    // 포커스가 없을 때 들어온 입력(다른 칸에서 시작한 자동완성)은 목록을 열지 않는다.\n    if (document.activeElement !== inputRef.current) {\n      setQuery(exact ? null : text);\n      return;\n    }\n\n    setQuery(text);\n    setOpen(true);\n    const firstMatch = normalized.findIndex((option) => !option.disabled && (text ? filter(option, text) : true));\n    scrollOnMove.current = true;\n    setActiveIndex(exact ? normalized.indexOf(exact) : text ? firstMatch : -1);\n  };\n\n  return (\n    <div className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}>\n      {label && (\n        <FieldLabel id={labelId} htmlFor={inputId} size={size} required={required}>\n          {label}\n        </FieldLabel>\n      )}\n      <div className=\"relative\">\n        <div className=\"relative\">\n          <input\n            {...inputProps}\n            ref={setRef}\n            id={inputId}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded={expanded}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={expanded && activeIndex >= 0 ? optionId(activeIndex) : undefined}\n            aria-invalid={hasError || undefined}\n            aria-describedby={joinIds(ariaDescribedBy, hasMessage && messageId)}\n            autoComplete={autoComplete}\n            required={required}\n            disabled={disabled}\n            placeholder={placeholder}\n            value={query ?? selected?.label ?? \"\"}\n            onChange={(event) => handleInput(event.target.value)}\n            onKeyDown={handleKeyDown}\n            onClick={(event) => {\n              onClick?.(event);\n              if (!open && !event.defaultPrevented) openList();\n            }}\n            onBlur={(event) => {\n              onBlur?.(event);\n              close();\n            }}\n            className={cn(\n              fieldContainerVariants({ size, hasError, disabled }),\n              \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 w-full min-w-0 truncate outline-none disabled:cursor-not-allowed\",\n              !disabled && !hasError && \"focus:border-border-base-neutral-4\",\n              size === \"large\" ? \"pr-14\" : \"pr-12\",\n              fieldValueFontSize(size),\n            )}\n          />\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            aria-label={toggleLabel ?? label ?? inputProps[\"aria-label\"]}\n            aria-controls={listboxId}\n            aria-expanded={expanded}\n            disabled={disabled}\n            // 입력의 포커스를 유지해야 blur로 목록이 닫히지 않는다.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={() => {\n              if (expanded) close();\n              else openList();\n              inputRef.current?.focus();\n            }}\n            className={cn(\n              \"absolute inset-y-0 right-0 flex cursor-pointer items-center justify-center disabled:cursor-not-allowed\",\n              size === \"large\" ? \"w-14\" : \"w-12\",\n            )}\n          >\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className={cn(\n                \"size-6 transition-transform duration-200\",\n                expanded ? \"text-icon-prominent-accent-1 rotate-180\" : \"text-icon-base-neutral-3\",\n              )}\n            />\n          </button>\n        </div>\n        {name && <input type=\"hidden\" name={name} value={value} disabled={disabled} form={inputProps.form} />}\n        <ul\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={label ? labelId : undefined}\n          aria-label={label ? undefined : inputProps[\"aria-label\"]}\n          hidden={!expanded}\n          onMouseDown={(event) => event.preventDefault()}\n          className={cn(\n            \"border-border-base-neutral-2 bg-surface-base-neutral-1 absolute z-20 mt-2 max-h-72 w-full overflow-y-auto border py-1 shadow-lg\",\n            FIELD_RADIUS,\n          )}\n        >\n          {matches.map(({ option, index }) => {\n            const isSelected = option.value === value;\n            return (\n              <li\n                key={option.value}\n                id={optionId(index)}\n                role=\"option\"\n                aria-selected={isSelected}\n                aria-disabled={option.disabled || undefined}\n                onMouseMove={() => {\n                  scrollOnMove.current = false;\n                  if (!option.disabled) setActiveIndex(index);\n                }}\n                onClick={() => pick(option)}\n                className={cn(\n                  \"text-text-base-neutral-5 flex cursor-pointer items-center gap-3 px-3 py-2.5 select-none\",\n                  size === \"large\" ? \"text-body-16-regular\" : \"text-body-14-regular\",\n                  index === activeIndex && \"bg-surface-base-neutral-2\",\n                  isSelected && \"font-medium\",\n                  option.disabled && \"cursor-not-allowed opacity-50\",\n                )}\n              >\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {isSelected && (\n                  <svg\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    className=\"text-icon-prominent-accent-1 size-4 shrink-0\"\n                  >\n                    <path\n                      d=\"m4 10 3.5 3.5L16 5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            );\n          })}\n          {matches.length === 0 && emptyText !== undefined && (\n            <li role=\"presentation\" className=\"text-text-base-neutral-2 text-body-14-regular px-3 py-2.5\">\n              {emptyText}\n            </li>\n          )}\n        </ul>\n      </div>\n      <FieldMessage id={messageId} size={size} errorText={errorText} assistiveText={assistiveText} />\n    </div>\n  );\n};\n\nexport { Combobox };\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../icons/action/ChevronDownIcon\";\n\nimport type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { FieldLabel, FieldMessage } from \"@/components/ui/field\";\nimport { fieldContainerVariants, fieldValueFontSize, joinIds, type FieldSize } from \"@/components/ui/fieldStyles\";\nimport { ListboxCheckIcon } from \"@/components/ui/listbox\";\nimport {\n  LISTBOX_CHECK_SLOT,\n  LISTBOX_OPTION_ACTIVE,\n  LISTBOX_OPTION_DISABLED,\n  LISTBOX_OPTION_SELECTED,\n  LISTBOX_PANEL,\n  listboxOptionClassName,\n} from \"@/components/ui/listboxStyles\";\nimport { mergeRefs } from \"@/utils/mergeRefs\";\nimport { cn } from \"@/utils/TailwindUtil\";\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface ComboboxProps\n  extends Omit<\n    ComponentPropsWithRef<\"input\">,\n    \"size\" | \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"role\" | \"children\"\n  > {\n  /** 칸 위에 보이는 이름. `<label>`로 입력에 연결된다. */\n  label?: string;\n  /** 문자열 옵션은 값과 표시 이름이 같다. */\n  options: (string | ComboboxOption)[];\n  /** 고른 옵션의 값. 고르지 않았으면 `\"\"`. */\n  value: string;\n  /** 옵션을 고르면 그 값으로, 고른 뒤 다시 입력하기 시작하면 `\"\"`로 호출된다. */\n  onChange: (value: string) => void;\n  /** 입력한 검색어로 옵션을 거른다. 기본은 대소문자·공백을 무시한 부분 일치. */\n  filter?: (option: ComboboxOption, query: string) => boolean;\n  /** 맞는 옵션이 없을 때 목록에 보이는 문구. 없으면 목록을 닫는다. */\n  emptyText?: ReactNode;\n  /** 목록 열기 버튼의 접근 가능한 이름. 기본은 `label`. */\n  toggleLabel?: string;\n  /** `required`인데 입력한 글자가 옵션으로 골라지지 않았을 때 브라우저 검증 메시지. 다국어 페이지에서는 번역해 넘긴다. */\n  invalidSelectionText?: string;\n  errorText?: string;\n  assistiveText?: ReactNode;\n  size?: FieldSize;\n}\n\nconst normalize = (text: string) => text.toLocaleLowerCase().replace(/\\s+/g, \"\");\n\nconst defaultFilter = (option: ComboboxOption, query: string) => normalize(option.label).includes(normalize(query));\n\n/**\n * 입력해서 검색하고 목록에서 하나를 고르는 입력(WAI-ARIA combobox, list autocomplete).\n * 포커스는 입력에 남고 목록의 현재 항목은 `aria-activedescendant`로 알린다.\n * 고른 값만 `value`가 되고, 입력한 글자는 고르기 전까지 값이 아니다.\n * 목록은 `Select`와 같은 포털 패널(Radix Popover)이라 스크롤·overflow 조상에 잘리지 않는다.\n */\nconst Combobox = ({\n  id,\n  label,\n  options,\n  value,\n  onChange,\n  filter = defaultFilter,\n  emptyText,\n  toggleLabel,\n  invalidSelectionText = \"Select an option from the list.\",\n  errorText,\n  assistiveText,\n  size = \"large\",\n  name,\n  required,\n  disabled = false,\n  placeholder,\n  className,\n  autoComplete = \"off\",\n  \"aria-describedby\": ariaDescribedBy,\n  onBlur,\n  onKeyDown,\n  onClick,\n  ref,\n  ...inputProps\n}: ComboboxProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const listboxId = `${inputId}-listbox`;\n  const messageId = `${inputId}-message`;\n  const optionId = (index: number) => `${inputId}-option-${index}`;\n  const hasError = Boolean(errorText);\n  const hasMessage = Boolean(errorText || assistiveText);\n  const labelId = `${inputId}-label`;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const setRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n  // 이 컴포넌트가 onChange로 낸 값. 바깥에서 value를 바꿨는지 구분한다.\n  const emittedValue = useRef<string | null>(null);\n  // 키보드로 옮길 때만 현재 항목을 스크롤한다. 마우스 hover로 스크롤하면 목록이 흔들린다.\n  const scrollOnMove = useRef(false);\n\n  const normalized = options.map((option) => (typeof option === \"string\" ? { value: option, label: option } : option));\n  const selected = normalized.find((option) => option.value === value);\n  // null이면 검색 중이 아니고, 입력에는 고른 옵션 이름이 보인다.\n  const [query, setQuery] = useState<string | null>(null);\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  // 인덱스는 전체 옵션 기준이라 거르더라도 id가 다른 옵션으로 넘어가지 않는다.\n  const matches = normalized\n    .map((option, index) => ({ option, index }))\n    .filter(({ option }) => (query ? filter(option, query) : true));\n  const expanded = open && !disabled && (matches.length > 0 || emptyText !== undefined);\n  const enabledMatches = matches.filter(({ option }) => !option.disabled);\n\n  // 목록을 막 열면 포털이 다음 렌더에 붙으므로, 그때 목록 ref가 대신 스크롤한다.\n  const pendingScroll = useRef(-1);\n  useEffect(() => {\n    const shouldScroll = scrollOnMove.current;\n    scrollOnMove.current = false;\n    if (!expanded || activeIndex < 0 || !shouldScroll) return;\n    const option = document.getElementById(optionId(activeIndex));\n    if (option) option.scrollIntoView?.({ block: \"nearest\" });\n    else pendingScroll.current = activeIndex;\n    // optionId는 inputId에서만 바뀐다.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [expanded, activeIndex]);\n  const scrollPending = useCallback(\n    (list: HTMLUListElement | null) => {\n      if (!list || pendingScroll.current < 0) return;\n      document.getElementById(`${inputId}-option-${pendingScroll.current}`)?.scrollIntoView?.({ block: \"nearest\" });\n      pendingScroll.current = -1;\n    },\n    [inputId],\n  );\n\n  // 바깥에서 value가 바뀌면(폼 reset 등) 입력 중인 검색어를 버리고 새 값의 이름을 보인다.\n  useEffect(() => {\n    if (value !== emittedValue.current) setQuery(null);\n    emittedValue.current = null;\n  }, [value]);\n\n  // 부모가 낸 값을 받아들이지 않아 value가 그대로면, 다음 바깥 변경을 우리 값으로 오인하지 않게 비운다.\n  useEffect(() => {\n    emittedValue.current = null;\n  });\n\n  // 브라우저 검증은 보이는 글자를 본다. 글자는 있는데 고른 옵션이 없으면 통과하지 않게 한다.\n  const selectionMissing = Boolean(required && !selected && query);\n  useEffect(() => {\n    inputRef.current?.setCustomValidity(selectionMissing ? invalidSelectionText : \"\");\n  }, [selectionMissing, invalidSelectionText]);\n\n  const emit = (next: string) => {\n    emittedValue.current = next;\n    onChange(next);\n  };\n\n  const openList = () => {\n    scrollOnMove.current = true;\n    setOpen(true);\n    setActiveIndex(selected && !selected.disabled ? normalized.indexOf(selected) : -1);\n  };\n\n  const close = () => {\n    setOpen(false);\n    setQuery(null);\n    setActiveIndex(-1);\n  };\n\n  const pick = (option: ComboboxOption) => {\n    if (option.disabled) return;\n    emit(option.value);\n    close();\n  };\n\n  const move = (step: 1 | -1) => {\n    if (enabledMatches.length === 0) return;\n    const position = enabledMatches.findIndex(({ index }) => index === activeIndex);\n    const next =\n      position === -1\n        ? step === 1\n          ? 0\n          : enabledMatches.length - 1\n        : (position + step + enabledMatches.length) % enabledMatches.length;\n    scrollOnMove.current = true;\n    setActiveIndex(enabledMatches[next].index);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    // IME 조합(한글·일본어) 중 Enter·방향키는 조합을 확정하는 키다. keyCode 229는 Safari용.\n    if (event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229) return;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (open && event.altKey && event.key === \"ArrowUp\") {\n          close();\n          return;\n        }\n        if (!open) {\n          // 열 때는 고른 옵션을, 고른 게 없으면 방향에 맞는 첫 옵션을 가리킨다. Alt는 열기만 한다.\n          setOpen(true);\n          const selectedIndex = selected && !selected.disabled ? normalized.indexOf(selected) : -1;\n          const edge = event.key === \"ArrowDown\" ? enabledMatches[0] : enabledMatches[enabledMatches.length - 1];\n          scrollOnMove.current = true;\n          setActiveIndex(selectedIndex >= 0 || event.altKey ? selectedIndex : (edge?.index ?? -1));\n          return;\n        }\n        move(event.key === \"ArrowDown\" ? 1 : -1);\n        return;\n      case \"Enter\":\n        if (expanded && activeIndex >= 0) {\n          event.preventDefault();\n          pick(normalized[activeIndex]);\n        }\n        return;\n      case \"Escape\":\n        if (expanded || query !== null) {\n          event.preventDefault();\n          close();\n        }\n        return;\n    }\n  };\n\n  const handleInput = (text: string) => {\n    // 브라우저 자동완성처럼 옵션 이름과 똑같이 입력되면 그 옵션을 고른 것으로 본다.\n    const exact = text.trim()\n      ? normalized.find((option) => !option.disabled && normalize(option.label) === normalize(text))\n      : undefined;\n    if (exact) {\n      if (exact.value !== value) emit(exact.value);\n    } else if (value !== \"\") {\n      emit(\"\");\n    }\n\n    // 포커스가 없을 때 들어온 입력(다른 칸에서 시작한 자동완성)은 목록을 열지 않는다.\n    if (document.activeElement !== inputRef.current) {\n      setQuery(exact ? null : text);\n      return;\n    }\n\n    setQuery(text);\n    setOpen(true);\n    const firstMatch = normalized.findIndex((option) => !option.disabled && (text ? filter(option, text) : true));\n    scrollOnMove.current = true;\n    // 사용자 filter가 걸러낸 옵션은 목록에 없으므로 현재 항목으로 삼지 않는다.\n    const exactShown = exact && filter(exact, text);\n    setActiveIndex(exactShown ? normalized.indexOf(exact) : text ? firstMatch : -1);\n  };\n\n  return (\n    <div className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}>\n      {label && (\n        <FieldLabel id={labelId} htmlFor={inputId} size={size} required={required}>\n          {label}\n        </FieldLabel>\n      )}\n      <PopoverPrimitive.Root open={expanded}>\n        <PopoverPrimitive.Anchor asChild>\n          <div className=\"relative\">\n            <input\n              {...inputProps}\n              ref={setRef}\n              id={inputId}\n              type=\"text\"\n              role=\"combobox\"\n              aria-expanded={expanded}\n              // 목록은 열렸을 때만 DOM에 있다.\n              aria-controls={expanded ? listboxId : undefined}\n              aria-autocomplete=\"list\"\n              aria-activedescendant={expanded && activeIndex >= 0 ? optionId(activeIndex) : undefined}\n              aria-invalid={hasError || undefined}\n              aria-describedby={joinIds(ariaDescribedBy, hasMessage && messageId)}\n              autoComplete={autoComplete}\n              required={required}\n              disabled={disabled}\n              placeholder={placeholder}\n              value={query ?? selected?.label ?? \"\"}\n              onChange={(event) => handleInput(event.target.value)}\n              onKeyDown={handleKeyDown}\n              onClick={(event) => {\n                onClick?.(event);\n                if (!open && !event.defaultPrevented) openList();\n              }}\n              onBlur={(event) => {\n                onBlur?.(event);\n                close();\n              }}\n              className={cn(\n                fieldContainerVariants({ size, hasError, disabled }),\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 w-full min-w-0 truncate outline-none disabled:cursor-not-allowed\",\n                !disabled && !hasError && \"focus:border-border-base-neutral-4\",\n                size === \"large\" ? \"pr-14\" : \"pr-12\",\n                fieldValueFontSize(size),\n              )}\n            />\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-label={toggleLabel ?? label ?? inputProps[\"aria-label\"]}\n              aria-controls={expanded ? listboxId : undefined}\n              aria-expanded={expanded}\n              disabled={disabled}\n              // 입력의 포커스를 유지해야 blur로 목록이 닫히지 않는다.\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => {\n                if (expanded) close();\n                else openList();\n                inputRef.current?.focus();\n              }}\n              className={cn(\n                \"absolute inset-y-0 right-0 flex cursor-pointer items-center justify-center disabled:cursor-not-allowed\",\n                size === \"large\" ? \"w-14\" : \"w-12\",\n              )}\n            >\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className={cn(\n                  \"size-6 transition-transform duration-200\",\n                  expanded ? \"text-icon-prominent-accent-1 rotate-180\" : \"text-icon-base-neutral-3\",\n                )}\n              />\n            </button>\n          </div>\n        </PopoverPrimitive.Anchor>\n        {name && <input type=\"hidden\" name={name} value={value} disabled={disabled} form={inputProps.form} />}\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            align=\"start\"\n            sideOffset={8}\n            // 포커스는 입력에 남긴다. 바깥 클릭은 입력의 blur가 닫는다(토글 버튼 클릭이 닫고 다시 여는 것을 막는다).\n            onOpenAutoFocus={(event) => event.preventDefault()}\n            onCloseAutoFocus={(event) => event.preventDefault()}\n            onInteractOutside={(event) => event.preventDefault()}\n            // 열린 목록의 Esc는 목록만 닫는다. 감싼 Dialog 등은 닫히지 않는다.\n            onEscapeKeyDown={(event) => {\n              // IME 조합 중 Esc는 조합을 취소하는 키다. 입력의 keydown과 같은 기준.\n              if (event.isComposing || event.keyCode === 229) return;\n              event.preventDefault();\n              close();\n            }}\n          >\n            <ul\n              ref={scrollPending}\n              id={listboxId}\n              role=\"listbox\"\n              aria-labelledby={label ? labelId : undefined}\n              aria-label={label ? undefined : inputProps[\"aria-label\"]}\n              onMouseDown={(event) => event.preventDefault()}\n              className={cn(LISTBOX_PANEL, \"w-(--radix-popover-trigger-width)\")}\n            >\n              {matches.map(({ option, index }) => {\n                const isSelected = option.value === value;\n                return (\n                  <li\n                    key={option.value}\n                    id={optionId(index)}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    aria-disabled={option.disabled || undefined}\n                    onMouseMove={() => {\n                      scrollOnMove.current = false;\n                      if (!option.disabled) setActiveIndex(index);\n                    }}\n                    onClick={() => pick(option)}\n                    className={cn(\n                      listboxOptionClassName(size),\n                      index === activeIndex && LISTBOX_OPTION_ACTIVE,\n                      isSelected && LISTBOX_OPTION_SELECTED,\n                      option.disabled && LISTBOX_OPTION_DISABLED,\n                    )}\n                  >\n                    <span className={LISTBOX_CHECK_SLOT}>{isSelected && <ListboxCheckIcon />}</span>\n                    <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                  </li>\n                );\n              })}\n              {matches.length === 0 && emptyText !== undefined && (\n                <li role=\"presentation\" className=\"text-text-base-neutral-2 text-body-14-regular px-4 py-3\">\n                  {emptyText}\n                </li>\n              )}\n            </ul>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n      <FieldMessage id={messageId} size={size} errorText={errorText} assistiveText={assistiveText} />\n    </div>\n  );\n};\n\nexport { Combobox };\n"],"mappings":"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"}

package/dist/{fieldStyles-DyZu__hI.js → fieldStyles-DXyDrzxD.js}

@@ -1,6 +1,5 @@
 import { cva as e } from "class-variance-authority";
-//#region src/components/ui/fieldStyles.ts
-var t = "rounded-[4px]", n = e(`flex items-center ${t} bg-surface-base-neutral-2 border transition-colors duration-200`, {
+var t = e("flex items-center rounded-[4px] bg-surface-base-neutral-2 border transition-colors duration-200", {
 	variants: {
 		size: {
 			large: "gap-2 p-[15px] min-h-[56px]",
@@ -20,7 +19,7 @@ var t = "rounded-[4px]", n = e(`flex items-center ${t} bg-surface-base-neutral-2
 		disabled: !1,
 		hasError: !1
 	}
-}), r = e("", {
+}), n = e("", {
 	variants: {
 		size: {
 			large: "text-body-16-regular",
@@ -35,8 +34,8 @@ var t = "rounded-[4px]", n = e(`flex items-center ${t} bg-surface-base-neutral-2
 		size: "large",
 		hasError: !1
 	}
-}), i = (e) => e === "large" ? "text-title-18-bold" : "text-title-14-bold", a = (e) => e === "large" ? "text-title-20-regular" : "text-body-16-regular", o = (...e) => e.filter(Boolean).join(" ") || void 0;
+}), r = (e) => e === "large" ? "text-title-18-bold" : "text-title-14-bold", i = (e) => e === "large" ? "text-title-20-regular" : "text-body-16-regular", a = (...e) => e.filter(Boolean).join(" ") || void 0;
 //#endregion
-export { a, r as i, n, o, i as r, t };
+export { a, i, r as n, n as r, t };
 
-//# sourceMappingURL=fieldStyles-DyZu__hI.js.map
+//# sourceMappingURL=fieldStyles-DXyDrzxD.js.map

package/dist/fieldStyles-DXyDrzxD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldStyles-DXyDrzxD.js","names":[],"sources":["../src/components/ui/fieldStyles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n// TextField, Select, Combobox가 함께 쓰는 입력 칸 스타일\n// 입력 칸 모서리. 소비 레포의 --radius-* 설정과 무관하게 4px로 고정한다(목록 패널은 listboxStyles.ts).\nexport const FIELD_RADIUS = \"rounded-[4px]\";\n\nexport const fieldContainerVariants = cva(\n  `flex items-center ${FIELD_RADIUS} bg-surface-base-neutral-2 border transition-colors duration-200`,\n  {\n    variants: {\n      size: {\n        large: \"gap-2 p-[15px] min-h-[56px]\",\n        small: \"gap-3 p-[11px] min-h-[48px]\",\n      },\n      hasError: {\n        true: \"border-border-prominent-error\",\n        false: \"border-transparent\",\n      },\n      disabled: {\n        true: \"opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"large\",\n      disabled: false,\n      hasError: false,\n    },\n  },\n);\n\nexport const fieldMessageVariants = cva(\"\", {\n  variants: {\n    size: {\n      large: \"text-body-16-regular\",\n      small: \"text-caption-12-medium\",\n    },\n    hasError: {\n      true: \"text-text-prominent-error\",\n      false: \"text-text-base-neutral-2\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    hasError: false,\n  },\n});\n\nexport type FieldSize = \"large\" | \"small\";\n\nexport const fieldLabelFontSize = (size: FieldSize) => (size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\");\nexport const fieldValueFontSize = (size: FieldSize) =>\n  size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n\n// 소비 레포가 넘긴 aria-describedby와 필드 메시지 id를 합친다.\nexport const joinIds = (...ids: (string | false | undefined)[]) => ids.filter(Boolean).join(\" \") || undefined;\n"],"mappings":";AAMA,IAAa,IAAyB,EACpC,mGACA;CACE,UAAU;EACR,MAAM;GACJ,OAAO;GACP,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,UAAU;CACZ;AACF,CACF,GAEa,IAAuB,EAAI,IAAI;CAC1C,UAAU;EACR,MAAM;GACJ,OAAO;GACP,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC,GAIY,KAAsB,MAAqB,MAAS,UAAU,uBAAuB,sBACrF,KAAsB,MACjC,MAAS,UAAU,0BAA0B,wBAGlC,KAAW,GAAG,MAAwC,EAAI,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA"}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { Badge } from './src/components/badge/Badge';
 export { Chip } from './src/components/chip/Chip';
 export { CTAButton } from './src/components/cta-button/CTAButton';
 export { Popup } from './src/components/popup/Popup';
-export { TextFieldNormal, TextFieldSelect, TextFieldWithButton } from './src/components/text-field/TextField';
+export { TextFieldNormal, TextFieldWithButton } from './src/components/text-field/TextField';
 export { Select, type SelectOption } from './src/components/select/Select';
 export { Combobox, type ComboboxOption } from './src/components/combobox/Combobox';
 export { CancelFilledIcon } from './src/components/icons/action/CancelFilledIcon';

package/dist/index.es.js

@@ -7,20 +7,20 @@ import { t as a } from "./Chip-Bu5q0mhe.js";
 import { CTAButton as o } from "./cta-button.js";
 import { t as s } from "./Popup-DRf-ERpL.js";
 import { CancelFilledIcon as c } from "./icons/action/cancel-filled.js";
-import { ChevronLeftIcon as l } from "./icons/action/chevron-left.js";
-import { TextFieldNormal as u, TextFieldSelect as d, TextFieldWithButton as f } from "./text-field.js";
-import { ChevronDownIcon as p } from "./icons/action/chevron-down.js";
-import { Select as m } from "./select.js";
-import { Combobox as h } from "./combobox.js";
-import { CancelIcon as g } from "./icons/action/cancel.js";
-import { ChevronRightIcon as _ } from "./icons/action/chevron-right.js";
-import { ChevronUpIcon as v } from "./icons/action/chevron-up.js";
-import { FilterIcon as y } from "./icons/action/filter.js";
-import { RetryIcon as b } from "./icons/action/retry.js";
-import { SortingIcon as x } from "./icons/action/sorting.js";
-import { CloseIcon as S } from "./icons/static/close.js";
-import { DeleteIcon as C } from "./icons/static/delete.js";
-import { RecentIcon as w } from "./icons/static/recent.js";
-import { ReportIcon as T } from "./icons/static/report.js";
-import { ShieldDoneIcon as E } from "./icons/static/shield-done.js";
-export { i as Badge, o as CTAButton, c as CancelFilledIcon, g as CancelIcon, n as Checkbox, p as ChevronDownIcon, l as ChevronLeftIcon, _ as ChevronRightIcon, v as ChevronUpIcon, a as Chip, S as CloseIcon, h as Combobox, C as DeleteIcon, y as FilterIcon, s as Popup, e as Radio, w as RecentIcon, T as ReportIcon, b as RetryIcon, m as Select, E as ShieldDoneIcon, x as SortingIcon, t as Tabs, u as TextFieldNormal, d as TextFieldSelect, f as TextFieldWithButton, r as Toggle };
+import { TextFieldNormal as l, TextFieldWithButton as u } from "./text-field.js";
+import { ChevronDownIcon as d } from "./icons/action/chevron-down.js";
+import { Select as f } from "./select.js";
+import { Combobox as p } from "./combobox.js";
+import { CancelIcon as m } from "./icons/action/cancel.js";
+import { ChevronLeftIcon as h } from "./icons/action/chevron-left.js";
+import { ChevronRightIcon as g } from "./icons/action/chevron-right.js";
+import { ChevronUpIcon as _ } from "./icons/action/chevron-up.js";
+import { FilterIcon as v } from "./icons/action/filter.js";
+import { RetryIcon as y } from "./icons/action/retry.js";
+import { SortingIcon as b } from "./icons/action/sorting.js";
+import { CloseIcon as x } from "./icons/static/close.js";
+import { DeleteIcon as S } from "./icons/static/delete.js";
+import { RecentIcon as C } from "./icons/static/recent.js";
+import { ReportIcon as w } from "./icons/static/report.js";
+import { ShieldDoneIcon as T } from "./icons/static/shield-done.js";
+export { i as Badge, o as CTAButton, c as CancelFilledIcon, m as CancelIcon, n as Checkbox, d as ChevronDownIcon, h as ChevronLeftIcon, g as ChevronRightIcon, _ as ChevronUpIcon, a as Chip, x as CloseIcon, p as Combobox, S as DeleteIcon, v as FilterIcon, s as Popup, e as Radio, C as RecentIcon, w as ReportIcon, y as RetryIcon, f as Select, T as ShieldDoneIcon, b as SortingIcon, t as Tabs, l as TextFieldNormal, u as TextFieldWithButton, r as Toggle };