@mantine/core 8.3.13 → 9.0.0-alpha.0

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

@@ -1,11 +1,11 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames, InputClearButtonProps } from '../Input';
+import { ComboboxGenericData, ComboboxGenericItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxRenderPillInput } from '../Combobox';
+import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type TagsInputStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<TagsInputFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
     /** Data displayed in the dropdown. Values must be unique. */
-    data?: ComboboxStringData;
+    data?: ComboboxGenericData;
     /** Controlled component value */
     value?: string[];
     /** Uncontrolled component default value */
@@ -22,31 +22,37 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     defaultSearchValue?: string;
     /** Called when search changes */
     onSearchChange?: (value: string) => void;
-    /** Maximum number of tags @default `Infinity` */
+    /** Maximum number of tags @default Infinity */
     maxTags?: number;
-    /** If set, duplicate tags are allowed @default `false` */
+    /** Called when user tries to add more tags than maxTags */
+    onMaxTags?: (value: string) => void;
+    /** If set, duplicate tags are allowed @default false */
     allowDuplicates?: boolean;
     /** Called when user tries to submit a duplicated tag */
     onDuplicate?: (value: string) => void;
     /** Characters that should trigger tags split, `[',']` by default */
     splitChars?: string[];
-    /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** If set, the clear button is displayed in the right section when the component has value @default false */
     clearable?: boolean;
+    /** Determines how the clear button and rightSection are rendered @default 'both' */
+    clearSectionMode?: ClearSectionMode;
     /** Props passed down to the clear button */
     clearButtonProps?: InputClearButtonProps;
     /** Props passed down to the hidden input */
-    hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
-    /** Divider used to separate values in the hidden input `value` attribute @default `','` */
+    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
+    /** Divider used to separate values in the hidden input `value` attribute @default ',' */
     hiddenInputValuesDivider?: string;
     /** A function to render content of the option, replaces the default content of the option */
-    renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
+    renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;
+    /** A function to render content of the pill, replaces the default content of the pill */
+    renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
-    /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default `true` */
+    /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */
     acceptValueOnBlur?: boolean;
     /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */
     isDuplicate?: (value: string, currentValues: string[]) => boolean;
