@mantine-vue/core 3.6.0 → 3.7.0

package/lib/components/Pill/PillGroup/PillGroup.types.d.ts

@@ -6,8 +6,6 @@ export interface PillGroupContextValue {
 }
 /** Props declared by `PillGroup` itself. See `PillGroupProps` for the full public type. */
 export interface PillGroupOwnProps extends StylesApiProps<PillGroupFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Controls spacing between pills, by default controlled by `size` */
     gap?: MantineSize | (string & {}) | number;
     /**
@@ -30,11 +28,10 @@ export type PillGroupCssVariables = {
     group: '--pg-gap';
 };
 export type PillGroupFactory = Factory<{
-    props: Omit<PillGroupProps, 'rootRef'>;
+    props: PillGroupProps;
     ref: HTMLDivElement;
     slots: PillGroupSlots;
     element: 'div';
     stylesNames: PillGroupStylesNames;
     vars: PillGroupCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Pill/PillGroup/PillGroup.vue.d.ts

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

package/lib/components/PillsInput/PillsInput.d.ts

@@ -1,6 +1,6 @@
 import { PillsInputField } from './PillsInputField/PillsInputField';
 export declare const PillsInput: import("../..").MantineComponent<{
-    props: Omit<import("./PillsInput.types").PillsInputProps, "rootRef">;
+    props: import("./PillsInput.types").PillsInputProps;
     slots: import("./PillsInput.types").PillsInputSlots;
     ref: HTMLDivElement;
     stylesNames: import("./PillsInput.types").PillsInputStylesNames;

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

@@ -1,7 +1,6 @@
 import type { PillsInputField } from './PillsInputField/PillsInputField';
-import type { VueRefTarget } from '@mantine-vue/hooks';
-import type { VNodeChild } from 'vue';
-import type { BoxMod, MantineNode, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxMod, DataAttributes, MantineNode, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
 import type { InputBaseOwnProps, InputBaseStylesNames } from '../InputBase';
 export type PillsInputStylesNames = InputBaseStylesNames;
 export interface PillsInputSlots {
@@ -20,8 +19,6 @@ export interface PillsInputSlots {
 }
 /** Props declared by `PillsInput` itself. See `PillsInputProps` for the full public type. */
 export interface PillsInputOwnProps extends StylesApiProps<PillsInputFactory> {
-    /** Receives the input element */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Controls input height and horizontal padding.
      *
@@ -75,7 +72,7 @@ export interface PillsInputOwnProps extends StylesApiProps<PillsInputFactory> {
      */
     withAsterisk?: boolean;
     /** Props passed down to the root element (`Input.Wrapper` component). */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /**
      * Key of `theme.radius` or any valid CSS value to set `border-radius`.
      *
@@ -89,7 +86,7 @@ export interface PillsInputOwnProps extends StylesApiProps<PillsInputFactory> {
 export interface PillsInputProps extends Omit<InputBaseOwnProps, keyof PillsInputOwnProps | 'component' | 'multiline' | 'withAria'>, PillsInputOwnProps {
 }
 export type PillsInputFactory = Factory<{
-    props: Omit<PillsInputProps, 'rootRef'>;
+    props: PillsInputProps;
     slots: PillsInputSlots;
     ref: HTMLDivElement;
     stylesNames: PillsInputStylesNames;

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

@@ -1,12 +1,13 @@
+import type { RootRefProps } from '../../core';
 import type { PillsInputOwnProps, PillsInputSlots } from './PillsInput.types';
 /** Fallthrough listeners arrive as a handler or an array of handlers. */
 declare function callHandler(handler: any, event: Event): void;
 export { callHandler };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PillsInputOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PillsInputOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PillsInputOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PillsInputSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PillsInputOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PillsInputSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/PillsInput/PillsInputField/PillsInputField.d.ts

@@ -1,5 +1,5 @@
 export declare const PillsInputField: import("../../..").MantineComponent<{
-    props: Omit<import("./PillsInputField.types").PillsInputFieldProps, "rootRef">;
+    props: import("./PillsInputField.types").PillsInputFieldProps;
     ref: HTMLInputElement;
     element: "input";
     stylesNames: import("./PillsInputField.types").PillsInputFieldStylesNames;

package/lib/components/PillsInput/PillsInputField/PillsInputField.types.d.ts

@@ -5,8 +5,6 @@ export type PillsInputFieldStylesNames = 'field';
  * See `PillsInputFieldProps` for the full public type.
  */
 export interface PillsInputFieldOwnProps extends StylesApiProps<PillsInputFieldFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Controlled value, bound with `v-model`. */
     modelValue?: string;
     /** Uncontrolled initial value. */
@@ -41,9 +39,8 @@ export interface PillsInputFieldOwnProps extends StylesApiProps<PillsInputFieldF
 export interface PillsInputFieldProps extends Omit<BoxProps, keyof PillsInputFieldOwnProps>, PillsInputFieldOwnProps {
 }
 export type PillsInputFieldFactory = Factory<{
-    props: Omit<PillsInputFieldProps, 'rootRef'>;
+    props: PillsInputFieldProps;
     ref: HTMLInputElement;
     element: 'input';
     stylesNames: PillsInputFieldStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/PillsInput/PillsInputField/PillsInputField.vue.d.ts

@@ -1,10 +1,12 @@
+import type { RootRefProps } from '../../../core';
 import type { PillsInputFieldOwnProps } from './PillsInputField.types';
-declare const __VLS_export: import("vue").DefineComponent<PillsInputFieldOwnProps, {
+type __VLS_Props = PillsInputFieldOwnProps & RootRefProps<Element>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: string) => any;
     "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<PillsInputFieldOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/PinInput/PinInput.d.ts

@@ -1,5 +1,5 @@
 export declare const PinInput: import("../..").MantineComponent<{
-    props: Omit<import("./PinInput.types").PinInputProps, "rootRef">;
+    props: import("./PinInput.types").PinInputProps;
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;

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

@@ -1,5 +1,7 @@
 import type { VueRefTarget } from '@mantine-vue/hooks';
-import type { BoxProps, MantineRadius, MantineSize, MantineSpacing, StylesApiProps, Factory } from '../../core';
+import type { InputHTMLAttributes } from 'vue';
+import type { BoxProps, DataAttributes, MantineRadius, MantineSize, MantineSpacing, StylesApiProps, Factory } from '../../core';
+import type { InputProps } from '../Input';
 export type PinInputStylesNames = 'root' | 'pinInput' | 'input';
 export type PinInputCssVariables = {
     root: '--pin-input-size';
@@ -104,13 +106,11 @@ export interface PinInputOwnProps extends StylesApiProps<PinInputFactory> {
      */
     ariaLabel?: string;
     /** Props passed down to the hidden input that carries the code in a form. */
-    hiddenInputProps?: Record<string, any>;
-    /** Ref assigned to the root element. */
-    rootRef?: VueRefTarget<HTMLDivElement>;
+    hiddenInputProps?: InputHTMLAttributes;
     /** Ref assigned to the first field. */
     inputRef?: VueRefTarget<HTMLInputElement>;
     /** Returns extra props for the field at the given index. */
-    getInputProps?: (index: number) => Record<string, any>;
+    getInputProps?: (index: number) => InputProps & Omit<InputHTMLAttributes, 'size'> & DataAttributes;
     /** Controls the visual representation of the fields. */
     variant?: string;
 }
@@ -125,7 +125,7 @@ export interface PinInputEmits {
     complete: [value: string];
 }
 export type PinInputFactory = Factory<{
-    props: Omit<PinInputProps, 'rootRef'>;
+    props: PinInputProps;
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { PinInputOwnProps } from './PinInput.types';
 /** Character classes the fields can be restricted to. */
 declare const regex: {
@@ -24,13 +25,13 @@ declare function getInputElement(node: any): HTMLInputElement | null;
 export { regex, defaultProps, varsResolver, getInputElement };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<PinInputOwnProps, {
+declare const __VLS_export: import("vue").DefineComponent<PinInputOwnProps & RootRefProps<HTMLDivElement>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: string) => any;
     "update:modelValue": (value: string) => any;
     complete: (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<PinInputOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<PinInputOwnProps & RootRefProps<HTMLDivElement>> & Readonly<{
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onComplete?: ((value: string) => any) | undefined;

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

@@ -34,6 +34,7 @@ export interface PopoverContextValue {
     width: string | number | null;
     zIndex: string | number;
     floatingStrategy: FloatingStrategy;
+    referenceHidden: boolean;
     getStyles: any;
 }
 export declare const providePopoverContext: (value: PopoverContextValue) => void, usePopoverContext: () => PopoverContextValue;

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

@@ -2,6 +2,9 @@ import type { VNodeChild } from 'vue';
 import type { FlipOptions, InlineOptions, ShiftOptions, SizeOptions } from '@floating-ui/vue';
 import type { ClassNames, Styles, Vars } from '../../core';
 import type { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';
+import type { OverlayProps } from '../Overlay';
+import type { PortalProps } from '../Portal';
+import type { TransitionOverride } from '../Transition';
 export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
 export type PopoverCssVariables = '--popover-radius' | '--popover-shadow';
 /** `target` matches the width of the target element; anything else is a CSS width. */
@@ -97,7 +100,7 @@ export interface PopoverProps {
      */
     withinPortal?: boolean;
     /** Props passed down to the `Portal` when `withinPortal` is set. */
-    portalProps?: Record<string, any>;
+    portalProps?: PortalProps;
     /**
      * If set, the dropdown closes on a click outside the target and the dropdown.
      *
@@ -150,7 +153,7 @@ export interface PopoverProps {
      *
      * @default { transition: 'fade', duration: 150 }
      */
-    transitionProps?: Record<string, any>;
+    transitionProps?: TransitionOverride;
     /**
      * `z-index` of the dropdown.
      *
@@ -169,6 +172,12 @@ export interface PopoverProps {
      * @default { flip: true, shift: true }
      */
     middlewares?: PopoverMiddlewares;
+    /**
+     * If set, the dropdown is hidden when the target is hidden with styles or not visible on the screen.
+     *
+     * @default true
+     */
+    hideDetached?: boolean;
     /** Base `id` used to connect the target with the dropdown. Generated when not set. */
     id?: string;
     /** Props merged into the target element. */
@@ -180,7 +189,7 @@ export interface PopoverProps {
      */
     withOverlay?: boolean;
     /** Props passed down to the `Overlay`. */
-    overlayProps?: Record<string, any>;
+    overlayProps?: OverlayProps;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`. */
     radius?: string | number;
     /** Key of `theme.shadows` or any valid CSS value to set the shadow. */

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

@@ -19,6 +19,7 @@ declare const defaults: {
     readonly clickOutsideCapture: false;
     readonly zIndex: number;
     readonly floatingStrategy: "absolute";
+    readonly hideDetached: true;
     readonly transitionProps: {
         readonly transition: "fade";
         readonly duration: 150;

package/lib/components/Progress/Progress.d.ts

@@ -2,7 +2,7 @@ import { ProgressLabel } from './ProgressLabel/ProgressLabel';
 import { ProgressRoot } from './ProgressRoot/ProgressRoot';
 import { ProgressSection } from './ProgressSection/ProgressSection';
 export declare const Progress: import("../..").MantineComponent<{
-    props: Omit<import("./Progress.types").ProgressProps, "rootRef">;
+    props: import("./Progress.types").ProgressProps;
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;

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

@@ -2,13 +2,10 @@ import type { ProgressRootCssVariables } from './ProgressRoot/ProgressRoot.types
 import type { ProgressLabel } from './ProgressLabel/ProgressLabel';
 import type { ProgressSection } from './ProgressSection/ProgressSection';
 import type { ProgressRoot } from './ProgressRoot/ProgressRoot';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, MantineColor, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
 export type ProgressStylesNames = 'root' | 'section' | 'label';
 /** Props declared by `Progress` itself. See `ProgressProps` for the full public type. */
 export interface ProgressOwnProps extends StylesApiProps<ProgressFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Value of the progress */
     value: number;
     /**
@@ -59,7 +56,7 @@ export interface ProgressOwnProps extends StylesApiProps<ProgressFactory> {
 export interface ProgressProps extends Omit<BoxProps, keyof ProgressOwnProps>, ProgressOwnProps {
 }
 export type ProgressFactory = Factory<{
-    props: Omit<ProgressProps, 'rootRef'>;
+    props: ProgressProps;
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;

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

@@ -1,6 +1,8 @@
+import type { RootRefProps } from '../../core';
 import type { ProgressOwnProps } from './Progress.types';
-declare const __VLS_export: import("vue").DefineComponent<ProgressOwnProps, {
+type __VLS_Props = ProgressOwnProps & RootRefProps<Element>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressOwnProps> & 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 _default: typeof __VLS_export;
 export default _default;

package/lib/components/Progress/ProgressLabel/ProgressLabel.d.ts

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

package/lib/components/Progress/ProgressLabel/ProgressLabel.types.d.ts

@@ -2,8 +2,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxProps, StylesApiProps, Factory } from '../../../core';
 /** Props declared by `ProgressLabel` itself. See `ProgressLabelProps` for the full public type. */
 export interface ProgressLabelOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Class names applied to Progress elements. */
     classNames?: StylesApiProps<ProgressLabelFactory>['classNames'];
     /** Inline styles applied to Progress elements. */
@@ -21,10 +19,9 @@ export interface ProgressLabelProps extends Omit<BoxProps, keyof ProgressLabelOw
 }
 export type ProgressLabelStylesNames = 'label';
 export type ProgressLabelFactory = Factory<{
-    props: Omit<ProgressLabelProps, 'rootRef'>;
+    props: ProgressLabelProps;
     ref: HTMLDivElement;
     slots: ProgressLabelSlots;
     element: 'div';
     stylesNames: ProgressLabelStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Progress/ProgressLabel/ProgressLabel.vue.d.ts

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

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

package/lib/components/Progress/ProgressRoot/ProgressRoot.types.d.ts

@@ -3,8 +3,6 @@ import type { BoxMod, BoxProps, MantineRadius, MantineSize, StylesApiProps, Fact
 export type ProgressRootStylesNames = 'root' | 'section' | 'label';
 /** Props declared by `ProgressRoot` itself. See `ProgressRootProps` for the full public type. */
 export interface ProgressRootOwnProps extends StylesApiProps<ProgressRootFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Controls track height
      *
@@ -44,11 +42,10 @@ export type ProgressRootCssVariables = {
     root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';
 };
 export type ProgressRootFactory = Factory<{
-    props: Omit<ProgressRootProps, 'rootRef'>;
+    props: ProgressRootProps;
     ref: HTMLDivElement;
     slots: ProgressRootSlots;
     element: 'div';
     stylesNames: ProgressRootStylesNames;
     vars: ProgressRootCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Progress/ProgressRoot/ProgressRoot.vue.d.ts

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

package/lib/components/Progress/ProgressSection/ProgressSection.d.ts

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

package/lib/components/Progress/ProgressSection/ProgressSection.types.d.ts

@@ -3,8 +3,6 @@ import type { BoxMod, BoxProps, MantineColor, StylesApiProps, Factory } from '..
 export type ProgressSectionStylesNames = 'section';
 /** Props declared by `ProgressSection` itself. See `ProgressSectionProps` for the full public type. */
 export interface ProgressSectionOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Value of the section in 0–100 range */
     value: number;
     /**
@@ -47,10 +45,9 @@ export interface ProgressSectionSlots {
     default?: () => VNodeChild;
 }
 export type ProgressSectionFactory = Factory<{
-    props: Omit<ProgressSectionProps, 'rootRef'>;
+    props: ProgressSectionProps;
     ref: HTMLDivElement;
     slots: ProgressSectionSlots;
     element: 'div';
     stylesNames: ProgressSectionStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Progress/ProgressSection/ProgressSection.vue.d.ts

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

package/lib/components/Radio/Radio.d.ts

@@ -2,7 +2,7 @@ import { RadioCard } from './RadioCard/RadioCard';
 import { RadioGroup } from './RadioGroup/RadioGroup';
 import { RadioIndicator } from './RadioIndicator/RadioIndicator';
 export declare const Radio: import("../..").MantineComponent<{
-    props: Omit<import("./Radio.types").RadioProps, "rootRef">;
+    props: import("./Radio.types").RadioProps;
     slots: import("./Radio.types").RadioSlots;
     emits: import("./Radio.types").RadioEmits;
     ref: HTMLDivElement;

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

@@ -1,9 +1,8 @@
 import type { RadioCard } from './RadioCard/RadioCard';
 import type { RadioIndicator } from './RadioIndicator/RadioIndicator';
 import type { RadioGroup } from './RadioGroup/RadioGroup';
-import type { VueRefTarget } from '@mantine-vue/hooks';
-import type { Component, VNodeChild } from 'vue';
-import type { BoxMod, BoxProps, MantineColor, MantineNode, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
+import type { Component, HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, DataAttributes, MantineColor, MantineNode, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
 export type RadioVariant = 'filled' | 'outline' | 'light';
 export type RadioStylesNames = 'root' | 'body' | 'labelWrapper' | 'label' | 'description' | 'error' | 'inner' | 'radio' | 'icon';
 export type RadioCssVariables = {
@@ -53,7 +52,7 @@ export interface RadioOwnProps extends StylesApiProps<RadioFactory> {
      */
     icon?: Component;
     /** Props passed down to the root element. */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /**
      * Position of the label relative to the radio.
      *
@@ -76,8 +75,6 @@ export interface RadioOwnProps extends StylesApiProps<RadioFactory> {
      * @default 'xl'
      */
     radius?: MantineRadius;
-    /** Ref assigned to the root element. */
-    rootRef?: VueRefTarget<Element>;
     /** Key of `theme.colors` or any valid CSS color used for the icon. */
     iconColor?: MantineColor;
     /**
@@ -129,7 +126,7 @@ export interface RadioEmits {
     change: [checked: boolean];
 }
 export type RadioFactory = Factory<{
-    props: Omit<RadioProps, 'rootRef'>;
+    props: RadioProps;
     slots: RadioSlots;
     emits: RadioEmits;
     ref: HTMLDivElement;

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { RadioOwnProps, RadioSlots } from './Radio.types';
 declare const mergedClasses: {
     [x: string]: string;
@@ -19,14 +20,14 @@ declare const defaultProps: {
 export { mergedClasses, varsResolver, defaultProps, DEFAULT_SIZE };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RadioOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RadioOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
     inputElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (checked: boolean) => any;
     "update:modelValue": (checked: boolean) => any;
     "update:checked": (checked: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<RadioOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<RadioOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((checked: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;

package/lib/components/Radio/RadioCard/RadioCard.d.ts

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

package/lib/components/Radio/RadioCard/RadioCard.types.d.ts

@@ -14,8 +14,6 @@ export interface RadioCardSlots {
 }
 /** Props declared by `RadioCard` itself. See `RadioCardProps` for the full public type. */
 export interface RadioCardOwnProps extends StylesApiProps<RadioCardFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Checked state, bound with `v-model`. */
     modelValue?: boolean;
     /** Checked state, bound with `v-model:checked`. */
@@ -44,11 +42,10 @@ export interface RadioCardOwnProps extends StylesApiProps<RadioCardFactory> {
 export interface RadioCardProps extends Omit<BoxProps, keyof RadioCardOwnProps>, RadioCardOwnProps {
 }
 export type RadioCardFactory = Factory<{
-    props: Omit<RadioCardProps, 'rootRef'>;
+    props: RadioCardProps;
     ref: HTMLButtonElement;
     slots: RadioCardSlots;
     element: 'button';
     stylesNames: RadioCardStylesNames;
     vars: RadioCardCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Radio/RadioCard/RadioCard.vue.d.ts

@@ -1,16 +1,17 @@
+import type { RootRefProps } from '../../../core';
 import type { RadioCardOwnProps, RadioCardSlots } from './RadioCard.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<RadioCardOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RadioCardOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (checked: boolean) => any;
     "update:modelValue": (checked: boolean) => any;
     "update:checked": (checked: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<RadioCardOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<RadioCardOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((checked: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;

package/lib/components/Radio/RadioGroup/RadioGroup.types.d.ts

@@ -1,5 +1,5 @@
-import type { VNodeChild } from 'vue';
-import type { BoxProps, MantineNode, MantineSize, StylesApiProps } from '../../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, MantineNode, MantineSize, StylesApiProps } from '../../../core';
 export interface RadioGroupContextValue {
     /** Value of the currently selected radio. */
     value: string | null;
@@ -31,7 +31,7 @@ export interface RadioGroupOwnProps extends StylesApiProps<RadioGroupProps> {
     /** Controls the size of every radio in the group that does not set its own `size`. */
     size?: MantineSize;
     /** Props passed down to the `Input.Wrapper` root element. */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /** `name` shared by every radio in the group. Generated automatically when not set. */
     name?: string;
     /**

package/lib/components/Radio/RadioIndicator/RadioIndicator.d.ts

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