@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/composite/rich-text-view/RichTextBlocks.vue.js

@@ -0,0 +1,127 @@
+import { defineComponent as H, resolveComponent as $, openBlock as i, createElementBlock as r, Fragment as d, renderList as p, createVNode as s, withCtx as n, createBlock as g, resolveDynamicComponent as f, normalizeClass as y, createCommentVNode as q, createElementVNode as N, toDisplayString as R } from "vue";
+import h from "./RichTextInline.vue.js";
+import m from "./RichTextImage.vue.js";
+const T = {
+  key: 0,
+  class: "m-0 whitespace-pre-wrap",
+  "data-ui-rich-paragraph": ""
+}, V = {
+  key: 3,
+  class: "m-0 flex flex-col gap-2 border-s-2 border-[var(--ui-border-strong)] ps-3 text-[var(--ui-text-secondary)]",
+  "data-ui-rich-quote": ""
+}, _ = {
+  key: 4,
+  class: "m-0 overflow-x-auto rounded-[var(--ui-radius-container)] bg-[var(--ui-surface-subtle)] px-3 py-2 font-[family-name:var(--ui-font-mono)] text-[0.92em] leading-5 [overflow-wrap:normal]",
+  "data-ui-rich-code-block": ""
+}, L = /* @__PURE__ */ H({
+  __name: "RichTextBlocks",
+  props: {
+    blocks: {},
+    file: { type: Function },
+    imageHeight: {}
+  },
+  emits: ["open"],
+  setup(a, { emit: k }) {
+    const l = k, x = (v) => ["m-0 flex flex-col gap-0.5 ps-6", v.ordered ? "list-decimal" : "list-disc"];
+    return (v, O) => {
+      const C = $("RichTextBlocks", !0);
+      return i(!0), r(d, null, p(a.blocks, (t, B) => (i(), r(d, { key: B }, [
+        t.type === "paragraph" ? (i(), r("p", T, [
+          s(h, {
+            parts: t.parts
+          }, {
+            image: n(({ image: e }) => [
+              s(m, {
+                item: a.file(e.id, e.alt),
+                height: a.imageHeight,
+                onOpen: (u) => l("open", e.id)
+              }, null, 8, ["item", "height", "onOpen"])
+            ]),
+            _: 1
+          }, 8, ["parts"])
+        ])) : t.type === "heading" ? (i(), g(f(t.level === 2 ? "h2" : "h3"), {
+          key: 1,
+          class: y(["m-0 mt-1 font-semibold leading-tight", t.level === 2 ? "text-[1.25em]" : "text-[1.1em]"]),
+          "data-ui-rich-heading": ""
+        }, {
+          default: n(() => [
+            s(h, {
+              parts: t.parts
+            }, {
+              image: n(({ image: e }) => [
+                s(m, {
+                  item: a.file(e.id, e.alt),
+                  height: a.imageHeight,
+                  onOpen: (u) => l("open", e.id)
+                }, null, 8, ["item", "height", "onOpen"])
+              ]),
+              _: 1
+            }, 8, ["parts"])
+          ]),
+          _: 2
+        }, 1032, ["class"])) : t.type === "list" ? (i(), g(f(t.ordered ? "ol" : "ul"), {
+          key: 2,
+          start: t.ordered && t.start !== 1 ? t.start : void 0,
+          class: y(x(t)),
+          "data-ui-rich-list": ""
+        }, {
+          default: n(() => [
+            (i(!0), r(d, null, p(t.items, (e, u) => (i(), r("li", {
+              key: u,
+              class: "whitespace-pre-wrap"
+            }, [
+              s(h, {
+                parts: e.parts
+              }, {
+                image: n(({ image: o }) => [
+                  s(m, {
+                    item: a.file(o.id, o.alt),
+                    height: a.imageHeight,
+                    onOpen: (w) => l("open", o.id)
+                  }, null, 8, ["item", "height", "onOpen"])
+                ]),
+                _: 1
+              }, 8, ["parts"]),
+              e.list ? (i(), g(f(e.list.ordered ? "ol" : "ul"), {
+                key: 0,
+                start: e.list.ordered && e.list.start !== 1 ? e.list.start : void 0,
+                class: y(x(e.list))
+              }, {
+                default: n(() => [
+                  (i(!0), r(d, null, p(e.list.items, (o, w) => (i(), r("li", { key: w }, [
+                    s(h, {
+                      parts: o.parts
+                    }, {
+                      image: n(({ image: c }) => [
+                        s(m, {
+                          item: a.file(c.id, c.alt),
+                          height: a.imageHeight,
+                          onOpen: (D) => l("open", c.id)
+                        }, null, 8, ["item", "height", "onOpen"])
+                      ]),
+                      _: 1
+                    }, 8, ["parts"])
+                  ]))), 128))
+                ]),
+                _: 2
+              }, 1032, ["start", "class"])) : q("", !0)
+            ]))), 128))
+          ]),
+          _: 2
+        }, 1032, ["start", "class"])) : t.type === "quote" ? (i(), r("blockquote", V, [
+          s(C, {
+            blocks: t.blocks,
+            file: a.file,
+            "image-height": a.imageHeight,
+            onOpen: O[0] || (O[0] = (e) => l("open", e))
+          }, null, 8, ["blocks", "file", "image-height"])
+        ])) : (i(), r("pre", _, [
+          N("code", null, R(t.text), 1)
+        ]))
+      ], 64))), 128);
+    };
+  }
+});
+export {
+  L as default
+};

