@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/composite/facet-panel/FacetPanel.vue.js

@@ -0,0 +1,210 @@
+import { defineComponent as D, inject as U, ref as C, onMounted as X, onBeforeUnmount as Y, computed as F, useId as q, openBlock as a, createElementBlock as n, createBlock as m, unref as s, withCtx as f, createElementVNode as o, createTextVNode as V, toDisplayString as r, createCommentVNode as d, Fragment as b, renderList as _, normalizeClass as L, createVNode as x } from "vue";
+import { useLocalizedDefaults as K } from "../../../i18n/text.js";
+import R from "../../primitives/motion/MotionCollapse.vue.js";
+import { Check as M, ListFilter as G, ChevronDown as H } from "@lucide/vue";
+import E from "../../primitives/button/Button.vue.js";
+import J from "../../primitives/sheet/Sheet.vue.js";
+import { APP_PRESENTATION_KEY as Q, MOBILE_LAYOUT_MAX as W } from "../../../lib/adaptiveLayout.js";
+const Z = ["data-presentation"], ee = {
+  key: 0,
+  "data-ui-facet-panel-count": "",
+  "data-icon": "",
+  class: "inline-flex h-4 min-w-4 items-center justify-center rounded-[var(--ui-radius-pill)] bg-[var(--ui-primary)] px-1 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-primary-foreground)] tabular-nums"
+}, te = { class: "flex flex-col gap-[var(--ui-space-3)]" }, ae = ["aria-labelledby", "data-key"], se = ["id"], ne = ["aria-pressed", "onClick"], ie = ["data-state"], re = { class: "min-w-0 flex-1 truncate" }, le = {
+  key: 0,
+  "data-ui-facet-count": "",
+  class: "shrink-0 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)] tabular-nums"
+}, oe = {
+  key: 1,
+  class: "flex flex-col gap-[var(--ui-space-2)]"
+}, ue = { class: "flex min-h-[var(--ui-control-md)] items-center gap-2" }, ce = { class: "min-w-0 flex-1 truncate text-[length:var(--ui-font-size)] font-semibold" }, de = ["aria-labelledby", "data-key"], ve = ["id", "aria-expanded", "aria-controls", "onClick"], fe = { class: "min-w-0 flex-1 truncate" }, he = {
+  key: 0,
+  class: "shrink-0 tabular-nums text-[var(--ui-primary)]"
+}, me = ["id"], ke = ["aria-pressed", "onClick"], pe = ["data-state"], ye = { class: "min-w-0 flex-1 truncate" }, be = {
+  key: 0,
+  "data-ui-facet-count": "",
+  class: "shrink-0 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)] tabular-nums"
+}, S = "flex size-[var(--ui-choice-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border border-[var(--ui-border-strong)] bg-[var(--ui-surface)] text-[var(--ui-primary-foreground)] transition-[border-color,background-color] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:border-[var(--ui-primary)] data-[state=checked]:bg-[var(--ui-primary)]", Le = /* @__PURE__ */ D({
+  __name: "FacetPanel",
+  props: {
+    groups: {},
+    modelValue: { default: () => ({}) },
+    presentation: { default: "auto" },
+    title: {},
+    clearLabel: {}
+  },
+  emits: ["update:modelValue"],
+  setup(w, { emit: T }) {
+    const l = K(w, { title: "Filters", clearLabel: "Clear filters" }), O = T, g = U(Q, null), P = C(!1);
+    let k;
+    const z = () => {
+      P.value = !!k?.matches;
+    };
+    X(() => {
+      g || typeof window > "u" || typeof window.matchMedia != "function" || (k = window.matchMedia(`(max-width: ${W}px)`), z(), k.addEventListener?.("change", z));
+    }), Y(() => k?.removeEventListener?.("change", z));
+    const A = F(() => l.presentation !== "auto" ? l.presentation === "sheet" : g ? g.value === "mobile" : P.value), B = C(!1), h = C(Object.fromEntries(l.groups.map((i) => [i.key, !!i.collapsed]))), v = q(), u = (i) => l.modelValue[i] ?? [], p = F(() => Object.values(l.modelValue).reduce((i, c) => i + c.length, 0));
+    function N(i, c) {
+      const e = u(i.key), t = e.includes(c), y = i.multiple ? t ? e.filter((I) => I !== c) : [...e, c] : t ? [] : [c], $ = { ...l.modelValue };
+      y.length ? $[i.key] = y : delete $[i.key], O("update:modelValue", $);
+    }
+    function j() {
+      O("update:modelValue", {});
+    }
+    return (i, c) => (a(), n("div", {
+      "data-ui-facet-panel": "",
+      "data-presentation": A.value ? "sheet" : "panel",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      A.value ? (a(), m(J, {
+        key: 0,
+        open: B.value,
+        "onUpdate:open": c[0] || (c[0] = (e) => B.value = e),
+        side: "bottom",
+        size: "70%",
+        title: s(l).title
+      }, {
+        trigger: f(() => [
+          x(E, { "data-ui-facet-panel-trigger": "" }, {
+            default: f(() => [
+              x(s(G), { class: "size-4" }),
+              V(r(s(l).title), 1),
+              p.value ? (a(), n("span", ee, r(p.value), 1)) : d("", !0)
+            ]),
+            _: 1
+          })
+        ]),
+        default: f(() => [
+          o("div", te, [
+            p.value ? (a(), m(E, {
+              key: 0,
+              variant: "ghost",
+              class: "self-start",
+              "data-ui-facet-panel-clear": "",
+              onClick: j
+            }, {
+              default: f(() => [
+                V(r(s(l).clearLabel), 1)
+              ]),
+              _: 1
+            })) : d("", !0),
+            (a(!0), n(b, null, _(w.groups, (e) => (a(), n("div", {
+              key: e.key,
+              role: "group",
+              "aria-labelledby": `${s(v)}-${e.key}`,
+              "data-ui-facet-group": "",
+              "data-key": e.key
+            }, [
+              o("div", {
+                id: `${s(v)}-${e.key}`,
+                class: "mb-1 text-[length:var(--ui-font-size-sm)] leading-4 font-semibold text-[var(--ui-text-secondary)]"
+              }, r(e.label), 9, se),
+              (a(!0), n(b, null, _(e.values, (t) => (a(), n("button", {
+                key: t.value,
+                type: "button",
+                "aria-pressed": u(e.key).includes(t.value),
+                class: "ui-facet-value flex min-h-10 w-full items-center gap-2 rounded-[var(--ui-radius-inner)] px-2 text-start text-[length:var(--ui-font-size)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)] aria-pressed:bg-[var(--ui-primary-soft)]",
+                "data-ui-facet-value": "",
+                onClick: (y) => N(e, t.value)
+              }, [
+                o("span", {
+                  "data-ui-facet-box": "",
+                  "data-state": u(e.key).includes(t.value) ? "checked" : "unchecked",
+                  "aria-hidden": "true",
+                  class: L(S)
+                }, [
+                  u(e.key).includes(t.value) ? (a(), m(s(M), {
+                    key: 0,
+                    class: "size-[calc(var(--ui-choice-box-size)*0.75)] stroke-[2.5]"
+                  })) : d("", !0)
+                ], 8, ie),
+                o("span", re, r(t.label), 1),
+                t.count !== void 0 ? (a(), n("span", le, r(t.count), 1)) : d("", !0)
+              ], 8, ne))), 128))
+            ], 8, ae))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["open", "title"])) : (a(), n("div", oe, [
+        o("div", ue, [
+          o("span", ce, r(s(l).title), 1),
+          p.value ? (a(), m(E, {
+            key: 0,
+            variant: "ghost",
+            size: "sm",
+            "data-ui-facet-panel-clear": "",
+            onClick: j
+          }, {
+            default: f(() => [
+              V(r(s(l).clearLabel), 1)
+            ]),
+            _: 1
+          })) : d("", !0)
+        ]),
+        (a(!0), n(b, null, _(w.groups, (e) => (a(), n("div", {
+          key: e.key,
+          role: "group",
+          "aria-labelledby": `${s(v)}-${e.key}`,
+          "data-ui-facet-group": "",
+          "data-key": e.key,
+          class: "border-t border-[var(--ui-border-subtle)] pt-1"
+        }, [
+          o("button", {
+            id: `${s(v)}-${e.key}`,
+            type: "button",
+            "aria-expanded": !h.value[e.key],
+            "aria-controls": `${s(v)}-${e.key}-values`,
+            class: "flex min-h-7 w-full items-center gap-1 rounded-[var(--ui-radius-inner)] px-1 text-start text-[length:var(--ui-font-size-sm)] leading-4 font-semibold text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+            "data-ui-facet-group-toggle": "",
+            "data-ui-hit": "",
+            onClick: (t) => h.value[e.key] = !h.value[e.key]
+          }, [
+            o("span", fe, r(e.label), 1),
+            u(e.key).length ? (a(), n("span", he, r(u(e.key).length), 1)) : d("", !0),
+            x(s(H), {
+              class: L(["size-3.5 shrink-0 transition-transform duration-[var(--ui-motion-fast)]", h.value[e.key] && "-rotate-90"]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])
+          ], 8, ve),
+          x(R, {
+            open: !h.value[e.key]
+          }, {
+            default: f(() => [
+              o("div", {
+                id: `${s(v)}-${e.key}-values`,
+                class: "flex flex-col pb-1"
+              }, [
+                (a(!0), n(b, null, _(e.values, (t) => (a(), n("button", {
+                  key: t.value,
+                  type: "button",
+                  "aria-pressed": u(e.key).includes(t.value),
+                  class: "ui-facet-value flex min-h-7 w-full items-center gap-2 rounded-[var(--ui-radius-inner)] px-1 text-start text-[length:var(--ui-font-size)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)] aria-pressed:bg-[var(--ui-primary-soft)] [@media(pointer:coarse)]:min-h-[var(--ui-list-row-height)]",
+                  "data-ui-facet-value": "",
+                  onClick: (y) => N(e, t.value)
+                }, [
+                  o("span", {
+                    "data-ui-facet-box": "",
+                    "data-state": u(e.key).includes(t.value) ? "checked" : "unchecked",
+                    "aria-hidden": "true",
+                    class: L(S)
+                  }, [
+                    u(e.key).includes(t.value) ? (a(), m(s(M), {
+                      key: 0,
+                      class: "size-[calc(var(--ui-choice-box-size)*0.75)] stroke-[2.5]"
+                    })) : d("", !0)
+                  ], 8, pe),
+                  o("span", ye, r(t.label), 1),
+                  t.count !== void 0 ? (a(), n("span", be, r(t.count), 1)) : d("", !0)
+                ], 8, ke))), 128))
+              ], 8, me)
+            ]),
+            _: 2
+          }, 1032, ["open"])
+        ], 8, de))), 128))
+      ]))
+    ], 8, Z));
+  }
+});
+export {
+  Le as default
+};

package/dist/modules/components/composite/facet-panel/FacetPanel2.vue.js

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

package/dist/modules/components/composite/file-picker/FilePicker.vue.js

@@ -0,0 +1,289 @@
+import { defineComponent as le, ref as V, computed as c, openBlock as l, createElementBlock as d, mergeProps as O, unref as o, createElementVNode as m, withModifiers as b, normalizeClass as E, createBlock as A, resolveDynamicComponent as ne, toDisplayString as n, createVNode as v, withCtx as g, createTextVNode as w, createCommentVNode as u, Fragment as de, renderList as ue, renderSlot as ce } from "vue";
+import { useFormControl as pe } from "../../../composables/formControl.js";
+import { filePickerText as me } from "../../../i18n/filePicker.js";
+import { useUiLocale as ve, formatUiText as p } from "../../../i18n/locale.js";
+import { formatFileSize as H } from "../../../lib/fileSize.js";
+import { chooserAccept as fe } from "../../../lib/fileAccept.js";
+import { FolderOpen as be, UploadCloud as he, ClipboardPaste as I, FileText as ye, X as xe } from "@lucide/vue";
+import k from "../../primitives/button/Button.vue.js";
+import ge from "../../primitives/button/IconButton.vue.js";
+import { coarsePointer as _e } from "../../primitives/popover/floating.js";
+const ze = ["aria-label", "multiple", "accept", "disabled", "webkitdirectory"], we = ["tabindex", "aria-label", "aria-disabled"], ke = { class: "text-[length:var(--ui-font-size-control)] font-semibold text-[var(--ui-text)]" }, Ce = { class: "mt-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]" }, Fe = { class: "mt-3 flex flex-wrap justify-center gap-2" }, $e = {
+  key: 1,
+  class: "mb-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]",
+  "data-file-picker-description": ""
+}, Se = {
+  key: 2,
+  class: "flex flex-wrap gap-2"
+}, Ve = {
+  key: 4,
+  class: "mt-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]",
+  "data-file-picker-hint": ""
+}, Ae = { key: 0 }, De = { key: 1 }, Te = { key: 2 }, je = {
+  key: 5,
+  class: "mt-2 overflow-hidden rounded-[var(--ui-radius-container)] border border-[var(--ui-border)]"
+}, Be = { class: "min-w-0 flex-1" }, Le = { class: "truncate text-[length:var(--ui-font-size-sm)] text-[var(--ui-text)]" }, Pe = { class: "text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]" }, qe = /* @__PURE__ */ le({
+  inheritAttrs: !1,
+  __name: "FilePicker",
+  props: {
+    modelValue: { default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    accept: {},
+    nativeAccept: {},
+    disabled: { type: Boolean, default: !1 },
+    maxFiles: { default: 0 },
+    maxSize: { default: 0 },
+    directory: { type: Boolean, default: !1 },
+    showList: { type: Boolean, default: !0 },
+    variant: { default: "dropzone" },
+    paste: { type: Boolean, default: !1 },
+    locale: {},
+    text: {},
+    title: {},
+    description: {},
+    showHint: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "rejected"],
+  setup(X, { emit: q }) {
+    const e = X, C = q, D = V(), T = _e(), j = c(() => T ? "compact" : e.variant), h = V(!1), G = ve(() => e.locale), r = c(() => ({ ...me[G.value], ...e.text })), F = c(() => e.directory ? r.value.chooseFolder : e.multiple ? r.value.chooseFiles : r.value.chooseFile), B = c(() => e.title ?? (e.multiple || e.directory ? r.value.title : r.value.titleOne)), J = c(() => e.description ?? (e.multiple || e.directory ? r.value.description : r.value.descriptionOne));
+    function $() {
+      !e.disabled && y.value && D.value?.click();
+    }
+    const K = c(() => fe(e.accept, e.nativeAccept)), y = c(() => !e.maxFiles || e.modelValue.length < e.maxFiles), L = c(() => (e.accept ?? "").split(",").map((t) => t.trim().toLowerCase()).filter(Boolean)), P = c(() => ({ "image/*": r.value.images, "video/*": r.value.videos, "audio/*": r.value.audio }));
+    function Q(t) {
+      if (t.startsWith(".")) return t.slice(1).toUpperCase();
+      if (P.value[t]) return P.value[t];
+      const a = t.split("/")[1]?.replace(/^x-/, "").replace(/\+.*$/, "");
+      return a && /^[a-z0-9-]+$/.test(a) ? a.toUpperCase() : t;
+    }
+    const S = c(() => {
+      const t = [...new Set(L.value.map(Q))];
+      return t.length ? p(r.value.acceptedTypes, { types: t.join(", ") }) : "";
+    });
+    function Y(t) {
+      if (!e.accept) return !0;
+      const a = L.value, i = t.name.toLowerCase(), s = t.type.toLowerCase();
+      return a.some((f) => f.startsWith(".") ? i.endsWith(f) : f.endsWith("/*") ? s.startsWith(f.slice(0, -1)) : s === f);
+    }
+    function Z(t, a) {
+      return a.some((i) => i.name === t.name && i.size === t.size && i.lastModified === t.lastModified);
+    }
+    function _(t) {
+      if (e.disabled || t.length === 0) return;
+      const a = [...e.modelValue], i = [];
+      for (const s of t) {
+        if (!Y(s)) {
+          i.push({ file: s, reason: "type", message: p(r.value.typeRejected, { name: s.name }) });
+          continue;
+        }
+        if (e.maxSize && s.size > e.maxSize) {
+          i.push({ file: s, reason: "size", message: p(r.value.sizeRejected, { name: s.name }) });
+          continue;
+        }
+        if (Z(s, a)) {
+          i.push({ file: s, reason: "duplicate", message: p(r.value.duplicateRejected, { name: s.name }) });
+          continue;
+        }
+        if (!e.multiple && a.length >= 1 || e.maxFiles && a.length >= e.maxFiles) {
+          i.push({ file: s, reason: "count", message: p(r.value.countRejected, { name: s.name }) });
+          continue;
+        }
+        e.multiple ? a.push(s) : a.splice(0, a.length, s);
+      }
+      U(a), C("update:modelValue", a), i.length && C("rejected", i);
+    }
+    function ee(t) {
+      const a = t.target;
+      _(Array.from(a.files ?? [])), a.value = "";
+    }
+    function te(t) {
+      h.value = !1, _(Array.from(t.dataTransfer?.files ?? []));
+    }
+    function ae(t) {
+      const a = t.name ?? "";
+      return a && !/^image\.\w+$/i.test(a) ? a : `pasted-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[-:]/g, "").replace("T", "-")}.${(t.type.split("/")[1] ?? "bin").replace(/\W.*$/, "")}`;
+    }
+    const W = (t) => new File([t], ae(t), { type: t.type, lastModified: Date.now() }), z = V("");
+    let M;
+    function ie(t) {
+      clearTimeout(M), z.value = t ? "" : r.value.pasteEmpty, t || (M = setTimeout(() => {
+        z.value = "";
+      }, 4e3));
+    }
+    function se(t) {
+      if (!e.paste || e.disabled) return;
+      const a = Array.from(t.clipboardData?.files ?? []);
+      a.length && (t.preventDefault(), _(a.map(W)));
+    }
+    const N = typeof navigator < "u" && typeof navigator.clipboard?.read == "function";
+    async function R() {
+      if (e.disabled) return;
+      const t = [];
+      try {
+        for (const a of await navigator.clipboard.read()) {
+          const i = a.types.find((s) => !s.startsWith("text/"));
+          i && t.push(W(await a.getType(i)));
+        }
+      } catch {
+      }
+      ie(t.length), _(t);
+    }
+    function re(t) {
+      if (e.disabled) return;
+      const a = e.modelValue.filter((i, s) => s !== t);
+      U(a), C("update:modelValue", a);
+    }
+    const { controlAttrs: x, wrapperAttrs: oe, changed: U } = pe({ value: () => e.modelValue, disabled: () => e.disabled });
+    return (t, a) => (l(), d("div", O(o(oe)(), {
+      class: "min-w-0",
+      "data-syno-pkg-land-ui": "",
+      onPaste: se
+    }), [
+      m("input", O({
+        ref_key: "input",
+        ref: D
+      }, o(x)(), {
+        type: "file",
+        class: "sr-only",
+        tabindex: "-1",
+        "aria-label": o(x)()["aria-label"] ?? (o(x)()["aria-labelledby"] ? void 0 : F.value),
+        multiple: e.multiple,
+        accept: K.value,
+        disabled: e.disabled,
+        webkitdirectory: e.directory ? "" : void 0,
+        onChange: ee
+      }), null, 16, ze),
+      j.value === "dropzone" ? (l(), d("div", {
+        key: 0,
+        "data-file-dropzone": "",
+        class: E([
+          "flex min-h-36 flex-col items-center justify-center rounded-[var(--ui-radius-panel)] border border-dashed px-6 py-6 text-center outline-none transition-[background-color,border-color,box-shadow] focus-visible:border-[var(--ui-primary)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+          h.value ? "border-[var(--ui-primary)] bg-[var(--ui-primary-soft)] shadow-[var(--ui-shadow-focus)]" : "border-[var(--ui-border-strong)] bg-[var(--ui-surface-subtle)]",
+          e.disabled && "pointer-events-none opacity-50"
+        ]),
+        role: "group",
+        tabindex: e.paste && !e.disabled ? 0 : void 0,
+        "aria-label": B.value,
+        "aria-disabled": e.disabled,
+        onDragenter: a[0] || (a[0] = b((i) => h.value = !0, ["prevent"])),
+        onDragover: a[1] || (a[1] = b((i) => h.value = !0, ["prevent"])),
+        onDragleave: a[2] || (a[2] = b((i) => h.value = !1, ["prevent"])),
+        onDrop: b(te, ["prevent"]),
+        onClick: $
+      }, [
+        (l(), A(ne(e.directory ? o(be) : o(he)), {
+          class: "mb-2 size-7 text-[var(--ui-primary)]",
+          "aria-hidden": "true"
+        })),
+        m("div", ke, n(B.value), 1),
+        m("div", Ce, n(J.value), 1),
+        m("div", Fe, [
+          v(k, {
+            "aria-describedby": String(o(x)()["aria-describedby"] ?? "") || void 0,
+            size: "sm",
+            disabled: e.disabled || !y.value,
+            onClick: b($, ["stop"])
+          }, {
+            default: g(() => [
+              w(n(F.value), 1)
+            ]),
+            _: 1
+          }, 8, ["aria-describedby", "disabled"]),
+          e.paste && o(N) ? (l(), A(k, {
+            key: 0,
+            size: "sm",
+            variant: "ghost",
+            disabled: e.disabled || !y.value,
+            "data-file-paste": "",
+            onClick: b(R, ["stop"])
+          }, {
+            default: g(() => [
+              v(o(I), {
+                class: "size-4",
+                "aria-hidden": "true"
+              }),
+              w(n(r.value.paste), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : u("", !0)
+        ])
+      ], 42, we)) : u("", !0),
+      o(T) && e.variant === "dropzone" && e.description ? (l(), d("div", $e, n(e.description), 1)) : u("", !0),
+      j.value === "compact" ? (l(), d("div", Se, [
+        v(k, {
+          "aria-describedby": String(o(x)()["aria-describedby"] ?? "") || void 0,
+          disabled: e.disabled || !y.value,
+          onClick: $
+        }, {
+          default: g(() => [
+            w(n(F.value), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-describedby", "disabled"]),
+        e.paste && o(N) ? (l(), A(k, {
+          key: 0,
+          variant: "ghost",
+          disabled: e.disabled || !y.value,
+          "data-file-paste": "",
+          onClick: R
+        }, {
+          default: g(() => [
+            v(o(I), {
+              class: "size-4",
+              "aria-hidden": "true"
+            }),
+            w(n(r.value.paste), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : u("", !0)
+      ])) : u("", !0),
+      e.paste ? (l(), d("div", {
+        key: 3,
+        class: E(["text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)] empty:hidden", z.value && "mt-2"]),
+        "aria-live": "polite",
+        "data-file-paste-note": ""
+      }, n(z.value), 3)) : u("", !0),
+      e.showHint && (S.value || e.maxSize || e.maxFiles > 1) ? (l(), d("div", Ve, [
+        S.value ? (l(), d("div", Ae, n(S.value), 1)) : u("", !0),
+        e.maxSize ? (l(), d("div", De, n(o(p)(r.value.maxSize, { size: o(H)(e.maxSize) })), 1)) : u("", !0),
+        e.maxFiles > 1 ? (l(), d("div", Te, n(o(p)(r.value.maxFiles, { count: e.maxFiles })), 1)) : u("", !0)
+      ])) : u("", !0),
+      e.showList && e.modelValue.length ? (l(), d("div", je, [
+        (l(!0), d(de, null, ue(e.modelValue, (i, s) => (l(), d("div", {
+          key: `${i.name}-${i.size}-${i.lastModified}`,
+          class: "flex min-h-10 items-center gap-2 border-b border-[var(--ui-border-subtle)] px-3 last:border-b-0"
+        }, [
+          v(o(ye), {
+            class: "size-4 shrink-0 text-[var(--ui-text-muted)]",
+            "aria-hidden": "true"
+          }),
+          m("div", Be, [
+            m("div", Le, n(i.name), 1),
+            m("div", Pe, n(o(H)(i.size)), 1)
+          ]),
+          ce(t.$slots, "file-actions", {
+            file: i,
+            index: s
+          }),
+          v(ge, {
+            label: o(p)(r.value.remove, { name: i.name }),
+            size: "sm",
+            disabled: e.disabled,
+            onClick: (f) => re(s)
+          }, {
+            default: g(() => [
+              v(o(xe), {
+                class: "size-3.5",
+                "aria-hidden": "true"
+              })
+            ]),
+            _: 1
+          }, 8, ["label", "disabled", "onClick"])
+        ]))), 128))
+      ])) : u("", !0)
+    ], 16));
+  }
+});
+export {
+  qe as default
+};

package/dist/modules/components/composite/file-picker/FilePicker2.vue.js

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

package/dist/modules/components/composite/file-thumbs/FileThumbs.vue.js

@@ -0,0 +1,112 @@
+import { defineComponent as j, computed as v, ref as h, openBlock as s, createElementBlock as r, normalizeClass as l, Fragment as E, renderList as F, createElementVNode as N, normalizeStyle as w, createBlock as g, unref as u, createVNode as P, createCommentVNode as d, toDisplayString as U } from "vue";
+import { X as V } from "@lucide/vue";
+import { useUiText as T } from "../../../i18n/text.js";
+import { isPicture as D } from "../../../lib/files.js";
+import L from "../../primitives/icon/FileTypeIcon.vue.js";
+import R from "../../primitives/spinner/Spinner.vue.js";
+import X from "../image-lightbox/ImageLightbox.vue.js";
+const q = ["data-size"], A = ["aria-label", "title", "data-state", "data-ui-file-thumb", "onClick"], G = ["src", "onError"], H = ["aria-label", "data-ui-file-thumb-remove", "onClick"], I = ["aria-label"], Z = /* @__PURE__ */ j({
+  __name: "FileThumbs",
+  props: {
+    items: {},
+    max: { default: 3 },
+    size: { default: "sm" },
+    removable: { type: Boolean, default: !1 },
+    lightbox: { type: Boolean, default: !0 }
+  },
+  emits: ["open", "remove"],
+  setup(a, { emit: $ }) {
+    const n = a, p = $, i = T(), c = v(() => n.max > 0 ? n.items.slice(0, n.max) : n.items), y = v(() => n.items.length - c.value.length), f = h(!1), m = h(0), b = h(/* @__PURE__ */ new Set());
+    function x(t) {
+      p("open", t, n.items[t]), n.lightbox && (m.value = t, f.value = !0);
+    }
+    const C = (t) => D(t) && t.thumb && (t.state ?? "ready") === "ready" && !b.value.has(t.id), k = v(() => n.size === "sm" ? "size-7 rounded-[var(--ui-radius-inner)]" : "size-16 rounded-[var(--ui-radius-container)]"), B = (t) => t.state === "processing" ? `${t.name}, ${i("Processing")}` : t.state === "missing" ? `${t.name}, ${i("File is missing")}` : t.state === "failed" ? `${t.name}, ${i("Can't show this file")}` : t.name;
+    return (t, o) => a.items.length ? (s(), r("div", {
+      key: 0,
+      class: l(["flex min-w-0 flex-wrap items-center gap-1 [&>:last-child]:after:end-0 [&>:last-child>button]:after:end-0", a.removable && "pe-2"]),
+      "data-size": a.size,
+      "data-ui-file-thumbs": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      (s(!0), r(E, null, F(c.value, (e, S) => (s(), r("span", {
+        key: e.id,
+        class: "relative inline-flex shrink-0",
+        "data-ui-file-thumb-wrap": ""
+      }, [
+        N("button", {
+          type: "button",
+          class: l([
+            "relative flex shrink-0 items-center justify-center overflow-hidden border border-[var(--ui-border-subtle)] bg-[var(--ui-surface-subtle)] p-0 outline-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+            "after:absolute after:-inset-2 [@media(pointer:fine)]:after:hidden",
+            k.value
+          ]),
+          style: w({ background: e.state === "processing" ? e.dominant : void 0 }),
+          "aria-label": B(e),
+          title: e.name,
+          "data-state": e.state ?? "ready",
+          "data-ui-file-thumb": e.id,
+          onClick: (z) => x(S)
+        }, [
+          C(e) ? (s(), r("img", {
+            key: 0,
+            src: e.thumb,
+            alt: "",
+            loading: "lazy",
+            decoding: "async",
+            draggable: "false",
+            class: "size-full object-cover",
+            style: w({ background: e.dominant }),
+            onError: (z) => b.value = new Set(b.value).add(e.id)
+          }, null, 44, G)) : e.state === "processing" ? (s(), g(R, {
+            key: 1,
+            size: a.size === "sm" ? 16 : 24,
+            inline: "",
+            label: u(i)("Processing")
+          }, null, 8, ["size", "label"])) : (s(), g(L, {
+            key: 2,
+            name: e.name,
+            size: a.size === "sm" ? "sm" : "m",
+            class: l((e.state === "missing" || e.state === "failed") && "opacity-40")
+          }, null, 8, ["name", "size", "class"]))
+        ], 14, A),
+        a.removable ? (s(), r("button", {
+          key: 0,
+          type: "button",
+          class: "absolute -end-2 -top-2 flex size-5 items-center justify-center rounded-full border border-[var(--ui-surface)] bg-[var(--ui-text-secondary)] p-0 text-[var(--ui-surface)] outline-none hover:bg-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] after:absolute after:-inset-3 [@media(pointer:fine)]:after:hidden",
+          "aria-label": u(i)("Remove {name}", { name: e.name }),
+          "data-ui-file-thumb-remove": e.id,
+          onClick: (z) => p("remove", e)
+        }, [
+          P(u(V), {
+            class: "size-3",
+            "aria-hidden": "true"
+          })
+        ], 8, H)) : d("", !0)
+      ]))), 128)),
+      y.value > 0 ? (s(), r("button", {
+        key: 0,
+        type: "button",
+        class: l([
+          "relative flex shrink-0 items-center justify-center border border-[var(--ui-border-subtle)] bg-[var(--ui-surface-subtle)] px-1 text-[length:var(--ui-font-size-sm)] font-semibold tabular-nums text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+          "after:absolute after:-inset-2 [@media(pointer:fine)]:after:hidden",
+          k.value,
+          "w-auto min-w-7"
+        ]),
+        "aria-label": u(i)("Show all {count} files", { count: a.items.length }),
+        "data-ui-file-thumbs-more": "",
+        onClick: o[0] || (o[0] = (e) => x(c.value.length))
+      }, "+" + U(y.value), 11, I)) : d("", !0),
+      a.lightbox ? (s(), g(X, {
+        key: 1,
+        open: f.value,
+        "onUpdate:open": o[1] || (o[1] = (e) => f.value = e),
+        index: m.value,
+        "onUpdate:index": o[2] || (o[2] = (e) => m.value = e),
+        items: a.items
+      }, null, 8, ["open", "index", "items"])) : d("", !0)
+    ], 10, q)) : d("", !0);
+  }
+});
+export {
+  Z as default
+};

package/dist/modules/components/composite/file-thumbs/FileThumbs2.vue.js

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

package/dist/modules/components/composite/footbar/Footbar.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as p, computed as s, openBlock as e, createElementBlock as o, createElementVNode as f, Fragment as _, renderList as k, normalizeClass as y, createVNode as b } from "vue";
+import g from "./FootbarButtons.vue.js";
+import { provideButtonKind as x } from "../../../composables/buttonKind.js";
+import { groupFootbarButtons as v } from "./types.js";
+const B = {
+  class: "@container",
+  "data-syno-pkg-land-ui": ""
+}, h = { class: "grid grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)] items-center gap-[var(--ui-space-2)] @max-md:grid-cols-1" }, j = ["data-footbar-region"], w = /* @__PURE__ */ p({
+  __name: "Footbar",
+  props: {
+    buttons: { default: () => [] }
+  },
+  emits: ["click-button"],
+  setup(a, { emit: r }) {
+    const i = a;
+    x("action");
+    const c = r, m = s(() => v(i.buttons)), l = s(() => [
+      { key: "left", class: "justify-start" },
+      { key: "center", class: "justify-center" },
+      { key: "right", class: "justify-end" }
+    ]);
+    return (C, n) => (e(), o("div", B, [
+      f("div", h, [
+        (e(!0), o(_, null, k(l.value, (t) => (e(), o("div", {
+          key: t.key,
+          class: y(["flex flex-wrap items-center gap-[var(--ui-space-2)] @max-md:empty:hidden", t.class]),
+          "data-footbar-region": t.key
+        }, [
+          b(g, {
+            buttons: m.value[t.key],
+            onClickButton: n[0] || (n[0] = (u, d) => c("click-button", u, d))
+          }, null, 8, ["buttons"])
+        ], 10, j))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  w as default
+};