@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/composite/stacked-bar/StackedBar.vue.js

@@ -0,0 +1,94 @@
+import { defineComponent as F, computed as s, openBlock as l, createElementBlock as r, createElementVNode as o, Fragment as v, renderList as w, normalizeStyle as g, createCommentVNode as f, toDisplayString as c } from "vue";
+import { formatFileSize as L } from "../../../lib/fileSize.js";
+import { useUiText as S } from "../../../i18n/text.js";
+import { useUiLocale as B } from "../../../i18n/locale.js";
+const N = ["aria-label"], E = {
+  class: "flex h-1.5 overflow-hidden rounded-[var(--ui-radius-pill)] bg-[var(--ui-stacked-bar-track,var(--ui-gray-a3))]",
+  "aria-hidden": "true",
+  "data-ui-stacked-bar-track": ""
+}, T = ["data-key", "data-tone"], C = {
+  key: 0,
+  class: "m-0 flex min-w-0 list-none flex-wrap gap-x-[var(--ui-space-3)] gap-y-[var(--ui-space-1)] p-0 text-[length:var(--ui-font-size-sm)] leading-4",
+  "aria-hidden": "true",
+  "data-ui-stacked-bar-legend": ""
+}, M = ["data-key"], U = { class: "min-w-0 text-[var(--ui-text-secondary)] [overflow-wrap:anywhere]" }, V = { class: "whitespace-nowrap tabular-nums text-[var(--ui-text)]" }, D = {
+  key: 0,
+  class: "inline-flex min-w-0 items-center gap-2",
+  "data-ui-stacked-bar-remainder": ""
+}, I = { class: "min-w-0 text-[var(--ui-text-secondary)] [overflow-wrap:anywhere]" }, O = { class: "whitespace-nowrap tabular-nums text-[var(--ui-text)]" }, A = /* @__PURE__ */ F({
+  __name: "StackedBar",
+  props: {
+    segments: {},
+    total: { default: void 0 },
+    label: { default: void 0 },
+    remainderLabel: { default: void 0 },
+    legend: { type: Boolean, default: !0 },
+    format: { type: Function, default: (i) => L(i) }
+  },
+  setup(i) {
+    const t = i, p = S(), x = B(() => {
+    }), _ = {
+      primary: "var(--ui-primary)",
+      info: "var(--ui-info)",
+      success: "var(--ui-success)",
+      warning: "var(--ui-warning)",
+      danger: "var(--ui-danger)",
+      neutral: "var(--ui-gray-8)"
+    }, y = (e) => Number.isFinite(e) && e > 0 ? e : 0, u = s(() => t.segments.map((e) => ({
+      key: e.key ?? e.label,
+      label: e.label,
+      value: y(e.value),
+      tone: e.tone ?? "primary",
+      color: e.color ?? _[e.tone ?? "primary"]
+    }))), k = s(() => u.value.reduce((e, n) => e + n.value, 0)), d = s(() => Math.max(t.total != null ? y(t.total) : 0, k.value)), h = s(() => t.total != null ? d.value - k.value : 0), m = s(() => t.remainderLabel ?? p("Free")), b = s(() => t.total != null && m.value !== ""), z = (e) => d.value > 0 ? Math.round(e / d.value * 1e4) / 100 : 0, $ = s(() => {
+      const e = u.value.map((a) => `${a.label} ${t.format(a.value)}`);
+      b.value && e.push(`${m.value} ${t.format(h.value)}`), t.total != null && e.push(p("Total {size}", { size: t.format(d.value) }));
+      const n = new Intl.ListFormat(x.value, { style: "short", type: "unit" }).format(e);
+      return t.label ? `${t.label}: ${n}` : n;
+    });
+    return (e, n) => (l(), r("div", {
+      class: "grid min-w-0 gap-[var(--ui-space-2)]",
+      role: "img",
+      "aria-label": $.value,
+      "data-ui-stacked-bar": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      o("div", E, [
+        (l(!0), r(v, null, w(u.value, (a) => (l(), r(v, {
+          key: a.key
+        }, [
+          a.value > 0 ? (l(), r("span", {
+            key: 0,
+            class: "block h-full shrink-0 border-[var(--ui-surface)] [&:not(:last-child)]:border-e",
+            style: g({ width: `${z(a.value)}%`, minWidth: "2px", background: a.color }),
+            "data-key": a.key,
+            "data-tone": a.tone,
+            "data-ui-stacked-bar-segment": ""
+          }, null, 12, T)) : f("", !0)
+        ], 64))), 128))
+      ]),
+      i.legend ? (l(), r("ul", C, [
+        (l(!0), r(v, null, w(u.value, (a) => (l(), r("li", {
+          key: a.key,
+          class: "inline-flex min-w-0 items-center gap-2",
+          "data-key": a.key
+        }, [
+          o("span", {
+            class: "size-2 shrink-0 rounded-full",
+            style: g({ background: a.color })
+          }, null, 4),
+          o("span", U, c(a.label), 1),
+          o("span", V, c(i.format(a.value)), 1)
+        ], 8, M))), 128)),
+        b.value ? (l(), r("li", D, [
+          n[0] || (n[0] = o("span", { class: "size-2 shrink-0 rounded-full bg-[var(--ui-stacked-bar-track,var(--ui-gray-a3))]" }, null, -1)),
+          o("span", I, c(m.value), 1),
+          o("span", O, c(i.format(h.value)), 1)
+        ])) : f("", !0)
+      ])) : f("", !0)
+    ], 8, N));
+  }
+});
+export {
+  A as default
+};

