svelte-5-ui-lib/dist/breadcrumb/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 breadcrumb = tv({
    slots: {
        nav: 'flex',
        list: 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse',
        item: 'inline-flex items-center',
        icon: 'h-6 w-6 text-gray-400 rtl:-scale-x-100'
    },
    variants: {
        solid: {
            true: {
                nav: 'px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
            },
            false: ''
        },
        home: {
            true: '',
            false: ''
        },
        hasHref: {
            true: '',
            false: ''
        }
    },
    compoundVariants: [
        {
            home: true,
            class: {
                item: 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
                icon: 'me-2 h-4 w-4'
            }
        },
        {
            home: false,
            hasHref: true,
            class: {
                item: 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white'
            }
        },
        {
            home: false,
            hasHref: false,
            class: {
                item: 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400'
            }
        }
    ],
    defaultVariants: {
        solid: false
    }
});