@getmicdrop/svelte-components 5.5.5 → 5.6.1

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

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Responsive from '../Responsive.svelte';
+describe('Responsive', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile' });
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+    });
+    describe('mode="show-mobile"', () => {
+        it('applies block and lg:hidden classes', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+        });
+        it('respects breakpoint prop', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('md:hidden')).toBe(true);
+        });
+    });
+    describe('mode="show-desktop"', () => {
+        it('applies hidden and lg:block classes', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+        it('respects breakpoint prop', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('md:block')).toBe(true);
+        });
+    });
+    describe('mode="hide-mobile"', () => {
+        it('applies hidden and lg:block classes (same as show-desktop)', () => {
+            const { container } = render(Responsive, { mode: 'hide-mobile' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+    });
+    describe('mode="hide-desktop"', () => {
+        it('applies block and lg:hidden classes (same as show-mobile)', () => {
+            const { container } = render(Responsive, { mode: 'hide-desktop' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+        });
+    });
+    describe('breakpoint prop', () => {
+        it('uses sm breakpoint', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('sm:block')).toBe(true);
+        });
+        it('uses md breakpoint', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('md:block')).toBe(true);
+        });
+        it('uses lg breakpoint (default)', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+        it('uses xl breakpoint', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', breakpoint: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('xl:block')).toBe(true);
+        });
+    });
+    describe('display prop', () => {
+        it('uses block display by default', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+        });
+        it('uses flex display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'flex' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex')).toBe(true);
+        });
+        it('uses grid display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'grid' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid')).toBe(true);
+        });
+        it('uses inline display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'inline' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('inline')).toBe(true);
+        });
+        it('uses inline-block display when specified', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', display: 'inline-block' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('inline-block')).toBe(true);
+        });
+        it('applies display to desktop breakpoint for show-desktop mode', () => {
+            const { container } = render(Responsive, { mode: 'show-desktop', display: 'flex' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:flex')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+        it('preserves responsive classes when adding custom classes', () => {
+            const { container } = render(Responsive, { mode: 'show-mobile', class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ShowOnDesktop from '../ShowOnDesktop.svelte';
+describe('ShowOnDesktop', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(ShowOnDesktop);
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('applies hidden and lg:block by default', () => {
+            const { container } = render(ShowOnDesktop);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+    });
+    describe('breakpoint prop', () => {
+        it('applies sm:block for breakpoint="sm"', () => {
+            const { container } = render(ShowOnDesktop, { breakpoint: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('sm:block')).toBe(true);
+        });
+        it('applies md:block for breakpoint="md"', () => {
+            const { container } = render(ShowOnDesktop, { breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('md:block')).toBe(true);
+        });
+        it('applies lg:block for breakpoint="lg"', () => {
+            const { container } = render(ShowOnDesktop, { breakpoint: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+        it('applies xl:block for breakpoint="xl"', () => {
+            const { container } = render(ShowOnDesktop, { breakpoint: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('xl:block')).toBe(true);
+        });
+    });
+    describe('display prop', () => {
+        it('applies block display by default', () => {
+            const { container } = render(ShowOnDesktop);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:block')).toBe(true);
+        });
+        it('applies flex display for display="flex"', () => {
+            const { container } = render(ShowOnDesktop, { display: 'flex' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:flex')).toBe(true);
+        });
+        it('applies grid display for display="grid"', () => {
+            const { container } = render(ShowOnDesktop, { display: 'grid' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:grid')).toBe(true);
+        });
+        it('applies inline display for display="inline"', () => {
+            const { container } = render(ShowOnDesktop, { display: 'inline' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:inline')).toBe(true);
+        });
+        it('applies inline-block display for display="inline-block"', () => {
+            const { container } = render(ShowOnDesktop, { display: 'inline-block' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:inline-block')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(ShowOnDesktop, { 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(ShowOnDesktop, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('hidden')).toBe(true);
+            expect(div?.classList.contains('lg:block')).toBe(true);
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ShowOnMobile from '../ShowOnMobile.svelte';
+describe('ShowOnMobile', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(ShowOnMobile);
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('applies block display and lg:hidden by default', () => {
+            const { container } = render(ShowOnMobile);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+        });
+    });
+    describe('breakpoint prop', () => {
+        it('applies sm:hidden for breakpoint="sm"', () => {
+            const { container } = render(ShowOnMobile, { breakpoint: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('sm:hidden')).toBe(true);
+        });
+        it('applies md:hidden for breakpoint="md"', () => {
+            const { container } = render(ShowOnMobile, { breakpoint: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('md:hidden')).toBe(true);
+        });
+        it('applies lg:hidden for breakpoint="lg"', () => {
+            const { container } = render(ShowOnMobile, { breakpoint: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+        });
+        it('applies xl:hidden for breakpoint="xl"', () => {
+            const { container } = render(ShowOnMobile, { breakpoint: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('xl:hidden')).toBe(true);
+        });
+    });
+    describe('display prop', () => {
+        it('applies block display by default', () => {
+            const { container } = render(ShowOnMobile);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+        });
+        it('applies flex display for display="flex"', () => {
+            const { container } = render(ShowOnMobile, { display: 'flex' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex')).toBe(true);
+        });
+        it('applies grid display for display="grid"', () => {
+            const { container } = render(ShowOnMobile, { display: 'grid' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('grid')).toBe(true);
+        });
+        it('applies inline display for display="inline"', () => {
+            const { container } = render(ShowOnMobile, { display: 'inline' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('inline')).toBe(true);
+        });
+        it('applies inline-block display for display="inline-block"', () => {
+            const { container } = render(ShowOnMobile, { display: 'inline-block' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('inline-block')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(ShowOnMobile, { 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(ShowOnMobile, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('block')).toBe(true);
+            expect(div?.classList.contains('lg:hidden')).toBe(true);
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,146 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Text from '../Text.svelte';
+describe('Text', () => {
+    describe('basic rendering', () => {
+        it('renders as a p element by default', () => {
+            const { container } = render(Text);
+            expect(container.querySelector('p')).toBeTruthy();
+        });
+        it('applies primary variant classes by default', () => {
+            const { container } = render(Text);
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-gray-900')).toBe(true);
+        });
+        it('applies base size class by default', () => {
+            const { container } = render(Text);
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-base')).toBe(true);
+        });
+    });
+    describe('variant prop', () => {
+        it('applies primary variant classes', () => {
+            const { container } = render(Text, { variant: 'primary' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-gray-900')).toBe(true);
+        });
+        it('applies secondary variant classes', () => {
+            const { container } = render(Text, { variant: 'secondary' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-gray-500')).toBe(true);
+        });
+        it('applies muted variant classes', () => {
+            const { container } = render(Text, { variant: 'muted' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-gray-400')).toBe(true);
+        });
+        it('applies error variant classes', () => {
+            const { container } = render(Text, { variant: 'error' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-red-600')).toBe(true);
+        });
+        it('applies success variant classes', () => {
+            const { container } = render(Text, { variant: 'success' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-green-600')).toBe(true);
+        });
+        it('applies warning variant classes', () => {
+            const { container } = render(Text, { variant: 'warning' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-yellow-600')).toBe(true);
+        });
+        it('applies info variant classes', () => {
+            const { container } = render(Text, { variant: 'info' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-blue-600')).toBe(true);
+        });
+    });
+    describe('size prop', () => {
+        it('applies text-xs for size="xs"', () => {
+            const { container } = render(Text, { size: 'xs' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-xs')).toBe(true);
+        });
+        it('applies text-sm for size="sm"', () => {
+            const { container } = render(Text, { size: 'sm' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-sm')).toBe(true);
+        });
+        it('applies text-lg for size="lg"', () => {
+            const { container } = render(Text, { size: 'lg' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-lg')).toBe(true);
+        });
+        it('applies text-xl for size="xl"', () => {
+            const { container } = render(Text, { size: 'xl' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-xl')).toBe(true);
+        });
+    });
+    describe('as prop', () => {
+        it('renders as p by default', () => {
+            const { container } = render(Text);
+            expect(container.querySelector('p')).toBeTruthy();
+        });
+        it('renders as span when as="span"', () => {
+            const { container } = render(Text, { as: 'span' });
+            expect(container.querySelector('span')).toBeTruthy();
+        });
+        it('renders as div when as="div"', () => {
+            const { container } = render(Text, { as: 'div' });
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('renders as label when as="label"', () => {
+            const { container } = render(Text, { as: 'label' });
+            expect(container.querySelector('label')).toBeTruthy();
+        });
+    });
+    describe('weight prop', () => {
+        it('applies font-normal by default', () => {
+            const { container } = render(Text);
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('font-normal')).toBe(true);
+        });
+        it('applies font-medium for weight="medium"', () => {
+            const { container } = render(Text, { weight: 'medium' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('font-medium')).toBe(true);
+        });
+        it('applies font-semibold for weight="semibold"', () => {
+            const { container } = render(Text, { weight: 'semibold' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('font-semibold')).toBe(true);
+        });
+        it('applies font-bold for weight="bold"', () => {
+            const { container } = render(Text, { weight: 'bold' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('font-bold')).toBe(true);
+        });
+    });
+    describe('truncate prop', () => {
+        it('does not apply truncate class by default', () => {
+            const { container } = render(Text);
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('truncate')).toBe(false);
+        });
+        it('applies truncate class when truncate=true', () => {
+            const { container } = render(Text, { truncate: true });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('truncate')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(Text, { class: 'custom-class' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('custom-class')).toBe(true);
+        });
+        it('preserves default classes when adding custom classes', () => {
+            const { container } = render(Text, { class: 'custom-class' });
+            const p = container.querySelector('p');
+            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-base')).toBe(true);
+            expect(p?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import TwoColumn from '../TwoColumn.svelte';
+describe('TwoColumn', () => {
+    describe('basic rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(TwoColumn);
+            expect(container.querySelector('div')).toBeTruthy();
+        });
+        it('applies flex class', () => {
+            const { container } = render(TwoColumn);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex')).toBe(true);
+        });
+        it('applies default gap-4', () => {
+            const { container } = render(TwoColumn);
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-4')).toBe(true);
+        });
+    });
+    describe('gap prop', () => {
+        it('applies gap-0 for gap="none"', () => {
+            const { container } = render(TwoColumn, { gap: 'none' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-0')).toBe(true);
+        });
+        it('applies gap-2 for gap="sm"', () => {
+            const { container } = render(TwoColumn, { gap: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-2')).toBe(true);
+        });
+        it('applies gap-4 for gap="md"', () => {
+            const { container } = render(TwoColumn, { gap: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies gap-6 for gap="lg"', () => {
+            const { container } = render(TwoColumn, { gap: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies gap-8 for gap="xl"', () => {
+            const { container } = render(TwoColumn, { gap: 'xl' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('gap-8')).toBe(true);
+        });
+    });
+    describe('stackAt prop', () => {
+        it('applies flex-col sm:flex-row for stackAt="sm"', () => {
+            const { container } = render(TwoColumn, { stackAt: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col')).toBe(true);
+            expect(div?.classList.contains('sm:flex-row')).toBe(true);
+        });
+        it('applies flex-col md:flex-row for stackAt="md"', () => {
+            const { container } = render(TwoColumn, { stackAt: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col')).toBe(true);
+            expect(div?.classList.contains('md:flex-row')).toBe(true);
+        });
+        it('applies flex-col lg:flex-row for stackAt="lg"', () => {
+            const { container } = render(TwoColumn, { stackAt: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col')).toBe(true);
+            expect(div?.classList.contains('lg:flex-row')).toBe(true);
+        });
+        it('applies only flex-row for stackAt="never"', () => {
+            const { container } = render(TwoColumn, { stackAt: 'never' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-row')).toBe(true);
+            expect(div?.classList.contains('flex-col')).toBe(false);
+        });
+    });
+    describe('reverseOnStack prop', () => {
+        it('applies flex-col-reverse with correct breakpoint for stackAt="sm"', () => {
+            const { container } = render(TwoColumn, { reverseOnStack: true, stackAt: 'sm' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col-reverse')).toBe(true);
+            expect(div?.classList.contains('sm:flex-row')).toBe(true);
+        });
+        it('applies flex-col-reverse with correct breakpoint for stackAt="md"', () => {
+            const { container } = render(TwoColumn, { reverseOnStack: true, stackAt: 'md' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col-reverse')).toBe(true);
+            expect(div?.classList.contains('md:flex-row')).toBe(true);
+        });
+        it('applies flex-col-reverse with correct breakpoint for stackAt="lg"', () => {
+            const { container } = render(TwoColumn, { reverseOnStack: true, stackAt: 'lg' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col-reverse')).toBe(true);
+            expect(div?.classList.contains('lg:flex-row')).toBe(true);
+        });
+        it('does not apply flex-col-reverse when stackAt="never"', () => {
+            const { container } = render(TwoColumn, { reverseOnStack: true, stackAt: 'never' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('flex-col-reverse')).toBe(false);
+            expect(div?.classList.contains('flex-row')).toBe(true);
+        });
+    });
+    describe('align prop', () => {
+        it('applies items-start for align="start"', () => {
+            const { container } = render(TwoColumn, { align: 'start' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('items-start')).toBe(true);
+        });
+        it('applies items-center for align="center"', () => {
+            const { container } = render(TwoColumn, { align: 'center' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('items-center')).toBe(true);
+        });
+        it('applies items-end for align="end"', () => {
+            const { container } = render(TwoColumn, { align: 'end' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('items-end')).toBe(true);
+        });
+        it('applies items-stretch for align="stretch"', () => {
+            const { container } = render(TwoColumn, { align: 'stretch' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('items-stretch')).toBe(true);
+        });
+    });
+    describe('class prop', () => {
+        it('applies custom classes', () => {
+            const { container } = render(TwoColumn, { class: 'custom-class' });
+            const div = container.querySelector('div');
+            expect(div?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+});