@velkymx/vibeui 0.1.1 → 0.3.0

package/dist/vibeui.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as c, computed as u, createElementBlock as l, createCommentVNode as o, openBlock as s, normalizeClass as d, renderSlot as p, createTextVNode as f, toDisplayString as b } from "vue";
-const g = /* @__PURE__ */ c({
+import { defineComponent as p, computed as c, createElementBlock as s, createCommentVNode as u, openBlock as a, normalizeClass as h, renderSlot as $, createTextVNode as T, toDisplayString as f, createBlock as x, resolveDynamicComponent as P, withCtx as w, createElementVNode as v, normalizeStyle as E, unref as j, useSlots as D, Fragment as F, renderList as N, ref as I, watch as L, withDirectives as Y, vModelText as se, vModelSelect as de, withModifiers as Q, onMounted as oe, onBeforeUnmount as re } from "vue";
+const ul = /* @__PURE__ */ p({
   __name: "VibeAlert",
   props: {
     variant: { type: String, default: "primary" },
@@ -8,38 +8,2625 @@ const g = /* @__PURE__ */ c({
     message: { type: String, required: !0 }
   },
   emits: ["update:modelValue", "component-error"],
-  setup(t, { emit: i }) {
-    const n = t, a = i, r = u({
-      get: () => n.modelValue,
-      set: (e) => a("update:modelValue", e)
-    }), m = () => {
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c({
+      get: () => t.modelValue,
+      set: (r) => l("update:modelValue", r)
+    }), n = () => {
       try {
-        r.value = !1;
-      } catch (e) {
-        a("component-error", {
+        i.value = !1;
+      } catch (r) {
+        l("component-error", {
           message: "Dismiss failed",
           componentName: "VibeAlert",
-          originalError: e
+          originalError: r
         });
       }
     };
-    return (e, y) => r.value ? (s(), l("div", {
+    return (r, o) => i.value ? (a(), s("div", {
       key: 0,
-      class: d(`alert alert-${t.variant}`),
+      class: h(`alert alert-${e.variant}`),
       role: "alert"
     }, [
-      p(e.$slots, "default", {}, () => [
-        f(b(t.message), 1)
+      $(r.$slots, "default", {}, () => [
+        T(f(e.message), 1)
       ]),
-      t.dismissable ? (s(), l("button", {
+      e.dismissable ? (a(), s("button", {
         key: 0,
         class: "btn-close",
-        onClick: m,
+        onClick: n,
         "aria-label": "Close"
-      })) : o("", !0)
-    ], 2)) : o("", !0);
+      })) : u("", !0)
+    ], 2)) : u("", !0);
   }
-});
+}), cl = /* @__PURE__ */ p({
+  __name: "VibeBadge",
+  props: {
+    variant: { type: String, default: "primary" },
+    pill: { type: Boolean, default: !1 },
+    tag: { type: String, default: "span" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const i = ["badge", `bg-${t.variant}`];
+      return t.pill && i.push("rounded-pill"), i.join(" ");
+    });
+    return (i, n) => (a(), x(P(e.tag), {
+      class: h(l.value)
+    }, {
+      default: w(() => [
+        $(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), fl = /* @__PURE__ */ p({
+  __name: "VibeButton",
+  props: {
+    variant: { type: String, default: "primary" },
+    size: { type: String, default: void 0 },
+    outline: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    type: { type: String, default: "button" },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 },
+    active: { type: Boolean, default: !1 }
+  },
+  emits: ["click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.href ? "a" : t.to ? "router-link" : "button"), n = c(() => {
+      const o = ["btn"];
+      return t.outline ? o.push(`btn-outline-${t.variant}`) : o.push(`btn-${t.variant}`), t.size && o.push(`btn-${t.size}`), t.active && o.push("active"), o.join(" ");
+    }), r = (o) => {
+      t.disabled || l("click", o);
+    };
+    return (o, g) => (a(), x(P(i.value), {
+      class: h(n.value),
+      type: e.href || e.to ? void 0 : e.type,
+      href: e.href,
+      to: e.to,
+      disabled: e.disabled,
+      "aria-disabled": e.disabled,
+      onClick: r
+    }, {
+      default: w(() => [
+        $(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "type", "href", "to", "disabled", "aria-disabled"]));
+  }
+}), ue = ["role", "aria-label"], vl = /* @__PURE__ */ p({
+  __name: "VibeButtonGroup",
+  props: {
+    size: { type: String, default: void 0 },
+    vertical: { type: Boolean, default: !1 },
+    role: { type: String, default: "group" },
+    ariaLabel: { type: String, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const i = [t.vertical ? "btn-group-vertical" : "btn-group"];
+      return t.size && i.push(`btn-group-${t.size}`), i.join(" ");
+    });
+    return (i, n) => (a(), s("div", {
+      class: h(l.value),
+      role: e.role,
+      "aria-label": e.ariaLabel
+    }, [
+      $(i.$slots, "default")
+    ], 10, ue));
+  }
+}), ce = ["disabled", "aria-label"], bl = /* @__PURE__ */ p({
+  __name: "VibeCloseButton",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    white: { type: Boolean, default: !1 },
+    ariaLabel: { type: String, default: "Close" }
+  },
+  emits: ["click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = (n) => {
+      t.disabled || l("click", n);
+    };
+    return (n, r) => (a(), s("button", {
+      type: "button",
+      class: h(["btn-close", { "btn-close-white": e.white }]),
+      disabled: e.disabled,
+      "aria-label": e.ariaLabel,
+      onClick: i
+    }, null, 10, ce));
+  }
+}), fe = { class: "visually-hidden" }, ml = /* @__PURE__ */ p({
+  __name: "VibeSpinner",
+  props: {
+    variant: { type: String, default: void 0 },
+    type: { type: String, default: "border" },
+    size: { type: String, default: void 0 },
+    label: { type: String, default: "Loading..." },
+    tag: { type: String, default: "div" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const i = [`spinner-${t.type}`];
+      return t.variant && i.push(`text-${t.variant}`), t.size && i.push(`spinner-${t.type}-${t.size}`), i.join(" ");
+    });
+    return (i, n) => (a(), x(P(e.tag), {
+      class: h(l.value),
+      role: "status"
+    }, {
+      default: w(() => [
+        v("span", fe, f(e.label), 1)
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+}), yl = /* @__PURE__ */ p({
+  __name: "VibePlaceholder",
+  props: {
+    variant: { type: String, default: void 0 },
+    size: { type: String, default: void 0 },
+    animation: { type: String, default: void 0 },
+    width: { type: [String, Number], default: void 0 },
+    tag: { type: String, default: "span" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const r = ["placeholder"];
+      return t.variant && r.push(`bg-${t.variant}`), t.size && r.push(`placeholder-${t.size}`), r.join(" ");
+    }), i = c(() => {
+      if (t.animation) return `placeholder-${t.animation}`;
+    }), n = c(() => {
+      if (t.width)
+        return { width: typeof t.width == "number" ? `${t.width}%` : t.width };
+    });
+    return (r, o) => (a(), x(P(e.tag), {
+      class: h(i.value)
+    }, {
+      default: w(() => [
+        v("span", {
+          class: h(l.value),
+          style: E(n.value)
+        }, [
+          $(r.$slots, "default")
+        ], 6)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), ve = /* @__PURE__ */ p({
+  __name: "VibeCardHeader",
+  props: {
+    tag: { type: String, default: "div" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), x(P(e.tag), { class: "card-header" }, {
+      default: w(() => [
+        $(t.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), be = /* @__PURE__ */ p({
+  __name: "VibeCardBody",
+  props: {
+    tag: { type: String, default: "div" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), x(P(e.tag), { class: "card-body" }, {
+      default: w(() => [
+        $(t.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), me = /* @__PURE__ */ p({
+  __name: "VibeCardFooter",
+  props: {
+    tag: { type: String, default: "div" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), x(P(e.tag), { class: "card-footer" }, {
+      default: w(() => [
+        $(t.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), ye = ["src", "alt"], K = /* @__PURE__ */ p({
+  __name: "VibeCardImg",
+  props: {
+    src: { type: String, required: !0 },
+    alt: { type: String, default: "" },
+    top: { type: Boolean, default: !1 },
+    bottom: { type: Boolean, default: !1 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = t.top ? "card-img-top" : t.bottom ? "card-img-bottom" : "card-img";
+    return (i, n) => (a(), s("img", {
+      src: e.src,
+      alt: e.alt,
+      class: h(j(l))
+    }, null, 10, ye));
+  }
+}), he = /* @__PURE__ */ p({
+  __name: "VibeCardTitle",
+  props: {
+    tag: { type: String, default: "h5" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), x(P(e.tag), { class: "card-title" }, {
+      default: w(() => [
+        $(t.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), ge = /* @__PURE__ */ p({
+  __name: "VibeCardText",
+  props: {
+    tag: { type: String, default: "p" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), x(P(e.tag), { class: "card-text" }, {
+      default: w(() => [
+        $(t.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), hl = /* @__PURE__ */ p({
+  __name: "VibeCard",
+  props: {
+    variant: { type: String, default: void 0 },
+    border: { type: String, default: void 0 },
+    textVariant: { type: String, default: void 0 },
+    tag: { type: String, default: "div" },
+    // Shorthand props for quick card creation
+    title: { type: String, default: void 0 },
+    body: { type: String, default: void 0 },
+    header: { type: String, default: void 0 },
+    footer: { type: String, default: void 0 },
+    headerImage: { type: String, default: void 0 },
+    headerImageAlt: { type: String, default: "" },
+    footerImage: { type: String, default: void 0 },
+    footerImageAlt: { type: String, default: "" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = D(), i = c(() => {
+      const o = ["card"];
+      return t.variant && o.push(`bg-${t.variant}`), t.border && o.push(`border-${t.border}`), t.textVariant && o.push(`text-${t.textVariant}`), o.join(" ");
+    }), n = c(() => !!(t.title || t.body || t.header || t.footer || t.headerImage || t.footerImage)), r = c(() => !!(l.default || l.header || l.footer || l.body));
+    return (o, g) => (a(), x(P(e.tag), {
+      class: h(i.value)
+    }, {
+      default: w(() => [
+        n.value && !r.value ? (a(), s(F, { key: 0 }, [
+          e.headerImage ? (a(), x(K, {
+            key: 0,
+            top: "",
+            src: e.headerImage,
+            alt: e.headerImageAlt
+          }, null, 8, ["src", "alt"])) : u("", !0),
+          e.header ? (a(), x(ve, { key: 1 }, {
+            default: w(() => [
+              T(f(e.header), 1)
+            ]),
+            _: 1
+          })) : u("", !0),
+          e.title || e.body ? (a(), x(be, { key: 2 }, {
+            default: w(() => [
+              e.title ? (a(), x(he, { key: 0 }, {
+                default: w(() => [
+                  T(f(e.title), 1)
+                ]),
+                _: 1
+              })) : u("", !0),
+              e.body ? (a(), x(ge, { key: 1 }, {
+                default: w(() => [
+                  T(f(e.body), 1)
+                ]),
+                _: 1
+              })) : u("", !0)
+            ]),
+            _: 1
+          })) : u("", !0),
+          e.footer ? (a(), x(me, { key: 3 }, {
+            default: w(() => [
+              T(f(e.footer), 1)
+            ]),
+            _: 1
+          })) : u("", !0),
+          e.footerImage ? (a(), x(K, {
+            key: 4,
+            bottom: "",
+            src: e.footerImage,
+            alt: e.footerImageAlt
+          }, null, 8, ["src", "alt"])) : u("", !0)
+        ], 64)) : $(o.$slots, "default", { key: 1 })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), pe = ["aria-current"], ke = /* @__PURE__ */ p({
+  __name: "VibeBreadcrumbItem",
+  props: {
+    active: { type: Boolean, default: !1 },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = t.href ? "a" : t.to ? "router-link" : "span";
+    return (i, n) => (a(), s("li", {
+      class: h(["breadcrumb-item", { active: e.active }]),
+      "aria-current": e.active ? "page" : void 0
+    }, [
+      (a(), x(P(j(l)), {
+        href: e.href,
+        to: e.to
+      }, {
+        default: w(() => [
+          $(i.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["href", "to"]))
+    ], 10, pe));
+  }
+}), $e = ["aria-label"], Se = { class: "breadcrumb" }, gl = /* @__PURE__ */ p({
+  __name: "VibeBreadcrumb",
+  props: {
+    ariaLabel: { type: String, default: "breadcrumb" },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = D();
+    return (l, i) => (a(), s("nav", { "aria-label": e.ariaLabel }, [
+      v("ol", Se, [
+        e.items && e.items.length > 0 && !j(t).default ? (a(!0), s(F, { key: 0 }, N(e.items, (n, r) => (a(), x(ke, {
+          key: r,
+          href: n.href,
+          to: n.to,
+          active: n.active
+        }, {
+          default: w(() => [
+            T(f(n.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["href", "to", "active"]))), 128)) : $(l.$slots, "default", { key: 1 })
+      ])
+    ], 8, $e));
+  }
+}), Ve = { class: "nav-item" }, J = /* @__PURE__ */ p({
+  __name: "VibeNavItem",
+  props: {
+    active: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 }
+  },
+  emits: ["click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.href ? "a" : t.to ? "router-link" : "a"), n = c(() => {
+      const o = ["nav-link"];
+      return t.active && o.push("active"), t.disabled && o.push("disabled"), o.join(" ");
+    }), r = (o) => {
+      t.disabled || l("click", o);
+    };
+    return (o, g) => (a(), s("li", Ve, [
+      (a(), x(P(i.value), {
+        class: h(n.value),
+        href: e.href,
+        to: e.to,
+        "aria-current": e.active ? "page" : void 0,
+        "aria-disabled": e.disabled,
+        onClick: r
+      }, {
+        default: w(() => [
+          $(o.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "href", "to", "aria-current", "aria-disabled"]))
+    ]));
+  }
+}), pl = /* @__PURE__ */ p({
+  __name: "VibeNav",
+  props: {
+    tabs: { type: Boolean, default: !1 },
+    pills: { type: Boolean, default: !1 },
+    fill: { type: Boolean, default: !1 },
+    justified: { type: Boolean, default: !1 },
+    vertical: { type: Boolean, default: !1 },
+    tag: { type: String, default: "ul" },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = D(), i = c(() => {
+      const n = ["nav"];
+      return t.tabs && n.push("nav-tabs"), t.pills && n.push("nav-pills"), t.fill && n.push("nav-fill"), t.justified && n.push("nav-justified"), t.vertical && n.push("flex-column"), n.join(" ");
+    });
+    return (n, r) => (a(), x(P(e.tag), {
+      class: h(i.value)
+    }, {
+      default: w(() => [
+        e.items && e.items.length > 0 && !j(l).default ? (a(!0), s(F, { key: 0 }, N(e.items, (o, g) => (a(), x(J, {
+          key: g,
+          href: o.href,
+          to: o.to,
+          active: o.active,
+          disabled: o.disabled
+        }, {
+          default: w(() => [
+            T(f(o.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["href", "to", "active", "disabled"]))), 128)) : $(n.$slots, "default", { key: 1 })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), kl = /* @__PURE__ */ p({
+  __name: "VibeNavbar",
+  props: {
+    variant: { type: String, default: "light" },
+    expand: { type: [Boolean, String], default: "lg" },
+    container: { type: [Boolean, String], default: !0 },
+    position: { type: String, default: void 0 },
+    tag: { type: String, default: "nav" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const n = ["navbar"];
+      return t.expand === !0 ? n.push("navbar-expand") : typeof t.expand == "string" && n.push(`navbar-expand-${t.expand}`), t.variant === "dark" || t.variant === "light" ? n.push(`navbar-${t.variant}`) : n.push(`bg-${t.variant}`), t.position && n.push(t.position), n.join(" ");
+    }), i = c(() => {
+      if (t.container !== !1)
+        return t.container === !0 ? "container-fluid" : `container-${t.container}`;
+    });
+    return (n, r) => (a(), x(P(e.tag), {
+      class: h(l.value)
+    }, {
+      default: w(() => [
+        i.value ? (a(), s("div", {
+          key: 0,
+          class: h(i.value)
+        }, [
+          $(n.$slots, "default")
+        ], 2)) : $(n.$slots, "default", { key: 1 })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), $l = /* @__PURE__ */ p({
+  __name: "VibeNavbarBrand",
+  props: {
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = t.href ? "a" : t.to ? "router-link" : "span";
+    return (i, n) => (a(), x(P(j(l)), {
+      class: "navbar-brand",
+      href: e.href,
+      to: e.to
+    }, {
+      default: w(() => [
+        $(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["href", "to"]));
+  }
+}), xe = ["data-bs-target", "aria-controls", "aria-label"], Sl = /* @__PURE__ */ p({
+  __name: "VibeNavbarToggle",
+  props: {
+    target: { type: String, required: !0 },
+    ariaLabel: { type: String, default: "Toggle navigation" }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), s("button", {
+      class: "navbar-toggler",
+      type: "button",
+      "data-bs-toggle": "collapse",
+      "data-bs-target": `#${e.target}`,
+      "aria-controls": e.target,
+      "aria-expanded": "false",
+      "aria-label": e.ariaLabel
+    }, [...l[0] || (l[0] = [
+      v("span", { class: "navbar-toggler-icon" }, null, -1)
+    ])], 8, xe));
+  }
+}), Vl = /* @__PURE__ */ p({
+  __name: "VibeNavbarNav",
+  props: {
+    tag: { type: String, default: "ul" },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = D();
+    return (l, i) => (a(), x(P(e.tag), { class: "navbar-nav" }, {
+      default: w(() => [
+        e.items && e.items.length > 0 && !j(t).default ? (a(!0), s(F, { key: 0 }, N(e.items, (n, r) => (a(), x(J, {
+          key: r,
+          href: n.href,
+          to: n.to,
+          active: n.active,
+          disabled: n.disabled
+        }, {
+          default: w(() => [
+            T(f(n.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["href", "to", "active", "disabled"]))), 128)) : $(l.$slots, "default", { key: 1 })
+      ]),
+      _: 3
+    }));
+  }
+}), U = /* @__PURE__ */ p({
+  __name: "VibePaginationItem",
+  props: {
+    active: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 }
+  },
+  emits: ["click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.href ? "a" : t.to ? "router-link" : "button"), n = (r) => {
+      t.disabled || l("click", r);
+    };
+    return (r, o) => (a(), s("li", {
+      class: h(["page-item", { active: e.active, disabled: e.disabled }])
+    }, [
+      (a(), x(P(i.value), {
+        class: "page-link",
+        href: e.href,
+        to: e.to,
+        type: i.value === "button" ? "button" : void 0,
+        disabled: e.disabled && i.value === "button",
+        "aria-current": e.active ? "page" : void 0,
+        "aria-disabled": e.disabled,
+        onClick: n
+      }, {
+        default: w(() => [
+          $(r.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["href", "to", "type", "disabled", "aria-current", "aria-disabled"]))
+    ], 2));
+  }
+}), Be = ["aria-label"], xl = /* @__PURE__ */ p({
+  __name: "VibePagination",
+  props: {
+    size: { type: String, default: void 0 },
+    ariaLabel: { type: String, default: "Pagination" },
+    // Shorthand props
+    totalPages: { type: Number, default: void 0 },
+    currentPage: { type: Number, default: 1 },
+    showPrevNext: { type: Boolean, default: !0 }
+  },
+  emits: ["page-click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = D(), n = c(() => {
+      const g = ["pagination"];
+      return t.size && g.push(`pagination-${t.size}`), g.join(" ");
+    }), r = c(() => t.totalPages ? Array.from({ length: t.totalPages }, (g, b) => b + 1) : []), o = (g) => {
+      g >= 1 && g <= t.totalPages && l("page-click", g);
+    };
+    return (g, b) => (a(), s("nav", { "aria-label": e.ariaLabel }, [
+      v("ul", {
+        class: h(n.value)
+      }, [
+        e.totalPages && !j(i).default ? (a(), s(F, { key: 0 }, [
+          e.showPrevNext ? (a(), x(U, {
+            key: 0,
+            disabled: e.currentPage === 1,
+            onClick: b[0] || (b[0] = (m) => o(e.currentPage - 1))
+          }, {
+            default: w(() => [...b[2] || (b[2] = [
+              T(" Previous ", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"])) : u("", !0),
+          (a(!0), s(F, null, N(r.value, (m) => (a(), x(U, {
+            key: m,
+            active: m === e.currentPage,
+            onClick: (y) => o(m)
+          }, {
+            default: w(() => [
+              T(f(m), 1)
+            ]),
+            _: 2
+          }, 1032, ["active", "onClick"]))), 128)),
+          e.showPrevNext ? (a(), x(U, {
+            key: 1,
+            disabled: e.currentPage === e.totalPages,
+            onClick: b[1] || (b[1] = (m) => o(e.currentPage + 1))
+          }, {
+            default: w(() => [...b[3] || (b[3] = [
+              T(" Next ", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"])) : u("", !0)
+        ], 64)) : $(g.$slots, "default", { key: 1 })
+      ], 2)
+    ], 8, Be));
+  }
+}), Ce = /* @__PURE__ */ p({
+  __name: "VibeListGroupItem",
+  props: {
+    active: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    variant: { type: String, default: void 0 },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 },
+    tag: { type: String, default: "li" },
+    action: { type: Boolean, default: !1 }
+  },
+  emits: ["click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.href ? "a" : t.to ? "router-link" : t.action ? "button" : t.tag), n = c(() => {
+      const o = ["list-group-item"];
+      return t.active && o.push("active"), t.disabled && o.push("disabled"), t.variant && o.push(`list-group-item-${t.variant}`), (t.action || t.href || t.to) && o.push("list-group-item-action"), o.join(" ");
+    }), r = (o) => {
+      t.disabled || l("click", o);
+    };
+    return (o, g) => (a(), x(P(i.value), {
+      class: h(n.value),
+      href: e.href,
+      to: e.to,
+      type: i.value === "button" ? "button" : void 0,
+      disabled: e.disabled,
+      "aria-disabled": e.disabled,
+      "aria-current": e.active ? "true" : void 0,
+      onClick: r
+    }, {
+      default: w(() => [
+        $(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "href", "to", "type", "disabled", "aria-disabled", "aria-current"]));
+  }
+}), Bl = /* @__PURE__ */ p({
+  __name: "VibeListGroup",
+  props: {
+    flush: { type: Boolean, default: !1 },
+    horizontal: { type: [Boolean, String], default: !1 },
+    numbered: { type: Boolean, default: !1 },
+    tag: { type: String, default: "ul" },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = D(), i = c(() => {
+      const n = ["list-group"];
+      return t.flush && n.push("list-group-flush"), t.numbered && n.push("list-group-numbered"), t.horizontal === !0 ? n.push("list-group-horizontal") : typeof t.horizontal == "string" && n.push(`list-group-horizontal-${t.horizontal}`), n.join(" ");
+    });
+    return (n, r) => (a(), x(P(e.tag), {
+      class: h(i.value)
+    }, {
+      default: w(() => [
+        e.items && e.items.length > 0 && !j(l).default ? (a(!0), s(F, { key: 0 }, N(e.items, (o, g) => (a(), x(Ce, {
+          key: g,
+          href: o.href,
+          to: o.to,
+          active: o.active,
+          disabled: o.disabled,
+          variant: o.variant
+        }, {
+          default: w(() => [
+            T(f(o.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["href", "to", "active", "disabled", "variant"]))), 128)) : $(n.$slots, "default", { key: 1 })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Cl = /* @__PURE__ */ p({
+  __name: "VibeProgress",
+  props: {
+    height: { type: String, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      if (t.height)
+        return { height: t.height };
+    });
+    return (i, n) => (a(), s("div", {
+      class: "progress",
+      style: E(l.value)
+    }, [
+      $(i.$slots, "default")
+    ], 4));
+  }
+}), we = ["aria-valuenow", "aria-valuemax"], wl = /* @__PURE__ */ p({
+  __name: "VibeProgressBar",
+  props: {
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    variant: { type: String, default: void 0 },
+    striped: { type: Boolean, default: !1 },
+    animated: { type: Boolean, default: !1 },
+    label: { type: String, default: void 0 },
+    showValue: { type: Boolean, default: !1 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const r = ["progress-bar"];
+      return t.variant && r.push(`bg-${t.variant}`), (t.striped || t.animated) && r.push("progress-bar-striped"), t.animated && r.push("progress-bar-animated"), r.join(" ");
+    }), i = c(() => ({ width: `${Math.min(100, Math.max(0, t.value / t.max * 100))}%` })), n = c(() => t.label ? t.label : t.showValue ? `${t.value}%` : "");
+    return (r, o) => (a(), s("div", {
+      class: h(l.value),
+      style: E(i.value),
+      role: "progressbar",
+      "aria-valuenow": e.value,
+      "aria-valuemin": 0,
+      "aria-valuemax": e.max
+    }, [
+      T(f(n.value) + " ", 1),
+      $(r.$slots, "default")
+    ], 14, we));
+  }
+}), Te = { class: "accordion-item" }, qe = { class: "accordion-header" }, Me = ["data-bs-target", "aria-expanded", "aria-controls"], Pe = ["id", "data-bs-parent"], Fe = { class: "accordion-body" }, Ie = /* @__PURE__ */ p({
+  __name: "VibeAccordionItem",
+  props: {
+    id: { type: String, required: !0 },
+    title: { type: String, required: !0 },
+    parentId: { type: String, required: !0 },
+    show: { type: Boolean, default: !1 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => t.show ? "accordion-collapse collapse show" : "accordion-collapse collapse");
+    return (i, n) => (a(), s("div", Te, [
+      v("h2", qe, [
+        v("button", {
+          class: h(["accordion-button", { collapsed: !e.show }]),
+          type: "button",
+          "data-bs-toggle": "collapse",
+          "data-bs-target": `#${e.id}`,
+          "aria-expanded": e.show,
+          "aria-controls": e.id
+        }, f(e.title), 11, Me)
+      ]),
+      v("div", {
+        id: e.id,
+        class: h(l.value),
+        "data-bs-parent": `#${e.parentId}`
+      }, [
+        v("div", Fe, [
+          $(i.$slots, "default")
+        ])
+      ], 10, Pe)
+    ]));
+  }
+}), Ne = ["id"], Tl = /* @__PURE__ */ p({
+  __name: "VibeAccordion",
+  props: {
+    id: { type: String, required: !0 },
+    flush: { type: Boolean, default: !1 },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = D();
+    return (l, i) => (a(), s("div", {
+      id: e.id,
+      class: h(["accordion", { "accordion-flush": e.flush }])
+    }, [
+      e.items && e.items.length > 0 && !j(t).default ? (a(!0), s(F, { key: 0 }, N(e.items, (n, r) => (a(), x(Ie, {
+        key: r,
+        id: n.id,
+        "parent-id": e.id,
+        title: n.title,
+        show: n.show
+      }, {
+        default: w(() => [
+          T(f(n.content), 1)
+        ]),
+        _: 2
+      }, 1032, ["id", "parent-id", "title", "show"]))), 128)) : $(l.$slots, "default", { key: 1 })
+    ], 10, Ne));
+  }
+}), ql = /* @__PURE__ */ p({
+  __name: "VibeCollapse",
+  props: {
+    id: { type: String, required: !0 },
+    modelValue: { type: Boolean, default: !1 },
+    tag: { type: String, default: "div" },
+    horizontal: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = I(t.modelValue);
+    L(() => t.modelValue, (n) => {
+      l.value = n;
+    });
+    const i = c(() => {
+      const n = ["collapse"];
+      return t.horizontal && n.push("collapse-horizontal"), l.value && n.push("show"), n.join(" ");
+    });
+    return (n, r) => (a(), x(P(e.tag), {
+      id: e.id,
+      class: h(i.value)
+    }, {
+      default: w(() => [
+        $(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["id", "class"]));
+  }
+}), ze = { key: 0 }, Ae = /* @__PURE__ */ p({
+  __name: "VibeDropdownItem",
+  props: {
+    active: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    href: { type: String, default: void 0 },
+    to: { type: [String, Object], default: void 0 },
+    divider: { type: Boolean, default: !1 },
+    header: { type: Boolean, default: !1 }
+  },
+  emits: ["click", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.divider ? "hr" : t.header ? "h6" : t.href ? "a" : t.to ? "router-link" : "button"), n = c(() => {
+      if (t.divider) return "dropdown-divider";
+      if (t.header) return "dropdown-header";
+      const o = ["dropdown-item"];
+      return t.active && o.push("active"), t.disabled && o.push("disabled"), o.join(" ");
+    }), r = (o) => {
+      !t.disabled && !t.divider && !t.header && l("click", o);
+    };
+    return (o, g) => !e.divider && !e.header ? (a(), s("li", ze, [
+      (a(), x(P(i.value), {
+        class: h(n.value),
+        href: e.href,
+        to: e.to,
+        type: i.value === "button" ? "button" : void 0,
+        disabled: e.disabled,
+        onClick: r
+      }, {
+        default: w(() => [
+          $(o.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "href", "to", "type", "disabled"]))
+    ])) : (a(), x(P(i.value), {
+      key: 1,
+      class: h(n.value)
+    }, {
+      default: w(() => [
+        $(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Oe = ["id"], je = ["aria-labelledby"], Ml = /* @__PURE__ */ p({
+  __name: "VibeDropdown",
+  props: {
+    id: { type: String, required: !0 },
+    text: { type: String, default: "Dropdown" },
+    variant: { type: String, default: "primary" },
+    size: { type: String, default: void 0 },
+    split: { type: Boolean, default: !1 },
+    direction: { type: String, default: "down" },
+    menuEnd: { type: Boolean, default: !1 },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = D(), i = c(() => t.direction === "up" ? "dropup" : t.direction === "end" ? "dropend" : t.direction === "start" ? "dropstart" : "dropdown"), n = c(() => {
+      const o = ["btn", `btn-${t.variant}`];
+      return t.size && o.push(`btn-${t.size}`), o.join(" ");
+    }), r = c(() => {
+      const o = ["dropdown-menu"];
+      return t.menuEnd && o.push("dropdown-menu-end"), o.join(" ");
+    });
+    return (o, g) => (a(), s("div", {
+      class: h(i.value)
+    }, [
+      v("button", {
+        id: e.id,
+        class: h([n.value, "dropdown-toggle"]),
+        type: "button",
+        "data-bs-toggle": "dropdown",
+        "aria-expanded": "false"
+      }, f(e.text), 11, Oe),
+      v("ul", {
+        class: h(r.value),
+        "aria-labelledby": e.id
+      }, [
+        e.items && e.items.length > 0 && !j(l).default ? (a(!0), s(F, { key: 0 }, N(e.items, (b, m) => (a(), x(Ae, {
+          key: m,
+          href: b.href,
+          to: b.to,
+          active: b.active,
+          disabled: b.disabled,
+          divider: b.divider,
+          header: b.header
+        }, {
+          default: w(() => [
+            T(f(b.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["href", "to", "active", "disabled", "divider", "header"]))), 128)) : $(o.$slots, "default", { key: 1 })
+      ], 10, je)
+    ], 2));
+  }
+}), Le = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-keyboard"], De = { class: "modal-content" }, Re = {
+  key: 0,
+  class: "modal-header"
+}, Ge = ["id"], Ee = { class: "modal-body" }, He = {
+  key: 1,
+  class: "modal-footer"
+}, Pl = /* @__PURE__ */ p({
+  __name: "VibeModal",
+  props: {
+    id: { type: String, required: !0 },
+    modelValue: { type: Boolean, default: !1 },
+    title: { type: String, default: "" },
+    size: { type: String, default: void 0 },
+    centered: { type: Boolean, default: !1 },
+    scrollable: { type: Boolean, default: !1 },
+    fullscreen: { type: [Boolean, String], default: !1 },
+    staticBackdrop: { type: Boolean, default: !1 },
+    hideHeader: { type: Boolean, default: !1 },
+    hideFooter: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const i = ["modal-dialog"];
+      return t.size && i.push(`modal-${t.size}`), t.centered && i.push("modal-dialog-centered"), t.scrollable && i.push("modal-dialog-scrollable"), t.fullscreen === !0 ? i.push("modal-fullscreen") : typeof t.fullscreen == "string" && i.push(`modal-fullscreen-${t.fullscreen}-down`), i.join(" ");
+    });
+    return (i, n) => (a(), s("div", {
+      id: e.id,
+      class: "modal fade",
+      tabindex: "-1",
+      "aria-labelledby": `${e.id}-label`,
+      "aria-hidden": "true",
+      "data-bs-backdrop": e.staticBackdrop ? "static" : void 0,
+      "data-bs-keyboard": !e.staticBackdrop
+    }, [
+      v("div", {
+        class: h(l.value)
+      }, [
+        v("div", De, [
+          e.hideHeader ? u("", !0) : (a(), s("div", Re, [
+            v("h5", {
+              id: `${e.id}-label`,
+              class: "modal-title"
+            }, [
+              $(i.$slots, "header", {}, () => [
+                T(f(e.title), 1)
+              ])
+            ], 8, Ge),
+            n[0] || (n[0] = v("button", {
+              type: "button",
+              class: "btn-close",
+              "data-bs-dismiss": "modal",
+              "aria-label": "Close"
+            }, null, -1))
+          ])),
+          v("div", Ee, [
+            $(i.$slots, "default")
+          ]),
+          e.hideFooter ? u("", !0) : (a(), s("div", He, [
+            $(i.$slots, "footer", {}, () => [
+              n[1] || (n[1] = v("button", {
+                type: "button",
+                class: "btn btn-secondary",
+                "data-bs-dismiss": "modal"
+              }, "Close", -1))
+            ])
+          ]))
+        ])
+      ], 2)
+    ], 8, Le));
+  }
+}), Qe = ["id", "aria-labelledby", "data-bs-backdrop", "data-bs-scroll"], Ue = { class: "offcanvas-header" }, We = ["id"], Ye = { class: "offcanvas-body" }, Fl = /* @__PURE__ */ p({
+  __name: "VibeOffcanvas",
+  props: {
+    id: { type: String, required: !0 },
+    modelValue: { type: Boolean, default: !1 },
+    title: { type: String, default: "" },
+    placement: { type: String, default: "start" },
+    backdrop: { type: [Boolean, String], default: !0 },
+    scroll: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => `offcanvas offcanvas-${t.placement}`);
+    return (i, n) => (a(), s("div", {
+      id: e.id,
+      class: h(l.value),
+      tabindex: "-1",
+      "aria-labelledby": `${e.id}-label`,
+      "data-bs-backdrop": e.backdrop === !1 ? "false" : e.backdrop === "static" ? "static" : "true",
+      "data-bs-scroll": e.scroll
+    }, [
+      v("div", Ue, [
+        v("h5", {
+          id: `${e.id}-label`,
+          class: "offcanvas-title"
+        }, [
+          $(i.$slots, "header", {}, () => [
+            T(f(e.title), 1)
+          ])
+        ], 8, We),
+        n[0] || (n[0] = v("button", {
+          type: "button",
+          class: "btn-close",
+          "data-bs-dismiss": "offcanvas",
+          "aria-label": "Close"
+        }, null, -1))
+      ]),
+      v("div", Ye, [
+        $(i.$slots, "default")
+      ])
+    ], 10, Qe));
+  }
+}), Ke = ["id", "data-bs-autohide", "data-bs-delay"], Je = {
+  key: 0,
+  class: "toast-header"
+}, Xe = { class: "me-auto" }, Ze = { class: "toast-body" }, Il = /* @__PURE__ */ p({
+  __name: "VibeToast",
+  props: {
+    id: { type: String, default: void 0 },
+    modelValue: { type: Boolean, default: !1 },
+    title: { type: String, default: "" },
+    variant: { type: String, default: void 0 },
+    autohide: { type: Boolean, default: !0 },
+    delay: { type: Number, default: 5e3 }
+  },
+  emits: ["update:modelValue", "show", "shown", "hide", "hidden", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = c(() => {
+      const i = ["toast"];
+      return t.variant && i.push(`text-bg-${t.variant}`), i.join(" ");
+    });
+    return (i, n) => (a(), s("div", {
+      id: e.id,
+      class: h(l.value),
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      "data-bs-autohide": e.autohide,
+      "data-bs-delay": e.delay
+    }, [
+      e.title || i.$slots.header ? (a(), s("div", Je, [
+        $(i.$slots, "header", {}, () => [
+          v("strong", Xe, f(e.title), 1)
+        ]),
+        n[0] || (n[0] = v("button", {
+          type: "button",
+          class: "btn-close",
+          "data-bs-dismiss": "toast",
+          "aria-label": "Close"
+        }, null, -1))
+      ])) : u("", !0),
+      v("div", Ze, [
+        $(i.$slots, "default")
+      ])
+    ], 10, Ke));
+  }
+}), _e = ["data-bs-interval"], et = ["src", "alt"], tt = {
+  key: 1,
+  class: "carousel-caption d-none d-md-block"
+}, at = { key: 0 }, lt = { key: 1 }, it = /* @__PURE__ */ p({
+  __name: "VibeCarouselSlide",
+  props: {
+    active: { type: Boolean, default: !1 },
+    interval: { type: Number, default: void 0 },
+    imgSrc: { type: String, default: void 0 },
+    imgAlt: { type: String, default: "" },
+    caption: { type: String, default: void 0 },
+    captionText: { type: String, default: void 0 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), s("div", {
+      class: h(["carousel-item", { active: e.active }]),
+      "data-bs-interval": e.interval
+    }, [
+      e.imgSrc ? (a(), s("img", {
+        key: 0,
+        src: e.imgSrc,
+        class: "d-block w-100",
+        alt: e.imgAlt
+      }, null, 8, et)) : u("", !0),
+      $(t.$slots, "img"),
+      e.caption || e.captionText || t.$slots.caption ? (a(), s("div", tt, [
+        $(t.$slots, "caption", {}, () => [
+          e.caption ? (a(), s("h5", at, f(e.caption), 1)) : u("", !0),
+          e.captionText ? (a(), s("p", lt, f(e.captionText), 1)) : u("", !0)
+        ])
+      ])) : u("", !0),
+      $(t.$slots, "default")
+    ], 10, _e));
+  }
+}), nt = ["id", "data-bs-ride", "data-bs-interval", "data-bs-keyboard", "data-bs-pause", "data-bs-wrap", "data-bs-touch"], st = {
+  key: 0,
+  class: "carousel-indicators"
+}, dt = ["data-bs-target", "data-bs-slide-to", "aria-current", "aria-label"], ot = { class: "carousel-inner" }, rt = {
+  key: 0,
+  class: "carousel-indicators"
+}, ut = { class: "carousel-inner" }, ct = ["data-bs-target"], ft = ["data-bs-target"], Nl = /* @__PURE__ */ p({
+  __name: "VibeCarousel",
+  props: {
+    id: { type: String, required: !0 },
+    controls: { type: Boolean, default: !0 },
+    indicators: { type: Boolean, default: !0 },
+    ride: { type: [Boolean, String], default: !1 },
+    interval: { type: [Number, Boolean], default: 5e3 },
+    keyboard: { type: Boolean, default: !0 },
+    pause: { type: [String, Boolean], default: "hover" },
+    wrap: { type: Boolean, default: !0 },
+    touch: { type: Boolean, default: !0 },
+    dark: { type: Boolean, default: !1 },
+    fade: { type: Boolean, default: !1 },
+    items: { type: Array, default: void 0 }
+  },
+  emits: ["slide", "slid", "component-error"],
+  setup(e, { emit: d }) {
+    const t = D();
+    return (l, i) => (a(), s("div", {
+      id: e.id,
+      class: h(["carousel", "slide", { "carousel-dark": e.dark, "carousel-fade": e.fade }]),
+      "data-bs-ride": e.ride === !0 ? "carousel" : e.ride,
+      "data-bs-interval": e.interval,
+      "data-bs-keyboard": e.keyboard,
+      "data-bs-pause": e.pause,
+      "data-bs-wrap": e.wrap,
+      "data-bs-touch": e.touch
+    }, [
+      e.items && e.items.length > 0 && !j(t).default ? (a(), s(F, { key: 0 }, [
+        e.indicators ? (a(), s("div", st, [
+          (a(!0), s(F, null, N(e.items, (n, r) => (a(), s("button", {
+            key: `indicator-${r}`,
+            type: "button",
+            "data-bs-target": `#${e.id}`,
+            "data-bs-slide-to": r,
+            class: h({ active: n.active || r === 0 }),
+            "aria-current": n.active || r === 0,
+            "aria-label": `Slide ${r + 1}`
+          }, null, 10, dt))), 128))
+        ])) : u("", !0),
+        v("div", ot, [
+          (a(!0), s(F, null, N(e.items, (n, r) => (a(), x(it, {
+            key: r,
+            active: n.active || r === 0,
+            interval: n.interval,
+            "img-src": n.src,
+            "img-alt": n.alt,
+            caption: n.caption,
+            "caption-text": n.captionText
+          }, null, 8, ["active", "interval", "img-src", "img-alt", "caption", "caption-text"]))), 128))
+        ])
+      ], 64)) : (a(), s(F, { key: 1 }, [
+        e.indicators ? (a(), s("div", rt, [
+          $(l.$slots, "indicators")
+        ])) : u("", !0),
+        v("div", ut, [
+          $(l.$slots, "default")
+        ])
+      ], 64)),
+      e.controls ? (a(), s("button", {
+        key: 2,
+        class: "carousel-control-prev",
+        type: "button",
+        "data-bs-target": `#${e.id}`,
+        "data-bs-slide": "prev"
+      }, [...i[0] || (i[0] = [
+        v("span", {
+          class: "carousel-control-prev-icon",
+          "aria-hidden": "true"
+        }, null, -1),
+        v("span", { class: "visually-hidden" }, "Previous", -1)
+      ])], 8, ct)) : u("", !0),
+      e.controls ? (a(), s("button", {
+        key: 3,
+        class: "carousel-control-next",
+        type: "button",
+        "data-bs-target": `#${e.id}`,
+        "data-bs-slide": "next"
+      }, [...i[1] || (i[1] = [
+        v("span", {
+          class: "carousel-control-next-icon",
+          "aria-hidden": "true"
+        }, null, -1),
+        v("span", { class: "visually-hidden" }, "Next", -1)
+      ])], 8, ft)) : u("", !0)
+    ], 10, nt));
+  }
+}), vt = ["data-bs-placement", "data-bs-title", "data-bs-trigger", "data-bs-html"], zl = /* @__PURE__ */ p({
+  __name: "VibeTooltip",
+  props: {
+    content: { type: String, required: !0 },
+    placement: { type: String, default: "top" },
+    trigger: { type: String, default: "hover focus" },
+    html: { type: Boolean, default: !1 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), s("span", {
+      "data-bs-toggle": "tooltip",
+      "data-bs-placement": e.placement,
+      "data-bs-title": e.content,
+      "data-bs-trigger": e.trigger,
+      "data-bs-html": e.html
+    }, [
+      $(t.$slots, "default")
+    ], 8, vt));
+  }
+}), bt = ["data-bs-placement", "data-bs-title", "data-bs-content", "data-bs-trigger", "data-bs-html"], Al = /* @__PURE__ */ p({
+  __name: "VibePopover",
+  props: {
+    title: { type: String, default: void 0 },
+    content: { type: String, required: !0 },
+    placement: { type: String, default: "top" },
+    trigger: { type: String, default: "click" },
+    html: { type: Boolean, default: !1 }
+  },
+  emits: ["component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), s("span", {
+      "data-bs-toggle": "popover",
+      "data-bs-placement": e.placement,
+      "data-bs-title": e.title,
+      "data-bs-content": e.content,
+      "data-bs-trigger": e.trigger,
+      "data-bs-html": e.html
+    }, [
+      $(t.$slots, "default")
+    ], 8, bt));
+  }
+}), Ol = /* @__PURE__ */ p({
+  __name: "VibeScrollspy",
+  props: {
+    target: { type: String, required: !0 },
+    offset: { type: Number, default: 10 },
+    method: { type: String, default: "auto" },
+    smoothScroll: { type: Boolean, default: !1 },
+    tag: { type: String, default: "div" }
+  },
+  emits: ["activate", "component-error"],
+  setup(e, { emit: d }) {
+    return (t, l) => (a(), x(P(e.tag), {
+      "data-bs-spy": "scroll",
+      "data-bs-target": e.target,
+      "data-bs-offset": e.offset,
+      "data-bs-method": e.method,
+      "data-bs-smooth-scroll": e.smoothScroll,
+      tabindex: "0"
+    }, {
+      default: w(() => [
+        $(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["data-bs-target", "data-bs-offset", "data-bs-method", "data-bs-smooth-scroll"]));
+  }
+}), mt = { class: "vibe-datatable" }, yt = { class: "row mb-3" }, ht = {
+  key: 0,
+  class: "col-md-6 mb-2 mb-md-0"
+}, gt = ["placeholder"], pt = {
+  key: 1,
+  class: "col-md-6"
+}, kt = { class: "d-flex justify-content-md-end align-items-center" }, $t = ["value"], St = ["onClick"], Vt = {
+  key: 0,
+  class: "ms-1"
+}, xt = ["onClick"], Bt = { key: 0 }, Ct = ["colspan"], wt = { class: "row" }, Tt = {
+  key: 0,
+  class: "col-md-6 mb-2 mb-md-0"
+}, qt = { class: "datatable-info" }, Mt = {
+  key: 1,
+  class: "col-md-6"
+}, Pt = { class: "pagination justify-content-md-end mb-0" }, Ft = {
+  key: 0,
+  class: "page-item"
+}, It = {
+  key: 1,
+  class: "page-item disabled"
+}, Nt = ["onClick"], zt = {
+  key: 2,
+  class: "page-item disabled"
+}, At = {
+  key: 3,
+  class: "page-item"
+}, Ot = /* @__PURE__ */ p({
+  __name: "VibeDataTable",
+  props: {
+    // Data
+    items: { type: Array, default: () => [] },
+    columns: { type: Array, required: !0 },
+    // Table styling
+    striped: { type: Boolean, default: !1 },
+    bordered: { type: Boolean, default: !1 },
+    borderless: { type: Boolean, default: !1 },
+    hover: { type: Boolean, default: !1 },
+    small: { type: Boolean, default: !1 },
+    responsive: { type: Boolean, default: !0 },
+    variant: { type: String, default: void 0 },
+    // Features
+    searchable: { type: Boolean, default: !0 },
+    sortable: { type: Boolean, default: !0 },
+    paginated: { type: Boolean, default: !0 },
+    // Search
+    searchPlaceholder: { type: String, default: "Search..." },
+    searchDebounce: { type: Number, default: 300 },
+    // Pagination
+    perPage: { type: Number, default: 10 },
+    currentPage: { type: Number, default: 1 },
+    perPageOptions: { type: Array, default: () => [5, 10, 25, 50, 100] },
+    // Sorting
+    sortBy: { type: String, default: void 0 },
+    sortDesc: { type: Boolean, default: !1 },
+    // Display
+    showEmpty: { type: Boolean, default: !0 },
+    emptyText: { type: String, default: "No data available" },
+    showPerPage: { type: Boolean, default: !0 },
+    showInfo: { type: Boolean, default: !0 },
+    infoText: { type: String, default: "Showing {start} to {end} of {total} entries" },
+    filteredInfoText: { type: String, default: "Showing {start} to {end} of {total} entries (filtered from {totalRows} total entries)" }
+  },
+  emits: ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc", "row-clicked", "component-error"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = I(""), n = I(null), r = I(""), o = I(t.currentPage), g = I(t.perPage), b = I(t.sortBy), m = I(t.sortDesc);
+    L(() => t.currentPage, (k) => {
+      o.value = k;
+    }), L(() => t.perPage, (k) => {
+      g.value = k;
+    }), L(() => t.sortBy, (k) => {
+      b.value = k;
+    }), L(() => t.sortDesc, (k) => {
+      m.value = k;
+    }), L(i, (k) => {
+      n.value && clearTimeout(n.value), n.value = window.setTimeout(() => {
+        r.value = k, o.value = 1;
+      }, t.searchDebounce);
+    });
+    const y = c(() => {
+      if (!t.searchable || !r.value)
+        return t.items;
+      const k = r.value.toLowerCase();
+      return t.items.filter((C) => t.columns.some((V) => {
+        if (V.searchable === !1) return !1;
+        const O = C[V.key];
+        return O == null ? !1 : String(O).toLowerCase().includes(k);
+      }));
+    }), S = c(() => {
+      if (!t.sortable || !b.value)
+        return y.value;
+      const k = [...y.value], C = b.value;
+      return k.sort((V, O) => {
+        let z = V[C], G = O[C];
+        return z == null ? 1 : G == null ? -1 : (typeof z == "string" && (z = z.toLowerCase()), typeof G == "string" && (G = G.toLowerCase()), z < G ? m.value ? 1 : -1 : z > G ? m.value ? -1 : 1 : 0);
+      }), k;
+    }), q = c(() => {
+      if (!t.paginated)
+        return S.value;
+      const k = (o.value - 1) * g.value, C = k + g.value;
+      return S.value.slice(k, C);
+    }), A = c(() => t.items.length), B = c(() => y.value.length), M = c(() => Math.ceil(B.value / g.value)), R = c(() => B.value === 0 ? 0 : (o.value - 1) * g.value + 1), X = c(() => {
+      const k = o.value * g.value;
+      return Math.min(k, B.value);
+    }), Z = c(() => (B.value !== A.value ? t.filteredInfoText : t.infoText).replace("{start}", String(R.value)).replace("{end}", String(X.value)).replace("{total}", String(B.value)).replace("{totalRows}", String(A.value))), _ = c(() => {
+      const k = ["table"];
+      return t.striped && k.push("table-striped"), t.bordered && k.push("table-bordered"), t.borderless && k.push("table-borderless"), t.hover && k.push("table-hover"), t.small && k.push("table-sm"), t.variant && k.push(`table-${t.variant}`), k.join(" ");
+    }), ee = (k) => {
+      !t.sortable || k.sortable === !1 || (b.value === k.key ? m.value = !m.value : (b.value = k.key, m.value = !1), l("update:sortBy", b.value), l("update:sortDesc", m.value));
+    }, H = (k) => {
+      k < 1 || k > M.value || (o.value = k, l("update:currentPage", k));
+    }, te = () => {
+      o.value = 1, l("update:perPage", g.value), l("update:currentPage", 1);
+    }, ae = (k, C) => {
+      l("row-clicked", k, C);
+    }, le = (k, C) => {
+      const V = k[C.key];
+      return C.formatter ? C.formatter(V, k) : V;
+    }, ie = (k) => !t.sortable || k.sortable === !1 ? "" : b.value !== k.key ? "⇅" : m.value ? "↓" : "↑", ne = (k) => {
+      const C = { ...k.thStyle };
+      return t.sortable && k.sortable !== !1 && (C.cursor = "pointer"), C;
+    };
+    return (k, C) => (a(), s("div", mt, [
+      v("div", yt, [
+        e.searchable ? (a(), s("div", ht, [
+          Y(v("input", {
+            "onUpdate:modelValue": C[0] || (C[0] = (V) => i.value = V),
+            type: "search",
+            class: "form-control",
+            placeholder: e.searchPlaceholder
+          }, null, 8, gt), [
+            [se, i.value]
+          ])
+        ])) : u("", !0),
+        e.showPerPage && e.paginated ? (a(), s("div", pt, [
+          v("div", kt, [
+            C[6] || (C[6] = v("label", { class: "me-2 mb-0" }, "Show", -1)),
+            Y(v("select", {
+              "onUpdate:modelValue": C[1] || (C[1] = (V) => g.value = V),
+              class: "form-select form-select-sm",
+              style: { width: "auto" },
+              onChange: te
+            }, [
+              (a(!0), s(F, null, N(e.perPageOptions, (V) => (a(), s("option", {
+                key: V,
+                value: V
+              }, f(V), 9, $t))), 128))
+            ], 544), [
+              [
+                de,
+                g.value,
+                void 0,
+                { number: !0 }
+              ]
+            ]),
+            C[7] || (C[7] = v("span", { class: "ms-2" }, "entries", -1))
+          ])
+        ])) : u("", !0)
+      ]),
+      v("div", {
+        class: h({ "table-responsive": e.responsive })
+      }, [
+        v("table", {
+          class: h(_.value)
+        }, [
+          v("thead", null, [
+            v("tr", null, [
+              (a(!0), s(F, null, N(e.columns, (V) => (a(), s("th", {
+                key: V.key,
+                class: h(V.headerClass),
+                style: E(ne(V)),
+                onClick: (O) => ee(V)
+              }, [
+                T(f(V.label) + " ", 1),
+                e.sortable && V.sortable !== !1 ? (a(), s("span", Vt, f(ie(V)), 1)) : u("", !0)
+              ], 14, St))), 128))
+            ])
+          ]),
+          v("tbody", null, [
+            (a(!0), s(F, null, N(q.value, (V, O) => (a(), s("tr", {
+              key: O,
+              onClick: (z) => ae(V, O),
+              style: { cursor: "pointer" }
+            }, [
+              (a(!0), s(F, null, N(e.columns, (z) => (a(), s("td", {
+                key: z.key,
+                class: h(z.class),
+                style: E(z.tdStyle)
+              }, [
+                $(k.$slots, `cell(${z.key})`, {
+                  item: V,
+                  value: V[z.key],
+                  index: O
+                }, () => [
+                  T(f(le(V, z)), 1)
+                ], !0)
+              ], 6))), 128))
+            ], 8, xt))), 128)),
+            q.value.length === 0 && e.showEmpty ? (a(), s("tr", Bt, [
+              v("td", {
+                colspan: e.columns.length,
+                class: "text-center"
+              }, f(e.emptyText), 9, Ct)
+            ])) : u("", !0)
+          ])
+        ], 2)
+      ], 2),
+      v("div", wt, [
+        e.showInfo ? (a(), s("div", Tt, [
+          v("div", qt, f(Z.value), 1)
+        ])) : u("", !0),
+        e.paginated && M.value > 1 ? (a(), s("div", Mt, [
+          v("nav", null, [
+            v("ul", Pt, [
+              v("li", {
+                class: h(["page-item", { disabled: o.value === 1 }])
+              }, [
+                v("a", {
+                  class: "page-link",
+                  href: "#",
+                  onClick: C[2] || (C[2] = Q((V) => H(o.value - 1), ["prevent"]))
+                }, " Previous ")
+              ], 2),
+              o.value > 3 ? (a(), s("li", Ft, [
+                v("a", {
+                  class: "page-link",
+                  href: "#",
+                  onClick: C[3] || (C[3] = Q((V) => H(1), ["prevent"]))
+                }, "1")
+              ])) : u("", !0),
+              o.value > 4 ? (a(), s("li", It, [...C[8] || (C[8] = [
+                v("span", { class: "page-link" }, "...", -1)
+              ])])) : u("", !0),
+              (a(!0), s(F, null, N(Array.from({ length: M.value }, (V, O) => O + 1).filter(
+                (V) => V >= o.value - 2 && V <= o.value + 2
+              ), (V) => (a(), s("li", {
+                key: V,
+                class: h(["page-item", { active: V === o.value }])
+              }, [
+                v("a", {
+                  class: "page-link",
+                  href: "#",
+                  onClick: Q((O) => H(V), ["prevent"])
+                }, f(V), 9, Nt)
+              ], 2))), 128)),
+              o.value < M.value - 3 ? (a(), s("li", zt, [...C[9] || (C[9] = [
+                v("span", { class: "page-link" }, "...", -1)
+              ])])) : u("", !0),
+              o.value < M.value - 2 ? (a(), s("li", At, [
+                v("a", {
+                  class: "page-link",
+                  href: "#",
+                  onClick: C[4] || (C[4] = Q((V) => H(M.value), ["prevent"]))
+                }, f(M.value), 1)
+              ])) : u("", !0),
+              v("li", {
+                class: h(["page-item", { disabled: o.value === M.value }])
+              }, [
+                v("a", {
+                  class: "page-link",
+                  href: "#",
+                  onClick: C[5] || (C[5] = Q((V) => H(o.value + 1), ["prevent"]))
+                }, " Next ")
+              ], 2)
+            ])
+          ])
+        ])) : u("", !0)
+      ])
+    ]));
+  }
+}), W = (e, d) => {
+  const t = e.__vccOpts || e;
+  for (const [l, i] of d)
+    t[l] = i;
+  return t;
+}, jl = /* @__PURE__ */ W(Ot, [["__scopeId", "data-v-48221c7b"]]), jt = { class: "mb-3" }, Lt = ["for"], Dt = {
+  key: 0,
+  class: "text-danger"
+}, Rt = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-invalid", "aria-describedby"], Gt = ["id"], Et = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, Ht = ["id"], Ll = /* @__PURE__ */ p({
+  __name: "VibeFormInput",
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    type: { type: String, default: "text" },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    size: { type: String, default: void 0 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    plaintext: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const m = [];
+      return t.plaintext ? m.push("form-control-plaintext") : (m.push("form-control"), t.size && m.push(`form-control-${t.size}`)), i.value === "valid" && m.push("is-valid"), i.value === "invalid" && m.push("is-invalid"), m.join(" ");
+    }), r = (m) => {
+      const y = m.target, S = t.type === "number" ? y.value === "" ? "" : Number(y.value) : y.value;
+      l("update:modelValue", S), l("input", m), t.validateOn === "input" && l("validate");
+    }, o = (m) => {
+      l("change", m), t.validateOn === "change" && l("validate");
+    }, g = (m) => {
+      l("blur", m), t.validateOn === "blur" && l("validate");
+    }, b = (m) => {
+      l("focus", m);
+    };
+    return (m, y) => (a(), s("div", jt, [
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", Dt, "*")) : u("", !0)
+      ], 8, Lt)) : u("", !0),
+      v("input", {
+        id: e.id,
+        type: e.type,
+        class: h(n.value),
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        readonly: e.readonly || e.plaintext,
+        required: e.required,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        onInput: r,
+        onChange: o,
+        onBlur: g,
+        onFocus: b
+      }, null, 42, Rt),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, Gt)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", Et, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please provide a valid value."), 9, Ht)) : u("", !0)
+    ]));
+  }
+}), Qt = { class: "mb-3" }, Ut = ["for"], Wt = {
+  key: 0,
+  class: "text-danger"
+}, Yt = ["id", "value", "disabled", "required", "multiple", "size", "aria-invalid", "aria-describedby"], Kt = ["selected"], Jt = ["value", "disabled"], Xt = ["id"], Zt = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, _t = ["id"], Dl = /* @__PURE__ */ p({
+  __name: "VibeFormSelect",
+  props: {
+    modelValue: { type: [String, Number, Array], default: "" },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    options: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    multiple: { type: Boolean, default: !1 },
+    size: { type: String, default: void 0 },
+    htmlSize: { type: Number, default: void 0 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    placeholder: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const b = ["form-select"];
+      return t.size && b.push(`form-select-${t.size}`), i.value === "valid" && b.push("is-valid"), i.value === "invalid" && b.push("is-invalid"), b.join(" ");
+    }), r = (b) => {
+      const m = b.target;
+      let y;
+      t.multiple ? y = Array.from(m.selectedOptions).map((q) => q.value) : y = m.value, l("update:modelValue", y), l("change", b), t.validateOn === "change" && l("validate");
+    }, o = (b) => {
+      l("blur", b), t.validateOn === "blur" && l("validate");
+    }, g = (b) => {
+      l("focus", b);
+    };
+    return (b, m) => (a(), s("div", Qt, [
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", Wt, "*")) : u("", !0)
+      ], 8, Ut)) : u("", !0),
+      v("select", {
+        id: e.id,
+        class: h(n.value),
+        value: e.modelValue,
+        disabled: e.disabled,
+        required: e.required,
+        multiple: e.multiple,
+        size: e.htmlSize,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        onChange: r,
+        onBlur: o,
+        onFocus: g
+      }, [
+        e.placeholder && !e.multiple ? (a(), s("option", {
+          key: 0,
+          value: "",
+          disabled: "",
+          selected: !e.modelValue
+        }, f(e.placeholder), 9, Kt)) : u("", !0),
+        (a(!0), s(F, null, N(e.options, (y) => (a(), s("option", {
+          key: y.value,
+          value: y.value,
+          disabled: y.disabled
+        }, f(y.text), 9, Jt))), 128)),
+        $(b.$slots, "default")
+      ], 42, Yt),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, Xt)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", Zt, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please select a valid option."), 9, _t)) : u("", !0)
+    ]));
+  }
+}), ea = { class: "mb-3" }, ta = ["for"], aa = {
+  key: 0,
+  class: "text-danger"
+}, la = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-invalid", "aria-describedby"], ia = {
+  key: 1,
+  class: "form-text"
+}, na = ["id"], sa = {
+  key: 3,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, da = ["id"], Rl = /* @__PURE__ */ p({
+  __name: "VibeFormTextarea",
+  props: {
+    modelValue: { type: String, default: "" },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    rows: { type: Number, default: 3 },
+    maxlength: { type: Number, default: void 0 },
+    size: { type: String, default: void 0 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    showCharCount: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const S = ["form-control"];
+      return t.size && S.push(`form-control-${t.size}`), i.value === "valid" && S.push("is-valid"), i.value === "invalid" && S.push("is-invalid"), S.join(" ");
+    }), r = c(() => t.modelValue ? t.modelValue.length : 0), o = c(() => t.maxlength ? `${r.value} / ${t.maxlength}` : `${r.value}`), g = (S) => {
+      const q = S.target;
+      l("update:modelValue", q.value), l("input", S), t.validateOn === "input" && l("validate");
+    }, b = (S) => {
+      l("change", S), t.validateOn === "change" && l("validate");
+    }, m = (S) => {
+      l("blur", S), t.validateOn === "blur" && l("validate");
+    }, y = (S) => {
+      l("focus", S);
+    };
+    return (S, q) => (a(), s("div", ea, [
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", aa, "*")) : u("", !0)
+      ], 8, ta)) : u("", !0),
+      v("textarea", {
+        id: e.id,
+        class: h(n.value),
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        required: e.required,
+        rows: e.rows,
+        maxlength: e.maxlength,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        onInput: g,
+        onChange: b,
+        onBlur: m,
+        onFocus: y
+      }, null, 42, la),
+      e.showCharCount ? (a(), s("div", ia, f(o.value), 1)) : u("", !0),
+      e.helpText && !e.validationMessage && !e.showCharCount ? (a(), s("div", {
+        key: 2,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, na)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", sa, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 4,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please provide a valid value."), 9, da)) : u("", !0)
+    ]));
+  }
+}), oa = { class: "mb-3" }, ra = ["for"], ua = {
+  key: 0,
+  class: "text-danger"
+}, ca = ["disabled"], fa = ["id", "value", "disabled", "readonly", "required", "min", "max", "step", "aria-invalid", "aria-describedby"], va = ["disabled"], ba = ["id"], ma = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, ya = ["id"], ha = /* @__PURE__ */ p({
+  __name: "VibeFormSpinbutton",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    min: { type: Number, default: void 0 },
+    max: { type: Number, default: void 0 },
+    step: { type: Number, default: 1 },
+    size: { type: String, default: void 0 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    wrap: { type: Boolean, default: !1 },
+    vertical: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "input", "change", "increment", "decrement"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const B = ["form-control"];
+      return t.size && B.push(`form-control-${t.size}`), i.value === "valid" && B.push("is-valid"), i.value === "invalid" && B.push("is-invalid"), B.join(" ");
+    }), r = c(() => {
+      const B = ["input-group"];
+      return t.size && B.push(`input-group-${t.size}`), t.vertical && B.push("input-group-vertical"), B.join(" ");
+    }), o = c(() => t.disabled || t.readonly ? !1 : t.min === void 0 || t.wrap ? !0 : t.modelValue > t.min), g = c(() => t.disabled || t.readonly ? !1 : t.max === void 0 || t.wrap ? !0 : t.modelValue < t.max), b = (B) => {
+      const M = B.target;
+      let R = M.value === "" ? 0 : Number(M.value);
+      t.min !== void 0 && R < t.min && (R = t.min), t.max !== void 0 && R > t.max && (R = t.max), l("update:modelValue", R), l("input", B), t.validateOn === "input" && l("validate");
+    }, m = (B) => {
+      l("change", B), t.validateOn === "change" && l("validate");
+    }, y = (B) => {
+      l("blur", B), t.validateOn === "blur" && l("validate");
+    }, S = (B) => {
+      l("focus", B);
+    }, q = () => {
+      if (!g.value) return;
+      let B = t.modelValue + t.step;
+      t.max !== void 0 && B > t.max && (B = t.wrap ? t.min ?? 0 : t.max), l("update:modelValue", B), l("increment", B), t.validateOn === "change" && l("validate");
+    }, A = () => {
+      if (!o.value) return;
+      let B = t.modelValue - t.step;
+      t.min !== void 0 && B < t.min && (B = t.wrap ? t.max ?? 0 : t.min), l("update:modelValue", B), l("decrement", B), t.validateOn === "change" && l("validate");
+    };
+    return (B, M) => (a(), s("div", oa, [
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", ua, "*")) : u("", !0)
+      ], 8, ra)) : u("", !0),
+      v("div", {
+        class: h(r.value)
+      }, [
+        v("button", {
+          class: "btn btn-outline-secondary",
+          type: "button",
+          disabled: !o.value,
+          onClick: A,
+          "aria-label": "Decrement"
+        }, [...M[0] || (M[0] = [
+          v("span", { "aria-hidden": "true" }, "−", -1)
+        ])], 8, ca),
+        v("input", {
+          id: e.id,
+          type: "number",
+          class: h(n.value),
+          value: e.modelValue,
+          disabled: e.disabled,
+          readonly: e.readonly,
+          required: e.required,
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          "aria-invalid": i.value === "invalid",
+          "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+          onInput: b,
+          onChange: m,
+          onBlur: y,
+          onFocus: S
+        }, null, 42, fa),
+        v("button", {
+          class: "btn btn-outline-secondary",
+          type: "button",
+          disabled: !g.value,
+          onClick: q,
+          "aria-label": "Increment"
+        }, [...M[1] || (M[1] = [
+          v("span", { "aria-hidden": "true" }, "+", -1)
+        ])], 8, va)
+      ], 2),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, ba)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", ma, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please provide a valid value."), 9, ya)) : u("", !0)
+    ]));
+  }
+}), Gl = /* @__PURE__ */ W(ha, [["__scopeId", "data-v-e706d3dc"]]), ga = { class: "mb-3" }, pa = ["for"], ka = {
+  key: 0,
+  class: "text-danger"
+}, $a = ["id", "type", "value", "disabled", "readonly", "required", "min", "max", "aria-invalid", "aria-describedby"], Sa = ["id"], Va = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, xa = ["id"], El = /* @__PURE__ */ p({
+  __name: "VibeFormDatepicker",
+  props: {
+    modelValue: { type: String, default: "" },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    min: { type: String, default: void 0 },
+    max: { type: String, default: void 0 },
+    size: { type: String, default: void 0 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    type: { type: String, default: "date" }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "input", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const m = ["form-control"];
+      return t.size && m.push(`form-control-${t.size}`), i.value === "valid" && m.push("is-valid"), i.value === "invalid" && m.push("is-invalid"), m.join(" ");
+    }), r = (m) => {
+      const y = m.target;
+      l("update:modelValue", y.value), l("input", m), t.validateOn === "input" && l("validate");
+    }, o = (m) => {
+      l("change", m), t.validateOn === "change" && l("validate");
+    }, g = (m) => {
+      l("blur", m), t.validateOn === "blur" && l("validate");
+    }, b = (m) => {
+      l("focus", m);
+    };
+    return (m, y) => (a(), s("div", ga, [
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", ka, "*")) : u("", !0)
+      ], 8, pa)) : u("", !0),
+      v("input", {
+        id: e.id,
+        type: e.type,
+        class: h(n.value),
+        value: e.modelValue,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        required: e.required,
+        min: e.min,
+        max: e.max,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        onInput: r,
+        onChange: o,
+        onBlur: g,
+        onFocus: b
+      }, null, 42, $a),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, Sa)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", Va, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please provide a valid date."), 9, xa)) : u("", !0)
+    ]));
+  }
+}), Ba = ["id", "checked", "value", "disabled", "required", "indeterminate", "aria-invalid", "aria-describedby"], Ca = ["for"], wa = {
+  key: 0,
+  class: "text-danger"
+}, Ta = ["id"], qa = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, Ma = ["id"], Hl = /* @__PURE__ */ p({
+  __name: "VibeFormCheckbox",
+  props: {
+    modelValue: { type: [Boolean, Array], default: !1 },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    value: { type: [String, Number, Boolean], default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    inline: { type: Boolean, default: !1 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    indeterminate: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const y = ["form-check-input"];
+      return i.value === "valid" && y.push("is-valid"), i.value === "invalid" && y.push("is-invalid"), y.join(" ");
+    }), r = c(() => {
+      const y = ["form-check"];
+      return t.inline && y.push("form-check-inline"), y.join(" ");
+    }), o = c(() => Array.isArray(t.modelValue) ? t.modelValue.includes(t.value) : t.modelValue === t.value || t.modelValue === !0), g = (y) => {
+      const S = y.target;
+      let q;
+      if (Array.isArray(t.modelValue))
+        if (q = [...t.modelValue], S.checked)
+          q.includes(t.value) || q.push(t.value);
+        else {
+          const A = q.indexOf(t.value);
+          A > -1 && q.splice(A, 1);
+        }
+      else
+        q = S.checked;
+      l("update:modelValue", q), l("change", y), t.validateOn === "change" && l("validate");
+    }, b = (y) => {
+      l("blur", y), t.validateOn === "blur" && l("validate");
+    }, m = (y) => {
+      l("focus", y);
+    };
+    return (y, S) => (a(), s("div", {
+      class: h(r.value)
+    }, [
+      v("input", {
+        id: e.id,
+        type: "checkbox",
+        class: h(n.value),
+        checked: o.value,
+        value: e.value,
+        disabled: e.disabled,
+        required: e.required,
+        indeterminate: e.indeterminate,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        onChange: g,
+        onBlur: b,
+        onFocus: m
+      }, null, 42, Ba),
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-check-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", wa, "*")) : u("", !0)
+      ], 8, Ca)) : u("", !0),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, Ta)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", qa, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "You must check this box."), 9, Ma)) : u("", !0)
+    ], 2));
+  }
+}), Pa = ["id", "checked", "value", "name", "disabled", "required", "aria-invalid", "aria-describedby"], Fa = ["for"], Ia = {
+  key: 0,
+  class: "text-danger"
+}, Na = ["id"], za = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, Aa = ["id"], Ql = /* @__PURE__ */ p({
+  __name: "VibeFormRadio",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: void 0 },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    value: { type: [String, Number, Boolean], required: !0 },
+    name: { type: String, required: !0 },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    inline: { type: Boolean, default: !1 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const y = ["form-check-input"];
+      return i.value === "valid" && y.push("is-valid"), i.value === "invalid" && y.push("is-invalid"), y.join(" ");
+    }), r = c(() => {
+      const y = ["form-check"];
+      return t.inline && y.push("form-check-inline"), y.join(" ");
+    }), o = c(() => t.modelValue === t.value), g = (y) => {
+      y.target.checked && l("update:modelValue", t.value), l("change", y), t.validateOn === "change" && l("validate");
+    }, b = (y) => {
+      l("blur", y), t.validateOn === "blur" && l("validate");
+    }, m = (y) => {
+      l("focus", y);
+    };
+    return (y, S) => (a(), s("div", {
+      class: h(r.value)
+    }, [
+      v("input", {
+        id: e.id,
+        type: "radio",
+        class: h(n.value),
+        checked: o.value,
+        value: e.value,
+        name: e.name,
+        disabled: e.disabled,
+        required: e.required,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        onChange: g,
+        onBlur: b,
+        onFocus: m
+      }, null, 42, Pa),
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-check-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", Ia, "*")) : u("", !0)
+      ], 8, Fa)) : u("", !0),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, Na)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", za, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please select an option."), 9, Aa)) : u("", !0)
+    ], 2));
+  }
+}), Oa = { class: "form-check form-switch" }, ja = ["id", "checked", "disabled", "required", "aria-invalid", "aria-describedby"], La = ["for"], Da = {
+  key: 0,
+  class: "text-danger"
+}, Ra = ["id"], Ga = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, Ea = ["id"], Ul = /* @__PURE__ */ p({
+  __name: "VibeFormSwitch",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "change"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = c(() => t.validationState), n = c(() => {
+      const b = ["form-check-input"];
+      return i.value === "valid" && b.push("is-valid"), i.value === "invalid" && b.push("is-invalid"), b.join(" ");
+    }), r = (b) => {
+      const m = b.target;
+      l("update:modelValue", m.checked), l("change", b), t.validateOn === "change" && l("validate");
+    }, o = (b) => {
+      l("blur", b), t.validateOn === "blur" && l("validate");
+    }, g = (b) => {
+      l("focus", b);
+    };
+    return (b, m) => (a(), s("div", Oa, [
+      v("input", {
+        id: e.id,
+        type: "checkbox",
+        class: h(n.value),
+        checked: e.modelValue,
+        disabled: e.disabled,
+        required: e.required,
+        "aria-invalid": i.value === "invalid",
+        "aria-describedby": e.validationMessage || e.helpText ? `${e.id}-feedback` : void 0,
+        role: "switch",
+        onChange: r,
+        onBlur: o,
+        onFocus: g
+      }, null, 42, ja),
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-check-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", Da, "*")) : u("", !0)
+      ], 8, La)) : u("", !0),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 1,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, Ra)) : u("", !0),
+      i.value === "valid" ? (a(), s("div", Ga, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      i.value === "invalid" ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "You must toggle this switch."), 9, Ea)) : u("", !0)
+    ]));
+  }
+}), Ha = ["for"], Qa = {
+  key: 0,
+  class: "text-danger"
+}, Ua = ["id"], Wa = {
+  key: 1,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, Ya = ["id"], Ka = ["for"], Ja = {
+  key: 0,
+  class: "text-danger"
+}, Xa = ["id"], Za = {
+  key: 2,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, _a = ["id"], Wl = /* @__PURE__ */ p({
+  __name: "VibeFormGroup",
+  props: {
+    label: { type: String, default: void 0 },
+    labelFor: { type: String, default: void 0 },
+    required: { type: Boolean, default: !1 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    helpText: { type: String, default: void 0 },
+    floating: { type: Boolean, default: !1 },
+    row: { type: Boolean, default: !1 },
+    labelCols: { type: [Number, String], default: void 0 },
+    labelAlign: { type: String, default: void 0 }
+  },
+  setup(e) {
+    const d = e, t = c(() => {
+      const r = [];
+      return d.floating ? r.push("form-floating") : d.row ? r.push("row", "mb-3") : r.push("mb-3"), r.join(" ");
+    }), l = c(() => {
+      const r = [];
+      return d.floating ? r.push("form-label") : d.row ? (r.push("col-form-label"), d.labelCols && r.push(`col-sm-${d.labelCols}`), d.labelAlign && r.push(`text-${d.labelAlign}`)) : r.push("form-label"), r.join(" ");
+    }), i = c(() => d.row && d.labelCols ? `col-sm-${12 - Number(d.labelCols)}` : ""), n = c(() => d.labelFor ? `${d.labelFor}-feedback` : void 0);
+    return (r, o) => (a(), s("div", {
+      class: h(t.value)
+    }, [
+      e.label && !e.floating ? (a(), s("label", {
+        key: 0,
+        for: e.labelFor,
+        class: h(l.value)
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", Qa, "*")) : u("", !0)
+      ], 10, Ha)) : u("", !0),
+      e.row && e.labelCols ? (a(), s("div", {
+        key: 1,
+        class: h(i.value)
+      }, [
+        $(r.$slots, "default"),
+        e.helpText && !e.validationMessage ? (a(), s("div", {
+          key: 0,
+          id: n.value,
+          class: "form-text"
+        }, f(e.helpText), 9, Ua)) : u("", !0),
+        e.validationState === "valid" ? (a(), s("div", Wa, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+        e.validationState === "invalid" ? (a(), s("div", {
+          key: 2,
+          id: n.value,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, f(e.validationMessage || "Please provide a valid value."), 9, Ya)) : u("", !0)
+      ], 2)) : (a(), s(F, { key: 2 }, [
+        $(r.$slots, "default"),
+        e.label && e.floating ? (a(), s("label", {
+          key: 0,
+          for: e.labelFor,
+          class: h(l.value)
+        }, [
+          T(f(e.label) + " ", 1),
+          e.required ? (a(), s("span", Ja, "*")) : u("", !0)
+        ], 10, Ka)) : u("", !0),
+        e.helpText && !e.validationMessage ? (a(), s("div", {
+          key: 1,
+          id: n.value,
+          class: "form-text"
+        }, f(e.helpText), 9, Xa)) : u("", !0),
+        e.validationState === "valid" ? (a(), s("div", Za, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+        e.validationState === "invalid" ? (a(), s("div", {
+          key: 3,
+          id: n.value,
+          class: "invalid-feedback",
+          style: { display: "block" }
+        }, f(e.validationMessage || "Please provide a valid value."), 9, _a)) : u("", !0)
+      ], 64))
+    ], 2));
+  }
+}), el = { class: "mb-3" }, tl = ["for"], al = {
+  key: 0,
+  class: "text-danger"
+}, ll = {
+  key: 1,
+  class: "alert alert-warning",
+  role: "alert"
+}, il = ["id"], nl = ["id"], sl = {
+  key: 4,
+  class: "valid-feedback",
+  style: { display: "block" }
+}, dl = ["id"], ol = /* @__PURE__ */ p({
+  __name: "VibeFormWysiwyg",
+  props: {
+    modelValue: { type: String, default: "" },
+    id: { type: String, required: !0 },
+    label: { type: String, default: void 0 },
+    placeholder: { type: String, default: "Write something..." },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    theme: { type: String, default: "snow" },
+    toolbar: { type: [Array, String, Boolean], default: void 0 },
+    validationState: { type: String, default: null },
+    validationMessage: { type: String, default: void 0 },
+    validationRules: { type: [Array, Function], default: void 0 },
+    validateOn: { type: String, default: "blur" },
+    helpText: { type: String, default: void 0 },
+    height: { type: String, default: "200px" }
+  },
+  emits: ["update:modelValue", "validate", "blur", "focus", "change", "ready"],
+  setup(e, { emit: d }) {
+    const t = e, l = d, i = I(null), n = I(null), r = I(!1), o = I(null), g = c(() => t.validationState), b = c(() => {
+      const S = ["vibe-wysiwyg-container"];
+      return g.value === "valid" && S.push("is-valid"), g.value === "invalid" && S.push("is-invalid"), t.disabled && S.push("disabled"), S.join(" ");
+    }), m = [
+      [{ header: [1, 2, 3, !1] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      [{ color: [] }, { background: [] }],
+      ["link", "image"],
+      ["clean"]
+    ], y = () => t.toolbar === !1 ? !1 : t.toolbar === !0 || t.toolbar === void 0 ? m : t.toolbar;
+    return oe(async () => {
+      try {
+        const S = await import("quill"), q = S.default || S;
+        if (await import("quill/dist/quill.snow.css"), i.value) {
+          const A = {
+            theme: t.theme,
+            placeholder: t.placeholder,
+            readOnly: t.readonly || t.disabled,
+            modules: {
+              toolbar: y()
+            }
+          };
+          n.value = new q(i.value, A), t.modelValue && (n.value.root.innerHTML = t.modelValue), n.value.on("text-change", () => {
+            const B = n.value.root.innerHTML, M = n.value.getText().trim().length === 0;
+            l("update:modelValue", M ? "" : B), l("change"), t.validateOn === "change" && l("validate");
+          }), n.value.root.addEventListener("blur", () => {
+            l("blur"), t.validateOn === "blur" && l("validate");
+          }), n.value.root.addEventListener("focus", () => {
+            l("focus");
+          }), r.value = !0, l("ready", n.value);
+        }
+      } catch (S) {
+        console.error("Failed to load Quill editor:", S), o.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", r.value = !1;
+      }
+    }), re(() => {
+      n.value && (n.value = null);
+    }), L(() => t.modelValue, (S) => {
+      n.value && n.value.root.innerHTML !== S && (n.value.root.innerHTML = S || "");
+    }), L(() => t.disabled, (S) => {
+      n.value && n.value.enable(!S);
+    }), L(() => t.readonly, (S) => {
+      n.value && n.value.enable(!S);
+    }), (S, q) => (a(), s("div", el, [
+      e.label ? (a(), s("label", {
+        key: 0,
+        for: e.id,
+        class: "form-label"
+      }, [
+        T(f(e.label) + " ", 1),
+        e.required ? (a(), s("span", al, "*")) : u("", !0)
+      ], 8, tl)) : u("", !0),
+      o.value ? (a(), s("div", ll, f(o.value), 1)) : (a(), s("div", {
+        key: 2,
+        class: h(b.value),
+        style: E({ minHeight: e.height })
+      }, [
+        v("div", {
+          ref_key: "editorContainer",
+          ref: i,
+          id: e.id
+        }, null, 8, il)
+      ], 6)),
+      e.helpText && !e.validationMessage ? (a(), s("div", {
+        key: 3,
+        id: `${e.id}-feedback`,
+        class: "form-text"
+      }, f(e.helpText), 9, nl)) : u("", !0),
+      g.value === "valid" ? (a(), s("div", sl, f(e.validationMessage || "Looks good!"), 1)) : u("", !0),
+      g.value === "invalid" ? (a(), s("div", {
+        key: 5,
+        id: `${e.id}-feedback`,
+        class: "invalid-feedback",
+        style: { display: "block" }
+      }, f(e.validationMessage || "Please provide valid content."), 9, dl)) : u("", !0)
+    ]));
+  }
+}), Yl = /* @__PURE__ */ W(ol, [["__scopeId", "data-v-2eb8f4ff"]]);
+function Kl(e = "") {
+  const d = I(e), t = I(null), l = I(""), i = I(!1), n = I(!1), r = I(!1), o = async (q) => {
+    if (!q)
+      return t.value = null, l.value = "", { valid: !0 };
+    r.value = !0;
+    try {
+      const A = Array.isArray(q) ? q : [{ validator: q }];
+      for (const B of A) {
+        const M = await B.validator(d.value);
+        if (M === !1 || typeof M == "string")
+          return t.value = "invalid", l.value = typeof M == "string" ? M : B.message || "Invalid value", r.value = !1, { valid: !1, message: l.value };
+      }
+      return t.value = "valid", l.value = "", r.value = !1, { valid: !0 };
+    } catch {
+      return t.value = "invalid", l.value = "Validation error occurred", r.value = !1, { valid: !1, message: l.value };
+    }
+  }, g = () => {
+    d.value = e, t.value = null, l.value = "", i.value = !1, n.value = !1, r.value = !1;
+  }, b = () => {
+    n.value = !0;
+  }, m = () => {
+    i.value = !0;
+  }, y = c(() => t.value === "valid"), S = c(() => t.value === "invalid");
+  return {
+    value: d,
+    validationState: t,
+    validationMessage: l,
+    isDirty: i,
+    isTouched: n,
+    isValidating: r,
+    isValid: y,
+    isInvalid: S,
+    validate: o,
+    reset: g,
+    markAsTouched: b,
+    markAsDirty: m
+  };
+}
+const Jl = {
+  required: (e = "This field is required") => ({
+    validator: (d) => Array.isArray(d) ? d.length > 0 || e : typeof d == "string" ? d.trim().length > 0 || e : d != null && d !== "" || e,
+    message: e
+  }),
+  email: (e = "Please enter a valid email address") => ({
+    validator: (d) => d ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d) || e : !0,
+    message: e
+  }),
+  minLength: (e, d) => ({
+    validator: (t) => t ? t.length >= e || d || `Minimum length is ${e} characters` : !0,
+    message: d
+  }),
+  maxLength: (e, d) => ({
+    validator: (t) => t ? t.length <= e || d || `Maximum length is ${e} characters` : !0,
+    message: d
+  }),
+  min: (e, d) => ({
+    validator: (t) => t == null || t === "" ? !0 : Number(t) >= e || d || `Minimum value is ${e}`,
+    message: d
+  }),
+  max: (e, d) => ({
+    validator: (t) => t == null || t === "" ? !0 : Number(t) <= e || d || `Maximum value is ${e}`,
+    message: d
+  }),
+  pattern: (e, d = "Invalid format") => ({
+    validator: (t) => t ? e.test(t) || d : !0,
+    message: d
+  }),
+  url: (e = "Please enter a valid URL") => ({
+    validator: (d) => {
+      if (!d) return !0;
+      try {
+        return new URL(d), !0;
+      } catch {
+        return e;
+      }
+    },
+    message: e
+  }),
+  // Async validator example for API validation
+  async: (e) => ({
+    validator: e
+  })
+};
 export {
-  g as VibeAlert
+  Tl as VibeAccordion,
+  Ie as VibeAccordionItem,
+  ul as VibeAlert,
+  cl as VibeBadge,
+  gl as VibeBreadcrumb,
+  ke as VibeBreadcrumbItem,
+  fl as VibeButton,
+  vl as VibeButtonGroup,
+  hl as VibeCard,
+  be as VibeCardBody,
+  me as VibeCardFooter,
+  ve as VibeCardHeader,
+  K as VibeCardImg,
+  ge as VibeCardText,
+  he as VibeCardTitle,
+  Nl as VibeCarousel,
+  it as VibeCarouselSlide,
+  bl as VibeCloseButton,
+  ql as VibeCollapse,
+  jl as VibeDataTable,
+  Ml as VibeDropdown,
+  Ae as VibeDropdownItem,
+  Hl as VibeFormCheckbox,
+  El as VibeFormDatepicker,
+  Wl as VibeFormGroup,
+  Ll as VibeFormInput,
+  Ql as VibeFormRadio,
+  Dl as VibeFormSelect,
+  Gl as VibeFormSpinbutton,
+  Ul as VibeFormSwitch,
+  Rl as VibeFormTextarea,
+  Yl as VibeFormWysiwyg,
+  Bl as VibeListGroup,
+  Ce as VibeListGroupItem,
+  Pl as VibeModal,
+  pl as VibeNav,
+  J as VibeNavItem,
+  kl as VibeNavbar,
+  $l as VibeNavbarBrand,
+  Vl as VibeNavbarNav,
+  Sl as VibeNavbarToggle,
+  Fl as VibeOffcanvas,
+  xl as VibePagination,
+  U as VibePaginationItem,
+  yl as VibePlaceholder,
+  Al as VibePopover,
+  Cl as VibeProgress,
+  wl as VibeProgressBar,
+  Ol as VibeScrollspy,
+  ml as VibeSpinner,
+  Il as VibeToast,
+  zl as VibeTooltip,
+  Kl as useFormValidation,
+  Jl as validators
 };