@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/primitives/size-bar/SizeBar.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as b, computed as t, openBlock as u, createElementBlock as n, normalizeStyle as v, createCommentVNode as m } from "vue";
+const p = ["data-tone", "role", "aria-label", "aria-hidden"], g = /* @__PURE__ */ b({
+  __name: "SizeBar",
+  props: {
+    value: {},
+    max: {},
+    part: { default: null },
+    label: { default: void 0 },
+    tone: { default: "primary" }
+  },
+  setup(e) {
+    const a = e, i = (l, r) => r > 0 ? Math.min(100, Math.max(0, l / r * 100)) : 0, o = t(() => a.value != null && a.value > 0 ? i(a.value, a.max) : 0), d = t(() => a.value != null && a.value > 0 && a.part != null && a.part > 0 ? i(a.part, a.value) : 0), s = (l) => Math.round(l * 100) / 100, h = { primary: "var(--ui-primary)", success: "var(--ui-success)", warning: "var(--ui-warning)", danger: "var(--ui-danger)" }, c = t(() => h[a.tone]);
+    return (l, r) => (u(), n("div", {
+      class: "block h-1 w-full overflow-hidden rounded-[var(--ui-radius-pill)] bg-[var(--ui-size-bar-track,var(--ui-gray-a2))]",
+      "data-tone": e.tone,
+      role: e.label ? "img" : void 0,
+      "aria-label": e.label,
+      "aria-hidden": e.label ? void 0 : "true",
+      "data-ui-size-bar": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      o.value > 0 ? (u(), n("div", {
+        key: 0,
+        class: "h-full rounded-[inherit]",
+        style: v({ width: `${s(o.value)}%`, minWidth: "2px", background: `color-mix(in srgb, ${c.value} 24%, var(--ui-surface))` }),
+        "data-ui-size-bar-value": ""
+      }, [
+        d.value > 0 ? (u(), n("div", {
+          key: 0,
+          class: "h-full rounded-[inherit]",
+          style: v({ width: `${s(d.value)}%`, background: c.value }),
+          "data-ui-size-bar-part": ""
+        }, null, 4)) : m("", !0)
+      ], 4)) : m("", !0)
+    ], 8, p));
+  }
+});
+export {
+  g as default
+};

package/dist/modules/components/primitives/size-bar/SizeBar2.vue.js

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

package/dist/modules/components/primitives/skeleton/SectionSkeleton.vue.js

