@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
80 lines (76 loc) • 1.86 kB
JavaScript
'use strict';
var system = require('@nex-ui/system');
const accordionRecipe = system.defineRecipe({
base: {
w: 'full'
},
variants: {
variant: {
outlined: {
border: '1px solid {colors.gray.highlight}',
borderRadius: 'md'
}
}
}
});
const accordionItemRecipe = system.defineSlotRecipe({
slots: {
root: {},
heading: {
m: 0,
fs: 18,
minHeight: 48,
fontWeight: 'normal'
},
trigger: {
w: 'full',
h: 'inherit',
minHeight: 'inherit',
textAlign: 'left',
justifyContent: 'space-between',
color: 'inherit',
px: '4',
fs: 'inherit',
boxSizing: 'border-box',
fontWeight: 'inherit',
_focusVisible: {
outline: 'focusVisibleOutline'
}
},
content: {
px: '4',
py: '2',
fs: 16
},
indicator: {
fs: '1.25rem',
display: 'flex'
}
},
variants: {
disabled: {
true: {
root: {
opacity: 0.5,
pointerEvents: 'none'
}
}
},
variant: {
underlined: {
root: {
borderBottom: '1px solid {colors.gray.highlight}'
}
},
outlined: {
root: {
':not(:last-child)': {
borderBottom: '1px solid {colors.gray.highlight}'
}
}
}
}
}
});
exports.accordionItemRecipe = accordionItemRecipe;
exports.accordionRecipe = accordionRecipe;