From 492c3573d00a27e030f596a7c896b5624162278d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 6 Feb 2026 15:55:46 +0300
Subject: [PATCH] feat(Footnote): add component for footnote text

---
 .../ui/Footnote/Footnote.stories.svelte       | 31 +++++++++++++++++++
 src/shared/ui/Footnote/Footnote.svelte        | 30 ++++++++++++++++++
 src/shared/ui/index.ts                        |  2 ++
 3 files changed, 63 insertions(+)
 create mode 100644 src/shared/ui/Footnote/Footnote.stories.svelte
 create mode 100644 src/shared/ui/Footnote/Footnote.svelte

diff --git a/src/shared/ui/Footnote/Footnote.stories.svelte b/src/shared/ui/Footnote/Footnote.stories.svelte
new file mode 100644
index 0000000..9ef397b
--- /dev/null
+++ b/src/shared/ui/Footnote/Footnote.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Footnote from './Footnote.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Footnote',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Styles footnote text',
+            },
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+});
+</script>
+
+<Story name="Default">
+    <Footnote>
+        Footnote
+    </Footnote>
+</Story>
+
+<Story name="With custom render">
+    <Footnote>
+        {#snippet render({ class: className })}
+            <span class={className}>Footnote</span>
+        {/snippet}
+    </Footnote>
+</Story>
diff --git a/src/shared/ui/Footnote/Footnote.svelte b/src/shared/ui/Footnote/Footnote.svelte
new file mode 100644
index 0000000..8cd096c
--- /dev/null
+++ b/src/shared/ui/Footnote/Footnote.svelte
@@ -0,0 +1,30 @@
+<!--
+    Component: Footnote
+    Provides classes for styling footnotes
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+
+interface Props {
+    children?: Snippet;
+    class?: string;
+    /**
+     * Custom render function for full control
+     */
+    render?: Snippet<[{ class: string }]>;
+}
+
+const { children, class: className, render }: Props = $props();
+
+const baseClasses = 'font-mono text-[0.5625rem] sm:text-[0.625rem] uppercase tracking-[0.2em] text-gray-500 opacity-60';
+const combinedClasses = cn(baseClasses, className);
+</script>
+
+{#if render}
+    {@render render({ class: combinedClasses })}
+{:else if children}
+    <span class={combinedClasses}>
+        {@render children()}
+    </span>
+{/if}
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index c5161a2..7aca022 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -4,8 +4,10 @@ export { default as ComboControl } from './ComboControl/ComboControl.svelte';
 export { default as ComboControlV2 } from './ComboControlV2/ComboControlV2.svelte';
 export { default as ContentEditable } from './ContentEditable/ContentEditable.svelte';
 export { default as ExpandableWrapper } from './ExpandableWrapper/ExpandableWrapper.svelte';
+export { default as Footnote } from './Footnote/Footnote.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
+export { default as Logo } from './Logo/Logo.svelte';
 export { default as SearchBar } from './SearchBar/SearchBar.svelte';
 export { default as Section } from './Section/Section.svelte';
 export { default as Skeleton } from './Skeleton/Skeleton.svelte';