package/dist/modules/components/composite/rich-text-view/RichTextBlocks2.vue.js

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

package/dist/modules/components/composite/rich-text-view/RichTextImage.vue.js

@@ -0,0 +1,60 @@
+import { defineComponent as w, ref as y, watch as x, computed as l, openBlock as s, createElementBlock as r, normalizeStyle as k, createBlock as $, unref as d, Fragment as z, createVNode as B, createElementVNode as C, toDisplayString as E } from "vue";
+import { ImageOff as F } from "@lucide/vue";
+import { useUiText as j } from "../../../i18n/text.js";
+import I from "../../primitives/spinner/Spinner.vue.js";
+const M = ["aria-label", "data-state", "data-ui-rich-image"], N = ["src", "alt", "width", "height"], O = {
+  key: 1,
+  class: "flex size-full min-w-32 flex-col items-center justify-center gap-2 px-3 text-center text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, V = /* @__PURE__ */ w({
+  __name: "RichTextImage",
+  props: {
+    item: {},
+    height: {}
+  },
+  emits: ["open"],
+  setup(a, { emit: h }) {
+    const e = a, g = h, n = j(), m = y(!1);
+    x(() => e.item.id, () => {
+      m.value = !1;
+    });
+    const u = l(() => e.item.preview ?? e.item.url ?? e.item.thumb), t = l(() => m.value ? "failed" : e.item.state ?? (u.value ? "ready" : "missing")), c = l(() => t.value === "missing" ? n("File is missing") : t.value === "changed" ? n("File has changed") : t.value === "failed" ? n("Can't show this file") : ""), v = l(() => e.item.width && e.item.height ? `${e.item.width} / ${e.item.height}` : "4 / 3"), f = l(() => {
+      const { width: o = 0, height: i = 0 } = e.item;
+      return o && i ? Math.min(o, e.height * o / i) : Math.min(240, e.height) * 4 / 3;
+    }), p = l(() => c.value ? `${e.item.name}, ${c.value}` : t.value === "processing" ? `${e.item.name}, ${n("Processing")}` : n("Open {name}", { name: e.item.name }));
+    return (o, i) => (s(), r("button", {
+      type: "button",
+      class: "my-1 inline-flex max-w-full overflow-hidden rounded-[var(--ui-radius-container)] border border-[var(--ui-border-subtle)] bg-[var(--ui-surface-subtle)] p-0 align-top outline-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+      style: k({ aspectRatio: v.value, width: `min(100%, ${f.value}px)`, background: a.item.dominant }),
+      "aria-label": p.value,
+      "data-state": t.value,
+      "data-ui-rich-image": a.item.id,
+      onClick: i[1] || (i[1] = (b) => g("open"))
+    }, [
+      t.value === "ready" && u.value ? (s(), r("img", {
+        key: 0,
+        src: u.value,
+        alt: a.item.name,
+        width: a.item.width,
+        height: a.item.height,
+        loading: "lazy",
+        decoding: "async",
+        class: "size-full object-contain",
+        onError: i[0] || (i[0] = (b) => m.value = !0)
+      }, null, 40, N)) : (s(), r("span", O, [
+        t.value === "processing" ? (s(), $(I, {
+          key: 0,
+          label: d(n)("Processing")
+        }, null, 8, ["label"])) : (s(), r(z, { key: 1 }, [
+          B(d(F), {
+            class: "size-5",
+            "aria-hidden": "true"
+          }),
+          C("span", null, E(c.value), 1)
+        ], 64))
+      ]))
+    ], 12, M));
+  }
+});
+export {
+  V as default
+};

