@mantine-vue/core 3.6.0 → 3.7.0

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.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.
      *

package/lib/components/Center/Center.d.ts

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

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

@@ -1,5 +1,4 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 export type CenterStylesNames = 'root';
 export interface CenterSlots {
@@ -8,8 +7,6 @@ export interface CenterSlots {
 }
 /** Props declared by `Center` itself. See `CenterProps` for the full public type. */
 export interface CenterOwnProps extends StylesApiProps<CenterProps> {
-    /** 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 `Center`.
      * @default 'div'
@@ -25,7 +22,7 @@ export interface CenterProps extends Omit<BoxProps, keyof CenterOwnProps>, Cente
 }
 /** Public contract of `Center`. `component` and `rootRef` come from the factory. */
 export type CenterFactory = PolymorphicFactory<{
-    props: Omit<CenterProps, 'component' | 'rootRef'>;
+    props: Omit<CenterProps, 'component'>;
     slots: CenterSlots;
     ref: HTMLDivElement;
     exposed: {

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

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

@@ -2,7 +2,7 @@ import { CheckboxCard } from './CheckboxCard/CheckboxCard';
 import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 import { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';
 export declare const Checkbox: import("../..").MantineComponent<{
-    props: Omit<import("./Checkbox.types").CheckboxProps, "rootRef">;
+    props: import("./Checkbox.types").CheckboxProps;
     slots: import("./Checkbox.types").CheckboxSlots;
     emits: import("./Checkbox.types").CheckboxEmits;
     ref: HTMLDivElement;

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

@@ -1,9 +1,8 @@
 import type { CheckboxCard } from './CheckboxCard/CheckboxCard';
 import type { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';
 import type { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
-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 CheckboxVariant = 'filled' | 'outline' | 'light';
 export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | 'root' | 'body' | 'labelWrapper' | 'label' | 'description' | 'error';
 export type CheckboxCssVariables = {
@@ -56,7 +55,7 @@ export interface CheckboxOwnProps extends StylesApiProps<CheckboxFactory> {
      */
     radius?: MantineRadius;
     /** Props passed down to the root element. */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /**
      * Position of the label relative to the checkbox.
      *
@@ -84,8 +83,6 @@ export interface CheckboxOwnProps extends StylesApiProps<CheckboxFactory> {
      * Can also be set with the scoped `icon` slot – the slot takes precedence.
      */
     icon?: Component;
-    /** Ref assigned to the root element. */
-    rootRef?: VueRefTarget<Element>;
     /** Key of `theme.colors` or any valid CSS color used for the icon. */
     iconColor?: MantineColor;
     /**
@@ -137,7 +134,7 @@ export interface CheckboxEmits {
     change: [checked: boolean];
 }
 export type CheckboxFactory = Factory<{
-    props: Omit<CheckboxProps, 'rootRef'>;
+    props: CheckboxProps;
     slots: CheckboxSlots;
     emits: CheckboxEmits;
     ref: HTMLDivElement;

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { CheckboxOwnProps, CheckboxSlots } from './Checkbox.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<CheckboxOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxOwnProps & 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<CheckboxOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<CheckboxOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((checked: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;

package/lib/components/Checkbox/CheckboxCard/CheckboxCard.d.ts

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

package/lib/components/Checkbox/CheckboxCard/CheckboxCard.types.d.ts

@@ -16,8 +16,6 @@ export interface CheckboxCardSlots {
 }
 /** Props declared by `CheckboxCard` itself. See `CheckboxCardProps` for the full public type. */
 export interface CheckboxCardOwnProps extends StylesApiProps<CheckboxCardFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Checked state, bound with `v-model`. */
     modelValue?: boolean;
     /** Checked state, bound with `v-model:checked`. */
@@ -46,11 +44,10 @@ export interface CheckboxCardOwnProps extends StylesApiProps<CheckboxCardFactory
 export interface CheckboxCardProps extends Omit<BoxProps, keyof CheckboxCardOwnProps>, CheckboxCardOwnProps {
 }
 export type CheckboxCardFactory = Factory<{
-    props: Omit<CheckboxCardProps, 'rootRef'>;
+    props: CheckboxCardProps;
     ref: HTMLButtonElement;
     slots: CheckboxCardSlots;
     element: 'button';
     stylesNames: CheckboxCardStylesNames;
     vars: CheckboxCardCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Checkbox/CheckboxCard/CheckboxCard.vue.d.ts

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

package/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.types.d.ts

@@ -1,5 +1,5 @@
-import type { VNodeChild } from 'vue';
-import type { BoxProps, MantineNode, MantineSize, StylesApiProps } from '../../../core';
+import type { HTMLAttributes, InputHTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, MantineNode, MantineSize, StylesApiProps } from '../../../core';
 export interface CheckboxGroupContextValue {
     /** Values of the currently selected checkboxes. */
     value: string[];
@@ -29,7 +29,7 @@ export interface CheckboxGroupOwnProps extends StylesApiProps<CheckboxGroupProps
     /** Controls the size of every checkbox in the group that does not set its own `size`. */
     size?: MantineSize | (string & {});
     /** Props passed down to the `Input.Wrapper` root element. */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /**
      * If set, the selection cannot be changed by the user.
      *
@@ -39,7 +39,7 @@ export interface CheckboxGroupOwnProps extends StylesApiProps<CheckboxGroupProps
     /** `name` of the hidden input that carries the joined values in an uncontrolled form. */
     name?: string;
     /** Props passed down to the hidden input. */
-    hiddenInputProps?: Record<string, any>;
+    hiddenInputProps?: InputHTMLAttributes & DataAttributes;
     /**
      * Separator used to join the values in the hidden input.
      *

package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.d.ts

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

package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.types.d.ts

@@ -3,8 +3,6 @@ import type { BoxMod, BoxProps, MantineColor, MantineRadius, MantineSize, Styles
 export type CheckboxIndicatorVariant = 'filled' | 'outline' | 'light';
 /** Props declared by `CheckboxIndicator` itself. See `CheckboxIndicatorProps` for the full public type. */
 export interface CheckboxIndicatorOwnProps extends StylesApiProps<CheckboxIndicatorFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Key of `theme.colors` or any valid CSS color to set input background color in checked state
      *
@@ -67,7 +65,7 @@ export type CheckboxIndicatorCssVariables = {
     indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color' | '--checkbox-bg';
 };
 export type CheckboxIndicatorFactory = Factory<{
-    props: Omit<CheckboxIndicatorProps, 'rootRef'>;
+    props: CheckboxIndicatorProps;
     ref: HTMLDivElement;
     slots: CheckboxIndicatorSlots;
     element: 'div';
@@ -75,4 +73,3 @@ export type CheckboxIndicatorFactory = Factory<{
     vars: CheckboxIndicatorCssVariables;
     variant: CheckboxIndicatorVariant;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.vue.d.ts

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

package/lib/components/Chip/Chip.d.ts

@@ -1,6 +1,6 @@
 import { ChipGroup } from './ChipGroup/ChipGroup';
 export declare const Chip: import("../..").MantineComponent<{
-    props: Omit<import("./Chip.types").ChipProps, "rootRef">;
+    props: import("./Chip.types").ChipProps;
     slots: import("./Chip.types").ChipSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,7 +1,6 @@
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { ChipGroup } from './ChipGroup/ChipGroup';
-import type { VNodeChild } from 'vue';
-import type { BoxMod, BoxProps, MantineColor, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, DataAttributes, MantineColor, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
 export type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';
 export type ChipVariant = 'outline' | 'filled' | 'light';
 export type ChipCssVariables = {
@@ -63,14 +62,12 @@ export interface ChipOwnProps extends StylesApiProps<ChipFactory> {
      */
     disabled?: boolean;
     /** Props passed down to the root element. */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /**
      * Checked icon. `null` or `false` hides it; a function receives the generated icon
      * styles. Can also be set with the scoped `icon` slot.
      */
     icon?: any;
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * If set, adjusts text color based on background color.
      * Inherits `theme.autoContrast` when not set.
@@ -88,7 +85,7 @@ export interface ChipOwnProps extends StylesApiProps<ChipFactory> {
 export interface ChipProps extends Omit<BoxProps, keyof ChipOwnProps>, ChipOwnProps {
 }
 export type ChipFactory = Factory<{
-    props: Omit<ChipProps, 'rootRef'>;
+    props: ChipProps;
     slots: ChipSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { ChipOwnProps, ChipSlots } from './Chip.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>>;
@@ -9,13 +10,13 @@ declare const defaultProps: {
 export { varsResolver, defaultProps };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipOwnProps & 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<ChipOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ChipOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((checked: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;

package/lib/components/CloseButton/CloseButton.d.ts

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

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

@@ -61,7 +61,7 @@ export type CloseButtonCssVariables = {
     root: '--cb-icon-size' | '--cb-size' | '--cb-radius';
 };
 export type CloseButtonFactory = PolymorphicFactory<{
-    props: Omit<CloseButtonProps, 'component' | 'rootRef'>;
+    props: Omit<CloseButtonProps, 'component'>;
     slots: CloseButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

package/lib/components/Code/Code.d.ts

@@ -1,5 +1,5 @@
 export declare const Code: import("../..").MantineComponent<{
-    props: Omit<import("./Code.types").CodeProps, "rootRef">;
+    props: import("./Code.types").CodeProps;
     ref: HTMLElement;
     slots: import("./Code.types").CodeSlots;
     element: "code";

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

@@ -10,8 +10,6 @@ export interface CodeSlots {
 }
 /** Props declared by `Code` itself. See `CodeProps` for the full public type. */
 export interface CodeOwnProps extends StylesApiProps<CodeFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Key of `theme.colors` or any valid CSS color, controls `background-color`
      * of the code. By default, calculated based on the color scheme.
@@ -26,11 +24,10 @@ export interface CodeOwnProps extends StylesApiProps<CodeFactory> {
 export interface CodeProps extends Omit<BoxProps, keyof CodeOwnProps>, CodeOwnProps {
 }
 export type CodeFactory = Factory<{
-    props: Omit<CodeProps, 'rootRef'>;
+    props: CodeProps;
     ref: HTMLElement;
     slots: CodeSlots;
     element: 'code';
     stylesNames: CodeStylesNames;
     vars: CodeCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/Collapse/Collapse.d.ts

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

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

@@ -2,8 +2,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxProps, Factory } from '../../core';
 /** Props declared by `Collapse` itself. See `CollapseProps` for the full public type. */
 export interface CollapseOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Collapse orientation
      *
@@ -44,9 +42,8 @@ export interface CollapseSlots {
     default?: () => VNodeChild;
 }
 export type CollapseFactory = Factory<{
-    props: Omit<CollapseProps, 'rootRef'>;
+    props: CollapseProps;
     ref: HTMLDivElement;
     slots: CollapseSlots;
     element: 'div';
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,12 +1,13 @@
+import type { RootRefProps } from '../../core';
 import type { CollapseOwnProps, CollapseSlots } from './Collapse.types';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapseOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapseOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "transition-end": () => any;
     "transition-start": () => any;
-}, string, import("vue").PublicProps, Readonly<CollapseOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<CollapseOwnProps & RootRefProps<Element>> & Readonly<{
     "onTransition-end"?: (() => any) | undefined;
     "onTransition-start"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapseSlots>;

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

@@ -1,6 +1,7 @@
 import type { VNodeChild } from 'vue';
 import type { ColorFormat } from '../ColorPicker';
 import type { InputBaseSlots } from '../InputBase';
+import type { PopoverProps } from '../Popover';
 export type ColorInputStylesNames = string;
 export interface ColorInputSlots extends InputBaseSlots {
     /** Icon of the eye dropper button. Alternative to the `eyeDropperIcon` prop. */
@@ -52,7 +53,7 @@ export interface ColorInputProps {
      */
     withEyeDropper?: boolean;
     /** Props passed down to the `Popover` that holds the picker. */
-    popoverProps?: Record<string, any>;
+    popoverProps?: PopoverProps;
     /**
      * If set, the dropdown closes when a swatch is clicked.
      *

package/lib/components/ColorPicker/ColorPicker.props.types.d.ts

@@ -1,4 +1,5 @@
-import type { BoxMod, BoxProps, MantineSize, StylesApiProps } from '../../core';
+import type { InputHTMLAttributes } from 'vue';
+import type { BoxMod, BoxProps, DataAttributes, MantineSize, StylesApiProps } from '../../core';
 import type { ColorFormat } from './ColorPicker.types';
 export type ColorPickerStylesNames = 'wrapper' | 'preview' | 'body' | 'sliders' | 'slider' | 'sliderOverlay' | 'thumb' | 'saturation' | 'saturationOverlay' | 'swatches' | 'swatch';
 export type ColorPickerCssVariables = {
@@ -58,7 +59,7 @@ export interface ColorPickerOwnProps extends StylesApiProps<ColorPickerProps> {
     /** `name` of the hidden input that carries the colour in an uncontrolled form. */
     name?: string;
     /** Props passed down to the hidden input. */
-    hiddenInputProps?: Record<string, any>;
+    hiddenInputProps?: InputHTMLAttributes & DataAttributes;
     /**
      * Static selector used as the base of the generated class names.
      *

package/lib/components/ColorPicker/ColorSlider/ColorSlider.types.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'vue';
 import type { BoxProps, StylesApiProps } from '../../../core';
 export type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';
 /** Props shared by `HueSlider` and `AlphaSlider`, which both wrap `ColorSlider`. */
@@ -24,7 +25,7 @@ export interface ColorSliderOwnProps extends ColorSliderBaseProps {
     /** Value that corresponds to the far right of the track. */
     maxValue: number;
     /** Style objects layered over the track to draw the gradient. */
-    overlays: Record<string, any>[];
+    overlays: CSSProperties[];
     /** If set, the value is rounded to a whole number. */
     round: boolean;
     /**

package/lib/components/ColorSwatch/ColorSwatch.d.ts

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