@getmicdrop/svelte-components 5.4.0 → 5.4.2

package/dist/patterns/forms/FormValidationSummary.spec.js

@@ -1,203 +1,181 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/svelte';
 import FormValidationSummary from './FormValidationSummary.svelte';
-
 describe('FormValidationSummary Component', () => {
-  it('does not render when show is false', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: false,
-        errors: { firstName: 'Required' },
-      },
+    it('does not render when show is false', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: false,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeFalsy();
     });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when there are no errors', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {},
-      },
+    it('does not render when there are no errors', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: {},
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeFalsy();
     });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when errors have empty messages', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: '', lastName: '   ' },
-      },
+    it('does not render when errors have empty messages', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: '', lastName: '   ' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeFalsy();
     });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('renders when show is true and has errors', () => {
-    const { container, getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'First name is required' },
-      },
+    it('renders when show is true and has errors', () => {
+        const { container, getByText } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'First name is required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeTruthy();
+        expect(getByText('Please fix the following:')).toBeTruthy();
     });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-    expect(getByText('Please fix the following:')).toBeTruthy();
-  });
-
-  it('displays error field labels', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
-      },
+    it('displays error field labels', () => {
+        const { getByText } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required', email: 'Invalid' },
+                fieldLabels: { firstName: 'First Name', email: 'Email Address' },
+            },
+        });
+        expect(getByText('First Name')).toBeTruthy();
+        expect(getByText('Email Address')).toBeTruthy();
     });
-    expect(getByText('First Name')).toBeTruthy();
-    expect(getByText('Email Address')).toBeTruthy();
-  });
-
-  it('uses field key as label when no label provided', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: {},
-      },
+    it('uses field key as label when no label provided', () => {
+        const { getByText } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+                fieldLabels: {},
+            },
+        });
+        expect(getByText('firstName')).toBeTruthy();
     });
-    expect(getByText('firstName')).toBeTruthy();
-  });
-
-  it('renders multiple error fields', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {
-          firstName: 'Required',
-          lastName: 'Required',
-          email: 'Invalid format',
-        },
-        fieldLabels: {
-          firstName: 'First Name',
-          lastName: 'Last Name',
-          email: 'Email',
-        },
-      },
+    it('renders multiple error fields', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: {
+                    firstName: 'Required',
+                    lastName: 'Required',
+                    email: 'Invalid format',
+                },
+                fieldLabels: {
+                    firstName: 'First Name',
+                    lastName: 'Last Name',
+                    email: 'Email',
+                },
+            },
+        });
+        const listItems = container.querySelectorAll('li');
+        expect(listItems.length).toBe(3);
     });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(3);
-  });
-
-  it('has role="alert" and aria-live="polite"', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
+    it('has role="alert" and aria-live="polite"', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert.getAttribute('aria-live')).toBe('polite');
     });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('aria-live')).toBe('polite');
-  });
-
-  it('renders clickable buttons for each error', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email' },
-      },
+    it('renders clickable buttons for each error', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required', email: 'Invalid' },
+                fieldLabels: { firstName: 'First Name', email: 'Email' },
+            },
+        });
+        const buttons = container.querySelectorAll('button[type="button"]');
+        expect(buttons.length).toBe(2);
     });
-    const buttons = container.querySelectorAll('button[type="button"]');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('calls scrollIntoView on button click', async () => {
-    // Create a mock element
-    const mockElement = document.createElement('input');
-    mockElement.id = 'firstName';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-      },
+    it('calls scrollIntoView on button click', async () => {
+        // Create a mock element
+        const mockElement = document.createElement('input');
+        mockElement.id = 'firstName';
+        mockElement.scrollIntoView = vi.fn();
+        mockElement.focus = vi.fn();
+        document.body.appendChild(mockElement);
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+                fieldLabels: { firstName: 'First Name' },
+            },
+        });
+        const button = container.querySelector('button[type="button"]');
+        await fireEvent.click(button);
+        expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            block: 'center',
+        });
+        // Clean up
+        document.body.removeChild(mockElement);
     });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
-      behavior: 'smooth',
-      block: 'center',
+    it('uses custom fieldIds for scrolling', async () => {
+        const mockElement = document.createElement('input');
+        mockElement.id = 'custom-first-name-input';
+        mockElement.scrollIntoView = vi.fn();
+        mockElement.focus = vi.fn();
+        document.body.appendChild(mockElement);
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+                fieldLabels: { firstName: 'First Name' },
+                fieldIds: { firstName: 'custom-first-name-input' },
+            },
+        });
+        const button = container.querySelector('button[type="button"]');
+        await fireEvent.click(button);
+        expect(mockElement.scrollIntoView).toHaveBeenCalled();
+        document.body.removeChild(mockElement);
     });
-
-    // Clean up
-    document.body.removeChild(mockElement);
-  });
-
-  it('uses custom fieldIds for scrolling', async () => {
-    const mockElement = document.createElement('input');
-    mockElement.id = 'custom-first-name-input';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-        fieldIds: { firstName: 'custom-first-name-input' },
-      },
+    it('has red background styling', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert.classList.contains('bg-red-50')).toBe(true);
+        expect(alert.classList.contains('border-red-200')).toBe(true);
     });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalled();
-
-    document.body.removeChild(mockElement);
-  });
-
-  it('has red background styling', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
+    it('renders warning icon', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
     });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('bg-red-50')).toBe(true);