package/dist/modules/components/composite/rich-text-view/RichTextImage2.vue.js

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

package/dist/modules/components/composite/rich-text-view/RichTextInline.vue.js

@@ -0,0 +1,42 @@
+import { defineComponent as m, openBlock as i, createElementBlock as t, Fragment as s, renderList as u, toDisplayString as o, renderSlot as h, normalizeClass as r, createBlock as f, resolveDynamicComponent as v, withCtx as y, createTextVNode as l } from "vue";
+const k = {
+  key: 0,
+  class: "rounded-[var(--ui-radius-inner)] bg-[var(--ui-surface-subtle)] px-1 py-px font-[family-name:var(--ui-font-mono)] text-[0.92em]",
+  "data-ui-rich-code": ""
+}, x = ["data-ui-rich-mention", "data-inactive"], g = ["href"], C = /* @__PURE__ */ m({
+  __name: "RichTextInline",
+  props: {
+    parts: {}
+  },
+  setup(c) {
+    const a = (n) => [n.strong && "font-semibold", n.em && "italic", n.strike && "line-through"];
+    return (n, _) => (i(!0), t(s, null, u(c.parts, (e, d) => (i(), t(s, { key: d }, [
+      e.type === "code" ? (i(), t("code", k, o(e.text), 1)) : e.type === "image" ? h(n.$slots, "image", { image: e }, void 0, void 0, 1) : e.type === "mention" ? (i(), t("span", {
+        key: 2,
+        class: r(["font-semibold", e.em && "italic", e.strike && "line-through", e.inactive ? "text-[var(--ui-text-disabled)]" : "text-[var(--ui-primary)]"]),
+        "data-ui-rich-mention": e.id,
+        "data-inactive": e.inactive ? "" : void 0
+      }, "@" + o(e.label), 11, x)) : e.type === "link" ? (i(), t("a", {
+        key: 3,
+        href: e.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: r(["text-[var(--ui-primary)] underline hover:text-[var(--ui-primary-hover)] underline-offset-2 outline-none focus-visible:shadow-[var(--ui-shadow-focus)]", a(e)]),
+        "data-ui-rich-link": ""
+      }, o(e.text), 11, g)) : e.strong || e.em || e.strike ? (i(), f(v(e.strong ? "strong" : e.em ? "em" : "s"), {
+        key: 4,
+        class: r(a(e))
+      }, {
+        default: y(() => [
+          l(o(e.text), 1)
+        ]),
+        _: 2
+      }, 1032, ["class"])) : (i(), t(s, { key: 5 }, [
+        l(o(e.text), 1)
+      ], 64))
+    ], 64))), 128));
+  }
+});
+export {
+  C as default
+};

package/dist/modules/components/composite/rich-text-view/RichTextInline2.vue.js

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

