@mantine/core 9.1.0 → 9.2.0

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

@@ -0,0 +1,41 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+export type RollingNumberStylesNames = 'root' | 'digit' | 'digitColumn' | 'char';
+export type RollingNumberCssVariables = {
+    root: '--rn-duration' | '--rn-timing-function';
+};
+export interface RollingNumberProps extends BoxProps, StylesApiProps<RollingNumberFactory>, ElementProps<'div'> {
+    /** Number value to display */
+    value: number;
+    /** Prefix added before the value */
+    prefix?: string;
+    /** Suffix added after the value */
+    suffix?: string;
+    /** Character used as a decimal separator @default '.' */
+    decimalSeparator?: string;
+    /** Character used to separate thousands, set to `true` for `,` @default false */
+    thousandSeparator?: string | boolean;
+    /** Number of decimal places to display */
+    decimalScale?: number;
+    /** If set, trailing zeros are added to match `decimalScale` @default false */
+    fixedDecimalScale?: boolean;
+    /** Animation duration in milliseconds @default 600 */
+    animationDuration?: number;
+    /** CSS timing function for animation @default 'ease' */
+    timingFunction?: string;
+    /** If set, use tabular (monospace) numbers @default true */
+    tabularNumbers?: boolean;
+    /** If set, the root element acts as an `aria-live="polite"` region (`role="status"`) and screen readers announce every value change. When `false`, the root uses `role="img"` so the current value is still accessible but updates are not announced. @default false */
+    withLiveRegion?: boolean;
+}
+export type RollingNumberFactory = Factory<{
+    props: RollingNumberProps;
+    ref: HTMLDivElement;
+    stylesNames: RollingNumberStylesNames;
+    vars: RollingNumberCssVariables;
+}>;
+export declare const RollingNumber: import("../..").MantineComponent<{
+    props: RollingNumberProps;
+    ref: HTMLDivElement;
+    stylesNames: RollingNumberStylesNames;
+    vars: RollingNumberCssVariables;
+}>;

package/lib/components/RollingNumber/build-value.d.ts

@@ -0,0 +1,10 @@
+export interface BuildValueInput {
+    value: number;
+    prefix?: string;
+    suffix?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string | boolean;
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+}
+export declare function buildValue({ value, prefix, suffix, decimalSeparator, thousandSeparator, decimalScale, fixedDecimalScale, }: BuildValueInput): string;

package/lib/components/RollingNumber/get-digit-parts.d.ts

@@ -0,0 +1,12 @@
+export interface DigitParts {
+    negative: boolean;
+    intDigits: string[];
+    fracDigits: string[];
+    hasDecimal: boolean;
+}
+export interface GetDigitPartsInput {
+    value: number;
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+}
+export declare function getDigitParts({ value, decimalScale, fixedDecimalScale, }: GetDigitPartsInput): DigitParts;

package/lib/components/RollingNumber/get-render-slots.d.ts

@@ -0,0 +1,35 @@
+import { type DigitParts } from './get-digit-parts';
+export interface DigitSlot {
+    type: 'digit';
+    key: string;
+    digit: string;
+    previousDigit: string | null;
+    empty: boolean;
+}
+export interface CharSlot {
+    type: 'char';
+    key: string;
+    char: string;
+    empty: boolean;
+}
+export type RenderSlot = DigitSlot | CharSlot;
+export interface GetRenderSlotsInput {
+    current: DigitParts;
+    previous: DigitParts;
+    prefix?: string;
+    suffix?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string | boolean;
+}
+export declare function getRenderSlots({ current, previous, prefix, suffix, decimalSeparator, thousandSeparator, }: GetRenderSlotsInput): RenderSlot[];
+export interface GetRenderSlotsFromValuesInput {
+    value: number;
+    previousValue: number;
+    prefix?: string;
+    suffix?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string | boolean;
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+}
+export declare function getRenderSlotsFromValues({ value, previousValue, prefix, suffix, decimalSeparator, thousandSeparator, decimalScale, fixedDecimalScale, }: GetRenderSlotsFromValuesInput): RenderSlot[];

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

