@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/PublicCard/PublicCard.svelte

@@ -0,0 +1,267 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+
+  export let events = [];
+  export let view = "row"; // 'row' for list view, 'col' for gallery view
+  export let placeholderImage = null; // Allow custom placeholder
+
+  const dispatch = createEventDispatcher();
+  let isSmallScreen = false;
+
+  // Default placeholder image for events without images
+  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";
+
+  $: placeholder = placeholderImage || DEFAULT_PLACEHOLDER;
+
+  let options = {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  };
+
+  onMount(() => {
+    isSmallScreen = window.innerWidth < 768;
+    window.addEventListener("resize", handleResize);
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener("resize", handleResize);
+    }
+  });
+
+  function handleResize() {
+    isSmallScreen = window.innerWidth < 768;
+  }
+
+  function handleEventClick(event) {
+    dispatch("eventClick", event);
+  }
+
+  function handleKeydown(e, event) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleEventClick(event);
+    }
+  }
+
+  function getStatusBadgeClass(status) {
+    switch (status) {
+      case 'Sold out':
+        return 'badge-sold-out';
+      case 'Selling fast':
+        return 'badge-selling-fast';
+      case 'Almost sold out':
+        return 'badge-almost-sold-out';
+      default:
+        return '';
+    }
+  }
+
+  // Only show badges for urgency statuses (not "On Sale" which is the default state)
+  function shouldShowBadge(status) {
+    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
+  }
+
+  function formatEventDate(dateStr) {
+    if (!dateStr) return '';
+    // Parse as local date (not UTC)
+    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}
+  <article
+    class={`event-card rounded-lg cursor-pointer overflow-hidden bg-bg-primary border border-stroke-secondary transition-all duration-200 hover:shadow-lg hover:border-stroke-primary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 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"
+    }`}
+    on:click={() => handleEventClick(event)}
+    on:keydown={(e) => handleKeydown(e, event)}
+    tabindex="0"
+    role="button"
+    aria-label={`${event.name}, ${event.status || 'On Sale'}, ${formatEventDate(event.date)}. Press Enter to view details.`}
+  >
+    <!-- Event Image -->
+    <div
+      class={`bg-bg-secondary flex items-center justify-center overflow-hidden ${
+        view === "col"
+          ? "w-full aspect-[4/3] rounded-t-lg"
+          : "w-[100px] h-[100px] sm:w-[160px] sm:h-[120px] rounded-lg flex-shrink-0"
+      }`}
+    >
+      <img
+        src={event.image || placeholder}
+        alt={event.name}
+        class="object-contain w-full h-full"
+        loading="lazy"
+      />
+    </div>
+
+    <!-- Event Details -->
+    <div
+      class={`flex flex-col ${
+        view === "col" ? "p-3 gap-1" : "gap-1.5 sm:gap-2 justify-center"
+      }`}
+    >
+      <!-- Status Badge for gallery view - positioned over image -->
+      {#if view === "col" && event.status && shouldShowBadge(event.status)}
+        <span
+          class={`status-badge ${getStatusBadgeClass(event.status)} absolute top-2 left-2`}
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      <!-- Status Badge for list view - inline -->
+      {#if view === "row" && event.status && shouldShowBadge(event.status)}
+        <span
+          class={`status-badge ${getStatusBadgeClass(event.status)}`}
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      <!-- Event Name -->
+      <h3
+        class={`font-semibold text-text-primary leading-tight ${
+          view === "col"
+            ? "text-sm sm:text-base line-clamp-2"
+            : "text-sm sm:text-lg line-clamp-2"
+        }`}
+      >
+        {event.name}
+      </h3>
+
+      <!-- Date & Time -->
+      <div
+        class={`text-text-secondary ${
+          view === "col" ? "text-xs" : "text-xs sm:text-sm"
+        }`}
+      >
+        <span class="font-medium">
+          {formatEventDate(event.date)}
+          {#if event.timeline}
+            <span class="text-text-tertiary">•</span>
+            {event.timeline.split("-")[0].trim()}
+          {/if}
+        </span>
+      </div>
+
+      <!-- Description (list view only) -->
+      {#if view === "row" && event.description}
+        <p class="text-text-tertiary text-xs sm:text-sm line-clamp-2 mt-1">
+          {event.description}
+        </p>
+      {/if}
+
+      <!-- Doors time (if available) -->
+      {#if event.doorsTimeline && view === "row"}
+        <div class="text-[10px] sm:text-xs text-text-tertiary">
+          {event.doorsTimeline}
+        </div>
+      {/if}
+    </div>
+  </article>
+{/each}
+
+<style>
+  /* Event card base styles */
+  .event-card {
+    background-color: hsl(var(--BG-Primary));
+    border-color: hsl(var(--Stroke-Secondary));
+    transition: all 0.2s ease-in-out;
+  }
+
+  .event-card:hover {
+    transform: translateY(-2px);
+    border-color: hsl(var(--Stroke-Primary));
+  }
+
+  .event-card:active {
+    transform: translateY(0);
+  }
+
+  /* Text colors using CSS variables */
+  .text-text-primary {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .text-text-secondary {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .text-text-tertiary {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .bg-bg-secondary {
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  /* Status badge base styles - compact inline pill */
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    width: -moz-fit-content;
+    width: fit-content;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.4;
+    border-radius: 4px;
+  }
+
+  @media (min-width: 640px) {
+    .status-badge {
+      font-size: 12px;
+      padding: 3px 10px;
+    }
+  }
+
+  /* Status badge variants using CSS variables */
+  .badge-selling-fast {
+    background-color: hsl(var(--Status-SellingFast) / 0.15);
+    color: hsl(var(--Status-SellingFast));
+  }
+
+  .badge-sold-out {
+    background-color: hsl(var(--Status-SoldOut) / 0.15);
+    color: hsl(var(--Status-SoldOut));
+  }
+
+  .badge-almost-sold-out {
+    background-color: hsl(var(--Status-SoldOut) / 0.15);
+    color: hsl(var(--Status-SoldOut));
+  }
+
+  /* Line clamping for text truncation */
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .event-card {
+      transition: none;
+    }
+
+    .event-card:hover {
+      transform: none;
+    }
+  }
+
+  /* Mobile optimizations */
+  @media (max-width: 640px) {
+    .event-card {
+      -webkit-tap-highlight-color: transparent;
+    }
+  }
+</style>

package/dist/components/{pages/performers/AvailabilityCalendarModal.svelte.d.ts → PublicCard/PublicCard.svelte.d.ts}

@@ -1,23 +1,21 @@
-export default AvailabilityCalendarModal;
-type AvailabilityCalendarModal = SvelteComponent<{
-    onClose?: (() => void) | undefined;
-    show?: boolean | undefined;
-    venue?: null | undefined;
-    onUpdate?: ((updatedTimestamp: any) => void) | undefined;
+export default PublicCard;
+type PublicCard = SvelteComponent<{
+    view?: string | undefined;
+    events?: any[] | undefined;
+    placeholderImage?: null | undefined;
 }, {
-    click: PointerEvent;
+    eventClick: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const AvailabilityCalendarModal: $$__sveltets_2_IsomorphicComponent<{
-    onClose?: (() => void) | undefined;
-    show?: boolean | undefined;
-    venue?: null | undefined;
-    onUpdate?: ((updatedTimestamp: any) => void) | undefined;
+declare const PublicCard: $$__sveltets_2_IsomorphicComponent<{
+    view?: string | undefined;
+    events?: any[] | undefined;
+    placeholderImage?: null | undefined;
 }, {
-    click: PointerEvent;
+    eventClick: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
@@ -34,4 +32,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-//# sourceMappingURL=AvailabilityCalendarModal.svelte.d.ts.map
+//# sourceMappingURL=PublicCard.svelte.d.ts.map

package/dist/components/PublicCard/PublicCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AAoKA;;;;;;;;mBAA4J;6CAT/G,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/ShowCard/ShowCard.svelte

@@ -0,0 +1,240 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import Share from 'carbon-icons-svelte/lib/Share.svelte';
+  import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
+  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
+
+  export let event = {};
+  export let showtimes = [];
+  export let showTitle = true;
+
+  // Formatting functions - can be overridden via props
+  export let 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'
+    });
+  };
+
+  export let formatTimeline = (timeStr) => {
+    if (!timeStr) return '';
+    // Handle ISO datetime or time string
+    const date = new Date(timeStr);
+    if (!isNaN(date.getTime())) {
+      return date.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true
+      });
+    }
+    return timeStr;
+  };
+
+  const dispatch = createEventDispatcher();
+
+  let selectedDate = null;
+  let shareSuccess = false;
+
+  function handleSelect(e) {
+    selectedDate = e.detail.date;
+    dispatch('showtimeSelect', e.detail);
+  }
+
+  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 {
+      // Use Web Share API if available (mobile devices, some desktop browsers)
+      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        // Fallback: copy URL to clipboard
+        await navigator.clipboard.writeText(shareData.url);
+        shareSuccess = true;
+        setTimeout(() => {
+          shareSuccess = false;
+        }, 2000);
+      }
+    } catch (err) {
+      // User cancelled share or error occurred - try clipboard as last resort
+      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="show-card h-fit rounded-[8px] sm:px-5 py-4 md:border">
+  <!-- Event Title -->
+  {#if showTitle}
+    <div class="flex justify-between items-start gap-2 mb-4">
+      <h1 class="event-title flex-1 text-left font-semibold text-[22px] leading-tight">
+        {event.name || ''}
+      </h1>
+      <button
+        class="share-btn flex-shrink-0 p-2 rounded-lg transition-colors relative"
+        aria-label="Share event"
+        on:click={handleShare}
+      >
+        {#if shareSuccess}
+          <Checkmark size={20} class="success-icon" />
+        {:else}
+          <Share size={20} class="share-icon cursor-pointer" />
+        {/if}
+      </button>
+    </div>
+  {/if}
+
+  <!-- Date & Time -->
+  <div class="space-y-1 text-[15px]">
+    <p class="date-primary font-medium">{formatDateTime(event.startDateTime)}</p>
+    {#if event.displayStartTime && event.doorsOpenTime}
+      <p class="date-secondary">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+    {/if}
+    {#if event.displayEndTime && event.endDateTime}
+      <p class="date-secondary">Ends {formatTimeline(event.endDateTime)}</p>
+    {/if}
+  </div>
+
+  {#if showtimes && showtimes.length > 1}
+    <div class="showtimes-section mt-4 pt-4">
+      <p class="showtimes-label text-sm mb-2">More showtimes</p>
+      <div class="flex flex-wrap gap-2">
+        {#each showtimes as showtime}
+          <div class="w-[91px]">
+            <ShowTimeCard
+              day={showtime.day}
+              date={showtime.date}
+              time={showtime.time}
+              isSelected={selectedDate === showtime.date}
+              on:select={handleSelect}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Location -->
+  {#if event.venue}
+    <div class="location-section mt-4 pt-4">
+      <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="venue-name text-[15px] font-medium transition-colors">
+          {event.venue.name}
+        </p>
+        <p class="venue-address text-[14px] transition-colors">
+          {event.venue.address || ''}
+        </p>
+      </a>
+
+      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
+        <p class="age-text text-[14px] 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>
+
+<style>
+  /* Theme-responsive colors using CSS variables */
+  .show-card {
+    background-color: hsl(var(--BG-Primary));
+  }
+
+  @media (min-width: 768px) {
+    .show-card {
+      border-color: hsl(var(--Stroke-Secondary));
+    }
+  }
+
+  .event-title {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .share-btn:hover {
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  :global(.share-icon) {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  :global(.share-icon:hover) {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  :global(.success-icon) {
+    color: hsl(var(--Status-OnSale));
+  }
+
+  .date-primary {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .date-secondary {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .showtimes-section {
+    border-top: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .showtimes-label {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .location-section {
+    border-top: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .venue-name {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .group:hover .venue-name {
+    color: hsl(var(--Brand-Primary));
+  }
+
+  .venue-address {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .group:hover .venue-address {
+    color: hsl(var(--Brand-Primary));
+  }
+
+  .age-text {
+    color: hsl(var(--Text-Tartiary));
+  }
+</style>

package/dist/components/ShowCard/ShowCard.svelte.d.ts

@@ -0,0 +1,39 @@
+export default ShowCard;
+type ShowCard = SvelteComponent<{
+    event?: {} | undefined;
+    showtimes?: any[] | undefined;
+    showTitle?: boolean | undefined;
+    formatDateTime?: ((dateStr: any) => any) | undefined;
+    formatTimeline?: ((timeStr: any) => any) | undefined;
+}, {
+    showtimeSelect: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ShowCard: $$__sveltets_2_IsomorphicComponent<{
+    event?: {} | undefined;
+    showtimes?: any[] | undefined;
+    showTitle?: boolean | undefined;
+    formatDateTime?: ((dateStr: any) => any) | undefined;
+    formatTimeline?: ((timeStr: any) => any) | undefined;
+}, {
+    showtimeSelect: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=ShowCard.svelte.d.ts.map

package/dist/components/ShowCard/ShowCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA8KA;;;;;;;;;;mBAAyL;6CAT5I,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/ShowTimeCard/ShowTimeCard.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let day = '';
+  export let date = '';
+  export let time = '';
+  export let isSelected = false;
+
+  const dispatch = createEventDispatcher();
+
+  function handleCardClick() {
+    dispatch('select', { date });
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleCardClick();
+    }
+  }
+
+  function formatHour(timeStr) {
+    if (!timeStr) return '';
+    // Handle various time formats
+    const date = new Date(`1970-01-01T${timeStr}`);
+    if (isNaN(date.getTime())) return timeStr;
+    return date.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="showtime-card w-full h-[106px] rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors"
+  class:selected={isSelected}
+  on:click={handleCardClick}
+  on:keydown={handleKeydown}
+  tabindex="0"
+  role="button"
+  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
+  aria-pressed={isSelected}
+>
+  <span class="day-text font-medium text-sm">{day}</span>
+  <span class="date-text font-medium text-[16px]" class:selected-text={isSelected}>
+    {formatDate(date)}
+  </span>
+  <span class="time-text font-medium text-sm">{formatHour(time)}</span>
+</div>
+
+<style>
+  /* Theme-responsive colors using CSS variables */
+  .showtime-card {
+    background-color: hsl(var(--BG-Primary));
+    border-color: hsl(var(--Stroke-Secondary));
+  }
+
+  .showtime-card:hover {
+    border-color: hsl(var(--Brand-Primary));
+  }
+
+  .showtime-card.selected {
+    border-color: hsl(var(--Brand-Primary));
+  }
+
+  .day-text {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .date-text {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .date-text.selected-text {
+    color: hsl(var(--Brand-Primary));
+  }
+
+  .time-text {
+    color: hsl(var(--Text-Tartiary));
+  }
+</style>