@code0-tech/pictor 0.0.0-mvp.21 → 0.0.0-mvp.23

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { InputSuggestion } from './InputSuggestion';
+export type InputSyntaxSegment = {
+    type: "text" | "block";
+    start: number;
+    end: number;
+    visualLength?: number;
+    content?: string | React.ReactNode;
+};
+export type VisualizedInputSyntaxSegment = InputSyntaxSegment & {
+    visualStart: number;
+    visualEnd: number;
+};
+export declare const buildDefaultSyntax: (value: any) => InputSyntaxSegment[];
+export declare const visualizeSyntaxSegments: (syntaxSegments: InputSyntaxSegment[]) => VisualizedInputSyntaxSegment[];
+export declare const useSyntaxModel: (value: any, transformSyntax: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[]) | undefined, inputRef: React.RefObject<HTMLInputElement>, appliedSyntaxParts?: (InputSuggestion | any)[]) => {
+    syntaxSegments: InputSyntaxSegment[];
+    visualizedSyntaxSegments: VisualizedInputSyntaxSegment[];
+    expandSelectionRangeToBlockBoundaries: (rawStart: number, rawEnd: number) => {
+        start: number;
+        end: number;
+        hasBlockOverlap: boolean;
+    };
+    mapVisualIndexToRawIndex: (visualIndex: number) => number;
+    mapRawIndexToVisualIndex: (rawIndex: number) => number;
+    totalVisualLength: number;
+};

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

@@ -0,0 +1,80 @@
+import c from "react";
+const f = (i) => {
+  const a = i ?? "", s = typeof a == "string" ? a : String(a);
+  return [{
+    type: "text",
+    start: 0,
+    end: s.length,
+    visualLength: s.length,
+    content: s
+  }];
+}, p = (i) => {
+  let a = 0;
+  return i.map((s) => {
+    const h = {
+      ...s,
+      visualStart: a,
+      visualEnd: a + (s?.visualLength ?? 0)
+    };
+    return a = h.visualEnd, h;
+  });
+}, d = (i, a, s) => Math.max(a, Math.min(i, s)), y = (i, a, s, h) => {
+  const g = c.useMemo(() => {
+    if (a) {
+      const n = a(i, h);
+      if (n?.length) return n;
+    }
+    return f(i);
+  }, [h, a, i]), u = c.useMemo(() => p(g), [g]), v = c.useCallback((n, t) => {
+    let r = Math.min(n, t), l = Math.max(n, t), o = !1;
+    return u.forEach((e) => {
+      e.type !== "block" || !(r < e.end && l > e.start) || (r = Math.min(r, e.start), l = Math.max(l, e.end), o = !0);
+    }), {
+      start: r,
+      end: l,
+      hasBlockOverlap: o
+    };
+  }, [u]), m = c.useCallback((n) => {
+    const t = u.find((e) => n >= e.visualStart && n <= e.visualEnd);
+    if (!t) {
+      const e = s.current?.value.length ?? 0;
+      return d(n, 0, e);
+    }
+    const r = t.end - t.start, l = d(n - t.visualStart, 0, t?.visualLength ?? 0);
+    if (r <= 0) return t.start;
+    if (t.type === "text")
+      return Math.min(t.start + Math.round(l), t.end);
+    if ((t?.visualLength ?? 0) <= 0) return t.start;
+    const o = l / (t?.visualLength ?? 0);
+    return Math.round(t.start + o * r);
+  }, [s, u]), M = c.useCallback((n) => {
+    const t = u.find((e) => n >= e.start && n <= e.end);
+    if (!t) {
+      const e = s.current?.value.length ?? 0;
+      return d(n, 0, e);
+    }
+    const r = t.end - t.start, l = d(n - t.start, 0, r);
+    if (r <= 0) return t.visualStart;
+    if (t.type === "text")
+      return Math.min(t.visualStart + l, t.visualEnd);
+    if ((t?.visualLength ?? 0) <= 0) return t.visualStart;
+    const o = l / r;
+    return Math.min(t.visualStart + o * (t?.visualLength ?? 0), t.visualEnd);
+  }, [s, u]), S = c.useMemo(() => {
+    const n = u[u.length - 1];
+    return n ? n.visualEnd : 0;
+  }, [u]);
+  return {
+    syntaxSegments: g,
+    visualizedSyntaxSegments: u,
+    expandSelectionRangeToBlockBoundaries: v,
+    mapVisualIndexToRawIndex: m,
+    mapRawIndexToVisualIndex: M,
+    totalVisualLength: S
+  };
+};
+export {
+  f as buildDefaultSyntax,
+  y as useSyntaxModel,
+  p as visualizeSyntaxSegments
+};

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export declare const setElementKey: (element: HTMLElement, key: string, value: any, event: string) => 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;
+};
+export declare const useSyncSyntaxScroll: (inputRef: React.RefObject<HTMLInputElement | null>, syntaxRef: React.RefObject<HTMLDivElement | null>) => () => void;

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

