forked from cerc-io/snowballtools-base
58 lines
1.1 KiB
TypeScript
58 lines
1.1 KiB
TypeScript
import { tv, VariantProps } from 'tailwind-variants';
|
|
|
|
export const userSelectTheme = tv({
|
|
slots: {
|
|
container: ['flex', 'flex-col', 'relative', 'gap-2'],
|
|
inputWrapper: [
|
|
'relative',
|
|
'flex',
|
|
'flex-wrap',
|
|
'gap-1',
|
|
'min-w-[200px]',
|
|
'w-full',
|
|
'rounded-lg',
|
|
'bg-transparent',
|
|
'text-elements-mid-em',
|
|
'shadow-sm',
|
|
'border',
|
|
'border-border-interactive',
|
|
'focus-ring',
|
|
'disabled:shadow-none',
|
|
'disabled:border-none',
|
|
],
|
|
input: ['outline-none'],
|
|
popover: [
|
|
'mt-12',
|
|
'z-20',
|
|
'absolute',
|
|
'flex-col',
|
|
'gap-0.5',
|
|
'min-w-full',
|
|
'bg-surface-floating',
|
|
'shadow-dropdown',
|
|
'w-auto',
|
|
'max-h-60',
|
|
'overflow-auto',
|
|
'border',
|
|
'border-gray-200',
|
|
'rounded-xl',
|
|
],
|
|
popoverItemWrapper: ['flex', 'flex-col', 'px-2', 'py-2', 'gap-1'],
|
|
},
|
|
variants: {
|
|
isOpen: {
|
|
true: {
|
|
popover: ['flex'],
|
|
},
|
|
false: {
|
|
popover: ['hidden'],
|
|
},
|
|
},
|
|
hasValue: {
|
|
true: '',
|
|
},
|
|
},
|
|
});
|
|
|
|
export type UserSelectTheme = VariantProps<typeof userSelectTheme>;
|