@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
82 lines (81 loc) • 2.47 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Size } from '../variants.js';
export const drawer = tv({
slots: {
base: 'fixed inset-0 z-50 flex overflow-hidden',
backdrop: 'fixed inset-0 transition-opacity bg-black/50',
contentWrapper: 'absolute flex flex-col transform transition-transform',
content: 'flex flex-col h-full w-full overflow-y-auto bg-white',
header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
body: 'flex-1 overflow-y-auto p-4',
footer: 'flex justify-end border-t border-default-200 p-4',
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 translate-x-0 translate-y-0'
},
false: {
base: 'invisible',
backdrop: 'invisible opacity-0',
contentWrapper: 'invisible'
}
},
position: {
left: {
contentWrapper: 'left-0 h-full',
content: 'rounded-r-lg'
},
right: {
contentWrapper: 'right-0 h-full',
content: 'rounded-l-lg'
}
},
size: {
[Size.XS]: {
contentWrapper: 'w-64'
},
[Size.SM]: {
contentWrapper: 'w-80'
},
[Size.BASE]: {
contentWrapper: 'w-96'
},
[Size.LG]: {
contentWrapper: 'w-[32rem]'
},
[Size.XL]: {
contentWrapper: 'w-[40rem]'
},
[Size.XXL]: {
contentWrapper: 'w-[48rem]'
}
}
},
compoundVariants: [
// Position-specific transforms when closed
{
position: 'left',
open: false,
class: {
contentWrapper: '-translate-x-full'
}
},
{
position: 'right',
open: false,
class: {
contentWrapper: 'translate-x-full'
}
}
],
defaultVariants: {
open: false,
position: 'right',
size: 'sm'
}
});