maz-ui 3.49.1 → 3.49.3

package/README.md

@@ -1,71 +1,151 @@
-# maz-ui
+<div align="center">
+  <img src="https://maz-ui.com/img/logo.svg" alt="Maz UI Logo" width="100">
+
+  <h1>Maz UI</h1>
+  <p>
+    <strong>
+      Lightweight and efficient library for Vue 3 & Nuxt 3
+    </strong>
+  </p>
+</div>
+
+<p align="center">
+  <a href="https://vuejs.org"><img src="https://img.shields.io/badge/vue-3-42b983.svg" alt="vue 3"></a>
+  <a href="https://v3.nuxtjs.org"><img src="https://img.shields.io/badge/nuxt-3-42b983.svg" alt="nuxt 3"></a>
+  <a href="https://www.npmjs.com/package/maz-ui"><img src="https://img.shields.io/npm/v/maz-ui/latest.svg" alt="npm"></a>
+  <a href="https://www.npmjs.com/package/maz-ui"><img src="https://badgen.net/npm/types/maz-ui" alt="types"></a>
+  <a href="https://npm-stat.com/charts.html?package=maz-ui"><img src="https://badgen.net/npm/dm/maz-ui" alt="Downloads"></a>
+</p>
+
+<p align="center">
+  <a href="https://codeclimate.com/github/LouisMazel/maz-ui/maintainability"><img src="https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/maintainability" alt="maintainability"></a>
+  <a href="https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage"><img src="https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage" alt="test coverage"></a>
+  <img src="https://github.com/LouisMazel/maz-ui/actions/workflows/lib-test-unit.yml/badge.svg" alt="github actions test unit">
+</p>
+
+<h3 align="center">
+  <a href="https://maz-ui.com">Documentation</a>
+  <span> · </span>
+  <a href="https://maz-ui.com/guide/getting-started">Getting Started</a>
+  <span> · </span>
+  <a href="https://maz-ui.com/made-with-maz-ui">Showcase</a>
+</h3>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./resources/dashboard-dark.png">
+    <img src="./resources/dashboard-light.png" alt="Maz UI Demo Dashboard" width="100%" style="border-radius: 1rem;">
+  </picture>
+  <br>
+  <sub><i>Example of a dashboard built with Maz UI components</i></sub>
+</p>
+
+## ✨ Features
+
+- 🎯 **Cherry-pick components** - Use only what you need
+- 🌙 **Dark mode** - Built-in dark mode support
+- 🎨 **Themeable** - Easy to customize with CSS variables
+- 📱 **Responsive** - Mobile-first design approach
+- 🔧 **TypeScript** - Full type support included
+- ⚡️ **Lightweight** - Tree-shakeable, no bloat
+- 🔍 **SSR** - Server-side rendering ready
+
+## 🚀 Quick Start
 
