@metamask/design-system-react
Version:
Design system react ui components
68 lines • 2.69 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { twMerge } from "../../../../utils/tw-merge.mjs";
import { ButtonBase } from "../../../ButtonBase/index.mjs";
export const ButtonPrimary = forwardRef(({ className, isDanger, isInverse, isDisabled, isLoading, ...props }, ref) => {
const isInteractive = !(isDisabled ?? isLoading);
const mergedClassName = twMerge(
// Default primary styles
!isDanger &&
!isInverse && [
'bg-icon-default text-primary-inverse',
// Loading state uses pressed color
isLoading && 'bg-icon-default-pressed',
],
// Danger styles
isDanger &&
!isInverse && [
'bg-error-default text-error-inverse',
// Loading state uses pressed color
isLoading && 'bg-error-default-pressed',
],
// Inverse styles
isInverse &&
!isDanger && [
'bg-default text-default',
// Loading state uses pressed color
isLoading && 'bg-default-pressed',
],
// Inverse danger styles
isInverse &&
isDanger && [
'bg-default text-error-default',
// Loading state uses pressed color
isLoading && 'bg-default-pressed',
],
// Hover/Active states - only applied when interactive
isInteractive && [
!isDanger &&
!isInverse && [
'hover:bg-icon-default-hover',
'active:bg-icon-default-pressed',
],
isDanger &&
!isInverse && [
'hover:bg-error-default-hover',
'active:bg-error-default-pressed',
],
isInverse &&
!isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
isInverse &&
isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
], 'focus-visible:outline-none focus-visible:ring-0', isInverse
? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
// Loading styles
isLoading && 'cursor-not-allowed',
// Disabled styles (but not loading)
isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'], className);
return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, ...props }));
});
ButtonPrimary.displayName = 'ButtonPrimary';
//# sourceMappingURL=ButtonPrimary.mjs.map