@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
83 lines (82 loc) • 3.46 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Size } from '../../variants.js';
export const selectTV = tv({
slots: {
base: '',
trigger: `relative flex items-center justify-between w-full text-left bg-white border
border-default-300 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 rounded-lg shadow-xs cursor-pointer transition-colors hover:border-default-400`,
triggerIcon: 'transition-transform duration-200 text-default-500',
container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-sm origin-top-left top-full left-0 mt-2',
searchInput: 'flex items-center gap-x-3 w-full outline-none px-2 h-10 border-b border-b-default-200',
list: 'py-1 max-h-60 overflow-x-clip overflow-y-auto h-full',
item: `w-full px-3 py-2 text-sm text-left
data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700
data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 data-[selected=true]:font-medium
data-[selected=true]:data-[highlighted=true]:bg-info-200 data-[selected=true]:data-[highlighted=true]:text-info-500
cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`,
emptyMessage: 'px-3 py-2 text-sm text-default-500'
},
variants: {
size: {
[Size.XS]: {
trigger: 'h-6 px-2 py-1 text-xs gap-1',
triggerIcon: 'h-3 w-3',
container: 'max-h-40',
item: 'px-2 py-1 text-xs',
base: 'w-24'
},
[Size.SM]: {
trigger: 'h-8 px-3 py-2 text-sm gap-1.5',
triggerIcon: 'h-3.5 w-3.5',
container: 'max-h-48',
item: 'px-2.5 py-1.5 text-xs',
base: 'w-32'
},
[Size.BASE]: {
trigger: 'h-10 px-3 py-2 text-base gap-2',
triggerIcon: 'h-4 w-4',
container: 'max-h-60',
item: 'px-3 py-2 text-sm',
base: 'w-40'
},
[Size.LG]: {
trigger: 'h-12 px-3 py-2 text-lg gap-2.5',
triggerIcon: 'h-5 w-5',
container: 'max-h-72',
item: 'px-4 py-2.5 text-base',
base: 'w-48'
},
[Size.XL]: {
trigger: 'h-12 px-5 py-3 text-lg gap-3',
triggerIcon: 'h-6 w-6',
container: 'max-h-80',
item: 'px-5 py-3 text-lg',
base: 'w-56'
},
[Size.XXL]: {
trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
triggerIcon: 'h-7 w-7',
container: 'max-h-96',
item: 'px-6 py-3.5 text-xl',
base: 'w-64'
}
},
disabled: {
true: {
trigger: 'opacity-50 cursor-not-allowed hover:border-default-300',
container: 'pointer-events-none',
item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
}
},
multiple: {
true: {
trigger: 'flex-wrap min-h-[2.5rem]'
}
}
},
defaultVariants: {
size: 'base',
disabled: false,
multiple: false
}
});