package/dist/modules/components/composite/rich-text-view/RichTextView.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent as b, computed as c, ref as d, openBlock as g, createElementBlock as k, createVNode as w, createBlock as B, createCommentVNode as _ } from "vue";
+import { richTextParts as V } from "../../../lib/richText.js";
+import C from "../image-lightbox/ImageLightbox.vue.js";
+import E from "./RichTextBlocks.vue.js";
+const H = {
+  class: "flex min-w-0 flex-col gap-2 leading-5 text-[var(--ui-text)] [overflow-wrap:anywhere]",
+  "data-ui-rich-text-view": "",
+  "data-syno-pkg-land-ui": ""
+}, q = /* @__PURE__ */ b({
+  __name: "RichTextView",
+  props: {
+    body: { default: "" },
+    mentions: { default: () => [] },
+    headings: { type: Boolean, default: !1 },
+    files: { type: Function, default: void 0 },
+    imageHeight: { default: 320 },
+    lightbox: { type: Boolean, default: !0 }
+  },
+  emits: ["open-image"],
+  setup(l, { emit: h }) {
+    const n = l, x = h, f = c(() => V(n.body, { people: n.mentions, headings: n.headings }));
+    function m(t, e = []) {
+      const o = (a) => {
+        for (const i of a) i.type === "image" && e.push(i);
+      };
+      for (const a of t)
+        if (a.type === "paragraph" || a.type === "heading") o(a.parts);
+        else if (a.type === "quote") m(a.blocks, e);
+        else if (a.type === "list") for (const i of a.items)
+          o(i.parts), i.list?.items.forEach((y) => o(y.parts));
+      return e;
+    }
+    const u = (t, e) => ({ ...n.files?.(t) ?? { name: e || t, state: "missing" }, id: t }), s = c(() => m(f.value).map((t) => u(t.id, t.alt))), r = d(!1), p = d(0);
+    function v(t) {
+      const e = Math.max(0, s.value.findIndex((o) => o.id === t));
+      x("open-image", t, e), n.lightbox && (p.value = e, r.value = !0);
+    }
+    return (t, e) => (g(), k("div", H, [
+      w(E, {
+        blocks: f.value,
+        file: u,
+        "image-height": l.imageHeight,
+        onOpen: v
+      }, null, 8, ["blocks", "image-height"]),
+      l.lightbox && s.value.length ? (g(), B(C, {
+        key: 0,
+        open: r.value,
+        "onUpdate:open": e[0] || (e[0] = (o) => r.value = o),
+        index: p.value,
+        "onUpdate:index": e[1] || (e[1] = (o) => p.value = o),
+        items: s.value
+      }, null, 8, ["open", "index", "items"])) : _("", !0)
+    ]));
+  }
+});
+export {
+  q as default
+};

package/dist/modules/components/composite/rich-text-view/RichTextView2.vue.js

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

package/dist/modules/components/composite/scroll-edges/ScrollEdges.vue.js

@@ -0,0 +1,34 @@
+import { defineComponent as v, useTemplateRef as p, openBlock as c, createElementBlock as f, unref as e, createElementVNode as m, normalizeStyle as u, normalizeClass as w, renderSlot as x } from "vue";
+import { useScrollEdges as g } from "../../../composables/scrollEdges.js";
+const y = ["data-axis", "data-overflow-start", "data-overflow-end", "data-edge-top", "data-edge-bottom"], E = /* @__PURE__ */ v({
+  __name: "ScrollEdges",
+  props: {
+    viewportClass: { default: void 0 },
+    viewportStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
+    axis: { default: "x" }
+  },
+  setup(t, { expose: d }) {
+    const o = t, a = p("viewport"), { start: r, end: s, top: l, bottom: i } = g(a, () => o.axis);
+    return d({ viewport: a }), (n, S) => (c(), f("div", {
+      "data-ui-scroll-edges": "",
+      "data-axis": o.axis === "x" ? void 0 : o.axis,
+      "data-overflow-start": e(r) ? "" : void 0,
+      "data-overflow-end": e(s) ? "" : void 0,
+      "data-edge-top": e(l) ? "" : void 0,
+      "data-edge-bottom": e(i) ? "" : void 0
+    }, [
+      m("div", {
+        ref_key: "viewport",
+        ref: a,
+        "data-ui-scroll-edges-viewport": "",
+        class: w(t.viewportClass),
+        style: u(t.viewportStyle)
+      }, [
+        x(n.$slots, "default")
+      ], 6)
+    ], 8, y));
+  }
+});
+export {
+  E as default
+};

