@gfazioli/mantine-flip/dist/types/Flip.d.ts

Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.

import React from 'react';
import { BoxProps, PolymorphicFactory, StylesApiProps } from '@mantine/core';
import { FlipBack } from './FlipBack/FlipBack';
import { FlipFront } from './FlipFront/FlipFront';
import { FlipTarget } from './FlipTarget/FlipTarget';
export type FlipStylesNames = 'root' | 'flip-container' | 'flip-front-face' | 'flip-back-face';
export type FlipCssVariables = {
    root: '--flip-perspective' | '--flip-transition-duration' | '--flip-transition-timing-function';
    'flip-container': never;
    'flip-front-face': never;
    'flip-back-face': never;
};
export type FlipDirection = 'horizontal' | 'vertical';
export type FlipIn = 'positive' | 'negative';
export type FlipOut = FlipIn;
export interface FlipBaseProps {
    /** Perspective value for flip animation. Default `1000px` */
    perspective?: string;
    /** Flip animation duration in seconds. Default `.8` */
    duration?: number;
    /** Flip animation timing function. Accepts any CSS timing function or `"spring"` for a physics-based spring curve. Default `ease-in-out` */
    easing?: React.CSSProperties['transitionTimingFunction'] | 'spring';
    /** Controlled flip opened state */
    flipped?: boolean;
    /** Uncontrolled flip initial opened state */
    defaultFlipped?: boolean;
    /** Flip direction to show the front and back side. Default `horizontal` */
    direction?: FlipDirection;
    /** Flip direction to show the back side. Default `negative` */
    directionFlipIn?: FlipIn;
    /** Flip direction to hide the back side. Default `positive` */
    directionFlipOut?: FlipOut;
    /** Called when flip flipped state changes */
    onChange?: (flipped: boolean) => void;
    /** Called when Flip is shown back side */
    onBack?: () => void;
    /** Called when Flip is shown front side */
    onFront?: () => void;
    /** Called when the flip transition animation ends */
    onTransitionEnd?: () => void;
    /** When true, flip is disabled and Flip.Target clicks are ignored. Default `false` */
    disabled?: boolean;
    /** When true, the back face is not rendered until the first flip. Default `false` */
    lazyBack?: boolean;
    /** When true, enables swipe gestures to trigger flip on touch devices. Swipe direction follows the `direction` prop. Default `false` */
    swipeable?: boolean;
    /** Minimum swipe distance in pixels to trigger a flip. Default `50` */
    swipeThreshold?: number;
    children?: React.ReactNode;
}
export interface FlipProps extends BoxProps, FlipBaseProps, StylesApiProps<FlipFactory> {
}
export type FlipFactory = PolymorphicFactory<{
    props: FlipProps;
    defaultComponent: 'div';
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
        Front: typeof FlipFront;
        Back: typeof FlipBack;
    };
}>;
export declare const Flip: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, FlipProps>) => React.ReactElement) & Omit<React.FunctionComponent<(FlipProps & {
    component?: any;
} & Omit<any, keyof FlipProps | "component"> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (FlipProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("@mantine/core").ThemeExtend<{
    props: FlipProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
        Front: typeof FlipFront;
        Back: typeof FlipBack;
    };
}> & import("@mantine/core").ComponentClasses<{
    props: FlipProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
        Front: typeof FlipFront;
        Back: typeof FlipBack;
    };
}> & {
    varsResolver: import("@mantine/core").VarsResolver<{
        props: FlipProps;
        defaultComponent: "div";
        defaultRef: HTMLDivElement;
        stylesNames: FlipStylesNames;
        vars: FlipCssVariables;
        staticComponents: {
            Target: typeof FlipTarget;
            Front: typeof FlipFront;
            Back: typeof FlipBack;
        };
    }>;
} & import("@mantine/core").PolymorphicComponentWithProps<{
    props: FlipProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
        Front: typeof FlipFront;
        Back: typeof FlipBack;
    };
}> & {
    Target: typeof FlipTarget;
    Front: typeof FlipFront;
    Back: typeof FlipBack;
};