@hotelinking/ui 1.5.0 → 1.6.0

package/dist/ui.es.js

@@ -1,11 +1,1168 @@
-import n from "./ui.es2.js";
-const t = n, c = {
+import { openBlock as b, createBlock as L, resolveDynamicComponent as we, normalizeClass as O, createElementBlock as S, createVNode as E, renderSlot as ie, ref as w, createElementVNode as g, cloneVNode as Se, h as ke, Fragment as ue, inject as se, provide as ce, onMounted as de, watchEffect as R, nextTick as A, computed as D, defineComponent as B, onUnmounted as Ie, unref as $, withCtx as N, createTextVNode as G, toDisplayString as k, Transition as Ee, renderList as $e, createCommentVNode as T, withDirectives as P, vModelDynamic as De, vShow as j, withModifiers as _ } from "vue";
+const Me = { name: "uiIcon" }, M = /* @__PURE__ */ Object.assign(Me, {
+  props: {
+    /**
+     * COMPONENTE del icono
+     */
+    icon: { type: Function, required: !0 },
+    /**
+     * Tamaño
+     */
+    size: { type: String, default: "normal" },
+    /**
+     * Color
+     */
+    color: { type: String, default: "primary" }
+  },
+  setup(e) {
+    return (t, r) => (b(), L(we(e.icon), {
+      class: O({
+        "h-4 w-4": e.size === "normal",
+        "h-6 w-6": e.size === "big",
+        "h-12 w-12": e.size === "huge",
+        "h-20 w-20": e.size === "massive",
+        "text-indigo-600": e.color === "primary",
+        "text-cyan-300": e.color === "secondary",
+        "text-red-400": e.color === "red",
+        "text-yellow-400": e.color === "yellow",
+        "text-green-400": e.color === "green",
+        "text-white": e.color === "white",
+        "text-gray-300": e.color === "gray",
+        "text-black": e.color === "black"
+      })
+    }, null, 8, ["class"]));
+  }
+}), Oe = ["disabled"], Fe = {
+  name: "uiButton"
+}, Pe = /* @__PURE__ */ Object.assign(Fe, {
+  props: {
+    /**
+     * Color del botón
+     */
+    color: {
+      type: String,
+      default: "primary"
+    },
+    /**
+     * Tamaño del botón
+     */
+    size: {
+      type: String,
+      default: "normal"
+    },
+    /**
+     * Icono del botón (acepta directamente el componente del icono)
+     */
+    icon: {
+      type: Function,
+      default: () => {
+      }
+    },
+    /**
+     * Estado del botón
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (t, r) => (b(), S("button", {
+      disabled: e.disabled,
+      class: O([{
+        "bg-indigo-600 hover:bg-indigo-800": e.color === "primary",
+        "bg-cyan-300 hover:bg-cyan-500": e.color === "secondary",
+        "bg-red-400 hover:bg-red-600": e.color === "red",
+        "bg-yellow-400 hover:bg-yellow-600": e.color === "yellow",
+        "bg-green-400 hover:bg-green-600": e.color === "green",
+        "px-4 py-2 text-sm rounded-md": e.size === "normal",
+        "px-2.5 py-1.5 text-xs rounded leading-none": e.size === "small",
+        "px-6 py-3 text-base rounded-md": e.size === "large"
+      }, "inline-flex items-center border border-transparent font-medium shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-25"]),
+      type: "button"
+    }, [
+      E(M, {
+        icon: e.icon,
+        color: "white",
+        class: "-ml-0.5 mr-2"
+      }, null, 8, ["icon"]),
+      ie(t.$slots, "default")
+    ], 10, Oe));
+  }
+}), Te = { class: "relative flex items-start" }, Ae = { class: "flex items-center h-5" }, je = ["checked", "value", "disabled"], Ne = { class: "ml-3 text-sm" }, Ce = { class: "text-gray-500" }, Re = {
+  name: "uiCheckbox"
+}, Le = /* @__PURE__ */ Object.assign(Re, {
+  props: {
+    /**
+     * Checkbox desactivado
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Valor del Checkbox
+     */
+    value: {
+      type: String
+    },
+    /**
+     * Checkbox seleccionado
+     */
+    check: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["checkboxChanged"],
+  setup(e, { emit: t }) {
+    const r = e, l = w(r.check), n = () => {
+      r.disabled || (l.value = !l.value, t("checkboxChanged", {
+        checked: l.value,
+        value: r.value
+      }));
+    };
+    return (a, o) => (b(), S("div", Te, [
+      g("div", Ae, [
+        g("input", {
+          checked: e.check,
+          value: e.value,
+          disabled: e.disabled,
+          class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded disabled:opacity-25",
+          type: "checkbox",
+          onChange: o[0] || (o[0] = (u) => n())
+        }, null, 40, je)
+      ]),
+      g("div", Ne, [
+        g("span", Ce, [
+          ie(a.$slots, "default")
+        ])
+      ])
+    ]));
+  }
+});
+function z(e, t, ...r) {
+  if (e in t) {
+    let n = t[e];
+    return typeof n == "function" ? n(...r) : n;
+  }
+  let l = new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map((n) => `"${n}"`).join(", ")}.`);
+  throw Error.captureStackTrace && Error.captureStackTrace(l, z), l;
+}
+var K = ((e) => (e[e.None = 0] = "None", e[e.RenderStrategy = 1] = "RenderStrategy", e[e.Static = 2] = "Static", e))(K || {}), Be = ((e) => (e[e.Unmount = 0] = "Unmount", e[e.Hidden = 1] = "Hidden", e))(Be || {});
+function U({ visible: e = !0, features: t = 0, ourProps: r, theirProps: l, ...n }) {
+  var a;
+  let o = ve(l, r), u = Object.assign(n, { props: o });
+  if (e || t & 2 && o.static)
+    return V(u);
+  if (t & 1) {
+    let d = (a = o.unmount) == null || a ? 0 : 1;
+    return z(d, { [0]() {
+      return null;
+    }, [1]() {
+      return V({ ...n, props: { ...o, hidden: !0, style: { display: "none" } } });
+    } });
+  }
+  return V(u);
+}
+function V({ props: e, attrs: t, slots: r, slot: l, name: n }) {
+  var a, o;
+  let { as: u, ...d } = ze(e, ["unmount", "static"]), c = (a = r.default) == null ? void 0 : a.call(r, l), i = {};
+  if (l) {
+    let p = !1, v = [];
+    for (let [m, f] of Object.entries(l))
+      typeof f == "boolean" && (p = !0), f === !0 && v.push(m);
+    p && (i["data-headlessui-state"] = v.join(" "));
+  }
+  if (u === "template") {
+    if (c = fe(c ?? []), Object.keys(d).length > 0 || Object.keys(t).length > 0) {
+      let [p, ...v] = c ?? [];
+      if (!Ue(p) || v.length > 0)
+        throw new Error(['Passing props on "template"!', "", `The current component <${n} /> is rendering a "template".`, "However we need to passthrough the following props:", Object.keys(d).concat(Object.keys(t)).map((s) => s.trim()).filter((s, y, F) => F.indexOf(s) === y).sort((s, y) => s.localeCompare(y)).map((s) => `  - ${s}`).join(`
+`), "", "You can apply a few solutions:", ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".', "Render a single element as the child so that we can forward the props onto that element."].map((s) => `  - ${s}`).join(`
+`)].join(`
+`));
+      let m = ve((o = p.props) != null ? o : {}, d), f = Se(p, m);
+      for (let s in m)
+        s.startsWith("on") && (f.props || (f.props = {}), f.props[s] = m[s]);
+      return f;
+    }
+    return Array.isArray(c) && c.length === 1 ? c[0] : c;
+  }
+  return ke(u, Object.assign({}, d, i), { default: () => c });
+}
+function fe(e) {
+  return e.flatMap((t) => t.type === ue ? fe(t.children) : [t]);
+}
+function ve(...e) {
+  if (e.length === 0)
+    return {};
+  if (e.length === 1)
+    return e[0];
+  let t = {}, r = {};
+  for (let l of e)
+    for (let n in l)
+      n.startsWith("on") && typeof l[n] == "function" ? (r[n] != null || (r[n] = []), r[n].push(l[n])) : t[n] = l[n];
+  if (t.disabled || t["aria-disabled"])
+    return Object.assign(t, Object.fromEntries(Object.keys(r).map((l) => [l, void 0])));
+  for (let l in r)
+    Object.assign(t, { [l](n, ...a) {
+      let o = r[l];
+      for (let u of o) {
+        if (n instanceof Event && n.defaultPrevented)
+          return;
+        u(n, ...a);
+      }
+    } });
+  return t;
+}
+function ze(e, t = []) {
+  let r = Object.assign({}, e);
+  for (let l of t)
+    l in r && delete r[l];
+  return r;
+}
+function Ue(e) {
+  return e == null ? !1 : typeof e.type == "string" || typeof e.type == "object" || typeof e.type == "function";
+}
+let He = 0;
+function Ve() {
+  return ++He;
+}
+function X() {
+  return Ve();
+}
+var x = ((e) => (e.Space = " ", e.Enter = "Enter", e.Escape = "Escape", e.Backspace = "Backspace", e.Delete = "Delete", e.ArrowLeft = "ArrowLeft", e.ArrowUp = "ArrowUp", e.ArrowRight = "ArrowRight", e.ArrowDown = "ArrowDown", e.Home = "Home", e.End = "End", e.PageUp = "PageUp", e.PageDown = "PageDown", e.Tab = "Tab", e))(x || {});
+function Ke(e) {
+  throw new Error("Unexpected object: " + e);
+}
+var I = ((e) => (e[e.First = 0] = "First", e[e.Previous = 1] = "Previous", e[e.Next = 2] = "Next", e[e.Last = 3] = "Last", e[e.Specific = 4] = "Specific", e[e.Nothing = 5] = "Nothing", e))(I || {});
+function We(e, t) {
+  let r = t.resolveItems();
+  if (r.length <= 0)
+    return null;
+  let l = t.resolveActiveIndex(), n = l ?? -1, a = (() => {
+    switch (e.focus) {
+      case 0:
+        return r.findIndex((o) => !t.resolveDisabled(o));
+      case 1: {
+        let o = r.slice().reverse().findIndex((u, d, c) => n !== -1 && c.length - d - 1 >= n ? !1 : !t.resolveDisabled(u));
+        return o === -1 ? o : r.length - 1 - o;
+      }
+      case 2:
+        return r.findIndex((o, u) => u <= n ? !1 : !t.resolveDisabled(o));
+      case 3: {
+        let o = r.slice().reverse().findIndex((u) => !t.resolveDisabled(u));
+        return o === -1 ? o : r.length - 1 - o;
+      }
+      case 4:
+        return r.findIndex((o) => t.resolveId(o) === e.id);
+      case 5:
+        return null;
+      default:
+        Ke(e);
+    }
+  })();
+  return a === -1 ? l : a;
+}
+function h(e) {
+  var t;
+  return e == null || e.value == null ? null : (t = e.value.$el) != null ? t : e.value;
+}
+let me = Symbol("Context");
+var C = ((e) => (e[e.Open = 1] = "Open", e[e.Closed = 2] = "Closed", e[e.Closing = 4] = "Closing", e[e.Opening = 8] = "Opening", e))(C || {});
+function qe() {
+  return se(me, null);
+}
+function Ge(e) {
+  ce(me, e);
+}
+function ee(e, t) {
+  if (e)
+    return e;
+  let r = t ?? "button";
+  if (typeof r == "string" && r.toLowerCase() === "button")
+    return "button";
+}
+function Xe(e, t) {
+  let r = w(ee(e.value.type, e.value.as));
+  return de(() => {
+    r.value = ee(e.value.type, e.value.as);
+  }), R(() => {
+    var l;
+    r.value || h(t) && h(t) instanceof HTMLButtonElement && !((l = h(t)) != null && l.hasAttribute("type")) && (r.value = "button");
+  }), r;
+}
+var Ye = Object.defineProperty, Qe = (e, t, r) => t in e ? Ye(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, te = (e, t, r) => (Qe(e, typeof t != "symbol" ? t + "" : t, r), r);
+class Je {
+  constructor() {
+    te(this, "current", this.detect()), te(this, "currentId", 0);
+  }
+  set(t) {
+    this.current !== t && (this.currentId = 0, this.current = t);
+  }
+  reset() {
+    this.set(this.detect());
+  }
+  nextId() {
+    return ++this.currentId;
+  }
+  get isServer() {
+    return this.current === "server";
+  }
+  get isClient() {
+    return this.current === "client";
+  }
+  detect() {
+    return typeof window > "u" || typeof document > "u" ? "server" : "client";
+  }
+}
+let Y = new Je();
+function Q(e) {
+  if (Y.isServer)
+    return null;
+  if (e instanceof Node)
+    return e.ownerDocument;
+  if (e != null && e.hasOwnProperty("value")) {
+    let t = h(e);
+    if (t)
+      return t.ownerDocument;
+  }
+  return document;
+}
+function Ze({ container: e, accept: t, walk: r, enabled: l }) {
+  R(() => {
+    let n = e.value;
+    if (!n || l !== void 0 && !l.value)
+      return;
+    let a = Q(e);
+    if (!a)
+      return;
+    let o = Object.assign((d) => t(d), { acceptNode: t }), u = a.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, o, !1);
+    for (; u.nextNode(); )
+      r(u.currentNode);
+  });
+}
+let W = ["[contentEditable=true]", "[tabindex]", "a[href]", "area[href]", "button:not([disabled])", "iframe", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])"].map((e) => `${e}:not([tabindex='-1'])`).join(",");
+var q = ((e) => (e[e.First = 1] = "First", e[e.Previous = 2] = "Previous", e[e.Next = 4] = "Next", e[e.Last = 8] = "Last", e[e.WrapAround = 16] = "WrapAround", e[e.NoScroll = 32] = "NoScroll", e))(q || {}), _e = ((e) => (e[e.Error = 0] = "Error", e[e.Overflow = 1] = "Overflow", e[e.Success = 2] = "Success", e[e.Underflow = 3] = "Underflow", e))(_e || {}), et = ((e) => (e[e.Previous = -1] = "Previous", e[e.Next = 1] = "Next", e))(et || {});
+function ge(e = document.body) {
+  return e == null ? [] : Array.from(e.querySelectorAll(W)).sort((t, r) => Math.sign((t.tabIndex || Number.MAX_SAFE_INTEGER) - (r.tabIndex || Number.MAX_SAFE_INTEGER)));
+}
+var J = ((e) => (e[e.Strict = 0] = "Strict", e[e.Loose = 1] = "Loose", e))(J || {});
+function Z(e, t = 0) {
+  var r;
+  return e === ((r = Q(e)) == null ? void 0 : r.body) ? !1 : z(t, { [0]() {
+    return e.matches(W);
+  }, [1]() {
+    let l = e;
+    for (; l !== null; ) {
+      if (l.matches(W))
+        return !0;
+      l = l.parentElement;
+    }
+    return !1;
+  } });
+}
+function pe(e) {
+  let t = Q(e);
+  A(() => {
+    t && !Z(t.activeElement, 0) && nt(e);
+  });
+}
+var tt = ((e) => (e[e.Keyboard = 0] = "Keyboard", e[e.Mouse = 1] = "Mouse", e))(tt || {});
+typeof window < "u" && typeof document < "u" && (document.addEventListener("keydown", (e) => {
+  e.metaKey || e.altKey || e.ctrlKey || (document.documentElement.dataset.headlessuiFocusVisible = "");
+}, !0), document.addEventListener("click", (e) => {
+  e.detail === 1 ? delete document.documentElement.dataset.headlessuiFocusVisible : e.detail === 0 && (document.documentElement.dataset.headlessuiFocusVisible = "");
+}, !0));
+function nt(e) {
+  e == null || e.focus({ preventScroll: !0 });
+}
+let rt = ["textarea", "input"].join(",");
+function lt(e) {
+  var t, r;
+  return (r = (t = e == null ? void 0 : e.matches) == null ? void 0 : t.call(e, rt)) != null ? r : !1;
+}
+function he(e, t = (r) => r) {
+  return e.slice().sort((r, l) => {
+    let n = t(r), a = t(l);
+    if (n === null || a === null)
+      return 0;
+    let o = n.compareDocumentPosition(a);
+    return o & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : o & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+  });
+}
+function ot(e, t) {
+  return at(ge(), t, { relativeTo: e });
+}
+function at(e, t, { sorted: r = !0, relativeTo: l = null, skipElements: n = [] } = {}) {
+  var a;
+  let o = (a = Array.isArray(e) ? e.length > 0 ? e[0].ownerDocument : document : e == null ? void 0 : e.ownerDocument) != null ? a : document, u = Array.isArray(e) ? r ? he(e) : e : ge(e);
+  n.length > 0 && u.length > 1 && (u = u.filter((f) => !n.includes(f))), l = l ?? o.activeElement;
+  let d = (() => {
+    if (t & 5)
+      return 1;
+    if (t & 10)
+      return -1;
+    throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
+  })(), c = (() => {
+    if (t & 1)
+      return 0;
+    if (t & 2)
+      return Math.max(0, u.indexOf(l)) - 1;
+    if (t & 4)
+      return Math.max(0, u.indexOf(l)) + 1;
+    if (t & 8)
+      return u.length - 1;
+    throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
+  })(), i = t & 32 ? { preventScroll: !0 } : {}, p = 0, v = u.length, m;
+  do {
+    if (p >= v || p + v <= 0)
+      return 0;
+    let f = c + p;
+    if (t & 16)
+      f = (f + v) % v;
+    else {
+      if (f < 0)
+        return 3;
+      if (f >= v)
+        return 1;
+    }
+    m = u[f], m == null || m.focus(i), p += d;
+  } while (m !== o.activeElement);
+  return t & 6 && lt(m) && m.select(), 2;
+}
+function ne(e, t, r) {
+  Y.isServer || R((l) => {
+    document.addEventListener(e, t, r), l(() => document.removeEventListener(e, t, r));
+  });
+}
+function it(e, t, r) {
+  Y.isServer || R((l) => {
+    window.addEventListener(e, t, r), l(() => window.removeEventListener(e, t, r));
+  });
+}
+function ut(e, t, r = D(() => !0)) {
+  function l(a, o) {
+    if (!r.value || a.defaultPrevented)
+      return;
+    let u = o(a);
+    if (u === null || !u.getRootNode().contains(u))
+      return;
+    let d = function c(i) {
+      return typeof i == "function" ? c(i()) : Array.isArray(i) || i instanceof Set ? i : [i];
+    }(e);
+    for (let c of d) {
+      if (c === null)
+        continue;
+      let i = c instanceof HTMLElement ? c : h(c);
+      if (i != null && i.contains(u) || a.composed && a.composedPath().includes(i))
+        return;
+    }
+    return !Z(u, J.Loose) && u.tabIndex !== -1 && a.preventDefault(), t(a, u);
+  }
+  let n = w(null);
+  ne("mousedown", (a) => {
+    var o, u;
+    r.value && (n.value = ((u = (o = a.composedPath) == null ? void 0 : o.call(a)) == null ? void 0 : u[0]) || a.target);
+  }, !0), ne("click", (a) => {
+    n.value && (l(a, () => n.value), n.value = null);
+  }, !0), it("blur", (a) => l(a, () => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null), !0);
+}
+function re(e) {
+  return [e.screenX, e.screenY];
+}
+function st() {
+  let e = w([-1, -1]);
+  return { wasMoved(t) {
+    let r = re(t);
+    return e.value[0] === r[0] && e.value[1] === r[1] ? !1 : (e.value = r, !0);
+  }, update(t) {
+    e.value = re(t);
+  } };
+}
+let le = /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;
+function oe(e) {
+  var t, r;
+  let l = (t = e.innerText) != null ? t : "", n = e.cloneNode(!0);
+  if (!(n instanceof HTMLElement))
+    return l;
+  let a = !1;
+  for (let u of n.querySelectorAll('[hidden],[aria-hidden],[role="img"]'))
+    u.remove(), a = !0;
+  let o = a ? (r = n.innerText) != null ? r : "" : l;
+  return le.test(o) && (o = o.replace(le, "")), o;
+}
+function ct(e) {
+  let t = e.getAttribute("aria-label");
+  if (typeof t == "string")
+    return t.trim();
+  let r = e.getAttribute("aria-labelledby");
+  if (r) {
+    let l = r.split(" ").map((n) => {
+      let a = document.getElementById(n);
+      if (a) {
+        let o = a.getAttribute("aria-label");
+        return typeof o == "string" ? o.trim() : oe(a).trim();
+      }
+      return null;
+    }).filter(Boolean);
+    if (l.length > 0)
+      return l.join(", ");
+  }
+  return oe(e).trim();
+}
+function dt(e) {
+  let t = w(""), r = w("");
+  return () => {
+    let l = h(e);
+    if (!l)
+      return "";
+    let n = l.innerText;
+    if (t.value === n)
+      return r.value;
+    let a = ct(l).trim().toLowerCase();
+    return t.value = n, r.value = a, a;
+  };
+}
+var ft = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))(ft || {}), vt = ((e) => (e[e.Pointer = 0] = "Pointer", e[e.Other = 1] = "Other", e))(vt || {});
+function mt(e) {
+  requestAnimationFrame(() => requestAnimationFrame(e));
+}
+let be = Symbol("MenuContext");
+function H(e) {
+  let t = se(be, null);
+  if (t === null) {
+    let r = new Error(`<${e} /> is missing a parent <Menu /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(r, H), r;
+  }
+  return t;
+}
+let gt = B({ name: "Menu", props: { as: { type: [Object, String], default: "template" } }, setup(e, { slots: t, attrs: r }) {
+  let l = w(1), n = w(null), a = w(null), o = w([]), u = w(""), d = w(null), c = w(1);
+  function i(v = (m) => m) {
+    let m = d.value !== null ? o.value[d.value] : null, f = he(v(o.value.slice()), (y) => h(y.dataRef.domRef)), s = m ? f.indexOf(m) : null;
+    return s === -1 && (s = null), { items: f, activeItemIndex: s };
+  }
+  let p = { menuState: l, buttonRef: n, itemsRef: a, items: o, searchQuery: u, activeItemIndex: d, activationTrigger: c, closeMenu: () => {
+    l.value = 1, d.value = null;
+  }, openMenu: () => l.value = 0, goToItem(v, m, f) {
+    let s = i(), y = We(v === I.Specific ? { focus: I.Specific, id: m } : { focus: v }, { resolveItems: () => s.items, resolveActiveIndex: () => s.activeItemIndex, resolveId: (F) => F.id, resolveDisabled: (F) => F.dataRef.disabled });
+    u.value = "", d.value = y, c.value = f ?? 1, o.value = s.items;
+  }, search(v) {
+    let m = u.value !== "" ? 0 : 1;
+    u.value += v.toLowerCase();
+    let f = (d.value !== null ? o.value.slice(d.value + m).concat(o.value.slice(0, d.value + m)) : o.value).find((y) => y.dataRef.textValue.startsWith(u.value) && !y.dataRef.disabled), s = f ? o.value.indexOf(f) : -1;
+    s === -1 || s === d.value || (d.value = s, c.value = 1);
+  }, clearSearch() {
+    u.value = "";
+  }, registerItem(v, m) {
+    let f = i((s) => [...s, { id: v, dataRef: m }]);
+    o.value = f.items, d.value = f.activeItemIndex, c.value = 1;
+  }, unregisterItem(v) {
+    let m = i((f) => {
+      let s = f.findIndex((y) => y.id === v);
+      return s !== -1 && f.splice(s, 1), f;
+    });
+    o.value = m.items, d.value = m.activeItemIndex, c.value = 1;
+  } };
+  return ut([n, a], (v, m) => {
+    var f;
+    p.closeMenu(), Z(m, J.Loose) || (v.preventDefault(), (f = h(n)) == null || f.focus());
+  }, D(() => l.value === 0)), ce(be, p), Ge(D(() => z(l.value, { [0]: C.Open, [1]: C.Closed }))), () => {
+    let v = { open: l.value === 0, close: p.closeMenu };
+    return U({ ourProps: {}, theirProps: e, slot: v, slots: t, attrs: r, name: "Menu" });
+  };
+} }), pt = B({ name: "MenuButton", props: { disabled: { type: Boolean, default: !1 }, as: { type: [Object, String], default: "button" }, id: { type: String, default: () => `headlessui-menu-button-${X()}` } }, setup(e, { attrs: t, slots: r, expose: l }) {
+  let n = H("MenuButton");
+  l({ el: n.buttonRef, $el: n.buttonRef });
+  function a(c) {
+    switch (c.key) {
+      case x.Space:
+      case x.Enter:
+      case x.ArrowDown:
+        c.preventDefault(), c.stopPropagation(), n.openMenu(), A(() => {
+          var i;
+          (i = h(n.itemsRef)) == null || i.focus({ preventScroll: !0 }), n.goToItem(I.First);
+        });
+        break;
+      case x.ArrowUp:
+        c.preventDefault(), c.stopPropagation(), n.openMenu(), A(() => {
+          var i;
+          (i = h(n.itemsRef)) == null || i.focus({ preventScroll: !0 }), n.goToItem(I.Last);
+        });
+        break;
+    }
+  }
+  function o(c) {
+    switch (c.key) {
+      case x.Space:
+        c.preventDefault();
+        break;
+    }
+  }
+  function u(c) {
+    e.disabled || (n.menuState.value === 0 ? (n.closeMenu(), A(() => {
+      var i;
+      return (i = h(n.buttonRef)) == null ? void 0 : i.focus({ preventScroll: !0 });
+    })) : (c.preventDefault(), n.openMenu(), mt(() => {
+      var i;
+      return (i = h(n.itemsRef)) == null ? void 0 : i.focus({ preventScroll: !0 });
+    })));
+  }
+  let d = Xe(D(() => ({ as: e.as, type: t.type })), n.buttonRef);
+  return () => {
+    var c;
+    let i = { open: n.menuState.value === 0 }, { id: p, ...v } = e, m = { ref: n.buttonRef, id: p, type: d.value, "aria-haspopup": "menu", "aria-controls": (c = h(n.itemsRef)) == null ? void 0 : c.id, "aria-expanded": e.disabled ? void 0 : n.menuState.value === 0, onKeydown: a, onKeyup: o, onClick: u };
+    return U({ ourProps: m, theirProps: v, slot: i, attrs: t, slots: r, name: "MenuButton" });
+  };
+} }), ht = B({ name: "MenuItems", props: { as: { type: [Object, String], default: "div" }, static: { type: Boolean, default: !1 }, unmount: { type: Boolean, default: !0 }, id: { type: String, default: () => `headlessui-menu-items-${X()}` } }, setup(e, { attrs: t, slots: r, expose: l }) {
+  let n = H("MenuItems"), a = w(null);
+  l({ el: n.itemsRef, $el: n.itemsRef }), Ze({ container: D(() => h(n.itemsRef)), enabled: D(() => n.menuState.value === 0), accept(i) {
+    return i.getAttribute("role") === "menuitem" ? NodeFilter.FILTER_REJECT : i.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+  }, walk(i) {
+    i.setAttribute("role", "none");
+  } });
+  function o(i) {
+    var p;
+    switch (a.value && clearTimeout(a.value), i.key) {
+      case x.Space:
+        if (n.searchQuery.value !== "")
+          return i.preventDefault(), i.stopPropagation(), n.search(i.key);
+      case x.Enter:
+        if (i.preventDefault(), i.stopPropagation(), n.activeItemIndex.value !== null) {
+          let v = n.items.value[n.activeItemIndex.value];
+          (p = h(v.dataRef.domRef)) == null || p.click();
+        }
+        n.closeMenu(), pe(h(n.buttonRef));
+        break;
+      case x.ArrowDown:
+        return i.preventDefault(), i.stopPropagation(), n.goToItem(I.Next);
+      case x.ArrowUp:
+        return i.preventDefault(), i.stopPropagation(), n.goToItem(I.Previous);
+      case x.Home:
+      case x.PageUp:
+        return i.preventDefault(), i.stopPropagation(), n.goToItem(I.First);
+      case x.End:
+      case x.PageDown:
+        return i.preventDefault(), i.stopPropagation(), n.goToItem(I.Last);
+      case x.Escape:
+        i.preventDefault(), i.stopPropagation(), n.closeMenu(), A(() => {
+          var v;
+          return (v = h(n.buttonRef)) == null ? void 0 : v.focus({ preventScroll: !0 });
+        });
+        break;
+      case x.Tab:
+        i.preventDefault(), i.stopPropagation(), n.closeMenu(), A(() => ot(h(n.buttonRef), i.shiftKey ? q.Previous : q.Next));
+        break;
+      default:
+        i.key.length === 1 && (n.search(i.key), a.value = setTimeout(() => n.clearSearch(), 350));
+        break;
+    }
+  }
+  function u(i) {
+    switch (i.key) {
+      case x.Space:
+        i.preventDefault();
+        break;
+    }
+  }
+  let d = qe(), c = D(() => d !== null ? (d.value & C.Open) === C.Open : n.menuState.value === 0);
+  return () => {
+    var i, p;
+    let v = { open: n.menuState.value === 0 }, { id: m, ...f } = e, s = { "aria-activedescendant": n.activeItemIndex.value === null || (i = n.items.value[n.activeItemIndex.value]) == null ? void 0 : i.id, "aria-labelledby": (p = h(n.buttonRef)) == null ? void 0 : p.id, id: m, onKeydown: o, onKeyup: u, role: "menu", tabIndex: 0, ref: n.itemsRef };
+    return U({ ourProps: s, theirProps: f, slot: v, attrs: t, slots: r, features: K.RenderStrategy | K.Static, visible: c.value, name: "MenuItems" });
+  };
+} }), bt = B({ name: "MenuItem", inheritAttrs: !1, props: { as: { type: [Object, String], default: "template" }, disabled: { type: Boolean, default: !1 }, id: { type: String, default: () => `headlessui-menu-item-${X()}` } }, setup(e, { slots: t, attrs: r, expose: l }) {
+  let n = H("MenuItem"), a = w(null);
+  l({ el: a, $el: a });
+  let o = D(() => n.activeItemIndex.value !== null ? n.items.value[n.activeItemIndex.value].id === e.id : !1), u = dt(a), d = D(() => ({ disabled: e.disabled, get textValue() {
+    return u();
+  }, domRef: a }));
+  de(() => n.registerItem(e.id, d)), Ie(() => n.unregisterItem(e.id)), R(() => {
+    n.menuState.value === 0 && o.value && n.activationTrigger.value !== 0 && A(() => {
+      var s, y;
+      return (y = (s = h(a)) == null ? void 0 : s.scrollIntoView) == null ? void 0 : y.call(s, { block: "nearest" });
+    });
+  });
+  function c(s) {
+    if (e.disabled)
+      return s.preventDefault();
+    n.closeMenu(), pe(h(n.buttonRef));
+  }
+  function i() {
+    if (e.disabled)
+      return n.goToItem(I.Nothing);
+    n.goToItem(I.Specific, e.id);
+  }
+  let p = st();
+  function v(s) {
+    p.update(s);
+  }
+  function m(s) {
+    p.wasMoved(s) && (e.disabled || o.value || n.goToItem(I.Specific, e.id, 0));
+  }
+  function f(s) {
+    p.wasMoved(s) && (e.disabled || o.value && n.goToItem(I.Nothing));
+  }
+  return () => {
+    let { disabled: s } = e, y = { active: o.value, disabled: s, close: n.closeMenu }, { id: F, ...xe } = e;
+    return U({ ourProps: { id: F, ref: a, role: "menuitem", tabIndex: s === !0 ? void 0 : -1, "aria-disabled": s === !0 ? !0 : void 0, disabled: void 0, onClick: c, onFocus: i, onPointerenter: v, onMouseenter: v, onPointermove: m, onMousemove: m, onPointerleave: f, onMouseleave: f }, theirProps: { ...r, ...xe }, slot: y, attrs: r, slots: t, name: "MenuItem" });
+  };
+} });
+function yt(e, t) {
+  return b(), S("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    g("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m0-3l-3-3m0 0l-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75"
+    })
+  ]);
+}
+function xt(e, t) {
+  return b(), S("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    g("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M4.5 12.75l6 6 9-13.5"
+    })
+  ]);
+}
+function wt(e, t) {
+  return b(), S("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    g("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+    })
+  ]);
+}
+function St(e, t) {
+  return b(), S("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    g("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+    })
+  ]);
+}
+function kt(e, t) {
+  return b(), S("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    g("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+    })
+  ]);
+}
+function ye(e, t) {
+  return b(), S("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    g("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    })
+  ]);
+}
+const It = { class: "py-1" }, Et = ["onClick"], $t = {
+  name: "uiDropdown"
+}, Dt = /* @__PURE__ */ Object.assign($t, {
+  props: {
+    /**
+     * Array de elementos que componen el dropdown
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * La posición del menú emergente
+     */
+    position: {
+      type: String,
+      default: "left"
+    },
+    /**
+     * Dropdown desactivado
+     */
+    disabled: Boolean,
+    /**
+     * label del Dropdown
+     */
+    label: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: ["optionSelected"],
+  setup(e, { emit: t }) {
+    const r = e, l = D(() => {
+      let a = r.items.find((o) => o.active === !0);
+      return a ? a.name : r.label;
+    }), n = (a) => {
+      r.disabled || t("optionSelected", a.value);
+    };
+    return (a, o) => (b(), L($(gt), {
+      as: "div",
+      class: O(["relative inline-block text-left", { "opacity-25": e.disabled }])
+    }, {
+      default: N(() => [
+        g("div", null, [
+          E($(pt), { class: "inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" }, {
+            default: N(() => [
+              G(k(l.value) + " ", 1),
+              E($(wt), {
+                "aria-hidden": "true",
+                class: "-mr-1 ml-2 h-5 w-5"
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        E(Ee, {
+          "enter-active-class": "transition ease-out duration-100",
+          "enter-from-class": "transform opacity-0 scale-95",
+          "enter-to-class": "transform opacity-100 scale-100",
+          "leave-active-class": "transition ease-in duration-75",
+          "leave-from-class": "transform opacity-100 scale-100",
+          "leave-to-class": "transform opacity-0 scale-95"
+        }, {
+          default: N(() => [
+            e.disabled ? T("", !0) : (b(), L($(ht), {
+              key: 0,
+              class: O([{ "right-0": e.position === "right", "left-0": e.position === "left" }, "origin-top-right absolute mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"])
+            }, {
+              default: N(() => [
+                g("div", It, [
+                  (b(!0), S(ue, null, $e(e.items, (u, d) => (b(), L($(bt), { key: d }, {
+                    default: N(() => [
+                      g("a", {
+                        onClick: (c) => n(u),
+                        class: O([
+                          u.active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                          "block px-4 py-2 text-sm cursor-pointer"
+                        ])
+                      }, k(u.name), 11, Et)
+                    ]),
+                    _: 2
+                  }, 1024))), 128))
+                ])
+              ]),
+              _: 1
+            }, 8, ["class"]))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+}), Mt = { class: "flex justify-between" }, Ot = {
+  key: 0,
+  class: "block text-sm font-medium text-gray-700"
+}, Ft = {
+  key: 1,
+  class: "text-[10px] text-gray-500 uppercase justify-self-end"
+}, Pt = {
+  key: 0,
+  class: "inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
+}, Tt = ["disabled", "name", "placeholder", "type"], At = {
+  key: 1,
+  class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+}, jt = {
+  name: "uiInput"
+}, Nt = /* @__PURE__ */ Object.assign(jt, {
+  props: {
+    /**
+     * Texto sobre el campo
+     */
+    label: String,
+    /**
+     * Tipo de input
+     */
+    type: {
+      type: String,
+      default: "text"
+    },
+    /**
+     * Nombre interno del campo
+     */
+    name: String,
+    /**
+     * Placeholder cuando el campo está vacio
+     */
+    placeholder: {
+      type: String,
+      default: "..."
+    },
+    /**
+     * Icono del campo
+     */
+    icon: {
+      type: Function,
+      default: () => {
+      }
+    },
+    /**
+     * Campo desactivado
+     */
+    disabled: Boolean,
+    /**
+     * Color del campo
+     */
+    color: {
+      type: String,
+      default: "gray"
+    },
+    /**
+     * Valor del campo
+     */
+    value: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Define el texto de error en el campo
+     */
+    error: String,
+    /**
+     * El texto aparece en el lado derecho del campo, marcándolo como opcional
+     */
+    optional: String,
+    /**
+     * Texto y activación del Addon del campo
+     */
+    addOn: String
+  },
+  emits: ["inputChanged"],
+  setup(e, { emit: t }) {
+    const r = e, l = (a) => {
+      t("inputChanged", { value: a.target.value, name: a.target.name });
+    }, n = w(r.value);
+    return (a, o) => (b(), S("div", null, [
+      g("div", Mt, [
+        e.label ? (b(), S("label", Ot, k(e.label), 1)) : T("", !0),
+        e.optional ? (b(), S("span", Ft, k(e.optional), 1)) : T("", !0)
+      ]),
+      g("div", {
+        class: O([{ "mt-1": e.label }, "relative flex"])
+      }, [
+        e.addOn ? (b(), S("span", Pt, k(e.addOn), 1)) : T("", !0),
+        P(g("input", {
+          "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u),
+          class: O([{
+            "border-gray-300": e.color !== "danger" || e.color !== "warning" || e.color !== "success",
+            "border-red-300": e.color === "danger",
+            "border-yellow-400": e.color === "warning",
+            "border-green-400": e.color === "success",
+            "bg-gray-100": e.disabled,
+            "text-black": e.color !== "danger" || e.color !== "warning" || e.color !== "success",
+            "text-red-300": e.color === "danger",
+            "text-yellow-400": e.color === "warning",
+            "text-green-400": e.color === "success",
+            "rounded-md": !e.addOn,
+            "rounded-r-md": e.addOn
+          }, "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 placeholder-gray-300"]),
+          disabled: e.disabled,
+          name: e.name,
+          placeholder: e.placeholder,
+          type: e.type,
+          onInput: l
+        }, null, 42, Tt), [
+          [De, n.value]
+        ]),
+        e.icon ? (b(), S("div", At, [
+          E(M, {
+            icon: e.icon,
+            color: e.color
+          }, null, 8, ["icon", "color"]),
+          P(E(M, {
+            icon: $(xt),
+            color: "green"
+          }, null, 8, ["icon"]), [
+            [j, e.color === "success"]
+          ]),
+          P(E(M, {
+            icon: $(kt),
+            color: "yellow"
+          }, null, 8, ["icon"]), [
+            [j, e.color === "warning"]
+          ]),
+          P(E(M, {
+            icon: $(St),
+            color: "red"
+          }, null, 8, ["icon"]), [
+            [j, e.color === "danger"]
+          ])
+        ])) : T("", !0)
+      ], 2),
+      P(g("p", {
+        class: O([{
+          "text-gray-300": e.color !== "danger" || e.color !== "warning" || e.color !== "success",
+          "text-red-300": e.color === "danger",
+          "text-yellow-400": e.color === "warning",
+          "text-green-400": e.color === "success"
+        }, "mt-2 text-xs flex flex-row items-center"])
+      }, [
+        E(M, {
+          icon: $(ye),
+          color: "red",
+          class: "mr-2"
+        }, null, 8, ["icon"]),
+        G(k(e.error), 1)
+      ], 2), [
+        [j, e.error]
+      ])
+    ]));
+  }
+}), Ct = { class: "flex justify-between" }, Rt = {
+  key: 0,
+  class: "block text-sm font-medium text-gray-700"
+}, Lt = {
+  key: 1,
+  class: "text-[10px] text-gray-500 uppercase"
+}, Bt = ["onDrop"], zt = { class: "space-y-1 flex flex-col items-center justify-center" }, Ut = { class: "flex text-sm text-gray-600 flex flex-col sm:flex-row text-center" }, Ht = {
+  for: "file-upload",
+  class: "relative cursor-pointer rounded-md font-medium text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:text-indigo-500"
+}, Vt = ["accept"], Kt = { class: "pl-1" }, Wt = { class: "text-xs text-gray-500 pb-4" }, qt = { class: "mt-2 text-xs flex flex-row items-center text-red-300" }, Gt = {
+  name: "uiInputFile"
+}, Xt = /* @__PURE__ */ Object.assign(Gt, {
+  props: {
+    name: String,
+    label: String,
+    optional: String,
+    placeholder: String,
+    dragAndDrop: String,
+    fileTypesAndSizes: String,
+    error: String,
+    accept: String,
+    icon: {
+      type: Function,
+      default: yt
+    }
+  },
+  emits: ["filesUploaded"],
+  setup(e, { emit: t }) {
+    const r = e, l = w(""), n = (o) => {
+      let d = o.dataTransfer.files;
+      t("filesUploaded", d), r.filename = d[0].name;
+    }, a = (o) => {
+      t("filesUploaded", o.target.files), r.filename = o.target.files[0].name;
+    };
+    return (o, u) => (b(), S("div", null, [
+      g("div", Ct, [
+        e.label ? (b(), S("label", Rt, k(e.label), 1)) : T("", !0),
+        e.optional ? (b(), S("span", Lt, k(e.optional), 1)) : T("", !0)
+      ]),
+      g("div", {
+        class: O([
+          [
+            { "mt-1": e.label },
+            { "border-gray-300 hover:border-gray-400": !e.error },
+            { "border-red-300 hover:border-red-400": e.error }
+          ],
+          "dropArea flex justify-center rounded-md border-2 border-dashed px-6 pt-5 pb-6"
+        ]),
+        onDragover: u[0] || (u[0] = _(() => {
+        }, ["prevent"])),
+        onDrop: _(n, ["prevent"])
+      }, [
+        g("div", zt, [
+          E(M, {
+            icon: e.icon,
+            size: "massive",
+            color: "gray",
+            "aria-hidden": "true",
+            class: "mb-4"
+          }, null, 8, ["icon"]),
+          g("div", Ut, [
+            g("label", Ht, [
+              g("span", null, k(e.placeholder), 1),
+              g("input", {
+                id: "file-upload",
+                name: "file-upload",
+                type: "file",
+                class: "sr-only",
+                accept: e.accept,
+                onChange: a
+              }, null, 40, Vt)
+            ]),
+            g("p", Kt, k(e.dragAndDrop), 1)
+          ]),
+          g("p", Wt, k(e.fileTypesAndSizes), 1),
+          P(g("p", { class: "font-bold text-xs uppercase block p-2 bg-gray-200 rounded" }, k(l.value), 513), [
+            [j, l.value !== ""]
+          ])
+        ])
+      ], 42, Bt),
+      P(g("p", qt, [
+        E(M, {
+          icon: $(ye),
+          color: "red",
+          class: "mr-2"
+        }, null, 8, ["icon"]),
+        G(k(e.error), 1)
+      ], 512), [
+        [j, e.error]
+      ])
+    ]));
+  }
+}), Yt = {
+  uiButton: Pe,
+  uiIcon: M,
+  uiCheckbox: Le,
+  uiDropdown: Dt,
+  uiInput: Nt,
+  uiInputFile: Xt
+}, ae = Yt, Jt = {
   install(e) {
-    Object.keys(t).forEach((o) => {
-      e.component(o, t[o]);
+    Object.keys(ae).forEach((t) => {
+      e.component(t, ae[t]);
     });
   }
 };
 export {
-  c as default
+  Jt as default
 };