package/dist/modules/components/composite/stacked-bar/StackedBar2.vue.js

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

package/dist/modules/components/composite/stat-tile/StatTile.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent as x, computed as s, openBlock as n, createBlock as c, resolveDynamicComponent as w, mergeProps as y, withCtx as V, createElementVNode as o, createCommentVNode as d, toDisplayString as i, renderSlot as f, createTextVNode as u, createElementBlock as v, Fragment as _ } from "vue";
+import { injectToggleGroupRootContext as k } from "../../../vendor/reka-ui/dist/ToggleGroup/ToggleGroupRoot.js";
+import { Toggle_default as B } from "../../../vendor/reka-ui/dist/Toggle/Toggle.js";
+import { ToggleGroupItem_default as C } from "../../../vendor/reka-ui/dist/ToggleGroup/ToggleGroupItem.js";
+import T from "../../primitives/status-dot/StatusDot.vue.js";
+const z = {
+  "data-ui-stat-tile-label": "",
+  class: "flex min-w-0 items-center gap-1 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]"
+}, $ = { class: "min-w-0 [overflow-wrap:anywhere]" }, N = {
+  "data-ui-stat-tile-value": "",
+  class: "min-w-0 leading-tight [overflow-wrap:anywhere]"
+}, S = { class: "text-[length:var(--ui-font-size-h1)] font-semibold tabular-nums" }, D = {
+  "data-ui-stat-tile-unit": "",
+  class: "text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, E = {
+  key: 0,
+  "data-ui-stat-tile-note": "",
+  class: "text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)] [overflow-wrap:anywhere]"
+}, R = /* @__PURE__ */ x({
+  __name: "StatTile",
+  props: {
+    label: {},
+    value: { default: void 0 },
+    unit: { default: void 0 },
+    note: { default: void 0 },
+    tone: { default: void 0 },
+    modelValue: { type: Boolean, default: void 0 },
+    filter: { default: void 0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: p }) {
+    const t = e, b = p, l = k(null), r = s(() => l != null || t.modelValue !== void 0), g = s(() => l ? C : r.value ? B : "div"), h = s(() => l ? { value: t.filter, disabled: t.disabled } : r.value ? { modelValue: t.modelValue, disabled: t.disabled, "onUpdate:modelValue": (a) => b("update:modelValue", a) } : {});
+    return (a, m) => (n(), c(w(g.value), y(h.value, {
+      class: [
+        "ui-stat-tile flex min-w-0 flex-col items-stretch gap-[var(--ui-space-1)] rounded-[var(--ui-radius-container)] border border-[var(--ui-border-subtle)] bg-[var(--ui-surface)] p-3 text-start [font:inherit] text-[var(--ui-text)]",
+        r.value && "cursor-pointer outline-none transition-[background-color,border-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] enabled:hover:border-[var(--ui-border-strong)] focus-visible:shadow-[var(--ui-shadow-focus)] data-[state=on]:border-[var(--ui-primary)] data-[state=on]:bg-[var(--ui-primary-soft)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ui-primary)] data-[state=on]:focus-visible:shadow-[inset_0_0_0_1px_var(--ui-primary),var(--ui-shadow-focus)] disabled:cursor-default disabled:opacity-50"
+      ],
+      "data-tone": e.tone,
+      "data-ui-stat-tile": "",
+      "data-syno-pkg-land-ui": ""
+    }), {
+      default: V(() => [
+        o("span", z, [
+          e.tone ? (n(), c(T, {
+            key: 0,
+            tone: e.tone
+          }, null, 8, ["tone"])) : d("", !0),
+          o("span", $, i(e.label), 1)
+        ]),
+        o("span", N, [
+          o("span", S, [
+            f(a.$slots, "default", {}, () => [
+              u(i(e.value), 1)
+            ])
+          ]),
+          e.unit ? (n(), v(_, { key: 0 }, [
+            m[0] || (m[0] = u(i(" "), -1)),
+            o("span", D, i(e.unit), 1)
+          ], 64)) : d("", !0)
+        ]),
+        e.note || a.$slots.note ? (n(), v("span", E, [
+          f(a.$slots, "note", {}, () => [
+            u(i(e.note), 1)
+          ])
+        ])) : d("", !0)
+      ]),
+      _: 3
+    }, 16, ["class", "data-tone"]));
+  }
+});
+export {
+  R as default
+};

