@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
89 lines (88 loc) • 2.45 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Size, Color } from '../variants.js';
export const breadcrumbs = tv({
slots: {
base: 'flex',
list: 'flex flex-wrap items-center space-x-2.5',
item: 'flex items-center whitespace-nowrap',
separator: 'flex items-center',
wrapper: 'flex items-center gap-2.5'
},
variants: {
size: {
[Size.XS]: {
base: 'items-center text-xs'
},
[Size.SM]: {
base: 'items-center text-sm'
},
[Size.BASE]: {
base: 'items-center text-base'
},
[Size.LG]: {
base: 'items-center text-lg'
}
},
weight: {
normal: {
item: 'font-normal'
},
medium: {
item: 'font-medium'
},
semibold: {
item: 'font-semibold'
},
bold: {
item: 'font-bold'
}
},
color: {
[Color.DEFAULT]: {
item: 'hover:text-default-700',
wrapper: 'text-default-500'
},
[Color.PRIMARY]: {
item: 'hover:text-primary-700',
wrapper: 'text-primary-500'
},
[Color.SECONDARY]: {
item: 'hover:text-secondary-700',
wrapper: 'text-secondary-500'
},
[Color.INFO]: {
item: 'hover:text-info-700',
wrapper: 'text-info-500'
},
[Color.SUCCESS]: {
item: 'hover:text-success-700',
wrapper: 'text-success-500'
},
[Color.WARNING]: {
item: 'hover:text-warning-700',
wrapper: 'text-warning-500'
},
[Color.DANGER]: {
item: 'hover:text-danger-700',
wrapper: 'text-danger-500'
}
},
active: {
true: {
item: 'text-current font-semibold'
},
false: {
item: ''
}
}
},
compoundVariants: [
// Additional compound variants can be added here if needed
],
defaultVariants: {
size: 'sm',
weight: 'medium',
color: 'default',
active: false
}
});