@juspay/svelte-ui-components 2.69.2 → 2.70.0

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -516,7 +516,7 @@
   <div bind:this={triggerRef} class="drp-trigger-wrapper">
     <Button
       onclick={togglePicker}
-      ariaLabel="Open date picker"
+      ariaLabel={isOpen ? 'Close date picker' : 'Open date picker'}
       classes="drp-trigger {isOpen ? 'drp-trigger-open' : ''}"
     >
       {#if typeof triggerSnippet === 'function'}

package/dist/LottiePlayer/LottiePlayer.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { AnimationItem } from 'lottie-web';
+  import type { LottiePlayerProperties } from './properties';
+
+  type LocalAnimationItem = Pick<
+    AnimationItem,
+    'play' | 'pause' | 'stop' | 'destroy' | 'setSpeed' | 'addEventListener' | 'removeEventListener'
+  >;
+
+  let {
+    src,
+    animationData,
+    autoplay = true,
+    loop = true,
+    speed = 1,
+    renderer = 'svg',
+    ariaHidden = true,
+    testId,
+    classes,
+    oncomplete,
+    onerror
+  }: LottiePlayerProperties = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let animationItem: LocalAnimationItem | null = $state(null);
+
+  let rootClass = $derived(['lottie-player', classes ?? ''].filter((c) => c.length > 0).join(' '));
+
+  export function play(): void {
+    animationItem?.play();
+  }
+
+  export function pause(): void {
+    animationItem?.pause();
+  }
+
+  export function stop(): void {
+    animationItem?.stop();
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (animationItem !== null) {
+      animationItem.setSpeed(speed);
+    }
+  });
+
+  onMount(() => {
+    if (containerEl === null) {
+      return;
+    }
+
+    let item: LocalAnimationItem | null = null;
+
+    const handleComplete = (): void => {
+      oncomplete?.();
+    };
+
+    const handleError = (): void => {
+      onerror?.();
+    };
+
+    void import('lottie-web').then((lottie) => {
+      if (containerEl === null) {
+        return;
+      }
+
+      const lottieApi = lottie.default ?? lottie;
+
+      const config: Parameters<typeof lottieApi.loadAnimation>[0] = {
+        container: containerEl,
+        renderer,
+        loop,
+        autoplay,
+        ...(animationData != null
+          ? { animationData }
+          : typeof src === 'string' && src.length > 0
+            ? { path: src }
+            : {})
+      };
+
+      const loaded = lottieApi.loadAnimation(config);
+      item = loaded;
+      animationItem = item;
+
+      loaded.setSpeed(speed);
+
+      loaded.addEventListener('complete', handleComplete);
+      loaded.addEventListener('data_failed', handleError);
+    });
+
+    return () => {
+      if (item !== null) {
+        item.removeEventListener('complete', handleComplete);
+        item.removeEventListener('data_failed', handleError);
+        item.destroy();
+        animationItem = null;
+      }
+    };
+  });
+</script>
+
+<div
+  class={rootClass}
+  bind:this={containerEl}
+  aria-hidden={ariaHidden ? 'true' : null}
+  role={ariaHidden ? null : 'img'}
+  data-pw={typeof testId === 'string' ? testId : null}
+></div>
+
+<style>
+  .lottie-player {
+    display: var(--lottie-player-display, inline-block);
+    width: var(--lottie-player-width, 100%);
+    height: var(--lottie-player-height, 100%);
+    background: var(--lottie-player-background, transparent);
+    border-radius: var(--lottie-player-border-radius, 0px);
+    overflow: var(--lottie-player-overflow, hidden);
+  }
+</style>

package/dist/LottiePlayer/LottiePlayer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LottiePlayerProperties } from './properties';
+declare const LottiePlayer: import("svelte").Component<LottiePlayerProperties, {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+}, "">;
+type LottiePlayer = ReturnType<typeof LottiePlayer>;
+export default LottiePlayer;

package/dist/LottiePlayer/properties.d.ts

@@ -0,0 +1,36 @@
+export type LottieRendererType = 'svg' | 'canvas' | 'html';
+export type LottiePlayerProperties = MandatoryLottiePlayerProperties & OptionalLottiePlayerProperties & LottiePlayerEventProperties;
+/**
+ * Placeholder for future mandatory props. Follows the library-wide pattern used by Card, Badge,
+ * etc. — kept so the type shape is consistent when mandatory props are added later.
+ */
+export type MandatoryLottiePlayerProperties = Record<never, never>;
+export type OptionalLottiePlayerProperties = {
+    /**
+     * URL or path to the Lottie animation JSON file. Ignored when `animationData` is provided.
+     */
+    src?: string;
+    /**
+     * Inline animation data object. Takes precedence over `src` when both are provided.
+     */
+    animationData?: Record<string, unknown>;
+    autoplay?: boolean;
+    loop?: boolean;
+    /** Playback speed multiplier. Default 1. */
+    speed?: number;
+    /** Rendering backend. Default 'svg'. */
+    renderer?: LottieRendererType;
+    /**
+     * Whether the player element is hidden from assistive technology.
+     * Default true — decorative animations should be invisible to screen readers.
+     */
+    ariaHidden?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type LottiePlayerEventProperties = {
+    /** Fired when the animation completes (non-looping). */
+    oncomplete?: () => void;
+    /** Fired when the animation fails to load. */
+    onerror?: () => void;
+};

package/dist/LottiePlayer/properties.js

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

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export { default as AreaChart } from './AreaChart/AreaChart.svelte';
 export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
+export { default as LottiePlayer } from './LottiePlayer/LottiePlayer.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -126,5 +127,6 @@ export type * from './AreaChart/properties';
 export type * from './BarChart/properties';
 export type * from './PieChart/properties';
 export type * from './SankeyChart/properties';
+export type * from './LottiePlayer/properties';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -65,5 +65,6 @@ export { default as AreaChart } from './AreaChart/AreaChart.svelte';
 export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
+export { default as LottiePlayer } from './LottiePlayer/LottiePlayer.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.69.2",
+  "version": "2.70.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",
@@ -48,7 +48,13 @@
   ],
   "peerDependencies": {
     "svelte": "^5.41.2",
-    "type-decoder": "^2.1.0"
+    "type-decoder": "^2.1.0",
+    "lottie-web": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "lottie-web": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@commitlint/cli": "^21.0.2",
@@ -79,6 +85,7 @@
     "type-decoder": "^2.3.1",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.60.1",
+    "lottie-web": "^5.13.0",
     "vite": "^8.0.16",
     "vitest": "^4.1.8"
   },