@dronico/droni-kit 1.5.2 → 1.5.4

package/dist/droni-kit.js

@@ -1,5 +1,17 @@
-import { defineComponent as x, computed as h, createElementBlock as o, openBlock as d, normalizeClass as u, renderSlot as y, createCommentVNode as v, createElementVNode as z, createTextVNode as f, toDisplayString as S } from "vue";
-const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer hover:shadow-md overflow-hidden text-ellipsis whitespace-nowrap active:scale-95", F = /* @__PURE__ */ x({
+import { defineComponent as x, computed as h, createElementBlock as k, openBlock as a, normalizeClass as v, renderSlot as y, createCommentVNode as g, createElementVNode as z, createTextVNode as f, toDisplayString as S } from "vue";
+const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
+  dk:transition
+  dk:text-center
+  dk:rounded
+  dk:disabled:opacity-50
+  dk:disabled:cursor-not-allowed
+  dk:cursor-pointer
+  dk:hover:shadow-md
+  dk:overflow-hidden
+  dk:text-ellipsis
+  dk:whitespace-nowrap
+  dk:active:scale-95
+  dk:max-w-full`, F = /* @__PURE__ */ x({
   __name: "DuiButton",
   props: {
     variant: {
@@ -35,57 +47,213 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded
       default: void 0
     }
   },
-  setup(l) {
-    const r = l, e = {
-      sm: "text-sm px-3 py-1.5",
-      md: "text-base px-4 py-2",
-      lg: "text-lg px-5 py-3"
-    }, n = {
+  setup(o) {
+    const d = o, e = {
+      sm: "dk:text-sm dk:px-3 dk:py-1.5",
+      md: "dk:text-base dk:px-4 dk:py-2",
+      lg: "dk:text-lg dk:px-5 dk:py-3"
+    }, l = {
       solid: {
-        base: "border-b",
-        neutral: "border-zinc-500 dark:border-zinc-600 bg-zinc-200 text-zinc-800 hover:bg-zinc-300 hover:text-zinc-900 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:hover:text-zinc-50",
-        primary: "border-slate-500 dark:border-slate-600 bg-slate-200 text-slate-800 hover:bg-slate-300 hover:text-slate-900 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
-        secondary: "border-pink-500 dark:border-pink-600 bg-pink-200 text-pink-800 hover:bg-pink-300 hover:text-pink-900 dark:bg-pink-700 dark:text-pink-200 dark:hover:bg-pink-600 dark:hover:text-pink-100",
-        success: " border-emerald-500 dark:border-emerald-600 bg-emerald-200 text-emerald-800 hover:bg-emerald-300 hover:text-emerald-900 dark:bg-emerald-700 dark:text-emerald-200 dark:hover:bg-emerald-600 dark:hover:text-emerald-100",
-        danger: "border-rose-500 dark:border-rose-600 bg-rose-200 text-rose-800 hover:bg-rose-300 hover:text-rose-900 dark:bg-rose-700 dark:text-rose-200 dark:hover:bg-rose-600 dark:hover:text-rose-100",
-        warning: "border-amber-500 dark:border-amber-600 bg-amber-200 text-amber-800 hover:bg-amber-300 hover:text-amber-900 dark:bg-amber-700 dark:text-amber-200 dark:hover:bg-amber-600 dark:hover:text-amber-100"
+        base: "dk:border-b",
+        neutral: `
+      dk:border-zinc-500
+      dk:dark:border-zinc-600
+      dk:bg-zinc-200
+      dk:text-zinc-800
+      dk:hover:bg-zinc-300
+      dk:hover:text-zinc-900
+      dk:dark:bg-zinc-700
+      dk:dark:text-zinc-200
+      dk:dark:hover:bg-zinc-600
+      dk:dark:hover:text-zinc-50`,
+        primary: `
+      dk:border-slate-500
+      dk:dark:border-slate-600
+      dk:bg-slate-200
+      dk:text-slate-800
+      dk:hover:bg-slate-300
+      dk:hover:text-slate-900
+      dk:dark:bg-slate-700
+      dk:dark:text-slate-200
+      dk:dark:hover:bg-slate-600
+      dk:dark:hover:text-slate-100`,
+        secondary: `
+      dk:border-pink-500
+      dk:dark:border-pink-600
+      dk:bg-pink-200
+      dk:text-pink-800
+      dk:hover:bg-pink-300
+      dk:hover:text-pink-900
+      dk:dark:bg-pink-700
+      dk:dark:text-pink-200
+      dk:dark:hover:bg-pink-600
+      dk:dark:hover:text-pink-100`,
+        success: `
+      dk:border-emerald-500
+      dk:dark:border-emerald-600
+      dk:bg-emerald-200
+      dk:text-emerald-800
+      dk:hover:bg-emerald-300
+      dk:hover:text-emerald-900
+      dk:dark:bg-emerald-700
+      dk:dark:text-emerald-200
+      dk:dark:hover:bg-emerald-600
+      dk:dark:hover:text-emerald-100`,
+        danger: `
+      dk:border-rose-500
+      dk:dark:border-rose-600
+      dk:bg-rose-200
+      dk:text-rose-800
+      dk:hover:bg-rose-300
+      dk:hover:text-rose-900
+      dk:dark:bg-rose-700
+      dk:dark:text-rose-200
+      dk:dark:hover:bg-rose-600
+      dk:dark:hover:text-rose-100`,
+        warning: `
+      dk:border-amber-500
+      dk:dark:border-amber-600
+      dk:bg-amber-200
+      dk:text-amber-800
+      dk:hover:bg-amber-300
+      dk:hover:text-amber-900
+      dk:dark:bg-amber-700
+      dk:dark:text-amber-200
+      dk:dark:hover:bg-amber-600
+      dk:dark:hover:text-amber-100`
       },
       outline: {
-        base: "border",
-        neutral: "border-zinc-600 text-zinc-800 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-300 dark:text-zinc-200 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
-        primary: "border-sky-600 text-sky-800 hover:bg-sky-100 hover:text-sky-900 dark:border-sky-300 dark:text-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-50",
-        secondary: "border-pink-600 text-pink-800 hover:bg-pink-100 hover:text-pink-900 dark:border-pink-300 dark:text-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-50",
-        success: "border-green-600 text-green-800 hover:bg-green-100 hover:text-green-900 dark:border-green-300 dark:text-green-200 dark:hover:bg-green-800 dark:hover:text-green-50",
-        danger: "border-red-600 text-red-800 hover:bg-red-100 hover:text-red-900 dark:border-red-300 dark:text-red-200 dark:hover:bg-red-800 dark:hover:text-red-50",
-        warning: "border-yellow-600 text-yellow-800 hover:bg-yellow-100 hover:text-yellow-900 dark:border-yellow-300 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-50"
+        base: "dk:border",
+        neutral: `
+      dk:border-zinc-500
+      dk:dark:border-zinc-600
+      dk:text-zinc-800
+      dk:hover:bg-zinc-300
+      dk:hover:text-zinc-900
+      dk:dark:text-zinc-200
+      dk:dark:hover:bg-zinc-600
+      dk:dark:hover:text-zinc-100`,
+        primary: `
+      dk:border-slate-500
+      dk:dark:border-slate-600
+      dk:text-slate-800
+      dk:hover:bg-slate-300
+      dk:hover:text-slate-900
+      dk:dark:text-slate-200
+      dk:dark:hover:bg-slate-600
+      dk:dark:hover:text-slate-100`,
+        secondary: `
+      dk:border-pink-500
+      dk:dark:border-pink-600
+      dk:text-pink-800
+      dk:hover:bg-pink-300
+      dk:hover:text-pink-900
+      dk:dark:text-pink-200
+      dk:dark:hover:bg-pink-600
+      dk:dark:hover:text-pink-100`,
+        success: `
+      dk:border-emerald-500
+      dk:dark:border-emerald-600
+      dk:text-emerald-800
+      dk:hover:bg-emerald-300
+      dk:hover:text-emerald-900
+      dk:dark:text-emerald-200
+      dk:dark:hover:bg-emerald-600
+      dk:dark:hover:text-emerald-100`,
+        danger: `
+      dk:border-rose-500
+      dk:dark:border-rose-600
+      dk:text-rose-800
+      dk:hover:bg-rose-300
+      dk:hover:text-rose-900
+      dk:dark:text-rose-200
+      dk:dark:hover:bg-rose-600
+      dk:dark:hover:text-rose-100`,
+        warning: `
+      dk:border-amber-500
+      dk:dark:border-amber-600
+      dk:text-amber-800
+      dk:hover:bg-amber-300
+      dk:hover:text-amber-900
+      dk:dark:text-amber-200
+      dk:dark:hover:bg-amber-600
+      dk:dark:hover:text-amber-100`
       },
       ghost: {
-        base: "border-b border-transparent",
-        neutral: "hover:border-zinc-500 hover:dark:border-zinc-600 text-zinc-600 hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800",
-        primary: "hover:border-slate-500 hover:dark:border-slate-600 text-slate-600 hover:bg-slate-50 dark:text-slate-100 dark:hover:bg-slate-800",
-        secondary: "hover:border-pink-500 hover:dark:border-pink-600 text-pink-600 hover:bg-pink-50 dark:text-pink-100 dark:hover:bg-pink-800",
-        success: "hover:border-emerald-500 hover:dark:border-emerald-600 text-emerald-600 hover:bg-emerald-50 dark:text-emerald-100 dark:hover:bg-emerald-800",
-        danger: "hover:border-rose-500 hover:dark:border-rose-600 text-rose-600 hover:bg-rose-50 dark:text-rose-100 dark:hover:bg-rose-800",
-        warning: "hover:border-amber-500 hover:dark:border-amber-600 text-amber-600 hover:bg-amber-50 dark:text-amber-100 dark:hover:bg-amber-800"
+        base: "dk:border-b dk:border-transparent",
+        neutral: `
+      dk:hover:border-zinc-500
+      dk:hover:dark:border-zinc-600
+      dk:text-zinc-600
+      dk:hover:bg-zinc-50
+      dk:dark:text-zinc-100
+      dk:dark:hover:bg-zinc-800`,
+        primary: `
+      dk:hover:border-slate-500
+      dk:hover:dark:border-slate-600
+      dk:text-slate-600
+      dk:hover:bg-slate-50
+      dk:dark:text-slate-100
+      dk:dark:hover:bg-slate-800`,
+        secondary: `
+      dk:hover:border-pink-500
+      dk:hover:dark:border-pink-600
+      dk:text-pink-600
+      dk:hover:bg-pink-50
+      dk:dark:text-pink-100
+      dk:dark:hover:bg-pink-800`,
+        success: `
+      dk:hover:border-emerald-500
+      dk:hover:dark:border-emerald-600
+      dk:text-emerald-600
+      dk:hover:bg-emerald-50
+      dk:dark:text-emerald-100
+      dk:dark:hover:bg-emerald-800`,
+        danger: `
+      dk:hover:border-rose-500
+      dk:hover:dark:border-rose-600
+      dk:text-rose-600
+      dk:hover:bg-rose-50
+      dk:dark:text-rose-100
+      dk:dark:hover:bg-rose-800`,
+        warning: `
+      dk:hover:border-amber-500
+      dk:hover:dark:border-amber-600
+      dk:text-amber-600
+      dk:hover:bg-amber-50
+      dk:dark:text-amber-100
+      dk:dark:hover:bg-amber-800`
       }
     }, c = h(() => {
-      var i;
-      const a = (((i = n[r.variant]) == null ? void 0 : i[r.color]) || "") + " " + n[r.variant].base, s = e[r.size] || "", p = r.block ? "w-full" : "";
-      return [B, a, s, p].join(" ");
+      var n;
+      const t = (((n = l[d.variant]) == null ? void 0 : n[d.color]) || "") + " " + l[d.variant].base, s = e[d.size] || "", p = d.block ? "dk:w-full" : "";
+      return [B, t, s, p].join(" ");
     });
-    return (a, s) => (d(), o("button", {
-      type: r.type,
-      class: u(c.value),
-      title: r.title,
-      disabled: r.disabled || r.loading
+    return (t, s) => (a(), k("button", {
+      type: d.type,
+      class: v(c.value),
+      title: d.title,
+      disabled: d.disabled || d.loading
     }, [
-      r.loading ? (d(), o("span", q, "Cargando...")) : y(a.$slots, "default", { key: 0 })
+      d.loading ? (a(), k("span", q, "Cargando...")) : y(t.$slots, "default", { key: 0 })
     ], 10, C));
   }
 }), $ = ["for"], V = {
   key: 0,
-  class: "text-rose-500"
-}, D = ["type", "value", "disabled", "placeholder", "required", "name", "id", "pattern", "aria-label", "aria-disabled", "aria-required"], j = "border-b border-zinc-300 bg-zinc-50 text-zinc-800 focus:outline-none focus:bg-zinc-100 dark:bg-zinc-700 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:focus:bg-zinc-700 dark:[color-scheme:dark]", G = /* @__PURE__ */ x({
+  class: "dk:text-rose-500"
+}, D = ["type", "value", "disabled", "placeholder", "required", "name", "id", "pattern", "aria-label", "aria-disabled", "aria-required"], j = `
+  dk:border-b
+  dk:border-zinc-300
+  dk:bg-zinc-50
+  dk:text-zinc-800
+  dk:focus:outline-none
+  dk:focus:bg-zinc-100
+  dk:dark:bg-zinc-700
+  dk:dark:border-zinc-600
+  dk:dark:bg-zinc-800
+  dk:dark:text-zinc-100
+  dk:dark:focus:bg-zinc-700
+  dk:dark:[color-scheme:dark]`, G = /* @__PURE__ */ x({
   __name: "DuiInput",
   props: {
     modelValue: {
@@ -138,47 +306,47 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded
     }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: r }) {
-    const e = l, n = r;
-    function c(b) {
-      const k = b.target;
-      n("update:modelValue", k.value);
+  setup(o, { emit: d }) {
+    const e = o, l = d;
+    function c(i) {
+      const b = i.target;
+      l("update:modelValue", b.value);
     }
-    const a = {
-      sm: "text-sm px-3 py-1.5",
-      md: "text-base px-3 py-2",
-      lg: "text-lg px-5 py-3"
+    const t = {
+      sm: "dk:text-sm dk:px-3 dk:py-1.5",
+      md: "dk:text-base dk:px-4 dk:py-2",
+      lg: "dk:text-lg dk:px-5 dk:py-3"
     }, s = {
-      all: "rounded",
-      top: "rounded-t",
-      bottom: "rounded-b",
-      left: "rounded-l",
-      right: "rounded-r",
-      none: "rounded-none"
+      all: "dk:rounded",
+      top: "dk:rounded-t",
+      bottom: "dk:rounded-b",
+      left: "dk:rounded-l",
+      right: "dk:rounded-r",
+      none: "dk:rounded-none"
     }, p = {
-      sm: "text-sm pb-0.5",
-      md: "text-base pb-1",
-      lg: "text-lg pb-2"
-    }, i = h(() => {
-      const b = a[e.size] || "", k = e.block ? "w-full" : "", t = s[e.rounded] || "";
-      return [j, b, k, t].join(" ");
+      sm: "dk:text-sm dk:pb-0.5",
+      md: "dk:text-base dk:pb-1",
+      lg: "dk:text-lg dk:pb-2"
+    }, n = h(() => {
+      const i = t[e.size] || "", b = e.block ? "dk:w-full" : "", r = s[e.rounded] || "";
+      return [j, i, b, r].join(" ");
     }), m = h(() => {
-      const b = p[e.size] || "", k = e.block ? "w-full" : "";
-      return [b, k].join(" ");
+      const i = p[e.size] || "", b = e.block ? "dk:w-full" : "";
+      return [i, b].join(" ");
     });
-    return (b, k) => (d(), o("div", null, [
-      e.label ? (d(), o("label", {
+    return (i, b) => (a(), k("div", null, [
+      e.label ? (a(), k("label", {
         key: 0,
         for: e.id,
-        class: u([m.value, "text-start block text-zinc-700 dark:text-zinc-200 px-0"])
+        class: v([m.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
         f(S(e.label) + " ", 1),
-        e.required ? (d(), o("span", V, "*")) : v("", !0)
-      ], 10, $)) : v("", !0),
+        e.required ? (a(), k("span", V, "*")) : g("", !0)
+      ], 10, $)) : g("", !0),
       z("input", {
         type: e.type,
-        class: u(i.value),
-        value: l.modelValue,
+        class: v(n.value),
+        value: o.modelValue,
         disabled: e.disabled,
         placeholder: e.placeholder,
         required: e.required,
@@ -194,8 +362,20 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded
   }
 }), I = ["for"], L = {
   key: 0,
-  class: "text-rose-500"
-}, N = ["value", "disabled", "placeholder", "required", "name", "id", "aria-label", "aria-disabled", "aria-required"], T = "border-b border-zinc-300 bg-zinc-50 text-zinc-800 focus:outline-none focus:bg-zinc-100 dark:bg-zinc-700 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:focus:bg-zinc-700 dark:[color-scheme:dark]", J = /* @__PURE__ */ x({
+  class: "dk:text-rose-500"
+}, N = ["value", "disabled", "placeholder", "required", "name", "id", "aria-label", "aria-disabled", "aria-required"], T = `
+  dk:border-b
+  dk:border-zinc-300
+  dk:bg-zinc-50
+  dk:text-zinc-800
+  dk:focus:outline-none
+  dk:focus:bg-zinc-100
+  dk:dark:bg-zinc-700
+  dk:dark:border-zinc-600
+  dk:dark:bg-zinc-800
+  dk:dark:text-zinc-100
+  dk:dark:focus:bg-zinc-700
+  dk:dark:[color-scheme:dark]`, J = /* @__PURE__ */ x({
   __name: "DuiTextarea",
   props: {
     modelValue: {
@@ -248,53 +428,53 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded
     }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: r }) {
-    const e = l, n = r;
-    function c(t) {
-      const g = t.target;
-      e.autoheight && k(g), n("update:modelValue", g.value);
+  setup(o, { emit: d }) {
+    const e = o, l = d;
+    function c(r) {
+      const u = r.target;
+      e.autoheight && b(u), l("update:modelValue", u.value);
     }
-    const a = {
-      sm: "text-sm px-3 py-1.5",
-      md: "text-base px-3 py-2",
-      lg: "text-lg px-5 py-3"
+    const t = {
+      sm: "dk:text-sm dk:px-3 dk:py-1.5",
+      md: "dk:text-base dk:px-3 dk:py-2",
+      lg: "dk:text-lg dk:px-5 dk:py-3"
     }, s = {
-      all: "rounded",
-      top: "rounded-t",
-      bottom: "rounded-b",
-      left: "rounded-l",
-      right: "rounded-r",
-      none: "rounded-none"
+      all: "dk:rounded",
+      top: "dk:rounded-t",
+      bottom: "dk:rounded-b",
+      left: "dk:rounded-l",
+      right: "dk:rounded-r",
+      none: "dk:rounded-none"
     }, p = {
-      sm: "text-sm pb-0.5",
-      md: "text-base pb-1",
-      lg: "text-lg pb-2"
-    }, i = {
-      none: "resize-none",
-      both: "resize",
-      horizontal: "resize-x",
-      vertical: "resize-y"
+      sm: "dk:text-sm dk:pb-0.5",
+      md: "dk:text-base dk:pb-1",
+      lg: "dk:text-lg dk:pb-2"
+    }, n = {
+      none: "dk:resize-none",
+      both: "dk:resize",
+      horizontal: "dk:resize-x",
+      vertical: "dk:resize-y"
     }, m = h(() => {
-      const t = a[e.size] || "", g = e.block ? "w-full" : "", _ = s[e.rounded] || "", w = i[e.resize] || "";
-      return [T, t, g, _, w].join(" ");
-    }), b = h(() => {
-      const t = p[e.size] || "", g = e.block ? "w-full" : "";
-      return [t, g].join(" ");
-    }), k = (t) => {
-      t.style.height = "auto", t.style.height = `${t.scrollHeight + 5}px`;
+      const r = t[e.size] || "", u = e.block ? "dk:w-full" : "", _ = s[e.rounded] || "", w = n[e.resize] || "";
+      return [T, r, u, _, w].join(" ");
+    }), i = h(() => {
+      const r = p[e.size] || "", u = e.block ? "dk:w-full" : "";
+      return [r, u].join(" ");
+    }), b = (r) => {
+      r.style.height = "auto", r.style.height = `${r.scrollHeight + 5}px`;
     };
-    return (t, g) => (d(), o("div", null, [
-      e.label ? (d(), o("label", {
+    return (r, u) => (a(), k("div", null, [
+      e.label ? (a(), k("label", {
         key: 0,
         for: e.id,
-        class: u([b.value, "text-start block text-zinc-700 dark:text-zinc-200 px-0"])
+        class: v([i.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
         f(S(e.label) + " ", 1),
-        e.required ? (d(), o("span", L, "*")) : v("", !0)
-      ], 10, I)) : v("", !0),
+        e.required ? (a(), k("span", L, "*")) : g("", !0)
+      ], 10, I)) : g("", !0),
       z("textarea", {
-        class: u(m.value),
-        value: l.modelValue,
+        class: v(m.value),
+        value: o.modelValue,
         disabled: e.disabled,
         placeholder: e.placeholder,
         required: e.required,
@@ -307,7 +487,19 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded
       }, null, 42, N)
     ]));
   }
-}), A = ["title"], E = { key: 1 }, H = "transition text-center rounded disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer hover:shadow-md overflow-hidden text-ellipsis whitespace-nowrap active:scale-95", K = /* @__PURE__ */ x({
+}), A = ["title"], E = { key: 1 }, H = `
+  dk:transition
+  dk:text-center
+  dk:rounded
+  dk:disabled:opacity-50
+  dk:disabled:cursor-not-allowed
+  dk:cursor-pointer
+  dk:hover:shadow-md
+  dk:overflow-hidden
+  dk:text-ellipsis
+  dk:whitespace-nowrap
+  dk:active:scale-95
+  dk:max-w-full`, K = /* @__PURE__ */ x({
   __name: "DuiAction",
   props: {
     variant: {
@@ -335,49 +527,193 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = "transition rounded
       default: void 0
     }
   },
-  setup(l) {
-    const r = l, e = {
-      sm: "text-sm px-3 py-1.5",
-      md: "text-base px-4 py-2",
-      lg: "text-lg px-5 py-3"
-    }, n = {
+  setup(o) {
+    const d = o, e = {
+      sm: "dk:text-sm dk:px-3 dk:py-1.5",
+      md: "dk:text-base dk:px-4 dk:py-2",
+      lg: "dk:text-lg dk:px-5 dk:py-3"
+    }, l = {
       solid: {
-        base: "border-b",
-        neutral: "border-zinc-500 dark:border-zinc-600 bg-zinc-200 text-zinc-800 hover:bg-zinc-300 hover:text-zinc-900 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:hover:text-zinc-50",
-        primary: "border-slate-500 dark:border-slate-600 bg-slate-200 text-slate-800 hover:bg-slate-300 hover:text-slate-900 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600 dark:hover:text-slate-100",
-        secondary: "border-pink-500 dark:border-pink-600 bg-pink-200 text-pink-800 hover:bg-pink-300 hover:text-pink-900 dark:bg-pink-700 dark:text-pink-200 dark:hover:bg-pink-600 dark:hover:text-pink-100",
-        success: " border-emerald-500 dark:border-emerald-600 bg-emerald-200 text-emerald-800 hover:bg-emerald-300 hover:text-emerald-900 dark:bg-emerald-700 dark:text-emerald-200 dark:hover:bg-emerald-600 dark:hover:text-emerald-100",
-        danger: "border-rose-500 dark:border-rose-600 bg-rose-200 text-rose-800 hover:bg-rose-300 hover:text-rose-900 dark:bg-rose-700 dark:text-rose-200 dark:hover:bg-rose-600 dark:hover:text-rose-100",
-        warning: "border-amber-500 dark:border-amber-600 bg-amber-200 text-amber-800 hover:bg-amber-300 hover:text-amber-900 dark:bg-amber-700 dark:text-amber-200 dark:hover:bg-amber-600 dark:hover:text-amber-100"
+        base: "dk:border-b",
+        neutral: `
+      dk:border-zinc-500
+      dk:dark:border-zinc-600
+      dk:bg-zinc-200
+      dk:text-zinc-800
+      dk:hover:bg-zinc-300
+      dk:hover:text-zinc-900
+      dk:dark:bg-zinc-700
+      dk:dark:text-zinc-200
+      dk:dark:hover:bg-zinc-600
+      dk:dark:hover:text-zinc-50`,
+        primary: `
+      dk:border-slate-500
+      dk:dark:border-slate-600
+      dk:bg-slate-200
+      dk:text-slate-800
+      dk:hover:bg-slate-300
+      dk:hover:text-slate-900
+      dk:dark:bg-slate-700
+      dk:dark:text-slate-200
+      dk:dark:hover:bg-slate-600
+      dk:dark:hover:text-slate-100`,
+        secondary: `
+      dk:border-pink-500
+      dk:dark:border-pink-600
+      dk:bg-pink-200
+      dk:text-pink-800
+      dk:hover:bg-pink-300
+      dk:hover:text-pink-900
+      dk:dark:bg-pink-700
+      dk:dark:text-pink-200
+      dk:dark:hover:bg-pink-600
+      dk:dark:hover:text-pink-100`,
+        success: `
+      dk:border-emerald-500
+      dk:dark:border-emerald-600
+      dk:bg-emerald-200
+      dk:text-emerald-800
+      dk:hover:bg-emerald-300
+      dk:hover:text-emerald-900
+      dk:dark:bg-emerald-700
+      dk:dark:text-emerald-200
+      dk:dark:hover:bg-emerald-600
+      dk:dark:hover:text-emerald-100`,
+        danger: `
+      dk:border-rose-500
+      dk:dark:border-rose-600
+      dk:bg-rose-200
+      dk:text-rose-800
+      dk:hover:bg-rose-300
+      dk:hover:text-rose-900
+      dk:dark:bg-rose-700
+      dk:dark:text-rose-200
+      dk:dark:hover:bg-rose-600
+      dk:dark:hover:text-rose-100`,
+        warning: `
+      dk:border-amber-500
+      dk:dark:border-amber-600
+      dk:bg-amber-200
+      dk:text-amber-800
+      dk:hover:bg-amber-300
+      dk:hover:text-amber-900
+      dk:dark:bg-amber-700
+      dk:dark:text-amber-200
+      dk:dark:hover:bg-amber-600
+      dk:dark:hover:text-amber-100`
       },
       outline: {
-        base: "border",
-        neutral: "border-zinc-600 text-zinc-800 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-300 dark:text-zinc-200 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
-        primary: "border-sky-600 text-sky-800 hover:bg-sky-100 hover:text-sky-900 dark:border-sky-300 dark:text-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-50",
-        secondary: "border-pink-600 text-pink-800 hover:bg-pink-100 hover:text-pink-900 dark:border-pink-300 dark:text-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-50",
-        success: "border-green-600 text-green-800 hover:bg-green-100 hover:text-green-900 dark:border-green-300 dark:text-green-200 dark:hover:bg-green-800 dark:hover:text-green-50",
-        danger: "border-red-600 text-red-800 hover:bg-red-100 hover:text-red-900 dark:border-red-300 dark:text-red-200 dark:hover:bg-red-800 dark:hover:text-red-50",
-        warning: "border-yellow-600 text-yellow-800 hover:bg-yellow-100 hover:text-yellow-900 dark:border-yellow-300 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-50"
+        base: "dk:border",
+        neutral: `
+      dk:border-zinc-600
+      dk:text-zinc-800
+      dk:hover:bg-zinc-100
+      dk:hover:text-zinc-900
+      dk:dark:border-zinc-300
+      dk:dark:text-zinc-200
+      dk:dark:hover:bg-zinc-800
+      dk:dark:hover:text-zinc-50`,
+        primary: `
+      dk:border-sky-600
+      dk:text-sky-800
+      dk:hover:bg-sky-100
+      dk:hover:text-sky-900
+      dk:dark:border-sky-300
+      dk:dark:text-sky-200
+      dk:dark:hover:bg-sky-800
+      dk:dark:hover:text-sky-50`,
+        secondary: `
+      dk:border-pink-600
+      dk:text-pink-800
+      dk:hover:bg-pink-100
+      dk:hover:text-pink-900
+      dk:dark:border-pink-300
+      dk:dark:text-pink-200
+      dk:dark:hover:bg-pink-800
+      dk:dark:hover:text-pink-50`,
+        success: `
+      dk:border-green-600
+      dk:text-green-800
+      dk:hover:bg-green-100
+      dk:hover:text-green-900
+      dk:dark:border-green-300
+      dk:dark:text-green-200
+      dk:dark:hover:bg-green-800
+      dk:dark:hover:text-green-50`,
+        danger: `
+      dk:border-red-600
+      dk:text-red-800
+      dk:hover:bg-red-100
+      dk:hover:text-red-900
+      dk:dark:border-red-300
+      dk:dark:text-red-200
+      dk:dark:hover:bg-red-800
+      dk:dark:hover:text-red-50`,
+        warning: `
+      dk:border-yellow-600
+      dk:text-yellow-800
+      dk:hover:bg-yellow-100
+      dk:hover:text-yellow-900
+      dk:dark:border-yellow-300
+      dk:dark:text-yellow-200
+      dk:dark:hover:bg-yellow-800
+      dk:dark:hover:text-yellow-50`
       },
       ghost: {
-        base: "border-b border-transparent",
-        neutral: "hover:border-zinc-500 hover:dark:border-zinc-600 text-zinc-600 hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800",
-        primary: "hover:border-slate-500 hover:dark:border-slate-600 text-slate-600 hover:bg-slate-50 dark:text-slate-100 dark:hover:bg-slate-800",
-        secondary: "hover:border-pink-500 hover:dark:border-pink-600 text-pink-600 hover:bg-pink-50 dark:text-pink-100 dark:hover:bg-pink-800",
-        success: "hover:border-emerald-500 hover:dark:border-emerald-600 text-emerald-600 hover:bg-emerald-50 dark:text-emerald-100 dark:hover:bg-emerald-800",
-        danger: "hover:border-rose-500 hover:dark:border-rose-600 text-rose-600 hover:bg-rose-50 dark:text-rose-100 dark:hover:bg-rose-800",
-        warning: "hover:border-amber-500 hover:dark:border-amber-600 text-amber-600 hover:bg-amber-50 dark:text-amber-100 dark:hover:bg-amber-800"
+        base: "dk:border-b dk:border-transparent",
+        neutral: `
+      dk:hover:border-zinc-500
+      dk:hover:dark:border-zinc-600
+      dk:text-zinc-600
+      dk:hover:bg-zinc-50
+      dk:dark:text-zinc-100
+      dk:dark:hover:bg-zinc-800`,
+        primary: `
+      dk:hover:border-slate-500
+      dk:hover:dark:border-slate-600
+      dk:text-slate-600
+      dk:hover:bg-slate-50
+      dk:dark:text-slate-100
+      dk:dark:hover:bg-slate-800`,
+        secondary: `
+      dk:hover:border-pink-500
+      dk:hover:dark:border-pink-600
+      dk:text-pink-600
+      dk:hover:bg-pink-50
+      dk:dark:text-pink-100
+      dk:dark:hover:bg-pink-800`,
+        success: `
+      dk:hover:border-emerald-500
+      dk:hover:dark:border-emerald-600
+      dk:text-emerald-600
+      dk:hover:bg-emerald-50
+      dk:dark:text-emerald-100
+      dk:dark:hover:bg-emerald-800`,
+        danger: `
+      dk:hover:border-rose-500
+      dk:hover:dark:border-rose-600
+      dk:text-rose-600
+      dk:hover:bg-rose-50
+      dk:dark:text-rose-100
+      dk:dark:hover:bg-rose-800`,
+        warning: `
+      dk:hover:border-amber-500
+      dk:hover:dark:border-amber-600
+      dk:text-amber-600
+      dk:hover:bg-amber-50
+      dk:dark:text-amber-100
+      dk:dark:hover:bg-amber-800`
       }
     }, c = h(() => {
-      var i;
-      const a = (((i = n[r.variant]) == null ? void 0 : i[r.color]) || "") + " " + n[r.variant].base, s = e[r.size] || "", p = r.block ? "block" : "inline-block";
-      return [H, a, s, p].join(" ");
+      var n;
+      const t = (((n = l[d.variant]) == null ? void 0 : n[d.color]) || "") + " " + l[d.variant].base, s = e[d.size] || "", p = d.block ? "dk:block" : "dk:inline-block";
+      return [H, t, s, p].join(" ");
     });
-    return (a, s) => (d(), o("span", {
-      class: u(c.value),
-      title: r.title
+    return (t, s) => (a(), k("span", {
+      class: v(c.value),
+      title: d.title
     }, [
-      r.loading ? (d(), o("span", E, "Cargando...")) : y(a.$slots, "default", { key: 0 })
+      d.loading ? (a(), k("span", E, "Cargando...")) : y(t.$slots, "default", { key: 0 })
     ], 10, A));
   }
 });