@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
82 lines (81 loc) • 2.45 kB
JavaScript
import { tv } from 'tailwind-variants';
export const modal = tv({
slots: {
base: 'fixed inset-0 z-50 flex items-center justify-center overflow-y-auto',
backdrop: 'fixed inset-0 transition-opacity bg-black/50',
contentWrapper: 'absolute transform overflow-hidden transition-all px-2',
content: 'bg-white overflow-hidden rounded-lg',
header: 'px-4 py-3 flex items-center justify-between border-b border-default-200',
body: 'px-3 py-2 max-h-[70dvh] overflow-y-auto',
title: 'text-default-900 leading-6 text-base font-semibold',
closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
},
variants: {
open: {
true: {
base: 'visible',
backdrop: 'visible opacity-100',
contentWrapper: 'visible scale-100 opacity-100'
},
false: {
base: 'invisible',
backdrop: 'invisible opacity-0',
contentWrapper: 'invisible scale-95 opacity-0'
}
},
position: {
center: {
contentWrapper: 'mx-auto'
},
top: {
contentWrapper: 'mx-auto top-7'
},
bottom: {
contentWrapper: 'mx-auto bottom-7'
},
left: {
contentWrapper: 'left-7'
},
right: {
contentWrapper: 'right-7'
}
},
size: {
xs: {
contentWrapper: 'w-full max-w-xs'
},
sm: {
contentWrapper: 'w-full max-w-sm'
},
base: {
contentWrapper: 'w-full max-w-md'
},
lg: {
contentWrapper: 'w-full max-w-lg'
},
xl: {
contentWrapper: 'w-full max-w-xl'
},
'2xl': {
contentWrapper: 'w-full max-w-2xl'
}
},
border: {
none: {
content: 'border-0'
},
default: {
content: 'border border-default-200'
},
colored: {
content: 'border'
}
}
},
defaultVariants: {
open: false,
position: 'center',
size: 'base',
color: 'default'
}
});