@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/primitives/Dropdown/DropdownDivider.spec.js

@@ -1,30 +1,30 @@
-import { render } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import DropdownDivider from './DropdownDivider.svelte';
-
-describe('DropdownDivider', () => {
-  test('renders a list item', () => {
-    const { container } = render(DropdownDivider);
-    expect(container.querySelector('li')).toBeInTheDocument();
-  });
-
-  test('has role="separator"', () => {
-    const { container } = render(DropdownDivider);
-    expect(container.querySelector('[role="separator"]')).toBeInTheDocument();
-  });
-
-  test('has aria-hidden="true"', () => {
-    const { container } = render(DropdownDivider);
-    expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
-  });
-
-  test('has border styling', () => {
-    const { container } = render(DropdownDivider);
-    expect(container.querySelector('[class*="border"]')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(DropdownDivider, { props: { class: 'my-divider' } });
-    expect(container.querySelector('.my-divider')).toBeInTheDocument();
-  });
-});
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import DropdownDivider from './DropdownDivider.svelte';
+
+describe('DropdownDivider', () => {
+  test('renders a list item', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('li')).toBeInTheDocument();
+  });
+
+  test('has role="separator"', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[role="separator"]')).toBeInTheDocument();
+  });
+
+  test('has aria-hidden="true"', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
+  });
+
+  test('has border styling', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[class*="border"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DropdownDivider, { props: { class: 'my-divider' } });
+    expect(container.querySelector('.my-divider')).toBeInTheDocument();
+  });
+});

package/dist/primitives/Dropdown/DropdownDivider.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-  }
-
-  let { class: className = '' }: Props = $props();
-</script>
-
-<li class="my-1 border-t border-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>
+<script lang="ts">
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+</script>
+
+<li class="my-1 border-t border-border {className}" role="separator" aria-hidden="true"></li>

package/dist/primitives/Dropdown/DropdownItem.spec.js

@@ -131,26 +131,19 @@ describe('DropdownItem Styling', () => {
   test('has hover styles', () => {
     const { container } = render(DropdownItem);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('hover:bg-gray-100');
+    expect(button).toHaveClass('hover:bg-muted');
   });
 
-  test('has dark mode hover styles', () => {
+  test('has hover styles', () => {
     const { container } = render(DropdownItem);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:hover:bg-gray-600');
-    expect(button).toHaveClass('dark:hover:text-white');
+    expect(button).toHaveClass('hover:bg-muted');
   });
 
   test('has default text color', () => {
     const { container } = render(DropdownItem);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('text-gray-700');
-  });
-
-  test('has dark mode text color', () => {
-    const { container } = render(DropdownItem);
-    const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:text-gray-200');
+    expect(button).toHaveClass('text-text-secondary');
   });
 });
 
@@ -315,8 +308,8 @@ describe('DropdownItem Active URL Styling', () => {
     });
 
     const anchor = container.querySelector('a');
-    expect(anchor).toHaveClass('bg-blue-50');
-    expect(anchor).toHaveClass('text-blue-700');
+    expect(anchor).toHaveClass('bg-status-info-bg');
+    expect(anchor).toHaveClass('text-brand-primary');
   });
 
   test('applies default classes when activeUrl does not match href', () => {
@@ -330,7 +323,7 @@ describe('DropdownItem Active URL Styling', () => {
     });
 
     const anchor = container.querySelector('a');
-    expect(anchor).toHaveClass('text-gray-700');
-    expect(anchor).not.toHaveClass('bg-blue-50');
+    expect(anchor).toHaveClass('text-text-secondary');
+    expect(anchor).not.toHaveClass('bg-status-info-bg');
   });
 });

