vlite3 1.4.19 → 1.4.21

package/components/CategoryManager/CategoryManager.vue2.js

@@ -22,8 +22,8 @@ import qe from "../IconPicker.vue.js";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue.js";
+import ee from "./CommandPaletteItem.vue2.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                        */
+/* empty css                       */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Form/FormField.vue.js

@@ -1,27 +1,27 @@
-import { defineComponent as E, computed as s, markRaw as M, openBlock as c, createBlock as m, mergeProps as p, toHandlers as L, createSlots as q, unref as P, withCtx as u, createVNode as N, createTextVNode as b, toDisplayString as y, createCommentVNode as B, resolveDynamicComponent as G } from "vue";
-import { resolveFieldType as J, isComponent as R, isAddonObject as x } from "./utils/form.utils.js";
-import K from "../NumberInput.vue.js";
+import { defineComponent as E, computed as f, markRaw as O, openBlock as c, createBlock as m, mergeProps as p, toHandlers as C, createSlots as M, unref as P, withCtx as u, createVNode as L, createTextVNode as y, toDisplayString as x, createCommentVNode as N, resolveDynamicComponent as q } from "vue";
+import { resolveFieldType as G, isComponent as k, isAddonObject as B } from "./utils/form.utils.js";
+import J from "../NumberInput.vue.js";
 import z from "../Button.vue.js";
-import { $t as Q } from "../../utils/i18n.js";
+import { $t as K } from "../../utils/i18n.js";
 import V from "../Input.vue.js";
 /* empty css            */
-import W from "../Switch.vue.js";
-import X from "../CheckBox.vue.js";
-import Y from "../FilePicker/index.vue.js";
-import Z from "../AvatarUploader/AvatarUploader.vue.js";
-import _ from "../ThumbnailSelector/ThumbnailSelector.vue.js";
-import ee from "../TagInput/TagInput.vue.js";
-import w from "../Dropdown/Dropdown.vue.js";
-import ae from "../MultiSelect/MultiSelect.vue.js";
-import le from "../DatePicker.vue.js";
-import ie from "../DateRangePicker.vue.js";
-import te from "../ColorPicker/ColorPicker.vue.js";
-import re from "../IconPicker.vue.js";
-import ne from "./index.vue.js";
-import de from "../ChoiceBox/ChoiceBox.vue.js";
-import oe from "../RichTextEditor/RichTextEditor.vue.js";
+import Q from "../Switch.vue.js";
+import W from "../CheckBox.vue.js";
+import X from "../FilePicker/index.vue.js";
+import Y from "../AvatarUploader/AvatarUploader.vue.js";
+import Z from "../ThumbnailSelector/ThumbnailSelector.vue.js";
+import _ from "../TagInput/TagInput.vue.js";
+import R from "../Dropdown/Dropdown.vue.js";
+import ee from "../MultiSelect/MultiSelect.vue.js";
+import ae from "../DatePicker.vue.js";
+import le from "../DateRangePicker.vue.js";
+import ie from "../ColorPicker/ColorPicker.vue.js";
+import te from "../IconPicker.vue.js";
+import re from "./index.vue.js";
+import ne from "../ChoiceBox/ChoiceBox.vue.js";
+import de from "../RichTextEditor/RichTextEditor.vue.js";
 /* empty css                                    */
