@spark-web/button/dist/declarations/src/use-button-styles.d.ts

--- title: Button storybookPath: forms-buttons-button--default isExperimentalPackage: true ---

import type { ButtonStyleProps } from "./types.js";
/**
 * useButtonStyles
 *
 * Custom hook for styling buttons and certain links.
 * Returns a tuple where the first item is an object of props to spread onto the
 * underlying `Box` component, and the second item is a CSS object that can be
 * passed to Emotion's `css` function.
 */
export declare function useButtonStyles({ iconOnly, prominence, rounded, size, tone, filled, }: UseButtonStylesProps): readonly [{
    readonly alignItems: "center";
    readonly background: string | number | undefined;
    readonly border: import("@spark-web/theme").ResponsiveProp<string> | undefined;
    readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"large" | "standard"> | undefined;
    readonly borderRadius: "small" | "medium" | "full";
    readonly cursor: "pointer";
    readonly display: "inline-flex";
    readonly gap: "small";
    readonly height: "medium" | "large";
    readonly justifyContent: "center";
    readonly paddingX: "medium" | "xlarge" | undefined;
    readonly position: "relative";
    readonly width: "medium" | "large" | undefined;
}, {
    readonly '&:not([aria-disabled=true])': {
        readonly ':hover': {
            readonly borderColor: string | undefined;
            readonly backgroundColor: string | undefined;
            readonly '> *': {
                readonly color: string | undefined;
                readonly stroke: string | undefined;
                readonly transitionProperty: string;
                readonly transitionTimingFunction: string;
                readonly transitionDuration: string;
            };
        };
        readonly ':active': {
            readonly borderColor: string | undefined;
            readonly backgroundColor: string | undefined;
            readonly transform: "scale(0.98)";
            readonly '> *': {
                readonly color: string | undefined;
                readonly stroke: string | undefined;
                readonly transitionProperty: string;
                readonly transitionTimingFunction: string;
                readonly transitionDuration: string;
            };
        };
        readonly ':focus': {
            boxShadow: string;
            outline: string;
            outlineOffset: string;
        } | {
            "[data-brighte-focus-visible] &": {
                boxShadow: string;
            };
            outline: string;
            outlineOffset: string;
        } | {
            border?: string;
            outline?: string;
            outlineOffset?: string;
            boxShadow?: string;
        };
    };
    readonly '&[aria-disabled=true]': {
        readonly backgroundColor: string | undefined;
        readonly borderColor: string | undefined;
        readonly cursor: "default";
        readonly '*': {
            readonly color: string | undefined;
            readonly stroke: string | undefined;
        };
        readonly ':focus': {
            boxShadow: string;
            outline: string;
            outlineOffset: string;
        } | {
            "[data-brighte-focus-visible] &": {
                boxShadow: string;
            };
            outline: string;
            outlineOffset: string;
        };
    };
    readonly transitionProperty: string;
    readonly transitionTimingFunction: string;
    readonly transitionDuration: string;
}, {
    readonly fontWeight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
}];
export type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded' | 'filled'> & Partial<Pick<ButtonStyleProps, 'rounded' | 'filled'>> & {
    /** Whether the children of the button is a single icon or not. */
    iconOnly: boolean;
};