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

package/dist/components/MazCard.mjs

@@ -0,0 +1,174 @@
+import { defineComponent as A, defineAsyncComponent as m, useSlots as H, computed as r, ref as N, watch as T, openBlock as a, createElementBlock as n, normalizeClass as u, createBlock as p, resolveDynamicComponent as g, withModifiers as b, withCtx as c, renderSlot as i, createTextVNode as j, toDisplayString as E, createCommentVNode as s, unref as v, createVNode as w, mergeProps as P, createElementVNode as k, withDirectives as W, vShow as I } from "vue";
+import { _ as R } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazCard.Cod9pIM4.css';const G = {
+  key: 0,
+  class: "m-card__gallery__wrapper"
+}, L = { class: "maz-min-w-0 maz-flex-1" }, q = {
+  key: 0,
+  class: "m-card__title"
+}, F = {
+  key: 1,
+  class: "m-card__subtitle"
+}, J = {
+  key: 2,
+  class: "m-card__content"
+}, K = {
+  key: 2,
+  class: "m-card__actions maz-flex maz-p-2"
+}, Q = /* @__PURE__ */ A({
+  __name: "MazCard",
+  props: {
+    images: { default: void 0 },
+    orientation: { default: "column" },
+    href: { default: void 0 },
+    to: { default: void 0 },
+    hrefTarget: { default: "_self" },
+    footerAlign: { default: "right" },
+    galleryWidth: { default: 200 },
+    galleryHeight: { default: 150 },
+    zoom: { type: Boolean },
+    elevation: { type: Boolean, default: !0 },
+    radius: { type: Boolean, default: !0 },
+    bordered: { type: Boolean },
+    imagesShowCount: { default: 3 },
+    noRemaining: { type: Boolean, default: !0 },
+    scale: { type: Boolean, default: !0 },
+    wrapperClass: { default: void 0 },
+    noPadding: { type: Boolean },
+    overflowHidden: { type: Boolean },
+    collapsable: { type: Boolean },
+    collapsible: { type: Boolean },
+    collapseOpen: { type: Boolean },
+    header: { default: void 0 },
+    block: { type: Boolean }
+  },
+  setup(C) {
+    const o = C, $ = m(() => import("./MazBtn.mjs")), _ = m(() => import("./MazGallery.mjs")), B = m(() => import("./MazTransitionExpand.mjs")), S = m(() => import("../chunks/chevron-down.CWWH3GZ1.mjs")), M = H(), t = r(() => o.collapsible || o.collapsable), l = N(t.value ? o.collapseOpen : !0), z = r(() => o.href || o.to);
+    T(
+      () => o.collapseOpen,
+      (e) => {
+        t.value && (l.value = e);
+      }
+    );
+    const y = r(() => ({
+      is: o.href ? "a" : o.to ? "router-link" : "div",
+      ...o.href && { href: o.href },
+      ...o.to && { to: o.to },
+      target: o.hrefTarget
+    })), h = r(() => ["column", "column-reverse"].includes(o.orientation)), f = r(() => {
+      const e = /* @__PURE__ */ new Set(["default", "title", "subtitle", "content"]);
+      return Object.keys(M).some((d) => e.has(d));
+    }), D = r(() => f.value ? o.galleryWidth : "100%"), O = r(
+      () => o.footerAlign === "right" ? "maz-text-end" : "maz-text-start"
+    );
+    return (e, d) => (a(), n("div", {
+      class: u(["m-card m-reset-css", [
+        {
+          "m-card--linked": z.value,
+          "m-card--no-scale": !e.scale,
+          "maz-elevation": e.elevation,
+          "--block": e.block,
+          "maz-overflow-hidden": e.overflowHidden || !l.value,
+          "maz-rounded": e.radius,
+          "maz-border maz-border-solid maz-border-color-light": e.bordered
+        }
+      ]])
+    }, [
+      e.$slots.header || e.header || t.value ? (a(), p(g(t.value ? "button" : "div"), {
+        key: 0,
+        class: u(["m-card__header maz-border-b maz-border-solid", [
+          l.value ? "maz-rounded-t maz-border-color-light" : "maz-border-transparent",
+          { "--is-collapsible": t.value },
+          { "maz-justify-end": (!e.$slots.header || !e.header) && t.value },
+          { "maz-justify-between": e.$slots.header || e.header }
+        ]]),
+        tabindex: "-1",
+        onClick: d[1] || (d[1] = b((V) => t.value ? l.value = !l.value : void 0, ["stop"]))
+      }, {
+        default: c(() => [
+          e.$slots.header || e.header ? i(e.$slots, "header", { key: 0 }, () => [
+            j(E(e.header), 1)
+          ], !0) : s("", !0),
+          t.value ? (a(), p(v($), {
+            key: 1,
+            color: "transparent",
+            class: "maz-ml-2 maz-text-sm",
+            size: "xs",
+            onClick: d[0] || (d[0] = b((V) => l.value = !l.value, ["stop"]))
+          }, {
+            default: c(() => [
+              w(v(S), {
+                class: u([{ "--is-open": l.value }, "m-card__collapse-icon maz-text-xl"])
+              }, null, 8, ["class"])
+            ]),
+            _: 1
+          })) : s("", !0)
+        ]),
+        _: 3
+      }, 8, ["class"])) : s("", !0),
+      (a(), p(g(y.value.is), P(y.value, {
+        class: ["m-card__wrapper", [`m-card__wrapper--${e.orientation}`, { "m-card__link": z.value }]]
+      }), {
+        default: c(() => [
+          e.images ? (a(), n("div", G, [
+            w(v(_), {
+              "no-radius": !e.radius,
+              width: D.value,
+              height: e.galleryHeight,
+              "images-shown-count": e.imagesShowCount,
+              images: e.images,
+              "no-zoom": !e.zoom,
+              "no-width": h.value,
+              "no-height": !h.value && f.value,
+              "no-remaining": e.noRemaining,
+              class: "m-card__gallery maz-flex-1"
+            }, null, 8, ["no-radius", "width", "height", "images-shown-count", "images", "no-zoom", "no-width", "no-height", "no-remaining"])
+          ])) : s("", !0),
+          k("div", L, [
+            (a(), p(g(t.value ? v(B) : "div"), { class: "maz-h-full" }, {
+              default: c(() => [
+                W(k("div", {
+                  class: u([[e.wrapperClass, { "maz-p-4": !e.noPadding && !t.value }], "m-card__content__wrapper maz-h-full"])
+                }, [
+                  i(e.$slots, "default", {}, () => [
+                    e.$slots.title ? (a(), n("div", q, [
+                      i(e.$slots, "title", {}, void 0, !0)
+                    ])) : s("", !0),
+                    e.$slots.subtitle ? (a(), n("div", F, [
+                      i(e.$slots, "subtitle", {}, void 0, !0)
+                    ])) : s("", !0),
+                    e.$slots.content ? (a(), n("div", J, [
+                      i(e.$slots, "content", {}, void 0, !0)
+                    ])) : s("", !0)
+                  ], !0)
+                ], 2), [
+                  [I, l.value]
+                ])
+              ]),
+              _: 3
+            }))
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"])),
+      e.$slots.footer ? (a(), n("div", {
+        key: 1,
+        class: u(["m-card__footer maz-overflow-x-auto maz-p-3", [
+          {
+            "maz-border-t maz-border-color-light": h.value && f.value
+          },
+          O.value
+        ]])
+      }, [
+        i(e.$slots, "footer", {}, void 0, !0)
+      ], 2)) : s("", !0),
+      e.$slots.actions ? (a(), n("div", K, [
+        i(e.$slots, "actions", {}, void 0, !0)
+      ])) : s("", !0)
+    ], 2));
+  }
+}), Y = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-2d55f280"]]);
+export {
+  Y as default
+};
+//# sourceMappingURL=MazCard.mjs.map

package/dist/components/MazCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCard.mjs","sources":["../../src/components/MazCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazGalleryImage } from '@components/types'\nimport type { RouterLinkProps } from 'vue-router'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, useSlots, watch } from 'vue'\n\nconst props = withDefaults(defineProps<MazCardProps>(), {\n  images: undefined,\n  orientation: 'column',\n  href: undefined,\n  to: undefined,\n  hrefTarget: '_self',\n  footerAlign: 'right',\n  galleryWidth: 200,\n  galleryHeight: 150,\n  elevation: true,\n  radius: true,\n  imagesShowCount: 3,\n  noRemaining: true,\n  scale: true,\n  wrapperClass: undefined,\n  header: undefined,\n})\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazGallery = defineAsyncComponent(() => import('@components/MazGallery.vue'))\nconst MazTransitionExpand = defineAsyncComponent(() => import('@components/MazTransitionExpand.vue'))\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\n\nexport interface MazCardProps {\n  /** Images displayed */\n  images?: MazGalleryImage[]\n  /** Card variant: Must be `column | row | row-reverse | column-reverse` */\n  orientation?: 'column' | 'row' | 'row-reverse' | 'column-reverse'\n  /** Make card a link (footer area excluded) */\n  href?: string\n  /** Make card a link with a router-link (footer area excluded) */\n  to?: RouterLinkProps['to']\n  /** Target option of link: Muse be one of `_blank | _self | _parent | _top | framename` */\n  hrefTarget?: '_blank' | '_self' | '_parent' | '_top' | string\n  /** Footer text alignment: `right | left` */\n  footerAlign?: 'right' | 'left'\n  /** Gallery image width */\n  galleryWidth?: string | number\n  /** Gallery image height */\n  galleryHeight?: string | number\n  /** Enable \"zoom\" image on click (can't be used when the card has a link) */\n  zoom?: boolean\n  /** Set elevation to card (box-shadow) */\n  elevation?: boolean\n  /** Set radius to card */\n  radius?: boolean\n  /** Set border to card (in dark mode, the card is always bordered) */\n  bordered?: boolean\n  /** Number of images shown in the gallery */\n  imagesShowCount?: number\n  /** Remove transparent layer with the remain count (ex: +2) */\n  noRemaining?: boolean\n  /** scale animation on hover (only linked cards) */\n  scale?: boolean\n  /** add classes to wrapper */\n  wrapperClass?: HTMLAttributes['class']\n  /** Remove padding from content wrapper */\n  noPadding?: boolean\n  /** Hide overflow */\n  overflowHidden?: boolean\n  /**\n   * @deprecated Use `collapsible` instead\n   */\n  collapsable?: boolean\n  /**\n   * Card can be open and close\n   */\n  collapsible?: boolean\n  /** Card is open by default if `true` */\n  collapseOpen?: boolean\n  /** Title of the card in header */\n  header?: string\n  /** The card will be displayed in full width */\n  block?: boolean\n}\n\nconst slots = useSlots()\n\nconst isCollapsible = computed(() => props.collapsible || props.collapsable)\n\nconst isOpen = ref(isCollapsible.value ? props.collapseOpen : true)\n\nconst isLinked = computed(() => props.href || props.to)\n\nwatch(\n  () => props.collapseOpen,\n  (value) => {\n    if (isCollapsible.value)\n      isOpen.value = value\n  },\n)\n\nconst wrapperData = computed(() => {\n  return {\n    is: props.href ? 'a' : props.to ? 'router-link' : 'div',\n    ...(props.href && { href: props.href }),\n    ...(props.to && { to: props.to }),\n    target: props.hrefTarget,\n  }\n})\n\nconst isColumnVariant = computed(() => ['column', 'column-reverse'].includes(props.orientation))\n\nconst haveSomeContent = computed(() => {\n  const supportedSlots = new Set(['default', 'title', 'subtitle', 'content'])\n  return Object.keys(slots).some(val => supportedSlots.has(val))\n})\n\nconst galleryWidthComputed = computed(() => (haveSomeContent.value ? props.galleryWidth : '100%'))\n\nconst footerAlignClass = computed(() =>\n  props.footerAlign === 'right' ? 'maz-text-end' : 'maz-text-start',\n)\n</script>\n\n<template>\n  <div\n    class=\"m-card m-reset-css\"\n    :class=\"[\n      {\n        'm-card--linked': isLinked,\n        'm-card--no-scale': !scale,\n        'maz-elevation': elevation,\n        '--block': block,\n        'maz-overflow-hidden': overflowHidden || !isOpen,\n        'maz-rounded': radius,\n        'maz-border maz-border-solid maz-border-color-light': bordered,\n      },\n    ]\"\n  >\n    <Component\n      :is=\"isCollapsible ? 'button' : 'div'\"\n      v-if=\"$slots.header || header || isCollapsible\"\n      class=\"m-card__header maz-border-b maz-border-solid\"\n      :class=\"[\n        isOpen ? 'maz-rounded-t maz-border-color-light' : 'maz-border-transparent',\n        { '--is-collapsible': isCollapsible },\n        { 'maz-justify-end': (!$slots.header || !header) && isCollapsible },\n        { 'maz-justify-between': $slots.header || header },\n      ]\"\n      tabindex=\"-1\"\n      @click.stop=\"isCollapsible ? (isOpen = !isOpen) : undefined\"\n    >\n      <slot v-if=\"$slots.header || header\" name=\"header\">\n        {{ header }}\n      </slot>\n\n      <MazBtn\n        v-if=\"isCollapsible\"\n        color=\"transparent\"\n        class=\"maz-ml-2 maz-text-sm\"\n        size=\"xs\"\n        @click.stop=\"isOpen = !isOpen\"\n      >\n        <ChevronDownIcon\n          :class=\"{ '--is-open': isOpen }\"\n          class=\"m-card__collapse-icon maz-text-xl\"\n        />\n      </MazBtn>\n    </Component>\n    <Component\n      :is=\"wrapperData.is\"\n      v-bind=\"wrapperData\"\n      class=\"m-card__wrapper\"\n      :class=\"[`m-card__wrapper--${orientation}`, { 'm-card__link': isLinked }]\"\n    >\n      <div v-if=\"images\" class=\"m-card__gallery__wrapper\">\n        <MazGallery\n          :no-radius=\"!radius\"\n          :width=\"galleryWidthComputed\"\n          :height=\"galleryHeight\"\n          :images-shown-count=\"imagesShowCount\"\n          :images=\"images\"\n          :no-zoom=\"!zoom\"\n          :no-width=\"isColumnVariant\"\n          :no-height=\"!isColumnVariant && haveSomeContent\"\n          :no-remaining=\"noRemaining\"\n          class=\"m-card__gallery maz-flex-1\"\n        />\n      </div>\n      <div class=\"maz-min-w-0 maz-flex-1\">\n        <Component :is=\"isCollapsible ? MazTransitionExpand : 'div'\" class=\"maz-h-full\">\n          <div\n            v-show=\"isOpen\"\n            :class=\"[wrapperClass, { 'maz-p-4': !noPadding && !isCollapsible }]\"\n            class=\"m-card__content__wrapper maz-h-full\"\n          >\n            <slot>\n              <div v-if=\"$slots.title\" class=\"m-card__title\">\n                <slot name=\"title\" />\n              </div>\n              <div v-if=\"$slots.subtitle\" class=\"m-card__subtitle\">\n                <slot name=\"subtitle\" />\n              </div>\n              <div v-if=\"$slots.content\" class=\"m-card__content\">\n                <slot name=\"content\" />\n              </div>\n            </slot>\n          </div>\n        </Component>\n      </div>\n    </Component>\n    <div\n      v-if=\"$slots.footer\"\n      class=\"m-card__footer maz-overflow-x-auto maz-p-3\"\n      :class=\"[\n        {\n          'maz-border-t maz-border-color-light': isColumnVariant && haveSomeContent,\n        },\n        footerAlignClass,\n      ]\"\n    >\n      <slot name=\"footer\" />\n    </div>\n    <div v-if=\"$slots.actions\" class=\"m-card__actions maz-flex maz-p-2\">\n      <!-- @slot action of gallery -->\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-card {\n  @apply maz-relative maz-inline-flex maz-max-h-full maz-flex-col maz-bg-color dark:maz-border dark:maz-border-color-light;\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__header {\n    @apply maz-flex maz-items-center maz-px-4 maz-py-3 maz-transition-colors maz-duration-200;\n\n    &.--is-collapsible {\n      @apply hover:maz-bg-color-light;\n    }\n  }\n\n  &__collapse-icon {\n    @apply maz-rotate-0 maz-transition-transform maz-duration-200;\n\n    &.--is-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &__wrapper {\n    @apply maz-flex maz-flex-1;\n\n    &--row {\n      @apply maz-flex-row;\n    }\n\n    &--row-reverse {\n      @apply maz-flex-row-reverse;\n    }\n\n    &--column {\n      @apply maz-flex-col;\n    }\n\n    &--column-reverse {\n      @apply maz-flex-col-reverse;\n    }\n  }\n\n  &--linked {\n    transition: all 300ms ease-in-out;\n    transform: scale(1);\n\n    &:hover:not(.m-card--no-scale) {\n      @apply maz-z-1;\n\n      transform: scale(1.02);\n    }\n\n    & .m-card__wrapper {\n      @apply maz-cursor-pointer maz-no-underline;\n\n      &:hover {\n        @apply maz-no-underline;\n      }\n    }\n  }\n\n  &__content__wrapper {\n    @apply maz-relative maz-max-w-full;\n  }\n\n  &__title,\n  &__title > * {\n    font-size: 1.2em;\n\n    @apply maz-text-normal;\n  }\n\n  &__subtitle,\n  &__subtitle > * {\n    font-size: 1.1em;\n\n    @apply maz-text-muted;\n  }\n\n  &__gallery__wrapper {\n    @apply maz-relative maz-flex maz-overflow-hidden;\n  }\n\n  &__actions {\n    @apply maz-absolute maz-left-0 maz-top-0 maz-z-2;\n\n    & > *:not(:last-child) {\n      @apply maz-mr-2;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazBtn","defineAsyncComponent","MazGallery","MazTransitionExpand","ChevronDownIcon","slots","useSlots","isCollapsible","computed","isOpen","ref","isLinked","watch","value","wrapperData","isColumnVariant","haveSomeContent","supportedSlots","val","galleryWidthComputed","footerAlignClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAkBRC,IAASC,EAAqB,MAAM,OAAO,cAAwB,CAAC,GACpEC,IAAaD,EAAqB,MAAM,OAAO,kBAA4B,CAAC,GAC5EE,IAAsBF,EAAqB,MAAM,OAAO,2BAAqC,CAAC,GAE9FG,IAAkBH,EAAqB,MAAM,OAAO,qCAAyB,CAAC,GAuD9EI,IAAQC,EAAS,GAEjBC,IAAgBC,EAAS,MAAMV,EAAM,eAAeA,EAAM,WAAW,GAErEW,IAASC,EAAIH,EAAc,QAAQT,EAAM,eAAe,EAAI,GAE5Da,IAAWH,EAAS,MAAMV,EAAM,QAAQA,EAAM,EAAE;AAEtD,IAAAc;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAU;AACT,QAAIN,EAAc,UAChBE,EAAO,QAAQI;AAAA,MAAA;AAAA,IAErB;AAEM,UAAAC,IAAcN,EAAS,OACpB;AAAA,MACL,IAAIV,EAAM,OAAO,MAAMA,EAAM,KAAK,gBAAgB;AAAA,MAClD,GAAIA,EAAM,QAAQ,EAAE,MAAMA,EAAM,KAAK;AAAA,MACrC,GAAIA,EAAM,MAAM,EAAE,IAAIA,EAAM,GAAG;AAAA,MAC/B,QAAQA,EAAM;AAAA,IAChB,EACD,GAEKiB,IAAkBP,EAAS,MAAM,CAAC,UAAU,gBAAgB,EAAE,SAASV,EAAM,WAAW,CAAC,GAEzFkB,IAAkBR,EAAS,MAAM;AAC/B,YAAAS,wBAAqB,IAAI,CAAC,WAAW,SAAS,YAAY,SAAS,CAAC;AACnE,aAAA,OAAO,KAAKZ,CAAK,EAAE,KAAK,CAAOa,MAAAD,EAAe,IAAIC,CAAG,CAAC;AAAA,IAAA,CAC9D,GAEKC,IAAuBX,EAAS,MAAOQ,EAAgB,QAAQlB,EAAM,eAAe,MAAO,GAE3FsB,IAAmBZ;AAAA,MAAS,MAChCV,EAAM,gBAAgB,UAAU,iBAAiB;AAAA,IACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazCardSpotlight.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCardSpotlight.DuZac0w4.css');const e=require("vue"),f=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),b={class:"inner"},h=e.defineComponent({__name:"MazCardSpotlight",props:{color:{default:"primary"},noElevation:{type:Boolean,default:!1},padding:{type:Boolean,default:!0},contentClass:{default:void 0},contentStyle:{type:[Boolean,null,String,Object,Array],default:void 0},innerOpacity:{default:.95}},setup(m){const n=m,r=e.ref(),i=e.ref(),a=e.ref(!1);function s({clientX:o,clientY:c}){var d,l,u;a.value=!0;const t=(d=i.value)==null?void 0:d.getBoundingClientRect();t&&((u=(l=r.value)==null?void 0:l.animate)==null||u.call(l,[{transform:`translate(${o-t.left-t.width/2}px,${c-t.top-t.height/2}px)`}],{duration:300,fill:"forwards"}))}const p=e.computed(()=>`var(--maz-color-${n.color}-alpha)`),v=e.computed(()=>`var(--maz-color-${n.color}-alpha-20)`);return e.onMounted(()=>{window.addEventListener("mousemove",s)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",s)}),(o,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-card-spotlight m-reset-css",{"maz-elevation":!o.noElevation}]),style:e.normalizeStyle({backgroundColor:v.value,"--inner-opacity":o.innerOpacity})},[e.createElementVNode("div",b,[e.createElementVNode("div",{class:e.normalizeClass(["content",[{"maz-p-4":o.padding},o.contentClass]])},[e.renderSlot(o.$slots,"default",{},void 0,!0)],2)]),e.withDirectives(e.createElementVNode("div",{ref_key:"blobElement",ref:r,class:"blob",style:e.normalizeStyle({backgroundColor:p.value})},null,4),[[e.vShow,a.value]]),e.withDirectives(e.createElementVNode("div",{ref_key:"fakeblobElement",ref:i,class:"fakeblob"},null,512),[[e.vShow,a.value]])],6))}}),y=f._export_sfc(h,[["__scopeId","data-v-23212ba3"]]);exports.default=y;
+//# sourceMappingURL=MazCardSpotlight.cjs.map

package/dist/components/MazCardSpotlight.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCardSpotlight.cjs","sources":["../../src/components/MazCardSpotlight.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref, type StyleValue } from 'vue'\n\nexport interface MazCardSpotlightProps {\n  /**\n   * The color of the component.\n   * @default primary\n   */\n  color?: Color\n  /**\n   * Remove the elevation of the component\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Add padding to the content\n   * @default true\n   */\n  padding?: boolean\n  /**\n   * The classes to apply to the content div\n   */\n  contentClass?: HTMLAttributes['class']\n  /**\n   * Style apply to the content div\n   */\n  contentStyle?: StyleValue\n  /**\n   * The opacity of the inner div - should be between 0 and 1\n   * When 0 the spotlight is completely visible\n   * When 1 the spotlight is only visible on borders\n   * @default 0.95\n   */\n  innerOpacity?: number\n}\n\nconst props = withDefaults(defineProps<MazCardSpotlightProps>(), {\n  noElevation: false,\n  color: 'primary',\n  padding: true,\n  contentClass: undefined,\n  contentStyle: undefined,\n  innerOpacity: 0.95,\n})\n\nconst blobElement = ref<HTMLDivElement>()\nconst fakeblobElement = ref<HTMLDivElement>()\nconst blobVisible = ref<boolean>(false)\n\nfunction animateBlob({ clientX, clientY }: { clientX: number, clientY: number }) {\n  blobVisible.value = true\n  const rec = fakeblobElement.value?.getBoundingClientRect()\n\n  if (rec) {\n    blobElement.value?.animate?.(\n      [\n        {\n          transform: `translate(${clientX - rec.left - rec.width / 2}px,${\n            clientY - rec.top - rec.height / 2\n          }px)`,\n        },\n      ],\n      {\n        duration: 300,\n        fill: 'forwards',\n      },\n    )\n  }\n}\n\nconst alphaColor = computed(() => `var(--maz-color-${props.color}-alpha)`)\nconst alphaColor20 = computed(() => `var(--maz-color-${props.color}-alpha-20)`)\n\nonMounted(() => {\n  window.addEventListener('mousemove', animateBlob)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('mousemove', animateBlob)\n})\n</script>\n\n<template>\n  <div\n    class=\"m-card-spotlight m-reset-css\"\n    :class=\"{ 'maz-elevation': !noElevation }\"\n    :style=\"{ 'backgroundColor': alphaColor20, '--inner-opacity': innerOpacity }\"\n  >\n    <div class=\"inner\">\n      <div class=\"content\" :class=\"[{ 'maz-p-4': padding }, contentClass]\">\n        <slot />\n      </div>\n    </div>\n    <div\n      v-show=\"blobVisible\"\n      ref=\"blobElement\"\n      class=\"blob\"\n      :style=\"{ backgroundColor: alphaColor }\"\n    />\n    <div v-show=\"blobVisible\" ref=\"fakeblobElement\" class=\"fakeblob\" />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-card-spotlight {\n  @apply maz-relative maz-inline-flex maz-overflow-hidden maz-rounded maz-p-[var(--maz-border-width)];\n\n  .inner {\n    @apply maz-relative maz-h-auto maz-w-full maz-overflow-hidden;\n\n    border-radius: calc(var(--maz-border-radius) - var(--maz-border-width));\n\n    &::before {\n      content: '';\n\n      @apply maz-absolute maz-left-0 maz-top-0 maz-z-1 maz-h-full maz-w-full maz-bg-color;\n\n      opacity: var(--inner-opacity);\n    }\n  }\n\n  .content {\n    @apply maz-relative maz-z-2 maz-h-full maz-w-full;\n  }\n\n  .blob {\n    @apply maz-absolute maz-left-0 maz-top-0 maz-z-[0] maz-h-64 maz-w-64 maz-rounded-full maz-blur-2xl;\n  }\n\n  .fakeblob {\n    display: hidden;\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n\n    @apply maz-h-52 maz-w-52 maz-rounded-full;\n  }\n}\n</style>\n"],"names":["props","__props","blobElement","ref","fakeblobElement","blobVisible","animateBlob","clientX","clientY","rec","_a","_c","_b","alphaColor","computed","alphaColor20","onMounted","onUnmounted"],"mappings":"ofAqCA,MAAMA,EAAQC,EASRC,EAAcC,EAAAA,IAAoB,EAClCC,EAAkBD,EAAAA,IAAoB,EACtCE,EAAcF,MAAa,EAAK,EAEtC,SAASG,EAAY,CAAE,QAAAC,EAAS,QAAAC,GAAiD,WAC/EH,EAAY,MAAQ,GACd,MAAAI,GAAMC,EAAAN,EAAgB,QAAhB,YAAAM,EAAuB,wBAE/BD,KACFE,GAAAC,EAAAV,EAAY,QAAZ,YAAAU,EAAmB,UAAnB,MAAAD,EAAA,KAAAC,EACE,CACE,CACE,UAAW,aAAaL,EAAUE,EAAI,KAAOA,EAAI,MAAQ,CAAC,MACxDD,EAAUC,EAAI,IAAMA,EAAI,OAAS,CACnC,KAAA,CAEJ,EACA,CACE,SAAU,IACV,KAAM,UAAA,GAGZ,CAGF,MAAMI,EAAaC,EAAAA,SAAS,IAAM,mBAAmBd,EAAM,KAAK,SAAS,EACnEe,EAAeD,EAAAA,SAAS,IAAM,mBAAmBd,EAAM,KAAK,YAAY,EAE9EgB,OAAAA,EAAAA,UAAU,IAAM,CACP,OAAA,iBAAiB,YAAaV,CAAW,CAAA,CACjD,EAEDW,EAAAA,YAAY,IAAM,CACT,OAAA,oBAAoB,YAAaX,CAAW,CAAA,CACpD"}

