@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/IconsAnimated/PanelLeftOpenIcon.js

@@ -1,39 +1,69 @@
 "use client";
 import "../styles/main.css";
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { cn as p } from "../utils/twUtils.js";
-import { useRef as f, useImperativeHandle as x, useCallback as i } from "react";
-import { u as v } from "../use-animation-DhEPRwZ3.js";
-import { m as A } from "../proxy-CO_-Vget.js";
-const w = {
-  times: [0, 0.4, 1],
-  duration: 0.5
-}, g = {
-  normal: { x: 0 },
-  animate: { x: [0, 1.5, 0] }
-}, R = ({ onMouseEnter: o, onMouseLeave: s, className: m, size: a = 28, ref: l, ...c }) => {
-  const t = v(), n = f(!1);
-  x(l, () => (n.current = !0, {
-    startAnimation: () => t.start("animate"),
-    stopAnimation: () => t.start("normal")
-  }));
-  const u = i(
-    (r) => {
-      n.current ? o?.(r) : t.start("animate");
-    },
-    [t, o]
-  ), d = i(
-    (r) => {
-      n.current ? s?.(r) : t.start("normal");
-    },
-    [t, s]
-  );
-  return /* @__PURE__ */ e("div", { className: p(m), onMouseEnter: u, onMouseLeave: d, ...c, children: /* @__PURE__ */ h("svg", { fill: "none", height: a, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: a, xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ e("rect", { height: "18", rx: "2", width: "18", x: "3", y: "3" }),
-    /* @__PURE__ */ e("path", { d: "M9 3v18" }),
-    /* @__PURE__ */ e(A.path, { animate: t, d: "m14 9 3 3-3 3", transition: w, variants: g })
-  ] }) });
-};
-export {
-  R as PanelLeftOpenIcon
+import { t as e } from "../twUtils-VNWgstKL.js";
+import { t } from "../proxy-Dn10Pl_g.js";
+import { t as n } from "../use-animation-CBUDycyW.js";
+import { useCallback as r, useImperativeHandle as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/IconsAnimated/PanelLeftOpenIcon.tsx
+var c = {
+	times: [
+		0,
+		.4,
+		1
+	],
+	duration: .5
+}, l = {
+	normal: { x: 0 },
+	animate: { x: [
+		0,
+		1.5,
+		0
+	] }
+}, u = ({ onMouseEnter: u, onMouseLeave: d, className: f, size: p = 28, ref: m, ...h }) => {
+	let g = n(), _ = a(!1);
+	i(m, () => (_.current = !0, {
+		startAnimation: () => g.start("animate"),
+		stopAnimation: () => g.start("normal")
+	}));
+	let v = r((e) => {
+		_.current ? u?.(e) : g.start("animate");
+	}, [g, u]), y = r((e) => {
+		_.current ? d?.(e) : g.start("normal");
+	}, [g, d]);
+	return /* @__PURE__ */ o("div", {
+		className: e(f),
+		onMouseEnter: v,
+		onMouseLeave: y,
+		...h,
+		children: /* @__PURE__ */ s("svg", {
+			fill: "none",
+			height: p,
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			width: p,
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ o("rect", {
+					height: "18",
+					rx: "2",
+					width: "18",
+					x: "3",
+					y: "3"
+				}),
+				/* @__PURE__ */ o("path", { d: "M9 3v18" }),
+				/* @__PURE__ */ o(t.path, {
+					animate: g,
+					d: "m14 9 3 3-3 3",
+					transition: c,
+					variants: l
+				})
+			]
+		})
+	});
 };
+//#endregion
+export { u as PanelLeftOpenIcon };

package/dist/IconsAnimated.js

@@ -1,6 +1,3 @@
-import { PanelLeftOpenIcon as n } from "./IconsAnimated/PanelLeftOpenIcon.js";
-import { PanelLeftCloseIcon as r } from "./IconsAnimated/PanelLeftCloseIcon.js";
-export {
-  r as PanelLeftCloseIcon,
-  n as PanelLeftOpenIcon
-};
+import { PanelLeftOpenIcon as e } from "./IconsAnimated/PanelLeftOpenIcon.js";
+import { PanelLeftCloseIcon as t } from "./IconsAnimated/PanelLeftCloseIcon.js";
+export { t as PanelLeftCloseIcon, e as PanelLeftOpenIcon };

package/dist/Input/InputUtils.js

@@ -1,54 +1,53 @@
 "use client";
-import { useState as u, useCallback as f, useRef as l, useLayoutEffect as d } from "react";
-const h = (t) => {
-  const [r, s] = u(0), e = l(null);
-  return d(() => {
-    if (t && e.current) {
-      const n = () => {
-        e.current && s(e.current.offsetWidth + 2);
-      };
-      n();
-      const i = new ResizeObserver(n);
-      return i.observe(e.current), () => {
-        i.disconnect();
-      };
-    }
-    s(0);
-  }, [t]), { prefixWidth: r, prefixRef: e };
-}, p = () => {
-  const [t, r] = u(!1), s = f(() => {
-    r((e) => !e);
-  }, []);
-  return {
-    inputType: t ? "text" : "password",
-    isVisible: t,
-    toggleVisibility: s
-  };
-}, v = (t, r) => {
-  const [s, e] = u(!1), n = f(
-    (i, o) => {
-      if (t && !s) {
-        const c = i.target;
-        if (c.value = "", e(!0), r) {
-          const a = {
-            ...i,
-            target: c,
-            currentTarget: c
-          };
-          r(a);
-        }
-      }
-      o && o(i);
-    },
-    [t, s, r]
-  );
-  return {
-    hasBeenFocused: s,
-    handleFocus: n
-  };
-};
-export {
-  v as useClearOnFocus,
-  p as usePasswordVisibility,
-  h as usePrefixWidth
+import { useCallback as e, useLayoutEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/Input/InputUtils.tsx
+var i = (e) => {
+	let [i, a] = r(0), o = n(null);
+	return t(() => {
+		if (e && o.current) {
+			let e = () => {
+				o.current && a(o.current.offsetWidth + 2);
+			};
+			e();
+			let t = new ResizeObserver(e);
+			return t.observe(o.current), () => {
+				t.disconnect();
+			};
+		}
+		a(0);
+	}, [e]), {
+		prefixWidth: i,
+		prefixRef: o
+	};
+}, a = () => {
+	let [t, n] = r(!1), i = e(() => {
+		n((e) => !e);
+	}, []);
+	return {
+		inputType: t ? "text" : "password",
+		isVisible: t,
+		toggleVisibility: i
+	};
+}, o = (t, n) => {
+	let [i, a] = r(!1);
+	return {
+		hasBeenFocused: i,
+		handleFocus: e((e, r) => {
+			if (t && !i) {
+				let t = e.target;
+				t.value = "", a(!0), n && n({
+					...e,
+					target: t,
+					currentTarget: t
+				});
+			}
+			r && r(e);
+		}, [
+			t,
+			i,
+			n
+		])
+	};
 };
+//#endregion
+export { o as useClearOnFocus, a as usePasswordVisibility, i as usePrefixWidth };

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 ee } from "./Icons/LoaderIcon.js";
+import { t as a } from "./twUtils-VNWgstKL.js";
+import { ErrorMessage as o, getAriaProps as s, getFormFieldCSSProperties as c, getInputClasses as l, useFormFieldId as u, useFormFieldState as d } from "./utils/formFieldUtils.js";
+import { Label as f } from "./Label.js";
+import { useClearOnFocus as te, usePasswordVisibility as ne, usePrefixWidth as p } from "./Input/InputUtils.js";
+import { useCallback as m, useRef as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+var v = (...e) => (t) => {
+	e.forEach((e) => {
+		e && (typeof e == "function" ? e(t) : e.current = t);
+	});
+}, y = (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 = u(re, D), G = `${W}-error`, { isDisabled: K, isLoading: q, isInvalid: J } = d(S, L), Y = s(L, H, P, G), X = h(null), ie = v(N, X), { isVisible: Z, toggleVisibility: ae, inputType: oe } = ne(), { prefixWidth: se, prefixRef: ce } = p(M), { handleFocus: Q } = te(x, k ? (e) => k(e.target.value) : void 0), le = m((e) => {
+		O?.(e);
+	}, [O]), ue = m((e) => {
+		Q(e, A);
+	}, [Q, A]), de = m((e) => {
+		let t = e.target.value;
+		k?.(t);
+	}, [k]), fe = m(() => {
+		let e = X.current;
+		e && (e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+	}, []), $ = F && B.length > 0, pe = () => {
+		let a = "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__ */ g("button", {
+				"aria-controls": W,
+				"aria-label": Z ? `Hide ${T ?? "password"}` : `Show ${T ?? "password"}`,
+				"aria-pressed": Z,
+				className: a,
+				"data-testid": "spectral-input-password-toggle",
+				onClick: ae,
+				type: "button",
+				children: g(Z ? r : i, { size: 22 })
+			}),
+			clear: () => /* @__PURE__ */ g("button", {
+				"aria-label": String(`Clear ${T ?? "input"}`),
+				className: a,
+				"data-testid": "spectral-input-clear-button",
+				onClick: fe,
+				type: "button",
+				children: /* @__PURE__ */ g(t, { size: 24 })
+			}),
+			loading: () => /* @__PURE__ */ g("div", {
+				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+				"data-testid": "spectral-input-loading-icon",
+				children: /* @__PURE__ */ g(ee, { size: 24 })
+			}),
+			error: () => /* @__PURE__ */ g("div", {
+				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
+				"data-testid": "spectral-input-error-icon",
+				children: /* @__PURE__ */ g(n, { size: 24 })
+			}),
+			success: () => /* @__PURE__ */ g("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 })
+			})
+		};
+		return C ? /* @__PURE__ */ g("div", {
+			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+			children: C
+		}) : z === "password" ? o.password() : $ ? o.clear() : q ? o.loading() : L === "success" ? o.success() : L === "error" ? o.error() : null;
+	}, me = () => I || null, he = a(l(L, b), "[text-indent:var(--prefix-width)]", $ && "pr-10"), ge = a("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", {
+		className: "space-y-1.5 w-full",
+		"data-testid": "spectral-input-container",
+		children: [T && /* @__PURE__ */ g(f, {
+			className: a("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__ */ _("div", {
+			className: "relative",
+			"data-testid": "spectral-input-wrapper",
+			children: [/* @__PURE__ */ _("div", {
+				className: "relative",
+				children: [
+					me(),
+					M && /* @__PURE__ */ g("span", {
+						ref: ce,
+						className: ge,
+						children: M
+					}),
+					/* @__PURE__ */ g("input", {
+						"aria-label": V ?? T,
+						autoComplete: y(z),
+						className: he,
+						"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: c({ "--prefix-width": M ? `${se}px` : "0" }),
+						suppressHydrationWarning: R,
+						type: z === "password" ? oe : z,
+						value: B,
+						...Y,
+						...U
+					}),
+					pe()
+				]
+			}), J && w && /* @__PURE__ */ g(o, {
+				dataTestId: "spectral-input-error-message",
+				id: G,
+				message: w
+			})]
+		})]
+	});
 };
+b.displayName = "Input";
+//#endregion
+export { b as Input };