@code0-tech/pictor 0.0.0-mvp.22 → 0.0.0-mvp.24

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { TextInputProps } from '../form';
+import { DUserView } from './DUser.view';
+export interface DUserInputProps extends TextInputProps {
+    filter?: (user: DUserView, index: number) => boolean;
+}
+export declare const DUserInput: React.FC<DUserInputProps>;

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

@@ -0,0 +1,98 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import x from "react";
+import "../../_virtual/compiler-runtime.js";
+import "@radix-ui/react-checkbox";
+import "merge-props";
+import { IconArrowUp as S, IconArrowDown as b, IconCornerDownLeft as I } 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 L } from "../form/TextInput.js";
+import { Badge as m } from "../badge/Badge.js";
+import { Text as l } from "../text/Text.js";
+import { useService as U, useStore as D } from "../../utils/contextStore.js";
+import { DUserReactiveService as g } from "./DUser.service.js";
+import { MenuLabel as w, MenuItem as z } from "../menu/Menu.js";
+import { Flex as s } from "../flex/Flex.js";
+import { Spacing as B } from "../spacing/Spacing.js";
+const P = (p) => {
+  const {
+    filter: h = () => !0,
+    ...d
+  } = p, u = U(g), f = D(g), y = x.useMemo(() => u.values().filter(h).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"
+  })), [f]);
+  return /* @__PURE__ */ e(L, { placeholder: "Enter users", suggestionsEmptyState: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(l, { children: "No user found" }) }), onLastTokenChange: (r) => {
+    u.getByUsername(r);
+  }, suggestionsFooter: /* @__PURE__ */ e(w, { 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(S, { size: 12 }) }),
+        /* @__PURE__ */ e(m, { border: !0, children: /* @__PURE__ */ e(b, { size: 12 }) })
+      ] }),
+      "move"
+    ] }),
+    /* @__PURE__ */ e(B, { spacing: "xxs" }),
+    /* @__PURE__ */ o(s, { align: "center", style: {
+      gap: ".35rem"
+    }, children: [
+      /* @__PURE__ */ e(m, { border: !0, children: /* @__PURE__ */ e(I, { size: 12 }) }),
+      "insert"
+    ] })
+  ] }) }), filterSuggestionsByLastToken: !0, enforceUniqueSuggestions: !0, transformSyntax: (r, a = []) => {
+    let t = 0;
+    return a.map((i, v) => {
+      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 (v == 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, {};
+      }
+    });
+  }, ...d, suggestions: y });
+};
+export {
+  P as DUserInput
+};

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>>;