@getmicdrop/svelte-components 5.3.14 → 5.4.0

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -1,67 +1,67 @@
-<script>
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  let {
-    errors = {},
-    show = false,
-    fieldLabels = {},
-    fieldIds = {},
-  } = $props();
-
-  // Get list of fields with errors
-  let errorFields = $derived(Object.entries(errors)
-    .filter(([_, message]) => message && message.trim() !== "")
-    .map(([key, message]) => ({
-      key,
-      label: fieldLabels[key] || key,
-      message,
-      elementId: fieldIds[key] || key
-    })));
-
-  let hasErrors = $derived(errorFields.length > 0);
-
-  function scrollToField(elementId) {
-    const element = document.getElementById(elementId);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-      if (element.focus) {
-        setTimeout(() => element.focus(), 300);
-      }
-    }
-  }
-</script>
-
-{#if show && hasErrors}
-  <div
-    transition:slide={{ duration: 300, easing: cubicOut }}
-    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
-    role="alert"
-    aria-live="polite"
-  >
-    <div class="flex items-start gap-2">
-      <WarningIcon className="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
-      <div class="flex-1">
-        <p class="text-sm font-medium text-red-800 dark:text-red-400">
-          Please fix the following:
-        </p>
-        <ul class="mt-2 space-y-1">
-          {#each errorFields as field}
-            <li>
-              <Button
-                variant="link"
-                size="sm"
-                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
-                onclick={() => scrollToField(field.elementId)}
-              >
-                {field.label}
-              </Button>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    </div>
-  </div>
-{/if}
+<script>
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  let {
+    errors = {},
+    show = false,
+    fieldLabels = {},
+    fieldIds = {},
+  } = $props();
+
+  // Get list of fields with errors
+  let errorFields = $derived(Object.entries(errors)
+    .filter(([_, message]) => message && message.trim() !== "")
+    .map(([key, message]) => ({
+      key,
+      label: fieldLabels[key] || key,
+      message,
+      elementId: fieldIds[key] || key
+    })));
+
+  let hasErrors = $derived(errorFields.length > 0);
+
+  function scrollToField(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      if (element.focus) {
+        setTimeout(() => element.focus(), 300);
+      }
+    }
+  }
+</script>
+
+{#if show && hasErrors}
+  <div
+    transition:slide={{ duration: 300, easing: cubicOut }}
+    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
+    role="alert"
+    aria-live="polite"
+  >
+    <div class="flex items-start gap-2">
+      <WarningIcon className="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-red-800 dark:text-red-400">
+          Please fix the following:
+        </p>
+        <ul class="mt-2 space-y-1">
+          {#each errorFields as field}
+            <li>
+              <Button
+                variant="link"
+                size="sm"
+                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
+                onclick={() => scrollToField(field.elementId)}
+              >
+                {field.label}
+              </Button>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/patterns/layout/Grid.svelte

@@ -1,35 +1,35 @@
-<script>
-  let {
-    cols = '3',
-    gap = 'md',
-    class: className = '',
-    children,
-  } = $props();
-
-  const colClasses = {
-    '1': 'grid-cols-1',
-    '2': 'grid-cols-1 sm:grid-cols-2',
-    '3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
-    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
-    '12': 'grid-cols-12',
-  };
-
-  const gapClasses = {
-    none: 'gap-0',
-    xs: 'gap-1',
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6',
-    xl: 'gap-8',
-    section: 'gap-6',
-    layout: 'gap-8',
-    content: 'gap-4',
-    group: 'gap-3',
-  };
-</script>
-
-<div class="grid {colClasses[cols] || 'grid-cols-3'} {gapClasses[gap] || 'gap-4'} {className}">
-  {@render children?.()}
-</div>
+<script>
+  let {
+    cols = '3',
+    gap = 'md',
+    class: className = '',
+    children,
+  } = $props();
+
+  const colClasses = {
+    '1': 'grid-cols-1',
+    '2': 'grid-cols-1 sm:grid-cols-2',
+    '3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
+    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    '12': 'grid-cols-12',
+  };
+
+  const gapClasses = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    section: 'gap-6',
+    layout: 'gap-8',
+    content: 'gap-4',
+    group: 'gap-3',
+  };
+</script>
+
+<div class="grid {colClasses[cols] || 'grid-cols-3'} {gapClasses[gap] || 'gap-4'} {className}">
+  {@render children?.()}
+</div>

package/dist/patterns/layout/Sidebar.svelte

@@ -1,39 +1,39 @@
-<script>
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    class: className = '',
-    sidebar,
-    children,
-  } = $props();
-
-  const widthClasses = {
-    narrow: 'lg:w-72',
-    medium: 'lg:w-80',
-    wide: 'lg:w-96',
-  };
-
-  const mainWidthClasses = {
-    narrow: 'lg:w-[calc(100%-18rem)]',
-    medium: 'lg:w-[calc(100%-20rem)]',
-    wide: 'lg:w-[calc(100%-24rem)]',
-  };
-</script>
-
-<div class="flex flex-col lg:flex-row gap-6 {className}">
-  {#if sidebarPosition === 'left'}
-    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
-      {@render sidebar?.()}
-    </aside>
-    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
-      {@render children?.()}
-    </main>
-  {:else}
-    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
-      {@render children?.()}
-    </main>
-    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
-      {@render sidebar?.()}
-    </aside>
-  {/if}
-</div>
+<script>
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    sidebar,
+    children,
+  } = $props();
+
+  const widthClasses = {
+    narrow: 'lg:w-72',
+    medium: 'lg:w-80',
+    wide: 'lg:w-96',
+  };
+
+  const mainWidthClasses = {
+    narrow: 'lg:w-[calc(100%-18rem)]',
+    medium: 'lg:w-[calc(100%-20rem)]',
+    wide: 'lg:w-[calc(100%-24rem)]',
+  };
+</script>
+
+<div class="flex flex-col lg:flex-row gap-6 {className}">
+  {#if sidebarPosition === 'left'}
+    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
+      {@render sidebar?.()}
+    </aside>
+    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
+      {@render children?.()}
+    </main>
+  {:else}
+    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
+      {@render children?.()}
+    </main>
+    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
+      {@render sidebar?.()}
+    </aside>
+  {/if}
+</div>

package/dist/patterns/layout/Stack.svelte

@@ -1,45 +1,45 @@
-<script>
-  let {
-    gap = 'md',
-    direction = 'vertical',
-    align = 'stretch',
-    justify = 'start',
-    wrap = false,
-    class: className = '',
-    children,
-  } = $props();
-
-  const gapClasses = {
-    none: 'gap-0',
-    xs: 'gap-1',
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6',
-    xl: 'gap-8',
-    section: 'gap-6',
-    layout: 'gap-8',
-    content: 'gap-4',
-    group: 'gap-3',
-  };
-
-  const alignClasses = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-    stretch: 'items-stretch',
-  };
-
-  const justifyClasses = {
-    start: 'justify-start',
-    center: 'justify-center',
-    end: 'justify-end',
-    between: 'justify-between',
-    around: 'justify-around',
-  };
-</script>
-
-<div
-  class="flex {direction === 'horizontal' ? 'flex-row' : 'flex-col'} {gapClasses[gap] || 'gap-4'} {alignClasses[align] || 'items-stretch'} {justifyClasses[justify] || 'justify-start'} {wrap ? 'flex-wrap' : ''} {className}"
->
-  {@render children?.()}
-</div>
+<script>
+  let {
+    gap = 'md',
+    direction = 'vertical',
+    align = 'stretch',
+    justify = 'start',
+    wrap = false,
+    class: className = '',
+    children,
+  } = $props();
+
+  const gapClasses = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    section: 'gap-6',
+    layout: 'gap-8',
+    content: 'gap-4',
+    group: 'gap-3',
+  };
+
+  const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+  };
+
+  const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+  };
+</script>
+
+<div
+  class="flex {direction === 'horizontal' ? 'flex-row' : 'flex-col'} {gapClasses[gap] || 'gap-4'} {alignClasses[align] || 'items-stretch'} {justifyClasses[justify] || 'justify-start'} {wrap ? 'flex-wrap' : ''} {className}"
+>
+  {@render children?.()}
+</div>

