@mantine/core 7.3.2 → 7.4.1

package/lib/components/Chip/Chip.d.ts

@@ -13,7 +13,7 @@ export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, Elemen
     size?: MantineSize;
     /** Chip input type, `'checkbox'` by default */
     type?: 'radio' | 'checkbox';
-    /** Chip label */
+    /** `label` element associated with the input */
     children: React.ReactNode;
     /** Checked state for controlled component */
     checked?: boolean;
@@ -21,16 +21,18 @@ export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, Elemen
     defaultChecked?: boolean;
     /** Calls when checked state changes */
     onChange?: (checked: boolean) => void;
-    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
+    /** Controls components colors based on `variant` prop. Key of `theme.colors` or any valid CSS color. `theme.primaryColor` by default */
     color?: MantineColor;
-    /** Static id to bind input with label, by default id is randomly generated */
+    /** Static id to connect input with the label, by default `id` is randomly generated */
     id?: string;
-    /** Props passed down to the wrapper element */
+    /** Props passed down to the root element */
     wrapperProps?: Record<string, any>;
-    /** Replaces default icon */
+    /** Any element or component to replace default icon */
     icon?: 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>;
+    /** 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 ChipFactory = Factory<{
     props: ChipProps;

package/lib/components/Chip/ChipGroup/ChipGroup.d.ts

@@ -6,9 +6,9 @@ export interface ChipGroupProps<T extends boolean = false> {
     value?: T extends true ? string[] : string | null;
     /** Uncontrolled component initial value */
     defaultValue?: T extends true ? string[] : string | null;
-    /** Called when value changes */
+    /** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */
     onChange?: (value: T extends true ? string[] : string) => void;
-    /** `Chip` components */
+    /** `Chip` components and any other elements */
     children?: React.ReactNode;
 }
 export declare function ChipGroup<T extends boolean>(props: ChipGroupProps<T>): React.JSX.Element;

package/lib/components/CloseButton/CloseButton.d.ts

@@ -17,6 +17,8 @@ export interface __CloseButtonProps {
     iconSize?: number | string;
     /** Content rendered inside the button, for example `VisuallyHidden` with label for screen readers */
     children?: React.ReactNode;
+    /** Replaces default close icon. If set, `iconSize` prop is ignored. */
+    icon?: React.ReactNode;
 }
 export interface CloseButtonProps extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {
 }

package/lib/components/ColorInput/ColorInput.d.ts

@@ -13,13 +13,13 @@ export interface ColorInputProps extends BoxProps, __BaseInputProps, __ColorPick
     disallowInput?: boolean;
     /** Determines whether the input value should be reset to the last known valid value when the input loses focus, `true` by default */
     fixOnBlur?: boolean;
-    /** Props passed down to the Popover component */
+    /** Props passed down to the `Popover` component */
     popoverProps?: PopoverProps;
     /** Determines whether the preview color swatch should be displayed in the left section of the input, `true` by default */
     withPreview?: boolean;
     /** Determines whether eye dropper button should be displayed in the right section, `true` by default */
     withEyeDropper?: boolean;
-    /** An icon that will replace the default eye dropper icon */
+    /** An icon to replace the default eye dropper icon */
     eyeDropperIcon?: React.ReactNode;
     /** Determines whether the dropdown should be closed when one of the color swatches is clicked, `false` by default */
     closeOnColorSwatchClick?: boolean;

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -9,32 +9,32 @@ export interface __ColorPickerProps {
     value?: string;
     /** Uncontrolled component default value */
     defaultValue?: string;
-    /** Called when color changes */
+    /** Called when value changes */
     onChange?: (value: string) => void;
-    /** Called when user stops dragging or changes value with arrow keys */
+    /** Called when the user stops dragging one of the sliders or changes the value with arrow keys */
     onChangeEnd?: (value: string) => void;
     /** Color format, `'hex'` by default */
     format?: ColorFormat;
-    /** Determines whether color picker should be displayed, `true` by default */
+    /** Determines whether the color picker should be displayed, `true` by default */
     withPicker?: boolean;
-    /** Color swatches */
+    /** An array of colors in one of the supported formats. Used to render swatches list below the color picker. */
     swatches?: string[];
-    /** Number of swatches displayed in one row, `7` by default */
+    /** Number of swatches per row, `7` by default */
     swatchesPerRow?: number;
     /** Controls size of hue, alpha and saturation sliders, `'md'` by default */
     size?: MantineSize | (string & {});
 }
 export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesApiProps<ColorPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     __staticSelector?: string;
