@code0-tech/pictor 0.7.1 → 0.8.0

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

@@ -1 +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}
+.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}.editor-input .cm-cursor{border-width:2px;border-radius:50rem;border-color:#fff}

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

@@ -0,0 +1 @@
+.file-input__item-group{margin:0;padding:0}.file-input__item-preview{max-width:50px;max-height:50px;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-input__item-preview-image{object-fit:cover;width:100%;height:100%}

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

@@ -1 +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}
+.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--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

@@ -1 +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}
+.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{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

@@ -6,7 +6,7 @@ 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/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 '../../assets/components/form/SelectInput.style.css';import '../../assets/components/form/FileInput.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";
@@ -17,6 +17,8 @@ import "@uiw/codemirror-themes";
 import "../../node_modules/@lezer/highlight/dist/index.js";
 /* empty css                             */
 import "../form/EmailInput.js";
+import "@ark-ui/react";
+/* empty css                           */
 import "../form/Input.js";
 import "../form/InputSuggestion.js";
 import "../form/NumberInput.js";
@@ -35,7 +37,7 @@ const P = (e) => {
   const o = m;
   let n;
   return t[2] !== o ? (n = /* @__PURE__ */ i(a, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, X = (e) => {
+}, Z = (e) => {
   const t = c.c(11);
   let m;
   t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ i(C, {}), t[0] = m) : m = t[0];
@@ -48,14 +50,14 @@ const P = (e) => {
   ] }), t[3] = e.contentProps, t[4] = o, t[5] = n) : n = t[5];
   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) => {
+}, p = (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__ */ i(a.List, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, Z = (e) => {
+}, tt = (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];
@@ -74,35 +76,35 @@ const P = (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) => {
+}, et = (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__ */ i(a.Empty, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, tt = (e) => {
+}, nt = (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__ */ i(a.Group, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, et = (e) => {
+}, mt = (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__ */ i(a.Item, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, nt = (e) => {
+}, ot = (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__ */ i(a.Separator, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, mt = (e) => {
+}, it = (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];
@@ -112,12 +114,12 @@ const P = (e) => {
 };
 export {
   P as Command,
-  X as CommandDialog,
-  p as CommandEmpty,
-  tt as CommandGroup,
-  Z as CommandInput,
-  et as CommandItem,
-  Y as CommandList,
-  nt as CommandSeparator,
-  mt as CommandShortcut
+  Z as CommandDialog,
+  et as CommandEmpty,
+  nt as CommandGroup,
+  tt as CommandInput,
+  mt as CommandItem,
+  p as CommandList,
+  ot as CommandSeparator,
+  it as CommandShortcut
 };

package/dist/components/editor/Editor.js

@@ -296,7 +296,7 @@ const De = (i) => me(i) || typeof i == "string" || typeof i == "number" || Array
         if (I(e), t === "json")
           try {
             const d = JSON.parse(e);
-            q?.(d), Z?.setValue(d);
+            q?.(d), Z?.setValue?.(d);
           } catch {
           }
         else

package/dist/components/form/CheckboxInput.js

@@ -26,7 +26,7 @@ const ee = (l) => {
   const i = x, [t, R] = z.useState(l.initialValue ?? "indeterminate");
   let g;
   e[2] !== t || e[3] !== i ? (g = () => {
-    i.setValue(t);
+    i.setValue?.(t);
   }, e[2] = t, e[3] = i, e[4] = g) : g = e[4];
   let v;
   e[5] !== t ? (v = [t], e[5] = t, e[6] = v) : v = e[6], z.useEffect(g, v);

package/dist/components/form/EditorInput.js

@@ -56,7 +56,7 @@ const N = (i) => {
     }, ...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) => {
-    o?.setValue(n), f?.(n);
+    o?.setValue?.(n), f?.(n);
   }, theme: k, ...C("editor-input", b), basicSetup: {
     lineNumbers: !1,
     foldGutter: !1,

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

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { Code0Input } from './Input';
+import { ValidationProps } from './useForm';
+import { ComponentProps } from '../../utils';
+import * as ArkUi from "@ark-ui/react";
+export type FileInputProps = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+} & Code0Input & ValidationProps<ArkUi.FileUploadFileChangeDetails | undefined> & ArkUi.FileUploadRootProps;
+export type FileInputDropzoneProps = ComponentProps & ArkUi.FileUploadDropzoneProps;
+export type FileInputTriggerProps = ComponentProps & ArkUi.FileUploadTriggerProps;
+export type FileInputItemGroupProps = ComponentProps & ArkUi.FileUploadItemGroupProps;
+export type FileInputItemProps = ComponentProps & ArkUi.FileUploadItemProps;
+export type FileInputItemPreviewProps = ComponentProps & ArkUi.FileUploadItemPreviewProps;
+export type FileInputItemPreviewImageProps = ComponentProps & ArkUi.FileUploadItemPreviewImageProps;
+export type FileInputItemNameProps = ComponentProps & ArkUi.FileUploadItemNameProps;
+export type FileInputItemSizeTextProps = ComponentProps & ArkUi.FileUploadItemSizeTextProps;
+export type FileInputItemDeleteTriggerProps = ComponentProps & ArkUi.FileUploadItemDeleteTriggerProps;
+export type FileInputHiddenInputProps = ComponentProps & ArkUi.FileUploadHiddenInputProps;
+export type FileInputContextProps = ArkUi.FileUploadContextProps;
+export declare const FileInput: React.FC<FileInputProps>;
+export declare const FileInputDropzone: React.FC<FileInputDropzoneProps>;
+export declare const FileInputTrigger: React.FC<FileInputTriggerProps>;
+export declare const FileInputItemGroup: React.FC<FileInputItemGroupProps>;
+export declare const FileInputItem: React.FC<FileInputItemProps>;
+export declare const FileInputItemPreview: React.FC<FileInputItemPreviewProps>;
+export declare const FileInputItemPreviewImage: React.FC<FileInputItemPreviewImageProps>;
+export declare const FileInputItemName: React.FC<FileInputItemNameProps>;
+export declare const FileInputItemSizeText: React.FC<FileInputItemSizeTextProps>;
+export declare const FileInputItemDeleteTrigger: React.FC<FileInputItemDeleteTriggerProps>;
+export declare const FileInputHiddenInput: React.FC<FileInputHiddenInputProps>;
+export declare const FileInputContext: React.FC<FileInputContextProps>;

package/dist/components/form/FileInput.js

@@ -0,0 +1,124 @@
+import { jsx as n, jsxs as T } from "react/jsx-runtime";
+import { c as r } from "../../_virtual/compiler-runtime.js";
+import * as m from "@ark-ui/react";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as c } from "../../utils/component.js";
+import "js-md5";
+import { InputLabel as w } from "./InputLabel.js";
+import { InputDescription as z } from "./InputDescription.js";
+import { InputMessage as v } from "./InputMessage.js";
+import '../../assets/components/form/FileInput.style.css';/* empty css                     */
+const S = (l) => {
+  const e = r.c(20);
+  let t, i, o, s, a, f;
+  if (e[0] !== l) {
+    const {
+      title: U,
+      description: $,
+      formValidation: h,
+      children: x,
+      ..._
+    } = l;
+    f = U, o = $, s = h, i = x, t = m.FileUploadRoot, a = c("file-input", {
+      ..._,
+      onFileChange: (p) => {
+        console.log(p), s?.setValue?.(p), setTimeout(() => _.onFileChange?.(p), 1e3);
+      }
+    }), e[0] = l, e[1] = t, e[2] = i, e[3] = o, e[4] = s, e[5] = a, e[6] = f;
+  } else
+    t = e[1], i = e[2], o = e[3], s = e[4], a = e[5], f = e[6];
+  const g = a;
+  let u;
+  e[7] !== f ? (u = f && /* @__PURE__ */ n(w, { children: f }), e[7] = f, e[8] = u) : u = e[8];
+  let d;
+  e[9] !== o ? (d = o && /* @__PURE__ */ n(z, { children: o }), e[9] = o, e[10] = d) : d = e[10];
+  let I;
+  e[11] !== s ? (I = !s?.valid && s?.notValidMessage && /* @__PURE__ */ n(v, { children: s.notValidMessage }), e[11] = s, e[12] = I) : I = e[12];
+  let F;
+  return e[13] !== t || e[14] !== i || e[15] !== g || e[16] !== u || e[17] !== d || e[18] !== I ? (F = /* @__PURE__ */ T(t, { ...g, children: [
+    u,
+    d,
+    i,
+    I
+  ] }), e[13] = t, e[14] = i, e[15] = g, e[16] = u, e[17] = d, e[18] = I, e[19] = F) : F = e[19], F;
+}, b = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__dropzone", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadDropzone, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, k = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__trigger", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadTrigger, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, A = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item-group", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadItemGroup, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, E = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item", l), e[0] = l, e[1] = t) : t = e[1];
+  const i = t;
+  let o;
+  return e[2] !== i ? (o = /* @__PURE__ */ n(m.FileUploadItem, { ...i }), e[2] = i, e[3] = o) : o = e[3], o;
+}, L = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item-preview", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadItemPreview, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, q = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item-preview-image", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadItemPreviewImage, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, y = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item-name", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadItemName, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, B = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item-size-text", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadItemSizeText, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, J = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__item-delete-trigger", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadItemDeleteTrigger, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, K = (l) => {
+  const e = r.c(4);
+  let t;
+  e[0] !== l ? (t = c("file-input__hidden-input", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ n(m.FileUploadHiddenInput, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, O = (l) => {
+  const e = r.c(2);
+  let t;
+  return e[0] !== l ? (t = /* @__PURE__ */ n(m.FileUploadContext, { ...l }), e[0] = l, e[1] = t) : t = e[1], t;
+};
+export {
+  S as FileInput,
+  O as FileInputContext,
+  b as FileInputDropzone,
+  K as FileInputHiddenInput,
+  E as FileInputItem,
+  J as FileInputItemDeleteTrigger,
+  A as FileInputItemGroup,
+  y as FileInputItemName,
+  L as FileInputItemPreview,
+  q as FileInputItemPreviewImage,
+  B as FileInputItemSizeText,
+  k as FileInputTrigger
+};

package/dist/components/form/PinInput.js

@@ -29,7 +29,7 @@ const B = (n) => {
     e[11] !== h ? (l = V(h, {}), e[11] = h, e[12] = l) : l = e[12], t = T, d = V("pin-input", {
       ...g,
       onValueChange: (v) => {
-        g.onValueChange && g.onValueChange(v), i.setValue(v);
+        g.onValueChange && g.onValueChange(v), i.setValue?.(v);
       }
     }), e[0] = n, e[1] = t, e[2] = i, e[3] = d, e[4] = l, e[5] = o, e[6] = s;
   } else

package/dist/components/form/RadioGroup.js

@@ -27,7 +27,7 @@ const y = (s) => {
     } : V, e[7] !== d ? (i = d ? /* @__PURE__ */ f(G, { children: d }) : null, e[7] = d, e[8] = i) : i = e[8], e[9] !== p ? (l = p ? /* @__PURE__ */ f(I, { children: p }) : null, e[9] = p, e[10] = l) : l = e[10], o = M.RadioGroup, r = h ?? s.defaultValue, a = v("radio-group", {
       ...c,
       onValueChange: (g) => {
-        c.onValueChange && c.onValueChange(g), t.setValue(g);
+        c.onValueChange && c.onValueChange(g), t.setValue?.(g);
       }
     }), e[0] = s, e[1] = o, e[2] = t, e[3] = r, e[4] = a, e[5] = i, e[6] = l;
   } else

package/dist/components/form/SelectInput.js

@@ -5,81 +5,81 @@ 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 { InputWrapper as R } from "./InputWrapper.js";
 import '../../assets/components/form/SelectInput.style.css';/* empty css                       */
-const A = (n) => {
+const A = (i) => {
   const t = r.c(24);
-  let e, l, i, c, m, u, a, _, g, T;
-  if (t[0] !== n) {
+  let e, l, n, c, m, u, a, _, g, T;
+  if (t[0] !== i) {
     const {
-      title: C,
-      description: I,
-      left: y,
-      leftType: w,
-      rightType: P,
-      right: R,
+      title: I,
+      description: y,
+      left: C,
+      leftType: p,
+      rightType: w,
+      right: P,
       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", {
+    } = i;
+    l = R, c = I, m = y, u = C, a = p, _ = P, g = w, T = h, e = s.Root, n = f("select-input", {
       ...x,
       onValueChange: (d) => {
-        h?.setValue(d), x.onValueChange?.(d), n.onChange?.({});
+        h?.setValue?.(d), x.onValueChange?.(d);
       }
-    }), 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;
+    }), t[0] = i, t[1] = e, t[2] = l, t[3] = n, 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;
+    e = t[1], l = t[2], n = t[3], c = t[4], m = t[5], u = t[6], a = t[7], _ = t[8], g = t[9], T = t[10];
+  const $ = n;
   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) => {
+}, B = (i) => {
   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];
+  t[0] !== i ? (e = f("select-input__trigger", i), t[0] = i, 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) => {
+}, D = (i) => {
   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];
+  t[0] !== i ? (e = f("select-input__value", i), t[0] = i, 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"}`;
+}, F = (i) => {
+  const t = r.c(5), e = `select-input__content select-input__content--${i.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;
+  t[0] !== i || t[1] !== e ? (l = f(e, i), t[0] = i, t[1] = e, t[2] = l) : l = t[2];
+  const n = 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) => {
+  return t[3] !== n ? (c = /* @__PURE__ */ o(s.Content, { ...n }), t[3] = n, t[4] = c) : c = t[4], c;
+}, G = (i) => {
   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];
+  t[0] !== i ? (e = f("select-input__portal", i), t[0] = i, 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) => {
+  let n;
+  return t[2] !== l ? (n = /* @__PURE__ */ o(s.Portal, { ...l }), t[2] = l, t[3] = n) : n = t[3], n;
+}, H = (i) => {
   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];
+  t[0] !== i ? (e = f("select-input__viewport", i), t[0] = i, 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) => {
+}, J = (i) => {
   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];
+  t[0] !== i ? (e = f("select-input__item", i), t[0] = i, 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) => {
+  let n;
+  return t[2] !== l ? (n = /* @__PURE__ */ o(s.Item, { ...l }), t[2] = l, t[3] = n) : n = t[3], n;
+}, K = (i) => {
   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];
+  t[0] !== i ? (e = f("select-input__item-text", i), t[0] = i, 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;
+  let n;
+  return t[2] !== l ? (n = /* @__PURE__ */ o(s.ItemText, { ...l }), t[2] = l, t[3] = n) : n = t[3], n;
 };
 export {
   F as SelectContent,

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

@@ -1,6 +1,7 @@
 export * from './CheckboxInput';
 export * from './EditorInput';
 export * from './EmailInput';
+export * from './FileInput';
 export * from './Input';
 export * from './InputDescription';
 export * from './InputLabel';

package/dist/components/form/index.js

@@ -1,52 +1,65 @@
 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 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";
+import { EmailInput as u, emailValidation as I } from "./EmailInput.js";
+import { FileInput as m, FileInputContext as l, FileInputDropzone as x, FileInputHiddenInput as f, FileInputItem as a, FileInputItemDeleteTrigger as F, FileInputItemGroup as d, FileInputItemName as S, FileInputItemPreview as g, FileInputItemPreviewImage as c, FileInputItemSizeText as s, FileInputTrigger as P } from "./FileInput.js";
+import { Input as w } from "./Input.js";
+import { InputDescription as b } from "./InputDescription.js";
+import { InputLabel as V } from "./InputLabel.js";
+import { InputMessage as h } from "./InputMessage.js";
+import { InputSuggestionMenuContent as z, InputSuggestionMenuContentItems as E } from "./InputSuggestion.js";
+import { NumberInput as H } from "./NumberInput.js";
+import { PasswordInput as R, passwordValidation as k } from "./PasswordInput.js";
+import { PinInput as A, PinInputField as L, PinInputHiddenField as j } from "./PinInput.js";
+import { RadioGroup as B } from "./RadioGroup.js";
+import { RadioInput as K } from "./RadioInput.js";
+import { SelectContent as Q, SelectInput as U, SelectItem as W, SelectItemText as X, SelectPortal as Y, SelectTrigger as Z, SelectValue as _, SelectViewport as $ } from "./SelectInput.js";
+import { SwitchInput as te } from "./SwitchInput.js";
+import { TextAreaInput as re } from "./TextAreaInput.js";
+import { TextInput as ne } from "./TextInput.js";
+import { useForm as Ie } from "./useForm.js";
+import { buildDefaultSyntax as me } from "./Input.syntax.hook.js";
 export {
   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,
-  b as NumberInput,
-  C as PasswordInput,
-  F as PinInput,
-  M as PinInputField,
-  h as PinInputHiddenField,
-  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
+  m as FileInput,
+  l as FileInputContext,
+  x as FileInputDropzone,
+  f as FileInputHiddenInput,
+  a as FileInputItem,
+  F as FileInputItemDeleteTrigger,
+  d as FileInputItemGroup,
+  S as FileInputItemName,
+  g as FileInputItemPreview,
+  c as FileInputItemPreviewImage,
+  s as FileInputItemSizeText,
+  P as FileInputTrigger,
+  w as Input,
+  b as InputDescription,
+  V as InputLabel,
+  h as InputMessage,
+  z as InputSuggestionMenuContent,
+  E as InputSuggestionMenuContentItems,
+  H as NumberInput,
+  R as PasswordInput,
+  A as PinInput,
+  L as PinInputField,
+  j as PinInputHiddenField,
+  B as RadioGroup,
+  K as RadioInput,
+  Q as SelectContent,
+  U as SelectInput,
+  W as SelectItem,
+  X as SelectItemText,
+  Y as SelectPortal,
+  Z as SelectTrigger,
+  _ as SelectValue,
+  $ as SelectViewport,
+  te as SwitchInput,
+  re as TextAreaInput,
+  ne as TextInput,
+  me as buildDefaultSyntax,
+  I as emailValidation,
+  k as passwordValidation,
+  Ie as useForm
 };

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

@@ -14,7 +14,7 @@ export interface ValidationProps<Value> {
     value?: Value | undefined;
     required?: boolean;
     formValidation?: {
-        setValue: (value: any) => void;
+        setValue?: (value: any) => void;
         valid?: boolean;
         notValidMessage?: string | null;
     };
@@ -22,7 +22,7 @@ export interface ValidationProps<Value> {
 export type ValidationsProps<Values> = Partial<{
     [Key in keyof Values]: ValidationProps<Values[Key]>;
 }>;
-export type FormValidationReturn<Values> = [IValidation<Values>, <Key extends keyof Values>(key?: Key | any) => void];
+export type FormValidationReturn<Values> = [IValidation<Values>, <Key extends keyof Values>(key?: Key | any, submit?: boolean) => void, Values];
 export interface IValidation<Values> {
     getInputProps<Key extends keyof Values>(key: Key): ValidationProps<Values[Key]>;
     isValid(): boolean;

package/dist/components/form/useForm.js

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

package/dist/index.js

@@ -1,199 +1,212 @@
-import { Alert as r } from "./components/alert/Alert.js";
+import { Alert as t } 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 l } from "./components/badge/Badge.js";
+import { Avatar as a } from "./components/avatar/Avatar.js";
+import { Badge as u } 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 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 { Card as S } from "./components/card/Card.js";
+import { Col as d } from "./components/col/Col.js";
+import { Command as b, CommandDialog as c, CommandEmpty as M, CommandGroup as F, CommandInput as D, CommandItem as A, 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 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 { ContextMenu as L, ContextMenuArrow as y, ContextMenuContent as z, ContextMenuGroup as V, ContextMenuItem as B, ContextMenuLabel as E, ContextMenuPortal as H, ContextMenuSeparator as k, ContextMenuSub as N, ContextMenuSubContent as O, ContextMenuSubTrigger as Q, 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 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 { Dialog as ee, DialogClose as oe, DialogContent as te, DialogDescription as re, DialogFooter as ne, DialogHeader as pe, DialogOverlay as ae, DialogPortal as me, DialogTitle as ue, DialogTrigger as le } 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 { FileTabsService as Ie } from "./components/file-tabs/FileTabs.service.js";
+import { FileTabs as Ce, FileTabsContent as Se, FileTabsList as Te, FileTabsTrigger as de } from "./components/file-tabs/FileTabs.js";
+import { Flex as be } from "./components/flex/Flex.js";
 import { CheckboxInput as Me } from "./components/form/CheckboxInput.js";
-import { EditorInput as Ae } from "./components/form/EditorInput.js";
+import { EditorInput as De } 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";
+import { FileInput as he, FileInputContext as Re, FileInputDropzone as Ge, FileInputHiddenInput as Le, FileInputItem as ye, FileInputItemDeleteTrigger as ze, FileInputItemGroup as Ve, FileInputItemName as Be, FileInputItemPreview as Ee, FileInputItemPreviewImage as He, FileInputItemSizeText as ke, FileInputTrigger as Ne } from "./components/form/FileInput.js";
+import { Input as Qe } from "./components/form/Input.js";
+import { InputDescription as je } from "./components/form/InputDescription.js";
+import { InputLabel as Je } from "./components/form/InputLabel.js";
+import { InputMessage as Ue } from "./components/form/InputMessage.js";
+import { InputSuggestionMenuContent as Xe, InputSuggestionMenuContentItems as Ye } from "./components/form/InputSuggestion.js";
+import { NumberInput as $e } from "./components/form/NumberInput.js";
+import { PasswordInput as oo, passwordValidation as to } from "./components/form/PasswordInput.js";
+import { PinInput as no, PinInputField as po, PinInputHiddenField as ao } from "./components/form/PinInput.js";
+import { RadioGroup as uo } from "./components/form/RadioGroup.js";
+import { RadioInput as io } from "./components/form/RadioInput.js";
+import { SelectContent as fo, SelectInput as Io, SelectItem as go, SelectItemText as Co, SelectPortal as So, SelectTrigger as To, SelectValue as so, SelectViewport as bo } from "./components/form/SelectInput.js";
+import { SwitchInput as Mo } from "./components/form/SwitchInput.js";
+import { TextAreaInput as Do } from "./components/form/TextAreaInput.js";
+import { TextInput as Po } from "./components/form/TextInput.js";
+import { useForm as wo } from "./components/form/useForm.js";
+import { buildDefaultSyntax as Ro } from "./components/form/Input.syntax.hook.js";
+import { FullScreen as Lo } from "./components/fullscreen/FullScreen.js";
+import { Gantt as zo, getRelativeValue as Vo } from "./components/gantt/Gantt.js";
+import { Layout as Eo } from "./components/layout/Layout.js";
+import { Menu as ko, MenuArrow as No, MenuCheckboxItem as Oo, MenuContent as Qo, MenuGroup as Zo, MenuItem as jo, MenuItemIndicator as qo, MenuLabel as Jo, MenuPortal as Ko, MenuSeparator as Uo, MenuSub as Wo, MenuSubContent as Xo, MenuSubTrigger as Yo, MenuTrigger as _o } from "./components/menu/Menu.js";
+import { Quote as et } from "./components/quote/Quote.js";
+import { ResizableHandle as tt, ResizablePanel as rt, ResizablePanelGroup as nt } from "./components/resizable/Resizable.js";
+import { Row as at } from "./components/row/Row.js";
+import { ScrollArea as ut, ScrollAreaCorner as lt, ScrollAreaScrollbar as it, ScrollAreaThumb as xt, ScrollAreaViewport as ft } from "./components/scroll-area/ScrollArea.js";
+import { SegmentedControl as gt, SegmentedControlItem as Ct } from "./components/segmented-control/SegmentedControl.js";
+import { Spacing as Tt } from "./components/spacing/Spacing.js";
+import { Tab as st, TabContent as bt, TabList as ct, TabTrigger as Mt } from "./components/tab/Tab.js";
+import { Text as Dt } from "./components/text/Text.js";
+import { Toast as Pt, toast as vt } from "./components/toast/Toast.js";
+import { Tooltip as ht, TooltipArrow as Rt, TooltipContent as Gt, TooltipPortal as Lt, TooltipTrigger as yt } from "./components/tooltip/Tooltip.js";
+import { ContextStore as Vt, ContextStoreProvider as Bt, useService as Et, useStore as Ht } from "./utils/contextStore.js";
+import { ReactiveArrayService as Nt, useReactiveArrayService as Ot } from "./utils/reactiveArrayService.js";
+import { mergeComponentProps as Zt } from "./utils/component.js";
+import { Colors as qt, hashToColor as Jt, withAlpha as Kt } from "./utils/color.js";
+import { getDOMSizeFromCodeZeroSize as Wt } from "./utils/size.js";
 export {
-  r as Alert,
+  t as Alert,
   n as AuroraBackground,
-  p as Avatar,
-  l as Badge,
+  a as Avatar,
+  u as Badge,
   i as Breadcrumb,
   f as Button,
   g as ButtonGroup,
-  T as Card,
+  S as Card,
   Me as CheckboxInput,
-  s as Col,
-  yr as Colors,
-  c as Command,
-  I as CommandDialog,
+  d as Col,
+  qt as Colors,
+  b as Command,
+  c as CommandDialog,
   M as CommandEmpty,
-  D as CommandGroup,
-  A as CommandInput,
-  F as CommandItem,
+  F as CommandGroup,
+  D as CommandInput,
+  A as CommandItem,
   P as CommandList,
   v as CommandSeparator,
   w as CommandShortcut,
   R as Container,
-  y as ContextMenu,
-  G as ContextMenuArrow,
-  V as ContextMenuContent,
-  z as ContextMenuGroup,
+  L as ContextMenu,
+  y as ContextMenuArrow,
+  z as ContextMenuContent,
+  V as ContextMenuGroup,
   B as ContextMenuItem,
   E as ContextMenuLabel,
-  k as ContextMenuPortal,
-  H as ContextMenuSeparator,
-  O as ContextMenuSub,
-  Q as ContextMenuSubContent,
-  N as ContextMenuSubTrigger,
+  H as ContextMenuPortal,
+  k as ContextMenuSeparator,
+  N as ContextMenuSub,
+  O as ContextMenuSubContent,
+  Q as ContextMenuSubTrigger,
   Z as ContextMenuTrigger,
-  Mr as ContextStore,
-  Dr as ContextStoreProvider,
+  Vt as ContextStore,
+  Bt as ContextStoreProvider,
   q as DataTable,
   K as DataTableColumn,
   W as DataTableFilterInput,
   _ as DataTableFilterSuggestionMenu,
   ee as Dialog,
   oe as DialogClose,
-  re as DialogContent,
-  te as DialogDescription,
+  te as DialogContent,
+  re as DialogDescription,
   ne as DialogFooter,
-  ae as DialogHeader,
-  pe as DialogOverlay,
+  pe as DialogHeader,
+  ae as DialogOverlay,
   me as DialogPortal,
-  le as DialogTitle,
-  ue as DialogTrigger,
+  ue as DialogTitle,
+  le as DialogTrigger,
   xe as Editor,
-  Ae as EditorInput,
+  De 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,
+  he as FileInput,
+  Re as FileInputContext,
+  Ge as FileInputDropzone,
+  Le as FileInputHiddenInput,
+  ye as FileInputItem,
+  ze as FileInputItemDeleteTrigger,
+  Ve as FileInputItemGroup,
+  Be as FileInputItemName,
+  Ee as FileInputItemPreview,
+  He as FileInputItemPreviewImage,
+  ke as FileInputItemSizeText,
+  Ne as FileInputTrigger,
+  Ce as FileTabs,
+  Se as FileTabsContent,
+  Te as FileTabsList,
+  Ie as FileTabsService,
+  de as FileTabsTrigger,
+  be as Flex,
+  Lo as FullScreen,
+  zo as Gantt,
+  Qe as Input,
+  je as InputDescription,
+  Je as InputLabel,
+  Ue as InputMessage,
+  Xe as InputSuggestionMenuContent,
+  Ye as InputSuggestionMenuContentItems,
+  Eo as Layout,
+  ko as Menu,
+  No as MenuArrow,
+  Oo as MenuCheckboxItem,
+  Qo as MenuContent,
+  Zo as MenuGroup,
+  jo as MenuItem,
+  qo as MenuItemIndicator,
+  Jo as MenuLabel,
+  Ko as MenuPortal,
+  Uo as MenuSeparator,
+  Wo as MenuSub,
+  Xo as MenuSubContent,
+  Yo as MenuSubTrigger,
+  _o as MenuTrigger,
+  $e as NumberInput,
+  oo as PasswordInput,
+  no as PinInput,
+  po as PinInputField,
+  ao as PinInputHiddenField,
+  et as Quote,
+  uo as RadioGroup,
+  io as RadioInput,
+  Nt as ReactiveArrayService,
+  tt as ResizableHandle,
+  rt as ResizablePanel,
+  nt as ResizablePanelGroup,
+  at as Row,
+  ut as ScrollArea,
+  lt as ScrollAreaCorner,
+  it as ScrollAreaScrollbar,
+  xt as ScrollAreaThumb,
+  ft as ScrollAreaViewport,
+  gt as SegmentedControl,
+  Ct as SegmentedControlItem,
+  fo as SelectContent,
+  Io as SelectInput,
+  go as SelectItem,
+  Co as SelectItemText,
+  So as SelectPortal,
+  To as SelectTrigger,
+  so as SelectValue,
+  bo as SelectViewport,
+  Tt as Spacing,
+  Mo as SwitchInput,
+  st as Tab,
+  bt as TabContent,
+  ct as TabList,
+  Mt as TabTrigger,
+  Dt as Text,
+  Do as TextAreaInput,
+  Po as TextInput,
+  Pt as Toast,
+  ht as Tooltip,
+  Rt as TooltipArrow,
+  Gt as TooltipContent,
+  Lt as TooltipPortal,
+  yt as TooltipTrigger,
+  Ro as buildDefaultSyntax,
   X as createFilterQueryLanguage,
   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
+  Wt as getDOMSizeFromCodeZeroSize,
+  Vo as getRelativeValue,
+  Jt as hashToColor,
+  Zt as mergeComponentProps,
+  to as passwordValidation,
+  vt as toast,
+  wo as useForm,
+  Ot as useReactiveArrayService,
+  Et as useService,
+  Ht as useStore,
+  Kt as withAlpha
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -36,6 +36,7 @@
     "@radix-ui/react-one-time-password-field": "^0.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -92,7 +93,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^4.1.2",
-    "@radix-ui/react-select": "^2.2.6"
+    "@ark-ui/react": "^5.36.2"
   },
   "main": "dist/index.js",
   "repository": {
@@ -118,6 +119,7 @@
     "@radix-ui/react-one-time-password-field": "^0.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -134,7 +136,7 @@
     "react-resizable-panels": "^4.3.1",
     "react-zoom-pan-pinch": "^3.7.0",
     "sonner": "^2.0.7",
-    "@radix-ui/react-select": "^2.2.6"
+    "@ark-ui/react": "^5.36.2"
   },
   "publishConfig": {
     "access": "public"