goobs-frontend/dist/theme/pagination.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React } from 'react';
export type PaginationTheme = 'light' | 'dark' | 'sacred';
export interface PaginationStyles {
    /** Theme variant to apply */
    theme?: PaginationTheme;
    /** Disable the pagination */
    disabled?: boolean;
    /** Custom container background color */
    backgroundColor?: string;
    /** Custom text color */
    color?: string;
    /** Custom border color */
    borderColor?: string;
    /** Custom border radius */
    borderRadius?: string;
    /** Custom padding */
    padding?: string;
    /** Custom margin */
    margin?: string;
    /** Custom font size */
    fontSize?: string;
    /** Custom font family */
    fontFamily?: string;
    /** Button size variant */
    size?: 'small' | 'medium' | 'large';
    /** Custom hover effects */
    hoverColor?: string;
    /** Custom active/focus colors */
    activeColor?: string;
    /** Show/hide page numbers (for numbered pagination style) */
    showPageNumbers?: boolean;
    /** Maximum number of page numbers to show */
    maxPageNumbers?: number;
}
export interface ComputedPaginationStyles {
    container: React.CSSProperties;
    buttonContainer: React.CSSProperties;
    button: React.CSSProperties;
    buttonDisabled: React.CSSProperties;
    buttonHover: React.CSSProperties;
    buttonActive: React.CSSProperties;
    pageInfo: React.CSSProperties;
    pageNumber: React.CSSProperties;
    pageNumberActive: React.CSSProperties;
    ellipsis: React.CSSProperties;
}
export declare const paginationThemes: {
    light: {
        container: {
            backgroundColor: string;
            borderColor: string;
            color: string;
        };
        button: {
            backgroundColor: string;
            borderColor: string;
            color: string;
            hoverBackgroundColor: string;
            hoverBorderColor: string;
            activeBackgroundColor: string;
            activeBorderColor: string;
        };
        pageInfo: {
            color: string;
        };
        pageNumber: {
            backgroundColor: string;
            borderColor: string;
            color: string;
            hoverBackgroundColor: string;
            activeBackgroundColor: string;
            activeColor: string;
        };
    };
    dark: {
        container: {
            backgroundColor: string;
            borderColor: string;
            color: string;
        };
        button: {
            backgroundColor: string;
            borderColor: string;
            color: string;
            hoverBackgroundColor: string;
            hoverBorderColor: string;
            activeBackgroundColor: string;
            activeBorderColor: string;
        };
        pageInfo: {
            color: string;
        };
        pageNumber: {
            backgroundColor: string;
            borderColor: string;
            color: string;
            hoverBackgroundColor: string;
            activeBackgroundColor: string;
            activeColor: string;
        };
    };
    sacred: {
        container: {
            backgroundColor: string;
            borderColor: string;
            color: string;
        };
        button: {
            backgroundColor: string;
            borderColor: string;
            color: string;
            hoverBackgroundColor: string;
            hoverBorderColor: string;
            activeBackgroundColor: string;
            activeBorderColor: string;
        };
        pageInfo: {
            color: string;
        };
        pageNumber: {
            backgroundColor: string;
            borderColor: string;
            color: string;
            hoverBackgroundColor: string;
            activeBackgroundColor: string;
            activeColor: string;
        };
    };
};
export declare const getPaginationTheme: (theme?: PaginationTheme) => {
    container: {
        backgroundColor: string;
        borderColor: string;
        color: string;
    };
    button: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        hoverBackgroundColor: string;
        hoverBorderColor: string;
        activeBackgroundColor: string;
        activeBorderColor: string;
    };
    pageInfo: {
        color: string;
    };
    pageNumber: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        hoverBackgroundColor: string;
        activeBackgroundColor: string;
        activeColor: string;
    };
} | {
    container: {
        backgroundColor: string;
        borderColor: string;
        color: string;
    };
    button: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        hoverBackgroundColor: string;
        hoverBorderColor: string;
        activeBackgroundColor: string;
        activeBorderColor: string;
    };
    pageInfo: {
        color: string;
    };
    pageNumber: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        hoverBackgroundColor: string;
        activeBackgroundColor: string;
        activeColor: string;
    };
} | {
    container: {
        backgroundColor: string;
        borderColor: string;
        color: string;
    };
    button: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        hoverBackgroundColor: string;
        hoverBorderColor: string;
        activeBackgroundColor: string;
        activeBorderColor: string;
    };
    pageInfo: {
        color: string;
    };
    pageNumber: {
        backgroundColor: string;
        borderColor: string;
        color: string;
        hoverBackgroundColor: string;
        activeBackgroundColor: string;
        activeColor: string;
    };
};
export declare const getPaginationStyles: (styles?: PaginationStyles, isDisabled?: boolean) => ComputedPaginationStyles;
//# sourceMappingURL=pagination.d.ts.map