@spear-ai/spectral 1.13.0 → 1.13.1

package/dist/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { DropdownWidth } from './utils/formFieldUtils';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, RefObject, ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 type Align = 'start' | 'center' | 'end';
 type Side = 'top' | 'bottom' | 'left' | 'right';
@@ -39,6 +39,7 @@ export interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof
     defaultOpen?: boolean;
     defaultValue?: DropdownValue;
     disabled?: boolean;
+    dropdownContentRef?: RefObject<HTMLDivElement | null>;
     dropdownWidth?: DropdownWidth;
     emptyMessage?: ReactNode;
     loadingMessage?: string;
@@ -54,7 +55,7 @@ export interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof
     value?: DropdownValue;
 }
 export declare const DropdownMenu: {
-    ({ align, asChild, alignOffset, avoidCollisions, className, collisionBoundary, collisionPadding, contentClassName, dataTestId, defaultOpen, defaultValue, disabled, dropdownWidth, emptyMessage, loadingMessage, modal, onOpenChange, onValueChange, open: openProp, options, selectionMode, side, sideOffset, state, trigger, value: valueProp, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ align, asChild, alignOffset, avoidCollisions, className, collisionBoundary, collisionPadding, contentClassName, dataTestId, defaultOpen, defaultValue, disabled, dropdownContentRef, dropdownWidth, emptyMessage, loadingMessage, modal, onOpenChange, onValueChange, open: openProp, options, selectionMode, side, sideOffset, state, trigger, value: valueProp, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/DropdownMenu.js

@@ -1,3 +1,3 @@
 'use client'
-import { t as e } from "./DropdownMenu-B8I8IRcu.js";
+import { t as e } from "./DropdownMenu-BO_RPCVU.js";
 export { e as DropdownMenu };

package/dist/FormFieldMessage.d.ts

@@ -0,0 +1,11 @@
+export type FormFieldMessageValue = string | string[] | Record<string, unknown> | null | undefined;
+interface BaseFieldMessageProps {
+    className?: string;
+    dataTestId?: string;
+    id: string;
+    message: FormFieldMessageValue;
+}
+export declare const ErrorMessage: ({ className, dataTestId, id, message }: BaseFieldMessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WarningMessage: ({ className, dataTestId, id, message }: BaseFieldMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FormFieldMessage.d.ts.map

package/dist/FormFieldMessage.js

@@ -0,0 +1,55 @@
+'use client'
+import './styles/main.css'
+import { t as e } from "./twUtils-BpqlKSeB.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/FormFieldMessage/FormFieldMessage.tsx
+var n = (e) => {
+	if (!e) return null;
+	if (typeof e == "string") return e;
+	if (Array.isArray(e)) return e.join(", ");
+	if (typeof e == "object") {
+		if ("message" in e && typeof e.message == "string") return e.message;
+		if ("error" in e && typeof e.error == "string") return e.error;
+		if ("details" in e && typeof e.details == "string") return e.details;
+		try {
+			return JSON.stringify(e);
+		} catch {
+			return "[Circular]";
+		}
+	}
+	return String(e);
+}, r = ({ ariaLive: r, className: i, dataTestId: a, id: o, message: s, role: c, tone: l }) => {
+	let u = n(s), d = !!u, f = l === "danger" ? "text-danger-400!" : "text-warning-400!";
+	return /* @__PURE__ */ t("div", {
+		"aria-hidden": !d,
+		className: e("transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none", d ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"),
+		children: /* @__PURE__ */ t("p", {
+			"aria-atomic": d ? "true" : void 0,
+			"aria-live": d ? r : void 0,
+			className: e("m-0! min-h-0 text-sm overflow-hidden", f, i),
+			"data-testid": d ? a : void 0,
+			id: o,
+			role: d ? c : void 0,
+			children: u
+		})
+	});
+}, i = ({ className: e, dataTestId: n = "spectral-form-field-error-message", id: i, message: a }) => /* @__PURE__ */ t(r, {
+	ariaLive: "assertive",
+	className: e,
+	dataTestId: n,
+	id: i,
+	message: a,
+	role: "alert",
+	tone: "danger"
+}), a = ({ className: e, dataTestId: n = "spectral-form-field-warning-message", id: i, message: a }) => /* @__PURE__ */ t(r, {
+	ariaLive: "polite",
+	className: e,
+	dataTestId: n,
+	id: i,
+	message: a,
+	role: "status",
+	tone: "warning"
+});
+//#endregion
+export { i as ErrorMessage, a as WarningMessage };

package/dist/Input.d.ts

@@ -12,6 +12,7 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onC
     placeholder?: string;
     prefix?: string;
     showClearButton?: boolean;
+    showStateIcon?: boolean;
     startIcon?: ReactElement;
     suppressHydrationWarning?: boolean;
     type?: InputType;

package/dist/Input.js

@@ -4,22 +4,23 @@ import { CheckCircleIcon as e } from "./Icons/CheckCircleIcon.js";
 import { CloseCircleIcon as t } from "./Icons/CloseCircleIcon.js";
 import { ErrorIcon as ee } from "./Icons/ErrorIcon.js";
 import { EyeClosedIcon as te } from "./Icons/EyeClosedIcon.js";
-import { EyeOpenIcon as n } from "./Icons/EyeOpenIcon.js";
-import { LoaderIcon as ne } from "./Icons/LoaderIcon.js";
-import { WarningIcon as re } from "./Icons/WarningIcon.js";
-import { t as r } from "./twUtils-BpqlKSeB.js";
-import { ErrorMessage as i, WarningMessage as ie, getAriaProps as a, getFormFieldCSSProperties as o, getInputClasses as s, useFormFieldId as c, useFormFieldState as l } from "./utils/formFieldUtils.js";
+import { EyeOpenIcon as ne } from "./Icons/EyeOpenIcon.js";
+import { LoaderIcon as re } from "./Icons/LoaderIcon.js";
+import { WarningIcon as ie } from "./Icons/WarningIcon.js";
+import { t as n } from "./twUtils-BpqlKSeB.js";
+import { ErrorMessage as r, WarningMessage as i } from "./FormFieldMessage.js";
+import { getAriaProps as a, getFormFieldCSSProperties as o, getInputClasses as s, useFormFieldId as c, useFormFieldState as l } from "./utils/formFieldUtils.js";
 import { useUncontrolledState as u } from "./hooks/useUncontrolledState.js";
 import { Label as d } from "./Label.js";
-import { useClearOnFocus as f, usePasswordVisibility as p, usePrefixWidth as m } from "./Input/InputUtils.js";
-import { useCallback as h, useRef as ae } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useClearOnFocus as f, usePasswordVisibility as p, usePrefixWidth as ae } from "./Input/InputUtils.js";
+import { useCallback as m, useRef as oe } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/Input/Input.tsx
-var oe = (...e) => (t) => {
+var se = (...e) => (t) => {
 	e.forEach((e) => {
 		e && (typeof e == "function" ? e(t) : e.current = t);
 	});
-}, se = (e) => ({
+}, ce = (e) => ({
 	date: "off",
 	email: "email",
 	number: "off",
@@ -28,127 +29,127 @@ var oe = (...e) => (t) => {
 	text: "off",
 	url: "url",
 	"datetime-local": "off"
-})[e] || "off", v = (v) => {
-	let { className: ce, clearOnFocus: le = !1, defaultValue: y, disabled: ue, endIcon: b, errorMessage: x, id: S, label: C, labelClassName: w, name: T, onBlur: E, onChange: D, onFocus: O, placeholder: k, prefix: A, ref: j, required: M, showClearButton: N = !1, startIcon: P, state: F = "default", suppressHydrationWarning: I = !0, type: L = "text", value: R, warningMessage: z, "aria-label": B, "aria-describedby": V, ...H } = v, U = c(S, T), W = `${U}-error`, G = `${U}-warning`, { isDisabled: K, isLoading: de, isInvalid: fe } = l(ue, F), pe = a(F, V, M, F === "error" ? W : F === "warning" && z ? G : void 0), [q, J] = u({
-		value: R,
-		defaultValue: typeof y == "string" ? y : y == null ? "" : String(y),
+})[e] || "off", _ = (_) => {
+	let { className: le, clearOnFocus: ue = !1, defaultValue: v, disabled: y, endIcon: b, errorMessage: x, id: S, label: C, labelClassName: w, name: T, onBlur: E, onChange: D, onFocus: O, placeholder: k, prefix: A, ref: j, required: M, showClearButton: N = !1, showStateIcon: P = !0, startIcon: F, state: I = "default", suppressHydrationWarning: L = !0, type: R = "text", value: z, warningMessage: B, "aria-label": V, "aria-describedby": H, ...de } = _, U = c(S, T), W = `${U}-error`, G = `${U}-warning`, { isDisabled: K, isLoading: fe, isInvalid: pe } = l(y, I), me = a(I, H, M, I === "error" ? W : I === "warning" && B ? G : void 0), [q, J] = u({
+		value: z,
+		defaultValue: typeof v == "string" ? v : v == null ? "" : String(v),
 		onChange: D
-	}), Y = ae(null), me = oe(j, Y), { isVisible: X, toggleVisibility: he, inputType: ge } = p(), { prefixWidth: _e, prefixRef: ve } = m(A), { handleFocus: Z } = f(le, (e) => J(e.target.value)), ye = h((e) => {
+	}), Y = oe(null), he = se(j, Y), { isVisible: X, toggleVisibility: ge, inputType: _e } = p(), { prefixWidth: ve, prefixRef: ye } = ae(A), { handleFocus: Z } = f(ue, (e) => J(e.target.value)), be = m((e) => {
 		E?.(e);
-	}, [E]), be = h((e) => {
+	}, [E]), xe = m((e) => {
 		Z(e, O);
-	}, [Z, O]), xe = h((e) => {
+	}, [Z, O]), Q = m((e) => {
 		let t = e.target.value;
 		J(t);
-	}, [J]), Se = h(() => {
+	}, [J]), Se = m(() => {
 		let e = Y.current;
 		e && (J(""), e.focus());
-	}, [J]), Q = N && q.length > 0, Ce = () => {
-		let r = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", i = {
-			password: () => /* @__PURE__ */ g("button", {
+	}, [J]), $ = N && q.length > 0, Ce = () => {
+		let n = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", r = {
+			password: () => /* @__PURE__ */ h("button", {
 				"aria-controls": U,
 				"aria-label": X ? `Hide ${C ?? "password"}` : `Show ${C ?? "password"}`,
 				"aria-pressed": X,
-				className: r,
+				className: n,
 				"data-testid": "spectral-input-password-toggle",
-				onClick: he,
+				onClick: ge,
 				type: "button",
-				children: g(X ? te : n, { size: 22 })
+				children: h(X ? te : ne, { size: 22 })
 			}),
-			clear: () => /* @__PURE__ */ g("button", {
+			clear: () => /* @__PURE__ */ h("button", {
 				"aria-label": String(`Clear ${C ?? "input"}`),
-				className: r,
+				className: n,
 				"data-testid": "spectral-input-clear-button",
 				onClick: Se,
 				type: "button",
-				children: /* @__PURE__ */ g(t, { size: 24 })
+				children: /* @__PURE__ */ h(t, { size: 24 })
 			}),
-			loading: () => /* @__PURE__ */ g("div", {
+			loading: () => /* @__PURE__ */ h("div", {
 				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
 				"data-testid": "spectral-input-loading-icon",
-				children: /* @__PURE__ */ g(ne, { size: 24 })
+				children: /* @__PURE__ */ h(re, { size: 24 })
 			}),
-			error: () => /* @__PURE__ */ g("div", {
+			error: () => /* @__PURE__ */ h("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
 				"data-testid": "spectral-input-error-icon",
-				children: /* @__PURE__ */ g(ee, { size: 24 })
+				children: /* @__PURE__ */ h(ee, { size: 24 })
 			}),
-			success: () => /* @__PURE__ */ g("div", {
+			success: () => /* @__PURE__ */ h("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-success-400",
 				"data-testid": "spectral-input-success-icon",
-				children: /* @__PURE__ */ g(e, { size: 24 })
+				children: /* @__PURE__ */ h(e, { size: 24 })
 			}),
-			warning: () => /* @__PURE__ */ g("div", {
+			warning: () => /* @__PURE__ */ h("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-warning-400",
 				"data-testid": "spectral-input-warning-icon",
-				children: /* @__PURE__ */ g(re, { size: 24 })
+				children: /* @__PURE__ */ h(ie, { size: 24 })
 			})
 		};
-		return b ? /* @__PURE__ */ g("div", {
+		return b ? /* @__PURE__ */ h("div", {
 			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
 			children: b
-		}) : L === "password" ? i.password() : Q ? i.clear() : de ? i.loading() : F === "success" ? i.success() : F === "warning" ? i.warning() : F === "error" ? i.error() : null;
-	}, $ = () => P || null, we = L === "number" || L === "date" || L === "datetime-local", Te = r(s(F, ce), "[text-indent:var(--prefix-width)]", Q && "pr-10", we && "tabular-nums"), Ee = r("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
-	return /* @__PURE__ */ _("div", {
+		}) : R === "password" ? r.password() : $ ? r.clear() : fe ? r.loading() : !P && (I === "success" || I === "warning" || I === "error") ? null : I === "success" ? r.success() : I === "warning" ? r.warning() : I === "error" ? r.error() : null;
+	}, we = () => F || null, Te = R === "number" || R === "date" || R === "datetime-local", Ee = n(s(I, le), "[text-indent:var(--prefix-width)]", $ && "pr-10", Te && "tabular-nums"), De = n("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
+	return /* @__PURE__ */ g("div", {
 		className: "space-y-1.5 w-full",
 		"data-testid": "spectral-input-container",
-		children: [C && /* @__PURE__ */ g(d, {
-			className: r("mb-2 block", w, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
+		children: [C && /* @__PURE__ */ h(d, {
+			className: n("mb-2 block", w, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
 			"data-testid": "spectral-input-label",
 			htmlFor: U,
 			children: C
-		}), /* @__PURE__ */ _("div", {
+		}), /* @__PURE__ */ g("div", {
 			className: "relative",
 			"data-testid": "spectral-input-wrapper",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ g("div", {
 					className: "relative",
 					children: [
-						$(),
-						A && /* @__PURE__ */ g("span", {
-							ref: ve,
-							className: Ee,
+						we(),
+						A && /* @__PURE__ */ h("span", {
+							ref: ye,
+							className: De,
 							children: A
 						}),
-						/* @__PURE__ */ g("input", {
-							"aria-label": B ?? C,
-							autoComplete: se(L),
-							className: Te,
-							"data-state": F,
+						/* @__PURE__ */ h("input", {
+							"aria-label": V ?? C,
+							autoComplete: ce(R),
+							className: Ee,
+							"data-state": I,
 							"data-testid": "spectral-input",
 							disabled: K,
 							id: U,
 							name: T,
-							onBlur: ye,
-							onChange: xe,
-							onFocus: be,
+							onBlur: be,
+							onChange: Q,
+							onFocus: xe,
 							placeholder: k ?? C,
-							ref: me,
+							ref: he,
 							required: M,
-							style: o({ "--prefix-width": A ? `${_e}px` : "0" }),
-							suppressHydrationWarning: I,
-							type: L === "password" ? ge : L,
+							style: o({ "--prefix-width": A ? `${ve}px` : "0" }),
+							suppressHydrationWarning: L,
+							type: R === "password" ? _e : R,
 							value: q,
-							...pe,
-							...H
+							...me,
+							...de
 						}),
 						Ce()
 					]
 				}),
-				fe && x && /* @__PURE__ */ g(i, {
+				/* @__PURE__ */ h(r, {
 					dataTestId: "spectral-input-error-message",
 					id: W,
-					message: x
+					message: pe ? x ?? null : null
 				}),
-				F === "warning" && z && /* @__PURE__ */ g(ie, {
+				/* @__PURE__ */ h(i, {
 					dataTestId: "spectral-input-warning-message",
 					id: G,
-					message: z
+					message: I === "warning" ? B ?? null : null
 				})
 			]
 		})]
 	});
 };
-v.displayName = "Input";
+_.displayName = "Input";
 //#endregion
-export { v as Input };
+export { _ as Input };

package/dist/InputNumeric.js

@@ -59,7 +59,7 @@ var a = /^\d$/, o = new Set([
 }, g = ({ allowDecimal: g = !0, allowNegative: _ = !1, className: v, defaultValue: y = "", locale: b, max: x, min: S, onChange: C, onKeyDown: w, onPaste: T, step: E, value: D, ...O }) => {
 	let [k, A] = t({
 		value: D,
-		defaultValue: y,
+		defaultValue: typeof y == "string" ? y : y == null ? "" : String(y),
 		onChange: C
 	}), j = c(b), M = p(S), N = p(x), P = p(E), F = P && P > 0 ? P : 1, I = M ?? (_ ? void 0 : 0), L = r((e) => {
 		if (w?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && !(e.metaKey || e.ctrlKey || e.altKey)) {
@@ -98,19 +98,8 @@ var a = /^\d$/, o = new Set([
 		F,
 		k
 	]), R = r((e) => {
-		if (T?.(e), e.defaultPrevented) return;
-		let t = e.clipboardData.getData("text"), n = u(t, g, _, j);
-		if (l(t, j) === n) return;
-		e.preventDefault();
-		let r = e.currentTarget, i = r.selectionStart ?? r.value.length, a = r.selectionEnd ?? r.value.length;
-		A(u(`${r.value.slice(0, i)}${n}${r.value.slice(a)}`, g, _, j));
-	}, [
-		g,
-		_,
-		j,
-		T,
-		A
-	]), z = r((e) => {
+		T?.(e);
+	}, [T]), z = r((e) => {
 		A(u(e, g, _, j));
 	}, [
 		g,

package/dist/{InputOTP-DyhesOLs.js → InputOTP-DLn7ja7J.js}

@@ -1,7 +1,8 @@
 import './styles/main.css'
 import { MinusIcon as e } from "./Icons/MinusIcon.js";
 import { t } from "./twUtils-BpqlKSeB.js";
-import { ErrorMessage as n, getErrorMessageId as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
+import { ErrorMessage as n } from "./FormFieldMessage.js";
+import { getErrorMessageId as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
 import * as o from "react";
 import { createContext as s, useContext as c } from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
@@ -394,10 +395,10 @@ var j = "\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: blac
 					},
 					children: o ?? /* @__PURE__ */ u(I, { children: /* @__PURE__ */ u(R, {}) })
 				})
-			}), T && c && /* @__PURE__ */ u(n, {
+			}), /* @__PURE__ */ u(n, {
 				dataTestId: "spectral-input-otp-error-message",
 				id: w,
-				message: c
+				message: T ? c : null
 			})]
 		})
 	});
@@ -417,7 +418,7 @@ var L = ({ className: e, index: n, ref: r, ...i }) => {
 		isActive: !1
 	};
 	return /* @__PURE__ */ d("div", {
-		className: t("h-12 w-10 relative z-10 flex items-center justify-center rounded-[8px] border tabular-nums transition duration-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2", a === "filled" ? "border-level-one bg-level-one" : "border-input-otp-border bg-transparent", !s && "border", s && "border-2 border-danger-400 focus-visible:outline-danger-400", l.isActive && !s && "z-10 outline-2 outline-offset-2 outline-input-otp-border--focus", l.isActive && s && "outline-2 outline-offset-2 outline-danger-400", e),
+		className: t("h-12 w-10 relative z-10 flex items-center justify-center rounded-[8px] border tabular-nums transition duration-200 focus:outline-none", a === "filled" ? "border-level-one bg-level-one" : "border-input-otp-border bg-transparent", !s && "border", s && "border-2 border-danger-400", l.isActive && !s && "z-10 border-input-otp-border--focus", l.isActive && s && "z-10 border-danger-400 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-danger-400", e),
 		"data-index": n,
 		"data-testid": "spectral-input-otp-slot",
 		"data-variant": a,

package/dist/InputOTP.js

@@ -1,3 +1,3 @@
 'use client'
-import { t as e } from "./InputOTP-DyhesOLs.js";
+import { t as e } from "./InputOTP-DLn7ja7J.js";
 export { e as InputOTP };