@rkosafo/cai.components
Version:
This package is under development and not ready for public use.
47 lines (46 loc) • 1.59 kB
JavaScript
import { tv } from 'tailwind-variants';
export const drawer = tv({
slots: {
base: 'z-2200 bg-white dark:bg-gray-800',
backdrop: 'fixed top-0 start-0 z-2100 w-full h-full',
header: 'flex items-center justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white px-4 py-2 border-b',
close: 'absolute top-3 end-2.5',
body: 'p-4 md:p-5 space-y-4',
footer: 'flex items-center p-3 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0 bg-gray-100',
form: 'flex flex-col divide-y'
},
variants: {
position: {
fixed: { base: 'fixed', backdrop: 'fixed' },
absolute: { base: 'absolute', backdrop: 'absolute' }
},
placement: {
left: { base: 'inset-y-0 start-0' },
right: { base: 'inset-y-0 end-0' },
top: { base: 'inset-x-0 top-0' },
bottom: { base: 'inset-x-0 bottom-0' }
},
width: {
default: { base: 'w-80' },
full: { base: 'w-full' },
half: { base: 'w-1/2' }
},
size: {
sm: { base: 'w-64' },
md: { base: 'w-80' },
lg: { base: 'w-96' },
xl: { base: 'w-[32rem]' },
'2xl': { base: 'w-[40rem]' },
'3xl': { base: 'w-[48rem]' }
},
backdrop: {
true: { backdrop: 'bg-gray-900 opacity-75' }
}
},
defaultVariants: {
position: 'fixed',
placement: 'left',
width: 'default',
size: 'md'
}
});