veloce-vue 0.11.0 → 0.12.0

package/index.js

@@ -1,5 +1,41 @@
-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 h, ref as b, resolveComponent as j, createElementBlock as n, openBlock as s, Fragment as _, renderList as I, createElementVNode as l, createCommentVNode as p, normalizeClass as u, createVNode as x, toDisplayString as y, renderSlot as g, createTextVNode as A, computed as k, createBlock as L, resolveDynamicComponent as P, mergeModels as B, useModel as E, watch as V, withDirectives as O, vModelDynamic as F, onMounted as X, onUnmounted as U, normalizeStyle as $, vModelText as Z } from "vue";
+const R = { class: "w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white" }, K = ["onClick"], Q = { class: "title text-gray-600" }, G = {
+  key: 0,
+  class: "p-3 text-gray-500"
+}, H = {
+  key: 1,
+  class: "px-3 py-6 text-center text-gray-500"
+}, Je = /* @__PURE__ */ h({
+  __name: "Index",
+  props: {
+    items: { type: Array, required: !0 }
+  },
+  setup(r) {
+    const e = b(null);
+    return (t, d) => {
+      const a = j("Icon");
+      return s(), n("div", R, [
+        r.items.length ? (s(!0), n(_, { key: 0 }, I(r.items, (o, i) => (s(), n("div", { key: i }, [
+          l("div", {
+            class: u([{ "bg-primary/5": e.value === i }, "hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100"]),
+            onClick: (c) => e.value = e.value === i ? null : i
+          }, [
+            l("span", Q, y(o.title), 1),
+            x(a, {
+              icon: "chevron-down",
+              class: u([{ "rotate-180": e.value === i }, "icon text-[1.4rem] text-gray-400 duration-200"])
+            }, null, 8, ["class"])
+          ], 10, K),
+          e.value === i ? (s(), n("div", G, [
+            o.slot ? g(t.$slots, o.slot, { key: 0 }) : (s(), n(_, { key: 1 }, [
+              A(y(o.content), 1)
+            ], 64))
+          ])) : p("", !0)
+        ]))), 128)) : (s(), n("div", H, "No items to show"))
+      ]);
+    };
+  }
+}), J = {
   label: { type: String, default: "" },
   loading: { type: Boolean, default: !1 },
   disabled: { type: Boolean, default: !1 },
@@ -16,11 +52,11 @@ const w = {
     options: ["left", "right"]
   },
   rounded: { type: Boolean, default: !1 }
-}, C = ["disabled"], P = /* @__PURE__ */ g({
+}, W = ["disabled"], C = /* @__PURE__ */ h({
   __name: "Index",
-  props: w,
-  setup(t) {
-    const e = t, n = h(() => {
+  props: J,
+  setup(r) {
+    const e = r, t = k(() => {
       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";
@@ -32,89 +68,599 @@ const w = {
           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 (d, a) => {
+      const o = j("Icon");
+      return s(), n("button", {
         type: "button",
         disabled: e.disabled || e.loading,
-        class: i([
-          n.value,
+        class: u([
+          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"])
+        l("div", {
+          class: u([{ "justify-center": !e.icon }, "flex w-full items-center justify-between gap-2"])
         }, [
-          e.label ? (r(), o("span", {
+          e.label ? (s(), n("span", {
             key: 0,
-            class: i({ "order-2": e.iconPosition === "left" })
-          }, c(e.label), 3)) : l("", !0),
-          e.icon && !e.loading ? (r(), p(a, {
+            class: u({ "order-2": e.iconPosition === "left" })
+          }, y(e.label), 3)) : p("", !0),
+          e.icon && !e.loading ? (s(), L(o, {
             key: 1,
             icon: e.icon,
-            class: i(e.iconClass)
-          }, null, 8, ["icon", "class"])) : l("", !0)
+            class: u([e.iconClass, "duration-200"])
+          }, null, 8, ["icon", "class"])) : p("", !0)
         ], 2),
-        e.loading ? (r(), p(a, {
+        e.loading ? (s(), L(o, {
           key: 0,
           icon: "loading"
-        })) : l("", !0)
-      ], 10, C);
+        })) : p("", !0)
+      ], 10, W);
     };
   }
-}), 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 = {
-  key: 0,
-  class: "p-3 text-gray-500"
-}, V = {
-  key: 1,
-  class: "px-3 py-6 text-center text-gray-500"
-}, A = /* @__PURE__ */ g({
-  __name: "Index",
+}), Y = {
+  label: { type: String, default: "" },
+  labelClass: { type: String, default: "" },
+  checkboxClass: { type: String, default: "" }
+}, S = (r, e) => {
+  const t = r.__vccOpts || r;
+  for (const [d, a] of e)
+    t[d] = a;
+  return t;
+}, ee = {}, te = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function oe(r, e) {
+  return s(), n("svg", te, [...e[0] || (e[0] = [
+    l("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 se = /* @__PURE__ */ S(ee, [["render", oe]]), le = {}, re = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function ne(r, e) {
+  return s(), n("svg", re, [...e[0] || (e[0] = [
+    l("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 ae = /* @__PURE__ */ S(le, [["render", ne]]), ie = {}, de = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function ue(r, e) {
+  return s(), n("svg", de, [...e[0] || (e[0] = [
+    l("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),
+    l("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"
+    }, [
+      l("animateTransform", {
+        type: "rotate",
+        attributeName: "transform",
+        dur: "0.75s",
+        repeatCount: "indefinite",
+        values: "0 12 12;360 12 12"
+      })
+    ], -1)
+  ])]);
+}
+const ce = /* @__PURE__ */ S(ie, [["render", ue]]), pe = {}, fe = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "-5 -8 24 24"
+};
+function me(r, e) {
+  return s(), n("svg", fe, [...e[0] || (e[0] = [
+    l("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__ */ S(pe, [["render", me]]), he = {}, ye = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function be(r, e) {
+  return s(), n("svg", ye, [...e[0] || (e[0] = [
+    l("g", { fill: "none" }, [
+      l("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"
+      }),
+      l("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 ge = /* @__PURE__ */ S(he, [["render", be]]), T = {
+  check: se,
+  close: ae,
+  loading: ce,
+  "chevron-down": ve,
+  alert: ge
+}, D = /* @__PURE__ */ h({
+  __name: "index",
   props: {
-    items: { type: Array, required: !0 }
+    icon: {},
+    fallbackIcon: {},
+    class: {},
+    size: {}
   },
-  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"))
-      ]);
+  setup(r) {
+    const e = r, t = k(() => e.size ?? 24), d = k(() => {
+      const a = e.icon, o = e.fallbackIcon ? e.fallbackIcon : "alert";
+      return T[a] ?? T[o];
+    });
+    return (a, o) => (s(), L(P(d.value), {
+      class: u(["shrink-0", e.class]),
+      width: t.value,
+      height: t.value
+    }, null, 8, ["class", "width", "height"]));
+  }
+}), We = /* @__PURE__ */ h({
+  __name: "Index",
+  props: /* @__PURE__ */ B(Y, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const e = E(r, "modelValue");
+    return (t, d) => (s(), n("div", {
+      class: "flex w-fit cursor-pointer gap-2 select-none",
+      onClick: d[0] || (d[0] = (a) => e.value = !e.value)
+    }, [
+      l("div", {
+        class: u([[{ "bg-primary": e.value }, t.checkboxClass], "border-primary m-0 size-6 rounded-sm border-2 duration-200"])
+      }, [
+        e.value ? (s(), L(D, {
+          key: 0,
+          icon: "check",
+          class: u([{ "text-white": e.value }, "size-5"])
+        }, null, 8, ["class"])) : p("", !0)
+      ], 2),
+      l("div", {
+        class: u(t.labelClass)
+      }, y(t.label), 3)
+    ]));
+  }
+}), we = {
+  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 }
+}, xe = { class: "flex justify-between border-b border-gray-200 p-2" }, $e = { class: "font-semibold" }, _e = { class: "text-sm text-gray-500" }, ke = { class: "ml-auto" }, Ce = { class: "size-full overflow-auto p-2" }, Se = {
+  key: 0,
+  class: "border-t border-gray-200 p-2"
+}, Ye = /* @__PURE__ */ h({
+  __name: "Index",
+  props: /* @__PURE__ */ B(we, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const e = r, t = E(r, "modelValue"), d = k(() => {
+      let o = "";
+      switch (e.direction) {
+        case "left":
+          o = t.value ? "fixed top-0 left-0 bottom-0" : "fixed top-0 -left-full bottom-0";
+          break;
+        case "bottom":
+          o = t.value ? "fixed left-0 bottom-0 right-0" : "fixed left-0 right-0 -bottom-full";
+          break;
+        case "right":
+          o = t.value ? "fixed top-0 right-0 bottom-0" : "fixed top-0 -right-full bottom-0";
+          break;
+        default:
+          alert("Invalid direction");
+      }
+      return o;
+    }), a = k(() => {
+      let o = "";
+      switch (e.direction) {
+        case "left":
+          o = "w-full max-w-[360px]";
+          break;
+        case "bottom":
+          o = "w-full h-full max-h-[90dvh]";
+          break;
+        case "right":
+          o = "w-full max-w-[360px]";
+          break;
+      }
+      return o;
+    });
+    return V(t, () => {
+      t.value ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
+    }), (o, i) => (s(), n(_, null, [
+      l("div", {
+        onClick: i[0] || (i[0] = (c) => t.value = !t.value)
+      }, [
+        g(o.$slots, "default")
+      ]),
+      l("div", {
+        class: u([[d.value, a.value], "z-50 flex flex-col justify-between bg-white duration-300"])
+      }, [
+        l("div", xe, [
+          l("div", null, [
+            l("h4", $e, y(o.title), 1),
+            l("p", _e, y(o.description), 1)
+          ]),
+          l("div", ke, [
+            x(C, {
+              icon: "close",
+              class: "!p-1",
+              circle: "",
+              variant: "text",
+              onClick: i[1] || (i[1] = (c) => t.value = !1)
+            })
+          ])
+        ]),
+        l("div", Ce, [
+          g(o.$slots, "content")
+        ]),
+        o.showFooter ? (s(), n("div", Se, [
+          g(o.$slots, "footer")
+        ])) : p("", !0)
+      ], 2),
+      l("div", {
+        class: u([t.value ? "opacity-100" : "pointer-events-none", "fixed inset-0 z-[49] bg-black/40 opacity-0 duration-200"]),
+        onClick: i[2] || (i[2] = (c) => t.value = !1)
+      }, null, 2)
+    ], 64));
+  }
+}), Le = {
+  icon: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  helpText: { type: String, default: "" },
+  type: { type: String, default: "text", options: ["text", "password"] }
+}, Me = ["type"], ze = {
+  key: 0,
+  class: "ml-1 pt-1 text-xs text-gray-400"
+}, et = /* @__PURE__ */ h({
+  __name: "Index",
+  props: /* @__PURE__ */ B(Le, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const e = E(r, "modelValue");
+    return (t, d) => (s(), n("div", {
+      class: u([{ "mb-6": t.helpText }, "relative h-[42px]"])
+    }, [
+      O(l("input", {
+        type: t.type,
+        "onUpdate:modelValue": d[0] || (d[0] = (a) => e.value = a),
+        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, Me), [
+        [F, e.value]
+      ]),
+      l("div", {
+        class: u([e.value ? "-top-2.5 text-sm text-black" : "top-[9px]", "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"])
+      }, y(t.placeholder), 3),
+      t.helpText ? (s(), n("div", ze, y(t.helpText), 1)) : p("", !0)
+    ], 2));
+  }
+}), Ve = {
+  show: { type: Boolean, default: !1 }
+}, Ie = {
+  key: 0,
+  class: "fixed top-0 left-0 z-20 flex h-screen w-screen items-center justify-center backdrop-blur-[2px]"
+}, Be = {
+  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"
+}, Ee = { class: "flex items-center gap-4 border-b border-gray-200 px-4 py-2" }, qe = { class: "max-h-[calc(100dvh-100px)] flex-1 overflow-auto px-4 py-2 sm:max-h-[75vh]" }, Te = { class: "flex items-center justify-end gap-4 border-t border-gray-200 px-4 py-2" }, tt = /* @__PURE__ */ h({
+  __name: "Index",
+  props: Ve,
+  emits: ["update:show"],
+  setup(r, { emit: e }) {
+    const t = r, d = e, a = b(t.show ?? !1);
+    return V(
+      () => t.show,
+      (o) => {
+        o !== a.value && (a.value = o);
+      }
+    ), V(a, (o) => {
+      d("update:show", o), document.body.classList.toggle("overflow-hidden", o);
+    }), (o, i) => (s(), n(_, null, [
+      l("div", {
+        class: "w-full",
+        onClick: i[0] || (i[0] = (c) => a.value = !0)
+      }, [
+        g(o.$slots, "default")
+      ]),
+      a.value ? (s(), n("div", Ie, [
+        l("div", Be, [
+          l("div", Ee, [
+            i[4] || (i[4] = l("h3", { class: "text-primary flex-1 text-xl font-medium" }, "Modal title", -1)),
+            x(C, {
+              icon: "close",
+              class: "!p-1",
+              variant: "ghost",
+              circle: "",
+              onClick: i[1] || (i[1] = (c) => a.value = !1)
+            })
+          ]),
+          l("div", qe, [
+            (s(), n(_, null, I(15, (c) => l("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))
+          ]),
+          l("div", Te, [
+            x(C, {
+              class: "!px-3 !py-1",
+              variant: "ghost",
+              label: "Close",
+              onClick: i[2] || (i[2] = (c) => a.value = !1)
+            }),
+            x(C, {
+              class: "!px-3 !py-1",
+              label: "Save",
+              onClick: i[3] || (i[3] = (c) => a.value = !1)
+            })
+          ])
+        ])
+      ])) : p("", !0)
+    ], 64));
+  }
+}), je = {
+  position: { type: String, default: "bottom", options: ["top", "bottom"] },
+  bodyClass: { type: String, default: "" },
+  contentClass: { type: String, default: "" }
+}, ot = /* @__PURE__ */ h({
+  __name: "Index",
+  props: je,
+  setup(r) {
+    const e = b(!0);
+    return (t, d) => (s(), n("div", {
+      class: "relative inline-block",
+      onMouseleave: d[1] || (d[1] = (a) => e.value = !1)
+    }, [
+      l("div", {
+        class: "relative",
+        onMouseover: d[0] || (d[0] = (a) => e.value = !0)
+      }, [
+        e.value ? (s(), n("svg", {
+          key: 0,
+          class: u([{ "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"
+        }, [...d[2] || (d[2] = [
+          l("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)) : p("", !0),
+        g(t.$slots, "default")
+      ], 32),
+      e.value ? (s(), n("div", {
+        key: 0,
+        class: u([[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"])
+      }, [
+        l("div", {
+          class: u([t.contentClass, "w-[200px] rounded-md border border-gray-200 bg-white p-3"])
+        }, [
+          g(t.$slots, "body")
+        ], 2)
+      ], 2)) : p("", !0)
+    ], 32));
+  }
+}), Ae = {
+  showTooltip: { type: Boolean, default: !1 },
+  value: { type: Number, default: 0 }
+}, Oe = { class: "progress-container relative min-w-full py-4" }, De = { class: "relative h-2 rounded-full bg-gray-200" }, st = /* @__PURE__ */ h({
+  __name: "Index",
+  props: Ae,
+  emits: ["update:value"],
+  setup(r, { emit: e }) {
+    const t = r, d = e, a = b(t.value), o = b(!1), i = b(!1), c = (m) => {
+      if (!o.value) return;
+      const w = document.querySelector(".progress-container");
+      if (!w) return;
+      const M = w.getBoundingClientRect();
+      let z;
+      m instanceof TouchEvent ? z = m.touches[0]?.clientX ?? 0 : z = m.clientX;
+      const N = z - M.left, q = Math.max(0, Math.min(100, N / M.width * 100));
+      a.value = q, d("update:value", q);
+    }, f = (m) => {
+      o.value = !0, i.value = !0, c(m);
+    }, v = () => {
+      o.value = !1, i.value = !1;
     };
+    return X(() => {
+      window.addEventListener("mousemove", c), window.addEventListener("mouseup", v), window.addEventListener("mouseleave", v), window.addEventListener("touchmove", c, { passive: !1 }), window.addEventListener("touchend", v), window.addEventListener("touchcancel", v);
+    }), U(() => {
+      window.removeEventListener("mousemove", c), window.removeEventListener("mouseup", v), window.removeEventListener("mouseleave", v), window.removeEventListener("touchmove", c), window.removeEventListener("touchend", v), window.removeEventListener("touchcancel", v);
+    }), (m, w) => (s(), n("div", Oe, [
+      l("div", De, [
+        l("div", {
+          class: "bg-primary absolute h-2 rounded-full",
+          style: $({ width: a.value + "%" })
+        }, null, 4),
+        l("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: $({ left: a.value + "%" }),
+          unselectable: "on",
+          onselectstart: "return false;",
+          onMousedown: f,
+          onTouchstart: f
+        }, null, 36),
+        i.value && m.showTooltip ? (s(), n("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: $({ left: a.value + "%" })
+        }, [
+          A(y(Math.round(a.value)) + "% ", 1),
+          w[0] || (w[0] = l("span", { class: "absolute -bottom-1 left-1/2 -ml-1 h-2 w-2 rotate-45 bg-gray-800" }, null, -1))
+        ], 4)) : p("", !0)
+      ])
+    ]));
+  }
+}), Ne = {
+  modelValue: { type: String, default: "" },
+  options: { type: Array, required: !0 },
+  variant: { type: String, default: "solid", options: ["outlined", "text", "ghost", "solid"] },
+  showFilter: { type: Boolean, default: !1 },
+  isOpen: { type: Boolean, default: !1 }
+}, Pe = { class: "relative" }, Fe = {
+  key: 0,
+  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"
+}, Xe = {
+  key: 0,
+  class: "border-b border-gray-200 p-2"
+}, Ue = ["onClick"], lt = /* @__PURE__ */ h({
+  __name: "Index",
+  props: Ne,
+  emits: ["update:modelValue", "update:isOpen"],
+  setup(r, { emit: e }) {
+    const t = r, d = e, a = b(t.modelValue), o = (f) => {
+      a.value = f, d("update:modelValue", f), d("update:isOpen", !1);
+    }, i = b(""), c = k(() => i.value ? t.options.filter((f) => f.toLowerCase().includes(i.value.toLowerCase())) : t.options);
+    return (f, v) => (s(), n("div", Pe, [
+      x(C, {
+        "icon-class": f.isOpen ? "rotate-180" : "",
+        icon: "chevron-down",
+        class: "w-full",
+        variant: f.variant,
+        label: a.value || "Select",
+        onClick: v[0] || (v[0] = (m) => f.isOpen = !f.isOpen)
+      }, null, 8, ["icon-class", "variant", "label"]),
+      f.isOpen ? (s(), n("ul", Fe, [
+        f.showFilter ? (s(), n("li", Xe, [
+          O(l("input", {
+            type: "text",
+            "onUpdate:modelValue": v[1] || (v[1] = (m) => i.value = m),
+            class: "focus:border-primary w-full rounded-sm border border-gray-200 px-2 py-1 focus:outline-none",
+            placeholder: "Search"
+          }, null, 512), [
+            [Z, i.value]
+          ])
+        ])) : p("", !0),
+        (s(!0), n(_, null, I(c.value, (m, w) => (s(), n("li", {
+          key: w,
+          class: u([m === a.value && "bg-primary/10", "hover:bg-primary/5 cursor-pointer px-4 py-2"]),
+          onClick: (M) => o(m)
+        }, y(m), 11, Ue))), 128))
+      ])) : p("", !0)
+    ]));
+  }
+}), Ze = {
+  direction: { type: String, default: "horizontal", options: ["horizontal", "vertical"] },
+  color: { type: String, default: "#16476A" },
+  label: { type: String, default: "" },
+  icon: { type: String, default: "" }
+}, Re = {
+  key: 1,
+  class: "absolute inset-0 m-auto flex h-fit w-fit shrink-0 items-center justify-center bg-white p-1"
+}, rt = /* @__PURE__ */ h({
+  __name: "Index",
+  props: Ze,
+  setup(r) {
+    return (e, t) => (s(), n("div", {
+      class: u([e.direction === "horizontal" ? "h-[1px] w-full" : e.direction === "vertical" ? "h-full w-[1px]" : "", "relative bg-gray-200"]),
+      style: $({ backgroundColor: e.color })
+    }, [
+      e.direction === "horizontal" && e.label && !e.icon ? (s(), n("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: $({ color: e.color, borderColor: e.color })
+      }, "Test label", 4)) : p("", !0),
+      e.direction === "horizontal" && !e.label && e.icon ? (s(), n("span", Re, [
+        x(D, {
+          icon: e.icon,
+          class: "size-6",
+          style: $({ color: e.color })
+        }, null, 8, ["icon", "style"])
+      ])) : p("", !0)
+    ], 6));
+  }
+}), Ke = {
+  content: { type: String, default: "" },
+  position: { type: String, default: "bottom", options: ["top", "bottom", "left", "right"] },
+  bodyClass: { type: String, default: "" }
+}, Qe = { key: 0 }, nt = /* @__PURE__ */ h({
+  __name: "Index",
+  props: Ke,
+  setup(r) {
+    const e = b(!1);
+    return (t, d) => (s(), n("div", {
+      class: "relative inline-block",
+      onMouseenter: d[0] || (d[0] = (a) => e.value = !0),
+      onMouseleave: d[1] || (d[1] = (a) => e.value = !1)
+    }, [
+      g(t.$slots, "default"),
+      e.value ? (s(), n("div", {
+        key: 0,
+        class: u([
+          "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 ? g(t.$slots, "body", { key: 1 }) : (s(), n("span", Qe, y(t.content), 1))
+      ], 2)) : p("", !0)
+    ], 32));
   }
-}), q = (t) => ({
+}), at = (r) => ({
   install() {
-    if (!t || !t.colors) {
+    if (!r || !r.colors) {
       console.warn("No config provided for the theme settings");
       return;
     }
-    $(t.colors);
+    Ge(r.colors);
   }
-}), $ = (t) => {
+}), Ge = (r) => {
   const e = document.documentElement;
-  for (const n in t)
-    t[n] && e.style.setProperty(`--ui-color-${n}`, t[n]);
+  for (const t in r)
+    r[t] && e.style.setProperty(`--ui-color-${t}`, r[t]);
 };
 export {
-  A as Accordion,
-  P as Button,
-  q as config
+  Je as Accordion,
+  C as Button,
+  We as Checkbox,
+  Ye as Drawer,
+  et as Input,
+  tt as Modal,
+  ot as Popover,
+  st as RangeSlider,
+  lt as Select,
+  rt as Separator,
+  nt as Tooltip,
+  at as config
 };
 //# sourceMappingURL=index.js.map