@makolabs/ripple/dist/elements/badge/badge.js

Simple Svelte 5 powered component library ✨

import { tv } from 'tailwind-variants';
import { Size, Color } from '../../variants.js';
export const badge = tv({
    slots: {
        base: 'w-min inline-flex items-center justify-center whitespace-nowrap',
        icon: 'h-4 w-4'
    },
    variants: {
        size: {
            [Size.XS]: {
                base: 'h-4 px-1.5 text-xs rounded gap-0.5',
                icon: 'h-2.5 w-2.5'
            },
            [Size.SM]: {
                base: 'h-5 px-2 text-xs rounded gap-1',
                icon: 'h-3 w-3'
            },
            [Size.BASE]: {
                base: 'h-6 px-2.5 text-sm rounded-md gap-1.5',
                icon: 'h-3.5 w-3.5'
            },
            [Size.LG]: {
                base: 'h-7 px-3 text-base rounded-lg gap-2',
                icon: 'h-4 w-4'
            },
            [Size.XL]: {
                base: 'h-8 px-3.5 text-lg rounded-xl gap-2.5',
                icon: 'h-5 w-5'
            },
            [Size.XXL]: {
                base: 'h-10 px-4 text-xl rounded-2xl gap-3',
                icon: 'h-6 w-6'
            }
        },
        color: {
            [Color.DEFAULT]: {
                base: 'bg-default-50 text-default-700',
                icon: 'text-default-700'
            },
            [Color.PRIMARY]: {
                base: 'bg-primary-50 text-primary-700',
                icon: 'text-primary-700'
            },
            [Color.SECONDARY]: {
                base: 'bg-secondary-50 text-secondary-700',
                icon: 'text-secondary-700'
            },
            [Color.SUCCESS]: {
                base: 'bg-success-50 text-success-700',
                icon: 'text-success-700'
            },
            [Color.WARNING]: {
                base: 'bg-warning-50 text-warning-700',
                icon: 'text-warning-700'
            },
            [Color.DANGER]: {
                base: 'bg-danger-50 text-danger-700',
                icon: 'text-danger-700'
            },
            [Color.INFO]: {
                base: 'bg-info-50 text-info-700',
                icon: 'text-info-700'
            }
        }
    }
});