package/dist/modules/components/composite/scroll-edges/ScrollEdges2.vue.js

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

package/dist/modules/components/composite/search-field/SearchField.vue.js

@@ -0,0 +1,65 @@
+import { defineComponent as f, openBlock as t, createElementBlock as u, mergeProps as n, unref as e, createBlock as c, createElementVNode as x, createVNode as y, createCommentVNode as g } from "vue";
+import { useGroupDisabled as k } from "../../../composables/formGroup.js";
+import { useLocalizedDefaults as w } from "../../../i18n/text.js";
+import { useFormControl as V } from "../../../composables/formControl.js";
+import { Filter as z, Search as _, X as C } from "@lucide/vue";
+const B = ["disabled", "aria-label", "value", "placeholder"], L = ["disabled", "aria-label"], P = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "SearchField",
+  props: {
+    modelValue: { default: "" },
+    placeholder: {},
+    clearLabel: {},
+    variant: { default: "search" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(b, { emit: p }) {
+    const v = b, o = k(() => a.disabled), a = w(v, { placeholder: "Search", clearLabel: "Clear search" }), d = p, { controlAttrs: l, wrapperAttrs: h, changed: s, invalid: m } = V({ value: () => a.modelValue, disabled: () => o.value, keyboard: { type: () => "search" } });
+    return (A, r) => (t(), u("div", n(e(h)(), {
+      class: "relative block min-w-0",
+      "data-ui-search-field": "",
+      "data-syno-pkg-land-ui": ""
+    }), [
+      e(a).variant === "filter" ? (t(), c(e(z), {
+        key: 0,
+        class: "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-[var(--ui-text)]",
+        "aria-hidden": "true"
+      })) : (t(), c(e(_), {
+        key: 1,
+        class: "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-[var(--ui-text-muted)]",
+        "aria-hidden": "true"
+      })),
+      x("input", n(e(l)(), {
+        disabled: e(o),
+        "aria-label": e(l)()["aria-label"] || (e(l)()["aria-labelledby"] ? void 0 : e(a).placeholder),
+        value: e(a).modelValue,
+        type: "search",
+        placeholder: e(a).placeholder,
+        class: ["[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:hidden h-[var(--ui-control-md)] w-full rounded-[var(--ui-radius-control)] border bg-[var(--ui-surface)] pr-8 pl-8 text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none transition-[border-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] text-ellipsis placeholder:text-[var(--ui-text-muted)] focus:shadow-[var(--ui-shadow-focus-field)] disabled:cursor-default disabled:bg-[var(--ui-surface-subtle)] disabled:text-[var(--ui-text-disabled)] enabled:hover:not-focus:border-[var(--ui-control-border-hover)]", e(m) ? "border-[var(--ui-danger)] focus:border-[var(--ui-danger)]" : "border-[var(--ui-border)] focus:border-[var(--ui-primary)]"],
+        onInput: r[0] || (r[0] = (i) => {
+          e(s)(i.target.value), d("update:modelValue", i.target.value);
+        })
+      }), null, 16, B),
+      e(a).modelValue ? (t(), u("button", {
+        key: 2,
+        "data-ui-hit": "",
+        disabled: e(o),
+        type: "button",
+        "aria-label": e(a).clearLabel,
+        class: "absolute top-1/2 right-1 flex size-6 [--ui-hit-end-room:var(--ui-space-1)] border-0 bg-transparent -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
+        onClick: r[1] || (r[1] = (i) => {
+          e(s)(""), d("update:modelValue", "");
+        })
+      }, [
+        y(e(C), {
+          class: "size-3.5",
+          "aria-hidden": "true"
+        })
+      ], 8, L)) : g("", !0)
+    ], 16));
+  }
+});
+export {
+  P as default
+};

package/dist/modules/components/composite/search-field/SearchField2.vue.js

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

