maz-ui 4.0.0-beta.9 → 4.0.0

package/dist/components/MazGallery.js

@@ -1,9 +1,9 @@
 import { defineComponent, onBeforeMount, computed, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createVNode } from "vue";
 import { MazNoImage } from "@maz-ui/icons";
 import { d as directive } from "../chunks/lazy-img.directive.BLFnGqQa.js";
-import { d as directive$1 } from "../chunks/fullscreen-img.directive.Be383en8.js";
+import { d as directive$1 } from "../chunks/fullscreen-img.directive.D9oQ3Gni.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazGallery.DZ3TyggM.css';const _hoisted_1 = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, _hoisted_2 = ["alt"], _hoisted_3 = {
+import '../assets/MazGallery.BTNB3D6k.css';const _hoisted_1 = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, _hoisted_2 = ["alt"], _hoisted_3 = {
   key: 0,
   class: "m-gallery__remaining-layer"
 }, _sfc_main = /* @__PURE__ */ defineComponent({
@@ -85,7 +85,7 @@ import '../assets/MazGallery.DZ3TyggM.css';const _hoisted_1 = { class: "m-galler
         ], 2))), 128)),
         _ctx.hasEmptyLayer && _ctx.images.length === 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass(["empty-layer maz-flex maz-w-full maz-bg-surface-400 maz-text-foreground maz-flex-center", { "maz-rounded-xl": _ctx.radius }]),
+          class: normalizeClass(["m-gallery__empty-layer", { "maz-rounded-xl": _ctx.radius }]),
           style: normalizeStyle([sizeStyle.value])
         }, [
           createVNode(unref(MazNoImage), { class: "maz-size-8" })
@@ -99,7 +99,7 @@ import '../assets/MazGallery.DZ3TyggM.css';const _hoisted_1 = { class: "m-galler
       ])), 128))
     ], 6)) : createCommentVNode("", !0);
   }
-}), MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3cff3c84"]]);
+}), MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e5e0c058"]]);
 export {
   MazGallery as default
 };

package/dist/components/MazGallery.vue.d.ts

@@ -0,0 +1,85 @@
+export type MazGalleryImage = {
+    thumbnail?: string;
+    src: string;
+    alt?: string;
+} | string;
+export interface MazGalleryProps {
+    /**
+     *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
+     */
+    images?: MazGalleryImage[];
+    /**
+     * Images count shown (max: 5)
+     * @type number
+     * @default 5
+     */
+    displayedCount?: number;
+    /**
+     * Remove transparent layer with the remain count (ex: +2)
+     * @type boolean
+     * @default true
+     */
+    remaining?: boolean;
+    /**
+     * Height of gallery - set to `false` to remove default height
+     * @type number | string | false
+     * @default 150
+     */
+    height?: number | string | false;
+    /**
+     * Width of gallery - set to `false` to remove default width
+     * @type number | string | false
+     * @default '100%'
+     */
+    width?: number | string | false;
+    /**
+     * Disable the border radius of the gallery
+     * @type boolean
+     * @default false
+     */
+    radius?: boolean;
+    /**
+     * Disable full size display when clicking on image
+     * @type boolean
+     * @default false
+     */
+    zoom?: boolean;
+    /**
+     * Layer with photography icon when no images is provided
+     * @type boolean
+     * @default true
+     */
+    hasEmptyLayer?: boolean;
+    /**
+     * Lazy load image - if false, images are directly loaded
+     * @type boolean
+     * @default true
+     */
+    lazy?: boolean;
+    /**
+     * Disable blur effect on image hover
+     * @type boolean
+     * @default true
+     */
+    blur?: boolean;
+    /**
+     * Disable scale animation effect on image hover
+     * @type boolean
+     * @default true
+     */
+    scale?: boolean;
+    /**
+     * Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`
+     * @type string
+     * @default 'transparent'
+     */
+    separatorColor?: string;
+    /**
+     * Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`
+     * @type string
+     * @default 'hsl(var(--maz-background-300))'
+     */
+    backgroundColor?: string;
+}
+declare const _default: import('vue').DefineComponent<MazGalleryProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazGalleryProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/MazIcon.vue.d.ts

