@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/recipes/modals/AlertModal.svelte

@@ -1,139 +1,139 @@
-<script>
-  /**
-   * AlertModal - Simple alert with single action and optional auto-close
-   *
-   * A lighter alternative to StatusModal for simple notifications.
-   * Supports auto-close after a delay.
-   *
-   * @example
-   * <AlertModal
-   *   bind:open={showAlert}
-   *   variant="success"
-   *   title="Changes saved"
-   *   message="Your changes have been saved successfully."
-   *   autoClose={3000}
-   * />
-   */
-  import Modal from '../../primitives/Modal/Modal.svelte';
-  import Button from '../../primitives/Button/Button.svelte';
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  const defaultLabels = {
-    ok: 'OK',
-  };
-
-  let {
-    /** Whether the modal is visible */
-    open = $bindable(false),
-    /** Alert variant */
-    variant = 'info',
-    /** Alert title */
-    title = '',
-    /** Alert message */
-    message = '',
-    /** Button text */
-    buttonText = undefined,
-    /** Auto-close delay in milliseconds (0 to disable) */
-    autoClose = 0,
-    /** Modal size */
-    size = 'sm',
-    /** Callbacks */
-    onclose,
-    onconfirm,
-    /** Override user-visible strings */
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-  let effectiveButtonText = $derived(buttonText ?? labels.ok);
-
-  // Variant styles
-  const variantStyles = {
-    success: {
-      bg: 'bg-green-100 dark:bg-green-900/30',
-      icon: 'text-green-600 dark:text-green-400',
-      button: 'default'
-    },
-    error: {
-      bg: 'bg-red-100 dark:bg-red-900/30',
-      icon: 'text-red-600 dark:text-red-400',
-      button: 'red'
-    },
-    warning: {
-      bg: 'bg-amber-100 dark:bg-amber-900/30',
-      icon: 'text-amber-600 dark:text-amber-400',
-      button: 'default'
-    },
-    info: {
-      bg: 'bg-blue-100 dark:bg-blue-900/30',
-      icon: 'text-blue-600 dark:text-blue-400',
-      button: 'default'
-    }
-  };
-
-  let styles = $derived(variantStyles[variant] || variantStyles.info);
-
-  function closeModal() {
-    open = false;
-    onclose?.();
-  }
-
-  function handleConfirm() {
-    onconfirm?.();
-    closeModal();
-  }
-
-  // Start auto-close timer when modal opens
-  $effect(() => {
-    if (open && autoClose > 0) {
-      const timer = setTimeout(() => {
-        closeModal();
-      }, autoClose);
-      return () => clearTimeout(timer);
-    }
-  });
-</script>
-
-<Modal bind:open {size}>
-  {#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={`${typography.h2} mt-4`}>{title}</h2>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if message}
-        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      <Button
-        size="full"
-        variant={styles.button}
-        onclick={handleConfirm}
-      >
-        {effectiveButtonText}
-      </Button>
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  /**
+   * AlertModal - Simple alert with single action and optional auto-close
+   *
+   * A lighter alternative to StatusModal for simple notifications.
+   * Supports auto-close after a delay.
+   *
+   * @example
+   * <AlertModal
+   *   bind:open={showAlert}
+   *   variant="success"
+   *   title="Changes saved"
+   *   message="Your changes have been saved successfully."
+   *   autoClose={3000}
+   * />
+   */
+  import Modal from '../../primitives/Modal/Modal.svelte';
+  import Button from '../../primitives/Button/Button.svelte';
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  const defaultLabels = {
+    ok: 'OK',
+  };
+
+  let {
+    /** Whether the modal is visible */
+    open = $bindable(false),
+    /** Alert variant */
+    variant = 'info',
+    /** Alert title */
+    title = '',
+    /** Alert message */
+    message = '',
+    /** Button text */
+    buttonText = undefined,
+    /** Auto-close delay in milliseconds (0 to disable) */
+    autoClose = 0,
+    /** Modal size */
+    size = 'sm',
+    /** Callbacks */
+    onclose,
+    onconfirm,
+    /** Override user-visible strings */
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+  let effectiveButtonText = $derived(buttonText ?? labels.ok);
+
+  // Variant styles
+  const variantStyles = {
+    success: {
+      bg: 'bg-green-100 dark:bg-green-900/30',
+      icon: 'text-green-600 dark:text-green-400',
+      button: 'default'
+    },
+    error: {
+      bg: 'bg-red-100 dark:bg-red-900/30',
+      icon: 'text-red-600 dark:text-red-400',
+      button: 'red'
+    },
+    warning: {
+      bg: 'bg-amber-100 dark:bg-amber-900/30',
+      icon: 'text-amber-600 dark:text-amber-400',
+      button: 'default'
+    },
+    info: {
+      bg: 'bg-blue-100 dark:bg-blue-900/30',
+      icon: 'text-blue-600 dark:text-blue-400',
+      button: 'default'
+    }
+  };
+
+  let styles = $derived(variantStyles[variant] || variantStyles.info);
+
+  function closeModal() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleConfirm() {
+    onconfirm?.();
+    closeModal();
+  }
+
+  // Start auto-close timer when modal opens
+  $effect(() => {
+    if (open && autoClose > 0) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, autoClose);
+      return () => clearTimeout(timer);
+    }
+  });
+</script>
+
+<Modal bind:open {size}>
+  {#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={`${typography.h2} mt-4`}>{title}</h2>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if message}
+        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      <Button
+        size="full"
+        variant={styles.button}
+        onclick={handleConfirm}
+      >
+        {effectiveButtonText}
+      </Button>
+    </div>
+  {/snippet}
+</Modal>