@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 { FlipTarget } from './FlipTarget/FlipTarget';
export type FlipStylesNames = 'root' | 'flip-inner' | 'flip-content';
export type FlipCssVariables = {
    root: '--flip-perspective' | '--flip-transition-duration' | '--flip-transition-timing-function';
};
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. Default `ease-in-out` */
    easing?: React.CSSProperties['transitionTimingFunction'];
    /** 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;
    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;
    };
}>;
export declare const Flip: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, FlipProps>) => React.ReactElement) & Omit<React.FunctionComponent<(FlipProps & {
    component?: any;
} & Omit<Omit<any, "ref">, keyof FlipProps | "component"> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (FlipProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
    props: FlipProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
    };
}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
    props: FlipProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
    };
}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
    props: FlipProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: FlipStylesNames;
    vars: FlipCssVariables;
    staticComponents: {
        Target: typeof FlipTarget;
    };
}> & {
    Target: typeof FlipTarget;
};