feat: storybook cases and mocks

src/shared/lib/storybook/MockIcon.svelte

@@ -0,0 +1,41 @@
+<!--
+    Component: MockIcon
+    Wrapper component for Lucide icons to properly handle className in Storybook.
+
+    Lucide Svelte icons from @lucide/svelte/icons/* don't properly handle
+    the className prop directly. This wrapper ensures the class is applied
+    correctly via the HTML element's class attribute.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type {
+    Component,
+    Snippet,
+} from 'svelte';
+
+interface Props {
+    /**
+     * The Lucide icon component
+     */
+    icon: Component;
+    /**
+     * CSS classes to apply to the icon
+     */
+    class?: string;
+    /**
+     * Additional icon-specific attributes
+     */
+    attrs?: Record<string, unknown>;
+}
+
+let { icon: Icon, class: className, attrs = {} }: Props = $props();
+</script>
+
+{#if Icon}
+    {@const __iconClass__ = cn('size-4', className)}
+    <!-- Render icon component dynamically with class prop -->
+    <Icon
+        class={__iconClass__}
+        {...attrs}
+    />
+{/if}