@spear-ai/spectral 1.11.2 → 1.12.0

package/dist/Checkbox.js

@@ -1,42 +1,62 @@
 import "./styles/main.css";
 import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
 import { MinusIcon as t } from "./Icons/MinusIcon.js";
-import { t as n } from "./twUtils-VNWgstKL.js";
-import { CheckboxBase as r, CheckboxIndicator as i } from "./Checkbox/CheckboxBase.js";
+import { t as n } from "./twUtils-D_qzdiwM.js";
+import { ErrorMessage as r, WarningMessage as i, useFormFieldId as a } from "./utils/formFieldUtils.js";
+import { CheckboxBase as o, CheckboxIndicator as s } from "./Checkbox/CheckboxBase.js";
 import "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/Checkbox/Checkbox.tsx
-var s = ({ checked: s, className: c, id: l, labelText: u, onCheckedChange: d, ref: f, required: p, ...m }) => /* @__PURE__ */ o("div", {
-	className: "gap-2 flex items-center",
-	children: [/* @__PURE__ */ a(r, {
-		"aria-required": p ?? void 0,
-		checked: s,
-		className: n("checkbox peer h-5 w-5 rounded-sm shrink-0 border border-checkbox-border hover:opacity-80 focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus", "focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked", c),
-		"data-testid": "spectral-checkbox",
-		id: l,
-		onCheckedChange: d,
-		ref: f,
-		...m,
-		children: /* @__PURE__ */ a(i, {
-			"data-testid": "spectral-checkbox-indicator",
-			className: n("checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked"),
-			children: s === "indeterminate" ? /* @__PURE__ */ a(t, {
-				className: "checkbox-indeterminate",
-				size: 16,
-				strokeWidth: 4
-			}) : /* @__PURE__ */ a(e, {
-				className: "checkbox-check",
-				size: 16,
-				strokeWidth: 4
-			})
+var u = ({ checked: u, className: d, errorMessage: f, id: p, label: m, labelText: h, onCheckedChange: g, ref: _, required: v, state: y = "default", warningMessage: b, "aria-describedby": x, "aria-label": S, ...C }) => {
+	let w = a(p, C.name), T = h ?? m, E = `${w}-error`, D = `${w}-warning`;
+	return /* @__PURE__ */ l("div", { children: [
+		/* @__PURE__ */ l("div", {
+			className: "gap-2 flex items-center",
+			children: [/* @__PURE__ */ c(o, {
+				"aria-describedby": [y === "error" && f && E ? E : y === "warning" && b && D ? D : void 0, x].filter(Boolean).join(" ") || void 0,
+				"aria-invalid": y === "error" ? !0 : void 0,
+				"aria-label": S ?? (T ? void 0 : "Checkbox"),
+				"aria-required": v ?? void 0,
+				checked: u,
+				className: n("checkbox peer h-5 w-5 rounded-sm shrink-0 border border-checkbox-border hover:opacity-80 focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus", "focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked", d),
+				"data-field-state": y,
+				"data-testid": "spectral-checkbox",
+				id: w,
+				onCheckedChange: g,
+				ref: _,
+				...C,
+				children: /* @__PURE__ */ c(s, {
+					"data-testid": "spectral-checkbox-indicator",
+					className: n("checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked"),
+					children: u === "indeterminate" ? /* @__PURE__ */ c(t, {
+						className: "checkbox-indeterminate",
+						size: 16,
+						strokeWidth: 4
+					}) : /* @__PURE__ */ c(e, {
+						className: "checkbox-check",
+						size: 16,
+						strokeWidth: 4
+					})
+				})
+			}), T && /* @__PURE__ */ c("label", {
+				className: "text-md peer-disabled:text-neutral-400 text-text-primary",
+				"data-testid": "spectral-checkbox-label",
+				htmlFor: w,
+				children: T
+			})]
+		}),
+		y === "error" && f && E && /* @__PURE__ */ c(r, {
+			dataTestId: "spectral-checkbox-error-message",
+			id: E,
+			message: f
+		}),
+		y === "warning" && b && D && /* @__PURE__ */ c(i, {
+			dataTestId: "spectral-checkbox-warning-message",
+			id: D,
+			message: b
 		})
-	}), /* @__PURE__ */ a("label", {
-		className: "text-md peer-disabled:text-neutral-400 text-text-primary",
-		"data-testid": "spectral-checkbox-label",
-		htmlFor: l,
-		children: u
-	})]
-});
-s.displayName = "Checkbox";
+	] });
+};
+u.displayName = "Checkbox";
 //#endregion
-export { s as Checkbox };
+export { u as Checkbox };

package/dist/Combobox/ComboboxBase.js

@@ -1,3 +1,3 @@
 import "../primitives/input-group.js";
-import { a as e, i as t, n, r, t as i } from "../ComboboxBase-qX-mQhT6.js";
+import { a as e, i as t, n, r, t as i } from "../ComboboxBase-BzDGK36x.js";
 export { i as ComboboxBase, n as CommandEmpty, r as CommandInput, t as CommandItem, e as CommandList };

package/dist/Combobox.d.ts

@@ -1,21 +1,23 @@
-import { BaseFormFieldProps, BaseOption, DropdownWidth } from './utils/formFieldUtils';
+import { BaseFormFieldProps, BaseOption, DropdownWidth, FormFieldState } from './utils/formFieldUtils';
 import { Ref } from 'react';
 export type ComboboxOption = BaseOption;
-export interface ComboboxProps extends Omit<BaseFormFieldProps, 'onChange'> {
+export interface ComboboxProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {
     className?: string;
     defaultValue?: string;
     dropdownWidth?: DropdownWidth;
     emptyMessage?: string;
     labelClassName?: string;
     loadingMessage?: string;
+    onChange?: (value: string) => void;
     onValueChange?: (value: string) => void;
     options: ComboboxOption[];
     placeholder?: string;
+    state?: Exclude<FormFieldState, 'disabled'>;
     value?: string;
     warningMessage?: BaseFormFieldProps['errorMessage'];
 }
 export declare const Combobox: {
-    ({ className, disabled, defaultValue, dropdownWidth, emptyMessage, errorMessage, id, label, labelClassName, loadingMessage, name, onValueChange, options, placeholder, ref, required, state, value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, }: ComboboxProps & {
+    ({ className, disabled, defaultValue, dropdownWidth, emptyMessage, errorMessage, id, label, labelClassName, loadingMessage, name, onChange, onValueChange, options, placeholder, ref, required, state, value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, }: ComboboxProps & {
         ref?: Ref<HTMLDivElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Combobox.js

@@ -2,137 +2,136 @@
 import "./styles/main.css";
 import { ChevronDownIcon as e } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon as t } from "./Icons/LoaderIcon.js";
-import { t as n } from "./twUtils-VNWgstKL.js";
-import { EmptyState as ee, ErrorMessage as r, LoadingState as te, WarningMessage as ne, getAriaProps as re, getDropdownSurfaceClasses as ie, getErrorMessageId as ae, getFormFieldCSSProperties as oe, getOptionClasses as i, getTriggerClasses as a, useFormFieldId as o, useFormFieldState as s } from "./utils/formFieldUtils.js";
-import { useUncontrolledState as c } from "./hooks/useUncontrolledState.js";
-import { Label as l } from "./Label.js";
-import { InputGroup as u, InputGroupAddon as d } from "./primitives/input-group.js";
-import { a as f, i as p, n as m, o as h } from "./ComboboxBase-qX-mQhT6.js";
-import { useCallback as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { t as n } from "./twUtils-D_qzdiwM.js";
+import { EmptyState as ee, ErrorMessage as r, LoadingState as i, WarningMessage as a, getAriaProps as o, getDropdownSurfaceClasses as s, getDropdownWidthStyles as c, getErrorMessageId as l, getFormFieldCSSProperties as u, getOptionClasses as d, getTriggerClasses as f, useFormFieldId as te } from "./utils/formFieldUtils.js";
+import { useUncontrolledState as ne } from "./hooks/useUncontrolledState.js";
+import { Label as re } from "./Label.js";
+import { InputGroup as ie, InputGroupAddon as ae } from "./primitives/input-group.js";
+import { useAutoDropdownHorizontalShift as oe } from "./utils/dropdownPositioning.js";
+import { a as se, i as p, n as ce, o as m } from "./ComboboxBase-BzDGK36x.js";
+import { useCallback as le, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Combobox/Combobox.tsx
-var x = ({ className: x, disabled: se, defaultValue: ce = "", dropdownWidth: S = "trigger", emptyMessage: C = "No options found.", errorMessage: w, id: T, label: E, labelClassName: D, loadingMessage: O = "Loading…", name: k, onValueChange: A, options: j = [], placeholder: M = "Search…", ref: N, required: P, state: F = "default", value: I, warningMessage: L, "aria-describedby": R, "aria-label": z }) => {
-	process.env.NODE_ENV !== "production" && !E && !z && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
-	let B = _(null), V = _(null), H = o(T, k), U = `${H}-listbox`, W = ae(H), G = `${H}-warning`, le = F === "error" ? W : F === "warning" && L ? G : void 0, { isDisabled: K, isLoading: q, isInvalid: ue } = s(se, F), de = re(F, R, P, le), [J, Y] = v(!1), [fe, X] = v(""), [Z, pe] = c({
-		value: I,
-		defaultValue: ce,
-		onChange: A
-	}), me = j.find((e) => e.value === Z), Q = S === "trigger" || S === "content" ? S : "custom", $ = {
-		maxWidth: "calc(100vw - 2rem)",
-		overflowX: "auto",
-		overflowY: "auto"
-	}, he = S === "trigger" ? { width: "100%" } : S === "content" ? {
-		minWidth: "max-content",
-		width: "max-content",
-		...$
-	} : {
-		width: S,
-		...$
-	}, ge = (e) => {
-		pe(e === Z ? "" : e), X(""), Y(!1);
-	}, _e = (e) => {
-		e.key === "Escape" && Y(!1);
-	}, ve = g(() => {
+var y = ({ className: y, disabled: ue, defaultValue: de = "", dropdownWidth: b = "trigger", emptyMessage: x = "No options found.", errorMessage: S, id: C, label: w, labelClassName: T, loadingMessage: E = "Loading…", name: D, onChange: O, onValueChange: k, options: A = [], placeholder: j = "Search…", ref: M, required: N, state: P = "default", value: F, warningMessage: I, "aria-describedby": L, "aria-label": R }) => {
+	process.env.NODE_ENV !== "production" && !w && !R && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
+	let z = h(null), B = h(null), V = te(C, D), H = `${V}-listbox`, U = l(V), W = `${V}-warning`, fe = P === "error" ? U : P === "warning" && I ? W : void 0, G = !!ue, K = P === "loading", pe = P === "error", me = o(P, L, N, fe), [q, J] = g(!1), { dropdownShiftStyle: he, setDropdownElement: ge } = oe(q), [Y, X] = g(""), [Z, _e] = ne({
+		value: F,
+		defaultValue: de,
+		onChange: (e) => {
+			O ? O(e) : k?.(e);
+		}
+	}), Q = A.find((e) => e.value === Z), ve = !!(Q && Y.length === 0), { dropdownWidthMode: $, dropdownWidthStyle: ye } = c({
+		dropdownWidth: b,
+		triggerWidth: "var(--radix-popover-trigger-width)"
+	}), be = (e) => {
+		_e(e === Z ? "" : e), X(""), J(!1);
+	}, xe = (e) => {
+		e.key === "Escape" && J(!1);
+	}, Se = le(() => {
 		requestAnimationFrame(() => {
-			V.current?.contains(document.activeElement) || (Y(!1), X(""));
+			B.current?.contains(document.activeElement) || (J(!1), X(""));
 		});
-	}, []), ye = () => {
-		K || q || (B.current?.focus(), Y(!0));
-	}, be = () => q ? /* @__PURE__ */ y("div", {
-		id: U,
+	}, []), Ce = () => {
+		G || K || (z.current?.focus(), J(!0));
+	}, we = () => K ? /* @__PURE__ */ _("div", {
+		id: H,
 		role: "listbox",
-		children: /* @__PURE__ */ y(te, { message: O })
-	}) : j.length === 0 ? /* @__PURE__ */ y("div", {
-		id: U,
+		children: /* @__PURE__ */ _(i, { message: E })
+	}) : A.length === 0 ? /* @__PURE__ */ _("div", {
+		id: H,
 		role: "listbox",
-		children: /* @__PURE__ */ y(ee, { message: C })
-	}) : /* @__PURE__ */ b(f, {
-		id: U,
-		children: [/* @__PURE__ */ y(m, { children: C }), j.map((e) => /* @__PURE__ */ y(p, {
-			className: n(i(!!e.disabled, !1, Z === e.value), "group/command-item relative flex w-full items-center data-[selected=true]:bg-input-bg--hover"),
+		children: /* @__PURE__ */ _(ee, { message: x })
+	}) : /* @__PURE__ */ v(se, {
+		id: H,
+		children: [/* @__PURE__ */ _(ce, { children: x }), A.map((e) => /* @__PURE__ */ _(p, {
+			className: n(d(!!e.disabled, !1, Z === e.value), "group/command-item relative flex w-full items-center data-[selected=true]:bg-input-bg--hover"),
 			"data-checked": Z === e.value || void 0,
 			disabled: e.disabled,
 			onMouseDown: (e) => e.preventDefault(),
-			onSelect: () => ge(e.value),
+			onSelect: () => be(e.value),
 			value: e.label,
-			children: /* @__PURE__ */ y("span", {
+			children: /* @__PURE__ */ _("span", {
 				className: "min-w-0 flex-1 truncate whitespace-nowrap",
 				children: e.label
 			})
 		}, e.value))]
 	});
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "w-full",
-		ref: N,
+		ref: M,
 		children: [
-			k && /* @__PURE__ */ y("input", {
+			D && /* @__PURE__ */ _("input", {
 				type: "hidden",
-				name: k,
+				name: D,
 				value: Z,
-				disabled: K
+				disabled: G
 			}),
-			E && /* @__PURE__ */ y(l, {
-				className: n("mb-2 block text-text-primary", D, K && "text-text-secondary"),
+			w && /* @__PURE__ */ _(re, {
+				className: n("mb-2 block text-text-primary", T, G && "text-text-secondary"),
 				"data-testid": "spectral-combobox-label",
-				htmlFor: H,
-				children: E
+				htmlFor: V,
+				children: w
 			}),
-			/* @__PURE__ */ b(h, {
-				ref: V,
-				label: z ?? E,
-				onKeyDown: _e,
+			/* @__PURE__ */ v(m, {
+				ref: B,
+				label: R ?? w,
+				onKeyDown: xe,
 				className: "relative w-full",
-				children: [/* @__PURE__ */ b(u, {
+				children: [/* @__PURE__ */ v(ie, {
 					"data-slot": "combobox-content",
-					"data-state": F,
+					"data-state": P,
 					"data-testid": "spectral-combobox-trigger",
-					className: n(a(J, F), "ring-0!", K && "pointer-events-none cursor-not-allowed", x),
-					onClick: ye,
-					style: oe(),
-					children: [/* @__PURE__ */ y(h.Input, {
-						ref: B,
+					className: n(f(q, P), "ring-0!", G && "pointer-events-none cursor-not-allowed", y),
+					onClick: Ce,
+					style: u(),
+					children: [/* @__PURE__ */ _(m.Input, {
+						ref: z,
 						autoComplete: "off",
 						"data-slot": "input-group-control",
-						"aria-controls": U,
-						"aria-expanded": J,
-						"aria-label": z ?? E,
-						className: "min-w-0 px-3 py-1 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden placeholder:text-input-text! placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none",
-						disabled: K,
-						id: H,
-						onBlur: ve,
-						onFocus: () => !K && !q && Y(!0),
+						"aria-controls": H,
+						"aria-expanded": q,
+						"aria-label": R ?? w,
+						className: n("min-w-0 px-3 py-1 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none", ve ? "placeholder:text-input-text!" : "placeholder:text-input-text-placeholder!"),
+						disabled: G,
+						id: V,
+						onBlur: Se,
+						onFocus: () => !G && !K && J(!0),
 						onValueChange: X,
-						placeholder: me?.label ?? M,
+						placeholder: Q?.label ?? j,
 						role: "combobox",
-						value: fe,
-						...de
-					}), /* @__PURE__ */ y(d, {
+						value: Y,
+						...me
+					}), /* @__PURE__ */ _(ae, {
 						align: "inline-end",
 						className: "cursor-pointer",
-						children: q ? /* @__PURE__ */ y(t, { className: "size-5 motion-safe:animate-spin" }) : /* @__PURE__ */ y(e, { className: n("size-5 shrink-0 transition-transform duration-200", J && "rotate-180") })
+						children: K ? /* @__PURE__ */ _(t, { className: "size-5 motion-safe:animate-spin" }) : /* @__PURE__ */ _(e, { className: n("size-5 shrink-0 transition-transform duration-200", q && "rotate-180") })
 					})]
-				}), /* @__PURE__ */ y("div", {
-					className: n("left-0 mt-1 p-1 absolute top-full z-50 w-full", ie(), "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2 motion-safe:zoom-in-95", !J && "hidden"),
-					"data-dropdown-width-mode": Q,
-					"data-dropdown-width-value": Q === "custom" ? S : void 0,
+				}), /* @__PURE__ */ _("div", {
+					className: n("left-0 mt-1 p-1 absolute top-full z-50 w-full", s(), "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2 motion-safe:zoom-in-95", !q && "hidden"),
+					"data-dropdown-width-mode": $,
+					"data-dropdown-width-value": $ === "custom" ? b : void 0,
 					"data-testid": "spectral-combobox-content",
-					style: he,
-					children: be()
+					ref: ge,
+					style: {
+						...ye,
+						...he
+					},
+					children: we()
 				})]
 			}),
-			ue && w && /* @__PURE__ */ y(r, {
+			pe && S && /* @__PURE__ */ _(r, {
 				dataTestId: "spectral-combobox-error-message",
-				id: W,
-				message: w
+				id: U,
+				message: S
 			}),
-			F === "warning" && L && /* @__PURE__ */ y(ne, {
+			P === "warning" && I && /* @__PURE__ */ _(a, {
 				dataTestId: "spectral-combobox-warning-message",
-				id: G,
-				message: L
+				id: W,
+				message: I
 			})
 		]
 	});
 };
-x.displayName = "Combobox";
+y.displayName = "Combobox";
 //#endregion
-export { x as Combobox };
+export { y as Combobox };

package/dist/{ComboboxBase-qX-mQhT6.js → ComboboxBase-BzDGK36x.js}

@@ -3,7 +3,7 @@ import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
 import { SearchIcon as t } from "./Icons/SearchIcon.js";
 import { c as n, t as r } from "./dist-7HRQ5IKN.js";
 import { t as i } from "./dist-Dtvmk11N.js";
-import { t as a } from "./twUtils-VNWgstKL.js";
+import { t as a } from "./twUtils-D_qzdiwM.js";
 import { InputGroup as o, InputGroupAddon as s } from "./primitives/input-group.js";
 import { a as c, i as l, n as u, o as d } from "./dist-B9tup-4O.js";
 import * as f from "react";

package/dist/ControlGroup/ControlGroupSelect.d.ts

@@ -4,6 +4,7 @@ import { DropdownWidth, FormFieldState } from '../utils/formFieldUtils';
 import { ComponentProps } from 'react';
 import { ControlGroupProps } from './ControlGroup';
 export interface SelectOptionType {
+    disabled?: boolean;
     label: string;
     value: string;
 }
@@ -26,6 +27,7 @@ type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlG
     disabled?: boolean;
     dropdownWidth?: DropdownWidth;
     errorMessage?: string | string[] | Record<string, unknown> | null;
+    id?: string;
     /** When `captionLayout` is `inline`, overrides the input's accessible name (defaults to `inputPlaceholder` when set). */
     inputAriaLabel?: string;
     inputPlaceholder?: string;
@@ -35,10 +37,11 @@ type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlG
     /** When `captionLayout` is `inline` and `selectPlaceholder` is empty, sets the select trigger's accessible name. */
     selectAriaLabel?: string;
     selectOptions: SelectOptionType[];
-    state?: FormFieldState;
+    state?: Exclude<FormFieldState, 'disabled'>;
     type?: 'number' | 'text';
+    warningMessage?: string | string[] | Record<string, unknown> | null;
 };
 export type ControlGroupSelectProps = ControlGroupSelectBaseProps & ControlGroupSelectInputControlProps;
-export declare const ControlGroupSelect: ({ amountStep, ariaLabel, captionLayout, className, dataTestId, disabled, errorMessage, dropdownWidth, inputAriaLabel, inputPlaceholder, inputValue, maxAmount, minAmount, onInputChange, orientation, selectAriaLabel, selectOptions, selectPlaceholder, state, type, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlGroupSelect: ({ amountStep, ariaLabel, captionLayout, className, dataTestId, disabled, errorMessage, id, dropdownWidth, inputAriaLabel, inputPlaceholder, inputValue, maxAmount, minAmount, onInputChange, orientation, selectAriaLabel, selectOptions, selectPlaceholder, state, type, warningMessage, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ControlGroupSelect.d.ts.map

package/dist/ControlGroup/ControlGroupSelect.js

@@ -1,6 +1,6 @@
 "use client";
 import "../styles/main.css";
-import { t as e } from "../twUtils-VNWgstKL.js";
+import { t as e } from "../twUtils-D_qzdiwM.js";
 import { getStateClasses as t } from "../utils/formFieldUtils.js";
 import { Label as n } from "../Label.js";
 import { Input as r } from "../primitives/input.js";
@@ -15,45 +15,47 @@ var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-b
 }, S = (e, t) => {
 	let n = e?.trim();
 	return n && n.length > 0 ? n : t;
-}, C = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, dropdownWidth: s = "trigger", inputAriaLabel: c, inputPlaceholder: u, inputValue: d, maxAmount: p = 1e6, minAmount: h = 0, onInputChange: g, orientation: y = "horizontal", selectAriaLabel: b, selectOptions: C, selectPlaceholder: T, state: E = "default", type: D = "number", ...O }) => {
-	let k = f(), A = `${k}-amount`, j = `${k}-select`, M = `${A}-label`, N = `${j}-label`, P = n === "above", F = P ? void 0 : u, I = P ? void 0 : T, L = S(u, _), R = S(T, v), z = c ?? (P ? void 0 : L), B = b ?? (P ? void 0 : R), V = x(u, 3), H = x(T, 5), U = t ?? `${L} and ${R}`, W = !!a || E === "disabled", G = d !== void 0 && g !== void 0;
+}, C = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, id: s, dropdownWidth: c = "trigger", inputAriaLabel: u, inputPlaceholder: d, inputValue: p, maxAmount: h = 1e6, minAmount: g = 0, onInputChange: y, orientation: b = "horizontal", selectAriaLabel: C, selectOptions: T, selectPlaceholder: E, state: D = "default", type: O = "number", warningMessage: k, ...A }) => {
+	let j = f(), M = s ?? j, N = `${M}-amount`, P = `${M}-select`, F = `${N}-label`, I = `${P}-label`, L = n === "above", R = L ? void 0 : d, z = L ? void 0 : E, B = S(d, _), V = S(E, v), H = u ?? (L ? void 0 : B), U = C ?? (L ? void 0 : V), W = x(d, 3), G = x(E, 5), K = t ?? `${B} and ${V}`, q = !!a, J = p !== void 0 && y !== void 0;
 	return /* @__PURE__ */ m(l, {
-		"aria-label": U,
+		"aria-label": K,
 		className: r,
 		"data-testid": i,
 		disabled: a,
 		errorMessage: o,
-		orientation: y,
-		state: E,
+		id: M,
+		orientation: b,
+		state: D,
+		warningMessage: k,
 		children: /* @__PURE__ */ m(w, {
 			amountStep: e,
 			dataTestId: i,
-			inputAccessibleName: z,
-			inputCaption: F,
-			inputId: A,
-			inputLabelId: M,
-			inputLabelText: L,
-			inputMinWidth: V,
-			inputValue: G ? d : void 0,
-			isDisabled: W,
-			maxAmount: p,
-			minAmount: h,
-			onInputChange: G ? g : void 0,
-			dropdownWidth: s,
-			selectCaption: I,
-			selectOptions: C,
-			selectLabelId: N,
-			selectLabelText: R,
-			selectProps: O,
-			selectTriggerAriaLabel: B,
-			selectTriggerId: j,
-			selectTriggerMinWidth: H,
-			type: D,
-			useAboveLabels: P
+			inputAccessibleName: H,
+			inputCaption: R,
+			inputId: N,
+			inputLabelId: F,
+			inputLabelText: B,
+			inputMinWidth: W,
+			inputValue: J ? p : void 0,
+			isDisabled: q,
+			maxAmount: h,
+			minAmount: g,
+			onInputChange: J ? y : void 0,
+			dropdownWidth: c,
+			selectCaption: z,
+			selectOptions: T,
+			selectLabelId: I,
+			selectLabelText: V,
+			selectProps: A,
+			selectTriggerAriaLabel: U,
+			selectTriggerId: P,
+			selectTriggerMinWidth: G,
+			type: O,
+			useAboveLabels: L
 		})
 	});
 }, w = ({ amountStep: l, dataTestId: f, dropdownWidth: _, inputAccessibleName: v, inputCaption: x, inputId: S, inputLabelId: C, inputLabelText: w, inputMinWidth: T, inputValue: E, isDisabled: D, maxAmount: O, minAmount: k, onInputChange: A, selectCaption: j, selectLabelId: M, selectLabelText: N, selectOptions: P, selectProps: F, selectTriggerAriaLabel: I, selectTriggerId: L, selectTriggerMinWidth: R, type: z, useAboveLabels: B }) => {
-	let { errorMessageId: V, orientation: H, state: U } = d(), W = H === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", G = H === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", K = H === "horizontal" ? "me-0" : "mbe-0", q = H === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", J = /* @__PURE__ */ m(r, {
+	let { messageId: V, orientation: H, state: U } = d(), W = H === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", G = H === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", K = H === "horizontal" ? "me-0" : "mbe-0", q = H === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", J = /* @__PURE__ */ m(r, {
 		"aria-describedby": V,
 		"aria-label": v,
 		"aria-labelledby": B ? C : void 0,
@@ -81,7 +83,7 @@ var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-b
 		id: B ? L : void 0,
 		style: R ? { minWidth: R } : void 0,
 		children: /* @__PURE__ */ m(c, {
-			className: "min-w-0 block max-w-full truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text!",
+			className: "min-w-0 block max-w-full truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!",
 			placeholder: j
 		})
 	});
@@ -115,6 +117,7 @@ var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-b
 			"data-testid": `${f}-select-content`,
 			dropdownWidth: _,
 			children: P.map((e) => /* @__PURE__ */ m(o, {
+				disabled: e.disabled,
 				value: e.value,
 				children: e.label
 			}, e.value))

package/dist/ControlGroup.d.ts

@@ -2,7 +2,7 @@ import { Slot } from './primitives/slot';
 import { FormFieldState } from './utils/formFieldUtils';
 import { ComponentProps } from 'react';
 interface ControlGroupContextValue {
-    errorMessageId?: string;
+    messageId?: string;
     isDisabled: boolean;
     isInvalid: boolean;
     isLoading: boolean;
@@ -17,8 +17,9 @@ export interface ControlGroupProps extends ComponentProps<'div'> {
     name?: string;
     orientation?: 'horizontal' | 'vertical';
     state?: FormFieldState;
+    warningMessage?: string | string[] | Record<string, unknown> | null;
 }
-export declare const ControlGroup: ({ className, disabled, errorMessage, id, name, orientation, state, ...props }: ControlGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlGroup: ({ className, disabled, errorMessage, id, name, orientation, state, warningMessage, ...props }: ControlGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlGroupItem: ({ className, ...props }: ComponentProps<typeof Slot>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ControlGroup.d.ts.map

package/dist/ControlGroup.js

@@ -1,48 +1,56 @@
 "use client";
 import "./styles/main.css";
-import { t as e } from "./twUtils-VNWgstKL.js";
+import { t as e } from "./twUtils-D_qzdiwM.js";
 import { Slot as t } from "./primitives/slot.js";
-import { ErrorMessage as n, getErrorMessageId as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
-import { createContext as o, useContext as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ErrorMessage as n, WarningMessage as r, getErrorMessageId as i, useFormFieldId as a, useFormFieldState as o } from "./utils/formFieldUtils.js";
+import { createContext as s, useContext as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/ControlGroup/ControlGroup.tsx
-var u = o(null), d = () => {
-	let e = s(u);
+var d = s(null), f = () => {
+	let e = c(d);
 	if (e === null) throw Error("useControlGroup must be used within a ControlGroup");
 	return e;
-}, f = ({ className: t, disabled: o, errorMessage: s, id: d, name: f, orientation: p = "horizontal", state: m = "default", ...h }) => {
-	let g = i(d, f), _ = r(g), { isDisabled: v, isLoading: y, isInvalid: b } = a(o, m);
-	return /* @__PURE__ */ l(u.Provider, {
+}, p = ({ className: t, disabled: s, errorMessage: c, id: f, name: p, orientation: m = "horizontal", state: h = "default", warningMessage: g, ..._ }) => {
+	let v = a(f, p), y = i(v), b = `${v}-warning`, { isDisabled: x, isLoading: S, isInvalid: C } = o(s, h), w = h === "error" && c ? y : h === "warning" && g ? b : void 0;
+	return /* @__PURE__ */ u(d.Provider, {
 		value: {
-			errorMessageId: b && s ? _ : void 0,
-			isDisabled: v,
-			isInvalid: b,
-			isLoading: y,
-			orientation: p,
-			state: m
+			messageId: w,
+			isDisabled: x,
+			isInvalid: C,
+			isLoading: S,
+			orientation: m,
+			state: h
 		},
-		children: [/* @__PURE__ */ c("div", {
-			"data-slot": "control-group",
-			"data-orientation": p,
-			"data-state": m,
-			id: g,
-			role: "group",
-			"aria-describedby": b && s ? _ : void 0,
-			className: e("group flex", p === "vertical" && "flex-col", v && "pointer-events-none opacity-50", t),
-			...h
-		}), b && s && /* @__PURE__ */ c(n, {
-			dataTestId: "spectral-control-group-error-message",
-			id: _,
-			message: s
-		})]
+		children: [
+			/* @__PURE__ */ l("div", {
+				"data-slot": "control-group",
+				"data-orientation": m,
+				"data-state": h,
+				id: v,
+				role: "group",
+				"aria-describedby": w,
+				className: e("group flex", m === "vertical" && "flex-col", x && "pointer-events-none opacity-50", t),
+				..._
+			}),
+			C && c && /* @__PURE__ */ l(n, {
+				dataTestId: "spectral-control-group-error-message",
+				id: y,
+				message: c
+			}),
+			h === "warning" && g && /* @__PURE__ */ l(r, {
+				dataTestId: "spectral-control-group-warning-message",
+				id: b,
+				message: g
+			})
+		]
 	});
-}, p = ({ className: n, ...r }) => {
-	let { orientation: i } = d();
-	return /* @__PURE__ */ c(t, {
+}, m = ({ className: n, ...r }) => {
+	let { orientation: i } = f();
+	return /* @__PURE__ */ l(t, {
 		"data-slot": "control-group-item",
 		className: e("rounded-none focus-within:z-10 hover:z-10", i === "horizontal" && "first:rounded-s-md last:me-0 last:rounded-e-md -me-0.5 h-auto", i === "vertical" && "first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:mbe-0 -mbe-0.5 w-auto", n),
 		...r
 	});
 };
 //#endregion
-export { f as ControlGroup, p as ControlGroupItem, d as useControlGroup };
+export { p as ControlGroup, m as ControlGroupItem, f as useControlGroup };