@juspay/svelte-ui-components 2.112.0 → 2.114.0

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
+  import type { FileDropzoneTriggerProperties } from './properties';
+
+  let {
+    icon,
+    heading,
+    caption,
+    compact = false,
+    onclick,
+    testId,
+    classes
+  }: FileDropzoneTriggerProperties = $props();
+</script>
+
+{#if compact}
+  <div class="file-dropzone-trigger-compact {classes ?? ''}">
+    <div class="file-dropzone-trigger-icon-sm" aria-hidden="true">
+      <Img src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-sm-img" />
+    </div>
+    <span class="file-dropzone-trigger-heading" data-pw={testId} testID={testId}>{heading}</span>
+  </div>
+{:else}
+  <Button
+    classes={`file-dropzone-trigger-button ${classes ?? ''}`}
+    {onclick}
+    {...typeof testId === 'string' ? { testId } : {}}
+  >
+    <div class="file-dropzone-trigger-icon" aria-hidden="true">
+      <Img src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
+    </div>
+    <p class="file-dropzone-trigger-heading-wrap">
+      <span class="file-dropzone-trigger-heading">{heading}</span>
+    </p>
+    {#if caption}
+      <p class="file-dropzone-trigger-caption">{caption}</p>
+    {/if}
+  </Button>
+{/if}
+
+<style>
+  .file-dropzone-trigger-compact {
+    display: flex;
+    flex-direction: var(--file-dropzone-trigger-compact-flex-direction, row);
+    align-items: var(--file-dropzone-trigger-compact-align-items, center);
+    gap: var(--file-dropzone-trigger-compact-gap, 8px);
+  }
+
+  .file-dropzone-trigger-icon-sm,
+  .file-dropzone-trigger-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .file-dropzone-trigger-icon-sm :global(.file-dropzone-trigger-icon-sm-img) {
+    --image-width: var(--file-dropzone-trigger-icon-sm-size, 16px);
+    --image-height: var(--file-dropzone-trigger-icon-sm-size, 16px);
+  }
+
+  .file-dropzone-trigger-icon :global(.file-dropzone-trigger-icon-img) {
+    --image-width: var(--file-dropzone-trigger-icon-size, 24px);
+    --image-height: var(--file-dropzone-trigger-icon-size, 24px);
+  }
+
+  .file-dropzone-trigger-heading {
+    color: var(--file-dropzone-trigger-heading-color, inherit);
+    font-weight: var(--file-dropzone-trigger-heading-font-weight, 600);
+  }
+
+  .file-dropzone-trigger-heading-wrap {
+    margin: var(--file-dropzone-trigger-heading-margin, 0);
+  }
+
+  .file-dropzone-trigger-caption {
+    margin: var(--file-dropzone-trigger-caption-margin, 0);
+    color: var(--file-dropzone-trigger-caption-color, #64748b);
+    font-size: var(--file-dropzone-trigger-caption-font-size, 0.85em);
+  }
+</style>

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte.d.ts

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

package/dist/FileDropzoneTrigger/properties.d.ts

@@ -0,0 +1,24 @@
+export type FileDropzoneTriggerProperties = MandatoryFileDropzoneTriggerProperties & OptionalFileDropzoneTriggerProperties & FileDropzoneTriggerEventProperties;
+export type MandatoryFileDropzoneTriggerProperties = {
+    /** Upload icon asset, rendered through the library `Img` component. */
+    icon: string;
+    /** Primary call-to-action text (static copy, or a dynamic file name once selected). */
+    heading: string;
+};
+export type OptionalFileDropzoneTriggerProperties = {
+    /** Secondary line below the heading (accepted file type / size limit). Non-compact only. */
+    caption?: string;
+    /** Bare icon + heading with no Button wrapper or caption, for inline/compact trigger placements. */
+    compact?: boolean;
+    /**
+     * Non-compact: forwarded to the inner `Button`. Compact: applied to the heading `<span>`.
+     * Emits both `data-pw` and `testID` on that element.
+     */
+    testId?: string;
+    /** CSS class applied to the root element — the inner `Button` in non-compact, the icon+heading wrapper in compact. */
+    classes?: string;
+};
+export type FileDropzoneTriggerEventProperties = {
+    /** Wire to `FileInput`'s `openFilePicker`. Non-compact only — compact relies on `FileInput`'s own whole-area click/drop handling. */
+    onclick?: () => void;
+};

package/dist/FileDropzoneTrigger/properties.js

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

package/dist/Modal/Modal.svelte

@@ -21,6 +21,7 @@
     footer,
     debounceTime = 700,
     leftImageTestId,
+    leftImageAriaLabel,
     testId,
     content,
     footerSnippet,
@@ -162,6 +163,7 @@
                   onkeydown={handleLeftImageKeyDown}
                   role="button"
                   tabindex="0"
+                  aria-label={leftImageAriaLabel ?? null}
                   data-pw={leftImageTestId}
                   testID={leftImageTestId}
                 >
@@ -187,6 +189,7 @@
                   tabindex="0"
                   onclick={handleRightImageClick}
                   onkeydown={handleRightImageKeyDown}
+                  aria-label={header.buttonAriaLabel ?? null}
                   data-pw={header.buttonTestId}
                   testID={header.buttonTestId}
                 >

package/dist/Modal/properties.d.ts

@@ -17,6 +17,8 @@ export type OptionalModalProperties = {
         text?: string;
         testId?: string;
         buttonTestId?: string;
+        /** Accessible name for the right header image's role="button" wrapper (e.g. a close control). Rendered as aria-label. */
+        buttonAriaLabel?: string;
     };
     footer?: {
         primaryButton?: ButtonProperties;
@@ -24,6 +26,8 @@ export type OptionalModalProperties = {
     };
     debounceTime?: number;
     leftImageTestId?: string;
+    /** Accessible name for the left header image's role="button" wrapper (e.g. a back control). Rendered as aria-label. */
+    leftImageAriaLabel?: string;
     testId?: string;
     content?: Snippet;
     footerSnippet?: Snippet;

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart
 export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { default as ChipInput } from './ChipInput/ChipInput.svelte';
+export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzoneTrigger.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -148,6 +149,7 @@ export type * from './DualAxisBarChart/properties';
 export type * from './FunnelChart/properties';
 export type * from './ProportionBar/properties';
 export type * from './ChipInput/properties';
+export type * from './FileDropzoneTrigger/properties';
 export type * from './_chart/highlight';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -76,5 +76,6 @@ export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart
 export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { default as ChipInput } from './ChipInput/ChipInput.svelte';
+export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzoneTrigger.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.112.0",
+  "version": "2.114.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",