@mantine/core 7.0.0-beta.2 → 7.0.0-beta.4

package/lib/components/Modal/ModalTitle.d.ts

@@ -1,7 +1,7 @@
-import { StylesApiProps, Factory } from '../../core';
+import { CompoundStylesApiProps, Factory } from '../../core';
 import { ModalBaseTitleProps } from '../ModalBase';
 export type ModalTitleStylesNames = 'title';
-export interface ModalTitleProps extends ModalBaseTitleProps, StylesApiProps<ModalTitleFactory> {
+export interface ModalTitleProps extends ModalBaseTitleProps, CompoundStylesApiProps<ModalTitleFactory> {
 }
 export type ModalTitleFactory = Factory<{
     props: ModalTitleProps;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TransitionOverride } from '../Transition';
 interface ModalBaseContextValue {
+    unstyled: boolean | undefined;
     titleMounted: boolean;
     bodyMounted: boolean;
     setTitleMounted(value: boolean): void;

package/lib/components/ModalBase/ModalBase.d.ts

@@ -3,6 +3,7 @@ import { BoxProps, ElementProps, MantineShadow, MantineSize, MantineSpacing } fr
 import { PortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
 export interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {
+    unstyled?: boolean;
     /** If set modal/drawer will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead, `false` by default */
     keepMounted?: boolean;
     /** Determines whether modal/drawer is opened */
@@ -32,9 +33,9 @@ export interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {
     /** `z-index` CSS property of the root element, `200` by default */
     zIndex?: string | number;
     /** Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by default */
-    shadow?: MantineShadow | (string & {});
+    shadow?: MantineShadow;
     /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding, `'md'` by default */
-    padding?: MantineSpacing | (string & {}) | number;
+    padding?: MantineSpacing;
     /** Controls width of the content area, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
 }

package/lib/components/ModalBase/ModalBaseContent.d.ts

@@ -5,9 +5,9 @@ export interface ModalBaseContentProps extends BoxProps, ElementProps<'div'> {
     /** Props passed down to the `Transition` component */
     transitionProps?: TransitionOverride;
     /** Key of `theme.shadows` or any valid CSS value to set `box-shadow`, `none` by default */
-    shadow?: MantineShadow | (string & {});
+    shadow?: MantineShadow;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default */
-    radius?: MantineRadius | number | (string & {});
+    radius?: MantineRadius;
 }
 interface _ModalBaseContentProps extends ModalBaseContentProps {
     innerProps: React.ComponentPropsWithoutRef<'div'>;

package/lib/components/Notification/Notification.d.ts

@@ -11,7 +11,7 @@ export interface NotificationProps extends BoxProps, StylesApiProps<Notification
     /** Controls notification line or icon color, key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Notification icon, replaces color line */
     icon?: React.ReactNode;
     /** Notification title, displayed before body */

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

@@ -16,7 +16,7 @@ export interface OverlayProps extends BoxProps, StylesApiProps<OverlayFactory> {
     /** Overlay z-index, `200` by default */
     zIndex?: string | number;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, `0` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Content inside overlay */
     children?: React.ReactNode;
     /** Determines whether content inside overlay should be vertically and horizontally centered, `false` by default */

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

@@ -1,6 +1,6 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type PaginationControlStylesNames = 'control';
-export interface PaginationControlProps extends BoxProps, StylesApiProps<PaginationControlFactory>, ElementProps<'button'> {
+export interface PaginationControlProps extends BoxProps, CompoundStylesApiProps<PaginationControlFactory>, ElementProps<'button'> {
     /** Determines whether control should have active styles */
     active?: boolean;
     /** Determines whether control should have padding, true by default */

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 import { PaginationIconProps } from '../Pagination.icons';
 export type PaginationDotsStylesNames = 'dots';
-export interface PaginationDotsProps extends BoxProps, StylesApiProps<PaginationDotsFactory>, ElementProps<'div'> {
+export interface PaginationDotsProps extends BoxProps, CompoundStylesApiProps<PaginationDotsFactory>, ElementProps<'div'> {
     /** Custom dots icon component, must accept svg element props and size prop */
     icon?: React.FC<PaginationIconProps>;
 }

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

@@ -23,7 +23,7 @@ export interface PaginationRootProps extends BoxProps, StylesApiProps<Pagination
     /** Key of `theme.colors`, active item color, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Called when next page control is clicked */
     onNextPage?(): void;
     /** Called when previous page control is clicked */

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

@@ -6,9 +6,9 @@ export type PaperCssVariables = {
 };
 export interface PaperBaseProps {
     /** Key of `theme.shadows` or any valid CSS value to set `box-shadow`, `none` by default */
-    shadow?: MantineShadow | (string & {});
+    shadow?: MantineShadow;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default */
-    radius?: MantineRadius | number | (string & {});
+    radius?: MantineRadius;
     /** Determines whether the paper should have border, border color depends on color scheme, `false` by default */
     withBorder?: boolean;
 }
@@ -23,7 +23,7 @@ export type PaperFactory = PolymorphicFactory<{
 }>;
 export declare const Paper: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaperProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaperProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof PaperProps> & {
+} & Omit<Omit<any, "ref">, keyof PaperProps | "component"> & {
     ref?: any;
 }) | (PaperProps & {
     component: React.ElementType<any>;

package/lib/components/Pill/Pill.d.ts

@@ -16,7 +16,7 @@ export interface PillProps extends BoxProps, StylesApiProps<PillFactory>, Elemen
     /** Props passed down to the remove button */
     removeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
     /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `'xl'` by default. */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden */
     disabled?: boolean;
 }

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

@@ -10,9 +10,9 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     /** Hidden input form attribute */
     form?: string;
     /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem, `'md'` by default */
-    gap?: MantineSpacing | (string & {}) | number;
+    gap?: MantineSpacing;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Controls inputs `width` and `height`, `'sm'` by default */
     size?: MantineSize;
     /** If set, the first input is focused when component is mounted, `false` by default */

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

@@ -27,8 +27,8 @@ interface PopoverContext {
     portalProps?: Omit<PortalProps, 'children'>;
     closeOnEscape: boolean | undefined;
     zIndex: string | number | undefined;
-    radius?: MantineRadius | (string & {}) | number | undefined;
-    shadow?: MantineShadow | (string & {}) | undefined;
+    radius?: MantineRadius | undefined;
+    shadow?: MantineShadow | undefined;
     onClose?(): void;
     getDropdownId(): string;
     getTargetId(): string;

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

@@ -46,9 +46,9 @@ export interface __PopoverProps {
     /** Dropdown `z-index`, `300` by default */
     zIndex?: string | number;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */
-    shadow?: MantineShadow | (string & {});
+    shadow?: MantineShadow;
     /** If set, popover dropdown will not be rendered */
     disabled?: boolean;
     /** Determines whether focus should be automatically returned to control when dropdown closes, `false` by default */

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

@@ -1,6 +1,6 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 import type { PopoverStylesNames } from '../Popover';
-export interface PopoverDropdownProps extends BoxProps, StylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {
+export interface PopoverDropdownProps extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {
 }
 export type PopoverDropdownFactory = Factory<{
     props: PopoverDropdownProps;

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

@@ -1,6 +1,6 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type ProgressLabelStylesNames = 'label';
-export interface ProgressLabelProps extends BoxProps, StylesApiProps<ProgressLabelFactory>, ElementProps<'div'> {
+export interface ProgressLabelProps extends BoxProps, CompoundStylesApiProps<ProgressLabelFactory>, ElementProps<'div'> {
 }
 export type ProgressLabelFactory = Factory<{
     props: ProgressLabelProps;

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

@@ -7,7 +7,7 @@ export interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {
     /** Controls track height, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
 }
 export interface ProgressRootProps extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {
 }

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

@@ -1,6 +1,6 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
 export type ProgressSectionStylesNames = 'section';
-export interface ProgressSectionProps extends BoxProps, StylesApiProps<ProgressSectionFactory>, ElementProps<'div'> {
+export interface ProgressSectionProps extends BoxProps, CompoundStylesApiProps<ProgressSectionFactory>, ElementProps<'div'> {
     /** Value of the section in 0–100 range  */
     value: number;
     /** Determines whether `aria-*` props should be added to the root element, `true` by default */

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

@@ -25,7 +25,7 @@ export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, Elem
     /** Error displayed below the label */
     error?: React.ReactNode;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
 }
 export type RadioFactory = Factory<{
     props: RadioProps;

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

@@ -29,7 +29,7 @@ export interface SegmentedControlProps extends BoxProps, StylesApiProps<Segmente
     /** Controls `font-size`, `padding` and `height` properties, `'sm'` by default */
     size?: MantineSize | (string & {});
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Indicator `transition-duration` in ms, set `0` to turn off transitions, `200` by default */
     transitionDuration?: number;
     /** Indicator `transition-timing-function` property, `ease` by default */

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

@@ -18,6 +18,14 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     checkIconPosition?: 'left' | 'right';
     /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */
     nothingFoundMessage?: React.ReactNode;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Default search value */
+    defaultSearchValue?: string;
+    /** Called when search changes */
+    onSearchChange?(value: string): void;
+    /** Determines whether it should be possible to deselect value by clicking on the selected option, `true` by default */
+    allowDeselect?: boolean;
 }
 export type SelectFactory = Factory<{
     props: SelectProps;

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

@@ -4,9 +4,9 @@ export interface SimpleGridProps extends BoxProps, StylesApiProps<SimpleGridFact
     /** Number of columns, `1` by default */
     cols?: StyleProp<number>;
     /** Spacing between columns, `'md'` by default */
-    spacing?: StyleProp<MantineSpacing | (string & {}) | number>;
+    spacing?: StyleProp<MantineSpacing>;
     /** Spacing between rows, `'md'` by default */
-    verticalSpacing?: StyleProp<MantineSpacing | (string & {}) | number>;
+    verticalSpacing?: StyleProp<MantineSpacing>;
 }
 export type SimpleGridFactory = Factory<{
     props: SimpleGridProps;

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

@@ -7,7 +7,7 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Controls size of the track, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
     /** Minimal possible value, `0` by default */

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

@@ -6,7 +6,7 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Controls size of the track, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
     /** Minimal possible value, `0` by default */

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

@@ -7,6 +7,6 @@ export interface SliderRootProps extends BoxProps, ElementProps<'div'> {
     disabled: boolean | undefined;
     variant?: string;
     thumbSize: string | number | undefined;
-    radius: MantineRadius | (string & {}) | number | undefined;
+    radius: MantineRadius | undefined;
 }
 export declare const SliderRoot: React.ForwardRefExoticComponent<SliderRootProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -6,7 +6,7 @@ export type StackCssVariables = {
 };
 export interface StackProps extends BoxProps, StylesApiProps<StackFactory>, ElementProps<'div'> {
     /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem, `'md'` by default */
-    gap?: MantineSpacing | (string & {}) | number;
+    gap?: MantineSpacing;
     /** Controls `align-items` CSS property, `'stretch'` by default */
     align?: React.CSSProperties['alignItems'];
     /** Controls `justify-content` CSS property, `'flex-start'` by default */

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

@@ -27,7 +27,7 @@ export interface StepperProps extends BoxProps, StylesApiProps<StepperFactory>,
     /** Controls size of the step icon, by default icon size is inferred from `size` prop */
     iconSize?: number | string;
     /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content */
-    contentPadding?: MantineSpacing | (string & {}) | number;
+    contentPadding?: MantineSpacing;
     /** Stepper orientation, `'horizontal'` by default */
     orientation?: 'vertical' | 'horizontal';
     /** Icon position relative to the step body, `'left'` by default */
@@ -35,7 +35,7 @@ export interface StepperProps extends BoxProps, StylesApiProps<StepperFactory>,
     /** Controls size of various Stepper elements */
     size?: MantineSize;
     /** Key of `theme.radius` or any valid CSS value to set steps border-radius, `"xl"` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Determines whether next steps can be selected, `true` by default **/
     allowNextStepsSelect?: boolean;
     /** Determines whether steps should wrap to the next line if no space is available, `true` by default */

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
 import type { StepFragmentComponent } from '../Stepper';
 export type StepperStepStylesNames = 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepBody' | 'stepLabel' | 'stepDescription';
-export interface StepperStepProps extends BoxProps, StylesApiProps<StepperStepFactory>, ElementProps<'button'> {
+export interface StepperStepProps extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {
     /** Step index, controlled by Stepper component **/
     step?: number;
     /** Step state, controlled by Stepper component */

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

@@ -20,7 +20,7 @@ export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, El
     /** Controls size of all elements */
     size?: MantineSize | (string & {});
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Props passed down to the wrapper element */
     wrapperProps?: Record<string, any>;
     /** Icon inside the thumb of switch */

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

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

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

@@ -20,9 +20,9 @@ export interface TableProps extends BoxProps, StylesApiProps<TableFactory>, Elem
     /** Determines whether the table should have borders between rows, `true` by default */
     withRowBorders?: boolean;
     /** Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem, default value is `xs` */
-    horizontalSpacing?: MantineSpacing | number | (string & {});
+    horizontalSpacing?: MantineSpacing;
     /** Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem, default value is `xs` */
-    verticalSpacing?: MantineSpacing | number | (string & {});
+    verticalSpacing?: MantineSpacing;
     /** Determines whether every odd/even row background should be changed to `strippedColor`, if set to `true`, then `odd` value will be used, `false` by default  */
     striped?: boolean | 'odd' | 'even';
     /** Background color of striped rows, key of `theme.colors` or any valid CSS color */

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

@@ -32,7 +32,7 @@ export interface TabsProps extends BoxProps, StylesApiProps<TabsFactory>, Elemen
     /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
-    radius?: MantineRadius | number | (string & {});
+    radius?: MantineRadius;
     /** Determines whether tabs should have inverted styles, `false` by default */
     inverted?: boolean;
     /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active, `true` by default */

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps, ElementProps, StylesApiProps, Factory } from '../../../core';
+import { BoxProps, ElementProps, CompoundStylesApiProps, Factory } from '../../../core';
 export type TabsListStylesNames = 'list';
-export interface TabsListProps extends BoxProps, StylesApiProps<TabsListFactory>, ElementProps<'div'> {
+export interface TabsListProps extends BoxProps, CompoundStylesApiProps<TabsListFactory>, ElementProps<'div'> {
     /** `Tabs.Tab` components */
     children: React.ReactNode;
     /** Determines whether tabs should take all available space, `false` by default */

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps, ElementProps, StylesApiProps, Factory } from '../../../core';
+import { BoxProps, ElementProps, CompoundStylesApiProps, Factory } from '../../../core';
 export type TabsPanelStylesNames = 'panel';
-export interface TabsPanelProps extends BoxProps, StylesApiProps<TabsPanelFactory>, ElementProps<'div'> {
+export interface TabsPanelProps extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {
     /** Panel content */
     children: React.ReactNode;
     /** Value of associated control */

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ElementProps, MantineColor, StylesApiProps, Factory } from '../../../core';
+import { ElementProps, MantineColor, CompoundStylesApiProps, Factory } from '../../../core';
 import { UnstyledButtonProps } from '../../UnstyledButton';
 export type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';
-export interface TabsTabProps extends Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>, StylesApiProps<TabsTabFactory>, ElementProps<'button'> {
+export interface TabsTabProps extends Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>, CompoundStylesApiProps<TabsTabFactory>, ElementProps<'button'> {
     /** Value of associated panel */
     value: string;
     /** Tab label */

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

@@ -11,7 +11,7 @@ export interface ThemeIconProps extends BoxProps, StylesApiProps<ThemeIconFactor
     /** Key of `theme.colors` or any valid CSS color. Default value is `theme.primaryColor`.  */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `theme.defaultRadius` by default. */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Gradient data used when `variant="gradient"`, default value is `theme.defaultGradient` */
     gradient?: MantineGradient;
     /** Icon displayed inside the component */

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

@@ -13,7 +13,7 @@ export interface TimelineProps extends BoxProps, StylesApiProps<TimelineFactory>
     /** Key of `theme.colors` or any valid CSS color to control active item colors, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Controls size of the bullet, `20` by default */
     bulletSize?: number | string;
     /** Controls how the content is positioned relative to the bullet, `'left'` by default */

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineRadius, MantineColor } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineRadius, MantineColor } from '../../../core';
 export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle';
-export interface TimelineItemProps extends BoxProps, StylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {
+export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {
     /** Determines whether the item should be highlighted, controlled by the parent `Timeline` component  */
     __active?: boolean;
     /** Determines whether the line of the item should be highlighted, controlled by the parent Timeline component */
@@ -15,7 +15,7 @@ export interface TimelineItemProps extends BoxProps, StylesApiProps<TimelineItem
     /** 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, `'xl'` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color to control active item colors, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Controls line border style, `'solid'` by default */

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

@@ -19,7 +19,7 @@ export interface TooltipBaseProps extends BoxProps, StylesApiProps<TooltipFactor
     /** 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, `theme.defaultRadius` by default */
-    radius?: MantineRadius | (string & {}) | number;
+    radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme */
     color?: MantineColor;
     /** Determines whether content should be wrapped on to the next line, `false` by default */

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

@@ -1,22 +1,21 @@
 /// <reference types="react" />
 import type { MantineBreakpoint, MantineSpacing, MantineFontSize, MantineLineHeight, MantineColor } from '../../MantineProvider';
 export type StyleProp<Value> = Value | Partial<Record<MantineBreakpoint | (string & {}), Value>>;
-export type StylePropSpacingValue = MantineSpacing | number | (string & {});
 export interface MantineStyleProps {
-    m?: StyleProp<StylePropSpacingValue>;
-    my?: StyleProp<StylePropSpacingValue>;
-    mx?: StyleProp<StylePropSpacingValue>;
-    mt?: StyleProp<StylePropSpacingValue>;
-    mb?: StyleProp<StylePropSpacingValue>;
-    ml?: StyleProp<StylePropSpacingValue>;
-    mr?: StyleProp<StylePropSpacingValue>;
-    p?: StyleProp<StylePropSpacingValue>;
-    py?: StyleProp<StylePropSpacingValue>;
-    px?: StyleProp<StylePropSpacingValue>;
-    pt?: StyleProp<StylePropSpacingValue>;
-    pb?: StyleProp<StylePropSpacingValue>;
-    pl?: StyleProp<StylePropSpacingValue>;
-    pr?: StyleProp<StylePropSpacingValue>;
+    m?: StyleProp<MantineSpacing>;
+    my?: StyleProp<MantineSpacing>;
+    mx?: StyleProp<MantineSpacing>;
+    mt?: StyleProp<MantineSpacing>;
+    mb?: StyleProp<MantineSpacing>;
+    ml?: StyleProp<MantineSpacing>;
+    mr?: StyleProp<MantineSpacing>;
+    p?: StyleProp<MantineSpacing>;
+    py?: StyleProp<MantineSpacing>;
+    px?: StyleProp<MantineSpacing>;
+    pt?: StyleProp<MantineSpacing>;
+    pb?: StyleProp<MantineSpacing>;
+    pl?: StyleProp<MantineSpacing>;
+    pr?: StyleProp<MantineSpacing>;
     bg?: StyleProp<MantineColor>;
     c?: StyleProp<MantineColor>;
     opacity?: StyleProp<React.CSSProperties['opacity']>;

package/lib/core/MantineProvider/theme.types.d.ts

@@ -60,7 +60,7 @@ export interface MantineTheme {
     /** Object of values that are used to set `border-radius` in all components that support it */
     radius: MantineRadiusValues;
     /** Key of `theme.radius` or any valid CSS value. Default `border-radius` used by most components */
-    defaultRadius: MantineRadius | number | (string & {});
+    defaultRadius: MantineRadius;
     /** Object of values that are used to set various CSS properties that control spacing between elements */
     spacing: MantineSpacingValues;
     /** Object of values that are used to control `font-size` property in all components */
@@ -117,9 +117,9 @@ export type MantineShadowsValues = Record<MantineSize, string>;
 export type MantineLineHeightValues = Record<MantineSize, string>;
 export type MantineBreakpoint = keyof MantineBreakpointsValues;
 export type MantineFontSize = keyof MantineFontSizesValues;
-export type MantineRadius = keyof MantineRadiusValues;
-export type MantineSpacing = keyof MantineSpacingValues;
-export type MantineShadow = keyof MantineShadowsValues;
+export type MantineRadius = keyof MantineRadiusValues | (string & {}) | number;
+export type MantineSpacing = keyof MantineSpacingValues | (string & {}) | number;
+export type MantineShadow = keyof MantineShadowsValues | (string & {});
 export type MantineLineHeight = keyof MantineLineHeightValues;
 export type MantineThemeOther = Record<string, any>;
 export interface MantineGradient {

package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts

@@ -1,2 +1,2 @@
 import { UseMediaQueryOptions } from '@mantine/hooks';
-export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "light" | "dark";
+export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "dark" | "light";

package/lib/core/styles-api/styles-api.types.d.ts

@@ -19,7 +19,7 @@ export interface GetStylesApiOptions {
     variant?: string;
     props?: Record<string, any>;
 }
-export type StylesApiRecord<Payload extends FactoryPayload, DataType> = Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> | ((theme: MantineTheme, props: Payload['props'], ctx: Payload['ctx']) => StylesRecord<Payload['stylesNames'], DataType>) : never;
+export type StylesApiRecord<Payload extends FactoryPayload, DataType> = Payload['compound'] extends true ? Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> : never : Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> | ((theme: MantineTheme, props: Payload['props'], ctx: Payload['ctx']) => StylesRecord<Payload['stylesNames'], DataType>) : never;
 export type Styles<Payload extends FactoryPayload> = StylesApiRecord<Payload, CSSProperties>;
 export type ClassNames<Payload extends FactoryPayload> = StylesApiRecord<Payload, string>;
 export type ClassNamesArray<Payload extends FactoryPayload> = (StylesApiRecord<Payload, string> | undefined)[];
@@ -31,3 +31,5 @@ export interface StylesApiProps<Payload extends FactoryPayload> {
     styles?: Styles<Payload>;
     vars?: PartialVarsResolver<Payload>;
 }
+export interface CompoundStylesApiProps<Payload extends FactoryPayload> extends Omit<StylesApiProps<Payload>, 'unstyled'> {
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.4",
   "types": "./lib/index.d.ts",
   "module": "./esm/index.js",
   "exports": {
@@ -36,7 +36,7 @@
     "design"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "7.0.0-beta.2",
+    "@mantine/hooks": "7.0.0-beta.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -45,7 +45,7 @@
     "clsx": "2.0.0",
     "react-textarea-autosize": "8.5.2",
     "react-remove-scroll": "^2.5.6",
-    "type-fest": "^4.0.0",
+    "type-fest": "^3.13.1",
     "react-number-format": "^5.2.2"
   },
   "devDependencies": {}