@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -1,180 +1,180 @@
-<script>
-  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
-  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
-  import { typography } from '../../tokens/typography';
-  import { formatEventDateTime, formatEventTime } from '../../datetime/format';
-
-  const defaultLabels = {
-    doorsOpen: 'Doors open',
-    ends: 'Ends',
-    moreShowtimes: 'More showtimes',
-    shareEvent: 'Share event',
-    allAges: 'All ages',
-    shareText: 'Check out {name} at {venue}!',
-  };
-
-  let {
-    event = {},
-    showtimes = [],
-    showTitle = true,
-    locale = 'en-US',
-    labels: userLabels = {},
-    formatDateTime = (dateStr) => {
-      if (!dateStr) return '';
-      // Use timezone-aware formatting if event has timeZone
-      if (event.timeZone) {
-        return formatEventDateTime(dateStr, event.timeZone);
-      }
-      const date = new Date(dateStr);
-      if (isNaN(date.getTime())) return dateStr;
-      return date.toLocaleDateString(locale, {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit'
-      });
-    },
-    formatTimeline = (timeStr) => {
-      if (!timeStr) return '';
-      // Use timezone-aware formatting if event has timeZone
-      if (event.timeZone) {
-        return formatEventTime(timeStr, event.timeZone);
-      }
-      const date = new Date(timeStr);
-      if (!isNaN(date.getTime())) {
-        return date.toLocaleTimeString(locale, {
-          hour: 'numeric',
-          minute: '2-digit',
-        });
-      }
-      return timeStr;
-    },
-    onShowtimeSelect,
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let selectedDate = $state(null);
-  let shareSuccess = $state(false);
-
-  function handleSelect(e) {
-    selectedDate = e.date;
-    onShowtimeSelect?.({ date: e.date, ...e });
-  }
-
-  async function handleShare() {
-    const shareData = {
-      title: event.name,
-      text: (labels.shareText || 'Check out {name} at {venue}!')
-        .replace('{name}', event.name)
-        .replace('{venue}', event.venue?.name || 'this venue'),
-      url: typeof window !== 'undefined' ? window.location.href : ''
-    };
-
-    try {
-      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
-        await navigator.share(shareData);
-      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
-        await navigator.clipboard.writeText(shareData.url);
-        shareSuccess = true;
-        setTimeout(() => {
-          shareSuccess = false;
-        }, 2000);
-      }
-    } catch (err) {
-      if (err.name !== 'AbortError' && typeof navigator !== 'undefined' && navigator.clipboard) {
-        try {
-          await navigator.clipboard.writeText(shareData.url);
-          shareSuccess = true;
-          setTimeout(() => {
-            shareSuccess = false;
-          }, 2000);
-        } catch {
-          // Silently fail — both share and clipboard copy failed
-        }
-      }
-    }
-  }
-</script>
-
-<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
-  {#if showTitle}
-    <div class="flex justify-between items-start gap-2 mb-4">
-      <h2 class="{typography.h2} flex-1 text-left">
-        {event.name || ''}
-      </h2>
-      <button
-        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
-        aria-label={labels.shareEvent}
-        onclick={handleShare}
-      >
-        {#if shareSuccess}
-          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
-        {:else}
-          <ShareOutline class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer" />
-        {/if}
-      </button>
-    </div>
-  {/if}
-
-  <div class="space-y-1">
-    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
-    {#if event.displayStartTime && event.doorsOpenTime}
-      <p class="{typography.smMuted}">{labels.doorsOpen} {formatTimeline(event.doorsOpenTime)}</p>
-    {/if}
-    {#if event.displayEndTime && event.endDateTime}
-      <p class="{typography.smMuted}">{labels.ends} {formatTimeline(event.endDateTime)}</p>
-    {/if}
-  </div>
-
-  {#if showtimes && showtimes.length > 1}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <p class="{typography.smMuted} mb-2">{labels.moreShowtimes}</p>
-      <div class="flex flex-wrap gap-2">
-        {#each showtimes as showtime}
-          <div class="w-24">
-            <ShowTimeCard
-              day={showtime.day}
-              date={showtime.date}
-              time={showtime.time}
-              isSelected={selectedDate === showtime.date}
-              onselect={handleSelect}
-            />
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
-  {#if event.venue}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <a
-        href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group block"
-      >
-        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
-          {event.venue.name}
-        </p>
-        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
-          {event.venue.address || ''}
-        </p>
-      </a>
-
-      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
-        <p class="{typography.smMuted} mt-2">
-          {#if event.ageRequirement != null}
-            {event.ageRequirement <= 1 ? labels.allAges : `${event.ageRequirement}+`}
-          {:else if event.minimumAge != null}
-            {event.minimumAge <= 1 ? labels.allAges : `${event.minimumAge}+`}
-          {:else if event.ageRestriction != null}
-            {event.ageRestriction <= 1 ? labels.allAges : `${event.ageRestriction}+`}
-          {/if}
-        </p>
-      {/if}
-    </div>
-  {/if}
-</div>
+<script>
+  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
+  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
+  import { typography } from '../../tokens/typography';
+  import { formatEventDateTime, formatEventTime } from '../../datetime/format';
+
+  const defaultLabels = {
+    doorsOpen: 'Doors open',
+    ends: 'Ends',
+    moreShowtimes: 'More showtimes',
+    shareEvent: 'Share event',
+    allAges: 'All ages',
+    shareText: 'Check out {name} at {venue}!',
+  };
+
+  let {
+    event = {},
+    showtimes = [],
+    showTitle = true,
+    locale = 'en-US',
+    labels: userLabels = {},
+    formatDateTime = (dateStr) => {
+      if (!dateStr) return '';
+      // Use timezone-aware formatting if event has timeZone
+      if (event.timeZone) {
+        return formatEventDateTime(dateStr, event.timeZone);
+      }
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return dateStr;
+      return date.toLocaleDateString(locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    },
+    formatTimeline = (timeStr) => {
+      if (!timeStr) return '';
+      // Use timezone-aware formatting if event has timeZone
+      if (event.timeZone) {
+        return formatEventTime(timeStr, event.timeZone);
+      }
+      const date = new Date(timeStr);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleTimeString(locale, {
+          hour: 'numeric',
+          minute: '2-digit',
+        });
+      }
+      return timeStr;
+    },
+    onShowtimeSelect,
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let selectedDate = $state(null);
+  let shareSuccess = $state(false);
+
+  function handleSelect(e) {
+    selectedDate = e.date;
+    onShowtimeSelect?.({ date: e.date, ...e });
+  }
+
+  async function handleShare() {
+    const shareData = {
+      title: event.name,
+      text: (labels.shareText || 'Check out {name} at {venue}!')
+        .replace('{name}', event.name)
+        .replace('{venue}', event.venue?.name || 'this venue'),
+      url: typeof window !== 'undefined' ? window.location.href : ''
+    };
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        await navigator.clipboard.writeText(shareData.url);
+        shareSuccess = true;
+        setTimeout(() => {
+          shareSuccess = false;
+        }, 2000);
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError' && typeof navigator !== 'undefined' && navigator.clipboard) {
+        try {
+          await navigator.clipboard.writeText(shareData.url);
+          shareSuccess = true;
+          setTimeout(() => {
+            shareSuccess = false;
+          }, 2000);
+        } catch {
+          // Silently fail — both share and clipboard copy failed
+        }
+      }
+    }
+  }
+</script>
+
+<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-border md: bg-card">
+  {#if showTitle}
+    <div class="flex justify-between items-start gap-2 mb-4">
+      <h2 class="{typography.h2} flex-1 text-left">
+        {event.name || ''}
+      </h2>
+      <button
+        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-muted relative"
+        aria-label={labels.shareEvent}
+        onclick={handleShare}
+      >
+        {#if shareSuccess}
+          <CheckOutline class="w-5 h-5 text-accent-success" />
+        {:else}
+          <ShareOutline class="w-5 h-5 text-muted-foreground hover:text-text-secondary cursor-pointer" />
+        {/if}
+      </button>
+    </div>
+  {/if}
+
+  <div class="space-y-1">
+    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
+    {#if event.displayStartTime && event.doorsOpenTime}
+      <p class="{typography.smMuted}">{labels.doorsOpen} {formatTimeline(event.doorsOpenTime)}</p>
+    {/if}
+    {#if event.displayEndTime && event.endDateTime}
+      <p class="{typography.smMuted}">{labels.ends} {formatTimeline(event.endDateTime)}</p>
+    {/if}
+  </div>
+
+  {#if showtimes && showtimes.length > 1}
+    <div class="mt-4 pt-4 border-t border-border">
+      <p class="{typography.smMuted} mb-2">{labels.moreShowtimes}</p>
+      <div class="flex flex-wrap gap-2">
+        {#each showtimes as showtime}
+          <div class="w-24">
+            <ShowTimeCard
+              day={showtime.day}
+              date={showtime.date}
+              time={showtime.time}
+              isSelected={selectedDate === showtime.date}
+              onselect={handleSelect}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if event.venue}
+    <div class="mt-4 pt-4 border-t border-border">
+      <a
+        href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group block"
+      >
+        <p class="{typography.label} transition-colors group-hover:text-brand-primary">
+          {event.venue.name}
+        </p>
+        <p class="{typography.smMuted} transition-colors group-hover:text-brand-primary">
+          {event.venue.address || ''}
+        </p>
+      </a>
+
+      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
+        <p class="{typography.smMuted} mt-2">
+          {#if event.ageRequirement != null}
+            {event.ageRequirement <= 1 ? labels.allAges : `${event.ageRequirement}+`}
+          {:else if event.minimumAge != null}
+            {event.minimumAge <= 1 ? labels.allAges : `${event.minimumAge}+`}
+          {:else if event.ageRestriction != null}
+            {event.ageRestriction <= 1 ? labels.allAges : `${event.ageRestriction}+`}
+          {/if}
+        </p>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/calendar/ShowTimeCard/ShowTimeCard.spec.js

@@ -106,13 +106,13 @@ describe('ShowTimeCard Component', () => {
     it('applies selected border class', () => {
       const { container } = render(ShowTimeCard, { props: { isSelected: true } });
       const card = container.querySelector('[role="button"]');
-      expect(card.className).toContain('border-blue-700');
+      expect(card.className).toContain('border-brand-primary');
     });
 
     it('applies unselected border class when not selected', () => {
       const { container } = render(ShowTimeCard, { props: { isSelected: false } });
       const card = container.querySelector('[role="button"]');
-      expect(card.className).toContain('border-gray-200');
+      expect(card.className).toContain('border-border');
     });
   });
 
@@ -225,7 +225,7 @@ describe('ShowTimeCard Component', () => {
     it('includes dark mode background', () => {
       const { container } = render(ShowTimeCard);
       const card = container.querySelector('[role="button"]');
-      expect(card.className).toContain('dark:bg-gray-800');
+      expect(card.className).toContain('');
     });
 
     it('applies selected text color when selected', () => {
@@ -235,7 +235,7 @@ describe('ShowTimeCard Component', () => {
       // Find the date span (middle one) which gets the selected color
       const spans = container.querySelectorAll('span');
       const dateSpan = spans[1]; // Second span is the date
-      expect(dateSpan.className).toContain('text-blue-700');
+      expect(dateSpan.className).toContain('text-brand-primary');
     });
   });
 });

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -1,80 +1,80 @@
-<script>
-  import { typography } from '../../tokens/typography';
-  import { formatEventTime, formatEventDate } from '../../datetime/format';
-
-  const defaultLabels = {
-    at: 'at',
-    selected: ', selected',
-  };
-
-  let {
-    day = '',
-    date = '',
-    time = '',
-    timezone = '',
-    isSelected = false,
-    onselect,
-    locale = 'en-US',
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  function handleCardClick() {
-    onselect?.({ date });
-  }
-
-  function handleKeydown(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleCardClick();
-    }
-  }
-
-  function formatHour(timeStr) {
-    if (!timeStr) return '';
-    // If we have an ISO string and timezone, use timezone-aware formatting
-    if (timezone && timeStr.includes('T')) {
-      return formatEventTime(timeStr, timezone);
-    }
-    // Fallback for HH:mm time strings
-    const d = new Date(`1970-01-01T${timeStr}`);
-    if (isNaN(d.getTime())) return timeStr;
-    return d.toLocaleTimeString(locale, {
-      hour: 'numeric',
-      minute: '2-digit',
-    });
-  }
-
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    // If we have timezone, use timezone-aware formatting
-    if (timezone) {
-      return formatEventDate(dateStr, timezone, { includeYear: false });
-    }
-    const d = new Date(dateStr);
-    if (isNaN(d.getTime())) return dateStr;
-    return d.toLocaleDateString(locale, {
-      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)} ${labels.at} ${formatHour(time)}${isSelected ? labels.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';
+  import { formatEventTime, formatEventDate } from '../../datetime/format';
+
+  const defaultLabels = {
+    at: 'at',
+    selected: ', selected',
+  };
+
+  let {
+    day = '',
+    date = '',
+    time = '',
+    timezone = '',
+    isSelected = false,
+    onselect,
+    locale = 'en-US',
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  function handleCardClick() {
+    onselect?.({ date });
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleCardClick();
+    }
+  }
+
+  function formatHour(timeStr) {
+    if (!timeStr) return '';
+    // If we have an ISO string and timezone, use timezone-aware formatting
+    if (timezone && timeStr.includes('T')) {
+      return formatEventTime(timeStr, timezone);
+    }
+    // Fallback for HH:mm time strings
+    const d = new Date(`1970-01-01T${timeStr}`);
+    if (isNaN(d.getTime())) return timeStr;
+    return d.toLocaleTimeString(locale, {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    // If we have timezone, use timezone-aware formatting
+    if (timezone) {
+      return formatEventDate(dateStr, timezone, { includeYear: false });
+    }
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    return d.toLocaleDateString(locale, {
+      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-card {isSelected
+    ? 'border-brand-primary'
+    : 'border-border hover:border-brand-primary'}"
+  onclick={handleCardClick}
+  onkeydown={handleKeydown}
+  tabindex="0"
+  role="button"
+  aria-label={`${day} ${formatDate(date)} ${labels.at} ${formatHour(time)}${isSelected ? labels.selected : ''}`}
+  aria-pressed={isSelected}
+>
+  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
+  <span class="{typography.label} text-base {isSelected ? 'text-brand-primary' : ''}">
+    {formatDate(date)}
+  </span>
+  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
+</div>

package/dist/calendar/index.js

@@ -1,15 +1,15 @@
-// =============================================================================
-// CALENDAR - Domain components (deferred migration to apps)
-// =============================================================================
-
-export { default as MiniMonthCalendar } from './Calendar/MiniMonthCalendar.svelte';
-// Legacy alias for backward compatibility - will be removed in future version
-export { default as Calendar } from './Calendar/MiniMonthCalendar.svelte';
-
-export { default as PublicCard } from './PublicCard/PublicCard.svelte';
-export { default as MonthSwitcher } from './MonthSwitcher/MonthSwitcher.svelte';
-export { default as OrderSummary } from './OrderSummary/OrderSummary.svelte';
-export { default as ShowCard } from './ShowCard/ShowCard.svelte';
-export { default as AboutShow } from './AboutShow/AboutShow.svelte';
-export { default as FAQs } from './FAQs/FAQs.svelte';
-export { default as ShowTimeCard } from './ShowTimeCard/ShowTimeCard.svelte';
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+
+export { default as MiniMonthCalendar } from './Calendar/MiniMonthCalendar.svelte';
+// Legacy alias for backward compatibility - will be removed in future version
+export { default as Calendar } from './Calendar/MiniMonthCalendar.svelte';
+
+export { default as PublicCard } from './PublicCard/PublicCard.svelte';
+export { default as MonthSwitcher } from './MonthSwitcher/MonthSwitcher.svelte';
+export { default as OrderSummary } from './OrderSummary/OrderSummary.svelte';
+export { default as ShowCard } from './ShowCard/ShowCard.svelte';
+export { default as AboutShow } from './AboutShow/AboutShow.svelte';
+export { default as FAQs } from './FAQs/FAQs.svelte';
+export { default as ShowTimeCard } from './ShowTimeCard/ShowTimeCard.svelte';