@@ -0,0 +1,26 @@
+export interface MazIconProps {
+    /** The source path of the SVG file - e.g: `/icons/home.svg` */
+    src?: string;
+    /** The path of the folder where the SVG files are stored - e.g: `/icons` */
+    path?: string;
+    /** The name of the SVG file - e.g: `home` */
+    name?: string;
+    /** The size of the SVG file - e.g: `1em` */
+    size?: string;
+    /** The title of the SVG file - e.g: `Home` */
+    title?: string;
+    /** The function to transform the source of the SVG file - e.g: `(svg) => svg` */
+    transformSource?: (svg: SVGElement) => SVGElement;
+}
+declare const _default: import('vue').DefineComponent<MazIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    error: (error: Error) => any;
+    loaded: (svg: SVGElement | undefined) => any;
+    unloaded: () => any;
+}, string, import('vue').PublicProps, Readonly<MazIconProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    onLoaded?: ((svg: SVGElement | undefined) => any) | undefined;
+    onUnloaded?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    svgElem: SVGSVGElement;
+}, any>;
+export default _default;

package/dist/components/MazInput.js

@@ -1,9 +1,9 @@
 import { defineComponent, defineAsyncComponent, ref, onMounted, computed, useSlots, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withDirectives, mergeProps, toHandlers, vModelDynamic, withModifiers, withCtx, createVNode } from "vue";
 import { MazEyeSlash, MazEye } from "@maz-ui/icons";
-import { d as debounce } from "../chunks/debounce.Brzkn9pm.js";
+import { i } from "../chunks/debounce.DhXdop6X.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazInput.BcUsJg7p.css';const _hoisted_1 = ["for"], _hoisted_2 = {
+import '../assets/MazInput.BvuxfP9k.css';const _hoisted_1 = ["for"], _hoisted_2 = {
   key: 0,
   class: "m-input-wrapper-left"
 }, _hoisted_3 = ["id", "placeholder", "aria-label", "type", "inputmode", "name", "autocomplete", "disabled", "readonly", "required"], _hoisted_4 = {
@@ -82,7 +82,7 @@ import '../assets/MazInput.BcUsJg7p.css';const _hoisted_1 = ["for"], _hoisted_2
         }
         return "--default-border";
       }
-    }), slots = useSlots(), debounceEmitValue = debounce(
+    }), slots = useSlots(), debounceEmitValue = i(
       (value) => {
         emits("update:model-value", value);
       },
@@ -243,7 +243,7 @@ import '../assets/MazInput.BcUsJg7p.css';const _hoisted_1 = ["for"], _hoisted_2
       }, toDisplayString(_ctx.assistiveText), 3)) : createCommentVNode("", !0)
     ], 6));
   }
-}), MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0e063a62"]]);
+}), MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ab08265"]]);
 export {
   MazInput as default
 };

package/dist/components/MazInput.vue.d.ts

