@getmicdrop/svelte-components 5.20.0 → 5.20.2

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

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/svelte';
+import { render, screen } from '@testing-library/svelte';
 import { expect, describe, test } from 'vitest';
 import Stack from './Stack.svelte';
 describe('Stack Component', () => {

package/dist/components/Layout/Stack.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import {
-    gapMap,
-    alignScale,
-    justifyScale,
-    type GapKey,
-    type AlignKey,
-    type JustifyKey,
-  } from '../../tokens/spacing';
-
-  type Direction = 'vertical' | 'horizontal';
-  type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
-
-  interface Props {
-    gap?: GapKey;
-    direction?: Direction;
-    align?: AlignKey;
-    justify?: JustifyKey;
-    wrap?: boolean;
-    as?: ElementType;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    gap = '4',
-    direction = 'vertical',
-    align,
-    justify,
-    wrap = false,
-    as = 'div',
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-
-  let classes = $derived([
-    'flex',
-    direction === 'vertical' ? 'flex-col' : 'flex-row',
-    gapMap[gap] || 'gap-4',
-    align ? alignScale[align] : '',
-    justify ? justifyScale[justify] : '',
-    wrap ? 'flex-wrap' : '',
-    className
-  ].filter(Boolean).join(' '));
-</script>
-
-<svelte:element this={as} class={classes} {...restProps}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    gapMap,
+    alignScale,
+    justifyScale,
+    type GapKey,
+    type AlignKey,
+    type JustifyKey,
+  } from '../../tokens/spacing';
+
+  type Direction = 'vertical' | 'horizontal';
+  type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
+
+  interface Props {
+    gap?: GapKey;
+    direction?: Direction;
+    align?: AlignKey;
+    justify?: JustifyKey;
+    wrap?: boolean;
+    as?: ElementType;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    gap = '4',
+    direction = 'vertical',
+    align,
+    justify,
+    wrap = false,
+    as = 'div',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let classes = $derived([
+    'flex',
+    direction === 'vertical' ? 'flex-col' : 'flex-row',
+    gapMap[gap] || 'gap-4',
+    align ? alignScale[align] : '',
+    justify ? justifyScale[justify] : '',
+    wrap ? 'flex-wrap' : '',
+    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

@@ -1,87 +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>
+<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/TwoColumn.svelte

@@ -1,108 +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>
+<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>