@komarcalabs/design-system 0.1.2 → 0.1.4

package/dist/plugin-DfFKi2ZR.js

@@ -1,941 +0,0 @@
-import { defineComponent as $, openBlock as s, createElementBlock as l, normalizeClass as a, unref as n, renderSlot as V, createTextVNode as H, toDisplayString as m, createCommentVNode as g, createElementVNode as r, computed as p, createBlock as I, resolveDynamicComponent as P, withCtx as B, ref as K, watch as Z, nextTick as W, onMounted as O, onBeforeUnmount as q, withDirectives as E, vShow as N, createVNode as L, withModifiers as U, mergeProps as F, Fragment as M, renderList as j, onUnmounted as G, normalizeStyle as J, withKeys as Q } from "vue";
-import { a as X, c as Y, s as _ } from "./carousel-D_f-K2v2.js";
-import { DialogRoot as ee, DialogPortal as te, DialogOverlay as se, DialogContent as ae, DialogTitle as le } from "reka-ui";
-import { a as oe, b as ne, c as re, d as ie, f as R, i as de, s as ue, e as ce, t as me, g as b, h as fe } from "./toggleSwitch-CpBXc_jq.js";
-const ve = /* @__PURE__ */ $({
-  __name: "KmAlert",
-  props: {
-    tone: { default: "neutral" },
-    title: {}
-  },
-  setup(e) {
-    const o = oe({ tone: e.tone });
-    return (u, c) => (s(), l("div", {
-      class: a(n(o).root()),
-      role: "status"
-    }, [
-      e.title || u.$slots.title ? (s(), l("div", {
-        key: 0,
-        class: a(n(o).title())
-      }, [
-        V(u.$slots, "title", {}, () => [
-          H(m(e.title), 1)
-        ])
-      ], 2)) : g("", !0),
-      r("div", {
-        class: a(n(o).description())
-      }, [
-        V(u.$slots, "default")
-      ], 2)
-    ], 2));
-  }
-}), he = ["aria-label"], pe = ["src", "alt"], be = { key: 1 }, ge = /* @__PURE__ */ $({
-  __name: "KmAvatar",
-  props: {
-    displayName: {},
-    src: {},
-    size: { default: "sm" },
-    initials: {}
-  },
-  setup(e) {
-    const t = e, o = p(() => t.initials ? t.initials : t.displayName ? t.displayName.trim().split(/\s+/).filter((u, c) => c < 2).map((u) => u[0]).join("").toUpperCase() : "");
-    return (u, c) => (s(), l("div", {
-      class: a(n(X)({ size: e.size, hasImage: !!e.src })),
-      role: "img",
-      "aria-label": e.displayName
-    }, [
-      e.src ? (s(), l("img", {
-        key: 0,
-        src: e.src,
-        alt: e.displayName,
-        class: "h-full w-full object-cover"
-      }, null, 8, pe)) : (s(), l("span", be, m(o.value), 1))
-    ], 10, he));
-  }
-}), ke = /* @__PURE__ */ $({
-  __name: "KmBadge",
-  props: {
-    tone: { default: "neutral" }
-  },
-  setup(e) {
-    return (t, o) => (s(), l("span", {
-      class: a(n(ne)({ tone: e.tone }))
-    }, [
-      V(t.$slots, "default")
-    ], 2));
-  }
-}), ye = /* @__PURE__ */ $({
-  __name: "KmButton",
-  props: {
-    as: { default: "button" },
-    variant: { default: "solid" },
-    size: { default: "md" },
-    disabled: { type: Boolean, default: !1 },
-    loading: { type: Boolean, default: !1 },
-    href: {},
-    type: { default: "button" }
-  },
-  setup(e) {
-    const t = e, o = p(() => t.as), u = p(
-      () => re({
-        variant: t.variant,
-        size: t.size,
-        loading: t.loading
-      })
-    ), c = p(() => ({
-      "animate-spin": t.loading,
-      "h-4 w-4": t.size === "sm" || t.size === "xs",
-      "h-5 w-5": t.size === "md" || t.size === "lg"
-    }));
-    return (i, d) => (s(), I(P(o.value), {
-      class: a(u.value),
-      href: e.as === "a" ? e.href : void 0,
-      type: e.as === "button" ? e.type : void 0,
-      disabled: e.as === "button" ? e.disabled || e.loading : void 0,
-      "aria-disabled": e.as === "a" && (e.disabled || e.loading) ? "true" : void 0,
-      "aria-busy": e.loading ? "true" : void 0
-    }, {
-      default: B(() => [
-        e.loading ? (s(), l("svg", {
-          key: 0,
-          class: a(c.value),
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        }, [...d[0] || (d[0] = [
-          r("circle", {
-            class: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            "stroke-width": "4"
-          }, null, -1),
-          r("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)
-        ])], 2)) : g("", !0),
-        V(i.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["class", "href", "type", "disabled", "aria-disabled", "aria-busy"]));
-  }
-}), we = /* @__PURE__ */ $({
-  __name: "KmCard",
-  setup(e) {
-    const t = ie();
-    return (o, u) => (s(), l("section", {
-      class: a(n(t).root())
-    }, [
-      o.$slots.header ? (s(), l("header", {
-        key: 0,
-        class: a(n(t).header())
-      }, [
-        V(o.$slots, "header")
-      ], 2)) : g("", !0),
-      r("div", {
-        class: a(n(t).body())
-      }, [
-        V(o.$slots, "default")
-      ], 2),
-      o.$slots.footer ? (s(), l("footer", {
-        key: 1,
-        class: a(n(t).footer())
-      }, [
-        V(o.$slots, "footer")
-      ], 2)) : g("", !0)
-    ], 2));
-  }
-}), $e = /* @__PURE__ */ $({
-  __name: "KmCarousel",
-  props: {
-    watchItems: { default: () => [] }
-  },
-  setup(e, { expose: t }) {
-    const o = e, u = Y(), c = p(() => u.root()), i = p(() => u.button()), d = p(() => u.wrapper()), v = K(null), C = K(!1), z = K(!1), k = () => {
-      if (!v.value) return;
-      const { scrollLeft: y, scrollWidth: f, clientWidth: w } = v.value;
-      C.value = y > 10, z.value = y + w < f - 10;
-    }, x = (y) => {
-      if (!v.value) return;
-      const f = v.value.clientWidth;
-      v.value.scrollBy({
-        left: y === "left" ? -f : f,
-        behavior: "smooth"
-      });
-    };
-    Z(
-      () => o.watchItems,
-      () => {
-        W(() => {
-          k();
-        });
-      },
-      { deep: !0 }
-    );
-    let h = null;
-    return O(() => {
-      k(), window.addEventListener("resize", k), v.value && typeof ResizeObserver < "u" && (h = new ResizeObserver(() => {
-        k();
-      }), h.observe(v.value));
-    }), q(() => {
-      window.removeEventListener("resize", k), h && v.value && h.unobserve(v.value);
-    }), t({
-      recheck: k
-    }), (y, f) => (s(), l("div", {
-      class: a(c.value)
-    }, [
-      E(r("button", {
-        onClick: f[0] || (f[0] = (w) => x("left")),
-        class: a([i.value, "carousel-btn-left"]),
-        "aria-label": "Deslizar a la izquierda"
-      }, [...f[2] || (f[2] = [
-        r("svg", {
-          class: "w-5 h-5",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          "stroke-width": "2.5"
-        }, [
-          r("path", {
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            d: "M15 19l-7-7 7-7"
-          })
-        ], -1)
-      ])], 2), [
-        [N, C.value]
-      ]),
-      E(r("button", {
-        onClick: f[1] || (f[1] = (w) => x("right")),
-        class: a([i.value, "carousel-btn-right"]),
-        "aria-label": "Deslizar a la derecha"
-      }, [...f[3] || (f[3] = [
-        r("svg", {
-          class: "w-5 h-5",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          "stroke-width": "2.5"
-        }, [
-          r("path", {
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            d: "M9 5l7 7-7 7"
-          })
-        ], -1)
-      ])], 2), [
-        [N, z.value]
-      ]),
-      r("div", {
-        ref_key: "sliderRef",
-        ref: v,
-        onScroll: k,
-        class: a(d.value)
-      }, [
-        V(y.$slots, "default", {}, void 0, !0)
-      ], 34)
-    ], 2));
-  }
-}), xe = (e, t) => {
-  const o = e.__vccOpts || e;
-  for (const [u, c] of t)
-    o[u] = c;
-  return o;
-}, vt = /* @__PURE__ */ xe($e, [["__scopeId", "data-v-9659c808"]]), ht = /* @__PURE__ */ $({
-  __name: "KmDialog",
-  props: {
-    open: { type: Boolean },
-    defaultOpen: { type: Boolean },
-    modal: { type: Boolean },
-    size: { default: "md" },
-    preventScroll: { type: Boolean, default: !0 }
-  },
-  emits: ["update:open"],
-  setup(e, { emit: t }) {
-    const o = e, u = t, c = p(() => {
-      const i = "w-full max-w-full rounded-km-lg bg-km-surface p-6 shadow-km-xl";
-      switch (o.size) {
-        case "sm":
-          return `${i} max-w-sm`;
-        case "md":
-          return `${i} max-w-md`;
-        case "lg":
-          return `${i} max-w-lg`;
-        case "xl":
-          return `${i} max-w-xl`;
-        case "full":
-          return `${i} max-w-full m-4`;
-        default:
-          return i;
-      }
-    });
-    return (i, d) => (s(), I(n(ee), {
-      open: e.open,
-      modal: !0,
-      "onUpdate:open": d[0] || (d[0] = (v) => u("update:open", v))
-    }, {
-      default: B(() => [
-        L(n(te), null, {
-          default: B(() => [
-            L(n(se), { class: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm km-dialog-overlay" }),
-            L(n(ae), {
-              class: a([c.value, "fixed left-1/2 top-1/2 z-[60] km-dialog-content"])
-            }, {
-              default: B(() => [
-                V(i.$slots, "default")
-              ]),
-              _: 3
-            }, 8, ["class"])
-          ]),
-          _: 3
-        })
-      ]),
-      _: 3
-    }, 8, ["open"]));
-  }
-}), Ce = { class: "flex items-start justify-between gap-4" }, ze = { class: "space-y-1.5" }, Ve = {
-  key: 1,
-  class: "text-sm text-km-muted-foreground"
-}, pt = /* @__PURE__ */ $({
-  __name: "KmDialogHeader",
-  props: {
-    title: {},
-    description: {},
-    showClose: { type: Boolean }
-  },
-  emits: ["close"],
-  setup(e, { emit: t }) {
-    const o = t;
-    return (u, c) => (s(), l("div", Ce, [
-      r("div", ze, [
-        e.title ? (s(), I(n(le), {
-          key: 0,
-          class: "text-lg font-semibold text-km-foreground"
-        }, {
-          default: B(() => [
-            H(m(e.title), 1)
-          ]),
-          _: 1
-        })) : g("", !0),
-        e.description ? (s(), l("p", Ve, m(e.description), 1)) : g("", !0)
-      ]),
-      e.showClose ? (s(), l("button", {
-        key: 0,
-        type: "button",
-        class: "rounded-km-sm p-1 text-km-muted-foreground hover:text-km-foreground focus:outline-none focus:ring-2 focus:ring-km-primary",
-        onClick: c[0] || (c[0] = (i) => o("close"))
-      }, [...c[1] || (c[1] = [
-        r("svg", {
-          class: "h-4 w-4",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2"
-        }, [
-          r("path", {
-            d: "M18 6L6 18M6 6l12 12",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
-          })
-        ], -1)
-      ])])) : g("", !0)
-    ]));
-  }
-}), Be = { class: "mt-4" }, bt = /* @__PURE__ */ $({
-  __name: "KmDialogBody",
-  setup(e) {
-    return (t, o) => (s(), l("div", Be, [
-      V(t.$slots, "default")
-    ]));
-  }
-}), gt = /* @__PURE__ */ $({
-  __name: "KmDialogFooter",
-  props: {
-    align: {},
-    gap: {}
-  },
-  setup(e) {
-    return (t, o) => (s(), l("div", {
-      class: a(["mt-6 flex", [
-        e.align === "start" && "justify-start",
-        e.align === "center" && "justify-center",
-        e.align === "end" && "justify-end",
-        e.gap === "sm" && "gap-2",
-        e.gap === "md" && "gap-3",
-        e.gap === "lg" && "gap-4"
-      ]])
-    }, [
-      V(t.$slots, "default")
-    ], 2));
-  }
-});
-let Ke = 0;
-function T(e = "km") {
-  const t = Ke++;
-  return `${e}-${t}`;
-}
-const Se = ["for"], Me = { class: "relative flex items-center" }, je = ["id", "value", "type", "placeholder", "disabled", "aria-invalid", "aria-describedby"], Ie = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  "stroke-width": "1.5",
-  stroke: "currentColor",
-  class: "size-5"
-}, Le = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  "stroke-width": "1.5",
-  stroke: "currentColor",
-  class: "size-5"
-}, De = ["id"], Ae = ["id"], Re = /* @__PURE__ */ $({
-  __name: "KmInput",
-  props: {
-    id: {},
-    modelValue: {},
-    label: {},
-    hint: {},
-    error: {},
-    placeholder: {},
-    type: { default: "text" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, u = t, c = T("km-input"), i = p(() => o.id || c), d = R(), v = p(() => {
-      if (o.error) return `${i.value}-error`;
-      if (o.hint) return `${i.value}-hint`;
-    }), C = K(!1), z = p(() => o.type === "password" ? C.value ? "text" : "password" : o.type), k = () => {
-      C.value = !C.value;
-    };
-    return (x, h) => (s(), l("label", {
-      class: a(n(d).root()),
-      for: i.value
-    }, [
-      e.label ? (s(), l("span", {
-        key: 0,
-        class: a(n(d).label())
-      }, m(e.label), 3)) : g("", !0),
-      r("div", Me, [
-        r("input", {
-          id: i.value,
-          class: a([n(de)(), o.type === "password" ? "pr-10" : ""]),
-          value: e.modelValue,
-          type: z.value,
-          placeholder: e.placeholder,
-          disabled: e.disabled,
-          "aria-invalid": e.error ? "true" : void 0,
-          "aria-describedby": v.value,
-          onInput: h[0] || (h[0] = (y) => u("update:modelValue", y.target.value))
-        }, null, 42, je),
-        e.type === "password" ? (s(), l("button", {
-          key: 0,
-          type: "button",
-          class: "absolute right-3 text-km-muted-foreground hover:text-km-foreground focus:outline-none",
-          onClick: U(k, ["prevent"])
-        }, [
-          C.value ? (s(), l("svg", Le, [...h[2] || (h[2] = [
-            r("path", {
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              d: "M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
-            }, null, -1)
-          ])])) : (s(), l("svg", Ie, [...h[1] || (h[1] = [
-            r("path", {
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              d: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-            }, null, -1),
-            r("path", {
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-            }, null, -1)
-          ])]))
-        ])) : g("", !0)
-      ]),
-      e.error ? (s(), l("span", {
-        key: 1,
-        id: `${i.value}-error`,
-        class: a(n(d).error())
-      }, m(e.error), 11, De)) : e.hint ? (s(), l("span", {
-        key: 2,
-        id: `${i.value}-hint`,
-        class: a(n(d).hint())
-      }, m(e.hint), 11, Ae)) : g("", !0)
-    ], 10, Se));
-  }
-}), Te = ["for"], Ee = ["id", "value", "disabled", "aria-invalid", "aria-describedby"], Ne = {
-  key: 0,
-  value: "",
-  disabled: ""
-}, He = ["value", "disabled"], Pe = ["id"], Oe = ["id"], Ue = /* @__PURE__ */ $({
-  inheritAttrs: !1,
-  __name: "KmSelect",
-  props: {
-    id: {},
-    modelValue: {},
-    options: {},
-    label: {},
-    hint: {},
-    error: {},
-    placeholder: {},
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, u = t, c = T("km-select"), i = p(() => o.id || c), d = R(), v = p(() => {
-      if (o.error) return `${i.value}-error`;
-      if (o.hint) return `${i.value}-hint`;
-    });
-    return (C, z) => (s(), l("label", {
-      class: a(n(d).root()),
-      for: i.value
-    }, [
-      e.label ? (s(), l("span", {
-        key: 0,
-        class: a(n(d).label())
-      }, m(e.label), 3)) : g("", !0),
-      r("select", F(C.$attrs, {
-        id: i.value,
-        class: n(ue)(),
-        value: e.modelValue,
-        disabled: e.disabled,
-        "aria-invalid": e.error ? "true" : void 0,
-        "aria-describedby": v.value,
-        onChange: z[0] || (z[0] = (k) => u("update:modelValue", k.target.value))
-      }), [
-        e.placeholder ? (s(), l("option", Ne, m(e.placeholder), 1)) : g("", !0),
-        (s(!0), l(M, null, j(e.options, (k) => (s(), l("option", {
-          key: String(k.value),
-          value: k.value,
-          disabled: k.disabled
-        }, m(k.label), 9, He))), 128))
-      ], 16, Ee),
-      e.error ? (s(), l("span", {
-        key: 1,
-        id: `${i.value}-error`,
-        class: a(n(d).error())
-      }, m(e.error), 11, Pe)) : e.hint ? (s(), l("span", {
-        key: 2,
-        id: `${i.value}-hint`,
-        class: a(n(d).hint())
-      }, m(e.hint), 11, Oe)) : g("", !0)
-    ], 10, Te));
-  }
-}), Ze = /* @__PURE__ */ $({
-  __name: "KmSpinner",
-  props: {
-    size: { default: "sm" },
-    color: { default: "current" }
-  },
-  setup(e) {
-    return (t, o) => (s(), l("svg", {
-      "aria-hidden": "true",
-      class: a(n(_)({ size: e.size, color: e.color })),
-      viewBox: "0 0 100 101",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, [...o[0] || (o[0] = [
-      r("path", {
-        d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
-        fill: "rgba(229, 231, 235, 0.3)"
-      }, null, -1),
-      r("path", {
-        d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
-        fill: "currentColor"
-      }, null, -1)
-    ])], 2));
-  }
-}), We = /* @__PURE__ */ $({
-  __name: "KmStack",
-  props: {
-    as: { default: "div" },
-    direction: { default: "column" },
-    gap: { default: "md" },
-    align: { default: "stretch" },
-    justify: { default: "start" },
-    wrap: { default: !1 }
-  },
-  setup(e) {
-    const t = e, o = p(
-      () => ce({
-        direction: t.direction,
-        gap: t.gap,
-        align: t.align,
-        justify: t.justify,
-        wrap: t.wrap
-      })
-    );
-    return (u, c) => (s(), I(P(e.as), {
-      class: a(o.value)
-    }, {
-      default: B(() => [
-        V(u.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-}), qe = ["for"], Fe = ["id", "value", "placeholder", "disabled", "rows", "aria-invalid", "aria-describedby"], Ge = ["id"], Je = ["id"], Qe = /* @__PURE__ */ $({
-  __name: "KmTextarea",
-  props: {
-    id: {},
-    modelValue: {},
-    label: {},
-    hint: {},
-    error: {},
-    placeholder: {},
-    disabled: { type: Boolean, default: !1 },
-    rows: { default: 4 }
-  },
-  emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, u = t, c = T("km-textarea"), i = p(() => o.id || c), d = R(), v = p(() => {
-      if (o.error) return `${i.value}-error`;
-      if (o.hint) return `${i.value}-hint`;
-    });
-    return (C, z) => (s(), l("label", {
-      class: a(n(d).root()),
-      for: i.value
-    }, [
-      e.label ? (s(), l("span", {
-        key: 0,
-        class: a(n(d).label())
-      }, m(e.label), 3)) : g("", !0),
-      r("textarea", {
-        id: i.value,
-        class: a(n(me)()),
-        value: e.modelValue,
-        placeholder: e.placeholder,
-        disabled: e.disabled,
-        rows: e.rows,
-        "aria-invalid": e.error ? "true" : void 0,
-        "aria-describedby": v.value,
-        onInput: z[0] || (z[0] = (k) => u("update:modelValue", k.target.value))
-      }, null, 42, Fe),
-      e.error ? (s(), l("span", {
-        key: 1,
-        id: `${i.value}-error`,
-        class: a(n(d).error())
-      }, m(e.error), 11, Ge)) : e.hint ? (s(), l("span", {
-        key: 2,
-        id: `${i.value}-hint`,
-        class: a(n(d).hint())
-      }, m(e.hint), 11, Je)) : g("", !0)
-    ], 10, qe));
-  }
-}), Xe = { key: 0 }, Ye = ["cx", "cy", "stroke-dasharray"], _e = ["cx", "cy", "stroke-dasharray"], et = {
-  key: 1,
-  class: "flex flex-row items-center justify-between w-full gap-4"
-}, tt = { class: "flex items-center gap-3 shrink-0" }, st = {
-  key: 0,
-  width: "20",
-  height: "20",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  class: "w-5 h-5"
-}, at = {
-  key: 1,
-  class: "text-sm font-bold"
-}, lt = { class: "flex flex-col" }, ot = {
-  key: 0,
-  class: "text-xs text-km-muted-foreground whitespace-nowrap max-w-[150px] truncate"
-}, nt = {
-  key: 0,
-  width: "20",
-  height: "20",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  class: "w-5 h-5"
-}, rt = {
-  key: 1,
-  class: "text-sm font-bold"
-}, S = 20, D = 5, A = 7, kt = /* @__PURE__ */ $({
-  __name: "KmStepper",
-  props: {
-    steps: {},
-    currentStep: {},
-    orientation: { default: "vertical" },
-    mode: { default: "auto" },
-    mobileLayout: { default: "circular" },
-    mobileLabel: { default: "" }
-  },
-  setup(e) {
-    const t = e, o = K(!1), u = K(null);
-    O(() => {
-      if (t.mode === "auto") {
-        o.value = window.innerWidth < 640;
-        const h = () => {
-          o.value = window.innerWidth < 640;
-        };
-        window.addEventListener("resize", h), G(() => {
-          window.removeEventListener("resize", h);
-        });
-      }
-    });
-    const c = p(() => t.mode === "mobile" ? !0 : t.mode === "desktop" ? !1 : o.value), i = 2 * Math.PI * S, d = (S + D) * 2, v = p(() => {
-      const h = t.steps.length;
-      return (i - h * A) / h;
-    }), C = p(() => {
-      const h = Math.min(Math.max(t.currentStep, 1), t.steps.length);
-      return Array.from(
-        { length: h },
-        (y, f) => `${v.value} ${f < h - 1 ? A : i}`
-      ).join(" ");
-    }), z = p(() => {
-      var y;
-      const h = Math.min(Math.max(t.currentStep - 1, 0), t.steps.length - 1);
-      return ((y = t.steps[h]) == null ? void 0 : y.title) || "";
-    }), k = p(() => t.mobileLabel ? t.mobileLabel : `Paso ${t.currentStep} de ${t.steps.length}`);
-    function x(h) {
-      const y = h + 1;
-      return y < t.currentStep ? "completed" : y === t.currentStep ? "active" : "upcoming";
-    }
-    return (h, y) => (s(), l("div", {
-      ref_key: "containerRef",
-      ref: u,
-      class: "w-full"
-    }, [
-      c.value ? (s(), l("div", Xe, [
-        e.mobileLayout === "circular" ? (s(), l("div", {
-          key: 0,
-          class: a(n(b)().mobileRoot())
-        }, [
-          r("div", {
-            class: a(n(b)().mobileInfo())
-          }, [
-            r("span", {
-              class: a(n(b)().mobileTitle())
-            }, m(z.value), 3),
-            r("span", {
-              class: a(n(b)().mobileLabel())
-            }, m(k.value), 3)
-          ], 2),
-          r("div", {
-            class: a(n(b)().mobileProgress()),
-            style: J({ width: `${d}px`, height: `${d}px` })
-          }, [
-            (s(), l("svg", {
-              width: d,
-              height: d,
-              class: "-rotate-90"
-            }, [
-              r("circle", {
-                cx: d / 2,
-                cy: d / 2,
-                r: S,
-                fill: "none",
-                class: "stroke-km-border",
-                "stroke-width": D,
-                "stroke-dasharray": `${v.value} ${A}`,
-                "stroke-linecap": "square"
-              }, null, 8, Ye),
-              r("circle", {
-                cx: d / 2,
-                cy: d / 2,
-                r: S,
-                fill: "none",
-                class: "stroke-km-primary",
-                "stroke-width": D,
-                "stroke-dasharray": C.value,
-                "stroke-linecap": "square"
-              }, null, 8, _e)
-            ])),
-            r("span", {
-              class: a(n(b)().mobilePercentText())
-            }, m(e.currentStep) + "/" + m(e.steps.length), 3)
-          ], 6)
-        ], 2)) : e.mobileLayout === "horizontal" ? (s(), l("div", {
-          key: 1,
-          class: a(n(b)().mobileHorizRoot())
-        }, [
-          r("div", {
-            class: a(n(b)().mobileHorizHeader())
-          }, [
-            r("span", {
-              class: a(n(b)().mobileHorizTitle())
-            }, m(z.value), 3),
-            r("span", {
-              class: a(n(b)().mobileHorizSteps())
-            }, m(e.currentStep) + "/" + m(e.steps.length), 3)
-          ], 2),
-          r("div", {
-            class: a(n(b)().mobileHorizTrack())
-          }, [
-            (s(!0), l(M, null, j(e.steps.length, (f) => (s(), l("div", {
-              key: f,
-              class: a([
-                n(b)().mobileHorizBar(),
-                f <= e.currentStep ? "bg-km-primary" : "bg-km-border"
-              ])
-            }, null, 2))), 128))
-          ], 2)
-        ], 2)) : g("", !0)
-      ])) : e.orientation === "horizontal" ? (s(), l("ol", et, [
-        (s(!0), l(M, null, j(e.steps, (f, w) => (s(), l("li", {
-          key: f.title,
-          class: "flex items-center flex-1 last:flex-none gap-4"
-        }, [
-          r("div", tt, [
-            r("div", {
-              class: a(n(b)({ state: x(w) }).stepCircle())
-            }, [
-              x(w) === "completed" ? (s(), l("svg", st, [...y[0] || (y[0] = [
-                r("polyline", { points: "20 6 9 17 4 12" }, null, -1)
-              ])])) : (s(), l("span", at, m(w + 1), 1))
-            ], 2),
-            r("div", lt, [
-              r("span", {
-                class: a([n(b)({ state: x(w) }).title(), "text-sm font-bold whitespace-nowrap"])
-              }, m(f.title), 3),
-              f.description ? (s(), l("span", ot, m(f.description), 1)) : g("", !0)
-            ])
-          ]),
-          w < e.steps.length - 1 ? (s(), l("div", {
-            key: 0,
-            class: a(["flex-1 h-[3px] rounded-full transition-all duration-300", [
-              x(w) === "completed" ? "bg-km-success" : x(w) === "active" ? "bg-gradient-to-r from-km-primary to-km-border" : "bg-km-border"
-            ]])
-          }, null, 2)) : g("", !0)
-        ]))), 128))
-      ])) : (s(), l("ol", {
-        key: 2,
-        class: a(n(b)({ orientation: "vertical" }).root())
-      }, [
-        (s(!0), l(M, null, j(e.steps, (f, w) => (s(), l("li", {
-          key: f.title,
-          class: a(n(b)().step())
-        }, [
-          r("div", {
-            class: a(n(b)().stepContainer())
-          }, [
-            r("div", {
-              class: a(n(b)({ state: x(w) }).stepCircle())
-            }, [
-              x(w) === "completed" ? (s(), l("svg", nt, [...y[1] || (y[1] = [
-                r("polyline", { points: "20 6 9 17 4 12" }, null, -1)
-              ])])) : (s(), l("span", rt, m(w + 1), 1))
-            ], 2),
-            w < e.steps.length - 1 ? (s(), l("div", {
-              key: 0,
-              class: a([
-                n(b)({ state: x(w), orientation: "vertical" }).connector(),
-                x(w) === "active" ? "bg-gradient-to-b from-km-primary to-km-border" : ""
-              ])
-            }, null, 2)) : g("", !0)
-          ], 2),
-          r("div", {
-            class: a(n(b)().content())
-          }, [
-            r("span", {
-              class: a(n(b)({ state: x(w) }).title())
-            }, m(f.title), 3),
-            f.description ? (s(), l("span", {
-              key: 0,
-              class: a(n(b)().description())
-            }, m(f.description), 3)) : g("", !0)
-          ], 2)
-        ], 2))), 128))
-      ], 2))
-    ], 512));
-  }
-}), it = ["aria-checked", "aria-disabled", "onKeydown"], yt = /* @__PURE__ */ $({
-  __name: "KmToggleSwitch",
-  props: {
-    modelValue: { type: Boolean, default: !1 },
-    label: { default: "" },
-    size: { default: "medium" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(e, { emit: t }) {
-    const o = e, u = t, c = p({
-      get: () => o.modelValue,
-      set: (v) => {
-        o.disabled || (u("update:modelValue", v), u("change", v));
-      }
-    });
-    function i() {
-      o.disabled || (c.value = !c.value);
-    }
-    const d = p(
-      () => fe({
-        size: o.size,
-        checked: c.value,
-        disabled: o.disabled
-      })
-    );
-    return (v, C) => (s(), l("div", {
-      class: a(d.value.root())
-    }, [
-      e.label ? (s(), l("span", {
-        key: 0,
-        class: a(d.value.label()),
-        onClick: i
-      }, m(e.label), 3)) : g("", !0),
-      r("div", {
-        class: a(d.value.track()),
-        onClick: i,
-        role: "checkbox",
-        "aria-checked": c.value,
-        "aria-disabled": e.disabled,
-        tabindex: "0",
-        onKeydown: Q(U(i, ["prevent"]), ["space"])
-      }, [
-        r("div", {
-          class: a(d.value.thumb())
-        }, null, 2)
-      ], 42, it)
-    ], 2));
-  }
-}), dt = {
-  KmAlert: ve,
-  KmAvatar: ge,
-  KmBadge: ke,
-  KmButton: ye,
-  KmCard: we,
-  KmInput: Re,
-  KmSelect: Ue,
-  KmSpinner: Ze,
-  KmStack: We,
-  KmTextarea: Qe
-}, wt = {
-  install(e) {
-    Object.entries(dt).forEach(([t, o]) => {
-      e.component(t, o);
-    });
-  }
-};
-export {
-  vt as K,
-  ve as _,
-  ge as a,
-  ke as b,
-  ye as c,
-  we as d,
-  ht as e,
-  bt as f,
-  gt as g,
-  pt as h,
-  Re as i,
-  Ue as j,
-  Ze as k,
-  We as l,
-  kt as m,
-  Qe as n,
-  yt as o,
-  wt as p
-};