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

Simple Svelte 5 powered component library ✨

import { tv } from '../../helper/cls.js';
import { Color } from '../../variants.js';
export const accordion = tv({
    slots: {
        base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200 bg-white border border-default-200',
        header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200',
        title: 'flex text-default-900 text-lg font-medium leading-tight',
        body: 'w-full border-t border-default-200 p-4 pt-3 transition-all',
    },
    variants: {
        color: {
            [Color.DEFAULT]: {
                base: 'bg-white hover:border-default-300',
                header: '',
                body: ''
            },
            [Color.PRIMARY]: {
                base: 'bg-primary-50/50 hover:border-primary-300',
                header: 'text-primary-700',
                title: 'text-primary-700'
            },
            [Color.SECONDARY]: {
                base: 'bg-secondary-50/50 hover:border-secondary-300',
                header: 'text-secondary-700',
                title: 'text-secondary-700'
            },
            [Color.SUCCESS]: {
                base: 'bg-success-50/50 hover:border-success-300',
                header: 'text-success-700',
                title: 'text-success-700'
            },
            [Color.WARNING]: {
                base: 'bg-warning-50/50 hover:border-warning-300',
                header: 'text-warning-700',
                title: 'text-warning-700'
            },
            [Color.DANGER]: {
                base: 'bg-danger-50/50 hover:border-danger-300',
                header: 'text-danger-700',
                title: 'text-danger-700'
            },
            [Color.INFO]: {
                base: 'bg-info-50/50 hover:border-info-300',
                header: 'text-info-700',
                title: 'text-info-700'
            }
        },
        open: {
            true: {
                base: 'shadow-sm',
                title: 'text-default-900'
            },
            false: {
                base: ''
            }
        },
        bordered: {
            true: {
                base: 'border border-default-200',
                body: 'border-t'
            },
            false: {
                base: 'shadow-sm'
            }
        },
        hasChildren: {
            true: {
                base: 'hover:shadow-md',
                header: 'hover:bg-default-50'
            },
            false: {
                base: 'hover:shadow-none',
                header: 'cursor-default'
            }
        },
        iconPosition: {
            start: {},
            end: {}
        }
    },
    compoundVariants: [
        {
            open: true,
            class: {
                header: 'border-b-0'
            }
        },
        {
            hasChildren: true,
            color: Color.PRIMARY,
            class: {
                header: 'hover:bg-primary-50'
            }
        },
        {
            hasChildren: true,
            color: Color.SECONDARY,
            class: {
                header: 'hover:bg-secondary-50'
            }
        },
        {
            hasChildren: true,
            color: Color.SUCCESS,
            class: {
                header: 'hover:bg-success-50'
            }
        },
        {
            hasChildren: true,
            color: Color.WARNING,
            class: {
                header: 'hover:bg-warning-50'
            }
        },
        {
            hasChildren: true,
            color: Color.DANGER,
            class: {
                header: 'hover:bg-danger-50'
            }
        },
        {
            hasChildren: true,
            color: Color.INFO,
            class: {
                header: 'hover:bg-info-50'
            }
        }
    ],
    defaultVariants: {
        color: Color.DEFAULT,
        open: false,
        bordered: true,
        hasChildren: false,
        iconPosition: 'start'
    }
});