@mantine/core 7.14.2 → 7.15.0

package/esm/core/factory/create-polymorphic-component.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-polymorphic-component.mjs","sources":["../../../src/core/factory/create-polymorphic-component.ts"],"sourcesContent":["type ExtendedProps<Props = {}, OverrideProps = {}> = OverrideProps &\n  Omit<Props, keyof OverrideProps>;\n\ntype ElementType = keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;\n\ntype PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<\n  C,\n  React.ComponentPropsWithoutRef<C>\n>;\n\ntype ComponentProp<C> = {\n  component?: C;\n};\n\ntype InheritedProps<C extends ElementType, Props = {}> = ExtendedProps<PropsOf<C>, Props>;\n\nexport type PolymorphicRef<C> = C extends React.ElementType\n  ? React.ComponentPropsWithRef<C>['ref']\n  : never;\n\nexport type PolymorphicComponentProps<C, Props = {}> = C extends React.ElementType\n  ? InheritedProps<C, Props & ComponentProp<C>> & {\n      ref?: PolymorphicRef<C>;\n      renderRoot?: (props: any) => any;\n    }\n  : Props & { component: React.ElementType; renderRoot?: (props: Record<string, any>) => any };\n\nexport function createPolymorphicComponent<\n  ComponentDefaultType,\n  Props,\n  StaticComponents = Record<string, never>,\n>(component: any) {\n  type ComponentProps<C> = PolymorphicComponentProps<C, Props>;\n\n  type _PolymorphicComponent = <C = ComponentDefaultType>(\n    props: ComponentProps<C>\n  ) => React.ReactElement;\n\n  type ComponentProperties = Omit<React.FunctionComponent<ComponentProps<any>>, never>;\n\n  type PolymorphicComponent = _PolymorphicComponent & ComponentProperties & StaticComponents;\n\n  return component as PolymorphicComponent;\n}\n"],"names":[],"mappings":"AACO,SAAS,0BAA0B,CAAC,SAAS,EAAE;AACtD,EAAE,OAAO,SAAS;AAClB;;;;"}
+{"version":3,"file":"create-polymorphic-component.mjs","sources":["../../../src/core/factory/create-polymorphic-component.ts"],"sourcesContent":["type ExtendedProps<Props = {}, OverrideProps = {}> = OverrideProps &\n  Omit<Props, keyof OverrideProps>;\n\ntype ElementType = keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>;\n\ntype PropsOf<C extends ElementType> = React.JSX.LibraryManagedAttributes<\n  C,\n  React.ComponentPropsWithoutRef<C>\n>;\n\ntype ComponentProp<C> = {\n  component?: C;\n};\n\ntype InheritedProps<C extends ElementType, Props = {}> = ExtendedProps<PropsOf<C>, Props>;\n\nexport type PolymorphicRef<C> = C extends React.ElementType\n  ? React.ComponentPropsWithRef<C>['ref']\n  : never;\n\nexport type PolymorphicComponentProps<C, Props = {}> = C extends React.ElementType\n  ? InheritedProps<C, Props & ComponentProp<C>> & {\n      ref?: PolymorphicRef<C>;\n      renderRoot?: (props: any) => any;\n    }\n  : Props & { component: React.ElementType; renderRoot?: (props: Record<string, any>) => any };\n\nexport function createPolymorphicComponent<\n  ComponentDefaultType,\n  Props,\n  StaticComponents = Record<string, never>,\n>(component: any) {\n  type ComponentProps<C> = PolymorphicComponentProps<C, Props>;\n\n  type _PolymorphicComponent = <C = ComponentDefaultType>(\n    props: ComponentProps<C>\n  ) => React.ReactElement;\n\n  type ComponentProperties = Omit<React.FunctionComponent<ComponentProps<any>>, never>;\n\n  type PolymorphicComponent = _PolymorphicComponent & ComponentProperties & StaticComponents;\n\n  return component as PolymorphicComponent;\n}\n"],"names":[],"mappings":"AACO,SAAS,0BAA0B,CAAC,SAAS,EAAE;AACtD,EAAE,OAAO,SAAS;AAClB;;;;"}

