@spear-ai/spectral 1.6.17 → 1.7.0

package/dist/HoverCard.js

@@ -2,15 +2,15 @@
 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 { e as B, c as U, b as h, P as $, u as W } from "./index-OnYbwQjk.js";
-import { c as O, R as z, A as G, C as K, a as j } from "./index-B3FZpM60.js";
-import { P as V, D as q } from "./index-u1k2AYWy.js";
+import { createContext as I, useContext as B } from "react";
+import { e as U, c as $, b as m, P as W, u as z } from "./index-OnYbwQjk.js";
+import { c as O, R as G, A as K, C as j, a as V } from "./index-B3FZpM60.js";
+import { P as q, D as J } from "./index-u1k2AYWy.js";
 import { P as T } from "./index-D6HcSXrq.js";
-import { cn as J } from "./utils/twUtils.js";
-var H, x = "HoverCard", [E] = U(x, [
+import { cn as E } from "./utils/twUtils.js";
+var H, b = "HoverCard", [N] = $(b, [
   O
-]), R = O(), [Q, b] = E(x), N = (e) => {
+]), x = O(), [Q, R] = N(b), _ = (e) => {
   const {
     __scopeHoverCard: o,
     children: r,
@@ -18,77 +18,77 @@ var H, x = "HoverCard", [E] = U(x, [
     defaultOpen: n,
     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), [C, t] = B({
+    closeDelay: f = 300
+  } = e, d = x(o), l = s.useRef(0), p = s.useRef(0), C = s.useRef(!1), v = s.useRef(!1), [h, t] = U({
     prop: a,
     defaultProp: n ?? !1,
     onChange: c,
-    caller: x
+    caller: b
   }), g = s.useCallback(() => {
-    clearTimeout(f.current), l.current = window.setTimeout(() => t(!0), u);
+    clearTimeout(p.current), l.current = window.setTimeout(() => t(!0), u);
   }, [u, t]), S = s.useCallback(() => {
-    clearTimeout(l.current), !m.current && !v.current && (f.current = window.setTimeout(() => t(!1), p));
-  }, [p, t]), k = s.useCallback(() => t(!1), [t]);
+    clearTimeout(l.current), !C.current && !v.current && (p.current = window.setTimeout(() => t(!1), f));
+  }, [f, t]), F = s.useCallback(() => t(!1), [t]);
   return s.useEffect(() => () => {
-    clearTimeout(l.current), clearTimeout(f.current);
+    clearTimeout(l.current), clearTimeout(p.current);
   }, []), /* @__PURE__ */ i(
     Q,
     {
       scope: o,
-      open: C,
+      open: h,
       onOpenChange: t,
       onOpen: g,
       onClose: S,
-      onDismiss: k,
-      hasSelectionRef: m,
+      onDismiss: F,
+      hasSelectionRef: C,
       isPointerDownOnContentRef: v,
-      children: /* @__PURE__ */ i(z, { ...d, children: r })
+      children: /* @__PURE__ */ i(G, { ...d, children: r })
     }
   );
 };
-N.displayName = x;
-var _ = "HoverCardTrigger", D = s.forwardRef(
+_.displayName = b;
+var D = "HoverCardTrigger", A = s.forwardRef(
   (e, o) => {
-    const { __scopeHoverCard: r, ...a } = e, n = b(_, r), c = R(r);
-    return /* @__PURE__ */ i(G, { asChild: !0, ...c, children: /* @__PURE__ */ i(
-      $.a,
+    const { __scopeHoverCard: r, ...a } = e, n = R(D, r), c = x(r);
+    return /* @__PURE__ */ i(K, { asChild: !0, ...c, children: /* @__PURE__ */ i(
+      W.a,
       {
         "data-state": n.open ? "open" : "closed",
         ...a,
         ref: o,
-        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())
+        onPointerEnter: m(e.onPointerEnter, w(n.onOpen)),
+        onPointerLeave: m(e.onPointerLeave, w(n.onClose)),
+        onFocus: m(e.onFocus, n.onOpen),
+        onBlur: m(e.onBlur, n.onClose),
+        onTouchStart: m(e.onTouchStart, (u) => u.preventDefault())
       }
     ) });
   }
 );
-D.displayName = _;
-var y = "HoverCardPortal", [X, Y] = E(y, {
+A.displayName = D;
+var y = "HoverCardPortal", [X, Y] = N(y, {
   forceMount: void 0
-}), A = (e) => {
-  const { __scopeHoverCard: o, forceMount: r, children: a, container: n } = e, c = b(y, o);
-  return /* @__PURE__ */ i(X, { scope: o, forceMount: r, children: /* @__PURE__ */ i(T, { present: r || c.open, children: /* @__PURE__ */ i(V, { asChild: !0, container: n, children: a }) }) });
+}), L = (e) => {
+  const { __scopeHoverCard: o, forceMount: r, children: a, container: n } = e, c = R(y, o);
+  return /* @__PURE__ */ i(X, { scope: o, forceMount: r, children: /* @__PURE__ */ i(T, { present: r || c.open, children: /* @__PURE__ */ i(q, { asChild: !0, container: n, children: a }) }) });
 };
-A.displayName = y;
-var P = "HoverCardContent", L = s.forwardRef(
+L.displayName = y;
+var P = "HoverCardContent", M = s.forwardRef(
   (e, o) => {
-    const r = Y(P, e.__scopeHoverCard), { forceMount: a = r.forceMount, ...n } = e, c = b(P, e.__scopeHoverCard);
+    const r = Y(P, e.__scopeHoverCard), { forceMount: a = r.forceMount, ...n } = e, c = R(P, e.__scopeHoverCard);
     return /* @__PURE__ */ i(T, { present: a || c.open, children: /* @__PURE__ */ i(
       Z,
       {
         "data-state": c.open ? "open" : "closed",
         ...n,
-        onPointerEnter: h(e.onPointerEnter, w(c.onOpen)),
-        onPointerLeave: h(e.onPointerLeave, w(c.onClose)),
+        onPointerEnter: m(e.onPointerEnter, w(c.onOpen)),
+        onPointerLeave: m(e.onPointerLeave, w(c.onClose)),
         ref: o
       }
     ) });
   }
 );
-L.displayName = P;
+M.displayName = P;
 var Z = s.forwardRef((e, o) => {
   const {
     __scopeHoverCard: r,
@@ -96,8 +96,8 @@ var Z = s.forwardRef((e, o) => {
     onPointerDownOutside: n,
     onFocusOutside: c,
     onInteractOutside: u,
-    ...p
-  } = e, d = b(P, r), l = R(r), f = s.useRef(null), m = W(o, f), [v, C] = s.useState(!1);
+    ...f
+  } = e, d = R(P, r), l = x(r), p = s.useRef(null), C = z(o, p), [v, h] = s.useState(!1);
   return s.useEffect(() => {
     if (v) {
       const t = document.body;
@@ -106,9 +106,9 @@ var Z = s.forwardRef((e, o) => {
       };
     }
   }, [v]), s.useEffect(() => {
-    if (f.current) {
+    if (p.current) {
       const t = () => {
-        C(!1), d.isPointerDownOnContentRef.current = !1, setTimeout(() => {
+        h(!1), d.isPointerDownOnContentRef.current = !1, setTimeout(() => {
           document.getSelection()?.toString() !== "" && (d.hasSelectionRef.current = !0);
         });
       };
@@ -117,30 +117,30 @@ var Z = s.forwardRef((e, o) => {
       };
     }
   }, [d.isPointerDownOnContentRef, d.hasSelectionRef]), s.useEffect(() => {
-    f.current && oe(f.current).forEach((g) => g.setAttribute("tabindex", "-1"));
+    p.current && oe(p.current).forEach((g) => g.setAttribute("tabindex", "-1"));
   }), /* @__PURE__ */ i(
-    q,
+    J,
     {
       asChild: !0,
       disableOutsidePointerEvents: !1,
       onInteractOutside: u,
       onEscapeKeyDown: a,
       onPointerDownOutside: n,
-      onFocusOutside: h(c, (t) => {
+      onFocusOutside: m(c, (t) => {
         t.preventDefault();
       }),
       onDismiss: d.onDismiss,
       children: /* @__PURE__ */ i(
-        K,
+        j,
         {
           ...l,
-          ...p,
-          onPointerDown: h(p.onPointerDown, (t) => {
-            t.currentTarget.contains(t.target) && C(!0), d.hasSelectionRef.current = !1, d.isPointerDownOnContentRef.current = !0;
+          ...f,
+          onPointerDown: m(f.onPointerDown, (t) => {
+            t.currentTarget.contains(t.target) && h(!0), d.hasSelectionRef.current = !1, d.isPointerDownOnContentRef.current = !0;
           }),
-          ref: m,
+          ref: C,
           style: {
-            ...p.style,
+            ...f.style,
             userSelect: v ? "text" : void 0,
             // Safari requires prefix
             WebkitUserSelect: v ? "text" : void 0,
@@ -156,8 +156,8 @@ var Z = s.forwardRef((e, o) => {
   );
 }), ee = "HoverCardArrow", te = s.forwardRef(
   (e, o) => {
-    const { __scopeHoverCard: r, ...a } = e, n = R(r);
-    return /* @__PURE__ */ i(j, { ...n, ...a, ref: o });
+    const { __scopeHoverCard: r, ...a } = e, n = x(r);
+    return /* @__PURE__ */ i(V, { ...n, ...a, ref: o });
   }
 );
 te.displayName = ee;
@@ -171,10 +171,10 @@ function oe(e) {
   for (; r.nextNode(); ) o.push(r.currentNode);
   return o;
 }
-var re = N, ne = D, ae = A, se = L;
-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 }) });
+var re = _, ne = A, ae = L, se = M;
+const k = I({}), ie = ({ align: e, alignOffset: o, collisionBoundary: r, collisionPadding: a, side: n, sideOffset: c, width: u, ...f }) => /* @__PURE__ */ i(k.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", ...f }) });
 ie.displayName = "HoverCard";
-const ce = ({ ...e }) => /* @__PURE__ */ i(ne, { "data-slot": "hover-card-trigger", "data-testid": "spectral-hover-card-trigger", ...e });
+const ce = ({ className: e, ...o }) => /* @__PURE__ */ i(ne, { className: E("font-base", e), "data-slot": "hover-card-trigger", "data-testid": "spectral-hover-card-trigger", ...o });
 ce.displayName = "HoverCardTrigger";
 const de = ({
   align: e,
@@ -184,17 +184,17 @@ const de = ({
   collisionPadding: n,
   side: c,
   sideOffset: u,
-  width: p,
+  width: f,
   ...d
 }) => {
-  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;
+  const l = B(k), p = e ?? l.align ?? "center", C = u ?? l.sideOffset ?? 4, v = c ?? l.side ?? "bottom", h = f ?? 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,
     {
-      align: f,
+      align: p,
       alignOffset: t,
-      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 p-5 shadow-lg outline-none",
+      className: E(
+        "bg-popover-bg text-text-primary motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-hover-card-content-transform-origin] rounded-lg p-5 shadow-lg outline-none",
         r
       ),
       collisionBoundary: g,
@@ -202,9 +202,9 @@ const de = ({
       "data-slot": "hover-card-content",
       "data-testid": "spectral-hover-card-content",
       side: v,
-      sideOffset: m,
+      sideOffset: C,
       style: {
-        width: typeof C == "number" ? `${C}px` : C === "trigger-width" ? "var(--radix-hover-card-trigger-width)" : "fit-content"
+        width: typeof h == "number" ? `${h}px` : h === "trigger-width" ? "var(--radix-hover-card-trigger-width)" : "fit-content"
       },
       ...d
     }

package/dist/IconsAnimated/PanelLeftCloseIcon.js

@@ -3,8 +3,8 @@ import "../styles/main.css";
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import { cn as f } from "../utils/twUtils.js";
 import { useRef as p, useImperativeHandle as x, useCallback as i } from "react";
-import { u as v } from "../use-animation-zNd5Nq85.js";
-import { m as A } from "../proxy-Cukf-VVj.js";
+import { u as v } from "../use-animation-CR-SdV2l.js";
+import { m as A } from "../proxy-CgaCj1WQ.js";
 const w = {
   times: [0, 0.4, 1],
   duration: 0.5

package/dist/IconsAnimated/PanelLeftOpenIcon.js

@@ -3,8 +3,8 @@ 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-zNd5Nq85.js";
-import { m as A } from "../proxy-Cukf-VVj.js";
+import { u as v } from "../use-animation-CR-SdV2l.js";
+import { m as A } from "../proxy-CgaCj1WQ.js";
 const w = {
   times: [0, 0.4, 1],
   duration: 0.5

package/dist/Input/InputUtils.d.ts

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

package/dist/Input/InputUtils.js

@@ -12,17 +12,17 @@ const h = (t) => {
       return i.observe(e.current), () => {
         i.disconnect();
       };
-    } else
-      s(0);
+    }
+    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,
-    inputType: t ? "text" : "password"
+    toggleVisibility: s
   };
 }, v = (t, r) => {
   const [s, e] = u(!1), n = f(

package/dist/Input.d.ts

@@ -18,7 +18,7 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onC
     value?: string;
 };
 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 & {
+    ({ className, clearOnFocus, disabled, endIcon, errorMessage, id, label, labelClassName, name, onBlur, onChange, onFocus, placeholder, prefix, ref, required, showClearButton, startIcon, state, suppressHydrationWarning, type, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: InputProps & {
         ref?: Ref<HTMLInputElement>;
     }): ReactElement;
     displayName: string;

package/dist/Input.js

@@ -77,30 +77,30 @@ const gt = (...a) => (p) => {
     i && (typeof i == "function" ? i(p) : i.current = p);
   });
 }, xt = (a) => ({
+  date: "off",
   email: "email",
+  number: "off",
   password: "current-password",
   tel: "tel",
-  url: "url",
   text: "off",
-  number: "off",
-  date: "off",
+  url: "url",
   "datetime-local": "off"
 })[a] || "off", Ct = ({
-  ref: a,
-  className: p,
-  clearOnFocus: i = !1,
-  disabled: k,
+  className: a,
+  clearOnFocus: p = !1,
+  disabled: i,
   endIcon: b,
   errorMessage: g,
-  id: P,
+  id: k,
   label: e,
-  labelClassName: R,
+  labelClassName: P,
   name: x,
   onBlur: C,
   onChange: n,
   onFocus: w,
-  placeholder: V,
+  placeholder: R,
   prefix: l,
+  ref: V,
   required: v,
   showClearButton: $ = !1,
   startIcon: y,
@@ -112,7 +112,7 @@ const gt = (...a) => (p) => {
   "aria-describedby": O,
   ...j
 }) => {
-  const m = ct(P, x), N = `${m}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = mt(k, 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 } = rt(l), { handleFocus: z } = et(i, n ? (r) => n(r.target.value) : void 0), K = d(
+  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);
     },
@@ -133,16 +133,16 @@ const gt = (...a) => (p) => {
     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 }) }),
+      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, p), "[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");
+  }, 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", R, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), "data-testid": "spectral-input-label", htmlFor: m, children: e }),
+    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(),
@@ -150,7 +150,7 @@ const gt = (...a) => (p) => {
         /* @__PURE__ */ t(
           "input",
           {
-            "aria-label": M || e,
+            "aria-label": M ?? e,
             autoComplete: xt(c),
             className: _,
             "data-state": s,
@@ -161,11 +161,11 @@ const gt = (...a) => (p) => {
             onBlur: K,
             onChange: U,
             onFocus: Q,
-            placeholder: V || e,
+            placeholder: R ?? e,
             ref: T,
             required: v,
             style: ft({
-              "--prefix-width": l ? `${G}px` : "0px"
+              "--prefix-width": l ? `${G}px` : "0"
             }),
             suppressHydrationWarning: L,
             type: c === "password" ? D : c,

package/dist/InputOTP.d.ts

@@ -1,7 +1,7 @@
 import { FormFieldState } from './utils/formFieldUtils';
 import { OTPInput, OTPInputProps } from 'input-otp';
 import { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';
-type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> & {
+export interface InputOTPBaseProps extends Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> {
     onComplete?: (...args: unknown[]) => void;
     className?: string;
     errorMessage?: string | undefined;
@@ -15,21 +15,21 @@ type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerS
     separator?: boolean;
     state?: FormFieldState;
     variant?: 'outlined' | 'filled';
-};
-export type InputOTPProps = InputOTPRootProps & ({
+}
+type InputOTPProps = InputOTPBaseProps & ({
     value: number | string;
     onChange: (newValue: number | string) => void;
 } | {
     value?: never;
     onChange?: never;
 });
-type SlotsProps = {
-    start?: number;
-    count?: number;
+interface SlotsProps {
     className?: string;
-};
+    count?: number;
+    start?: number;
+}
 export declare const InputOTP: {
-    ({ ref, autoFocus, children, className, errorMessage, id, inputMode, maxLength, name, onChange, onComplete, pattern, state, value, variant, ...props }: InputOTPProps & {
+    ({ autoFocus, children, className, errorMessage, id, inputMode, maxLength, name, onChange, onComplete, pattern, ref, state, value, variant, ...props }: InputOTPProps & {
         ref?: Ref<ComponentRef<typeof OTPInput>>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -41,9 +41,9 @@ export declare const InputOTP: {
         displayName: string;
     };
     Slot: {
-        ({ ref, index, className, ...props }: ComponentPropsWithoutRef<"div"> & {
-            ref?: Ref<ComponentRef<"div">>;
+        ({ className, index, ref, ...props }: ComponentPropsWithoutRef<"div"> & {
             index: number;
+            ref?: Ref<ComponentRef<"div">>;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };