@spear-ai/spectral 1.12.6 → 1.13.1

package/dist/.js

@@ -86,41 +86,44 @@ import { t as Ae } from "./twUtils-BpqlKSeB.js";
 import { Alert as je } from "./Alert.js";
 import { Avatar as Me } from "./Avatar.js";
 import { Badge as Ne } from "./Badge.js";
-import { Button as Pe } from "./Button.js";
-import { Separator as Fe } from "./Separator.js";
-import { ButtonGroup as Ie, ButtonGroupItem as Le, ButtonGroupSeparator as Re } from "./ButtonGroup.js";
-import { ButtonIcon as ze } from "./ButtonIcon.js";
-import { useUncontrolledState as Be } from "./hooks/useUncontrolledState.js";
-import { Checkbox as Ve } from "./Checkbox.js";
-import { t as He } from "./Combobox-DCCcIDgq.js";
-import { Label as Ue } from "./Label.js";
-import { InputGroup as We, InputGroupAddon as Ge, InputGroupButton as Ke, InputGroupInput as qe, InputGroupText as Je, InputGroupTextarea as Ye } from "./primitives/input-group.js";
-import { ControlGroupSelect as Xe } from "./ControlGroup/ControlGroupSelect.js";
-import { DataCard as Ze } from "./DataCard.js";
-import { Popover as Qe, PopoverContent as $e, PopoverTrigger as et } from "./Popover.js";
-import { DateTimePicker as tt } from "./DateTimePicker.js";
-import { Dialog as nt } from "./Dialog.js";
-import { SpectralProvider as rt } from "./SpectralProvider.js";
-import { Drawer as it } from "./Drawer.js";
-import { n as at, r as ot, t as st } from "./HoverCard-BhxgELKP.js";
-import { Input as ct } from "./Input.js";
-import { InputNumeric as lt } from "./InputNumeric.js";
-import { t as ut } from "./InputOTP-DyhesOLs.js";
-import { Kbd as dt, KbdGroup as ft } from "./Kbd.js";
-import { MultiSelect as pt } from "./MultiSelect.js";
-import { RadioButtonGroup as mt, RadioButtonGroupItem as ht } from "./RadioButtonGroup.js";
-import { RadioButton as gt } from "./RadioButton.js";
-import { n as _t, t as vt } from "./RadioGroup-BsBK247l.js";
-import { Select as yt } from "./Select.js";
-import { Skeleton as bt } from "./Skeleton.js";
-import { t as xt } from "./Slider-CPYW_VYu.js";
-import { t as St } from "./Switch-Vep4hsq4.js";
-import { Tabs as Ct } from "./Tabs.js";
-import { Textarea as wt } from "./Textarea.js";
-import { n as Tt, t as Et } from "./Toast-BuaZxqlt.js";
-import { Toggle as Dt } from "./Toggle.js";
-import { ToggleGroup as Ot, ToggleGroupItem as kt } from "./ToggleGroup.js";
-import { i as At, n as jt, t as Mt } from "./Tooltip-vEdD4f2U.js";
-import { Tray as Nt } from "./Tray.js";
-import { useControllableState as Pt } from "./hooks/useControllableState.js";
-export { ke as Accordion, n as AdjustmentsIcon, je as Alert, r as AnalyzeIcon, i as AnnotationsIcon, a as ApprovedIcon, o as ArrowDownIcon, s as ArrowUpIcon, Me as Avatar, Ne as Badge, c as BoxToolIcon, Pe as Button, Ie as ButtonGroup, Le as ButtonGroupItem, Re as ButtonGroupSeparator, ze as ButtonIcon, l as CalendarIcon, u as CheckCircleIcon, d as CheckSquareIcon, Ve as Checkbox, f as CheckmarkIcon, p as ChevronDownIcon, m as ChevronUpIcon, h as ClockIcon, g as CloseCircleIcon, _ as CloseIcon, He as Combobox, Xe as ControlGroupSelect, v as Crosshairs2Icon, y as CrosshairsIcon, b as DashboardIcon, Ze as DataCard, x as DatabaseIcon, tt as DateTimePicker, S as DeleteIcon, nt as Dialog, it as Drawer, C as DurationIcon, w as EditIcon, T as EmailIcon, E as EraserIcon, D as ErrorIcon, O as EyeClosedIcon, k as EyeClosedIcon2, A as EyeOpenIcon, j as FileDownloadIcon, M as GoToFirstIcon, N as GoToLastIcon, P as HarmonicCursorsIcon, st as HoverCard, at as HoverCardContent, ot as HoverCardTrigger, e as IconBase, F as InfoIcon, ct as Input, We as InputGroup, Ge as InputGroupAddon, Ke as InputGroupButton, qe as InputGroupInput, Je as InputGroupText, Ye as InputGroupTextarea, lt as InputNumeric, ut as InputOTP, dt as Kbd, ft as KbdGroup, I as KeyboardIcon, Ue as Label, L as LabelIcon, R as LassoIcon, z as LineToolIcon, B as LiveViewIcon, V as LoaderIcon, H as LocationIcon, U as LogoutIcon, W as MaximizeIcon, G as MeasureIcon, K as MenuDotsIcon, q as MenuIcon, J as MessagesIcon, Y as MetadataIcon, X as MinimizeIcon, Z as MinusIcon, pt as MultiSelect, Q as OntologyIcon, $ as PanelIconClose, ee as PanelIconOpen, te as PauseIcon, ne as PlayIcon, re as PlusIcon, ie as PolygonIcon, Qe as Popover, $e as PopoverContent, et as PopoverTrigger, ae as PrinterIcon, oe as ProgressCheckIcon, gt as RadioButton, mt as RadioButtonGroup, ht as RadioButtonGroupItem, vt as RadioGroup, _t as RadioGroupItem, se as ResetIcon, ce as ReviewedIcon, le as ScissorsIcon, ue as SearchIcon, yt as Select, Fe as Separator, de as SettingsIcon, bt as Skeleton, xt as Slider, fe as SortAscendingIcon, pe as SortAtoZIcon, me as SortDescendingIcon, he as SortZtoAIcon, ge as SparklesIcon, rt as SpectralProvider, _e as StackIcon, ve as StarIcon, t as SvgIdContext, St as Switch, Ct as Tabs, wt as Textarea, Et as Toast, Dt as Toggle, Ot as ToggleGroup, kt as ToggleGroupItem, Mt as Tooltip, jt as TooltipContent, At as TooltipTrigger, ye as TrashIcon, Nt as Tray, be as UndoIcon, xe as UploadIcon, Se as User2Icon, Ce as UserIcon, we as WarningIcon, Te as ZoomAllIcon, Ee as ZoomXIcon, De as ZoomYIcon, Ae as cn, Tt as toast, Oe as useAccordionAutoScroll, Pt as useControllableState, Be as useUncontrolledState };
+import { ErrorMessage as Pe, WarningMessage as Fe } from "./FormFieldMessage.js";
+import { Button as Ie } from "./Button.js";
+import { Separator as Le } from "./Separator.js";
+import { ButtonGroup as Re, ButtonGroupItem as ze, ButtonGroupSeparator as Be } from "./ButtonGroup.js";
+import { ButtonIcon as Ve } from "./ButtonIcon.js";
+import { useUncontrolledState as He } from "./hooks/useUncontrolledState.js";
+import { Checkbox as Ue } from "./Checkbox.js";
+import { t as We } from "./Combobox-DRQqx0os.js";
+import { Label as Ge } from "./Label.js";
+import { InputGroup as Ke, InputGroupAddon as qe, InputGroupButton as Je, InputGroupInput as Ye, InputGroupText as Xe, InputGroupTextarea as Ze } from "./primitives/input-group.js";
+import { ControlGroupSelect as Qe } from "./ControlGroup/ControlGroupSelect.js";
+import { DataCard as $e } from "./DataCard.js";
+import { Popover as et, PopoverContent as tt, PopoverTrigger as nt } from "./Popover.js";
+import { DateTimePicker as rt } from "./DateTimePicker.js";
+import { Dialog as it } from "./Dialog.js";
+import { SpectralProvider as at } from "./SpectralProvider.js";
+import { Drawer as ot } from "./Drawer.js";
+import { n as st, r as ct, t as lt } from "./HoverCard-BhxgELKP.js";
+import { Input as ut } from "./Input.js";
+import { InputNumeric as dt } from "./InputNumeric.js";
+import { t as ft } from "./InputOTP-DLn7ja7J.js";
+import { Kbd as pt, KbdGroup as mt } from "./Kbd.js";
+import { MultiSelect as ht } from "./MultiSelect.js";
+import { RadioButtonGroup as gt, RadioButtonGroupItem as _t } from "./RadioButtonGroup.js";
+import { RadioButton as vt } from "./RadioButton.js";
+import { n as yt, t as bt } from "./RadioGroup-D-XjCU4Q.js";
+import { Select as xt } from "./Select.js";
+import { Skeleton as St } from "./Skeleton.js";
+import { t as Ct } from "./Slider-CPYW_VYu.js";
+import { t as wt } from "./Switch-CSmXtkia.js";
+import { Tabs as Tt } from "./Tabs.js";
+import { Textarea as Et } from "./Textarea.js";
+import { n as Dt, t as Ot } from "./Toast-BuaZxqlt.js";
+import { Toggle as kt } from "./Toggle.js";
+import { ToggleGroupItem as At } from "./ToggleGroup/ToggleGroupItem.js";
+import { ToggleGroupSplitMenuItem as jt } from "./ToggleGroup/ToggleGroupSplitMenuItem.js";
+import { ToggleGroup as Mt } from "./ToggleGroup.js";
+import { i as Nt, n as Pt, t as Ft } from "./Tooltip-CTjKOfvC.js";
+import { Tray as It } from "./Tray.js";
+import { useControllableState as Lt } from "./hooks/useControllableState.js";
+export { ke as Accordion, n as AdjustmentsIcon, je as Alert, r as AnalyzeIcon, i as AnnotationsIcon, a as ApprovedIcon, o as ArrowDownIcon, s as ArrowUpIcon, Me as Avatar, Ne as Badge, c as BoxToolIcon, Ie as Button, Re as ButtonGroup, ze as ButtonGroupItem, Be as ButtonGroupSeparator, Ve as ButtonIcon, l as CalendarIcon, u as CheckCircleIcon, d as CheckSquareIcon, Ue as Checkbox, f as CheckmarkIcon, p as ChevronDownIcon, m as ChevronUpIcon, h as ClockIcon, g as CloseCircleIcon, _ as CloseIcon, We as Combobox, Qe as ControlGroupSelect, v as Crosshairs2Icon, y as CrosshairsIcon, b as DashboardIcon, $e as DataCard, x as DatabaseIcon, rt as DateTimePicker, S as DeleteIcon, it as Dialog, ot as Drawer, C as DurationIcon, w as EditIcon, T as EmailIcon, E as EraserIcon, D as ErrorIcon, Pe as ErrorMessage, O as EyeClosedIcon, k as EyeClosedIcon2, A as EyeOpenIcon, j as FileDownloadIcon, M as GoToFirstIcon, N as GoToLastIcon, P as HarmonicCursorsIcon, lt as HoverCard, st as HoverCardContent, ct as HoverCardTrigger, e as IconBase, F as InfoIcon, ut as Input, Ke as InputGroup, qe as InputGroupAddon, Je as InputGroupButton, Ye as InputGroupInput, Xe as InputGroupText, Ze as InputGroupTextarea, dt as InputNumeric, ft as InputOTP, pt as Kbd, mt as KbdGroup, I as KeyboardIcon, Ge as Label, L as LabelIcon, R as LassoIcon, z as LineToolIcon, B as LiveViewIcon, V as LoaderIcon, H as LocationIcon, U as LogoutIcon, W as MaximizeIcon, G as MeasureIcon, K as MenuDotsIcon, q as MenuIcon, J as MessagesIcon, Y as MetadataIcon, X as MinimizeIcon, Z as MinusIcon, ht as MultiSelect, Q as OntologyIcon, $ as PanelIconClose, ee as PanelIconOpen, te as PauseIcon, ne as PlayIcon, re as PlusIcon, ie as PolygonIcon, et as Popover, tt as PopoverContent, nt as PopoverTrigger, ae as PrinterIcon, oe as ProgressCheckIcon, vt as RadioButton, gt as RadioButtonGroup, _t as RadioButtonGroupItem, bt as RadioGroup, yt as RadioGroupItem, se as ResetIcon, ce as ReviewedIcon, le as ScissorsIcon, ue as SearchIcon, xt as Select, Le as Separator, de as SettingsIcon, St as Skeleton, Ct as Slider, fe as SortAscendingIcon, pe as SortAtoZIcon, me as SortDescendingIcon, he as SortZtoAIcon, ge as SparklesIcon, at as SpectralProvider, _e as StackIcon, ve as StarIcon, t as SvgIdContext, wt as Switch, Tt as Tabs, Et as Textarea, Ot as Toast, kt as Toggle, Mt as ToggleGroup, At as ToggleGroupItem, jt as ToggleGroupSplitMenuItem, Ft as Tooltip, Pt as TooltipContent, Nt as TooltipTrigger, ye as TrashIcon, It as Tray, be as UndoIcon, xe as UploadIcon, Se as User2Icon, Ce as UserIcon, we as WarningIcon, Fe as WarningMessage, Te as ZoomAllIcon, Ee as ZoomXIcon, De as ZoomYIcon, Ae as cn, Dt as toast, Oe as useAccordionAutoScroll, Lt as useControllableState, He as useUncontrolledState };

