@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
96 lines (95 loc) • 3.91 kB
JavaScript
import { tv } from '../../helper/cls.js';
import { Size } from '../../variants.js';
export const dropdownMenu = tv({
slots: {
base: 'inline-block text-left',
trigger: 'inline-flex w-full justify-center items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-default-900 shadow-xs ring-1 ring-inset ring-default-300 hover:bg-default-50 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
container: 'absolute z-50 mt-2 origin-top-right divide-y divide-default-100 rounded-md bg-white ring-1 ring-black/5 shadow-lg focus:outline-none',
section: 'py-1',
header: 'flex flex-col px-4 py-2 w-full items-start',
headerTitle: 'text-sm font-medium text-default-900',
headerSubtitle: 'text-sm text-default-500',
item: 'w-full group flex items-center px-4 py-2 text-sm text-default-700 hover:bg-default-100 hover:text-default-900 data-[active=true]:bg-default-100 data-[active=true]:text-default-900 disabled:opacity-50 disabled:cursor-not-allowed',
itemIcon: 'mr-3 size-5 text-default-400 group-hover:text-default-500 group-data-[active=true]:text-default-500'
},
variants: {
position: {
'top-left': {
container: 'origin-bottom-left bottom-full left-0 mb-2'
},
'top-right': {
container: 'origin-bottom-right bottom-full right-0 mb-2'
},
'bottom-left': {
container: 'origin-top-left top-full left-0 mt-2'
},
'bottom-right': {
container: 'origin-top-right top-full right-0 mt-2'
}
},
size: {
[Size.XS]: {
trigger: 'px-2 py-1 text-xs',
item: 'px-2.5 py-1 text-xs',
itemIcon: 'mr-1.5 size-3.5',
header: 'px-2.5 py-1.5',
headerTitle: 'text-xs',
headerSubtitle: 'text-xs'
},
[Size.SM]: {
trigger: 'px-2.5 py-1.5 text-xs',
item: 'px-3 py-1.5 text-xs',
itemIcon: 'mr-2 size-4',
header: 'px-3 py-2',
headerTitle: 'text-xs',
headerSubtitle: 'text-xs'
},
[Size.BASE]: {
trigger: 'px-3 py-2 text-sm',
item: 'px-4 py-2 text-sm',
itemIcon: 'mr-3 size-5',
header: 'px-4 py-3',
headerTitle: 'text-sm',
headerSubtitle: 'text-sm'
},
[Size.LG]: {
trigger: 'px-4 py-2.5 text-base',
item: 'px-5 py-2.5 text-base',
itemIcon: 'mr-3 size-6',
header: 'px-5 py-3.5',
headerTitle: 'text-base',
headerSubtitle: 'text-sm'
},
[Size.XL]: {
trigger: 'px-5 py-3 text-lg',
item: 'px-6 py-3 text-lg',
itemIcon: 'mr-3.5 size-7',
header: 'px-6 py-4',
headerTitle: 'text-lg',
headerSubtitle: 'text-base'
},
[Size.XXL]: {
trigger: 'px-6 py-3.5 text-xl',
item: 'px-7 py-3.5 text-xl',
itemIcon: 'mr-4 size-8',
header: 'px-7 py-5',
headerTitle: 'text-xl',
headerSubtitle: 'text-lg'
}
},
isOpen: {
true: {}
},
iconOnly: {
true: {
trigger: 'inline-flex justify-center items-center cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed bg-transparent shadow-none ring-0 hover:bg-transparent'
}
}
},
defaultVariants: {
position: 'bottom-right',
size: Size.BASE,
isOpen: false,
iconOnly: false
}
});