@@ -0,0 +1,225 @@
+import { IconComponent } from '@maz-ui/icons';
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import { MazColor, MazSize } from './types';
+export type MazInputValue = string | number | null | undefined | boolean;
+export interface MazInputProps<T = MazInputValue> {
+    /**
+     * Inline styles to apply to the component root element
+     * @type {HTMLAttributes['style']}
+     */
+    style?: HTMLAttributes['style'];
+    /**
+     * CSS classes to apply to the component root element
+     * @type {HTMLAttributes['class']}
+     */
+    class?: HTMLAttributes['class'];
+    /**
+     * The current value of the input field. This prop is used for two-way data binding with v-model
+     * @model
+     * @type {T}
+     * @example <MazInput v-model="inputValue" />
+     */
+    modelValue?: T | undefined;
+    /**
+     * Text displayed when the input is empty to guide the user
+     * @type {string}
+     * @example "Enter your email address"
+     */
+    placeholder?: InputHTMLAttributes['placeholder'];
+    /**
+     * Floating label that appears inside the input and moves up when focused or filled.
+     * Provides better UX than traditional placeholders
+     * @type {string}
+     * @example "Email Address"
+     */
+    label?: string;
+    /**
+     * Static label displayed above the input field. Unlike the floating label, this remains fixed
+     * @type {string}
+     * @example "User Information"
+     */
+    topLabel?: string;
+    /**
+     * Helper text displayed below the input to provide additional context or validation feedback
+     * @type {string}
+     * @example "Must contain at least 8 characters"
+     */
+    assistiveText?: string;
+    /**
+     * Theme color that affects the border and focus states of the input
+     * @values primary, secondary, accent, info, success, warning, destructive, contrast
+     * @type {MazColor}
+     * @example "primary"
+     */
+    color?: MazColor;
+    /**
+     * HTML input type attribute that determines the input behavior and validation
+     * @type {InputHTMLAttributes['type']}
+     * @values text, password, email, number, tel, url, search, date, time, datetime-local, month, week
+     * @example "email"
+     */
+    type?: InputHTMLAttributes['type'];
+    /**
+     * Makes the input field mandatory for form submission
+     * @type {boolean}
+     * @example true
+     */
+    required?: boolean;
+    /**
+     * Disables the input field, preventing user interaction and form submission
+     * @type {boolean}
+     * @example false
+     */
+    disabled?: boolean;
+    /**
+     * Makes the input field read-only, allowing selection but preventing modification
+     * @type {boolean}
+     * @example false
+     */
+    readonly?: boolean;
+    /**
+     * Unique identifier for the input element, used for form labels and accessibility
+     * @type {string}
+     * @example "user-email"
+     */
+    id?: string;
+    /**
+     * Applies error styling (red border and text) to indicate validation failure
+     * @type {boolean}
+     * @example true
+     */
+    error?: boolean;
+    /**
+     * Applies success styling (green border and text) to indicate successful validation
+     * @type {boolean}
+     * @example true
+     */
+    success?: boolean;
+    /**
+     * Applies warning styling (orange border and text) to indicate potential issues
+     * @type {boolean}
+     * @example true
+     */
+    warning?: boolean;
+    /**
+     * Alternative text that replaces the label when provided. Useful for contextual hints
+     * @type {string}
+     * @example "Optional field"
+     */
+    hint?: string;
+    /**
+     * Additional CSS classes to apply specifically to the input wrapper element
+     * @type {string}
+     * @example "custom-input-wrapper"
+     */
+    inputClasses?: string;
+    /**
+     * Controls whether the input has a visible border. Set to false for borderless inputs
+     * @type {boolean}
+     * @example true
+     */
+    border?: boolean;
+    /**
+     * HTML inputmode attribute that provides hints for virtual keyboards on mobile devices
+     * @type {InputHTMLAttributes['inputmode']}
+     * @values text, numeric, decimal, tel, search, email, url
+     * @example "numeric"
+     */
+    inputmode?: InputHTMLAttributes['inputmode'];
+    /**
+     * Controls the height and text size of the input component
+     * @values xs, sm, md, lg, xl, mini
+     * @type {MazSize}
+     * @example "md"
+     */
+    size?: MazSize;
+    /**
+     * Enables input debouncing to limit the frequency of value updates.
+     * When true, uses 500ms delay. When a number, uses that value as delay in milliseconds
+     * @type {boolean | number}
+     * @example true
+     * @example 300
+     */
+    debounce?: boolean | number;
+    /**
+     * Automatically focuses the input when the component mounts
+     * @type {boolean}
+     * @example false
+     */
+    autoFocus?: boolean;
+    /**
+     * When true, shows the colored border immediately instead of only on focus
+     * @type {boolean}
+     * @example false
+     */
+    borderActive?: boolean;
+    /**
+     * Icon displayed on the left side of the input. Can be an icon name string or icon component
+     * @type {string | IconComponent}
+     * @example "user"
+     * @example UserIcon
+     */
+    leftIcon?: string | IconComponent;
+    /**
+     * Icon displayed on the right side of the input. Can be an icon name string or icon component
+     * @type {string | IconComponent}
+     * @example "search"
+     * @example SearchIcon
+     */
+    rightIcon?: string | IconComponent;
+    /**
+     * Controls the border radius of the input component
+     * @values none, sm, md, lg, xl, full
+     * @type {'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'}
+     * @example "lg"
+     */
+    roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * Makes the input expand to the full width of its container
+     * @type {boolean}
+     * @example false
+     */
+    block?: boolean;
+    /**
+     * The name of the input field. Used for form submission and validation
+     * @type {string}
+     * @example "email"
+     */
+    name?: string;
+    /**
+     * The autocomplete attribute for the input field. Used for form submission and validation
+     * @type {string}
+     * @example "email"
+     */
+    autocomplete?: string;
+    /**
+     * Loading state for the input field. Used to show a loading spinner
+     * @note Spinner can be replace with the `loader` slot
+     * @default false
+     */
+    loading?: boolean;
+}
+declare const _default: <T extends MazInputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: Event) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly onClick?: ((event: Event) => any) | undefined;
+        readonly onFocus?: ((event: Event) => any) | undefined;
+        readonly onInput?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClick" | "onUpdate:model-value"> & MazInputProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        'left-icon'?(_: {}): any;
+        'right-icon'?(_: {}): any;
+        loader?(_: {}): any;
+    };
+    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "click", event: Event) => void) & ((evt: "focus", event: Event) => void) & ((evt: "input", event: Event) => void) & ((evt: "update:model-value", value?: T | undefined) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MazInputCode.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, watch, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, mergeProps, toDisplayString } from "vue";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazInputCode.CG6EJBEk.css';const _hoisted_1 = ["disabled"], _hoisted_2 = { class: "m-input-code__wrapper" }, _hoisted_3 = ["id", "name", "inputmode", "pattern", "required", "value", "onInput", "onKeydown", "onClick"], _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazInputCode.BYi64Mof.css';const _hoisted_1 = ["disabled"], _hoisted_2 = { class: "m-input-code__wrapper" }, _hoisted_3 = ["id", "name", "inputmode", "pattern", "required", "value", "onInput", "onKeydown", "onClick"], _sfc_main = /* @__PURE__ */ defineComponent({
   inheritAttrs: !1,
   __name: "MazInputCode",
   props: {
@@ -145,7 +145,7 @@ import '../assets/MazInputCode.CG6EJBEk.css';const _hoisted_1 = ["disabled"], _h
       }, toDisplayString(_ctx.hint), 3)
     ], 14, _hoisted_1));
   }
