svelte-5-ui-lib/dist/forms/select/theme.js

Svelte 5 UI Lib is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.

import { tv } from 'tailwind-variants';
export const select = tv({
    base: 'block w-full',
    variants: {
        underline: {
            true: 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer !px-0',
            false: 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
        },
        size: {
            sm: 'text-sm p-2',
            md: 'text-sm p-2.5',
            lg: 'text-base py-3 px-4'
        }
    },
    defaultVariants: {
        underline: false,
        size: 'md'
    }
});