@mantine/core 9.6.3 → 9.7.0

package/lib/components/Tour/Tour.d.ts

@@ -0,0 +1,144 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+import { type PortalProps } from '../Portal';
+import { type TransitionOverride } from '../Transition';
+import { TourLabels } from './Tour.context';
+import { TourBeacon, type TourBeaconProps } from './TourBeacon/TourBeacon';
+import { TourBody, type TourBodyProps } from './TourBody/TourBody';
+import { TourCloseButton, type TourCloseButtonProps } from './TourCloseButton/TourCloseButton';
+import { TourNavigation, type TourNavigationProps } from './TourNavigation/TourNavigation';
+import { TourOverlay, type TourOverlayProps } from './TourOverlay/TourOverlay';
+import { TourRoot, type TourRootProps } from './TourRoot/TourRoot';
+import { TourStep, type TourStepProps } from './TourStep/TourStep';
+import { TourTitle, type TourTitleProps } from './TourTitle/TourTitle';
+import { TourTooltip, type TourTooltipProps } from './TourTooltip/TourTooltip';
+export type TourStylesNames = 'root' | 'overlay' | 'spotlight' | 'tooltip' | 'title' | 'body' | 'navigation' | 'closeButton' | 'stepCounter' | 'beacon' | 'beaconPulse' | 'navigationButton';
+export type TourCssVariables = {
+    root: '--tour-z-index' | '--tour-overlay-color' | '--tour-tooltip-radius' | '--tour-tooltip-shadow' | '--tour-beacon-size' | '--tour-beacon-color' | '--tour-color';
+};
+export interface TourProps extends BoxProps, StylesApiProps<TourFactory>, ElementProps<'div'> {
+    /** Whether the tour is active @default false */
+    active?: boolean;
+    /** Called when the tour is closed */
+    onClose?: () => void;
+    /** Controlled current step index */
+    step?: number;
+    /** Uncontrolled default step index @default 0 */
+    defaultStep?: number;
+    /** Called when step changes */
+    onStepChange?: (step: number) => void;
+    /** Called when a step opens */
+    onStepOpen?: (step: number) => void;
+    /** Called when a step closes */
+    onStepClose?: (step: number) => void;
+    /** Tour mode @default "guided" */
+    mode?: 'guided' | 'beacon';
+    /** Whether to display the overlay @default true */
+    withOverlay?: boolean;
+    /** Whether pointer events pass through the spotlight cutout to the target element, the rest of the overlay keeps blocking clicks @default false */
+    withOverlayInteraction?: boolean;
+    /** Whether to display the close button @default true */
+    withCloseButton?: boolean;
+    /** Whether keyboard navigation is enabled in guided mode @default true */
+    withKeyboardNavigation?: boolean;
+    /** Whether to scroll target elements into view @default true */
+    withScrollIntoView?: boolean;
+    /** Custom scroll handler */
+    scrollToHandler?: (element: HTMLElement) => void;
+    /** Padding around the spotlight cutout in px @default 8 */
+    spotlightPadding?: number;
+    /** Border radius of the spotlight cutout in px @default 4 */
+    spotlightRadius?: number;
+    /** Whether pressing Escape closes the tour @default true */
+    closeOnEscape?: boolean;
+    /** Whether clicking the overlay closes the tour, with `withOverlayInteraction` only clicks outside the spotlight cutout close it @default false */
+    closeOnOverlayClick?: boolean;
+    /** Labels for tour UI elements */
+    labels?: Partial<TourLabels>;
+    /** Whether to render inside a portal @default true */
+    withinPortal?: boolean;
+    /** Props passed to the Portal component */
+    portalProps?: Omit<PortalProps, 'children'>;
+    /** z-index of the tour @default 10000 */
+    zIndex?: string | number;
+    /** Transition props for the tooltip @default { duration: 200, transition: 'pop' } */
+    transitionProps?: TransitionOverride;
+    /** Duration of the tooltip position transition between steps in ms @default 300 */
+    stepTransitionDuration?: number;
+    /** Max width of the tooltip, tooltip always takes this width if viewport allows @default 360 */
+    maxWidth?: number;
+    /** Tour step overlay color @default "rgba(0, 0, 0, 0.5)" */
+    overlayColor?: string;
+    /** Key of `theme.colors` or any valid CSS color, controls beacon color and `Tour.Navigation` next button color @default theme.primaryColor */
+    color?: MantineColor;
+    /** Key of `theme.shadows` or any valid CSS box-shadow value, controls the tooltip shadow @default 'md' */
+    tooltipShadow?: string;
+    /** Tour steps – `Tour.Step` elements must be direct children (arrays are supported, Fragments and wrapper components are not) */
+    children?: React.ReactNode;
+}
+export type TourFactory = Factory<{
+    props: TourProps;
+    ref: HTMLDivElement;
+    stylesNames: TourStylesNames;
+    vars: TourCssVariables;
+    staticComponents: {
+        Root: typeof TourRoot;
+        Step: typeof TourStep;
+        Overlay: typeof TourOverlay;
+        Tooltip: typeof TourTooltip;
+        Title: typeof TourTitle;
+        Body: typeof TourBody;
+        Navigation: typeof TourNavigation;
+        Beacon: typeof TourBeacon;
+        CloseButton: typeof TourCloseButton;
+    };
+}>;
+export declare const Tour: import("../..").MantineComponent<{
+    props: TourProps;
+    ref: HTMLDivElement;
+    stylesNames: TourStylesNames;
+    vars: TourCssVariables;
+    staticComponents: {
+        Root: typeof TourRoot;
+        Step: typeof TourStep;
+        Overlay: typeof TourOverlay;
+        Tooltip: typeof TourTooltip;
+        Title: typeof TourTitle;
+        Body: typeof TourBody;
+        Navigation: typeof TourNavigation;
+        Beacon: typeof TourBeacon;
+        CloseButton: typeof TourCloseButton;
+    };
+}>;
+export declare namespace Tour {
+    type Props = TourProps;
+    type StylesNames = TourStylesNames;
+    type CssVariables = TourCssVariables;
+    type Factory = TourFactory;
+    namespace Root {
+        type Props = TourRootProps;
+    }
+    namespace Step {
+        type Props = TourStepProps;
+    }
+    namespace Overlay {
+        type Props = TourOverlayProps;
+    }
+    namespace Tooltip {
+        type Props = TourTooltipProps;
+    }
+    namespace Title {
+        type Props = TourTitleProps;
+    }
+    namespace Body {
+        type Props = TourBodyProps;
+    }
+    namespace CloseButton {
+        type Props = TourCloseButtonProps;
+    }
+    namespace Navigation {
+        type Props = TourNavigationProps;
+    }
+    namespace Beacon {
+        type Props = TourBeaconProps;
+    }
+}

