@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Spinner/Spinner.spec.js

@@ -1,75 +1,75 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Spinner from "./Spinner.svelte";
-
-describe("Spinner Component Tests", () => {
-  test("Renders spinner with status role", () => {
-    render(Spinner);
-    const status = screen.getByRole("status");
-    expect(status).toBeInTheDocument();
-  });
-
-  test("Has loading text for screen readers", () => {
-    render(Spinner);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
-  });
-
-  test("Loading text is sr-only", () => {
-    render(Spinner);
-    const loadingText = screen.getByText("Loading...");
-    expect(loadingText).toHaveClass("sr-only");
-  });
-
-  test("Contains SVG element", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("SVG is hidden from accessibility tree", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("aria-hidden", "true");
-  });
-
-  test("SVG has animation class", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("animate-spin");
-  });
-
-  test("Has flexbox centering classes", () => {
-    render(Spinner);
-    const status = screen.getByRole("status");
-    expect(status).toHaveClass("flex");
-    expect(status).toHaveClass("flex-col");
-    expect(status).toHaveClass("justify-center");
-    expect(status).toHaveClass("items-center");
-  });
-
-  test("Has correct height", () => {
-    render(Spinner);
-    const status = screen.getByRole("status");
-    expect(status).toHaveClass("h-10");
-  });
-
-  test("SVG has correct dimensions", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("w-8");
-    expect(svg).toHaveClass("h-8");
-  });
-
-  test("Has dark mode text color classes", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("text-gray-200");
-    expect(svg).toHaveClass("dark:text-gray-600");
-  });
-
-  test("Has blue fill color", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("fill-blue-600");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Spinner from "./Spinner.svelte";
+
+describe("Spinner Component Tests", () => {
+  test("Renders spinner with status role", () => {
+    render(Spinner);
+    const status = screen.getByRole("status");
+    expect(status).toBeInTheDocument();
+  });
+
+  test("Has loading text for screen readers", () => {
+    render(Spinner);
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  test("Loading text is sr-only", () => {
+    render(Spinner);
+    const loadingText = screen.getByText("Loading...");
+    expect(loadingText).toHaveClass("sr-only");
+  });
+
+  test("Contains SVG element", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("SVG is hidden from accessibility tree", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  test("SVG has animation class", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("animate-spin");
+  });
+
+  test("Has flexbox centering classes", () => {
+    render(Spinner);
+    const status = screen.getByRole("status");
+    expect(status).toHaveClass("flex");
+    expect(status).toHaveClass("flex-col");
+    expect(status).toHaveClass("justify-center");
+    expect(status).toHaveClass("items-center");
+  });
+
+  test("Has correct height", () => {
+    render(Spinner);
+    const status = screen.getByRole("status");
+    expect(status).toHaveClass("h-10");
+  });
+
+  test("SVG has correct dimensions", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("w-8");
+    expect(svg).toHaveClass("h-8");
+  });
+
+  test("Has dark mode text color classes", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("text-gray-200");
+    expect(svg).toHaveClass("dark:text-gray-600");
+  });
+
+  test("Has blue fill color", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("fill-blue-600");
+  });
+});

package/dist/components/StatusIndicator/StatusIndicator.spec.js

@@ -1,129 +1,129 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import StatusIndicator from './StatusIndicator.svelte';
-
-describe('StatusIndicator', () => {
-  describe('idle state', () => {
-    it('renders empty container when status is idle', () => {
-      const { container } = render(StatusIndicator, { status: 'idle' });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator).toBeTruthy();
-      expect(indicator.children.length).toBe(0);
-    });
-
-    it('uses default status of idle', () => {
-      const { container } = render(StatusIndicator);
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.children.length).toBe(0);
-    });
-  });
-
-  describe('loading state', () => {
-    it('renders spinner when status is loading', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner).toBeTruthy();
-    });
-
-    it('renders spinner SVG with track and head circles', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.querySelector('svg')).toBeTruthy();
-      expect(spinner.querySelector('.spinner-track')).toBeTruthy();
-      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
-    });
-
-    it('applies size to spinner', () => {
-      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.style.width).toBe('64px');
-      expect(spinner.style.height).toBe('64px');
-    });
-  });
-
-  describe('success state', () => {
-    it('renders success circle when status is success', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      const success = container.querySelector('.success-circle');
-      expect(success).toBeTruthy();
-    });
-
-    it('renders success SVG with background and checkmark', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      const success = container.querySelector('.success-circle');
-      expect(success.querySelector('svg')).toBeTruthy();
-      expect(success.querySelector('.success-bg')).toBeTruthy();
-      expect(success.querySelector('.checkmark')).toBeTruthy();
-    });
-
-    it('applies size to success circle', () => {
-      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
-      const success = container.querySelector('.success-circle');
-      expect(success.style.width).toBe('32px');
-      expect(success.style.height).toBe('32px');
-    });
-  });
-
-  describe('error state', () => {
-    it('renders error circle when status is error', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      const error = container.querySelector('.error-circle');
-      expect(error).toBeTruthy();
-    });
-
-    it('renders error SVG with background and X lines', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      const error = container.querySelector('.error-circle');
-      expect(error.querySelector('svg')).toBeTruthy();
-      expect(error.querySelector('.error-bg')).toBeTruthy();
-      const xLines = error.querySelectorAll('.error-x');
-      expect(xLines.length).toBe(2);
-    });
-
-    it('applies size to error circle', () => {
-      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
-      const error = container.querySelector('.error-circle');
-      expect(error.style.width).toBe('24px');
-      expect(error.style.height).toBe('24px');
-    });
-  });
-
-  describe('size prop', () => {
-    it('uses default size of 48px', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.style.width).toBe('48px');
-      expect(indicator.style.height).toBe('48px');
-    });
-
-    it('accepts custom size', () => {
-      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.style.width).toBe('100px');
-      expect(indicator.style.height).toBe('100px');
-    });
-  });
-
-  describe('state transitions', () => {
-    it('only renders one state at a time - loading', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      expect(container.querySelector('.spinner')).toBeTruthy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('only renders one state at a time - success', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeTruthy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('only renders one state at a time - error', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeTruthy();
-    });
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusIndicator from './StatusIndicator.svelte';
+
+describe('StatusIndicator', () => {
+  describe('idle state', () => {
+    it('renders empty container when status is idle', () => {
+      const { container } = render(StatusIndicator, { status: 'idle' });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator).toBeTruthy();
+      expect(indicator.children.length).toBe(0);
+    });
+
+    it('uses default status of idle', () => {
+      const { container } = render(StatusIndicator);
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.children.length).toBe(0);
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders spinner when status is loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner).toBeTruthy();
+    });
+
+    it('renders spinner SVG with track and head circles', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.querySelector('svg')).toBeTruthy();
+      expect(spinner.querySelector('.spinner-track')).toBeTruthy();
+      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
+    });
+
+    it('applies size to spinner', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('64px');
+      expect(spinner.style.height).toBe('64px');
+    });
+  });
+
+  describe('success state', () => {
+    it('renders success circle when status is success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success).toBeTruthy();
+    });
+
+    it('renders success SVG with background and checkmark', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success.querySelector('svg')).toBeTruthy();
+      expect(success.querySelector('.success-bg')).toBeTruthy();
+      expect(success.querySelector('.checkmark')).toBeTruthy();
+    });
+
+    it('applies size to success circle', () => {
+      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
+      const success = container.querySelector('.success-circle');
+      expect(success.style.width).toBe('32px');
+      expect(success.style.height).toBe('32px');
+    });
+  });
+
+  describe('error state', () => {
+    it('renders error circle when status is error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error).toBeTruthy();
+    });
+
+    it('renders error SVG with background and X lines', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error.querySelector('svg')).toBeTruthy();
+      expect(error.querySelector('.error-bg')).toBeTruthy();
+      const xLines = error.querySelectorAll('.error-x');
+      expect(xLines.length).toBe(2);
+    });
+
+    it('applies size to error circle', () => {
+      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
+      const error = container.querySelector('.error-circle');
+      expect(error.style.width).toBe('24px');
+      expect(error.style.height).toBe('24px');
+    });
+  });
+
+  describe('size prop', () => {
+    it('uses default size of 48px', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.style.width).toBe('48px');
+      expect(indicator.style.height).toBe('48px');
+    });
+
+    it('accepts custom size', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.style.width).toBe('100px');
+      expect(indicator.style.height).toBe('100px');
+    });
+  });
+
+  describe('state transitions', () => {
+    it('only renders one state at a time - loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      expect(container.querySelector('.spinner')).toBeTruthy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeTruthy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeTruthy();
+    });
+  });
+});

package/dist/components/Toaster/Toaster.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module">
   import { Story } from "@storybook/addon-svelte-csf";
   import { Toaster } from "svelte-sonner";
-  import { showToast } from "../../../stores/toaster";
+  import { showToast } from "../../stores/toaster";
 
   export const meta = {
     title: "Components/Toaster",