package/dist/components/MazCardSpotlight.mjs

@@ -0,0 +1,69 @@
+import { defineComponent as E, ref as n, computed as m, onMounted as _, onUnmounted as k, openBlock as w, createElementBlock as z, normalizeClass as f, normalizeStyle as v, createElementVNode as a, renderSlot as B, withDirectives as b, vShow as h } from "vue";
+import { _ as S } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazCardSpotlight.DuZac0w4.css';const $ = { class: "inner" }, M = /* @__PURE__ */ E({
+  __name: "MazCardSpotlight",
+  props: {
+    color: { default: "primary" },
+    noElevation: { type: Boolean, default: !1 },
+    padding: { type: Boolean, default: !0 },
+    contentClass: { default: void 0 },
+    contentStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
+    innerOpacity: { default: 0.95 }
+  },
+  setup(y) {
+    const r = y, s = n(), i = n(), l = n(!1);
+    function c({ clientX: e, clientY: d }) {
+      var u, t, p;
+      l.value = !0;
+      const o = (u = i.value) == null ? void 0 : u.getBoundingClientRect();
+      o && ((p = (t = s.value) == null ? void 0 : t.animate) == null || p.call(
+        t,
+        [
+          {
+            transform: `translate(${e - o.left - o.width / 2}px,${d - o.top - o.height / 2}px)`
+          }
+        ],
+        {
+          duration: 300,
+          fill: "forwards"
+        }
+      ));
+    }
+    const g = m(() => `var(--maz-color-${r.color}-alpha)`), C = m(() => `var(--maz-color-${r.color}-alpha-20)`);
+    return _(() => {
+      window.addEventListener("mousemove", c);
+    }), k(() => {
+      window.removeEventListener("mousemove", c);
+    }), (e, d) => (w(), z("div", {
+      class: f(["m-card-spotlight m-reset-css", { "maz-elevation": !e.noElevation }]),
+      style: v({ backgroundColor: C.value, "--inner-opacity": e.innerOpacity })
+    }, [
+      a("div", $, [
+        a("div", {
+          class: f(["content", [{ "maz-p-4": e.padding }, e.contentClass]])
+        }, [
+          B(e.$slots, "default", {}, void 0, !0)
+        ], 2)
+      ]),
+      b(a("div", {
+        ref_key: "blobElement",
+        ref: s,
+        class: "blob",
+        style: v({ backgroundColor: g.value })
+      }, null, 4), [
+        [h, l.value]
+      ]),
+      b(a("div", {
+        ref_key: "fakeblobElement",
+        ref: i,
+        class: "fakeblob"
+      }, null, 512), [
+        [h, l.value]
+      ])
+    ], 6));
+  }
+}), V = /* @__PURE__ */ S(M, [["__scopeId", "data-v-23212ba3"]]);
+export {
+  V as default
+};
+//# sourceMappingURL=MazCardSpotlight.mjs.map