package/esm/index.mjs

@@ -66,6 +66,7 @@ import './core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs';
 export { getCSSColorVariables } from './core/MantineProvider/MantineCssVariables/get-css-color-variables.mjs';
 export { isVirtualColor, virtualColor } from './core/MantineProvider/MantineCssVariables/virtual-color/virtual-color.mjs';
 export { useMatches } from './core/MantineProvider/use-matches/use-matches.mjs';
+export { mantineHtmlProps } from './core/MantineProvider/mantine-html-props.mjs';
 export { InlineStyles } from './core/InlineStyles/InlineStyles.mjs';
 export { stylesToString } from './core/InlineStyles/styles-to-string/styles-to-string.mjs';
 export { extractStyleProps } from './core/Box/style-props/extract-style-props/extract-style-props.mjs';
@@ -88,6 +89,7 @@ export { PopoverDropdown } from './components/Popover/PopoverDropdown/PopoverDro
 export { PopoverTarget } from './components/Popover/PopoverTarget/PopoverTarget.mjs';
 export { ActionIcon } from './components/ActionIcon/ActionIcon.mjs';
 export { ActionIconGroup } from './components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs';
+export { ActionIconGroupSection } from './components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.mjs';
 export { CloseIcon } from './components/CloseButton/CloseIcon.mjs';
 export { CloseButton } from './components/CloseButton/CloseButton.mjs';
 export { Group } from './components/Group/Group.mjs';
