@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/NumberInput/NumberInput.svelte

@@ -1,106 +1,106 @@
-<script>
-  /**
-   * NumberInput Component - Flowbite Native (Pure Tailwind)
-   * Quantity stepper with increment/decrement buttons
-   *
-   * Matches Figma design:
-   * - Buttons: bg-gray-100, border-gray-300, outer corners rounded
-   * - Display: bg-gray-50, border-gray-300
-   * - Height: 37px
-   * - Icons: 10x10px
-   */
-  import { twMerge } from 'tailwind-merge';
-
-  /** @type {{
-    value?: number,
-    min?: number,
-    max?: number,
-    disabled?: boolean,
-    onchange?: (value: number) => void,
-    class?: string,
-    [key: string]: any
-  }} */
-  let {
-    value = 0,
-    min = 0,
-    max = Infinity,
-    disabled = false,
-    onchange,
-    class: className = "",
-    ...restProps
-  } = $props();
-
-  function increment() {
-    if (value < max && !disabled) {
-      const newValue = value + 1;
-      onchange?.(newValue);
-    }
-  }
-
-  function decrement() {
-    if (value > min && !disabled) {
-      const newValue = value - 1;
-      onchange?.(newValue);
-    }
-  }
-
-  let isMinDisabled = $derived(disabled || value <= min);
-  let isMaxDisabled = $derived(disabled || value >= max);
-
-  // Button base classes matching Figma spec
-  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-gray-100 border border-gray-300 transition-colors dark:bg-gray-700 dark:border-gray-600";
-  const buttonHover = "hover:bg-gray-200 dark:hover:bg-gray-600";
-  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700";
-
-  let decrementClasses = $derived(twMerge(
-    buttonBase,
-    buttonHover,
-    buttonDisabled,
-    "rounded-l-lg"
-  ));
-
-  let incrementClasses = $derived(twMerge(
-    buttonBase,
-    buttonHover,
-    buttonDisabled,
-    "rounded-r-lg"
-  ));
-
-  // Display classes matching Figma spec
-  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-gray-500 text-sm bg-gray-50 border-y border-gray-300 -mx-px dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600";
-
-  let containerClasses = $derived(twMerge(
-    "inline-flex items-center",
-    className
-  ));
-</script>
-
-<div class={containerClasses} {...restProps}>
-  <button
-    type="button"
-    class={decrementClasses}
-    onclick={decrement}
-    disabled={isMinDisabled}
-    aria-label="Decrease quantity"
-  >
-    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 2">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
-    </svg>
-  </button>
-
-  <span class={displayClasses}>
-    {value}
-  </span>
-
-  <button
-    type="button"
-    class={incrementClasses}
-    onclick={increment}
-    disabled={isMaxDisabled}
-    aria-label="Increase quantity"
-  >
-    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 18">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
-    </svg>
-  </button>
-</div>
+<script>
+  /**
+   * NumberInput Component - Flowbite Native (Pure Tailwind)
+   * Quantity stepper with increment/decrement buttons
+   *
+   * Matches Figma design:
+   * - Buttons: bg-gray-100, border-gray-300, outer corners rounded
+   * - Display: bg-gray-50, border-gray-300
+   * - Height: 37px
+   * - Icons: 10x10px
+   */
+  import { twMerge } from 'tailwind-merge';
+
+  /** @type {{
+    value?: number,
+    min?: number,
+    max?: number,
+    disabled?: boolean,
+    onchange?: (value: number) => void,
+    class?: string,
+    [key: string]: any
+  }} */
+  let {
+    value = 0,
+    min = 0,
+    max = Infinity,
+    disabled = false,
+    onchange,
+    class: className = "",
+    ...restProps
+  } = $props();
+
+  function increment() {
+    if (value < max && !disabled) {
+      const newValue = value + 1;
+      onchange?.(newValue);
+    }
+  }
+
+  function decrement() {
+    if (value > min && !disabled) {
+      const newValue = value - 1;
+      onchange?.(newValue);
+    }
+  }
+
+  let isMinDisabled = $derived(disabled || value <= min);
+  let isMaxDisabled = $derived(disabled || value >= max);
+
+  // Button base classes matching Figma spec
+  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-gray-100 border border-gray-300 transition-colors dark:bg-gray-700 dark:border-gray-600";
+  const buttonHover = "hover:bg-gray-200 dark:hover:bg-gray-600";
+  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700";
+
+  let decrementClasses = $derived(twMerge(
+    buttonBase,
+    buttonHover,
+    buttonDisabled,
+    "rounded-l-lg"
+  ));
+
+  let incrementClasses = $derived(twMerge(
+    buttonBase,
+    buttonHover,
+    buttonDisabled,
+    "rounded-r-lg"
+  ));
+
+  // Display classes matching Figma spec
+  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-gray-500 text-sm bg-gray-50 border-y border-gray-300 -mx-px dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600";
+
+  let containerClasses = $derived(twMerge(
+    "inline-flex items-center",
+    className
+  ));
+</script>
+
+<div class={containerClasses} {...restProps}>
+  <button
+    type="button"
+    class={decrementClasses}
+    onclick={decrement}
+    disabled={isMinDisabled}
+    aria-label="Decrease quantity"
+  >
+    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 2">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
+    </svg>
+  </button>
+
+  <span class={displayClasses}>
+    {value}
+  </span>
+
+  <button
+    type="button"
+    class={incrementClasses}
+    onclick={increment}
+    disabled={isMaxDisabled}
+    aria-label="Increase quantity"
+  >
+    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 18">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+    </svg>
+  </button>
+</div>