-    /** If set, the dropdown opens when the input receives focus @default `true` */
+    /** If set, the dropdown opens when the input receives focus @default true */
     openOnFocus?: boolean;
 }
 export type TagsInputFactory = Factory<{

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

@@ -1,2 +1,8 @@
+import type { TagsInputFactory, TagsInputProps, TagsInputStylesNames } from './TagsInput';
 export { TagsInput } from './TagsInput';
-export type { TagsInputProps, TagsInputStylesNames, TagsInputFactory } from './TagsInput';
+export type { TagsInputProps, TagsInputStylesNames, TagsInputFactory };
+export declare namespace TagsInput {
+    type Props = TagsInputProps;
+    type StylesNames = TagsInputStylesNames;
+    type Factory = TagsInputFactory;
+}

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

@@ -1,4 +1,4 @@
-import { BoxProps, MantineColor, MantineFontSize, MantineGradient, MantineLineHeight, PolymorphicFactory, StylesApiProps } from '../../core';
+import { BoxProps, MantineFontSize, MantineGradient, MantineLineHeight, PolymorphicFactory, StylesApiProps } from '../../core';
 type TextTruncate = 'end' | 'start' | boolean;
 export type TextStylesNames = 'root';
 export type TextVariant = 'text' | 'gradient';
@@ -7,22 +7,20 @@ export type TextCssVariables = {
 };
 export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
     __staticSelector?: string;
-    /** Controls `font-size` and `line-height` @default `'md'` */
+    /** 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 @default `false` */
+    /** Sets `line-height` to 1 for centering @default false */
     inline?: boolean;
-    /** Determines whether font properties should be inherited from the parent @default `false` */
+    /** Determines whether font properties should be inherited from the parent @default false */
     inherit?: boolean;
-    /** Gradient configuration, ignored when `variant` is not `gradient` @default `theme.defaultGradient` */
+    /** Gradient configuration, ignored when `variant` is not `gradient` @default theme.defaultGradient */
     gradient?: MantineGradient;
     /** Shorthand for `component="span"` */
     span?: boolean;
-    /** @deprecated Use `c` prop instead */
-    color?: MantineColor;
 }
 export type TextFactory = PolymorphicFactory<{
     props: TextProps;
@@ -34,7 +32,7 @@ export type TextFactory = PolymorphicFactory<{
 }>;
 export declare const Text: (<C = "p">(props: import("../..").PolymorphicComponentProps<C, TextProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(TextProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof TextProps> & {
+} & Omit<any, "component" | keyof TextProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (TextProps & {
@@ -54,7 +52,16 @@ export declare const Text: (<C = "p">(props: import("../..").PolymorphicComponen
     stylesNames: TextStylesNames;
     vars: TextCssVariables;
     variant: TextVariant;
-}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+}> & {
+    varsResolver: import("../..").VarsResolver<{
+        props: TextProps;
+        defaultComponent: "p";
+        defaultRef: HTMLParagraphElement;
+        stylesNames: TextStylesNames;
+        vars: TextCssVariables;
+        variant: TextVariant;
+    }>;
+} & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: TextProps;
     defaultComponent: "p";
     defaultRef: HTMLParagraphElement;

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

@@ -1,2 +1,10 @@
+import type { TextCssVariables, TextFactory, TextProps, TextStylesNames, TextVariant } from './Text';
 export { Text } from './Text';
-export type { TextCssVariables, TextFactory, TextProps, TextStylesNames, TextVariant, } from './Text';
+export type { TextProps, TextStylesNames, TextCssVariables, TextFactory, TextVariant };
+export declare namespace Text {
+    type Props = TextProps;
+    type StylesNames = TextStylesNames;
+    type CssVariables = TextCssVariables;
+    type Factory = TextFactory;
+    type Variant = TextVariant;
+}

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

@@ -1,2 +1,7 @@
+import type { TextInputFactory, TextInputProps } from './TextInput';
 export { TextInput } from './TextInput';
-export type { TextInputFactory, TextInputProps } from './TextInput';
+export type { TextInputProps, TextInputFactory };
+export declare namespace TextInput {
+    type Props = TextInputProps;
+    type Factory = TextInputFactory;
+}

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;
-    /** If set, enables textarea height growing with its content @default `false` */
+    /** 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 @default `'none'` */
+    /** Controls `resize` CSS property @default 'none' */
     resize?: React.CSSProperties['resize'];
 }
 export type TextareaFactory = Factory<{

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

@@ -1,2 +1,7 @@
+import type { TextareaFactory, TextareaProps } from './Textarea';
 export { Textarea } from './Textarea';
-export type { TextareaFactory, TextareaProps } from './Textarea';
+export type { TextareaProps, TextareaFactory };
+export declare namespace Textarea {
+    type Props = TextareaProps;
+    type Factory = TextareaFactory;
+}

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

@@ -5,13 +5,13 @@ 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. @default `'md'` */
+    /** 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 `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. @default `theme.defaultRadius` */
+    /** 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 `theme.defaultGradient` */
+    /** Gradient data used when `variant="gradient"` @default theme.defaultGradient */
     gradient?: MantineGradient;
     /** Icon displayed inside the component */
     children?: React.ReactNode;

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

@@ -1,2 +1,10 @@
+import type { ThemeIconCssVariables, ThemeIconFactory, ThemeIconProps, ThemeIconStylesNames, ThemeIconVariant } from './ThemeIcon';
 export { ThemeIcon } from './ThemeIcon';
-export type { ThemeIconCssVariables, ThemeIconFactory, ThemeIconProps, ThemeIconStylesNames, ThemeIconVariant, } from './ThemeIcon';
+export type { ThemeIconProps, ThemeIconStylesNames, ThemeIconFactory, ThemeIconVariant, ThemeIconCssVariables, };
+export declare namespace ThemeIcon {
+    type Props = ThemeIconProps;
+    type StylesNames = ThemeIconStylesNames;
+    type Factory = ThemeIconFactory;
+    type Variant = ThemeIconVariant;
+    type CssVariables = ThemeIconCssVariables;
+}

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

@@ -3,8 +3,5 @@ import type { TimelineFactory } from './Timeline';
 interface TimelineContextValue {
     getStyles: GetStylesApi<TimelineFactory>;
 }
-export declare const TimelineProvider: ({ children, value }: {
-    value: TimelineContextValue;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useTimelineContext: () => TimelineContextValue;
+export declare const TimelineProvider: import("react").Context<TimelineContextValue | null>, useTimelineContext: () => TimelineContextValue;
 export {};

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

@@ -9,17 +9,17 @@ export interface TimelineProps extends BoxProps, StylesApiProps<TimelineFactory>
     children?: React.ReactNode;
     /** Index of the active element */
     active?: number;
-    /** Key of `theme.colors` or any valid CSS color to control active item colors @default `theme.primaryColor` */
+    /** 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 @default `'xl'` */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */
     radius?: MantineRadius;
-    /** Size of the bullet @default `20` */
+    /** Size of the bullet @default 20 */
     bulletSize?: number | string;
-    /** Position of content relative to the bullet @default `'left'` */
+    /** Position of content relative to the bullet @default 'left' */
     align?: 'right' | 'left';
     /** Control width of the line */
     lineWidth?: number | string;
-    /** If set, the active items direction is reversed without reversing items order @default `false` */
+    /** If set, the active items direction is reversed without reversing items order @default false */
     reverseActive?: boolean;
     /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;

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

@@ -10,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 @default `'xl'` */
+    /** 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 @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */
     color?: MantineColor;
-    /** Controls line border style @default `'solid'` */
+    /** Controls line border style @default 'solid' */
     lineVariant?: 'solid' | 'dashed' | 'dotted';
 }
 export type TimelineItemFactory = Factory<{

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

@@ -1,4 +1,16 @@
+import type { TimelineCssVariables, TimelineFactory, TimelineProps, TimelineStylesNames } from './Timeline';
+import type { TimelineItemFactory, TimelineItemProps, TimelineItemStylesNames } from './TimelineItem/TimelineItem';
 export { Timeline } from './Timeline';
 export { TimelineItem } from './TimelineItem/TimelineItem';
-export type { TimelineProps, TimelineStylesNames, TimelineCssVariables, TimelineFactory, } from './Timeline';
-export type { TimelineItemStylesNames, TimelineItemProps, TimelineItemFactory, } from './TimelineItem/TimelineItem';
+export type { TimelineProps, TimelineStylesNames, TimelineCssVariables, TimelineFactory, TimelineItemProps, TimelineItemStylesNames, TimelineItemFactory, };
+export declare namespace Timeline {
+    type Props = TimelineProps;
+    type StylesNames = TimelineStylesNames;
+    type CssVariables = TimelineCssVariables;
+    type Factory = TimelineFactory;
+    namespace Item {
+        type Props = TimelineItemProps;
+        type StylesNames = TimelineItemStylesNames;
+        type Factory = TimelineItemFactory;
+    }
+}

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'> {
-    /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default `1` */
+    /** 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 heading will be truncated */
     lineClamp?: number;
-    /** Heading `text-wrap` CSS property @default `'wrap'` */
+    /** Heading `text-wrap` CSS property @default 'wrap' */
     textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
 }
 export type TitleFactory = Factory<{

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

@@ -1,2 +1,11 @@
+import type { TitleCssVariables, TitleFactory, TitleOrder, TitleProps, TitleSize, TitleStylesNames } from './Title';
 export { Title } from './Title';
-export type { TitleProps, TitleOrder, TitleSize, TitleStylesNames, TitleCssVariables, TitleFactory, } from './Title';
+export type { TitleProps, TitleOrder, TitleSize, TitleStylesNames, TitleCssVariables, TitleFactory, };
+export declare namespace Title {
+    type Props = TitleProps;
+    type Order = TitleOrder;
+    type Size = TitleSize;
+    type StylesNames = TitleStylesNames;
+    type CssVariables = TitleCssVariables;
+    type Factory = TitleFactory;
+}

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

@@ -9,39 +9,37 @@ export interface TooltipProps extends TooltipBaseProps {
     onPositionChange?: (position: FloatingPosition) => void;
     /** Open delay in ms */
     openDelay?: number;
-    /** Close delay in ms @default `0` */
+    /** 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 @default `5` */
+    /** Space between target element and tooltip in px @default 5 */
     offset?: number | FloatingAxesOffsets;
-    /** If set, the tooltip has an arrow @default `false` */
+    /** If set, the tooltip has an arrow @default false */
     withArrow?: boolean;
-    /** Arrow size in px @default `4` */
+    /** Arrow size in px @default 4 */
     arrowSize?: number;
-    /** Arrow offset in px @default `5` */
+    /** Arrow offset in px @default 5 */
     arrowOffset?: number;
-    /** Arrow `border-radius` in px @default `0` */
+    /** Arrow `border-radius` in px @default 0 */
     arrowRadius?: number;
-    /** Arrow position relative to the tooltip @default `side` */
+    /** 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 @default `{ duration: 100, transition: 'fade' }` */
+    /** 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 @default `{ hover: true, focus: false, touch: false }` */
+    /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */
     events?: {
         hover: boolean;
         focus: boolean;
         touch: boolean;
     };
-    /** @deprecated: Do not use, will be removed in 9.0 */
-    positionDependencies?: any[];
     /** Must be set if the tooltip target is an inline element */
     inline?: boolean;
     /** 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) @default `'absolute'` */
+    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */
     floatingStrategy?: FloatingStrategy;
     /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;

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

@@ -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@default `theme.defaultRadius` */
+    /** 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 @default `10` */
+    /** Offset from mouse in px @default 10 */
     offset?: number;
     /** Uncontrolled tooltip initial opened state */
     defaultOpened?: boolean;

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

@@ -1,4 +1,8 @@
 import { ExtendComponent, Factory, MantineThemeComponent } from '../../../core';
+export interface TooltipGroupContextValue {
+    withinGroup: boolean;
+}
+export declare const TooltipGroupContext: import("react").Context<TooltipGroupContextValue>;
 export interface TooltipGroupProps {
     /** `Tooltip` components */
     children: React.ReactNode;

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

@@ -1,7 +1,21 @@
+import type { TooltipFactory, TooltipProps } from './Tooltip';
+import type { TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';
+import type { TooltipFloatingProps } from './TooltipFloating/TooltipFloating';
+import type { TooltipGroupContextValue, TooltipGroupProps } from './TooltipGroup/TooltipGroup';
 export { Tooltip } from './Tooltip';
-export { TooltipGroup } from './TooltipGroup/TooltipGroup';
+export { TooltipGroup, TooltipGroupContext } from './TooltipGroup/TooltipGroup';
 export { TooltipFloating } from './TooltipFloating/TooltipFloating';
-export type { TooltipProps, TooltipFactory } from './Tooltip';
-export type { TooltipGroupProps } from './TooltipGroup/TooltipGroup';
-export type { TooltipFloatingProps } from './TooltipFloating/TooltipFloating';
-export type { TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';
+export type { TooltipProps, TooltipFactory, TooltipCssVariables, TooltipStylesNames, TooltipGroupProps, TooltipGroupContextValue, TooltipFloatingProps, };
+export declare namespace Tooltip {
+    type Props = TooltipProps;
+    type Factory = TooltipFactory;
+    type CssVariables = TooltipCssVariables;
+    type StylesNames = TooltipStylesNames;
+    namespace Group {
+        type Props = TooltipGroupProps;
+        type ContextValue = TooltipGroupContextValue;
+    }
+    namespace Floating {
+        type Props = TooltipFloatingProps;
+    }
+}

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

@@ -15,7 +15,6 @@ interface UseTooltip {
         focus: boolean;
         touch: boolean;
     };
-    positionDependencies: any[];
     inline?: boolean;
     strategy?: FloatingStrategy;
     middlewares?: TooltipMiddlewares;

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

@@ -4,11 +4,11 @@ export interface TransitionProps {
     keepMounted?: boolean;
     /** Transition name or object */
     transition?: MantineTransition;
-    /** Transition duration in ms @default `250` */
+    /** Transition duration in ms @default 250 */
     duration?: number;
-    /** Exit transition duration in ms @default `250` */
+    /** Exit transition duration in ms @default 250 */
     exitDuration?: number;
-    /** Transition timing function @default `theme.transitionTimingFunction` */
+    /** Transition timing function @default theme.transitionTimingFunction */
     timingFunction?: string;
     /** Determines whether component should be mounted to the DOM */
     mounted: boolean;
@@ -32,3 +32,7 @@ export declare function Transition({ keepMounted, transition, duration, exitDura
 export declare namespace Transition {
     var displayName: string;
 }
+export declare namespace Transition {
+    type Props = TransitionProps;
+    type Override = TransitionOverride;
+}

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

@@ -26,7 +26,6 @@ export interface RenderTreeNodePayload {
         onClick: (event: React.MouseEvent) => void;
         'data-selected': boolean | undefined;
         'data-value': string;
-        'data-hovered': boolean | undefined;
     };
 }
 export type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;
@@ -37,23 +36,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 @default `'lg'` */
+    /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' */
     levelOffset?: MantineSpacing;
-    /** If set, tree node with children is expanded on click @default `true` */
+    /** If set, tree node with children is expanded on click @default true */
     expandOnClick?: boolean;
-    /** If set, tree node with children is expanded on space key press @default `true` */
+    /** If set, tree node with children is expanded on space key press @default true */
     expandOnSpace?: boolean;
-    /** If set, tree node is checked on space key press @default `false` */
+    /** If set, tree node is checked on space key press @default false */
     checkOnSpace?: boolean;
-    /** If set, tree node is selected on click @default `false` */
+    /** 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;
-    /** If set, selection is cleared when user clicks outside of the tree @default `false` */
+    /** If set, selection is cleared when user clicks outside of the tree @default false */
     clearSelectionOnOutsideClick?: boolean;
-    /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default `true` */
+    /** 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/Tree/index.d.ts

@@ -1,5 +1,13 @@
+import type { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
+import type { RenderTreeNodePayload, TreeCssVariables, TreeFactory, TreeNodeData, TreeProps, TreeStylesNames } from './Tree';
+import type { UseTreeInput, UseTreeReturnType } from './use-tree';
 export { Tree } from './Tree';
 export { useTree, getTreeExpandedState } from './use-tree';
-export type { TreeCssVariables, TreeFactory, TreeProps, TreeStylesNames, TreeNodeData, RenderTreeNodePayload, } from './Tree';
-export type { UseTreeInput, UseTreeReturnType } from './use-tree';
-export type { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
+export type { TreeProps, TreeStylesNames, TreeFactory, TreeCssVariables, TreeNodeData, RenderTreeNodePayload, UseTreeInput, UseTreeReturnType, CheckedNodeStatus, };
+export declare namespace Tree {
+    type Props = TreeProps;
+    type StylesNames = TreeStylesNames;
+    type Factory = TreeFactory;
+    type NodeData = TreeNodeData;
+    type RenderNodePayload = RenderTreeNodePayload;
+}

package/lib/components/Tree/use-tree.d.ts

@@ -1,14 +1,26 @@
 import { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
 import type { TreeNodeData } from './Tree';
 export type TreeExpandedState = Record<string, boolean>;
-export declare function getTreeExpandedState(data: TreeNodeData[], expandedNodesValues: string[] | '*'): {};
+export declare function getTreeExpandedState(data: TreeNodeData[], expandedNodesValues: string[] | '*'): Record<string, boolean>;
 export interface UseTreeInput {
-    /** Initial expanded state of all nodes */
+    /** Initial expanded state of all nodes, uncontrolled state */
     initialExpandedState?: TreeExpandedState;
+    /** Expanded state of all nodes, controlled state */
+    expandedState?: TreeExpandedState;
+    /** Called when the tree expanded state changes */
+    onExpandedStateChange?: (expandedState: TreeExpandedState) => void;
     /** Initial selected state of nodes */
     initialSelectedState?: string[];
+    /** Selected state of all nodes, controlled state */
+    selectedState?: string[];
+    /** Called when the tree selected state changes */
+    onSelectedStateChange?: (selectedState: string[]) => void;
     /** Initial checked state of nodes */
     initialCheckedState?: string[];
+    /** Checked state of all nodes, controlled state */
+    checkedState?: string[];
+    /** Called when the tree checked state changes */
+    onCheckedStateChange?: (checkedState: string[]) => void;
     /** Determines whether multiple node can be selected at a time */
     multiple?: boolean;
     /** Called with the node value when it is expanded */
@@ -42,7 +54,7 @@ export interface UseTreeReturnType {
     /** Collapses all nodes */
     collapseAllNodes: () => void;
     /** Sets expanded state */
-    setExpandedState: React.Dispatch<React.SetStateAction<TreeExpandedState>>;
+    setExpandedState: (value: TreeExpandedState) => void;
     /** Toggles selected state of the node with provided value */
     toggleSelected: (value: string) => void;
     /** Selects node with provided value */
@@ -52,11 +64,7 @@ export interface UseTreeReturnType {
     /** Clears selected state */
     clearSelected: () => void;
     /** Sets selected state */
-    setSelectedState: React.Dispatch<React.SetStateAction<string[]>>;
-    /** A value of the node that is currently hovered */
-    hoveredNode: string | null;
-    /** Sets hovered node */
-    setHoveredNode: React.Dispatch<React.SetStateAction<string | null>>;
+    setSelectedState: (value: string[]) => void;
     /** Checks node with provided value */
     checkNode: (value: string) => void;
     /** Unchecks node with provided value */
@@ -66,7 +74,7 @@ export interface UseTreeReturnType {
     /** Unchecks all nodes */
     uncheckAllNodes: () => void;
     /** Sets checked state */
-    setCheckedState: React.Dispatch<React.SetStateAction<string[]>>;
+    setCheckedState: (value: string[]) => void;
     /** Returns all checked nodes with status */
     getCheckedNodes: () => CheckedNodeStatus[];
     /** Returns `true` if node with provided value is checked */
@@ -74,5 +82,5 @@ export interface UseTreeReturnType {
     /** Returns `true` if node with provided value is indeterminate */
     isNodeIndeterminate: (value: string) => boolean;
 }
-export declare function useTree({ initialSelectedState, initialCheckedState, initialExpandedState, multiple, onNodeCollapse, onNodeExpand, }?: UseTreeInput): UseTreeReturnType;
+export declare function useTree({ initialSelectedState, expandedState, initialCheckedState, checkedState, initialExpandedState, selectedState, multiple, onNodeCollapse, onNodeExpand, onCheckedStateChange, onSelectedStateChange, onExpandedStateChange, }?: UseTreeInput): UseTreeReturnType;
 export type TreeController = ReturnType<typeof useTree>;

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

@@ -1,9 +1,8 @@
-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, };
+import type { TypographyFactory, TypographyProps, TypographyStylesNames } from './Typography';
+export { Typography } from './Typography';
+export type { TypographyProps, TypographyStylesNames, TypographyFactory };
+export declare namespace Typography {
+    type Props = TypographyProps;
+    type StylesNames = TypographyStylesNames;
+    type Factory = TypographyFactory;
+}

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

@@ -11,7 +11,7 @@ export type UnstyledButtonFactory = PolymorphicFactory<{
 }>;
 export declare const UnstyledButton: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, UnstyledButtonProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(UnstyledButtonProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof UnstyledButtonProps> & {
+} & Omit<any, "component" | keyof UnstyledButtonProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (UnstyledButtonProps & {