@getmicdrop/svelte-components 5.9.6 → 5.10.0

package/dist/components/Layout/Grid.svelte

@@ -1,101 +1,101 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { gapMap, type GapKey } from '../../tokens/spacing.js';
-
-  /**
-   * Grid - Responsive grid container with automatic column sizing
-   *
-   * Use Grid for laying out cards, stats, or any items in a responsive grid.
-   * Automatically stacks on mobile and expands on larger screens.
-   *
-   * @example Numeric gap
-   * <Grid cols="3" gap="6">
-   *   <StatsCard>Revenue</StatsCard>
-   *   <StatsCard>Users</StatsCard>
-   *   <StatsCard>Orders</StatsCard>
-   * </Grid>
-   *
-   * @example Semantic gap (recommended)
-   * <Grid cols="3" gap="section">
-   *   <Card>Card 1</Card>
-   *   <Card>Card 2</Card>
-   *   <Card>Card 3</Card>
-   * </Grid>
-   *
-   * @example Auto-fit columns
-   * <Grid cols="auto" minWidth="300px" gap="section">
-   *   {#each items as item}
-   *     <Card>{item.name}</Card>
-   *   {/each}
-   * </Grid>
-   *
-   * @example 12-column layout grid
-   * <Grid cols="12" gap="none">
-   *   <div class="col-span-4">Sidebar</div>
-   *   <div class="col-span-8">Content</div>
-   * </Grid>
-   *
-   * Semantic Gap Values (from tokens/spacing.ts):
-   *   - none:     0px       - No gap (for 12-col layouts)
-   *   - xs:       4px (1)   - Extra small gap
-   *   - sm:       8px (2)   - Small gap
-   *   - tight:    16px (4)  - Tight grid items (alias: md, content)
-   *   - standard: 24px (6)  - Standard grid items (alias: lg, section)
-   *   - spacious: 32px (8)  - Spacious grid items (alias: xl, layout)
-   */
-
-  interface Props {
-    /** Number of columns or 'auto' for auto-fit */
-    cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | 'auto';
-    /** Gap between grid items - semantic names or Tailwind spacing scale */
-    gap?: GapKey;
-    /** Minimum width for auto-fit columns (only used when cols='auto') */
-    minWidth?: string;
-    /** HTML element to render as */
-    as?: 'div' | 'section' | 'ul';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    cols = '3',
-    gap = '4',
-    minWidth = '280px',
-    as = 'div',
-    class: className = '',
-    children
-  }: Props = $props();
-
-  // Responsive column mappings - stack on mobile, expand on larger screens
-  const colsMap: Record<string, string> = {
-    '1': 'grid-cols-1',
-    '2': 'grid-cols-1 md:grid-cols-2',
-    '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
-    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
-    '12': 'grid-cols-12',
-    'auto': '' // Uses inline style
-  };
-
-  let gridStyle = $derived(
-    cols === 'auto'
-      ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));`
-      : ''
-  );
-
-  let classes = $derived(
-    [
-      'grid',
-      cols !== 'auto' ? colsMap[cols] : '',
-      gapMap[gap] || 'gap-4',
-      className
-    ].filter(Boolean).join(' ')
-  );
-</script>
-
-<svelte:element this={as} class={classes} style={gridStyle || undefined}>
-  {@render children?.()}
-</svelte:element>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { gapMap, type GapKey } from '../../tokens/spacing.js';
+
+  /**
+   * Grid - Responsive grid container with automatic column sizing
+   *
+   * Use Grid for laying out cards, stats, or any items in a responsive grid.
+   * Automatically stacks on mobile and expands on larger screens.
+   *
+   * @example Numeric gap
+   * <Grid cols="3" gap="6">
+   *   <StatsCard>Revenue</StatsCard>
+   *   <StatsCard>Users</StatsCard>
+   *   <StatsCard>Orders</StatsCard>
+   * </Grid>
+   *
+   * @example Semantic gap (recommended)
+   * <Grid cols="3" gap="section">
+   *   <Card>Card 1</Card>
+   *   <Card>Card 2</Card>
+   *   <Card>Card 3</Card>
+   * </Grid>
+   *
+   * @example Auto-fit columns
+   * <Grid cols="auto" minWidth="300px" gap="section">
+   *   {#each items as item}
+   *     <Card>{item.name}</Card>
+   *   {/each}
+   * </Grid>
+   *
+   * @example 12-column layout grid
+   * <Grid cols="12" gap="none">
+   *   <div class="col-span-4">Sidebar</div>
+   *   <div class="col-span-8">Content</div>
+   * </Grid>
+   *
+   * Semantic Gap Values (from tokens/spacing.ts):
+   *   - none:     0px       - No gap (for 12-col layouts)
+   *   - xs:       4px (1)   - Extra small gap
+   *   - sm:       8px (2)   - Small gap
+   *   - tight:    16px (4)  - Tight grid items (alias: md, content)
+   *   - standard: 24px (6)  - Standard grid items (alias: lg, section)
+   *   - spacious: 32px (8)  - Spacious grid items (alias: xl, layout)
+   */
+
+  interface Props {
+    /** Number of columns or 'auto' for auto-fit */
+    cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | 'auto';
+    /** Gap between grid items - semantic names or Tailwind spacing scale */
+    gap?: GapKey;
+    /** Minimum width for auto-fit columns (only used when cols='auto') */
+    minWidth?: string;
+    /** HTML element to render as */
+    as?: 'div' | 'section' | 'ul';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    cols = '3',
+    gap = '4',
+    minWidth = '280px',
+    as = 'div',
+    class: className = '',
+    children
+  }: Props = $props();
+
+  // Responsive column mappings - stack on mobile, expand on larger screens
+  const colsMap: Record<string, string> = {
+    '1': 'grid-cols-1',
+    '2': 'grid-cols-1 md:grid-cols-2',
+    '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
+    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    '12': 'grid-cols-12',
+    'auto': '' // Uses inline style
+  };
+
+  let gridStyle = $derived(
+    cols === 'auto'
+      ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));`
+      : ''
+  );
+
+  let classes = $derived(
+    [
+      'grid',
+      cols !== 'auto' ? colsMap[cols] : '',
+      gapMap[gap] || 'gap-4',
+      className
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+<svelte:element this={as} class={classes} style={gridStyle || undefined}>
+  {@render children?.()}
+</svelte:element>

package/dist/components/Layout/Heading.svelte

@@ -1,81 +1,81 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Level = 1 | 2 | 3 | 4 | 5 | 6;
-  type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-  type Variant = 'default' | 'muted' | 'primary';
-
-  interface Props {
-    /** Semantic heading level (1-6) */
-    level?: Level;
-    /** Visual size override (optional - defaults based on level) */
-    size?: Size;
-    /** Color variant */
-    variant?: Variant;
-    /** Font weight */
-    weight?: 'medium' | 'semibold' | 'bold';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-    /** Rest props */
-    [key: string]: unknown;
-  }
-
-  let {
-    level = 2,
-    size,
-    variant = 'default',
-    weight = 'semibold',
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-
-  // Default size mapping based on heading level
-  const levelToSize: Record<Level, Size> = {
-    1: '3xl',
-    2: '2xl',
-    3: 'xl',
-    4: 'lg',
-    5: 'base',
-    6: 'sm',
-  };
-
-  const sizeClasses: Record<Size, string> = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-  };
-
-  const variantClasses: Record<Variant, string> = {
-    default: 'text-gray-900 dark:text-white',
-    muted: 'text-gray-600 dark:text-gray-400',
-    primary: 'text-primary dark:text-primary',
-  };
-
-  const weightClasses: Record<string, string> = {
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-  };
-
-  let effectiveSize = $derived(size || levelToSize[level]);
-  let element = $derived(`h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
-
-  let classes = $derived([
-    sizeClasses[effectiveSize],
-    variantClasses[variant],
-    weightClasses[weight],
-    className,
-  ].filter(Boolean).join(' '));
-</script>
-
-<svelte:element this={element} class={classes} {...restProps}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Level = 1 | 2 | 3 | 4 | 5 | 6;
+  type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  type Variant = 'default' | 'muted' | 'primary';
+
+  interface Props {
+    /** Semantic heading level (1-6) */
+    level?: Level;
+    /** Visual size override (optional - defaults based on level) */
+    size?: Size;
+    /** Color variant */
+    variant?: Variant;
+    /** Font weight */
+    weight?: 'medium' | 'semibold' | 'bold';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+  }
+
+  let {
+    level = 2,
+    size,
+    variant = 'default',
+    weight = 'semibold',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Default size mapping based on heading level
+  const levelToSize: Record<Level, Size> = {
+    1: '3xl',
+    2: '2xl',
+    3: 'xl',
+    4: 'lg',
+    5: 'base',
+    6: 'sm',
+  };
+
+  const sizeClasses: Record<Size, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+  };
+
+  const variantClasses: Record<Variant, string> = {
+    default: 'text-gray-900 dark:text-white',
+    muted: 'text-gray-600 dark:text-gray-400',
+    primary: 'text-primary dark:text-primary',
+  };
+
+  const weightClasses: Record<string, string> = {
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  let effectiveSize = $derived(size || levelToSize[level]);
+  let element = $derived(`h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
+
+  let classes = $derived([
+    sizeClasses[effectiveSize],
+    variantClasses[variant],
+    weightClasses[weight],
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<svelte:element this={element} class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

package/dist/components/Layout/PageContainer.svelte

@@ -1,69 +1,69 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | 'full';
-  type Padding = 'none' | 'tight' | 'default' | 'spacious';
-
-  interface Props {
-    /** Maximum width of the container */
-    maxWidth?: MaxWidth;
-    /** Padding variant */
-    padding?: Padding;
-    /** Center the container */
-    center?: boolean;
-    /** Background color variant */
-    background?: 'none' | 'white' | 'gray';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-    /** Rest props */
-    [key: string]: unknown;
-  }
-
-  let {
-    maxWidth = 'full',
-    padding = 'default',
-    center = true,
-    background = 'none',
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const maxWidthClasses: Record<MaxWidth, string> = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    '2xl': 'max-w-2xl',
-    '4xl': 'max-w-4xl',
-    '6xl': 'max-w-6xl',
-    full: 'max-w-full',
-  };
-
-  const paddingClasses: Record<Padding, string> = {
-    none: '',
-    tight: 'px-2 py-2 md:px-4 md:py-4',
-    default: 'px-4 py-6 md:py-8',
-    spacious: 'px-4 py-8 md:px-6 md:py-12',
-  };
-
-  const backgroundClasses: Record<string, string> = {
-    none: '',
-    white: 'bg-white dark:bg-gray-900',
-    gray: 'bg-gray-50 dark:bg-gray-800',
-  };
-
-  let classes = $derived([
-    maxWidthClasses[maxWidth],
-    paddingClasses[padding],
-    backgroundClasses[background],
-    center ? 'mx-auto' : '',
-    className,
-  ].filter(Boolean).join(' '));
-</script>
-
-<div class={classes} {...restProps}>
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | 'full';
+  type Padding = 'none' | 'tight' | 'default' | 'spacious';
+
+  interface Props {
+    /** Maximum width of the container */
+    maxWidth?: MaxWidth;
+    /** Padding variant */
+    padding?: Padding;
+    /** Center the container */
+    center?: boolean;
+    /** Background color variant */
+    background?: 'none' | 'white' | 'gray';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+  }
+
+  let {
+    maxWidth = 'full',
+    padding = 'default',
+    center = true,
+    background = 'none',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const maxWidthClasses: Record<MaxWidth, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '4xl': 'max-w-4xl',
+    '6xl': 'max-w-6xl',
+    full: 'max-w-full',
+  };
+
+  const paddingClasses: Record<Padding, string> = {
+    none: '',
+    tight: 'px-2 py-2 md:px-4 md:py-4',
+    default: 'px-4 py-6 md:py-8',
+    spacious: 'px-4 py-8 md:px-6 md:py-12',
+  };
+
+  const backgroundClasses: Record<string, string> = {
+    none: '',
+    white: 'bg-white dark:bg-gray-900',
+    gray: 'bg-gray-50 dark:bg-gray-800',
+  };
+
+  let classes = $derived([
+    maxWidthClasses[maxWidth],
+    paddingClasses[padding],
+    backgroundClasses[background],
+    center ? 'mx-auto' : '',
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/components/Layout/Responsive.svelte

@@ -1,75 +1,75 @@
-<script lang="ts" module>
-  /**
-   * Responsive visibility components
-   *
-   * Usage:
-   * <ShowOnMobile>Mobile only content</ShowOnMobile>
-   * <ShowOnDesktop>Desktop only content</ShowOnDesktop>
-   * <HideOnMobile>Hidden on mobile</HideOnMobile>
-   * <HideOnDesktop>Hidden on desktop</HideOnDesktop>
-   */
-</script>
-
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
-  type Mode = 'show-mobile' | 'show-desktop' | 'hide-mobile' | 'hide-desktop';
-
-  interface Props {
-    /** Visibility mode */
-    mode: Mode;
-    /** Breakpoint for mobile/desktop boundary */
-    breakpoint?: Breakpoint;
-    /** Display type when visible */
-    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    mode,
-    breakpoint = 'lg',
-    display = 'block',
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const displayClasses: Record<string, string> = {
-    block: 'block',
-    flex: 'flex',
-    inline: 'inline',
-    'inline-block': 'inline-block',
-    grid: 'grid',
-  };
-
-  // Build responsive classes based on mode and breakpoint
-  function getResponsiveClasses(m: Mode, bp: Breakpoint, disp: string): string {
-    const dispClass = displayClasses[disp];
-
-    switch (m) {
-      case 'show-mobile':
-        // Show on mobile, hide on desktop
-        return `${dispClass} ${bp}:hidden`;
-      case 'show-desktop':
-        // Hide on mobile, show on desktop
-        return `hidden ${bp}:${dispClass}`;
-      case 'hide-mobile':
-        // Hide on mobile, show on desktop
-        return `hidden ${bp}:${dispClass}`;
-      case 'hide-desktop':
-        // Show on mobile, hide on desktop
-        return `${dispClass} ${bp}:hidden`;
-      default:
-        return dispClass;
-    }
-  }
-
-  let classes = $derived(`${getResponsiveClasses(mode, breakpoint, display)} ${className}`.trim());
-</script>
-
-<div class={classes}>
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts" module>
+  /**
+   * Responsive visibility components
+   *
+   * Usage:
+   * <ShowOnMobile>Mobile only content</ShowOnMobile>
+   * <ShowOnDesktop>Desktop only content</ShowOnDesktop>
+   * <HideOnMobile>Hidden on mobile</HideOnMobile>
+   * <HideOnDesktop>Hidden on desktop</HideOnDesktop>
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+  type Mode = 'show-mobile' | 'show-desktop' | 'hide-mobile' | 'hide-desktop';
+
+  interface Props {
+    /** Visibility mode */
+    mode: Mode;
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    mode,
+    breakpoint = 'lg',
+    display = 'block',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const displayClasses: Record<string, string> = {
+    block: 'block',
+    flex: 'flex',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    grid: 'grid',
+  };
+
+  // Build responsive classes based on mode and breakpoint
+  function getResponsiveClasses(m: Mode, bp: Breakpoint, disp: string): string {
+    const dispClass = displayClasses[disp];
+
+    switch (m) {
+      case 'show-mobile':
+        // Show on mobile, hide on desktop
+        return `${dispClass} ${bp}:hidden`;
+      case 'show-desktop':
+        // Hide on mobile, show on desktop
+        return `hidden ${bp}:${dispClass}`;
+      case 'hide-mobile':
+        // Hide on mobile, show on desktop
+        return `hidden ${bp}:${dispClass}`;
+      case 'hide-desktop':
+        // Show on mobile, hide on desktop
+        return `${dispClass} ${bp}:hidden`;
+      default:
+        return dispClass;
+    }
+  }
+
+  let classes = $derived(`${getResponsiveClasses(mode, breakpoint, display)} ${className}`.trim());
+</script>
+
+<div class={classes}>
+  {#if children}{@render children()}{/if}
+</div>