@spear-ai/spectral 1.9.1 → 1.10.1

package/dist/Input.js

@@ -1,188 +1,135 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { usePasswordVisibility as tt, usePrefixWidth as rt, useClearOnFocus as et } from "./Input/InputUtils.js";
-import "./Icons/AnalyzeIcon.js";
-import "./Icons/AnnotationsIcon.js";
-import "./Icons/ApprovedIcon.js";
-import "./Icons/ArrowDownIcon.js";
-import "./Icons/ArrowUpIcon.js";
-import "./Icons/BoxToolIcon.js";
-import "./Icons/CalendarIcon.js";
-import { CheckCircleIcon as ot } from "./Icons/CheckCircleIcon.js";
-import "./Icons/CheckSquareIcon.js";
-import "./Icons/CheckmarkIcon.js";
-import "./Icons/ChevronDownIcon.js";
-import "./Icons/ChevronUpIcon.js";
-import "./Icons/ClockIcon.js";
-import { CloseCircleIcon as it } from "./Icons/CloseCircleIcon.js";
-import "./Icons/CloseIcon.js";
-import "./Icons/DashboardIcon.js";
-import "./Icons/DatabaseIcon.js";
-import "./Icons/DeleteIcon.js";
-import "./Icons/DurationIcon.js";
-import "./Icons/EditIcon.js";
-import "./Icons/EmailIcon.js";
-import "./Icons/EraserIcon.js";
-import { ErrorIcon as st } from "./Icons/ErrorIcon.js";
-import { EyeClosedIcon as at } from "./Icons/EyeClosedIcon.js";
-import "./Icons/EyeClosedIcon2.js";
-import { EyeOpenIcon as pt } from "./Icons/EyeOpenIcon.js";
-import "./Icons/FileDownloadIcon.js";
-import "./Icons/GoToFirstIcon.js";
-import "./Icons/GoToLastIcon.js";
-import "./Icons/HarmonicCursorsIcon.js";
-import "./Icons/InfoIcon.js";
-import "./Icons/KeyboardIcon.js";
-import "./Icons/LabelIcon.js";
-import "./Icons/LassoIcon.js";
-import "./Icons/LineToolIcon.js";
-import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as nt } from "./Icons/LoaderIcon.js";
-import "./Icons/LocationIcon.js";
-import "./Icons/LogoutIcon.js";
-import "./Icons/MeasureIcon.js";
-import "./Icons/MessagesIcon.js";
-import "./Icons/MetadataIcon.js";
-import "./Icons/MinusIcon.js";
-import "./Icons/OntologyIcon.js";
-import "./Icons/PanelIconClose.js";
-import "./Icons/PanelIconOpen.js";
-import "./Icons/PlayIcon.js";
-import "./Icons/PlusIcon.js";
-import "./Icons/PolygonIcon.js";
-import "./Icons/ResetIcon.js";
-import "./Icons/ReviewedIcon.js";
-import "./Icons/ScissorsIcon.js";
-import "./Icons/SearchIcon.js";
-import "./Icons/SettingsIcon.js";
-import "./Icons/SortAscendingIcon.js";
-import "./Icons/SortAtoZIcon.js";
-import "./Icons/SortDescendingIcon.js";
-import "./Icons/SortZtoAIcon.js";
-import "./Icons/StackIcon.js";
-import "./Icons/StarIcon.js";
-import "./Icons/TrashIcon.js";
-import "./Icons/UndoIcon.js";
-import "./Icons/User2Icon.js";
-import "./Icons/UserIcon.js";
-import "./Icons/WarningIcon.js";
-import "./Icons/ZoomAllIcon.js";
-import "./Icons/ZoomXIcon.js";
-import "./Icons/ZoomYIcon.js";
-import { Label as lt } from "./Label.js";
-import { useFormFieldId as ct, useFormFieldState as mt, getAriaProps as dt, getInputClasses as ut, getFormFieldCSSProperties as ft, ErrorMessage as ht } from "./utils/formFieldUtils.js";
-import { cn as h } from "./utils/twUtils.js";
-import { useRef as bt, useCallback as d } from "react";
-const gt = (...a) => (p) => {
-  a.forEach((i) => {
-    i && (typeof i == "function" ? i(p) : i.current = p);
-  });
-}, xt = (a) => ({
-  date: "off",
-  email: "email",
-  number: "off",
-  password: "current-password",
-  tel: "tel",
-  text: "off",
-  url: "url",
-  "datetime-local": "off"
-})[a] || "off", Ct = ({
-  className: a,
-  clearOnFocus: p = !1,
-  disabled: i,
-  endIcon: b,
-  errorMessage: g,
-  id: k,
-  label: e,
-  labelClassName: P,
-  name: x,
-  onBlur: C,
-  onChange: n,
-  onFocus: w,
-  placeholder: R,
-  prefix: l,
-  ref: V,
-  required: v,
-  showClearButton: $ = !1,
-  startIcon: y,
-  state: s = "default",
-  suppressHydrationWarning: L = !0,
-  type: c = "text",
-  value: I = "",
-  "aria-label": M,
-  "aria-describedby": O,
-  ...j
-}) => {
-  const m = ct(k, x), N = `${m}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = mt(i, s), H = dt(s, O, v, N), E = bt(null), T = gt(V, E), { isVisible: u, toggleVisibility: W, inputType: D } = tt(), { prefixWidth: G, prefixRef: J } = rt(l), { handleFocus: z } = et(p, n ? (r) => n(r.target.value) : void 0), K = d(
-    (r) => {
-      C?.(r);
-    },
-    [C]
-  ), Q = d(
-    (r) => {
-      z(r, w);
-    },
-    [z, w]
-  ), U = d(
-    (r) => {
-      const o = r.target.value;
-      n?.(o);
-    },
-    [n]
-  ), X = d(() => {
-    const r = E.current;
-    r && (r.value = "", r.dispatchEvent(new Event("input", { bubbles: !0 })), r.focus());
-  }, []), S = $ && I.length > 0, Y = () => {
-    const r = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", o = {
-      password: () => /* @__PURE__ */ t("button", { "aria-controls": m, "aria-label": u ? `Hide ${e ?? "password"}` : `Show ${e ?? "password"}`, "aria-pressed": u, className: r, "data-testid": "spectral-input-password-toggle", onClick: W, type: "button", children: u ? /* @__PURE__ */ t(at, { size: 22 }) : /* @__PURE__ */ t(pt, { size: 22 }) }),
-      clear: () => /* @__PURE__ */ t("button", { "aria-label": `Clear ${e ?? "input"}`, className: r, "data-testid": "spectral-input-clear-button", onClick: X, type: "button", children: /* @__PURE__ */ t(it, { size: 24 }) }),
-      loading: () => /* @__PURE__ */ t("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-loading-icon", children: /* @__PURE__ */ t(nt, { size: 24 }) }),
-      error: () => /* @__PURE__ */ t("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-error-icon", children: /* @__PURE__ */ t(st, { size: 24 }) }),
-      success: () => /* @__PURE__ */ t("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-success-icon", children: /* @__PURE__ */ t(ot, { size: 24 }) })
-    };
-    return b ? /* @__PURE__ */ t("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", children: b }) : c === "password" ? o.password() : S ? o.clear() : A ? o.loading() : s === "success" ? o.success() : s === "error" ? o.error() : null;
-  }, Z = () => y || null, _ = h(ut(s, a), "[text-indent:var(--prefix-width)]", S && "pr-10"), q = h("pointer-events-none absolute inset-y-0 left-4 flex items-center text-base text-input-text-prefix opacity-100 peer-disabled:opacity-50");
-  return /* @__PURE__ */ f("div", { className: "w-full space-y-1.5", "data-testid": "spectral-input-container", children: [
-    e && /* @__PURE__ */ t(lt, { className: h("mb-2 block", P, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), "data-testid": "spectral-input-label", htmlFor: m, children: e }),
-    /* @__PURE__ */ f("div", { className: "relative", "data-testid": "spectral-input-wrapper", children: [
-      /* @__PURE__ */ f("div", { className: "relative", children: [
-        Z(),
-        l && /* @__PURE__ */ t("span", { ref: J, className: q, children: l }),
-        /* @__PURE__ */ t(
-          "input",
-          {
-            "aria-label": M ?? e,
-            autoComplete: xt(c),
-            className: _,
-            "data-state": s,
-            "data-testid": "spectral-input",
-            disabled: F,
-            id: m,
-            name: x,
-            onBlur: K,
-            onChange: U,
-            onFocus: Q,
-            placeholder: R ?? e,
-            ref: T,
-            required: v,
-            style: ft({
-              "--prefix-width": l ? `${G}px` : "0"
-            }),
-            suppressHydrationWarning: L,
-            type: c === "password" ? D : c,
-            value: I,
-            ...H,
-            ...j
-          }
-        ),
-        Y()
-      ] }),
-      B && g && /* @__PURE__ */ t(ht, { dataTestId: "spectral-input-error-message", id: N, message: g })
-    ] })
-  ] });
-};
-Ct.displayName = "Input";
-export {
-  Ct as Input
+import { CheckCircleIcon as e } from "./Icons/CheckCircleIcon.js";
+import { CloseCircleIcon as t } from "./Icons/CloseCircleIcon.js";
+import { ErrorIcon as n } from "./Icons/ErrorIcon.js";
+import { EyeClosedIcon as r } from "./Icons/EyeClosedIcon.js";
+import { EyeOpenIcon as i } from "./Icons/EyeOpenIcon.js";
+import { LoaderIcon as a } from "./Icons/LoaderIcon.js";
+import { t as o } from "./twUtils-VNWgstKL.js";
+import { ErrorMessage as s, getAriaProps as c, getFormFieldCSSProperties as l, getInputClasses as u, useFormFieldId as d, useFormFieldState as f } from "./utils/formFieldUtils.js";
+import { Label as ee } from "./Label.js";
+import { useClearOnFocus as te, usePasswordVisibility as p, usePrefixWidth as m } from "./Input/InputUtils.js";
+import { useCallback as h, useRef as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+var y = (...e) => (t) => {
+	e.forEach((e) => {
+		e && (typeof e == "function" ? e(t) : e.current = t);
+	});
+}, ne = (e) => ({
+	date: "off",
+	email: "email",
+	number: "off",
+	password: "current-password",
+	tel: "tel",
+	text: "off",
+	url: "url",
+	"datetime-local": "off"
+})[e] || "off", b = ({ className: b, clearOnFocus: x = !1, disabled: S, endIcon: C, errorMessage: w, id: re, label: T, labelClassName: E, name: D, onBlur: O, onChange: k, onFocus: A, placeholder: j, prefix: M, ref: N, required: P, showClearButton: F = !1, startIcon: I, state: L = "default", suppressHydrationWarning: R = !0, type: z = "text", value: B = "", "aria-label": V, "aria-describedby": H, ...U }) => {
+	let W = d(re, D), G = `${W}-error`, { isDisabled: K, isLoading: q, isInvalid: J } = f(S, L), Y = c(L, H, P, G), X = g(null), ie = y(N, X), { isVisible: Z, toggleVisibility: ae, inputType: oe } = p(), { prefixWidth: se, prefixRef: ce } = m(M), { handleFocus: Q } = te(x, k ? (e) => k(e.target.value) : void 0), le = h((e) => {
+		O?.(e);
+	}, [O]), ue = h((e) => {
+		Q(e, A);
+	}, [Q, A]), de = h((e) => {
+		let t = e.target.value;
+		k?.(t);
+	}, [k]), fe = h(() => {
+		let e = X.current;
+		e && (e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+	}, []), $ = F && B.length > 0, pe = () => {
+		let o = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", s = {
+			password: () => /* @__PURE__ */ _("button", {
+				"aria-controls": W,
+				"aria-label": Z ? `Hide ${T ?? "password"}` : `Show ${T ?? "password"}`,
+				"aria-pressed": Z,
+				className: o,
+				"data-testid": "spectral-input-password-toggle",
+				onClick: ae,
+				type: "button",
+				children: _(Z ? r : i, { size: 22 })
+			}),
+			clear: () => /* @__PURE__ */ _("button", {
+				"aria-label": String(`Clear ${T ?? "input"}`),
+				className: o,
+				"data-testid": "spectral-input-clear-button",
+				onClick: fe,
+				type: "button",
+				children: /* @__PURE__ */ _(t, { size: 24 })
+			}),
+			loading: () => /* @__PURE__ */ _("div", {
+				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+				"data-testid": "spectral-input-loading-icon",
+				children: /* @__PURE__ */ _(a, { size: 24 })
+			}),
+			error: () => /* @__PURE__ */ _("div", {
+				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
+				"data-testid": "spectral-input-error-icon",
+				children: /* @__PURE__ */ _(n, { size: 24 })
+			}),
+			success: () => /* @__PURE__ */ _("div", {
+				className: "right-4 absolute top-1/2 -translate-y-1/2 text-success-400",
+				"data-testid": "spectral-input-success-icon",
+				children: /* @__PURE__ */ _(e, { size: 24 })
+			})
+		};
+		return C ? /* @__PURE__ */ _("div", {
+			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+			children: C
+		}) : z === "password" ? s.password() : $ ? s.clear() : q ? s.loading() : L === "success" ? s.success() : L === "error" ? s.error() : null;
+	}, me = () => I || null, he = z === "number" || z === "date" || z === "datetime-local", ge = o(u(L, b), "[text-indent:var(--prefix-width)]", $ && "pr-10", he && "tabular-nums"), _e = o("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__ */ v("div", {
+		className: "space-y-1.5 w-full",
+		"data-testid": "spectral-input-container",
+		children: [T && /* @__PURE__ */ _(ee, {
+			className: o("mb-2 block", E, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
+			"data-testid": "spectral-input-label",
+			htmlFor: W,
+			children: T
+		}), /* @__PURE__ */ v("div", {
+			className: "relative",
+			"data-testid": "spectral-input-wrapper",
+			children: [/* @__PURE__ */ v("div", {
+				className: "relative",
+				children: [
+					me(),
+					M && /* @__PURE__ */ _("span", {
+						ref: ce,
+						className: _e,
+						children: M
+					}),
+					/* @__PURE__ */ _("input", {
+						"aria-label": V ?? T,
+						autoComplete: ne(z),
+						className: ge,
+						"data-state": L,
+						"data-testid": "spectral-input",
+						disabled: K,
+						id: W,
+						name: D,
+						onBlur: le,
+						onChange: de,
+						onFocus: ue,
+						placeholder: j ?? T,
+						ref: ie,
+						required: P,
+						style: l({ "--prefix-width": M ? `${se}px` : "0" }),
+						suppressHydrationWarning: R,
+						type: z === "password" ? oe : z,
+						value: B,
+						...Y,
+						...U
+					}),
+					pe()
+				]
+			}), J && w && /* @__PURE__ */ _(s, {
+				dataTestId: "spectral-input-error-message",
+				id: G,
+				message: w
+			})]
+		})]
+	});
 };
+b.displayName = "Input";
+//#endregion
+export { b as Input };

package/dist/InputNumeric.d.ts

@@ -0,0 +1,14 @@
+import { InputProps } from '../Input/Input';
+import { ReactElement } from 'react';
+export type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {
+    allowDecimal?: boolean;
+    allowNegative?: boolean;
+    locale?: string;
+    onChange?: (value: string) => void;
+    value?: string;
+};
+export declare const InputNumeric: {
+    ({ allowDecimal, allowNegative, className, locale, max, min, onChange, onKeyDown, onPaste, step, value, ...props }: InputNumericProps): ReactElement;
+    displayName: string;
+};
+//# sourceMappingURL=InputNumeric.d.ts.map

package/dist/InputNumeric.js

@@ -0,0 +1,137 @@
+"use client";
+import "./styles/main.css";
+import { t as e } from "./twUtils-VNWgstKL.js";
+import { Input as t } from "./Input.js";
+import { useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/InputNumeric/InputNumeric.tsx
+var i = /^\d$/, a = new Set([
+	"e",
+	"E",
+	"+"
+]), o = new Set([
+	"Backspace",
+	"Delete",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"Tab",
+	"Enter",
+	"Escape"
+]), s = (e) => {
+	try {
+		return new Intl.NumberFormat(e).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? ".";
+	} catch {
+		return ".";
+	}
+}, c = (e, t) => t === "." ? e : e.replaceAll(t, "."), l = (e, t, n, r) => {
+	if (!e) return "";
+	let i = c(e, r).replace(/[^\d.-]/g, "");
+	if (n ? (i = i.replace(/(?!^)-/g, ""), i.startsWith("--") && (i = `-${i.replace(/-/g, "")}`)) : i = i.replace(/-/g, ""), !t) i = i.replace(/\./g, "");
+	else {
+		let e = i.indexOf(".");
+		e >= 0 && (i = `${i.slice(0, e + 1)}${i.slice(e + 1).replace(/\./g, "")}`);
+	}
+	return i;
+}, u = (e) => {
+	if (e.selectionStart === null || e.selectionEnd === null) return !e.value.includes(".");
+	let t = e.value.slice(e.selectionStart, e.selectionEnd);
+	return !e.value.includes(".") || t.includes(".");
+}, d = (e) => {
+	if (e.selectionStart === null || e.selectionEnd === null) return e.value.length === 0;
+	let t = e.selectionStart === 0, n = e.value.slice(e.selectionStart, e.selectionEnd);
+	return t && (!e.value.includes("-") || n.includes("-"));
+}, f = (e) => {
+	if (e == null || e === "") return;
+	let t = typeof e == "number" ? e : Number.parseFloat(e);
+	return Number.isFinite(t) ? t : void 0;
+}, p = (e) => {
+	let t = e.toString();
+	return t.includes(".") ? t.split(".")[1]?.length ?? 0 : 0;
+}, m = (e, t) => {
+	if (t <= 0) return e;
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+}, h = ({ allowDecimal: h = !0, allowNegative: g = !1, className: _, locale: v, max: y, min: b, onChange: x, onKeyDown: S, onPaste: C, step: w, value: T = "", ...E }) => {
+	let D = s(v), O = f(b), k = f(y), A = f(w), j = A && A > 0 ? A : 1, M = O ?? (g ? void 0 : 0), N = n((e) => {
+		if (S?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && !(e.metaKey || e.ctrlKey || e.altKey)) {
+			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = e.key === "ArrowUp" ? 1 : -1, n = c(T, D), r = Number.parseFloat(n), i = (Number.isFinite(r) ? r : M ?? 0) + t * j;
+				M !== void 0 && (i = Math.max(M, i)), k !== void 0 && (i = Math.min(k, i)), h || (i = Math.trunc(i));
+				let a = h ? p(j) : 0, o = m(i, a), s = Object.is(o, -0) ? 0 : o, u = a > 0 ? s.toFixed(a).replace(/\.?0+$/, "") : s.toString();
+				x?.(l(u, h, g, D));
+				return;
+			}
+			if (!o.has(e.key) && !i.test(e.key)) {
+				if (a.has(e.key)) {
+					e.preventDefault();
+					return;
+				}
+				if (e.key === "." || e.key === D) {
+					(!h || !u(e.currentTarget)) && e.preventDefault();
+					return;
+				}
+				if (e.key === "-") {
+					(!g || !d(e.currentTarget)) && e.preventDefault();
+					return;
+				}
+				e.preventDefault();
+			}
+		}
+	}, [
+		h,
+		g,
+		D,
+		M,
+		x,
+		S,
+		k,
+		j,
+		T
+	]), P = n((e) => {
+		if (C?.(e), e.defaultPrevented) return;
+		let t = e.clipboardData.getData("text"), n = l(t, h, g, D);
+		if (c(t, D) === n) return;
+		e.preventDefault();
+		let r = e.currentTarget, i = r.selectionStart ?? r.value.length, a = r.selectionEnd ?? r.value.length, o = l(`${r.value.slice(0, i)}${n}${r.value.slice(a)}`, h, g, D);
+		x?.(o);
+	}, [
+		h,
+		g,
+		D,
+		x,
+		C
+	]), F = n((e) => {
+		x?.(l(e, h, g, D));
+	}, [
+		h,
+		g,
+		D,
+		x
+	]), I = h ? "decimal" : "numeric", L = h ? "[0-9]*[.]?[0-9]*" : "[0-9]*", R = c(T, D), z = R === "" || R === "-" || R === "." ? void 0 : Number.parseFloat(R);
+	return /* @__PURE__ */ r(t, {
+		...E,
+		"aria-valuemax": k,
+		"aria-valuemin": M,
+		"aria-valuenow": Number.isFinite(z) ? z : void 0,
+		className: e("tabular-nums", _),
+		inputMode: I,
+		max: y,
+		min: b,
+		onChange: F,
+		onKeyDown: N,
+		onPaste: P,
+		pattern: L,
+		role: "spinbutton",
+		step: w,
+		type: "text",
+		value: T
+	});
+};
+h.displayName = "InputNumeric";
+//#endregion
+export { h as InputNumeric };