kablui 0.1.0

package/dist/kablui.js

@@ -0,0 +1,2934 @@
+import { defineComponent as x, useModel as N, provide as G, computed as g, openBlock as f, createElementBlock as p, renderSlot as C, mergeModels as U, inject as S, withDirectives as Oe, normalizeClass as w, unref as v, vShow as Pe, watch as K, onBeforeUnmount as q, createElementVNode as j, toDisplayString as H, createCommentVNode as z, createBlock as V, resolveDynamicComponent as ae, withCtx as Y, toValue as O, ref as R, useAttrs as X, onMounted as ne, mergeProps as Z, getCurrentInstance as Ve, onScopeDispose as ie, useSlots as Fe, Teleport as de, toRef as it, watchEffect as st, nextTick as Q, withModifiers as He, normalizeStyle as ce, createVNode as he, createTextVNode as re, Fragment as ee, renderList as we, onUpdated as lt } from "vue";
+const ot = "0.1.0", rt = {
+  version: ot
+}, _e = Symbol("kablui-accordion"), $e = Symbol(
+  "kablui-accordion-item"
+), ut = { "data-slot": "accordion" }, Ga = /* @__PURE__ */ x({
+  __name: "Accordion",
+  props: /* @__PURE__ */ U({
+    type: { default: "single" },
+    collapsible: { type: Boolean, default: !0 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = /* @__PURE__ */ new Map(), i = [];
+    function l(u) {
+      return e.type === "multiple" ? Array.isArray(t.value) && t.value.includes(u) : t.value === u;
+    }
+    function o(u) {
+      if (e.type === "multiple") {
+        const m = Array.isArray(t.value) ? [...t.value] : [], b = m.indexOf(u);
+        b >= 0 ? m.splice(b, 1) : m.push(u), t.value = m;
+        return;
+      }
+      if (t.value === u) {
+        e.collapsible && (t.value = void 0);
+        return;
+      }
+      t.value = u;
+    }
+    function s(u, m, b) {
+      n.has(u) || i.push(u), n.set(u, { el: m, disabled: b });
+    }
+    function c(u) {
+      n.delete(u);
+      const m = i.indexOf(u);
+      m >= 0 && i.splice(m, 1);
+    }
+    function d() {
+      return i.map((u) => n.get(u)).filter((u) => !!u && !u.disabled && !!u.el).map((u) => u.el);
+    }
+    function r(u, m) {
+      var _, $;
+      const b = d();
+      if (b.length === 0) return;
+      const y = (_ = n.get(u)) == null ? void 0 : _.el, A = y ? b.indexOf(y) : -1;
+      if (A === -1) {
+        ($ = b[0]) == null || $.focus();
+        return;
+      }
+      b[(A + m + b.length) % b.length].focus();
+    }
+    return G(_e, {
+      type: g(() => e.type),
+      collapsible: g(() => e.collapsible),
+      isOpen: l,
+      toggle: o,
+      registerTrigger: s,
+      unregisterTrigger: c,
+      focusRelative: r
+    }), (u, m) => (f(), p("div", ut, [
+      C(u.$slots, "default")
+    ]));
+  }
+}), dt = ["id", "aria-labelledby"], Wa = /* @__PURE__ */ x({
+  __name: "AccordionContent",
+  setup(a) {
+    const e = S($e, null);
+    e || console.warn("[kablui] AccordionContent must be used inside AccordionItem");
+    const t = g(() => !!(e != null && e.isOpen.value)), n = [
+      "px-1 pb-3 text-kablui-md text-kablui-muted-fg"
+    ].join(" ");
+    return (i, l) => {
+      var o, s;
+      return Oe((f(), p("div", {
+        "data-slot": "accordion-content",
+        role: "region",
+        id: (o = v(e)) == null ? void 0 : o.contentId,
+        "aria-labelledby": (s = v(e)) == null ? void 0 : s.triggerId,
+        class: w(v(n))
+      }, [
+        C(i.$slots, "default")
+      ], 10, dt)), [
+        [Pe, t.value]
+      ]);
+    };
+  }
+});
+let Me = 0;
+function P(a) {
+  return Me += 1, `kablui-${a}-${Me}`;
+}
+const ct = ["data-state", "data-disabled"], Ja = /* @__PURE__ */ x({
+  __name: "AccordionItem",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a, t = S(_e, null);
+    t || console.warn("[kablui] AccordionItem must be used inside Accordion");
+    const n = P("accordion-trigger"), i = P("accordion-content"), l = g(() => e.disabled), o = g(() => !!(t != null && t.isOpen(e.value)));
+    function s() {
+      !t || l.value || t.toggle(e.value);
+    }
+    return G($e, {
+      value: e.value,
+      disabled: l,
+      triggerId: n,
+      contentId: i,
+      isOpen: o,
+      toggle: s
+    }), (c, d) => (f(), p("div", {
+      "data-slot": "accordion-item",
+      "data-state": o.value ? "open" : "closed",
+      "data-disabled": a.disabled || void 0,
+      class: "border-b border-kablui-border"
+    }, [
+      C(c.$slots, "default")
+    ], 8, ct));
+  }
+}), ft = { class: "m-0" }, bt = ["id", "disabled", "aria-expanded", "aria-controls"], Qa = /* @__PURE__ */ x({
+  __name: "AccordionTrigger",
+  setup(a) {
+    const e = S(_e, null), t = S($e, null);
+    (!e || !t) && console.warn("[kablui] AccordionTrigger must be used inside AccordionItem");
+    const n = g(() => !!(t != null && t.isOpen.value)), i = g(() => !!(t != null && t.disabled.value));
+    let l = null;
+    function o(r) {
+      l = r instanceof HTMLButtonElement ? r : null, e && t && e.registerTrigger(t.value, l, i.value);
+    }
+    K(i, (r) => {
+      e && t && e.registerTrigger(t.value, l, r);
+    }), q(() => {
+      e && t && e.unregisterTrigger(t.value);
+    });
+    function s() {
+      t == null || t.toggle();
+    }
+    function c(r) {
+      if (!(!e || !t || i.value))
+        switch (r.key) {
+          case "Enter":
+          case " ":
+            r.preventDefault(), t.toggle();
+            break;
+          case "ArrowDown":
+            r.preventDefault(), e.focusRelative(t.value, 1);
+            break;
+          case "ArrowUp":
+            r.preventDefault(), e.focusRelative(t.value, -1);
+            break;
+        }
+    }
+    const d = [
+      "flex w-full items-center justify-between gap-2",
+      "px-1 py-3 text-left text-kablui-md font-kablui-medium text-kablui-fg",
+      "bg-transparent hover:bg-kablui-muted",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" ");
+    return (r, u) => {
+      var m, b;
+      return f(), p("h3", ft, [
+        j("button", {
+          ref: o,
+          type: "button",
+          "data-slot": "accordion-trigger",
+          id: (m = v(t)) == null ? void 0 : m.triggerId,
+          class: w(v(d)),
+          disabled: i.value,
+          "aria-expanded": n.value ? "true" : "false",
+          "aria-controls": (b = v(t)) == null ? void 0 : b.contentId,
+          onClick: s,
+          onKeydown: c
+        }, [
+          C(r.$slots, "default")
+        ], 42, bt)
+      ]);
+    };
+  }
+}), vt = ["role"], mt = { class: "min-w-0 flex-1" }, pt = {
+  key: 0,
+  class: "font-kablui-semibold"
+}, Xa = /* @__PURE__ */ x({
+  __name: "Alert",
+  props: {
+    tone: { default: "neutral" },
+    title: {},
+    dismissible: { type: Boolean, default: !1 }
+  },
+  emits: ["dismiss"],
+  setup(a, { emit: e }) {
+    const t = e, n = [
+      "relative flex w-full gap-3 rounded-kablui-md border px-3 py-2.5",
+      "text-kablui-md"
+    ].join(" "), i = {
+      neutral: "border-kablui-border bg-kablui-muted text-kablui-fg",
+      accent: "border-kablui-accent bg-kablui-accent text-kablui-accent-fg",
+      danger: "border-kablui-danger bg-kablui-danger text-kablui-danger-fg",
+      success: "border-kablui-success bg-kablui-success text-kablui-success-fg",
+      warning: "border-kablui-warning bg-kablui-warning text-kablui-warning-fg"
+    }, l = [
+      "ml-auto shrink-0 -mr-1 -mt-0.5 inline-flex size-6 items-center justify-center",
+      "rounded-kablui-sm text-current opacity-70 hover:opacity-100",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg"
+    ].join(" ");
+    function o() {
+      t("dismiss");
+    }
+    return (s, c) => (f(), p("div", {
+      role: a.tone === "danger" ? "alert" : "status",
+      class: w([v(n), i[a.tone]])
+    }, [
+      j("div", mt, [
+        a.title ? (f(), p("div", pt, H(a.title), 1)) : z("", !0),
+        j("div", {
+          class: w(a.title ? "mt-0.5" : void 0)
+        }, [
+          C(s.$slots, "default")
+        ], 2)
+      ]),
+      a.dismissible ? (f(), p("button", {
+        key: 0,
+        type: "button",
+        class: w(v(l)),
+        "aria-label": "Dismiss",
+        onClick: o
+      }, [...c[0] || (c[0] = [
+        j("span", { "aria-hidden": "true" }, "×", -1)
+      ])], 2)) : z("", !0)
+    ], 10, vt));
+  }
+}), Za = /* @__PURE__ */ x({
+  __name: "Badge",
+  props: {
+    tone: { default: "neutral" },
+    size: { default: "md" }
+  },
+  setup(a) {
+    const e = [
+      "inline-flex items-center font-kablui-medium",
+      "rounded-kablui-full",
+      "whitespace-nowrap"
+    ].join(" "), t = {
+      neutral: "bg-kablui-muted text-kablui-fg",
+      accent: "bg-kablui-accent text-kablui-accent-fg",
+      danger: "bg-kablui-danger text-kablui-danger-fg"
+    }, n = {
+      sm: "text-kablui-sm px-2 py-0.5",
+      md: "text-kablui-md px-2.5 py-1"
+    };
+    return (i, l) => (f(), p("span", {
+      class: w([v(e), t[a.tone], n[a.size]])
+    }, [
+      C(i.$slots, "default")
+    ], 2));
+  }
+}), gt = ["type", "disabled"], ke = /* @__PURE__ */ x({
+  __name: "Button",
+  props: {
+    variant: { default: "solid" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    type: { default: "button" }
+  },
+  emits: ["click"],
+  setup(a, { emit: e }) {
+    const t = a, n = e, i = [
+      "inline-flex items-center justify-center gap-1.5 font-kablui-medium",
+      "rounded-kablui-md",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), l = {
+      solid: "bg-kablui-accent text-kablui-accent-fg hover:opacity-90",
+      outline: "border border-kablui-border-strong bg-transparent text-kablui-fg hover:bg-kablui-muted",
+      ghost: "bg-transparent text-kablui-fg hover:bg-kablui-muted"
+    }, o = {
+      sm: "text-kablui-sm px-2 py-1",
+      md: "text-kablui-md px-3 py-1.5",
+      lg: "text-kablui-lg px-4 py-2"
+    };
+    function s(c) {
+      t.disabled || n("click", c);
+    }
+    return (c, d) => (f(), p("button", {
+      type: a.type,
+      disabled: a.disabled,
+      class: w([v(i), l[a.variant], o[a.size]]),
+      onClick: s
+    }, [
+      C(c.$slots, "default")
+    ], 10, gt));
+  }
+}), en = /* @__PURE__ */ x({
+  __name: "Card",
+  props: {
+    as: { default: "div" },
+    padding: { default: "none" }
+  },
+  setup(a) {
+    const e = [
+      "rounded-kablui-md border border-kablui-border bg-kablui-bg",
+      "text-kablui-fg shadow-kablui-sm"
+    ].join(" "), t = {
+      none: "",
+      sm: "p-3",
+      md: "p-4"
+    };
+    return (n, i) => (f(), V(ae(a.as), {
+      class: w([v(e), t[a.padding]]),
+      "data-slot": "card"
+    }, {
+      default: Y(() => [
+        C(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), kt = "px-4 py-3 text-kablui-md text-kablui-fg", tn = /* @__PURE__ */ x({
+  __name: "CardBody",
+  setup(a) {
+    return (e, t) => (f(), p("div", {
+      class: w(kt),
+      "data-slot": "card-body"
+    }, [
+      C(e.$slots, "default")
+    ]));
+  }
+}), ht = "text-kablui-sm text-kablui-muted-fg", an = /* @__PURE__ */ x({
+  __name: "CardDescription",
+  setup(a) {
+    return (e, t) => (f(), p("p", {
+      class: w(ht),
+      "data-slot": "card-description"
+    }, [
+      C(e.$slots, "default")
+    ]));
+  }
+}), nn = /* @__PURE__ */ x({
+  __name: "CardFooter",
+  setup(a) {
+    const e = [
+      "flex flex-wrap items-center justify-end gap-2",
+      "border-t border-kablui-border px-4 py-3"
+    ].join(" ");
+    return (t, n) => (f(), p("div", {
+      class: w(v(e)),
+      "data-slot": "card-footer"
+    }, [
+      C(t.$slots, "default")
+    ], 2));
+  }
+}), yt = "flex flex-col gap-1 px-4 pt-4 pb-2 text-kablui-fg", sn = /* @__PURE__ */ x({
+  __name: "CardHeader",
+  setup(a) {
+    return (e, t) => (f(), p("div", {
+      class: w(yt),
+      "data-slot": "card-header"
+    }, [
+      C(e.$slots, "default")
+    ]));
+  }
+}), xt = "font-kablui-semibold text-kablui-lg text-kablui-fg", ln = /* @__PURE__ */ x({
+  __name: "CardTitle",
+  props: {
+    as: { default: "h3" }
+  },
+  setup(a) {
+    return (e, t) => (f(), V(ae(a.as), {
+      class: w(xt),
+      "data-slot": "card-title"
+    }, {
+      default: Y(() => [
+        C(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), Ke = Symbol("kablui-field");
+function wt(a = {}) {
+  const e = a.id ?? P("control"), t = P("hint"), n = P("error"), i = R(!1), l = R(!1), o = g(() => !!O(a.invalid)), s = g(() => {
+    const d = [];
+    return i.value && d.push(t), l.value && d.push(n), d.length > 0 ? d.join(" ") : void 0;
+  }), c = {
+    controlId: e,
+    hintId: t,
+    errorId: n,
+    invalid: o,
+    describedBy: s,
+    setHasHint: (d) => {
+      i.value = d;
+    },
+    setHasError: (d) => {
+      l.value = d;
+    }
+  };
+  return G(Ke, c), c;
+}
+function me() {
+  return S(Ke, null);
+}
+function se(a) {
+  const e = me(), t = g(() => O(a.id) || (e == null ? void 0 : e.controlId)), n = g(() => !!(O(a.invalid) || e != null && e.invalid.value)), i = g(() => e == null ? void 0 : e.describedBy.value), l = g(() => n.value ? "true" : void 0);
+  return { id: t, invalid: n, describedBy: i, ariaInvalid: l };
+}
+const _t = ["id", "name", "value", "checked", "disabled", "aria-invalid", "aria-describedby", "aria-checked"], on = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Checkbox",
+  props: /* @__PURE__ */ U({
+    indeterminate: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    name: {},
+    value: { default: "on" },
+    id: {}
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = X(), i = R(null), l = se({
+      id: () => e.id,
+      invalid: () => e.invalid
+    });
+    function o() {
+      i.value && (i.value.indeterminate = e.indeterminate);
+    }
+    ne(o), K(() => e.indeterminate, o);
+    const s = [
+      "size-4 shrink-0 appearance-none rounded-kablui-sm border border-kablui-border bg-kablui-bg",
+      "checked:border-kablui-accent checked:bg-kablui-accent",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), c = g(() => [
+      s,
+      l.invalid.value ? "border-kablui-danger" : ""
+    ]);
+    function d(r) {
+      const u = r.target;
+      t.value = u.checked;
+    }
+    return (r, u) => (f(), p("input", Z({
+      ref_key: "inputRef",
+      ref: i,
+      type: "checkbox",
+      id: v(l).id.value,
+      name: a.name,
+      value: a.value,
+      checked: t.value,
+      disabled: a.disabled,
+      "aria-invalid": v(l).ariaInvalid.value,
+      "aria-describedby": v(l).describedBy.value,
+      "aria-checked": a.indeterminate ? "mixed" : t.value ? "true" : "false",
+      class: c.value
+    }, v(n), { onChange: d }), null, 16, _t));
+  }
+}), rn = /* @__PURE__ */ x({
+  __name: "Cluster",
+  props: {
+    gap: { default: "md" },
+    align: { default: "center" },
+    justify: { default: "start" },
+    as: { default: "div" }
+  },
+  setup(a) {
+    const e = {
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6"
+    }, t = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline"
+    }, n = {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    };
+    return (i, l) => (f(), V(ae(a.as), {
+      class: w([
+        "flex flex-wrap",
+        e[a.gap],
+        t[a.align],
+        n[a.justify]
+      ])
+    }, {
+      default: Y(() => [
+        C(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), un = /* @__PURE__ */ x({
+  __name: "Container",
+  props: {
+    size: { default: "md" },
+    as: { default: "div" }
+  },
+  setup(a) {
+    const e = {
+      sm: "max-w-screen-sm px-4",
+      md: "max-w-screen-md px-4",
+      lg: "max-w-screen-lg px-6"
+    };
+    return (t, n) => (f(), V(ae(a.as), {
+      class: w(["mx-auto w-full", e[a.size]])
+    }, {
+      default: Y(() => [
+        C(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), $t = {
+  dropdown: 1e3,
+  overlay: 1200,
+  modal: 1300,
+  toast: 1400,
+  tooltip: 1500
+};
+let Ct = 0;
+const te = [], Ne = R(0), ye = /* @__PURE__ */ new WeakMap();
+function ze() {
+  Ne.value += 1;
+}
+function pe(a) {
+  const e = ++Ct, t = R(!1), n = $t[a], i = g(() => (Ne.value, !t.value || te.length === 0 ? !1 : te[te.length - 1].id === e));
+  function l() {
+    t.value || (te.push({ id: e, layer: a }), t.value = !0, ze());
+  }
+  function o() {
+    if (!t.value) return;
+    const c = te.findIndex((d) => d.id === e);
+    c !== -1 && te.splice(c, 1), t.value = !1, ze();
+  }
+  const s = Ve();
+  if (s) {
+    const c = ye.get(s) ?? [];
+    c.push(i), ye.set(s, c);
+  }
+  return ie(o), { zIndex: n, isTop: i, register: l, unregister: o };
+}
+function It(a) {
+  if (!a) return null;
+  const e = ye.get(a);
+  return !e || e.length === 0 ? null : e.shift() ?? null;
+}
+let Tt = 0;
+const J = [];
+function Et() {
+  for (let a = J.length - 1; a >= 0; a -= 1) {
+    const e = J[a];
+    if (e.escape) return e;
+  }
+}
+function At() {
+  for (let a = J.length - 1; a >= 0; a -= 1) {
+    const e = J[a];
+    if (e.outside) return e;
+  }
+}
+function Ce(a, e) {
+  const t = ++Tt, n = Ve(), i = It(n);
+  let l = !1;
+  function o() {
+    return e.escape !== !1;
+  }
+  function s() {
+    return e.outside === !0;
+  }
+  function c(m) {
+    if (m && !l) {
+      J.push({
+        id: t,
+        onDismiss: e.onDismiss,
+        escape: o(),
+        outside: s()
+      }), l = !0;
+      return;
+    }
+    if (!m && l) {
+      const b = J.findIndex((y) => y.id === t);
+      b !== -1 && J.splice(b, 1), l = !1;
+      return;
+    }
+    if (m && l) {
+      const b = J.find((y) => y.id === t);
+      b && (b.onDismiss = e.onDismiss, b.escape = o(), b.outside = s());
+    }
+  }
+  function d() {
+    return i ? i.value : !0;
+  }
+  function r(m) {
+    if (m.key !== "Escape" || !o() || !O(e.active) || !d()) return;
+    const b = Et();
+    !b || b.id !== t || (m.preventDefault(), e.onDismiss());
+  }
+  function u(m) {
+    if (!s() || !O(e.active) || !d()) return;
+    const b = At();
+    if (!b || b.id !== t) return;
+    const y = a.value;
+    if (!y) return;
+    const A = m.target;
+    !(A instanceof Node) || y.contains(A) || e.onDismiss();
+  }
+  K(
+    () => O(e.active),
+    (m) => {
+      c(!!m);
+    },
+    { immediate: !0 }
+  ), document.addEventListener("keydown", r), document.addEventListener("pointerdown", u), ie(() => {
+    document.removeEventListener("keydown", r), document.removeEventListener("pointerdown", u), c(!1);
+  });
+}
+const Dt = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function Rt(a) {
+  if (a.hidden || a.closest("[hidden]") || a.getAttribute("aria-hidden") === "true") return !1;
+  let e = a;
+  for (; e; ) {
+    const t = getComputedStyle(e);
+    if (t.display === "none" || t.visibility === "hidden") return !1;
+    e = e.parentElement;
+  }
+  return !0;
+}
+function je(a) {
+  return Array.from(a.querySelectorAll(Dt)).filter(Rt);
+}
+function Bt(a, e) {
+  let t = null, n = !1;
+  const i = (s) => {
+    if (s.key !== "Tab") return;
+    const c = O(a);
+    if (!c) return;
+    const d = je(c);
+    if (d.length === 0) {
+      s.preventDefault();
+      return;
+    }
+    const r = d[0], u = d[d.length - 1], m = document.activeElement, b = !m || !c.contains(m);
+    s.shiftKey ? (b || m === r) && (s.preventDefault(), u.focus()) : (b || m === u) && (s.preventDefault(), r.focus());
+  }, l = () => {
+    const s = O(a);
+    t = document.activeElement instanceof HTMLElement ? document.activeElement : null, n || (document.addEventListener("keydown", i, !0), n = !0), requestAnimationFrame(() => {
+      const d = O(a) ?? s;
+      if (!d) return;
+      const r = je(d);
+      r.length > 0 ? r[0].focus() : typeof d.focus == "function" && d.focus();
+    });
+  }, o = () => {
+    n && (document.removeEventListener("keydown", i, !0), n = !1);
+    const s = t;
+    t = null, s && typeof s.focus == "function" && s.focus();
+  };
+  K(
+    () => O(e.active),
+    (s) => {
+      s ? l() : o();
+    },
+    { immediate: !0 }
+  ), ie(() => {
+    n && o();
+  });
+}
+let ue = 0, xe = "";
+function Mt() {
+  typeof document > "u" || (ue === 0 && (xe = document.body.style.overflow, document.body.style.overflow = "hidden"), ue += 1);
+}
+function Se() {
+  typeof document > "u" || ue !== 0 && (ue -= 1, ue === 0 && (document.body.style.overflow = xe, xe = ""));
+}
+function zt(a) {
+  let e = !1;
+  const t = (n) => {
+    n && !e ? (Mt(), e = !0) : !n && e && (Se(), e = !1);
+  };
+  K(
+    () => O(a),
+    (n) => t(n),
+    { immediate: !0 }
+  ), ie(() => {
+    e && (Se(), e = !1);
+  });
+}
+const jt = ["aria-labelledby", "aria-describedby"], St = { class: "min-w-0 flex-1" }, Lt = ["id"], Ot = ["id"], Pt = "absolute inset-0 bg-kablui-overlay", Vt = "flex items-start gap-3 px-4 pt-4", Ft = "font-kablui-semibold text-kablui-lg text-kablui-fg", Ht = "mt-1 text-kablui-sm text-kablui-muted-fg", Kt = "px-4 py-3 text-kablui-md", Nt = "flex flex-wrap items-center justify-end gap-2 border-t border-kablui-border px-4 py-3", dn = /* @__PURE__ */ x({
+  __name: "Dialog",
+  props: /* @__PURE__ */ U({
+    dismissible: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !1 },
+    to: { default: "body" }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(a) {
+    const e = a, t = N(a, "open"), n = Fe(), i = R(null), l = P("dialog-title"), o = P("dialog-description"), s = g(() => !!n.title), c = g(() => !!n.description), { register: d, unregister: r } = pe("modal");
+    K(
+      t,
+      (D) => {
+        D ? d() : r();
+      },
+      { immediate: !0 }
+    );
+    function u() {
+      t.value = !1;
+    }
+    function m() {
+      e.dismissible && (t.value = !1);
+    }
+    zt(t), Bt(i, { active: t }), Ce(i, {
+      active: () => !!t.value && e.dismissible,
+      onDismiss: m,
+      escape: !0,
+      outside: !0
+    });
+    const b = [
+      "fixed inset-0 z-kablui-modal",
+      "flex items-center justify-center p-4"
+    ].join(" "), y = [
+      "relative flex w-full max-w-md flex-col",
+      "rounded-kablui-md border border-kablui-border bg-kablui-bg text-kablui-fg",
+      "shadow-kablui-lg",
+      "outline-none"
+    ].join(" "), A = [
+      "ml-auto shrink-0 -mr-1 -mt-0.5 inline-flex size-7 items-center justify-center",
+      "rounded-kablui-sm text-kablui-muted-fg hover:bg-kablui-muted hover:text-kablui-fg",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg"
+    ].join(" ");
+    return (D, _) => (f(), V(de, { to: a.to }, [
+      t.value ? (f(), p("div", {
+        key: 0,
+        class: w(v(b)),
+        "data-kablui-dialog": ""
+      }, [
+        j("div", {
+          class: w(Pt),
+          "aria-hidden": "true",
+          "data-kablui-dialog-backdrop": ""
+        }),
+        j("div", {
+          ref_key: "panelRef",
+          ref: i,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": s.value ? v(l) : void 0,
+          "aria-describedby": c.value ? v(o) : void 0,
+          class: w(v(y)),
+          tabindex: "-1",
+          "data-kablui-dialog-panel": ""
+        }, [
+          s.value || c.value || a.showClose ? (f(), p("div", {
+            key: 0,
+            class: w(Vt)
+          }, [
+            j("div", St, [
+              s.value ? (f(), p("h2", {
+                key: 0,
+                id: v(l),
+                class: w(Ft)
+              }, [
+                C(D.$slots, "title")
+              ], 8, Lt)) : z("", !0),
+              c.value ? (f(), p("p", {
+                key: 1,
+                id: v(o),
+                class: w([Ht, s.value ? void 0 : "mt-0"])
+              }, [
+                C(D.$slots, "description")
+              ], 10, Ot)) : z("", !0)
+            ]),
+            a.showClose ? (f(), p("button", {
+              key: 0,
+              type: "button",
+              class: w(v(A)),
+              "aria-label": "Close",
+              onClick: u
+            }, [..._[0] || (_[0] = [
+              j("span", { "aria-hidden": "true" }, "×", -1)
+            ])], 2)) : z("", !0)
+          ])) : z("", !0),
+          D.$slots.default ? (f(), p("div", {
+            key: 1,
+            class: w(Kt)
+          }, [
+            C(D.$slots, "default")
+          ])) : z("", !0),
+          D.$slots.footer ? (f(), p("div", {
+            key: 2,
+            class: w(Nt)
+          }, [
+            C(D.$slots, "footer")
+          ])) : z("", !0)
+        ], 10, jt)
+      ], 2)) : z("", !0)
+    ], 8, ["to"]));
+  }
+}), Ut = {
+  key: 0,
+  class: "text-kablui-muted-fg"
+}, qt = {
+  key: 1,
+  class: "text-kablui-lg font-kablui-semibold text-kablui-fg"
+}, Yt = {
+  key: 2,
+  class: "text-kablui-md max-w-sm"
+}, Gt = {
+  key: 3,
+  class: "mt-1"
+}, cn = /* @__PURE__ */ x({
+  __name: "Empty",
+  props: {
+    title: {}
+  },
+  setup(a) {
+    const e = [
+      "flex w-full flex-col items-center justify-center gap-3",
+      "px-4 py-8 text-center",
+      "text-kablui-muted-fg"
+    ].join(" ");
+    return (t, n) => (f(), p("div", {
+      class: w(v(e))
+    }, [
+      t.$slots.icon ? (f(), p("div", Ut, [
+        C(t.$slots, "icon")
+      ])) : z("", !0),
+      a.title ? (f(), p("div", qt, H(a.title), 1)) : z("", !0),
+      t.$slots.default ? (f(), p("div", Yt, [
+        C(t.$slots, "default")
+      ])) : z("", !0),
+      t.$slots.action ? (f(), p("div", Gt, [
+        C(t.$slots, "action")
+      ])) : z("", !0)
+    ], 2));
+  }
+}), Wt = {
+  class: "flex flex-col gap-1.5",
+  "data-slot": "field"
+}, fn = /* @__PURE__ */ x({
+  __name: "Field",
+  props: {
+    invalid: { type: Boolean, default: !1 },
+    id: {}
+  },
+  setup(a) {
+    const e = a;
+    return wt({
+      invalid: it(e, "invalid"),
+      id: e.id
+    }), (t, n) => (f(), p("div", Wt, [
+      C(t.$slots, "default")
+    ]));
+  }
+}), Jt = ["id"], bn = /* @__PURE__ */ x({
+  __name: "FieldError",
+  setup(a) {
+    const e = me(), t = Fe(), n = g(() => {
+      var o;
+      const l = (o = t.default) == null ? void 0 : o.call(t, {});
+      return !l || l.length === 0 ? !1 : l.some((s) => typeof s.children == "string" ? s.children.trim().length > 0 : s.children != null);
+    }), i = g(() => n.value || !!(e != null && e.invalid.value));
+    return st(() => {
+      e == null || e.setHasError(i.value && n.value);
+    }), q(() => {
+      e == null || e.setHasError(!1);
+    }), (l, o) => {
+      var s;
+      return i.value && n.value ? (f(), p("p", {
+        key: 0,
+        id: (s = v(e)) == null ? void 0 : s.errorId,
+        role: "alert",
+        class: "text-kablui-sm text-kablui-danger",
+        "data-slot": "field-error"
+      }, [
+        C(l.$slots, "default")
+      ], 8, Jt)) : z("", !0);
+    };
+  }
+}), Qt = ["id"], vn = /* @__PURE__ */ x({
+  __name: "FieldHint",
+  setup(a) {
+    const e = me();
+    return ne(() => {
+      e == null || e.setHasHint(!0);
+    }), q(() => {
+      e == null || e.setHasHint(!1);
+    }), (t, n) => {
+      var i;
+      return f(), p("p", {
+        id: (i = v(e)) == null ? void 0 : i.hintId,
+        class: "text-kablui-sm text-kablui-muted-fg",
+        "data-slot": "field-hint"
+      }, [
+        C(t.$slots, "default")
+      ], 8, Qt);
+    };
+  }
+}), Xt = ["role", "aria-hidden", "aria-label", "title"], mn = /* @__PURE__ */ x({
+  __name: "Icon",
+  props: {
+    size: { default: "md" },
+    label: {},
+    title: {}
+  },
+  setup(a) {
+    const e = a, t = [
+      "inline-flex shrink-0 items-center justify-center",
+      "text-current",
+      "[&>svg]:size-full"
+    ].join(" "), n = {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5"
+    }, i = g(() => !e.label);
+    return (l, o) => (f(), p("span", {
+      class: w([v(t), n[a.size]]),
+      role: i.value ? void 0 : "img",
+      "aria-hidden": i.value ? !0 : void 0,
+      "aria-label": a.label || void 0,
+      title: a.title
+    }, [
+      C(l.$slots, "default")
+    ], 10, Xt));
+  }
+}), Zt = ["id", "type", "name", "disabled", "placeholder", "value", "aria-invalid", "aria-describedby"], pn = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Input",
+  props: /* @__PURE__ */ U({
+    type: { default: "text" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    placeholder: {},
+    name: {},
+    id: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = X(), i = se({
+      id: () => e.id,
+      invalid: () => e.invalid
+    }), l = [
+      "w-full border border-kablui-border bg-kablui-bg text-kablui-fg",
+      "rounded-kablui-md font-kablui-normal",
+      "placeholder:text-kablui-muted-fg",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), o = {
+      sm: "text-kablui-sm px-2 py-1",
+      md: "text-kablui-md px-3 py-1.5",
+      lg: "text-kablui-lg px-4 py-2"
+    }, s = g(() => [
+      l,
+      o[e.size],
+      i.invalid.value ? "border-kablui-danger" : ""
+    ]);
+    return (c, d) => (f(), p("input", Z({
+      id: v(i).id.value,
+      type: a.type,
+      name: a.name,
+      disabled: a.disabled,
+      placeholder: a.placeholder,
+      value: t.value,
+      "aria-invalid": v(i).ariaInvalid.value,
+      "aria-describedby": v(i).describedBy.value,
+      class: s.value
+    }, v(n), {
+      onInput: d[0] || (d[0] = (r) => t.value = r.target.value)
+    }), null, 16, Zt));
+  }
+}), ea = ["for"], ta = {
+  key: 0,
+  class: "text-kablui-danger",
+  "aria-hidden": "true"
+}, gn = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Label",
+  props: {
+    required: { type: Boolean, default: !1 },
+    for: {}
+  },
+  setup(a) {
+    const e = a, t = X(), n = me(), i = g(() => e.for || (n == null ? void 0 : n.controlId));
+    return (l, o) => (f(), p("label", Z({
+      for: i.value,
+      class: "inline-flex items-center gap-1 text-kablui-sm font-kablui-medium text-kablui-fg"
+    }, v(t)), [
+      C(l.$slots, "default"),
+      a.required ? (f(), p("span", ta, "*")) : z("", !0)
+    ], 16, ea));
+  }
+}), aa = ["href", "target", "rel", "aria-disabled", "tabindex"], kn = /* @__PURE__ */ x({
+  __name: "Link",
+  props: {
+    href: {},
+    external: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a, t = [
+      "text-kablui-accent underline underline-offset-2",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:text-kablui-muted-fg aria-disabled:no-underline"
+    ].join(" ");
+    function n(l) {
+      e.disabled && l.preventDefault();
+    }
+    function i(l) {
+      e.disabled && (l.key === "Enter" || l.key === " ") && l.preventDefault();
+    }
+    return (l, o) => (f(), p("a", {
+      href: a.href,
+      target: a.external ? "_blank" : void 0,
+      rel: a.external ? "noopener noreferrer" : void 0,
+      "aria-disabled": a.disabled || void 0,
+      tabindex: a.disabled ? -1 : void 0,
+      class: w(v(t)),
+      onClick: n,
+      onKeydown: i
+    }, [
+      C(l.$slots, "default")
+    ], 42, aa));
+  }
+}), fe = Symbol("kablui-menu"), hn = /* @__PURE__ */ x({
+  __name: "Menu",
+  props: /* @__PURE__ */ U({
+    placement: { default: "bottom-start" }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(a) {
+    const e = a, t = N(a, "open"), n = R(null), i = R(null), l = R(null), o = P("menu"), s = R(null), { register: c, unregister: d } = pe("dropdown");
+    function r() {
+      const $ = l.value;
+      return $ ? [
+        ...$.querySelectorAll(
+          '[data-slot="menu-item"]:not([disabled]):not([aria-disabled="true"])'
+        )
+      ] : [];
+    }
+    function u() {
+      var $;
+      ($ = r()[0]) == null || $.focus();
+    }
+    function m($, h) {
+      var F;
+      const I = r();
+      if (I.length === 0) return;
+      const E = $ ? I.indexOf($) : -1, M = E === -1 ? h > 0 ? 0 : I.length - 1 : (E + h + I.length) % I.length;
+      (F = I[M]) == null || F.focus();
+    }
+    function b($) {
+      var I;
+      const h = r();
+      h.length !== 0 && ((I = $ === "start" ? h[0] : h[h.length - 1]) == null || I.focus());
+    }
+    function y($, h) {
+      t.value = $;
+    }
+    function A($) {
+      y(!t.value);
+    }
+    function D() {
+      t.value = !1;
+    }
+    function _() {
+      t.value = !1;
+    }
+    return Ce(n, {
+      active: t,
+      onDismiss: _,
+      escape: !0,
+      outside: !0
+    }), K(
+      t,
+      ($, h) => {
+        if ($) {
+          c(), s.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, Q(() => {
+            u();
+          });
+          return;
+        }
+        d(), h && Q(() => {
+          const I = s.value ?? i.value;
+          I == null || I.focus(), s.value = null;
+        });
+      },
+      { immediate: !0 }
+    ), G(fe, {
+      open: t,
+      contentId: o,
+      placement: g(() => e.placement),
+      triggerRef: i,
+      contentRef: l,
+      setOpen: y,
+      toggle: A,
+      getEnabledItems: r,
+      focusFirstItem: u,
+      focusItemRelative: m,
+      focusItemAtEdge: b,
+      closeOnSelect: D
+    }), ($, h) => (f(), p("div", {
+      ref_key: "rootRef",
+      ref: n,
+      class: "relative inline-flex",
+      "data-slot": "menu"
+    }, [
+      C($.$slots, "default")
+    ], 512));
+  }
+}), na = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function ia(a) {
+  const [e, t] = a.split("-");
+  return { side: e, align: t ?? "center" };
+}
+function ve(a, e, t, n) {
+  switch (n) {
+    case "start":
+      return a;
+    case "end":
+      return a + e - t;
+    case "center":
+    default:
+      return a + (e - t) / 2;
+  }
+}
+function Le(a, e, t, n) {
+  switch (t) {
+    case "top":
+      return {
+        x: ve(a.left, a.width, e.width, n),
+        y: a.top - e.height
+      };
+    case "bottom":
+      return {
+        x: ve(a.left, a.width, e.width, n),
+        y: a.bottom
+      };
+    case "left":
+      return {
+        x: a.left - e.width,
+        y: ve(a.top, a.height, e.height, n)
+      };
+    case "right":
+      return {
+        x: a.right,
+        y: ve(a.top, a.height, e.height, n)
+      };
+  }
+}
+function sa(a, e, t, n, i, l) {
+  switch (n) {
+    case "top":
+      return e < 0;
+    case "bottom":
+      return e + t.height > l;
+    case "left":
+      return a < 0;
+    case "right":
+      return a + t.width > i;
+  }
+}
+function la(a, e, t) {
+  const n = a.getBoundingClientRect(), i = e.getBoundingClientRect(), { side: l, align: o } = ia(t);
+  let { x: s, y: c } = Le(n, i, l, o);
+  if (sa(s, c, i, l, window.innerWidth, window.innerHeight)) {
+    const d = na[l];
+    ({ x: s, y: c } = Le(n, i, d, o));
+  }
+  return {
+    position: "fixed",
+    top: `${c}px`,
+    left: `${s}px`
+  };
+}
+function Ie(a, e, t) {
+  const n = R({}), i = () => {
+    if (!O(t.open)) {
+      n.value = {};
+      return;
+    }
+    const d = v(a), r = v(e);
+    if (!d || !r) {
+      n.value = {};
+      return;
+    }
+    n.value = la(d, r, O(t.placement));
+  }, l = () => {
+    i();
+  };
+  let o = !1;
+  const s = () => {
+    o || typeof window > "u" || (o = !0, window.addEventListener("scroll", l, !0), window.addEventListener("resize", l));
+  }, c = () => {
+    !o || typeof window > "u" || (o = !1, window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
+  };
+  return K(
+    [() => O(t.open), () => O(t.placement), a, e],
+    ([d]) => {
+      d ? (s(), i()) : (c(), n.value = {});
+    },
+    { immediate: !0, flush: "post" }
+  ), ie(() => {
+    c();
+  }), { style: n };
+}
+const oa = ["id", "data-placement"], yn = /* @__PURE__ */ x({
+  __name: "MenuContent",
+  setup(a) {
+    const e = S(fe, null);
+    e || console.warn("[kablui] MenuContent must be used inside Menu");
+    const t = R(null), n = R(null);
+    function i(r) {
+      e && (e.contentRef.value = r instanceof HTMLElement ? r : null);
+    }
+    q(() => {
+      e && (e.contentRef.value = null);
+    });
+    const l = g(() => !!(e != null && e.open.value)), o = g(() => (e == null ? void 0 : e.placement.value) ?? "bottom-start"), { style: s } = Ie(
+      (e == null ? void 0 : e.triggerRef) ?? t,
+      (e == null ? void 0 : e.contentRef) ?? n,
+      {
+        open: l,
+        placement: o
+      }
+    );
+    function c(r) {
+      if (!e) return;
+      const u = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      switch (r.key) {
+        case "ArrowDown":
+          r.preventDefault(), e.focusItemRelative(u, 1);
+          break;
+        case "ArrowUp":
+          r.preventDefault(), e.focusItemRelative(u, -1);
+          break;
+        case "Home":
+          r.preventDefault(), e.focusItemAtEdge("start");
+          break;
+        case "End":
+          r.preventDefault(), e.focusItemAtEdge("end");
+          break;
+      }
+    }
+    const d = [
+      "z-kablui-dropdown min-w-40 rounded-kablui-md border border-kablui-border bg-kablui-bg",
+      "py-1 text-kablui-md text-kablui-fg shadow-kablui-md",
+      "focus:outline-none"
+    ].join(" ");
+    return (r, u) => (f(), V(de, { to: "body" }, [
+      l.value && v(e) ? (f(), p("div", {
+        key: 0,
+        id: v(e).contentId,
+        ref: i,
+        role: "menu",
+        tabindex: "-1",
+        "data-slot": "menu-content",
+        "data-placement": o.value,
+        class: w(v(d)),
+        style: ce(v(s)),
+        onPointerdown: u[0] || (u[0] = He(() => {
+        }, ["stop"])),
+        onKeydown: c
+      }, [
+        C(r.$slots, "default")
+      ], 46, oa)) : z("", !0)
+    ]));
+  }
+}), ra = ["disabled", "aria-disabled"], xn = /* @__PURE__ */ x({
+  __name: "MenuItem",
+  props: {
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select"],
+  setup(a, { emit: e }) {
+    const t = a, n = e, i = S(fe, null);
+    i || console.warn("[kablui] MenuItem must be used inside Menu");
+    function l() {
+      t.disabled || (n("select"), i == null || i.closeOnSelect());
+    }
+    function o() {
+      l();
+    }
+    function s(d) {
+      (d.key === "Enter" || d.key === " ") && (d.preventDefault(), l());
+    }
+    const c = [
+      "flex w-full cursor-pointer items-center px-3 py-1.5 text-left",
+      "text-kablui-md text-kablui-fg rounded-kablui-sm",
+      "hover:bg-kablui-muted",
+      "focus:outline-none focus:bg-kablui-muted",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:pointer-events-none disabled:opacity-50"
+    ].join(" ");
+    return (d, r) => (f(), p("button", {
+      type: "button",
+      role: "menuitem",
+      "data-slot": "menu-item",
+      tabindex: "-1",
+      disabled: a.disabled || void 0,
+      "aria-disabled": a.disabled ? "true" : void 0,
+      class: w(v(c)),
+      onClick: o,
+      onKeydown: s
+    }, [
+      C(d.$slots, "default")
+    ], 42, ra));
+  }
+}), ua = "my-1 h-px w-full shrink-0 border-0 border-t border-solid border-kablui-border", wn = /* @__PURE__ */ x({
+  __name: "MenuSeparator",
+  setup(a) {
+    return S(fe, null) || console.warn("[kablui] MenuSeparator must be used inside Menu"), (t, n) => (f(), p("div", {
+      role: "separator",
+      "data-slot": "menu-separator",
+      class: w(ua)
+    }));
+  }
+}), da = ["aria-expanded", "aria-controls"], _n = /* @__PURE__ */ x({
+  __name: "MenuTrigger",
+  setup(a) {
+    const e = S(fe, null);
+    e || console.warn("[kablui] MenuTrigger must be used inside Menu");
+    function t(s) {
+      e && (e.triggerRef.value = s instanceof HTMLElement ? s : null);
+    }
+    q(() => {
+      e && (e.triggerRef.value = null);
+    });
+    const n = g(() => !!(e != null && e.open.value));
+    function i() {
+      e == null || e.toggle("pointer");
+    }
+    function l(s) {
+      if (e)
+        switch (s.key) {
+          case "ArrowDown":
+          case "ArrowUp":
+          case "Enter":
+          case " ":
+            s.preventDefault(), e.open.value ? s.key === "Enter" || s.key === " " ? e.setOpen(!1) : s.key === "ArrowDown" ? e.focusFirstItem() : s.key === "ArrowUp" && e.focusItemAtEdge("end") : e.setOpen(!0, "keyboard");
+            break;
+          case "Escape":
+            e.open.value && (s.preventDefault(), e.setOpen(!1));
+            break;
+        }
+    }
+    const o = [
+      "inline-flex items-center justify-center",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg"
+    ].join(" ");
+    return (s, c) => {
+      var d;
+      return f(), p("button", {
+        ref: t,
+        type: "button",
+        "data-slot": "menu-trigger",
+        class: w(v(o)),
+        "aria-haspopup": "menu",
+        "aria-expanded": n.value ? "true" : "false",
+        "aria-controls": (d = v(e)) == null ? void 0 : d.contentId,
+        onClick: i,
+        onKeydown: l
+      }, [
+        C(s.$slots, "default")
+      ], 42, da);
+    };
+  }
+}), ca = ["aria-label", "aria-disabled"], fa = {
+  key: 0,
+  class: "inline-flex min-w-8 items-center justify-center px-1 text-kablui-muted-fg",
+  "aria-hidden": "true"
+}, $n = /* @__PURE__ */ x({
+  __name: "Pagination",
+  props: /* @__PURE__ */ U({
+    pageCount: {},
+    siblingCount: { default: 1 },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: "Pagination" }
+  }, {
+    page: { default: 1 },
+    pageModifiers: {}
+  }),
+  emits: ["update:page"],
+  setup(a) {
+    const e = a, t = N(a, "page");
+    function n(r, u) {
+      const m = Math.max(0, u - r + 1);
+      return Array.from({ length: m }, (b, y) => r + y);
+    }
+    const i = g(() => {
+      const r = Math.max(0, Math.floor(e.pageCount));
+      if (r === 0) return [];
+      const u = Math.max(0, Math.floor(e.siblingCount)), m = Math.min(Math.max(1, t.value), r);
+      if (u * 2 + 5 >= r)
+        return n(1, r);
+      const y = Math.max(m - u, 1), A = Math.min(m + u, r), D = y > 2, _ = A < r - 1;
+      if (!D && _) {
+        const $ = 3 + 2 * u;
+        return [...n(1, $), "ellipsis", r];
+      }
+      if (D && !_) {
+        const $ = 3 + 2 * u;
+        return [1, "ellipsis", ...n(r - $ + 1, r)];
+      }
+      return [
+        1,
+        "ellipsis",
+        ...n(y, A),
+        "ellipsis",
+        r
+      ];
+    }), l = g(() => t.value <= 1), o = g(() => t.value >= e.pageCount);
+    function s(r) {
+      if (e.disabled) return;
+      const u = Math.max(0, Math.floor(e.pageCount));
+      r < 1 || r > u || r !== t.value && (t.value = r);
+    }
+    function c() {
+      s(t.value - 1);
+    }
+    function d() {
+      s(t.value + 1);
+    }
+    return (r, u) => (f(), p("nav", {
+      "aria-label": a.label,
+      "aria-disabled": a.disabled || void 0,
+      class: "inline-flex items-center gap-1 text-kablui-fg"
+    }, [
+      he(ke, {
+        variant: "outline",
+        size: "sm",
+        disabled: a.disabled || l.value,
+        "aria-label": "Previous page",
+        onClick: c
+      }, {
+        default: Y(() => [...u[0] || (u[0] = [
+          re(" Previous ", -1)
+        ])]),
+        _: 1
+      }, 8, ["disabled"]),
+      (f(!0), p(ee, null, we(i.value, (m, b) => (f(), p(ee, {
+        key: `${m}-${b}`
+      }, [
+        m === "ellipsis" ? (f(), p("span", fa, " … ")) : (f(), V(ke, {
+          key: 1,
+          variant: m === t.value ? "solid" : "outline",
+          size: "sm",
+          disabled: a.disabled,
+          "aria-label": `Page ${m}`,
+          "aria-current": m === t.value ? "page" : void 0,
+          onClick: (y) => s(m)
+        }, {
+          default: Y(() => [
+            re(H(m), 1)
+          ]),
+          _: 2
+        }, 1032, ["variant", "disabled", "aria-label", "aria-current", "onClick"]))
+      ], 64))), 128)),
+      he(ke, {
+        variant: "outline",
+        size: "sm",
+        disabled: a.disabled || o.value,
+        "aria-label": "Next page",
+        onClick: d
+      }, {
+        default: Y(() => [...u[1] || (u[1] = [
+          re(" Next ", -1)
+        ])]),
+        _: 1
+      }, 8, ["disabled"])
+    ], 8, ca));
+  }
+}), Te = Symbol("kablui-popover"), Cn = /* @__PURE__ */ x({
+  __name: "Popover",
+  props: /* @__PURE__ */ U({
+    placement: { default: "bottom-start" }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(a) {
+    const e = a, t = N(a, "open"), n = R(null), i = R(null), l = R(null), o = P("popover"), s = R(!1), c = R(null), { register: d, unregister: r } = pe("dropdown");
+    function u(y, A) {
+      y && (s.value = A === "keyboard"), t.value = y;
+    }
+    function m(y) {
+      u(!t.value, y);
+    }
+    function b() {
+      t.value = !1;
+    }
+    return Ce(n, {
+      active: t,
+      onDismiss: b,
+      escape: !0,
+      outside: !0
+    }), K(
+      t,
+      (y, A) => {
+        if (y) {
+          d(), c.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, Q(() => {
+            var D;
+            s.value && ((D = l.value) == null || D.focus());
+          });
+          return;
+        }
+        r(), A && Q(() => {
+          const D = c.value ?? i.value;
+          D == null || D.focus(), s.value = !1, c.value = null;
+        });
+      },
+      { immediate: !0 }
+    ), G(Te, {
+      open: t,
+      contentId: o,
+      placement: g(() => e.placement),
+      triggerRef: i,
+      contentRef: l,
+      setOpen: u,
+      toggle: m
+    }), (y, A) => (f(), p("div", {
+      ref_key: "rootRef",
+      ref: n,
+      class: "relative inline-flex",
+      "data-slot": "popover"
+    }, [
+      C(y.$slots, "default")
+    ], 512));
+  }
+}), ba = ["id", "data-placement"], In = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "PopoverContent",
+  setup(a) {
+    const e = X(), t = S(Te, null);
+    t || console.warn("[kablui] PopoverContent must be used inside Popover");
+    const n = R(null), i = R(null);
+    function l(r) {
+      t && (t.contentRef.value = r instanceof HTMLElement ? r : null);
+    }
+    q(() => {
+      t && (t.contentRef.value = null);
+    });
+    const o = g(() => !!(t != null && t.open.value)), s = g(() => (t == null ? void 0 : t.placement.value) ?? "bottom-start"), { style: c } = Ie(
+      (t == null ? void 0 : t.triggerRef) ?? n,
+      (t == null ? void 0 : t.contentRef) ?? i,
+      {
+        open: o,
+        placement: s
+      }
+    ), d = [
+      "z-kablui-dropdown rounded-kablui-md border border-kablui-border bg-kablui-bg",
+      "p-3 text-kablui-md text-kablui-fg shadow-kablui-md",
+      "focus:outline-none"
+    ].join(" ");
+    return (r, u) => (f(), V(de, { to: "body" }, [
+      o.value && v(t) ? (f(), p("div", Z({
+        key: 0,
+        id: v(t).contentId,
+        ref: l,
+        role: "dialog",
+        tabindex: "-1",
+        "data-slot": "popover-content",
+        "data-placement": s.value,
+        class: v(d),
+        style: v(c)
+      }, v(e), {
+        onPointerdown: u[0] || (u[0] = He(() => {
+        }, ["stop"]))
+      }), [
+        C(r.$slots, "default")
+      ], 16, ba)) : z("", !0)
+    ]));
+  }
+}), va = ["aria-expanded", "aria-controls"], Tn = /* @__PURE__ */ x({
+  __name: "PopoverTrigger",
+  setup(a) {
+    const e = S(Te, null);
+    e || console.warn("[kablui] PopoverTrigger must be used inside Popover");
+    function t(s) {
+      e && (e.triggerRef.value = s instanceof HTMLElement ? s : null);
+    }
+    q(() => {
+      e && (e.triggerRef.value = null);
+    });
+    const n = g(() => !!(e != null && e.open.value));
+    function i() {
+      e == null || e.toggle("pointer");
+    }
+    function l(s) {
+      if (e)
+        switch (s.key) {
+          case "ArrowDown":
+          case "Enter":
+          case " ":
+            s.preventDefault(), e.open.value ? (s.key === "Enter" || s.key === " ") && e.setOpen(!1) : e.setOpen(!0, "keyboard");
+            break;
+          case "Escape":
+            e.open.value && (s.preventDefault(), e.setOpen(!1));
+            break;
+        }
+    }
+    const o = [
+      "inline-flex items-center justify-center",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg"
+    ].join(" ");
+    return (s, c) => {
+      var d;
+      return f(), p("button", {
+        ref: t,
+        type: "button",
+        "data-slot": "popover-trigger",
+        class: w(v(o)),
+        "aria-haspopup": "dialog",
+        "aria-expanded": n.value ? "true" : "false",
+        "aria-controls": (d = v(e)) == null ? void 0 : d.contentId,
+        onClick: i,
+        onKeydown: l
+      }, [
+        C(s.$slots, "default")
+      ], 42, va);
+    };
+  }
+}), ma = { class: "flex w-full flex-col gap-1" }, pa = {
+  key: 0,
+  class: "text-kablui-sm text-kablui-muted-fg"
+}, ga = ["aria-valuemax", "aria-valuenow", "aria-label", "aria-busy"], En = /* @__PURE__ */ x({
+  __name: "Progress",
+  props: {
+    value: {},
+    max: { default: 100 },
+    indeterminate: { type: Boolean, default: !1 },
+    label: {}
+  },
+  setup(a) {
+    const e = a, t = g(
+      () => e.indeterminate || e.value === void 0
+    ), n = g(() => {
+      if (e.value === void 0) return;
+      const c = e.max > 0 ? e.max : 100;
+      return Math.min(Math.max(e.value, 0), c);
+    }), i = g(() => {
+      if (n.value === void 0) return 0;
+      const c = e.max > 0 ? e.max : 100;
+      return n.value / c * 100;
+    }), l = [
+      "relative h-2 w-full overflow-hidden rounded-kablui-full",
+      "bg-kablui-muted"
+    ].join(" "), o = [
+      "h-full rounded-kablui-full bg-kablui-accent",
+      "transition-[width] duration-200 ease-out"
+    ].join(" "), s = [
+      "absolute inset-y-0 w-1/3 rounded-kablui-full bg-kablui-accent",
+      "animate-pulse"
+    ].join(" ");
+    return (c, d) => (f(), p("div", ma, [
+      a.label ? (f(), p("div", pa, H(a.label), 1)) : z("", !0),
+      j("div", {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": a.max,
+        "aria-valuenow": t.value ? void 0 : n.value,
+        "aria-label": a.label || void 0,
+        "aria-busy": t.value ? !0 : void 0,
+        class: w(v(l))
+      }, [
+        t.value ? (f(), p("div", {
+          key: 0,
+          class: w(v(s))
+        }, null, 2)) : (f(), p("div", {
+          key: 1,
+          class: w(v(o)),
+          style: ce({ width: `${i.value}%` })
+        }, null, 6))
+      ], 10, ga)
+    ]));
+  }
+}), Ue = Symbol("kablui-radio-group"), ka = ["id", "name", "value", "checked", "disabled", "aria-invalid"], An = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Radio",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: !1 },
+    id: {}
+  },
+  setup(a) {
+    const e = a, t = X(), n = S(Ue, null), i = R(null);
+    n || console.warn("[kablui] Radio must be used inside RadioGroup");
+    const l = g(() => e.disabled || !!(n != null && n.disabled.value)), o = g(() => (n == null ? void 0 : n.model.value) === e.value), s = g(() => !!(n != null && n.invalid.value));
+    ne(() => {
+      i.value && (n == null || n.register(i.value));
+    }), q(() => {
+      i.value && (n == null || n.unregister(i.value));
+    });
+    const c = [
+      "size-4 shrink-0 appearance-none rounded-full border border-kablui-border bg-kablui-bg",
+      "checked:border-kablui-accent checked:bg-kablui-accent",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), d = g(() => [
+      c,
+      s.value ? "border-kablui-danger" : ""
+    ]);
+    function r() {
+      !n || l.value || (n.model.value = e.value);
+    }
+    function u(m) {
+      !n || l.value || !i.value || (m.key === "ArrowDown" || m.key === "ArrowRight" ? (m.preventDefault(), n.focusRelative(i.value, 1)) : (m.key === "ArrowUp" || m.key === "ArrowLeft") && (m.preventDefault(), n.focusRelative(i.value, -1)));
+    }
+    return (m, b) => {
+      var y;
+      return f(), p("input", Z({
+        ref_key: "inputRef",
+        ref: i,
+        type: "radio",
+        id: a.id,
+        name: (y = v(n)) == null ? void 0 : y.name.value,
+        value: a.value,
+        checked: o.value,
+        disabled: l.value,
+        "aria-invalid": s.value ? "true" : void 0,
+        class: d.value
+      }, v(t), {
+        onChange: r,
+        onKeydown: u
+      }), null, 16, ka);
+    };
+  }
+}), ha = ["id", "aria-invalid", "aria-describedby", "aria-orientation", "aria-disabled"], Dn = /* @__PURE__ */ x({
+  __name: "RadioGroup",
+  props: /* @__PURE__ */ U({
+    name: {},
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    orientation: { default: "vertical" },
+    id: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    let e = 0;
+    const t = a, n = N(a, "modelValue"), i = se({
+      id: () => t.id,
+      invalid: () => t.invalid
+    }), l = `kablui-radio-${++e}`, o = g(() => t.name ?? l), s = /* @__PURE__ */ new Set();
+    function c(b) {
+      s.add(b);
+    }
+    function d(b) {
+      s.delete(b);
+    }
+    function r() {
+      return [...s].filter((b) => !b.disabled);
+    }
+    function u(b, y) {
+      const A = r(), D = A.indexOf(b);
+      if (D === -1 || A.length === 0) return;
+      const _ = A[(D + y + A.length) % A.length];
+      _.focus(), n.value = _.value;
+    }
+    G(Ue, {
+      name: o,
+      model: n,
+      disabled: g(() => t.disabled),
+      invalid: g(() => i.invalid.value),
+      register: c,
+      unregister: d,
+      focusRelative: u
+    });
+    const m = {
+      vertical: "flex-col gap-2",
+      horizontal: "flex-row flex-wrap gap-3"
+    };
+    return (b, y) => (f(), p("div", {
+      role: "radiogroup",
+      id: v(i).id.value,
+      "aria-invalid": v(i).ariaInvalid.value,
+      "aria-describedby": v(i).describedBy.value,
+      "aria-orientation": a.orientation,
+      "aria-disabled": a.disabled || void 0,
+      class: w(["flex", m[a.orientation]]),
+      "data-slot": "radio-group"
+    }, [
+      C(b.$slots, "default")
+    ], 10, ha));
+  }
+}), qe = Symbol("kablui-select"), ya = ["id", "disabled", "aria-expanded", "aria-invalid", "aria-describedby"], xa = { class: "truncate" }, wa = ["aria-labelledby", "aria-label", "aria-activedescendant"], _a = ["id", "aria-selected", "aria-disabled", "data-value", "onClick", "onMouseenter"], $a = ["name", "value", "disabled"], Rn = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Select",
+  props: /* @__PURE__ */ U({
+    options: {},
+    placeholder: { default: "Select…" },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    name: {},
+    id: {},
+    size: { default: "md" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = X(), i = se({
+      id: () => e.id,
+      invalid: () => e.invalid
+    }), l = R(!1), o = R(), s = R(null), c = R(null), d = R(null), r = `kablui-listbox-${Math.random().toString(36).slice(2, 9)}`, u = R([]);
+    let m = "", b = null;
+    const y = g(
+      () => (e.options ?? []).map((k) => ({
+        value: k.value,
+        label: k.label,
+        disabled: k.disabled,
+        id: `${r}-option-${k.value}`
+      }))
+    ), A = g(() => y.value.length > 0 ? y.value : u.value), D = g(() => A.value.filter((k) => !k.disabled)), _ = g(
+      () => A.value.find((k) => k.value === t.value)
+    ), $ = g(() => {
+      var k;
+      return ((k = _.value) == null ? void 0 : k.label) ?? "";
+    }), h = g(() => {
+      var k;
+      if (!(!l.value || !o.value))
+        return (k = A.value.find((T) => T.value === o.value)) == null ? void 0 : k.id;
+    });
+    function I(k) {
+      const T = [...u.value], B = T.findIndex((L) => L.value === k.value);
+      B === -1 ? T.push(k) : T[B] = k, u.value = T;
+    }
+    function E(k) {
+      u.value = u.value.filter((T) => T.value !== k);
+    }
+    function M(k, T) {
+      const B = u.value.findIndex((nt) => nt.value === k);
+      if (B === -1) return;
+      const L = u.value[B], W = T.label || L.label || T.value;
+      if (L.label === W && L.disabled === T.disabled && L.id === T.id)
+        return;
+      const be = [...u.value];
+      be[B] = { ...T, label: W }, u.value = be;
+    }
+    function F(k) {
+      o.value = k;
+    }
+    function le(k) {
+      const T = A.value.find((B) => B.value === k);
+      !T || T.disabled || (t.value = k, l.value = !1, o.value = k, Q(() => {
+        var B;
+        return (B = d.value) == null ? void 0 : B.focus();
+      }));
+    }
+    function Ge() {
+      var T;
+      const k = t.value;
+      return k && D.value.some((B) => B.value === k) ? k : (T = D.value[0]) == null ? void 0 : T.value;
+    }
+    function oe() {
+      e.disabled || (l.value = !0, o.value = Ge(), Q(() => {
+        var k;
+        (k = c.value) == null || k.focus();
+      }));
+    }
+    function Ee() {
+      l.value = !1, Q(() => {
+        var k;
+        return (k = d.value) == null ? void 0 : k.focus();
+      });
+    }
+    function We() {
+      l.value ? Ee() : oe();
+    }
+    function Ae(k) {
+      const T = D.value;
+      if (T.length === 0) return;
+      const B = T.findIndex((be) => be.value === o.value), W = ((B === -1 ? k > 0 ? -1 : 0 : B) + k + T.length) % T.length;
+      o.value = T[W].value;
+    }
+    function De(k) {
+      const T = D.value;
+      T.length !== 0 && (o.value = k === "start" ? T[0].value : T[T.length - 1].value);
+    }
+    function Je(k) {
+      m += k.toLowerCase(), b && clearTimeout(b), b = setTimeout(() => {
+        m = "";
+      }, 500);
+      const T = D.value, B = Math.max(
+        0,
+        T.findIndex((L) => L.value === o.value)
+      );
+      for (let L = 0; L < T.length; L++) {
+        const W = T[(B + L) % T.length];
+        if (W.label.toLowerCase().startsWith(m)) {
+          o.value = W.value, l.value || (t.value = W.value);
+          return;
+        }
+      }
+    }
+    function Re(k) {
+      if (!e.disabled)
+        switch (k.key) {
+          case "ArrowDown":
+            k.preventDefault(), l.value ? Ae(1) : oe();
+            break;
+          case "ArrowUp":
+            k.preventDefault(), l.value ? Ae(-1) : oe();
+            break;
+          case "Home":
+            l.value && (k.preventDefault(), De("start"));
+            break;
+          case "End":
+            l.value && (k.preventDefault(), De("end"));
+            break;
+          case "Enter":
+          case " ":
+            k.preventDefault(), l.value ? o.value && le(o.value) : oe();
+            break;
+          case "Escape":
+            l.value && (k.preventDefault(), Ee());
+            break;
+          default:
+            k.key.length === 1 && !k.ctrlKey && !k.metaKey && !k.altKey && (k.preventDefault(), l.value || oe(), Je(k.key));
+        }
+    }
+    function Qe(k) {
+      Re(k);
+    }
+    function Be(k) {
+      if (!l.value || !s.value) return;
+      const T = k.target;
+      s.value.contains(T) || (l.value = !1);
+    }
+    ne(() => {
+      document.addEventListener("pointerdown", Be);
+    }), q(() => {
+      document.removeEventListener("pointerdown", Be), b && clearTimeout(b);
+    }), G(qe, {
+      listboxId: r,
+      model: t,
+      activeValue: o,
+      open: l,
+      register: I,
+      unregister: E,
+      update: M,
+      selectValue: le,
+      setActiveValue: F,
+      disabled: g(() => e.disabled)
+    });
+    const Xe = [
+      "inline-flex w-full items-center justify-between gap-2 border border-kablui-border bg-kablui-bg text-kablui-fg",
+      "rounded-kablui-md font-kablui-normal",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), Ze = {
+      sm: "text-kablui-sm px-2 py-1",
+      md: "text-kablui-md px-3 py-1.5",
+      lg: "text-kablui-lg px-4 py-2"
+    }, et = g(() => [
+      Xe,
+      Ze[e.size],
+      i.invalid.value ? "border-kablui-danger" : "",
+      $.value ? "" : "text-kablui-muted-fg"
+    ]), tt = g(() => i.id.value), at = g(
+      () => i.id.value ? void 0 : e.placeholder
+    );
+    return (k, T) => (f(), p("div", {
+      ref_key: "rootRef",
+      ref: s,
+      class: "relative w-full",
+      "data-slot": "select"
+    }, [
+      j("button", Z({
+        ref_key: "triggerRef",
+        ref: d,
+        type: "button",
+        id: v(i).id.value,
+        disabled: a.disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": l.value ? "true" : "false",
+        "aria-controls": r,
+        "aria-invalid": v(i).ariaInvalid.value,
+        "aria-describedby": v(i).describedBy.value,
+        class: et.value
+      }, v(n), {
+        onClick: We,
+        onKeydown: Re
+      }), [
+        j("span", xa, H($.value || a.placeholder), 1),
+        T[0] || (T[0] = j("svg", {
+          class: "size-4 shrink-0 text-kablui-muted-fg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "aria-hidden": "true"
+        }, [
+          j("path", { d: "M6 9l6 6 6-6" })
+        ], -1))
+      ], 16, ya),
+      Oe(j("div", {
+        id: r,
+        ref_key: "listboxRef",
+        ref: c,
+        role: "listbox",
+        tabindex: "-1",
+        "aria-labelledby": tt.value,
+        "aria-label": at.value,
+        "aria-activedescendant": h.value,
+        class: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-kablui-md border border-kablui-border bg-kablui-bg p-1 shadow-kablui-sm",
+        onKeydown: Qe
+      }, [
+        y.value.length ? (f(!0), p(ee, { key: 0 }, we(y.value, (B) => (f(), p("div", {
+          id: B.id,
+          key: B.value,
+          role: "option",
+          "aria-selected": t.value === B.value ? "true" : "false",
+          "aria-disabled": B.disabled || void 0,
+          "data-value": B.value,
+          class: w([
+            "flex w-full cursor-pointer items-center px-3 py-1.5 text-kablui-md text-kablui-fg rounded-kablui-sm",
+            o.value === B.value ? "bg-kablui-muted" : "",
+            t.value === B.value ? "font-kablui-medium" : "",
+            B.disabled ? "opacity-50 pointer-events-none" : "hover:bg-kablui-muted"
+          ]),
+          onClick: (L) => le(B.value),
+          onMouseenter: (L) => !B.disabled && F(B.value)
+        }, H(B.label), 43, _a))), 128)) : C(k.$slots, "default", {}, void 0, void 0, 1)
+      ], 40, wa), [
+        [Pe, l.value]
+      ]),
+      a.name ? (f(), p("input", {
+        key: 0,
+        type: "hidden",
+        name: a.name,
+        value: t.value ?? "",
+        disabled: a.disabled
+      }, null, 8, $a)) : z("", !0)
+    ], 512));
+  }
+}), Ca = ["id", "aria-selected", "aria-disabled", "data-value"], Bn = /* @__PURE__ */ x({
+  __name: "SelectItem",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: !1 },
+    label: {}
+  },
+  setup(a) {
+    const e = a, t = S(qe, null), n = R(null);
+    t || console.warn("[kablui] SelectItem must be used inside Select");
+    const i = g(() => t ? `${t.listboxId}-option-${e.value}` : void 0);
+    function l() {
+      var u, m;
+      return e.label || ((m = (u = n.value) == null ? void 0 : u.textContent) == null ? void 0 : m.trim()) || e.value;
+    }
+    function o() {
+      return {
+        value: e.value,
+        label: l(),
+        disabled: e.disabled,
+        id: i.value ?? e.value
+      };
+    }
+    ne(() => {
+      t == null || t.register(o());
+    }), lt(() => {
+      t == null || t.update(e.value, o());
+    }), q(() => {
+      t == null || t.unregister(e.value);
+    });
+    const s = g(() => (t == null ? void 0 : t.model.value) === e.value), c = g(() => (t == null ? void 0 : t.activeValue.value) === e.value), d = g(
+      () => [
+        "flex w-full cursor-pointer items-center px-3 py-1.5 text-kablui-md text-kablui-fg",
+        "rounded-kablui-sm",
+        c.value ? "bg-kablui-muted" : "",
+        s.value ? "font-kablui-medium" : "",
+        e.disabled ? "opacity-50 pointer-events-none" : "hover:bg-kablui-muted"
+      ].join(" ")
+    );
+    function r() {
+      e.disabled || t == null || t.selectValue(e.value);
+    }
+    return (u, m) => (f(), p("div", {
+      ref_key: "rootRef",
+      ref: n,
+      id: i.value,
+      role: "option",
+      "aria-selected": s.value ? "true" : "false",
+      "aria-disabled": a.disabled || void 0,
+      "data-value": a.value,
+      class: w(d.value),
+      onClick: r,
+      onMouseenter: m[0] || (m[0] = (b) => {
+        var y;
+        return !a.disabled && ((y = v(t)) == null ? void 0 : y.setActiveValue(a.value));
+      })
+    }, [
+      C(u.$slots, "default", {}, () => [
+        re(H(a.value), 1)
+      ])
+    ], 42, Ca));
+  }
+}), Ia = ["role", "aria-hidden", "aria-orientation"], Ta = "shrink-0 border-0 border-solid", Mn = /* @__PURE__ */ x({
+  __name: "Separator",
+  props: {
+    orientation: { default: "horizontal" },
+    semantic: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = {
+      decorative: "border-kablui-border",
+      semantic: "border-kablui-border-strong"
+    }, t = {
+      horizontal: "w-full border-t",
+      vertical: "h-full border-l"
+    };
+    return (n, i) => (f(), p("div", {
+      role: a.semantic ? "separator" : void 0,
+      "aria-hidden": a.semantic ? void 0 : !0,
+      "aria-orientation": a.semantic && a.orientation === "vertical" ? "vertical" : void 0,
+      class: w([
+        Ta,
+        e[a.semantic ? "semantic" : "decorative"],
+        t[a.orientation]
+      ])
+    }, null, 10, Ia));
+  }
+}), Ea = "block bg-kablui-muted", zn = /* @__PURE__ */ x({
+  __name: "Skeleton",
+  props: {
+    width: {},
+    height: {},
+    circle: { type: Boolean, default: !1 },
+    animated: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const e = {
+      rect: "rounded-kablui-md",
+      circle: "rounded-kablui-full"
+    };
+    return (t, n) => (f(), p("div", {
+      "aria-hidden": "true",
+      class: w([
+        Ea,
+        e[a.circle ? "circle" : "rect"],
+        a.animated ? "animate-pulse" : void 0
+      ]),
+      style: ce({
+        width: a.width ?? (a.circle ? "2.5rem" : "100%"),
+        height: a.height ?? (a.circle ? "2.5rem" : "1rem")
+      })
+    }, null, 6));
+  }
+}), Aa = ["aria-busy", "aria-label"], Da = {
+  key: 0,
+  class: "sr-only"
+}, jn = /* @__PURE__ */ x({
+  __name: "Spinner",
+  props: {
+    size: { default: "md" },
+    label: {}
+  },
+  setup(a) {
+    const e = [
+      "inline-block shrink-0 rounded-kablui-full border-2 border-current border-t-transparent",
+      "animate-spin"
+    ].join(" "), t = {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5"
+    };
+    return (n, i) => (f(), p("span", {
+      role: "status",
+      "aria-busy": a.label ? !0 : void 0,
+      "aria-label": a.label || void 0,
+      class: "inline-flex items-center"
+    }, [
+      j("span", {
+        class: w([v(e), t[a.size]]),
+        "aria-hidden": "true"
+      }, null, 2),
+      a.label ? (f(), p("span", Da, H(a.label), 1)) : z("", !0)
+    ], 8, Aa));
+  }
+}), Ra = /* @__PURE__ */ x({
+  __name: "Stack",
+  props: {
+    gap: { default: "md" },
+    align: { default: "stretch" },
+    as: { default: "div" }
+  },
+  setup(a) {
+    const e = {
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6"
+    }, t = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline"
+    };
+    return (n, i) => (f(), V(ae(a.as), {
+      class: w(["flex flex-col", e[a.gap], t[a.align]])
+    }, {
+      default: Y(() => [
+        C(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Ba = ["id", "disabled", "aria-checked", "aria-invalid", "aria-describedby"], Ma = ["name", "value", "disabled"], Sn = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Switch",
+  props: /* @__PURE__ */ U({
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    name: {},
+    id: {},
+    value: { default: "on" }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = X(), i = se({
+      id: () => e.id,
+      invalid: () => e.invalid
+    }), l = g(
+      () => [
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-kablui-border",
+        "transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none",
+        t.value ? "bg-kablui-accent border-kablui-accent" : "bg-kablui-muted",
+        i.invalid.value ? "border-kablui-danger" : ""
+      ].join(" ")
+    ), o = g(
+      () => [
+        "pointer-events-none inline-block size-3.5 rounded-full bg-kablui-bg shadow-kablui-sm",
+        "transition-transform",
+        t.value ? "translate-x-4" : "translate-x-0.5"
+      ].join(" ")
+    );
+    function s() {
+      e.disabled || (t.value = !t.value);
+    }
+    function c(d) {
+      (d.key === " " || d.key === "Enter") && (d.preventDefault(), s());
+    }
+    return (d, r) => (f(), p(ee, null, [
+      j("button", Z({
+        type: "button",
+        role: "switch",
+        id: v(i).id.value,
+        disabled: a.disabled,
+        "aria-checked": t.value ? "true" : "false",
+        "aria-invalid": v(i).ariaInvalid.value,
+        "aria-describedby": v(i).describedBy.value,
+        class: l.value
+      }, v(n), {
+        onClick: s,
+        onKeydown: c
+      }), [
+        j("span", {
+          class: w(o.value),
+          "aria-hidden": "true"
+        }, null, 2)
+      ], 16, Ba),
+      a.name ? (f(), p("input", {
+        key: 0,
+        type: "hidden",
+        name: a.name,
+        value: t.value ? a.value : "",
+        disabled: a.disabled
+      }, null, 8, Ma)) : z("", !0)
+    ], 64));
+  }
+}), ge = Symbol("kablui-tabs"), za = ["id", "disabled", "aria-selected", "aria-controls", "tabindex"], Ln = /* @__PURE__ */ x({
+  __name: "Tab",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a, t = S(ge, null), n = R(null);
+    t || console.warn("[kablui] Tab must be used inside Tabs");
+    const i = g(() => !!(t != null && t.isSelected(e.value))), l = g(() => t == null ? void 0 : t.getTabId(e.value)), o = g(() => t == null ? void 0 : t.getPanelId(e.value)), s = g(() => (t == null ? void 0 : t.orientation.value) ?? "horizontal"), c = g(() => t != null && t.isTabbable(e.value) ? 0 : -1);
+    ne(() => {
+      !t || !n.value || t.registerTab({
+        value: e.value,
+        disabled: e.disabled,
+        el: n.value
+      });
+    }), q(() => {
+      t == null || t.unregisterTab(e.value);
+    }), K(
+      () => e.disabled,
+      (b) => {
+        t == null || t.updateTab(e.value, { disabled: b });
+      }
+    ), K(n, (b) => {
+      !t || !b || t.updateTab(e.value, { el: b, disabled: e.disabled });
+    });
+    function d() {
+      var b;
+      !t || e.disabled || (t.select(e.value), (b = n.value) == null || b.focus());
+    }
+    function r(b) {
+      if (!t || e.disabled) return;
+      const y = s.value === "horizontal", A = s.value === "vertical";
+      switch (b.key) {
+        case "ArrowRight":
+          if (!y) return;
+          b.preventDefault(), t.focusRelative(e.value, 1);
+          break;
+        case "ArrowLeft":
+          if (!y) return;
+          b.preventDefault(), t.focusRelative(e.value, -1);
+          break;
+        case "ArrowDown":
+          if (!A) return;
+          b.preventDefault(), t.focusRelative(e.value, 1);
+          break;
+        case "ArrowUp":
+          if (!A) return;
+          b.preventDefault(), t.focusRelative(e.value, -1);
+          break;
+        case "Home":
+          b.preventDefault(), t.focusFirst();
+          break;
+        case "End":
+          b.preventDefault(), t.focusLast();
+          break;
+      }
+    }
+    const u = [
+      "inline-flex items-center justify-center gap-1.5",
+      "px-3 py-2 text-kablui-md font-kablui-medium",
+      "text-kablui-muted-fg bg-transparent",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), m = g(() => i.value ? s.value === "horizontal" ? "border-b-2 border-kablui-accent text-kablui-accent" : "border-r-2 border-kablui-accent text-kablui-accent" : s.value === "horizontal" ? "border-b-2 border-transparent hover:text-kablui-fg" : "border-r-2 border-transparent hover:text-kablui-fg");
+    return (b, y) => (f(), p("button", {
+      ref_key: "buttonRef",
+      ref: n,
+      type: "button",
+      role: "tab",
+      "data-slot": "tab",
+      id: l.value,
+      disabled: a.disabled || void 0,
+      "aria-selected": i.value ? "true" : "false",
+      "aria-controls": o.value,
+      tabindex: c.value,
+      class: w([v(u), m.value]),
+      onClick: d,
+      onKeydown: r
+    }, [
+      C(b.$slots, "default")
+    ], 42, za));
+  }
+}), ja = ["aria-orientation"], On = /* @__PURE__ */ x({
+  __name: "TabList",
+  setup(a) {
+    const e = S(ge, null);
+    e || console.warn("[kablui] TabList must be used inside Tabs");
+    const t = g(() => (e == null ? void 0 : e.orientation.value) ?? "horizontal"), n = {
+      horizontal: "flex-row border-b border-kablui-border",
+      vertical: "flex-col border-r border-kablui-border"
+    };
+    return (i, l) => (f(), p("div", {
+      role: "tablist",
+      "data-slot": "tab-list",
+      "aria-orientation": t.value,
+      class: w(["flex", n[t.value]])
+    }, [
+      C(i.$slots, "default")
+    ], 10, ja));
+  }
+}), Sa = ["id", "aria-labelledby", "hidden", "tabindex"], Pn = /* @__PURE__ */ x({
+  __name: "TabPanel",
+  props: {
+    value: {}
+  },
+  setup(a) {
+    const e = a, t = S(ge, null);
+    t || console.warn("[kablui] TabPanel must be used inside Tabs");
+    const n = g(() => !!(t != null && t.isSelected(e.value))), i = g(() => t == null ? void 0 : t.getPanelId(e.value)), l = g(() => t == null ? void 0 : t.getTabId(e.value));
+    return (o, s) => (f(), p("div", {
+      role: "tabpanel",
+      "data-slot": "tab-panel",
+      id: i.value,
+      "aria-labelledby": l.value,
+      hidden: !n.value,
+      tabindex: n.value ? 0 : void 0,
+      class: "px-1 py-3 text-kablui-md text-kablui-fg"
+    }, [
+      C(o.$slots, "default")
+    ], 8, Sa));
+  }
+}), La = ["data-orientation"], Vn = /* @__PURE__ */ x({
+  __name: "Tabs",
+  props: /* @__PURE__ */ U({
+    orientation: { default: "horizontal" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = P("tabs"), i = R([]);
+    function l(h) {
+      return `${n}-tab-${h}`;
+    }
+    function o(h) {
+      return `${n}-panel-${h}`;
+    }
+    function s(h) {
+      const I = [...i.value], E = I.findIndex((M) => M.value === h.value);
+      E === -1 ? I.push(h) : I[E] = h, i.value = I;
+    }
+    function c(h) {
+      i.value = i.value.filter((I) => I.value !== h);
+    }
+    function d(h, I) {
+      const E = [...i.value], M = E.findIndex((F) => F.value === h);
+      M !== -1 && (E[M] = { ...E[M], ...I, value: h }, i.value = E);
+    }
+    function r() {
+      return i.value.filter((h) => !h.disabled);
+    }
+    function u(h) {
+      return t.value === h;
+    }
+    function m(h) {
+      const I = i.value.find((M) => M.value === h);
+      if (!I || I.disabled) return !1;
+      if (t.value != null) return t.value === h;
+      const E = r()[0];
+      return (E == null ? void 0 : E.value) === h;
+    }
+    function b(h) {
+      const I = i.value.find((E) => E.value === h);
+      !I || I.disabled || (t.value = h);
+    }
+    function y(h) {
+      t.value = h.value, h.el.focus();
+    }
+    function A(h, I) {
+      const E = r(), M = E.findIndex((le) => le.value === h);
+      if (M === -1 || E.length === 0) return;
+      const F = E[(M + I + E.length) % E.length];
+      y(F);
+    }
+    function D() {
+      const h = r();
+      h.length !== 0 && y(h[0]);
+    }
+    function _() {
+      const h = r();
+      h.length !== 0 && y(h[h.length - 1]);
+    }
+    G(ge, {
+      model: t,
+      orientation: g(() => e.orientation),
+      registerTab: s,
+      unregisterTab: c,
+      updateTab: d,
+      getTabId: l,
+      getPanelId: o,
+      select: b,
+      focusRelative: A,
+      focusFirst: D,
+      focusLast: _,
+      isSelected: u,
+      isTabbable: m
+    });
+    const $ = {
+      horizontal: "flex-col",
+      vertical: "flex-row"
+    };
+    return (h, I) => (f(), p("div", {
+      "data-slot": "tabs",
+      class: w(["flex gap-0", $[a.orientation]]),
+      "data-orientation": a.orientation
+    }, [
+      C(h.$slots, "default")
+    ], 10, La));
+  }
+}), Fn = /* @__PURE__ */ x({
+  __name: "Text",
+  props: {
+    as: { default: "p" },
+    size: { default: "md" },
+    weight: { default: "normal" },
+    tone: { default: "default" }
+  },
+  setup(a) {
+    const e = {
+      sm: "text-kablui-sm",
+      md: "text-kablui-md",
+      lg: "text-kablui-lg"
+    }, t = {
+      normal: "font-kablui-normal",
+      medium: "font-kablui-medium",
+      semibold: "font-kablui-semibold"
+    }, n = {
+      default: "text-kablui-fg",
+      muted: "text-kablui-muted-fg",
+      accent: "text-kablui-accent",
+      danger: "text-kablui-danger"
+    };
+    return (i, l) => (f(), V(ae(a.as), {
+      class: w([e[a.size], t[a.weight], n[a.tone]])
+    }, {
+      default: Y(() => [
+        C(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Oa = ["id", "name", "rows", "disabled", "placeholder", "value", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Textarea",
+  props: /* @__PURE__ */ U({
+    size: { default: "md" },
+    rows: { default: 3 },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    placeholder: {},
+    name: {},
+    id: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = a, t = N(a, "modelValue"), n = X(), i = se({
+      id: () => e.id,
+      invalid: () => e.invalid
+    }), l = [
+      "w-full border border-kablui-border bg-kablui-bg text-kablui-fg",
+      "rounded-kablui-md font-kablui-normal",
+      "placeholder:text-kablui-muted-fg",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg",
+      "disabled:opacity-50 disabled:pointer-events-none"
+    ].join(" "), o = {
+      sm: "text-kablui-sm px-2 py-1",
+      md: "text-kablui-md px-3 py-1.5",
+      lg: "text-kablui-lg px-4 py-2"
+    }, s = g(() => [
+      l,
+      o[e.size],
+      i.invalid.value ? "border-kablui-danger" : ""
+    ]);
+    return (c, d) => (f(), p("textarea", Z({
+      id: v(i).id.value,
+      name: a.name,
+      rows: a.rows,
+      disabled: a.disabled,
+      placeholder: a.placeholder,
+      value: t.value,
+      "aria-invalid": v(i).ariaInvalid.value,
+      "aria-describedby": v(i).describedBy.value,
+      class: s.value
+    }, v(n), {
+      onInput: d[0] || (d[0] = (r) => t.value = r.target.value)
+    }), null, 16, Oa));
+  }
+}), Pa = ["role", "aria-labelledby", "aria-describedby"], Va = { class: "min-w-0 flex-1" }, Fa = ["id"], Ha = ["id"], Ka = /* @__PURE__ */ x({
+  __name: "Toast",
+  props: {
+    tone: { default: "neutral" },
+    title: {},
+    description: {},
+    actionLabel: {}
+  },
+  emits: ["dismiss", "action"],
+  setup(a, { emit: e }) {
+    const t = e, n = P("toast-title"), i = P("toast-description"), l = [
+      "pointer-events-auto relative flex w-80 max-w-[calc(100vw-2rem)] gap-3",
+      "rounded-kablui-md border px-3 py-2.5 shadow-kablui-md",
+      "text-kablui-md"
+    ].join(" "), o = {
+      neutral: "border-kablui-border bg-kablui-bg text-kablui-fg",
+      accent: "border-kablui-accent bg-kablui-accent text-kablui-accent-fg",
+      danger: "border-kablui-danger bg-kablui-danger text-kablui-danger-fg",
+      success: "border-kablui-success bg-kablui-success text-kablui-success-fg",
+      warning: "border-kablui-warning bg-kablui-warning text-kablui-warning-fg"
+    }, s = [
+      "shrink-0 -mr-1 -mt-0.5 inline-flex size-6 items-center justify-center",
+      "rounded-kablui-sm text-current opacity-70 hover:opacity-100",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg"
+    ].join(" "), c = [
+      "mt-1.5 inline-flex items-center text-kablui-sm font-kablui-medium",
+      "underline underline-offset-2 opacity-90 hover:opacity-100",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kablui-focus focus-visible:ring-offset-2 focus-visible:ring-offset-kablui-bg"
+    ].join(" ");
+    function d() {
+      t("dismiss");
+    }
+    function r() {
+      t("action");
+    }
+    return (u, m) => (f(), p("div", {
+      role: a.tone === "danger" ? "alert" : "status",
+      "aria-labelledby": v(n),
+      "aria-describedby": a.description ? v(i) : void 0,
+      class: w([v(l), o[a.tone]]),
+      "data-kablui-toast": ""
+    }, [
+      j("div", Va, [
+        j("div", {
+          id: v(n),
+          class: "font-kablui-semibold"
+        }, H(a.title), 9, Fa),
+        a.description ? (f(), p("div", {
+          key: 0,
+          id: v(i),
+          class: "mt-0.5 text-kablui-sm opacity-90"
+        }, H(a.description), 9, Ha)) : z("", !0),
+        a.actionLabel ? (f(), p("button", {
+          key: 1,
+          type: "button",
+          class: w(v(c)),
+          onClick: r
+        }, H(a.actionLabel), 3)) : z("", !0)
+      ]),
+      j("button", {
+        type: "button",
+        class: w(v(s)),
+        "aria-label": "Dismiss",
+        onClick: d
+      }, [...m[0] || (m[0] = [
+        j("span", { "aria-hidden": "true" }, "×", -1)
+      ])], 2)
+    ], 10, Pa));
+  }
+}), Ye = Symbol("kablui-toast"), Na = ["data-placement"], Ua = 5e3, Kn = /* @__PURE__ */ x({
+  __name: "ToastProvider",
+  props: {
+    placement: { default: "bottom-end" },
+    maxVisible: { default: 3 },
+    to: { default: "body" }
+  },
+  setup(a) {
+    const e = a, t = R([]), n = R([]), i = /* @__PURE__ */ new Map(), { zIndex: l } = pe("toast"), o = g(() => t.value.length > 0);
+    function s(_) {
+      const $ = i.get(_);
+      $ !== void 0 && (clearTimeout($), i.delete(_));
+    }
+    function c(_) {
+      if (_.duration <= 0) return;
+      s(_.id);
+      const $ = setTimeout(() => {
+        u(_.id);
+      }, _.duration);
+      i.set(_.id, $);
+    }
+    function d() {
+      for (; t.value.length < e.maxVisible && n.value.length > 0; ) {
+        const _ = n.value.shift();
+        if (!_) break;
+        t.value.push(_), c(_);
+      }
+    }
+    function r(_) {
+      const $ = {
+        id: P("toast"),
+        tone: _.tone ?? "neutral",
+        title: _.title,
+        description: _.description,
+        duration: _.duration ?? Ua,
+        action: _.action
+      };
+      return t.value.length < e.maxVisible ? (t.value.push($), c($)) : n.value.push($), $.id;
+    }
+    function u(_) {
+      s(_);
+      const $ = t.value.findIndex((I) => I.id === _);
+      if ($ !== -1) {
+        t.value.splice($, 1), d();
+        return;
+      }
+      const h = n.value.findIndex((I) => I.id === _);
+      h !== -1 && n.value.splice(h, 1);
+    }
+    function m(_) {
+      var $;
+      ($ = _.action) == null || $.onClick();
+    }
+    G(Ye, { toast: r, dismiss: u }), ie(() => {
+      for (const _ of [...i.keys()]) s(_);
+    });
+    const b = {
+      "top-start": "top-4 left-4",
+      "top-end": "top-4 right-4",
+      "bottom-start": "bottom-4 left-4",
+      "bottom-end": "bottom-4 right-4"
+    }, y = g(() => e.placement.startsWith("top")), A = g(
+      () => ["pointer-events-none fixed z-kablui-toast", b[e.placement]].join(" ")
+    ), D = g(
+      () => y.value ? [...t.value].reverse() : t.value
+    );
+    return (_, $) => (f(), p(ee, null, [
+      C(_.$slots, "default"),
+      (f(), V(de, { to: a.to }, [
+        o.value ? (f(), p("div", {
+          key: 0,
+          class: w(A.value),
+          style: ce({ zIndex: v(l) }),
+          "data-kablui-toast-region": "",
+          "data-placement": a.placement
+        }, [
+          he(Ra, {
+            gap: "sm",
+            align: a.placement.endsWith("end") ? "end" : "start"
+          }, {
+            default: Y(() => [
+              (f(!0), p(ee, null, we(D.value, (h) => {
+                var I;
+                return f(), V(Ka, {
+                  key: h.id,
+                  tone: h.tone,
+                  title: h.title,
+                  description: h.description,
+                  "action-label": (I = h.action) == null ? void 0 : I.label,
+                  onDismiss: (E) => u(h.id),
+                  onAction: (E) => m(h)
+                }, null, 8, ["tone", "title", "description", "action-label", "onDismiss", "onAction"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["align"])
+        ], 14, Na)) : z("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+}), qa = ["id", "data-placement"], Nn = /* @__PURE__ */ x({
+  __name: "Tooltip",
+  props: {
+    content: {},
+    placement: { default: "top" },
+    delay: { default: 300 }
+  },
+  setup(a) {
+    const e = a, t = R(!1), n = R(null), i = R(null), l = P("tooltip");
+    let o = null, s = null, c = null;
+    const { style: d } = Ie(n, i, {
+      open: t,
+      placement: () => e.placement
+    });
+    function r() {
+      o && (clearTimeout(o), o = null), s && (clearTimeout(s), s = null);
+    }
+    function u() {
+      return typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(hover: hover)").matches;
+    }
+    function m() {
+      const E = n.value;
+      return E ? E.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      ) ?? E : null;
+    }
+    function b(E) {
+      const M = m();
+      c && c !== M && (c.getAttribute("aria-describedby") === l && c.removeAttribute("aria-describedby"), c = null), M && (c = M, E ? M.setAttribute("aria-describedby", l) : M.getAttribute("aria-describedby") === l && M.removeAttribute("aria-describedby"));
+    }
+    function y() {
+      r(), o = setTimeout(() => {
+        o = null, t.value = !0;
+      }, e.delay);
+    }
+    function A() {
+      r(), s = setTimeout(() => {
+        s = null, t.value = !1;
+      }, 0);
+    }
+    function D() {
+      u() && y();
+    }
+    function _() {
+      u() && A();
+    }
+    function $() {
+      y();
+    }
+    function h(E) {
+      const M = n.value, F = E.relatedTarget;
+      M && F instanceof Node && M.contains(F) || A();
+    }
+    K(t, async (E) => {
+      await Q(), b(E);
+    }), q(() => {
+      r(), b(!1);
+    });
+    const I = [
+      "z-kablui-tooltip pointer-events-none max-w-xs rounded-kablui-md",
+      "border border-kablui-border bg-kablui-bg px-2 py-1",
+      "text-kablui-sm text-kablui-fg shadow-kablui-md"
+    ].join(" ");
+    return (E, M) => (f(), p(ee, null, [
+      j("span", {
+        ref_key: "anchorRef",
+        ref: n,
+        class: "inline-flex",
+        "data-slot": "tooltip",
+        onPointerenter: D,
+        onPointerleave: _,
+        onFocusin: $,
+        onFocusout: h
+      }, [
+        C(E.$slots, "default")
+      ], 544),
+      (f(), V(de, { to: "body" }, [
+        t.value ? (f(), p("div", {
+          key: 0,
+          id: v(l),
+          ref_key: "floatingRef",
+          ref: i,
+          role: "tooltip",
+          "data-slot": "tooltip-content",
+          "data-placement": a.placement,
+          class: w(v(I)),
+          style: ce(v(d))
+        }, [
+          C(E.$slots, "content", {}, () => [
+            re(H(a.content), 1)
+          ])
+        ], 14, qa)) : z("", !0)
+      ]))
+    ], 64));
+  }
+});
+function Un() {
+  const a = S(Ye, null);
+  if (!a)
+    throw new Error("useToast() must be used within a <ToastProvider>.");
+  return a;
+}
+const qn = rt.version;
+export {
+  Ga as Accordion,
+  Wa as AccordionContent,
+  Ja as AccordionItem,
+  Qa as AccordionTrigger,
+  Xa as Alert,
+  Za as Badge,
+  ke as Button,
+  en as Card,
+  tn as CardBody,
+  an as CardDescription,
+  nn as CardFooter,
+  sn as CardHeader,
+  ln as CardTitle,
+  on as Checkbox,
+  rn as Cluster,
+  un as Container,
+  dn as Dialog,
+  cn as Empty,
+  fn as Field,
+  bn as FieldError,
+  vn as FieldHint,
+  mn as Icon,
+  pn as Input,
+  gn as Label,
+  kn as Link,
+  hn as Menu,
+  yn as MenuContent,
+  xn as MenuItem,
+  wn as MenuSeparator,
+  _n as MenuTrigger,
+  $n as Pagination,
+  Cn as Popover,
+  In as PopoverContent,
+  Tn as PopoverTrigger,
+  En as Progress,
+  An as Radio,
+  Dn as RadioGroup,
+  Rn as Select,
+  Bn as SelectItem,
+  Mn as Separator,
+  zn as Skeleton,
+  jn as Spinner,
+  Ra as Stack,
+  Sn as Switch,
+  Ln as Tab,
+  On as TabList,
+  Pn as TabPanel,
+  Vn as Tabs,
+  Fn as Text,
+  Hn as Textarea,
+  Ka as Toast,
+  Kn as ToastProvider,
+  Nn as Tooltip,
+  wt as provideField,
+  me as useField,
+  se as useFieldControlAttrs,
+  Un as useToast,
+  qn as version
+};
+//# sourceMappingURL=kablui.js.map