@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
154 lines (150 loc) • 3.52 kB
JavaScript
'use strict';
var system = require('@nex-ui/system');
const dialogRootRecipe = system.defineSlotRecipe({
slots: {
root: {},
backdrop: {}
}
});
const dialogContentRecipe = system.defineSlotRecipe({
slots: {
root: {
display: 'flex',
justifyContent: 'center'
},
paper: {
my: '15',
mx: '6',
borderRadius: 'lg',
boxShadow: 'lg'
},
closeButton: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
insetInlineEnd: '2',
insetBlockStart: '2',
fs: '1.3em',
p: '1.5',
overflow: 'hidden',
borderRadius: 'full',
transition: 'colors',
color: 'gray.400',
_hover: {
bg: 'gray.muted'
},
_focusVisibleRing: {
outline: 'focusVisibleOutline'
}
}
},
variants: {
size: {
xs: {
paper: {
maxWidth: 300
}
},
sm: {
paper: {
maxWidth: 450
}
},
md: {
paper: {
maxWidth: 600
}
},
lg: {
paper: {
maxWidth: 750
}
},
xl: {
paper: {
maxWidth: 900
}
},
full: {
paper: {
maxWidth: '100vw'
}
}
},
scroll: {
outside: {
root: {
overflow: 'hidden auto'
}
},
inside: {
paper: {
maxHeight: 'calc(100% - {spaces.15} * 2)'
}
}
},
fullScreen: {
true: {
paper: {
w: 'full',
h: 'full',
maxHeight: undefined,
maxWidth: 'full',
m: 0,
borderRadius: 'none'
}
}
},
placement: {
top: {
root: {
alignItems: 'flex-start'
}
},
center: {
root: {
alignItems: 'center'
}
},
bottom: {
root: {
alignItems: 'flex-end'
}
}
}
}
});
const dialogHeaderRecipe = system.defineRecipe({
base: {
py: '4',
px: '6',
fontWeight: 500,
fs: 'xl',
lineHeight: '1.5556'
}
});
const dialogBodyRecipe = system.defineRecipe({
base: {
py: '2',
px: '6'
},
variants: {
scroll: {
inside: {
overflow: 'auto'
}
}
}
});
const dialogFooterRecipe = system.defineRecipe({
base: {
py: '4',
px: '6'
}
});
exports.dialogBodyRecipe = dialogBodyRecipe;
exports.dialogContentRecipe = dialogContentRecipe;
exports.dialogFooterRecipe = dialogFooterRecipe;
exports.dialogHeaderRecipe = dialogHeaderRecipe;
exports.dialogRootRecipe = dialogRootRecipe;