forked from cerc-io/snowballtools-base
c731dd308c
* 🎨 style: adjust z index of the date picker popover * 🎨 style: add new spacing and rename box shadow from calendar to dropdown * 🐛 fix: console error becasue button inside button * ♻️ refactor: rename shadow calendar to shador dropdown on calendar component * 🚀 perf: remove vscode settings inside `packages/frontend` * ⚡️ feat: create check radio icon and chevron down icon component * 🔧 chore: install `downshift` * ⚡️ feat: create select component * 🎨 style: adjust the popover position based on the user screen * ⚡️ feat: separate select item to be a component * ⚡️ feat: separate select value to be a component * ♻️ refactor: adjust style and refactor to a new component * ⚡️ feat: create a type for merge two interface but keep the last value * 🐛 fix: forward ref the component to fix console error * ⚡️ feat: add `hideValues` prop to hide the values when on multiple * 🐛 fix: no result not showing * ⚡️ feat: make the select to be controller component * ♻️ refactor: remove console log * ♻️ refactor: update pr review
154 lines
3.1 KiB
TypeScript
154 lines
3.1 KiB
TypeScript
import { VariantProps, tv } from 'tailwind-variants';
|
|
|
|
export const selectTheme = tv({
|
|
slots: {
|
|
container: ['flex', 'flex-col', 'relative', 'gap-2'],
|
|
label: ['text-sm', 'text-elements-high-em'],
|
|
description: ['text-xs', 'text-elements-low-em'],
|
|
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'],
|
|
iconContainer: [
|
|
'absolute',
|
|
'inset-y-0',
|
|
'flex',
|
|
'items-center',
|
|
'gap-2',
|
|
'z-10',
|
|
'cursor-pointer',
|
|
],
|
|
icon: ['text-elements-mid-em'],
|
|
helperIcon: [],
|
|
helperText: ['flex', 'gap-2', 'items-center', 'text-elements-low-em'],
|
|
popover: [
|
|
'z-20',
|
|
'absolute',
|
|
'px-1',
|
|
'py-1',
|
|
'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',
|
|
],
|
|
},
|
|
variants: {
|
|
orientation: {
|
|
horizontal: {
|
|
container: [],
|
|
},
|
|
vertical: {
|
|
container: [],
|
|
},
|
|
},
|
|
variant: {
|
|
default: {
|
|
container: [],
|
|
},
|
|
danger: {
|
|
container: [],
|
|
},
|
|
},
|
|
error: {
|
|
true: {
|
|
inputWrapper: [
|
|
'outline',
|
|
'outline-offset-0',
|
|
'outline-border-danger',
|
|
'shadow-none',
|
|
'focus:outline-border-danger',
|
|
],
|
|
helperText: ['text-elements-danger'],
|
|
},
|
|
},
|
|
size: {
|
|
md: {
|
|
container: ['min-h-11'],
|
|
inputWrapper: ['min-h-11', 'text-sm', 'pl-4', 'pr-4', 'py-1'],
|
|
icon: ['h-[18px]', 'w-[18px]'],
|
|
helperText: 'text-sm',
|
|
helperIcon: ['h-5', 'w-5'],
|
|
popover: ['mt-12'],
|
|
},
|
|
sm: {
|
|
container: ['min-h-8'],
|
|
inputWrapper: ['min-h-8', 'text-xs', 'pl-3', 'pr-3', 'py-0.5'],
|
|
icon: ['h-4', 'w-4'],
|
|
helperText: 'text-xs',
|
|
helperIcon: ['h-4', 'w-4'],
|
|
popover: ['mt-9'],
|
|
},
|
|
},
|
|
isOpen: {
|
|
true: {
|
|
popover: ['flex'],
|
|
},
|
|
false: {
|
|
popover: ['hidden'],
|
|
},
|
|
},
|
|
hasValue: {
|
|
true: '',
|
|
},
|
|
searchable: {
|
|
true: '',
|
|
false: {
|
|
input: ['cursor-pointer'],
|
|
},
|
|
},
|
|
hideValues: {
|
|
true: {
|
|
input: ['placeholder:text-elements-mid-em'],
|
|
},
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
size: 'md',
|
|
hasValue: true,
|
|
class: {
|
|
inputWrapper: ['pl-1'],
|
|
},
|
|
},
|
|
{
|
|
size: 'sm',
|
|
hasValue: true,
|
|
class: {
|
|
inputWrapper: ['pl-0.5'],
|
|
},
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
orientation: 'horizontal',
|
|
variant: 'default',
|
|
size: 'md',
|
|
state: 'default',
|
|
error: false,
|
|
isOpen: false,
|
|
hasValue: false,
|
|
},
|
|
});
|
|
|
|
export type SelectTheme = VariantProps<typeof selectTheme>;
|