react-statix/dist/components/table/useStyle.d.ts

React components for statix localization management

interface UseStyleOptions {
    isFirstColumn?: boolean;
    isEvenRow?: boolean;
    isOpen?: boolean;
    disabled?: boolean;
}
export declare const colors: {
    bg: {
        primary: string;
        secondary: string;
        header: string;
        body: string;
        hover: string;
        focus: string;
    };
    border: {
        primary: string;
        focus: string;
        light: string;
        textarea: string;
    };
    text: {
        primary: string;
        secondary: string;
        muted: string;
    };
    state: {
        success: string;
        warning: string;
        error: string;
        info: string;
    };
};
export declare const typography: {
    fontSize: {
        xs: string;
        sm: string;
        base: string;
        lg: string;
        xl: string;
    };
    fontWeight: {
        normal: string;
        medium: string;
        semibold: string;
        bold: string;
    };
    lineHeight: {
        tight: string;
        normal: string;
        relaxed: string;
    };
};
export declare const spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
};
export declare const borderRadius: {
    none: string;
    sm: string;
    md: string;
    lg: string;
    table: string;
    xl: string;
    full: string;
};
export declare const shadows: {
    sm: string;
    md: string;
    lg: string;
    focus: string;
    focusRing: string;
    textareaFocus: string;
};
export declare const transitions: {
    fast: string;
    normal: string;
    slow: string;
};
export declare const useStyle: () => {
    container: {
        padding: string;
        backgroundColor: string;
        minHeight: string;
    };
    title: {
        fontSize: string;
        lineHeight: string;
        fontWeight: string;
        marginBottom: string;
        textAlign: "center";
        color: string;
    };
    tableWrapper: {
        position: "relative";
        overflow: string;
        borderRadius: string;
        border: string;
        backgroundColor: string;
    };
    scrollContainer: {
        overflowY: "auto";
        overflowX: "auto";
        position: "relative";
        flex: number;
        borderRadius: string;
        border: string;
        zIndex: number;
        maxHeight: string;
    };
    table: {
        tableLayout: "fixed";
        borderCollapse: "collapse";
    };
    thead: {
        position: "sticky";
        top: number;
        backgroundColor: string;
        color: string;
        fontWeight: string;
        zIndex: number;
    };
    th: (options?: UseStyleOptions) => {
        position: "relative" | "sticky";
        left?: number | undefined;
        backgroundColor?: string | undefined;
        zIndex?: number | undefined;
        padding: string;
        textAlign: "left";
        fontWeight: string;
        fontSize: string;
        lineHeight: string;
    };
    tr: {
        backgroundColor: string;
        transition: string;
        borderBottom: string;
        borderTop: string;
        borderRight: string;
    };
    td: (options?: UseStyleOptions) => {
        position?: "sticky" | undefined;
        left?: number | undefined;
        zIndex?: number | undefined;
        backgroundColor?: string | undefined;
        padding: string;
        fontSize: string;
        fontWeight: string;
        lineHeight: string;
        color: string;
        verticalAlign: string;
    };
    textarea: {
        width: string;
        padding: string;
        border: string;
        borderRadius: string;
        fontSize: string;
        color: string;
        fontWeight: string;
        lineHeight: string;
        outline: string;
        resize: "none";
        overflow: string;
        minHeight: string;
        backgroundColor: string;
        transition: string;
    };
    textareaFocus: {
        borderColor: string;
        backgroundColor: string;
        boxShadow: string;
    };
    searchInput: {
        width: string;
        maxWidth: string;
        padding: string;
        border: string;
        borderRadius: string;
        fontSize: string;
        color: string;
        fontWeight: string;
        lineHeight: string;
        outline: string;
        backgroundColor: string;
        transition: string;
        fontFamily: string;
    };
    searchInputFocus: {
        borderColor: string;
        backgroundColor: string;
        boxShadow: string;
    };
    keyDisplay: {
        fontSize: string;
        color: string;
    };
    resizer: {
        position: "absolute";
        top: number;
        right: number;
        width: string;
        height: string;
        cursor: string;
        opacity: number;
        transition: string;
        backgroundColor: string;
    };
    resizerVisible: {
        opacity: number;
    };
    button: {
        display: string;
        justifyContent: string;
        alignItems: string;
        width: string;
        border: string;
        borderRadius: string;
        fontSize: string;
        color: string;
        fontWeight: string;
        lineHeight: string;
        boxShadow: string;
        padding: string;
        cursor: string;
        transition: string;
        backgroundColor: string;
    };
    buttonFocus: {
        borderColor: string;
        backgroundColor: string;
        boxShadow: string;
    };
    dropdown: {
        position: "relative";
        display: string;
        textAlign: "left";
    };
    dropdownMenu: (options?: UseStyleOptions) => {
        position: "absolute";
        right: number;
        marginTop: string;
        width: string;
        borderRadius: string;
        backgroundColor: string;
        borderColor: string;
        boxShadow: string;
        zIndex: number;
        display?: string | undefined;
    };
    dropdownItem: {
        display: string;
        alignItems: string;
        padding: string;
        fontSize: string;
        lineHeight: string;
        color: string;
        cursor: string;
        backgroundColor: string;
    };
    checkbox: {
        appearance: "none";
        backgroundColor: string;
        border: string;
        borderRadius: string;
        display: string;
        flexShrink: number;
        height: string;
        width: string;
        color: string;
        transition: string;
        marginRight: string;
    };
    checkboxChecked: {
        backgroundColor: string;
        borderColor: string;
        backgroundImage: string;
    };
    noData: {
        textAlign: "center";
        padding: string;
        color: string;
        fontSize: string;
        lineHeight: string;
    };
    icon: {
        marginLeft: string;
        marginRight: string;
        height: string;
        width: string;
    };
};
export {};