maz-ui 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/components/MazAnimatedCounter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazAnimatedCounter.mjs","sources":["../../src/components/MazAnimatedCounter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { isClient } from '@helpers/isClient'\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nexport interface MazAnimatedCounterProps {\n  /**\n   * The number to animate\n   */\n  count: number\n  /**\n   * Duration of the animation in milliseconds\n   * @default 1000\n   */\n  duration?: number\n  /**\n   * Suffix to display next to the number\n   */\n  prefix?: string\n  /**\n   * Suffix to display next to the number\n   */\n  suffix?: string\n  /**\n   * Delay before the animation starts in milliseconds\n   * @default 100\n   */\n  delay?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<MazAnimatedCounterProps>(),\n  {\n    duration: 1000,\n    prefix: undefined,\n    suffix: undefined,\n    delay: 100,\n    once: true,\n  },\n)\n\nconst currentCount = ref(0)\n\nconst elementRef = ref<HTMLElement | null>(null)\n\nfunction getRequestAnimationFrame() {\n  /* Polyfill for server-side rendering */\n  if (!isClient() || !window.requestAnimationFrame) {\n    return (callback: FrameRequestCallback): number => {\n      setTimeout(callback, 1000 / 60)\n      return 0\n    }\n  }\n\n  return window.requestAnimationFrame.bind(window)\n}\n\nfunction animate(start: number, end: number, duration: number, delay: number) {\n  const requestAnim = getRequestAnimationFrame()\n\n  if (!isClient()) {\n    currentCount.value = end\n    return\n  }\n\n  currentCount.value = start\n  setTimeout(() => {\n    const startTime = performance.now()\n\n    const updateCount = (currentTime: number = performance.now()) => {\n      const elapsed = currentTime - startTime\n      const progress = Math.min(elapsed / duration, 1)\n\n      const easeOutQuad = (t: number) => t * (2 - t)\n\n      currentCount.value = Math.round(\n        start + (end - start) * easeOutQuad(progress),\n      )\n\n      if (progress < 1) {\n        requestAnim(updateCount)\n      }\n    }\n\n    requestAnim(updateCount)\n  }, delay)\n}\n\nfunction startAnimation(start: number, end: number) {\n  animate(start, end, props.duration, props.delay)\n}\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  if (props.once)\n    return\n\n  observer = new IntersectionObserver(([entry]) => {\n    if (entry.isIntersecting) {\n      startAnimation(0, props.count)\n\n      if (props.once) {\n        observer?.unobserve(entry.target)\n      }\n    }\n  })\n\n  if (elementRef.value) {\n    observer.observe(elementRef.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(\n  () => props.count,\n  (newCount, oldCount) => {\n    if (newCount === oldCount) {\n      return\n    }\n\n    const startValue = oldCount ?? 0\n    startAnimation(startValue, newCount)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span ref=\"elementRef\" class=\"m-animated-counter m-reset-css\">\n    <span class=\"maz-sr-only\">\n      <slot name=\"prefix\">{{ prefix }}</slot>{{ count }}<slot name=\"suffix\">{{ suffix }}</slot>\n    </span>\n\n    <!-- Keep this on one line to avoid spacing issues (space between elements) -->\n    <slot name=\"prefix\">{{ prefix }}</slot>{{ currentCount }}<slot name=\"suffix\">{{ suffix }}</slot>\n  </span>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-animated-counter {\n  @apply maz-whitespace-nowrap maz-tabular-nums;\n}\n</style>\n"],"names":["props","__props","currentCount","ref","elementRef","getRequestAnimationFrame","isClient","callback","animate","start","end","duration","delay","requestAnim","startTime","updateCount","currentTime","elapsed","progress","easeOutQuad","t","startAnimation","observer","onMounted","entry","onBeforeUnmount","watch","newCount","oldCount"],"mappings":";;;;;;;;;;;;;;AAkCA,UAAMA,IAAQC,GAWRC,IAAeC,EAAI,CAAC,GAEpBC,IAAaD,EAAwB,IAAI;AAE/C,aAASE,IAA2B;AAElC,aAAI,CAACC,EAAA,KAAc,CAAC,OAAO,wBAClB,CAACC,OACK,WAAAA,GAAU,MAAO,EAAE,GACvB,KAIJ,OAAO,sBAAsB,KAAK,MAAM;AAAA,IAAA;AAGjD,aAASC,EAAQC,GAAeC,GAAaC,GAAkBC,GAAe;AAC5E,YAAMC,IAAcR,EAAyB;AAEzC,UAAA,CAACC,KAAY;AACf,QAAAJ,EAAa,QAAQQ;AACrB;AAAA,MAAA;AAGF,MAAAR,EAAa,QAAQO,GACrB,WAAW,MAAM;AACT,cAAAK,IAAY,YAAY,IAAI,GAE5BC,IAAc,CAACC,IAAsB,YAAY,UAAU;AAC/D,gBAAMC,IAAUD,IAAcF,GACxBI,IAAW,KAAK,IAAID,IAAUN,GAAU,CAAC,GAEzCQ,IAAc,CAACC,MAAcA,KAAK,IAAIA;AAE5C,UAAAlB,EAAa,QAAQ,KAAK;AAAA,YACxBO,KAASC,IAAMD,KAASU,EAAYD,CAAQ;AAAA,UAC9C,GAEIA,IAAW,KACbL,EAAYE,CAAW;AAAA,QAE3B;AAEA,QAAAF,EAAYE,CAAW;AAAA,SACtBH,CAAK;AAAA,IAAA;AAGD,aAAAS,EAAeZ,GAAeC,GAAa;AAClD,MAAAF,EAAQC,GAAOC,GAAKV,EAAM,UAAUA,EAAM,KAAK;AAAA,IAAA;AAGjD,QAAIsB,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAIvB,EAAM,SAGVsB,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAIA,EAAM,mBACOH,EAAA,GAAGrB,EAAM,KAAK,GAEzBA,EAAM,SACEsB,KAAA,QAAAA,EAAA,UAAUE,EAAM;AAAA,MAE9B,CACD,GAEGpB,EAAW,SACJkB,EAAA,QAAQlB,EAAW,KAAK;AAAA,IACnC,CACD,GAEeqB,EAAA,MAAMH,KAAA,gBAAAA,EAAU,YAAY,GAE5CI;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,CAAC2B,GAAUC,MAAa;AACtB,YAAID,MAAaC;AACf;AAIF,QAAAP,EADmBO,KAAY,GACJD,CAAQ;AAAA,MACrC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazAnimatedCounter.mjs","sources":["../../src/components/MazAnimatedCounter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { isClient } from '../helpers/isClient'\n\nexport interface MazAnimatedCounterProps {\n  /**\n   * The number to animate\n   */\n  count: number\n  /**\n   * Duration of the animation in milliseconds\n   * @default 1000\n   */\n  duration?: number\n  /**\n   * Suffix to display next to the number\n   */\n  prefix?: string\n  /**\n   * Suffix to display next to the number\n   */\n  suffix?: string\n  /**\n   * Delay before the animation starts in milliseconds\n   * @default 100\n   */\n  delay?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<MazAnimatedCounterProps>(),\n  {\n    duration: 1000,\n    prefix: undefined,\n    suffix: undefined,\n    delay: 100,\n    once: true,\n  },\n)\n\nconst currentCount = ref(0)\n\nconst elementRef = ref<HTMLElement | null>(null)\n\nfunction getRequestAnimationFrame() {\n  /* Polyfill for server-side rendering */\n  if (!isClient() || !window.requestAnimationFrame) {\n    return (callback: FrameRequestCallback): number => {\n      setTimeout(callback, 1000 / 60)\n      return 0\n    }\n  }\n\n  return window.requestAnimationFrame.bind(window)\n}\n\nfunction animate(start: number, end: number, duration: number, delay: number) {\n  const requestAnim = getRequestAnimationFrame()\n\n  if (!isClient()) {\n    currentCount.value = end\n    return\n  }\n\n  currentCount.value = start\n  setTimeout(() => {\n    const startTime = performance.now()\n\n    const updateCount = (currentTime: number = performance.now()) => {\n      const elapsed = currentTime - startTime\n      const progress = Math.min(elapsed / duration, 1)\n\n      const easeOutQuad = (t: number) => t * (2 - t)\n\n      currentCount.value = Math.round(\n        start + (end - start) * easeOutQuad(progress),\n      )\n\n      if (progress < 1) {\n        requestAnim(updateCount)\n      }\n    }\n\n    requestAnim(updateCount)\n  }, delay)\n}\n\nfunction startAnimation(start: number, end: number) {\n  animate(start, end, props.duration, props.delay)\n}\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  if (props.once)\n    return\n\n  observer = new IntersectionObserver(([entry]) => {\n    if (entry.isIntersecting) {\n      startAnimation(0, props.count)\n\n      if (props.once) {\n        observer?.unobserve(entry.target)\n      }\n    }\n  })\n\n  if (elementRef.value) {\n    observer.observe(elementRef.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(\n  () => props.count,\n  (newCount, oldCount) => {\n    if (newCount === oldCount) {\n      return\n    }\n\n    const startValue = oldCount ?? 0\n    startAnimation(startValue, newCount)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span ref=\"elementRef\" class=\"m-animated-counter m-reset-css\">\n    <span class=\"maz-sr-only\">\n      <slot name=\"prefix\">{{ prefix }}</slot>{{ count }}<slot name=\"suffix\">{{ suffix }}</slot>\n    </span>\n\n    <!-- Keep this on one line to avoid spacing issues (space between elements) -->\n    <slot name=\"prefix\">{{ prefix }}</slot>{{ currentCount }}<slot name=\"suffix\">{{ suffix }}</slot>\n  </span>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-animated-counter {\n  @apply maz-whitespace-nowrap maz-tabular-nums;\n}\n</style>\n"],"names":["props","__props","currentCount","ref","elementRef","getRequestAnimationFrame","isClient","callback","animate","start","end","duration","delay","requestAnim","startTime","updateCount","currentTime","elapsed","progress","easeOutQuad","t","startAnimation","observer","onMounted","entry","onBeforeUnmount","watch","newCount","oldCount"],"mappings":";;;;;;;;;;;;;;AAkCA,UAAMA,IAAQC,GAWRC,IAAeC,EAAI,CAAC,GAEpBC,IAAaD,EAAwB,IAAI;AAE/C,aAASE,IAA2B;AAElC,aAAI,CAACC,EAAA,KAAc,CAAC,OAAO,wBAClB,CAACC,OACK,WAAAA,GAAU,MAAO,EAAE,GACvB,KAIJ,OAAO,sBAAsB,KAAK,MAAM;AAAA,IAAA;AAGjD,aAASC,EAAQC,GAAeC,GAAaC,GAAkBC,GAAe;AAC5E,YAAMC,IAAcR,EAAyB;AAEzC,UAAA,CAACC,KAAY;AACf,QAAAJ,EAAa,QAAQQ;AACrB;AAAA,MAAA;AAGF,MAAAR,EAAa,QAAQO,GACrB,WAAW,MAAM;AACT,cAAAK,IAAY,YAAY,IAAI,GAE5BC,IAAc,CAACC,IAAsB,YAAY,UAAU;AAC/D,gBAAMC,IAAUD,IAAcF,GACxBI,IAAW,KAAK,IAAID,IAAUN,GAAU,CAAC,GAEzCQ,IAAc,CAACC,MAAcA,KAAK,IAAIA;AAE5C,UAAAlB,EAAa,QAAQ,KAAK;AAAA,YACxBO,KAASC,IAAMD,KAASU,EAAYD,CAAQ;AAAA,UAC9C,GAEIA,IAAW,KACbL,EAAYE,CAAW;AAAA,QAE3B;AAEA,QAAAF,EAAYE,CAAW;AAAA,SACtBH,CAAK;AAAA,IAAA;AAGD,aAAAS,EAAeZ,GAAeC,GAAa;AAClD,MAAAF,EAAQC,GAAOC,GAAKV,EAAM,UAAUA,EAAM,KAAK;AAAA,IAAA;AAGjD,QAAIsB,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAIvB,EAAM,SAGVsB,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAIA,EAAM,mBACOH,EAAA,GAAGrB,EAAM,KAAK,GAEzBA,EAAM,SACEsB,KAAA,QAAAA,EAAA,UAAUE,EAAM;AAAA,MAE9B,CACD,GAEGpB,EAAW,SACJkB,EAAA,QAAQlB,EAAW,KAAK;AAAA,IACnC,CACD,GAEeqB,EAAA,MAAMH,KAAA,gBAAAA,EAAU,YAAY,GAE5CI;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,CAAC2B,GAAUC,MAAa;AACtB,YAAID,MAAaC;AACf;AAIF,QAAAP,EADmBO,KAAY,GACJD,CAAQ;AAAA,MACrC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazAnimatedText.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAnimatedText.Dk4QO4xF.css');const e=require("vue"),p=require("../helpers/checkAvailability.cjs"),y=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),f={class:"m-reset-css m-animated-text"},k={class:"m-animated-text__last-word-inner"},v={class:"m-animated-text__last-word-inner-text"},g=e.defineComponent({inheritAttrs:!1,__name:"MazAnimatedText",props:{text:{},lastWord:{},delay:{default:0},direction:{default:"up"},tag:{default:"span"},wordDelay:{default:75},columnGap:{default:.5},rowGap:{default:0},duration:{default:2e3},once:{type:Boolean,default:!0}},setup(l){const o=e.computed(()=>l.text.split(" ")),c=e.computed(()=>o.value.length),s=e.ref(!1),r=e.ref(!1),i=e.computed(()=>s.value?`maz-animate-slide-${l.direction}-blur`:"maz-invisible"),n=e.ref();let a=null;return e.onMounted(()=>{r.value=!0,a=new IntersectionObserver(([t])=>{s.value=t.isIntersecting,l.once&&n.value&&(a==null||a.unobserve(n.value))}),p.checkAvailability(()=>n.value,t=>{a==null||a.observe(t)})}),e.onBeforeUnmount(()=>a==null?void 0:a.disconnect()),(t,m)=>(e.openBlock(),e.createElementBlock("div",f,[r.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),e.mergeProps({key:0,ref_key:"element",ref:n},t.$attrs,{class:"m-animated-text__root",style:{columnGap:`${t.columnGap}rem`,rowGap:`${t.rowGap}rem`}}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(d,u)=>(e.openBlock(),e.createElementBlock("span",{key:d+u,class:"m-animated-text__word"},[e.createElementVNode("span",{class:e.normalizeClass(["m-animated-text__word-inner",i.value]),style:e.normalizeStyle({animationDelay:`${t.delay+u*(t.wordDelay??150)}ms`,animationDuration:`${t.duration}ms`})},e.toDisplayString(d),7)]))),128)),t.lastWord?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["m-animated-text__last-word",i.value]),style:e.normalizeStyle({animationDelay:`${t.delay+c.value*(t.wordDelay??150)}ms`,animationDuration:`${t.duration}ms`})},[e.createElementVNode("span",k,[m[0]||(m[0]=e.createElementVNode("span",{class:"m-animated-text__last-word-inner-gradient"},null,-1)),e.createElementVNode("span",v,e.toDisplayString(t.lastWord),1)])],6)):e.createCommentVNode("",!0)]),_:1},16,["style"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),e.mergeProps({key:1},t.$attrs,{class:"maz-invisible maz-inline-flex"}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text)+" ",1),t.lastWord?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.lastWord),1)],64)):e.createCommentVNode("",!0)]),_:1},16))]))}}),w=y._export_sfc(g,[["__scopeId","data-v-429dbc75"]]);exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAnimatedText.BM3XYGO2.css');const e=require("vue"),p=require("../helpers/checkAvailability.cjs"),y=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),f={class:"m-reset-css m-animated-text"},k={class:"m-animated-text__last-word-inner"},v={class:"m-animated-text__last-word-inner-text"},g=e.defineComponent({inheritAttrs:!1,__name:"MazAnimatedText",props:{text:{},lastWord:{},delay:{default:0},direction:{default:"up"},tag:{default:"span"},wordDelay:{default:75},columnGap:{default:.5},rowGap:{default:0},duration:{default:2e3},once:{type:Boolean,default:!0}},setup(l){const o=e.computed(()=>l.text.split(" ")),c=e.computed(()=>o.value.length),s=e.ref(!1),r=e.ref(!1),i=e.computed(()=>s.value?`maz-animate-slide-${l.direction}-blur`:"maz-invisible"),n=e.ref();let a=null;return e.onMounted(()=>{r.value=!0,a=new IntersectionObserver(([t])=>{s.value=t.isIntersecting,l.once&&n.value&&(a==null||a.unobserve(n.value))}),p.checkAvailability(()=>n.value,t=>{a==null||a.observe(t)})}),e.onBeforeUnmount(()=>a==null?void 0:a.disconnect()),(t,m)=>(e.openBlock(),e.createElementBlock("div",f,[r.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),e.mergeProps({key:0,ref_key:"element",ref:n},t.$attrs,{class:"m-animated-text__root",style:{columnGap:`${t.columnGap}rem`,rowGap:`${t.rowGap}rem`}}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(d,u)=>(e.openBlock(),e.createElementBlock("span",{key:d+u,class:"m-animated-text__word"},[e.createElementVNode("span",{class:e.normalizeClass(["m-animated-text__word-inner",i.value]),style:e.normalizeStyle({animationDelay:`${t.delay+u*(t.wordDelay??150)}ms`,animationDuration:`${t.duration}ms`})},e.toDisplayString(d),7)]))),128)),t.lastWord?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["m-animated-text__last-word",i.value]),style:e.normalizeStyle({animationDelay:`${t.delay+c.value*(t.wordDelay??150)}ms`,animationDuration:`${t.duration}ms`})},[e.createElementVNode("span",k,[m[0]||(m[0]=e.createElementVNode("span",{class:"m-animated-text__last-word-inner-gradient"},null,-1)),e.createElementVNode("span",v,e.toDisplayString(t.lastWord),1)])],6)):e.createCommentVNode("",!0)]),_:1},16,["style"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),e.mergeProps({key:1},t.$attrs,{class:"maz-invisible maz-inline-flex"}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text)+" ",1),t.lastWord?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.lastWord),1)],64)):e.createCommentVNode("",!0)]),_:1},16))]))}}),w=y._export_sfc(g,[["__scopeId","data-v-14f24748"]]);exports.default=w;
 //# sourceMappingURL=MazAnimatedText.cjs.map

package/dist/components/MazAnimatedText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazAnimatedText.cjs","sources":["../../src/components/MazAnimatedText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { checkAvailability } from '@helpers/checkAvailability'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nexport interface MazAnimatedTextProps {\n  /**\n   * The text to animate\n   * @example \"Hello\"\n   */\n  text: string\n  /**\n   * The last word(s) to be highlighted\n   * @example \"world\"\n   */\n  lastWord?: string\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The tag to use for the text\n   * @default \"span\"\n   */\n  tag?: string\n  /**\n   * The delay between each word\n   * @default 75\n   */\n  wordDelay?: number\n  /**\n   * The column gap between each word\n   * @default 0.5\n   */\n  columnGap?: number\n  /**\n   * The row gap between each word\n   * @default 0\n   */\n  rowGap?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  text,\n  lastWord,\n  delay = 0,\n  wordDelay = 75,\n  direction = 'up',\n  tag = 'span',\n  columnGap = 0.5,\n  rowGap = 0,\n  duration = 2000,\n  once = true,\n} = defineProps<MazAnimatedTextProps>()\n\nconst words = computed(() => text.split(' '))\n\nconst wordCount = computed(() => words.value.length)\n\nconst isVisible = ref(false)\nconst isClient = ref(false)\n\nconst animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${direction}-blur` : 'maz-invisible')\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  isClient.value = true\n\n  observer = new IntersectionObserver(([entry]) => {\n    isVisible.value = entry.isIntersecting\n\n    if (once && element.value) {\n      observer?.unobserve(element.value)\n    }\n  })\n\n  checkAvailability(() => element.value, (element) => {\n    observer?.observe(element)\n  })\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div class=\"m-reset-css m-animated-text\">\n    <template v-if=\"isClient\">\n      <Component :is=\"tag\" ref=\"element\" v-bind=\"$attrs\" class=\"m-animated-text__root\" :style=\"{ columnGap: `${columnGap}rem`, rowGap: `${rowGap}rem` }\">\n        <span\n          v-for=\"(word, index) in words\"\n          :key=\"word + index\"\n          class=\"m-animated-text__word\"\n        >\n          <span\n            class=\"m-animated-text__word-inner\"\n            :class=\"animatedClass\"\n            :style=\"{\n              animationDelay: `${delay + (index * (wordDelay ?? 150))}ms`,\n              animationDuration: `${duration}ms`,\n            }\"\n          >\n            {{ word }}\n          </span>\n\n        </span>\n\n        <span\n          v-if=\"lastWord\"\n          class=\"m-animated-text__last-word\"\n          :class=\"animatedClass\"\n          :style=\"{\n            animationDelay: `${delay + (wordCount * (wordDelay ?? 150))}ms`,\n            animationDuration: `${duration}ms`,\n          }\"\n        >\n          <span class=\"m-animated-text__last-word-inner\">\n            <span class=\"m-animated-text__last-word-inner-gradient\" />\n            <span class=\"m-animated-text__last-word-inner-text\">{{ lastWord }}</span>\n          </span>\n        </span>\n      </Component>\n    </template>\n\n    <template v-else>\n      <component :is=\"tag\" v-bind=\"$attrs\" class=\"maz-invisible maz-inline-flex\">\n        {{ text }}\n\n        <template v-if=\"lastWord\">\n          {{ lastWord }}\n        </template>\n      </component>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-text {\n  &__root {\n    @apply maz-inline-flex maz-flex-wrap;\n  }\n\n  &__word {\n    @apply maz-inline-flex;\n  }\n\n  &__word-inner {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word-inner {\n    @apply maz-relative maz-inline-flex;\n  }\n\n  &__last-word-inner-gradient {\n    @apply maz-absolute maz-inset-0 maz-size-full maz-bg-gradient-to-r maz-from-primary maz-via-info maz-to-secondary maz-opacity-30 maz-blur-lg;\n  }\n\n  &__last-word-inner-text {\n    @apply maz-relative;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.maz-animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-up-blur,\n.maz-animate-slide-down-blur,\n.maz-animate-slide-left-blur,\n.maz-animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["words","computed","__props","wordCount","isVisible","ref","isClient","animatedClass","element","observer","onMounted","entry","checkAvailability","onBeforeUnmount"],"mappings":"gpBA2EA,MAAMA,EAAQC,EAAAA,SAAS,IAAMC,EAAI,KAAC,MAAM,GAAG,CAAC,EAEtCC,EAAYF,EAAA,SAAS,IAAMD,EAAM,MAAM,MAAM,EAE7CI,EAAYC,MAAI,EAAK,EACrBC,EAAWD,MAAI,EAAK,EAEpBE,EAAgBN,EAAAA,SAAS,IAAMG,EAAU,MAAQ,qBAAqBF,EAAA,SAAS,QAAU,eAAe,EAExGM,EAAUH,EAAAA,IAAoB,EAEpC,IAAII,EAAwC,KAE5CC,OAAAA,EAAAA,UAAU,IAAM,CACdJ,EAAS,MAAQ,GAEjBG,EAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,IAAM,CAC/CP,EAAU,MAAQO,EAAM,eAEpBT,EAAI,MAAIM,EAAQ,QACRC,GAAA,MAAAA,EAAA,UAAUD,EAAQ,OAC9B,CACD,EAEDI,EAAAA,kBAAkB,IAAMJ,EAAQ,MAAQA,GAAY,CAClDC,GAAA,MAAAA,EAAU,QAAQD,EAAO,CAC1B,CAAA,CACF,EAEeK,kBAAA,IAAMJ,GAAA,YAAAA,EAAU,YAAY"}
+{"version":3,"file":"MazAnimatedText.cjs","sources":["../../src/components/MazAnimatedText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport { checkAvailability } from '../helpers/checkAvailability'\n\nexport interface MazAnimatedTextProps {\n  /**\n   * The text to animate\n   * @example \"Hello\"\n   */\n  text: string\n  /**\n   * The last word(s) to be highlighted\n   * @example \"world\"\n   */\n  lastWord?: string\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The tag to use for the text\n   * @default \"span\"\n   */\n  tag?: string\n  /**\n   * The delay between each word\n   * @default 75\n   */\n  wordDelay?: number\n  /**\n   * The column gap between each word\n   * @default 0.5\n   */\n  columnGap?: number\n  /**\n   * The row gap between each word\n   * @default 0\n   */\n  rowGap?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  text,\n  lastWord,\n  delay = 0,\n  wordDelay = 75,\n  direction = 'up',\n  tag = 'span',\n  columnGap = 0.5,\n  rowGap = 0,\n  duration = 2000,\n  once = true,\n} = defineProps<MazAnimatedTextProps>()\n\nconst words = computed(() => text.split(' '))\n\nconst wordCount = computed(() => words.value.length)\n\nconst isVisible = ref(false)\nconst isClient = ref(false)\n\nconst animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${direction}-blur` : 'maz-invisible')\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  isClient.value = true\n\n  observer = new IntersectionObserver(([entry]) => {\n    isVisible.value = entry.isIntersecting\n\n    if (once && element.value) {\n      observer?.unobserve(element.value)\n    }\n  })\n\n  checkAvailability(() => element.value, (element) => {\n    observer?.observe(element)\n  })\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div class=\"m-reset-css m-animated-text\">\n    <template v-if=\"isClient\">\n      <Component :is=\"tag\" ref=\"element\" v-bind=\"$attrs\" class=\"m-animated-text__root\" :style=\"{ columnGap: `${columnGap}rem`, rowGap: `${rowGap}rem` }\">\n        <span\n          v-for=\"(word, index) in words\"\n          :key=\"word + index\"\n          class=\"m-animated-text__word\"\n        >\n          <span\n            class=\"m-animated-text__word-inner\"\n            :class=\"animatedClass\"\n            :style=\"{\n              animationDelay: `${delay + (index * (wordDelay ?? 150))}ms`,\n              animationDuration: `${duration}ms`,\n            }\"\n          >\n            {{ word }}\n          </span>\n\n        </span>\n\n        <span\n          v-if=\"lastWord\"\n          class=\"m-animated-text__last-word\"\n          :class=\"animatedClass\"\n          :style=\"{\n            animationDelay: `${delay + (wordCount * (wordDelay ?? 150))}ms`,\n            animationDuration: `${duration}ms`,\n          }\"\n        >\n          <span class=\"m-animated-text__last-word-inner\">\n            <span class=\"m-animated-text__last-word-inner-gradient\" />\n            <span class=\"m-animated-text__last-word-inner-text\">{{ lastWord }}</span>\n          </span>\n        </span>\n      </Component>\n    </template>\n\n    <template v-else>\n      <component :is=\"tag\" v-bind=\"$attrs\" class=\"maz-invisible maz-inline-flex\">\n        {{ text }}\n\n        <template v-if=\"lastWord\">\n          {{ lastWord }}\n        </template>\n      </component>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-text {\n  &__root {\n    @apply maz-inline-flex maz-flex-wrap;\n  }\n\n  &__word {\n    @apply maz-inline-flex;\n  }\n\n  &__word-inner {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word-inner {\n    @apply maz-relative maz-inline-flex;\n  }\n\n  &__last-word-inner-gradient {\n    @apply maz-absolute maz-inset-0 maz-size-full maz-bg-gradient-to-r maz-from-primary maz-via-info maz-to-secondary maz-opacity-30 maz-blur-lg;\n  }\n\n  &__last-word-inner-text {\n    @apply maz-relative;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.maz-animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-up-blur,\n.maz-animate-slide-down-blur,\n.maz-animate-slide-left-blur,\n.maz-animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["words","computed","__props","wordCount","isVisible","ref","isClient","animatedClass","element","observer","onMounted","entry","checkAvailability","onBeforeUnmount"],"mappings":"gpBA2EA,MAAMA,EAAQC,EAAAA,SAAS,IAAMC,EAAI,KAAC,MAAM,GAAG,CAAC,EAEtCC,EAAYF,EAAA,SAAS,IAAMD,EAAM,MAAM,MAAM,EAE7CI,EAAYC,MAAI,EAAK,EACrBC,EAAWD,MAAI,EAAK,EAEpBE,EAAgBN,EAAAA,SAAS,IAAMG,EAAU,MAAQ,qBAAqBF,EAAA,SAAS,QAAU,eAAe,EAExGM,EAAUH,EAAAA,IAAoB,EAEpC,IAAII,EAAwC,KAE5CC,OAAAA,EAAAA,UAAU,IAAM,CACdJ,EAAS,MAAQ,GAEjBG,EAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,IAAM,CAC/CP,EAAU,MAAQO,EAAM,eAEpBT,EAAI,MAAIM,EAAQ,QACRC,GAAA,MAAAA,EAAA,UAAUD,EAAQ,OAC9B,CACD,EAEDI,EAAAA,kBAAkB,IAAMJ,EAAQ,MAAQA,GAAY,CAClDC,GAAA,MAAAA,EAAU,QAAQD,EAAO,CAC1B,CAAA,CACF,EAEeK,kBAAA,IAAMJ,GAAA,YAAAA,EAAU,YAAY"}

package/dist/components/MazAnimatedText.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as B, computed as r, ref as d, onMounted as W, onBeforeUnmount as b, openBlock as a, createElementBlock as n, createBlock as w, resolveDynamicComponent as _, mergeProps as k, withCtx as g, Fragment as D, renderList as A, createElementVNode as s, normalizeClass as $, normalizeStyle as z, toDisplayString as o, createCommentVNode as C, createTextVNode as h } from "vue";
-import { checkAvailability as V } from "../helpers/checkAvailability.mjs";
+import { defineComponent as B, computed as r, ref as m, onMounted as W, onBeforeUnmount as A, openBlock as a, createElementBlock as n, createBlock as w, resolveDynamicComponent as _, mergeProps as k, withCtx as g, Fragment as D, renderList as V, createElementVNode as s, normalizeClass as $, normalizeStyle as z, toDisplayString as o, createCommentVNode as C, createTextVNode as h } from "vue";
+import { checkAvailability as b } from "../helpers/checkAvailability.mjs";
 import { _ as I } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazAnimatedText.Dk4QO4xF.css';const M = { class: "m-reset-css m-animated-text" }, N = { class: "m-animated-text__last-word-inner" }, T = { class: "m-animated-text__last-word-inner-text" }, x = /* @__PURE__ */ B({
+import '../assets/MazAnimatedText.BM3XYGO2.css';const M = { class: "m-reset-css m-animated-text" }, N = { class: "m-animated-text__last-word-inner" }, T = { class: "m-animated-text__last-word-inner-text" }, x = /* @__PURE__ */ B({
   inheritAttrs: !1,
   __name: "MazAnimatedText",
   props: {
@@ -17,15 +17,15 @@ import '../assets/MazAnimatedText.Dk4QO4xF.css';const M = { class: "m-reset-css
     once: { type: Boolean, default: !0 }
   },
   setup(i) {
-    const m = r(() => i.text.split(" ")), G = r(() => m.value.length), u = d(!1), c = d(!1), p = r(() => u.value ? `maz-animate-slide-${i.direction}-blur` : "maz-invisible"), l = d();
+    const d = r(() => i.text.split(" ")), G = r(() => d.value.length), u = m(!1), c = m(!1), f = r(() => u.value ? `maz-animate-slide-${i.direction}-blur` : "maz-invisible"), l = m();
     let t = null;
     return W(() => {
       c.value = !0, t = new IntersectionObserver(([e]) => {
         u.value = e.isIntersecting, i.once && l.value && (t == null || t.unobserve(l.value));
-      }), V(() => l.value, (e) => {
+      }), b(() => l.value, (e) => {
         t == null || t.observe(e);
       });
-    }), b(() => t == null ? void 0 : t.disconnect()), (e, f) => (a(), n("div", M, [
+    }), A(() => t == null ? void 0 : t.disconnect()), (e, p) => (a(), n("div", M, [
       c.value ? (a(), w(_(e.tag), k({
         key: 0,
         ref_key: "element",
@@ -35,12 +35,12 @@ import '../assets/MazAnimatedText.Dk4QO4xF.css';const M = { class: "m-reset-css
         style: { columnGap: `${e.columnGap}rem`, rowGap: `${e.rowGap}rem` }
       }), {
         default: g(() => [
-          (a(!0), n(D, null, A(m.value, (y, v) => (a(), n("span", {
+          (a(!0), n(D, null, V(d.value, (y, v) => (a(), n("span", {
             key: y + v,
             class: "m-animated-text__word"
           }, [
             s("span", {
-              class: $(["m-animated-text__word-inner", p.value]),
+              class: $(["m-animated-text__word-inner", f.value]),
               style: z({
                 animationDelay: `${e.delay + v * (e.wordDelay ?? 150)}ms`,
                 animationDuration: `${e.duration}ms`
@@ -49,14 +49,14 @@ import '../assets/MazAnimatedText.Dk4QO4xF.css';const M = { class: "m-reset-css
           ]))), 128)),
           e.lastWord ? (a(), n("span", {
             key: 0,
-            class: $(["m-animated-text__last-word", p.value]),
+            class: $(["m-animated-text__last-word", f.value]),
             style: z({
               animationDelay: `${e.delay + G.value * (e.wordDelay ?? 150)}ms`,
               animationDuration: `${e.duration}ms`
             })
           }, [
             s("span", N, [
-              f[0] || (f[0] = s("span", { class: "m-animated-text__last-word-inner-gradient" }, null, -1)),
+              p[0] || (p[0] = s("span", { class: "m-animated-text__last-word-inner-gradient" }, null, -1)),
               s("span", T, o(e.lastWord), 1)
             ])
           ], 6)) : C("", !0)
@@ -73,7 +73,7 @@ import '../assets/MazAnimatedText.Dk4QO4xF.css';const M = { class: "m-reset-css
       }, 16))
     ]));
   }
-}), L = /* @__PURE__ */ I(x, [["__scopeId", "data-v-429dbc75"]]);
+}), L = /* @__PURE__ */ I(x, [["__scopeId", "data-v-14f24748"]]);
 export {
   L as default
 };

package/dist/components/MazAnimatedText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazAnimatedText.mjs","sources":["../../src/components/MazAnimatedText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { checkAvailability } from '@helpers/checkAvailability'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nexport interface MazAnimatedTextProps {\n  /**\n   * The text to animate\n   * @example \"Hello\"\n   */\n  text: string\n  /**\n   * The last word(s) to be highlighted\n   * @example \"world\"\n   */\n  lastWord?: string\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The tag to use for the text\n   * @default \"span\"\n   */\n  tag?: string\n  /**\n   * The delay between each word\n   * @default 75\n   */\n  wordDelay?: number\n  /**\n   * The column gap between each word\n   * @default 0.5\n   */\n  columnGap?: number\n  /**\n   * The row gap between each word\n   * @default 0\n   */\n  rowGap?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  text,\n  lastWord,\n  delay = 0,\n  wordDelay = 75,\n  direction = 'up',\n  tag = 'span',\n  columnGap = 0.5,\n  rowGap = 0,\n  duration = 2000,\n  once = true,\n} = defineProps<MazAnimatedTextProps>()\n\nconst words = computed(() => text.split(' '))\n\nconst wordCount = computed(() => words.value.length)\n\nconst isVisible = ref(false)\nconst isClient = ref(false)\n\nconst animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${direction}-blur` : 'maz-invisible')\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  isClient.value = true\n\n  observer = new IntersectionObserver(([entry]) => {\n    isVisible.value = entry.isIntersecting\n\n    if (once && element.value) {\n      observer?.unobserve(element.value)\n    }\n  })\n\n  checkAvailability(() => element.value, (element) => {\n    observer?.observe(element)\n  })\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div class=\"m-reset-css m-animated-text\">\n    <template v-if=\"isClient\">\n      <Component :is=\"tag\" ref=\"element\" v-bind=\"$attrs\" class=\"m-animated-text__root\" :style=\"{ columnGap: `${columnGap}rem`, rowGap: `${rowGap}rem` }\">\n        <span\n          v-for=\"(word, index) in words\"\n          :key=\"word + index\"\n          class=\"m-animated-text__word\"\n        >\n          <span\n            class=\"m-animated-text__word-inner\"\n            :class=\"animatedClass\"\n            :style=\"{\n              animationDelay: `${delay + (index * (wordDelay ?? 150))}ms`,\n              animationDuration: `${duration}ms`,\n            }\"\n          >\n            {{ word }}\n          </span>\n\n        </span>\n\n        <span\n          v-if=\"lastWord\"\n          class=\"m-animated-text__last-word\"\n          :class=\"animatedClass\"\n          :style=\"{\n            animationDelay: `${delay + (wordCount * (wordDelay ?? 150))}ms`,\n            animationDuration: `${duration}ms`,\n          }\"\n        >\n          <span class=\"m-animated-text__last-word-inner\">\n            <span class=\"m-animated-text__last-word-inner-gradient\" />\n            <span class=\"m-animated-text__last-word-inner-text\">{{ lastWord }}</span>\n          </span>\n        </span>\n      </Component>\n    </template>\n\n    <template v-else>\n      <component :is=\"tag\" v-bind=\"$attrs\" class=\"maz-invisible maz-inline-flex\">\n        {{ text }}\n\n        <template v-if=\"lastWord\">\n          {{ lastWord }}\n        </template>\n      </component>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-text {\n  &__root {\n    @apply maz-inline-flex maz-flex-wrap;\n  }\n\n  &__word {\n    @apply maz-inline-flex;\n  }\n\n  &__word-inner {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word-inner {\n    @apply maz-relative maz-inline-flex;\n  }\n\n  &__last-word-inner-gradient {\n    @apply maz-absolute maz-inset-0 maz-size-full maz-bg-gradient-to-r maz-from-primary maz-via-info maz-to-secondary maz-opacity-30 maz-blur-lg;\n  }\n\n  &__last-word-inner-text {\n    @apply maz-relative;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.maz-animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-up-blur,\n.maz-animate-slide-down-blur,\n.maz-animate-slide-left-blur,\n.maz-animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["words","computed","__props","wordCount","isVisible","ref","isClient","animatedClass","element","observer","onMounted","entry","checkAvailability","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;AA2EA,UAAMA,IAAQC,EAAS,MAAMC,EAAI,KAAC,MAAM,GAAG,CAAC,GAEtCC,IAAYF,EAAS,MAAMD,EAAM,MAAM,MAAM,GAE7CI,IAAYC,EAAI,EAAK,GACrBC,IAAWD,EAAI,EAAK,GAEpBE,IAAgBN,EAAS,MAAMG,EAAU,QAAQ,qBAAqBF,EAAA,SAAS,UAAU,eAAe,GAExGM,IAAUH,EAAoB;AAEpC,QAAII,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAAJ,EAAS,QAAQ,IAEjBG,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAAP,EAAU,QAAQO,EAAM,gBAEpBT,EAAI,QAAIM,EAAQ,UACRC,KAAA,QAAAA,EAAA,UAAUD,EAAQ;AAAA,MAC9B,CACD,GAEDI,EAAkB,MAAMJ,EAAQ,OAAO,CAACA,MAAY;AAClD,QAAAC,KAAA,QAAAA,EAAU,QAAQD;AAAAA,MAAO,CAC1B;AAAA,IAAA,CACF,GAEeK,EAAA,MAAMJ,KAAA,gBAAAA,EAAU,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazAnimatedText.mjs","sources":["../../src/components/MazAnimatedText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport { checkAvailability } from '../helpers/checkAvailability'\n\nexport interface MazAnimatedTextProps {\n  /**\n   * The text to animate\n   * @example \"Hello\"\n   */\n  text: string\n  /**\n   * The last word(s) to be highlighted\n   * @example \"world\"\n   */\n  lastWord?: string\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The tag to use for the text\n   * @default \"span\"\n   */\n  tag?: string\n  /**\n   * The delay between each word\n   * @default 75\n   */\n  wordDelay?: number\n  /**\n   * The column gap between each word\n   * @default 0.5\n   */\n  columnGap?: number\n  /**\n   * The row gap between each word\n   * @default 0\n   */\n  rowGap?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  text,\n  lastWord,\n  delay = 0,\n  wordDelay = 75,\n  direction = 'up',\n  tag = 'span',\n  columnGap = 0.5,\n  rowGap = 0,\n  duration = 2000,\n  once = true,\n} = defineProps<MazAnimatedTextProps>()\n\nconst words = computed(() => text.split(' '))\n\nconst wordCount = computed(() => words.value.length)\n\nconst isVisible = ref(false)\nconst isClient = ref(false)\n\nconst animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${direction}-blur` : 'maz-invisible')\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  isClient.value = true\n\n  observer = new IntersectionObserver(([entry]) => {\n    isVisible.value = entry.isIntersecting\n\n    if (once && element.value) {\n      observer?.unobserve(element.value)\n    }\n  })\n\n  checkAvailability(() => element.value, (element) => {\n    observer?.observe(element)\n  })\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div class=\"m-reset-css m-animated-text\">\n    <template v-if=\"isClient\">\n      <Component :is=\"tag\" ref=\"element\" v-bind=\"$attrs\" class=\"m-animated-text__root\" :style=\"{ columnGap: `${columnGap}rem`, rowGap: `${rowGap}rem` }\">\n        <span\n          v-for=\"(word, index) in words\"\n          :key=\"word + index\"\n          class=\"m-animated-text__word\"\n        >\n          <span\n            class=\"m-animated-text__word-inner\"\n            :class=\"animatedClass\"\n            :style=\"{\n              animationDelay: `${delay + (index * (wordDelay ?? 150))}ms`,\n              animationDuration: `${duration}ms`,\n            }\"\n          >\n            {{ word }}\n          </span>\n\n        </span>\n\n        <span\n          v-if=\"lastWord\"\n          class=\"m-animated-text__last-word\"\n          :class=\"animatedClass\"\n          :style=\"{\n            animationDelay: `${delay + (wordCount * (wordDelay ?? 150))}ms`,\n            animationDuration: `${duration}ms`,\n          }\"\n        >\n          <span class=\"m-animated-text__last-word-inner\">\n            <span class=\"m-animated-text__last-word-inner-gradient\" />\n            <span class=\"m-animated-text__last-word-inner-text\">{{ lastWord }}</span>\n          </span>\n        </span>\n      </Component>\n    </template>\n\n    <template v-else>\n      <component :is=\"tag\" v-bind=\"$attrs\" class=\"maz-invisible maz-inline-flex\">\n        {{ text }}\n\n        <template v-if=\"lastWord\">\n          {{ lastWord }}\n        </template>\n      </component>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-text {\n  &__root {\n    @apply maz-inline-flex maz-flex-wrap;\n  }\n\n  &__word {\n    @apply maz-inline-flex;\n  }\n\n  &__word-inner {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word-inner {\n    @apply maz-relative maz-inline-flex;\n  }\n\n  &__last-word-inner-gradient {\n    @apply maz-absolute maz-inset-0 maz-size-full maz-bg-gradient-to-r maz-from-primary maz-via-info maz-to-secondary maz-opacity-30 maz-blur-lg;\n  }\n\n  &__last-word-inner-text {\n    @apply maz-relative;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.maz-animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-up-blur,\n.maz-animate-slide-down-blur,\n.maz-animate-slide-left-blur,\n.maz-animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["words","computed","__props","wordCount","isVisible","ref","isClient","animatedClass","element","observer","onMounted","entry","checkAvailability","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;AA2EA,UAAMA,IAAQC,EAAS,MAAMC,EAAI,KAAC,MAAM,GAAG,CAAC,GAEtCC,IAAYF,EAAS,MAAMD,EAAM,MAAM,MAAM,GAE7CI,IAAYC,EAAI,EAAK,GACrBC,IAAWD,EAAI,EAAK,GAEpBE,IAAgBN,EAAS,MAAMG,EAAU,QAAQ,qBAAqBF,EAAA,SAAS,UAAU,eAAe,GAExGM,IAAUH,EAAoB;AAEpC,QAAII,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAAJ,EAAS,QAAQ,IAEjBG,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAAP,EAAU,QAAQO,EAAM,gBAEpBT,EAAI,QAAIM,EAAQ,UACRC,KAAA,QAAAA,EAAA,UAAUD,EAAQ;AAAA,MAC9B,CACD,GAEDI,EAAkB,MAAMJ,EAAQ,OAAO,CAACA,MAAY;AAClD,QAAAC,KAAA,QAAAA,EAAU,QAAQD;AAAAA,MAAO,CAC1B;AAAA,IAAA,CACF,GAEeK,EAAA,MAAMJ,KAAA,gBAAAA,EAAU,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazAvatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAvatar.L1UreldR.css');const o=require("vue"),g=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),b=["tabindex"],v=["src","alt","loading"],y={class:"m-avatar__initial"},C={key:0,class:"m-avatar__caption"},B=o.defineComponent({__name:"MazAvatar",props:{style:{},class:{},src:{default:void 0},caption:{default:void 0},href:{default:void 0},to:{default:void 0},alt:{default:"avatar image"},target:{default:"_self"},size:{default:void 0},bordered:{type:Boolean},clickable:{type:Boolean},square:{type:Boolean},noElevation:{type:Boolean},showCaption:{type:Boolean},imageHeightFull:{type:Boolean},noLoader:{type:Boolean},buttonColor:{default:"info"},noClickableIcon:{type:Boolean},letterCount:{default:void 0},roundedSize:{default:"full"},fallbackSrc:{default:void 0},noPhoto:{type:Boolean},loading:{default:"intersecting"}},emits:["click","intersecting","loading","loaded","error"],setup(n,{emit:i}){const l=n,s=i,c=o.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazLazyImg.cjs"))),d=o.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/pencil.TIXFeSep.cjs"))),u=o.computed(()=>l.to?"RouterLink":l.href?"a":"div"),r=o.computed(()=>!!l.to||!!l.href);function m(e,t=l.letterCount){return e.split(" ").map(k=>k[0]).join("").slice(0,t)}const p=o.computed(()=>l.src||!l.src&&!l.caption);function f(e){if(s("error",e.target),l.fallbackSrc&&e.target instanceof HTMLImageElement){const t=new URL(e.target.src),a=new URL(l.fallbackSrc);if(t.href===a.href)return;e.target.src=l.fallbackSrc}}return(e,t)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(u.value),{style:o.normalizeStyle([{fontSize:e.size},e.style]),class:o.normalizeClass(["m-avatar m-reset-css",[{"--has-link":r.value},l.class]]),href:e.href,to:e.to,target:r.value?e.target:void 0},{default:o.withCtx(()=>[o.createElementVNode("div",{class:o.normalizeClass(["m-avatar__wrapper",[{"--has-shadow":!e.noElevation,"--bordered":e.bordered,"--clickable":e.clickable,"--has-initial":!e.src&&e.caption},`--rounded-${e.square?"none":e.roundedSize}`]]),tabindex:e.clickable?0:-1},[p.value?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[e.loading==="intersecting"?(o.openBlock(),o.createBlock(o.unref(c),o.mergeProps({key:0},e.$attrs,{class:"m-avatar__picture maz-w-full maz-max-w-full",src:e.src,alt:e.alt,"no-photo":e.noPhoto,"image-height-full":"","no-loader":e.noLoader,"fallback-src":e.fallbackSrc,onClick:t[0]||(t[0]=a=>e.clickable?e.$emit("click",a):null),onError:t[1]||(t[1]=a=>e.$emit("error",a)),onLoaded:t[2]||(t[2]=a=>e.$emit("loaded",a)),onLoading:t[3]||(t[3]=a=>e.$emit("loading",a)),onIntersecting:t[4]||(t[4]=a=>e.$emit("intersecting",a))}),null,16,["src","alt","no-photo","no-loader","fallback-src"])):(o.openBlock(),o.createElementBlock("img",{key:1,class:"m-avatar__picture maz-w-full maz-max-w-full",src:e.src??e.fallbackSrc,alt:e.alt,loading:e.loading,onError:f},null,40,v))],64)):o.createCommentVNode("",!0),e.caption&&!e.src?o.renderSlot(e.$slots,"round-text",{key:1},()=>[o.createElementVNode("span",y,o.toDisplayString(m(e.caption)),1)],!0):o.createCommentVNode("",!0),e.clickable?(o.openBlock(),o.createElementBlock("button",{key:2,type:"button",tabindex:"-1",class:"m-avatar__button",style:o.normalizeStyle({backgroundColor:e.src?`var(--maz-color-${e.buttonColor}-alpha)`:`var(--maz-color-${e.buttonColor})`}),onClick:t[5]||(t[5]=a=>e.$emit("click",a))},[e.noClickableIcon?o.createCommentVNode("",!0):o.renderSlot(e.$slots,"icon",{key:0},()=>[o.createVNode(o.unref(d),{class:"m-avatar__button__icon"})],!0)],4)):o.createCommentVNode("",!0)],10,b),o.renderSlot(e.$slots,"caption",{},()=>[e.showCaption&&e.caption?(o.openBlock(),o.createElementBlock("p",C,o.toDisplayString(e.caption),1)):o.createCommentVNode("",!0)],!0)]),_:3},8,["style","class","href","to","target"]))}}),h=g._export_sfc(B,[["__scopeId","data-v-ba997cf5"]]);exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAvatar.udTL0S0c.css');const o=require("vue"),g=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),b=["tabindex"],v=["src","alt","loading"],y={class:"m-avatar__initial"},C={key:0,class:"m-avatar__caption"},B=o.defineComponent({__name:"MazAvatar",props:{style:{},class:{},src:{default:void 0},caption:{default:void 0},href:{default:void 0},to:{default:void 0},alt:{default:"avatar image"},target:{default:"_self"},size:{default:void 0},bordered:{type:Boolean},clickable:{type:Boolean},square:{type:Boolean},noElevation:{type:Boolean},showCaption:{type:Boolean},imageHeightFull:{type:Boolean},noLoader:{type:Boolean},buttonColor:{default:"info"},noClickableIcon:{type:Boolean},letterCount:{default:void 0},roundedSize:{default:"full"},fallbackSrc:{default:void 0},noPhoto:{type:Boolean},loading:{default:"intersecting"}},emits:["click","intersecting","loading","loaded","error"],setup(n,{emit:i}){const l=n,s=i,d=o.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazLazyImg.cjs"))),c=o.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/pencil.TIXFeSep.cjs"))),u=o.computed(()=>l.to?"RouterLink":l.href?"a":"div"),r=o.computed(()=>!!l.to||!!l.href);function m(e,t=l.letterCount){return e.split(" ").map(k=>k[0]).join("").slice(0,t)}const p=o.computed(()=>l.src||!l.src&&!l.caption);function f(e){if(s("error",e.target),l.fallbackSrc&&e.target instanceof HTMLImageElement){const t=new URL(e.target.src),a=new URL(l.fallbackSrc);if(t.href===a.href)return;e.target.src=l.fallbackSrc}}return(e,t)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(u.value),{style:o.normalizeStyle([{fontSize:e.size},e.style]),class:o.normalizeClass(["m-avatar m-reset-css",[{"--has-link":r.value},l.class]]),href:e.href,to:e.to,target:r.value?e.target:void 0},{default:o.withCtx(()=>[o.createElementVNode("div",{class:o.normalizeClass(["m-avatar__wrapper",[{"--has-shadow":!e.noElevation,"--bordered":e.bordered,"--clickable":e.clickable,"--has-initial":!e.src&&e.caption},`--rounded-${e.square?"none":e.roundedSize}`]]),tabindex:e.clickable?0:-1},[p.value?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[e.loading==="intersecting"?(o.openBlock(),o.createBlock(o.unref(d),o.mergeProps({key:0},e.$attrs,{class:"m-avatar__picture maz-w-full maz-max-w-full",src:e.src,alt:e.alt,"no-photo":e.noPhoto,"image-height-full":"","no-loader":e.noLoader,"fallback-src":e.fallbackSrc,onClick:t[0]||(t[0]=a=>e.clickable?e.$emit("click",a):null),onError:t[1]||(t[1]=a=>e.$emit("error",a)),onLoaded:t[2]||(t[2]=a=>e.$emit("loaded",a)),onLoading:t[3]||(t[3]=a=>e.$emit("loading",a)),onIntersecting:t[4]||(t[4]=a=>e.$emit("intersecting",a))}),null,16,["src","alt","no-photo","no-loader","fallback-src"])):(o.openBlock(),o.createElementBlock("img",{key:1,class:"m-avatar__picture maz-w-full maz-max-w-full",src:e.src??e.fallbackSrc,alt:e.alt,loading:e.loading,onError:f},null,40,v))],64)):o.createCommentVNode("",!0),e.caption&&!e.src?o.renderSlot(e.$slots,"round-text",{key:1},()=>[o.createElementVNode("span",y,o.toDisplayString(m(e.caption)),1)],!0):o.createCommentVNode("",!0),e.clickable?(o.openBlock(),o.createElementBlock("button",{key:2,type:"button",tabindex:"-1",class:"m-avatar__button",style:o.normalizeStyle({backgroundColor:e.src?`var(--maz-color-${e.buttonColor}-alpha)`:`var(--maz-color-${e.buttonColor})`}),onClick:t[5]||(t[5]=a=>e.$emit("click",a))},[e.noClickableIcon?o.createCommentVNode("",!0):o.renderSlot(e.$slots,"icon",{key:0},()=>[o.createVNode(o.unref(c),{class:"m-avatar__button__icon"})],!0)],4)):o.createCommentVNode("",!0)],10,b),o.renderSlot(e.$slots,"caption",{},()=>[e.showCaption&&e.caption?(o.openBlock(),o.createElementBlock("p",C,o.toDisplayString(e.caption),1)):o.createCommentVNode("",!0)],!0)]),_:3},8,["style","class","href","to","target"]))}}),h=g._export_sfc(B,[["__scopeId","data-v-6324fe57"]]);exports.default=h;
 //# sourceMappingURL=MazAvatar.cjs.map

package/dist/components/MazAvatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazAvatar.cjs","sources":["../../src/components/MazAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport type { HTMLAttributes } from 'vue'\n\nimport { computed, defineAsyncComponent } from 'vue'\n\nconst props = withDefaults(defineProps<MazAvatarProps>(), {\n  src: undefined,\n  caption: undefined,\n  href: undefined,\n  to: undefined,\n  alt: 'avatar image',\n  target: '_self',\n  size: undefined,\n  buttonColor: 'info',\n  letterCount: undefined,\n  roundedSize: 'full',\n  fallbackSrc: undefined,\n  loading: 'intersecting',\n})\n\nconst emits = defineEmits<{\n  /** Emitted when the avatar is clicked */\n  (name: 'click', event: MouseEvent): void\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazLazyImg = defineAsyncComponent(() => import('@components/MazLazyImg.vue'))\nconst PencilIcon = defineAsyncComponent(() => import('@icons/pencil.svg'))\n\nexport interface MazAvatarProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** The source of the image */\n  src?: string | null\n  /** The caption of the avatar */\n  caption?: string | null\n  /** The link of the avatar */\n  href?: string\n  /** The link (router-link) of the avatar */\n  to?: string | Record<string, unknown>\n  /** The alt of the image */\n  alt?: string\n  /** The target of the link */\n  target?: string\n  /** The size of the avatar */\n  size?: string\n  /** Add a border to the avatar */\n  bordered?: boolean\n  /** Make the avatar clickable */\n  clickable?: boolean\n  /** Make the avatar square */\n  square?: boolean\n  /** Remove the shadow */\n  noElevation?: boolean\n  /** Show the caption */\n  showCaption?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** The color of the clickable button */\n  buttonColor?: Color\n  /** Remove the icon on hover when component is clickable */\n  noClickableIcon?: boolean\n  /** Number of letters to display in the round text */\n  letterCount?: number\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** Load the fallback image by default */\n  noPhoto?: boolean\n  /**\n   * The loading strategy of the image - lazy, eager or intersecting\n   * @default 'intersecting'\n   * @values `'lazy' | 'eager' | 'intersecting'`\n   */\n  loading?: 'lazy' | 'eager' | 'intersecting'\n}\n\nconst componentType = computed(() => {\n  if (props.to)\n    return 'RouterLink'\n  if (props.href)\n    return 'a'\n  return 'div'\n})\nconst isLink = computed(() => !!props.to || !!props.href)\n\nfunction getInitials(name: string, lettersCount = props.letterCount) {\n  const words = name.split(' ')\n\n  const initials = words.map(word => word[0])\n\n  const letters = initials.join('')\n\n  return letters.slice(0, lettersCount)\n}\n\nconst shouldDisplayImg = computed(() => props.src || (!props.src && !props.caption))\n\nfunction handleImageError(event: Event) {\n  emits('error', event.target as Element)\n\n  if (props.fallbackSrc && event.target instanceof HTMLImageElement) {\n    const currentSrc = new URL(event.target.src)\n    const fallbackSrc = new URL(props.fallbackSrc)\n\n    if (currentSrc.href === fallbackSrc.href) {\n      return\n    }\n\n    event.target.src = props.fallbackSrc\n  }\n}\n</script>\n\n<template>\n  <Component\n    :is=\"componentType\"\n    :style=\"[{ fontSize: size }, style]\"\n    class=\"m-avatar m-reset-css\"\n    :class=\"[\n      {\n        '--has-link': isLink,\n      },\n      props.class,\n    ]\"\n    :href\n    :to=\"to\"\n    :target=\"isLink ? target : undefined\"\n  >\n    <div\n      class=\"m-avatar__wrapper\"\n      :tabindex=\"clickable ? 0 : -1\"\n      :class=\"[\n        {\n          '--has-shadow': !noElevation,\n          '--bordered': bordered,\n          '--clickable': clickable,\n          '--has-initial': !src && caption,\n        },\n        `--rounded-${square ? 'none' : roundedSize}`,\n      ]\"\n    >\n      <template v-if=\"shouldDisplayImg\">\n        <MazLazyImg\n          v-if=\"loading === 'intersecting'\"\n          v-bind=\"$attrs\"\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src\n          :alt\n          :no-photo\n          image-height-full\n          :no-loader\n          :fallback-src\n          @click=\"clickable ? $emit('click', $event) : null\"\n          @error=\"$emit('error', $event)\"\n          @loaded=\"$emit('loaded', $event)\"\n          @loading=\"$emit('loading', $event)\"\n          @intersecting=\"$emit('intersecting', $event)\"\n        />\n        <img\n          v-else\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src=\"src ?? fallbackSrc\"\n          :alt=\"alt\"\n          :loading\n          @error=\"handleImageError\"\n        >\n      </template>\n      <slot v-if=\"caption && !src\" name=\"round-text\">\n        <span class=\"m-avatar__initial\"> {{ getInitials(caption) }} </span>\n      </slot>\n\n      <button\n        v-if=\"clickable\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"m-avatar__button\"\n        :style=\"{\n          backgroundColor: src\n            ? `var(--maz-color-${buttonColor}-alpha)`\n            : `var(--maz-color-${buttonColor})`,\n        }\"\n        @click=\"$emit('click', $event)\"\n      >\n        <slot v-if=\"!noClickableIcon\" name=\"icon\">\n          <PencilIcon class=\"m-avatar__button__icon\" />\n        </slot>\n      </button>\n    </div>\n    <slot name=\"caption\">\n      <p v-if=\"showCaption && caption\" class=\"m-avatar__caption\">\n        {{ caption }}\n      </p>\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-avatar {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top maz-flex-center;\n  @apply !maz-no-underline;\n\n  &__caption {\n    @apply maz-w-full maz-truncate maz-text-center maz-font-medium maz-capitalize;\n  }\n\n  &__initial {\n    @apply maz-text-[1.5em] maz-capitalize maz-text-white;\n  }\n\n  &__wrapper {\n    @apply maz-relative maz-flex maz-h-[3em] maz-w-[3em] maz-flex-none maz-justify-center maz-overflow-hidden;\n\n    &.--clickable {\n      & .m-avatar__button {\n        @apply maz-absolute maz-inset-0 maz-flex maz-w-full\n            maz-cursor-pointer maz-border-none maz-bg-transparent\n            maz-opacity-0 maz-transition-all maz-duration-200 maz-flex-center;\n\n        transform: scale(0);\n\n        &__icon {\n          @apply maz-text-white;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        & .m-avatar__picture {\n          filter: blur(1.5px);\n        }\n\n        & .m-avatar__button {\n          @apply maz-opacity-100;\n\n          transform: scale(1.05);\n        }\n      }\n    }\n\n    &.--bordered {\n      @apply maz-border maz-border-solid maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n\n        .m-avatar__button {\n          @apply maz-rounded-sm;\n        }\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n\n        .m-avatar__button {\n          @apply maz-rounded-md;\n        }\n      }\n\n      &-lg {\n        @apply maz-rounded;\n\n        .m-avatar__button {\n          @apply maz-rounded-lg;\n        }\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n\n        .m-avatar__button {\n          @apply maz-rounded-xl;\n        }\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n\n        .m-avatar__button {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    &.--has-shadow {\n      @apply maz-shadow;\n    }\n\n    &.--has-initial {\n      @apply maz-items-center maz-bg-primary;\n    }\n  }\n\n  &.--has-link {\n    @apply maz-cursor-pointer;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazLazyImg","defineAsyncComponent","PencilIcon","componentType","computed","isLink","getInitials","name","lettersCount","word","shouldDisplayImg","handleImageError","event","currentSrc","fallbackSrc"],"mappings":"69BAMA,MAAMA,EAAQC,EAeRC,EAAQC,EAaRC,EAAaC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAC5EC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAmB,CAAA,CAAC,EA0DnEE,EAAgBC,EAAAA,SAAS,IACzBR,EAAM,GACD,aACLA,EAAM,KACD,IACF,KACR,EACKS,EAASD,EAAS,SAAA,IAAM,CAAC,CAACR,EAAM,IAAM,CAAC,CAACA,EAAM,IAAI,EAExD,SAASU,EAAYC,EAAcC,EAAeZ,EAAM,YAAa,CAO5D,OANOW,EAAK,MAAM,GAAG,EAEL,IAAYE,GAAAA,EAAK,CAAC,CAAC,EAEjB,KAAK,EAAE,EAEjB,MAAM,EAAGD,CAAY,CAAA,CAGhC,MAAAE,EAAmBN,WAAS,IAAMR,EAAM,KAAQ,CAACA,EAAM,KAAO,CAACA,EAAM,OAAQ,EAEnF,SAASe,EAAiBC,EAAc,CAGtC,GAFMd,EAAA,QAASc,EAAM,MAAiB,EAElChB,EAAM,aAAegB,EAAM,kBAAkB,iBAAkB,CACjE,MAAMC,EAAa,IAAI,IAAID,EAAM,OAAO,GAAG,EACrCE,EAAc,IAAI,IAAIlB,EAAM,WAAW,EAEzC,GAAAiB,EAAW,OAASC,EAAY,KAClC,OAGIF,EAAA,OAAO,IAAMhB,EAAM,WAAA,CAC3B"}
+{"version":3,"file":"MazAvatar.cjs","sources":["../../src/components/MazAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { Color } from './types'\n\nimport { computed, defineAsyncComponent } from 'vue'\n\nconst props = withDefaults(defineProps<MazAvatarProps>(), {\n  src: undefined,\n  caption: undefined,\n  href: undefined,\n  to: undefined,\n  alt: 'avatar image',\n  target: '_self',\n  size: undefined,\n  buttonColor: 'info',\n  letterCount: undefined,\n  roundedSize: 'full',\n  fallbackSrc: undefined,\n  loading: 'intersecting',\n})\n\nconst emits = defineEmits<{\n  /** Emitted when the avatar is clicked */\n  (name: 'click', event: MouseEvent): void\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazLazyImg = defineAsyncComponent(() => import('./MazLazyImg.vue'))\nconst PencilIcon = defineAsyncComponent(() => import('../../icons/pencil.svg'))\n\nexport interface MazAvatarProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** The source of the image */\n  src?: string | null\n  /** The caption of the avatar */\n  caption?: string | null\n  /** The link of the avatar */\n  href?: string\n  /** The link (router-link) of the avatar */\n  to?: string | Record<string, unknown>\n  /** The alt of the image */\n  alt?: string\n  /** The target of the link */\n  target?: string\n  /** The size of the avatar */\n  size?: string\n  /** Add a border to the avatar */\n  bordered?: boolean\n  /** Make the avatar clickable */\n  clickable?: boolean\n  /** Make the avatar square */\n  square?: boolean\n  /** Remove the shadow */\n  noElevation?: boolean\n  /** Show the caption */\n  showCaption?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** The color of the clickable button */\n  buttonColor?: Color\n  /** Remove the icon on hover when component is clickable */\n  noClickableIcon?: boolean\n  /** Number of letters to display in the round text */\n  letterCount?: number\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** Load the fallback image by default */\n  noPhoto?: boolean\n  /**\n   * The loading strategy of the image - lazy, eager or intersecting\n   * @default 'intersecting'\n   * @values `'lazy' | 'eager' | 'intersecting'`\n   */\n  loading?: 'lazy' | 'eager' | 'intersecting'\n}\n\nconst componentType = computed(() => {\n  if (props.to)\n    return 'RouterLink'\n  if (props.href)\n    return 'a'\n  return 'div'\n})\nconst isLink = computed(() => !!props.to || !!props.href)\n\nfunction getInitials(name: string, lettersCount = props.letterCount) {\n  const words = name.split(' ')\n\n  const initials = words.map(word => word[0])\n\n  const letters = initials.join('')\n\n  return letters.slice(0, lettersCount)\n}\n\nconst shouldDisplayImg = computed(() => props.src || (!props.src && !props.caption))\n\nfunction handleImageError(event: Event) {\n  emits('error', event.target as Element)\n\n  if (props.fallbackSrc && event.target instanceof HTMLImageElement) {\n    const currentSrc = new URL(event.target.src)\n    const fallbackSrc = new URL(props.fallbackSrc)\n\n    if (currentSrc.href === fallbackSrc.href) {\n      return\n    }\n\n    event.target.src = props.fallbackSrc\n  }\n}\n</script>\n\n<template>\n  <Component\n    :is=\"componentType\"\n    :style=\"[{ fontSize: size }, style]\"\n    class=\"m-avatar m-reset-css\"\n    :class=\"[\n      {\n        '--has-link': isLink,\n      },\n      props.class,\n    ]\"\n    :href\n    :to=\"to\"\n    :target=\"isLink ? target : undefined\"\n  >\n    <div\n      class=\"m-avatar__wrapper\"\n      :tabindex=\"clickable ? 0 : -1\"\n      :class=\"[\n        {\n          '--has-shadow': !noElevation,\n          '--bordered': bordered,\n          '--clickable': clickable,\n          '--has-initial': !src && caption,\n        },\n        `--rounded-${square ? 'none' : roundedSize}`,\n      ]\"\n    >\n      <template v-if=\"shouldDisplayImg\">\n        <MazLazyImg\n          v-if=\"loading === 'intersecting'\"\n          v-bind=\"$attrs\"\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src\n          :alt\n          :no-photo\n          image-height-full\n          :no-loader\n          :fallback-src\n          @click=\"clickable ? $emit('click', $event) : null\"\n          @error=\"$emit('error', $event)\"\n          @loaded=\"$emit('loaded', $event)\"\n          @loading=\"$emit('loading', $event)\"\n          @intersecting=\"$emit('intersecting', $event)\"\n        />\n        <img\n          v-else\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src=\"src ?? fallbackSrc\"\n          :alt=\"alt\"\n          :loading\n          @error=\"handleImageError\"\n        >\n      </template>\n      <slot v-if=\"caption && !src\" name=\"round-text\">\n        <span class=\"m-avatar__initial\"> {{ getInitials(caption) }} </span>\n      </slot>\n\n      <button\n        v-if=\"clickable\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"m-avatar__button\"\n        :style=\"{\n          backgroundColor: src\n            ? `var(--maz-color-${buttonColor}-alpha)`\n            : `var(--maz-color-${buttonColor})`,\n        }\"\n        @click=\"$emit('click', $event)\"\n      >\n        <slot v-if=\"!noClickableIcon\" name=\"icon\">\n          <PencilIcon class=\"m-avatar__button__icon\" />\n        </slot>\n      </button>\n    </div>\n    <slot name=\"caption\">\n      <p v-if=\"showCaption && caption\" class=\"m-avatar__caption\">\n        {{ caption }}\n      </p>\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-avatar {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top maz-flex-center;\n  @apply !maz-no-underline;\n\n  &__caption {\n    @apply maz-w-full maz-truncate maz-text-center maz-font-medium maz-capitalize;\n  }\n\n  &__initial {\n    @apply maz-text-[1.5em] maz-capitalize maz-text-white;\n  }\n\n  &__wrapper {\n    @apply maz-relative maz-flex maz-h-[3em] maz-w-[3em] maz-flex-none maz-justify-center maz-overflow-hidden;\n\n    &.--clickable {\n      & .m-avatar__button {\n        @apply maz-absolute maz-inset-0 maz-flex maz-w-full\n            maz-cursor-pointer maz-border-none maz-bg-transparent\n            maz-opacity-0 maz-transition-all maz-duration-200 maz-flex-center;\n\n        transform: scale(0);\n\n        &__icon {\n          @apply maz-text-white;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        & .m-avatar__picture {\n          filter: blur(1.5px);\n        }\n\n        & .m-avatar__button {\n          @apply maz-opacity-100;\n\n          transform: scale(1.05);\n        }\n      }\n    }\n\n    &.--bordered {\n      @apply maz-border maz-border-solid maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n\n        .m-avatar__button {\n          @apply maz-rounded-sm;\n        }\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n\n        .m-avatar__button {\n          @apply maz-rounded-md;\n        }\n      }\n\n      &-lg {\n        @apply maz-rounded;\n\n        .m-avatar__button {\n          @apply maz-rounded-lg;\n        }\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n\n        .m-avatar__button {\n          @apply maz-rounded-xl;\n        }\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n\n        .m-avatar__button {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    &.--has-shadow {\n      @apply maz-shadow;\n    }\n\n    &.--has-initial {\n      @apply maz-items-center maz-bg-primary;\n    }\n  }\n\n  &.--has-link {\n    @apply maz-cursor-pointer;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazLazyImg","defineAsyncComponent","PencilIcon","componentType","computed","isLink","getInitials","name","lettersCount","word","shouldDisplayImg","handleImageError","event","currentSrc","fallbackSrc"],"mappings":"69BAMA,MAAMA,EAAQC,EAeRC,EAAQC,EAaRC,EAAaC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAAkB,CAAA,CAAC,EAClEC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAwB,CAAA,CAAC,EA0DxEE,EAAgBC,EAAAA,SAAS,IACzBR,EAAM,GACD,aACLA,EAAM,KACD,IACF,KACR,EACKS,EAASD,EAAS,SAAA,IAAM,CAAC,CAACR,EAAM,IAAM,CAAC,CAACA,EAAM,IAAI,EAExD,SAASU,EAAYC,EAAcC,EAAeZ,EAAM,YAAa,CAO5D,OANOW,EAAK,MAAM,GAAG,EAEL,IAAYE,GAAAA,EAAK,CAAC,CAAC,EAEjB,KAAK,EAAE,EAEjB,MAAM,EAAGD,CAAY,CAAA,CAGhC,MAAAE,EAAmBN,WAAS,IAAMR,EAAM,KAAQ,CAACA,EAAM,KAAO,CAACA,EAAM,OAAQ,EAEnF,SAASe,EAAiBC,EAAc,CAGtC,GAFMd,EAAA,QAASc,EAAM,MAAiB,EAElChB,EAAM,aAAegB,EAAM,kBAAkB,iBAAkB,CACjE,MAAMC,EAAa,IAAI,IAAID,EAAM,OAAO,GAAG,EACrCE,EAAc,IAAI,IAAIlB,EAAM,WAAW,EAEzC,GAAAiB,EAAW,OAASC,EAAY,KAClC,OAGIF,EAAA,OAAO,IAAMhB,EAAM,WAAA,CAC3B"}

package/dist/components/MazAvatar.mjs

@@ -1,6 +1,6 @@
 import { defineComponent as I, defineAsyncComponent as u, computed as i, openBlock as l, createBlock as c, resolveDynamicComponent as L, normalizeStyle as m, normalizeClass as f, withCtx as E, createElementVNode as p, createElementBlock as n, Fragment as M, unref as g, mergeProps as P, createCommentVNode as r, renderSlot as s, toDisplayString as k, createVNode as A } from "vue";
 import { _ as D } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazAvatar.L1UreldR.css';const N = ["tabindex"], R = ["src", "alt", "loading"], V = { class: "m-avatar__initial" }, q = {
+import '../assets/MazAvatar.udTL0S0c.css';const N = ["tabindex"], R = ["src", "alt", "loading"], V = { class: "m-avatar__initial" }, q = {
   key: 0,
   class: "m-avatar__caption"
 }, F = /* @__PURE__ */ I({
@@ -118,7 +118,7 @@ import '../assets/MazAvatar.L1UreldR.css';const N = ["tabindex"], R = ["src", "a
       _: 3
     }, 8, ["style", "class", "href", "to", "target"]));
   }
-}), G = /* @__PURE__ */ D(F, [["__scopeId", "data-v-ba997cf5"]]);
+}), G = /* @__PURE__ */ D(F, [["__scopeId", "data-v-6324fe57"]]);
 export {
   G as default
 };

package/dist/components/MazAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazAvatar.mjs","sources":["../../src/components/MazAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport type { HTMLAttributes } from 'vue'\n\nimport { computed, defineAsyncComponent } from 'vue'\n\nconst props = withDefaults(defineProps<MazAvatarProps>(), {\n  src: undefined,\n  caption: undefined,\n  href: undefined,\n  to: undefined,\n  alt: 'avatar image',\n  target: '_self',\n  size: undefined,\n  buttonColor: 'info',\n  letterCount: undefined,\n  roundedSize: 'full',\n  fallbackSrc: undefined,\n  loading: 'intersecting',\n})\n\nconst emits = defineEmits<{\n  /** Emitted when the avatar is clicked */\n  (name: 'click', event: MouseEvent): void\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazLazyImg = defineAsyncComponent(() => import('@components/MazLazyImg.vue'))\nconst PencilIcon = defineAsyncComponent(() => import('@icons/pencil.svg'))\n\nexport interface MazAvatarProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** The source of the image */\n  src?: string | null\n  /** The caption of the avatar */\n  caption?: string | null\n  /** The link of the avatar */\n  href?: string\n  /** The link (router-link) of the avatar */\n  to?: string | Record<string, unknown>\n  /** The alt of the image */\n  alt?: string\n  /** The target of the link */\n  target?: string\n  /** The size of the avatar */\n  size?: string\n  /** Add a border to the avatar */\n  bordered?: boolean\n  /** Make the avatar clickable */\n  clickable?: boolean\n  /** Make the avatar square */\n  square?: boolean\n  /** Remove the shadow */\n  noElevation?: boolean\n  /** Show the caption */\n  showCaption?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** The color of the clickable button */\n  buttonColor?: Color\n  /** Remove the icon on hover when component is clickable */\n  noClickableIcon?: boolean\n  /** Number of letters to display in the round text */\n  letterCount?: number\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** Load the fallback image by default */\n  noPhoto?: boolean\n  /**\n   * The loading strategy of the image - lazy, eager or intersecting\n   * @default 'intersecting'\n   * @values `'lazy' | 'eager' | 'intersecting'`\n   */\n  loading?: 'lazy' | 'eager' | 'intersecting'\n}\n\nconst componentType = computed(() => {\n  if (props.to)\n    return 'RouterLink'\n  if (props.href)\n    return 'a'\n  return 'div'\n})\nconst isLink = computed(() => !!props.to || !!props.href)\n\nfunction getInitials(name: string, lettersCount = props.letterCount) {\n  const words = name.split(' ')\n\n  const initials = words.map(word => word[0])\n\n  const letters = initials.join('')\n\n  return letters.slice(0, lettersCount)\n}\n\nconst shouldDisplayImg = computed(() => props.src || (!props.src && !props.caption))\n\nfunction handleImageError(event: Event) {\n  emits('error', event.target as Element)\n\n  if (props.fallbackSrc && event.target instanceof HTMLImageElement) {\n    const currentSrc = new URL(event.target.src)\n    const fallbackSrc = new URL(props.fallbackSrc)\n\n    if (currentSrc.href === fallbackSrc.href) {\n      return\n    }\n\n    event.target.src = props.fallbackSrc\n  }\n}\n</script>\n\n<template>\n  <Component\n    :is=\"componentType\"\n    :style=\"[{ fontSize: size }, style]\"\n    class=\"m-avatar m-reset-css\"\n    :class=\"[\n      {\n        '--has-link': isLink,\n      },\n      props.class,\n    ]\"\n    :href\n    :to=\"to\"\n    :target=\"isLink ? target : undefined\"\n  >\n    <div\n      class=\"m-avatar__wrapper\"\n      :tabindex=\"clickable ? 0 : -1\"\n      :class=\"[\n        {\n          '--has-shadow': !noElevation,\n          '--bordered': bordered,\n          '--clickable': clickable,\n          '--has-initial': !src && caption,\n        },\n        `--rounded-${square ? 'none' : roundedSize}`,\n      ]\"\n    >\n      <template v-if=\"shouldDisplayImg\">\n        <MazLazyImg\n          v-if=\"loading === 'intersecting'\"\n          v-bind=\"$attrs\"\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src\n          :alt\n          :no-photo\n          image-height-full\n          :no-loader\n          :fallback-src\n          @click=\"clickable ? $emit('click', $event) : null\"\n          @error=\"$emit('error', $event)\"\n          @loaded=\"$emit('loaded', $event)\"\n          @loading=\"$emit('loading', $event)\"\n          @intersecting=\"$emit('intersecting', $event)\"\n        />\n        <img\n          v-else\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src=\"src ?? fallbackSrc\"\n          :alt=\"alt\"\n          :loading\n          @error=\"handleImageError\"\n        >\n      </template>\n      <slot v-if=\"caption && !src\" name=\"round-text\">\n        <span class=\"m-avatar__initial\"> {{ getInitials(caption) }} </span>\n      </slot>\n\n      <button\n        v-if=\"clickable\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"m-avatar__button\"\n        :style=\"{\n          backgroundColor: src\n            ? `var(--maz-color-${buttonColor}-alpha)`\n            : `var(--maz-color-${buttonColor})`,\n        }\"\n        @click=\"$emit('click', $event)\"\n      >\n        <slot v-if=\"!noClickableIcon\" name=\"icon\">\n          <PencilIcon class=\"m-avatar__button__icon\" />\n        </slot>\n      </button>\n    </div>\n    <slot name=\"caption\">\n      <p v-if=\"showCaption && caption\" class=\"m-avatar__caption\">\n        {{ caption }}\n      </p>\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-avatar {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top maz-flex-center;\n  @apply !maz-no-underline;\n\n  &__caption {\n    @apply maz-w-full maz-truncate maz-text-center maz-font-medium maz-capitalize;\n  }\n\n  &__initial {\n    @apply maz-text-[1.5em] maz-capitalize maz-text-white;\n  }\n\n  &__wrapper {\n    @apply maz-relative maz-flex maz-h-[3em] maz-w-[3em] maz-flex-none maz-justify-center maz-overflow-hidden;\n\n    &.--clickable {\n      & .m-avatar__button {\n        @apply maz-absolute maz-inset-0 maz-flex maz-w-full\n            maz-cursor-pointer maz-border-none maz-bg-transparent\n            maz-opacity-0 maz-transition-all maz-duration-200 maz-flex-center;\n\n        transform: scale(0);\n\n        &__icon {\n          @apply maz-text-white;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        & .m-avatar__picture {\n          filter: blur(1.5px);\n        }\n\n        & .m-avatar__button {\n          @apply maz-opacity-100;\n\n          transform: scale(1.05);\n        }\n      }\n    }\n\n    &.--bordered {\n      @apply maz-border maz-border-solid maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n\n        .m-avatar__button {\n          @apply maz-rounded-sm;\n        }\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n\n        .m-avatar__button {\n          @apply maz-rounded-md;\n        }\n      }\n\n      &-lg {\n        @apply maz-rounded;\n\n        .m-avatar__button {\n          @apply maz-rounded-lg;\n        }\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n\n        .m-avatar__button {\n          @apply maz-rounded-xl;\n        }\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n\n        .m-avatar__button {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    &.--has-shadow {\n      @apply maz-shadow;\n    }\n\n    &.--has-initial {\n      @apply maz-items-center maz-bg-primary;\n    }\n  }\n\n  &.--has-link {\n    @apply maz-cursor-pointer;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazLazyImg","defineAsyncComponent","PencilIcon","componentType","computed","isLink","getInitials","name","lettersCount","word","shouldDisplayImg","handleImageError","event","currentSrc","fallbackSrc"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAeRC,IAAQC,GAaRC,IAAaC,EAAqB,MAAM,OAAO,kBAA4B,CAAC,GAC5EC,IAAaD,EAAqB,MAAM,OAAO,+BAAmB,CAAC,GA0DnEE,IAAgBC,EAAS,MACzBR,EAAM,KACD,eACLA,EAAM,OACD,MACF,KACR,GACKS,IAASD,EAAS,MAAM,CAAC,CAACR,EAAM,MAAM,CAAC,CAACA,EAAM,IAAI;AAExD,aAASU,EAAYC,GAAcC,IAAeZ,EAAM,aAAa;AAO5D,aANOW,EAAK,MAAM,GAAG,EAEL,IAAI,CAAQE,MAAAA,EAAK,CAAC,CAAC,EAEjB,KAAK,EAAE,EAEjB,MAAM,GAAGD,CAAY;AAAA,IAAA;AAGhC,UAAAE,IAAmBN,EAAS,MAAMR,EAAM,OAAQ,CAACA,EAAM,OAAO,CAACA,EAAM,OAAQ;AAEnF,aAASe,EAAiBC,GAAc;AAGtC,UAFMd,EAAA,SAASc,EAAM,MAAiB,GAElChB,EAAM,eAAegB,EAAM,kBAAkB,kBAAkB;AACjE,cAAMC,IAAa,IAAI,IAAID,EAAM,OAAO,GAAG,GACrCE,IAAc,IAAI,IAAIlB,EAAM,WAAW;AAEzC,YAAAiB,EAAW,SAASC,EAAY;AAClC;AAGI,QAAAF,EAAA,OAAO,MAAMhB,EAAM;AAAA,MAAA;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazAvatar.mjs","sources":["../../src/components/MazAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { Color } from './types'\n\nimport { computed, defineAsyncComponent } from 'vue'\n\nconst props = withDefaults(defineProps<MazAvatarProps>(), {\n  src: undefined,\n  caption: undefined,\n  href: undefined,\n  to: undefined,\n  alt: 'avatar image',\n  target: '_self',\n  size: undefined,\n  buttonColor: 'info',\n  letterCount: undefined,\n  roundedSize: 'full',\n  fallbackSrc: undefined,\n  loading: 'intersecting',\n})\n\nconst emits = defineEmits<{\n  /** Emitted when the avatar is clicked */\n  (name: 'click', event: MouseEvent): void\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazLazyImg = defineAsyncComponent(() => import('./MazLazyImg.vue'))\nconst PencilIcon = defineAsyncComponent(() => import('../../icons/pencil.svg'))\n\nexport interface MazAvatarProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** The source of the image */\n  src?: string | null\n  /** The caption of the avatar */\n  caption?: string | null\n  /** The link of the avatar */\n  href?: string\n  /** The link (router-link) of the avatar */\n  to?: string | Record<string, unknown>\n  /** The alt of the image */\n  alt?: string\n  /** The target of the link */\n  target?: string\n  /** The size of the avatar */\n  size?: string\n  /** Add a border to the avatar */\n  bordered?: boolean\n  /** Make the avatar clickable */\n  clickable?: boolean\n  /** Make the avatar square */\n  square?: boolean\n  /** Remove the shadow */\n  noElevation?: boolean\n  /** Show the caption */\n  showCaption?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** The color of the clickable button */\n  buttonColor?: Color\n  /** Remove the icon on hover when component is clickable */\n  noClickableIcon?: boolean\n  /** Number of letters to display in the round text */\n  letterCount?: number\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** Load the fallback image by default */\n  noPhoto?: boolean\n  /**\n   * The loading strategy of the image - lazy, eager or intersecting\n   * @default 'intersecting'\n   * @values `'lazy' | 'eager' | 'intersecting'`\n   */\n  loading?: 'lazy' | 'eager' | 'intersecting'\n}\n\nconst componentType = computed(() => {\n  if (props.to)\n    return 'RouterLink'\n  if (props.href)\n    return 'a'\n  return 'div'\n})\nconst isLink = computed(() => !!props.to || !!props.href)\n\nfunction getInitials(name: string, lettersCount = props.letterCount) {\n  const words = name.split(' ')\n\n  const initials = words.map(word => word[0])\n\n  const letters = initials.join('')\n\n  return letters.slice(0, lettersCount)\n}\n\nconst shouldDisplayImg = computed(() => props.src || (!props.src && !props.caption))\n\nfunction handleImageError(event: Event) {\n  emits('error', event.target as Element)\n\n  if (props.fallbackSrc && event.target instanceof HTMLImageElement) {\n    const currentSrc = new URL(event.target.src)\n    const fallbackSrc = new URL(props.fallbackSrc)\n\n    if (currentSrc.href === fallbackSrc.href) {\n      return\n    }\n\n    event.target.src = props.fallbackSrc\n  }\n}\n</script>\n\n<template>\n  <Component\n    :is=\"componentType\"\n    :style=\"[{ fontSize: size }, style]\"\n    class=\"m-avatar m-reset-css\"\n    :class=\"[\n      {\n        '--has-link': isLink,\n      },\n      props.class,\n    ]\"\n    :href\n    :to=\"to\"\n    :target=\"isLink ? target : undefined\"\n  >\n    <div\n      class=\"m-avatar__wrapper\"\n      :tabindex=\"clickable ? 0 : -1\"\n      :class=\"[\n        {\n          '--has-shadow': !noElevation,\n          '--bordered': bordered,\n          '--clickable': clickable,\n          '--has-initial': !src && caption,\n        },\n        `--rounded-${square ? 'none' : roundedSize}`,\n      ]\"\n    >\n      <template v-if=\"shouldDisplayImg\">\n        <MazLazyImg\n          v-if=\"loading === 'intersecting'\"\n          v-bind=\"$attrs\"\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src\n          :alt\n          :no-photo\n          image-height-full\n          :no-loader\n          :fallback-src\n          @click=\"clickable ? $emit('click', $event) : null\"\n          @error=\"$emit('error', $event)\"\n          @loaded=\"$emit('loaded', $event)\"\n          @loading=\"$emit('loading', $event)\"\n          @intersecting=\"$emit('intersecting', $event)\"\n        />\n        <img\n          v-else\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src=\"src ?? fallbackSrc\"\n          :alt=\"alt\"\n          :loading\n          @error=\"handleImageError\"\n        >\n      </template>\n      <slot v-if=\"caption && !src\" name=\"round-text\">\n        <span class=\"m-avatar__initial\"> {{ getInitials(caption) }} </span>\n      </slot>\n\n      <button\n        v-if=\"clickable\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"m-avatar__button\"\n        :style=\"{\n          backgroundColor: src\n            ? `var(--maz-color-${buttonColor}-alpha)`\n            : `var(--maz-color-${buttonColor})`,\n        }\"\n        @click=\"$emit('click', $event)\"\n      >\n        <slot v-if=\"!noClickableIcon\" name=\"icon\">\n          <PencilIcon class=\"m-avatar__button__icon\" />\n        </slot>\n      </button>\n    </div>\n    <slot name=\"caption\">\n      <p v-if=\"showCaption && caption\" class=\"m-avatar__caption\">\n        {{ caption }}\n      </p>\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-avatar {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top maz-flex-center;\n  @apply !maz-no-underline;\n\n  &__caption {\n    @apply maz-w-full maz-truncate maz-text-center maz-font-medium maz-capitalize;\n  }\n\n  &__initial {\n    @apply maz-text-[1.5em] maz-capitalize maz-text-white;\n  }\n\n  &__wrapper {\n    @apply maz-relative maz-flex maz-h-[3em] maz-w-[3em] maz-flex-none maz-justify-center maz-overflow-hidden;\n\n    &.--clickable {\n      & .m-avatar__button {\n        @apply maz-absolute maz-inset-0 maz-flex maz-w-full\n            maz-cursor-pointer maz-border-none maz-bg-transparent\n            maz-opacity-0 maz-transition-all maz-duration-200 maz-flex-center;\n\n        transform: scale(0);\n\n        &__icon {\n          @apply maz-text-white;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        & .m-avatar__picture {\n          filter: blur(1.5px);\n        }\n\n        & .m-avatar__button {\n          @apply maz-opacity-100;\n\n          transform: scale(1.05);\n        }\n      }\n    }\n\n    &.--bordered {\n      @apply maz-border maz-border-solid maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n\n        .m-avatar__button {\n          @apply maz-rounded-sm;\n        }\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n\n        .m-avatar__button {\n          @apply maz-rounded-md;\n        }\n      }\n\n      &-lg {\n        @apply maz-rounded;\n\n        .m-avatar__button {\n          @apply maz-rounded-lg;\n        }\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n\n        .m-avatar__button {\n          @apply maz-rounded-xl;\n        }\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n\n        .m-avatar__button {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    &.--has-shadow {\n      @apply maz-shadow;\n    }\n\n    &.--has-initial {\n      @apply maz-items-center maz-bg-primary;\n    }\n  }\n\n  &.--has-link {\n    @apply maz-cursor-pointer;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazLazyImg","defineAsyncComponent","PencilIcon","componentType","computed","isLink","getInitials","name","lettersCount","word","shouldDisplayImg","handleImageError","event","currentSrc","fallbackSrc"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAeRC,IAAQC,GAaRC,IAAaC,EAAqB,MAAM,OAAO,kBAAkB,CAAC,GAClEC,IAAaD,EAAqB,MAAM,OAAO,+BAAwB,CAAC,GA0DxEE,IAAgBC,EAAS,MACzBR,EAAM,KACD,eACLA,EAAM,OACD,MACF,KACR,GACKS,IAASD,EAAS,MAAM,CAAC,CAACR,EAAM,MAAM,CAAC,CAACA,EAAM,IAAI;AAExD,aAASU,EAAYC,GAAcC,IAAeZ,EAAM,aAAa;AAO5D,aANOW,EAAK,MAAM,GAAG,EAEL,IAAI,CAAQE,MAAAA,EAAK,CAAC,CAAC,EAEjB,KAAK,EAAE,EAEjB,MAAM,GAAGD,CAAY;AAAA,IAAA;AAGhC,UAAAE,IAAmBN,EAAS,MAAMR,EAAM,OAAQ,CAACA,EAAM,OAAO,CAACA,EAAM,OAAQ;AAEnF,aAASe,EAAiBC,GAAc;AAGtC,UAFMd,EAAA,SAASc,EAAM,MAAiB,GAElChB,EAAM,eAAegB,EAAM,kBAAkB,kBAAkB;AACjE,cAAMC,IAAa,IAAI,IAAID,EAAM,OAAO,GAAG,GACrCE,IAAc,IAAI,IAAIlB,EAAM,WAAW;AAEzC,YAAAiB,EAAW,SAASC,EAAY;AAClC;AAGI,QAAAF,EAAA,OAAO,MAAMhB,EAAM;AAAA,MAAA;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazBadge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBadge.RMWNkgZL.css');const o=require("vue"),a=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),l=o.defineComponent({__name:"MazBadge",props:{color:{default:"primary"},size:{default:"0.8em"},nowrap:{type:Boolean,default:!1},outline:{type:Boolean,default:!1},pastel:{type:Boolean,default:!1},roundedSize:{default:"md"}},setup(r){return(e,n)=>(o.openBlock(),o.createElementBlock("span",{class:o.normalizeClass(["m-badge m-reset-css",[`--${e.color}`,{"--outline":e.outline,"--pastel":e.pastel,"--nowrap":e.nowrap},`--rounded-${e.roundedSize}`]]),style:o.normalizeStyle({fontSize:e.size})},[o.renderSlot(e.$slots,"default",{},void 0,!0)],6))}}),t=a._export_sfc(l,[["__scopeId","data-v-7471360e"]]);exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBadge.Cgfo0F7e.css');const o=require("vue"),a=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),l=o.defineComponent({__name:"MazBadge",props:{color:{default:"primary"},size:{default:"0.8em"},nowrap:{type:Boolean,default:!1},outline:{type:Boolean,default:!1},pastel:{type:Boolean,default:!1},roundedSize:{default:"md"}},setup(r){return(e,n)=>(o.openBlock(),o.createElementBlock("span",{class:o.normalizeClass(["m-badge m-reset-css",[`--${e.color}`,{"--outline":e.outline,"--pastel":e.pastel,"--nowrap":e.nowrap},`--rounded-${e.roundedSize}`]]),style:o.normalizeStyle({fontSize:e.size})},[o.renderSlot(e.$slots,"default",{},void 0,!0)],6))}}),t=a._export_sfc(l,[["__scopeId","data-v-295a42e8"]]);exports.default=t;
 //# sourceMappingURL=MazBadge.cjs.map

package/dist/components/MazBadge.mjs

@@ -1,6 +1,6 @@
 import { defineComponent as o, openBlock as a, createElementBlock as l, normalizeClass as t, normalizeStyle as r, renderSlot as s } from "vue";
 import { _ as n } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazBadge.RMWNkgZL.css';const d = /* @__PURE__ */ o({
+import '../assets/MazBadge.Cgfo0F7e.css';const d = /* @__PURE__ */ o({
   __name: "MazBadge",
   props: {
     color: { default: "primary" },
@@ -22,7 +22,7 @@ import '../assets/MazBadge.RMWNkgZL.css';const d = /* @__PURE__ */ o({
       s(e.$slots, "default", {}, void 0, !0)
     ], 6));
   }
-}), m = /* @__PURE__ */ n(d, [["__scopeId", "data-v-7471360e"]]);
+}), m = /* @__PURE__ */ n(d, [["__scopeId", "data-v-295a42e8"]]);
 export {
   m as default
 };

package/dist/components/MazBottomSheet.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBottomSheet.Dqr-kpLb.css');const e=require("vue"),d=require("./MazBackdrop.cjs"),i=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),m=e.defineComponent({__name:"MazBottomSheet",props:{modelValue:{type:Boolean},noClose:{type:Boolean},noPadding:{type:Boolean}},emits:["update:model-value","open","close"],setup(p,{emit:l}){const s=l,a=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),r=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/x-mark.Dz-FO7Es.cjs")));return(t,n)=>(e.openBlock(),e.createBlock(d.default,{"model-value":t.modelValue,"transition-name":"bottom-sheet-anim","backdrop-class":"--bottom-sheet","content-padding":!1,align:"end",justify:"none",variant:"bottom-sheet",onClose:n[0]||(n[0]=o=>t.$emit("close",o)),onOpen:n[1]||(n[1]=o=>t.$emit("open",o)),"onUpdate:modelValue":n[2]||(n[2]=o=>s("update:model-value",o))},{default:e.withCtx(({close:o})=>[e.createElementVNode("div",{class:e.normalizeClass(["m-bottom-sheet__container",{"--no-padding":t.noPadding}])},[e.renderSlot(t.$slots,"default",{close:o},void 0,!0),t.noClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(a),{key:0,size:"sm",class:"m-bottom-sheet__close",color:"transparent",onClick:o},{default:e.withCtx(()=>[e.createVNode(e.unref(r),{class:"maz-text-lg"})]),_:2},1032,["onClick"]))],2)]),_:3},8,["model-value"]))}}),u=i._export_sfc(m,[["__scopeId","data-v-7668c29f"]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBottomSheet.FbcAQBpM.css');const e=require("vue"),d=require("./MazBackdrop.cjs"),i=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),m=e.defineComponent({__name:"MazBottomSheet",props:{modelValue:{type:Boolean},noClose:{type:Boolean},noPadding:{type:Boolean}},emits:["update:model-value","open","close"],setup(p,{emit:l}){const s=l,a=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),r=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/x-mark.Dz-FO7Es.cjs")));return(t,n)=>(e.openBlock(),e.createBlock(d.default,{"model-value":t.modelValue,"transition-name":"bottom-sheet-anim","backdrop-class":"--bottom-sheet","content-padding":!1,align:"end",justify:"none",variant:"bottom-sheet",onClose:n[0]||(n[0]=o=>t.$emit("close",o)),onOpen:n[1]||(n[1]=o=>t.$emit("open",o)),"onUpdate:modelValue":n[2]||(n[2]=o=>s("update:model-value",o))},{default:e.withCtx(({close:o})=>[e.createElementVNode("div",{class:e.normalizeClass(["m-bottom-sheet__container",{"--no-padding":t.noPadding}])},[e.renderSlot(t.$slots,"default",{close:o},void 0,!0),t.noClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(a),{key:0,size:"sm",class:"m-bottom-sheet__close",color:"transparent",onClick:o},{default:e.withCtx(()=>[e.createVNode(e.unref(r),{class:"maz-text-lg"})]),_:2},1032,["onClick"]))],2)]),_:3},8,["model-value"]))}}),u=i._export_sfc(m,[["__scopeId","data-v-bfbc366f"]]);exports.default=u;
 //# sourceMappingURL=MazBottomSheet.cjs.map

package/dist/components/MazBottomSheet.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazBottomSheet.cjs","sources":["../../src/components/MazBottomSheet.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport MazBackdrop from '@components/MazBackdrop.vue'\nimport { defineAsyncComponent } from 'vue'\n\nexport interface MazBottomSheetProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Remove the close button */\n  noClose?: boolean\n  /** Remove the padding on the container */\n  noPadding?: boolean\n}\n\ndefineProps<MazBottomSheetProps>()\n\nconst emits = defineEmits<{\n  /** Emitted when the model value is updated */\n  'update:model-value': [value: boolean]\n  /** Emitted when the component is opened */\n  'open': [value: void]\n  /** Emitted when the component is closed */\n  'close': [value: void]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst XIcon = defineAsyncComponent(() => import('@icons/x-mark.svg'))\n</script>\n\n<template>\n  <MazBackdrop\n    :model-value=\"modelValue\"\n    transition-name=\"bottom-sheet-anim\"\n    backdrop-class=\"--bottom-sheet\"\n    :content-padding=\"false\"\n    align=\"end\"\n    justify=\"none\"\n    variant=\"bottom-sheet\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"emits('update:model-value', $event)\"\n  >\n    <template #default=\"{ close }\">\n      <div\n        class=\"m-bottom-sheet__container\"\n        :class=\"{\n          '--no-padding': noPadding,\n        }\"\n      >\n        <!--\n          @slot  Slot content\n          @binding {Function} close close function\n        -->\n        <slot :close=\"close\" />\n\n        <MazBtn\n          v-if=\"!noClose\"\n          size=\"sm\"\n          class=\"m-bottom-sheet__close\"\n          color=\"transparent\"\n          @click=\"close\"\n        >\n          <XIcon class=\"maz-text-lg\" />\n        </MazBtn>\n      </div>\n    </template>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-bottom-sheet {\n  &__container {\n    @apply maz-relative maz-bg-color maz-text-normal maz-elevation maz-w-full maz-px-12 maz-rounded-t-2xl;\n\n    &:not(.--no-padding) {\n      @apply maz-py-6;\n    }\n\n    box-shadow: 0 -5px 20px hsl(0deg 0% 0% / 20%);\n  }\n\n  &__content-wrapper {\n    @apply maz-flex maz-flex-col maz-flex-center;\n  }\n\n  &__close {\n    @apply !maz-absolute;\n    @apply maz-right-2 maz-top-2;\n  }\n}\n</style>\n"],"names":["emits","__emit","MazBtn","defineAsyncComponent","XIcon"],"mappings":"6ZAeA,MAAMA,EAAQC,EASRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAwB,CAAA,CAAC,EACpEC,EAAQD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAmB,CAAA,CAAC"}
+{"version":3,"file":"MazBottomSheet.cjs","sources":["../../src/components/MazBottomSheet.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { defineAsyncComponent } from 'vue'\nimport MazBackdrop from './MazBackdrop.vue'\n\nexport interface MazBottomSheetProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Remove the close button */\n  noClose?: boolean\n  /** Remove the padding on the container */\n  noPadding?: boolean\n}\n\ndefineProps<MazBottomSheetProps>()\n\nconst emits = defineEmits<{\n  /** Emitted when the model value is updated */\n  'update:model-value': [value: boolean]\n  /** Emitted when the component is opened */\n  'open': [value: void]\n  /** Emitted when the component is closed */\n  'close': [value: void]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst XIcon = defineAsyncComponent(() => import('../../icons/x-mark.svg'))\n</script>\n\n<template>\n  <MazBackdrop\n    :model-value=\"modelValue\"\n    transition-name=\"bottom-sheet-anim\"\n    backdrop-class=\"--bottom-sheet\"\n    :content-padding=\"false\"\n    align=\"end\"\n    justify=\"none\"\n    variant=\"bottom-sheet\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"emits('update:model-value', $event)\"\n  >\n    <template #default=\"{ close }\">\n      <div\n        class=\"m-bottom-sheet__container\"\n        :class=\"{\n          '--no-padding': noPadding,\n        }\"\n      >\n        <!--\n          @slot  Slot content\n          @binding {Function} close close function\n        -->\n        <slot :close=\"close\" />\n\n        <MazBtn\n          v-if=\"!noClose\"\n          size=\"sm\"\n          class=\"m-bottom-sheet__close\"\n          color=\"transparent\"\n          @click=\"close\"\n        >\n          <XIcon class=\"maz-text-lg\" />\n        </MazBtn>\n      </div>\n    </template>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-bottom-sheet {\n  &__container {\n    @apply maz-relative maz-bg-color maz-text-normal maz-elevation maz-w-full maz-px-12 maz-rounded-t-2xl;\n\n    &:not(.--no-padding) {\n      @apply maz-py-6;\n    }\n\n    box-shadow: 0 -5px 20px hsl(0deg 0% 0% / 20%);\n  }\n\n  &__content-wrapper {\n    @apply maz-flex maz-flex-col maz-flex-center;\n  }\n\n  &__close {\n    @apply !maz-absolute;\n    @apply maz-right-2 maz-top-2;\n  }\n}\n</style>\n"],"names":["emits","__emit","MazBtn","defineAsyncComponent","XIcon"],"mappings":"6ZAeA,MAAMA,EAAQC,EASRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAc,CAAA,CAAC,EAC1DC,EAAQD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAwB,CAAA,CAAC"}

