@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
71 lines (68 loc) • 1.77 kB
JavaScript
import { defineRecipe, defineSlotRecipe } from '@nex-ui/system';
import { toSlots } from '../shared/toSlots.mjs';
import { disabledVariant } from '../shared/variants.mjs';
const accordionRecipe = defineRecipe({
base: {
w: 'full'
},
variants: {
variant: {
outlined: {
border: '1px solid {colors.gray.highlight}',
borderRadius: 'md'
},
underlined: {}
}
}
});
const accordionItemRecipe = defineSlotRecipe({
slots: {
root: {},
heading: {
m: 0,
minHeight: '12'
},
trigger: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
position: 'relative',
boxSizing: 'border-box',
w: 'full',
minHeight: 'inherit',
px: '4',
fs: 'xl',
fontWeight: 'normal',
_focusVisibleRing: {
outline: 'focusVisibleOutline'
}
},
content: {
px: '4',
py: '2',
fs: 16
},
indicator: {
fs: '1.25rem',
display: 'flex'
}
},
variants: {
disabled: toSlots(disabledVariant, 'root'),
variant: {
underlined: {
root: {
borderBottom: '1px solid {colors.gray.highlight}'
}
},
outlined: {
root: {
':not(:last-child)': {
borderBottom: '1px solid {colors.gray.highlight}'
}
}
}
}
}
});
export { accordionItemRecipe, accordionRecipe };