package/dist/Button.d.ts

@@ -20,7 +20,7 @@ export interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTML
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled';
 }
 export declare const Button: {
-    ({ asChild, children, className, dataTestId, disabled, endIcon, errorMessage, label, onClick, ref, size, startIcon, state, type, variant, ...props }: ButtonProps & {
+    ({ asChild, children, className, dataTestId, disabled, endIcon, errorMessage, id, label, onClick, ref, size, startIcon, state, type, variant, ...props }: ButtonProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Button.js

@@ -4,11 +4,11 @@ import { LoaderIcon as e } from "./Icons/LoaderIcon.js";
 import { t } from "./twUtils-BpqlKSeB.js";
 import { t as n } from "./dist-tMzzRwxG.js";
 import { Slot as r } from "./primitives/slot.js";
-import { ErrorMessage as i } from "./utils/formFieldUtils.js";
-import { Children as a, isValidElement as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ErrorMessage as i } from "./FormFieldMessage.js";
+import { Children as a, isValidElement as o, useId as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Button/Button.tsx
-var u = n("gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+var d = n("gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: {
 		variant: {
 			primary: "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled",
@@ -33,8 +33,8 @@ var u = n("gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-po
 		state: "default",
 		size: "default"
 	}
-}), d = ({ asChild: n = !1, children: d, className: f, dataTestId: p, disabled: m, endIcon: h, errorMessage: g, label: _, onClick: v, ref: y, size: b, startIcon: x, state: S, type: C = "button", variant: w = "primary", ...T }) => {
-	let E = {
+}), f = ({ asChild: n = !1, children: f, className: p, dataTestId: m, disabled: h, endIcon: g, errorMessage: _, id: v, label: y, onClick: b, ref: x, size: S, startIcon: C, state: w, type: T = "button", variant: E = "primary", ...D }) => {
+	let O = {
 		error: {
 			primary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
 			secondary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
@@ -49,57 +49,58 @@ var u = n("gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-po
 			ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
 			unstyled: "bg-transparent opacity-50 pointer-events-none"
 		}
-	}, D = t(u({
-		variant: w,
-		state: S,
-		size: b
-	}), S === "error" && E.error[w], S === "loading" && E.loading[w], f), O = n && o(d) && a.count(d) === 1, k = O ? void 0 : d ?? _;
-	if (!O && !k) throw Error("Button requires either `label` or `children`");
-	let A = (e) => {
-		m && (e.preventDefault(), e.stopPropagation());
-	}, j = O ? r : "button";
-	return /* @__PURE__ */ l("div", {
-		className: t("flex flex-col justify-items-center", b),
-		children: [/* @__PURE__ */ c(j, {
-			"aria-disabled": m,
-			className: t(D, O && "no-underline! before:content-none after:content-none", O && m && "pointer-events-none opacity-50"),
-			"data-as-child": O ? "true" : void 0,
-			"data-state": S,
-			"data-testid": p ?? `spectral-button-${w}`,
-			"data-variant": w,
-			disabled: O ? void 0 : m,
-			onClick: v,
-			onClickCapture: O ? A : void 0,
-			ref: y,
-			tabIndex: O && m ? -1 : void 0,
-			type: O ? void 0 : C,
-			...T,
-			children: O ? d : /* @__PURE__ */ l(s, { children: [
-				x && /* @__PURE__ */ c("span", {
-					className: t("flex", w !== "unstyled" && "pr-1"),
+	}, k = t(d({
+		variant: E,
+		state: w,
+		size: S
+	}), w === "error" && O.error[E], w === "loading" && O.loading[E], p), A = s(), j = v ? `${v}-error` : `${A}-error`, M = n && o(f) && a.count(f) === 1, N = M ? void 0 : f ?? y, P = w === "error" && typeof _ == "string" ? _ : null, F = w === "error" && o(_) ? _ : null;
+	if (!M && !N) throw Error("Button requires either `label` or `children`");
+	let I = (e) => {
+		h && (e.preventDefault(), e.stopPropagation());
+	}, L = M ? r : "button";
+	return /* @__PURE__ */ u("div", {
+		className: t("flex flex-col justify-items-center", S),
+		children: [/* @__PURE__ */ l(L, {
+			"aria-disabled": h,
+			className: t(k, M && "no-underline! before:content-none after:content-none", M && h && "pointer-events-none opacity-50"),
+			"data-as-child": M ? "true" : void 0,
+			"data-state": w,
+			"data-testid": m ?? `spectral-button-${E}`,
+			"data-variant": E,
+			disabled: M ? void 0 : h,
+			id: v,
+			onClick: b,
+			onClickCapture: M ? I : void 0,
+			ref: x,
+			tabIndex: M && h ? -1 : void 0,
+			type: M ? void 0 : T,
+			...D,
+			children: M ? f : /* @__PURE__ */ u(c, { children: [
+				C && /* @__PURE__ */ l("span", {
+					className: t("flex", E !== "unstyled" && "pr-1"),
 					"aria-hidden": !0,
 					"data-testid": "spectral-button-start-icon",
-					children: x
+					children: C
 				}),
-				S === "loading" && /* @__PURE__ */ c(e, {
+				w === "loading" && /* @__PURE__ */ l(e, {
 					className: "ml-2 motion-safe:animate-spin",
 					size: 16
 				}),
-				k,
-				h && S !== "loading" && /* @__PURE__ */ c("span", {
-					className: t("flex", w !== "unstyled" && "pl-2"),
+				N,
+				g && w !== "loading" && /* @__PURE__ */ l("span", {
+					className: t("flex", E !== "unstyled" && "pl-2"),
 					"aria-hidden": !0,
 					"data-testid": "spectral-button-end-icon",
-					children: h
+					children: g
 				})
 			] })
-		}), S === "error" && g && /* @__PURE__ */ c(i, {
-			message: g,
+		}), F ?? /* @__PURE__ */ l(i, {
 			dataTestId: "spectral-button-error-message",
-			id: "button-error"
+			id: j,
+			message: P
 		})]
 	});
 };
-d.displayName = "Button";
+f.displayName = "Button";
 //#endregion
-export { d as Button };
+export { f as Button };

package/dist/Checkbox.js

@@ -3,7 +3,8 @@ 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-BpqlKSeB.js";
-import { ErrorMessage as r, WarningMessage as i, useFormFieldId as a } from "./utils/formFieldUtils.js";
+import { ErrorMessage as r, WarningMessage as i } from "./FormFieldMessage.js";
+import { useFormFieldId as a } from "./utils/formFieldUtils.js";
 import { CheckboxBase as o, CheckboxIndicator as s } from "./Checkbox/CheckboxBase.js";
 import "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -46,15 +47,15 @@ var u = ({ checked: u, className: d, errorMessage: f, id: p, label: m, labelText
 				children: T
 			})]
 		}),
-		y === "error" && f && E && /* @__PURE__ */ c(r, {
+		/* @__PURE__ */ c(r, {
 			dataTestId: "spectral-checkbox-error-message",
 			id: E,
-			message: f
+			message: y === "error" ? f : null
 		}),
-		y === "warning" && b && D && /* @__PURE__ */ c(i, {
+		/* @__PURE__ */ c(i, {
 			dataTestId: "spectral-checkbox-warning-message",
 			id: D,
-			message: b
+			message: y === "warning" ? b : null
 		})
 	] });
 };

package/dist/{Combobox-DCCcIDgq.js → Combobox-DRQqx0os.js}

@@ -5,7 +5,8 @@ import { CheckmarkIcon as n } from "./Icons/CheckmarkIcon.js";
 import { ChevronDownIcon as r } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon as i } from "./Icons/LoaderIcon.js";
 import { t as a } from "./twUtils-BpqlKSeB.js";
-import { EmptyState as o, ErrorMessage as s, LoadingState as c, WarningMessage as l, getAriaProps as u, getDropdownSurfaceClasses as d, getDropdownWidthStyles as f, getErrorMessageId as p, getFormFieldCSSProperties as m, getOptionClasses as h, getTriggerClasses as g, useFormFieldId as _ } from "./utils/formFieldUtils.js";
+import { ErrorMessage as o, WarningMessage as s } from "./FormFieldMessage.js";
+import { EmptyState as c, LoadingState as l, getAriaProps as u, getDropdownSurfaceClasses as d, getDropdownWidthStyles as f, getErrorMessageId as p, getFormFieldCSSProperties as m, getOptionClasses as h, getTriggerClasses as g, useFormFieldId as _ } from "./utils/formFieldUtils.js";
 import { useUncontrolledState as v } from "./hooks/useUncontrolledState.js";
 import { Label as y } from "./Label.js";
 import { InputGroup as b, InputGroupAddon as x } from "./primitives/input-group.js";
@@ -6286,7 +6287,7 @@ var Ic = ({ className: e, disabled: t, defaultValue: S = "", dropdownWidth: C =
 						onClick: (e) => {
 							if (fe || pe) return;
 							let t = e.target;
-							t !== ve.current && (t.closest("[data-slot=combobox-trigger-button]") || V((e) => !e));
+							t !== ve.current && (t.closest("[data-slot=combobox-trigger-button]") || (ve.current?.focus(), V(!0)));
 						},
 						style: m()
 					}),
@@ -6335,12 +6336,12 @@ var Ic = ({ className: e, disabled: t, defaultValue: S = "", dropdownWidth: C =
 					className: "isolate z-50",
 					sideOffset: 4,
 					children: /* @__PURE__ */ O(Dc, {
-						className: a("p-1 z-50 motion-safe:data-closed:animate-out motion-safe:data-open:animate-in", d(), "motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95 motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95", "max-h-[min(var(--available-height),18rem)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto"),
+						className: a("p-1 z-50 motion-safe:data-closed:animate-out motion-safe:data-open:animate-in", d(), "motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95 motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95", "max-h-[min(var(--available-height),18rem)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--transform-origin) overflow-hidden"),
 						"data-dropdown-width-mode": Te,
 						"data-dropdown-width-value": Te === "custom" ? C : void 0,
 						"data-testid": "spectral-combobox-content",
 						style: Ee,
-						children: pe ? /* @__PURE__ */ O(c, { message: N }) : Ce.length === 0 ? /* @__PURE__ */ O(o, { message: w }) : /* @__PURE__ */ O(lc, {
+						children: pe ? /* @__PURE__ */ O(l, { message: N }) : Ce.length === 0 ? /* @__PURE__ */ O(c, { message: w }) : /* @__PURE__ */ O(lc, {
 							className: "max-h-[min(var(--available-height),18rem)] overflow-y-auto",
 							id: le,
 							children: Ce.map((e) => /* @__PURE__ */ k(Mc, {
@@ -6360,15 +6361,15 @@ var Ic = ({ className: e, disabled: t, defaultValue: S = "", dropdownWidth: C =
 					})
 				}) })]
 			}),
-			B && D && /* @__PURE__ */ O(s, {
+			/* @__PURE__ */ O(o, {
 				dataTestId: "spectral-combobox-error-message",
 				id: z,
-				message: D
+				message: B ? D ?? null : null
 			}),
-			R === "warning" && ae && /* @__PURE__ */ O(l, {
+			/* @__PURE__ */ O(s, {
 				dataTestId: "spectral-combobox-warning-message",
 				id: ue,
-				message: ae
+				message: R === "warning" ? ae ?? null : null
 			})
 		]
 	});

package/dist/Combobox.js

@@ -1,4 +1,4 @@
 'use client'
-import { t as e } from "./Combobox-DCCcIDgq.js";
+import { t as e } from "./Combobox-DRQqx0os.js";
 import "./primitives/input-group.js";
 export { e as Combobox };

package/dist/ControlGroup/ControlGroupSelect.d.ts

@@ -28,6 +28,8 @@ type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlG
     dropdownWidth?: DropdownWidth;
     errorMessage?: string | string[] | Record<string, unknown> | null;
     id?: string;
+    /** Class applied to the input `ControlGroupItem` segment for width/split composition. */
+    inputItemClassName?: string;
     /** When `captionLayout` is `inline`, overrides the input's accessible name (defaults to `inputPlaceholder` when set). */
     inputAriaLabel?: string;
     inputPlaceholder?: string;
@@ -36,12 +38,14 @@ type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlG
     selectPlaceholder?: string;
     /** When `captionLayout` is `inline` and `selectPlaceholder` is empty, sets the select trigger's accessible name. */
     selectAriaLabel?: string;
+    /** Class applied to the select `ControlGroupItem` segment for width/split composition. */
+    selectItemClassName?: string;
     selectOptions: SelectOptionType[];
     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, id, dropdownWidth, inputAriaLabel, inputPlaceholder, inputValue, maxAmount, minAmount, onInputChange, orientation, selectAriaLabel, selectOptions, selectPlaceholder, state, type, warningMessage, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlGroupSelect: ({ amountStep, ariaLabel, captionLayout, className, dataTestId, disabled, errorMessage, id, dropdownWidth, inputAriaLabel, inputPlaceholder, inputItemClassName, inputValue, maxAmount, minAmount, onInputChange, orientation, selectAriaLabel, selectItemClassName, selectOptions, selectPlaceholder, state, type, warningMessage, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ControlGroupSelect.d.ts.map

package/dist/ControlGroup/ControlGroupSelect.js

@@ -4,119 +4,125 @@ import { t as e } from "../twUtils-BpqlKSeB.js";
 import { getStateClasses as t } from "../utils/formFieldUtils.js";
 import { Label as n } from "../Label.js";
 import { Input as r } from "../primitives/input.js";
-import { i, l as a, n as o, t as s, u as c } from "../select-oAOoVl5g.js";
+import { i, l as a, n as o, t as s, u as c } from "../select-DFE8xm1L.js";
 import { ControlGroup as l, ControlGroupItem as u, useControlGroup as d } from "../ControlGroup.js";
 import { useId as f } from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/ControlGroup/ControlGroupSelect.tsx
-var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", _ = "Amount", v = "Select an option", y = "flex w-full min-w-0 flex-col gap-1.5", b = "!h-12 min-h-12 !border-2 border-input-border bg-input-bg text-base text-input-text transition duration-200 placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", x = (e, t = 0) => {
+var g = "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", _ = "Amount", v = "Select an option", y = "flex w-full min-w-0 flex-col gap-1.5", b = "h-12! min-h-12! border-2! border-input-border bg-input-bg text-base text-input-text transition duration-200 placeholder:text-input-text-placeholder hover:border-input-border--hover focus-visible:border-input-border--focus focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", x = (e, t = 0) => {
 	let n = e?.trim();
 	if (n) return `${Math.max(n.length + t, 8)}ch`;
 }, 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, 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;
+}, 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, inputItemClassName: p, inputValue: h, maxAmount: g = 1e6, minAmount: y = 0, onInputChange: b, orientation: C = "horizontal", selectAriaLabel: T, selectItemClassName: E, selectOptions: D, selectPlaceholder: O, state: k = "default", type: A = "number", warningMessage: j, ...M }) => {
+	let N = f(), P = s ?? N, F = `${P}-amount`, I = `${P}-select`, L = `${F}-label`, R = `${I}-label`, z = n === "above", B = z ? void 0 : d, V = z ? void 0 : O, H = S(d, _), U = S(O, v), W = u ?? (z ? void 0 : H), G = T ?? (z ? void 0 : U), K = x(d, 3), q = x(O, 5), J = t ?? `${H} and ${U}`, Y = !!a, X = h !== void 0 && b !== void 0;
 	return /* @__PURE__ */ m(l, {
-		"aria-label": K,
+		"aria-label": J,
 		className: r,
 		"data-testid": i,
 		disabled: a,
 		errorMessage: o,
-		id: M,
-		orientation: b,
-		state: D,
-		warningMessage: k,
+		id: P,
+		orientation: C,
+		state: k,
+		warningMessage: j,
 		children: /* @__PURE__ */ m(w, {
 			amountStep: e,
 			dataTestId: i,
-			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,
+			inputAccessibleName: W,
+			inputCaption: B,
+			inputId: F,
+			inputLabelId: L,
+			inputLabelText: H,
+			inputItemClassName: p,
+			inputMinWidth: K,
+			inputValue: X ? h : void 0,
+			isDisabled: Y,
+			maxAmount: g,
+			minAmount: y,
+			onInputChange: X ? b : void 0,
 			dropdownWidth: c,
-			selectCaption: z,
-			selectOptions: T,
-			selectLabelId: I,
-			selectLabelText: V,
-			selectProps: A,
-			selectTriggerAriaLabel: U,
-			selectTriggerId: P,
-			selectTriggerMinWidth: G,
-			type: O,
-			useAboveLabels: L
+			selectCaption: V,
+			selectOptions: D,
+			selectLabelId: R,
+			selectLabelText: U,
+			selectItemClassName: E,
+			selectProps: M,
+			selectTriggerAriaLabel: G,
+			selectTriggerId: I,
+			selectTriggerMinWidth: q,
+			type: A,
+			useAboveLabels: z
 		})
 	});
-}, 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 { 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,
+}, w = ({ amountStep: l, dataTestId: f, dropdownWidth: _, inputAccessibleName: v, inputCaption: x, inputId: S, inputLabelId: C, inputLabelText: w, inputItemClassName: T, inputMinWidth: E, inputValue: D, isDisabled: O, maxAmount: k, minAmount: A, onInputChange: j, selectCaption: M, selectLabelId: N, selectLabelText: P, selectItemClassName: F, selectOptions: I, selectProps: L, selectTriggerAriaLabel: R, selectTriggerId: z, selectTriggerMinWidth: B, type: V, useAboveLabels: H }) => {
+	let { messageId: U, orientation: W, state: G } = d(), K = L.open !== void 0, q = (e) => {
+		L.onOpenChange?.(e);
+	}, J = W === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", Y = W === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", X = W === "horizontal" ? "me-0" : "mbe-0", Z = W === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", Q = /* @__PURE__ */ m(r, {
+		"aria-describedby": U,
 		"aria-label": v,
-		"aria-labelledby": B ? C : void 0,
-		className: e(b, W, t(U), z === "number" && g, z === "number" && "tabular-nums"),
+		"aria-labelledby": H ? C : void 0,
+		className: e(b, J, t(G), V === "number" && g, V === "number" && "tabular-nums"),
 		"data-testid": `${f}-input`,
-		disabled: D,
-		id: B ? S : void 0,
-		type: z === "number" ? "number" : "text",
+		disabled: O,
+		id: H ? S : void 0,
+		type: V === "number" ? "number" : "text",
 		placeholder: x,
-		style: T ? { minWidth: T } : void 0,
-		min: k ?? 0,
-		max: O ?? 1e6,
-		...E !== void 0 && A !== void 0 ? {
-			value: E,
-			onChange: A
+		style: E ? { minWidth: E } : void 0,
+		min: A ?? 0,
+		max: k ?? 1e6,
+		...D !== void 0 && j !== void 0 ? {
+			value: D,
+			onChange: j
 		} : {},
 		step: l ?? 1
-	}), Y = /* @__PURE__ */ m(a, {
-		"aria-describedby": V,
-		"aria-label": I,
-		"aria-labelledby": B ? M : void 0,
-		className: e(b, G, "px-4 w-full justify-between focus-visible:ring-0", t(U)),
+	}), $ = /* @__PURE__ */ m(a, {
+		"aria-describedby": U,
+		"aria-label": R,
+		"aria-labelledby": H ? N : void 0,
+		className: e("text-input-text data-placeholder:text-input-text-placeholder!", Y, "px-4 w-full justify-between focus-visible:border-input-border--focus focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", t(G)),
 		"data-testid": `${f}-select-trigger`,
-		disabled: D,
-		id: B ? L : void 0,
-		style: R ? { minWidth: R } : void 0,
+		disabled: O,
+		id: H ? z : void 0,
+		style: B ? { minWidth: B } : 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-placeholder!",
-			placeholder: j
+			placeholder: M
 		})
 	});
 	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, {
-		className: B ? K : void 0,
-		children: B ? /* @__PURE__ */ h("div", {
+		className: e(H ? X : void 0, T),
+		children: H ? /* @__PURE__ */ h("div", {
 			className: y,
 			children: [/* @__PURE__ */ m(n, {
 				className: "text-text-primary",
 				htmlFor: S,
 				id: C,
 				children: w
-			}), J]
-		}) : J
+			}), Q]
+		}) : Q
 	}), /* @__PURE__ */ h(s, {
+		...L,
 		"data-testid": `${f}-select-root`,
-		disabled: D,
-		...F,
+		disabled: O,
+		...K ? { open: L.open } : {},
+		onOpenChange: q,
 		children: [/* @__PURE__ */ m(u, {
-			className: B ? q : void 0,
-			children: B ? /* @__PURE__ */ h("div", {
+			className: e(H ? Z : void 0, F),
+			children: H ? /* @__PURE__ */ h("div", {
 				className: y,
 				children: [/* @__PURE__ */ m(n, {
 					className: "text-text-primary",
-					htmlFor: L,
-					id: M,
-					children: N
-				}), Y]
-			}) : Y
+					htmlFor: z,
+					id: N,
+					children: P
+				}), $]
+			}) : $
 		}), /* @__PURE__ */ m(o, {
 			"data-testid": `${f}-select-content`,
 			dropdownWidth: _,
-			children: P.map((e) => /* @__PURE__ */ m(i, {
+			children: I.map((e) => /* @__PURE__ */ m(i, {
 				disabled: e.disabled,
 				value: e.value,
 				children: e.label