@getmicdrop/svelte-components 5.17.3 → 5.17.4

package/dist/components/Layout/AppShell.svelte

@@ -1,104 +1,104 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Variant = 'admin' | 'performer' | 'public' | 'minimal';
-
-  interface Props {
-    /** Shell variant determines overall styling */
-    variant?: Variant;
-    /** Whether sidebar is collapsed (only for admin variant) */
-    sidebarCollapsed?: boolean;
-    /** Whether to show bottom navigation on mobile */
-    showBottomNav?: boolean;
-    /** Fixed header */
-    fixedHeader?: boolean;
-    /** Additional CSS classes for main content area */
-    class?: string;
-    /** Header slot */
-    header?: Snippet;
-    /** Sidebar slot (left side) */
-    sidebar?: Snippet;
-    /** Bottom navigation slot (mobile) */
-    bottomNav?: Snippet;
-    /** Main content */
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'admin',
-    sidebarCollapsed = false,
-    showBottomNav = true,
-    fixedHeader = true,
-    class: className = '',
-    header,
-    sidebar,
-    bottomNav,
-    children,
-  }: Props = $props();
-
-  // Background classes based on variant
-  const variantBackgrounds: Record<Variant, string> = {
-    admin: 'bg-gray-50 dark:bg-gray-800',
-    performer: 'bg-gray-50 dark:bg-gray-800',
-    public: 'bg-white dark:bg-gray-900',
-    minimal: 'bg-white dark:bg-gray-900',
-  };
-
-  // Sidebar width classes
-  const sidebarWidthExpanded = 'md:ml-64';
-  const sidebarWidthCollapsed = 'md:ml-20';
-
-  let mainMarginClass = $derived(
-    sidebar
-      ? sidebarCollapsed
-        ? sidebarWidthCollapsed
-        : sidebarWidthExpanded
-      : ''
-  );
-
-  let headerPadding = $derived(fixedHeader ? 'pt-16' : '');
-  let bottomPadding = $derived(showBottomNav && bottomNav ? 'pb-16 md:pb-0' : '');
-</script>
-
-<div class="min-h-screen {variantBackgrounds[variant]}">
-  <!-- Header -->
-  {#if header}
-    <header
-      class="w-full z-30"
-      class:fixed={fixedHeader}
-      class:top-0={fixedHeader}
-      class:left-0={fixedHeader}
-    >
-      {@render header()}
-    </header>
-  {/if}
-
-  <!-- Sidebar -->
-  {#if sidebar}
-    <aside
-      class="fixed top-0 left-0 z-20 h-screen transition-all duration-300 hidden md:block"
-      class:w-64={!sidebarCollapsed}
-      class:w-20={sidebarCollapsed}
-    >
-      {@render sidebar()}
-    </aside>
-  {/if}
-
-  <!-- Main Content -->
-  <main
-    class="transition-all duration-300 {headerPadding} {mainMarginClass} {bottomPadding} {className}"
-  >
-    <div class="{variantBackgrounds[variant]} min-h-screen">
-      {#if children}
-        {@render children()}
-      {/if}
-    </div>
-  </main>
-
-  <!-- Bottom Navigation (Mobile) -->
-  {#if showBottomNav && bottomNav}
-    <nav class="fixed bottom-0 left-0 right-0 z-30 md:hidden">
-      {@render bottomNav()}
-    </nav>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'admin' | 'performer' | 'public' | 'minimal';
+
+  interface Props {
+    /** Shell variant determines overall styling */
+    variant?: Variant;
+    /** Whether sidebar is collapsed (only for admin variant) */
+    sidebarCollapsed?: boolean;
+    /** Whether to show bottom navigation on mobile */
+    showBottomNav?: boolean;
+    /** Fixed header */
+    fixedHeader?: boolean;
+    /** Additional CSS classes for main content area */
+    class?: string;
+    /** Header slot */
+    header?: Snippet;
+    /** Sidebar slot (left side) */
+    sidebar?: Snippet;
+    /** Bottom navigation slot (mobile) */
+    bottomNav?: Snippet;
+    /** Main content */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'admin',
+    sidebarCollapsed = false,
+    showBottomNav = true,
+    fixedHeader = true,
+    class: className = '',
+    header,
+    sidebar,
+    bottomNav,
+    children,
+  }: Props = $props();
+
+  // Background classes based on variant
+  const variantBackgrounds: Record<Variant, string> = {
+    admin: 'bg-gray-50 dark:bg-gray-800',
+    performer: 'bg-gray-50 dark:bg-gray-800',
+    public: 'bg-white dark:bg-gray-900',
+    minimal: 'bg-white dark:bg-gray-900',
+  };
+
+  // Sidebar width classes
+  const sidebarWidthExpanded = 'md:ml-64';
+  const sidebarWidthCollapsed = 'md:ml-20';
+
+  let mainMarginClass = $derived(
+    sidebar
+      ? sidebarCollapsed
+        ? sidebarWidthCollapsed
+        : sidebarWidthExpanded
+      : ''
+  );
+
+  let headerPadding = $derived(fixedHeader ? 'pt-16' : '');
+  let bottomPadding = $derived(showBottomNav && bottomNav ? 'pb-16 md:pb-0' : '');
+</script>
+
+<div class="min-h-screen {variantBackgrounds[variant]}">
+  <!-- Header -->
+  {#if header}
+    <header
+      class="w-full z-30"
+      class:fixed={fixedHeader}
+      class:top-0={fixedHeader}
+      class:left-0={fixedHeader}
+    >
+      {@render header()}
+    </header>
+  {/if}
+
+  <!-- Sidebar -->
+  {#if sidebar}
+    <aside
+      class="fixed top-0 left-0 z-20 h-screen transition-all duration-300 hidden md:block"
+      class:w-64={!sidebarCollapsed}
+      class:w-20={sidebarCollapsed}
+    >
+      {@render sidebar()}
+    </aside>
+  {/if}
+
+  <!-- Main Content -->
+  <main
+    class="transition-all duration-300 {headerPadding} {mainMarginClass} {bottomPadding} {className}"
+  >
+    <div class="{variantBackgrounds[variant]} min-h-screen">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </main>
+
+  <!-- Bottom Navigation (Mobile) -->
+  {#if showBottomNav && bottomNav}
+    <nav class="fixed bottom-0 left-0 right-0 z-30 md:hidden">
+      {@render bottomNav()}
+    </nav>
+  {/if}
+</div>

package/dist/components/Layout/ContentSection.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Section title */
-    title?: string;
-    /** Optional subtitle */
-    subtitle?: string;
-    /** Heading level for the title (2-6) */
-    headingLevel?: 2 | 3 | 4 | 5 | 6;
-    /** Size variant for title */
-    titleSize?: 'sm' | 'base' | 'lg' | 'xl';
-    /** Spacing below the section */
-    spacing?: 'none' | 'sm' | 'md' | 'lg';
-    /** Additional CSS classes */
-    class?: string;
-    /** Action slot (buttons, links) */
-    actions?: Snippet;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    title = '',
-    subtitle = '',
-    headingLevel = 2,
-    titleSize = 'lg',
-    spacing = 'md',
-    class: className = '',
-    actions,
-    children,
-  }: Props = $props();
-
-  const titleSizeClasses = {
-    sm: 'text-base',
-    base: 'text-lg',
-    lg: 'text-xl',
-    xl: 'text-2xl',
-  };
-
-  const spacingClasses = {
-    none: '',
-    sm: 'mb-4',
-    md: 'mb-6',
-    lg: 'mb-8',
-  };
-
-  let headingElement = $derived(`h${headingLevel}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
-</script>
-
-<section class="{spacingClasses[spacing]} {className}">
-  {#if title || actions}
-    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
-      <div>
-        {#if title}
-          <svelte:element
-            this={headingElement}
-            class="{titleSizeClasses[titleSize]} font-semibold text-gray-900 dark:text-white"
-          >
-            {title}
-          </svelte:element>
-        {/if}
-        {#if subtitle}
-          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            {subtitle}
-          </p>
-        {/if}
-      </div>
-      {#if actions}
-        <div class="flex items-center gap-3 shrink-0">
-          {@render actions()}
-        </div>
-      {/if}
-    </div>
-  {/if}
-
-  {#if children}
-    {@render children()}
-  {/if}
-</section>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Section title */
+    title?: string;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Heading level for the title (2-6) */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Size variant for title */
+    titleSize?: 'sm' | 'base' | 'lg' | 'xl';
+    /** Spacing below the section */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    class?: string;
+    /** Action slot (buttons, links) */
+    actions?: Snippet;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    subtitle = '',
+    headingLevel = 2,
+    titleSize = 'lg',
+    spacing = 'md',
+    class: className = '',
+    actions,
+    children,
+  }: Props = $props();
+
+  const titleSizeClasses = {
+    sm: 'text-base',
+    base: 'text-lg',
+    lg: 'text-xl',
+    xl: 'text-2xl',
+  };
+
+  const spacingClasses = {
+    none: '',
+    sm: 'mb-4',
+    md: 'mb-6',
+    lg: 'mb-8',
+  };
+
+  let headingElement = $derived(`h${headingLevel}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
+</script>
+
+<section class="{spacingClasses[spacing]} {className}">
+  {#if title || actions}
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
+      <div>
+        {#if title}
+          <svelte:element
+            this={headingElement}
+            class="{titleSizeClasses[titleSize]} font-semibold text-gray-900 dark:text-white"
+          >
+            {title}
+          </svelte:element>
+        {/if}
+        {#if subtitle}
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            {subtitle}
+          </p>
+        {/if}
+      </div>
+      {#if actions}
+        <div class="flex items-center gap-3 shrink-0">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+</section>

package/dist/components/Layout/Grid.svelte

@@ -95,7 +95,7 @@
     ].filter(Boolean).join(' ')
   );
 </script>
-
-<svelte:element this={as} class={classes} style={gridStyle || undefined}>
-  {@render children?.()}
-</svelte:element>
+
+<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>