package/dist/modules/components/composite/stat-tile/StatTile2.vue.js

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

package/dist/modules/components/composite/stat-tile/StatTileGroup.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as r, computed as u, openBlock as n, createBlock as m, unref as s, withCtx as p, renderSlot as f } from "vue";
+import { ToggleGroupRoot_default as c } from "../../../vendor/reka-ui/dist/ToggleGroup/ToggleGroupRoot.js";
+const b = /* @__PURE__ */ r({
+  __name: "StatTileGroup",
+  props: {
+    modelValue: { default: void 0 },
+    label: { default: "" },
+    type: { default: void 0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: o }) {
+    const l = a, d = o, t = u(() => l.type ?? (Array.isArray(l.modelValue) ? "multiple" : "single"));
+    function i(e) {
+      d("update:modelValue", t.value === "multiple" ? Array.isArray(e) ? e.map(String) : [] : String(e ?? ""));
+    }
+    return (e, g) => (n(), m(s(c), {
+      type: t.value,
+      "model-value": a.modelValue,
+      disabled: a.disabled,
+      "roving-focus": !1,
+      "aria-label": a.label || void 0,
+      class: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,var(--ui-stat-tile-min,10rem)),1fr))] gap-[var(--ui-space-2)]",
+      "data-ui-stat-tile-group": "",
+      "data-syno-pkg-land-ui": "",
+      "onUpdate:modelValue": i
+    }, {
+      default: p(() => [
+        f(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["type", "model-value", "disabled", "aria-label"]));
+  }
+});
+export {
+  b as default
+};

package/dist/modules/components/composite/stat-tile/StatTileGroup2.vue.js

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

package/dist/modules/components/composite/statistic/Statistic.vue.js

@@ -0,0 +1,45 @@
+import { defineComponent as d, openBlock as s, createElementBlock as i, createElementVNode as n, toDisplayString as a, normalizeClass as r, renderSlot as l, createTextVNode as o, createCommentVNode as u } from "vue";
+const c = ["data-size"], m = {
+  "data-ui-statistic-label": "",
+  class: "text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]"
+}, f = {
+  key: 0,
+  "data-ui-statistic-note": "",
+  class: "text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]"
+}, x = /* @__PURE__ */ d({
+  __name: "Statistic",
+  props: {
+    label: {},
+    value: {},
+    note: {},
+    size: { default: "md" }
+  },
+  setup(e) {
+    return (t, v) => (s(), i("div", {
+      class: "flex min-w-0 flex-col gap-[var(--ui-space-1)]",
+      "data-size": e.size,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      n("span", m, a(e.label), 1),
+      n("span", {
+        "data-ui-statistic-value": "",
+        class: r([
+          "break-words font-semibold tabular-nums leading-tight text-[var(--ui-text)] [overflow-wrap:anywhere]",
+          e.size === "lg" ? "text-[length:var(--ui-font-size-display)]" : "text-[length:var(--ui-font-size-h1)]"
+        ])
+      }, [
+        l(t.$slots, "default", {}, () => [
+          o(a(e.value), 1)
+        ])
+      ], 2),
+      e.note || t.$slots.note ? (s(), i("span", f, [
+        l(t.$slots, "note", {}, () => [
+          o(a(e.note), 1)
+        ])
+      ])) : u("", !0)
+    ], 8, c));
+  }
+});
+export {
+  x as default
+};

