haze-ui 1.32.0 → 1.34.0

package/dist/components/ScrollArea/ScrollThumb.js

@@ -0,0 +1,114 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { mergeRefs as n } from "../../utils/refs.js";
+import { useScrollAreaContext as r } from "./ScrollAreaContext.js";
+import { axisGeometry as i, readViewportAxis as a, thumbDragToScroll as o, writeViewportAxis as s } from "./scroll-math.js";
+/* empty css                      */
+import { useEffect as c, useRef as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/lib/components/ScrollArea/ScrollThumb.tsx
+var d = 600, f = "haze-ScrollThumb__thumb", p = "haze-ScrollThumb__thumbVertical", m = "haze-ScrollThumb__thumbHorizontal";
+function h(e, t, n) {
+	let r = e?.getBoundingClientRect();
+	return r ? n === "vertical" ? r.height : r.width : n === "vertical" ? t.clientHeight : t.clientWidth;
+}
+function g({ orientation: g = "vertical", className: _, ref: v, ...y }) {
+	let { mode: b, viewport: x } = r(), S = l(null), C = l(0), w = l(0), T = l(null);
+	c(() => {
+		let e = S.current;
+		if (!e || !x) return;
+		let n = e.parentElement, r = (t) => {
+			e.dataset.visible = t ? "true" : "false";
+		}, o = () => {
+			window.clearTimeout(w.current), w.current = window.setTimeout(() => {
+				T.current || r(!1);
+			}, d);
+		}, s = () => {
+			let o = g === "horizontal" && t(e) === "rtl", s = a(x, g, o), c = i({
+				...s,
+				trackSize: h(n, x, g),
+				rtl: o
+			});
+			if (n && (n.dataset.scrollable = c.scrollable ? "true" : "false"), !c.scrollable) {
+				e.style.transform = "", e.style.height = "0px", e.style.width = "0px", r(!1);
+				return;
+			}
+			g === "vertical" ? (e.style.height = `${c.thumbSize}px`, e.style.width = "") : (e.style.width = `${c.thumbSize}px`, e.style.height = "");
+			let l = g === "vertical" ? "Y" : "X";
+			e.style.transform = `translate${l}(${c.thumbOffset}px)`, b === "always" && r(!0);
+		}, c = () => {
+			cancelAnimationFrame(C.current), C.current = requestAnimationFrame(s);
+		}, l = () => {
+			c(), b === "scroll" && (r(!0), o());
+		}, u = () => {
+			b === "hover" && r(!0);
+		}, f = () => {
+			b === "hover" && !T.current && r(!1);
+		};
+		s(), x.addEventListener("scroll", l, { passive: !0 });
+		let p = e.closest("[data-slot=\"scroll-area\"]");
+		p?.addEventListener("pointerenter", u), p?.addEventListener("pointerleave", f);
+		let m;
+		return typeof ResizeObserver < "u" && (m = new ResizeObserver(c), m.observe(x)), () => {
+			x.removeEventListener("scroll", l), p?.removeEventListener("pointerenter", u), p?.removeEventListener("pointerleave", f), m?.disconnect(), cancelAnimationFrame(C.current), window.clearTimeout(w.current);
+		};
+	}, [
+		x,
+		b,
+		g
+	]);
+	let E = (e) => {
+		let n = S.current;
+		if (!n || !x || e.button !== 0) return;
+		e.stopPropagation(), e.preventDefault();
+		let r = g === "horizontal" && t(n) === "rtl", o = i({
+			...a(x, g, r),
+			trackSize: h(n.parentElement, x, g),
+			rtl: r
+		});
+		T.current = {
+			pointerId: e.pointerId,
+			startPos: g === "vertical" ? e.clientY : e.clientX,
+			thumbStart: o.thumbOffset,
+			rtl: r
+		}, n.dataset.active = "true", n.dataset.visible = "true", typeof n.setPointerCapture == "function" && n.setPointerCapture(e.pointerId);
+	}, D = (e) => {
+		let t = T.current, n = S.current;
+		if (!t || !n || !x || e.pointerId !== t.pointerId) return;
+		let r = (g === "vertical" ? e.clientY : e.clientX) - t.startPos, i = o({
+			thumbStart: t.thumbStart,
+			pointerDelta: r,
+			...a(x, g, t.rtl),
+			trackSize: h(n.parentElement, x, g),
+			rtl: t.rtl
+		});
+		s(x, g, t.rtl, i);
+	}, O = (e) => {
+		let t = T.current, n = S.current;
+		e.pointerId === t?.pointerId && (T.current = null, n && (n.dataset.active = "false", typeof n.hasPointerCapture == "function" && n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), b === "scroll" && (window.clearTimeout(w.current), w.current = window.setTimeout(() => {
+			let e = S.current;
+			e && !T.current && (e.dataset.visible = "false");
+		}, d))));
+	};
+	return /* @__PURE__ */ u("div", {
+		ref: n(v, S),
+		"data-slot": "scroll-thumb",
+		"data-orientation": g,
+		"data-visible": "false",
+		"data-active": "false",
+		onPointerDown: E,
+		onPointerMove: D,
+		onPointerUp: O,
+		onLostPointerCapture: O,
+		...y,
+		className: e([
+			f,
+			g === "vertical" ? p : m,
+			_
+		])
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/ScrollArea/ScrollViewport.js

@@ -0,0 +1,52 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { useScrollAreaContext as n } from "./ScrollAreaContext.js";
+/* empty css                         */
+import { c as r } from "react/compiler-runtime";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/lib/components/ScrollArea/ScrollViewport.tsx
+var c = "haze-ScrollViewport__viewport";
+function l(l) {
+	let u = r(26), d, f, p, m;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4]) : ({className: f, children: d, ref: p, ...m} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m);
+	let { setViewport: h, label: g } = n(), _ = a(null), [v, y] = o(!1), b, x;
+	u[5] === Symbol.for("react.memo_cache_sentinel") ? (b = () => {
+		let e = _.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth;
+			y((e) => e === t ? e : t);
+		};
+		t(), e.addEventListener("scroll", t, { passive: !0 });
+		let n;
+		return typeof ResizeObserver < "u" && (n = new ResizeObserver(t), n.observe(e)), () => {
+			e.removeEventListener("scroll", t), n?.disconnect();
+		};
+	}, x = [], u[5] = b, u[6] = x) : (b = u[5], x = u[6]), i(b, x);
+	let S;
+	u[7] === h ? S = u[8] : (S = (e) => {
+		_.current = e, h(e);
+	}, u[7] = h, u[8] = S);
+	let C = S, w;
+	u[9] !== C || u[10] !== p ? (w = t(p, C), u[9] = C, u[10] = p, u[11] = w) : w = u[11];
+	let T = w, E, D, O;
+	u[12] === m ? (E = u[13], D = u[14], O = u[15]) : ({tabIndex: O, "aria-label": E, ...D} = m, u[12] = m, u[13] = E, u[14] = D, u[15] = O);
+	let k = O === void 0 ? v ? 0 : void 0 : O, A = v ? "true" : "false", j = E ?? g, M;
+	u[16] === f ? M = u[17] : (M = [c, f], u[16] = f, u[17] = M);
+	let N;
+	return u[18] !== d || u[19] !== T || u[20] !== k || u[21] !== D || u[22] !== A || u[23] !== j || u[24] !== M ? (N = /* @__PURE__ */ s("div", {
+		ref: T,
+		"data-slot": "scroll-viewport",
+		"data-scrollable": A,
+		tabIndex: k,
+		"aria-label": j,
+		...D,
+		className: e(M),
+		children: d
+	}), u[18] = d, u[19] = T, u[20] = k, u[21] = D, u[22] = A, u[23] = j, u[24] = M, u[25] = N) : N = u[25], N;
+}
+//#endregion
+export { l as default };

