@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/primitives/superbox-select/SuperboxSelect.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as p, openBlock as i, createBlock as u, mergeProps as s } from "vue";
+import m from "../select/internal/ComboboxField.vue.js";
+const y = /* @__PURE__ */ p({
+  __name: "SuperboxSelect",
+  props: {
+    options: {},
+    search: { type: [Boolean, Function] },
+    minSearchChar: {},
+    caseSensitive: { type: Boolean },
+    allowCreate: { type: [Boolean, Object], default: !0 },
+    editable: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean },
+    clearable: { type: Boolean },
+    placeholder: {},
+    loading: { type: Boolean },
+    loadingText: {},
+    notFoundText: {},
+    createHintText: {},
+    displayLimit: { type: [Number, Boolean] },
+    ariaLabel: {},
+    ariaLabelledby: {},
+    openLabel: {},
+    clearLabel: {},
+    removeTagLabel: {},
+    motion: {},
+    modelValue: { default: void 0 },
+    defaultValue: { default: void 0 }
+  },
+  emits: ["update:modelValue", "update:loading", "select", "create", "invalid", "focus", "blur", "open-dropdown", "close-dropdown"],
+  setup(t, { emit: a }) {
+    const d = t, l = a;
+    function r(n) {
+      l("update:modelValue", Array.isArray(n) ? n : n ? [n] : []);
+    }
+    return (n, e) => (i(), u(m, s(d, {
+      multiple: !0,
+      "onUpdate:modelValue": r,
+      "onUpdate:loading": e[0] || (e[0] = (o) => l("update:loading", o)),
+      onSelect: e[1] || (e[1] = (o) => l("select", o)),
+      onCreate: e[2] || (e[2] = (o) => l("create", o)),
+      onInvalid: e[3] || (e[3] = (o) => l("invalid", o)),
+      onFocus: e[4] || (e[4] = (o) => l("focus", o)),
+      onBlur: e[5] || (e[5] = (o) => l("blur", o)),
+      onOpenDropdown: e[6] || (e[6] = (o) => l("open-dropdown")),
+      onCloseDropdown: e[7] || (e[7] = (o) => l("close-dropdown"))
+    }), null, 16));
+  }
+});
+export {
+  y as default
+};

package/dist/modules/components/primitives/superbox-select/SuperboxSelect2.vue.js

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

package/dist/modules/components/primitives/surface/Surface.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as s, computed as r, openBlock as u, createElementBlock as i, normalizeClass as l, renderSlot as c } from "vue";
+const p = ["data-variant"], m = /* @__PURE__ */ s({
+  __name: "Surface",
+  props: {
+    variant: { default: "default" },
+    padding: { default: void 0 },
+    border: { type: Boolean, default: !0 },
+    raised: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a, n = { none: "", sm: "p-3", md: "p-4", lg: "p-6" }, t = r(() => e.variant === "inset"), d = r(() => e.padding ? n[e.padding] : t.value ? "px-4 py-3" : n.md);
+    return (o, f) => (u(), i("section", {
+      class: l([
+        "rounded-[var(--ui-radius-container)]",
+        t.value ? "bg-[var(--ui-surface-inset)]" : "bg-[var(--ui-surface)]",
+        a.border && !t.value && "border border-[var(--ui-border-subtle)]",
+        a.raised && "shadow-[var(--ui-shadow-menu)]",
+        d.value
+      ]),
+      "data-variant": a.variant,
+      "data-ui-surface": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      c(o.$slots, "default")
+    ], 10, p));
+  }
+});
+export {
+  m as default
+};

package/dist/modules/components/primitives/surface/Surface2.vue.js

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

