@mantine/core 7.6.2 → 7.7.0

package/esm/index.mjs

@@ -44,6 +44,7 @@ export { lighten } from './core/MantineProvider/color-functions/lighten/lighten.
 export { isLightColor, luminance } from './core/MantineProvider/color-functions/luminance/luminance.mjs';
 export { getContrastColor, getPrimaryContrastColor } from './core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.mjs';
 export { getAutoContrastValue } from './core/MantineProvider/color-functions/get-auto-contrast-value/get-auto-contrast-value.mjs';
+export { colorsTuple } from './core/MantineProvider/color-functions/colors-tuple/colors-tuple.mjs';
 export { useMantineColorScheme } from './core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.mjs';
 export { useProviderColorScheme } from './core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.mjs';
 export { useComputedColorScheme } from './core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.mjs';
@@ -58,6 +59,9 @@ export { convertCssVariables } from './core/MantineProvider/convert-css-variable
 export { createTheme } from './core/MantineProvider/create-theme/create-theme.mjs';
 export { mergeThemeOverrides } from './core/MantineProvider/merge-theme-overrides/merge-theme-overrides.mjs';
 export { defaultCssVariablesResolver } from './core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs';
+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 { 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';
@@ -104,6 +108,7 @@ export { useInputWrapperContext } from './components/Input/InputWrapper.context.
 export { InputBase } from './components/InputBase/InputBase.mjs';
 export { FLEX_STYLE_PROPS_DATA } from './components/Flex/flex-props.mjs';
 export { Flex } from './components/Flex/Flex.mjs';
+export { FloatingIndicator } from './components/FloatingIndicator/FloatingIndicator.mjs';
 export { Accordion } from './components/Accordion/Accordion.mjs';
 export { AccordionChevron } from './components/Accordion/AccordionChevron.mjs';
 export { AccordionItem } from './components/Accordion/AccordionItem/AccordionItem.mjs';
@@ -162,6 +167,7 @@ export { ComboboxEventsTarget } from './components/Combobox/ComboboxEventsTarget
 export { ComboboxDropdownTarget } from './components/Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.mjs';
 export { ComboboxGroup } from './components/Combobox/ComboboxGroup/ComboboxGroup.mjs';
 export { ComboboxClearButton } from './components/Combobox/ComboboxClearButton/ComboboxClearButton.mjs';
+export { ComboboxHiddenInput } from './components/Combobox/ComboboxHiddenInput/ComboboxHiddenInput.mjs';
 export { OptionsDropdown } from './components/Combobox/OptionsDropdown/OptionsDropdown.mjs';
 export { useCombobox } from './components/Combobox/use-combobox/use-combobox.mjs';
 export { useVirtualizedCombobox } from './components/Combobox/use-combobox/use-virtualized-combobox.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/Autocomplete/Autocomplete.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
 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 */
@@ -14,6 +15,8 @@ export interface AutocompleteProps extends BoxProps, __BaseInputProps, Omit<Comb
     onChange?: (value: string) => void;
     /** A function to render content of the option, replaces the default content of the option */
     renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 export type AutocompleteFactory = Factory<{
     props: AutocompleteProps;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Factory, MantineSize, MantineThemeComponent, StylesApiProps } from '../../core';
 import { __PopoverProps } from '../Popover';
 import { ComboboxChevron } from './ComboboxChevron/ComboboxChevron';
+import { ComboboxClearButton } from './ComboboxClearButton/ComboboxClearButton';
 import { ComboboxDropdown } from './ComboboxDropdown/ComboboxDropdown';
 import { ComboboxDropdownTarget } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
 import { ComboboxEmpty } from './ComboboxEmpty/ComboboxEmpty';
@@ -9,6 +10,7 @@ import { ComboboxEventsTarget } from './ComboboxEventsTarget/ComboboxEventsTarge
 import { ComboboxFooter } from './ComboboxFooter/ComboboxFooter';
 import { ComboboxGroup } from './ComboboxGroup/ComboboxGroup';
 import { ComboboxHeader } from './ComboboxHeader/ComboboxHeader';
+import { ComboboxHiddenInput } from './ComboboxHiddenInput/ComboboxHiddenInput';
 import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
 import { ComboboxOptions } from './ComboboxOptions/ComboboxOptions';
 import { ComboboxSearch } from './ComboboxSearch/ComboboxSearch';
@@ -54,6 +56,8 @@ export type ComboboxFactory = Factory<{
         EventsTarget: typeof ComboboxEventsTarget;
         DropdownTarget: typeof ComboboxDropdownTarget;
         Group: typeof ComboboxGroup;
+        ClearButton: typeof ComboboxClearButton;
+        HiddenInput: typeof ComboboxHiddenInput;
     };
 }>;
 export declare function Combobox(_props: ComboboxProps): React.JSX.Element;
