@luis-angel-martin-dzul/vue-input-styles 0.0.42

package/dist/vue-input-styles.es.js

@@ -0,0 +1,1138 @@
+import { createElementBlock as i, openBlock as a, normalizeClass as g, renderSlot as _, createElementVNode as o, createCommentVNode as h, toDisplayString as u, Fragment as x, renderList as p, createTextVNode as f, withDirectives as w, mergeProps as y, vModelText as C, withModifiers as S, vModelDynamic as k, vModelSelect as U, normalizeStyle as V } from "vue";
+class b {
+  static type = {
+    success: "success",
+    error: "error",
+    warning: "warning",
+    info: "info",
+    neutral: "neutral"
+  };
+  static container = null;
+  static iconMap = {
+    success: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 282.9 440.5 289.9 440C296.9 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>',
+    error: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM231 231C240.4 221.6 255.6 221.6 264.9 231L319.9 286L374.9 231C384.3 221.6 399.5 221.6 408.8 231C418.1 240.4 418.2 255.6 408.8 264.9L353.8 319.9L408.8 374.9C418.2 384.3 418.2 399.5 408.8 408.8C399.4 418.1 384.2 418.2 374.9 408.8L319.9 353.8L264.9 408.8C255.5 418.2 240.3 418.2 231 408.8C221.7 399.4 221.6 384.2 231 374.9L286 319.9L231 264.9C221.6 255.5 221.6 240.3 231 231z"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>',
+    info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>',
+    neutral: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM272 272C272 254.3 257.7 240 240 240C222.3 240 208 254.3 208 272C208 289.7 222.3 304 240 304C257.7 304 272 289.7 272 272zM400 304C417.7 304 432 289.7 432 272C432 254.3 417.7 240 400 240C382.3 240 368 254.3 368 272C368 289.7 382.3 304 400 304z"/></svg>'
+  };
+  static #e(l, e, n = b.type.info, d = 4e3) {
+    b.ensureContainer();
+    const r = b.container.querySelector(`.alert-${n}`);
+    r && r.remove();
+    const s = document.createElement("div");
+    s.className = `alert alert-${n}`;
+    const c = b.iconMap[n] || "";
+    s.innerHTML = `
+      <div class="alert-icon">${c}</div>
+      <div class="alert-texts">
+          <div class="alert-title">${l}</div>
+          <div class="alert-message">${e}</div>
+      </div>
+      <div class="alert-close">&times;</div>
+    `, s.querySelector(".alert-close").addEventListener("click", () => {
+      b.remove(s);
+    }), b.container.appendChild(s), setTimeout(() => s.classList.add("show"), 10), d > 0 && setTimeout(() => b.remove(s), d);
+  }
+  // Métodos públicos reutilizables
+  static success(l, e = "") {
+    this.#e(l, e, this.type.success);
+  }
+  static error(l, e = "") {
+    this.#e(l, e, this.type.error);
+  }
+  static warning(l, e = "") {
+    this.#e(l, e, this.type.warning);
+  }
+  static info(l, e = "") {
+    this.#e(l, e, this.type.info);
+  }
+  static neutral(l, e = "") {
+    this.#e(l, e, this.type.neutral);
+  }
+  static ensureContainer() {
+    this.container || (this.container = document.createElement("div"), this.container.className = "alert-container", document.body.appendChild(this.container));
+  }
+  static remove(l) {
+    l.classList.add("hide"), setTimeout(() => l.remove(), 250);
+  }
+}
+const m = (t, l) => {
+  const e = t.__vccOpts || t;
+  for (const [n, d] of l)
+    e[n] = d;
+  return e;
+}, T = {
+  name: "ButtonStyle",
+  emits: ["click"],
+  props: {
+    class: { type: String, default: "" },
+    variant: { type: String, default: "solid" },
+    color: { type: String, default: "gray" },
+    disabled: { type: Boolean, default: !1 },
+    delay: { type: String, default: "1.5" },
+    full: { type: Boolean, default: !1 }
+  },
+  data() {
+    return {
+      internalDisabled: !1
+    };
+  },
+  computed: {
+    isDisabled() {
+      return this.disabled || this.internalDisabled;
+    },
+    buttonClasses() {
+      if (this.class)
+        return `${this.class} disabled:opacity-60 disabled:cursor-not-allowed`;
+      const t = [
+        "h-min font-semibold items-center justify-center rounded px-3 py-1.5 gap-1"
+      ];
+      t.push(this.full ? "w-full flex" : "inline-flex");
+      const l = {
+        solid: {
+          gray: "text-white bg-slate-600 enabled:hover:bg-slate-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          green: "text-white bg-emerald-600 enabled:hover:bg-emerald-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          blue: "text-white bg-sky-600 enabled:hover:bg-sky-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          red: "text-white bg-rose-600 enabled:hover:bg-rose-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          yellow: "text-white bg-amber-600 enabled:hover:bg-amber-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+        },
+        outline: {
+          gray: "text-slate-700 enabled:hover:bg-slate-50 border border-slate-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          green: "text-emerald-700 enabled:hover:bg-emerald-50 border border-emerald-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          blue: "text-sky-700 enabled:hover:bg-sky-50 border border-sky-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          red: "text-rose-700 enabled:hover:bg-rose-50 border border-rose-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed",
+          yellow: "text-amber-700 enabled:hover:bg-amber-50 border border-amber-700 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+        }
+      };
+      return t.push(l[this.variant][this.color]), t;
+    }
+  },
+  methods: {
+    handleClick(t) {
+      this.isDisabled || (this.$emit("click", t), this.internalDisabled = !0, setTimeout(() => {
+        this.internalDisabled = !1;
+      }, 1e3 * Number(this.delay)));
+    }
+  }
+}, I = ["disabled"];
+function B(t, l, e, n, d, r) {
+  return a(), i("button", {
+    disabled: r.isDisabled,
+    type: "button",
+    onClick: l[0] || (l[0] = (...s) => r.handleClick && r.handleClick(...s)),
+    class: g(r.buttonClasses)
+  }, [
+    _(t.$slots, "default")
+  ], 10, I);
+}
+const L = /* @__PURE__ */ m(T, [["render", B]]), q = {
+  name: "CheckStyle",
+  props: {
+    label: { type: String, default: "" },
+    list: { type: Array, default: () => [] },
+    grid: { type: String, default: "grid grid-cols-4" },
+    all: { type: Boolean, default: !1 },
+    modelValue: { type: [Array, String, Number, Object], default: () => [] },
+    returnAll: { type: Boolean, default: !1 },
+    returnType: { type: String, default: "id" }
+    // object | text | id
+  },
+  data() {
+    return {
+      realSelection: []
+    };
+  },
+  computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
+    isAllSelected() {
+      return this.list.length > 0 && this.realSelection.length === this.list.length;
+    }
+  },
+  watch: {
+    modelValue: {
+      immediate: !0,
+      handler(t) {
+        Array.isArray(t) ? this.realSelection = [...t] : t ? this.realSelection = [t] : this.realSelection = [];
+      }
+    }
+  },
+  methods: {
+    getValue(t) {
+      return this.returnType === "object" ? t : this.returnType === "text" ? t.name : t.id;
+    },
+    isChecked(t) {
+      const l = this.getValue(t);
+      return this.realSelection.includes(l);
+    },
+    emitExternal() {
+      if (!this.returnAll && this.realSelection.length === this.list.length) {
+        this.$emit("update:modelValue", "");
+        return;
+      }
+      this.$emit(
+        "update:modelValue",
+        this.realSelection.length ? [...this.realSelection] : ""
+      );
+    },
+    onChange(t) {
+      const l = this.getValue(t);
+      this.realSelection.includes(l) ? this.realSelection = this.realSelection.filter(
+        (e) => e !== l
+      ) : this.all ? this.realSelection.push(l) : this.realSelection = [l], this.emitExternal();
+    },
+    toggleSelectAll() {
+      this.all && (this.isAllSelected ? this.realSelection = [] : this.realSelection = this.list.map((t) => this.getValue(t)), this.emitExternal());
+    }
+  }
+}, N = { class: "w-full" }, A = { class: "flex items-center justify-between" }, M = { class: "block text-sm font-medium text-gray-700" }, z = {
+  key: 0,
+  class: "flex items-center gap-2 select-none"
+}, E = ["id", "checked"], j = ["for"], F = ["id", "checked", "onChange"], P = ["for"];
+function K(t, l, e, n, d, r) {
+  return a(), i("div", N, [
+    o("div", A, [
+      o("h3", M, u(e.label), 1),
+      e.all ? (a(), i("div", z, [
+        o("input", {
+          type: "checkbox",
+          id: "todos-" + r.getUUID,
+          checked: r.isAllSelected,
+          onChange: l[0] || (l[0] = (...s) => r.toggleSelectAll && r.toggleSelectAll(...s)),
+          class: "w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
+        }, null, 40, E),
+        o("label", {
+          for: "todos-" + r.getUUID,
+          class: "text-sm text-gray-600 uppercase truncate"
+        }, " Seleccionar todos ", 8, j)
+      ])) : h("", !0)
+    ]),
+    o("div", {
+      class: g(["max-h-48 overflow-auto space-y-1", e.grid])
+    }, [
+      (a(!0), i(x, null, p(e.list, (s) => (a(), i("div", {
+        key: s.id,
+        class: "flex items-center gap-2 select-none"
+      }, [
+        o("input", {
+          type: "checkbox",
+          id: r.getUUID + "-" + s.id,
+          checked: r.isChecked(s),
+          onChange: (c) => r.onChange(s),
+          class: "w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-200"
+        }, null, 40, F),
+        o("label", {
+          for: r.getUUID + "-" + s.id,
+          class: "truncate text-gray-700"
+        }, u(s.name), 9, P)
+      ]))), 128))
+    ], 2)
+  ]);
+}
+const W = /* @__PURE__ */ m(q, [["render", K]]), O = {
+  name: "ComboBoxStyle",
+  props: {
+    modelValue: [String, Number, Object, null],
+    label: { type: String, default: "" },
+    placeholder: { type: String, default: "Buscar..." },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    list: { type: Array, default: () => [] },
+    oEmpty: { type: String, default: "- Sin registros" }
+  },
+  data() {
+    return {
+      search: "",
+      open: !1
+    };
+  },
+  watch: {
+    modelValue(t) {
+      const l = this.list.find((e) => e.id === t);
+      l && (this.search = l.name);
+    }
+  },
+  computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
+    filteredList() {
+      return this.search ? this.list.filter(
+        (t) => t.name.toLowerCase().includes(this.search.toLowerCase())
+      ) : this.list;
+    },
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    }
+  },
+  methods: {
+    selectItem(t) {
+      this.model = t.id, this.search = t.name, this.open = !1;
+    },
+    closeWithDelay() {
+      setTimeout(() => {
+        this.open = !1;
+      }, 150);
+    }
+  }
+}, H = { class: "w-full" }, R = ["for"], G = {
+  key: 0,
+  class: "text-red-800 ml-2"
+}, J = {
+  key: 0,
+  class: "relative"
+}, Q = { class: "z-2 absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-7 h-7" }, X = { class: "relative w-full" }, Y = ["id", "placeholder"], Z = {
+  key: 0,
+  class: "absolute z-10 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded shadow max-h-48 overflow-auto"
+}, $ = {
+  key: 0,
+  class: "w-full text-gray-800 bg-white px-3 py-2"
+}, ee = ["onClick"], te = {
+  key: 1,
+  class: "relative w-full"
+}, le = ["id", "placeholder"], re = {
+  key: 0,
+  class: "absolute z-10 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded shadow max-h-48 overflow-auto"
+}, se = {
+  key: 0,
+  class: "w-full text-gray-800 bg-white px-3 py-2"
+}, ie = ["onClick"];
+function ae(t, l, e, n, d, r) {
+  return a(), i("div", H, [
+    o("label", {
+      class: "block text-sm font-medium text-gray-700",
+      for: r.getUUID
+    }, [
+      e.required ? (a(), i("span", G, "*")) : h("", !0),
+      f(" " + u(e.label), 1)
+    ], 8, R),
+    t.$slots.icon ? (a(), i("div", J, [
+      o("div", Q, [
+        _(t.$slots, "icon")
+      ]),
+      o("div", X, [
+        w(o("input", y({
+          id: r.getUUID,
+          type: "text",
+          "onUpdate:modelValue": l[0] || (l[0] = (s) => d.search = s),
+          placeholder: e.placeholder
+        }, { disabled: e.disabled, required: e.required }, {
+          class: "w-full text-gray-800 bg-white pl-10 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed",
+          onFocus: l[1] || (l[1] = (s) => !e.disabled && (d.open = !0)),
+          onInput: l[2] || (l[2] = (s) => !e.disabled && (d.open = !0)),
+          onBlur: l[3] || (l[3] = (...s) => r.closeWithDelay && r.closeWithDelay(...s))
+        }), null, 16, Y), [
+          [C, d.search]
+        ]),
+        d.open && !e.disabled ? (a(), i("div", Z, [
+          r.filteredList.length === 0 ? (a(), i("div", $, u(e.oEmpty), 1)) : h("", !0),
+          (a(!0), i(x, null, p(r.filteredList, (s, c) => (a(), i("div", {
+            key: c,
+            onClick: (v) => r.selectItem(s),
+            class: "w-full text-gray-800 bg-white hover:bg-gray-100 px-3 py-2"
+          }, u(s.name), 9, ee))), 128))
+        ])) : h("", !0)
+      ])
+    ])) : (a(), i("div", te, [
+      w(o("input", y({
+        id: r.getUUID,
+        type: "text",
+        "onUpdate:modelValue": l[4] || (l[4] = (s) => d.search = s),
+        placeholder: e.placeholder
+      }, { disabled: e.disabled, required: e.required }, {
+        class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed",
+        onFocus: l[5] || (l[5] = (s) => !e.disabled && (d.open = !0)),
+        onInput: l[6] || (l[6] = (s) => !e.disabled && (d.open = !0)),
+        onBlur: l[7] || (l[7] = (...s) => r.closeWithDelay && r.closeWithDelay(...s))
+      }), null, 16, le), [
+        [C, d.search]
+      ]),
+      d.open && !e.disabled ? (a(), i("div", re, [
+        r.filteredList.length === 0 ? (a(), i("div", se, u(e.oEmpty), 1)) : h("", !0),
+        (a(!0), i(x, null, p(r.filteredList, (s, c) => (a(), i("div", {
+          key: c,
+          onClick: (v) => r.selectItem(s),
+          class: "w-full text-gray-800 bg-white hover:bg-gray-100 px-3 py-2"
+        }, u(s.name), 9, ie))), 128))
+      ])) : h("", !0)
+    ]))
+  ]);
+}
+const oe = /* @__PURE__ */ m(O, [["render", ae]]), de = {
+  name: "DateTimeStyle",
+  props: {
+    modelValue: String,
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    /** "date", "time", "datetime", "datetime2" */
+    mode: { type: String, default: "datetime" },
+    label: { type: String, default: "Seleccionar fecha" },
+    /** segundos: "default"=01, "max"=59 */
+    secondsMode: { type: String, default: "default" }
+  },
+  data() {
+    return {
+      localDate: "",
+      localTime: ""
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    },
+    showDate() {
+      return ["date", "datetime", "datetime2"].includes(this.mode);
+    },
+    showTime() {
+      return ["time", "datetime"].includes(this.mode);
+    },
+    segundos() {
+      return this.secondsMode === "max" ? "59" : "01";
+    },
+    dateInputClass() {
+      let t = "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed";
+      return this.showDate && this.showTime ? t + " rounded-l" : t + " rounded";
+    },
+    timeInputClass() {
+      let t = "w-full text-gray-800 bg-white px-3 py-1.5 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed";
+      return this.showDate && this.showTime ? t + " rounded-r" : t + " rounded";
+    },
+    gridClass() {
+      return this.showDate && this.showTime ? "grid grid-cols-2" : "";
+    }
+  },
+  watch: {
+    modelValue: {
+      immediate: !0,
+      handler(t) {
+        if (!t) {
+          this.localDate = "", this.localTime = "";
+          return;
+        }
+        if (this.mode === "date")
+          this.localDate = t;
+        else if (this.mode === "time")
+          this.localTime = t;
+        else if (this.mode === "datetime") {
+          const [l, e] = t.split("T");
+          this.localDate = l || "", this.localTime = e ? e.slice(0, 5) : "";
+        } else this.mode === "datetime2" && (this.localDate = t.split("T")[0] || "", this.localTime = "");
+      }
+    },
+    mode: {
+      immediate: !0,
+      handler() {
+        this.parseValue(this.modelValue);
+      }
+    }
+  },
+  methods: {
+    parseValue(t) {
+      if (!t) {
+        this.localDate = "", this.localTime = "";
+        return;
+      }
+      if (this.mode === "date")
+        this.localDate = t, this.localTime = "";
+      else if (this.mode === "time")
+        this.localDate = "", this.localTime = t;
+      else if (this.mode === "datetime") {
+        const [l, e] = t.split("T");
+        this.localDate = l || "", this.localTime = e ? e.slice(0, 5) : "";
+      } else this.mode === "datetime2" && (this.localDate = t.split("T")[0] || "", this.localTime = "");
+      this.emitValue();
+    },
+    emitValue() {
+      let t = "";
+      this.mode === "date" ? t = this.localDate || "" : this.mode === "time" ? t = this.localTime || "" : this.mode === "datetime" ? !this.localDate || !this.localTime ? t = "" : t = `${this.localDate}T${this.localTime}:${this.segundos}.000` : this.mode === "datetime2" && (this.localDate ? t = `${this.localDate}T${this.secondsMode === "max" ? "23:59:59.000" : "00:01:00.000"}` : t = ""), this.model = t;
+    }
+  }
+}, ne = { class: "w-full" }, ue = { class: "block text-sm font-medium text-gray-700" }, ce = {
+  key: 0,
+  class: "text-red-800 ml-2"
+};
+function he(t, l, e, n, d, r) {
+  return a(), i("div", ne, [
+    o("label", ue, [
+      e.required ? (a(), i("span", ce, "*")) : h("", !0),
+      f(" " + u(e.label), 1)
+    ]),
+    o("div", {
+      class: g(r.gridClass)
+    }, [
+      r.showDate ? w((a(), i("input", y({
+        key: 0,
+        type: "date"
+      }, { disabled: e.disabled, required: e.required }, {
+        "onUpdate:modelValue": l[0] || (l[0] = (s) => d.localDate = s),
+        onInput: l[1] || (l[1] = (...s) => r.emitValue && r.emitValue(...s)),
+        class: r.dateInputClass
+      }), null, 16)), [
+        [C, d.localDate]
+      ]) : h("", !0),
+      r.showTime ? w((a(), i("input", y({
+        key: 1,
+        type: "time"
+      }, { disabled: e.disabled, required: e.required }, {
+        "onUpdate:modelValue": l[2] || (l[2] = (s) => d.localTime = s),
+        onInput: l[3] || (l[3] = (...s) => r.emitValue && r.emitValue(...s)),
+        class: r.timeInputClass
+      }), null, 16)), [
+        [C, d.localTime]
+      ]) : h("", !0)
+    ], 2)
+  ]);
+}
+const ge = /* @__PURE__ */ m(de, [["render", he]]), me = {
+  name: "InputDecimalStyle",
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    label: { type: String, default: "" },
+    placeholder: { type: String, default: "" },
+    decimals: { type: String, default: "2" },
+    maxlength: { type: String, default: "14" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 }
+  },
+  computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
+    formattedValue() {
+      if (this.modelValue === "" || this.modelValue === null) return "";
+      const t = parseFloat(this.modelValue);
+      return isNaN(t) ? "" : t.toLocaleString("en-US", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: Number(this.decimals)
+      });
+    }
+  },
+  methods: {
+    onKeyDown(t) {
+      const l = [
+        "Backspace",
+        "Delete",
+        "Tab",
+        "Escape",
+        "Enter",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End"
+      ];
+      if (!((t.ctrlKey || t.metaKey) && ["a", "c", "v", "x", "z"].includes(t.key.toLowerCase())) && !l.includes(t.key)) {
+        if (t.key >= "0" && t.key <= "9") {
+          const e = t.target.value.replace(/,/g, ""), n = t.target.selectionStart, d = e.split(".");
+          if (d.length === 2) {
+            const r = d[1];
+            n > e.indexOf(".") && r.length >= Number(this.decimals) && t.preventDefault();
+          }
+          return;
+        }
+        t.key === "." || t.key === "," ? (Number(this.decimals) === 0 || t.target.value.includes(".")) && t.preventDefault() : t.preventDefault();
+      }
+    },
+    onInput(t) {
+      let l = t.target.value.replace(/[^0-9.]/g, "");
+      Number(this.decimals) === 0 && (l = l.replace(/\./g, ""));
+      const e = l.split(".");
+      e.length > 2 && (l = e[0] + "." + e.slice(1).join("")), e[1] && e[1].length > Number(this.decimals) && (l = e[0] + "." + e[1].slice(0, Number(this.decimals))), this.$emit("update:modelValue", l);
+    },
+    onPaste(t) {
+      let e = (t.clipboardData || window.clipboardData).getData("text").replace(/[^0-9.]/g, "");
+      Number(this.decimals) === 0 && (e = e.replace(/\./g, ""));
+      const n = e.split(".");
+      n.length > 2 && (e = n[0] + "." + n.slice(1).join("")), n[1] && n[1].length > Number(this.decimals) && (e = n[0] + "." + n[1].slice(0, Number(this.decimals))), e !== "" && this.$emit("update:modelValue", e);
+    },
+    onBlur() {
+      let t = this.modelValue ? parseFloat(this.modelValue) : "";
+      !isNaN(t) && t !== "" && (t = t.toFixed(Number(this.decimals))), this.$emit("update:modelValue", t);
+    }
+  }
+}, be = { class: "w-full" }, ye = ["for"], fe = {
+  key: 0,
+  class: "text-red-800 ml-2"
+}, xe = {
+  key: 0,
+  class: "relative"
+}, pe = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, we = ["id", "value", "placeholder", "maxlength"], ve = ["id", "value", "placeholder", "maxlength"];
+function Ce(t, l, e, n, d, r) {
+  return a(), i("div", be, [
+    o("label", {
+      class: "block text-sm font-medium text-gray-700",
+      for: r.getUUID
+    }, [
+      e.required ? (a(), i("span", fe, "*")) : h("", !0),
+      f(" " + u(e.label), 1)
+    ], 8, ye),
+    t.$slots.icon ? (a(), i("div", xe, [
+      o("div", pe, [
+        _(t.$slots, "icon")
+      ]),
+      o("input", y({
+        type: "text",
+        id: r.getUUID,
+        value: r.formattedValue,
+        onInput: l[0] || (l[0] = (...s) => r.onInput && r.onInput(...s)),
+        onKeydown: l[1] || (l[1] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
+        onBlur: l[2] || (l[2] = (...s) => r.onBlur && r.onBlur(...s)),
+        inputmode: "decimal",
+        placeholder: e.placeholder,
+        onPaste: l[3] || (l[3] = S((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
+        maxlength: e.maxlength ? Number(e.maxlength) : null
+      }, { disabled: e.disabled, required: e.required }, { class: "w-full text-gray-800 bg-white pl-8 pr-3 py-1.5 rounded border border-gray-200 text-right focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed" }), null, 16, we)
+    ])) : (a(), i("input", y({
+      key: 1,
+      type: "text",
+      id: r.getUUID,
+      value: r.formattedValue,
+      onInput: l[4] || (l[4] = (...s) => r.onInput && r.onInput(...s)),
+      onKeydown: l[5] || (l[5] = (...s) => r.onKeyDown && r.onKeyDown(...s)),
+      onBlur: l[6] || (l[6] = (...s) => r.onBlur && r.onBlur(...s)),
+      inputmode: "decimal",
+      placeholder: e.placeholder,
+      onPaste: l[7] || (l[7] = S((...s) => r.onPaste && r.onPaste(...s), ["prevent"])),
+      maxlength: e.maxlength ? Number(e.maxlength) : null
+    }, { disabled: e.disabled, required: e.required }, { class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 text-right focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed" }), null, 16, ve))
+  ]);
+}
+const _e = /* @__PURE__ */ m(me, [["render", Ce]]), Se = {
+  name: "InputStyle",
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    label: { type: String, default: "" },
+    type: { type: String, default: "text" },
+    maxlength: { type: String, default: null },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 }
+  },
+  computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    }
+  }
+}, ke = { class: "w-full" }, De = ["for"], Ue = {
+  key: 0,
+  class: "text-red-800 ml-2"
+}, Ve = {
+  key: 0,
+  class: "relative"
+}, Te = { class: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" }, Ie = ["id", "type", "maxlength", "placeholder"], Be = ["id", "type", "maxlength", "placeholder"];
+function Le(t, l, e, n, d, r) {
+  return a(), i("div", ke, [
+    o("label", {
+      class: "block text-sm font-medium text-gray-700",
+      for: r.getUUID
+    }, [
+      e.required ? (a(), i("span", Ue, "*")) : h("", !0),
+      f(" " + u(e.label), 1)
+    ], 8, De),
+    t.$slots.icon ? (a(), i("div", Ve, [
+      o("div", Te, [
+        _(t.$slots, "icon")
+      ]),
+      w(o("input", y({
+        id: r.getUUID,
+        type: e.type,
+        maxlength: e.maxlength ? Number(e.maxlength) : null,
+        placeholder: e.placeholder
+      }, { disabled: e.disabled, required: e.required }, {
+        "onUpdate:modelValue": l[0] || (l[0] = (s) => r.model = s),
+        class: "w-full text-gray-800 bg-white pl-8 pr-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
+      }), null, 16, Ie), [
+        [k, r.model]
+      ])
+    ])) : w((a(), i("input", y({
+      key: 1,
+      id: r.getUUID,
+      type: e.type,
+      maxlength: e.maxlength ? Number(e.maxlength) : null,
+      placeholder: e.placeholder
+    }, { disabled: e.disabled, required: e.required }, {
+      "onUpdate:modelValue": l[1] || (l[1] = (s) => r.model = s),
+      class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
+    }), null, 16, Be)), [
+      [k, r.model]
+    ])
+  ]);
+}
+const qe = /* @__PURE__ */ m(Se, [["render", Le]]), Ne = {
+  name: "SelectStyle",
+  props: {
+    modelValue: [String, Number, Object, null],
+    label: { type: String, default: "" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    // lista de items
+    list: { type: Array, default: () => [] },
+    // texto para la opción inicial
+    option: { type: String, default: "- Seleccione…" },
+    oEmpty: { type: String, default: "- Sin registros" }
+  },
+  computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    }
+  }
+}, Ae = { class: "w-full" }, Me = ["for"], ze = {
+  key: 0,
+  class: "text-red-800 ml-2"
+}, Ee = ["id"], je = {
+  value: "",
+  disabled: ""
+}, Fe = ["value"];
+function Pe(t, l, e, n, d, r) {
+  return a(), i("div", Ae, [
+    o("label", {
+      class: "block text-sm font-medium text-gray-700",
+      for: r.getUUID
+    }, [
+      e.required ? (a(), i("span", ze, "*")) : h("", !0),
+      f(" " + u(e.label), 1)
+    ], 8, Me),
+    w(o("select", y({
+      "onUpdate:modelValue": l[0] || (l[0] = (s) => r.model = s)
+    }, { disabled: e.disabled, required: e.required }, {
+      id: r.getUUID,
+      class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed"
+    }), [
+      o("option", je, u(e.list.length > 0 ? e.option : e.oEmpty), 1),
+      (a(!0), i(x, null, p(e.list, (s, c) => (a(), i("option", {
+        key: c,
+        value: s.id
+      }, u(s.text), 9, Fe))), 128))
+    ], 16, Ee), [
+      [U, r.model]
+    ])
+  ]);
+}
+const Ke = /* @__PURE__ */ m(Ne, [["render", Pe]]), We = {
+  props: {
+    modelValue: { type: Number, default: 0 },
+    steps: { type: Array, required: !0 },
+    type: { type: String, default: "circle" },
+    text: { type: String, default: "all" },
+    // all | only | none
+    color: { type: String, default: "green" },
+    // gray | green | blue | red | yellow
+    btnPrevious: { type: String, default: "Anterior" },
+    btnNext: { type: String, default: "Siguiente" },
+    btnFinish: { type: String, default: "Finalizar" },
+    button: { type: Boolean, default: !0 },
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "submit"],
+  computed: {
+    step: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    },
+    solid() {
+      return {
+        gray: "text-white bg-slate-600 hover:bg-slate-700 cursor-pointer disabled:opacity-60 disabled:pointer-events-none",
+        green: "text-white bg-emerald-600 hover:bg-emerald-700 cursor-pointer disabled:opacity-60 disabled:pointer-events-none",
+        blue: "text-white bg-sky-600 hover:bg-sky-700 cursor-pointer disabled:opacity-60 disabled:pointer-events-none",
+        red: "text-white bg-rose-600 hover:bg-rose-700 cursor-pointer disabled:opacity-60 disabled:pointer-events-none",
+        yellow: "text-white bg-amber-600 hover:bg-amber-700 cursor-pointer disabled:opacity-60 disabled:pointer-events-none"
+      };
+    },
+    barActive() {
+      return this.solid[this.color].split(" ").find((t) => t.startsWith("bg-"));
+    },
+    lineActive() {
+      return this.barActive;
+    },
+    progressWidth() {
+      const t = this.steps.length;
+      return this.step === 0 ? 10 : this.step / (t - 1) * 100;
+    }
+  },
+  methods: {
+    circleClass(t) {
+      return this.step === t ? `${this.barActive} text-white` : this.step > t ? `${this.barActive} text-white opacity-90` : "bg-white text-gray-400 border-gray-300";
+    },
+    textClass(t) {
+      return this.step >= t ? this.barActive.replace("bg-", "text-") : "text-gray-400";
+    },
+    next() {
+      this.step < this.steps.length - 1 && this.step++;
+    },
+    previous() {
+      this.step > 0 && this.step--;
+    },
+    select(t) {
+      this.step = t;
+    },
+    submitForm() {
+      this.$emit("submit");
+    }
+  }
+}, Oe = { class: "flex items-center gap-6 w-full" }, He = ["disabled"], Re = { class: "flex-1" }, Ge = {
+  key: 0,
+  class: "flex items-center"
+}, Je = ["onClick"], Qe = {
+  key: 0,
+  class: "w-4 h-4",
+  fill: "none",
+  stroke: "currentColor",
+  viewBox: "0 0 24 24"
+}, Xe = {
+  key: 1,
+  class: "text-sm"
+}, Ye = {
+  key: 1,
+  class: "w-full"
+}, Ze = {
+  key: 0,
+  class: "text-xs mb-1 block"
+}, $e = { class: "w-full h-3 rounded-full bg-gray-200 overflow-hidden relative" }, et = { key: 1 };
+function tt(t, l, e, n, d, r) {
+  return a(), i("div", Oe, [
+    e.button ? (a(), i("button", {
+      key: 0,
+      type: "button",
+      disabled: r.step === 0,
+      onClick: l[0] || (l[0] = (...s) => r.previous && r.previous(...s)),
+      class: g(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[e.color]])
+    }, [
+      l[3] || (l[3] = o("svg", {
+        class: "w-5 h-5",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24"
+      }, [
+        o("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          d: "M15 19l-7-7 7-7"
+        })
+      ], -1)),
+      f(" " + u(e.btnPrevious), 1)
+    ], 10, He)) : h("", !0),
+    o("div", Re, [
+      e.type === "circle" ? (a(), i("div", Ge, [
+        (a(!0), i(x, null, p(e.steps, (s, c) => (a(), i("div", {
+          key: c,
+          class: g(["flex items-center", c < e.steps.length - 1 ? "flex-1" : ""])
+        }, [
+          o("div", {
+            class: g(["flex flex-col items-center relative", e.selected ? "cursor-pointer" : "pointer-events-none"]),
+            onClick: (v) => r.select(c)
+          }, [
+            o("div", {
+              class: g(["w-9 h-9 rounded-full flex items-center justify-center border-2 font-semibold transition-colors duration-200", r.circleClass(c)])
+            }, [
+              r.step > c ? (a(), i("svg", Qe, [...l[4] || (l[4] = [
+                o("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "3",
+                  d: "M5 13l4 4L19 7"
+                }, null, -1)
+              ])])) : (a(), i("span", Xe, u(c + 1), 1))
+            ], 2),
+            e.text === "all" || e.text === "only" && r.step === c ? (a(), i("span", {
+              key: 0,
+              class: g(["absolute -top-5 text-xs font-medium whitespace-nowrap transition-colors duration-200", r.textClass(c)])
+            }, u(s), 3)) : h("", !0)
+          ], 10, Je),
+          c < e.steps.length - 1 ? (a(), i("div", {
+            key: 0,
+            class: g(["flex-1 h-2 mx-3 rounded transition-colors duration-200", r.step > c ? r.lineActive : "bg-gray-300"])
+          }, null, 2)) : h("", !0)
+        ], 2))), 128))
+      ])) : e.type === "linear" ? (a(), i("div", Ye, [
+        e.text === "all" ? (a(), i("span", Ze, u(Math.round(r.progressWidth)) + "% ", 1)) : h("", !0),
+        o("div", $e, [
+          l[6] || (l[6] = o("div", { class: "absolute inset-0" }, null, -1)),
+          o("div", {
+            class: g(["h-full rounded-full transition-all duration-300 relative shadow-md", r.barActive]),
+            style: V({ width: r.progressWidth + "%" })
+          }, [...l[5] || (l[5] = [
+            o("div", { class: "absolute inset-0 bg-white/20 mix-blend-overlay animate-pulse" }, null, -1)
+          ])], 6)
+        ])
+      ])) : h("", !0)
+    ]),
+    e.button ? (a(), i("div", et, [
+      r.step < e.steps.length - 1 ? (a(), i("button", {
+        key: 0,
+        type: "button",
+        onClick: l[1] || (l[1] = (...s) => r.next && r.next(...s)),
+        class: g(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[e.color]])
+      }, [
+        f(u(e.btnNext) + " ", 1),
+        l[7] || (l[7] = o("svg", {
+          class: "w-5 h-5",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        }, [
+          o("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M9 5l7 7-7 7"
+          })
+        ], -1))
+      ], 2)) : (a(), i("button", {
+        key: 1,
+        type: "button",
+        onClick: l[2] || (l[2] = (...s) => r.submitForm && r.submitForm(...s)),
+        class: g(["h-min inline-flex items-center gap-1 px-3 py-1.5 rounded font-semibold", r.solid[e.color]])
+      }, [
+        f(u(e.btnFinish) + " ", 1),
+        l[8] || (l[8] = o("svg", {
+          class: "w-5 h-5",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        }, [
+          o("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M5 13l4 4L19 7"
+          })
+        ], -1))
+      ], 2))
+    ])) : h("", !0)
+  ]);
+}
+const lt = /* @__PURE__ */ m(We, [["render", tt]]), rt = {
+  name: "TableStyle",
+  props: {
+    columns: { type: Array, required: !0 },
+    rows: { type: Array, default: () => [] }
+  }
+}, st = { class: "w-full overflow-x-auto bg-white border border-gray-300 rounded shadow-sm" }, it = { class: "min-w-full" }, at = { class: "bg-gray-800" }, ot = { key: 1 }, dt = { key: 0 }, nt = ["colspan"];
+function ut(t, l, e, n, d, r) {
+  return a(), i("div", st, [
+    o("table", it, [
+      o("thead", null, [
+        o("tr", at, [
+          (a(!0), i(x, null, p(e.columns, (s, c) => (a(), i("th", {
+            key: c,
+            class: "px-4 py-1.5 text-left text-sm font-semibold text-white border-b border-gray-600"
+          }, u(s.label), 1))), 128))
+        ])
+      ]),
+      o("tbody", null, [
+        (a(!0), i(x, null, p(e.rows, (s, c) => (a(), i("tr", {
+          key: c,
+          class: "hover:bg-gray-100 transition-colors cursor-default"
+        }, [
+          (a(!0), i(x, null, p(e.columns, (v, D) => (a(), i("td", {
+            key: D,
+            class: "px-4 py-1.5 text-sm text-gray-700 border-b border-gray-200"
+          }, [
+            t.$slots[v.field] ? _(t.$slots, v.field, {
+              key: 0,
+              row: s
+            }) : (a(), i("span", ot, u(s[v.field]), 1))
+          ]))), 128))
+        ]))), 128)),
+        e.rows.length === 0 ? (a(), i("tr", dt, [
+          o("td", {
+            colspan: e.columns.length,
+            class: "px-4 py-10 text-center text-gray-500 text-sm bg-gray-50"
+          }, [...l[0] || (l[0] = [
+            o("div", { class: "flex flex-col items-center gap-3" }, [
+              o("span", { class: "text-gray-600 font-medium" }, "No hay datos para mostrar")
+            ], -1)
+          ])], 8, nt)
+        ])) : h("", !0)
+      ])
+    ])
+  ]);
+}
+const ct = /* @__PURE__ */ m(rt, [["render", ut]]), ht = {
+  name: "TextAreaStyle",
+  props: {
+    modelValue: String,
+    label: { type: String, default: "" },
+    note: { type: String, default: "" },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    row: { type: String, default: "3" },
+    maxlength: { type: String, default: null }
+  },
+  computed: {
+    getUUID() {
+      return crypto.randomUUID();
+    },
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    }
+  }
+}, gt = { class: "w-full" }, mt = { class: "flex justify-between" }, bt = ["for"], yt = {
+  key: 0,
+  class: "text-red-800 ml-2"
+}, ft = ["for"], xt = ["id", "placeholder", "maxlength", "rows"];
+function pt(t, l, e, n, d, r) {
+  return a(), i("div", gt, [
+    o("div", mt, [
+      o("label", {
+        class: "block text-sm font-medium text-gray-700",
+        for: r.getUUID
+      }, [
+        e.required ? (a(), i("span", yt, "*")) : h("", !0),
+        f(" " + u(e.label), 1)
+      ], 8, bt),
+      e.note ? (a(), i("label", {
+        key: 0,
+        class: "block text-xs text-gray-700",
+        for: r.getUUID
+      }, u(e.note), 9, ft)) : h("", !0)
+    ]),
+    w(o("textarea", y({
+      "onUpdate:modelValue": l[0] || (l[0] = (s) => r.model = s),
+      id: r.getUUID,
+      placeholder: e.placeholder
+    }, { disabled: e.disabled, required: e.required }, {
+      maxlength: e.maxlength ? Number(e.maxlength) : null,
+      rows: Number(e.row),
+      class: "w-full text-gray-800 bg-white px-3 py-1.5 rounded border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:bg-gray-100 disabled:text-gray-600 disabled:cursor-not-allowed resize-none"
+    }), null, 16, xt), [
+      [C, r.model]
+    ])
+  ]);
+}
+const wt = /* @__PURE__ */ m(ht, [["render", pt]]), vt = {
+  name: "ToggleStyle",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    label: { type: String, default: "" },
+    color: { type: String, default: "gray" },
+    // gray | green | blue | red | yellow
+    shape: { type: String, default: "round" },
+    // round | square
+    disabled: { type: Boolean, default: !1 }
+  },
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    },
+    shapeToggle() {
+      return {
+        round: "rounded-full",
+        square: "rounded-md"
+      }[this.shape];
+    },
+    computedClasses() {
+      const t = {
+        gray: "bg-slate-600 hover:bg-slate-700 border border-gray-800 cursor-pointer",
+        green: "bg-emerald-600 hover:bg-emerald-700 border border-green-700 cursor-pointer",
+        blue: "bg-sky-600 hover:bg-sky-700 border border-blue-700 cursor-pointer",
+        red: "bg-rose-600 hover:bg-rose-700 border border-red-700 cursor-pointer",
+        yellow: "bg-amber-600 hover:bg-amber-700 border border-yellow-600 cursor-pointer"
+      };
+      return this.model ? t[this.color] : "bg-gray-200 border border-gray-300";
+    },
+    disabledColorClasses() {
+      const t = {
+        gray: "bg-slate-600 border border-slate-300 cursor-not-allowed opacity-60",
+        green: "bg-emerald-600 border border-emerald-300 cursor-not-allowed opacity-60",
+        blue: "bg-sky-600 border border-sky-300 cursor-not-allowed opacity-60",
+        red: "bg-rose-600 border border-rose-300 cursor-not-allowed opacity-60",
+        yellow: "bg-amber-600 border border-amber-300 cursor-not-allowed opacity-60"
+      };
+      return this.modelValue ? t[this.color] : "bg-gray-200 border border-gray-300 cursor-not-allowed";
+    },
+    disabledClasses() {
+      return this.disabledColorClasses;
+    }
+  },
+  methods: {
+    toggle() {
+      this.disabled || (this.model = !this.model);
+    }
+  }
+}, Ct = { class: "block text-sm font-medium text-gray-700" };
+function _t(t, l, e, n, d, r) {
+  return a(), i("div", null, [
+    o("label", Ct, u(e.label), 1),
+    o("div", {
+      class: g([
+        "relative w-11 h-6 inline-flex items-center transition-colors duration-300 px-1",
+        r.shapeToggle,
+        e.disabled ? r.disabledClasses : r.computedClasses
+      ]),
+      onClick: l[0] || (l[0] = (...s) => r.toggle && r.toggle(...s))
+    }, [
+      o("div", {
+        class: g([
+          "absolute top-0.75 left-1 w-4 h-4 bg-white shadow transform transition-all duration-300",
+          r.shapeToggle,
+          r.model ? "translate-x-full" : "translate-x-0"
+        ])
+      }, null, 2)
+    ], 2)
+  ]);
+}
+const St = /* @__PURE__ */ m(vt, [["render", _t]]), Dt = {
+  install(t) {
+    t.component("AlertStyle", b), t.component("ButtonStyle", L), t.component("CheckStyle", W), t.component("ComboBoxStyle", oe), t.component("DateTimeStyle", ge), t.component("InputDecimalStyle", _e), t.component("InputStyle", qe), t.component("SelectStyle", Ke), t.component("StepperStyle", lt), t.component("TableStyle", ct), t.component("TextAreaStyle", wt), t.component("ToggleStyle", St), t.config.globalProperties.$alertstyle = b;
+  }
+};
+export {
+  b as AlertStyle,
+  L as ButtonStyle,
+  W as CheckStyle,
+  oe as ComboBoxStyle,
+  ge as DateTimeStyle,
+  _e as InputDecimalStyle,
+  qe as InputStyle,
+  Ke as SelectStyle,
+  lt as StepperStyle,
+  ct as TableStyle,
+  wt as TextAreaStyle,
+  St as ToggleStyle,
+  Dt as default
+};