@mantine-vue/core 3.6.0 → 3.7.0

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { AppShellOwnProps, AppShellSlots } from './AppShell.types';
 declare const defaults: {
     readonly withBorder: true;
@@ -20,9 +21,9 @@ declare const appShellId: {
 export { appShellId, defaults, varsResolver };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AppShellOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AppShellOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AppShellSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AppShellSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/AppShell/AppShellMain/AppShellMain.d.ts

@@ -1,5 +1,5 @@
 export declare const AppShellMain: import("../../..").MantineComponent<{
-    props: Omit<import("./AppShellMain.types").AppShellMainProps, "rootRef">;
+    props: import("./AppShellMain.types").AppShellMainProps;
     ref: HTMLElement;
     slots: import("./AppShellMain.types").AppShellMainSlots;
     element: "main";

package/lib/components/AppShell/AppShellMain/AppShellMain.types.d.ts

@@ -3,8 +3,6 @@ import type { BoxProps, ClassNames, Styles, Vars, Factory } from '../../../core'
 export type AppShellMainStylesNames = 'main';
 /** Props declared by `AppShellMain` itself. See `AppShellMainProps` for the full public type. */
 export interface AppShellMainOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Class name assigned to the `main` Styles API selector. */
     classNames?: ClassNames<AppShellMainProps>;
     /** Inline styles assigned to the `main` Styles API selector. */
@@ -19,10 +17,9 @@ export interface AppShellMainSlots {
 export interface AppShellMainProps extends Omit<BoxProps, keyof AppShellMainOwnProps>, AppShellMainOwnProps {
 }
 export type AppShellMainFactory = Factory<{
-    props: Omit<AppShellMainProps, 'rootRef'>;
+    props: AppShellMainProps;
     ref: HTMLElement;
     slots: AppShellMainSlots;
     element: 'main';
     stylesNames: AppShellMainStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/AppShell/AppShellMain/AppShellMain.vue.d.ts

@@ -1,8 +1,10 @@
+import type { RootRefProps } from '../../../core';
 import type { AppShellMainOwnProps, AppShellMainSlots } from './AppShellMain.types';
+type __VLS_Props = AppShellMainOwnProps & RootRefProps<Element>;
 type __VLS_Slots = AppShellMainSlots;
-declare const __VLS_base: import("vue").DefineComponent<AppShellMainOwnProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellMainOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/lib/components/AppShell/AppShellSection/AppShellSection.d.ts

@@ -1,5 +1,5 @@
 export declare const AppShellSection: import("../../..").MantinePolymorphicComponent<{
-    props: Omit<import("./AppShellSection.types").AppShellSectionProps, "component" | "rootRef">;
+    props: Omit<import("./AppShellSection.types").AppShellSectionProps, "component">;
     slots: import("./AppShellSection.types").AppShellSectionSlots;
     ref: HTMLDivElement;
     exposed: {

package/lib/components/AppShell/AppShellSection/AppShellSection.types.d.ts

@@ -25,7 +25,7 @@ export interface AppShellSectionSlots {
 }
 export type AppShellSectionStylesNames = 'section';
 export type AppShellSectionFactory = PolymorphicFactory<{
-    props: Omit<AppShellSectionProps, 'component' | 'rootRef'>;
+    props: Omit<AppShellSectionProps, 'component'>;
     slots: AppShellSectionSlots;
     ref: HTMLDivElement;
     exposed: {

package/lib/components/AspectRatio/AspectRatio.d.ts

@@ -1,5 +1,5 @@
 export declare const AspectRatio: import("../..").MantineComponent<{
-    props: Omit<import("./AspectRatio.types").AspectRatioProps, "rootRef">;
+    props: import("./AspectRatio.types").AspectRatioProps;
     ref: HTMLDivElement;
     element: "div";
     stylesNames: import("./AspectRatio.types").AspectRatioStylesNames;

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

@@ -1,8 +1,6 @@
 import type { BoxProps, StylesApiProps, Factory } from '../../core';
 /** Props declared by `AspectRatio` itself. See `AspectRatioProps` for the full public type. */
 export interface AspectRatioOwnProps extends StylesApiProps<AspectRatioFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080`
      *
@@ -17,10 +15,9 @@ export type AspectRatioCssVariables = {
     root: '--ar-ratio';
 };
 export type AspectRatioFactory = Factory<{
-    props: Omit<AspectRatioProps, 'rootRef'>;
+    props: AspectRatioProps;
     ref: HTMLDivElement;
     element: 'div';
     stylesNames: AspectRatioStylesNames;
     vars: AspectRatioCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,12 +1,13 @@
+import type { RootRefProps } from '../../core';
 import type { AspectRatioOwnProps } from './AspectRatio.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<AspectRatioOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AspectRatioOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AspectRatioOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AspectRatioOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,6 +1,7 @@
 import type { VNodeChild } from 'vue';
-import type { ComboboxGenericData, OptionsFilter } from '../Combobox';
+import type { ComboboxGenericData, ComboboxProps, OptionsFilter } from '../Combobox';
 import type { InputBaseProps } from '../InputBase';
+import type { ScrollAreaProps } from '../ScrollArea';
 export type AutocompleteStylesNames = string;
 /** Payload passed to the `renderOption` prop and slot. */
 export interface AutocompleteOptionRenderPayload {
@@ -79,14 +80,14 @@ export interface AutocompleteOwnProps {
      */
     maxDropdownHeight?: number | string;
     /** Props passed down to the underlying `Combobox`. */
-    comboboxProps?: Record<string, any>;
+    comboboxProps?: ComboboxProps;
     /**
      * Custom markup for a dropdown option.
      * Can also be set with the scoped `renderOption` slot – the slot takes precedence.
      */
     renderOption?: RenderAutocompleteOption;
     /** Props passed down to the `ScrollArea.Autosize` of the dropdown. */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
     /**
      * If set, a clear button is rendered in the right section when the input is not empty.
      *

package/lib/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { AvatarGroup } from './AvatarGroup/AvatarGroup';
 export declare const Avatar: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./Avatar.types").AvatarProps, "component" | "rootRef">;
+    props: Omit<import("./Avatar.types").AvatarProps, "component">;
     slots: import("./Avatar.types").AvatarSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,12 +1,9 @@
 import type { ImgHTMLAttributes, VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxMod, BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 import type { AvatarGroup } from './AvatarGroup/AvatarGroup';
 export type AvatarVariant = 'filled' | 'light' | 'gradient' | 'outline' | 'transparent' | 'default' | 'white';
 /** Props declared by `Avatar` itself. See `AvatarProps` for the full public type. */
 export interface AvatarOwnProps extends StylesApiProps<AvatarProps> {
-    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Root element or component rendered by `Avatar`.
      *
@@ -65,7 +62,7 @@ export type AvatarCssVariables = {
 };
 /** Public contract of `Avatar`. `component` and `rootRef` come from the factory. */
 export type AvatarFactory = PolymorphicFactory<{
-    props: Omit<AvatarProps, 'component' | 'rootRef'>;
+    props: Omit<AvatarProps, 'component'>;
     slots: AvatarSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,10 +1,11 @@
+import type { RootRefProps } from '../../core';
 import type { AvatarOwnProps, AvatarSlots } from './Avatar.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<AvatarOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Avatar/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,6 @@
 import { useAvatarGroupContext } from './AvatarGroup.context';
 export declare const AvatarGroup: import("../../..").MantineComponent<{
-    props: Omit<import("./AvatarGroup.types").AvatarGroupProps, "rootRef">;
+    props: import("./AvatarGroup.types").AvatarGroupProps;
     ref: HTMLDivElement;
     slots: import("./AvatarGroup.types").AvatarGroupSlots;
     element: "div";

package/lib/components/Avatar/AvatarGroup/AvatarGroup.types.d.ts

@@ -5,8 +5,6 @@ export interface AvatarGroupContextValue {
 }
 /** Props declared by `AvatarGroup` itself. See `AvatarGroupProps` for the full public type. */
 export interface AvatarGroupOwnProps extends StylesApiProps<AvatarGroupFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Negative space between Avatar components
      *
@@ -24,11 +22,10 @@ export type AvatarGroupCssVariables = {
     group: '--ag-spacing';
 };
 export type AvatarGroupFactory = Factory<{
-    props: Omit<AvatarGroupProps, 'rootRef'>;
+    props: AvatarGroupProps;
     ref: HTMLDivElement;
     slots: AvatarGroupSlots;
     element: 'div';
     stylesNames: AvatarGroupStylesNames;
     vars: AvatarGroupCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Avatar/AvatarGroup/AvatarGroup.vue.d.ts

@@ -1,10 +1,11 @@
+import type { RootRefProps } from '../../../core';
 import type { AvatarGroupOwnProps, AvatarGroupSlots } from './AvatarGroup.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<AvatarGroupOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/BackgroundImage/BackgroundImage.d.ts

@@ -1,5 +1,5 @@
 export declare const BackgroundImage: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./BackgroundImage.types").BackgroundImageProps, "component" | "rootRef">;
+    props: Omit<import("./BackgroundImage.types").BackgroundImageProps, "component">;
     slots: import("./BackgroundImage.types").BackgroundImageSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,10 +1,7 @@
 import type { VNodeChild } from 'vue';
 import type { BoxProps, MantineRadius, StylesApiProps, PolymorphicFactory } from '../../core';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 /** Props declared by `BackgroundImage` itself. See `BackgroundImageProps` for the full public type. */
 export interface BackgroundImageOwnProps extends StylesApiProps<BackgroundImageProps> {
-    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
-    rootRef?: VueRefTarget<Element>;
     /** Image url */
     src: string;
     /**
@@ -26,7 +23,7 @@ export interface BackgroundImageSlots {
 }
 /** Public contract of `BackgroundImage`. `component` and `rootRef` come from the factory. */
 export type BackgroundImageFactory = PolymorphicFactory<{
-    props: Omit<BackgroundImageProps, 'component' | 'rootRef'>;
+    props: Omit<BackgroundImageProps, 'component'>;
     slots: BackgroundImageSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,12 +1,13 @@
+import type { RootRefProps } from '../../core';
 import type { BackgroundImageOwnProps } from './BackgroundImage.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<BackgroundImageOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BackgroundImageOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

package/lib/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 export declare const Badge: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./Badge.types").BadgeProps, "component" | "rootRef">;
+    props: Omit<import("./Badge.types").BadgeProps, "component">;
     slots: import("./Badge.types").BadgeSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,5 +1,4 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, MantineColor, MantineGradient, MantineNode, MantineRadius, MantineSize, MantineVariant, SectionSlots, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 export type BadgeStylesNames = 'root' | 'section' | 'label';
 export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'white' | 'default' | 'gradient';
@@ -16,8 +15,6 @@ export interface BadgeSlots extends SectionSlots {
  * fallthrough attributes rather than declaring at runtime.
  */
 export interface BadgeOwnProps extends StylesApiProps<BadgeProps> {
-    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Root element or component rendered by `Badge`.
      * @default 'div'
@@ -78,7 +75,7 @@ export interface BadgeProps extends Omit<BoxProps, keyof BadgeOwnProps>, BadgeOw
 }
 /** Public contract of `Badge`. `component` and `rootRef` come from the factory. */
 export type BadgeFactory = PolymorphicFactory<{
-    props: Omit<BadgeProps, 'component' | 'rootRef'>;
+    props: Omit<BadgeProps, 'component'>;
     slots: BadgeSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,12 +1,13 @@
+import type { RootRefProps } from '../../core';
 import type { BadgeOwnProps, BadgeSlots } from './Badge.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<BadgeOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Blockquote/Blockquote.d.ts

@@ -1,5 +1,5 @@
 export declare const Blockquote: import("../..").MantineComponent<{
-    props: Omit<import("./Blockquote.types").BlockquoteProps, "rootRef">;
+    props: import("./Blockquote.types").BlockquoteProps;
     ref: HTMLQuoteElement;
     slots: import("./Blockquote.types").BlockquoteSlots;
     element: "blockquote";

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

@@ -2,8 +2,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxProps, MantineColor, MantineNode, MantineRadius, StylesApiProps, Factory } from '../../core';
 /** Props declared by `Blockquote` itself. See `BlockquoteProps` for the full public type. */
 export interface BlockquoteOwnProps extends StylesApiProps<BlockquoteFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Blockquote icon, displayed at the top left side */
     icon?: MantineNode;
     /**
@@ -44,10 +42,9 @@ export type BlockquoteCssVariables = {
     root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius' | '--bq-text-wrap';
 };
 export type BlockquoteFactory = Factory<{
-    props: Omit<BlockquoteProps, 'rootRef'>;
+    props: BlockquoteProps;
     ref: HTMLQuoteElement;
     slots: BlockquoteSlots;
     element: 'blockquote';
     stylesNames: BlockquoteStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,9 +1,10 @@
+import type { RootRefProps } from '../../core';
 import type { BlockquoteOwnProps, BlockquoteSlots } from './Blockquote.types';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlockquoteOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlockquoteOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockquoteOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlockquoteSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockquoteOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlockquoteSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 export declare const Breadcrumbs: import("../..").MantineComponent<{
-    props: Omit<import("./Breadcrumbs.types").BreadcrumbsProps, "rootRef">;
+    props: import("./Breadcrumbs.types").BreadcrumbsProps;
     slots: import("./Breadcrumbs.types").BreadcrumbsSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,10 +1,7 @@
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { VNodeChild } from 'vue';
 import type { BoxProps, MantineNode, StylesApiProps, Factory } from '../../core';
 /** Props declared by `Breadcrumbs` itself. See `BreadcrumbsProps` for the full public type. */
 export interface BreadcrumbsOwnProps extends StylesApiProps<BreadcrumbsFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Separator between children
      *
@@ -31,7 +28,7 @@ export type BreadcrumbsCssVariables = {
 export interface BreadcrumbsProps extends Omit<BoxProps, keyof BreadcrumbsOwnProps>, BreadcrumbsOwnProps {
 }
 export type BreadcrumbsFactory = Factory<{
-    props: Omit<BreadcrumbsProps, 'rootRef'>;
+    props: BreadcrumbsProps;
     slots: BreadcrumbsSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,10 +1,11 @@
+import type { RootRefProps } from '../../core';
 import type { BreadcrumbsOwnProps, BreadcrumbsSlots } from './Breadcrumbs.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<BreadcrumbsOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BreadcrumbsOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbsOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BreadcrumbsSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbsOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BreadcrumbsSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Burger/Burger.d.ts

@@ -1,5 +1,5 @@
 export declare const Burger: import("../..").MantineComponent<{
-    props: Omit<import("./Burger.types").BurgerProps, "rootRef">;
+    props: import("./Burger.types").BurgerProps;
     ref: HTMLButtonElement;
     slots: import("./Burger.types").BurgerSlots;
     element: "button";

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

@@ -2,8 +2,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxProps, MantineColor, MantineSize, StylesApiProps, Factory } from '../../core';
 /** Props declared by `Burger` itself. See `BurgerProps` for the full public type. */
 export interface BurgerOwnProps extends StylesApiProps<BurgerFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Controls burger `width` and `height`, numbers are converted to rem
      *
@@ -44,11 +42,10 @@ export type BurgerCssVariables = {
     root: '--burger-color' | '--burger-size' | '--burger-line-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
 };
 export type BurgerFactory = Factory<{
-    props: Omit<BurgerProps, 'rootRef'>;
+    props: BurgerProps;
     ref: HTMLButtonElement;
     slots: BurgerSlots;
     element: 'button';
     stylesNames: BurgerStylesNames;
     vars: BurgerCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,10 +1,11 @@
+import type { RootRefProps } from '../../core';
 import type { BurgerOwnProps, BurgerSlots } from './Burger.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<BurgerOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BurgerOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BurgerOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BurgerSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BurgerOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BurgerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { ButtonGroup } from './ButtonGroup/ButtonGroup';
 import { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
 export declare const Button: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./Button.types").ButtonProps, "component" | "rootRef">;
+    props: Omit<import("./Button.types").ButtonProps, "component">;
     slots: import("./Button.types").ButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

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

@@ -1,6 +1,6 @@
 import type { CSSProperties, VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxMod, BoxProps, MantineColor, MantineElementType, MantineGradient, MantineNode, MantineRadius, MantineSize, MantineVariant, PolymorphicFactory, StylesApiProps } from '../../core';
+import type { LoaderProps } from '../Loader';
 import type { ButtonGroup } from './ButtonGroup/ButtonGroup';
 import type { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
 export type ButtonSize = MantineSize | `compact-${MantineSize}` | (string & {});
@@ -70,7 +70,7 @@ export interface ButtonOwnProps extends StylesApiProps<ButtonFactory> {
      */
     loading?: boolean;
     /** Props passed down to the `Loader`. Only used when `loading` is set. */
-    loaderProps?: Record<string, any>;
+    loaderProps?: LoaderProps;
     /**
      * If set, adjusts the text color based on the background color for the `filled` variant.
      * Inherits `theme.autoContrast` when not set.
@@ -99,8 +99,6 @@ export interface ButtonOwnProps extends StylesApiProps<ButtonFactory> {
     dataDisabled?: boolean;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
-    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
-    rootRef?: VueRefTarget<Element>;
 }
 export interface ButtonProps extends Omit<BoxProps, keyof ButtonOwnProps>, ButtonOwnProps {
 }
@@ -108,7 +106,7 @@ export interface ButtonProps extends Omit<BoxProps, keyof ButtonOwnProps>, Butto
  * Public contract of `Button`.
  */
 export type ButtonFactory = PolymorphicFactory<{
-    props: Omit<ButtonProps, 'component' | 'rootRef'>;
+    props: Omit<ButtonProps, 'component'>;
     slots: ButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { ButtonOwnProps, ButtonSlots } from './Button.types';
 import type { MantineTransition } from '../Transition';
 /** The loader slides in from above the label instead of replacing it. */
@@ -7,9 +8,9 @@ declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ct
 export { loaderTransition, varsResolver };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Button/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 export declare const ButtonGroup: import("../../..").MantineComponent<{
-    props: Omit<import("./ButtonGroup.types").ButtonGroupProps, "rootRef">;
+    props: import("./ButtonGroup.types").ButtonGroupProps;
     ref: HTMLDivElement;
     slots: import("./ButtonGroup.types").ButtonGroupSlots;
     element: "div";

package/lib/components/Button/ButtonGroup/ButtonGroup.types.d.ts

@@ -2,8 +2,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxProps, StylesApiProps, Factory } from '../../../core';
 /** Props declared by `ButtonGroup` itself. See `ButtonGroupProps` for the full public type. */
 export interface ButtonGroupOwnProps extends StylesApiProps<ButtonGroupFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Orientation of the group
      *
@@ -28,11 +26,10 @@ export type ButtonGroupCssVariables = {
     group: '--button-border-width';
 };
 export type ButtonGroupFactory = Factory<{
-    props: Omit<ButtonGroupProps, 'rootRef'>;
+    props: ButtonGroupProps;
     ref: HTMLDivElement;
     slots: ButtonGroupSlots;
     element: 'div';
     stylesNames: ButtonGroupStylesNames;
     vars: ButtonGroupCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Button/ButtonGroup/ButtonGroup.vue.d.ts

@@ -1,11 +1,12 @@
+import type { RootRefProps } from '../../../core';
 import type { ButtonGroupOwnProps, ButtonGroupSlots } from './ButtonGroup.types';
 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<ButtonGroupOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonGroupOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonGroupSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Button/ButtonGroupSection/ButtonGroupSection.d.ts

@@ -1,5 +1,5 @@
 export declare const ButtonGroupSection: import("../../..").MantineComponent<{
-    props: Omit<import("./ButtonGroupSection.types").ButtonGroupSectionProps, "rootRef">;
+    props: import("./ButtonGroupSection.types").ButtonGroupSectionProps;
     ref: HTMLDivElement;
     slots: import("./ButtonGroupSection.types").ButtonGroupSectionSlots;
     element: "div";