maz-ui 4.1.8-beta.1 → 4.1.8-beta.2

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

@@ -0,0 +1,33 @@
+import { IconComponent } from '@maz-ui/icons';
+declare const predefinedSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+type SizeUnit = `${number}px` | `${number}em` | `${number}rem` | `${number}%` | `${number}vw` | `${number}vh` | `${number}cm` | `${number}mm` | `${number}in` | `${number}pt` | `${number}pc` | `${number}ex`;
+type PredefinedSize = typeof predefinedSizes[number];
+type MazIconSize = SizeUnit | PredefinedSize;
+export interface MazIconProps {
+    /** The icon component to render - e.g: `import { MazStar } from '@maz-ui/icons'` */
+    icon?: IconComponent;
+    /** 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` or can be a predefined size: `'xs' | 'sm' | 'md' | 'lg' | 'xl'` */
+    size?: MazIconSize;
+    /** 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.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.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.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 {};

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

@@ -0,0 +1,26 @@
+import { CountryCode } from 'libphonenumber-js';
+export interface CountryOption {
+    code: CountryCode;
+    dialCode: string;
+    name: string;
+}
+declare function getBrowserLocale(): {
+    locale: string;
+    browserLocale: string;
+} | undefined;
+declare function getCountryList(locale?: string, customCountriesNameListByIsoCode?: Record<CountryCode, string>): CountryOption[] | undefined;
+declare function fetchCountryCode(): Promise<{
+    data: CountryCode;
+    error: undefined;
+} | {
+    data: undefined;
+    error: Error;
+}>;
+declare function sanitizePhoneNumber(input?: string | undefined | null): string;
+export declare function useMazInputPhoneNumber(): {
+    fetchCountryCode: typeof fetchCountryCode;
+    getBrowserLocale: typeof getBrowserLocale;
+    getCountryList: typeof getCountryList;
+    sanitizePhoneNumber: typeof sanitizePhoneNumber;
+};
+export {};