@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/primitives/Modal/Modal.svelte.d.ts

@@ -0,0 +1,49 @@
+export default Modal;
+type Modal = SvelteComponent<{
+    size?: "default" | "large" | "small" | "xlarge" | undefined;
+    show?: boolean | undefined;
+    isProcessing?: boolean | undefined;
+    isSuccess?: boolean | undefined;
+    persistent?: boolean | undefined;
+}, {
+    click: PointerEvent;
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    body: {};
+    footer: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Modal: $$__sveltets_2_IsomorphicComponent<{
+    size?: "default" | "large" | "small" | "xlarge" | undefined;
+    show?: boolean | undefined;
+    isProcessing?: boolean | undefined;
+    isSuccess?: boolean | undefined;
+    persistent?: boolean | undefined;
+}, {
+    click: PointerEvent;
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    body: {};
+    footer: {};
+}, {}, 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=Modal.svelte.d.ts.map

package/dist/primitives/Modal/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoIA;;;;;;;;;;;;;;;eAAgL;6CAdnI,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/primitives/Pagination/Pagination.svelte

@@ -0,0 +1,261 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { ChevronLeftOutline, ChevronRightOutline } from "../Icons";
+
+  /** @type {number} Current page (1-indexed) */
+  export let currentPage = 1;
+  /** @type {number} Total number of pages */
+  export let totalPages = 1;
+  /** @type {number} Max page buttons to show */
+  export let maxVisible = 5;
+  /** @type {boolean} Show previous/next buttons */
+  export let showPrevNext = true;
+  /** @type {boolean} Flowbite API: alias for showPrevNext */
+  export let showIcons = undefined;
+  /** @type {string} Flowbite API: previous button label */
+  export let previousLabel = undefined;
+  /** @type {string} Flowbite API: next button label */
+  export let nextLabel = undefined;
+  /** @type {'default' | 'table'} Pagination variant */
+  export let variant = 'default';
+  /** @type {'sm' | 'md' | 'lg'} Size variant */
+  export let size = 'md';
+  /** @type {number} Total items (for table variant) */
+  export let totalItems = 0;
+  /** @type {number} Items per page (for table variant) */
+  export let perPage = 10;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  // Support flowbite's showIcons prop
+  $: effectiveShowPrevNext = showIcons !== undefined ? showIcons : showPrevNext;
+
+  // Calculate showing range for table variant
+  $: startItem = totalItems > 0 ? (currentPage - 1) * perPage + 1 : 0;
+  $: endItem = Math.min(currentPage * perPage, totalItems);
+
+  // Size-based classes
+  $: sizeClasses = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-9 px-3 text-sm',
+    lg: 'h-10 px-4 text-base'
+  }[size];
+
+  $: pageSizeClasses = {
+    sm: 'h-8 w-8 text-sm',
+    md: 'h-9 w-9 text-sm',
+    lg: 'h-10 w-10 text-base'
+  }[size];
+
+  function goToPage(page) {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      currentPage = page;
+      dispatch("change", { page });
+      // Also dispatch flowbite-style event
+      dispatch("pageChange", page);
+    }
+  }
+
+  function previous() {
+    goToPage(currentPage - 1);
+  }
+
+  function next() {
+    goToPage(currentPage + 1);
+  }
+
+  // Calculate which page numbers to show
+  $: visiblePages = (() => {
+    const pages = [];
+    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let end = Math.min(totalPages, start + maxVisible - 1);
+
+    // Adjust start if we're near the end
+    if (end - start + 1 < maxVisible) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  })();
+
+  $: showStartEllipsis = visiblePages[0] > 1;
+  $: showEndEllipsis = visiblePages[visiblePages.length - 1] < totalPages;
+
+  // Determine if a button is first or last in the visible sequence
+  $: isFirstButton = (index, type) => {
+    if (!effectiveShowPrevNext && index === 0 && type === 'page' && !showStartEllipsis) return true;
+    if (effectiveShowPrevNext && type === 'prev') return true;
+    return false;
+  };
+
+  $: isLastButton = (index, type) => {
+    if (!effectiveShowPrevNext && index === visiblePages.length - 1 && type === 'page' && !showEndEllipsis) return true;
+    if (effectiveShowPrevNext && type === 'next') return true;
+    return false;
+  };
+
+  // Base button classes (Flowbite connected style)
+  const baseButtonClasses = "flex items-center justify-center leading-tight font-medium border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";
+
+  // Active state classes (Flowbite style)
+  const activeClasses = "flex items-center justify-center leading-tight font-medium border border-gray-300 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:border-gray-700 dark:text-white";
+
+  // Disabled state classes
+  const disabledClasses = "cursor-not-allowed opacity-50";
+</script>
+
+{#if variant === 'table'}
+  <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}">
+    <span class="text-sm text-gray-700 dark:text-gray-400">
+      Showing <span class="font-semibold text-gray-900 dark:text-white">{startItem}</span> to <span class="font-semibold text-gray-900 dark:text-white">{endItem}</span> of <span class="font-semibold text-gray-900 dark:text-white">{totalItems}</span> entries
+    </span>
+    <nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label="Pagination">
+      {#if effectiveShowPrevNext}
+        <button
+          type="button"
+          class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
+          disabled={currentPage === 1}
+          on:click={previous}
+          aria-label="Previous page"
+        >
+          {#if $$slots.prev}
+            <slot name="prev" />
+          {:else if previousLabel}
+            {previousLabel}
+          {:else}
+            <ChevronLeftOutline class="h-4 w-4 rtl:rotate-180" aria-hidden="true" />
+          {/if}
+        </button>
+      {/if}
+
+      {#if showStartEllipsis}
+        <button
+          type="button"
+          class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-s-lg' : ''}"
+          on:click={() => goToPage(1)}
+        >
+          1
+        </button>
+        <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+      {/if}
+
+      {#each visiblePages as page, index}
+        <button
+          type="button"
+          class="{page === currentPage ? activeClasses : baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext && !showStartEllipsis && index === 0 ? 'rounded-s-lg' : ''} {!effectiveShowPrevNext && !showEndEllipsis && index === visiblePages.length - 1 ? 'rounded-e-lg' : ''}"
+          on:click={() => goToPage(page)}
+          aria-current={page === currentPage ? "page" : undefined}
+        >
+          {page}
+        </button>
+      {/each}
+
+      {#if showEndEllipsis}
+        <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+        <button
+          type="button"
+          class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-e-lg' : ''}"
+          on:click={() => goToPage(totalPages)}
+        >
+          {totalPages}
+        </button>
+      {/if}
+
+      {#if effectiveShowPrevNext}
+        <button
+          type="button"
+          class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
+          disabled={currentPage === totalPages}
+          on:click={next}
+          aria-label="Next page"
+        >
+          {#if $$slots.next}
+            <slot name="next" />
+          {:else if nextLabel}
+            {nextLabel}
+          {:else}
+            <ChevronRightOutline class="h-4 w-4 rtl:rotate-180" aria-hidden="true" />
+          {/if}
+        </button>
+      {/if}
+    </nav>
+  </div>
+{:else}
+  <nav class="inline-flex -space-x-px rtl:space-x-reverse text-sm {className}" aria-label="Pagination">
+    {#if effectiveShowPrevNext}
+      <button
+        type="button"
+        class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
+        disabled={currentPage === 1}
+        on:click={previous}
+        aria-label="Previous page"
+      >
+        {#if $$slots.prev}
+          <slot name="prev" />
+        {:else if previousLabel}
+          {previousLabel}
+        {:else}
+          <ChevronLeftOutline class="h-4 w-4 rtl:rotate-180" aria-hidden="true" />
+        {/if}
+      </button>
+    {/if}
+
+    {#if showStartEllipsis}
+      <button
+        type="button"
+        class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-s-lg' : ''}"
+        on:click={() => goToPage(1)}
+      >
+        1
+      </button>
+      <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+    {/if}
+
+    {#each visiblePages as page, index}
+      <button
+        type="button"
+        class="{page === currentPage ? activeClasses : baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext && !showStartEllipsis && index === 0 ? 'rounded-s-lg' : ''} {!effectiveShowPrevNext && !showEndEllipsis && index === visiblePages.length - 1 ? 'rounded-e-lg' : ''}"
+        on:click={() => goToPage(page)}
+        aria-current={page === currentPage ? "page" : undefined}
+      >
+        {page}
+      </button>
+    {/each}
+
+    {#if showEndEllipsis}
+      <span class="{baseButtonClasses} {pageSizeClasses} cursor-default">...</span>
+      <button
+        type="button"
+        class="{baseButtonClasses} {pageSizeClasses} {!effectiveShowPrevNext ? 'rounded-e-lg' : ''}"
+        on:click={() => goToPage(totalPages)}
+      >
+        {totalPages}
+      </button>
+    {/if}
+
+    {#if effectiveShowPrevNext}
+      <button
+        type="button"
+        class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
+        disabled={currentPage === totalPages}
+        on:click={next}
+        aria-label="Next page"
+      >
+        {#if $$slots.next}
+          <slot name="next" />
+        {:else if nextLabel}
+          {nextLabel}
+        {:else}
+          <ChevronRightOutline class="h-4 w-4 rtl:rotate-180" aria-hidden="true" />
+        {/if}
+      </button>
+    {/if}
+  </nav>
+{/if}

package/dist/primitives/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,61 @@
+export default Pagination;
+type Pagination = SvelteComponent<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "default" | "table" | undefined;
+    currentPage?: number | undefined;
+    totalPages?: number | undefined;
+    maxVisible?: number | undefined;
+    showPrevNext?: boolean | undefined;
+    showIcons?: boolean | undefined;
+    previousLabel?: string | undefined;
+    nextLabel?: string | undefined;
+    totalItems?: number | undefined;
+    perPage?: number | undefined;
+}, {
+    change: CustomEvent<any>;
+    pageChange: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    prev: {};
+    next: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "default" | "table" | undefined;
+    currentPage?: number | undefined;
+    totalPages?: number | undefined;
+    maxVisible?: number | undefined;
+    showPrevNext?: boolean | undefined;
+    showIcons?: boolean | undefined;
+    previousLabel?: string | undefined;
+    nextLabel?: string | undefined;
+    totalItems?: number | undefined;
+    perPage?: number | undefined;
+}, {
+    change: CustomEvent<any>;
+    pageChange: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    prev: {};
+    next: {};
+}, {}, 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=Pagination.svelte.d.ts.map

package/dist/primitives/Pagination/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsPA;;;;;;;;;;;;;;;;;;;;;eAA8Q;6CAdjO,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/primitives/Radio/Radio.svelte

@@ -0,0 +1,60 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {string} The value of this radio option */
+  export let value = "";
+  /** @type {string} The currently selected value (bind:group) */
+  export let group = "";
+  /** @type {string} Name attribute for grouping radios */
+  export let name = "";
+  /** @type {boolean} Whether the radio is disabled */
+  export let disabled = false;
+  /** @type {boolean|undefined} Direct checked prop for API compatibility */
+  export let checked = undefined;
+  /** @type {'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow'} Color variant */
+  export let color = 'blue';
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  // Support both checked prop and group binding
+  $: isChecked = checked !== undefined ? checked : group === value;
+
+  function handleChange() {
+    group = value;
+    dispatch("change", { value });
+  }
+
+  // Flowbite color variants
+  const colorClasses = {
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600',
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600'
+  };
+
+  $: colorClass = colorClasses[color] || colorClasses.blue;
+</script>
+
+<label
+  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}"
+>
+  <input
+    type="radio"
+    {name}
+    {value}
+    {disabled}
+    checked={isChecked}
+    on:change={handleChange}
+    class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+  />
+  {#if $$slots.default}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      <slot />
+    </span>
+  {/if}
+</label>

package/dist/primitives/Radio/Radio.svelte.d.ts

@@ -0,0 +1,56 @@
+export default Radio;
+type Radio = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    group?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Radio: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    group?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: 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=Radio.svelte.d.ts.map

package/dist/primitives/Radio/Radio.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Radio/Radio.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA+EA;;;;;cAjBW,OAAO,GAAC,SAAS;;;;;;;;;;;eAiB0J;sCAThJ,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"}

package/dist/primitives/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/primitives/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/primitives/Skeleton/CardPlaceholder.svelte.d.ts.map

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