@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/recipes/inputs/SelectDropdown.svelte

@@ -1,39 +1,28 @@
 <script>
-  /**
-   * SelectDropdown - A self-contained dropdown with trigger button and option selection.
-   * Includes full keyboard navigation (Arrow keys, Home, End, Escape).
-   *
-   * @example
-   * <SelectDropdown
-   *   options={[{ label: 'Option 1', value: 'opt1' }, { label: 'Option 2', value: 'opt2' }]}
-   *   bind:selected
-   *   placeholder="Select an option"
-   *   on:select={(e) => console.log(e.detail)}
-   * />
-   */
-  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+  import { tick } from "svelte";
   import { ChevronDownOutline } from "../../primitives/Icons";
 
-  /** @type {Array<{label: string, value: string}>} Options to display */
-  export let options = [];
-  /** @type {{label: string, value: string}|null} Currently selected option */
-  export let selected = null;
-  /** @type {string} Placeholder text when no option is selected */
-  export let placeholder = "Select";
-  /** @type {string} Additional CSS classes for the container */
-  let className = "";
-  export { className as class };
-  /** @type {boolean} Whether the dropdown is disabled */
-  export let disabled = false;
-
-  const dispatch = createEventDispatcher();
-
-  let isOpen = false;
-  let triggerRef;
-  let menuRef;
-  let containerRef;
-  let focusedIndex = -1;
-  let optionElements = [];
+  let {
+    /** @type {Array<{label: string, value: string}>} Options to display */
+    options = [],
+    /** @type {{label: string, value: string}|null} Currently selected option */
+    selected = $bindable(null),
+    /** @type {string} Placeholder text when no option is selected */
+    placeholder = "Select",
+    /** @type {string} Additional CSS classes for the container */
+    class: className = "",
+    /** @type {boolean} Whether the dropdown is disabled */
+    disabled = false,
+    // Callbacks
+    onselect,
+  } = $props();
+
+  let isOpen = $state(false);
+  let triggerRef = $state();
+  let menuRef = $state();
+  let containerRef = $state();
+  let focusedIndex = $state(-1);
+  let optionElements = $state([]);
 
   async function toggleDropdown() {
     if (disabled) return;
@@ -61,7 +50,7 @@
 
   function selectOption(option) {
     selected = option;
-    dispatch("select", option);
+    onselect?.(option);
     isOpen = false;
     triggerRef?.focus();
   }
@@ -115,18 +104,15 @@
     }
   }
 
