@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Pagination/DotIndicator.svelte

@@ -1,66 +1,66 @@
-<script lang="ts">
-  interface Props {
-    /** Total number of items */
-    count: number;
-    /** Currently active index (0-based) */
-    activeIndex?: number;
-    /** Dot size */
-    size?: 'sm' | 'md' | 'lg';
-    /** Color scheme */
-    variant?: 'light' | 'dark';
-    /** Called when a dot is clicked */
-    onselect?: (index: number) => void;
-    /** Additional CSS classes on the container */
-    class?: string;
-  }
-
-  let {
-    count,
-    activeIndex = 0,
-    size = 'md',
-    variant = 'dark',
-    onselect,
-    class: className = '',
-  }: Props = $props();
-
-  const sizeClasses: Record<string, { dot: string; active: string }> = {
-    sm: { dot: 'h-1.5 w-1.5', active: 'scale-125' },
-    md: { dot: 'h-2.5 w-2.5', active: 'scale-125' },
-    lg: { dot: 'h-3 w-3', active: 'scale-125' },
-  };
-
-  const variantClasses: Record<string, { active: string; inactive: string; hover: string }> = {
-    light: {
-      active: 'bg-white',
-      inactive: 'bg-white/30',
-      hover: 'hover:bg-white/50',
-    },
-    dark: {
-      active: 'bg-gray-900 dark:bg-white',
-      inactive: 'bg-gray-300 dark:bg-gray-600',
-      hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
-    },
-  };
-
-  let sizeConfig = $derived(sizeClasses[size] || sizeClasses.md);
-  let variantConfig = $derived(variantClasses[variant] || variantClasses.dark);
-</script>
-
-<div
-  class="flex items-center gap-2 {className}"
-  role="tablist"
-  aria-label="Item selector"
->
-  {#each { length: count } as _, i}
-    <button
-      type="button"
-      class="rounded-full transition-all {sizeConfig.dot} {i === activeIndex
-        ? `${sizeConfig.active} ${variantConfig.active}`
-        : `${variantConfig.inactive} ${variantConfig.hover}`}"
-      role="tab"
-      aria-selected={i === activeIndex}
-      aria-label="Item {i + 1} of {count}"
-      onclick={() => onselect?.(i)}
-    ></button>
-  {/each}
-</div>
+<script lang="ts">
+  interface Props {
+    /** Total number of items */
+    count: number;
+    /** Currently active index (0-based) */
+    activeIndex?: number;
+    /** Dot size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color scheme */
+    variant?: 'light' | 'dark';
+    /** Called when a dot is clicked */
+    onselect?: (index: number) => void;
+    /** Additional CSS classes on the container */
+    class?: string;
+  }
+
+  let {
+    count,
+    activeIndex = 0,
+    size = 'md',
+    variant = 'dark',
+    onselect,
+    class: className = '',
+  }: Props = $props();
+
+  const sizeClasses: Record<string, { dot: string; active: string }> = {
+    sm: { dot: 'h-1.5 w-1.5', active: 'scale-125' },
+    md: { dot: 'h-2.5 w-2.5', active: 'scale-125' },
+    lg: { dot: 'h-3 w-3', active: 'scale-125' },
+  };
+
+  const variantClasses: Record<string, { active: string; inactive: string; hover: string }> = {
+    light: {
+      active: 'bg-card',
+      inactive: 'bg-card/30',
+      hover: 'hover:bg-card/50',
+    },
+    dark: {
+      active: 'bg-bg-primary',
+      inactive: 'bg-bg-quaternary',
+      hover: 'hover:bg-muted-foreground',
+    },
+  };
+
+  let sizeConfig = $derived(sizeClasses[size] || sizeClasses.md);
+  let variantConfig = $derived(variantClasses[variant] || variantClasses.dark);
+</script>
+
+<div
+  class="flex items-center gap-2 {className}"
+  role="tablist"
+  aria-label="Item selector"
+>
+  {#each { length: count } as _, i}
+    <button
+      type="button"
+      class="rounded-full transition-all {sizeConfig.dot} {i === activeIndex
+        ? `${sizeConfig.active} ${variantConfig.active}`
+        : `${variantConfig.inactive} ${variantConfig.hover}`}"
+      role="tab"
+      aria-selected={i === activeIndex}
+      aria-label="Item {i + 1} of {count}"
+      onclick={() => onselect?.(i)}
+    ></button>
+  {/each}
+</div>

package/dist/primitives/Pagination/Pagination.spec.js

@@ -193,13 +193,13 @@ describe('Pagination Button Styling', () => {
     const { container } = render(Pagination, { props: { totalPages: 3 } });
     const button = container.querySelector('[aria-label="Previous page"]');
     expect(button).toHaveClass('border');
-    expect(button).toHaveClass('border-gray-300');
+    expect(button).toHaveClass('border-stroke-primary');
   });
 
-  test('buttons have bg-white background', () => {
+  test('buttons have bg-card background', () => {
     const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 1 } });
     const nextButton = container.querySelector('[aria-label="Next page"]');
-    expect(nextButton).toHaveClass('bg-white');
+    expect(nextButton).toHaveClass('bg-card');
   });
 
   test('prev button has rounded-s-lg', () => {
@@ -214,11 +214,11 @@ describe('Pagination Button Styling', () => {
     expect(nextButton).toHaveClass('rounded-e-lg');
   });
 
-  test('active page has bg-blue-50', () => {
+  test('active page has bg-status-info-bg', () => {
     const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 2 } });
     const activeButton = container.querySelector('[aria-current="page"]');
-    expect(activeButton).toHaveClass('bg-blue-50');
-    expect(activeButton).toHaveClass('text-blue-600');
+    expect(activeButton).toHaveClass('bg-status-info-bg');
+    expect(activeButton).toHaveClass('text-brand-primary');
   });
 
   test('disabled buttons have opacity-50', () => {

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-muted-foreground 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-muted-foreground 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-muted-foreground 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-bg-secondary">
+            Result item {i}
+          </li>
+        {/each}
+      </ul>
+      <div class="border-t pt-4">
+        <Pagination totalPages={20} bind:currentPage={page1} />
+      </div>
+    </div>
+  {/snippet}
+</Story>