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>

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>