@mantine-vue/core 3.5.0 → 3.7.0

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

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

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

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

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

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

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

@@ -1,16 +1,17 @@
+import type { RootRefProps } from '../../../core';
 import type { RadioCardOwnProps, RadioCardSlots } from './RadioCard.types';
 /** Module scope: created once, not per component instance. */
 declare const varsResolver: (theme: import("../../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
 export { varsResolver };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RadioCardOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RadioCardOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (checked: boolean) => any;
     "update:modelValue": (checked: boolean) => any;
     "update:checked": (checked: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<RadioCardOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<RadioCardOwnProps & RootRefProps<Element>> & Readonly<{
     onChange?: ((checked: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;

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

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

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

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

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

@@ -1,10 +1,8 @@
 import type { Component, VNodeChild } from 'vue';
 import type { BoxMod, BoxProps, MantineColor, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../../core';
-export type RadioIndicatorVariant = 'filled' | 'outline';
+export type RadioIndicatorVariant = 'filled' | 'outline' | 'light';
 /** Props declared by `RadioIndicator` itself. See `RadioIndicatorProps` for the full public type. */
 export interface RadioIndicatorOwnProps extends StylesApiProps<RadioIndicatorFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Key of theme.colors or any valid CSS color to set indicator background color in checked state
      *
@@ -57,10 +55,10 @@ export interface RadioIndicatorProps extends Omit<BoxProps, keyof RadioIndicator
 }
 export type RadioIndicatorStylesNames = 'icon' | 'indicator';
 export type RadioIndicatorCssVariables = {
-    indicator: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-size';
+    indicator: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size' | '--radio-bg';
 };
 export type RadioIndicatorFactory = Factory<{
-    props: Omit<RadioIndicatorProps, 'rootRef'>;
+    props: RadioIndicatorProps;
     ref: HTMLDivElement;
     slots: RadioIndicatorSlots;
     element: 'div';
@@ -68,4 +66,3 @@ export type RadioIndicatorFactory = Factory<{
     vars: RadioIndicatorCssVariables;
     variant: RadioIndicatorVariant;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/RingProgress/RingProgress.d.ts

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

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

@@ -20,8 +20,6 @@ export interface RingProgressSlots {
 }
 /** Props declared by `RingProgress` itself. See `RingProgressProps` for the full public type. */
 export interface RingProgressOwnProps extends StylesApiProps<RingProgressFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Content rendered in the middle of the ring.
      * Can also be set with the `label` slot – the slot takes precedence.
@@ -63,11 +61,10 @@ export interface RingProgressOwnProps extends StylesApiProps<RingProgressFactory
 export interface RingProgressProps extends Omit<BoxProps, keyof RingProgressOwnProps>, RingProgressOwnProps {
 }
 export type RingProgressFactory = Factory<{
-    props: Omit<RingProgressProps, 'rootRef'>;
+    props: RingProgressProps;
     ref: HTMLDivElement;
     slots: RingProgressSlots;
     element: 'div';
     stylesNames: RingProgressStylesNames;
     vars: RingProgressCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { RingProgressOwnProps, RingProgressSlots } from './RingProgress.types';
 import type { VNodeChild } from 'vue';
 declare const defaultProps: {
@@ -22,9 +23,9 @@ declare function getClampedThickness(thickness: number, size: number): number;
 export { defaultProps, varsResolver, RingLabel, getClampedThickness };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RingProgressOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<RingProgressOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RingProgressOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, RingProgressSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RingProgressOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, RingProgressSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/RollingNumber/RollingNumber.d.ts

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

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

@@ -8,8 +8,6 @@ export type RollingNumberCssVariables = {
  * See `RollingNumberProps` for the full public type.
  */
 export interface RollingNumberOwnProps extends StylesApiProps<RollingNumberFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Number to display. Changing it rolls the digits to the new value. */
     value: number;
     /** Text rendered before the number. */
@@ -63,10 +61,9 @@ export interface RollingNumberOwnProps extends StylesApiProps<RollingNumberFacto
 export interface RollingNumberProps extends Omit<BoxProps, keyof RollingNumberOwnProps>, RollingNumberOwnProps {
 }
 export type RollingNumberFactory = Factory<{
-    props: Omit<RollingNumberProps, 'rootRef'>;
+    props: RollingNumberProps;
     ref: HTMLDivElement;
     element: 'div';
     stylesNames: RollingNumberStylesNames;
     vars: RollingNumberCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { RollingNumberOwnProps } from './RollingNumber.types';
 declare const defaultProps: {
     readonly animationDuration: 600;
@@ -10,6 +11,6 @@ declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ct
 export { defaultProps, varsResolver };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<RollingNumberOwnProps, {
+declare const __VLS_export: import("vue").DefineComponent<RollingNumberOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RollingNumberOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RollingNumberOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/ScrollArea/ScrollArea.d.ts

@@ -15,6 +15,7 @@ export declare const ScrollArea: import("../..").MantineComponent<{
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;
+        viewport: HTMLDivElement | null;
     };
     element: "div";
     stylesNames: import("./ScrollArea.props.types").ScrollAreaStylesNames;

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

@@ -1,7 +1,6 @@
 import type { ScrollAreaAutosize } from './ScrollArea';
-import type { VueRefTarget } from '@mantine-vue/hooks';
-import type { VNodeChild } from 'vue';
-import type { BoxProps, StylesApiProps, Factory } from '../../core';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, StylesApiProps, Factory } from '../../core';
 export type ScrollAreaStylesNames = 'root' | 'viewport' | 'scrollbar' | 'thumb' | 'corner' | 'content';
 export type ScrollAreaCssVariables = {
     root: '--scrollarea-scrollbar-size' | '--scrollarea-over-scroll-behavior';
@@ -14,8 +13,6 @@ export interface ScrollAreaSlots {
 }
 /** Props declared by `ScrollArea` itself. See `ScrollAreaProps` for the full public type. */
 export interface ScrollAreaOwnProps extends StylesApiProps<ScrollAreaFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Width of the scrollbars in px. */
     scrollbarSize?: number | string;
     /**
@@ -40,7 +37,7 @@ export interface ScrollAreaOwnProps extends StylesApiProps<ScrollAreaFactory> {
     /** Adds padding so the content is not covered by the scrollbars. */
     offsetScrollbars?: boolean | 'x' | 'y' | 'present';
     /** Props passed down to the viewport element. */
-    viewportProps?: Record<string, any>;
+    viewportProps?: HTMLAttributes & DataAttributes;
     /** Value of the `overscroll-behavior` CSS property applied to the viewport. */
     overscrollBehavior?: string;
     /** Scroll offsets the viewport starts at. */
@@ -51,7 +48,7 @@ export interface ScrollAreaOwnProps extends StylesApiProps<ScrollAreaFactory> {
     /** Side the vertical scrollbar is rendered on. */
     verticalScrollbarPosition?: 'left' | 'right';
 }
-export interface ScrollAreaProps extends Omit<BoxProps, keyof ScrollAreaOwnProps>, ScrollAreaOwnProps {
+export interface ScrollAreaProps extends Omit<BoxProps & HTMLAttributes & DataAttributes, keyof ScrollAreaOwnProps>, ScrollAreaOwnProps {
 }
 export interface ScrollAreaEmits {
     /** Emitted with the scroll offsets whenever the viewport scrolls. */
@@ -75,6 +72,7 @@ export type ScrollAreaFactory = Factory<{
     ref: HTMLDivElement;
     exposed: {
         rootElement: Element | null;
+        viewport: HTMLDivElement | null;
     };
     element: 'div';
     stylesNames: ScrollAreaStylesNames;

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { ScrollAreaSlots } from './ScrollArea.props.types';
 import type { ScrollAreaOwnProps } from './ScrollArea.props.types';
 declare const defaultProps: {
@@ -11,8 +12,9 @@ declare function toOffsetScrollbars(value: ScrollAreaOwnProps['offsetScrollbars'
 export { defaultProps, varsResolver, toOffsetScrollbars };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScrollAreaOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScrollAreaOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
+    viewport: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "scroll-position-change": (position: {
         x: number;
@@ -22,7 +24,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Scroll
     "top-reached": () => any;
     "left-reached": () => any;
     "right-reached": () => any;
-}, string, import("vue").PublicProps, Readonly<ScrollAreaOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ScrollAreaOwnProps & RootRefProps<Element>> & Readonly<{
     "onScroll-position-change"?: ((position: {
         x: number;
         y: number;

package/lib/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.d.ts

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

package/lib/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.types.d.ts

@@ -10,8 +10,6 @@ export interface ScrollAreaRootSlots {
  * See `ScrollAreaRootProps` for the full public type.
  */
 export interface ScrollAreaRootOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Styles resolver shared with every part of the scroll area through context. */
     getStyles: ScrollAreaContextValue['getStyles'];
     /**
@@ -32,9 +30,8 @@ export interface ScrollAreaRootOwnProps {
 export interface ScrollAreaRootProps extends Omit<BoxProps, keyof ScrollAreaRootOwnProps>, ScrollAreaRootOwnProps {
 }
 export type ScrollAreaRootFactory = Factory<{
-    props: Omit<ScrollAreaRootProps, 'rootRef'>;
+    props: ScrollAreaRootProps;
     ref: HTMLDivElement;
     slots: ScrollAreaRootSlots;
     element: 'div';
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.vue.d.ts

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../../core';
 import type { ScrollAreaRootOwnProps, ScrollAreaRootSlots } from './ScrollAreaRoot.types';
 declare const defaultProps: {
     readonly scrollHideDelay: 1000;
@@ -6,9 +7,9 @@ declare const defaultProps: {
 export { defaultProps };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScrollAreaRootOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScrollAreaRootOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaRootOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScrollAreaRootSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaRootOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScrollAreaRootSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.d.ts

@@ -1,5 +1,5 @@
 export declare const ScrollAreaViewport: import("../../..").MantineComponent<{
-    props: Omit<import("./ScrollAreaViewport.types").ScrollAreaViewportProps, "rootRef">;
+    props: import("./ScrollAreaViewport.types").ScrollAreaViewportProps;
     ref: HTMLDivElement;
     slots: import("./ScrollAreaViewport.types").ScrollAreaViewportSlots;
     emits: import("./ScrollAreaViewport.types").ScrollAreaViewportEmits;

package/lib/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.types.d.ts

@@ -5,8 +5,6 @@ export interface ScrollAreaViewportSlots {
     default?: () => VNodeChild;
 }
 export interface ScrollAreaViewportOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
 }
 export interface ScrollAreaViewportEmits {
     /** Emitted with the viewport element once it is mounted. */
@@ -18,10 +16,9 @@ export interface ScrollAreaViewportProps extends Omit<BoxProps, keyof ScrollArea
 }
 export type ScrollAreaViewportStylesNames = 'content';
 export type ScrollAreaViewportFactory = Factory<{
-    props: Omit<ScrollAreaViewportProps, 'rootRef'>;
+    props: ScrollAreaViewportProps;
     ref: HTMLDivElement;
     slots: ScrollAreaViewportSlots;
     emits: ScrollAreaViewportEmits;
     element: 'div';
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.vue.d.ts

@@ -1,11 +1,13 @@
+import type { RootRefProps } from '../../../core';
 import type { ScrollAreaViewportOwnProps, ScrollAreaViewportSlots } from './ScrollAreaViewport.types';
+type __VLS_Props = ScrollAreaViewportOwnProps & RootRefProps<Element>;
 type __VLS_Slots = ScrollAreaViewportSlots;
-declare const __VLS_base: import("vue").DefineComponent<ScrollAreaViewportOwnProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "viewport-mounted": (node: HTMLDivElement | null) => any;
     "content-mounted": (node: HTMLDivElement | null) => any;
-}, string, import("vue").PublicProps, Readonly<ScrollAreaViewportOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onViewport-mounted"?: ((node: HTMLDivElement | null) => any) | undefined;
     "onContent-mounted"?: ((node: HTMLDivElement | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/Scroller/Scroller.d.ts

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

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

@@ -1,4 +1,4 @@
-import type { VNodeChild } from 'vue';
+import type { ButtonHTMLAttributes, VNodeChild } from 'vue';
 import type { BoxProps, MantineNode, StylesApiProps, Factory } from '../../core';
 export type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';
 export type ScrollerCssVariables = {
@@ -6,8 +6,6 @@ export type ScrollerCssVariables = {
 };
 /** Props declared by `Scroller` itself. See `ScrollerProps` for the full public type. */
 export interface ScrollerOwnProps extends StylesApiProps<ScrollerFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Amount of pixels scrolled when a control is clicked. @default 200 */
     scrollAmount?: number;
     /** Size of the control buttons. */
@@ -15,9 +13,9 @@ export interface ScrollerOwnProps extends StylesApiProps<ScrollerFactory> {
     /** Background color used by the control edge gradient. */
     edgeGradientColor?: string;
     /** Props passed to the start control button. */
-    startControlProps?: Record<string, any>;
+    startControlProps?: ButtonHTMLAttributes;
     /** Props passed to the end control button. */
-    endControlProps?: Record<string, any>;
+    endControlProps?: ButtonHTMLAttributes;
     /** Start control icon. Defaults to `AccordionChevron`. */
     startControlIcon?: MantineNode;
     /** End control icon. Defaults to `AccordionChevron`. */
@@ -40,11 +38,10 @@ export interface ScrollerSlots {
     endControlIcon?: () => VNodeChild;
 }
 export type ScrollerFactory = Factory<{
-    props: Omit<ScrollerProps, 'rootRef'>;
+    props: ScrollerProps;
     ref: HTMLDivElement;
     slots: ScrollerSlots;
     element: 'div';
     stylesNames: ScrollerStylesNames;
     vars: ScrollerCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 export declare const Select: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
-        onClear?: (() => any) | undefined;
         onChange?: ((value: any, option: import("..").ComboboxItem<any> | null) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         "onOption-submit"?: ((value: any) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
@@ -9,8 +9,8 @@ export declare const Select: {
         "onSearch-change"?: ((value: string) => any) | undefined;
         "onUpdate:searchValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        clear: () => any;
         change: (value: any, option: import("..").ComboboxItem<any> | null) => any;
+        clear: () => any;
         "update:modelValue": (value: any) => any;
         "option-submit": (value: any) => any;
         "dropdown-open": () => any;
@@ -25,8 +25,8 @@ export declare const Select: {
         M: {};
         Defaults: {};
     }, Readonly<{}> & Readonly<{
-        onClear?: (() => any) | undefined;
         onChange?: ((value: any, option: import("..").ComboboxItem<any> | null) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         "onOption-submit"?: ((value: any) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
@@ -38,8 +38,8 @@ export declare const Select: {
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
-    onClear?: (() => any) | undefined;
     onChange?: ((value: any, option: import("..").ComboboxItem<any> | null) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onOption-submit"?: ((value: any) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;
@@ -47,8 +47,8 @@ export declare const Select: {
     "onSearch-change"?: ((value: string) => any) | undefined;
     "onUpdate:searchValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     change: (value: any, option: import("..").ComboboxItem<any> | null) => any;
+    clear: () => any;
     "update:modelValue": (value: any) => any;
     "option-submit": (value: any) => any;
     "dropdown-open": () => any;

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

@@ -1,6 +1,7 @@
-import type { VNodeChild } from 'vue';
+import type { InputHTMLAttributes, VNodeChild } from 'vue';
 import type { MantineNode, Primitive } from '../../core';
-import type { ComboboxData, ComboboxItem, OptionsFilter } from '../Combobox';
+import type { ComboboxData, ComboboxItem, ComboboxProps, OptionsFilter } from '../Combobox';
+import type { ScrollAreaProps } from '../ScrollArea';
 export type SelectStylesNames = string;
 /** Payload passed to the `renderOption` prop and slot. */
 export interface SelectOptionRenderPayload<Value extends Primitive = string> {
@@ -126,16 +127,16 @@ export interface SelectProps<Value extends Primitive = string> {
      */
     maxDropdownHeight?: number | string;
     /** Props passed down to the underlying `Combobox`. */
-    comboboxProps?: Record<string, any>;
+    comboboxProps?: ComboboxProps;
     /** Props passed down to the hidden input that carries the value in a form. */
-    hiddenInputProps?: Record<string, any>;
+    hiddenInputProps?: Omit<InputHTMLAttributes, 'value'>;
     /**
      * Custom markup for a dropdown option.
      * Can also be set with the scoped `renderOption` slot – the slot takes precedence.
      */
     renderOption?: (input: SelectOptionRenderPayload) => any;
     /** Props passed down to the `ScrollArea.Autosize` of the dropdown. */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
     /**
      * If set, the highlighted option is selected when the input loses focus.
      *

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

@@ -2,8 +2,8 @@ import { type ComboboxItem } from '../Combobox';
 import type { SelectSlots } from './Select.types';
 type __VLS_Slots = SelectSlots;
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     change: (value: any, option: ComboboxItem<any> | null) => any;
+    clear: () => any;
     "update:modelValue": (value: any) => any;
     "option-submit": (value: any) => any;
     "dropdown-open": () => any;
@@ -11,8 +11,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, impo
     "search-change": (value: string) => any;
     "update:searchValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onClear?: (() => any) | undefined;
     onChange?: ((value: any, option: ComboboxItem<any> | null) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onOption-submit"?: ((value: any) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;

package/lib/components/SemiCircleProgress/SemiCircleProgress.d.ts

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

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

@@ -3,8 +3,6 @@ import type { BoxProps, MantineNode, StylesApiProps, Factory } from '../../core'
 export type SemiCircleProgressStylesNames = 'root' | 'svg' | 'emptySegment' | 'filledSegment' | 'label';
 /** Props declared by `SemiCircleProgress` itself. See `SemiCircleProgressProps` for the full public type. */
 export interface SemiCircleProgressOwnProps extends StylesApiProps<SemiCircleProgressFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Progress value from `0` to `100` */
     value: number;
     /**
@@ -68,11 +66,10 @@ export type SemiCircleProgressCssVariables = {
     root: '--scp-filled-segment-color' | '--scp-empty-segment-color' | '--scp-rotation';
 };
 export type SemiCircleProgressFactory = Factory<{
-    props: Omit<SemiCircleProgressProps, 'rootRef'>;
+    props: SemiCircleProgressProps;
     ref: HTMLDivElement;
     slots: SemiCircleProgressSlots;
     element: 'div';
     stylesNames: SemiCircleProgressStylesNames;
     vars: SemiCircleProgressCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';