@getmicdrop/svelte-components 5.3.15 → 5.4.0

package/dist/recipes/modals/ModalStateManager.svelte

@@ -1,77 +1,77 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Icon from "../../primitives/Icons/Icon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-  import { typography } from '../../tokens/typography';
-
-  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
-
-  interface Props {
-    /** Whether the modal is currently processing an action */
-    isProcessing?: boolean;
-    /** Whether the action completed successfully */
-    isSuccess?: boolean;
-    /** Icon to show on success (from Icon component) */
-    successIcon?: IconName;
-    /** Title to show on success */
-    successTitle?: string;
-    /** Optional message to show on success */
-    successMessage?: string;
-    /** Text to show while processing */
-    processingMessage?: string;
-    /** Button text for the success state */
-    successButtonText?: string;
-    /** Callback when success button is clicked */
-    onSuccessClose?: () => void;
-    /** Custom success icon color class */
-    successIconColor?: string;
-    /** Custom processing icon color class */
-    processingIconBgColor?: string;
-    /** Child content (normal state) */
-    children?: Snippet;
-  }
-
-  let {
-    isProcessing = false,
-    isSuccess = false,
-    successIcon = "CheckCircle",
-    successTitle = "Success",
-    successMessage = "",
-    processingMessage = "Processing your request",
-    successButtonText = "Continue",
-    onSuccessClose = () => {},
-    successIconColor = "text-green-600",
-    processingIconBgColor = "bg-orange-300",
-    children
-  }: Props = $props();
-</script>
-
-{#if isProcessing && !isSuccess}
-  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
-    <div
-      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
-    >
-      <span class="animate-spin">
-        <Icon name="Reload" size="20" />
-      </span>
-    </div>
-    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
-  </div>
-{:else if isSuccess}
-  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
-    <div class={successIconColor}>
-      <Icon name={successIcon} size="48" />
-    </div>
-    <h2 class={`${typography.h2} text-center`}>
-      {successTitle}
-    </h2>
-    {#if successMessage}
-      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
-    {/if}
-    <Button variant="default" size="full" onclick={onSuccessClose}>
-      {successButtonText}
-    </Button>
-  </div>
-{:else}
-  {@render children?.()}
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+  import { typography } from '../../tokens/typography';
+
+  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
+
+  interface Props {
+    /** Whether the modal is currently processing an action */
+    isProcessing?: boolean;
+    /** Whether the action completed successfully */
+    isSuccess?: boolean;
+    /** Icon to show on success (from Icon component) */
+    successIcon?: IconName;
+    /** Title to show on success */
+    successTitle?: string;
+    /** Optional message to show on success */
+    successMessage?: string;
+    /** Text to show while processing */
+    processingMessage?: string;
+    /** Button text for the success state */
+    successButtonText?: string;
+    /** Callback when success button is clicked */
+    onSuccessClose?: () => void;
+    /** Custom success icon color class */
+    successIconColor?: string;
+    /** Custom processing icon color class */
+    processingIconBgColor?: string;
+    /** Child content (normal state) */
+    children?: Snippet;
+  }
+
+  let {
+    isProcessing = false,
+    isSuccess = false,
+    successIcon = "CheckCircle",
+    successTitle = "Success",
+    successMessage = "",
+    processingMessage = "Processing your request",
+    successButtonText = "Continue",
+    onSuccessClose = () => {},
+    successIconColor = "text-green-600",
+    processingIconBgColor = "bg-orange-300",
+    children
+  }: Props = $props();
+</script>
+
+{#if isProcessing && !isSuccess}
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div
+      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
+    >
+      <span class="animate-spin">
+        <Icon name="Reload" size="20" />
+      </span>
+    </div>
+    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
+  </div>
+{:else if isSuccess}
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div class={successIconColor}>
+      <Icon name={successIcon} size="48" />
+    </div>
+    <h2 class={`${typography.h2} text-center`}>
+      {successTitle}
+    </h2>
+    {#if successMessage}
+      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
+    {/if}
+    <Button variant="default" size="full" onclick={onSuccessClose}>
+      {successButtonText}
+    </Button>
+  </div>
+{:else}
+  {@render children?.()}
+{/if}

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  interface Props {
-    /** Whether the modal is visible */
-    show?: boolean;
-    /** Modal title */
-    title?: string;
-    /** Modal description */
-    description?: string;
-    /** Warning text */
-    warningText?: string;
-    /** Callback when modal is cancelled */
-    oncancel?: () => void;
-    /** Header content */
-    header?: Snippet;
-    /** Body content */
-    body?: Snippet;
-    /** Footer content */
-    footer?: Snippet;
-  }
-
-  let {
-    show = $bindable(false),
-    title = '',
-    description = '',
-    warningText = '',
-    oncancel,
-    header,
-    body,
-    footer
-  }: Props = $props();
-</script>
-
-<Modal bind:show oncancel={oncancel}>
-  {#snippet headerSnippet()}
-    {#if header}
-      {@render header()}
-    {:else}
-      {title}
-    {/if}
-  {/snippet}
-
-  {#snippet bodySnippet()}
-    {#if body}
-      {@render body()}
-    {:else}
-      {description}
-      {#if warningText}
-        <br /> {warningText}
-      {/if}
-    {/if}
-  {/snippet}
-
-  {#snippet footerSnippet()}
-    {#if footer}
-      {@render footer()}
-    {:else}
-      <Button variant="alternative">Cancel</Button>
-      <Button variant="default">Confirm</Button>
-    {/if}
-  {/snippet}
-</Modal>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  interface Props {
+    /** Whether the modal is visible */
+    show?: boolean;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Warning text */
+    warningText?: string;
+    /** Callback when modal is cancelled */
+    oncancel?: () => void;
+    /** Header content */
+    header?: Snippet;
+    /** Body content */
+    body?: Snippet;
+    /** Footer content */
+    footer?: Snippet;
+  }
+
+  let {
+    show = $bindable(false),
+    title = '',
+    description = '',
+    warningText = '',
+    oncancel,
+    header,
+    body,
+    footer
+  }: Props = $props();
+</script>
+
+<Modal bind:show oncancel={oncancel}>
+  {#snippet headerSnippet()}
+    {#if header}
+      {@render header()}
+    {:else}
+      {title}
+    {/if}
+  {/snippet}
+
+  {#snippet bodySnippet()}
+    {#if body}
+      {@render body()}
+    {:else}
+      {description}
+      {#if warningText}
+        <br /> {warningText}
+      {/if}
+    {/if}
+  {/snippet}
+
+  {#snippet footerSnippet()}
+    {#if footer}
+      {@render footer()}
+    {:else}
+      <Button variant="alternative">Cancel</Button>
+      <Button variant="default">Confirm</Button>
+    {/if}
+  {/snippet}
+</Modal>