-}), MazInputCode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-223cfa32"]]);
+}), MazInputCode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8599f1e6"]]);
 export {
   MazInputCode as default
 };

package/dist/components/MazInputCode.vue.d.ts

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from 'vue';
+import { MazColor } from './types';
+export type MazInputCodeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface MazInputCodeProps<T = string | number> {
+    /** The style of the component. */
+    style?: HTMLAttributes['style'];
+    /** The class of the component. */
+    class?: HTMLAttributes['class'];
+    /** The value of the component (v-model). */
+    modelValue?: T;
+    /** The length of the code. */
+    codeLength?: number;
+    /** The type of the input field. */
+    type?: 'text' | 'number';
+    /** Whether to accept alpha characters. */
+    acceptAlpha?: boolean;
+    /** Whether the input is required. */
+    required?: boolean;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** Whether there is an error with the input. */
+    error?: boolean;
+    /** Whether the input is successful. */
+    success?: boolean;
+    /** Whether there is a warning with the input. */
+    warning?: boolean;
+    /** The size of the component. */
+    size?: MazInputCodeSize;
+    /** The color of the component. */
+    color?: MazColor;
+    /** The hint text to display below the input. */
+    hint?: string;
+}
+declare const _default: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
+        readonly onCompleted?: ((value?: void | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value" | "onCompleted"> & MazInputCodeProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "update:model-value", value?: T | undefined) => void) & ((evt: "completed", value: void) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MazInputNumber.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/MazInputNumber.vue_vue_type_style_index_0_lang.B6DYpHfi.js";
+import { _ as _sfc_main } from "../chunks/MazInputNumber.vue_vue_type_style_index_0_lang.B0D4Zzds.js";
 export {
   _sfc_main as default
 };

package/dist/components/MazInputNumber.vue.d.ts

@@ -0,0 +1,125 @@
+import { HTMLAttributes } from 'vue';
+import { MazInputProps } from './MazInput.vue';
+import { MazSize } from './types';
+export interface MazInputNumberProps {
+    /**
+     * The inline style object for the component.
+     * @type {HTMLAttributes['style']}
+     */
+    style?: HTMLAttributes['style'];
+    /**
+     * The CSS class name for the component.
+     * @type {HTMLAttributes['class']}
+     */
+    class?: HTMLAttributes['class'];
+    /**
+     * The value of the component (v-model).
+     * @model
+     * @type {number}
+     */
+    modelValue?: number;
+    /**
+     * Whether the input number is disabled or not.
+     * @type {boolean}
+     */
+    disabled?: boolean;
+    /**
+     * The maximum value allowed for the input number.
+     * @type {number}
+     * @default Number.POSITIVE_INFINITY
+     */
+    max?: number;
+    /**
+     * The minimum value allowed for the input number.
+     * @type {number}
+     * @default Number.NEGATIVE_INFINITY
+     */
+    min?: number;
+    /**
+     * The step value for incrementing or decrementing the input number.
+     * @type {number}
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The size of the input number component.
+     * @type {MazSize}
+     * @default 'md'
+     */
+    size?: MazSize;
+    /**
+     * Whether to hide the increment and decrement buttons or not.
+     * @type {boolean}
+     * @default false
+     */
+    hideButtons?: boolean;
+    /**
+     * Whether to center the text inside the input or not.
+     * @type {boolean}
+     * @default true
+     */
+    textCenter?: boolean;
+    /**
+     * The inputmode attribute for the input.
+     * @type {HTMLAttributes['inputmode']}
+     */
+    inputmode?: HTMLAttributes['inputmode'];
+    /**
+     * The input will be displayed in full width
+     * @type {boolean}
+     */
+    block?: boolean;
+    /**
+     * Will display the input in error state.
+     * @type {boolean}
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * The hint text to display below the input.
+     * @type {string}
+     */
+    hint?: string;
+    /**
+     * Will display the input in success state.
+     * @type {boolean}
+     * @default false
+     */
+    success?: boolean;
+    /**
+     * Will display the input in warning state.
+     * @type {boolean}
+     * @default false
+     */
+    warning?: boolean;
+    /**
+     * The props for the input component.
+     * @type {MazInputProps}
+     */
+    inputProps?: MazInputProps;
+}
+declare const _default: import('vue').DefineComponent<MazInputNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (value: Event) => any;
+    change: (value: Event) => any;
+    click: (value: Event) => any;
+    focus: (value: Event) => any;
+    "update:model-value": (value?: number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<MazInputNumberProps> & Readonly<{
+    onBlur?: ((value: Event) => any) | undefined;
+    onChange?: ((value: Event) => any) | undefined;
+    onClick?: ((value: Event) => any) | undefined;
+    onFocus?: ((value: Event) => any) | undefined;
+    "onUpdate:model-value"?: ((value?: number | undefined) => any) | undefined;
+}>, {
+    size: MazSize;
+    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
+    class: HTMLAttributes["class"];
+    disabled: boolean;
+    max: number;
+    min: number;
+    modelValue: number;
+    step: number;
+    inputmode: "search" | "text" | "none" | "decimal" | "email" | "url" | "tel" | "numeric";
+    textCenter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/MazInputPhoneNumber/PhoneInput.vue.d.ts

@@ -0,0 +1,29 @@
+import { MazInputProps } from '../MazInput.vue';
+type PhoneInputProps = Omit<MazInputProps, 'modelValue'> & {
+    id: string;
+    locales: {
+        placeholder: string;
+        example: string | undefined;
+    };
+    example: boolean;
+    hasRadius: boolean;
+    autoFormat: 'blur' | 'typing' | 'disabled' | false;
+};
+type __VLS_Props = PhoneInputProps;
+type __VLS_PublicProps = {
+    modelValue?: string | undefined | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    /**
+     * Focus the input
+     * @description This is used to focus the input
+     */
+    focus: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    input: import('vue').ShallowUnwrapRef<{}> | null;
+}, any>;
+export default _default;

package/dist/components/MazInputPhoneNumber/useLibphonenumber.d.ts

@@ -0,0 +1,26 @@
+import { CountryCode, Examples, getCountries, getCountryCallingCode } from 'libphonenumber-js';
+import { MazInputPhoneNumberData } from '../MazInputPhoneNumber.vue';
+declare function isCountryAvailable(locale: string): boolean;
+declare function getPhoneNumberResults({ phoneNumber, countryCode, checkCountryCode, }: {
+    phoneNumber?: string | undefined | null;
+    countryCode?: CountryCode | undefined | null;
+    checkCountryCode?: boolean;
+}): MazInputPhoneNumberData;
+declare function getPhoneNumberExamplesFile(): Promise<Examples>;
+declare function getPhoneNumberExample(countryCode?: CountryCode | undefined | null): string | undefined;
+declare function getAsYouTypeFormat(countryCode?: CountryCode | undefined | null, phoneNumber?: string | undefined | null): string | undefined | null;
+declare function isSameCountryCallingCode(countryCode: CountryCode, countryCode2: CountryCode): boolean;
+declare function loadExamples(): Promise<void>;
+export declare function useLibphonenumber(): {
+    examples: import('vue').Ref<Examples | undefined, Examples | undefined>;
+    getAsYouTypeFormat: typeof getAsYouTypeFormat;
+    getPhoneNumberResults: typeof getPhoneNumberResults;
+    getPhoneNumberExamplesFile: typeof getPhoneNumberExamplesFile;
+    getPhoneNumberExample: typeof getPhoneNumberExample;
+    isSameCountryCallingCode: typeof isSameCountryCallingCode;
+    isCountryAvailable: typeof isCountryAvailable;
+    getCountries: typeof getCountries;
+    getCountryCallingCode: typeof getCountryCallingCode;
+    loadExamples: typeof loadExamples;
+};
+export {};