@mantine/core 8.1.2 → 8.2.0

package/lib/components/Text/Text.d.ts

@@ -7,19 +7,19 @@ export type TextCssVariables = {
 };
 export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
     __staticSelector?: string;
-    /** Controls `font-size` and `line-height`, `'md'` by default */
-    size?: MantineFontSize & MantineLineHeight;
+    /** Controls `font-size` and `line-height` @default `'md'` */
+    size?: MantineFontSize | MantineLineHeight;
     /** Number of lines after which Text will be truncated */
     lineClamp?: number;
     /** Side on which Text must be truncated, if `true`, text is truncated from the start */
     truncate?: TextTruncate;
-    /** Sets `line-height` to 1 for centering, `false` by default */
+    /** Sets `line-height` to 1 for centering @default `false` */
     inline?: boolean;
-    /** Determines whether font properties should be inherited from the parent, `false` by default */
+    /** Determines whether font properties should be inherited from the parent @default `false` */
     inherit?: boolean;
-    /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
+    /** Gradient configuration, ignored when `variant` is not `gradient` @default `theme.defaultGradient` */
     gradient?: MantineGradient;
-    /** Shorthand for `component="span"`, `false` by default, default root element is `p` */
+    /** Shorthand for `component="span"` */
     span?: boolean;
     /** @deprecated Use `c` prop instead */
     color?: MantineColor;

package/lib/components/Textarea/Textarea.d.ts