package/dist/components/MazCardSpotlight.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCardSpotlight.mjs","sources":["../../src/components/MazCardSpotlight.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref, type StyleValue } from 'vue'\n\nexport interface MazCardSpotlightProps {\n  /**\n   * The color of the component.\n   * @default primary\n   */\n  color?: Color\n  /**\n   * Remove the elevation of the component\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Add padding to the content\n   * @default true\n   */\n  padding?: boolean\n  /**\n   * The classes to apply to the content div\n   */\n  contentClass?: HTMLAttributes['class']\n  /**\n   * Style apply to the content div\n   */\n  contentStyle?: StyleValue\n  /**\n   * The opacity of the inner div - should be between 0 and 1\n   * When 0 the spotlight is completely visible\n   * When 1 the spotlight is only visible on borders\n   * @default 0.95\n   */\n  innerOpacity?: number\n}\n\nconst props = withDefaults(defineProps<MazCardSpotlightProps>(), {\n  noElevation: false,\n  color: 'primary',\n  padding: true,\n  contentClass: undefined,\n  contentStyle: undefined,\n  innerOpacity: 0.95,\n})\n\nconst blobElement = ref<HTMLDivElement>()\nconst fakeblobElement = ref<HTMLDivElement>()\nconst blobVisible = ref<boolean>(false)\n\nfunction animateBlob({ clientX, clientY }: { clientX: number, clientY: number }) {\n  blobVisible.value = true\n  const rec = fakeblobElement.value?.getBoundingClientRect()\n\n  if (rec) {\n    blobElement.value?.animate?.(\n      [\n        {\n          transform: `translate(${clientX - rec.left - rec.width / 2}px,${\n            clientY - rec.top - rec.height / 2\n          }px)`,\n        },\n      ],\n      {\n        duration: 300,\n        fill: 'forwards',\n      },\n    )\n  }\n}\n\nconst alphaColor = computed(() => `var(--maz-color-${props.color}-alpha)`)\nconst alphaColor20 = computed(() => `var(--maz-color-${props.color}-alpha-20)`)\n\nonMounted(() => {\n  window.addEventListener('mousemove', animateBlob)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('mousemove', animateBlob)\n})\n</script>\n\n<template>\n  <div\n    class=\"m-card-spotlight m-reset-css\"\n    :class=\"{ 'maz-elevation': !noElevation }\"\n    :style=\"{ 'backgroundColor': alphaColor20, '--inner-opacity': innerOpacity }\"\n  >\n    <div class=\"inner\">\n      <div class=\"content\" :class=\"[{ 'maz-p-4': padding }, contentClass]\">\n        <slot />\n      </div>\n    </div>\n    <div\n      v-show=\"blobVisible\"\n      ref=\"blobElement\"\n      class=\"blob\"\n      :style=\"{ backgroundColor: alphaColor }\"\n    />\n    <div v-show=\"blobVisible\" ref=\"fakeblobElement\" class=\"fakeblob\" />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-card-spotlight {\n  @apply maz-relative maz-inline-flex maz-overflow-hidden maz-rounded maz-p-[var(--maz-border-width)];\n\n  .inner {\n    @apply maz-relative maz-h-auto maz-w-full maz-overflow-hidden;\n\n    border-radius: calc(var(--maz-border-radius) - var(--maz-border-width));\n\n    &::before {\n      content: '';\n\n      @apply maz-absolute maz-left-0 maz-top-0 maz-z-1 maz-h-full maz-w-full maz-bg-color;\n\n      opacity: var(--inner-opacity);\n    }\n  }\n\n  .content {\n    @apply maz-relative maz-z-2 maz-h-full maz-w-full;\n  }\n\n  .blob {\n    @apply maz-absolute maz-left-0 maz-top-0 maz-z-[0] maz-h-64 maz-w-64 maz-rounded-full maz-blur-2xl;\n  }\n\n  .fakeblob {\n    display: hidden;\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n\n    @apply maz-h-52 maz-w-52 maz-rounded-full;\n  }\n}\n</style>\n"],"names":["props","__props","blobElement","ref","fakeblobElement","blobVisible","animateBlob","clientX","clientY","rec","_a","_c","_b","alphaColor","computed","alphaColor20","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GASRC,IAAcC,EAAoB,GAClCC,IAAkBD,EAAoB,GACtCE,IAAcF,EAAa,EAAK;AAEtC,aAASG,EAAY,EAAE,SAAAC,GAAS,SAAAC,KAAiD;;AAC/E,MAAAH,EAAY,QAAQ;AACd,YAAAI,KAAMC,IAAAN,EAAgB,UAAhB,gBAAAM,EAAuB;AAEnC,MAAID,OACFE,KAAAC,IAAAV,EAAY,UAAZ,gBAAAU,EAAmB,YAAnB,QAAAD,EAAA;AAAA,QAAAC;AAAA,QACE;AAAA,UACE;AAAA,YACE,WAAW,aAAaL,IAAUE,EAAI,OAAOA,EAAI,QAAQ,CAAC,MACxDD,IAAUC,EAAI,MAAMA,EAAI,SAAS,CACnC;AAAA,UAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UACE,UAAU;AAAA,UACV,MAAM;AAAA,QAAA;AAAA;AAAA,IAGZ;AAGF,UAAMI,IAAaC,EAAS,MAAM,mBAAmBd,EAAM,KAAK,SAAS,GACnEe,IAAeD,EAAS,MAAM,mBAAmBd,EAAM,KAAK,YAAY;AAE9E,WAAAgB,EAAU,MAAM;AACP,aAAA,iBAAiB,aAAaV,CAAW;AAAA,IAAA,CACjD,GAEDW,EAAY,MAAM;AACT,aAAA,oBAAoB,aAAaX,CAAW;AAAA,IAAA,CACpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazCarousel.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCarousel.BQIrqJ8T.css');const e=require("vue"),C=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),S={key:0},B={key:1,class:"m-carousel__header__actions"},b=e.defineComponent({__name:"MazCarousel",props:{noScrollBtn:{type:Boolean},ariaLabelPreviousButton:{default:"Scroll to previous items"},ariaLabelNextButton:{default:"Scroll to next items"},hideScrollbar:{type:Boolean}},setup(i){const u=i,r=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),d=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/chevron-left.BYUi62el.cjs"))),m=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/chevron-right.B0RH9GgM.cjs"))),s=e.useSlots(),n=e.ref(!1),a=e.ref(!1),l=e.ref();function f(){return!u.noScrollBtn||s.title}function c(){return!!s.title}function v(){const t=l.value;t==null||t.scrollTo(t.scrollLeft+t.clientWidth,0)}function p(){const t=l.value;t==null||t.scrollTo(t.scrollLeft-t.clientWidth,0)}function _(t){const o=t.target;if(!o)return;n.value=o.scrollLeft>=20;const h=o.scrollWidth-o.clientWidth;a.value=o.scrollLeft>=h-20}return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-carousel m-reset-css",{"--hide-scrollbar":t.hideScrollbar}])},[f()?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["m-carousel__header",{"--has-title":c()}])},[c()?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(t.$slots,"title",{},void 0,!0)])):e.createCommentVNode("",!0),t.noScrollBtn?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(e.unref(r),{color:"transparent",class:e.normalizeClass(["m-carousel__btn",{"--muted":!n.value}]),"no-elevation":"",fab:"","aria-label":t.ariaLabelPreviousButton,onClick:p},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"previous-icon",{},()=>[e.createVNode(e.unref(d),{class:"maz-text-lg"})],!0)]),_:3},8,["class","aria-label"]),e.createVNode(e.unref(r),{color:"transparent",class:e.normalizeClass(["m-carousel__btn",{"--muted":a.value}]),fab:"","no-elevation":"","aria-label":t.ariaLabelNextButton,onClick:v},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"next-icon",{},()=>[e.createVNode(e.unref(m),{class:"maz-text-lg"})],!0)]),_:3},8,["class","aria-label"])]))],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"MazCarouselItems",ref:l,class:"m-carousel__items",onScroll:_},[e.renderSlot(t.$slots,"default",{},void 0,!0),o[0]||(o[0]=e.createElementVNode("div",{class:"m-carousel__items__spacer"},null,-1))],544)],2))}}),k=C._export_sfc(b,[["__scopeId","data-v-7d01ae12"]]);exports.default=k;
+//# sourceMappingURL=MazCarousel.cjs.map

