@spear-ai/spectral 1.4.25 → 1.4.27

package/dist/Input/InputUtils.d.ts

@@ -1,15 +1,15 @@
-import { RefObject } from 'react';
+import { ChangeEvent, FocusEvent, Ref } from 'react';
 export declare const usePrefixWidth: (prefix?: string) => {
     prefixWidth: number;
-    prefixRef: RefObject<HTMLSpanElement | null>;
+    prefixRef: Ref<HTMLSpanElement | null>;
 };
 export declare const usePasswordVisibility: () => {
     isVisible: boolean;
     toggleVisibility: () => void;
     inputType: "text" | "password";
 };
-export declare const useClearOnFocus: (clearOnFocus: boolean, onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void) => {
+export declare const useClearOnFocus: (clearOnFocus: boolean, onChange?: (e: ChangeEvent<HTMLInputElement>) => void) => {
     hasBeenFocused: boolean;
-    handleFocus: (e: React.FocusEvent<HTMLInputElement>, originalOnFocus?: (e: React.FocusEvent<HTMLInputElement>) => void) => void;
+    handleFocus: (e: FocusEvent<HTMLInputElement>, originalOnFocus?: (e: FocusEvent<HTMLInputElement>) => void) => void;
 };
 //# sourceMappingURL=InputUtils.d.ts.map

package/dist/Input/InputUtils.js

@@ -1,5 +1,5 @@
 "use client";
-import { useState as u, useCallback as f, useRef as l, useLayoutEffect as d } from "react";
+import { useState as u, useRef as l, useLayoutEffect as d, useCallback as f } from "react";
 const h = (t) => {
   const [r, s] = u(0), e = l(null);
   return d(() => {

package/dist/Input.d.ts

@@ -1,5 +1,5 @@
 import { BaseFormFieldProps } from './utils/formFieldUtils';
-import { FocusEvent, InputHTMLAttributes, ReactElement } from 'react';
+import { FocusEvent, InputHTMLAttributes, ReactElement, Ref } from 'react';
 export type InputType = 'text' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime-local';
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'> & BaseFormFieldProps & {
     className?: string;
@@ -17,20 +17,10 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onC
     type?: InputType;
     value?: string;
 };
-export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "onChange"> & BaseFormFieldProps & {
-    className?: string;
-    clearOnFocus?: boolean;
-    endIcon?: ReactElement;
-    labelClassName?: string;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    onChange?: (value: string) => void;
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
-    placeholder?: string;
-    prefix?: string;
-    showClearButton?: boolean;
-    startIcon?: ReactElement;
-    suppressHydrationWarning?: boolean;
-    type?: InputType;
-    value?: string;
-} & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Input: {
+    ({ ref, className, clearOnFocus, disabled, endIcon, errorMessage, id, label, labelClassName, name, onBlur, onChange, onFocus, placeholder, prefix, required, showClearButton, startIcon, state, suppressHydrationWarning, type, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: InputProps & {
+        ref?: Ref<HTMLInputElement>;
+    }): ReactElement;
+    displayName: string;
+};
 //# sourceMappingURL=Input.d.ts.map

package/dist/Input.js

@@ -1,7 +1,7 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { usePasswordVisibility as tt, usePrefixWidth as rt, useClearOnFocus as et } from "./Input/InputUtils.js";
+import { jsxs as f, jsx as e } 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";
@@ -65,10 +65,14 @@ 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 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) => ({
+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) => ({
   email: "email",
   password: "current-password",
   tel: "tel",
@@ -77,101 +81,101 @@ const gt = (m) => ({
   number: "off",
   date: "off",
   "datetime-local": "off"
-})[m] || "off", Ct = bt(
-  ({
-    className: m,
-    clearOnFocus: h = !1,
-    disabled: k,
-    endIcon: b,
-    errorMessage: x,
-    id: P,
-    label: e,
-    labelClassName: R,
-    name: g,
-    onBlur: C,
-    onChange: a,
-    onFocus: w,
-    placeholder: S,
-    prefix: p,
-    required: v,
-    showClearButton: V = !1,
-    startIcon: y,
-    state: i = "default",
-    suppressHydrationWarning: $ = !0,
-    type: n = "text",
-    value: I = "",
-    "aria-label": L,
-    "aria-describedby": M,
-    ...O
-  }, j) => {
-    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 } = rt(p), { handleFocus: E } = et(h, a ? (r) => a(r.target.value) : void 0), K = c(
-      (r) => {
-        C?.(r);
-      },
-      [C]
-    ), Q = c(
-      (r) => {
-        E(r, w);
-      },
-      [E, w]
-    ), U = c(
-      (r) => {
-        const o = r.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 && 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": l, "aria-label": d ? `Hide ${e}` : `Show ${e}`, "aria-pressed": d, className: r, "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 ${e}`, "aria-pressed": !1, className: r, "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 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: [
-      e && /* @__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: e }),
-      /* @__PURE__ */ u("div", { className: "relative", "data-testid": "spectral-input-wrapper", children: [
-        /* @__PURE__ */ u("div", { className: "relative", children: [
-          Z(),
-          p && /* @__PURE__ */ t("span", { ref: J, className: q, children: p }),
-          /* @__PURE__ */ t(
-            "input",
-            {
-              "aria-label": L || e,
-              autoComplete: gt(n),
-              className: _,
-              "data-state": i,
-              "data-testid": "spectral-input",
-              disabled: F,
-              id: l,
-              name: g,
-              onBlur: K,
-              onChange: U,
-              onFocus: Q,
-              placeholder: S || e,
-              ref: s,
-              required: v,
-              style: ft({
-                "--prefix-width": p ? `${G}px` : "0px"
-              }),
-              suppressHydrationWarning: $,
-              type: n === "password" ? D : n,
-              value: I,
-              ...H,
-              ...O
-            }
-          ),
-          Y()
-        ] }),
-        B && x && /* @__PURE__ */ t(ht, { dataTestId: "spectral-input-error-message", id: N, message: x })
-      ] })
-    ] });
-  }
-);
+})[a] || "off", Ct = ({
+  ref: a,
+  className: p,
+  clearOnFocus: i = !1,
+  disabled: P,
+  endIcon: b,
+  errorMessage: g,
+  id: R,
+  label: r,
+  labelClassName: S,
+  name: x,
+  onBlur: C,
+  onChange: n,
+  onFocus: w,
+  placeholder: V,
+  prefix: l,
+  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(R, x), N = `${m}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = mt(P, s), H = dt(s, O, v, N), E = bt(null), T = gt(a, E), { isVisible: u, toggleVisibility: W, inputType: D } = tt(), { prefixWidth: G, prefixRef: J } = et(l), { handleFocus: z } = rt(i, n ? (t) => n(t.target.value) : void 0), K = d(
+    (t) => {
+      C?.(t);
+    },
+    [C]
+  ), Q = d(
+    (t) => {
+      z(t, w);
+    },
+    [z, w]
+  ), U = d(
+    (t) => {
+      const o = t.target.value;
+      n?.(o);
+    },
+    [n]
+  ), X = d(() => {
+    const t = E.current;
+    t && (t.value = "", t.dispatchEvent(new Event("input", { bubbles: !0 })), t.focus());
+  }, []), k = $ && I.length > 0, Y = () => {
+    const t = "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__ */ e("button", { "aria-controls": m, "aria-label": u ? `Hide ${r}` : `Show ${r}`, "aria-pressed": u, className: t, "data-testid": "spectral-input-password-toggle", onClick: W, type: "button", children: u ? /* @__PURE__ */ e(at, { size: 22 }) : /* @__PURE__ */ e(pt, { size: 22 }) }),
+      clear: () => /* @__PURE__ */ e("button", { "aria-label": `Clear ${r}`, "aria-pressed": !1, className: t, "data-testid": "spectral-input-clear-button", onClick: X, type: "button", children: /* @__PURE__ */ e(it, { size: 24 }) }),
+      loading: () => /* @__PURE__ */ e("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-loading-icon", children: /* @__PURE__ */ e(nt, { size: 24 }) }),
+      error: () => /* @__PURE__ */ e("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-error-icon", children: /* @__PURE__ */ e(st, { size: 24 }) }),
+      success: () => /* @__PURE__ */ e("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-success-icon", children: /* @__PURE__ */ e(ot, { size: 24 }) })
+    };
+    return b || (c === "password" ? o.password() : k ? o.clear() : A ? o.loading() : s === "success" ? o.success() : s === "error" ? o.error() : null);
+  }, Z = () => y || null, _ = h(ut(s, p), "[text-indent:var(--prefix-width)]", k && "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: [
+    r && /* @__PURE__ */ e(lt, { className: h("mb-2 block", S, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), "data-testid": "spectral-input-label", htmlFor: m, children: r }),
+    /* @__PURE__ */ f("div", { className: "relative", "data-testid": "spectral-input-wrapper", children: [
+      /* @__PURE__ */ f("div", { className: "relative", children: [
+        Z(),
+        l && /* @__PURE__ */ e("span", { ref: J, className: q, children: l }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            "aria-label": M || r,
+            autoComplete: xt(c),
+            className: _,
+            "data-state": s,
+            "data-testid": "spectral-input",
+            disabled: F,
+            id: m,
+            name: x,
+            onBlur: K,
+            onChange: U,
+            onFocus: Q,
+            placeholder: V || r,
+            ref: T,
+            required: v,
+            style: ft({
+              "--prefix-width": l ? `${G}px` : "0px"
+            }),
+            suppressHydrationWarning: L,
+            type: c === "password" ? D : c,
+            value: I,
+            ...H,
+            ...j
+          }
+        ),
+        Y()
+      ] }),
+      B && g && /* @__PURE__ */ e(ht, { dataTestId: "spectral-input-error-message", id: N, message: g })
+    ] })
+  ] });
+};
 Ct.displayName = "Input";
 export {
   Ct as Input

package/dist/InputOTP.d.ts

@@ -1,4 +1,5 @@
-import { OTPInputProps } from 'input-otp';
+import { OTPInput, OTPInputProps } from 'input-otp';
+import { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';
 type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render'> & {
     onComplete?: (...args: unknown[]) => void;
     className?: string;
@@ -19,12 +20,31 @@ export type InputOTPProps = InputOTPRootProps & ({
     hasError?: false;
     errorMessage?: never;
 });
-export declare const InputOTP: import('react').ForwardRefExoticComponent<InputOTPProps & import('react').RefAttributes<HTMLInputElement>> & {
-    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Slot: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        index: number;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    Separator: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const InputOTP: {
+    ({ ref, autoFocus, children, className, errorMessage, hasError, id, inputMode, maxLength, name, onChange, onComplete, value, variant, ...props }: InputOTPProps & {
+        ref?: Ref<ComponentRef<typeof OTPInput>>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Group: {
+        ({ ref, ...props }: ComponentPropsWithoutRef<"div"> & {
+            ref?: Ref<ComponentRef<"div">>;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Slot: {
+        ({ ref, index, className, ...props }: ComponentPropsWithoutRef<"div"> & {
+            ref?: Ref<ComponentRef<"div">>;
+            index: number;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        ({ ref, ...props }: ComponentPropsWithoutRef<"div"> & {
+            ref?: Ref<ComponentRef<"div">>;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export {};
 //# sourceMappingURL=InputOTP.d.ts.map