@juspay/svelte-ui-components 2.22.0 → 2.22.1

package/dist/Tabs/Tabs.svelte

@@ -1,20 +1,45 @@
 <script lang="ts">
-  import type { TabsProperties } from './properties';
+  import type { TabItem, TabsProperties } from './properties';
   import chevronLeftSvg from '../assets/chevron-left.svg?raw';
   import chevronRightSvg from '../assets/chevron-right.svg?raw';
 
   let {
     items,
-    activeIndex = 0,
+    activeIndex = $bindable(0),
+    activeKey,
     disabled = false,
     testId,
     scrollLeftIcon,
     scrollRightIcon,
     tab,
     classes,
-    onchange
+    onchange,
+    onkeychange
   }: TabsProperties = $props();
 
+  const isObjectMode = $derived(items.length > 0 && typeof items.at(0) === 'object');
+
+  function toTabItem(item: string | TabItem): TabItem | null {
+    return typeof item === 'object' ? item : null;
+  }
+
+  function toStringLabel(item: string | TabItem): string {
+    return typeof item === 'string' ? item : item.label;
+  }
+
+  const resolvedActiveIndex = $derived(
+    isObjectMode
+      ? items.findIndex((item) => {
+          const tabItem = toTabItem(item);
+          return tabItem !== null && tabItem.key === activeKey;
+        })
+      : activeIndex
+  );
+
+  function isActiveItem(index: number): boolean {
+    return index === resolvedActiveIndex;
+  }
+
   let scrollContainer: HTMLDivElement | null = null;
   let canScrollLeft = $state(false);
   let canScrollRight = $state(false);
@@ -40,11 +65,30 @@
   }
 
   function handleTabClick(index: number): void {
-    if (disabled || index === activeIndex) {
+    if (disabled) {
       return;
     }
-    activeIndex = index;
-    onchange?.(index, items[index]);
+    if (isObjectMode) {
+      const rawItem = items.at(index);
+      if (typeof rawItem !== 'object') {
+        return;
+      }
+      const tabItem = toTabItem(rawItem)!;
+      if (tabItem.key === activeKey) {
+        return;
+      }
+      onkeychange?.(tabItem.key);
+    } else {
+      if (index === activeIndex) {
+        return;
+      }
+      const rawLabel = items.at(index);
+      if (typeof rawLabel !== 'string') {
+        return;
+      }
+      activeIndex = index;
+      onchange?.(index, rawLabel);
+    }
   }
 
   function handleKeydown(event: KeyboardEvent, index: number): void {
@@ -90,23 +134,26 @@
     use:initOverflow
     onscroll={updateOverflow}
   >
-    {#each items as label, index (index)}
+    {#each items as item, index (isObjectMode ? (toTabItem(item)?.key ?? index) : index)}
+      {@const tabItem = toTabItem(item)}
+      {@const label = toStringLabel(item)}
       <div
         class="tabs-item"
-        class:active={index === activeIndex}
+        class:active={isActiveItem(index)}
         role="tab"
-        aria-selected={index === activeIndex}
+        aria-selected={isActiveItem(index)}
         aria-disabled={disabled ? true : null}
-        tabindex={index === activeIndex ? 0 : -1}
+        tabindex={isActiveItem(index) ? 0 : -1}
+        data-pw={tabItem?.testId}
         onclick={() => handleTabClick(index)}
-        onkeydown={(e) => handleKeydown(e, index)}
+        onkeydown={(event) => handleKeydown(event, index)}
       >
-        {#if tab}
-          {@render tab({ label, index, active: index === activeIndex })}
+        {#if typeof tab === 'function'}
+          {@render tab({ label, index, active: isActiveItem(index), subtitle: tabItem?.subtitle })}
         {:else}
           {label}
         {/if}
-        {#if index === activeIndex}
+        {#if isActiveItem(index)}
           <span class="tabs-indicator"></span>
         {/if}
       </div>

package/dist/Tabs/Tabs.svelte.d.ts

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

package/dist/Tabs/properties.d.ts

@@ -1,10 +1,17 @@
 import type { Snippet } from 'svelte';
+export type TabItem = {
+    key: string;
+    label: string;
+    testId?: string;
+    subtitle?: string;
+};
 export type TabsProperties = MandatoryTabsProperties & OptionalTabsProperties & TabsEventProperties;
 export type MandatoryTabsProperties = {
-    items: string[];
+    items: string[] | TabItem[];
 };
 export type OptionalTabsProperties = {
     activeIndex?: number;
+    activeKey?: string;
     disabled?: boolean;
     testId?: string;
     scrollLeftIcon?: Snippet;
@@ -13,9 +20,11 @@ export type OptionalTabsProperties = {
         label: string;
         index: number;
         active: boolean;
+        subtitle?: string;
     }]>;
     classes?: string;
 };
 export type TabsEventProperties = {
     onchange?: (index: number, label: string) => void;
+    onkeychange?: (key: string) => void;
 };

package/package.json

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