@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Modal/InputModal.svelte

@@ -1,65 +1,42 @@
 <script>
+  import { createEventDispatcher } from "svelte";
+  import { ExclamationTriangleOutline } from "../Icons";
   import Button from "../Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "./Modal.svelte";
 
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} [show] - Whether the modal is visible
-   * @property {'small'|'default'|'large'} [size] - Modal size
-   * @property {string} [title] - Modal title
-   * @property {string} [description] - Modal description
-   * @property {boolean} [closeBtn] - Show close button
-   * @property {boolean} [persistent] - Prevent closing by backdrop/escape
-   * @property {string} [inputLabel] - Input label
-   * @property {string} [inputPlaceholder] - Input placeholder
-   * @property {'text'|'email'|'password'|'textarea'} [inputType] - Input type
-   * @property {string} [inputValue] - Input value
-   * @property {boolean} [inputRequired] - Whether input is required
-   * @property {number} [inputRows] - Textarea rows
-   * @property {any} [inputIcon] - Input icon component
-   * @property {string} [helpText] - Helper text
-   * @property {string} [errorMessage] - Error message
-   * @property {boolean} [showError] - Show error state
-   * @property {boolean} [validateEmail] - Validate email format
-   * @property {string} [primaryButtonText] - Primary button text
-   * @property {string} [secondaryButtonText] - Secondary button text
-   * @property {string} [primaryButtonVariant] - Primary button variant
-   * @property {boolean} [disabled] - Disabled state
-   * @property {boolean} [loading] - Loading state
-   * @property {Function} [onconfirm] - Confirm callback
-   * @property {Function} [oncancel] - Cancel callback
-   * @property {Function} [onclose] - Close callback
-   */
-
-  /** @type {Props} */
-  let {
-    show = $bindable(false),
-    size = "default",
-    title = "",
-    description = "",
-    closeBtn = false,
-    persistent = false,
-    inputLabel = "",
-    inputPlaceholder = "",
-    inputType = "text",
-    inputValue = $bindable(""),
-    inputRequired = false,
-    inputRows = 4,
-    inputIcon = null,
-    helpText = "",
-    errorMessage = "",
-    showError = false,
-    validateEmail = false,
-    primaryButtonText = "Confirm",
-    secondaryButtonText = "Cancel",
-    primaryButtonVariant = "blue-solid",
-    disabled = false,
-    loading = false,
-    onconfirm,
-    oncancel,
-    onclose
-  } = $props();
+  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) => {
@@ -67,139 +44,136 @@
     return emailRegex.test(email);
   };
 