package/dist/modules/components/composite/settings-row/SettingsRow.vue.js

@@ -0,0 +1,57 @@
+import { defineComponent as h, computed as t, useTemplateRef as x, openBlock as i, createElementBlock as o, normalizeClass as c, normalizeStyle as m, createElementVNode as r, createTextVNode as y, toDisplayString as u, createCommentVNode as v, renderSlot as k } from "vue";
+import { useElementWidth as b } from "../../../composables/elementWidth.js";
+import { resolveFieldWidth as _ } from "../../../lib/fieldWidth.js";
+import { FORM_STACK_BELOW as S } from "../form/context.js";
+const w = ["data-direction"], W = {
+  key: 0,
+  class: "ml-0.5 text-[var(--ui-danger)]"
+}, z = { class: "min-w-0" }, C = {
+  key: 0,
+  class: "mt-1 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]"
+}, V = /* @__PURE__ */ h({
+  __name: "SettingsRow",
+  props: {
+    label: {},
+    description: {},
+    required: { type: Boolean, default: !1 },
+    align: { default: void 0 },
+    fieldWidth: { default: void 0 }
+  },
+  setup(e) {
+    const a = e, n = t(() => a.align ?? (a.description ? "start" : "center")), s = x("root"), d = b(s), l = t(() => d.value > 0 && d.value < S), f = t(() => ({ maxWidth: _(a.fieldWidth, l.value) })), p = t(() => ({
+      gridTemplateColumns: l.value ? "minmax(0, 1fr)" : "minmax(0, var(--ui-label-column)) minmax(0, 1fr)",
+      columnGap: "var(--ui-label-gap)"
+    }));
+    return (g, B) => (i(), o("div", {
+      ref_key: "root",
+      ref: s,
+      "data-direction": l.value ? "vertical" : "horizontal",
+      style: m(p.value),
+      class: c([
+        "grid min-h-10 gap-y-1 py-2",
+        n.value === "start" ? "items-start" : "items-center"
+      ]),
+      "data-syno-pkg-land-ui": ""
+    }, [
+      r("div", {
+        "data-settings-label": "",
+        class: c(["min-w-0 break-words [word-break:keep-all] text-left text-[length:var(--ui-font-size-control)] text-[var(--ui-text)]", n.value === "start" && "pt-[var(--ui-label-offset)]"])
+      }, [
+        y(u(e.label), 1),
+        e.required ? (i(), o("span", W, "*")) : v("", !0)
+      ], 2),
+      r("div", z, [
+        r("div", {
+          "data-field-control": "",
+          style: m(f.value)
+        }, [
+          k(g.$slots, "default")
+        ], 4),
+        e.description ? (i(), o("p", C, u(e.description), 1)) : v("", !0)
+      ])
+    ], 14, w));
+  }
+});
+export {
+  V as default
+};

package/dist/modules/components/composite/settings-row/SettingsRow2.vue.js

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

