@makolabs/ripple/dist/button/button.js

Simple Svelte 5 powered component library ✨

import { tv } from 'tailwind-variants';
import { Color, Size } from '../variants.js';
export const buttonVariants = tv({
    base: `
		inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none
		focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer
		`,
    variants: {
        variant: {
            solid: '',
            outline: 'border bg-transparent',
            ghost: 'bg-transparent hover:bg-opacity-10',
            link: 'bg-transparent underline-offset-4 hover:underline shadow-none'
        },
        color: {
            [Color.DEFAULT]: 'bg-default-900 text-white hover:bg-default-800 focus-visible:ring-default-500',
            [Color.PRIMARY]: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
            [Color.SECONDARY]: 'bg-secondary-600 text-white hover:bg-secondary-700 focus-visible:ring-secondary-500',
            [Color.INFO]: 'bg-info-600 text-white hover:bg-info-700 focus-visible:ring-info-500',
            [Color.SUCCESS]: 'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500',
            [Color.WARNING]: 'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500',
            [Color.DANGER]: 'bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500'
        },
        size: {
            [Size.XS]: 'h-7 px-2 text-xs',
            [Size.SM]: 'h-8 px-3 text-sm',
            [Size.BASE]: 'h-9 px-4 text-sm',
            [Size.LG]: 'h-10 px-5 text-base',
            [Size.XL]: 'h-12 px-6 text-lg',
            [Size.XXL]: 'h-14 px-8 text-xl'
        },
        rounded: {
            none: 'rounded-none',
            xs: 'rounded-xs',
            sm: 'rounded-sm',
            base: 'rounded-md',
            lg: 'rounded-lg',
            xl: 'rounded-xl',
            '2xl': 'rounded-2xl',
            full: 'rounded-full'
        },
        isLoading: {
            true: 'animate-pulse'
        }
    },
    compoundVariants: [
        // Remove background for non-solid variants
        {
            variant: ['outline', 'ghost', 'link'],
            class: 'bg-transparent hover:bg-transparent'
        },
        // Outline variants
        {
            variant: 'outline',
            color: 'default',
            class: 'border-default-200 text-default-700 hover:bg-default-50 hover:border-default-300 focus-visible:ring-default-300'
        },
        {
            variant: 'outline',
            color: 'primary',
            class: 'border-primary-200 text-primary-700 hover:bg-primary-50 hover:border-primary-300 focus-visible:ring-primary-300'
        },
        {
            variant: 'outline',
            color: 'secondary',
            class: 'border-secondary-200 text-secondary-700 hover:bg-secondary-50 hover:border-secondary-300 focus-visible:ring-secondary-300'
        },
        {
            variant: 'outline',
            color: 'info',
            class: 'border-info-200 text-info-700 hover:bg-info-50 hover:border-info-300 focus-visible:ring-info-300'
        },
        {
            variant: 'outline',
            color: 'success',
            class: 'border-success-200 text-success-700 hover:bg-success-50 hover:border-success-300 focus-visible:ring-success-300'
        },
        {
            variant: 'outline',
            color: 'warning',
            class: 'border-warning-200 text-warning-700 hover:bg-warning-50 hover:border-warning-300 focus-visible:ring-warning-300'
        },
        {
            variant: 'outline',
            color: 'danger',
            class: 'border-danger-200 text-danger-700 hover:bg-danger-50 hover:border-danger-300 focus-visible:ring-danger-300'
        },
        // Ghost variants
        {
            variant: 'ghost',
            color: 'default',
            class: 'text-default-700 hover:bg-default-100 focus-visible:ring-default-300'
        },
        {
            variant: 'ghost',
            color: 'primary',
            class: 'text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-300'
        },
        {
            variant: 'ghost',
            color: 'secondary',
            class: 'text-secondary-700 hover:bg-secondary-100 focus-visible:ring-secondary-300'
        },
        {
            variant: 'ghost',
            color: 'info',
            class: 'text-info-700 hover:bg-info-100 focus-visible:ring-info-300'
        },
        {
            variant: 'ghost',
            color: 'success',
            class: 'text-success-700 hover:bg-success-100 focus-visible:ring-success-300'
        },
        {
            variant: 'ghost',
            color: 'warning',
            class: 'text-warning-700 hover:bg-warning-100 focus-visible:ring-warning-300'
        },
        {
            variant: 'ghost',
            color: 'danger',
            class: 'text-danger-700 hover:bg-danger-100 focus-visible:ring-danger-300'
        },
        // Link variants
        {
            variant: 'link',
            color: 'default',
            class: 'text-default-700 hover:text-default-800 focus-visible:ring-default-300'
        },
        {
            variant: 'link',
            color: 'primary',
            class: 'text-primary-700 hover:text-primary-800 focus-visible:ring-primary-300'
        },
        {
            variant: 'link',
            color: 'secondary',
            class: 'text-secondary-700 hover:text-secondary-800 focus-visible:ring-secondary-300'
        },
        {
            variant: 'link',
            color: 'info',
            class: 'text-info-700 hover:text-info-800 focus-visible:ring-info-300'
        },
        {
            variant: 'link',
            color: 'success',
            class: 'text-success-700 hover:text-success-800 focus-visible:ring-success-300'
        },
        {
            variant: 'link',
            color: 'warning',
            class: 'text-warning-700 hover:text-warning-800 focus-visible:ring-warning-300'
        },
        {
            variant: 'link',
            color: 'danger',
            class: 'text-danger-700 hover:text-danger-800 focus-visible:ring-danger-300'
        }
    ],
    defaultVariants: {
        variant: 'solid',
        color: 'default',
        size: 'base',
        rounded: 'base',
        isLoading: false
    }
});