@getmicdrop/svelte-components 5.5.5 → 5.6.1

package/dist/components/Layout/Text.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Text.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAC5F,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,KAAK,WAAW,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAElD,UAAU,KAAK;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6BAA6B;IAC7B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,kBAAkB;IAClB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACrE,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAsEH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Layout/TwoColumn.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  type Ratio = 'equal' | '1:2' | '2:1' | '1:3' | '3:1';
+  type StackAt = 'sm' | 'md' | 'lg' | 'never';
+
+  interface Props {
+    /** Gap between columns */
+    gap?: Gap;
+    /** Column ratio */
+    ratio?: Ratio;
+    /** Breakpoint at which columns stack vertically */
+    stackAt?: StackAt;
+    /** Reverse order when stacked */
+    reverseOnStack?: boolean;
+    /** Vertical alignment */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Additional CSS classes */
+    class?: string;
+    /** Left column content */
+    left?: Snippet;
+    /** Right column content */
+    right?: Snippet;
+    /** Children (alternative to left/right slots) */
+    children?: Snippet;
+  }
+
+  let {
+    gap = 'md',
+    ratio = 'equal',
+    stackAt = 'md',
+    reverseOnStack = false,
+    align = 'stretch',
+    class: className = '',
+    left,
+    right,
+    children,
+  }: Props = $props();
+
+  const gapClasses: Record<Gap, string> = {
+    none: 'gap-0',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+  };
+
+  // Stack classes: normal and reversed versions
+  const stackAtClasses: Record<StackAt, string> = {
+    sm: 'flex-col sm:flex-row',
+    md: 'flex-col md:flex-row',
+    lg: 'flex-col lg:flex-row',
+    never: 'flex-row',
+  };
+
+  const stackAtReversedClasses: Record<StackAt, string> = {
+    sm: 'flex-col-reverse sm:flex-row',
+    md: 'flex-col-reverse md:flex-row',
+    lg: 'flex-col-reverse lg:flex-row',
+    never: 'flex-row',
+  };
+
+  const alignClasses: Record<string, string> = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+  };
+
+  // Ratio classes for each column
+  const ratioLeftClasses: Record<Ratio, string> = {
+    equal: 'flex-1',
+    '1:2': 'w-full md:w-1/3',
+    '2:1': 'w-full md:w-2/3',
+    '1:3': 'w-full md:w-1/4',
+    '3:1': 'w-full md:w-3/4',
+  };
+
+  const ratioRightClasses: Record<Ratio, string> = {
+    equal: 'flex-1',
+    '1:2': 'w-full md:w-2/3',
+    '2:1': 'w-full md:w-1/3',
+    '1:3': 'w-full md:w-3/4',
+    '3:1': 'w-full md:w-1/4',
+  };
+
+  let containerClasses = $derived([
+    'flex',
+    reverseOnStack ? stackAtReversedClasses[stackAt] : stackAtClasses[stackAt],
+    gapClasses[gap],
+    alignClasses[align],
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={containerClasses}>
+  {#if left && right}
+    <div class={ratioLeftClasses[ratio]}>
+      {@render left()}
+    </div>
+    <div class={ratioRightClasses[ratio]}>
+      {@render right()}
+    </div>
+  {:else if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/Layout/TwoColumn.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type Ratio = 'equal' | '1:2' | '2:1' | '1:3' | '3:1';
+type StackAt = 'sm' | 'md' | 'lg' | 'never';
+interface Props {
+    /** Gap between columns */
+    gap?: Gap;
+    /** Column ratio */
+    ratio?: Ratio;
+    /** Breakpoint at which columns stack vertically */
+    stackAt?: StackAt;
+    /** Reverse order when stacked */
+    reverseOnStack?: boolean;
+    /** Vertical alignment */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Additional CSS classes */
+    class?: string;
+    /** Left column content */
+    left?: Snippet;
+    /** Right column content */
+    right?: Snippet;
+    /** Children (alternative to left/right slots) */
+    children?: Snippet;
+}
+declare const TwoColumn: import("svelte").Component<Props, {}, "">;
+type TwoColumn = ReturnType<typeof TwoColumn>;
+export default TwoColumn;
+//# sourceMappingURL=TwoColumn.svelte.d.ts.map

package/dist/components/Layout/TwoColumn.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoColumn.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/TwoColumn.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACrD,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb,0BAA0B;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2FH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/Layout/__tests__/AppShell.test.d.ts

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

package/dist/components/Layout/__tests__/AppShell.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/AppShell.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/AppShell.test.js

@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import AppShell from '../AppShell.svelte';
+describe('AppShell', () => {
+    describe('basic rendering', () => {
+        it('renders the shell container', () => {
+            const { container } = render(AppShell);
+            const shell = container.querySelector('div');
+            expect(shell).toBeTruthy();
+        });
+        it('applies min-h-screen class', () => {
+            const { container } = render(AppShell);
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('min-h-screen')).toBe(true);
+        });
+        it('renders main element', () => {
+            const { container } = render(AppShell);
+            expect(container.querySelector('main')).toBeTruthy();
+        });
+    });
+    describe('variant prop', () => {
+        it('applies admin background by default', () => {
+            const { container } = render(AppShell);
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+        });
+        it('applies admin background for variant="admin"', () => {
+            const { container } = render(AppShell, { variant: 'admin' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+        });
+        it('applies performer background for variant="performer"', () => {
+            const { container } = render(AppShell, { variant: 'performer' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+        });
+        it('applies public background for variant="public"', () => {
+            const { container } = render(AppShell, { variant: 'public' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-white')).toBe(true);
+        });
+        it('applies minimal background for variant="minimal"', () => {
+            const { container } = render(AppShell, { variant: 'minimal' });
+            const shell = container.querySelector('div');
+            expect(shell?.classList.contains('bg-white')).toBe(true);
+        });
+    });
+    describe('fixedHeader prop', () => {
+        it('applies pt-16 to main when fixedHeader=true', () => {
+            const { container } = render(AppShell, { fixedHeader: true });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('pt-16')).toBe(true);
+        });
+        it('does not apply pt-16 to main when fixedHeader=false', () => {
+            const { container } = render(AppShell, { fixedHeader: false });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('pt-16')).toBe(false);
+        });
+    });
+    describe('sidebarCollapsed prop', () => {
+        // Note: sidebar tests require the sidebar snippet to be provided
+        // These tests verify the main content margin adjusts correctly
+        it('applies transition classes to main', () => {
+            const { container } = render(AppShell);
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('transition-all')).toBe(true);
+            expect(main?.classList.contains('duration-300')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes to main element', () => {
+            const { container } = render(AppShell, { class: 'custom-main-class' });
+            const main = container.querySelector('main');
+            expect(main?.classList.contains('custom-main-class')).toBe(true);
+        });
+    });
+    describe('structural elements', () => {
+        it('does not render header when no header snippet provided', () => {
+            const { container } = render(AppShell);
+            expect(container.querySelector('header')).toBeFalsy();
+        });
+        it('does not render aside when no sidebar snippet provided', () => {
+            const { container } = render(AppShell);
+            expect(container.querySelector('aside')).toBeFalsy();
+        });
+        it('does not render nav when showBottomNav=false', () => {
+            const { container } = render(AppShell, { showBottomNav: false });
+            expect(container.querySelector('nav')).toBeFalsy();
+        });
+        it('does not render nav when no bottomNav snippet provided', () => {
+            const { container } = render(AppShell, { showBottomNav: true });
+            expect(container.querySelector('nav')).toBeFalsy();
+        });
+    });
+});

package/dist/components/Layout/__tests__/ContentSection.test.d.ts

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

package/dist/components/Layout/__tests__/ContentSection.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSection.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/ContentSection.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/ContentSection.test.js

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ContentSection from '../ContentSection.svelte';
+describe('ContentSection', () => {
+    describe('basic rendering', () => {
+        it('renders a section element', () => {
+            const { container } = render(ContentSection);
+            expect(container.querySelector('section')).toBeTruthy();
+        });
+        it('applies default spacing class', () => {
+            const { container } = render(ContentSection);
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-6')).toBe(true);
+        });
+    });
+    describe('title prop', () => {
+        it('renders title when provided', () => {
+            const { container } = render(ContentSection, { title: 'Test Title' });
+            expect(container.textContent).toContain('Test Title');
+        });
+        it('renders title as h2 by default', () => {
+            const { container } = render(ContentSection, { title: 'Test Title' });
+            const h2 = container.querySelector('h2');
+            expect(h2).toBeTruthy();
+            expect(h2?.textContent).toBe('Test Title');
+        });
+        it('applies title size classes', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'lg' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-xl')).toBe(true);
+        });
+    });
+    describe('subtitle prop', () => {
+        it('renders subtitle when provided', () => {
+            const { container } = render(ContentSection, { title: 'Title', subtitle: 'Subtitle text' });
+            expect(container.textContent).toContain('Subtitle text');
+        });
+        it('applies subtitle styling', () => {
+            const { container } = render(ContentSection, { title: 'Title', subtitle: 'Subtitle' });
+            const subtitle = container.querySelector('p');
+            expect(subtitle?.classList.contains('text-sm')).toBe(true);
+            expect(subtitle?.classList.contains('text-gray-500')).toBe(true);
+        });
+    });
+    describe('headingLevel prop', () => {
+        it('renders h2 by default', () => {
+            const { container } = render(ContentSection, { title: 'Test' });
+            expect(container.querySelector('h2')).toBeTruthy();
+        });
+        it('renders h3 when headingLevel=3', () => {
+            const { container } = render(ContentSection, { title: 'Test', headingLevel: 3 });
+            expect(container.querySelector('h3')).toBeTruthy();
+        });
+        it('renders h4 when headingLevel=4', () => {
+            const { container } = render(ContentSection, { title: 'Test', headingLevel: 4 });
+            expect(container.querySelector('h4')).toBeTruthy();
+        });
+    });
+    describe('titleSize prop', () => {
+        it('applies text-base for titleSize="sm"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'sm' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-base')).toBe(true);
+        });
+        it('applies text-lg for titleSize="base"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'base' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-lg')).toBe(true);
+        });
+        it('applies text-xl for titleSize="lg"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'lg' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-xl')).toBe(true);
+        });
+        it('applies text-2xl for titleSize="xl"', () => {
+            const { container } = render(ContentSection, { title: 'Test', titleSize: 'xl' });
+            const heading = container.querySelector('h2');
+            expect(heading?.classList.contains('text-2xl')).toBe(true);
+        });
+    });
+    describe('spacing prop', () => {
+        it('applies no margin for spacing="none"', () => {
+            const { container } = render(ContentSection, { spacing: 'none' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-4')).toBe(false);
+            expect(section?.classList.contains('mb-6')).toBe(false);
+            expect(section?.classList.contains('mb-8')).toBe(false);
+        });
+        it('applies mb-4 for spacing="sm"', () => {
+            const { container } = render(ContentSection, { spacing: 'sm' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-4')).toBe(true);
+        });
+        it('applies mb-6 for spacing="md"', () => {
+            const { container } = render(ContentSection, { spacing: 'md' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-6')).toBe(true);
+        });
+        it('applies mb-8 for spacing="lg"', () => {
+            const { container } = render(ContentSection, { spacing: 'lg' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('mb-8')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(ContentSection, { class: 'custom-class' });
+            const section = container.querySelector('section');
+            expect(section?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

package/dist/components/Layout/__tests__/Heading.test.d.ts

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

package/dist/components/Layout/__tests__/Heading.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/Heading.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/Heading.test.js

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Heading from '../Heading.svelte';
+describe('Heading', () => {
+    describe('basic rendering', () => {
+        it('renders as h2 element by default', () => {
+            const { container } = render(Heading);
+            expect(container.querySelector('h2')).toBeTruthy();
+        });
+        it('applies default variant classes', () => {
+            const { container } = render(Heading);
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-gray-900')).toBe(true);
+        });
+        it('applies default size class based on level', () => {
+            const { container } = render(Heading);
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-2xl')).toBe(true);
+        });
+        it('applies font-semibold by default', () => {
+            const { container } = render(Heading);
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('font-semibold')).toBe(true);
+        });
+    });
+    describe('level prop', () => {
+        it('renders h1 for level=1', () => {
+            const { container } = render(Heading, { level: 1 });
+            expect(container.querySelector('h1')).toBeTruthy();
+            expect(container.querySelector('h1')?.classList.contains('text-3xl')).toBe(true);
+        });
+        it('renders h2 for level=2', () => {
+            const { container } = render(Heading, { level: 2 });
+            expect(container.querySelector('h2')).toBeTruthy();
+            expect(container.querySelector('h2')?.classList.contains('text-2xl')).toBe(true);
+        });
+        it('renders h3 for level=3', () => {
+            const { container } = render(Heading, { level: 3 });
+            expect(container.querySelector('h3')).toBeTruthy();
+            expect(container.querySelector('h3')?.classList.contains('text-xl')).toBe(true);
+        });
+        it('renders h4 for level=4', () => {
+            const { container } = render(Heading, { level: 4 });
+            expect(container.querySelector('h4')).toBeTruthy();
+            expect(container.querySelector('h4')?.classList.contains('text-lg')).toBe(true);
+        });
+        it('renders h5 for level=5', () => {
+            const { container } = render(Heading, { level: 5 });
+            expect(container.querySelector('h5')).toBeTruthy();
+            expect(container.querySelector('h5')?.classList.contains('text-base')).toBe(true);
+        });
+        it('renders h6 for level=6', () => {
+            const { container } = render(Heading, { level: 6 });
+            expect(container.querySelector('h6')).toBeTruthy();
+            expect(container.querySelector('h6')?.classList.contains('text-sm')).toBe(true);
+        });
+    });
+    describe('size prop override', () => {
+        it('overrides default size when size prop is provided', () => {
+            const { container } = render(Heading, { level: 1, size: 'lg' });
+            const h1 = container.querySelector('h1');
+            expect(h1?.classList.contains('text-lg')).toBe(true);
+            expect(h1?.classList.contains('text-3xl')).toBe(false);
+        });
+        it('applies text-xs for size="xs"', () => {
+            const { container } = render(Heading, { size: 'xs' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-xs')).toBe(true);
+        });
+        it('applies text-4xl for size="4xl"', () => {
+            const { container } = render(Heading, { size: '4xl' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-4xl')).toBe(true);
+        });
+    });
+    describe('variant prop', () => {
+        it('applies default variant classes', () => {
+            const { container } = render(Heading, { variant: 'default' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-gray-900')).toBe(true);
+        });
+        it('applies muted variant classes', () => {
+            const { container } = render(Heading, { variant: 'muted' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-gray-600')).toBe(true);
+        });
+        it('applies primary variant classes', () => {
+            const { container } = render(Heading, { variant: 'primary' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-primary')).toBe(true);
+        });
+    });
+    describe('weight prop', () => {
+        it('applies font-medium for weight="medium"', () => {
+            const { container } = render(Heading, { weight: 'medium' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('font-medium')).toBe(true);
+        });
+        it('applies font-semibold for weight="semibold"', () => {
+            const { container } = render(Heading, { weight: 'semibold' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('font-semibold')).toBe(true);
+        });
+        it('applies font-bold for weight="bold"', () => {
+            const { container } = render(Heading, { weight: 'bold' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('font-bold')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(Heading, { class: 'custom-class' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('custom-class')).toBe(true);
+        });
+        it('preserves default classes when adding custom classes', () => {
+            const { container } = render(Heading, { class: 'custom-class' });
+            const h2 = container.querySelector('h2');
+            expect(h2?.classList.contains('text-2xl')).toBe(true);
+            expect(h2?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

package/dist/components/Layout/__tests__/PageContainer.test.d.ts

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

package/dist/components/Layout/__tests__/PageContainer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/PageContainer.test.ts"],"names":[],"mappings":""}

package/dist/components/Layout/__tests__/PageContainer.test.js

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import PageContainer from '../PageContainer.svelte';
+describe('PageContainer', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(PageContainer);
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('applies default max-w-full class', () => {
+            const { container } = render(PageContainer);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-full')).toBe(true);
+        });
+        it('applies mx-auto for centering by default', () => {
+            const { container } = render(PageContainer);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('mx-auto')).toBe(true);
+        });
+    });
+    describe('maxWidth prop', () => {
+        it('applies max-w-sm for maxWidth="sm"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-sm')).toBe(true);
+        });
+        it('applies max-w-md for maxWidth="md"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-md')).toBe(true);
+        });
+        it('applies max-w-lg for maxWidth="lg"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-lg')).toBe(true);
+        });
+        it('applies max-w-xl for maxWidth="xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-xl')).toBe(true);
+        });
+        it('applies max-w-2xl for maxWidth="2xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: '2xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-2xl')).toBe(true);
+        });
+        it('applies max-w-4xl for maxWidth="4xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: '4xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-4xl')).toBe(true);
+        });
+        it('applies max-w-6xl for maxWidth="6xl"', () => {
+            const { container } = render(PageContainer, { maxWidth: '6xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-6xl')).toBe(true);
+        });
+        it('applies max-w-full for maxWidth="full"', () => {
+            const { container } = render(PageContainer, { maxWidth: 'full' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-full')).toBe(true);
+        });
+    });
+    describe('padding prop', () => {
+        it('applies no padding for padding="none"', () => {
+            const { container } = render(PageContainer, { padding: 'none' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-4')).toBe(false);
+            expect(div?.classList.contains('py-6')).toBe(false);
+        });
+        it('applies tight padding for padding="tight"', () => {
+            const { container } = render(PageContainer, { padding: 'tight' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-2')).toBe(true);
+            expect(div?.classList.contains('py-2')).toBe(true);
+        });
+        it('applies default padding for padding="default"', () => {
+            const { container } = render(PageContainer, { padding: 'default' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-4')).toBe(true);
+            expect(div?.classList.contains('py-6')).toBe(true);
+        });
+        it('applies spacious padding for padding="spacious"', () => {
+            const { container } = render(PageContainer, { padding: 'spacious' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('px-4')).toBe(true);
+            expect(div?.classList.contains('py-8')).toBe(true);
+        });
+    });
+    describe('center prop', () => {
+        it('applies mx-auto when center=true', () => {
+            const { container } = render(PageContainer, { center: true });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('mx-auto')).toBe(true);
+        });
+        it('does not apply mx-auto when center=false', () => {
+            const { container } = render(PageContainer, { center: false });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('mx-auto')).toBe(false);
+        });
+    });
+    describe('background prop', () => {
+        it('applies no background for background="none"', () => {
+            const { container } = render(PageContainer, { background: 'none' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('bg-white')).toBe(false);
+            expect(div?.classList.contains('bg-gray-50')).toBe(false);
+        });
+        it('applies white background for background="white"', () => {
+            const { container } = render(PageContainer, { background: 'white' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('bg-white')).toBe(true);
+        });
+        it('applies gray background for background="gray"', () => {
+            const { container } = render(PageContainer, { background: 'gray' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('bg-gray-50')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(PageContainer, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+        it('preserves default classes when adding custom classes', () => {
+            const { container } = render(PageContainer, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('max-w-full')).toBe(true);
+            expect(div?.classList.contains('mx-auto')).toBe(true);
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

package/dist/components/Layout/__tests__/Responsive.test.d.ts

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

package/dist/components/Layout/__tests__/Responsive.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Responsive.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/Layout/__tests__/Responsive.test.ts"],"names":[],"mappings":""}