@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
60 lines (59 loc) • 2.21 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Color } from '../../variants.js';
export const activityList = tv({
slots: {
base: 'rounded-lg bg-white shadow-sm',
header: 'border-b border-default-200 px-6 py-4',
title: 'text-lg font-medium text-default-900',
content: 'divide-y divide-default-200',
item: 'px-6 py-4 hover:bg-default-50 transition-colors',
itemContent: 'flex items-center justify-between',
itemMain: 'flex-1',
itemHeader: 'flex items-center',
itemTitle: 'text-sm font-medium text-default-900 hover:text-blue-600 focus:outline-none focus:text-blue-600 cursor-pointer',
itemSubtitle: 'mt-1 text-xs text-default-500',
itemActions: 'flex items-center space-x-2'
},
variants: {
color: {
[Color.DEFAULT]: {
base: 'bg-white border-default-200',
header: 'border-default-200',
title: 'text-default-900'
},
[Color.PRIMARY]: {
base: 'bg-primary-50 border-primary-200',
header: 'border-primary-200',
title: 'text-primary-900'
},
[Color.SECONDARY]: {
base: 'bg-secondary-50 border-secondary-200',
header: 'border-secondary-200',
title: 'text-secondary-900'
},
[Color.INFO]: {
base: 'bg-info-50 border-info-200',
header: 'border-info-200',
title: 'text-info-900'
},
[Color.SUCCESS]: {
base: 'bg-success-50 border-success-200',
header: 'border-success-200',
title: 'text-success-900'
},
[Color.WARNING]: {
base: 'bg-warning-50 border-warning-200',
header: 'border-warning-200',
title: 'text-warning-900'
},
[Color.DANGER]: {
base: 'bg-danger-50 border-danger-200',
header: 'border-danger-200',
title: 'text-danger-900'
}
}
},
defaultVariants: {
color: Color.DEFAULT
}
});