@spear-ai/spectral 1.4.2 → 1.4.3

package/dist/HoverCard.js

@@ -3,7 +3,7 @@ import "./styles/main.css";
 import { jsx as i } from "react/jsx-runtime";
 import * as s from "react";
 import { createContext as F, useContext as I } from "react";
-import { u as B, c as U, b as C, P as $, a as W } from "./index-BhufZRa2.js";
+import { u as B, c as U, b as h, P as $, a as W } from "./index-BhufZRa2.js";
 import { c as O, R as z, A as G, C as K, a as j } from "./index-NzygPVvJ.js";
 import { P as V, D as q } from "./index-B2oBi8ng.js";
 import { P as T } from "./index-6Abv_Flm.js";
@@ -19,7 +19,7 @@ var H, x = "HoverCard", [E] = U(x, [
     onOpenChange: c,
     openDelay: u = 700,
     closeDelay: p = 300
-  } = e, d = R(o), l = s.useRef(0), f = s.useRef(0), m = s.useRef(!1), v = s.useRef(!1), [h, t] = B({
+  } = e, d = R(o), l = s.useRef(0), f = s.useRef(0), m = s.useRef(!1), v = s.useRef(!1), [C, t] = B({
     prop: a,
     defaultProp: n ?? !1,
     onChange: c,
@@ -35,7 +35,7 @@ var H, x = "HoverCard", [E] = U(x, [
     Q,
     {
       scope: o,
-      open: h,
+      open: C,
       onOpenChange: t,
       onOpen: g,
       onClose: S,
@@ -56,11 +56,11 @@ var _ = "HoverCardTrigger", D = s.forwardRef(
         "data-state": n.open ? "open" : "closed",
         ...a,
         ref: o,
-        onPointerEnter: C(e.onPointerEnter, w(n.onOpen)),
-        onPointerLeave: C(e.onPointerLeave, w(n.onClose)),
-        onFocus: C(e.onFocus, n.onOpen),
-        onBlur: C(e.onBlur, n.onClose),
-        onTouchStart: C(e.onTouchStart, (u) => u.preventDefault())
+        onPointerEnter: h(e.onPointerEnter, w(n.onOpen)),
+        onPointerLeave: h(e.onPointerLeave, w(n.onClose)),
+        onFocus: h(e.onFocus, n.onOpen),
+        onBlur: h(e.onBlur, n.onClose),
+        onTouchStart: h(e.onTouchStart, (u) => u.preventDefault())
       }
     ) });
   }
@@ -81,8 +81,8 @@ var P = "HoverCardContent", L = s.forwardRef(
       {
         "data-state": c.open ? "open" : "closed",
         ...n,
-        onPointerEnter: C(e.onPointerEnter, w(c.onOpen)),
-        onPointerLeave: C(e.onPointerLeave, w(c.onClose)),
+        onPointerEnter: h(e.onPointerEnter, w(c.onOpen)),
+        onPointerLeave: h(e.onPointerLeave, w(c.onClose)),
         ref: o
       }
     ) });
@@ -97,7 +97,7 @@ var Z = s.forwardRef((e, o) => {
     onFocusOutside: c,
     onInteractOutside: u,
     ...p
-  } = e, d = b(P, r), l = R(r), f = s.useRef(null), m = W(o, f), [v, h] = s.useState(!1);
+  } = e, d = b(P, r), l = R(r), f = s.useRef(null), m = W(o, f), [v, C] = s.useState(!1);
   return s.useEffect(() => {
     if (v) {
       const t = document.body;
@@ -108,7 +108,7 @@ var Z = s.forwardRef((e, o) => {
   }, [v]), s.useEffect(() => {
     if (f.current) {
       const t = () => {
-        h(!1), d.isPointerDownOnContentRef.current = !1, setTimeout(() => {
+        C(!1), d.isPointerDownOnContentRef.current = !1, setTimeout(() => {
           document.getSelection()?.toString() !== "" && (d.hasSelectionRef.current = !0);
         });
       };
@@ -126,7 +126,7 @@ var Z = s.forwardRef((e, o) => {
       onInteractOutside: u,
       onEscapeKeyDown: a,
       onPointerDownOutside: n,
-      onFocusOutside: C(c, (t) => {
+      onFocusOutside: h(c, (t) => {
         t.preventDefault();
       }),
       onDismiss: d.onDismiss,
@@ -135,8 +135,8 @@ var Z = s.forwardRef((e, o) => {
         {
           ...l,
           ...p,
-          onPointerDown: C(p.onPointerDown, (t) => {
-            t.currentTarget.contains(t.target) && h(!0), d.hasSelectionRef.current = !1, d.isPointerDownOnContentRef.current = !0;
+          onPointerDown: h(p.onPointerDown, (t) => {
+            t.currentTarget.contains(t.target) && C(!0), d.hasSelectionRef.current = !1, d.isPointerDownOnContentRef.current = !0;
           }),
           ref: m,
           style: {
@@ -172,38 +172,39 @@ function oe(e) {
   return o;
 }
 var re = N, ne = D, ae = A, se = L;
-const M = F({}), ie = ({ side: e, sideOffset: o, align: r, alignOffset: a, collisionBoundary: n, collisionPadding: c, width: u, ...p }) => /* @__PURE__ */ i(M.Provider, { value: { side: e, sideOffset: o, align: r, alignOffset: a, collisionBoundary: n, collisionPadding: c, width: u }, children: /* @__PURE__ */ i(re, { "data-slot": "hover-card", ...p }) });
+const M = F({}), ie = ({ align: e, alignOffset: o, collisionBoundary: r, collisionPadding: a, side: n, sideOffset: c, width: u, ...p }) => /* @__PURE__ */ i(M.Provider, { value: { side: n, sideOffset: c, align: e, alignOffset: o, collisionBoundary: r, collisionPadding: a, width: u }, children: /* @__PURE__ */ i(re, { "data-slot": "hover-card", "data-testid": "spectral-hover-card", ...p }) });
 ie.displayName = "HoverCard";
-const ce = ({ ...e }) => /* @__PURE__ */ i(ne, { "data-slot": "hover-card-trigger", ...e });
+const ce = ({ ...e }) => /* @__PURE__ */ i(ne, { "data-slot": "hover-card-trigger", "data-testid": "spectral-hover-card-trigger", ...e });
 ce.displayName = "HoverCardTrigger";
 const de = ({
-  className: e,
-  align: o,
-  sideOffset: r,
-  side: a,
-  width: n,
-  alignOffset: c,
-  collisionBoundary: u,
-  collisionPadding: p,
+  align: e,
+  alignOffset: o,
+  className: r,
+  collisionBoundary: a,
+  collisionPadding: n,
+  side: c,
+  sideOffset: u,
+  width: p,
   ...d
 }) => {
-  const l = I(M), f = o ?? l.align ?? "center", m = r ?? l.sideOffset ?? 4, v = a ?? l.side ?? "bottom", h = n ?? l.width ?? 380, t = c ?? l.alignOffset, g = u ?? l.collisionBoundary, S = p ?? l.collisionPadding;
+  const l = I(M), f = e ?? l.align ?? "center", m = u ?? l.sideOffset ?? 4, v = c ?? l.side ?? "bottom", C = p ?? l.width ?? 380, t = o ?? l.alignOffset, g = a ?? l.collisionBoundary, S = n ?? l.collisionPadding;
   return /* @__PURE__ */ i(ae, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ i(
     se,
     {
-      "data-slot": "hover-card-content",
       align: f,
-      side: v,
-      sideOffset: m,
       alignOffset: t,
-      collisionBoundary: g,
-      collisionPadding: S,
       className: J(
         "bg-popover-bg text-text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-hover-card-content-transform-origin] rounded-lg shadow-lg p-5 outline-none",
-        e
+        r
       ),
+      collisionBoundary: g,
+      collisionPadding: S,
+      "data-slot": "hover-card-content",
+      "data-testid": "spectral-hover-card-content",
+      side: v,
+      sideOffset: m,
       style: {
-        width: typeof h == "number" ? `${h}px` : h === "trigger-width" ? "var(--radix-hover-card-trigger-width)" : "fit-content"
+        width: typeof C == "number" ? `${C}px` : C === "trigger-width" ? "var(--radix-hover-card-trigger-width)" : "fit-content"
       },
       ...d
     }

package/dist/Input.js

@@ -1,7 +1,7 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { usePasswordVisibility as tt, usePrefixWidth as rt, useClearOnFocus as et } from "./Input/InputUtils.js";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { usePasswordVisibility as tt, usePrefixWidth as et, useClearOnFocus as rt } from "./Input/InputUtils.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -23,7 +23,7 @@ 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 nt } from "./Icons/EyeOpenIcon.js";
+import { EyeOpenIcon as pt } from "./Icons/EyeOpenIcon.js";
 import "./Icons/GoToFirstIcon.js";
 import "./Icons/GoToLastIcon.js";
 import "./Icons/HarmonicCursorsIcon.js";
@@ -33,7 +33,7 @@ import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
 import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as pt } from "./Icons/LoaderIcon.js";
+import { LoaderIcon as nt } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
 import "./Icons/MessagesIcon.js";
@@ -60,7 +60,7 @@ import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { Label as lt } from "./Label.js";
-import { useFormFieldId as ct, getAriaProps as mt, getInputClasses as ut, useFormFieldState as dt, getFormFieldCSSProperties as ft, ErrorMessage as ht } from "./utils/formFieldUtils.js";
+import { useFormFieldId as ct, getAriaProps as mt, getInputClasses as dt, useFormFieldState as ut, getFormFieldCSSProperties as ft, ErrorMessage as ht } from "./utils/formFieldUtils.js";
 import { cn as f } from "./utils/twUtils.js";
 import { forwardRef as bt, useRef as xt, useCallback as c } from "react";
 const gt = (m) => ({
@@ -77,92 +77,92 @@ const gt = (m) => ({
     className: m,
     clearOnFocus: h = !1,
     disabled: k,
-    errorMessage: b,
+    endIcon: b,
+    errorMessage: x,
     id: P,
-    label: e,
+    label: r,
     labelClassName: R,
-    name: x,
-    onBlur: g,
+    name: g,
+    onBlur: C,
     onChange: a,
-    onFocus: C,
+    onFocus: w,
     placeholder: S,
-    prefix: n,
-    showClearButton: V = !1,
-    suppressHydrationWarning: $ = !0,
-    state: i = "default",
-    type: p = "text",
-    value: w = "",
+    prefix: p,
     required: v,
+    showClearButton: V = !1,
     startIcon: y,
-    endIcon: I,
+    state: i = "default",
+    suppressHydrationWarning: $ = !0,
+    type: n = "text",
+    value: I = "",
     "aria-label": L,
     "aria-describedby": M,
     ...O
   }, j) => {
-    const l = ct(P, x), N = `${l}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = dt(k, i), H = mt(i, v, N, M), W = xt(null), s = j || W, { isVisible: u, toggleVisibility: D, inputType: T } = tt(), { prefixWidth: G, prefixRef: J } = rt(n), { handleFocus: E } = et(h, a ? (r) => a(r.target.value) : void 0), K = c(
-      (r) => {
-        g?.(r);
+    const l = ct(P, g), N = `${l}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = ut(k, i), H = mt(i, M, v, N), T = xt(null), s = j || T, { isVisible: d, toggleVisibility: W, inputType: D } = tt(), { prefixWidth: G, prefixRef: J } = et(p), { handleFocus: E } = rt(h, a ? (e) => a(e.target.value) : void 0), K = c(
+      (e) => {
+        C?.(e);
       },
-      [g]
+      [C]
     ), Q = c(
-      (r) => {
-        E(r, C);
+      (e) => {
+        E(e, w);
       },
-      [E, C]
+      [E, w]
     ), U = c(
-      (r) => {
-        const o = r.target.value;
+      (e) => {
+        const o = e.target.value;
         a?.(o);
       },
       [a]
     ), X = c(() => {
       s.current && (s.current.value = "", s.current.dispatchEvent(new Event("input", { bubbles: !0 })), s.current.focus());
-    }, [s]), z = V && w.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", { className: r, type: "button", onClick: D, "aria-label": u ? `Hide ${e}` : `Show ${e}`, "aria-pressed": u, "aria-controls": l, "data-testid": "input-password-toggle", children: u ? /* @__PURE__ */ t(at, { size: 22 }) : /* @__PURE__ */ t(nt, { size: 22 }) }),
-        clear: () => /* @__PURE__ */ t("button", { className: r, type: "button", onClick: X, "aria-label": `Clear ${e}`, "data-testid": "input-clear-button", children: /* @__PURE__ */ t(it, { size: 24 }) }),
-        loading: () => /* @__PURE__ */ t("div", { className: "absolute right-4 top-1/2 -translate-y-1/2", "data-testid": "input-loading-icon", children: /* @__PURE__ */ t(pt, { size: 24 }) }),
-        error: () => /* @__PURE__ */ t("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-danger-400", "data-testid": "input-error-icon", children: /* @__PURE__ */ t(st, { size: 24 }) }),
-        success: () => /* @__PURE__ */ t("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-success-400", "data-testid": "input-success-icon", children: /* @__PURE__ */ t(ot, { size: 24 }) })
+    }, [s]), z = V && I.length > 0, Y = () => {
+      const e = "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": l, "aria-label": d ? `Hide ${r}` : `Show ${r}`, "aria-pressed": d, className: e, "data-testid": "spectral-input-password-toggle", onClick: W, type: "button", children: d ? /* @__PURE__ */ t(at, { size: 22 }) : /* @__PURE__ */ t(pt, { size: 22 }) }),
+        clear: () => /* @__PURE__ */ t("button", { "aria-label": `Clear ${r}`, "aria-pressed": !1, className: e, "data-testid": "spectral-input-clear-button", onClick: X, type: "button", children: /* @__PURE__ */ t(it, { size: 24 }) }),
+        loading: () => /* @__PURE__ */ t("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon", "data-testid": "spectral-input-loading-icon", children: /* @__PURE__ */ t(nt, { size: 24 }) }),
+        error: () => /* @__PURE__ */ t("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-danger-400", "data-testid": "spectral-input-error-icon", children: /* @__PURE__ */ t(st, { size: 24 }) }),
+        success: () => /* @__PURE__ */ t("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-success-400", "data-testid": "spectral-input-success-icon", children: /* @__PURE__ */ t(ot, { size: 24 }) })
       };
-      return I || (p === "password" ? o.password() : z ? o.clear() : A ? o.loading() : i === "success" ? o.success() : i === "error" ? o.error() : null);
-    }, Z = () => y || null, _ = f(ut(i, m), "[text-indent:var(--prefix-width)]", z && "pr-10"), q = f("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__ */ d("div", { className: "w-full space-y-1.5", "data-testid": "input-root", children: [
-      e && /* @__PURE__ */ t(lt, { htmlFor: l, className: f("block mb-2", R, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), children: e }),
-      /* @__PURE__ */ d("div", { className: "relative", "data-testid": "input-wrapper", children: [
-        /* @__PURE__ */ d("div", { className: "relative", children: [
+      return b || (n === "password" ? o.password() : z ? o.clear() : A ? o.loading() : i === "success" ? o.success() : i === "error" ? o.error() : null);
+    }, Z = () => y || null, _ = f(dt(i, m), "[text-indent:var(--prefix-width)]", z && "pr-10"), q = f("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__ */ u("div", { className: "w-full space-y-1.5", "data-testid": "spectral-input-container", children: [
+      r && /* @__PURE__ */ t(lt, { className: f("block mb-2", R, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), "data-testid": "spectral-input-label", htmlFor: l, children: r }),
+      /* @__PURE__ */ u("div", { className: "relative", "data-testid": "spectral-input-wrapper", children: [
+        /* @__PURE__ */ u("div", { className: "relative", children: [
           Z(),
-          n && /* @__PURE__ */ t("span", { ref: J, className: q, children: n }),
+          p && /* @__PURE__ */ t("span", { ref: J, className: q, children: p }),
           /* @__PURE__ */ t(
             "input",
             {
-              id: l,
-              name: x,
-              ref: s,
-              type: p === "password" ? T : p,
-              value: w,
-              disabled: F,
-              required: v,
-              autoComplete: gt(p),
+              "aria-label": L || r,
+              autoComplete: gt(n),
               className: _,
+              "data-state": i,
+              "data-testid": "spectral-input",
+              disabled: F,
+              id: l,
+              name: g,
+              onBlur: K,
               onChange: U,
               onFocus: Q,
-              onBlur: K,
-              placeholder: S || e,
-              suppressHydrationWarning: $,
-              ...H,
-              ...O,
-              "data-testid": "input-input",
-              "data-state": i,
+              placeholder: S || r,
+              ref: s,
+              required: v,
               style: ft({
-                "--prefix-width": n ? `${G}px` : "0px"
+                "--prefix-width": p ? `${G}px` : "0px"
               }),
-              "aria-label": L || e
+              suppressHydrationWarning: $,
+              type: n === "password" ? D : n,
+              value: I,
+              ...H,
+              ...O
             }
           ),
           Y()
         ] }),
-        B && b && /* @__PURE__ */ t(ht, { id: N, message: b })
+        B && x && /* @__PURE__ */ t(ht, { dataTestId: "spectral-input-error-message", id: N, message: x })
       ] })
     ] });
   }

package/dist/InputOTP.d.ts

@@ -1,8 +1,8 @@
 import { OTPInputProps } from 'input-otp';
 type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render'> & {
     onComplete?: (...args: unknown[]) => void;
-    inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
     className?: string;
+    inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
     separator?: boolean;
     variant?: 'outlined' | 'filled';
 };