@getmicdrop/svelte-components 5.20.0 → 5.20.2

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -1,164 +1,164 @@
-<script>
-  import { typography } from '../../tokens/typography';
-  import { formatEventDate as formatDateTz, formatEventTime } from '../../datetime/format';
-
-  const defaultLabels = {
-    onSale: 'On Sale',
-    pressEnterToViewDetails: 'Press Enter to view details.',
-  };
-
-  let {
-    events = [],
-    view = "row",
-    placeholderImage = null,
-    onEventClick,
-    locale = 'en-US',
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  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);
-
-  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(event) {
-    // Prefer timezone-aware formatting via startDateTime + timeZone
-    if (event.startDateTime && event.timeZone) {
-      return formatDateTz(event.startDateTime, event.timeZone, { includeYear: false });
-    }
-    // Fallback for legacy event.date (YYYY-MM-DD)
-    if (!event.date) return '';
-    const [year, month, day] = event.date.split('-').map(Number);
-    const date = new Date(year, month - 1, day);
-    return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
-  }
-
-  function formatTime(event) {
-    if (event.startDateTime && event.timeZone) {
-      return formatEventTime(event.startDateTime, event.timeZone);
-    }
-    // Fallback for legacy event.timeline
-    if (event.timeline) return event.timeline.split("-")[0].trim();
-    return '';
-  }
-</script>
-
-{#each events as event}
-  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
-  <article
-    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
-      ? 'flex flex-col'
-      : 'grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-3 sm:gap-4 p-3 sm:p-4'}"
-    onclick={() => handleEventClick(event)}
-    onkeydown={(e) => handleKeydown(e, event)}
-    tabindex="0"
-    role="button"
-    aria-label={`${event.name}, ${event.status || labels.onSale}, ${formatEventDate(event)}. ${labels.pressEnterToViewDetails}`}
-  >
-    <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 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)}
-          {#if event.startDateTime || event.timeline}
-            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
-            {formatTime(event)}
-          {/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}
+<script>
+  import { typography } from '../../tokens/typography';
+  import { formatEventDate as formatDateTz, formatEventTime } from '../../datetime/format';
+
+  const defaultLabels = {
+    onSale: 'On Sale',
+    pressEnterToViewDetails: 'Press Enter to view details.',
+  };
+
+  let {
+    events = [],
+    view = "row",
+    placeholderImage = null,
+    onEventClick,
+    locale = 'en-US',
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  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);
+
+  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(event) {
+    // Prefer timezone-aware formatting via startDateTime + timeZone
+    if (event.startDateTime && event.timeZone) {
+      return formatDateTz(event.startDateTime, event.timeZone, { includeYear: false });
+    }
+    // Fallback for legacy event.date (YYYY-MM-DD)
+    if (!event.date) return '';
+    const [year, month, day] = event.date.split('-').map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
+  }
+
+  function formatTime(event) {
+    if (event.startDateTime && event.timeZone) {
+      return formatEventTime(event.startDateTime, event.timeZone);
+    }
+    // Fallback for legacy event.timeline
+    if (event.timeline) return event.timeline.split("-")[0].trim();
+    return '';
+  }
+</script>
+
+{#each events as event}
+  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+  <article
+    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
+      ? 'flex flex-col'
+      : 'grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-3 sm:gap-4 p-3 sm:p-4'}"
+    onclick={() => handleEventClick(event)}
+    onkeydown={(e) => handleKeydown(e, event)}
+    tabindex="0"
+    role="button"
+    aria-label={`${event.name}, ${event.status || labels.onSale}, ${formatEventDate(event)}. ${labels.pressEnterToViewDetails}`}
+  >
+    <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 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)}
+          {#if event.startDateTime || event.timeline}
+            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
+            {formatTime(event)}
+          {/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}