@@ -0,0 +1,33 @@
+import { c as l } from "../../_virtual/compiler-runtime.js";
+const a = (t, r, e, c) => {
+  const o = Object.getOwnPropertyDescriptor(t, r)?.set, s = Object.getPrototypeOf(t), n = Object.getOwnPropertyDescriptor(s, r)?.set;
+  o && o !== n ? n?.call(t, e) : o?.call(t, e), t.dispatchEvent(new Event(c, {
+    bubbles: !0
+  }));
+}, S = (t, r, e, c) => {
+  try {
+    t.setSelectionRange(r, e, c);
+  } catch {
+  }
+}, p = (t) => {
+  const r = t.selectionStart ?? 0, e = t.selectionEnd ?? r;
+  return {
+    selectionStart: r,
+    selectionEnd: e,
+    rawStart: Math.min(r, e),
+    rawEnd: Math.max(r, e),
+    direction: t.selectionDirection === "backward" ? "backward" : "forward"
+  };
+}, u = (t, r) => {
+  const e = l.c(3);
+  let c;
+  return e[0] !== t || e[1] !== r ? (c = () => {
+    !t.current || !r.current || (r.current.scrollLeft = t.current.scrollLeft);
+  }, e[0] = t, e[1] = r, e[2] = c) : c = e[2], c;
+};
+export {
+  p as getSelectionMetrics,
+  a as setElementKey,
+  S as setSelectionRangeSafe,
+  u as useSyncSyntaxScroll
+};

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

@@ -1,19 +1,27 @@
 import { MenuContentProps } from '../menu/Menu';
-import { default as React } from 'react';
+import { default as React, RefObject } from 'react';
 export interface InputSuggestion {
     children: React.ReactNode;
     value: any;
-    ref?: any;
-    groupLabel?: string;
+    valueData?: any;
+    groupBy?: string;
+    insertMode?: "replace" | "append" | "prepend" | "insert";
 }
-export type InputSuggestionMenuContentProps = MenuContentProps;
+export type InputSuggestionMenuContentProps = MenuContentProps & {
+    inputRef?: RefObject<HTMLInputElement>;
+};
 export interface InputSuggestionMenuContentItemsProps {
     suggestions?: InputSuggestion[];
     onSuggestionSelect?: (suggestion: InputSuggestion) => void;
+    inputRef?: RefObject<HTMLInputElement>;
 }
 export interface InputSuggestionMenuContentItemsHandle {
-    focusFirstItem: () => void;
-    focusLastItem: () => void;
+    focusFirstItem: () => InputSuggestion | undefined;
+    focusLastItem: () => InputSuggestion | undefined;
+    highlightNextItem: () => InputSuggestion | undefined;
+    highlightPreviousItem: () => InputSuggestion | undefined;
+    selectActiveItem: () => InputSuggestion | undefined;
+    clearActiveItem: () => void;
 }
 export declare const InputSuggestionMenuContent: React.FC<InputSuggestionMenuContentProps>;
 export declare const InputSuggestionMenuContentItems: React.FC<InputSuggestionMenuContentItemsProps>;

package/dist/components/form/InputSuggestion.js

