@spear-ai/spectral 1.11.1 → 1.11.3

package/dist/.js

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

package/dist/ButtonIcon.js

@@ -22,7 +22,7 @@ var a = "bg-transparent hover:bg-level-one text-text-primary inline-flex items-c
 	let _ = (e) => f?.(e), v = u ? `${d} - Loading` : d, y = () => {
 		if (u) return /* @__PURE__ */ i(e, {
 			size: o[h].icon,
-			ariaHidden: !0
+			"aria-hidden": "true"
 		});
 		let a = typeof l == "function" ? l() : l;
 		if (r(a)) {
@@ -34,7 +34,7 @@ var a = "bg-transparent hover:bg-level-one text-text-primary inline-flex items-c
 				"aria-hidden": "true"
 			});
 			let r = {
-				ariaHidden: !0,
+				"aria-hidden": "true",
 				className: t("shrink-0", a.props.className)
 			};
 			return a.type.displayName?.endsWith("Icon") ?? !1 ? n(a, {

package/dist/Checkbox/CheckboxBase.js

@@ -2,7 +2,7 @@
 import "../styles/main.css";
 import { t as e } from "../twUtils-VNWgstKL.js";
 import { Slot as t } from "../primitives/slot.js";
-import { useControllableState as n } from "../hooks/useControllableState.js";
+import { useUncontrolledState as n } from "../hooks/useUncontrolledState.js";
 import { createContext as r, useCallback as i, useContext as a, useEffect as o, useId as s, useRef as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Checkbox/CheckboxBase.tsx

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-Dn8Lz9mG.js";
+import { a as e, i as t, n, r, t as i } from "../ComboboxBase-qX-mQhT6.js";
 export { i as ComboboxBase, n as CommandEmpty, r as CommandInput, t as CommandItem, e as CommandList };

package/dist/Combobox.d.ts

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

package/dist/Combobox.js

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

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

@@ -460,7 +460,7 @@ var le = {
 	borderWidth: "0"
 }, ue = ({ className: e, ...t }) => /* @__PURE__ */ p(J, {
 	"data-slot": "command",
-	className: a("rounded-xl! bg-popover p-1 text-popover-foreground flex size-full flex-col overflow-hidden", e),
+	className: a("rounded-xl! p-1 flex size-full flex-col overflow-hidden text-input-text", e),
 	...t
 }), de = ({ className: e, ...n }) => /* @__PURE__ */ p("div", {
 	"data-slot": "command-input-wrapper",
@@ -483,7 +483,7 @@ var le = {
 	...t
 }), me = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m(J.Item, {
 	"data-slot": "command-item",
-	className: a("group/command-item gap-2 rounded-sm px-2 py-1.5 text-base in-data-[slot=dialog-content]:rounded-lg! relative flex cursor-default items-center text-input-text outline-hidden select-none hover:bg-input-bg--hover data-selected:bg-input-bg--selected data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", t),
+	className: a("group/command-item text-base in-data-[slot=dialog-content]:rounded-lg! relative flex text-input-text outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0", t),
 	...r,
 	children: [n, /* @__PURE__ */ p(e, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
 });

package/dist/ControlGroup/ControlGroupSelect.d.ts

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

package/dist/ControlGroup/ControlGroupSelect.js

@@ -15,102 +15,110 @@ 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, inputAriaLabel: s, inputPlaceholder: c, inputValue: u, maxAmount: d = 1e6, minAmount: p = 0, onInputChange: h, orientation: g = "horizontal", selectAriaLabel: y, selectOptions: b, selectPlaceholder: C, state: T = "default", type: E = "number", ...D }) => {
-	let O = f(), k = `${O}-amount`, A = `${O}-select`, j = `${k}-label`, M = `${A}-label`, N = n === "above", P = N ? void 0 : c, F = N ? void 0 : C, I = S(c, _), L = S(C, v), R = s ?? (N ? void 0 : I), z = y ?? (N ? void 0 : L), B = x(c, 3), V = x(C, 5), H = t ?? `${I} and ${L}`, U = !!a || T === "disabled", W = u !== void 0 && h !== void 0;
+}, 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;
 	return /* @__PURE__ */ m(l, {
-		"aria-label": H,
+		"aria-label": U,
 		className: r,
 		"data-testid": i,
 		disabled: a,
 		errorMessage: o,
-		orientation: g,
-		state: T,
+		orientation: y,
+		state: E,
 		children: /* @__PURE__ */ m(w, {
 			amountStep: e,
 			dataTestId: i,
-			inputAccessibleName: R,
-			inputCaption: P,
-			inputId: k,
-			inputLabelId: j,
-			inputLabelText: I,
-			inputMinWidth: B,
-			inputValue: W ? u : void 0,
-			isDisabled: U,
-			maxAmount: d,
-			minAmount: p,
-			onInputChange: W ? h : void 0,
-			selectCaption: F,
-			selectOptions: b,
-			selectLabelId: M,
-			selectLabelText: L,
-			selectProps: D,
-			selectTriggerAriaLabel: z,
-			selectTriggerId: A,
-			selectTriggerMinWidth: V,
-			type: E,
-			useAboveLabels: N
+			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
 		})
 	});
-}, w = ({ amountStep: l, dataTestId: f, inputAccessibleName: _, inputCaption: v, inputId: x, inputLabelId: S, inputLabelText: C, inputMinWidth: w, inputValue: T, isDisabled: E, maxAmount: D, minAmount: O, onInputChange: k, selectCaption: A, selectLabelId: j, selectLabelText: M, selectOptions: N, selectProps: P, selectTriggerAriaLabel: F, selectTriggerId: I, selectTriggerMinWidth: L, type: R, useAboveLabels: z }) => {
-	let { errorMessageId: B, orientation: V, state: H } = d(), U = V === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", W = V === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", G = V === "horizontal" ? "me-0" : "mbe-0", K = V === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", q = /* @__PURE__ */ m(r, {
-		"aria-describedby": B,
-		"aria-label": _,
-		"aria-labelledby": z ? S : void 0,
-		className: e(b, U, t(H), R === "number" && g, R === "number" && "tabular-nums"),
+}, 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, {
+		"aria-describedby": V,
+		"aria-label": v,
+		"aria-labelledby": B ? C : void 0,
+		className: e(b, W, t(U), z === "number" && g, z === "number" && "tabular-nums"),
 		"data-testid": `${f}-input`,
-		disabled: E,
-		id: z ? x : void 0,
-		type: R === "number" ? "number" : "text",
-		placeholder: v,
-		style: w ? { minWidth: w } : void 0,
-		min: O ?? 0,
-		max: D ?? 1e6,
-		...T !== void 0 && k !== void 0 ? {
-			value: T,
-			onChange: k
+		disabled: D,
+		id: B ? S : void 0,
+		type: z === "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
 		} : {},
 		step: l ?? 1
-	}), J = /* @__PURE__ */ m(s, {
-		"aria-describedby": B,
-		"aria-label": F,
-		"aria-labelledby": z ? j : void 0,
-		className: e(b, W, "px-4 w-full justify-between focus-visible:ring-0", t(H)),
+	}), Y = /* @__PURE__ */ m(s, {
+		"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)),
 		"data-testid": `${f}-select-trigger`,
-		disabled: E,
-		id: z ? I : void 0,
-		style: L ? { minWidth: L } : void 0,
-		children: /* @__PURE__ */ m(c, { placeholder: A })
+		disabled: D,
+		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-placeholder!",
+			placeholder: j
+		})
 	});
 	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, {
-		className: z ? G : void 0,
-		children: z ? /* @__PURE__ */ h("div", {
+		className: B ? K : void 0,
+		children: B ? /* @__PURE__ */ h("div", {
 			className: y,
 			children: [/* @__PURE__ */ m(n, {
 				className: "text-text-primary",
-				htmlFor: x,
-				id: S,
-				children: C
-			}), q]
-		}) : q
+				htmlFor: S,
+				id: C,
+				children: w
+			}), J]
+		}) : J
 	}), /* @__PURE__ */ h(i, {
 		"data-testid": `${f}-select-root`,
-		disabled: E,
-		...P,
+		disabled: D,
+		...F,
 		children: [/* @__PURE__ */ m(u, {
-			className: z ? K : void 0,
-			children: z ? /* @__PURE__ */ h("div", {
+			className: B ? q : void 0,
+			children: B ? /* @__PURE__ */ h("div", {
 				className: y,
 				children: [/* @__PURE__ */ m(n, {
 					className: "text-text-primary",
-					htmlFor: I,
-					id: j,
-					children: M
-				}), J]
-			}) : J
-		}), /* @__PURE__ */ m(a, { children: N.map((e) => /* @__PURE__ */ m(o, {
-			value: e.value,
-			children: e.label
-		}, e.value)) })]
+					htmlFor: L,
+					id: M,
+					children: N
+				}), Y]
+			}) : Y
+		}), /* @__PURE__ */ m(a, {
+			"data-testid": `${f}-select-content`,
+			dropdownWidth: _,
+			children: P.map((e) => /* @__PURE__ */ m(o, {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		})]
 	})] });
 };
 //#endregion

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -2,7 +2,7 @@
 import "../styles/main.css";
 import { t as e } from "../twUtils-VNWgstKL.js";
 import { getInputClasses as t } from "../utils/formFieldUtils.js";
