@getmicdrop/svelte-components 2.6.0 → 2.6.3

package/dist/components/ShowCard/ShowCard.svelte

@@ -1,240 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,92 +0,0 @@
-<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>

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

@@ -1 +0,0 @@
-{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/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"}

package/dist/components/Skeleton/Skeleton.svelte

@@ -1,68 +0,0 @@
-<script>
-  /** @type {'text' | 'circular' | 'rectangular'} Shape variant */
-  export let variant = "text";
-  /** @type {string} Width (CSS value) */
-  export let width = "100%";
-  /** @type {string} Height (CSS value) */
-  export let height = "1rem";
-  /** @type {boolean} Whether to animate */
-  export let animation = true;
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-  /** @type {string} Flowbite-style divClass for Tailwind classes */
-  export let divClass = "";
-
-  // If divClass is provided, use it instead of explicit width/height
-  $: useFlowbiteStyle = divClass !== "";
-  $: computedStyle = useFlowbiteStyle ? "" : `width: ${width}; height: ${height};`;
-  $: computedClass = useFlowbiteStyle
-    ? `skeleton skeleton--${variant} ${divClass} ${className}`.trim()
-    : `skeleton skeleton--${variant} ${className}`.trim();
-</script>
-
-<div
-  class={computedClass}
-  class:skeleton--animated={animation}
-  style={computedStyle}
-  aria-hidden="true"
-></div>
-
-<style>
-  .skeleton {
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
-    display: block;
-  }
-
-  .skeleton--text {
-    border-radius: 0.25rem;
-  }
-
-  .skeleton--circular {
-    border-radius: 50%;
-  }
-
-  .skeleton--rectangular {
-    border-radius: 0.5rem;
-  }
-
-  .skeleton--animated {
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-    background: linear-gradient(
-      90deg,
-      hsl(var(--BG-Secondary, 220 14% 96%)) 0%,
-      hsl(var(--BG-Primary, 0 0% 100%)) 50%,
-      hsl(var(--BG-Secondary, 220 14% 96%)) 100%
-    );
-    background-size: 200% 100%;
-  }
-
-  @keyframes skeleton-pulse {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
-  }
-</style>

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

@@ -1,37 +0,0 @@
-export default Skeleton;
-type Skeleton = SvelteComponent<{
-    class?: string | undefined;
-    variant?: "text" | "circular" | "rectangular" | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
-    animation?: boolean | undefined;
-    divClass?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Skeleton: $$__sveltets_2_IsomorphicComponent<{
-    class?: string | undefined;
-    variant?: "text" | "circular" | "rectangular" | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
-    animation?: boolean | undefined;
-    divClass?: string | undefined;
-}, {
-    [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=Skeleton.svelte.d.ts.map

package/dist/components/Tabs/TabItem.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { getContext, onMount, createEventDispatcher } from "svelte";
-
-  /** @type {string} Tab title displayed in the tab button */
-  export let title = "";
-  /** @type {boolean} Whether this tab is initially open/active (flowbite API) */
-  export let open = false;
-  /** @type {string|number|undefined} Unique identifier for this tab */
-  export let value = undefined;
-  /** @type {boolean} Whether the tab is disabled */
-  export let disabled = false;
-  /** @type {string} Additional CSS classes for the tab button */
-  let className = "";
-  export { className as class };
-
-  const dispatch = createEventDispatcher();
-  const { activeTab, registerTab } = getContext("tabs");
-
-  // Generate unique ID
-  let tabId = value || `tab-${Math.random().toString(36).substring(2, 9)}`;
-
-  onMount(() => {
-    registerTab(tabId, title, open);
-  });
-
-  $: isActive = $activeTab === tabId;
-</script>
-
-{#if isActive}
-  <div class="tab-panel" role="tabpanel" on:click={() => dispatch("click")}>
-    <slot />
-  </div>
-{/if}
-
-<style>
-  .tab-panel {
-    /* Content panel styling can be customized via contentClass on Tabs */
-  }
-</style>

package/dist/components/Tabs/TabItem.svelte.d.ts

@@ -1,52 +0,0 @@
-export default TabItem;
-type TabItem = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    open?: boolean | undefined;
-    title?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | number | undefined;
-}, {
-    default: {};
-}>, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const TabItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    open?: boolean | undefined;
-    title?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | number | undefined;
-}, {
-    default: {};
-}>, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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=TabItem.svelte.d.ts.map

package/dist/components/Tabs/TabItem.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/TabItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8DA;;;;;YAjBW,MAAM,GAAC,MAAM,GAAC,SAAS;;;;;;;;;eAiBoI;sCAThI,KAAK,EAAE,KAAK;;;;;6CALL,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"}