snowballtools-base/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.theme.ts
Wahyu Kurniawan c731dd308c
[T-4840: feat] Dropdown/select component (#108)
* 🎨 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
2024-02-27 12:05:16 +07:00

31 lines
607 B
TypeScript

import { tv, VariantProps } from 'tailwind-variants';
export const selectValueTheme = tv({
slots: {
wrapper: [
'flex',
'items-center',
'gap-1',
'pl-2',
'pr-2',
'rounded-md',
'text-elements-mid-em',
'bg-base-bg-emphasized',
'hover:bg-base-bg-emphasized/80',
],
icon: ['h-3.5', 'w-3.5'],
},
variants: {
size: {
sm: {
wrapper: ['pl-1', 'pr-0.5', 'gap-0.5'],
},
md: {
wrapper: ['pl-2', 'pr-1', 'gap-1'],
},
},
},
});
export type SelectValueTheme = VariantProps<typeof selectValueTheme>;