@mantine-vue/core 3.5.0 → 3.7.0

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

@@ -1,5 +1,5 @@
-import type { Component, VNodeChild } from 'vue';
-import type { BoxProps, StylesApiProps, Factory } from '../../core';
+import type { Component, HTMLAttributes, VNodeChild } from 'vue';
+import type { BoxProps, DataAttributes, StylesApiProps, Factory } from '../../core';
 import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
 import type { TreeController } from './use-tree';
 export interface TreeNodeData {
@@ -35,7 +35,7 @@ export interface RenderTreeNodePayload {
     /** Controller of the tree the node belongs to. */
     tree: TreeController;
     /** Props that must be spread onto the element rendered for the node. */
-    elementProps: Record<string, any>;
+    elementProps: HTMLAttributes & DataAttributes;
     /** Props for the drag handle. Only set when `withDragHandle` is set. */
     dragHandleProps: TreeDragHandleProps | undefined;
 }
@@ -52,7 +52,7 @@ export interface TreeDragState {
     currentDropTarget: HTMLElement | null;
 }
 export type TreeFactory = Factory<{
-    props: Omit<TreeProps, 'rootRef'>;
+    props: TreeProps;
     ref: HTMLUListElement;
     slots: TreeSlots;
     element: 'ul';
@@ -69,8 +69,6 @@ export interface TreeSlots {
 }
 /** Props declared by `Tree` itself. See `TreeProps` for the full public type. */
 export interface TreeOwnProps extends StylesApiProps<TreeFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Element or component rendered as the root.
      *
@@ -149,6 +147,5 @@ export interface TreeOwnProps extends StylesApiProps<TreeFactory> {
      */
     withLines?: boolean;
 }
-import type { VueRefTarget } from '@mantine-vue/hooks';
 export interface TreeProps extends Omit<BoxProps, keyof TreeOwnProps>, TreeOwnProps {
 }

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
 import type { TreeOwnProps, TreeSlots } from './Tree.types';
 import type { TreeNodeData } from './Tree.types';
@@ -11,11 +12,11 @@ declare function getFlatValues(data: TreeNodeData[]): string[];
 export { varsResolver, getFlatValues };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TreeOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TreeOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "drag-drop": (payload: TreeDragDropPayload) => any;
-}, string, import("vue").PublicProps, Readonly<TreeOwnProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<TreeOwnProps & RootRefProps<Element>> & Readonly<{
     "onDrag-drop"?: ((payload: TreeDragDropPayload) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TreeSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -2,8 +2,8 @@ export declare const TreeSelectOption: import("vue").DefineComponent<import("./T
 export declare const TreeSelect: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./TreeSelect.types").TreeSelectProps<any>> & Readonly<{
         onRemove?: ((value: string) => any) | undefined;
-        onClear?: (() => any) | undefined;
         onChange?: ((value: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-close"?: (() => any) | undefined;
@@ -11,8 +11,8 @@ export declare const TreeSelect: {
         "onExpanded-change"?: ((values: string[]) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         remove: (value: string) => any;
-        clear: () => any;
         change: (value: any) => any;
+        clear: () => any;
         "update:modelValue": (value: any) => any;
         "dropdown-open": () => any;
         "dropdown-close": () => any;
@@ -27,8 +27,8 @@ export declare const TreeSelect: {
         Defaults: {};
     }, Readonly<import("./TreeSelect.types").TreeSelectProps<any>> & Readonly<{
         onRemove?: ((value: string) => any) | undefined;
-        onClear?: (() => any) | undefined;
         onChange?: ((value: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-close"?: (() => any) | undefined;
@@ -40,8 +40,8 @@ export declare const TreeSelect: {
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("./TreeSelect.types").TreeSelectProps<any>> & Readonly<{
     onRemove?: ((value: string) => any) | undefined;
-    onClear?: (() => any) | undefined;
     onChange?: ((value: any) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;
     "onDropdown-close"?: (() => any) | undefined;
@@ -49,8 +49,8 @@ export declare const TreeSelect: {
     "onExpanded-change"?: ((values: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (value: string) => any;
-    clear: () => any;
     change: (value: any) => any;
+    clear: () => any;
     "update:modelValue": (value: any) => any;
     "dropdown-open": () => any;
     "dropdown-close": () => any;
@@ -72,4 +72,4 @@ export declare const TreeSelect: {
     };
 };
 export type { TreeSelectOptionProps } from './TreeSelectOption.vue';
-export type { CheckedStrategy, TreeSelectChevronAriaLabels, TreeSelectMode, TreeSelectProps, TreeSelectRenderNodePayload, TreeSelectSlots, TreeSelectValue, } from './TreeSelect.types';
+export type { CheckedStrategy, TreeSelectChevronAriaLabels, TreeSelectMode, TreeSelectProps, TreeSelectRenderNodePayload, TreeSelectRenderPillPayload, TreeSelectSlots, TreeSelectValue, } from './TreeSelect.types';

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

@@ -1,7 +1,8 @@
-import type { VNodeChild } from 'vue';
+import type { InputHTMLAttributes, VNodeChild } from 'vue';
 import type { MantineNode } from '../../core';
 import type { TreeNodeData } from '../Tree';
 import type { ComboboxProps } from '../Combobox';
+import type { ScrollAreaProps } from '../ScrollArea';
 export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
 export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
 export type CheckedStrategy = 'all' | 'parent' | 'child';
@@ -15,6 +16,18 @@ export interface TreeSelectRenderNodePayload {
     indeterminate: boolean;
     expand: (event?: Event) => void;
 }
+export interface TreeSelectRenderPillPayload {
+    /** Node associated with the pill. A placeholder node is used when the value is missing from data. */
+    node: TreeNodeData;
+    /** Selected value represented by the pill. */
+    value: string;
+    /** Removes the value from the selection. */
+    onRemove: () => void;
+    /** Value of the disabled prop passed to the component. */
+    disabled?: boolean;
+    /** Value of the readOnly prop passed to the component. */
+    readOnly?: boolean;
+}
 export interface TreeSelectChevronAriaLabels {
     expand?: string;
     collapse?: string;
@@ -109,6 +122,8 @@ export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> {
     maxDisplayedValuesContent?: VNodeChild | ((overflowCount: number) => VNodeChild);
     /** Custom markup for a tree row. */
     renderNode?: (payload: TreeSelectRenderNodePayload) => VNodeChild;
+    /** Custom pill rendering in multiple and checkbox modes. */
+    renderPill?: (payload: TreeSelectRenderPillPayload) => VNodeChild;
     /**
      * If set, connector lines between a node and its children are rendered.
      *
@@ -116,7 +131,7 @@ export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> {
      */
     withLines?: boolean;
     /** Props passed down to the hidden input that carries the value in a form. */
-    hiddenInputProps?: Record<string, any>;
+    hiddenInputProps?: Omit<InputHTMLAttributes, 'value'>;
     /**
      * Separator used to join several values in the hidden input.
      *
@@ -130,7 +145,7 @@ export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> {
      */
     maxDropdownHeight?: number | string;
     /** Props passed down to the scrollable wrapper of the dropdown. */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
     /** Open state of the dropdown. */
     dropdownOpened?: boolean;
     /** Uncontrolled initial open state of the dropdown. */
@@ -159,6 +174,7 @@ export interface TreeSelectSlots {
     leftSection?: () => VNodeChild;
     rightSection?: () => VNodeChild;
     renderNode?: (payload: TreeSelectRenderNodePayload) => VNodeChild;
+    renderPill?: (payload: TreeSelectRenderPillPayload) => VNodeChild;
     nothingFound?: () => VNodeChild;
     nothingFoundMessage?: () => VNodeChild;
 }

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

@@ -3,8 +3,8 @@ type __VLS_Props = TreeSelectProps<any>;
 type __VLS_Slots = TreeSelectSlots;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (value: string) => any;
-    clear: () => any;
     change: (value: any) => any;
+    clear: () => any;
     "update:modelValue": (value: any) => any;
     "dropdown-open": () => any;
     "dropdown-close": () => any;
@@ -12,8 +12,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "expanded-change": (values: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRemove?: ((value: string) => any) | undefined;
-    onClear?: (() => any) | undefined;
     onChange?: ((value: any) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;
     "onDropdown-close"?: (() => any) | undefined;

package/lib/components/TreeSelect/index.d.ts

@@ -1,2 +1,2 @@
 export { TreeSelect, TreeSelectOption } from './TreeSelect';
-export type { CheckedStrategy, TreeSelectChevronAriaLabels, TreeSelectMode, TreeSelectOptionProps, TreeSelectProps, TreeSelectRenderNodePayload, TreeSelectSlots, TreeSelectValue, } from './TreeSelect';
+export type { CheckedStrategy, TreeSelectChevronAriaLabels, TreeSelectMode, TreeSelectOptionProps, TreeSelectProps, TreeSelectRenderNodePayload, TreeSelectRenderPillPayload, TreeSelectSlots, TreeSelectValue, } from './TreeSelect';

package/lib/components/UnstyledButton/UnstyledButton.d.ts

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

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

@@ -1,10 +1,7 @@
 import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
 import type { BoxMod, BoxProps, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 /** Props declared by `UnstyledButton` itself. See `UnstyledButtonProps` for the full public type. */
 export interface UnstyledButtonOwnProps extends StylesApiProps<UnstyledButtonProps> {
-    /** 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 `UnstyledButton`.
      *
@@ -30,7 +27,7 @@ export interface UnstyledButtonSlots {
 export type UnstyledButtonStylesNames = 'root';
 /** Public contract of `UnstyledButton`. `component` and `rootRef` come from the factory. */
 export type UnstyledButtonFactory = PolymorphicFactory<{
-    props: Omit<UnstyledButtonProps, 'component' | 'rootRef'>;
+    props: Omit<UnstyledButtonProps, 'component'>;
     slots: UnstyledButtonSlots;
     ref: HTMLButtonElement;
     exposed: {

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

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

@@ -101,6 +101,9 @@ export * from './Drawer';
 export * from './Popover';
 export * from './Tooltip';
 export * from './HoverCard';
+export * from './Toggle';
+export * from './Toolbar';
+export * from './Tour';
 export * from './Menu';
 export * from './Menubar';
 export * from './Combobox';

package/lib/core/Box/Box.d.ts

@@ -15,14 +15,6 @@ export interface BoxProps extends MantineStyleProps {
     darkHidden?: boolean;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
-    /**
-     * Receives the root DOM node rendered by `Box`.
-     *
-     * Vue resolves a template `ref` on a component to the component instance rather than the
-     * node it renders, so this prop is how a parent reaches the real element. When `component`
-     * is a Vue component, the component's own root node (`$el`) is assigned.
-     */
-    rootRef?: VueRefTarget<Element>;
 }
 export declare const Box: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {
@@ -91,7 +83,7 @@ export declare const Box: import("vue").DefineComponent<import("vue").ExtractPro
     /** Opacity */
     opacity: PropType<import("./style-props").StyleProp<import("csstype").Property.Opacity | undefined>>;
     /** FontFamily */
-    ff: PropType<import("./style-props").StyleProp<"text" | (string & {}) | "monospace" | "headings" | "mono" | "heading"> | undefined>;
+    ff: PropType<import("./style-props").StyleProp<"text" | (string & {}) | "headings" | "monospace" | "mono" | "heading"> | undefined>;
     /** FontSize, theme key: theme.fontSizes */
     fz: PropType<import("./style-props").StyleProp<number | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | import("..").MantineFontSize> | undefined>;
     /** FontWeight */
@@ -218,7 +210,7 @@ export declare const Box: import("vue").DefineComponent<import("vue").ExtractPro
     /** Opacity */
     opacity: PropType<import("./style-props").StyleProp<import("csstype").Property.Opacity | undefined>>;
     /** FontFamily */
-    ff: PropType<import("./style-props").StyleProp<"text" | (string & {}) | "monospace" | "headings" | "mono" | "heading"> | undefined>;
+    ff: PropType<import("./style-props").StyleProp<"text" | (string & {}) | "headings" | "monospace" | "mono" | "heading"> | undefined>;
     /** FontSize, theme key: theme.fontSizes */
     fz: PropType<import("./style-props").StyleProp<number | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | import("..").MantineFontSize> | undefined>;
     /** FontWeight */
@@ -277,8 +269,8 @@ export declare const Box: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    rootRef: VueRefTarget<Element>;
-    component: string | Component;
     lightHidden: boolean;
     darkHidden: boolean;
+    rootRef: VueRefTarget<Element>;
+    component: string | Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/core/MantineProvider/Mantine.context.d.ts

@@ -29,7 +29,7 @@ export declare function useMantineClassNamesPrefix(): string;
 export declare function useMantineStyleNonce(): (() => string | undefined) | undefined;
 export declare function useMantineWithStaticClasses(): boolean;
 export declare function useMantineIsHeadless(): boolean | undefined;
-export declare function useMantineEnv(): "test" | "default";
+export declare function useMantineEnv(): "default" | "test";
 export declare function useMantineDeduplicateInlineStyles(): boolean;
 export declare function createProviderColorScheme(defaultColorScheme: MantineColorScheme): {
     colorScheme: Ref<MantineColorScheme, MantineColorScheme>;
@@ -46,4 +46,4 @@ export declare function useMantineColorScheme(): {
 export interface UseComputedColorSchemeOptions {
     getInitialValueInEffect?: boolean;
 }
-export declare function useComputedColorScheme(defaultValue?: 'light' | 'dark', options?: UseComputedColorSchemeOptions): ComputedRef<"dark" | "light">;
+export declare function useComputedColorScheme(defaultValue?: 'light' | 'dark', options?: UseComputedColorSchemeOptions): ComputedRef<"light" | "dark">;

package/lib/core/MantineProvider/MantineProvider.d.ts

@@ -157,19 +157,19 @@ export declare const MantineProvider: import("vue").DefineComponent<import("vue"
         colors?: {
             [x: string & {}]: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             dark?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            gray?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            red?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            pink?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            grape?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            violet?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            indigo?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             blue?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             cyan?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            gray?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             green?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            indigo?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             lime?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            yellow?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             orange?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            pink?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            red?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             teal?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            violet?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            yellow?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            grape?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
         } | undefined;
         primaryShade?: import("./theme.types").MantineColorShade | {
             light?: import("./theme.types").MantineColorShade | undefined;
@@ -184,7 +184,7 @@ export declare const MantineProvider: import("vue").DefineComponent<import("vue"
         headings?: {
             fontFamily?: string | undefined;
             fontWeight?: string | undefined;
-            textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
+            textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
             sizes?: {
                 h1?: {
                     fontSize?: string | undefined;
@@ -357,7 +357,7 @@ export declare const MantineProvider: import("vue").DefineComponent<import("vue"
         } | undefined;
     };
     defaultColorScheme: MantineColorScheme;
-    forceColorScheme: "dark" | "light";
+    forceColorScheme: "light" | "dark";
     cssVariablesSelector: string;
     withCssVariables: boolean;
     deduplicateCssVariables: boolean;
@@ -369,7 +369,7 @@ export declare const MantineProvider: import("vue").DefineComponent<import("vue"
     withGlobalClasses: boolean;
     stylesTransform: MantineStylesTransform;
     deduplicateInlineStyles: boolean;
-    env: "test" | "default";
+    env: "default" | "test";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const HeadlessMantineProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     theme: {
@@ -401,19 +401,19 @@ export declare const HeadlessMantineProvider: import("vue").DefineComponent<impo
         colors?: {
             [x: string & {}]: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             dark?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            gray?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            red?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            pink?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            grape?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            violet?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            indigo?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             blue?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             cyan?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            gray?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             green?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            indigo?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             lime?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            yellow?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             orange?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            pink?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            red?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             teal?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            violet?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            yellow?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            grape?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
         } | undefined;
         primaryShade?: import("./theme.types").MantineColorShade | {
             light?: import("./theme.types").MantineColorShade | undefined;
@@ -428,7 +428,7 @@ export declare const HeadlessMantineProvider: import("vue").DefineComponent<impo
         headings?: {
             fontFamily?: string | undefined;
             fontWeight?: string | undefined;
-            textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
+            textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
             sizes?: {
                 h1?: {
                     fontSize?: string | undefined;
@@ -600,7 +600,7 @@ export declare const HeadlessMantineProvider: import("vue").DefineComponent<impo
             [x: string]: any;
         } | undefined;
     };
-    env: "test" | "default";
+    env: "default" | "test";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const MantineCssVariables: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;

package/lib/core/MantineProvider/MantineThemeProvider.d.ts

@@ -23,7 +23,6 @@ export declare const MantineThemeProvider: import("vue").DefineComponent<import(
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    inherit: boolean;
     theme: {
         focusRing?: "auto" | "always" | "never" | undefined;
         scale?: number | undefined;
@@ -33,19 +32,19 @@ export declare const MantineThemeProvider: import("vue").DefineComponent<import(
         colors?: {
             [x: string & {}]: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             dark?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            gray?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            red?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            pink?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            grape?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            violet?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            indigo?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             blue?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             cyan?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            gray?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             green?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            indigo?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             lime?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
+            yellow?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             orange?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            pink?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            red?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
             teal?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            violet?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            yellow?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
-            grape?: readonly [(string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, (string | undefined)?, ...(string | undefined)[]] | undefined;
         } | undefined;
         primaryShade?: import("./theme.types").MantineColorShade | {
             light?: import("./theme.types").MantineColorShade | undefined;
@@ -60,7 +59,7 @@ export declare const MantineThemeProvider: import("vue").DefineComponent<import(
         headings?: {
             fontFamily?: string | undefined;
             fontWeight?: string | undefined;
-            textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
+            textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
             sizes?: {
                 h1?: {
                     fontSize?: string | undefined;
@@ -232,4 +231,5 @@ export declare const MantineThemeProvider: import("vue").DefineComponent<import(
             [x: string]: any;
         } | undefined;
     };
+    inherit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/core/factory/index.d.ts

@@ -7,4 +7,3 @@ export type { DataAttributes, ElementAttributes, EmitsToProps, FactoryComponentP
 export type { CssVariable, FactoryClassNames, FactoryPartialVarsResolver, FactoryStyles, FactoryVarsResolver, PartialTransformVars, StylesApiRecord, StylesNamesOf, StylesRecord, TransformVars, } from './factory-styles-api';
 export { polymorphicFactory } from './polymorphic-factory';
 export type { MantinePolymorphicComponent, PolymorphicComponentWithProps, PolymorphicProps, } from './polymorphic-factory';
-export { useForwardedRef } from './use-forwarded-ref';

package/lib/core/styles-api/styles-api.types.d.ts

@@ -64,6 +64,8 @@ export interface UseStylesInput<Payload = any> {
     classes?: Record<string, string>;
     props?: Record<string, any>;
     stylesCtx?: Record<string, any>;
+    /** Reactive attributes proxy returned by `useAttrs`. */
+    attrs?: Record<string, any>;
     className?: any;
     style?: CSSProperties | CSSProperties[];
     classNames?: LegacyClassNames<Payload>;

package/lib/core/utils/extract-style-props.d.ts

@@ -0,0 +1,14 @@
+import { type MantineStyleProps } from '../Box/style-props';
+/**
+ * Splits `attrs` into style props (`mt`, `ml`, `bg`, ...) and the rest. Use this before
+ * forwarding fallthrough attrs to an inner element, so style props reach the component's
+ * root instead of landing on the inner element they were never meant for.
+ *
+ * @example
+ * const { styleProps, rest } = extractStyleProps(attrs)
+ * // styleProps go on the root, rest (minus handlers) goes on the inner <input>
+ */
+export declare function extractStyleProps<T extends Record<string, unknown>>(attrs: MantineStyleProps & T): {
+    styleProps: MantineStyleProps;
+    rest: T;
+};

package/lib/core/utils/index.d.ts

@@ -1,6 +1,7 @@
 import { type InjectionKey } from 'vue';
 export * from '@mantine-vue/utils';
 export * from './create-scoped-keydown-handler';
+export * from './extract-style-props';
 export * from './omit-attrs';
 export declare function createSafeInjectionContext<T>(errorMessage: string): readonly [(value: T) => void, () => T & ({} | undefined), InjectionKey<T>];
 export declare const createSafeContext: typeof createSafeInjectionContext;

package/lib/utils/InlineInput/InlineInput.d.ts

@@ -139,8 +139,8 @@ export declare const InlineInput: import("vue").DefineComponent<import("vue").Ex
     description: any;
     error: any;
     size: string | number;
-    mod: any;
     variant: string;
+    mod: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     unstyled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -54,8 +54,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "3.5.0",
-    "@mantine-vue/utils": "3.5.0",
+    "@mantine-vue/hooks": "3.7.0",
+    "@mantine-vue/utils": "3.7.0",
     "vue": "^3.5.0"
   }
 }