package/dist/modules/components/composite/statistic/Statistic2.vue.js

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

package/dist/modules/components/composite/step-list/StepList.vue.js

@@ -0,0 +1,76 @@
+import { defineComponent as f, computed as g, openBlock as e, createElementBlock as s, Fragment as d, renderList as v, createElementVNode as l, createBlock as k, unref as _, createTextVNode as i, toDisplayString as c, createCommentVNode as u, renderSlot as h } from "vue";
+import { useUiText as w } from "../../../i18n/text.js";
+import { Check as C, X as x } from "@lucide/vue";
+const $ = {
+  class: "ui-step-list",
+  "data-syno-pkg-land-ui": ""
+}, B = ["data-status", "aria-current"], E = {
+  class: "ui-step-marker",
+  "data-step-marker": "",
+  "aria-hidden": "true"
+}, N = { class: "min-w-0 flex-1" }, S = { class: "font-semibold text-[var(--ui-text)]" }, V = {
+  key: 0,
+  class: "sr-only"
+}, b = {
+  key: 0,
+  class: "text-[var(--ui-text-secondary)]"
+}, z = {
+  key: 0,
+  class: "shrink-0"
+}, O = /* @__PURE__ */ f({
+  __name: "StepList",
+  props: {
+    items: {},
+    text: {}
+  },
+  setup(p) {
+    const y = p, n = w(), m = g(() => ({ done: n("Completed"), current: n("Current step"), error: n("Error"), warning: n("Warning"), ...y.text })), r = (o) => o.status ?? "pending";
+    return (o, L) => (e(), s("ol", $, [
+      (e(!0), s(d, null, v(p.items, (t, a) => (e(), s("li", {
+        key: a,
+        class: "ui-step",
+        "data-status": r(t),
+        "aria-current": r(t) === "current" ? "step" : void 0
+      }, [
+        l("span", E, [
+          r(t) === "done" ? (e(), k(_(C), {
+            key: 0,
+            class: "size-3.5",
+            "stroke-width": 3
+          })) : r(t) === "error" ? (e(), k(_(x), {
+            key: 1,
+            class: "size-3.5",
+            "stroke-width": 3
+          })) : r(t) === "warning" ? (e(), s(d, { key: 2 }, [
+            i("!")
+          ], 64)) : (e(), s(d, { key: 3 }, [
+            i(c(a + 1), 1)
+          ], 64))
+        ]),
+        l("div", N, [
+          l("div", S, [
+            i(c(t.title) + " ", 1),
+            r(t) !== "pending" ? (e(), s("span", V, c(m.value[r(t)]), 1)) : u("", !0)
+          ]),
+          t.description || o.$slots.description ? (e(), s("div", b, [
+            h(o.$slots, "description", {
+              item: t,
+              index: a
+            }, () => [
+              i(c(t.description), 1)
+            ])
+          ])) : u("", !0)
+        ]),
+        o.$slots.action ? (e(), s("div", z, [
+          h(o.$slots, "action", {
+            item: t,
+            index: a
+          })
+        ])) : u("", !0)
+      ], 8, B))), 128))
+    ]));
+  }
+});
+export {
+  O as default
+};

package/dist/modules/components/composite/step-list/StepList2.vue.js

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

package/dist/modules/components/composite/storage-meter/StorageMeter.vue.js

