@spear-ai/spectral 1.10.1 → 1.10.3

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

package/dist/Combobox.js

@@ -6,7 +6,7 @@ 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-D8Nf4xC-.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";
 //#region src/components/Combobox/Combobox.tsx
@@ -76,7 +76,7 @@ var C = ({ className: C, disabled: w, emptyMessage: T = "No options found.", err
 						"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 outline-hidden placeholder:text-input-text-placeholder focus-visible:ring-0 focus-visible:outline-none",
+						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,
@@ -88,7 +88,8 @@ var C = ({ className: C, disabled: w, emptyMessage: T = "No options found.", err
 						...Y
 					}), /* @__PURE__ */ x(p, {
 						align: "inline-end",
-						children: q ? /* @__PURE__ */ x(t, { className: "size-5 text-muted-foreground motion-safe:animate-spin" }) : /* @__PURE__ */ x(e, { className: n("size-5 text-muted-foreground shrink-0 transition-transform duration-200", X && "rotate-180") })
+						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") })
 					})]
 				}), /* @__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"),

package/dist/{ComboboxBase-D8Nf4xC-.js → ComboboxBase-Dn8Lz9mG.js}

@@ -479,11 +479,11 @@ var le = {
 	...t
 }), pe = ({ className: e, ...t }) => /* @__PURE__ */ p(J.Empty, {
 	"data-slot": "command-empty",
-	className: a("py-6 text-sm text-center", e),
+	className: a("py-6 text-base text-center text-text-secondary", e),
 	...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-sm in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", t),
+	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),
 	...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,3 +1,4 @@
+import { Input } from '../primitives/input';
 import { Select } from '../primitives/select';
 import { FormFieldState } from '../utils/formFieldUtils';
 import { ComponentProps } from 'react';
@@ -8,26 +9,35 @@ export interface SelectOptionType {
 }
 /** `inline`: `inputPlaceholder` / `selectPlaceholder` show inside the fields. `above`: same strings render as labels above each control (no inner placeholders). */
 export type ControlGroupSelectCaptionLayout = 'above' | 'inline';
-export interface ControlGroupSelectProps extends ComponentProps<typeof Select>, Pick<ControlGroupProps, 'orientation'> {
+type ControlGroupSelectInputControlProps = {
+    inputValue: ComponentProps<typeof Input>['value'];
+    onInputChange: ComponentProps<typeof Input>['onChange'];
+} | {
+    inputValue?: undefined;
+    onInputChange?: undefined;
+};
+type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlGroupProps, 'orientation'> & {
+    amountStep?: number;
     /** Accessible name for the group wrapper (use when there is no visible group heading). */
     ariaLabel?: string;
-    amountStep?: number;
     captionLayout?: ControlGroupSelectCaptionLayout;
     className?: string;
     dataTestId?: string;
     disabled?: boolean;
     errorMessage?: string | string[] | Record<string, unknown> | null;
-    maxAmount?: number;
-    minAmount?: number;
-    inputPlaceholder?: string;
     /** When `captionLayout` is `inline`, overrides the input's accessible name (defaults to `inputPlaceholder` when set). */
     inputAriaLabel?: string;
+    inputPlaceholder?: string;
+    maxAmount?: number;
+    minAmount?: number;
     selectPlaceholder?: string;
     /** When `captionLayout` is `inline` and `selectPlaceholder` is empty, sets the select trigger's accessible name. */
     selectAriaLabel?: string;
     selectOptions: SelectOptionType[];
     state?: FormFieldState;
     type?: 'number' | 'text';
-}
-export declare const ControlGroupSelect: ({ amountStep, ariaLabel, captionLayout, className, dataTestId, disabled, errorMessage, inputAriaLabel, inputPlaceholder, maxAmount, minAmount, orientation, selectAriaLabel, selectOptions, selectPlaceholder, state, type, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
+};
+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 {};
 //# sourceMappingURL=ControlGroupSelect.d.ts.map

package/dist/ControlGroup/ControlGroupSelect.js

@@ -1,88 +1,117 @@
 "use client";
 import "../styles/main.css";
 import { t as e } from "../twUtils-VNWgstKL.js";
-import { Label as t } from "../Label.js";
-import { Input as n } from "../primitives/input.js";
-import { Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s } from "../primitives/select.js";
-import { ControlGroup as c, ControlGroupItem as l, useControlGroup as u } from "../ControlGroup.js";
-import { useId as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { getStateClasses as t } from "../utils/formFieldUtils.js";
+import { Label as n } from "../Label.js";
+import { Input as r } from "../primitives/input.js";
+import { Select as i, SelectContent as a, SelectItem as o, SelectTrigger as s, SelectValue as c } from "../primitives/select.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 h = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", g = "flex w-full min-w-0 flex-col gap-1.5", _ = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, inputAriaLabel: s, inputPlaceholder: l, maxAmount: u = 1e6, minAmount: f = 0, orientation: m = "horizontal", selectAriaLabel: h, selectOptions: g, selectPlaceholder: _, state: y = "default", type: b = "number", ...x }) => {
-	let S = d(), C = `${S}-amount`, w = `${S}-select`, T = n === "above", E = T ? void 0 : l, D = T ? void 0 : _, O = T ? l ? void 0 : s ?? void 0 : s ?? l ?? void 0, k = T ? _ ? void 0 : h ?? void 0 : h ?? _ ?? void 0, A = !!a || y === "disabled";
-	return /* @__PURE__ */ p(c, {
-		"aria-label": t,
+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) => {
+	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, 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;
+	return /* @__PURE__ */ m(l, {
+		"aria-label": H,
 		className: r,
 		"data-testid": i,
 		disabled: a,
 		errorMessage: o,
-		orientation: m,
-		state: y,
-		children: /* @__PURE__ */ p(v, {
+		orientation: g,
+		state: T,
+		children: /* @__PURE__ */ m(w, {
 			amountStep: e,
 			dataTestId: i,
-			inputAccessibleName: O,
-			inputCaption: E,
-			inputId: C,
-			isDisabled: A,
-			maxAmount: u,
-			minAmount: f,
-			selectCaption: D,
-			selectOptions: g,
-			selectProps: x,
-			selectTriggerAriaLabel: k,
-			selectTriggerId: w,
-			type: b,
-			useAboveLabels: T,
-			inputPlaceholder: l,
-			selectPlaceholder: _
+			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
 		})
 	});
-}, v = ({ amountStep: c, dataTestId: d, inputAccessibleName: _, inputCaption: v, inputId: y, inputPlaceholder: b, isDisabled: x, maxAmount: S, minAmount: C, selectCaption: w, selectOptions: T, selectPlaceholder: E, selectProps: D, selectTriggerAriaLabel: O, selectTriggerId: k, type: A, useAboveLabels: j }) => {
-	let { errorMessageId: M } = u(), N = /* @__PURE__ */ p(n, {
-		"aria-describedby": M,
+}, 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": _,
-		className: e(A === "number" && h, A === "number" && "tabular-nums", j && "rounded-s-md rounded-none"),
-		"data-testid": `${d}-input`,
-		disabled: x,
-		id: j ? y : void 0,
-		type: A === "number" ? "number" : "text",
+		"aria-labelledby": z ? S : void 0,
+		className: e(b, U, t(H), R === "number" && g, R === "number" && "tabular-nums"),
+		"data-testid": `${f}-input`,
+		disabled: E,
+		id: z ? x : void 0,
+		type: R === "number" ? "number" : "text",
 		placeholder: v,
-		min: C ?? 0,
-		max: S ?? 1e6,
-		step: c ?? 1
-	}), P = /* @__PURE__ */ p(o, {
-		"aria-describedby": M,
-		"aria-label": O,
-		className: e(j && "rounded-e-md rounded-none"),
-		"data-testid": `${d}-select-trigger`,
-		disabled: x,
-		id: j ? k : void 0,
-		children: /* @__PURE__ */ p(s, { placeholder: w })
+		style: w ? { minWidth: w } : void 0,
+		min: O ?? 0,
+		max: D ?? 1e6,
+		...T !== void 0 && k !== void 0 ? {
+			value: T,
+			onChange: k
+		} : {},
+		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)),
+		"data-testid": `${f}-select-trigger`,
+		disabled: E,
+		id: z ? I : void 0,
+		style: L ? { minWidth: L } : void 0,
+		children: /* @__PURE__ */ m(c, { placeholder: A })
 	});
-	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(l, { children: j ? /* @__PURE__ */ m("div", {
-		className: g,
-		children: [b ? /* @__PURE__ */ p(t, {
-			className: "text-text-primary",
-			htmlFor: y,
-			children: b
-		}) : null, N]
-	}) : N }), /* @__PURE__ */ m(r, {
-		"data-testid": `${d}-select-root`,
-		disabled: x,
-		...D,
-		children: [/* @__PURE__ */ p(l, { children: j ? /* @__PURE__ */ m("div", {
-			className: g,
-			children: [E ? /* @__PURE__ */ p(t, {
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, {
+		className: z ? G : void 0,
+		children: z ? /* @__PURE__ */ h("div", {
+			className: y,
+			children: [/* @__PURE__ */ m(n, {
 				className: "text-text-primary",
-				htmlFor: k,
-				children: E
-			}) : null, P]
-		}) : P }), /* @__PURE__ */ p(i, { children: T.map((e) => /* @__PURE__ */ p(a, {
+				htmlFor: x,
+				id: S,
+				children: C
+			}), q]
+		}) : q
+	}), /* @__PURE__ */ h(i, {
+		"data-testid": `${f}-select-root`,
+		disabled: E,
+		...P,
+		children: [/* @__PURE__ */ m(u, {
+			className: z ? K : void 0,
+			children: z ? /* @__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)) })]
 	})] });
 };
 //#endregion
-export { _ as ControlGroupSelect };
+export { C as ControlGroupSelect };

package/dist/ControlGroup.js

@@ -2,47 +2,47 @@
 import "./styles/main.css";
 import { t as e } from "./twUtils-VNWgstKL.js";
 import { Slot as t } from "./primitives/slot.js";
-import { ErrorMessage as n, getErrorMessageId as r, getStateClasses 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";
+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";
 //#region src/components/ControlGroup/ControlGroup.tsx
-var d = s(null), f = () => {
-	let e = c(d);
+var u = o(null), d = () => {
+	let e = s(u);
 	if (e === null) throw Error("useControlGroup must be used within a ControlGroup");
 	return e;
-}, p = ({ className: t, disabled: s, errorMessage: c, id: f, name: p, orientation: m = "horizontal", state: h = "default", ...g }) => {
-	let _ = a(f, p), v = r(_), { isDisabled: y, isLoading: b, isInvalid: x } = o(s, h);
-	return /* @__PURE__ */ u(d.Provider, {
+}, 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, {
 		value: {
-			errorMessageId: x && c ? v : void 0,
-			isDisabled: y,
-			isInvalid: x,
-			isLoading: b,
-			orientation: m,
-			state: h
+			errorMessageId: b && s ? _ : void 0,
+			isDisabled: v,
+			isInvalid: b,
+			isLoading: y,
+			orientation: p,
+			state: m
 		},
-		children: [/* @__PURE__ */ l("div", {
+		children: [/* @__PURE__ */ c("div", {
 			"data-slot": "control-group",
-			"data-orientation": m,
-			"data-state": h,
-			id: _,
+			"data-orientation": p,
+			"data-state": m,
+			id: g,
 			role: "group",
-			"aria-describedby": x && c ? v : void 0,
-			className: e("group rounded-lg flex border-2 border-transparent", m === "vertical" && "flex-col", i(h), y && "pointer-events-none opacity-50", t),
-			...g
-		}), x && c && /* @__PURE__ */ l(n, {
+			"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: v,
-			message: c
+			id: _,
+			message: s
 		})]
 	});
-}, m = ({ className: n, ...r }) => {
-	let { orientation: i } = f();
-	return /* @__PURE__ */ l(t, {
+}, p = ({ className: n, ...r }) => {
+	let { orientation: i } = d();
+	return /* @__PURE__ */ c(t, {
 		"data-slot": "control-group-item",
-		className: e("rounded-none focus-within:z-10", i === "horizontal" && "first:rounded-s-md last:me-0 last:rounded-e-md -me-px h-auto", i === "vertical" && "first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:mbe-0 -mbe-px w-auto", n),
+		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 { p as ControlGroup, m as ControlGroupItem, f as useControlGroup };
+export { f as ControlGroup, p as ControlGroupItem, d as useControlGroup };

package/dist/Select.js

@@ -4,14 +4,14 @@ import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
 import { ChevronDownIcon as t } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon as n } from "./Icons/LoaderIcon.js";
 import { t as r } from "./twUtils-VNWgstKL.js";
-import { EmptyState as i, ErrorMessage as a, LoadingState as o, getAriaProps as s, getErrorMessageId as c, getFormFieldCSSProperties as l, getOptionClasses as ee, getStateClasses as te, getTriggerClasses as ne, groupOptions as re, useFormFieldId as u, useFormFieldState as d } from "./utils/formFieldUtils.js";
-import { Label as f } from "./Label.js";
-import { a as p, c as m, d as h, f as g, h as _, i as v, l as ie, m as ae, n as oe, o as se, p as ce, r as le, t as ue, u as y } from "./dist-fW81qjVl.js";
+import { EmptyState as i, ErrorMessage as a, LoadingState as o, getAriaProps as s, getErrorMessageId as c, getFormFieldCSSProperties as l, getOptionClasses as ee, getStateClasses as te, getTriggerClasses as ne, groupOptions as re, useFormFieldId as ie, useFormFieldState as u } from "./utils/formFieldUtils.js";
+import { Label as d } from "./Label.js";
+import { a as f, c as p, d as m, f as h, h as g, i as _, l as ae, m as oe, n as se, o as ce, p as le, r as ue, t as v, u as y } from "./dist-fW81qjVl.js";
 import { useState as b } from "react";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
 var w = (w) => {
-	let T = "value" in w, { align: E = "start", alignOffset: D = 0, avoidCollisions: O = !0, className: k, collisionBoundary: A, collisionPadding: j = 10, defaultValue: M, emptyMessage: N = "No options found", errorMessage: P, id: F, label: I, labelClassName: L, loadingMessage: de = "Loading…", name: R, onChange: z, options: B = [], placeholder: V = "Select an option", position: H = "popper", ref: fe, side: pe = "bottom", sideOffset: me = 4, state: U = "default", value: W, "aria-label": he, "aria-describedby": ge, ...G } = w, K = T ? W ?? "" : W, [q, _e] = b(!1), J = u(F, R), Y = c(J), { isDisabled: X, isLoading: Z, isInvalid: ve } = d(G.disabled, U), ye = s(U, ge, G.required, Y), { groups: Q, ungrouped: $ } = re(B), be = () => {
+	let T = "value" in w, { align: E = "start", alignOffset: D = 0, avoidCollisions: O = !0, className: k, collisionBoundary: A, collisionPadding: j = 10, defaultValue: M, emptyMessage: N = "No options found", errorMessage: P, id: F, label: I, labelClassName: L, loadingMessage: de = "Loading…", name: R, onChange: z, options: B = [], placeholder: V = "Select an option", position: H = "popper", ref: fe, side: pe = "bottom", sideOffset: me = 4, state: U = "default", value: W, "aria-label": he, "aria-describedby": ge, ...G } = w, K = T ? W ?? "" : W, [q, _e] = b(!1), J = ie(F, R), Y = c(J), { isDisabled: X, isLoading: Z, isInvalid: ve } = u(G.disabled, U), ye = s(U, ge, G.required, Y), { groups: Q, ungrouped: $ } = re(B), be = () => {
 		if (Z) return /* @__PURE__ */ S(o, {
 			"data-testid": "spectral-select-loading",
 			message: de
@@ -22,16 +22,16 @@ var w = (w) => {
 		});
 		let t = (t) => {
 			let n = K === t.value;
-			return /* @__PURE__ */ C(v, {
+			return /* @__PURE__ */ C(_, {
 				className: r(ee(!!t.disabled, !1, n), "relative flex w-full cursor-pointer items-center"),
 				"data-testid": "spectral-select-item",
 				disabled: t.disabled,
 				value: t.value,
-				children: [/* @__PURE__ */ S(se, {
+				children: [/* @__PURE__ */ S(ce, {
 					"data-testid": "spectral-select-item-text",
 					className: "block truncate",
 					children: t.label
-				}), /* @__PURE__ */ S(p, {
+				}), /* @__PURE__ */ S(f, {
 					"data-testid": "spectral-select-item-selected-indicator",
 					asChild: !0,
 					children: /* @__PURE__ */ S("span", {
@@ -41,17 +41,17 @@ var w = (w) => {
 				})]
 			}, t.value);
 		};
-		return /* @__PURE__ */ C(x, { children: [$.length > 0 && /* @__PURE__ */ C(x, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ S(g, {
+		return /* @__PURE__ */ C(x, { children: [$.length > 0 && /* @__PURE__ */ C(x, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ S(h, {
 			className: "-mx-1 my-1 h-px bg-border-secondary",
 			"data-testid": "spectral-select-separator"
-		})] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ C(oe, {
+		})] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ C(se, {
 			"data-testid": "spectral-select-group",
 			children: [
-				i > 0 && /* @__PURE__ */ S(g, {
+				i > 0 && /* @__PURE__ */ S(h, {
 					className: "-mx-1 my-1 h-px bg-border-secondary",
 					"data-testid": "spectral-select-group-separator"
 				}),
-				/* @__PURE__ */ S(f, {
+				/* @__PURE__ */ S(d, {
 					className: r("px-2 py-1.5 text-base font-semibold text-text-primary", L),
 					"data-testid": "spectral-select-group-label",
 					children: e
@@ -63,13 +63,13 @@ var w = (w) => {
 	return /* @__PURE__ */ C("div", {
 		className: "w-full",
 		children: [
-			I && /* @__PURE__ */ S(f, {
+			I && /* @__PURE__ */ S(d, {
 				className: r("mb-2 block text-text-primary", L, X && "text-text-secondary"),
 				"data-testid": "spectral-select-label",
 				htmlFor: J,
 				children: I
 			}),
-			/* @__PURE__ */ C(ie, {
+			/* @__PURE__ */ C(ae, {
 				"data-testid": "spectral-select",
 				defaultValue: M,
 				disabled: X,
@@ -79,12 +79,12 @@ var w = (w) => {
 				open: q,
 				required: G.required,
 				value: K,
-				children: [/* @__PURE__ */ S(ce, {
+				children: [/* @__PURE__ */ S(le, {
 					"aria-controls": J,
 					"aria-expanded": q,
 					"aria-label": he ?? I,
 					asChild: !0,
-					className: r(ne(!1, U), te(U), k),
+					className: r(ne(!1, U), te(U), "text-input-text data-placeholder:text-input-text!", k),
 					"data-slot": "select-trigger",
 					"data-state": U,
 					"data-testid": "spectral-select-trigger",
@@ -95,24 +95,25 @@ var w = (w) => {
 					...ye,
 					...G,
 					children: /* @__PURE__ */ C("button", {
+						className: "min-w-0 gap-2 [&>span]:min-w-0 grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center overflow-hidden text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text! [&>span]:block [&>span]:overflow-hidden [&>span]:text-ellipsis [&>span]:whitespace-nowrap [&>span[data-placeholder]]:text-input-text!",
 						type: "button",
 						disabled: X,
-						children: [/* @__PURE__ */ S(ae, {
-							className: "block truncate",
+						children: [/* @__PURE__ */ S(oe, {
+							className: "min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text!",
 							"data-testid": "spectral-select-value",
 							placeholder: V
-						}), /* @__PURE__ */ S(le, {
+						}), /* @__PURE__ */ S(ue, {
 							asChild: !0,
 							children: /* @__PURE__ */ S("div", {
-								className: "flex items-center",
+								className: "flex shrink-0 cursor-pointer items-center",
 								children: Z ? /* @__PURE__ */ S(n, { size: 20 }) : /* @__PURE__ */ S(t, {
-									className: "transition-transform duration-200 data-[state=open]:rotate-180",
+									className: r("transition-transform duration-200", q && "rotate-180"),
 									size: 20
 								})
 							})
 						})]
 					})
-				}), /* @__PURE__ */ S(m, { children: /* @__PURE__ */ C(ue, {
+				}), /* @__PURE__ */ S(p, { children: /* @__PURE__ */ C(v, {
 					align: E,
 					alignOffset: D,
 					avoidCollisions: O,
@@ -125,7 +126,7 @@ var w = (w) => {
 					side: pe,
 					sideOffset: me,
 					children: [
-						/* @__PURE__ */ S(h, {
+						/* @__PURE__ */ S(m, {
 							className: "py-1 flex cursor-default items-center justify-center",
 							"data-testid": "spectral-select-scroll-up-button",
 							children: /* @__PURE__ */ S(t, {
@@ -134,7 +135,7 @@ var w = (w) => {
 								size: 18
 							})
 						}),
-						/* @__PURE__ */ S(_, {
+						/* @__PURE__ */ S(g, {
 							asChild: !0,
 							children: /* @__PURE__ */ S("div", {
 								className: r("p-1", H === "popper" && "scroll-my-1 h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),

package/dist/primitives/select.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 export declare const Select: ({ ...props }: ComponentProps<typeof SelectPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: ({ ...props }: ComponentProps<typeof SelectPrimitive.Group>) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectValue: ({ ...props }: ComponentProps<typeof SelectPrimitive.Value>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectValue: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Value>) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectTrigger: ({ asChild, children, className, size, ...props }: ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: "sm" | "default";
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/primitives/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,eAAO,MAAM,MAAM,GAAI,cAAc,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,4CAE/E,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAErF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAErF,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,kDAM3B,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,4CAoBA,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,oDAA0E,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,4CAsBrJ,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAEhG,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,mCAAmC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,4CAkBxG,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,4CAExG,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,4CAMlH,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,4CAMtH,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/primitives/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,eAAO,MAAM,MAAM,GAAI,cAAc,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,4CAE/E,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAErF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAEhG,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,kDAM3B,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,4CAoBA,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,oDAA0E,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,4CAsBrJ,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,4CAEhG,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,mCAAmC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,4CAkBxG,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,4CAExG,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,4CAMlH,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,yBAAyB,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,4CAMtH,CAAA"}

package/dist/primitives/select.js

@@ -12,18 +12,22 @@ var x = ({ ...e }) => /* @__PURE__ */ y(u, {
 }), S = ({ ...e }) => /* @__PURE__ */ y(f, {
 	"data-slot": "select-group",
 	...e
-}), C = ({ ...e }) => /* @__PURE__ */ y(d, {
+}), C = ({ className: e, ...t }) => /* @__PURE__ */ y(d, {
+	className: r("min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text!", e),
 	"data-slot": "select-value",
-	...e
+	...t
 }), w = ({ asChild: e, children: n, className: i, size: a = "default", ...o }) => /* @__PURE__ */ b(m, {
 	asChild: e,
-	className: r("[&_svg:not([class*='text-'])]:text-text-placeholder focus-visible:border-ring focus-visible:ring-ring/50 gap-2 rounded-md px-3 py-2 text-sm shadow-xs h-9 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between border border-input-border bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-danger-400 data-placeholder:text-input-text-placeholder *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", i),
+	className: r("[&_svg:not([class*='text-'])]:text-text-placeholder focus-visible:border-ring focus-visible:ring-ring/50 gap-2 rounded-md px-3 py-2 text-sm shadow-xs h-9 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 min-w-0 *:data-[slot=select-value]:min-w-0 flex w-fit cursor-pointer items-center justify-between border border-input-border bg-transparent text-input-text! transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-danger-400 data-placeholder:text-input-text! *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center data-[state=open]:**:data-[slot=select-chevron]:rotate-180 [&_svg]:pointer-events-none [&_svg]:shrink-0", i),
 	"data-size": a,
 	"data-slot": "select-trigger",
 	...o,
 	children: [n, !e && /* @__PURE__ */ y(h, {
 		asChild: !0,
-		children: /* @__PURE__ */ y(t, { className: "size-4 opacity-50" })
+		children: /* @__PURE__ */ y(t, {
+			className: "size-4 opacity-50 transition-transform duration-200",
+			"data-slot": "select-chevron"
+		})
 	})]
 }), T = ({ align: e = "center", children: t, className: n, position: i = "popper", ...o }) => /* @__PURE__ */ y(a, { children: /* @__PURE__ */ b(_, {
 	align: e,

package/dist/styles/horizon/colors.css

@@ -106,8 +106,8 @@
   --color-button-ghost-text--hover: var(--horizon-color-accent);
   --color-button-ghost-text--disabled: var(--horizon-color-neutral-400);
 
-  --color-button-danger: var(--horizon-color-danger-200);
-  --color-button-danger--hover: color-mix(in oklab, var(--horizon-color-danger-300) 80%, transparent);
+  --color-button-danger: var(--horizon-color-danger-400);
+  --color-button-danger--hover: color-mix(in oklab, var(--horizon-color-danger-500) 80%, transparent);
 
   --color-checkbox-border: var(--horizon-color-neutral-100);
   --color-checkbox-border--focus: var(--horizon-color-accent);