@spear-ai/spectral 1.11.2 → 1.12.0

package/dist/RadioGroup-DqKggFnI.js

@@ -0,0 +1,328 @@
+import "./styles/main.css";
+import { a as e, d as t, l as n, r, t as i } from "./dist-7HRQ5IKN.js";
+import { t as a } from "./dist-CGzgmYB9.js";
+import { t as o } from "./dist-Bft31cJh.js";
+import { t as s } from "./twUtils-D_qzdiwM.js";
+import { ErrorMessage as c, WarningMessage as l, useFormFieldId as u } from "./utils/formFieldUtils.js";
+import { Label as d } from "./Label.js";
+import { t as f } from "./dist-BK1K0g9W.js";
+import { t as p } from "./dist-s1uWaZYZ.js";
+import { n as m, r as h, t as g } from "./dist-DcUGLq_y.js";
+import { a as _, i as v, o as y, t as b, u as x } from "./proxy-CCB7C4Pu.js";
+import { t as S } from "./AnimatePresence-D9FLxIGV.js";
+import * as C from "react";
+import { createContext as w, memo as T, useContext as E, useId as D, useMemo as ee, useState as O } from "react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+//#region node_modules/.pnpm/@radix-ui+react-radio-group@1.3.8_@types+react-dom@19.2.3_@types+react@19.2.14__@types+_3694a89ac1e1986bc2583e58a261f48c/node_modules/@radix-ui/react-radio-group/dist/index.mjs
+var j = "Radio", [te, M] = t(j), [ne, re] = te(j), N = C.forwardRef((t, r) => {
+	let { __scopeRadio: a, name: o, checked: s = !1, required: c, disabled: l, value: u = "on", onCheck: d, form: f, ...p } = t, [m, h] = C.useState(null), g = n(r, (e) => h(e)), _ = C.useRef(!1), v = m ? f || !!m.closest("form") : !0;
+	return /* @__PURE__ */ A(ne, {
+		scope: a,
+		checked: s,
+		disabled: l,
+		children: [/* @__PURE__ */ k(i.button, {
+			type: "button",
+			role: "radio",
+			"aria-checked": s,
+			"data-state": L(s),
+			"data-disabled": l ? "" : void 0,
+			disabled: l,
+			value: u,
+			...p,
+			ref: g,
+			onClick: e(t.onClick, (e) => {
+				s || d?.(), v && (_.current = e.isPropagationStopped(), _.current || e.stopPropagation());
+			})
+		}), v && /* @__PURE__ */ k(I, {
+			control: m,
+			bubbles: !_.current,
+			name: o,
+			value: u,
+			checked: s,
+			required: c,
+			disabled: l,
+			form: f,
+			style: { transform: "translateX(-100%)" }
+		})]
+	});
+});
+N.displayName = j;
+var P = "RadioIndicator", F = C.forwardRef((e, t) => {
+	let { __scopeRadio: n, forceMount: r, ...a } = e, s = re(P, n);
+	return /* @__PURE__ */ k(o, {
+		present: r || s.checked,
+		children: /* @__PURE__ */ k(i.span, {
+			"data-state": L(s.checked),
+			"data-disabled": s.disabled ? "" : void 0,
+			...a,
+			ref: t
+		})
+	});
+});
+F.displayName = P;
+var ie = "RadioBubbleInput", I = C.forwardRef(({ __scopeRadio: e, control: t, checked: r, bubbles: a = !0, ...o }, s) => {
+	let c = C.useRef(null), l = n(c, s), u = p(r), d = f(t);
+	return C.useEffect(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(t, "checked").set;
+		if (u !== r && n) {
+			let t = new Event("click", { bubbles: a });
+			n.call(e, r), e.dispatchEvent(t);
+		}
+	}, [
+		u,
+		r,
+		a
+	]), /* @__PURE__ */ k(i.input, {
+		type: "radio",
+		"aria-hidden": !0,
+		defaultChecked: r,
+		...o,
+		tabIndex: -1,
+		ref: l,
+		style: {
+			...o.style,
+			...d,
+			position: "absolute",
+			pointerEvents: "none",
+			opacity: 0,
+			margin: 0
+		}
+	});
+});
+I.displayName = ie;
+function L(e) {
+	return e ? "checked" : "unchecked";
+}
+var ae = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+], R = "RadioGroup", [oe, se] = t(R, [h, M]), z = h(), B = M(), [V, ce] = oe(R), H = C.forwardRef((e, t) => {
+	let { __scopeRadioGroup: n, name: o, defaultValue: s, value: c, required: l = !1, disabled: u = !1, orientation: d, dir: f, loop: p = !0, onValueChange: h, ...g } = e, _ = z(n), v = a(f), [y, b] = r({
+		prop: c,
+		defaultProp: s ?? null,
+		onChange: h,
+		caller: R
+	});
+	return /* @__PURE__ */ k(V, {
+		scope: n,
+		name: o,
+		required: l,
+		disabled: u,
+		value: y,
+		onValueChange: b,
+		children: /* @__PURE__ */ k(m, {
+			asChild: !0,
+			..._,
+			orientation: d,
+			dir: v,
+			loop: p,
+			children: /* @__PURE__ */ k(i.div, {
+				role: "radiogroup",
+				"aria-required": l,
+				"aria-orientation": d,
+				"data-disabled": u ? "" : void 0,
+				dir: v,
+				...g,
+				ref: t
+			})
+		})
+	});
+});
+H.displayName = R;
+var U = "RadioGroupItem", W = C.forwardRef((t, r) => {
+	let { __scopeRadioGroup: i, disabled: a, ...o } = t, s = ce(U, i), c = s.disabled || a, l = z(i), u = B(i), d = C.useRef(null), f = n(r, d), p = s.value === o.value, m = C.useRef(!1);
+	return C.useEffect(() => {
+		let e = (e) => {
+			ae.includes(e.key) && (m.current = !0);
+		}, t = () => m.current = !1;
+		return document.addEventListener("keydown", e), document.addEventListener("keyup", t), () => {
+			document.removeEventListener("keydown", e), document.removeEventListener("keyup", t);
+		};
+	}, []), /* @__PURE__ */ k(g, {
+		asChild: !0,
+		...l,
+		focusable: !c,
+		active: p,
+		children: /* @__PURE__ */ k(N, {
+			disabled: c,
+			required: s.required,
+			checked: p,
+			...u,
+			...o,
+			name: s.name,
+			ref: f,
+			onCheck: () => s.onValueChange(o.value),
+			onKeyDown: e((e) => {
+				e.key === "Enter" && e.preventDefault();
+			}),
+			onFocus: e(o.onFocus, () => {
+				m.current && d.current?.click();
+			})
+		})
+	});
+});
+W.displayName = U;
+var le = "RadioGroupIndicator", G = C.forwardRef((e, t) => {
+	let { __scopeRadioGroup: n, ...r } = e;
+	return /* @__PURE__ */ k(F, {
+		...B(n),
+		...r,
+		ref: t
+	});
+});
+G.displayName = le;
+var ue = H, K = W, q = G;
+//#endregion
+//#region node_modules/.pnpm/framer-motion@12.38.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
+function de() {
+	!_.current && v();
+	let [e] = O(y.current);
+	return process.env.NODE_ENV !== "production" && x(e !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), e;
+}
+//#endregion
+//#region src/components/RadioGroup/RadioGroup.tsx
+var J = w({
+	disabledValues: [],
+	groupDisabled: !1,
+	orientation: "vertical",
+	variant: "default"
+}), Y = "pointer-events-none opacity-60", X = (e) => {
+	let t = "selected" in e, { className: n, disabled: r, errorMessage: i, itemClassName: a, name: o, onChange: d, onValueChange: f, orientation: p = "vertical", ref: m, selected: h, state: g = "default", variant: _ = "default", warningMessage: v, "aria-describedby": y, ...b } = e, x = t ? h ?? "" : h, S = u(b.id, o), C = `${S}-error`, w = `${S}-warning`, T = g === "error" && i ? C : g === "warning" && v ? w : void 0, E = (e) => {
+		f(e), d?.(e);
+	}, D = ee(() => ({
+		disabledValues: Array.isArray(r) ? r : [],
+		groupDisabled: typeof r == "boolean" ? r : !1,
+		itemClassName: a,
+		orientation: p,
+		selected: x,
+		variant: _
+	}), [
+		p,
+		_,
+		r,
+		a,
+		x
+	]);
+	return /* @__PURE__ */ A(J.Provider, {
+		value: D,
+		children: [
+			/* @__PURE__ */ k(ue, {
+				className: s("flex w-full text-text-primary", p === "vertical" ? "gap-4 flex-col" : "gap-5 flex-row", _ === "unstyled" && "gap-2.5 w-fit", n),
+				"data-state": g,
+				"data-testid": "spectral-radio-group",
+				id: S,
+				"aria-invalid": g === "error" ? !0 : void 0,
+				"aria-describedby": [T, y].filter(Boolean).join(" ") || void 0,
+				disabled: D.groupDisabled,
+				name: o,
+				onValueChange: E,
+				ref: m,
+				value: x,
+				...b
+			}),
+			g === "error" && i && /* @__PURE__ */ k(c, {
+				dataTestId: "spectral-radio-group-error-message",
+				id: C,
+				message: i
+			}),
+			g === "warning" && v && /* @__PURE__ */ k(l, {
+				dataTestId: "spectral-radio-group-warning-message",
+				id: w,
+				message: v
+			})
+		]
+	});
+};
+X.displayName = "RadioGroup";
+var fe = {
+	type: "spring",
+	stiffness: 200,
+	damping: 16
+}, Z = T(({ className: e, id: t, isDisabled: n, ref: r, transition: i = fe, value: a, ...o }) => de() ? /* @__PURE__ */ k(K, {
+	className: s("h-4.5 w-4.5 border-border-subtle ring-black relative aspect-square cursor-pointer rounded-full border-2 bg-radio-bg transition-colors", "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent", "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg", n && Y, e),
+	"data-testid": "spectral-radio-group-item",
+	disabled: n,
+	id: t,
+	ref: r,
+	value: a,
+	...o,
+	children: /* @__PURE__ */ k(q, { className: s("after:inset-0 after:h-2.5 after:w-2.5 after:absolute after:m-auto after:rounded-full after:bg-radio-bg--selected after:content-['']", n && Y) })
+}) : /* @__PURE__ */ k(K, {
+	value: a,
+	id: t,
+	disabled: n,
+	asChild: !0,
+	...o,
+	children: /* @__PURE__ */ k(b.button, {
+		className: s("h-4.5 w-4.5 border-border-subtle ring-black relative aspect-square cursor-pointer rounded-full border-2 bg-radio-bg transition-colors", "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent", "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg", n && Y, e),
+		"data-testid": "spectral-radio-group-item",
+		ref: r,
+		whileHover: { scale: 1.05 },
+		whileTap: { scale: .95 },
+		children: /* @__PURE__ */ k(q, {
+			className: "relative flex items-center justify-center",
+			children: /* @__PURE__ */ k(S, { children: /* @__PURE__ */ k(b.div, {
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				className: "h-2.5 w-2.5 absolute rounded-full bg-radio-bg--selected",
+				exit: {
+					opacity: 0,
+					scale: 0
+				},
+				initial: {
+					opacity: 0,
+					scale: 0
+				},
+				transition: i
+			}, "radio-indicator") })
+		})
+	})
+}));
+Z.displayName = "RadioButton";
+var Q = ({ children: e, className: t, disabled: n, ref: r, value: i, ...a }) => {
+	let { disabledValues: o, groupDisabled: c, itemClassName: l, variant: u, orientation: f } = E(J), p = D(), m = i.toString(), h = a.id?.toString() ?? `${m}-${p}`, g = c || o.includes(m) || !!n;
+	return u === "unstyled" ? /* @__PURE__ */ k(K, {
+		asChild: !0,
+		"data-testid": "spectral-radio-group-item",
+		disabled: g,
+		id: h,
+		ref: r,
+		value: m,
+		...a,
+		children: /* @__PURE__ */ k(d, {
+			className: s("rounded flex h-fit w-fit border-2 border-transparent data-[state=checked]:border-radio-border--selected", g && Y, l, t),
+			"data-testid": "spectral-radio-group-item-label",
+			htmlFor: h,
+			children: e
+		})
+	}) : /* @__PURE__ */ A("div", {
+		className: s("flex items-center", g && Y, l, t, f),
+		children: [/* @__PURE__ */ k(Z, {
+			ref: r,
+			value: m,
+			id: h,
+			isDisabled: g,
+			...a
+		}), e && /* @__PURE__ */ k(d, {
+			className: s("text-md font-normal cursor-pointer", f === "vertical" ? "ml-2" : "ml-1"),
+			htmlFor: h,
+			children: e
+		})]
+	});
+};
+Q.displayName = "RadioGroup.Item";
+var $ = ({ ref: e, className: t, ...n }) => /* @__PURE__ */ k(d, {
+	ref: e,
+	"data-testid": "spectral-radio-group-label",
+	className: s("text-md font-medium block", t),
+	...n
+});
+$.displayName = "RadioGroup.Label";
+//#endregion
+export { Q as n, $ as r, X as t };

