veloce-vue 0.11.0 → 0.14.0

package/index.js

@@ -1,12 +1,48 @@
-import { defineComponent as g, computed as h, resolveComponent as b, createElementBlock as o, openBlock as r, normalizeClass as i, createElementVNode as d, createBlock as p, createCommentVNode as l, toDisplayString as c, ref as v, Fragment as y, renderList as f, createVNode as _, renderSlot as x, createTextVNode as k } from "vue";
-const w = {
+import { defineComponent as x, ref as _, resolveComponent as G, createElementBlock as i, openBlock as r, Fragment as E, renderList as F, createElementVNode as a, createCommentVNode as y, createVNode as S, toDisplayString as $, normalizeClass as h, renderSlot as C, createTextVNode as K, computed as M, createBlock as j, resolveDynamicComponent as ee, mergeModels as R, useModel as W, withDirectives as Q, vModelDynamic as te, watch as P, onMounted as oe, onUnmounted as se, normalizeStyle as V, getCurrentScope as le, onScopeDispose as ne, toValue as L, unref as re, useTemplateRef as ae, vModelText as ie } from "vue";
+const ue = { class: "w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-slate-200 bg-white shadow" }, de = ["onClick"], ce = { class: "title" }, pe = {
+  key: 0,
+  class: "text-text p-3"
+}, fe = {
+  key: 1,
+  class: "px-3 py-6 text-center text-gray-500"
+}, wt = /* @__PURE__ */ x({
+  __name: "Index",
+  props: {
+    items: { type: Array, required: !0 }
+  },
+  setup(o) {
+    const e = _(null);
+    return (t, l) => {
+      const n = G("Icon");
+      return r(), i("div", ue, [
+        o.items.length ? (r(!0), i(E, { key: 0 }, F(o.items, (s, u) => (r(), i("div", { key: u }, [
+          a("div", {
+            class: "text-text relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100 hover:bg-gray-100",
+            onClick: (d) => e.value = e.value === u ? null : u
+          }, [
+            a("span", ce, $(s.title), 1),
+            S(n, {
+              icon: "chevron-down",
+              class: h([{ "rotate-180 ": e.value === u }, "icon text-[1.4rem] duration-200"])
+            }, null, 8, ["class"])
+          ], 8, de),
+          e.value === u ? (r(), i("div", pe, [
+            s.slot ? C(t.$slots, s.slot, { key: 0 }) : (r(), i(E, { key: 1 }, [
+              K($(s.content), 1)
+            ], 64))
+          ])) : y("", !0)
+        ]))), 128)) : (r(), i("div", fe, "No items to show"))
+      ]);
+    };
+  }
+}), me = {
   label: { type: String, default: "" },
   loading: { type: Boolean, default: !1 },
   disabled: { type: Boolean, default: !1 },
   variant: {
     type: String,
     default: "solid",
-    options: ["outlined", "text", "ghost", "solid"]
+    options: ["outlined", "text", "ghost", "solid", "gray"]
   },
   icon: { type: String, default: "" },
   iconClass: { type: String, default: "" },
@@ -16,11 +52,11 @@ const w = {
     options: ["left", "right"]
   },
   rounded: { type: Boolean, default: !1 }
-}, C = ["disabled"], P = /* @__PURE__ */ g({
+}, ve = ["disabled"], O = /* @__PURE__ */ x({
   __name: "Index",
-  props: w,
-  setup(t) {
-    const e = t, n = h(() => {
+  props: me,
+  setup(o) {
+    const e = o, t = M(() => {
       switch (e.variant) {
         case "outlined":
           return "!border-primary text-primary bg-transparent hover:bg-primary disabled:hover:bg-transparent disabled:hover:text-primary hover:text-white";
@@ -28,93 +64,750 @@ const w = {
           return "bg-transparent text-primary hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";
         case "ghost":
           return "text-primary bg-gray-100 hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";
+        case "gray":
+          return "bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:hover:bg-gray-100 disabled:hover:text-gray-900";
         default:
           return "bg-primary text-white hover:bg-primary/75 disabled:hover:bg-primary disabled:hover:text-white";
       }
     });
-    return (m, u) => {
-      const a = b("Icon");
-      return r(), o("button", {
+    return (l, n) => {
+      const s = G("Icon");
+      return r(), i("button", {
         type: "button",
         disabled: e.disabled || e.loading,
-        class: i([
-          n.value,
+        class: h([
+          t.value,
           { "rounded-full": e.rounded },
           "flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-3 py-2 transition duration-200 disabled:cursor-not-allowed disabled:opacity-75 "
         ])
       }, [
-        d("div", {
-          class: i([{ "justify-center": !e.icon }, "flex w-full items-center justify-between gap-2"])
+        a("div", {
+          class: h([{ "justify-center": !e.icon }, "flex w-full items-center justify-between gap-2"])
         }, [
-          e.label ? (r(), o("span", {
+          e.label ? (r(), i("span", {
             key: 0,
-            class: i({ "order-2": e.iconPosition === "left" })
-          }, c(e.label), 3)) : l("", !0),
-          e.icon && !e.loading ? (r(), p(a, {
+            class: h({ "order-2": e.iconPosition === "left" })
+          }, $(e.label), 3)) : y("", !0),
+          e.icon && !e.loading ? (r(), j(s, {
             key: 1,
             icon: e.icon,
-            class: i(e.iconClass)
-          }, null, 8, ["icon", "class"])) : l("", !0)
-        ], 2),
-        e.loading ? (r(), p(a, {
+            class: h([e.iconClass, "duration-200 size-5 text-current"])
+          }, null, 8, ["icon", "class"])) : y("", !0),
+          e.loading ? (r(), j(s, {
+            key: 2,
+            icon: "loading",
+            class: "duration-200 size-5 text-current"
+          })) : y("", !0)
+        ], 2)
+      ], 10, ve);
+    };
+  }
+}), he = {
+  label: { type: String, default: "" },
+  labelClass: { type: String, default: "" },
+  checkboxClass: { type: String, default: "" }
+}, T = (o, e) => {
+  const t = o.__vccOpts || o;
+  for (const [l, n] of e)
+    t[l] = n;
+  return t;
+}, ye = {}, ge = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function be(o, e) {
+  return r(), i("svg", ge, [...e[0] || (e[0] = [
+    a("path", {
+      fill: "currentColor",
+      d: "m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"
+    }, null, -1)
+  ])]);
+}
+const we = /* @__PURE__ */ T(ye, [["render", be]]), xe = {}, ke = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function $e(o, e) {
+  return r(), i("svg", ke, [...e[0] || (e[0] = [
+    a("path", {
+      fill: "currentColor",
+      d: "m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"
+    }, null, -1)
+  ])]);
+}
+const _e = /* @__PURE__ */ T(xe, [["render", $e]]), Ce = {}, Se = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function Le(o, e) {
+  return r(), i("svg", Se, [...e[0] || (e[0] = [
+    a("path", {
+      fill: "currentColor",
+      d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
+      opacity: "0.25"
+    }, null, -1),
+    a("path", {
+      fill: "currentColor",
+      d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+    }, [
+      a("animateTransform", {
+        type: "rotate",
+        attributeName: "transform",
+        dur: "0.75s",
+        repeatCount: "indefinite",
+        values: "0 12 12;360 12 12"
+      })
+    ], -1)
+  ])]);
+}
+const Ee = /* @__PURE__ */ T(Ce, [["render", Le]]), Me = {}, Ie = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "-5 -8 24 24"
+};
+function ze(o, e) {
+  return r(), i("svg", Ie, [...e[0] || (e[0] = [
+    a("path", {
+      fill: "currentColor",
+      d: "m7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364z"
+    }, null, -1)
+  ])]);
+}
+const Ve = /* @__PURE__ */ T(Me, [["render", ze]]), Ae = {}, Be = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function Oe(o, e) {
+  return r(), i("svg", Be, [...e[0] || (e[0] = [
+    a("g", { fill: "none" }, [
+      a("path", {
+        fill: "currentColor",
+        "fill-opacity": "0.16",
+        d: "M10.575 5.217L3.517 17a1.667 1.667 0 0 0 1.425 2.5h14.116a1.666 1.666 0 0 0 1.425-2.5L13.426 5.217a1.666 1.666 0 0 0-2.85 0"
+      }),
+      a("path", {
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-miterlimit": "10",
+        "stroke-width": "1.5",
+        d: "M12 16h.008M12 10v3m-1.425-7.783L3.517 17a1.667 1.667 0 0 0 1.425 2.5h14.116a1.666 1.666 0 0 0 1.425-2.5L13.426 5.217a1.666 1.666 0 0 0-2.85 0"
+      })
+    ], -1)
+  ])]);
+}
+const Te = /* @__PURE__ */ T(Ae, [["render", Oe]]), U = {
+  check: we,
+  close: _e,
+  loading: Ee,
+  "chevron-down": Ve,
+  alert: Te
+}, H = /* @__PURE__ */ x({
+  __name: "index",
+  props: {
+    icon: {},
+    fallbackIcon: {},
+    class: {},
+    size: {}
+  },
+  setup(o) {
+    const e = o, t = M(() => e.size ?? 24), l = M(() => {
+      const n = e.icon, s = e.fallbackIcon ? e.fallbackIcon : "alert";
+      return U[n] ?? U[s];
+    });
+    return (n, s) => (r(), j(ee(l.value), {
+      class: h(["shrink-0", e.class]),
+      width: t.value,
+      height: t.value
+    }, null, 8, ["class", "width", "height"]));
+  }
+}), xt = /* @__PURE__ */ x({
+  __name: "Index",
+  props: /* @__PURE__ */ R(he, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const e = W(o, "modelValue");
+    return (t, l) => (r(), i("div", {
+      class: "flex w-fit cursor-pointer gap-2 select-none",
+      onClick: l[0] || (l[0] = (n) => e.value = !e.value)
+    }, [
+      a("div", {
+        class: h([[{ "bg-primary": e.value }, t.checkboxClass], "border-primary m-0 size-6 rounded-sm border-2 duration-200"])
+      }, [
+        e.value ? (r(), j(H, {
           key: 0,
-          icon: "loading"
-        })) : l("", !0)
-      ], 10, C);
+          icon: "check",
+          class: h([{ "text-white": e.value }, "size-5"])
+        }, null, 8, ["class"])) : y("", !0)
+      ], 2),
+      a("div", {
+        class: h(t.labelClass)
+      }, $(t.label), 3)
+    ]));
+  }
+}), je = {
+  direction: { type: String, default: "bottom", options: ["left", "bottom", "right"] },
+  title: { type: String, default: "" },
+  description: { type: String, default: "" },
+  showFooter: { type: Boolean, default: !1 },
+  show: { type: Boolean, default: !1 }
+}, Pe = { class: "flex justify-between border-b border-gray-200 p-2" }, qe = { class: "font-semibold" }, De = { class: "text-sm text-gray-500" }, Ne = { class: "ml-auto" }, Fe = { class: "size-full overflow-auto p-2" }, Re = {
+  key: 0,
+  class: "border-t border-gray-200 p-2"
+}, kt = /* @__PURE__ */ x({
+  __name: "Index",
+  props: /* @__PURE__ */ R(je, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const e = o, t = W(o, "modelValue"), l = M(() => {
+      let s = "";
+      switch (e.direction) {
+        case "left":
+          s = t.value ? "fixed top-0 left-0 bottom-0" : "fixed top-0 -left-full bottom-0";
+          break;
+        case "bottom":
+          s = t.value ? "fixed left-0 bottom-0 right-0" : "fixed left-0 right-0 -bottom-full";
+          break;
+        case "right":
+          s = t.value ? "fixed top-0 right-0 bottom-0" : "fixed top-0 -right-full bottom-0";
+          break;
+        default:
+          alert("Invalid direction");
+      }
+      return s;
+    }), n = M(() => {
+      let s = "";
+      switch (e.direction) {
+        case "left":
+          s = "w-full max-w-[360px]";
+          break;
+        case "bottom":
+          s = "w-full h-full max-h-[90dvh]";
+          break;
+        case "right":
+          s = "w-full max-w-[360px]";
+          break;
+      }
+      return s;
+    });
+    return (s, u) => (r(), i(E, null, [
+      a("div", {
+        onClick: u[0] || (u[0] = (d) => t.value = !t.value)
+      }, [
+        C(s.$slots, "default")
+      ]),
+      a("div", {
+        class: h([[l.value, n.value], "z-50 flex flex-col justify-between bg-white duration-300"])
+      }, [
+        a("div", Pe, [
+          a("div", null, [
+            a("h4", qe, $(s.title), 1),
+            a("p", De, $(s.description), 1)
+          ]),
+          a("div", Ne, [
+            S(O, {
+              icon: "close",
+              class: "!p-1",
+              circle: "",
+              variant: "text",
+              onClick: u[1] || (u[1] = (d) => t.value = !1)
+            })
+          ])
+        ]),
+        a("div", Fe, [
+          C(s.$slots, "content")
+        ]),
+        s.showFooter ? (r(), i("div", Re, [
+          C(s.$slots, "footer")
+        ])) : y("", !0)
+      ], 2),
+      a("div", {
+        class: h([t.value ? "opacity-100" : "pointer-events-none", "fixed inset-0 z-[49] bg-black/40 opacity-0 duration-200"]),
+        onClick: u[2] || (u[2] = (d) => t.value = !1)
+      }, null, 2)
+    ], 64));
+  }
+}), We = {
+  icon: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  helpText: { type: String, default: "" },
+  type: { type: String, default: "text", options: ["text", "password"] }
+}, Xe = ["type"], Ue = {
+  key: 0,
+  class: "ml-1 pt-1 text-xs text-gray-400"
+}, $t = /* @__PURE__ */ x({
+  __name: "Index",
+  props: /* @__PURE__ */ R(We, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const e = W(o, "modelValue");
+    return (t, l) => (r(), i("div", {
+      class: h([{ "mb-6": t.helpText }, "relative h-[38px]"])
+    }, [
+      Q(a("input", {
+        type: t.type,
+        "onUpdate:modelValue": l[0] || (l[0] = (n) => e.value = n),
+        class: "hover:border-primary/60 peer outline-primary h-full w-full rounded-md border border-gray-200 px-3 duration-200",
+        placeholder: " "
+      }, null, 8, Xe), [
+        [te, e.value]
+      ]),
+      a("div", {
+        class: h([e.value ? "-top-2.5 text-sm text-black" : "top-[6px]", "absolute left-3 bg-white px-[2px] text-black duration-100 peer-placeholder-shown:text-gray-400 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-black"])
+      }, $(t.placeholder), 3),
+      t.helpText ? (r(), i("div", Ue, $(t.helpText), 1)) : y("", !0)
+    ], 2));
+  }
+}), Ze = {
+  show: { type: Boolean, default: !1 }
+}, Ge = {
+  key: 0,
+  class: "fixed top-0 left-0 z-20 flex h-screen w-screen items-center justify-center backdrop-blur-[2px]"
+}, Ke = {
+  class: "flex max-w-[600px] flex-col overflow-hidden rounded border border-gray-200 bg-white text-slate-500 shadow-xl shadow-slate-700/10 sm:max-h-[95dvh] sm:w-[90%]",
+  role: "document"
+}, Qe = { class: "flex items-center gap-4 border-b border-gray-200 px-4 py-2" }, He = { class: "max-h-[calc(100dvh-100px)] flex-1 overflow-auto px-4 py-2 sm:max-h-[75vh]" }, Je = { class: "flex items-center justify-end gap-4 border-t border-gray-200 px-4 py-2" }, _t = /* @__PURE__ */ x({
+  __name: "Index",
+  props: Ze,
+  emits: ["update:show"],
+  setup(o, { emit: e }) {
+    const t = o, l = e, n = _(t.show ?? !1);
+    return P(
+      () => t.show,
+      (s) => {
+        s !== n.value && (n.value = s);
+      }
+    ), P(n, (s) => {
+      l("update:show", s), document.body.classList.toggle("overflow-hidden", s);
+    }), (s, u) => (r(), i(E, null, [
+      a("div", {
+        class: "w-full",
+        onClick: u[0] || (u[0] = (d) => n.value = !0)
+      }, [
+        C(s.$slots, "default")
+      ]),
+      n.value ? (r(), i("div", Ge, [
+        a("div", Ke, [
+          a("div", Qe, [
+            u[4] || (u[4] = a("h3", { class: "text-primary flex-1 text-xl font-medium" }, "Modal title", -1)),
+            S(O, {
+              icon: "close",
+              class: "!p-1",
+              variant: "ghost",
+              circle: "",
+              onClick: u[1] || (u[1] = (d) => n.value = !1)
+            })
+          ]),
+          a("div", He, [
+            (r(), i(E, null, F(15, (d) => a("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo autem consequatur aspernatur animi voluptate quasi non, maxime iste, harum ipsa reiciendis laborum ad unde a sequi molestias? Dolore, obcaecati sed?")), 64))
+          ]),
+          a("div", Je, [
+            S(O, {
+              class: "!px-3 !py-1",
+              variant: "ghost",
+              label: "Close",
+              onClick: u[2] || (u[2] = (d) => n.value = !1)
+            }),
+            S(O, {
+              class: "!px-3 !py-1",
+              label: "Save",
+              onClick: u[3] || (u[3] = (d) => n.value = !1)
+            })
+          ])
+        ])
+      ])) : y("", !0)
+    ], 64));
+  }
+}), Ye = {
+  position: { type: String, default: "bottom", options: ["top", "bottom"] },
+  bodyClass: { type: String, default: "" },
+  contentClass: { type: String, default: "" }
+}, Ct = /* @__PURE__ */ x({
+  __name: "Index",
+  props: Ye,
+  setup(o) {
+    const e = _(!0);
+    return (t, l) => (r(), i("div", {
+      class: "relative inline-block",
+      onMouseleave: l[1] || (l[1] = (n) => e.value = !1)
+    }, [
+      a("div", {
+        class: "relative",
+        onMouseover: l[0] || (l[0] = (n) => e.value = !0)
+      }, [
+        e.value ? (r(), i("svg", {
+          key: 0,
+          class: h([{ "top-full": t.position === "bottom", "bottom-full rotate-180": t.position === "top" }, "absolute left-1/2 w-4 -translate-x-1/2 text-gray-200"]),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24"
+        }, [...l[2] || (l[2] = [
+          a("path", {
+            fill: "currentColor",
+            d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19"
+          }, null, -1)
+        ])], 2)) : y("", !0),
+        C(t.$slots, "default")
+      ], 32),
+      e.value ? (r(), i("div", {
+        key: 0,
+        class: h([[t.bodyClass, { "bottom-full mb-3": t.position === "top" }, { "top-full mt-3": t.position === "bottom" }], "absolute left-1/2 z-10 w-fit -translate-x-1/2"])
+      }, [
+        a("div", {
+          class: h([t.contentClass, "w-[200px] rounded-md border border-gray-200 bg-white p-3"])
+        }, [
+          C(t.$slots, "body")
+        ], 2)
+      ], 2)) : y("", !0)
+    ], 32));
+  }
+}), et = {
+  showTooltip: { type: Boolean, default: !1 },
+  value: { type: Number, default: 0 }
+}, tt = { class: "progress-container relative min-w-full py-4" }, ot = { class: "relative h-2 rounded-full bg-gray-200" }, St = /* @__PURE__ */ x({
+  __name: "Index",
+  props: et,
+  emits: ["update:value"],
+  setup(o, { emit: e }) {
+    const t = o, l = e, n = _(t.value), s = _(!1), u = _(!1), d = (f) => {
+      if (!s.value) return;
+      const g = document.querySelector(".progress-container");
+      if (!g) return;
+      const b = g.getBoundingClientRect();
+      let k;
+      f instanceof TouchEvent ? k = f.touches[0]?.clientX ?? 0 : k = f.clientX;
+      const I = k - b.left, A = Math.max(0, Math.min(100, I / b.width * 100));
+      n.value = A, l("update:value", A);
+    }, p = (f) => {
+      s.value = !0, u.value = !0, d(f);
+    }, m = () => {
+      s.value = !1, u.value = !1;
     };
+    return oe(() => {
+      window.addEventListener("mousemove", d), window.addEventListener("mouseup", m), window.addEventListener("mouseleave", m), window.addEventListener("touchmove", d, { passive: !1 }), window.addEventListener("touchend", m), window.addEventListener("touchcancel", m);
+    }), se(() => {
+      window.removeEventListener("mousemove", d), window.removeEventListener("mouseup", m), window.removeEventListener("mouseleave", m), window.removeEventListener("touchmove", d), window.removeEventListener("touchend", m), window.removeEventListener("touchcancel", m);
+    }), (f, g) => (r(), i("div", tt, [
+      a("div", ot, [
+        a("div", {
+          class: "bg-primary absolute h-2 rounded-full",
+          style: V({ width: n.value + "%" })
+        }, null, 4),
+        a("div", {
+          class: "absolute top-1/2 -ml-2 flex h-4 w-4 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow",
+          style: V({ left: n.value + "%" }),
+          unselectable: "on",
+          onselectstart: "return false;",
+          onMousedown: p,
+          onTouchstart: p
+        }, null, 36),
+        u.value && f.showTooltip ? (r(), i("div", {
+          key: 0,
+          class: "absolute -top-9 mx-auto w-10 -translate-x-1/2 rounded bg-gray-800 px-2 py-1 text-xs text-white",
+          style: V({ left: n.value + "%" })
+        }, [
+          K($(Math.round(n.value)) + "% ", 1),
+          g[0] || (g[0] = a("span", { class: "absolute -bottom-1 left-1/2 -ml-1 h-2 w-2 rotate-45 bg-gray-800" }, null, -1))
+        ], 4)) : y("", !0)
+      ])
+    ]));
+  }
+}), st = {
+  modelValue: { type: String, default: "" },
+  options: { type: Array, required: !0 },
+  variant: { type: String, default: "solid", options: ["outlined", "text", "ghost", "solid", "gray"] },
+  showFilter: { type: Boolean, default: !1 },
+  isOpen: { type: Boolean, default: !1 },
+  closeOnClickOutside: { type: Boolean, default: !0 }
+};
+function lt(o) {
+  return le() ? (ne(o), !0) : !1;
+}
+const J = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const nt = Object.prototype.toString, rt = (o) => nt.call(o) === "[object Object]", z = () => {
+}, at = /* @__PURE__ */ it();
+function it() {
+  var o, e;
+  return J && ((o = window?.navigator) == null ? void 0 : o.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((e = window?.navigator) == null ? void 0 : e.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
+}
+function D(o) {
+  return Array.isArray(o) ? o : [o];
+}
+function ut(o, e, t) {
+  return P(
+    o,
+    e,
+    {
+      ...t,
+      immediate: !0
+    }
+  );
+}
+const Y = J ? window : void 0;
+function B(o) {
+  var e;
+  const t = L(o);
+  return (e = t?.$el) != null ? e : t;
+}
+function N(...o) {
+  const e = [], t = () => {
+    e.forEach((d) => d()), e.length = 0;
+  }, l = (d, p, m, f) => (d.addEventListener(p, m, f), () => d.removeEventListener(p, m, f)), n = M(() => {
+    const d = D(L(o[0])).filter((p) => p != null);
+    return d.every((p) => typeof p != "string") ? d : void 0;
+  }), s = ut(
+    () => {
+      var d, p;
+      return [
+        (p = (d = n.value) == null ? void 0 : d.map((m) => B(m))) != null ? p : [Y].filter((m) => m != null),
+        D(L(n.value ? o[1] : o[0])),
+        D(re(n.value ? o[2] : o[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        L(n.value ? o[3] : o[2])
+      ];
+    },
+    ([d, p, m, f]) => {
+      if (t(), !d?.length || !p?.length || !m?.length)
+        return;
+      const g = rt(f) ? { ...f } : f;
+      e.push(
+        ...d.flatMap(
+          (b) => p.flatMap(
+            (k) => m.map((I) => l(b, k, I, g))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), u = () => {
+    s(), t();
+  };
+  return lt(t), u;
+}
+let Z = !1;
+function dt(o, e, t = {}) {
+  const { window: l = Y, ignore: n = [], capture: s = !0, detectIframe: u = !1, controls: d = !1 } = t;
+  if (!l)
+    return d ? { stop: z, cancel: z, trigger: z } : z;
+  if (at && !Z) {
+    Z = !0;
+    const c = { passive: !0 };
+    Array.from(l.document.body.children).forEach((v) => v.addEventListener("click", z, c)), l.document.documentElement.addEventListener("click", z, c);
   }
-}), S = { class: "w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white" }, B = ["onClick"], I = { class: "title text-gray-600" }, N = {
+  let p = !0;
+  const m = (c) => L(n).some((v) => {
+    if (typeof v == "string")
+      return Array.from(l.document.querySelectorAll(v)).some((w) => w === c.target || c.composedPath().includes(w));
+    {
+      const w = B(v);
+      return w && (c.target === w || c.composedPath().includes(w));
+    }
+  });
+  function f(c) {
+    const v = L(c);
+    return v && v.$.subTree.shapeFlag === 16;
+  }
+  function g(c, v) {
+    const w = L(c), q = w.$.subTree && w.$.subTree.children;
+    return q == null || !Array.isArray(q) ? !1 : q.some((X) => X.el === v.target || v.composedPath().includes(X.el));
+  }
+  const b = (c) => {
+    const v = B(o);
+    if (c.target != null && !(!(v instanceof Element) && f(o) && g(o, c)) && !(!v || v === c.target || c.composedPath().includes(v))) {
+      if ("detail" in c && c.detail === 0 && (p = !m(c)), !p) {
+        p = !0;
+        return;
+      }
+      e(c);
+    }
+  };
+  let k = !1;
+  const I = [
+    N(l, "click", (c) => {
+      k || (k = !0, setTimeout(() => {
+        k = !1;
+      }, 0), b(c));
+    }, { passive: !0, capture: s }),
+    N(l, "pointerdown", (c) => {
+      const v = B(o);
+      p = !m(c) && !!(v && !c.composedPath().includes(v));
+    }, { passive: !0 }),
+    u && N(l, "blur", (c) => {
+      setTimeout(() => {
+        var v;
+        const w = B(o);
+        ((v = l.document.activeElement) == null ? void 0 : v.tagName) === "IFRAME" && !w?.contains(l.document.activeElement) && e(c);
+      }, 0);
+    }, { passive: !0 })
+  ].filter(Boolean), A = () => I.forEach((c) => c());
+  return d ? {
+    stop: A,
+    cancel: () => {
+      p = !1;
+    },
+    trigger: (c) => {
+      p = !0, b(c), p = !1;
+    }
+  } : A;
+}
+const ct = {
   key: 0,
-  class: "p-3 text-gray-500"
-}, V = {
+  class: "absolute top-full z-10 mt-1 flex w-full list-none flex-col rounded border border-gray-200 bg-white shadow-md shadow-slate-500/10"
+}, pt = {
+  key: 0,
+  class: "border-b border-gray-200 p-2"
+}, ft = ["onClick"], Lt = /* @__PURE__ */ x({
+  __name: "Index",
+  props: st,
+  emits: ["update:modelValue", "update:isOpen"],
+  setup(o, { emit: e }) {
+    const t = o, l = e, n = _(t.modelValue), s = _(t.isOpen ?? !1), u = ae("target");
+    dt(u, () => t.closeOnClickOutside && (s.value = !1)), P(
+      () => t.isOpen,
+      (f) => {
+        f !== s.value && (s.value = f);
+      }
+    );
+    const d = (f) => {
+      n.value = f, l("update:modelValue", f), s.value = !1;
+    }, p = _(""), m = M(() => p.value ? t.options.filter((f) => f.toLowerCase().includes(p.value.toLowerCase())) : t.options);
+    return (f, g) => (r(), i("div", {
+      class: "relative",
+      ref_key: "target",
+      ref: u
+    }, [
+      S(O, {
+        "icon-class": s.value ? "rotate-180" : "",
+        icon: "chevron-down",
+        class: "w-full capitalize",
+        variant: f.variant,
+        label: n.value || "Select",
+        onClick: g[0] || (g[0] = (b) => s.value = !s.value)
+      }, null, 8, ["icon-class", "variant", "label"]),
+      s.value ? (r(), i("ul", ct, [
+        f.showFilter ? (r(), i("li", pt, [
+          Q(a("input", {
+            type: "text",
+            "onUpdate:modelValue": g[1] || (g[1] = (b) => p.value = b),
+            class: "focus:border-primary w-full rounded-sm border border-gray-200 px-2 py-1 focus:outline-none",
+            placeholder: "Search"
+          }, null, 512), [
+            [ie, p.value]
+          ])
+        ])) : y("", !0),
+        (r(!0), i(E, null, F(m.value, (b, k) => (r(), i("li", {
+          key: k,
+          class: h([b === n.value && "bg-primary/10", "hover:bg-primary/5 cursor-pointer px-4 py-2 text-left"]),
+          onClick: (I) => d(b)
+        }, $(b), 11, ft))), 128))
+      ])) : y("", !0)
+    ], 512));
+  }
+}), mt = {
+  direction: { type: String, default: "horizontal", options: ["horizontal", "vertical"] },
+  color: { type: String, default: "" },
+  label: { type: String, default: "" },
+  icon: { type: String, default: "" }
+}, vt = {
   key: 1,
-  class: "px-3 py-6 text-center text-gray-500"
-}, A = /* @__PURE__ */ g({
+  class: "absolute inset-0 m-auto flex h-fit w-fit shrink-0 items-center justify-center bg-white p-1"
+}, Et = /* @__PURE__ */ x({
   __name: "Index",
-  props: {
-    items: { type: Array, required: !0 }
-  },
-  setup(t) {
-    const e = v(null);
-    return (n, m) => {
-      const u = b("Icon");
-      return r(), o("div", S, [
-        t.items.length ? (r(!0), o(y, { key: 0 }, f(t.items, (a, s) => (r(), o("div", { key: s }, [
-          d("div", {
-            class: i([{ "bg-primary/5": e.value === s }, "hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100"]),
-            onClick: (j) => e.value = e.value === s ? null : s
-          }, [
-            d("span", I, c(a.title), 1),
-            _(u, {
-              icon: "chevron-down",
-              class: i([{ "rotate-180": e.value === s }, "icon text-[1.4rem] text-gray-400 duration-200"])
-            }, null, 8, ["class"])
-          ], 10, B),
-          e.value === s ? (r(), o("div", N, [
-            a.slot ? x(n.$slots, a.slot, { key: 0 }) : (r(), o(y, { key: 1 }, [
-              k(c(a.content), 1)
-            ], 64))
-          ])) : l("", !0)
-        ]))), 128)) : (r(), o("div", V, "No items to show"))
-      ]);
-    };
+  props: mt,
+  setup(o) {
+    return (e, t) => (r(), i("div", {
+      class: h([e.direction === "horizontal" ? "h-[1px] w-full" : e.direction === "vertical" ? "h-full w-[1px]" : "", "relative bg-gray-200"]),
+      style: V({ backgroundColor: e.color || "var(--color-primary)" })
+    }, [
+      e.direction === "horizontal" ? (r(), i(E, { key: 0 }, [
+        e.label && !e.icon ? (r(), i("span", {
+          key: 0,
+          class: "absolute inset-0 m-auto flex w-fit items-center justify-center rounded-sm border border-gray-100 bg-white px-1 py-2 text-sm",
+          style: V({ color: e.color, borderColor: e.color })
+        }, "Test label", 4)) : y("", !0),
+        e.icon && !e.label ? (r(), i("span", vt, [
+          S(H, {
+            icon: e.icon,
+            class: "size-6",
+            style: V({ color: e.color || "var(--color-primary)" })
+          }, null, 8, ["icon", "style"])
+        ])) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 6));
+  }
+}), ht = {
+  content: { type: String, default: "" },
+  position: { type: String, default: "bottom", options: ["top", "bottom", "left", "right"] },
+  bodyClass: { type: String, default: "" }
+}, yt = { key: 0 }, Mt = /* @__PURE__ */ x({
+  __name: "Index",
+  props: ht,
+  setup(o) {
+    const e = _(!1);
+    return (t, l) => (r(), i("div", {
+      class: "relative inline-block",
+      onMouseenter: l[0] || (l[0] = (n) => e.value = !0),
+      onMouseleave: l[1] || (l[1] = (n) => e.value = !1)
+    }, [
+      C(t.$slots, "default"),
+      e.value ? (r(), i("div", {
+        key: 0,
+        class: h([
+          "absolute z-10 w-max rounded-md bg-white px-3 py-2 text-sm text-primary border shadow-xl transition-opacity duration-200",
+          t.position === "top" && "bottom-full left-1/2 mb-2 -translate-x-1/2",
+          t.position === "bottom" && "top-full left-1/2 mt-2 -translate-x-1/2",
+          t.position === "left" && "top-1/2 right-full mr-2 -translate-y-1/2",
+          t.position === "right" && "top-1/2 left-full ml-2 -translate-y-1/2",
+          t.bodyClass
+        ])
+      }, [
+        t.content ? C(t.$slots, "body", { key: 1 }) : (r(), i("span", yt, $(t.content), 1))
+      ], 2)) : y("", !0)
+    ], 32));
   }
-}), q = (t) => ({
+}), It = (o) => ({
   install() {
-    if (!t || !t.colors) {
+    if (!o || !o.colors) {
       console.warn("No config provided for the theme settings");
       return;
     }
-    $(t.colors);
+    gt(o.colors);
   }
-}), $ = (t) => {
+}), gt = (o) => {
   const e = document.documentElement;
-  for (const n in t)
-    t[n] && e.style.setProperty(`--ui-color-${n}`, t[n]);
+  for (const t in o)
+    o[t] && e.style.setProperty(`--ui-color-${t}`, o[t]);
 };
 export {
-  A as Accordion,
-  P as Button,
-  q as config
+  wt as Accordion,
+  O as Button,
+  xt as Checkbox,
+  kt as Drawer,
+  $t as Input,
+  _t as Modal,
+  Ct as Popover,
+  St as RangeSlider,
+  Lt as Select,
+  Et as Separator,
+  Mt as Tooltip,
+  It as config
 };
 //# sourceMappingURL=index.js.map