package/dist/components/MazCarousel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCarousel.cjs","sources":["../../src/components/MazCarousel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { defineAsyncComponent, ref, useSlots } from 'vue'\n\nconst props = withDefaults(defineProps<MazCarouselProps>(), {\n  ariaLabelPreviousButton: 'Scroll to previous items',\n  ariaLabelNextButton: 'Scroll to next items',\n})\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\n\nconst ChevronLeftIcon = defineAsyncComponent(() => import('@icons/chevron-left.svg'))\nconst ChevronRightIcon = defineAsyncComponent(() => import('@icons/chevron-right.svg'))\n\nexport interface MazCarouselProps {\n  /** Do not display the scroll buttons */\n  noScrollBtn?: boolean\n  /** Aria label for the previous button */\n  ariaLabelPreviousButton?: string\n  /** Aria label for the next button */\n  ariaLabelNextButton?: string\n  /** Hide the scrollbar when not active */\n  hideScrollbar?: boolean\n}\n\nconst slots = useSlots()\n\nconst isScrolled = ref(false)\nconst isScrolledMax = ref(false)\nconst MazCarouselItems = ref<HTMLDivElement>()\n\nfunction hasHeader() {\n  return !props.noScrollBtn || slots.title\n}\n\nfunction hasTitle() {\n  return !!slots.title\n}\n\nfunction next() {\n  const items = MazCarouselItems.value\n  items?.scrollTo(items.scrollLeft + items.clientWidth, 0)\n}\n\nfunction previous() {\n  const items = MazCarouselItems.value\n  items?.scrollTo(items.scrollLeft - items.clientWidth, 0)\n}\n\nfunction setScrollState(event: Event) {\n  const target = event.target as Element | undefined\n\n  if (!target)\n    return\n\n  isScrolled.value = target.scrollLeft >= 20\n\n  const itemsScrollWidth = target.scrollWidth - target.clientWidth\n  isScrolledMax.value = target.scrollLeft >= itemsScrollWidth - 20\n}\n</script>\n\n<template>\n  <div\n    class=\"m-carousel m-reset-css\"\n    :class=\"{\n      '--hide-scrollbar': hideScrollbar,\n    }\"\n  >\n    <div v-if=\"hasHeader()\" class=\"m-carousel__header\" :class=\"{ '--has-title': hasTitle() }\">\n      <div v-if=\"hasTitle()\">\n        <slot name=\"title\" />\n      </div>\n      <div v-if=\"!noScrollBtn\" class=\"m-carousel__header__actions\">\n        <MazBtn\n          color=\"transparent\"\n          class=\"m-carousel__btn\"\n          :class=\"{ '--muted': !isScrolled }\"\n          no-elevation\n          fab\n          :aria-label=\"ariaLabelPreviousButton\"\n          @click=\"previous\"\n        >\n          <slot name=\"previous-icon\">\n            <ChevronLeftIcon class=\"maz-text-lg\" />\n          </slot>\n        </MazBtn>\n        <MazBtn\n          color=\"transparent\"\n          class=\"m-carousel__btn\"\n          :class=\"{ '--muted': isScrolledMax }\"\n          fab\n          no-elevation\n          :aria-label=\"ariaLabelNextButton\"\n          @click=\"next\"\n        >\n          <slot name=\"next-icon\">\n            <ChevronRightIcon class=\"maz-text-lg\" />\n          </slot>\n        </MazBtn>\n      </div>\n    </div>\n    <div ref=\"MazCarouselItems\" class=\"m-carousel__items\" @scroll=\"setScrollState\">\n      <!-- Insert your items -->\n      <slot />\n      <div class=\"m-carousel__items__spacer\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-carousel {\n  @apply maz-relative maz-flex maz-flex-col;\n\n  &__header {\n    @apply maz-flex maz-items-center maz-justify-end;\n\n    &.--has-title {\n      @apply maz-justify-between;\n    }\n\n    &__actions {\n      @apply maz-flex maz-flex-1 maz-justify-end maz-space-x-2;\n    }\n  }\n\n  &__items {\n    @apply maz-z-1 maz-flex maz-flex-1 maz-items-center maz-justify-start\n        maz-space-x-5 maz-overflow-y-hidden maz-py-4 maz-pl-3;\n\n    scroll-behavior: smooth;\n\n    &__spacer {\n      flex: 0 0 1px;\n      width: 1px;\n      height: 1px;\n    }\n  }\n\n  &__btn.--muted {\n    @apply maz-text-muted;\n    @apply maz-fill-current;\n  }\n\n  :not(.--hide-scrollbar) .m-carousel__items {\n    @apply maz-overflow-x-auto;\n  }\n\n  &.--hide-scrollbar .m-carousel__items {\n    @apply maz-overflow-x-hidden;\n  }\n\n  &.--hide-scrollbar:hover .m-carousel__items,\n  &.--hide-scrollbar:focus-within .m-carousel__items,\n  &.--hide-scrollbar:active .m-carousel__items,\n  &.--hide-scrollbar:focus .m-carousel__items {\n    @apply maz-overflow-x-auto;\n  }\n}\n</style>\n"],"names":["props","__props","MazBtn","defineAsyncComponent","ChevronLeftIcon","ChevronRightIcon","slots","useSlots","isScrolled","ref","isScrolledMax","MazCarouselItems","hasHeader","hasTitle","next","items","previous","setScrollState","event","target","itemsScrollWidth"],"mappings":"8dAGA,MAAMA,EAAQC,EAKRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAwB,CAAA,CAAC,EAEpEC,EAAkBD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,qCAAyB,CAAA,CAAC,EAC9EE,EAAmBF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,sCAA0B,CAAA,CAAC,EAahFG,EAAQC,EAAAA,SAAS,EAEjBC,EAAaC,MAAI,EAAK,EACtBC,EAAgBD,MAAI,EAAK,EACzBE,EAAmBF,EAAAA,IAAoB,EAE7C,SAASG,GAAY,CACZ,MAAA,CAACZ,EAAM,aAAeM,EAAM,KAAA,CAGrC,SAASO,GAAW,CACX,MAAA,CAAC,CAACP,EAAM,KAAA,CAGjB,SAASQ,GAAO,CACd,MAAMC,EAAQJ,EAAiB,MAC/BI,GAAA,MAAAA,EAAO,SAASA,EAAM,WAAaA,EAAM,YAAa,EAAC,CAGzD,SAASC,GAAW,CAClB,MAAMD,EAAQJ,EAAiB,MAC/BI,GAAA,MAAAA,EAAO,SAASA,EAAM,WAAaA,EAAM,YAAa,EAAC,CAGzD,SAASE,EAAeC,EAAc,CACpC,MAAMC,EAASD,EAAM,OAErB,GAAI,CAACC,EACH,OAESX,EAAA,MAAQW,EAAO,YAAc,GAElC,MAAAC,EAAmBD,EAAO,YAAcA,EAAO,YACvCT,EAAA,MAAQS,EAAO,YAAcC,EAAmB,EAAA"}