@@ -140,6 +142,7 @@ export { Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.mjs';
 export { Burger } from './components/Burger/Burger.mjs';
 export { Button } from './components/Button/Button.mjs';
 export { ButtonGroup } from './components/Button/ButtonGroup/ButtonGroup.mjs';
+export { ButtonGroupSection } from './components/Button/ButtonGroupSection/ButtonGroupSection.mjs';
 export { Card } from './components/Card/Card.mjs';
 export { CardSection } from './components/Card/CardSection/CardSection.mjs';
 export { Center } from './components/Center/Center.mjs';

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ActionIcon/ActionIcon.d.ts

@@ -1,6 +1,7 @@
 import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 import { LoaderProps } from '../Loader';
 import { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';
+import { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';
 export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
 export type ActionIconStylesNames = 'root' | 'loader' | 'icon';
 export type ActionIconCssVariables = {
@@ -37,6 +38,7 @@ export type ActionIconFactory = PolymorphicFactory<{
     vars: ActionIconCssVariables;
     staticComponents: {
         Group: typeof ActionIconGroup;
+        GroupSection: typeof ActionIconGroupSection;
     };
 }>;
 export declare const ActionIcon: (<C = "button">(props: import("../../core").PolymorphicComponentProps<C, ActionIconProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ActionIconProps & {
@@ -56,6 +58,7 @@ export declare const ActionIcon: (<C = "button">(props: import("../../core").Pol
     vars: ActionIconCssVariables;
     staticComponents: {
         Group: typeof ActionIconGroup;
+        GroupSection: typeof ActionIconGroupSection;
     };
 }> & import("../../core/factory/factory").ComponentClasses<{
     props: ActionIconProps;
@@ -66,6 +69,7 @@ export declare const ActionIcon: (<C = "button">(props: import("../../core").Pol
     vars: ActionIconCssVariables;
     staticComponents: {
         Group: typeof ActionIconGroup;
+        GroupSection: typeof ActionIconGroupSection;
     };
 }> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: ActionIconProps;
@@ -76,7 +80,9 @@ export declare const ActionIcon: (<C = "button">(props: import("../../core").Pol
     vars: ActionIconCssVariables;
     staticComponents: {
         Group: typeof ActionIconGroup;
+        GroupSection: typeof ActionIconGroupSection;
     };
 }> & {
     Group: typeof ActionIconGroup;
+    GroupSection: typeof ActionIconGroupSection;
 };

package/lib/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.d.ts

@@ -0,0 +1,30 @@
+import { BoxProps, ElementProps, Factory, MantineGradient, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
+import type { ActionIconVariant } from '../ActionIcon';
+export type ActionIconGroupSectionStylesNames = 'groupSection';
+export type ActionIconGroupSectionCssVariables = {
+    groupSection: '--section-radius' | '--section-bg' | '--section-color' | '--section-bd' | '--section-height' | '--section-padding-x' | '--section-fz';
+};
+export interface ActionIconGroupSectionProps extends BoxProps, StylesApiProps<ActionIconGroupSectionFactory>, ElementProps<'div'> {
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: MantineRadius;
+    /** Gradient configuration used when `variant="gradient"`, default value is `theme.defaultGradient` */
+    gradient?: MantineGradient;
+    /** Determines whether section 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;
+    /** Controls section `height`, `font-size` and horizontal `padding`, `'sm'` by default */
+    size?: MantineSize | (string & {}) | number;
+}
+export type ActionIconGroupSectionFactory = Factory<{
+    props: ActionIconGroupSectionProps;
+    ref: HTMLDivElement;
+    stylesNames: ActionIconGroupSectionStylesNames;
+    vars: ActionIconGroupSectionCssVariables;
+    variant: ActionIconVariant;
+}>;
+export declare const ActionIconGroupSection: import("../../../core").MantineComponent<{
+    props: ActionIconGroupSectionProps;
+    ref: HTMLDivElement;
+    stylesNames: ActionIconGroupSectionStylesNames;
+    vars: ActionIconGroupSectionCssVariables;
+    variant: ActionIconVariant;
+}>;

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

@@ -1,4 +1,6 @@
 export { ActionIcon } from './ActionIcon';
 export { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';
+export { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';
 export type { ActionIconProps, ActionIconStylesNames, ActionIconFactory, ActionIconCssVariables, ActionIconVariant, } from './ActionIcon';
 export type { ActionIconGroupProps, ActionIconGroupCssVariables, ActionIconGroupStylesNames, ActionIconGroupFactory, } from './ActionIconGroup/ActionIconGroup';
+export type { ActionIconGroupSectionProps, ActionIconGroupSectionCssVariables, ActionIconGroupSectionStylesNames, ActionIconGroupSectionFactory, } from './ActionIconGroupSection/ActionIconGroupSection';

package/lib/components/AngleSlider/AngleSlider.d.ts

@@ -14,6 +14,10 @@ export interface AngleSliderProps extends BoxProps, StylesApiProps<AngleSliderFa
     onChange?: (value: number) => void;
     /** Called after the selection is finished */
     onChangeEnd?: (value: number) => void;
+    /** Called in `onMouseDown` and `onTouchStart` events */
+    onScrubStart?: () => void;
+    /** Called in `onMouseUp` and `onTouchEnd` events */
+    onScrubEnd?: () => void;
     /** Determines whether the label should be displayed inside the slider, `true` by default */
     withLabel?: boolean;
     /** Array of marks that are displayed on the slider */

package/lib/components/Autocomplete/Autocomplete.d.ts

@@ -4,7 +4,7 @@ import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
 export interface AutocompleteProps extends BoxProps, __BaseInputProps, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<AutocompleteFactory>, ElementProps<'input', 'onChange' | 'size'> {
-    /** Data displayed in the dropdown */
+    /** Data displayed in the dropdown. Values must be unique, otherwise an error will be thrown and component will not render. */
     data?: ComboboxStringData;
     /** Controlled component value */
     value?: string;

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

@@ -40,7 +40,7 @@ export declare const Badge: (<C = "div">(props: import("../../core").Polymorphic
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (BadgeProps & {
-    component: React.ElementType /** Controls `font-size`, `height` and horizontal `padding`, `'md'` by default */;
+    component: React.ElementType;
     renderRoot?: (props: Record<string, any>) => any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: BadgeProps;

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

@@ -1,6 +1,7 @@
 import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 import { LoaderProps } from '../Loader';
 import { ButtonGroup } from './ButtonGroup/ButtonGroup';
+import { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
 export type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';
 export type ButtonVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
 export type ButtonCssVariables = {
@@ -44,6 +45,7 @@ export type ButtonFactory = PolymorphicFactory<{
     variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
+        GroupSection: typeof ButtonGroupSection;
     };
 }>;
 export declare const Button: (<C = "button">(props: import("../../core").PolymorphicComponentProps<C, ButtonProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ButtonProps & {
@@ -63,6 +65,7 @@ export declare const Button: (<C = "button">(props: import("../../core").Polymor
     variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
+        GroupSection: typeof ButtonGroupSection;
     };
 }> & import("../../core/factory/factory").ComponentClasses<{
     props: ButtonProps;
@@ -73,6 +76,7 @@ export declare const Button: (<C = "button">(props: import("../../core").Polymor
     variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
+        GroupSection: typeof ButtonGroupSection;
     };
 }> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: ButtonProps;
@@ -83,7 +87,9 @@ export declare const Button: (<C = "button">(props: import("../../core").Polymor
     variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
+        GroupSection: typeof ButtonGroupSection;
     };
 }> & {
     Group: typeof ButtonGroup;
+    GroupSection: typeof ButtonGroupSection;
 };

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

@@ -0,0 +1,30 @@
+import { BoxProps, ElementProps, Factory, MantineGradient, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
+import type { ButtonVariant } from '../Button';
+export type ButtonGroupSectionStylesNames = 'groupSection';
+export type ButtonGroupSectionCssVariables = {
+    groupSection: '--section-radius' | '--section-bg' | '--section-color' | '--section-bd' | '--section-height' | '--section-padding-x' | '--section-fz';
+};
+export interface ButtonGroupSectionProps extends BoxProps, StylesApiProps<ButtonGroupSectionFactory>, ElementProps<'div'> {
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: MantineRadius;
+    /** Gradient configuration used when `variant="gradient"`, default value is `theme.defaultGradient` */
+    gradient?: MantineGradient;
+    /** Determines whether section 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;
+    /** Controls section `height`, `font-size` and horizontal `padding`, `'sm'` by default */
+    size?: MantineSize | `compact-${MantineSize}` | (string & {});
+}
+export type ButtonGroupSectionFactory = Factory<{
+    props: ButtonGroupSectionProps;
+    ref: HTMLDivElement;
+    stylesNames: ButtonGroupSectionStylesNames;
+    vars: ButtonGroupSectionCssVariables;
+    variant: ButtonVariant;
+}>;
+export declare const ButtonGroupSection: import("../../../core").MantineComponent<{
+    props: ButtonGroupSectionProps;
+    ref: HTMLDivElement;
+    stylesNames: ButtonGroupSectionStylesNames;
+    vars: ButtonGroupSectionCssVariables;
+    variant: ButtonVariant;
+}>;

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

@@ -1,4 +1,6 @@
 export { Button } from './Button';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup';
+export { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
 export type { ButtonProps, ButtonStylesNames, ButtonFactory, ButtonCssVariables, ButtonVariant, } from './Button';
 export type { ButtonGroupProps, ButtonGroupCssVariables, ButtonGroupStylesNames, ButtonGroupFactory, } from './ButtonGroup/ButtonGroup';
+export type { ButtonGroupSectionProps, ButtonGroupSectionCssVariables, ButtonGroupSectionStylesNames, ButtonGroupSectionFactory, } from './ButtonGroupSection/ButtonGroupSection';

package/lib/components/Checkbox/CheckboxCard/CheckboxCard.d.ts

@@ -4,8 +4,12 @@ export type CheckboxCardCssVariables = {
     card: '--card-radius';
 };
 export interface CheckboxCardProps extends BoxProps, StylesApiProps<CheckboxCardFactory>, ElementProps<'button', 'onChange'> {
-    /** Checked state */
+    /** Controlled component value */
     checked?: boolean;
+    /** Uncontrolled component default value */
+    defaultChecked?: boolean;
+    /** Called when value changes */
+    onChange?: (checked: boolean) => void;
     /** Determines whether the card should have border, `true` by default */
     withBorder?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */

package/lib/components/Collapse/use-collapse.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from '../../core';
-export declare function getElementHeight(el: React.RefObject<HTMLElement> | {
+export declare function getElementHeight(el: React.RefObject<HTMLElement | null> | {
     current?: {
         scrollHeight: number;
     };

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

@@ -20,7 +20,7 @@ export type ComboboxData = Array<string | ComboboxItem | ComboboxItemGroup> | Re
 export type ComboboxParsedItem = ComboboxItem | ComboboxParsedItemGroup;
 export type ComboboxLikeStylesNames = Exclude<ComboboxStylesNames, 'header' | 'footer' | 'search'>;
 export interface ComboboxLikeProps {
-    /** Data used to generate options */
+    /** Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render. */
     data?: ComboboxData;
     /** Controlled dropdown opened state */
     dropdownOpened?: boolean;

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

@@ -49,7 +49,7 @@ declare const _FileInput: import("../../core").MantineComponent<{
 }>;
 type FileInputComponent = (<Multiple extends boolean = false>(props: FileInputProps<Multiple> & {
     ref?: React.ForwardedRef<HTMLButtonElement>;
-}) => JSX.Element) & {
+}) => React.JSX.Element) & {
     extend: typeof _FileInput.extend;
 };
 export declare const FileInput: FileInputComponent;

package/lib/components/Group/filter-falsy-children/filter-falsy-children.d.ts

@@ -1,2 +1,2 @@
 import { ReactElement, ReactNode } from 'react';
-export declare function filterFalsyChildren(children: ReactNode): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare function filterFalsyChildren(children: ReactNode): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];

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

@@ -8,7 +8,7 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     __stylesApiProps?: Record<string, any>;
     id?: string;
 }
-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" | "mod" | "error" | "description" | "__staticSelector" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
+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" | "mod" | "error" | "description" | "__staticSelector" | "required" | "__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("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;

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

@@ -1,7 +1,7 @@
 import { MantineSize } from '../../core';
 import { InputVariant } from '../Input';
 export interface PillsInputContextValue {
-    fieldRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    fieldRef: React.RefObject<HTMLInputElement | null>;
     size: MantineSize | (string & {});
     disabled: boolean | undefined;
     hasError: boolean | undefined;

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

@@ -9,7 +9,7 @@ interface PopoverContext {
     y: number;
     arrowX: number | undefined;
     arrowY: number | undefined;
-    arrowRef: React.RefObject<HTMLDivElement>;
+    arrowRef: React.RefObject<HTMLDivElement | null>;
     opened: boolean;
     transitionProps?: TransitionOverride;
     reference: (node: HTMLElement) => void;

package/lib/components/Popover/use-popover.d.ts

@@ -12,7 +12,7 @@ interface UsePopoverOptions {
     onOpen?: () => void;
     width: PopoverWidth;
     middlewares: PopoverMiddlewares | undefined;
-    arrowRef: React.RefObject<HTMLDivElement>;
+    arrowRef: React.RefObject<HTMLDivElement | null>;
     arrowOffset: number;
     strategy?: FloatingStrategy;
 }

package/lib/components/Slider/utils/get-step-mark-value/get-step-mark-value.d.ts

@@ -0,0 +1,16 @@
+export declare function getNextMarkValue(currentValue: number, marks: {
+    value: number;
+    label?: React.ReactNode;
+}[]): number;
+export declare function getPreviousMarkValue(currentValue: number, marks: {
+    value: number;
+    label?: React.ReactNode;
+}[]): number;
+export declare function getFirstMarkValue(marks: {
+    value: number;
+    label?: React.ReactNode;
+}[]): number;
+export declare function getLastMarkValue(marks: {
+    value: number;
+    label?: React.ReactNode;
+}[]): number;

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

@@ -21,7 +21,7 @@ export interface StepperStepProps extends BoxProps, CompoundStylesApiProps<Stepp
     /** Step description */
     description?: React.ReactNode | StepFragmentComponent;
     /** Icon wrapper size */
-    iconSize?: number;
+    iconSize?: string | number;
     /** Icon position relative to step body, controlled by Stepper component */
     iconPosition?: 'right' | 'left';
     /** Indicates loading state of the step */

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

@@ -2,6 +2,7 @@ import { BoxProps, ElementProps, Factory, MantineColor, MantineSpacing, StylesAp
 import { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr } from './Table.components';
 import { TableDataRenderer } from './TableDataRenderer';
 import { TableScrollContainer } from './TableScrollContainer';
+export type TableVariant = 'default' | 'vertical';
 export type TableStylesNames = 'table' | 'thead' | 'tbody' | 'tfoot' | 'tr' | 'th' | 'td' | 'caption';
 export type TableCssVariables = {
     table: '--table-layout' | '--table-border-color' | '--table-caption-side' | '--table-horizontal-spacing' | '--table-vertical-spacing' | '--table-striped-color' | '--table-highlight-on-hover-color' | '--table-sticky-header-offset';
@@ -43,12 +44,15 @@ export interface TableProps extends BoxProps, StylesApiProps<TableFactory>, Elem
     stickyHeader?: boolean;
     /** Offset from top at which `Table.Thead` should become sticky, `0` by default */
     stickyHeaderOffset?: number | string;
+    /** Determines whether `font-variant-numeric: tabular-nums` style should be set, `false` by default */
+    tabularNums?: boolean;
 }
 export type TableFactory = Factory<{
     props: TableProps;
     ref: HTMLTableElement;
     stylesNames: TableStylesNames;
     vars: TableCssVariables;
+    variant: TableVariant;
     staticComponents: {
         Thead: typeof TableThead;
         Tbody: typeof TableTbody;
@@ -66,6 +70,7 @@ export declare const Table: import("../../core").MantineComponent<{
     ref: HTMLTableElement;
     stylesNames: TableStylesNames;
     vars: TableCssVariables;
+    variant: TableVariant;
     staticComponents: {
         Thead: typeof TableThead;
         Tbody: typeof TableTbody;

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

@@ -5,7 +5,7 @@ import { __BaseInputProps, __InputStylesNames } 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 */
+    /** Data displayed in the dropdown. Values must be unique, otherwise an error will be thrown and component will not render. */
     data?: ComboboxStringData;
     /** Controlled component value */
     value?: string[];

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

@@ -10,7 +10,7 @@ export declare function useFloatingTooltip<T extends HTMLElement = any>({ offset
     y: number;
     opened: boolean | undefined;
     setOpened: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
-    boundaryRef: import("react").MutableRefObject<T | undefined>;
+    boundaryRef: import("react").RefObject<T | null>;
     floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
 };
 export {};

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

@@ -7,7 +7,7 @@ interface UseTooltip {
     opened?: boolean;
     defaultOpened?: boolean;
     offset: number | FloatingAxesOffsets;
-    arrowRef?: React.RefObject<HTMLDivElement>;
+    arrowRef?: React.RefObject<HTMLDivElement | null>;
     arrowOffset?: number;
     events?: {
         hover: boolean;

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

@@ -13,7 +13,7 @@ export interface TransitionProps {
     /** Determines whether component should be mounted to the DOM */
     mounted: boolean;
     /** Render function with transition styles argument */
-    children: (styles: React.CSSProperties) => JSX.Element;
+    children: (styles: React.CSSProperties) => React.JSX.Element;
     /** Called when exit transition ends */
     onExited?: () => void;
     /** Called when exit transition starts */

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

@@ -43,6 +43,8 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     expandOnClick?: boolean;
     /** Determines whether tree node with children should be expanded on space key press, `true` by default */
     expandOnSpace?: boolean;
+    /** Determines whether tree node should be checked on space key press, `false` by default */
+    checkOnSpace?: boolean;
     /** Determines whether node should be selected on click, `false` by default */
     selectOnClick?: boolean;
     /** Use-tree hook instance that can be used to manipulate component state */

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

@@ -14,8 +14,9 @@ interface TreeNodeProps {
     selectOnClick: boolean | undefined;
     allowRangeSelection: boolean | undefined;
     expandOnSpace: boolean | undefined;
+    checkOnSpace: boolean | undefined;
 }
-export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeNode {
     var displayName: string;
 }

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

@@ -20,3 +20,4 @@ export type { CSSVariablesResolver } from './MantineCssVariables/default-css-var
 export { virtualColor, getCSSColorVariables, isVirtualColor } from './MantineCssVariables';
 export { useMatches } from './use-matches/use-matches';
 export type { MantineStylesTransform } from './Mantine.context';
+export { mantineHtmlProps } from './mantine-html-props';

package/lib/core/MantineProvider/mantine-html-props.d.ts

@@ -0,0 +1,4 @@
+export declare const mantineHtmlProps: {
+    suppressHydrationWarning: boolean;
+    'data-mantine-color-scheme': string;
+};

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

@@ -1,6 +1,6 @@
 type ExtendedProps<Props = {}, OverrideProps = {}> = OverrideProps & Omit<Props, keyof OverrideProps>;
-type ElementType = keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
-type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
+type ElementType = keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>;
+type PropsOf<C extends ElementType> = React.JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
 type ComponentProp<C> = {
     component?: C;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.14.2",
+  "version": "7.15.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "7.14.2",
+    "@mantine/hooks": "7.15.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
@@ -57,6 +57,8 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
-    "@mantine/hooks": "workspace:*"
+    "@mantine/hooks": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/styles/ActionIcon.css

@@ -106,19 +106,19 @@
     flex-direction: row;
   }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child {
         border-end-end-radius: 0;
         border-start-end-radius: 0;
         border-inline-end-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child {
         border-end-start-radius: 0;
         border-start-start-radius: 0;
         border-inline-start-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child) {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-inline-width: calc(var(--ai-border-width) / 2);
       }
@@ -127,19 +127,19 @@
     flex-direction: column;
   }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         border-bottom-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
         border-top-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child) {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-bottom-width: calc(var(--ai-border-width) / 2);
         border-top-width: calc(var(--ai-border-width) / 2);
@@ -155,3 +155,42 @@
   width: 100%;
   height: 100%;
 }
+
+.m_437b6484 {
+  --section-height-xs: 18px;
+  --section-height-sm: 22px;
+  --section-height-md: 28px;
+  --section-height-lg: 34px;
+  --section-height-xl: 44px;
+
+  --section-height-input-xs: 30px;
+  --section-height-input-sm: 36px;
+  --section-height-input-md: 42px;
+  --section-height-input-lg: 50px;
+  --section-height-input-xl: 60px;
+
+  --section-padding-x-xs: 6px;
+  --section-padding-x-sm: 8px;
+  --section-padding-x-md: 10px;
+  --section-padding-x-lg: 12px;
+  --section-padding-x-xl: 16px;
+
+  --section-height: var(--section-height-sm);
+  --section-padding-x: var(--section-padding-x-sm);
+  --section-color: var(--mantine-color-white);
+
+  font-weight: 600;
+  width: auto;
+  border-radius: var(--section-radius, var(--mantine-radius-default));
+  font-size: var(--section-fz, var(--mantine-font-size-sm));
+  background: var(--section-bg, var(--mantine-primary-color-filled));
+  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
+  color: var(--section-color, var(--mantine-color-white));
+  height: var(--section-height, var(--section-height-sm));
+  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}