@indielayer/ui 1.9.3 → 1.10.1

package/lib/components/select/theme/Select.base.theme.js

@@ -5,6 +5,7 @@ const t = {
       const r = ["w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
       return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-1.5 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
+    truncateCounter: "absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs",
     content: "p-1",
     search: "p-1 mb-0.5",
     contentBody: "overflow-y-auto max-h-64 min-w-[280px]",

package/lib/components/tab/Tab.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as R, computed as s, ref as d, inject as j, reactive as D, onMounted as E, openBlock as c, createBlock as m, resolveDynamicComponent as L, normalizeStyle as V, unref as o, normalizeClass as v, withCtx as M, renderSlot as g, createElementVNode as z, createCommentVNode as p, toDisplayString as O, Teleport as P, createElementBlock as X } from "vue";
-import { useMutationObserver as F } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useMutationObserver as F } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { injectTabGroupKey as G } from "../../composables/keys.js";
 import { useCommon as T } from "../../composables/useCommon.js";
 import { useTheme as I } from "../../composables/useTheme.js";

package/lib/components/tab/TabGroup.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent as B, ref as r, watchEffect as z, reactive as E, computed as o, provide as V, watch as G, onMounted as N, openBlock as $, createElementBlock as q, createElementVNode as f, normalizeClass as v, unref as n, normalizeStyle as F, createVNode as L, withCtx as M, renderSlot as O, withDirectives as W, vShow as X, nextTick as j } from "vue";
-import { useMutationObserver as D, useResizeObserver as K } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useMutationObserver as D, useResizeObserver as K } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { injectTabGroupKey as P } from "../../composables/keys.js";
 import { useCommon as b } from "../../composables/useCommon.js";
 import { useColors as A } from "../../composables/useColors.js";
 import { useTheme as H } from "../../composables/useTheme.js";
 import I from "../scroll/Scroll.vue.js";
