@mantine-vue/core 3.0.0 → 3.2.0

package/lib/components/PasswordInput/PasswordInput.d.ts

@@ -1,365 +1,41 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type MantineNode, type MantineRadius, type MantineSize } from '../../core';
-export interface PasswordInputSlots {
-    label?: () => VNodeChild;
-    description?: () => VNodeChild;
-    error?: () => VNodeChild;
-    leftSection?: () => VNodeChild;
-    rightSection?: () => VNodeChild;
-    /** Custom visibility toggle icon, alternative to the `visibilityToggleIcon` prop */
-    visibilityToggleIcon?: (payload: {
-        reveal: boolean;
-    }) => VNodeChild;
-}
-export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput' | 'input' | 'wrapper' | 'section' | 'bottomSection' | 'label' | 'required' | 'description' | 'error';
-export declare const PasswordInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    visibilityToggleIcon: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    visibilityToggleButtonProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    visible: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultVisible: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onVisibilityChange: {
-        type: PropType<(visible: boolean) => void>;
-        default: undefined;
-    };
-    label: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    description: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    error: {
-        type: PropType<MantineNode | boolean>;
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withAsterisk: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    labelProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    descriptionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    errorProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    inputContainer: {
-        type: PropType<(children: any) => any>;
-        default: undefined;
-    };
-    inputWrapperOrder: {
-        type: PropType<Array<"label" | "input" | "description" | "error">>;
-        default: undefined;
-    };
-    wrapperProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    size: {
-        type: PropType<MantineSize | (string & {}) | number>;
-        default: string;
-    };
-    variant: {
-        type: PropType<"default" | "filled" | "unstyled">;
-        default: string;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    leftSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    leftSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    leftSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    leftSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    rightSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    rightSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    rightSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rightSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    withErrorStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    visibilityToggleIcon: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    visibilityToggleButtonProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    visible: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultVisible: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onVisibilityChange: {
-        type: PropType<(visible: boolean) => void>;
-        default: undefined;
-    };
-    label: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    description: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    error: {
-        type: PropType<MantineNode | boolean>;
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withAsterisk: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    labelProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    descriptionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    errorProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    inputContainer: {
-        type: PropType<(children: any) => any>;
-        default: undefined;
-    };
-    inputWrapperOrder: {
-        type: PropType<Array<"label" | "input" | "description" | "error">>;
-        default: undefined;
-    };
-    wrapperProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    size: {
-        type: PropType<MantineSize | (string & {}) | number>;
-        default: string;
-    };
-    variant: {
-        type: PropType<"default" | "filled" | "unstyled">;
-        default: string;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    leftSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    leftSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    leftSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    leftSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    rightSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    rightSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    rightSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rightSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    withErrorStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: number | MantineSize | (string & {});
-    label: MantineNode;
-    radius: MantineRadius;
-    variant: "default" | "filled" | "unstyled";
-    error: MantineNode;
-    onChange: (value: string) => void;
-    value: string;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    required: boolean;
-    description: MantineNode;
-    visible: boolean;
-    disabled: boolean;
-    defaultValue: string;
-    id: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    modelValue: string;
-    leftSection: MantineNode;
-    rightSection: MantineNode;
-    withAsterisk: boolean;
-    labelProps: Record<string, any>;
-    descriptionProps: Record<string, any>;
-    errorProps: Record<string, any>;
-    inputContainer: (children: any) => any;
-    inputWrapperOrder: ("input" | "label" | "error" | "description")[];
-    leftSectionWidth: string | number;
-    leftSectionProps: Record<string, any>;
-    leftSectionPointerEvents: string;
-    rightSectionWidth: string | number;
-    rightSectionProps: Record<string, any>;
-    rightSectionPointerEvents: string;
-    withErrorStyles: boolean;
-    wrapperProps: Record<string, any>;
-    visibilityToggleIcon: any;
-    visibilityToggleButtonProps: Record<string, any>;
-    defaultVisible: boolean;
-    onVisibilityChange: (visible: boolean) => void;
-}, SlotsType<PasswordInputSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const PasswordInput: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./PasswordInput.types").PasswordInputOwnProps> & Readonly<{
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: string) => any;
+        "update:modelValue": (value: string) => any;
+        "update:visible": (visible: boolean) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./PasswordInput.types").PasswordInputOwnProps> & Readonly<{
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./PasswordInput.types").PasswordInputOwnProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./PasswordInput.types").PasswordInputSlots;
+}) & {
+    classes: {
+        [x: string]: string;
+    };
+    varsResolver: (theme: import("../../index.js").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+};
+export type { PasswordInputCssVariables, PasswordInputOwnProps, PasswordInputProps, PasswordInputSlots, PasswordInputStylesNames, PasswordInputToggleIconSlotProps, } from './PasswordInput.types';

package/lib/components/PasswordInput/PasswordInput.types.d.ts

@@ -0,0 +1,150 @@
+import type { Component, VNodeChild } from 'vue';
+import type { BoxProps, MantineNode, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput' | 'input' | 'wrapper' | 'section' | 'bottomSection' | 'label' | 'required' | 'description' | 'error';
+export type PasswordInputCssVariables = {
+    root: '--psi-icon-size' | '--psi-button-size';
+};
+export interface PasswordInputToggleIconSlotProps {
+    /** Whether the password is currently visible. */
+    reveal: boolean;
+}
+export interface PasswordInputSlots {
+    /** Input label. Takes precedence over the `label` prop. */
+    label?: () => VNodeChild;
+    /** Description rendered below the label. Takes precedence over the `description` prop. */
+    description?: () => VNodeChild;
+    /** Error message rendered below the input. Takes precedence over the `error` prop. */
+    error?: () => VNodeChild;
+    /** Content rendered on the left side of the input. */
+    leftSection?: () => VNodeChild;
+    /** Content rendered on the right side, replacing the visibility toggle. */
+    rightSection?: () => VNodeChild;
+    /** Icon of the visibility toggle. Receives the current `reveal` state. */
+    visibilityToggleIcon?: (props: PasswordInputToggleIconSlotProps) => VNodeChild;
+}
+/**
+ * Props declared by `PasswordInput` itself.
+ * See `PasswordInputProps` for the full public type.
+ *
+ * The Styles API payload is left open because the resolved props are forwarded to
+ * `Input` and `Input.Wrapper` as `__stylesApiProps`.
+ */
+export interface PasswordInputOwnProps extends StylesApiProps {
+    /** Controlled value, bound with `v-model`. */
+    modelValue?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    /**
+     * Component rendered as the visibility toggle icon. Receives `reveal`.
+     * Can also be set with the `visibilityToggleIcon` slot – the slot takes precedence.
+     */
+    visibilityToggleIcon?: Component;
+    /** Props passed down to the visibility toggle `ActionIcon`. */
+    visibilityToggleButtonProps?: Record<string, any>;
+    /** Controlled visibility state of the password. Bound with `v-model:visible`. */
+    visible?: boolean;
+    /** Uncontrolled initial visibility state. */
+    defaultVisible?: boolean;
+    /**
+     * Input label.
+     * Can also be set with the `label` slot – the slot takes precedence over the prop.
+     */
+    label?: MantineNode;
+    /**
+     * Description rendered below the label.
+     * Can also be set with the `description` slot – the slot takes precedence over the prop.
+     */
+    description?: MantineNode;
+    /**
+     * Error message rendered below the input. `true` applies error styles without a message.
+     * Can also be set with the `error` slot – the slot takes precedence over the prop.
+     */
+    error?: MantineNode | boolean;
+    /**
+     * Adds the required attribute to the input and a red asterisk to the label.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Adds the red asterisk to the label without setting the input `required` attribute.
+     * Inherits `required` when not set.
+     */
+    withAsterisk?: boolean;
+    /** Props passed down to the `Input.Label` component. */
+    labelProps?: Record<string, any>;
+    /** Props passed down to the `Input.Description` component. */
+    descriptionProps?: Record<string, any>;
+    /** Props passed down to the `Input.Error` component. */
+    errorProps?: Record<string, any>;
+    /** Function that renders the input around the given children. */
+    inputContainer?: (children: any) => any;
+    /**
+     * Order of the elements inside the wrapper.
+     *
+     * @default ['label', 'description', 'input', 'error']
+     */
+    inputWrapperOrder?: Array<'label' | 'input' | 'description' | 'error'>;
+    /** Props passed down to the root element (`Input.Wrapper` component). */
+    wrapperProps?: Record<string, any>;
+    /** `id` shared by the input, label, description and error elements. Generated when not set. */
+    id?: string;
+    /**
+     * Controls input height and horizontal padding.
+     *
+     * @default 'sm'
+     */
+    size?: MantineSize | (string & {}) | number;
+    /**
+     * Controls the visual representation of the input.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'filled' | 'unstyled';
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`.
+     *
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /**
+     * Sets the `disabled` attribute on the input and the toggle.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Content rendered on the left side of the input.
+     * Can also be set with the `leftSection` slot.
+     */
+    leftSection?: MantineNode;
+    /** Width of the left section. */
+    leftSectionWidth?: string | number;
+    /** Props passed down to the left section element. */
+    leftSectionProps?: Record<string, any>;
+    /** Sets `pointer-events` on the left section. */
+    leftSectionPointerEvents?: string;
+    /**
+     * Content rendered on the right side of the input. Replaces the visibility toggle.
+     * Can also be set with the `rightSection` slot.
+     */
+    rightSection?: MantineNode;
+    /** Width of the right section. */
+    rightSectionWidth?: string | number;
+    /** Props passed down to the right section element. */
+    rightSectionProps?: Record<string, any>;
+    /**
+     * Sets `pointer-events` on the right section.
+     *
+     * @default 'all'
+     */
+    rightSectionPointerEvents?: string;
+    /**
+     * If set, error styles are applied to the input when `error` is set.
+     *
+     * @default true
+     */
+    withErrorStyles?: boolean;
+}
+export interface PasswordInputProps extends Omit<BoxProps, keyof PasswordInputOwnProps>, PasswordInputOwnProps {
+}

package/lib/components/PasswordInput/PasswordInput.vue.d.ts

@@ -0,0 +1,27 @@
+import type { PasswordInputOwnProps, PasswordInputSlots } from './PasswordInput.types';
+declare const mergedClasses: {
+    [x: string]: string;
+};
+/** Module scope: created once, not per component instance. */
+declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+declare const defaultProps: {
+    readonly variant: "default";
+    readonly size: "sm";
+};
+export { mergedClasses, varsResolver, defaultProps };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PasswordInputOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PasswordInputOwnProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PasswordInputSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/PasswordInput/PasswordToggleIcon.d.ts

@@ -1,15 +1,3 @@
-export declare const PasswordToggleIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    reveal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    reveal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    reveal: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Default eye icon of the `PasswordInput` visibility toggle. */
+export declare const PasswordToggleIcon: import("vue").DefineComponent<import("./PasswordToggleIcon.types").PasswordToggleIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./PasswordToggleIcon.types").PasswordToggleIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export type { PasswordToggleIconProps } from './PasswordToggleIcon.types';

package/lib/components/PasswordInput/PasswordToggleIcon.types.d.ts

@@ -0,0 +1,9 @@
+/** Props declared by `PasswordToggleIcon` itself. */
+export interface PasswordToggleIconProps {
+    /**
+     * If set, the "hide password" icon is rendered instead of the "show password" one.
+     *
+     * @default false
+     */
+    reveal?: boolean;
+}

package/lib/components/PasswordInput/PasswordToggleIcon.vue.d.ts

@@ -0,0 +1,4 @@
+import type { PasswordToggleIconProps } from './PasswordToggleIcon.types';
+declare const __VLS_export: import("vue").DefineComponent<PasswordToggleIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PasswordToggleIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/components/PasswordInput/index.d.ts

@@ -1,3 +1,4 @@
 export { PasswordInput } from './PasswordInput';
-export type { PasswordInputSlots, PasswordInputStylesNames } from './PasswordInput';
+export type { PasswordInputCssVariables, PasswordInputOwnProps, PasswordInputProps, PasswordInputSlots, PasswordInputStylesNames, PasswordInputToggleIconSlotProps, } from './PasswordInput';
 export { PasswordToggleIcon } from './PasswordToggleIcon';
+export type { PasswordToggleIconProps } from './PasswordToggleIcon';