frontend-svelte/src/shared/ui/Label/Label.svelte

<!--
    Component: Label
    Inline monospace label. The base primitive for all micrographic text.
-->
<script lang="ts">
import { cn } from '$shared/lib';
import type { Snippet } from 'svelte';
import {
    type LabelFont,
    type LabelSize,
    type LabelVariant,
    labelSizeConfig,
    labelVariantConfig,
} from './config';

interface Props {
    /**
     * Visual variant
     * @default 'default'
     */
    variant?: LabelVariant;
    /**
     * Label size
     * @default 'sm'
     */
    size?: LabelSize;
    /**
     * Uppercase text
     * @default true
     */
    uppercase?: boolean;
    /**
     * Font family
     * @default 'mono'
     */
    font?: LabelFont;
    /**
     * Bold text
     * @default false
     */
    bold?: boolean;
    /**
     * Icon snippet
     */
    icon?: Snippet;
    /**
     * Icon placement
     * @default 'left'
     */
    iconPosition?: 'left' | 'right';
    /**
     * Content snippet
     */
    children?: Snippet;
    /**
     * CSS classes
     */
    class?: string;
}

let {
    variant = 'default',
    size = 'sm',
    font = 'mono',
    uppercase = true,
    bold = false,
    icon,
    iconPosition = 'left',
    children,
    class: className,
}: Props = $props();
</script>

<span
    class={cn(
        'font-mono tracking-widest leading-none',
        'inline-flex items-center gap-1.5',
        font === 'primary' && 'font-primary tracking-tight',
        labelSizeConfig[size],
        labelVariantConfig[variant],
        uppercase && 'uppercase',
        bold && 'font-bold',
        className,
    )}
>
    {#if icon && iconPosition === 'left'}
        <span class="inline-flex">{@render icon()}</span>
    {/if}

    {#if children}
        <span>{@render children()}</span>
    {/if}

    {#if icon && iconPosition === 'right'}
        <span class="inline-flex">{@render icon()}</span>
    {/if}
</span>