@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
151 lines (147 loc) • 3.4 kB
JavaScript
'use strict';
var system = require('@nex-ui/system');
const dialogRecipe = system.defineSlotRecipe({
slots: {
root: {},
backdrop: {},
panel: {}
},
variants: {
scroll: {
outside: {
panel: {
overflow: 'hidden auto'
}
}
},
placement: {
top: {
panel: {
alignItems: 'flex-start'
}
},
center: {
panel: {
alignItems: 'center'
}
},
bottom: {
panel: {
alignItems: 'flex-end'
}
}
}
}
});
const dialogContentRecipe = system.defineSlotRecipe({
slots: {
content: {},
closeButton: {
position: 'absolute',
insetInlineEnd: '2',
insetBlockStart: '2',
fs: '1.3em',
bg: 'transparent',
border: 'none',
outline: 'none',
display: 'inline-flex',
p: '1.5',
overflow: 'hidden',
borderRadius: 'full',
transition: 'colors',
color: 'gray.400',
_hover: {
bg: 'gray.muted'
},
_focusVisible: {
outline: 'focusVisibleOutline'
}
}
},
variants: {
maxWidth: {
xs: {
content: {
maxWidth: 300
}
},
sm: {
content: {
maxWidth: 450
}
},
md: {
content: {
maxWidth: 600
}
},
lg: {
content: {
maxWidth: 750
}
},
xl: {
content: {
maxWidth: 900
}
},
full: {
content: {
maxWidth: '100vw'
}
}
},
scroll: {
inside: {
content: {
maxHeight: 'calc(100% - {spaces.15} * 2)'
}
}
},
fullScreen: {
true: {
content: {
w: 'full',
h: 'full',
maxHeight: undefined,
maxWidth: 'full',
m: 0,
borderRadius: 0
}
}
}
}
});
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.dialogRecipe = dialogRecipe;