@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/primitives/icon/iconRegistry.js

@@ -0,0 +1,17 @@
+import { reactive as c } from "vue";
+const n = c(/* @__PURE__ */ new Map());
+function s(e) {
+  const o = Array.isArray(e) ? e : Object.entries(e).map(([r, t]) => ({ name: r, component: t }));
+  for (const { name: r, component: t } of o) n.set(r, t);
+}
+function a(e) {
+  return n.get(e);
+}
+function f() {
+  n.clear();
+}
+export {
+  f as clearIconRegistry,
+  a as getRegisteredIcon,
+  s as registerIcons
+};

package/dist/modules/components/primitives/icon/useIconButton.js

@@ -0,0 +1,24 @@
+import { ref as d, computed as i, toValue as r } from "vue";
+function b(e) {
+  const u = d(null), l = i(() => r(e.disabled) ?? !1), t = i(() => ({
+    role: "button",
+    tabindex: l.value ? -1 : 0,
+    "aria-disabled": l.value ? !0 : void 0,
+    "aria-label": r(e.ariaLabel),
+    "aria-labelledby": r(e.ariaLabelledby),
+    "aria-hidden": !1
+  }));
+  function n(a) {
+    l.value || e.onClick?.(a);
+  }
+  function o(a) {
+    l.value || a.key !== "Enter" && a.key !== " " && a.key !== "Spacebar" || (a.preventDefault(), n(a));
+  }
+  function c() {
+    u.value?.focus();
+  }
+  return { el: u, attrs: t, onClick: n, onKeydown: o, focus: c };
+}
+export {
+  b as useIconButton
+};

package/dist/modules/components/primitives/input/Input.vue.js

