@komarcalabs/design-system 0.1.2 → 0.1.4

package/dist/react/components/KmSkeleton.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { SkeletonVariants } from '../../variants';
+export interface KmSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
+    variant?: SkeletonVariants["variant"];
+    tone?: SkeletonVariants["tone"];
+    animation?: SkeletonVariants["animation"];
+    width?: string | number;
+    height?: string | number;
+    rounded?: string;
+    count?: number;
+    loading?: boolean;
+    children?: React.ReactNode;
+}
+export declare const KmSkeleton: React.FC<KmSkeletonProps>;
+//# sourceMappingURL=KmSkeleton.d.ts.map

package/dist/react/components/KmSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KmSkeleton.d.ts","sourceRoot":"","sources":["../../../src/react/components/KmSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoDhD,CAAC"}

package/dist/react/components/index.d.ts

@@ -8,4 +8,5 @@ export * from './KmStack';
 export * from './KmTextarea';
 export * from './KmStepper';
 export * from './KmToggleSwitch';
+export * from './KmSkeleton';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/dist/react.js

@@ -1,33 +1,33 @@
 /* empty css               */
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { a as H, b as j, c as W, d as A, f as I, i as D, s as S, e as P, t as F, g as w, h as q } from "./toggleSwitch-CpBXc_jq.js";
-import { forwardRef as K, useId as V, useState as B, useEffect as E, useMemo as M } from "react";
-function k(...a) {
+import { jsxs as c, jsx as e, Fragment as B } from "react/jsx-runtime";
+import { a as H, b as S, c as A, d as W, f as K, i as D, s as F, g as P, t as _, h as $, j as q, e as U } from "./skeleton-D8D5ibC2.js";
+import { forwardRef as V, useId as z, useState as E, useEffect as T, useMemo as R } from "react";
+function x(...a) {
   return a.filter(Boolean).join(" ");
 }
-function Z({ tone: a = "neutral", title: t, children: l, className: i, ...s }) {
+function Q({ tone: a = "neutral", title: s, children: l, className: r, ...t }) {
   const n = H({ tone: a });
-  return /* @__PURE__ */ c("div", { className: k(n.root(), i), role: "status", ...s, children: [
-    t ? /* @__PURE__ */ e("div", { className: n.title(), children: t }) : null,
+  return /* @__PURE__ */ c("div", { className: x(n.root(), r), role: "status", ...t, children: [
+    s ? /* @__PURE__ */ e("div", { className: n.title(), children: s }) : null,
     /* @__PURE__ */ e("div", { className: n.description(), children: l })
   ] });
 }
-function J({ tone: a = "neutral", className: t, ...l }) {
-  return /* @__PURE__ */ e("span", { className: k(j({ tone: a }), t), ...l });
+function X({ tone: a = "neutral", className: s, ...l }) {
+  return /* @__PURE__ */ e("span", { className: x(S({ tone: a }), s), ...l });
 }
-function Q(a) {
-  const { as: t = "button", className: l, variant: i = "solid", size: s = "md", loading: n, children: m, ...f } = a, h = k(W({ variant: i, size: s, loading: n }), l);
-  if (t === "a")
-    return /* @__PURE__ */ e("a", { className: h, ...f, children: m });
-  const r = f;
+function Y(a) {
+  const { as: s = "button", className: l, variant: r = "solid", size: t = "md", loading: n, children: o, ...f } = a, h = x(A({ variant: r, size: t, loading: n }), l);
+  if (s === "a")
+    return /* @__PURE__ */ e("a", { className: h, ...f, children: o });
+  const i = f;
   return /* @__PURE__ */ c(
     "button",
     {
       className: h,
       type: "button",
-      disabled: r.disabled || n,
+      disabled: i.disabled || n,
       "aria-busy": n ? "true" : void 0,
-      ...r,
+      ...i,
       children: [
         n && /* @__PURE__ */ c(
           "svg",
@@ -59,198 +59,198 @@ function Q(a) {
             ]
           }
         ),
-        m
+        o
       ]
     }
   );
 }
-function X({ header: a, footer: t, children: l, className: i, ...s }) {
-  const n = A();
-  return /* @__PURE__ */ c("section", { className: k(n.root(), i), ...s, children: [
+function ee({ header: a, footer: s, children: l, className: r, ...t }) {
+  const n = W();
+  return /* @__PURE__ */ c("section", { className: x(n.root(), r), ...t, children: [
     a ? /* @__PURE__ */ e("header", { className: n.header(), children: a }) : null,
     /* @__PURE__ */ e("div", { className: n.body(), children: l }),
-    t ? /* @__PURE__ */ e("footer", { className: n.footer(), children: t }) : null
+    s ? /* @__PURE__ */ e("footer", { className: n.footer(), children: s }) : null
   ] });
 }
-const Y = K(function({ id: t, label: l, hint: i, error: s, className: n, ...m }, f) {
-  const h = V(), r = t || h, u = s ? `${r}-error` : i ? `${r}-hint` : void 0, d = I();
-  return /* @__PURE__ */ c("label", { className: d.root(), htmlFor: r, children: [
+const ae = V(function({ id: s, label: l, hint: r, error: t, className: n, ...o }, f) {
+  const h = z(), i = s || h, u = t ? `${i}-error` : r ? `${i}-hint` : void 0, d = K();
+  return /* @__PURE__ */ c("label", { className: d.root(), htmlFor: i, children: [
     l ? /* @__PURE__ */ e("span", { className: d.label(), children: l }) : null,
     /* @__PURE__ */ e(
       "input",
       {
         ref: f,
-        id: r,
-        className: k(D(), n),
-        "aria-invalid": s ? "true" : void 0,
+        id: i,
+        className: x(D(), n),
+        "aria-invalid": t ? "true" : void 0,
         "aria-describedby": u,
-        ...m
+        ...o
       }
     ),
-    s ? /* @__PURE__ */ e("span", { id: `${r}-error`, className: d.error(), children: s }) : i ? /* @__PURE__ */ e("span", { id: `${r}-hint`, className: d.hint(), children: i }) : null
+    t ? /* @__PURE__ */ e("span", { id: `${i}-error`, className: d.error(), children: t }) : r ? /* @__PURE__ */ e("span", { id: `${i}-hint`, className: d.hint(), children: r }) : null
   ] });
-}), ee = K(function({ id: t, label: l, hint: i, error: s, placeholder: n, options: m, className: f, ...h }, r) {
-  const u = V(), d = t || u, x = s ? `${d}-error` : i ? `${d}-hint` : void 0, b = I();
-  return /* @__PURE__ */ c("label", { className: b.root(), htmlFor: d, children: [
-    l ? /* @__PURE__ */ e("span", { className: b.label(), children: l }) : null,
+}), te = V(function({ id: s, label: l, hint: r, error: t, placeholder: n, options: o, className: f, ...h }, i) {
+  const u = z(), d = s || u, k = t ? `${d}-error` : r ? `${d}-hint` : void 0, N = K();
+  return /* @__PURE__ */ c("label", { className: N.root(), htmlFor: d, children: [
+    l ? /* @__PURE__ */ e("span", { className: N.label(), children: l }) : null,
     /* @__PURE__ */ c(
       "select",
       {
-        ref: r,
+        ref: i,
         id: d,
-        className: k(S(), f),
-        "aria-invalid": s ? "true" : void 0,
-        "aria-describedby": x,
+        className: x(F(), f),
+        "aria-invalid": t ? "true" : void 0,
+        "aria-describedby": k,
         ...h,
         children: [
           n ? /* @__PURE__ */ e("option", { value: "", disabled: !0, children: n }) : null,
-          m.map((g) => /* @__PURE__ */ e("option", { value: g.value, disabled: g.disabled, children: g.label }, String(g.value)))
+          o.map((v) => /* @__PURE__ */ e("option", { value: v.value, disabled: v.disabled, children: v.label }, String(v.value)))
         ]
       }
     ),
-    s ? /* @__PURE__ */ e("span", { id: `${d}-error`, className: b.error(), children: s }) : i ? /* @__PURE__ */ e("span", { id: `${d}-hint`, className: b.hint(), children: i }) : null
+    t ? /* @__PURE__ */ e("span", { id: `${d}-error`, className: N.error(), children: t }) : r ? /* @__PURE__ */ e("span", { id: `${d}-hint`, className: N.hint(), children: r }) : null
   ] });
 });
-function ae({
+function se({
   as: a = "div",
-  children: t,
+  children: s,
   className: l,
-  direction: i = "column",
-  gap: s = "md",
+  direction: r = "column",
+  gap: t = "md",
   align: n = "stretch",
-  justify: m = "start",
+  justify: o = "start",
   wrap: f = !1,
   ...h
 }) {
   return /* @__PURE__ */ e(
     a,
     {
-      className: k(P({ direction: i, gap: s, align: n, justify: m, wrap: f }), l),
+      className: x(P({ direction: r, gap: t, align: n, justify: o, wrap: f }), l),
       ...h,
-      children: t
+      children: s
     }
   );
 }
-const te = K(function({ id: t, label: l, hint: i, error: s, className: n, ...m }, f) {
-  const h = V(), r = t || h, u = s ? `${r}-error` : i ? `${r}-hint` : void 0, d = I();
-  return /* @__PURE__ */ c("label", { className: d.root(), htmlFor: r, children: [
+const ne = V(function({ id: s, label: l, hint: r, error: t, className: n, ...o }, f) {
+  const h = z(), i = s || h, u = t ? `${i}-error` : r ? `${i}-hint` : void 0, d = K();
+  return /* @__PURE__ */ c("label", { className: d.root(), htmlFor: i, children: [
     l ? /* @__PURE__ */ e("span", { className: d.label(), children: l }) : null,
     /* @__PURE__ */ e(
       "textarea",
       {
         ref: f,
-        id: r,
-        className: k(F(), n),
-        "aria-invalid": s ? "true" : void 0,
+        id: i,
+        className: x(_(), n),
+        "aria-invalid": t ? "true" : void 0,
         "aria-describedby": u,
-        ...m
+        ...o
       }
     ),
-    s ? /* @__PURE__ */ e("span", { id: `${r}-error`, className: d.error(), children: s }) : i ? /* @__PURE__ */ e("span", { id: `${r}-hint`, className: d.hint(), children: i }) : null
+    t ? /* @__PURE__ */ e("span", { id: `${i}-error`, className: d.error(), children: t }) : r ? /* @__PURE__ */ e("span", { id: `${i}-hint`, className: d.hint(), children: r }) : null
   ] });
-}), se = ({
+}), re = ({
   steps: a,
-  currentStep: t,
+  currentStep: s,
   orientation: l = "vertical",
-  mode: i = "auto",
-  mobileLayout: s = "circular",
+  mode: r = "auto",
+  mobileLayout: t = "circular",
   mobileLabel: n = "",
-  className: m = ""
+  className: o = ""
 }) => {
-  var L;
-  const [f, h] = B(!1);
-  E(() => {
-    if (i === "auto") {
+  var M;
+  const [f, h] = E(!1);
+  T(() => {
+    if (r === "auto") {
       h(window.innerWidth < 640);
-      const o = () => {
+      const m = () => {
         h(window.innerWidth < 640);
       };
-      return window.addEventListener("resize", o), () => {
-        window.removeEventListener("resize", o);
+      return window.addEventListener("resize", m), () => {
+        window.removeEventListener("resize", m);
       };
     }
-  }, [i]);
-  const r = i === "mobile" ? !0 : i === "desktop" ? !1 : f, u = 20, d = 5, x = 2 * Math.PI * u, b = (u + d) * 2, g = 7, $ = M(() => {
-    const o = a.length;
-    return (x - o * g) / o;
-  }, [a.length, x, g]), R = M(() => {
-    const o = Math.min(Math.max(t, 1), a.length);
+  }, [r]);
+  const i = r === "mobile" ? !0 : r === "desktop" ? !1 : f, u = 20, d = 5, k = 2 * Math.PI * u, N = (u + d) * 2, v = 7, w = R(() => {
+    const m = a.length;
+    return (k - m * v) / m;
+  }, [a.length, k, v]), y = R(() => {
+    const m = Math.min(Math.max(s, 1), a.length);
     return Array.from(
-      { length: o },
-      (p, v) => `${$} ${v < o - 1 ? g : x}`
+      { length: m },
+      (b, g) => `${w} ${g < m - 1 ? v : k}`
     ).join(" ");
-  }, [t, a.length, $, x, g]), z = ((L = a[Math.min(Math.max(t - 1, 0), a.length - 1)]) == null ? void 0 : L.title) || "", T = n || `Paso ${t} de ${a.length}`, C = (o) => {
-    const p = o + 1;
-    return p < t ? "completed" : p === t ? "active" : "upcoming";
-  }, N = w();
-  return r ? s === "circular" ? /* @__PURE__ */ c("div", { className: `${N.mobileRoot()} ${m}`.trim(), children: [
-    /* @__PURE__ */ c("div", { className: N.mobileInfo(), children: [
-      /* @__PURE__ */ e("span", { className: N.mobileTitle(), children: z }),
-      /* @__PURE__ */ e("span", { className: N.mobileLabel(), children: T })
+  }, [s, a.length, w, k, v]), C = ((M = a[Math.min(Math.max(s - 1, 0), a.length - 1)]) == null ? void 0 : M.title) || "", j = n || `Paso ${s} de ${a.length}`, L = (m) => {
+    const b = m + 1;
+    return b < s ? "completed" : b === s ? "active" : "upcoming";
+  }, p = $();
+  return i ? t === "circular" ? /* @__PURE__ */ c("div", { className: `${p.mobileRoot()} ${o}`.trim(), children: [
+    /* @__PURE__ */ c("div", { className: p.mobileInfo(), children: [
+      /* @__PURE__ */ e("span", { className: p.mobileTitle(), children: C }),
+      /* @__PURE__ */ e("span", { className: p.mobileLabel(), children: j })
     ] }),
     /* @__PURE__ */ c(
       "div",
       {
-        className: N.mobileProgress(),
-        style: { width: `${b}px`, height: `${b}px` },
+        className: p.mobileProgress(),
+        style: { width: `${N}px`, height: `${N}px` },
         children: [
-          /* @__PURE__ */ c("svg", { width: b, height: b, className: "-rotate-90", children: [
+          /* @__PURE__ */ c("svg", { width: N, height: N, className: "-rotate-90", children: [
             /* @__PURE__ */ e(
               "circle",
               {
-                cx: b / 2,
-                cy: b / 2,
+                cx: N / 2,
+                cy: N / 2,
                 r: u,
                 fill: "none",
                 className: "stroke-km-border",
                 strokeWidth: d,
-                strokeDasharray: `${$} ${g}`,
+                strokeDasharray: `${w} ${v}`,
                 strokeLinecap: "square"
               }
             ),
             /* @__PURE__ */ e(
               "circle",
               {
-                cx: b / 2,
-                cy: b / 2,
+                cx: N / 2,
+                cy: N / 2,
                 r: u,
                 fill: "none",
                 className: "stroke-km-primary",
                 strokeWidth: d,
-                strokeDasharray: R,
+                strokeDasharray: y,
                 strokeLinecap: "square"
               }
             )
           ] }),
-          /* @__PURE__ */ c("span", { className: N.mobilePercentText(), children: [
-            t,
+          /* @__PURE__ */ c("span", { className: p.mobilePercentText(), children: [
+            s,
             "/",
             a.length
           ] })
         ]
       }
     )
-  ] }) : /* @__PURE__ */ c("div", { className: `${N.mobileHorizRoot()} ${m}`.trim(), children: [
-    /* @__PURE__ */ c("div", { className: N.mobileHorizHeader(), children: [
-      /* @__PURE__ */ e("span", { className: N.mobileHorizTitle(), children: z }),
-      /* @__PURE__ */ c("span", { className: N.mobileHorizSteps(), children: [
-        t,
+  ] }) : /* @__PURE__ */ c("div", { className: `${p.mobileHorizRoot()} ${o}`.trim(), children: [
+    /* @__PURE__ */ c("div", { className: p.mobileHorizHeader(), children: [
+      /* @__PURE__ */ e("span", { className: p.mobileHorizTitle(), children: C }),
+      /* @__PURE__ */ c("span", { className: p.mobileHorizSteps(), children: [
+        s,
         "/",
         a.length
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: N.mobileHorizTrack(), children: a.map((o, p) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: p.mobileHorizTrack(), children: a.map((m, b) => /* @__PURE__ */ e(
       "div",
       {
-        className: `${N.mobileHorizBar()} ${p + 1 <= t ? "bg-km-primary" : "bg-km-border"}`.trim()
+        className: `${p.mobileHorizBar()} ${b + 1 <= s ? "bg-km-primary" : "bg-km-border"}`.trim()
       },
-      p
+      b
     )) })
-  ] }) : l === "horizontal" ? /* @__PURE__ */ e("ol", { className: `flex flex-row items-center justify-between w-full gap-4 ${m}`.trim(), children: a.map((o, p) => {
-    const v = C(p), y = p === a.length - 1;
+  ] }) : l === "horizontal" ? /* @__PURE__ */ e("ol", { className: `flex flex-row items-center justify-between w-full gap-4 ${o}`.trim(), children: a.map((m, b) => {
+    const g = L(b), I = b === a.length - 1;
     return /* @__PURE__ */ c("li", { className: "flex items-center flex-1 last:flex-none gap-4", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center gap-3 shrink-0", children: [
-        /* @__PURE__ */ e("div", { className: w({ state: v }).stepCircle(), children: v === "completed" ? /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: $({ state: g }).stepCircle(), children: g === "completed" ? /* @__PURE__ */ e(
           "svg",
           {
             width: "20",
@@ -264,24 +264,24 @@ const te = K(function({ id: t, label: l, hint: i, error: s, className: n, ...m }
             className: "w-5 h-5",
             children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
           }
-        ) : /* @__PURE__ */ e("span", { className: "text-sm font-bold", children: p + 1 }) }),
+        ) : /* @__PURE__ */ e("span", { className: "text-sm font-bold", children: b + 1 }) }),
         /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ e("span", { className: `${w({ state: v }).title()} text-sm font-bold whitespace-nowrap`, children: o.title }),
-          o.description && /* @__PURE__ */ e("span", { className: "text-xs text-km-muted-foreground whitespace-nowrap max-w-[150px] truncate", children: o.description })
+          /* @__PURE__ */ e("span", { className: `${$({ state: g }).title()} text-sm font-bold whitespace-nowrap`, children: m.title }),
+          m.description && /* @__PURE__ */ e("span", { className: "text-xs text-km-muted-foreground whitespace-nowrap max-w-[150px] truncate", children: m.description })
         ] })
       ] }),
-      !y && /* @__PURE__ */ e(
+      !I && /* @__PURE__ */ e(
         "div",
         {
-          className: `flex-1 h-[3px] rounded-full transition-all duration-300 ${v === "completed" ? "bg-km-success" : v === "active" ? "bg-gradient-to-r from-km-primary to-km-border" : "bg-km-border"}`.trim()
+          className: `flex-1 h-[3px] rounded-full transition-all duration-300 ${g === "completed" ? "bg-km-success" : g === "active" ? "bg-gradient-to-r from-km-primary to-km-border" : "bg-km-border"}`.trim()
         }
       )
-    ] }, o.title);
-  }) }) : /* @__PURE__ */ e("ol", { className: `${w({ orientation: "vertical" }).root()} ${m}`.trim(), children: a.map((o, p) => {
-    const v = C(p), y = p === a.length - 1;
-    return /* @__PURE__ */ c("li", { className: N.step(), children: [
-      /* @__PURE__ */ c("div", { className: N.stepContainer(), children: [
-        /* @__PURE__ */ e("div", { className: w({ state: v }).stepCircle(), children: v === "completed" ? /* @__PURE__ */ e(
+    ] }, m.title);
+  }) }) : /* @__PURE__ */ e("ol", { className: `${$({ orientation: "vertical" }).root()} ${o}`.trim(), children: a.map((m, b) => {
+    const g = L(b), I = b === a.length - 1;
+    return /* @__PURE__ */ c("li", { className: p.step(), children: [
+      /* @__PURE__ */ c("div", { className: p.stepContainer(), children: [
+        /* @__PURE__ */ e("div", { className: $({ state: g }).stepCircle(), children: g === "completed" ? /* @__PURE__ */ e(
           "svg",
           {
             width: "20",
@@ -295,69 +295,111 @@ const te = K(function({ id: t, label: l, hint: i, error: s, className: n, ...m }
             className: "w-5 h-5",
             children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
           }
-        ) : /* @__PURE__ */ e("span", { className: "text-sm font-bold", children: p + 1 }) }),
-        !y && /* @__PURE__ */ e(
+        ) : /* @__PURE__ */ e("span", { className: "text-sm font-bold", children: b + 1 }) }),
+        !I && /* @__PURE__ */ e(
           "div",
           {
-            className: `${w({ state: v, orientation: "vertical" }).connector()} ${v === "active" ? "bg-gradient-to-b from-km-primary to-km-border" : ""}`.trim()
+            className: `${$({ state: g, orientation: "vertical" }).connector()} ${g === "active" ? "bg-gradient-to-b from-km-primary to-km-border" : ""}`.trim()
           }
         )
       ] }),
-      /* @__PURE__ */ c("div", { className: N.content(), children: [
-        /* @__PURE__ */ e("span", { className: w({ state: v }).title(), children: o.title }),
-        o.description && /* @__PURE__ */ e("span", { className: N.description(), children: o.description })
+      /* @__PURE__ */ c("div", { className: p.content(), children: [
+        /* @__PURE__ */ e("span", { className: $({ state: g }).title(), children: m.title }),
+        m.description && /* @__PURE__ */ e("span", { className: p.description(), children: m.description })
       ] })
-    ] }, o.title);
+    ] }, m.title);
   }) });
 }, ie = ({
   isChecked: a = !1,
-  onChange: t,
+  onChange: s,
   label: l = "",
-  size: i = "medium",
-  disabled: s = !1,
+  size: r = "medium",
+  disabled: t = !1,
   className: n = ""
 }) => {
-  const [m, f] = B(a);
-  E(() => {
+  const [o, f] = E(a);
+  T(() => {
     f(a);
   }, [a]);
   const h = () => {
-    if (s) return;
-    const u = !m;
-    f(u), t && t(u);
-  }, r = q({
-    size: i,
-    checked: m,
-    disabled: s
+    if (t) return;
+    const u = !o;
+    f(u), s && s(u);
+  }, i = q({
+    size: r,
+    checked: o,
+    disabled: t
   });
-  return /* @__PURE__ */ c("div", { className: `${r.root()} ${n}`.trim(), children: [
-    l && /* @__PURE__ */ e("span", { className: r.label(), onClick: h, children: l }),
+  return /* @__PURE__ */ c("div", { className: `${i.root()} ${n}`.trim(), children: [
+    l && /* @__PURE__ */ e("span", { className: i.label(), onClick: h, children: l }),
     /* @__PURE__ */ e(
       "div",
       {
-        className: r.track(),
+        className: i.track(),
         onClick: h,
         role: "checkbox",
-        "aria-checked": m,
-        "aria-disabled": s,
+        "aria-checked": o,
+        "aria-disabled": t,
         tabIndex: 0,
         onKeyDown: (u) => {
           (u.key === " " || u.key === "Enter") && (u.preventDefault(), h());
         },
-        children: /* @__PURE__ */ e("div", { className: r.thumb() })
+        children: /* @__PURE__ */ e("div", { className: i.thumb() })
       }
     )
   ] });
+}, le = ({
+  as: a = "div",
+  variant: s = "default",
+  tone: l = "default",
+  animation: r = "pulse",
+  width: t,
+  height: n,
+  rounded: o,
+  count: f = 1,
+  loading: h = !0,
+  children: i,
+  className: u,
+  style: d,
+  ...k
+}) => {
+  if (!h && i)
+    return /* @__PURE__ */ e(B, { children: i });
+  const N = {
+    ...d,
+    ...t ? { width: typeof t == "number" ? `${t}px` : t } : {},
+    ...n ? { height: typeof n == "number" ? `${n}px` : n } : {},
+    ...o ? { borderRadius: o } : {}
+  }, v = U({ variant: s, tone: l, animation: r, className: u });
+  return f > 1 ? /* @__PURE__ */ e(B, { children: Array.from({ length: f }).map((w, y) => /* @__PURE__ */ e(
+    a,
+    {
+      className: v,
+      style: N,
+      "aria-hidden": "true",
+      ...k
+    },
+    y
+  )) }) : /* @__PURE__ */ e(
+    a,
+    {
+      className: v,
+      style: N,
+      "aria-hidden": "true",
+      ...k
+    }
+  );
 };
 export {
-  Z as KmAlert,
-  J as KmBadge,
-  Q as KmButton,
-  X as KmCard,
-  Y as KmInput,
-  ee as KmSelect,
-  ae as KmStack,
-  se as KmStepper,
-  te as KmTextarea,
+  Q as KmAlert,
+  X as KmBadge,
+  Y as KmButton,
+  ee as KmCard,
+  ae as KmInput,
+  te as KmSelect,
+  le as KmSkeleton,
+  se as KmStack,
+  re as KmStepper,
+  ne as KmTextarea,
   ie as KmToggleSwitch
 };