@@ -0,0 +1,9 @@
+import type { RollingNumberCssVariables, RollingNumberFactory, RollingNumberProps, RollingNumberStylesNames } from './RollingNumber';
+export { RollingNumber } from './RollingNumber';
+export type { RollingNumberProps, RollingNumberStylesNames, RollingNumberCssVariables, RollingNumberFactory, };
+export declare namespace RollingNumber {
+    type Props = RollingNumberProps;
+    type StylesNames = RollingNumberStylesNames;
+    type CssVariables = RollingNumberCssVariables;
+    type Factory = RollingNumberFactory;
+}

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/TagsInput/TagsInput.d.ts

@@ -54,6 +54,8 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     isDuplicate?: (value: string, currentValues: string[]) => boolean;
     /** If set, the dropdown opens when the input receives focus @default true */
     openOnFocus?: boolean;
+    /** If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */
+    withPillsReorder?: boolean;
 }
 export type TagsInputFactory = Factory<{
     props: TagsInputProps;

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

@@ -1,5 +1,6 @@
 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;
@@ -39,6 +40,9 @@ export interface RenderTreeNodePayload {
         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';
@@ -74,6 +78,12 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     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;
 }

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

@@ -2,6 +2,7 @@ import { GetStylesApi } from '../../core';
 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>;
@@ -18,10 +19,12 @@ interface TreeNodeProps {
     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, onDragDrop, dragStateRef, data, }: 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/index.d.ts

@@ -13,3 +13,4 @@ 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/use-tree-node-drag-drop.d.ts

@@ -1,18 +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 declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, }: UseTreeNodeDragDropInput): Record<string, never> | {
-    draggable: true;
-    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;
+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/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,124 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+import { ComboboxLikeStylesNames } from '../Combobox';
+import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
+import { ScrollAreaProps } from '../ScrollArea';
+import type { TreeNodeData } from '../Tree';
+import { CheckedStrategy } from './get-checked-values-by-strategy';
+import { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './TreeSelectOption';
+export type TreeSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
+export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
+export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
+export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends BoxProps, __BaseInputProps, StylesApiProps<TreeSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Tree data */
+    data: TreeNodeData[];
+    /** Selection mode: 'single', 'multiple', or 'checkbox' (with cascade) @default 'single' */
+    mode?: Mode;
+    /** Controlled value */
+    value?: TreeSelectValue<Mode>;
+    /** Default value */
+    defaultValue?: TreeSelectValue<Mode>;
+    /** Called when value changes */
+    onChange?: (value: TreeSelectValue<Mode>) => void;
+    /** Disables parent-child cascade in checkbox mode @default false */
+    checkStrictly?: boolean;
+    /** Controls which checked nodes appear in value/pills in checkbox mode @default 'child' */
+    checkedStrategy?: CheckedStrategy;
+    /** Default expanded node values */
+    defaultExpandedValues?: string[];
+    /** Expand all nodes by default @default false */
+    defaultExpandAll?: boolean;
+    /** Controlled expanded state */
+    expandedValues?: string[];
+    /** Called when expanded state changes */
+    onExpandedChange?: (values: string[]) => void;
+    /** Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand. @default false */
+    expandOnClick?: boolean;
+    /** Enables search filtering @default false */
+    searchable?: boolean;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Default search value */
+    defaultSearchValue?: string;
+    /** Called when search changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom filter function */
+    filter?: (query: string, node: TreeNodeData) => boolean;
+    /** Message when no nodes match search */
+    nothingFoundMessage?: React.ReactNode;
+    /** Allows deselecting in single mode @default true */
+    allowDeselect?: boolean;
+    /** Shows clear button @default false */
+    clearable?: boolean;
+    /** Determines how the clear button and rightSection are rendered @default 'both' */
+    clearSectionMode?: ClearSectionMode;
+    /** Props for the clear button */
+    clearButtonProps?: InputClearButtonProps;
+    /** Maximum selectable values (multiple/checkbox mode) */
+    maxValues?: number;
+    /** Maximum displayed pills before "+N more" */
+    maxDisplayedValues?: number;
+    /** Content shown when values overflow maxDisplayedValues */
+    maxDisplayedValuesContent?: React.ReactNode | ((overflow: number) => React.ReactNode);
+    /** Called with removed value in multiple/checkbox mode */
+    onRemove?: (value: string) => void;
+    /** Called when clear button is clicked */
+    onClear?: () => void;
+    /** Custom node rendering in the dropdown */
+    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+    /** Show tree connection lines between parent and child nodes @default true */
+    withLines?: boolean;
+    /** Props for the hidden input */
+    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
+    /** Divider for hidden input values @default ',' */
+    hiddenInputValuesDivider?: string;
+    /** Props for the ScrollArea in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
+    /** Controls the default chevron color */
+    chevronColor?: MantineColor;
+    /** Max dropdown height @default 220 */
+    maxDropdownHeight?: number | string;
+    /** Controlled dropdown state */
+    dropdownOpened?: boolean;
+    /** Default dropdown state */
+    defaultDropdownOpened?: boolean;
+    /** Called when dropdown opens */
+    onDropdownOpen?: () => void;
+    /** Called when dropdown closes */
+    onDropdownClose?: () => void;
+    /** Props passed to the underlying Combobox */
+    comboboxProps?: Record<string, any>;
+    /** Clear search on selection change @default true */
+    clearSearchOnChange?: boolean;
+    /** Opens dropdown on focus (searchable mode) @default true */
+    openOnFocus?: boolean;
+    /** aria-label values for the expand/collapse chevron button */
+    chevronAriaLabels?: TreeSelectChevronAriaLabels;
+}
+export type TreeSelectFactory = Factory<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = 'single'>(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}>;
+export declare const TreeSelect: (<Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element) & import("../..").ThemeExtend<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & import("../..").ComponentClasses<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & Record<string, never> & import("../..").FactoryComponentWithProps<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & {
+    displayName?: string;
+};

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

@@ -0,0 +1,36 @@
+import type { TreeNodeData } from '../Tree';
+export interface TreeSelectChevronAriaLabels {
+    /** aria-label for the expand button when the node is collapsed @default 'Expand' */
+    expand?: string;
+    /** aria-label for the expand button when the node is expanded @default 'Collapse' */
+    collapse?: string;
+}
+export interface TreeSelectOptionProps {
+    node: TreeNodeData;
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    showCheckbox: boolean;
+    isLastChild: boolean;
+    lineGuides: boolean[];
+    withLines: boolean;
+    onToggleExpand: (value: string) => void;
+    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+    chevronAriaLabels?: TreeSelectChevronAriaLabels;
+}
+export interface TreeSelectRenderNodePayload {
+    node: TreeNodeData;
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+}
+export declare function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, chevronAriaLabels, }: TreeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeSelectOption {
+    var displayName: string;
+}

