From 043db46eaf74f4cea5f9f1ff745e9a4d74238105 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 18:02:52 +0300
Subject: [PATCH] feat(Divider): universal divider

---
 src/shared/ui/Divider/Divider.stories.svelte | 53 ++++++++++++++++++++
 src/shared/ui/Divider/Divider.svelte         | 26 ++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 src/shared/ui/Divider/Divider.stories.svelte
 create mode 100644 src/shared/ui/Divider/Divider.svelte

diff --git a/src/shared/ui/Divider/Divider.stories.svelte b/src/shared/ui/Divider/Divider.stories.svelte
new file mode 100644
index 0000000..86eed19
--- /dev/null
+++ b/src/shared/ui/Divider/Divider.stories.svelte
@@ -0,0 +1,53 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Divider from './Divider.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Divider',
+    component: Divider,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '1px separator line, horizontal or vertical.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'Divider orientation',
+            defaultValue: 'horizontal',
+        },
+    },
+});
+</script>
+
+<Story
+    name="Horizontal"
+    args={{ orientation: 'horizontal' }}
+>
+    {#snippet template()}
+        <div class="flex flex-col gap-4 w-full max-w-md">
+            <div class="text-sm">Content above divider</div>
+            <Divider orientation="horizontal" />
+            <div class="text-sm">Content below divider</div>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Vertical"
+    args={{ orientation: 'vertical' }}
+>
+    {#snippet template()}
+        <div class="flex items-center gap-4 h-24">
+            <div class="text-sm">Left content</div>
+            <Divider orientation="vertical" />
+            <div class="text-sm">Right content</div>
+        </div>
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/Divider/Divider.svelte b/src/shared/ui/Divider/Divider.svelte
new file mode 100644
index 0000000..6f71638
--- /dev/null
+++ b/src/shared/ui/Divider/Divider.svelte
@@ -0,0 +1,26 @@
+<!--
+    Component: Divider
+    1px separator line, horizontal or vertical.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+
+let {
+    orientation = 'horizontal',
+    class: className,
+}: Props = $props();
+</script>
+
+<div
+    class={cn(
+        'bg-black/5 dark:bg-white/10',
+        orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
+        className,
+    )}
+>
+</div>