refactor(ui): update shared components and add ControlGroup, SidebarContainer

src/shared/ui/Button/IconButton.stories.svelte

@@ -0,0 +1,148 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import IconButton from './IconButton.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/IconButton',
+    component: IconButton,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Icon-only button variant. Convenience wrapper that defaults variant to "icon" and enforces icon-only usage.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['icon', 'ghost', 'secondary'],
+            defaultValue: 'icon',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            defaultValue: 'md',
+        },
+        active: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+        animate: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import MoonIcon from '@lucide/svelte/icons/moon';
+import SearchIcon from '@lucide/svelte/icons/search';
+import TrashIcon from '@lucide/svelte/icons/trash-2';
+</script>
+
+<Story
+    name="Default"
+    args={{ variant: 'icon', size: 'md', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <IconButton {...args}>
+                {#snippet icon()}
+                    <SearchIcon />
+                {/snippet}
+            </IconButton>
+            <IconButton {...args} size="sm">
+                {#snippet icon()}
+                    <SearchIcon />
+                {/snippet}
+            </IconButton>
+            <IconButton {...args} size="lg">
+                {#snippet icon()}
+                    <SearchIcon />
+                {/snippet}
+            </IconButton>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Variants"
+    args={{ size: 'md', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <IconButton {...args} variant="icon">
+                {#snippet icon()}
+                    <SearchIcon />
+                {/snippet}
+            </IconButton>
+            <IconButton {...args} variant="ghost">
+                {#snippet icon()}
+                    <MoonIcon />
+                {/snippet}
+            </IconButton>
+            <IconButton {...args} variant="secondary">
+                {#snippet icon()}
+                    <SearchIcon />
+                {/snippet}
+            </IconButton>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Active State"
+    args={{ size: 'md', animate: true }}
+>
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <IconButton {...args} active={false} variant="icon">
+                {#snippet icon()}
+                    <TrashIcon />
+                {/snippet}
+            </IconButton>
+            <IconButton {...args} active={true} variant="icon">
+                {#snippet icon()}
+                    <TrashIcon />
+                {/snippet}
+            </IconButton>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Dark Mode"
+    parameters={{
+        backgrounds: {
+            default: 'dark',
+        },
+    }}
+>
+    {#snippet template(args)}
+        <div class="p-8 bg-background text-foreground">
+            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
+            <div class="flex items-center gap-4">
+                <IconButton {...args} variant="icon">
+                    {#snippet icon()}
+                        <SearchIcon />
+                    {/snippet}
+                </IconButton>
+                <IconButton {...args} variant="ghost">
+                    {#snippet icon()}
+                        <MoonIcon />
+                    {/snippet}
+                </IconButton>
+                <IconButton {...args} variant="secondary">
+                    {#snippet icon()}
+                        <SearchIcon />
+                    {/snippet}
+                </IconButton>
+            </div>
+        </div>
+    {/snippet}
+</Story>