@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/feedback/notification/Notification.vue.js

@@ -0,0 +1,159 @@
+import { defineComponent as G, useSlots as H, computed as o, ref as P, watch as J, onBeforeUnmount as Q, openBlock as i, createElementBlock as u, createElementVNode as C, renderSlot as f, createBlock as _, resolveDynamicComponent as R, normalizeClass as W, createCommentVNode as s, createTextVNode as p, toDisplayString as y, createVNode as V, withCtx as T, unref as O } from "vue";
+import { useUiText as Y, useLocalizedDefaults as Z } from "../../../i18n/text.js";
+import { CircleAlert as ee, Lightbulb as te, Info as oe, X as ne } from "@lucide/vue";
+import { useId as ae } from "../../../vendor/reka-ui/dist/shared/useId.js";
+import E from "../../primitives/button/Button.vue.js";
+import ie from "../../primitives/button/ButtonKindScope.vue.js";
+const se = ["aria-labelledby", "aria-describedby", "data-open"], re = { class: "flex gap-3" }, le = {
+  key: 0,
+  class: "pt-0.5"
+}, ue = { class: "min-w-0 flex-1" }, de = ["id"], ce = ["id"], ve = ["id"], fe = {
+  key: 3,
+  class: "mt-2"
+}, me = ["aria-label"], $e = /* @__PURE__ */ G({
+  __name: "Notification",
+  props: {
+    id: {},
+    title: { type: [String, Boolean], default: !1 },
+    content: { type: [String, Boolean], default: !1 },
+    tone: { default: "info" },
+    icon: { type: [String, Boolean] },
+    cancel: { type: [String, Boolean, Object], default: !0 },
+    confirm: { type: [String, Boolean, Object], default: !0 },
+    duration: { type: [Number, Boolean], default: !1 },
+    open: { type: Boolean, default: !0 },
+    paused: { type: Boolean, default: !1 },
+    closeLabel: {}
+  },
+  emits: ["close", "confirm", "cancel"],
+  setup(z, { emit: F }) {
+    const b = Y(), e = Z(z, { closeLabel: "Close" }), m = F, r = H(), x = ae(e.id, "notify"), S = o(() => `${x}-title`), I = o(() => `${x}-content`), A = o(() => `${x}-footer`), U = o(() => ({ info: oe, suggest: te, error: ee })[e.tone]), g = o(() => typeof e.icon == "string" ? e.icon : e.tone), K = o(() => e.icon !== !1), h = o(() => typeof e.title == "string" ? e.title : ""), w = o(() => typeof e.content == "string" ? e.content : "");
+    function N(n, t) {
+      return n === !1 ? null : n === !0 || n === void 0 ? { text: t, variant: t === b("Cancel") ? "secondary" : "primary" } : typeof n == "string" ? { text: n } : n;
+    }
+    const d = o(() => N(e.cancel, b("Cancel"))), c = o(() => N(e.confirm, b("OK"))), j = o(() => !!d.value || !!c.value || !!r.actions), M = o(() => !r.title && h.value ? S.value : void 0), X = o(
+      () => [
+        !r.content && w.value ? I.value : void 0,
+        j.value ? A.value : void 0
+      ].filter(Boolean).join(" ") || void 0
+    ), $ = P(!1), k = P(!1), B = o(() => e.paused || $.value || k.value);
+    let v, D = 0, a;
+    function L() {
+      v !== void 0 && (clearTimeout(v), v = void 0, a !== void 0 && (a = Math.max(0, a - (Date.now() - D))));
+    }
+    function q() {
+      !e.open || B.value || typeof e.duration != "number" || e.duration <= 0 || (a ??= e.duration, D = Date.now(), v = setTimeout(() => {
+        v = void 0, m("close");
+      }, a));
+    }
+    return J(
+      () => [B.value, e.duration, e.open],
+      () => {
+        L(), e.open && ((typeof e.duration != "number" || !B.value && a !== void 0 && a >= e.duration) && (a = void 0), q());
+      },
+      { immediate: !0 }
+    ), Q(L), (n, t) => (i(), u("div", {
+      role: "listitem",
+      tabindex: "-1",
+      "aria-labelledby": M.value,
+      "aria-describedby": X.value,
+      "data-open": z.open ? "true" : "false",
+      "data-ui-notification": "",
+      class: "pointer-events-auto w-[360px] max-w-[min(480px,100%)] rounded-[var(--ui-radius-panel)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] p-3 shadow-[var(--ui-shadow-menu)] outline-none data-[open=false]:opacity-0 data-[open=false]:transition-opacity data-[open=false]:duration-[var(--ui-motion-normal)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+      "data-syno-pkg-land-ui": "",
+      onPointerenter: t[3] || (t[3] = (l) => $.value = !0),
+      onPointerleave: t[4] || (t[4] = (l) => $.value = !1),
+      onFocusin: t[5] || (t[5] = (l) => k.value = !0),
+      onFocusout: t[6] || (t[6] = (l) => k.value = !1)
+    }, [
+      C("div", re, [
+        K.value ? (i(), u("span", le, [
+          f(n.$slots, "icon", {}, () => [
+            (i(), _(R(U.value), {
+              class: W([
+                "size-4 shrink-0",
+                g.value === "info" && "text-[var(--ui-info)]",
+                g.value === "suggest" && "text-[var(--ui-success)]",
+                g.value === "error" && "text-[var(--ui-danger)]"
+              ]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"]))
+          ])
+        ])) : s("", !0),
+        C("div", ue, [
+          r.title || h.value ? (i(), u("div", {
+            key: 0,
+            id: S.value,
+            class: "text-[length:var(--ui-font-size)] leading-[var(--ui-line-height)] font-semibold text-[var(--ui-text)]"
+          }, [
+            f(n.$slots, "title", {}, () => [
+              p(y(h.value), 1)
+            ])
+          ], 8, de)) : s("", !0),
+          r.content || w.value ? (i(), u("div", {
+            key: 1,
+            id: I.value,
+            class: "mt-0.5 text-[length:var(--ui-font-size-sm)] leading-[calc(var(--ui-font-size-sm)+4px)] text-[var(--ui-text-secondary)]"
+          }, [
+            f(n.$slots, "content", {}, () => [
+              p(y(w.value), 1)
+            ])
+          ], 8, ce)) : s("", !0),
+          j.value ? (i(), u("div", {
+            key: 2,
+            id: A.value,
+            class: "mt-3 flex flex-wrap items-center justify-end gap-2"
+          }, [
+            V(ie, { kind: "action" }, {
+              default: T(() => [
+                f(n.$slots, "actions", {}, () => [
+                  d.value ? (i(), _(E, {
+                    key: 0,
+                    variant: d.value.variant ?? "secondary",
+                    disabled: d.value.disabled,
+                    onClick: t[0] || (t[0] = (l) => m("cancel"))
+                  }, {
+                    default: T(() => [
+                      p(y(d.value.text), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["variant", "disabled"])) : s("", !0),
+                  c.value ? (i(), _(E, {
+                    key: 1,
+                    variant: c.value.variant ?? "primary",
+                    disabled: c.value.disabled,
+                    onClick: t[1] || (t[1] = (l) => m("confirm"))
+                  }, {
+                    default: T(() => [
+                      p(y(c.value.text), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["variant", "disabled"])) : s("", !0)
+                ])
+              ]),
+              _: 3
+            })
+          ], 8, ve)) : s("", !0),
+          r.footer ? (i(), u("div", fe, [
+            f(n.$slots, "footer")
+          ])) : s("", !0)
+        ]),
+        C("button", {
+          type: "button",
+          "data-ui-hit": "",
+          class: "-mr-2 -mt-2 flex size-8 [--ui-hit-end-room:5px] shrink-0 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": O(e).closeLabel,
+          onClick: t[2] || (t[2] = (l) => m("close"))
+        }, [
+          V(O(ne), {
+            class: "size-3.5",
+            "aria-hidden": "true"
+          })
+        ], 8, me)
+      ])
+    ], 40, se));
+  }
+});
+export {
+  $e as default
+};

package/dist/modules/components/feedback/notification/Notification2.vue.js

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

package/dist/modules/components/feedback/notification/NotificationProvider.vue.js

@@ -0,0 +1,178 @@
+import { defineComponent as X, ref as f, computed as l, watch as Z, provide as ee, onMounted as te, onBeforeUnmount as ne, openBlock as y, createElementBlock as S, Fragment as T, renderSlot as oe, createBlock as ae, Teleport as ie, createElementVNode as I, normalizeStyle as _, normalizeClass as re, unref as E, renderList as le, createVNode as se, toDisplayString as ue } from "vue";
+import { useLocalizedDefaults as ce } from "../../../i18n/text.js";
+import { injectConfigProviderContext as fe } from "../../../vendor/reka-ui/dist/ConfigProvider/ConfigProvider.js";
+import { injectModalScope as de } from "../../../lib/localModal.js";
+import { useFocusOwner as ve } from "../../../composables/focusOwner.js";
+import { usePhone as pe } from "../../../composables/phone.js";
+import me from "./Notification.vue.js";
+import { notificationControllerKey as ge } from "./notification.js";
+const ye = ["aria-label", "data-ui-alignment", "data-ui-phone"], he = ["data-notification-id", "inert", "aria-hidden"], ke = {
+  role: "status",
+  "aria-live": "polite",
+  "aria-atomic": "true",
+  class: "sr-only"
+}, Le = /* @__PURE__ */ X({
+  __name: "NotificationProvider",
+  props: {
+    stackSize: { type: [Number, Boolean], default: 3 },
+    alignment: { default: "top-right" },
+    gap: { default: 6 },
+    stackGap: { default: 8 },
+    duration: { default: 5e3 },
+    landmarkLabel: {},
+    accessHint: {}
+  },
+  setup(h, { expose: A }) {
+    const a = ce(h, { landmarkLabel: "Notifications", accessHint: "Press F6 to access notifications" }), k = pe(), r = f([]), i = f(!1), d = f(!1), $ = f(""), x = f(null), F = ve(), s = f();
+    de()?.branch(s);
+    let M = 1;
+    const B = fe({}), N = l(() => B.teleportTo?.value ?? "body"), v = l(() => [...r.value].reverse()), O = l(() => typeof a.stackSize == "number" ? a.stackSize : r.value.length), p = l(() => typeof a.stackSize == "number" && v.value.length > a.stackSize), u = l(() => p.value && !i.value), b = l(() => u.value ? v.value.slice(0, O.value) : v.value), w = l(() => !k.value && a.alignment.startsWith("bottom")), H = l(() => k.value ? "" : {
+      "top-right": "top-[var(--ui-space-4)] right-[var(--ui-space-4)]",
+      "top-left": "top-[var(--ui-space-4)] left-[var(--ui-space-4)]",
+      "bottom-right": "right-[var(--ui-space-4)] bottom-[var(--ui-space-4)]",
+      "bottom-left": "bottom-[var(--ui-space-4)] left-[var(--ui-space-4)]"
+    }[a.alignment]);
+    Z(p, (e) => {
+      e || (i.value = !1);
+    });
+    function C() {
+      return Array.from(s.value?.querySelectorAll('[role="listitem"]') ?? []);
+    }
+    function L() {
+      C()[0]?.focus();
+    }
+    function j() {
+      const e = x.value;
+      x.value = null, e?.isConnected && F(e) ? e.focus() : document.activeElement?.blur();
+    }
+    function q(e) {
+      const { title: t, content: n } = e.options, o = [typeof t == "string" ? t : "", typeof n == "string" ? n : ""].filter(Boolean);
+      o.length && ($.value = [...o, a.accessHint].join(". "));
+    }
+    function P(e) {
+      const t = typeof e == "string" ? { title: e } : { ...e }, n = t.id ?? `notification-${M++}`, o = { id: n, open: !0, options: t };
+      return r.value = [...r.value, o], q(o), () => m(n);
+    }
+    function z(e) {
+      return (t) => P({ ...typeof t == "string" ? { title: t } : t, tone: e });
+    }
+    function m(e) {
+      const t = r.value.find((c) => c.id === e);
+      if (!t || !t.open) return;
+      const n = v.value.findIndex((c) => c.id === e), o = s.value?.querySelector(`[data-notification-id="${e}"]`), g = !!o && o.contains(document.activeElement);
+      t.open = !1, t.options.onClose?.(), setTimeout(() => {
+        if (r.value = r.value.filter((R) => R.id !== e), !g) return;
+        const c = C();
+        c[Math.min(n, c.length - 1)]?.focus();
+      }, 220);
+    }
+    function G() {
+      for (const e of [...r.value]) m(e.id);
+    }
+    const D = {
+      notify: P,
+      info: z("info"),
+      suggest: z("suggest"),
+      error: z("error"),
+      dismiss: m,
+      dismissAll: G
+    };
+    ee(ge, D), A(D);
+    function K(e) {
+      if (!(e.key !== "F6" || e.altKey || e.ctrlKey || e.metaKey) && r.value.length) {
+        if (e.preventDefault(), !s.value?.contains(document.activeElement)) {
+          const t = document.activeElement;
+          x.value = t instanceof HTMLElement && F(t) ? t : null;
+        }
+        i.value = !0, L();
+      }
+    }
+    function U(e) {
+      if (e.key === "Escape") {
+        e.preventDefault(), i.value && p.value ? (i.value = !1, L()) : j();
+        return;
+      }
+      if (!i.value || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      const t = C(), n = t.indexOf(document.activeElement);
+      if (n < 0) return;
+      e.preventDefault();
+      const o = n + (e.key === "ArrowDown" ? 1 : -1);
+      t[Math.max(0, Math.min(t.length - 1, o))]?.focus();
+    }
+    function V(e) {
+      e.target !== e.currentTarget || !u.value || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), i.value = !0);
+    }
+    function W(e) {
+      const t = e.relatedTarget;
+      d.value = !!t && !!s.value?.contains(t), d.value || (i.value = !1);
+    }
+    function Y() {
+      p.value && (i.value = !0);
+    }
+    function J(e) {
+      const t = e.relatedTarget;
+      t && s.value?.contains(t) || d.value || (i.value = !1);
+    }
+    function Q(e) {
+      if (!u.value || e === 0) return { zIndex: String(b.value.length - e) };
+      const t = e * a.stackGap, n = Math.max(0, 1 - e * 0.04), o = {
+        position: "absolute",
+        left: "0",
+        right: "0",
+        transform: `translateY(${w.value ? "-" : ""}${t}px) scale(${n})`,
+        zIndex: String(b.value.length - e)
+      };
+      return w.value ? o.bottom = "0" : o.top = "0", o;
+    }
+    return te(() => document.addEventListener("keydown", K)), ne(() => document.removeEventListener("keydown", K)), (e, t) => (y(), S(T, null, [
+      oe(e.$slots, "default"),
+      (y(), ae(ie, { to: N.value }, [
+        I("div", {
+          ref_key: "container",
+          ref: s,
+          role: "list",
+          "aria-label": E(a).landmarkLabel,
+          "data-ui-alignment": E(a).alignment,
+          "data-ui-phone": E(k) ? "" : void 0,
+          "data-ui-notification-stack": "",
+          class: re(["pointer-events-none fixed z-[1500] flex w-[360px] max-w-[calc(100%-32px)] outline-none", [H.value, w.value ? "flex-col-reverse" : "flex-col"]]),
+          style: _({ gap: u.value ? "0px" : `${h.gap}px` }),
+          onKeydown: U,
+          onFocusin: t[0] || (t[0] = (n) => d.value = !0),
+          onFocusout: W,
+          onPointerover: Y,
+          onPointerout: J
+        }, [
+          (y(!0), S(T, null, le(b.value, (n, o) => (y(), S("div", {
+            key: n.id,
+            "data-notification-id": n.id,
+            style: _(Q(o)),
+            inert: u.value && o > 0 ? !0 : void 0,
+            "aria-hidden": u.value && o > 0 ? "true" : void 0,
+            onKeydown: V
+          }, [
+            se(me, {
+              id: n.id,
+              title: n.options.title,
+              content: n.options.content,
+              tone: n.options.tone,
+              icon: n.options.icon,
+              cancel: n.options.cancel,
+              confirm: n.options.confirm,
+              open: n.open,
+              paused: d.value,
+              duration: n.options.duration ?? h.duration,
+              onClose: (g) => m(n.id),
+              onConfirm: (g) => n.options.onConfirm?.(),
+              onCancel: (g) => n.options.onCancel?.()
+            }, null, 8, ["id", "title", "content", "tone", "icon", "cancel", "confirm", "open", "paused", "duration", "onClose", "onConfirm", "onCancel"])
+          ], 44, he))), 128))
+        ], 46, ye),
+        I("div", ke, ue($.value), 1)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  Le as default
+};

package/dist/modules/components/feedback/notification/NotificationProvider2.vue.js

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

package/dist/modules/components/feedback/notification/notification.js

@@ -0,0 +1,14 @@
+import { inject as t } from "vue";
+const i = /* @__PURE__ */ Symbol("syno-pkg-land-ui-notification-controller");
+function n() {
+  const o = t(i);
+  if (!o)
+    throw new Error("useNotification() requires a <NotificationProvider> ancestor");
+  return o;
+}
+const e = n;
+export {
+  i as notificationControllerKey,
+  n as useNotification,
+  e as useNotifyManager
+};

package/dist/modules/components/feedback/validation-popup/ValidationPopup.vue.js

@@ -0,0 +1,108 @@
+import { defineComponent as x, ref as s, computed as p, useTemplateRef as k, watch as P, openBlock as C, createBlock as B, unref as o, withCtx as i, createVNode as r, renderSlot as c, mergeProps as O, createTextVNode as _, toDisplayString as $ } from "vue";
+import { TooltipArrow_default as D } from "../../../vendor/reka-ui/dist/Tooltip/TooltipArrow.js";
+import { TooltipProvider_default as V } from "../../../vendor/reka-ui/dist/Tooltip/TooltipProvider.js";
+import { TooltipRoot_default as z } from "../../../vendor/reka-ui/dist/Tooltip/TooltipRoot.js";
+import { TooltipContent_default as A } from "../../../vendor/reka-ui/dist/Tooltip/TooltipContent.js";
+import { TooltipPortal_default as E } from "../../../vendor/reka-ui/dist/Tooltip/TooltipPortal.js";
+import { TooltipTrigger_default as N } from "../../../vendor/reka-ui/dist/Tooltip/TooltipTrigger.js";
+import { useFloating as R } from "../../primitives/popover/floating.js";
+const G = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "ValidationPopup",
+  props: {
+    content: {},
+    disable: { type: Boolean, default: !1 },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: !1 },
+    side: { default: "top" },
+    align: { default: "center" },
+    offset: { default: 6 },
+    tipContainer: {}
+  },
+  emits: ["update:open"],
+  setup(a, { expose: v, emit: m }) {
+    const t = a, g = m, d = s(t.defaultOpen), l = s(!1), n = p({
+      get: () => t.disable ? !1 : t.open ?? d.value,
+      set: (e) => {
+        t.open === void 0 && (d.value = e), g("update:open", e);
+      }
+    }), u = k("trigger"), h = R(() => u.value?.$el instanceof HTMLElement ? u.value.$el : void 0, () => n.value), w = p(() => t.tipContainer?.() ?? void 0);
+    function f() {
+      l.value = !1, n.value = !1;
+    }
+    function b() {
+      t.disable || (l.value = !0, n.value = !0);
+    }
+    function y() {
+      f();
+    }
+    v({ showPopup: b, hidePopup: y });
+    function T(e) {
+      !e && l.value || (e || (l.value = !1), n.value = e);
+    }
+    return P(
+      () => t.disable,
+      (e) => {
+        e && (l.value = !1, d.value = !1);
+      }
+    ), (e, S) => (C(), B(o(V), {
+      "delay-duration": 0,
+      "skip-delay-duration": 0,
+      "disable-hoverable-content": ""
+    }, {
+      default: i(() => [
+        r(o(z), {
+          open: n.value,
+          disabled: a.disable,
+          "onUpdate:open": T
+        }, {
+          default: i(() => [
+            r(o(N), {
+              ref_key: "trigger",
+              ref: u,
+              "as-child": ""
+            }, {
+              default: i(() => [
+                c(e.$slots, "default")
+              ]),
+              _: 3
+            }, 512),
+            r(o(E), { to: w.value }, {
+              default: i(() => [
+                r(o(A), O({ ...o(h), ...e.$attrs }, {
+                  side: a.side,
+                  align: a.align,
+                  "side-offset": a.offset,
+                  "arrow-padding": 8,
+                  role: "tooltip",
+                  class: "z-[1450] w-max max-w-[min(18rem,var(--reka-popper-available-width))] max-h-[var(--reka-popper-available-height)] overflow-y-auto [overflow-wrap:anywhere] rounded-[var(--ui-radius-popover)] bg-[var(--ui-danger-hover)] px-3 py-2 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-danger-foreground)] shadow-[var(--ui-shadow-menu)] outline-none",
+                  "data-syno-pkg-land-ui": "",
+                  onEscapeKeyDown: f,
+                  onPointerDownOutside: f
+                }), {
+                  default: i(() => [
+                    c(e.$slots, "content", {}, () => [
+                      _($(a.content), 1)
+                    ]),
+                    r(o(D), {
+                      class: "fill-[var(--ui-danger-hover)]",
+                      width: 10,
+                      height: 5
+                    })
+                  ]),
+                  _: 3
+                }, 16, ["side", "align", "side-offset"])
+              ]),
+              _: 3
+            }, 8, ["to"])
+          ]),
+          _: 3
+        }, 8, ["open", "disabled"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  G as default
+};

package/dist/modules/components/feedback/validation-popup/ValidationPopup2.vue.js

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

package/dist/modules/components/primitives/accordion/Accordion.vue.js

@@ -0,0 +1,70 @@
+import { defineComponent as p, openBlock as i, createBlock as l, unref as t, withCtx as a, createElementBlock as v, Fragment as f, renderList as _, createVNode as r, createElementVNode as d, toDisplayString as b, renderSlot as h } from "vue";
+import { ChevronDown as g } from "@lucide/vue";
+import { AccordionRoot_default as x } from "../../../vendor/reka-ui/dist/Accordion/AccordionRoot.js";
+import { AccordionItem_default as w } from "../../../vendor/reka-ui/dist/Accordion/AccordionItem.js";
+import { AccordionContent_default as y } from "../../../vendor/reka-ui/dist/Accordion/AccordionContent.js";
+import { AccordionHeader_default as A } from "../../../vendor/reka-ui/dist/Accordion/AccordionHeader.js";
+import { AccordionTrigger_default as V } from "../../../vendor/reka-ui/dist/Accordion/AccordionTrigger.js";
+const k = { class: "min-w-0 [overflow-wrap:anywhere]" }, C = { class: "min-h-0 overflow-hidden" }, z = { class: "ui-accordion-body pb-4 pl-6" }, H = /* @__PURE__ */ p({
+  __name: "Accordion",
+  props: {
+    items: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: u }) {
+    const n = s, c = u;
+    function m(o) {
+      c("update:modelValue", Array.isArray(o) ? o[0] : o);
+    }
+    return (o, B) => (i(), l(t(x), {
+      type: "single",
+      collapsible: "",
+      "model-value": n.modelValue,
+      class: "divide-y divide-[var(--ui-border-subtle)] border-y border-[var(--ui-border-subtle)]",
+      "data-syno-pkg-land-ui": "",
+      "onUpdate:modelValue": m
+    }, {
+      default: a(() => [
+        (i(!0), v(f, null, _(n.items, (e) => (i(), l(t(w), {
+          key: e.value,
+          value: e.value,
+          disabled: e.disabled
+        }, {
+          default: a(() => [
+            r(t(A), null, {
+              default: a(() => [
+                r(t(V), { class: "ui-accordion-trigger group flex min-h-10 [@media(pointer:coarse)]:min-h-[var(--ui-hit-min)] w-full items-center gap-2 rounded-[var(--ui-radius-inner)] px-0 py-2 text-left text-[length:var(--ui-font-size-control)] font-semibold text-[var(--ui-text)] outline-none hover:text-[var(--ui-primary-active)] active:bg-[var(--ui-control-bg-active)] active:shadow-[-4px_0_0_var(--ui-control-bg-active),4px_0_0_var(--ui-control-bg-active)] focus-visible:shadow-[var(--ui-shadow-focus)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40 data-[disabled]:hover:text-[var(--ui-text)] data-[disabled]:active:bg-transparent" }, {
+                  default: a(() => [
+                    r(t(g), {
+                      class: "size-4 shrink-0 text-[var(--ui-primary)] transition-transform group-data-[state=open]:rotate-180",
+                      "aria-hidden": "true"
+                    }),
+                    d("span", k, b(e.title), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1024),
+            r(t(y), { class: "grid text-[length:var(--ui-font-size-control)] text-[var(--ui-text-secondary)] data-[state=closed]:animate-[ui-collapse-up_var(--ui-motion-slow)_var(--ui-motion-ease-in-out)] data-[state=open]:animate-[ui-collapse-down_var(--ui-motion-slow)_var(--ui-motion-ease-in-out)]" }, {
+              default: a(() => [
+                d("div", C, [
+                  d("div", z, [
+                    h(o.$slots, `item-${e.value}`, { item: e })
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          _: 2
+        }, 1032, ["value", "disabled"]))), 128))
+      ]),
+      _: 3
+    }, 8, ["model-value"]));
+  }
+});
+export {
+  H as default
+};

package/dist/modules/components/primitives/accordion/Accordion2.vue.js

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

package/dist/modules/components/primitives/affix/Affix.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as b, ref as u, onMounted as B, onBeforeUnmount as E, watch as v, computed as m, openBlock as S, createElementBlock as z, normalizeStyle as h, createElementVNode as R, normalizeClass as L, renderSlot as $ } from "vue";
+import { computeAffix as k } from "./affixPosition.js";
+const _ = /* @__PURE__ */ b({
+  __name: "Affix",
+  props: {
+    target: {},
+    scrollContainers: {},
+    offsetTop: { default: 0 },
+    offsetBottom: { default: 0 },
+    fix: { default: "top" },
+    innerClass: {},
+    innerStyle: {}
+  },
+  setup(d) {
+    const t = d, l = u(null), p = u(null), i = u({ affixed: !1, top: 0, left: 0, width: 0, height: 0 });
+    let f = null;
+    const s = /* @__PURE__ */ new Set();
+    function x(e) {
+      return { top: e.top, bottom: e.bottom };
+    }
+    function w() {
+      if (!t.target) return { top: 0, bottom: typeof window > "u" ? 0 : window.innerHeight };
+      const e = t.target();
+      return e ? x(e.getBoundingClientRect()) : null;
+    }
+    function n() {
+      const e = l.value, r = p.value, o = w();
+      if (!e || !r || !o) {
+        i.value = { affixed: !1, top: 0, left: 0, width: 0, height: 0 };
+        return;
+      }
+      const a = e.getBoundingClientRect(), C = r.getBoundingClientRect().height;
+      i.value = k(
+        {
+          container: o,
+          element: { top: a.top, bottom: a.top + C, left: a.left, width: a.width }
+        },
+        { fix: t.fix, offsetTop: t.offsetTop, offsetBottom: t.offsetBottom }
+      );
+    }
+    function c(e) {
+      const r = new Set(e ?? []);
+      for (const o of s) r.has(o) || o.removeEventListener("scroll", n);
+      for (const o of r) s.has(o) || o.addEventListener("scroll", n, { passive: !0 });
+      s.clear();
+      for (const o of r) s.add(o);
+    }
+    B(() => {
+      window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), c(t.scrollContainers), typeof ResizeObserver < "u" && l.value && (f = new ResizeObserver(n), f.observe(l.value)), n();
+    }), E(() => {
+      window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n), c([]), f?.disconnect(), f = null;
+    }), v(() => t.scrollContainers, c), v([() => t.target, () => t.fix, () => t.offsetTop, () => t.offsetBottom], n);
+    const g = m(
+      () => i.value.affixed ? { height: `${i.value.height}px` } : void 0
+    ), y = m(
+      () => i.value.affixed ? {
+        position: "fixed",
+        top: `${i.value.top}px`,
+        left: `${i.value.left}px`,
+        width: `${i.value.width}px`,
+        zIndex: "var(--ui-affix-z-index, 1)"
+      } : void 0
+    );
+    return (e, r) => (S(), z("div", {
+      ref_key: "root",
+      ref: l,
+      "data-affix": "",
+      style: h(g.value)
+    }, [
+      R("div", {
+        ref_key: "inner",
+        ref: p,
+        "data-affix-inner": "",
+        class: L(d.innerClass),
+        style: h([d.innerStyle, y.value])
+      }, [
+        $(e.$slots, "default")
+      ], 6)
+    ], 4));
+  }
+});
+export {
+  _ as default
+};

package/dist/modules/components/primitives/affix/Affix2.vue.js

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

package/dist/modules/components/primitives/affix/affixPosition.js

@@ -0,0 +1,12 @@
+function i(a, e) {
+  const { container: f, element: o } = a, n = o.bottom - o.top, t = { affixed: !1, top: o.top, left: o.left, width: o.width, height: n };
+  if (e.fix === "bottom") {
+    const m = f.bottom - e.offsetBottom;
+    return o.bottom <= m || (t.affixed = !0, t.top = Math.max(f.top + e.offsetTop, m - n)), t;
+  }
+  const r = f.top + e.offsetTop;
+  return o.top >= r || (t.affixed = !0, t.top = Math.min(r, f.bottom - e.offsetBottom - n)), t;
+}
+export {
+  i as computeAffix
+};