@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/primitives/Radio/Radio.svelte

@@ -1,33 +1,39 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
+  import type { Snippet } 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 };
+  interface Props {
+    value?: string;
+    group?: string;
+    name?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: { value: string }) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
 
-  const dispatch = createEventDispatcher();
+  let {
+    value = "",
+    group = $bindable(""),
+    name = "",
+    disabled = false,
+    checked = undefined,
+    color = 'blue',
+    class: className = "",
+    onchange,
+    children,
+    ...restProps
+  }: Props = $props();
 
-  // Support both checked prop and group binding
-  $: isChecked = checked !== undefined ? checked : group === value;
+  let isChecked = $derived(checked !== undefined ? checked : group === value);
 
   function handleChange() {
     group = value;
-    dispatch("change", { value });
+    onchange?.({ 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',
@@ -37,11 +43,12 @@
     yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600'
   };
 
-  $: colorClass = colorClasses[color] || colorClasses.blue;
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
 </script>
 
 <label
   class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}"
+  {...restProps}
 >
   <input
     type="radio"
@@ -49,12 +56,12 @@
     {value}
     {disabled}
     checked={isChecked}
-    on:change={handleChange}
+    onchange={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}
+  {#if children}
     <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      <slot />
+      {@render children()}
     </span>
   {/if}
 </label>

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

@@ -1,56 +1,19 @@
-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;
+import type { Snippet } from 'svelte';
+interface Props {
+    value?: string;
+    group?: string;
+    name?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: {
+        value: string;
+    }) => void;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;
 //# sourceMappingURL=Radio.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Radio/Radio.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgDH,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Skeleton/CardPlaceholder.svelte

@@ -1,98 +1,87 @@
-<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>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showAvatar?: boolean;
+    showImage?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showAvatar = true,
+    showImage = true,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const cardSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-56',
+    xl: 'h-64',
+    '2xl': 'h-72'
+  };
+
+  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(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"
+  {...restProps}
+>
+  {#if showImage}
+    <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}
+
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+  <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}
+    <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

@@ -1,35 +1,12 @@
-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;
+interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showAvatar?: boolean;
+    showImage?: boolean;
+    class?: string;
+    [key: string]: unknown;
 }
+declare const CardPlaceholder: import("svelte").Component<Props, {}, "">;
+type CardPlaceholder = ReturnType<typeof CardPlaceholder>;
+export default CardPlaceholder;
 //# sourceMappingURL=CardPlaceholder.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"CardPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/CardPlaceholder.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmEH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/primitives/Skeleton/ImagePlaceholder.svelte

@@ -1,65 +1,59 @@
-<script>
-  /**
-   * Flowbite-native Image Placeholder skeleton component.
-   * Displays a placeholder for images with an icon indicating image content.
-   *
-   * @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 text lines below the image */
-  export let showText = false;
-
-  /** @type {string} Additional CSS classes */
-  let className = '';
-  export { className as class };
-
-  // Flowbite height classes for image area by size
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-64',
-    xl: 'h-80',
-    '2xl': 'h-96'
-  };
-
-  $: imageHeightClass = imageSizeClasses[size] || imageSizeClasses.md;
-  $: animateClass = animate ? 'animate-pulse' : '';
-</script>
-
-<div
-  role="status"
-  class="{animateClass} {className}"
-  aria-label="Loading image"
->
-  <!-- Image placeholder with icon -->
-  <div class="flex items-center justify-center w-full {imageHeightClass} 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 20 18"
-    >
-      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-    </svg>
-  </div>
-
-  {#if showText}
-    <!-- Optional text lines below image -->
-    <div class="mt-4">
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
-      <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-md mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
-    </div>
-  {/if}
-
-  <span class="sr-only">Loading...</span>
-</div>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showText?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showText = false,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-64',
+    xl: 'h-80',
+    '2xl': 'h-96'
+  };
+
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{animateClass} {className}"
+  aria-label="Loading image"
+  {...restProps}
+>
+  <div class="flex items-center justify-center w-full {imageHeightClass} 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 20 18"
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
+    </svg>
+  </div>
+
+  {#if showText}
+    <div class="mt-4">
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
+      <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-md mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
+    </div>
+  {/if}
+
+  <span class="sr-only">Loading...</span>
+</div>

package/dist/primitives/Skeleton/ImagePlaceholder.svelte.d.ts

@@ -1,33 +1,11 @@
-export default ImagePlaceholder;
-type ImagePlaceholder = SvelteComponent<{
-    class?: string | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
-    animate?: boolean | undefined;
-    showText?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ImagePlaceholder: $$__sveltets_2_IsomorphicComponent<{
-    class?: string | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
-    animate?: boolean | undefined;
-    showText?: 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;
+interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showText?: boolean;
+    class?: string;
+    [key: string]: unknown;
 }
+declare const ImagePlaceholder: import("svelte").Component<Props, {}, "">;
+type ImagePlaceholder = ReturnType<typeof ImagePlaceholder>;
+export default ImagePlaceholder;
 //# sourceMappingURL=ImagePlaceholder.svelte.d.ts.map

package/dist/primitives/Skeleton/ImagePlaceholder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/ImagePlaceholder.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AA0EA;;;;;;;mBAAmK;6CATtH,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":"ImagePlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/ImagePlaceholder.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA8CH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}