vlite3 1.4.5 → 1.4.7

package/README.md

@@ -463,6 +463,7 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Charts**
 - [x] **GanttChart**
 - [x] **ImageComparison**
+- [x] **ImageMagnifier**
 
 ### Feedback & Overlays
 

package/components/AppShell/AppShellLayoutStorefront.vue.d.ts

@@ -7,31 +7,18 @@ declare function __VLS_template(): {
             toggle: () => boolean;
         }): any;
         left?(_: {}): any;
-        left?(_: {}): any;
-        nav?(_: {}): any;
-        nav?(_: {}): any;
-        logo?(_: {}): any;
-        logo?(_: {}): any;
-        center?(_: {}): any;
         center?(_: {}): any;
-        search?(_: {}): any;
-        search?(_: {}): any;
-        actions?(_: {}): any;
-        actions?(_: {}): any;
         right?(_: {}): any;
-        right?(_: {}): any;
-        'mobile-search'?(_: {}): any;
-        categories?(_: {
-            categoryRoutePrefix: string;
-        }): any;
+        'mobile-bottom'?(_: {}): any;
         categories?(_: {
             categoryRoutePrefix: string;
         }): any;
         main?(_: {}): any;
         footer?(_: {}): any;
         'mobile-sidebar-header'?(_: {}): any;
