@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/primitives/avatar/AvatarStack.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent as g, computed as l, openBlock as t, createElementBlock as c, Fragment as h, renderList as k, createBlock as m, withCtx as o, createElementVNode as u, normalizeClass as d, createVNode as z, toDisplayString as _, createCommentVNode as b } from "vue";
+import y from "../../composite/comment-item/PersonInitials.vue.js";
+import f from "../tooltip/Tooltip.vue.js";
+const C = ["aria-label"], v = "rounded-full ring-2 ring-[var(--ui-avatar-ring,var(--ui-surface))]", w = /* @__PURE__ */ g({
+  __name: "AvatarStack",
+  props: {
+    people: {},
+    max: { default: 3 },
+    label: { default: void 0 },
+    size: { default: "sm" }
+  },
+  setup(n) {
+    const a = n, s = l(() => a.people.slice(0, Math.max(1, a.max))), i = l(() => a.people.slice(s.value.length)), p = l(() => a.label ?? a.people.map((r) => r.name).join(", "));
+    return (r, N) => (t(), c("span", {
+      role: "img",
+      "aria-label": p.value,
+      class: "inline-flex shrink-0 items-center",
+      "data-ui-avatar-stack": ""
+    }, [
+      (t(!0), c(h, null, k(s.value, (e, x) => (t(), m(f, {
+        key: e.id ?? e.name,
+        content: e.name
+      }, {
+        default: o(() => [
+          u("span", {
+            class: d(["inline-flex", v, x > 0 && "-ml-2"]),
+            "data-ui-avatar-stack-item": ""
+          }, [
+            z(y, {
+              name: e.name,
+              id: e.id,
+              src: e.src,
+              initials: e.initials,
+              size: n.size
+            }, null, 8, ["name", "id", "src", "initials", "size"])
+          ], 2)
+        ]),
+        _: 2
+      }, 1032, ["content"]))), 128)),
+      i.value.length ? (t(), m(f, {
+        key: 0,
+        content: i.value.map((e) => e.name).join(", ")
+      }, {
+        default: o(() => [
+          u("span", {
+            class: d(["inline-flex shrink-0 items-center justify-center bg-[var(--ui-surface-subtle)] font-semibold leading-none text-[var(--ui-text-secondary)]", v, n.size === "sm" ? "-ml-2 size-6 text-[length:var(--ui-font-size-xs)]" : "-ml-2 size-8 text-[length:var(--ui-font-size-sm)]"]),
+            "aria-hidden": "true",
+            "data-ui-avatar-stack-more": ""
+          }, "+" + _(i.value.length), 3)
+        ]),
+        _: 1
+      }, 8, ["content"])) : b("", !0)
+    ], 8, C));
+  }
+});
+export {
+  w as default
+};

package/dist/modules/components/primitives/avatar/AvatarStack2.vue.js

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