package/dist/modules/components/primitives/switch/Switch.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent as k, openBlock as o, createElementBlock as i, mergeProps as n, unref as a, createVNode as c, withCtx as g, toDisplayString as u, createCommentVNode as s, normalizeClass as w, renderSlot as x, createTextVNode as y } from "vue";
+import { useGroupDisabled as V } from "../../../composables/formGroup.js";
+import { useFormControl as _ } from "../../../composables/formControl.js";
+import { SwitchRoot_default as C } from "../../../vendor/reka-ui/dist/Switch/SwitchRoot.js";
+import { SwitchThumb_default as S } from "../../../vendor/reka-ui/dist/Switch/SwitchThumb.js";
+const z = {
+  key: 0,
+  class: "min-w-0 break-words [overflow-wrap:anywhere]"
+}, B = {
+  key: 0,
+  class: "block leading-[var(--ui-line-height)]"
+}, E = /* @__PURE__ */ k({
+  inheritAttrs: !1,
+  __name: "Switch",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: {},
+    description: {}
+  },
+  emits: ["update:modelValue"],
+  setup(p, { emit: m }) {
+    const e = p, t = V(() => e.disabled), b = m, { controlAttrs: v, wrapperAttrs: h, changed: f } = _({ value: () => e.modelValue, disabled: () => t.value });
+    return (r, d) => (o(), i("label", n(a(h)(), {
+      class: ["inline-flex max-w-full items-start gap-2 text-[length:var(--ui-font-size-control)] [@media(pointer:coarse)]:min-h-8 text-[var(--ui-text)]", [a(t) ? "cursor-default text-[var(--ui-text-disabled)]" : "cursor-pointer", !e.description && !r.$slots.description && "[@media(pointer:coarse)]:items-center"]],
+      "data-syno-pkg-land-ui": ""
+    }), [
+      c(a(C), n(a(v)(), {
+        "model-value": e.modelValue,
+        disabled: a(t),
+        class: "relative mt-px h-[18px] w-8 shrink-0 rounded-full p-0 border border-[var(--ui-border-strong)] aria-[invalid=true]:border-[var(--ui-danger)] bg-[var(--ui-control-track)] outline-none transition-[background-color,border-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:border-[var(--ui-primary)] data-[state=checked]:bg-[var(--ui-primary)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:bg-[var(--ui-surface-subtle)] data-[disabled]:data-[state=checked]:opacity-50 data-[state=unchecked]:enabled:hover:border-[var(--ui-control-border-hover)] data-[state=unchecked]:enabled:active:bg-[var(--ui-control-bg-active)] data-[state=checked]:enabled:hover:bg-[var(--ui-primary-hover)] data-[state=checked]:enabled:hover:border-[var(--ui-primary-hover)] data-[state=checked]:enabled:active:bg-[var(--ui-primary-active)] data-[state=checked]:enabled:active:border-[var(--ui-primary-active)]",
+        "onUpdate:modelValue": d[0] || (d[0] = (l) => {
+          a(f)(l), b("update:modelValue", l);
+        })
+      }), {
+        default: g(() => [
+          c(a(S), { class: "block size-3.5 translate-x-[1px] rounded-full bg-[var(--ui-switch-thumb)] shadow-[var(--ui-shadow-card)] transition-transform duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:translate-x-[calc(100%+1px)]" })
+        ]),
+        _: 1
+      }, 16, ["model-value", "disabled"]),
+      e.label || e.description || r.$slots.description ? (o(), i("span", z, [
+        e.label ? (o(), i("span", B, u(e.label), 1)) : s("", !0),
+        e.description || r.$slots.description ? (o(), i("span", {
+          key: 1,
+          "data-ui-switch-description": "",
+          class: w(["mt-0.5 block text-[length:var(--ui-font-size-sm)] leading-4", a(t) ? "text-[var(--ui-text-disabled)]" : "text-[var(--ui-text-secondary)]"])
+        }, [
+          x(r.$slots, "description", {}, () => [
+            y(u(e.description), 1)
+          ])
+        ], 2)) : s("", !0)
+      ])) : s("", !0)
+    ], 16));
+  }
+});
+export {
+  E as default
+};

package/dist/modules/components/primitives/switch/Switch2.vue.js

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

