@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
100 lines (99 loc) • 4.11 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Size, Color } from '../../variants.js';
export const navbar = tv({
slots: {
base: 'sticky top-0 z-40 w-full backdrop-blur',
wrapper: 'mx-auto px-4 sm:px-6 lg:px-8',
container: 'flex h-16 justify-between',
brand: 'flex flex-shrink-0 items-center',
menu: 'hidden sm:ml-6 sm:flex sm:space-x-8',
mobileMenu: 'sm:hidden',
mobileMenuButton: 'inline-flex items-center justify-center rounded-md p-2',
mobileMenuContainer: 'space-y-1 pb-3 pt-2',
links: 'flex items-center space-x-4',
link: 'inline-flex h-full items-center gap-2 border-b-2 px-1 pt-1 text-sm font-medium',
mobileLink: 'block border-l-4 py-2 pl-3 pr-4 text-base font-medium',
actions: 'hidden sm:ml-6 sm:flex sm:items-center',
avatar: 'h-8 w-8 rounded-full',
selectButton: 'flex rounded-full focus:outline-none',
selectMenu: 'absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5',
selectItem: 'block px-4 py-2 text-sm',
divider: 'border-t border-default-200 my-2'
},
variants: {
color: {
[Color.DEFAULT]: {
base: 'bg-white/80 border-b border-default-200',
mobileMenuButton: 'text-default-500 hover:bg-default-100 focus:outline-none',
link: 'text-default-500 hover:text-default-900 border-transparent hover:border-default-300',
mobileLink: 'text-default-600 hover:bg-default-50 border-transparent',
selectItem: 'text-default-700 hover:bg-default-100'
},
[Color.PRIMARY]: {
base: 'bg-primary-50/80 border-b border-primary-200',
mobileMenuButton: 'text-primary-500 hover:bg-primary-100 focus:outline-none',
link: 'text-primary-500 hover:text-primary-900 border-transparent hover:border-primary-300',
mobileLink: 'text-primary-600 hover:bg-primary-50 border-transparent',
selectItem: 'text-primary-700 hover:bg-primary-100'
},
[Color.SECONDARY]: {
base: 'bg-secondary-50/80 border-b border-secondary-200',
mobileMenuButton: 'text-secondary-500 hover:bg-secondary-100 focus:outline-none',
link: 'text-secondary-500 hover:text-secondary-900 border-transparent hover:border-secondary-300',
mobileLink: 'text-secondary-600 hover:bg-secondary-50 border-transparent',
selectItem: 'text-secondary-700 hover:bg-secondary-100'
}
},
size: {
[Size.SM]: {
container: 'h-12',
link: 'text-xs',
mobileLink: 'text-xs'
},
[Size.BASE]: {
container: 'h-16',
link: 'text-sm',
mobileLink: 'text-sm'
},
[Size.LG]: {
container: 'h-20',
link: 'text-base',
mobileLink: 'text-base'
}
},
active: {
true: {}
}
},
compoundVariants: [
{
active: true,
color: Color.DEFAULT,
class: {
link: 'border-default-500 text-default-900',
mobileLink: 'border-default-500 bg-default-50 text-default-700'
}
},
{
active: true,
color: Color.PRIMARY,
class: {
link: 'border-primary-500 text-primary-900',
mobileLink: 'border-primary-500 bg-primary-50 text-primary-700'
}
},
{
active: true,
color: Color.SECONDARY,
class: {
link: 'border-secondary-500 text-secondary-900',
mobileLink: 'border-secondary-500 bg-secondary-50 text-secondary-700'
}
}
],
defaultVariants: {
color: Color.DEFAULT,
size: Size.BASE,
active: false
}
});