@getmicdrop/svelte-components 5.21.2 → 5.22.0

package/dist/components/Toast/ToastItem.svelte

@@ -0,0 +1,695 @@
+<!-- native-element-exception: Toast action button needs inline styling incompatible with Button component -->
+<!-- Micdrop Toast Item - macOS style with swipe-to-dismiss -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import Button from '../../primitives/Button/Button.svelte';
+  import CloseOutline from '../../primitives/Icons/CloseOutline.svelte';
+
+  // Notification status icons
+  import CancelledIcon from '../../primitives/Icons/CancelledIcon.svelte';
+  import CartIcon from '../../primitives/Icons/CartIcon.svelte';
+  import ConfirmedIcon from '../../primitives/Icons/ConfirmedIcon.svelte';
+  import InvitedIcon from '../../primitives/Icons/InvitedIcon.svelte';
+  import TicketIcon from '../../primitives/Icons/TicketIcon.svelte';
+
+  // Toast type icons
+  import ToastErrorIcon from '../../primitives/Icons/ToastErrorIcon.svelte';
+  import ToastInfoIcon from '../../primitives/Icons/ToastInfoIcon.svelte';
+  import ToastLoadingIcon from '../../primitives/Icons/ToastLoadingIcon.svelte';
+  import ToastSuccessIcon from '../../primitives/Icons/ToastSuccessIcon.svelte';
+  import ToastWarningIcon from '../../primitives/Icons/ToastWarningIcon.svelte';
+
+  import { triggerHaptic } from '../../utils/haptic';
+
+  // =============================================================================
+  // SWIPE-TO-DISMISS CONFIGURATION
+  // =============================================================================
+  const SWIPE_THRESHOLD = 0.3; // 30% of toast width to dismiss
+  const VELOCITY_THRESHOLD = 0.5; // px/ms for quick flicks
+  const DRAG_RESISTANCE = 0.8; // Slight resistance during drag
+
+  // Map toast types to notification icon components
+  const typeIconComponents: Record<string, typeof ConfirmedIcon> = {
+    success: ConfirmedIcon,
+    error: CancelledIcon,
+    warning: CancelledIcon, // Uses same icon, styled differently if needed
+    info: InvitedIcon,
+  };
+
+  import { toast } from './toast.svelte';
+
+  import type { Toast } from './toast.svelte';
+
+  interface Props {
+    data: Toast;
+  }
+
+  let { data }: Props = $props();
+
+  let progressEl: HTMLDivElement | undefined = $state();
+  let isPaused = $derived(!!data.pausedAt);
+  let animationFrameId: number | undefined;
+
+  // Toast type icon components
+  const iconComponents: Record<string, typeof ToastSuccessIcon> = {
+    success: ToastSuccessIcon,
+    error: ToastErrorIcon,
+    warning: ToastWarningIcon,
+    info: ToastInfoIcon,
+    loading: ToastLoadingIcon,
+  };
+
+  // Notification status config with consistent IA
+  // Pattern A: Performer-centric (has name) - Line 1: Name, Line 2: Status · Event
+  // Pattern B: Event-centric (no name) - Line 1: Event, Line 2: Status, Line 3: Details
+  function getNotificationConfig(status: string, hasPerformer: boolean) {
+    const normalizedStatus = (status || '').trim().toLowerCase();
+
+    // Pattern A - Performer notifications
+    if (
+      normalizedStatus === 'performer confirmed' ||
+      normalizedStatus === 'confirmed'
+    ) {
+      return {
+        statusText: 'Confirmed',
+        statusColor: 'text-green-600',
+        IconComponent: ConfirmedIcon,
+        pattern: 'performer',
+      };
+    }
+    if (
+      normalizedStatus === 'performer declined' ||
+      normalizedStatus === 'declined'
+    ) {
+      return {
+        statusText: 'Declined',
+        statusColor: 'text-red-600',
+        IconComponent: CancelledIcon,
+        pattern: 'performer',
+      };
+    }
+    if (
+      normalizedStatus === 'cancelled' ||
+      normalizedStatus === 'performer left' ||
+      normalizedStatus === 'performer left the roster'
+    ) {
+      return {
+        statusText: 'Canceled',
+        statusColor: 'text-red-600',
+        IconComponent: CancelledIcon,
+        pattern: 'performer',
+      };
+    }
+    if (
+      normalizedStatus === 'message received' ||
+      normalizedStatus === 'message sent'
+    ) {
+      return {
+        statusText: 'New message',
+        statusColor: 'text-blue-600',
+        IconComponent: InvitedIcon,
+        pattern: 'performer',
+      };
+    }
+
+    // Pattern B - Sales notifications (event-centric)
+    if (
+      normalizedStatus === 'ticket sold' ||
+      normalizedStatus === 'order completed'
+    ) {
+      return {
+        statusText: 'Order completed',
+        statusColor: 'text-green-600',
+        IconComponent: CartIcon,
+        pattern: 'event',
+      };
+    }
+    if (
+      normalizedStatus === 'event sold out' ||
+      normalizedStatus === 'sold out' ||
+      normalizedStatus === 'show sold out'
+    ) {
+      return {
+        statusText: 'Sold out',
+        statusColor: 'text-green-600',
+        IconComponent: TicketIcon,
+        pattern: 'event',
+      };
+    }
+    if (normalizedStatus === 'section sold out') {
+      return {
+        statusText: 'Section sold out',
+        statusColor: 'text-green-600',
+        IconComponent: TicketIcon,
+        pattern: 'event',
+      };
+    }
+    if (
+      normalizedStatus === 'ticket type sold out' ||
+      normalizedStatus === 'vip tickets sold out'
+    ) {
+      return {
+        statusText: 'Ticket type sold out',
+        statusColor: 'text-green-600',
+        IconComponent: TicketIcon,
+        pattern: 'event',
+      };
+    }
+
+    // Pattern C - Event status notifications
+    if (
+      normalizedStatus === 'event published' ||
+      normalizedStatus === 'event is now published'
+    ) {
+      return {
+        statusText: 'Published',
+        statusColor: 'text-green-600',
+        IconComponent: ConfirmedIcon,
+        pattern: 'event',
+      };
+    }
+    if (normalizedStatus === 'event rescheduled') {
+      return {
+        statusText: 'Rescheduled',
+        statusColor: 'text-amber-600',
+        IconComponent: null,
+        pattern: 'event',
+      };
+    }
+    if (
+      normalizedStatus === 'event fully booked' ||
+      normalizedStatus === 'event is fully booked'
+    ) {
+      return {
+        statusText: 'Fully booked',
+        statusColor: 'text-green-600',
+        IconComponent: ConfirmedIcon,
+        pattern: 'event',
+      };
+    }
+
+    // Pattern D - Admin notifications
+    if (
+      normalizedStatus === 'avails sent' ||
+      normalizedStatus === 'availability request sent'
+    ) {
+      return {
+        statusText: 'Availability sent',
+        statusColor: 'text-blue-600',
+        IconComponent: InvitedIcon,
+        pattern: hasPerformer ? 'performer' : 'event',
+      };
+    }
+    if (
+      normalizedStatus === 'avails sent to all' ||
+      normalizedStatus === 'scheduled avails sent' ||
+      normalizedStatus === 'availability request sent bulk'
+    ) {
+      return {
+        statusText: 'Availability sent',
+        statusColor: 'text-blue-600',
+        IconComponent: InvitedIcon,
+        pattern: 'event',
+      };
+    }
+
+    // Fallback - determine pattern based on whether we have a performer name
+    return {
+      statusText: status || 'Update',
+      statusColor: 'text-gray-600',
+      IconComponent: InvitedIcon,
+      pattern: hasPerformer ? 'performer' : 'event',
+    };
+  }
+
+  // Determine if this is a performer-centric notification
+  let hasPerformer = $derived(
+    !!(data.notification?.name || data.notification?.displayName)
+  );
+  let notificationConfig = $derived(
+    data.notification
+      ? getNotificationConfig(data.notification.status, hasPerformer)
+      : null
+  );
+  let displayName = $derived(
+    data.notification?.displayName || data.notification?.name || ''
+  );
+  // For event-centric notifications, use event as primary display
+  let primaryText = $derived(
+    notificationConfig?.pattern === 'event'
+      ? data.notification?.event || ''
+      : displayName
+  );
+
+  // Colors for each type - unified dark styling matching notification toasts
+  const typeStyles: Record<string, { icon: string; text: string }> = {
+    success: {
+      icon: 'text-green-600 dark:text-green-400',
+      text: 'text-gray-900 dark:text-white',
+    },
+    error: {
+      icon: 'text-red-500',
+      text: 'text-gray-900 dark:text-white',
+    },
+    warning: {
+      icon: 'text-amber-500',
+      text: 'text-gray-900 dark:text-white',
+    },
+    info: {
+      icon: 'text-blue-500',
+      text: 'text-gray-900 dark:text-white',
+    },
+    loading: {
+      icon: 'text-gray-400',
+      text: 'text-gray-900 dark:text-white',
+    },
+  };
+
+  let styles = $derived(typeStyles[data.type] || typeStyles.info);
+  let isClickable = $derived(!!data.onClick);
+  let isNotification = $derived(data.type === 'notification');
+
+  function handleMouseEnter() {
+    if (data.duration !== Infinity) {
+      // Stop progress animation — pause/resume is handled by Toaster container
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = undefined;
+      }
+    }
+  }
+
+  function handleMouseLeave() {
+    if (data.duration !== Infinity) {
+      // Restart progress animation — pause/resume is handled by Toaster container
+      if (data.showProgress) {
+        animationFrameId = requestAnimationFrame(updateProgress);
+      }
+    }
+  }
+
+  function handleClick() {
+    if (data.onClick) {
+      data.onClick();
+      toast.dismiss(data.id);
+    }
+  }
+
+  function handleDismiss(e: MouseEvent) {
+    e.stopPropagation();
+    toast.dismiss(data.id);
+  }
+
+  // Animate progress bar
+  function updateProgress() {
+    if (!progressEl || data.duration === Infinity || isPaused) return;
+
+    const elapsed = Date.now() - data.createdAt;
+    const progress = Math.max(0, 1 - elapsed / data.duration);
+
+    progressEl.style.transform = `scaleX(${progress})`;
+
+    if (progress > 0) {
+      animationFrameId = requestAnimationFrame(updateProgress);
+    }
+  }
+
+  onMount(() => {
+    if (data.showProgress && data.duration !== Infinity) {
+      animationFrameId = requestAnimationFrame(updateProgress);
+    }
+
+    // Add non-passive touchmove listener to allow preventDefault during swipe
+    // Svelte's ontouchmove is passive by default, which prevents preventDefault
+    function handleTouchMoveNonPassive(e: TouchEvent) {
+      if (isSwiping) {
+        e.preventDefault();
+      }
+    }
+
+    toastElement?.addEventListener('touchmove', handleTouchMoveNonPassive, {
+      passive: false,
+    });
+
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      toastElement?.removeEventListener('touchmove', handleTouchMoveNonPassive);
+    };
+  });
+
+  // Resume progress animation when unpaused
+  $effect(() => {
+    if (!isPaused && data.showProgress && data.duration !== Infinity) {
+      animationFrameId = requestAnimationFrame(updateProgress);
+    }
+  });
+
+  // =============================================================================
+  // SWIPE-TO-DISMISS (mobile)
+  // =============================================================================
+
+  let toastElement: HTMLElement | undefined = $state();
+  let swipeOffset = $state(0);
+  let isSwiping = $state(false);
+  let touchStartX = 0;
+  let touchStartY = 0;
+  let lastTouchX = 0;
+  let lastTouchTime = 0;
+  let velocityX = 0;
+
+  function handleTouchStart(e: TouchEvent) {
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+    lastTouchX = touchStartX;
+    lastTouchTime = Date.now();
+    velocityX = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!touchStartX) return;
+
+    const touchCurrentX = e.touches[0].clientX;
+    const touchCurrentY = e.touches[0].clientY;
+    const diffX = touchCurrentX - touchStartX; // Positive = swiping right
+    const diffY = touchCurrentY - touchStartY;
+    const now = Date.now();
+
+    // Determine if this is a horizontal swipe
+    if (!isSwiping && Math.abs(diffX) > 10) {
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        isSwiping = true;
+      } else {
+        // Vertical scroll - don't handle
+        touchStartX = 0;
+        return;
+      }
+    }
+
+    if (isSwiping) {
+      // Note: preventDefault is handled by the non-passive listener in onMount
+
+      // Calculate velocity (pixels per ms)
+      const dt = now - lastTouchTime;
+      if (dt > 0) {
+        velocityX = (touchCurrentX - lastTouchX) / dt;
+      }
+      lastTouchX = touchCurrentX;
+      lastTouchTime = now;
+
+      // Only allow swiping right (positive direction) - to dismiss
+      // Add slight resistance to left swipe, full movement to right
+      if (diffX > 0) {
+        swipeOffset = diffX * DRAG_RESISTANCE;
+      } else {
+        swipeOffset = diffX * 0.2; // Heavy resistance when swiping left
+      }
+    }
+  }
+
+  function handleTouchEnd() {
+    if (!touchStartX || !isSwiping) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isSwiping = false;
+      return;
+    }
+
+    const toastWidth = toastElement?.offsetWidth || 320;
+    const swipePercent = swipeOffset / toastWidth;
+
+    // Check if we should dismiss (swiped right past threshold or quick flick right)
+    const shouldDismiss =
+      swipePercent > SWIPE_THRESHOLD || velocityX > VELOCITY_THRESHOLD;
+
+    if (shouldDismiss && swipeOffset > 0) {
+      // Animate off screen to the right
+      triggerHaptic('medium');
+      swipeOffset = toastWidth + 20; // Slide off right edge
+
+      setTimeout(() => {
+        toast.dismiss(data.id);
+      }, 200);
+    } else {
+      // Snap back
+      swipeOffset = 0;
+    }
+
+    // Reset state
+    touchStartX = 0;
+    touchStartY = 0;
+    isSwiping = false;
+    velocityX = 0;
+  }
+</script>
+
+<!-- Simple toast content snippet -->
+{#snippet toastContent()}
+  <div class="flex flex-1 items-center gap-3 p-3">
+    <!-- Icon - use notification icons for consistency -->
+    {#if data.type === 'loading'}
+      <div class="size-5 shrink-0 animate-spin {styles.icon}">
+        <ToastLoadingIcon class="size-5" />
+      </div>
+    {:else if typeIconComponents[data.type]}
+      {@const IconComp = typeIconComponents[data.type]}
+      <div class="size-5 shrink-0 {styles.icon}">
+        <IconComp class="size-5" />
+      </div>
+    {/if}
+
+    <!-- Text -->
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium {styles.text}">
+        {data.title}
+      </p>
+      {#if data.description}
+        <p class="mt-1 text-sm text-body">
+          {data.description}
+        </p>
+      {/if}
+      {#if data.action}
+        <button
+          type="button"
+          class="mt-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline cursor-pointer"
+          onclick={e => {
+            e.stopPropagation();
+            data.action?.onClick();
+            toast.dismiss(data.id);
+          }}
+        >
+          {data.action.label}
+        </button>
+      {/if}
+    </div>
+
+    <!-- Close button -->
+    {#if data.dismissible}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onclick={handleDismiss}
+        aria-label="Dismiss"
+        className="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+      >
+        <CloseOutline class="size-4" />
+      </Button>
+    {/if}
+  </div>
+{/snippet}
+
+<!-- Notification-style content snippet -->
+{#snippet notificationContent()}
+  <div class="flex items-start gap-3 p-3">
+    <!-- Avatar -->
+    <img
+      src={data.notification?.avatar}
+      alt=""
+      class="size-11 rounded object-cover bg-accent-subtle shrink-0"
+    />
+
+    <!-- Text content - pattern-based layout -->
+    <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+      {#if notificationConfig?.pattern === 'performer'}
+        <!-- Pattern A: Performer-centric (always 3 lines) -->
+        <!-- Line 1: Performer name -->
+        <span
+          class="text-sm font-medium text-gray-900 dark:text-white truncate"
+        >
+          {displayName}
+        </span>
+        <!-- Line 2: Icon + Status -->
+        <div class="flex items-center gap-1.5">
+          {#if notificationConfig?.IconComponent}
+            {@const StatusIcon = notificationConfig.IconComponent}
+            <div class="size-3.5 shrink-0 {notificationConfig?.statusColor}">
+              <StatusIcon class="size-3.5" />
+            </div>
+          {/if}
+          <span
+            class="text-sm font-medium whitespace-nowrap {notificationConfig?.statusColor}"
+          >
+            {notificationConfig?.statusText}
+          </span>
+        </div>
+        <!-- Line 3: Event -->
+        {#if data.notification?.event}
+          <span class="text-sm text-body truncate">
+            {data.notification.event}
+          </span>
+        {/if}
+        <!-- Line 4: Message (if any) -->
+        {#if data.notification?.performerMessage}
+          <div class="bg-accent-subtle rounded px-2 py-1 mt-0.5">
+            <p class="text-xs text-body line-clamp-2">
+              {data.notification.performerMessage}
+            </p>
+          </div>
+        {/if}
+      {:else}
+        <!-- Pattern B/C: Event-centric (sales, event status, admin bulk) -->
+        <!-- Line 1: Event name -->
+        <span
+          class="text-sm font-medium text-gray-900 dark:text-white truncate"
+        >
+          {data.notification?.event}
+        </span>
+        <!-- Line 2: Icon + Status -->
+        <div class="flex items-center gap-1.5">
+          {#if notificationConfig?.IconComponent}
+            {@const StatusIcon = notificationConfig.IconComponent}
+            <div class="size-3.5 shrink-0 {notificationConfig?.statusColor}">
+              <StatusIcon class="size-3.5" />
+            </div>
+          {/if}
+          <span
+            class="text-sm font-medium whitespace-nowrap {notificationConfig?.statusColor}"
+          >
+            {notificationConfig?.statusText}
+          </span>
+        </div>
+        <!-- Line 3: Details (message) -->
+        {#if data.notification?.message}
+          <span class="text-xs text-gray-500 dark:text-gray-400">
+            {data.notification.message}
+          </span>
+        {/if}
+      {/if}
+    </div>
+
+    <!-- Close button -->
+    {#if data.dismissible}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onclick={handleDismiss}
+        aria-label="Dismiss"
+        className="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+      >
+        <CloseOutline class="size-4" />
+      </Button>
+    {/if}
+  </div>
+{/snippet}
+
+<!-- Unified toast wrapper — one outer div handles swipe + role, inner Button for clickable -->
+<div
+  bind:this={toastElement}
+  class="toast-item relative flex w-80 max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
+  class:swiping={isSwiping}
+  style:transform="translateX({swipeOffset}px)"
+  style:opacity={swipeOffset > 0 ? Math.max(0.3, 1 - swipeOffset / 320) : 1}
+  role={isClickable ? undefined : 'alert'}
+  tabindex={undefined}
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onkeydown={undefined}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+>
+  {#if isClickable}
+    <Button
+      variant="ghost"
+      className="w-full h-full p-0 text-left cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg"
+      onclick={handleClick}
+    >
+      {#if isNotification}
+        {@render notificationContent()}
+      {:else}
+        {@render toastContent()}
+      {/if}
+    </Button>
+  {:else if isNotification}
+    {@render notificationContent()}
+  {:else}
+    {@render toastContent()}
+  {/if}
+
+  {#if data.showProgress && data.duration !== Infinity}
+    <div
+      bind:this={progressEl}
+      class="absolute bottom-0 left-0 h-0.5 bg-current origin-left"
+      style:transform="scaleX(1)"
+      aria-hidden="true"
+    ></div>
+  {/if}
+</div>
+
+<style>
+  /* macOS-style toast shadow with hover elevation */
+  .toast-item {
+    box-shadow:
+      0px 4px 12px color-mix(in srgb, var(--color-black) 8%, transparent),
+      0px 1px 3px color-mix(in srgb, var(--color-black) 6%, transparent);
+    transition:
+      box-shadow 0.2s ease-out,
+      opacity 0.2s ease-out;
+    /* Transform handled by inline style for swipe */
+    will-change: transform, opacity;
+    touch-action: pan-y; /* Allow vertical scroll, capture horizontal for swipe */
+  }
+
+  /* Disable hover effects during swipe */
+  .toast-item:not(.swiping):hover {
+    box-shadow:
+      0px 8px 24px color-mix(in srgb, var(--color-black) 12%, transparent),
+      0px 2px 6px color-mix(in srgb, var(--color-black) 8%, transparent);
+  }
+
+  .toast-item:not(.swiping):active {
+    box-shadow:
+      0px 4px 12px color-mix(in srgb, var(--color-black) 10%, transparent),
+      0px 1px 3px color-mix(in srgb, var(--color-black) 6%, transparent);
+  }
+
+  /* Smooth snap-back animation when not swiping */
+  .toast-item:not(.swiping) {
+    transition:
+      transform 0.2s ease-out,
+      box-shadow 0.2s ease-out,
+      opacity 0.2s ease-out;
+  }
+
+  /* No transition during active swipe (follows finger) */
+  .toast-item.swiping {
+    transition: none;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  :global(.animate-spin) {
+    animation: spin 1s linear infinite;
+  }
+</style>

package/dist/components/Toast/ToastItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Toast } from './toast.svelte';
+interface Props {
+    data: Toast;
+}
+declare const ToastItem: import("svelte").Component<Props, {}, "">;
+type ToastItem = ReturnType<typeof ToastItem>;
+export default ToastItem;
+//# sourceMappingURL=ToastItem.svelte.d.ts.map

package/dist/components/Toast/ToastItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/ToastItem.svelte.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG1C,UAAU,KAAK;IACb,IAAI,EAAE,KAAK,CAAC;CACb;AAilBH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}