-    expect(alert.classList.contains('border-red-200')).toBe(true);
-  });
-
-  it('renders warning icon', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
+    it('filters out null and undefined error values', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required', lastName: null, email: undefined },
+                fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
+            },
+        });
+        const listItems = container.querySelectorAll('li');
+        expect(listItems.length).toBe(1);
     });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('filters out null and undefined error values', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', lastName: null, email: undefined },
-        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(1);
-  });
 });

package/dist/patterns/forms/FormValidationSummary.stories.svelte

@@ -72,16 +72,16 @@
 
     <div class="space-y-4 mt-4">
       <div>
-        <label id="firstName" class="block text-sm font-medium mb-1">First Name</label>
-        <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+        <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
+        <input id="firstName" type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
       </div>
       <div>
-        <label id="email" class="block text-sm font-medium mb-1">Email</label>
-        <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+        <label for="email" class="block text-sm font-medium mb-1">Email</label>
+        <input id="email" type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
       </div>
       <div>
-        <label id="phone" class="block text-sm font-medium mb-1">Phone</label>
-        <input type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
+        <label for="phone" class="block text-sm font-medium mb-1">Phone</label>
+        <input id="phone" type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
       </div>
     </div>
   </div>

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -1,15 +1,22 @@
-<script>
+<script lang="ts">
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
   import Button from "../../primitives/Button/Button.svelte";
 
+  interface Props {
+    errors?: Record<string, string | null | undefined>;
+    show?: boolean;
+    fieldLabels?: Record<string, string>;
+    fieldIds?: Record<string, string>;
+  }
+
   let {
     errors = {},
     show = false,
     fieldLabels = {},
     fieldIds = {},
-  } = $props();
+  }: Props = $props();
 
   // Get list of fields with errors
   let errorFields = $derived(Object.entries(errors)
@@ -23,7 +30,7 @@
 
   let hasErrors = $derived(errorFields.length > 0);
 
-  function scrollToField(elementId) {
+  function scrollToField(elementId: string) {
     const element = document.getElementById(elementId);
     if (element) {
       element.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -42,7 +49,7 @@
     aria-live="polite"
   >
     <div class="flex items-start gap-2">
-      <WarningIcon className="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
+      <WarningIcon class="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:

package/dist/patterns/forms/FormValidationSummary.svelte.d.ts

@@ -1,18 +1,10 @@
-export default FormValidationSummary;
-type FormValidationSummary = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const FormValidationSummary: import("svelte").Component<{
-    errors?: Record<string, any>;
-    show?: boolean;
-    fieldLabels?: Record<string, any>;
-    fieldIds?: Record<string, any>;
-}, {}, "">;
-type $$ComponentProps = {
-    errors?: Record<string, any>;
+interface Props {
+    errors?: Record<string, string | null | undefined>;
     show?: boolean;
-    fieldLabels?: Record<string, any>;
-    fieldIds?: Record<string, any>;
-};
+    fieldLabels?: Record<string, string>;
+    fieldIds?: Record<string, string>;
+}
+declare const FormValidationSummary: import("svelte").Component<Props, {}, "">;
+type FormValidationSummary = ReturnType<typeof FormValidationSummary>;
+export default FormValidationSummary;
 //# sourceMappingURL=FormValidationSummary.svelte.d.ts.map

package/dist/patterns/forms/FormValidationSummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.js"],"names":[],"mappings":";;;;;AAoEA;aAtD8B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAAS,OAAO;kBAAgB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAsDhE;wBAtDjD;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AA8DH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { default as FormActions } from "./FormActions.svelte";
+export { default as FormGrid } from "./FormGrid.svelte";
+export { default as FormSection } from "./FormSection.svelte";
+export { default as FormValidationSummary } from "./FormValidationSummary.svelte";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/patterns/forms/index.js

@@ -0,0 +1,5 @@
+// Form pattern components - layout and structure for forms
+export { default as FormActions } from './FormActions.svelte';
+export { default as FormGrid } from './FormGrid.svelte';
+export { default as FormSection } from './FormSection.svelte';
+export { default as FormValidationSummary } from './FormValidationSummary.svelte';

package/dist/patterns/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./forms/index.js";
+export * from "./navigation/index.js";
+export * from "./page/index.js";
+export * from "./data/index.js";
+export * from "./layout/index.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/patterns/index.js

@@ -0,0 +1,18 @@
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+
+// Forms - re-export from forms/index.js
+export * from './forms/index.js';
+
+// Navigation - re-export from navigation/index.js
+export * from './navigation/index.js';
+
+// Page - re-export from page/index.js
+export * from './page/index.js';
+
+// Data - re-export from data/index.js
+export * from './data/index.js';
+
+// Layout - re-export from layout/index.js
+export * from './layout/index.js';

package/dist/patterns/layout/Stack.svelte

@@ -1,4 +1,41 @@
-<script>
+<!--
+  @component 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"
+-->
+<script lang="ts">
+  import Stack from '../../components/Layout/Stack.svelte';
+  import type { Snippet } from 'svelte';
+
+  // Re-export all props with same interface for backwards compatibility
+  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?: Snippet;
+    [key: string]: unknown;
+  }
+
   let {
     gap = 'md',
     direction = 'vertical',
@@ -7,39 +44,18 @@
     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',
-  };
+    ...restProps
+  }: Props = $props();
 </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}"
+<Stack
+  {gap}
+  {direction}
+  {align}
+  {justify}
+  {wrap}
+  class={className}
+  {...restProps}
 >
-  {@render children?.()}
-</div>
+  {#if children}{@render children()}{/if}
+</Stack>