package/dist/modules/components/primitives/badge/Badge.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent as u, computed as s, openBlock as n, createElementBlock as a, normalizeClass as i, createCommentVNode as l, renderSlot as d } from "vue";
+const c = {
+  key: 0,
+  "data-ui-badge-dot": "",
+  class: "size-1.5 shrink-0 rounded-full bg-current",
+  "aria-hidden": "true"
+}, m = /* @__PURE__ */ u({
+  __name: "Badge",
+  props: {
+    tone: { default: "neutral" },
+    dot: { type: Boolean, default: void 0 }
+  },
+  setup(e) {
+    const t = e, o = s(() => t.dot ?? t.tone !== "neutral");
+    return (r, f) => (n(), a("span", {
+      class: i([
+        "inline-flex min-h-5 items-center gap-1 rounded-full px-2 py-0.5 text-[length:var(--ui-font-size-sm)] font-normal leading-4 tabular-nums",
+        e.tone === "neutral" && "bg-[var(--ui-neutral-soft)] text-[var(--ui-neutral-text)]",
+        e.tone === "info" && "bg-[var(--ui-info-soft)] text-[var(--ui-info-text)]",
+        e.tone === "success" && "bg-[var(--ui-success-soft)] text-[var(--ui-success-text)]",
+        e.tone === "warning" && "bg-[var(--ui-warning-soft)] text-[var(--ui-warning-text)]",
+        e.tone === "danger" && "bg-[var(--ui-danger-soft)] text-[var(--ui-danger-text)]"
+      ]),
+      "data-syno-pkg-land-ui": ""
+    }, [
+      o.value ? (n(), a("span", c)) : l("", !0),
+      d(r.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  m as default
+};

package/dist/modules/components/primitives/badge/Badge2.vue.js

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

package/dist/modules/components/primitives/breadcrumb/Breadcrumb.vue.js

@@ -0,0 +1,261 @@
+import { defineComponent as ne, useSlots as oe, computed as m, ref as d, onMounted as ae, nextTick as P, onBeforeUnmount as re, watch as se, openBlock as o, createElementBlock as l, unref as e, createElementVNode as c, createVNode as a, withCtx as u, mergeProps as W, Fragment as f, renderList as b, createBlock as v, createTextVNode as N, toDisplayString as $, createCommentVNode as z, renderSlot as le } from "vue";
+import { useFloating as ue, FLOATING_SIZE_CLASS as V } from "../popover/floating.js";
+import { skipAutoFocusOnTouch as H } from "../popover/overlay.js";
+import { useLocalizedDefaults as de } from "../../../i18n/text.js";
+import { ChevronRight as k, Ellipsis as U } from "@lucide/vue";
+import { DropdownMenuRoot_default as j } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuRoot.js";
+import { DropdownMenuContent_default as K } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuContent.js";
+import { DropdownMenuItem_default as G } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuItem.js";
+import { DropdownMenuPortal_default as Z } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuPortal.js";
+import { DropdownMenuSeparator_default as ce } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuSeparator.js";
+import { DropdownMenuTrigger_default as q } from "../../../vendor/reka-ui/dist/DropdownMenu/DropdownMenuTrigger.js";
+import g from "./BreadcrumbCrumb.vue.js";
+import { resolveBreadcrumbCollapse as me } from "./collapse.js";
+import { isActionDivider as pe } from "./types.js";
+const fe = {
+  key: 0,
+  class: "-m-1 flex min-w-0 flex-nowrap items-center overflow-hidden p-1"
+}, ve = { class: "flex min-w-0 items-center" }, he = {
+  key: 0,
+  class: "flex min-w-0 shrink-0 items-center"
+}, we = ["aria-label", "title"], _e = {
+  "aria-hidden": "true",
+  class: "pointer-events-none absolute inset-x-0 top-0 h-0 overflow-hidden"
+}, xe = {
+  key: 0,
+  class: "flex items-center"
+}, ye = { class: "flex items-center" }, be = { class: "flex items-center" }, ke = 18, ge = 28, Ne = /* @__PURE__ */ ne({
+  __name: "Breadcrumb",
+  props: {
+    items: { default: () => [] },
+    actionMenuItems: { type: [Boolean, Array], default: !1 },
+    collapsedLabel: {}
+  },
+  emits: ["clickItem"],
+  setup(J, { emit: Q }) {
+    const i = de(J, { collapsedLabel: "Show full path" }), X = Q, Y = oe(), O = m(() => (Array.isArray(i.actionMenuItems) ? i.actionMenuItems : []).map((r) => pe(r) ? { kind: "divider" } : { kind: "action", item: r })), B = m(() => O.value.some((n) => n.kind === "action") || !!Y["action-menu-dropdown"]), h = m(() => i.items.length - 1), D = { visibleTailCount: 0, hiddenCount: 0 }, w = d(), A = d(!1), I = d(!1), E = ue(() => w.value, () => A.value || I.value), C = d(), F = d([]), T = d(), R = d(), S = d(D);
+    function ee(n, r) {
+      n instanceof HTMLElement && (F.value[r] = n);
+    }
+    function L(n) {
+      return n?.getBoundingClientRect().width ?? 0;
+    }
+    function _() {
+      const n = w.value;
+      if (!n || i.items.length === 0) {
+        S.value = D;
+        return;
+      }
+      S.value = me({
+        containerWidth: n.clientWidth,
+        itemWidths: i.items.map((r, t) => L(F.value[t])),
+        separatorWidth: L(R.value) || ke,
+        ellipsisWidth: L(T.value) || ge
+      });
+    }
+    let x;
+    ae(() => {
+      _(), P(_), !(typeof ResizeObserver > "u") && (x = new ResizeObserver(_), x.observe(w.value), C.value && x.observe(C.value));
+    }), re(() => x?.disconnect()), se(() => i.items, () => {
+      P(_);
+    }, { deep: !0 });
+    const y = m(() => Math.min(S.value.hiddenCount, Math.max(0, i.items.length - 2))), te = m(() => i.items.slice(1, 1 + y.value)), ie = m(
+      () => i.items.slice(1 + y.value).map((n, r) => ({ item: n, index: y.value + r + 1 }))
+    );
+    function p(n) {
+      X("clickItem", n);
+    }
+    return (n, r) => (o(), l("div", {
+      ref_key: "rootEl",
+      ref: w,
+      class: "relative w-full min-w-0",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      e(i).items.length ? (o(), l("ol", fe, [
+        c("li", ve, [
+          a(g, {
+            display: e(i).items[0].display,
+            current: h.value === 0,
+            onClick: r[0] || (r[0] = (t) => p(e(i).items[0]))
+          }, null, 8, ["display", "current"])
+        ]),
+        y.value > 0 ? (o(), l("li", he, [
+          a(e(k), {
+            class: "mx-1 size-3 shrink-0 text-[var(--ui-text-muted)]",
+            "aria-hidden": "true"
+          }),
+          a(e(j), {
+            open: A.value,
+            "onUpdate:open": r[1] || (r[1] = (t) => A.value = t)
+          }, {
+            default: u(() => [
+              a(e(q), { "as-child": "" }, {
+                default: u(() => [
+                  c("button", {
+                    type: "button",
+                    "aria-label": e(i).collapsedLabel,
+                    title: e(i).collapsedLabel,
+                    class: "inline-flex size-6 items-center justify-center [@media(pointer:coarse)]:size-[var(--ui-hit-min)] rounded-[var(--ui-radius-inner)] text-[var(--ui-text-secondary)] 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)] focus-visible:shadow-[var(--ui-shadow-focus)]"
+                  }, [
+                    a(e(U), {
+                      class: "size-3.5",
+                      "aria-hidden": "true"
+                    })
+                  ], 8, we)
+                ]),
+                _: 1
+              }),
+              a(e(Z), null, {
+                default: u(() => [
+                  a(e(K), W({ "data-ui-popup": "" }, e(E), {
+                    class: [e(V), "z-[1450] min-w-[min(11rem,var(--reka-popper-available-width))] overflow-y-auto [overflow-wrap:anywhere] rounded-[var(--ui-radius-popover)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)] outline-none"],
+                    onOpenAutoFocus: e(H),
+                    align: "start",
+                    "side-offset": 4,
+                    "data-syno-pkg-land-ui": ""
+                  }), {
+                    default: u(() => [
+                      (o(!0), l(f, null, b(te.value, (t) => (o(), v(e(G), {
+                        key: t.id,
+                        class: "flex min-h-[var(--ui-menu-row-height)] cursor-pointer select-none items-center rounded-[var(--ui-radius-inner)] px-2 text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-primary-soft)]",
+                        onSelect: (s) => p(t)
+                      }, {
+                        default: u(() => [
+                          N($(t.display), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["onSelect"]))), 128))
+                    ]),
+                    _: 1
+                  }, 16, ["class", "onOpenAutoFocus"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["open"])
+        ])) : z("", !0),
+        (o(!0), l(f, null, b(ie.value, (t) => (o(), l("li", {
+          key: t.item.id,
+          class: "flex min-w-0 items-center"
+        }, [
+          a(e(k), {
+            class: "mx-1 size-3 shrink-0 text-[var(--ui-text-muted)]",
+            "aria-hidden": "true"
+          }),
+          t.index === h.value && B.value ? (o(), v(e(j), {
+            key: 0,
+            open: I.value,
+            "onUpdate:open": r[2] || (r[2] = (s) => I.value = s)
+          }, {
+            default: u(() => [
+              a(e(q), { "as-child": "" }, {
+                default: u(() => [
+                  a(g, {
+                    display: t.item.display,
+                    current: "",
+                    "has-menu": ""
+                  }, null, 8, ["display"])
+                ]),
+                _: 2
+              }, 1024),
+              a(e(Z), null, {
+                default: u(() => [
+                  a(e(K), W({ "data-ui-popup": "" }, { ref_for: !0 }, e(E), {
+                    class: [e(V), "z-[1450] min-w-[min(11rem,var(--reka-popper-available-width))] overflow-y-auto [overflow-wrap:anywhere] rounded-[var(--ui-radius-popover)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)] outline-none"],
+                    onOpenAutoFocus: e(H),
+                    align: "end",
+                    "side-offset": 4,
+                    "data-syno-pkg-land-ui": ""
+                  }), {
+                    default: u(() => [
+                      le(n.$slots, "action-menu-dropdown", {
+                        items: Array.isArray(e(i).actionMenuItems) ? e(i).actionMenuItems : [],
+                        select: p
+                      }, () => [
+                        (o(!0), l(f, null, b(O.value, (s, M) => (o(), l(f, { key: M }, [
+                          s.kind === "divider" ? (o(), v(e(ce), {
+                            key: 0,
+                            class: "my-1 h-[var(--ui-hairline)] bg-[var(--ui-border-subtle)]"
+                          })) : (o(), v(e(G), {
+                            key: 1,
+                            class: "flex min-h-[var(--ui-menu-row-height)] cursor-pointer select-none items-center rounded-[var(--ui-radius-inner)] px-2 text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-primary-soft)]",
+                            onSelect: (Ie) => p(s.item)
+                          }, {
+                            default: u(() => [
+                              N($(s.item.display), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["onSelect"]))
+                        ], 64))), 128))
+                      ])
+                    ]),
+                    _: 3
+                  }, 16, ["class", "onOpenAutoFocus"])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 2
+          }, 1032, ["open"])) : (o(), v(g, {
+            key: 1,
+            display: t.item.display,
+            current: t.index === h.value,
+            onClick: (s) => p(t.item)
+          }, null, 8, ["display", "current", "onClick"]))
+        ]))), 128))
+      ])) : z("", !0),
+      c("div", _e, [
+        c("ol", {
+          ref_key: "measureRow",
+          ref: C,
+          "aria-hidden": "true",
+          class: "invisible absolute top-0 left-0 flex flex-nowrap items-center"
+        }, [
+          (o(!0), l(f, null, b(e(i).items, (t, s) => (o(), l("li", {
+            key: t.id,
+            ref_for: !0,
+            ref: (M) => ee(M, s),
+            class: "flex min-w-0 items-center"
+          }, [
+            s > 0 ? (o(), l("span", xe, [
+              a(e(k), { class: "mx-1 size-3 shrink-0" })
+            ])) : z("", !0),
+            a(g, {
+              display: t.display,
+              "has-menu": s === h.value && B.value,
+              tabindex: "-1"
+            }, null, 8, ["display", "has-menu"])
+          ]))), 128)),
+          c("li", ye, [
+            c("span", {
+              ref_key: "measureSeparator",
+              ref: R,
+              "data-measure-separator": "",
+              class: "flex items-center"
+            }, [
+              a(e(k), { class: "mx-1 size-3 shrink-0" })
+            ], 512)
+          ]),
+          c("li", be, [
+            c("button", {
+              ref_key: "measureEllipsis",
+              ref: T,
+              type: "button",
+              tabindex: "-1",
+              class: "inline-flex size-6 items-center justify-center"
+            }, [
+              a(e(U), {
+                class: "size-3.5",
+                "aria-hidden": "true"
+              })
+            ], 512)
+          ])
+        ], 512)
+      ])
+    ], 512));
+  }
+});
+export {
+  Ne as default
+};

package/dist/modules/components/primitives/breadcrumb/Breadcrumb2.vue.js

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

package/dist/modules/components/primitives/breadcrumb/BreadcrumbCrumb.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent as c, openBlock as t, createElementBlock as i, createElementVNode as n, toDisplayString as r, createBlock as l, unref as m, createCommentVNode as d } from "vue";
+import { ChevronDown as f } from "@lucide/vue";
+const v = ["title"], x = { class: "truncate" }, h = ["aria-current", "title"], p = { class: "truncate" }, w = /* @__PURE__ */ c({
+  __name: "BreadcrumbCrumb",
+  props: {
+    display: {},
+    current: { type: Boolean, default: !1 },
+    hasMenu: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(e, { emit: s }) {
+    const u = s;
+    return (y, a) => e.current && !e.hasMenu ? (t(), i("span", {
+      key: 0,
+      "aria-current": "page",
+      title: e.display,
+      class: "inline-flex max-w-[var(--ui-breadcrumb-item-max-width,180px)] min-w-0 items-center truncate px-2 py-0.5 text-[length:var(--ui-font-size)] font-medium text-[var(--ui-text)]"
+    }, [
+      n("span", x, r(e.display), 1)
+    ], 8, v)) : (t(), i("button", {
+      key: 1,
+      type: "button",
+      "aria-current": e.current ? "page" : void 0,
+      title: e.display,
+      onClick: a[0] || (a[0] = (o) => u("click", o)),
+      class: "inline-flex max-w-[var(--ui-breadcrumb-item-max-width,180px)] min-w-0 items-center gap-1 truncate [@media(pointer:coarse)]:min-h-[var(--ui-hit-min)] rounded-[var(--ui-radius-inner)] px-2 py-0.5 text-[length:var(--ui-font-size)] font-medium text-[var(--ui-text)] outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] hover:bg-[var(--ui-surface-hover)] active:bg-[var(--ui-surface-selected)] focus-visible:shadow-[var(--ui-shadow-focus)]"
+    }, [
+      n("span", p, r(e.display), 1),
+      e.hasMenu ? (t(), l(m(f), {
+        key: 0,
+        class: "size-3 shrink-0 text-[var(--ui-text-muted)]",
+        "aria-hidden": "true"
+      })) : d("", !0)
+    ], 8, h));
+  }
+});
+export {
+  w as default
+};

package/dist/modules/components/primitives/breadcrumb/BreadcrumbCrumb2.vue.js

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

package/dist/modules/components/primitives/breadcrumb/collapse.js

@@ -0,0 +1,15 @@
+const s = (o) => ({ visibleTailCount: o, hiddenCount: 0 });
+function a(o) {
+  const { containerWidth: d, itemWidths: e, separatorWidth: l, ellipsisWidth: u } = o, t = e.length;
+  if (t <= 2 || d <= 0 || e.some((i) => i <= 0) || e.reduce((i, c) => i + c, 0) + l * (t - 1) <= d) return s(t);
+  let n = 1, r = e[0] + l + u + l + e[t - 1];
+  for (; n < t - 1; ) {
+    const i = r + l + e[t - 1 - n];
+    if (i > d) break;
+    r = i, n += 1;
+  }
+  return { visibleTailCount: n, hiddenCount: t - 1 - n };
+}
+export {
+  a as resolveBreadcrumbCollapse
+};

package/dist/modules/components/primitives/breadcrumb/types.js

@@ -0,0 +1,6 @@
+function e(i) {
+  return i === "-" || typeof i == "object" && "type" in i && i.type === "menu-divider";
+}
+export {
+  e as isActionDivider
+};

package/dist/modules/components/primitives/button/Button.vue.js

@@ -0,0 +1,94 @@
+import { defineComponent as I, computed as m, ref as o, onMounted as O, onUpdated as A, openBlock as g, createElementBlock as k, unref as t, normalizeClass as E, createVNode as L, createCommentVNode as C, createElementVNode as V, renderSlot as j, createBlock as G } from "vue";
+import { ChevronRight as M } from "@lucide/vue";
+import P from "../spinner/Spinner.vue.js";
+import { cn as S } from "../../../lib/cn.js";
+import { usePendingClick as $ } from "../../../composables/pendingClick.js";
+import { useButtonKind as K } from "../../../composables/buttonKind.js";
+import { useGroupDisabled as R } from "../../../composables/formGroup.js";
+const U = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "data-variant", "aria-busy"], X = {
+  key: 0,
+  class: "inline-flex shrink-0 items-center justify-center"
+}, Z = ["data-icon-only", "data-lead", "data-trail"], aa = /* @__PURE__ */ I({
+  __name: "Button",
+  props: {
+    variant: { default: "secondary" },
+    size: { default: "md" },
+    kind: {},
+    loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    chevron: { type: Boolean, default: !1 },
+    type: { default: "button" },
+    onClick: {}
+  },
+  setup(n) {
+    const a = n, p = R(() => a.disabled), { pending: N, onClick: h } = $(() => a.onClick), d = m(() => a.loading || N.value), B = {
+      sm: "min-h-[var(--ui-button-sm,var(--ui-control-sm))] py-[max(0px,calc((var(--ui-button-sm,var(--ui-control-sm))_-_2px_-_1lh)_/_2))] px-2",
+      md: "min-h-[var(--ui-button-md,var(--ui-control-md))] py-[max(0px,calc((var(--ui-button-md,var(--ui-control-md))_-_2px_-_1lh)_/_2))] px-3",
+      lg: "min-h-[var(--ui-button-lg,var(--ui-control-lg))] py-[max(0px,calc((var(--ui-button-lg,var(--ui-control-lg))_-_2px_-_1lh)_/_2))] px-4"
+    }, f = o(null), T = o(null), u = o(!1), l = o(!1), s = o(!1), c = (r) => r instanceof Element && (r.localName === "svg" || r.hasAttribute("data-icon"));
+    function x() {
+      const r = f.value, e = r ? [...r.childNodes].filter((b) => b.nodeType === Node.ELEMENT_NODE || b.nodeType === Node.TEXT_NODE && b.textContent?.trim()) : [], i = !!r?.textContent?.trim(), y = !!r && !i && e.some(c), _ = i && e.length > 1 && c(e[0]), w = i && e.length > 1 && c(e[e.length - 1]);
+      y !== u.value && (u.value = y), _ !== l.value && (l.value = _), w !== s.value && (s.value = w);
+    }
+    O(x), A(x);
+    const z = m(() => a.variant === "primary" || a.variant === "danger"), v = K(() => a.kind), D = m(
+      () => S(
+        "relative inline-flex max-w-full shrink-0 select-none items-center justify-center gap-2 border text-[length:var(--ui-font-size)] font-normal outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] disabled:pointer-events-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+        a.variant === "text" ? "px-1 py-0.5" : B[a.size],
+        (v.value === "tool" || a.variant === "text") && "rounded-[var(--ui-radius-control)]",
+        v.value === "action" && a.variant !== "text" && "rounded-[var(--ui-radius-pill)]",
+        v.value === "action" && a.variant !== "text" && (z.value ? "min-w-[var(--ui-action-min-width-primary)]" : "min-w-[var(--ui-action-min-width)]"),
+        a.variant === "primary" && "border-[var(--ui-primary)] bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-primary-foreground)] hover:border-[var(--ui-primary-hover)] hover:bg-[var(--ui-primary-hover)] active:border-[var(--ui-primary-active)] active:bg-[var(--ui-primary-active)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:shadow-none data-[disabled]:border-[color-mix(in_srgb,var(--ui-primary)_30%,var(--ui-surface))] data-[disabled]:bg-[color-mix(in_srgb,var(--ui-primary)_12%,var(--ui-surface))] data-[disabled]:text-[color-mix(in_srgb,var(--ui-primary)_55%,var(--ui-text))]",
+        a.variant === "secondary" && "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--ui-text)] shadow-[var(--ui-shadow-control)] hover:border-[var(--ui-control-border-hover)] hover:bg-[var(--ui-control-bg-hover)] active:border-[var(--ui-control-border-active)] active:bg-[var(--ui-control-bg-active)] active:shadow-[var(--ui-shadow-control-active)] focus-visible:border-[var(--ui-primary)] data-[disabled]:border-[var(--ui-control-border)] data-[disabled]:bg-[var(--ui-control-bg-disabled)] data-[disabled]:text-[var(--ui-text-disabled)] data-[disabled]:shadow-none",
+        a.variant === "ghost" && "border-transparent bg-transparent text-[var(--ui-text)] hover:bg-[var(--ui-state-hover)] active:bg-[var(--ui-state-pressed)] data-[state=open]:bg-[var(--ui-control-bg-active)] data-[disabled]:text-[var(--ui-text-disabled)]",
+        // An inline secondary action in a line of text (Change, Edit, Show all): the
+        // primary colour's text with no frame or fill, as iOS's plain tinted button
+        // and Material's text button draw it. A press dims it; the tap box stays 44
+        // on touch (data-ui-hit) while it is drawn its text's size.
+        a.variant === "text" && "border-transparent bg-transparent font-medium text-[var(--ui-primary)] [--ui-spin-color:var(--ui-primary)] hover:text-[var(--ui-primary-hover)] active:opacity-50 data-[disabled]:text-[var(--ui-text-disabled)]",
+        a.variant === "danger" && "border-[var(--ui-danger)] bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-danger-foreground)] hover:border-[var(--ui-danger-hover)] hover:bg-[var(--ui-danger-hover)] active:border-[var(--ui-danger-active)] active:bg-[var(--ui-danger-active)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:shadow-none data-[disabled]:border-[color-mix(in_srgb,var(--ui-danger)_30%,var(--ui-surface))] data-[disabled]:bg-[color-mix(in_srgb,var(--ui-danger)_12%,var(--ui-surface))] data-[disabled]:text-[color-mix(in_srgb,var(--ui-danger)_55%,var(--ui-text))]",
+        // A destructive choice beside the main action (Replace theirs next to Save as copy): the grey control with a red edge and label.
+        a.variant === "danger-outline" && "border-[var(--ui-danger)] bg-[var(--ui-control-bg)] text-[var(--ui-danger-text)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-danger)] hover:border-[var(--ui-danger-hover)] hover:bg-[var(--ui-danger-soft)] active:border-[var(--ui-danger-active)] active:bg-[var(--ui-danger-soft)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:border-[color-mix(in_srgb,var(--ui-danger)_30%,var(--ui-surface))] data-[disabled]:bg-[var(--ui-control-bg-disabled)] data-[disabled]:text-[color-mix(in_srgb,var(--ui-danger)_55%,var(--ui-text))] data-[disabled]:shadow-none"
+      )
+    );
+    return (r, e) => (g(), k("button", {
+      ref_key: "buttonEl",
+      ref: T,
+      type: n.type,
+      class: E(D.value),
+      disabled: t(p) || d.value,
+      "data-disabled": t(p) || void 0,
+      "data-loading": d.value || void 0,
+      "data-kind": t(v),
+      "data-variant": n.variant,
+      "aria-busy": d.value || void 0,
+      "data-ui-hit": "",
+      "data-syno-pkg-land-ui": "",
+      onClick: e[0] || (e[0] = //@ts-ignore
+      (...i) => t(h) && t(h)(...i))
+    }, [
+      d.value ? (g(), k("span", X, [
+        L(P, { size: 16 })
+      ])) : C("", !0),
+      V("span", {
+        ref_key: "labelEl",
+        ref: f,
+        class: E(["ui-button-label min-w-0 whitespace-normal text-center [overflow-wrap:break-word]", l.value && "[&>:first-child]:mr-2", s.value && "[&>:last-child]:ml-2"]),
+        "data-icon-only": u.value || void 0,
+        "data-lead": l.value || void 0,
+        "data-trail": s.value || void 0
+      }, [
+        j(r.$slots, "default")
+      ], 10, Z),
+      n.chevron ? (g(), G(t(M), {
+        key: 1,
+        class: "-ml-1 size-4 shrink-0",
+        "data-ui-button-chevron": "",
+        "aria-hidden": "true"
+      })) : C("", !0)
+    ], 10, U));
+  }
+});
+export {
+  aa as default
+};

package/dist/modules/components/primitives/button/Button2.vue.js

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

package/dist/modules/components/primitives/button/ButtonKindScope.vue.js

@@ -0,0 +1,14 @@
+import { defineComponent as n, renderSlot as e } from "vue";
+import { provideButtonKind as r } from "../../../composables/buttonKind.js";
+const m = /* @__PURE__ */ n({
+  __name: "ButtonKindScope",
+  props: {
+    kind: {}
+  },
+  setup(o) {
+    return r(o.kind), (t, s) => e(t.$slots, "default");
+  }
+});
+export {
+  m as default
+};

package/dist/modules/components/primitives/button/ButtonKindScope2.vue.js

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

package/dist/modules/components/primitives/button/IconButton.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as v, computed as u, openBlock as n, createElementBlock as c, unref as e, normalizeClass as b, createBlock as m, renderSlot as g } from "vue";
+import { cn as p } from "../../../lib/cn.js";
+import h from "../spinner/Spinner.vue.js";
+import { usePendingClick as f } from "../../../composables/pendingClick.js";
+const y = ["aria-label", "title", "disabled", "aria-busy", "data-variant"], w = /* @__PURE__ */ v({
+  __name: "IconButton",
+  props: {
+    label: {},
+    variant: { default: "ghost" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    onClick: {}
+  },
+  setup(a) {
+    const r = a, { pending: o, onClick: i } = f(() => r.onClick), d = u(
+      () => p(
+        "inline-flex shrink-0 items-center justify-center border outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:pointer-events-none",
+        r.size === "sm" && "size-[var(--ui-control-sm)] rounded-[var(--ui-radius-control)]",
+        r.size === "md" && "size-[var(--ui-control-md)] rounded-[var(--ui-radius-control)]",
+        r.size === "lg" && "size-[var(--ui-control-lg)] rounded-[var(--ui-radius-control)]",
+        r.variant === "ghost" && "border-transparent bg-transparent text-[var(--ui-text-secondary)] hover:bg-[var(--ui-state-hover)] hover:text-[var(--ui-text)] active:bg-[var(--ui-state-pressed)] data-[state=open]:bg-[var(--ui-control-bg-active)] disabled:text-[var(--ui-text-disabled)]",
+        r.variant === "secondary" && "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--ui-text-secondary)] shadow-[var(--ui-shadow-control)] hover:border-[var(--ui-control-border-hover)] hover:bg-[var(--ui-control-bg-hover)] hover:text-[var(--ui-text)] active:border-[var(--ui-control-border-active)] active:bg-[var(--ui-control-bg-active)] focus-visible:border-[var(--ui-primary)] disabled:bg-[var(--ui-control-bg-disabled)] disabled:text-[var(--ui-text-disabled)] disabled:shadow-none",
+        r.variant === "primary" && "border-[var(--ui-primary-hover)] bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] hover:border-[var(--ui-primary-active)] hover:bg-[var(--ui-primary-hover)] active:border-[var(--ui-primary-active)] active:bg-[var(--ui-primary-active)] disabled:opacity-40"
+      )
+    );
+    return (s, t) => (n(), c("button", {
+      type: "button",
+      "aria-label": a.label,
+      title: a.label,
+      disabled: a.disabled || e(o),
+      "aria-busy": e(o) || void 0,
+      class: b(d.value),
+      "data-variant": a.variant,
+      "data-ui-hit": "",
+      "data-syno-pkg-land-ui": "",
+      onClick: t[0] || (t[0] = //@ts-ignore
+      (...l) => e(i) && e(i)(...l))
+    }, [
+      e(o) ? (n(), m(h, {
+        key: 0,
+        size: 16
+      })) : g(s.$slots, "default", {}, void 0, void 0, 1)
+    ], 10, y));
+  }
+});
+export {
+  w as default
+};

package/dist/modules/components/primitives/button/IconButton2.vue.js

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