@treeui/vue 0.1.0 → 0.1.1

package/dist/index.js

@@ -0,0 +1,824 @@
+import { defineComponent as F, computed as o, openBlock as l, createElementBlock as d, normalizeClass as S, renderSlot as b, createCommentVNode as _, createElementVNode as v, toDisplayString as L, createBlock as re, resolveDynamicComponent as Ue, withCtx as Q, createVNode as E, ref as R, useAttrs as ie, toRef as Be, watch as we, onBeforeUnmount as Oe, unref as f, normalizeStyle as de, mergeProps as ue, normalizeProps as te, guardReactiveProps as ae, Transition as Se, Fragment as be, renderList as he, nextTick as le, useSlots as qe, Teleport as Ge, createTextVNode as Je } from "vue";
+import { startOfDay as ke, parseDateValue as ge, createId as Ie, startOfMonth as U, startOfWeek as ee, addDays as H, toDateValue as $e, isSameDay as Te, addMonths as De, isEscapeKey as Ce, isActivationKey as Ae, focusFirst as Pe, getFocusableElements as Qe, focusLast as Xe } from "@treeui/utils";
+import { getTreeIcon as se, treeIconDefaults as oe } from "@treeui/icons";
+const Ye = {
+  key: 0,
+  class: "tree-badge__icon",
+  "aria-hidden": "true"
+}, Le = /* @__PURE__ */ F({
+  __name: "TreeBadge",
+  props: {
+    variant: { default: "soft" },
+    size: { default: "md" }
+  },
+  setup(t) {
+    const p = t, n = o(() => [
+      "tree-badge",
+      `tree-badge--${p.variant}`,
+      `tree-badge--${p.size}`
+    ]);
+    return (r, c) => (l(), d("span", {
+      class: S(n.value)
+    }, [
+      r.$slots.icon ? (l(), d("span", Ye, [
+        b(r.$slots, "icon")
+      ])) : _("", !0),
+      b(r.$slots, "default")
+    ], 2));
+  }
+}), Ze = ["aria-label"], et = { class: "tree-visually-hidden" }, ne = /* @__PURE__ */ F({
+  __name: "TreeSpinner",
+  props: {
+    size: { default: "md" },
+    label: { default: "Loading" }
+  },
+  setup(t) {
+    const p = t, n = o(() => ["tree-spinner", `tree-spinner--${p.size}`]);
+    return (r, c) => (l(), d("span", {
+      class: S(n.value),
+      role: "status",
+      "aria-label": t.label
+    }, [
+      c[0] || (c[0] = v("span", {
+        class: "tree-spinner__ring",
+        "aria-hidden": "true"
+      }, null, -1)),
+      v("span", et, L(t.label), 1)
+    ], 10, Ze));
+  }
+}), tt = {
+  key: 0,
+  class: "tree-button__spinner"
+}, at = {
+  key: 1,
+  class: "tree-button__icon",
+  "aria-hidden": "true"
+}, st = { class: "tree-button__label" }, Ee = /* @__PURE__ */ F({
+  __name: "TreeButton",
+  props: {
+    as: { default: "button" },
+    variant: { default: "solid" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    type: { default: "button" }
+  },
+  emits: ["click"],
+  setup(t, { emit: p }) {
+    const n = t, r = p, c = o(() => n.as === "button"), a = o(() => n.disabled || n.loading), h = o(() => [
+      "tree-button",
+      `tree-button--${n.variant}`,
+      `tree-button--${n.size}`,
+      {
+        "is-loading": n.loading,
+        "is-disabled": a.value
+      }
+    ]), T = (m) => {
+      if (a.value) {
+        m.preventDefault(), m.stopPropagation();
+        return;
+      }
+      r("click", m);
+    };
+    return (m, k) => (l(), re(Ue(t.as), {
+      type: c.value ? t.type : void 0,
+      class: S(h.value),
+      disabled: c.value ? a.value : void 0,
+      "aria-disabled": !c.value && a.value ? "true" : void 0,
+      "aria-busy": t.loading || void 0,
+      tabindex: !c.value && a.value ? -1 : void 0,
+      onClick: T
+    }, {
+      default: Q(() => [
+        t.loading ? (l(), d("span", tt, [
+          E(ne, {
+            size: "sm",
+            label: "Loading"
+          })
+        ])) : _("", !0),
+        m.$slots.icon ? (l(), d("span", at, [
+          b(m.$slots, "icon")
+        ])) : _("", !0),
+        v("span", st, [
+          b(m.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["type", "class", "disabled", "aria-disabled", "aria-busy", "tabindex"]));
+  }
+}), ot = {
+  key: 0,
+  class: "tree-card__header"
+}, lt = { class: "tree-card__body" }, nt = {
+  key: 1,
+  class: "tree-card__footer"
+}, Re = /* @__PURE__ */ F({
+  __name: "TreeCard",
+  props: {
+    as: { default: "section" },
+    variant: { default: "outline" },
+    size: { default: "md" }
+  },
+  setup(t) {
+    const p = t, n = o(() => [
+      "tree-card",
+      `tree-card--${p.variant}`,
+      `tree-card--${p.size}`
+    ]);
+    return (r, c) => (l(), re(Ue(t.as), {
+      class: S(n.value)
+    }, {
+      default: Q(() => [
+        r.$slots.header ? (l(), d("header", ot, [
+          b(r.$slots, "header")
+        ])) : _("", !0),
+        v("div", lt, [
+          b(r.$slots, "default")
+        ]),
+        r.$slots.footer ? (l(), d("footer", nt, [
+          b(r.$slots, "footer")
+        ])) : _("", !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Ve = (t, p, n) => {
+  const r = R(p), c = o(() => t.value ?? r.value);
+  return {
+    value: c,
+    setValue: (h) => {
+      h !== c.value && (t.value === void 0 && (r.value = h), n(h));
+    }
+  };
+}, rt = ["data-state"], it = ["name", "value"], dt = ["disabled", "aria-controls", "aria-expanded", "aria-invalid"], ut = {
+  key: 0,
+  class: "tree-date-picker__slot tree-date-picker__slot--prefix"
+}, ct = ["data-placeholder"], ft = { class: "tree-date-picker__slot tree-date-picker__slot--suffix" }, pt = ["id"], vt = { class: "tree-date-picker__header" }, mt = ["disabled"], yt = ["disabled"], _t = {
+  class: "tree-date-picker__weekdays",
+  "aria-hidden": "true"
+}, bt = ["aria-selected"], ht = ["data-date", "disabled", "tabindex", "aria-current", "aria-label", "onClick", "onKeydown"], Fe = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "TreeDatePicker",
+  props: {
+    modelValue: { default: "" },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    placeholder: { default: "Select date" },
+    locale: { default: "en-US" },
+    min: { default: "" },
+    max: { default: "" },
+    weekStartsOn: { default: 0 },
+    id: { default: void 0 }
+  },
+  emits: ["update:modelValue", "update:open", "open-change", "select"],
+  setup(t, { emit: p }) {
+    const n = se("calendar"), r = se("chevron-left"), c = se("chevron-right"), a = t, h = p, T = ie(), m = ke(/* @__PURE__ */ new Date()), k = o(() => ge(a.modelValue)), u = o(() => ge(a.min)), D = o(() => ge(a.max)), w = a.id ?? Ie("tree-date-picker"), z = `${w}-caption`, j = R(null), W = R(null), M = /* @__PURE__ */ new Map(), O = R(U(k.value ?? m)), y = R(k.value ?? m), q = o(() => {
+      const { class: e, style: s, name: g, ...J } = T;
+      return J;
+    }), G = o(
+      () => typeof T.name == "string" ? T.name : void 0
+    ), ce = o(() => [
+      "tree-date-picker",
+      `tree-date-picker--${a.size}`,
+      {
+        "is-disabled": a.disabled,
+        "is-invalid": a.invalid,
+        "is-open": C.value
+      },
+      T.class
+    ]), K = o(() => T.style), { value: C, setValue: X } = Ve(
+      Be(a, "open"),
+      a.defaultOpen,
+      (e) => {
+        h("update:open", e), h("open-change", e);
+      }
+    ), Y = o(() => k.value ? new Intl.DateTimeFormat(a.locale, {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }).format(k.value) : a.placeholder), fe = o(
+      () => new Intl.DateTimeFormat(a.locale, {
+        month: "long",
+        year: "numeric"
+      }).format(O.value)
+    ), pe = o(() => {
+      const e = new Intl.DateTimeFormat(a.locale, { weekday: "short" }), s = ee(new Date(2024, 0, 7), a.weekStartsOn);
+      return Array.from(
+        { length: 7 },
+        (g, J) => e.format(H(s, J))
+      );
+    }), N = (e) => !!(a.disabled || u.value && e < u.value || D.value && e > D.value), A = (e) => {
+      y.value = ke(e), O.value = U(e);
+    };
+    we(
+      k,
+      (e) => {
+        if (e) {
+          A(e);
+          return;
+        }
+        C.value || A(m);
+      },
+      { immediate: !0 }
+    );
+    const ve = o(() => {
+      const e = ee(U(O.value), a.weekStartsOn);
+      return Array.from(
+        { length: 6 },
+        (s, g) => Array.from({ length: 7 }, (J, $) => {
+          const B = H(e, g * 7 + $), We = $e(B);
+          return {
+            date: B,
+            dayLabel: B.getDate(),
+            disabled: N(B),
+            inMonth: B.getMonth() === O.value.getMonth(),
+            isFocused: Te(B, y.value),
+            isSelected: Te(B, k.value),
+            isToday: Te(B, m),
+            key: We
+          };
+        })
+      );
+    }), me = o(() => u.value ? U(O.value) > U(u.value) : !0), ye = o(() => D.value ? U(O.value) < U(D.value) : !0), i = () => {
+      const e = $e(y.value);
+      le(() => {
+        var s;
+        (s = M.get(e)) == null || s.focus();
+      });
+    }, I = (e, s) => {
+      if (e instanceof HTMLButtonElement) {
+        M.set(s, e);
+        return;
+      }
+      M.delete(s);
+    }, V = () => {
+      a.disabled || (A(k.value ?? y.value ?? m), X(!0), i());
+    }, x = (e = !1) => {
+      X(!1), e && le(() => {
+        var s;
+        (s = W.value) == null || s.focus();
+      });
+    }, Z = () => {
+      if (C.value) {
+        x();
+        return;
+      }
+      V();
+    }, ze = (e) => {
+      const s = De(O.value, e);
+      A(s), i();
+    }, P = (e) => {
+      N(e) || (A(e), i());
+    }, Me = (e) => {
+      if (N(e))
+        return;
+      const s = ke(e), g = $e(s);
+      A(s), h("update:modelValue", g), h("select", g), x(!0);
+    }, He = (e) => {
+      if (!a.disabled) {
+        if (Ce(e) && C.value) {
+          e.preventDefault(), x();
+          return;
+        }
+        (Ae(e) || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), V());
+      }
+    }, je = (e, s) => {
+      if (Ce(e)) {
+        e.preventDefault(), x(!0);
+        return;
+      }
+      if (Ae(e)) {
+        e.preventDefault(), Me(s);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault(), P(H(s, -1));
+          break;
+        case "ArrowRight":
+          e.preventDefault(), P(H(s, 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault(), P(H(s, -7));
+          break;
+        case "ArrowDown":
+          e.preventDefault(), P(H(s, 7));
+          break;
+        case "Home":
+          e.preventDefault(), P(ee(s, a.weekStartsOn));
+          break;
+        case "End":
+          e.preventDefault(), P(H(ee(s, a.weekStartsOn), 6));
+          break;
+        case "PageUp":
+          e.preventDefault(), P(De(s, e.shiftKey ? -12 : -1));
+          break;
+        case "PageDown":
+          e.preventDefault(), P(De(s, e.shiftKey ? 12 : 1));
+          break;
+      }
+    }, _e = (e) => {
+      var g;
+      if (!C.value)
+        return;
+      const s = e.target;
+      s instanceof Node && ((g = j.value) != null && g.contains(s) || x());
+    };
+    return we(C, (e) => {
+      if (e) {
+        document.addEventListener("pointerdown", _e);
+        return;
+      }
+      document.removeEventListener("pointerdown", _e);
+    }), Oe(() => {
+      document.removeEventListener("pointerdown", _e);
+    }), (e, s) => (l(), d("div", {
+      ref_key: "rootRef",
+      ref: j,
+      class: S(ce.value),
+      style: de(K.value),
+      "data-state": f(C) ? "open" : "closed"
+    }, [
+      G.value ? (l(), d("input", {
+        key: 0,
+        type: "hidden",
+        name: G.value,
+        value: t.modelValue
+      }, null, 8, it)) : _("", !0),
+      v("button", ue({
+        ref_key: "triggerRef",
+        ref: W
+      }, q.value, {
+        type: "button",
+        class: "tree-date-picker__trigger",
+        disabled: t.disabled,
+        "aria-controls": f(C) ? f(w) : void 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": f(C),
+        "aria-invalid": t.invalid || void 0,
+        onClick: Z,
+        onKeydown: He
+      }), [
+        e.$slots.prefix ? (l(), d("span", ut, [
+          b(e.$slots, "prefix")
+        ])) : _("", !0),
+        v("span", {
+          class: "tree-date-picker__value",
+          "data-placeholder": k.value ? void 0 : !0
+        }, L(Y.value), 9, ct),
+        v("span", ft, [
+          b(e.$slots, "suffix", {}, () => [
+            E(f(n), te(ae(f(oe))), null, 16)
+          ])
+        ])
+      ], 16, dt),
+      E(Se, { name: "tree-fade" }, {
+        default: Q(() => [
+          f(C) && !t.disabled ? (l(), d("div", {
+            key: 0,
+            id: f(w),
+            class: "tree-date-picker__content",
+            role: "dialog",
+            "aria-modal": "false",
+            "aria-labelledby": z
+          }, [
+            v("div", vt, [
+              v("button", {
+                type: "button",
+                class: "tree-date-picker__nav",
+                disabled: !me.value,
+                "aria-label": "Previous month",
+                onClick: s[0] || (s[0] = (g) => ze(-1))
+              }, [
+                E(f(r), te(ae(f(oe))), null, 16)
+              ], 8, mt),
+              v("p", {
+                id: z,
+                class: "tree-date-picker__month"
+              }, L(fe.value), 1),
+              v("button", {
+                type: "button",
+                class: "tree-date-picker__nav",
+                disabled: !ye.value,
+                "aria-label": "Next month",
+                onClick: s[1] || (s[1] = (g) => ze(1))
+              }, [
+                E(f(c), te(ae(f(oe))), null, 16)
+              ], 8, yt)
+            ]),
+            v("div", _t, [
+              (l(!0), d(be, null, he(pe.value, (g) => (l(), d("span", {
+                key: g,
+                class: "tree-date-picker__weekday"
+              }, L(g), 1))), 128))
+            ]),
+            v("div", {
+              class: "tree-date-picker__grid",
+              role: "grid",
+              "aria-labelledby": z
+            }, [
+              (l(!0), d(be, null, he(ve.value, (g, J) => (l(), d("div", {
+                key: J,
+                class: "tree-date-picker__row",
+                role: "row"
+              }, [
+                (l(!0), d(be, null, he(g, ($) => (l(), d("div", {
+                  key: $.key,
+                  class: "tree-date-picker__cell",
+                  role: "gridcell",
+                  "aria-selected": $.isSelected
+                }, [
+                  v("button", {
+                    ref_for: !0,
+                    ref: (B) => I(B, $.key),
+                    type: "button",
+                    class: S(["tree-date-picker__day", {
+                      "is-muted": !$.inMonth,
+                      "is-selected": $.isSelected,
+                      "is-today": $.isToday
+                    }]),
+                    "data-date": $.key,
+                    disabled: $.disabled,
+                    tabindex: $.isFocused ? 0 : -1,
+                    "aria-current": $.isToday ? "date" : void 0,
+                    "aria-label": $.key,
+                    onClick: (B) => Me($.date),
+                    onKeydown: (B) => je(B, $.date)
+                  }, L($.dayLabel), 43, ht)
+                ], 8, bt))), 128))
+              ]))), 128))
+            ])
+          ], 8, pt)) : _("", !0)
+        ]),
+        _: 1
+      })
+    ], 14, rt));
+  }
+}), kt = {
+  key: 0,
+  class: "tree-input__slot tree-input__slot--prefix"
+}, gt = ["type", "value", "placeholder", "disabled", "aria-invalid"], $t = {
+  key: 2,
+  class: "tree-input__slot tree-input__slot--suffix"
+}, Ke = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "TreeInput",
+  props: {
+    modelValue: { default: "" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    type: { default: "text" },
+    placeholder: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: p }) {
+    const n = t, r = p, c = ie(), a = o(() => [
+      "tree-input",
+      `tree-input--${n.size}`,
+      {
+        "is-disabled": n.disabled,
+        "is-invalid": n.invalid,
+        "is-loading": n.loading
+      },
+      c.class
+    ]), h = o(() => c.style), T = o(() => {
+      const { class: u, style: D, ...w } = c;
+      return w;
+    }), m = o(() => `${n.modelValue ?? ""}`), k = (u) => {
+      r("update:modelValue", u.target.value);
+    };
+    return (u, D) => (l(), d("label", {
+      class: S(a.value),
+      style: de(h.value)
+    }, [
+      u.$slots.prefix ? (l(), d("span", kt, [
+        b(u.$slots, "prefix")
+      ])) : _("", !0),
+      v("input", ue(T.value, {
+        class: "tree-input__field",
+        type: t.type,
+        value: m.value,
+        placeholder: t.placeholder,
+        disabled: t.disabled,
+        "aria-invalid": t.invalid || void 0,
+        onInput: k
+      }), null, 16, gt),
+      t.loading ? (l(), re(ne, {
+        key: 1,
+        size: "sm",
+        label: "Loading"
+      })) : _("", !0),
+      u.$slots.suffix ? (l(), d("span", $t, [
+        b(u.$slots, "suffix")
+      ])) : _("", !0)
+    ], 6));
+  }
+}), Tt = ["data-state"], Dt = ["aria-disabled"], wt = ["data-state"], Ct = { class: "tree-modal__positioner" }, Bt = ["id", "aria-labelledby", "aria-describedby"], Ot = {
+  key: 0,
+  class: "tree-modal__topbar"
+}, St = { class: "tree-modal__title" }, It = ["aria-label"], Vt = { class: "tree-modal__body" }, zt = {
+  key: 2,
+  class: "tree-modal__footer"
+}, Ne = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "TreeModal",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    title: { default: "" },
+    description: { default: "" },
+    closeOnEscape: { type: Boolean, default: !0 },
+    closeOnOverlay: { type: Boolean, default: !0 },
+    showCloseButton: { type: Boolean, default: !0 },
+    closeLabel: { default: "Close modal" },
+    id: { default: void 0 }
+  },
+  emits: ["update:open", "open-change"],
+  setup(t, { emit: p }) {
+    const n = se("x"), r = t, c = p, a = ie(), h = r.id ?? Ie("tree-modal"), T = `${h}-title`, m = `${h}-description`, k = R(null), u = R(null), D = R(null), w = o(() => !!(r.title || z.header)), z = qe(), j = o(() => ["tree-modal", a.class]), W = o(() => a.style), M = o(() => {
+      const { class: i, style: I, ...V } = a;
+      return V;
+    }), O = o(() => [
+      "tree-modal__surface",
+      `tree-modal__surface--${r.size}`
+    ]), { value: y, setValue: q } = Ve(
+      Be(r, "open"),
+      r.defaultOpen,
+      (i) => {
+        c("update:open", i), c("open-change", i);
+      }
+    ), G = o(() => w.value ? T : void 0), ce = o(() => r.description ? m : void 0);
+    let K = 0, C = "";
+    const X = () => {
+      typeof document > "u" || (K === 0 && (C = document.body.style.overflow, document.body.style.overflow = "hidden"), K += 1);
+    }, Y = () => {
+      typeof document > "u" || K === 0 || (K -= 1, K === 0 && (document.body.style.overflow = C));
+    }, fe = () => {
+      le(() => {
+        if (!u.value)
+          return;
+        Pe(u.value) || u.value.focus();
+      });
+    }, pe = () => {
+      r.disabled || (D.value = document.activeElement, q(!0));
+    }, N = () => {
+      q(!1);
+    }, A = (i) => {
+      if (r.disabled) {
+        i.preventDefault(), i.stopPropagation();
+        return;
+      }
+      i.defaultPrevented || pe();
+    }, ve = () => {
+      r.closeOnOverlay && N();
+    }, me = (i) => {
+      i.stopPropagation();
+    }, ye = (i) => {
+      if (Ce(i) && r.closeOnEscape) {
+        i.preventDefault(), N();
+        return;
+      }
+      if (i.key !== "Tab" || !u.value)
+        return;
+      const I = Qe(u.value);
+      if (!I.length) {
+        i.preventDefault(), u.value.focus();
+        return;
+      }
+      const V = I[0], x = I[I.length - 1], Z = document.activeElement;
+      i.shiftKey && Z === V && (i.preventDefault(), Xe(u.value)), !i.shiftKey && Z === x && (i.preventDefault(), Pe(u.value));
+    };
+    return we(y, (i, I) => {
+      if (i) {
+        X(), fe();
+        return;
+      }
+      I && (Y(), le(() => {
+        var V;
+        (V = D.value) == null || V.focus();
+      }));
+    }), Oe(() => {
+      y.value && Y();
+    }), (i, I) => (l(), d("div", {
+      ref_key: "rootRef",
+      ref: k,
+      class: S(j.value),
+      style: de(W.value),
+      "data-state": f(y) ? "open" : "closed"
+    }, [
+      i.$slots.trigger ? (l(), d("span", ue({
+        key: 0,
+        class: "tree-modal__trigger"
+      }, M.value, {
+        "aria-disabled": t.disabled || void 0,
+        onClick: A
+      }), [
+        b(i.$slots, "trigger")
+      ], 16, Dt)) : _("", !0),
+      (l(), re(Ge, { to: "body" }, [
+        E(Se, { name: "tree-modal-fade" }, {
+          default: Q(() => [
+            f(y) ? (l(), d("div", {
+              key: 0,
+              class: "tree-modal__portal",
+              "data-state": f(y) ? "open" : "closed"
+            }, [
+              v("div", {
+                class: "tree-modal__backdrop",
+                "aria-hidden": "true",
+                onClick: ve
+              }),
+              v("div", Ct, [
+                v("div", {
+                  id: f(h),
+                  ref_key: "surfaceRef",
+                  ref: u,
+                  class: S(O.value),
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-labelledby": G.value,
+                  "aria-describedby": ce.value,
+                  tabindex: "-1",
+                  onClick: me,
+                  onKeydown: ye
+                }, [
+                  w.value || t.showCloseButton ? (l(), d("div", Ot, [
+                    w.value ? (l(), d("div", {
+                      key: 0,
+                      id: T,
+                      class: "tree-modal__header"
+                    }, [
+                      b(i.$slots, "header", {}, () => [
+                        v("h2", St, L(t.title), 1)
+                      ])
+                    ])) : _("", !0),
+                    t.showCloseButton ? (l(), d("button", {
+                      key: 1,
+                      type: "button",
+                      class: "tree-modal__close",
+                      "aria-label": t.closeLabel,
+                      onClick: N
+                    }, [
+                      E(f(n), te(ae(f(oe))), null, 16)
+                    ], 8, It)) : _("", !0)
+                  ])) : _("", !0),
+                  t.description ? (l(), d("p", {
+                    key: 1,
+                    id: m,
+                    class: "tree-modal__description"
+                  }, L(t.description), 1)) : _("", !0),
+                  v("div", Vt, [
+                    b(i.$slots, "content", {}, () => [
+                      b(i.$slots, "default")
+                    ])
+                  ]),
+                  i.$slots.footer ? (l(), d("div", zt, [
+                    b(i.$slots, "footer")
+                  ])) : _("", !0)
+                ], 42, Bt)
+              ])
+            ], 8, wt)) : _("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ], 14, Tt));
+  }
+}), Mt = ["data-state"], At = ["aria-describedby"], Pt = ["id", "data-state"], xe = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "TreeTooltip",
+  props: {
+    open: { type: Boolean },
+    defaultOpen: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    content: { default: "" },
+    side: { default: "top" },
+    delay: { default: 80 },
+    id: { default: void 0 }
+  },
+  emits: ["update:open", "open-change"],
+  setup(t, { emit: p }) {
+    const n = t, r = p, c = ie(), a = n.id ?? Ie("tree-tooltip"), h = o(() => {
+      const { class: y, style: q, ...G } = c;
+      return G;
+    }), T = o(() => ["tree-tooltip", c.class]), m = o(() => c.style), { value: k, setValue: u } = Ve(
+      Be(n, "open"),
+      n.defaultOpen,
+      (y) => {
+        r("update:open", y), r("open-change", y);
+      }
+    );
+    let D;
+    const w = () => {
+      D && (clearTimeout(D), D = void 0);
+    }, z = (y = !1) => {
+      if (!n.disabled) {
+        if (w(), y) {
+          u(!0);
+          return;
+        }
+        D = setTimeout(() => {
+          u(!0);
+        }, n.delay);
+      }
+    }, j = () => {
+      z(!0);
+    }, W = () => {
+      z();
+    }, M = () => {
+      w(), u(!1);
+    }, O = o(() => [
+      "tree-tooltip__content",
+      `tree-tooltip__content--${n.side}`
+    ]);
+    return Oe(w), (y, q) => (l(), d("span", {
+      class: S(T.value),
+      style: de(m.value),
+      "data-state": f(k) ? "open" : "closed",
+      onMouseenter: W,
+      onMouseleave: M,
+      onFocusCapture: j,
+      onBlurCapture: M
+    }, [
+      v("span", ue({
+        class: "tree-tooltip__trigger",
+        "aria-describedby": f(k) ? f(a) : void 0
+      }, h.value), [
+        b(y.$slots, "trigger", {}, () => [
+          b(y.$slots, "default")
+        ])
+      ], 16, At),
+      E(Se, { name: "tree-fade" }, {
+        default: Q(() => [
+          f(k) && !t.disabled ? (l(), d("span", {
+            key: 0,
+            id: f(a),
+            role: "tooltip",
+            class: S(O.value),
+            "data-state": f(k) ? "open" : "closed"
+          }, [
+            b(y.$slots, "content", {}, () => [
+              Je(L(t.content), 1)
+            ])
+          ], 10, Pt)) : _("", !0)
+        ]),
+        _: 3
+      })
+    ], 46, Mt));
+  }
+}), Lt = {
+  TBadge: Le,
+  TButton: Ee,
+  TCard: Re,
+  TDatePicker: Fe,
+  TInput: Ke,
+  TModal: Ne,
+  TSpinner: ne,
+  TTooltip: xe,
+  TreeBadge: Le,
+  TreeButton: Ee,
+  TreeCard: Re,
+  TreeDatePicker: Fe,
+  TreeInput: Ke,
+  TreeModal: Ne,
+  TreeSpinner: ne,
+  TreeTooltip: xe
+}, Et = {
+  install(t) {
+    Object.entries(Lt).forEach(([p, n]) => {
+      t.component(p, n);
+    });
+  }
+}, Nt = Et.install, xt = ["sm", "md", "lg"], Ut = ["solid", "outline", "ghost", "soft", "danger"], Ht = ["outline", "soft", "solid"], jt = ["top", "bottom"];
+export {
+  Le as TBadge,
+  Ee as TButton,
+  Re as TCard,
+  Fe as TDatePicker,
+  Ke as TInput,
+  Ne as TModal,
+  ne as TSpinner,
+  xe as TTooltip,
+  Le as TreeBadge,
+  Ee as TreeButton,
+  Re as TreeCard,
+  Fe as TreeDatePicker,
+  Ke as TreeInput,
+  Ne as TreeModal,
+  ne as TreeSpinner,
+  xe as TreeTooltip,
+  Et as TreeUIPlugin,
+  Et as default,
+  Nt as install,
+  Ht as treeCardVariants,
+  xt as treeSizes,
+  jt as treeTooltipSides,
+  Ut as treeVariants
+};

package/dist/style.css

@@ -0,0 +1 @@
+:root{--tree-font-family-sans: "IBM Plex Sans", "Segoe UI", sans-serif;--tree-font-family-mono: "IBM Plex Mono", "SFMono-Regular", monospace;--tree-font-size-xs: .6875rem;--tree-font-size-sm: .8125rem;--tree-font-size-md: .9375rem;--tree-font-size-base: .9375rem;--tree-font-size-lg: 1.125rem;--tree-font-size-xl: 1.375rem;--tree-font-size-2xl: 1.375rem;--tree-font-size-3xl: 1.75rem;--tree-font-size-4xl: 2.25rem;--tree-font-size-5xl: 3rem;--tree-font-weight-regular: 400;--tree-font-weight-medium: 500;--tree-font-weight-semibold: 600;--tree-font-weight-bold: 700;--tree-font-weight-extrabold: 800;--tree-font-lineHeight-compact: 1.1;--tree-font-lineHeight-ui: 1.15;--tree-font-lineHeight-tight: 1.25;--tree-font-lineHeight-heading: 1.3;--tree-font-lineHeight-base: 1.5;--tree-font-lineHeight-body: 1.6;--tree-font-lineHeight-relaxed: 1.65;--tree-space-0: 0;--tree-space-1: .25rem;--tree-space-2: .5rem;--tree-space-3: .75rem;--tree-space-4: 1rem;--tree-space-5: 1.25rem;--tree-space-6: 1.5rem;--tree-space-7: 2rem;--tree-space-8: 2.5rem;--tree-space-12: 3rem;--tree-space-16: 4rem;--tree-radius-sm: .375rem;--tree-radius-md: .625rem;--tree-radius-lg: .875rem;--tree-radius-pill: 999px;--tree-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);--tree-shadow-sm: 0 6px 18px rgba(15, 23, 42, .08);--tree-shadow-md: 0 14px 34px rgba(15, 23, 42, .12);--tree-border-width-subtle: 1px;--tree-border-width-strong: 1.5px;--tree-motion-duration-fast: .1s;--tree-motion-duration-moderate: .2s;--tree-motion-duration-normal: .3s;--tree-motion-duration-slow: .4s;--tree-motion-duration-slower: .5s;--tree-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);--tree-motion-easing-easeOut: cubic-bezier(0, 0, .2, 1);--tree-motion-easing-easeInOut: cubic-bezier(.4, 0, .2, 1);--tree-motion-easing-easeIn: cubic-bezier(.4, 0, 1, 1);--tree-size-control-sm: 2rem;--tree-size-control-md: 2.5rem;--tree-size-control-lg: 3rem;--tree-size-icon-sm: 1rem;--tree-size-icon-md: 1.25rem;--tree-size-icon-lg: 1.5rem;--tree-size-icon-xl: 2rem;--tree-size-icon-2xl: 3rem;--tree-layout-grid-columns: 12;--tree-layout-grid-base: 8px;--tree-layout-gutter-sm: 1rem;--tree-layout-gutter-md: 1.5rem;--tree-layout-margin-sm: 1.5rem;--tree-layout-margin-md: 2rem;--tree-layout-margin-lg: 3rem;--tree-z-base: 1;--tree-z-dropdown: 1000;--tree-z-sticky: 1100;--tree-z-overlay: 1200;--tree-z-modal: 1300;--tree-z-toast: 1400;--tree-breakpoint-sm: 640px;--tree-breakpoint-md: 768px;--tree-breakpoint-lg: 1024px;--tree-breakpoint-xl: 1280px}:root{color-scheme:light;--tree-color-bg-primary: #f3f5f9;--tree-color-bg-surface: #ffffff;--tree-color-bg-subtle: #eef2f7;--tree-color-border-default: #d7dfeb;--tree-color-border-strong: #b8c4d8;--tree-color-text-primary: #142033;--tree-color-text-muted: #5b6b84;--tree-color-text-inverse: #ffffff;--tree-color-brand-primary: #2057d4;--tree-color-brand-hover: #1845ac;--tree-color-brand-soft: #e8efff;--tree-color-brand-contrast: #ffffff;--tree-color-status-success: #117c50;--tree-color-status-warning: #a15d00;--tree-color-status-error: #bc2f3f;--tree-color-status-info: #2459d6;--tree-color-overlay: rgba(15, 23, 42, .4);--tree-color-focus-ring: rgba(32, 87, 212, .32)}[data-tree-theme=light]{color-scheme:light;--tree-color-bg-primary: #f3f5f9;--tree-color-bg-surface: #ffffff;--tree-color-bg-subtle: #eef2f7;--tree-color-border-default: #d7dfeb;--tree-color-border-strong: #b8c4d8;--tree-color-text-primary: #142033;--tree-color-text-muted: #5b6b84;--tree-color-text-inverse: #ffffff;--tree-color-brand-primary: #2057d4;--tree-color-brand-hover: #1845ac;--tree-color-brand-soft: #e8efff;--tree-color-brand-contrast: #ffffff;--tree-color-status-success: #117c50;--tree-color-status-warning: #a15d00;--tree-color-status-error: #bc2f3f;--tree-color-status-info: #2459d6;--tree-color-overlay: rgba(15, 23, 42, .4);--tree-color-focus-ring: rgba(32, 87, 212, .32)}[data-tree-theme=dark]{color-scheme:dark;--tree-color-bg-primary: #0f1724;--tree-color-bg-surface: #162131;--tree-color-bg-subtle: #1b293d;--tree-color-border-default: #2d3d57;--tree-color-border-strong: #41516d;--tree-color-text-primary: #edf3ff;--tree-color-text-muted: #aab7cb;--tree-color-text-inverse: #07101f;--tree-color-brand-primary: #74a2ff;--tree-color-brand-hover: #8bb1ff;--tree-color-brand-soft: #18386d;--tree-color-brand-contrast: #07101f;--tree-color-status-success: #4cc38f;--tree-color-status-warning: #ffb14d;--tree-color-status-error: #ff7d88;--tree-color-status-info: #8ab0ff;--tree-color-overlay: rgba(7, 16, 31, .68);--tree-color-focus-ring: rgba(116, 162, 255, .34)}:root{font-family:var(--tree-font-family-sans);background:var(--tree-color-bg-primary);color:var(--tree-color-text-primary)}*,*:before,*:after{box-sizing:border-box}.tree-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tree-button,.tree-input,.tree-card,.tree-badge,.tree-tooltip__content{font-family:var(--tree-font-family-sans)}.tree-button{--tree-button-bg: var(--tree-color-brand-primary);--tree-button-text: var(--tree-color-brand-contrast);--tree-button-border: transparent;--tree-button-shadow: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--tree-space-2);min-width:max-content;height:var(--tree-size-control-md);padding-inline:var(--tree-space-4);border:var(--tree-border-width-subtle) solid var(--tree-button-border);border-radius:var(--tree-radius-md);background:var(--tree-button-bg);color:var(--tree-button-text);box-shadow:0 0 0 0 var(--tree-button-shadow);font-size:var(--tree-font-size-md);font-weight:var(--tree-font-weight-medium);line-height:var(--tree-font-lineHeight-tight);text-decoration:none;cursor:pointer;transition:transform var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),background-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),border-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),box-shadow var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-button:hover:not(.is-disabled){transform:translateY(-1px)}.tree-button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--tree-color-focus-ring)}.tree-button.is-disabled{opacity:.65;cursor:not-allowed}.tree-button--sm{height:var(--tree-size-control-sm);padding-inline:var(--tree-space-3);font-size:var(--tree-font-size-sm)}.tree-button--lg{height:var(--tree-size-control-lg);padding-inline:var(--tree-space-5);font-size:var(--tree-font-size-lg)}.tree-button--solid{--tree-button-bg: var(--tree-color-brand-primary);--tree-button-text: var(--tree-color-brand-contrast)}.tree-button--outline{--tree-button-bg: var(--tree-color-bg-surface);--tree-button-text: var(--tree-color-text-primary);--tree-button-border: var(--tree-color-border-default)}.tree-button--ghost{--tree-button-bg: transparent;--tree-button-text: var(--tree-color-text-primary)}.tree-button--soft{--tree-button-bg: var(--tree-color-brand-soft);--tree-button-text: var(--tree-color-brand-primary)}.tree-button--danger{--tree-button-bg: var(--tree-color-status-error);--tree-button-text: var(--tree-color-brand-contrast)}.tree-button__icon,.tree-button__spinner,.tree-badge__icon,.tree-input__slot{display:inline-flex;align-items:center;justify-content:center}.tree-input{display:inline-flex;align-items:center;gap:var(--tree-space-2);width:100%;min-height:var(--tree-size-control-md);padding-inline:var(--tree-space-3);border:var(--tree-border-width-subtle) solid var(--tree-color-border-default);border-radius:var(--tree-radius-md);background:var(--tree-color-bg-surface);color:var(--tree-color-text-primary);transition:border-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),box-shadow var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-input:focus-within{border-color:var(--tree-color-brand-primary);box-shadow:0 0 0 4px var(--tree-color-focus-ring)}.tree-input.is-invalid{border-color:var(--tree-color-status-error)}.tree-input.is-disabled{opacity:.68;cursor:not-allowed}.tree-input--sm{min-height:var(--tree-size-control-sm);padding-inline:var(--tree-space-2)}.tree-input--lg{min-height:var(--tree-size-control-lg);padding-inline:var(--tree-space-4)}.tree-input__field{width:100%;min-width:0;border:0;padding:0;background:transparent;color:inherit;font:inherit;outline:none}.tree-input__field::placeholder{color:var(--tree-color-text-muted)}.tree-input__slot{color:var(--tree-color-text-muted)}.tree-date-picker{position:relative;display:grid;width:100%}.tree-date-picker__trigger,.tree-date-picker__nav,.tree-date-picker__day{font:inherit}.tree-date-picker__trigger{display:inline-flex;align-items:center;gap:var(--tree-space-2);width:100%;min-height:var(--tree-size-control-md);padding-inline:var(--tree-space-3);border:var(--tree-border-width-subtle) solid var(--tree-color-border-default);border-radius:var(--tree-radius-md);background:var(--tree-color-bg-surface);color:var(--tree-color-text-primary);text-align:left;transition:border-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),box-shadow var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),background-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-date-picker__trigger:focus-visible,.tree-date-picker.is-open .tree-date-picker__trigger{outline:none;border-color:var(--tree-color-brand-primary);box-shadow:0 0 0 4px var(--tree-color-focus-ring)}.tree-date-picker.is-disabled .tree-date-picker__trigger{opacity:.68;cursor:not-allowed}.tree-date-picker.is-invalid .tree-date-picker__trigger{border-color:var(--tree-color-status-error)}.tree-date-picker--sm .tree-date-picker__trigger{min-height:var(--tree-size-control-sm);padding-inline:var(--tree-space-2)}.tree-date-picker--lg .tree-date-picker__trigger{min-height:var(--tree-size-control-lg);padding-inline:var(--tree-space-4)}.tree-date-picker__value{flex:1;min-width:0;color:inherit}.tree-date-picker__value[data-placeholder]{color:var(--tree-color-text-muted)}.tree-date-picker__slot{display:inline-flex;align-items:center;justify-content:center;color:var(--tree-color-text-muted)}.tree-date-picker__content{position:absolute;top:calc(100% + var(--tree-space-2));left:0;z-index:var(--tree-z-dropdown);display:grid;gap:var(--tree-space-3);width:min(20rem,100vw - 2rem);padding:var(--tree-space-3);border:var(--tree-border-width-subtle) solid var(--tree-color-border-default);border-radius:var(--tree-radius-lg);background:var(--tree-color-bg-surface);box-shadow:var(--tree-shadow-md)}.tree-date-picker__header,.tree-date-picker__weekdays,.tree-date-picker__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--tree-space-1)}.tree-date-picker__header{grid-template-columns:2rem 1fr 2rem;align-items:center}.tree-date-picker__month{margin:0;font-size:var(--tree-font-size-sm);font-weight:var(--tree-font-weight-semibold);line-height:var(--tree-font-lineHeight-ui);text-align:center;text-transform:capitalize}.tree-date-picker__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--tree-radius-sm);background:transparent;color:var(--tree-color-text-muted);transition:background-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-date-picker__nav:hover:not(:disabled),.tree-date-picker__day:hover:not(:disabled){background:var(--tree-color-brand-soft);color:var(--tree-color-brand-primary)}.tree-date-picker__nav:focus-visible,.tree-date-picker__day:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tree-color-focus-ring)}.tree-date-picker__nav:disabled,.tree-date-picker__day:disabled{opacity:.45;cursor:not-allowed}.tree-date-picker__weekday{font-size:var(--tree-font-size-xs);font-weight:var(--tree-font-weight-medium);line-height:var(--tree-font-lineHeight-ui);color:var(--tree-color-text-muted);text-align:center;text-transform:uppercase}.tree-date-picker__grid{display:grid;gap:var(--tree-space-1)}.tree-date-picker__cell{display:flex;justify-content:center}.tree-date-picker__day{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:var(--tree-radius-pill);background:transparent;color:var(--tree-color-text-primary);font-size:var(--tree-font-size-sm);line-height:var(--tree-font-lineHeight-ui);transition:background-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),box-shadow var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-date-picker__day.is-muted{color:var(--tree-color-text-muted)}.tree-date-picker__day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px var(--tree-color-border-strong)}.tree-date-picker__day.is-selected{background:var(--tree-color-brand-primary);color:var(--tree-color-brand-contrast)}.tree-modal,.tree-modal__trigger{display:inline-flex}.tree-modal__portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--tree-z-modal)}.tree-modal__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--tree-color-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tree-modal__positioner{position:relative;display:flex;align-items:center;justify-content:center;min-height:100%;padding:var(--tree-space-4)}.tree-modal__surface{position:relative;display:grid;gap:var(--tree-space-3);width:min(100%,34rem);max-height:min(90vh,48rem);overflow:auto;padding:var(--tree-space-4);border:var(--tree-border-width-subtle) solid var(--tree-color-border-default);border-radius:var(--tree-radius-lg);background:var(--tree-color-bg-surface);box-shadow:var(--tree-shadow-md)}.tree-modal__surface:focus-visible{outline:none;box-shadow:var(--tree-shadow-md),0 0 0 4px var(--tree-color-focus-ring)}.tree-modal__surface--sm{width:min(100%,28rem)}.tree-modal__surface--lg{width:min(100%,42rem)}.tree-modal__topbar{display:flex;align-items:start;justify-content:space-between;gap:var(--tree-space-3)}.tree-modal__header{min-width:0}.tree-modal__title{margin:0;font-size:var(--tree-font-size-xl);font-weight:var(--tree-font-weight-semibold);line-height:var(--tree-font-lineHeight-heading);color:var(--tree-color-text-primary)}.tree-modal__description{margin:0;font-size:var(--tree-font-size-md);line-height:var(--tree-font-lineHeight-body);color:var(--tree-color-text-muted)}.tree-modal__body{display:grid;gap:var(--tree-space-3);color:var(--tree-color-text-primary)}.tree-modal__footer{display:flex;flex-wrap:wrap;justify-content:end;gap:var(--tree-space-2)}.tree-modal__close{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;border-radius:var(--tree-radius-md);background:transparent;color:var(--tree-color-text-muted);transition:background-color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),color var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),box-shadow var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-modal__close:hover{background:var(--tree-color-bg-subtle);color:var(--tree-color-text-primary)}.tree-modal__close:focus-visible{outline:none;box-shadow:0 0 0 4px var(--tree-color-focus-ring)}.tree-card{display:grid;gap:var(--tree-space-3);border:var(--tree-border-width-subtle) solid var(--tree-color-border-default);border-radius:var(--tree-radius-lg);background:var(--tree-color-bg-surface);color:var(--tree-color-text-primary);box-shadow:var(--tree-shadow-xs)}.tree-card--sm{padding:var(--tree-space-3)}.tree-card--md{padding:var(--tree-space-4)}.tree-card--lg{padding:var(--tree-space-5)}.tree-card--soft{background:var(--tree-color-bg-subtle)}.tree-card--solid{background:var(--tree-color-text-primary);color:var(--tree-color-bg-surface);border-color:transparent}.tree-card__header,.tree-card__footer{color:var(--tree-color-text-muted)}.tree-card__body{display:grid;gap:var(--tree-space-2)}.tree-badge{display:inline-flex;align-items:center;gap:var(--tree-space-2);width:fit-content;border:var(--tree-border-width-subtle) solid transparent;border-radius:var(--tree-radius-pill);padding-inline:var(--tree-space-3);font-weight:var(--tree-font-weight-medium);line-height:1}.tree-badge--sm{min-height:1.5rem;font-size:var(--tree-font-size-xs)}.tree-badge--md{min-height:1.75rem;font-size:var(--tree-font-size-sm)}.tree-badge--lg{min-height:2rem;font-size:var(--tree-font-size-md)}.tree-badge--solid{background:var(--tree-color-brand-primary);color:var(--tree-color-brand-contrast)}.tree-badge--outline{background:var(--tree-color-bg-surface);color:var(--tree-color-text-primary);border-color:var(--tree-color-border-default)}.tree-badge--ghost{background:transparent;color:var(--tree-color-text-muted)}.tree-badge--soft{background:var(--tree-color-brand-soft);color:var(--tree-color-brand-primary)}.tree-badge--danger{background:color-mix(in srgb,var(--tree-color-status-error) 16%,var(--tree-color-bg-surface));color:var(--tree-color-status-error)}.tree-spinner{--tree-spinner-size: var(--tree-size-icon-md);display:inline-flex;align-items:center;justify-content:center;width:var(--tree-spinner-size);height:var(--tree-spinner-size);color:var(--tree-color-brand-primary)}.tree-spinner--sm{--tree-spinner-size: var(--tree-size-icon-sm)}.tree-spinner--lg{--tree-spinner-size: var(--tree-size-icon-lg)}.tree-spinner__ring{width:100%;height:100%;border:2px solid color-mix(in srgb,currentColor 20%,transparent);border-right-color:transparent;border-radius:50%;animation:tree-spin .7s linear infinite}.tree-tooltip{position:relative;display:inline-flex}.tree-tooltip__trigger{display:inline-flex}.tree-tooltip__content{position:absolute;left:50%;z-index:var(--tree-z-dropdown);min-width:max-content;max-width:18rem;padding:var(--tree-space-2) var(--tree-space-3);border:var(--tree-border-width-subtle) solid var(--tree-color-border-default);border-radius:var(--tree-radius-md);background:var(--tree-color-text-primary);color:var(--tree-color-bg-surface);box-shadow:var(--tree-shadow-sm);font-size:var(--tree-font-size-sm);line-height:var(--tree-font-lineHeight-base);transform:translate(-50%)}.tree-tooltip__content--top{bottom:calc(100% + var(--tree-space-2))}.tree-tooltip__content--bottom{top:calc(100% + var(--tree-space-2))}.tree-fade-enter-active,.tree-fade-leave-active{transition:opacity var(--tree-motion-duration-fast) var(--tree-motion-easing-standard),transform var(--tree-motion-duration-fast) var(--tree-motion-easing-standard)}.tree-fade-enter-from,.tree-fade-leave-to{opacity:0;transform:translate(-50%,4px)}.tree-date-picker .tree-fade-enter-from,.tree-date-picker .tree-fade-leave-to{transform:translateY(4px)}.tree-modal-fade-enter-active,.tree-modal-fade-leave-active{transition:opacity var(--tree-motion-duration-moderate) var(--tree-motion-easing-easeOut),transform var(--tree-motion-duration-moderate) var(--tree-motion-easing-easeOut)}.tree-modal-fade-enter-from,.tree-modal-fade-leave-to{opacity:0}.tree-modal-fade-enter-from .tree-modal__surface,.tree-modal-fade-leave-to .tree-modal__surface{transform:translateY(.5rem) scale(.98)}@keyframes tree-spin{to{transform:rotate(360deg)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treeui/vue",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Vue 3 component package for TreeUI.",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,9 +20,9 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@treeui/tokens": "0.1.0",
-    "@treeui/icons": "0.1.0",
-    "@treeui/utils": "0.1.0"
+    "@treeui/icons": "0.1.1",
+    "@treeui/tokens": "0.1.1",
+    "@treeui/utils": "0.1.1"
   },
   "scripts": {
     "build": "pnpm exec rimraf dist && pnpm exec vite build",