@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
299 lines (298 loc) • 8.13 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Color, Size } from '../../index.js';
export const tabs = tv({
slots: {
base: 'w-full',
list: 'flex border-b border-default-200',
trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer -mb-px border-b-2 border-transparent',
panel: 'mt-4 px-3'
},
variants: {
color: {
[Color.PRIMARY]: {},
[Color.SECONDARY]: {},
[Color.SUCCESS]: {},
[Color.WARNING]: {},
[Color.DANGER]: {},
[Color.INFO]: {},
[Color.DEFAULT]: {}
},
size: {
[Size.XS]: {
trigger: 'px-2 py-1 text-xs'
},
[Size.SM]: {
trigger: 'px-2 py-1 text-xs'
},
[Size.BASE]: {
trigger: 'px-3 py-2 text-sm'
},
[Size.LG]: {
trigger: 'px-4 py-2.5 text-base'
},
[Size.XL]: {
trigger: 'px-5 py-3 text-lg'
},
[Size.XXL]: {
trigger: 'px-6 py-4 text-xl'
}
},
variant: {
line: {},
pill: {
list: 'flex border-none gap-2 p-1',
trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
}
},
selected: {
true: {},
false: {}
}
},
compoundVariants: [
// LINE VARIANT - PRIMARY
{
variant: 'line',
color: Color.PRIMARY,
selected: true,
class: {
trigger: 'text-primary-600 border-b-2 border-primary-500'
}
},
{
variant: 'line',
color: Color.PRIMARY,
selected: false,
class: {
trigger: 'text-default-500 hover:text-primary-500'
}
},
// LINE VARIANT - SECONDARY
{
variant: 'line',
color: Color.SECONDARY,
selected: true,
class: {
trigger: 'text-secondary-600 border-b-2 border-secondary-500'
}
},
{
variant: 'line',
color: Color.SECONDARY,
selected: false,
class: {
trigger: 'text-default-500 hover:text-secondary-500'
}
},
// LINE VARIANT - SUCCESS
{
variant: 'line',
color: Color.SUCCESS,
selected: true,
class: {
trigger: 'text-success-600 border-b-2 border-success-500'
}
},
{
variant: 'line',
color: Color.SUCCESS,
selected: false,
class: {
trigger: 'text-default-500 hover:text-success-500'
}
},
// LINE VARIANT - WARNING
{
variant: 'line',
color: Color.WARNING,
selected: true,
class: {
trigger: 'text-warning-600 border-b-2 border-warning-500'
}
},
{
variant: 'line',
color: Color.WARNING,
selected: false,
class: {
trigger: 'text-default-500 hover:text-warning-500'
}
},
// LINE VARIANT - DANGER
{
variant: 'line',
color: Color.DANGER,
selected: true,
class: {
trigger: 'text-danger-600 border-b-2 border-danger-500'
}
},
{
variant: 'line',
color: Color.DANGER,
selected: false,
class: {
trigger: 'text-default-500 hover:text-danger-500'
}
},
// LINE VARIANT - INFO
{
variant: 'line',
color: Color.INFO,
selected: true,
class: {
trigger: 'text-info-600 border-b-2 border-info-500'
}
},
{
variant: 'line',
color: Color.INFO,
selected: false,
class: {
trigger: 'text-default-500 hover:text-info-500'
}
},
// LINE VARIANT - DEFAULT
{
variant: 'line',
color: Color.DEFAULT,
selected: true,
class: {
trigger: 'text-default-600 border-b-2 border-default-500'
}
},
{
variant: 'line',
color: Color.DEFAULT,
selected: false,
class: {
trigger: 'text-default-500 hover:text-default-700'
}
},
// PILL VARIANT - PRIMARY
{
variant: 'pill',
color: Color.PRIMARY,
selected: true,
class: {
trigger: 'bg-primary-500 text-white'
}
},
{
variant: 'pill',
color: Color.PRIMARY,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
},
// PILL VARIANT - SECONDARY
{
variant: 'pill',
color: Color.SECONDARY,
selected: true,
class: {
trigger: 'bg-secondary-500 text-white'
}
},
{
variant: 'pill',
color: Color.SECONDARY,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
},
// PILL VARIANT - SUCCESS
{
variant: 'pill',
color: Color.SUCCESS,
selected: true,
class: {
trigger: 'bg-success-500 text-white'
}
},
{
variant: 'pill',
color: Color.SUCCESS,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
},
// PILL VARIANT - WARNING
{
variant: 'pill',
color: Color.WARNING,
selected: true,
class: {
trigger: 'bg-warning-500 text-white'
}
},
{
variant: 'pill',
color: Color.WARNING,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
},
// PILL VARIANT - DANGER
{
variant: 'pill',
color: Color.DANGER,
selected: true,
class: {
trigger: 'bg-danger-500 text-white'
}
},
{
variant: 'pill',
color: Color.DANGER,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
},
// PILL VARIANT - INFO
{
variant: 'pill',
color: Color.INFO,
selected: true,
class: {
trigger: 'bg-info-500 text-white'
}
},
{
variant: 'pill',
color: Color.INFO,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
},
// PILL VARIANT - DEFAULT
{
variant: 'pill',
color: Color.DEFAULT,
selected: true,
class: {
trigger: 'bg-default-500 text-white'
}
},
{
variant: 'pill',
color: Color.DEFAULT,
selected: false,
class: {
trigger: 'text-default-600 hover:bg-default-100'
}
}
],
defaultVariants: {
color: Color.PRIMARY,
size: 'base',
variant: 'line',
selected: false
}
});