package/dist/components/ScrollArea/Scrollbar.js

@@ -0,0 +1,49 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useScrollAreaContext as n } from "./ScrollAreaContext.js";
+import { axisGeometry as r, readViewportAxis as i, trackPageToScroll as a, writeViewportAxis as o } from "./scroll-math.js";
+import s from "./ScrollThumb.js";
+/* empty css                    */
+import { jsx as c } from "react/jsx-runtime";
+//#region src/lib/components/ScrollArea/Scrollbar.tsx
+var l = "haze-Scrollbar__track", u = "haze-Scrollbar__trackVertical", d = "haze-Scrollbar__trackHorizontal";
+function f({ orientation: f = "vertical", className: p, children: m, ref: h, ...g }) {
+	let { viewport: _ } = n();
+	return /* @__PURE__ */ c("div", {
+		ref: h,
+		"data-slot": "scrollbar",
+		"data-orientation": f,
+		"data-scrollable": "false",
+		onPointerDown: (e) => {
+			let n = e.currentTarget;
+			if (!_ || e.button !== 0) return;
+			e.preventDefault();
+			let s = n.getBoundingClientRect(), c = f === "horizontal" && t(n) === "rtl", l = f === "vertical" ? e.clientY - s.top : c ? s.right - e.clientX : e.clientX - s.left, u = i(_, f, c), d = r({
+				...u,
+				trackSize: f === "vertical" ? s.height : s.width,
+				rtl: c
+			});
+			if (!d.scrollable) return;
+			let p = a({
+				trackPos: l,
+				thumbOffset: d.thumbOffset,
+				thumbSize: d.thumbSize,
+				scrollOffset: u.scrollOffset,
+				viewportSize: u.viewportSize,
+				scrollSize: u.scrollSize
+			});
+			o(_, f, c, p), _.focus({ preventScroll: !0 });
+		},
+		...g,
+		className: e([
+			l,
+			f === "vertical" ? u : d,
+			p
+		]),
+		children: m ?? /* @__PURE__ */ c(s, { orientation: f })
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/ScrollArea/index.js

@@ -1,3 +1,6 @@
 "use client";
-import e from "./ScrollArea.js";
-export { e as ScrollArea };
+import e from "./ScrollThumb.js";
+import t from "./Scrollbar.js";
+import n from "./ScrollViewport.js";
+import r from "./ScrollArea.js";
+export { r as ScrollArea, e as ScrollThumb, n as ScrollViewport, t as Scrollbar };

package/dist/components/ScrollArea/scroll-math.js

@@ -0,0 +1,58 @@
+"use client";
+function e(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function t(t) {
+	let { viewportSize: n, scrollSize: r, trackSize: i, scrollOffset: a, minThumbSize: o = 24, rtl: s = !1 } = t, c = Math.max(0, r - n);
+	if (c <= 0 || i <= 0) return {
+		scrollable: !1,
+		ratio: 1,
+		thumbSize: 0,
+		thumbOffset: 0,
+		maxScroll: 0,
+		maxThumbOffset: 0
+	};
+	let l = e(n / r, 0, 1), u = e(l * i, Math.min(o, i), i), d = i - u, f = e(a / c, 0, 1) * d;
+	return {
+		scrollable: !0,
+		ratio: l,
+		thumbSize: u,
+		thumbOffset: s ? d - f : f,
+		maxScroll: c,
+		maxThumbOffset: d
+	};
+}
+function n(t, n, r) {
+	if (n.maxThumbOffset <= 0) return 0;
+	let i = e(t / n.maxThumbOffset, 0, 1);
+	return (r ? 1 - i : i) * n.maxScroll;
+}
+function r(r) {
+	let i = t({
+		...r,
+		scrollOffset: 0
+	});
+	return i.scrollable ? n(e(r.thumbStart + (r.rtl ? -r.pointerDelta : r.pointerDelta), 0, i.maxThumbOffset), i, r.rtl ?? !1) : 0;
+}
+function i(t) {
+	let n = Math.max(0, t.scrollSize - t.viewportSize);
+	if (n <= 0) return t.scrollOffset;
+	let r = t.thumbOffset + t.thumbSize / 2, i = t.trackPos > r;
+	return e(t.scrollOffset + (i ? t.viewportSize : -t.viewportSize), 0, n);
+}
+function a(e, t, n) {
+	return t === "vertical" ? {
+		viewportSize: e.clientHeight,
+		scrollSize: e.scrollHeight,
+		scrollOffset: e.scrollTop
+	} : {
+		viewportSize: e.clientWidth,
+		scrollSize: e.scrollWidth,
+		scrollOffset: n ? -e.scrollLeft : e.scrollLeft
+	};
+}
+function o(e, t, n, r) {
+	t === "vertical" ? e.scrollTop = r : e.scrollLeft = n ? -r : r;
+}
+//#endregion
+export { t as axisGeometry, e as clamp, a as readViewportAxis, r as thumbDragToScroll, i as trackPageToScroll, o as writeViewportAxis };

package/dist/components/Segmented/Segmented.js

@@ -1,20 +1,33 @@
 "use client";
-import e from "./SegmentedCore.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
+import { NativeHiddenFields as e } from "../../utils/native-form.js";
+import t from "./SegmentedCore.js";
+import { c as n } from "react/compiler-runtime";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/Segmented/Segmented.tsx
-function r({ options: r, value: i, onChange: a, size: o, className: s, ref: c }) {
-	let [l, u] = n(i, "");
-	return /* @__PURE__ */ t(e, {
-		ref: c,
-		options: r,
-		value: l,
-		onChange: (e) => {
-			u(e), a?.(e);
-		},
-		size: o,
-		className: s
-	});
+function s(s) {
+	let c = n(18), { options: l, value: u, onChange: d, size: f, className: p, name: m, ref: h } = s, [g, _] = o(u, ""), v;
+	c[0] !== d || c[1] !== _ ? (v = (e) => {
+		_(e), d?.(e);
+	}, c[0] = d, c[1] = _, c[2] = v) : v = c[2];
+	let y;
+	c[3] !== p || c[4] !== l || c[5] !== h || c[6] !== f || c[7] !== v || c[8] !== g ? (y = /* @__PURE__ */ i(t, {
+		ref: h,
+		options: l,
+		value: g,
+		onChange: v,
+		size: f,
+		className: p
+	}), c[3] = p, c[4] = l, c[5] = h, c[6] = f, c[7] = v, c[8] = g, c[9] = y) : y = c[9];
+	let b;
+	c[10] === g ? b = c[11] : (b = g === "" ? [] : [g], c[10] = g, c[11] = b);
+	let x;
+	c[12] !== m || c[13] !== b ? (x = /* @__PURE__ */ i(e, {
+		name: m,
+		values: b
+	}), c[12] = m, c[13] = b, c[14] = x) : x = c[14];
+	let S;
+	return c[15] !== y || c[16] !== x ? (S = /* @__PURE__ */ a(r, { children: [y, x] }), c[15] = y, c[16] = x, c[17] = S) : S = c[17], S;
 }
 //#endregion
-export { r as default };
+export { s as default };

package/dist/components/Select/Option.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
+import { c as e } from "react/compiler-runtime";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Select/Option.tsx
-function t({ value: t, children: n, ...r }) {
-	return /* @__PURE__ */ e("option", {
-		value: t,
+function n(n) {
+	let r = e(8), i, a, o;
+	r[0] === n ? (i = r[1], a = r[2], o = r[3]) : ({value: o, children: i, ...a} = n, r[0] = n, r[1] = i, r[2] = a, r[3] = o);
+	let s;
+	return r[4] !== i || r[5] !== a || r[6] !== o ? (s = /* @__PURE__ */ t("option", {
+		value: o,
 		"data-slot": "option",
-		...r,
-		children: n
-	});
+		...a,
+		children: i
+	}), r[4] = i, r[5] = a, r[6] = o, r[7] = s) : s = r[7], s;
 }
 //#endregion
-export { t as default };
+export { n as default };

package/dist/components/Select/OptionGroup.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
+import { c as e } from "react/compiler-runtime";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Select/OptionGroup.tsx
-function t({ label: t, children: n, ...r }) {
-	return /* @__PURE__ */ e("optgroup", {
-		label: t,
+function n(n) {
+	let r = e(8), i, a, o;
+	r[0] === n ? (i = r[1], a = r[2], o = r[3]) : ({label: a, children: i, ...o} = n, r[0] = n, r[1] = i, r[2] = a, r[3] = o);
+	let s;
+	return r[4] !== i || r[5] !== a || r[6] !== o ? (s = /* @__PURE__ */ t("optgroup", {
+		label: a,
 		"data-slot": "group",
-		...r,
-		children: n
-	});
+		...o,
+		children: i
+	}), r[4] = i, r[5] = a, r[6] = o, r[7] = s) : s = r[7], s;
 }
 //#endregion
-export { t as default };
+export { n as default };

package/dist/components/Select/Select.js

@@ -1,35 +1,57 @@
 "use client";
 import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
-import t from "./SelectCore.js";
-import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { NativeHiddenFields as t } from "../../utils/native-form.js";
+import n from "./Option.js";
+import r from "./OptionGroup.js";
+import i from "./SelectCore.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useControl as c } from "react-use-control";
 //#region src/lib/components/Select/Select.tsx
-function i({ value: i, multiple: a = !1, searchable: o = !1, clearable: s = !1, loading: c = !1, onSearch: l, maxTagCount: u, virtualized: d, size: f, className: p, classNames: m, children: h, onChange: g, onValuesChange: _, placeholder: v, ref: y, ...b }) {
-	let [x, S] = r(i, a ? [] : ""), C = e("Select"), w = C.classNames ? {
-		...C.classNames,
-		...m
-	} : m;
-	return /* @__PURE__ */ n(t, {
-		ref: y,
-		value: x,
-		onChange: (e) => {
-			S(e), _?.(e);
-		},
-		onNativeChange: a || o ? void 0 : g,
-		multiple: a,
-		searchable: o,
-		clearable: s,
-		loading: c,
-		onSearch: l,
-		maxTagCount: u,
-		virtualized: d,
-		size: f,
-		className: p,
-		classNames: w,
-		placeholder: v,
-		...b,
-		children: h
-	});
+function l(e) {
+	return e.map((e, t) => "options" in e ? /* @__PURE__ */ o(r, {
+		label: e.label,
+		children: e.options.map((e) => /* @__PURE__ */ o(n, {
+			value: e.value,
+			disabled: e.disabled,
+			children: e.label
+		}, e.value))
+	}, `group-${e.label}-${t}`) : /* @__PURE__ */ o(n, {
+		value: e.value,
+		disabled: e.disabled,
+		children: e.label
+	}, e.value));
+}
+function u({ value: n, multiple: r = !1, tags: u = !1, maxCount: d, searchable: f = !1, clearable: p = !1, loading: m = !1, onSearch: h, maxTagCount: g, virtualized: _, size: v, className: y, classNames: b, options: x, children: S, onChange: C, onValuesChange: w, placeholder: T, name: E, ref: D, ...O }) {
+	let [k, A] = c(n, r || u ? [] : ""), j = e("Select"), M = j.classNames ? {
+		...j.classNames,
+		...b
+	} : b, N = (e) => {
+		A(e), w?.(e);
+	}, P = Array.isArray(k) ? k : k === "" ? [] : [k];
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(i, {
+		ref: D,
+		value: k,
+		onChange: N,
+		onNativeChange: r || f || u ? void 0 : C,
+		multiple: r,
+		tags: u,
+		maxCount: d,
+		searchable: f,
+		clearable: p,
+		loading: m,
+		onSearch: h,
+		maxTagCount: g,
+		virtualized: _,
+		size: v,
+		className: y,
+		classNames: M,
+		placeholder: T,
+		...O,
+		children: [x === void 0 ? null : l(x), S]
+	}), /* @__PURE__ */ o(t, {
+		name: E,
+		values: P
+	})] });
 }
 //#endregion
-export { i as default };
+export { u as default };

package/dist/components/Select/SelectCore.js

@@ -3,93 +3,98 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { mergeRefs as n } from "../../utils/refs.js";
-import { extractSelectEntries as r } from "./select-options.js";
-import i from "./SelectFloating.js";
+import { extractSelectEntries as r, extractSelectOptions as i } from "./select-options.js";
+import a from "./SelectFloating.js";
 /* empty css                     */
-import { useCallback as a, useRef as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/components/Select/SelectCore.tsx
-var l = "haze-SelectCore__base", u = {
+var u = "haze-SelectCore__base", d = {
 	sm: "haze-SelectCore__sm",
 	md: "haze-SelectCore__md",
 	lg: "haze-SelectCore__lg"
-}, d = "haze-SelectCore__nativeClearWrap", f = "haze-SelectCore__nativeClear";
-function p({ value: p, onChange: m, onNativeChange: h, multiple: g = !1, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: S = "md", virtualized: C, className: w, classNames: T, placeholder: E, children: D, ref: O, ...k }) {
-	let A = t("select"), j = o(null), M = a((e) => n(j, O)(e), [j, O]);
-	if (g || _) return /* @__PURE__ */ s(i, {
-		ref: O,
-		value: p,
-		onChange: m,
-		entries: r(D),
-		multiple: g,
-		searchable: _,
-		clearable: v,
-		loading: y,
-		onSearch: b,
-		maxTagCount: x,
-		size: S,
-		virtualized: C,
-		className: w,
-		classNames: T,
-		placeholder: E,
-		...k
+}, f = "haze-SelectCore__nativeClearWrap", p = "haze-SelectCore__nativeClear";
+function m({ value: m, onChange: h, onNativeChange: g, multiple: _ = !1, tags: v = !1, maxCount: y, searchable: b = !1, clearable: x = !1, loading: S = !1, onSearch: C, maxTagCount: w, size: T = "md", virtualized: E, className: D, classNames: O, placeholder: k, children: A, ref: j, ...M }) {
+	let N = t("select"), P = s(null), F = o((e) => n(P, j)(e), [P, j]);
+	if (_ || b || v) return /* @__PURE__ */ c(a, {
+		ref: j,
+		value: m,
+		onChange: h,
+		entries: r(A),
+		multiple: _,
+		tags: v,
+		maxCount: y,
+		searchable: b,
+		clearable: x,
+		loading: S,
+		onSearch: C,
+		maxTagCount: w,
+		size: T,
+		virtualized: E,
+		className: D,
+		classNames: O,
+		placeholder: k,
+		...M
 	});
-	let N = typeof p == "string" ? p : "";
-	if (v) {
-		let { onKeyDown: t, ...n } = k;
-		return /* @__PURE__ */ c("span", {
-			"data-clearable": N !== "" || void 0,
-			className: e(d),
-			children: [/* @__PURE__ */ s("select", {
-				ref: M,
+	let I = Array.isArray(m) ? "" : m, L = (e) => {
+		let t = i(A).find((t) => String(t.value) === e)?.value;
+		return t === void 0 ? e : t;
+	};
+	if (x) {
+		let { onKeyDown: t, ...n } = M;
+		return /* @__PURE__ */ l("span", {
+			"data-clearable": I !== "" || void 0,
+			className: e(f),
+			children: [/* @__PURE__ */ c("select", {
+				ref: F,
 				"data-slot": "trigger",
-				value: p,
+				value: I,
 				onChange: (e) => {
-					m(e.target.value), h?.(e);
+					h(L(e.target.value)), g?.(e);
 				},
 				onKeyDown: (e) => {
-					if (e.key === "Backspace" && N !== "") {
-						e.preventDefault(), m("");
+					if (e.key === "Backspace" && I !== "") {
+						e.preventDefault(), h("");
 						return;
 					}
 					t?.(e);
 				},
 				...n,
 				className: e([
-					l,
-					u[S],
-					w,
-					T?.trigger
+					u,
+					d[T],
+					D,
+					O?.trigger
 				]),
-				children: D
-			}), N !== "" && /* @__PURE__ */ s("span", {
+				children: A
+			}), I !== "" && /* @__PURE__ */ c("span", {
 				"aria-hidden": "true",
 				"data-slot": "clear-button",
-				title: A.clear,
+				title: N.clear,
 				onClick: (e) => {
-					e.stopPropagation(), m(""), j.current?.focus();
+					e.stopPropagation(), h(""), P.current?.focus();
 				},
-				className: e([f, T?.clearButton]),
+				className: e([p, O?.clearButton]),
 				children: "×"
 			})]
 		});
 	}
-	return /* @__PURE__ */ s("select", {
-		ref: O,
+	return /* @__PURE__ */ c("select", {
+		ref: j,
 		"data-slot": "trigger",
-		value: p,
+		value: I,
 		onChange: (e) => {
-			m(e.target.value), h?.(e);
+			h(L(e.target.value)), g?.(e);
 		},
-		...k,
+		...M,
 		className: e([
-			l,
-			u[S],
-			w,
-			T?.trigger
+			u,
+			d[T],
+			D,
+			O?.trigger
 		]),
-		children: D
+		children: A
 	});
 }
 //#endregion
-export { p as default };
+export { m as default };