@mantine-vue/core 3.5.0 → 3.7.0

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

@@ -1,16 +1,16 @@
 import type { CascaderOption, CascaderSlots } from './Cascader.types';
 type __VLS_Slots = CascaderSlots;
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     change: (value: string[] | null, options: CascaderOption[]) => any;
+    clear: () => any;
     "update:modelValue": (value: string[] | null) => any;
     "dropdown-open": () => any;
     "dropdown-close": () => any;
     "search-change": (value: string) => any;
     "update:searchValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onClear?: (() => any) | undefined;
     onChange?: ((value: string[] | null, options: CascaderOption[]) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;
     "onDropdown-close"?: (() => any) | undefined;

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,12 +2,13 @@ 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;
     exposed: {
         rootElement: Element | null;
+        inputElement: Element | null;
     };
     element: "div";
     stylesNames: import("./Checkbox.types").CheckboxStylesNames;

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

@@ -1,13 +1,12 @@
 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';
-export type CheckboxVariant = 'filled' | 'outline';
+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 = {
-    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
+    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color' | '--checkbox-bg';
 };
 export interface CheckboxIconSlotProps {
     /** Whether the checkbox is in the indeterminate state. */
@@ -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,12 +134,13 @@ export interface CheckboxEmits {
     change: [checked: boolean];
 }
 export type CheckboxFactory = Factory<{
-    props: Omit<CheckboxProps, 'rootRef'>;
+    props: CheckboxProps;
     slots: CheckboxSlots;
     emits: CheckboxEmits;
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;
+        inputElement: Element | null;
     };
     element: 'div';
     stylesNames: CheckboxStylesNames;

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,13 +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

@@ -1,10 +1,8 @@
 import type { VNodeChild } from 'vue';
 import type { BoxMod, BoxProps, MantineColor, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../../core';
-export type CheckboxIndicatorVariant = 'filled' | 'outline';
+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
      *
@@ -64,10 +62,10 @@ export interface CheckboxIndicatorProps extends Omit<BoxProps, keyof CheckboxInd
 }
 export type CheckboxIndicatorStylesNames = 'icon' | 'indicator';
 export type CheckboxIndicatorCssVariables = {
-    indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
+    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: {

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

@@ -1,10 +1,7 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxProps, MantineRadius, StylesApiProps, PolymorphicFactory } from '../../core';
 /** Props declared by `ColorSwatch` itself. See `ColorSwatchProps` for the full public type. */
 export interface ColorSwatchOwnProps extends StylesApiProps<ColorSwatchProps> {
-    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
-    rootRef?: VueRefTarget<Element>;
     /** Valid CSS color to display */
     color: string;
     /**
@@ -38,7 +35,7 @@ export type ColorSwatchCssVariables = {
 };
 /** Public contract of `ColorSwatch`. `component` and `rootRef` come from the factory. */
 export type ColorSwatchFactory = PolymorphicFactory<{
-    props: Omit<ColorSwatchProps, 'component' | 'rootRef'>;
+    props: Omit<ColorSwatchProps, 'component'>;
     slots: ColorSwatchSlots;
     ref: HTMLDivElement;
     exposed: {

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

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

package/lib/components/Combobox/OptionsDropdown/OptionsDropdown.types.d.ts

@@ -1,6 +1,7 @@
 import type { VNodeChild } from 'vue';
 import type { MantineNode, Primitive } from '../../../core';
 import type { ComboboxLikeRenderOptionInput, ComboboxParsedItem, OptionsFilter } from '../Combobox.types';
+import type { ScrollAreaProps } from '../../ScrollArea';
 export type OptionsData = ComboboxParsedItem<Primitive>[];
 export interface OptionsDropdownSlots {
     /** Custom markup for a dropdown option. Takes precedence over the `renderOption` prop. */
@@ -99,5 +100,5 @@ export interface OptionsDropdownProps {
      */
     renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => VNodeChild;
     /** Props passed down to the `ScrollArea.Autosize` of the dropdown. */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
 }

package/lib/components/Combobox/get-combobox-label-id.d.ts

@@ -0,0 +1,9 @@
+import type { InputWrapperOrderPart } from '../Input/InputWrapper/get-input-offsets/get-input-offsets';
+interface GetComboboxLabelIdInput {
+    id: string;
+    label: unknown;
+    labelProps?: Record<string, any>;
+    inputWrapperOrder?: InputWrapperOrderPart[];
+}
+export declare function getComboboxLabelId({ id, label, labelProps, inputWrapperOrder, }: GetComboboxLabelIdInput): any;
+export {};

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

@@ -1,6 +1,7 @@
-import type { VNodeChild } from 'vue';
+import type { InputHTMLAttributes, VNodeChild } from 'vue';
 import type { MantineNode, Primitive, StylesApiProps } from '../../core';
 import type { ComboboxData, ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxProps, ComboboxStylesNames, OptionsFilter } from '../Combobox';
+import type { ScrollAreaProps } from '../ScrollArea';
 export type ComboboxPopoverValue<Multiple extends boolean, Value extends Primitive = string> = Multiple extends true ? Value[] : Value | null;
 export type ComboboxPopoverStylesNames = ComboboxStylesNames;
 export interface ComboboxPopoverProps<Multiple extends boolean = false, Value extends Primitive = string> extends StylesApiProps<ComboboxPopoverProps<Multiple, Value>> {
@@ -47,9 +48,9 @@ export interface ComboboxPopoverProps<Multiple extends boolean = false, Value ex
     /** A function to render content of the option, replaces the default content of the option. Can also be provided via the `#option` slot */
     renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => VNodeChild;
     /** Props passed down to the underlying ScrollArea component in the dropdown */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
     /** Props passed down to the hidden input */
-    hiddenInputProps?: Record<string, any>;
+    hiddenInputProps?: Omit<InputHTMLAttributes, 'value'>;
     /** Hidden input name for form submission */
     name?: string;
     /** Hidden input form for form submission */

package/lib/components/Container/Container.d.ts

@@ -1,5 +1,5 @@
 export declare const Container: import("../..").MantineComponent<{
-    props: Omit<import("./Container.types").ContainerProps, "rootRef">;
+    props: import("./Container.types").ContainerProps;
     ref: HTMLDivElement;
     element: "div";
     stylesNames: import("./Container.types").ContainerStylesNames;