@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/primitives/Pagination/Pagination.svelte

@@ -1,275 +1,275 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { ChevronLeftOutline, ChevronRightOutline } from "../Icons";
-  import { typography } from "../../tokens/typography";
-
-  const defaultLabels = {
-    showing: 'Showing',
-    to: 'to',
-    of: 'of',
-    entries: 'entries',
-    previousPage: 'Previous page',
-    nextPage: 'Next page',
-    pagination: 'Pagination',
-  };
-
-  interface Props {
-    currentPage?: number;
-    totalPages?: number;
-    maxVisible?: number;
-    showPrevNext?: boolean;
-    showIcons?: boolean;
-    previousLabel?: string;
-    nextLabel?: string;
-    variant?: 'default' | 'table';
-    size?: 'sm' | 'md' | 'lg';
-    totalItems?: number;
-    perPage?: number;
-    class?: string;
-    onchange?: (detail: { page: number }) => void;
-    onPageChange?: (page: number) => void;
-    prev?: Snippet;
-    next?: Snippet;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    currentPage = $bindable(1),
-    totalPages = 1,
-    maxVisible = 5,
-    showPrevNext = true,
-    showIcons = undefined,
-    previousLabel = undefined,
-    nextLabel = undefined,
-    variant = 'default',
-    size = 'md',
-    totalItems = 0,
-    perPage = 10,
-    class: className = "",
-    onchange,
-    onPageChange,
-    prev,
-    next,
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  // Support flowbite's showIcons prop
-  let effectiveShowPrevNext = $derived(showIcons !== undefined ? showIcons : showPrevNext);
-
-  // Calculate showing range for table variant
-  let startItem = $derived(totalItems > 0 ? (currentPage - 1) * perPage + 1 : 0);
-  let endItem = $derived(Math.min(currentPage * perPage, totalItems));
-
-  // Size-based classes
-  let sizeClasses = $derived({
-    sm: 'h-8 px-3 text-sm',
-    md: 'h-9 px-3 text-sm',
-    lg: 'h-10 px-4 text-base'
-  }[size]);
-
-  let pageSizeClasses = $derived({
-    sm: 'h-8 w-8 text-sm',
-    md: 'h-9 w-9 text-sm',
-    lg: 'h-10 w-10 text-base'
-  }[size]);
-
-  function goToPage(page: number) {
-    if (page >= 1 && page <= totalPages && page !== currentPage) {
-      currentPage = page;
-      onchange?.({ page });
-      // Also dispatch flowbite-style event
-      onPageChange?.(page);
-    }
-  }
-
-  function previous() {
-    goToPage(currentPage - 1);
-  }
-
-  function nextPage() {
-    goToPage(currentPage + 1);
-  }
-
-  // Calculate which page numbers to show
-  let visiblePages = $derived.by(() => {
-    const pages = [];
-    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
-    let end = Math.min(totalPages, start + maxVisible - 1);
-
-    // Adjust start if we're near the end
-    if (end - start + 1 < maxVisible) {
-      start = Math.max(1, end - maxVisible + 1);
-    }
-
-    for (let i = start; i <= end; i++) {
-      pages.push(i);
-    }
-
-    return pages;
-  });
-
-  let showStartEllipsis = $derived(visiblePages[0] > 1);
-  let showEndEllipsis = $derived(visiblePages[visiblePages.length - 1] < totalPages);
-
-  // Base button classes (Flowbite connected style)
-  const baseButtonClasses = "flex items-center justify-center leading-tight font-medium border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";
-
-  // Active state classes (Flowbite style)
-  const activeClasses = "flex items-center justify-center leading-tight font-medium border border-gray-300 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:border-gray-700 dark:text-white";
-
-  // Disabled state classes
-  const disabledClasses = "cursor-not-allowed opacity-50";
-</script>
-
-{#if variant === 'table'}
-  <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}" {...restProps}>
-    <span class={`${typography.sm} text-gray-700 dark:text-gray-400`}>
-      {labels.showing} <span class={`font-semibold ${typography.sm}`}>{startItem}</span> {labels.to} <span class={`font-semibold ${typography.sm}`}>{endItem}</span> {labels.of} <span class={`font-semibold ${typography.sm}`}>{totalItems}</span> {labels.entries}
-    </span>
-    <nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label={labels.pagination}>
-      {#if effectiveShowPrevNext}
-        <button
-          type="button"
-          class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
-          disabled={currentPage === 1}
-          onclick={previous}
-          aria-label={labels.previousPage}
-        >
-          {#if prev}
-            {@render prev()}
-          {:else if previousLabel}
-            {previousLabel}
-          {:else}
-            <span aria-hidden="true"><ChevronLeftOutline class="h-4 w-4 rtl:rotate-180" /></span>
-          {/if}
-        </button>
-      {/if}
-
-      {#if showStartEllipsis}
-        <button
-          type="button"
-          class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-s-lg' : ''}"
-          onclick={() => goToPage(1)}
-        >
-          1
-        </button>
-        <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
-      {/if}
-
-      {#each visiblePages as page, index}
-        <button
-          type="button"
-          class="{page === currentPage ? activeClasses : baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext && !showStartEllipsis && index === 0 ? 'rounded-s-lg' : ''} {!effectiveShowPrevNext && !showEndEllipsis && index === visiblePages.length - 1 ? 'rounded-e-lg' : ''}"
-          onclick={() => goToPage(page)}
-          aria-current={page === currentPage ? "page" : undefined}
-        >
-          {page}
-        </button>
-      {/each}
-
-      {#if showEndEllipsis}
-        <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
-        <button
-          type="button"
-          class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-e-lg' : ''}"
-          onclick={() => goToPage(totalPages)}
-        >
-          {totalPages}
-        </button>
-      {/if}
-
-      {#if effectiveShowPrevNext}
-        <button
-          type="button"
-          class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
-          disabled={currentPage === totalPages}
-          onclick={nextPage}
-          aria-label={labels.nextPage}
-        >
-          {#if next}
-            {@render next()}
-          {:else if nextLabel}
-            {nextLabel}
-          {:else}
-            <span aria-hidden="true"><ChevronRightOutline class="h-4 w-4 rtl:rotate-180" /></span>
-          {/if}
-        </button>
-      {/if}
-    </nav>
-  </div>
-{:else}
-  <nav class="inline-flex -space-x-px rtl:space-x-reverse text-sm {className}" aria-label={labels.pagination} {...restProps}>
-    {#if effectiveShowPrevNext}
-      <button
-        type="button"
-        class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
-        disabled={currentPage === 1}
-        onclick={previous}
-        aria-label={labels.previousPage}
-      >
-        {#if prev}
-          {@render prev()}
-        {:else if previousLabel}
-          {previousLabel}
-        {:else}
-          <span aria-hidden="true"><ChevronLeftOutline class="h-4 w-4 rtl:rotate-180" /></span>
-        {/if}
-      </button>
-    {/if}
-
-    {#if showStartEllipsis}
-      <button
-        type="button"
-        class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-s-lg' : ''}"
-        onclick={() => goToPage(1)}
-      >
-        1
-      </button>
-      <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
-    {/if}
-
-    {#each visiblePages as page, index}
-      <button
-        type="button"
-        class="{page === currentPage ? activeClasses : baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext && !showStartEllipsis && index === 0 ? 'rounded-s-lg' : ''} {!effectiveShowPrevNext && !showEndEllipsis && index === visiblePages.length - 1 ? 'rounded-e-lg' : ''}"
-        onclick={() => goToPage(page)}
-        aria-current={page === currentPage ? "page" : undefined}
-      >
-        {page}
-      </button>
-    {/each}
-
-    {#if showEndEllipsis}
-      <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
-      <button
-        type="button"
-        class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-e-lg' : ''}"
-        onclick={() => goToPage(totalPages)}
-      >
-        {totalPages}
-      </button>
-    {/if}
-
-    {#if effectiveShowPrevNext}
-      <button
-        type="button"
-        class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
-        disabled={currentPage === totalPages}
-        onclick={nextPage}
-        aria-label={labels.nextPage}
-      >
-        {#if next}
-          {@render next()}
-        {:else if nextLabel}
-          {nextLabel}
-        {:else}
-          <span aria-hidden="true"><ChevronRightOutline class="h-4 w-4 rtl:rotate-180" /></span>
-        {/if}
-      </button>
-    {/if}
-  </nav>
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ChevronLeftOutline, ChevronRightOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
+
+  const defaultLabels = {
+    showing: 'Showing',
+    to: 'to',
+    of: 'of',
+    entries: 'entries',
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    pagination: 'Pagination',
+  };
+
+  interface Props {
+    currentPage?: number;
+    totalPages?: number;
+    maxVisible?: number;
+    showPrevNext?: boolean;
+    showIcons?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    variant?: 'default' | 'table';
+    size?: 'sm' | 'md' | 'lg';
+    totalItems?: number;
+    perPage?: number;
+    class?: string;
+    onchange?: (detail: { page: number }) => void;
+    onPageChange?: (page: number) => void;
+    prev?: Snippet;
+    next?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    currentPage = $bindable(1),
+    totalPages = 1,
+    maxVisible = 5,
+    showPrevNext = true,
+    showIcons = undefined,
+    previousLabel = undefined,
+    nextLabel = undefined,
+    variant = 'default',
+    size = 'md',
+    totalItems = 0,
+    perPage = 10,
+    class: className = "",
+    onchange,
+    onPageChange,
+    prev,
+    next,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Support flowbite's showIcons prop
+  let effectiveShowPrevNext = $derived(showIcons !== undefined ? showIcons : showPrevNext);
+
+  // Calculate showing range for table variant
+  let startItem = $derived(totalItems > 0 ? (currentPage - 1) * perPage + 1 : 0);
+  let endItem = $derived(Math.min(currentPage * perPage, totalItems));
+
+  // Size-based classes
+  let sizeClasses = $derived({
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-9 px-3 text-sm',
+    lg: 'h-10 px-4 text-base'
+  }[size]);
+
+  let pageSizeClasses = $derived({
+    sm: 'h-8 w-8 text-sm',
+    md: 'h-9 w-9 text-sm',
+    lg: 'h-10 w-10 text-base'
+  }[size]);
+
+  function goToPage(page: number) {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      currentPage = page;
+      onchange?.({ page });
+      // Also dispatch flowbite-style event
+      onPageChange?.(page);
+    }
+  }
+
+  function previous() {
+    goToPage(currentPage - 1);
+  }
+
+  function nextPage() {
+    goToPage(currentPage + 1);
+  }
+
+  // Calculate which page numbers to show
+  let visiblePages = $derived.by(() => {
+    const pages = [];
+    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let end = Math.min(totalPages, start + maxVisible - 1);
+
+    // Adjust start if we're near the end
+    if (end - start + 1 < maxVisible) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  });
+
+  let showStartEllipsis = $derived(visiblePages[0] > 1);
+  let showEndEllipsis = $derived(visiblePages[visiblePages.length - 1] < totalPages);
+
+  // Base button classes (Flowbite connected style)
+  const baseButtonClasses = "flex items-center justify-center leading-tight font-medium border border-stroke-primary bg-card text-muted-foreground hover:bg-muted hover:text-text-secondary";
+
+  // Active state classes (Flowbite style)
+  const activeClasses = "flex items-center justify-center leading-tight font-medium border border-stroke-primary bg-status-info-bg text-brand-primary hover:bg-status-info-bg hover:text-brand-primary";
+
+  // Disabled state classes
+  const disabledClasses = "cursor-not-allowed opacity-50";
+</script>
+
+{#if variant === 'table'}
+  <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}" {...restProps}>
+    <span class={`${typography.sm} text-text-secondary`}>
+      {labels.showing} <span class={`font-semibold ${typography.sm}`}>{startItem}</span> {labels.to} <span class={`font-semibold ${typography.sm}`}>{endItem}</span> {labels.of} <span class={`font-semibold ${typography.sm}`}>{totalItems}</span> {labels.entries}
+    </span>
+    <nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label={labels.pagination}>
+      {#if effectiveShowPrevNext}
+        <button
+          type="button"
+          class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
+          disabled={currentPage === 1}
+          onclick={previous}
+          aria-label={labels.previousPage}
+        >
+          {#if prev}
+            {@render prev()}
+          {:else if previousLabel}
+            {previousLabel}
+          {:else}
+            <span aria-hidden="true"><ChevronLeftOutline class="h-4 w-4 rtl:rotate-180" /></span>
+          {/if}
+        </button>
+      {/if}
+
+      {#if showStartEllipsis}
+        <button
+          type="button"
+          class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-s-lg' : ''}"
+          onclick={() => goToPage(1)}
+        >
+          1
+        </button>
+        <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+      {/if}
+
+      {#each visiblePages as page, index}
+        <button
+          type="button"
+          class="{page === currentPage ? activeClasses : baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext && !showStartEllipsis && index === 0 ? 'rounded-s-lg' : ''} {!effectiveShowPrevNext && !showEndEllipsis && index === visiblePages.length - 1 ? 'rounded-e-lg' : ''}"
+          onclick={() => goToPage(page)}
+          aria-current={page === currentPage ? "page" : undefined}
+        >
+          {page}
+        </button>
+      {/each}
+
+      {#if showEndEllipsis}
+        <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+        <button
+          type="button"
+          class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-e-lg' : ''}"
+          onclick={() => goToPage(totalPages)}
+        >
+          {totalPages}
+        </button>
+      {/if}
+
+      {#if effectiveShowPrevNext}
+        <button
+          type="button"
+          class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
+          disabled={currentPage === totalPages}
+          onclick={nextPage}
+          aria-label={labels.nextPage}
+        >
+          {#if next}
+            {@render next()}
+          {:else if nextLabel}
+            {nextLabel}
+          {:else}
+            <span aria-hidden="true"><ChevronRightOutline class="h-4 w-4 rtl:rotate-180" /></span>
+          {/if}
+        </button>
+      {/if}
+    </nav>
+  </div>
+{:else}
+  <nav class="inline-flex -space-x-px rtl:space-x-reverse text-sm {className}" aria-label={labels.pagination} {...restProps}>
+    {#if effectiveShowPrevNext}
+      <button
+        type="button"
+        class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
+        disabled={currentPage === 1}
+        onclick={previous}
+        aria-label={labels.previousPage}
+      >
+        {#if prev}
+          {@render prev()}
+        {:else if previousLabel}
+          {previousLabel}
+        {:else}
+          <span aria-hidden="true"><ChevronLeftOutline class="h-4 w-4 rtl:rotate-180" /></span>
+        {/if}
+      </button>
+    {/if}
+
+    {#if showStartEllipsis}
+      <button
+        type="button"
+        class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-s-lg' : ''}"
+        onclick={() => goToPage(1)}
+      >
+        1
+      </button>
+      <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+    {/if}
+
+    {#each visiblePages as page, index}
+      <button
+        type="button"
+        class="{page === currentPage ? activeClasses : baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext && !showStartEllipsis && index === 0 ? 'rounded-s-lg' : ''} {!effectiveShowPrevNext && !showEndEllipsis && index === visiblePages.length - 1 ? 'rounded-e-lg' : ''}"
+        onclick={() => goToPage(page)}
+        aria-current={page === currentPage ? "page" : undefined}
+      >
+        {page}
+      </button>
+    {/each}
+
+    {#if showEndEllipsis}
+      <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+      <button
+        type="button"
+        class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-e-lg' : ''}"
+        onclick={() => goToPage(totalPages)}
+      >
+        {totalPages}
+      </button>
+    {/if}
+
+    {#if effectiveShowPrevNext}
+      <button
+        type="button"
+        class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
+        disabled={currentPage === totalPages}
+        onclick={nextPage}
+        aria-label={labels.nextPage}
+      >
+        {#if next}
+          {@render next()}
+        {:else if nextLabel}
+          {nextLabel}
+        {:else}
+          <span aria-hidden="true"><ChevronRightOutline class="h-4 w-4 rtl:rotate-180" /></span>
+        {/if}
+      </button>
+    {/if}
+  </nav>
+{/if}

package/dist/primitives/Radio/Radio.spec.js

@@ -68,37 +68,37 @@ describe('Radio Colors', () => {
   test('default color is blue', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-blue-600');
+    expect(input).toHaveClass('text-brand-primary');
   });
 
-  test('red color applies text-red-600', () => {
+  test('red color applies text-accent-danger', () => {
     const { container } = render(Radio, { props: { color: 'red' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-red-600');
+    expect(input).toHaveClass('text-accent-danger');
   });
 
-  test('green color applies text-green-600', () => {
+  test('green color applies text-accent-success', () => {
     const { container } = render(Radio, { props: { color: 'green' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-green-600');
+    expect(input).toHaveClass('text-accent-success');
   });
 
-  test('purple color applies text-purple-600', () => {
+  test('purple color applies text-brand-primary', () => {
     const { container } = render(Radio, { props: { color: 'purple' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-purple-600');
+    expect(input).toHaveClass('text-brand-primary');
   });
 
-  test('orange color applies text-orange-500', () => {
+  test('orange color applies text-accent-warning', () => {
     const { container } = render(Radio, { props: { color: 'orange' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-orange-500');
+    expect(input).toHaveClass('text-accent-warning');
   });
 
-  test('yellow color applies text-yellow-400', () => {
+  test('yellow color applies text-accent-warning', () => {
     const { container } = render(Radio, { props: { color: 'yellow' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-yellow-400');
+    expect(input).toHaveClass('text-accent-warning');
   });
 });
 
@@ -110,28 +110,28 @@ describe('Radio Input Styling', () => {
     expect(input).toHaveClass('h-4');
   });
 
-  test('has bg-gray-100 background', () => {
+  test('has bg-muted background', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('bg-gray-100');
+    expect(input).toHaveClass('bg-muted');
   });
 
-  test('has border-gray-300 border', () => {
+  test('has border-stroke-primary border', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('border-gray-300');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
-  test('has dark mode background', () => {
+  test('has token-based background', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('dark:bg-gray-700');
+    expect(input).toHaveClass('bg-muted');
   });
 
-  test('has dark mode border', () => {
+  test('has token-based border', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('dark:border-gray-600');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
   test('has focus:outline-hidden', () => {