@@ -132,6 +136,8 @@ export declare namespace Combobox {
                 stylesNames: import("./ComboboxGroup/ComboboxGroup").ComboboxGroupStylesNames;
                 compound: true;
             }>;
+            ClearButton: React.ForwardRefExoticComponent<import("./ComboboxClearButton/ComboboxClearButton").ComboboxClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
+            HiddenInput: typeof ComboboxHiddenInput;
         };
     }>) => MantineThemeComponent;
     var classes: any;
@@ -205,4 +211,5 @@ export declare namespace Combobox {
         compound: true;
     }>;
     var ClearButton: React.ForwardRefExoticComponent<import("./ComboboxClearButton/ComboboxClearButton").ComboboxClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    var HiddenInput: typeof ComboboxHiddenInput;
 }

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ComboboxHiddenInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value'> {
+    /** Input value */
+    value: string | string[] | null;
+    /** Divider character that is used to transform array values to string, `','` by default */
+    valuesDivider?: string;
+}
+export declare function ComboboxHiddenInput({ value, valuesDivider, ...others }: ComboboxHiddenInputProps): React.JSX.Element;
+export declare namespace ComboboxHiddenInput {
+    var displayName: string;
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ScrollAreaProps } from '../../ScrollArea/ScrollArea';
 import { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';
 import { FilterOptionsInput } from './default-options-filter';
 export type OptionsFilter = (input: FilterOptionsInput) => ComboboxParsedItem[];
@@ -24,5 +25,6 @@ export interface OptionsDropdownProps {
     unstyled: boolean | undefined;
     labelId: string;
     renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;
+    scrollAreaProps: ScrollAreaProps | undefined;
 }
-export declare function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea, filterOptions, withCheckIcon, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, }: OptionsDropdownProps): React.JSX.Element;
+export declare function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea, filterOptions, withCheckIcon, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, }: OptionsDropdownProps): React.JSX.Element;

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

@@ -14,6 +14,7 @@ export { ComboboxEventsTarget } from './ComboboxEventsTarget/ComboboxEventsTarge
 export { ComboboxDropdownTarget } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
 export { ComboboxGroup } from './ComboboxGroup/ComboboxGroup';
 export { ComboboxClearButton } from './ComboboxClearButton/ComboboxClearButton';
+export { ComboboxHiddenInput } from './ComboboxHiddenInput/ComboboxHiddenInput';
 export { OptionsDropdown } from './OptionsDropdown/OptionsDropdown';
 export { useCombobox } from './use-combobox/use-combobox';
 export { useVirtualizedCombobox } from './use-combobox/use-virtualized-combobox';