package/dist/components/MazCarousel.mjs

@@ -0,0 +1,98 @@
+import { defineComponent as I, defineAsyncComponent as i, useSlots as N, ref as u, openBlock as o, createElementBlock as l, normalizeClass as s, renderSlot as a, createCommentVNode as d, createVNode as r, unref as n, withCtx as h, createElementVNode as b } from "vue";
+import { _ as W } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazCarousel.BQIrqJ8T.css';const x = { key: 0 }, $ = {
+  key: 1,
+  class: "m-carousel__header__actions"
+}, T = /* @__PURE__ */ I({
+  __name: "MazCarousel",
+  props: {
+    noScrollBtn: { type: Boolean },
+    ariaLabelPreviousButton: { default: "Scroll to previous items" },
+    ariaLabelNextButton: { default: "Scroll to next items" },
+    hideScrollbar: { type: Boolean }
+  },
+  setup(S) {
+    const C = S, m = i(() => import("./MazBtn.mjs")), B = i(() => import("../chunks/chevron-left.njfuF_Vt.mjs")), L = i(() => import("../chunks/chevron-right.CEEKGU2c.mjs")), f = N(), p = u(!1), v = u(!1), c = u();
+    function k() {
+      return !C.noScrollBtn || f.title;
+    }
+    function _() {
+      return !!f.title;
+    }
+    function z() {
+      const e = c.value;
+      e == null || e.scrollTo(e.scrollLeft + e.clientWidth, 0);
+    }
+    function y() {
+      const e = c.value;
+      e == null || e.scrollTo(e.scrollLeft - e.clientWidth, 0);
+    }
+    function M(e) {
+      const t = e.target;
+      if (!t)
+        return;
+      p.value = t.scrollLeft >= 20;
+      const g = t.scrollWidth - t.clientWidth;
+      v.value = t.scrollLeft >= g - 20;
+    }
+    return (e, t) => (o(), l("div", {
+      class: s(["m-carousel m-reset-css", {
+        "--hide-scrollbar": e.hideScrollbar
+      }])
+    }, [
+      k() ? (o(), l("div", {
+        key: 0,
+        class: s(["m-carousel__header", { "--has-title": _() }])
+      }, [
+        _() ? (o(), l("div", x, [
+          a(e.$slots, "title", {}, void 0, !0)
+        ])) : d("", !0),
+        e.noScrollBtn ? d("", !0) : (o(), l("div", $, [
+          r(n(m), {
+            color: "transparent",
+            class: s(["m-carousel__btn", { "--muted": !p.value }]),
+            "no-elevation": "",
+            fab: "",
+            "aria-label": e.ariaLabelPreviousButton,
+            onClick: y
+          }, {
+            default: h(() => [
+              a(e.$slots, "previous-icon", {}, () => [
+                r(n(B), { class: "maz-text-lg" })
+              ], !0)
+            ]),
+            _: 3
+          }, 8, ["class", "aria-label"]),
+          r(n(m), {
+            color: "transparent",
+            class: s(["m-carousel__btn", { "--muted": v.value }]),
+            fab: "",
+            "no-elevation": "",
+            "aria-label": e.ariaLabelNextButton,
+            onClick: z
+          }, {
+            default: h(() => [
+              a(e.$slots, "next-icon", {}, () => [
+                r(n(L), { class: "maz-text-lg" })
+              ], !0)
+            ]),
+            _: 3
+          }, 8, ["class", "aria-label"])
+        ]))
+      ], 2)) : d("", !0),
+      b("div", {
+        ref_key: "MazCarouselItems",
+        ref: c,
+        class: "m-carousel__items",
+        onScroll: M
+      }, [
+        a(e.$slots, "default", {}, void 0, !0),
+        t[0] || (t[0] = b("div", { class: "m-carousel__items__spacer" }, null, -1))
+      ], 544)
+    ], 2));
+  }
+}), P = /* @__PURE__ */ W(T, [["__scopeId", "data-v-7d01ae12"]]);
+export {
+  P as default
+};
+//# sourceMappingURL=MazCarousel.mjs.map

