@coveord/plasma-mantine/dist/esm/components/Button/Button.js

A Plasma flavoured Mantine theme

import { jsx as _jsx } from "react/jsx-runtime";
import { Button as MantineButton, polymorphicFactory } from '@mantine/core';
import { useClickWithLoading } from '../../hooks/useClickWithLoading.js';
import { ButtonWithDisabledTooltip } from './ButtonWithDisabledTooltip.js';
export const Button = polymorphicFactory(({ disabledTooltip, disabled, disabledTooltipProps, loading, onClick, 'data-disabled': dataDisabled, ...others }, ref)=>{
    const { isLoading, handleClick } = useClickWithLoading(onClick);
    return /*#__PURE__*/ _jsx(ButtonWithDisabledTooltip, {
        disabled: disabled || dataDisabled,
        disabledTooltip: disabledTooltip,
        disabledTooltipProps: disabledTooltipProps,
        fullWidth: others.fullWidth,
        children: /*#__PURE__*/ _jsx(MantineButton, {
            loaderProps: {
                variant: 'oval'
            },
            ref: ref,
            loading: isLoading || loading,
            onClick: dataDisabled ? (e)=>e.preventDefault() : handleClick,
            disabled: disabled || dataDisabled,
            "data-loading": isLoading || loading || undefined,
            ...others
        })
    });
});
const ButtonPrimary = Button.withProps({
    variant: 'filled'
});
const ButtonSecondary = Button.withProps({
    variant: 'light',
    color: 'var(--coveo-color-text-primary)'
});
const ButtonTertiary = Button.withProps({
    variant: 'default',
    vars: (theme)=>({
            root: {
                '--button-color': 'var(--coveo-color-text-primary)',
                '--button-padding-x': theme.spacing.sm
            }
        })
});
const ButtonQuaternary = Button.withProps({
    variant: 'subtle',
    color: 'var(--coveo-color-text-primary)'
});
const ButtonDestructive = Button.withProps({
    variant: 'filled',
    color: 'var(--mantine-color-error)'
});
const ButtonDestructiveSecondary = Button.withProps({
    variant: 'light',
    color: 'var(--mantine-color-error)'
});
const ButtonDestructiveTertiary = Button.withProps({
    variant: 'default',
    vars: (theme)=>({
            root: {
                '--button-color': 'var(--mantine-color-error)',
                '--button-padding-x': theme.spacing.sm
            }
        })
});
const ButtonDestructiveQuaternary = Button.withProps({
    variant: 'subtle',
    color: 'var(--mantine-color-error)'
});
Button.Group = MantineButton.Group;
Button.Group.displayName = 'Button.Group';
Button.Primary = ButtonPrimary;
Button.Secondary = ButtonSecondary;
Button.Tertiary = ButtonTertiary;
Button.Quaternary = ButtonQuaternary;
Button.DestructivePrimary = ButtonDestructive;
Button.DestructiveSecondary = ButtonDestructiveSecondary;
Button.DestructiveTertiary = ButtonDestructiveTertiary;
Button.DestructiveQuaternary = ButtonDestructiveQuaternary;
ButtonPrimary.displayName = 'Button.Primary';
ButtonSecondary.displayName = 'Button.Secondary';
ButtonTertiary.displayName = 'Button.Tertiary';
ButtonQuaternary.displayName = 'Button.Quaternary';
ButtonDestructive.displayName = 'Button.DestructivePrimary';
ButtonDestructiveSecondary.displayName = 'Button.DestructiveSecondary';
ButtonDestructiveTertiary.displayName = 'Button.DestructiveTertiary';
ButtonDestructiveQuaternary.displayName = 'Button.DestructiveQuaternary';
Button.displayName = 'Button';

//# sourceMappingURL=Button.js.map