@spear-ai/spectral 1.6.2 → 1.6.3

package/dist/InputOTP.d.ts

@@ -20,6 +20,11 @@ export type InputOTPProps = InputOTPRootProps & ({
     hasError?: false;
     errorMessage?: never;
 });
+type SlotsProps = {
+    start?: number;
+    count?: number;
+    className?: string;
+};
 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>>;
@@ -39,6 +44,10 @@ export declare const InputOTP: {
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    Slots: {
+        ({ start, count, className }: SlotsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Separator: {
         ({ ref, ...props }: ComponentPropsWithoutRef<"div"> & {
             ref?: Ref<ComponentRef<"div">>;

package/dist/InputOTP.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsx as k, jsxs as ft } from "react/jsx-runtime";
+import { jsx as w, jsxs as bt, Fragment as _t } from "react/jsx-runtime";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -40,7 +40,7 @@ import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
 import "./Icons/MessagesIcon.js";
 import "./Icons/MetadataIcon.js";
-import { MinusIcon as Nt } from "./Icons/MinusIcon.js";
+import { MinusIcon as Ht } from "./Icons/MinusIcon.js";
 import "./Icons/OntologyIcon.js";
 import "./Icons/PanelIconClose.js";
 import "./Icons/PanelIconOpen.js";
@@ -64,180 +64,180 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { useFormFieldId as _t, ErrorMessage as Ht, getErrorMessageId as Gt } from "./utils/formFieldUtils.js";
-import { cn as vt } from "./utils/twUtils.js";
-import * as r from "react";
-import { createContext as gt, useContext as ht } from "react";
-var Lt = Object.defineProperty, zt = Object.defineProperties, $t = Object.getOwnPropertyDescriptors, K = Object.getOwnPropertySymbols, bt = Object.prototype.hasOwnProperty, wt = Object.prototype.propertyIsEnumerable, mt = (t, n, a) => n in t ? Lt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[n] = a, Vt = (t, n) => {
-  for (var a in n || (n = {})) bt.call(n, a) && mt(t, a, n[a]);
-  if (K) for (var a of K(n)) wt.call(n, a) && mt(t, a, n[a]);
+import { useFormFieldId as Gt, ErrorMessage as Lt, getErrorMessageId as zt } from "./utils/formFieldUtils.js";
+import { cn as wt } from "./utils/twUtils.js";
+import * as n from "react";
+import { createContext as St, useContext as yt } from "react";
+var $t = Object.defineProperty, Vt = Object.defineProperties, qt = Object.getOwnPropertyDescriptors, K = Object.getOwnPropertySymbols, Et = Object.prototype.hasOwnProperty, Pt = Object.prototype.propertyIsEnumerable, ht = (t, e, o) => e in t ? $t(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, Zt = (t, e) => {
+  for (var o in e || (e = {})) Et.call(e, o) && ht(t, o, e[o]);
+  if (K) for (var o of K(e)) Pt.call(e, o) && ht(t, o, e[o]);
   return t;
-}, qt = (t, n) => zt(t, $t(n)), Zt = (t, n) => {
-  var a = {};
-  for (var u in t) bt.call(t, u) && n.indexOf(u) < 0 && (a[u] = t[u]);
-  if (t != null && K) for (var u of K(t)) n.indexOf(u) < 0 && wt.call(t, u) && (a[u] = t[u]);
-  return a;
+}, Jt = (t, e) => Vt(t, qt(e)), Kt = (t, e) => {
+  var o = {};
+  for (var i in t) Et.call(t, i) && e.indexOf(i) < 0 && (o[i] = t[i]);
+  if (t != null && K) for (var i of K(t)) e.indexOf(i) < 0 && Pt.call(t, i) && (o[i] = t[i]);
+  return o;
 };
-function Jt(t) {
-  let n = setTimeout(t, 0), a = setTimeout(t, 10), u = setTimeout(t, 50);
-  return [n, a, u];
+function Qt(t) {
+  let e = setTimeout(t, 0), o = setTimeout(t, 10), i = setTimeout(t, 50);
+  return [e, o, i];
 }
-function Kt(t) {
-  let n = r.useRef();
-  return r.useEffect(() => {
-    n.current = t;
-  }), n.current;
+function Ut(t) {
+  let e = n.useRef();
+  return n.useEffect(() => {
+    e.current = t;
+  }), e.current;
 }
-var Qt = 18, xt = 40, Ut = `${xt}px`, Xt = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
-function Yt({ containerRef: t, inputRef: n, pushPasswordManagerStrategy: a, isFocused: u }) {
-  let [v, s] = r.useState(!1), [b, m] = r.useState(!1), [C, j] = r.useState(!1), M = r.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && v && b, [v, b, a]), R = r.useCallback(() => {
-    let f = t.current, y = n.current;
-    if (!f || !y || C || a === "none") return;
-    let g = f, w = g.getBoundingClientRect().left + g.offsetWidth, I = g.getBoundingClientRect().top + g.offsetHeight / 2, l = w - Qt, O = I;
-    document.querySelectorAll(Xt).length === 0 && document.elementFromPoint(l, O) === f || (s(!0), j(!0));
-  }, [t, n, C, a]);
-  return r.useEffect(() => {
-    let f = t.current;
-    if (!f || a === "none") return;
-    function y() {
-      let w = window.innerWidth - f.getBoundingClientRect().right;
-      m(w >= xt);
+var Xt = 18, xt = 40, Yt = `${xt}px`, te = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function ee({ containerRef: t, inputRef: e, pushPasswordManagerStrategy: o, isFocused: i }) {
+  let [f, s] = n.useState(!1), [d, m] = n.useState(!1), [x, j] = n.useState(!1), T = n.useMemo(() => o === "none" ? !1 : (o === "increase-width" || o === "experimental-no-flickering") && f && d, [f, d, o]), I = n.useCallback(() => {
+    let g = t.current, C = e.current;
+    if (!g || !C || x || o === "none") return;
+    let h = g, S = h.getBoundingClientRect().left + h.offsetWidth, O = h.getBoundingClientRect().top + h.offsetHeight / 2, l = S - Xt, R = O;
+    document.querySelectorAll(te).length === 0 && document.elementFromPoint(l, R) === g || (s(!0), j(!0));
+  }, [t, e, x, o]);
+  return n.useEffect(() => {
+    let g = t.current;
+    if (!g || o === "none") return;
+    function C() {
+      let S = window.innerWidth - g.getBoundingClientRect().right;
+      m(S >= xt);
     }
-    y();
-    let g = setInterval(y, 1e3);
+    C();
+    let h = setInterval(C, 1e3);
     return () => {
-      clearInterval(g);
+      clearInterval(h);
     };
-  }, [t, a]), r.useEffect(() => {
-    let f = u || document.activeElement === n.current;
-    if (a === "none" || !f) return;
-    let y = setTimeout(R, 0), g = setTimeout(R, 2e3), w = setTimeout(R, 5e3), I = setTimeout(() => {
+  }, [t, o]), n.useEffect(() => {
+    let g = i || document.activeElement === e.current;
+    if (o === "none" || !g) return;
+    let C = setTimeout(I, 0), h = setTimeout(I, 2e3), S = setTimeout(I, 5e3), O = setTimeout(() => {
       j(!0);
     }, 6e3);
     return () => {
-      clearTimeout(y), clearTimeout(g), clearTimeout(w), clearTimeout(I);
+      clearTimeout(C), clearTimeout(h), clearTimeout(S), clearTimeout(O);
     };
-  }, [n, u, a, R]), { hasPWMBadge: v, willPushPWMBadge: M, PWM_BADGE_SPACE_WIDTH: Ut };
+  }, [e, i, o, I]), { hasPWMBadge: f, willPushPWMBadge: T, PWM_BADGE_SPACE_WIDTH: Yt };
 }
-var te = r.createContext({}), Et = r.forwardRef((t, n) => {
-  var a = t, { value: u, onChange: v, maxLength: s, textAlign: b = "left", pattern: m, placeholder: C, inputMode: j = "numeric", onComplete: M, pushPasswordManagerStrategy: R = "increase-width", pasteTransformer: f, containerClassName: y, noScriptCSSFallback: g = ee, render: w, children: I } = a, l = Zt(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), O, et, rt, nt, ot;
-  let [Rt, It] = r.useState(typeof l.defaultValue == "string" ? l.defaultValue : ""), p = u ?? Rt, W = Kt(p), L = r.useCallback((e) => {
-    v?.(e), It(e);
-  }, [v]), P = r.useMemo(() => m ? typeof m == "string" ? new RegExp(m) : m : null, [m]), c = r.useRef(null), Q = r.useRef(null), U = r.useRef({ value: p, onChange: L, isIOS: typeof window < "u" && ((et = (O = window?.CSS) == null ? void 0 : O.supports) == null ? void 0 : et.call(O, "-webkit-touch-callout", "none")) }), Z = r.useRef({ prev: [(rt = c.current) == null ? void 0 : rt.selectionStart, (nt = c.current) == null ? void 0 : nt.selectionEnd, (ot = c.current) == null ? void 0 : ot.selectionDirection] });
-  r.useImperativeHandle(n, () => c.current, []), r.useEffect(() => {
-    let e = c.current, o = Q.current;
-    if (!e || !o) return;
-    U.current.value !== e.value && U.current.onChange(e.value), Z.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
-    function d() {
-      if (document.activeElement !== e) {
+var re = n.createContext({}), Ct = n.forwardRef((t, e) => {
+  var o = t, { value: i, onChange: f, maxLength: s, textAlign: d = "left", pattern: m, placeholder: x, inputMode: j = "numeric", onComplete: T, pushPasswordManagerStrategy: I = "increase-width", pasteTransformer: g, containerClassName: C, noScriptCSSFallback: h = ne, render: S, children: O } = o, l = Kt(o, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), R, at, lt, it, st;
+  let [Ot, Rt] = n.useState(typeof l.defaultValue == "string" ? l.defaultValue : ""), p = i ?? Ot, W = Ut(p), L = n.useCallback((r) => {
+    f?.(r), Rt(r);
+  }, [f]), M = n.useMemo(() => m ? typeof m == "string" ? new RegExp(m) : m : null, [m]), c = n.useRef(null), Q = n.useRef(null), U = n.useRef({ value: p, onChange: L, isIOS: typeof window < "u" && ((at = (R = window?.CSS) == null ? void 0 : R.supports) == null ? void 0 : at.call(R, "-webkit-touch-callout", "none")) }), Z = n.useRef({ prev: [(lt = c.current) == null ? void 0 : lt.selectionStart, (it = c.current) == null ? void 0 : it.selectionEnd, (st = c.current) == null ? void 0 : st.selectionDirection] });
+  n.useImperativeHandle(e, () => c.current, []), n.useEffect(() => {
+    let r = c.current, a = Q.current;
+    if (!r || !a) return;
+    U.current.value !== r.value && U.current.onChange(r.value), Z.current.prev = [r.selectionStart, r.selectionEnd, r.selectionDirection];
+    function v() {
+      if (document.activeElement !== r) {
         $(null), V(null);
         return;
       }
-      let i = e.selectionStart, h = e.selectionEnd, J = e.selectionDirection, S = e.maxLength, F = e.value, T = Z.current.prev, A = -1, D = -1, N;
-      if (F.length !== 0 && i !== null && h !== null) {
-        let Wt = i === h, Bt = i === F.length && F.length < S;
-        if (Wt && !Bt) {
-          let _ = i;
+      let u = r.selectionStart, b = r.selectionEnd, J = r.selectionDirection, P = r.maxLength, F = r.value, k = Z.current.prev, A = -1, D = -1, N;
+      if (F.length !== 0 && u !== null && b !== null) {
+        let Bt = u === b, Ft = u === F.length && F.length < P;
+        if (Bt && !Ft) {
+          let _ = u;
           if (_ === 0) A = 0, D = 1, N = "forward";
-          else if (_ === S) A = _ - 1, D = _, N = "backward";
-          else if (S > 1 && F.length > 1) {
+          else if (_ === P) A = _ - 1, D = _, N = "backward";
+          else if (P > 1 && F.length > 1) {
             let tt = 0;
-            if (T[0] !== null && T[1] !== null) {
-              N = _ < T[1] ? "backward" : "forward";
-              let Ft = T[0] === T[1] && T[0] < S;
-              N === "backward" && !Ft && (tt = -1);
+            if (k[0] !== null && k[1] !== null) {
+              N = _ < k[1] ? "backward" : "forward";
+              let Nt = k[0] === k[1] && k[0] < P;
+              N === "backward" && !Nt && (tt = -1);
             }
             A = tt + _, D = tt + _ + 1;
           }
         }
         A !== -1 && D !== -1 && A !== D && c.current.setSelectionRange(A, D, N);
       }
-      let ct = A !== -1 ? A : i, dt = D !== -1 ? D : h, jt = N ?? J;
-      $(ct), V(dt), Z.current.prev = [ct, dt, jt];
+      let vt = A !== -1 ? A : u, gt = D !== -1 ? D : b, Wt = N ?? J;
+      $(vt), V(gt), Z.current.prev = [vt, gt, Wt];
     }
-    if (document.addEventListener("selectionchange", d, { capture: !0 }), d(), document.activeElement === e && X(!0), !document.getElementById("input-otp-style")) {
-      let i = document.createElement("style");
-      if (i.id = "input-otp-style", document.head.appendChild(i), i.sheet) {
-        let h = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
-        q(i.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), q(i.sheet, `[data-input-otp]:autofill { ${h} }`), q(i.sheet, `[data-input-otp]:-webkit-autofill { ${h} }`), q(i.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), q(i.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+    if (document.addEventListener("selectionchange", v, { capture: !0 }), v(), document.activeElement === r && X(!0), !document.getElementById("input-otp-style")) {
+      let u = document.createElement("style");
+      if (u.id = "input-otp-style", document.head.appendChild(u), u.sheet) {
+        let b = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        q(u.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), q(u.sheet, `[data-input-otp]:autofill { ${b} }`), q(u.sheet, `[data-input-otp]:-webkit-autofill { ${b} }`), q(u.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), q(u.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
       }
     }
-    let x = () => {
-      o && o.style.setProperty("--root-height", `${e.clientHeight}px`);
+    let y = () => {
+      a && a.style.setProperty("--root-height", `${r.clientHeight}px`);
     };
-    x();
-    let E = new ResizeObserver(x);
-    return E.observe(e), () => {
-      document.removeEventListener("selectionchange", d, { capture: !0 }), E.disconnect();
+    y();
+    let E = new ResizeObserver(y);
+    return E.observe(r), () => {
+      document.removeEventListener("selectionchange", v, { capture: !0 }), E.disconnect();
     };
   }, []);
-  let [at, lt] = r.useState(!1), [z, X] = r.useState(!1), [B, $] = r.useState(null), [H, V] = r.useState(null);
-  r.useEffect(() => {
-    Jt(() => {
-      var e, o, d, x;
-      (e = c.current) == null || e.dispatchEvent(new Event("input"));
-      let E = (o = c.current) == null ? void 0 : o.selectionStart, i = (d = c.current) == null ? void 0 : d.selectionEnd, h = (x = c.current) == null ? void 0 : x.selectionDirection;
-      E !== null && i !== null && ($(E), V(i), Z.current.prev = [E, i, h]);
+  let [ut, pt] = n.useState(!1), [z, X] = n.useState(!1), [B, $] = n.useState(null), [H, V] = n.useState(null);
+  n.useEffect(() => {
+    Qt(() => {
+      var r, a, v, y;
+      (r = c.current) == null || r.dispatchEvent(new Event("input"));
+      let E = (a = c.current) == null ? void 0 : a.selectionStart, u = (v = c.current) == null ? void 0 : v.selectionEnd, b = (y = c.current) == null ? void 0 : y.selectionDirection;
+      E !== null && u !== null && ($(E), V(u), Z.current.prev = [E, u, b]);
     });
-  }, [p, z]), r.useEffect(() => {
-    W !== void 0 && p !== W && W.length < s && p.length === s && M?.(p);
-  }, [s, M, W, p]);
-  let G = Yt({ containerRef: Q, inputRef: c, pushPasswordManagerStrategy: R, isFocused: z }), it = r.useCallback((e) => {
-    let o = e.currentTarget.value.slice(0, s);
-    if (o.length > 0 && P && !P.test(o)) {
-      e.preventDefault();
+  }, [p, z]), n.useEffect(() => {
+    W !== void 0 && p !== W && W.length < s && p.length === s && T?.(p);
+  }, [s, T, W, p]);
+  let G = ee({ containerRef: Q, inputRef: c, pushPasswordManagerStrategy: I, isFocused: z }), ct = n.useCallback((r) => {
+    let a = r.currentTarget.value.slice(0, s);
+    if (a.length > 0 && M && !M.test(a)) {
+      r.preventDefault();
       return;
     }
-    typeof W == "string" && o.length < W.length && document.dispatchEvent(new Event("selectionchange")), L(o);
-  }, [s, L, W, P]), ut = r.useCallback(() => {
-    var e;
+    typeof W == "string" && a.length < W.length && document.dispatchEvent(new Event("selectionchange")), L(a);
+  }, [s, L, W, M]), dt = n.useCallback(() => {
+    var r;
     if (c.current) {
-      let o = Math.min(c.current.value.length, s - 1), d = c.current.value.length;
-      (e = c.current) == null || e.setSelectionRange(o, d), $(o), V(d);
+      let a = Math.min(c.current.value.length, s - 1), v = c.current.value.length;
+      (r = c.current) == null || r.setSelectionRange(a, v), $(a), V(v);
     }
     X(!0);
-  }, [s]), st = r.useCallback((e) => {
-    var o, d;
-    let x = c.current;
-    if (!f && (!U.current.isIOS || !e.clipboardData || !x)) return;
-    let E = e.clipboardData.getData("text/plain"), i = f ? f(E) : E;
-    e.preventDefault();
-    let h = (o = c.current) == null ? void 0 : o.selectionStart, J = (d = c.current) == null ? void 0 : d.selectionEnd, S = (h !== J ? p.slice(0, h) + i + p.slice(J) : p.slice(0, h) + i + p.slice(h)).slice(0, s);
-    if (S.length > 0 && P && !P.test(S)) return;
-    x.value = S, L(S);
-    let F = Math.min(S.length, s - 1), T = S.length;
-    x.setSelectionRange(F, T), $(F), V(T);
-  }, [s, L, P, p]), Ot = r.useMemo(() => ({ position: "relative", cursor: l.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [l.disabled]), pt = r.useMemo(() => ({ position: "absolute", inset: 0, width: G.willPushPWMBadge ? `calc(100% + ${G.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: G.willPushPWMBadge ? `inset(0 ${G.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: b, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [G.PWM_BADGE_SPACE_WIDTH, G.willPushPWMBadge, b]), At = r.useMemo(() => r.createElement("input", qt(Vt({ autoComplete: l.autoComplete || "one-time-code" }, l), { "data-input-otp": !0, "data-input-otp-placeholder-shown": p.length === 0 || void 0, "data-input-otp-mss": B, "data-input-otp-mse": H, inputMode: j, pattern: P?.source, "aria-placeholder": C, style: pt, maxLength: s, value: p, ref: c, onPaste: (e) => {
-    var o;
-    st(e), (o = l.onPaste) == null || o.call(l, e);
-  }, onChange: it, onMouseOver: (e) => {
-    var o;
-    lt(!0), (o = l.onMouseOver) == null || o.call(l, e);
-  }, onMouseLeave: (e) => {
-    var o;
-    lt(!1), (o = l.onMouseLeave) == null || o.call(l, e);
-  }, onFocus: (e) => {
-    var o;
-    ut(), (o = l.onFocus) == null || o.call(l, e);
-  }, onBlur: (e) => {
-    var o;
-    X(!1), (o = l.onBlur) == null || o.call(l, e);
-  } })), [it, ut, st, j, pt, s, H, B, l, P?.source, p]), Y = r.useMemo(() => ({ slots: Array.from({ length: s }).map((e, o) => {
-    var d;
-    let x = z && B !== null && H !== null && (B === H && o === B || o >= B && o < H), E = p[o] !== void 0 ? p[o] : null, i = p[0] !== void 0 ? null : (d = C?.[o]) != null ? d : null;
-    return { char: E, placeholderChar: i, isActive: x, hasFakeCaret: x && E === null };
-  }), isFocused: z, isHovering: !l.disabled && at }), [z, at, s, H, B, l.disabled, p]), Dt = r.useMemo(() => w ? w(Y) : r.createElement(te.Provider, { value: Y }, I), [I, Y, w]);
-  return r.createElement(r.Fragment, null, g !== null && r.createElement("noscript", null, r.createElement("style", null, g)), r.createElement("div", { ref: Q, "data-input-otp-container": !0, style: Ot, className: y }, Dt, r.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, At)));
+  }, [s]), mt = n.useCallback((r) => {
+    var a, v;
+    let y = c.current;
+    if (!g && (!U.current.isIOS || !r.clipboardData || !y)) return;
+    let E = r.clipboardData.getData("text/plain"), u = g ? g(E) : E;
+    r.preventDefault();
+    let b = (a = c.current) == null ? void 0 : a.selectionStart, J = (v = c.current) == null ? void 0 : v.selectionEnd, P = (b !== J ? p.slice(0, b) + u + p.slice(J) : p.slice(0, b) + u + p.slice(b)).slice(0, s);
+    if (P.length > 0 && M && !M.test(P)) return;
+    y.value = P, L(P);
+    let F = Math.min(P.length, s - 1), k = P.length;
+    y.setSelectionRange(F, k), $(F), V(k);
+  }, [s, L, M, p]), At = n.useMemo(() => ({ position: "relative", cursor: l.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [l.disabled]), ft = n.useMemo(() => ({ position: "absolute", inset: 0, width: G.willPushPWMBadge ? `calc(100% + ${G.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: G.willPushPWMBadge ? `inset(0 ${G.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: d, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [G.PWM_BADGE_SPACE_WIDTH, G.willPushPWMBadge, d]), Dt = n.useMemo(() => n.createElement("input", Jt(Zt({ autoComplete: l.autoComplete || "one-time-code" }, l), { "data-input-otp": !0, "data-input-otp-placeholder-shown": p.length === 0 || void 0, "data-input-otp-mss": B, "data-input-otp-mse": H, inputMode: j, pattern: M?.source, "aria-placeholder": x, style: ft, maxLength: s, value: p, ref: c, onPaste: (r) => {
+    var a;
+    mt(r), (a = l.onPaste) == null || a.call(l, r);
+  }, onChange: ct, onMouseOver: (r) => {
+    var a;
+    pt(!0), (a = l.onMouseOver) == null || a.call(l, r);
+  }, onMouseLeave: (r) => {
+    var a;
+    pt(!1), (a = l.onMouseLeave) == null || a.call(l, r);
+  }, onFocus: (r) => {
+    var a;
+    dt(), (a = l.onFocus) == null || a.call(l, r);
+  }, onBlur: (r) => {
+    var a;
+    X(!1), (a = l.onBlur) == null || a.call(l, r);
+  } })), [ct, dt, mt, j, ft, s, H, B, l, M?.source, p]), Y = n.useMemo(() => ({ slots: Array.from({ length: s }).map((r, a) => {
+    var v;
+    let y = z && B !== null && H !== null && (B === H && a === B || a >= B && a < H), E = p[a] !== void 0 ? p[a] : null, u = p[0] !== void 0 ? null : (v = x?.[a]) != null ? v : null;
+    return { char: E, placeholderChar: u, isActive: y, hasFakeCaret: y && E === null };
+  }), isFocused: z, isHovering: !l.disabled && ut }), [z, ut, s, H, B, l.disabled, p]), jt = n.useMemo(() => S ? S(Y) : n.createElement(re.Provider, { value: Y }, O), [O, Y, S]);
+  return n.createElement(n.Fragment, null, h !== null && n.createElement("noscript", null, n.createElement("style", null, h)), n.createElement("div", { ref: Q, "data-input-otp-container": !0, style: At, className: C }, jt, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Dt)));
 });
-Et.displayName = "Input";
-function q(t, n) {
+Ct.displayName = "Input";
+function q(t, e) {
   try {
-    t.insertRule(n);
+    t.insertRule(e);
   } catch {
-    console.error("input-otp could not insert CSS rule:", n);
+    console.error("input-otp could not insert CSS rule:", e);
   }
 }
-var ee = `
+var ne = `
 [data-input-otp] {
   --nojs-bg: white !important;
   --nojs-fg: black !important;
@@ -257,113 +257,119 @@ var ee = `
     --nojs-fg: white !important;
   }
 }`;
-const St = gt({}), yt = gt(null), Pt = () => {
-  const t = ht(yt);
+const Mt = St({}), Tt = St(null), et = () => {
+  const t = yt(Tt);
   if (!t)
     throw new Error("useRoot must be used within an InputOTP");
   return t;
-}, Ct = ({
+}, kt = ({
   ref: t,
-  autoFocus: n = !1,
-  children: a,
-  className: u,
-  errorMessage: v,
+  autoFocus: e = !1,
+  children: o,
+  className: i,
+  errorMessage: f,
   hasError: s,
-  id: b,
+  id: d,
   inputMode: m = "numeric",
-  maxLength: C,
+  maxLength: x,
   name: j,
-  onChange: M,
-  onComplete: R,
-  value: f,
-  variant: y = "outlined",
-  ...g
+  onChange: T,
+  onComplete: I,
+  value: g,
+  variant: C = "outlined",
+  ...h
 }) => {
-  const w = _t(b, j), I = (l) => {
-    const O = l.clipboardData.getData("text/plain").trim().replaceAll("-", "");
-    O.length === C && typeof M == "function" && M(O);
+  const S = Gt(d, j), O = (l) => {
+    const R = l.clipboardData.getData("text/plain").trim().replaceAll("-", "");
+    R.length === x && typeof T == "function" && T(R);
   };
-  return /* @__PURE__ */ k(St.Provider, { value: { hasError: s }, children: /* @__PURE__ */ ft("div", { className: "flex w-max flex-col gap-y-1", children: [
-    /* @__PURE__ */ k(
-      Et,
+  return /* @__PURE__ */ w(Mt.Provider, { value: { hasError: s }, children: /* @__PURE__ */ bt("div", { className: "flex w-max flex-col gap-y-1", children: [
+    /* @__PURE__ */ w(
+      Ct,
       {
-        autoFocus: n,
-        containerClassName: vt("flex items-center gap-2 has-[:disabled]:opacity-50 disabled:cursor-not-allowed", u),
+        autoFocus: e,
+        containerClassName: wt("flex items-center gap-2 has-[:disabled]:opacity-50 disabled:cursor-not-allowed", i),
         "data-1p-ignore": "true",
         "data-dashlane-disabled-on-field": "true",
         "data-lpignore": "true",
         "data-protonpass-ignore": "true",
         "data-testid": "spectral-input-otp",
-        id: w,
+        id: S,
         inputMode: m,
-        maxLength: C,
-        onChange: M,
-        onComplete: R,
-        onPaste: I,
+        maxLength: x,
+        onChange: T,
+        onComplete: I,
+        onPaste: O,
         pasteTransformer: (l) => l.replaceAll("-", ""),
         pushPasswordManagerStrategy: "none",
         ref: t,
         role: "textbox",
         textAlign: "center",
-        value: f,
-        ...g,
-        render: ({ slots: l }) => /* @__PURE__ */ k(yt.Provider, { value: { slots: l, variant: y }, children: a })
+        value: g,
+        ...h,
+        render: ({ slots: l }) => /* @__PURE__ */ w(Tt.Provider, { value: { slots: l, variant: C, maxLength: x }, children: o ?? /* @__PURE__ */ w(rt, { children: /* @__PURE__ */ w(ot, {}) }) })
       }
     ),
-    s && v && /* @__PURE__ */ k(Ht, { dataTestId: "spectral-input-otp-error-message", id: Gt(w), message: v })
+    s && f && /* @__PURE__ */ w(Lt, { dataTestId: "spectral-input-otp-error-message", id: zt(S), message: f })
   ] }) });
 };
-Ct.displayName = "InputOTP";
-const Mt = ({
+kt.displayName = "InputOTP";
+const rt = ({
   ref: t,
-  ...n
-}) => /* @__PURE__ */ k("div", { className: "flex items-center justify-center gap-x-2", "data-testid": "spectral-input-otp-group", ref: t, ...n });
-Mt.displayName = "InputOTP.Group";
-const Tt = ({
+  ...e
+}) => /* @__PURE__ */ w("div", { className: "flex items-center justify-center gap-x-2", "data-testid": "spectral-input-otp-group", ref: t, ...e });
+rt.displayName = "InputOTP.Group";
+const nt = ({
   ref: t,
-  index: n,
-  className: a,
-  ...u
+  index: e,
+  className: o,
+  ...i
 }) => {
-  const { variant: v = "outlined", slots: s = [] } = Pt(), { hasError: b } = ht(St), m = s[n] || { char: "", hasFakeCaret: !0, isActive: !1 };
-  return /* @__PURE__ */ ft(
+  const { variant: f = "outlined", slots: s = [] } = et(), { hasError: d } = yt(Mt), m = s[e] || { char: "", hasFakeCaret: !0, isActive: !1 };
+  return /* @__PURE__ */ bt(
     "div",
     {
-      className: vt(
+      className: wt(
         "relative z-10 flex h-12 w-10 items-center justify-center rounded-[8px] border-1 transition duration-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
-        v === "filled" ? "bg-level-one border-level-one" : "border-input-otp-border bg-transparent",
-        !b && "border",
-        b && "border-danger-400 focus-visible:outline-danger-400 border-2",
-        m.isActive && !b && "outline-input-otp-border--focus z-10 outline-2 outline-offset-2",
-        m.isActive && b && "outline-danger-400 outline-2 outline-offset-2",
-        a
+        f === "filled" ? "bg-level-one border-level-one" : "border-input-otp-border bg-transparent",
+        !d && "border",
+        d && "border-danger-400 focus-visible:outline-danger-400 border-2",
+        m.isActive && !d && "outline-input-otp-border--focus z-10 outline-2 outline-offset-2",
+        m.isActive && d && "outline-danger-400 outline-2 outline-offset-2",
+        o
       ),
-      "data-index": n,
+      "data-index": e,
       "data-testid": "spectral-input-otp-slot",
-      "data-variant": v,
+      "data-variant": f,
       ref: t,
-      ...u,
+      ...i,
       children: [
         m.char,
-        m.hasFakeCaret && /* @__PURE__ */ k("div", { className: "animate-caret-blink pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ k("div", { className: "bg-input-otp-caret h-8 w-px" }) })
+        m.hasFakeCaret && /* @__PURE__ */ w("div", { className: "animate-caret-blink pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ w("div", { className: "bg-input-otp-caret h-8 w-px" }) })
       ]
     }
   );
 };
-Tt.displayName = "InputOTP.Slot";
-const kt = ({
+nt.displayName = "InputOTP.Slot";
+const ot = ({ start: t = 0, count: e, className: o }) => {
+  const { maxLength: i = 0 } = et(), f = e !== void 0 ? t + e : i, s = Array.from({ length: f - t }, (d, m) => t + m);
+  return /* @__PURE__ */ w(_t, { children: s.map((d) => /* @__PURE__ */ w(nt, { index: d, className: o }, d)) });
+};
+ot.displayName = "InputOTP.Slots";
+const It = ({
   ref: t,
-  ...n
+  ...e
 }) => {
-  const { variant: a = "outlined" } = Pt();
-  return /* @__PURE__ */ k("div", { ref: t, role: "separator", ...n, "data-testid": "spectral-input-otp-separator", "data-variant": a, children: /* @__PURE__ */ k(Nt, { size: 24, color: a === "filled" ? "var(--color-input-otp-filled-separator)" : "var(--color-input-otp-border)" }) });
+  const { variant: o = "outlined" } = et();
+  return /* @__PURE__ */ w("div", { ref: t, role: "separator", ...e, "data-testid": "spectral-input-otp-separator", "data-variant": o, children: /* @__PURE__ */ w(Ht, { size: 24, color: o === "filled" ? "var(--color-input-otp-filled-separator)" : "var(--color-input-otp-border)" }) });
 };
-kt.displayName = "InputOTP.Separator";
-const vr = Object.assign(Ct, {
-  Group: Mt,
-  Slot: Tt,
-  Separator: kt
+It.displayName = "InputOTP.Separator";
+const hr = Object.assign(kt, {
+  Group: rt,
+  Slot: nt,
+  Slots: ot,
+  Separator: It
 });
 export {
-  vr as InputOTP
+  hr as InputOTP
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spear-ai/spectral",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "type": "module",
   "private": false,
   "repository": {