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

package/dist/components/MazBtn.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazBtn.cjs","sources":["../../src/components/MazBtn.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Icon, Size } from '@components/types'\n\nimport { computed, defineAsyncComponent, useAttrs } from 'vue'\n\nconst props = withDefaults(defineProps<MazBtnProps>(), {\n  variant: 'button',\n  size: 'md',\n  color: 'primary',\n  type: 'button',\n  icon: undefined,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: 'lg',\n  justify: 'center',\n})\n\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nconst { href, to } = useAttrs()\n\nexport interface MazBtnProps {\n  /**\n   * The variant of the button - Change UI of component (link or button style)\n   * @values `'button' | 'link'`\n   * @deprecated Use the component <MazLink /> instead\n   */\n  variant?: 'button' | 'link'\n  /**\n   * The size of the button\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  size?: Size\n  /**\n   * The color of the button\n   * @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`\n   */\n  color?: Color\n  /**\n   * The type of the button\n   * @values `'submit' | 'reset' | 'button'`\n   */\n  type?: 'submit' | 'reset' | 'button'\n  /**\n   * If true, the button will have a full border radius\n   * @default false\n   */\n  rounded?: boolean\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If true, the button will have no border radius\n   * @default false\n   */\n  noRounded?: boolean\n  /**\n   * If true, the button have the \"border\" style\n   * @default false\n   */\n  outline?: boolean\n  /**\n   * If true, the button will have a pastel color\n   * @default false\n   */\n  pastel?: boolean\n  /**\n   * If true, the button will have a full width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * If true, the button will have no underline on hover (useful with `variant=\"link\"`)\n   * @default false\n   */\n  noUnderline?: boolean\n  /**\n   * Enable the button loader\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Disable the button\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If true, the button will have a fab style\n   * @default false\n   */\n  fab?: boolean\n  /**\n   * The name of the icon to display or component, only with fab\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  icon?: string | Icon\n  /**\n   * The name of the icon or component to display on the left of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * If true, the button will have no padding\n   * @default false\n   */\n  noPadding?: boolean\n  /**\n   * If true, the button will have no box-shadow\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Choose how the elements are aligned in the button\n   */\n  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n\nconst component = computed(() => {\n  if (href)\n    return 'a'\n  else if (to)\n    return 'router-link'\n  return 'button'\n})\n\nconst btnColorClass = computed(() => {\n  if (props.pastel)\n    return `--${props.color}-pastel`\n  if (props.outline)\n    return `--${props.color}-outline`\n  return `--${props.color}`\n})\nconst isDisabled = computed(\n  () => (props.loading || props.disabled) && component.value === 'button',\n)\nconst cursorClass = computed(() => (isDisabled.value ? '--cursor-default' : '--cursor-pointer'))\nconst variantClass = computed(() => `--is-${props.variant}`)\nconst hasLoader = computed(() => props.loading && props.variant === 'button')\nconst btnType = computed(() => (component.value === 'button' ? props.type : undefined))\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-3xl'\n  if (props.size === 'lg')\n    return 'maz-text-2xl'\n  if (props.size === 'md')\n    return 'maz-text-xl'\n  if (props.size === 'sm')\n    return 'maz-text-lg'\n  if (props.size === 'xs')\n    return 'maz-text-base'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-xl'\n})\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :disabled=\"isDisabled || undefined\"\n    class=\"m-btn m-reset-css\"\n    :class=\"[\n      `--${size}`,\n      ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],\n      btnColorClass,\n      cursorClass,\n      variantClass,\n      {\n        '--block': block,\n        '--no-underline': noUnderline,\n        '--fab': fab,\n        '--loading': loading,\n        '--disabled': isDisabled,\n        '--rounded': rounded,\n        '--no-rounded': noRounded,\n        '--no-padding': noPadding,\n        '--no-elevation': noElevation,\n      },\n    ]\"\n    :style=\"[`--justify: ${justify}`]\"\n    :type=\"btnType\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot icon - The icon to display on the fab button\n    -->\n    <slot name=\"icon\">\n      <MazIcon v-if=\"typeof icon === 'string'\" :name=\"icon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"icon\" v-else-if=\"icon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot default - The content of the button\n    -->\n    <slot />\n\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <div v-if=\"hasLoader\" class=\"m-btn-loader-container\">\n      <MazSpinner size=\"2em\" :color=\"color\" />\n    </div>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-btn {\n  @apply maz-relative maz-items-center maz-gap-2 maz-border maz-border-solid maz-border-transparent maz-text-center maz-align-top maz-text-base maz-text-normal;\n\n  justify-content: var(--justify);\n\n  & span {\n    @apply maz-leading-none;\n  }\n\n  &-loader-container {\n    @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center maz-bg-color-light dark:maz-bg-color-lighter;\n  }\n\n  /* &-loader {\n    @apply maz-absolute;\n  } */\n\n  &.--cursor-pointer {\n    @apply maz-cursor-pointer;\n  }\n\n  &.--cursor-default {\n    @apply maz-cursor-default;\n  }\n\n  &.--is-link {\n    @apply maz-inline-flex maz-items-center\n        maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n      &:not(.--no-underline) {\n        @apply maz-underline;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-text-secondary;\n    }\n\n    &.--info {\n      @apply maz-text-info;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n\n    &.--danger {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--white {\n      @apply maz-text-white;\n    }\n\n    &.--black {\n      @apply maz-text-black;\n    }\n\n    &.--theme {\n      @apply maz-text-normal;\n    }\n  }\n\n  &.--is-button {\n    @apply maz-inline-flex maz-items-center maz-overflow-hidden\n        maz-border-transparent maz-bg-transparent maz-no-underline\n        maz-transition-all maz-duration-200 maz-ease-in-out maz-py-0.5;\n\n    &:not(.--no-rounded, .--rounded-none) {\n      @apply maz-rounded;\n\n      &.--rounded {\n        @apply maz-rounded-full;\n\n        &-sm {\n          @apply maz-rounded-sm;\n        }\n\n        &-md {\n          @apply maz-rounded-md;\n        }\n\n        &-lg {\n          @apply maz-rounded;\n        }\n\n        &-xl {\n          @apply maz-rounded-xl;\n        }\n\n        &-full {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    /* Sizes */\n    &.--xl {\n      @apply maz-min-h-16 maz-px-8 maz-text-xl;\n    }\n\n    &.--lg {\n      @apply maz-min-h-14 maz-px-6;\n    }\n\n    &.--md {\n      @apply maz-min-h-12 maz-px-4;\n    }\n\n    &.--sm {\n      @apply maz-min-h-10 maz-px-3;\n    }\n\n    &.--xs {\n      @apply maz-min-h-8 maz-px-2 maz-text-sm;\n    }\n\n    &.--mini {\n      @apply maz-min-h-6 maz-px-1 maz-text-xs;\n    }\n\n    /* Not disabled */\n\n    &:not(.--disabled) {\n      &:hover {\n        @apply maz-bg-border;\n      }\n    }\n\n    /* Fab */\n\n    &.--fab {\n      @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-px-1 maz-py-1;\n\n      &:not(.--no-elevation) {\n        @apply maz-elevation;\n      }\n\n      &.--xl {\n        @apply maz-w-16;\n      }\n\n      &.--lg {\n        @apply maz-w-14;\n      }\n\n      &.--md {\n        @apply maz-w-12;\n      }\n\n      &.--sm {\n        @apply maz-w-10;\n      }\n\n      &.--xs {\n        @apply maz-w-8;\n      }\n\n      &.--mini {\n        @apply maz-w-6;\n      }\n    }\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--primary {\n      @apply maz-bg-primary maz-text-primary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary-700;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-bg-secondary maz-text-secondary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary-700;\n      }\n    }\n\n    &.--info {\n      @apply maz-bg-info maz-text-info-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info-700;\n      }\n    }\n\n    &.--success {\n      @apply maz-bg-success maz-text-success-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success-700;\n      }\n    }\n\n    &.--warning {\n      @apply maz-bg-warning maz-text-warning-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning-700;\n      }\n    }\n\n    &.--danger {\n      @apply maz-bg-danger maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger-700;\n      }\n    }\n\n    &.--white {\n      @apply maz-bg-white maz-text-white-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-400;\n      }\n    }\n\n    &.--black {\n      @apply maz-bg-black maz-text-black-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-800;\n      }\n    }\n\n    &.--transparent {\n      @apply maz-bg-transparent;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-[#000]/[0.08] dark:maz-bg-[#FFF]/[0.08];\n      }\n    }\n\n    &.--theme {\n      @apply maz-bg-theme maz-text-color;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-theme-hover;\n      }\n    }\n\n    /* OUTLINE */\n\n    &.--primary-outline {\n      @apply maz-bg-primary-alpha-05 maz-text-primary maz-border-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-outline {\n      @apply maz-border-secondary maz-bg-secondary-alpha-05 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-white;\n      }\n    }\n\n    &.--info-outline {\n      @apply maz-border-info maz-bg-info-alpha-05 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-white;\n      }\n    }\n\n    &.--success-outline {\n      @apply maz-border-success maz-bg-success-alpha-05 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-white;\n      }\n    }\n\n    &.--danger-outline {\n      @apply maz-border-danger maz-bg-danger-alpha-05 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-white;\n      }\n    }\n\n    &.--warning-outline {\n      @apply maz-border-warning maz-bg-warning-alpha-05 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-white;\n      }\n    }\n\n    &.--white-outline {\n      @apply maz-border-white maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-outline {\n      @apply maz-border-black maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-outline {\n      @apply maz-border-border maz-text-theme dark:maz-border-color-lighter;\n\n      &:not(:disabled):hover {\n        @apply maz-border-theme maz-bg-theme maz-text-color;\n      }\n    }\n\n    /* PASTEL */\n\n    &.--primary-pastel {\n      @apply maz-bg-primary-50 maz-text-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-pastel {\n      @apply maz-bg-secondary-50 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-secondary-contrast;\n      }\n    }\n\n    &.--info-pastel {\n      @apply maz-bg-info-50 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-info-contrast;\n      }\n    }\n\n    &.--success-pastel {\n      @apply maz-bg-success-50 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-success-contrast;\n      }\n    }\n\n    &.--danger-pastel {\n      @apply maz-bg-danger-50 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-danger-contrast;\n      }\n    }\n\n    &.--warning-pastel {\n      @apply maz-bg-warning-50 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-warning-contrast;\n      }\n    }\n\n    &.--white-pastel {\n      @apply maz-bg-gray-100 maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    /* DISABLED */\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-light dark:maz-bg-color-lighter maz-text-gray-400 maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--loading {\n      @apply maz-cursor-wait;\n    }\n\n    &.--no-padding {\n      @apply maz-p-0;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazIcon","defineAsyncComponent","MazSpinner","href","to","useAttrs","component","computed","btnColorClass","isDisabled","cursorClass","variantClass","hasLoader","btnType","iconClassSize"],"mappings":"+1BAKA,MAAMA,EAAQC,EAYRC,EAAUC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,eAAyB,CAAA,CAAC,EACtEC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAE5E,CAAE,KAAAE,EAAM,GAAAC,CAAG,EAAIC,WAAS,EA0GxBC,EAAYC,EAAAA,SAAS,IACrBJ,EACK,IACAC,EACA,cACF,QACR,EAEKI,EAAgBD,EAAAA,SAAS,IACzBT,EAAM,OACD,KAAKA,EAAM,KAAK,UACrBA,EAAM,QACD,KAAKA,EAAM,KAAK,WAClB,KAAKA,EAAM,KAAK,EACxB,EACKW,EAAaF,EAAA,SACjB,KAAOT,EAAM,SAAWA,EAAM,WAAaQ,EAAU,QAAU,QACjE,EACMI,EAAcH,EAAAA,SAAS,IAAOE,EAAW,MAAQ,mBAAqB,kBAAmB,EACzFE,EAAeJ,EAAAA,SAAS,IAAM,QAAQT,EAAM,OAAO,EAAE,EACrDc,EAAYL,EAAAA,SAAS,IAAMT,EAAM,SAAWA,EAAM,UAAY,QAAQ,EACtEe,EAAUN,WAAS,IAAOD,EAAU,QAAU,SAAWR,EAAM,KAAO,MAAU,EAEhFgB,EAAgBP,EAAAA,SAAS,IACzBT,EAAM,OAAS,KACV,eACLA,EAAM,OAAS,KACV,eACLA,EAAM,OAAS,KACV,cACLA,EAAM,OAAS,KACV,cACLA,EAAM,OAAS,KACV,gBACLA,EAAM,OAAS,OACV,cACF,aACR"}
+{"version":3,"file":"MazBtn.cjs","sources":["../../src/components/MazBtn.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Icon, Size } from './types'\n\nimport { computed, defineAsyncComponent, useAttrs } from 'vue'\n\nconst props = withDefaults(defineProps<MazBtnProps>(), {\n  variant: 'button',\n  size: 'md',\n  color: 'primary',\n  type: 'button',\n  icon: undefined,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: 'lg',\n  justify: 'center',\n})\n\nconst MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))\nconst MazSpinner = defineAsyncComponent(() => import('./MazSpinner.vue'))\n\nconst { href, to } = useAttrs()\n\nexport interface MazBtnProps {\n  /**\n   * The variant of the button - Change UI of component (link or button style)\n   * @values `'button' | 'link'`\n   * @deprecated Use the component <MazLink /> instead\n   */\n  variant?: 'button' | 'link'\n  /**\n   * The size of the button\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  size?: Size\n  /**\n   * The color of the button\n   * @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`\n   */\n  color?: Color\n  /**\n   * The type of the button\n   * @values `'submit' | 'reset' | 'button'`\n   */\n  type?: 'submit' | 'reset' | 'button'\n  /**\n   * If true, the button will have a full border radius\n   * @default false\n   */\n  rounded?: boolean\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If true, the button will have no border radius\n   * @default false\n   */\n  noRounded?: boolean\n  /**\n   * If true, the button have the \"border\" style\n   * @default false\n   */\n  outline?: boolean\n  /**\n   * If true, the button will have a pastel color\n   * @default false\n   */\n  pastel?: boolean\n  /**\n   * If true, the button will have a full width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * If true, the button will have no underline on hover (useful with `variant=\"link\"`)\n   * @default false\n   */\n  noUnderline?: boolean\n  /**\n   * Enable the button loader\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Disable the button\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If true, the button will have a fab style\n   * @default false\n   */\n  fab?: boolean\n  /**\n   * The name of the icon to display or component, only with fab\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  icon?: string | Icon\n  /**\n   * The name of the icon or component to display on the left of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * If true, the button will have no padding\n   * @default false\n   */\n  noPadding?: boolean\n  /**\n   * If true, the button will have no box-shadow\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Choose how the elements are aligned in the button\n   */\n  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n\nconst component = computed(() => {\n  if (href)\n    return 'a'\n  else if (to)\n    return 'router-link'\n  return 'button'\n})\n\nconst btnColorClass = computed(() => {\n  if (props.pastel)\n    return `--${props.color}-pastel`\n  if (props.outline)\n    return `--${props.color}-outline`\n  return `--${props.color}`\n})\nconst isDisabled = computed(\n  () => (props.loading || props.disabled) && component.value === 'button',\n)\nconst cursorClass = computed(() => (isDisabled.value ? '--cursor-default' : '--cursor-pointer'))\nconst variantClass = computed(() => `--is-${props.variant}`)\nconst hasLoader = computed(() => props.loading && props.variant === 'button')\nconst btnType = computed(() => (component.value === 'button' ? props.type : undefined))\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-3xl'\n  if (props.size === 'lg')\n    return 'maz-text-2xl'\n  if (props.size === 'md')\n    return 'maz-text-xl'\n  if (props.size === 'sm')\n    return 'maz-text-lg'\n  if (props.size === 'xs')\n    return 'maz-text-base'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-xl'\n})\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :disabled=\"isDisabled || undefined\"\n    class=\"m-btn m-reset-css\"\n    :class=\"[\n      `--${size}`,\n      ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],\n      btnColorClass,\n      cursorClass,\n      variantClass,\n      {\n        '--block': block,\n        '--no-underline': noUnderline,\n        '--fab': fab,\n        '--loading': loading,\n        '--disabled': isDisabled,\n        '--rounded': rounded,\n        '--no-rounded': noRounded,\n        '--no-padding': noPadding,\n        '--no-elevation': noElevation,\n      },\n    ]\"\n    :style=\"[`--justify: ${justify}`]\"\n    :type=\"btnType\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot icon - The icon to display on the fab button\n    -->\n    <slot name=\"icon\">\n      <MazIcon v-if=\"typeof icon === 'string'\" :name=\"icon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"icon\" v-else-if=\"icon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot default - The content of the button\n    -->\n    <slot />\n\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <div v-if=\"hasLoader\" class=\"m-btn-loader-container\">\n      <MazSpinner size=\"2em\" :color=\"color\" />\n    </div>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-btn {\n  @apply maz-relative maz-items-center maz-gap-2 maz-border maz-border-solid maz-border-transparent maz-text-center maz-align-top maz-text-base maz-text-normal;\n\n  justify-content: var(--justify);\n\n  & span {\n    @apply maz-leading-none;\n  }\n\n  &-loader-container {\n    @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center maz-bg-color-light dark:maz-bg-color-lighter;\n  }\n\n  /* &-loader {\n    @apply maz-absolute;\n  } */\n\n  &.--cursor-pointer {\n    @apply maz-cursor-pointer;\n  }\n\n  &.--cursor-default {\n    @apply maz-cursor-default;\n  }\n\n  &.--is-link {\n    @apply maz-inline-flex maz-items-center\n        maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n      &:not(.--no-underline) {\n        @apply maz-underline;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-text-secondary;\n    }\n\n    &.--info {\n      @apply maz-text-info;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n\n    &.--danger {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--white {\n      @apply maz-text-white;\n    }\n\n    &.--black {\n      @apply maz-text-black;\n    }\n\n    &.--theme {\n      @apply maz-text-normal;\n    }\n  }\n\n  &.--is-button {\n    @apply maz-inline-flex maz-items-center maz-overflow-hidden\n        maz-border-transparent maz-bg-transparent maz-no-underline\n        maz-transition-all maz-duration-200 maz-ease-in-out maz-py-0.5;\n\n    &:not(.--no-rounded, .--rounded-none) {\n      @apply maz-rounded;\n\n      &.--rounded {\n        @apply maz-rounded-full;\n\n        &-sm {\n          @apply maz-rounded-sm;\n        }\n\n        &-md {\n          @apply maz-rounded-md;\n        }\n\n        &-lg {\n          @apply maz-rounded;\n        }\n\n        &-xl {\n          @apply maz-rounded-xl;\n        }\n\n        &-full {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    /* Sizes */\n    &.--xl {\n      @apply maz-min-h-16 maz-px-8 maz-text-xl;\n    }\n\n    &.--lg {\n      @apply maz-min-h-14 maz-px-6;\n    }\n\n    &.--md {\n      @apply maz-min-h-12 maz-px-4;\n    }\n\n    &.--sm {\n      @apply maz-min-h-10 maz-px-3;\n    }\n\n    &.--xs {\n      @apply maz-min-h-8 maz-px-2 maz-text-sm;\n    }\n\n    &.--mini {\n      @apply maz-min-h-6 maz-px-1 maz-text-xs;\n    }\n\n    /* Not disabled */\n\n    &:not(.--disabled) {\n      &:hover {\n        @apply maz-bg-border;\n      }\n    }\n\n    /* Fab */\n\n    &.--fab {\n      @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-px-1 maz-py-1;\n\n      &:not(.--no-elevation) {\n        @apply maz-elevation;\n      }\n\n      &.--xl {\n        @apply maz-w-16;\n      }\n\n      &.--lg {\n        @apply maz-w-14;\n      }\n\n      &.--md {\n        @apply maz-w-12;\n      }\n\n      &.--sm {\n        @apply maz-w-10;\n      }\n\n      &.--xs {\n        @apply maz-w-8;\n      }\n\n      &.--mini {\n        @apply maz-w-6;\n      }\n    }\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--primary {\n      @apply maz-bg-primary maz-text-primary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary-700;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-bg-secondary maz-text-secondary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary-700;\n      }\n    }\n\n    &.--info {\n      @apply maz-bg-info maz-text-info-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info-700;\n      }\n    }\n\n    &.--success {\n      @apply maz-bg-success maz-text-success-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success-700;\n      }\n    }\n\n    &.--warning {\n      @apply maz-bg-warning maz-text-warning-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning-700;\n      }\n    }\n\n    &.--danger {\n      @apply maz-bg-danger maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger-700;\n      }\n    }\n\n    &.--white {\n      @apply maz-bg-white maz-text-white-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-400;\n      }\n    }\n\n    &.--black {\n      @apply maz-bg-black maz-text-black-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-800;\n      }\n    }\n\n    &.--transparent {\n      @apply maz-bg-transparent;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-[#000]/[0.08] dark:maz-bg-[#FFF]/[0.08];\n      }\n    }\n\n    &.--theme {\n      @apply maz-bg-theme maz-text-color;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-theme-hover;\n      }\n    }\n\n    /* OUTLINE */\n\n    &.--primary-outline {\n      @apply maz-bg-primary-alpha-05 maz-text-primary maz-border-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-outline {\n      @apply maz-border-secondary maz-bg-secondary-alpha-05 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-white;\n      }\n    }\n\n    &.--info-outline {\n      @apply maz-border-info maz-bg-info-alpha-05 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-white;\n      }\n    }\n\n    &.--success-outline {\n      @apply maz-border-success maz-bg-success-alpha-05 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-white;\n      }\n    }\n\n    &.--danger-outline {\n      @apply maz-border-danger maz-bg-danger-alpha-05 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-white;\n      }\n    }\n\n    &.--warning-outline {\n      @apply maz-border-warning maz-bg-warning-alpha-05 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-white;\n      }\n    }\n\n    &.--white-outline {\n      @apply maz-border-white maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-outline {\n      @apply maz-border-black maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-outline {\n      @apply maz-border-border maz-text-theme dark:maz-border-color-lighter;\n\n      &:not(:disabled):hover {\n        @apply maz-border-theme maz-bg-theme maz-text-color;\n      }\n    }\n\n    /* PASTEL */\n\n    &.--primary-pastel {\n      @apply maz-bg-primary-50 maz-text-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-pastel {\n      @apply maz-bg-secondary-50 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-secondary-contrast;\n      }\n    }\n\n    &.--info-pastel {\n      @apply maz-bg-info-50 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-info-contrast;\n      }\n    }\n\n    &.--success-pastel {\n      @apply maz-bg-success-50 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-success-contrast;\n      }\n    }\n\n    &.--danger-pastel {\n      @apply maz-bg-danger-50 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-danger-contrast;\n      }\n    }\n\n    &.--warning-pastel {\n      @apply maz-bg-warning-50 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-warning-contrast;\n      }\n    }\n\n    &.--white-pastel {\n      @apply maz-bg-gray-100 maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    /* DISABLED */\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-light dark:maz-bg-color-lighter maz-text-gray-400 maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--loading {\n      @apply maz-cursor-wait;\n    }\n\n    &.--no-padding {\n      @apply maz-p-0;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazIcon","defineAsyncComponent","MazSpinner","href","to","useAttrs","component","computed","btnColorClass","isDisabled","cursorClass","variantClass","hasLoader","btnType","iconClassSize"],"mappings":"+1BAKA,MAAMA,EAAQC,EAYRC,EAAUC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,eAAe,CAAA,CAAC,EAC5DC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAAkB,CAAA,CAAC,EAElE,CAAE,KAAAE,EAAM,GAAAC,CAAG,EAAIC,WAAS,EA0GxBC,EAAYC,EAAAA,SAAS,IACrBJ,EACK,IACAC,EACA,cACF,QACR,EAEKI,EAAgBD,EAAAA,SAAS,IACzBT,EAAM,OACD,KAAKA,EAAM,KAAK,UACrBA,EAAM,QACD,KAAKA,EAAM,KAAK,WAClB,KAAKA,EAAM,KAAK,EACxB,EACKW,EAAaF,EAAA,SACjB,KAAOT,EAAM,SAAWA,EAAM,WAAaQ,EAAU,QAAU,QACjE,EACMI,EAAcH,EAAAA,SAAS,IAAOE,EAAW,MAAQ,mBAAqB,kBAAmB,EACzFE,EAAeJ,EAAAA,SAAS,IAAM,QAAQT,EAAM,OAAO,EAAE,EACrDc,EAAYL,EAAAA,SAAS,IAAMT,EAAM,SAAWA,EAAM,UAAY,QAAQ,EACtEe,EAAUN,WAAS,IAAOD,EAAU,QAAU,SAAWR,EAAM,KAAO,MAAU,EAEhFgB,EAAgBP,EAAAA,SAAS,IACzBT,EAAM,OAAS,KACV,eACLA,EAAM,OAAS,KACV,eACLA,EAAM,OAAS,KACV,cACLA,EAAM,OAAS,KACV,cACLA,EAAM,OAAS,KACV,gBACLA,EAAM,OAAS,OACV,cACF,aACR"}

