@mantine/core 7.3.1 → 7.4.0

package/lib/components/Progress/Progress.d.ts

@@ -1,7 +1,7 @@
-import { StylesApiProps, Factory, MantineColor } from '../../core';
-import { ProgressRoot, ProgressRootStylesNames, ProgressRootCssVariables, __ProgressRootProps } from './ProgressRoot/ProgressRoot';
-import { ProgressSection } from './ProgressSection/ProgressSection';
+import { Factory, MantineColor, StylesApiProps } from '../../core';
 import { ProgressLabel } from './ProgressLabel/ProgressLabel';
+import { __ProgressRootProps, ProgressRoot, ProgressRootCssVariables, ProgressRootStylesNames } from './ProgressRoot/ProgressRoot';
+import { ProgressSection } from './ProgressSection/ProgressSection';
 export type ProgressStylesNames = ProgressRootStylesNames;
 export interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {
     /** Value of the progress */

package/lib/components/Progress/ProgressRoot/ProgressRoot.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineRadius } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
 export type ProgressRootStylesNames = 'root' | 'section' | 'label';
 export type ProgressRootCssVariables = {
     root: '--progress-size' | '--progress-radius';
@@ -8,6 +8,8 @@ export interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {
     size?: MantineSize | (string & {}) | number;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
     radius?: MantineRadius;
+    /** Determines whether label 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`. */
+    autoContrast?: boolean;
 }
 export interface ProgressRootProps extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {
 }

package/lib/components/Radio/Radio.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineSize, MantineRadius } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import { InlineInputStylesNames } from '../InlineInput';
-import { RadioIconProps } from './RadioIcon';
 import { RadioGroup } from './RadioGroup/RadioGroup';
+import { RadioIconProps } from './RadioIcon';
 export type RadioVariant = 'filled' | 'outline';
 export type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';
 export type RadioCssVariables = {
     root: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size';
 };
 export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size'> {
-    /** Radio label */
+    /** Content of the `label` associated with the radio */
     label?: React.ReactNode;
     /** Key of `theme.colors` or any valid CSS color to set input color in checked state, `theme.primaryColor` by default */
     color?: MantineColor;
-    /** Controls size of all elements, `'sm'` by default */
+    /** Controls size of the component, `'sm'` by default */
     size?: MantineSize;
-    /** Custom checked icon component, by default a circle is displayed in checked state */
+    /** A component that replaces default check icon */
     icon?: React.FC<RadioIconProps>;
     /** Props passed down to the root element */
     wrapperProps?: Record<string, any>;
@@ -27,10 +27,12 @@ export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, Elem
     error?: React.ReactNode;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
     radius?: MantineRadius;
-    /** Assigns ref of the root element, can be used with `Tooltip` and other similar components */
+    /** Assigns ref of the root element */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
-    /** Key of `theme.colors` or any valid CSS color to set icon color, `theme.white` by default */
+    /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */
     iconColor?: MantineColor;
+    /** Determines whether icon 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`. */
+    autoContrast?: boolean;
 }
 export type RadioFactory = Factory<{
     props: RadioProps;

package/lib/components/Radio/RadioGroup/RadioGroup.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { MantineSize, Factory } from '../../../core';
-import { InputWrapperStylesNames, InputWrapperProps } from '../../Input';
+import { Factory, MantineSize } from '../../../core';
+import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
 export type RadioGroupStylesNames = InputWrapperStylesNames;
 export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange'> {
-    /** `Radio` components */
+    /** `Radio` components and any other elements */
     children: React.ReactNode;
     /** Controlled component value */
     value?: string;
@@ -15,7 +15,7 @@ export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     wrapperProps?: Record<string, any>;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize;
-    /** Name attribute of child radio inputs */
+    /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */
     name?: string;
 }
 export type RadioGroupFactory = Factory<{

package/lib/components/Rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineColor } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
 export type RatingStylesNames = 'root' | 'starSymbol' | 'input' | 'label' | 'symbolBody' | 'symbolGroup';
 export type RatingCssVariables = {
     root: '--rating-size' | '--rating-color';
@@ -11,27 +11,27 @@ export interface RatingProps extends BoxProps, StylesApiProps<RatingFactory>, El
     value?: number;
     /** Called when value changes */
     onChange?: (value: number) => void;
-    /** The icon that is displayed when symbol is empty */
+    /** Icon displayed when the symbol is empty */
     emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);
-    /** This icon that is displayed when symbol is full */
+    /** Icon displayed when the symbol is full */
     fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);