-import { useControllableState as n } from "../hooks/useControllableState.js";
+import { useUncontrolledState as n } from "../hooks/useUncontrolledState.js";
 import { Label as r } from "../Label.js";
 import { S as i, b as a, f as o } from "../DateTimeUtils-DVvG6H-p.js";
 import { forwardRef as s, useCallback as c, useEffect as l, useMemo as u, useRef as d } from "react";

package/dist/DateTimePicker.js

@@ -3,7 +3,7 @@ import "./styles/main.css";
 import { CalendarIcon as e } from "./Icons/CalendarIcon.js";
 import { t } from "./twUtils-VNWgstKL.js";
 import { ErrorMessage as n } from "./utils/formFieldUtils.js";
-import { useControllableState as r } from "./hooks/useControllableState.js";
+import { useUncontrolledState as r } from "./hooks/useUncontrolledState.js";
 import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "./Popover.js";
 import { t as s } from "./Calendar-s4lyijkn.js";
 import { A as c, C as l, D as u, E as d, F as f, I as p, L as m, M as h, N as g, O as _, P as v, S as y, T as b, _ as x, a as S, b as C, c as w, d as T, f as E, g as D, h as O, i as k, j as A, k as j, l as M, m as N, n as P, o as F, p as I, r as L, s as R, t as z, u as B, v as V, w as H, x as U, y as W } from "./DateTimeUtils-DVvG6H-p.js";