package/dist/components/MazBtn.mjs

@@ -1,6 +1,6 @@
 import { defineComponent as C, defineAsyncComponent as m, useAttrs as $, computed as o, openBlock as t, createBlock as l, resolveDynamicComponent as r, normalizeClass as a, normalizeStyle as S, withCtx as j, renderSlot as i, unref as u, createCommentVNode as d, createElementBlock as M, createVNode as E } from "vue";
 import { _ as F } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazBtn.7QWd6o3M.css';const O = {
+import '../assets/MazBtn.Bz7wwOFh.css';const O = {
   key: 0,
   class: "m-btn-loader-container"
 }, A = /* @__PURE__ */ C({
@@ -96,7 +96,7 @@ import '../assets/MazBtn.7QWd6o3M.css';const O = {
       _: 3
     }, 8, ["disabled", "class", "style", "type"]));
   }
-}), R = /* @__PURE__ */ F(A, [["__scopeId", "data-v-db145b2a"]]);
+}), R = /* @__PURE__ */ F(A, [["__scopeId", "data-v-905e7603"]]);
 export {
   R as default
 };

package/dist/components/MazBtn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazBtn.mjs","sources":["../../src/components/MazBtn.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Icon, Size } from '@components/types'\n\nimport { computed, defineAsyncComponent, useAttrs } from 'vue'\n\nconst props = withDefaults(defineProps<MazBtnProps>(), {\n  variant: 'button',\n  size: 'md',\n  color: 'primary',\n  type: 'button',\n  icon: undefined,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: 'lg',\n  justify: 'center',\n})\n\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nconst { href, to } = useAttrs()\n\nexport interface MazBtnProps {\n  /**\n   * The variant of the button - Change UI of component (link or button style)\n   * @values `'button' | 'link'`\n   * @deprecated Use the component <MazLink /> instead\n   */\n  variant?: 'button' | 'link'\n  /**\n   * The size of the button\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  size?: Size\n  /**\n   * The color of the button\n   * @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`\n   */\n  color?: Color\n  /**\n   * The type of the button\n   * @values `'submit' | 'reset' | 'button'`\n   */\n  type?: 'submit' | 'reset' | 'button'\n  /**\n   * If true, the button will have a full border radius\n   * @default false\n   */\n  rounded?: boolean\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If true, the button will have no border radius\n   * @default false\n   */\n  noRounded?: boolean\n  /**\n   * If true, the button have the \"border\" style\n   * @default false\n   */\n  outline?: boolean\n  /**\n   * If true, the button will have a pastel color\n   * @default false\n   */\n  pastel?: boolean\n  /**\n   * If true, the button will have a full width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * If true, the button will have no underline on hover (useful with `variant=\"link\"`)\n   * @default false\n   */\n  noUnderline?: boolean\n  /**\n   * Enable the button loader\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Disable the button\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If true, the button will have a fab style\n   * @default false\n   */\n  fab?: boolean\n  /**\n   * The name of the icon to display or component, only with fab\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  icon?: string | Icon\n  /**\n   * The name of the icon or component to display on the left of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * If true, the button will have no padding\n   * @default false\n   */\n  noPadding?: boolean\n  /**\n   * If true, the button will have no box-shadow\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Choose how the elements are aligned in the button\n   */\n  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n\nconst component = computed(() => {\n  if (href)\n    return 'a'\n  else if (to)\n    return 'router-link'\n  return 'button'\n})\n\nconst btnColorClass = computed(() => {\n  if (props.pastel)\n    return `--${props.color}-pastel`\n  if (props.outline)\n    return `--${props.color}-outline`\n  return `--${props.color}`\n})\nconst isDisabled = computed(\n  () => (props.loading || props.disabled) && component.value === 'button',\n)\nconst cursorClass = computed(() => (isDisabled.value ? '--cursor-default' : '--cursor-pointer'))\nconst variantClass = computed(() => `--is-${props.variant}`)\nconst hasLoader = computed(() => props.loading && props.variant === 'button')\nconst btnType = computed(() => (component.value === 'button' ? props.type : undefined))\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-3xl'\n  if (props.size === 'lg')\n    return 'maz-text-2xl'\n  if (props.size === 'md')\n    return 'maz-text-xl'\n  if (props.size === 'sm')\n    return 'maz-text-lg'\n  if (props.size === 'xs')\n    return 'maz-text-base'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-xl'\n})\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :disabled=\"isDisabled || undefined\"\n    class=\"m-btn m-reset-css\"\n    :class=\"[\n      `--${size}`,\n      ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],\n      btnColorClass,\n      cursorClass,\n      variantClass,\n      {\n        '--block': block,\n        '--no-underline': noUnderline,\n        '--fab': fab,\n        '--loading': loading,\n        '--disabled': isDisabled,\n        '--rounded': rounded,\n        '--no-rounded': noRounded,\n        '--no-padding': noPadding,\n        '--no-elevation': noElevation,\n      },\n    ]\"\n    :style=\"[`--justify: ${justify}`]\"\n    :type=\"btnType\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot icon - The icon to display on the fab button\n    -->\n    <slot name=\"icon\">\n      <MazIcon v-if=\"typeof icon === 'string'\" :name=\"icon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"icon\" v-else-if=\"icon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot default - The content of the button\n    -->\n    <slot />\n\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <div v-if=\"hasLoader\" class=\"m-btn-loader-container\">\n      <MazSpinner size=\"2em\" :color=\"color\" />\n    </div>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-btn {\n  @apply maz-relative maz-items-center maz-gap-2 maz-border maz-border-solid maz-border-transparent maz-text-center maz-align-top maz-text-base maz-text-normal;\n\n  justify-content: var(--justify);\n\n  & span {\n    @apply maz-leading-none;\n  }\n\n  &-loader-container {\n    @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center maz-bg-color-light dark:maz-bg-color-lighter;\n  }\n\n  /* &-loader {\n    @apply maz-absolute;\n  } */\n\n  &.--cursor-pointer {\n    @apply maz-cursor-pointer;\n  }\n\n  &.--cursor-default {\n    @apply maz-cursor-default;\n  }\n\n  &.--is-link {\n    @apply maz-inline-flex maz-items-center\n        maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n      &:not(.--no-underline) {\n        @apply maz-underline;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-text-secondary;\n    }\n\n    &.--info {\n      @apply maz-text-info;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n\n    &.--danger {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--white {\n      @apply maz-text-white;\n    }\n\n    &.--black {\n      @apply maz-text-black;\n    }\n\n    &.--theme {\n      @apply maz-text-normal;\n    }\n  }\n\n  &.--is-button {\n    @apply maz-inline-flex maz-items-center maz-overflow-hidden\n        maz-border-transparent maz-bg-transparent maz-no-underline\n        maz-transition-all maz-duration-200 maz-ease-in-out maz-py-0.5;\n\n    &:not(.--no-rounded, .--rounded-none) {\n      @apply maz-rounded;\n\n      &.--rounded {\n        @apply maz-rounded-full;\n\n        &-sm {\n          @apply maz-rounded-sm;\n        }\n\n        &-md {\n          @apply maz-rounded-md;\n        }\n\n        &-lg {\n          @apply maz-rounded;\n        }\n\n        &-xl {\n          @apply maz-rounded-xl;\n        }\n\n        &-full {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    /* Sizes */\n    &.--xl {\n      @apply maz-min-h-16 maz-px-8 maz-text-xl;\n    }\n\n    &.--lg {\n      @apply maz-min-h-14 maz-px-6;\n    }\n\n    &.--md {\n      @apply maz-min-h-12 maz-px-4;\n    }\n\n    &.--sm {\n      @apply maz-min-h-10 maz-px-3;\n    }\n\n    &.--xs {\n      @apply maz-min-h-8 maz-px-2 maz-text-sm;\n    }\n\n    &.--mini {\n      @apply maz-min-h-6 maz-px-1 maz-text-xs;\n    }\n\n    /* Not disabled */\n\n    &:not(.--disabled) {\n      &:hover {\n        @apply maz-bg-border;\n      }\n    }\n\n    /* Fab */\n\n    &.--fab {\n      @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-px-1 maz-py-1;\n\n      &:not(.--no-elevation) {\n        @apply maz-elevation;\n      }\n\n      &.--xl {\n        @apply maz-w-16;\n      }\n\n      &.--lg {\n        @apply maz-w-14;\n      }\n\n      &.--md {\n        @apply maz-w-12;\n      }\n\n      &.--sm {\n        @apply maz-w-10;\n      }\n\n      &.--xs {\n        @apply maz-w-8;\n      }\n\n      &.--mini {\n        @apply maz-w-6;\n      }\n    }\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--primary {\n      @apply maz-bg-primary maz-text-primary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary-700;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-bg-secondary maz-text-secondary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary-700;\n      }\n    }\n\n    &.--info {\n      @apply maz-bg-info maz-text-info-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info-700;\n      }\n    }\n\n    &.--success {\n      @apply maz-bg-success maz-text-success-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success-700;\n      }\n    }\n\n    &.--warning {\n      @apply maz-bg-warning maz-text-warning-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning-700;\n      }\n    }\n\n    &.--danger {\n      @apply maz-bg-danger maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger-700;\n      }\n    }\n\n    &.--white {\n      @apply maz-bg-white maz-text-white-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-400;\n      }\n    }\n\n    &.--black {\n      @apply maz-bg-black maz-text-black-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-800;\n      }\n    }\n\n    &.--transparent {\n      @apply maz-bg-transparent;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-[#000]/[0.08] dark:maz-bg-[#FFF]/[0.08];\n      }\n    }\n\n    &.--theme {\n      @apply maz-bg-theme maz-text-color;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-theme-hover;\n      }\n    }\n\n    /* OUTLINE */\n\n    &.--primary-outline {\n      @apply maz-bg-primary-alpha-05 maz-text-primary maz-border-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-outline {\n      @apply maz-border-secondary maz-bg-secondary-alpha-05 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-white;\n      }\n    }\n\n    &.--info-outline {\n      @apply maz-border-info maz-bg-info-alpha-05 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-white;\n      }\n    }\n\n    &.--success-outline {\n      @apply maz-border-success maz-bg-success-alpha-05 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-white;\n      }\n    }\n\n    &.--danger-outline {\n      @apply maz-border-danger maz-bg-danger-alpha-05 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-white;\n      }\n    }\n\n    &.--warning-outline {\n      @apply maz-border-warning maz-bg-warning-alpha-05 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-white;\n      }\n    }\n\n    &.--white-outline {\n      @apply maz-border-white maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-outline {\n      @apply maz-border-black maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-outline {\n      @apply maz-border-border maz-text-theme dark:maz-border-color-lighter;\n\n      &:not(:disabled):hover {\n        @apply maz-border-theme maz-bg-theme maz-text-color;\n      }\n    }\n\n    /* PASTEL */\n\n    &.--primary-pastel {\n      @apply maz-bg-primary-50 maz-text-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-pastel {\n      @apply maz-bg-secondary-50 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-secondary-contrast;\n      }\n    }\n\n    &.--info-pastel {\n      @apply maz-bg-info-50 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-info-contrast;\n      }\n    }\n\n    &.--success-pastel {\n      @apply maz-bg-success-50 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-success-contrast;\n      }\n    }\n\n    &.--danger-pastel {\n      @apply maz-bg-danger-50 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-danger-contrast;\n      }\n    }\n\n    &.--warning-pastel {\n      @apply maz-bg-warning-50 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-warning-contrast;\n      }\n    }\n\n    &.--white-pastel {\n      @apply maz-bg-gray-100 maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    /* DISABLED */\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-light dark:maz-bg-color-lighter maz-text-gray-400 maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--loading {\n      @apply maz-cursor-wait;\n    }\n\n    &.--no-padding {\n      @apply maz-p-0;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazIcon","defineAsyncComponent","MazSpinner","href","to","useAttrs","component","computed","btnColorClass","isDisabled","cursorClass","variantClass","hasLoader","btnType","iconClassSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAYRC,IAAUC,EAAqB,MAAM,OAAO,eAAyB,CAAC,GACtEC,IAAaD,EAAqB,MAAM,OAAO,kBAA4B,CAAC,GAE5E,EAAE,MAAAE,GAAM,IAAAC,EAAG,IAAIC,EAAS,GA0GxBC,IAAYC,EAAS,MACrBJ,IACK,MACAC,IACA,gBACF,QACR,GAEKI,IAAgBD,EAAS,MACzBT,EAAM,SACD,KAAKA,EAAM,KAAK,YACrBA,EAAM,UACD,KAAKA,EAAM,KAAK,aAClB,KAAKA,EAAM,KAAK,EACxB,GACKW,IAAaF;AAAA,MACjB,OAAOT,EAAM,WAAWA,EAAM,aAAaQ,EAAU,UAAU;AAAA,IACjE,GACMI,IAAcH,EAAS,MAAOE,EAAW,QAAQ,qBAAqB,kBAAmB,GACzFE,IAAeJ,EAAS,MAAM,QAAQT,EAAM,OAAO,EAAE,GACrDc,IAAYL,EAAS,MAAMT,EAAM,WAAWA,EAAM,YAAY,QAAQ,GACtEe,IAAUN,EAAS,MAAOD,EAAU,UAAU,WAAWR,EAAM,OAAO,MAAU,GAEhFgB,IAAgBP,EAAS,MACzBT,EAAM,SAAS,OACV,iBACLA,EAAM,SAAS,OACV,iBACLA,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,OACV,kBACLA,EAAM,SAAS,SACV,gBACF,aACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazBtn.mjs","sources":["../../src/components/MazBtn.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Icon, Size } from './types'\n\nimport { computed, defineAsyncComponent, useAttrs } from 'vue'\n\nconst props = withDefaults(defineProps<MazBtnProps>(), {\n  variant: 'button',\n  size: 'md',\n  color: 'primary',\n  type: 'button',\n  icon: undefined,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: 'lg',\n  justify: 'center',\n})\n\nconst MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))\nconst MazSpinner = defineAsyncComponent(() => import('./MazSpinner.vue'))\n\nconst { href, to } = useAttrs()\n\nexport interface MazBtnProps {\n  /**\n   * The variant of the button - Change UI of component (link or button style)\n   * @values `'button' | 'link'`\n   * @deprecated Use the component <MazLink /> instead\n   */\n  variant?: 'button' | 'link'\n  /**\n   * The size of the button\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  size?: Size\n  /**\n   * The color of the button\n   * @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`\n   */\n  color?: Color\n  /**\n   * The type of the button\n   * @values `'submit' | 'reset' | 'button'`\n   */\n  type?: 'submit' | 'reset' | 'button'\n  /**\n   * If true, the button will have a full border radius\n   * @default false\n   */\n  rounded?: boolean\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If true, the button will have no border radius\n   * @default false\n   */\n  noRounded?: boolean\n  /**\n   * If true, the button have the \"border\" style\n   * @default false\n   */\n  outline?: boolean\n  /**\n   * If true, the button will have a pastel color\n   * @default false\n   */\n  pastel?: boolean\n  /**\n   * If true, the button will have a full width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * If true, the button will have no underline on hover (useful with `variant=\"link\"`)\n   * @default false\n   */\n  noUnderline?: boolean\n  /**\n   * Enable the button loader\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Disable the button\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If true, the button will have a fab style\n   * @default false\n   */\n  fab?: boolean\n  /**\n   * The name of the icon to display or component, only with fab\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  icon?: string | Icon\n  /**\n   * The name of the icon or component to display on the left of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * If true, the button will have no padding\n   * @default false\n   */\n  noPadding?: boolean\n  /**\n   * If true, the button will have no box-shadow\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Choose how the elements are aligned in the button\n   */\n  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n\nconst component = computed(() => {\n  if (href)\n    return 'a'\n  else if (to)\n    return 'router-link'\n  return 'button'\n})\n\nconst btnColorClass = computed(() => {\n  if (props.pastel)\n    return `--${props.color}-pastel`\n  if (props.outline)\n    return `--${props.color}-outline`\n  return `--${props.color}`\n})\nconst isDisabled = computed(\n  () => (props.loading || props.disabled) && component.value === 'button',\n)\nconst cursorClass = computed(() => (isDisabled.value ? '--cursor-default' : '--cursor-pointer'))\nconst variantClass = computed(() => `--is-${props.variant}`)\nconst hasLoader = computed(() => props.loading && props.variant === 'button')\nconst btnType = computed(() => (component.value === 'button' ? props.type : undefined))\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-3xl'\n  if (props.size === 'lg')\n    return 'maz-text-2xl'\n  if (props.size === 'md')\n    return 'maz-text-xl'\n  if (props.size === 'sm')\n    return 'maz-text-lg'\n  if (props.size === 'xs')\n    return 'maz-text-base'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-xl'\n})\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :disabled=\"isDisabled || undefined\"\n    class=\"m-btn m-reset-css\"\n    :class=\"[\n      `--${size}`,\n      ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],\n      btnColorClass,\n      cursorClass,\n      variantClass,\n      {\n        '--block': block,\n        '--no-underline': noUnderline,\n        '--fab': fab,\n        '--loading': loading,\n        '--disabled': isDisabled,\n        '--rounded': rounded,\n        '--no-rounded': noRounded,\n        '--no-padding': noPadding,\n        '--no-elevation': noElevation,\n      },\n    ]\"\n    :style=\"[`--justify: ${justify}`]\"\n    :type=\"btnType\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot icon - The icon to display on the fab button\n    -->\n    <slot name=\"icon\">\n      <MazIcon v-if=\"typeof icon === 'string'\" :name=\"icon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"icon\" v-else-if=\"icon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot default - The content of the button\n    -->\n    <slot />\n\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <div v-if=\"hasLoader\" class=\"m-btn-loader-container\">\n      <MazSpinner size=\"2em\" :color=\"color\" />\n    </div>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-btn {\n  @apply maz-relative maz-items-center maz-gap-2 maz-border maz-border-solid maz-border-transparent maz-text-center maz-align-top maz-text-base maz-text-normal;\n\n  justify-content: var(--justify);\n\n  & span {\n    @apply maz-leading-none;\n  }\n\n  &-loader-container {\n    @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center maz-bg-color-light dark:maz-bg-color-lighter;\n  }\n\n  /* &-loader {\n    @apply maz-absolute;\n  } */\n\n  &.--cursor-pointer {\n    @apply maz-cursor-pointer;\n  }\n\n  &.--cursor-default {\n    @apply maz-cursor-default;\n  }\n\n  &.--is-link {\n    @apply maz-inline-flex maz-items-center\n        maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n      &:not(.--no-underline) {\n        @apply maz-underline;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-text-secondary;\n    }\n\n    &.--info {\n      @apply maz-text-info;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n\n    &.--danger {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--white {\n      @apply maz-text-white;\n    }\n\n    &.--black {\n      @apply maz-text-black;\n    }\n\n    &.--theme {\n      @apply maz-text-normal;\n    }\n  }\n\n  &.--is-button {\n    @apply maz-inline-flex maz-items-center maz-overflow-hidden\n        maz-border-transparent maz-bg-transparent maz-no-underline\n        maz-transition-all maz-duration-200 maz-ease-in-out maz-py-0.5;\n\n    &:not(.--no-rounded, .--rounded-none) {\n      @apply maz-rounded;\n\n      &.--rounded {\n        @apply maz-rounded-full;\n\n        &-sm {\n          @apply maz-rounded-sm;\n        }\n\n        &-md {\n          @apply maz-rounded-md;\n        }\n\n        &-lg {\n          @apply maz-rounded;\n        }\n\n        &-xl {\n          @apply maz-rounded-xl;\n        }\n\n        &-full {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    /* Sizes */\n    &.--xl {\n      @apply maz-min-h-16 maz-px-8 maz-text-xl;\n    }\n\n    &.--lg {\n      @apply maz-min-h-14 maz-px-6;\n    }\n\n    &.--md {\n      @apply maz-min-h-12 maz-px-4;\n    }\n\n    &.--sm {\n      @apply maz-min-h-10 maz-px-3;\n    }\n\n    &.--xs {\n      @apply maz-min-h-8 maz-px-2 maz-text-sm;\n    }\n\n    &.--mini {\n      @apply maz-min-h-6 maz-px-1 maz-text-xs;\n    }\n\n    /* Not disabled */\n\n    &:not(.--disabled) {\n      &:hover {\n        @apply maz-bg-border;\n      }\n    }\n\n    /* Fab */\n\n    &.--fab {\n      @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-px-1 maz-py-1;\n\n      &:not(.--no-elevation) {\n        @apply maz-elevation;\n      }\n\n      &.--xl {\n        @apply maz-w-16;\n      }\n\n      &.--lg {\n        @apply maz-w-14;\n      }\n\n      &.--md {\n        @apply maz-w-12;\n      }\n\n      &.--sm {\n        @apply maz-w-10;\n      }\n\n      &.--xs {\n        @apply maz-w-8;\n      }\n\n      &.--mini {\n        @apply maz-w-6;\n      }\n    }\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--primary {\n      @apply maz-bg-primary maz-text-primary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary-700;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-bg-secondary maz-text-secondary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary-700;\n      }\n    }\n\n    &.--info {\n      @apply maz-bg-info maz-text-info-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info-700;\n      }\n    }\n\n    &.--success {\n      @apply maz-bg-success maz-text-success-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success-700;\n      }\n    }\n\n    &.--warning {\n      @apply maz-bg-warning maz-text-warning-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning-700;\n      }\n    }\n\n    &.--danger {\n      @apply maz-bg-danger maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger-700;\n      }\n    }\n\n    &.--white {\n      @apply maz-bg-white maz-text-white-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-400;\n      }\n    }\n\n    &.--black {\n      @apply maz-bg-black maz-text-black-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-800;\n      }\n    }\n\n    &.--transparent {\n      @apply maz-bg-transparent;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-[#000]/[0.08] dark:maz-bg-[#FFF]/[0.08];\n      }\n    }\n\n    &.--theme {\n      @apply maz-bg-theme maz-text-color;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-theme-hover;\n      }\n    }\n\n    /* OUTLINE */\n\n    &.--primary-outline {\n      @apply maz-bg-primary-alpha-05 maz-text-primary maz-border-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-outline {\n      @apply maz-border-secondary maz-bg-secondary-alpha-05 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-white;\n      }\n    }\n\n    &.--info-outline {\n      @apply maz-border-info maz-bg-info-alpha-05 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-white;\n      }\n    }\n\n    &.--success-outline {\n      @apply maz-border-success maz-bg-success-alpha-05 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-white;\n      }\n    }\n\n    &.--danger-outline {\n      @apply maz-border-danger maz-bg-danger-alpha-05 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-white;\n      }\n    }\n\n    &.--warning-outline {\n      @apply maz-border-warning maz-bg-warning-alpha-05 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-white;\n      }\n    }\n\n    &.--white-outline {\n      @apply maz-border-white maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-outline {\n      @apply maz-border-black maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-outline {\n      @apply maz-border-border maz-text-theme dark:maz-border-color-lighter;\n\n      &:not(:disabled):hover {\n        @apply maz-border-theme maz-bg-theme maz-text-color;\n      }\n    }\n\n    /* PASTEL */\n\n    &.--primary-pastel {\n      @apply maz-bg-primary-50 maz-text-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-pastel {\n      @apply maz-bg-secondary-50 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-secondary-contrast;\n      }\n    }\n\n    &.--info-pastel {\n      @apply maz-bg-info-50 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-info-contrast;\n      }\n    }\n\n    &.--success-pastel {\n      @apply maz-bg-success-50 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-success-contrast;\n      }\n    }\n\n    &.--danger-pastel {\n      @apply maz-bg-danger-50 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-danger-contrast;\n      }\n    }\n\n    &.--warning-pastel {\n      @apply maz-bg-warning-50 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-warning-contrast;\n      }\n    }\n\n    &.--white-pastel {\n      @apply maz-bg-gray-100 maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    /* DISABLED */\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-light dark:maz-bg-color-lighter maz-text-gray-400 maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--loading {\n      @apply maz-cursor-wait;\n    }\n\n    &.--no-padding {\n      @apply maz-p-0;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazIcon","defineAsyncComponent","MazSpinner","href","to","useAttrs","component","computed","btnColorClass","isDisabled","cursorClass","variantClass","hasLoader","btnType","iconClassSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAYRC,IAAUC,EAAqB,MAAM,OAAO,eAAe,CAAC,GAC5DC,IAAaD,EAAqB,MAAM,OAAO,kBAAkB,CAAC,GAElE,EAAE,MAAAE,GAAM,IAAAC,EAAG,IAAIC,EAAS,GA0GxBC,IAAYC,EAAS,MACrBJ,IACK,MACAC,IACA,gBACF,QACR,GAEKI,IAAgBD,EAAS,MACzBT,EAAM,SACD,KAAKA,EAAM,KAAK,YACrBA,EAAM,UACD,KAAKA,EAAM,KAAK,aAClB,KAAKA,EAAM,KAAK,EACxB,GACKW,IAAaF;AAAA,MACjB,OAAOT,EAAM,WAAWA,EAAM,aAAaQ,EAAU,UAAU;AAAA,IACjE,GACMI,IAAcH,EAAS,MAAOE,EAAW,QAAQ,qBAAqB,kBAAmB,GACzFE,IAAeJ,EAAS,MAAM,QAAQT,EAAM,OAAO,EAAE,GACrDc,IAAYL,EAAS,MAAMT,EAAM,WAAWA,EAAM,YAAY,QAAQ,GACtEe,IAAUN,EAAS,MAAOD,EAAU,UAAU,WAAWR,EAAM,OAAO,MAAU,GAEhFgB,IAAgBP,EAAS,MACzBT,EAAM,SAAS,OACV,iBACLA,EAAM,SAAS,OACV,iBACLA,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,OACV,kBACLA,EAAM,SAAS,SACV,gBACF,aACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazCard.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCard.Cod9pIM4.css');const e=require("vue"),k=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),y={key:0,class:"m-card__gallery__wrapper"},C={class:"maz-min-w-0 maz-flex-1"},B={key:0,class:"m-card__title"},w={key:1,class:"m-card__subtitle"},b={key:2,class:"m-card__content"},_={key:2,class:"m-card__actions maz-flex maz-p-2"},$=e.defineComponent({__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(u){const t=u,m=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),c=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazGallery.cjs"))),p=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazTransitionExpand.cjs"))),v=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/chevron-down.DdnENkzR.cjs"))),h=e.useSlots(),a=e.computed(()=>t.collapsible||t.collapsable),l=e.ref(a.value?t.collapseOpen:!0),d=e.computed(()=>t.href||t.to);e.watch(()=>t.collapseOpen,o=>{a.value&&(l.value=o)});const i=e.computed(()=>({is:t.href?"a":t.to?"router-link":"div",...t.href&&{href:t.href},...t.to&&{to:t.to},target:t.hrefTarget})),n=e.computed(()=>["column","column-reverse"].includes(t.orientation)),s=e.computed(()=>{const o=new Set(["default","title","subtitle","content"]);return Object.keys(h).some(r=>o.has(r))}),f=e.computed(()=>s.value?t.galleryWidth:"100%"),z=e.computed(()=>t.footerAlign==="right"?"maz-text-end":"maz-text-start");return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-card m-reset-css",[{"m-card--linked":d.value,"m-card--no-scale":!o.scale,"maz-elevation":o.elevation,"--block":o.block,"maz-overflow-hidden":o.overflowHidden||!l.value,"maz-rounded":o.radius,"maz-border maz-border-solid maz-border-color-light":o.bordered}]])},[o.$slots.header||o.header||a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value?"button":"div"),{key:0,class:e.normalizeClass(["m-card__header maz-border-b maz-border-solid",[l.value?"maz-rounded-t maz-border-color-light":"maz-border-transparent",{"--is-collapsible":a.value},{"maz-justify-end":(!o.$slots.header||!o.header)&&a.value},{"maz-justify-between":o.$slots.header||o.header}]]),tabindex:"-1",onClick:r[1]||(r[1]=e.withModifiers(g=>a.value?l.value=!l.value:void 0,["stop"]))},{default:e.withCtx(()=>[o.$slots.header||o.header?e.renderSlot(o.$slots,"header",{key:0},()=>[e.createTextVNode(e.toDisplayString(o.header),1)],!0):e.createCommentVNode("",!0),a.value?(e.openBlock(),e.createBlock(e.unref(m),{key:1,color:"transparent",class:"maz-ml-2 maz-text-sm",size:"xs",onClick:r[0]||(r[0]=e.withModifiers(g=>l.value=!l.value,["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(v),{class:e.normalizeClass([{"--is-open":l.value},"m-card__collapse-icon maz-text-xl"])},null,8,["class"])]),_:1})):e.createCommentVNode("",!0)]),_:3},8,["class"])):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value.is),e.mergeProps(i.value,{class:["m-card__wrapper",[`m-card__wrapper--${o.orientation}`,{"m-card__link":d.value}]]}),{default:e.withCtx(()=>[o.images?(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(c),{"no-radius":!o.radius,width:f.value,height:o.galleryHeight,"images-shown-count":o.imagesShowCount,images:o.images,"no-zoom":!o.zoom,"no-width":n.value,"no-height":!n.value&&s.value,"no-remaining":o.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"])])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value?e.unref(p):"div"),{class:"maz-h-full"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass([[o.wrapperClass,{"maz-p-4":!o.noPadding&&!a.value}],"m-card__content__wrapper maz-h-full"])},[e.renderSlot(o.$slots,"default",{},()=>[o.$slots.title?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(o.$slots,"title",{},void 0,!0)])):e.createCommentVNode("",!0),o.$slots.subtitle?(e.openBlock(),e.createElementBlock("div",w,[e.renderSlot(o.$slots,"subtitle",{},void 0,!0)])):e.createCommentVNode("",!0),o.$slots.content?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(o.$slots,"content",{},void 0,!0)])):e.createCommentVNode("",!0)],!0)],2),[[e.vShow,l.value]])]),_:3}))])]),_:3},16,["class"])),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["m-card__footer maz-overflow-x-auto maz-p-3",[{"maz-border-t maz-border-color-light":n.value&&s.value},z.value]])},[e.renderSlot(o.$slots,"footer",{},void 0,!0)],2)):e.createCommentVNode("",!0),o.$slots.actions?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(o.$slots,"actions",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),S=k._export_sfc($,[["__scopeId","data-v-2d55f280"]]);exports.default=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCard.BayiNvpH.css');const e=require("vue"),k=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),y={key:0,class:"m-card__gallery__wrapper"},C={class:"maz-min-w-0 maz-flex-1"},B={key:0,class:"m-card__title"},w={key:1,class:"m-card__subtitle"},b={key:2,class:"m-card__content"},_={key:2,class:"m-card__actions maz-flex maz-p-2"},$=e.defineComponent({__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(u){const t=u,m=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),c=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazGallery.cjs"))),p=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazTransitionExpand.cjs"))),v=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/chevron-down.DdnENkzR.cjs"))),h=e.useSlots(),a=e.computed(()=>t.collapsible||t.collapsable),l=e.ref(a.value?t.collapseOpen:!0),d=e.computed(()=>t.href||t.to);e.watch(()=>t.collapseOpen,o=>{a.value&&(l.value=o)});const i=e.computed(()=>({is:t.href?"a":t.to?"router-link":"div",...t.href&&{href:t.href},...t.to&&{to:t.to},target:t.hrefTarget})),n=e.computed(()=>["column","column-reverse"].includes(t.orientation)),s=e.computed(()=>{const o=new Set(["default","title","subtitle","content"]);return Object.keys(h).some(r=>o.has(r))}),f=e.computed(()=>s.value?t.galleryWidth:"100%"),z=e.computed(()=>t.footerAlign==="right"?"maz-text-end":"maz-text-start");return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-card m-reset-css",[{"m-card--linked":d.value,"m-card--no-scale":!o.scale,"maz-elevation":o.elevation,"--block":o.block,"maz-overflow-hidden":o.overflowHidden||!l.value,"maz-rounded":o.radius,"maz-border maz-border-solid maz-border-color-light":o.bordered}]])},[o.$slots.header||o.header||a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value?"button":"div"),{key:0,class:e.normalizeClass(["m-card__header maz-border-b maz-border-solid",[l.value?"maz-rounded-t maz-border-color-light":"maz-border-transparent",{"--is-collapsible":a.value},{"maz-justify-end":(!o.$slots.header||!o.header)&&a.value},{"maz-justify-between":o.$slots.header||o.header}]]),tabindex:"-1",onClick:r[1]||(r[1]=e.withModifiers(g=>a.value?l.value=!l.value:void 0,["stop"]))},{default:e.withCtx(()=>[o.$slots.header||o.header?e.renderSlot(o.$slots,"header",{key:0},()=>[e.createTextVNode(e.toDisplayString(o.header),1)],!0):e.createCommentVNode("",!0),a.value?(e.openBlock(),e.createBlock(e.unref(m),{key:1,color:"transparent",class:"maz-ml-2 maz-text-sm",size:"xs",onClick:r[0]||(r[0]=e.withModifiers(g=>l.value=!l.value,["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(v),{class:e.normalizeClass([{"--is-open":l.value},"m-card__collapse-icon maz-text-xl"])},null,8,["class"])]),_:1})):e.createCommentVNode("",!0)]),_:3},8,["class"])):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value.is),e.mergeProps(i.value,{class:["m-card__wrapper",[`m-card__wrapper--${o.orientation}`,{"m-card__link":d.value}]]}),{default:e.withCtx(()=>[o.images?(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(c),{"no-radius":!o.radius,width:f.value,height:o.galleryHeight,"images-shown-count":o.imagesShowCount,images:o.images,"no-zoom":!o.zoom,"no-width":n.value,"no-height":!n.value&&s.value,"no-remaining":o.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"])])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value?e.unref(p):"div"),{class:"maz-h-full"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass([[o.wrapperClass,{"maz-p-4":!o.noPadding&&!a.value}],"m-card__content__wrapper maz-h-full"])},[e.renderSlot(o.$slots,"default",{},()=>[o.$slots.title?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(o.$slots,"title",{},void 0,!0)])):e.createCommentVNode("",!0),o.$slots.subtitle?(e.openBlock(),e.createElementBlock("div",w,[e.renderSlot(o.$slots,"subtitle",{},void 0,!0)])):e.createCommentVNode("",!0),o.$slots.content?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(o.$slots,"content",{},void 0,!0)])):e.createCommentVNode("",!0)],!0)],2),[[e.vShow,l.value]])]),_:3}))])]),_:3},16,["class"])),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["m-card__footer maz-overflow-x-auto maz-p-3",[{"maz-border-t maz-border-color-light":n.value&&s.value},z.value]])},[e.renderSlot(o.$slots,"footer",{},void 0,!0)],2)):e.createCommentVNode("",!0),o.$slots.actions?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(o.$slots,"actions",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),S=k._export_sfc($,[["__scopeId","data-v-d2dd7187"]]);exports.default=S;
 //# sourceMappingURL=MazCard.cjs.map

package/dist/components/MazCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazCard.cjs","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":"wlCAKA,MAAMA,EAAQC,EAkBRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAwB,CAAA,CAAC,EACpEC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAC5EE,EAAsBF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,2BAAqC,CAAA,CAAC,EAE9FG,EAAkBH,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,qCAAyB,CAAA,CAAC,EAuD9EI,EAAQC,EAAAA,SAAS,EAEjBC,EAAgBC,EAAAA,SAAS,IAAMV,EAAM,aAAeA,EAAM,WAAW,EAErEW,EAASC,EAAAA,IAAIH,EAAc,MAAQT,EAAM,aAAe,EAAI,EAE5Da,EAAWH,EAAAA,SAAS,IAAMV,EAAM,MAAQA,EAAM,EAAE,EAEtDc,EAAA,MACE,IAAMd,EAAM,aACXe,GAAU,CACLN,EAAc,QAChBE,EAAO,MAAQI,EAAA,CAErB,EAEM,MAAAC,EAAcN,EAAAA,SAAS,KACpB,CACL,GAAIV,EAAM,KAAO,IAAMA,EAAM,GAAK,cAAgB,MAClD,GAAIA,EAAM,MAAQ,CAAE,KAAMA,EAAM,IAAK,EACrC,GAAIA,EAAM,IAAM,CAAE,GAAIA,EAAM,EAAG,EAC/B,OAAQA,EAAM,UAChB,EACD,EAEKiB,EAAkBP,WAAS,IAAM,CAAC,SAAU,gBAAgB,EAAE,SAASV,EAAM,WAAW,CAAC,EAEzFkB,EAAkBR,EAAAA,SAAS,IAAM,CAC/B,MAAAS,MAAqB,IAAI,CAAC,UAAW,QAAS,WAAY,SAAS,CAAC,EACnE,OAAA,OAAO,KAAKZ,CAAK,EAAE,KAAYa,GAAAD,EAAe,IAAIC,CAAG,CAAC,CAAA,CAC9D,EAEKC,EAAuBX,EAAAA,SAAS,IAAOQ,EAAgB,MAAQlB,EAAM,aAAe,MAAO,EAE3FsB,EAAmBZ,EAAA,SAAS,IAChCV,EAAM,cAAgB,QAAU,eAAiB,gBACnD"}
+{"version":3,"file":"MazCard.cjs","sources":["../../src/components/MazCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouterLinkProps } from 'vue-router'\nimport type { MazGalleryImage } from './types'\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('./MazBtn.vue'))\nconst MazGallery = defineAsyncComponent(() => import('./MazGallery.vue'))\nconst MazTransitionExpand = defineAsyncComponent(() => import('./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":"wlCAKA,MAAMA,EAAQC,EAkBRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAc,CAAA,CAAC,EAC1DC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAAkB,CAAA,CAAC,EAClEE,EAAsBF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,2BAA2B,CAAA,CAAC,EAEpFG,EAAkBH,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,qCAA8B,CAAA,CAAC,EAuDnFI,EAAQC,EAAAA,SAAS,EAEjBC,EAAgBC,EAAAA,SAAS,IAAMV,EAAM,aAAeA,EAAM,WAAW,EAErEW,EAASC,EAAAA,IAAIH,EAAc,MAAQT,EAAM,aAAe,EAAI,EAE5Da,EAAWH,EAAAA,SAAS,IAAMV,EAAM,MAAQA,EAAM,EAAE,EAEtDc,EAAA,MACE,IAAMd,EAAM,aACXe,GAAU,CACLN,EAAc,QAChBE,EAAO,MAAQI,EAAA,CAErB,EAEM,MAAAC,EAAcN,EAAAA,SAAS,KACpB,CACL,GAAIV,EAAM,KAAO,IAAMA,EAAM,GAAK,cAAgB,MAClD,GAAIA,EAAM,MAAQ,CAAE,KAAMA,EAAM,IAAK,EACrC,GAAIA,EAAM,IAAM,CAAE,GAAIA,EAAM,EAAG,EAC/B,OAAQA,EAAM,UAChB,EACD,EAEKiB,EAAkBP,WAAS,IAAM,CAAC,SAAU,gBAAgB,EAAE,SAASV,EAAM,WAAW,CAAC,EAEzFkB,EAAkBR,EAAAA,SAAS,IAAM,CAC/B,MAAAS,MAAqB,IAAI,CAAC,UAAW,QAAS,WAAY,SAAS,CAAC,EACnE,OAAA,OAAO,KAAKZ,CAAK,EAAE,KAAYa,GAAAD,EAAe,IAAIC,CAAG,CAAC,CAAA,CAC9D,EAEKC,EAAuBX,EAAAA,SAAS,IAAOQ,EAAgB,MAAQlB,EAAM,aAAe,MAAO,EAE3FsB,EAAmBZ,EAAA,SAAS,IAChCV,EAAM,cAAgB,QAAU,eAAiB,gBACnD"}

package/dist/components/MazCard.mjs

@@ -1,6 +1,6 @@
 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 = {
+import '../assets/MazCard.BayiNvpH.css';const G = {
   key: 0,
   class: "m-card__gallery__wrapper"
 }, L = { class: "maz-min-w-0 maz-flex-1" }, q = {
@@ -167,7 +167,7 @@ import '../assets/MazCard.Cod9pIM4.css';const G = {
       ])) : s("", !0)
     ], 2));
   }
-}), Y = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-2d55f280"]]);
+}), Y = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-d2dd7187"]]);
 export {
   Y as default
 };

