@thewrong/ui 0.3.0 → 0.4.0

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

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

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

@@ -32,6 +32,13 @@ export interface SelectCommonProps {
      * Select 필드의 상단의 라벨
      */
     label?: string;
+    /**
+     * 트리거의 접근성 이름. 명시된 aria 속성은 시각 label보다 우선한다.
+     * 보이는 라벨이 있으면 그 텍스트를 포함한다(WCAG 2.5.3).
+     */
+    "aria-label"?: string;
+    /** 참조한 요소로 접근성 이름을 지정한다. aria-label보다 우선하며 보이는 라벨 텍스트를 포함해야 한다. */
+    "aria-labelledby"?: string;
     /**
      * label 표시 방식
      * 'appear': value가 있을 때만 label이 보여요

package/dist/components/slider/Slider.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function({min:i=0,max:a=100,step:o=1,value:s,defaultValue:c,onValueChange:l,formatValue:u,className:d,style:f,"aria-valuetext":p,...m},h){let g=(0,n.useRef)(null),_=c??i+(a-i)/2,[v,y]=(0,n.useState)(_),b=t.normalizeSliderValue(s??v,i,a,o);return(0,n.useEffect)(()=>{let e=g.current?.form;if(!e||s!==void 0)return;let t=()=>y(_);return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[s,_]),(0,r.jsx)(`input`,{...m,ref:e=>{g.current=e,typeof h==`function`?h(e):h&&(h.current=e)},type:`range`,min:i,max:a,step:o,value:b,"aria-valuetext":u?u(b):p,onChange:e=>{let n=t.normalizeSliderValue(e.currentTarget.valueAsNumber,i,a,o);s===void 0&&y(n),l?.(n)},className:e.cn(`ui-slider`,d),style:{...f,"--slider-fill":`${t.sliderPercent(b,i,a)}%`}})});exports.Slider=i;

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,6 @@
+import { SliderProps } from './types.js';
+/**
+ * 단일 thumb 네이티브 범위 입력. aria-label 또는 연결된 label을 제공한다.
+ * 범위 밖 controlled 값은 화면에서만 범위 내로 보정하며 그 자체로 onValueChange를 호출하지 않는다.
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/slider/Slider.esm.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { normalizeSliderValue as t, sliderPercent as n } from "./utils.esm.js";
+import { forwardRef as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/slider/Slider.tsx
+var c = r(function({ min: r = 0, max: c = 100, step: l = 1, value: u, defaultValue: d, onValueChange: f, formatValue: p, className: m, style: h, "aria-valuetext": g, ..._ }, v) {
+	let y = a(null), b = d ?? r + (c - r) / 2, [x, S] = o(b), C = t(u ?? x, r, c, l);
+	return i(() => {
+		let e = y.current?.form;
+		if (!e || u !== void 0) return;
+		let t = () => S(b);
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [u, b]), /* @__PURE__ */ s("input", {
+		..._,
+		ref: (e) => {
+			y.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+		},
+		type: "range",
+		min: r,
+		max: c,
+		step: l,
+		value: C,
+		"aria-valuetext": p ? p(C) : g,
+		onChange: (e) => {
+			let n = t(e.currentTarget.valueAsNumber, r, c, l);
+			u === void 0 && S(n), f?.(n);
+		},
+		className: e("ui-slider", m),
+		style: {
+			...h,
+			"--slider-fill": `${n(C, r, c)}%`
+		}
+	});
+});
+//#endregion
+export { c as Slider };

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

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

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

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> {
+    /** 범위의 시작. 기본 0. */
+    min?: number;
+    /** 범위의 끝. min 이상이어야 한다. 기본 100. */
+    max?: number;
+    /** 양수 간격. 기본 1. */
+    step?: number;
+    /** 범위 밖 값은 화면에서만 보정하며 그 자체로 콜백을 호출하지 않는다. */
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** 현재 값을 스크린리더에 읽힐 단위 포함 텍스트로 변환한다. */
+    formatValue?: (value: number) => string;
+}

package/dist/components/slider/utils.cjs

@@ -0,0 +1 @@
+function e(e){let[t,n=`0`]=String(e).toLowerCase().split(`e`);return Math.max(0,(t.split(`.`)[1]?.length??0)-Number(n))}function t(t,n,r,i){if(r<=n)return n;let a=Number.isFinite(i)&&i>0?i:1,o=(t-n)/a,s=Math.floor((r-n)/a+1e-10),c=Math.min(s,Math.max(0,Math.round(o+1e-10))),l=Math.min(12,Math.max(e(n),e(a)));return Number((n+c*a).toFixed(l))}function n(e,t,n){return n<=t?0:Math.min(100,Math.max(0,(e-t)/(n-t)*100))}exports.normalizeSliderValue=t,exports.sliderPercent=n;

package/dist/components/slider/utils.d.ts

@@ -0,0 +1,3 @@
+/** 범위의 시작을 기준으로 step에 맞추고, 부동소수 오차를 제거한다. */
+export declare function normalizeSliderValue(value: number, min: number, max: number, step: number): number;
+export declare function sliderPercent(value: number, min: number, max: number): number;

package/dist/components/slider/utils.esm.js

@@ -0,0 +1,15 @@
+//#region src/components/slider/utils.ts
+function e(e) {
+	let [t, n = "0"] = String(e).toLowerCase().split("e");
+	return Math.max(0, (t.split(".")[1]?.length ?? 0) - Number(n));
+}
+function t(t, n, r, i) {
+	if (r <= n) return n;
+	let a = Number.isFinite(i) && i > 0 ? i : 1, o = (t - n) / a, s = Math.floor((r - n) / a + 1e-10), c = Math.min(s, Math.max(0, Math.round(o + 1e-10))), l = Math.min(12, Math.max(e(n), e(a)));
+	return Number((n + c * a).toFixed(l));
+}
+function n(e, t, n) {
+	return n <= t ? 0 : Math.min(100, Math.max(0, (e - t) / (n - t) * 100));
+}
+//#endregion
+export { t as normalizeSliderValue, n as sliderPercent };