package/lib/components/TreeSelect/flatten-tree-select-data.d.ts

@@ -0,0 +1,12 @@
+import type { TreeNodeData } from '../Tree';
+import type { TreeExpandedState } from '../Tree/use-tree';
+export interface TreeSelectFlatNode {
+    node: TreeNodeData;
+    level: number;
+    parent: string | null;
+    hasChildren: boolean;
+    expanded: boolean;
+    isLastChild: boolean;
+    lineGuides: boolean[];
+}
+export declare function flattenTreeSelectData(data: TreeNodeData[], expandedState: TreeExpandedState): TreeSelectFlatNode[];

package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeData } from '../Tree';
+export type CheckedStrategy = 'all' | 'parent' | 'child';
+export declare function expandToLeafChecked(value: string[], data: TreeNodeData[]): string[];
+export declare function checkedToValue(checkedState: string[], data: TreeNodeData[], strategy: CheckedStrategy): string[];

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

@@ -0,0 +1,13 @@
+import type { TreeSelectFactory, TreeSelectMode, TreeSelectProps, TreeSelectStylesNames, TreeSelectValue } from './TreeSelect';
+export { TreeSelect } from './TreeSelect';
+export { TreeSelectOption } from './TreeSelectOption';
+export type { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './TreeSelectOption';
+export type { CheckedStrategy } from './get-checked-values-by-strategy';
+export type { TreeSelectProps, TreeSelectStylesNames, TreeSelectFactory, TreeSelectMode, TreeSelectValue, };
+export declare namespace TreeSelect {
+    type Props = TreeSelectProps;
+    type StylesNames = TreeSelectStylesNames;
+    type Factory = TreeSelectFactory;
+    type Mode = TreeSelectMode;
+    type Value<Mode extends TreeSelectMode> = TreeSelectValue<Mode>;
+}

package/lib/components/index.d.ts

@@ -79,6 +79,7 @@ export * from './Portal';
 export * from './Progress';
 export * from './Radio';
 export * from './Rating';
+export * from './RollingNumber';
 export * from './RingProgress';
 export * from './Scroller';
 export * from './SegmentedControl';
@@ -105,4 +106,5 @@ export * from './Title';
 export * from './Tooltip';
 export * from './Transition';
 export * from './Tree';
+export * from './TreeSelect';
 export * from './Typography';

package/lib/core/MantineProvider/use-props/use-props.d.ts

@@ -1,3 +1,3 @@
-export declare function useProps<T extends Record<string, any>, U extends Partial<T> | null = {}>(component: string, defaultProps: U, props: T): T & (U extends null | undefined ? {} : {
+export declare function useProps<T extends Record<string, any>, U extends Partial<T> | null = {}>(component: string | (string | undefined)[], defaultProps: U, props: T): T & (U extends null | undefined ? {} : {
     [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>;
 });

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.1.0",
+  "version": "9.2.0",
   "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.1.0",
+    "@mantine/hooks": "9.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Pill.css

@@ -26,6 +26,7 @@
   user-select: none;
   -webkit-user-select: none;
   max-width: 100%;
+  position: relative;
 }
 
   :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 {
@@ -45,6 +46,40 @@
     cursor: not-allowed;
   }
 
+  .m_7cda1cd6:where([draggable='true']) {
+    cursor: grab;
+  }
+
+  .m_7cda1cd6:where([draggable='true']):focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+
+  .m_7cda1cd6:where([data-dragging]) {
+    opacity: 0.4;
+    cursor: grabbing;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before,
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: calc(0.125rem * var(--mantine-scale));
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before {
+    inset-inline-start: calc(-0.25rem * var(--mantine-scale));
+  }
+
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    inset-inline-end: calc(-0.25rem * var(--mantine-scale));
+  }
+
 :where([data-mantine-color-scheme='light']) .m_44da308b {
     background-color: var(--mantine-color-gray-1);
 }

package/styles/Pill.layer.css

@@ -26,6 +26,7 @@
   user-select: none;
   -webkit-user-select: none;
   max-width: 100%;
+  position: relative;
 }
 
   :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 {
@@ -45,6 +46,40 @@
     cursor: not-allowed;
   }
 
+  .m_7cda1cd6:where([draggable='true']) {
+    cursor: grab;
+  }
+
+  .m_7cda1cd6:where([draggable='true']):focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+
+  .m_7cda1cd6:where([data-dragging]) {
+    opacity: 0.4;
+    cursor: grabbing;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before,
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: calc(0.125rem * var(--mantine-scale));
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before {
+    inset-inline-start: calc(-0.25rem * var(--mantine-scale));
+  }
+
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    inset-inline-end: calc(-0.25rem * var(--mantine-scale));
+  }
+
 :where([data-mantine-color-scheme='light']) .m_44da308b {
     background-color: var(--mantine-color-gray-1);
 }

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 {