@@ -35,4 +36,6 @@ export type { ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';
 export type { ComboboxDropdownTargetProps } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
 export type { ComboboxEventsTargetProps } from './ComboboxEventsTarget/ComboboxEventsTarget';
 export type { ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';
+export type { ComboboxClearButtonProps } from './ComboboxClearButton/ComboboxClearButton';
+export type { ComboboxHiddenInputProps } from './ComboboxHiddenInput/ComboboxHiddenInput';
 export type { OptionsDropdownProps, OptionsData, OptionsFilter, } from './OptionsDropdown/OptionsDropdown';

package/lib/components/FloatingIndicator/FloatingIndicator.d.ts

@@ -0,0 +1,27 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+export type FloatingIndicatorStylesNames = 'root';
+export type FloatingIndicatorCssVariables = {
+    root: '--transition-duration';
+};
+export interface FloatingIndicatorProps extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {
+    /** Target element over which indicator should be displayed */
+    target: HTMLElement | null | undefined;
+    /** Parent element with relative position based on which indicator position should be calculated */
+    parent: HTMLElement | null | undefined;
+    /** Transition duration in ms, `150` by default */
+    transitionDuration?: number | string;
+    /** Determines whether indicator should be displayed after transition ends, should be set if used inside a container that has `transform: scale(n)` styles */
+    displayAfterTransitionEnd?: boolean;
+}
+export type FloatingIndicatorFactory = Factory<{
+    props: FloatingIndicatorProps;
+    ref: HTMLDivElement;
+    stylesNames: FloatingIndicatorStylesNames;
+    vars: FloatingIndicatorCssVariables;
+}>;
+export declare const FloatingIndicator: import("../../core").MantineComponent<{
+    props: FloatingIndicatorProps;
+    ref: HTMLDivElement;
+    stylesNames: FloatingIndicatorStylesNames;
+    vars: FloatingIndicatorCssVariables;
+}>;

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

@@ -0,0 +1,2 @@
+export { FloatingIndicator } from './FloatingIndicator';
+export type { FloatingIndicatorCssVariables, FloatingIndicatorFactory, FloatingIndicatorProps, FloatingIndicatorStylesNames, } from './FloatingIndicator';

package/lib/components/FloatingIndicator/use-floating-indicator.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+interface UseFloatingIndicatorInput {
+    target: HTMLElement | null | undefined;
+    parent: HTMLElement | null | undefined;
+    ref: RefObject<HTMLDivElement>;
+    displayAfterTransitionEnd?: boolean;
+}
+export declare function useFloatingIndicator({ target, parent, ref, displayAfterTransitionEnd, }: UseFloatingIndicatorInput): {
+    initialized: boolean;
+    hidden: boolean;
+};
+export {};

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

@@ -3,6 +3,7 @@ import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
 import { __BaseInputProps, __InputStylesNames } from '../Input';
+import { ScrollAreaProps } from '../ScrollArea';
 export type MultiSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<MultiSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
     /** Controlled component value */
@@ -38,11 +39,13 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     /** Props passed down to the clear button */
     clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
-    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */
     hiddenInputValuesDivider?: string;
     /** A function to render content of the option, replaces the default content of the option */
     renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 export type MultiSelectFactory = Factory<{
     props: MultiSelectProps;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
-export type SegmentedControlStylesNames = 'root' | 'input' | 'label' | 'control' | 'indicator';
+export type SegmentedControlStylesNames = 'root' | 'input' | 'label' | 'control' | 'indicator' | 'innerLabel';
 export type SegmentedControlCssVariables = {
     root: '--sc-radius' | '--sc-color' | '--sc-font-size' | '--sc-padding' | '--sc-shadow' | '--sc-transition-duration' | '--sc-transition-timing-function';
 };

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

@@ -3,6 +3,7 @@ import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
 import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
+import { ScrollAreaProps } from '../ScrollArea';
 export type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
 export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<SelectFactory>, ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {
     /** Controlled component value */
@@ -34,9 +35,11 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     /** Props passed down to the clear button */
     clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
-    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** A function to render content of the option, replaces the default content of the option */
     renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 export type SelectFactory = Factory<{
     props: SelectProps;

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

@@ -3,6 +3,7 @@ import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
 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 */
@@ -36,11 +37,13 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     /** Props passed down to the clear button */
     clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
-    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */
     hiddenInputValuesDivider?: string;
     /** A function to render content of the option, replaces the default content of the option */
     renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 export type TagsInputFactory = Factory<{
     props: TagsInputProps;

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

@@ -5,6 +5,6 @@ export interface MantineTransitionStyles {
     out: React.CSSProperties;
     transitionProperty: React.CSSProperties['transitionProperty'];
 }
-export type MantineTransitionName = 'fade' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'scale-y' | 'scale-x' | 'scale' | 'pop' | 'pop-top-left' | 'pop-top-right' | 'pop-bottom-left' | 'pop-bottom-right';
+export type MantineTransitionName = 'fade' | 'fade-down' | 'fade-up' | 'fade-left' | 'fade-right' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'scale-y' | 'scale-x' | 'scale' | 'pop' | 'pop-top-left' | 'pop-top-right' | 'pop-bottom-left' | 'pop-bottom-right';
 export type MantineTransition = MantineTransitionName | MantineTransitionStyles;
 export declare const transitions: Record<MantineTransitionName, MantineTransitionStyles>;

package/lib/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './ModalBase';
 export * from './Input';
 export * from './InputBase';
 export * from './Flex';
+export * from './FloatingIndicator';
 export * from './Accordion';
 export * from './Affix';
 export * from './Alert';

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

@@ -22,12 +22,12 @@ export interface MantineStyleProps {
     bg?: StyleProp<MantineColor>;
     c?: StyleProp<MantineColor>;
     opacity?: StyleProp<React.CSSProperties['opacity']>;
-    ff?: StyleProp<'mono' | 'text' | 'heading' | (string & {})>;
-    fz?: StyleProp<MantineFontSize | number | (string & {})>;
+    ff?: StyleProp<'monospace' | 'text' | 'heading' | (string & {})>;
+    fz?: StyleProp<MantineFontSize | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
     fw?: StyleProp<React.CSSProperties['fontWeight']>;
     lts?: StyleProp<React.CSSProperties['letterSpacing']>;
     ta?: StyleProp<React.CSSProperties['textAlign']>;
-    lh?: StyleProp<MantineLineHeight | number | (string & {})>;
+    lh?: StyleProp<MantineLineHeight | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
     fs?: StyleProp<React.CSSProperties['fontStyle']>;
     tt?: StyleProp<React.CSSProperties['textTransform']>;
     td?: StyleProp<React.CSSProperties['textDecoration']>;

package/lib/core/MantineProvider/MantineCssVariables/get-css-color-variables.d.ts

@@ -0,0 +1,12 @@
+import { MantineColor, MantineTheme } from '../theme.types';
+interface GetColorVariablesInput {
+    theme: MantineTheme;
+    color: MantineColor;
+    colorScheme: 'light' | 'dark';
+    name?: string;
+    withColorValues?: boolean;
+}
+export declare function getCSSColorVariables({ theme, color, colorScheme, name, withColorValues, }: GetColorVariablesInput): {
+    [x: string]: string;
+};
+export {};

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

@@ -1,3 +1,5 @@
 export { MantineCssVariables } from './MantineCssVariables';
 export { defaultCssVariablesResolver } from './default-css-variables-resolver';
+export { getCSSColorVariables } from './get-css-color-variables';
+export { virtualColor, isVirtualColor } from './virtual-color/virtual-color';
 export type { CSSVariablesResolver } from './default-css-variables-resolver';

package/lib/core/MantineProvider/MantineCssVariables/virtual-color/virtual-color.d.ts

@@ -0,0 +1,15 @@
+import { MantineColor, MantineColorsTuple } from '../../theme.types';
+interface VirtualColorInput {
+    dark: MantineColor;
+    light: MantineColor;
+    name: string;
+}
+type VirtualColor = MantineColorsTuple & {
+    'mantine-virtual-color': true;
+    name: string;
+    dark: MantineColor;
+    light: MantineColor;
+};
+export declare function virtualColor(input: VirtualColorInput): MantineColorsTuple;
+export declare function isVirtualColor(value: unknown): value is VirtualColor;
+export {};

package/lib/core/MantineProvider/color-functions/colors-tuple/colors-tuple.d.ts

@@ -0,0 +1,2 @@
+import { MantineColorsTuple } from '../../theme.types';
+export declare function colorsTuple(input: string | string[]): MantineColorsTuple;

package/lib/core/MantineProvider/color-functions/index.d.ts

@@ -10,5 +10,6 @@ export { lighten } from './lighten/lighten';
 export { luminance, isLightColor } from './luminance/luminance';
 export { getContrastColor, getPrimaryContrastColor } from './get-contrast-color/get-contrast-color';
 export { getAutoContrastValue } from './get-auto-contrast-value/get-auto-contrast-value';
+export { colorsTuple } from './colors-tuple/colors-tuple';
 export type { RGBA } from './to-rgba/to-rgba';
 export type { VariantColorsResolverInput, VariantColorResolverResult, VariantColorsResolver, } from './default-variant-colors-resolver/default-variant-colors-resolver';

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

@@ -17,3 +17,4 @@ export { createTheme } from './create-theme/create-theme';
 export { mergeThemeOverrides } from './merge-theme-overrides/merge-theme-overrides';
 export { defaultCssVariablesResolver } from './MantineCssVariables/default-css-variables-resolver';
 export type { CSSVariablesResolver } from './MantineCssVariables/default-css-variables-resolver';
+export { virtualColor, getCSSColorVariables, isVirtualColor } from './MantineCssVariables';

package/package.json

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

package/styles/FloatingIndicator.css

@@ -0,0 +1,20 @@
+.m-96b553a6 {
+  --transition-duration: 150ms;
+
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: 0;
+  transition-property: transform, width, height;
+  transition-timing-function: ease;
+  transition-duration: 0ms;
+}
+
+  .m-96b553a6:where([data-initialized]) {
+    transition-duration: var(--transition-duration);
+  }
+
+  .m-96b553a6:where([data-hidden]) {
+    background-color: red;
+    display: none;
+  }

package/styles/FloatingIndicator.layer.css

@@ -0,0 +1,21 @@
+@layer mantine {.m-96b553a6 {
+  --transition-duration: 150ms;
+
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: 0;
+  transition-property: transform, width, height;
+  transition-timing-function: ease;
+  transition-duration: 0ms;
+}
+
+  .m-96b553a6:where([data-initialized]) {
+    transition-duration: var(--transition-duration);
+  }
+
+  .m-96b553a6:where([data-hidden]) {
+    background-color: red;
+    display: none;
+  }
+}

package/styles/SegmentedControl.css

@@ -19,10 +19,6 @@
   padding: 4px;
 } /* px required for correct indicator calculations */
 
-  .m-cf365364[data-initialization] {
-    --sc-transition-duration: 0ms !important;
-  }
-
   .m-cf365364:where([data-full-width]) {
     display: flex;
   }
@@ -50,12 +46,6 @@
   display: block;
   z-index: 1;
   border-radius: var(--sc-radius, var(--mantine-radius-default));
-  width: var(--sc-indicator-width);
-  height: var(--sc-indicator-height);
-  transform: var(--sc-indicator-transform);
-  transition:
-    transform var(--sc-transition-duration) var(--sc-transition-timing-function),
-    width var(--sc-transition-duration) var(--sc-transition-timing-function);
 }
 
 :where([data-mantine-color-scheme='light']) .m-9e182ccd {
@@ -120,6 +110,28 @@ fieldset:disabled .m-1738fcb2,
       color: var(--sc-label-color, var(--mantine-color-white));
 }
 
+.m-cf365364:where([data-initialized]) .m-1738fcb2:where([data-active])::before {
+        display: none;
+      }
+
+.m-1738fcb2:where([data-active])::before {
+      content: '';
+      inset: 0;
+      z-index: 0;
+      position: absolute;
+      border-radius: var(--sc-radius, var(--mantine-radius-default));
+}
+
+:where([data-mantine-color-scheme='light']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: var(--sc-shadow, none);
+        background-color: var(--sc-color, var(--mantine-color-white));
+}
+
+:where([data-mantine-color-scheme='dark']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: none;
+        background-color: var(--sc-color, var(--mantine-color-dark-5));
+}
+
 @media (hover: hover) {
       :where([data-mantine-color-scheme='light']) .m-1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
         color: var(--mantine-color-black);
@@ -218,3 +230,8 @@ fieldset:disabled .m-1738fcb2,
 [data-mantine-color-scheme] .m-69686b9b[data-active]::before, [data-mantine-color-scheme] .m-69686b9b[data-active] + .m-69686b9b::before {
           --separator-color: transparent;
         }
+
+.m-78882f40 {
+  position: relative;
+  z-index: 2;
+}

package/styles/SegmentedControl.layer.css

@@ -19,10 +19,6 @@
   padding: 4px;
 } /* px required for correct indicator calculations */
 
-  .m-cf365364[data-initialization] {
-    --sc-transition-duration: 0ms !important;
-  }
-
   .m-cf365364:where([data-full-width]) {
     display: flex;
   }
@@ -50,12 +46,6 @@
   display: block;
   z-index: 1;
   border-radius: var(--sc-radius, var(--mantine-radius-default));
-  width: var(--sc-indicator-width);
-  height: var(--sc-indicator-height);
-  transform: var(--sc-indicator-transform);
-  transition:
-    transform var(--sc-transition-duration) var(--sc-transition-timing-function),
-    width var(--sc-transition-duration) var(--sc-transition-timing-function);
 }
 
 :where([data-mantine-color-scheme='light']) .m-9e182ccd {
@@ -120,6 +110,28 @@ fieldset:disabled .m-1738fcb2,
       color: var(--sc-label-color, var(--mantine-color-white));
 }
 
+.m-cf365364:where([data-initialized]) .m-1738fcb2:where([data-active])::before {
+        display: none;
+      }
+
+.m-1738fcb2:where([data-active])::before {
+      content: '';
+      inset: 0;
+      z-index: 0;
+      position: absolute;
+      border-radius: var(--sc-radius, var(--mantine-radius-default));
+}
+
+:where([data-mantine-color-scheme='light']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: var(--sc-shadow, none);
+        background-color: var(--sc-color, var(--mantine-color-white));
+}
+
+:where([data-mantine-color-scheme='dark']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: none;
+        background-color: var(--sc-color, var(--mantine-color-dark-5));
+}
+
 @media (hover: hover) {
       :where([data-mantine-color-scheme='light']) .m-1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
         color: var(--mantine-color-black);
@@ -218,4 +230,9 @@ fieldset:disabled .m-1738fcb2,
 [data-mantine-color-scheme] .m-69686b9b[data-active]::before, [data-mantine-color-scheme] .m-69686b9b[data-active] + .m-69686b9b::before {
           --separator-color: transparent;
         }
+
+.m-78882f40 {
+  position: relative;
+  z-index: 2;
+}
 }

package/styles.css

@@ -1528,6 +1528,27 @@ body {
   display: flex;
 }
 
+.m-96b553a6 {
+  --transition-duration: 150ms;
+
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: 0;
+  transition-property: transform, width, height;
+  transition-timing-function: ease;
+  transition-duration: 0ms;
+}
+
+  .m-96b553a6:where([data-initialized]) {
+    transition-duration: var(--transition-duration);
+  }
+
+  .m-96b553a6:where([data-hidden]) {
+    background-color: red;
+    display: none;
+  }
+
 .m-9bdbb667 {
   --accordion-radius: var(--mantine-radius-default);
 }
@@ -5109,10 +5130,6 @@ fieldset:disabled .m-d3ea56bb,
   padding: 4px;
 } /* px required for correct indicator calculations */
 
-  .m-cf365364[data-initialization] {
-    --sc-transition-duration: 0ms !important;
-  }
-
   .m-cf365364:where([data-full-width]) {
     display: flex;
   }
@@ -5140,12 +5157,6 @@ fieldset:disabled .m-d3ea56bb,
   display: block;
   z-index: 1;
   border-radius: var(--sc-radius, var(--mantine-radius-default));
-  width: var(--sc-indicator-width);
-  height: var(--sc-indicator-height);
-  transform: var(--sc-indicator-transform);
-  transition:
-    transform var(--sc-transition-duration) var(--sc-transition-timing-function),
-    width var(--sc-transition-duration) var(--sc-transition-timing-function);
 }
 
 :where([data-mantine-color-scheme='light']) .m-9e182ccd {
@@ -5210,6 +5221,28 @@ fieldset:disabled .m-1738fcb2,
       color: var(--sc-label-color, var(--mantine-color-white));
 }
 
+.m-cf365364:where([data-initialized]) .m-1738fcb2:where([data-active])::before {
+        display: none;
+      }
+
+.m-1738fcb2:where([data-active])::before {
+      content: '';
+      inset: 0;
+      z-index: 0;
+      position: absolute;
+      border-radius: var(--sc-radius, var(--mantine-radius-default));
+}
+
+:where([data-mantine-color-scheme='light']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: var(--sc-shadow, none);
+        background-color: var(--sc-color, var(--mantine-color-white));
+}
+
+:where([data-mantine-color-scheme='dark']) .m-1738fcb2:where([data-active])::before {
+        box-shadow: none;
+        background-color: var(--sc-color, var(--mantine-color-dark-5));
+}
+
 @media (hover: hover) {
       :where([data-mantine-color-scheme='light']) .m-1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
         color: var(--mantine-color-black);
@@ -5309,6 +5342,11 @@ fieldset:disabled .m-1738fcb2,
           --separator-color: transparent;
         }
 
+.m-78882f40 {
+  position: relative;
+  z-index: 2;
+}
+
 .m-2415a157 {
   display: grid;
   grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));