@@ -1,102 +1,156 @@
-import { jsx as p, jsxs as d } from "react/jsx-runtime";
-import { c as I } from "../../_virtual/compiler-runtime.js";
-import { MenuContent as x, MenuLabel as M, MenuItem as w } from "../menu/Menu.js";
-import l from "react";
-import { ScrollArea as R, ScrollAreaViewport as G, ScrollAreaScrollbar as A, ScrollAreaThumb as D } from "../scroll-area/ScrollArea.js";
-import { IconChevronDown as E, IconChevronUp as y } from "@tabler/icons-react";
-const k = l.forwardRef((o, h) => {
-  const e = I.c(6);
-  let a, u;
-  e[0] !== o ? ({
-    children: a,
-    ...u
-  } = o, e[0] = o, e[1] = a, e[2] = u) : (a = e[1], u = e[2]);
-  const i = l.useRef(null);
-  let c;
-  return e[3] !== a || e[4] !== u ? (c = /* @__PURE__ */ p(x, { ref: i, onContextMenuCapture: j, onInteractOutside: F, onCloseAutoFocus: O, align: "start", sideOffset: 8, ...u, children: a }), e[3] = a, e[4] = u, e[5] = c) : c = e[5], c;
-}), U = l.forwardRef((o, h) => {
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import { c as R } from "../../_virtual/compiler-runtime.js";
+import { MenuContent as D, MenuLabel as E, MenuItem as G } from "../menu/Menu.js";
+import u from "react";
+import { ScrollArea as L, ScrollAreaViewport as P, ScrollAreaScrollbar as F, ScrollAreaThumb as O } from "../scroll-area/ScrollArea.js";
+import { IconChevronDown as T, IconChevronUp as V } from "@tabler/icons-react";
+const K = u.forwardRef((l, S) => {
+  const t = R.c(12);
+  let i, h, m;
+  t[0] !== l ? ({
+    children: i,
+    inputRef: h,
+    ...m
+  } = l, t[0] = l, t[1] = i, t[2] = h, t[3] = m) : (i = t[1], h = t[2], m = t[3]);
+  const v = u.useRef(null);
+  let c, s;
+  t[4] !== h ? (c = (a) => {
+    a.preventDefault(), h?.current?.focus({
+      preventScroll: !0
+    });
+  }, s = () => h?.current?.focus({
+    preventScroll: !0
+  }), t[4] = h, t[5] = c, t[6] = s) : (c = t[5], s = t[6]);
+  let o;
+  return t[7] !== i || t[8] !== m || t[9] !== c || t[10] !== s ? (o = /* @__PURE__ */ d(D, { ref: v, onContextMenuCapture: j, onInteractOutside: k, onCloseAutoFocus: z, onOpenAutoFocus: c, onFocusCapture: s, align: "start", sideOffset: 8, ...m, children: i }), t[7] = i, t[8] = m, t[9] = c, t[10] = s, t[11] = o) : o = t[11], o;
+}), Q = u.forwardRef((l, S) => {
   const {
-    suggestions: e,
-    onSuggestionSelect: a = () => {
+    suggestions: t,
+    onSuggestionSelect: i = () => {
     },
-    ...u
-  } = o, i = l.useRef([]), [c, m] = l.useState({});
-  l.useEffect(() => {
-    if (!e) {
-      m({});
+    inputRef: h,
+    ...m
+  } = l, v = u.useRef([]), [c, s] = u.useState({}), [o, a] = u.useState(null);
+  u.useEffect(() => {
+    if (!t) {
+      s({});
       return;
     }
-    m((r) => {
-      const t = {};
-      return e.forEach((n) => {
-        n.groupLabel && (r.hasOwnProperty(n.groupLabel) ? t[n.groupLabel] = r[n.groupLabel] : t[n.groupLabel] = !1);
-      }), t;
+    s((e) => {
+      const r = {};
+      return t.forEach((f) => {
+        f.groupBy && (e.hasOwnProperty(f.groupBy) ? r[f.groupBy] = e[f.groupBy] : r[f.groupBy] = !1);
+      }), r;
     });
-  }, [e]);
+  }, [t]);
   const {
-    groupLabelCount: v,
-    visibleSuggestionCount: S
-  } = l.useMemo(() => {
-    if (!e) return {
+    groupLabelCount: B,
+    visibleSuggestionCount: M,
+    visibleSuggestions: n
+  } = u.useMemo(() => {
+    if (!t) return {
       groupLabelCount: 0,
-      visibleSuggestionCount: 0
+      visibleSuggestionCount: 0,
+      visibleSuggestions: []
     };
-    let r = 0, t = 0;
-    return e.forEach((n, s, b) => {
-      const f = s > 0 ? b[s - 1]?.groupLabel : void 0;
-      n.groupLabel && n.groupLabel !== f && (r += 1), (n.groupLabel ? c[n.groupLabel] : !1) || (t += 1);
+    let e = 0, r = 0;
+    const f = [];
+    return t.forEach((g, y, I) => {
+      const p = y > 0 ? I[y - 1]?.groupBy : void 0;
+      g.groupBy && g.groupBy !== p && (e += 1), (g.groupBy ? c[g.groupBy] : !1) || (r += 1, f.push(g));
     }), {
-      groupLabelCount: r,
-      visibleSuggestionCount: t
+      groupLabelCount: e,
+      visibleSuggestionCount: r,
+      visibleSuggestions: f
     };
-  }, [c, e]), g = (r) => {
-    m((t) => ({
-      ...t,
-      [r]: !t[r]
+  }, [c, t]);
+  u.useEffect(() => {
+    a((e) => e === null ? e : e > n.length - 1 ? n.length ? n.length - 1 : null : e);
+  }, [n]), u.useEffect(() => {
+    o !== null && v.current[o]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [o]), u.useImperativeHandle(S, () => ({
+    focusFirstItem: () => {
+      if (n.length)
+        return a(0), n[0];
+    },
+    focusLastItem: () => {
+      if (!n.length) return;
+      const e = n.length - 1;
+      return a(e), n[e];
+    },
+    highlightNextItem: () => {
+      if (!n.length) return;
+      a((r) => r === null ? 0 : Math.min(r + 1, n.length - 1));
+      const e = o === null ? 0 : Math.min(o + 1, n.length - 1);
+      return n[e];
+    },
+    highlightPreviousItem: () => {
+      if (!n.length) return;
+      a((r) => r === null ? n.length - 1 : Math.max(r - 1, 0));
+      const e = o === null ? n.length - 1 : Math.max(o - 1, 0);
+      return n[e];
+    },
+    selectActiveItem: () => {
+      if (o === null || !n[o]) return;
+      const e = n[o];
+      return setTimeout(() => i(e), 0), e;
+    },
+    clearActiveItem: () => a(null)
+  }), [o, i, n]);
+  const w = (e) => {
+    s((r) => ({
+      ...r,
+      [e]: !r[e]
     }));
   };
-  return l.useImperativeHandle(h, () => ({
-    focusFirstItem: () => i.current[0]?.focus(),
-    // @ts-ignore
-    focusLastItem: () => i.current.at(-1)?.focus()
-  }), []), i.current = [], /* @__PURE__ */ d(R, { h: `${Math.max(S + v, 1) * 27}px`, mah: "calc(var(--radix-popper-available-height) - 3rem - 69px)", ...u, children: [
-    /* @__PURE__ */ p(G, { children: e?.map((r, t, n) => {
-      const s = t > 0 ? n[t - 1]?.groupLabel : void 0, b = r.groupLabel && r.groupLabel !== s, f = r.groupLabel ? c[r.groupLabel] : !1;
-      let C = i.current.length;
-      return /* @__PURE__ */ d(l.Fragment, { children: [
-        b && r.groupLabel && /* @__PURE__ */ d(M, { onPointerDown: (L) => L.preventDefault(), onClick: () => g(r.groupLabel), style: {
+  v.current = [];
+  let A = -1;
+  return /* @__PURE__ */ C(L, { h: `${Math.max(M + B, 1) * 27}px`, mah: "calc(var(--radix-popper-available-height) - 3rem - 69px)", ...m, children: [
+    /* @__PURE__ */ d(P, { children: t?.map((e, r, f) => {
+      const g = r > 0 ? f[r - 1]?.groupBy : void 0, y = e.groupBy && e.groupBy !== g, I = e.groupBy ? c[e.groupBy] : !1, p = I ? null : ++A, b = p !== null && o === p;
+      return /* @__PURE__ */ C(u.Fragment, { children: [
+        y && e.groupBy && /* @__PURE__ */ C(E, { onPointerDown: (x) => x.preventDefault(), onClick: () => w(e.groupBy), style: {
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
           cursor: "pointer"
         }, children: [
-          /* @__PURE__ */ p("span", { children: r.groupLabel }),
-          f ? /* @__PURE__ */ p(E, { size: 16 }) : /* @__PURE__ */ p(y, { size: 16 })
+          /* @__PURE__ */ d("span", { children: e.groupBy }),
+          I ? /* @__PURE__ */ d(T, { size: 16 }) : /* @__PURE__ */ d(V, { size: 16 })
         ] }),
-        !f && /* @__PURE__ */ p(
-          w,
+        !I && /* @__PURE__ */ d(
+          G,
           {
             textValue: "",
-            onSelect: () => setTimeout(() => a(r), 0),
-            ref: (L) => i.current[C] = L,
-            children: r.children
+            onPointerDown: (x) => {
+              x.preventDefault(), h?.current?.focus({
+                preventScroll: !0
+              }), p !== null && a(p);
+            },
+            onPointerMove: () => p !== null && a(p),
+            onSelect: () => setTimeout(() => i(e), 0),
+            "data-focus": b,
+            ref: (x) => p !== null && (v.current[p] = x),
+            children: e.children
           }
         )
-      ] }, t);
+      ] }, r);
     }) }),
-    /* @__PURE__ */ p(A, { orientation: "vertical", children: /* @__PURE__ */ p(D, {}) })
+    /* @__PURE__ */ d(F, { orientation: "vertical", children: /* @__PURE__ */ d(O, {}) })
   ] });
 });
-function j(o) {
-  return o.stopPropagation();
+function j(l) {
+  return l.stopPropagation();
 }
-function F(o) {
-  return o.target instanceof HTMLInputElement && o.preventDefault();
+function k(l) {
+  return l.target instanceof HTMLInputElement && l.preventDefault();
 }
-function O(o) {
-  return o.preventDefault();
+function z(l) {
+  return l.preventDefault();
 }
 export {
-  k as InputSuggestionMenuContent,
-  U as InputSuggestionMenuContentItems
+  K as InputSuggestionMenuContent,
+  Q as InputSuggestionMenuContentItems
 };

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { VisualizedInputSyntaxSegment } from './Input.syntax.hook';
+import { InputSuggestion } from './InputSuggestion';
+export type ResolvedVisualSelectionRange = {
+    start: number;
+    end: number;
+} | null;
+export interface InputSyntaxProps {
+    transformSyntax?: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => any);
+    syntaxRef: React.RefObject<HTMLDivElement | null>;
+    visualizedSyntaxSegments: VisualizedInputSyntaxSegment[];
+    resolvedVisualSelectionRange: ResolvedVisualSelectionRange;
+    visualCaretIndex: number | null;
+    isFocused: boolean;
+    onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+}
+export declare const InputSyntax: React.FC<InputSyntaxProps>;

package/dist/components/form/InputSyntax.js

@@ -0,0 +1,52 @@
+import { jsx as x, jsxs as $ } from "react/jsx-runtime";
+import { c as b } from "../../_virtual/compiler-runtime.js";
+const k = (v, a, l, o) => {
+  let d = !1;
+  const c = (t, n) => l ? l.start < n && l.end > t : !1, i = (t) => {
+    if (!a || l || o === null || d) return !1;
+    const n = Math.round(o) === Math.round(t);
+    return n && (d = !0), n;
+  }, s = (t) => /* @__PURE__ */ x("span", { className: "input__syntax-caret", "data-visual-index": t, "aria-hidden": !0 }, `caret-${t}`);
+  return v.map((t, n) => {
+    const e = `${t.start}-${t.end}-${n}`, r = typeof t.content == "string" ? t.content : t.content ?? null, u = [t.type === "block" ? "input__syntax-block" : "input__syntax-text", t.type === "block" && c(t.visualStart, t.visualEnd) ? "input__syntax-block--selected" : ""].filter(Boolean).join(" "), y = {
+      "data-visual-start": t.visualStart,
+      "data-visual-end": t.visualEnd,
+      "data-visual-length": t.visualLength,
+      "data-raw-start": t.start,
+      "data-raw-end": t.end
+    };
+    if (typeof r == "string" && t.type === "text") {
+      const p = [];
+      return r.split("").forEach((_, h) => {
+        const f = t.visualStart + h, S = t.start + h, E = c(f, f + 1);
+        i(f) && p.push(s(f)), p.push(/* @__PURE__ */ x("span", { "data-visual-index": f, "data-raw-index": S, className: E ? "input__syntax-char--selected" : "", "aria-hidden": !0, children: _ === " " ? " " : _ }, `${e}-char-${h}`));
+      }), i(t.visualEnd) && p.push(s(t.visualEnd)), /* @__PURE__ */ x("span", { className: u, "aria-hidden": !0, ...y, children: p }, e);
+    }
+    return /* @__PURE__ */ $("span", { className: u, "aria-hidden": !0, ...y, children: [
+      i(t.visualStart) && s(t.visualStart),
+      r,
+      i(t.visualEnd) && s(t.visualEnd)
+    ] }, e);
+  });
+}, j = (v) => {
+  const a = b.c(11), {
+    transformSyntax: l,
+    syntaxRef: o,
+    visualizedSyntaxSegments: d,
+    resolvedVisualSelectionRange: c,
+    visualCaretIndex: i,
+    isFocused: s,
+    onPointerDown: t,
+    onPointerMove: n,
+    onPointerUp: e
+  } = v;
+  if (!l)
+    return null;
+  let r;
+  a[0] !== s || a[1] !== c || a[2] !== i || a[3] !== d ? (r = k(d, s, c, i), a[0] = s, a[1] = c, a[2] = i, a[3] = d, a[4] = r) : r = a[4];
+  let u;
+  return a[5] !== t || a[6] !== n || a[7] !== e || a[8] !== o || a[9] !== r ? (u = /* @__PURE__ */ x("div", { className: "input__syntax", ref: o, onPointerDown: t, onPointerMove: n, onPointerUp: e, children: r }), a[5] = t, a[6] = n, a[7] = e, a[8] = o, a[9] = r, a[10] = u) : u = a[10], u;
+};
+export {
+  j as InputSyntax
+};

package/dist/components/form/PasswordInput.js

@@ -1,18 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
-import o from "react";
-import { Input as h, setElementKey as y } from "./Input.js";
-import { IconEye as d, IconX as g } from "@tabler/icons-react";
+import n from "react";
+import { Input as h } from "./Input.js";
+import { IconEye as y, IconX as d } from "@tabler/icons-react";
 import { Button as i } from "../button/Button.js";
-const I = o.forwardRef((s, t) => {
-  t = t || o.useRef(null);
+import { setElementKey as g } from "./Input.utils.js";
+const C = n.forwardRef((s, t) => {
+  t = t || n.useRef(null);
   const {
-    clearable: a = !0,
-    visible: p = !0,
+    clearable: p = !0,
+    visible: a = !0,
     right: c,
     ...u
-  } = s, l = (r) => (t.current && y(t.current, "value", "", "change"), r.stopPropagation(), r.preventDefault(), !1), m = (r) => (t.current && t.current.type == "password" ? t.current.type = "text" : t.current && t.current.type == "text" && (t.current.type = "password"), r.stopPropagation(), r.preventDefault(), !1), n = [c];
-  return p && n.push(/* @__PURE__ */ e(i, { variant: "none", onClick: (r) => m(r), children: /* @__PURE__ */ e(d, { size: 13 }) })), a && n.push(/* @__PURE__ */ e(i, { variant: "none", onClick: (r) => l(r), children: /* @__PURE__ */ e(g, { size: 13 }) })), /* @__PURE__ */ e(h, { right: n, rightType: "action", type: "password", ref: t, ...u });
+  } = s, l = (r) => (t.current && g(t.current, "value", "", "change"), r.stopPropagation(), r.preventDefault(), !1), m = (r) => (t.current && t.current.type == "password" ? t.current.type = "text" : t.current && t.current.type == "text" && (t.current.type = "password"), r.stopPropagation(), r.preventDefault(), !1), o = [c];
+  return a && o.push(/* @__PURE__ */ e(i, { variant: "none", onClick: (r) => m(r), children: /* @__PURE__ */ e(y, { size: 13 }) })), p && o.push(/* @__PURE__ */ e(i, { variant: "none", onClick: (r) => l(r), children: /* @__PURE__ */ e(d, { size: 13 }) })), /* @__PURE__ */ e(h, { right: o, rightType: "action", type: "password", ref: t, ...u });
 });
 export {
-  I as PasswordInput
+  C as PasswordInput
 };

package/dist/components/form/TextInput.js

@@ -1,19 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import i from "react";
-import { Input as u, setElementKey as s } from "./Input.js";
-import { IconX as f } from "@tabler/icons-react";
-import { Button as h } from "../button/Button.js";
-const R = i.forwardRef((e, t) => {
+import { Input as u } from "./Input.js";
+import { IconX as s } from "@tabler/icons-react";
+import { Button as f } from "../button/Button.js";
+import { setElementKey as p } from "./Input.utils.js";
+const b = i.forwardRef((r, t) => {
   t = t || i.useRef(null);
   const {
     clearable: a = !1,
     right: c,
     ...l
-  } = e, m = (r) => {
-    t.current && s(t.current, "value", "", "change"), e.onClear && e.onClear(r);
-  }, o = [c];
-  return a && o.push(/* @__PURE__ */ n(h, { variant: "none", onClick: (r) => m(r), children: /* @__PURE__ */ n(f, { size: 13 }) })), /* @__PURE__ */ n(u, { right: o, type: "text", ref: t, ...l });
+  } = r, m = (e) => {
+    t.current && p(t.current, "value", "", "change"), r.onClear && r.onClear(e);
+  }, n = [c];
+  return a && n.push(/* @__PURE__ */ o(f, { variant: "none", onClick: (e) => m(e), children: /* @__PURE__ */ o(s, { size: 13 }) })), /* @__PURE__ */ o(u, { right: n, type: "text", ref: t, ...l });
 });
 export {
-  R as TextInput
+  b as TextInput
 };

package/dist/components/form/index.js

@@ -1,37 +1,36 @@
-import { CheckboxInput as e } from "./CheckboxInput.js";
+import { CheckboxInput as r } from "./CheckboxInput.js";
 import { EmailInput as p, emailValidation as n } from "./EmailInput.js";
-import { Input as m, setElementKey as i } from "./Input.js";
-import { InputDescription as I } from "./InputDescription.js";
-import { InputLabel as s } from "./InputLabel.js";
-import { InputMessage as d } from "./InputMessage.js";
-import { InputSuggestionMenuContent as g, InputSuggestionMenuContentItems as P } from "./InputSuggestion.js";
-import { NumberInput as c } from "./NumberInput.js";
-import { PasswordInput as F } from "./PasswordInput.js";
-import { PinInput as S, PinInputField as h, PinInputHiddenField as w } from "./PinInput.js";
+import { Input as m } from "./Input.js";
+import { InputDescription as x } from "./InputDescription.js";
+import { InputLabel as f } from "./InputLabel.js";
+import { InputMessage as s } from "./InputMessage.js";
+import { InputSuggestionMenuContent as l, InputSuggestionMenuContentItems as g } from "./InputSuggestion.js";
+import { NumberInput as b } from "./NumberInput.js";
+import { PasswordInput as C } from "./PasswordInput.js";
+import { PinInput as M, PinInputField as S, PinInputHiddenField as h } from "./PinInput.js";
 import { RadioGroup as R } from "./RadioGroup.js";
-import { RadioInput as y } from "./RadioInput.js";
+import { RadioInput as D } from "./RadioInput.js";
 import { SwitchInput as G } from "./SwitchInput.js";
-import { TextInput as K } from "./TextInput.js";
-import { useForm as N } from "./useForm.js";
+import { TextInput as L } from "./TextInput.js";
+import { useForm as T } from "./useForm.js";
 export {
-  e as CheckboxInput,
+  r as CheckboxInput,
   p as EmailInput,
   m as Input,
-  I as InputDescription,
-  s as InputLabel,
-  d as InputMessage,
-  g as InputSuggestionMenuContent,
-  P as InputSuggestionMenuContentItems,
-  c as NumberInput,
-  F as PasswordInput,
-  S as PinInput,
-  h as PinInputField,
-  w as PinInputHiddenField,
+  x as InputDescription,
+  f as InputLabel,
+  s as InputMessage,
+  l as InputSuggestionMenuContent,
+  g as InputSuggestionMenuContentItems,
+  b as NumberInput,
+  C as PasswordInput,
+  M as PinInput,
+  S as PinInputField,
+  h as PinInputHiddenField,
   R as RadioGroup,
-  y as RadioInput,
+  D as RadioInput,
   G as SwitchInput,
-  K as TextInput,
+  L as TextInput,
   n as emailValidation,
-  i as setElementKey,
-  N as useForm
+  T as useForm
 };

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

@@ -0,0 +1,3 @@
+import { InputSyntaxSegment } from './Input.syntax.hook';
+export declare const visualIndexToRawIndex: (visualIndex: number, segments: InputSyntaxSegment[]) => number;
+export declare const rawIndexToVisualIndex: (rawIndex: number, segments: InputSyntaxSegment[]) => number;