package/dist/patterns/navigation/BottomNav.spec.js

@@ -1,130 +1,130 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import BottomNav from './BottomNav.svelte';
-
-// Mock fetch for API calls
-global.fetch = vi.fn(() =>
-  Promise.resolve({
-    ok: true,
-    json: () => Promise.resolve([]),
-  })
-);
-
-// Mock SvelteKit modules
-vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: (fn) => {
-      fn({ url: { pathname: '/shows' } });
-      return () => {};
-    }
-  }
-}));
-
-vi.mock('$app/paths', () => ({
-  base: '/performers'
-}));
-
-describe('BottomNav', () => {
-  const defaultLinks = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Shows', href: '/shows', icon: 'shows' },
-    { label: 'Availability', href: '/availability', icon: 'availability' },
-    { label: 'Profile', href: '/profile', icon: 'profile' }
-  ];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    global.fetch.mockImplementation(() =>
-      Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve([]),
-      })
-    );
-  });
-
-  describe('basic rendering', () => {
-    it('renders all navigation links', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(4);
-    });
-
-    it('renders link labels as aria-label', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const homeLink = container.querySelector('[aria-label="Home"]');
-      expect(homeLink).toBeTruthy();
-    });
-
-    it('renders icons for each link', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const icons = container.querySelectorAll('.bottom-nav-icon');
-      expect(icons.length).toBe(4);
-    });
-  });
-
-  describe('active state', () => {
-    it('marks current path as active', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const showsLink = container.querySelector('a[href="/shows"]');
-      expect(showsLink.classList.contains('active')).toBe(true);
-    });
-
-    it('non-current paths are not active', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const homeLink = container.querySelector('a[href="/"]');
-      expect(homeLink.classList.contains('active')).toBe(false);
-    });
-  });
-
-  describe('notification dot', () => {
-    it('shows notification dot when there are invitations', async () => {
-      global.fetch.mockImplementationOnce(() =>
-        Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve([{ acceptedState: 0 }]),
-        })
-      );
-
-      const { container } = render(BottomNav, { links: defaultLinks });
-
-      // Wait for the fetch to complete
-      await vi.waitFor(() => {
-        const dot = container.querySelector('.notification-dot');
-        return dot !== null;
-      }, { timeout: 1000 }).catch(() => null);
-    });
-
-    it('does not show notification dot when no invitations', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const dot = container.querySelector('.notification-dot');
-      expect(dot).toBeFalsy();
-    });
-  });
-
-  describe('empty links', () => {
-    it('renders nothing when links array is empty', () => {
-      const { container } = render(BottomNav, { links: [] });
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(0);
-    });
-  });
-
-  describe('API error handling', () => {
-    it('handles fetch error gracefully', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      global.fetch.mockImplementationOnce(() =>
-        Promise.resolve({
-          ok: false,
-        })
-      );
-
-      const { container } = render(BottomNav, { links: defaultLinks });
-
-      // Component should still render despite fetch error
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(4);
-
-      consoleSpy.mockRestore();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import BottomNav from './BottomNav.svelte';
+
+// Mock fetch for API calls
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve([]),
+  })
+);
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/shows' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: '/performers'
+}));
+
+describe('BottomNav', () => {
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Shows', href: '/shows', icon: 'shows' },
+    { label: 'Availability', href: '/availability', icon: 'availability' },
+    { label: 'Profile', href: '/profile', icon: 'profile' }
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch.mockImplementation(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve([]),
+      })
+    );
+  });
+
+  describe('basic rendering', () => {
+    it('renders all navigation links', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+    });
+
+    it('renders link labels as aria-label', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('[aria-label="Home"]');
+      expect(homeLink).toBeTruthy();
+    });
+
+    it('renders icons for each link', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const icons = container.querySelectorAll('.bottom-nav-icon');
+      expect(icons.length).toBe(4);
+    });
+  });
+
+  describe('active state', () => {
+    it('marks current path as active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const showsLink = container.querySelector('a[href="/shows"]');
+      expect(showsLink.classList.contains('active')).toBe(true);
+    });
+
+    it('non-current paths are not active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('a[href="/"]');
+      expect(homeLink.classList.contains('active')).toBe(false);
+    });
+  });
+
+  describe('notification dot', () => {
+    it('shows notification dot when there are invitations', async () => {
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([{ acceptedState: 0 }]),
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Wait for the fetch to complete
+      await vi.waitFor(() => {
+        const dot = container.querySelector('.notification-dot');
+        return dot !== null;
+      }, { timeout: 1000 }).catch(() => null);
+    });
+
+    it('does not show notification dot when no invitations', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const dot = container.querySelector('.notification-dot');
+      expect(dot).toBeFalsy();
+    });
+  });
+
+  describe('empty links', () => {
+    it('renders nothing when links array is empty', () => {
+      const { container } = render(BottomNav, { links: [] });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(0);
+    });
+  });
+
+  describe('API error handling', () => {
+    it('handles fetch error gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Component should still render despite fetch error
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+
+      consoleSpy.mockRestore();
+    });
+  });
+});