-        'mobile-sidebar'?(_: {}): any;
-        'mobile-nav'?(_: {}): any;
+        'mobile-sidebar'?(_: {
+            categoryRoutePrefix: string;
+        }): any;
         'mobile-sidebar-footer'?(_: {}): any;
     };
     refs: {

package/components/AppShell/AppShellLayoutStorefront.vue.js

@@ -1,215 +1,179 @@
-import { defineComponent as T, inject as P, computed as v, openBlock as r, createElementBlock as t, renderSlot as o, createCommentVNode as i, createElementVNode as d, normalizeClass as a, unref as s, createVNode as b, isRef as y, createSlots as R, withCtx as $ } from "vue";
-import V from "../Icon.vue.js";
-import j from "../SidePanel.vue.js";
-import x from "../Navbar/NavbarTabs.vue.js";
+import { defineComponent as z, inject as T, computed as v, openBlock as t, createElementBlock as i, renderSlot as l, createCommentVNode as d, createElementVNode as a, normalizeClass as n, unref as e, createVNode as f, isRef as y, createSlots as _, withCtx as w } from "vue";
+import R from "../Icon.vue.js";
+import P from "../SidePanel.vue.js";
+import V from "../Navbar/NavbarTabs.vue.js";
 /* empty css                        */
-import N from "../Breadcrumb/Breadcrumb.vue.js";
+import j from "../Breadcrumb/Breadcrumb.vue.js";
 /* empty css                                */
-import { APPSHELL_LAYOUT_KEY as B } from "./useAppShell.js";
-import { normalizeRoutePrefix as E } from "../CategoryMenu/utils.js";
-const L = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body text-foreground overflow-hidden" }, M = {
+import { APPSHELL_LAYOUT_KEY as N } from "./useAppShell.js";
+import { normalizeRoutePrefix as B } from "../CategoryMenu/utils.js";
+const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body text-foreground overflow-hidden" }, L = {
   key: 0,
   class: "shrink-0 w-full"
-}, O = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, A = { class: "flex items-center gap-2 min-w-0" }, U = ["aria-label"], Y = { class: "w-full min-w-0 max-w-7xl mx-auto overflow-hidden px-3 sm:px-4 md:px-6 lg:px-8" }, D = {
+}, M = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, O = ["aria-label"], A = {
+  key: 0,
+  class: "flex items-center justify-center min-w-0 flex-1 px-2"
+}, U = { class: "w-full min-w-0 max-w-7xl mx-auto overflow-hidden px-3 sm:px-4 md:px-6 lg:px-8" }, Y = {
   key: 0,
   class: "shrink-0 w-full"
-}, H = {
+}, D = {
   key: 2,
   class: "shrink-0 w-full border-t border-border bg-background"
-}, I = { class: "flex flex-col h-full" }, K = {
+}, H = { class: "flex flex-col h-full" }, I = {
   class: "flex-1 overflow-y-auto px-3.5 py-4 space-y-4 scrollbar-thin scrollbar-stable",
   style: { "will-change": "transform", contain: "layout style" }
-}, q = {
+}, K = {
   key: 0,
   class: "mt-auto border-t border-border px-3.5 py-3"
-}, te = /* @__PURE__ */ T({
+}, te = /* @__PURE__ */ z({
   __name: "AppShellLayoutStorefront",
-  setup(F) {
-    const w = P(B), {
-      props: l,
-      isMobileMenuOpen: n,
-      isSidebarVisible: G,
-      toggleSidebar: J,
-      pageTitle: Q,
-      breadcrumbData: g,
-      breakpointClasses: m,
-      nestedTabsItems: p,
+  setup(q) {
+    const k = T(N), {
+      props: s,
+      isMobileMenuOpen: r,
+      isSidebarVisible: F,
+      toggleSidebar: G,
+      pageTitle: J,
+      breadcrumbData: p,
+      breakpointClasses: u,
+      nestedTabsItems: g,
       activeNestedTab: c,
-      handleNestedTabClick: k,
-      mainScrollRef: C,
-      layoutMainRef: S
-    } = w, z = v(() => [
+      handleNestedTabClick: x,
+      mainScrollRef: $,
+      layoutMainRef: C
+    } = k, S = v(() => [
       "w-full shrink-0 bg-background transition-shadow duration-200",
       {
         fixed: "fixed top-0 left-0 z-50",
         sticky: "sticky top-0 z-50",
         relative: "relative z-20",
         absolute: "absolute top-0 left-0 w-full z-50"
-      }[l.position || "sticky"],
-      l.border ? "border-b border-border" : "",
-      l.glass ? "bg-background/90 backdrop-blur-md" : "",
-      l.floating ? "m-3 rounded-lg border border-border shadow-sm overflow-hidden" : "",
-      l.class
-    ].filter(Boolean).join(" ")), h = v(() => E(l.categoryRoutePrefix));
-    return (e, u) => (r(), t("div", L, [
-      e.$slots.announcement ? (r(), t("div", M, [
-        o(e.$slots, "announcement")
-      ])) : i("", !0),
-      d("header", {
-        class: a(z.value)
+      }[s.position || "sticky"],
+      s.border ? "border-b border-border" : "",
+      s.glass ? "bg-background/90 backdrop-blur-md" : "",
+      s.floating ? "m-3 rounded-lg border border-border shadow-sm overflow-hidden" : "",
+      s.class
+    ].filter(Boolean).join(" ")), h = v(() => B(s.categoryRoutePrefix));
+    return (o, m) => (t(), i("div", E, [
+      o.$slots.announcement ? (t(), i("div", L, [
+        l(o.$slots, "announcement")
+      ])) : d("", !0),
+      a("header", {
+        class: n(S.value)
       }, [
-        d("div", O, [
-          d("div", {
-            class: a(["grid w-full grid-cols-[auto_minmax(0,1fr)_auto] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3", s(l).height])
+        a("div", M, [
+          a("div", {
+            class: n(["flex w-full items-center justify-between gap-3 md:gap-6", e(s).height])
           }, [
-            d("div", A, [
-              o(e.$slots, "mobile-trigger", {
-                isOpen: s(n),
-                toggle: () => n.value = !s(n)
+            a("div", {
+              class: n(["flex items-center gap-2 sm:gap-4 min-w-0 shrink-0", { "flex-1": !o.$slots.center }])
+            }, [
+              l(o.$slots, "mobile-trigger", {
+                isOpen: e(r),
+                toggle: () => r.value = !e(r)
               }, () => [
-                d("button", {
+                a("button", {
                   type: "button",
-                  class: a(["inline-flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent", [s(m).mobileTrigger, s(l).mobileTriggerClass]]),
-                  "aria-label": s(n) ? "Close menu" : "Open menu",
-                  onClick: u[0] || (u[0] = (f) => n.value = !s(n))
+                  class: n(["inline-flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent", [e(u).mobileTrigger, e(s).mobileTriggerClass]]),
+                  "aria-label": e(r) ? "Close menu" : "Open menu",
+                  onClick: m[0] || (m[0] = (b) => r.value = !e(r))
                 }, [
-                  b(V, {
-                    icon: s(n) ? "lucide:x" : "lucide:menu",
+                  f(R, {
+                    icon: e(r) ? "lucide:x" : "lucide:menu",
                     class: "w-5 h-5"
                   }, null, 8, ["icon"])
-                ], 10, U)
+                ], 10, O)
               ]),
-              e.$slots.left ? (r(), t("div", {
-                key: 0,
-                class: a(["items-center gap-2 min-w-0", s(m).desktopContent])
-              }, [
-                o(e.$slots, "left")
-              ], 2)) : i("", !0),
-              e.$slots.nav ? (r(), t("nav", {
-                key: 1,
-                class: a(["items-center gap-1 min-w-0", s(m).desktopContent]),
-                "aria-label": "Primary navigation"
-              }, [
-                o(e.$slots, "nav")
-              ], 2)) : i("", !0)
-            ]),
-            e.$slots.logo || e.$slots.center ? (r(), t("div", {
-              key: 0,
-              class: a(["min-w-0 justify-self-center flex items-center justify-center", s(l).logoClass])
-            }, [
-              o(e.$slots, "logo", {}, () => [
-                o(e.$slots, "center")
-              ])
-            ], 2)) : i("", !0),
-            d("div", {
-              class: a(["flex items-center justify-end gap-2 min-w-0 justify-self-end", s(l).rightClass])
+              l(o.$slots, "left")
+            ], 2),
+            o.$slots.center ? (t(), i("div", A, [
+              l(o.$slots, "center")
+            ])) : d("", !0),
+            a("div", {
+              class: n(["flex items-center justify-end gap-2 sm:gap-4 min-w-0 shrink-0", [e(s).rightClass, { "flex-1": !o.$slots.center }]])
             }, [
-              e.$slots.search ? (r(), t("div", {
-                key: 0,
-                class: a(["items-center min-w-0 w-full max-w-sm", s(m).desktopContent])
-              }, [
-                o(e.$slots, "search")
-              ], 2)) : i("", !0),
-              o(e.$slots, "actions", {}, () => [
-                o(e.$slots, "right")
-              ])
+              l(o.$slots, "right")
             ], 2)
           ], 2),
-          e.$slots["mobile-search"] || e.$slots.search ? (r(), t("div", {
+          o.$slots["mobile-bottom"] ? (t(), i("div", {
             key: 0,
-            class: a(["pb-3", s(m).mobileTrigger])
+            class: n(["pb-3 w-full", e(u).mobileTrigger])
           }, [
-            o(e.$slots, "mobile-search", {}, () => [
-              o(e.$slots, "search")
-            ])
-          ], 2)) : i("", !0)
+            l(o.$slots, "mobile-bottom")
+          ], 2)) : d("", !0)
         ]),
-        e.$slots.categories ? (r(), t("div", {
+        o.$slots.categories ? (t(), i("div", {
           key: 0,
-          class: a(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [s(m).desktopContent, s(l).menuClass]])
+          class: n(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [e(u).desktopContent, e(s).menuClass]])
         }, [
-          d("div", Y, [
-            o(e.$slots, "categories", { categoryRoutePrefix: h.value })
+          a("div", U, [
+            l(o.$slots, "categories", { categoryRoutePrefix: h.value })
           ])
-        ], 2)) : i("", !0)
+        ], 2)) : d("", !0)
       ], 2),
-      e.$slots.main ? (r(), t("main", {
+      o.$slots.main ? (t(), i("main", {
         key: 1,
         ref_key: "layoutMainRef",
-        ref: S,
+        ref: C,
         class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0"
       }, [
-        s(l).renderNestedTabs && s(p).length > 0 ? (r(), t("div", D, [
-          b(x, {
-            modelValue: s(c),
-            "onUpdate:modelValue": u[1] || (u[1] = (f) => y(c) ? c.value = f : null),
-            onChange: s(k),
-            items: s(p)
+        e(s).renderNestedTabs && e(g).length > 0 ? (t(), i("div", Y, [
+          f(V, {
+            modelValue: e(c),
+            "onUpdate:modelValue": m[1] || (m[1] = (b) => y(c) ? c.value = b : null),
+            onChange: e(x),
+            items: e(g)
           }, null, 8, ["modelValue", "onChange", "items"])
-        ])) : i("", !0),
-        s(l).breadcrumb && s(l).breadcrumbPosition === "main" && s(g).items.value.length > 1 ? (r(), t("div", {
+        ])) : d("", !0),
+        e(s).breadcrumb && e(s).breadcrumbPosition === "main" && e(p).items.value.length > 1 ? (t(), i("div", {
           key: 1,
-          class: a(["shrink-0 w-full border-b border-border px-6 py-2", s(l).breadcrumbClass])
+          class: n(["shrink-0 w-full border-b border-border px-6 py-2", e(s).breadcrumbClass])
         }, [
-          b(s(N), {
-            items: s(g).items.value,
-            variant: s(l).breadcrumbVariant,
-            separator: s(l).breadcrumbSeparator,
-            size: s(l).breadcrumbSize
+          f(e(j), {
+            items: e(p).items.value,
+            variant: e(s).breadcrumbVariant,
+            separator: e(s).breadcrumbSeparator,
+            size: e(s).breadcrumbSize
           }, null, 8, ["items", "variant", "separator", "size"])
-        ], 2)) : i("", !0),
-        d("div", {
+        ], 2)) : d("", !0),
+        a("div", {
           ref_key: "mainScrollRef",
-          ref: C,
+          ref: $,
           style: { "will-change": "transform", contain: "layout style" },
-          class: a(["flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable", s(l).contentClass])
+          class: n(["flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable", e(s).contentClass])
         }, [
-          o(e.$slots, "main")
+          l(o.$slots, "main")
         ], 2)
-      ], 512)) : i("", !0),
-      e.$slots.footer ? (r(), t("footer", H, [
-        o(e.$slots, "footer")
-      ])) : i("", !0),
-      b(j, {
-        show: s(n),
-        "onUpdate:show": u[2] || (u[2] = (f) => y(n) ? n.value = f : null),
+      ], 512)) : d("", !0),
+      o.$slots.footer ? (t(), i("footer", D, [
+        l(o.$slots, "footer")
+      ])) : d("", !0),
+      f(P, {
+        show: e(r),
+        "onUpdate:show": m[2] || (m[2] = (b) => y(r) ? r.value = b : null),
         position: "left",
         size: "sm",
-        triggerClass: s(m).mobileTrigger,
-        class: a(["z-60", s(m).mobileTrigger]),
+        triggerClass: e(u).mobileTrigger,
+        class: n(["z-60", e(u).mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
-      }, R({
-        default: $(() => [
-          d("div", I, [
-            d("div", K, [
-              o(e.$slots, "mobile-sidebar", {}, () => [
-                o(e.$slots, "mobile-nav", {}, () => [
-                  o(e.$slots, "nav")
-                ]),
-                o(e.$slots, "categories", { categoryRoutePrefix: h.value }),
-                o(e.$slots, "left")
-              ])
+      }, _({
+        default: w(() => [
+          a("div", H, [
+            a("div", I, [
+              l(o.$slots, "mobile-sidebar", { categoryRoutePrefix: h.value })
             ]),
-            e.$slots["mobile-sidebar-footer"] || e.$slots.actions || e.$slots.right ? (r(), t("div", q, [
-              o(e.$slots, "mobile-sidebar-footer", {}, () => [
-                o(e.$slots, "actions", {}, () => [
-                  o(e.$slots, "right")
-                ])
-              ])
-            ])) : i("", !0)
+            o.$slots["mobile-sidebar-footer"] ? (t(), i("div", K, [
+              l(o.$slots, "mobile-sidebar-footer")
+            ])) : d("", !0)
           ])
         ]),
         _: 2
       }, [
-        e.$slots["mobile-sidebar-header"] || e.$slots.logo || e.$slots.center ? {
+        o.$slots["mobile-sidebar-header"] ? {
           name: "header",
-          fn: $(() => [
-            o(e.$slots, "mobile-sidebar-header", {}, () => [
-              o(e.$slots, "logo", {}, () => [
-                o(e.$slots, "center")
-              ])
-            ])
+          fn: w(() => [
+            l(o.$slots, "mobile-sidebar-header")
           ]),
           key: "0"
         } : void 0

package/components/AvatarUploader/AvatarUploader.vue.d.ts

@@ -1,4 +1,4 @@
-import { FilePickerValue } from '../FilePicker/FilePicker.vue';
+import { FilePickerValue } from '../FilePicker/types';
 import { AvatarSize, AvatarRounded } from '../../types';
 export interface Props {
     modelValue?: any;

package/components/AvatarUploader/AvatarUploader.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent as x, ref as w, computed as z, openBlock as i, createElementBlock as n, createElementVNode as b, normalizeClass as r, createVNode as o, withCtx as V, createCommentVNode as g, withModifiers as C } from "vue";
 import c from "../Icon.vue.js";
-import U from "../FilePicker/FilePicker.vue.js";
+import U from "../FilePicker/index.vue.js";
 import $ from "../Avatar.vue.js";
 const A = ["data-testid"], R = ["onClick"], F = /* @__PURE__ */ x({
   name: "AvatarUploader",

package/components/CategoryManager/CategoryManager.vue2.js

@@ -17,10 +17,10 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import qe from "../IconPicker.vue.js";
 /* empty css                                 */
-/* empty css                        */
+/* empty css                 */
 /* empty css                                         */
 /* empty css                                    */
 /* empty css                                        */

package/components/Chat/ChatInterface.vue.js

@@ -2,7 +2,7 @@ import { defineComponent as te, ref as p, computed as w, onMounted as le, onUnmo
 import ce from "./ChatBubble.vue.js";
 import V from "../Button.vue.js";
 import K from "../Icon.vue.js";
-import ue from "../FilePicker/FilePicker.vue.js";
+import ue from "../FilePicker/index.vue.js";
 import { useFileUpload as fe } from "../Form/composables/useFileUpload.js";
 import { $t as u } from "../../utils/i18n.js";
 const me = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent" }, ve = {

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue2.js";
-/* empty css             */
+import o from "./ColorIro.vue.js";
+/* empty css              */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -7,8 +7,8 @@ import "../../core/config.js";
 /* empty css                                    */
 /* empty css                            */
 import E from "../Button.vue.js";
-import _ from "./ColorIro.vue2.js";
-/* empty css             */
+import _ from "./ColorIro.vue.js";
+/* empty css              */
 import { useEyeDropper as I } from "@vueuse/core";
 const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
   key: 0,

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue.js";
+import ee from "./CommandPaletteItem.vue2.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                        */
+/* empty css                       */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Comment/CommentEditor.vue.js

@@ -3,7 +3,7 @@ import { $t as k } from "../../utils/i18n.js";
 import C from "../Button.vue.js";
 import w from "../Icon.vue.js";
 import O from "../Avatar.vue.js";
-import Q from "../FilePicker/FilePicker.vue.js";
+import Q from "../FilePicker/index.vue.js";
 import { useFileUpload as W } from "../Form/composables/useFileUpload.js";
 const X = { class: "flex-1 min-w-0 flex flex-col gap-2" }, Y = {
   key: 0,

package/components/FilePicker/FilePickerDropzone.vue.d.ts

@@ -0,0 +1,27 @@
+import { FilePickerValue } from './types';
+interface Props {
+    displayFiles: FilePickerValue[];
+    hasValue: boolean;
+    multiSelect: boolean;
+    maxFiles?: number;
+    loading: boolean;
+    isProcessing: boolean;
+    disabled: boolean;
+    allowRename: boolean;
+    fileTypes: string[];
+    displayText: string;
+    dragAndDropLabel: string;
+    enterFileNameLabel: string;
+    renameFileLabel: string;
+    addMoreLabel: string;
+    dataTestid: string;
+    getPreviewSrc: (file: FilePickerValue) => string;
+    onTrigger: () => void;
+    onRemove: (index: number) => void;
+    onRename: (index: number, newName: string) => void;
+    onDrop: (fileList: FileList) => void;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/components/FilePicker/FilePickerDropzone.vue.js

@@ -0,0 +1,117 @@
+import { defineComponent as F, ref as u, computed as D, openBlock as n, createElementBlock as t, normalizeClass as k, createElementVNode as o, createBlock as s, toDisplayString as d, createTextVNode as T, createCommentVNode as g, Fragment as w, renderList as L, unref as B, createVNode as P } from "vue";
+import f from "../Icon.vue.js";
+import R from "../Button.vue.js";
+import p from "./FilePreview.vue.js";
+import { isImageFile as C } from "./utils.js";
+const N = ["data-testid"], S = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, V = { class: "space-y-1" }, z = { class: "text-sm font-medium text-foreground" }, A = { class: "text-primary hover:underline" }, M = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+}, $ = {
+  key: 1,
+  class: "space-y-2"
+}, j = {
+  key: 0,
+  class: "flex gap-2"
+}, H = /* @__PURE__ */ F({
+  __name: "FilePickerDropzone",
+  props: {
+    displayFiles: {},
+    hasValue: { type: Boolean },
+    multiSelect: { type: Boolean },
+    maxFiles: {},
+    loading: { type: Boolean },
+    isProcessing: { type: Boolean },
+    disabled: { type: Boolean },
+    allowRename: { type: Boolean },
+    fileTypes: {},
+    displayText: {},
+    dragAndDropLabel: {},
+    enterFileNameLabel: {},
+    renameFileLabel: {},
+    addMoreLabel: {},
+    dataTestid: {},
+    getPreviewSrc: { type: Function },
+    onTrigger: { type: Function },
+    onRemove: { type: Function },
+    onRename: { type: Function },
+    onDrop: { type: Function }
+  },
+  setup(e) {
+    const a = e, l = u(!1), y = u(null), b = (i) => {
+      i.preventDefault(), !(a.disabled || a.loading) && (l.value = !0);
+    }, v = (i) => {
+      i.preventDefault(), l.value = !1;
+    }, x = (i) => {
+      i.preventDefault(), l.value = !1, !(a.disabled || a.loading || a.isProcessing) && i.dataTransfer?.files && a.onDrop(i.dataTransfer.files);
+    }, h = D(() => a.multiSelect ? a.maxFiles ? a.displayFiles.length < a.maxFiles : !0 : !1);
+    return (i, c) => (n(), t("div", {
+      ref_key: "containerRef",
+      ref: y,
+      class: "relative",
+      "data-testid": e.dataTestid,
+      onDragover: b,
+      onDragleave: v,
+      onDrop: x
+    }, [
+      e.hasValue ? (n(), t("div", $, [
+        (n(!0), t(w, null, L(e.displayFiles, (r, m) => (n(), s(p, {
+          key: m,
+          file: r,
+          index: m,
+          "allow-rename": e.allowRename,
+          disabled: e.disabled,
+          loading: e.loading,
+          "is-processing": e.isProcessing,
+          "multi-select": e.multiSelect,
+          "enter-file-name-label": e.enterFileNameLabel,
+          "rename-file-label": e.renameFileLabel,
+          "get-preview-src": e.getPreviewSrc,
+          "is-image": B(C),
+          "on-remove": e.onRemove,
+          "on-rename": e.onRename,
+          "on-trigger": e.onTrigger
+        }, null, 8, ["file", "index", "allow-rename", "disabled", "loading", "is-processing", "multi-select", "enter-file-name-label", "rename-file-label", "get-preview-src", "is-image", "on-remove", "on-rename", "on-trigger"]))), 128)),
+        h.value ? (n(), t("div", j, [
+          P(R, {
+            size: "sm",
+            variant: "outline",
+            icon: "lucide:plus",
+            text: e.addMoreLabel,
+            disabled: e.disabled || e.loading || e.isProcessing,
+            onClick: e.onTrigger
+          }, null, 8, ["text", "disabled", "onClick"])
+        ])) : g("", !0)
+      ])) : (n(), t("div", {
+        key: 0,
+        class: k(["border-2 bg-body border-dashed border-border rounded-lg p-6 transition-all duration-200 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center gap-2", [
+          l.value ? "border-primary bg-primary/5" : "hover:border-primary/50",
+          e.disabled || e.loading || e.isProcessing ? "opacity-50 cursor-not-allowed" : ""
+        ]]),
+        onClick: c[0] || (c[0] = //@ts-ignore
+        (...r) => e.onTrigger && e.onTrigger(...r))
+      }, [
+        o("div", S, [
+          e.loading || e.isProcessing ? (n(), s(f, {
+            key: 0,
+            icon: "lucide:loader-2",
+            class: "w-6 h-6 animate-spin"
+          })) : (n(), s(f, {
+            key: 1,
+            icon: "lucide:upload-cloud",
+            class: "w-6 h-6"
+          }))
+        ]),
+        o("div", V, [
+          o("p", z, [
+            o("span", A, d(e.displayText), 1),
+            T(" " + d(e.dragAndDropLabel), 1)
+          ]),
+          e.fileTypes.length ? (n(), t("p", M, d(e.fileTypes.join(", ")), 1)) : g("", !0)
+        ])
+      ], 2))
+    ], 40, N));
+  }
+});
+export {
+  H as default
+};

package/components/FilePicker/FilePickerDropzone.vue2.js

@@ -0,0 +1,4 @@
+import f from "./FilePickerDropzone.vue.js";
+export {
+  f as default
+};

package/components/FilePicker/FilePickerInput.vue.d.ts

@@ -0,0 +1,22 @@
+import { FilePickerValue } from './types';
+import { InputSize, InputRounded } from '../../types';
+interface Props {
+    displayFiles: FilePickerValue[];
+    firstDisplayFile?: FilePickerValue;
+    hasValue: boolean;
+    multiSelect: boolean;
+    loading: boolean;
+    isProcessing: boolean;
+    disabled: boolean;
+    displayPlaceholder: string;
+    acceptedFileSummary: string;
+    size: InputSize;
+    rounded: InputRounded;
+    getPreviewSrc: (file: FilePickerValue) => string;
+    dataTestid: string;
+    triggerAriaLabel: string;
+    onTrigger: () => void;
+    onClear: () => void;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;