@mantine/core 9.1.1 → 9.2.1

package/esm/utils/InlineInput/InlineInput.mjs

@@ -19,6 +19,8 @@ function InlineInput({ __staticSelector, __stylesApiProps, className, classNames
 		unstyled,
 		attributes
 	});
+	const descriptionId = description ? `${id}-description` : void 0;
+	const errorId = error && typeof error !== "boolean" ? `${id}-error` : void 0;
 	return /* @__PURE__ */ jsx(Box, {
 		...getStyles("root"),
 		__vars: {
@@ -45,12 +47,14 @@ function InlineInput({ __staticSelector, __stylesApiProps, className, classNames
 						children: label
 					}),
 					description && /* @__PURE__ */ jsx(Input.Description, {
+						id: descriptionId,
 						size,
 						__inheritStyles: false,
 						...getStyles("description"),
 						children: description
 					}),
 					error && typeof error !== "boolean" && /* @__PURE__ */ jsx(Input.Error, {
+						id: errorId,
 						size,
 						__inheritStyles: false,
 						...getStyles("error"),

package/esm/utils/InlineInput/InlineInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineInput.mjs","names":["classes"],"sources":["../../../src/utils/InlineInput/InlineInput.tsx"],"sourcesContent":["import { Input } from '../../components/Input';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  StylesApiProps,\n  useStyles,\n} from '../../core';\nimport classes from './InlineInput.module.css';\n\nexport const InlineInputClasses = classes;\n\nexport type InlineInputStylesNames =\n  | 'root'\n  | 'body'\n  | 'labelWrapper'\n  | 'label'\n  | 'description'\n  | 'error';\n\nexport interface InlineInputProps\n  extends BoxProps, StylesApiProps<InlineInputFactory>, ElementProps<'div'> {\n  __staticSelector: string;\n  __stylesApiProps: Record<string, any>;\n  label: React.ReactNode;\n  description: React.ReactNode;\n  id: string;\n  disabled: boolean | undefined;\n  error: React.ReactNode;\n  size: MantineSize | (string & {}) | undefined;\n  labelPosition?: 'left' | 'right';\n  bodyElement?: any;\n  labelElement?: any;\n}\n\nexport type InlineInputFactory = Factory<{\n  props: any;\n  stylesNames: InlineInputStylesNames;\n}>;\n\nexport function InlineInput({\n  __staticSelector,\n  __stylesApiProps,\n  className,\n  classNames,\n  styles,\n  unstyled,\n  children,\n  label,\n  description,\n  id,\n  disabled,\n  error,\n  size,\n  labelPosition = 'left',\n  bodyElement = 'div',\n  labelElement = 'label',\n  variant,\n  style,\n  vars,\n  mod,\n  attributes,\n  ...others\n}: InlineInputProps) {\n  const getStyles = useStyles<InlineInputFactory>({\n    name: __staticSelector,\n    props: __stylesApiProps,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  return (\n    <Box\n      {...getStyles('root')}\n      __vars={{\n        '--label-fz': getFontSize(size),\n        '--label-lh': getSize(size, 'label-lh'),\n      }}\n      mod={[{ 'label-position': labelPosition }, mod]}\n      variant={variant}\n      size={size}\n      {...others}\n    >\n      <Box\n        component={bodyElement}\n        htmlFor={bodyElement === 'label' ? id : undefined}\n        {...getStyles('body')}\n      >\n        {children}\n\n        <div {...getStyles('labelWrapper')} data-disabled={disabled || undefined}>\n          {label && (\n            <Box\n              component={labelElement}\n              htmlFor={labelElement === 'label' ? id : undefined}\n              {...getStyles('label')}\n              data-disabled={disabled || undefined}\n            >\n              {label}\n            </Box>\n          )}\n\n          {description && (\n            <Input.Description size={size} __inheritStyles={false} {...getStyles('description')}>\n              {description}\n            </Input.Description>\n          )}\n\n          {error && typeof error !== 'boolean' && (\n            <Input.Error size={size} __inheritStyles={false} {...getStyles('error')}>\n              {error}\n            </Input.Error>\n          )}\n        </div>\n      </Box>\n    </Box>\n  );\n}\n\nInlineInput.displayName = '@mantine/core/InlineInput';\n"],"mappings":";;;;;;;;AAcA,MAAa,qBAAqBA;AA8BlC,SAAgB,YAAY,EAC1B,kBACA,kBACA,WACA,YACA,QACA,UACA,UACA,OACA,aACA,IACA,UACA,OACA,MACA,gBAAgB,QAChB,cAAc,OACd,eAAe,SACf,SACA,OACA,MACA,KACA,YACA,GAAG,UACgB;CACnB,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,OAAO;EACP;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,OAAO;EACrB,QAAQ;GACN,cAAc,YAAY,KAAK;GAC/B,cAAc,QAAQ,MAAM,WAAW;GACxC;EACD,KAAK,CAAC,EAAE,kBAAkB,eAAe,EAAE,IAAI;EACtC;EACH;EACN,GAAI;YAEJ,qBAAC,KAAD;GACE,WAAW;GACX,SAAS,gBAAgB,UAAU,KAAK,KAAA;GACxC,GAAI,UAAU,OAAO;aAHvB,CAKG,UAED,qBAAC,OAAD;IAAK,GAAI,UAAU,eAAe;IAAE,iBAAe,YAAY,KAAA;cAA/D;KACG,SACC,oBAAC,KAAD;MACE,WAAW;MACX,SAAS,iBAAiB,UAAU,KAAK,KAAA;MACzC,GAAI,UAAU,QAAQ;MACtB,iBAAe,YAAY,KAAA;gBAE1B;MACG,CAAA;KAGP,eACC,oBAAC,MAAM,aAAP;MAAyB;MAAM,iBAAiB;MAAO,GAAI,UAAU,cAAc;gBAChF;MACiB,CAAA;KAGrB,SAAS,OAAO,UAAU,aACzB,oBAAC,MAAM,OAAP;MAAmB;MAAM,iBAAiB;MAAO,GAAI,UAAU,QAAQ;gBACpE;MACW,CAAA;KAEZ;MACF;;EACF,CAAA;;AAIV,YAAY,cAAc"}
+{"version":3,"file":"InlineInput.mjs","names":["classes"],"sources":["../../../src/utils/InlineInput/InlineInput.tsx"],"sourcesContent":["import { Input } from '../../components/Input';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  StylesApiProps,\n  useStyles,\n} from '../../core';\nimport classes from './InlineInput.module.css';\n\nexport const InlineInputClasses = classes;\n\nexport type InlineInputStylesNames =\n  | 'root'\n  | 'body'\n  | 'labelWrapper'\n  | 'label'\n  | 'description'\n  | 'error';\n\nexport interface InlineInputProps\n  extends BoxProps, StylesApiProps<InlineInputFactory>, ElementProps<'div'> {\n  __staticSelector: string;\n  __stylesApiProps: Record<string, any>;\n  label: React.ReactNode;\n  description: React.ReactNode;\n  id: string;\n  disabled: boolean | undefined;\n  error: React.ReactNode;\n  size: MantineSize | (string & {}) | undefined;\n  labelPosition?: 'left' | 'right';\n  bodyElement?: any;\n  labelElement?: any;\n}\n\nexport type InlineInputFactory = Factory<{\n  props: any;\n  stylesNames: InlineInputStylesNames;\n}>;\n\nexport function InlineInput({\n  __staticSelector,\n  __stylesApiProps,\n  className,\n  classNames,\n  styles,\n  unstyled,\n  children,\n  label,\n  description,\n  id,\n  disabled,\n  error,\n  size,\n  labelPosition = 'left',\n  bodyElement = 'div',\n  labelElement = 'label',\n  variant,\n  style,\n  vars,\n  mod,\n  attributes,\n  ...others\n}: InlineInputProps) {\n  const getStyles = useStyles<InlineInputFactory>({\n    name: __staticSelector,\n    props: __stylesApiProps,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const descriptionId = description ? `${id}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${id}-error` : undefined;\n\n  return (\n    <Box\n      {...getStyles('root')}\n      __vars={{\n        '--label-fz': getFontSize(size),\n        '--label-lh': getSize(size, 'label-lh'),\n      }}\n      mod={[{ 'label-position': labelPosition }, mod]}\n      variant={variant}\n      size={size}\n      {...others}\n    >\n      <Box\n        component={bodyElement}\n        htmlFor={bodyElement === 'label' ? id : undefined}\n        {...getStyles('body')}\n      >\n        {children}\n\n        <div {...getStyles('labelWrapper')} data-disabled={disabled || undefined}>\n          {label && (\n            <Box\n              component={labelElement}\n              htmlFor={labelElement === 'label' ? id : undefined}\n              {...getStyles('label')}\n              data-disabled={disabled || undefined}\n            >\n              {label}\n            </Box>\n          )}\n\n          {description && (\n            <Input.Description\n              id={descriptionId}\n              size={size}\n              __inheritStyles={false}\n              {...getStyles('description')}\n            >\n              {description}\n            </Input.Description>\n          )}\n\n          {error && typeof error !== 'boolean' && (\n            <Input.Error id={errorId} size={size} __inheritStyles={false} {...getStyles('error')}>\n              {error}\n            </Input.Error>\n          )}\n        </div>\n      </Box>\n    </Box>\n  );\n}\n\nInlineInput.displayName = '@mantine/core/InlineInput';\n"],"mappings":";;;;;;;;AAcA,MAAa,qBAAqBA;AA8BlC,SAAgB,YAAY,EAC1B,kBACA,kBACA,WACA,YACA,QACA,UACA,UACA,OACA,aACA,IACA,UACA,OACA,MACA,gBAAgB,QAChB,cAAc,OACd,eAAe,SACf,SACA,OACA,MACA,KACA,YACA,GAAG,UACgB;CACnB,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,OAAO;EACP;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,cAAc,GAAG,GAAG,gBAAgB,KAAA;CAC1D,MAAM,UAAU,SAAS,OAAO,UAAU,YAAY,GAAG,GAAG,UAAU,KAAA;CAEtE,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,QAAQ;GACN,cAAc,YAAY,IAAI;GAC9B,cAAc,QAAQ,MAAM,UAAU;EACxC;EACA,KAAK,CAAC,EAAE,kBAAkB,cAAc,GAAG,GAAG;EACrC;EACH;EACN,GAAI;YAEJ,qBAAC,KAAD;GACE,WAAW;GACX,SAAS,gBAAgB,UAAU,KAAK,KAAA;GACxC,GAAI,UAAU,MAAM;aAHtB,CAKG,UAED,qBAAC,OAAD;IAAK,GAAI,UAAU,cAAc;IAAG,iBAAe,YAAY,KAAA;cAA/D;KACG,SACC,oBAAC,KAAD;MACE,WAAW;MACX,SAAS,iBAAiB,UAAU,KAAK,KAAA;MACzC,GAAI,UAAU,OAAO;MACrB,iBAAe,YAAY,KAAA;gBAE1B;KACE,CAAA;KAGN,eACC,oBAAC,MAAM,aAAP;MACE,IAAI;MACE;MACN,iBAAiB;MACjB,GAAI,UAAU,aAAa;gBAE1B;KACgB,CAAA;KAGpB,SAAS,OAAO,UAAU,aACzB,oBAAC,MAAM,OAAP;MAAa,IAAI;MAAe;MAAM,iBAAiB;MAAO,GAAI,UAAU,OAAO;gBAChF;KACU,CAAA;IAEZ;KACF;;CACF,CAAA;AAET;AAEA,YAAY,cAAc"}

package/esm/utils/InputsGroupFieldset/InputsGroupFieldset.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputsGroupFieldset.mjs","names":[],"sources":["../../../src/utils/InputsGroupFieldset/InputsGroupFieldset.tsx"],"sourcesContent":["import { use } from 'react';\nimport { InputWrapperContext } from '../../components/Input';\n\ninterface InputsGroupFieldsetProps {\n  children: React.ReactNode;\n  role: 'radiogroup' | 'group';\n}\n\nexport function InputsGroupFieldset({ children, role }: InputsGroupFieldsetProps) {\n  const ctx = use(InputWrapperContext);\n\n  if (!ctx) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div role={role} aria-labelledby={ctx.labelId} aria-describedby={ctx.describedBy}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAQA,SAAgB,oBAAoB,EAAE,UAAU,QAAkC;CAChF,MAAM,MAAM,IAAI,oBAAoB;AAEpC,KAAI,CAAC,IACH,QAAO,oBAAA,YAAA,EAAG,UAAY,CAAA;AAGxB,QACE,oBAAC,OAAD;EAAW;EAAM,mBAAiB,IAAI;EAAS,oBAAkB,IAAI;EAClE;EACG,CAAA"}
+{"version":3,"file":"InputsGroupFieldset.mjs","names":[],"sources":["../../../src/utils/InputsGroupFieldset/InputsGroupFieldset.tsx"],"sourcesContent":["import { use } from 'react';\nimport { InputWrapperContext } from '../../components/Input';\n\ninterface InputsGroupFieldsetProps {\n  children: React.ReactNode;\n  role: 'radiogroup' | 'group';\n}\n\nexport function InputsGroupFieldset({ children, role }: InputsGroupFieldsetProps) {\n  const ctx = use(InputWrapperContext);\n\n  if (!ctx) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div role={role} aria-labelledby={ctx.labelId} aria-describedby={ctx.describedBy}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAQA,SAAgB,oBAAoB,EAAE,UAAU,QAAkC;CAChF,MAAM,MAAM,IAAI,mBAAmB;CAEnC,IAAI,CAAC,KACH,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CAGvB,OACE,oBAAC,OAAD;EAAW;EAAM,mBAAiB,IAAI;EAAS,oBAAkB,IAAI;EAClE;CACE,CAAA;AAET"}

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

@@ -1,6 +1,7 @@
 import { Primitive } from '../../core';
 import type { ComboboxProps, ComboboxStylesNames } from './Combobox';
 import type { OptionsFilter } from './OptionsDropdown/OptionsDropdown';
+import type { PillReorderProps } from './use-pills-reorder/use-pills-reorder';
 export interface ComboboxGenericItem<Value extends Primitive = string> {
     value: Value;
     disabled?: boolean;
@@ -57,4 +58,6 @@ export interface ComboboxRenderPillInput<Value extends Primitive = string> {
     value?: Value;
     onRemove?: () => void;
     disabled?: boolean;
+    /** Props to spread into the pill element to enable drag-and-drop reordering. Defined only when `withPillsReorder` is set. */
+    reorderProps?: PillReorderProps;
 }

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

@@ -22,6 +22,7 @@ export { useComboboxTargetProps } from './use-combobox-target-props/use-combobox
 export { isOptionsGroup } from './OptionsDropdown/is-options-group';
 export { defaultOptionsFilter } from './OptionsDropdown/default-options-filter';
 export { useComboboxContext } from './Combobox.context';
+export { usePillsReorder } from './use-pills-reorder/use-pills-reorder';
 export type { ComboboxFactory, ComboboxProps, ComboboxStylesNames } from './Combobox';
 export type { ComboboxContextValue } from './Combobox.context';
 export type { ComboboxData, ComboboxGenericData, ComboboxGenericItem, ComboboxItem, ComboboxItemGroup, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxParsedItem, ComboboxParsedItemGroup, ComboboxRenderPillInput, } from './Combobox.types';
@@ -42,3 +43,4 @@ export type { ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';
 export type { OptionsData, OptionsDropdownProps, OptionsFilter, } from './OptionsDropdown/OptionsDropdown';
 export type { ComboboxDropdownEventSource, ComboboxStore, UseComboboxOptions, } from './use-combobox/use-combobox';
 export type { UseVirtualizedComboboxOptions } from './use-combobox/use-virtualized-combobox';
+export type { PillReorderProps, UsePillsReorderInput } from './use-pills-reorder/use-pills-reorder';

package/lib/components/Combobox/use-pills-reorder/move-pill.d.ts

@@ -0,0 +1,2 @@
+export type PillReorderPosition = 'before' | 'after';
+export declare function movePill<T>(value: T[], from: number, to: number, position: PillReorderPosition): T[];

package/lib/components/Combobox/use-pills-reorder/use-pills-reorder.d.ts

@@ -0,0 +1,26 @@
+export interface PillReorderProps {
+    draggable: boolean;
+    tabIndex: number;
+    'data-mantine-pill-index': number;
+    'aria-keyshortcuts': string;
+    onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
+    onDragStart: (event: React.DragEvent<HTMLElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLElement>) => void;
+    onDrop: (event: React.DragEvent<HTMLElement>) => void;
+    onDragEnd: (event: React.DragEvent<HTMLElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+}
+export interface PillsReorderListProps {
+    ref?: (node: HTMLDivElement | null) => void;
+}
+export interface UsePillsReorderInput<T> {
+    value: T[];
+    onChange: (value: T[]) => void;
+    enabled: boolean | undefined;
+}
+export declare function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>): {
+    getPillProps: (index: number) => PillReorderProps | undefined;
+    getListProps: () => PillsReorderListProps;
+    handleInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};

package/lib/components/Highlight/Highlight.d.ts

@@ -13,7 +13,7 @@ export interface HighlightProps extends Omit<TextProps, 'color'> {
      * - string[]: multiple terms with same color
      * - HighlightTerm[]: multiple terms with custom colors per term
      *
-     * - Matching is case-insensitive
+     * - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior
      * - Regex special characters are automatically escaped
      * - When multiple substrings are provided, longer matches take precedence
      * - Empty strings and whitespace-only strings are ignored
@@ -36,6 +36,17 @@ export interface HighlightProps extends Omit<TextProps, 'color'> {
      * @default false
      */
     wholeWord?: boolean;
+    /**
+     * Perform case-insensitive matching.
+     * @default true
+     */
+    caseInsensitive?: boolean;
+    /**
+     * Perform accent-insensitive matching.
+     * When enabled cafe will match cafe, café, cafè, etc.
+     * @default true
+     */
+    accentInsensitive?: boolean;
 }
 export type HighlightFactory = PolymorphicFactory<{
     props: HighlightProps;

package/lib/components/Highlight/highlighter/highlighter.d.ts

@@ -1,3 +1,4 @@
+export declare function foldAccents(text: string): string;
 export interface HighlightChunk {
     chunk: string;
     highlighted: boolean;
@@ -5,5 +6,7 @@ export interface HighlightChunk {
 }
 export interface HighlighterOptions {
     wholeWord?: boolean;
+    caseInsensitive?: boolean;
+    accentInsensitive?: boolean;
 }
 export declare function highlighter(value: string, _highlight: string | string[], options?: HighlighterOptions): HighlightChunk[];

package/lib/components/MaskInput/MaskInput.d.ts

@@ -53,6 +53,8 @@ export interface MaskInputProps extends BoxProps, __BaseInputProps, StylesApiPro
             end: number;
         } | null;
     };
+    /** Assigns a function that clears the input value to the given ref */
+    resetRef?: React.RefObject<(() => void) | null>;
 }
 export type MaskInputFactory = Factory<{
     props: MaskInputProps;

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

@@ -16,5 +16,6 @@ export interface MenuContextValue {
     openedViaClick: boolean;
     setOpenedViaClick: (value: boolean) => void;
     withInitialFocusPlaceholder: boolean | undefined;
+    registerOpenSub: (closeFn: () => void) => () => void;
 }
 export declare const MenuContextProvider: import("react").Context<MenuContextValue | null>, useMenuContext: () => MenuContextValue;

package/lib/components/Menu/MenuSub/MenuSub.context.d.ts

@@ -1,3 +1,4 @@
+import type { ReferenceType } from '@floating-ui/react';
 export interface SubMenuContextValue {
     opened: boolean;
     close: () => void;
@@ -5,5 +6,10 @@ export interface SubMenuContextValue {
     focusFirstItem: () => void;
     focusParentItem: () => void;
     parentContext: SubMenuContextValue | null;
+    setReference: (node: ReferenceType | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    registerOpenSub: (closeFn: () => void) => () => void;
 }
 export declare const SubMenuContext: import("react").Context<SubMenuContextValue | null>;

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -58,6 +58,8 @@ export interface MultiSelectProps<Value extends Primitive = string> extends BoxP
     clearSearchOnChange?: boolean;
     /** Controls whether dropdown opens when the input receives focus @default true */
     openOnFocus?: boolean;
+    /** If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */
+    withPillsReorder?: boolean;
 }
 export type MultiSelectFactory = Factory<{
     props: MultiSelectProps;

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

@@ -0,0 +1,11 @@
+import { useStyles } from '../../core';
+import type { RollingNumberFactory } from './RollingNumber';
+interface DigitColumnProps {
+    digit: string;
+    getStyles: ReturnType<typeof useStyles<RollingNumberFactory>>;
+    previousDigit: string | null;
+    empty?: boolean;
+    valueDirection: 'up' | 'down';
+}
+export declare function DigitColumn({ digit, getStyles, previousDigit, empty, valueDirection, }: DigitColumnProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -58,6 +58,8 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     maxRange?: number;
     /** `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) */
     thumbLabel?: string;
+    /** `aria-valuetext` for both thumbs. When a function is provided, it receives the scaled value. */
+    thumbValueText?: string | ((value: number) => string);
     /** First thumb `aria-label` */
     thumbFromLabel?: string;
     /** Second thumb `aria-label` */

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

@@ -39,6 +39,8 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     labelAlwaysOn?: boolean;
     /** Thumb `aria-label` */
     thumbLabel?: string;
+    /** Thumb `aria-valuetext`. When a function is provided, it receives the scaled value. */
+    thumbValueText?: string | ((value: number) => string);
     /** Determines whether the label should be displayed when the slider is hovered @default true */
     showLabelOnHover?: boolean;
     /** Content rendered inside thumb */

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

@@ -6,6 +6,7 @@ export interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {
     position: number;
     dragging: boolean;
     label: React.ReactNode;
+    thumbValueText?: string | ((value: number) => string);
     onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     onMouseDown?: (event: any) => void;
     labelTransitionProps: TransitionOverride | undefined;
@@ -19,7 +20,7 @@ export interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Thumb {
     var displayName: string;
 }

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.1.1",
+  "version": "9.2.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.1.1",
+    "@mantine/hooks": "9.2.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.5",
-    "react-dom": "19.2.5"
+    "react": "19.2.6",
+    "react-dom": "19.2.6"
   }
 }