@getmicdrop/svelte-components 5.3.12 → 5.3.13

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/Layout/Grid.svelte

@@ -1,109 +1,109 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  /**
-   * 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>
-   *
-   * Semantic Gap Values (Flowbite/8px grid):
-   *   - tight:    16px (4)  - Tight grid items
-   *   - standard: 24px (6)  - Standard grid items (default)
-   *   - spacious: 32px (8)  - Spacious grid items
-   */
-
-  interface Props {
-    /** Number of columns or 'auto' for auto-fit */
-    cols?: '1' | '2' | '3' | '4' | '6' | 'auto';
-    /** Gap between grid items - semantic names or Tailwind spacing scale */
-    gap?: 'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8';
-    /** 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();
-
-  // Semantic gap names for grids
-  const semanticGapMap: Record<string, string> = {
-    'tight': 'gap-4',      // 16px - Tight grid items
-    'standard': 'gap-6',   // 24px - Standard grid items
-    'spacious': 'gap-8',   // 32px - Spacious grid items
-  };
-
-  // Numeric gap values (backwards compatible)
-  const numericGapMap: Record<string, string> = {
-    '0': 'gap-0',
-    '2': 'gap-2',
-    '3': 'gap-3',
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8'
-  };
-
-  // Combined map
-  const gapMap: Record<string, string> = { ...numericGapMap, ...semanticGapMap };
-
-  // 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',
-    '6': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
-    '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';
+
+  /**
+   * 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>
+   *
+   * Semantic Gap Values (Flowbite/8px grid):
+   *   - tight:    16px (4)  - Tight grid items
+   *   - standard: 24px (6)  - Standard grid items (default)
+   *   - spacious: 32px (8)  - Spacious grid items
+   */
+
+  interface Props {
+    /** Number of columns or 'auto' for auto-fit */
+    cols?: '1' | '2' | '3' | '4' | '6' | 'auto';
+    /** Gap between grid items - semantic names or Tailwind spacing scale */
+    gap?: 'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8';
+    /** 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();
+
+  // Semantic gap names for grids
+  const semanticGapMap: Record<string, string> = {
+    'tight': 'gap-4',      // 16px - Tight grid items
+    'standard': 'gap-6',   // 24px - Standard grid items
+    'spacious': 'gap-8',   // 32px - Spacious grid items
+  };
+
+  // Numeric gap values (backwards compatible)
+  const numericGapMap: Record<string, string> = {
+    '0': 'gap-0',
+    '2': 'gap-2',
+    '3': 'gap-3',
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8'
+  };
+
+  // Combined map
+  const gapMap: Record<string, string> = { ...numericGapMap, ...semanticGapMap };
+
+  // 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',
+    '6': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    '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/Section.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { typography } from '../../tokens/typography';
-
-  /**
-   * Section - Semantic section wrapper with optional title
-   *
-   * Use Section to group related content with consistent spacing.
-   * Provides proper HTML5 semantics with <section> element.
-   *
-   * @example
-   * <Section title="Recent Orders">
-   *   <OrdersTable />
-   * </Section>
-   *
-   * @example
-   * <Section>
-   *   <Chart />
-   * </Section>
-   */
-
-  interface Props {
-    /** Section title (optional) */
-    title?: string;
-    /** Title size */
-    titleSize?: 'sm' | 'md' | 'lg';
-    /** Gap between title and content */
-    gap?: '2' | '3' | '4' | '6';
-    /** Additional CSS classes for the section */
-    class?: string;
-    /** Additional CSS classes for the title */
-    titleClass?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    title = '',
-    titleSize = 'md',
-    gap = '4',
-    class: className = '',
-    titleClass = '',
-    children
-  }: Props = $props();
-
-  const titleSizeMap: Record<string, string> = {
-    sm: typography.h4,
-    md: typography.h3,
-    lg: typography.h2
-  };
-
-  const gapMap: Record<string, string> = {
-    '2': 'space-y-2',
-    '3': 'space-y-3',
-    '4': 'space-y-4',
-    '6': 'space-y-6'
-  };
-
-  let sectionClasses = $derived(
-    [
-      title ? gapMap[gap] || 'space-y-4' : '',
-      className
-    ].filter(Boolean).join(' ')
-  );
-
-  let titleClasses = $derived(
-    [
-      titleSizeMap[titleSize] || titleSizeMap.md,
-      titleClass
-    ].filter(Boolean).join(' ')
-  );
-</script>
-
-<section class={sectionClasses} aria-label={title || undefined}>
-  {#if title}
-    <h2 class={titleClasses}>{title}</h2>
-  {/if}
-
-  {@render children?.()}
-</section>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { typography } from '../../tokens/typography';
+
+  /**
+   * Section - Semantic section wrapper with optional title
+   *
+   * Use Section to group related content with consistent spacing.
+   * Provides proper HTML5 semantics with <section> element.
+   *
+   * @example
+   * <Section title="Recent Orders">
+   *   <OrdersTable />
+   * </Section>
+   *
+   * @example
+   * <Section>
+   *   <Chart />
+   * </Section>
+   */
+
+  interface Props {
+    /** Section title (optional) */
+    title?: string;
+    /** Title size */
+    titleSize?: 'sm' | 'md' | 'lg';
+    /** Gap between title and content */
+    gap?: '2' | '3' | '4' | '6';
+    /** Additional CSS classes for the section */
+    class?: string;
+    /** Additional CSS classes for the title */
+    titleClass?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    titleSize = 'md',
+    gap = '4',
+    class: className = '',
+    titleClass = '',
+    children
+  }: Props = $props();
+
+  const titleSizeMap: Record<string, string> = {
+    sm: typography.h4,
+    md: typography.h3,
+    lg: typography.h2
+  };
+
+  const gapMap: Record<string, string> = {
+    '2': 'space-y-2',
+    '3': 'space-y-3',
+    '4': 'space-y-4',
+    '6': 'space-y-6'
+  };
+
+  let sectionClasses = $derived(
+    [
+      title ? gapMap[gap] || 'space-y-4' : '',
+      className
+    ].filter(Boolean).join(' ')
+  );
+
+  let titleClasses = $derived(
+    [
+      titleSizeMap[titleSize] || titleSizeMap.md,
+      titleClass
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+<section class={sectionClasses} aria-label={title || undefined}>
+  {#if title}
+    <h2 class={titleClasses}>{title}</h2>
+  {/if}
+
+  {@render children?.()}
+</section>