package/dist/Icons/AnalyzeIcon.d.ts

@@ -1,5 +1,5 @@
 import { IconProps } from './iconTypes';
-export declare const AnalyzeIcon: (({ ref, className, ariaHidden, title, description, size, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const AnalyzeIcon: (({ ref, className, title, description, size, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 //# sourceMappingURL=AnalyzeIcon.d.ts.map

package/dist/Icons/AnalyzeIcon.js

@@ -1,14 +1,13 @@
 import "../styles/main.css";
 import { IconBase as e } from "./IconBase.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-var r = Object.assign(({ ref: r, className: i, ariaHidden: a, title: o, description: s, size: c = 24, ...l }) => /* @__PURE__ */ n(e, {
-	size: c,
+var r = Object.assign(({ ref: r, className: i, title: a, description: o, size: s = 24, ...c }) => /* @__PURE__ */ n(e, {
+	size: s,
 	className: i,
-	title: o,
-	description: s,
-	ariaHidden: a,
+	title: a,
+	description: o,
 	ref: r,
-	...l,
+	...c,
 	children: [
 		/* @__PURE__ */ t("path", {
 			d: "M20.8889 10.8889C20.6171 8.93372 19.71 7.12214 18.3074 5.73317C16.9048 4.34421 15.0844 3.4549 13.1267 3.20222C11.3783 2.97471 9.60165 3.26606 8.01753 4.04004C6.43341 4.81403 5.11169 6.03652 4.21667 7.55555",

package/dist/Icons/AnnotationsIcon.d.ts

@@ -1,5 +1,5 @@
 import { IconProps } from './iconTypes';
-export declare const AnnotationsIcon: (({ ref, className, ariaHidden, title, description, size, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const AnnotationsIcon: (({ ref, className, title, description, size, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 //# sourceMappingURL=AnnotationsIcon.d.ts.map

package/dist/Icons/AnnotationsIcon.js

@@ -1,14 +1,13 @@
 import "../styles/main.css";
 import { IconBase as e } from "./IconBase.js";
 import { jsx as t } from "react/jsx-runtime";
-var n = Object.assign(({ ref: n, className: r, ariaHidden: i, title: a, description: o, size: s = 24, ...c }) => /* @__PURE__ */ t(e, {
-	size: s,
+var n = Object.assign(({ ref: n, className: r, title: i, description: a, size: o = 24, ...s }) => /* @__PURE__ */ t(e, {
+	size: o,
 	className: r,
-	title: a,
-	description: o,
-	ariaHidden: i,
+	title: i,
+	description: a,
 	ref: n,
-	...c,
+	...s,
 	children: /* @__PURE__ */ t("path", {
 		d: "M13.6952 5.72122L15.8197 3.59668C16.6152 2.80111 17.9052 2.80111 18.7007 3.59668L20.4034 5.29931C21.1989 6.09488 21.1989 7.38475 20.4034 8.18031L18.2788 10.3049M13.6952 5.72122L3.29833 16.118C3.10732 16.309 3 16.5681 3 16.8383V21H7.16173C7.43187 21 7.69096 20.8927 7.88197 20.7017L18.2788 10.3049M13.6952 5.72122L18.2788 10.3049",
 		stroke: "currentColor",