package/dist/components/MazCarousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCarousel.mjs","sources":["../../src/components/MazCarousel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { defineAsyncComponent, ref, useSlots } from 'vue'\n\nconst props = withDefaults(defineProps<MazCarouselProps>(), {\n  ariaLabelPreviousButton: 'Scroll to previous items',\n  ariaLabelNextButton: 'Scroll to next items',\n})\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\n\nconst ChevronLeftIcon = defineAsyncComponent(() => import('@icons/chevron-left.svg'))\nconst ChevronRightIcon = defineAsyncComponent(() => import('@icons/chevron-right.svg'))\n\nexport interface MazCarouselProps {\n  /** Do not display the scroll buttons */\n  noScrollBtn?: boolean\n  /** Aria label for the previous button */\n  ariaLabelPreviousButton?: string\n  /** Aria label for the next button */\n  ariaLabelNextButton?: string\n  /** Hide the scrollbar when not active */\n  hideScrollbar?: boolean\n}\n\nconst slots = useSlots()\n\nconst isScrolled = ref(false)\nconst isScrolledMax = ref(false)\nconst MazCarouselItems = ref<HTMLDivElement>()\n\nfunction hasHeader() {\n  return !props.noScrollBtn || slots.title\n}\n\nfunction hasTitle() {\n  return !!slots.title\n}\n\nfunction next() {\n  const items = MazCarouselItems.value\n  items?.scrollTo(items.scrollLeft + items.clientWidth, 0)\n}\n\nfunction previous() {\n  const items = MazCarouselItems.value\n  items?.scrollTo(items.scrollLeft - items.clientWidth, 0)\n}\n\nfunction setScrollState(event: Event) {\n  const target = event.target as Element | undefined\n\n  if (!target)\n    return\n\n  isScrolled.value = target.scrollLeft >= 20\n\n  const itemsScrollWidth = target.scrollWidth - target.clientWidth\n  isScrolledMax.value = target.scrollLeft >= itemsScrollWidth - 20\n}\n</script>\n\n<template>\n  <div\n    class=\"m-carousel m-reset-css\"\n    :class=\"{\n      '--hide-scrollbar': hideScrollbar,\n    }\"\n  >\n    <div v-if=\"hasHeader()\" class=\"m-carousel__header\" :class=\"{ '--has-title': hasTitle() }\">\n      <div v-if=\"hasTitle()\">\n        <slot name=\"title\" />\n      </div>\n      <div v-if=\"!noScrollBtn\" class=\"m-carousel__header__actions\">\n        <MazBtn\n          color=\"transparent\"\n          class=\"m-carousel__btn\"\n          :class=\"{ '--muted': !isScrolled }\"\n          no-elevation\n          fab\n          :aria-label=\"ariaLabelPreviousButton\"\n          @click=\"previous\"\n        >\n          <slot name=\"previous-icon\">\n            <ChevronLeftIcon class=\"maz-text-lg\" />\n          </slot>\n        </MazBtn>\n        <MazBtn\n          color=\"transparent\"\n          class=\"m-carousel__btn\"\n          :class=\"{ '--muted': isScrolledMax }\"\n          fab\n          no-elevation\n          :aria-label=\"ariaLabelNextButton\"\n          @click=\"next\"\n        >\n          <slot name=\"next-icon\">\n            <ChevronRightIcon class=\"maz-text-lg\" />\n          </slot>\n        </MazBtn>\n      </div>\n    </div>\n    <div ref=\"MazCarouselItems\" class=\"m-carousel__items\" @scroll=\"setScrollState\">\n      <!-- Insert your items -->\n      <slot />\n      <div class=\"m-carousel__items__spacer\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-carousel {\n  @apply maz-relative maz-flex maz-flex-col;\n\n  &__header {\n    @apply maz-flex maz-items-center maz-justify-end;\n\n    &.--has-title {\n      @apply maz-justify-between;\n    }\n\n    &__actions {\n      @apply maz-flex maz-flex-1 maz-justify-end maz-space-x-2;\n    }\n  }\n\n  &__items {\n    @apply maz-z-1 maz-flex maz-flex-1 maz-items-center maz-justify-start\n        maz-space-x-5 maz-overflow-y-hidden maz-py-4 maz-pl-3;\n\n    scroll-behavior: smooth;\n\n    &__spacer {\n      flex: 0 0 1px;\n      width: 1px;\n      height: 1px;\n    }\n  }\n\n  &__btn.--muted {\n    @apply maz-text-muted;\n    @apply maz-fill-current;\n  }\n\n  :not(.--hide-scrollbar) .m-carousel__items {\n    @apply maz-overflow-x-auto;\n  }\n\n  &.--hide-scrollbar .m-carousel__items {\n    @apply maz-overflow-x-hidden;\n  }\n\n  &.--hide-scrollbar:hover .m-carousel__items,\n  &.--hide-scrollbar:focus-within .m-carousel__items,\n  &.--hide-scrollbar:active .m-carousel__items,\n  &.--hide-scrollbar:focus .m-carousel__items {\n    @apply maz-overflow-x-auto;\n  }\n}\n</style>\n"],"names":["props","__props","MazBtn","defineAsyncComponent","ChevronLeftIcon","ChevronRightIcon","slots","useSlots","isScrolled","ref","isScrolledMax","MazCarouselItems","hasHeader","hasTitle","next","items","previous","setScrollState","event","target","itemsScrollWidth"],"mappings":";;;;;;;;;;;;;;AAGA,UAAMA,IAAQC,GAKRC,IAASC,EAAqB,MAAM,OAAO,cAAwB,CAAC,GAEpEC,IAAkBD,EAAqB,MAAM,OAAO,qCAAyB,CAAC,GAC9EE,IAAmBF,EAAqB,MAAM,OAAO,sCAA0B,CAAC,GAahFG,IAAQC,EAAS,GAEjBC,IAAaC,EAAI,EAAK,GACtBC,IAAgBD,EAAI,EAAK,GACzBE,IAAmBF,EAAoB;AAE7C,aAASG,IAAY;AACZ,aAAA,CAACZ,EAAM,eAAeM,EAAM;AAAA,IAAA;AAGrC,aAASO,IAAW;AACX,aAAA,CAAC,CAACP,EAAM;AAAA,IAAA;AAGjB,aAASQ,IAAO;AACd,YAAMC,IAAQJ,EAAiB;AAC/B,MAAAI,KAAA,QAAAA,EAAO,SAASA,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAC;AAGzD,aAASC,IAAW;AAClB,YAAMD,IAAQJ,EAAiB;AAC/B,MAAAI,KAAA,QAAAA,EAAO,SAASA,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAC;AAGzD,aAASE,EAAeC,GAAc;AACpC,YAAMC,IAASD,EAAM;AAErB,UAAI,CAACC;AACH;AAES,MAAAX,EAAA,QAAQW,EAAO,cAAc;AAElC,YAAAC,IAAmBD,EAAO,cAAcA,EAAO;AACvC,MAAAT,EAAA,QAAQS,EAAO,cAAcC,IAAmB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazChart.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazChart.vue_vue_type_script_setup_true_lang.ChSNYqys.cjs");exports.default=e._sfc_main;
+//# sourceMappingURL=MazChart.cjs.map

