feat(Button): shared button component with different sizes and variants

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

@@ -0,0 +1,120 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Button from './Button.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Button',
+    component: Button,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'icon', 'outline', 'ghost'],
+            defaultValue: 'secondary',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            defaultValue: 'md',
+        },
+        iconPosition: {
+            control: 'select',
+            options: ['left', 'right'],
+            defaultValue: 'left',
+        },
+        active: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+        animate: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import XIcon from '@lucide/svelte/icons/x';
+import ButtonGroup from './ButtonGroup.svelte';
+</script>
+
+<Story
+    name="Default/Basic"
+    parameters={{ docs: { description: { story: 'Standard text button at all sizes' } } }}
+>
+    {#snippet template(args)}
+        <ButtonGroup>
+            <Button {...args} size="xs">xs</Button>
+            <Button {...args} size="sm">sm</Button>
+            <Button {...args} size="md">md</Button>
+            <Button {...args} size="lg">lg</Button>
+            <Button {...args} size="xl">xl</Button>
+        </ButtonGroup>
+    {/snippet}
+</Story>
+
+<Story
+    name="Default/With Icon"
+    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>
+            {#snippet icon()}
+                <XIcon />
+            {/snippet}
+            Close
+        </Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Primary"
+    args={{ variant: 'primary', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>Primary</Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Secondary"
+    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>Secondary</Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Icon"
+    args={{ variant: 'icon', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>
+            {#snippet icon()}
+                <XIcon />
+            {/snippet}
+        </Button>
+    {/snippet}
+</Story>
+
+<Story
+    name="Ghost"
+    args={{ variant: 'ghost', size: 'md', iconPosition: 'left', active: false, animate: true }}
+>
+    {#snippet template(args)}
+        <Button {...args}>
+            Ghost
+        </Button>
+    {/snippet}
+</Story>