package/dist/primitives/Pagination/Pagination.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Pagination.spec.d.ts.map

package/dist/primitives/Pagination/Pagination.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +1,266 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Pagination from './Pagination.svelte';
+
+describe('Pagination Component', () => {
+  test('renders navigation element', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+  });
+
+  test('has aria-label="Pagination"', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    const nav = container.querySelector('nav');
+    expect(nav).toHaveAttribute('aria-label', 'Pagination');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, class: 'custom-pagination' } });
+    const nav = container.querySelector('nav');
+    expect(nav).toHaveClass('custom-pagination');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, 'data-testid': 'my-pagination' } });
+    const nav = container.querySelector('[data-testid="my-pagination"]');
+    expect(nav).toBeInTheDocument();
+  });
+});
+
+describe('Pagination Page Numbers', () => {
+  test('renders correct number of page buttons', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 1 } });
+    const pageButtons = container.querySelectorAll('button');
+    // 5 pages + prev + next = 7 buttons
+    expect(pageButtons.length).toBe(7);
+  });
+
+  test('currentPage button has aria-current="page"', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 2 } });
+    const currentButton = container.querySelector('[aria-current="page"]');
+    expect(currentButton).toBeInTheDocument();
+    expect(currentButton).toHaveTextContent('2');
+  });
+
+  test('first page is shown by default', () => {
+    render(Pagination, { props: { totalPages: 5 } });
+    expect(screen.getByRole('button', { name: '1' })).toBeInTheDocument();
+  });
+});
+
+describe('Pagination Navigation Buttons', () => {
+  test('shows prev/next buttons by default', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    expect(container.querySelector('[aria-label="Previous page"]')).toBeInTheDocument();
+    expect(container.querySelector('[aria-label="Next page"]')).toBeInTheDocument();
+  });
+
+  test('hides prev/next when showPrevNext is false', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, showPrevNext: false } });
+    expect(container.querySelector('[aria-label="Previous page"]')).not.toBeInTheDocument();
+    expect(container.querySelector('[aria-label="Next page"]')).not.toBeInTheDocument();
+  });
+
+  test('previous button is disabled on first page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 1 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).toBeDisabled();
+  });
+
+  test('next button is disabled on last page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 5 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).toBeDisabled();
+  });
+
+  test('previous button is enabled when not on first page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 3 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  test('next button is enabled when not on last page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 3 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).not.toBeDisabled();
+  });
+});
+
+describe('Pagination Click Events', () => {
+  test('calls onchange when page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    render(Pagination, { props: { totalPages: 5, currentPage: 1, onchange } });
+
+    await user.click(screen.getByRole('button', { name: '3' }));
+    expect(onchange).toHaveBeenCalledWith({ page: 3 });
+  });
+
+  test('calls onPageChange when page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(Pagination, { props: { totalPages: 5, currentPage: 1, onPageChange } });
+
+    await user.click(screen.getByRole('button', { name: '2' }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  test('clicking next moves to next page', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 2, onchange } });
+
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    await user.click(nextButton);
+    expect(onchange).toHaveBeenCalledWith({ page: 3 });
+  });
+
+  test('clicking previous moves to previous page', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 3, onchange } });
+
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    await user.click(prevButton);
+    expect(onchange).toHaveBeenCalledWith({ page: 2 });
+  });
+});
+
+describe('Pagination Sizes', () => {
+  test('sm size applies correct classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, size: 'sm' } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('h-8');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('md size applies correct classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, size: 'md' } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('h-9');
+  });
+
+  test('lg size applies correct classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, size: 'lg' } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('h-10');
+  });
+});
+
+describe('Pagination Variant', () => {
+  test('table variant renders with entries text', () => {
+    const { container } = render(Pagination, { props: {
+      variant: 'table',
+      totalPages: 5,
+      totalItems: 50,
+      perPage: 10,
+      currentPage: 1
+    } });
+    // Check that the component renders in table variant mode
+    const wrapper = container.querySelector('div.flex.flex-col');
+    expect(wrapper).toBeInTheDocument();
+    expect(container.textContent).toContain('entries');
+  });
+
+  test('table variant shows nav element', () => {
+    const { container } = render(Pagination, { props: {
+      variant: 'table',
+      totalPages: 5,
+      totalItems: 50,
+      perPage: 10,
+      currentPage: 1
+    } });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+  });
+
+  test('default variant has inline-flex class', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    const nav = container.querySelector('nav');
+    expect(nav).toHaveClass('inline-flex');
+  });
+});
+
+describe('Pagination Button Styling', () => {
+  test('buttons have flex and items-center classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('flex');
+    expect(button).toHaveClass('items-center');
+  });
+
+  test('buttons have border classes', () => {
+    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');
+  });
+
+  test('buttons have bg-white background', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 1 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).toHaveClass('bg-white');
+  });
+
+  test('prev button has rounded-s-lg', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).toHaveClass('rounded-s-lg');
+  });
+
+  test('next button has rounded-e-lg', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).toHaveClass('rounded-e-lg');
+  });
+
+  test('active page has bg-blue-50', () => {
+    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');
+  });
+
+  test('disabled buttons have opacity-50', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 1 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).toHaveClass('opacity-50');
+  });
+});
+
+describe('Pagination Ellipsis', () => {
+  test('shows ellipsis when needed', () => {
+    const { container } = render(Pagination, { props: { totalPages: 10, currentPage: 8, maxVisible: 3 } });
+    const ellipses = container.querySelectorAll('.cursor-default');
+    expect(ellipses.length).toBeGreaterThan(0);
+  });
+
+  test('shows page 1 with ellipsis when not in visible range', () => {
+    render(Pagination, { props: { totalPages: 10, currentPage: 8, maxVisible: 3 } });
+    expect(screen.getByRole('button', { name: '1' })).toBeInTheDocument();
+  });
+});
+
+describe('Pagination Props', () => {
+  test('maxVisible controls visible page count', () => {
+    const { container } = render(Pagination, { props: { totalPages: 10, maxVisible: 3, currentPage: 5 } });
+    // Should have 3 visible pages plus ellipsis buttons plus prev/next
+    const pageButtons = container.querySelectorAll('button');
+    expect(pageButtons.length).toBeGreaterThan(3);
+  });
+
+  test('showIcons prop works as alias for showPrevNext', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, showIcons: false } });
+    expect(container.querySelector('[aria-label="Previous page"]')).not.toBeInTheDocument();
+  });
+
+  test('previousLabel replaces chevron icon', () => {
+    render(Pagination, { props: { totalPages: 5, previousLabel: 'Back' } });
+    expect(screen.getByText('Back')).toBeInTheDocument();
+  });
+
+  test('nextLabel replaces chevron icon', () => {
+    render(Pagination, { props: { totalPages: 5, nextLabel: 'Forward' } });
+    expect(screen.getByText('Forward')).toBeInTheDocument();
+  });
+});

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>