@mantine-vue/core 3.0.0 → 3.2.0

package/lib/components/ThemeIcon/ThemeIcon.d.ts

@@ -1,85 +1,10 @@
-import { type PropType } from 'vue';
-import { type MantineColor, type MantineGradient, type MantineRadius, type MantineSize, type MantineVariant } from '../../core';
-export type ThemeIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'default' | 'gradient';
-export declare const ThemeIcon: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    size: PropType<MantineSize | (string & {}) | number>;
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: PropType<MantineRadius>;
-    gradient: {
-        type: PropType<MantineGradient>;
-        default: undefined;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    variant: {
-        type: PropType<MantineVariant<ThemeIconVariant>>;
-        default: undefined;
-    };
-    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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: PropType<MantineSize | (string & {}) | number>;
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: PropType<MantineRadius>;
-    gradient: {
-        type: PropType<MantineGradient>;
-        default: undefined;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    variant: {
-        type: PropType<MantineVariant<ThemeIconVariant>>;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    color: MantineColor;
-    autoContrast: boolean;
-    variant: MantineVariant<ThemeIconVariant>;
-    gradient: MantineGradient;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const ThemeIcon: import("../..").MantineComponent<{
+    props: Omit<import("./ThemeIcon.types").ThemeIconProps, "rootRef">;
+    ref: HTMLDivElement;
+    slots: import("./ThemeIcon.types").ThemeIconSlots;
+    element: "div";
+    stylesNames: import("./ThemeIcon.types").ThemeIconStylesNames;
+    vars: import("./ThemeIcon.types").ThemeIconCssVariables;
+    variant: import("./ThemeIcon.types").ThemeIconVariant;
+}>;
+export type { ThemeIconCssVariables, ThemeIconFactory, ThemeIconOwnProps, ThemeIconProps, ThemeIconSlots, ThemeIconStylesNames, ThemeIconVariant, } from './ThemeIcon.types';

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

@@ -0,0 +1,59 @@
+import type { VNodeChild } from 'vue';
+import type { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, MantineVariant, StylesApiProps, Factory } from '../../core';
+export type ThemeIconStylesNames = 'root';
+export type ThemeIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'default' | 'gradient';
+export type ThemeIconCssVariables = {
+    root: '--ti-size' | '--ti-radius' | '--ti-bg' | '--ti-color' | '--ti-bd';
+};
+export interface ThemeIconSlots {
+    /** Icon displayed inside the component. */
+    default?: () => VNodeChild;
+}
+/** Props declared by `ThemeIcon` itself. See `ThemeIconProps` for the full public type. */
+export interface ThemeIconOwnProps extends StylesApiProps<ThemeIconFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Controls width and height of the component. Numbers are converted to rem.
+     * @default 'md'
+     */
+    size?: MantineSize | (string & {}) | number;
+    /**
+     * Key of `theme.colors` or any valid CSS color.
+     * @default theme.primaryColor
+     */
+    color?: MantineColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set border-radius.
+     * Numbers are converted to rem.
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /**
+     * Gradient data used when `variant="gradient"`.
+     * @default theme.defaultGradient
+     */
+    gradient?: MantineGradient;
+    /**
+     * If set, adjusts text color based on background color for `filled` variant.
+     * Inherits `theme.autoContrast` when not set.
+     */
+    autoContrast?: boolean;
+    /**
+     * Controls visual representation of the component.
+     * @default 'filled'
+     */
+    variant?: MantineVariant<ThemeIconVariant>;
+}
+export interface ThemeIconProps extends Omit<BoxProps, keyof ThemeIconOwnProps>, ThemeIconOwnProps {
+}
+export type ThemeIconFactory = Factory<{
+    props: Omit<ThemeIconProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    slots: ThemeIconSlots;
+    element: 'div';
+    stylesNames: ThemeIconStylesNames;
+    vars: ThemeIconCssVariables;
+    variant: ThemeIconVariant;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -0,0 +1,14 @@
+import type { ThemeIconOwnProps, ThemeIconSlots } from './ThemeIcon.types';
+/** 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>>;
+export { varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeIconOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeIconOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ThemeIconSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Timeline/Timeline.context.d.ts

@@ -2,7 +2,7 @@ export interface TimelineContextValue {
     getStyles: (selector: string, options?: {
         className?: any;
         style?: any;
-        props?: any;
+        props?: Record<string, unknown>;
     }) => any;
 }
 export declare const provideTimelineContext: (value: TimelineContextValue) => void, useTimelineContext: () => TimelineContextValue;

package/lib/components/Timeline/Timeline.d.ts

@@ -1,385 +1,16 @@
-import { type PropType, type VNode } from 'vue';
-import { type MantineColor, type MantineRadius } from '../../core';
-export type TimelineStylesNames = 'root' | 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle' | 'itemOpposite';
-export declare const Timeline: import("../..").WithBoxProps<{
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        active: {
-            type: NumberConstructor;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        bulletSize: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        align: {
-            type: PropType<"right" | "left">;
-            default: undefined;
-        };
-        lineWidth: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        reverseActive: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        unstyled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        radius: MantineRadius;
-        color: MantineColor;
-        autoContrast: boolean;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        active: number;
-        mod: any;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        align: "left" | "right";
-        bulletSize: string | number;
-        lineWidth: string | number;
-        reverseActive: boolean;
-    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly<import("vue").ExtractPropTypes<{
-        active: {
-            type: NumberConstructor;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        bulletSize: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        align: {
-            type: PropType<"right" | "left">;
-            default: undefined;
-        };
-        lineWidth: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        reverseActive: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        unstyled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, {
-        radius: MantineRadius;
-        color: MantineColor;
-        autoContrast: boolean;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        active: number;
-        mod: any;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        align: "left" | "right";
-        bulletSize: string | number;
-        lineWidth: string | number;
-        reverseActive: boolean;
-    }>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    active: {
-        type: NumberConstructor;
-        default: undefined;
+import { TimelineItem } from './TimelineItem/TimelineItem';
+export declare const Timeline: import("../..").MantineComponent<{
+    props: Omit<import("./Timeline.types").TimelineProps, "rootRef">;
+    slots: import("./Timeline.types").TimelineSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    element: "div";
+    stylesNames: import("./Timeline.types").TimelineStylesNames;
+    vars: import("./Timeline.types").TimelineCssVariables;
+    staticComponents: {
+        Item: typeof TimelineItem;
     };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    bulletSize: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    align: {
-        type: PropType<"right" | "left">;
-        default: undefined;
-    };
-    lineWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    reverseActive: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    mod: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    radius: MantineRadius;
-    color: MantineColor;
-    autoContrast: boolean;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    active: number;
-    mod: any;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    align: "left" | "right";
-    bulletSize: string | number;
-    lineWidth: string | number;
-    reverseActive: boolean;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
-    classes: Record<string, string>;
-    varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
-    Item: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        __active: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        __lineActive: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        __align: {
-            type: PropType<"right" | "left">;
-            default: undefined;
-        };
-        active: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        lineActive: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        title: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        bullet: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        opposite: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        alternate: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        lineVariant: {
-            type: PropType<"solid" | "dashed" | "dotted">;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        className: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        style: {
-            type: PropType<any>;
-            default: undefined;
-        };
-    }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        __active: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        __lineActive: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        __align: {
-            type: PropType<"right" | "left">;
-            default: undefined;
-        };
-        active: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        lineActive: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        title: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        bullet: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        opposite: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        alternate: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        lineVariant: {
-            type: PropType<"solid" | "dashed" | "dotted">;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        className: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        style: {
-            type: PropType<any>;
-            default: undefined;
-        };
-    }>> & Readonly<{}>, {
-        style: any;
-        title: import("../..").MantineNode;
-        radius: MantineRadius;
-        color: MantineColor;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        active: boolean;
-        mod: any;
-        alternate: boolean;
-        className: any;
-        __active: boolean;
-        __lineActive: boolean;
-        __align: "left" | "right";
-        lineActive: boolean;
-        bullet: import("../..").MantineNode;
-        opposite: import("../..").MantineNode;
-        lineVariant: "dashed" | "dotted" | "solid";
-    }, import("vue").SlotsType<import("./TimelineItem/TimelineItem").TimelineItemSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 }>;
+export type { TimelineCssVariables, TimelineFactory, TimelineOwnProps, TimelineProps, TimelineSlots, TimelineStylesNames, } from './Timeline.types';

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

@@ -0,0 +1,74 @@
+import type { TimelineItem } from './TimelineItem/TimelineItem';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, MantineColor, MantineRadius, StylesApiProps, Factory } from '../../core';
+/** Props declared by `Timeline` itself. See `TimelineProps` for the full public type. */
+export interface TimelineOwnProps extends StylesApiProps<TimelineFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Index of the active element
+     *
+     * @default -1
+     */
+    active?: number;
+    /**
+     * Key of `theme.colors` or any valid CSS color to control active item colors
+     *
+     * @default theme.primaryColor
+     */
+    color?: MantineColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem
+     *
+     * @default 'xl'
+     */
+    radius?: MantineRadius;
+    /**
+     * Size of the bullet
+     *
+     * @default 20
+     */
+    bulletSize?: string | number;
+    /**
+     * Position of content relative to the bullet
+     *
+     * @default 'left'
+     */
+    align?: 'right' | 'left';
+    /** Control width of the line */
+    lineWidth?: string | number;
+    /**
+     * If set, the active items direction is reversed without reversing items order
+     *
+     * @default false
+     */
+    reverseActive?: boolean;
+    /** If set, adjusts text color based on background color for `filled` variant */
+    autoContrast?: boolean;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface TimelineProps extends Omit<BoxProps, keyof TimelineOwnProps>, TimelineOwnProps {
+}
+export interface TimelineSlots {
+    default?: () => VNodeChild;
+}
+export type TimelineStylesNames = 'root' | 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle' | 'itemOpposite';
+export type TimelineCssVariables = {
+    root: '--tl-bullet-size' | '--tl-line-width' | '--tl-radius' | '--tl-color' | '--tl-icon-color';
+};
+export type TimelineFactory = Factory<{
+    props: Omit<TimelineProps, 'rootRef'>;
+    slots: TimelineSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    element: 'div';
+    stylesNames: TimelineStylesNames;
+    vars: TimelineCssVariables;
+    staticComponents: {
+        Item: typeof TimelineItem;
+    };
+}>;

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

@@ -0,0 +1,12 @@
+import type { TimelineOwnProps, TimelineSlots } from './Timeline.types';
+export declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TimelineOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimelineOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TimelineSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};