From 83f2bdcdda0069b96cb898085b4dcb3cd8893af4 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 18:00:01 +0300
Subject: [PATCH] feat(TechText): component for technical text

---
 .../ui/TechText/TechText.stories.svelte       | 97 +++++++++++++++++++
 src/shared/ui/TechText/TechText.svelte        | 39 ++++++++
 2 files changed, 136 insertions(+)
 create mode 100644 src/shared/ui/TechText/TechText.stories.svelte
 create mode 100644 src/shared/ui/TechText/TechText.svelte

diff --git a/src/shared/ui/TechText/TechText.stories.svelte b/src/shared/ui/TechText/TechText.stories.svelte
new file mode 100644
index 0000000..015f7c4
--- /dev/null
+++ b/src/shared/ui/TechText/TechText.stories.svelte
@@ -0,0 +1,97 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import TechText from './TechText.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/TechText',
+    component: TechText,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Monospace <code> element for technical values, measurements, identifiers.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'accent', 'muted', 'success', 'warning', 'error'],
+            description: 'Text variant',
+            defaultValue: 'muted',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md'],
+            description: 'Text size',
+            defaultValue: 'sm',
+        },
+    },
+});
+</script>
+
+<Story
+    name="Default variant"
+    args={{ variant: 'default', size: 'sm' }}
+>
+    {#snippet template()}
+        <TechText variant="default" size="sm">0x1F4A9</TechText>
+    {/snippet}
+</Story>
+
+<Story
+    name="Accent variant"
+    args={{ variant: 'accent', size: 'sm' }}
+>
+    {#snippet template()}
+        <TechText variant="accent" size="sm">0x1F4A9</TechText>
+    {/snippet}
+</Story>
+
+<Story
+    name="Muted variant"
+    args={{ variant: 'muted', size: 'sm' }}
+>
+    {#snippet template()}
+        <TechText variant="muted" size="sm">0x1F4A9</TechText>
+    {/snippet}
+</Story>
+
+<Story
+    name="Success variant"
+    args={{ variant: 'success', size: 'sm' }}
+>
+    {#snippet template()}
+        <TechText variant="success" size="sm">0x1F4A9</TechText>
+    {/snippet}
+</Story>
+
+<Story
+    name="Warning variant"
+    args={{ variant: 'warning', size: 'sm' }}
+>
+    {#snippet template()}
+        <TechText variant="warning" size="sm">0x1F4A9</TechText>
+    {/snippet}
+</Story>
+
+<Story
+    name="Error variant"
+    args={{ variant: 'error', size: 'sm' }}
+>
+    {#snippet template()}
+        <TechText variant="error" size="sm">0x1F4A9</TechText>
+    {/snippet}
+</Story>
+
+<Story name="All sizes">
+    {#snippet template()}
+        <div class="flex flex-col gap-2">
+            <TechText variant="default" size="xs">XS: font-family-16px</TechText>
+            <TechText variant="default" size="sm">SM: font-family-16px</TechText>
+            <TechText variant="default" size="md">MD: font-family-16px</TechText>
+        </div>
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/TechText/TechText.svelte b/src/shared/ui/TechText/TechText.svelte
new file mode 100644
index 0000000..63f6895
--- /dev/null
+++ b/src/shared/ui/TechText/TechText.svelte
@@ -0,0 +1,39 @@
+<!--
+    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 {
+    variant?: LabelVariant;
+    size?: LabelSize;
+    children?: Snippet;
+    class?: string;
+}
+
+let {
+    variant = 'muted',
+    size = 'sm',
+    children,
+    class: className,
+}: Props = $props();
+</script>
+
+<code
+    class={cn(
+        "font-['Space_Mono'] tracking-tight tabular-nums",
+        labelSizeConfig[size],
+        labelVariantConfig[variant],
+        className,
+    )}
+>
+    {#if children}{@render children()}{/if}
+</code>