@code0-tech/pictor 0.2.3 → 0.4.0

package/dist/components/form/EmailInput.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { InputProps } from './Input';
+interface EmailInputProps extends Omit<InputProps<string | null>, "wrapperComponent" | "type"> {
+    clearable?: boolean;
+}
+export declare const emailValidation: (email: string) => boolean;
+export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps>;
+export {};

package/dist/components/form/EmailInput.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "react";
+import { Input as m } from "./Input.js";
+import { IconX as l } from "@tabler/icons-react";
+import { Button as f } from "../button/Button.js";
+import { clearInputElement as s } from "./Input.utils.js";
+const p = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/, d = (t) => p.test(t), R = r.forwardRef((t, x) => {
+  x = x || r.useRef(null);
+  const {
+    clearable: e = !1,
+    right: n,
+    ...c
+  } = t, i = () => {
+    s(x.current);
+  }, a = [n];
+  return e && a.push(/* @__PURE__ */ o(f, { onClick: i, children: /* @__PURE__ */ o(l, { size: 13 }) })), /* @__PURE__ */ o(m, { right: a, type: "email", ref: x, ...c });
+});
+export {
+  R as EmailInput,
+  d as emailValidation
+};

package/dist/components/form/Input.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Code0Component } from '../../utils';
+import { ValidationProps } from './useForm';
+import { InputSuggestion } from './InputSuggestion';
+import { InputSyntaxSegment } from './Input.syntax.hook';
+export type Code0Input = Omit<Code0Component<HTMLInputElement>, "left" | "right" | "title" | "defaultValue" | "value">;
+export interface InputProps<T> extends Code0Input, ValidationProps<T> {
+    suggestions?: InputSuggestion[];
+    suggestionsHeader?: React.ReactNode;
+    suggestionsFooter?: React.ReactNode;
+    onSuggestionSelect?: (suggestion: InputSuggestion) => void;
+    transformSyntax?: (value: T, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[];
+    validationUsesSyntax?: boolean;
+    disableOnValue?: (value: T) => boolean;
+    filterSuggestionsByLastToken?: boolean;
+    onLastTokenChange?: (token: string | null) => void;
+    enforceUniqueSuggestions?: boolean;
+    suggestionsEmptyState?: React.ReactNode;
+    wrapperComponent?: Code0Component<HTMLDivElement>;
+    right?: React.ReactNode;
+    left?: React.ReactNode;
+    leftType?: "action" | "placeholder" | "icon";
+    rightType?: "action" | "placeholder" | "icon";
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export type InputElement = HTMLInputElement | HTMLDivElement;
+export type InputActiveSuggestionSpan = {
+    id: number;
+    suggestion: InputSuggestion;
+    text: string;
+    start: number;
+    end: number;
+};
+export declare const Input: React.FC<InputProps<any>>;

package/dist/components/form/Input.js

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

package/dist/components/form/Input.syntax.hook.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type InputSyntaxSegment = {
+    type: "text" | "block";
+    value?: any;
+    start: number;
+    end: number;
+    visualLength?: number;
+    content?: string | React.ReactNode;
+};
+export declare const buildDefaultSyntax: (value: any) => InputSyntaxSegment[];

package/dist/components/form/Input.syntax.hook.js

@@ -0,0 +1,14 @@
+const a = (n) => {
+  const e = n ?? "", t = typeof e == "string" ? e : String(e);
+  return [{
+    type: "text",
+    value: t,
+    start: 0,
+    end: t.length,
+    visualLength: t.length,
+    content: t
+  }];
+};
+export {
+  a as buildDefaultSyntax
+};

package/dist/components/form/Input.utils.d.ts

@@ -0,0 +1,10 @@
+export declare const setElementKey: (element: HTMLElement, key: string, value: any, event: string) => void;
+export declare const clearInputElement: (element: HTMLElement | null) => void;
+export declare const setSelectionRangeSafe: (target: HTMLInputElement, start: number, end: number, direction?: "forward" | "backward" | "none") => void;
+export declare const getSelectionMetrics: (target: HTMLInputElement) => {
+    selectionStart: number;
+    selectionEnd: number;
+    rawStart: number;
+    rawEnd: number;
+    direction: string;
+};

package/dist/components/form/Input.utils.js

@@ -0,0 +1,38 @@
+const a = (t, e, n, c) => {
+  const r = Object.getOwnPropertyDescriptor(t, e)?.set, s = Object.getPrototypeOf(t), o = Object.getOwnPropertyDescriptor(s, e)?.set;
+  r && r !== o ? o?.call(t, n) : r?.call(t, n), t.dispatchEvent(new Event(c, {
+    bubbles: !0
+  }));
+}, i = (t) => {
+  if (t) {
+    if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) {
+      a(t, "value", "", "change");
+      return;
+    }
+    t.contentEditable == "true" && (t.innerHTML = "", t.dispatchEvent(new Event("input", {
+      bubbles: !0
+    })), t.dispatchEvent(new Event("change", {
+      bubbles: !0
+    })));
+  }
+}, p = (t, e, n, c) => {
+  try {
+    t.setSelectionRange(e, n, c);
+  } catch {
+  }
+}, b = (t) => {
+  const e = t.selectionStart ?? 0, n = t.selectionEnd ?? e;
+  return {
+    selectionStart: e,
+    selectionEnd: n,
+    rawStart: Math.min(e, n),
+    rawEnd: Math.max(e, n),
+    direction: t.selectionDirection === "backward" ? "backward" : "forward"
+  };
+};
+export {
+  i as clearInputElement,
+  b as getSelectionMetrics,
+  a as setElementKey,
+  p as setSelectionRangeSafe
+};

package/dist/components/form/InputContentEditable.hook.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { InputSuggestion } from './InputSuggestion';
+import { InputSyntaxSegment } from './Input.syntax.hook';
+/**
+ * =========================
+ * Types
+ * =========================
+ */
+type EditorPart = string | InputSuggestion | any;
+export type UseContentEditableControllerProps = {
+    editorRef: React.RefObject<HTMLElement>;
+    transformSyntax?: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[]) | undefined;
+    filterSuggestionsByLastToken?: boolean;
+    onLastTokenChange?: (token: string | null) => void;
+    onStateChange?: (payload: {
+        value: string;
+        tokens: InputSuggestion[];
+        segments?: InputSyntaxSegment[] | null;
+    }) => void;
+};
+export type UseContentEditableControllerReturn = {
+    editorHtml: string;
+    setEditorHtml: React.Dispatch<React.SetStateAction<string>>;
+    initializeFromExternalValue: (externalValue: string) => string;
+    updateEditorState: (rootEl: HTMLElement | null) => void;
+    takePendingSelection: () => {
+        start: number;
+        end: number;
+    } | null;
+    applySuggestionValueSyntax: (suggestion: InputSuggestion) => void;
+    handlePaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    handleChange: (event: React.FormEvent<HTMLDivElement>) => void;
+    handleKeyDownCapture: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
+};
+export declare const serializeEditorParts: (rootEl: HTMLElement | null) => EditorPart[];
+/**
+ * ✅ FIX (caret after deleting last token):
+ * Selection can have startContainer = ELEMENT_NODE with an offset (i.e. “between childNodes”).
+ */
+export declare const getSelectionOffsetsInValue: (rootEl: HTMLElement) => {
+    start: number;
+    end: number;
+} | null;
+export declare const setSelectionOffsetsInValue: (rootEl: HTMLElement, start: number, end: number) => void;
+/**
+ * =========================
+ * Hook
+ * =========================
+ */
+export declare const useContentEditableController: (props: UseContentEditableControllerProps) => UseContentEditableControllerReturn;
+export {};