vlite3 0.4.8 → 0.5.2

package/components/Stats/Stats.vue.js

@@ -0,0 +1,307 @@
+import { defineComponent as j, computed as w, openBlock as r, createElementBlock as s, normalizeClass as t, Fragment as y, renderList as M, normalizeStyle as b, createElementVNode as l, toDisplayString as c, unref as h, createVNode as g, createCommentVNode as d } from "vue";
+import f from "../Icon.vue.js";
+import { $t as v } from "../../utils/i18n.js";
+const N = { class: "flex items-end justify-between w-full mt-3" }, V = {
+  key: 0,
+  class: "mt-1 flex items-center gap-1 text-sm"
+}, E = {
+  key: 0,
+  class: "text-muted-foreground truncate"
+}, L = {
+  key: 0,
+  class: "flex items-center gap-1 text-sm"
+}, O = {
+  key: 1,
+  class: "mt-2 flex items-center gap-1.5 text-sm"
+}, D = {
+  key: 0,
+  class: "text-muted-foreground truncate"
+}, F = {
+  key: 3,
+  class: "flex-1 flex flex-col justify-center min-w-0"
+}, q = {
+  key: 0,
+  class: "mt-1 flex items-center gap-1 text-sm"
+}, A = {
+  key: 0,
+  class: "text-muted-foreground truncate"
+}, G = { class: "flex-1 flex flex-col justify-center min-w-0" }, H = { class: "flex items-baseline gap-2 mt-1" }, J = {
+  key: 0,
+  class: "mt-2 flex items-center gap-1.5 text-sm"
+}, K = {
+  key: 0,
+  class: "text-muted-foreground truncate"
+}, U = /* @__PURE__ */ j({
+  __name: "Stats",
+  props: {
+    items: {},
+    variant: { default: "outline" },
+    layout: { default: "icon-left" },
+    columns: { default: 4 },
+    attached: { type: Boolean, default: !1 },
+    titleSize: { default: "" },
+    valueSize: { default: "" },
+    iconSize: { default: "" },
+    iconBoxShape: { default: "rounded" },
+    iconBoxStyle: { default: "transparent" },
+    class: { default: "" }
+  },
+  setup(n) {
+    const a = n, S = w(() => {
+      const i = Number(a.columns) || 4;
+      return i === 1 ? "grid-cols-1" : i === 2 ? "grid-cols-1 sm:grid-cols-2" : i === 3 ? "grid-cols-1 sm:grid-cols-3" : i === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : i === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : i === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+    }), z = w(() => [
+      "grid",
+      S.value,
+      a.attached ? "gap-0 border-t border-l overflow-hidden" : "gap-3 sm:gap-4.5",
+      a.variant === "shadow" && a.attached ? "shadow-md" : "",
+      a.class
+    ].join(" ")), C = (i, o) => {
+      const e = "flex p-5 relative transition-all duration-200", u = {
+        "icon-left": "flex-row items-center gap-3 text-left",
+        "icon-right": "flex-row items-center justify-between gap-3 text-left",
+        "icon-top": "flex-col items-start gap-3 text-left",
+        // title top, value bottom-left, icon bottom-right
+        "title-top-icon-bottom-right": "flex-col items-start gap-0 text-left",
+        // centered: value on top (bigger/bold), title below — no icon
+        "centered-value-title": "flex-col items-center justify-center text-center gap-1",
+        // floating icon overlapping card top-right corner
+        "floating-icon": "flex-col items-start gap-1 text-left",
+        // split-bar: colored left border accent with stacked text
+        "split-bar": "flex-row items-center gap-3 text-left border-l-4"
+      }, $ = u[a.layout] || u["icon-left"];
+      let x = "";
+      if (a.attached)
+        x = "border-b border-r hover:bg-muted/30", a.variant !== "transparent" && (x += " bg-card");
+      else {
+        switch (a.variant) {
+          case "solid": {
+            const B = i.color || "primary", m = {
+              primary: "bg-primary-light",
+              secondary: "bg-secondary",
+              success: "bg-success-light",
+              warning: "bg-warning-light",
+              danger: "bg-danger-light",
+              info: "bg-info-light"
+            };
+            x = `${m[B] || m.primary}`;
+            break;
+          }
+          case "outline":
+            x = "bg-body border";
+            break;
+          case "shadow":
+            x = "bg-body shadow-md border border-border/50";
+            break;
+          case "transparent":
+            x = "bg-transparent";
+            break;
+        }
+        x += " rounded-lg";
+      }
+      return [e, $, x].join(" ");
+    }, P = (i) => {
+      if (a.variant === "solid" && !a.attached) {
+        const o = i.color;
+        if (o && !["primary", "secondary", "success", "warning", "danger", "info"].includes(o))
+          return { backgroundColor: `${o}15` };
+      }
+      if (a.layout === "split-bar") {
+        const o = i.color, e = {
+          primary: "var(--color-primary)",
+          secondary: "var(--color-secondary)",
+          success: "var(--color-success)",
+          warning: "var(--color-warning)",
+          danger: "var(--color-danger)",
+          info: "var(--color-info)"
+        };
+        if (o)
+          return { borderLeftColor: e[o] || o };
+      }
+      return {};
+    }, I = w(() => a.iconBoxShape === "full-rounded" ? "rounded-full" : a.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), p = (i) => {
+      const o = `flex items-center justify-center shrink-0 ${I.value} p-3`, e = i.color || "primary";
+      if (a.iconBoxStyle === "transparent")
+        return `${o} bg-transparent ${{
+          primary: "text-primary",
+          secondary: "text-secondary-foreground",
+          success: "text-success-dark",
+          warning: "text-warning-dark",
+          danger: "text-danger-dark",
+          info: "text-info-dark"
+        }[e] || "text-primary"}`;
+      if (a.variant === "solid" && !a.attached) {
+        const u = {
+          primary: "bg-primary text-primary-fg",
+          secondary: "bg-foreground text-background",
+          success: "bg-success text-success-fg",
+          warning: "bg-warning text-warning-fg",
+          danger: "bg-danger text-danger-fg",
+          info: "bg-info text-info-fg"
+        };
+        return `${o} ${u[e] || u.primary}`;
+      } else {
+        const u = {
+          primary: "bg-primary-light text-primary",
+          secondary: "bg-secondary text-secondary-foreground",
+          success: "bg-success-light text-success-dark",
+          warning: "bg-warning-light text-warning-dark",
+          danger: "bg-danger-light text-danger-dark",
+          info: "bg-info-light text-info-dark"
+        };
+        return `${o} ${u[e] || u.primary}`;
+      }
+    }, k = (i) => {
+      const o = i.color;
+      return o && !["primary", "secondary", "success", "warning", "danger", "info"].includes(o) ? a.iconBoxStyle === "transparent" ? { color: o } : a.variant === "solid" && !a.attached ? { backgroundColor: o, color: "#fff" } : { color: o, backgroundColor: `${o}20` } : {};
+    };
+    return (i, o) => (r(), s("div", {
+      class: t(z.value)
+    }, [
+      (r(!0), s(y, null, M(n.items, (e, u) => (r(), s("div", {
+        key: e.id || u,
+        class: t(C(e)),
+        style: b(P(e))
+      }, [
+        n.layout === "title-top-icon-bottom-right" ? (r(), s(y, { key: 0 }, [
+          l("h3", {
+            class: t(n.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          l("div", N, [
+            l("div", null, [
+              l("p", {
+                class: t(n.valueSize || "text-2xl font-bold text-foreground truncate")
+              }, c(e.value), 3),
+              e.trend ? (r(), s("div", V, [
+                g(f, {
+                  icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
+                  class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+                }, null, 8, ["icon", "class"]),
+                l("span", {
+                  class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+                }, c(e.trend.value), 3),
+                e.trend.label ? (r(), s("span", E, c(e.trend.label), 1)) : d("", !0)
+              ])) : d("", !0)
+            ]),
+            e.icon ? (r(), s("div", {
+              key: 0,
+              class: t(p(e)),
+              style: b(k(e))
+            }, [
+              g(f, {
+                icon: e.icon,
+                class: t(n.iconSize || "w-6 h-6")
+              }, null, 8, ["icon", "class"])
+            ], 6)) : d("", !0)
+          ])
+        ], 64)) : n.layout === "centered-value-title" ? (r(), s(y, { key: 1 }, [
+          l("p", {
+            class: t(n.valueSize || "text-3xl font-bold text-foreground")
+          }, c(e.value), 3),
+          l("h3", {
+            class: t(n.titleSize || "text-sm font-medium text-muted-foreground")
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          e.trend ? (r(), s("div", L, [
+            g(f, {
+              icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
+              class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+            }, null, 8, ["icon", "class"]),
+            l("span", {
+              class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium"])
+            }, c(e.trend.value), 3)
+          ])) : d("", !0)
+        ], 64)) : n.layout === "floating-icon" ? (r(), s(y, { key: 2 }, [
+          e.icon ? (r(), s("div", {
+            key: 0,
+            class: t([p(e), "absolute top-4 right-4"]),
+            style: b(k(e))
+          }, [
+            g(f, {
+              icon: e.icon,
+              class: t(n.iconSize || "w-6 h-6")
+            }, null, 8, ["icon", "class"])
+          ], 6)) : d("", !0),
+          l("h3", {
+            class: t(n.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          l("p", {
+            class: t(n.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
+          }, c(e.value), 3),
+          e.trend ? (r(), s("div", O, [
+            g(f, {
+              icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
+              class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+            }, null, 8, ["icon", "class"]),
+            l("span", {
+              class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+            }, c(e.trend.value), 3),
+            e.trend.label ? (r(), s("span", D, c(e.trend.label), 1)) : d("", !0)
+          ])) : d("", !0)
+        ], 64)) : n.layout === "split-bar" ? (r(), s("div", F, [
+          l("h3", {
+            class: t(
+              n.titleSize || "text-xs font-semibold uppercase tracking-widest text-muted-foreground truncate"
+            )
+          }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+          l("p", {
+            class: t(n.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
+          }, c(e.value), 3),
+          e.trend ? (r(), s("div", q, [
+            g(f, {
+              icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
+              class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+            }, null, 8, ["icon", "class"]),
+            l("span", {
+              class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+            }, c(e.trend.value), 3),
+            e.trend.label ? (r(), s("span", A, c(e.trend.label), 1)) : d("", !0)
+          ])) : d("", !0)
+        ])) : (r(), s(y, { key: 4 }, [
+          e.icon && n.layout !== "icon-right" ? (r(), s("div", {
+            key: 0,
+            class: t(p(e)),
+            style: b(k(e))
+          }, [
+            g(f, {
+              icon: e.icon,
+              class: t(n.iconSize || "w-6 h-6")
+            }, null, 8, ["icon", "class"])
+          ], 6)) : d("", !0),
+          l("div", G, [
+            l("h3", {
+              class: t(n.titleSize || "text-sm font-medium text-muted-foreground truncate")
+            }, c(e.titleI18n ? h(v)(e.titleI18n) : e.title), 3),
+            l("div", H, [
+              l("p", {
+                class: t(n.valueSize || "text-2xl font-bold text-foreground truncate")
+              }, c(e.value), 3)
+            ]),
+            e.trend ? (r(), s("div", J, [
+              g(f, {
+                icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
+                class: t([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+              }, null, 8, ["icon", "class"]),
+              l("span", {
+                class: t([e.trend.isPositive ? "text-success-dark" : "text-danger-dark", "font-medium whitespace-nowrap"])
+              }, c(e.trend.value), 3),
+              e.trend.label ? (r(), s("span", K, c(e.trend.label), 1)) : d("", !0)
+            ])) : d("", !0)
+          ]),
+          e.icon && n.layout === "icon-right" ? (r(), s("div", {
+            key: 1,
+            class: t(p(e)),
+            style: b(k(e))
+          }, [
+            g(f, {
+              icon: e.icon,
+              class: t(n.iconSize || "w-6 h-6")
+            }, null, 8, ["icon", "class"])
+          ], 6)) : d("", !0)
+        ], 64))
+      ], 6))), 128))
+    ], 2));
+  }
+});
+export {
+  U as default
+};

package/components/Stats/Stats.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Stats.vue.js";
+export {
+  f as default
+};

package/components/Stats/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stats } from './Stats.vue';
+export * from './types';

package/components/Stats/types.d.ts

@@ -0,0 +1,32 @@
+export type StatsVariant = 'solid' | 'outline' | 'shadow' | 'transparent';
+export type StatsLayout = 'icon-left' | 'icon-right' | 'icon-top' | 'title-top-icon-bottom-right' | 'centered-value-title' | 'floating-icon' | 'split-bar';
+export type IconBoxShape = 'rounded' | 'full-rounded' | 'none';
+export type IconBoxStyle = 'filled' | 'transparent';
+export interface StatTrend {
+    value: string | number;
+    isPositive?: boolean;
+    label?: string;
+}
+export interface StatItemSchema {
+    id: string | number;
+    title: string;
+    titleI18n?: string;
+    value: string | number;
+    icon?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | string;
+    trend?: StatTrend;
+    [key: string]: any;
+}
+export interface StatsProps {
+    items: StatItemSchema[];
+    variant?: StatsVariant;
+    layout?: StatsLayout;
+    columns?: number | string;
+    attached?: boolean;
+    titleSize?: string;
+    valueSize?: string;
+    iconSize?: string;
+    iconBoxShape?: IconBoxShape;
+    iconBoxStyle?: IconBoxStyle;
+    class?: string;
+}

package/components/Switch.vue.d.ts

@@ -4,14 +4,15 @@ interface Props {
     label?: string;
     labelI18n?: string;
     class?: string;
+    id?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     "onUpdate:modelValue"?: (value: boolean) => any;
 }>, {
-    disabled: boolean;
     class: string;
+    disabled: boolean;
     modelValue: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/Switch.vue.js

@@ -1,13 +1,14 @@
 import { defineComponent as u, computed as c, openBlock as n, createElementBlock as i, createElementVNode as r, normalizeClass as t, toDisplayString as m, createCommentVNode as b } from "vue";
 import { $t as f } from "../utils/i18n.js";
-const p = { class: "flex items-center gap-2" }, g = ["aria-checked", "aria-label", "disabled"], v = /* @__PURE__ */ u({
+const p = { class: "flex items-center gap-2" }, g = ["id", "aria-checked", "aria-label", "disabled"], v = /* @__PURE__ */ u({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     label: {},
     labelI18n: {},
-    class: { default: "" }
+    class: { default: "" },
+    id: {}
   },
   emits: ["update:modelValue"],
   setup(e, { emit: s }) {
@@ -16,6 +17,7 @@ const p = { class: "flex items-center gap-2" }, g = ["aria-checked", "aria-label
     }, a = c(() => l.labelI18n ? f(l.labelI18n) : l.label);
     return (h, k) => (n(), i("div", p, [
       r("button", {
+        id: e.id,
         type: "button",
         role: "switch",
         "aria-checked": e.modelValue,

package/components/Tabes/Tabes.vue.d.ts

@@ -8,14 +8,14 @@ interface Props {
     textClass?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string | number) => any;
     change: (value: string | number) => any;
+    "update:modelValue": (value: string | number) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (value: string | number) => any;
     onChange?: (value: string | number) => any;
+    "onUpdate:modelValue"?: (value: string | number) => any;
 }>, {
-    size: TabesSize;
     variant: TabesVariant;
+    size: TabesSize;
     block: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;

package/components/Tabes/Tabes.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as M, ref as g, watch as c, onMounted as j, computed as p, openBlock as i, createElementBlock as u, normalizeClass as l, normalizeStyle as A, createCommentVNode as y, Fragment as E, renderList as N, createBlock as O, createElementVNode as T, toDisplayString as _, nextTick as D } from "vue";
-import { useResizeObserver as F } from "@vueuse/core";
-import q from "../Icon.vue.js";
-import { $t as G } from "../../utils/i18n.js";
-const H = ["aria-selected", "disabled", "onClick"], U = /* @__PURE__ */ M({
+import { defineComponent as E, ref as b, watch as l, onMounted as _, computed as g, openBlock as i, createElementBlock as p, normalizeClass as c, normalizeStyle as D, createCommentVNode as y, Fragment as N, renderList as O, createBlock as x, resolveDynamicComponent as P, mergeProps as T, withCtx as F, createElementVNode as q, toDisplayString as G, nextTick as H } from "vue";
+import { useResizeObserver as J } from "@vueuse/core";
+import K from "../Icon.vue.js";
+import { $t as Q } from "../../utils/i18n.js";
+const Z = /* @__PURE__ */ E({
   __name: "Tabes",
   props: {
     options: {},
@@ -13,33 +13,33 @@ const H = ["aria-selected", "disabled", "onClick"], U = /* @__PURE__ */ M({
     textClass: {}
   },
   emits: ["update:modelValue", "change"],
-  setup(s, { emit: x }) {
-    const r = s, v = x, d = g(null), f = g(/* @__PURE__ */ new Map()), h = (e, n) => {
-      e ? f.value.set(n, e) : f.value.delete(n);
-    }, b = g({
+  setup(s, { emit: h }) {
+    const n = s, v = h, u = b(null), d = b(/* @__PURE__ */ new Map()), k = (e, a) => {
+      e ? d.value.set(a, e) : d.value.delete(a);
+    }, f = b({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
     }), o = async () => {
-      await D();
-      const e = d.value, n = f.value.get(r.modelValue);
-      if (!e || !n) {
-        b.value.opacity = 0;
+      await H();
+      const e = u.value, a = d.value.get(n.modelValue);
+      if (!e || !a) {
+        f.value.opacity = 0;
         return;
       }
-      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), m = t.left - a.left, B = t.top - a.top, L = t.width, I = t.height;
-      b.value = {
-        width: `${L}px`,
-        height: `${I}px`,
-        transform: `translate(${m}px, ${B}px)`,
+      const r = e.getBoundingClientRect(), t = a.getBoundingClientRect(), m = t.left - r.left, M = t.top - r.top, j = t.width, A = t.height;
+      f.value = {
+        width: `${j}px`,
+        height: `${A}px`,
+        transform: `translate(${m}px, ${M}px)`,
         opacity: 1
       };
     };
-    F(d, o), c(() => r.modelValue, o), c(() => r.options, o, { deep: !0 }), c(() => r.size, o), c(() => r.block, o), j(o);
-    const k = (e) => {
+    J(u, o), l(() => n.modelValue, o), l(() => n.options, o, { deep: !0 }), l(() => n.size, o), l(() => n.block, o), _(o);
+    const C = (e) => {
       e.disabled || (v("update:modelValue", e.value), v("change", e.value));
-    }, C = p(() => ["inline-flex rounded-lg relative isolate", {
+    }, w = g(() => ["inline-flex rounded-lg relative isolate", {
       surface: "bg-secondary/80 p-1",
       primary: "bg-secondary p-1",
       secondary: "bg-secondary p-1",
@@ -47,18 +47,18 @@ const H = ["aria-selected", "disabled", "onClick"], U = /* @__PURE__ */ M({
       success: "bg-success/10 p-1",
       outline: "bg-transparent border border-border p-1",
       line: "bg-transparent gap-6 rounded-none p-0 border-b border-border w-full"
-    }[r.variant], r.block ? "flex w-full" : ""]), w = {
+    }[n.variant], n.block ? "flex w-full" : ""]), z = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, z = p(() => [r.variant === "line" ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex-1 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50"]), V = (e) => {
-      const n = e.value === r.modelValue, a = r.variant === "line";
+    }, V = g(() => [n.variant === "line" ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex-1 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50"]), $ = (e) => {
+      const a = e.value === n.modelValue, r = n.variant === "line";
       let t = "";
-      if (n)
-        if (a)
+      if (a)
+        if (r)
           t = "text-primary";
         else
-          switch (r.variant) {
+          switch (n.variant) {
             case "surface":
               t = "text-foreground";
               break;
@@ -81,12 +81,12 @@ const H = ["aria-selected", "disabled", "onClick"], U = /* @__PURE__ */ M({
               t = "text-foreground";
           }
       else
-        t = a ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+        t = r ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
       const m = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [z.value, t, m].join(" ");
-    }, R = p(() => {
+      return [V.value, t, m].join(" ");
+    }, R = g(() => {
       const e = "absolute left-0 top-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] z-0 pointer-events-none";
-      return r.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
+      return n.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
     }), S = () => ({
       surface: "bg-background",
       primary: "bg-primary",
@@ -95,41 +95,44 @@ const H = ["aria-selected", "disabled", "onClick"], U = /* @__PURE__ */ M({
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[r.variant], $ = (e) => e.labelI18n ? G(e.labelI18n) : e.label;
-    return (e, n) => (i(), u("div", {
+    })[n.variant], B = (e) => e.labelI18n ? Q(e.labelI18n) : e.label, I = (e) => e.to ? "router-link" : e.href ? "a" : "button", L = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
+    return (e, a) => (i(), p("div", {
       ref_key: "containerRef",
-      ref: d,
-      class: l(C.value),
+      ref: u,
+      class: c(w.value),
       role: "tablist"
     }, [
-      s.modelValue !== void 0 ? (i(), u("div", {
+      s.modelValue !== void 0 ? (i(), p("div", {
         key: 0,
-        class: l([R.value, S()]),
-        style: A(b.value)
+        class: c([R.value, S()]),
+        style: D(f.value)
       }, null, 6)) : y("", !0),
-      (i(!0), u(E, null, N(s.options, (a) => (i(), u("button", {
-        key: a.value,
+      (i(!0), p(N, null, O(s.options, (r) => (i(), x(P(I(r)), T({
+        key: r.value,
         ref_for: !0,
-        ref: (t) => h(t, a.value),
+        ref: (t) => k(t?.$el || t, r.value),
         role: "tab",
-        "aria-selected": s.modelValue === a.value,
-        disabled: a.disabled,
-        class: l([V(a), w[r.size]]),
-        onClick: (t) => k(a),
-        type: "button"
-      }, [
-        a.icon ? (i(), O(q, {
-          key: 0,
-          icon: a.icon,
-          class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-        }, null, 8, ["icon", "class"])) : y("", !0),
-        T("span", {
-          class: l(["whitespace-nowrap z-20 relative", s.textClass])
-        }, _($(a)), 3)
-      ], 10, H))), 128))
+        "aria-selected": s.modelValue === r.value,
+        disabled: r.disabled,
+        class: [$(r), z[n.size]]
+      }, { ref_for: !0 }, L(r), {
+        onClick: (t) => C(r)
+      }), {
+        default: F(() => [
+          r.icon ? (i(), x(K, {
+            key: 0,
+            icon: r.icon,
+            class: c(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+          }, null, 8, ["icon", "class"])) : y("", !0),
+          q("span", {
+            class: c(["whitespace-nowrap z-20 relative", s.textClass])
+          }, G(B(r)), 3)
+        ]),
+        _: 2
+      }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))
     ], 2));
   }
 });
 export {
-  U as default
+  Z as default
 };

package/components/Tabes/types.d.ts

@@ -4,6 +4,11 @@ export interface TabesOption {
     value: string | number;
     icon?: string;
     disabled?: boolean;
+    to?: string | {
+        path: string;
+        [key: string]: any;
+    };
+    href?: string;
 }
 export type TabesSize = 'sm' | 'md' | 'lg';
 export type TabesVariant = 'surface' | 'primary' | 'secondary' | 'danger' | 'success' | 'outline' | 'line';

package/components/Textarea.vue.d.ts

@@ -7,16 +7,16 @@ interface Props {
     class?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string) => any;
     blur: (event: FocusEvent) => any;
     focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (value: string) => any;
     onBlur?: (event: FocusEvent) => any;
     onFocus?: (event: FocusEvent) => any;
+    "onUpdate:modelValue"?: (value: string) => any;
 }>, {
-    disabled: boolean;
     class: string;
+    disabled: boolean;
     modelValue: string;
     rows: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLTextAreaElement>;