package/dist/modules/components/primitives/tabs/Tabs.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent as g, ref as _, openBlock as r, createBlock as i, unref as a, withCtx as o, createElementVNode as n, createVNode as y, createElementBlock as s, Fragment as d, renderList as m, createTextVNode as V, toDisplayString as T, normalizeStyle as k, renderSlot as S } from "vue";
+import { TabsRoot_default as C } from "../../../vendor/reka-ui/dist/Tabs/TabsRoot.js";
+import { TabsContent_default as z } from "../../../vendor/reka-ui/dist/Tabs/TabsContent.js";
+import { TabsList_default as B } from "../../../vendor/reka-ui/dist/Tabs/TabsList.js";
+import { TabsTrigger_default as E } from "../../../vendor/reka-ui/dist/Tabs/TabsTrigger.js";
+import { useTabIndicator as N } from "../../../composables/tabIndicator.js";
+import { useTabStripScroll as L } from "../../../composables/tabStripScroll.js";
+import { useChanged as $ } from "../../../lib/motion.js";
+const D = ["data-overflow-start", "data-overflow-end"], H = /* @__PURE__ */ g({
+  __name: "Tabs",
+  props: {
+    modelValue: {},
+    items: {}
+  },
+  emits: ["update:modelValue"],
+  setup(v, { emit: p }) {
+    const t = v, f = p, l = _(null), c = N(l, () => t.items, () => t.modelValue, 6), { overflowStart: b, overflowEnd: h } = L(l, () => t.modelValue), x = $(() => t.modelValue);
+    return (w, u) => (r(), i(a(C), {
+      "model-value": t.modelValue,
+      "onUpdate:modelValue": u[0] || (u[0] = (e) => f("update:modelValue", String(e))),
+      "data-syno-pkg-land-ui": ""
+    }, {
+      default: o(() => [
+        n("div", {
+          ref_key: "bar",
+          ref: l,
+          class: "ui-tab-bar ui-tab-strip relative min-w-0",
+          "data-overflow-start": a(b) ? "" : void 0,
+          "data-overflow-end": a(h) ? "" : void 0
+        }, [
+          y(a(B), { class: "flex min-h-[max(2.25rem,var(--ui-hit-min,0px))] w-max min-w-full items-end gap-1" }, {
+            default: o(() => [
+              (r(!0), s(d, null, m(t.items, (e) => (r(), i(a(E), {
+                key: e.value,
+                value: e.value,
+                disabled: e.disabled,
+                "data-ui-tab-value": e.value,
+                "data-ui-tab-label": e.label,
+                "data-ui-hit-row": "inline",
+                class: "relative h-[max(2.25rem,var(--ui-hit-min,0px))] min-w-[var(--ui-hit-min,0px)] shrink-0 whitespace-nowrap border-0 bg-transparent px-3 text-[length:max(var(--ui-font-size-lg),var(--ui-font-size))] font-semibold text-[var(--ui-text)] outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] active:text-[var(--ui-primary-active)] data-[state=active]:text-[var(--ui-primary)] data-[state=active]:hover:bg-transparent data-[state=active]:hover:text-[var(--ui-primary)] disabled:hover:bg-transparent focus-visible:shadow-[var(--ui-shadow-focus-inset)] disabled:opacity-40"
+              }, {
+                default: o(() => [
+                  V(T(e.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["value", "disabled", "data-ui-tab-value", "data-ui-tab-label"]))), 128))
+            ]),
+            _: 1
+          }),
+          n("span", {
+            class: "ui-tab-indicator",
+            style: k(a(c)),
+            "aria-hidden": "true"
+          }, null, 4)
+        ], 8, D),
+        (r(!0), s(d, null, m(t.items, (e) => (r(), i(a(z), {
+          key: e.value,
+          value: e.value,
+          class: "ui-tab-panel outline-none",
+          "data-ui-swapped": a(x) ? "" : void 0
+        }, {
+          default: o(() => [
+            S(w.$slots, `panel-${e.value}`, { item: e })
+          ]),
+          _: 2
+        }, 1032, ["value", "data-ui-swapped"]))), 128))
+      ]),
+      _: 3
+    }, 8, ["model-value"]));
+  }
+});
+export {
+  H as default
+};

package/dist/modules/components/primitives/tabs/Tabs2.vue.js

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

package/dist/modules/components/primitives/tag/Tag.vue.js

@@ -0,0 +1,133 @@
+import { defineComponent as M, getCurrentInstance as q, useTemplateRef as H, computed as r, ref as K, onMounted as U, onBeforeUnmount as X, openBlock as u, createBlock as w, resolveDynamicComponent as G, normalizeProps as B, guardReactiveProps as C, withCtx as J, createElementVNode as _, mergeProps as P, unref as m, createCommentVNode as p, createElementBlock as z, createVNode as E, renderSlot as R, createTextVNode as Q, toDisplayString as Y, withModifiers as Z } from "vue";
+import { useLocalizedDefaults as ee } from "../../../i18n/text.js";
+import { Primitive as te } from "../../../vendor/reka-ui/dist/Primitive/Primitive.js";
+import { X as ae } from "@lucide/vue";
+import { cn as re } from "../../../lib/cn.js";
+import b from "../icon/Icon.vue.js";
+import ie from "../tooltip/Tooltip.vue.js";
+const ne = {
+  key: 1,
+  class: "flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--ui-surface-hover)]"
+}, oe = ["disabled", "aria-label"], pe = /* @__PURE__ */ M({
+  inheritAttrs: !1,
+  __name: "Tag",
+  props: {
+    label: { default: "" },
+    appearance: { default: "neutral" },
+    removable: { type: Boolean, default: !1 },
+    selected: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    tooltip: { type: [Boolean, String], default: !0 },
+    icon: { type: [Boolean, Object] },
+    avatar: { type: [Boolean, Object] },
+    removeLabel: {}
+  },
+  emits: ["click", "remove"],
+  setup(i, { expose: A, emit: $ }) {
+    const t = ee(i, { removeLabel: "Remove" }), c = $, j = q(), s = H("labelElement"), n = r(() => !!j?.vnode.props?.onClick), D = {
+      neutral: "bg-[var(--ui-neutral-soft)] text-[var(--ui-neutral-text)]",
+      info: "bg-[var(--ui-info-soft)] text-[var(--ui-info-text)]",
+      success: "bg-[var(--ui-success-soft)] text-[var(--ui-success-text)]",
+      warning: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning-text)]",
+      danger: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger-text)]",
+      theme: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary-active)]"
+    }, N = r(() => t.invalid ? "bg-[var(--ui-danger-soft)] text-[var(--ui-danger-text)] shadow-[inset_0_0_0_1px_var(--ui-danger)]" : t.selected ? "bg-[var(--ui-primary-soft)] text-[var(--ui-primary-active)] shadow-[inset_0_0_0_1px_var(--ui-primary)]" : D[t.appearance]), L = r(() => t.disabled ? "cursor-default opacity-50" : n.value ? "cursor-pointer hover:[background-image:linear-gradient(var(--ui-state-hover),var(--ui-state-hover))] active:[background-image:linear-gradient(var(--ui-state-pressed),var(--ui-state-pressed))] focus-visible:shadow-[var(--ui-shadow-focus)]" : "");
+    function g(e) {
+      if (e)
+        return typeof e == "object" && "svgIcon" in e ? e : { svgIcon: e };
+    }
+    const h = r(() => g(t.icon)), y = r(() => {
+      const e = g(t.avatar);
+      return e ? { ...e, size: e.size ?? [12, 12] } : void 0;
+    }), d = K(!1);
+    let v;
+    function f() {
+      const e = s.value, a = !!(e && e.scrollWidth > e.clientWidth);
+      d.value !== a && (d.value = a);
+    }
+    let o = 0, x = -1, k = -1;
+    function O(e) {
+      const a = e[e.length - 1]?.contentRect;
+      !a || a.width === x && a.height === k || (x = a.width, k = a.height, !o && (o = requestAnimationFrame(() => {
+        o = 0, f();
+      })));
+    }
+    const l = r(() => {
+      if (typeof t.tooltip == "string") return t.tooltip;
+      if (t.tooltip === !0 && d.value) return t.label;
+    }), S = r(() => l.value ? ie : te), V = r(() => l.value ? { content: l.value } : { asChild: !0 });
+    U(() => {
+      f(), !(typeof ResizeObserver > "u" || !s.value) && (v = new ResizeObserver(O), v.observe(s.value));
+    }), X(() => {
+      v?.disconnect(), o && cancelAnimationFrame(o);
+    });
+    const I = r(() => ({
+      role: n.value ? "button" : void 0,
+      tabindex: n.value && !t.disabled ? 0 : void 0,
+      "aria-pressed": n.value ? t.selected : void 0,
+      "aria-disabled": n.value && t.disabled ? !0 : void 0,
+      "data-tooltip": l.value ? "" : void 0
+    }));
+    function T(e) {
+      t.disabled || c("click", e);
+    }
+    function W(e) {
+      !n.value || t.disabled || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), c("click", e));
+    }
+    function F() {
+      t.disabled || c("remove");
+    }
+    return A({ measure: f }), (e, a) => (u(), w(G(S.value), B(C(V.value)), {
+      default: J(() => [
+        _("span", P({
+          class: m(re)(
+            "inline-flex h-5 max-w-full shrink-0 items-center gap-1 rounded-[var(--ui-radius-inner)] px-2 align-middle text-[length:var(--ui-font-size-sm)] leading-none whitespace-nowrap outline-none",
+            N.value,
+            L.value,
+            i.removable && "pr-0.5"
+          )
+        }, { ...e.$attrs, ...I.value }, {
+          onClick: T,
+          onKeydown: W,
+          "data-tag": "",
+          "data-syno-pkg-land-ui": ""
+        }), [
+          h.value ? (u(), w(b, P({ key: 0 }, { size: "sm", ...h.value }, { class: "shrink-0" }), null, 16)) : p("", !0),
+          y.value ? (u(), z("span", ne, [
+            E(b, B(C(y.value)), null, 16)
+          ])) : p("", !0),
+          R(e.$slots, "prefix"),
+          _("span", {
+            ref_key: "labelElement",
+            ref: s,
+            class: "min-w-0 truncate",
+            "data-tag-label": ""
+          }, [
+            R(e.$slots, "default", {}, () => [
+              Q(Y(i.label), 1)
+            ])
+          ], 512),
+          i.removable ? (u(), z("button", {
+            key: 2,
+            type: "button",
+            disabled: i.disabled,
+            "aria-label": `${m(t).removeLabel} ${i.label}`,
+            class: "relative inline-flex size-4 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] text-current opacity-60 outline-none hover:bg-[var(--ui-state-hover)] hover:opacity-100 focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40 [--ui-hit-end-room:2px]",
+            "data-tag-remove": "",
+            onClick: Z(F, ["stop"])
+          }, [
+            E(b, {
+              "svg-icon": m(ae),
+              size: [12, 12]
+            }, null, 8, ["svg-icon"])
+          ], 8, oe)) : p("", !0)
+        ], 16)
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  pe as default
+};

package/dist/modules/components/primitives/tag/Tag2.vue.js

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

package/dist/modules/components/primitives/toast/ToastProvider.vue.js

@@ -0,0 +1,197 @@
+import { defineComponent as R, computed as d, ref as N, onBeforeUnmount as Y, provide as F, openBlock as l, createBlock as g, unref as i, withCtx as s, renderSlot as G, createVNode as f, createElementBlock as x, Fragment as H, renderList as X, toDisplayString as w, createCommentVNode as k, resolveDynamicComponent as J, normalizeClass as Q, createElementVNode as W, createTextVNode as A, mergeProps as Z } from "vue";
+import { useLocalizedDefaults as tt } from "../../../i18n/text.js";
+import { X as et, LoaderCircle as ot, CircleAlert as nt, TriangleAlert as it, CircleCheck as at, Info as rt } from "@lucide/vue";
+import { ToastProvider_default as lt } from "../../../vendor/reka-ui/dist/Toast/ToastProvider.js";
+import { ToastClose_default as ut } from "../../../vendor/reka-ui/dist/Toast/ToastClose.js";
+import { ToastDescription_default as st } from "../../../vendor/reka-ui/dist/Toast/ToastDescription.js";
+import { ToastPortal_default as ct } from "../../../vendor/reka-ui/dist/Toast/ToastPortal.js";
+import { ToastRoot_default as dt } from "../../../vendor/reka-ui/dist/Toast/ToastRoot.js";
+import { ToastTitle_default as ft } from "../../../vendor/reka-ui/dist/Toast/ToastTitle.js";
+import { ToastViewport_default as pt } from "../../../vendor/reka-ui/dist/Toast/ToastViewport.js";
+import { motionMs as vt } from "../../../lib/motion.js";
+import { TOAST_DURATION_MS as mt, toastDuration as gt, PENDING_DELAY_MS as wt } from "../../../feedback/timing.js";
+import { useStackMotion as bt } from "../../../feedback/stackMotion.js";
+import { usePhone as ht } from "../../../composables/phone.js";
+import { toastControllerKey as _t } from "./toast.js";
+const xt = {
+  key: 0,
+  "data-ui-toast-count": "",
+  "aria-hidden": "true"
+}, kt = { class: "min-w-0" }, Tt = ["onClick"], $t = /* @__PURE__ */ R({
+  inheritAttrs: !1,
+  __name: "ToastProvider",
+  props: {
+    announcementLabel: {},
+    viewportLabel: {},
+    closeLabel: {},
+    swipeDirection: { default: "right" }
+  },
+  setup(S, { expose: E }) {
+    const p = tt(S, { closeLabel: "Close notification", announcementLabel: "Notification", viewportLabel: "Notifications ({hotkey})" }), v = ht(), P = d(() => v.value ? "down" : p.swipeDirection), a = N([]);
+    let I = 1;
+    const r = /* @__PURE__ */ new Map(), M = ["title", "description", "tone", "pending", "duration", "actionLabel", "onAction"];
+    function O(t) {
+      return t.pending ? ot : {
+        info: rt,
+        success: at,
+        warning: it,
+        danger: nt
+      }[t.tone ?? "info"];
+    }
+    const T = (t) => typeof t == "string" ? { title: t } : t;
+    function V(t) {
+      const o = r.get(t.id);
+      o?.waiting !== void 0 && clearTimeout(o.waiting), o && (o.waiting = void 0), t.open = !0;
+    }
+    function u(t) {
+      const o = T(t), e = I++, n = { version: 0, closed: !1 };
+      return r.set(e, n), a.value.push({ tone: "info", ...o, id: e, open: !o.pending }), o.pending && (n.waiting = setTimeout(() => {
+        n.waiting = void 0;
+        const m = a.value.find((c) => c.id === e);
+        m && !n.closed && (m.open = !0);
+      }, wt)), e;
+    }
+    function B(t, o) {
+      const e = a.value.find((c) => c.id === t), n = r.get(t);
+      if (!e || !n || n.closed) return !1;
+      const m = T(o);
+      for (const c of M) delete e[c];
+      return Object.assign(e, { tone: "info" }, m), n.version++, e.pending || V(e), !0;
+    }
+    function y(t) {
+      a.value = a.value.filter((o) => o.id !== t), r.delete(t);
+    }
+    function b(t) {
+      const o = a.value.find((n) => n.id === t), e = r.get(t);
+      if (!(!o || !e)) {
+        if (e.closed = !0, e.waiting !== void 0) {
+          clearTimeout(e.waiting), y(t);
+          return;
+        }
+        o.open = !1;
+      }
+    }
+    function U() {
+      for (const t of [...a.value]) b(t.id);
+    }
+    const h = /* @__PURE__ */ new Set();
+    function $(t, o) {
+      if (t.open = o, o) return;
+      const e = r.get(t.id);
+      e && (e.closed = !0);
+      const n = setTimeout(() => {
+        h.delete(n), y(t.id);
+      }, vt("--ui-motion-fast") + 60);
+      h.add(n);
+    }
+    function q(t) {
+      const e = r.get(t.id)?.version;
+      t.onAction?.(), r.get(t.id)?.version === e && b(t.id);
+    }
+    Y(() => {
+      for (const t of h) clearTimeout(t);
+      for (const t of r.values()) t.waiting !== void 0 && clearTimeout(t.waiting);
+    });
+    const L = {
+      show: u,
+      update: B,
+      dismiss: b,
+      clear: U,
+      info: (t, o) => u({ title: t, description: o, tone: "info" }),
+      success: (t, o) => u({ title: t, description: o, tone: "success" }),
+      warning: (t, o) => u({ title: t, description: o, tone: "warning" }),
+      danger: (t, o) => u({ title: t, description: o, tone: "danger" }),
+      pending: (t, o) => u({ title: t, description: o, pending: !0 })
+    };
+    F(_t, L), E(L);
+    const _ = d(() => a.value.filter((t) => t.open)), C = d(() => _.value[_.value.length - 1]?.id), z = d(() => _.value.length - 1), j = (t) => v.value && t.open && t.id !== C.value, D = N(null), K = d(() => {
+      const t = D.value?.$el;
+      return t instanceof HTMLElement ? t : null;
+    });
+    return bt(K, ".ui-toast"), (t, o) => (l(), g(i(lt), {
+      label: i(p).announcementLabel,
+      duration: i(mt).info,
+      "swipe-direction": P.value
+    }, {
+      default: s(() => [
+        G(t.$slots, "default"),
+        f(i(ct), null, {
+          default: s(() => [
+            (l(!0), x(H, null, X(a.value, (e) => (l(), g(i(dt), {
+              key: e.id,
+              open: e.open,
+              duration: i(gt)(e),
+              type: e.tone === "danger" && !e.pending ? "foreground" : "background",
+              class: "ui-toast pointer-events-auto relative box-border grid w-[360px] max-w-full grid-cols-[18px_minmax(0,1fr)_auto] items-start gap-x-3 gap-y-1 rounded-[var(--ui-callout-radius,12px)] py-3 pr-3 pl-4 data-[state=closed]:animate-[ui-toast-out_var(--ui-motion-fast)_var(--ui-motion-ease-in)] data-[state=closed]:pointer-events-none data-[state=open]:animate-[ui-toast-in_var(--ui-motion-slow)_var(--ui-motion-ease-out)]",
+              "data-tone": e.tone ?? "info",
+              "data-pending": e.pending ? "" : void 0,
+              "aria-busy": e.pending ? "true" : void 0,
+              "data-ui-toast-queued": j(e) ? "" : void 0,
+              "data-syno-pkg-land-ui": "",
+              "onUpdate:open": (n) => $(e, n)
+            }, {
+              default: s(() => [
+                i(v) && e.id === C.value && z.value > 0 ? (l(), x("span", xt, "+" + w(z.value), 1)) : k("", !0),
+                (l(), g(J(O(e)), {
+                  class: Q(["ui-toast-icon mt-px", { "animate-spin": e.pending }]),
+                  "aria-hidden": "true"
+                }, null, 8, ["class"])),
+                W("div", kt, [
+                  f(i(ft), { class: "text-[length:var(--ui-font-size)] leading-[var(--ui-line-height)] font-semibold text-[var(--ui-text)]" }, {
+                    default: s(() => [
+                      A(w(e.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024),
+                  e.description ? (l(), g(i(st), {
+                    key: 0,
+                    class: "mt-0.5 text-[length:var(--ui-font-size-sm)] leading-[calc(var(--ui-font-size-sm)+4px)] text-[var(--ui-text-secondary)]"
+                  }, {
+                    default: s(() => [
+                      A(w(e.description), 1)
+                    ]),
+                    _: 2
+                  }, 1024)) : k("", !0),
+                  e.actionLabel ? (l(), x("button", {
+                    key: 1,
+                    type: "button",
+                    class: "ui-toast-action mt-2 inline-flex h-6 items-center border border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text)] outline-none hover:border-[var(--ui-control-border-hover)] hover:bg-[var(--ui-control-bg-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                    onClick: (n) => q(e)
+                  }, w(e.actionLabel), 9, Tt)) : k("", !0)
+                ]),
+                f(i(ut), {
+                  "data-ui-hit": "",
+                  class: "-mr-2 -mt-2 flex size-8 items-center justify-center rounded-[var(--ui-radius-inner)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                  "aria-label": i(p).closeLabel
+                }, {
+                  default: s(() => [
+                    f(i(et), {
+                      class: "size-3.5",
+                      "aria-hidden": "true"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label"])
+              ]),
+              _: 2
+            }, 1032, ["open", "duration", "type", "data-tone", "data-pending", "aria-busy", "data-ui-toast-queued", "onUpdate:open"]))), 128)),
+            f(i(pt), Z({
+              ref_key: "viewport",
+              ref: D,
+              label: i(p).viewportLabel
+            }, t.$attrs, {
+              "data-ui-phone": i(v) ? "" : void 0,
+              "data-ui-toast-viewport": "",
+              class: "pointer-events-none fixed right-4 bottom-4 z-[1600] m-0 flex max-h-full w-[360px] max-w-[calc(100%-var(--ui-space-8))] list-none flex-col gap-2 p-0 outline-none"
+            }), null, 16, ["label", "data-ui-phone"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 3
+    }, 8, ["label", "duration", "swipe-direction"]));
+  }
+});
+export {
+  $t as default
+};

package/dist/modules/components/primitives/toast/ToastProvider2.vue.js

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

package/dist/modules/components/primitives/toast/toast.js

@@ -0,0 +1,24 @@
+import { inject as n } from "vue";
+const r = /* @__PURE__ */ Symbol("syno-pkg-land-ui-toast-controller"), s = {
+  show: () => -1,
+  update: () => !1,
+  dismiss: () => {
+  },
+  clear: () => {
+  },
+  info: () => -1,
+  success: () => -1,
+  warning: () => -1,
+  danger: () => -1,
+  pending: () => -1
+};
+function a(t = {}) {
+  const o = n(r, null);
+  if (o) return o;
+  if (t.optional) return s;
+  throw new Error("useToast() requires a <ToastProvider> ancestor; pass { optional: true } to do nothing without one");
+}
+export {
+  r as toastControllerKey,
+  a as useToast
+};