@@ -0,0 +1,121 @@
+import { defineComponent as E, useSlots as I, computed as d, ref as S, useTemplateRef as A, openBlock as n, createElementBlock as c, mergeProps as m, unref as a, createElementVNode as k, normalizeClass as z, createBlock as V, createCommentVNode as B, renderSlot as N, createTextVNode as U, toDisplayString as j } from "vue";
+import { useGroupDisabled as F } from "../../../composables/formGroup.js";
+import { nativeInputType as G, useFormControl as H } from "../../../composables/formControl.js";
+import { useDialogContentWidth as O } from "../dialog/dialogSize.js";
+import { EyeOff as P, Eye as R } from "@lucide/vue";
+import { cn as W } from "../../../lib/cn.js";
+import { useUiText as q } from "../../../i18n/text.js";
+const J = ["value", "type", "name", "placeholder", "disabled", "readonly"], K = ["disabled", "aria-label", "aria-pressed"], M = ["value", "type", "name", "placeholder", "disabled", "readonly"], ae = /* @__PURE__ */ E({
+  inheritAttrs: !1,
+  __name: "Input",
+  props: {
+    modelValue: { default: "" },
+    type: { default: "text" },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    id: {},
+    name: {},
+    ariaLabel: {},
+    ariaLabelledby: {},
+    unit: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: C }) {
+    const e = t, l = F(() => e.disabled), p = C, f = q(), L = I(), b = d(() => !!e.unit || !!L.unit), r = S(!1), u = d(() => e.type === "password"), s = d(() => ["number", "integer", "decimal"].includes(e.type)), y = d(() => u.value && r.value ? "text" : G(e.type)), x = d(
+      () => W(
+        s.value ? "w-32 max-w-full" : "w-full",
+        u.value && "pr-8",
+        "min-w-[min(100%,6rem)] border bg-[var(--ui-surface)] text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none transition-[border-color,box-shadow,background-color] 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)]",
+        e.size === "sm" && "h-[var(--ui-control-sm)] rounded-[var(--ui-radius-control)] px-2",
+        e.size === "md" && "h-[var(--ui-control-md)] rounded-[var(--ui-radius-control)] px-3",
+        e.size === "lg" && "h-[var(--ui-control-lg)] rounded-[var(--ui-radius-control)] px-4",
+        T.value ? "border-[var(--ui-danger)] focus:border-[var(--ui-danger)]" : "border-[var(--ui-border)] focus:border-[var(--ui-primary)] enabled:hover:not-focus:border-[var(--ui-control-border-hover)]"
+      )
+    );
+    O(() => s.value ? void 0 : "sm");
+    const v = A("control"), { controlAttrs: h, wrapperAttrs: g, changed: w, invalid: T } = H({
+      value: () => e.modelValue,
+      disabled: () => l.value,
+      id: () => e.id,
+      ariaLabel: () => e.ariaLabel,
+      ariaLabelledby: () => e.ariaLabelledby,
+      invalid: () => e.invalid,
+      keyboard: { type: () => e.type, element: () => v.value, active: () => !l.value && !e.readonly }
+    });
+    return (D, o) => u.value || b.value ? (n(), c("span", m({ key: 0 }, a(g)(), {
+      class: ["flex min-w-0 items-center gap-2", s.value ? "max-w-full" : "w-full"],
+      "data-syno-pkg-land-ui": ""
+    }), [
+      k("span", {
+        class: z(["relative inline-flex min-w-0 items-center", s.value ? "shrink-0" : "flex-1"])
+      }, [
+        k("input", m({
+          ref_key: "control",
+          ref: v
+        }, a(h)(), {
+          value: t.modelValue,
+          type: y.value,
+          name: e.name,
+          placeholder: t.placeholder,
+          disabled: a(l),
+          readonly: t.readonly,
+          class: x.value,
+          onInput: o[0] || (o[0] = (i) => {
+            a(w)(i.target.value), p("update:modelValue", i.target.value);
+          })
+        }), null, 16, J),
+        u.value ? (n(), c("button", {
+          key: 0,
+          type: "button",
+          "data-ui-password-toggle": "",
+          disabled: a(l),
+          "aria-label": r.value ? a(f)("Hide password") : a(f)("Show password"),
+          "aria-pressed": r.value,
+          class: "absolute right-1 flex size-6 [--ui-hit-end-room:4px] items-center justify-center rounded-[var(--ui-radius-inner)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40",
+          onClick: o[1] || (o[1] = (i) => r.value = !r.value)
+        }, [
+          r.value ? (n(), V(a(P), {
+            key: 0,
+            class: "size-4",
+            "aria-hidden": "true"
+          })) : (n(), V(a(R), {
+            key: 1,
+            class: "size-4",
+            "aria-hidden": "true"
+          }))
+        ], 8, K)) : B("", !0)
+      ], 2),
+      b.value ? (n(), c("span", {
+        key: 0,
+        "data-ui-input-unit": "",
+        class: z(["shrink-0 whitespace-nowrap text-[length:var(--ui-font-size)] leading-5", a(l) ? "text-[var(--ui-text-disabled)]" : "text-[var(--ui-text)]"])
+      }, [
+        N(D.$slots, "unit", {}, () => [
+          U(j(t.unit), 1)
+        ])
+      ], 2)) : B("", !0)
+    ], 16)) : (n(), c("input", m({
+      key: 1,
+      ref_key: "control",
+      ref: v
+    }, { ...a(g)(), ...a(h)() }, {
+      value: t.modelValue,
+      type: y.value,
+      name: e.name,
+      placeholder: t.placeholder,
+      disabled: a(l),
+      readonly: t.readonly,
+      class: x.value,
+      "data-syno-pkg-land-ui": "",
+      onInput: o[2] || (o[2] = (i) => {
+        a(w)(i.target.value), p("update:modelValue", i.target.value);
+      })
+    }), null, 16, M));
+  }
+});
+export {
+  ae as default
+};

package/dist/modules/components/primitives/input/Input2.vue.js

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

package/dist/modules/components/primitives/input/Textarea.vue.js

