@iaclinical/components 1.0.0

package/dist/iaclinical-components.js

@@ -0,0 +1,967 @@
+import { defineComponent as B, computed as v, createElementBlock as s, openBlock as t, normalizeClass as k, createElementVNode as a, createCommentVNode as p, renderSlot as $, toDisplayString as x, createBlock as E, Teleport as Q, createVNode as J, Transition as R, withCtx as H, withModifiers as j, createTextVNode as S, ref as T, normalizeStyle as F, watch as X, withDirectives as Y, vModelText as Z, Fragment as z, renderList as L, nextTick as ee, resolveDynamicComponent as te } from "vue";
+const se = { class: "flex items-center gap-4" }, le = {
+  key: 1,
+  class: "text-lg font-bold text-primary-50 font-poppins"
+}, ae = { class: "flex-1 flex justify-center" }, oe = { class: "flex items-center gap-3" }, ne = /* @__PURE__ */ B({
+  __name: "AppBar",
+  props: {
+    title: { default: "" },
+    showMenuButton: { type: Boolean, default: !0 },
+    variant: { default: "default" },
+    sticky: { type: Boolean, default: !0 },
+    shadow: { type: Boolean, default: !1 },
+    height: { default: "md" }
+  },
+  emits: ["toggle-menu"],
+  setup(e, { emit: h }) {
+    const l = e, u = h, r = v(() => {
+      const i = "flex items-center justify-between px-6 z-50", n = {
+        default: "bg-primary-700 text-primary-50",
+        dark: "bg-secondary-900 text-white",
+        light: "bg-white text-secondary-900 border-b border-secondary-200"
+      }, d = {
+        sm: "h-12",
+        md: "h-14",
+        lg: "h-16"
+      }, o = l.sticky ? "sticky top-0" : "", m = l.shadow ? "shadow-md" : "";
+      return [
+        i,
+        n[l.variant],
+        d[l.height],
+        o,
+        m
+      ].join(" ");
+    });
+    return (i, n) => (t(), s("header", {
+      class: k(r.value)
+    }, [
+      a("div", se, [
+        e.showMenuButton ? (t(), s("button", {
+          key: 0,
+          onClick: n[0] || (n[0] = (d) => u("toggle-menu")),
+          class: "p-2 hover:bg-primary-600 rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+          "aria-label": "Toggle menu"
+        }, [...n[1] || (n[1] = [
+          a("svg", {
+            class: "w-6 h-6 text-primary-50",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [
+            a("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M4 6h16M4 12h16M4 18h16"
+            })
+          ], -1)
+        ])])) : p("", !0),
+        e.title ? (t(), s("div", le, x(e.title), 1)) : p("", !0),
+        $(i.$slots, "left", {}, void 0, !0)
+      ]),
+      a("div", ae, [
+        $(i.$slots, "center", {}, void 0, !0)
+      ]),
+      a("div", oe, [
+        $(i.$slots, "right", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+}), I = (e, h) => {
+  const l = e.__vccOpts || e;
+  for (const [u, r] of h)
+    l[u] = r;
+  return l;
+}, It = /* @__PURE__ */ I(ne, [["__scopeId", "data-v-8c81fc6d"]]), re = ["type", "disabled", "aria-label"], ie = {
+  key: 0,
+  class: "absolute top-0 right-0 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-danger-600 rounded-full min-w-[1.25rem]"
+}, Ot = /* @__PURE__ */ B({
+  __name: "Button",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "md" },
+    radius: { default: "full" },
+    type: { default: "button" },
+    disabled: { type: Boolean, default: !1 },
+    badge: { default: 0 },
+    ariaLabel: { default: "" }
+  },
+  emits: ["click"],
+  setup(e, { emit: h }) {
+    const l = e, u = h, r = v(() => l.variant === "icon"), i = v(() => l.badge > 99 ? "99+" : l.badge.toString()), n = v(() => {
+      const o = "inline-flex items-center justify-center font-semibold tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", m = {
+        primary: "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary-700",
+        secondary: "bg-secondary-200 text-secondary-900 hover:bg-secondary-300 focus-visible:ring-secondary-500",
+        outline: "border border-secondary-300 bg-transparent hover:bg-secondary-100 focus-visible:ring-secondary-500",
+        ghost: "hover:bg-secondary-100 focus-visible:ring-secondary-500",
+        danger: "bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-600",
+        icon: "hover:bg-secondary-100 focus-visible:ring-secondary-500 relative"
+      }, b = {
+        sm: r.value ? "p-1.5" : "h-8 px-3 text-sm",
+        md: r.value ? "p-2" : "h-10 px-4 text-base",
+        lg: r.value ? "p-3" : "h-12 px-6 text-lg"
+      }, V = {
+        full: "rounded-full",
+        xl: "rounded-2xl",
+        lg: "rounded-xl",
+        md: "rounded-lg",
+        sm: "rounded-md",
+        none: "rounded-none"
+      };
+      return `${o} ${m[l.variant]} ${b[l.size]} ${V[l.radius]}`;
+    }), d = (o) => {
+      l.disabled || u("click", o);
+    };
+    return (o, m) => (t(), s("button", {
+      class: k(n.value),
+      type: e.type,
+      disabled: e.disabled,
+      onClick: d,
+      "aria-label": e.ariaLabel
+    }, [
+      $(o.$slots, "default"),
+      r.value && e.badge && e.badge > 0 ? (t(), s("span", ie, x(i.value), 1)) : p("", !0)
+    ], 10, re));
+  }
+}), de = {
+  key: 0,
+  class: "border-b border-gray-100 px-6 py-4"
+}, ce = { class: "px-6 py-4" }, ue = {
+  key: 1,
+  class: "border-t border-gray-100 px-6 py-4 bg-gray-50"
+}, Ft = /* @__PURE__ */ B({
+  __name: "Card",
+  props: {
+    shadow: { default: "md" },
+    rounded: { default: "lg" },
+    bordered: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const h = e, l = {
+      none: "",
+      sm: "shadow-sm",
+      md: "shadow",
+      lg: "shadow-lg",
+      xl: "shadow-xl"
+    }, u = {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full"
+    }, r = v(() => [
+      "w-full bg-white",
+      l[h.shadow],
+      u[h.rounded],
+      h.bordered ? "border border-gray-200" : ""
+    ]);
+    return (i, n) => (t(), s("div", {
+      class: k(r.value)
+    }, [
+      i.$slots.header ? (t(), s("div", de, [
+        $(i.$slots, "header")
+      ])) : p("", !0),
+      a("div", ce, [
+        $(i.$slots, "default")
+      ]),
+      i.$slots.footer ? (t(), s("div", ue, [
+        $(i.$slots, "footer")
+      ])) : p("", !0)
+    ], 2));
+  }
+}), fe = { class: "flex items-center justify-between border-b border-gray-100 px-8 py-6" }, pe = { class: "text-xl font-semibold text-gray-900" }, xe = { class: "px-8 py-6" }, ge = {
+  key: 0,
+  class: "border-t border-gray-100 px-8 py-6 bg-gray-50"
+}, he = /* @__PURE__ */ B({
+  __name: "Dialog",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    title: { default: "Diálogo" },
+    closeOnBackdrop: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: h }) {
+    const l = e, u = h, r = v({
+      get: () => l.modelValue,
+      set: (d) => u("update:modelValue", d)
+    }), i = () => {
+      r.value = !1;
+    }, n = () => {
+      l.closeOnBackdrop && i();
+    };
+    return (d, o) => (t(), E(Q, { to: "body" }, [
+      J(R, { name: "dialog" }, {
+        default: H(() => [
+          r.value ? (t(), s("div", {
+            key: 0,
+            class: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+            onClick: n
+          }, [
+            a("div", {
+              class: "relative w-full max-w-2xl rounded-lg bg-white shadow-xl",
+              onClick: o[0] || (o[0] = j(() => {
+              }, ["stop"]))
+            }, [
+              a("div", fe, [
+                a("h2", pe, [
+                  $(d.$slots, "title", {}, () => [
+                    S(x(e.title), 1)
+                  ], !0)
+                ]),
+                a("button", {
+                  type: "button",
+                  class: "inline-flex items-center justify-center rounded-md p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+                  "aria-label": "Cerrar diálogo",
+                  onClick: i
+                }, [...o[1] || (o[1] = [
+                  a("svg", {
+                    class: "h-6 w-6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24"
+                  }, [
+                    a("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M6 18L18 6M6 6l12 12"
+                    })
+                  ], -1)
+                ])])
+              ]),
+              a("div", xe, [
+                $(d.$slots, "default", {}, void 0, !0)
+              ]),
+              d.$slots.footer ? (t(), s("div", ge, [
+                $(d.$slots, "footer", {}, void 0, !0)
+              ])) : p("", !0)
+            ])
+          ])) : p("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), At = /* @__PURE__ */ I(he, [["__scopeId", "data-v-091e8739"]]), be = ["accept", "multiple", "disabled"], ve = { class: "flex flex-col items-center justify-center gap-4 text-center" }, ye = { class: "w-32 h-32 flex items-center justify-center" }, me = ["src", "alt"], ke = {
+  key: 1,
+  class: "w-full h-full text-gray-400",
+  fill: "none",
+  stroke: "currentColor",
+  viewBox: "0 0 24 24"
+}, we = { class: "text-center" }, $e = { class: "text-base font-medium text-gray-700" }, Ce = { class: "text-primary-700" }, _e = { class: "flex items-center gap-3 flex-1 min-w-0" }, Be = { class: "flex-1 min-w-0" }, Te = { class: "text-sm font-medium text-gray-900 truncate" }, Ve = { class: "text-xs text-gray-500" }, je = {
+  key: 1,
+  class: "text-xs text-gray-500 mt-2"
+}, ze = {
+  key: 2,
+  class: "text-sm text-danger-500 mt-2"
+}, Nt = /* @__PURE__ */ B({
+  __name: "FileUpload",
+  props: {
+    modelValue: { default: null },
+    accept: { default: "*" },
+    multiple: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    illustration: { default: void 0 },
+    illustrationAlt: { default: "Subir archivo" },
+    mainText: { default: "Suelta aquí un archivo o" },
+    linkText: { default: "selecciónalo desde tu equipo" },
+    helperText: { default: "" },
+    maxSize: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "error"],
+  setup(e, { emit: h }) {
+    const l = e, u = h, r = T(null), i = T(!1), n = T(l.modelValue), d = T(""), o = () => {
+      var w;
+      (w = r.value) == null || w.click();
+    }, m = () => {
+      l.disabled || o();
+    }, b = (w) => {
+      l.disabled || (i.value = !0);
+    }, V = () => {
+      i.value = !1;
+    }, M = (w) => {
+      if (d.value = "", l.maxSize && w.size > l.maxSize) {
+        const y = (l.maxSize / 1048576).toFixed(2);
+        return d.value = `El archivo excede el tamaño máximo de ${y}MB`, u("error", d.value), !1;
+      }
+      return !0;
+    }, O = (w) => {
+      var _;
+      const C = (_ = w.target.files) == null ? void 0 : _[0];
+      C && M(C) && (n.value = C, u("update:modelValue", C), u("change", C));
+    }, A = (w) => {
+      var C;
+      i.value = !1;
+      const y = (C = w.dataTransfer) == null ? void 0 : C.files[0];
+      y && M(y) && (n.value = y, u("update:modelValue", y), u("change", y));
+    }, N = () => {
+      n.value = null, d.value = "", r.value && (r.value.value = ""), u("update:modelValue", null), u("change", null);
+    }, q = (w) => {
+      if (w === 0) return "0 Bytes";
+      const y = 1024, C = ["Bytes", "KB", "MB", "GB"], _ = Math.floor(Math.log(w) / Math.log(y));
+      return Math.round(w / Math.pow(y, _) * 100) / 100 + " " + C[_];
+    };
+    return (w, y) => (t(), s("div", {
+      class: k(["relative border-2 border-dashed rounded-lg p-8 transition-colors", [
+        i.value ? "border-primary-700 bg-primary-50" : "border-gray-300 bg-white hover:border-primary-500",
+        e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+      ]]),
+      onClick: m,
+      onDragover: j(b, ["prevent"]),
+      onDragleave: j(V, ["prevent"]),
+      onDrop: j(A, ["prevent"])
+    }, [
+      a("input", {
+        ref_key: "fileInput",
+        ref: r,
+        type: "file",
+        accept: e.accept,
+        multiple: e.multiple,
+        disabled: e.disabled,
+        class: "hidden",
+        onChange: O
+      }, null, 40, be),
+      a("div", ve, [
+        a("div", ye, [
+          e.illustration ? (t(), s("img", {
+            key: 0,
+            src: e.illustration,
+            alt: e.illustrationAlt,
+            class: "max-w-full max-h-full object-contain"
+          }, null, 8, me)) : (t(), s("svg", ke, [...y[1] || (y[1] = [
+            a("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "1.5",
+              d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            }, null, -1)
+          ])]))
+        ]),
+        a("div", we, [
+          a("p", $e, [
+            S(x(e.mainText) + " ", 1),
+            a("span", Ce, x(e.linkText), 1)
+          ])
+        ]),
+        n.value ? (t(), s("div", {
+          key: 0,
+          class: "w-full max-w-md bg-gray-50 rounded-lg p-4 flex items-center justify-between",
+          onClick: y[0] || (y[0] = j(() => {
+          }, ["stop"]))
+        }, [
+          a("div", _e, [
+            y[2] || (y[2] = a("svg", {
+              class: "w-6 h-6 text-gray-600 flex-shrink-0",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24"
+            }, [
+              a("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              })
+            ], -1)),
+            a("div", Be, [
+              a("p", Te, x(n.value.name), 1),
+              a("p", Ve, x(q(n.value.size)), 1)
+            ])
+          ]),
+          e.disabled ? p("", !0) : (t(), s("button", {
+            key: 0,
+            onClick: j(N, ["stop"]),
+            class: "ml-3 text-gray-400 hover:text-danger-500 transition-colors"
+          }, [...y[3] || (y[3] = [
+            a("svg", {
+              class: "w-5 h-5",
+              fill: "currentColor",
+              viewBox: "0 0 20 20"
+            }, [
+              a("path", {
+                "fill-rule": "evenodd",
+                d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                "clip-rule": "evenodd"
+              })
+            ], -1)
+          ])]))
+        ])) : p("", !0),
+        e.helperText ? (t(), s("p", je, x(e.helperText), 1)) : p("", !0),
+        d.value ? (t(), s("p", ze, x(d.value), 1)) : p("", !0)
+      ])
+    ], 34));
+  }
+}), Me = ["stroke-width"], De = {
+  class: "w-full h-full rounded-lg overflow-hidden",
+  style: { "background-color": "#f7f7f7" }
+}, Le = /* @__PURE__ */ B({
+  __name: "Loader",
+  props: {
+    type: { default: "circular" },
+    size: { default: "40px" },
+    height: { default: "4px" },
+    color: { default: "primary" },
+    strokeWidth: { default: 4 },
+    progress: { default: void 0 }
+  },
+  setup(e) {
+    const h = e, l = {
+      primary: "text-primary-700",
+      secondary: "text-secondary-500",
+      success: "text-success-500",
+      warning: "text-warning-500",
+      danger: "text-danger-500",
+      info: "text-info-500"
+    }, u = {
+      primary: "bg-primary-700",
+      secondary: "bg-secondary-500",
+      success: "bg-success-500",
+      warning: "bg-warning-500",
+      danger: "bg-danger-500",
+      info: "bg-info-500"
+    }, r = v(() => [l[h.color]]), i = v(() => [u[h.color]]);
+    return (n, d) => e.type === "circular" ? (t(), s("div", {
+      key: 0,
+      class: k(r.value)
+    }, [
+      (t(), s("svg", {
+        class: "animate-spin",
+        style: F({ width: e.size, height: e.size }),
+        viewBox: "0 0 24 24"
+      }, [
+        a("circle", {
+          class: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": e.strokeWidth,
+          fill: "none"
+        }, null, 8, Me),
+        d[0] || (d[0] = a("path", {
+          class: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }, null, -1))
+      ], 4))
+    ], 2)) : e.type === "linear" ? (t(), s("div", {
+      key: 1,
+      class: "w-full",
+      style: F({ height: e.height })
+    }, [
+      a("div", De, [
+        a("div", {
+          class: k([i.value, "h-full rounded-lg animate-linear-loader"]),
+          style: F({ width: e.progress ? `${e.progress}%` : void 0 })
+        }, null, 6)
+      ])
+    ], 4)) : p("", !0);
+  }
+}), qt = /* @__PURE__ */ I(Le, [["__scopeId", "data-v-8df4ec38"]]), Se = ["for"], Ie = {
+  key: 0,
+  class: "text-danger-600"
+}, Oe = { class: "relative" }, Fe = ["id", "disabled", "aria-expanded"], Ae = {
+  key: 0,
+  class: "flex items-center gap-3 flex-1"
+}, Ne = {
+  key: 0,
+  class: "w-8 h-8 rounded-full overflow-hidden bg-primary-50 flex-shrink-0"
+}, qe = ["src", "alt"], Ee = {
+  key: 1,
+  class: "w-8 h-8 rounded-full bg-primary-700 flex items-center justify-center flex-shrink-0 font-bold text-white text-sm"
+}, He = { class: "flex flex-col items-start flex-1 min-w-0" }, Ke = {
+  key: 1,
+  class: "flex-1 text-left truncate"
+}, Pe = {
+  key: 0,
+  class: "p-2 border-b border-secondary-200"
+}, We = ["placeholder"], Ue = { class: "max-h-64 overflow-y-auto" }, Ge = {
+  key: 0,
+  class: "px-4 py-3 text-sm text-secondary-500 text-center"
+}, Qe = ["onClick"], Je = {
+  key: 0,
+  class: "flex items-center gap-3 w-full"
+}, Re = {
+  key: 0,
+  class: "w-10 h-10 rounded-full overflow-hidden bg-primary-50 flex-shrink-0"
+}, Xe = ["src", "alt"], Ye = {
+  key: 1,
+  class: "w-10 h-10 rounded-full bg-primary-700 flex items-center justify-center flex-shrink-0 font-bold text-white"
+}, Ze = { class: "flex flex-col items-start flex-1 min-w-0" }, et = { class: "text-sm font-semibold text-secondary-900 truncate w-full" }, tt = {
+  key: 0,
+  class: "text-xs text-secondary-600 truncate w-full"
+}, st = {
+  key: 1,
+  class: "text-xs text-secondary-500 truncate w-full"
+}, lt = {
+  key: 2,
+  class: "w-5 h-5 text-primary-600 flex-shrink-0",
+  fill: "none",
+  stroke: "currentColor",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, at = {
+  key: 1,
+  class: "flex items-center justify-between w-full"
+}, ot = { class: "truncate" }, nt = {
+  key: 0,
+  class: "w-5 h-5 text-primary-600 flex-shrink-0 ml-2",
+  fill: "none",
+  stroke: "currentColor",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, rt = {
+  key: 0,
+  class: "border-t border-secondary-200 my-1"
+}, it = ["onClick"], dt = ["innerHTML"], ct = {
+  key: 1,
+  class: "mt-1 text-sm text-danger-600"
+}, ut = {
+  key: 2,
+  class: "mt-1 text-sm text-secondary-600"
+}, ft = /* @__PURE__ */ B({
+  __name: "Select",
+  props: {
+    modelValue: { default: null },
+    options: { default: () => [] },
+    actionItems: { default: () => [] },
+    mode: { default: "normal" },
+    label: { default: "" },
+    placeholder: { default: "Seleccionar..." },
+    size: { default: "md" },
+    variant: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    searchable: { type: Boolean, default: !1 },
+    searchPlaceholder: { default: "Buscar..." },
+    emptyText: { default: "No hay opciones disponibles" },
+    error: { default: "" },
+    helperText: { default: "" },
+    fullWidth: { type: Boolean, default: !1 },
+    menuPosition: { default: "bottom" }
+  },
+  emits: ["update:modelValue", "change", "action"],
+  setup(e, { emit: h }) {
+    const l = e, u = h, r = T(!1), i = T(""), n = T(null), d = v(
+      () => `select-${Math.random().toString(36).substr(2, 9)}`
+    ), o = v(() => l.options.find((c) => c.value === l.modelValue) || null), m = v(() => {
+      if (!l.searchable || !i.value)
+        return l.options;
+      const c = i.value.toLowerCase();
+      return l.options.filter((g) => {
+        var f, D;
+        return g.label.toLowerCase().includes(c) || ((f = g.subtitle) == null ? void 0 : f.toLowerCase().includes(c)) || ((D = g.description) == null ? void 0 : D.toLowerCase().includes(c));
+      });
+    }), b = v(() => "block text-sm font-semibold text-secondary-700 mb-1"), V = v(() => {
+      const c = "w-full flex items-center justify-between gap-2 border rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed", g = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-5 py-3 text-lg"
+      }, f = {
+        default: "bg-white border-secondary-300 hover:border-secondary-400",
+        outline: "bg-transparent border-secondary-300 hover:border-primary-500",
+        filled: "bg-secondary-100 border-transparent hover:bg-secondary-200"
+      }, D = l.mode === "menu" ? "bg-primary-700 border-primary-700 hover:bg-primary-600" : "", G = l.error ? "border-danger-600 focus:ring-danger-500" : "";
+      return [
+        c,
+        g[l.size],
+        D || f[l.variant],
+        G
+      ].join(" ");
+    }), M = v(() => l.mode === "menu" ? "text-white" : "text-secondary-900"), O = v(() => l.mode === "menu" ? "text-primary-100" : "text-secondary-600"), A = v(() => l.mode === "menu" ? "text-white" : "text-secondary-600"), N = v(() => `absolute ${l.menuPosition === "top" ? "bottom-full mb-1" : "top-full mt-1"} left-0 right-0 bg-white rounded-lg shadow-lg border border-secondary-200 z-50 overflow-hidden`), q = (c) => {
+      const g = "w-full px-4 py-2 text-left hover:bg-primary-50 transition-colors focus:outline-none focus:bg-primary-50 disabled:opacity-50 disabled:cursor-not-allowed", f = y(c) ? "bg-primary-50" : "";
+      return [g, f].join(" ");
+    }, w = (c) => {
+      const g = "w-full px-4 py-2 text-left text-sm font-semibold transition-colors focus:outline-none flex items-center gap-3";
+      return c.variant === "danger" ? `${g} text-danger-600 hover:bg-danger-50 focus:bg-danger-50` : `${g} text-secondary-700 hover:bg-secondary-50 focus:bg-secondary-50`;
+    }, y = (c) => c.value === l.modelValue, C = () => {
+      l.disabled || (r.value = !r.value, r.value && l.searchable && ee(() => {
+        var c;
+        (c = n.value) == null || c.focus();
+      }));
+    }, _ = () => {
+      r.value = !1, i.value = "";
+    }, K = (c) => {
+      c.disabled || (u("update:modelValue", c.value), u("change", c), _());
+    }, P = (c) => {
+      c.action && c.action(), u("action", c), _();
+    }, W = (c) => {
+      const g = c.relatedTarget;
+      g && g.closest(".select-wrapper") || setTimeout(() => {
+        _();
+      }, 200);
+    }, U = (c) => {
+      c.key === "Escape" ? _() : (c.key === "Enter" || c.key === " ") && (c.preventDefault(), C());
+    };
+    return X(r, (c) => {
+      c && (i.value = "");
+    }), (c, g) => (t(), s("div", {
+      class: k(["select-wrapper", { "w-full": e.fullWidth }])
+    }, [
+      e.label ? (t(), s("label", {
+        key: 0,
+        for: d.value,
+        class: k(b.value)
+      }, [
+        S(x(e.label) + " ", 1),
+        e.required ? (t(), s("span", Ie, "*")) : p("", !0)
+      ], 10, Se)) : p("", !0),
+      a("div", Oe, [
+        a("button", {
+          id: d.value,
+          type: "button",
+          class: k(V.value),
+          disabled: e.disabled,
+          "aria-expanded": r.value,
+          "aria-haspopup": !0,
+          onClick: C,
+          onBlur: W,
+          onKeydown: U
+        }, [
+          e.mode === "menu" && o.value ? (t(), s("div", Ae, [
+            o.value.avatar ? (t(), s("div", Ne, [
+              a("img", {
+                src: o.value.avatar,
+                alt: o.value.label,
+                class: "w-full h-full object-cover"
+              }, null, 8, qe)
+            ])) : o.value.initials ? (t(), s("div", Ee, x(o.value.initials), 1)) : p("", !0),
+            a("div", He, [
+              a("span", {
+                class: k(["text-sm font-semibold truncate w-full", M.value])
+              }, x(o.value.label), 3),
+              o.value.subtitle ? (t(), s("span", {
+                key: 0,
+                class: k(["text-xs truncate w-full", O.value])
+              }, x(o.value.subtitle), 3)) : p("", !0)
+            ])
+          ])) : (t(), s("span", Ke, x(o.value ? o.value.label : e.placeholder), 1)),
+          (t(), s("svg", {
+            class: k(["w-5 h-5 flex-shrink-0 transition-transform", [r.value ? "rotate-180" : "", A.value]]),
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [...g[3] || (g[3] = [
+            a("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M19 9l-7 7-7-7"
+            }, null, -1)
+          ])], 2))
+        ], 42, Fe),
+        r.value ? (t(), s("div", {
+          key: 0,
+          class: k(N.value),
+          onClick: g[2] || (g[2] = j(() => {
+          }, ["stop"]))
+        }, [
+          e.searchable ? (t(), s("div", Pe, [
+            Y(a("input", {
+              ref_key: "searchInput",
+              ref: n,
+              "onUpdate:modelValue": g[0] || (g[0] = (f) => i.value = f),
+              type: "text",
+              class: "w-full px-3 py-2 text-sm border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500",
+              placeholder: e.searchPlaceholder,
+              onKeydown: g[1] || (g[1] = j(() => {
+              }, ["stop"]))
+            }, null, 40, We), [
+              [Z, i.value]
+            ])
+          ])) : p("", !0),
+          a("div", Ue, [
+            m.value.length === 0 ? (t(), s("div", Ge, x(e.emptyText), 1)) : (t(), s(z, { key: 1 }, [
+              (t(!0), s(z, null, L(m.value, (f) => (t(), s("button", {
+                key: f.value,
+                type: "button",
+                class: k(q(f)),
+                onClick: (D) => K(f)
+              }, [
+                e.mode === "menu" ? (t(), s("div", Je, [
+                  f.avatar ? (t(), s("div", Re, [
+                    a("img", {
+                      src: f.avatar,
+                      alt: f.label,
+                      class: "w-full h-full object-cover"
+                    }, null, 8, Xe)
+                  ])) : f.initials ? (t(), s("div", Ye, x(f.initials), 1)) : p("", !0),
+                  a("div", Ze, [
+                    a("span", et, x(f.label), 1),
+                    f.subtitle ? (t(), s("span", tt, x(f.subtitle), 1)) : p("", !0),
+                    f.description ? (t(), s("span", st, x(f.description), 1)) : p("", !0)
+                  ]),
+                  y(f) ? (t(), s("svg", lt, [...g[4] || (g[4] = [
+                    a("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M5 13l4 4L19 7"
+                    }, null, -1)
+                  ])])) : p("", !0)
+                ])) : (t(), s("div", at, [
+                  a("span", ot, x(f.label), 1),
+                  y(f) ? (t(), s("svg", nt, [...g[5] || (g[5] = [
+                    a("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M5 13l4 4L19 7"
+                    }, null, -1)
+                  ])])) : p("", !0)
+                ]))
+              ], 10, Qe))), 128)),
+              e.actionItems.length > 0 ? (t(), s("div", rt)) : p("", !0),
+              (t(!0), s(z, null, L(e.actionItems, (f) => (t(), s("button", {
+                key: f.id,
+                type: "button",
+                class: k(w(f)),
+                onClick: (D) => P(f)
+              }, [
+                f.icon ? (t(), s("svg", {
+                  key: 0,
+                  class: "w-4 h-4 flex-shrink-0",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  innerHTML: f.icon
+                }, null, 8, dt)) : p("", !0),
+                S(" " + x(f.label), 1)
+              ], 10, it))), 128))
+            ], 64))
+          ])
+        ], 2)) : p("", !0)
+      ]),
+      e.error ? (t(), s("p", ct, x(e.error), 1)) : e.helperText ? (t(), s("p", ut, x(e.helperText), 1)) : p("", !0),
+      r.value ? (t(), s("div", {
+        key: 3,
+        onClick: _,
+        class: "fixed inset-0 z-40"
+      })) : p("", !0)
+    ], 2));
+  }
+}), Et = /* @__PURE__ */ I(ft, [["__scopeId", "data-v-5644cc74"]]), pt = { class: "w-full overflow-x-auto" }, xt = { class: "w-full border-collapse" }, gt = { class: "w-full" }, ht = { class: "bg-white border-b border-gray-100 w-full" }, bt = ["onClick"], vt = { class: "flex items-center gap-2" }, yt = {
+  key: 0,
+  class: "text-xs text-gray-400"
+}, mt = { key: 0 }, kt = { key: 1 }, wt = { class: "w-full" }, $t = {
+  key: 0,
+  class: "flex items-center justify-center py-12 text-gray-400"
+}, Ct = {
+  key: 1,
+  class: "w-full px-6 py-4 bg-white"
+}, _t = /* @__PURE__ */ B({
+  __name: "Table",
+  props: {
+    columns: {},
+    data: {}
+  },
+  setup(e) {
+    const h = e, l = T(null), u = T("asc"), r = (n) => {
+      l.value === n ? u.value = u.value === "asc" ? "desc" : "asc" : (l.value = n, u.value = "asc");
+    }, i = v(() => {
+      if (!l.value)
+        return h.data;
+      const n = [...h.data];
+      return n.sort((d, o) => {
+        const m = d[l.value], b = o[l.value];
+        return typeof m == "string" && typeof b == "string" ? u.value === "asc" ? m.localeCompare(b) : b.localeCompare(m) : typeof m == "number" && typeof b == "number" ? u.value === "asc" ? m - b : b - m : 0;
+      }), n;
+    });
+    return (n, d) => (t(), s("div", pt, [
+      a("table", xt, [
+        a("thead", gt, [
+          a("tr", ht, [
+            (t(!0), s(z, null, L(e.columns, (o) => (t(), s("th", {
+              key: o.key,
+              style: F(o.width ? { width: o.width } : {}),
+              class: k([
+                "px-8 py-4 text-left text-base font-semibold text-gray-900 border-0",
+                o.sortable ? "cursor-pointer hover:text-primary-700 select-none transition-colors" : ""
+              ]),
+              onClick: (m) => o.sortable && r(o.key)
+            }, [
+              a("div", vt, [
+                a("span", null, x(o.label), 1),
+                o.sortable ? (t(), s("span", yt, [
+                  l.value !== o.key ? (t(), s("span", mt, "⇅")) : (t(), s("span", kt, x(u.value === "asc" ? "↑" : "↓"), 1))
+                ])) : p("", !0)
+              ])
+            ], 14, bt))), 128))
+          ])
+        ]),
+        a("tbody", wt, [
+          (t(!0), s(z, null, L(i.value, (o, m) => (t(), s("tr", {
+            key: m,
+            class: "w-full hover:bg-gray-50 transition-colors"
+          }, [
+            (t(!0), s(z, null, L(e.columns, (b) => (t(), s("td", {
+              key: `${m}-${b.key}`,
+              class: "px-8 py-4 text-base text-gray-700 border-0"
+            }, [
+              $(n.$slots, `cell-${b.key}`, {
+                value: o[b.key],
+                row: o
+              }, () => [
+                S(x(o[b.key]), 1)
+              ], !0)
+            ]))), 128))
+          ]))), 128))
+        ])
+      ]),
+      i.value.length === 0 ? (t(), s("div", $t, [
+        $(n.$slots, "empty", {}, () => [
+          d[0] || (d[0] = S("No hay datos disponibles", -1))
+        ], !0)
+      ])) : p("", !0),
+      n.$slots.footer ? (t(), s("div", Ct, [
+        $(n.$slots, "footer", {}, void 0, !0)
+      ])) : p("", !0)
+    ]));
+  }
+}), Ht = /* @__PURE__ */ I(_t, [["__scopeId", "data-v-6b3ff0a8"]]), Bt = { class: "w-full" }, Tt = {
+  class: "flex border-b border-gray-100",
+  role: "tablist"
+}, Vt = ["aria-selected", "onClick"], jt = { role: "tabpanel" }, zt = "relative px-6 py-3 text-base font-semibold tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", Mt = "text-primary-700 border-b-4 border-primary-700", Dt = "text-gray-600 border-b-4 border-transparent hover:text-gray-800", Kt = /* @__PURE__ */ B({
+  __name: "Tabs",
+  props: {
+    modelValue: {},
+    tabs: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: h }) {
+    const l = e, u = h, r = (o) => l.modelValue === o, i = (o) => {
+      r(o) || u("update:modelValue", o);
+    }, n = v(() => l.modelValue), d = v(
+      () => l.tabs.find((o) => o.value === n.value)
+    );
+    return (o, m) => (t(), s("div", Bt, [
+      a("div", Tt, [
+        (t(!0), s(z, null, L(e.tabs, (b) => (t(), s("button", {
+          key: b.value,
+          type: "button",
+          class: k([
+            zt,
+            r(b.value) ? Mt : Dt
+          ]),
+          "aria-selected": r(b.value),
+          role: "tab",
+          onClick: (V) => i(b.value)
+        }, x(b.label), 11, Vt))), 128))
+      ]),
+      a("div", jt, [
+        $(o.$slots, n.value, {
+          active: n.value,
+          tab: d.value
+        })
+      ])
+    ]));
+  }
+}), Lt = "font-sans", Pt = /* @__PURE__ */ B({
+  __name: "Text",
+  props: {
+    variant: { default: "body1" },
+    as: {},
+    color: { default: "default" },
+    align: { default: "left" },
+    uppercase: { type: Boolean, default: !1 },
+    truncate: { type: Boolean, default: !1 },
+    weight: {}
+  },
+  setup(e) {
+    const h = {
+      h1: "text-[40px] leading-[57px] tracking-[0px] font-extrabold",
+      h2: "text-[40px] leading-[57px] tracking-[0px] font-bold",
+      h3: "text-[28px] leading-[39px] tracking-[0px] font-extrabold",
+      h4: "text-[21px] leading-[29px] tracking-[0px] font-extrabold",
+      h5: "text-[16px] leading-[22px] tracking-[0px] font-extrabold",
+      h6: "text-[13px] leading-[18px] tracking-[0px] font-extrabold",
+      subtitle1: "text-[16px] leading-[24px] tracking-[0.15px] font-medium",
+      subtitle2: "text-[14px] leading-[21px] tracking-[0.1px] font-medium",
+      subtitle3: "text-[12px] leading-[18px] tracking-[0.1px] font-medium",
+      subtitle4: "text-[10px] leading-[15px] tracking-[0.1px] font-medium",
+      body1: "text-[16px] leading-[24px] tracking-[0.5px] font-light",
+      body2: "text-[14px] leading-[21px] tracking-[0.25px] font-light",
+      body3: "text-[12px] leading-[18px] tracking-[0.25px] font-light",
+      body4: "text-[10px] leading-[15px] tracking-[0.25px] font-light",
+      button1: "text-[14px] leading-[24px] tracking-[1.25px] font-bold",
+      button2: "text-[14px] leading-[20px] tracking-[1.25px] font-bold",
+      button3: "text-[12px] leading-[18px] tracking-[1.25px] font-bold",
+      caption: "text-[12px] leading-[18px] tracking-[0.4px] font-normal",
+      overline: "text-[10px] leading-[15px] tracking-[1.5px] font-medium"
+    }, l = {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5",
+      h6: "h6",
+      subtitle1: "p",
+      subtitle2: "p",
+      subtitle3: "p",
+      subtitle4: "p",
+      body1: "p",
+      body2: "p",
+      body3: "p",
+      body4: "p",
+      button1: "span",
+      button2: "span",
+      button3: "span",
+      caption: "span",
+      overline: "span"
+    }, u = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    }, r = {
+      default: "text-secondary-900",
+      muted: "text-secondary-600",
+      primary: "text-primary-600",
+      secondary: "text-secondary-700",
+      danger: "text-danger-600",
+      success: "text-success-600",
+      warning: "text-warning-600"
+    }, i = {
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold"
+    }, n = e, d = v(() => n.variant), o = v(() => n.color), m = v(() => n.align), b = v(() => n.as || l[d.value] || "span"), V = v(() => n.weight ? i[n.weight] : "");
+    return (M, O) => (t(), E(te(b.value), {
+      class: k([
+        Lt,
+        h[d.value],
+        r[o.value],
+        u[m.value],
+        V.value,
+        {
+          uppercase: e.uppercase || d.value === "overline",
+          truncate: e.truncate
+        }
+      ])
+    }, {
+      default: H(() => [
+        $(M.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  It as AppBar,
+  Ot as Button,
+  Ft as Card,
+  At as Dialog,
+  Nt as FileUpload,
+  qt as Loader,
+  Et as Select,
+  Ht as Table,
+  Kt as Tabs,
+  Pt as Text
+};