@gfazioli/mantine-text-animate/dist/types/SplitFlap/SplitFlap.d.ts

The TextAnimate component allows you to animate text with various effects.

import { type BoxProps, type MantineColor, type MantineRadius, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
import React from 'react';
import { type SplitFlapBaseProps } from './use-split-flap';
export type SplitFlapStylesNames = 'root' | 'character' | 'charTop' | 'charBottom' | 'flapTop' | 'flapBottom';
export type SplitFlapCssVariables = {
    root: '--text-animate-split-flap-bg' | '--text-animate-split-flap-color' | '--text-animate-split-flap-gap' | '--text-animate-split-flap-flip-duration' | '--text-animate-split-flap-char-width' | '--text-animate-split-flap-char-height' | '--text-animate-split-flap-radius' | '--text-animate-split-flap-divider-color';
};
export interface SplitFlapProps extends BoxProps, SplitFlapBaseProps, StylesApiProps<SplitFlapFactory> {
    /**
     * Background color of each flap
     * @default '#1a1a2e'
     */
    bg?: MantineColor;
    /**
     * Text color
     * @default '#e0e0e0'
     */
    textColor?: MantineColor;
    /**
     * Gap between characters in px
     * @default 4
     */
    gap?: number;
    /**
     * Width of each character cell
     * @default '1.2em'
     */
    charWidth?: string;
    /**
     * Height of each character cell
     * @default '1.8em'
     */
    charHeight?: string;
    /**
     * Border radius of each flap card
     * @default '4px'
     */
    radius?: MantineRadius;
    /**
     * Color of the horizontal divider line between top and bottom halves.
     * Set to 'transparent' to hide it.
     * @default 'rgba(0,0,0,0.3)'
     */
    dividerColor?: MantineColor;
}
export type SplitFlapFactory = PolymorphicFactory<{
    props: SplitFlapProps;
    defaultComponent: 'div';
    defaultRef: HTMLDivElement;
    stylesNames: SplitFlapStylesNames;
    vars: SplitFlapCssVariables;
}>;
/**
 * SplitFlap Component
 *
 * An airport departure board (split-flap display) effect that animates text
 * by cycling each character through a character set with a 3D flip animation.
 */
export declare const SplitFlap: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, SplitFlapProps>) => React.ReactElement) & Omit<React.FunctionComponent<(SplitFlapProps & {
    component?: any;
} & Omit<any, "component" | keyof SplitFlapProps> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (SplitFlapProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("@mantine/core").ThemeExtend<{
    props: SplitFlapProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: SplitFlapStylesNames;
    vars: SplitFlapCssVariables;
}> & import("@mantine/core").ComponentClasses<{
    props: SplitFlapProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: SplitFlapStylesNames;
    vars: SplitFlapCssVariables;
}> & {
    varsResolver: import("@mantine/core").VarsResolver<{
        props: SplitFlapProps;
        defaultComponent: "div";
        defaultRef: HTMLDivElement;
        stylesNames: SplitFlapStylesNames;
        vars: SplitFlapCssVariables;
    }>;
} & import("@mantine/core").PolymorphicComponentWithProps<{
    props: SplitFlapProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: SplitFlapStylesNames;
    vars: SplitFlapCssVariables;
}> & Record<string, never>;