@komarcalabs/design-system 0.1.0

package/dist/plugin-DfFKi2ZR.js

@@ -0,0 +1,941 @@
+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
+};