@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
155 lines • 5.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@reservoir0x/relay-design-system/css");
const react_1 = require("react");
const ButtonCss = (0, css_1.cva)({
base: {
cursor: 'pointer',
outline: 'none',
fontFamily: 'body',
fontWeight: 700,
fontSize: 16,
transition: 'background-color 250ms linear',
gap: '2',
display: 'inline-flex',
alignItems: 'center',
lineHeight: '20px',
'--focusColor': 'colors.focus-color',
_focusVisible: {
boxShadow: '0 0 0 2px var(--focusColor)'
},
_disabled: {
cursor: 'not-allowed',
backgroundColor: 'button-disabled-background',
color: 'button-disabled-color',
_hover: {
backgroundColor: 'button-disabled-background',
color: 'button-disabled-color'
}
}
},
variants: {
color: {
primary: {
backgroundColor: 'primary-button-background',
color: 'primary-button-color',
'&:hover': {
backgroundColor: 'primary-button-hover-background',
color: 'primary-button-hover-color'
}
},
primaryOutline: {
backgroundColor: 'transparent',
color: 'gray12',
'--border-color': 'primary-outline-button-color',
border: '1px solid var(--border-color)',
'&:hover': {
color: 'primary-outline-button-hover-color'
}
},
secondary: {
backgroundColor: 'secondary-button-background',
color: 'secondary-button-color',
'&:hover': {
backgroundColor: 'secondary-button-hover-background',
color: 'secondary-button-hover-color'
}
},
tertiary: {
backgroundColor: 'tertiary-button-background',
color: 'tertiary-button-color',
'&:hover': {
backgroundColor: 'tertiary-button-hover-background',
color: 'tertiary-button-hover-color'
}
},
ghost: {
color: 'text-default',
backgroundColor: 'transparent'
},
white: {
'--borderColor': 'colors.subtle-border-color',
backgroundColor: 'widget-background',
transition: 'filter 250ms linear',
'&:hover': {
filter: 'brightness(97%)'
},
border: '1px solid var(--borderColor)'
},
error: {
backgroundColor: 'red9',
color: 'white',
'&:hover': {
backgroundColor: 'red10'
}
},
warning: {
backgroundColor: 'amber3',
color: 'amber11',
'&:hover': {
backgroundColor: 'amber4',
color: 'amber11'
}
},
grey: {
backgroundColor: 'gray3',
color: 'gray11',
'&:hover': {
backgroundColor: 'gray4'
}
}
},
corners: {
square: {
borderRadius: 0
},
rounded: {
borderRadius: 8
},
pill: {
borderRadius: 99999
},
circle: {
borderRadius: '99999px',
alignItems: 'center',
justifyContent: 'center'
}
},
size: {
none: {},
xs: {
p: '3',
lineHeight: '16px',
minHeight: 40
},
small: {
px: '3',
py: '2',
lineHeight: '12px',
minHeight: 40
},
medium: {
px: '5',
py: '3',
minHeight: 44
},
large: {
px: '5',
py: '4',
minHeight: 52
}
}
},
defaultVariants: {
color: 'primary',
corners: 'rounded',
size: 'medium'
}
});
const Button = (0, react_1.forwardRef)(({ css, children, ...props }, forwardedRef) => {
const { color, size, corners, ...buttonProps } = { ...props };
return ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, ref: forwardedRef, className: (0, css_1.css)(ButtonCss.raw({ color, size, corners }), css_1.css.raw(css)), children: children }));
});
exports.default = Button;
//# sourceMappingURL=Button.js.map