@getmicdrop/svelte-components 2.8.0 → 3.0.0

package/dist/components/ShowCard/ShowCard.svelte

@@ -1,50 +1,57 @@
 <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', {
+  /**
+   * @type {{
+   *   event?: Object,
+   *   showtimes?: Array<{ day: string, date: string, time: string }>,
+   *   showTitle?: boolean,
+   *   formatDateTime?: (dateStr: string) => string,
+   *   formatTimeline?: (timeStr: string) => string,
+   *   onshowtimeselect?: (detail: { date: string }) => void
+   * }}
+   */
+  let {
+    event = {},
+    showtimes = [],
+    showTitle = true,
+    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',
-        hour12: true
+        minute: '2-digit'
       });
-    }
-    return timeStr;
-  };
-
-  const dispatch = createEventDispatcher();
+    },
+    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;
+    },
+    onshowtimeselect
+  } = $props();
 
-  let selectedDate = null;
-  let shareSuccess = false;
+  let selectedDate = $state(null);
+  let shareSuccess = $state(false);
 
-  function handleSelect(e) {
-    selectedDate = e.detail.date;
-    dispatch('showtimeSelect', e.detail);
+  function handleSelect(detail) {
+    selectedDate = detail.date;
+    onshowtimeselect?.(detail);
   }
 
   async function handleShare() {
@@ -93,7 +100,7 @@
       <button
         class="share-btn flex-shrink-0 p-2 rounded-lg transition-colors relative"
         aria-label="Share event"
-        on:click={handleShare}
+        onclick={handleShare}
       >
         {#if shareSuccess}
           <Checkmark size={20} class="success-icon" />
@@ -126,7 +133,7 @@
               date={showtime.date}
               time={showtime.time}
               isSelected={selectedDate === showtime.date}
-              on:select={handleSelect}
+              onselect={handleSelect}
             />
           </div>
         {/each}

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

@@ -1,39 +1,33 @@
 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;
+type ShowCard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        event?: Object | undefined;
+        showtimes?: {
+            day: string;
+            date: string;
+            time: string;
+        }[] | undefined;
+        showTitle?: boolean | undefined;
+        formatDateTime?: ((dateStr: string) => string) | undefined;
+        formatTimeline?: ((timeStr: string) => string) | undefined;
+        onshowtimeselect?: ((detail: {
+            date: string;
+        }) => void) | undefined;
+    }>): void;
 };
-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;
-}
+declare const ShowCard: import("svelte").Component<{
+    event?: Object;
+    showtimes?: Array<{
+        day: string;
+        date: string;
+        time: string;
+    }>;
+    showTitle?: boolean;
+    formatDateTime?: (dateStr: string) => string;
+    formatTimeline?: (timeStr: string) => string;
+    onshowtimeselect?: (detail: {
+        date: string;
+    }) => void;
+}, {}, "">;
 //# sourceMappingURL=ShowCard.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoLA;YARe,MAAM;gBACF,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;gBAClD,OAAO;qBACF,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM;qBAC3B,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM;uBACzB,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;WAGL"}

package/dist/components/ShowTimeCard/ShowTimeCard.svelte

@@ -1,15 +1,23 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-
-  export let day = '';
-  export let date = '';
-  export let time = '';
-  export let isSelected = false;
-
-  const dispatch = createEventDispatcher();
+  /**
+   * @type {{
+   *   day?: string,
+   *   date?: string,
+   *   time?: string,
+   *   isSelected?: boolean,
+   *   onselect?: (detail: { date: string }) => void
+   * }}
+   */
+  let {
+    day = '',
+    date = '',
+    time = '',
+    isSelected = false,
+    onselect
+  } = $props();
 
   function handleCardClick() {
-    dispatch('select', { date });
+    onselect?.({ date });
   }
 
   function handleKeydown(e) {
@@ -22,9 +30,9 @@
   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', {
+    const d = new Date(`1970-01-01T${timeStr}`);
+    if (isNaN(d.getTime())) return timeStr;
+    return d.toLocaleTimeString('en-US', {
       hour: 'numeric',
       minute: '2-digit',
       hour12: true
@@ -42,11 +50,12 @@
   }
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <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}
+  onclick={handleCardClick}
+  onkeydown={handleKeydown}
   tabindex="0"
   role="button"
   aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}

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

@@ -1,37 +1,23 @@
 export default ShowTimeCard;
-type ShowTimeCard = SvelteComponent<{
-    time?: string | undefined;
-    day?: string | undefined;
-    date?: string | undefined;
-    isSelected?: boolean | undefined;
-}, {
-    select: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type ShowTimeCard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        day?: string | undefined;
+        date?: string | undefined;
+        time?: string | undefined;
+        isSelected?: boolean | undefined;
+        onselect?: ((detail: {
+            date: string;
+        }) => void) | undefined;
+    }>): void;
 };
-declare const ShowTimeCard: $$__sveltets_2_IsomorphicComponent<{
-    time?: string | undefined;
-    day?: string | undefined;
-    date?: string | undefined;
-    isSelected?: boolean | undefined;
-}, {
-    select: 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;
-}
+declare const ShowTimeCard: import("svelte").Component<{
+    day?: string;
+    date?: string;
+    time?: string;
+    isSelected?: boolean;
+    onselect?: (detail: {
+        date: string;
+    }) => void;
+}, {}, "">;
 //# sourceMappingURL=ShowTimeCard.svelte.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA4EA;UAPa,MAAM;WACL,MAAM;WACN,MAAM;iBACA,OAAO;eACT,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;WAGO"}