@mantine/core 7.7.2 → 7.8.1-alpha.0

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type TabsListStylesNames = 'list';
 export interface TabsListProps extends BoxProps, CompoundStylesApiProps<TabsListFactory>, ElementProps<'div'> {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type TabsPanelStylesNames = 'panel';
 export interface TabsPanelProps extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
 import { UnstyledButtonProps } from '../../UnstyledButton';
 export type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
@@ -12,11 +11,11 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     value?: string[];
     /** Default value for uncontrolled component */
     defaultValue?: string[];
-    /** Called whe value changes */
+    /** Called when value changes */
     onChange?: (value: string[]) => void;
     /** Called when tag is removed */
     onRemove?: (value: string) => void;
-    /** Called whe the clear button is clicked */
+    /** Called when the clear button is clicked */
     onClear?: () => void;
     /** Controlled search value */
     searchValue?: string;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, MantineColor, MantineGradient, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 type TextTruncate = 'end' | 'start' | boolean;
 export type TextStylesNames = 'root';
@@ -33,13 +32,13 @@ export type TextFactory = PolymorphicFactory<{
     vars: TextCssVariables;
     variant: TextVariant;
 }>;
-export declare const Text: (<C = "p">(props: import("../../core").PolymorphicComponentProps<C, TextProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(TextProps & {
+export declare const Text: (<C = "p">(props: import("../../core").PolymorphicComponentProps<C, TextProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(TextProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof TextProps> & {
     ref?: any;
     renderRoot?: ((props: any) => any) | undefined;
 }) | (TextProps & {
-    component: React.ElementType<any>;
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: TextProps;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __BaseInputProps, __InputStylesNames } from '../Input';
 export interface TextareaProps extends BoxProps, __BaseInputProps, StylesApiProps<TextareaFactory>, ElementProps<'textarea', 'size'> {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, ElementProps, Factory, MantineColor, MantineGradient, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 export type ThemeIconStylesNames = 'root';
 export type ThemeIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'default' | 'gradient';

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

@@ -6,5 +6,5 @@ interface TimelineContextValue {
 export declare const TimelineProvider: ({ children, value }: {
     value: TimelineContextValue;
     children: import("react").ReactNode;
-}) => import("react").JSX.Element, useTimelineContext: () => TimelineContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useTimelineContext: () => TimelineContextValue;
 export {};

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 import { TimelineItem, TimelineItemStylesNames } from './TimelineItem/TimelineItem';
 export type TimelineStylesNames = 'root' | TimelineItemStylesNames;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../../core';
 export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle';
 export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
 export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'];

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface TooltipGroupProps {
     /** <Tooltip /> components */
     children: React.ReactNode;
@@ -7,7 +6,7 @@ export interface TooltipGroupProps {
     /** Close delay in ms */
     closeDelay?: number;
 }
-export declare function TooltipGroup(props: TooltipGroupProps): React.JSX.Element;
+export declare function TooltipGroup(props: TooltipGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TooltipGroup {
     var displayName: string;
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MantineTransition } from './transitions';
 export interface TransitionProps {
     /** If set element will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead */
@@ -25,7 +24,7 @@ export interface TransitionProps {
     onEntered?: () => void;
 }
 export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
-export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, }: TransitionProps): React.JSX.Element | null;
+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 namespace Transition {
     var displayName: string;
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface MantineTransitionStyles {
     common?: React.CSSProperties;
     in: React.CSSProperties;

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

@@ -0,0 +1,57 @@
+import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
+import { TreeController } from './use-tree';
+export interface TreeNodeData {
+    label: React.ReactNode;
+    value: string;
+    nodeProps?: Record<string, any>;
+    children?: TreeNodeData[];
+}
+export interface RenderNodePayload {
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    node: TreeNodeData;
+    elementProps: {
+        className: string;
+        style: React.CSSProperties;
+        onClick: (event: React.MouseEvent) => void;
+        'data-selected': boolean | undefined;
+        'data-value': string;
+    };
+}
+export type RenderNode = (payload: RenderNodePayload) => React.ReactNode;
+export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
+export type TreeCssVariables = {
+    root: '--level-offset';
+};
+export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {
+    /** Data used to render nodes */
+    data: TreeNodeData[];
+    /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value, `'lg'` by default */
+    levelOffset?: MantineSpacing;
+    /** Determines whether tree node with children should be expanded on click, `true` by default */
+    expandOnClick?: 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 */
+    tree: TreeController;
+    /** A function to render tree node label */
+    renderNode?: RenderNode;
+    /** Determines whether selection should be cleared when user clicks outside of the tree, `false` by default */
+    clearSelectionOnOutsideClick?: boolean;
+    /** Determines whether tree nodes range can be selected with click when `Shift` key is pressed, `true` by default */
+    allowRangeSelection?: boolean;
+}
+export type TreeFactory = Factory<{
+    props: TreeProps;
+    ref: HTMLUListElement;
+    stylesNames: TreeStylesNames;
+    vars: TreeCssVariables;
+}>;
+export declare const Tree: import("../../core").MantineComponent<{
+    props: TreeProps;
+    ref: HTMLUListElement;
+    stylesNames: TreeStylesNames;
+    vars: TreeCssVariables;
+}>;

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

@@ -0,0 +1,21 @@
+import { GetStylesApi } from '../../core';
+import type { RenderNode, TreeFactory, TreeNodeData } from './Tree';
+import type { TreeController } from './use-tree';
+interface TreeNodeProps {
+    node: TreeNodeData;
+    getStyles: GetStylesApi<TreeFactory>;
+    rootIndex: number | undefined;
+    controller: TreeController;
+    expandOnClick: boolean | undefined;
+    flatValues: string[];
+    isSubtree?: boolean;
+    level?: number;
+    renderNode: RenderNode | undefined;
+    selectOnClick: boolean | undefined;
+    allowRangeSelection: boolean | undefined;
+}
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeNode {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,4 @@
+export { Tree } from './Tree';
+export { useTree } from './use-tree';
+export type { TreeCssVariables, TreeFactory, TreeProps, TreeStylesNames, TreeNodeData, } from './Tree';
+export type { UseTreeInput } from './use-tree';

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

@@ -0,0 +1,26 @@
+import type { TreeNodeData } from './Tree';
+export type TreeExpandedState = Record<string, boolean>;
+export interface UseTreeInput {
+    initialExpandedState?: TreeExpandedState;
+    initialSelectedState?: string[];
+    multiple?: boolean;
+}
+export declare function useTree({ initialSelectedState, initialExpandedState, multiple, }?: UseTreeInput): {
+    multiple: boolean;
+    expandedState: TreeExpandedState;
+    selectedState: string[];
+    anchorNode: string | null;
+    initialize: (data: TreeNodeData[]) => void;
+    toggleExpanded: (value: string) => void;
+    collapse: (value: string) => void;
+    expand: (value: string) => void;
+    expandAllNodes: () => void;
+    collapseAllNodes: () => void;
+    setExpandedState: import("react").Dispatch<import("react").SetStateAction<TreeExpandedState>>;
+    toggleSelected: (value: string) => void;
+    select: (value: string) => void;
+    deselect: (value: string) => void;
+    clearSelected: () => void;
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};
+export type TreeController = ReturnType<typeof useTree>;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxComponentProps, PolymorphicFactory, StylesApiProps } from '../../core';
 export type UnstyledButtonStylesNames = 'root';
 export interface UnstyledButtonProps extends Omit<BoxComponentProps, 'vars' | 'variant'>, StylesApiProps<UnstyledButtonFactory> {
@@ -10,13 +9,13 @@ export type UnstyledButtonFactory = PolymorphicFactory<{
     defaultComponent: 'button';
     defaultRef: HTMLButtonElement;
 }>;
-export declare const UnstyledButton: (<C = "button">(props: import("../../core").PolymorphicComponentProps<C, UnstyledButtonProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(UnstyledButtonProps & {
+export declare const UnstyledButton: (<C = "button">(props: import("../../core").PolymorphicComponentProps<C, UnstyledButtonProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(UnstyledButtonProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof UnstyledButtonProps> & {
     ref?: any;
     renderRoot?: ((props: any) => any) | undefined;
 }) | (UnstyledButtonProps & {
-    component: React.ElementType<any>;
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: UnstyledButtonProps;

package/lib/components/index.d.ts

@@ -96,4 +96,5 @@ export * from './Timeline';
 export * from './Title';
 export * from './Tooltip';
 export * from './Transition';
+export * from './Tree';
 export * from './TypographyStylesProvider';

package/lib/core/Box/Box.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MantineBreakpoint } from '../MantineProvider';
 import type { CssVarsProp, MantineStyleProp } from './Box.types';
 import { MantineStyleProps } from './style-props';
@@ -29,12 +28,12 @@ export interface BoxComponentProps extends BoxProps {
     /** Size passed from parent component, sets `data-size` if value is not number like */
     size?: string | number;
 }
-export declare const Box: (<C = "div">(props: import("../factory").PolymorphicComponentProps<C, BoxComponentProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(BoxComponentProps & {
+export declare const Box: (<C = "div">(props: import("../factory").PolymorphicComponentProps<C, BoxComponentProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(BoxComponentProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof BoxComponentProps> & {
     ref?: any;
     renderRoot?: ((props: any) => any) | undefined;
 }) | (BoxComponentProps & {
-    component: React.ElementType<any>;
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & Record<string, never>;

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

@@ -1,5 +1,7 @@
 import type { MantineStyleProps } from '../style-props.types';
 export declare function extractStyleProps<T extends Record<string, any>>(others: MantineStyleProps & T): {
-    styleProps: MantineStyleProps;
+    styleProps: MantineStyleProps & {
+        sx?: any;
+    };
     rest: T;
 };

package/lib/core/DirectionProvider/DirectionProvider.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type Direction = 'ltr' | 'rtl';
 export interface DirectionContextValue {
     dir: Direction;
     toggleDirection: () => void;
     setDirection: (dir: Direction) => void;
 }
-export declare const DirectionContext: React.Context<DirectionContextValue>;
+export declare const DirectionContext: import("react").Context<DirectionContextValue>;
 export declare function useDirection(): DirectionContextValue;
 export interface DirectionProviderProps {
     /** Your application */
@@ -15,4 +14,4 @@ export interface DirectionProviderProps {
     /** Determines whether direction should be updated on mount based on `dir` attribute set on root element (usually html element), `true` by default  */
     detectDirection?: boolean;
 }
-export declare function DirectionProvider({ children, initialDirection, detectDirection, }: DirectionProviderProps): React.JSX.Element;
+export declare function DirectionProvider({ children, initialDirection, detectDirection, }: DirectionProviderProps): import("react/jsx-runtime").JSX.Element;

package/lib/core/InlineStyles/InlineStyles.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import { InlineStylesInput } from './styles-to-string/styles-to-string';
 export interface InlineStylesProps extends InlineStylesInput, Omit<React.ComponentPropsWithoutRef<'style'>, keyof InlineStylesInput> {
 }
-export declare function InlineStyles({ selector, styles, media }: InlineStylesInput): React.JSX.Element;
+export declare function InlineStyles({ selector, styles, media }: InlineStylesInput): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { MantineColorScheme } from '../theme.types';
 export interface ColorSchemeScriptProps extends React.ComponentPropsWithoutRef<'script'> {
     forceColorScheme?: 'light' | 'dark';
     defaultColorScheme?: MantineColorScheme;
     localStorageKey?: string;
 }
-export declare function ColorSchemeScript({ defaultColorScheme, localStorageKey, forceColorScheme, ...others }: ColorSchemeScriptProps): React.JSX.Element;
+export declare function ColorSchemeScript({ defaultColorScheme, localStorageKey, forceColorScheme, ...others }: ColorSchemeScriptProps): import("react/jsx-runtime").JSX.Element;

package/lib/core/MantineProvider/Mantine.context.d.ts

@@ -1,5 +1,9 @@
 import { ConvertCSSVariablesInput } from './convert-css-variables';
 import type { MantineColorScheme, MantineTheme } from './theme.types';
+export interface MantineStylesTransform {
+    sx?: (sx: any) => string;
+    styles?: (styles: any, payload: any) => Record<string, string>;
+}
 interface MantineContextValue {
     colorScheme: MantineColorScheme;
     setColorScheme: (colorScheme: MantineColorScheme) => void;
@@ -11,6 +15,7 @@ interface MantineContextValue {
     cssVariablesSelector: string;
     withStaticClasses: boolean;
     headless?: boolean;
+    stylesTransform?: MantineStylesTransform;
 }
 export declare const MantineContext: import("react").Context<MantineContextValue | null>;
 export declare function useMantineContext(): MantineContextValue;
@@ -19,4 +24,6 @@ export declare function useMantineClassNamesPrefix(): string;
 export declare function useMantineStyleNonce(): (() => string | undefined) | undefined;
 export declare function useMantineWithStaticClasses(): boolean;
 export declare function useMantineIsHeadless(): boolean | undefined;
+export declare function useMantineSxTransform(): ((sx: any) => string) | undefined;
+export declare function useMantineStylesTransform(): ((styles: any, payload: any) => Record<string, string>) | undefined;
 export {};

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare function MantineClasses(): React.JSX.Element;
+export declare function MantineClasses(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 interface MantineCssVariablesProps {
     cssVariablesSelector: string;
     deduplicateCssVariables: boolean;
 }
-export declare function MantineCssVariables({ cssVariablesSelector, deduplicateCssVariables, }: MantineCssVariablesProps): React.JSX.Element | null;
+export declare function MantineCssVariables({ cssVariablesSelector, deduplicateCssVariables, }: MantineCssVariablesProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace MantineCssVariables {
     var displayName: string;
 }

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

@@ -1,6 +1,6 @@
 import './global.css';
-import React from 'react';
 import { MantineColorSchemeManager } from './color-scheme-managers';
+import { MantineStylesTransform } from './Mantine.context';
 import { CSSVariablesResolver } from './MantineCssVariables';
 import type { MantineColorScheme, MantineThemeOverride } from './theme.types';
 export interface MantineProviderProps {
@@ -30,10 +30,12 @@ export interface MantineProviderProps {
     withStaticClasses?: boolean;
     /** Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. `true` by default. */
     withGlobalClasses?: boolean;
+    /** An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries */
+    stylesTransform?: MantineStylesTransform;
     /** Your application */
     children?: React.ReactNode;
 }
-export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, }: MantineProviderProps): React.JSX.Element;
+export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MantineProvider {
     var displayName: string;
 }
@@ -43,7 +45,7 @@ export interface HeadlessMantineProviderProps {
     /** Your application */
     children?: React.ReactNode;
 }
-export declare function HeadlessMantineProvider({ children, theme }: HeadlessMantineProviderProps): React.JSX.Element;
+export declare function HeadlessMantineProvider({ children, theme }: HeadlessMantineProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace HeadlessMantineProvider {
     var displayName: string;
 }

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

@@ -1,6 +1,5 @@
-import React from 'react';
 import { MantineTheme, MantineThemeOverride } from '../theme.types';
-export declare const MantineThemeContext: React.Context<MantineTheme | null>;
+export declare const MantineThemeContext: import("react").Context<MantineTheme | null>;
 export declare const useSafeMantineTheme: () => MantineTheme;
 export declare function useMantineTheme(): MantineTheme;
 export interface MantineThemeProviderProps {
@@ -11,7 +10,7 @@ export interface MantineThemeProviderProps {
     /** Your application or part of the application that requires different theme */
     children?: React.ReactNode;
 }
-export declare function MantineThemeProvider({ theme, children, inherit, }: MantineThemeProviderProps): React.JSX.Element;
+export declare function MantineThemeProvider({ theme, children, inherit, }: MantineThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MantineThemeProvider {
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ export * from './ColorSchemeScript';
 export { DEFAULT_THEME } from './default-theme';
 export { validateMantineTheme, mergeMantineTheme } from './merge-mantine-theme';
 export { MantineProvider, HeadlessMantineProvider } from './MantineProvider';
-export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, } from './Mantine.context';
+export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, } from './Mantine.context';
 export { useMantineTheme, useSafeMantineTheme, MantineThemeContext, MantineThemeProvider, } from './MantineThemeProvider';
 export type { MantineThemeProviderProps } from './MantineThemeProvider';
 export type { MantineProviderProps, HeadlessMantineProviderProps } from './MantineProvider';
@@ -18,3 +18,5 @@ export { mergeThemeOverrides } from './merge-theme-overrides/merge-theme-overrid
 export { defaultCssVariablesResolver } from './MantineCssVariables/default-css-variables-resolver';
 export type { CSSVariablesResolver } from './MantineCssVariables/default-css-variables-resolver';
 export { virtualColor, getCSSColorVariables, isVirtualColor } from './MantineCssVariables';
+export { useMatches } from './use-matches/use-matches';
+export type { MantineStylesTransform } from './Mantine.context';

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/MantineProvider/use-matches/use-matches.d.ts

@@ -0,0 +1,5 @@
+import { UseMediaQueryOptions } from '@mantine/hooks';
+import { MantineBreakpoint } from '../theme.types';
+type UseMatchesInput<T> = Partial<Record<MantineBreakpoint, T>>;
+export declare function useMatches<T>(payload: UseMatchesInput<T>, options?: UseMediaQueryOptions): T;
+export {};

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

@@ -1,4 +1,3 @@
-import React from 'react';
 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>>;
@@ -14,11 +13,11 @@ export type PolymorphicComponentProps<C, Props = {}> = C extends React.ElementTy
     component: React.ElementType;
     renderRoot?: (props: Record<string, any>) => any;
 };
-export declare function createPolymorphicComponent<ComponentDefaultType, Props, StaticComponents = Record<string, never>>(component: any): (<C = ComponentDefaultType>(props: PolymorphicComponentProps<C, Props>) => React.ReactElement) & Omit<React.FunctionComponent<(Props & ComponentProp<any> & Omit<Omit<any, "ref">, "component" | keyof Props> & {
+export declare function createPolymorphicComponent<ComponentDefaultType, Props, StaticComponents = Record<string, never>>(component: any): (<C = ComponentDefaultType>(props: PolymorphicComponentProps<C, Props>) => React.ReactElement) & Omit<import("react").FunctionComponent<(Props & ComponentProp<any> & Omit<Omit<any, "ref">, "component" | keyof Props> & {
     ref?: any;
     renderRoot?: ((props: any) => any) | undefined;
 }) | (Props & {
-    component: React.ElementType<any>;
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & StaticComponents;
 export {};

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

@@ -10,6 +10,6 @@ export declare function polymorphicFactory<Payload extends PolymorphicFactoryPay
     ref?: any;
     renderRoot?: ((props: any) => any) | undefined;
 }) | (Payload["props"] & {
-    component: import("react").ElementType<any>;
+    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"]>;

package/lib/core/styles-api/use-styles/get-class-name/get-class-name.d.ts

@@ -31,6 +31,8 @@ export interface GetClassNameOptions {
     withStaticClasses?: boolean;
     /** If set, removes all Mantine classes */
     headless?: boolean;
+    /** `styles` prop transformed into classes with CSS-in-JS library, for example, emotion */
+    transformedStyles?: Record<string, string>[];
 }
-export declare function getClassName({ theme, options, themeName, selector, classNamesPrefix, classNames, classes, unstyled, className, rootSelector, props, stylesCtx, withStaticClasses, headless, }: GetClassNameOptions): string;
+export declare function getClassName({ theme, options, themeName, selector, classNamesPrefix, classNames, classes, unstyled, className, rootSelector, props, stylesCtx, withStaticClasses, headless, transformedStyles, }: GetClassNameOptions): string;
 export {};

package/lib/core/styles-api/use-styles/get-style/get-style.d.ts

@@ -17,5 +17,6 @@ export interface GetStyleInput {
     vars: VarsResolver | undefined;
     varsResolver: VarsResolver | undefined;
     headless?: boolean;
+    withStylesTransform?: boolean;
 }
-export declare function getStyle({ theme, themeName, selector, options, props, stylesCtx, rootSelector, styles, style, vars, varsResolver, headless, }: GetStyleInput): CSSProperties;
+export declare function getStyle({ theme, themeName, selector, options, props, stylesCtx, rootSelector, styles, style, vars, varsResolver, headless, withStylesTransform, }: GetStyleInput): CSSProperties;

package/lib/core/styles-api/use-styles/use-transformed-styles.d.ts

@@ -0,0 +1,10 @@
+interface UseTransformedStylesInput {
+    props: Record<string, any>;
+    stylesCtx: Record<string, any> | undefined;
+    themeName: string[];
+}
+export declare function useStylesTransform({ props, stylesCtx, themeName }: UseTransformedStylesInput): {
+    getTransformedStyles: (styles: any[]) => Record<string, string>[];
+    withStylesTransform: boolean;
+};
+export {};

package/lib/core/utils/close-on-escape/close-on-escape.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 interface Options {
     active: boolean | undefined;
     onTrigger?: () => void;
     onKeyDown?: (event: React.KeyboardEvent<any>) => void;
 }
-export declare function closeOnEscape(callback?: (event: any) => void, options?: Options): (event: React.KeyboardEvent<any>) => void;
+export declare function closeOnEscape(callback?: (event: any) => void, options?: Options): (event: import("react").KeyboardEvent<any>) => void;
 export {};

package/lib/core/utils/create-optional-context/create-optional-context.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 export declare function createOptionalContext<ContextValue>(initialValue?: ContextValue | null): readonly [({ children, value }: {
     value: ContextValue;
     children: React.ReactNode;
-}) => React.JSX.Element, () => ContextValue | null];
+}) => import("react/jsx-runtime").JSX.Element, () => ContextValue | null];

package/lib/core/utils/create-safe-context/create-safe-context.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 export declare function createSafeContext<ContextValue>(errorMessage: string): readonly [({ children, value }: {
     value: ContextValue;
     children: React.ReactNode;
-}) => React.JSX.Element, () => ContextValue & ({} | undefined)];
+}) => import("react/jsx-runtime").JSX.Element, () => ContextValue & ({} | undefined)];

package/lib/core/utils/is-element/is-element.d.ts

@@ -1,2 +1 @@
-import React from 'react';
 export declare function isElement(value: any): value is React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.7.2",
+  "version": "7.8.1-alpha.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.7.2",
+    "@mantine/hooks": "7.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/hooks": "7.7.2"
+    "@mantine/hooks": "7.8.1"
   }
 }

package/styles/Accordion.css

@@ -117,11 +117,11 @@
 }
 
 .m_fe19b709 {
-  border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--item-border-color);
+  border-bottom: 1px solid var(--item-border-color);
 }
 
 .m_1f921b3b {
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--item-border-color);
+  border: 1px solid var(--item-border-color);
   transition: background-color 150ms ease;
 }
 
@@ -164,7 +164,7 @@
 .m_9f59b069 {
   background-color: var(--item-filled-color);
   border-radius: var(--accordion-radius);
-  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
+  border: 1px solid transparent;
   transition: background-color 150ms ease;
 }