From 7f2fcb1797e2ec6a74d5ff4b8b00d29347782c1c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 22 Feb 2026 11:25:53 +0300
Subject: [PATCH] feat(DotIndicator): create DotIndicator ui component

---
 .../DotIndicator/DotIndicator.stories.svelte  | 189 ++++++++++++++++++
 .../ui/DotIndicator/DotIndicator.svelte       |  60 ++++++
 2 files changed, 249 insertions(+)
 create mode 100644 src/shared/ui/DotIndicator/DotIndicator.stories.svelte
 create mode 100644 src/shared/ui/DotIndicator/DotIndicator.svelte

diff --git a/src/shared/ui/DotIndicator/DotIndicator.stories.svelte b/src/shared/ui/DotIndicator/DotIndicator.stories.svelte
new file mode 100644
index 0000000..5d60fcb
--- /dev/null
+++ b/src/shared/ui/DotIndicator/DotIndicator.stories.svelte
@@ -0,0 +1,189 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import DotIndicator from './DotIndicator.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/DotIndicator',
+    component: DotIndicator,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Circular status indicator with size options and pulse animation. Use for showing online/offline status, loading states, or feedback indicators.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['online', 'offline', 'busy', 'away', 'success', 'warning', 'error'],
+            description: 'Status variant of the indicator',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Size of the indicator',
+        },
+        pulse: {
+            control: 'boolean',
+            description: 'Enable pulse animation',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import type { Snippet } from 'svelte';
+</script>
+
+<Story name="Default">
+    {#snippet template(args)}
+        <DotIndicator {...args} />
+    {/snippet}
+</Story>
+
+<Story name="Variants">
+    {#snippet template(args)}
+        <div class="flex gap-4 items-center">
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="online" {...args} />
+                <span class="text-sm">Online</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="offline" {...args} />
+                <span class="text-sm">Offline</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="busy" {...args} />
+                <span class="text-sm">Busy</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="away" {...args} />
+                <span class="text-sm">Away</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="success" {...args} />
+                <span class="text-sm">Success</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="warning" {...args} />
+                <span class="text-sm">Warning</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="error" {...args} />
+                <span class="text-sm">Error</span>
+            </div>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Sizes">
+    {#snippet template(args)}
+        <div class="flex gap-4 items-center">
+            <div class="flex items-center gap-2">
+                <DotIndicator size="sm" {...args} />
+                <span class="text-sm text-xs">Small</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator size="md" {...args} />
+                <span class="text-sm">Medium</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator size="lg" {...args} />
+                <span class="text-sm">Large</span>
+            </div>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="With Pulse">
+    {#snippet template(args)}
+        <div class="flex gap-4 items-center">
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="online" pulse {...args} />
+                <span class="text-sm">Online</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="busy" pulse {...args} />
+                <span class="text-sm">Busy</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <DotIndicator variant="away" pulse {...args} />
+                <span class="text-sm">Away</span>
+            </div>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="All Combinations">
+    {#snippet template(args)}
+        <div class="space-y-3">
+            <h3 class="text-sm font-semibold">Sizes</h3>
+            <div class="flex gap-4 items-center">
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="online" size="sm" {...args} />
+                    <span class="text-sm text-xs">Small</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="online" size="md" {...args} />
+                    <span class="text-sm">Medium</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="online" size="lg" {...args} />
+                    <span class="text-sm">Large</span>
+                </div>
+            </div>
+
+            <h3 class="text-sm font-semibold mt-4">Status Variants</h3>
+            <div class="flex gap-4 items-center">
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="online" {...args} />
+                    <span class="text-sm">Online</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="offline" {...args} />
+                    <span class="text-sm">Offline</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="busy" {...args} />
+                    <span class="text-sm">Busy</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="away" {...args} />
+                    <span class="text-sm">Away</span>
+                </div>
+            </div>
+
+            <h3 class="text-sm font-semibold mt-4">Feedback Variants</h3>
+            <div class="flex gap-4 items-center">
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="success" {...args} />
+                    <span class="text-sm">Success</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="warning" {...args} />
+                    <span class="text-sm">Warning</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="error" {...args} />
+                    <span class="text-sm">Error</span>
+                </div>
+            </div>
+
+            <h3 class="text-sm font-semibold mt-4">With Pulse Animation</h3>
+            <div class="flex gap-4 items-center">
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="online" pulse {...args} />
+                    <span class="text-sm">Online</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <DotIndicator variant="busy" pulse {...args} />
+                    <span class="text-sm">Busy</span>
+                </div>
+            </div>
+        </div>
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/DotIndicator/DotIndicator.svelte b/src/shared/ui/DotIndicator/DotIndicator.svelte
new file mode 100644
index 0000000..b62c4d2
--- /dev/null
+++ b/src/shared/ui/DotIndicator/DotIndicator.svelte
@@ -0,0 +1,60 @@
+<!--
+    Component: DotIndicator
+    Circular status indicator with size options and pulse animation
+-->
+<script lang="ts">
+interface Props {
+    /**
+     * Status variant of the indicator
+     * @default online
+     */
+    variant?: 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error';
+    /**
+     * Size of the indicator
+     * @default md
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Enable pulse animation
+     * @default false
+     */
+    pulse?: boolean;
+}
+
+const {
+    variant = 'online',
+    size = 'md',
+    pulse = false,
+}: Props = $props();
+
+const baseClasses = 'rounded-full';
+
+const variantClasses = $derived(
+    variant === 'online' || variant === 'success'
+        ? 'bg-green-500'
+        : variant === 'offline'
+        ? 'bg-gray-400'
+        : variant === 'busy' || variant === 'error'
+        ? 'bg-red-500'
+        : variant === 'away'
+        ? 'bg-yellow-500'
+        : variant === 'warning'
+        ? 'bg-yellow-500'
+        : 'bg-gray-400',
+);
+
+const sizeClasses = $derived(
+    size === 'sm'
+        ? 'w-1.5 h-1.5'
+        : size === 'lg'
+        ? 'w-3 h-3'
+        : 'w-2 h-2',
+);
+
+const pulseAnimation = $derived(pulse && 'animate-pulse');
+</script>
+
+<span
+    class="{baseClasses} {variantClasses} {sizeClasses} {pulseAnimation}"
+    aria-label="Status indicator"
+></span>