@code0-tech/pictor 0.0.0-mvp.30 → 0.0.0-mvp.32

package/dist/components/form/Input.js

@@ -1,21 +1,21 @@
-import { jsx as f, jsxs as z } from "react/jsx-runtime";
-import i, { useRef as y, useState as K, useMemo as L, useEffect as x } from "react";
-import Qe from "../../_virtual/react-contenteditable.js";
+import { jsxs as W, jsx as g } from "react/jsx-runtime";
+import l, { useRef as S, useState as j, useMemo as D, useEffect as I, useLayoutEffect as Ze } from "react";
 import "../../utils/contextStore.js";
-import { mergeCode0Props as le } from "../../utils/utils.js";
+import { mergeCode0Props as he } from "../../utils/utils.js";
 import '../../assets/components/form/Input.style.css';/* empty css                 */
-import { InputLabel as Xe } from "./InputLabel.js";
-import { InputDescription as Ye } from "./InputDescription.js";
-import { InputMessage as Ze } from "./InputMessage.js";
-import { Menu as _e, MenuTrigger as et, MenuPortal as tt } from "../menu/Menu.js";
-import { InputSuggestionMenuContent as nt, InputSuggestionMenuContentItems as rt } from "./InputSuggestion.js";
-import { getSelectionMetrics as ot, setElementKey as st, setSelectionRangeSafe as at } from "./Input.utils.js";
-import { Card as ut } from "../card/Card.js";
-import { useContentEditableController as it } from "./InputContentEditable.hook.js";
-const X = (u) => {
-  const k = u ?? "";
-  return typeof k == "string" ? k : String(k);
-}, $e = (u) => {
+import { InputLabel as _e } from "./InputLabel.js";
+import { InputDescription as et } from "./InputDescription.js";
+import { InputMessage as tt } from "./InputMessage.js";
+import { Menu as nt, MenuTrigger as rt, MenuPortal as ot } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as st, InputSuggestionMenuContentItems as at } from "./InputSuggestion.js";
+import { buildDefaultSyntax as ut } from "./Input.syntax.hook.js";
+import { getSelectionMetrics as it, setElementKey as lt, setSelectionRangeSafe as ct } from "./Input.utils.js";
+import { Card as ft } from "../card/Card.js";
+import { useContentEditableController as dt, setSelectionOffsetsInValue as pt } from "./InputContentEditable.hook.js";
+const q = (u) => {
+  const x = u ?? "";
+  return typeof x == "string" ? x : String(x);
+}, se = (u) => {
   if (u == null) return "";
   if (typeof u == "string") return u;
   try {
@@ -23,208 +23,220 @@ const X = (u) => {
   } catch {
     return String(u ?? "");
   }
-}, Fe = (u) => {
+}, gt = (u) => {
+  if (u && typeof u == "object") {
+    const {
+      children: x,
+      __contentHtml: J,
+      ...U
+    } = u;
+    return U;
+  }
+  return {
+    value: u
+  };
+}, Ke = (u) => {
   if (!u) return null;
-  const k = u.value ?? "", Y = u.selectionStart ?? k.length, E = k.slice(0, Y).match(/\S+$/);
-  if (!E || E.index === void 0) return null;
-  const g = E[0], $ = E.index, N = $ + g.length;
+  const x = u.value ?? "", J = u.selectionStart ?? x.length, T = x.slice(0, J).match(/\S+$/);
+  if (!T || T.index === void 0) return null;
+  const C = T[0], H = T.index, Q = H + C.length;
   return {
-    token: g,
-    start: $,
-    end: N
+    token: C,
+    start: H,
+    end: Q
   };
-}, lt = i.forwardRef((u, k) => {
+}, ht = l.forwardRef((u, x) => {
   const {
-    wrapperComponent: Y = {},
-    title: Z,
-    description: E,
-    disabled: g = !1,
-    left: $,
-    right: N,
-    leftType: Be = "icon",
-    rightType: Ae = "action",
-    formValidation: V = {
+    wrapperComponent: J = {},
+    title: U,
+    description: T,
+    disabled: C = !1,
+    left: H,
+    right: Q,
+    leftType: Ae = "icon",
+    rightType: Ne = "action",
+    formValidation: L = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
-    suggestions: l,
-    suggestionsHeader: ce,
-    suggestionsFooter: fe,
-    onSuggestionSelect: de,
-    disableOnValue: pe = () => !1,
-    transformSyntax: P,
-    validationUsesSyntax: j = !1,
-    filterSuggestionsByLastToken: h = !1,
-    enforceUniqueSuggestions: ge = !1,
-    onLastTokenChange: he,
-    suggestionsEmptyState: me,
+    suggestions: f,
+    suggestionsHeader: me,
+    suggestionsFooter: ye,
+    onSuggestionSelect: Se,
+    disableOnValue: Ce = () => !1,
+    transformSyntax: G,
+    validationUsesSyntax: ae = !1,
+    filterSuggestionsByLastToken: v = !1,
+    enforceUniqueSuggestions: ve = !1,
+    onLastTokenChange: be,
+    suggestionsEmptyState: ke,
     ...ze
   } = u, {
-    onFocus: Se,
-    onBlur: _,
-    onKeyDown: q,
-    onKeyDownCapture: ee,
-    onChange: F,
-    onInput: B,
-    ...m
-  } = ze, W = y(null), d = y(null), H = y(null), M = y(null), te = y(null), D = y(!1), Ne = y(0), Ce = y(null), ne = m.value ?? u.initialValue ?? u.defaultValue, [ye, je] = K(!1), R = y(!1), a = i.useCallback((e) => {
-    R.current = e, je(e);
-  }, []), [w, re] = K(ne), [ve, be] = K([]), [ke, oe] = K([]), [we, qe] = K(null), [xe, Ee] = K(null), o = !!P, I = L(() => pe(w), [pe, w]), v = L(() => o ? H : d, [o]);
-  i.useImperativeHandle(k, () => v.current ?? null, [v]);
-  const We = L(() => ({
-    ...m,
-    onChange: F,
-    onInput: B
-  }), [m, F, B]), He = L(() => {
+    onFocus: xe,
+    onBlur: X,
+    onKeyDown: Y,
+    onKeyDownCapture: ue,
+    onChange: P,
+    onInput: M,
+    ...b
+  } = ze, Z = S(null), y = S(null), $ = S(null), F = S(null), ie = S(null), w = S(!1), le = S(!1), We = S(0), we = S(null), ce = b.value ?? u.initialValue ?? u.defaultValue, [Ee, je] = j(!1), B = S(!1), i = l.useCallback((e) => {
+    B.current = e, je(e);
+  }, []), [h, Ve] = j(ce), [De, Ie] = j([]), [K, fe] = j([]), [Te, qe] = j(null), [A, Ue] = j(null), s = !!G, R = D(() => Ce(h), [Ce, h]), k = D(() => s ? $ : y, [s]);
+  l.useImperativeHandle(x, () => k.current ?? null);
+  const He = D(() => ({
+    ...b,
+    onChange: P,
+    onInput: M
+  }), [b, P, M]), Je = D(() => {
     const {
       value: e,
       defaultValue: t,
       ...n
-    } = m;
-    return le("input__control", n);
-  }, [m]), U = i.useCallback(() => {
-    const e = v.current;
-    !e || g || I || e.focus({
+    } = b;
+    return he("input__control", n);
+  }, [b]), _ = l.useCallback(() => {
+    const e = k.current;
+    !e || C || R || e.focus({
       preventScroll: !0
     });
-  }, [v, g, I]), T = i.useCallback(() => {
-    l && a(!0);
-  }, [l, a]), se = i.useCallback((e) => {
-    h && (qe(e), e && a(!0), he?.(e));
-  }, [h, he, a]), ae = i.useCallback((e, t) => {
-    if (!V?.setValue) return;
-    const n = m.type !== "checkbox" ? X(e) : e, r = j ? t : n;
-    Object.is(Ce.current, r) || (Ce.current = r, V.setValue(r));
-  }, [V?.setValue, m.type, j]), p = it({
-    editorRef: H,
-    transformSyntax: P,
-    filterSuggestionsByLastToken: h,
-    onLastTokenChange: se,
+  }, [k, C, R]), N = l.useCallback(() => {
+    f && i(!0);
+  }, [f, i]), de = l.useCallback((e) => {
+    v && (qe(e), e && i(!0), be?.(e));
+  }, [v, be, i]), pe = l.useCallback((e, t) => {
+    if (!L?.setValue) return;
+    const n = b.type !== "checkbox" ? q(e) : e, o = ae ? t : n;
+    Object.is(we.current, o) || (we.current = o, L.setValue(o));
+  }, [L?.setValue, b.type, ae]), p = dt({
+    editorRef: $,
+    transformSyntax: G,
+    filterSuggestionsByLastToken: v,
+    onLastTokenChange: de,
     onStateChange: ({
       value: e,
       tokens: t,
       segments: n
     }) => {
-      re(e), oe(t), Ee(n ?? null), ae(e, n ?? null);
+      Ve(e), fe(t), Ue(n ?? null), pe(e, n ?? null);
     }
-  }), Ve = y(!1);
-  x(() => {
-    if (!o || !P || Ve.current) return;
-    const e = X(ne);
-    re(e), p.initializeFromExternalValue(e), j && P && Ee(P(e, [])), Ve.current = !0;
-  }, [o, P, ne, j, p]), x(() => {
-    o || m.value !== void 0 && re(m.value);
-  }, [m.value, o]), x(() => {
-    ae(w, xe);
-  }, [ae, xe, w]), x(() => {
-    if (!l) return;
+  }), Le = S(!1);
+  I(() => {
+    if (!s || !G || Le.current) return;
+    const e = q(ce);
+    p.initializeFromExternalValue(e), Le.current = !0;
+  }, [s, G, ce, ae, p]), I(() => {
+    s || b.value !== void 0 && Ve(b.value);
+  }, [b.value, s]), I(() => {
+    pe(h, A);
+  }, [pe, A, h]), I(() => {
+    if (!f) return;
     const e = (t) => {
-      const n = t.target, r = !!H.current?.contains(n), s = !!d.current?.contains(n), c = !!te.current?.contains(n), S = !!W.current?.contains(n), C = r || s || c || S;
-      D.current = C, !C && R.current && a(!1);
+      const n = t.target, o = !!$.current?.contains(n), a = !!y.current?.contains(n), r = !!ie.current?.contains(n), m = !!Z.current?.contains(n), c = o || a || r || m;
+      w.current = c, !c && B.current && i(!1);
     };
     return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-  }, [l, a]), x(() => {
-    const e = W.current;
+  }, [f, i]), I(() => {
+    const e = Z.current;
     if (!e) return;
-    const t = () => T();
+    const t = () => N();
     return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
-  }, [T]);
-  const De = i.useCallback((e, t, n) => {
+  }, [N]);
+  const Pe = l.useCallback((e, t, n) => {
     if (e.length === 0) return t <= n.length ? t : null;
-    let r = n.indexOf(e);
-    if (r === -1) return null;
-    let s = r;
-    for (; s !== -1; )
-      Math.abs(s - t) < Math.abs(r - t) && (r = s), s = n.indexOf(e, s + 1);
-    return r;
-  }, []), J = i.useCallback((e, t) => {
+    let o = n.indexOf(e);
+    if (o === -1) return null;
+    let a = o;
+    for (; a !== -1; )
+      Math.abs(a - t) < Math.abs(o - t) && (o = a), a = n.indexOf(e, a + 1);
+    return o;
+  }, []), ee = l.useCallback((e, t) => {
     const n = [];
-    return e.forEach((r) => {
-      const s = De(r.text, r.start, t);
-      if (s === null) return;
-      const c = s + r.text.length;
-      t.slice(s, c) === r.text && n.push({
-        ...r,
-        start: s,
-        end: c
+    return e.forEach((o) => {
+      const a = Pe(o.text, o.start, t);
+      if (a === null) return;
+      const r = a + o.text.length;
+      t.slice(a, r) === o.text && n.push({
+        ...o,
+        start: a,
+        end: r
       });
     }), n;
-  }, [De]);
-  x(() => {
-    if (o) return;
-    const e = X(d.current?.value ?? w);
-    be((t) => {
-      const n = J(t, e);
-      return oe(n.map((r) => r.suggestion)), n;
+  }, [Pe]);
+  I(() => {
+    if (s) return;
+    const e = q(y.current?.value ?? h);
+    Ie((t) => {
+      const n = ee(t, e);
+      return fe(n.map((o) => o.suggestion)), n;
     });
-  }, [o, J, w]), x(() => {
-    if (!h || o) return;
-    const e = d.current;
+  }, [s, ee, h]), I(() => {
+    if (!v || s) return;
+    const e = y.current;
     if (!e) return;
-    const t = () => se(Fe(e)?.token ?? null);
+    const t = () => de(Ke(e)?.token ?? null);
     return e.addEventListener("input", t), e.addEventListener("keyup", t), e.addEventListener("mouseup", t), t(), () => {
       e.removeEventListener("input", t), e.removeEventListener("keyup", t), e.removeEventListener("mouseup", t);
     };
-  }, [h, o, se]);
-  const O = L(() => {
-    if (!h || !l) return l;
-    const e = we?.trim();
-    return e?.length ? l.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : l;
-  }, [h, we, l]), G = L(() => {
-    if (!ge || !O) return O;
-    if (o) {
-      const t = new Set((ke ?? []).map((n) => $e(n?.value ?? n)));
-      return O.filter((n) => !t.has($e(n?.value ?? n)));
+  }, [v, s, de]);
+  const z = D(() => {
+    if (!v || !f) return f;
+    const e = Te?.trim();
+    return e?.length ? f.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : f;
+  }, [v, Te, f]), te = D(() => {
+    if (!ve || !z) return z;
+    if (s) {
+      const t = new Set((K ?? []).map((n) => se(n?.value ?? n)));
+      return z.filter((n) => !t.has(se(n?.value ?? n)));
     }
-    const e = new Set(ve.map((t) => t.suggestion));
-    return O.filter((t) => !e.has(t));
-  }, [ve, ke, ge, O, o]), Ie = i.useCallback((e) => {
-    if (!d.current) return;
-    const t = typeof w == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), r = e.insertMode ?? "replace", s = d.current.value ?? "";
-    let c = s, S = null, C = 0;
-    const A = h ? Fe(d.current) : null;
-    if (h && A)
-      c = `${s.slice(0, A.start)}${n}${s.slice(A.end)}`, S = A.start + n.length, C = A.start;
+    const e = new Set(De.map((t) => t.suggestion));
+    return z.filter((t) => !e.has(t));
+  }, [De, K, ve, z, s]), Me = l.useCallback((e) => {
+    if (!y.current) return;
+    const t = typeof h == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), o = e.insertMode ?? "replace", a = y.current.value ?? "";
+    let r = a, m = null, c = 0;
+    const E = v ? Ke(y.current) : null;
+    if (v && E)
+      r = `${a.slice(0, E.start)}${n}${a.slice(E.end)}`, m = E.start + n.length, c = E.start;
     else
-      switch (r) {
+      switch (o) {
         case "append":
-          c = `${s}${n}`, S = c.length, C = s.length;
+          r = `${a}${n}`, m = r.length, c = a.length;
           break;
         case "prepend":
-          c = `${n}${s}`, S = n.length, C = 0;
+          r = `${n}${a}`, m = n.length, c = 0;
           break;
         case "insert": {
           const {
-            rawStart: b,
-            rawEnd: ie
-          } = ot(d.current);
-          c = `${s.slice(0, b)}${n}${s.slice(ie)}`, S = b + n.length, C = b;
+            rawStart: d,
+            rawEnd: O
+          } = it(y.current);
+          r = `${a.slice(0, d)}${n}${a.slice(O)}`, m = d + n.length, c = d;
           break;
         }
         case "replace":
         default:
-          c = n, S = n.length, C = 0;
+          r = n, m = n.length, c = 0;
           break;
       }
-    st(d.current, "value", c, "change"), be((b) => {
-      const ie = X(c), Te = J(b, ie), Oe = n.length ? {
-        id: Ne.current++,
+    lt(y.current, "value", r, "change"), Ie((d) => {
+      const O = q(r), re = ee(d, O), V = n.length ? {
+        id: We.current++,
         suggestion: e,
         text: n,
-        start: C,
-        end: C + n.length
-      } : null, Ke = Oe ? [...Te, Oe] : Te;
-      return oe(Ke.map((Ge) => Ge.suggestion)), Ke;
-    }), S !== null && requestAnimationFrame(() => {
-      const b = d.current;
-      b && (b.focus({
+        start: c,
+        end: c + n.length
+      } : null, oe = V ? [...re, V] : re;
+      return fe(oe.map((Ye) => Ye.suggestion)), oe;
+    }), m !== null && requestAnimationFrame(() => {
+      const d = y.current;
+      d && (d.focus({
         preventScroll: !0
-      }), at(b, S, S));
+      }), ct(d, m, m));
     });
-  }, [h, J, w]), Le = i.useCallback((e) => {
-    if (o ? p.applySuggestionValueSyntax(e) : Ie(e), de?.(e), o) {
-      const t = v.current;
+  }, [v, ee, h]), Re = l.useCallback((e) => {
+    if (s ? p.applySuggestionValueSyntax(e) : Me(e), Se?.(e), s) {
+      const t = k.current;
       requestAnimationFrame(() => {
         if (!t) return;
         const n = {
@@ -234,114 +246,183 @@ const X = (u) => {
         };
         t.dispatchEvent(new Event("input", {
           bubbles: !0
-        })), B?.(n), F?.(n);
+        })), M?.(n), P?.(n);
       });
     }
-    a(!1), D.current = !1, requestAnimationFrame(() => {
-      U();
+    i(!1), w.current = !1, requestAnimationFrame(() => {
+      _();
     });
-  }, [v, Ie, p, U, o, de, a, F, B]), Pe = i.useCallback((e) => {
-    T(), Se?.(e);
-  }, [T, Se]), Q = i.useCallback((e) => {
-    if (D.current) {
-      _?.(e);
+  }, [k, Me, p, _, s, Se, i, P, M]), Oe = l.useCallback((e) => {
+    N(), xe?.(e);
+  }, [N, xe]), ne = l.useCallback((e) => {
+    if (le.current) {
+      le.current = !1, X?.(e);
       return;
     }
-    a(!1), _?.(e);
-  }, [_, a]), Me = i.useCallback((e) => {
-    if (o) {
-      p.handleKeyDownCapture(e), ee?.(e);
+    if (w.current) {
+      X?.(e);
       return;
     }
-    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ee?.(e);
-  }, [p, o, ee]), Re = i.useCallback((e) => {
-    if (l) {
+    i(!1), X?.(e);
+  }, [X, i]), $e = l.useCallback((e) => {
+    if (s) {
+      p.handleKeyDownCapture(e), ue?.(e);
+      return;
+    }
+    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ue?.(e);
+  }, [p, s, ue]), Fe = l.useCallback((e) => {
+    if (f) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightNextItem?.() : (a(!0), setTimeout(() => M.current?.focusFirstItem?.(), 0));
+        e.preventDefault(), e.stopPropagation(), B.current ? F.current?.highlightNextItem?.() : (i(!0), setTimeout(() => F.current?.focusFirstItem?.(), 0));
         return;
       }
       if (e.key === "ArrowUp") {
-        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightPreviousItem?.() : (a(!0), setTimeout(() => M.current?.focusLastItem?.(), 0));
+        e.preventDefault(), e.stopPropagation(), B.current ? F.current?.highlightPreviousItem?.() : (i(!0), setTimeout(() => F.current?.focusLastItem?.(), 0));
         return;
       }
-      if (e.key === "Enter" && R.current) {
-        e.preventDefault(), e.stopPropagation(), M.current?.selectActiveItem?.() && a(!1);
+      if (e.key === "Enter" && B.current) {
+        e.preventDefault(), e.stopPropagation(), F.current?.selectActiveItem?.() && i(!1);
         return;
       }
-      if (e.key === "Escape" && R.current) {
-        e.preventDefault(), e.stopPropagation(), a(!1);
+      if (e.key === "Escape" && B.current) {
+        e.preventDefault(), e.stopPropagation(), i(!1);
         return;
       }
     }
-    if (o && p.handleKeyDown(e)) {
-      q?.(e);
+    if (s && p.handleKeyDown(e)) {
+      if (e.key === "Backspace" || e.key === "Delete") {
+        const n = k.current;
+        if (n) {
+          const o = {
+            type: "change",
+            target: n,
+            currentTarget: n
+          };
+          M?.(o), P?.(o);
+        }
+      }
+      Y?.(e);
       return;
     }
-    if (o && e.key === "Enter") {
-      e.preventDefault(), q?.(e);
+    if (s && e.key === "Enter") {
+      e.preventDefault(), Y?.(e);
       return;
     }
-    q?.(e);
-  }, [p, o, l, a, q]), ue = o ? /* @__PURE__ */ f(Qe, { innerRef: H, html: p.editorHtml, ...He, disabled: g || I, onChange: (e) => {
-    p.handleChange(e), F?.(e), B?.(e);
-  }, onPaste: p.handlePaste, onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, contentEditable: !g && !I }) : /* @__PURE__ */ f("input", { ref: d, ...le("input__control", We), onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, disabled: g || I }), Ue = i.useCallback((e) => {
-    if (g || I) return;
+    Y?.(e);
+  }, [k, p, s, f, i, P, M, Y]), Be = D(() => {
+    if (!s) return null;
+    const e = q(h), t = (A ?? []).filter(Boolean).filter((r) => r && (r.type === "text" || r.type === "block") && Number.isFinite(r.start) && Number.isFinite(r.end) && r.start <= r.end), n = t.length ? t : ut(e), o = (K ?? []).slice(), a = [];
+    return n.forEach((r, m) => {
+      const c = r.value ?? e.slice(r.start, r.end);
+      if (r.type === "text") {
+        const V = typeof r.content == "string" ? r.content : typeof c == "string" ? c : e.slice(r.start, r.end);
+        V?.length && a.push(V);
+        return;
+      }
+      const E = se(c);
+      let d;
+      if (o.length) {
+        const V = o[0], oe = se(V?.value ?? V);
+        (E === "" || oe === E) && (d = V, o.shift());
+      }
+      d || (d = {
+        value: c
+      });
+      const O = gt(d), re = r.content && typeof r.content != "string" || typeof r.content == "string" ? r.content : O?.label ?? O?.value ?? "";
+      a.push(/* @__PURE__ */ W(l.Fragment, { children: [
+        "​",
+        /* @__PURE__ */ g("span", { className: "input__token", contentEditable: !1, "aria-data": JSON.stringify(O), style: {
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle",
+          userSelect: "text",
+          WebkitUserSelect: "text"
+        }, children: re }),
+        "​"
+      ] }, `${m}-${E}`));
+    }), a;
+  }, [K, s, A, h]);
+  Ze(() => {
+    if (!s) return;
+    const e = $.current;
+    if (!e) return;
+    const t = p.takePendingSelection();
+    t && pt(e, t.start, t.end);
+  }, [p, s, Be]);
+  const Qe = D(() => {
+    if (!s) return "plain";
+    const e = q(h), t = K?.length ?? 0, n = A?.length ?? 0;
+    return `${e}-${t}-${n}`;
+  }, [K, s, A, h]), ge = s ? /* @__PURE__ */ g("div", { ref: $, ...Je, contentEditable: !C && !R, suppressContentEditableWarning: !0, "aria-disabled": C || R, onInput: (e) => {
+    p.updateEditorState($.current), f && (w.current = !0, le.current = !0, i(!0), requestAnimationFrame(() => {
+      w.current = !1;
+    }));
+    const t = e.currentTarget, n = {
+      type: "change",
+      target: t,
+      currentTarget: t
+    };
+    M?.(n), P?.(n);
+  }, onChange: (e) => {
+    p.handleChange(e);
+  }, onPaste: p.handlePaste, onFocus: Oe, onBlur: ne, onKeyDownCapture: $e, onKeyDown: Fe, spellCheck: !1, children: Be }, Qe) : /* @__PURE__ */ g("input", { ref: y, ...he("input__control", He), onFocus: Oe, onBlur: ne, onKeyDownCapture: $e, onKeyDown: Fe, spellCheck: !1, disabled: C || R }), Ge = l.useCallback((e) => {
+    if (C || R) return;
     const t = e.target;
-    te.current?.contains(t) || (D.current = !0, U(), T());
-  }, [g, I, U, T]);
-  x(() => {
-    const e = W.current;
+    ie.current?.contains(t) || (w.current = !0, _(), N());
+  }, [C, R, _, N]);
+  I(() => {
+    const e = Z.current;
     if (!e) return;
     const t = (n) => {
-      const r = n.relatedTarget;
-      r && e.contains(r) || Q(n);
+      const o = n.relatedTarget;
+      o && e.contains(o) || ne(n);
     };
     return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
-  }, [Q]);
-  const Je = L(() => /* @__PURE__ */ z(_e, { open: ye, modal: !1, onOpenChange: (e) => {
-    !e && D.current || a(e);
+  }, [ne]);
+  const Xe = D(() => /* @__PURE__ */ W(nt, { open: Ee, modal: !1, onOpenChange: (e) => {
+    !e && w.current || i(e);
   }, children: [
-    /* @__PURE__ */ f(et, { asChild: !0, children: /* @__PURE__ */ f("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
+    /* @__PURE__ */ g(rt, { asChild: !0, children: /* @__PURE__ */ g("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
       position: "absolute",
       inset: 0,
       opacity: 0,
       pointerEvents: "none"
     }, onMouseDown: (e) => e.preventDefault() }) }),
-    ue,
-    /* @__PURE__ */ f(tt, { children: /* @__PURE__ */ f("div", { ref: te, onPointerDownCapture: () => {
-      D.current = !0;
+    ge,
+    /* @__PURE__ */ g(ot, { children: /* @__PURE__ */ g("div", { ref: ie, onPointerDownCapture: () => {
+      w.current = !0;
     }, onMouseDownCapture: (e) => {
-      e.preventDefault(), D.current = !0;
-    }, children: /* @__PURE__ */ z(nt, { color: "secondary", inputRef: v, children: [
-      ce,
-      /* @__PURE__ */ z(ut, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
+      e.preventDefault(), w.current = !0;
+    }, children: /* @__PURE__ */ W(st, { color: "secondary", inputRef: k, children: [
+      me,
+      /* @__PURE__ */ W(ft, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
         borderWidth: "2px"
       }, children: [
-        G?.length === 0 && me,
-        !!G?.length && /* @__PURE__ */ f(
-          rt,
+        te?.length === 0 && ke,
+        !!te?.length && /* @__PURE__ */ g(
+          at,
           {
-            ref: M,
-            inputRef: v,
-            suggestions: G,
-            onSuggestionSelect: Le
+            ref: F,
+            inputRef: k,
+            suggestions: te,
+            onSuggestionSelect: Re
           }
         )
       ] }),
-      fe
+      ye
     ] }) }) })
-  ] }), [ye, ue, o, G, ce, fe, me, Le, v, a]);
-  return /* @__PURE__ */ z("div", { children: [
-    Z && /* @__PURE__ */ f(Xe, { children: Z }),
-    E && /* @__PURE__ */ f(Ye, { children: E }),
-    /* @__PURE__ */ z("div", { ref: W, ...le(`input ${V?.valid ? "" : "input--not-valid"}`, Y), onPointerDown: Ue, children: [
-      $ && /* @__PURE__ */ f("div", { className: `input__left input__left--${Be}`, children: $ }),
-      l ? Je : ue,
-      N && /* @__PURE__ */ f("div", { className: `input__right input__right--${Ae}`, children: N })
+  ] }), [Ee, ge, s, te, me, ye, ke, Re, k, i]);
+  return /* @__PURE__ */ W("div", { children: [
+    U && /* @__PURE__ */ g(_e, { children: U }),
+    T && /* @__PURE__ */ g(et, { children: T }),
+    /* @__PURE__ */ W("div", { ref: Z, ...he(`input ${L?.valid ? "" : "input--not-valid"}`, J), onPointerDown: Ge, children: [
+      H && /* @__PURE__ */ g("div", { className: `input__left input__left--${Ae}`, children: H }),
+      f ? Xe : ge,
+      Q && /* @__PURE__ */ g("div", { className: `input__right input__right--${Ne}`, children: Q })
     ] }),
-    !V?.valid && V?.notValidMessage && /* @__PURE__ */ f(Ze, { children: V.notValidMessage })
+    !L?.valid && L?.notValidMessage && /* @__PURE__ */ g(tt, { children: L.notValidMessage })
   ] });
-}), xt = lt;
+}), Lt = ht;
 export {
-  xt as Input
+  Lt as Input
 };