@mantine/core 7.10.2 → 7.11.1

package/lib/components/BackgroundImage/BackgroundImage.d.ts

@@ -36,4 +36,10 @@ export declare const BackgroundImage: (<C = "div">(props: import("../../core").P
     defaultComponent: 'div';
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: BackgroundImageProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BackgroundImageStylesNames;
+    vars: BackgroundImageCssVariables;
 }> & Record<string, never>;

package/lib/components/Badge/Badge.d.ts

@@ -56,4 +56,11 @@ export declare const Badge: (<C = "div">(props: import("../../core").Polymorphic
     stylesNames: BadgeStylesNames;
     vars: BadgeCssVariables;
     variant: BadgeVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: BadgeProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BadgeStylesNames;
+    vars: BadgeCssVariables;
+    variant: BadgeVariant;
 }> & Record<string, never>;

package/lib/components/Burger/Burger.d.ts

@@ -1,11 +1,13 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
 export type BurgerStylesNames = 'root' | 'burger';
 export type BurgerCssVariables = {
-    root: '--burger-color' | '--burger-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
+    root: '--burger-color' | '--burger-size' | '--burger-line-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
 };
 export interface BurgerProps extends BoxProps, StylesApiProps<BurgerFactory>, ElementProps<'button'> {
     /** Controls burger `width` and `height`, numbers are converted to rem, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
+    /** Controls height of lines, by default calculated based on `size` prop */
+    lineSize?: string | number;
     /** Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light */
     color?: MantineColor;
     /** State of the burger, when `true` burger is transformed into X, `false` by default */

package/lib/components/Button/Button.d.ts

@@ -74,6 +74,16 @@ export declare const Button: (<C = "button">(props: import("../../core").Polymor
     staticComponents: {
         Group: typeof ButtonGroup;
     };
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ButtonStylesNames;
+    vars: ButtonCssVariables;
+    variant: ButtonVariant;
+    staticComponents: {
+        Group: typeof ButtonGroup;
+    };
 }> & {
     Group: typeof ButtonGroup;
 };

package/lib/components/Card/Card.d.ts

@@ -52,6 +52,15 @@ export declare const Card: (<C = "div">(props: import("../../core").PolymorphicC
     staticComponents: {
         Section: typeof CardSection;
     };
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CardProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardStylesNames;
+    vars: CardCssVariables;
+    staticComponents: {
+        Section: typeof CardSection;
+    };
 }> & {
     Section: typeof CardSection;
 };

package/lib/components/Card/CardSection/CardSection.d.ts

@@ -33,4 +33,10 @@ export declare const CardSection: (<C = "div">(props: import("../../../core").Po
     defaultComponent: 'div';
     stylesNames: CardSectionStylesNames;
     compound: true;
+}> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CardSectionProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardSectionStylesNames;
+    compound: true;
 }> & Record<string, never>;

package/lib/components/Center/Center.d.ts

@@ -30,4 +30,9 @@ export declare const Center: (<C = "div">(props: import("../../core").Polymorphi
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CenterProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CenterStylesNames;
 }> & Record<string, never>;

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

@@ -51,4 +51,11 @@ export declare const CloseButton: (<C = "button">(props: import("../../core").Po
     stylesNames: CloseButtonStylesNames;
     variant: CloseButtonVariant;
     vars: CloseButtonCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CloseButtonProps;
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
+    stylesNames: CloseButtonStylesNames;
+    variant: CloseButtonVariant;
+    vars: CloseButtonCssVariables;
 }> & Record<string, never>;

package/lib/components/ColorSwatch/ColorSwatch.d.ts

@@ -42,4 +42,10 @@ export declare const ColorSwatch: (<C = "div">(props: import("../../core").Polym
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: ColorSwatchProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: ColorSwatchStylesNames;
+    vars: ColorSwatchCssVariables;
 }> & Record<string, never>;

package/lib/components/Flex/Flex.d.ts

@@ -40,4 +40,9 @@ export declare const Flex: (<C = "div">(props: import("../../core").PolymorphicC
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: FlexStylesNames;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: FlexProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: FlexStylesNames;
 }> & Record<string, never>;

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

@@ -37,4 +37,10 @@ export declare const Highlight: (<C = "div">(props: import("../../core").Polymor
     defaultComponent: 'div';
     stylesNames: TextStylesNames;
     variant: TextVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: HighlightProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: TextStylesNames;
+    variant: TextVariant;
 }> & Record<string, never>;

package/lib/components/Image/Image.d.ts

@@ -42,4 +42,10 @@ export declare const Image: (<C = "img">(props: import("../../core").Polymorphic
     defaultComponent: 'img';
     stylesNames: ImageStylesNames;
     vars: ImageCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: ImageProps;
+    defaultRef: HTMLImageElement;
+    defaultComponent: 'img';
+    stylesNames: ImageStylesNames;
+    vars: ImageCssVariables;
 }> & Record<string, never>;

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

@@ -119,6 +119,21 @@ export declare const Input: (<C = "input">(props: import("../../core").Polymorph
         Placeholder: typeof InputPlaceholder;
         Wrapper: typeof InputWrapper;
     };
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: InputProps;
+    defaultRef: HTMLInputElement;
+    defaultComponent: 'input';
+    stylesNames: InputStylesNames;
+    variant: InputVariant;
+    vars: InputCssVariables;
+    ctx: InputStylesCtx;
+    staticComponents: {
+        Label: typeof InputLabel;
+        Error: typeof InputError;
+        Description: typeof InputDescription;
+        Placeholder: typeof InputPlaceholder;
+        Wrapper: typeof InputWrapper;
+    };
 }> & {
     Label: typeof InputLabel;
     Error: typeof InputError;

package/lib/components/InputBase/InputBase.d.ts

@@ -37,4 +37,10 @@ export declare const InputBase: (<C = "input">(props: import("../../core").Polym
     defaultComponent: 'input';
     stylesNames: __InputStylesNames;
     variant: InputVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: InputBaseProps;
+    defaultRef: HTMLInputElement;
+    defaultComponent: 'input';
+    stylesNames: __InputStylesNames;
+    variant: InputVariant;
 }> & Record<string, never>;

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

@@ -76,6 +76,12 @@ export declare namespace Menu {
         defaultComponent: "button";
         stylesNames: import("./MenuItem/MenuItem").MenuItemStylesNames;
         compound: true;
+    }> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+        props: import("./MenuItem/MenuItem").MenuItemProps;
+        defaultRef: HTMLButtonElement;
+        defaultComponent: "button";
+        stylesNames: import("./MenuItem/MenuItem").MenuItemStylesNames;
+        compound: true;
     }> & Record<string, never>;
     var Label: import("../../core").MantineComponent<{
         props: import("./MenuLabel/MenuLabel").MenuLabelProps;

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

@@ -42,4 +42,10 @@ export declare const MenuItem: (<C = "button">(props: import("../../../core").Po
     defaultComponent: 'button';
     stylesNames: MenuItemStylesNames;
     compound: true;
+}> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: MenuItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: MenuItemStylesNames;
+    compound: true;
 }> & Record<string, never>;

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

@@ -25,7 +25,7 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     maxValues?: number;
     /** Determines whether the select should be searchable, `false` by default */
     searchable?: boolean;
-    /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */
+    /** Message displayed when no option matches the current search query while the `searchable` prop is set or there is no data */
     nothingFoundMessage?: React.ReactNode;
     /** Determines whether check icon should be displayed near the selected option label, `true` by default */
     withCheckIcon?: boolean;

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

@@ -71,4 +71,11 @@ export declare const NavLink: (<C = "a">(props: import("../../core").Polymorphic
     stylesNames: NavLinkStylesNames;
     vars: NavLinkCssVariables;
     variant: NavLinkVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: NavLinkProps;
+    defaultRef: HTMLAnchorElement;
+    defaultComponent: 'a';
+    stylesNames: NavLinkStylesNames;
+    vars: NavLinkCssVariables;
+    variant: NavLinkVariant;
 }> & Record<string, never>;

package/lib/components/Overlay/Overlay.d.ts

@@ -50,4 +50,10 @@ export declare const Overlay: (<C = "div">(props: import("../../core").Polymorph
     defaultComponent: 'div';
     stylesNames: OverlayStylesNames;
     vars: OverlayCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: OverlayProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: OverlayStylesNames;
+    vars: OverlayCssVariables;
 }> & Record<string, never>;

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

@@ -26,6 +26,8 @@ export interface PaginationProps extends PaginationRootProps {
     dotsIcon?: PaginationIcon;
     /** Key of `theme.spacing`, gap between controls, `8` by default */
     gap?: MantineSize | (string & {}) | number;
+    /** Determines whether the pagination should be hidden when only one page is available (`total={1}`), `false` by default */
+    hideWithOnePage?: boolean;
 }
 export type PaginationFactory = Factory<{
     props: PaginationProps;

package/lib/components/Paper/Paper.d.ts

@@ -40,4 +40,10 @@ export declare const Paper: (<C = "div">(props: import("../../core").Polymorphic
     defaultRef: HTMLDivElement;
     stylesNames: PaperStylesNames;
     vars: PaperCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: PaperProps;
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: PaperStylesNames;
+    vars: PaperCssVariables;
 }> & Record<string, never>;

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

@@ -1,5 +1,5 @@
 import { ClassNames, GetStylesApi, MantineRadius, MantineShadow, Styles } from '../../core';
-import { ArrowPosition, FloatingPosition } from '../Floating';
+import { ArrowPosition, FloatingPosition, FloatingStrategy } from '../Floating';
 import { PortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
 import type { PopoverFactory } from './Popover';
@@ -44,6 +44,7 @@ interface PopoverContext {
     variant: string | undefined;
     keepMounted: boolean | undefined;
     getStyles: GetStylesApi<PopoverFactory>;
+    floatingStrategy: FloatingStrategy | undefined;
 }
 export declare const PopoverContextProvider: ({ children, value }: {
     value: PopoverContext;

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

@@ -19,7 +19,7 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     withCheckIcon?: boolean;
     /** Position of the check icon relative to the option label, `'left'` by default */
     checkIconPosition?: 'left' | 'right';
-    /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */
+    /** Message displayed when no option matches the current search query while the `searchable` prop is set or there is no data */
     nothingFoundMessage?: React.ReactNode;
     /** Controlled search value */
     searchValue?: string;

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

@@ -14,6 +14,10 @@ export interface SpoilerProps extends BoxProps, StylesApiProps<SpoilerFactory>,
     controlRef?: React.ForwardedRef<HTMLButtonElement>;
     /** Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state is updated on mount */
     initialState?: boolean;
+    /** Controlled expanded state value */
+    expanded?: boolean;
+    /** Called when expanded state changes (when spoiler visibility is toggled by the user) */
+    onExpandedChange?: (expanded: boolean) => void;
     /** Spoiler reveal transition duration in ms, set 0 or null to turn off animation, `200` by default */
     transitionDuration?: number;
 }

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

@@ -43,6 +43,8 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
+    /** Determines whether the value typed in by the user but not submitted should be accepted when the input is blurred, `true` by default */
+    acceptValueOnBlur?: boolean;
 }
 export type TagsInputFactory = Factory<{
     props: TagsInputProps;

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

@@ -54,5 +54,12 @@ export declare const Text: (<C = "p">(props: import("../../core").PolymorphicCom
     stylesNames: TextStylesNames;
     vars: TextCssVariables;
     variant: TextVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: TextProps;
+    defaultComponent: 'p';
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextStylesNames;
+    vars: TextCssVariables;
+    variant: TextVariant;
 }> & Record<string, never>;
 export {};

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

@@ -13,6 +13,8 @@ export interface TooltipProps extends TooltipBaseProps {
     closeDelay?: number;
     /** Controlled opened state */
     opened?: boolean;
+    /** Uncontrolled tooltip initial opened state */
+    defaultOpened?: boolean;
     /** Space between target element and tooltip in px, `5` by default */
     offset?: number | FloatingAxesOffsets;
     /** Determines whether the tooltip should have an arrow, `false` by default */

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

@@ -3,6 +3,8 @@ import { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from '../To
 export interface TooltipFloatingProps extends TooltipBaseProps {
     /** Offset from mouse in px, `10` by default */
     offset?: number;
+    /** Uncontrolled tooltip initial opened state */
+    defaultOpened?: boolean;
 }
 export type TooltipFloatingFactory = Factory<{
     props: TooltipFloatingProps;

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

@@ -2,13 +2,14 @@ import { FloatingPosition } from '../../Floating';
 interface UseFloatingTooltip {
     offset: number;
     position: FloatingPosition;
+    defaultOpened?: boolean;
 }
-export declare function useFloatingTooltip<T extends HTMLElement = any>({ offset, position, }: UseFloatingTooltip): {
+export declare function useFloatingTooltip<T extends HTMLElement = any>({ offset, position, defaultOpened, }: UseFloatingTooltip): {
     handleMouseMove: ({ clientX, clientY }: MouseEvent | React.MouseEvent<T, MouseEvent>) => void;
     x: number;
     y: number;
-    opened: boolean;
-    setOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    opened: boolean | undefined;
+    setOpened: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
     boundaryRef: import("react").MutableRefObject<T | undefined>;
     floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
 };

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

@@ -5,6 +5,7 @@ interface UseTooltip {
     openDelay?: number;
     onPositionChange?: (position: FloatingPosition) => void;
     opened?: boolean;
+    defaultOpened?: boolean;
     offset: number | FloatingAxesOffsets;
     arrowRef?: React.RefObject<HTMLDivElement>;
     arrowOffset?: number;

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

@@ -22,9 +22,13 @@ export interface TransitionProps {
     onEnter?: () => void;
     /** Called when enter transition ends */
     onEntered?: () => void;
+    /** Delay in ms before enter transition starts */
+    enterDelay?: number;
+    /** Delay in ms before exit transition starts */
+    exitDelay?: number;
 }
 export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
-export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Transition {
     var displayName: string;
 }

package/lib/components/Transition/use-transition.d.ts

@@ -8,8 +8,10 @@ interface UseTransition {
     onExit?: () => void;
     onEntered?: () => void;
     onExited?: () => void;
+    enterDelay?: number;
+    exitDelay?: number;
 }
-export declare function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onExit, onEntered, onExited, }: UseTransition): {
+export declare function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onExit, onEntered, onExited, enterDelay, exitDelay, }: UseTransition): {
     transitionDuration: number;
     transitionStatus: TransitionStatus;
     transitionTimingFunction: string;

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

@@ -27,4 +27,9 @@ export declare const UnstyledButton: (<C = "button">(props: import("../../core")
     stylesNames: UnstyledButtonStylesNames;
     defaultComponent: 'button';
     defaultRef: HTMLButtonElement;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: UnstyledButtonProps;
+    stylesNames: UnstyledButtonStylesNames;
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
 }> & Record<string, never>;

package/lib/core/Box/style-props/style-props.types.d.ts

@@ -1,47 +1,88 @@
 import type { MantineBreakpoint, MantineColor, MantineFontSize, MantineLineHeight, MantineSpacing } from '../../MantineProvider';
 export type StyleProp<Value> = Value | Partial<Record<MantineBreakpoint | (string & {}), Value>>;
 export interface MantineStyleProps {
+    /** margin, theme key: theme.spacing */
     m?: StyleProp<MantineSpacing>;
+    /** marginBlock, theme key: theme.spacing */
     my?: StyleProp<MantineSpacing>;
+    /** marginInline, theme key: theme.spacing */
     mx?: StyleProp<MantineSpacing>;
+    /** marginTop, theme key: theme.spacing */
     mt?: StyleProp<MantineSpacing>;
+    /** marginBottom, theme key: theme.spacing */
     mb?: StyleProp<MantineSpacing>;
+    /** marginInlineStart, theme key: theme.spacing */
     ms?: StyleProp<MantineSpacing>;
+    /** marginInlineEnd, theme key: theme.spacing */
     me?: StyleProp<MantineSpacing>;
+    /** marginLeft, theme key: theme.spacing */
     ml?: StyleProp<MantineSpacing>;
+    /** marginRight, theme key: theme.spacing */
     mr?: StyleProp<MantineSpacing>;
+    /** padding, theme key: theme.spacing */
     p?: StyleProp<MantineSpacing>;
+    /** paddingBlock, theme key: theme.spacing */
     py?: StyleProp<MantineSpacing>;
+    /** paddingInline, theme key: theme.spacing */
     px?: StyleProp<MantineSpacing>;
+    /** paddingTop, theme key: theme.spacing */
     pt?: StyleProp<MantineSpacing>;
+    /** paddingBottom, theme key: theme.spacing */
     pb?: StyleProp<MantineSpacing>;
+    /** paddingInlineStart, theme key: theme.spacing */
     ps?: StyleProp<MantineSpacing>;
+    /** paddingInlineEnd, theme key: theme.spacing */
     pe?: StyleProp<MantineSpacing>;
+    /** paddingLeft, theme key: theme.spacing */
     pl?: StyleProp<MantineSpacing>;
+    /** paddingRight, theme key: theme.spacing */
     pr?: StyleProp<MantineSpacing>;
+    /** border */
     bd?: StyleProp<React.CSSProperties['border']>;
+    /** background, theme key: theme.colors */
     bg?: StyleProp<MantineColor>;
+    /** color */
     c?: StyleProp<MantineColor>;
     opacity?: StyleProp<React.CSSProperties['opacity']>;
+    /** fontFamily */
     ff?: StyleProp<'monospace' | 'text' | 'heading' | (string & {})>;
+    /** fontSize, theme key: theme.fontSizes */
     fz?: StyleProp<MantineFontSize | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
+    /** fontWeight */
     fw?: StyleProp<React.CSSProperties['fontWeight']>;
+    /** letterSpacing */
     lts?: StyleProp<React.CSSProperties['letterSpacing']>;
+    /** textAlign */
     ta?: StyleProp<React.CSSProperties['textAlign']>;
+    /** lineHeight, theme key: lineHeights */
     lh?: StyleProp<MantineLineHeight | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
+    /** fontStyle */
     fs?: StyleProp<React.CSSProperties['fontStyle']>;
+    /** textTransform */
     tt?: StyleProp<React.CSSProperties['textTransform']>;
+    /** textDecoration */
     td?: StyleProp<React.CSSProperties['textDecoration']>;
+    /** width, theme key: theme.spacing */
     w?: StyleProp<React.CSSProperties['width']>;
+    /** minWidth, theme key: theme.spacing*/
     miw?: StyleProp<React.CSSProperties['minWidth']>;
+    /** maxWidth, theme key: theme.spacing */
     maw?: StyleProp<React.CSSProperties['maxWidth']>;
+    /** height, theme key: theme.spacing */
     h?: StyleProp<React.CSSProperties['height']>;
+    /** minHeight, theme key: theme.spacing */
     mih?: StyleProp<React.CSSProperties['minHeight']>;
+    /** maxHeight, theme key: theme.spacing */
     mah?: StyleProp<React.CSSProperties['maxHeight']>;
+    /** backgroundSize */
     bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
+    /** backgroundPosition */
     bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
+    /** backgroundRepeat */
     bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
+    /** backgroundAttachment */
     bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
+    /** position */
     pos?: StyleProp<React.CSSProperties['position']>;
     top?: StyleProp<React.CSSProperties['top']>;
     left?: StyleProp<React.CSSProperties['left']>;

package/lib/core/factory/factory.d.ts

@@ -28,7 +28,13 @@ export interface ThemeExtend<Payload extends FactoryPayload> {
 export type ComponentClasses<Payload extends FactoryPayload> = {
     classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
 };
-export type MantineComponentStaticProperties<Payload extends FactoryPayload> = ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload['staticComponents']>;
+export type MantineComponentStaticProperties<Payload extends FactoryPayload> = ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload['staticComponents']> & FactoryComponentWithProps<Payload>;
+export type FactoryComponentWithProps<Payload extends FactoryPayload> = {
+    withProps: (props: Payload['props']) => React.ForwardRefExoticComponent<Payload['props'] & React.RefAttributes<Payload['ref']> & {
+        component?: any;
+        renderRoot?: (props: Record<string, any>) => React.ReactNode;
+    }>;
+};
 export type MantineComponent<Payload extends FactoryPayload> = React.ForwardRefExoticComponent<Payload['props'] & React.RefAttributes<Payload['ref']> & {
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;

package/lib/core/factory/index.d.ts

@@ -1,6 +1,6 @@
 export { factory } from './factory';
 export { polymorphicFactory } from './polymorphic-factory';
 export { createPolymorphicComponent } from './create-polymorphic-component';
-export type { FactoryPayload, ExtendComponent, MantineComponent, MantineComponentStaticProperties, } from './factory';
+export type { FactoryPayload, ExtendComponent, MantineComponent, MantineComponentStaticProperties, FactoryComponentWithProps, } from './factory';
 export type { PolymorphicComponentProps, PolymorphicRef } from './create-polymorphic-component';
 export type { Factory, PolymorphicFactory } from './create-factory';

package/lib/core/factory/polymorphic-factory.d.ts

@@ -4,6 +4,9 @@ export interface PolymorphicFactoryPayload extends FactoryPayload {
     defaultComponent: any;
     defaultRef: any;
 }
+export type PolymorphicComponentWithProps<Payload extends PolymorphicFactoryPayload> = {
+    withProps: <C = Payload['defaultComponent']>(fixedProps: PolymorphicComponentProps<C, Payload['props']>) => <L = C>(props: PolymorphicComponentProps<L, Payload['props']>) => React.ReactElement;
+};
 export declare function polymorphicFactory<Payload extends PolymorphicFactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['defaultRef'], Payload['props']>): (<C = Payload["defaultComponent"]>(props: PolymorphicComponentProps<C, Payload["props"]>) => React.ReactElement) & Omit<import("react").FunctionComponent<(Payload["props"] & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof Payload["props"]> & {
@@ -12,4 +15,4 @@ export declare function polymorphicFactory<Payload extends PolymorphicFactoryPay
 }) | (Payload["props"] & {
     component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     renderRoot?: ((props: Record<string, any>) => any) | undefined;
-})>, never> & ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload["staticComponents"]>;
+})>, never> & ThemeExtend<Payload> & ComponentClasses<Payload> & PolymorphicComponentWithProps<Payload> & StaticComponents<Payload["staticComponents"]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.10.2",
+  "version": "7.11.1",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "7.10.2",
+    "@mantine/hooks": "7.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/hooks": "7.10.2"
+    "@mantine/hooks": "7.11.1"
   }
 }

package/styles/ActionIcon.css

@@ -85,11 +85,11 @@
 }
 
 :where([data-mantine-color-scheme='light']) .m_302b9fb1 {
-    background-color: rgba(255, 255, 255, 0.35);
+    background-color: rgba(255, 255, 255, 0.15);
 }
 
 :where([data-mantine-color-scheme='dark']) .m_302b9fb1 {
-    background-color: rgba(0, 0, 0, 0.35);
+    background-color: rgba(0, 0, 0, 0.15);
 }
 
 .m_1a0f1b21 {

package/styles/ActionIcon.layer.css

@@ -85,11 +85,11 @@
 }
 
 :where([data-mantine-color-scheme='light']) .m_302b9fb1 {
-    background-color: rgba(255, 255, 255, 0.35);
+    background-color: rgba(255, 255, 255, 0.15);
 }
 
 :where([data-mantine-color-scheme='dark']) .m_302b9fb1 {
-    background-color: rgba(0, 0, 0, 0.35);
+    background-color: rgba(0, 0, 0, 0.15);
 }
 
 .m_1a0f1b21 {