package/lib/components/Tour/TourBeacon/TourBeacon.d.ts

@@ -0,0 +1,23 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type TourBeaconStylesNames = 'beacon' | 'beaconPulse';
+export interface TourBeaconProps extends BoxProps, CompoundStylesApiProps<TourBeaconFactory>, ElementProps<'button'> {
+    /** CSS selector or ref to the target element */
+    target?: string | React.RefObject<HTMLElement | null>;
+    /** Called when the beacon is clicked */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export type TourBeaconFactory = Factory<{
+    props: TourBeaconProps;
+    ref: HTMLButtonElement;
+    stylesNames: TourBeaconStylesNames;
+    compound: true;
+}>;
+export declare const TourBeacon: import("../../..").MantineComponent<{
+    props: TourBeaconProps;
+    ref: HTMLButtonElement;
+    stylesNames: TourBeaconStylesNames;
+    compound: true;
+}>;
+export declare namespace TourBeacon {
+    type Props = TourBeaconProps;
+}

package/lib/components/Tour/TourBeaconPositioned.d.ts

@@ -0,0 +1,13 @@
+import { type TourTarget } from './use-target-rect';
+interface TourBeaconPositionedProps {
+    target: TourTarget;
+    onClick: () => void;
+    ariaLabel: string;
+    className?: string;
+    style?: React.CSSProperties;
+    pulseStyles?: Record<string, unknown>;
+    withInitialFocus?: boolean;
+    onInitialFocus?: () => void;
+}
+export declare function TourBeaconPositioned({ target, onClick, ariaLabel, className, style, pulseStyles, withInitialFocus, onInitialFocus, }: TourBeaconPositionedProps): import("react").JSX.Element | null;
+export {};

package/lib/components/Tour/TourBody/TourBody.d.ts

@@ -0,0 +1,19 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type TourBodyStylesNames = 'body';
+export interface TourBodyProps extends BoxProps, CompoundStylesApiProps<TourBodyFactory>, ElementProps<'div'> {
+}
+export type TourBodyFactory = Factory<{
+    props: TourBodyProps;
+    ref: HTMLDivElement;
+    stylesNames: TourBodyStylesNames;
+    compound: true;
+}>;
+export declare const TourBody: import("../../..").MantineComponent<{
+    props: TourBodyProps;
+    ref: HTMLDivElement;
+    stylesNames: TourBodyStylesNames;
+    compound: true;
+}>;
+export declare namespace TourBody {
+    type Props = TourBodyProps;
+}

package/lib/components/Tour/TourCloseButton/TourCloseButton.d.ts

@@ -0,0 +1,12 @@
+import { type __CloseButtonProps } from '../../CloseButton';
+export interface TourCloseButtonProps extends __CloseButtonProps {
+    /** Called when the close button is clicked */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare function TourCloseButton(_props: TourCloseButtonProps): import("react").JSX.Element | null;
+export declare namespace TourCloseButton {
+    var displayName: string;
+}
+export declare namespace TourCloseButton {
+    type Props = TourCloseButtonProps;
+}

package/lib/components/Tour/TourNavigation/TourNavigation.d.ts

@@ -0,0 +1,11 @@
+export interface TourNavigationProps {
+    /** Called when the navigation container is clicked (fires for clicks on any of its buttons and the step counter) */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare function TourNavigation(_props: TourNavigationProps): import("react").JSX.Element;
+export declare namespace TourNavigation {
+    var displayName: string;
+}
+export declare namespace TourNavigation {
+    type Props = TourNavigationProps;
+}

package/lib/components/Tour/TourOverlay/TourOverlay.d.ts

@@ -0,0 +1,22 @@
+export interface TourOverlayProps {
+    /** Rectangle describing the target element position */
+    targetRect?: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    } | null;
+    /** Overlay fill color */
+    color?: string;
+    /** Whether pointer events pass through the spotlight cutout to the target element, the rest of the overlay keeps blocking clicks */
+    withInteraction?: boolean;
+    /** Called when the overlay is clicked */
+    onClick?: React.MouseEventHandler<SVGSVGElement>;
+}
+export declare function TourOverlay(_props: TourOverlayProps): import("react").JSX.Element | null;
+export declare namespace TourOverlay {
+    var displayName: string;
+}
+export declare namespace TourOverlay {
+    type Props = TourOverlayProps;
+}

package/lib/components/Tour/TourRoot/TourRoot.d.ts

@@ -0,0 +1,72 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../../core';
+import { type PortalProps } from '../../Portal';
+import type { TransitionOverride } from '../../Transition';
+import type { TourStylesNames, TourCssVariables } from '../Tour';
+import { TourLabels } from '../Tour.context';
+export interface TourRootProps extends BoxProps, StylesApiProps<TourRootFactory>, ElementProps<'div'> {
+    /** Whether the tour is active @default false */
+    active?: boolean;
+    /** Total number of steps, used by `Tour.Navigation` and keyboard navigation to detect the last step */
+    stepsCount: number;
+    /** Called when the tour is closed */
+    onClose?: () => void;
+    /** Controlled current step index */
+    step?: number;
+    /** Uncontrolled default step index @default 0 */
+    defaultStep?: number;
+    /** Called when step changes */
+    onStepChange?: (step: number) => void;
+    /** Called when a step opens */
+    onStepOpen?: (step: number) => void;
+    /** Called when a step closes */
+    onStepClose?: (step: number) => void;
+    /** Whether `Tour.Overlay` is rendered @default true */
+    withOverlay?: boolean;
+    /** Whether pointer events pass through the spotlight cutout to the target element, the rest of the overlay keeps blocking clicks @default false */
+    withOverlayInteraction?: boolean;
+    /** Whether `Tour.CloseButton` is rendered @default true */
+    withCloseButton?: boolean;
+    /** Whether arrow keys navigate between steps @default true */
+    withKeyboardNavigation?: boolean;
+    /** Padding around the spotlight cutout in px @default 8 */
+    spotlightPadding?: number;
+    /** Border radius of the spotlight cutout in px @default 4 */
+    spotlightRadius?: number;
+    /** Whether pressing Escape closes the tour @default true */
+    closeOnEscape?: boolean;
+    /** Whether clicking the overlay closes the tour, with `withOverlayInteraction` only clicks outside the spotlight cutout close it @default false */
+    closeOnOverlayClick?: boolean;
+    /** Labels for tour UI elements */
+    labels?: Partial<TourLabels>;
+    /** Whether to render inside a portal @default true */
+    withinPortal?: boolean;
+    /** Props passed to the Portal component */
+    portalProps?: Omit<PortalProps, 'children'>;
+    /** z-index of the tour @default 10000 */
+    zIndex?: string | number;
+    /** Default transition props of `Tour.Tooltip` @default { duration: 200, transition: 'fade' } */
+    transitionProps?: TransitionOverride;
+    /** Tour step overlay color @default "rgba(0, 0, 0, 0.5)" */
+    overlayColor?: string;
+    /** Key of `theme.colors` or any valid CSS color, controls `Tour.Beacon` color and `Tour.Navigation` next button color @default theme.primaryColor */
+    color?: MantineColor;
+    /** Key of `theme.shadows` or any valid CSS box-shadow value, controls the tooltip shadow @default 'md' */
+    tooltipShadow?: string;
+    /** Tour content: `Tour.Overlay`, `Tour.Tooltip`, `Tour.Beacon` and other compound components */
+    children?: React.ReactNode;
+}
+export type TourRootFactory = Factory<{
+    props: TourRootProps;
+    ref: HTMLDivElement;
+    stylesNames: TourStylesNames;
+    vars: TourCssVariables;
+}>;
+export declare const TourRoot: import("../../..").MantineComponent<{
+    props: TourRootProps;
+    ref: HTMLDivElement;
+    stylesNames: TourStylesNames;
+    vars: TourCssVariables;
+}>;
+export declare namespace TourRoot {
+    type Props = TourRootProps;
+}

package/lib/components/Tour/TourStep/TourStep.d.ts

@@ -0,0 +1,30 @@
+import type { FloatingPosition } from '../../../utils/Floating';
+export interface TourStepProps {
+    /** CSS selector or ref to the target element. Selectors are resolved again when the element mounts later, refs are resolved once when the step activates – use a selector for elements that are not mounted yet. */
+    target?: string | React.RefObject<HTMLElement | null>;
+    /** Step title */
+    title?: React.ReactNode;
+    /** Step body content */
+    children?: React.ReactNode;
+    /** Called when this step becomes active */
+    onStepOpen?: () => void;
+    /** Called when this step is deactivated */
+    onStepClose?: () => void;
+    /** Tooltip position relative to the target element @default 'bottom' */
+    position?: FloatingPosition;
+    /** Whether to display the overlay for this step (per-step override) */
+    withOverlay?: boolean;
+    /** Padding around the spotlight cutout in px (per-step override) */
+    spotlightPadding?: number;
+    /** Border radius of the spotlight cutout in px (per-step override) */
+    spotlightRadius?: number;
+    /** Whether to display a beacon for this step (per-step override) */
+    withBeacon?: boolean;
+}
+export declare function TourStep(_props: TourStepProps): React.ReactElement | null;
+export declare namespace TourStep {
+    var displayName: string;
+}
+export declare namespace TourStep {
+    type Props = TourStepProps;
+}

package/lib/components/Tour/TourTitle/TourTitle.d.ts

@@ -0,0 +1,19 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type TourTitleStylesNames = 'title';
+export interface TourTitleProps extends BoxProps, CompoundStylesApiProps<TourTitleFactory>, ElementProps<'h3'> {
+}
+export type TourTitleFactory = Factory<{
+    props: TourTitleProps;
+    ref: HTMLHeadingElement;
+    stylesNames: TourTitleStylesNames;
+    compound: true;
+}>;
+export declare const TourTitle: import("../../..").MantineComponent<{
+    props: TourTitleProps;
+    ref: HTMLHeadingElement;
+    stylesNames: TourTitleStylesNames;
+    compound: true;
+}>;
+export declare namespace TourTitle {
+    type Props = TourTitleProps;
+}

package/lib/components/Tour/TourTooltip/TourTooltip.d.ts

@@ -0,0 +1,29 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+import { type FloatingPosition } from '../../../utils/Floating';
+import { type TransitionOverride } from '../../Transition';
+export type TourTooltipStylesNames = 'tooltip';
+export interface TourTooltipProps extends BoxProps, CompoundStylesApiProps<TourTooltipFactory>, ElementProps<'div'> {
+    /** Target element to position against */
+    targetElement?: HTMLElement | null;
+    /** Tooltip position @default 'bottom' */
+    position?: FloatingPosition;
+    /** Whether the tooltip is visible */
+    mounted?: boolean;
+    /** Transition props for the tooltip, merged with `transitionProps` of `Tour.Root` */
+    transitionProps?: TransitionOverride;
+}
+export type TourTooltipFactory = Factory<{
+    props: TourTooltipProps;
+    ref: HTMLDivElement;
+    stylesNames: TourTooltipStylesNames;
+    compound: true;
+}>;
+export declare const TourTooltip: import("../../..").MantineComponent<{
+    props: TourTooltipProps;
+    ref: HTMLDivElement;
+    stylesNames: TourTooltipStylesNames;
+    compound: true;
+}>;
+export declare namespace TourTooltip {
+    type Props = TourTooltipProps;
+}

package/lib/components/Tour/get-overlay-hit-path.d.ts

@@ -0,0 +1,2 @@
+import type { TargetRect } from './use-target-rect';
+export declare function getOverlayHitPath(targetRect: TargetRect | null | undefined, padding: number, radius: number): string;

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

@@ -0,0 +1,23 @@
+import type { TourCssVariables, TourFactory, TourProps, TourStylesNames } from './Tour';
+import type { TourContextValue, TourLabels } from './Tour.context';
+import type { TourBeaconProps } from './TourBeacon/TourBeacon';
+import type { TourBodyProps } from './TourBody/TourBody';
+import type { TourCloseButtonProps } from './TourCloseButton/TourCloseButton';
+import type { TourNavigationProps } from './TourNavigation/TourNavigation';
+import type { TourOverlayProps } from './TourOverlay/TourOverlay';
+import type { TourRootProps } from './TourRoot/TourRoot';
+import type { TourStepProps } from './TourStep/TourStep';
+import type { TourTitleProps } from './TourTitle/TourTitle';
+import type { TourTooltipProps } from './TourTooltip/TourTooltip';
+export { Tour } from './Tour';
+export { TourRoot } from './TourRoot/TourRoot';
+export { TourStep } from './TourStep/TourStep';
+export { TourOverlay } from './TourOverlay/TourOverlay';
+export { TourTooltip } from './TourTooltip/TourTooltip';
+export { TourBeacon } from './TourBeacon/TourBeacon';
+export { TourTitle } from './TourTitle/TourTitle';
+export { TourBody } from './TourBody/TourBody';
+export { TourCloseButton } from './TourCloseButton/TourCloseButton';
+export { TourNavigation } from './TourNavigation/TourNavigation';
+export { TourProvider, useTourContext, defaultLabels } from './Tour.context';
+export type { TourProps, TourFactory, TourCssVariables, TourStylesNames, TourRootProps, TourStepProps, TourOverlayProps, TourTooltipProps, TourBeaconProps, TourTitleProps, TourBodyProps, TourCloseButtonProps, TourNavigationProps, TourContextValue, TourLabels, };

package/lib/components/Tour/is-element-in-view.d.ts

@@ -0,0 +1 @@
+export declare function isElementInView(element: HTMLElement): boolean;

package/lib/components/Tour/press-aware-auto-update.d.ts

@@ -0,0 +1,2 @@
+import { type ReferenceType } from '@floating-ui/react';
+export declare function pressAwareAutoUpdate(reference: ReferenceType, floating: HTMLElement, update: () => void): () => void;

package/lib/components/Tour/use-target-rect.d.ts

@@ -0,0 +1,13 @@
+export type TourTarget = string | React.RefObject<HTMLElement | null> | undefined;
+export interface TargetRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export declare function resolveTarget(target: TourTarget): HTMLElement | null;
+export declare function useTargetElement(target: TourTarget): HTMLElement | null;
+export declare function useTargetRect(element: HTMLElement | null): {
+    rect: TargetRect | null;
+    updateRect: () => void;
+};

package/lib/components/Tour/use-tooltip-auto-focus.d.ts

@@ -0,0 +1,7 @@
+interface UseTooltipAutoFocusInput {
+    autoFocus: boolean;
+    opened: boolean;
+    step: number;
+}
+export declare function useTooltipAutoFocus({ autoFocus, opened, step }: UseTooltipAutoFocusInput): (node: HTMLElement | null) => (() => void) | undefined;
+export {};

package/lib/components/Tour/use-tour-state.d.ts

@@ -0,0 +1,23 @@
+export interface UseTourStateInput {
+    active: boolean | undefined;
+    onClose: (() => void) | undefined;
+    step: number | undefined;
+    defaultStep: number | undefined;
+    onStepChange: ((step: number) => void) | undefined;
+    onStepOpen: (step: number) => void;
+    onStepClose: (step: number) => void;
+    mode: 'guided' | 'beacon';
+    stepsCount: number;
+    closeOnEscape: boolean | undefined;
+    withKeyboardNavigation: boolean | undefined;
+}
+export declare function useTourState({ active, onClose, step, defaultStep, onStepChange, onStepOpen, onStepClose, mode, stepsCount, closeOnEscape, withKeyboardNavigation, }: UseTourStateInput): {
+    currentStep: number;
+    setStep: (index: number) => void;
+    beaconOpenStep: number | null;
+    openBeaconStep: (index: number) => void;
+    showTooltip: boolean;
+    displayStepIndex: number;
+    close: () => void;
+    targetRef: import("react").RefObject<HTMLElement | null>;
+};

package/lib/components/Tour/use-tour.d.ts

@@ -0,0 +1,40 @@
+import { useFloating } from '@floating-ui/react';
+import type { TourStepProps } from './TourStep/TourStep';
+import { type TargetRect } from './use-target-rect';
+export interface UseTourInput {
+    active?: boolean;
+    onClose?: () => void;
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    onStepOpen?: (step: number) => void;
+    onStepClose?: (step: number) => void;
+    mode?: 'guided' | 'beacon';
+    withKeyboardNavigation?: boolean;
+    withScrollIntoView?: boolean;
+    scrollToHandler?: (element: HTMLElement) => void;
+    closeOnEscape?: boolean;
+    maxWidth?: number;
+    stepTransitionDuration?: number;
+    children?: React.ReactNode;
+    stepComponent: React.ComponentType<any>;
+}
+export interface UseTourReturn {
+    steps: TourStepProps[];
+    setStep: (step: number) => void;
+    beaconOpenStep: number | null;
+    openBeaconStep: (step: number) => void;
+    close: () => void;
+    displayStep: TourStepProps | null;
+    displayStepIndex: number;
+    targetRect: TargetRect | null;
+    targetElement: HTMLElement | null;
+    floatingStyles: React.CSSProperties;
+    floatingRefs: ReturnType<typeof useFloating>['refs'];
+    isCentered: boolean;
+    constrainedWidth: number;
+    stepMoving: boolean;
+    showTooltip: boolean;
+    clearExitedTarget: () => void;
+}
+export declare function useTour({ active, onClose, step: stepProp, defaultStep, onStepChange, onStepOpen, onStepClose, mode, withKeyboardNavigation, withScrollIntoView, scrollToHandler, closeOnEscape, maxWidth, stepTransitionDuration, children, stepComponent, }: UseTourInput): UseTourReturn;

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -8,6 +8,18 @@ import { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './Tree
 export type TreeSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
 export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
+export interface TreeSelectRenderPillPayload {
+    /** Node associated with the pill. If the value is not present in `data`, a placeholder node with `label` equal to the value is passed. */
+    node: TreeNodeData;
+    /** Selected value that the pill represents */
+    value: string;
+    /** Removes the value from the selection. In `checkbox` mode unchecks the node and, unless `checkStrictly` is set, all its children, same as the default pill remove button. */
+    onRemove: () => void;
+    /** Value of the `disabled` prop passed to the component */
+    disabled?: boolean;
+    /** Value of the `readOnly` prop passed to the component */
+    readOnly?: boolean;
+}
 export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends BoxProps, __BaseInputProps, StylesApiProps<TreeSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
     /** Tree data */
     data: TreeNodeData[];
@@ -65,6 +77,8 @@ export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends
     onClear?: () => void;
     /** Custom node rendering in the dropdown */
     renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+    /** Custom pill rendering in `multiple` and `checkbox` modes. Not called for the overflow pill displayed when `maxDisplayedValues` is exceeded. */
+    renderPill?: (payload: TreeSelectRenderPillPayload) => React.ReactNode;
     /** Show tree connection lines between parent and child nodes @default true */
     withLines?: boolean;
     /** Props for the hidden input */

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

@@ -1,9 +1,9 @@
-import type { TreeSelectFactory, TreeSelectMode, TreeSelectProps, TreeSelectStylesNames, TreeSelectValue } from './TreeSelect';
+import type { TreeSelectFactory, TreeSelectMode, TreeSelectProps, TreeSelectRenderPillPayload, TreeSelectStylesNames, TreeSelectValue } from './TreeSelect';
 export { TreeSelect } from './TreeSelect';
 export { TreeSelectOption } from './TreeSelectOption';
 export type { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './TreeSelectOption';
 export type { CheckedStrategy } from './get-checked-values-by-strategy';
-export type { TreeSelectProps, TreeSelectStylesNames, TreeSelectFactory, TreeSelectMode, TreeSelectValue, };
+export type { TreeSelectProps, TreeSelectStylesNames, TreeSelectFactory, TreeSelectMode, TreeSelectValue, TreeSelectRenderPillPayload, };
 export declare namespace TreeSelect {
     type Props = TreeSelectProps;
     type StylesNames = TreeSelectStylesNames;

package/lib/components/index.d.ts

@@ -110,6 +110,9 @@ export * from './TextInput';
 export * from './ThemeIcon';
 export * from './Timeline';
 export * from './Title';
+export * from './Toggle';
+export * from './Toolbar';
+export * from './Tour';
 export * from './Tooltip';
 export * from './Transition';
 export * from './Tree';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.6.3",
+  "version": "9.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": "9.6.3",
+    "@mantine/hooks": "9.7.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -52,12 +52,12 @@
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^5.8.0"
+    "type-fest": "^5.10.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
   }
 }

package/styles/ActionBar.css

@@ -4,6 +4,7 @@
   gap: var(--mantine-spacing-sm);
   width: fit-content;
   margin-inline: auto;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
 }
 
 .m_eab73b29 {

package/styles/ActionBar.layer.css

@@ -4,6 +4,7 @@
   gap: var(--mantine-spacing-sm);
   width: fit-content;
   margin-inline: auto;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
 }
 
 .m_eab73b29 {