@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/components/Layout/Sidebar.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  /**
-   * Sidebar - Main content with sidebar layout
-   *
-   * Use Sidebar for pages that have a main content area plus a sidebar.
-   * Common patterns: dashboard stats on right, filters on left, etc.
-   *
-   * @example
-   * <Sidebar sidebar={sidebarContent}>
-   *   <div>Main content here</div>
-   * </Sidebar>
-   *
-   * {#snippet sidebarContent()}
-   *   <StatsCard />
-   * {/snippet}
-   *
-   * @example
-   * <Sidebar sidebarPosition="left" sidebarWidth="narrow" sidebar={filters}>
-   *   <Table />
-   * </Sidebar>
-   */
-
-  interface Props {
-    /**
-     * Sidebar width preset
-     * - narrow: ~25% (col-span-3 of 12)
-     * - medium: ~30% (col-span-4 of 12)
-     * - wide: ~40% (col-span-5 of 12)
-     */
-    sidebarWidth?: 'narrow' | 'medium' | 'wide';
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right';
-    /** Gap between main and sidebar */
-    gap?: '4' | '6' | '8';
-    /** Stack vertically on mobile */
-    stackOnMobile?: boolean;
-    /** Additional CSS classes */
-    class?: string;
-    /** Main content */
-    children?: Snippet;
-    /** Sidebar content (named snippet) */
-    sidebar?: Snippet;
-  }
-
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    gap = '6',
-    stackOnMobile = true,
-    class: className = '',
-    children,
-    sidebar
-  }: Props = $props();
-
-  const gapMap: Record<string, string> = {
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8'
-  };
-
-  // Using 12-column grid for flexibility
-  // Main content gets remaining columns
-  const sidebarWidthMap: Record<string, { sidebar: string; main: string }> = {
-    narrow: { sidebar: 'lg:col-span-3', main: 'lg:col-span-9' },
-    medium: { sidebar: 'lg:col-span-4', main: 'lg:col-span-8' },
-    wide: { sidebar: 'lg:col-span-5', main: 'lg:col-span-7' }
-  };
-
-  let widthConfig = $derived(sidebarWidthMap[sidebarWidth] || sidebarWidthMap.medium);
-
-  let containerClasses = $derived(
-    [
-      'grid',
-      stackOnMobile ? 'grid-cols-1' : '',
-      'lg:grid-cols-12',
-      gapMap[gap] || 'gap-6',
-      className
-    ].filter(Boolean).join(' ')
-  );
-
-  let mainClasses = $derived(
-    [
-      'col-span-1',
-      widthConfig.main,
-      sidebarPosition === 'left' ? 'lg:order-2' : 'lg:order-1'
-    ].filter(Boolean).join(' ')
-  );
-
-  let sidebarClasses = $derived(
-    [
-      'col-span-1',
-      widthConfig.sidebar,
-      sidebarPosition === 'left' ? 'lg:order-1' : 'lg:order-2'
-    ].filter(Boolean).join(' ')
-  );
-</script>
-
-<div class={containerClasses}>
-  <div class={mainClasses}>
-    {@render children?.()}
-  </div>
-
-  <aside class={sidebarClasses}>
-    {@render sidebar?.()}
-  </aside>
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Sidebar - Main content with sidebar layout
+   *
+   * Use Sidebar for pages that have a main content area plus a sidebar.
+   * Common patterns: dashboard stats on right, filters on left, etc.
+   *
+   * @example
+   * <Sidebar sidebar={sidebarContent}>
+   *   <div>Main content here</div>
+   * </Sidebar>
+   *
+   * {#snippet sidebarContent()}
+   *   <StatsCard />
+   * {/snippet}
+   *
+   * @example
+   * <Sidebar sidebarPosition="left" sidebarWidth="narrow" sidebar={filters}>
+   *   <Table />
+   * </Sidebar>
+   */
+
+  interface Props {
+    /**
+     * Sidebar width preset
+     * - narrow: ~25% (col-span-3 of 12)
+     * - medium: ~30% (col-span-4 of 12)
+     * - wide: ~40% (col-span-5 of 12)
+     */
+    sidebarWidth?: 'narrow' | 'medium' | 'wide';
+    /** Sidebar position */
+    sidebarPosition?: 'left' | 'right';
+    /** Gap between main and sidebar */
+    gap?: '4' | '6' | '8';
+    /** Stack vertically on mobile */
+    stackOnMobile?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Main content */
+    children?: Snippet;
+    /** Sidebar content (named snippet) */
+    sidebar?: Snippet;
+  }
+
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    gap = '6',
+    stackOnMobile = true,
+    class: className = '',
+    children,
+    sidebar
+  }: Props = $props();
+
+  const gapMap: Record<string, string> = {
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8'
+  };
+
+  // Using 12-column grid for flexibility
+  // Main content gets remaining columns
+  const sidebarWidthMap: Record<string, { sidebar: string; main: string }> = {
+    narrow: { sidebar: 'lg:col-span-3', main: 'lg:col-span-9' },
+    medium: { sidebar: 'lg:col-span-4', main: 'lg:col-span-8' },
+    wide: { sidebar: 'lg:col-span-5', main: 'lg:col-span-7' }
+  };
+
+  let widthConfig = $derived(sidebarWidthMap[sidebarWidth] || sidebarWidthMap.medium);
+
+  let containerClasses = $derived(
+    [
+      'grid',
+      stackOnMobile ? 'grid-cols-1' : '',
+      'lg:grid-cols-12',
+      gapMap[gap] || 'gap-6',
+      className
+    ].filter(Boolean).join(' ')
+  );
+
+  let mainClasses = $derived(
+    [
+      'col-span-1',
+      widthConfig.main,
+      sidebarPosition === 'left' ? 'lg:order-2' : 'lg:order-1'
+    ].filter(Boolean).join(' ')
+  );
+
+  let sidebarClasses = $derived(
+    [
+      'col-span-1',
+      widthConfig.sidebar,
+      sidebarPosition === 'left' ? 'lg:order-1' : 'lg:order-2'
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+<div class={containerClasses}>
+  <div class={mainClasses}>
+    {@render children?.()}
+  </div>
+
+  <aside class={sidebarClasses}>
+    {@render sidebar?.()}
+  </aside>
+</div>

package/dist/components/Layout/Stack.spec.js

@@ -25,9 +25,9 @@ describe('Stack Component', () => {
         });
     });
     describe('Gap - Semantic Names', () => {
-        test('tight gap (4px)', () => {
+        test('tight gap (16px)', () => {
             const { container } = render(Stack, { gap: 'tight' });
-            expect(container.querySelector('div')).toHaveClass('gap-1');
+            expect(container.querySelector('div')).toHaveClass('gap-4');
         });
         test('compact gap (6px)', () => {
             const { container } = render(Stack, { gap: 'compact' });

package/dist/components/Layout/Stack.svelte

@@ -35,7 +35,7 @@
     children,
     ...restProps
   }: Props = $props();
-
+
   let classes = $derived([
     'flex',
     direction === 'vertical' ? 'flex-col' : 'flex-row',
@@ -45,8 +45,8 @@
     wrap ? 'flex-wrap' : '',
     className
   ].filter(Boolean).join(' '));
-</script>
-
-<svelte:element this={as} class={classes} {...restProps}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
+</script>
+
+<svelte:element this={as} class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

package/dist/components/Layout/Text.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'primary' | 'secondary' | 'muted' | 'error' | 'success' | 'warning' | 'info';
+  type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+  type ElementType = 'p' | 'span' | 'div' | 'label';
+
+  interface Props {
+    /** Text color variant */
+    variant?: Variant;
+    /** Font size */
+    size?: Size;
+    /** HTML element to render */
+    as?: ElementType;
+    /** Font weight */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Leading/line-height */
+    leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+    /** Truncate text with ellipsis */
+    truncate?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'primary',
+    size = 'base',
+    as = 'p',
+    weight = 'normal',
+    leading = 'normal',
+    truncate = false,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const variantClasses: Record<Variant, string> = {
+    primary: 'text-gray-900 dark:text-white',
+    secondary: 'text-gray-500 dark:text-gray-400',
+    muted: 'text-gray-400 dark:text-gray-500',
+    error: 'text-red-600 dark:text-red-500',
+    success: 'text-green-600 dark:text-green-500',
+    warning: 'text-yellow-600 dark:text-yellow-500',
+    info: 'text-blue-600 dark:text-blue-500',
+  };
+
+  const sizeClasses: Record<Size, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+  };
+
+  const weightClasses: Record<string, string> = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  const leadingClasses: Record<string, string> = {
+    none: 'leading-none',
+    tight: 'leading-tight',
+    snug: 'leading-snug',
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose',
+  };
+
+  let classes = $derived([
+    variantClasses[variant],
+    sizeClasses[size],
+    weightClasses[weight],
+    leadingClasses[leading],
+    truncate ? 'truncate' : '',
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<svelte:element this={as} class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary' | 'muted' | 'error' | 'success' | 'warning' | 'info';
+type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+type ElementType = 'p' | 'span' | 'div' | 'label';
+interface Props {
+    /** Text color variant */
+    variant?: Variant;
+    /** Font size */
+    size?: Size;
+    /** HTML element to render */
+    as?: ElementType;
+    /** Font weight */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Leading/line-height */
+    leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+    /** Truncate text with ellipsis */
+    truncate?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;
+//# sourceMappingURL=Text.svelte.d.ts.map

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__/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__/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":""}