@juspay/svelte-ui-components 2.14.1 → 2.18.1

package/dist/Input/Input.svelte

@@ -17,6 +17,8 @@
     addFocusColor = false,
     maxLength = 1000,
     minLength = 0,
+    min,
+    max,
     actionInput = false,
     useTextArea = false,
     autoComplete = 'on',
@@ -26,12 +28,18 @@
     textViewPresentation = [],
     onFocus = () => {},
     onFocusout = () => {},
+    onBlur = () => {},
     onInput = () => {},
     onPaste = () => {},
     onStateChange = () => {},
     onClick = () => {},
     onKeyDown = () => {},
-    classes
+    classes,
+    role,
+    ariaExpanded,
+    ariaAutocomplete,
+    ariaControls,
+    ariaActivedescendant
   }: InputProperties = $props();
 
   export function focus() {
@@ -51,6 +59,10 @@
     }
   }
 
+  export function getInputRef(): HTMLInputElement | HTMLTextAreaElement | null {
+    return inputElement;
+  }
+
   let inputElement: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
 
   let validationState = $derived.by(() => {
@@ -64,7 +76,7 @@
     if (
       valueValidation === 'InProgress' &&
       value.length > 0 &&
-      inputElement &&
+      inputElement !== null &&
       inputElement !== document.activeElement
     ) {
       return 'Invalid';
@@ -171,6 +183,7 @@
       validationState = 'Invalid';
     }
     onFocusout(event);
+    onBlur(event);
   }
 
   let _validationStateForCallback = $derived.by(() => {
@@ -197,6 +210,11 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      {role}
+      aria-expanded={ariaExpanded}
+      aria-autocomplete={ariaAutocomplete}
+      aria-controls={ariaControls}
+      aria-activedescendant={ariaActivedescendant}
       onfocus={onFocus}
       onfocusout={_onFocusOut}
       oninput={handleOnInput}
@@ -217,6 +235,11 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      {role}
+      aria-expanded={ariaExpanded}
+      aria-autocomplete={ariaAutocomplete}
+      aria-controls={ariaControls}
+      aria-activedescendant={ariaActivedescendant}
       onfocus={onFocus}
       onfocusout={_onFocusOut}
       oninput={handleOnInput}
@@ -229,6 +252,8 @@
       bind:this={inputElement}
       maxlength={dataType === 'tel' ? null : maxLength}
       minlength={minLength}
+      {min}
+      {max}
     />
   {/if}
 
@@ -293,9 +318,9 @@
   .input-container {
     display: flex;
     flex-direction: column;
-    margin: var(--input-container-margin);
-    padding: var(--input-container-padding);
-    width: var(--input-container-width);
+    margin: var(--input-container-margin, 0);
+    padding: var(--input-container-padding, 0);
+    width: var(--input-container-width, fit-content);
   }
 
   .label {

package/dist/Input/Input.svelte.d.ts

@@ -2,6 +2,7 @@ import type { InputProperties } from './properties';
 declare const Input: import("svelte").Component<InputProperties, {
     focus: () => void;
     blur: () => void;
+    getInputRef: () => HTMLInputElement | HTMLTextAreaElement | null;
 }, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/Input/properties.d.ts

@@ -1,4 +1,5 @@
-import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
+import type { CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
+import type { HTMLInputAttributes } from 'svelte/elements';
 export type InputProperties = OptionalInputProperties & InputEventProperties & MandatoryInputProperties;
 export type MandatoryInputProperties = {
     value: string;
@@ -16,19 +17,27 @@ export type OptionalInputProperties = {
     addFocusColor?: boolean;
     maxLength?: number;
     minLength?: number;
+    min?: number;
+    max?: number;
     actionInput?: boolean;
     useTextArea?: boolean;
-    autoComplete?: AutoCompleteType;
+    autoComplete?: HTMLInputAttributes['autocomplete'];
     name?: string;
     textTransformers?: TextTransformer[];
     textViewPresentation?: TextTransformer[];
     testId?: string;
     classes?: string;
+    role?: string;
+    ariaExpanded?: boolean;
+    ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
+    ariaControls?: string | null;
+    ariaActivedescendant?: string | null;
 };
 export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;
     onFocus?: (event: FocusEvent) => void;
     onFocusout?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
     onPaste?: (event: ClipboardEvent) => void;
     onClick?: (event: MouseEvent) => void;
     onStateChange?: (state: ValidationState) => void;

package/dist/ListItem/ListItem.svelte

@@ -30,7 +30,10 @@
     onitemClick,
     ontopSectionClick,
     onkeydown,
-    classes
+    classes,
+    role: itemRole,
+    ariaSelected,
+    id
   }: ListItemProperties = $props();
 
   function handleLeftImageClick(event: MouseEvent): void {
@@ -59,13 +62,16 @@
     {#if showLoader}
       <div class="item-loader"></div>
     {/if}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div
       class="item"
       class:prevent-focus={preventFocus}
       onclick={handleItemClick}
       {onkeydown}
-      role="button"
-      tabindex="0"
+      role={itemRole ?? 'button'}
+      tabindex={itemRole === 'option' ? -1 : 0}
+      aria-selected={ariaSelected}
+      {id}
       data-pw={testId}
     >
       <div

package/dist/ListItem/properties.d.ts

@@ -20,6 +20,9 @@ export type ListItemProperties = ListItemEventProperties & {
     rightContent?: Snippet;
     bottomContent?: Snippet;
     classes?: string;
+    role?: string;
+    ariaSelected?: boolean;
+    id?: string;
 };
 export type ListItemEventProperties = {
     onleftImageClick?: (event: MouseEvent) => void;

package/dist/Menu/Menu.svelte

@@ -12,9 +12,14 @@
     onselect,
     onopen,
     onclose,
-    classes
+    classes,
+    role: menuRole = 'menu',
+    ariaLabel: menuAriaLabel,
+    id: menuId
   }: MenuProperties = $props();
 
+  let itemRole = $derived(menuRole === 'listbox' ? 'option' : 'menuitem');
+
   let menuContainerEl: HTMLDivElement | null = $state(null);
   let menuListEl: HTMLDivElement | null = $state(null);
   let triggerEl: HTMLDivElement | null = $state(null);
@@ -70,7 +75,7 @@
       return;
     }
     const focusableItems = menuListEl.querySelectorAll(
-      '[role="menuitem"]:not([aria-disabled="true"])'
+      `[role="${itemRole}"]:not([aria-disabled="true"])`
     );
     const item = focusableItems.item(index);
     if (index >= 0 && index < focusableItems.length && item instanceof HTMLElement) {
@@ -212,7 +217,9 @@
     <div
       class="menu-dropdown"
       bind:this={menuListEl}
-      role="menu"
+      role={menuRole}
+      id={menuId}
+      aria-label={menuAriaLabel}
       tabindex="-1"
       onkeydown={handleMenuKeydown}
     >
@@ -220,14 +227,18 @@
         {#if item.separator === true}
           <div class="menu-separator" role="separator"></div>
         {:else}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
           <div
             class="menu-item"
             class:menu-item-danger={item.danger === true}
             class:menu-item-disabled={item.disabled === true}
-            role="menuitem"
-            tabindex={item.disabled === true ? -1 : 0}
+            role={itemRole}
+            id={item.id}
+            tabindex={item.disabled === true || menuRole === 'listbox' ? -1 : 0}
             aria-disabled={item.disabled === true ? 'true' : null}
+            aria-selected={menuRole === 'listbox' && focusedIndex === getSelectableIndex(item)
+              ? true
+              : null}
             onclick={() => selectItem(item)}
             onfocus={() => {
               if (item.disabled !== true) {

package/dist/Menu/properties.d.ts

@@ -6,6 +6,7 @@ export type MenuItem = {
     disabled?: boolean;
     danger?: boolean;
     separator?: boolean;
+    id?: string;
 };
 export type MenuProperties = MandatoryMenuProperties & OptionalMenuProperties & MenuEventProperties;
 export type MandatoryMenuProperties = {
@@ -16,6 +17,9 @@ export type OptionalMenuProperties = {
     testId?: string;
     trigger?: Snippet;
     classes?: string;
+    role?: 'menu' | 'listbox';
+    ariaLabel?: string;
+    id?: string;
 };
 export type MenuEventProperties = {
     onselect?: (item: MenuItem) => void;

package/dist/Slider/Slider.svelte

@@ -70,12 +70,15 @@
     width: 100%;
     height: var(--slider-track-height, 6px);
     border-radius: var(--slider-track-border-radius, 3px);
-    background: linear-gradient(
-      to right,
-      var(--slider-track-active-color, #2196f3) 0%,
-      var(--slider-track-active-color, #2196f3) var(--slider-fill-percent, 0%),
-      var(--slider-track-background, #e0e0e0) var(--slider-fill-percent, 0%),
-      var(--slider-track-background, #e0e0e0) 100%
+    background: var(
+      --slider-track,
+      linear-gradient(
+        to right,
+        var(--slider-track-active-color, #2196f3) 0%,
+        var(--slider-track-active-color, #2196f3) var(--slider-fill-percent, 0%),
+        var(--slider-track-background, #e0e0e0) var(--slider-fill-percent, 0%),
+        var(--slider-track-background, #e0e0e0) 100%
+      )
     );
     outline: none;
     transition: var(--slider-transition, background 0.2s ease);

package/dist/SplitInput/SplitInput.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import Input from '../Input/Input.svelte';
+  import type { FieldConfig, SplitInputProperties } from './properties';
+
+  let {
+    values = $bindable([]),
+    fields,
+    length = 4,
+    disabled = false,
+    autoAdvance = false,
+    separator,
+    testId,
+    classes,
+    onchange,
+    oninput,
+    oncomplete
+  }: SplitInputProperties = $props();
+
+  let fieldCount = $derived(typeof fields !== 'undefined' ? fields.length : length);
+
+  let fieldConfigs: FieldConfig[] = $derived(
+    typeof fields !== 'undefined'
+      ? fields
+      : Array.from({ length: fieldCount }, () => ({
+          dataType: 'tel' as const,
+          maxLength: 1
+        }))
+  );
+
+  let inputRefs: (ReturnType<typeof Input> | null)[] = $state(
+    Array.from({ length: 20 }, () => null)
+  );
+
+  // ── Value helpers ───────────────────────────────────────────────
+
+  function getFieldValue(index: number): string {
+    return values.at(index) ?? '';
+  }
+
+  function commitValues() {
+    const filled = values.filter((v) => v.length > 0);
+    oninput?.([...values]);
+    onchange?.([...values]);
+    if (filled.length === fieldCount) {
+      oncomplete?.([...values]);
+    }
+  }
+
+  // ── Focus management ────────────────────────────────────────────
+
+  function focusField(index: number) {
+    if (index >= 0 && index < fieldCount) {
+      inputRefs.at(index)?.focus();
+    }
+  }
+
+  // ── Input handler ───────────────────────────────────────────────
+
+  function handleFieldInput(index: number, inputValue: string) {
+    const config = fieldConfigs.at(index);
+    if (typeof config === 'undefined') {
+      return;
+    }
+    const maxLen = config.maxLength ?? 1000;
+
+    if (autoAdvance && maxLen === 1 && inputValue.length > 1) {
+      const chars = inputValue.replace(/\s/g, '');
+      for (let i = 0; i < fieldCount; i++) {
+        values[i] = chars.charAt(i);
+      }
+      focusField(Math.min(chars.length, fieldCount) - 1);
+    } else {
+      values[index] = inputValue;
+      if (autoAdvance && maxLen === 1 && inputValue.length > 0 && index < fieldCount - 1) {
+        focusField(index + 1);
+      }
+    }
+    commitValues();
+  }
+
+  // ── Keyboard handler ────────────────────────────────────────────
+
+  function handleKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Backspace') {
+      const current = getFieldValue(index);
+      if (current.length === 0 && index > 0) {
+        values[index - 1] = '';
+        focusField(index - 1);
+        commitValues();
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      focusField(index - 1);
+    } else if (e.key === 'ArrowRight' && index < fieldCount - 1) {
+      focusField(index + 1);
+    } else if (e.key === 'Tab') {
+      if (e.shiftKey && index > 0) {
+        e.preventDefault();
+        focusField(index - 1);
+      } else if (e.shiftKey === false && index < fieldCount - 1) {
+        e.preventDefault();
+        focusField(index + 1);
+      }
+    }
+  }
+
+  // ── Paste handler ───────────────────────────────────────────────
+
+  function handlePaste(e: ClipboardEvent, index: number) {
+    if (e.clipboardData === null) {
+      return;
+    }
+    e.preventDefault();
+    const pasted = e.clipboardData.getData('text').trim();
+
+    if (autoAdvance) {
+      const chars = pasted.replace(/\s/g, '');
+      for (let i = index; i < fieldCount; i++) {
+        const charIdx = i - index;
+        if (charIdx >= chars.length) {
+          break;
+        }
+        values[i] = chars.charAt(charIdx);
+      }
+      focusField(Math.min(index + chars.length, fieldCount) - 1);
+    } else {
+      values[index] = pasted;
+    }
+    commitValues();
+  }
+
+  // ── Exported methods ────────────────────────────────────────────
+
+  export function clear() {
+    for (let i = 0; i < fieldCount; i++) {
+      values[i] = '';
+    }
+    oninput?.([...values]);
+    onchange?.([...values]);
+    focusField(0);
+  }
+
+  export function focus() {
+    focusField(0);
+  }
+</script>
+
+<div class="field-group {classes ?? ''}" data-pw={testId}>
+  {#each fieldConfigs as config, index (index)}
+    {#if typeof separator === 'string' && index > 0}
+      <span class="field-group-separator">{separator}</span>
+    {/if}
+    <div class="field-group-item">
+      <Input
+        value={getFieldValue(index)}
+        dataType={config.dataType ?? 'text'}
+        maxLength={config.maxLength ?? 1000}
+        min={config.min}
+        max={config.max}
+        placeholder={config.placeholder}
+        validationPattern={config.validationPattern ?? null}
+        validators={config.validators ?? []}
+        disable={disabled}
+        actionInput={true}
+        classes="field-group-input"
+        onInput={(v) => handleFieldInput(index, v)}
+        onKeyDown={(e) => handleKeyDown(e, index)}
+        onPaste={(e) => handlePaste(e, index)}
+        bind:this={inputRefs[index]}
+      />
+      {#if typeof config.label === 'string'}
+        <span class="field-group-label">{config.label}</span>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .field-group {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--field-group-gap, 8px);
+    width: var(--field-group-width, fit-content);
+  }
+
+  .field-group-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--field-group-label-gap, 3px);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .field-group-item :global(.field-group-input) {
+    --input-border: var(--field-group-border, 1px solid #d1d5db);
+    --input-radius: var(--field-group-border-radius, 6px);
+    --input-focus-border: var(--field-group-focus-border, 1px solid #3b82f6);
+    --input-width: var(--field-group-input-width, 100%);
+    --input-height: var(--field-group-input-height, 36px);
+    --input-text-align: var(--field-group-text-align, center);
+    --input-font-size: var(--field-group-font-size, 14px);
+    --input-font-weight: var(--field-group-font-weight, 500);
+    --input-font-family: var(--field-group-font-family);
+    --input-padding: var(--field-group-input-padding, 0 6px);
+    --input-margin: 0;
+    --input-box-shadow: none;
+  }
+
+  .field-group-label {
+    font-size: var(--field-group-label-font-size, 10px);
+    font-weight: var(--field-group-label-font-weight, 500);
+    color: var(--field-group-label-color, #9ca3af);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .field-group-separator {
+    display: flex;
+    align-items: center;
+    height: var(--field-group-input-height, 36px);
+    font-size: var(--field-group-separator-font-size, 16px);
+    color: var(--field-group-separator-color, #9ca3af);
+    flex-shrink: 0;
+  }
+</style>

package/dist/SplitInput/SplitInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SplitInputProperties } from './properties';
+declare const SplitInput: import("svelte").Component<SplitInputProperties, {
+    clear: () => void;
+    focus: () => void;
+}, "values">;
+type SplitInput = ReturnType<typeof SplitInput>;
+export default SplitInput;

package/dist/SplitInput/properties.d.ts

@@ -0,0 +1,20 @@
+import type { OptionalInputProperties } from '../Input/properties';
+export type FieldConfig = Pick<OptionalInputProperties, 'dataType' | 'maxLength' | 'min' | 'max' | 'placeholder' | 'validationPattern' | 'validators' | 'label'>;
+export type SplitInputProperties = MandatorySplitInputProperties & OptionalSplitInputProperties & SplitInputEventProperties;
+export type MandatorySplitInputProperties = {
+    values: string[];
+};
+export type OptionalSplitInputProperties = {
+    fields?: FieldConfig[];
+    length?: number;
+    disabled?: boolean;
+    autoAdvance?: boolean;
+    separator?: string;
+    testId?: string;
+    classes?: string;
+};
+export type SplitInputEventProperties = {
+    onchange?: (values: string[]) => void;
+    oninput?: (values: string[]) => void;
+    oncomplete?: (values: string[]) => void;
+};

package/dist/SplitInput/properties.js

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

package/dist/Toolbar/Toolbar.svelte

@@ -39,7 +39,7 @@
       </div>
     {/if}
   </div>
-  <div class="additional-content">
+  <div class="additional-content" class:hidden={!(typeof additionalContent === 'function')}>
     {#if typeof additionalContent === 'function'}
       {@render additionalContent()}
     {/if}
@@ -82,6 +82,10 @@
     visibility: var(--toolbar-additional-content-visibility, visible);
   }
 
+  .hidden {
+    display: none;
+  }
+
   .back {
     height: var(--toolbar-back-button-height, 20px);
     width: var(--toolbar-back-button-width, 20px);
@@ -100,6 +104,6 @@
   }
 
   .text {
-    font-size: 18px;
+    font-size: var(--toolbar-text-font-size, 18px);
   }
 </style>

package/dist/assets/swap-vertical.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 4v16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 8l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 20V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13 16l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/index.d.ts

@@ -51,6 +51,11 @@ export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
 export { default as Book } from './Book/Book.svelte';
 export { default as Browser } from './Browser/Browser.svelte';
 export { default as Phone } from './Phone/Phone.svelte';
+export { default as Card } from './Card/Card.svelte';
+export { default as EmptyState } from './EmptyState/EmptyState.svelte';
+export { default as Combobox } from './Combobox/Combobox.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as SplitInput } from './SplitInput/SplitInput.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -98,4 +103,9 @@ export type * from './Book/properties';
 export type * from './Browser/properties';
 export type * from './Phone/properties';
 export type * from './Loader/properties';
+export type * from './Card/properties';
+export type * from './EmptyState/properties';
+export type * from './Combobox/properties';
+export type * from './ColorPicker/properties';
+export type * from './SplitInput/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -51,4 +51,9 @@ export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
 export { default as Book } from './Book/Book.svelte';
 export { default as Browser } from './Browser/Browser.svelte';
 export { default as Phone } from './Phone/Phone.svelte';
+export { default as Card } from './Card/Card.svelte';
+export { default as EmptyState } from './EmptyState/EmptyState.svelte';
+export { default as Combobox } from './Combobox/Combobox.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as SplitInput } from './SplitInput/SplitInput.svelte';
 export { validateInput } from './utils';

package/dist/types.d.ts

@@ -5,7 +5,6 @@ import type { FlyParams } from 'svelte/transition';
  */
 export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number';
 export type ModalTransition = 'IN' | 'ALL';
-export type AutoCompleteType = 'tel' | 'name' | 'email' | 'one-time-code' | 'postal-code' | 'street-address' | 'on' | 'address-level1';
 /**
  * @name CustomValidator
  * @description Function type for taking input parameter and returning a boolean denoting if the value is valid or not
@@ -26,3 +25,18 @@ export type FlyAnimationConfig = {
     in: FlyParams;
     out: FlyParams;
 };
+export type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+export type Hsl = {
+    h: number;
+    s: number;
+    l: number;
+};

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CustomValidator, InputDataType, ValidationState } from './types';
+import type { CustomValidator, Hsv, Hsl, InputDataType, Rgb, ValidationState } from './types';
 /**
  * @description A common function to validate value provided inside the input component
  * @param inputValue String value coming from input field
@@ -16,4 +16,13 @@ export declare function validateInput(inputValue: string, dataType: InputDataTyp
  */
 export declare function getStorageItem(key: string): string | null;
 export declare function setStorageItem(key: string, value: string): void;
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHsv(r: number, g: number, b: number): Hsv;
+export declare function hsvToRgb(h: number, s: number, v: number): Rgb;
+export declare function hsvToHex(h: number, s: number, v: number): string;
+export declare function hexToHsv(hex: string): Hsv | null;
+export declare function hsvToHsl(h: number, s: number, v: number): Hsl;
+export declare function hslToHsv(hDeg: number, sPct: number, lPct: number): Hsv;
+export declare function isValidHex(hex: string): boolean;
+export declare function clampInt(v: string, min: number, max: number): number;
 export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;