-  onMount(() => {
+  $effect(() => {
     if (typeof window !== "undefined") {
       // Use mousedown for click-outside to capture before click completes
       document.addEventListener("mousedown", handleClickOutside, true);
       document.addEventListener("keydown", handleKeyDown);
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof window !== "undefined") {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
     }
   });
 </script>
@@ -136,7 +122,7 @@
     bind:this={triggerRef}
     type="button"
     class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    on:click|preventDefault={toggleDropdown}
+    onclick={toggleDropdown}
     aria-haspopup="listbox"
     aria-expanded={isOpen}
     aria-label={placeholder}
@@ -161,7 +147,7 @@
             <button
               type="button"
               class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
-              on:click|preventDefault={() => selectOption(option)}
+              onclick={() => selectOption(option)}
               role="option"
               aria-selected={selected?.value === option.value}
             >

package/dist/recipes/inputs/SelectDropdown.svelte.d.ts

@@ -1,51 +1,22 @@
 export default SelectDropdown;
-type SelectDropdown = SvelteComponent<{
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    placeholder?: string | undefined;
-    options?: {
-        label: string;
-        value: string;
-    }[] | undefined;
-    selected?: {
-        label: string;
-        value: string;
-    } | null | undefined;
-}, {
-    select: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type SelectDropdown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SelectDropdown: import("svelte").Component<{
+    options?: any[];
+    selected?: any;
+    placeholder?: string;
+    class?: string;
+    disabled?: boolean;
+    onselect: any;
+}, {}, "selected">;
+type $$ComponentProps = {
+    options?: any[];
+    selected?: any;
+    placeholder?: string;
+    class?: string;
+    disabled?: boolean;
+    onselect: any;
 };
-declare const SelectDropdown: $$__sveltets_2_IsomorphicComponent<{
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    placeholder?: string | undefined;
-    options?: {
-        label: string;
-        value: string;
-    }[] | undefined;
-    selected?: {
-        label: string;
-        value: string;
-    } | null | 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=SelectDropdown.svelte.d.ts.map

package/dist/recipes/inputs/SelectDropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAmLA;;;;;eAdyB,MAAM;eAAS,MAAM;;;eAC3B,MAAM;eAAS,MAAM;;;;;;mBAa2I;6CATtI,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":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.svelte.js"],"names":[],"mappings":";;;;;AAsJA;cA5I+B,GAAG,EAAE;eAAa,GAAG;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;cAAY,GAAG;mBA4IhE;wBA5I1C;IAAE,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/recipes/modals/AlertModal.svelte

@@ -14,56 +14,29 @@
    *   autoClose={3000}
    * />
    */
-  import { createEventDispatcher, onDestroy } from 'svelte';
   import Modal from '../../primitives/Modal/Modal.svelte';
   import Button from '../../primitives/Button/Button.svelte';
   import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
 
-  /** Whether the modal is visible */
-  export let show = false;
-
-  /** Alert variant */
-  export let variant = 'info';
-
-  /** Alert title */
-  export let title = '';
-
-  /** Alert message */
-  export let message = '';
-
-  /** Button text */
-  export let buttonText = 'OK';
-
-  /** Auto-close delay in milliseconds (0 to disable) */
-  export let autoClose = 0;
-
-  /** Modal size */
-  export let size = 'small';
-
-  const dispatch = createEventDispatcher();
-  let autoCloseTimer;
-
-  // Start auto-close timer when modal opens
-  $: if (show && autoClose > 0) {
-    clearTimeout(autoCloseTimer);
-    autoCloseTimer = setTimeout(() => {
-      closeModal();
-    }, autoClose);
-  }
-
-  onDestroy(() => {
-    clearTimeout(autoCloseTimer);
-  });
-
-  function closeModal() {
-    show = false;
-    dispatch('close');
-  }
-
-  function handleConfirm() {
-    dispatch('confirm');
-    closeModal();
-  }
+  let {
+    /** Whether the modal is visible */
+    show = $bindable(false),
+    /** Alert variant */
+    variant = 'info',
+    /** Alert title */
+    title = '',
+    /** Alert message */
+    message = '',
+    /** Button text */
+    buttonText = 'OK',
+    /** Auto-close delay in milliseconds (0 to disable) */
+    autoClose = 0,
+    /** Modal size */
+    size = 'small',
+    /** Callbacks */
+    onclose,
+    onconfirm,
+  } = $props();
 
   // Variant styles
   const variantStyles = {
@@ -89,42 +62,68 @@
     }
   };
 
-  $: styles = variantStyles[variant] || variantStyles.info;
+  let styles = $derived(variantStyles[variant] || variantStyles.info);
+
+  function closeModal() {
+    show = false;
+    onclose?.();
+  }
+
+  function handleConfirm() {
+    onconfirm?.();
+    closeModal();
+  }
+
+  // Start auto-close timer when modal opens
+  $effect(() => {
+    if (show && autoClose > 0) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, autoClose);
+      return () => clearTimeout(timer);
+    }
+  });
 </script>
 
 <Modal bind:show {size}>