-    /** Number of fractions each item can be divided into, 1 by default */
+    /** Number of fractions each item can be divided into, `1` by default */
     fractions?: number;
-    /** Controls component size */
+    /** Controls component size, `'sm'` by default */
     size?: MantineSize;
-    /** Number of controls that should be rendered */
+    /** Number of controls, `5` by default */
     count?: number;
-    /** Called when item is hovered */
+    /** Called when one of the controls is hovered */
     onHover?: (value: number) => void;
-    /** Function should return labelText for the symbols */
-    getSymbolLabel?: (value: number) => string;
-    /** Name of rating, should be unique within the page */
+    /** A function to assign `aria-label` of the the control at index given in the argument. If not specified, control index is used as `aria-label`. */
+    getSymbolLabel?: (index: number) => string;
+    /** `name` attribute passed down to all inputs. By default, `name` is generated randomly. */
     name?: string;
-    /** If true, you won't be able to interact */
+    /** If set, the user cannot interact with the component, `false` by default */
     readOnly?: boolean;
-    /** If true, only the selected symbol will change to full symbol */
+    /** If set, only the selected symbol changes to full symbol when selected, `false` by default */
     highlightSelectedOnly?: boolean;
-    /** Key of theme.colors or any CSS color value, yellow by default */
+    /** Key of `theme.colors` or any CSS color value, `'yellow'` by default */
     color?: MantineColor;
 }
 export type RatingFactory = Factory<{

package/lib/components/Rating/RatingItem/RatingItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MantineSize, BoxProps, ElementProps } from '../../../core';
+import { BoxProps, ElementProps, MantineSize } from '../../../core';
 export interface RatingItemProps extends BoxProps, ElementProps<'input', 'value' | 'size'> {
     size: MantineSize;
     getSymbolLabel: ((value: number) => string) | undefined;

package/lib/components/RingProgress/Curve/Curve.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MantineColor, GetStylesApi } from '../../../core';
+import { GetStylesApi, MantineColor } from '../../../core';
 import type { RingProgressFactory } from '../RingProgress';
 interface CurveProps extends React.ComponentPropsWithRef<'circle'> {
     value?: number;

package/lib/components/RingProgress/RingProgress.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
 interface RingProgressSection extends React.ComponentPropsWithRef<'circle'> {
     value: number;
     color: MantineColor;

package/lib/components/ScrollArea/ScrollArea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type ScrollAreaStylesNames = 'root' | 'viewport' | 'scrollbar' | 'thumb' | 'corner';
 export type ScrollAreaCssVariables = {
     root: '--scrollarea-scrollbar-size';

package/lib/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSize, MantineRadius, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 export type SegmentedControlStylesNames = 'root' | 'input' | 'label' | 'control' | 'indicator';
 export type SegmentedControlCssVariables = {
     root: '--sc-radius' | '--sc-color' | '--sc-font-size' | '--sc-padding' | '--sc-shadow' | '--sc-transition-duration' | '--sc-transition-timing-function';
@@ -38,6 +38,8 @@ export interface SegmentedControlProps extends BoxProps, StylesApiProps<Segmente
     orientation?: 'vertical' | 'horizontal';
     /** Determines whether the value can be changed */
     readOnly?: boolean;
+    /** Determines whether text color should depend on `background-color` of the indicator. 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`. */
+    autoContrast?: boolean;
 }
 export type SegmentedControlFactory = Factory<{
     props: SegmentedControlProps;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __CloseButtonProps } from '../CloseButton';
-import { __InputStylesNames, __BaseInputProps, InputVariant } from '../Input';
-import { ComboboxLikeProps, ComboboxLikeStylesNames } from '../Combobox';
+import { ComboboxItem, ComboboxLikeProps, ComboboxLikeStylesNames } from '../Combobox';
+import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
 export type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
 export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<SelectFactory>, ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {
     /** Controlled component value */
@@ -10,7 +10,7 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     /** Uncontrolled component default value */
     defaultValue?: string | null;
     /** Called when value changes */
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string | null, option: ComboboxItem) => void;
     /** Determines whether the select should be searchable, `false` by default */
     searchable?: boolean;
     /** Determines whether check icon should be displayed near the selected option label, `true` by default */

package/lib/components/SimpleGrid/SimpleGrid.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp, MantineSpacing } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSpacing, StyleProp, StylesApiProps } from '../../core';
 export type SimpleGridStylesNames = 'root';
 export interface SimpleGridProps extends BoxProps, StylesApiProps<SimpleGridFactory>, ElementProps<'div'> {
     /** Number of columns, `1` by default */

package/lib/components/Skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type SkeletonStylesNames = 'root';
 export type SkeletonCssVariables = {
     root: '--skeleton-width' | '--skeleton-height' | '--skeleton-radius';

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineRadius, MantineSize, Factory } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
 import { TransitionOverride } from '../../Transition';
-import { SliderStylesNames, SliderCssVariables } from '../Slider.context';
+import { SliderCssVariables, SliderStylesNames } from '../Slider.context';
 export type RangeSliderValue = [number, number];
 export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb, `theme.primaryColor` by default */
@@ -39,7 +39,7 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     labelTransitionProps?: TransitionOverride;
     /** Determines whether the label should be visible when the slider is not being dragged or hovered, `false` by default */
     labelAlwaysOn?: boolean;
-    /** Determines whether thumb label should be displayed when the slider is hovered, `true` by default */
+    /** Determines whether the label should be displayed when the slider is hovered, `true` by default */
     showLabelOnHover?: boolean;
     /** Content rendered inside thumb */
     thumbChildren?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineRadius, MantineSize, Factory } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
 import { TransitionOverride } from '../../Transition';
 import { SliderCssVariables, SliderStylesNames } from '../Slider.context';
 export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {
@@ -40,7 +40,7 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     labelAlwaysOn?: boolean;
     /** Thumb `aria-label` */
     thumbLabel?: string;
-    /** Determines whether thumb label should be displayed when the slider is hovered, `true` by default */
+    /** Determines whether the label should be displayed when the slider is hovered, `true` by default */
     showLabelOnHover?: boolean;
     /** Content rendered inside thumb */
     thumbChildren?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, ElementProps, MantineSize, MantineColor, MantineRadius } from '../../../core';
+import { BoxProps, ElementProps, MantineColor, MantineRadius, MantineSize } from '../../../core';
 export interface SliderRootProps extends BoxProps, ElementProps<'div'> {
     size: MantineSize | (string & {}) | number;
     children: React.ReactNode;

package/lib/components/Space/Space.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export interface SpaceProps extends BoxProps, StylesApiProps<SpaceFactory>, ElementProps<'div'> {
 }
 export type SpaceFactory = Factory<{

package/lib/components/Spoiler/Spoiler.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type SpoilerStylesNames = 'root' | 'control' | 'content';
 export type SpoilerCssVariables = {
     root: '--spoiler-transition-duration';

package/lib/components/Stack/Stack.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineSpacing, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
 export type StackStylesNames = 'root';
 export type StackCssVariables = {
     root: '--stack-gap' | '--stack-align' | '--stack-justify';

package/lib/components/Stepper/Stepper.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineSpacing, MantineSize, MantineRadius } from '../../core';
-import { StepperStep } from './StepperStep/StepperStep';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, MantineSpacing, StylesApiProps } from '../../core';
 import { StepperCompleted } from './StepperCompleted/StepperCompleted';
+import { StepperStep } from './StepperStep/StepperStep';
 export type StepFragmentComponent = React.FC<{
     step: number;
 }>;
 export type StepperStylesNames = 'root' | 'separator' | 'steps' | 'content' | 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepBody' | 'stepLabel' | 'stepDescription';
 export type StepperCssVariables = {
-    root: '--stepper-color' | '--stepper-icon-size' | '--stepper-content-padding' | '--stepper-radius' | '--stepper-fz' | '--stepper-spacing';
+    root: '--stepper-color' | '--stepper-icon-color' | '--stepper-icon-size' | '--stepper-content-padding' | '--stepper-radius' | '--stepper-fz' | '--stepper-spacing';
 };
 export interface StepperProps extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {
     /** <Stepper.Step /> components */
@@ -40,6 +40,8 @@ export interface StepperProps extends BoxProps, StylesApiProps<StepperFactory>,
     allowNextStepsSelect?: boolean;
     /** Determines whether steps should wrap to the next line if no space is available, `true` by default */
     wrap?: boolean;
+    /** Determines whether icon 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`. */
+    autoContrast?: boolean;
 }
 export type StepperFactory = Factory<{
     props: StepperProps;

package/lib/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSize, MantineRadius, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import { InlineInputStylesNames } from '../InlineInput';
 import { SwitchGroup } from './SwitchGroup/SwitchGroup';
 export type SwitchStylesNames = 'root' | 'track' | 'trackLabel' | 'thumb' | 'input' | InlineInputStylesNames;
@@ -9,11 +9,11 @@ export type SwitchCssVariables = {
 export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, ElementProps<'input', 'size'> {
     /** Id used to bind input and label, if not passed, unique id will be generated instead */
     id?: string;
-    /** Switch label */
+    /** Content of the `label` associated with the radio */
     label?: React.ReactNode;
-    /** Inner label when Switch is in unchecked state */
+    /** Inner label when the `Switch` is in unchecked state */
     offLabel?: React.ReactNode;
-    /** Inner label when Switch is in checked state */
+    /** Inner label when the `Switch` is in checked state */
     onLabel?: React.ReactNode;
     /** Key of `theme.colors` or any valid CSS color to set input color in checked state, `theme.primaryColor` by default */
     color?: MantineColor;
@@ -21,9 +21,9 @@ export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, El
     size?: MantineSize | (string & {});
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
     radius?: MantineRadius;
-    /** Props passed down to the wrapper element */
+    /** Props passed down to the root element */
     wrapperProps?: Record<string, any>;
-    /** Icon inside the thumb of switch */
+    /** Icon inside the thumb of the switch */
     thumbIcon?: React.ReactNode;
     /** Position of the label relative to the input, `'right'` by default */
     labelPosition?: 'left' | 'right';
@@ -31,7 +31,7 @@ export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, El
     description?: React.ReactNode;
     /** Error displayed below the label */
     error?: React.ReactNode;
-    /** Assigns ref of the root element, can be used with `Tooltip` and other similar components */
+    /** Assigns ref of the root element */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
 }
 export type SwitchFactory = Factory<{

package/lib/components/Switch/SwitchGroup/SwitchGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MantineSize, Factory } from '../../../core';
-import { InputWrapperStylesNames, InputWrapperProps } from '../../Input';
+import { Factory, MantineSize } from '../../../core';
+import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
 export type SwitchGroupStylesNames = InputWrapperStylesNames;
 export interface SwitchGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     /** `Switch` components */

package/lib/components/Table/Table.components.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, CompoundStylesApiProps, ElementProps, FactoryPayload, Factory } from '../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, FactoryPayload } from '../../core';
 import type { TableFactory } from './Table';
 export interface TableElementProps<Selector extends string> extends BoxProps, CompoundStylesApiProps<Omit<TableFactory, 'stylesNames'> & {
     stylesNames: Selector;

package/lib/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSpacing, Factory } from '../../core';
-import { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableTr, TableThead } from './Table.components';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineSpacing, StylesApiProps } from '../../core';
+import { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr } from './Table.components';
 import { TableDataRenderer } from './TableDataRenderer';
 import { TableScrollContainer } from './TableScrollContainer';
 export type TableStylesNames = 'table' | 'thead' | 'tbody' | 'tfoot' | 'tr' | 'th' | 'td' | 'caption';

package/lib/components/Table/TableScrollContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type TableScrollContainerStylesNames = 'scrollContainer' | 'scrollContainerInner';
 export type TableScrollContainerCssVariables = {
     scrollContainer: '--table-min-width' | '--table-overflow';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, MantineColor, MantineRadius, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 import { TabsList, TabsListStylesNames } from './TabsList/TabsList';
 import { TabsPanel, TabsPanelStylesNames } from './TabsPanel/TabsPanel';
 import { TabsTab, TabsTabStylesNames } from './TabsTab/TabsTab';
@@ -37,6 +37,8 @@ export interface TabsProps extends BoxProps, StylesApiProps<TabsFactory>, Elemen
     inverted?: boolean;
     /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active, `true` by default */
     keepMounted?: boolean;
+    /** Determines whether active item text color should depend on `background-color` of the indicator. 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`. Only applicable when `variant="pills"` */
+    autoContrast?: boolean;
 }
 export type TabsFactory = Factory<{
     props: TabsProps;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, ElementProps, CompoundStylesApiProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type TabsListStylesNames = 'list';
 export interface TabsListProps extends BoxProps, CompoundStylesApiProps<TabsListFactory>, ElementProps<'div'> {
     /** `Tabs.Tab` components */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, ElementProps, CompoundStylesApiProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type TabsPanelStylesNames = 'panel';
 export interface TabsPanelProps extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {
     /** Panel content */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ElementProps, MantineColor, CompoundStylesApiProps, Factory } from '../../../core';
+import { CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
 import { UnstyledButtonProps } from '../../UnstyledButton';
 export type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';
 export interface TabsTabProps extends Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>, CompoundStylesApiProps<TabsTabFactory>, ElementProps<'button'> {

package/lib/components/TagsInput/TagsInput.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxLikeProps, ComboboxLikeStylesNames } from '../Combobox';
 import { __BaseInputProps, __InputStylesNames } from '../Input';
-import { __CloseButtonProps } from '../CloseButton';
 export type TagsInputStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface TagsInputProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<TagsInputFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
     /** Controlled component value */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, MantineGradient, BoxMod, PolymorphicFactory, MantineSize, MantineColor } from '../../core';
+import { BoxMod, BoxProps, MantineColor, MantineGradient, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 type TextTruncate = 'end' | 'start' | boolean;
 export type TextStylesNames = 'root';
 export type TextVariant = 'text' | 'gradient';
@@ -13,7 +13,7 @@ export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
     size?: MantineSize | (string & {});
     /** Number of lines after which Text will be truncated */
     lineClamp?: number;
-    /** Side on which Text must be truncated, if `true`, text in truncated from the start */
+    /** 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 */
     inline?: boolean;

package/lib/components/TextInput/TextInput.d.ts

@@ -1,5 +1,5 @@
-import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
-import { __InputStylesNames, __BaseInputProps } from '../Input';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+import { __BaseInputProps, __InputStylesNames } from '../Input';
 export interface TextInputProps extends BoxProps, __BaseInputProps, StylesApiProps<TextInputFactory>, ElementProps<'input', 'size'> {
 }
 export type TextInputFactory = Factory<{

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

@@ -1,4 +1,4 @@
-import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+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;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineGradient, MantineRadius, MantineColor, MantineSize } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineGradient, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 export type ThemeIconStylesNames = 'root';
 export type ThemeIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'default' | 'gradient';
 export type ThemeIconCssVariables = {
@@ -16,6 +16,8 @@ export interface ThemeIconProps extends BoxProps, StylesApiProps<ThemeIconFactor
     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`. */
+    autoContrast?: boolean;
 }
 export type ThemeIconFactory = Factory<{
     props: ThemeIconProps;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 import { TimelineItem, TimelineItemStylesNames } from './TimelineItem/TimelineItem';
 export type TimelineStylesNames = 'root' | TimelineItemStylesNames;
 export type TimelineCssVariables = {
-    root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-radius';
+    root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-icon-color' | '--tl-radius';
 };
 export interface TimelineProps extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {
     /** `Timeline.Item` components */
@@ -22,6 +22,8 @@ export interface TimelineProps extends BoxProps, StylesApiProps<TimelineFactory>
     lineWidth?: number | string;
     /** Determines whether the active items direction should be reversed without reversing items order, `false` by default */
     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`. */
+    autoContrast?: boolean;
 }
 export type TimelineFactory = Factory<{
     props: TimelineProps;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineRadius, MantineColor } from '../../../core';
+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  */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StylesApiProps, ElementProps, Factory, BoxProps } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
 export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'];
 export type TitleStylesNames = 'root';

package/lib/components/Title/get-title-size.d.ts

@@ -1,4 +1,4 @@
-import type { TitleSize, TitleOrder } from './Title';
+import type { TitleOrder, TitleSize } from './Title';
 export interface GetTitleSizeResult {
     fontSize: string;
     fontWeight: string;

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

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, MantineColor, StylesApiProps, MantineRadius } from '../../core';
+import { BoxProps, ElementProps, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 import { FloatingPosition } from '../Floating';
 import { PortalProps } from '../Portal';
 import type { TooltipFactory } from './Tooltip';

package/lib/components/TypographyStylesProvider/TypographyStylesProvider.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type TypographyStylesProviderStylesNames = 'root';
 export interface TypographyStylesProviderProps extends BoxProps, StylesApiProps<TypographyStylesProviderFactory>, ElementProps<'div'> {
 }

package/lib/components/UnstyledButton/UnstyledButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StylesApiProps, BoxComponentProps, PolymorphicFactory } from '../../core';
+import { BoxComponentProps, PolymorphicFactory, StylesApiProps } from '../../core';
 export type UnstyledButtonStylesNames = 'root';
 export interface UnstyledButtonProps extends Omit<BoxComponentProps, 'vars' | 'variant'>, StylesApiProps<UnstyledButtonFactory> {
     __staticSelector?: string;

package/lib/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type VisuallyHiddenStylesNames = 'root';
 export interface VisuallyHiddenProps extends BoxProps, StylesApiProps<VisuallyHiddenFactory>, ElementProps<'div'> {
 }

package/lib/core/Box/Box.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MantineBreakpoint } from '../MantineProvider';
-import type { MantineStyleProp, CssVarsProp } from './Box.types';
+import type { CssVarsProp, MantineStyleProp } from './Box.types';
 import { MantineStyleProps } from './style-props';
 export type Mod = Record<string, any> | string;
 export type BoxMod = Mod | Mod[] | BoxMod[];