@bzync/rui 0.0.4 → 0.0.8

package/dist/{select-ClWrcj3R.js → select-CiMzLhUK.js}

@@ -1,14 +1,14 @@
-import { t as e } from "./cn-DpgY2leY.js";
-import { o as t, t as n } from "./component-styles-Bgy44fc8.js";
-import { a as r, i, n as a, o, r as s, t as c } from "./utils-CQ8pvCtk.js";
+import { t as e } from "./cn-BJyZJP-y.js";
+import { o as t, t as n } from "./component-styles-C2CbHEEA.js";
+import { a as r, i, n as a, o, r as s, t as c } from "./utils-DEw5mQrH.js";
 import { t as l } from "./use-event-callback-DGkfO_uu.js";
 import { AnimatePresence as u, motion as d } from "framer-motion";
 import { forwardRef as f, useCallback as p, useEffect as m, useId as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { createPortal as S } from "react-dom";
+import { Fragment as ee, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { createPortal as x } from "react-dom";
 //#region src/components/select/option-list.tsx
-function C({ listId: t, listRef: n, open: i, pos: a, options: o, flat: s, activeIdx: c, setActiveIdx: l, isSelected: f, onSelect: p, colorDot: m, multiselectable: h = !1, className: g }) {
-	return typeof document > "u" ? null : S(/* @__PURE__ */ b(u, { children: i && a && /* @__PURE__ */ b(d.ul, {
+function S({ listId: t, listRef: n, open: i, pos: a, options: o, flat: s, activeIdx: c, setActiveIdx: l, isSelected: f, onSelect: p, colorDot: m, multiselectable: h = !1, className: g, optionClassName: _, groupLabelClassName: v }) {
+	return typeof document > "u" ? null : x(/* @__PURE__ */ y(u, { children: i && a && /* @__PURE__ */ y(d.ul, {
 		ref: n,
 		id: t,
 		role: "listbox",
@@ -38,12 +38,12 @@ function C({ listId: t, listRef: n, open: i, pos: a, options: o, flat: s, active
 			maxHeight: a.maxHeight
 		},
 		className: e("z-[110] overflow-y-auto rounded-[var(--radius-lg)] border border-border bg-surface-raised py-1 shadow-floating", g),
-		children: o.map((e, n) => r(e) ? /* @__PURE__ */ x("li", { children: [/* @__PURE__ */ b("p", {
-			className: "px-3 pt-2 pb-1 text-xs font-semibold text-slate-600 uppercase tracking-widest",
-			children: e.group
-		}), /* @__PURE__ */ b("ul", { children: e.options.map((e) => {
+		children: o.map((n, i) => r(n) ? /* @__PURE__ */ b("li", { children: [/* @__PURE__ */ y("p", {
+			className: e("px-3 pt-2 pb-1 text-xs font-semibold text-slate-600 uppercase tracking-widest", v),
+			children: n.group
+		}), /* @__PURE__ */ y("ul", { children: n.options.map((e) => {
 			let n = s.find((t) => t.value === e.value);
-			return /* @__PURE__ */ b(w, {
+			return /* @__PURE__ */ y(C, {
 				opt: e,
 				listId: t,
 				flatIdx: n.flatIdx,
@@ -51,22 +51,24 @@ function C({ listId: t, listRef: n, open: i, pos: a, options: o, flat: s, active
 				isSelected: f(e.value),
 				onSelect: p,
 				onHover: l,
-				colorDot: m
+				colorDot: m,
+				className: _
 			}, e.value);
-		}) })] }, n) : /* @__PURE__ */ b(w, {
-			opt: e,
+		}) })] }, i) : /* @__PURE__ */ y(C, {
+			opt: n,
 			listId: t,
-			flatIdx: s.find((t) => t.value === e.value).flatIdx,
-			isActive: s.find((t) => t.value === e.value).flatIdx === c,
-			isSelected: f(e.value),
+			flatIdx: s.find((e) => e.value === n.value).flatIdx,
+			isActive: s.find((e) => e.value === n.value).flatIdx === c,
+			isSelected: f(n.value),
 			onSelect: p,
 			onHover: l,
-			colorDot: m
-		}, e.value))
+			colorDot: m,
+			className: _
+		}, n.value))
 	}) }), document.body);
 }
-function w({ opt: t, listId: n, flatIdx: r, isActive: i, isSelected: a, onSelect: o, onHover: s, colorDot: c }) {
-	return /* @__PURE__ */ x("li", {
+function C({ opt: t, listId: n, flatIdx: r, isActive: i, isSelected: a, onSelect: o, onHover: s, colorDot: c, className: l }) {
+	return /* @__PURE__ */ b("li", {
 		id: `${n}-opt-${r}`,
 		role: "option",
 		"aria-selected": a,
@@ -75,24 +77,24 @@ function w({ opt: t, listId: n, flatIdx: r, isActive: i, isSelected: a, onSelect
 		onMouseDown: (e) => e.preventDefault(),
 		onClick: () => !t.disabled && o(t),
 		onMouseEnter: () => !t.disabled && s(r),
-		className: e("flex min-h-9 items-center gap-3 px-3 py-2 cursor-pointer transition-colors select-none", i && "bg-surface-muted", a && !i && "bg-accent-50 dark:bg-accent-500/10", t.disabled && "opacity-40 cursor-not-allowed pointer-events-none"),
+		className: e("flex min-h-9 items-center gap-3 px-3 py-2 cursor-pointer transition-colors select-none", i && "bg-surface-muted", a && !i && "bg-accent-50 dark:bg-accent-500/10", t.disabled && "opacity-40 cursor-not-allowed pointer-events-none", l),
 		children: [
-			t.icon && /* @__PURE__ */ b("span", {
+			t.icon && /* @__PURE__ */ y("span", {
 				className: "shrink-0 text-slate-500 dark:text-slate-400",
 				children: t.icon
 			}),
-			t.color && t.color !== "default" && /* @__PURE__ */ b("span", { className: e("w-2 h-2 rounded-full shrink-0", c[t.color]) }),
-			/* @__PURE__ */ x("div", {
+			t.color && t.color !== "default" && /* @__PURE__ */ y("span", { className: e("w-2 h-2 rounded-full shrink-0", c[t.color]) }),
+			/* @__PURE__ */ b("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ b("p", {
+				children: [/* @__PURE__ */ y("p", {
 					className: e("text-sm leading-snug truncate", a ? "text-accent-700 dark:text-accent-300 font-medium" : "text-foreground"),
 					children: t.label
-				}), t.description && /* @__PURE__ */ b("p", {
+				}), t.description && /* @__PURE__ */ y("p", {
 					className: "mt-0.5 truncate text-xs text-muted-foreground",
 					children: t.description
 				})]
 			}),
-			a && /* @__PURE__ */ b("svg", {
+			a && /* @__PURE__ */ y("svg", {
 				"aria-hidden": "true",
 				width: "14",
 				height: "14",
@@ -103,19 +105,19 @@ function w({ opt: t, listId: n, flatIdx: r, isActive: i, isSelected: a, onSelect
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				className: "text-accent-600 shrink-0",
-				children: /* @__PURE__ */ b("path", { d: "m20 6-11 11-5-5" })
+				children: /* @__PURE__ */ y("path", { d: "m20 6-11 11-5-5" })
 			})
 		]
 	});
 }
 //#endregion
 //#region src/components/select/select-single.tsx
-var T = f(({ options: r, value: u, defaultValue: d, onChange: f, placeholder: S = "Select…", label: w, hint: T, error: E, disabled: D, required: O, clearable: k = !1, className: A, wrapperClassName: j, triggerClassName: M, listClassName: N, id: P, unstyled: F = !1 }, I) => {
-	let L = h(), R = P ?? L, z = `${R}-list`, B = `${R}-message`, [V, H] = v(!1), [U, W] = v(d ?? ""), [G, K] = v(-1), q = _(null), J = _(null), Y = l((e) => f?.(e)), X = u === void 0 ? U : u, Z = g(() => i(r), [r]), Q = g(() => Z.find((e) => e.value === X), [Z, X]), $ = p((e) => {
+var w = f(({ options: r, value: u, defaultValue: d, onChange: f, placeholder: x = "Select…", label: C, hint: w, error: T, disabled: E, required: D, clearable: O = !1, className: k, wrapperClassName: A, triggerClassName: j, listClassName: M, labelClassName: te, messageClassName: N, optionClassName: ne, groupLabelClassName: P, id: re, unstyled: F = !1 }, I) => {
+	let L = h(), R = re ?? L, z = `${R}-list`, B = `${R}-message`, [V, H] = v(!1), [U, W] = v(d ?? ""), [G, K] = v(-1), q = _(null), J = _(null), Y = l((e) => f?.(e)), X = u === void 0 ? U : u, Z = g(() => i(r), [r]), Q = g(() => Z.find((e) => e.value === X), [Z, X]), $ = p((e) => {
 		u === void 0 && W(e.value), Y(e.value), H(!1), K(-1);
-	}, [u, Y]), ee = p((e) => {
+	}, [u, Y]), ie = p((e) => {
 		e.stopPropagation(), u === void 0 && W(""), Y("");
-	}, [u, Y]), te = p((e) => {
+	}, [u, Y]), ae = p((e) => {
 		if (!V) {
 			if ([
 				"Enter",
@@ -158,46 +160,46 @@ var T = f(({ options: r, value: u, defaultValue: d, onChange: f, placeholder: S
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let ne = o(V, q);
-	return F ? /* @__PURE__ */ x("div", {
+	let oe = o(V, q);
+	return F ? /* @__PURE__ */ b("div", {
 		ref: q,
-		className: e(A, j),
-		children: [/* @__PURE__ */ b("button", {
+		className: e(k, A),
+		children: [/* @__PURE__ */ y("button", {
 			ref: I,
 			id: R,
 			type: "button",
 			role: "combobox",
 			"aria-expanded": V,
 			onClick: () => H((e) => !e),
-			className: M,
-			children: Q?.label ?? S
-		}), V && /* @__PURE__ */ b("ul", {
+			className: j,
+			children: Q?.label ?? x
+		}), V && /* @__PURE__ */ y("ul", {
 			ref: J,
 			id: z,
-			className: N,
-			children: Z.map((e) => /* @__PURE__ */ b("li", {
+			className: M,
+			children: Z.map((e) => /* @__PURE__ */ y("li", {
 				"data-idx": e.flatIdx,
 				onClick: () => $(e),
 				children: e.label
 			}, e.value))
 		})]
-	}) : /* @__PURE__ */ x("div", {
+	}) : /* @__PURE__ */ b("div", {
 		ref: q,
-		className: e("relative", t, j, A),
+		className: e("relative", t, A, k),
 		children: [
-			w && /* @__PURE__ */ x("label", {
+			C && /* @__PURE__ */ b("label", {
 				htmlFor: R,
-				className: "text-xs font-semibold leading-5 text-foreground",
-				children: [w, O && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
+				className: e("text-xs font-semibold leading-5 text-foreground", te),
+				children: [C, D && /* @__PURE__ */ b(ee, { children: [/* @__PURE__ */ y("span", {
 					"aria-hidden": "true",
 					className: "ml-1 text-destructive",
 					children: "*"
-				}), /* @__PURE__ */ b("span", {
+				}), /* @__PURE__ */ y("span", {
 					className: "sr-only",
 					children: " (required)"
 				})] })]
 			}),
-			/* @__PURE__ */ x("button", {
+			/* @__PURE__ */ b("button", {
 				ref: I,
 				id: R,
 				type: "button",
@@ -206,40 +208,40 @@ var T = f(({ options: r, value: u, defaultValue: d, onChange: f, placeholder: S
 				"aria-expanded": V,
 				"aria-controls": z,
 				"aria-activedescendant": V && G >= 0 ? `${z}-opt-${G}` : void 0,
-				"aria-invalid": E ? !0 : void 0,
-				"aria-required": O || void 0,
-				"aria-describedby": E || T ? B : void 0,
-				disabled: D,
-				onKeyDown: te,
+				"aria-invalid": T ? !0 : void 0,
+				"aria-required": D || void 0,
+				"aria-describedby": T || w ? B : void 0,
+				disabled: E,
+				onKeyDown: ae,
 				onClick: () => {
-					D || (H((e) => !e), V || K(Z.find((e) => e.value === X && e.flatIdx >= 0)?.flatIdx ?? -1));
+					E || (H((e) => !e), V || K(Z.find((e) => e.value === X && e.flatIdx >= 0)?.flatIdx ?? -1));
 				},
-				className: e("flex h-9 w-full items-center gap-2 rounded-[var(--radius-md)] px-3 text-left outline-none", n, "focus:border-accent-500 focus:ring-2 focus:ring-focus-ring/20", E && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/20", D && "opacity-50 cursor-not-allowed", M),
+				className: e("flex h-9 w-full items-center gap-2 rounded-[var(--radius-md)] px-3 text-left outline-none", n, "focus:border-accent-500 focus:ring-[3px] focus:ring-focus-ring/25", T && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/25", E && "opacity-50 cursor-not-allowed", j),
 				children: [
-					Q?.icon && /* @__PURE__ */ b("span", {
+					Q?.icon && /* @__PURE__ */ y("span", {
 						className: "shrink-0 text-slate-500 dark:text-slate-400",
 						children: Q.icon
 					}),
-					Q?.color && Q.color !== "default" && /* @__PURE__ */ b("span", { className: e("w-2 h-2 rounded-full shrink-0", s[Q.color]) }),
-					/* @__PURE__ */ b("span", {
+					Q?.color && Q.color !== "default" && /* @__PURE__ */ y("span", { className: e("w-2 h-2 rounded-full shrink-0", s[Q.color]) }),
+					/* @__PURE__ */ y("span", {
 						className: e("flex-1 min-w-0 text-sm truncate", Q ? "text-foreground" : "text-muted-foreground"),
-						children: Q?.label ?? S
+						children: Q?.label ?? x
 					}),
-					k && X && !D && /* @__PURE__ */ b("span", {
+					O && X && !E && /* @__PURE__ */ y("span", {
 						role: "button",
 						tabIndex: -1,
-						onClick: ee,
+						onClick: ie,
 						className: "shrink-0 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors",
-						children: /* @__PURE__ */ b(a, {})
+						children: /* @__PURE__ */ y(a, {})
 					}),
-					/* @__PURE__ */ b(c, { open: V })
+					/* @__PURE__ */ y(c, { open: V })
 				]
 			}),
-			/* @__PURE__ */ b(C, {
+			/* @__PURE__ */ y(S, {
 				listId: z,
 				listRef: J,
 				open: V,
-				pos: ne,
+				pos: oe,
 				options: r,
 				flat: Z,
 				activeIdx: G,
@@ -247,27 +249,29 @@ var T = f(({ options: r, value: u, defaultValue: d, onChange: f, placeholder: S
 				isSelected: (e) => e === X,
 				onSelect: $,
 				colorDot: s,
-				className: N
+				className: M,
+				optionClassName: ne,
+				groupLabelClassName: P
 			}),
-			E && /* @__PURE__ */ b("p", {
+			T && /* @__PURE__ */ y("p", {
 				id: B,
 				"aria-live": "polite",
-				className: "text-xs leading-5 text-destructive",
-				children: E
+				className: e("text-xs leading-5 text-destructive", N),
+				children: T
 			}),
-			T && !E && /* @__PURE__ */ b("p", {
+			w && !T && /* @__PURE__ */ y("p", {
 				id: B,
-				className: "text-xs leading-5 text-muted-foreground",
-				children: T
+				className: e("text-xs leading-5 text-muted-foreground", N),
+				children: w
 			})
 		]
 	});
 });
-T.displayName = "SelectSingle";
+w.displayName = "SelectSingle";
 //#endregion
 //#region src/components/select/select-multi.tsx
-var E = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f = "Select…", label: p, hint: g, error: S, disabled: w, required: T, clearable: E = !1, className: D, wrapperClassName: O, triggerClassName: k, listClassName: A, id: j, unstyled: M = !1 }, N) => {
-	let P = h(), F = j ?? P, I = `${F}-list`, L = `${F}-message`, [R, z] = v(!1), [B, V] = v(u ?? []), [H, U] = v(-1), W = _(null), G = _(null), K = l === void 0 ? B : l, q = i(r), J = q.filter((e) => K.includes(e.value));
+var T = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f = "Select…", label: p, hint: g, error: x, disabled: C, required: w, clearable: T = !1, className: E, wrapperClassName: D, triggerClassName: O, listClassName: k, labelClassName: A, messageClassName: j, optionClassName: M, groupLabelClassName: te, id: N, unstyled: ne = !1 }, P) => {
+	let re = h(), F = N ?? re, I = `${F}-list`, L = `${F}-message`, [R, z] = v(!1), [B, V] = v(u ?? []), [H, U] = v(-1), W = _(null), G = _(null), K = l === void 0 ? B : l, q = i(r), J = q.filter((e) => K.includes(e.value));
 	function Y(e) {
 		let t = K.includes(e.value) ? K.filter((t) => t !== e.value) : [...K, e.value];
 		l === void 0 && V(t), d?.(t);
@@ -314,11 +318,11 @@ var E = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
 	let $ = o(R, W);
-	return M ? /* @__PURE__ */ x("div", {
+	return ne ? /* @__PURE__ */ b("div", {
 		ref: W,
-		className: e(D, O),
-		children: [/* @__PURE__ */ b("button", {
-			ref: N,
+		className: e(E, D),
+		children: [/* @__PURE__ */ y("button", {
+			ref: P,
 			id: F,
 			type: "button",
 			role: "combobox",
@@ -326,9 +330,9 @@ var E = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f
 			"aria-controls": I,
 			onKeyDown: Q,
 			onClick: () => z((e) => !e),
-			className: k,
+			className: O,
 			children: J.length > 0 ? J.map((e) => e.label).join(", ") : f
-		}), /* @__PURE__ */ b(C, {
+		}), /* @__PURE__ */ y(S, {
 			listId: I,
 			listRef: G,
 			open: R,
@@ -341,26 +345,26 @@ var E = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f
 			onSelect: Y,
 			multiselectable: !0,
 			colorDot: s,
-			className: A
+			className: k
 		})]
-	}) : /* @__PURE__ */ x("div", {
+	}) : /* @__PURE__ */ b("div", {
 		ref: W,
-		className: e("relative", t, O, D),
+		className: e("relative", t, D, E),
 		children: [
-			p && /* @__PURE__ */ x("label", {
+			p && /* @__PURE__ */ b("label", {
 				htmlFor: F,
-				className: "text-xs font-semibold leading-5 text-foreground",
-				children: [p, T && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
+				className: e("text-xs font-semibold leading-5 text-foreground", A),
+				children: [p, w && /* @__PURE__ */ b(ee, { children: [/* @__PURE__ */ y("span", {
 					"aria-hidden": "true",
 					className: "ml-1 text-destructive",
 					children: "*"
-				}), /* @__PURE__ */ b("span", {
+				}), /* @__PURE__ */ y("span", {
 					className: "sr-only",
 					children: " (required)"
 				})] })]
 			}),
-			/* @__PURE__ */ x("button", {
-				ref: N,
+			/* @__PURE__ */ b("button", {
+				ref: P,
 				id: F,
 				type: "button",
 				role: "combobox",
@@ -368,56 +372,56 @@ var E = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f
 				"aria-expanded": R,
 				"aria-controls": I,
 				"aria-activedescendant": R && H >= 0 ? `${I}-opt-${H}` : void 0,
-				"aria-invalid": S ? !0 : void 0,
-				"aria-required": T || void 0,
-				"aria-describedby": S || g ? L : void 0,
-				disabled: w,
+				"aria-invalid": x ? !0 : void 0,
+				"aria-required": w || void 0,
+				"aria-describedby": x || g ? L : void 0,
+				disabled: C,
 				onKeyDown: Q,
 				onClick: () => {
-					w || z((e) => !e);
+					C || z((e) => !e);
 				},
-				className: e("flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-[var(--radius-md)] px-2.5 py-1.5 text-left outline-none", n, "focus:border-accent-500 focus:ring-2 focus:ring-focus-ring/20", S && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/20", w && "opacity-50 cursor-not-allowed", k),
-				children: [J.length === 0 ? /* @__PURE__ */ b("span", {
+				className: e("flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-[var(--radius-md)] px-2.5 py-1.5 text-left outline-none", n, "focus:border-accent-500 focus:ring-[3px] focus:ring-focus-ring/25", x && "border-destructive/60 hover:border-destructive/70 focus-within:border-destructive focus-within:ring-destructive/25", C && "opacity-50 cursor-not-allowed", O),
+				children: [J.length === 0 ? /* @__PURE__ */ y("span", {
 					className: "flex-1 text-sm text-slate-500 truncate",
 					children: f
-				}) : J.map((t) => /* @__PURE__ */ x("span", {
+				}) : J.map((t) => /* @__PURE__ */ b("span", {
 					className: "inline-flex max-w-[160px] items-center gap-1 rounded-md border border-border bg-surface-muted px-2 py-0.5 text-xs font-medium text-foreground",
 					children: [
-						t.color && t.color !== "default" && /* @__PURE__ */ b("span", { className: e("w-1.5 h-1.5 rounded-full shrink-0", s[t.color]) }),
-						/* @__PURE__ */ b("span", {
+						t.color && t.color !== "default" && /* @__PURE__ */ y("span", { className: e("w-1.5 h-1.5 rounded-full shrink-0", s[t.color]) }),
+						/* @__PURE__ */ y("span", {
 							className: "truncate",
 							children: t.label
 						}),
-						/* @__PURE__ */ b("span", {
+						/* @__PURE__ */ y("span", {
 							role: "button",
 							tabIndex: -1,
 							onMouseDown: (e) => e.stopPropagation(),
 							onClick: (e) => X(t.value, e),
-							className: "shrink-0 text-slate-500 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer ml-0.5",
+							className: "shrink-0 text-slate-500 dark:text-slate-400 hover:text-foreground transition-colors cursor-pointer ml-0.5",
 							"aria-label": `Remove ${t.label}`,
-							children: /* @__PURE__ */ b(a, {})
+							children: /* @__PURE__ */ y(a, {})
 						})
 					]
-				}, t.value)), /* @__PURE__ */ x("span", {
+				}, t.value)), /* @__PURE__ */ b("span", {
 					className: "ml-auto flex items-center gap-1.5 shrink-0 pl-1",
 					children: [
-						E && K.length > 0 && !w && /* @__PURE__ */ b("span", {
+						T && K.length > 0 && !C && /* @__PURE__ */ y("span", {
 							role: "button",
 							tabIndex: -1,
 							onClick: Z,
 							className: "text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition-colors",
 							"aria-label": "Clear all",
-							children: /* @__PURE__ */ b(a, {})
+							children: /* @__PURE__ */ y(a, {})
 						}),
-						K.length > 0 && /* @__PURE__ */ b("span", {
+						K.length > 0 && /* @__PURE__ */ y("span", {
 							className: "text-[10px] font-medium text-slate-500 tabular-nums",
 							children: K.length
 						}),
-						/* @__PURE__ */ b(c, { open: R })
+						/* @__PURE__ */ y(c, { open: R })
 					]
 				})]
 			}),
-			/* @__PURE__ */ b(C, {
+			/* @__PURE__ */ y(S, {
 				listId: I,
 				listRef: G,
 				open: R,
@@ -430,32 +434,34 @@ var E = f(({ options: r, value: l, defaultValue: u, onChange: d, placeholder: f
 				onSelect: Y,
 				multiselectable: !0,
 				colorDot: s,
-				className: A
+				className: k,
+				optionClassName: M,
+				groupLabelClassName: te
 			}),
-			S && /* @__PURE__ */ b("p", {
+			x && /* @__PURE__ */ y("p", {
 				id: L,
 				"aria-live": "polite",
-				className: "text-xs leading-5 text-destructive",
-				children: S
+				className: e("text-xs leading-5 text-destructive", j),
+				children: x
 			}),
-			g && !S && /* @__PURE__ */ b("p", {
+			g && !x && /* @__PURE__ */ y("p", {
 				id: L,
-				className: "text-xs leading-5 text-muted-foreground",
+				className: e("text-xs leading-5 text-muted-foreground", j),
 				children: g
 			})
 		]
 	});
 });
-E.displayName = "SelectMulti";
+T.displayName = "SelectMulti";
 //#endregion
 //#region src/components/select.tsx
-var D = f((e, t) => e.multiple ? /* @__PURE__ */ b(E, {
+var E = f((e, t) => e.multiple ? /* @__PURE__ */ y(T, {
 	...e,
 	ref: t
-}) : /* @__PURE__ */ b(T, {
+}) : /* @__PURE__ */ y(w, {
 	...e,
 	ref: t
 }));
-D.displayName = "Select";
+E.displayName = "Select";
 //#endregion
-export { D as t };
+export { E as t };