@@ -0,0 +1,171 @@
+import { defineComponent as E, computed as b, openBlock as t, createElementBlock as i, normalizeClass as H, unref as k, createElementVNode as c, toDisplayString as L, Fragment as n, renderList as d, createVNode as r, normalizeStyle as h, createCommentVNode as N, createBlock as S, withCtx as C } from "vue";
+import l from "./Skeleton.vue.js";
+import M from "../../containers/card-grid/CardGrid.vue.js";
+import { useUiText as D } from "../../../i18n/text.js";
+import { useShowAfter as V } from "../../../feedback/showAfter.js";
+import { PENDING_DELAY_MS as W } from "../../../feedback/timing.js";
+const $ = ["data-ui-skeleton", "data-pending"], z = { class: "sr-only" }, F = { class: "flex min-w-0 flex-1 flex-col gap-2" }, G = {
+  key: 0,
+  "data-ui-skeleton-header": "",
+  class: "box-border flex border-b border-[var(--ui-border-subtle)]",
+  style: { height: "var(--ui-grid-header-height)" }
+}, I = { class: "flex w-36 flex-none items-center gap-1 self-start pt-1" }, P = { class: "min-w-0 flex-1 p-0.5" }, J = /* @__PURE__ */ E({
+  __name: "SectionSkeleton",
+  props: {
+    variant: { default: "lines" },
+    lines: { default: 3 },
+    count: { default: 3 },
+    rowHeight: {},
+    columns: { default: 4 },
+    header: { type: Boolean, default: !0 },
+    cardHeight: { default: "180px" },
+    cardMinWidth: { default: "280px" },
+    gap: { default: "var(--ui-space-4)" },
+    fit: { default: "stretch" },
+    delay: { default: W }
+  },
+  setup(e) {
+    const s = e, B = D(), A = V(() => !0, { delay: s.delay }), f = b(() => s.rowHeight ?? (s.variant === "grid" ? "var(--ui-grid-row-height)" : "48px")), g = b(() => typeof s.columns == "number" ? Array.from({ length: Math.max(1, s.columns) }, () => "auto") : s.columns), m = (u) => u === "auto" ? { flex: "1 1 0" } : { flex: `0 0 ${u}`, width: u }, p = ["62%", "45%", "70%", "38%", "55%"], x = (u, y) => p[(u + y) % p.length], w = ["72px", "56px", "88px", "64px"];
+    return (u, y) => (t(), i("div", {
+      role: "status",
+      "aria-busy": "true",
+      "data-ui-skeleton": e.variant,
+      "data-pending": k(A) ? void 0 : "",
+      class: H({
+        "flex flex-wrap gap-x-[var(--ui-space-6)] gap-y-[var(--ui-space-3)] py-1": e.variant === "figures",
+        "flex flex-col": e.variant === "rows" || e.variant === "grid",
+        "flex flex-col gap-6": e.variant === "fields",
+        "flex flex-col gap-3 py-1": e.variant === "lines"
+      })
+    }, [
+      c("span", z, L(k(B)("Loading…")), 1),
+      e.variant === "figures" ? (t(!0), i(n, { key: 0 }, d(e.count, (a) => (t(), i("span", {
+        key: a,
+        "data-ui-skeleton-figure": "",
+        class: "flex flex-col gap-2"
+      }, [
+        r(l, {
+          width: "56px",
+          height: "20px"
+        }),
+        r(l, {
+          width: "72px",
+          height: "12px"
+        })
+      ]))), 128)) : e.variant === "rows" ? (t(!0), i(n, { key: 1 }, d(e.count, (a) => (t(), i("span", {
+        key: a,
+        "data-ui-skeleton-row": "",
+        class: "box-border flex items-center gap-3 border-b border-[var(--ui-border-subtle)] px-3 py-2 last:border-b-0",
+        style: h({ height: f.value })
+      }, [
+        r(l, {
+          width: "28px",
+          height: "28px",
+          radius: "var(--ui-radius-pill)"
+        }),
+        c("span", F, [
+          r(l, {
+            width: a % 2 ? "60%" : "45%",
+            height: "12px"
+          }, null, 8, ["width"]),
+          r(l, {
+            width: a % 2 ? "35%" : "50%",
+            height: "10px"
+          }, null, 8, ["width"])
+        ]),
+        r(l, {
+          width: "48px",
+          height: "18px",
+          radius: "var(--ui-radius-pill)"
+        }),
+        r(l, {
+          width: "40px",
+          height: "10px"
+        })
+      ], 4))), 128)) : e.variant === "grid" ? (t(), i(n, { key: 2 }, [
+        e.header ? (t(), i("span", G, [
+          (t(!0), i(n, null, d(g.value, (a, o) => (t(), i("span", {
+            key: o,
+            class: "flex min-w-0 items-center px-2",
+            style: h(m(a))
+          }, [
+            r(l, {
+              pulse: !1,
+              width: "40%",
+              height: "10px"
+            })
+          ], 4))), 128))
+        ])) : N("", !0),
+        (t(!0), i(n, null, d(e.count, (a) => (t(), i("span", {
+          key: a,
+          "data-ui-skeleton-row": "",
+          class: "box-border flex border-b border-[var(--ui-border-subtle)]",
+          style: h({ height: f.value })
+        }, [
+          (t(!0), i(n, null, d(g.value, (o, v) => (t(), i("span", {
+            key: v,
+            "data-ui-skeleton-cell": "",
+            class: "flex min-w-0 items-center px-2",
+            style: h(m(o))
+          }, [
+            r(l, {
+              pulse: !1,
+              width: x(a, v),
+              height: "10px"
+            }, null, 8, ["width"])
+          ], 4))), 128))
+        ], 4))), 128))
+      ], 64)) : e.variant === "cards" ? (t(), S(M, {
+        key: 3,
+        "min-item-width": e.cardMinWidth,
+        gap: e.gap,
+        fit: e.fit
+      }, {
+        default: C(() => [
+          (t(!0), i(n, null, d(e.count, (a) => (t(), i("span", {
+            key: a,
+            "data-ui-skeleton-card": "",
+            class: "box-border flex flex-col gap-2 overflow-hidden rounded-[var(--ui-radius-container)] border border-[var(--ui-border-subtle)] px-3 py-2",
+            style: h({ height: e.cardHeight })
+          }, [
+            r(l, {
+              width: x(a, 0),
+              height: "14px"
+            }, null, 8, ["width"]),
+            (t(), i(n, null, d(3, (o) => r(l, {
+              key: o,
+              width: x(a, o),
+              height: "10px"
+            }, null, 8, ["width"])), 64))
+          ], 4))), 128))
+        ]),
+        _: 1
+      }, 8, ["min-item-width", "gap", "fit"])) : e.variant === "fields" ? (t(!0), i(n, { key: 4 }, d(e.count, (a) => (t(), i("span", {
+        key: a,
+        "data-ui-skeleton-field": "",
+        class: "flex gap-4"
+      }, [
+        c("span", I, [
+          r(l, {
+            width: "16px",
+            height: "16px"
+          }),
+          r(l, {
+            width: w[(a - 1) % w.length],
+            height: "16px"
+          }, null, 8, ["width"])
+        ]),
+        c("span", P, [
+          r(l, { height: "var(--ui-control-md)" })
+        ])
+      ]))), 128)) : (t(!0), i(n, { key: 5 }, d(e.lines, (a) => (t(), S(l, {
+        key: a,
+        "data-ui-skeleton-line": "",
+        width: a === e.lines && e.lines > 1 ? "60%" : "100%"
+      }, null, 8, ["width"]))), 128))
+    ], 10, $));
+  }
+});
+export {
+  J as default
+};