-[![vue 3](https://img.shields.io/badge/vue-3-42b983.svg)](https://vuejs.org)
-[![nuxt 3](https://img.shields.io/badge/nuxt-3-42b983.svg)](https://v3.nuxtjs.org/)
-
-[![types](https://badgen.net/npm/types/maz-ui)](https://www.npmjs.com/package/maz-ui)
-[![npm](https://img.shields.io/npm/v/maz-ui/latest.svg)](https://www.npmjs.com/package/maz-ui)
-[![license](https://badgen.net/npm/license/lodash)](https://www.npmjs.com/package/maz-ui)
-[![Downloads](https://badgen.net/npm/dm/maz-ui)](https://npm-stat.com/charts.html?package=maz-ui)
-
-<!-- [![bundlephobia_tree](https://badgen.net/bundlephobia/tree-shaking/maz-ui)](https://bundlephobia.com/package/maz-ui)
-[![bundlephobia_zip](https://badgen.net/bundlephobia/min/maz-ui)](https://bundlephobia.com/package/maz-ui)
-[![bundlephobia_zip](https://badgen.net/bundlephobia/minzip/maz-ui)](https://bundlephobia.com/package/maz-ui)
-[![bundlephobia_deps](https://badgen.net/bundlephobia/dependency-count/maz-ui)](https://bundlephobia.com/package/maz-ui) -->
+```bash
+npm install maz-ui
+```
 
-[![maintainability](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/maintainability)](https://codeclimate.com/github/LouisMazel/maz-ui/maintainability)
-[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage)
-![github-actions-test-unit](https://github.com/LouisMazel/maz-ui/actions/workflows/lib-test-unit.yml/badge.svg)
+### Vue 3
 
-> [maz-ui](https://maz-ui.com/) is a standalone components library and tools for [Vue.JS](https://vuejs.org) & [Nuxt.JS](https://nuxtjs.org/) (v3.x)
+```ts
+// main.ts
+import 'maz-ui/styles'
+```
 
-## Documentation & Components
+#### 💡 Usage
 
-[Documentation & Components](https://maz-ui.com/)
+Then, import and use only the components, composables, and more you need:
 
-## Install
+```vue
+<template>
+  <MazBtn>Click me!</MazBtn>
+</template>
 
-### maz-ui
+<script setup lang="ts">
+  import MazBtn from 'maz-ui/components/MazBtn'
+</script>
+```
 
-[Getting Started](https://maz-ui.com/guide/getting-started)
+Use provided resolvers to enjoy auto-imports and TypeScript support: [Resolvers documentation](https://maz-ui.com/guide/getting-started#recommendations)
 
-```bash
-npm install maz-ui
-```
+### Nuxt 3
 
-### Nuxt Module
+The Nuxt module automatically:
 
-[Documentation](https://maz-ui.com/guide/nuxt)
+- Imports all components, plugins, composables and directives on-demand (auto-imports)
+- Includes required styles
+- Provides TypeScript support out of the box
 
-```bash
-npm install maz-ui
-```
+[See options and more in the documentation](https://maz-ui.com/guide/nuxt)
 
 ```ts
-// nuxt.config.js
-
+// nuxt.config.ts
 export default defineNuxtConfig({
   modules: ['maz-ui/nuxt'],
-  mazUi: {
-    // Options
-  },
 })
 ```
 
-All options of the module are available [here](https://maz-ui.com/guide/nuxt)
+#### 💡 Usage
 
-### @mazui/cli (theme generator)
+No need to import components, plugins, composables or directives, they are all auto-imported.
 
-[Documentation & Commands](https://maz-ui.com/guide/cli)
+```vue
+<template>
+  <MazBtn @click="toast.success('Hello Maz UI!')"> Click me! </MazBtn>
+</template>
+
+<script setup lang="ts">
+  const toast = useToast()
+</script>
+```
+
+## 🎨 Theming Made Easy
+
+Customize Maz UI to match your brand with our dedicated CLI tool:
 
 ```bash
-npm install @mazui/cli
+# Install the CLI
+npm install -g @mazui/cli
+
+# Generate your theme
+maz generate-css-vars
 ```
 
-## Contributing
+The CLI will automatically:
+
+- Generate all color variations
+- Create dark mode variables
+- Output a ready-to-use CSS file
+
+To know how configure the CLI, check [theming options](https://maz-ui.com/guide/theme) in our documentation.
+
+## 🧰 What's included?
+
+- 🧩 [Components](https://maz-ui.com/components/maz-btn) - Beautiful, accessible UI components
+- 🔌 [Plugins](https://maz-ui.com/plugins/dialog) - Powerful plugins for common use cases
+- 🎣 [Composables](https://maz-ui.com/composables/use-form-validator) - Reusable composition functions
+- 📏 [Directives](https://maz-ui.com/directives/fullscreen-img) - Useful Vue directives
+- 🛠️ [Helpers](https://maz-ui.com/helpers/currency) - Useful utilities for common tasks
+
+## 🤝 Contributing
+
+We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.
 
-Please follow this [documentation](./CONTRIBUTING.md)
+## 📄 License
 
-## LICENSE
+[MIT](./LICENSE)
 
-[MIT](LICENSE)
+<div align="center">
+  <sub>Built with ❤️ by <a href="https://github.com/LouisMazel">Louis Mazel</a></sub>
+</div>

package/components/MazAccordion.mjs

@@ -1,5 +1,5 @@
 import { openBlock as p, createElementBlock as g, createElementVNode as u, computed as $, useId as V, defineComponent as w, ref as f, onMounted as O, onUnmounted as B, normalizeClass as b, normalizeStyle as k, renderSlot as h, withDirectives as E, vShow as z, mergeModels as A, useModel as x, mergeProps as I, useSlots as L, Fragment as j, renderList as F, createBlock as N, withCtx as M, unref as y, createVNode as S } from "vue";
-import './assets/MazAccordion.css';const R = {
+import './assets/MazAccordion.DHZxplwt.css';const R = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",

package/components/MazAnimatedCounter.mjs

@@ -1,5 +1,8 @@
-import { defineComponent as x, ref as y, watch as A, openBlock as M, createElementBlock as V, createElementVNode as $, renderSlot as u, createTextVNode as o, toDisplayString as s } from "vue";
-import './assets/MazAnimatedCounter.css';const g = { class: "m-animated-counter m-reset-css" }, k = { class: "maz-sr-only" }, z = /* @__PURE__ */ x({
+import { defineComponent as x, ref as g, watch as q, openBlock as C, createElementBlock as M, createElementVNode as T, renderSlot as u, createTextVNode as o, toDisplayString as r } from "vue";
+import './assets/MazAnimatedCounter.D9UJwqkf.css';function v() {
+  return typeof document < "u";
+}
+const V = { class: "m-animated-counter m-reset-css" }, $ = { class: "maz-sr-only" }, k = /* @__PURE__ */ x({
   __name: "MazAnimatedCounter",
   props: {
     count: {},
@@ -8,44 +11,52 @@ import './assets/MazAnimatedCounter.css';const g = { class: "m-animated-counter
     suffix: { default: void 0 },
     delay: { default: 100 }
   },
-  setup(r) {
-    const n = r, t = y(0);
-    function i(e, a, f, m) {
+  setup(a) {
+    const s = a, t = g(0);
+    function i() {
+      return !v() || !window.requestAnimationFrame ? (e) => (setTimeout(e, 1e3 / 60), 0) : window.requestAnimationFrame.bind(window);
+    }
+    function f(e, n, c, w) {
+      const d = i();
+      if (!v()) {
+        t.value = n;
+        return;
+      }
       t.value = e, setTimeout(() => {
-        const p = performance.now(), c = (v) => {
-          const _ = v - p, d = Math.min(_ / f, 1), h = (l) => l * (2 - l);
+        const _ = performance.now(), m = (h = performance.now()) => {
+          const y = h - _, l = Math.min(y / c, 1), A = (p) => p * (2 - p);
           t.value = Math.round(
-            e + (a - e) * h(d)
-          ), d < 1 && requestAnimationFrame(c);
+            e + (n - e) * A(l)
+          ), l < 1 && d(m);
         };
-        requestAnimationFrame(c);
-      }, m);
+        d(m);
+      }, w);
     }
-    return A(
-      () => n.count,
-      (e, a) => {
-        if (e === a)
+    return q(
+      () => s.count,
+      (e, n) => {
+        if (e === n)
           return;
-        i(a ?? 0, e, n.duration, n.delay);
+        f(n ?? 0, e, s.duration, s.delay);
       },
       { immediate: !0 }
-    ), (e, a) => (M(), V("span", g, [
-      $("span", k, [
+    ), (e, n) => (C(), M("span", V, [
+      T("span", $, [
         u(e.$slots, "prefix", {}, () => [
           o(
-            s(e.prefix),
+            r(e.prefix),
             1
             /* TEXT */
           )
         ], !0),
         o(
-          s(e.count),
+          r(e.count),
           1
           /* TEXT */
         ),
         u(e.$slots, "suffix", {}, () => [
           o(
-            s(e.suffix),
+            r(e.suffix),
             1
             /* TEXT */
           )
@@ -53,31 +64,31 @@ import './assets/MazAnimatedCounter.css';const g = { class: "m-animated-counter
       ]),
       u(e.$slots, "prefix", {}, () => [
         o(
-          s(e.prefix),
+          r(e.prefix),
           1
           /* TEXT */
         )
       ], !0),
       o(
-        s(t.value),
+        r(t.value),
         1
         /* TEXT */
       ),
       u(e.$slots, "suffix", {}, () => [
         o(
-          s(e.suffix),
+          r(e.suffix),
           1
           /* TEXT */
         )
       ], !0)
     ]));
   }
-}), C = (r, n) => {
-  const t = r.__vccOpts || r;
-  for (const [i, e] of n)
-    t[i] = e;
+}), z = (a, s) => {
+  const t = a.__vccOpts || a;
+  for (const [i, f] of s)
+    t[i] = f;
   return t;
-}, b = /* @__PURE__ */ C(z, [["__scopeId", "data-v-92bddebd"]]);
+}, B = /* @__PURE__ */ z(k, [["__scopeId", "data-v-9f3302af"]]);
 export {
-  b as default
+  B as default
 };

package/components/MazAnimatedElement.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as r, computed as i, ref as l, onMounted as c, openBlock as d, createElementBlock as m, normalizeStyle as u, renderSlot as f } from "vue";
-import './assets/MazAnimatedElement.css';const v = /* @__PURE__ */ r({
+import './assets/MazAnimatedElement.XhNfpNyM.css';const v = /* @__PURE__ */ r({
   __name: "MazAnimatedElement",
   props: {
     direction: { default: "up" },

package/components/MazAnimatedText.mjs

@@ -1,5 +1,5 @@
 import { ref as l, defineComponent as A, computed as v, onMounted as z, openBlock as o, createElementBlock as u, createBlock as w, resolveDynamicComponent as g, mergeProps as k, withCtx as x, Fragment as _, renderList as D, createElementVNode as f, normalizeClass as $, normalizeStyle as h, toDisplayString as p, createCommentVNode as C, createTextVNode as b } from "vue";
-import './assets/MazAnimatedText.css';function T(s, r, i) {
+import './assets/MazAnimatedText.ztrJF5LY.css';function T(s, r, i) {
   const t = {
     maxAttempts: 20,
     interval: 100,

package/components/MazAvatar.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazAvatar-CuOWgdVG.mjs";
+import { M as f } from "./chunks/MazAvatar.CNx-fB-w.mjs";
 export {
   f as default
 };

package/components/MazBackdrop.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as L, ref as P, onMounted as V, watch as D, nextTick as B, openBlock as h, createBlock as M, Teleport as N, createVNode as T, Transition as O, withCtx as $, createElementBlock as j, mergeProps as q, createElementVNode as v, normalizeClass as z, withModifiers as F, renderSlot as K, createCommentVNode as I } from "vue";
-import './assets/MazBackdrop.css';const G = {
+import './assets/MazBackdrop.DPLKrrH6.css';const G = {
   role: "dialog",
   class: "m-backdrop-container",
   "aria-modal": "true"

package/components/MazBadge.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as n, openBlock as r, createElementBlock as s, normalizeClass as d, normalizeStyle as p, renderSlot as u } from "vue";
-import './assets/MazBadge.css';const f = /* @__PURE__ */ n({
+import './assets/MazBadge.CIY0hr5U.css';const f = /* @__PURE__ */ n({
   __name: "MazBadge",
   props: {
     color: { default: "primary" },

package/components/MazBottomSheet.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazBottomSheet-CIXEEUpN.mjs";
+import { M as f } from "./chunks/MazBottomSheet.CgosU2oQ.mjs";
 export {
   f as default
 };

package/components/MazBtn.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazBtn-BT4o0zLa.mjs";
+import { M as f } from "./chunks/MazBtn.CQ7scMZT.mjs";
 export {
   f as default
 };

package/components/MazCard.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazCard-CQBFy8r_.mjs";
+import { M as f } from "./chunks/MazCard.D4R5VJTH.mjs";
 export {
   f as default
 };

package/components/MazCardSpotlight.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as _, ref as c, computed as m, onMounted as k, onUnmounted as E, openBlock as w, createElementBlock as z, normalizeClass as v, normalizeStyle as b, createElementVNode as i, renderSlot as B, withDirectives as y, vShow as h } from "vue";
-import './assets/MazCardSpotlight.css';const S = { class: "inner" }, $ = /* @__PURE__ */ _({
+import './assets/MazCardSpotlight.CrcVk5S1.css';const S = { class: "inner" }, $ = /* @__PURE__ */ _({
   __name: "MazCardSpotlight",
   props: {
     color: { default: "primary" },

package/components/MazCarousel.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazCarousel-Bcn7nKDo.mjs";
+import { M as f } from "./chunks/MazCarousel.tT2IPWU9.mjs";
 export {
   f as default
 };

package/components/MazCheckbox.mjs

@@ -1,5 +1,5 @@
 import { computed as t, useId as N, openBlock as h, createElementBlock as p, createElementVNode as u, defineComponent as E, ref as _, unref as m, normalizeClass as f, normalizeStyle as c, mergeProps as A, createVNode as $, renderSlot as M, createTextVNode as D, toDisplayString as w, createCommentVNode as R } from "vue";
-import './assets/MazCheckbox.css';function j({
+import './assets/MazCheckbox.CA7GJd2c.css';function j({
   componentName: l,
   providedId: a
 }) {

package/components/MazChecklist.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazChecklist-DLr57bfX.mjs";
+import { M as f } from "./chunks/MazChecklist.CCPcVVKg.mjs";
 export {
   f as default
 };