-const Be = /* @__PURE__ */ E({
+const Ne = /* @__PURE__ */ E({
   __name: "FormField",
   props: {
     field: {},
@@ -45,16 +45,16 @@ const Be = /* @__PURE__ */ E({
       v("change", { value: a, data: l });
     }, S = (a) => {
       v("change", { value: a });
-    }, f = s(() => J(e.field, {
+    }, o = f(() => G(e.field, {
       values: e.values,
       globalValues: e.values,
       isUpdate: e.isUpdate
-    })), k = s(
-      () => f.value === "number" && e.field.isSensitiveField === !0
-    ), U = s(() => {
-      const a = f.value;
-      if (R(a))
-        return M(a);
+    })), b = f(
+      () => o.value === "number" && e.field.isSensitiveField === !0
+    ), U = f(() => {
+      const a = o.value;
+      if (k(a))
+        return O(a);
       switch (a) {
         case "text":
         case "email":
@@ -65,57 +65,57 @@ const Be = /* @__PURE__ */ E({
         case "textarea":
           return V;
         case "number":
-          return k.value ? V : K;
+          return b.value ? V : J;
         case "switch":
-          return W;
+          return Q;
         case "check":
-          return X;
+          return W;
         case "select":
-          return w;
+          return R;
         case "multiSelect":
-          return ae;
+          return ee;
         case "choiceBox":
-          return de;
+          return ne;
         case "date":
         case "time":
-          return le;
+          return ae;
         case "dateRangePicker":
-          return ie;
+          return le;
         case "file":
         case "fileUploader":
-          return Y;
+          return X;
         case "avatarUpload":
-          return Z;
+          return Y;
         case "color":
-          return te;
+          return ie;
         case "iconPicker":
-          return re;
+          return te;
         case "customFields":
-          return ne;
+          return re;
         case "thumbnailSelector":
-          return _;
+          return Z;
         case "tags":
-          return ee;
+          return _;
         case "richTextEditor":
-          return oe;
+          return de;
         default:
           return V;
       }
-    }), A = s(() => {
-      const a = f.value, { disabled: l, readonly: r, ...g } = e.field, t = {
+    }), w = f(() => {
+      const a = o.value, { disabled: l, readonly: r, ...g } = e.field, t = {
         ...g,
         disabled: e.disabled || l === !0,
         readonly: e.readonly || r === !0,
         ...e.field.props || {},
         label: "",
         labelI18n: ""
-      }, h = e.field.placeholderI18n ? Q(e.field.placeholderI18n) : e.field.placeholder, I = e.variant === "floating" && e.label && !e.floatingActive, o = I ? "" : h;
+      }, h = e.field.placeholderI18n ? K(e.field.placeholderI18n) : e.field.placeholder, I = e.variant === "floating" && e.label && !e.floatingActive, s = I ? "" : h;
       if (a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || !a)
         return {
           ...t,
           modelValue: e.value ?? "",
           type: a || "text",
-          placeholder: o,
+          placeholder: s,
           label: e.label,
           icon: e.field.icon,
           iconRight: e.field.iconRight,
@@ -131,14 +131,14 @@ const Be = /* @__PURE__ */ E({
           rows: a === "textarea" ? e.field.props?.rows || 3 : void 0,
           class: `${e.field.className || ""}`
         };
-      if (a === "number" && k.value)
+      if (a === "number" && b.value)
         return {
           ...t,
           // Convert numeric value to string so Input.vue (string-based) displays it correctly
           modelValue: e.value !== void 0 && e.value !== null ? String(e.value) : "",
           // 'password' activates the eye-toggle inside Input.vue
           type: "password",
-          placeholder: o,
+          placeholder: s,
           label: e.label,
           variant: e.variant,
           size: e.size,
@@ -159,15 +159,15 @@ const Be = /* @__PURE__ */ E({
           mode: e.field.props?.mode ?? (e.variant === "transparent" ? "ghost" : "outline"),
           size: e.size,
           rounded: e.rounded,
-          placeholder: o,
+          placeholder: s,
           class: e.field.className
         };
       if (a === "switch") {
         const {
           variant: n,
-          rounded: se,
-          error: ue,
-          switchVariant: fe,
+          rounded: oe,
+          error: se,
+          switchVariant: ue,
           ...D
         } = t;
         return {
@@ -194,7 +194,7 @@ const Be = /* @__PURE__ */ E({
           ...t,
           modelValue: e.value,
           options: e.field.options || [],
-          placeholder: o,
+          placeholder: s,
           selectable: !0,
           closeOnSelect: !0,
           triggerProps: {
@@ -243,7 +243,7 @@ const Be = /* @__PURE__ */ E({
           ...t,
           modelValue: e.value,
           mode: a === "time" ? "time" : "date",
-          placeholder: o,
+          placeholder: s,
           btnProps: {
             variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
             size: e.size,
@@ -267,7 +267,7 @@ const Be = /* @__PURE__ */ E({
           fileTypes: e.field.props?.accept ? e.field.props.accept.split(",") : [],
           returnFormat: "base64",
           variant: e.field.props?.variant ?? (a === "file" ? "input" : "dropzone"),
-          placeholder: o,
+          placeholder: s,
           size: e.size,
           rounded: e.rounded,
           maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
@@ -287,7 +287,7 @@ const Be = /* @__PURE__ */ E({
         return {
           ...t,
           modelValue: Array.isArray(e.value) ? e.value : [],
-          placeholder: o,
+          placeholder: s,
           variant: e.variant,
           size: e.size,
           rounded: e.rounded,
@@ -298,7 +298,7 @@ const Be = /* @__PURE__ */ E({
         return {
           ...t,
           modelValue: e.value ?? "",
-          placeholder: o,
+          placeholder: s,
           label: void 0,
           error: e.error,
           minHeight: e.field.props?.minHeight || "140px",
@@ -348,16 +348,16 @@ const Be = /* @__PURE__ */ E({
           label: e.field.label
         };
       }
-      return R(a) ? {
+      return k(a) ? {
         ...t,
         value: e.field.props?.multiple && (e.value === null || e.value === void 0) ? [] : e.value,
         values: e.values
       } : t;
-    }), $ = s(() => {
-      const a = f.value;
+    }), $ = f(() => {
+      const a = o.value;
       return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || a === "switch" || a === "check" || !a ? {
         "update:modelValue": S
-      } : a === "number" && k.value ? {
+      } : a === "number" && b.value ? {
         "update:modelValue": (l) => {
           const r = l === "" ? void 0 : Number(l);
           v("change", { value: isNaN(r) ? void 0 : r });
@@ -417,37 +417,37 @@ const Be = /* @__PURE__ */ E({
           const r = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
           d({ ...r, thumbnail: l });
         }
-      } : R(a) ? {
+      } : k(a) ? {
         onChange: (l) => {
           d(l.value, l.data);
         }
       } : {};
-    }), j = s(() => x(e.field.addonLeft) || x(e.field.addonRight)), H = s(() => {
-      const a = f.value;
+    }), H = f(() => {
+      const a = o.value;
       return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || !a;
-    }), O = s(() => j.value && H.value), F = (a, l) => {
+    }), j = f(() => H.value || o.value === "textarea" || b.value), A = (a, l) => {
       v("addonChange", a.name, { value: l.value });
-    }, C = (a) => {
+    }, F = (a) => {
       a.action && v("addonAction", a.action);
     };
-    return (a, l) => O.value ? (c(), m(V, p({ key: 0 }, {
-      ...A.value,
+    return (a, l) => j.value ? (c(), m(V, p({ key: 0 }, {
+      ...w.value,
       ...i.field?.props || {}
-    }, L($.value)), q({ _: 2 }, [
-      P(x)(i.field.addonLeft) ? {
+    }, C($.value)), M({ _: 2 }, [
+      P(B)(i.field.addonLeft) ? {
         name: "addon-left",
         fn: u(() => [
-          i.field.addonLeft.type === "select" ? (c(), m(w, p({
+          i.field.addonLeft.type === "select" ? (c(), m(R, p({
             key: 0,
             modelValue: i.field.addonLeft.name ? i.values[i.field.addonLeft.name] : void 0,
             options: i.field.addonLeft.options || []
           }, i.field.addonLeft.props || {}, {
-            onOnSelect: l[0] || (l[0] = (r) => F(i.field.addonLeft, r))
+            onOnSelect: l[0] || (l[0] = (r) => A(i.field.addonLeft, r))
           }), {
             trigger: u(({ selectedLabel: r }) => [
-              N(z, { variant: "outline" }, {
+              L(z, { variant: "outline" }, {
                 default: u(() => [
-                  b(y(r), 1)
+                  y(x(r), 1)
                 ]),
                 _: 2
               }, 1024)
@@ -457,30 +457,30 @@ const Be = /* @__PURE__ */ E({
             key: 1,
             variant: "outline"
           }, i.field.addonLeft.props || {}, {
-            onClick: l[1] || (l[1] = (r) => C(i.field.addonLeft))
+            onClick: l[1] || (l[1] = (r) => F(i.field.addonLeft))
           }), {
             default: u(() => [
-              b(y(i.field.addonLeft.text), 1)
+              y(x(i.field.addonLeft.text), 1)
             ]),
             _: 1
-          }, 16)) : B("", !0)
+          }, 16)) : N("", !0)
         ]),
         key: "0"
       } : void 0,
-      P(x)(i.field.addonRight) ? {
+      P(B)(i.field.addonRight) ? {
         name: "addon-right",
         fn: u(() => [
-          i.field.addonRight.type === "select" ? (c(), m(w, p({
+          i.field.addonRight.type === "select" ? (c(), m(R, p({
             key: 0,
             modelValue: i.field.addonRight.name ? i.values[i.field.addonRight.name] : void 0,
             options: i.field.addonRight.options || []
           }, i.field.addonRight.props || {}, {
-            onOnSelect: l[2] || (l[2] = (r) => F(i.field.addonRight, r))
+            onOnSelect: l[2] || (l[2] = (r) => A(i.field.addonRight, r))
           }), {
             trigger: u(({ selectedLabel: r }) => [
-              N(z, { variant: "outline" }, {
+              L(z, { variant: "outline" }, {
                 default: u(() => [
-                  b(y(r), 1)
+                  y(x(r), 1)
                 ]),
                 _: 2
               }, 1024)
@@ -490,25 +490,25 @@ const Be = /* @__PURE__ */ E({
             key: 1,
             variant: "outline"
           }, i.field.addonRight.props || {}, {
-            onClick: l[3] || (l[3] = (r) => C(i.field.addonRight))
+            onClick: l[3] || (l[3] = (r) => F(i.field.addonRight))
           }), {
             default: u(() => [
-              b(y(i.field.addonRight.text), 1)
+              y(x(i.field.addonRight.text), 1)
             ]),
             _: 1
-          }, 16)) : B("", !0)
+          }, 16)) : N("", !0)
         ]),
         key: "1"
       } : void 0
-    ]), 1040)) : (c(), m(G(U.value), p({
+    ]), 1040)) : (c(), m(q(U.value), p({
       key: 1,
-      class: f.value === "check" || f.value === "switch" && i.field.props?.switchVariant === "basic" ? "" : "w-full"
+      class: o.value === "check" || o.value === "switch" && i.field.props?.switchVariant === "basic" ? "" : "w-full"
     }, {
-      ...A.value,
+      ...w.value,
       ...i.field?.props || {}
-    }, L($.value)), null, 16, ["class"]));
+    }, C($.value)), null, 16, ["class"]));
   }
 });
 export {
-  Be as default
+  Ne as default
 };

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                       */
+/* empty css                                      */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/RichTextEditor/RichTextEditor.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent as te, ref as v, shallowRef as ne, watch as oe, computed as h, onMounted as le, onUnmounted as ae, openBlock as C, createElementBlock as L, normalizeClass as re, toDisplayString as I, createCommentVNode as U, createElementVNode as w, createVNode as q, unref as a, normalizeStyle as ie } from "vue";
 /* empty css                         */
-import se from "./RichTextToolbar.vue2.js";
-/* empty css                    */
-import de from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import se from "./RichTextToolbar.vue.js";
+/* empty css                     */
+import de from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 import { useRichTextImageUpload as ue } from "./composables/useRichTextImageUpload.js";
 import { useRichTextLinks as ce } from "./composables/useRichTextLinks.js";
 const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ye = { class: "rte-body-wrap" }, ge = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({

package/components/RichTextEditor/RichTextLinkPopover.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import o from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 export {
   o as default
 };

package/components/RichTextEditor/RichTextToolbar.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextToolbar.vue2.js";
-/* empty css                    */
+import o from "./RichTextToolbar.vue.js";
+/* empty css                     */
 export {
   o as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -21,8 +21,8 @@ import "iconify-icon-picker/style.css";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/Stats/StatItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as T, computed as w, openBlock as t, createElementBlock as o, normalizeStyle as $, normalizeClass as r, Fragment as k, createElementVNode as l, toDisplayString as c, unref as b, createBlock as n, withCtx as g, createCommentVNode as d } from "vue";
+import { defineComponent as T, computed as w, openBlock as e, createElementBlock as o, normalizeStyle as $, normalizeClass as r, Fragment as k, createElementVNode as l, toDisplayString as c, unref as b, createBlock as i, withCtx as g, createCommentVNode as d } from "vue";
 import { $t as x } from "../../utils/i18n.js";
 import { formatCurrency as C, formatNumber as I } from "../../utils/functions.js";
 import h from "./components/StatTrend.vue.js";
@@ -31,7 +31,7 @@ const V = { class: "flex items-center justify-between w-full mt-1" }, M = {
   props: {
     item: {},
     variant: { default: "outline" },
-    layout: { default: "icon-left" },
+    layout: { default: "layout-1" },
     attached: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
     titleSize: { default: "" },
@@ -40,38 +40,38 @@ const V = { class: "flex items-center justify-between w-full mt-1" }, M = {
     iconBoxShape: { default: "rounded" },
     iconBoxStyle: { default: "filled" }
   },
-  setup(e) {
-    const i = e;
+  setup(t) {
+    const n = t;
     function s(a) {
       const u = Number(a.value);
       return a.isPrice ? C(u, { numberFormat: a.numberFormat || "compact", compactThreshold: a.compactThreshold }) : a.numberFormat ? I(u, { numberFormat: a.numberFormat, compactThreshold: a.compactThreshold }) : a.value;
     }
     const y = w(() => {
-      const a = Number(i.item.value) || 0;
-      if (!i.item.isPrice && !i.item.numberFormat || (i.item.numberFormat || (i.item.isPrice ? "compact" : "standard")) !== "compact") return !1;
-      const z = i.item.compactThreshold ?? P?.components?.price?.compactThreshold ?? 1e3;
+      const a = Number(n.item.value) || 0;
+      if (!n.item.isPrice && !n.item.numberFormat || (n.item.numberFormat || (n.item.isPrice ? "compact" : "standard")) !== "compact") return !1;
+      const z = n.item.compactThreshold ?? P?.components?.price?.compactThreshold ?? 1e3;
       return Math.abs(a) >= z;
     }), f = w(() => {
-      const a = Number(i.item.value) || 0;
-      return i.item.isPrice ? C(a, { numberFormat: "standard" }) : i.item.numberFormat ? I(a, { numberFormat: "standard" }) : String(i.item.value);
+      const a = Number(n.item.value) || 0;
+      return n.item.isPrice ? C(a, { numberFormat: "standard" }) : n.item.numberFormat ? I(a, { numberFormat: "standard" }) : String(n.item.value);
     }), F = w(() => {
-      const a = i.layout === "inline-label-value" ? "flex px-3.5 py-3" : i.layout === "centered-value-title" ? "flex px-1 py-1" : "flex p-3", 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-1 px-5! pt-2! text-left",
-        "title-top-icon-bottom-right": "flex-col items-start gap-0 text-left px-5! py-4!",
-        "centered-value-title": "flex-col items-center justify-center text-center gap-0",
-        "floating-icon": "flex-col items-start gap-1 text-left relative",
-        "split-bar": "flex-row items-center gap-3 text-left border-l-4",
-        "inline-label-value": "flex-row items-center gap-2.5 text-left"
-      }, z = u[i.layout] || u["icon-left"];
+      const a = n.layout === "layout-8" ? "flex px-3.5 py-3" : n.layout === "layout-5" ? "flex px-1 py-1" : "flex p-3", u = {
+        "layout-1": "flex-row items-center gap-3 text-left",
+        "layout-2": "flex-row items-center justify-between gap-3 text-left",
+        "layout-3": "flex-col items-start gap-1 px-5! pt-2! text-left",
+        "layout-4": "flex-col items-start gap-0 text-left px-5! py-4!",
+        "layout-5": "flex-col items-center justify-center text-center gap-0",
+        "layout-6": "flex-col items-start gap-1 text-left relative",
+        "layout-7": "flex-row items-center gap-3 text-left border-l-4",
+        "layout-8": "flex-row items-center gap-2.5 text-left"
+      }, z = u[n.layout] || u["layout-1"];
       let m = "";
-      if (i.attached)
-        i.variant === "transparent" ? m = "border-b border-r border-transparent bg-transparent hover:bg-muted/30 transition-colors" : i.variant === "outline" ? m = "border-b border-r border-border bg-transparent hover:bg-muted/30 transition-colors" : m = "border-b border-r border-border bg-card hover:bg-muted/30 transition-colors";
+      if (n.attached)
+        n.variant === "transparent" ? m = "border-b border-r border-transparent bg-transparent hover:bg-muted/30 transition-colors" : n.variant === "outline" ? m = "border-b border-r border-border bg-transparent hover:bg-muted/30 transition-colors" : m = "border-b border-r border-border bg-card hover:bg-muted/30 transition-colors";
       else {
-        switch (i.variant) {
+        switch (n.variant) {
           case "solid": {
-            const N = i.item.color || "primary", B = {
+            const N = n.item.color || "primary", B = {
               primary: "bg-primary-light dark:ring-1 dark:ring-inset dark:ring-primary/20",
               secondary: "bg-secondary dark:ring-1 dark:ring-inset dark:ring-secondary-foreground/20",
               success: "bg-success-light dark:ring-1 dark:ring-inset dark:ring-success/20",
@@ -96,13 +96,13 @@ const V = { class: "flex items-center justify-between w-full mt-1" }, M = {
       }
       return [a, z, m].join(" ");
     }), j = w(() => {
-      if (i.variant === "solid" && !i.attached) {
-        const a = i.item.color;
+      if (n.variant === "solid" && !n.attached) {
+        const a = n.item.color;
         if (a && !["primary", "secondary", "success", "warning", "danger", "info"].includes(a))
           return { backgroundColor: `${a}15` };
       }
-      if (i.layout === "split-bar") {
-        const a = i.item.color, u = {
+      if (n.layout === "layout-7") {
+        const a = n.item.color, u = {
           primary: "var(--color-primary)",
           secondary: "var(--color-secondary)",
           success: "var(--color-success)",
@@ -115,196 +115,196 @@ const V = { class: "flex items-center justify-between w-full mt-1" }, M = {
       }
       return {};
     });
-    return (a, u) => (t(), o("div", {
+    return (a, u) => (e(), o("div", {
       class: r(F.value),
       style: $(j.value)
     }, [
-      e.layout === "title-top-icon-bottom-right" ? (t(), o(k, { key: 0 }, [
+      t.layout === "layout-4" ? (e(), o(k, { key: 0 }, [
         l("h3", {
-          class: r(e.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
-        }, c(e.item.titleI18n ? b(x)(e.item.titleI18n) : e.item.title), 3),
+          class: r(t.titleSize || "text-sm font-medium text-muted-foreground truncate w-full")
+        }, c(t.item.titleI18n ? b(x)(t.item.titleI18n) : t.item.title), 3),
         l("div", V, [
           l("div", null, [
-            e.loading ? (t(), o("div", M)) : (t(), n(v, {
+            t.loading ? (e(), o("div", M)) : (e(), i(v, {
               key: 1,
               content: f.value,
               disabled: !y.value
             }, {
               default: g(() => [
                 l("p", {
-                  class: r(e.valueSize || "text-2xl font-bold text-foreground truncate")
-                }, c(s(e.item)), 3)
+                  class: r(t.valueSize || "text-2xl font-bold text-foreground truncate")
+                }, c(s(t.item)), 3)
               ]),
               _: 1
             }, 8, ["content", "disabled"])),
-            e.item.trend && !e.loading ? (t(), n(h, {
+            t.item.trend && !t.loading ? (e(), i(h, {
               key: 2,
-              trend: e.item.trend,
-              layout: e.layout
+              trend: t.item.trend,
+              layout: t.layout
             }, null, 8, ["trend", "layout"])) : d("", !0)
           ]),
-          e.item.icon ? (t(), n(S, {
+          t.item.icon ? (e(), i(S, {
             key: 0,
-            item: e.item,
-            variant: e.variant,
-            layout: e.layout,
-            attached: e.attached,
-            "icon-box-shape": e.iconBoxShape,
-            "icon-box-style": e.iconBoxStyle,
-            "icon-size": e.iconSize
+            item: t.item,
+            variant: t.variant,
+            layout: t.layout,
+            attached: t.attached,
+            "icon-box-shape": t.iconBoxShape,
+            "icon-box-style": t.iconBoxStyle,
+            "icon-size": t.iconSize
           }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0)
         ])
-      ], 64)) : e.layout === "centered-value-title" ? (t(), o(k, { key: 1 }, [
-        e.loading ? (t(), o("div", E)) : (t(), n(v, {
+      ], 64)) : t.layout === "layout-5" ? (e(), o(k, { key: 1 }, [
+        t.loading ? (e(), o("div", E)) : (e(), i(v, {
           key: 1,
           content: f.value,
           disabled: !y.value
         }, {
           default: g(() => [
             l("p", {
-              class: r(e.valueSize || "text-3xl font-bold text-foreground")
-            }, c(s(e.item)), 3)
+              class: r(t.valueSize || "text-3xl font-bold text-foreground")
+            }, c(s(t.item)), 3)
           ]),
           _: 1
         }, 8, ["content", "disabled"])),
         l("h3", {
-          class: r(e.titleSize || "text-sm font-medium text-muted-foreground")
-        }, c(e.item.titleI18n ? b(x)(e.item.titleI18n) : e.item.title), 3),
-        e.item.trend && !e.loading ? (t(), n(h, {
+          class: r(t.titleSize || "text-sm font-medium text-muted-foreground")
+        }, c(t.item.titleI18n ? b(x)(t.item.titleI18n) : t.item.title), 3),
+        t.item.trend && !t.loading ? (e(), i(h, {
           key: 2,
-          trend: e.item.trend,
-          layout: e.layout
+          trend: t.item.trend,
+          layout: t.layout
         }, null, 8, ["trend", "layout"])) : d("", !0)
-      ], 64)) : e.layout === "floating-icon" ? (t(), o(k, { key: 2 }, [
-        e.item.icon ? (t(), n(S, {
+      ], 64)) : t.layout === "layout-6" ? (e(), o(k, { key: 2 }, [
+        t.item.icon ? (e(), i(S, {
           key: 0,
-          item: e.item,
-          variant: e.variant,
-          layout: e.layout,
-          attached: e.attached,
-          "icon-box-shape": e.iconBoxShape,
-          "icon-box-style": e.iconBoxStyle,
-          "icon-size": e.iconSize,
+          item: t.item,
+          variant: t.variant,
+          layout: t.layout,
+          attached: t.attached,
+          "icon-box-shape": t.iconBoxShape,
+          "icon-box-style": t.iconBoxStyle,
+          "icon-size": t.iconSize,
           class: "absolute top-4 right-4"
         }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0),
         l("h3", {
-          class: r(e.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
-        }, c(e.item.titleI18n ? b(x)(e.item.titleI18n) : e.item.title), 3),
-        e.loading ? (t(), o("div", D)) : (t(), n(v, {
+          class: r(t.titleSize || "text-sm font-medium text-muted-foreground truncate pr-12")
+        }, c(t.item.titleI18n ? b(x)(t.item.titleI18n) : t.item.title), 3),
+        t.loading ? (e(), o("div", D)) : (e(), i(v, {
           key: 2,
           content: f.value,
           disabled: !y.value
         }, {
           default: g(() => [
             l("p", {
-              class: r(e.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
-            }, c(s(e.item)), 3)
+              class: r(t.valueSize || "text-2xl font-bold text-foreground truncate mt-1")
+            }, c(s(t.item)), 3)
           ]),
           _: 1
         }, 8, ["content", "disabled"])),
-        e.item.trend && !e.loading ? (t(), n(h, {
+        t.item.trend && !t.loading ? (e(), i(h, {
           key: 3,
-          trend: e.item.trend,
-          layout: e.layout
+          trend: t.item.trend,
+          layout: t.layout
         }, null, 8, ["trend", "layout"])) : d("", !0)
-      ], 64)) : e.layout === "split-bar" ? (t(), o("div", L, [
+      ], 64)) : t.layout === "layout-7" ? (e(), o("div", L, [
         l("h3", {
           class: r(
-            e.titleSize || "text-xs font-semibold uppercase tracking-widest text-muted-foreground truncate"
+            t.titleSize || "text-xs font-semibold uppercase tracking-widest text-muted-foreground truncate"
           )
-        }, c(e.item.titleI18n ? b(x)(e.item.titleI18n) : e.item.title), 3),
-        e.loading ? (t(), o("div", q)) : (t(), n(v, {
+        }, c(t.item.titleI18n ? b(x)(t.item.titleI18n) : t.item.title), 3),
+        t.loading ? (e(), o("div", q)) : (e(), i(v, {
           key: 1,
           content: f.value,
           disabled: !y.value
         }, {
           default: g(() => [
             l("p", {
-              class: r(e.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
-            }, c(s(e.item)), 3)
+              class: r(t.valueSize || "text-3xl font-black text-foreground truncate mt-0.5")
+            }, c(s(t.item)), 3)
           ]),
           _: 1
         }, 8, ["content", "disabled"])),
-        e.item.trend && !e.loading ? (t(), n(h, {
+        t.item.trend && !t.loading ? (e(), i(h, {
           key: 2,
-          trend: e.item.trend,
-          layout: e.layout
+          trend: t.item.trend,
+          layout: t.layout
         }, null, 8, ["trend", "layout"])) : d("", !0)
-      ])) : e.layout === "inline-label-value" ? (t(), o(k, { key: 4 }, [
-        e.item.icon ? (t(), n(S, {
+      ])) : t.layout === "layout-8" ? (e(), o(k, { key: 4 }, [
+        t.item.icon ? (e(), i(S, {
           key: 0,
-          item: e.item,
-          variant: e.variant,
-          layout: e.layout,
-          attached: e.attached,
-          "icon-box-shape": e.iconBoxShape,
-          "icon-box-style": e.iconBoxStyle,
-          "icon-size": e.iconSize
+          item: t.item,
+          variant: t.variant,
+          layout: t.layout,
+          attached: t.attached,
+          "icon-box-shape": t.iconBoxShape,
+          "icon-box-style": t.iconBoxStyle,
+          "icon-size": t.iconSize
         }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0),
         l("span", {
-          class: r([e.titleSize || "-text-fs-2 font-medium text-muted-foreground truncate", "flex-1 min-w-0"])
-        }, c(e.item.titleI18n ? b(x)(e.item.titleI18n) : e.item.title), 3),
-        e.loading ? (t(), o("div", A)) : (t(), n(v, {
+          class: r([t.titleSize || "-text-fs-2 font-medium text-muted-foreground truncate", "flex-1 min-w-0"])
+        }, c(t.item.titleI18n ? b(x)(t.item.titleI18n) : t.item.title), 3),
+        t.loading ? (e(), o("div", A)) : (e(), i(v, {
           key: 2,
           content: f.value,
           disabled: !y.value
         }, {
           default: g(() => [
             l("span", {
-              class: r(e.valueSize || "-text-fs-1 font-semibold text-foreground tabular-nums shrink-0")
-            }, c(s(e.item)), 3)
+              class: r(t.valueSize || "-text-fs-1 font-semibold text-foreground tabular-nums shrink-0")
+            }, c(s(t.item)), 3)
           ]),
           _: 1
         }, 8, ["content", "disabled"])),
-        e.item.trend && !e.loading ? (t(), n(h, {
+        t.item.trend && !t.loading ? (e(), i(h, {
           key: 3,
-          trend: e.item.trend,
-          layout: e.layout
+          trend: t.item.trend,
+          layout: t.layout
         }, null, 8, ["trend", "layout"])) : d("", !0)
-      ], 64)) : (t(), o(k, { key: 5 }, [
-        e.item.icon && e.layout !== "icon-right" ? (t(), n(S, {
+      ], 64)) : (e(), o(k, { key: 5 }, [
+        t.item.icon && t.layout !== "layout-2" ? (e(), i(S, {
           key: 0,
-          item: e.item,
-          variant: e.variant,
-          layout: e.layout,
-          attached: e.attached,
-          "icon-box-shape": e.iconBoxShape,
-          "icon-box-style": e.iconBoxStyle,
-          "icon-size": e.iconSize
+          item: t.item,
+          variant: t.variant,
+          layout: t.layout,
+          attached: t.attached,
+          "icon-box-shape": t.iconBoxShape,
+          "icon-box-style": t.iconBoxStyle,
+          "icon-size": t.iconSize
         }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0),
         l("div", G, [
           l("h3", {
-            class: r(e.titleSize || "text-sm font-medium text-muted-foreground truncate")
-          }, c(e.item.titleI18n ? b(x)(e.item.titleI18n) : e.item.title), 3),
+            class: r(t.titleSize || "text-sm font-medium text-muted-foreground truncate")
+          }, c(t.item.titleI18n ? b(x)(t.item.titleI18n) : t.item.title), 3),
           l("div", H, [
-            e.loading ? (t(), o("div", J)) : (t(), n(v, {
+            t.loading ? (e(), o("div", J)) : (e(), i(v, {
               key: 1,
               content: f.value,
               disabled: !y.value
             }, {
               default: g(() => [
                 l("p", {
-                  class: r(e.valueSize || "text-2xl font-bold text-foreground truncate")
-                }, c(s(e.item)), 3)
+                  class: r(t.valueSize || "text-2xl font-bold text-foreground truncate")
+                }, c(s(t.item)), 3)
               ]),
               _: 1
             }, 8, ["content", "disabled"]))
           ]),
-          e.item.trend && !e.loading ? (t(), n(h, {
+          t.item.trend && !t.loading ? (e(), i(h, {
             key: 0,
-            trend: e.item.trend,
-            layout: e.layout
+            trend: t.item.trend,
+            layout: t.layout
           }, null, 8, ["trend", "layout"])) : d("", !0)
         ]),
-        e.item.icon && e.layout === "icon-right" ? (t(), n(S, {
+        t.item.icon && t.layout === "layout-2" ? (e(), i(S, {
           key: 1,
-          item: e.item,
-          variant: e.variant,
-          layout: e.layout,
-          attached: e.attached,
-          "icon-box-shape": e.iconBoxShape,
-          "icon-box-style": e.iconBoxStyle,
-          "icon-size": e.iconSize
+          item: t.item,
+          variant: t.variant,
+          layout: t.layout,
+          attached: t.attached,
+          "icon-box-shape": t.iconBoxShape,
+          "icon-box-style": t.iconBoxStyle,
+          "icon-size": t.iconSize
         }, null, 8, ["item", "variant", "layout", "attached", "icon-box-shape", "icon-box-style", "icon-size"])) : d("", !0)
       ], 64))
     ], 6));

package/components/Stats/Stats.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as h, computed as n, openBlock as i, createElementBlock as r, normalizeClass as d, createElementVNode as x, Fragment as u, renderList as s, createBlock as g } from "vue";
-import v from "./StatItem.vue.js";
-const b = /* @__PURE__ */ h({
+import { defineComponent as y, computed as l, openBlock as i, createElementBlock as r, normalizeClass as d, createElementVNode as h, Fragment as u, renderList as s, createBlock as g } from "vue";
+import S from "./StatItem.vue.js";
+const C = /* @__PURE__ */ y({
   __name: "Stats",
   props: {
     items: {},
     variant: { default: "outline" },
-    layout: { default: "icon-left" },
+    layout: { default: "layout-1" },
     columns: { default: 4 },
     attached: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
@@ -16,68 +16,68 @@ const b = /* @__PURE__ */ h({
     iconBoxStyle: { default: "filled" },
     class: { default: "" }
   },
-  setup(e) {
-    const a = e, c = n(() => {
-      const t = Number(a.columns) || 4;
-      return t === 1 ? "grid-cols-1" : t === 2 ? "grid-cols-1 sm:grid-cols-2" : t === 3 ? "grid-cols-1 sm:grid-cols-3" : t === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : t === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : t === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
-    }), S = n(() => [
+  setup(a) {
+    const t = a, c = l(() => {
+      const e = Number(t.columns) || 4;
+      return e === 1 ? "grid-cols-1" : e === 2 ? "grid-cols-1 sm:grid-cols-2" : e === 3 ? "grid-cols-1 sm:grid-cols-3" : e === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : e === 5 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-5" : e === 6 ? "grid-cols-1 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+    }), m = l(() => [
       "grid",
       c.value,
-      a.variant === "transparent-header" ? "gap-2 md:gap-3.5" : "gap-3 sm:gap-4.5",
-      a?.layout === "inline-label-value" ? "rounded-sm" : "",
-      a.class
-    ].join(" ")), m = n(() => [
-      a.layout === "inline-label-value" ? "rounded-sm" : "rounded-lg",
+      t.variant === "transparent-header" ? "gap-2 md:gap-3.5" : "gap-3 sm:gap-4.5",
+      t?.layout === "layout-8" ? "rounded-sm" : "",
+      t.class
+    ].join(" ")), v = l(() => [
+      t.layout === "layout-8" ? "rounded-sm" : "rounded-lg",
       "overflow-hidden",
-      a.variant !== "transparent" ? "border border-border" : "",
-      a.variant === "shadow" ? "shadow-md bg-card" : "",
-      a.class
-    ].join(" ")), f = n(() => [
+      t.variant !== "transparent" ? "border border-border" : "",
+      t.variant === "shadow" ? "shadow-md bg-card" : "",
+      t.class
+    ].join(" ")), f = l(() => [
       "grid",
       c.value,
       "w-[calc(100%+1px)] -mb-px -mr-px gap-0"
     ].join(" "));
-    return (t, y) => e.attached ? (i(), r("div", {
+    return (e, x) => a.attached ? (i(), r("div", {
       key: 0,
-      class: d(m.value)
+      class: d(v.value)
     }, [
-      x("div", {
+      h("div", {
         class: d(f.value)
       }, [
-        (i(!0), r(u, null, s(e.items, (l, o) => (i(), g(v, {
-          key: l.id || o,
-          item: l,
-          variant: e.variant.startsWith("transparent") ? "transparent" : e.variant,
-          layout: e.variant === "transparent-header" ? "centered-value-title" : e.layout,
-          attached: e.attached,
-          loading: e.loading,
-          titleSize: e.variant === "transparent-header" && !e.titleSize ? "text-sm font-normal! text-gray-900" : e.titleSize,
-          valueSize: e.variant === "transparent-header" && !e.valueSize ? "text-lg font-bold text-gray-900" : e.valueSize,
-          iconSize: e.iconSize,
-          iconBoxShape: e.iconBoxShape,
-          iconBoxStyle: e.iconBoxStyle
+        (i(!0), r(u, null, s(a.items, (n, o) => (i(), g(S, {
+          key: n.id || o,
+          item: n,
+          variant: a.variant.startsWith("transparent") ? "transparent" : a.variant,
+          layout: a.variant === "transparent-header" ? "layout-5" : a.layout,
+          attached: a.attached,
+          loading: a.loading,
+          titleSize: a.variant === "transparent-header" && !a.titleSize ? "text-sm font-normal! text-gray-900" : a.titleSize,
+          valueSize: a.variant === "transparent-header" && !a.valueSize ? "text-lg font-bold text-gray-900" : a.valueSize,
+          iconSize: a.iconSize,
+          iconBoxShape: a.iconBoxShape,
+          iconBoxStyle: a.iconBoxStyle
         }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle"]))), 128))
       ], 2)
     ], 2)) : (i(), r("div", {
       key: 1,
-      class: d(S.value)
+      class: d(m.value)
     }, [
-      (i(!0), r(u, null, s(e.items, (l, o) => (i(), g(v, {
-        key: l.id || o,
-        item: l,
-        variant: e.variant.startsWith("transparent") ? "transparent" : e.variant,
-        layout: e.variant === "transparent-header" ? "centered-value-title" : e.layout,
-        attached: e.attached,
-        loading: e.loading,
-        titleSize: e.variant === "transparent-header" && !e.titleSize ? "text-sm font-normal! text-gray-900" : e.titleSize,
-        valueSize: e.variant === "transparent-header" && !e.valueSize ? "text-lg font-bold text-gray-900" : e.valueSize,
-        iconSize: e.iconSize,
-        iconBoxShape: e.iconBoxShape,
-        iconBoxStyle: e.iconBoxStyle
+      (i(!0), r(u, null, s(a.items, (n, o) => (i(), g(S, {
+        key: n.id || o,
+        item: n,
+        variant: a.variant.startsWith("transparent") ? "transparent" : a.variant,
+        layout: a.variant === "transparent-header" ? "layout-5" : a.layout,
+        attached: a.attached,
+        loading: a.loading,
+        titleSize: a.variant === "transparent-header" && !a.titleSize ? "text-sm font-normal! text-gray-900" : a.titleSize,
+        valueSize: a.variant === "transparent-header" && !a.valueSize ? "text-lg font-bold text-gray-900" : a.valueSize,
+        iconSize: a.iconSize,
+        iconBoxShape: a.iconBoxShape,
+        iconBoxStyle: a.iconBoxStyle
       }, null, 8, ["item", "variant", "layout", "attached", "loading", "titleSize", "valueSize", "iconSize", "iconBoxShape", "iconBoxStyle"]))), 128))
     ], 2));
   }
 });
 export {
-  b as default
+  C as default
 };

package/components/Stats/components/StatIconBox.vue.js

@@ -13,7 +13,7 @@ const S = /* @__PURE__ */ y({
     class: {}
   },
   setup(r) {
-    const e = r, o = s(() => e.layout === "inline-label-value"), d = s(() => e.iconBoxShape === "full-rounded" ? "rounded-full" : e.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), i = s(() => {
+    const e = r, o = s(() => e.layout === "layout-8"), d = s(() => e.iconBoxShape === "full-rounded" ? "rounded-full" : e.iconBoxShape === "none" ? "rounded-none" : "rounded-lg"), i = s(() => {
       if (o.value) {
         const t = e.item.color || "primary";
         return `shrink-0 ${{

package/components/Stats/components/StatTrend.vue.js

@@ -1,48 +1,48 @@
-import { defineComponent as f, computed as s, openBlock as a, createElementBlock as l, normalizeClass as i, createVNode as d, createTextVNode as g, toDisplayString as c, createElementVNode as v, createCommentVNode as x } from "vue";
+import { defineComponent as f, computed as s, openBlock as l, createElementBlock as i, normalizeClass as a, createVNode as d, createTextVNode as g, toDisplayString as o, createElementVNode as y, createCommentVNode as x } from "vue";
 import m from "../../Icon.vue.js";
-const y = {
+const v = {
   key: 0,
   class: "text-muted-foreground truncate"
-}, k = /* @__PURE__ */ f({
+}, p = /* @__PURE__ */ f({
   __name: "StatTrend",
   props: {
     trend: {},
     layout: {}
   },
   setup(e) {
-    const t = e, o = s(() => t.layout === "inline-label-value"), r = s(() => t.layout === "centered-value-title"), u = s(() => {
-      if (o.value)
+    const t = e, u = s(() => t.layout === "layout-8"), r = s(() => t.layout === "layout-5"), c = s(() => {
+      if (u.value)
         return [
           "shrink-0 flex items-center gap-0.5 text-xs font-medium",
           t.trend.isPositive ? "text-success-subtle-fg" : "text-danger-subtle-fg"
         ].join(" ");
       const n = "flex items-center text-sm";
-      return r.value ? `${n} gap-1` : t.layout === "floating-icon" || t.layout === "icon-left" || t.layout === "icon-right" || t.layout === "icon-top" ? `${n} mt-2 gap-1.5` : `${n} mt-1 gap-1`;
+      return r.value ? `${n} gap-1` : t.layout === "layout-6" || t.layout === "layout-1" || t.layout === "layout-2" || t.layout === "layout-3" ? `${n} mt-2 gap-1.5` : `${n} mt-1 gap-1`;
     });
-    return (n, b) => o.value ? (a(), l("span", {
+    return (n, b) => u.value ? (l(), i("span", {
       key: 0,
-      class: i(u.value)
+      class: a(c.value)
     }, [
       d(m, {
         icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
         class: "w-3 h-3"
       }, null, 8, ["icon"]),
-      g(" " + c(e.trend.value), 1)
-    ], 2)) : (a(), l("div", {
+      g(" " + o(e.trend.value), 1)
+    ], 2)) : (l(), i("div", {
       key: 1,
-      class: i(u.value)
+      class: a(c.value)
     }, [
       d(m, {
         icon: e.trend.isPositive ? "lucide:trending-up" : "lucide:trending-down",
-        class: i([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
+        class: a([e.trend.isPositive ? "text-success" : "text-danger", "w-4 h-4 shrink-0"])
       }, null, 8, ["icon", "class"]),
-      v("span", {
-        class: i([e.trend.isPositive ? "text-success-subtle-fg" : "text-danger-subtle-fg", "font-medium whitespace-nowrap"])
-      }, c(e.trend.value), 3),
-      e.trend.label && !r.value ? (a(), l("span", y, c(e.trend.label), 1)) : x("", !0)
+      y("span", {
+        class: a([e.trend.isPositive ? "text-success-subtle-fg" : "text-danger-subtle-fg", "font-medium whitespace-nowrap"])
+      }, o(e.trend.value), 3),
+      e.trend.label && !r.value ? (l(), i("span", v, o(e.trend.label), 1)) : x("", !0)
     ], 2));
   }
 });
 export {
-  k as default
+  p as default
 };

package/components/Stats/types.d.ts

@@ -1,5 +1,5 @@
 export type StatsVariant = 'solid' | 'outline' | 'shadow' | 'transparent' | 'transparent-header';
-export type StatsLayout = 'icon-left' | 'icon-right' | 'icon-top' | 'title-top-icon-bottom-right' | 'centered-value-title' | 'floating-icon' | 'split-bar' | 'inline-label-value';
+export type StatsLayout = 'layout-1' | 'layout-2' | 'layout-3' | 'layout-4' | 'layout-5' | 'layout-6' | 'layout-7' | 'layout-8';
 export type IconBoxShape = 'rounded' | 'full-rounded' | 'none';
 export type IconBoxStyle = 'filled' | 'transparent';
 export interface StatTrend {

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "type": "module",
   "main": "index.js",
   "module": "index.js",