@juspay/svelte-ui-components 2.14.0 → 2.18.0

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/Tabs/Tabs.svelte

@@ -10,6 +10,7 @@
     testId,
     scrollLeftIcon,
     scrollRightIcon,
+    tab,
     classes,
     onchange
   }: TabsProperties = $props();
@@ -46,6 +47,13 @@
     onchange?.(index, items[index]);
   }
 
+  function handleKeydown(event: KeyboardEvent, index: number): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleTabClick(index);
+    }
+  }
+
   function initOverflow(node: HTMLDivElement): { destroy: () => void } {
     scrollContainer = node;
     updateOverflow();
@@ -83,20 +91,25 @@
     onscroll={updateOverflow}
   >
     {#each items as label, index (index)}
-      <button
+      <div
         class="tabs-item"
         class:active={index === activeIndex}
         role="tab"
         aria-selected={index === activeIndex}
+        aria-disabled={disabled ? true : null}
         tabindex={index === activeIndex ? 0 : -1}
-        {disabled}
         onclick={() => handleTabClick(index)}
+        onkeydown={(e) => handleKeydown(e, index)}
       >
-        {label}
+        {#if tab}
+          {@render tab({ label, index, active: index === activeIndex })}
+        {:else}
+          {label}
+        {/if}
         {#if index === activeIndex}
           <span class="tabs-indicator"></span>
         {/if}
-      </button>
+      </div>
     {/each}
   </div>
   {#if canScrollRight}
@@ -197,6 +210,8 @@
   }
 
   .tabs-item {
+    display: flex;
+    align-items: center;
     position: relative;
     padding: var(--tabs-item-padding, 12px 16px);
     font-size: var(--tabs-item-font-size, 14px);
@@ -210,10 +225,11 @@
     outline: none;
     white-space: nowrap;
     flex-shrink: 0;
+    user-select: none;
     transition: var(--tabs-transition, color 0.2s ease, background 0.2s ease);
   }
 
-  .tabs-item:hover:not(.active):not(:disabled) {
+  .tabs-item:hover:not(.active):not([aria-disabled]) {
     color: var(--tabs-hover-color, #333333);
     background: var(--tabs-hover-background, #f5f5f5);
   }
@@ -224,7 +240,7 @@
     background: var(--tabs-active-background, transparent);
   }
 
-  .tabs-item:disabled {
+  .tabs-item[aria-disabled] {
     cursor: var(--tabs-disabled-cursor, not-allowed);
   }
 

package/dist/Tabs/properties.d.ts

@@ -9,6 +9,11 @@ export type OptionalTabsProperties = {
     testId?: string;
     scrollLeftIcon?: Snippet;
     scrollRightIcon?: Snippet;
+    tab?: Snippet<[{
+        label: string;
+        index: number;
+        active: boolean;
+    }]>;
     classes?: string;
 };
 export type TabsEventProperties = {

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';