react-chrono/dist/types/styles/recipes/component-patterns.css.d.ts

A Modern Timeline component for React

export declare const baseContainer: import('@vanilla-extract/recipes').RuntimeFn<{
    direction: {
        row: string;
        column: string;
        rowReverse: string;
        columnReverse: string;
    };
    alignment: {
        start: string;
        center: string;
        end: string;
        stretch: string;
        baseline: string;
    };
    distribution: {
        start: string;
        center: string;
        end: string;
        between: string;
        around: string;
        evenly: string;
    };
    spacing: {
        none: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    wrap: {
        true: string;
        false: string;
    };
}>;
export declare const baseInteractive: import('@vanilla-extract/recipes').RuntimeFn<{
    state: {
        default: {};
        hover: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
        };
        active: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
        };
        focus: {
            boxShadow: `0 0 0 var(--${string}) var(--${string})`;
        };
        disabled: (string | {
            opacity: `var(--${string})`;
            filter: `var(--${string})`;
        })[];
    };
    focusRing: {
        true: {
            selectors: {
                '&:focus-visible': {
                    outline: `var(--${string})`;
                    outlineOffset: `var(--${string})`;
                };
            };
        };
        false: {};
    };
}>;
export declare const baseCard: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: (string | {
            borderRadius: `var(--${string})`;
            minWidth: "200px";
        })[];
        md: (string | {
            borderRadius: `var(--${string})`;
            minWidth: "280px";
        })[];
        lg: (string | {
            borderRadius: `var(--${string})`;
            minWidth: "320px";
        })[];
    };
    elevation: {
        flat: {
            boxShadow: `var(--${string})`;
        };
        low: {
            boxShadow: `var(--${string})`;
        };
        medium: {
            boxShadow: `var(--${string})`;
        };
        high: {
            boxShadow: `var(--${string})`;
        };
    };
    interactive: {
        true: (string | {
            selectors: {
                '&:hover': {
                    boxShadow: `var(--${string})`;
                    transform: "translateY(-2px)";
                };
                '&:active': {
                    transform: "translateY(0px)";
                    transition: `all var(--${string}) var(--${string})`;
                };
            };
        })[];
        false: {};
    };
    bordered: {
        true: {
            '::before': {
                content: "\"\"";
                position: "absolute";
                inset: number;
                borderRadius: "inherit";
                padding: "1px";
                background: `var(--${string})`;
                mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
                maskComposite: "xor";
                WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
                WebkitMaskComposite: "xor";
                pointerEvents: "none";
            };
        };
        false: {};
    };
    fullWidth: {
        true: string;
        false: {};
    };
}>;
export declare const baseButton: import('@vanilla-extract/recipes').RuntimeFn<{
    variant: {
        primary: {
            background: `linear-gradient(135deg, var(--${string}) 0%, var(--${string})f0 100%)`;
            color: `var(--${string})`;
            selectors: {
                '&:hover': {
                    background: `var(--${string})`;
                    borderColor: `var(--${string})`;
                };
                '&:active': {
                    background: `var(--${string})`;
                };
            };
        };
        secondary: {
            background: "transparent";
            color: `var(--${string})`;
            borderColor: `var(--${string})`;
            selectors: {
                '&:hover': {
                    background: `var(--${string})`;
                    borderColor: `var(--${string})`;
                };
            };
        };
        ghost: {
            background: "transparent";
            color: `var(--${string})`;
            selectors: {
                '&:hover': {
                    background: `var(--${string})`;
                };
            };
        };
    };
    size: {
        sm: (string | {
            minWidth: `var(--${string})`;
            height: `var(--${string})`;
        })[];
        md: (string | {
            minWidth: `var(--${string})`;
            height: `var(--${string})`;
        })[];
        lg: (string | {
            minWidth: `var(--${string})`;
            height: `var(--${string})`;
        })[];
    };
    shape: {
        square: {};
        rounded: string;
        pill: string;
    };
    fullWidth: {
        true: string;
        false: {};
    };
}>;
export declare const baseText: import('@vanilla-extract/recipes').RuntimeFn<{
    variant: {
        heading1: string;
        heading2: string;
        heading3: string;
        body: string;
        caption: string;
        small: string;
    };
    color: {
        primary: {
            color: `var(--${string})`;
        };
        secondary: {
            color: `var(--${string})`;
        };
        muted: {
            color: `var(--${string})`;
        };
        inherit: {
            color: "inherit";
        };
    };
    align: {
        left: string;
        center: string;
        right: string;
        justify: string;
    };
    truncate: {
        true: {
            overflow: "hidden";
            textOverflow: "ellipsis";
            whiteSpace: "nowrap";
        };
        false: {};
    };
}>;
export declare const baseInput: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: string[];
        md: string[];
        lg: string[];
    };
    variant: {
        default: {
            background: `var(--${string})`;
        };
        filled: {
            background: `var(--${string})`;
        };
    };
}>;
export declare const layoutContainer: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: {
            maxWidth: `var(--${string})`;
        };
        md: {
            maxWidth: `var(--${string})`;
        };
        lg: {
            maxWidth: `var(--${string})`;
        };
        xl: {
            maxWidth: `var(--${string})`;
        };
        full: {
            maxWidth: "none";
        };
    };
    padding: {
        none: string;
        sm: string[];
        md: string[];
        lg: string[];
    };
}>;
export declare const utilityPatterns: {
    visuallyHidden: string;
    resetButton: string;
    resetList: string;
    smoothScroll: string;
    focusTrap: string;
};
export declare const componentPatterns: {
    container: import('@vanilla-extract/recipes').RuntimeFn<{
        direction: {
            row: string;
            column: string;
            rowReverse: string;
            columnReverse: string;
        };
        alignment: {
            start: string;
            center: string;
            end: string;
            stretch: string;
            baseline: string;
        };
        distribution: {
            start: string;
            center: string;
            end: string;
            between: string;
            around: string;
            evenly: string;
        };
        spacing: {
            none: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
        };
        wrap: {
            true: string;
            false: string;
        };
    }>;
    interactive: import('@vanilla-extract/recipes').RuntimeFn<{
        state: {
            default: {};
            hover: {
                opacity: `var(--${string})`;
                transform: `var(--${string})`;
            };
            active: {
                opacity: `var(--${string})`;
                transform: `var(--${string})`;
            };
            focus: {
                boxShadow: `0 0 0 var(--${string}) var(--${string})`;
            };
            disabled: (string | {
                opacity: `var(--${string})`;
                filter: `var(--${string})`;
            })[];
        };
        focusRing: {
            true: {
                selectors: {
                    '&:focus-visible': {
                        outline: `var(--${string})`;
                        outlineOffset: `var(--${string})`;
                    };
                };
            };
            false: {};
        };
    }>;
    card: import('@vanilla-extract/recipes').RuntimeFn<{
        size: {
            sm: (string | {
                borderRadius: `var(--${string})`;
                minWidth: "200px";
            })[];
            md: (string | {
                borderRadius: `var(--${string})`;
                minWidth: "280px";
            })[];
            lg: (string | {
                borderRadius: `var(--${string})`;
                minWidth: "320px";
            })[];
        };
        elevation: {
            flat: {
                boxShadow: `var(--${string})`;
            };
            low: {
                boxShadow: `var(--${string})`;
            };
            medium: {
                boxShadow: `var(--${string})`;
            };
            high: {
                boxShadow: `var(--${string})`;
            };
        };
        interactive: {
            true: (string | {
                selectors: {
                    '&:hover': {
                        boxShadow: `var(--${string})`;
                        transform: "translateY(-2px)";
                    };
                    '&:active': {
                        transform: "translateY(0px)";
                        transition: `all var(--${string}) var(--${string})`;
                    };
                };
            })[];
            false: {};
        };
        bordered: {
            true: {
                '::before': {
                    content: "\"\"";
                    position: "absolute";
                    inset: number;
                    borderRadius: "inherit";
                    padding: "1px";
                    background: `var(--${string})`;
                    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
                    maskComposite: "xor";
                    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
                    WebkitMaskComposite: "xor";
                    pointerEvents: "none";
                };
            };
            false: {};
        };
        fullWidth: {
            true: string;
            false: {};
        };
    }>;
    button: import('@vanilla-extract/recipes').RuntimeFn<{
        variant: {
            primary: {
                background: `linear-gradient(135deg, var(--${string}) 0%, var(--${string})f0 100%)`;
                color: `var(--${string})`;
                selectors: {
                    '&:hover': {
                        background: `var(--${string})`;
                        borderColor: `var(--${string})`;
                    };
                    '&:active': {
                        background: `var(--${string})`;
                    };
                };
            };
            secondary: {
                background: "transparent";
                color: `var(--${string})`;
                borderColor: `var(--${string})`;
                selectors: {
                    '&:hover': {
                        background: `var(--${string})`;
                        borderColor: `var(--${string})`;
                    };
                };
            };
            ghost: {
                background: "transparent";
                color: `var(--${string})`;
                selectors: {
                    '&:hover': {
                        background: `var(--${string})`;
                    };
                };
            };
        };
        size: {
            sm: (string | {
                minWidth: `var(--${string})`;
                height: `var(--${string})`;
            })[];
            md: (string | {
                minWidth: `var(--${string})`;
                height: `var(--${string})`;
            })[];
            lg: (string | {
                minWidth: `var(--${string})`;
                height: `var(--${string})`;
            })[];
        };
        shape: {
            square: {};
            rounded: string;
            pill: string;
        };
        fullWidth: {
            true: string;
            false: {};
        };
    }>;
    text: import('@vanilla-extract/recipes').RuntimeFn<{
        variant: {
            heading1: string;
            heading2: string;
            heading3: string;
            body: string;
            caption: string;
            small: string;
        };
        color: {
            primary: {
                color: `var(--${string})`;
            };
            secondary: {
                color: `var(--${string})`;
            };
            muted: {
                color: `var(--${string})`;
            };
            inherit: {
                color: "inherit";
            };
        };
        align: {
            left: string;
            center: string;
            right: string;
            justify: string;
        };
        truncate: {
            true: {
                overflow: "hidden";
                textOverflow: "ellipsis";
                whiteSpace: "nowrap";
            };
            false: {};
        };
    }>;
    input: import('@vanilla-extract/recipes').RuntimeFn<{
        size: {
            sm: string[];
            md: string[];
            lg: string[];
        };
        variant: {
            default: {
                background: `var(--${string})`;
            };
            filled: {
                background: `var(--${string})`;
            };
        };
    }>;
    layout: import('@vanilla-extract/recipes').RuntimeFn<{
        size: {
            sm: {
                maxWidth: `var(--${string})`;
            };
            md: {
                maxWidth: `var(--${string})`;
            };
            lg: {
                maxWidth: `var(--${string})`;
            };
            xl: {
                maxWidth: `var(--${string})`;
            };
            full: {
                maxWidth: "none";
            };
        };
        padding: {
            none: string;
            sm: string[];
            md: string[];
            lg: string[];
        };
    }>;
    utils: {
        visuallyHidden: string;
        resetButton: string;
        resetList: string;
        smoothScroll: string;
        focusTrap: string;
    };
};
//# sourceMappingURL=component-patterns.css.d.ts.map