@@ -0,0 +1,45 @@
+import { defineComponent as b, openBlock as p, createElementBlock as c, mergeProps as f, unref as a } from "vue";
+import { useGroupDisabled as v } from "../../../composables/formGroup.js";
+import { useFormControl as y } from "../../../composables/formControl.js";
+import { useDialogContentWidth as x } from "../dialog/dialogSize.js";
+const g = ["value", "name", "placeholder", "disabled", "readonly", "rows"], V = /* @__PURE__ */ b({
+  inheritAttrs: !1,
+  __name: "Textarea",
+  props: {
+    modelValue: { default: "" },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    rows: { default: 4 },
+    id: {},
+    name: {},
+    ariaLabel: {},
+    ariaLabelledby: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: d }) {
+    const e = t, r = v(() => e.disabled), i = d;
+    x(() => "md");
+    const { controlAttrs: s, wrapperAttrs: n, changed: u, invalid: m } = y({ value: () => e.modelValue, disabled: () => r.value, id: () => e.id, ariaLabel: () => e.ariaLabel, ariaLabelledby: () => e.ariaLabelledby, invalid: () => e.invalid });
+    return (h, o) => (p(), c("textarea", f({ ...a(n)(), ...a(s)() }, {
+      value: e.modelValue,
+      name: e.name,
+      placeholder: e.placeholder,
+      disabled: a(r),
+      readonly: e.readonly,
+      rows: e.rows,
+      class: [
+        "w-full min-w-0 resize-y rounded-[var(--ui-radius-control)] border bg-[var(--ui-surface)] px-3 py-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none transition-[border-color,box-shadow,background-color] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] placeholder:text-[var(--ui-text-muted)] focus:shadow-[var(--ui-shadow-focus-field)] disabled:bg-[var(--ui-surface-subtle)] disabled:text-[var(--ui-text-disabled)]",
+        a(m) ? "border-[var(--ui-danger)] focus:border-[var(--ui-danger)]" : "border-[var(--ui-border)] focus:border-[var(--ui-primary)]"
+      ],
+      "data-syno-pkg-land-ui": "",
+      onInput: o[0] || (o[0] = (l) => {
+        a(u)(l.target.value), i("update:modelValue", l.target.value);
+      })
+    }), null, 16, g));
+  }
+});
+export {
+  V as default
+};

package/dist/modules/components/primitives/input/Textarea2.vue.js

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

package/dist/modules/components/primitives/input-group/InputGroup.vue.js

@@ -0,0 +1,15 @@
+import { defineComponent as t, openBlock as n, createElementBlock as o, renderSlot as r } from "vue";
+const s = {
+  class: "flex min-w-0 items-center gap-2 [&>:first-child]:min-w-[6rem] [&>:first-child]:flex-1",
+  "data-syno-pkg-land-ui": ""
+}, c = /* @__PURE__ */ t({
+  __name: "InputGroup",
+  setup(i) {
+    return (e, l) => (n(), o("div", s, [
+      r(e.$slots, "default")
+    ]));
+  }
+});
+export {
+  c as default
+};

package/dist/modules/components/primitives/input-group/InputGroup2.vue.js

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

package/dist/modules/components/primitives/input-steppers/InputSteppers.vue.js

