@theh0n/ui 1.1.1 → 1.1.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as C, ref as z, computed as _, openBlock as i, createElementBlock as c, normalizeClass as k, Fragment as K, renderList as ae, createElementVNode as p, renderSlot as b, toDisplayString as $, createCommentVNode as m, createVNode as A, Transition as R, withCtx as E, withDirectives as re, vShow as le, watch as V, shallowRef as G, createBlock as w, Teleport as P, unref as v, normalizeStyle as B, resolveDynamicComponent as M, normalizeProps as ce, mergeProps as j, createTextVNode as L, onMounted as Q, onUnmounted as ue, withModifiers as D } from "vue";
-import './index.css';const U = {
+import { defineComponent as I, ref as O, computed as y, openBlock as l, createElementBlock as u, normalizeClass as k, Fragment as Z, renderList as ae, createElementVNode as m, renderSlot as C, toDisplayString as x, createCommentVNode as b, createVNode as A, Transition as q, withCtx as H, withDirectives as he, vShow as ve, watch as E, shallowRef as ie, createBlock as V, Teleport as J, unref as _, normalizeStyle as R, resolveDynamicComponent as K, normalizeProps as me, mergeProps as X, createTextVNode as j, onMounted as G, onUnmounted as ye, withModifiers as F, onBeforeUnmount as pe, nextTick as ge } from "vue";
+import './index.css';const te = {
   colors: {
     primary: "#171f2a",
     secondary: "#202a38",
@@ -18,21 +18,21 @@ import './index.css';const U = {
   fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
   focusRingColor: "rgba(79, 70, 229, 0.4)"
 };
-function de(e) {
+function _e(e) {
   if (!e)
-    return Z(U);
-  const n = Z(U);
-  return X(n, e);
+    return ne(te);
+  const n = ne(te);
+  return le(n, e);
 }
-function fe(e) {
+function be(e) {
   if (typeof window > "u" || typeof document > "u")
     return;
-  const n = document.documentElement, t = he(e);
-  Object.entries(t).forEach(([s, o]) => {
-    n.style.setProperty(s, o);
+  const n = document.documentElement, t = ke(e);
+  Object.entries(t).forEach(([r, o]) => {
+    n.style.setProperty(r, o);
   });
 }
-function he(e) {
+function ke(e) {
   return {
     "--h0n-primary": e.colors.primary,
     "--h0n-secondary": e.colors.secondary,
@@ -49,28 +49,28 @@ function he(e) {
     "--h0n-focus-ring": e.focusRingColor
   };
 }
-function X(e, n) {
+function le(e, n) {
   const t = Array.isArray(e) ? [...e] : { ...e };
-  return n && Object.entries(n).forEach(([s, o]) => {
+  return n && Object.entries(n).forEach(([r, o]) => {
     if (o === void 0)
       return;
-    const h = e[s];
-    J(h) && J(o) ? t[s] = X(
-      h,
+    const v = e[r];
+    oe(v) && oe(o) ? t[r] = le(
+      v,
       o
-    ) : t[s] = o;
+    ) : t[r] = o;
   }), t;
 }
-function Z(e) {
+function ne(e) {
   return JSON.parse(JSON.stringify(e));
 }
-function J(e) {
+function oe(e) {
   return Object.prototype.toString.call(e) === "[object Object]";
 }
-const ye = ["disabled", "aria-expanded", "aria-controls", "onClick"], pe = { class: "h0n-ui-accordion__title" }, ve = { class: "h0n-ui-accordion__title-text" }, me = {
+const $e = ["disabled", "aria-expanded", "aria-controls", "onClick"], we = { class: "h0n-ui-accordion__title" }, Ce = { class: "h0n-ui-accordion__title-text" }, xe = {
   key: 0,
   class: "h0n-ui-accordion__badge"
-}, _e = ["id", "aria-label"], ge = { class: "h0n-ui-accordion__body-inner" }, be = { key: 0 }, $e = /* @__PURE__ */ C({
+}, Oe = ["id", "aria-label"], Ie = { class: "h0n-ui-accordion__body-inner" }, Se = { key: 0 }, Be = /* @__PURE__ */ I({
   __name: "Accordion",
   props: {
     items: { default: () => [] },
@@ -81,90 +81,90 @@ const ye = ["disabled", "aria-expanded", "aria-controls", "onClick"], pe = { cla
   },
   emits: ["update:modelValue", "toggle"],
   setup(e, { emit: n }) {
-    const t = e, s = n;
+    const t = e, r = n;
     function o(a) {
       return a == null ? [] : Array.isArray(a) ? t.multiple ? a : a.slice(0, 1) : [a];
     }
-    const h = z(o(t.defaultOpen)), u = _(
-      () => t.modelValue !== void 0 ? o(t.modelValue) : h.value
-    ), l = _(() => new Set(u.value));
+    const v = O(o(t.defaultOpen)), f = y(
+      () => t.modelValue !== void 0 ? o(t.modelValue) : v.value
+    ), h = y(() => new Set(f.value));
     function d(a) {
-      return l.value.has(a);
+      return h.value.has(a);
     }
-    function r(a) {
-      t.modelValue === void 0 && (h.value = a), s("update:modelValue", t.multiple ? a : a[0] ?? null);
+    function c(a) {
+      t.modelValue === void 0 && (v.value = a), r("update:modelValue", t.multiple ? a : a[0] ?? null);
     }
-    function g(a) {
-      const y = [...u.value];
+    function p(a) {
+      const i = [...f.value];
       if (t.multiple) {
-        const x = new Set(y);
-        x.has(a) ? x.delete(a) : x.add(a);
-        const ie = Array.from(x);
-        r(ie), s("toggle", { id: a, open: x.has(a) });
+        const w = new Set(i);
+        w.has(a) ? w.delete(a) : w.add(a);
+        const B = Array.from(w);
+        c(B), r("toggle", { id: a, open: w.has(a) });
         return;
       }
-      const f = y[0] === a;
-      r(f ? [] : [a]), s("toggle", { id: a, open: !f });
+      const s = i[0] === a;
+      c(s ? [] : [a]), r("toggle", { id: a, open: !s });
     }
-    function N(a) {
+    function S(a) {
       return `h0n-ui-accordion-body-${String(a)}`;
     }
-    function F(a) {
+    function T(a) {
       return a.querySelector(".h0n-ui-accordion__body-inner");
     }
-    function ee(a) {
-      const y = a, f = F(y);
-      f && (y.style.height = "0px", y.style.opacity = "0", requestAnimationFrame(() => {
-        y.style.height = `${f.scrollHeight}px`, y.style.opacity = "1";
+    function L(a) {
+      const i = a, s = T(i);
+      s && (i.style.height = "0px", i.style.opacity = "0", requestAnimationFrame(() => {
+        i.style.height = `${s.scrollHeight}px`, i.style.opacity = "1";
       }));
     }
-    function te(a) {
-      const y = a;
-      y.style.height = "auto", y.style.opacity = "";
+    function P(a) {
+      const i = a;
+      i.style.height = "auto", i.style.opacity = "";
     }
-    function ne(a) {
-      const y = a, f = F(y);
-      f && (y.style.height = `${f.scrollHeight}px`, y.style.opacity = "1", y.offsetHeight, requestAnimationFrame(() => {
-        y.style.height = "0px", y.style.opacity = "0";
+    function D(a) {
+      const i = a, s = T(i);
+      s && (i.style.height = `${s.scrollHeight}px`, i.style.opacity = "1", i.offsetHeight, requestAnimationFrame(() => {
+        i.style.height = "0px", i.style.opacity = "0";
       }));
     }
-    function oe(a) {
-      const y = a;
-      y.style.height = "", y.style.opacity = "";
+    function g(a) {
+      const i = a;
+      i.style.height = "", i.style.opacity = "";
     }
-    return (a, y) => (i(), c("div", {
+    return (a, i) => (l(), u("div", {
       class: k(["h0n-ui-accordion", { "is-compact": e.compact }])
     }, [
-      (i(!0), c(K, null, ae(e.items, (f) => (i(), c("div", {
-        key: f.id,
+      (l(!0), u(Z, null, ae(e.items, (s) => (l(), u("div", {
+        key: s.id,
         class: k(["h0n-ui-accordion__item", {
-          "is-open": d(f.id),
-          "is-disabled": !!f.disabled
+          "is-open": d(s.id),
+          "is-disabled": !!s.disabled
         }])
       }, [
-        p("button", {
+        m("button", {
           class: "h0n-ui-accordion__header",
           type: "button",
-          disabled: f.disabled,
-          "aria-expanded": d(f.id) ? "true" : "false",
-          "aria-controls": N(f.id),
-          onClick: (se) => g(f.id)
+          disabled: s.disabled,
+          "aria-expanded": d(s.id) ? "true" : "false",
+          "aria-controls": S(s.id),
+          onClick: ($) => p(s.id)
         }, [
-          p("span", pe, [
-            b(a.$slots, "header", {
-              item: f,
-              open: d(f.id)
+          m("span", we, [
+            C(a.$slots, "header", {
+              item: s,
+              open: d(s.id)
             }, () => [
-              p("span", ve, $(f.title), 1),
-              f.badge ? (i(), c("span", me, $(f.badge), 1)) : m("", !0)
+              m("span", Ce, x(s.title), 1),
+              s.badge ? (l(), u("span", xe, x(s.badge), 1)) : b("", !0)
             ])
           ]),
-          y[0] || (y[0] = p("svg", {
+          i[0] || (i[0] = m("svg", {
             class: "h0n-ui-accordion__chevron",
             viewBox: "0 0 20 20",
             "aria-hidden": "true"
           }, [
-            p("path", {
+            m("path", {
               d: "M5 7.5L10 12.5L15 7.5",
               fill: "none",
               stroke: "currentColor",
@@ -173,31 +173,31 @@ const ye = ["disabled", "aria-expanded", "aria-controls", "onClick"], pe = { cla
               "stroke-linejoin": "round"
             })
           ], -1))
-        ], 8, ye),
-        A(R, {
+        ], 8, $e),
+        A(q, {
           name: "h0n-ui-accordion",
-          onEnter: ee,
-          onAfterEnter: te,
-          onLeave: ne,
-          onAfterLeave: oe
+          onEnter: L,
+          onAfterEnter: P,
+          onLeave: D,
+          onAfterLeave: g
         }, {
-          default: E(() => [
-            re(p("div", {
+          default: H(() => [
+            he(m("div", {
               class: "h0n-ui-accordion__body",
-              id: N(f.id),
+              id: S(s.id),
               role: "region",
-              "aria-label": f.title
+              "aria-label": s.title
             }, [
-              p("div", ge, [
-                b(a.$slots, "body", {
-                  item: f,
-                  open: d(f.id)
+              m("div", Ie, [
+                C(a.$slots, "body", {
+                  item: s,
+                  open: d(s.id)
                 }, () => [
-                  f.body ? (i(), c("p", be, $(f.body), 1)) : m("", !0)
+                  s.body ? (l(), u("p", Se, x(s.body), 1)) : b("", !0)
                 ])
               ])
-            ], 8, _e), [
-              [le, d(f.id)]
+            ], 8, Oe), [
+              [ve, d(s.id)]
             ])
           ]),
           _: 2
@@ -206,64 +206,64 @@ const ye = ["disabled", "aria-expanded", "aria-controls", "onClick"], pe = { cla
     ], 2));
   }
 });
-function q() {
+function Q() {
   return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
 }
-const W = 1e4, O = z([]);
-function H() {
-  const e = _(() => O.value.at(-1) ?? null);
-  function n(l) {
-    return O.value.findIndex((d) => d.id === l);
+const se = 1e4, z = O([]);
+function N() {
+  const e = y(() => z.value.at(-1) ?? null);
+  function n(h) {
+    return z.value.findIndex((d) => d.id === h);
   }
-  function t(l) {
-    const d = n(l);
-    return d === -1 ? W : W + d * 2;
+  function t(h) {
+    const d = n(h);
+    return d === -1 ? se : se + d * 2;
   }
-  function s(l) {
-    return t(l) + 1;
+  function r(h) {
+    return t(h) + 1;
   }
-  function o(l) {
-    const d = l.id ?? q();
-    return h(d), O.value.push({
+  function o(h) {
+    const d = h.id ?? Q();
+    return v(d), z.value.push({
       showOverlay: !0,
       closeOnOverlay: !0,
       closeOnEsc: !0,
-      ...l,
+      ...h,
       id: d
     }), d;
   }
-  function h(l) {
-    const d = n(l);
-    d !== -1 && O.value.splice(d, 1);
+  function v(h) {
+    const d = n(h);
+    d !== -1 && z.value.splice(d, 1);
   }
-  function u() {
+  function f() {
     e.value?.onRequestClose?.();
   }
-  return V(
-    () => O.value.length,
-    (l) => {
-      document.documentElement.classList.toggle("no-scroll", l > 0);
+  return E(
+    () => z.value.length,
+    (h) => {
+      document.documentElement.classList.toggle("no-scroll", h > 0);
     },
     { immediate: !0 }
   ), {
-    stack: O,
+    stack: z,
     top: e,
     push: o,
-    remove: h,
-    requestCloseTop: u,
+    remove: v,
+    requestCloseTop: f,
     getBackdropZIndex: t,
-    getContentZIndex: s
+    getContentZIndex: r
   };
 }
-const I = G(null);
-let T = null;
-function ke() {
-  const e = H();
-  function n(s) {
+const M = ie(null);
+let W = null;
+function Re() {
+  const e = N();
+  function n(r) {
     return new Promise((o) => {
-      const h = q();
-      T = o, I.value = { ...s, id: h }, e.push({
-        id: h,
+      const v = Q();
+      W = o, M.value = { ...r, id: v }, e.push({
+        id: v,
         showOverlay: !0,
         closeOnOverlay: !0,
         closeOnEsc: !0,
@@ -271,67 +271,67 @@ function ke() {
       });
     });
   }
-  function t(s) {
-    if (!I.value) return;
-    const o = I.value.id;
-    I.value = null, e.remove(o), T?.(s), T = null;
+  function t(r) {
+    if (!M.value) return;
+    const o = M.value.id;
+    M.value = null, e.remove(o), W?.(r), W = null;
   }
   return {
-    active: I,
+    active: M,
     open: n,
     close: t
   };
 }
-const Ce = {
+const Te = {
   class: "h0n-alert",
   role: "dialog",
   "aria-modal": "true"
-}, Oe = {
+}, Le = {
   key: 0,
   class: "h0n-alert__header"
-}, we = { class: "h0n-alert__title" }, xe = { class: "h0n-alert__body" }, Ie = { key: 1 }, Se = /* @__PURE__ */ C({
+}, ze = { class: "h0n-alert__title" }, Ee = { class: "h0n-alert__body" }, Ve = { key: 1 }, Ae = /* @__PURE__ */ I({
   __name: "Alert",
   setup(e) {
-    const { active: n, close: t } = ke(), { getContentZIndex: s } = H(), o = () => t(!0), h = () => t(!1), u = () => t(!0), l = _(() => n.value?.type === "info"), d = _(
-      () => n.value ? s(n.value.id) : void 0
+    const { active: n, close: t } = Re(), { getContentZIndex: r } = N(), o = () => t(!0), v = () => t(!1), f = () => t(!0), h = y(() => n.value?.type === "info"), d = y(
+      () => n.value ? r(n.value.id) : void 0
     );
-    return (r, g) => (i(), w(P, { to: "body" }, [
-      A(R, {
+    return (c, p) => (l(), V(J, { to: "body" }, [
+      A(q, {
         name: "h0n-alert-scale",
         appear: ""
       }, {
-        default: E(() => [
-          v(n) ? (i(), c("div", {
+        default: H(() => [
+          _(n) ? (l(), u("div", {
             key: 0,
             class: "h0n-alert-layer",
-            style: B({ zIndex: d.value })
+            style: R({ zIndex: d.value })
           }, [
-            p("section", Ce, [
-              v(n).title || r.$slots.header ? (i(), c("header", Oe, [
-                b(r.$slots, "header", {}, () => [
-                  p("h4", we, $(v(n).title), 1)
+            m("section", Te, [
+              _(n).title || c.$slots.header ? (l(), u("header", Le, [
+                C(c.$slots, "header", {}, () => [
+                  m("h4", ze, x(_(n).title), 1)
                 ], !0)
-              ])) : m("", !0),
-              p("div", xe, [
-                v(n).component ? (i(), w(M(v(n).component), ce(j({ key: 0 }, v(n).props)), null, 16)) : v(n).message ? (i(), c("p", Ie, $(v(n).message), 1)) : m("", !0)
+              ])) : b("", !0),
+              m("div", Ee, [
+                _(n).component ? (l(), V(K(_(n).component), me(X({ key: 0 }, _(n).props)), null, 16)) : _(n).message ? (l(), u("p", Ve, x(_(n).message), 1)) : b("", !0)
               ]),
-              p("footer", {
-                class: k(["h0n-alert__actions", { "is-single": l.value }])
+              m("footer", {
+                class: k(["h0n-alert__actions", { "is-single": h.value }])
               }, [
-                l.value ? (i(), c("button", {
+                h.value ? (l(), u("button", {
                   key: 0,
                   class: "h0n-alert__btn h0n-alert__btn--primary",
                   type: "button",
-                  onClick: u
-                }, " Ok ")) : (i(), c(K, { key: 1 }, [
-                  p("button", {
+                  onClick: f
+                }, " Ok ")) : (l(), u(Z, { key: 1 }, [
+                  m("button", {
                     class: "h0n-alert__btn is-danger",
                     type: "button",
-                    onClick: h
+                    onClick: v
                   }, " Cancel "),
-                  p("button", {
+                  m("button", {
                     class: k(["h0n-alert__btn h0n-alert__btn--primary", {
-                      "is-danger": v(n).type === "danger"
+                      "is-danger": _(n).type === "danger"
                     }]),
                     type: "button",
                     onClick: o
@@ -339,18 +339,18 @@ const Ce = {
                 ], 64))
               ], 2)
             ])
-          ], 4)) : m("", !0)
+          ], 4)) : b("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}), Be = (e, n) => {
+}), He = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [s, o] of n)
-    t[s] = o;
+  for (const [r, o] of n)
+    t[r] = o;
   return t;
-}, ze = /* @__PURE__ */ Be(Se, [["__scopeId", "data-v-290cad87"]]), Y = /* @__PURE__ */ C({
+}, Pe = /* @__PURE__ */ He(Ae, [["__scopeId", "data-v-290cad87"]]), re = /* @__PURE__ */ I({
   __name: "Spinner",
   props: {
     size: {},
@@ -358,26 +358,26 @@ const Ce = {
   },
   setup(e) {
     const t = e.size ?? "md";
-    return (s, o) => (i(), c("div", {
-      class: k(["h0n-ui-spinner", [`h0n-ui-spinner--${v(t)}`, e.color]]),
+    return (r, o) => (l(), u("div", {
+      class: k(["h0n-ui-spinner", [`h0n-ui-spinner--${_(t)}`, e.color]]),
       role: "status",
       "aria-label": "Loading"
     }, null, 2));
   }
-}), Ae = ["type", "disabled", "aria-busy"], Ee = {
+}), De = ["type", "disabled", "aria-busy"], Me = {
   key: 0,
   class: "h0n-ui-btn__icon h0n-ui-btn__icon--left"
-}, He = {
+}, Ue = {
   key: 1,
   class: "h0n-ui-btn__label"
-}, Le = {
+}, qe = {
   key: 2,
   class: "h0n-ui-btn__spinner",
   "aria-hidden": "true"
-}, Re = {
+}, Ne = {
   key: 3,
   class: "h0n-ui-btn__icon h0n-ui-btn__icon--right"
-}, De = /* @__PURE__ */ C({
+}, je = /* @__PURE__ */ I({
   __name: "Button",
   props: {
     text: {},
@@ -394,74 +394,74 @@ const Ce = {
   },
   emits: ["click", "done", "error"],
   setup(e, { emit: n }) {
-    const t = e, s = n, o = z(!1), h = _(() => t.loading !== void 0), u = _(
-      () => h.value ? !!t.loading : o.value
+    const t = e, r = n, o = O(!1), v = y(() => t.loading !== void 0), f = y(
+      () => v.value ? !!t.loading : o.value
     );
-    function l(r) {
-      h.value || (o.value = r);
+    function h(c) {
+      v.value || (o.value = c);
     }
-    async function d(r) {
-      if (!(t.disabled || u.value) && (s("click", r), !!t.action))
+    async function d(c) {
+      if (!(t.disabled || f.value) && (r("click", c), !!t.action))
         try {
-          l(!0), await t.action(), s("done");
-        } catch (g) {
-          s("error", g);
+          h(!0), await t.action(), r("done");
+        } catch (p) {
+          r("error", p);
         } finally {
-          l(!1);
+          h(!1);
         }
     }
-    return (r, g) => (i(), c("button", {
+    return (c, p) => (l(), u("button", {
       class: k(["h0n-ui-btn", [
         `h0n-ui-btn--${e.variant}`,
         `h0n-ui-btn--${e.size}`,
         `h0n-ui-btn--text-${e.position}`,
         {
-          "h0n-ui-btn--loading": u.value,
+          "h0n-ui-btn--loading": f.value,
           "h0n-ui-btn--pill": e.pill,
           "h0n-ui-btn--radius": e.border,
           "h0n-ui-btn--block": e.block
         }
       ]]),
       type: e.type,
-      disabled: e.disabled || u.value,
-      "aria-busy": u.value ? "true" : void 0,
+      disabled: e.disabled || f.value,
+      "aria-busy": f.value ? "true" : void 0,
       onClick: d
     }, [
-      r.$slots.left && !u.value ? (i(), c("span", Ee, [
-        b(r.$slots, "left")
-      ])) : m("", !0),
-      u.value ? (i(), c("span", Le, [
-        A(Y, { size: "sm" })
-      ])) : (i(), c("span", He, [
-        b(r.$slots, "default", {}, () => [
-          L($(e.text), 1)
+      c.$slots.left && !f.value ? (l(), u("span", Me, [
+        C(c.$slots, "left")
+      ])) : b("", !0),
+      f.value ? (l(), u("span", qe, [
+        A(re, { size: "sm" })
+      ])) : (l(), u("span", Ue, [
+        C(c.$slots, "default", {}, () => [
+          j(x(e.text), 1)
         ])
       ])),
-      r.$slots.right && !u.value ? (i(), c("span", Re, [
-        b(r.$slots, "right")
-      ])) : m("", !0)
-    ], 10, Ae));
+      c.$slots.right && !f.value ? (l(), u("span", Ne, [
+        C(c.$slots, "right")
+      ])) : b("", !0)
+    ], 10, De));
   }
-}), Te = { class: "h0n-ui-card" }, Ve = {
+}), Fe = { class: "h0n-ui-card" }, We = {
   key: 0,
   class: "h0n-ui-card--title"
-}, Pe = /* @__PURE__ */ C({
+}, Ze = /* @__PURE__ */ I({
   __name: "Card",
   props: {
     title: {}
   },
   setup(e) {
-    return (n, t) => (i(), c("section", Te, [
-      e.title ? (i(), c("p", Ve, $(e.title), 1)) : m("", !0),
-      b(n.$slots, "default")
+    return (n, t) => (l(), u("section", Fe, [
+      e.title ? (l(), u("p", We, x(e.title), 1)) : b("", !0),
+      C(n.$slots, "default")
     ]));
   }
-}), S = G(null);
-function Me() {
-  const e = H();
-  function n(s) {
-    const o = q();
-    S.value = { ...s, id: o }, e.push({
+}), U = ie(null);
+function Je() {
+  const e = N();
+  function n(r) {
+    const o = Q();
+    U.value = { ...r, id: o }, e.push({
       id: o,
       showOverlay: !0,
       closeOnOverlay: !0,
@@ -470,83 +470,140 @@ function Me() {
     });
   }
   function t() {
-    S.value && (e.remove(S.value.id), S.value = null);
+    U.value && (e.remove(U.value.id), U.value = null);
   }
   return {
-    active: S,
+    active: U,
     open: n,
     close: t
   };
 }
-const je = { class: "content-title-dialog" }, qe = {
+const Ke = { class: "content-title-dialog" }, Xe = {
   key: 0,
   class: "title-dialog"
-}, Ne = { class: "h0n-dialog-content" }, Fe = /* @__PURE__ */ C({
+}, Ge = {
+  key: 0,
+  class: "h0n-dialog-bg-hero"
+}, Qe = { class: "h0n-dialog-content" }, Ye = /* @__PURE__ */ I({
   __name: "Dialog",
   setup(e) {
-    const { active: n, close: t } = Me(), { getContentZIndex: s } = H(), o = z("bottom");
-    V(
+    const { active: n, close: t } = Je(), { getContentZIndex: r } = N(), o = O("bottom");
+    E(
       () => n.value?.side,
-      (l) => {
-        l && (o.value = l);
+      (g) => {
+        g && (o.value = g);
       },
       { immediate: !0 }
     );
-    const h = _(() => `h0n-slide-${o.value}`), u = _(
-      () => n.value ? s(n.value.id) : void 0
-    );
-    return (l, d) => (i(), w(P, { to: "body" }, [
-      A(R, {
-        name: h.value,
+    const v = y(() => `h0n-slide-${o.value}`), f = y(
+      () => n.value ? r(n.value.id) : void 0
+    ), h = y(() => n.value?.backgroundUrl?.trim() ?? ""), d = O(""), c = /* @__PURE__ */ new Set();
+    let p = 0;
+    const S = y(() => h.value.length > 0), T = y(
+      () => d.value.length > 0
+    ), L = (g) => new Promise((a) => {
+      setTimeout(a, g);
+    }), P = (g) => new Promise((a, i) => {
+      const s = new Image();
+      s.decoding = "async", s.fetchPriority = "low", s.onload = async () => {
+        try {
+          typeof s.decode == "function" && await s.decode();
+        } catch {
+        }
+        a();
+      }, s.onerror = () => {
+        i(new Error("Failed to load dialog background image"));
+      }, s.src = g;
+    }), D = y(() => T.value ? {
+      "--h0n-dialog-bg-image": `url("${d.value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`
+    } : void 0);
+    return E(
+      h,
+      async (g, a, i) => {
+        const s = ++p;
+        let $ = !1;
+        if (i(() => {
+          $ = !0;
+        }), d.value = "", !!g) {
+          if (c.has(g)) {
+            d.value = g;
+            return;
+          }
+          if (await L(140), !($ || s !== p))
+            try {
+              if (await P(g), $ || s !== p) return;
+              c.add(g), d.value = g;
+            } catch {
+              if ($ || s !== p) return;
+              d.value = "";
+            }
+        }
+      },
+      { immediate: !0 }
+    ), (g, a) => (l(), V(J, { to: "body" }, [
+      A(q, {
+        name: v.value,
         appear: ""
       }, {
-        default: E(() => [
-          v(n) ? (i(), c("div", {
+        default: H(() => [
+          _(n) ? (l(), u("div", {
             key: 0,
             class: k(["h0n-dialog-layer", `is-${o.value}`]),
-            style: B({ zIndex: u.value })
+            style: R({ zIndex: f.value })
           }, [
-            p("section", {
-              class: k(["h0n-dialog-panel", `is-${v(n).side}`])
+            m("section", {
+              class: k(["h0n-dialog-panel", [
+                `is-${_(n).side}`,
+                { "has-background-image": S.value }
+              ]]),
+              style: R(D.value)
             }, [
-              p("header", {
-                class: k(["h0n-dialog-header", `is-${v(n).side}`])
+              m("header", {
+                class: k(["h0n-dialog-header", [
+                  `is-${_(n).side}`,
+                  { "has-background-image": S.value }
+                ]])
               }, [
-                p("div", je, [
-                  v(n).title ? (i(), c("p", qe, $(v(n).title), 1)) : m("", !0),
-                  b(l.$slots, "dialogHeader")
+                m("div", Ke, [
+                  _(n).title ? (l(), u("p", Xe, x(_(n).title), 1)) : b("", !0),
+                  C(g.$slots, "dialogHeader")
                 ]),
-                p("button", {
+                m("button", {
                   class: "h0n-dialog-close",
-                  onClick: d[0] || (d[0] = (r) => v(t)())
+                  onClick: a[0] || (a[0] = (i) => _(t)())
                 }, " x ")
               ], 2),
-              p("div", Ne, [
-                (i(), w(M(v(n).component), j(v(n).props, { onClose: v(t) }), null, 16, ["onClose"]))
+              S.value ? (l(), u("div", Ge, [
+                m("div", {
+                  class: k(["h0n-dialog-bg-image", { "is-loaded": T.value }])
+                }, null, 2)
+              ])) : b("", !0),
+              m("div", Qe, [
+                (l(), V(K(_(n).component), X(_(n).props, { onClose: _(t) }), null, 16, ["onClose"]))
               ])
-            ], 2)
-          ], 6)) : m("", !0)
+            ], 6)
+          ], 6)) : b("", !0)
         ]),
         _: 3
       }, 8, ["name"])
     ]));
   }
-}), Ue = { class: "h0n-ui-menu-item__left" }, Ze = {
+}), et = { class: "h0n-ui-menu-item__left" }, tt = {
   key: 0,
   class: "h0n-ui-menu-item__icon"
-}, Je = { class: "h0n-ui-menu-item__text" }, We = {
+}, nt = { class: "h0n-ui-menu-item__text" }, ot = {
   key: 0,
   class: "h0n-ui-menu-item__desc"
-}, Ke = {
+}, st = {
   key: 0,
   class: "h0n-ui-menu-item__right"
-}, Ge = {
+}, at = {
   key: 0,
   class: "h0n-ui-menu-item__right-text"
-}, Qe = {
+}, it = {
   key: 0,
   class: "h0n-ui-menu-item__chevron"
-}, Xe = /* @__PURE__ */ C({
+}, lt = /* @__PURE__ */ I({
   __name: "Menu",
   props: {
     title: {},
@@ -561,60 +618,60 @@ const je = { class: "content-title-dialog" }, qe = {
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const t = e, s = n, o = _(() => !!t.to), h = _(() => t.as ?? (o.value ? "a" : "div")), u = _(() => t.chevron !== void 0 ? t.chevron : o.value), l = _(() => t.disabled ? {
+    const t = e, r = n, o = y(() => !!t.to), v = y(() => t.as ?? (o.value ? "a" : "div")), f = y(() => t.chevron !== void 0 ? t.chevron : o.value), h = y(() => t.disabled ? {
       role: "button",
       tabindex: -1
     } : t.as ? t.to ? { to: t.to } : {} : o.value ? { href: "#" } : { role: "button", tabindex: 0 });
-    function d(r) {
+    function d(c) {
       if (t.disabled) {
-        r.preventDefault(), r.stopPropagation();
+        c.preventDefault(), c.stopPropagation();
         return;
       }
-      !t.as && o.value && r.preventDefault(), s("click", r);
+      !t.as && o.value && c.preventDefault(), r("click", c);
     }
-    return (r, g) => (i(), w(M(h.value), j({ class: "h0n-ui-menu-item" }, l.value, {
+    return (c, p) => (l(), V(K(v.value), X({ class: "h0n-ui-menu-item" }, h.value, {
       "aria-disabled": e.disabled || void 0,
       onClick: d
     }), {
-      default: E(() => [
-        p("div", Ue, [
-          r.$slots.icon || e.icon ? (i(), c("div", Ze, [
-            b(r.$slots, "icon", {}, () => [
-              L($(e.icon), 1)
+      default: H(() => [
+        m("div", et, [
+          c.$slots.icon || e.icon ? (l(), u("div", tt, [
+            C(c.$slots, "icon", {}, () => [
+              j(x(e.icon), 1)
             ])
-          ])) : m("", !0),
-          p("div", Je, [
-            p("p", {
+          ])) : b("", !0),
+          m("div", nt, [
+            m("p", {
               class: k(["h0n-ui-menu-item__title", { "is-danger": e.danger }])
             }, [
-              b(r.$slots, "title", {}, () => [
-                L($(e.title), 1)
+              C(c.$slots, "title", {}, () => [
+                j(x(e.title), 1)
               ])
             ], 2),
-            e.description || r.$slots.description ? (i(), c("p", We, [
-              b(r.$slots, "description", {}, () => [
-                L($(e.description), 1)
+            e.description || c.$slots.description ? (l(), u("p", ot, [
+              C(c.$slots, "description", {}, () => [
+                j(x(e.description), 1)
               ])
-            ])) : m("", !0)
+            ])) : b("", !0)
           ])
         ]),
-        e.right || r.$slots.right || u.value ? (i(), c("div", Ke, [
-          b(r.$slots, "right", {}, () => [
-            e.right ? (i(), c("p", Ge, $(e.right), 1)) : m("", !0)
+        e.right || c.$slots.right || f.value ? (l(), u("div", st, [
+          C(c.$slots, "right", {}, () => [
+            e.right ? (l(), u("p", at, x(e.right), 1)) : b("", !0)
           ]),
-          u.value ? (i(), c("span", Qe, "›")) : m("", !0)
-        ])) : m("", !0)
+          f.value ? (l(), u("span", it, "›")) : b("", !0)
+        ])) : b("", !0)
       ]),
       _: 3
     }, 16, ["aria-disabled"]));
   }
-}), Ye = {
+}), rt = {
   key: 0,
   class: "h0n-ui-image__loader"
-}, et = {
+}, ct = {
   key: 1,
   class: "h0n-ui-image__error"
-}, tt = ["src"], nt = ["src", "alt"], ot = /* @__PURE__ */ C({
+}, ut = ["src"], dt = ["src", "alt"], ft = /* @__PURE__ */ I({
   __name: "Image",
   props: {
     src: {},
@@ -625,110 +682,244 @@ const je = { class: "content-title-dialog" }, qe = {
     radius: {}
   },
   setup(e) {
-    const n = e, t = z("loading");
-    function s() {
+    const n = e, t = O("loading");
+    function r() {
       t.value = "loading";
-      const u = new Image();
-      u.src = n.src, u.onload = () => {
+      const f = new Image();
+      f.src = n.src, f.onload = () => {
         t.value = "loaded";
-      }, u.onerror = () => {
+      }, f.onerror = () => {
         t.value = "error";
       };
     }
-    Q(() => {
+    G(() => {
       if (n.lazy && "IntersectionObserver" in window) {
-        const u = new IntersectionObserver(([l]) => {
-          l.isIntersecting && (s(), u.disconnect());
+        const f = new IntersectionObserver(([h]) => {
+          h.isIntersecting && (r(), f.disconnect());
         });
-        u.observe(document.body);
+        f.observe(document.body);
       } else
-        s();
-    }), V(() => n.src, s);
-    const o = _(() => ({
+        r();
+    }), E(() => n.src, r);
+    const o = y(() => ({
       borderRadius: typeof n.radius == "number" ? `${n.radius}px` : n.radius
-    })), h = _(() => ({
+    })), v = y(() => ({
       objectFit: n.fit
     }));
-    return (u, l) => (i(), c("div", {
+    return (f, h) => (l(), u("div", {
       class: k(["h0n-ui-image", t.value]),
-      style: B(o.value)
+      style: R(o.value)
     }, [
-      t.value === "loading" ? (i(), c("div", Ye)) : t.value === "error" ? (i(), c("div", et, [
-        e.fallback ? (i(), c("img", {
+      t.value === "loading" ? (l(), u("div", rt)) : t.value === "error" ? (l(), u("div", ct, [
+        e.fallback ? (l(), u("img", {
           key: 0,
           src: e.fallback
-        }, null, 8, tt)) : m("", !0)
-      ])) : (i(), c("img", {
+        }, null, 8, ut)) : b("", !0)
+      ])) : (l(), u("img", {
         key: 2,
         src: e.src,
         alt: e.alt,
-        style: B(h.value),
+        style: R(v.value),
         draggable: "false"
-      }, null, 12, nt))
+      }, null, 12, dt))
     ], 6));
   }
-}), st = /* @__PURE__ */ C({
+}), ht = /* @__PURE__ */ I({
   __name: "Overlay",
   setup(e) {
-    const { top: n, getBackdropZIndex: t, requestCloseTop: s } = H(), o = _(() => !!n.value && n.value.showOverlay !== !1), h = _(() => {
+    const { top: n, getBackdropZIndex: t, requestCloseTop: r } = N(), o = y(() => !!n.value && n.value.showOverlay !== !1), v = y(() => {
       if (n.value?.id)
         return t(n.value.id);
     });
-    function u() {
+    function f() {
     }
-    function l(r) {
-      const g = n.value;
-      !g || g.closeOnOverlay === !1 || s();
+    function h(c) {
+      const p = n.value;
+      !p || p.closeOnOverlay === !1 || r();
     }
-    function d(r) {
-      const g = n.value;
-      !g || g.closeOnEsc === !1 || r.key === "Escape" && s();
+    function d(c) {
+      const p = n.value;
+      !p || p.closeOnEsc === !1 || c.key === "Escape" && r();
     }
-    return Q(() => window.addEventListener("keydown", d)), ue(() => window.removeEventListener("keydown", d)), (r, g) => (i(), w(P, { to: "body" }, [
-      A(R, { name: "h0n-ui-fade" }, {
-        default: E(() => [
-          o.value ? (i(), c("div", {
+    return G(() => window.addEventListener("keydown", d)), ye(() => window.removeEventListener("keydown", d)), (c, p) => (l(), V(J, { to: "body" }, [
+      A(q, { name: "h0n-ui-fade" }, {
+        default: H(() => [
+          o.value ? (l(), u("div", {
             key: 0,
             class: "h0n-ui-overlay",
-            style: B({ zIndex: h.value }),
-            onPointerdown: D(u, ["self", "prevent", "stop"]),
-            onPointerup: D(u, ["self", "prevent", "stop"]),
-            onClick: D(l, ["self", "prevent", "stop"])
-          }, null, 36)) : m("", !0)
+            style: R({ zIndex: v.value }),
+            onPointerdown: F(f, ["self", "prevent", "stop"]),
+            onPointerup: F(f, ["self", "prevent", "stop"]),
+            onClick: F(h, ["self", "prevent", "stop"])
+          }, null, 36)) : b("", !0)
         ]),
         _: 1
       })
     ]));
   }
+}), vt = /* @__PURE__ */ I({
+  __name: "Skeleton",
+  props: {
+    width: { default: "100%" },
+    height: { default: 12 },
+    radius: { default: 8 },
+    variant: { default: "rect" },
+    animated: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const n = e, t = (o) => typeof o == "number" ? `${o}px` : o, r = y(() => {
+      const o = {
+        width: t(n.width),
+        height: t(n.height),
+        borderRadius: t(n.radius)
+      };
+      return n.variant === "circle" ? { ...o, borderRadius: "999px" } : n.variant === "round" ? { ...o, borderRadius: "14px" } : o;
+    });
+    return (o, v) => (l(), u("div", {
+      class: k(["h0n-skeleton", { "is-animated": e.animated }]),
+      style: R(r.value)
+    }, null, 6));
+  }
+}), mt = { class: "h0n-tabs" }, yt = ["onClick"], pt = { class: "h0n-tabs__label" }, gt = {
+  key: 0,
+  class: "h0n-tabs__content"
+}, _t = /* @__PURE__ */ I({
+  __name: "Tabs",
+  props: {
+    modelValue: {},
+    tabs: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: n }) {
+    const t = e, r = n, o = y(
+      () => t.tabs.findIndex((i) => i.value === t.modelValue)
+    ), v = O(null), f = O(null), h = O(0), d = O(0), c = O("forward");
+    let p = 0;
+    const S = () => {
+      L("auto");
+    }, T = () => {
+      const i = f.value;
+      return i ? i.querySelector(".h0n-tabs__tab.is-active") : null;
+    }, L = async (i = "smooth") => {
+      const s = ++p;
+      if (await ge(), s !== p) return;
+      const $ = f.value, w = T(), B = v.value;
+      if (!w || !$) {
+        h.value = 0, d.value = 0;
+        return;
+      }
+      const ce = w.querySelector(".h0n-tabs__label") ?? w, ue = $.getBoundingClientRect(), Y = ce.getBoundingClientRect();
+      if (h.value = Y.left - ue.left, d.value = Y.width, !B) return;
+      const de = w.offsetLeft + w.offsetWidth / 2 - B.clientWidth / 2, fe = Math.max(B.scrollWidth - B.clientWidth, 0), ee = Math.min(Math.max(de, 0), fe);
+      Math.abs(B.scrollLeft - ee) < 1 || B.scrollTo({
+        left: ee,
+        behavior: i
+      });
+    }, P = y(() => ({
+      left: "0px",
+      width: `${d.value}px`,
+      transform: `translateX(${h.value}px)`
+    }));
+    E(
+      () => o.value,
+      (i, s) => {
+        if (s === void 0 || s === -1 || i === -1) {
+          c.value = "forward";
+          return;
+        }
+        c.value = i >= s ? "forward" : "backward";
+      }
+    );
+    const D = y(
+      () => c.value === "forward" ? "h0n-tabs-slide-left" : "h0n-tabs-slide-right"
+    ), g = y(
+      () => t.tabs.length > 0 && t.tabs.length <= 3
+    ), a = (i) => {
+      r("update:modelValue", i);
+    };
+    return G(() => {
+      L("auto"), window.addEventListener("resize", S);
+    }), pe(() => {
+      p++, window.removeEventListener("resize", S);
+    }), E(
+      () => [t.modelValue, t.tabs.length],
+      () => {
+        L();
+      }
+    ), (i, s) => (l(), u("div", mt, [
+      m("div", {
+        ref_key: "scrollerRef",
+        ref: v,
+        class: "h0n-tabs__scroller"
+      }, [
+        m("div", {
+          ref_key: "listRef",
+          ref: f,
+          class: k(["h0n-tabs__list", { "is-even": g.value }])
+        }, [
+          (l(!0), u(Z, null, ae(e.tabs, ($, w) => (l(), u("button", {
+            key: `${String($.value)}-${w}`,
+            class: k(["h0n-tabs__tab", { "is-active": $.value === e.modelValue }]),
+            type: "button",
+            onClick: (B) => a($.value)
+          }, [
+            m("span", pt, x($.label), 1)
+          ], 10, yt))), 128)),
+          m("span", {
+            class: "h0n-tabs__indicator",
+            style: R(P.value)
+          }, null, 4)
+        ], 2)
+      ], 512),
+      i.$slots.default ? (l(), u("div", gt, [
+        A(q, {
+          name: D.value,
+          mode: "out-in"
+        }, {
+          default: H(() => [
+            (l(), u("div", {
+              key: e.modelValue,
+              class: "h0n-tabs__panel"
+            }, [
+              C(i.$slots, "default", { activeTab: e.modelValue })
+            ]))
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ])) : b("", !0)
+    ]));
+  }
 });
-function it(e) {
-  const n = at(e);
+function bt(e) {
+  const n = kt(e);
   return {
     install(t) {
-      t.component("H0Accordion", $e), t.component("H0Alert", ze), t.component("H0Button", De), t.component("H0Card", Pe), t.component("H0Dialog", Fe), t.component("H0Spinner", Y), t.component("H0Menu", Xe), t.component("H0Image", ot), t.component("H0Overlay", st), fe(n.theme);
+      t.component("H0Accordion", Be), t.component("H0Alert", Pe), t.component("H0Button", je), t.component("H0Card", Ze), t.component("H0Dialog", Ye), t.component("H0Spinner", re), t.component("H0Menu", lt), t.component("H0Image", ft), t.component("H0Overlay", ht), t.component("H0Skeleton", vt), t.component("H0Tabs", _t), be(n.theme);
     }
   };
 }
-const lt = it();
-function at(e) {
+const Ct = bt();
+function kt(e) {
   return {
     autoRegisterComponents: e?.autoRegisterComponents ?? !0,
-    theme: de(e?.theme)
+    theme: _e(e?.theme)
   };
 }
 export {
-  $e as Accordion,
-  ze as Alert,
-  De as Button,
-  Pe as Card,
-  Fe as Dialog,
-  ot as Image,
-  Xe as Menu,
-  st as Overlay,
-  Y as Spinner,
-  it as createH0NPlugin,
-  lt as h0nUi,
-  H as useOverlayStack,
-  ke as useWebAlert,
-  Me as useWebDialog
+  Be as Accordion,
+  Pe as Alert,
+  je as Button,
+  Ze as Card,
+  Ye as Dialog,
+  ft as Image,
+  lt as Menu,
+  ht as Overlay,
+  vt as Skeleton,
+  re as Spinner,
+  _t as Tabs,
+  bt as createH0NPlugin,
+  Ct as h0nUi,
+  N as useOverlayStack,
+  Re as useWebAlert,
+  Je as useWebDialog
 };