react-chrono/dist/types/components/timeline/timeline-new.css.d.ts

A Modern Timeline component for React

export declare const wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
    mode: {
        horizontal: string;
        vertical: string;
        alternating: string;
        horizontalAll: string;
    };
    fullscreen: {
        true: {
            position: "fixed";
            top: number;
            left: number;
            width: "100vw";
            height: "100vh";
            zIndex: number;
            backgroundColor: `var(--${string})`;
            padding: `var(--${string})`;
            overflow: "auto";
        };
        false: {};
    };
    keyboardNavigation: {
        true: {};
        false: {};
    };
}>;
export declare const mainWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
    mode: {
        vertical: {
            minHeight: "500px";
            flexDirection: "column";
            height: number;
            overflowY: "auto";
            overflowX: "visible";
            paddingLeft: number;
            paddingRight: number;
        };
        horizontal: {
            minHeight: "150px";
            flexDirection: "row";
            alignItems: "center";
            justifyContent: "center";
        };
        horizontalAll: {
            minHeight: "200px";
            flexDirection: "row";
            alignItems: "flex-start";
        };
        alternating: {
            minHeight: "500px";
            flexDirection: "column";
            height: number;
            overflowY: "auto";
            overflowX: "visible";
            paddingLeft: number;
            paddingRight: number;
        };
    };
}>;
export declare const contentRenderer: import('@vanilla-extract/recipes').RuntimeFn<{
    mode: {
        vertical: {
            minHeight: "200px";
            padding: `var(--${string}) 0`;
            flexDirection: "column";
            scrollSnapType: "y mandatory";
        };
        horizontal: {
            minHeight: `calc(var(--${string}) + 120px)`;
            padding: `var(--${string}) var(--${string})`;
            paddingTop: `var(--${string})`;
            paddingBottom: `calc(var(--${string}) + var(--${string}))`;
            scrollSnapType: "x mandatory";
            overflow: "visible";
        };
        alternating: {
            minHeight: "200px";
            padding: `var(--${string}) 0`;
            flexDirection: "column";
            scrollSnapType: "y mandatory";
        };
        horizontalAll: {
            minHeight: `calc(var(--${string}) + 120px)`;
            padding: `var(--${string}) var(--${string})`;
            paddingTop: `var(--${string})`;
            paddingBottom: `calc(var(--${string}) + var(--${string}))`;
            scrollSnapType: "x mandatory";
            overflowX: "auto";
            overflowY: "visible";
            flexDirection: "row";
            alignItems: "flex-start";
        };
    };
}>;
export declare const main: import('@vanilla-extract/recipes').RuntimeFn<{
    mode: {
        vertical: {
            alignItems: "flex-start";
            justifyContent: "flex-start";
            width: "100%";
            height: "100%";
            flexDirection: "column";
            position: "static";
            transform: "none";
        };
        horizontal: {
            alignItems: "center";
            justifyContent: "center";
            flexDirection: "row";
        };
        alternating: {
            alignItems: "flex-start";
            justifyContent: "flex-start";
            width: "100%";
            height: "100%";
            flexDirection: "column";
            position: "static";
            transform: "none";
        };
        horizontalAll: {
            alignItems: "center";
            justifyContent: "flex-start";
            flexDirection: "row";
            width: "100%";
            height: "100%";
            overflowX: "auto";
            position: "static";
            transform: "none";
        };
    };
}>;
export declare const outline: string;
export declare const timelineAnimations: {
    cardEnter: string;
    cardExit: string;
    pointPulse: string;
    slideInLeft: string;
    slideInRight: string;
    slideInUp: string;
    fadeIn: string;
};
export declare const timelineStates: {
    loading: string;
    error: string;
    empty: string;
};
export declare const toolbarContainer: import('@vanilla-extract/recipes').RuntimeFn<{
    position: {
        top: {
            order: number;
            marginBottom: `var(--${string})`;
        };
        bottom: {
            order: number;
            borderTop: `1px solid var(--${string})`;
            marginTop: `var(--${string})`;
        };
    };
    sticky: {
        true: {
            position: "sticky";
            backgroundColor: `var(--${string})f5`;
            backdropFilter: "blur(8px)";
            WebkitBackdropFilter: "blur(8px)";
            boxShadow: `0 2px 8px -2px var(--${string})`;
        };
        false: {};
    };
}>;
export type TimelineWrapperVariants = Parameters<typeof wrapper>[0];
export type TimelineMainWrapperVariants = Parameters<typeof mainWrapper>[0];
export type TimelineContentRendererVariants = Parameters<typeof contentRenderer>[0];
export type TimelineMainVariants = Parameters<typeof main>[0];
export type ToolbarContainerVariants = Parameters<typeof toolbarContainer>[0];
//# sourceMappingURL=timeline-new.css.d.ts.map