-  <div slot="header" class="text-center">
-    <div class="flex justify-center items-center">
-      <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
-        {#if variant === 'success'}
-          <CheckOutline class="w-7 h-7 {styles.icon}" />
-        {:else if variant === 'error'}
-          <CloseOutline class="w-7 h-7 {styles.icon}" />
-        {:else if variant === 'warning'}
-          <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
-        {:else}
-          <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
-        {/if}
+  {#snippet header()}
+    <div class="text-center">
+      <div class="flex justify-center items-center">
+        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
+          {#if variant === 'success'}
+            <CheckOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'error'}
+            <CloseOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'warning'}
+            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
+          {:else}
+            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
+          {/if}
+        </div>
       </div>
+      {#if title}
+        <h2 class="text-xl font-medium text-gray-900 dark:text-white mt-4">{title}</h2>
+      {/if}
     </div>
-    {#if title}
-      <h2 class="text-xl font-medium text-gray-900 dark:text-white mt-4">{title}</h2>
-    {/if}
-  </div>
-
-  <div slot="body" class="text-center mt-4">
-    {#if message}
-      <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{message}</p>
-    {/if}
-  </div>
+  {/snippet}
 
-  <div slot="footer" class="w-full">
-    <Button
-      size="full"
-      variant={styles.button}
-      on:click={handleConfirm}
-    >
-      {buttonText}
-    </Button>
-  </div>
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if message}
+        <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{message}</p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      <Button
+        size="full"
+        variant={styles.button}
+        onclick={handleConfirm}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  {/snippet}
 </Modal>

package/dist/recipes/modals/AlertModal.svelte.d.ts

@@ -1,45 +1,28 @@
 export default AlertModal;
-type AlertModal = SvelteComponent<{
-    size?: string | undefined;
-    title?: string | undefined;
-    message?: string | undefined;
-    variant?: string | undefined;
-    show?: boolean | undefined;
-    buttonText?: string | undefined;
-    autoClose?: number | undefined;
-}, {
-    close: CustomEvent<any>;
-    confirm: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type AlertModal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const AlertModal: import("svelte").Component<{
+    show?: boolean;
+    variant?: string;
+    title?: string;
+    message?: string;
+    buttonText?: string;
+    autoClose?: number;
+    size?: string;
+    onclose: any;
+    onconfirm: any;
+}, {}, "show">;
+type $$ComponentProps = {
+    show?: boolean;
+    variant?: string;
+    title?: string;
+    message?: string;
+    buttonText?: string;
+    autoClose?: number;
+    size?: string;
+    onclose: any;
+    onconfirm: any;
 };
-declare const AlertModal: $$__sveltets_2_IsomorphicComponent<{
-    size?: string | undefined;
-    title?: string | undefined;
-    message?: string | undefined;
-    variant?: string | undefined;
-    show?: boolean | undefined;
-    buttonText?: string | undefined;
-    autoClose?: number | undefined;
-}, {
-    close: CustomEvent<any>;
-    confirm: 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=AlertModal.svelte.d.ts.map

package/dist/recipes/modals/AlertModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0JA;;;;;;;;;;;;;mBAA4L;6CAT/I,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":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;AAwIA;WA5G4B,OAAO;cAAY,MAAM;YAAU,MAAM;cAAY,MAAM;iBAAe,MAAM;gBAAc,MAAM;WAAS,MAAM;aAAW,GAAG;eAAa,GAAG;eA4GpH;wBA5GtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAA;CAAE"}

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -1,35 +1,32 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "../../primitives/Modal/Modal.svelte";
 
-  export let show = false;
-  export let size = "default"; // "small" | "default" | "large"
-  export let title = "";
-  export let description = "";
-  export let warningText = "";
-  export let actions = [];
-  export let icon = null;
-  export let customIcon = null; // Alias for icon (used by some wrappers)
-  export let closeBtn = false; // To show close button
-
-  // Simple props-based API (alternative to actions array)
-  export let primaryButtonText = "";
-  export let secondaryButtonText = "";
-  export let variant = "default"; // "default" | "danger"
-
-  // Loading/disabled state
-  export let loading = false;
-  export let disabled = false;
-
-  const dispatch = createEventDispatcher();
-
-  // Resolve icon (support both prop names)
-  $: resolvedIcon = customIcon || icon;
-
-  // Build actions from simple props if actions array is empty
-  $: resolvedActions = actions.length > 0 ? actions : buildActionsFromProps();
+  let {
+    show = $bindable(false),
+    size = "default",
+    title = "",
+    description = "",
+    warningText = "",
+    actions = [],
+    icon = null,
+    customIcon = null,
+    closeBtn = false,
+    primaryButtonText = "",
+    secondaryButtonText = "",
+    variant = "default",
+    loading = false,
+    disabled = false,
+    onconfirm,
+    oncancel,
+    onclose,
+    ...restProps
+  } = $props();
+
+  let resolvedIcon = $derived(customIcon || icon);
+
+  let resolvedActions = $derived(actions.length > 0 ? actions : buildActionsFromProps());
 
   function buildActionsFromProps() {
     const result = [];
@@ -38,7 +35,7 @@
       result.push({
         label: secondaryButtonText,
         variant: "alternative",
-        onClick: () => dispatch("cancel")
+        onClick: () => oncancel?.()
       });
     }
 
@@ -46,7 +43,7 @@
       result.push({
         label: primaryButtonText,
         variant: variant === "danger" ? "red" : "default",
-        onClick: () => dispatch("confirm"),
+        onClick: () => onconfirm?.(),
         primary: true
       });
     }
@@ -57,30 +54,26 @@
   const handleAction = (action) => {
     if (disabled || loading) return;
     action.onClick?.();
-    dispatch(action.label.toLowerCase());
     show = false;
   };
 
   const handleClose = () => {
     if (disabled || loading) return;
-    dispatch("close");
+    onclose?.();
     show = false;
   };
 
   const getVariant = (action) => {
-    // If variant is already specified, use it
     if (action.variant) return action.variant;
 
     const { strokebtn, deemphasized, btnDanger, danger, textBtn } = action;
 
-    // Map old props to new variants
     if (strokebtn && deemphasized) return "alternative";
     if ((strokebtn && danger) || (btnDanger && strokebtn)) return "red-outline";
     if (strokebtn) return "outline";
     if (textBtn && danger) return "ghost-red";
     if (danger || btnDanger || action.label === "Delete") return "red";
 
-    // Default variant
     return undefined;
   };
 
@@ -102,56 +95,60 @@
   };
 </script>
 
-<Modal bind:show {size}>
-  <div slot="header" class="text-center">
-    {#if closeBtn}
-      <div class="flex justify-end -mt-2 -mr-2 mb-2">
-        <button
-          class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none transition-colors"
-          on:click={handleClose}
-          {disabled}
+<Modal bind:show {size} oncancel={handleClose} {...restProps}>
+  {#snippet header()}
+    <div class="text-center">
+      {#if closeBtn}
+        <div class="flex justify-end -mt-2 -mr-2 mb-2">
+          <button
+            class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+            onclick={handleClose}
+            {disabled}
+          >
+            <img src={Cancel} alt="Close" class="w-5 h-5" />
+          </button>
+        </div>
+      {/if}
+      {#if resolvedIcon}
+        <div class="flex justify-center mb-4">
+          <img src={resolvedIcon} alt="" class="w-12 h-12" />
+        </div>
+      {/if}
+      {#if title}
+        <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if description}
+        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
+          {description}
+        </p>
+      {/if}
+      {#if warningText}
+        <p class="mt-3 text-sm font-medium text-red-600 dark:text-red-400">
+          {warningText}
+        </p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="flex gap-3">
+      {#each resolvedActions as action}
+        <Button
+          size="full"
+          variant={getVariant(action)}
+          {...cleanActionProps(action)}
+          disabled={disabled || action.disabled}
+          loading={action.primary && loading}
+          onclick={() => handleAction(action)}
         >
-          <img src={Cancel} alt="Close" class="w-5 h-5" />
-        </button>
-      </div>
-    {/if}
-    {#if resolvedIcon}
-      <div class="flex justify-center mb-4">
-        <img src={resolvedIcon} alt="" class="w-12 h-12" />
-      </div>
-    {/if}
-    {#if title}
-      <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
-    {/if}
-  </div>
-
-  <div slot="body" class="text-center mt-4">
-    {#if description}
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-        {description}
-      </p>
-    {/if}
-    {#if warningText}
-      <p class="mt-3 text-sm font-medium text-red-600 dark:text-red-400">
-        {warningText}
-      </p>
-    {/if}
-  </div>
-
-  <div slot="footer" class="flex gap-3">
-    {#each resolvedActions as action}
-      <Button
-        size="full"
-        variant={getVariant(action)}
-        {...cleanActionProps(action)}
-        beforeIcon={action.beforeIcon}
-        afterIcon={action.afterIcon}
-        disabled={disabled || action.disabled}
-        loading={action.primary && loading}
-        on:click={() => handleAction(action)}
-      >
-        {action.label}
-      </Button>
-    {/each}
-  </div>
+          {action.label}
+        </Button>
+      {/each}
+    </div>
+  {/snippet}
 </Modal>