@getmicdrop/svelte-components 3.1.0 → 4.0.0

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6xBA;;;;;;;;;;;;;;;;;mBAAwR;6CAT3O,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/calendar/FAQs/FAQs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA0FA;;;;;kBAb4B,MAAM;gBAAU,MAAM;;;;mBAawG;6CAT7G,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/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -0,0 +1,128 @@
+<script>
+  import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
+
+  // Use LOCAL time, not UTC - consistent with how calendar displays dates
+  const today = new Date();
+  const todayLocalMonth = today.getMonth();
+  const todayLocalYear = today.getFullYear();
+
+  export let currentYear = todayLocalYear;
+  export let currentMonth = todayLocalMonth;
+  export let handleNext = () => {};
+  export let handlePrev = () => {};
+  export let handleToday = () => {}; // Navigate back to current month
+  export let disablePastNavigation = true; // Prevent navigating to past months by default
+
+  $: isAtCurrentMonth =
+    currentYear === todayLocalYear && currentMonth === todayLocalMonth;
+
+  $: canGoPrev = !disablePastNavigation || !isAtCurrentMonth;
+
+  // Track pressed state for touch animations
+  let prevPressed = false;
+  let nextPressed = false;
+  let todayPressed = false;
+
+  // Haptic feedback for mobile
+  function triggerHaptic(style = 'light') {
+    if (typeof window === 'undefined') return;
+
+    // iOS WebKit
+    if (window.webkit?.messageHandlers?.haptic) {
+      window.webkit.messageHandlers.haptic.postMessage(style);
+      return;
+    }
+
+    // Taptic Engine
+    if (window.TapticEngine) {
+      window.TapticEngine.impact({ style });
+      return;
+    }
+
+    // Android fallback
+    if (navigator.vibrate) {
+      navigator.vibrate(style === 'light' ? 10 : 20);
+    }
+  }
+
+  function handlePrevClick() {
+    if (canGoPrev) {
+      triggerHaptic('light');
+      handlePrev();
+    }
+  }
+
+  function handleNextClick() {
+    triggerHaptic('light');
+    handleNext();
+  }
+
+  function handleTodayClick() {
+    triggerHaptic('light');
+    handleToday();
+  }
+</script>
+
+<header class="w-full flex items-center justify-between select-none">
+  <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">
+    {new Intl.DateTimeFormat("en", {
+      month: "long",
+    }).format(new Date(currentYear, currentMonth, 1))}
+  </h2>
+  <div class="flex items-center gap-2">
+    <button
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      class:scale-90={prevPressed}
+      class:bg-gray-100={prevPressed}
+      class:dark:bg-gray-700={prevPressed}
+      class:text-gray-900={prevPressed}
+      class:dark:text-white={prevPressed}
+      on:click={handlePrevClick}
+      on:touchstart={() => prevPressed = true}
+      on:touchend={() => prevPressed = false}
+      on:touchcancel={() => prevPressed = false}
+      on:mousedown={() => prevPressed = true}
+      on:mouseup={() => prevPressed = false}
+      on:mouseleave={() => prevPressed = false}
+      disabled={!canGoPrev}
+      aria-label="Previous month"
+    >
+      <ChevronLeftOutline class="w-5 h-5" />
+    </button>
+    <button
+      class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400"
+      class:scale-95={todayPressed}
+      class:bg-blue-700={todayPressed}
+      class:text-white={todayPressed}
+      on:click={handleTodayClick}
+      on:touchstart={() => todayPressed = true}
+      on:touchend={() => todayPressed = false}
+      on:touchcancel={() => todayPressed = false}
+      on:mousedown={() => todayPressed = true}
+      on:mouseup={() => todayPressed = false}
+      on:mouseleave={() => todayPressed = false}
+      disabled={isAtCurrentMonth}
+      aria-label="Go to current month"
+    >
+      Today
+    </button>
+    <button
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+      class:scale-90={nextPressed}
+      class:bg-gray-100={nextPressed}
+      class:dark:bg-gray-700={nextPressed}
+      class:text-gray-900={nextPressed}
+      class:dark:text-white={nextPressed}
+      on:click={handleNextClick}
+      on:touchstart={() => nextPressed = true}
+      on:touchend={() => nextPressed = false}
+      on:touchcancel={() => nextPressed = false}
+      on:mousedown={() => nextPressed = true}
+      on:mouseup={() => nextPressed = false}
+      on:mouseleave={() => nextPressed = false}
+      aria-label="Next month"
+    >
+      <ChevronRightOutline class="w-5 h-5" />
+    </button>
+  </div>
+</header>

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAoGA;;;;;;;;;mBAAyN;6CAT5K,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/calendar/OrderSummary/OrderSummary.svelte

