@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
143 lines (142 loc) • 4.05 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Color } from '../../variants.js';
export const table = tv({
slots: {
base: 'w-full',
wrapper: 'overflow-x-auto',
table: 'min-w-full divide-y divide-default-200',
thead: '',
tbody: 'divide-y divide-default-200',
tr: 'transition-colors hover:bg-default-50',
th: 'text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap',
td: 'whitespace-nowrap',
footer: 'p-4',
pagination: 'flex items-center justify-between',
emptyState: 'p-8 text-center text-default-500',
sortButton: 'inline-flex gap-1 items-center cursor-pointer focus:outline-none',
sortIcon: 'h-4 w-4'
},
variants: {
size: {
xs: {
th: 'px-2 py-1.5 text-xs',
td: 'px-2 py-1.5 text-xs'
},
sm: {
th: 'px-3 py-2 text-xs',
td: 'px-3 py-2 text-sm'
},
base: {
th: 'px-4 py-3 text-sm',
td: 'px-4 py-3 text-sm'
},
lg: {
th: 'px-6 py-4 text-sm',
td: 'px-6 py-4 text-base'
},
xl: {
th: 'px-8 py-5 text-base',
td: 'px-8 py-5 text-base'
},
'2xl': {
th: 'px-10 py-6 text-lg',
td: 'px-10 py-6 text-lg'
}
},
color: {
default: {
th: 'text-default-700 bg-default-50'
},
[Color.PRIMARY]: {
th: 'text-primary-700 bg-primary-50',
tr: 'hover:bg-primary-50'
},
[Color.SECONDARY]: {
th: 'text-secondary-700 bg-secondary-50',
tr: 'hover:bg-secondary-50'
},
[Color.INFO]: {
th: 'text-info-700 bg-info-50',
tr: 'hover:bg-info-50'
},
[Color.SUCCESS]: {
th: 'text-success-700 bg-success-50',
tr: 'hover:bg-success-50'
},
[Color.WARNING]: {
th: 'text-warning-700 bg-warning-50',
tr: 'hover:bg-warning-50'
},
[Color.DANGER]: {
th: 'text-danger-700 bg-danger-50',
tr: 'hover:bg-danger-50'
}
},
bordered: {
true: {
table: 'border-separate border-spacing-0 border border-default-200 rounded-md overflow-hidden',
th: 'border-b border-default-200',
td: 'border-b border-default-200'
},
false: {
table: 'border-none'
}
},
striped: {
true: {
tr: 'even:bg-default-50'
}
}
},
compoundVariants: [
// Add compound variants for striped + color combinations
{
striped: true,
color: 'primary',
class: {
tr: 'even:bg-primary-50'
}
},
{
striped: true,
color: 'secondary',
class: {
tr: 'even:bg-secondary-50'
}
},
{
striped: true,
color: 'info',
class: {
tr: 'even:bg-info-50'
}
},
{
striped: true,
color: 'success',
class: {
tr: 'even:bg-success-50'
}
},
{
striped: true,
color: 'warning',
class: {
tr: 'even:bg-warning-50'
}
},
{
striped: true,
color: 'danger',
class: {
tr: 'even:bg-danger-50'
}
}
],
defaultVariants: {
size: 'base',
color: 'default',
bordered: false,
striped: false
}
});