@code0-tech/pictor 0.6.3 → 0.7.0

package/dist/assets/components/form/EditorInput.style.css

@@ -0,0 +1 @@
+.editor-input{width:100%;flex:1 1 auto;overflow:hidden;padding:.59rem 0;position:relative;align-self:stretch}.editor-input .cm-editor{height:100%;outline:none!important}.editor-input .cm-content{padding:0;position:relative}.editor-input .cm-line{align-self:stretch;padding-left:0}

package/dist/assets/components/form/InputWrapper.style.css

@@ -0,0 +1 @@
+.input-wrapper{display:flex;z-index:1;width:100%;align-items:start;box-sizing:border-box;gap:.175rem}.input-wrapper{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input-wrapper:hover{background:#bfbfbf26;box-shadow:inset 0 1px 1px #ffffff1a}.input-wrapper:active,.input-wrapper:focus,.input-wrapper[aria-selected=true],.input-wrapper[data-state=open]{background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input-wrapper{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:1rem}.input-wrapper:has(.input-wrapper__control:focus){background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input-wrapper--not-valid{background:#1c0516;box-shadow:inset 0 1px 1px #d904291a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input-wrapper>:first-child{padding-left:.7rem}.input-wrapper__left,.input-wrapper__right{display:flex;align-items:center;justify-content:center;min-height:30px;gap:.7rem;margin:.175rem}.input-wrapper__left>button,.input-wrapper__right>button{height:100%;padding-left:0;padding-right:0}.input-wrapper__left--action,.input-wrapper__right--action{padding:0}.input-wrapper__left--placeholder,.input-wrapper__right--placeholder{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:.825rem;padding:.7rem;box-shadow:none}.input-wrapper__left--icon,.input-wrapper__right--icon{align-items:center}

package/dist/assets/components/form/SelectInput.style.css

@@ -0,0 +1 @@
+.select-input__content{padding:.35rem;position:relative;box-sizing:border-box;z-index:999}.select-input__content{border-radius:1rem}.select-input__item{border-radius:.65rem;padding:.35rem .7rem;gap:.7rem;cursor:pointer;width:100%;display:flex;align-items:center;font-size:.8rem}.select-input__item{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.select-input__item:focus{outline:none}.select-input__item{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.select-input__item:disabled,.select-input__item[data-disabled],.select-input__item[aria-disabled=true],.select-input__item--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.select-input__item{box-shadow:none}.select-input__item:focus,.select-input__item[data-focus=true]{background:#191825;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:none;width:100%}.select-input__trigger{height:-webkit-fill-available;height:stretch;width:100%;position:relative;align-self:stretch;cursor:pointer}.select-input__content--primary{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}.select-input__content--secondary{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}.select-input__content--tertiary{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}.select-input__content--success{background:#0a1814;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}.select-input__content--warning{background:#201813;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}.select-input__content--error{background:#1c0516;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}.select-input__content--info{background:#121e24;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border:rgb(25.4,23.6,37.1) 2px solid}

package/dist/components/command/Command.js

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import { c } from "../../_virtual/compiler-runtime.js";
 import { Command as a } from "cmdk";
 import "../../utils/contextStore.js";
@@ -6,11 +6,16 @@ import "react";
 import { mergeComponentProps as r } from "../../utils/component.js";
 import "js-md5";
 import { DialogPortal as u, DialogContent as h, Dialog as g, DialogOverlay as C } from "../dialog/Dialog.js";
-import '../../assets/components/form/Input.style.css';import '../../assets/components/command/Command.style.css';/* empty css                   */
+import '../../assets/components/form/SelectInput.style.css';import '../../assets/components/form/EditorInput.style.css';import '../../assets/components/form/Input.style.css';import '../../assets/components/command/Command.style.css';/* empty css                   */
 import { Badge as _ } from "../badge/Badge.js";
 import "@radix-ui/react-checkbox";
 import "@tabler/icons-react";
 /* empty css                       */
+import "../form/InputWrapper.js";
+import "@uiw/react-codemirror";
+import "@uiw/codemirror-themes";
+import "../../node_modules/@lezer/highlight/dist/index.js";
+/* empty css                             */
 import "../form/EmailInput.js";
 import "../form/Input.js";
 import "../form/InputSuggestion.js";
@@ -18,6 +23,8 @@ import "../form/NumberInput.js";
 import "../form/PasswordInput.js";
 import "@radix-ui/react-one-time-password-field";
 import "@radix-ui/react-radio-group";
+import "@radix-ui/react-select";
+/* empty css                             */
 import "../form/SwitchInput.js";
 import "../form/TextAreaInput.js";
 import { TextInput as $ } from "../form/TextInput.js";
@@ -27,28 +34,28 @@ const P = (e) => {
   t[0] !== e ? (m = r("command", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ l(a, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, H = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(a, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, X = (e) => {
   const t = c.c(11);
   let m;
-  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ l(C, {}), t[0] = m) : m = t[0];
+  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ i(C, {}), t[0] = m) : m = t[0];
   let o;
-  t[1] !== e ? (o = /* @__PURE__ */ l(P, { ...e, h: "100%", children: e.children }), t[1] = e, t[2] = o) : o = t[2];
+  t[1] !== e ? (o = /* @__PURE__ */ i(P, { ...e, h: "100%", children: e.children }), t[1] = e, t[2] = o) : o = t[2];
   let n;
   t[3] !== e.contentProps || t[4] !== o ? (n = /* @__PURE__ */ s(u, { children: [
     m,
-    /* @__PURE__ */ l(h, { className: "command__dialog", ...e.contentProps, children: o })
+    /* @__PURE__ */ i(h, { className: "command__dialog", ...e.contentProps, children: o })
   ] }), t[3] = e.contentProps, t[4] = o, t[5] = n) : n = t[5];
-  let i;
-  return t[6] !== e.dialogProps || t[7] !== e.onOpenChange || t[8] !== e.open || t[9] !== n ? (i = /* @__PURE__ */ l(g, { ...e.dialogProps, open: e.open, onOpenChange: e.onOpenChange, children: n }), t[6] = e.dialogProps, t[7] = e.onOpenChange, t[8] = e.open, t[9] = n, t[10] = i) : i = t[10], i;
-}, J = (e) => {
+  let l;
+  return t[6] !== e.dialogProps || t[7] !== e.onOpenChange || t[8] !== e.open || t[9] !== n ? (l = /* @__PURE__ */ i(g, { ...e.dialogProps, open: e.open, onOpenChange: e.onOpenChange, children: n }), t[6] = e.dialogProps, t[7] = e.onOpenChange, t[8] = e.open, t[9] = n, t[10] = l) : l = t[10], l;
+}, Y = (e) => {
   const t = c.c(4);
   let m;
   t[0] !== e ? (m = r("command__list", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ l(a.List, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, K = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(a.List, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, Z = (e) => {
   const t = c.c(10);
   let m;
   t[0] !== e.value ? (m = e.value?.toString(), t[0] = e.value, t[1] = m) : m = t[1];
@@ -64,53 +71,53 @@ const P = (e) => {
     }
   }, t[2] = e, t[3] = o) : o = t[3];
   let n;
-  t[4] !== e ? (n = /* @__PURE__ */ l($, { className: "command__input", ...e }), t[4] = e, t[5] = n) : n = t[5];
-  let i;
-  return t[6] !== m || t[7] !== o || t[8] !== n ? (i = /* @__PURE__ */ l(a.Input, { value: m, onValueChange: o, asChild: !0, children: n }), t[6] = m, t[7] = o, t[8] = n, t[9] = i) : i = t[9], i;
-}, M = (e) => {
+  t[4] !== e ? (n = /* @__PURE__ */ i($, { className: "command__input", ...e }), t[4] = e, t[5] = n) : n = t[5];
+  let l;
+  return t[6] !== m || t[7] !== o || t[8] !== n ? (l = /* @__PURE__ */ i(a.Input, { value: m, onValueChange: o, asChild: !0, children: n }), t[6] = m, t[7] = o, t[8] = n, t[9] = l) : l = t[9], l;
+}, p = (e) => {
   const t = c.c(4);
   let m;
   t[0] !== e ? (m = r("command__empty", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ l(a.Empty, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, Q = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Empty, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, tt = (e) => {
   const t = c.c(4);
   let m;
   t[0] !== e ? (m = r("command__group", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ l(a.Group, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, U = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Group, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, et = (e) => {
   const t = c.c(4);
   let m;
   t[0] !== e ? (m = r("command__item", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ l(a.Item, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, W = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Item, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, nt = (e) => {
   const t = c.c(4);
   let m;
   t[0] !== e ? (m = r("command__separator", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ l(a.Separator, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, X = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Separator, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, mt = (e) => {
   const t = c.c(5);
   let m;
   t[0] !== e ? (m = r("command__shortcut", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== e.children || t[3] !== o ? (n = /* @__PURE__ */ l(_, { ...o, children: e.children }), t[2] = e.children, t[3] = o, t[4] = n) : n = t[4], n;
+  return t[2] !== e.children || t[3] !== o ? (n = /* @__PURE__ */ i(_, { ...o, children: e.children }), t[2] = e.children, t[3] = o, t[4] = n) : n = t[4], n;
 };
 export {
   P as Command,
-  H as CommandDialog,
-  M as CommandEmpty,
-  Q as CommandGroup,
-  K as CommandInput,
-  U as CommandItem,
-  J as CommandList,
-  W as CommandSeparator,
-  X as CommandShortcut
+  X as CommandDialog,
+  p as CommandEmpty,
+  tt as CommandGroup,
+  Z as CommandInput,
+  et as CommandItem,
+  Y as CommandList,
+  nt as CommandSeparator,
+  mt as CommandShortcut
 };

package/dist/components/editor/Editor.d.ts

@@ -12,7 +12,7 @@ export interface EditorRendererProps {
 export interface EditorTokenHighlights {
     [tokenName: string]: (props: EditorRendererProps) => React.ReactNode;
 }
-export interface EditorInputProps extends Omit<Component<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'>, ValidationProps<any> {
+export interface EditorProps extends Omit<Component<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'>, ValidationProps<any> {
     language?: 'json' | StreamLanguage<unknown>;
     tokenizer?: EditorTokenizer;
     tokenHighlights?: EditorTokenHighlights;
@@ -28,4 +28,4 @@ export interface EditorInputProps extends Omit<Component<HTMLDivElement>, 'onCha
     basicSetup?: BasicSetupOptions;
     tokenStyles?: TagStyle[];
 }
-export declare const Editor: React.FC<EditorInputProps>;
+export declare const Editor: React.FC<EditorProps>;

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ValidationProps } from './useForm';
+import { InputWrapperProps } from './InputWrapper';
+import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import { Extension } from '@uiw/react-codemirror';
+import { StreamLanguage, TagStyle } from '@codemirror/language';
+export interface EditorInputProps extends Omit<InputWrapperProps, 'onChange'>, ValidationProps<any> {
+    language?: StreamLanguage<unknown>;
+    suggestions?: (context: CompletionContext) => CompletionResult;
+    extensions?: Extension[];
+    disabled?: boolean;
+    readonly?: boolean;
+    tokenStyles?: TagStyle[];
+    onChange?: (value: string) => void;
+}
+export declare const EditorInput: React.FC<EditorInputProps>;

package/dist/components/form/EditorInput.js

@@ -0,0 +1,69 @@
+import { jsx as a } from "react/jsx-runtime";
+import x from "react";
+import { InputWrapper as y } from "./InputWrapper.js";
+import T from "@uiw/react-codemirror";
+import { createTheme as B } from "@uiw/codemirror-themes";
+import { tags as t } from "../../node_modules/@lezer/highlight/dist/index.js";
+import "../../utils/contextStore.js";
+import { mergeComponentProps as C } from "../../utils/component.js";
+import { hashToColor as e } from "../../utils/color.js";
+import '../../assets/components/form/EditorInput.style.css';/* empty css                       */
+const N = (i) => {
+  const {
+    title: g,
+    right: s,
+    left: m,
+    rightType: l,
+    leftType: c,
+    language: p,
+    description: u,
+    extensions: h = [],
+    tokenStyles: r = [],
+    formValidation: o,
+    onChange: f,
+    ...b
+  } = i, d = [...h, p], k = x.useMemo(() => B({
+    theme: "light",
+    settings: {
+      background: "transparent",
+      backgroundImage: "",
+      foreground: "rgba(255,255,255, 0.75)",
+      caret: "gray",
+      selection: "rgba(112,179,255,0.25)",
+      selectionMatch: "rgba(112,179,255,0.1)",
+      fontSize: "0.8rem",
+      gutterBackground: "transparent",
+      gutterForeground: "rgba(255,255,255, 0.5)",
+      gutterBorder: "transparent",
+      gutterActiveForeground: "rgba(255,255,255, 1)",
+      lineHighlight: "rgba(255,255,255, 0.1)"
+    },
+    styles: [{
+      tag: t.squareBracket,
+      color: e("squareBracket")
+    }, {
+      tag: t.bracket,
+      color: e("bracket")
+    }, {
+      tag: t.string,
+      color: e("Text")
+    }, {
+      tag: t.bool,
+      color: e("Boolean")
+    }, {
+      tag: t.number,
+      color: e("Number")
+    }, ...r]
+  }), [r]);
+  return /* @__PURE__ */ a(y, { title: g, description: u, right: s, left: m, rightType: l, leftType: c, formValidation: o, children: /* @__PURE__ */ a(T, { extensions: d, onChange: (n) => {
+    f?.(n), o?.setValue(n);
+  }, theme: k, ...C("editor-input", b), basicSetup: {
+    lineNumbers: !1,
+    foldGutter: !1,
+    highlightActiveLine: !1,
+    highlightActiveLineGutter: !1
+  } }) });
+};
+export {
+  N as EditorInput
+};

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

@@ -0,0 +1,13 @@
+import { Component } from '../../utils';
+import { default as React } from 'react';
+import { ValidationProps } from './useForm';
+export interface InputWrapperProps<T = any> extends Omit<Component<HTMLElement>, 'left' | 'right' | 'title' | "defaultValue" | "value">, ValidationProps<T> {
+    right?: React.ReactNode;
+    left?: React.ReactNode;
+    leftType?: "action" | "placeholder" | "icon";
+    rightType?: "action" | "placeholder" | "icon";
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    wrapperComponent?: Component<HTMLDivElement>;
+}
+export declare const InputWrapper: React.ForwardRefExoticComponent<InputWrapperProps>;

package/dist/components/form/InputWrapper.js

@@ -0,0 +1,62 @@
+import { jsxs as $, jsx as a, Fragment as R } from "react/jsx-runtime";
+import { c as j } from "../../_virtual/compiler-runtime.js";
+import "../../utils/contextStore.js";
+import N from "react";
+import { mergeComponentProps as b } from "../../utils/component.js";
+import "js-md5";
+import { InputMessage as D } from "./InputMessage.js";
+import { InputLabel as E } from "./InputLabel.js";
+import { InputDescription as F } from "./InputDescription.js";
+import '../../assets/components/form/InputWrapper.style.css';/* empty css                        */
+const K = N.forwardRef((C, L) => {
+  const e = j.c(29), {
+    children: _,
+    wrapperComponent: m,
+    left: f,
+    right: c,
+    leftType: M,
+    rightType: T,
+    title: d,
+    description: u,
+    formValidation: h
+  } = C;
+  let g;
+  e[0] !== m ? (g = m === void 0 ? {} : m, e[0] = m, e[1] = g) : g = e[1];
+  const V = g, x = M === void 0 ? "icon" : M, y = T === void 0 ? "action" : T;
+  let v;
+  e[2] !== h ? (v = h === void 0 ? {
+    valid: !0,
+    notValidMessage: null,
+    setValue: null
+  } : h, e[2] = h, e[3] = v) : v = e[3];
+  const t = v;
+  let i;
+  e[4] !== d ? (i = d && /* @__PURE__ */ a(E, { children: d }), e[4] = d, e[5] = i) : i = e[5];
+  let r;
+  e[6] !== u ? (r = u && /* @__PURE__ */ a(F, { children: u }), e[6] = u, e[7] = r) : r = e[7];
+  const I = `input-wrapper ${t?.valid ? "" : "input-wrapper--not-valid"}`;
+  let l;
+  e[8] !== I || e[9] !== V ? (l = b(I, V), e[8] = I, e[9] = V, e[10] = l) : l = e[10];
+  let o;
+  e[11] !== f || e[12] !== x ? (o = f && /* @__PURE__ */ a("div", { className: `input-wrapper__left input__left--${x}`, children: f }), e[11] = f, e[12] = x, e[13] = o) : o = e[13];
+  let p;
+  e[14] !== c || e[15] !== y ? (p = c && /* @__PURE__ */ a("div", { className: `input-wrapper__right input-wrapper__right--${y}`, children: c }), e[14] = c, e[15] = y, e[16] = p) : p = e[16];
+  let n;
+  e[17] !== _ || e[18] !== o || e[19] !== p || e[20] !== l ? (n = /* @__PURE__ */ $("div", { ...l, children: [
+    o,
+    _,
+    p
+  ] }), e[17] = _, e[18] = o, e[19] = p, e[20] = l, e[21] = n) : n = e[21];
+  let s;
+  e[22] !== t ? (s = !t?.valid && t?.notValidMessage && /* @__PURE__ */ a(D, { children: t.notValidMessage }), e[22] = t, e[23] = s) : s = e[23];
+  let w;
+  return e[24] !== n || e[25] !== s || e[26] !== i || e[27] !== r ? (w = /* @__PURE__ */ $(R, { children: [
+    i,
+    r,
+    n,
+    s
+  ] }), e[24] = n, e[25] = s, e[26] = i, e[27] = r, e[28] = w) : w = e[28], w;
+});
+export {
+  K as InputWrapper
+};

package/dist/components/form/PasswordInput.js

@@ -1,55 +1,55 @@
-import { jsxs as l, Fragment as M, jsx as t } from "react/jsx-runtime";
-import p from "react";
+import { jsxs as i, Fragment as M, jsx as t } from "react/jsx-runtime";
+import u from "react";
 import { Input as V } from "./Input.js";
 import { IconX as s, IconCheck as c, IconEye as x } from "@tabler/icons-react";
-import { Button as u } from "../button/Button.js";
-import { clearInputElement as D } from "./Input.utils.js";
+import { Button as p } from "../button/Button.js";
+import { clearInputElement as w } from "./Input.utils.js";
 import { Flex as o } from "../flex/Flex.js";
 import { Text as a } from "../text/Text.js";
-const E = p.forwardRef((n, e) => {
-  e = e || p.useRef(null);
+const A = u.forwardRef((n, e) => {
+  e = e || u.useRef(null);
   const {
     clearable: m = !0,
-    visible: g = !0,
-    right: h,
+    visible: h = !0,
+    right: g,
     formValidation: r,
     ...f
-  } = n, z = (i) => (D(e.current), i.stopPropagation(), i.preventDefault(), !1), y = (i) => (e.current instanceof HTMLInputElement && (e.current.type === "password" ? e.current.type = "text" : e.current.type === "text" && (e.current.type = "password")), i.stopPropagation(), i.preventDefault(), !1), d = [h];
-  return g && d.push(/* @__PURE__ */ t(u, { variant: "none", onClick: (i) => y(i), children: /* @__PURE__ */ t(x, { size: 13 }) })), m && d.push(/* @__PURE__ */ t(u, { variant: "none", onClick: (i) => z(i), children: /* @__PURE__ */ t(s, { size: 13 }) })), /* @__PURE__ */ l(M, { children: [
+  } = n, z = (l) => (w(e.current), l.stopPropagation(), l.preventDefault(), !1), y = (l) => (e.current instanceof HTMLInputElement && (e.current.type === "password" ? e.current.type = "text" : e.current.type === "text" && (e.current.type = "password")), !1), d = [g];
+  return h && d.push(/* @__PURE__ */ t(p, { variant: "none", onClick: (l) => y(), children: /* @__PURE__ */ t(x, { size: 13 }) })), m && d.push(/* @__PURE__ */ t(p, { variant: "none", onClick: (l) => z(l), children: /* @__PURE__ */ t(s, { size: 13 }) })), /* @__PURE__ */ i(M, { children: [
     /* @__PURE__ */ t(V, { right: d, rightType: "action", type: "password", ref: e, ...r ? {
       formValidation: {
         setValue: r.setValue,
         valid: r.valid
       }
     } : {}, ...f }),
-    !r?.valid && /* @__PURE__ */ l(o, { mt: 0.7, style: {
+    !r?.valid && /* @__PURE__ */ i(o, { mt: 0.7, style: {
       flexDirection: "column"
     }, children: [
-      /* @__PURE__ */ l(o, { align: "center", style: {
+      /* @__PURE__ */ i(o, { align: "center", style: {
         gap: "0.35rem"
       }, children: [
         r?.notValidMessage?.includes("1") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
         /* @__PURE__ */ t(a, { children: "Must be at least 8 characters" })
       ] }),
-      /* @__PURE__ */ l(o, { align: "center", style: {
+      /* @__PURE__ */ i(o, { align: "center", style: {
         gap: "0.35rem"
       }, children: [
         r?.notValidMessage?.includes("2") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
         /* @__PURE__ */ t(a, { children: "Must include a lowercase letter" })
       ] }),
-      /* @__PURE__ */ l(o, { align: "center", style: {
+      /* @__PURE__ */ i(o, { align: "center", style: {
         gap: "0.35rem"
       }, children: [
         r?.notValidMessage?.includes("3") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
         /* @__PURE__ */ t(a, { children: "Must include an uppercase letter" })
       ] }),
-      /* @__PURE__ */ l(o, { align: "center", style: {
+      /* @__PURE__ */ i(o, { align: "center", style: {
         gap: "0.35rem"
       }, children: [
         r?.notValidMessage?.includes("4") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
         /* @__PURE__ */ t(a, { children: "Must include a number" })
       ] }),
-      /* @__PURE__ */ l(o, { align: "center", style: {
+      /* @__PURE__ */ i(o, { align: "center", style: {
         gap: "0.35rem"
       }, children: [
         r?.notValidMessage?.includes("5") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
@@ -57,12 +57,12 @@ const E = p.forwardRef((n, e) => {
       ] })
     ] })
   ] });
-}), P = (n) => {
+}), E = (n) => {
   if (!n) return "12345";
   let e = null;
   return n.length < 8 && (e = (e ?? "") + "1"), /[a-z]/.test(n) || (e = (e ?? "") + "2"), /[A-Z]/.test(n) || (e = (e ?? "") + "3"), /[0-9]/.test(n) || (e = (e ?? "") + "4"), /[^A-Za-z0-9]/.test(n) || (e = (e ?? "") + "5"), e;
 };
 export {
-  E as PasswordInput,
-  P as passwordValidation
+  A as PasswordInput,
+  E as passwordValidation
 };

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

@@ -0,0 +1,23 @@
+import { Color, ComponentProps } from '../../utils';
+import { default as React } from 'react';
+import { InputWrapperProps } from './InputWrapper';
+import * as RadixSelect from "@radix-ui/react-select";
+export type SelectInputProps = InputWrapperProps;
+export type SelectProps = SelectInputProps & RadixSelect.SelectProps;
+export type SelectTriggerProps = ComponentProps & RadixSelect.SelectTriggerProps;
+export type SelectValueProps = ComponentProps & RadixSelect.SelectValueProps;
+export type SelectContentProps = ComponentProps & RadixSelect.SelectContentProps & {
+    color?: Color;
+};
+export type SelectPortalProps = ComponentProps & RadixSelect.SelectPortalProps;
+export type SelectViewportProps = ComponentProps & RadixSelect.SelectViewportProps;
+export type SelectItemProps = ComponentProps & RadixSelect.SelectItemProps;
+export type SelectItemTextProps = ComponentProps & RadixSelect.SelectItemTextProps;
+export declare const SelectInput: React.FC<SelectProps>;
+export declare const SelectTrigger: React.FC<SelectTriggerProps>;
+export declare const SelectValue: React.FC<SelectValueProps>;
+export declare const SelectContent: React.FC<SelectContentProps>;
+export declare const SelectPortal: React.FC<SelectPortalProps>;
+export declare const SelectViewport: React.FC<SelectViewportProps>;
+export declare const SelectItem: React.FC<SelectItemProps>;
+export declare const SelectItemText: React.FC<SelectItemTextProps>;

package/dist/components/form/SelectInput.js

@@ -0,0 +1,93 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r } from "../../_virtual/compiler-runtime.js";
+import * as s from "@radix-ui/react-select";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as f } from "../../utils/component.js";
+import "js-md5";
+import { InputWrapper as p } from "./InputWrapper.js";
+import '../../assets/components/form/SelectInput.style.css';/* empty css                       */
+const A = (n) => {
+  const t = r.c(24);
+  let e, l, i, c, m, u, a, _, g, T;
+  if (t[0] !== n) {
+    const {
+      title: C,
+      description: I,
+      left: y,
+      leftType: w,
+      rightType: P,
+      right: R,
+      formValidation: h,
+      ...x
+    } = n;
+    l = p, c = C, m = I, u = y, a = w, _ = R, g = P, T = h, e = s.Root, i = f("select-input", {
+      ...x,
+      onValueChange: (d) => {
+        h?.setValue(d), x.onValueChange?.(d), n.onChange?.({});
+      }
+    }), t[0] = n, t[1] = e, t[2] = l, t[3] = i, t[4] = c, t[5] = m, t[6] = u, t[7] = a, t[8] = _, t[9] = g, t[10] = T;
+  } else
+    e = t[1], l = t[2], i = t[3], c = t[4], m = t[5], u = t[6], a = t[7], _ = t[8], g = t[9], T = t[10];
+  const $ = i;
+  let S;
+  t[11] !== e || t[12] !== $ ? (S = /* @__PURE__ */ o(e, { ...$ }), t[11] = e, t[12] = $, t[13] = S) : S = t[13];
+  let V;
+  return t[14] !== l || t[15] !== c || t[16] !== m || t[17] !== u || t[18] !== a || t[19] !== _ || t[20] !== g || t[21] !== T || t[22] !== S ? (V = /* @__PURE__ */ o(l, { title: c, description: m, left: u, leftType: a, right: _, rightType: g, formValidation: T, children: S }), t[14] = l, t[15] = c, t[16] = m, t[17] = u, t[18] = a, t[19] = _, t[20] = g, t[21] = T, t[22] = S, t[23] = V) : V = t[23], V;
+}, B = (n) => {
+  const t = r.c(4);
+  let e;
+  t[0] !== n ? (e = f("select-input__trigger", n), t[0] = n, t[1] = e) : e = t[1];
+  let l;
+  return t[2] !== e ? (l = /* @__PURE__ */ o(s.Trigger, { ...e }), t[2] = e, t[3] = l) : l = t[3], l;
+}, D = (n) => {
+  const t = r.c(4);
+  let e;
+  t[0] !== n ? (e = f("select-input__value", n), t[0] = n, t[1] = e) : e = t[1];
+  let l;
+  return t[2] !== e ? (l = /* @__PURE__ */ o(s.Value, { ...e }), t[2] = e, t[3] = l) : l = t[3], l;
+}, F = (n) => {
+  const t = r.c(5), e = `select-input__content select-input__content--${n.color ?? "primary"}`;
+  let l;
+  t[0] !== n || t[1] !== e ? (l = f(e, n), t[0] = n, t[1] = e, t[2] = l) : l = t[2];
+  const i = l;
+  let c;
+  return t[3] !== i ? (c = /* @__PURE__ */ o(s.Content, { ...i }), t[3] = i, t[4] = c) : c = t[4], c;
+}, G = (n) => {
+  const t = r.c(4);
+  let e;
+  t[0] !== n ? (e = f("select-input__portal", n), t[0] = n, t[1] = e) : e = t[1];
+  const l = e;
+  let i;
+  return t[2] !== l ? (i = /* @__PURE__ */ o(s.Portal, { ...l }), t[2] = l, t[3] = i) : i = t[3], i;
+}, H = (n) => {
+  const t = r.c(4);
+  let e;
+  t[0] !== n ? (e = f("select-input__viewport", n), t[0] = n, t[1] = e) : e = t[1];
+  let l;
+  return t[2] !== e ? (l = /* @__PURE__ */ o(s.Viewport, { ...e }), t[2] = e, t[3] = l) : l = t[3], l;
+}, J = (n) => {
+  const t = r.c(4);
+  let e;
+  t[0] !== n ? (e = f("select-input__item", n), t[0] = n, t[1] = e) : e = t[1];
+  const l = e;
+  let i;
+  return t[2] !== l ? (i = /* @__PURE__ */ o(s.Item, { ...l }), t[2] = l, t[3] = i) : i = t[3], i;
+}, K = (n) => {
+  const t = r.c(4);
+  let e;
+  t[0] !== n ? (e = f("select-input__item-text", n), t[0] = n, t[1] = e) : e = t[1];
+  const l = e;
+  let i;
+  return t[2] !== l ? (i = /* @__PURE__ */ o(s.ItemText, { ...l }), t[2] = l, t[3] = i) : i = t[3], i;
+};
+export {
+  F as SelectContent,
+  A as SelectInput,
+  J as SelectItem,
+  K as SelectItemText,
+  G as SelectPortal,
+  B as SelectTrigger,
+  D as SelectValue,
+  H as SelectViewport
+};

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

@@ -1,4 +1,5 @@
 export * from './CheckboxInput';
+export * from './EditorInput';
 export * from './EmailInput';
 export * from './Input';
 export * from './InputDescription';
@@ -10,6 +11,7 @@ export * from './PasswordInput';
 export * from './PinInput';
 export * from './RadioGroup';
 export * from './RadioInput';
+export * from './SelectInput';
 export * from './SwitchInput';
 export * from './TextAreaInput';
 export * from './TextInput';

package/dist/components/form/index.js

@@ -1,41 +1,52 @@
-import { CheckboxInput as r } from "./CheckboxInput.js";
-import { EmailInput as p, emailValidation as n } from "./EmailInput.js";
-import { Input as m } from "./Input.js";
-import { InputDescription as i } from "./InputDescription.js";
-import { InputLabel as I } from "./InputLabel.js";
-import { InputMessage as d } from "./InputMessage.js";
-import { InputSuggestionMenuContent as l, InputSuggestionMenuContentItems as g } from "./InputSuggestion.js";
-import { NumberInput as P } from "./NumberInput.js";
-import { PasswordInput as c, passwordValidation as w } from "./PasswordInput.js";
+import { CheckboxInput as o } from "./CheckboxInput.js";
+import { EditorInput as p } from "./EditorInput.js";
+import { EmailInput as u, emailValidation as m } from "./EmailInput.js";
+import { Input as i } from "./Input.js";
+import { InputDescription as f } from "./InputDescription.js";
+import { InputLabel as a } from "./InputLabel.js";
+import { InputMessage as S } from "./InputMessage.js";
+import { InputSuggestionMenuContent as s, InputSuggestionMenuContentItems as g } from "./InputSuggestion.js";
+import { NumberInput as b } from "./NumberInput.js";
+import { PasswordInput as C, passwordValidation as T } from "./PasswordInput.js";
 import { PinInput as F, PinInputField as M, PinInputHiddenField as h } from "./PinInput.js";
-import { RadioGroup as R } from "./RadioGroup.js";
-import { RadioInput as V } from "./RadioInput.js";
-import { SwitchInput as y } from "./SwitchInput.js";
-import { TextAreaInput as E } from "./TextAreaInput.js";
-import { TextInput as H } from "./TextInput.js";
-import { useForm as N } from "./useForm.js";
-import { buildDefaultSyntax as q } from "./Input.syntax.hook.js";
+import { RadioGroup as E } from "./RadioGroup.js";
+import { RadioInput as k } from "./RadioInput.js";
+import { SelectContent as A, SelectInput as G, SelectItem as H, SelectItemText as L, SelectPortal as N, SelectTrigger as j, SelectValue as q, SelectViewport as v } from "./SelectInput.js";
+import { SwitchInput as B } from "./SwitchInput.js";
+import { TextAreaInput as K } from "./TextAreaInput.js";
+import { TextInput as Q } from "./TextInput.js";
+import { useForm as W } from "./useForm.js";
+import { buildDefaultSyntax as Y } from "./Input.syntax.hook.js";
 export {
-  r as CheckboxInput,
-  p as EmailInput,
-  m as Input,
-  i as InputDescription,
-  I as InputLabel,
-  d as InputMessage,
-  l as InputSuggestionMenuContent,
+  o as CheckboxInput,
+  p as EditorInput,
+  u as EmailInput,
+  i as Input,
+  f as InputDescription,
+  a as InputLabel,
+  S as InputMessage,
+  s as InputSuggestionMenuContent,
   g as InputSuggestionMenuContentItems,
-  P as NumberInput,
-  c as PasswordInput,
+  b as NumberInput,
+  C as PasswordInput,
   F as PinInput,
   M as PinInputField,
   h as PinInputHiddenField,
-  R as RadioGroup,
-  V as RadioInput,
-  y as SwitchInput,
-  E as TextAreaInput,
-  H as TextInput,
-  q as buildDefaultSyntax,
-  n as emailValidation,
-  w as passwordValidation,
-  N as useForm
+  E as RadioGroup,
+  k as RadioInput,
+  A as SelectContent,
+  G as SelectInput,
+  H as SelectItem,
+  L as SelectItemText,
+  N as SelectPortal,
+  j as SelectTrigger,
+  q as SelectValue,
+  v as SelectViewport,
+  B as SwitchInput,
+  K as TextAreaInput,
+  Q as TextInput,
+  Y as buildDefaultSyntax,
+  m as emailValidation,
+  T as passwordValidation,
+  W as useForm
 };

package/dist/components/form/useForm.js

@@ -1,40 +1,40 @@
-import { useState as g, useRef as p, useCallback as m, useEffect as j } from "react";
-function o(i, t, e) {
-  return (t = P(t)) in i ? Object.defineProperty(i, t, { value: e, enumerable: !0, configurable: !0, writable: !0 }) : i[t] = e, i;
+import { useState as m, useRef as w, useCallback as b, useEffect as j } from "react";
+function o(i, e, t) {
+  return (e = y(e)) in i ? Object.defineProperty(i, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : i[e] = t, i;
 }
-function P(i) {
-  var t = y(i, "string");
-  return typeof t == "symbol" ? t : t + "";
+function y(i) {
+  var e = P(i, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function y(i, t) {
+function P(i, e) {
   if (typeof i != "object" || !i) return i;
-  var e = i[Symbol.toPrimitive];
-  if (e !== void 0) {
-    var a = e.call(i, t);
+  var t = i[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var a = t.call(i, e);
     if (typeof a != "object") return a;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (t === "string" ? String : Number)(i);
+  return (e === "string" ? String : Number)(i);
 }
-class b {
-  constructor(t, e, a, u = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map()) {
-    o(this, "changeValue", void 0), o(this, "currentValues", void 0), o(this, "currentValidations", void 0), o(this, "shouldValidate", void 0), o(this, "cachedMessages", void 0), this.changeValue = t, this.currentValues = e, this.currentValidations = a, this.shouldValidate = u, this.cachedMessages = r;
+class v {
+  constructor(e, t, a, u = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map()) {
+    o(this, "changeValue", void 0), o(this, "currentValues", void 0), o(this, "currentValidations", void 0), o(this, "shouldValidate", void 0), o(this, "cachedMessages", void 0), this.changeValue = e, this.currentValues = t, this.currentValidations = a, this.shouldValidate = u, this.cachedMessages = r;
   }
   isValid() {
     if (!this.currentValidations) return !0;
-    for (const t in this.currentValidations) {
-      const e = this.currentValidations[t];
-      if (e && e(this.currentValues[t], this.currentValues) !== null)
+    for (const e in this.currentValidations) {
+      const t = this.currentValidations[e];
+      if (t && t(this.currentValues[e], this.currentValues) !== null)
         return !1;
     }
     return !0;
   }
-  getInputProps(t) {
-    const e = this.currentValues[t], a = e ?? null, u = t, r = this.currentValidations && this.currentValidations[t] ? this.currentValidations[t] : (l) => null;
+  getInputProps(e) {
+    const t = this.currentValues[e], a = t ?? null, u = e, r = this.currentValidations && this.currentValidations[e] ? this.currentValidations[e] : (l) => null;
     let s = null;
-    return this.shouldValidate.has(t) ? (s = r(e, this.currentValues), this.cachedMessages.set(t, s)) : s = this.cachedMessages.get(t) ?? null, {
+    return this.shouldValidate.has(e) ? (s = r(t, this.currentValues), this.cachedMessages.set(e, s)) : s = this.cachedMessages.get(e) ?? null, {
       // @ts-ignore – z.B. wenn dein Input `defaultValue` kennt
-      defaultValue: a,
+      defaultValue: a ?? void 0,
       initialValue: a ?? void 0,
       formValidation: {
         setValue: (l) => {
@@ -43,7 +43,7 @@ class b {
         notValidMessage: s,
         valid: s === null
       },
-      ...this.currentValidations && this.currentValidations[t] ? {
+      ...this.currentValidations && this.currentValidations[e] ? {
         required: !0
       } : {}
     };
@@ -51,28 +51,28 @@ class b {
 }
 const F = (i) => {
   const {
-    initialValues: t,
-    validate: e = {},
+    initialValues: e,
+    validate: t = {},
     truthyValidationBeforeSubmit: a = !0,
     useInitialValidation: u = !0,
     onSubmit: r
-  } = i, [s, l] = g(t), c = p(t), v = p(/* @__PURE__ */ new Map()), V = m((n, f) => {
-    l((d) => {
-      const h = {
-        ...d,
-        [n]: f
+  } = i, [s, l] = m(e), c = w(e), f = w(/* @__PURE__ */ new Map()), d = b((n, p) => {
+    l((h) => {
+      const V = {
+        ...h,
+        [n]: p
       };
-      return c.current = h, h;
+      return c.current = V, V;
     });
-  }, []), [w, M] = g(new b(V, s, e, u ? new Map(Object.keys(t).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), v.current));
+  }, []), [M, g] = m(new v(d, s, t, u ? new Map(Object.keys(e).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), f.current));
   j(() => {
-    l(t), c.current = t;
-  }, [t]);
-  const S = m((n) => {
-    const f = n && new Set(Object.keys(t)).has(String(n)) ? /* @__PURE__ */ new Map([[n, !0]]) : new Map(Object.keys(t).map((h) => [String(h), !0])), d = new b(V, c.current, e, f, v.current);
-    M(d), !new Set(Object.keys(t)).has(String(n)) && r && (!a || d.isValid()) && r(c.current);
-  }, [V, e, r, a, t]);
-  return [w, S];
+    l(e), c.current = e, g(new v(d, e, t, u ? new Map(Object.keys(e).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), f.current));
+  }, [e]);
+  const S = b((n) => {
+    const p = n && new Set(Object.keys(e)).has(String(n)) ? /* @__PURE__ */ new Map([[n, !0]]) : new Map(Object.keys(e).map((V) => [String(V), !0])), h = new v(d, c.current, t, p, f.current);
+    g(h), !new Set(Object.keys(e)).has(String(n)) && r && (!a || h.isValid()) && r(c.current);
+  }, [d, t, r, a, e]);
+  return [M, S];
 };
 export {
   F as useForm

package/dist/index.js

@@ -1,188 +1,199 @@
 import { Alert as r } from "./components/alert/Alert.js";
 import { AuroraBackground as n } from "./components/aurora/Aurora.js";
 import { Avatar as p } from "./components/avatar/Avatar.js";
-import { Badge as u } from "./components/badge/Badge.js";
-import { Breadcrumb as x } from "./components/breadcrumb/Breadcrumb.js";
+import { Badge as l } from "./components/badge/Badge.js";
+import { Breadcrumb as i } from "./components/breadcrumb/Breadcrumb.js";
 import { Button as f } from "./components/button/Button.js";
 import { ButtonGroup as g } from "./components/button-group/ButtonGroup.js";
-import { Card as s } from "./components/card/Card.js";
-import { Col as b } from "./components/col/Col.js";
-import { Command as M, CommandDialog as I, CommandEmpty as c, CommandGroup as D, CommandInput as A, CommandItem as F, CommandList as P, CommandSeparator as v, CommandShortcut as h } from "./components/command/Command.js";
+import { Card as T } from "./components/card/Card.js";
+import { Col as s } from "./components/col/Col.js";
+import { Command as c, CommandDialog as I, CommandEmpty as M, CommandGroup as D, CommandInput as A, CommandItem as F, CommandList as P, CommandSeparator as v, CommandShortcut as w } from "./components/command/Command.js";
 import { Container as R } from "./components/container/Container.js";
-import { ContextMenu as y, ContextMenuArrow as G, ContextMenuContent as z, ContextMenuGroup as B, ContextMenuItem as V, ContextMenuLabel as k, ContextMenuPortal as E, ContextMenuSeparator as H, ContextMenuSub as O, ContextMenuSubContent as Q, ContextMenuSubTrigger as N, ContextMenuTrigger as Z } from "./components/context-menu/ContextMenu.js";
+import { ContextMenu as y, ContextMenuArrow as G, ContextMenuContent as V, ContextMenuGroup as z, ContextMenuItem as B, ContextMenuLabel as E, ContextMenuPortal as k, ContextMenuSeparator as H, ContextMenuSub as O, ContextMenuSubContent as Q, ContextMenuSubTrigger as N, ContextMenuTrigger as Z } from "./components/context-menu/ContextMenu.js";
 import { DataTable as q } from "./components/data-table/DataTable.js";
 import { DataTableColumn as K } from "./components/data-table/DataTableColumn.js";
 import { DataTableFilterInput as W, createFilterQueryLanguage as X } from "./components/data-table/DataTableFilterInput.js";
 import { DataTableFilterSuggestionMenu as _ } from "./components/data-table/DataTableFilterSuggestionMenu.js";
-import { Dialog as oo, DialogClose as eo, DialogContent as ro, DialogDescription as to, DialogFooter as no, DialogHeader as ao, DialogOverlay as po, DialogPortal as mo, DialogTitle as uo, DialogTrigger as io } from "./components/dialog/Dialog.js";
-import { Editor as lo } from "./components/editor/Editor.js";
-import { FileTabsService as Co } from "./components/file-tabs/FileTabs.service.js";
-import { FileTabs as So, FileTabsContent as so, FileTabsList as To, FileTabsTrigger as bo } from "./components/file-tabs/FileTabs.js";
-import { Flex as Io } from "./components/flex/Flex.js";
-import { CheckboxInput as Do } from "./components/form/CheckboxInput.js";
-import { EmailInput as Fo, emailValidation as Po } from "./components/form/EmailInput.js";
-import { Input as ho } from "./components/form/Input.js";
-import { InputDescription as Ro } from "./components/form/InputDescription.js";
-import { InputLabel as yo } from "./components/form/InputLabel.js";
-import { InputMessage as zo } from "./components/form/InputMessage.js";
-import { InputSuggestionMenuContent as Vo, InputSuggestionMenuContentItems as ko } from "./components/form/InputSuggestion.js";
-import { NumberInput as Ho } from "./components/form/NumberInput.js";
-import { PasswordInput as Qo, passwordValidation as No } from "./components/form/PasswordInput.js";
-import { PinInput as jo, PinInputField as qo, PinInputHiddenField as Jo } from "./components/form/PinInput.js";
-import { RadioGroup as Uo } from "./components/form/RadioGroup.js";
-import { RadioInput as Xo } from "./components/form/RadioInput.js";
-import { SwitchInput as _o } from "./components/form/SwitchInput.js";
-import { TextAreaInput as oe } from "./components/form/TextAreaInput.js";
-import { TextInput as re } from "./components/form/TextInput.js";
-import { useForm as ne } from "./components/form/useForm.js";
-import { buildDefaultSyntax as pe } from "./components/form/Input.syntax.hook.js";
-import { FullScreen as ue } from "./components/fullscreen/FullScreen.js";
-import { Gantt as xe, getRelativeValue as le } from "./components/gantt/Gantt.js";
-import { Layout as Ce } from "./components/layout/Layout.js";
-import { Menu as Se, MenuArrow as se, MenuCheckboxItem as Te, MenuContent as be, MenuGroup as de, MenuItem as Me, MenuItemIndicator as Ie, MenuLabel as ce, MenuPortal as De, MenuSeparator as Ae, MenuSub as Fe, MenuSubContent as Pe, MenuSubTrigger as ve, MenuTrigger as he } from "./components/menu/Menu.js";
-import { Quote as Re } from "./components/quote/Quote.js";
-import { ResizableHandle as ye, ResizablePanel as Ge, ResizablePanelGroup as ze } from "./components/resizable/Resizable.js";
-import { Row as Ve } from "./components/row/Row.js";
-import { ScrollArea as Ee, ScrollAreaCorner as He, ScrollAreaScrollbar as Oe, ScrollAreaThumb as Qe, ScrollAreaViewport as Ne } from "./components/scroll-area/ScrollArea.js";
-import { SegmentedControl as je, SegmentedControlItem as qe } from "./components/segmented-control/SegmentedControl.js";
-import { Spacing as Ke } from "./components/spacing/Spacing.js";
-import { Tab as We, TabContent as Xe, TabList as Ye, TabTrigger as _e } from "./components/tab/Tab.js";
-import { Text as or } from "./components/text/Text.js";
-import { Toast as rr, toast as tr } from "./components/toast/Toast.js";
-import { Tooltip as ar, TooltipArrow as pr, TooltipContent as mr, TooltipPortal as ur, TooltipTrigger as ir } from "./components/tooltip/Tooltip.js";
-import { ContextStore as lr, ContextStoreProvider as fr, useService as Cr, useStore as gr } from "./utils/contextStore.js";
-import { ReactiveArrayService as sr, useReactiveArrayService as Tr } from "./utils/reactiveArrayService.js";
-import { mergeComponentProps as dr } from "./utils/component.js";
-import { Colors as Ir, hashToColor as cr, withAlpha as Dr } from "./utils/color.js";
-import { getDOMSizeFromCodeZeroSize as Fr } from "./utils/size.js";
+import { Dialog as ee, DialogClose as oe, DialogContent as re, DialogDescription as te, DialogFooter as ne, DialogHeader as ae, DialogOverlay as pe, DialogPortal as me, DialogTitle as le, DialogTrigger as ue } from "./components/dialog/Dialog.js";
+import { Editor as xe } from "./components/editor/Editor.js";
+import { FileTabsService as Ce } from "./components/file-tabs/FileTabs.service.js";
+import { FileTabs as Se, FileTabsContent as Te, FileTabsList as de, FileTabsTrigger as se } from "./components/file-tabs/FileTabs.js";
+import { Flex as ce } from "./components/flex/Flex.js";
+import { CheckboxInput as Me } from "./components/form/CheckboxInput.js";
+import { EditorInput as Ae } from "./components/form/EditorInput.js";
+import { EmailInput as Pe, emailValidation as ve } from "./components/form/EmailInput.js";
+import { Input as he } from "./components/form/Input.js";
+import { InputDescription as Le } from "./components/form/InputDescription.js";
+import { InputLabel as Ge } from "./components/form/InputLabel.js";
+import { InputMessage as ze } from "./components/form/InputMessage.js";
+import { InputSuggestionMenuContent as Ee, InputSuggestionMenuContentItems as ke } from "./components/form/InputSuggestion.js";
+import { NumberInput as Oe } from "./components/form/NumberInput.js";
+import { PasswordInput as Ne, passwordValidation as Ze } from "./components/form/PasswordInput.js";
+import { PinInput as qe, PinInputField as Je, PinInputHiddenField as Ke } from "./components/form/PinInput.js";
+import { RadioGroup as We } from "./components/form/RadioGroup.js";
+import { RadioInput as Ye } from "./components/form/RadioInput.js";
+import { SelectContent as $e, SelectInput as eo, SelectItem as oo, SelectItemText as ro, SelectPortal as to, SelectTrigger as no, SelectValue as ao, SelectViewport as po } from "./components/form/SelectInput.js";
+import { SwitchInput as lo } from "./components/form/SwitchInput.js";
+import { TextAreaInput as io } from "./components/form/TextAreaInput.js";
+import { TextInput as fo } from "./components/form/TextInput.js";
+import { useForm as go } from "./components/form/useForm.js";
+import { buildDefaultSyntax as To } from "./components/form/Input.syntax.hook.js";
+import { FullScreen as bo } from "./components/fullscreen/FullScreen.js";
+import { Gantt as Io, getRelativeValue as Mo } from "./components/gantt/Gantt.js";
+import { Layout as Ao } from "./components/layout/Layout.js";
+import { Menu as Po, MenuArrow as vo, MenuCheckboxItem as wo, MenuContent as ho, MenuGroup as Ro, MenuItem as Lo, MenuItemIndicator as yo, MenuLabel as Go, MenuPortal as Vo, MenuSeparator as zo, MenuSub as Bo, MenuSubContent as Eo, MenuSubTrigger as ko, MenuTrigger as Ho } from "./components/menu/Menu.js";
+import { Quote as Qo } from "./components/quote/Quote.js";
+import { ResizableHandle as Zo, ResizablePanel as jo, ResizablePanelGroup as qo } from "./components/resizable/Resizable.js";
+import { Row as Ko } from "./components/row/Row.js";
+import { ScrollArea as Wo, ScrollAreaCorner as Xo, ScrollAreaScrollbar as Yo, ScrollAreaThumb as _o, ScrollAreaViewport as $o } from "./components/scroll-area/ScrollArea.js";
+import { SegmentedControl as or, SegmentedControlItem as rr } from "./components/segmented-control/SegmentedControl.js";
+import { Spacing as nr } from "./components/spacing/Spacing.js";
+import { Tab as pr, TabContent as mr, TabList as lr, TabTrigger as ur } from "./components/tab/Tab.js";
+import { Text as xr } from "./components/text/Text.js";
+import { Toast as Cr, toast as gr } from "./components/toast/Toast.js";
+import { Tooltip as Tr, TooltipArrow as dr, TooltipContent as sr, TooltipPortal as br, TooltipTrigger as cr } from "./components/tooltip/Tooltip.js";
+import { ContextStore as Mr, ContextStoreProvider as Dr, useService as Ar, useStore as Fr } from "./utils/contextStore.js";
+import { ReactiveArrayService as vr, useReactiveArrayService as wr } from "./utils/reactiveArrayService.js";
+import { mergeComponentProps as Rr } from "./utils/component.js";
+import { Colors as yr, hashToColor as Gr, withAlpha as Vr } from "./utils/color.js";
+import { getDOMSizeFromCodeZeroSize as Br } from "./utils/size.js";
 export {
   r as Alert,
   n as AuroraBackground,
   p as Avatar,
-  u as Badge,
-  x as Breadcrumb,
+  l as Badge,
+  i as Breadcrumb,
   f as Button,
   g as ButtonGroup,
-  s as Card,
-  Do as CheckboxInput,
-  b as Col,
-  Ir as Colors,
-  M as Command,
+  T as Card,
+  Me as CheckboxInput,
+  s as Col,
+  yr as Colors,
+  c as Command,
   I as CommandDialog,
-  c as CommandEmpty,
+  M as CommandEmpty,
   D as CommandGroup,
   A as CommandInput,
   F as CommandItem,
   P as CommandList,
   v as CommandSeparator,
-  h as CommandShortcut,
+  w as CommandShortcut,
   R as Container,
   y as ContextMenu,
   G as ContextMenuArrow,
-  z as ContextMenuContent,
-  B as ContextMenuGroup,
-  V as ContextMenuItem,
-  k as ContextMenuLabel,
-  E as ContextMenuPortal,
+  V as ContextMenuContent,
+  z as ContextMenuGroup,
+  B as ContextMenuItem,
+  E as ContextMenuLabel,
+  k as ContextMenuPortal,
   H as ContextMenuSeparator,
   O as ContextMenuSub,
   Q as ContextMenuSubContent,
   N as ContextMenuSubTrigger,
   Z as ContextMenuTrigger,
-  lr as ContextStore,
-  fr as ContextStoreProvider,
+  Mr as ContextStore,
+  Dr as ContextStoreProvider,
   q as DataTable,
   K as DataTableColumn,
   W as DataTableFilterInput,
   _ as DataTableFilterSuggestionMenu,
-  oo as Dialog,
-  eo as DialogClose,
-  ro as DialogContent,
-  to as DialogDescription,
-  no as DialogFooter,
-  ao as DialogHeader,
-  po as DialogOverlay,
-  mo as DialogPortal,
-  uo as DialogTitle,
-  io as DialogTrigger,
-  lo as Editor,
-  Fo as EmailInput,
-  So as FileTabs,
-  so as FileTabsContent,
-  To as FileTabsList,
-  Co as FileTabsService,
-  bo as FileTabsTrigger,
-  Io as Flex,
-  ue as FullScreen,
-  xe as Gantt,
-  ho as Input,
-  Ro as InputDescription,
-  yo as InputLabel,
-  zo as InputMessage,
-  Vo as InputSuggestionMenuContent,
-  ko as InputSuggestionMenuContentItems,
-  Ce as Layout,
-  Se as Menu,
-  se as MenuArrow,
-  Te as MenuCheckboxItem,
-  be as MenuContent,
-  de as MenuGroup,
-  Me as MenuItem,
-  Ie as MenuItemIndicator,
-  ce as MenuLabel,
-  De as MenuPortal,
-  Ae as MenuSeparator,
-  Fe as MenuSub,
-  Pe as MenuSubContent,
-  ve as MenuSubTrigger,
-  he as MenuTrigger,
-  Ho as NumberInput,
-  Qo as PasswordInput,
-  jo as PinInput,
-  qo as PinInputField,
-  Jo as PinInputHiddenField,
-  Re as Quote,
-  Uo as RadioGroup,
-  Xo as RadioInput,
-  sr as ReactiveArrayService,
-  ye as ResizableHandle,
-  Ge as ResizablePanel,
-  ze as ResizablePanelGroup,
-  Ve as Row,
-  Ee as ScrollArea,
-  He as ScrollAreaCorner,
-  Oe as ScrollAreaScrollbar,
-  Qe as ScrollAreaThumb,
-  Ne as ScrollAreaViewport,
-  je as SegmentedControl,
-  qe as SegmentedControlItem,
-  Ke as Spacing,
-  _o as SwitchInput,
-  We as Tab,
-  Xe as TabContent,
-  Ye as TabList,
-  _e as TabTrigger,
-  or as Text,
-  oe as TextAreaInput,
-  re as TextInput,
-  rr as Toast,
-  ar as Tooltip,
-  pr as TooltipArrow,
-  mr as TooltipContent,
-  ur as TooltipPortal,
-  ir as TooltipTrigger,
-  pe as buildDefaultSyntax,
+  ee as Dialog,
+  oe as DialogClose,
+  re as DialogContent,
+  te as DialogDescription,
+  ne as DialogFooter,
+  ae as DialogHeader,
+  pe as DialogOverlay,
+  me as DialogPortal,
+  le as DialogTitle,
+  ue as DialogTrigger,
+  xe as Editor,
+  Ae as EditorInput,
+  Pe as EmailInput,
+  Se as FileTabs,
+  Te as FileTabsContent,
+  de as FileTabsList,
+  Ce as FileTabsService,
+  se as FileTabsTrigger,
+  ce as Flex,
+  bo as FullScreen,
+  Io as Gantt,
+  he as Input,
+  Le as InputDescription,
+  Ge as InputLabel,
+  ze as InputMessage,
+  Ee as InputSuggestionMenuContent,
+  ke as InputSuggestionMenuContentItems,
+  Ao as Layout,
+  Po as Menu,
+  vo as MenuArrow,
+  wo as MenuCheckboxItem,
+  ho as MenuContent,
+  Ro as MenuGroup,
+  Lo as MenuItem,
+  yo as MenuItemIndicator,
+  Go as MenuLabel,
+  Vo as MenuPortal,
+  zo as MenuSeparator,
+  Bo as MenuSub,
+  Eo as MenuSubContent,
+  ko as MenuSubTrigger,
+  Ho as MenuTrigger,
+  Oe as NumberInput,
+  Ne as PasswordInput,
+  qe as PinInput,
+  Je as PinInputField,
+  Ke as PinInputHiddenField,
+  Qo as Quote,
+  We as RadioGroup,
+  Ye as RadioInput,
+  vr as ReactiveArrayService,
+  Zo as ResizableHandle,
+  jo as ResizablePanel,
+  qo as ResizablePanelGroup,
+  Ko as Row,
+  Wo as ScrollArea,
+  Xo as ScrollAreaCorner,
+  Yo as ScrollAreaScrollbar,
+  _o as ScrollAreaThumb,
+  $o as ScrollAreaViewport,
+  or as SegmentedControl,
+  rr as SegmentedControlItem,
+  $e as SelectContent,
+  eo as SelectInput,
+  oo as SelectItem,
+  ro as SelectItemText,
+  to as SelectPortal,
+  no as SelectTrigger,
+  ao as SelectValue,
+  po as SelectViewport,
+  nr as Spacing,
+  lo as SwitchInput,
+  pr as Tab,
+  mr as TabContent,
+  lr as TabList,
+  ur as TabTrigger,
+  xr as Text,
+  io as TextAreaInput,
+  fo as TextInput,
+  Cr as Toast,
+  Tr as Tooltip,
+  dr as TooltipArrow,
+  sr as TooltipContent,
+  br as TooltipPortal,
+  cr as TooltipTrigger,
+  To as buildDefaultSyntax,
   X as createFilterQueryLanguage,
-  Po as emailValidation,
-  Fr as getDOMSizeFromCodeZeroSize,
-  le as getRelativeValue,
-  cr as hashToColor,
-  dr as mergeComponentProps,
-  No as passwordValidation,
-  tr as toast,
-  ne as useForm,
-  Tr as useReactiveArrayService,
-  Cr as useService,
-  gr as useStore,
-  Dr as withAlpha
+  ve as emailValidation,
+  Br as getDOMSizeFromCodeZeroSize,
+  Mo as getRelativeValue,
+  Gr as hashToColor,
+  Rr as mergeComponentProps,
+  Ze as passwordValidation,
+  gr as toast,
+  go as useForm,
+  wr as useReactiveArrayService,
+  Ar as useService,
+  Fr as useStore,
+  Vr as withAlpha
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -62,6 +62,7 @@
     "@vitest/browser-playwright": "^4.1.2",
     "@vitest/coverage-v8": "^4.1.2",
     "@xyflow/react": "^12.10.1",
+    "avvvatars-react": "^0.4.2",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^10.1.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
@@ -91,7 +92,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^4.1.2",
-    "avvvatars-react": "^0.4.2"
+    "@radix-ui/react-select": "^2.2.6"
   },
   "main": "dist/index.js",
   "repository": {
@@ -124,6 +125,7 @@
     "@uiw/codemirror-themes": "^4.25.4",
     "@uiw/react-codemirror": "^4.25.4",
     "@xyflow/react": "^12.10.0",
+    "avvvatars-react": "^0.4.2",
     "cmdk": "^1.1.1",
     "js-md5": "^0.8.3",
     "merge-props": "^6.0.0",
@@ -132,7 +134,7 @@
     "react-resizable-panels": "^4.3.1",
     "react-zoom-pan-pinch": "^3.7.0",
     "sonner": "^2.0.7",
-    "avvvatars-react": "^0.4.2"
+    "@radix-ui/react-select": "^2.2.6"
   },
   "publishConfig": {
     "access": "public"