vlite3 0.3.7 → 0.3.8

package/components/Screen/Screen.vue.js

@@ -1,16 +1,14 @@
-import { defineComponent as M, computed as V, ref as h, provide as E, watch as S, resolveComponent as X, openBlock as a, createElementBlock as i, createElementVNode as r, renderSlot as B, toDisplayString as u, createCommentVNode as g, createBlock as o, normalizeClass as F, unref as T, createVNode as c, resolveDynamicComponent as N, Fragment as P, mergeProps as m, withCtx as s, createTextVNode as v } from "vue";
+import { defineComponent as W, computed as S, ref as y, provide as E, watch as N, resolveComponent as X, openBlock as a, createElementBlock as i, normalizeClass as D, createElementVNode as h, renderSlot as B, toDisplayString as f, createCommentVNode as m, createBlock as s, unref as I, createVNode as r, resolveDynamicComponent as R, Fragment as P, mergeProps as c, withCtx as o, createTextVNode as v } from "vue";
 import Y from "../Input.vue.js";
-import f from "../Button.vue.js";
-import R from "../Icon.vue.js";
+import u from "../Button.vue.js";
+import F from "../Icon.vue.js";
 import H from "../Modal.vue.js";
 import Z from "../ConfirmationModal.vue.js";
 import p from "../Pagination/Pagination.vue.js";