package/dist/components/MazBottomSheet.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as u, defineAsyncComponent as n, openBlock as a, createBlock as s, withCtx as l, createElementVNode as c, normalizeClass as f, renderSlot as C, unref as m, createVNode as B, createCommentVNode as v } from "vue";
-import k from "./MazBackdrop.mjs";
-import { _ as z } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazBottomSheet.Dqr-kpLb.css';const _ = /* @__PURE__ */ u({
+import { defineComponent as u, defineAsyncComponent as n, openBlock as a, createBlock as s, withCtx as l, createElementVNode as f, normalizeClass as c, renderSlot as C, unref as m, createVNode as B, createCommentVNode as b } from "vue";
+import v from "./MazBackdrop.mjs";
+import { _ as k } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazBottomSheet.FbcAQBpM.css';const z = /* @__PURE__ */ u({
   __name: "MazBottomSheet",
   props: {
     modelValue: { type: Boolean },
@@ -9,9 +9,9 @@ import '../assets/MazBottomSheet.Dqr-kpLb.css';const _ = /* @__PURE__ */ u({
     noPadding: { type: Boolean }
   },
   emits: ["update:model-value", "open", "close"],
-  setup(b, { emit: d }) {
+  setup(_, { emit: d }) {
     const r = d, i = n(() => import("./MazBtn.mjs")), p = n(() => import("../chunks/x-mark.DTWA3lfG.mjs"));
-    return (o, t) => (a(), s(k, {
+    return (o, t) => (a(), s(v, {
       "model-value": o.modelValue,
       "transition-name": "bottom-sheet-anim",
       "backdrop-class": "--bottom-sheet",
@@ -24,13 +24,13 @@ import '../assets/MazBottomSheet.Dqr-kpLb.css';const _ = /* @__PURE__ */ u({
       "onUpdate:modelValue": t[2] || (t[2] = (e) => r("update:model-value", e))
     }, {
       default: l(({ close: e }) => [
-        c("div", {
-          class: f(["m-bottom-sheet__container", {
+        f("div", {
+          class: c(["m-bottom-sheet__container", {
             "--no-padding": o.noPadding
           }])
         }, [
           C(o.$slots, "default", { close: e }, void 0, !0),
-          o.noClose ? v("", !0) : (a(), s(m(i), {
+          o.noClose ? b("", !0) : (a(), s(m(i), {
             key: 0,
             size: "sm",
             class: "m-bottom-sheet__close",
@@ -47,7 +47,7 @@ import '../assets/MazBottomSheet.Dqr-kpLb.css';const _ = /* @__PURE__ */ u({
       _: 3
     }, 8, ["model-value"]));
   }
-}), M = /* @__PURE__ */ z(_, [["__scopeId", "data-v-7668c29f"]]);
+}), M = /* @__PURE__ */ k(z, [["__scopeId", "data-v-bfbc366f"]]);
 export {
   M as default
 };

package/dist/components/MazBottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazBottomSheet.mjs","sources":["../../src/components/MazBottomSheet.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport MazBackdrop from '@components/MazBackdrop.vue'\nimport { defineAsyncComponent } from 'vue'\n\nexport interface MazBottomSheetProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Remove the close button */\n  noClose?: boolean\n  /** Remove the padding on the container */\n  noPadding?: boolean\n}\n\ndefineProps<MazBottomSheetProps>()\n\nconst emits = defineEmits<{\n  /** Emitted when the model value is updated */\n  'update:model-value': [value: boolean]\n  /** Emitted when the component is opened */\n  'open': [value: void]\n  /** Emitted when the component is closed */\n  'close': [value: void]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst XIcon = defineAsyncComponent(() => import('@icons/x-mark.svg'))\n</script>\n\n<template>\n  <MazBackdrop\n    :model-value=\"modelValue\"\n    transition-name=\"bottom-sheet-anim\"\n    backdrop-class=\"--bottom-sheet\"\n    :content-padding=\"false\"\n    align=\"end\"\n    justify=\"none\"\n    variant=\"bottom-sheet\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"emits('update:model-value', $event)\"\n  >\n    <template #default=\"{ close }\">\n      <div\n        class=\"m-bottom-sheet__container\"\n        :class=\"{\n          '--no-padding': noPadding,\n        }\"\n      >\n        <!--\n          @slot  Slot content\n          @binding {Function} close close function\n        -->\n        <slot :close=\"close\" />\n\n        <MazBtn\n          v-if=\"!noClose\"\n          size=\"sm\"\n          class=\"m-bottom-sheet__close\"\n          color=\"transparent\"\n          @click=\"close\"\n        >\n          <XIcon class=\"maz-text-lg\" />\n        </MazBtn>\n      </div>\n    </template>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-bottom-sheet {\n  &__container {\n    @apply maz-relative maz-bg-color maz-text-normal maz-elevation maz-w-full maz-px-12 maz-rounded-t-2xl;\n\n    &:not(.--no-padding) {\n      @apply maz-py-6;\n    }\n\n    box-shadow: 0 -5px 20px hsl(0deg 0% 0% / 20%);\n  }\n\n  &__content-wrapper {\n    @apply maz-flex maz-flex-col maz-flex-center;\n  }\n\n  &__close {\n    @apply !maz-absolute;\n    @apply maz-right-2 maz-top-2;\n  }\n}\n</style>\n"],"names":["emits","__emit","MazBtn","defineAsyncComponent","XIcon"],"mappings":";;;;;;;;;;;;AAeA,UAAMA,IAAQC,GASRC,IAASC,EAAqB,MAAM,OAAO,cAAwB,CAAC,GACpEC,IAAQD,EAAqB,MAAM,OAAO,+BAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazBottomSheet.mjs","sources":["../../src/components/MazBottomSheet.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { defineAsyncComponent } from 'vue'\nimport MazBackdrop from './MazBackdrop.vue'\n\nexport interface MazBottomSheetProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Remove the close button */\n  noClose?: boolean\n  /** Remove the padding on the container */\n  noPadding?: boolean\n}\n\ndefineProps<MazBottomSheetProps>()\n\nconst emits = defineEmits<{\n  /** Emitted when the model value is updated */\n  'update:model-value': [value: boolean]\n  /** Emitted when the component is opened */\n  'open': [value: void]\n  /** Emitted when the component is closed */\n  'close': [value: void]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst XIcon = defineAsyncComponent(() => import('../../icons/x-mark.svg'))\n</script>\n\n<template>\n  <MazBackdrop\n    :model-value=\"modelValue\"\n    transition-name=\"bottom-sheet-anim\"\n    backdrop-class=\"--bottom-sheet\"\n    :content-padding=\"false\"\n    align=\"end\"\n    justify=\"none\"\n    variant=\"bottom-sheet\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"emits('update:model-value', $event)\"\n  >\n    <template #default=\"{ close }\">\n      <div\n        class=\"m-bottom-sheet__container\"\n        :class=\"{\n          '--no-padding': noPadding,\n        }\"\n      >\n        <!--\n          @slot  Slot content\n          @binding {Function} close close function\n        -->\n        <slot :close=\"close\" />\n\n        <MazBtn\n          v-if=\"!noClose\"\n          size=\"sm\"\n          class=\"m-bottom-sheet__close\"\n          color=\"transparent\"\n          @click=\"close\"\n        >\n          <XIcon class=\"maz-text-lg\" />\n        </MazBtn>\n      </div>\n    </template>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-bottom-sheet {\n  &__container {\n    @apply maz-relative maz-bg-color maz-text-normal maz-elevation maz-w-full maz-px-12 maz-rounded-t-2xl;\n\n    &:not(.--no-padding) {\n      @apply maz-py-6;\n    }\n\n    box-shadow: 0 -5px 20px hsl(0deg 0% 0% / 20%);\n  }\n\n  &__content-wrapper {\n    @apply maz-flex maz-flex-col maz-flex-center;\n  }\n\n  &__close {\n    @apply !maz-absolute;\n    @apply maz-right-2 maz-top-2;\n  }\n}\n</style>\n"],"names":["emits","__emit","MazBtn","defineAsyncComponent","XIcon"],"mappings":";;;;;;;;;;;;AAeA,UAAMA,IAAQC,GASRC,IAASC,EAAqB,MAAM,OAAO,cAAc,CAAC,GAC1DC,IAAQD,EAAqB,MAAM,OAAO,+BAAwB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazBtn.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBtn.7QWd6o3M.css');const e=require("vue"),v=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),z={key:0,class:"m-btn-loader-container"},b=e.defineComponent({__name:"MazBtn",props:{variant:{default:"button"},size:{default:"md"},color:{default:"primary"},type:{default:"button"},rounded:{type:Boolean},roundedSize:{default:"lg"},noRounded:{type:Boolean},outline:{type:Boolean},pastel:{type:Boolean},block:{type:Boolean},noUnderline:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},fab:{type:Boolean},icon:{type:[String,Function,Object],default:void 0},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0},noPadding:{type:Boolean},noElevation:{type:Boolean},justify:{default:"center"}},setup(s){const n=s,l=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazIcon.cjs"))),i=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazSpinner.cjs"))),{href:u,to:d}=e.useAttrs(),a=e.computed(()=>u?"a":d?"router-link":"button"),c=e.computed(()=>n.pastel?`--${n.color}-pastel`:n.outline?`--${n.color}-outline`:`--${n.color}`),r=e.computed(()=>(n.loading||n.disabled)&&a.value==="button"),m=e.computed(()=>r.value?"--cursor-default":"--cursor-pointer"),p=e.computed(()=>`--is-${n.variant}`),f=e.computed(()=>n.loading&&n.variant==="button"),y=e.computed(()=>a.value==="button"?n.type:void 0),t=e.computed(()=>n.size==="xl"?"maz-text-3xl":n.size==="lg"?"maz-text-2xl":n.size==="md"?"maz-text-xl":n.size==="sm"?"maz-text-lg":n.size==="xs"?"maz-text-base":n.size==="mini"?"maz-text-sm":"maz-text-xl");return(o,k)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),{disabled:r.value||void 0,class:e.normalizeClass(["m-btn m-reset-css",[`--${o.size}`,!o.fab&&!o.rounded&&o.roundedSize&&`--rounded-${o.roundedSize}`,c.value,m.value,p.value,{"--block":o.block,"--no-underline":o.noUnderline,"--fab":o.fab,"--loading":o.loading,"--disabled":r.value,"--rounded":o.rounded,"--no-rounded":o.noRounded,"--no-padding":o.noPadding,"--no-elevation":o.noElevation}]]),style:e.normalizeStyle([`--justify: ${o.justify}`]),type:y.value},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"left-icon",{},()=>[typeof o.leftIcon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.leftIcon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.leftIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.leftIcon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"icon",{},()=>[typeof o.icon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.icon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"default",{},void 0,!0),e.renderSlot(o.$slots,"right-icon",{},()=>[typeof o.rightIcon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.rightIcon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.rightIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.rightIcon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),f.value?(e.openBlock(),e.createElementBlock("div",z,[e.createVNode(e.unref(i),{size:"2em",color:o.color},null,8,["color"])])):e.createCommentVNode("",!0)]),_:3},8,["disabled","class","style","type"]))}}),B=v._export_sfc(b,[["__scopeId","data-v-db145b2a"]]);exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBtn.Bz7wwOFh.css');const e=require("vue"),v=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),z={key:0,class:"m-btn-loader-container"},b=e.defineComponent({__name:"MazBtn",props:{variant:{default:"button"},size:{default:"md"},color:{default:"primary"},type:{default:"button"},rounded:{type:Boolean},roundedSize:{default:"lg"},noRounded:{type:Boolean},outline:{type:Boolean},pastel:{type:Boolean},block:{type:Boolean},noUnderline:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},fab:{type:Boolean},icon:{type:[String,Function,Object],default:void 0},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0},noPadding:{type:Boolean},noElevation:{type:Boolean},justify:{default:"center"}},setup(s){const n=s,l=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazIcon.cjs"))),i=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazSpinner.cjs"))),{href:u,to:d}=e.useAttrs(),a=e.computed(()=>u?"a":d?"router-link":"button"),c=e.computed(()=>n.pastel?`--${n.color}-pastel`:n.outline?`--${n.color}-outline`:`--${n.color}`),r=e.computed(()=>(n.loading||n.disabled)&&a.value==="button"),m=e.computed(()=>r.value?"--cursor-default":"--cursor-pointer"),p=e.computed(()=>`--is-${n.variant}`),f=e.computed(()=>n.loading&&n.variant==="button"),y=e.computed(()=>a.value==="button"?n.type:void 0),t=e.computed(()=>n.size==="xl"?"maz-text-3xl":n.size==="lg"?"maz-text-2xl":n.size==="md"?"maz-text-xl":n.size==="sm"?"maz-text-lg":n.size==="xs"?"maz-text-base":n.size==="mini"?"maz-text-sm":"maz-text-xl");return(o,k)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),{disabled:r.value||void 0,class:e.normalizeClass(["m-btn m-reset-css",[`--${o.size}`,!o.fab&&!o.rounded&&o.roundedSize&&`--rounded-${o.roundedSize}`,c.value,m.value,p.value,{"--block":o.block,"--no-underline":o.noUnderline,"--fab":o.fab,"--loading":o.loading,"--disabled":r.value,"--rounded":o.rounded,"--no-rounded":o.noRounded,"--no-padding":o.noPadding,"--no-elevation":o.noElevation}]]),style:e.normalizeStyle([`--justify: ${o.justify}`]),type:y.value},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"left-icon",{},()=>[typeof o.leftIcon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.leftIcon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.leftIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.leftIcon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"icon",{},()=>[typeof o.icon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.icon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"default",{},void 0,!0),e.renderSlot(o.$slots,"right-icon",{},()=>[typeof o.rightIcon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.rightIcon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.rightIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.rightIcon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),f.value?(e.openBlock(),e.createElementBlock("div",z,[e.createVNode(e.unref(i),{size:"2em",color:o.color},null,8,["color"])])):e.createCommentVNode("",!0)]),_:3},8,["disabled","class","style","type"]))}}),B=v._export_sfc(b,[["__scopeId","data-v-905e7603"]]);exports.default=B;
 //# sourceMappingURL=MazBtn.cjs.map