package/dist/components/MazCard.mjs.map

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazCard.mjs","sources":["../../src/components/MazCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouterLinkProps } from 'vue-router'\nimport type { MazGalleryImage } from './types'\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('./MazBtn.vue'))\nconst MazGallery = defineAsyncComponent(() => import('./MazGallery.vue'))\nconst MazTransitionExpand = defineAsyncComponent(() => import('./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,cAAc,CAAC,GAC1DC,IAAaD,EAAqB,MAAM,OAAO,kBAAkB,CAAC,GAClEE,IAAsBF,EAAqB,MAAM,OAAO,2BAA2B,CAAC,GAEpFG,IAAkBH,EAAqB,MAAM,OAAO,qCAA8B,CAAC,GAuDnFI,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

@@ -1,2 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCardSpotlight.Y7PEY9QV.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-ce309218"]]);exports.default=y;
 //# sourceMappingURL=MazCardSpotlight.cjs.map

package/dist/components/MazCardSpotlight.cjs.map

@@ -1 +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"}
+{"version":3,"file":"MazCardSpotlight.cjs","sources":["../../src/components/MazCardSpotlight.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from './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

@@ -1,6 +1,6 @@
 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({
+import '../assets/MazCardSpotlight.Y7PEY9QV.css';const $ = { class: "inner" }, M = /* @__PURE__ */ E({
   __name: "MazCardSpotlight",
   props: {
     color: { default: "primary" },
@@ -62,7 +62,7 @@ import '../assets/MazCardSpotlight.DuZac0w4.css';const $ = { class: "inner" }, M
       ])
     ], 6));
   }
-}), V = /* @__PURE__ */ S(M, [["__scopeId", "data-v-23212ba3"]]);
+}), V = /* @__PURE__ */ S(M, [["__scopeId", "data-v-ce309218"]]);
 export {
   V as default
 };

