@mantine-vue/core 3.5.0 → 3.7.0

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";

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

@@ -7,8 +7,6 @@ export type ButtonGroupSectionCssVariables = {
 };
 /** Props declared by `ButtonGroupSection` itself. See `ButtonGroupSectionProps` for the full public type. */
 export interface ButtonGroupSectionOwnProps extends StylesApiProps<ButtonGroupSectionFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Controls section `height`, `font-size` and horizontal `padding`. @default 'sm' */
     size?: ButtonSize;
     /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */
@@ -29,11 +27,10 @@ export interface ButtonGroupSectionSlots {
     default?: () => VNodeChild;
 }
 export type ButtonGroupSectionFactory = Factory<{
-    props: Omit<ButtonGroupSectionProps, 'rootRef'>;
+    props: ButtonGroupSectionProps;
     ref: HTMLDivElement;
     slots: ButtonGroupSectionSlots;
     element: 'div';
     stylesNames: ButtonGroupSectionStylesNames;
     vars: ButtonGroupSectionCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/Card/Card.d.ts

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

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

@@ -1,11 +1,8 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, MantineRadius, MantineSpacing, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 import type { CardSection } from './CardSection/CardSection';
 /** Props declared by `Card` itself. See `CardProps` for the full public type. */
 export interface CardOwnProps extends StylesApiProps<CardProps> {
-    /** 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 `Card`.
      *
@@ -50,7 +47,7 @@ export type CardCssVariables = {
 };
 /** Public contract of `Card`. `component` and `rootRef` come from the factory. */
 export type CardFactory = PolymorphicFactory<{
-    props: Omit<CardProps, 'component' | 'rootRef'>;
+    props: Omit<CardProps, 'component'>;
     slots: CardSlots;
     ref: HTMLDivElement;
     exposed: {

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

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

package/lib/components/Card/CardSection/CardSection.d.ts

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

package/lib/components/Card/CardSection/CardSection.types.d.ts

@@ -37,7 +37,7 @@ export interface CardSectionProps extends Omit<BoxProps, keyof CardSectionOwnPro
 }
 export type CardSectionStylesNames = 'section';
 export type CardSectionFactory = PolymorphicFactory<{
-    props: Omit<CardSectionProps, 'component' | 'rootRef'>;
+    props: Omit<CardSectionProps, 'component'>;
     slots: CardSectionSlots;
     ref: HTMLDivElement;
     exposed: {

package/lib/components/Cascader/Cascader.d.ts

@@ -1,15 +1,15 @@
 export declare const Cascader: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
-        onClear?: (() => any) | undefined;
         onChange?: ((value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-close"?: (() => any) | undefined;
         "onSearch-change"?: ((value: string) => any) | undefined;
         "onUpdate:searchValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        clear: () => any;
         change: (value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any;
+        clear: () => any;
         "update:modelValue": (value: string[] | null) => any;
         "dropdown-open": () => any;
         "dropdown-close": () => any;
@@ -23,8 +23,8 @@ export declare const Cascader: {
         M: {};
         Defaults: {};
     }, Readonly<{}> & Readonly<{
-        onClear?: (() => any) | undefined;
         onChange?: ((value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-close"?: (() => any) | undefined;
@@ -35,16 +35,16 @@ export declare const Cascader: {
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
-    onClear?: (() => any) | undefined;
     onChange?: ((value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;
     "onDropdown-close"?: (() => any) | undefined;
     "onSearch-change"?: ((value: string) => any) | undefined;
     "onUpdate:searchValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     change: (value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any;
+    clear: () => any;
     "update:modelValue": (value: string[] | null) => any;
     "dropdown-open": () => any;
     "dropdown-close": () => any;

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

@@ -1,5 +1,7 @@
-import type { VNodeChild } from 'vue';
+import type { InputHTMLAttributes, VNodeChild } from 'vue';
 import type { ClassNames, MantineNode, Styles } from '../../core';
+import type { InputClearButtonProps } from '../Input';
+import type { ScrollAreaProps } from '../ScrollArea';
 export interface CascaderOption {
     value: string;
     label?: VNodeChild;
@@ -167,7 +169,7 @@ export interface CascaderProps {
      */
     clearSectionMode?: 'both' | 'rightSection' | 'clear';
     /** Props passed down to the clear button. */
-    clearButtonProps?: Record<string, unknown>;
+    clearButtonProps?: InputClearButtonProps;
     /** Open state of the dropdown. */
     dropdownOpened?: boolean;
     /** Uncontrolled initial open state of the dropdown. */
@@ -175,11 +177,11 @@ export interface CascaderProps {
     /** Props passed down to the underlying `Combobox`. */
     comboboxProps?: Record<string, unknown>;
     /** Props passed down to the scrollable wrapper of the dropdown. */
-    scrollAreaProps?: Record<string, unknown>;
+    scrollAreaProps?: ScrollAreaProps;
     /** Key of `theme.colors` or any valid CSS color used by the chevron. */
     chevronColor?: string;
     /** Props passed down to the hidden input that carries the value in a form. */
-    hiddenInputProps?: Record<string, unknown>;
+    hiddenInputProps?: Omit<InputHTMLAttributes, 'value'>;
     /**
      * If set, the dropdown opens when a searchable input receives focus.
      *