@juspay/svelte-ui-components 2.10.0 → 2.11.0

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import type { ThemeSwitcherOption, ThemeSwitcherProperties } from './properties';
+  import { getStorageItem, setStorageItem } from '../utils';
+  import sunSvg from '../assets/sun.svg?raw';
+  import moonSvg from '../assets/moon.svg?raw';
+  import monitorSvg from '../assets/monitor.svg?raw';
+  import paletteSvg from '../assets/palette.svg?raw';
+
+  const DEFAULT_OPTIONS: ThemeSwitcherOption[] = [
+    { value: 'light', label: 'Light theme' },
+    { value: 'dark', label: 'Dark theme' },
+    { value: 'system', label: 'System theme' }
+  ];
+
+  const KNOWN_ICONS: Record<string, string> = {
+    light: sunSvg,
+    dark: moonSvg,
+    system: monitorSvg
+  };
+
+  function getDefaultIcon(value: string): string {
+    return KNOWN_ICONS[value] ?? paletteSvg;
+  }
+
+  let {
+    options = DEFAULT_OPTIONS,
+    value,
+    mode,
+    storageKey = 'theme-preference',
+    testId,
+    classes,
+    onchange
+  }: ThemeSwitcherProperties = $props();
+
+  let currentValue: string = $state(value ?? 'system');
+  let systemPreference: string = $state('light');
+
+  let hasSystemOption = $derived(options.some((o) => o.value === 'system'));
+  let effectiveMode = $derived(mode ?? (options.length <= 2 ? 'toggle' : 'segment'));
+  let currentIndex = $derived(options.findIndex((o) => o.value === currentValue));
+
+  let segmentButtons: HTMLButtonElement[] = $state([]);
+  let indicatorLeft: number = $state(0);
+  let indicatorWidth: number = $state(0);
+
+  function updateIndicator(): void {
+    const btn = segmentButtons.at(currentIndex);
+    if (btn instanceof HTMLButtonElement) {
+      indicatorLeft = btn.offsetLeft;
+      indicatorWidth = btn.offsetWidth;
+    }
+  }
+
+  function applyValue(newValue: string): void {
+    currentValue = newValue;
+    if (typeof storageKey === 'string' && storageKey.length > 0) {
+      setStorageItem(storageKey, newValue);
+    }
+    const resolved = newValue === 'system' ? systemPreference : newValue;
+    onchange?.(newValue, resolved);
+    tick().then(updateIndicator);
+  }
+
+  function handleToggle(): void {
+    const nextIndex = (currentIndex + 1) % options.length;
+    const nextOption = options.at(nextIndex);
+    if (typeof nextOption === 'object' && nextOption !== null) {
+      applyValue(nextOption.value);
+    }
+  }
+
+  onMount(() => {
+    systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+    if (typeof storageKey === 'string' && storageKey.length > 0) {
+      const stored = getStorageItem(storageKey);
+      if (
+        typeof stored === 'string' &&
+        stored.length > 0 &&
+        options.some((o) => o.value === stored)
+      ) {
+        currentValue = stored;
+      }
+    }
+
+    if (typeof value === 'string' && value !== '') {
+      currentValue = value;
+    }
+
+    onchange?.(currentValue, currentValue === 'system' ? systemPreference : currentValue);
+    tick().then(updateIndicator);
+
+    if (hasSystemOption) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handler = (e: MediaQueryListEvent) => {
+        systemPreference = e.matches ? 'dark' : 'light';
+        if (currentValue === 'system') {
+          onchange?.(currentValue, systemPreference);
+        }
+      };
+      mediaQuery.addEventListener('change', handler);
+      return () => {
+        mediaQuery.removeEventListener('change', handler);
+      };
+    }
+  });
+</script>
+
+{#if effectiveMode === 'toggle'}
+  <button
+    class="toggle-button {classes ?? ''}"
+    onclick={handleToggle}
+    aria-label="Switch theme"
+    data-pw={typeof testId === 'string' ? testId : null}
+  >
+    {#each options as option, i (option.value)}
+      <span class="icon" class:active={i === currentIndex}>
+        {#if typeof option.icon === 'function'}
+          {@render option.icon()}
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html getDefaultIcon(option.value)}
+        {/if}
+      </span>
+    {/each}
+  </button>
+{:else}
+  <div class="segment-control {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+    <div
+      class="segment-indicator"
+      style="left: {indicatorLeft}px; width: {indicatorWidth}px;"
+    ></div>
+    {#each options as option, i (option.value)}
+      <button
+        bind:this={segmentButtons[i]}
+        class="segment-button"
+        class:selected={currentValue === option.value}
+        onclick={() => applyValue(option.value)}
+        aria-label={option.label ?? option.value}
+      >
+        <span class="icon">
+          {#if typeof option.icon === 'function'}
+            {@render option.icon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html getDefaultIcon(option.value)}
+          {/if}
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toggle-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--theme-switcher-size, 36px);
+    height: var(--theme-switcher-size, 36px);
+    padding: 0;
+    border: none;
+    border-radius: var(--theme-switcher-border-radius, 8px);
+    background-color: var(--theme-switcher-bg, transparent);
+    cursor: pointer;
+    color: var(--theme-switcher-icon-color, #374151);
+    transition: background-color var(--theme-switcher-transition-duration, 0.3s);
+    font-family: inherit;
+  }
+
+  .toggle-button:hover {
+    background-color: var(--theme-switcher-bg-hover, #f3f4f6);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--theme-switcher-icon-size, 18px);
+    height: var(--theme-switcher-icon-size, 18px);
+    transition:
+      opacity var(--theme-switcher-transition-duration, 0.3s),
+      transform var(--theme-switcher-transition-duration, 0.3s);
+  }
+
+  .icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .toggle-button .icon {
+    position: absolute;
+  }
+
+  .toggle-button .icon:not(.active) {
+    opacity: 0;
+    transform: scale(0.5) rotate(90deg);
+  }
+
+  .toggle-button .icon.active {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  .segment-control {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--theme-switcher-segment-gap, 2px);
+    padding: var(--theme-switcher-segment-padding, 4px);
+    background-color: var(--theme-switcher-segment-bg, #f3f4f6);
+    border-radius: var(--theme-switcher-border-radius, 8px);
+  }
+
+  .segment-indicator {
+    position: absolute;
+    top: var(--theme-switcher-segment-padding, 4px);
+    bottom: var(--theme-switcher-segment-padding, 4px);
+    border-radius: var(--theme-switcher-segment-border-radius, 6px);
+    background-color: var(--theme-switcher-segment-active-bg, #ffffff);
+    box-shadow: var(--theme-switcher-segment-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));
+    transition:
+      left var(--theme-switcher-transition-duration, 0.3s),
+      width var(--theme-switcher-transition-duration, 0.3s);
+    z-index: 0;
+  }
+
+  .segment-button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--theme-switcher-segment-button-padding, 6px 10px);
+    border: none;
+    border-radius: var(--theme-switcher-segment-border-radius, 6px);
+    background: transparent;
+    cursor: pointer;
+    color: var(--theme-switcher-icon-color, #374151);
+    transition: color var(--theme-switcher-transition-duration, 0.3s);
+    font-family: inherit;
+  }
+
+  .segment-button.selected {
+    color: var(--theme-switcher-icon-color-active, #1f2937);
+  }
+</style>

package/dist/ThemeSwitcher/ThemeSwitcher.svelte.d.ts

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

package/dist/ThemeSwitcher/properties.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type ThemeSwitcherOption = {
+    value: string;
+    label?: string;
+    icon?: Snippet;
+};
+export type ThemeSwitcherMode = 'toggle' | 'segment';
+export type ThemeSwitcherProperties = OptionalThemeSwitcherProperties & ThemeSwitcherEventProperties;
+export type OptionalThemeSwitcherProperties = {
+    options?: ThemeSwitcherOption[];
+    value?: string;
+    mode?: ThemeSwitcherMode;
+    storageKey?: string;
+    testId?: string;
+    classes?: string;
+};
+export type ThemeSwitcherEventProperties = {
+    onchange?: (value: string, resolvedValue: string) => void;
+};

package/dist/ThemeSwitcher/properties.js

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

package/dist/Toast/Toast.svelte

@@ -3,6 +3,7 @@
   import type { ToastDirection, ToastProperties } from './properties';
   import type { FlyAnimationConfig } from '../types';
   import { onMount } from 'svelte';
+  import Img from '../Img/Img.svelte';
 
   let {
     duration = 2000,
@@ -22,7 +23,8 @@
     subTextTestId,
     closeIconTestId,
     onToastHide,
-    bottomContent
+    bottomContent,
+    classes
   }: ToastProperties = $props();
 
   const animationConfig: FlyAnimationConfig = $derived(getAnimationConfig(overlapPage, direction));
@@ -38,48 +40,35 @@
     onToastHide?.();
   }
 
-  /**
-   * Function to generate animation configuration for toast animations.
-   * @param {ToastDirection | null} toastDirection - Direction of the toast animation.
-   * @param {boolean} overlapPage - Flag indicating whether toast should overlap page content.
-   * @returns {FlyAnimationConfig} Animation configuration object.
-   */
   function getAnimationConfig(
     overlapPage: boolean,
     toastDirection?: ToastDirection
   ): FlyAnimationConfig {
-    // Initializing variables to store animation offsets
     let inX: number = 0;
     let inY: number = 0;
     let outX: number = 0;
     let outY: number = 0;
 
-    // Determining animation offsets based on toast direction
-    // Multiplying by -1 effectively flips the direction of movement along the specified axis, ensuring that the toast animation moves in the intended direction based on the chosen toast direction.
     switch (toastDirection) {
       case 'left-to-right':
-        // Calculating horizontal offsets for left-to-right animation
         inX = -1 * (inAnimationOffset ?? 500);
         outX = -1 * (outAnimationOffset ?? 500);
         break;
       case 'right-to-left':
-        // Calculating horizontal offsets for right-to-left animation
         inX = inAnimationOffset ?? 500;
         outX = outAnimationOffset ?? 500;
         break;
       case 'bottom-to-top':
-        // Calculating vertical offsets for bottom-to-top animation
         inY = inAnimationOffset ?? (overlapPage ? 500 : 20);
         outY = outAnimationOffset ?? (overlapPage ? 500 : 20);
         break;
       case 'top-to-bottom':
       default:
-        // Calculating vertical offsets for top-to-bottom animation
         inY = -1 * (inAnimationOffset ?? (overlapPage ? 500 : 20));
         outY = -1 * (outAnimationOffset ?? (overlapPage ? 100 : 20));
         break;
     }
-    // Returning animation configuration object
+
     return {
       in: {
         x: inX,
@@ -108,31 +97,33 @@
 
 {#if showToast}
   <div
-    class="toast {type ?? ''}"
+    class="toast {type ?? ''} {classes ?? ''}"
     class:no-page-overlap={!overlapPage}
+    role="alert"
+    aria-live="assertive"
     in:fly={animationConfig.in}
     out:fly={animationConfig.out}
     onoutroend={handleAnimationEnd}
     data-pw={testId}
   >
-    {#if leftIcon}
+    {#if typeof leftIcon === 'string' && leftIcon.length > 0}
       <div class="toast-icon-wrapper">
-        <img class="toast-icon" src={leftIcon} alt="toast-icon" />
+        <Img src={leftIcon} alt="" />
       </div>
     {/if}
 
     <div class="toast-message" data-pw={messageTestId}>
       {message}
-      {#if subtext}
+      {#if typeof subtext === 'string' && subtext.length > 0}
         <div class="toast-subtext" data-pw={subTextTestId}>{subtext}</div>
       {/if}
 
-      {#if bottomContent}
+      {#if typeof bottomContent === 'function'}
         {@render bottomContent()}
       {/if}
     </div>
 
-    {#if rightIcon}
+    {#if typeof rightIcon === 'string' && rightIcon.length > 0}
       <div
         class="close-button"
         tabindex="0"
@@ -146,7 +137,7 @@
         }}
         data-pw={closeIconTestId}
       >
-        <img class="toast-icon" src={rightIcon} alt="close-icon" />
+        <Img src={rightIcon} alt="Close" />
       </div>
     {/if}
   </div>
@@ -156,13 +147,13 @@
   .toast {
     padding: var(--toast-padding, 10px);
     font-size: var(--toast-font-size, 14px);
-    font-family: var(--toast-font-family);
+    font-family: var(--toast-font-family, inherit);
     font-weight: var(--toast-font-weight);
-    height: var(--toast-height, auto);
+    height: var(--toast-height, fit-content);
     border-radius: var(--toast-border-radius, 0px);
     border: var(--toast-border, none);
     border-style: var(--toast-border-style);
-    width: var(--toast-width, auto);
+    width: var(--toast-width, fit-content);
     align-items: var(--toast-align-items, center);
     margin: var(--toast-margin, 0px 10px 10px 10px);
     justify-content: var(--toast-justify-content, space-between);
@@ -188,12 +179,11 @@
     margin: var(--toast-icon-margin, 0px 6px 0px 0px);
     padding: var(--toast-icon-wrapper-padding, 1px);
     align-items: center;
-  }
 
-  .toast-icon {
-    height: var(--toast-icon-height, 100%);
-    filter: var(--toast-icon-filter);
-    border-radius: var(--toast-icon-border-radius, 50%);
+    --image-height: var(--toast-icon-height, 100%);
+    --image-width: fit-content;
+    --image-filter: var(--toast-icon-filter, none);
+    --image-border-radius: var(--toast-icon-border-radius, 50%);
   }
 
   .toast-message {
@@ -220,6 +210,11 @@
     align-items: var(--toast-close-button-align-items, center);
     justify-content: var(--toast-close-button-justify-content, center);
     padding: var(--toast-close-button-padding, 1px);
+
+    --image-height: var(--toast-icon-height, 100%);
+    --image-width: fit-content;
+    --image-filter: var(--toast-icon-filter, none);
+    --image-border-radius: var(--toast-icon-border-radius, 50%);
   }
 
   .success {

package/dist/Toast/properties.d.ts

@@ -19,6 +19,7 @@ export type ToastProperties = ToastEventProperties & {
     subTextTestId?: string;
     closeIconTestId?: string;
     bottomContent?: Snippet;
+    classes?: string;
 };
 export type ToastEventProperties = {
     onToastHide?: () => void;

package/dist/Toggle/Toggle.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ToggleProperties } from './properties';
 
-  let { checked = false, text = '', onclick }: ToggleProperties = $props();
+  let { checked = false, text = '', classes, onclick }: ToggleProperties = $props();
 
   function handleCheckboxClick(e: MouseEvent): void {
     if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
@@ -11,7 +11,7 @@
   }
 </script>
 
-<div class="container">
+<div class="container {classes ?? ''}">
   <div class="text" hidden={text.length === 0}>{text}</div>
   <label class="switch">
     <input class="input-checkbox" type="checkbox" {checked} onclick={handleCheckboxClick} />

package/dist/Toggle/properties.d.ts

@@ -1,6 +1,7 @@
 export type ToggleProperties = ToggleEventProperties & {
     checked?: boolean;
     text: string;
+    classes?: string;
 };
 export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist/Toolbar/Toolbar.svelte

@@ -9,37 +9,38 @@
     centerContent,
     rightContent,
     additionalContent,
+    classes,
     onbackClick,
     onkeydown
   }: ToolbarProperties = $props();
 </script>
 
-<div class="toolbar">
+<div class="toolbar {classes ?? ''}">
   <div class="content">
-    {#if leftContent}
+    {#if typeof leftContent === 'function'}
       {@render leftContent()}
-    {:else if showBackButton && backIcon}
+    {:else if showBackButton && typeof backIcon === 'string' && backIcon.length > 0}
       <div class="back" onclick={onbackClick} {onkeydown} role="button" tabindex="0">
         <img src={backIcon} alt="Back" />
       </div>
     {/if}
-    {#if centerContent}
+    {#if typeof centerContent === 'function'}
       <div class="center-content">
         {@render centerContent()}
       </div>
-    {:else if text}
+    {:else if typeof text === 'string' && text.length > 0}
       <div class="text">
         {text}
       </div>
     {/if}
-    {#if rightContent}
+    {#if typeof rightContent === 'function'}
       <div class="right-content">
         {@render rightContent()}
       </div>
     {/if}
   </div>
   <div class="additional-content">
-    {#if additionalContent}
+    {#if typeof additionalContent === 'function'}
       {@render additionalContent()}
     {/if}
   </div>

package/dist/Toolbar/properties.d.ts

@@ -7,6 +7,7 @@ export type ToolbarProperties = ToolbarEventProperties & {
     centerContent?: Snippet;
     rightContent?: Snippet;
     additionalContent?: Snippet;
+    classes?: string;
 };
 export type ToolbarEventProperties = {
     onbackClick?: () => void;

package/dist/Tooltip/Tooltip.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import type { TooltipProperties } from './properties';
+
+  let {
+    text,
+    position = 'top',
+    delay = 0,
+    testId,
+    classes,
+    children
+  }: TooltipProperties = $props();
+
+  let visible = $state(false);
+  let delayTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  function showTooltip() {
+    if (delay > 0) {
+      delayTimeout = setTimeout(() => {
+        visible = true;
+      }, delay);
+    } else {
+      visible = true;
+    }
+  }
+
+  function hideTooltip() {
+    if (delayTimeout !== null) {
+      clearTimeout(delayTimeout);
+      delayTimeout = null;
+    }
+    visible = false;
+  }
+</script>
+
+<div
+  class="tooltip-container {classes ?? ''}"
+  role="none"
+  onmouseenter={showTooltip}
+  onmouseleave={hideTooltip}
+  onfocusin={showTooltip}
+  onfocusout={hideTooltip}
+  data-pw={testId}
+>
+  {@render children()}
+  {#if visible}
+    <div class="tooltip-bubble {position}" role="tooltip">
+      <div class="tooltip-arrow"></div>
+      <span class="tooltip-text">{text}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tooltip-container {
+    position: relative;
+    display: var(--tooltip-container-display, inline-flex);
+  }
+
+  .tooltip-bubble {
+    position: absolute;
+    z-index: var(--tooltip-z-index, 1000);
+    max-width: var(--tooltip-max-width, 200px);
+    background: var(--tooltip-background, #333333);
+    color: var(--tooltip-color, #ffffff);
+    font-size: var(--tooltip-font-size, 12px);
+    font-weight: var(--tooltip-font-weight, 400);
+    font-family: var(--tooltip-font-family);
+    padding: var(--tooltip-padding, 6px 10px);
+    border-radius: var(--tooltip-border-radius, 4px);
+    border: var(--tooltip-border, none);
+    box-shadow: var(--tooltip-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
+    white-space: normal;
+    word-wrap: break-word;
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity var(--tooltip-opacity-duration, 0.15s) ease-in-out;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  /* Top position */
+  .top {
+    bottom: calc(100% + var(--tooltip-offset, 8px));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .top .tooltip-arrow {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px) 0
+      var(--tooltip-arrow-size, 5px);
+    border-color: var(--tooltip-arrow-color, var(--tooltip-background, #333333)) transparent
+      transparent transparent;
+  }
+
+  /* Bottom position */
+  .bottom {
+    top: calc(100% + var(--tooltip-offset, 8px));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .bottom .tooltip-arrow {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)
+      var(--tooltip-arrow-size, 5px);
+    border-color: transparent transparent
+      var(--tooltip-arrow-color, var(--tooltip-background, #333333)) transparent;
+  }
+
+  /* Left position */
+  .left {
+    right: calc(100% + var(--tooltip-offset, 8px));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .left .tooltip-arrow {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--tooltip-arrow-size, 5px) 0 var(--tooltip-arrow-size, 5px)
+      var(--tooltip-arrow-size, 5px);
+    border-color: transparent transparent transparent
+      var(--tooltip-arrow-color, var(--tooltip-background, #333333));
+  }
+
+  /* Right position */
+  .right {
+    left: calc(100% + var(--tooltip-offset, 8px));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .right .tooltip-arrow {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)
+      var(--tooltip-arrow-size, 5px) 0;
+    border-color: transparent var(--tooltip-arrow-color, var(--tooltip-background, #333333))
+      transparent transparent;
+  }
+</style>

package/dist/Tooltip/Tooltip.svelte.d.ts

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