@getmicdrop/svelte-components 5.10.3 → 5.13.0

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>
-
-{#snippet headerContent()}
-  {#if header}
-    {@render header()}
-  {:else}
-    {title}
-  {/if}
-{/snippet}
-
-{#snippet bodyContent()}
-  {#if body}
-    {@render body()}
-  {:else}
-    {description}
-    {#if warningText}
-      <br /> {warningText}
-    {/if}
-  {/if}
-{/snippet}
-
-{#snippet footerContent()}
-  {#if footer}
-    {@render footer()}
-  {:else}
-    <Button variant="alternative">Cancel</Button>
-    <Button variant="default">Confirm</Button>
-  {/if}
-{/snippet}
-
-<Modal bind:show {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />
+<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 */
+    open?: 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 {
+    open = $bindable(false),
+    title = '',
+    description = '',
+    warningText = '',
+    oncancel,
+    header,
+    body,
+    footer
+  }: Props = $props();
+</script>
+
+{#snippet headerContent()}
+  {#if header}
+    {@render header()}
+  {:else}
+    {title}
+  {/if}
+{/snippet}
+
+{#snippet bodyContent()}
+  {#if body}
+    {@render body()}
+  {:else}
+    {description}
+    {#if warningText}
+      <br /> {warningText}
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet footerContent()}
+  {#if footer}
+    {@render footer()}
+  {:else}
+    <Button variant="alternative">Cancel</Button>
+    <Button variant="default">Confirm</Button>
+  {/if}
+{/snippet}
+
+<Modal bind:open {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -17,7 +17,7 @@ interface Props {
     /** Footer content */
     footer?: Snippet;
 }
-declare const ModalTestWrapper: import("svelte").Component<Props, {}, "show">;
+declare const ModalTestWrapper: import("svelte").Component<Props, {}, "open">;
 type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
 export default ModalTestWrapper;
 //# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

package/dist/recipes/modals/StatusModal.spec.js

@@ -7,7 +7,7 @@ function setupTest(args = {}) {
   const user = userEvent.setup();
   const { component } = render(StatusModal, {
     props: {
-      show: true,
+      open: true,
       title: "Test Status",
       description: "This is a test description",
       ...args,
@@ -27,7 +27,7 @@ describe("StatusModal Component Tests", () => {
 
   describe("Basic Rendering", () => {
     test("Does not render when show is false", () => {
-      render(StatusModal, { props: { show: false } });
+      render(StatusModal, { props: { open: false } });
       expect(screen.queryByText("Test Status")).not.toBeInTheDocument();
     });
 

package/dist/recipes/modals/StatusModal.svelte

@@ -1,206 +1,206 @@
-<script>
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
-  import Button from "../../primitives/Button/Button.svelte";
-  import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import { typography } from '../../tokens/typography';
-
-  let {
-    show = $bindable(false),
-    size = "small",
-    title = "",
-    subtitle = "",
-    description = "",
-    buttonText = "Ok",
-    iconType = "success",
-    customIcon = null,
-    image = null,
-    disabled = false,
-    loading = false,
-    variant = null,
-    actions = [],
-    closeBtn = false,
-    onconfirm,
-    onclose,
-    ...restProps
-  } = $props();
-
-  let effectiveVariant = $derived(variant || iconType);
-  let isProfileMode = $derived(!!image);
-
-  const handleButtonClick = () => {
-    if (!disabled && !loading) {
-      onconfirm?.();
-      closeModal();
-    }
-  };
-
-  const handleAction = (action) => {
-    if (!disabled && !loading) {
-      action.onClick?.();
-      if (!action.keepOpen) {
-        closeModal();
-      }
-    }
-  };
-
-  const closeModal = () => {
-    show = false;
-    onclose?.();
-  };
-
-  const handleClose = () => {
-    if (disabled || loading) return;
-    closeModal();
-  };
-
-  const getActionVariant = (action) => {
-    if (action.variant) return action.variant;
-    const label = action.label.toLowerCase();
-    if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
-      return 'red';
-    }
-    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
-      return 'default';
-    }
-    return 'alternative';
-  };
-
-  const getIconColors = (type) => {
-    switch (type) {
-      case "success":
-        return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
-        };
-      case "error":
-        return {
-          bg: "bg-red-100 dark:bg-red-900/30",
-          icon: "text-red-600 dark:text-red-400",
-        };
-      case "warning":
-        return {
-          bg: "bg-amber-100 dark:bg-amber-900/30",
-          icon: "text-amber-600 dark:text-amber-400",
-        };
-      case "info":
-        return {
-          bg: "bg-blue-100 dark:bg-blue-900/30",
-          icon: "text-blue-600 dark:text-blue-400",
-        };
-      default:
-        return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
-        };
-    }
-  };
-
-  const getButtonVariant = (type) => {
-    switch (type) {
-      case "error":
-        return "red";
-      case "warning":
-        return "default";
-      default:
-        return "default";
-    }
-  };
-
-  let colors = $derived(getIconColors(effectiveVariant));
-  let buttonVariant = $derived(getButtonVariant(effectiveVariant));
-</script>
-
-<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 variant="icon" size="xs" onclick={handleClose} {disabled}>
-            <img src={Cancel} alt="Close" class="w-5 h-5" />
-          </Button>
-        </div>
-      {/if}
-      {#if isProfileMode}
-        <div class="flex justify-center">
-          <img
-            src={image}
-            alt={title}
-            class="w-16 h-16 rounded-lg object-cover"
-          />
-        </div>
-        <div class="mt-4">
-          {#if title}
-            <h2 class={typography.h2}>{title}</h2>
-          {/if}
-          {#if subtitle}
-            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
-          {/if}
-        </div>
-      {:else}
-        <div class="flex justify-center items-center">
-          {#if customIcon}
-            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
-              <img src={customIcon} alt="Status icon" class="w-8 h-8" />
-            </div>
-          {:else}
-            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
-              {#if effectiveVariant === "success"}
-                <CheckOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "error"}
-                <CloseOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "warning"}
-                <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "info"}
-                <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
-              {/if}
-            </div>
-          {/if}
-        </div>
-        {#if title}
-          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
-        {/if}
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if description}
-        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
-          {description}
-        </p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      {#if actions.length > 0}
-        <div class="flex gap-3">
-          {#each actions as action}
-            <Button
-              size="full"
-              variant={getActionVariant(action)}
-              disabled={action.disabled || disabled}
-              loading={action.loading || (loading && action.primary)}
-              onclick={() => handleAction(action)}
-            >
-              {action.label}
-            </Button>
-          {/each}
-        </div>
-      {:else}
-        <Button
-          size="full"
-          variant={buttonVariant}
-          {disabled}
-          {loading}
-          onclick={handleButtonClick}
-        >
-          {buttonText}
-        </Button>
-      {/if}
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
+  import Button from "../../primitives/Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
+
+  let {
+    open = $bindable(false),
+    size = "sm",
+    title = "",
+    subtitle = "",
+    description = "",
+    buttonText = "Ok",
+    iconType = "success",
+    customIcon = null,
+    image = null,
+    disabled = false,
+    loading = false,
+    variant = null,
+    actions = [],
+    closeBtn = false,
+    onconfirm,
+    onclose,
+    ...restProps
+  } = $props();
+
+  let effectiveVariant = $derived(variant || iconType);
+  let isProfileMode = $derived(!!image);
+
+  const handleButtonClick = () => {
+    if (!disabled && !loading) {
+      onconfirm?.();
+      closeModal();
+    }
+  };
+
+  const handleAction = (action) => {
+    if (!disabled && !loading) {
+      action.onClick?.();
+      if (!action.keepOpen) {
+        closeModal();
+      }
+    }
+  };
+
+  const closeModal = () => {
+    open = false;
+    onclose?.();
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    closeModal();
+  };
+
+  const getActionVariant = (action) => {
+    if (action.variant) return action.variant;
+    const label = action.label.toLowerCase();
+    if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
+      return 'red';
+    }
+    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
+      return 'default';
+    }
+    return 'alternative';
+  };
+
+  const getIconColors = (type) => {
+    switch (type) {
+      case "success":
+        return {
+          bg: "bg-green-100 dark:bg-green-900/30",
+          icon: "text-green-600 dark:text-green-400",
+        };
+      case "error":
+        return {
+          bg: "bg-red-100 dark:bg-red-900/30",
+          icon: "text-red-600 dark:text-red-400",
+        };
+      case "warning":
+        return {
+          bg: "bg-amber-100 dark:bg-amber-900/30",
+          icon: "text-amber-600 dark:text-amber-400",
+        };
+      case "info":
+        return {
+          bg: "bg-blue-100 dark:bg-blue-900/30",
+          icon: "text-blue-600 dark:text-blue-400",
+        };
+      default:
+        return {
+          bg: "bg-green-100 dark:bg-green-900/30",
+          icon: "text-green-600 dark:text-green-400",
+        };
+    }
+  };
+
+  const getButtonVariant = (type) => {
+    switch (type) {
+      case "error":
+        return "red";
+      case "warning":
+        return "default";
+      default:
+        return "default";
+    }
+  };
+
+  let colors = $derived(getIconColors(effectiveVariant));
+  let buttonVariant = $derived(getButtonVariant(effectiveVariant));
+</script>
+
+<Modal bind:open {size} oncancel={handleClose} {...restProps}>
+  {#snippet header()}
+    <div class="text-center">
+      {#if closeBtn}
+        <div class="flex justify-end -mt-2 -mr-2 mb-2">
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
+            <img src={Cancel} alt="Close" class="w-5 h-5" />
+          </Button>
+        </div>
+      {/if}
+      {#if isProfileMode}
+        <div class="flex justify-center">
+          <img
+            src={image}
+            alt={title}
+            class="w-16 h-16 rounded-lg object-cover"
+          />
+        </div>
+        <div class="mt-4">
+          {#if title}
+            <h2 class={typography.h2}>{title}</h2>
+          {/if}
+          {#if subtitle}
+            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
+          {/if}
+        </div>
+      {:else}
+        <div class="flex justify-center items-center">
+          {#if customIcon}
+            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
+              <img src={customIcon} alt="Status icon" class="w-8 h-8" />
+            </div>
+          {:else}
+            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
+              {#if effectiveVariant === "success"}
+                <CheckOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "error"}
+                <CloseOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "warning"}
+                <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "info"}
+                <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
+              {/if}
+            </div>
+          {/if}
+        </div>
+        {#if title}
+          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
+        {/if}
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if description}
+        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
+          {description}
+        </p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      {#if actions.length > 0}
+        <div class="flex gap-3">
+          {#each actions as action}
+            <Button
+              size="full"
+              variant={getActionVariant(action)}
+              disabled={action.disabled || disabled}
+              loading={action.loading || (loading && action.primary)}
+              onclick={() => handleAction(action)}
+            >
+              {action.label}
+            </Button>
+          {/each}
+        </div>
+      {:else}
+        <Button
+          size="full"
+          variant={buttonVariant}
+          {disabled}
+          {loading}
+          onclick={handleButtonClick}
+        >
+          {buttonText}
+        </Button>
+      {/if}
+    </div>
+  {/snippet}
+</Modal>

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

@@ -4,7 +4,7 @@ type StatusModal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const StatusModal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     subtitle?: string;
@@ -20,9 +20,9 @@ declare const StatusModal: import("svelte").Component<{
     closeBtn?: boolean;
     onconfirm: any;
     onclose: any;
-} & Record<string, any>, {}, "show">;
+} & Record<string, any>, {}, "open">;
 type $$ComponentProps = {
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     subtitle?: string;