54 lines
999 B
Svelte
54 lines
999 B
Svelte
<!--
|
|
Component: TechnicalText
|
|
Monospace <code> element for technical values, measurements, identifiers.
|
|
-->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import {
|
|
type LabelSize,
|
|
type LabelVariant,
|
|
labelSizeConfig,
|
|
labelVariantConfig,
|
|
} from '$shared/ui/Label/config';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
/**
|
|
* Visual variant
|
|
* @default 'muted'
|
|
*/
|
|
variant?: LabelVariant;
|
|
/**
|
|
* Text size
|
|
* @default 'sm'
|
|
*/
|
|
size?: LabelSize;
|
|
/**
|
|
* Content snippet
|
|
*/
|
|
children?: Snippet;
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
variant = 'muted',
|
|
size = 'sm',
|
|
children,
|
|
class: className,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<code
|
|
class={cn(
|
|
'font-mono tracking-tight tabular-nums',
|
|
labelSizeConfig[size],
|
|
labelVariantConfig[variant],
|
|
className,
|
|
)}
|
|
>
|
|
{#if children}{@render children()}{/if}
|
|
</code>
|