package/dist/primitives/Dropdown/DropdownItem.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Optional href to make the item a link */
-    href?: string;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Additional CSS classes */
-    class?: string;
-    /** Click handler callback (replaces dispatch('click')) */
-    onclick?: (event: MouseEvent | KeyboardEvent) => void;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    href = undefined,
-    disabled = false,
-    class: className = '',
-    onclick,
-    children
-  }: Props = $props();
-
-  const context = getContext<{ activeUrl?: string; close?: () => void }>("dropdown");
-
-  let isActive = $derived(context?.activeUrl && href && context.activeUrl === href);
-
-  function handleClick(event: MouseEvent | KeyboardEvent) {
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    onclick?.(event);
-    if (!href && context?.close) {
-      context.close();
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === "Enter" || event.key === " ") {
-      handleClick(event);
-    }
-  }
-
-  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
-  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
-  const disabledClasses = "opacity-50 cursor-not-allowed";
-  const defaultClasses = "text-gray-700 dark:text-gray-200";
-</script>
-
-{#if href}
-  <li>
-    <a
-      {href}
-      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
-      role="menuitem"
-      tabindex={disabled ? -1 : 0}
-      onclick={handleClick}
-      onkeydown={handleKeydown}
-    >
-      {@render children?.()}
-    </a>
-  </li>
-{:else}
-  <li>
-    <button
-      type="button"
-      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
-      role="menuitem"
-      tabindex={disabled ? -1 : 0}
-      {disabled}
-      onclick={handleClick}
-      onkeydown={handleKeydown}
-    >
-      {@render children?.()}
-    </button>
-  </li>
-{/if}
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Optional href to make the item a link */
+    href?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Click handler callback (replaces dispatch('click')) */
+    onclick?: (event: MouseEvent | KeyboardEvent) => void;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    href = undefined,
+    disabled = false,
+    class: className = '',
+    onclick,
+    children
+  }: Props = $props();
+
+  const context = getContext<{ activeUrl?: string; close?: () => void }>("dropdown");
+
+  let isActive = $derived(context?.activeUrl && href && context.activeUrl === href);
+
+  function handleClick(event: MouseEvent | KeyboardEvent) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onclick?.(event);
+    if (!href && context?.close) {
+      context.close();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      handleClick(event);
+    }
+  }
+
+  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-muted";
+  const activeClasses = "bg-status-info-bg text-brand-primary";
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+  const defaultClasses = "text-text-secondary";
+</script>
+
+{#if href}
+  <li>
+    <a
+      {href}
+      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      {@render children?.()}
+    </a>
+  </li>
+{:else}
+  <li>
+    <button
+      type="button"
+      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      {disabled}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      {@render children?.()}
+    </button>
+  </li>
+{/if}

package/dist/primitives/Dropdown/DropdownItemTestWrapper.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-  import { setContext } from "svelte";
-  import DropdownItem from "./DropdownItem.svelte";
-
-  interface Props {
-    href?: string;
-    disabled?: boolean;
-    class?: string;
-    onclick?: (event: MouseEvent | KeyboardEvent) => void;
-    /** Context values */
-    contextActiveUrl?: string;
-    contextClose?: (() => void) | undefined;
-    /** Whether to set dropdown context at all */
-    withContext?: boolean;
-    /** Label text for the item */
-    label?: string;
-  }
-
-  let {
-    href = undefined,
-    disabled = false,
-    class: className = '',
-    onclick,
-    contextActiveUrl = '',
-    contextClose = undefined,
-    withContext = false,
-    label = 'Item'
-  }: Props = $props();
-
-  // Context is set once at component init with initial prop values.
-  // The Svelte warning about capturing initial values is expected here
-  // since setContext must be called synchronously during component creation.
-  if (withContext) {
-    setContext("dropdown", {
-      get activeUrl() { return contextActiveUrl; },
-      close: contextClose
-    });
-  }
-</script>
-
-<DropdownItem {href} {disabled} class={className} {onclick}>
-  {label}
-</DropdownItem>
+<script lang="ts">
+  import { setContext } from "svelte";
+  import DropdownItem from "./DropdownItem.svelte";
+
+  interface Props {
+    href?: string;
+    disabled?: boolean;
+    class?: string;
+    onclick?: (event: MouseEvent | KeyboardEvent) => void;
+    /** Context values */
+    contextActiveUrl?: string;
+    contextClose?: (() => void) | undefined;
+    /** Whether to set dropdown context at all */
+    withContext?: boolean;
+    /** Label text for the item */
+    label?: string;
+  }
+
+  let {
+    href = undefined,
+    disabled = false,
+    class: className = '',
+    onclick,
+    contextActiveUrl = '',
+    contextClose = undefined,
+    withContext = false,
+    label = 'Item'
+  }: Props = $props();
+
+  // Context is set once at component init with initial prop values.
+  // The Svelte warning about capturing initial values is expected here
+  // since setContext must be called synchronously during component creation.
+  if (withContext) {
+    setContext("dropdown", {
+      get activeUrl() { return contextActiveUrl; },
+      close: contextClose
+    });
+  }
+</script>
+
+<DropdownItem {href} {disabled} class={className} {onclick}>
+  {label}
+</DropdownItem>

package/dist/primitives/Helper/Helper.spec.js

@@ -1,57 +1,57 @@
-import { render } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { expect, describe, test } from 'vitest';
-import Helper from './Helper.svelte';
-
-function textSnippet(text) {
-  return createRawSnippet(() => ({
-    render: () => `<span>${text}</span>`
-  }));
-}
-
-describe('Helper', () => {
-  test('renders a paragraph element', () => {
-    const { container } = render(Helper);
-    expect(container.querySelector('p')).toBeInTheDocument();
-  });
-
-  test('default color has gray text', () => {
-    const { container } = render(Helper);
-    expect(container.querySelector('[class*="gray"]')).toBeInTheDocument();
-  });
-
-  test('red color has red text', () => {
-    const { container } = render(Helper, { props: { color: 'red' } });
-    expect(container.querySelector('[class*="red"]')).toBeInTheDocument();
-  });
-
-  test('green color has green text', () => {
-    const { container } = render(Helper, { props: { color: 'green' } });
-    expect(container.querySelector('[class*="green"]')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(Helper, { props: { class: 'my-helper' } });
-    expect(container.querySelector('.my-helper')).toBeInTheDocument();
-  });
-
-  test('renders children content when provided', () => {
-    const { container } = render(Helper, {
-      props: { children: textSnippet('Helper text content') }
-    });
-    expect(container.querySelector('p').textContent).toBe('Helper text content');
-  });
-
-  test('renders empty paragraph when no children provided', () => {
-    const { container } = render(Helper);
-    expect(container.querySelector('p').textContent).toBe('');
-  });
-
-  test('handles unknown color gracefully', () => {
-    const { container } = render(Helper, { props: { color: 'unknown' } });
-    const p = container.querySelector('p');
-    expect(p).toBeInTheDocument();
-    // Unknown color falls back to empty string via null-coalescing
-    expect(p.className).toContain('mt-1');
-  });
-});
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Helper from './Helper.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Helper', () => {
+  test('renders a paragraph element', () => {
+    const { container } = render(Helper);
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  test('default color has muted-foreground text', () => {
+    const { container } = render(Helper);
+    expect(container.querySelector('[class*="text-muted-foreground"]')).toBeInTheDocument();
+  });
+
+  test('red color has accent-danger text', () => {
+    const { container } = render(Helper, { props: { color: 'red' } });
+    expect(container.querySelector('[class*="text-accent-danger"]')).toBeInTheDocument();
+  });
+
+  test('green color has accent-success text', () => {
+    const { container } = render(Helper, { props: { color: 'green' } });
+    expect(container.querySelector('[class*="text-accent-success"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Helper, { props: { class: 'my-helper' } });
+    expect(container.querySelector('.my-helper')).toBeInTheDocument();
+  });
+
+  test('renders children content when provided', () => {
+    const { container } = render(Helper, {
+      props: { children: textSnippet('Helper text content') }
+    });
+    expect(container.querySelector('p').textContent).toBe('Helper text content');
+  });
+
+  test('renders empty paragraph when no children provided', () => {
+    const { container } = render(Helper);
+    expect(container.querySelector('p').textContent).toBe('');
+  });
+
+  test('handles unknown color gracefully', () => {
+    const { container } = render(Helper, { props: { color: 'unknown' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    // Unknown color falls back to empty string via null-coalescing
+    expect(p.className).toContain('mt-1');
+  });
+});

package/dist/primitives/Helper/Helper.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-  /**
-   * Helper Component - Form helper/hint text
-   *
-   * Displays helper text below form inputs with color variants
-   */
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Color variant */
-    color?: 'default' | 'red' | 'green';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    color = 'default',
-    class: className = '',
-    children
-  }: Props = $props();
-
-  const colorClasses: Record<string, string> = {
-    default: 'text-gray-500 dark:text-gray-400',
-    red: 'text-red-600 dark:text-red-500',
-    green: 'text-green-600 dark:text-green-500'
-  };
-</script>
-
-<p class="mt-1 text-sm {colorClasses[color]} {className}">
-  {#if children}{@render children()}{/if}
-</p>
+<script lang="ts">
+  /**
+   * Helper Component - Form helper/hint text
+   *
+   * Displays helper text below form inputs with color variants
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Color variant */
+    color?: 'default' | 'red' | 'green';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    color = 'default',
+    class: className = '',
+    children
+  }: Props = $props();
+
+  const colorClasses: Record<string, string> = {
+    default: 'text-muted-foreground',
+    red: 'text-accent-danger',
+    green: 'text-accent-success'
+  };
+</script>
+
+<p class="mt-1 text-sm {colorClasses[color]} {className}">
+  {#if children}{@render children()}{/if}
+</p>

package/dist/primitives/Icons/ArrowLeft.svelte

@@ -1,21 +1,21 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 17 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
-    stroke={color}
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 17 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
+    stroke={color}
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ArrowRight.svelte

@@ -1,21 +1,21 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M9 18L15 12L9 6"
-    stroke={color}
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9 18L15 12L9 6"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>