package/dist/components/MazChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazChart.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazChart.mjs

@@ -0,0 +1,5 @@
+import { _ as f } from "../chunks/MazChart.vue_vue_type_script_setup_true_lang.OYo-HXwF.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=MazChart.mjs.map

package/dist/components/MazChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazChart.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MazCheckbox.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCheckbox.BQVJ7EUB.css');const o=require("vue"),V=require("../composables/useInstanceUniqId.cjs"),x=require("../chunks/check._ETzZCli.cjs"),w=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),S=["for","aria-checked"],C=["id","checked","disabled","name"],B={class:"m-checkbox__text"},E=o.defineComponent({inheritAttrs:!1,__name:"MazCheckbox",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},id:{default:void 0},color:{default:"primary"},value:{type:[String,Number,Boolean],default:void 0},name:{default:"m-checkbox"},size:{default:"md"},label:{default:void 0},disabled:{type:Boolean,default:!1},error:{type:Boolean},success:{type:Boolean},warning:{type:Boolean},hint:{}},emits:["update:model-value","change","blur","focus"],setup(f,{emit:p}){const r=f,l=p,c=V.useInstanceUniqId({componentName:"MazCheckbox",providedId:r.id}),s=o.computed(()=>typeof r.value!="boolean"&&Array.isArray(r.modelValue)?r.modelValue.includes(r.value):typeof r.modelValue=="boolean"?r.modelValue:!1),u=o.computed(()=>{switch(r.size){case"xl":return"2rem";case"lg":return"1.75rem";case"sm":return"1.25rem";case"xs":return"1rem";case"mini":return"0.75rem";default:return"1.5rem"}}),h=o.computed(()=>{switch(r.size){case"xl":return"maz-text-2xl";case"lg":return"maz-text-xl";case"sm":return"maz-text-base";case"xs":return"maz-text-sm";case"mini":return"maz-text-xs";default:return"maz-text-lg"}}),b=o.computed(()=>r.color==="theme"?"var(--maz-color-bg)":`var(--maz-color-${r.color}-contrast)`),v=o.computed(()=>r.color==="theme"?"var(--maz-color-bg-theme)":`var(--maz-color-${r.color})`),d=o.computed(()=>r.error?"var(--maz-color-danger)":r.warning?"var(--maz-color-warning)":r.success?"var(--maz-color-success)":["black","transparent","theme"].includes(r.color)?"var(--maz-color-muted)":`var(--maz-color-${r.color}-alpha)`);function y(e){["Space"].includes(e.code)&&(e.preventDefault(),i(r.value??!r.modelValue))}function k(e){return typeof e=="boolean"&&(typeof r.modelValue=="boolean"||r.modelValue===void 0||r.modelValue===null)?!r.modelValue:Array.isArray(r.modelValue)&&typeof e!="boolean"?r.modelValue.includes(e)?r.modelValue.filter(a=>a!==e):[...r.modelValue,e]:[e]}function i(e){const a=k(e);l("update:model-value",a),l("change",a)}const t=o.ref();function z(e){var a;(a=t.value)==null||a.dispatchEvent(new Event("blur")),l("blur",e)}function g(e){var a;(a=t.value)==null||a.dispatchEvent(new Event("focus")),l("focus",e)}return(e,a)=>(o.openBlock(),o.createElementBlock("label",{for:o.unref(c),class:o.normalizeClass(["m-checkbox m-reset-css",[{"--disabled":e.disabled,"--error":e.error,"--warning":e.warning,"--success":e.success},r.class]]),tabindex:"0",style:o.normalizeStyle([e.style,{"--checkbox-selected-color":v.value,"--checkbox-box-shadow-color":d.value}]),role:"checkbox","aria-checked":s.value,onKeydown:y,onBlur:z,onFocus:g},[o.createElementVNode("input",o.mergeProps({id:o.unref(c),ref_key:"inputRef",ref:t,checked:s.value},e.$attrs,{tabindex:"-1",disabled:e.disabled,name:e.name,type:"checkbox",onChange:a[0]||(a[0]=n=>{var m;return i(e.value??((m=n==null?void 0:n.target)==null?void 0:m.checked))})}),null,16,C),o.createElementVNode("span",{style:o.normalizeStyle({width:u.value,height:u.value})},[o.createVNode(o.unref(x.default),{class:o.normalizeClass(["check-icon",h.value]),style:o.normalizeStyle({color:b.value})},null,8,["class","style"])],4),o.createElementVNode("div",B,[o.renderSlot(e.$slots,"default",{value:e.value},()=>[o.createTextVNode(o.toDisplayString(e.label),1)],!0),e.hint?(o.openBlock(),o.createElementBlock("span",{key:0,class:o.normalizeClass(["m-checkbox__hint",{"--error":e.error,"--success":e.success,"--warning":e.warning}]),style:o.normalizeStyle({boxShadow:`0 0 0 0.125rem ${d.value}`})},o.toDisplayString(e.hint),7)):o.createCommentVNode("",!0)])],46,S))}}),I=w._export_sfc(E,[["__scopeId","data-v-7574d36c"]]);exports.default=I;
+//# sourceMappingURL=MazCheckbox.cjs.map

