@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
84 lines (80 loc) • 2.27 kB
JavaScript
'use strict';
var system = require('@nex-ui/system');
var toSlots = require('../shared/toSlots.cjs');
var variants = require('../shared/variants.cjs');
const alertRecipe = system.defineSlotRecipe({
slots: {
root: {
display: 'flex',
alignItems: 'center',
px: '4',
py: '3',
gap: '3',
overflow: 'hidden'
},
icon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 26
},
content: {
flex: 1,
minHeight: '8',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
gap: '1',
color: 'inherit'
},
title: {
fontWeight: 'medium',
fs: 'md',
color: 'inherit'
},
description: {
fs: 'md',
opacity: 0.9,
color: 'inherit'
},
closeButton: {}
},
variants: {
variant: {
solid: {
root: {
bg: 'colorPalette.primary',
color: 'colorPalette.contrastText'
},
closeButton: {
color: 'colorPalette.contrastText'
}
},
outlined: {
root: {
bg: 'transparent',
border: 'sm',
borderColor: 'colorPalette.primary',
color: 'colorPalette.tertiary'
}
},
faded: {
root: {
bg: 'colorPalette.subtle',
color: 'colorPalette.tertiary'
}
},
subtle: {
root: {
bg: 'colorPalette.subtle',
color: 'colorPalette.tertiary',
border: 'sm',
borderColor: 'colorPalette.highlight'
}
}
},
color: toSlots.toSlots(variants.colorVariant, 'root', 'closeButton'),
radius: toSlots.toSlots(variants.radiusVariant, 'root')
}
});
exports.alertRecipe = alertRecipe;