@@ -0,0 +1,66 @@
+import { defineComponent as x, computed as t, openBlock as b, createElementBlock as w, unref as y, createElementVNode as e, toDisplayString as l, createTextVNode as g, normalizeStyle as v, normalizeClass as M } from "vue";
+import { formatFileSize as z } from "../../../lib/fileSize.js";
+import { useUiText as L } from "../../../i18n/text.js";
+const F = ["aria-label", "aria-busy"], k = {
+  class: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5",
+  "aria-hidden": "true"
+}, B = { "data-ui-storage-meter-now": "" }, C = { class: "opacity-70" }, N = { class: "whitespace-nowrap tabular-nums" }, S = { "data-ui-storage-meter-after": "" }, T = { class: "opacity-70" }, A = { class: "whitespace-nowrap font-semibold tabular-nums text-[var(--ui-primary)]" }, E = {
+  class: "flex h-1.5 overflow-hidden rounded-[var(--ui-radius-pill)] bg-[color-mix(in_srgb,currentColor_14%,transparent)]",
+  "aria-hidden": "true"
+}, V = ["data-at-least"], j = /* @__PURE__ */ x({
+  __name: "StorageMeter",
+  props: {
+    total: {},
+    free: {},
+    freeing: {},
+    atLeast: { type: Boolean, default: !1 },
+    pending: { type: Boolean, default: !1 },
+    labels: { default: () => ({}) },
+    format: { type: Function, default: (r) => z(r) }
+  },
+  setup(r) {
+    const a = r, s = L(), o = t(() => Math.max(0, a.total)), i = t(() => Math.min(o.value, Math.max(0, a.free))), u = t(() => Math.min(o.value - i.value, Math.max(0, a.freeing))), d = t(() => i.value + u.value), m = (p) => o.value > 0 ? Math.round(p / o.value * 1e4) / 100 : 0, c = t(() => a.format(i.value)), f = t(() => a.atLeast ? s("At least {size}", { size: a.format(d.value) }) : a.format(d.value)), _ = t(() => a.labels.freeNow ?? s("Free now")), h = t(() => a.labels.freeAfter ?? s("Free after"));
+    return (p, n) => (b(), w("div", {
+      class: "grid min-w-0 gap-1 text-[length:var(--ui-font-size-sm,12px)] leading-4 [color:inherit]",
+      role: "img",
+      "aria-label": y(s)("Free now {now}, free after {after}", { now: c.value, after: f.value }),
+      "aria-busy": r.pending ? "true" : void 0,
+      "data-ui-storage-meter": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      e("div", k, [
+        e("span", B, [
+          e("span", C, l(_.value), 1),
+          n[0] || (n[0] = g()),
+          e("span", N, l(c.value), 1)
+        ]),
+        n[2] || (n[2] = e("span", { class: "opacity-70" }, "→", -1)),
+        e("span", S, [
+          e("span", T, l(h.value), 1),
+          n[1] || (n[1] = g()),
+          e("strong", A, l(f.value), 1)
+        ])
+      ]),
+      e("div", E, [
+        e("div", {
+          class: "bg-[color-mix(in_srgb,currentColor_42%,transparent)]",
+          style: v({ width: `${m(o.value - i.value - u.value)}%` }),
+          "data-ui-storage-meter-used": ""
+        }, null, 4),
+        e("div", {
+          class: M([
+            "bg-[repeating-linear-gradient(135deg,var(--ui-primary)_0_3px,color-mix(in_srgb,var(--ui-primary)_55%,transparent)_3px_6px)] transition-[width] duration-[var(--ui-motion-normal)] motion-reduce:transition-none",
+            r.atLeast && "[mask-image:linear-gradient(90deg,#000_70%,rgb(0_0_0/0.45))]",
+            r.pending && "animate-pulse motion-reduce:animate-none"
+          ]),
+          style: v({ width: `${m(u.value)}%` }),
+          "data-at-least": r.atLeast ? "" : void 0,
+          "data-ui-storage-meter-freeing": ""
+        }, null, 14, V)
+      ])
+    ], 8, F));
+  }
+});
+export {
+  j as default
+};

package/dist/modules/components/composite/storage-meter/StorageMeter2.vue.js

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

package/dist/modules/components/composite/summary-card/SummaryCard.vue.js