-    /** Determines whether component should take 100% width of its container, `false` by default */
+    /** Determines whether the component should take 100% width of its container, `false` by default */
     fullWidth?: boolean;
-    /** Determines whether interactive elements should be focusable, `true` by default */
+    /** Determines whether interactive elements (sliders thumbs and swatches) should be focusable, `true` by default */
     focusable?: boolean;
-    /** Saturation slider `aria-label` */
+    /** Saturation slider `aria-label` prop */
     saturationLabel?: string;
-    /** Hue slider `aria-label` */
+    /** Hue slider `aria-label` prop */
     hueLabel?: string;
-    /** Alpha slider `aria-label` */
+    /** Alpha slider `aria-label` prop */
     alphaLabel?: string;
     /** Called when one of the color swatches is clicked */
     onColorSwatchClick?: (color: string) => void;

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

@@ -1,19 +1,22 @@
 import type { ComboboxProps, ComboboxStylesNames } from './Combobox';
 import type { OptionsFilter } from './OptionsDropdown/OptionsDropdown';
-export interface ComboboxItem {
+export interface ComboboxStringItem {
     value: string;
-    label: string;
     disabled?: boolean;
 }
-export interface ComboboxItemGroup {
+export interface ComboboxItem extends ComboboxStringItem {
+    label: string;
+}
+export interface ComboboxItemGroup<T = ComboboxItem | string> {
     group: string;
-    items: (ComboboxItem | string)[];
+    items: T[];
 }
 export interface ComboboxParsedItemGroup {
     group: string;
     items: ComboboxItem[];
 }
-export type ComboboxData = (string | ComboboxItem | ComboboxItemGroup)[];
+export type ComboboxStringData = Array<string | ComboboxStringItem | ComboboxItemGroup<string | ComboboxStringItem>> | ReadonlyArray<string | ComboboxStringItem | ComboboxItemGroup<string | ComboboxStringItem>>;
+export type ComboboxData = Array<string | ComboboxItem | ComboboxItemGroup> | ReadonlyArray<string | ComboboxItem | ComboboxItemGroup>;
 export type ComboboxParsedItem = ComboboxItem | ComboboxParsedItemGroup;
 export type ComboboxLikeStylesNames = Exclude<ComboboxStylesNames, 'header' | 'footer' | 'search'>;
 export interface ComboboxLikeProps {

package/lib/components/Combobox/get-parsed-combobox-data/get-parsed-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import { ComboboxData, ComboboxParsedItem } from '../Combobox.types';
-export declare function getParsedComboboxData(data: ComboboxData | undefined): ComboboxParsedItem[];
+import { ComboboxData, ComboboxParsedItem, ComboboxStringData } from '../Combobox.types';
+export declare function getParsedComboboxData(data: ComboboxData | ComboboxStringData | undefined): ComboboxParsedItem[];

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

@@ -21,7 +21,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 type { ComboboxStore, ComboboxDropdownEventSource, UseComboboxOptions, } from './use-combobox/use-combobox';
-export type { ComboboxItem, ComboboxData, ComboboxParsedItem, ComboboxItemGroup, ComboboxParsedItemGroup, ComboboxLikeProps, ComboboxLikeStylesNames, } from './Combobox.types';
+export type { ComboboxItem, ComboboxData, ComboboxParsedItem, ComboboxItemGroup, ComboboxParsedItemGroup, ComboboxLikeProps, ComboboxLikeStylesNames, ComboboxStringData, } from './Combobox.types';
 export type { ComboboxFactory, ComboboxProps, ComboboxStylesNames } from './Combobox';
 export type { ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';
 export type { ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';

package/lib/components/FileInput/FileInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
-export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputProps, StylesApiProps<FileInputFactory>, ElementProps<'button', 'value' | 'defaultValue' | 'onChange'> {
+export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputProps, StylesApiProps<FileInputFactory>, ElementProps<'button', 'value' | 'defaultValue' | 'onChange' | 'placeholder'> {
     /** Called when value changes */
     onChange?: (payload: Multiple extends true ? File[] : File | null) => void;
     /** Controlled component value */
@@ -10,13 +10,13 @@ export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputP
     defaultValue?: Multiple extends true ? File[] : File | null;
     /** Determines whether user can pick more than one file, `false` by default */
     multiple?: Multiple;
-    /** File input accept attribute, for example, "image/png,image/jpeg" */
+    /** File input accept attribute, for example, `"image/png,image/jpeg"` */
     accept?: string;
     /** Input name attribute */
     name?: string;
     /** Input form attribute */
     form?: string;
-    /** Value renderer, by default file name is rendered */
+    /** Value renderer. By default, file name is displayed. */
     valueComponent?: React.FC<{
         value: null | File | File[];
     }>;
@@ -24,12 +24,14 @@ export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputP
     clearable?: boolean;
     /** Props passed down to the clear button */
     clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /** Read only inputs value cannot be changed */
+    /** If set, the input value cannot be changed  */
     readOnly?: boolean;
     /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */
     capture?: boolean | 'user' | 'environment';
     /** Props passed down to the hidden input element which is used to capture files */
     fileInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Input placeholder */
+    placeholder?: React.ReactNode;
 }
 export type FileInputFactory = Factory<{
     props: FileInputProps;

package/lib/components/Indicator/Indicator.d.ts

@@ -4,7 +4,7 @@ import { IndicatorPosition } from './Indicator.types';
 export type IndicatorPositionVariables = '--indicator-top' | '--indicator-bottom' | '--indicator-left' | '--indicator-right' | '--indicator-translate-x' | '--indicator-translate-y';
 export type IndicatorStylesNames = 'root' | 'indicator';
 export type IndicatorCssVariables = {
-    root: '--indicator-color' | '--indicator-size' | '--indicator-radius' | '--indicator-z-index' | IndicatorPositionVariables;
+    root: '--indicator-color' | '--indicator-text-color' | '--indicator-size' | '--indicator-radius' | '--indicator-z-index' | IndicatorPositionVariables;
 };
 export interface IndicatorProps extends BoxProps, StylesApiProps<IndicatorFactory>, ElementProps<'div'> {
     /** Indicator position relative to the target element, `'top-end'` by default */
@@ -29,6 +29,8 @@ export interface IndicatorProps extends BoxProps, StylesApiProps<IndicatorFactor
     processing?: boolean;
     /** Indicator z-index, `200` by default */
     zIndex?: string | number;
+    /** Determines whether 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 type IndicatorFactory = Factory<{
     props: IndicatorProps;

package/lib/components/Input/Input.d.ts

@@ -24,7 +24,7 @@ export interface __InputProps {
     leftSection?: React.ReactNode;
     /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */
     leftSectionWidth?: React.CSSProperties['width'];
-    /** Props added to the `leftSection` element */
+    /** Props passed down to the `leftSection` element */
     leftSectionProps?: React.ComponentPropsWithoutRef<'div'>;
     /** Sets `pointer-events` styles on the `leftSection` element, `'none'` by default */
     leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];
@@ -32,11 +32,11 @@ export interface __InputProps {
     rightSection?: React.ReactNode;
     /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */
     rightSectionWidth?: React.CSSProperties['width'];
-    /** Props added to the `rightSection` element */
+    /** Props passed down to the `rightSection` element */
     rightSectionProps?: React.ComponentPropsWithoutRef<'div'>;
     /** Sets `pointer-events` styles on the `rightSection` element, `'none'` by default */
     rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];
-    /** Props added to the root element of the `Input` component */
+    /** Props passed down to the root element of the `Input` component */
     wrapperProps?: Record<string, any>;
     /** Sets `required` attribute on the `input` element */
     required?: boolean;
@@ -48,7 +48,7 @@ export interface __InputProps {
     size?: MantineSize | (string & {});
     /** Determines whether the input should have `cursor: pointer` style, `false` by default */
     pointer?: boolean;
-    /** Determines whether the input should have red border and text color when `error` prop is set, `true` by default */
+    /** Determines whether the input should have red border and red text color when the `error` prop is set, `true` by default */
     withErrorStyles?: boolean;
 }
 export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {

package/lib/components/Input/InputLabel/InputLabel.d.ts

@@ -5,7 +5,7 @@ export type InputLabelCssVariables = {
 };
 export interface InputLabelProps extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {
     __staticSelector?: string;
-    /** Determines whether required asterisk should be displayed  */
+    /** Determines whether the required asterisk should be displayed  */
     required?: boolean;
     /** Controls label `font-size`, `'sm'` by default */
     size?: MantineSize | (string & {});

package/lib/components/Input/InputWrapper/InputWrapper.d.ts

@@ -6,23 +6,23 @@ import { InputLabelCssVariables, InputLabelStylesNames } from '../InputLabel/Inp
 export type InputWrapperCssVariables = InputLabelCssVariables & InputErrorCssVariables & InputDescriptionCssVariables;
 export type InputWrapperStylesNames = 'root' | InputLabelStylesNames | InputDescriptionStylesNames | InputErrorStylesNames;
 export interface __InputWrapperProps {
-    /** Contents of `Input.Label` component, if not set, label is not rendered. */
+    /** Contents of `Input.Label` component. If not set, label is not rendered. */
     label?: React.ReactNode;
-    /** Contents of `Input.Description` component, if not set, description is not rendered. */
+    /** Contents of `Input.Description` component. If not set, description is not rendered. */
     description?: React.ReactNode;
-    /** Contents of `Input.Error` component, if not set, error is not rendered. */
+    /** Contents of `Input.Error` component. If not set, error is not rendered. */
     error?: React.ReactNode;
     /** Adds required attribute to the input and a red asterisk on the right side of label, `false` by default */
     required?: boolean;
-    /** Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input, `false` by default */
+    /** Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `false` by default */
     withAsterisk?: boolean;
     /** Props passed down to the `Input.Label` component */
     labelProps?: Record<string, any>;
     /** Props passed down to the `Input.Description` component */
     descriptionProps?: Record<string, any>;
-    /** Props passed down to the `InputError` component */
+    /** Props passed down to the `Input.Error` component */
     errorProps?: Record<string, any>;
-    /** Input container component, defaults to `React.Fragment` */
+    /** Input container component, `React.Fragment` by default */
     inputContainer?: (children: React.ReactNode) => React.ReactNode;
     /** Controls order of the elements, `['label', 'description', 'input', 'error']` by default */
     inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];

package/lib/components/Input/use-input-props.d.ts

@@ -10,7 +10,7 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
 }
 export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "classNames" | "required" | "error" | "description" | "__staticSelector" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
-    styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
+    styles: Partial<Record<string, import("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
     wrapperProps: {
         label: import("react").ReactNode;
@@ -25,7 +25,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         labelProps: Record<string, any> | undefined;
         descriptionProps: Record<string, any> | undefined;
         unstyled: boolean | undefined;
-        styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
+        styles: Partial<Record<string, import("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         style: import("../../core").MantineStyleProp;
         inputContainer: ((children: import("react").ReactNode) => import("react").ReactNode) | undefined;
@@ -37,7 +37,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
     inputProps: {
         required: boolean | undefined;
         classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
-        styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
+        styles: Partial<Record<string, import("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         __staticSelector: string | undefined;

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

@@ -15,6 +15,8 @@ interface MenuContext {
     unstyled: boolean | undefined;
     getStyles: GetStylesApi<MenuFactory>;
     menuItemTabIndex: -1 | 0 | undefined;
+    openedViaClick: boolean;
+    setOpenedViaClick: (value: boolean) => void;
 }
 export declare const MenuContextProvider: ({ children, value }: {
     value: MenuContext;

package/lib/components/NativeSelect/NativeSelect.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { ComboboxData } from '../Combobox';
 import { __BaseInputProps, __InputStylesNames } from '../Input';
-export interface NativeSelectProps extends BoxProps, __BaseInputProps, StylesApiProps<NativeSelectFactory>, ElementProps<'select', 'size'> {
+export interface NativeSelectProps extends BoxProps, Omit<__BaseInputProps, 'pointer'>, StylesApiProps<NativeSelectFactory>, ElementProps<'select', 'size'> {
     /** Data used to render options, can be replaced with `children` */
     data?: ComboboxData;
 }

package/lib/components/NavLink/NavLink.d.ts

@@ -39,6 +39,8 @@ export interface NavLinkProps extends BoxProps, StylesApiProps<NavLinkFactory> {
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
     /** Link `onkeydown` event */
     onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /** 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 NavLinkFactory = PolymorphicFactory<{
     props: NavLinkProps;

package/lib/components/NumberInput/NumberInput.d.ts

@@ -61,6 +61,10 @@ export interface NumberInputProps extends BoxProps, __BaseInputProps, StylesApiP
     handlersRef?: React.ForwardedRef<NumberInputHandlers | undefined>;
     /** Value set to the input when increment/decrement buttons are clicked or up/down arrows pressed if the input is empty, `0` by default */
     startValue?: number;
+    /** Delay before stepping the value. Can be a number of milliseconds or a function that receives the current step count and returns the delay in milliseconds. */
+    stepHoldInterval?: number | ((stepCount: number) => number);
+    /** Initial delay in milliseconds before stepping the value. */
+    stepHoldDelay?: number;
 }
 export type NumberInputFactory = Factory<{
     props: NumberInputProps;

package/lib/components/Pagination/PaginationRoot/PaginationRoot.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
 export type PaginationRootStylesNames = 'root' | 'control' | 'dots';
 export type PaginationRootCssVariables = {
-    root: '--pagination-control-size' | '--pagination-control-radius' | '--pagination-control-fz' | '--pagination-active-bg';
+    root: '--pagination-control-size' | '--pagination-control-radius' | '--pagination-control-fz' | '--pagination-active-bg' | '--pagination-active-color';
 };
 export interface PaginationRootProps extends BoxProps, StylesApiProps<PaginationRootFactory>, ElementProps<'div', 'value' | 'onChange'> {
     /** `height` and `min-width` of controls, `'md'` by default */
@@ -34,6 +34,8 @@ export interface PaginationRootProps extends BoxProps, StylesApiProps<Pagination
     onLastPage?: () => void;
     /** Additional props passed down to controls */
     getItemProps?: (page: number) => Record<string, any>;
+    /** 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`. */
+    autoContrast?: boolean;
 }
 export type PaginationRootFactory = Factory<{
     props: PaginationRootProps;

package/lib/components/PasswordInput/PasswordInput.d.ts

@@ -6,15 +6,15 @@ export type PasswordInputCssVariables = {
     root: '--psi-icon-size' | '--psi-button-size';
 };
 export interface PasswordInputProps extends BoxProps, __BaseInputProps, StylesApiProps<PasswordInputFactory>, ElementProps<'input', 'size'> {
-    /** Custom visibility toggle icon */
+    /** A component to replace visibility toggle icon */
     visibilityToggleIcon?: React.FC<{
         reveal: boolean;
     }>;
     /** Props passed down to the visibility toggle button */
     visibilityToggleButtonProps?: Record<string, any>;
-    /** Determines whether input content should be visible (controlled) */
+    /** Determines whether input content should be visible */
     visible?: boolean;
-    /** Determines whether input content should be visible (uncontrolled) */
+    /** Determines whether input content should be visible by default */
     defaultVisible?: boolean;
     /** Called when visibility changes */
     onVisibilityChange?: (visible: boolean) => void;

package/lib/components/PinInput/PinInput.d.ts

@@ -5,13 +5,13 @@ export type PinInputCssVariables = {
     root: '--pin-input-size';
 };
 export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange'> {
-    /** Hidden input name attribute */
+    /** Hidden input `name` attribute */
     name?: string;
-    /** Hidden input form attribute */
+    /** Hidden input `form` attribute */
     form?: string;
-    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem, `'md'` by default */
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem, `'md'` by default */
     gap?: MantineSpacing;
-    /** 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, `theme.defaultRadius` by default */
     radius?: MantineRadius;
     /** Controls inputs `width` and `height`, `'sm'` by default */
     size?: MantineSize;
@@ -31,19 +31,19 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     manageFocus?: boolean;
     /** Determines whether `autocomplete="one-time-code"` attribute should be set on all inputs, `true` by default */
     oneTimeCode?: boolean;
-    /** Base id used for all inputs, generated randomly by default */
+    /** Base id used for all inputs. By default, inputs' ids are generated randomly. */
     id?: string;
-    /** Disables all inputs */
+    /** If set, `disabled` attribute is added to all inputs */
     disabled?: boolean;
-    /** Adds error styles to all inputs */
+    /** If set, adds error styles and `aria-invalid` attribute to all inputs */
     error?: boolean;
-    /** Allowed values, `'alphanumeric'` by default */
+    /** Determines which values can be entered, `'alphanumeric'` by default */
     type?: 'alphanumeric' | 'number' | RegExp;
     /** Changes input type to `"password"`, `false` by default */
     mask?: boolean;
-    /** Number of input boxes, `4` by default */
+    /** Number of inputs, `4` by default */
     length?: number;
-    /** Determines whether input content can be edited */
+    /** If set, the user cannot edit the value */
     readOnly?: boolean;
     /** Inputs `type` attribute, inferred from the `type` prop if not specified */
     inputType?: React.HTMLInputTypeAttribute;

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

@@ -1,4 +1,4 @@
-export type PopoverWidth = 'target' | React.CSSProperties['width'];
+export type PopoverWidth = 'target' | React.CSSProperties['width'] | null;
 export interface PopoverMiddlewares {
     shift: boolean;
     flip: boolean;

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

@@ -2,6 +2,7 @@ import { GetStylesApi } from '../../core';
 import type { ProgressRootFactory } from './ProgressRoot/ProgressRoot';
 interface ProgressContextValue {
     getStyles: GetStylesApi<ProgressRootFactory>;
+    autoContrast: boolean | undefined;
 }
 export declare const ProgressProvider: ({ children, value }: {
     value: ProgressContextValue;

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

@@ -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

@@ -9,13 +9,13 @@ 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

@@ -3,7 +3,7 @@ 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

@@ -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 */
-    size?: MantineSize;
-    /** Number of controls that should be rendered */
+    /** Controls component size, `'sm'` by default */
+    size?: MantineSize | number | (string & {});
+    /** 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,7 +1,6 @@
 import React from 'react';
-import { BoxProps, ElementProps, MantineSize } from '../../../core';
+import { BoxProps, ElementProps } from '../../../core';
 export interface RatingItemProps extends BoxProps, ElementProps<'input', 'value' | 'size'> {
-    size: MantineSize;
     getSymbolLabel: ((value: number) => string) | undefined;
     emptyIcon?: React.ReactNode | ((value: number) => React.ReactNode);
     fullIcon?: React.ReactNode | ((value: number) => React.ReactNode);
@@ -13,7 +12,7 @@ export interface RatingItemProps extends BoxProps, ElementProps<'input', 'value'
     onChange: (event: React.ChangeEvent<HTMLInputElement> | number) => void;
     onInputChange: (event: React.ChangeEvent<HTMLInputElement> | number) => void;
 }
-export declare function RatingItem({ size, getSymbolLabel, emptyIcon, fullIcon, full, active, value, readOnly, fractionValue, color, id, onBlur, onChange, onInputChange, style, ...others }: RatingItemProps): React.JSX.Element;
+export declare function RatingItem({ getSymbolLabel, emptyIcon, fullIcon, full, active, value, readOnly, fractionValue, color, id, onBlur, onChange, onInputChange, style, ...others }: RatingItemProps): React.JSX.Element;
 export declare namespace RatingItem {
     var displayName: string;
 }

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

@@ -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;