@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/ShowCard/ShowCard.svelte

@@ -1,57 +1,49 @@
 <script>
-  import Share from 'carbon-icons-svelte/lib/Share.svelte';
-  import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { ShareOutline, CheckOutline } from '../Icons';
   import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
 
-  /**
-   * @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',
+  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'
+        minute: '2-digit',
+        hour12: true
       });
-    },
-    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();
+    }
+    return timeStr;
+  };
+
+  const dispatch = createEventDispatcher();
 
-  let selectedDate = $state(null);
-  let shareSuccess = $state(false);
+  let selectedDate = null;
+  let shareSuccess = false;
 
-  function handleSelect(detail) {
-    selectedDate = detail.date;
-    onshowtimeselect?.(detail);
+  function handleSelect(e) {
+    selectedDate = e.detail.date;
+    dispatch('showtimeSelect', e.detail);
   }
 
   async function handleShare() {
@@ -90,50 +82,50 @@
   }
 </script>
 
-<div class="show-card h-fit rounded-[8px] sm:px-5 py-4 md:border">
+<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="event-title flex-1 text-left font-semibold text-[22px] leading-tight">
+      <h1 class="flex-1 text-left font-semibold text-xl leading-tight text-gray-900 dark:text-white">
         {event.name || ''}
       </h1>
       <button
-        class="share-btn flex-shrink-0 p-2 rounded-lg transition-colors relative"
+        class="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
         aria-label="Share event"
-        onclick={handleShare}
+        on:click={handleShare}
       >
         {#if shareSuccess}
-          <Checkmark size={20} class="success-icon" />
+          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
         {:else}
-          <Share size={20} class="share-icon cursor-pointer" />
+          <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-[15px]">
-    <p class="date-primary font-medium">{formatDateTime(event.startDateTime)}</p>
+  <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="date-secondary">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+      <p class="text-gray-600 dark:text-gray-400">Doors open {formatTimeline(event.doorsOpenTime)}</p>
     {/if}
     {#if event.displayEndTime && event.endDateTime}
-      <p class="date-secondary">Ends {formatTimeline(event.endDateTime)}</p>
+      <p class="text-gray-600 dark:text-gray-400">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="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-[91px]">
+          <div class="w-24">
             <ShowTimeCard
               day={showtime.day}
               date={showtime.date}
               time={showtime.time}
               isSelected={selectedDate === showtime.date}
-              onselect={handleSelect}
+              on:select={handleSelect}
             />
           </div>
         {/each}
@@ -143,23 +135,23 @@
 
   <!-- Location -->
   {#if event.venue}
-    <div class="location-section mt-4 pt-4">
+    <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="venue-name text-[15px] font-medium transition-colors">
+        <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="venue-address text-[14px] transition-colors">
+        <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="age-text text-[14px] mt-2">
+        <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}
@@ -172,76 +164,3 @@
     </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,33 +1,39 @@
 export default ShowCard;
-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;
+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: 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;
-}, {}, "">;
+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 +1 @@
-{"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"}
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/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/components/ShowTimeCard/ShowTimeCard.svelte

@@ -1,23 +1,15 @@
 <script>
-  /**
-   * @type {{
-   *   day?: string,
-   *   date?: string,
-   *   time?: string,
-   *   isSelected?: boolean,
-   *   onselect?: (detail: { date: string }) => void
-   * }}
-   */
-  let {
-    day = '',
-    date = '',
-    time = '',
-    isSelected = false,
-    onselect
-  } = $props();
+  import { createEventDispatcher } from 'svelte';
+
+  export let day = '';
+  export let date = '';
+  export let time = '';
+  export let isSelected = false;
+
+  const dispatch = createEventDispatcher();
 
   function handleCardClick() {
-    onselect?.({ date });
+    dispatch('select', { date });
   }
 
   function handleKeydown(e) {
@@ -30,9 +22,9 @@
   function formatHour(timeStr) {
     if (!timeStr) return '';
     // Handle various time formats
-    const d = new Date(`1970-01-01T${timeStr}`);
-    if (isNaN(d.getTime())) return timeStr;
-    return d.toLocaleTimeString('en-US', {
+    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
@@ -50,52 +42,20 @@
   }
 </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}
-  onclick={handleCardClick}
-  onkeydown={handleKeydown}
+  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
+    ? 'border-blue-700 dark:border-blue-500'
+    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
+  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}>
+  <span class="font-medium text-sm text-gray-500 dark:text-gray-400">{day}</span>
+  <span class="font-medium text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : 'text-gray-900 dark:text-white'}">
     {formatDate(date)}
   </span>
-  <span class="time-text font-medium text-sm">{formatHour(time)}</span>
+  <span class="font-medium text-sm text-gray-500 dark:text-gray-400">{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

@@ -1,23 +1,37 @@
 export default ShowTimeCard;
-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;
+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;
 };
-declare const ShowTimeCard: import("svelte").Component<{
-    day?: string;
-    date?: string;
-    time?: string;
-    isSelected?: boolean;
-    onselect?: (detail: {
-        date: string;
-    }) => 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;
+}
 //# 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":";;;;;;;;;;;;;AA4EA;UAPa,MAAM;WACL,MAAM;WACN,MAAM;iBACA,OAAO;eACT,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;WAGO"}
+{"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/CardPlaceholder.svelte

@@ -0,0 +1,98 @@
+<script>
+  /**
+   * Flowbite-native Card Placeholder skeleton component.
+   * Displays a card-style placeholder with image area, title, text, and optional avatar.
+   *
+   * @see https://flowbite.com/docs/components/skeleton/
+   */
+
+  /** @type {'sm' | 'md' | 'lg' | 'xl' | '2xl'} Size variant */
+  export let size = 'md';
+
+  /** @type {boolean} Whether to animate */
+  export let animate = true;
+
+  /** @type {boolean} Whether to show avatar section */
+  export let showAvatar = true;
+
+  /** @type {boolean} Whether to show image area */
+  export let showImage = true;
+
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+
+  // Card width classes by size
+  const cardSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  // Image height classes by size
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-56',
+    xl: 'h-64',
+    '2xl': 'h-72'
+  };
+
+  $: cardWidthClass = cardSizeClasses[size] || cardSizeClasses.md;
+  $: imageHeightClass = imageSizeClasses[size] || imageSizeClasses.md;
+  $: animateClass = animate ? 'animate-pulse' : '';
+</script>
+
+<div
+  role="status"
+  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
+  aria-label="Loading card"
+>
+  {#if showImage}
+    <!-- Image placeholder -->
+    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
+      <svg
+        class="w-10 h-10 text-gray-200 dark:text-gray-600"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 20"
+      >
+        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+      </svg>
+    </div>
+  {/if}
+
+  <!-- Title placeholder -->
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+
+  <!-- Text line placeholders -->
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
+
+  {#if showAvatar}
+    <!-- Avatar section -->
+    <div class="flex items-center mt-4">
+      <svg
+        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+      </svg>
+      <div>
+        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
+      </div>
+    </div>
+  {/if}
+
+  <span class="sr-only">Loading...</span>
+</div>

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

@@ -0,0 +1,35 @@
+export default CardPlaceholder;
+type CardPlaceholder = SvelteComponent<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    animate?: boolean | undefined;
+    showAvatar?: boolean | undefined;
+    showImage?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CardPlaceholder: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    animate?: boolean | undefined;
+    showAvatar?: boolean | undefined;
+    showImage?: boolean | 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=CardPlaceholder.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Skeleton/CardPlaceholder.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AAsGA;;;;;;;;mBAAgL;6CATnI,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"}