@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
-  import { fade, slide } from "svelte/transition";
+  import { fade } from "svelte/transition";
+  import { safeSlide } from "../../utils/transitions.js";
   import { cubicOut } from "svelte/easing";
   import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
   import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
@@ -676,7 +677,7 @@
                 <div class="error-slot">
                   {#if errors.email && showErrors}
                     <div
-                      transition:slide={{ duration: 300, easing: cubicOut }}
+                      transition:safeSlide={{ duration: 300, easing: cubicOut }}
                       class="flex items-center gap-1.5 text-red-500"
                       role="alert"
                     >
@@ -717,7 +718,7 @@
                 <div class="error-slot">
                   {#if errors.password && showErrors}
                     <div
-                      transition:slide={{ duration: 300, easing: cubicOut }}
+                      transition:safeSlide={{ duration: 300, easing: cubicOut }}
                       class="flex items-center gap-1.5 text-red-500"
                       role="alert"
                     >
@@ -895,7 +896,7 @@
                     >
                       {#if errors.password && showErrors}
                         <div
-                          transition:slide={{ duration: 600, easing: cubicOut }}
+                          transition:safeSlide={{ duration: 600, easing: cubicOut }}
                           class="flex items-start gap-1.5 text-red-500"
                           role="alert"
                         >
@@ -966,7 +967,7 @@
                   <div class="error-slot">
                     {#if errors.email && showErrors}
                       <div
-                        transition:slide={{ duration: 300, easing: cubicOut }}
+                        transition:safeSlide={{ duration: 300, easing: cubicOut }}
                         class="flex items-center gap-1.5 text-red-500"
                         role="alert"
                       >
@@ -1031,7 +1032,7 @@
                   <div class="error-slot">
                     {#if errors.email && showErrors}
                       <div
-                        transition:slide={{ duration: 300, easing: cubicOut }}
+                        transition:safeSlide={{ duration: 300, easing: cubicOut }}
                         class="flex items-center gap-1.5 text-red-500"
                         role="alert"
                       >

package/dist/recipes/SuperLogin/SuperLogin.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AA+9BA;iBAj7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WAi7B1W;wBAj7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAi+BA;iBAj7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WAi7B1W;wBAj7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/recipes/Toaster/Toaster.stories.svelte

@@ -1,62 +1,62 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import { Toaster } from "svelte-sonner";
-  import { showToast } from "../../stores/toaster";
-
-  const { Story } = defineMeta({
-    title: "Components/Toaster",
-  });
-
-  function showSuccessToast() {
-    showToast("Action completed successfully!", "success");
-  }
-
-  function showErrorToast() {
-    showToast("An error occurred. Please try again.", "error");
-  }
-</script>
-
-<Story name="Trigger Success Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showSuccessToast}
-      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
-    >
-      Show Success Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
-  </div>
-</Story>
-
-<Story name="Trigger Error Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showErrorToast}
-      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
-    >
-      Show Error Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import { Toaster } from "svelte-sonner";
+  import { showToast } from "../../stores/toaster";
+
+  const { Story } = defineMeta({
+    title: "Components/Toaster",
+  });
+
+  function showSuccessToast() {
+    showToast("Action completed successfully!", "success");
+  }
+
+  function showErrorToast() {
+    showToast("An error occurred. Please try again.", "error");
+  }
+</script>
+
+<Story name="Trigger Success Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showSuccessToast}
+      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+    >
+      Show Success Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
+  </div>
+</Story>
+
+<Story name="Trigger Error Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showErrorToast}
+      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    >
+      Show Error Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
+  </div>
+</Story>

package/dist/recipes/feedback/EmptyState/EmptyState.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EmptyState.spec.d.ts.map

package/dist/recipes/feedback/EmptyState/EmptyState.spec.d.ts.map

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

package/dist/recipes/feedback/EmptyState/EmptyState.spec.js

@@ -0,0 +1,202 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import EmptyState from './EmptyState.svelte';
+
+describe('EmptyState Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has flex centering classes', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('flex-col');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('justify-center');
+  });
+
+  test('has text-center class', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('text-center');
+  });
+
+  test('has padding classes', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('px-6');
+    expect(wrapper).toHaveClass('py-10');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(EmptyState, { props: { class: 'custom-empty' } });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('custom-empty');
+  });
+});
+
+describe('EmptyState Title/Message', () => {
+  test('shows default "No results found" when no title', () => {
+    render(EmptyState);
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+  });
+
+  test('title prop displays custom title', () => {
+    render(EmptyState, { props: { title: 'No items' } });
+    expect(screen.getByText('No items')).toBeInTheDocument();
+  });
+
+  test('message prop displays custom message', () => {
+    render(EmptyState, { props: { message: 'Nothing here' } });
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  test('title takes precedence over message', () => {
+    render(EmptyState, { props: { title: 'Title', message: 'Message' } });
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.queryByText('Message')).not.toBeInTheDocument();
+  });
+
+  test('title is in h3 element', () => {
+    const { container } = render(EmptyState, { props: { title: 'Test Title' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toBeInTheDocument();
+    expect(h3).toHaveTextContent('Test Title');
+  });
+});
+
+describe('EmptyState Description/Subtext', () => {
+  test('no subtext by default', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description prop displays text', () => {
+    render(EmptyState, { props: { description: 'Try different filters' } });
+    expect(screen.getByText('Try different filters')).toBeInTheDocument();
+  });
+
+  test('subtext prop displays text', () => {
+    render(EmptyState, { props: { subtext: 'Check back later' } });
+    expect(screen.getByText('Check back later')).toBeInTheDocument();
+  });
+
+  test('description takes precedence over subtext', () => {
+    render(EmptyState, { props: { description: 'Description', subtext: 'Subtext' } });
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.queryByText('Subtext')).not.toBeInTheDocument();
+  });
+
+  test('subtext is in p element', () => {
+    const { container } = render(EmptyState, { props: { subtext: 'Subtext here' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Subtext here');
+  });
+
+  test('p element has mt-1 margin', () => {
+    const { container } = render(EmptyState, { props: { description: 'Desc' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('mt-1');
+  });
+});
+
+describe('EmptyState Icon/Image', () => {
+  test('no icon section when no icon or image', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  test('imageSrc renders img element', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', '/empty.png');
+  });
+
+  test('img has empty alt for decorative', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('alt', '');
+  });
+
+  test('img has mb-3 margin', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('mb-3');
+  });
+
+  test('iconSize prop sets size classes on image', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image', iconSize: 'w-32 h-32' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-32');
+    expect(img).toHaveClass('h-32');
+  });
+
+  test('default iconSize is w-20 h-20', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-20');
+    expect(img).toHaveClass('h-20');
+  });
+});
+
+describe('EmptyState Props', () => {
+  test('iconType defaults to component', () => {
+    // When iconType is 'component' and no icon provided, no image renders
+    const { container } = render(EmptyState, { props: { imageSrc: '/test.png' } });
+    // Since iconType defaults to 'component', the image won't render
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  test('iconType=image with imageSrc renders image', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/test.png', iconType: 'image' }
+    });
+    expect(container.querySelector('img')).toBeInTheDocument();
+  });
+});
+
+describe('EmptyState Combinations', () => {
+  test('title and description together', () => {
+    render(EmptyState, { props: { title: 'Empty', description: 'Add some items' } });
+    expect(screen.getByText('Empty')).toBeInTheDocument();
+    expect(screen.getByText('Add some items')).toBeInTheDocument();
+  });
+
+  test('message and subtext together', () => {
+    render(EmptyState, { props: { message: 'No data', subtext: 'Try again' } });
+    expect(screen.getByText('No data')).toBeInTheDocument();
+    expect(screen.getByText('Try again')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(EmptyState, {
+      props: {
+        title: 'Nothing Found',
+        description: 'Your search returned no results',
+        imageSrc: '/empty.svg',
+        iconType: 'image',
+        iconSize: 'w-24 h-24',
+        class: 'min-h-screen'
+      }
+    });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('min-h-screen');
+    expect(container.querySelector('img')).toBeInTheDocument();
+    expect(screen.getByText('Nothing Found')).toBeInTheDocument();
+    expect(screen.getByText('Your search returned no results')).toBeInTheDocument();
+  });
+});

package/dist/recipes/feedback/EmptyState/EmptyState.svelte

@@ -42,7 +42,7 @@
   let displayTitle = $derived(title || message || 'No results found');
   let displaySubtext = $derived(description || subtext);
 </script>
-
+
 <div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
   {#if icon || imageSrc}
     {#if iconType === 'component' && icon}

package/dist/recipes/feedback/ErrorDisplay.spec.js

@@ -1,69 +1,69 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import ErrorDisplay from "./ErrorDisplay.svelte";
-
-describe("ErrorDisplay Component Tests", () => {
-  test("Shows error message when error and show are true", () => {
-    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
-    expect(screen.getByText("Invalid input")).toBeInTheDocument();
-  });
-
-  test("Does not show when error is empty", () => {
-    render(ErrorDisplay, { props: { error: "", show: true } });
-    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
-  });
-
-  test("Does not show when show is false", () => {
-    render(ErrorDisplay, { props: { error: "Error message", show: false } });
-    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
-  });
-
-  test("Has error text color", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("text-red-600");
-  });
-
-  test("Has shake class when shake is true", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("animate-shake");
-  });
-
-  test("Does not have shake class when shake is false", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: false },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveClass("animate-shake");
-  });
-
-  test("Contains icon element", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has flex layout", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, className: "mt-2" },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("mt-2");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const icon = container.querySelector("svg");
+    expect(icon).toHaveClass("text-red-600");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("animate-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).not.toHaveClass("animate-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});