@helpwave/hightide/dist/components/user-action/Button.d.ts

helpwave's component and theming library

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';

declare const ButtonColorUtil: {
    solid: readonly ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"];
    text: readonly ["primary", "negative", "neutral"];
    outline: readonly ["primary"];
};
declare const IconButtonUtil: {
    icon: readonly ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral", "transparent"];
};
/**
 * The allowed colors for the SolidButton and IconButton
 */
type SolidButtonColor = typeof ButtonColorUtil.solid[number];
/**
 * The allowed colors for the OutlineButton
 */
type OutlineButtonColor = typeof ButtonColorUtil.outline[number];
/**
 * The allowed colors for the TextButton
 */
type TextButtonColor = typeof ButtonColorUtil.text[number];
/**
 * The allowed colors for the IconButton
 */
type IconButtonColor = typeof IconButtonUtil.icon[number];
/**
 * The different sizes for a button
 */
type ButtonSizes = 'small' | 'medium' | 'large';
type IconButtonSize = 'tiny' | 'small' | 'medium' | 'large';
/**
 * The shard properties between all button types
 */
type ButtonProps = PropsWithChildren<{
    /**
     * @default 'medium'
     */
    size?: ButtonSizes;
}> & ButtonHTMLAttributes<Element>;
declare const ButtonUtil: {
    paddingMapping: Record<ButtonSizes, string>;
    iconPaddingMapping: Record<IconButtonSize, string>;
};
type ButtonWithIconsProps = ButtonProps & {
    startIcon?: ReactNode;
    endIcon?: ReactNode;
};
type SolidButtonProps = ButtonWithIconsProps & {
    color?: SolidButtonColor;
};
type OutlineButtonProps = ButtonWithIconsProps & {
    color?: OutlineButtonColor;
};
type TextButtonProps = ButtonWithIconsProps & {
    color?: TextButtonColor;
    coloredHoverBackground?: boolean;
};
/**
 * The shard properties between all button types
 */
type IconButtonProps = PropsWithChildren<{
    /**
     * @default 'medium'
     */
    size?: IconButtonSize;
    color?: IconButtonColor;
}> & ButtonHTMLAttributes<Element>;
/**
 * A button with a solid background and different sizes
 */
declare const SolidButton: react.ForwardRefExoticComponent<{
    /**
     * @default 'medium'
     */
    size?: ButtonSizes;
} & {
    children?: ReactNode | undefined;
} & ButtonHTMLAttributes<Element> & {
    startIcon?: ReactNode;
    endIcon?: ReactNode;
} & {
    color?: SolidButtonColor;
} & react.RefAttributes<HTMLButtonElement>>;
/**
 * A button with an outline border and different sizes
 */
declare const OutlineButton: ({ children, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
/**
 * A text that is a button that can have different sizes
 */
declare const TextButton: ({ children, color, size, startIcon, endIcon, onClick, coloredHoverBackground, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
/**
 * A button for icons with a solid background and different sizes
 */
declare const IconButton: ({ children, color, size, className, ...restProps }: IconButtonProps) => react_jsx_runtime.JSX.Element;

export { ButtonColorUtil, type ButtonProps, ButtonUtil, IconButton, type IconButtonColor, type IconButtonProps, IconButtonUtil, OutlineButton, type OutlineButtonColor, type OutlineButtonProps, SolidButton, type SolidButtonColor, type SolidButtonProps, TextButton, type TextButtonColor, type TextButtonProps };