package/dist/components/MazCheckbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCheckbox.cjs","sources":["../../src/components/MazCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends boolean | (string | number)[]\">\nimport type { Color, Size } from '@components/types'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport CheckIcon from '@icons/check.svg'\nimport { computed, type HTMLAttributes, ref } from 'vue'\n\nexport type CheckboxValue = string | number | boolean\n\nexport interface MazCheckboxProps<T = boolean | (string | number)[]> {\n  /** Style attribut of the component root element */\n  style?: HTMLAttributes['style']\n  /** Class attribut of the component root element */\n  class?: HTMLAttributes['class']\n  /** The model value of the checkbox */\n  modelValue?: T\n  /** The id of the checkbox */\n  id?: string\n  /** The color of the checkbox */\n  color?: Color\n  /** The value of the checkbox when selected */\n  value?: CheckboxValue\n  /** The name of the checkbox */\n  name?: string\n  /** The size of the checkbox */\n  size?: Size\n  /** Text label */\n  label?: string\n  /** If the checkbox is disabled */\n  disabled?: boolean\n  /** Whether there is an error with the input. */\n  error?: boolean\n  /** Whether the input is successful. */\n  success?: boolean\n  /** Whether there is a warning with the input. */\n  warning?: boolean\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<MazCheckboxProps<T>>(),\n  {\n    style: undefined,\n    class: undefined,\n    modelValue: undefined,\n    label: undefined,\n    id: undefined,\n    color: 'primary',\n    value: undefined,\n    name: 'm-checkbox',\n    size: 'md',\n    disabled: false,\n  },\n)\n\nconst emits = defineEmits<{\n  /**\n   * Emitted when the model value change\n   * @property value The new value\n   */\n  'update:model-value': [value: T]\n  /**\n   * Emitted when the model value change\n   * @property value The new value\n   */\n  'change': [value: T]\n  /**\n   * Emitted when the checkbox lost focus\n   * @property {FocusEvent} value - The focus event\n   */\n  'blur': [value: FocusEvent]\n  /**\n   * Emitted when the checkbox is focused\n   * @property {FocusEvent} value - The focus event\n   */\n  'focus': [value: FocusEvent]\n}>()\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazCheckbox',\n  providedId: props.id,\n})\n\nconst isChecked = computed(() =>\n  typeof props.value !== 'boolean' && Array.isArray(props.modelValue)\n    ? props.modelValue.includes(props.value as never)\n    : typeof props.modelValue === 'boolean'\n      ? props.modelValue\n      : false,\n)\n\nconst checkboxSize = computed(() => {\n  switch (props.size) {\n    case 'xl': {\n      return '2rem'\n    }\n    case 'lg': {\n      return '1.75rem'\n    }\n    case 'sm': {\n      return '1.25rem'\n    }\n    case 'xs': {\n      return '1rem'\n    }\n    case 'mini': {\n      return '0.75rem'\n    }\n\n    default: {\n      return '1.5rem'\n    }\n  }\n})\n\nconst checkIconSize = computed(() => {\n  switch (props.size) {\n    case 'xl': {\n      return 'maz-text-2xl'\n    }\n    case 'lg': {\n      return 'maz-text-xl'\n    }\n    case 'sm': {\n      return 'maz-text-base'\n    }\n    case 'xs': {\n      return 'maz-text-sm'\n    }\n    case 'mini': {\n      return 'maz-text-xs'\n    }\n    default: {\n      return 'maz-text-lg'\n    }\n  }\n})\n\nconst checkIconColor = computed(() => {\n  if (props.color === 'theme') {\n    return 'var(--maz-color-bg)'\n  }\n\n  return `var(--maz-color-${props.color}-contrast)`\n})\nconst checkboxSelectedColor = computed(() => {\n  if (props.color === 'theme') {\n    return 'var(--maz-color-bg-theme)'\n  }\n\n  return `var(--maz-color-${props.color})`\n})\nconst checkboxBoxShadow = computed(() => {\n  if (props.error) {\n    return `var(--maz-color-danger)`\n  }\n  else if (props.warning) {\n    return `var(--maz-color-warning)`\n  }\n  else if (props.success) {\n    return `var(--maz-color-success)`\n  }\n\n  return ['black', 'transparent', 'theme'].includes(props.color)\n    ? `var(--maz-color-muted)`\n    : `var(--maz-color-${props.color}-alpha)`\n})\n\nfunction keyboardHandler(event: KeyboardEvent) {\n  if (['Space'].includes(event.code)) {\n    event.preventDefault()\n    emitValue(props.value ?? !props.modelValue)\n  }\n}\n\nfunction getNewValue(value: boolean | string | number) {\n  if (\n    typeof value === 'boolean'\n    && (typeof props.modelValue === 'boolean'\n      || props.modelValue === undefined\n      || props.modelValue === null)\n  ) {\n    return !props.modelValue\n  }\n  else if (Array.isArray(props.modelValue) && typeof value !== 'boolean') {\n    return props.modelValue.includes(value)\n      ? props.modelValue.filter(v => v !== value)\n      : [...props.modelValue, value]\n  }\n  else {\n    return [value]\n  }\n}\n\nfunction emitValue(value: boolean | string | number) {\n  const newValue = getNewValue(value)\n\n  emits('update:model-value', newValue as T)\n  emits('change', newValue as T)\n}\n\nconst inputRef = ref<HTMLInputElement>()\n\nfunction onBlur(event: FocusEvent) {\n  inputRef.value?.dispatchEvent(new Event('blur'))\n  emits('blur', event)\n}\nfunction onFocus(event: FocusEvent) {\n  inputRef.value?.dispatchEvent(new Event('focus'))\n  emits('focus', event)\n}\n</script>\n\n<template>\n  <label\n    :for=\"instanceId\"\n    class=\"m-checkbox m-reset-css\"\n    :class=\"[{ '--disabled': disabled, '--error': error, '--warning': warning, '--success': success }, props.class]\"\n    tabindex=\"0\"\n    :style=\"[style, { '--checkbox-selected-color': checkboxSelectedColor, '--checkbox-box-shadow-color': checkboxBoxShadow }]\"\n    role=\"checkbox\"\n    :aria-checked=\"isChecked\"\n    @keydown=\"keyboardHandler\"\n    @blur=\"onBlur\"\n    @focus=\"onFocus\"\n  >\n    <input\n      :id=\"instanceId\"\n      ref=\"inputRef\"\n      :checked=\"isChecked\"\n      v-bind=\"$attrs\"\n      tabindex=\"-1\"\n      :disabled\n      :name\n      type=\"checkbox\"\n      @change=\"emitValue(value ?? ($event?.target as HTMLInputElement)?.checked)\"\n    >\n    <span :style=\"{ width: checkboxSize, height: checkboxSize }\">\n      <CheckIcon class=\"check-icon\" :class=\"checkIconSize\" :style=\"{ color: checkIconColor }\" />\n    </span>\n    <div class=\"m-checkbox__text\">\n      <slot :value>\n        {{ label }}\n      </slot>\n\n      <span\n        v-if=\"hint\"\n        class=\"m-checkbox__hint\" :class=\"{\n          '--error': error,\n          '--success': success,\n          '--warning': warning,\n        }\"\n        :style=\"{ boxShadow: `0 0 0 0.125rem ${checkboxBoxShadow}` }\"\n      >{{ hint }}</span>\n    </div>\n  </label>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-checkbox {\n  @apply maz-relative maz-inline-flex maz-items-center maz-gap-2 maz-align-top maz-outline-none;\n\n  .check-icon {\n    @apply maz-scale-0 maz-transition-transform maz-duration-300 maz-ease-in-out;\n\n    :deep(path) {\n      stroke-width: 2.5;\n    }\n  }\n\n  > span {\n    @apply maz-relative maz-flex maz-rounded-md maz-border maz-border-border maz-transition-all maz-duration-300 maz-ease-in-out maz-flex-center dark:maz-border-color-lighter;\n  }\n\n  input {\n    @apply maz-hidden;\n\n    &:not(:checked) ~ span {\n      @apply maz-bg-color dark:maz-bg-color-light;\n    }\n\n    &:checked ~ span {\n      border-color: var(--checkbox-selected-color);\n      background-color: var(--checkbox-selected-color);\n\n      .check-icon {\n        @apply maz-scale-100;\n      }\n    }\n\n    &:disabled ~ span {\n      @apply maz-bg-color-light dark:maz-bg-color-lighter;\n    }\n  }\n\n  &.--disabled {\n    @apply maz-cursor-not-allowed maz-text-muted;\n\n    input:checked ~ span {\n      @apply maz-border-border dark:maz-border-color-lighter;\n\n      .check-icon {\n        @apply maz-text-muted;\n      }\n    }\n  }\n\n  &:not(.--disabled) {\n    @apply maz-cursor-pointer;\n\n    &:hover > span,\n    &:focus > span {\n      @apply maz-transition-all maz-duration-300 maz-ease-in-out;\n\n      box-shadow: 0 0 0 0.125rem var(--checkbox-box-shadow-color);\n    }\n  }\n\n  &__text {\n    @apply maz-flex maz-flex-col maz-gap-0;\n  }\n\n  &__hint {\n    @apply maz-text-sm maz-text-muted;\n\n    &.--error {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n  }\n\n  &.--error,\n  &.--warning,\n  &.--success {\n    > span {\n      @apply maz-transition-all maz-duration-300 maz-ease-in-out;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","instanceId","useInstanceUniqId","isChecked","computed","checkboxSize","checkIconSize","checkIconColor","checkboxSelectedColor","checkboxBoxShadow","keyboardHandler","event","emitValue","getNewValue","value","v","newValue","inputRef","ref","onBlur","_a","onFocus"],"mappings":"k2BA2CA,MAAMA,EAAQC,EAgBRC,EAAQC,EAuBRC,EAAaC,EAAAA,kBAAkB,CACnC,cAAe,cACf,WAAYL,EAAM,EAAA,CACnB,EAEKM,EAAYC,EAAA,SAAS,IACzB,OAAOP,EAAM,OAAU,WAAa,MAAM,QAAQA,EAAM,UAAU,EAC9DA,EAAM,WAAW,SAASA,EAAM,KAAc,EAC9C,OAAOA,EAAM,YAAe,UAC1BA,EAAM,WACN,EACR,EAEMQ,EAAeD,EAAAA,SAAS,IAAM,CAClC,OAAQP,EAAM,KAAM,CAClB,IAAK,KACI,MAAA,OAET,IAAK,KACI,MAAA,UAET,IAAK,KACI,MAAA,UAET,IAAK,KACI,MAAA,OAET,IAAK,OACI,MAAA,UAGT,QACS,MAAA,QACT,CACF,CACD,EAEKS,EAAgBF,EAAAA,SAAS,IAAM,CACnC,OAAQP,EAAM,KAAM,CAClB,IAAK,KACI,MAAA,eAET,IAAK,KACI,MAAA,cAET,IAAK,KACI,MAAA,gBAET,IAAK,KACI,MAAA,cAET,IAAK,OACI,MAAA,cAET,QACS,MAAA,aACT,CACF,CACD,EAEKU,EAAiBH,EAAAA,SAAS,IAC1BP,EAAM,QAAU,QACX,sBAGF,mBAAmBA,EAAM,KAAK,YACtC,EACKW,EAAwBJ,EAAAA,SAAS,IACjCP,EAAM,QAAU,QACX,4BAGF,mBAAmBA,EAAM,KAAK,GACtC,EACKY,EAAoBL,EAAAA,SAAS,IAC7BP,EAAM,MACD,0BAEAA,EAAM,QACN,2BAEAA,EAAM,QACN,2BAGF,CAAC,QAAS,cAAe,OAAO,EAAE,SAASA,EAAM,KAAK,EACzD,yBACA,mBAAmBA,EAAM,KAAK,SACnC,EAED,SAASa,EAAgBC,EAAsB,CACzC,CAAC,OAAO,EAAE,SAASA,EAAM,IAAI,IAC/BA,EAAM,eAAe,EACrBC,EAAUf,EAAM,OAAS,CAACA,EAAM,UAAU,EAC5C,CAGF,SAASgB,EAAYC,EAAkC,CACrD,OACE,OAAOA,GAAU,YACb,OAAOjB,EAAM,YAAe,WAC3BA,EAAM,aAAe,QACrBA,EAAM,aAAe,MAEnB,CAACA,EAAM,WAEP,MAAM,QAAQA,EAAM,UAAU,GAAK,OAAOiB,GAAU,UACpDjB,EAAM,WAAW,SAASiB,CAAK,EAClCjB,EAAM,WAAW,OAAYkB,GAAAA,IAAMD,CAAK,EACxC,CAAC,GAAGjB,EAAM,WAAYiB,CAAK,EAGxB,CAACA,CAAK,CACf,CAGF,SAASF,EAAUE,EAAkC,CAC7C,MAAAE,EAAWH,EAAYC,CAAK,EAElCf,EAAM,qBAAsBiB,CAAa,EACzCjB,EAAM,SAAUiB,CAAa,CAAA,CAG/B,MAAMC,EAAWC,EAAAA,IAAsB,EAEvC,SAASC,EAAOR,EAAmB,QACjCS,EAAAH,EAAS,QAAT,MAAAG,EAAgB,cAAc,IAAI,MAAM,MAAM,GAC9CrB,EAAM,OAAQY,CAAK,CAAA,CAErB,SAASU,EAAQV,EAAmB,QAClCS,EAAAH,EAAS,QAAT,MAAAG,EAAgB,cAAc,IAAI,MAAM,OAAO,GAC/CrB,EAAM,QAASY,CAAK,CAAA"}