@getmicdrop/svelte-components 2.2.0 → 2.4.0

package/dist/components/Modal/InputModal.svelte

@@ -0,0 +1,180 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Button from "../Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "./Modal.svelte";
+
+  export let show = false;
+  export let size = "default"; // "small" | "default" | "large"
+  export let title = "";
+  export let description = "";
+  export let closeBtn = false; // To show close button
+  export let persistent = false; // When true, prevents closing by clicking backdrop or pressing Escape
+
+  // Input configuration
+  export let inputLabel = "";
+  export let inputPlaceholder = "";
+  export let inputType = "text"; // text | email | password | textarea
+  export let inputValue = "";
+  export let inputRequired = false;
+  export let inputRows = 4; // For textarea
+  export let inputIcon = null; // SVG component for input prefix icon
+  export let helpText = ""; // Helper text below input
+
+  // Validation
+  export let errorMessage = "";
+  export let showError = false;
+  export let validateEmail = false; // Auto-validate email format
+
+  // Buttons
+  export let primaryButtonText = "Confirm";
+  export let secondaryButtonText = "Cancel";
+  export let primaryButtonVariant = "blue-solid"; // blue-solid | red-solid
+
+  // State
+  export let disabled = false;
+  export let loading = false;
+
+  const dispatch = createEventDispatcher();
+
+  // Email validation
+  const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  $: emailError = validateEmail && inputValue && !isValidEmail(inputValue);
+  $: isEmpty = inputRequired && (!inputValue || inputValue.trim() === "");
+  $: hasError = showError || emailError;
+  $: isDisabled = disabled || loading || isEmpty || emailError;
+
+  const handlePrimaryAction = () => {
+    if (!isDisabled) {
+      dispatch("confirm", { value: inputValue });
+    }
+  };
+
+  const handleSecondaryAction = () => {
+    if (!disabled && !loading) {
+      dispatch("cancel");
+      closeModal();
+    }
+  };
+
+  const closeModal = () => {
+    show = false;
+    dispatch("close");
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    closeModal();
+  };
+
+  // Reset input when modal closes
+  $: if (!show) {
+    // Optionally reset - controlled externally via inputValue prop
+  }
+</script>
+
+<Modal bind:show {size} {persistent}>
+  <div slot="header" class="text-left">
+    {#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}
+        >
+          <img src={Cancel} alt="Close" class="w-5 h-5" />
+        </button>
+      </div>
+    {/if}
+    {#if title}
+      <h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
+    {/if}
+  </div>
+
+  <div slot="body" class="text-left mt-4">
+    {#if description}
+      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-4">
+        {description}
+      </p>
+    {/if}
+
+    <div>
+      {#if inputLabel}
+        <label
+          for="modal-input"
+          class="block text-sm font-medium text-gray-900 dark:text-white mb-2"
+        >
+          {inputLabel}
+        </label>
+      {/if}
+
+      {#if inputType === "textarea"}
+        <textarea
+          id="modal-input"
+          bind:value={inputValue}
+          placeholder={inputPlaceholder}
+          rows={inputRows}
+          class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+          disabled={disabled || loading}
+        ></textarea>
+      {:else}
+        <div class="relative">
+          {#if inputIcon}
+            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+              <svelte:component this={inputIcon} class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+            </div>
+          {/if}
+          <input
+            id="modal-input"
+            type={inputType}
+            bind:value={inputValue}
+            placeholder={inputPlaceholder}
+            required={inputRequired}
+            disabled={disabled || loading}
+            class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+          />
+        </div>
+      {/if}
+
+      {#if hasError && (errorMessage || emailError)}
+        <p class="mt-2 text-sm text-red-600 dark:text-red-400 font-medium flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          {emailError ? "Please enter a valid email address" : errorMessage}
+        </p>
+      {:else if helpText && !hasError}
+        <p class="text-xs font-normal text-gray-500 dark:text-gray-400 pt-2">
+          {helpText}
+        </p>
+      {/if}
+    </div>
+  </div>
+
+  <div slot="footer" class="flex gap-3">
+    {#if secondaryButtonText}
+      <Button
+        size="full"
+        variant="gray-outline"
+        on:click={handleSecondaryAction}
+        disabled={disabled || loading}
+      >
+        {secondaryButtonText}
+      </Button>
+    {/if}
+
+    <Button
+      size="full"
+      variant={primaryButtonVariant}
+      on:click={handlePrimaryAction}
+      disabled={isDisabled}
+      {loading}
+    >
+      {primaryButtonText}
+    </Button>
+  </div>
+</Modal>

package/dist/components/Modal/InputModal.svelte.d.ts

@@ -0,0 +1,77 @@
+export default InputModal;
+type InputModal = SvelteComponent<{
+    title?: string | undefined;
+    size?: string | undefined;
+    show?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    persistent?: boolean | undefined;
+    description?: string | undefined;
+    closeBtn?: boolean | undefined;
+    primaryButtonText?: string | undefined;
+    secondaryButtonText?: string | undefined;
+    inputLabel?: string | undefined;
+    inputPlaceholder?: string | undefined;
+    inputType?: string | undefined;
+    inputValue?: string | undefined;
+    inputRequired?: boolean | undefined;
+    inputRows?: number | undefined;
+    inputIcon?: null | undefined;
+    helpText?: string | undefined;
+    errorMessage?: string | undefined;
+    showError?: boolean | undefined;
+    validateEmail?: boolean | undefined;
+    primaryButtonVariant?: string | undefined;
+}, {
+    confirm: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InputModal: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    size?: string | undefined;
+    show?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    persistent?: boolean | undefined;
+    description?: string | undefined;
+    closeBtn?: boolean | undefined;
+    primaryButtonText?: string | undefined;
+    secondaryButtonText?: string | undefined;
+    inputLabel?: string | undefined;
+    inputPlaceholder?: string | undefined;
+    inputType?: string | undefined;
+    inputValue?: string | undefined;
+    inputRequired?: boolean | undefined;
+    inputRows?: number | undefined;
+    inputIcon?: null | undefined;
+    helpText?: string | undefined;
+    errorMessage?: string | undefined;
+    showError?: boolean | undefined;
+    validateEmail?: boolean | undefined;
+    primaryButtonVariant?: string | undefined;
+}, {
+    confirm: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: 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=InputModal.svelte.d.ts.map

package/dist/components/Modal/InputModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/InputModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAka;6CATrX,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"}

package/dist/components/Modal/Modal.svelte

@@ -8,6 +8,7 @@
   export let isProcessing = false;
   export let isSuccess = false;
   export let size = "default"; // "default" | "small" | "large"
+  export let persistent = false; // When true, prevents closing by clicking backdrop or pressing Escape
 
   const dispatch = createEventDispatcher();
 
@@ -16,7 +17,7 @@
 
   // Handle escape key
   function handleKeydown(event) {
-    if (event.key === "Escape" && show) {
+    if (event.key === "Escape" && show && !persistent) {
       resetModal();
     }
   }
@@ -72,7 +73,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="modal-backdrop"
-    on:click={resetModal}
+    on:click={persistent ? null : resetModal}
     transition:fade={{ duration: 300 }}
     role="dialog"
     aria-modal="true"
@@ -122,12 +123,17 @@
 {/if}
 
 <style>
+  /*
+   * Modal uses Tailwind-compatible colors with dark mode support.
+   * Works across projects without requiring CSS variable synchronization.
+   */
+
   .modal-backdrop {
     position: fixed;
     inset: 0;
     display: flex;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: var(--z-modal, 50);
+    z-index: 50;
 
     /* iOS scroll lock - prevent scroll bleed-through */
     touch-action: none;
@@ -149,7 +155,7 @@
 
   /* Mobile: Bottom sheet style */
   .modal-sheet {
-    background-color: hsl(var(--BG-Primary));
+    background-color: #ffffff;
     border-radius: 1.5rem 1.5rem 0 0;
     width: 100%;
     max-height: 90vh;
@@ -164,6 +170,10 @@
     overscroll-behavior: contain;
   }
 
+  :global(.dark) .modal-sheet {
+    background-color: #1f2937; /* gray-800 */
+  }
+
   /* Hide sheet on desktop */
   @media (min-width: 768px) {
     .modal-sheet {
@@ -181,13 +191,18 @@
   .sheet-handle {
     width: 2.5rem;
     height: 0.25rem;
-    background-color: hsl(var(--Stroke-Primary));
+    background-color: #d1d5db; /* gray-300 */
     border-radius: 0.125rem;
   }
 
+  :global(.dark) .sheet-handle {
+    background-color: #4b5563; /* gray-600 */
+  }
+
   .modal-inner {
-    padding: 0.5rem 1.5rem 1.5rem;
-    padding-bottom: calc(1.5rem + var(--safe-bottom, 0px));
+    padding: 1.5rem;
+    /* Account for bottom nav bars (~70px) plus safe area */
+    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
     overflow-y: auto;
     flex: 1;
   }
@@ -195,13 +210,18 @@
   /* Desktop: Centered modal style */
   .modal-centered {
     display: none;
-    background-color: hsl(var(--BG-Primary));
+    background-color: #ffffff;
     padding: 1.5rem;
     border-radius: 1rem;
     max-width: 420px;
     width: 100%;
     max-height: calc(100vh - 4rem);
     overflow-y: auto;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  :global(.dark) .modal-centered {
+    background-color: #1f2937; /* gray-800 */
   }
 
   @media (min-width: 768px) {
@@ -223,6 +243,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
+    margin-top: 1.5rem; /* 24px - consistent gap before buttons */
+  }
+
+  .modal-footer:empty {
+    display: none;
+    margin-top: 0;
   }
 
   @media (min-width: 768px) {

package/dist/components/Modal/Modal.svelte.d.ts

@@ -4,6 +4,7 @@ type Modal = SvelteComponent<{
     show?: boolean | undefined;
     isSuccess?: boolean | undefined;
     isProcessing?: boolean | undefined;
+    persistent?: boolean | undefined;
 }, {
     click: PointerEvent;
     cancel: CustomEvent<any>;
@@ -21,6 +22,7 @@ declare const Modal: $$__sveltets_2_IsomorphicComponent<{
     show?: boolean | undefined;
     isSuccess?: boolean | undefined;
     isProcessing?: boolean | undefined;
+    persistent?: boolean | undefined;
 }, {
     click: PointerEvent;
     cancel: CustomEvent<any>;

package/dist/components/Modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkIA;;;;;;;;;;;;;;eAAmK;6CAdtH,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":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmIA;;;;;;;;;;;;;;;eAAgL;6CAdnI,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"}

package/dist/components/Modal/StatusModal.svelte

@@ -0,0 +1,221 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Button from "../Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "./Modal.svelte";
+
+  export let show = false;
+  export let size = "small"; // "small" | "default" | "large"
+  export let title = "";
+  export let subtitle = ""; // For profile-style modals (e.g., performer email)
+  export let description = "";
+  export let buttonText = "Ok";
+  export let iconType = "success"; // success | error | warning | info
+  export let customIcon = null;
+  export let image = null; // For profile photos (rounded square instead of circular icon)
+  export let disabled = false;
+  export let loading = false;
+  export let variant = null; // Alternative to iconType for consistency with ConfirmationModal
+  export let actions = []; // For multiple buttons (like ProfileAddedModal)
+  export let closeBtn = false; // To show close button
+
+  const dispatch = createEventDispatcher();
+
+  // Use variant if provided, otherwise fallback to iconType
+  $: effectiveVariant = variant || iconType;
+
+  // Check if we're in profile mode (image instead of icon)
+  $: isProfileMode = !!image;
+
+  const handleButtonClick = () => {
+    if (!disabled && !loading) {
+      dispatch("confirm");
+      closeModal();
+    }
+  };
+
+  const handleAction = (action) => {
+    if (!disabled && !loading) {
+      action.onClick?.();
+      dispatch(action.label.toLowerCase());
+      if (!action.keepOpen) {
+        closeModal();
+      }
+    }
+  };
+
+  const closeModal = () => {
+    show = false;
+    dispatch("close");
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    closeModal();
+  };
+
+  // Get button variant for action buttons
+  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-solid';
+    }
+    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
+      return 'blue-solid';
+    }
+    return 'gray-outline';
+  };
+
+  // Icon colors based on variant
+  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",
+        };
+    }
+  };
+
+  // Button variant based on status type
+  const getButtonVariant = (type) => {
+    switch (type) {
+      case "error":
+        return "red-solid";
+      case "warning":
+        return "blue-solid";
+      default:
+        return "blue-solid";
+    }
+  };
+
+  $: colors = getIconColors(effectiveVariant);
+  $: buttonVariant = getButtonVariant(effectiveVariant);
+</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}
+        >
+          <img src={Cancel} alt="Close" class="w-5 h-5" />
+        </button>
+      </div>
+    {/if}
+    {#if isProfileMode}
+      <!-- Profile mode: show image as rounded square -->
+      <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="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
+        {/if}
+        {#if subtitle}
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{subtitle}</p>
+        {/if}
+      </div>
+    {:else}
+      <!-- Status mode: show icon in colored circle -->
+      <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"}
+              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            {:else if effectiveVariant === "error"}
+              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            {:else if effectiveVariant === "warning"}
+              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            {:else if effectiveVariant === "info"}
+              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      {#if title}
+        <h2 class="text-xl font-medium text-gray-900 dark:text-white mt-4">{title}</h2>
+      {/if}
+    {/if}
+  </div>
+
+  <div slot="body" class="text-center mt-4">
+    {#if description}
+      <p class="text-sm leading-relaxed {isProfileMode ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-gray-400'}">
+        {description}
+      </p>
+    {/if}
+  </div>
+
+  <div slot="footer" class="w-full">
+    {#if actions.length > 0}
+      <!-- Multiple buttons mode -->
+      <div class="flex gap-3">
+        {#each actions as action}
+          <Button
+            size="full"
+            variant={getActionVariant(action)}
+            beforeIcon={action.beforeIcon}
+            afterIcon={action.afterIcon}
+            disabled={action.disabled || disabled}
+            loading={action.loading || (loading && action.primary)}
+            on:click={() => handleAction(action)}
+          >
+            {action.label}
+          </Button>
+        {/each}
+      </div>
+    {:else}
+      <!-- Single button mode -->
+      <Button
+        size="full"
+        variant={buttonVariant}
+        {disabled}
+        {loading}
+        on:click={handleButtonClick}
+      >
+        {buttonText}
+      </Button>
+    {/if}
+  </div>
+</Modal>

package/dist/components/Modal/StatusModal.svelte.d.ts

@@ -0,0 +1,59 @@
+export default StatusModal;
+type StatusModal = SvelteComponent<{
+    title?: string | undefined;
+    size?: string | undefined;
+    variant?: null | undefined;
+    actions?: any[] | undefined;
+    show?: boolean | undefined;
+    subtitle?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    image?: null | undefined;
+    buttonText?: string | undefined;
+    description?: string | undefined;
+    customIcon?: null | undefined;
+    closeBtn?: boolean | undefined;
+    iconType?: string | undefined;
+}, {
+    confirm: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const StatusModal: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    size?: string | undefined;
+    variant?: null | undefined;
+    actions?: any[] | undefined;
+    show?: boolean | undefined;
+    subtitle?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    image?: null | undefined;
+    buttonText?: string | undefined;
+    description?: string | undefined;
+    customIcon?: null | undefined;
+    closeBtn?: boolean | undefined;
+    iconType?: string | undefined;
+}, {
+    confirm: CustomEvent<any>;
+    close: 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=StatusModal.svelte.d.ts.map

package/dist/components/Modal/StatusModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/StatusModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2NA;;;;;;;;;;;;;;;;;;;;mBAA0Q;6CAT7N,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"}