@juspay/svelte-ui-components 2.28.2 → 2.28.3

package/dist/EmptyState/EmptyState.svelte

@@ -11,7 +11,9 @@
     </div>
   {/if}
   <div class="empty-state-title">{title}</div>
-  <div class="empty-state-description">{description}</div>
+  {#if typeof description === 'string' && description.length > 0}
+    <div class="empty-state-description">{description}</div>
+  {/if}
   {#if typeof children === 'function'}
     <div class="empty-state-actions">
       {@render children()}

package/dist/EmptyState/properties.d.ts

@@ -2,9 +2,9 @@ import type { Snippet } from 'svelte';
 export type EmptyStateProperties = MandatoryEmptyStateProperties & OptionalEmptyStateProperties;
 export type MandatoryEmptyStateProperties = {
     title: string;
-    description: string;
 };
 export type OptionalEmptyStateProperties = {
+    description?: string;
     icon?: Snippet;
     children?: Snippet;
     classes?: string;

package/dist/FileInput/FileInput.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { FileInputProperties } from './properties';
+
+  let {
+    trigger,
+    accept,
+    multiple = false,
+    maxSizeBytes,
+    disabled = false,
+    testId,
+    classes,
+    onfiles,
+    onerror
+  }: FileInputProperties = $props();
+
+  let dragOver = $state(false);
+  let inputEl: HTMLInputElement | null = $state(null);
+
+  function openFilePicker(): void {
+    if (!disabled) {
+      inputEl?.click();
+    }
+  }
+
+  function isAccepted(file: File): boolean {
+    if (typeof accept !== 'string' || accept.length === 0) {
+      return true;
+    }
+    const tokens = accept.split(',').map((token) => token.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileMime = file.type.toLowerCase();
+
+    return tokens.some((token) => {
+      if (token.startsWith('.')) {
+        return fileName.endsWith(token);
+      }
+      if (token.endsWith('/*')) {
+        const baseType = token.slice(0, -2);
+        return fileMime.startsWith(baseType + '/');
+      }
+      return fileMime === token;
+    });
+  }
+
+  function processFiles(rawFiles: FileList | null): void {
+    if (rawFiles === null || rawFiles.length === 0) {
+      return;
+    }
+
+    const fileArray = Array.from(rawFiles);
+    const rejected: string[] = [];
+    const accepted: File[] = [];
+
+    for (const file of fileArray) {
+      if (!isAccepted(file)) {
+        rejected.push(`"${file.name}" has an unsupported type.`);
+        continue;
+      }
+      if (typeof maxSizeBytes === 'number' && file.size > maxSizeBytes) {
+        const limitMb = (maxSizeBytes / (1024 * 1024)).toFixed(1);
+        rejected.push(`"${file.name}" exceeds the ${limitMb} MB limit.`);
+        continue;
+      }
+      accepted.push(file);
+    }
+
+    if (rejected.length > 0) {
+      onerror?.(rejected.join(' '));
+    }
+    if (accepted.length > 0) {
+      onfiles?.(accepted);
+    }
+  }
+
+  function handleInputChange(event: Event): void {
+    const target = event.currentTarget;
+    if (!(target instanceof HTMLInputElement)) {
+      return;
+    }
+    processFiles(target.files);
+    target.value = '';
+  }
+
+  function handleDragOver(event: DragEvent): void {
+    event.preventDefault();
+    if (!disabled) {
+      dragOver = true;
+    }
+  }
+
+  function handleDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    dragOver = false;
+  }
+
+  function handleDrop(event: DragEvent): void {
+    event.preventDefault();
+    dragOver = false;
+    if (!disabled) {
+      processFiles(event.dataTransfer?.files ?? null);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openFilePicker();
+    }
+  }
+</script>
+
+<div
+  class="file-input {classes ?? ''}"
+  class:file-input-dragover={dragOver}
+  class:file-input-disabled={disabled}
+  data-pw={testId}
+  role="button"
+  tabindex={disabled ? -1 : 0}
+  aria-disabled={disabled}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  onkeydown={handleKeyDown}
+>
+  <input
+    bind:this={inputEl}
+    type="file"
+    class="file-input-hidden"
+    {accept}
+    {multiple}
+    {disabled}
+    data-pw={typeof testId === 'string' ? `${testId}-input` : null}
+    onchange={handleInputChange}
+    tabindex="-1"
+    aria-hidden="true"
+  />
+
+  {@render trigger({ openFilePicker, dragOver, disabled })}
+</div>
+
+<style>
+  .file-input {
+    display: var(--file-input-display, inline-flex);
+    flex-direction: var(--file-input-flex-direction, column);
+    align-items: var(--file-input-align-items, center);
+    justify-content: var(--file-input-justify-content, center);
+    padding: var(--file-input-padding);
+    border: var(--file-input-border);
+    border-radius: var(--file-input-radius);
+    background: var(--file-input-background);
+    gap: var(--file-input-gap);
+    text-align: var(--file-input-text-align, center);
+    transition: var(--file-input-transition);
+    cursor: pointer;
+  }
+
+  .file-input:focus-visible {
+    outline: var(--file-input-focus-outline);
+    outline-offset: var(--file-input-focus-outline-offset);
+  }
+
+  .file-input-dragover {
+    background: var(--file-input-dragover-background);
+    border-color: var(--file-input-dragover-border-color);
+  }
+
+  .file-input-disabled {
+    opacity: var(--file-input-disabled-opacity, 0.5);
+    cursor: var(--file-input-disabled-cursor, not-allowed);
+    pointer-events: none;
+  }
+
+  .file-input-hidden {
+    display: none;
+  }
+</style>

package/dist/FileInput/FileInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FileInputProperties } from './properties';
+declare const FileInput: import("svelte").Component<FileInputProperties, {}, "">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

package/dist/FileInput/properties.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+export type FileInputSnippetProps = {
+    openFilePicker: () => void;
+    dragOver: boolean;
+    disabled: boolean;
+};
+export type FileInputProperties = {
+    /** Content slot — receives { openFilePicker, dragOver, disabled } so consumers build any visual they need. */
+    trigger: Snippet<[FileInputSnippetProps]>;
+    accept?: string;
+    multiple?: boolean;
+    maxSizeBytes?: number;
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+    onfiles?: (files: File[]) => void;
+    onerror?: (message: string) => void;
+};

package/dist/FileInput/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Modal/Modal.svelte

@@ -57,7 +57,7 @@
   }
 
   function handleOverlayClick(event: MouseEvent) {
-    if (event.target && event.target === overlayDiv) {
+    if (event.target === overlayDiv) {
       debounce(() => {
         onoverlayClick?.();
       });
@@ -110,7 +110,7 @@
         <div class="modal-content {size}">
           {#if (typeof header?.leftImage === 'string' && header.leftImage.length > 0) || (typeof header?.text === 'string' && header.text.length > 0) || (typeof header?.rightImage === 'string' && header.rightImage.length > 0)}
             <div class="header">
-              {#if header.leftImage}
+              {#if typeof header.leftImage === 'string' && header.leftImage.length > 0}
                 <div
                   onclick={handleLeftImageClick}
                   {onkeydown}
@@ -121,12 +121,12 @@
                   <img class="header-left-img" src={header.leftImage} alt="" />
                 </div>
               {/if}
-              {#if header.text}
+              {#if typeof header.text === 'string' && header.text.length > 0}
                 <div class="header-text" data-pw={header.testId}>
                   {header.text}
                 </div>
               {/if}
-              {#if header.rightImage}
+              {#if typeof header.rightImage === 'string' && header.rightImage.length > 0}
                 <div
                   role="button"
                   tabindex="0"
@@ -255,6 +255,7 @@
     padding: var(--modal-header-padding, 18px 20px);
     border-radius: var(--modal-header-border-radius, 0px);
     border-bottom: var(--modal-header-border-bottom, none);
+    align-items: var(--modal-header-align-items, center);
   }
 
   .footer-content {

package/dist/Pagination/Pagination.svelte

@@ -8,7 +8,11 @@
     disabled = false,
     testId,
     onchange,
-    classes
+    classes,
+    hasMore = false,
+    prevButtonTestId,
+    nextButtonTestId,
+    onLoadMore
   }: PaginationProperties = $props();
 
   function generatePages(total: number, current: number, siblings: number): (number | '...')[] {
@@ -40,24 +44,39 @@
   let pages = $derived(generatePages(totalPages, currentPage, siblingCount));
 
   function goToPage(page: number): void {
-    if (disabled || page < 1 || page > totalPages || page === currentPage) {
+    const isForwardAllowed = hasMore || page <= totalPages;
+    if (disabled || page < 1 || !isForwardAllowed || page === currentPage) {
       return;
     }
     currentPage = page;
     onchange?.(page);
   }
+
+  let isNextDisabled = $derived(disabled || (!hasMore && currentPage >= totalPages));
+  // Cursor mode: on the last known page with more to load, swap the next-button
+  // for a load-more CTA.
+  let isLoadMore = $derived(hasMore && currentPage >= totalPages);
+
+  function loadMore(): void {
+    if (disabled) {
+      return;
+    }
+    currentPage = currentPage + 1;
+    onLoadMore?.();
+  }
 </script>
 
 <nav
   class="pagination {classes ?? ''}"
   class:disabled
-  data-pw={typeof testId === 'string' ? testId : null}
+  data-pw={typeof testId === 'string' && testId.length > 0 ? testId : null}
 >
   <button
     class="page-button prev-button"
     disabled={disabled || currentPage <= 1}
     onclick={() => goToPage(currentPage - 1)}
     aria-label="Previous page"
+    data-pw={typeof prevButtonTestId === 'string' ? prevButtonTestId : null}
   >
     &#8249;
   </button>
@@ -79,14 +98,27 @@
     {/if}
   {/each}
 
-  <button
-    class="page-button next-button"
-    disabled={disabled || currentPage >= totalPages}
-    onclick={() => goToPage(currentPage + 1)}
-    aria-label="Next page"
-  >
-    &#8250;
-  </button>
+  {#if isLoadMore}
+    <button
+      class="page-button load-more-button"
+      {disabled}
+      onclick={loadMore}
+      aria-label="Load more"
+      data-pw={typeof nextButtonTestId === 'string' ? nextButtonTestId : null}
+    >
+      &#8250;
+    </button>
+  {:else}
+    <button
+      class="page-button next-button"
+      disabled={isNextDisabled}
+      onclick={() => goToPage(currentPage + 1)}
+      aria-label="Next page"
+      data-pw={typeof nextButtonTestId === 'string' ? nextButtonTestId : null}
+    >
+      &#8250;
+    </button>
+  {/if}
 </nav>
 
 <style>
@@ -131,6 +163,19 @@
     font-weight: var(--pagination-active-font-weight, 600);
   }
 
+  .load-more-button {
+    width: var(--pagination-load-more-width, auto);
+    padding: var(--pagination-load-more-padding, 6px 14px);
+    color: var(--pagination-load-more-color, #3a4550);
+    background: var(--pagination-load-more-background, transparent);
+    border-color: var(--pagination-load-more-border-color, #d1d5db);
+  }
+
+  .load-more-button:hover:not(:disabled) {
+    color: var(--pagination-load-more-hover-color, #111827);
+    background: var(--pagination-load-more-hover-background, #f3f4f6);
+  }
+
   .page-button:disabled {
     opacity: var(--pagination-disabled-opacity, 0.5);
     cursor: var(--pagination-disabled-cursor, not-allowed);

package/dist/Pagination/properties.d.ts

@@ -8,7 +8,22 @@ export type OptionalPaginationProperties = {
     disabled?: boolean;
     testId?: string;
     classes?: string;
+    /**
+     * Cursor-pagination hint. When `true`, the next button stays enabled even
+     * when `currentPage >= totalPages` — use this when the total page count is
+     * not known ahead of time (e.g. cursor-based APIs). `totalPages` takes
+     * precedence when both are provided: the next button is enabled only if
+     * `hasMore` is `true` OR `currentPage < totalPages`. In cursor mode the
+     * next-button becomes a load-more CTA on the last known page (see onLoadMore).
+     */
+    hasMore?: boolean;
+    /** `data-pw` test-id for the previous-page button. */
+    prevButtonTestId?: string;
+    /** `data-pw` test-id for the next-page button. */
+    nextButtonTestId?: string;
 };
 export type PaginationEventProperties = {
     onchange?: (page: number) => void;
+    /** Fired when the load-more CTA is clicked (cursor mode). */
+    onLoadMore?: () => void;
 };

package/dist/Pill/Pill.svelte

@@ -9,6 +9,7 @@
     disabled = false,
     testId,
     dismissIcon,
+    leadingIcon,
     onclick,
     ondismiss,
     classes
@@ -52,6 +53,9 @@
   aria-disabled={interactive && disabled ? true : null}
   data-pw={typeof testId === 'string' ? testId : null}
 >
+  {#if typeof leadingIcon === 'function'}
+    <span class="pill-leading-icon">{@render leadingIcon()}</span>
+  {/if}
   <span class="pill-text">{text}</span>
   {#if dismissible}
     <div class="pill-dismiss">
@@ -106,6 +110,12 @@
     white-space: nowrap;
   }
 
+  .pill-leading-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
   .pill-dismiss {
     --button-color: transparent;
     --button-border: none;

package/dist/Pill/properties.d.ts

@@ -8,6 +8,13 @@ export type OptionalPillProperties = {
     disabled?: boolean;
     testId?: string;
     dismissIcon?: Snippet;
+    /**
+     * A Svelte snippet rendered immediately before the text label inside a
+     * `<span class="pill-leading-icon">` wrapper. Use for icons, logos, or any
+     * inline decoration. The wrapper does not receive `aria-hidden` — leave
+     * accessibility attributes on the icon itself.
+     */
+    leadingIcon?: Snippet;
     classes?: string;
 };
 export type PillEventProperties = {