package/dist/RadioGroup.d.ts

@@ -1,17 +1,24 @@
 import { Label } from '../Label/Label';
+import { BaseFormFieldProps, FormFieldState } from './utils/formFieldUtils';
 import { ComponentProps, ComponentRef, ReactElement, ReactNode, Ref } from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 type RadioGroupVariant = 'default' | 'unstyled';
 export interface RadioGroupProps extends Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, 'onChange' | 'disabled'> {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
     className?: string;
     disabled?: boolean | string[];
+    errorMessage?: BaseFormFieldProps['errorMessage'];
     itemClassName?: string;
     name: string;
+    onChange?: (selected: string) => void;
     onValueChange: (selected: string) => void;
     orientation?: 'horizontal' | 'vertical';
     required?: boolean;
     selected?: string;
+    state?: FormFieldState;
     variant?: RadioGroupVariant;
+    warningMessage?: BaseFormFieldProps['errorMessage'];
 }
 export interface RadioGroupItemProps extends ComponentProps<typeof RadioGroupPrimitive.Item> {
     className?: string;

package/dist/RadioGroup.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./RadioGroup-w_q6RGEK.js";
+import { n as e, r as t, t as n } from "./RadioGroup-DqKggFnI.js";
 export { n as RadioGroup, e as RadioGroupItem, t as RadioGroupLabel };

package/dist/Select.d.ts

@@ -1,9 +1,9 @@
-import { BaseFormFieldProps, BaseOption, DropdownWidth } from './utils/formFieldUtils';
+import { BaseFormFieldProps, BaseOption, DropdownWidth, FormFieldState } from './utils/formFieldUtils';
 import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 type SelectOption = BaseOption;
 type Align = 'start' | 'center' | 'end';
 type Side = 'top' | 'bottom' | 'left' | 'right';
-export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, BaseFormFieldProps {
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, Omit<BaseFormFieldProps, 'state'> {
     defaultValue?: string;
     dropdownWidth?: DropdownWidth;
     emptyMessage?: ReactNode;
@@ -12,9 +12,12 @@ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'v
     labelClassName?: string;
     loadingMessage?: string;
     onChange?: (value: string) => void;
+    onValueChange?: (value: string) => void;
     options: SelectOption[];
     placeholder?: string;
+    state?: Exclude<FormFieldState, 'disabled'>;
     value?: string;
+    warningMessage?: BaseFormFieldProps['errorMessage'];
 }
 export interface SelectExtendedProps extends SelectProps {
     align?: Align;

package/dist/Select.js

@@ -3,59 +3,67 @@ import "./styles/main.css";
 import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
 import { ChevronDownIcon as t } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon as n } from "./Icons/LoaderIcon.js";
-import { t as r } from "./twUtils-VNWgstKL.js";
-import { EmptyState as i, ErrorMessage as a, LoadingState as o, getAriaProps as s, getDropdownSurfaceClasses as c, getErrorMessageId as l, getFormFieldCSSProperties as ee, getOptionClasses as te, getStateClasses as ne, getTriggerClasses as re, groupOptions as ie, useFormFieldId as ae, useFormFieldState as oe } from "./utils/formFieldUtils.js";
+import { t as r } from "./twUtils-D_qzdiwM.js";
+import { EmptyState as i, ErrorMessage as a, LoadingState as o, WarningMessage as s, getAriaProps as c, getDropdownSurfaceClasses as l, getDropdownWidthStyles as ee, getErrorMessageId as te, getFormFieldCSSProperties as ne, getOptionClasses as re, getTriggerClasses as ie, groupOptions as ae, useFormFieldId as oe } from "./utils/formFieldUtils.js";
 import { Label as u } from "./Label.js";
-import { a as d, c as f, d as p, f as m, h, i as g, l as se, m as ce, n as le, o as ue, p as de, r as fe, t as pe, u as me } from "./dist-fW81qjVl.js";
-import { useState as he } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useAutoDropdownHorizontalShift as se } from "./utils/dropdownPositioning.js";
+import { a as d, c as ce, d as le, f, h as p, i as ue, l as de, m as fe, n as pe, o as me, p as he, r as ge, t as _e, u as ve } from "./dist-fW81qjVl.js";
+import { useState as ye } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
-var b = (b) => {
-	let x = "value" in b, { align: S = "start", alignOffset: C = 0, avoidCollisions: w = !0, className: T, collisionBoundary: E, collisionPadding: D = 10, defaultValue: O, dropdownWidth: k = "trigger", emptyMessage: A = "No options found", errorMessage: j, id: M, label: N, labelClassName: P, loadingMessage: F = "Loading…", name: I, onChange: L, options: R = [], placeholder: z = "Select an option", position: B = "popper", ref: ge, side: _e = "bottom", sideOffset: ve = 4, state: V = "default", value: H, "aria-label": ye, "aria-describedby": be, ...U } = b, W = x ? H ?? "" : H, [G, xe] = he(!1), K = ae(M, I), q = l(K), J = k === "trigger" ? "var(--radix-select-trigger-width)" : k === "content" ? "max-content" : k, Y = k === "trigger" || k === "content" ? k : "custom", Se = {
-		"--spectral-select-content-width": J,
-		width: B === "item-aligned" ? J : void 0
-	}, { isDisabled: X, isLoading: Z, isInvalid: Ce } = oe(U.disabled, V), we = s(V, be, U.required, q), { groups: Q, ungrouped: $ } = ie(R), Te = () => {
-		if (Z) return /* @__PURE__ */ v(o, {
+var _ = (_) => {
+	let v = "value" in _, { align: y = "start", alignOffset: b = 0, avoidCollisions: x = !0, className: S, collisionBoundary: C, collisionPadding: w = 10, defaultValue: T, dropdownWidth: E = "trigger", emptyMessage: D = "No options found", errorMessage: O, disabled: k, id: A, label: j, labelClassName: M, loadingMessage: N = "Loading…", name: P, onChange: be, onValueChange: xe, options: F = [], placeholder: Se = "Select an option", position: I = "popper", ref: L, required: R, side: Ce = "bottom", sideOffset: we = 4, state: z = "default", value: B, warningMessage: V, "aria-label": Te, "aria-describedby": Ee, ...De } = _, H = v ? B ?? "" : B, [U, Oe] = ye(!1), { dropdownShiftStyle: ke, setDropdownElement: Ae } = se(U), W = oe(A, P), G = `${W}-listbox`, K = te(W), q = `${W}-warning`, je = z === "error" && O ? K : z === "warning" && V ? q : void 0, { dropdownWidthMode: J, dropdownWidthStyle: Me, resolvedDropdownWidth: Y } = ee({
+		dropdownWidth: E,
+		triggerWidth: "var(--radix-select-trigger-width)"
+	}), Ne = {
+		"--spectral-select-content-width": Y,
+		...I === "item-aligned" ? { width: Y } : {},
+		...Me,
+		...ke
+	}, X = !!k, Z = z === "loading", Pe = z === "error", Fe = c(z, Ee, R, je), { groups: Q, ungrouped: $ } = ae(F), Ie = (e) => {
+		be?.(e), xe?.(e);
+	}, Le = () => {
+		if (Z) return /* @__PURE__ */ h(o, {
 			"data-testid": "spectral-select-loading",
-			message: F
+			message: N
 		});
-		if (R.length === 0) return /* @__PURE__ */ v(i, {
+		if (F.length === 0) return /* @__PURE__ */ h(i, {
 			"data-testid": "spectral-select-empty",
-			message: A
+			message: D
 		});
 		let t = (t) => {
-			let n = W === t.value;
-			return /* @__PURE__ */ y(g, {
-				className: r(te(!!t.disabled, !1, n), "relative flex w-full cursor-pointer items-center"),
+			let n = H === t.value;
+			return /* @__PURE__ */ g(ue, {
+				className: r(re(!!t.disabled, !1, n), "relative flex w-full cursor-pointer items-center"),
 				"data-testid": "spectral-select-item",
 				disabled: t.disabled,
 				value: t.value,
-				children: [/* @__PURE__ */ v(ue, {
+				children: [/* @__PURE__ */ h(me, {
 					"data-testid": "spectral-select-item-text",
 					className: "block truncate",
 					children: t.label
-				}), /* @__PURE__ */ v(d, {
+				}), /* @__PURE__ */ h(d, {
 					"data-testid": "spectral-select-item-selected-indicator",
 					asChild: !0,
-					children: /* @__PURE__ */ v("span", {
+					children: /* @__PURE__ */ h("span", {
 						className: "right-2 h-4 w-4 absolute flex items-center justify-center",
-						children: /* @__PURE__ */ v(e, { size: 16 })
+						children: /* @__PURE__ */ h(e, { size: 16 })
 					})
 				})]
 			}, t.value);
 		};
-		return /* @__PURE__ */ y(_, { children: [$.length > 0 && /* @__PURE__ */ y(_, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ v(m, {
+		return /* @__PURE__ */ g(m, { children: [$.length > 0 && /* @__PURE__ */ g(m, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ h(f, {
 			className: "-mx-1 my-1 h-px bg-border-secondary",
 			"data-testid": "spectral-select-separator"
-		})] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ y(le, {
+		})] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ g(pe, {
 			"data-testid": "spectral-select-group",
 			children: [
-				i > 0 && /* @__PURE__ */ v(m, {
+				i > 0 && /* @__PURE__ */ h(f, {
 					className: "-mx-1 my-1 h-px bg-border-secondary",
 					"data-testid": "spectral-select-group-separator"
 				}),
-				/* @__PURE__ */ v(u, {
-					className: r("px-2 py-1.5 text-base font-semibold text-text-primary", P),
+				/* @__PURE__ */ h(u, {
+					className: r("px-2 py-1.5 text-base font-semibold text-text-primary", M),
 					"data-testid": "spectral-select-group-label",
 					children: e
 				}),
@@ -63,96 +71,98 @@ var b = (b) => {
 			]
 		}, e))] });
 	};
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ g("div", {
 		className: "w-full",
 		children: [
-			N && /* @__PURE__ */ v(u, {
-				className: r("mb-2 block text-text-primary", P, X && "text-text-secondary"),
+			j && /* @__PURE__ */ h(u, {
+				className: r("mb-2 block text-text-primary", M, X && "text-text-secondary"),
 				"data-testid": "spectral-select-label",
-				htmlFor: K,
-				children: N
+				htmlFor: W,
+				children: j
 			}),
-			/* @__PURE__ */ y(se, {
+			/* @__PURE__ */ g(de, {
 				"data-testid": "spectral-select",
-				defaultValue: O,
+				defaultValue: T,
 				disabled: X,
-				name: I,
-				onOpenChange: xe,
-				onValueChange: L,
-				open: G,
-				required: U.required,
-				value: W,
-				children: [/* @__PURE__ */ v(de, {
-					"aria-controls": K,
-					"aria-expanded": G,
-					"aria-label": ye ?? N,
+				name: P,
+				onOpenChange: Oe,
+				onValueChange: Ie,
+				open: U,
+				required: R,
+				value: H,
+				children: [/* @__PURE__ */ h(he, {
+					"aria-controls": G,
+					"aria-expanded": U,
+					"aria-label": Te ?? j,
 					asChild: !0,
-					className: r(re(!1, V), ne(V), "text-input-text data-placeholder:text-input-text!", T),
+					className: r(ie(U, z), "text-input-text data-placeholder:text-input-text-placeholder!", S),
 					"data-slot": "select-trigger",
-					"data-state": V,
+					"data-state": z,
 					"data-testid": "spectral-select-trigger",
-					id: K,
-					ref: ge,
+					id: W,
+					ref: L,
 					role: "combobox",
-					style: ee(),
-					...we,
-					...U,
-					children: /* @__PURE__ */ y("button", {
-						className: "min-w-0 gap-2 [&>span]:min-w-0 grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center overflow-hidden text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text! [&>span]:block [&>span]:overflow-hidden [&>span]:text-ellipsis [&>span]:whitespace-nowrap [&>span[data-placeholder]]:text-input-text!",
+					style: ne(),
+					...Fe,
+					...De,
+					children: /* @__PURE__ */ g("button", {
+						className: "min-w-0 gap-2 [&>span]:min-w-0 grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center overflow-hidden text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder! [&>span]:block [&>span]:overflow-hidden [&>span]:text-ellipsis [&>span]:whitespace-nowrap [&>span[data-placeholder]]:text-input-text-placeholder!",
 						type: "button",
 						disabled: X,
-						children: [/* @__PURE__ */ v(ce, {
-							className: "min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text!",
+						children: [/* @__PURE__ */ h(fe, {
+							className: "min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!",
 							"data-testid": "spectral-select-value",
-							placeholder: z
-						}), /* @__PURE__ */ v(fe, {
+							placeholder: Se
+						}), /* @__PURE__ */ h(ge, {
 							asChild: !0,
-							children: /* @__PURE__ */ v("div", {
+							children: /* @__PURE__ */ h("div", {
 								className: "flex shrink-0 cursor-pointer items-center",
-								children: Z ? /* @__PURE__ */ v(n, { size: 20 }) : /* @__PURE__ */ v(t, {
-									className: r("transition-transform duration-200", G && "rotate-180"),
+								children: Z ? /* @__PURE__ */ h(n, { size: 20 }) : /* @__PURE__ */ h(t, {
+									className: r("transition-transform duration-200", U && "rotate-180"),
 									size: 20
 								})
 							})
 						})]
 					})
-				}), /* @__PURE__ */ v(f, { children: /* @__PURE__ */ y(pe, {
-					align: S,
-					alignOffset: C,
-					avoidCollisions: w,
-					className: r("relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", c(), "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "max-h-[min(var(--radix-select-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", B === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
-					collisionBoundary: E,
-					collisionPadding: D,
-					"data-dropdown-width-mode": Y,
-					"data-dropdown-width-value": Y === "custom" ? k : void 0,
+				}), /* @__PURE__ */ h(ce, { children: /* @__PURE__ */ g(_e, {
+					align: y,
+					alignOffset: b,
+					avoidCollisions: x,
+					className: r("relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", l(), "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "max-h-[min(var(--radix-select-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", I === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
+					collisionBoundary: C,
+					collisionPadding: w,
+					"data-dropdown-width-mode": J,
+					"data-dropdown-width-value": J === "custom" ? E : void 0,
+					id: G,
 					"data-slot": "select-content",
 					"data-testid": "spectral-select-content",
-					position: B,
-					side: _e,
-					sideOffset: ve,
-					style: Se,
+					position: I,
+					ref: Ae,
+					side: Ce,
+					sideOffset: we,
+					style: Ne,
 					children: [
-						/* @__PURE__ */ v(p, {
+						/* @__PURE__ */ h(le, {
 							className: "py-1 flex cursor-default items-center justify-center",
 							"data-testid": "spectral-select-scroll-up-button",
-							children: /* @__PURE__ */ v(t, {
+							children: /* @__PURE__ */ h(t, {
 								"aria-hidden": "true",
 								className: "rotate-180",
 								size: 18
 							})
 						}),
-						/* @__PURE__ */ v(h, {
+						/* @__PURE__ */ h(p, {
 							asChild: !0,
-							children: /* @__PURE__ */ v("div", {
-								className: r("p-1", B === "popper" && "scroll-my-1 h-(--radix-select-trigger-height) w-(--spectral-select-content-width) min-w-(--spectral-select-content-width)"),
+							children: /* @__PURE__ */ h("div", {
+								className: r("p-1", I === "popper" && (E === "trigger" ? "scroll-my-1 h-(--radix-select-trigger-height) w-(--spectral-select-content-width) min-w-(--spectral-select-content-width)" : "scroll-my-1 h-(--radix-select-trigger-height)")),
 								"data-testid": "spectral-select-items",
-								children: Te()
+								children: Le()
 							})
 						}),
-						/* @__PURE__ */ v(me, {
+						/* @__PURE__ */ h(ve, {
 							className: "py-1 flex cursor-default items-center justify-center",
 							"data-testid": "spectral-select-scroll-down-button",
-							children: /* @__PURE__ */ v(t, {
+							children: /* @__PURE__ */ h(t, {
 								"aria-hidden": "true",
 								size: 18
 							})
@@ -160,14 +170,19 @@ var b = (b) => {
 					]
 				}) })]
 			}),
-			Ce && j && /* @__PURE__ */ v(a, {
-				"data-testid": "spectral-select-error-message",
+			Pe && O && /* @__PURE__ */ h(a, {
+				dataTestId: "spectral-select-error-message",
+				id: K,
+				message: O
+			}),
+			z === "warning" && V && /* @__PURE__ */ h(s, {
+				dataTestId: "spectral-select-warning-message",
 				id: q,
-				message: j
+				message: V
 			})
 		]
 	});
 };
-b.displayName = "Select";
+_.displayName = "Select";
 //#endregion
-export { b as Select };
+export { _ as Select };