@makolabs/ripple/dist/modal/modal.js

Simple Svelte 5 powered component library ✨

import { tv } from 'tailwind-variants';
import { Size } from '../index.js';
export const modal = tv({
    slots: {
        base: 'fixed inset-0 z-50 flex items-center justify-center p-4',
        backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl overflow-hidden',
        header: 'px-6 py-4 border-b border-default-200 flex items-center justify-between shrink-0',
        body: 'flex-1 px-6 py-4 overflow-y-auto',
        footer: 'px-6 py-4 border-t border-default-200 bg-default-50/80 shrink-0',
        title: 'text-lg font-semibold text-default-900',
        description: 'text-sm text-default-600 mt-1',
        close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 hover:text-default-600 hover:bg-default-100 transition-colors'
    },
    variants: {
        size: {
            [Size.XS]: {
                container: 'max-w-xs max-h-[80vh]'
            },
            [Size.SM]: {
                container: 'max-w-sm max-h-[85vh]'
            },
            [Size.BASE]: {
                container: 'max-w-md max-h-[85vh]'
            },
            [Size.LG]: {
                container: 'max-w-lg max-h-[90vh]'
            },
            [Size.XL]: {
                container: 'max-w-xl max-h-[90vh]'
            },
            [Size.XXL]: {
                container: 'max-w-2xl max-h-[90vh]'
            }
        }
    },
    defaultVariants: {
        size: Size.BASE
    }
});