-import _ from "./ScreenFilter.vue.js";
-import { usePersistentState as ee } from "../../utils/usePersistentState.js";
-const te = { class: "flex flex-col w-full space-y-8" }, ae = {
-  key: 0,
-  class: "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"
-}, ne = { class: "flex flex-col shrink-0" }, le = {
+import _ from "../Empty/Empty.vue.js";
+import ee from "./ScreenFilter.vue.js";
+import { usePersistentState as te } from "../../utils/usePersistentState.js";
+const ae = { class: "flex flex-col w-full space-y-8" }, ne = { class: "flex flex-col shrink-0" }, le = {
   key: 0,
   class: "text-fs-7.5 font-bold text-foreground"
 }, de = {
@@ -22,13 +20,13 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
 }, re = {
   key: 4,
   class: "w-full md:w-60! max-sm:order-last"
-}, ue = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, ce = ["href", "target"], fe = { class: "flex-1 w-full relative min-h-[300px]" }, me = { class: "flex flex-col items-center justify-center py-16 px-4 text-center bg-card border border-border rounded-lg shadow-sm" }, ge = { class: "flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4" }, ve = { class: "text-lg font-semibold text-foreground" }, ye = { class: "mt-2 text-sm text-muted-foreground max-w-sm" }, he = { class: "mt-6" }, Be = ["href", "target"], be = {
+}, ue = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, ce = ["href", "target"], fe = ["href", "target"], me = {
   key: 1,
   class: "p-8 text-center text-muted-foreground border border-dashed border-border rounded-lg"
-}, we = {
+}, ve = {
   key: 2,
   class: "-mt-2"
-}, Se = /* @__PURE__ */ M({
+}, $e = /* @__PURE__ */ W({
   __name: "Screen",
   props: {
     name: { default: "" },
@@ -45,7 +43,7 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
       itemsPerPageOptions: [10, 25, 50, 100]
     }) },
     emptyTitle: { default: "No records found" },
-    emptyDescription: { default: "We could not find any records matching your criteria." },
+    emptyDescription: { default: "There are currently no items to show" },
     emptyIcon: { default: "lucide:inbox" },
     addComponent: {},
     addBtn: {},
@@ -57,108 +55,113 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
     pagination: { type: Boolean, default: !0 },
     filterSchema: { default: () => [] },
     filterType: { default: "modal" },
-    showRefresh: { type: Boolean, default: !1 }
+    showRefresh: { type: Boolean, default: !1 },
+    containerClass: {},
+    headerClass: {}
   },
   emits: ["add", "delete"],
   setup(e, { emit: L }) {
-    const l = e, j = L, K = V(() => l.name || l.title || "default-screen"), w = ee(
+    const l = e, U = L, K = S(() => l.name || l.title || "default-screen"), b = te(
       `view-mode-${K.value}`,
       l.table ? "table" : "list"
-    ), C = h(""), D = h({}), b = h(l.pageInfo?.currentPage || 1), $ = h(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), y = h([]), U = h([]), k = h(!1);
-    E("screen-selected-rows", y), E("screen-request-delete", (t) => I(t));
-    const I = (t) => {
-      U.value = t, k.value = !0;
+    ), x = y(""), A = y({}), w = y(l.pageInfo?.currentPage || 1), $ = y(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), g = y([]), j = y([]), k = y(!1);
+    E("screen-selected-rows", g), E("screen-request-delete", (t) => T(t));
+    const T = (t) => {
+      j.value = t, k.value = !0;
     }, O = () => {
-      j("delete", U.value), k.value = !1, y.value = [];
+      U("delete", j.value), k.value = !1, g.value = [];
     }, Q = (t) => {
-      j("delete", t), y.value = [];
+      U("delete", t), g.value = [];
     };
-    S(
+    N(
       () => l.pageInfo?.currentPage,
       (t) => {
-        t && (b.value = t);
+        t && (w.value = t);
       }
-    ), S(
+    ), N(
       () => l.pageInfo?.itemsPerPage,
       (t) => {
         t && ($.value = t);
       }
     );
-    let A = null;
-    S(C, (t) => {
-      A && clearTimeout(A), A = setTimeout(() => {
-        b.value = 1, x();
+    let V = null;
+    N(x, (t) => {
+      V && clearTimeout(V), V = setTimeout(() => {
+        w.value = 1, C();
       }, 300);
     });
-    const W = (t) => {
-      b.value = t, x();
-    }, G = (t) => {
-      $.value = t, b.value = 1, x();
-    }, x = () => {
+    const G = (t) => {
+      w.value = t, C();
+    }, J = (t) => {
+      $.value = t, w.value = 1, C();
+    }, C = () => {
       const t = {
         pageinfo: {
-          page: b.value,
+          page: w.value,
           limit: $.value
         },
         pagination: {
-          page: b.value,
+          page: w.value,
           limit: $.value
         },
-        search: C.value,
-        filter: D.value
+        search: x.value,
+        filter: A.value
       };
       l.refetch && l.refetch(t);
-    }, z = V(() => w.value === "table" && l.table ? l.table : l.list), J = V(() => l.data && l.data.length > 0);
+    }, z = S(() => b.value === "table" && l.table ? l.table : l.list), M = S(() => l.data && l.data.length > 0);
     return (t, n) => {
       const q = X("router-link");
-      return a(), i("div", te, [
-        e.customHeader ? B(t.$slots, "custom-header", { key: 1 }) : (a(), i("div", ae, [
-          r("div", ne, [
+      return a(), i("div", ae, [
+        e.customHeader ? B(t.$slots, "custom-header", { key: 1 }) : (a(), i("div", {
+          key: 0,
+          class: D([e.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
+        }, [
+          h("div", ne, [
             B(t.$slots, "title", {}, () => [
-              e.title ? (a(), i("h1", le, u(e.title), 1)) : g("", !0)
+              e.title ? (a(), i("h1", le, f(e.title), 1)) : m("", !0)
             ]),
             B(t.$slots, "description", {}, () => [
-              e.description ? (a(), i("p", de, u(e.description), 1)) : g("", !0)
+              e.description ? (a(), i("p", de, f(e.description), 1)) : m("", !0)
             ])
           ]),
-          r("div", ie, [
-            r("div", oe, [
-              y.value.length > 0 ? (a(), o(f, {
+          h("div", ie, [
+            h("div", oe, [
+              g.value.length > 0 ? (a(), s(u, {
                 key: 0,
                 variant: "outline",
                 class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
                 icon: "lucide:trash-2",
                 title: "Delete Selected",
-                onClick: n[0] || (n[0] = (d) => I(y.value))
-              })) : g("", !0),
+                onClick: n[0] || (n[0] = (d) => T(g.value))
+              })) : m("", !0),
               e.table && e.list ? (a(), i("div", se, [
-                r("button", {
-                  onClick: n[1] || (n[1] = (d) => w.value = "list"),
-                  class: F(["p-1.5 rounded", [
-                    T(w) === "list" ? "bg-secondary/85 dark:bg-gray-250 shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+                h("button", {
+                  onClick: n[1] || (n[1] = (d) => b.value = "list"),
+                  class: D(["p-1.5 rounded", [
+                    I(b) === "list" ? "bg-secondary/85 dark:bg-gray-250 shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
                   title: "List View"
                 }, [
-                  c(R, {
+                  r(F, {
                     icon: "lucide:layout-grid",
                     class: "w-4 h-4"
                   })
                 ], 2),
-                r("button", {
-                  onClick: n[2] || (n[2] = (d) => w.value = "table"),
-                  class: F(["p-1.5 rounded", [
-                    T(w) === "table" ? "bg-secondary/85 dark:bg-gray-250 shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+                h("button", {
+                  onClick: n[2] || (n[2] = (d) => b.value = "table"),
+                  class: D(["p-1.5 rounded", [
+                    I(b) === "table" ? "bg-secondary/85 dark:bg-gray-250 shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
                   title: "Table View"
                 }, [
-                  c(R, {
+                  r(F, {
                     icon: "lucide:list",
                     class: "w-4 h-4"
                   })
                 ], 2)
-              ])) : g("", !0),
+              ])) : m("", !0),
               B(t.$slots, "before-search"),
-              e.showRefresh ? (a(), o(f, {
+              e.showRefresh ? (a(), s(u, {
                 key: 2,
                 variant: "outline",
                 icon: "lucide:refresh-cw",
@@ -166,34 +169,34 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
                 class: "shrink-0 h-9! w-9!",
                 title: "Refresh",
                 disabled: e.loading,
-                onClick: x
-              }, null, 8, ["disabled"])) : g("", !0),
-              e.filterSchema && e.filterSchema.length > 0 ? (a(), o(_, {
+                onClick: C
+              }, null, 8, ["disabled"])) : m("", !0),
+              e.filterSchema && e.filterSchema.length > 0 ? (a(), s(ee, {
                 key: 3,
                 schema: e.filterSchema,
                 type: e.filterType,
-                modelValue: D.value,
-                "onUpdate:modelValue": n[3] || (n[3] = (d) => D.value = d),
-                onChange: x
-              }, null, 8, ["schema", "type", "modelValue"])) : g("", !0),
+                modelValue: A.value,
+                "onUpdate:modelValue": n[3] || (n[3] = (d) => A.value = d),
+                onChange: C
+              }, null, 8, ["schema", "type", "modelValue"])) : m("", !0),
               e.canSearch ? (a(), i("div", re, [
-                c(Y, {
+                r(Y, {
                   lazy: "",
-                  modelValue: C.value,
-                  "onUpdate:modelValue": n[4] || (n[4] = (d) => C.value = d),
+                  modelValue: x.value,
+                  "onUpdate:modelValue": n[4] || (n[4] = (d) => x.value = d),
                   icon: "lucide:search",
                   placeholder: "Search...",
                   variant: "outline",
                   class: "bg-background w-full",
                   "show-clear-button": !0
                 }, null, 8, ["modelValue"])
-              ])) : g("", !0)
+              ])) : m("", !0)
             ]),
-            r("div", ue, [
+            h("div", ue, [
               B(t.$slots, "actions", {}, () => [
-                e.addComponent ? (a(), o(N(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
+                e.addComponent ? (a(), s(R(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
                   e.addBtn ? (a(), i(P, { key: 0 }, [
-                    e.addBtn.modal ? (a(), o(H, m({
+                    e.addBtn.modal ? (a(), s(H, c({
                       key: 0,
                       body: e.addBtn.modal
                     }, e.addBtn.modalProps, {
@@ -202,32 +205,32 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
                       triggerClass: "w-full",
                       loading: e.loading
                     }), {
-                      trigger: s(() => [
-                        c(f, m({
+                      trigger: o(() => [
+                        r(u, c({
                           class: "w-full",
                           icon: e.addBtn.icon || "fluent:add-16-filled",
                           variant: e.addBtn.variant || "primary"
                         }, e.addBtn.buttonProps), {
-                          default: s(() => [
-                            v(u(e.addBtn.label || "Add"), 1)
+                          default: o(() => [
+                            v(f(e.addBtn.label || "Add"), 1)
                           ]),
                           _: 1
                         }, 16, ["icon", "variant"])
                       ]),
                       _: 1
-                    }, 16, ["body", "refetch", "data", "loading"])) : e.addBtn.to ? (a(), o(q, {
+                    }, 16, ["body", "refetch", "data", "loading"])) : e.addBtn.to ? (a(), s(q, {
                       key: 1,
                       to: e.addBtn.to,
                       class: "inline-flex w-full sm:w-auto"
                     }, {
-                      default: s(() => [
-                        c(f, m({
+                      default: o(() => [
+                        r(u, c({
                           class: "w-full",
                           icon: e.addBtn.icon || "fluent:add-16-filled",
                           variant: e.addBtn.variant || "primary"
                         }, e.addBtn.buttonProps), {
-                          default: s(() => [
-                            v(u(e.addBtn.label || "Add"), 1)
+                          default: o(() => [
+                            v(f(e.addBtn.label || "Add"), 1)
                           ]),
                           _: 1
                         }, 16, ["icon", "variant"])
@@ -239,17 +242,17 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
                       target: e.addBtn.target,
                       class: "inline-flex w-full sm:w-auto"
                     }, [
-                      c(f, m({
+                      r(u, c({
                         class: "w-full",
                         icon: e.addBtn.icon || "fluent:add-16-filled",
                         variant: e.addBtn.variant || "primary"
                       }, e.addBtn.buttonProps), {
-                        default: s(() => [
-                          v(u(e.addBtn.label || "Add"), 1)
+                        default: o(() => [
+                          v(f(e.addBtn.label || "Add"), 1)
                         ]),
                         _: 1
                       }, 16, ["icon", "variant"])
-                    ], 8, ce)) : (a(), o(f, m({
+                    ], 8, ce)) : (a(), s(u, c({
                       key: 3,
                       class: "w-full sm:w-auto",
                       icon: e.addBtn.icon || "fluent:add-16-filled",
@@ -257,71 +260,71 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
                     }, e.addBtn.buttonProps, {
                       onClick: n[5] || (n[5] = (d) => e.addBtn.onClick ? e.addBtn.onClick() : t.$emit("add"))
                     }), {
-                      default: s(() => [
-                        v(u(e.addBtn.label || "Add"), 1)
+                      default: o(() => [
+                        v(f(e.addBtn.label || "Add"), 1)
                       ]),
                       _: 1
                     }, 16, ["icon", "variant"]))
-                  ], 64)) : (a(), o(f, {
+                  ], 64)) : (a(), s(u, {
                     key: 1,
                     class: "w-full sm:w-auto",
                     icon: "fluent:add-16-filled",
                     variant: "primary",
                     onClick: n[6] || (n[6] = (d) => t.$emit("add"))
                   }, {
-                    default: s(() => [...n[12] || (n[12] = [
+                    default: o(() => [...n[12] || (n[12] = [
                       v(" Add ", -1)
                     ])]),
                     _: 1
                   }))
-                ], 64)) : g("", !0)
+                ], 64)) : m("", !0)
               ]),
               B(t.$slots, "after-add")
             ])
           ])
-        ])),
-        r("div", fe, [
-          !J.value && !e.loading ? B(t.$slots, "empty", { key: 0 }, () => [
-            r("div", me, [
-              r("div", ge, [
-                c(R, {
-                  icon: e.emptyIcon,
-                  class: "h-8 w-8 text-muted-foreground"
-                }, null, 8, ["icon"])
-              ]),
-              r("h3", ve, u(e.emptyTitle), 1),
-              r("p", ye, u(e.emptyDescription), 1),
-              r("div", he, [
-                e.addComponent ? (a(), o(N(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
+        ], 2)),
+        h("div", {
+          class: D(["flex-1 w-full relative min-h-[300px]", e.containerClass])
+        }, [
+          !M.value && !e.loading ? B(t.$slots, "empty", { key: 0 }, () => [
+            r(I(_), {
+              title: e.emptyTitle,
+              description: e.emptyDescription,
+              icon: e.emptyIcon
+            }, {
+              action: o(() => [
+                e.addComponent ? (a(), s(R(e.addComponent), { key: 0 })) : e.canAdd ? (a(), i(P, { key: 1 }, [
                   e.addBtn ? (a(), i(P, { key: 0 }, [
-                    e.addBtn.modal ? (a(), o(H, m({
+                    e.addBtn.modal ? (a(), s(H, c({
                       key: 0,
                       body: e.addBtn.modal
                     }, e.addBtn.modalProps), {
-                      trigger: s(() => [
-                        c(f, m({
+                      trigger: o(() => [
+                        r(u, c({
                           icon: e.addBtn.icon || "fluent:add-16-filled",
-                          variant: e.addBtn.variant || "outline"
+                          variant: e.addBtn.variant || "primary",
+                          rounded: "full",
+                          class: "px-6!"
                         }, e.addBtn.buttonProps), {
-                          default: s(() => [
-                            v(u(e.addBtn.label || "Add New"), 1)
+                          default: o(() => [
+                            v(f(e.addBtn.label || "Add New"), 1)
                           ]),
                           _: 1
                         }, 16, ["icon", "variant"])
                       ]),
                       _: 1
-                    }, 16, ["body"])) : e.addBtn.to ? (a(), o(q, {
+                    }, 16, ["body"])) : e.addBtn.to ? (a(), s(q, {
                       key: 1,
                       to: e.addBtn.to,
                       class: "inline-flex"
                     }, {
-                      default: s(() => [
-                        c(f, m({
+                      default: o(() => [
+                        r(u, c({
                           icon: e.addBtn.icon || "fluent:add-16-filled",
                           variant: e.addBtn.variant || "outline"
                         }, e.addBtn.buttonProps), {
-                          default: s(() => [
-                            v(u(e.addBtn.label || "Add New"), 1)
+                          default: o(() => [
+                            v(f(e.addBtn.label || "Add New"), 1)
                           ]),
                           _: 1
                         }, 16, ["icon", "variant"])
@@ -333,65 +336,66 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
                       target: e.addBtn.target,
                       class: "inline-flex"
                     }, [
-                      c(f, m({
+                      r(u, c({
                         icon: e.addBtn.icon || "lucide:plus",
                         variant: e.addBtn.variant || "outline"
                       }, e.addBtn.buttonProps), {
-                        default: s(() => [
-                          v(u(e.addBtn.label || "Add New"), 1)
+                        default: o(() => [
+                          v(f(e.addBtn.label || "Add New"), 1)
                         ]),
                         _: 1
                       }, 16, ["icon", "variant"])
-                    ], 8, Be)) : (a(), o(f, m({
+                    ], 8, fe)) : (a(), s(u, c({
                       key: 3,
                       icon: e.addBtn.icon || "lucide:plus",
                       variant: e.addBtn.variant || "outline"
                     }, e.addBtn.buttonProps, {
                       onClick: n[7] || (n[7] = (d) => e.addBtn.onClick ? e.addBtn.onClick() : t.$emit("add"))
                     }), {
-                      default: s(() => [
-                        v(u(e.addBtn.label || "Add New"), 1)
+                      default: o(() => [
+                        v(f(e.addBtn.label || "Add New"), 1)
                       ]),
                       _: 1
                     }, 16, ["icon", "variant"]))
-                  ], 64)) : (a(), o(f, {
+                  ], 64)) : (a(), s(u, {
                     key: 1,
                     icon: "lucide:plus",
                     variant: "outline",
                     onClick: n[8] || (n[8] = (d) => t.$emit("add"))
                   }, {
-                    default: s(() => [...n[13] || (n[13] = [
+                    default: o(() => [...n[13] || (n[13] = [
                       v(" Add New ", -1)
                     ])]),
                     _: 1
                   }))
-                ], 64)) : g("", !0)
-              ])
-            ])
+                ], 64)) : m("", !0)
+              ]),
+              _: 1
+            }, 8, ["title", "description", "icon"])
           ]) : (a(), i(P, { key: 1 }, [
-            z.value ? (a(), o(N(z.value), {
+            z.value ? (a(), s(R(z.value), {
               key: 0,
               data: e.data,
               loading: e.loading,
               refetch: e.refetch,
-              selectedRows: y.value,
-              "onUpdate:selectedRows": n[9] || (n[9] = (d) => y.value = d),
-              delete: I,
+              selectedRows: g.value,
+              "onUpdate:selectedRows": n[9] || (n[9] = (d) => g.value = d),
+              delete: T,
               onDelete: Q
-            }, null, 40, ["data", "loading", "refetch", "selectedRows"])) : (a(), i("div", be, " Please provide a `:list` or `:table` component. "))
+            }, null, 40, ["data", "loading", "refetch", "selectedRows"])) : (a(), i("div", me, " Please provide a `:list` or `:table` component. "))
           ], 64))
-        ]),
-        e.pagination && e.pageInfo && e.pageInfo.totalPages > 1 ? (a(), i("div", we, [
-          c(T(p), m({
+        ], 2),
+        e.pagination && e.pageInfo && e.pageInfo.totalPages > 1 ? (a(), i("div", ve, [
+          r(I(p), c({
             "current-page": e.pageInfo.currentPage,
             "total-pages": e.pageInfo.totalPages,
             "total-items": e.pageInfo.totalItems
           }, e.paginationProps, {
-            onChange: W,
-            "onUpdate:itemsPerPage": G
+            onChange: G,
+            "onUpdate:itemsPerPage": J
           }), null, 16, ["current-page", "total-pages", "total-items"])
-        ])) : g("", !0),
-        c(Z, {
+        ])) : m("", !0),
+        r(Z, {
           show: k.value,
           "onUpdate:show": n[10] || (n[10] = (d) => k.value = d),
           title: "Confirm Deletion",
@@ -407,5 +411,5 @@ const te = { class: "flex flex-col w-full space-y-8" }, ae = {
   }
 });
 export {
-  Se as default
+  $e as default
 };

package/components/Screen/types.d.ts

@@ -50,4 +50,6 @@ export interface ScreenProps {
     filterSchema?: IForm[];
     filterType?: 'modal' | 'dropdown';
     showRefresh?: boolean;
+    containerClass?: string;
+    headerClass?: string;
 }

package/package.json

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

package/style.css

@@ -203,8 +203,9 @@
       var(--color-mixture-1, #ffffff) 27%,
       var(--color-mixture-2, #000000));
 
+
   --color-gray-800: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 16%,
+      var(--color-mixture-1, #ffffff) 17%,
       var(--color-mixture-2, #000000));
 
   --color-gray-850: color-mix(in oklab,
@@ -230,7 +231,9 @@
 
   --color-muted-light: var(--color-gray-50);
   --color-muted: var(--color-gray-100);
-  --color-muted-foreground: var(--color-foreground);
+  --color-muted-foreground: color-mix(in oklab,
+      var(--color-mixture-1, #ffffff) 23%,
+      var(--color-mixture-2, #000000));
 
   --color-accent: var(--color-gray-150);
   --color-accent-foreground: var(--color-foreground);

package/types/button.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps {
     text?: string;
     rounded?: ButtonRounded;
     textClass?: string;
-    iconLeftClass?: string;
+    iconClass?: string;
     iconRightClass?: string;
     asIcon?: boolean;
 }