@ntragas/pouncejstest/dist/cjs/components/IconButton/useIconButtonStyles.d.ts

A collection of UI components from Panther labs

import { AbstractButtonProps } from '../AbstractButton';
import { IconButtonProps } from './IconButton';
import { Theme } from '../../theme';
import { ButtonProps } from '../Button';
declare type ButtonColorVariant = ButtonProps['variantColor'];
declare type UseIconButtonStyles = Required<Pick<IconButtonProps, 'variantColor' | 'variant' | 'size' | 'variantBorderStyle'>>;
export declare const getUnstyledButtonStyles: (theme: Theme) => {
    _focus: {
        backgroundColor: "transparent" | "inherit" | "black" | "white" | "current" | "white-100" | "navyblue-100" | "navyblue-200" | "navyblue-300" | "navyblue-350" | "navyblue-400" | "navyblue-500" | "navyblue-600" | "navyblue-700" | "navyblue-800" | "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | "magenta-600" | "magenta-700" | "magenta-800" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "violet-100" | "violet-200" | "violet-300" | "violet-400" | "violet-500" | "violet-600" | "violet-700" | "violet-800";
    };
};
export declare const getGhostButtonStyles: (theme: Theme, variantColor: ButtonColorVariant) => {
    transition: string;
    border: string;
    borderColor: string;
    backgroundColor: string;
    _hover: {
        backgroundColor: "transparent" | "inherit" | "black" | "white" | "current" | "white-100" | "navyblue-100" | "navyblue-200" | "navyblue-300" | "navyblue-350" | "navyblue-400" | "navyblue-500" | "navyblue-600" | "navyblue-700" | "navyblue-800" | "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | "magenta-600" | "magenta-700" | "magenta-800" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "violet-100" | "violet-200" | "violet-300" | "violet-400" | "violet-500" | "violet-600" | "violet-700" | "violet-800";
    };
    _focus: {
        backgroundColor: "transparent" | "inherit" | "black" | "white" | "current" | "white-100" | "navyblue-100" | "navyblue-200" | "navyblue-300" | "navyblue-350" | "navyblue-400" | "navyblue-500" | "navyblue-600" | "navyblue-700" | "navyblue-800" | "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | "magenta-600" | "magenta-700" | "magenta-800" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "violet-100" | "violet-200" | "violet-300" | "violet-400" | "violet-500" | "violet-600" | "violet-700" | "violet-800";
    };
    _active: {
        backgroundColor: string;
    };
};
export declare const getSolidButtonStyles: (theme: Theme, variantColor: ButtonColorVariant) => {
    transition: string;
    border: string;
    borderColor: string;
    backgroundColor: string;
    _hover: {
        backgroundColor: string;
        borderColor: string;
    };
    _focus: {
        backgroundColor: string;
        borderColor: string;
    };
    _active: {
        backgroundColor: string;
        borderColor: string;
    };
};
declare const useIconButtonStyles: ({ variantColor, variantBorderStyle, variant, size, }: UseIconButtonStyles) => AbstractButtonProps;
export default useIconButtonStyles;