@getmicdrop/svelte-components 5.5.1 → 5.5.4

package/dist/primitives/Pagination/Pagination.stories.svelte

@@ -1,76 +1,76 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Pagination from './Pagination.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Pagination',
-    component: Pagination,
-    tags: ['autodocs'],
-    argTypes: {
-      totalPages: { control: 'number' },
-      currentPage: { control: 'number' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Page navigation control for paginated data.',
-        },
-      },
-    },
-  });
-
-  let page1 = $state(1);
-  let page2 = $state(5);
-  let page3 = $state(1);
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div>
-      <Pagination totalPages={10} bind:currentPage={page1} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Middle Page">
-  {#snippet template()}
-    <div>
-      <Pagination totalPages={10} bind:currentPage={page2} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Few Pages">
-  {#snippet template()}
-    <div>
-      <Pagination totalPages={3} bind:currentPage={page3} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Many Pages">
-  {#snippet template()}
-    <Pagination totalPages={100} currentPage={50} />
-  {/snippet}
-</Story>
-
-<Story name="In Context">
-  {#snippet template()}
-    <div class="border rounded-lg p-4">
-      <h3 class="font-medium mb-4">Search Results</h3>
-      <ul class="space-y-2 mb-4">
-        {#each [1, 2, 3, 4, 5] as i}
-          <li class="p-3 border rounded hover:bg-gray-50">
-            Result item {i}
-          </li>
-        {/each}
-      </ul>
-      <div class="border-t pt-4">
-        <Pagination totalPages={20} bind:currentPage={page1} />
-      </div>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Pagination from './Pagination.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {
+      totalPages: { control: 'number' },
+      currentPage: { control: 'number' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Page navigation control for paginated data.',
+        },
+      },
+    },
+  });
+
+  let page1 = $state(1);
+  let page2 = $state(5);
+  let page3 = $state(1);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page1} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Middle Page">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page2} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Few Pages">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={3} bind:currentPage={page3} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Many Pages">
+  {#snippet template()}
+    <Pagination totalPages={100} currentPage={50} />
+  {/snippet}
+</Story>
+
+<Story name="In Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4">
+      <h3 class="font-medium mb-4">Search Results</h3>
+      <ul class="space-y-2 mb-4">
+        {#each [1, 2, 3, 4, 5] as i}
+          <li class="p-3 border rounded hover:bg-gray-50">
+            Result item {i}
+          </li>
+        {/each}
+      </ul>
+      <div class="border-t pt-4">
+        <Pagination totalPages={20} bind:currentPage={page1} />
+      </div>
+    </div>
+  {/snippet}
+</Story>