@getmicdrop/svelte-components 5.19.0 → 5.20.0

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-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>

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-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}

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 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');
+  });
+});

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-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>

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>

package/dist/primitives/Icons/Availability.svelte

@@ -1,28 +1,28 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 20 21"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-    <path
-        d="M10.0003 18.8327C14.6027 18.8327 18.3337 15.1017 18.3337 10.4993C18.3337 5.89698 14.6027 2.16602 10.0003 2.16602C5.39795 2.16602 1.66699 5.89698 1.66699 10.4993C1.66699 15.1017 5.39795 18.8327 10.0003 18.8327Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M10 5.5V10.5L13.3333 12.1667"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 20 21"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        d="M10.0003 18.8327C14.6027 18.8327 18.3337 15.1017 18.3337 10.4993C18.3337 5.89698 14.6027 2.16602 10.0003 2.16602C5.39795 2.16602 1.66699 5.89698 1.66699 10.4993C1.66699 15.1017 5.39795 18.8327 10.0003 18.8327Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M10 5.5V10.5L13.3333 12.1667"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>