package/dist/modules/components/primitives/skeleton/SectionSkeleton2.vue.js

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

package/dist/modules/components/primitives/skeleton/Skeleton.vue.js

@@ -0,0 +1,21 @@
+import { defineComponent as t, openBlock as a, createElementBlock as i, normalizeStyle as d } from "vue";
+const n = ["data-static"], s = /* @__PURE__ */ t({
+  __name: "Skeleton",
+  props: {
+    width: { default: "100%" },
+    height: { default: "16px" },
+    radius: { default: "var(--ui-radius-inner)" },
+    pulse: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    return (l, u) => (a(), i("span", {
+      class: "ui-skeleton",
+      "data-static": e.pulse ? void 0 : "",
+      style: d({ width: e.width, height: e.height, borderRadius: e.radius }),
+      "aria-hidden": "true"
+    }, null, 12, n));
+  }
+});
+export {
+  s as default
+};

package/dist/modules/components/primitives/skeleton/Skeleton2.vue.js

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

package/dist/modules/components/primitives/slider/Slider.vue.js

@@ -0,0 +1,173 @@
+import { defineComponent as j, computed as o, ref as w, watch as K, openBlock as i, createElementBlock as u, mergeProps as z, unref as t, renderSlot as p, createCommentVNode as n, createElementVNode as I, normalizeStyle as O, toDisplayString as R, createVNode as c, withCtx as _, normalizeClass as U } from "vue";
+import { useLocalizedDefaults as X } from "../../../i18n/text.js";
+import { useFormControl as q } from "../../../composables/formControl.js";
+import { SliderRoot_default as G } from "../../../vendor/reka-ui/dist/Slider/SliderRoot.js";
+import { SliderRange_default as H } from "../../../vendor/reka-ui/dist/Slider/SliderRange.js";
+import { SliderThumb_default as J } from "../../../vendor/reka-ui/dist/Slider/SliderThumb.js";
+import { SliderTrack_default as Q } from "../../../vendor/reka-ui/dist/Slider/SliderTrack.js";
+import { cn as $ } from "../../../lib/cn.js";
+import { resolveMin as W, resolveMax as Y, resolveStep as Z, normalizeNumber as ee, parseNumberInput as ae, stepNumber as te } from "../../../lib/numberField.js";
+const le = {
+  key: 0,
+  class: "shrink-0 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, re = { class: "relative min-w-0 flex-1" }, oe = {
+  key: 1,
+  class: "mt-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, ie = {
+  key: 1,
+  class: "shrink-0 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, ue = {
+  key: 2,
+  class: "flex w-14 shrink-0 items-center rounded-[var(--ui-radius-control)] border border-[var(--ui-border)] bg-[var(--ui-surface)] focus-within:border-[var(--ui-primary)] focus-within:shadow-[var(--ui-shadow-focus)]"
+}, se = ["id", "value", "name", "placeholder", "disabled", "aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-disabled"], ne = {
+  key: 0,
+  class: "shrink-0 pr-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, ge = /* @__PURE__ */ j({
+  inheritAttrs: !1,
+  __name: "Slider",
+  props: {
+    modelValue: {},
+    min: {},
+    max: {},
+    step: { default: 1 },
+    disabled: { type: Boolean, default: !1 },
+    ariaLabel: {},
+    tip: { type: Boolean, default: void 0 },
+    withInput: { type: [Boolean, Object], default: !1 },
+    patchNum: {}
+  },
+  emits: ["update:modelValue", "input"],
+  setup(N, { emit: B }) {
+    const a = X(N, { ariaLabel: "Slider" }), g = B, d = o(() => W(a.min)), v = o(() => Y(a.max)), L = o(() => Z(a.step)), y = o(() => !!a.withInput), m = o(() => typeof a.withInput == "object" ? a.withInput : {}), A = o(() => a.tip ?? !y.value), f = w(!1), b = o(() => ({
+      min: a.min,
+      max: a.max,
+      step: a.step,
+      patchNum: a.patchNum ? (e) => a.patchNum(e) : void 0
+    })), V = o(() => {
+      const e = v.value - d.value;
+      return e <= 0 ? 0 : Math.min(100, Math.max(0, (a.modelValue - d.value) / e * 100));
+    }), r = w(String(a.modelValue)), h = w(!1);
+    K(
+      () => a.modelValue,
+      (e) => {
+        h.value || (r.value = String(e));
+      }
+    );
+    function x(e) {
+      e !== a.modelValue && (P(e), g("update:modelValue", e), g("input", e));
+    }
+    function C(e) {
+      const l = e?.[0];
+      if (l === void 0) return;
+      const s = ee(l, b.value);
+      s !== !1 && x(s);
+    }
+    function k() {
+      const e = ae(r.value, b.value);
+      e === !1 ? r.value = String(a.modelValue) : (r.value = String(e), x(e));
+    }
+    function S(e) {
+      const l = te(a.modelValue, e, b.value);
+      l !== !1 && (r.value = String(l), x(l));
+    }
+    function D(e) {
+      h.value = !0, r.value = String(a.modelValue), e.target.select();
+    }
+    function E() {
+      h.value = !1, k();
+    }
+    function F(e) {
+      a.disabled || (e.key === "ArrowUp" ? (e.preventDefault(), S(1)) : e.key === "ArrowDown" ? (e.preventDefault(), S(-1)) : e.key === "Enter" && k());
+    }
+    const { controlAttrs: M, wrapperAttrs: T, changed: P } = q({ value: () => a.modelValue, disabled: () => a.disabled, ariaLabel: () => a.ariaLabel });
+    return (e, l) => (i(), u("div", z(t(T)(), {
+      class: "flex min-w-0 w-full items-center gap-[var(--ui-space-4)]",
+      "data-syno-pkg-land-ui": ""
+    }), [
+      e.$slots.prefix ? (i(), u("span", le, [
+        p(e.$slots, "prefix", {
+          value: t(a).modelValue
+        })
+      ])) : n("", !0),
+      I("div", re, [
+        A.value && f.value ? (i(), u("div", {
+          key: 0,
+          class: "pointer-events-none absolute -top-8 z-[1000] max-w-full rounded-[var(--ui-radius-inner)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] px-2 py-0.5 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text)] shadow-[var(--ui-shadow-menu)]",
+          style: O({ left: `${V.value}%`, transform: `translateX(-${V.value}%)` }),
+          "data-testid": "slider-tip"
+        }, R(t(a).modelValue), 5)) : n("", !0),
+        c(t(G), {
+          "model-value": [t(a).modelValue],
+          min: d.value,
+          max: v.value,
+          step: L.value,
+          disabled: t(a).disabled,
+          class: "relative flex w-full touch-none items-center py-1 select-none [@media(pointer:coarse)]:py-2",
+          "onUpdate:modelValue": C
+        }, {
+          default: _(() => [
+            c(t(Q), {
+              class: U(
+                t($)(
+                  "relative h-1 w-full grow rounded-full bg-[var(--ui-control-track)]",
+                  t(a).disabled && "opacity-50"
+                )
+              )
+            }, {
+              default: _(() => [
+                c(t(H), { class: "absolute h-full rounded-full bg-[var(--ui-primary)]" })
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            c(t(J), z(t(M)(), {
+              class: t($)(
+                "block size-4 rounded-full border border-[var(--ui-border-strong)] bg-[var(--ui-surface-raised)] shadow-[var(--ui-shadow-card)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+                t(a).disabled ? "cursor-default opacity-50" : "cursor-pointer hover:border-[var(--ui-control-border-hover)] hover:bg-[var(--ui-surface-hover)] active:bg-[var(--ui-control-bg-active)]"
+              ),
+              onFocus: l[0] || (l[0] = (s) => f.value = !0),
+              onBlur: l[1] || (l[1] = (s) => f.value = !1)
+            }), null, 16, ["class"])
+          ]),
+          _: 1
+        }, 8, ["model-value", "min", "max", "step", "disabled"]),
+        e.$slots.marked ? (i(), u("div", oe, [
+          p(e.$slots, "marked")
+        ])) : n("", !0)
+      ]),
+      e.$slots.suffix ? (i(), u("span", ie, [
+        p(e.$slots, "suffix", {
+          value: t(a).modelValue
+        })
+      ])) : n("", !0),
+      y.value ? (i(), u("div", ue, [
+        I("input", {
+          id: m.value.id,
+          value: r.value,
+          name: m.value.name,
+          placeholder: m.value.placeholder,
+          disabled: t(a).disabled,
+          type: "text",
+          inputmode: "decimal",
+          role: "spinbutton",
+          autocomplete: "off",
+          "aria-label": m.value.ariaLabel ?? t(a).ariaLabel,
+          "aria-valuenow": t(a).modelValue,
+          "aria-valuemin": d.value,
+          "aria-valuemax": v.value,
+          "aria-disabled": t(a).disabled || void 0,
+          class: "h-[var(--ui-control-md)] w-full min-w-0 border-0 bg-transparent px-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)] disabled:cursor-default",
+          onFocus: D,
+          onBlur: E,
+          onKeydown: F,
+          onInput: l[2] || (l[2] = (s) => r.value = s.target.value)
+        }, null, 40, se),
+        e.$slots["input-suffix"] ? (i(), u("span", ne, [
+          p(e.$slots, "input-suffix")
+        ])) : n("", !0)
+      ])) : n("", !0)
+    ], 16));
+  }
+});
+export {
+  ge as default
+};

package/dist/modules/components/primitives/slider/Slider2.vue.js

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

package/dist/modules/components/primitives/space/Space.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent as i, watch as o, computed as s, openBlock as l, createElementBlock as r, normalizeStyle as p, renderSlot as c } from "vue";
+import { spaceJustifyContent as m, spaceAlignItems as d, spaceGap as f } from "./space.js";
+const I = /* @__PURE__ */ i({
+  __name: "Space",
+  props: {
+    alignItems: {},
+    alignItem: {},
+    justifyContent: {},
+    direction: { default: "row" },
+    spacing: { default: "regular" },
+    wrap: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a;
+    o(
+      () => e.alignItem,
+      (t) => {
+        t && console.warn("[syno-pkg-land-ui] Space: `alignItem` is deprecated, use `alignItems` instead.");
+      },
+      { immediate: !0 }
+    );
+    const n = s(() => ({
+      display: "flex",
+      flexDirection: e.direction,
+      flexWrap: e.wrap ? "wrap" : void 0,
+      gap: f(e.spacing),
+      alignItems: d(e.direction, e.alignItems ?? e.alignItem),
+      justifyContent: m(e.justifyContent)
+    }));
+    return (t, u) => (l(), r("div", {
+      style: p(n.value)
+    }, [
+      c(t.$slots, "default")
+    ], 4));
+  }
+});
+export {
+  I as default
+};

package/dist/modules/components/primitives/space/Space2.vue.js

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

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

@@ -0,0 +1,21 @@
+const t = {
+  none: "0",
+  dense: "var(--ui-field-gap)",
+  compact: "var(--ui-space-2)",
+  regular: "var(--ui-section-gap)",
+  relaxed: "var(--ui-space-4)"
+};
+function n(e) {
+  return typeof e == "number" ? `${e}px` : t[e];
+}
+function u(e, r) {
+  return r === "start" ? "flex-start" : r === "end" ? "flex-end" : r || (e === "column" ? "stretch" : "center");
+}
+function a(e) {
+  return e === "start" || !e ? "flex-start" : e === "end" ? "flex-end" : e;
+}
+export {
+  u as spaceAlignItems,
+  n as spaceGap,
+  a as spaceJustifyContent
+};

package/dist/modules/components/primitives/spinner/Spinner.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as t, computed as o, openBlock as r, createElementBlock as p, normalizeStyle as u, unref as s, normalizeClass as c, createElementVNode as i } from "vue";
+import { useLocalizedDefaults as m } from "../../../i18n/text.js";
+const d = ["aria-label"], b = /* @__PURE__ */ t({
+  __name: "Spinner",
+  props: {
+    label: {},
+    size: { default: 24 },
+    inline: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const e = m(n, { label: "Loading" }), l = o(() => ({
+      "--ui-spin-size": `${e.size}px`,
+      "--ui-spin-stroke": e.inline ? Math.max(2, 32 / Math.max(1, e.size)) : Math.max(2, 36 / Math.max(1, e.size))
+    }));
+    return (x, a) => (r(), p("span", {
+      class: c(["ui-spin", { "ui-spin-inline": s(e).inline }]),
+      role: "status",
+      "aria-label": s(e).label,
+      style: u(l.value),
+      "data-syno-pkg-land-ui": ""
+    }, [...a[0] || (a[0] = [
+      i("svg", {
+        class: "ui-spin-ring",
+        viewBox: "0 0 16 16",
+        "aria-hidden": "true",
+        focusable: "false"
+      }, [
+        i("circle", {
+          class: "ui-spin-arc",
+          cx: "8",
+          cy: "8",
+          r: "7",
+          pathLength: "100"
+        })
+      ], -1)
+    ])], 14, d));
+  }
+});
+export {
+  b as default
+};

package/dist/modules/components/primitives/spinner/Spinner2.vue.js

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

package/dist/modules/components/primitives/split-button/SplitButton.vue.js

@@ -0,0 +1,72 @@
+import { defineComponent as p, useAttrs as g, openBlock as f, createElementBlock as h, unref as e, normalizeStyle as y, normalizeClass as n, createElementVNode as a, mergeProps as x, renderSlot as _, createVNode as w, withCtx as k } from "vue";
+import { useLocalizedDefaults as z } from "../../../i18n/text.js";
+import B from "../dropdown-menu/DropdownMenu.vue.js";
+const L = ["data-variant"], C = ["disabled"], S = {
+  class: "min-w-0 whitespace-normal text-center [overflow-wrap:break-word]",
+  "data-split-label": ""
+}, j = ["disabled", "aria-label"], u = "inline-flex min-h-[var(--ui-button-md,var(--ui-control-md))] items-center border text-[length:var(--ui-font-size)] 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", N = /* @__PURE__ */ p({
+  inheritAttrs: !1,
+  __name: "SplitButton",
+  props: {
+    items: {},
+    variant: { default: "secondary" },
+    disabled: { type: Boolean, default: !1 },
+    menuLabel: {}
+  },
+  emits: ["click", "select"],
+  setup(c, { emit: v }) {
+    const o = g(), b = () => Object.fromEntries(Object.entries(o).filter(([t]) => t !== "class" && t !== "style")), r = z(c, { menuLabel: "More options" }), l = v, d = () => r.variant === "primary" ? "border-[var(--ui-primary-hover)] bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] group-hover:border-[var(--ui-primary-active)] group-hover:bg-[var(--ui-primary-hover)] group-active:border-[var(--ui-primary-active)] group-active:bg-[var(--ui-primary-active)] disabled:border-[color-mix(in_srgb,var(--ui-primary)_30%,var(--ui-surface))] disabled:bg-[color-mix(in_srgb,var(--ui-primary)_12%,var(--ui-surface))] disabled:text-[color-mix(in_srgb,var(--ui-primary)_55%,var(--ui-text))]" : "focus-visible:border-[var(--ui-primary)] disabled:border-[var(--ui-control-border)] disabled:bg-[var(--ui-control-bg-disabled)] border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--ui-text)] group-hover:border-[var(--ui-control-border-hover)] group-hover:bg-[var(--ui-control-bg-hover)] group-active:border-[var(--ui-control-border-active)] group-active:bg-[var(--ui-control-bg-active)] disabled:text-[var(--ui-text-disabled)]", m = () => r.variant === "primary" ? r.disabled ? "bg-[color-mix(in_srgb,var(--ui-primary)_30%,var(--ui-surface))]" : "bg-[var(--ui-control-divider-on-accent)]" : r.disabled ? "opacity-50 bg-[var(--ui-control-divider)]" : "bg-[var(--ui-control-divider)]";
+    return (t, i) => (f(), h("span", {
+      class: n([e(o).class, "group inline-flex max-w-full shrink-0 items-stretch"]),
+      style: y(e(o).style),
+      "data-variant": e(r).variant,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      a("button", x(b(), {
+        type: "button",
+        "data-split-main": "",
+        "data-ui-hit": "",
+        disabled: e(r).disabled,
+        class: [u, d(), "relative min-w-0 rounded-l-[var(--ui-radius-control)] border-r-0 px-3 py-[max(0px,calc((var(--ui-button-md,var(--ui-control-md))_-_2px_-_1lh)_/_2))] focus-visible:z-10 focus-visible:shadow-[var(--ui-shadow-focus)]"],
+        onClick: i[0] || (i[0] = (s) => l("click", s))
+      }), [
+        a("span", S, [
+          _(t.$slots, "default")
+        ])
+      ], 16, C),
+      a("span", {
+        class: n(["w-px shrink-0 self-stretch", m()]),
+        "aria-hidden": "true"
+      }, null, 2),
+      w(B, {
+        items: e(r).items,
+        align: "end",
+        onSelect: i[1] || (i[1] = (s) => l("select", s))
+      }, {
+        trigger: k(() => [
+          a("button", {
+            type: "button",
+            "data-split-arrow": "",
+            "data-ui-hit": "",
+            disabled: e(r).disabled,
+            "aria-label": e(r).menuLabel,
+            class: n([u, d(), "relative w-6 [@media(pointer:coarse)]:w-[var(--ui-hit-min)] justify-center rounded-r-[var(--ui-radius-control)] border-l-0 focus-visible:z-10 focus-visible:shadow-[var(--ui-shadow-focus)]"])
+          }, [...i[2] || (i[2] = [
+            a("svg", {
+              "data-caret": "",
+              class: "size-2 fill-current",
+              viewBox: "0 0 8 5",
+              "aria-hidden": "true"
+            }, [
+              a("path", { d: "M0 0h8L4 5z" })
+            ], -1)
+          ])], 10, j)
+        ]),
+        _: 1
+      }, 8, ["items"])
+    ], 14, L));
+  }
+});
+export {
+  N as default
+};

package/dist/modules/components/primitives/split-button/SplitButton2.vue.js

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

package/dist/modules/components/primitives/status-dot/StatusDot.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent as e, openBlock as t, createElementBlock as l } from "vue";
+const n = ["data-tone", "data-pulse", "role", "aria-label", "aria-hidden"], u = /* @__PURE__ */ e({
+  __name: "StatusDot",
+  props: {
+    tone: { default: "neutral" },
+    pulse: { type: Boolean, default: !1 },
+    label: {}
+  },
+  setup(a) {
+    return (o, d) => (t(), l("span", {
+      class: "ui-status-dot",
+      "data-tone": a.tone,
+      "data-pulse": a.pulse ? "" : void 0,
+      role: a.label ? "img" : void 0,
+      "aria-label": a.label || void 0,
+      "aria-hidden": a.label ? void 0 : "true",
+      "data-icon": "",
+      "data-syno-pkg-land-ui": ""
+    }, null, 8, n));
+  }
+});
+export {
+  u as default
+};

package/dist/modules/components/primitives/status-dot/StatusDot2.vue.js

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