@@ -0,0 +1,352 @@
+<script>
+  import { fly, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { createEventDispatcher } from 'svelte';
+  import { ChevronDownOutline, CloseOutline } from '../../primitives/Icons';
+  import Spinner from '../../primitives/Spinner/Spinner.svelte';
+
+  export let loading = false;
+  export let quantities = {};
+  export let eventTickets = [];
+
+  export let checkoutTicket = null;
+  export let isAgreed = true;
+  export let btnText = 'Checkout';
+  export let promoApplied = false;
+  export let promoDiscount = 0;
+  export let currentPromoRule = null;
+
+  export let executePurchase = null;
+  export let elements = null;
+
+  export let venueServiceCharge = {
+    serviceFeeCents: 0,
+    serviceFeePercentage: 0,
+    serviceFeeChargeType: 'both', // 'both', 'percent', or 'flat'
+    maxServiceFeeCents: 0, // 0 means no cap
+    taxPercentage: 0, // Default 0% - only charge tax if venue has set it
+  };
+
+  $: feeFor = price => {
+    const chargeType = venueServiceCharge.serviceFeeChargeType || 'both';
+    let fee = 0;
+
+    // Calculate fee based on charge type
+    if (chargeType === 'flat' || chargeType === 'both') {
+      fee += (venueServiceCharge.serviceFeeCents || 0) / 100;
+    }
+    if (chargeType === 'percent' || chargeType === 'both') {
+      fee += ((venueServiceCharge.serviceFeePercentage || 0) / 100) * price;
+    }
+
+    // Apply max cap if set (convert from cents to dollars for comparison)
+    const maxFee = venueServiceCharge.maxServiceFeeCents || 0;
+    if (maxFee > 0 && fee > maxFee / 100) {
+      fee = maxFee / 100;
+    }
+
+    return fee;
+  };
+
+  const dispatch = createEventDispatcher();
+
+  let showFooter = false;
+  let subtotal = 0;
+  let fees = 0;
+  let taxes = 0;
+  let total = 0;
+  let showOrderSummaryOnMobile = false;
+
+  function makeOrderSummaryVisible() {
+    showOrderSummaryOnMobile = !showOrderSummaryOnMobile;
+  }
+
+  // Calculate discounted price for a ticket
+  $: getDiscountedPrice = (ticket) => {
+    if (!currentPromoRule?.provideDiscount) return null;
+
+    // Check if this discount applies to this specific ticket
+    // If discountTicketIds is empty or not provided, discount applies to all tickets
+    // If discountTicketIds has values, only apply to those specific ticket IDs
+    const discountTicketIds = currentPromoRule.discountTicketIds || [];
+    if (discountTicketIds.length > 0 && !discountTicketIds.includes(ticket.ID)) {
+      return null; // This ticket is not eligible for the discount
+    }
+
+    const basePrice = parseFloat(ticket.price) || 0;
+    const discountAmount = parseFloat(currentPromoRule?.amount || '0') || 0;
+    if (currentPromoRule.discountType === '%') {
+      return (basePrice * (1 - discountAmount / 100)).toFixed(2);
+    } else if (currentPromoRule.discountType === '$') {
+      return Math.max(0, basePrice - discountAmount).toFixed(2);
+    }
+    return null;
+  };
+
+  $: showFooter = totalQuantity > 0;
+
+  // Calculate subtotal without any discounts (for calculating savings)
+  $: subtotalWithoutDiscount = Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket) return acc;
+    return acc + quantities[key] * ticket.price;
+  }, 0);
+
+  // Calculate subtotal with discounts applied
+  $: subtotal = Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket) return acc;
+    const discountedPrice = getDiscountedPrice(ticket);
+    const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
+    return acc + quantities[key] * priceToUse;
+  }, 0);
+
+  // Calculate actual savings from promo code
+  $: promoSavings = currentPromoRule?.provideDiscount ? (subtotalWithoutDiscount - subtotal) : 0;
+
+  $: fees = Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket || ticket.price == 0) return acc;
+    const discountedPrice = getDiscountedPrice(ticket);
+    const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
+    return acc + quantities[key] * feeFor(priceToUse);
+  }, 0);
+  $: taxRate = (venueServiceCharge.taxPercentage || 0) / 100;
+  $: taxes = subtotal > 0 ? subtotal * taxRate : 0;
+  // When currentPromoRule is used, discounts are already applied per-ticket in subtotal calculation
+  // Only subtract promoDiscount separately when NOT using currentPromoRule (legacy behavior)
+  // Use Math.max(0, ...) to prevent negative totals in edge cases
+  $: total = Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0));
+  $: dispatch('priceUpdate', { subtotal, fees, taxes, total, promoSavings });
+  $: totalQuantity = Object.values(quantities).reduce((sum, q) => sum + q, 0);
+</script>
+
+<!-- Desktop Order Summary -->
+<div
+  id="orderSummary"
+  class="hidden min-[872px]:block h-fit rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
+>
+  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+      Order summary
+    </h2>
+  </div>
+
+  <div class="px-5 pb-5">
+    {#if totalQuantity === 0}
+      <!-- Empty state -->
+      <div class="py-8 text-center">
+        <p class="text-gray-500 dark:text-gray-400 text-sm">Select tickets to continue</p>
+      </div>
+    {:else}
+      <!-- Selected tickets - always show original prices -->
+      {#each Object.keys(quantities) as key}
+        {#if quantities[key] > 0}
+          {#each eventTickets as ticket}
+            {#if ticket.ID == key}
+              <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
+                <div>
+                  <p class="font-medium text-gray-900 dark:text-white">{ticket.name}</p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    {#if ticket.price === 0}
+                      Free x {quantities[key]}
+                    {:else}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
+                    {/if}
+                  </p>
+                </div>
+                <div class="font-medium text-gray-900 dark:text-white">
+                  {ticket.price === 0
+                    ? 'Free'
+                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+
+      <!-- Price breakdown -->
+      <div class="flex flex-col py-3 gap-2 text-sm">
+        {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
+          <div class="flex justify-between text-gray-600 dark:text-gray-300">
+            <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        {#if promoSavings > 0}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+          </div>
+        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <span>Fees</span><span>${fees.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <!-- Total -->
+      <div class="flex justify-between font-semibold text-gray-900 dark:text-white py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+        <span>Total</span><span>${total.toFixed(2)}</span>
+      </div>
+    {/if}
+
+    <!-- Terms of service -->
+    {#if totalQuantity > 0 && btnText === 'Place order'}
+      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mb-3">
+        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">terms of service</a>
+      </p>
+    {/if}
+
+    <!-- Checkout button -->
+    <button
+      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+      on:click={() => {
+        if (totalQuantity === 0) return;
+        if (executePurchase) {
+          executePurchase(elements);
+        } else if (checkoutTicket) {
+          checkoutTicket();
+        }
+      }}
+      disabled={totalQuantity === 0}
+    >
+      {#if loading}
+        <Spinner size="sm" color="white" />
+      {:else}
+        <span translate="no">{btnText}</span>
+      {/if}
+    </button>
+  </div>
+</div>
+
+{#if showOrderSummaryOnMobile}
+  <!-- Backdrop overlay - dims background -->
+  <button
+    class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
+    on:click={() => (showOrderSummaryOnMobile = false)}
+    aria-label="Close order summary"
+    transition:fade={{ duration: 200 }}
+  ></button>
+  <!-- Drawer - stays bright -->
+  <div
+    in:fly={{ y: 800, duration: 300, easing: cubicOut }}
+    out:fly={{ y: 800, duration: 300, easing: cubicOut }}
+    class="min-[872px]:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-white dark:bg-gray-800"
+  >
+    <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+        Order summary
+      </h2>
+      <button
+        on:click={() => (showOrderSummaryOnMobile = false)}
+        class="transition-colors p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
+        aria-label="Close order summary"
+      >
+        <CloseOutline class="w-7 h-7" />
+      </button>
+    </div>
+
+    <div class="px-5 pb-5">
+      <!-- Mobile ticket list - always show original prices -->
+      {#each Object.keys(quantities) as key}
+        {#if quantities[key] > 0}
+          {#each eventTickets as ticket}
+            {#if ticket.ID == key}
+              <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
+                <div>
+                  <p class="font-semibold text-gray-900 dark:text-white">{ticket.name}</p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    {#if ticket.price === 0}
+                      Free x {quantities[key]}
+                    {:else}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
+                    {/if}
+                  </p>
+                </div>
+                <div class="font-semibold text-gray-900 dark:text-white">
+                  {ticket.price === 0
+                    ? 'Free'
+                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+
+      <div class="flex flex-col py-4 gap-3 text-gray-600 dark:text-gray-300">
+        {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
+          <div class="flex justify-between">
+            <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        {#if promoSavings > 0}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+          </div>
+        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        <div class="flex justify-between">
+          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Fees</span><span>${fees.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <div class="flex justify-between font-bold text-gray-900 dark:text-white py-5 border-t border-gray-200 dark:border-gray-600">
+        <span>Total</span><span>${total.toFixed(2)}</span>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if showFooter}
+  <div
+    transition:fly={{ y: 100, duration: 200 }}
+    class="min-[872px]:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
+  >
+    <div class="flex items-stretch gap-3">
+      <button class="flex flex-col justify-between items-start shrink-0 whitespace-nowrap bg-transparent border-none p-0 cursor-pointer touch-manipulation" on:click={makeOrderSummaryVisible}>
+        <span class="flex items-center gap-1 text-sm font-normal text-gray-600 dark:text-gray-300">
+          {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
+          <ChevronDownOutline class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
+        </span>
+        <span class="text-xl font-bold text-gray-900 dark:text-white">${total.toFixed(2)}</span>
+      </button>
+
+      <button
+        class="flex-1 min-w-36 h-12 rounded-lg text-sm font-semibold touch-manipulation flex items-center justify-center {totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+        on:click={() => {
+          if (executePurchase) {
+            executePurchase(elements);
+          } else if (checkoutTicket) {
+            checkoutTicket();
+          }
+        }}
+        disabled={totalQuantity === 0 || !isAgreed}
+      >
+        {#if loading}
+          <Spinner size="sm" color="white" />
+        {:else}
+          <span translate="no">Checkout</span>
+        {/if}
+      </button>
+    </div>
+  </div>
+{/if}

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsVA;;;;;;;;;;;;;;;;;;;;;;;mBAA2S;6CAT9P,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/calendar/PublicCard/PublicCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AAwJA;;;;;;;;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/calendar/ShowCard/ShowCard.svelte

@@ -0,0 +1,166 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
+  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="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">
+  <!-- Event Title -->
+  {#if showTitle}
+    <div class="flex justify-between items-start gap-2 mb-4">
+      <h1 class="flex-1 text-left font-semibold text-xl leading-tight text-gray-900 dark:text-white">
+        {event.name || ''}
+      </h1>
+      <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"
+        on:click={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}
+
+  <!-- Date & Time -->
+  <div class="space-y-1 text-sm">
+    <p class="font-medium text-gray-900 dark:text-white">{formatDateTime(event.startDateTime)}</p>
+    {#if event.displayStartTime && event.doorsOpenTime}
+      <p class="text-gray-600 dark:text-gray-400">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+    {/if}
+    {#if event.displayEndTime && event.endDateTime}
+      <p class="text-gray-600 dark:text-gray-400">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="text-sm mb-2 text-gray-500 dark:text-gray-400">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}
+              on:select={handleSelect}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Location -->
+  {#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="text-sm font-medium transition-colors text-gray-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-500">
+          {event.venue.name}
+        </p>
+        <p class="text-sm transition-colors text-gray-500 dark:text-gray-400 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="text-sm mt-2 text-gray-500 dark:text-gray-400">
+          {#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>

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA0KA;;;;;;;;;;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/calendar/ShowTimeCard/ShowTimeCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAsEA;;;;;;;;;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"}