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

package/dist/components/d-user/DUserContent.js

@@ -1,10 +1,10 @@
 import { jsx as d, jsxs as p } from "react/jsx-runtime";
 import { c as V } from "../../_virtual/compiler-runtime.js";
-import B from "react";
-import { Flex as h } from "../flex/Flex.js";
-import { Avatar as E } from "../avatar/Avatar.js";
-import { useUserSession as k } from "./DUser.session.hook.js";
-import { useService as w } from "../../utils/contextStore.js";
+import w from "react";
+import { Flex as u } from "../flex/Flex.js";
+import { Avatar as B } from "../avatar/Avatar.js";
+import { useUserSession as E } from "./DUser.session.hook.js";
+import { useService as k } from "../../utils/contextStore.js";
 import "merge-props";
 import { DUserReactiveService as F } from "./DUser.service.js";
 import { Text as R } from "../text/Text.js";
@@ -13,71 +13,71 @@ import { IconMailCheck as M } from "@tabler/icons-react";
 import "../button/Button.js";
 const Z = (D) => {
   const e = V.c(37), {
-    userId: u,
-    onRemove: A
-  } = D, z = A === void 0 ? T : A, b = w(F), I = k(), [U, $] = B.useState(!1);
+    userId: x,
+    onRemove: z
+  } = D, A = z === void 0 ? O : z, b = k(F), I = E(), [U, T] = w.useState(!1);
+  let h;
+  e[0] !== x || e[1] !== b ? (h = b.getById(x), e[0] = x, e[1] = b, e[2] = h) : h = e[2];
+  const r = h, j = I?.user?.id === r.id;
   let y;
-  e[0] !== u || e[1] !== b ? (y = b.getById(u), e[0] = u, e[1] = b, e[2] = y) : y = e[2];
-  const t = y, j = I?.user?.id === t.id;
-  let g;
-  e[3] === Symbol.for("react.memo_cache_sentinel") ? (g = {
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (y = {
     gap: ".7rem"
-  }, e[3] = g) : g = e[3];
-  let r;
-  e[4] !== t.username ? (r = /* @__PURE__ */ d(E, { identifier: t.username, bg: "transparent" }), e[4] = t.username, e[5] = r) : r = e[5];
-  let v;
-  e[6] === Symbol.for("react.memo_cache_sentinel") ? (v = {
+  }, e[3] = y) : y = e[3];
+  let t;
+  e[4] !== r.username ? (t = /* @__PURE__ */ d(B, { identifier: r.username, bg: "transparent" }), e[4] = r.username, e[5] = t) : t = e[5];
+  let g;
+  e[6] === Symbol.for("react.memo_cache_sentinel") ? (g = {
     gap: ".35rem",
     flexDirection: "column"
-  }, e[6] = v) : v = e[6];
-  let S;
-  e[7] === Symbol.for("react.memo_cache_sentinel") ? (S = {
+  }, e[6] = g) : g = e[6];
+  let v;
+  e[7] === Symbol.for("react.memo_cache_sentinel") ? (v = {
     gap: "0.35rem"
-  }, e[7] = S) : S = e[7];
+  }, e[7] = v) : v = e[7];
   let i;
-  e[8] !== t.username ? (i = /* @__PURE__ */ d(R, { size: "md", hierarchy: "primary", children: t.username }), e[8] = t.username, e[9] = i) : i = e[9];
+  e[8] !== r.username ? (i = /* @__PURE__ */ d(R, { size: "md", hierarchy: "primary", children: r.username }), e[8] = r.username, e[9] = i) : i = e[9];
   let l;
-  e[10] !== t.admin ? (l = t.admin ? /* @__PURE__ */ d(C, { color: "secondary", children: "Admin" }) : null, e[10] = t.admin, e[11] = l) : l = e[11];
+  e[10] !== r.admin ? (l = r.admin ? /* @__PURE__ */ d(C, { color: "secondary", children: "Owner" }) : null, e[10] = r.admin, e[11] = l) : l = e[11];
   let s;