@@ -0,0 +1,109 @@
+import { defineComponent as g, openBlock as t, createElementBlock as a, normalizeClass as l, createElementVNode as n, toDisplayString as i, createBlock as u, withCtx as x, createTextVNode as h, createCommentVNode as s, createVNode as c, unref as m, Fragment as y, renderList as b, renderSlot as w } from "vue";
+import { ChevronRight as k, CircleAlert as p } from "@lucide/vue";
+import z from "../../primitives/badge/Badge.vue.js";
+import C from "../../primitives/skeleton/SectionSkeleton.vue.js";
+const B = ["disabled", "aria-busy", "data-wide", "data-state"], T = { class: "flex min-w-0 items-center gap-2" }, N = {
+  "data-ui-summary-card-title": "",
+  class: "min-w-0 truncate text-[length:var(--ui-font-size)] leading-5 font-semibold"
+}, $ = {
+  key: 0,
+  "data-ui-summary-card-error": "",
+  class: "flex min-w-0 items-center gap-2 text-[length:var(--ui-font-size)] leading-5 text-[var(--ui-danger-text)]"
+}, E = { class: "min-w-0 [overflow-wrap:anywhere]" }, V = {
+  key: 2,
+  "data-ui-summary-card-figures": "",
+  class: "flex flex-wrap gap-x-[var(--ui-space-6)] gap-y-[var(--ui-space-3)]"
+}, S = { class: "text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]" }, A = {
+  key: 3,
+  "data-ui-summary-card-body": "",
+  class: "block min-w-0"
+}, D = {
+  key: 4,
+  "data-ui-summary-card-note": "",
+  class: "text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)] [overflow-wrap:anywhere]"
+}, R = /* @__PURE__ */ g({
+  __name: "SummaryCard",
+  props: {
+    title: {},
+    state: { default: void 0 },
+    stateTone: { default: "neutral" },
+    figures: { default: () => [] },
+    note: { default: void 0 },
+    loading: { type: Boolean, default: !1 },
+    error: { default: void 0 },
+    wide: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["open"],
+  setup(e) {
+    const f = e, v = {
+      neutral: "text-[var(--ui-text)]",
+      info: "text-[var(--ui-info-text)]",
+      success: "text-[var(--ui-success-text)]",
+      warning: "text-[var(--ui-warning-text)]",
+      danger: "text-[var(--ui-danger-text)]"
+    };
+    return (o, d) => (t(), a("button", {
+      type: "button",
+      disabled: e.disabled,
+      "aria-busy": e.loading || void 0,
+      "data-wide": e.wide || void 0,
+      "data-state": e.error ? "error" : e.loading ? "loading" : "ready",
+      class: l([
+        "group flex min-w-0 flex-col items-stretch gap-[var(--ui-space-3)] rounded-[var(--ui-radius-container)] border border-[var(--ui-border-subtle)] bg-[var(--ui-surface)] p-[var(--ui-space-4)] text-start [font:inherit] text-[var(--ui-text)] outline-none transition-[border-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] enabled:hover:border-[var(--ui-border-strong)] enabled:active:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
+        e.wide && "[grid-column:1/-1]"
+      ]),
+      "data-ui-summary-card": "",
+      "data-syno-pkg-land-ui": "",
+      onClick: d[0] || (d[0] = (r) => o.$emit("open", r))
+    }, [
+      n("span", T, [
+        n("span", N, i(e.title), 1),
+        e.state ? (t(), u(z, {
+          key: 0,
+          tone: f.stateTone,
+          dot: "",
+          "data-ui-summary-card-state": ""
+        }, {
+          default: x(() => [
+            h(i(e.state), 1)
+          ]),
+          _: 1
+        }, 8, ["tone"])) : s("", !0),
+        c(m(k), {
+          class: "ms-auto size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform duration-[var(--ui-motion-fast)] group-enabled:group-hover:translate-x-0.5",
+          "aria-hidden": "true"
+        })
+      ]),
+      e.error ? (t(), a("span", $, [
+        c(m(p), {
+          class: "size-4 shrink-0",
+          "aria-hidden": "true"
+        }),
+        n("span", E, i(e.error), 1)
+      ])) : e.loading ? (t(), u(C, {
+        key: 1,
+        variant: "figures",
+        count: Math.max(e.figures.length, 1)
+      }, null, 8, ["count"])) : e.figures.length ? (t(), a("span", V, [
+        (t(!0), a(y, null, b(e.figures.slice(0, 3), (r) => (t(), a("span", {
+          key: r.label,
+          "data-ui-summary-card-figure": "",
+          class: "flex min-w-0 flex-col"
+        }, [
+          n("span", {
+            class: l(["text-[length:var(--ui-font-size-h2)] leading-6 font-semibold tabular-nums [overflow-wrap:anywhere]", v[r.tone ?? "neutral"]])
+          }, i(r.value), 3),
+          n("span", S, i(r.label), 1)
+        ]))), 128))
+      ])) : s("", !0),
+      o.$slots.default && !e.error && !e.loading ? (t(), a("span", A, [
+        w(o.$slots, "default")
+      ])) : s("", !0),
+      e.note ? (t(), a("span", D, i(e.note), 1)) : s("", !0)
+    ], 10, B));
+  }
+});
+export {
+  R as default
+};

package/dist/modules/components/composite/summary-card/SummaryCard2.vue.js

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

package/dist/modules/components/composite/table-cell/CellStatus.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent as f, useTemplateRef as v, computed as g, openBlock as t, createElementBlock as o, normalizeClass as u, createElementVNode as d, createVNode as p, createBlock as n, withCtx as w, toDisplayString as s, createCommentVNode as i, renderSlot as x, createTextVNode as b } from "vue";
+import y from "../../primitives/tooltip/OverflowTooltip.vue.js";
+import { inOverflowTooltipRegion as h } from "../../../lib/truncation.js";
+import k from "../../primitives/status-dot/StatusDot.vue.js";
+import $ from "../../primitives/tooltip/Tooltip.vue.js";
+import C from "../../primitives/progress/Progress.vue.js";
+const N = {
+  "data-ui-cell-status": "",
+  class: "flex min-w-0 items-center gap-[var(--ui-space-2)] leading-4 text-[var(--ui-text)]"
+}, T = {
+  "data-ui-cell-status-label": "",
+  tabindex: "0",
+  class: "-mx-0.5 min-w-0 truncate rounded-[var(--ui-radius-inner)] px-0.5 outline-none focus-visible:shadow-[var(--ui-shadow-focus)]"
+}, V = {
+  key: 1,
+  "data-ui-cell-status-label": "",
+  class: "min-w-0 truncate"
+}, z = {
+  key: 1,
+  "data-ui-cell-secondary": "",
+  class: "min-w-0 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)] tabular-nums [overflow-wrap:anywhere]"
+}, q = /* @__PURE__ */ f({
+  __name: "CellStatus",
+  props: {
+    label: {},
+    tone: { default: "neutral" },
+    progress: { default: void 0 },
+    detail: {},
+    description: {}
+  },
+  setup(e) {
+    const a = e, m = !h(), r = v("root"), c = g(
+      () => a.progress !== void 0 && a.progress < 100 && a.tone !== "success" && a.tone !== "danger"
+    );
+    return (l, B) => (t(), o("div", {
+      ref_key: "root",
+      ref: r,
+      class: u(["flex min-w-0 flex-col gap-0.5", c.value && !(e.detail || l.$slots.detail) && "relative"]),
+      "data-syno-pkg-land-ui": ""
+    }, [
+      d("span", N, [
+        p(k, { tone: e.tone }, null, 8, ["tone"]),
+        e.description ? (t(), n($, {
+          key: 0,
+          content: e.description
+        }, {
+          default: w(() => [
+            d("span", T, s(e.label), 1)
+          ]),
+          _: 1
+        }, 8, ["content"])) : (t(), o("span", V, s(e.label), 1))
+      ]),
+      c.value ? (t(), n(C, {
+        key: 0,
+        value: e.progress,
+        "aria-label": e.label,
+        size: "sm",
+        class: u(["max-w-40", !(e.detail || l.$slots.detail) && "absolute inset-x-0 top-full mt-0.5"])
+      }, null, 8, ["value", "aria-label", "class"])) : i("", !0),
+      e.detail || l.$slots.detail ? (t(), o("span", z, [
+        x(l.$slots, "detail", {}, () => [
+          b(s(e.detail), 1)
+        ])
+      ])) : i("", !0),
+      m ? (t(), n(y, {
+        key: 2,
+        target: r.value
+      }, null, 8, ["target"])) : i("", !0)
+    ], 2));
+  }
+});
+export {
+  q as default
+};

package/dist/modules/components/composite/table-cell/CellStatus2.vue.js

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