@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -1,75 +1,75 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    events = [],
-    view = "row",
-    placeholderImage = null,
-    onEventClick,
-  } = $props();
-
-  let isSmallScreen = $state(false);
-
-  const DEFAULT_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23e5e7eb' width='100' height='100'/%3E%3Cpath d='M50 25c-8.3 0-15 6.7-15 15v5c0 8.3 6.7 15 15 15s15-6.7 15-15v-5c0-8.3-6.7-15-15-15zm0 45c-13.8 0-25 5.6-25 12.5V90h50v-7.5c0-6.9-11.2-12.5-25-12.5z' fill='%239ca3af'/%3E%3C/svg%3E";
-
-  let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
-
-  let options = {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-  };
-
-  function handleResize() {
-    isSmallScreen = window.innerWidth < 768;
-  }
-
-  $effect(() => {
-    isSmallScreen = window.innerWidth < 768;
-    window.addEventListener("resize", handleResize);
-    return () => {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener("resize", handleResize);
-      }
-    };
-  });
-
-  function handleEventClick(event) {
-    onEventClick?.(event);
-  }
-
-  function handleKeydown(e, event) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleEventClick(event);
-    }
-  }
-
-  function getStatusBadgeClass(status) {
-    switch (status) {
-      case 'Sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
-      case 'Selling fast':
-        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
-      case 'Almost sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
-      default:
-        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
-    }
-  }
-
-  function shouldShowBadge(status) {
-    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
-  }
-
-  function formatEventDate(dateStr) {
-    if (!dateStr) return '';
-    const [year, month, day] = dateStr.split('-').map(Number);
-    const date = new Date(year, month - 1, day);
-    return date.toLocaleDateString("en-US", options);
-  }
-</script>
-
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    events = [],
+    view = "row",
+    placeholderImage = null,
+    onEventClick,
+  } = $props();
+
+  let isSmallScreen = $state(false);
+
+  const DEFAULT_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23e5e7eb' width='100' height='100'/%3E%3Cpath d='M50 25c-8.3 0-15 6.7-15 15v5c0 8.3 6.7 15 15 15s15-6.7 15-15v-5c0-8.3-6.7-15-15-15zm0 45c-13.8 0-25 5.6-25 12.5V90h50v-7.5c0-6.9-11.2-12.5-25-12.5z' fill='%239ca3af'/%3E%3C/svg%3E";
+
+  let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
+
+  let options = {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  };
+
+  function handleResize() {
+    isSmallScreen = window.innerWidth < 768;
+  }
+
+  $effect(() => {
+    isSmallScreen = window.innerWidth < 768;
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  });
+
+  function handleEventClick(event) {
+    onEventClick?.(event);
+  }
+
+  function handleKeydown(e, event) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleEventClick(event);
+    }
+  }
+
+  function getStatusBadgeClass(status) {
+    switch (status) {
+      case 'Sold out':
+        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      case 'Selling fast':
+        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+      case 'Almost sold out':
+        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      default:
+        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+    }
+  }
+
+  function shouldShowBadge(status) {
+    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
+  }
+
+  function formatEventDate(dateStr) {
+    if (!dateStr) return '';
+    const [year, month, day] = dateStr.split('-').map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.toLocaleDateString("en-US", options);
+  }
+</script>
+
 {#each events as event}
   <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
   <article
@@ -82,65 +82,65 @@
     role="button"
     aria-label={`${event.name}, ${event.status || 'On Sale'}, ${formatEventDate(event.date)}. Press Enter to view details.`}
   >
-    <div
-      class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
-        ? 'w-full aspect-[4/3] rounded-t-lg'
-        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg flex-shrink-0'}"
-    >
-      <img
-        src={event.image || placeholder}
-        alt={event.name}
-        class="object-contain w-full h-full"
-        loading="lazy"
-      />
-    </div>
-
-    <div
-      class="flex flex-col {view === 'col' ? 'p-3 gap-1' : 'gap-1.5 sm:gap-2 justify-center'}"
-    >
-      {#if view === "col" && event.status && shouldShowBadge(event.status)}
-        <span
-          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded absolute top-2 left-2 {getStatusBadgeClass(event.status)}"
-        >
-          {event.status}
-        </span>
-      {/if}
-
-      {#if view === "row" && event.status && shouldShowBadge(event.status)}
-        <span
-          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded {getStatusBadgeClass(event.status)}"
-        >
-          {event.status}
-        </span>
-      {/if}
-
-      <h4 class="{typography.h4} leading-tight line-clamp-2">
-        {event.name}
-      </h4>
-
-      <div
-        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
-      >
-        <span class="font-medium">
-          {formatEventDate(event.date)}
-          {#if event.timeline}
-            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
-            {event.timeline.split("-")[0].trim()}
-          {/if}
-        </span>
-      </div>
-
-      {#if view === "row" && event.description}
-        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
-          {event.description}
-        </p>
-      {/if}
-
-      {#if event.doorsTimeline && view === "row"}
-        <div class="{typography.xsMuted} text-xs">
-          {event.doorsTimeline}
-        </div>
-      {/if}
-    </div>
-  </article>
-{/each}
+    <div
+      class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
+        ? 'w-full aspect-[4/3] rounded-t-lg'
+        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg flex-shrink-0'}"
+    >
+      <img
+        src={event.image || placeholder}
+        alt={event.name}
+        class="object-contain w-full h-full"
+        loading="lazy"
+      />
+    </div>
+
+    <div
+      class="flex flex-col {view === 'col' ? 'p-3 gap-1' : 'gap-1.5 sm:gap-2 justify-center'}"
+    >
+      {#if view === "col" && event.status && shouldShowBadge(event.status)}
+        <span
+          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded absolute top-2 left-2 {getStatusBadgeClass(event.status)}"
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      {#if view === "row" && event.status && shouldShowBadge(event.status)}
+        <span
+          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded {getStatusBadgeClass(event.status)}"
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      <h4 class="{typography.h4} leading-tight line-clamp-2">
+        {event.name}
+      </h4>
+
+      <div
+        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
+      >
+        <span class="font-medium">
+          {formatEventDate(event.date)}
+          {#if event.timeline}
+            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
+            {event.timeline.split("-")[0].trim()}
+          {/if}
+        </span>
+      </div>
+
+      {#if view === "row" && event.description}
+        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
+          {event.description}
+        </p>
+      {/if}
+
+      {#if event.doorsTimeline && view === "row"}
+        <div class="{typography.xsMuted} text-xs">
+          {event.doorsTimeline}
+        </div>
+      {/if}
+    </div>
+  </article>
+{/each}

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -1,157 +1,157 @@
-<script>
-  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
-  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    event = {},
-    showtimes = [],
-    showTitle = true,
-    formatDateTime = (dateStr) => {
-      if (!dateStr) return '';
-      const date = new Date(dateStr);
-      if (isNaN(date.getTime())) return dateStr;
-      return date.toLocaleDateString('en-US', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit'
-      });
-    },
-    formatTimeline = (timeStr) => {
-      if (!timeStr) return '';
-      const date = new Date(timeStr);
-      if (!isNaN(date.getTime())) {
-        return date.toLocaleTimeString('en-US', {
-          hour: 'numeric',
-          minute: '2-digit',
-          hour12: true
-        });
-      }
-      return timeStr;
-    },
-    onShowtimeSelect,
-  } = $props();
-
-  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: `Check out ${event.name} at ${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 {
-          console.error('Share failed:', err);
-        }
-      }
-    }
-  }
-</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="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
-        aria-label="Share event"
-        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}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
-    {/if}
-    {#if event.displayEndTime && event.endDateTime}
-      <p class="{typography.smMuted}">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">More showtimes</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 ? 'All ages' : `${event.ageRequirement}+`}
-          {:else if event.minimumAge != null}
-            {event.minimumAge <= 1 ? 'All ages' : `${event.minimumAge}+`}
-          {:else if event.ageRestriction != null}
-            {event.ageRestriction <= 1 ? 'All ages' : `${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';
+
+  let {
+    event = {},
+    showtimes = [],
+    showTitle = true,
+    formatDateTime = (dateStr) => {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return dateStr;
+      return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    },
+    formatTimeline = (timeStr) => {
+      if (!timeStr) return '';
+      const date = new Date(timeStr);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleTimeString('en-US', {
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: true
+        });
+      }
+      return timeStr;
+    },
+    onShowtimeSelect,
+  } = $props();
+
+  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: `Check out ${event.name} at ${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 {
+          console.error('Share failed:', err);
+        }
+      }
+    }
+  }
+</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="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
+        aria-label="Share event"
+        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}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+    {/if}
+    {#if event.displayEndTime && event.endDateTime}
+      <p class="{typography.smMuted}">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">More showtimes</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 ? 'All ages' : `${event.ageRequirement}+`}
+          {:else if event.minimumAge != null}
+            {event.minimumAge <= 1 ? 'All ages' : `${event.minimumAge}+`}
+          {:else if event.ageRestriction != null}
+            {event.ageRestriction <= 1 ? 'All ages' : `${event.ageRestriction}+`}
+          {/if}
+        </p>
+      {/if}
+    </div>
+  {/if}
+</div>