-  let emailError = $derived(validateEmail && inputValue && !isValidEmail(inputValue));
-  let isEmpty = $derived(inputRequired && (!inputValue || inputValue.trim() === ""));
-  let hasError = $derived(showError || emailError);
-  let isDisabled = $derived(disabled || loading || isEmpty || emailError);
+  $: emailError = validateEmail && inputValue && !isValidEmail(inputValue);
+  $: isEmpty = inputRequired && (!inputValue || inputValue.trim() === "");
+  $: hasError = showError || emailError;
+  $: isDisabled = disabled || loading || isEmpty || emailError;
 
   const handlePrimaryAction = () => {
     if (!isDisabled) {
-      onconfirm?.({ value: inputValue });
+      dispatch("confirm", { value: inputValue });
     }
   };
 
   const handleSecondaryAction = () => {
     if (!disabled && !loading) {
-      oncancel?.();
+      dispatch("cancel");
       closeModal();
     }
   };
 
   const closeModal = () => {
     show = false;
-    onclose?.();
+    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} oncancel={handleClose}>
-  {#snippet header()}
-    <div 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"
-            onclick={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>
-  {/snippet}
+<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>
 
-  {#snippet body()}
-    <div class="text-left mt-4">
-      {#if description}
-        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-4">
-          {description}
-        </p>
+  <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}
 
-      <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
+      {#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}
-            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"
+            required={inputRequired}
             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>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="flex gap-3">
-      {#if secondaryButtonText}
-        <Button
-          size="full"
-          variant="gray-outline"
-          onclick={handleSecondaryAction}
-          disabled={disabled || loading}
-        >
-          {secondaryButtonText}
-        </Button>
+            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">
+          <ExclamationTriangleOutline class="w-4 h-4" />
+          {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={primaryButtonVariant}
-        onclick={handlePrimaryAction}
-        disabled={isDisabled}
-        {loading}
+        variant="alternative"
+        on:click={handleSecondaryAction}
+        disabled={disabled || loading}
       >
-        {primaryButtonText}
+        {secondaryButtonText}
       </Button>
-    </div>
-  {/snippet}
+    {/if}
+
+    <Button
+      size="full"
+      variant={primaryButtonVariant}
+      on:click={handlePrimaryAction}
+      disabled={isDisabled}
+      {loading}
+    >
+      {primaryButtonText}
+    </Button>
+  </div>
 </Modal>

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

@@ -1,210 +1,77 @@
 export default InputModal;
-type InputModal = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const InputModal: import("svelte").Component<{
-    /**
-     * - Whether the modal is visible
-     */
-    show?: boolean | undefined;
-    /**
-     * - Modal size
-     */
-    size?: "default" | "small" | "large" | undefined;
-    /**
-     * - Modal title
-     */
+type InputModal = SvelteComponent<{
+    size?: string | undefined;
     title?: string | undefined;
-    /**
-     * - Modal description
-     */
+    show?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    persistent?: boolean | undefined;
     description?: string | undefined;
-    /**
-     * - Show close button
-     */
     closeBtn?: boolean | undefined;
-    /**
-     * - Prevent closing by backdrop/escape
-     */
-    persistent?: boolean | undefined;
-    /**
-     * - Input label
-     */
+    primaryButtonText?: string | undefined;
+    secondaryButtonText?: string | undefined;
     inputLabel?: string | undefined;
-    /**
-     * - Input placeholder
-     */
     inputPlaceholder?: string | undefined;
-    /**
-     * - Input type
-     */
-    inputType?: "textarea" | "text" | "email" | "password" | undefined;
-    /**
-     * - Input value
-     */
+    inputType?: string | undefined;
     inputValue?: string | undefined;
-    /**
-     * - Whether input is required
-     */
     inputRequired?: boolean | undefined;
-    /**
-     * - Textarea rows
-     */
     inputRows?: number | undefined;
-    /**
-     * - Input icon component
-     */
-    inputIcon?: any;
-    /**
-     * - Helper text
-     */
+    inputIcon?: null | undefined;
     helpText?: string | undefined;
-    /**
-     * - Error message
-     */
     errorMessage?: string | undefined;
-    /**
-     * - Show error state
-     */
     showError?: boolean | undefined;
-    /**
-     * - Validate email format
-     */
     validateEmail?: boolean | undefined;
-    /**
-     * - Primary button text
-     */
-    primaryButtonText?: string | undefined;
-    /**
-     * - Secondary button text
-     */
-    secondaryButtonText?: string | undefined;
-    /**
-     * - Primary button variant
-     */
     primaryButtonVariant?: string | undefined;
-    /**
-     * - Disabled state
-     */
+}, {
+    confirm: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InputModal: $$__sveltets_2_IsomorphicComponent<{
+    size?: string | undefined;
+    title?: string | undefined;
+    show?: boolean | undefined;
     disabled?: boolean | undefined;
-    /**
-     * - Loading state
-     */
     loading?: boolean | undefined;
-    /**
-     * - Confirm callback
-     */
-    onconfirm?: Function | undefined;
-    /**
-     * - Cancel callback
-     */
-    oncancel?: Function | undefined;
-    /**
-     * - Close callback
-     */
-    onclose?: Function | undefined;
-}, {}, "show" | "inputValue">;
-type Props = {
-    /**
-     * - Whether the modal is visible
-     */
-    show?: boolean | undefined;
-    /**
-     * - Modal size
-     */
-    size?: "default" | "small" | "large" | undefined;
-    /**
-     * - Modal title
-     */
-    title?: string | undefined;
-    /**
-     * - Modal description
-     */
+    persistent?: boolean | undefined;
     description?: string | undefined;
-    /**
-     * - Show close button
-     */
     closeBtn?: boolean | undefined;
-    /**
-     * - Prevent closing by backdrop/escape
-     */
-    persistent?: boolean | undefined;
-    /**
-     * - Input label
-     */
+    primaryButtonText?: string | undefined;
+    secondaryButtonText?: string | undefined;
     inputLabel?: string | undefined;
-    /**
-     * - Input placeholder
-     */
     inputPlaceholder?: string | undefined;
-    /**
-     * - Input type
-     */
-    inputType?: "textarea" | "text" | "email" | "password" | undefined;
-    /**
-     * - Input value
-     */
+    inputType?: string | undefined;
     inputValue?: string | undefined;
-    /**
-     * - Whether input is required
-     */
     inputRequired?: boolean | undefined;
-    /**
-     * - Textarea rows
-     */
     inputRows?: number | undefined;
-    /**
-     * - Input icon component
-     */
-    inputIcon?: any;
-    /**
-     * - Helper text
-     */
+    inputIcon?: null | undefined;
     helpText?: string | undefined;
-    /**
-     * - Error message
-     */
     errorMessage?: string | undefined;
-    /**
-     * - Show error state
-     */
     showError?: boolean | undefined;
-    /**
-     * - Validate email format
-     */
     validateEmail?: boolean | undefined;
-    /**
-     * - Primary button text
-     */
-    primaryButtonText?: string | undefined;
-    /**
-     * - Secondary button text
-     */
-    secondaryButtonText?: string | undefined;
-    /**
-     * - Primary button variant
-     */
     primaryButtonVariant?: string | undefined;
-    /**
-     * - Disabled state
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Loading state
-     */
-    loading?: boolean | undefined;
-    /**
-     * - Confirm callback
-     */
-    onconfirm?: Function | undefined;
-    /**
-     * - Cancel callback
-     */
-    oncancel?: Function | undefined;
-    /**
-     * - Close callback
-     */
-    onclose?: Function | 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

@@ -1 +1 @@
-{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/InputModal.svelte.js"],"names":[],"mappings":";;;;;AAsLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA5JgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA4JsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA5JzC,GAAG"}
+{"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.stories.svelte

@@ -1,21 +1,23 @@
-<script context="module">
-  import { Story } from "@storybook/addon-svelte-csf";
-  import ModalProgress from "./Modal.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ModalProgress from "./Modal.svelte";
+
+  const { Story } = defineMeta({
     title: "Components/Modal/ModalProgress",
     component: ModalProgress,
-  };
+  });
 
   let show1 = false;
   let show2 = false;
   let show3 = false;
+
 </script>
 
 <Story name="Basic Modal">
   <button
     on:click={() => (show1 = true)}
-    class="px-4 py-2 bg-blue-600 text-white rounded-lg"
+    class="px-4 py-2 bg-primary text-white rounded-lg"
   >
     Open Basic Modal
   </button>
@@ -24,7 +26,7 @@
       <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
     </div>
     <div slot="body">
-      <p class="text-gray-600">This is the modal body content.</p>
+      <p class="text-gray-500 dark:text-gray-400">This is the modal body content.</p>
     </div>
     <div slot="footer">
       <button
@@ -40,7 +42,7 @@
 <Story name="Processing State">
   <button
     on:click={() => (show2 = true)}
-    class="px-4 py-2 bg-blue-600 text-white rounded-lg"
+    class="px-4 py-2 bg-primary text-white rounded-lg"
   >
     Open Processing Modal
   </button>
@@ -50,7 +52,7 @@
         <div
           class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
         ></div>
-        <p class="text-gray-600">Processing your request...</p>
+        <p class="text-gray-500 dark:text-gray-400">Processing your request...</p>
       </div>
     </div>
   </ModalProgress>
@@ -66,9 +68,9 @@
   <ModalProgress bind:show={show3} isSuccess={true}>
     <div slot="body">
       <div class="flex flex-col items-center gap-4 text-center">
-        <div class="text-green-600 text-5xl">✓</div>
+        <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>
         <h3 class="text-xl font-semibold">Success!</h3>
-        <p class="text-gray-600">Your action was completed successfully.</p>
+        <p class="text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
       </div>
     </div>
     <div slot="footer">