@getmicdrop/svelte-components 5.4.0 → 5.4.2

package/dist/patterns/layout/Stack.svelte.d.ts

@@ -1,24 +1,38 @@
-export default Stack;
-type Stack = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const Stack: import("svelte").Component<{
-    gap?: string;
-    direction?: string;
-    align?: string;
-    justify?: string;
-    wrap?: boolean;
-    class?: string;
-    children: any;
-}, {}, "">;
-type $$ComponentProps = {
-    gap?: string;
-    direction?: string;
-    align?: string;
-    justify?: string;
+import Stack from '../../components/Layout/Stack.svelte';
+import type { Snippet } from 'svelte';
+interface Props {
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'section' | 'layout' | 'content' | 'group';
+    direction?: 'vertical' | 'horizontal';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
     wrap?: boolean;
     class?: string;
-    children: any;
-};
+    children?: Snippet;
+    [key: string]: unknown;
+}
+/**
+ * Stack (Deprecated)
+ *
+ * @deprecated Use `import { Stack } from '@getmicdrop/svelte-components'` instead.
+ * This file is kept for backwards compatibility with direct imports from
+ * `@getmicdrop/svelte-components/patterns/layout/Stack.svelte`.
+ *
+ * The canonical version is now at `components/Layout/Stack.svelte` which includes:
+ * - TypeScript support
+ * - More gap options (semantic: tight, compact, item, group, content, section, layout, page)
+ * - `as` prop for semantic HTML elements
+ * - `baseline` alignment
+ * - `evenly` justify option
+ *
+ * Migration:
+ * - gap="none" → gap="0"
+ * - gap="xs" → gap="tight"
+ * - gap="sm" → gap="item"
+ * - gap="md" → gap="content" (or just use default)
+ * - gap="lg" → gap="section"
+ * - gap="xl" → gap="layout"
+ */
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;
 //# sourceMappingURL=Stack.svelte.d.ts.map

package/dist/patterns/layout/Stack.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/Stack.svelte.js"],"names":[],"mappings":";;;;;AAiDA;UA7C2B,MAAM;gBAAc,MAAM;YAAU,MAAM;cAAY,MAAM;WAAS,OAAO;YAAU,MAAM;cAAY,GAAG;WA6ClF;wBA7CjC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/layout/Stack.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,sCAAsC,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7F,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAyBH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/patterns/layout/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Grid } from "../../components/Layout/Grid.svelte";
+export { default as Section } from "../../components/Layout/Section.svelte";
+export { default as Sidebar } from "../../components/Layout/Sidebar.svelte";
+export { default as Stack } from "../../components/Layout/Stack.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/layout/index.d.ts.map

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

package/dist/patterns/layout/index.js

@@ -0,0 +1,6 @@
+// Layout pattern components
+// Note: These are canonical exports from components/Layout/
+export { default as Grid } from '../../components/Layout/Grid.svelte';
+export { default as Section } from '../../components/Layout/Section.svelte';
+export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
+export { default as Stack } from '../../components/Layout/Stack.svelte';

package/dist/patterns/navigation/BottomNav.spec.d.ts.map

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

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

@@ -1,130 +1,104 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render } from '@testing-library/svelte';
 import BottomNav from './BottomNav.svelte';
-
 // Mock fetch for API calls
-global.fetch = vi.fn(() =>
-  Promise.resolve({
+const mockFetch = vi.fn(() => Promise.resolve({
     ok: true,
     json: () => Promise.resolve([]),
-  })
-);
-
+}));
+global.fetch = mockFetch;
 // Mock SvelteKit modules
 vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: (fn) => {
-      fn({ url: { pathname: '/shows' } });
-      return () => {};
+    page: {
+        subscribe: (fn) => {
+            fn({ url: { pathname: '/shows' } });
+            return () => { };
+        }
     }
-  }
 }));
-
 vi.mock('$app/paths', () => ({
-  base: '/performers'
+    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);
+    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();
+        mockFetch.mockImplementation(() => Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+        }));
     });
-
-    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('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('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);
+    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);
+        });
     });
-
-    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('notification dot', () => {
+        it('shows notification dot when there are invitations', async () => {
+            mockFetch.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('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();
+    describe('API error handling', () => {
+        it('handles fetch error gracefully', async () => {
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            mockFetch.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();
+        });
     });
-  });
 });

package/dist/patterns/navigation/BottomNav.svelte

@@ -1,18 +1,28 @@
-<script>
+<script lang="ts">
   import { page } from '../../__LIB_STORES__.js';
   import { base } from '../../__LIB_PATHS__.js';
   import Icon from "../../primitives/Icons/Icon.svelte";
   import { typography } from '../../tokens/typography';
 
+  interface NavLink {
+    label: string;
+    href: string;
+    icon: string;
+  }
+
+  interface Props {
+    links?: NavLink[];
+  }
+
   let {
     links = [],
-  } = $props();
+  }: Props = $props();
 
-  let shows = $state({ invitation: [] });
+  let shows = $state({ invitation: [] as Array<{ acceptedState: number }> });
 
   let currentPath = $derived($page.url.pathname);
 
-  function isActive(href, path) {
+  function isActive(href: string, path: string): boolean {
     if (href === `${base}/` || href === '/') {
       return path === href || path === `${base}/`;
     }
@@ -25,7 +35,7 @@
         const res = await fetch(`/api/getEventsForVenue`);
         if (!res.ok) throw new Error("Failed to fetch shows.");
         const events = await res.json();
-        shows.invitation = events.filter((event) => event.acceptedState === 0);
+        shows.invitation = events.filter((event: { acceptedState: number }) => event.acceptedState === 0);
       } catch (err) {
         console.error("Failed to fetch shows:", err);
       }

package/dist/patterns/navigation/BottomNav.svelte.d.ts

@@ -1,12 +1,12 @@
+interface NavLink {
+    label: string;
+    href: string;
+    icon: string;
+}
+interface Props {
+    links?: NavLink[];
+}
+declare const BottomNav: import("svelte").Component<Props, {}, "">;
+type BottomNav = ReturnType<typeof BottomNav>;
 export default BottomNav;
-type BottomNav = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const BottomNav: import("svelte").Component<{
-    links?: any[];
-}, {}, "">;
-type $$ComponentProps = {
-    links?: any[];
-};
 //# sourceMappingURL=BottomNav.svelte.d.ts.map

package/dist/patterns/navigation/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.js"],"names":[],"mappings":";;;;;AA4DA;YA9C6B,GAAG,EAAE;WA8CsB;wBA9CrC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.svelte.ts"],"names":[],"mappings":"AASE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAuDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/patterns/navigation/Header.spec.d.ts.map

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