@mantine/core 9.6.2 → 9.7.0

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

@@ -3,10 +3,10 @@ import { InlineInputStylesNames } from '../../utils/InlineInput';
 import { CheckboxCard, type CheckboxCardProps, type CheckboxCardStylesNames, type CheckboxCardCssVariables, type CheckboxCardFactory } from './CheckboxCard/CheckboxCard';
 import { CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupStylesNames, type CheckboxGroupFactory } from './CheckboxGroup/CheckboxGroup';
 import { CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxIndicatorStylesNames, type CheckboxIndicatorCssVariables, type CheckboxIndicatorFactory, type CheckboxIndicatorVariant } from './CheckboxIndicator/CheckboxIndicator';
-export type CheckboxVariant = 'filled' | 'outline';
+export type CheckboxVariant = 'filled' | 'outline' | 'light';
 export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;
 export type CheckboxCssVariables = {
-    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
+    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color' | '--checkbox-bg';
 };
 export type CheckboxIconComponent = React.FC<{
     indeterminate: boolean | undefined;

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

@@ -1,9 +1,9 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
 import type { CheckboxIconComponent } from '../Checkbox';
 export type CheckboxIndicatorStylesNames = 'indicator' | 'icon';
-export type CheckboxIndicatorVariant = 'filled' | 'outline';
+export type CheckboxIndicatorVariant = 'filled' | 'outline' | 'light';
 export type CheckboxIndicatorCssVariables = {
-    indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
+    indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color' | '--checkbox-bg';
 };
 export interface CheckboxIndicatorProps extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {
     /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */

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

@@ -47,7 +47,7 @@ export interface ComboboxLikeProps<Value extends Primitive = string> {
     limit?: number;
     /** Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default */
     withScrollArea?: boolean;
-    /** `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default */
+    /** `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `220` by default */
     maxDropdownHeight?: number | string;
     /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */
     floatingHeight?: 'viewport';

package/lib/components/ComboboxPopover/ComboboxPopover.d.ts

@@ -33,7 +33,7 @@ export interface ComboboxPopoverProps<Multiple extends boolean = false, Value ex
     limit?: number;
     /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */
     withScrollArea?: boolean;
-    /** max-height of the dropdown @default 250 */
+    /** max-height of the dropdown @default 220 */
     maxDropdownHeight?: number | string;
     /** If set, the first option is selected when dropdown opens @default false */
     selectFirstOptionOnDropdownOpen?: boolean;

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

@@ -2,9 +2,13 @@ export interface HoverCardContextValue {
     openDropdown: () => void;
     closeDropdown: () => void;
     assignTarget: (node: HTMLElement | null) => void;
-    getReferenceProps?: () => any;
-    getFloatingProps?: () => any;
-    reference?: (node: HTMLElement | null) => void;
-    floating?: (node: HTMLElement | null) => void;
+    getReferenceProps: (userProps?: Record<string, any>) => Record<string, any>;
+    getFloatingProps: (userProps?: Record<string, any>) => Record<string, any>;
+    reference: (node: HTMLElement | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    opened: boolean;
+    role: 'dialog' | 'tooltip';
+    withRoles: boolean;
+    dropdownId: string;
 }
 export declare const HoverCardContext: import("react").Context<HoverCardContextValue | null>, useHoverCardContext: () => HoverCardContextValue;

package/lib/components/HoverCard/HoverCard.d.ts

@@ -5,6 +5,14 @@ import { HoverCardContextValue } from './HoverCard.context';
 import { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';
 import { HoverCardGroup, HoverCardGroupContextValue, HoverCardGroupProps } from './HoverCardGroup/HoverCardGroup';
 import { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';
+export interface HoverCardEvents {
+    /** Determines whether the dropdown should be opened when the target is hovered @default true */
+    hover?: boolean;
+    /** Determines whether the dropdown should be opened when the target is focused with the keyboard @default true */
+    focus?: boolean;
+    /** Determines whether the dropdown should be opened when the target is tapped on touch devices. Requires `hover` to be enabled @default false */
+    touch?: boolean;
+}
 export interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {
     /** Initial opened state */
     initiallyOpened?: boolean;
@@ -24,6 +32,38 @@ export interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'
      * @default 150
      */
     closeDelay?: number;
+    /**
+     * Determines which events open the dropdown. Fields that are not specified keep their default values.
+     * @default { hover: true, focus: true, touch: false }
+     */
+    events?: HoverCardEvents;
+    /**
+     * If set, the dropdown stays open while the pointer travels from the target to the dropdown
+     * and remains over it. Set it if the dropdown contains interactive content.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Accessible relation between the target and the dropdown. `dialog` sets `aria-haspopup`,
+     * `aria-expanded` and `aria-controls` on the target, `tooltip` sets `aria-describedby` instead
+     * and should be used if the dropdown contains only descriptive content.
+     * @default 'dialog'
+     */
+    role?: 'dialog' | 'tooltip';
+    /** Determines whether the dropdown should be closed when the user presses outside of the target and the dropdown @default true */
+    closeOnClickOutside?: boolean;
+    /** Not supported by `HoverCard`: outside press is always detected with the `pointerdown` event. Use `closeOnClickOutside` to disable it. */
+    clickOutsideEvents?: string[];
+    /**
+     * Determines whether focus should be returned to the target when the dropdown closes.
+     * Ignored when focus activation is enabled (`events.focus`, the default), otherwise moving
+     * focus away from the target would return it and reopen the dropdown.
+     * `Escape` pressed inside the dropdown always returns focus to the target.
+     * @default false
+     */
+    returnFocus?: boolean;
+    /** Called when the dropdown is closed with `Escape` key or with a press outside of the target and the dropdown */
+    onDismiss?: () => void;
 }
 export type HoverCardFactory = Factory<{
     props: HoverCardProps;
@@ -44,6 +84,7 @@ export declare namespace HoverCard {
 }
 export declare namespace HoverCard {
     type Props = HoverCardProps;
+    type Events = HoverCardEvents;
     type DropdownProps = HoverCardDropdownProps;
     type TargetProps = HoverCardTargetProps;
     type GroupProps = HoverCardGroupProps;

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

@@ -4,7 +4,7 @@ export { HoverCardTarget } from './HoverCardTarget/HoverCardTarget';
 export { HoverCardGroup, HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';
 export { useHoverCardContext } from './HoverCard.context';
 export type { HoverCardContextValue } from './HoverCard.context';
-export type { HoverCardProps } from './HoverCard';
+export type { HoverCardProps, HoverCardEvents } from './HoverCard';
 export type { HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';
 export type { HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';
 export type { HoverCardGroupProps, HoverCardGroupContextValue, } from './HoverCardGroup/HoverCardGroup';

package/lib/components/HoverCard/use-hover-card.d.ts

@@ -5,9 +5,20 @@ interface UseHoverCard {
     defaultOpened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    events: {
+        hover: boolean;
+        focus: boolean;
+        touch: boolean;
+    };
+    interactive: boolean;
+    closeOnEscape: boolean;
+    closeOnClickOutside: boolean;
+    onDismiss?: () => void;
+    id?: string;
 }
 export declare function useHoverCard(settings: UseHoverCard): {
     opened: boolean | undefined;
+    dropdownId: string;
     reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
     floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
     assignTarget: (node: HTMLElement | null) => void;

package/lib/components/Marquee/Marquee.d.ts

@@ -14,7 +14,7 @@ export interface MarqueeProps extends BoxProps, StylesApiProps<MarqueeFactory>,
     orientation?: 'horizontal' | 'vertical';
     /** Number of times children are repeated inline for seamless scrolling @default 4 */
     repeat?: number;
-    /** Animation duration in ms @default 40000 */
+    /** Animation duration in ms @default 100000 */
     duration?: number;
     /** Gap between repeated children, key of `theme.spacing` or any valid CSS value @default 'md' */
     gap?: MantineSpacing;

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

@@ -10,7 +10,7 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     name?: string;
     /** Hidden input `form` attribute */
     form?: string;
-    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'sm' */
     gap?: MantineSpacing;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */
     radius?: MantineRadius;

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

@@ -4,10 +4,10 @@ import { RadioCard, type RadioCardProps, type RadioCardStylesNames, type RadioCa
 import { RadioGroup, type RadioGroupProps, type RadioGroupStylesNames, type RadioGroupFactory, type RadioGroupContextValue } from './RadioGroup/RadioGroup';
 import { RadioIconProps } from './RadioIcon';
 import { RadioIndicator, type RadioIndicatorProps, type RadioIndicatorStylesNames, type RadioIndicatorFactory, type RadioIndicatorCssVariables, type RadioIndicatorVariant } from './RadioIndicator/RadioIndicator';
-export type RadioVariant = 'filled' | 'outline';
+export type RadioVariant = 'filled' | 'outline' | 'light';
 export type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';
 export type RadioCssVariables = {
-    root: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size';
+    root: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size' | '--radio-bg';
 };
 export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {
     /** Content of the `label` associated with the radio */

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

@@ -1,9 +1,9 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
 import { RadioIconProps } from '../RadioIcon';
 export type RadioIndicatorStylesNames = 'indicator' | 'icon';
-export type RadioIndicatorVariant = 'filled' | 'outline';
+export type RadioIndicatorVariant = 'filled' | 'outline' | 'light';
 export type RadioIndicatorCssVariables = {
-    indicator: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size';
+    indicator: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size' | '--radio-bg';
 };
 export interface RadioIndicatorProps extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {
     /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor */

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

@@ -20,7 +20,7 @@ export interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {
     className?: string | undefined;
     style?: React.CSSProperties;
 }
-export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react").JSX.Element;
+export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, className, style, ref, ...others }: ThumbProps): import("react").JSX.Element;
 export declare namespace Thumb {
     var displayName: string;
 }

package/lib/components/Toggle/Toggle.d.ts

@@ -0,0 +1,73 @@
+import { BoxProps, ElementProps, MantineColor, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
+export type ToggleStylesNames = 'root';
+export type ToggleVariant = 'light' | 'filled';
+export type ToggleCssVariables = {
+    root: '--toggle-size' | '--toggle-radius' | '--toggle-active-bg' | '--toggle-active-hover' | '--toggle-active-color';
+};
+export interface ToggleProps extends BoxProps, StylesApiProps<ToggleFactory>, ElementProps<'button'> {
+    /** Controlled active state */
+    active?: boolean;
+    /** Uncontrolled default active state */
+    defaultActive?: boolean;
+    /** Called when active state changes */
+    onActiveChange?: (active: boolean) => void;
+    /** If set, the toggle is disabled */
+    disabled?: boolean;
+    /** Controls toggle height and min-width, `'md'` by default */
+    size?: MantineSize | (string & {});
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: MantineRadius;
+    /** If set, the toggle width adjusts to content instead of being square, `false` by default */
+    autoWidth?: boolean;
+    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Determines whether icon color with filled variant should be changed based on the given `color` prop */
+    autoContrast?: boolean;
+}
+export type ToggleFactory = PolymorphicFactory<{
+    props: ToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ToggleStylesNames;
+    vars: ToggleCssVariables;
+    variant: ToggleVariant;
+}>;
+export declare const Toggle: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, ToggleProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ToggleProps & {
+    component?: any;
+} & Omit<any, "component" | keyof ToggleProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (ToggleProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("../..").ThemeExtend<{
+    props: ToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: ToggleStylesNames;
+    vars: ToggleCssVariables;
+    variant: ToggleVariant;
+}> & import("../..").ComponentClasses<{
+    props: ToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: ToggleStylesNames;
+    vars: ToggleCssVariables;
+    variant: ToggleVariant;
+}> & {
+    varsResolver: import("../..").VarsResolver<{
+        props: ToggleProps;
+        defaultRef: HTMLButtonElement;
+        defaultComponent: "button";
+        stylesNames: ToggleStylesNames;
+        vars: ToggleCssVariables;
+        variant: ToggleVariant;
+    }>;
+} & import("../..").PolymorphicComponentWithProps<{
+    props: ToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: ToggleStylesNames;
+    vars: ToggleCssVariables;
+    variant: ToggleVariant;
+}> & Record<string, never>;

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

@@ -0,0 +1,7 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps, ToggleStylesNames, ToggleFactory, ToggleCssVariables, ToggleVariant, } from './Toggle';
+export declare namespace Toggle {
+    type Props = import('./Toggle').ToggleProps;
+    type StylesNames = import('./Toggle').ToggleStylesNames;
+    type Factory = import('./Toggle').ToggleFactory;
+}

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

@@ -0,0 +1,7 @@
+import { GetStylesApi } from '../../core';
+import type { ToolbarFactory } from './Toolbar';
+export interface ToolbarContextValue {
+    getStyles: GetStylesApi<ToolbarFactory>;
+    orientation: 'horizontal' | 'vertical';
+}
+export declare const ToolbarProvider: import("react").Context<ToolbarContextValue | null>, useToolbarContext: () => ToolbarContextValue;

package/lib/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,58 @@
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+import { ToggleVariant } from '../Toggle';
+import { ToolbarDivider, ToolbarDividerStylesNames } from './ToolbarDivider/ToolbarDivider';
+import { ToolbarGroup, ToolbarGroupStylesNames } from './ToolbarGroup/ToolbarGroup';
+import { ToolbarToggle, ToolbarToggleStylesNames } from './ToolbarToggle/ToolbarToggle';
+import { ToolbarToggleGroup } from './ToolbarToggleGroup/ToolbarToggleGroup';
+import { ToolbarToggleItem, ToolbarToggleItemStylesNames } from './ToolbarToggleItem/ToolbarToggleItem';
+export type ToolbarStylesNames = 'root' | ToolbarGroupStylesNames | ToolbarToggleStylesNames | ToolbarToggleItemStylesNames | ToolbarDividerStylesNames;
+export type ToolbarCssVariables = {
+    root: '--toolbar-toggle-size' | '--toolbar-padding' | '--toolbar-gap' | '--toolbar-radius';
+    toggle: '--toolbar-toggle-active-bg' | '--toolbar-toggle-active-hover' | '--toolbar-toggle-active-color';
+};
+export interface ToolbarProps extends BoxProps, StylesApiProps<ToolbarFactory>, ElementProps<'div'> {
+    /** Toolbar orientation, `'horizontal'` by default */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether arrow key navigation wraps from last to first item, `true` by default */
+    loop?: boolean;
+    /** Controls size of toggle components, padding, and gap, `'md'` by default */
+    size?: MantineSize | (string & {});
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, propagated to all children, `theme.defaultRadius` by default */
+    radius?: MantineRadius;
+    /** Determines whether the toolbar has a border, `true` by default */
+    withBorder?: boolean;
+    /** Key of `theme.colors` or any valid CSS color, controls color of child toggle components */
+    color?: MantineColor;
+    /** Determines whether icon color with filled variant should be changed based on the given `color` prop */
+    autoContrast?: boolean;
+    /** Toolbar content */
+    children: React.ReactNode;
+}
+export type ToolbarFactory = Factory<{
+    props: ToolbarProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarStylesNames;
+    vars: ToolbarCssVariables;
+    variant: ToggleVariant;
+    staticComponents: {
+        Group: typeof ToolbarGroup;
+        Toggle: typeof ToolbarToggle;
+        ToggleGroup: typeof ToolbarToggleGroup;
+        ToggleItem: typeof ToolbarToggleItem;
+        Divider: typeof ToolbarDivider;
+    };
+}>;
+export declare const Toolbar: import("../..").MantineComponent<{
+    props: ToolbarProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarStylesNames;
+    vars: ToolbarCssVariables;
+    variant: ToggleVariant;
+    staticComponents: {
+        Group: typeof ToolbarGroup;
+        Toggle: typeof ToolbarToggle;
+        ToggleGroup: typeof ToolbarToggleGroup;
+        ToggleItem: typeof ToolbarToggleItem;
+        Divider: typeof ToolbarDivider;
+    };
+}>;

package/lib/components/Toolbar/ToolbarDivider/ToolbarDivider.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type ToolbarDividerStylesNames = 'divider';
+export interface ToolbarDividerProps extends BoxProps, CompoundStylesApiProps<ToolbarDividerFactory>, ElementProps<'div'> {
+}
+export type ToolbarDividerFactory = Factory<{
+    props: ToolbarDividerProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarDividerStylesNames;
+    compound: true;
+}>;
+export declare const ToolbarDivider: import("../../..").MantineComponent<{
+    props: ToolbarDividerProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarDividerStylesNames;
+    compound: true;
+}>;

package/lib/components/Toolbar/ToolbarGroup/ToolbarGroup.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type ToolbarGroupStylesNames = 'group';
+export interface ToolbarGroupProps extends BoxProps, CompoundStylesApiProps<ToolbarGroupFactory>, ElementProps<'div'> {
+}
+export type ToolbarGroupFactory = Factory<{
+    props: ToolbarGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarGroupStylesNames;
+    compound: true;
+}>;
+export declare const ToolbarGroup: import("../../..").MantineComponent<{
+    props: ToolbarGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarGroupStylesNames;
+    compound: true;
+}>;

package/lib/components/Toolbar/ToolbarToggle/ToolbarToggle.d.ts

@@ -0,0 +1,44 @@
+import { BoxComponentProps, CompoundStylesApiProps, PolymorphicFactory } from '../../../core';
+export type ToolbarToggleStylesNames = 'toggle';
+export interface ToolbarToggleProps extends BoxComponentProps, CompoundStylesApiProps<ToolbarToggleFactory> {
+    /** If set, the toggle is disabled */
+    disabled?: boolean;
+    /** If set, the toggle is displayed in active state */
+    active?: boolean;
+    /** If set, the toggle width adjusts to content instead of being square, `false` by default */
+    autoWidth?: boolean;
+}
+export type ToolbarToggleFactory = PolymorphicFactory<{
+    props: ToolbarToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ToolbarToggleStylesNames;
+    compound: true;
+}>;
+export declare const ToolbarToggle: (<C = "button">(props: import("../../..").PolymorphicComponentProps<C, ToolbarToggleProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ToolbarToggleProps & {
+    component?: any;
+} & Omit<any, "component" | keyof ToolbarToggleProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (ToolbarToggleProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("../../..").ThemeExtend<{
+    props: ToolbarToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: ToolbarToggleStylesNames;
+    compound: true;
+}> & import("../../..").ComponentClasses<{
+    props: ToolbarToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: ToolbarToggleStylesNames;
+    compound: true;
+}> & import("../../..").PolymorphicComponentWithProps<{
+    props: ToolbarToggleProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: ToolbarToggleStylesNames;
+    compound: true;
+}> & Record<string, never>;

package/lib/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.d.ts

@@ -0,0 +1,7 @@
+export interface ToolbarToggleGroupContextValue {
+    value: string | string[] | null;
+    onChange: (itemValue: string) => void;
+    type: 'single' | 'multiple';
+    disabled: boolean;
+}
+export declare const ToolbarToggleGroupProvider: import("react").Context<ToolbarToggleGroupContextValue | null>, useToolbarToggleGroupContext: () => ToolbarToggleGroupContextValue;

package/lib/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.d.ts

@@ -0,0 +1,42 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type ToolbarToggleGroupStylesNames = 'group';
+interface ToolbarToggleGroupBaseProps extends BoxProps, CompoundStylesApiProps<ToolbarToggleGroupFactory>, Omit<ElementProps<'div'>, 'onChange' | 'value' | 'defaultValue'> {
+    /** Disables all toggle items within this group */
+    disabled?: boolean;
+    /** `Toolbar.ToggleItem` components */
+    children: React.ReactNode;
+}
+export interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {
+    /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */
+    type: 'single';
+    /** Controlled value, `null` when no item is active */
+    value?: string | null;
+    /** Uncontrolled default value */
+    defaultValue?: string | null;
+    /** Called with the new value when an item is toggled, `null` when the active item is deselected */
+    onChange?: (value: string | null) => void;
+}
+export interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {
+    /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */
+    type: 'multiple';
+    /** Controlled value, array of active item values */
+    value?: string[];
+    /** Uncontrolled default value */
+    defaultValue?: string[];
+    /** Called with the array of active item values when an item is toggled */
+    onChange?: (value: string[]) => void;
+}
+export type ToolbarToggleGroupProps = ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps;
+export type ToolbarToggleGroupFactory = Factory<{
+    props: ToolbarToggleGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarToggleGroupStylesNames;
+    compound: true;
+}>;
+export declare const ToolbarToggleGroup: import("../../..").MantineComponent<{
+    props: ToolbarToggleGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: ToolbarToggleGroupStylesNames;
+    compound: true;
+}>;
+export {};

package/lib/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.d.ts

@@ -0,0 +1,22 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type ToolbarToggleItemStylesNames = 'toggle';
+export interface ToolbarToggleItemProps extends BoxProps, CompoundStylesApiProps<ToolbarToggleItemFactory>, ElementProps<'button'> {
+    /** Value used to identify the item in ToggleGroup */
+    value: string;
+    /** If set, the toggle item is disabled */
+    disabled?: boolean;
+    /** If set, the toggle item width adjusts to content instead of being square, `false` by default */
+    autoWidth?: boolean;
+}
+export type ToolbarToggleItemFactory = Factory<{
+    props: ToolbarToggleItemProps;
+    ref: HTMLButtonElement;
+    stylesNames: ToolbarToggleItemStylesNames;
+    compound: true;
+}>;
+export declare const ToolbarToggleItem: import("../../..").MantineComponent<{
+    props: ToolbarToggleItemProps;
+    ref: HTMLButtonElement;
+    stylesNames: ToolbarToggleItemStylesNames;
+    compound: true;
+}>;

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

@@ -0,0 +1,32 @@
+export { Toolbar } from './Toolbar';
+export { ToolbarGroup } from './ToolbarGroup/ToolbarGroup';
+export { ToolbarToggle } from './ToolbarToggle/ToolbarToggle';
+export { ToolbarToggleGroup } from './ToolbarToggleGroup/ToolbarToggleGroup';
+export { ToolbarToggleItem } from './ToolbarToggleItem/ToolbarToggleItem';
+export { ToolbarDivider } from './ToolbarDivider/ToolbarDivider';
+export type { ToolbarProps, ToolbarStylesNames, ToolbarFactory, ToolbarCssVariables, } from './Toolbar';
+export type { ToolbarGroupProps, ToolbarGroupFactory } from './ToolbarGroup/ToolbarGroup';
+export type { ToolbarToggleProps, ToolbarToggleFactory } from './ToolbarToggle/ToolbarToggle';
+export type { ToolbarToggleGroupProps, ToolbarToggleGroupSingleProps, ToolbarToggleGroupMultipleProps, ToolbarToggleGroupFactory, } from './ToolbarToggleGroup/ToolbarToggleGroup';
+export type { ToolbarToggleItemProps, ToolbarToggleItemFactory, } from './ToolbarToggleItem/ToolbarToggleItem';
+export type { ToolbarDividerProps, ToolbarDividerFactory } from './ToolbarDivider/ToolbarDivider';
+export declare namespace Toolbar {
+    type Props = import('./Toolbar').ToolbarProps;
+    type StylesNames = import('./Toolbar').ToolbarStylesNames;
+    type Factory = import('./Toolbar').ToolbarFactory;
+    namespace Group {
+        type Props = import('./ToolbarGroup/ToolbarGroup').ToolbarGroupProps;
+    }
+    namespace Toggle {
+        type Props = import('./ToolbarToggle/ToolbarToggle').ToolbarToggleProps;
+    }
+    namespace ToggleGroup {
+        type Props = import('./ToolbarToggleGroup/ToolbarToggleGroup').ToolbarToggleGroupProps;
+    }
+    namespace ToggleItem {
+        type Props = import('./ToolbarToggleItem/ToolbarToggleItem').ToolbarToggleItemProps;
+    }
+    namespace Divider {
+        type Props = import('./ToolbarDivider/ToolbarDivider').ToolbarDividerProps;
+    }
+}

package/lib/components/Toolbar/use-toolbar-navigation.d.ts

@@ -0,0 +1,11 @@
+interface UseToolbarNavigationOptions {
+    orientation: 'horizontal' | 'vertical';
+    loop: boolean;
+    dir: 'ltr' | 'rtl';
+}
+export declare function useToolbarNavigation({ orientation, loop, dir }: UseToolbarNavigationOptions): {
+    toolbarRef: import("react").RefObject<HTMLDivElement | null>;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleItemFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
+};
+export {};

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

@@ -35,7 +35,7 @@ export interface TooltipProps extends TooltipBaseProps {
         focus: boolean;
         touch: boolean;
     };
-    /** If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps @default false */
+    /** If set, the tooltip stays open while the pointer is over it @default false */
     interactive?: boolean;
     /** Must be set if the tooltip target is an inline element */
     inline?: boolean;
@@ -47,6 +47,8 @@ export interface TooltipProps extends TooltipBaseProps {
     autoContrast?: boolean;
     /** Selector, ref of an element or element itself that should be used for positioning */
     target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;
+    /** If set, the tooltip is hidden when the target element is removed from the DOM, hidden with `display: none` or scrolled out of the visible area. Has no effect on `Tooltip.Floating` @default true */
+    hideDetached?: boolean;
 }
 export type TooltipFactory = Factory<{
     props: TooltipProps;

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

@@ -19,6 +19,7 @@ interface UseTooltip {
     inline?: boolean;
     strategy?: FloatingStrategy;
     middlewares?: TooltipMiddlewares;
+    hideDetached?: boolean;
 }
 export declare function useTooltip(settings: UseTooltip): {
     x: number;
@@ -32,5 +33,6 @@ export declare function useTooltip(settings: UseTooltip): {
     isGroupPhase: any;
     opened: boolean | undefined;
     placement: import("@floating-ui/utils").Placement;
+    referenceHidden: boolean | undefined;
 };
 export {};