@mantine-vue/core 3.6.0 → 3.7.0

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

@@ -1,5 +1,4 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, MantineColor, MantineElementType, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 export type ToggleStylesNames = 'root';
 export type ToggleVariant = 'light' | 'filled';
@@ -7,8 +6,6 @@ export type ToggleCssVariables = {
     root: '--toggle-size' | '--toggle-radius' | '--toggle-active-bg' | '--toggle-active-hover' | '--toggle-active-color';
 };
 export interface ToggleOwnProps extends StylesApiProps<ToggleFactory> {
-    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
-    rootRef?: VueRefTarget<Element>;
     /** Root element or Vue component rendered by the component. @default 'button' */
     component?: MantineElementType;
     /** Controlled active state */
@@ -40,7 +37,7 @@ export interface ToggleEmits {
     activeChange: [active: boolean];
 }
 export type ToggleFactory = PolymorphicFactory<{
-    props: Omit<ToggleProps, 'component' | 'rootRef'>;
+    props: Omit<ToggleProps, 'component'>;
     slots: ToggleSlots;
     emits: ToggleEmits;
     ref: HTMLButtonElement;

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

@@ -1,14 +1,15 @@
+import type { RootRefProps } from '../../core';
 import type { ToggleOwnProps, ToggleSlots } from './Toggle.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<ToggleOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToggleOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:active": (active: boolean) => any;
     activeChange: (active: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<ToggleOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ToggleOwnProps & RootRefProps<Element>> & Readonly<{
     "onUpdate:active"?: ((active: boolean) => any) | undefined;
     onActiveChange?: ((active: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToggleSlots>;

package/lib/components/Toolbar/Toolbar.d.ts

@@ -5,7 +5,7 @@ import ToolbarToggleItem from './ToolbarToggleItem.vue';
 import ToolbarDivider from './ToolbarDivider.vue';
 export { ToolbarGroup, ToolbarToggle, ToolbarToggleGroup, ToolbarToggleItem, ToolbarDivider };
 export declare const Toolbar: import("../..").MantineComponent<{
-    props: Omit<import("./Toolbar.types").ToolbarProps, "rootRef">;
+    props: import("./Toolbar.types").ToolbarProps;
     slots: import("./Toolbar.types").ToolbarSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,5 +1,4 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import type { ToggleVariant } from '../Toggle';
 import type ToolbarDivider from './ToolbarDivider.vue';
@@ -13,8 +12,6 @@ export type ToolbarCssVariables = {
     toggle: '--toolbar-toggle-active-bg' | '--toolbar-toggle-active-hover' | '--toolbar-toggle-active-color';
 };
 export interface ToolbarOwnProps extends StylesApiProps<ToolbarFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Toolbar orientation, `'horizontal'` by default */
     orientation?: 'horizontal' | 'vertical';
     /** Whether arrow key navigation wraps from last to first item, `true` by default */
@@ -38,7 +35,7 @@ export interface ToolbarSlots {
     default?: () => VNodeChild;
 }
 export type ToolbarFactory = Factory<{
-    props: Omit<ToolbarProps, 'rootRef'>;
+    props: ToolbarProps;
     slots: ToolbarSlots;
     ref: HTMLDivElement;
     exposed: {

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

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

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

@@ -1,17 +1,20 @@
 import type { VNodeChild } from 'vue';
+import type { FlipOptions, InlineOptions, ShiftOptions, SizeOptions } from '@floating-ui/vue';
 import type { ClassNames, MantineNode, Styles, Vars } from '../../core';
 import type { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';
+import type { PortalProps } from '../Portal';
+import type { TransitionOverride } from '../Transition';
 export type TooltipStylesNames = 'tooltip' | 'arrow';
 export type TooltipCssVariables = '--tooltip-radius' | '--tooltip-bg' | '--tooltip-color';
 export interface TooltipMiddlewares {
     /** Shifts the tooltip along its axis so it stays inside the viewport. */
-    shift?: boolean | Record<string, any>;
+    shift?: boolean | ShiftOptions;
     /** Flips the tooltip to the opposite side when it does not fit. */
-    flip?: boolean | Record<string, any>;
+    flip?: boolean | FlipOptions;
     /** Improves the position for targets that span multiple lines. */
-    inline?: boolean | Record<string, any>;
+    inline?: boolean | InlineOptions;
     /** Constrains the tooltip to the available space. */
-    size?: boolean | Record<string, any>;
+    size?: boolean | SizeOptions;
 }
 export interface TooltipSlots {
     /**
@@ -67,7 +70,7 @@ export interface TooltipBaseProps {
      */
     disabled?: boolean;
     /** Props passed down to the `Portal` when `withinPortal` is set. */
-    portalProps?: Record<string, any>;
+    portalProps?: PortalProps;
     /**
      * Floating UI middlewares applied to the tooltip.
      *
@@ -140,7 +143,7 @@ export interface TooltipProps extends TooltipBaseProps {
      *
      * @default { duration: 100, transition: 'fade' }
      */
-    transitionProps?: Record<string, any>;
+    transitionProps?: TransitionOverride;
     /**
      * Events that open and close the tooltip.
      *

package/lib/components/Tooltip/TooltipFloating/TooltipFloating.types.d.ts

@@ -1,6 +1,7 @@
 import type { VNodeChild } from 'vue';
 import type { ClassNames, MantineNode, Styles, Vars } from '../../../core';
 import type { FloatingPosition } from '../../../utils/Floating';
+import type { PortalProps } from '../../Portal';
 export interface TooltipFloatingSlots {
     /**
      * The element the tooltip follows. Must be a single element or component that accepts
@@ -72,7 +73,7 @@ export interface TooltipFloatingProps {
     /** Key of `theme.colors` or any valid CSS color used as the background. */
     color?: string;
     /** Props passed down to the `Portal` when `withinPortal` is set. */
-    portalProps?: Record<string, any>;
+    portalProps?: PortalProps;
     /** `classNames` of the Styles API. */
     classNames?: ClassNames<TooltipFloatingProps>;
     /** `styles` of the Styles API. */

package/lib/components/Tour/Tour.d.ts

@@ -9,7 +9,7 @@ import TourCloseButton from './TourCloseButton.vue';
 import TourNavigation from './TourNavigation.vue';
 export { TourRoot, TourStep, TourOverlay, TourTooltip, TourBeacon, TourTitle, TourBody, TourCloseButton, TourNavigation, };
 export declare const Tour: {
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Tour.types").TourOwnProps> & Readonly<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Tour.types").TourOwnProps & import("../../index.js").RootRefProps<Element>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onUpdate:step"?: ((step: number) => any) | undefined;
         onStepChange?: ((step: number) => any) | undefined;
@@ -28,7 +28,7 @@ export declare const Tour: {
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import("./Tour.types").TourOwnProps> & Readonly<{
+    }, Readonly<import("./Tour.types").TourOwnProps & import("../../index.js").RootRefProps<Element>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onUpdate:step"?: ((step: number) => any) | undefined;
         onStepChange?: ((step: number) => any) | undefined;
@@ -38,7 +38,7 @@ export declare const Tour: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("./Tour.types").TourOwnProps> & Readonly<{
+} & import("vue").ComponentOptionsBase<Readonly<import("./Tour.types").TourOwnProps & import("../../index.js").RootRefProps<Element>> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:step"?: ((step: number) => any) | undefined;
     onStepChange?: ((step: number) => any) | undefined;
@@ -58,7 +58,7 @@ export declare const Tour: {
     classes: Record<string, string>;
     varsResolver: (theme: import("../../index.js").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
     Root: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Tour.types").TourRootProps> & Readonly<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Tour.types").TourRootProps & import("../../index.js").RootRefProps<Element>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onUpdate:step"?: ((step: number) => any) | undefined;
             onStepChange?: ((step: number) => any) | undefined;
@@ -77,7 +77,7 @@ export declare const Tour: {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<import("./Tour.types").TourRootProps> & Readonly<{
+        }, Readonly<import("./Tour.types").TourRootProps & import("../../index.js").RootRefProps<Element>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onUpdate:step"?: ((step: number) => any) | undefined;
             onStepChange?: ((step: number) => any) | undefined;
@@ -87,7 +87,7 @@ export declare const Tour: {
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<import("./Tour.types").TourRootProps> & Readonly<{
+    } & import("vue").ComponentOptionsBase<Readonly<import("./Tour.types").TourRootProps & import("../../index.js").RootRefProps<Element>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onUpdate:step"?: ((step: number) => any) | undefined;
         onStepChange?: ((step: number) => any) | undefined;

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

@@ -1,8 +1,8 @@
 import type { Ref, VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, Factory, MantineColor, StylesApiProps } from '../../core';
 import type { FloatingPosition } from '../../utils/Floating';
-import type { TransitionProps } from '../Transition';
+import type { PortalProps } from '../Portal';
+import type { TransitionOverride } from '../Transition';
 export type TourTarget = string | Ref<HTMLElement | null>;
 export interface TourLabels {
     skip: string;
@@ -43,7 +43,7 @@ export interface TourTooltipProps extends BoxProps {
     targetElement?: HTMLElement | null;
     position?: FloatingPosition;
     mounted?: boolean;
-    transitionProps?: Partial<TransitionProps>;
+    transitionProps?: TransitionOverride;
 }
 export interface TourBeaconProps extends BoxProps {
     target?: TourTarget;
@@ -57,8 +57,6 @@ export type TourCssVariables = {
     root: '--tour-z-index' | '--tour-overlay-color' | '--tour-tooltip-radius' | '--tour-tooltip-shadow' | '--tour-beacon-size' | '--tour-beacon-color' | '--tour-color';
 };
 export interface TourOwnProps extends StylesApiProps<TourFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Whether the tour is active @default false */
     active?: boolean;
     /** Controlled current step index */
@@ -92,11 +90,11 @@ export interface TourOwnProps extends StylesApiProps<TourFactory> {
     /** Whether to render inside a portal @default true */
     withinPortal?: boolean;
     /** Props passed to the Portal component */
-    portalProps?: Record<string, any>;
+    portalProps?: PortalProps;
     /** z-index of the tour @default 10000 */
     zIndex?: string | number;
     /** Transition props for the tooltip @default { duration: 200, transition: 'pop' } */
-    transitionProps?: Partial<TransitionProps>;
+    transitionProps?: TransitionOverride;
     /** Duration of the tooltip position transition between steps in ms @default 300 */
     stepTransitionDuration?: number;
     /** Max width of the tooltip, tooltip always takes this width if viewport allows @default 360 */
@@ -121,7 +119,7 @@ export interface TourEmits {
     stepClose: [step: number];
 }
 export type TourFactory = Factory<{
-    props: Omit<TourProps, 'rootRef'>;
+    props: TourProps;
     slots: TourSlots;
     emits: TourEmits;
     ref: HTMLDivElement;

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

@@ -1,15 +1,16 @@
+import type { RootRefProps } from '../../core';
 import type { TourOwnProps } from './Tour.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<TourOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TourOwnProps & RootRefProps<Element>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "update:step": (step: number) => any;
     stepChange: (step: number) => any;
     stepOpen: (step: number) => any;
     stepClose: (step: number) => any;
-}, string, import("vue").PublicProps, Readonly<TourOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<TourOwnProps & RootRefProps<Element>> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:step"?: ((step: number) => any) | undefined;
     onStepChange?: ((step: number) => any) | undefined;

package/lib/components/Tour/TourRoot.vue.d.ts

@@ -1,15 +1,17 @@
+import type { RootRefProps } from '../../core';
 import type { TourRootProps } from './Tour.types';
+type __VLS_Props = TourRootProps & RootRefProps<Element>;
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<TourRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "update:step": (step: number) => any;
     stepChange: (step: number) => any;
     stepOpen: (step: number) => any;
     stepClose: (step: number) => any;
-}, string, import("vue").PublicProps, Readonly<TourRootProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:step"?: ((step: number) => any) | undefined;
     onStepChange?: ((step: number) => any) | undefined;

package/lib/components/Tree/Tree.d.ts

@@ -1,5 +1,5 @@
 export declare const Tree: import("../..").MantineComponent<{
-    props: Omit<import("./Tree.types").TreeProps, "rootRef">;
+    props: import("./Tree.types").TreeProps;
     ref: HTMLUListElement;
     slots: import("./Tree.types").TreeSlots;
     element: "ul";

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

@@ -1,5 +1,5 @@
-import type { Component, VNodeChild } from 'vue';
-import type { BoxProps, StylesApiProps, Factory } from '../../core';
+import type { Component, HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, StylesApiProps, Factory } from '../../core';
 import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
 import type { TreeController } from './use-tree';
 export interface TreeNodeData {
@@ -35,7 +35,7 @@ export interface RenderTreeNodePayload {
     /** Controller of the tree the node belongs to. */
     tree: TreeController;
     /** Props that must be spread onto the element rendered for the node. */
-    elementProps: Record<string, any>;
+    elementProps: HTMLAttributes & DataAttributes;
     /** Props for the drag handle. Only set when `withDragHandle` is set. */
     dragHandleProps: TreeDragHandleProps | undefined;
 }
@@ -52,7 +52,7 @@ export interface TreeDragState {
     currentDropTarget: HTMLElement | null;
 }
 export type TreeFactory = Factory<{
-    props: Omit<TreeProps, 'rootRef'>;
+    props: TreeProps;
     ref: HTMLUListElement;
     slots: TreeSlots;
     element: 'ul';
@@ -69,8 +69,6 @@ export interface TreeSlots {
 }
 /** Props declared by `Tree` itself. See `TreeProps` for the full public type. */
 export interface TreeOwnProps extends StylesApiProps<TreeFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Element or component rendered as the root.
      *
@@ -149,6 +147,5 @@ export interface TreeOwnProps extends StylesApiProps<TreeFactory> {
      */
     withLines?: boolean;
 }
-import type { VueRefTarget } from '@mantine-vue/hooks';
 export interface TreeProps extends Omit<BoxProps, keyof TreeOwnProps>, TreeOwnProps {
 }

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
 import type { TreeOwnProps, TreeSlots } from './Tree.types';
 import type { TreeNodeData } from './Tree.types';
@@ -11,11 +12,11 @@ declare function getFlatValues(data: TreeNodeData[]): string[];
 export { varsResolver, getFlatValues };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TreeOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TreeOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "drag-drop": (payload: TreeDragDropPayload) => any;
-}, string, import("vue").PublicProps, Readonly<TreeOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<TreeOwnProps & RootRefProps<Element>> & Readonly<{
     "onDrag-drop"?: ((payload: TreeDragDropPayload) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TreeSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,7 +1,8 @@
-import type { VNodeChild } from 'vue';
+import type { InputHTMLAttributes, VNodeChild } from 'vue';
 import type { MantineNode } from '../../core';
 import type { TreeNodeData } from '../Tree';
 import type { ComboboxProps } from '../Combobox';
+import type { ScrollAreaProps } from '../ScrollArea';
 export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
 export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
 export type CheckedStrategy = 'all' | 'parent' | 'child';
@@ -130,7 +131,7 @@ export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> {
      */
     withLines?: boolean;
     /** Props passed down to the hidden input that carries the value in a form. */
-    hiddenInputProps?: Record<string, any>;
+    hiddenInputProps?: Omit<InputHTMLAttributes, 'value'>;
     /**
      * Separator used to join several values in the hidden input.
      *
@@ -144,7 +145,7 @@ export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> {
      */
     maxDropdownHeight?: number | string;
     /** Props passed down to the scrollable wrapper of the dropdown. */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
     /** Open state of the dropdown. */
     dropdownOpened?: boolean;
     /** Uncontrolled initial open state of the dropdown. */

package/lib/components/UnstyledButton/UnstyledButton.d.ts

@@ -1,5 +1,5 @@
 export declare const UnstyledButton: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./UnstyledButton.types").UnstyledButtonProps, "component" | "rootRef">;
+    props: Omit<import("./UnstyledButton.types").UnstyledButtonProps, "component">;
     slots: import("./UnstyledButton.types").UnstyledButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

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

@@ -1,10 +1,7 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxMod, BoxProps, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 /** Props declared by `UnstyledButton` itself. See `UnstyledButtonProps` for the full public type. */
 export interface UnstyledButtonOwnProps extends StylesApiProps<UnstyledButtonProps> {
-    /** 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 `UnstyledButton`.
      *
@@ -30,7 +27,7 @@ export interface UnstyledButtonSlots {
 export type UnstyledButtonStylesNames = 'root';
 /** Public contract of `UnstyledButton`. `component` and `rootRef` come from the factory. */
 export type UnstyledButtonFactory = PolymorphicFactory<{
-    props: Omit<UnstyledButtonProps, 'component' | 'rootRef'>;
+    props: Omit<UnstyledButtonProps, 'component'>;
     slots: UnstyledButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

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

@@ -1,8 +1,10 @@
+import type { RootRefProps } from '../../core';
 import type { UnstyledButtonOwnProps, UnstyledButtonSlots } from './UnstyledButton.types';
+type __VLS_Props = UnstyledButtonOwnProps & RootRefProps<Element>;
 type __VLS_Slots = UnstyledButtonSlots;
-declare const __VLS_base: import("vue").DefineComponent<UnstyledButtonOwnProps, {
+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<UnstyledButtonOwnProps> & 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/core/Box/Box.d.ts

@@ -15,14 +15,6 @@ export interface BoxProps extends MantineStyleProps {
     darkHidden?: boolean;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
-    /**
-     * Receives the root DOM node rendered by `Box`.
-     *
-     * Vue resolves a template `ref` on a component to the component instance rather than the
-     * node it renders, so this prop is how a parent reaches the real element. When `component`
-     * is a Vue component, the component's own root node (`$el`) is assigned.
-     */
-    rootRef?: VueRefTarget<Element>;
 }
 export declare const Box: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {

package/lib/core/factory/index.d.ts

@@ -7,4 +7,3 @@ export type { DataAttributes, ElementAttributes, EmitsToProps, FactoryComponentP
 export type { CssVariable, FactoryClassNames, FactoryPartialVarsResolver, FactoryStyles, FactoryVarsResolver, PartialTransformVars, StylesApiRecord, StylesNamesOf, StylesRecord, TransformVars, } from './factory-styles-api';
 export { polymorphicFactory } from './polymorphic-factory';
 export type { MantinePolymorphicComponent, PolymorphicComponentWithProps, PolymorphicProps, } from './polymorphic-factory';
-export { useForwardedRef } from './use-forwarded-ref';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -54,8 +54,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "3.6.0",
-    "@mantine-vue/utils": "3.6.0",
+    "@mantine-vue/hooks": "3.7.0",
+    "@mantine-vue/utils": "3.7.0",
     "vue": "^3.5.0"
   }
 }

package/lib/core/factory/use-forwarded-ref.d.ts

@@ -1,11 +0,0 @@
-import { type Ref } from 'vue';
-/**
- * Re-targets the `ref` a parent attached to this component so it points at the rendered DOM node
- * instead of the component instance.
- *
- * @deprecated Reads `vnode.ref`'s normalized `{ i, r, k, f }` shape, which is a Vue internal --
- * best-effort, and degrades to a no-op rather than crashing if Vue changes it. Use the factory's
- * `rootRef` prop or the exposed `rootElement` instead. Kept only for components not yet migrated
- * to a factory payload.
- */
-export declare function useForwardedRef<T extends Element>(elementRef: Ref<T | null>): void;