@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -1,61 +1,61 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    day = '',
-    date = '',
-    time = '',
-    isSelected = false,
-    onselect,
-  } = $props();
-
-  function handleCardClick() {
-    onselect?.({ date });
-  }
-
-  function handleKeydown(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleCardClick();
-    }
-  }
-
-  function formatHour(timeStr) {
-    if (!timeStr) return '';
-    const d = new Date(`1970-01-01T${timeStr}`);
-    if (isNaN(d.getTime())) return timeStr;
-    return d.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-  }
-
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const d = new Date(dateStr);
-    if (isNaN(d.getTime())) return dateStr;
-    return d.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    });
-  }
-</script>
-
-<div
-  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
-    ? 'border-blue-700 dark:border-blue-500'
-    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
-  onclick={handleCardClick}
-  onkeydown={handleKeydown}
-  tabindex="0"
-  role="button"
-  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
-  aria-pressed={isSelected}
->
-  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
-  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
-    {formatDate(date)}
-  </span>
-  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
-</div>
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    day = '',
+    date = '',
+    time = '',
+    isSelected = false,
+    onselect,
+  } = $props();
+
+  function handleCardClick() {
+    onselect?.({ date });
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleCardClick();
+    }
+  }
+
+  function formatHour(timeStr) {
+    if (!timeStr) return '';
+    const d = new Date(`1970-01-01T${timeStr}`);
+    if (isNaN(d.getTime())) return timeStr;
+    return d.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+</script>
+
+<div
+  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
+    ? 'border-blue-700 dark:border-blue-500'
+    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
+  onclick={handleCardClick}
+  onkeydown={handleKeydown}
+  tabindex="0"
+  role="button"
+  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
+  aria-pressed={isSelected}
+>
+  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
+  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
+    {formatDate(date)}
+  </span>
+  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
+</div>

package/dist/components/Heading.spec.d.ts

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

package/dist/components/Heading.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.spec.d.ts","sourceRoot":"","sources":["../../src/lib/components/Heading.spec.js"],"names":[],"mappings":""}

package/dist/components/Heading.spec.js

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Heading from './Heading.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Heading', () => {
+  test('renders h2 by default', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('Title') } });
+    expect(container.querySelector('h2')).toBeInTheDocument();
+    expect(container.textContent).toContain('Title');
+  });
+
+  test('renders h1 when level=1', () => {
+    const { container } = render(Heading, { props: { level: 1, children: textSnippet('H1') } });
+    expect(container.querySelector('h1')).toBeInTheDocument();
+  });
+
+  test('renders h3 when level=3', () => {
+    const { container } = render(Heading, { props: { level: 3, children: textSnippet('H3') } });
+    expect(container.querySelector('h3')).toBeInTheDocument();
+  });
+
+  test('renders h4 when level=4', () => {
+    const { container } = render(Heading, { props: { level: 4, children: textSnippet('H4') } });
+    expect(container.querySelector('h4')).toBeInTheDocument();
+  });
+
+  test('renders h5 when level=5', () => {
+    const { container } = render(Heading, { props: { level: 5, children: textSnippet('H5') } });
+    expect(container.querySelector('h5')).toBeInTheDocument();
+  });
+
+  test('renders h6 when level=6', () => {
+    const { container } = render(Heading, { props: { level: 6, children: textSnippet('H6') } });
+    expect(container.querySelector('h6')).toBeInTheDocument();
+  });
+
+  test('default size is lg', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('Test') } });
+    expect(container.querySelector('h2')).toHaveClass('text-lg');
+  });
+
+  test('size xs', () => {
+    const { container } = render(Heading, { props: { size: 'xs', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('text-xs');
+  });
+
+  test('size 3xl', () => {
+    const { container } = render(Heading, { props: { size: '3xl', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('text-3xl');
+  });
+
+  test('weight bold', () => {
+    const { container } = render(Heading, { props: { weight: 'bold', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('font-bold');
+  });
+
+  test('weight semibold', () => {
+    const { container } = render(Heading, { props: { weight: 'semibold', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('font-semibold');
+  });
+
+  test('no weight class when not provided', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('T') } });
+    const h2 = container.querySelector('h2');
+    expect(h2.className).not.toContain('font-');
+  });
+
+  test('passes id prop', () => {
+    const { container } = render(Heading, { props: { id: 'my-heading', children: textSnippet('T') } });
+    expect(container.querySelector('#my-heading')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Heading, { props: { class: 'custom', children: textSnippet('T') } });
+    expect(container.querySelector('h2')).toHaveClass('custom');
+  });
+
+  test('has dark mode text class', () => {
+    const { container } = render(Heading, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('h2').className).toContain('dark:text-white');
+  });
+});

package/dist/components/Heading.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-    class?: string;
-    id?: string;
-    children: Snippet;
-  }
-
-  let {
-    level = 2,
-    size = 'lg',
-    weight,
-    class: className = '',
-    id,
-    children,
-  }: Props = $props();
-
-  const sizeClasses: Record<string, string> = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    md: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-  };
-
-  const weightClasses: Record<string, string> = {
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-  };
-
-  const baseClasses = 'text-gray-900 dark:text-white';
-  let sizeClass = $derived(sizeClasses[size] || 'text-lg');
-  let weightClass = $derived(weight ? weightClasses[weight] : '');
-  let classes = $derived(`${baseClasses} ${sizeClass} ${weightClass} ${className}`.trim());
-</script>
-
-{#if level === 1}
-  <h1 {id} class={classes}>{@render children()}</h1>
-{:else if level === 2}
-  <h2 {id} class={classes}>{@render children()}</h2>
-{:else if level === 3}
-  <h3 {id} class={classes}>{@render children()}</h3>
-{:else if level === 4}
-  <h4 {id} class={classes}>{@render children()}</h4>
-{:else if level === 5}
-  <h5 {id} class={classes}>{@render children()}</h5>
-{:else}
-  <h6 {id} class={classes}>{@render children()}</h6>
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    class?: string;
+    id?: string;
+    children: Snippet;
+  }
+
+  let {
+    level = 2,
+    size = 'lg',
+    weight,
+    class: className = '',
+    id,
+    children,
+  }: Props = $props();
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+  };
+
+  const weightClasses: Record<string, string> = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  const baseClasses = 'text-gray-900 dark:text-white';
+  let sizeClass = $derived(sizeClasses[size] || 'text-lg');
+  let weightClass = $derived(weight ? weightClasses[weight] : '');
+  let classes = $derived(`${baseClasses} ${sizeClass} ${weightClass} ${className}`.trim());
+</script>
+
+{#if level === 1}
+  <h1 {id} class={classes}>{@render children()}</h1>
+{:else if level === 2}
+  <h2 {id} class={classes}>{@render children()}</h2>
+{:else if level === 3}
+  <h3 {id} class={classes}>{@render children()}</h3>
+{:else if level === 4}
+  <h4 {id} class={classes}>{@render children()}</h4>
+{:else if level === 5}
+  <h5 {id} class={classes}>{@render children()}</h5>
+{:else}
+  <h6 {id} class={classes}>{@render children()}</h6>
+{/if}

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>