@@ -0,0 +1,265 @@
+import { defineComponent as re, useId as oe, computed as n, ref as m, watch as R, openBlock as v, createBlock as j, unref as r, withCtx as y, createVNode as s, createElementVNode as c, mergeProps as $, createElementBlock as w, createCommentVNode as D, normalizeClass as O, Fragment as ie, renderList as le, withModifiers as ue, toDisplayString as ne } from "vue";
+import { useGroupDisabled as se } from "../../../composables/formGroup.js";
+import { useUiText as de } from "../../../i18n/text.js";
+import { useFormControl as ve } from "../../../composables/formControl.js";
+import { Minus as U, ChevronDown as ce, Plus as G } from "@lucide/vue";
+import { PopoverRoot_default as fe } from "../../../vendor/reka-ui/dist/Popover/PopoverRoot.js";
+import { PopoverAnchor_default as pe } from "../../../vendor/reka-ui/dist/Popover/PopoverAnchor.js";
+import { PopoverContent_default as me } from "../../../vendor/reka-ui/dist/Popover/PopoverContent.js";
+import { PopoverPortal_default as be } from "../../../vendor/reka-ui/dist/Popover/PopoverPortal.js";
+import { PopoverTrigger_default as he } from "../../../vendor/reka-ui/dist/Popover/PopoverTrigger.js";
+import { cn as A } from "../../../lib/cn.js";
+import { useFloating as xe, FLOATING_SIZE_CLASS as ye } from "../popover/floating.js";
+import { resolveMin as we, resolveMax as ge, stepNumber as ke, normalizeNumber as M, parseNumberInput as De } from "../../../lib/numberField.js";
+const Ve = ["disabled", "aria-label"], _e = { class: "relative min-w-0 flex-1" }, Ce = ["value", "name", "placeholder", "disabled", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-disabled", "aria-activedescendant"], $e = ["disabled", "aria-expanded", "aria-label"], Ae = ["disabled", "aria-label"], Me = ["disabled", "aria-label"], Ne = ["disabled", "aria-label"], ze = ["aria-label"], Fe = ["id", "aria-selected", "onMouseenter", "onClick"], Ke = /* @__PURE__ */ re({
+  inheritAttrs: !1,
+  __name: "InputSteppers",
+  props: {
+    text: {},
+    modelValue: { default: 0 },
+    min: {},
+    max: {},
+    step: {},
+    precision: {},
+    width: { default: 120 },
+    controlsType: { default: "right-left" },
+    hasDivider: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    selectOnFocus: { type: Boolean, default: !0 },
+    menu: { default: () => [] },
+    patchNum: {},
+    ariaLabel: {},
+    ariaLabelledby: {},
+    name: {},
+    placeholder: {},
+    id: {}
+  },
+  emits: ["update:modelValue"],
+  setup(H, { emit: K }) {
+    const V = de(), e = H, u = se(() => e.disabled), Z = K, N = oe(), g = n(() => we(e.min)), k = n(() => ge(e.max)), z = n(() => e.min !== void 0 && Number.isFinite(g.value)), F = n(() => e.max !== void 0 && Number.isFinite(k.value)), b = n(() => ({
+      min: e.min,
+      max: e.max,
+      step: e.step,
+      precision: e.precision,
+      patchNum: e.patchNum
+    })), _ = m(null), I = m(null), d = m(String(e.modelValue)), C = m(!1), l = m(!1), i = m(-1);
+    R(
+      () => e.modelValue,
+      (a) => {
+        C.value || (d.value = String(a));
+      }
+    );
+    const S = n(() => !u.value && e.modelValue > g.value), L = n(() => !u.value && e.modelValue < k.value), P = (a) => `${N}-option-${a}`;
+    function h(a) {
+      return a === !1 ? !1 : (d.value = String(a), ee(a), a !== e.modelValue && Z("update:modelValue", a), !0);
+    }
+    function E() {
+      h(De(d.value, b.value)) || (d.value = String(e.modelValue));
+    }
+    function f(a) {
+      h(ke(e.modelValue, a, b.value));
+    }
+    function q(a) {
+      C.value = !0, d.value = String(e.modelValue), e.selectOnFocus && a.target.select();
+    }
+    function J() {
+      C.value = !1, E();
+    }
+    function Q() {
+      u.value || !e.menu.length || (l.value = !0);
+    }
+    function W() {
+      l.value = !1, _.value?.focus();
+    }
+    R(l, (a) => {
+      if (!a) return;
+      const t = e.menu.findIndex((o) => o.value === e.modelValue);
+      i.value = t < 0 ? 0 : t;
+    });
+    function T(a) {
+      const t = e.menu[a];
+      l.value = !1, t && h(M(t.value, b.value)), _.value?.focus();
+    }
+    function X(a) {
+      if (!u.value) {
+        if (l.value) {
+          a.key === "ArrowDown" ? (a.preventDefault(), i.value = (i.value + 1) % e.menu.length) : a.key === "ArrowUp" ? (a.preventDefault(), i.value = (i.value - 1 + e.menu.length) % e.menu.length) : a.key === "Home" ? (a.preventDefault(), i.value = 0) : a.key === "End" ? (a.preventDefault(), i.value = e.menu.length - 1) : a.key === "Enter" || a.key === " " ? (a.preventDefault(), T(i.value)) : a.key === "Escape" && (a.preventDefault(), W());
+          return;
+        }
+        a.key === "ArrowUp" ? (a.preventDefault(), f(1)) : a.key === "ArrowDown" ? (a.preventDefault(), e.menu.length ? Q() : f(-1)) : a.key === "Home" && z.value ? (a.preventDefault(), h(M(g.value, b.value))) : a.key === "End" && F.value ? (a.preventDefault(), h(M(k.value, b.value))) : a.key === "Enter" && E();
+      }
+    }
+    const { controlAttrs: B, wrapperAttrs: Y, changed: ee } = ve({ value: () => e.modelValue, disabled: () => u.value, id: () => e.id, ariaLabel: () => e.ariaLabel, ariaLabelledby: () => e.ariaLabelledby }), ae = xe(() => I.value?.$el, () => l.value), p = n(() => ({ increase: V("Increase value"), decrease: V("Decrease value"), presets: V("Preset values"), ...e.text }));
+    return (a, t) => (v(), j(r(fe), {
+      open: l.value,
+      "onUpdate:open": t[8] || (t[8] = (o) => l.value = o)
+    }, {
+      default: y(() => [
+        s(r(pe), {
+          ref_key: "anchorRef",
+          ref: I,
+          "as-child": ""
+        }, {
+          default: y(() => [
+            c("div", $(r(Y)(), {
+              class: ["relative inline-flex h-[var(--ui-control-md)] [@media(pointer:coarse)]:min-h-[var(--ui-hit-min)] max-w-full items-stretch rounded-[var(--ui-radius-control)] border border-[var(--ui-border)] bg-[var(--ui-surface)] hover:border-[var(--ui-control-border-hover)] has-[[aria-invalid=true]]:border-[var(--ui-danger)] transition-[border-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] focus-within:border-[var(--ui-primary)] focus-within:shadow-[var(--ui-shadow-focus)]", r(u) && "cursor-default opacity-60"],
+              style: { width: `${e.width}px` },
+              "data-syno-pkg-land-ui": ""
+            }), [
+              e.controlsType === "right-left" ? (v(), w("button", {
+                key: 0,
+                type: "button",
+                class: "flex w-6 shrink-0 items-center justify-center [@media(pointer:coarse)]:w-[var(--ui-hit-min)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-[var(--ui-text-secondary)]",
+                disabled: !S.value,
+                "aria-label": p.value.decrease,
+                onClick: t[0] || (t[0] = (o) => f(-1))
+              }, [
+                s(r(U), {
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })
+              ], 8, Ve)) : D("", !0),
+              c("div", _e, [
+                c("input", $({ ...r(B)(), id: r(B)().id ?? `${r(N)}-input` }, {
+                  ref_key: "inputRef",
+                  ref: _,
+                  value: d.value,
+                  name: e.name,
+                  placeholder: e.placeholder,
+                  disabled: r(u),
+                  type: "text",
+                  inputmode: "decimal",
+                  role: "spinbutton",
+                  autocomplete: "off",
+                  "aria-valuenow": e.modelValue,
+                  "aria-valuemin": z.value ? g.value : void 0,
+                  "aria-valuemax": F.value ? k.value : void 0,
+                  "aria-disabled": r(u) || void 0,
+                  "aria-activedescendant": l.value && i.value >= 0 ? P(i.value) : void 0,
+                  class: r(A)(
+                    "h-full w-full min-w-0 border-0 bg-transparent text-center text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)] disabled:cursor-default",
+                    e.hasDivider && e.controlsType === "right-left" && "border-x border-[var(--ui-control-divider)]",
+                    e.menu.length ? "pr-6" : ""
+                  ),
+                  onFocus: q,
+                  onBlur: J,
+                  onKeydown: X,
+                  onInput: t[1] || (t[1] = (o) => d.value = o.target.value)
+                }), null, 16, Ce),
+                e.menu.length ? (v(), j(r(he), {
+                  key: 0,
+                  "as-child": ""
+                }, {
+                  default: y(() => [
+                    c("button", {
+                      type: "button",
+                      class: "absolute top-1/2 right-0.5 flex size-5 [@media(pointer:coarse)]:after:absolute [@media(pointer:coarse)]:after:-inset-2 [@media(pointer:coarse)]:after:-end-0.5 [@media(pointer:coarse)]:after:-start-2 [@media(pointer:coarse)]:after:content-[''] -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-inner)] text-[var(--ui-text-muted)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40",
+                      disabled: r(u),
+                      "aria-expanded": l.value,
+                      "aria-label": p.value.presets
+                    }, [
+                      s(r(ce), {
+                        class: "size-3",
+                        "aria-hidden": "true"
+                      })
+                    ], 8, $e)
+                  ]),
+                  _: 1
+                })) : D("", !0)
+              ]),
+              e.controlsType === "right-left" ? (v(), w("button", {
+                key: 1,
+                type: "button",
+                class: "flex w-6 shrink-0 items-center justify-center [@media(pointer:coarse)]:w-[var(--ui-hit-min)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-[var(--ui-text-secondary)]",
+                disabled: !L.value,
+                "aria-label": p.value.increase,
+                onClick: t[2] || (t[2] = (o) => f(1))
+              }, [
+                s(r(G), {
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })
+              ], 8, Ae)) : D("", !0),
+              e.controlsType === "up-down" ? (v(), w("div", {
+                key: 2,
+                class: O(r(A)("flex w-6 shrink-0 flex-col [@media(pointer:coarse)]:flex-row", e.hasDivider && "border-l border-[var(--ui-control-divider)]"))
+              }, [
+                c("button", {
+                  type: "button",
+                  class: "flex flex-1 items-center justify-center [@media(pointer:coarse)]:w-[var(--ui-hit-min)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-[var(--ui-text-secondary)]",
+                  disabled: !L.value,
+                  "aria-label": p.value.increase,
+                  onClick: t[3] || (t[3] = (o) => f(1))
+                }, [
+                  s(r(G), {
+                    class: "size-3",
+                    "aria-hidden": "true"
+                  })
+                ], 8, Me),
+                c("button", {
+                  type: "button",
+                  class: "flex flex-1 items-center justify-center border-t border-[var(--ui-control-divider)] [@media(pointer:coarse)]:w-[var(--ui-hit-min)] [@media(pointer:coarse)]:border-t-0 [@media(pointer:coarse)]:border-l text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-[var(--ui-text-secondary)]",
+                  disabled: !S.value,
+                  "aria-label": p.value.decrease,
+                  onClick: t[4] || (t[4] = (o) => f(-1))
+                }, [
+                  s(r(U), {
+                    class: "size-3",
+                    "aria-hidden": "true"
+                  })
+                ], 8, Ne)
+              ], 2)) : D("", !0)
+            ], 16)
+          ]),
+          _: 1
+        }, 512),
+        s(r(be), null, {
+          default: y(() => [
+            s(r(me), $({
+              "data-ui-popup": "",
+              "side-offset": 4,
+              align: "start"
+            }, r(ae), {
+              class: ["z-[1450] min-w-[min(var(--reka-popover-trigger-width),var(--reka-popper-available-width))] overflow-y-auto rounded-[var(--ui-radius-popover)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)] outline-none", r(ye)],
+              "data-syno-pkg-land-ui": "",
+              onOpenAutoFocus: t[6] || (t[6] = (o) => o.preventDefault()),
+              onCloseAutoFocus: t[7] || (t[7] = (o) => o.preventDefault())
+            }), {
+              default: y(() => [
+                c("div", {
+                  role: "listbox",
+                  "aria-label": p.value.presets,
+                  class: "max-h-64 overflow-auto"
+                }, [
+                  (v(!0), w(ie, null, le(e.menu, (o, x) => (v(), w("button", {
+                    id: P(x),
+                    key: `${o.value}-${x}`,
+                    type: "button",
+                    role: "option",
+                    "aria-selected": o.value === e.modelValue,
+                    class: O(
+                      r(A)(
+                        "flex min-h-[var(--ui-menu-row-height)] w-full items-center whitespace-normal py-2 rounded-[var(--ui-radius-inner)] px-2 text-left text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none",
+                        x === i.value && "bg-[var(--ui-primary-soft)]"
+                      )
+                    ),
+                    onMouseenter: (te) => i.value = x,
+                    onMousedown: t[5] || (t[5] = ue(() => {
+                    }, ["prevent"])),
+                    onClick: (te) => T(x)
+                  }, ne(o.title), 43, Fe))), 128))
+                ], 8, ze)
+              ]),
+              _: 1
+            }, 16, ["class"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["open"]));
+  }
+});
+export {
+  Ke as default
+};

package/dist/modules/components/primitives/input-steppers/InputSteppers2.vue.js

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

package/dist/modules/components/primitives/layout/Col.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as u, inject as a, computed as c, openBlock as m, createElementBlock as x, unref as p, normalizeStyle as d, renderSlot as S } from "vue";
+import { resolveResponsive as h } from "./breakpoints.js";
+import { GRID_LAYOUT as y } from "./context.js";
+const _ = ["data-col"], b = /* @__PURE__ */ u({
+  __name: "Col",
+  props: {
+    flex: { default: "none" }
+  },
+  setup(o) {
+    const i = o, r = a(y, null);
+    function l(e, t) {
+      const n = Number(e);
+      return !Number.isFinite(n) || n <= 0 ? 1 : Math.min(Math.floor(n), t);
+    }
+    function f(e) {
+      if (e === "none") return { flexGrow: "0", flexShrink: "0", flexBasis: "auto" };
+      if (e === "auto") return { flexGrow: "1", flexShrink: "1", flexBasis: "auto" };
+      if (typeof e == "number") return { flexGrow: String(e), flexShrink: "1", flexBasis: "0%" };
+      const t = e.trim();
+      return Number.isFinite(Number(t)) ? { flexGrow: t, flexShrink: "1", flexBasis: "0%" } : { flexGrow: "0", flexShrink: "0", flexBasis: e };
+    }
+    const s = c(() => {
+      if (!r) return;
+      const e = h(i.flex, r.active.value) ?? "none";
+      return r.type === "grid" ? { gridColumn: `span ${l(e, r.columns.value)}` } : f(e);
+    });
+    return (e, t) => (m(), x("div", {
+      style: d(s.value),
+      "data-col": p(r)?.type
+    }, [
+      S(e.$slots, "default")
+    ], 12, _));
+  }
+});
+export {
+  b as default
+};

package/dist/modules/components/primitives/layout/Col2.vue.js

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

package/dist/modules/components/primitives/layout/Grid.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as c, computed as s, provide as d, openBlock as g, createElementBlock as v, normalizeStyle as f, renderSlot as y } from "vue";
+import { useActiveBreakpoint as T, resolveResponsive as o } from "./breakpoints.js";
+import { trackCount as l, gapStyle as C, trackTemplate as a } from "./gap.js";
+import { GRID_LAYOUT as k } from "./context.js";
+const h = /* @__PURE__ */ c({
+  __name: "Grid",
+  props: {
+    columns: {},
+    rows: {},
+    gridTemplateColumns: {},
+    gridTemplateRows: {},
+    align: {},
+    justify: {},
+    gap: {}
+  },
+  setup(i) {
+    const t = i, r = T(), n = s(() => l(o(t.columns, r.value) ?? 24, 24)), m = s(() => l(o(t.rows, r.value) ?? 1, 1));
+    function p(e) {
+      return e === "stretch" || e === "baseline" ? "normal" : e;
+    }
+    const u = s(() => {
+      const e = r.value;
+      return {
+        display: "grid",
+        gridTemplateColumns: a(o(t.gridTemplateColumns, e), n.value),
+        gridTemplateRows: a(o(t.gridTemplateRows, e), m.value),
+        alignItems: o(t.align, e) ?? "start",
+        justifyContent: p(o(t.justify, e) ?? "start"),
+        ...C(o(t.gap, e))
+      };
+    });
+    return d(k, { type: "grid", active: r, columns: n }), (e, w) => (g(), v("div", {
+      style: f(u.value)
+    }, [
+      y(e.$slots, "default")
+    ], 4));
+  }
+});
+export {
+  h as default
+};

package/dist/modules/components/primitives/layout/Grid2.vue.js

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

package/dist/modules/components/primitives/layout/Row.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as n, computed as a, provide as p, openBlock as i, createElementBlock as u, normalizeStyle as f, renderSlot as m } from "vue";
+import { useActiveBreakpoint as c, resolveResponsive as o } from "./breakpoints.js";
+import { justifyContentValue as v, alignItemsValue as y, GRID_LAYOUT as d } from "./context.js";
+import { gapStyle as g } from "./gap.js";
+const k = /* @__PURE__ */ n({
+  __name: "Row",
+  props: {
+    align: {},
+    justify: {},
+    flexWrap: { type: [Boolean, Object] },
+    gap: {}
+  },
+  setup(l) {
+    const t = l, e = c(), r = a(() => ({
+      display: "flex",
+      flexWrap: o(t.flexWrap, e.value) ?? !1 ? "wrap" : "nowrap",
+      alignItems: y(o(t.align, e.value) ?? "start"),
+      justifyContent: v(o(t.justify, e.value) ?? "start"),
+      ...g(o(t.gap, e.value))
+    }));
+    return p(d, { type: "row", active: e, columns: a(() => 1) }), (s, _) => (i(), u("div", {
+      style: f(r.value)
+    }, [
+      m(s.$slots, "default")
+    ], 4));
+  }
+});
+export {
+  k as default
+};

package/dist/modules/components/primitives/layout/Row2.vue.js

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