-import { useThrottleFn as J } from "../../node_modules/.pnpm/@vueuse_shared@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { useThrottleFn as J } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
 const Q = {
   ...b.validators(),
   variant: ["line", "block"],

package/lib/components/table/TableCell.vue.d.ts

@@ -51,8 +51,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         validator: (value: string) => boolean;
     };
 }>> & Readonly<{}>, {
-    dense: boolean;
     truncate: boolean;
+    dense: boolean;
     verticalAlign: "top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;

package/lib/components/table/theme/TableHead.base.theme.js

@@ -4,7 +4,7 @@ const s = {
       const e = ["align-bottom bg-secondary-50 dark:bg-secondary-700"];
       return t.stickyHeader && e.push("sticky top-0 z-10"), e;
     },
-    row: "text-sm text-secondary-600 dark:text-secondary-200 border-b"
+    row: "text-sm text-secondary-700 dark:text-secondary-200 border-b"
   }
 }, a = s;
 export {

package/lib/components/table/theme/TableHeader.base.theme.js

@@ -1,7 +1,7 @@
 const s = {
   classes: {
     th: ({ props: e }) => {
-      const t = ["relative py-3 font-semibold text-xs px-3"];
+      const t = ["relative p-2.5 font-medium"];
       return e.sortable && t.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), e.textAlign === "justify" && t.push("text-justify"), t;
     },
     sortIcon: ({ props: e }) => ["absolute stroke-2 w-3 h-3 top-3.5 right-0.5"]

package/lib/components/tag/Tag.vue.js

@@ -1,15 +1,15 @@
-import { defineComponent as f, computed as g, openBlock as t, createBlock as b, resolveDynamicComponent as v, normalizeClass as a, unref as r, normalizeStyle as k, withCtx as x, createElementBlock as y, renderSlot as l, createVNode as z } from "vue";
-import { useColors as B } from "../../composables/useColors.js";
+import { defineComponent as f, computed as g, openBlock as t, createBlock as v, resolveDynamicComponent as b, normalizeClass as a, unref as r, normalizeStyle as k, withCtx as x, createElementBlock as y, renderSlot as l, createElementVNode as z, createVNode as B } from "vue";
+import { useColors as C } from "../../composables/useColors.js";
 import { useCommon as n } from "../../composables/useCommon.js";
-import { useTheme as C } from "../../composables/useTheme.js";
+import { useTheme as h } from "../../composables/useTheme.js";
 import { closeIcon as S } from "../../common/icons.js";
-import $ from "../icon/Icon.vue.js";
-const h = {
+import _ from "../icon/Icon.vue.js";
+const $ = {
   key: 0,
-  class: "max-w-full truncate"
-}, w = {
+  class: "max-w-full truncate pr-4"
+}, w = { class: "absolute right-1.5 top-0 h-full flex items-center" }, N = {
   ...n.props(),
-  ...B.props("slate"),
+  ...C.props("secondary"),
   tag: {
     type: String,
     default: "span"
@@ -23,15 +23,15 @@ const h = {
   validators: {
     ...n.validators()
   }
-}, V = /* @__PURE__ */ f({
+}, j = /* @__PURE__ */ f({
   ...T,
-  props: w,
+  props: N,
   emits: ["remove"],
   setup(d) {
-    const o = d, i = g(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: m, classes: c, className: u } = C("Tag", {}, o);
-    return (e, s) => (t(), b(v(e.tag), {
+    const o = d, i = g(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: m, classes: c, className: u } = h("Tag", {}, o);
+    return (e, s) => (t(), v(b(e.tag), {
       class: a([
-        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border",
+        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative",
         [
           r(u),
           r(c).wrapper,
@@ -42,14 +42,16 @@ const h = {
       style: k(r(m))
     }, {
       default: x(() => [
-        e.removable ? (t(), y("span", h, [
+        e.removable ? (t(), y("span", $, [
           l(e.$slots, "default"),
-          z($, {
-            size: i.value,
-            icon: r(S),
-            class: a(["ml-1.5 -mt-0.5 cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
-            onClick: s[0] || (s[0] = (p) => !e.disabled && e.$emit("remove", p))
-          }, null, 8, ["size", "icon", "class"])
+          z("div", w, [
+            B(_, {
+              size: i.value,
+              icon: r(S),
+              class: a(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
+              onClick: s[0] || (s[0] = (p) => !e.disabled && e.$emit("remove", p))
+            }, null, 8, ["size", "icon", "class"])
+          ])
         ])) : l(e.$slots, "default", { key: 1 })
       ]),
       _: 3
@@ -57,5 +59,5 @@ const h = {
   }
 });
 export {
-  V as default
+  j as default
 };

package/lib/components/textarea/Textarea.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as q, useAttrs as R, computed as A, ref as F, watch as H, openBlock as u, createBlock as p, normalizeStyle as K, unref as r, normalizeClass as L, withCtx as O, createElementVNode as $, mergeProps as D, toHandlers as W, withKeys as X, createCommentVNode as G } from "vue";
-import { useResizeObserver as J, useEventListener as M } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useResizeObserver as J, useEventListener as M } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { useCSS as Q } from "../../composables/useCSS.js";
 import { useTheme as U } from "../../composables/useTheme.js";
 import { useCommon as f } from "../../composables/useCommon.js";

package/lib/components/upload/Upload.vue.d.ts

@@ -0,0 +1,195 @@
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const validators: {
+    variant: readonly ["box"];
+    size: string[];
+};
+declare const uploadProps: {
+    placeholder: StringConstructor;
+    accept: StringConstructor;
+    multiple: BooleanConstructor;
+    maxFiles: (StringConstructor | NumberConstructor)[];
+    maxFileSize: (StringConstructor | NumberConstructor)[];
+    variant: {
+        type: PropType<"box">;
+        default: string;
+    };
+    action: StringConstructor;
+    headers: PropType<Record<string, string>>;
+    method: {
+        type: PropType<"POST" | "PUT">;
+        default: string;
+    };
+    withCredentials: BooleanConstructor;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+};
+export type UploadFile = {
+    file: File;
+    completed: boolean;
+    response?: any;
+    progress: number;
+    error: string;
+};
+export type UploadVariant = typeof validators.variant[number];
+export type UploadProps = ExtractPublicPropTypes<typeof uploadProps>;
+type InternalClasses = 'wrapper' | 'input';
+export interface UploadTheme extends ThemeComponent<UploadProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    placeholder: StringConstructor;
+    accept: StringConstructor;
+    multiple: BooleanConstructor;
+    maxFiles: (StringConstructor | NumberConstructor)[];
+    maxFileSize: (StringConstructor | NumberConstructor)[];
+    variant: {
+        type: PropType<"box">;
+        default: string;
+    };
+    action: StringConstructor;
+    headers: PropType<Record<string, string>>;
+    method: {
+        type: PropType<"POST" | "PUT">;
+        default: string;
+    };
+    withCredentials: BooleanConstructor;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+}>, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    reset: () => void;
+    validate: (val?: any) => boolean;
+    setError: (val: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    placeholder: StringConstructor;
+    accept: StringConstructor;
+    multiple: BooleanConstructor;
+    maxFiles: (StringConstructor | NumberConstructor)[];
+    maxFileSize: (StringConstructor | NumberConstructor)[];
+    variant: {
+        type: PropType<"box">;
+        default: string;
+    };
+    action: StringConstructor;
+    headers: PropType<Record<string, string>>;
+    method: {
+        type: PropType<"POST" | "PUT">;
+        default: string;
+    };
+    withCredentials: BooleanConstructor;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    tooltip: StringConstructor;
+    skipFormRegistry: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+}>> & Readonly<{
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    modelValue: string | number | boolean | object | any[] | undefined;
+    readonly: boolean;
+    required: boolean;
+    validateOnInput: boolean;
+    hideFooter: boolean;
+    rules: unknown[];
+    skipFormRegistry: boolean;
+    variant: "box";
+    multiple: boolean;
+    method: "POST" | "PUT";
+    withCredentials: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    box?(_: {
+        isOver: boolean;
+    }): any;
+    files?(_: {
+        files: (string | number | boolean | object | any[] | undefined) & UploadFile[];
+    }): any;
+    removeIcon?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/upload/Upload.vue.js

@@ -0,0 +1,264 @@
+import { defineComponent as te, ref as y, computed as oe, watch as ne, openBlock as d, createElementBlock as f, normalizeClass as b, unref as s, createVNode as x, normalizeStyle as se, withCtx as ie, createElementVNode as l, mergeProps as ae, toHandlers as le, renderSlot as k, toDisplayString as _, createBlock as g, createCommentVNode as w, Fragment as de, renderList as ce } from "vue";
+import { useDropZone as ue } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useCommon as pe } from "../../composables/useCommon.js";
+import { useInteractive as U } from "../../composables/useInteractive.js";
+import { useInputtable as I } from "../../composables/useInputtable.js";
+import { useTheme as me } from "../../composables/useTheme.js";
+import { uploadIcon as fe, fileIcon as ge, closeIcon as he } from "../../common/icons.js";
+import ve from "../label/Label.vue.js";
+import O from "../inputFooter/InputFooter.vue.js";
+import ye from "../progress/Progress.vue.js";
+import S from "../icon/Icon.vue.js";
+const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = { class: "text-secondary-500 dark:text-secondary-400" }, ke = { class: "flex items-center" }, _e = ["src"], we = { class: "truncate flex-1 pr-2" }, Se = { class: "font-medium truncate" }, Ie = { class: "text-xs text-secondary-500" }, $e = ["onClick"], Ve = {
+  ...pe.validators(),
+  variant: ["box"]
+}, Ce = {
+  ...U.props(),
+  ...I.props(),
+  placeholder: String,
+  accept: String,
+  multiple: Boolean,
+  maxFiles: [Number, String],
+  maxFileSize: [Number, String],
+  variant: {
+    type: String,
+    default: "box"
+  },
+  // URL to submit data to.
+  action: String,
+  // Additional HTTP headers
+  headers: Object,
+  method: {
+    type: String,
+    default: "POST"
+  },
+  withCredentials: Boolean
+}, Ee = {
+  name: "XUpload",
+  validators: Ve
+}, Fe = /* @__PURE__ */ te({
+  ...Ee,
+  props: Ce,
+  emits: [...I.emits(), "upload", "remove"],
+  setup(j, { expose: D, emit: q }) {
+    const o = j, u = q, $ = y(null), p = oe(() => !!o.action), i = y([]);
+    ne(i, (e) => {
+      u("update:modelValue", e);
+    }, { deep: !0, immediate: !0 });
+    const { focus: V, blur: P } = U($);
+    function h(e) {
+      if (!e)
+        return !1;
+      if (!o.multiple && e.length > 1 || o.maxFiles && e.length > Number(o.maxFiles))
+        return m.value = "Too many files", !1;
+      if (o.maxFileSize) {
+        for (let t = 0; t < e.length; t++)
+          if (e[t].size > Number(o.maxFileSize))
+            return m.value = "File size is too large", !1;
+      }
+      if (o.accept) {
+        const t = o.accept.split(",").map((r) => r.trim());
+        for (let r = 0; r < e.length; r++) {
+          const n = e[r];
+          if (!t.some((c) => n.type === c || n.name.endsWith(c)))
+            return m.value = "Invalid file type", !1;
+        }
+      }
+      return !0;
+    }
+    function T(e) {
+      const r = e.target.files;
+      h(r) && u("change", e);
+    }
+    function F(e) {
+      const r = e.target.files;
+      h(r) && (N(r), o.validateOnInput && !K.value && v(i.value), u("input", e));
+    }
+    const C = y(null);
+    function M(e) {
+      h(e) && N(e);
+    }
+    const { isOverDropZone: E } = ue(C, {
+      onDrop: M,
+      multiple: o.multiple,
+      preventDefaultForUnhandled: !1
+    });
+    function N(e) {
+      i.value = e ? Array.from(e).map((t) => ({
+        file: t,
+        completed: !p.value,
+        progress: p.value ? 0 : 100,
+        error: ""
+      })) : [], p.value && W();
+    }
+    function Z(e) {
+      const t = i.value.findIndex((r) => r.file === e);
+      t !== -1 && (u("remove", i.value[t]), i.value.splice(t, 1));
+    }
+    function B(e) {
+      const t = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
+      return e.type.startsWith("image") || t.some((r) => e.name.endsWith(r));
+    }
+    function z(e) {
+      return URL.createObjectURL(e);
+    }
+    function A(e) {
+      return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : e < 1024 * 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(2)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(2)} GB`;
+    }
+    async function H(e) {
+      return new Promise((t, r) => {
+        if (!o.action)
+          r(new Error("No action provided"));
+        else {
+          const n = new XMLHttpRequest(), c = new FormData();
+          c.append("file", e.file), n.open(o.method, o.action, !0), o.headers && typeof o.headers == "object" && Object.keys(o.headers).forEach((a) => {
+            n.setRequestHeader(a, o.headers[a]);
+          }), n.upload.addEventListener("progress", (a) => {
+            if (a.lengthComputable) {
+              const L = a.loaded / a.total * 100;
+              e.progress = L, console.log(`Upload progress: ${L}%`);
+            }
+          }), n.addEventListener("load", () => {
+            if (n.status === 200) {
+              e.completed = !0;
+              try {
+                e.response = JSON.parse(n.responseText);
+              } catch {
+                e.response = n.responseText;
+              }
+              t(n.responseText);
+            } else {
+              const a = `Upload failed. Status: ${n.status}`;
+              e.error = a, r(new Error(a));
+            }
+          }), n.addEventListener("error", () => {
+            e.error = "An error occurred during the upload.", r(new Error("An error occurred during the upload."));
+          }), n.send(c);
+        }
+      });
+    }
+    async function W() {
+      if (!o.action && !i.value)
+        return;
+      const e = [];
+      for (let t = 0; t < i.value.length; t++)
+        e.push(H(i.value[t]));
+      await Promise.all(e), v(i.value);
+    }
+    const {
+      errorInternal: m,
+      hideFooterInternal: X,
+      isInsideForm: G,
+      inputListeners: J,
+      isFirstValidation: K,
+      reset: Q,
+      validate: v,
+      setError: Y
+    } = I(o, { focus: V, emit: u }), { styles: ee, classes: R, className: re } = me("Upload", {}, o);
+    return D({ focus: V, blur: P, reset: Q, validate: v, setError: Y }), (e, t) => (d(), f("div", {
+      class: b([
+        s(re),
+        s(R).wrapper
+      ])
+    }, [
+      x(ve, {
+        style: se(s(ee)),
+        disabled: e.disabled,
+        required: e.required,
+        "is-inside-form": s(G),
+        label: e.label,
+        tooltip: e.tooltip
+      }, {
+        default: ie(() => [
+          l("input", ae({
+            id: e.id,
+            ref_key: "elRef",
+            ref: $,
+            type: "file",
+            class: [
+              "sr-only",
+              s(R).input
+            ],
+            disabled: e.disabled,
+            name: e.name,
+            accept: e.accept,
+            multiple: e.multiple,
+            readonly: e.readonly
+          }, le({
+            ...s(J),
+            input: F,
+            change: T
+          }, !0)), null, 16, be),
+          k(e.$slots, "box", { isOver: s(E) }, () => [
+            l("div", {
+              ref_key: "dropZoneRef",
+              ref: C,
+              class: b(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", {
+                "border-primary-500 dark:border-primary-400": s(E)
+              }])
+            }, [
+              x(S, { icon: s(fe) }, null, 8, ["icon"]),
+              l("span", xe, _(e.placeholder), 1),
+              t[0] || (t[0] = l("span", { class: "text-xs text-secondary-400 dark:text-secondary-500" }, "or drag and drop", -1))
+            ], 2)
+          ]),
+          s(X) ? w("", !0) : (d(), g(O, {
+            key: 0,
+            error: s(m),
+            helper: e.helper
+          }, null, 8, ["error", "helper"]))
+        ]),
+        _: 3
+      }, 8, ["style", "disabled", "required", "is-inside-form", "label", "tooltip"]),
+      k(e.$slots, "files", { files: i.value }, () => [
+        (d(!0), f(de, null, ce(i.value, (r, n) => (d(), f("div", {
+          key: n,
+          class: "border rounded-md p-2 bg-secondary-100 my-2"
+        }, [
+          l("div", ke, [
+            l("div", {
+              class: b(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", {
+                "p-2 bg-white": !B(r.file)
+              }])
+            }, [
+              B(r.file) ? (d(), f("img", {
+                key: 0,
+                src: z(r.file),
+                class: "w-full h-full object-cover rounded-md"
+              }, null, 8, _e)) : (d(), g(S, {
+                key: 1,
+                icon: s(ge)
+              }, null, 8, ["icon"]))
+            ], 2),
+            l("div", we, [
+              l("div", Se, _(r.file.name), 1),
+              l("div", Ie, _(A(r.file.size)), 1)
+            ]),
+            l("button", {
+              type: "button",
+              class: "shrink-0",
+              onClick: (c) => Z(r.file)
+            }, [
+              k(e.$slots, "removeIcon", {}, () => [
+                x(S, { icon: s(he) }, null, 8, ["icon"])
+              ])
+            ], 8, $e)
+          ]),
+          p.value ? (d(), g(ye, {
+            key: 0,
+            percentage: r.progress,
+            class: "mt-1",
+            color: r.error ? "warning" : "success"
+          }, null, 8, ["percentage", "color"])) : w("", !0),
+          r.error ? (d(), g(O, {
+            key: 1,
+            error: r.error
+          }, null, 8, ["error"])) : w("", !0)
+        ]))), 128))
+      ])
+    ], 2));
+  }
+});
+export {
+  Fe as default
+};

package/lib/components/upload/Upload.vue2.js

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

package/lib/components/upload/__tests__/Upload.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/upload/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XUpload } from './Upload.vue';
+export type { UploadProps, UploadFile, UploadTheme } from './Upload.vue';

package/lib/components/upload/theme/Upload.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { UploadTheme } from '../Upload.vue';
+declare const theme: UploadTheme;
+export default theme;

package/lib/components/upload/theme/Upload.base.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: ""
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/upload/theme/Upload.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { UploadTheme } from '../Upload.vue';
+declare const theme: UploadTheme;
+export default theme;

package/lib/components/upload/theme/Upload.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Upload.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};