@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  /**
+   * Test wrapper for AccordionItem
+   * Provides the necessary accordion context that AccordionItem expects
+   */
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import AccordionItem from './AccordionItem.svelte';
+
+  interface Props {
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Remove outer border/radius (Flowbite flush variant) */
+    flush?: boolean;
+    /** Initial open state of the item */
+    open?: boolean;
+    /** Show bottom border */
+    border?: boolean;
+    /** Additional classes when open */
+    borderOpenClass?: string;
+    /** Custom class for the item */
+    class?: string;
+    /** Header snippet */
+    header?: Snippet;
+    /** Children snippet */
+    children?: Snippet;
+    /** Expose the openItems store for testing */
+    openItems?: any;
+    /** Expose the toggle function for testing */
+    toggleFn?: any;
+    /** Data attributes for testing */
+    'data-testid'?: string;
+    'data-custom'?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    open = false,
+    border = true,
+    borderOpenClass = '',
+    class: className = '',
+    header,
+    children,
+    openItems: exposedOpenItems = $bindable(null),
+    toggleFn: exposedToggleFn = $bindable(null),
+    'data-testid': dataTestId,
+    'data-custom': dataCustom,
+    ...restProps
+  }: Props = $props();
+
+  // Create the accordion context
+  const openItems = writable(new Set<string>());
+
+  // Expose openItems to parent for testing
+  exposedOpenItems = openItems;
+
+  const toggle = (id: string) => {
+    openItems.update((items) => {
+      if (items.has(id)) {
+        items.delete(id);
+      } else {
+        if (!multiple) {
+          items.clear();
+        }
+        items.add(id);
+      }
+      return new Set(items);
+    });
+  };
+
+  // Expose toggle function to parent for testing
+  exposedToggleFn = toggle;
+
+  setContext("accordion", {
+    openItems,
+    toggle,
+    get flush() { return flush; }
+  });
+</script>
+
+<AccordionItem
+  {open}
+  {border}
+  {borderOpenClass}
+  class={className}
+  data-testid={dataTestId}
+  data-custom={dataCustom}
+  {...restProps}
+>
+  {#snippet header()}
+    {#if header}
+      {@render header()}
+    {:else}
+      Test Header
+    {/if}
+  {/snippet}
+  {#snippet children()}
+    {#if children}
+      {@render children()}
+    {:else}
+      Test Content
+    {/if}
+  {/snippet}
+</AccordionItem>

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+   * Test wrapper for AccordionItem
+   * Provides the necessary accordion context that AccordionItem expects
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Remove outer border/radius (Flowbite flush variant) */
+    flush?: boolean;
+    /** Initial open state of the item */
+    open?: boolean;
+    /** Show bottom border */
+    border?: boolean;
+    /** Additional classes when open */
+    borderOpenClass?: string;
+    /** Custom class for the item */
+    class?: string;
+    /** Header snippet */
+    header?: Snippet;
+    /** Children snippet */
+    children?: Snippet;
+    /** Expose the openItems store for testing */
+    openItems?: any;
+    /** Expose the toggle function for testing */
+    toggleFn?: any;
+    /** Data attributes for testing */
+    'data-testid'?: string;
+    'data-custom'?: string;
+    [key: string]: unknown;
+}
+declare const AccordionItemWrapper: import("svelte").Component<Props, {}, "openItems" | "toggleFn">;
+type AccordionItemWrapper = ReturnType<typeof AccordionItemWrapper>;
+export default AccordionItemWrapper;
+//# sourceMappingURL=AccordionItemWrapper.test.svelte.d.ts.map

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemWrapper.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItemWrapper.test.svelte.ts"],"names":[],"mappings":"AAGA;;;KAGK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,UAAU,KAAK;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAsEH,QAAA,MAAM,oBAAoB,iEAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/primitives/Alert/Alert.spec.js

@@ -126,12 +126,15 @@ describe("Alert Component Tests", () => {
     expect(dismissButton).toBeInTheDocument();
   });
 
-  test("Has custom-alert class for dark mode styling", () => {
+  test("Has proper alert styling classes", () => {
     setupTest({
       title: "Styled Alert",
     });
     const alertElement = screen.getByRole("alert");
-    expect(alertElement).toHaveClass("custom-alert");
+    expect(alertElement).toHaveClass("flex");
+    expect(alertElement).toHaveClass("items-center");
+    expect(alertElement).toHaveClass("p-4");
+    expect(alertElement).toHaveClass("rounded-lg");
   });
 
   test("Renders without title when only message is provided", () => {

package/dist/primitives/Avatar/Avatar.spec.d.ts

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

package/dist/primitives/Avatar/Avatar.spec.d.ts.map

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

package/dist/primitives/Avatar/Avatar.spec.js

@@ -0,0 +1,211 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Avatar from './Avatar.svelte';
+
+describe('Avatar Component', () => {
+  test('renders a div by default (no src)', () => {
+    const { container } = render(Avatar);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('renders an img when src is provided', () => {
+    const { container } = render(Avatar, { props: { src: '/user.jpg' } });
+    expect(container.querySelector('img')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Avatar, { props: { class: 'custom-avatar' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('custom-avatar');
+  });
+});
+
+describe('Avatar with Image', () => {
+  test('sets src attribute on img', () => {
+    const { container } = render(Avatar, { props: { src: '/profile.png' } });
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('src', '/profile.png');
+  });
+
+  test('sets alt attribute on img', () => {
+    const { container } = render(Avatar, { props: { src: '/user.jpg', alt: 'User profile' } });
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('alt', 'User profile');
+  });
+
+  test('img has object-cover class', () => {
+    const { container } = render(Avatar, { props: { src: '/user.jpg' } });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('object-cover');
+  });
+});
+
+describe('Avatar with Initials', () => {
+  test('renders initials when no src', () => {
+    render(Avatar, { props: { initials: 'JD' } });
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+
+  test('initials container has flex classes', () => {
+    const { container } = render(Avatar, { props: { initials: 'AB' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('flex');
+    expect(div).toHaveClass('items-center');
+    expect(div).toHaveClass('justify-center');
+  });
+
+  test('initials container has font-medium', () => {
+    const { container } = render(Avatar, { props: { initials: 'CD' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('font-medium');
+  });
+
+  test('initials container has gray colors', () => {
+    const { container } = render(Avatar, { props: { initials: 'EF' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('text-gray-600');
+    expect(div).toHaveClass('bg-gray-200');
+  });
+
+  test('initials container has dark mode colors', () => {
+    const { container } = render(Avatar, { props: { initials: 'GH' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('dark:bg-gray-700');
+    expect(div).toHaveClass('dark:text-gray-300');
+  });
+});
+
+describe('Avatar Default Placeholder', () => {
+  test('renders placeholder svg when no src or initials', () => {
+    const { container } = render(Avatar);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('placeholder container has bg-gray-200', () => {
+    const { container } = render(Avatar);
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('bg-gray-200');
+  });
+
+  test('placeholder container has dark mode bg', () => {
+    const { container } = render(Avatar);
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('svg has correct sizing classes', () => {
+    const { container } = render(Avatar);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('w-1/2');
+    expect(svg).toHaveClass('h-1/2');
+  });
+
+  test('svg has text-gray-400 color', () => {
+    const { container } = render(Avatar);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('text-gray-400');
+  });
+});
+
+describe('Avatar Sizes', () => {
+  test('xs size applies w-6 h-6', () => {
+    const { container } = render(Avatar, { props: { size: 'xs' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-6');
+    expect(div).toHaveClass('h-6');
+  });
+
+  test('sm size applies w-8 h-8', () => {
+    const { container } = render(Avatar, { props: { size: 'sm' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-8');
+    expect(div).toHaveClass('h-8');
+  });
+
+  test('md size applies w-10 h-10', () => {
+    const { container } = render(Avatar, { props: { size: 'md' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-10');
+    expect(div).toHaveClass('h-10');
+  });
+
+  test('lg size applies w-14 h-14', () => {
+    const { container } = render(Avatar, { props: { size: 'lg' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-14');
+    expect(div).toHaveClass('h-14');
+  });
+
+  test('xl size applies w-20 h-20', () => {
+    const { container } = render(Avatar, { props: { size: 'xl' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-20');
+    expect(div).toHaveClass('h-20');
+  });
+
+  test('default size is md', () => {
+    const { container } = render(Avatar);
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('w-10');
+    expect(div).toHaveClass('h-10');
+  });
+});
+
+describe('Avatar Size Text Classes', () => {
+  test('xs size has text-xs', () => {
+    const { container } = render(Avatar, { props: { size: 'xs', initials: 'XS' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('text-xs');
+  });
+
+  test('sm size has text-xs', () => {
+    const { container } = render(Avatar, { props: { size: 'sm', initials: 'SM' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('text-xs');
+  });
+
+  test('md size has text-sm', () => {
+    const { container } = render(Avatar, { props: { size: 'md', initials: 'MD' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('text-sm');
+  });
+
+  test('lg size has text-base', () => {
+    const { container } = render(Avatar, { props: { size: 'lg', initials: 'LG' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('text-base');
+  });
+
+  test('xl size has text-lg', () => {
+    const { container } = render(Avatar, { props: { size: 'xl', initials: 'XL' } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('text-lg');
+  });
+});
+
+describe('Avatar Rounded', () => {
+  test('default rounded is false (uses rounded class)', () => {
+    const { container } = render(Avatar);
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('rounded');
+    expect(div).not.toHaveClass('rounded-full');
+  });
+
+  test('rounded=true applies rounded-full', () => {
+    const { container } = render(Avatar, { props: { rounded: true } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('rounded-full');
+  });
+
+  test('rounded=false applies rounded', () => {
+    const { container } = render(Avatar, { props: { rounded: false } });
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('rounded');
+  });
+
+  test('img respects rounded prop', () => {
+    const { container } = render(Avatar, { props: { src: '/user.jpg', rounded: true } });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('rounded-full');
+  });
+});

package/dist/primitives/Badges/Badge.spec.js

@@ -3,101 +3,142 @@ import userEvent from '@testing-library/user-event';
 import { describe, test, expect, vi } from 'vitest';
 import Badge from './Badge.svelte';
 
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component, container } = render(Badge, { props: { ...args } });
-  component.$on('click', onClick);
-  const badge = container.querySelector('div');
-  return {
-    user,
-    badge,
-    onClick,
-  };
-}
-
 describe('Badge Component Tests', () => {
   test('Renders with default props', () => {
-    const { badge } = setupTest();
+    const { container } = render(Badge);
+    const badge = container.querySelector('div');
     expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass('badge');
+    expect(badge).toHaveClass('inline-flex');
+    expect(badge).toHaveClass('items-center');
   });
 
-  test('Renders with different sizes', () => {
-    const { badge: smallBadge } = setupTest({ size: 'small' });
-    expect(smallBadge).toHaveClass('badge-sm');
-
-    const { badge: mediumBadge } = setupTest({ size: 'medium' });
-    expect(mediumBadge).toHaveClass('badge-md');
-
-    const { badge: largeBadge } = setupTest({ size: 'large' });
-    expect(largeBadge).toHaveClass('badge-lg');
+  test('Renders with size prop', () => {
+    // Default md size renders with text classes
+    const { container: mdContainer } = render(Badge, { size: 'md' });
+    const mdBadge = mdContainer.querySelector('div');
+    expect(mdBadge).toHaveClass('font-medium');
   });
 
-  test('Handles role variant props for colors', () => {
-    const { badge: hostBadge } = setupTest({ variant: 'host' });
-    expect(hostBadge).toHaveClass('badge-host');
-
-    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
-    expect(headlinerBadge).toHaveClass('badge-headliner');
-
-    const { badge: featureBadge } = setupTest({ variant: 'feature' });
-    expect(featureBadge).toHaveClass('badge-feature');
-
-    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
-    expect(specialGuestBadge).toHaveClass('badge-special-guest');
+  test('Accepts size prop without error', () => {
+    // Test that various sizes render without errors
+    expect(() => render(Badge, { size: 'xs' })).not.toThrow();
+    expect(() => render(Badge, { size: 'sm' })).not.toThrow();
+    expect(() => render(Badge, { size: 'md' })).not.toThrow();
+    expect(() => render(Badge, { size: 'lg' })).not.toThrow();
+  });
 
-    const { badge: openerBadge } = setupTest({ variant: 'opener' });
-    expect(openerBadge).toHaveClass('badge-opener');
+  test('Accepts large prop without error', () => {
+    expect(() => render(Badge, { large: true })).not.toThrow();
+  });
 
-    const { badge: guestBadge } = setupTest({ variant: 'guest' });
-    expect(guestBadge).toHaveClass('badge-guest');
+  test('Handles variant props for colors', () => {
+    // neutral variant (default)
+    const { container: neutralContainer } = render(Badge, { variant: 'neutral' });
+    const neutralBadge = neutralContainer.querySelector('div');
+    expect(neutralBadge).toHaveClass('bg-gray-100');
+
+    // success variant
+    const { container: successContainer } = render(Badge, { variant: 'success' });
+    const successBadge = successContainer.querySelector('div');
+    expect(successBadge).toHaveClass('bg-green-100');
+
+    // warning variant
+    const { container: warningContainer } = render(Badge, { variant: 'warning' });
+    const warningBadge = warningContainer.querySelector('div');
+    expect(warningBadge).toHaveClass('bg-yellow-100');
+
+    // error variant
+    const { container: errorContainer } = render(Badge, { variant: 'error' });
+    const errorBadge = errorContainer.querySelector('div');
+    expect(errorBadge).toHaveClass('bg-red-100');
+
+    // info variant
+    const { container: infoContainer } = render(Badge, { variant: 'info' });
+    const infoBadge = infoContainer.querySelector('div');
+    expect(infoBadge).toHaveClass('bg-blue-100');
+  });
 
-    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
-    expect(teacherBadge).toHaveClass('badge-teacher');
+  test('Handles case-insensitive variants', () => {
+    const { container: upperContainer } = render(Badge, { variant: 'SUCCESS' });
+    const upperBadge = upperContainer.querySelector('div');
+    expect(upperBadge).toHaveClass('bg-green-100');
 
-    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
-    expect(assistantBadge).toHaveClass('badge-assistant');
+    const { container: mixedContainer } = render(Badge, { variant: 'Warning' });
+    const mixedBadge = mixedContainer.querySelector('div');
+    expect(mixedBadge).toHaveClass('bg-yellow-100');
   });
 
-  test('Handles status variant props for colors', () => {
-    const { badge: successBadge } = setupTest({ variant: 'success' });
-    expect(successBadge).toHaveClass('badge-success');
+  test('Falls back to neutral variant for unknown variants', () => {
+    const { container } = render(Badge, { variant: 'unknown' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('bg-gray-100');
+  });
 
-    const { badge: warningBadge } = setupTest({ variant: 'warning' });
-    expect(warningBadge).toHaveClass('badge-warning');
+  test('Shows status dot when showDot is true', () => {
+    const { container } = render(Badge, { showDot: true });
+    const dot = container.querySelector('span.rounded-full');
+    expect(dot).toBeInTheDocument();
+    expect(dot).toHaveClass('w-1.5');
+    expect(dot).toHaveClass('h-1.5');
+  });
 
-    const { badge: errorBadge } = setupTest({ variant: 'error' });
-    expect(errorBadge).toHaveClass('badge-error');
+  test('Does not show status dot by default', () => {
+    const { container } = render(Badge, { showDot: false });
+    const dot = container.querySelector('span.rounded-full');
+    expect(dot).not.toBeInTheDocument();
+  });
 
-    const { badge: infoBadge } = setupTest({ variant: 'info' });
-    expect(infoBadge).toHaveClass('badge-info');
+  test('Renders as pill shape', () => {
+    const { container } = render(Badge, { pill: true });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('rounded-full');
+    expect(badge).toHaveClass('min-w-5');
+  });
 
-    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
-    expect(neutralBadge).toHaveClass('badge-neutral');
+  test('Renders with rounded shape by default', () => {
+    const { container } = render(Badge, { shape: 'rounded' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('rounded');
   });
 
-  test('Falls back to neutral variant for unknown variants', () => {
-    const { badge } = setupTest({ variant: 'unknown' });
-    expect(badge).toHaveClass('badge-neutral');
+  test('Renders with pill shape option', () => {
+    const { container } = render(Badge, { shape: 'pill' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('rounded-full');
   });
 
-  test('Handles case-insensitive variants', () => {
-    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
-    expect(upperBadge).toHaveClass('badge-host');
+  test('Applies custom className', () => {
+    const { container } = render(Badge, { className: 'custom-class' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('custom-class');
+  });
 
-    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
-    expect(mixedBadge).toHaveClass('badge-headliner');
+  test('Applies custom text color', () => {
+    const { container } = render(Badge, { textColor: '#ff0000' });
+    const badge = container.querySelector('div');
+    // Browser may convert hex to rgb
+    expect(badge.style.color).toBeTruthy();
   });
 
-  test('Falls back to medium size for unknown sizes', () => {
-    const { badge } = setupTest({ size: 'unknown' });
-    expect(badge).toHaveClass('badge-md');
+  test('Applies custom background color', () => {
+    const { container } = render(Badge, { bgColor: '#00ff00' });
+    const badge = container.querySelector('div');
+    // Browser may convert hex to rgb
+    expect(badge.style.backgroundColor).toBeTruthy();
   });
 
   test('Dispatches click event', async () => {
-    const { user, badge, onClick } = setupTest();
+    const user = userEvent.setup();
+    const onClickMock = vi.fn();
+    const { container } = render(Badge, { onclick: onClickMock });
+    const badge = container.querySelector('div');
     await user.click(badge);
-    expect(onClick).toHaveBeenCalledOnce();
+    expect(onClickMock).toHaveBeenCalledOnce();
+  });
+
+  test('Gap class is present for icon spacing', () => {
+    const { container } = render(Badge);
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('gap-1.5');
   });
 });