@@ -2,13 +2,13 @@ import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __BaseInputProps, __InputStylesNames } from '../Input';
 export interface TextareaProps extends BoxProps, __BaseInputProps, StylesApiProps<TextareaFactory>, ElementProps<'textarea', 'size'> {
     __staticSelector?: string;
-    /** Determines whether the textarea height should grow with its content, `false` by default */
+    /** If set, enables textarea height growing with its content @default `false` */
     autosize?: boolean;
     /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */
     maxRows?: number;
     /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */
     minRows?: number;
-    /** Controls `resize` CSS property, `'none'` by default */
+    /** Controls `resize` CSS property @default `'none'` */
     resize?: React.CSSProperties['resize'];
 }
 export type TextareaFactory = Factory<{

package/lib/components/ThemeIcon/ThemeIcon.d.ts

@@ -5,17 +5,17 @@ export type ThemeIconCssVariables = {
     root: '--ti-radius' | '--ti-size' | '--ti-bg' | '--ti-color' | '--ti-bd';
 };
 export interface ThemeIconProps extends BoxProps, StylesApiProps<ThemeIconFactory>, ElementProps<'div'> {
-    /** Controls width and height of the button. Numbers are converted to rem. `'md'` by default. */
+    /** Controls width and height of the button. Numbers are converted to rem. @default `'md'` */
     size?: MantineSize | (string & {}) | number;
-    /** Key of `theme.colors` or any valid CSS color. Default value is `theme.primaryColor`.  */
+    /** Key of `theme.colors` or any valid CSS color. @default `theme.primaryColor` */
     color?: MantineColor;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `theme.defaultRadius` by default. */
+    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default `theme.defaultRadius` */
     radius?: MantineRadius;
-    /** Gradient data used when `variant="gradient"`, default value is `theme.defaultGradient` */
+    /** Gradient data used when `variant="gradient"` @default `theme.defaultGradient` */
     gradient?: MantineGradient;
     /** Icon displayed inside the component */
     children?: React.ReactNode;
-    /** Determines whether button text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
+    /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;
 }
 export type ThemeIconFactory = Factory<{

package/lib/components/Timeline/Timeline.d.ts

@@ -7,21 +7,21 @@ export type TimelineCssVariables = {
 export interface TimelineProps extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {
     /** `Timeline.Item` components */
     children?: React.ReactNode;
-    /** Index of active element */
+    /** Index of the active element */
     active?: number;
-    /** Key of `theme.colors` or any valid CSS color to control active item colors, `theme.primaryColor` by default */
+    /** Key of `theme.colors` or any valid CSS color to control active item colors @default `theme.primaryColor` */
     color?: MantineColor;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default `'xl'` */
     radius?: MantineRadius;
-    /** Controls size of the bullet, `20` by default */
+    /** Size of the bullet @default `20` */
     bulletSize?: number | string;
-    /** Controls how the content is positioned relative to the bullet, `'left'` by default */
+    /** Position of content relative to the bullet @default `'left'` */
     align?: 'right' | 'left';
     /** Control width of the line */
     lineWidth?: number | string;
-    /** Determines whether the active items direction should be reversed without reversing items order, `false` by default */
+    /** If set, the active items direction is reversed without reversing items order @default `false` */
     reverseActive?: boolean;
-    /** Determines whether icon color should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
+    /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;
 }
 export type TimelineFactory = Factory<{

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -1,11 +1,8 @@
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../../core';
 export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle';
 export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {
-    /** Determines whether the item should be highlighted, controlled by the parent `Timeline` component  */
     __active?: boolean;
-    /** Determines whether the line of the item should be highlighted, controlled by the parent Timeline component */
     __lineActive?: boolean;
-    /** Line and bullet position relative to item content, controlled by the parent Timeline component */
     __align?: 'right' | 'left';
     /** Item title, displayed next to the bullet */
     title?: React.ReactNode;
@@ -13,11 +10,11 @@ export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<Time
     children?: React.ReactNode;
     /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */
     bullet?: React.ReactNode;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default `'xl'` */
     radius?: MantineRadius;
-    /** Key of `theme.colors` or any valid CSS color to control active item colors, `theme.primaryColor` by default */
+    /** Key of `theme.colors` or any valid CSS color to control active item colors @default `theme.primaryColor` */
     color?: MantineColor;
-    /** Controls line border style, `'solid'` by default */
+    /** Controls line border style @default `'solid'` */
     lineVariant?: 'solid' | 'dashed' | 'dotted';
 }
 export type TimelineItemFactory = Factory<{

package/lib/components/Title/Title.d.ts

@@ -6,13 +6,13 @@ export type TitleCssVariables = {
     root: '--title-fw' | '--title-lh' | '--title-fz' | '--title-line-clamp' | '--title-text-wrap';
 };
 export interface TitleProps extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1', 'color'> {
-    /** Determines which tag will be used (h1-h6), controls `font-size` style if `size` prop is not set, `1` by default */
+    /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default `1` */
     order?: TitleOrder;
     /** Changes title size, if not set, then size is controlled by `order` prop */
     size?: TitleSize;
-    /** Number of lines after which Text will be truncated */
+    /** Number of lines after which heading will be truncated */
     lineClamp?: number;
-    /** Controls `text-wrap` property, `'wrap'` by default */
+    /** Heading `text-wrap` CSS property @default `'wrap'` */
     textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
 }
 export type TitleFactory = Factory<{

package/lib/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import { Factory } from '../../core';
-import { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../Floating';
+import { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';
 import { TransitionOverride } from '../Transition';
 import { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';
 import { TooltipFloating } from './TooltipFloating/TooltipFloating';
@@ -9,27 +9,27 @@ export interface TooltipProps extends TooltipBaseProps {
     onPositionChange?: (position: FloatingPosition) => void;
     /** Open delay in ms */
     openDelay?: number;
-    /** Close delay in ms, `0` by default */
+    /** Close delay in ms @default `0` */
     closeDelay?: number;
     /** Controlled opened state */
     opened?: boolean;
     /** Uncontrolled tooltip initial opened state */
     defaultOpened?: boolean;
-    /** Space between target element and tooltip in px, `5` by default */
+    /** Space between target element and tooltip in px @default `5` */
     offset?: number | FloatingAxesOffsets;
-    /** Determines whether the tooltip should have an arrow, `false` by default */
+    /** If set, the tooltip has an arrow @default `false` */
     withArrow?: boolean;
-    /** Arrow size in px, `4` by default */
+    /** Arrow size in px @default `4` */
     arrowSize?: number;
-    /** Arrow offset in px, `5` by default */
+    /** Arrow offset in px @default `5` */
     arrowOffset?: number;
-    /** Arrow `border-radius` in px, `0` by default */
+    /** Arrow `border-radius` in px @default `0` */
     arrowRadius?: number;
-    /** Arrow position relative to the tooltip, `side` by default */
+    /** Arrow position relative to the tooltip @default `side` */
     arrowPosition?: ArrowPosition;
-    /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type, `{ duration: 100, transition: 'fade' }` by default */
+    /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default `{ duration: 100, transition: 'fade' }` */
     transitionProps?: TransitionOverride;
-    /** Determines which events will be used to show tooltip, `{ hover: true, focus: false, touch: false }` by default */
+    /** Determines which events will be used to show tooltip @default `{ hover: true, focus: false, touch: false }` */
     events?: {
         hover: boolean;
         focus: boolean;
@@ -39,12 +39,14 @@ export interface TooltipProps extends TooltipBaseProps {
     positionDependencies?: any[];
     /** Must be set if the tooltip target is an inline element */
     inline?: boolean;
-    /** If set, the tooltip will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead */
+    /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */
     keepMounted?: boolean;
-    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy), `'absolute'` by default */
+    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default `'absolute'` */
     floatingStrategy?: FloatingStrategy;
-    /** Determines whether tooltip text color should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
+    /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;
+    /** Selector, ref of an element or element itself that should be used for positioning */
+    target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;
 }
 export type TooltipFactory = Factory<{
     props: TooltipProps;

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

@@ -1,6 +1,6 @@
 import type { FlipOptions, InlineOptions, ShiftOptions, SizeOptions } from '@floating-ui/react';
 import { BoxProps, ElementProps, MantineColor, MantineRadius, StylesApiProps } from '../../core';
-import { FloatingPosition } from '../Floating';
+import { FloatingPosition } from '../../utils/Floating';
 import { BasePortalProps } from '../Portal';
 import type { TooltipFactory } from './Tooltip';
 export type TooltipStylesNames = 'tooltip' | 'arrow';
@@ -15,7 +15,7 @@ export interface TooltipMiddlewares {
 }
 export interface TooltipBaseProps extends BoxProps, StylesApiProps<TooltipFactory>, ElementProps<'div'> {
     /** Target element, must support `ref` prop and `...others` */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) */
     position?: FloatingPosition;
     /** Key of the prop that can be used to access element ref, `ref` by default */
@@ -24,7 +24,7 @@ export interface TooltipBaseProps extends BoxProps, StylesApiProps<TooltipFactor
     label: React.ReactNode;
     /** Determines whether tooltip should be rendered within `Portal`, `true` by default */
     withinPortal?: boolean;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default */
+    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem@default `theme.defaultRadius` */
     radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme */
     color?: MantineColor;

package/lib/components/Tooltip/TooltipFloating/TooltipFloating.d.ts

@@ -1,7 +1,7 @@
 import { Factory } from '../../../core';
 import { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from '../Tooltip.types';
 export interface TooltipFloatingProps extends TooltipBaseProps {
-    /** Offset from mouse in px, `10` by default */
+    /** Offset from mouse in px @default `10` */
     offset?: number;
     /** Uncontrolled tooltip initial opened state */
     defaultOpened?: boolean;

package/lib/components/Tooltip/TooltipFloating/use-floating-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { FloatingPosition } from '../../Floating';
+import { FloatingPosition } from '../../../utils/Floating';
 interface UseFloatingTooltip {
     offset: number;
     position: FloatingPosition;

package/lib/components/Tooltip/TooltipGroup/TooltipGroup.d.ts

@@ -1,6 +1,6 @@
 import { ExtendComponent, Factory, MantineThemeComponent } from '../../../core';
 export interface TooltipGroupProps {
-    /** <Tooltip /> components */
+    /** `Tooltip` components */
     children: React.ReactNode;
     /** Open delay in ms */
     openDelay?: number;

package/lib/components/Tooltip/use-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../Floating';
+import { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';
 import { type TooltipMiddlewares } from './Tooltip.types';
 interface UseTooltip {
     position: FloatingPosition;

package/lib/components/Transition/Transition.d.ts

@@ -1,14 +1,14 @@
 import { MantineTransition } from './transitions';
 export interface TransitionProps {
-    /** If set element will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead */
+    /** If set, the element is not unmounted from the DOM when hidden, `display: none` styles are applied instead */
     keepMounted?: boolean;
     /** Transition name or object */
     transition?: MantineTransition;
-    /** Transition duration in ms, `250` by default */
+    /** Transition duration in ms @default `250` */
     duration?: number;
-    /** Exit transition duration in ms, `250` by default */
+    /** Exit transition duration in ms @default `250` */
     exitDuration?: number;
-    /** Transition timing function, `theme.transitionTimingFunction` by default */
+    /** Transition timing function @default `theme.transitionTimingFunction` */
     timingFunction?: string;
     /** Determines whether component should be mounted to the DOM */
     mounted: boolean;

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

@@ -37,23 +37,23 @@ export type TreeCssVariables = {
 export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {
     /** Data used to render nodes */
     data: TreeNodeData[];
-    /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value, `'lg'` by default */
+    /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default `'lg'` */
     levelOffset?: MantineSpacing;
-    /** Determines whether tree node with children should be expanded on click, `true` by default */
+    /** If set, tree node with children is expanded on click @default `true` */
     expandOnClick?: boolean;
-    /** Determines whether tree node with children should be expanded on space key press, `true` by default */
+    /** If set, tree node with children is expanded on space key press @default `true` */
     expandOnSpace?: boolean;
-    /** Determines whether tree node should be checked on space key press, `false` by default */
+    /** If set, tree node is checked on space key press @default `false` */
     checkOnSpace?: boolean;
-    /** Determines whether node should be selected on click, `false` by default */
+    /** If set, tree node is selected on click @default `false` */
     selectOnClick?: boolean;
     /** Use-tree hook instance that can be used to manipulate component state */
     tree?: TreeController;
     /** A function to render tree node label */
     renderNode?: RenderNode;
-    /** Determines whether selection should be cleared when user clicks outside of the tree, `false` by default */
+    /** If set, selection is cleared when user clicks outside of the tree @default `false` */
     clearSelectionOnOutsideClick?: boolean;
-    /** Determines whether tree nodes range can be selected with click when `Shift` key is pressed, `true` by default */
+    /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default `true` */
     allowRangeSelection?: boolean;
 }
 export type TreeFactory = Factory<{

package/lib/components/Typography/Typography.d.ts

@@ -0,0 +1,14 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+export type TypographyStylesNames = 'root';
+export interface TypographyProps extends BoxProps, StylesApiProps<TypographyFactory>, ElementProps<'div'> {
+}
+export type TypographyFactory = Factory<{
+    props: TypographyProps;
+    ref: HTMLDivElement;
+    stylesNames: TypographyStylesNames;
+}>;
+export declare const Typography: import("../../core").MantineComponent<{
+    props: TypographyProps;
+    ref: HTMLDivElement;
+    stylesNames: TypographyStylesNames;
+}>;

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

@@ -0,0 +1,9 @@
+import { Typography, TypographyFactory, TypographyProps, TypographyStylesNames } from './Typography';
+/** @deprecated use `Typography` instead */
+declare const TypographyStylesProvider: import("../..").MantineComponent<{
+    props: TypographyProps;
+    ref: HTMLDivElement;
+    stylesNames: TypographyStylesNames;
+}>;
+export { Typography, TypographyStylesProvider };
+export type { TypographyFactory, TypographyProps, TypographyStylesNames, TypographyFactory as TypographyStylesProviderFactory, TypographyProps as TypographyStylesProviderProps, TypographyStylesNames as TypographyStylesProviderStylesNames, };

package/lib/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './Input';
 export * from './InputBase';
 export * from './Flex';
 export * from './FloatingIndicator';
+export * from '../utils/Floating';
 export * from './Accordion';
 export * from './Affix';
 export * from './Alert';
@@ -46,7 +47,6 @@ export * from './Drawer';
 export * from './Fieldset';
 export * from './FileButton';
 export * from './FileInput';
-export * from './Floating';
 export * from './FocusTrap';
 export * from './Grid';
 export * from './Highlight';
@@ -100,4 +100,4 @@ export * from './Title';
 export * from './Tooltip';
 export * from './Transition';
 export * from './Tree';
-export * from './TypographyStylesProvider';
+export * from './Typography';

package/lib/core/DirectionProvider/DirectionProvider.d.ts

@@ -11,7 +11,7 @@ export interface DirectionProviderProps {
     children: React.ReactNode;
     /** Direction set as a default value, `ltr` by default */
     initialDirection?: Direction;
-    /** Determines whether direction should be updated on mount based on `dir` attribute set on root element (usually html element), `true` by default  */
+    /** Determines whether direction should be updated on mount based on `dir` attribute set on root element (usually html element) @default `true`  */
     detectDirection?: boolean;
 }
 export declare function DirectionProvider({ children, initialDirection, detectDirection, }: DirectionProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,9 +16,9 @@ export interface MantineProviderProps {
     forceColorScheme?: 'light' | 'dark';
     /** CSS selector to which CSS variables should be added, `:root` by default */
     cssVariablesSelector?: string;
-    /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */
+    /** Determines whether theme CSS variables should be added to given `cssVariablesSelector` @default `true` */
     withCssVariables?: boolean;
-    /** Determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. `true` by default. */
+    /** Determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. @default `true`. */
     deduplicateCssVariables?: boolean;
     /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */
     getRootElement?: () => HTMLElement | undefined;
@@ -28,9 +28,9 @@ export interface MantineProviderProps {
     getStyleNonce?: () => string;
     /** Function to generate CSS variables based on theme object */
     cssVariablesResolver?: CSSVariablesResolver;
-    /** Determines whether components should have static classes, for example, `mantine-Button-root`. `true` by default */
+    /** Determines whether components should have static classes, for example, `mantine-Button-root`. @default `true` */
     withStaticClasses?: boolean;
-    /** Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. `true` by default. */
+    /** Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. @default `true`. */
     withGlobalClasses?: boolean;
     /** An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries */
     stylesTransform?: MantineStylesTransform;

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

@@ -3,7 +3,7 @@ export declare const MantineThemeContext: import("react").Context<MantineTheme |
 export declare const useSafeMantineTheme: () => MantineTheme;
 export declare function useMantineTheme(): MantineTheme;
 export interface MantineThemeProviderProps {
-    /** Determines whether theme should be inherited from parent MantineProvider, `true` by default */
+    /** Determines whether theme should be inherited from parent MantineProvider @default `true` */
     inherit?: boolean;
     /** Theme override object */
     theme?: MantineThemeOverride;

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

@@ -53,7 +53,7 @@ export interface MantineTheme {
     fontFamily: string;
     /** Monospace font-family, used in code and other similar components, system fonts by default  */
     fontFamilyMonospace: string;
-    /** Controls various styles of h1-h6 elements, used in TypographyStylesProvider and Title components */
+    /** Controls various styles of h1-h6 elements, used in Typography and Title components */
     headings: {
         fontFamily: string;
         fontWeight: string;

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> = {}>(component: string, defaultProps: U, props: T): T & {
+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 ? {} : {
     [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>;
-};
+});

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

@@ -23,6 +23,9 @@ export type StylesApiRecord<Payload extends FactoryPayload, DataType> = Payload[
 export type Styles<Payload extends FactoryPayload> = StylesApiRecord<Payload, CSSProperties>;
 export type ClassNames<Payload extends FactoryPayload> = StylesApiRecord<Payload, string>;
 export type ClassNamesArray<Payload extends FactoryPayload> = (StylesApiRecord<Payload, string> | undefined)[];
+export type Attributes<Payload extends FactoryPayload> = Payload['stylesNames'] extends string ? Payload['compound'] extends true ? never : {
+    [K in Payload['stylesNames']]?: Record<string, any>;
+} : never;
 export type StylesRecord<StylesNames extends string, Payload> = Partial<Record<StylesNames, Payload>>;
 export interface StylesApiProps<Payload extends FactoryPayload> {
     unstyled?: boolean;
@@ -30,6 +33,7 @@ export interface StylesApiProps<Payload extends FactoryPayload> {
     classNames?: ClassNames<Payload>;
     styles?: Styles<Payload>;
     vars?: PartialVarsResolver<Payload>;
+    attributes?: Attributes<Payload>;
 }
-export interface CompoundStylesApiProps<Payload extends FactoryPayload> extends Omit<StylesApiProps<Payload>, 'unstyled'> {
+export interface CompoundStylesApiProps<Payload extends FactoryPayload> extends Omit<StylesApiProps<Payload>, 'unstyled' | 'attributes'> {
 }

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

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import type { MantineStyleProp } from '../../Box';
 import { FactoryPayload } from '../../factory';
 import { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';
-import { ClassNames, ClassNamesArray, GetStylesApiOptions, Styles } from '../styles-api.types';
+import { Attributes, ClassNames, ClassNamesArray, GetStylesApiOptions, Styles } from '../styles-api.types';
 export interface UseStylesInput<Payload extends FactoryPayload> {
     name: string | (string | undefined)[];
     classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
@@ -16,9 +16,10 @@ export interface UseStylesInput<Payload extends FactoryPayload> {
     styles?: Styles<Payload>;
     vars?: PartialVarsResolver<Payload>;
     varsResolver?: VarsResolver<Payload>;
+    attributes?: Attributes<Payload>;
 }
 export type GetStylesApi<Payload extends FactoryPayload> = (selector: NonNullable<Payload['stylesNames']>, options?: GetStylesApiOptions) => {
     className: string;
     style: CSSProperties;
 };
-export declare function useStyles<Payload extends FactoryPayload>({ name, classes, props, stylesCtx, className, style, rootSelector, unstyled, classNames, styles, vars, varsResolver, }: UseStylesInput<Payload>): GetStylesApi<Payload>;
+export declare function useStyles<Payload extends FactoryPayload>({ name, classes, props, stylesCtx, className, style, rootSelector, unstyled, classNames, styles, vars, varsResolver, attributes, }: UseStylesInput<Payload>): GetStylesApi<Payload>;

package/lib/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.d.ts

@@ -1,7 +1,7 @@
 interface GetElementsSiblingsInput {
-    /** Selector used to find parent node, e.g. '[role="tablist"]', '.mantine-Text-root' */
+    /** Selector used to find parent node, for example '[role="tablist"]', '.mantine-Text-root' */
     parentSelector: string;
-    /** Selector used to find element siblings, e.g. '[data-tab]' */
+    /** Selector used to find element siblings, for example '[data-tab]' */
     siblingSelector: string;
     /** Determines whether next/previous indices should loop */
     loop?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "8.1.2",
+  "version": "8.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": "8.1.2",
+    "@mantine/hooks": "8.2.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

package/styles/Accordion.css

@@ -25,6 +25,7 @@
   opacity: 1;
   cursor: pointer;
   background-color: transparent;
+  color: var(--mantine-color-bright);
 }
 
 .m_4ba585b8:where([data-chevron-position='left']) {
@@ -32,14 +33,6 @@
     padding-inline-start: 0;
   }
 
-:where([data-mantine-color-scheme='light']) .m_4ba585b8 {
-    color: var(--mantine-color-black);
-}
-
-:where([data-mantine-color-scheme='dark']) .m_4ba585b8 {
-    color: var(--mantine-color-dark-0);
-}
-
 .m_4ba585b8:where(:disabled, [data-disabled]) {
     opacity: 0.4;
     cursor: not-allowed;

package/styles/Accordion.layer.css

@@ -25,6 +25,7 @@
   opacity: 1;
   cursor: pointer;
   background-color: transparent;
+  color: var(--mantine-color-bright);
 }
 
 .m_4ba585b8:where([data-chevron-position='left']) {
@@ -32,14 +33,6 @@
     padding-inline-start: 0;
   }
 
-:where([data-mantine-color-scheme='light']) .m_4ba585b8 {
-    color: var(--mantine-color-black);
-}
-
-:where([data-mantine-color-scheme='dark']) .m_4ba585b8 {
-    color: var(--mantine-color-dark-0);
-}
-
 .m_4ba585b8:where(:disabled, [data-disabled]) {
     opacity: 0.4;
     cursor: not-allowed;

package/styles/Container.css

@@ -5,12 +5,33 @@
   --container-size-lg: 1140px;
   --container-size-xl: 1320px;
   --container-size: var(--container-size-md);
-
-  max-width: var(--container-size);
-  padding-inline: var(--mantine-spacing-md);
-  margin-inline: auto;
 }
 
-  .m_7485cace:where([data-fluid]) {
-    max-width: 100%;
+  .m_7485cace:where([data-strategy='block']) {
+    max-width: var(--container-size);
+    padding-inline: var(--mantine-spacing-md);
+    margin-inline: auto;
+  }
+
+  .m_7485cace:where([data-strategy='block']):where([data-fluid]) {
+      max-width: 100%;
+    }
+
+  .m_7485cace:where([data-strategy='grid']) {
+    display: grid;
+    grid-template-columns: 1fr min(100%, var(--container-size)) 1fr;
+    margin-inline: auto;
   }
+
+  .m_7485cace:where([data-strategy='grid']) > * {
+      grid-column: 2;
+    }
+
+  .m_7485cace:where([data-strategy='grid']) > [data-breakout] {
+      grid-column: 1 / -1;
+    }
+
+  .m_7485cace:where([data-strategy='grid']) > [data-breakout] > [data-container] {
+        max-width: var(--container-size);
+        margin-inline: auto;
+      }