@mantine-vue/core 3.5.0 → 3.7.0

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

@@ -1,6 +1,5 @@
-import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
-import type { BoxMod, BoxProps, MantineElementType, MantineNode, MantineRadius, MantineSize, PolymorphicFactory, SectionSlots, StylesApiProps } from '../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, DataAttributes, MantineElementType, MantineNode, MantineRadius, MantineSize, PolymorphicFactory, SectionSlots, StylesApiProps } from '../../core';
 import type { InputClearButton } from './InputClearButton/InputClearButton';
 import type { InputDescription } from './InputDescription/InputDescription';
 import type { InputError } from './InputError/InputError';
@@ -53,7 +52,7 @@ export interface InputOwnProps extends StylesApiProps<InputFactory> {
     /** Width of the left section. */
     leftSectionWidth?: string | number;
     /** Props passed down to the left section element. */
-    leftSectionProps?: Record<string, any>;
+    leftSectionProps?: HTMLAttributes;
     /**
      * Sets `pointer-events` on the left section.
      *
@@ -68,7 +67,7 @@ export interface InputOwnProps extends StylesApiProps<InputFactory> {
     /** Width of the right section. */
     rightSectionWidth?: string | number;
     /** Props passed down to the right section element. */
-    rightSectionProps?: Record<string, any>;
+    rightSectionProps?: HTMLAttributes;
     /**
      * Sets `pointer-events` on the right section.
      *
@@ -144,7 +143,7 @@ export interface InputOwnProps extends StylesApiProps<InputFactory> {
     /** Content rendered at the bottom of the input, inside the border. */
     __bottomSection?: MantineNode;
     /** Props passed down to the `__bottomSection` element. */
-    __bottomSectionProps?: Record<string, any>;
+    __bottomSectionProps?: HTMLAttributes;
     /**
      * Controls the visual representation of the input.
      *
@@ -168,18 +167,14 @@ export interface InputOwnProps extends StylesApiProps<InputFactory> {
      */
     withAria?: boolean;
     /** Props passed down to the wrapper element. */
-    wrapperProps?: Record<string, any>;
-    /**
-     * Receives the input element -- the node `component` selects,
-     */
-    rootRef?: VueRefTarget<Element>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
 }
 export interface InputProps extends Omit<BoxProps, keyof InputOwnProps>, InputOwnProps {
 }
 export type InputFactory = PolymorphicFactory<{
-    props: Omit<InputProps, 'component' | 'rootRef'>;
+    props: Omit<InputProps, 'component'>;
     slots: InputSlots;
     ref: HTMLInputElement;
     exposed: {

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { InputOwnProps, InputSlots } from './Input.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>>;
@@ -16,13 +17,13 @@ declare const defaultProps: {
 export { varsResolver, renderContent, defaultProps };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
     wrapperElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: any) => any;
     "update:modelValue": (value: any) => any;
-}, string, import("vue").PublicProps, Readonly<InputOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<InputOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputSlots>;

package/lib/components/Input/InputClearButton/InputClearButton.d.ts

@@ -1,5 +1,5 @@
 export declare const InputClearButton: import("../../..").MantineComponent<{
-    props: Omit<import("./InputClearButton.types").InputClearButtonProps, "rootRef">;
+    props: import("./InputClearButton.types").InputClearButtonProps;
     slots: import("./InputClearButton.types").InputClearButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

package/lib/components/Input/InputClearButton/InputClearButton.types.d.ts

@@ -1,10 +1,7 @@
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { VNodeChild } from 'vue';
 import type { BoxProps, MantineSize, StylesApiProps, Factory } from '../../../core';
 /** Props declared by `InputClearButton` itself. See `InputClearButtonProps` for the full public type. */
 export interface InputClearButtonOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Size of the button, by default value is based on input context */
     size?: MantineSize | (string & {});
     /** Controls visual representation of the component. Rendered as the `data-variant` attribute and passed to the Styles API. */
@@ -21,7 +18,7 @@ export interface InputClearButtonSlots {
 export interface InputClearButtonProps extends Omit<BoxProps, keyof InputClearButtonOwnProps>, InputClearButtonOwnProps {
 }
 export type InputClearButtonFactory = Factory<{
-    props: Omit<InputClearButtonProps, 'rootRef'>;
+    props: InputClearButtonProps;
     slots: InputClearButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

package/lib/components/Input/InputClearButton/InputClearButton.vue.d.ts

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

@@ -1,5 +1,5 @@
 export declare const InputDescription: import("../../..").MantineComponent<{
-    props: Omit<import("./InputDescription.types").InputDescriptionProps, "rootRef">;
+    props: import("./InputDescription.types").InputDescriptionProps;
     ref: HTMLParagraphElement;
     slots: import("./InputDescription.types").InputDescriptionSlots;
     element: "p";

package/lib/components/Input/InputDescription/InputDescription.types.d.ts

@@ -1,5 +1,5 @@
-import type { VNodeChild } from 'vue';
-import type { BoxProps, MantineFontSize, StylesApiProps, Factory } from '../../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, MantineFontSize, StylesApiProps, Factory } from '../../../core';
 export type InputDescriptionStylesNames = 'description';
 export type InputDescriptionCssVariables = {
     description: '--input-description-size';
@@ -10,8 +10,6 @@ export interface InputDescriptionSlots {
 }
 /** Props declared by `InputDescription` itself. See `InputDescriptionProps` for the full public type. */
 export interface InputDescriptionOwnProps extends StylesApiProps<InputDescriptionFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Controls description `font-size`.
      *
@@ -26,14 +24,13 @@ export interface InputDescriptionOwnProps extends StylesApiProps<InputDescriptio
      */
     __inheritStyles?: boolean;
 }
-export interface InputDescriptionProps extends Omit<BoxProps, keyof InputDescriptionOwnProps>, InputDescriptionOwnProps {
+export interface InputDescriptionProps extends Omit<BoxProps & HTMLAttributes & DataAttributes, keyof InputDescriptionOwnProps>, InputDescriptionOwnProps {
 }
 export type InputDescriptionFactory = Factory<{
-    props: Omit<InputDescriptionProps, 'rootRef'>;
+    props: InputDescriptionProps;
     ref: HTMLParagraphElement;
     slots: InputDescriptionSlots;
     element: 'p';
     stylesNames: InputDescriptionStylesNames;
     vars: InputDescriptionCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Input/InputDescription/InputDescription.vue.d.ts

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

package/lib/components/Input/InputError/InputError.d.ts

@@ -1,5 +1,5 @@
 export declare const InputError: import("../../..").MantineComponent<{
-    props: Omit<import("./InputError.types").InputErrorProps, "rootRef">;
+    props: import("./InputError.types").InputErrorProps;
     ref: HTMLParagraphElement;
     slots: import("./InputError.types").InputErrorSlots;
     element: "p";

package/lib/components/Input/InputError/InputError.types.d.ts

@@ -1,5 +1,5 @@
-import type { VNodeChild } from 'vue';
-import type { BoxProps, MantineFontSize, StylesApiProps, Factory } from '../../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, MantineFontSize, StylesApiProps, Factory } from '../../../core';
 export type InputErrorStylesNames = 'error';
 export type InputErrorCssVariables = {
     error: '--input-error-size';
@@ -10,8 +10,6 @@ export interface InputErrorSlots {
 }
 /** Props declared by `InputError` itself. See `InputErrorProps` for the full public type. */
 export interface InputErrorOwnProps extends StylesApiProps<InputErrorFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Controls error `font-size`.
      *
@@ -26,14 +24,13 @@ export interface InputErrorOwnProps extends StylesApiProps<InputErrorFactory> {
      */
     __inheritStyles?: boolean;
 }
-export interface InputErrorProps extends Omit<BoxProps, keyof InputErrorOwnProps>, InputErrorOwnProps {
+export interface InputErrorProps extends Omit<BoxProps & HTMLAttributes & DataAttributes, keyof InputErrorOwnProps>, InputErrorOwnProps {
 }
 export type InputErrorFactory = Factory<{
-    props: Omit<InputErrorProps, 'rootRef'>;
+    props: InputErrorProps;
     ref: HTMLParagraphElement;
     slots: InputErrorSlots;
     element: 'p';
     stylesNames: InputErrorStylesNames;
     vars: InputErrorCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Input/InputError/InputError.vue.d.ts

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

package/lib/components/Input/InputLabel/InputLabel.d.ts

@@ -1,5 +1,5 @@
 export declare const InputLabel: import("../../..").MantineComponent<{
-    props: Omit<import("./InputLabel.types").InputLabelProps, "rootRef">;
+    props: import("./InputLabel.types").InputLabelProps;
     ref: HTMLLabelElement;
     slots: import("./InputLabel.types").InputLabelSlots;
     element: "label";

package/lib/components/Input/InputLabel/InputLabel.types.d.ts

@@ -1,5 +1,5 @@
-import type { VNodeChild } from 'vue';
-import type { BoxMod, BoxProps, MantineFontSize, StylesApiProps, Factory } from '../../../core';
+import type { LabelHTMLAttributes, VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, DataAttributes, MantineFontSize, StylesApiProps, Factory } from '../../../core';
 export type InputLabelStylesNames = 'label' | 'required';
 export type InputLabelCssVariables = {
     label: '--input-label-size' | '--input-asterisk-color';
@@ -10,8 +10,6 @@ export interface InputLabelSlots {
 }
 /** Props declared by `InputLabel` itself. See `InputLabelProps` for the full public type. */
 export interface InputLabelOwnProps extends StylesApiProps<InputLabelFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * If set, the required asterisk is displayed next to the label.
      *
@@ -35,14 +33,13 @@ export interface InputLabelOwnProps extends StylesApiProps<InputLabelFactory> {
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
 }
-export interface InputLabelProps extends Omit<BoxProps, keyof InputLabelOwnProps>, InputLabelOwnProps {
+export interface InputLabelProps extends Omit<BoxProps & LabelHTMLAttributes & DataAttributes, keyof InputLabelOwnProps>, InputLabelOwnProps {
 }
 export type InputLabelFactory = Factory<{
-    props: Omit<InputLabelProps, 'rootRef'>;
+    props: InputLabelProps;
     ref: HTMLLabelElement;
     slots: InputLabelSlots;
     element: 'label';
     stylesNames: InputLabelStylesNames;
     vars: InputLabelCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Input/InputLabel/InputLabel.vue.d.ts

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../../core';
 import type { InputLabelOwnProps, InputLabelSlots } from './InputLabel.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>>;
@@ -7,9 +8,9 @@ declare const defaultProps: {
 export { varsResolver, defaultProps };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputLabelOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputLabelOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputLabelOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputLabelSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputLabelOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputLabelSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/Input/InputPlaceholder/InputPlaceholder.d.ts

@@ -1,5 +1,5 @@
 export declare const InputPlaceholder: import("../../..").MantineComponent<{
-    props: Omit<import("./InputPlaceholder.types").InputPlaceholderProps, "rootRef">;
+    props: import("./InputPlaceholder.types").InputPlaceholderProps;
     ref: HTMLSpanElement;
     slots: import("./InputPlaceholder.types").InputPlaceholderSlots;
     element: "span";

package/lib/components/Input/InputPlaceholder/InputPlaceholder.types.d.ts

@@ -3,8 +3,6 @@ import type { BoxMod, BoxProps, StylesApiProps, Factory } from '../../../core';
 export type InputPlaceholderStylesNames = 'placeholder';
 /** Props declared by `InputPlaceholder` itself. See `InputPlaceholderProps` for the full public type. */
 export interface InputPlaceholderOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * If set, the placeholder has error styles
      *
@@ -27,9 +25,8 @@ export interface InputPlaceholderSlots {
 export interface InputPlaceholderProps extends Omit<BoxProps, keyof InputPlaceholderOwnProps>, InputPlaceholderOwnProps {
 }
 export type InputPlaceholderFactory = Factory<{
-    props: Omit<InputPlaceholderProps, 'rootRef'>;
+    props: InputPlaceholderProps;
     ref: HTMLSpanElement;
     slots: InputPlaceholderSlots;
     element: 'span';
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/Input/InputPlaceholder/InputPlaceholder.vue.d.ts

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

@@ -1,5 +1,8 @@
 import type { VNodeChild } from 'vue';
-import type { BoxMod, BoxProps, MantineFontSize, MantineNode, StylesApiProps } from '../../../core';
+import type { BoxMod, BoxProps, DataAttributes, MantineFontSize, MantineNode, StylesApiProps } from '../../../core';
+import type { InputDescriptionProps } from '../InputDescription/InputDescription.types';
+import type { InputErrorProps } from '../InputError/InputError.types';
+import type { InputLabelProps } from '../InputLabel/InputLabel.types';
 import type { InputWrapperOrderPart } from './get-input-offsets/get-input-offsets';
 export type InputWrapperStylesNames = 'root' | 'label' | 'required' | 'description' | 'error';
 export type InputWrapperCssVariables = {
@@ -56,11 +59,11 @@ export interface InputWrapperOwnProps extends StylesApiProps {
      */
     withAsterisk?: boolean;
     /** Props passed down to the `Input.Label` component. */
-    labelProps?: Record<string, any>;
+    labelProps?: InputLabelProps & DataAttributes;
     /** Props passed down to the `Input.Description` component. */
-    descriptionProps?: Record<string, any>;
+    descriptionProps?: InputDescriptionProps & DataAttributes;
     /** Props passed down to the `Input.Error` component. */
-    errorProps?: Record<string, any>;
+    errorProps?: InputErrorProps & DataAttributes;
     /** Function that wraps the input before it is rendered in the layout. */
     inputContainer?: (children: any) => any;
     /**

package/lib/components/InputBase/InputBase.d.ts

@@ -1,5 +1,5 @@
 export declare const InputBase: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./InputBase.types").InputBaseProps, "component" | "rootRef">;
+    props: Omit<import("./InputBase.types").InputBaseProps, "component">;
     slots: import("./InputBase.types").InputBaseSlots;
     ref: HTMLInputElement;
     defaultComponent: "input";

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

@@ -1,7 +1,6 @@
-import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
-import type { BoxMod, BoxProps, MantineElementType, MantineNode, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
-import type { InputSlots } from '../Input/Input';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, DataAttributes, MantineElementType, MantineNode, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
+import type { InputDescriptionProps, InputErrorProps, InputLabelProps, InputSlots } from '../Input';
 export type InputBaseStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection' | 'root' | 'label' | 'required' | 'description' | 'error';
 export type InputBaseVariant = 'default' | 'filled' | 'unstyled';
 export interface InputBaseSlots extends InputSlots {
@@ -59,11 +58,11 @@ export interface InputBaseOwnProps extends StylesApiProps<InputBaseFactory> {
      */
     withAsterisk?: boolean;
     /** Props passed down to the `Input.Label` component. */
-    labelProps?: Record<string, any>;
+    labelProps?: InputLabelProps & DataAttributes;
     /** Props passed down to the `Input.Description` component. */
-    descriptionProps?: Record<string, any>;
+    descriptionProps?: InputDescriptionProps & DataAttributes;
     /** Props passed down to the `Input.Error` component. */
-    errorProps?: Record<string, any>;
+    errorProps?: InputErrorProps & DataAttributes;
     /** Function that renders the input around the given children. */
     inputContainer?: (children: any) => any;
     /**
@@ -93,7 +92,7 @@ export interface InputBaseOwnProps extends StylesApiProps<InputBaseFactory> {
      */
     variant?: InputBaseVariant;
     /** Props passed down to the root element (`Input.Wrapper` component). */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: HTMLAttributes & DataAttributes;
     /**
      * If set, the input can have multiple lines, for example when `component="textarea"`.
      *
@@ -114,7 +113,7 @@ export interface InputBaseOwnProps extends StylesApiProps<InputBaseFactory> {
     /** Width of the left section. */
     leftSectionWidth?: string | number;
     /** Props passed down to the left section element. */
-    leftSectionProps?: Record<string, any>;
+    leftSectionProps?: HTMLAttributes;
     /**
      * Sets `pointer-events` on the left section.
      *
@@ -129,7 +128,7 @@ export interface InputBaseOwnProps extends StylesApiProps<InputBaseFactory> {
     /** Width of the right section. */
     rightSectionWidth?: string | number;
     /** Props passed down to the right section element. */
-    rightSectionProps?: Record<string, any>;
+    rightSectionProps?: HTMLAttributes;
     /**
      * Sets `pointer-events` on the right section.
      *
@@ -189,18 +188,14 @@ export interface InputBaseOwnProps extends StylesApiProps<InputBaseFactory> {
     /** Content rendered at the bottom of the input, inside the border. */
     __bottomSection?: MantineNode;
     /** Props passed down to the `__bottomSection` element. */
-    __bottomSectionProps?: Record<string, any>;
-    /**
-     * Receives the input element
-     */
-    rootRef?: VueRefTarget<Element>;
+    __bottomSectionProps?: HTMLAttributes;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
 }
 export interface InputBaseProps extends Omit<BoxProps, keyof InputBaseOwnProps>, InputBaseOwnProps {
 }
 export type InputBaseFactory = PolymorphicFactory<{
-    props: Omit<InputBaseProps, 'component' | 'rootRef'>;
+    props: Omit<InputBaseProps, 'component'>;
     slots: InputBaseSlots;
     ref: HTMLInputElement;
     defaultComponent: 'input';

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { InputBaseOwnProps, InputBaseSlots } from './InputBase.types';
 declare const defaultProps: {
     readonly component: "input";
@@ -10,10 +11,10 @@ declare const defaultProps: {
 export { defaultProps };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputBaseOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputBaseOwnProps & RootRefProps<Element>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: any) => any;
     "update:modelValue": (value: any) => any;
-}, string, import("vue").PublicProps, Readonly<InputBaseOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<InputBaseOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputBaseSlots>;

package/lib/components/Kbd/Kbd.d.ts

@@ -1,5 +1,5 @@
 export declare const Kbd: import("../..").MantineComponent<{
-    props: Omit<import("./Kbd.types").KbdProps, "rootRef">;
+    props: import("./Kbd.types").KbdProps;
     ref: HTMLElement;
     slots: import("./Kbd.types").KbdSlots;
     element: "kbd";

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

@@ -10,8 +10,6 @@ export interface KbdSlots {
 }
 /** Props declared by `Kbd` itself. See `KbdProps` for the full public type. */
 export interface KbdOwnProps extends StylesApiProps<KbdFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Controls `font-size` and `padding`.
      * @default 'sm'
@@ -21,11 +19,10 @@ export interface KbdOwnProps extends StylesApiProps<KbdFactory> {
 export interface KbdProps extends Omit<BoxProps, keyof KbdOwnProps>, KbdOwnProps {
 }
 export type KbdFactory = Factory<{
-    props: Omit<KbdProps, 'rootRef'>;
+    props: KbdProps;
     ref: HTMLElement;
     slots: KbdSlots;
     element: 'kbd';
     stylesNames: KbdStylesNames;
     vars: KbdCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import { ListItem } from './ListItem/ListItem';
 export declare const List: import("../..").MantineComponent<{
-    props: Omit<import("./List.types").ListProps, "rootRef">;
+    props: import("./List.types").ListProps;
     ref: HTMLUListElement;
     slots: import("./List.types").ListSlots;
     element: "ul";

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

@@ -3,8 +3,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxMod, BoxProps, MantineNode, MantineSize, MantineSpacing, StylesApiProps, Factory } from '../../core';
 /** Props declared by `List` itself. See `ListProps` for the full public type. */
 export interface ListOwnProps extends StylesApiProps<ListFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * List type
      *
@@ -63,7 +61,7 @@ export type ListCssVariables = {
     root: '--list-fz' | '--list-lh' | '--list-spacing';
 };
 export type ListFactory = Factory<{
-    props: Omit<ListProps, 'rootRef'>;
+    props: ListProps;
     ref: HTMLUListElement;
     slots: ListSlots;
     element: 'ul';
@@ -73,4 +71,3 @@ export type ListFactory = Factory<{
         Item: typeof ListItem;
     };
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/List/ListItem/ListItem.d.ts

@@ -1,5 +1,5 @@
 export declare const ListItem: import("../../..").MantineComponent<{
-    props: Omit<import("./ListItem.types").ListItemProps, "rootRef">;
+    props: import("./ListItem.types").ListItemProps;
     ref: HTMLLIElement;
     slots: import("./ListItem.types").ListItemSlots;
     element: "li";

package/lib/components/List/ListItem/ListItem.types.d.ts

@@ -2,8 +2,6 @@ import type { VNodeChild } from 'vue';
 import type { BoxMod, BoxProps, MantineNode, StylesApiProps, Factory } from '../../../core';
 /** Props declared by `ListItem` itself. See `ListItemProps` for the full public type. */
 export interface ListItemOwnProps extends Pick<StylesApiProps<ListItemFactory>, 'classNames' | 'styles' | 'vars'> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Icon to replace item bullet */
     icon?: MantineNode;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
@@ -19,10 +17,9 @@ export interface ListItemProps extends Omit<BoxProps, keyof ListItemOwnProps>, L
 }
 export type ListItemStylesNames = 'item' | 'itemWrapper' | 'itemIcon' | 'itemLabel';
 export type ListItemFactory = Factory<{
-    props: Omit<ListItemProps, 'rootRef'>;
+    props: ListItemProps;
     ref: HTMLLIElement;
     slots: ListItemSlots;
     element: 'li';
     stylesNames: ListItemStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/List/ListItem/ListItem.vue.d.ts

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