@mantine/core 9.0.2 → 9.1.1

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

@@ -39,7 +39,7 @@ export interface SelectProps<Value extends Primitive = string> extends BoxProps,
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
     /** A function to render content of the option, replaces the default content of the option */
-    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
+    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
     /** Controls color of the default chevron, by default depends on the color scheme */

package/lib/components/Slider/Marks/Marks.d.ts

@@ -7,8 +7,9 @@ export interface MarksProps {
     offset: number | undefined;
     disabled: boolean | undefined;
     inverted: boolean | undefined;
+    startPointValue?: number;
 }
-export declare function Marks({ marks, min, max, disabled, value, offset, inverted }: MarksProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Marks({ marks, min, max, disabled, value, offset, inverted, startPointValue, }: MarksProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Marks {
     var displayName: string;
 }

package/lib/components/Slider/Marks/is-mark-filled.d.ts

@@ -6,6 +6,7 @@ interface IsMarkFilled {
     offset?: number;
     value: number;
     inverted?: boolean;
+    startPointValue?: number;
 }
-export declare function isMarkFilled({ mark, offset, value, inverted }: IsMarkFilled): boolean;
+export declare function isMarkFilled({ mark, offset, value, inverted, startPointValue, }: IsMarkFilled): boolean;
 export {};

package/lib/components/Slider/Slider/Slider.d.ts

@@ -51,6 +51,8 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     scale?: (value: number) => number;
     /** Determines whether track value representation should be inverted @default false */
     inverted?: boolean;
+    /** Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set. */
+    startPointValue?: number;
     /** Slider orientation @default 'horizontal' */
     orientation?: 'horizontal' | 'vertical';
     /** Props passed down to the hidden input */

package/lib/components/Slider/Track/Track.d.ts

@@ -9,12 +9,13 @@ export interface TrackProps {
     min: number;
     max: number;
     value: number;
+    startPointValue?: number;
     children: React.ReactNode;
     disabled: boolean | undefined;
     inverted: boolean | undefined;
     containerProps?: React.ComponentProps<'div'>;
 }
-export declare function Track({ filled, children, offset, disabled, marksOffset, inverted, containerProps, ...others }: TrackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Track({ filled, children, offset, disabled, marksOffset, inverted, startPointValue, containerProps, ...others }: TrackProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Track {
     var displayName: string;
 }

package/lib/components/Tabs/Tabs.context.d.ts

@@ -15,6 +15,7 @@ export interface TabsContextValue {
     radius: string | number | undefined;
     inverted: boolean | undefined;
     keepMounted: boolean | undefined;
+    keepMountedMode: 'activity' | 'display-none' | undefined;
     placement: 'right' | 'left' | undefined;
     unstyled: boolean | undefined;
     getStyles: GetStylesApi<TabsFactory>;

package/lib/components/Tabs/Tabs.d.ts

@@ -37,6 +37,8 @@ export interface TabsProps extends BoxProps, StylesApiProps<TabsFactory>, Elemen
     inverted?: boolean;
     /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true */
     keepMounted?: boolean;
+    /** Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' */
+    keepMountedMode?: 'activity' | 'display-none';
     /** If set, adjusts text color based on background color for `pills` variant */
     autoContrast?: boolean;
 }

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

@@ -0,0 +1,31 @@
+import type { RenderNode, TreeNodeData } from './Tree';
+import type { TreeController } from './use-tree';
+export interface FlatTreeNodeProps {
+    /** Node data from tree data */
+    node: TreeNodeData;
+    /** Nesting level of the node, starts at 1 */
+    level: number;
+    /** Value of the parent node, `null` for root nodes */
+    parent: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is expanded */
+    expanded: boolean;
+    /** Tree controller instance, return value of `useTree` hook */
+    tree: TreeController;
+    /** If set, tree node with children is expanded on click @default true */
+    expandOnClick?: boolean;
+    /** If set, tree node is selected on click @default false */
+    selectOnClick?: boolean;
+    /** If set, tree node with children is expanded on space key press @default true */
+    expandOnSpace?: boolean;
+    /** If set, tree node is checked on space key press @default false */
+    checkOnSpace?: boolean;
+    /** A function to render tree node label */
+    renderNode?: RenderNode;
+    /** Style to apply to the root element, used for virtualizer positioning */
+    style?: React.CSSProperties;
+    /** Tab index for the node */
+    tabIndex?: number;
+}
+export declare const FlatTreeNode: import("react").MemoExoticComponent<({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, }: FlatTreeNodeProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,20 +1,27 @@
 import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
 import { TreeController } from './use-tree';
 export interface TreeNodeData {
     label: React.ReactNode;
     value: string;
     nodeProps?: Record<string, any>;
     children?: TreeNodeData[];
+    hasChildren?: boolean;
 }
 export interface RenderTreeNodePayload {
     /** Node level in the tree */
     level: number;
     /** `true` if the node is expanded, applicable only for nodes with `children` */
     expanded: boolean;
-    /** `true` if the node has non-empty `children` array */
+    /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data */
     hasChildren: boolean;
     /** `true` if the node is selected */
     selected: boolean;
+    /** `true` if the node's children are currently being loaded */
+    isLoading: boolean;
+    /** Error from the last failed load attempt, or `null` */
+    loadError: Error | null;
     /** Node data from the `data` prop of `Tree` */
     node: TreeNodeData;
     /** Tree controller instance, return value of `useTree` hook */
@@ -26,13 +33,26 @@ export interface RenderTreeNodePayload {
         onClick: (event: React.MouseEvent) => void;
         'data-selected': boolean | undefined;
         'data-value': string;
+        draggable?: boolean;
+        onDragStart?: (event: React.DragEvent) => void;
+        onDragOver?: (event: React.DragEvent) => void;
+        onDragLeave?: (event: React.DragEvent) => void;
+        onDrop?: (event: React.DragEvent) => void;
+        onDragEnd?: (event: React.DragEvent) => void;
     };
+    /** Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.
+     * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. */
+    dragHandleProps: TreeDragHandleProps | undefined;
 }
 export type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;
 export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
 export type TreeCssVariables = {
     root: '--level-offset';
 };
+export interface TreeDragState {
+    draggedValue: string | null;
+    currentDropTarget: HTMLElement | null;
+}
 export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {
     /** Data used to render nodes */
     data: TreeNodeData[];
@@ -56,6 +76,16 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     allowRangeSelection?: boolean;
     /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */
     keepMounted?: boolean;
+    /** Called when a node is dropped on another node, enables drag-and-drop when provided */
+    onDragDrop?: (payload: TreeDragDropPayload) => void;
+    /** Called for each potential drop target to determine whether a drop is allowed.
+     * When it returns `false`, the drop indicator is hidden and the drop is rejected. */
+    allowDrop?: TreeAllowDrop;
+    /** If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`
+     * from the `renderNode` payload, rather than anywhere on the node. @default false */
+    withDragHandle?: boolean;
+    /** If set, connecting lines are rendered showing parent-child relationships @default false */
+    withLines?: boolean;
 }
 export type TreeFactory = Factory<{
     props: TreeProps;

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

@@ -1,6 +1,8 @@
 import { GetStylesApi } from '../../core';
-import type { RenderNode, TreeFactory, TreeNodeData } from './Tree';
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';
 import type { TreeController } from './use-tree';
+import { TreeAllowDrop } from './use-tree-node-drag-drop';
 interface TreeNodeProps {
     node: TreeNodeData;
     getStyles: GetStylesApi<TreeFactory>;
@@ -16,8 +18,13 @@ interface TreeNodeProps {
     expandOnSpace: boolean | undefined;
     checkOnSpace: boolean | undefined;
     keepMounted: boolean | undefined;
+    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    allowDrop: TreeAllowDrop | undefined;
+    withDragHandle: boolean | undefined;
+    dragStateRef: React.RefObject<TreeDragState>;
+    data: TreeNodeData[];
 }
-export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeNode {
     var displayName: string;
 }

package/lib/components/Tree/filter-tree-data/filter-tree-data.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeData } from '../Tree';
+export type TreeNodeFilter = (query: string, node: TreeNodeData) => boolean;
+export declare function defaultTreeNodeFilter(query: string, node: TreeNodeData): boolean;
+export declare function filterTreeData(data: TreeNodeData[], query: string, filter?: TreeNodeFilter): TreeNodeData[];

package/lib/components/Tree/flatten-tree-data/flatten-tree-data.d.ts

@@ -0,0 +1,15 @@
+import type { TreeNodeData } from '../Tree';
+import type { TreeExpandedState } from '../use-tree';
+export interface FlattenedTreeNodeData {
+    /** Node data from tree data */
+    node: TreeNodeData;
+    /** Nesting level of the node, starts at 1 */
+    level: number;
+    /** Value of the parent node, `null` for root nodes */
+    parent: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is expanded */
+    expanded: boolean;
+}
+export declare function flattenTreeData(data: TreeNodeData[], expandedState: TreeExpandedState): FlattenedTreeNodeData[];

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

@@ -3,4 +3,14 @@ import type { RenderTreeNodePayload, TreeCssVariables, TreeFactory, TreeNodeData
 import type { UseTreeInput, UseTreeReturnType } from './use-tree';
 export { Tree } from './Tree';
 export { useTree, getTreeExpandedState } from './use-tree';
+export { mergeAsyncChildren } from './merge-async-children/merge-async-children';
+export { moveTreeNode } from './move-tree-node/move-tree-node';
+export { filterTreeData, defaultTreeNodeFilter } from './filter-tree-data/filter-tree-data';
+export { flattenTreeData } from './flatten-tree-data/flatten-tree-data';
+export { FlatTreeNode } from './FlatTreeNode';
 export type { TreeProps, TreeStylesNames, TreeFactory, TreeCssVariables, TreeNodeData, RenderTreeNodePayload, UseTreeInput, UseTreeReturnType, CheckedNodeStatus, };
+export type { TreeNodeFilter } from './filter-tree-data/filter-tree-data';
+export type { TreeDragDropPosition, TreeDragDropPayload } from './move-tree-node/move-tree-node';
+export type { FlattenedTreeNodeData } from './flatten-tree-data/flatten-tree-data';
+export type { FlatTreeNodeProps } from './FlatTreeNode';
+export type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';

package/lib/components/Tree/merge-async-children/merge-async-children.d.ts

@@ -0,0 +1,2 @@
+import type { TreeNodeData } from '../Tree';
+export declare function mergeAsyncChildren(data: TreeNodeData[], parentValue: string, children: TreeNodeData[]): TreeNodeData[];

package/lib/components/Tree/move-tree-node/move-tree-node.d.ts

@@ -0,0 +1,11 @@
+import type { TreeNodeData } from '../Tree';
+export type TreeDragDropPosition = 'before' | 'after' | 'inside';
+export interface TreeDragDropPayload {
+    /** Value of the dragged node */
+    draggedNode: string;
+    /** Value of the target node */
+    targetNode: string;
+    /** Position relative to the target node */
+    position: TreeDragDropPosition;
+}
+export declare function moveTreeNode(data: TreeNodeData[], payload: TreeDragDropPayload): TreeNodeData[];

package/lib/components/Tree/use-tree-node-drag-drop.d.ts

@@ -0,0 +1,30 @@
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeDragState, TreeNodeData } from './Tree';
+export type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;
+interface UseTreeNodeDragDropInput {
+    nodeValue: string;
+    hasChildren: boolean;
+    data: TreeNodeData[];
+    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    dragStateRef: React.RefObject<TreeDragState>;
+    allowDrop: TreeAllowDrop | undefined;
+    withDragHandle: boolean | undefined;
+}
+export interface TreeDragHandleProps {
+    onMouseDown: (event: React.MouseEvent) => void;
+}
+export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, allowDrop, withDragHandle, }: UseTreeNodeDragDropInput): {
+    readonly elementProps: {};
+    readonly dragHandleProps: undefined;
+} | {
+    elementProps: {
+        draggable: boolean;
+        onDragStart: (event: React.DragEvent) => void;
+        onDragOver: (event: React.DragEvent) => void;
+        onDragLeave: (event: React.DragEvent) => void;
+        onDrop: (event: React.DragEvent) => void;
+        onDragEnd: (event: React.DragEvent) => void;
+    };
+    dragHandleProps: TreeDragHandleProps | undefined;
+};
+export {};

package/lib/components/Tree/use-tree.d.ts

@@ -27,8 +27,18 @@ export interface UseTreeInput {
     onNodeExpand?: (value: string) => void;
     /** Called with the node value when it is collapsed */
     onNodeCollapse?: (value: string) => void;
+    /** Called when a node with `hasChildren: true` is expanded for the first time.
+     * The callback should update the tree data with loaded children.
+     */
+    onLoadChildren?: (nodeValue: string) => Promise<void>;
+    /** When `true`, checking a parent does not affect children and vice versa.
+     * Each node's checked state is fully independent. @default false
+     */
+    checkStrictly?: boolean;
 }
 export interface UseTreeReturnType {
+    /** When `true`, each node's checked state is independent (no parent-child cascading) */
+    checkStrictly: boolean;
     /** Determines whether multiple node can be selected at a time */
     multiple: boolean;
     /** A record of `node.value` and boolean values that represent nodes expanded state */
@@ -81,6 +91,14 @@ export interface UseTreeReturnType {
     isNodeChecked: (value: string) => boolean;
     /** Returns `true` if node with provided value is indeterminate */
     isNodeIndeterminate: (value: string) => boolean;
+    /** Returns `true` if the node's children are currently being loaded */
+    isNodeLoading: (value: string) => boolean;
+    /** Returns the error from the last failed load attempt for the given node, or `null` */
+    getNodeLoadError: (value: string) => Error | null;
+    /** Programmatically triggers loading of a node's children */
+    loadNode: (value: string) => Promise<void>;
+    /** Clears the loaded cache for a node, causing it to re-fetch on next expand */
+    invalidateNode: (value: string) => void;
 }
-export declare function useTree({ initialSelectedState, expandedState, initialCheckedState, checkedState, initialExpandedState, selectedState, multiple, onNodeCollapse, onNodeExpand, onCheckedStateChange, onSelectedStateChange, onExpandedStateChange, }?: UseTreeInput): UseTreeReturnType;
+export declare function useTree({ initialSelectedState, expandedState, initialCheckedState, checkedState, initialExpandedState, selectedState, multiple, onNodeCollapse, onNodeExpand, onCheckedStateChange, onSelectedStateChange, onExpandedStateChange, onLoadChildren, checkStrictly, }?: UseTreeInput): UseTreeReturnType;
 export type TreeController = ReturnType<typeof useTree>;

package/lib/components/index.d.ts

@@ -60,6 +60,7 @@ export * from './List';
 export * from './LoadingOverlay';
 export * from './Mark';
 export * from './Marquee';
+export * from './MaskInput';
 export * from './Menu';
 export * from './Modal';
 export * from './MultiSelect';

package/lib/core/InlineStyles/InlineStyles.d.ts

@@ -1,4 +1,5 @@
 import { InlineStylesInput } from './styles-to-string/styles-to-string';
 export interface InlineStylesProps extends InlineStylesInput, Omit<React.ComponentProps<'style'>, keyof InlineStylesInput> {
+    deduplicate?: boolean;
 }
-export declare function InlineStyles(props: InlineStylesInput): import("react/jsx-runtime").JSX.Element;
+export declare function InlineStyles({ deduplicate, ...props }: InlineStylesProps): import("react/jsx-runtime").JSX.Element;

package/lib/core/InlineStyles/hash-styles.d.ts

@@ -0,0 +1,2 @@
+import type { InlineStylesMediaQuery } from './styles-to-string/styles-to-string';
+export declare function hashStyleProps(styles: React.CSSProperties | undefined, media: InlineStylesMediaQuery[] | undefined): string;

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

@@ -1,4 +1,5 @@
 export { InlineStyles } from './InlineStyles';
+export { hashStyleProps } from './hash-styles';
 export { stylesToString } from './styles-to-string/styles-to-string';
 export type { InlineStylesInput, InlineStylesMediaQuery, } from './styles-to-string/styles-to-string';
 export type { InlineStylesProps } from './InlineStyles';

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

@@ -17,6 +17,7 @@ interface MantineContextValue {
     headless?: boolean;
     stylesTransform?: MantineStylesTransform;
     env?: 'default' | 'test';
+    deduplicateInlineStyles?: boolean;
 }
 export declare const MantineContext: import("react").Context<MantineContextValue | null>;
 export declare function useMantineContext(): MantineContextValue;
@@ -28,4 +29,5 @@ export declare function useMantineIsHeadless(): boolean | undefined;
 export declare function useMantineSxTransform(): (() => (sx: any) => string) | undefined;
 export declare function useMantineStylesTransform(): (() => (styles: any, payload: any) => Record<string, string>) | undefined;
 export declare function useMantineEnv(): "default" | "test";
+export declare function useMantineDeduplicateInlineStyles(): boolean | undefined;
 export {};

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

@@ -34,12 +34,14 @@ export interface MantineProviderProps {
     withGlobalClasses?: boolean;
     /** An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries */
     stylesTransform?: MantineStylesTransform;
+    /** Determines whether inline styles with identical content should be deduplicated using React 19 style hoisting. When enabled, components with the same responsive style props share a single `<style />` tag instead of each generating their own. @default false */
+    deduplicateInlineStyles?: boolean;
     /** Your application */
     children?: React.ReactNode;
     /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */
     env?: 'default' | 'test';
 }
-export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, deduplicateInlineStyles, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MantineProvider {
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ export * from './ColorSchemeScript';
 export { DEFAULT_THEME } from './default-theme';
 export { validateMantineTheme, mergeMantineTheme } from './merge-mantine-theme';
 export { MantineProvider, HeadlessMantineProvider } from './MantineProvider';
-export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, useMantineEnv, } from './Mantine.context';
+export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, useMantineEnv, useMantineDeduplicateInlineStyles, } from './Mantine.context';
 export { useMantineTheme, useSafeMantineTheme, MantineThemeContext, MantineThemeProvider, } from './MantineThemeProvider';
 export type { MantineThemeProviderProps } from './MantineThemeProvider';
 export type { MantineProviderProps, HeadlessMantineProviderProps } from './MantineProvider';

package/lib/core/styles-api/use-resolved-styles-api/use-resolved-styles-api.d.ts

@@ -7,6 +7,6 @@ export interface UseResolvedStylesApiInput<Payload extends FactoryPayload> {
     stylesCtx?: Record<string, any>;
 }
 export declare function useResolvedStylesApi<Payload extends FactoryPayload>({ classNames, styles, props, stylesCtx, }: UseResolvedStylesApiInput<Payload>): {
-    resolvedClassNames: Partial<Record<string, string>>;
-    resolvedStyles: Record<string, any>;
+    resolvedClassNames: Partial<Record<string, string>> | undefined;
+    resolvedStyles: Record<string, any> | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.2",
+    "@mantine/hooks": "9.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -52,12 +52,12 @@
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^5.5.0"
+    "type-fest": "^5.6.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
   }
 }

package/styles/Radio.css

@@ -29,6 +29,7 @@
 .m_f3ed6b2b {
   color: var(--radio-icon-color);
   opacity: var(--radio-icon-opacity, 0);
+  translate: -50% -50%;
   transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
   transition:
     opacity 100ms ease,
@@ -37,8 +38,8 @@
   width: var(--radio-icon-size);
   height: var(--radio-icon-size);
   position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
+  top: 50%;
+  left: 50%;
 }
 
 .m_8a3dbb89 {

package/styles/Radio.layer.css

@@ -29,6 +29,7 @@
 .m_f3ed6b2b {
   color: var(--radio-icon-color);
   opacity: var(--radio-icon-opacity, 0);
+  translate: -50% -50%;
   transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
   transition:
     opacity 100ms ease,
@@ -37,8 +38,8 @@
   width: var(--radio-icon-size);
   height: var(--radio-icon-size);
   position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
+  top: 50%;
+  left: 50%;
 }
 
 .m_8a3dbb89 {

package/styles/Tree.css

@@ -1,5 +1,7 @@
 .m_f698e191 {
   --level-offset: var(--mantine-spacing-lg);
+  --tree-line-width: calc(0.0625rem * var(--mantine-scale));
+  --tree-line-color: var(--mantine-color-default-border);
   margin: 0;
   padding: 0;
   user-select: none;
@@ -24,6 +26,7 @@
     }
 
 .m_dc283425 {
+  position: relative;
   padding-inline-start: var(--label-offset);
 }
 
@@ -34,3 +37,66 @@
 :where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
       background-color: var(--mantine-color-dark-5);
 }
+
+.m_dc283425:where([data-dragging]) {
+    opacity: 0.4;
+  }
+
+.m_dc283425:where([data-drag-over='before'])::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: 2px;
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: 2px;
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='inside']) {
+    background-color: var(--mantine-primary-color-light);
+  }
+
+:where([data-with-lines]) .m_f6970eb1 {
+    position: relative;
+  }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::before {
+      content: '';
+      position: absolute;
+      top: calc(0.75rem * var(--mantine-scale));
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: calc(var(--level-offset) / 2);
+      height: 0;
+      border-top: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: 0;
+      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
+      bottom: auto;
+      height: calc(0.75rem * var(--mantine-scale));
+    }