@mantine-vue/core 3.5.0 → 3.7.0

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

@@ -47,6 +47,46 @@ export interface AppShellCompoundProps {
     withBorder?: boolean;
     zIndex?: string | number;
 }
+export type AppShellResizeSection = 'navbar' | 'aside' | 'header' | 'footer';
+export type AppShellResizeSizes = Partial<Record<AppShellResizeSection, number>>;
+export interface AppShellResizeSectionOptions {
+    min?: number;
+    max?: number;
+    collapseThreshold?: number;
+    label?: string;
+}
+export interface AppShellResizeSectionController {
+    enabled: boolean;
+    size: number | undefined;
+    active: boolean;
+    setSize: (size: number) => void;
+    reset: () => void;
+}
+export interface AppShellResizeController {
+    navbar: AppShellResizeSectionController;
+    aside: AppShellResizeSectionController;
+    header: AppShellResizeSectionController;
+    footer: AppShellResizeSectionController;
+    sizes: AppShellResizeSizes;
+    resetAll: () => void;
+    options: Partial<Record<AppShellResizeSection, AppShellResizeSectionOptions>>;
+    activeSection: AppShellResizeSection | null;
+    startResize: (section: AppShellResizeSection) => void;
+    previewResize: (section: AppShellResizeSection, size: number) => void;
+    endResize: (section: AppShellResizeSection, size: number | null) => void;
+    initCollapse: (section: AppShellResizeSection, collapsed: boolean) => void;
+    reportCollapse: (section: AppShellResizeSection, collapsed: boolean) => void;
+}
+export interface UseAppShellResizeInput {
+    navbar?: AppShellResizeSectionOptions;
+    aside?: AppShellResizeSectionOptions;
+    header?: AppShellResizeSectionOptions;
+    footer?: AppShellResizeSectionOptions;
+    initialSizes?: AppShellResizeSizes;
+    onResize?: (sizes: AppShellResizeSizes) => void;
+    onResizeEnd?: (sizes: AppShellResizeSizes) => void;
+    onCollapseChange?: (section: AppShellResizeSection, collapsed: boolean) => void;
+}
 /** Slots of `AppShell`. */
 export interface AppShellSlots {
     /** `AppShell.Header`, `AppShell.Navbar`, `AppShell.Main` and the other sections. */
@@ -54,8 +94,6 @@ export interface AppShellSlots {
 }
 /** Props declared by `AppShell` itself. See `AppShellProps` for the full public type. */
 export interface AppShellOwnProps extends StylesApiProps<AppShellFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * If set, associated components have a border.
      *
@@ -120,17 +158,19 @@ export interface AppShellOwnProps extends StylesApiProps<AppShellFactory> {
      * @default 'fixed'
      */
     mode?: AppShellMode;
+    /** `useAppShellResize` composable instance, enables resizing configured sections. */
+    resize?: AppShellResizeController;
     /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
     mod?: BoxMod;
 }
 export interface AppShellProps extends Omit<BoxProps, keyof AppShellOwnProps>, AppShellOwnProps {
 }
-export type AppShellStylesNames = 'root';
+export type AppShellStylesNames = 'root' | 'navbar' | 'main' | 'header' | 'footer' | 'aside' | 'section' | 'resizeHandle';
 export type AppShellCssVariables = {
-    root: '--app-shell-transition-duration';
+    root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function' | '--app-shell-resize-handle-size';
 };
 export type AppShellFactory = Factory<{
-    props: Omit<AppShellProps, 'rootRef'>;
+    props: AppShellProps;
     ref: HTMLDivElement;
     slots: AppShellSlots;
     element: 'div';
@@ -145,4 +185,3 @@ export type AppShellFactory = Factory<{
         Section: typeof AppShellSection;
     };
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -1,3 +1,4 @@
+import type { RootRefProps } from '../../core';
 import type { AppShellOwnProps, AppShellSlots } from './AppShell.types';
 declare const defaults: {
     readonly withBorder: true;
@@ -20,9 +21,9 @@ declare const appShellId: {
 export { appShellId, defaults, varsResolver };
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AppShellOwnProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AppShellOwnProps & RootRefProps<Element>, {
     rootElement: import("vue").Ref<Element | null, Element | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AppShellSlots>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellOwnProps & RootRefProps<Element>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AppShellSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/lib/components/AppShell/AppShellAside/AppShellAside.d.ts

@@ -23,8 +23,8 @@ export declare const AppShellAside: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -59,8 +59,8 @@ export declare const AppShellAside: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -92,8 +92,8 @@ export declare const AppShellAside: {
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    mod: any;
     zIndex: string | number;
+    mod: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     withBorder: boolean;

package/lib/components/AppShell/AppShellFooter/AppShellFooter.d.ts

@@ -23,8 +23,8 @@ export declare const AppShellFooter: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -59,8 +59,8 @@ export declare const AppShellFooter: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -92,8 +92,8 @@ export declare const AppShellFooter: {
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    mod: any;
     zIndex: string | number;
+    mod: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     withBorder: boolean;

package/lib/components/AppShell/AppShellHeader/AppShellHeader.d.ts

@@ -23,8 +23,8 @@ export declare const AppShellHeader: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -59,8 +59,8 @@ export declare const AppShellHeader: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -92,8 +92,8 @@ export declare const AppShellHeader: {
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    mod: any;
     zIndex: string | number;
+    mod: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     withBorder: boolean;

package/lib/components/AppShell/AppShellMain/AppShellMain.d.ts

@@ -1,5 +1,5 @@
 export declare const AppShellMain: import("../../..").MantineComponent<{
-    props: Omit<import("./AppShellMain.types").AppShellMainProps, "rootRef">;
+    props: import("./AppShellMain.types").AppShellMainProps;
     ref: HTMLElement;
     slots: import("./AppShellMain.types").AppShellMainSlots;
     element: "main";

package/lib/components/AppShell/AppShellMain/AppShellMain.types.d.ts

@@ -3,8 +3,6 @@ import type { BoxProps, ClassNames, Styles, Vars, Factory } from '../../../core'
 export type AppShellMainStylesNames = 'main';
 /** Props declared by `AppShellMain` itself. See `AppShellMainProps` for the full public type. */
 export interface AppShellMainOwnProps {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /** Class name assigned to the `main` Styles API selector. */
     classNames?: ClassNames<AppShellMainProps>;
     /** Inline styles assigned to the `main` Styles API selector. */
@@ -19,10 +17,9 @@ export interface AppShellMainSlots {
 export interface AppShellMainProps extends Omit<BoxProps, keyof AppShellMainOwnProps>, AppShellMainOwnProps {
 }
 export type AppShellMainFactory = Factory<{
-    props: Omit<AppShellMainProps, 'rootRef'>;
+    props: AppShellMainProps;
     ref: HTMLElement;
     slots: AppShellMainSlots;
     element: 'main';
     stylesNames: AppShellMainStylesNames;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/AppShell/AppShellMain/AppShellMain.vue.d.ts

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

@@ -1,5 +1,5 @@
 import { type PropType } from 'vue';
-import type { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellSize } from '../AppShell.types';
+import type { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellSize, AppShellResizeSection, AppShellResizeSizes } from '../AppShell.types';
 export declare const AppShellMediaStyles: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     navbar: PropType<AppShellNavbarConfiguration>;
     aside: PropType<AppShellAsideConfiguration>;
@@ -11,6 +11,10 @@ export declare const AppShellMediaStyles: import("vue").DefineComponent<import("
         required: true;
     };
     selector: StringConstructor;
+    resize: PropType<{
+        sizes: AppShellResizeSizes;
+        enabled: Partial<Record<AppShellResizeSection, boolean>>;
+    }>;
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -24,4 +28,8 @@ export declare const AppShellMediaStyles: import("vue").DefineComponent<import("
         required: true;
     };
     selector: StringConstructor;
+    resize: PropType<{
+        sizes: AppShellResizeSizes;
+        enabled: Partial<Record<AppShellResizeSection, boolean>>;
+    }>;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/AppShell/AppShellMediaStyles/get-variables.d.ts

@@ -1,8 +1,8 @@
 import { type MantineTheme } from '../../../core';
-import type { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellSize } from '../AppShell.types';
+import type { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellSize, AppShellResizeSection, AppShellResizeSizes } from '../AppShell.types';
 export type CSSVariables = Record<`--${string}`, string | undefined>;
 export type MediaQueryVariables = Record<string, CSSVariables>;
-export declare function getVariables({ navbar, aside, header, footer, padding, theme, mode, }: {
+export declare function getVariables({ navbar, aside, header, footer, padding, theme, mode, resize, }: {
     navbar?: AppShellNavbarConfiguration;
     aside?: AppShellAsideConfiguration;
     header?: AppShellHeaderConfiguration;
@@ -10,6 +10,10 @@ export declare function getVariables({ navbar, aside, header, footer, padding, t
     padding?: AppShellSize | AppShellResponsiveSize;
     theme: MantineTheme;
     mode: 'fixed' | 'static';
+    resize?: {
+        sizes: AppShellResizeSizes;
+        enabled: Partial<Record<AppShellResizeSection, boolean>>;
+    };
 }): {
     baseStyles: CSSVariables;
     media: {

package/lib/components/AppShell/AppShellNavbar/AppShellNavbar.d.ts

@@ -23,8 +23,8 @@ export declare const AppShellNavbar: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -59,8 +59,8 @@ export declare const AppShellNavbar: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -92,8 +92,8 @@ export declare const AppShellNavbar: {
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    mod: any;
     zIndex: string | number;
+    mod: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     withBorder: boolean;

package/lib/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.d.ts

@@ -0,0 +1,23 @@
+import { type PropType } from 'vue';
+import type { AppShellResizeSection } from '../AppShell.types';
+export declare const AppShellResizeHandle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    section: {
+        type: PropType<AppShellResizeSection>;
+        required: true;
+    };
+    sectionId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    section: {
+        type: PropType<AppShellResizeSection>;
+        required: true;
+    };
+    sectionId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/AppShell/AppShellSection/AppShellSection.d.ts

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

package/lib/components/AppShell/AppShellSection/AppShellSection.types.d.ts

@@ -25,7 +25,7 @@ export interface AppShellSectionSlots {
 }
 export type AppShellSectionStylesNames = 'section';
 export type AppShellSectionFactory = PolymorphicFactory<{
-    props: Omit<AppShellSectionProps, 'component' | 'rootRef'>;
+    props: Omit<AppShellSectionProps, 'component'>;
     slots: AppShellSectionSlots;
     ref: HTMLDivElement;
     exposed: {

package/lib/components/AppShell/create-app-shell-component.d.ts

@@ -24,8 +24,8 @@ export declare function createAppShellComponent(name: string, selector: 'header'
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -60,8 +60,8 @@ export declare function createAppShellComponent(name: string, selector: 'header'
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, {}, {}, {}, {
-        mod: any;
         zIndex: string | number;
+        mod: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         withBorder: boolean;
@@ -93,8 +93,8 @@ export declare function createAppShellComponent(name: string, selector: 'header'
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    mod: any;
     zIndex: string | number;
+    mod: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     withBorder: boolean;

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

@@ -9,6 +9,8 @@ export { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';
 export { AppShellSection } from './AppShellSection/AppShellSection';
 export type { AppShellSectionOwnProps, AppShellSectionProps, AppShellSectionSlots, } from './AppShellSection/AppShellSection';
 export { useAppShellContext } from './AppShell.context';
+export { useAppShellResize } from './use-app-shell-resize/use-app-shell-resize';
+export type { UseAppShellResizeOptions } from './use-app-shell-resize/use-app-shell-resize';
 export type { AppShellContextValue } from './AppShell.context';
 export type * from './AppShell.types';
 export { getVariables as getAppShellVariables } from './AppShellMediaStyles/get-variables';

package/lib/components/AppShell/use-app-shell-resize/clamp-resize-size.d.ts

@@ -0,0 +1,7 @@
+export declare function clampResizeSize({ size, min, max, viewportMax, }: {
+    size: number;
+    min: number | undefined;
+    max: number | undefined;
+    viewportMax: number;
+}): number;
+export declare function getCollapseState(size: number, collapseThreshold: number | undefined): boolean;

package/lib/components/AppShell/use-app-shell-resize/resize-section-config.d.ts

@@ -0,0 +1,18 @@
+import type { AppShellResizeSection } from '../AppShell.types';
+export interface ResizeSectionConfig {
+    axis: 'horizontal' | 'vertical';
+    orientation: 'vertical' | 'horizontal';
+    sizeVariable: string;
+    offsetVariable: string;
+    gridWidthVariable?: string;
+    safeAreaVariable?: string;
+    sign: 1 | -1;
+}
+export declare const RESIZE_SECTIONS: Record<AppShellResizeSection, ResizeSectionConfig>;
+export declare const RESIZE_SECTION_NAMES: AppShellResizeSection[];
+export declare function getResizeDelta({ section, deltaX, deltaY, dir, }: {
+    section: AppShellResizeSection;
+    deltaX: number;
+    deltaY: number;
+    dir: 'ltr' | 'rtl';
+}): number;

package/lib/components/AppShell/use-app-shell-resize/use-app-shell-resize.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { AppShellResizeController, UseAppShellResizeInput } from '../AppShell.types';
+export type UseAppShellResizeOptions = {
+    [Key in keyof UseAppShellResizeInput]?: MaybeRefOrGetter<UseAppShellResizeInput[Key]>;
+};
+export declare function useAppShellResize(input?: UseAppShellResizeOptions): AppShellResizeController;

package/lib/components/AppShell/use-resizing/use-resizing.d.ts

@@ -2,4 +2,5 @@ import { type MaybeRefOrGetter } from 'vue';
 export declare function useResizing(input: {
     transitionDuration: MaybeRefOrGetter<number>;
     disabled: MaybeRefOrGetter<boolean>;
+    resizeKey?: MaybeRefOrGetter<string | undefined>;
 }): import("vue").Ref<boolean, boolean>;

package/lib/components/AspectRatio/AspectRatio.d.ts

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

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

@@ -1,8 +1,6 @@
 import type { BoxProps, StylesApiProps, Factory } from '../../core';
 /** Props declared by `AspectRatio` itself. See `AspectRatioProps` for the full public type. */
 export interface AspectRatioOwnProps extends StylesApiProps<AspectRatioFactory> {
-    /** Receives the root DOM node. */
-    rootRef?: VueRefTarget<Element>;
     /**
      * Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080`
      *
@@ -17,10 +15,9 @@ export type AspectRatioCssVariables = {
     root: '--ar-ratio';
 };
 export type AspectRatioFactory = Factory<{
-    props: Omit<AspectRatioProps, 'rootRef'>;
+    props: AspectRatioProps;
     ref: HTMLDivElement;
     element: 'div';
     stylesNames: AspectRatioStylesNames;
     vars: AspectRatioCssVariables;
 }>;
-import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

package/lib/components/Autocomplete/Autocomplete.d.ts

@@ -1,14 +1,14 @@
 export declare const Autocomplete: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Autocomplete.types").AutocompleteOwnProps> & Readonly<{
-        onClear?: (() => any) | undefined;
         onChange?: ((value: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         "onOption-submit"?: ((value: string) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-close"?: (() => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        clear: () => any;
         change: (value: string) => any;
+        clear: () => any;
         "update:modelValue": (value: string) => any;
         "option-submit": (value: string) => any;
         "dropdown-open": () => any;
@@ -21,8 +21,8 @@ export declare const Autocomplete: {
         M: {};
         Defaults: {};
     }, Readonly<import("./Autocomplete.types").AutocompleteOwnProps> & Readonly<{
-        onClear?: (() => any) | undefined;
         onChange?: ((value: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         "onOption-submit"?: ((value: string) => any) | undefined;
         "onDropdown-open"?: (() => any) | undefined;
@@ -32,15 +32,15 @@ export declare const Autocomplete: {
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("./Autocomplete.types").AutocompleteOwnProps> & Readonly<{
-    onClear?: (() => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onOption-submit"?: ((value: string) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;
     "onDropdown-close"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     change: (value: string) => any;
+    clear: () => any;
     "update:modelValue": (value: string) => any;
     "option-submit": (value: string) => any;
     "dropdown-open": () => any;

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

@@ -1,6 +1,7 @@
 import type { VNodeChild } from 'vue';
-import type { ComboboxGenericData, OptionsFilter } from '../Combobox';
+import type { ComboboxGenericData, ComboboxProps, OptionsFilter } from '../Combobox';
 import type { InputBaseProps } from '../InputBase';
+import type { ScrollAreaProps } from '../ScrollArea';
 export type AutocompleteStylesNames = string;
 /** Payload passed to the `renderOption` prop and slot. */
 export interface AutocompleteOptionRenderPayload {
@@ -79,14 +80,14 @@ export interface AutocompleteOwnProps {
      */
     maxDropdownHeight?: number | string;
     /** Props passed down to the underlying `Combobox`. */
-    comboboxProps?: Record<string, any>;
+    comboboxProps?: ComboboxProps;
     /**
      * Custom markup for a dropdown option.
      * Can also be set with the scoped `renderOption` slot – the slot takes precedence.
      */
     renderOption?: RenderAutocompleteOption;
     /** Props passed down to the `ScrollArea.Autosize` of the dropdown. */
-    scrollAreaProps?: Record<string, any>;
+    scrollAreaProps?: ScrollAreaProps;
     /**
      * If set, a clear button is rendered in the right section when the input is not empty.
      *

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

@@ -1,15 +1,15 @@
 import type { AutocompleteOwnProps, AutocompleteSlots } from './Autocomplete.types';
 type __VLS_Slots = AutocompleteSlots;
 declare const __VLS_base: import("vue").DefineComponent<AutocompleteOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     change: (value: string) => any;
+    clear: () => any;
     "update:modelValue": (value: string) => any;
     "option-submit": (value: string) => any;
     "dropdown-open": () => any;
     "dropdown-close": () => any;
 }, string, import("vue").PublicProps, Readonly<AutocompleteOwnProps> & Readonly<{
-    onClear?: (() => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onOption-submit"?: ((value: string) => any) | undefined;
     "onDropdown-open"?: (() => any) | undefined;

package/lib/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { AvatarGroup } from './AvatarGroup/AvatarGroup';
 export declare const Avatar: import("../..").MantinePolymorphicComponent<{
-    props: Omit<import("./Avatar.types").AvatarProps, "component" | "rootRef">;
+    props: Omit<import("./Avatar.types").AvatarProps, "component">;
     slots: import("./Avatar.types").AvatarSlots;
     ref: HTMLDivElement;
     exposed: {

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

@@ -1,12 +1,9 @@
-import type { VNodeChild } from 'vue';
-import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { ImgHTMLAttributes, VNodeChild } from 'vue';
 import type { BoxMod, BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
 import type { AvatarGroup } from './AvatarGroup/AvatarGroup';
 export type AvatarVariant = 'filled' | 'light' | 'gradient' | 'outline' | 'transparent' | 'default' | 'white';
 /** Props declared by `Avatar` itself. See `AvatarProps` for the full public type. */
 export interface AvatarOwnProps extends StylesApiProps<AvatarProps> {
-    /** 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 `Avatar`.
      *
@@ -42,7 +39,7 @@ export interface AvatarOwnProps extends StylesApiProps<AvatarProps> {
     /** Image `alt` attribute, also used as `title` attribute for placeholder */
     alt?: string;
     /** Attributes passed down to `img` element */
-    imageProps?: Record<string, any>;
+    imageProps?: ImgHTMLAttributes;
     /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;
     /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
@@ -65,7 +62,7 @@ export type AvatarCssVariables = {
 };
 /** Public contract of `Avatar`. `component` and `rootRef` come from the factory. */
 export type AvatarFactory = PolymorphicFactory<{
-    props: Omit<AvatarProps, 'component' | 'rootRef'>;
+    props: Omit<AvatarProps, 'component'>;
     slots: AvatarSlots;
     ref: HTMLDivElement;
     exposed: {