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

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

@@ -0,0 +1,138 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import ToggleButton from './ToggleButton.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/ToggleButton',
+    component: ToggleButton,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Toggle button with selected/active states. Accepts `selected` prop as alias for `active`, matching common toggle patterns.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'outline', 'ghost'],
+            defaultValue: 'tertiary',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            defaultValue: 'md',
+        },
+        selected: {
+            control: 'boolean',
+            description: 'Selected state (alias for active)',
+        },
+        active: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+        animate: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+let selected = $state(false);
+</script>
+
+<Story
+    name="Default"
+    args={{ variant: 'tertiary', size: 'md', selected: false, animate: true }}
+>
+    {#snippet template(args)}
+        <ToggleButton {...args}>Toggle Me</ToggleButton>
+    {/snippet}
+</Story>
+
+<Story
+    name="Selected/Unselected"
+    args={{ variant: 'tertiary', size: 'md', animate: true }}
+>
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <ToggleButton {...args} selected={false}>
+                Unselected
+            </ToggleButton>
+            <ToggleButton {...args} selected={true}>
+                Selected
+            </ToggleButton>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Variants"
+    args={{ size: 'md', selected: true, animate: true }}
+>
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <ToggleButton {...args} variant="primary">
+                Primary
+            </ToggleButton>
+            <ToggleButton {...args} variant="secondary">
+                Secondary
+            </ToggleButton>
+            <ToggleButton {...args} variant="tertiary">
+                Tertiary
+            </ToggleButton>
+            <ToggleButton {...args} variant="outline">
+                Outline
+            </ToggleButton>
+            <ToggleButton {...args} variant="ghost">
+                Ghost
+            </ToggleButton>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Interactive"
+    args={{ variant: 'tertiary', size: 'md', animate: true }}
+>
+    {#snippet template(args)}
+        <div class="flex items-center gap-4">
+            <ToggleButton {...args} selected={selected} onclick={() => selected = !selected}>
+                Click to toggle
+            </ToggleButton>
+            <span class="text-sm text-muted-foreground">Currently: {selected ? 'selected' : 'unselected'}</span>
+        </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">
+                <ToggleButton {...args} variant="primary" selected={true}>
+                    Primary
+                </ToggleButton>
+                <ToggleButton {...args} variant="secondary" selected={false}>
+                    Secondary
+                </ToggleButton>
+                <ToggleButton {...args} variant="tertiary" selected={false}>
+                    Tertiary
+                </ToggleButton>
+            </div>
+        </div>
+    {/snippet}
+</Story>