package/dist/modules/components/composite/settings-section/SettingsSection.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as B, useId as C, computed as v, useSlots as z, openBlock as o, createElementBlock as s, createElementVNode as r, unref as i, createVNode as y, normalizeClass as x, renderSlot as a, createTextVNode as c, toDisplayString as u, createCommentVNode as l, withCtx as S, createBlock as N } from "vue";
+import { ChevronDown as V } from "@lucide/vue";
+import O from "../../primitives/motion/MotionCollapse.vue.js";
+import { useControllableBoolean as D } from "../../../lib/controllable.js";
+import E from "../../primitives/skeleton/SectionSkeleton.vue.js";
+const I = ["data-collapsible", "data-state", "aria-busy"], _ = {
+  key: 0,
+  class: "ui-settings-section-header flex min-h-9 items-center gap-2 border-0 border-b border-solid border-[var(--ui-border)] text-[length:var(--ui-font-size-lg)]"
+}, T = ["aria-expanded", "aria-controls"], j = { class: "min-w-0 truncate" }, q = {
+  key: 0,
+  class: "flex shrink-0 items-center gap-[var(--ui-chrome-gap)]"
+}, A = {
+  key: 1,
+  class: "ui-settings-section-header flex min-h-9 items-center gap-2 border-0 border-b border-solid border-[var(--ui-border)] text-[length:var(--ui-font-size-lg)] font-semibold text-[var(--ui-text)]"
+}, F = { class: "min-w-0 flex-1 truncate" }, G = {
+  key: 0,
+  class: "flex shrink-0 items-center gap-[var(--ui-chrome-gap)]"
+}, H = ["id"], J = {
+  key: 0,
+  class: "m-0 mb-4 max-w-[72ch] text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text-secondary)]"
+}, K = {
+  key: 3,
+  "data-ui-settings-footer": "",
+  class: "mt-4 flex flex-wrap items-center gap-2"
+}, U = /* @__PURE__ */ B({
+  __name: "SettingsSection",
+  props: {
+    title: {},
+    description: {},
+    loading: { type: Boolean },
+    collapsible: { type: Boolean, default: !0 },
+    defaultOpen: { type: Boolean, default: !0 },
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: ["update:open"],
+  setup(t, { emit: k }) {
+    const n = t, $ = k, p = C(), { value: d, toggle: m } = D(
+      () => n.open,
+      n.defaultOpen,
+      (e) => $("update:open", e)
+    ), f = v(() => d.value || !n.collapsible), b = z(), h = v(() => n.collapsible || !!n.title || !!b.title || !!b.actions);
+    return (e, g) => (o(), s("section", {
+      class: "ui-settings-section",
+      "data-collapsible": t.collapsible || void 0,
+      "data-state": f.value ? "open" : "closed",
+      "data-syno-pkg-land-ui": "",
+      "aria-busy": t.loading || void 0
+    }, [
+      t.collapsible ? (o(), s("div", _, [
+        r("button", {
+          type: "button",
+          class: "group m-0 flex min-w-0 flex-1 self-stretch border-0 bg-transparent p-0 items-center gap-2 text-left text-[length:inherit] font-semibold text-[var(--ui-text)] outline-none enabled:hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus-inset)]",
+          "aria-expanded": i(d),
+          "aria-controls": i(p),
+          onClick: g[0] || (g[0] = //@ts-ignore
+          (...w) => i(m) && i(m)(...w))
+        }, [
+          y(i(V), {
+            class: x(["size-4 shrink-0 transition-transform", !i(d) && "-rotate-90"]),
+            "aria-hidden": "true"
+          }, null, 8, ["class"]),
+          r("span", j, [
+            a(e.$slots, "title", {}, () => [
+              c(u(t.title), 1)
+            ])
+          ])
+        ], 8, T),
+        e.$slots.actions ? (o(), s("span", q, [
+          a(e.$slots, "actions")
+        ])) : l("", !0)
+      ])) : h.value ? (o(), s("div", A, [
+        r("span", F, [
+          a(e.$slots, "title", {}, () => [
+            c(u(t.title), 1)
+          ])
+        ]),
+        e.$slots.actions ? (o(), s("span", G, [
+          a(e.$slots, "actions")
+        ])) : l("", !0)
+      ])) : l("", !0),
+      y(O, { open: f.value }, {
+        default: S(() => [
+          r("div", {
+            id: i(p),
+            class: x(["ui-settings-section-body", h.value && "pt-3"])
+          }, [
+            t.description || e.$slots.description ? (o(), s("p", J, [
+              a(e.$slots, "description", {}, () => [
+                c(u(t.description), 1)
+              ])
+            ])) : l("", !0),
+            t.loading ? (o(), N(E, { key: 1 })) : a(e.$slots, "default", {}, void 0, void 0, 2),
+            e.$slots.footer && !t.loading ? (o(), s("div", K, [
+              a(e.$slots, "footer")
+            ])) : l("", !0)
+          ], 10, H)
+        ]),
+        _: 3
+      }, 8, ["open"])
+    ], 8, I));
+  }
+});
+export {
+  U as default
+};

package/dist/modules/components/composite/settings-section/SettingsSection2.vue.js

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