-  e[12] !== i || e[13] !== l ? (s = /* @__PURE__ */ p(h, { align: "center", style: S, children: [
+  e[12] !== i || e[13] !== l ? (s = /* @__PURE__ */ p(u, { align: "center", style: v, children: [
     i,
     l
   ] }), e[12] = i, e[13] = l, e[14] = s) : s = e[14];
-  let n;
-  e[15] !== t.email ? (n = /* @__PURE__ */ d(R, { size: "md", hierarchy: "tertiary", children: t.email }), e[15] = t.email, e[16] = n) : n = e[16];
   let m;
-  e[17] !== s || e[18] !== n ? (m = /* @__PURE__ */ p(h, { style: v, children: [
+  e[15] !== r.email ? (m = /* @__PURE__ */ d(R, { size: "sm", hierarchy: "tertiary", children: r.email }), e[15] = r.email, e[16] = m) : m = e[16];
+  let n;
+  e[17] !== s || e[18] !== m ? (n = /* @__PURE__ */ p(u, { style: g, children: [
     s,
-    n
-  ] }), e[17] = s, e[18] = n, e[19] = m) : m = e[19];
-  let o;
-  e[20] !== m || e[21] !== r ? (o = /* @__PURE__ */ p(h, { style: g, align: "center", children: [
-    r,
     m
-  ] }), e[20] = m, e[21] = r, e[22] = o) : o = e[22];
-  let _;
-  e[23] === Symbol.for("react.memo_cache_sentinel") ? (_ = {
+  ] }), e[17] = s, e[18] = m, e[19] = n) : n = e[19];
+  let o;
+  e[20] !== n || e[21] !== t ? (o = /* @__PURE__ */ p(u, { style: y, align: "center", children: [
+    t,
+    n
+  ] }), e[20] = n, e[21] = t, e[22] = o) : o = e[22];
+  let S;
+  e[23] === Symbol.for("react.memo_cache_sentinel") ? (S = {
     gap: "1.3rem"
-  }, e[23] = _) : _ = e[23];
+  }, e[23] = S) : S = e[23];
   let c;
-  e[24] !== t.emailVerifiedAt ? (c = t.emailVerifiedAt ? /* @__PURE__ */ p(C, { color: "secondary", children: [
+  e[24] !== r.emailVerifiedAt ? (c = r?.emailVerifiedAt ? /* @__PURE__ */ p(C, { color: "primary", children: [
     /* @__PURE__ */ d(M, { size: 16 }),
-    /* @__PURE__ */ d(R, { size: "xs", children: "Email verified" })
-  ] }) : null, e[24] = t.emailVerifiedAt, e[25] = c) : c = e[25];
+    /* @__PURE__ */ d(R, { size: "xs", hierarchy: "tertiary", children: "Email verified" })
+  ] }) : null, e[24] = r.emailVerifiedAt, e[25] = c) : c = e[25];
   let a;
-  e[26] !== j || e[27] !== z || e[28] !== U || e[29] !== u ? (a = null, e[26] = j, e[27] = z, e[28] = U, e[29] = u, e[30] = a) : a = e[30];
+  e[26] !== j || e[27] !== A || e[28] !== U || e[29] !== r ? (a = null, e[26] = j, e[27] = A, e[28] = U, e[29] = r, e[30] = a) : a = e[30];
   let f;
-  e[31] !== c || e[32] !== a ? (f = /* @__PURE__ */ p(h, { style: _, align: "center", children: [
+  e[31] !== c || e[32] !== a ? (f = /* @__PURE__ */ p(u, { style: S, align: "center", children: [
     c,
     a
   ] }), e[31] = c, e[32] = a, e[33] = f) : f = e[33];
-  let x;
-  return e[34] !== o || e[35] !== f ? (x = /* @__PURE__ */ p(h, { justify: "space-between", align: "center", children: [
+  let _;
+  return e[34] !== o || e[35] !== f ? (_ = /* @__PURE__ */ p(u, { justify: "space-between", align: "center", children: [
     o,
     f
-  ] }), e[34] = o, e[35] = f, e[36] = x) : x = e[36], x;
+  ] }), e[34] = o, e[35] = f, e[36] = _) : _ = e[36], _;
 };
-function T() {
+function O() {
 }
 export {
   Z as DUserContent

package/dist/components/d-user/DUserInput.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextInputProps } from '../form';
+export interface DUserInputProps extends TextInputProps {
+}
+export declare const DUserInput: React.FC<DUserInputProps>;

package/dist/components/d-user/DUserInput.js

@@ -0,0 +1,97 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import v from "react";
+import "../../_virtual/compiler-runtime.js";
+import "@radix-ui/react-checkbox";
+import "merge-props";
+import { IconArrowUp as x, IconArrowDown as S, IconCornerDownLeft as b } from "@tabler/icons-react";
+import '../../assets/components/form/Input.style.css';/* empty css                       */
+import "../form/EmailInput.js";
+import "../form/Input.js";
+import "../form/InputSuggestion.js";
+import "../form/NumberInput.js";
+import "../form/PasswordInput.js";
+import "@radix-ui/react-one-time-password-field";
+import "@radix-ui/react-radio-group";
+import "../form/SwitchInput.js";
+import { TextInput as I } from "../form/TextInput.js";
+import { Badge as m } from "../badge/Badge.js";
+import { Text as l } from "../text/Text.js";
+import { useService as L, useStore as U } from "../../utils/contextStore.js";
+import { DUserReactiveService as g } from "./DUser.service.js";
+import { MenuLabel as D, MenuItem as w } from "../menu/Menu.js";
+import { Flex as s } from "../flex/Flex.js";
+import { Spacing as z } from "../spacing/Spacing.js";
+const $ = (p) => {
+  const {
+    ...h
+  } = p, u = L(g), d = U(g), f = v.useMemo(() => u.values().map((r) => ({
+    value: r.username || "",
+    children: /* @__PURE__ */ o(s, { align: "end", style: {
+      gap: "0.35rem"
+    }, children: [
+      /* @__PURE__ */ e(l, { children: r.username }),
+      /* @__PURE__ */ e(l, { size: "xs", hierarchy: "tertiary", children: r.email })
+    ] }),
+    insertMode: "insert",
+    valueData: r,
+    groupBy: "Users"
+  })), [d]);
+  return /* @__PURE__ */ e(I, { placeholder: "Enter users", suggestionsEmptyState: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(l, { children: "No user found" }) }), onLastTokenChange: (r) => {
+    u.getByUsername(r);
+  }, suggestionsFooter: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ o(s, { style: {
+    gap: ".35rem"
+  }, children: [
+    /* @__PURE__ */ o(s, { align: "center", style: {
+      gap: "0.35rem"
+    }, children: [
+      /* @__PURE__ */ o(s, { children: [
+        /* @__PURE__ */ e(m, { border: !0, children: /* @__PURE__ */ e(x, { size: 12 }) }),
+        /* @__PURE__ */ e(m, { border: !0, children: /* @__PURE__ */ e(S, { size: 12 }) })
+      ] }),
+      "move"
+    ] }),
+    /* @__PURE__ */ e(z, { spacing: "xxs" }),
+    /* @__PURE__ */ o(s, { align: "center", style: {
+      gap: ".35rem"
+    }, children: [
+      /* @__PURE__ */ e(m, { border: !0, children: /* @__PURE__ */ e(b, { size: 12 }) }),
+      "insert"
+    ] })
+  ] }) }), filterSuggestionsByLastToken: !0, enforceUniqueSuggestions: !0, transformSyntax: (r, a = []) => {
+    let t = 0;
+    return a.map((i, y) => {
+      if (typeof i == "object") {
+        const c = {
+          type: "block",
+          start: t,
+          end: t + i.value.length,
+          visualLength: 1,
+          content: /* @__PURE__ */ e(m, { color: "info", border: !0, children: /* @__PURE__ */ o(l, { style: {
+            color: "inherit"
+          }, children: [
+            "@",
+            i.value
+          ] }) })
+        };
+        return t += i.value.length, c;
+      }
+      const n = i ?? "";
+      if (n.length) {
+        if (y == a.length - 1) {
+          const c = {
+            type: "text",
+            start: t,
+            end: t + n.length,
+            visualLength: n.length,
+            content: n
+          };
+          return t += n.length, c;
+        }
+        return t += n.length, {};
+      }
+    });
+  }, ...h, suggestions: f });
+};
+export {
+  $ as DUserInput
+};

package/dist/components/d-user/DUserList.d.ts

@@ -1,10 +1,9 @@
-import { User } from '@code0-tech/sagittarius-graphql-types';
 import { DUserView } from './DUser.view';
 import { default as React } from 'react';
 import { Card } from '../card/Card';
 export interface DUserListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (user: DUserView, index: number) => boolean;
-    onSelect?: (userId: User['id']) => void;
-    onRemove?: (userId: User['id']) => void;
+    onSelect?: (user: DUserView) => void;
+    onRemove?: (user: DUserView) => void;
 }
 export declare const DUserList: React.FC<DUserListProps>;

package/dist/components/d-user/DUserList.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import p from "react";
+import d from "react";
 import { useService as u, useStore as l } from "../../utils/contextStore.js";
 import "merge-props";
 import { DUserReactiveService as t } from "./DUser.service.js";
@@ -12,9 +12,9 @@ const k = (i) => {
     onRemove: s,
     onSelect: o,
     ...c
-  } = i, n = u(t), d = l(t), f = p.useMemo(() => n.values(), [d]);
-  return /* @__PURE__ */ e(v, { ...c, children: f.filter(m).map((r) => r && r.id && /* @__PURE__ */ e(S, { border: !0, hover: !0, onClick: () => {
-    o && o(r.id);
+  } = i, n = u(t), f = l(t), p = d.useMemo(() => n.values(), [f]);
+  return /* @__PURE__ */ e(v, { ...c, children: p.filter(m).map((r) => r && r.id && /* @__PURE__ */ e(S, { border: !0, hover: !0, onClick: () => {
+    o && o(r);
   }, children: /* @__PURE__ */ e(a, { onRemove: s, userId: r?.id }) }, r.id)) });
 };
 export {

package/dist/components/d-user/DUserMenu.js

@@ -2,17 +2,18 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import o from "react";
 import { Menu as l, MenuTrigger as u, MenuPortal as d, MenuContent as h } from "../menu/Menu.js";
 import { DUserReactiveService as s } from "./DUser.service.js";
-import { useService as f, useStore as x } from "../../utils/contextStore.js";
-import { Avatar as y } from "../avatar/Avatar.js";
+import { useService as f, useStore as p } from "../../utils/contextStore.js";
+import "merge-props";
+import { Avatar as x } from "../avatar/Avatar.js";
 import { Text as c } from "../text/Text.js";
 import { Flex as m } from "../flex/Flex.js";
-const z = (t) => {
-  const n = f(s), a = x(s), r = o.useMemo(() => n.getById(t.userId), [a, n]);
+const C = (t) => {
+  const n = f(s), a = p(s), r = o.useMemo(() => n.getById(t.userId), [a, n]);
   return o.useMemo(() => /* @__PURE__ */ i(l, { ...t, children: [
     /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ i(m, { align: "center", style: {
       gap: ".5rem"
     }, children: [
-      /* @__PURE__ */ e(y, { src: r?.avatarPath ?? "", identifier: r?.username ?? "" }),
+      /* @__PURE__ */ e(x, { src: r?.avatarPath ?? "", identifier: r?.username ?? "" }),
       /* @__PURE__ */ i(m, { style: {
         flexDirection: "column"
       }, children: [
@@ -24,5 +25,5 @@ const z = (t) => {
   ] }), [r]);
 };
 export {
-  z as default
+  C as default
 };

package/dist/components/d-user/index.d.ts

@@ -3,4 +3,5 @@ export * from './DUser.view';
 export * from './DUserMenu';
 export * from './DUserCard';
 export * from './DUserList';
+export * from './DUserInput';
 export * from './DUser.session.hook';

package/dist/components/d-user/index.js

@@ -1,5 +1,5 @@
-import { DUserReactiveService as a } from "./DUser.service.js";
-import { DUserView as n } from "./DUser.view.js";
+import { DUserReactiveService as S } from "./DUser.service.js";
+import { DUserView as c } from "./DUser.view.js";
 import "react/jsx-runtime";
 import "react";
 import "../../_virtual/compiler-runtime.js";
@@ -11,14 +11,16 @@ import "js-md5";
 /* empty css                          */
 /* empty css                      */
 /* empty css                      */
-import { DUserCard as d } from "./DUserCard.js";
+import { DUserCard as v } from "./DUserCard.js";
 import { DUserList as w } from "./DUserList.js";
-import { setUserSession as L, useUserSession as R } from "./DUser.session.hook.js";
+import { DUserInput as I } from "./DUserInput.js";
+import { setUserSession as R, useUserSession as V } from "./DUser.session.hook.js";
 export {
-  d as DUserCard,
+  v as DUserCard,
+  I as DUserInput,
   w as DUserList,
-  a as DUserReactiveService,
-  n as DUserView,
-  L as setUserSession,
-  R as useUserSession
+  S as DUserReactiveService,
+  c as DUserView,
+  R as setUserSession,
+  V as useUserSession
 };

package/dist/components/dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import { Code0Component, Code0ComponentProps } from '../../utils/types';
+import { Code0Component, Code0ComponentProps } from '../../utils';
 import { default as React } from 'react';
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 export type DialogProps = Code0ComponentProps & React.ComponentProps<typeof DialogPrimitive.Root>;
@@ -12,6 +12,7 @@ export type DialogHeaderProps = Code0ComponentProps & React.ComponentProps<"div"
 export type DialogFooterProps = Code0ComponentProps & React.ComponentProps<"div">;
 export type DialogContentProps = Code0ComponentProps & React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    title?: string;
 };
 export type DialogStickyContentProps = Code0Component<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];

package/dist/components/dialog/Dialog.js

@@ -1,99 +1,107 @@
 import { jsx as n, jsxs as g } from "react/jsx-runtime";
 import { c } from "../../_virtual/compiler-runtime.js";
-import * as r from "@radix-ui/react-dialog";
-import { mergeCode0Props as s } from "../../utils/utils.js";
-import { IconX as d } from "@tabler/icons-react";
+import * as s from "@radix-ui/react-dialog";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeCode0Props as r } from "../../utils/utils.js";
+import { IconX as m } from "@tabler/icons-react";
 import '../../assets/components/dialog/Dialog.style.css';/* empty css                  */
-const v = (i) => {
+import { Button as d } from "../button/Button.js";
+import { Flex as _ } from "../flex/Flex.js";
+import { Text as h } from "../text/Text.js";
+const b = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Root, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, P = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Root, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, z = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__trigger", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__trigger", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Trigger, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, x = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Trigger, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, F = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__portal", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__portal", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Portal, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, _ = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Portal, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, u = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__close", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__close", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Close, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, m = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Close, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, D = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__overlay", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__overlay", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Overlay, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, y = (i) => {
-  const t = c.c(9);
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Overlay, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, O = (l) => {
+  const t = c.c(10);
   let e;
-  t[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ n(m, {}), t[0] = e) : e = t[0];
+  t[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ n(D, {}), t[0] = e) : e = t[0];
   let o;
-  t[1] !== i ? (o = s("dialog__content", i), t[1] = i, t[2] = o) : o = t[2];
-  const l = o;
+  t[1] !== l ? (o = r("dialog__content", l), t[1] = l, t[2] = o) : o = t[2];
+  const i = o;
   let a;
-  t[3] !== i.showCloseButton ? (a = i.showCloseButton && /* @__PURE__ */ n(_, { children: /* @__PURE__ */ n(d, { size: 16 }) }), t[3] = i.showCloseButton, t[4] = a) : a = t[4];
+  t[3] !== l.showCloseButton || t[4] !== l.title ? (a = l.showCloseButton && /* @__PURE__ */ g(_, { align: "center", justify: "space-between", children: [
+    /* @__PURE__ */ n(h, { hierarchy: "primary", size: "xl", children: l.title }),
+    /* @__PURE__ */ n(u, { asChild: !0, children: /* @__PURE__ */ n(d, { children: /* @__PURE__ */ n(m, { size: 16 }) }) })
+  ] }), t[3] = l.showCloseButton, t[4] = l.title, t[5] = a) : a = t[5];
   let f;
-  return t[5] !== i.children || t[6] !== l || t[7] !== a ? (f = /* @__PURE__ */ g(r.Portal, { children: [
+  return t[6] !== l.children || t[7] !== i || t[8] !== a ? (f = /* @__PURE__ */ g(s.Portal, { children: [
     e,
-    /* @__PURE__ */ g(r.Content, { ...l, children: [
+    /* @__PURE__ */ g(s.Content, { ...i, children: [
       a,
-      i.children
+      l.children
     ] })
-  ] }), t[5] = i.children, t[6] = l, t[7] = a, t[8] = f) : f = t[8], f;
-}, T = (i) => {
+  ] }), t[6] = l.children, t[7] = i, t[8] = a, t[9] = f) : f = t[9], f;
+}, R = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__title", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__title", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Title, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, w = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Title, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, E = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__description", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__description", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n(r.Description, { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, B = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n(s.Description, { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, H = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__header", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__header", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n("div", { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
-}, j = (i) => {
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n("div", { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
+}, I = (l) => {
   const t = c.c(4);
   let e;
-  t[0] !== i ? (e = s("dialog__footer", i), t[0] = i, t[1] = e) : e = t[1];
+  t[0] !== l ? (e = r("dialog__footer", l), t[0] = l, t[1] = e) : e = t[1];
   const o = e;
-  let l;
-  return t[2] !== o ? (l = /* @__PURE__ */ n("div", { ...o }), t[2] = o, t[3] = l) : l = t[3], l;
+  let i;
+  return t[2] !== o ? (i = /* @__PURE__ */ n("div", { ...o }), t[2] = o, t[3] = i) : i = t[3], i;
 };
 export {
-  v as Dialog,
-  _ as DialogClose,
-  y as DialogContent,
-  w as DialogDescription,
-  j as DialogFooter,
-  B as DialogHeader,
-  m as DialogOverlay,
-  x as DialogPortal,
-  T as DialogTitle,
-  P as DialogTrigger
+  b as Dialog,
+  u as DialogClose,
+  O as DialogContent,
+  E as DialogDescription,
+  I as DialogFooter,
+  H as DialogHeader,
+  D as DialogOverlay,
+  F as DialogPortal,
+  R as DialogTitle,
+  z as DialogTrigger
 };

package/dist/components/form/EmailInput.js

@@ -1,20 +1,21 @@
 import { jsx as e } from "react/jsx-runtime";
-import o from "react";
-import { Input as l, setElementKey as m } from "./Input.js";
-import { IconX as s } from "@tabler/icons-react";
-import { Button as f } from "../button/Button.js";
-const z = /(?:[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) => z.test(t), g = o.forwardRef((t, x) => {
-  x = x || o.useRef(null);
+import a from "react";
+import { Input as m } from "./Input.js";
+import { IconX as l } from "@tabler/icons-react";
+import { Button as s } from "../button/Button.js";
+import { setElementKey as f } 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])+)\])/, g = (t) => p.test(t), I = a.forwardRef((t, x) => {
+  x = x || a.useRef(null);
   const {
     clearable: r = !1,
     right: n,
     ...c
   } = t, i = () => {
-    x.current && m(x.current, "value", "", "change");
-  }, a = [n];
-  return r && a.push(/* @__PURE__ */ e(f, { onClick: i, children: /* @__PURE__ */ e(s, { size: 13 }) })), /* @__PURE__ */ e(l, { right: a, type: "email", ref: x, ...c });
+    x.current && f(x.current, "value", "", "change");
+  }, o = [n];
+  return r && o.push(/* @__PURE__ */ e(s, { onClick: i, children: /* @__PURE__ */ e(l, { size: 13 }) })), /* @__PURE__ */ e(m, { right: o, type: "email", ref: x, ...c });
 });
 export {
-  g as EmailInput,
-  d as emailValidation
+  I as EmailInput,
+  g as emailValidation
 };

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

@@ -1,16 +1,21 @@
-import { default as React, ForwardRefExoticComponent } from 'react';
-import { Code0Component } from '../../utils/types';
+import { default as React } from 'react';
+import { Code0Component } from '../../utils';
 import { ValidationProps } from './useForm';
 import { InputSuggestion } from './InputSuggestion';
-export declare const setElementKey: (element: HTMLElement, key: string, value: any, event: string) => void;
+import { InputSyntaxSegment } from './Input.syntax.hook';
 export type Code0Input = Omit<Omit<Omit<Code0Component<HTMLInputElement>, "left">, "right">, "title">;
 export interface InputProps<T> extends Code0Input, ValidationProps<T> {
     suggestions?: InputSuggestion[];
     suggestionsHeader?: React.ReactNode;
     suggestionsFooter?: React.ReactNode;
     onSuggestionSelect?: (suggestion: InputSuggestion) => void;
-    transformValue?: (value: T) => React.ReactNode | T;
+    transformSyntax?: (value: T, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[];
+    validationUsesSuggestions?: 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;
@@ -19,4 +24,11 @@ export interface InputProps<T> extends Code0Input, ValidationProps<T> {
     title?: React.ReactNode;
     description?: React.ReactNode;
 }
-export declare const Input: ForwardRefExoticComponent<InputProps<any>>;
+export type InputActiveSuggestionSpan = {
+    id: number;
+    suggestion: InputSuggestion;
+    text: string;
+    start: number;
+    end: number;
+};
+export declare const Input: React.FC<InputProps<any>>;