package/dist/components/MazCardSpotlight.mjs.map

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazCardSpotlight.mjs","sources":["../../src/components/MazCardSpotlight.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from './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

@@ -1,2 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCarousel.CB32PQvq.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-767b967e"]]);exports.default=k;
 //# sourceMappingURL=MazCarousel.cjs.map

package/dist/components/MazCarousel.cjs.map

@@ -1 +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"}
+{"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('./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,cAAc,CAAA,CAAC,EAE1DC,EAAkBD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,qCAA8B,CAAA,CAAC,EACnFE,EAAmBF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,sCAA+B,CAAA,CAAC,EAarFG,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

@@ -1,6 +1,6 @@
 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 }, $ = {
+import '../assets/MazCarousel.CB32PQvq.css';const x = { key: 0 }, $ = {
   key: 1,
   class: "m-carousel__header__actions"
 }, T = /* @__PURE__ */ I({
@@ -91,7 +91,7 @@ import '../assets/MazCarousel.BQIrqJ8T.css';const x = { key: 0 }, $ = {
       ], 544)
     ], 2));
   }
-}), P = /* @__PURE__ */ W(T, [["__scopeId", "data-v-7d01ae12"]]);
+}), P = /* @__PURE__ */ W(T, [["__scopeId", "data-v-767b967e"]]);
 export {
   P as default
 };

package/dist/components/MazCarousel.mjs.map

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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('./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,cAAc,CAAC,GAE1DC,IAAkBD,EAAqB,MAAM,OAAO,qCAA8B,CAAC,GACnFE,IAAmBF,EAAqB,MAAM,OAAO,sCAA+B,CAAC,GAarFG,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}