@juspay/svelte-ui-components 2.124.0 → 2.126.0

package/dist/ChatToolStatus/ChatToolStatus.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Loader from '../Loader/Loader.svelte';
+  import type { ChatToolStatusProperties } from './properties';
+
+  let { label, icon, testId, classes }: ChatToolStatusProperties = $props();
+</script>
+
+<div
+  class="chat-tool-status {classes ?? ''}"
+  aria-live="polite"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  <span class="indicator">
+    {#if typeof icon === 'function'}
+      {@render icon()}
+    {:else}
+      <Loader />
+    {/if}
+  </span>
+  <span class="label">{label}</span>
+</div>
+
+<style>
+  .chat-tool-status {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--chat-tool-status-gap, 8px);
+    width: fit-content;
+    padding: var(--chat-tool-status-padding, 8px 14px);
+    background: var(--chat-tool-status-background, #ffffff);
+    border: var(--chat-tool-status-border, 1px solid #e4e4e7);
+    border-radius: var(--chat-tool-status-border-radius, 999px);
+    box-shadow: var(--chat-tool-status-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.08));
+    color: var(--chat-tool-status-color, #52525b);
+    font-size: var(--chat-tool-status-font-size, 0.85rem);
+    font-weight: var(--chat-tool-status-font-weight, 500);
+    max-width: var(--chat-tool-status-max-width, 100%);
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--chat-tool-status-indicator-color, currentColor);
+    --loader-foreground: var(--chat-tool-status-spinner-color, currentColor);
+    --loader-foreground-end: var(--chat-tool-status-spinner-color-end, transparent);
+    --loader-width: var(--chat-tool-status-spinner-size, 14px);
+    --loader-height: var(--chat-tool-status-spinner-size, 14px);
+    --loader-before-width: 7px;
+    --loader-before-height: 7px;
+    --loader-after-width: 11px;
+    --loader-after-height: 11px;
+    --loader-background: var(--chat-tool-status-background, #ffffff);
+  }
+
+  .label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/dist/ChatToolStatus/ChatToolStatus.svelte.d.ts

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

package/dist/ChatToolStatus/properties.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export type ChatToolStatusProperties = OptionalChatToolStatusProperties & MandatoryChatToolStatusProperties;
+export type MandatoryChatToolStatusProperties = {
+    label: string;
+};
+export type OptionalChatToolStatusProperties = {
+    icon?: Snippet;
+    testId?: string;
+    classes?: string;
+};

package/dist/ChatToolStatus/properties.js

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

package/dist/LineChart/LineChart.svelte

@@ -228,6 +228,10 @@
     })
   );
 
+  // Markers paint back-to-front so the first series ends up on top — see the
+  // comment on the marker loop in the markup.
+  let markerPaintOrder = $derived(lines.map((_line, index) => index).reverse());
+
   let legendItems = $derived<LegendItem[]>(
     series.map((s, i) => ({
       label: s.name,
@@ -658,6 +662,38 @@
                 stroke-dasharray={line.dash}
                 fill="none"
               />
+              {#if showValues && pointLabelPlacements[si]}
+                {#each line.points as _point, pi (pi)}
+                  {@const pl = pointLabelPlacements[si][pi]}
+                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
+                    <text
+                      class="point-value"
+                      x={pl.x}
+                      y={pl.y}
+                      text-anchor="middle"
+                      dominant-baseline={pl.dominantBaseline}
+                      >{formatNumber(series[si].data[pi].y)}</text
+                    >
+                  {/if}
+                {/each}
+              {/if}
+            {/if}
+          {/each}
+
+          <!--
+            Point markers are painted after every line, and in REVERSE series
+            order. Two series that share a value put their markers on identical
+            coordinates, and SVG has no z-index — whichever is written last wins.
+            Painting forwards meant the last series in the array hid the first,
+            so a chart passed [primary, comparison] lost the primary series'
+            marker wherever the two periods happened to agree, most visibly at
+            the first bucket. Reversing here makes the FIRST series win, which is
+            the one a reader is looking at; the legend keeps its original order
+            because it is derived from `series`, not from this loop.
+          -->
+          {#each markerPaintOrder as si (si)}
+            {@const line = lines[si]}
+            {#if !line.hidden}
               {#if line.points.length === 1 && !showDots && Number.isFinite(line.points[0].x) && Number.isFinite(line.points[0].y)}
                 <circle
                   class="single-point"
@@ -684,21 +720,6 @@
                   {/if}
                 {/each}
               {/if}
-              {#if showValues && pointLabelPlacements[si]}
-                {#each line.points as _point, pi (pi)}
-                  {@const pl = pointLabelPlacements[si][pi]}
-                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
-                    <text
-                      class="point-value"
-                      x={pl.x}
-                      y={pl.y}
-                      text-anchor="middle"
-                      dominant-baseline={pl.dominantBaseline}
-                      >{formatNumber(series[si].data[pi].y)}</text
-                    >
-                  {/if}
-                {/each}
-              {/if}
             {/if}
           {/each}
 

package/dist/Resizable/Resizable.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+  import type { ResizableProperties, ResizeEdge } from './properties';
+
+  let {
+    width = $bindable(null),
+    height = $bindable(null),
+    minWidth = 0,
+    maxWidth = Number.POSITIVE_INFINITY,
+    minHeight = 0,
+    maxHeight = Number.POSITIVE_INFINITY,
+    handles = ['bottom-right'],
+    step = 16,
+    disabled = false,
+    handleLabel = 'Resize',
+    children,
+    onresize,
+    onresizestart,
+    onresizeend,
+    testId,
+    classes
+  }: ResizableProperties = $props();
+
+  const DIRS: Record<ResizeEdge, { x: -1 | 0 | 1; y: -1 | 0 | 1 }> = {
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 },
+    'top-left': { x: -1, y: -1 },
+    'top-right': { x: 1, y: -1 },
+    'bottom-left': { x: -1, y: 1 },
+    'bottom-right': { x: 1, y: 1 }
+  };
+
+  let container: HTMLElement | null = $state(null);
+  let active: {
+    edge: ResizeEdge;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+  } | null = $state(null);
+
+  let activeHandles = $derived(disabled ? [] : handles);
+
+  function clampWidth(value: number): number {
+    return Math.min(maxWidth, Math.max(minWidth, value));
+  }
+
+  function clampHeight(value: number): number {
+    return Math.min(maxHeight, Math.max(minHeight, value));
+  }
+
+  function measuredWidth(): number {
+    return typeof width === 'number' ? width : (container?.offsetWidth ?? 0);
+  }
+
+  function measuredHeight(): number {
+    return typeof height === 'number' ? height : (container?.offsetHeight ?? 0);
+  }
+
+  function axisOf(edge: ResizeEdge): 'x' | 'y' | 'both' {
+    const dir = DIRS[edge];
+    if (dir.x !== 0 && dir.y !== 0) {
+      return 'both';
+    }
+    return dir.x !== 0 ? 'x' : 'y';
+  }
+
+  function orientationOf(edge: ResizeEdge): 'horizontal' | 'vertical' | null {
+    const axis = axisOf(edge);
+    if (axis === 'x') {
+      return 'vertical';
+    }
+    if (axis === 'y') {
+      return 'horizontal';
+    }
+    return null;
+  }
+
+  function startResize(
+    event: PointerEvent & { currentTarget: HTMLElement },
+    edge: ResizeEdge
+  ): void {
+    if (disabled) {
+      return;
+    }
+    event.preventDefault();
+    const startW = clampWidth(measuredWidth());
+    const startH = clampHeight(measuredHeight());
+    width = startW;
+    height = startH;
+    active = {
+      edge,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startW,
+      startH
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    onresizestart?.({ width: startW, height: startH });
+  }
+
+  function moveResize(event: PointerEvent): void {
+    if (active === null) {
+      return;
+    }
+    const dir = DIRS[active.edge];
+    if (dir.x !== 0) {
+      width = clampWidth(active.startW + dir.x * (event.clientX - active.startX));
+    }
+    if (dir.y !== 0) {
+      height = clampHeight(active.startH + dir.y * (event.clientY - active.startY));
+    }
+    onresize?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function endResize(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    active = null;
+    onresizeend?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function keyResize(event: KeyboardEvent, edge: ResizeEdge): void {
+    if (disabled) {
+      return;
+    }
+    const dir = DIRS[edge];
+    let nextWidth = measuredWidth();
+    let nextHeight = measuredHeight();
+    let handled = false;
+
+    if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+      nextWidth = clampWidth(nextWidth + (event.key === 'ArrowRight' ? step : -step));
+      handled = true;
+    }
+    if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      nextHeight = clampHeight(nextHeight + (event.key === 'ArrowDown' ? step : -step));
+      handled = true;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      width = nextWidth;
+      height = nextHeight;
+      onresize?.({ width: nextWidth, height: nextHeight });
+    }
+  }
+
+  function valueNow(edge: ResizeEdge): number | null {
+    const axis = axisOf(edge);
+    if (axis === 'y') {
+      return typeof height === 'number' ? height : null;
+    }
+    return typeof width === 'number' ? width : null;
+  }
+
+  function valueMin(edge: ResizeEdge): number {
+    return axisOf(edge) === 'y' ? minHeight : minWidth;
+  }
+
+  function valueMax(edge: ResizeEdge): number | null {
+    const max = axisOf(edge) === 'y' ? maxHeight : maxWidth;
+    return Number.isFinite(max) ? max : null;
+  }
+</script>
+
+<div
+  class="resizable {classes ?? ''}"
+  class:resizing={active !== null}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  bind:this={container}
+  style:width={typeof width === 'number' ? `${width}px` : null}
+  style:height={typeof height === 'number' ? `${height}px` : null}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+
+  {#each activeHandles as edge (edge)}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div
+      class="handle"
+      data-edge={edge}
+      role="separator"
+      tabindex="0"
+      aria-label={handleLabel}
+      aria-orientation={orientationOf(edge)}
+      aria-valuenow={valueNow(edge)}
+      aria-valuemin={valueMin(edge)}
+      aria-valuemax={valueMax(edge)}
+      onpointerdown={(event) => startResize(event, edge)}
+      onpointermove={moveResize}
+      onpointerup={endResize}
+      onkeydown={(event) => keyResize(event, edge)}
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .resizable {
+    position: relative;
+    box-sizing: border-box;
+    max-width: var(--resizable-max-width, none);
+    max-height: var(--resizable-max-height, none);
+    transition: var(--resizable-transition, none);
+  }
+
+  .resizable.resizing {
+    user-select: none;
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resizable {
+      transition: none;
+    }
+  }
+
+  .handle {
+    position: absolute;
+    touch-action: none;
+    z-index: var(--resizable-handle-z-index, 2);
+    background: var(--resizable-handle-color, transparent);
+  }
+
+  .handle:focus-visible {
+    outline: var(--resizable-handle-focus-outline, 2px solid #3b5bdb);
+    outline-offset: var(--resizable-handle-focus-outline-offset, -2px);
+  }
+
+  .handle[data-edge='top'],
+  .handle[data-edge='bottom'] {
+    left: 0;
+    right: 0;
+    height: var(--resizable-edge-size, 8px);
+    cursor: ns-resize;
+  }
+
+  .handle[data-edge='left'],
+  .handle[data-edge='right'] {
+    top: 0;
+    bottom: 0;
+    width: var(--resizable-edge-size, 8px);
+    cursor: ew-resize;
+  }
+
+  .handle[data-edge='top'] {
+    top: 0;
+  }
+
+  .handle[data-edge='bottom'] {
+    bottom: 0;
+  }
+
+  .handle[data-edge='left'] {
+    left: 0;
+  }
+
+  .handle[data-edge='right'] {
+    right: 0;
+  }
+
+  .handle[data-edge='top-left'],
+  .handle[data-edge='top-right'],
+  .handle[data-edge='bottom-left'],
+  .handle[data-edge='bottom-right'] {
+    width: var(--resizable-corner-size, 14px);
+    height: var(--resizable-corner-size, 14px);
+    z-index: var(--resizable-corner-z-index, 3);
+  }
+
+  .handle[data-edge='top-left'] {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+
+  .handle[data-edge='top-right'] {
+    top: 0;
+    right: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-left'] {
+    bottom: 0;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+  }
+</style>

package/dist/Resizable/Resizable.svelte.d.ts

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

package/dist/Resizable/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type ResizeEdge = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ResizeSize = {
+    width: number;
+    height: number;
+};
+export type ResizableProperties = OptionalResizableProperties & ResizableEventProperties;
+export type OptionalResizableProperties = {
+    width?: number | null;
+    height?: number | null;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    handles?: ResizeEdge[];
+    step?: number;
+    disabled?: boolean;
+    handleLabel?: string;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ResizableEventProperties = {
+    onresize?: (size: ResizeSize) => void;
+    onresizestart?: (size: ResizeSize) => void;
+    onresizeend?: (size: ResizeSize) => void;
+};

package/dist/Resizable/properties.js

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

package/dist/Table/Table.svelte

@@ -5,6 +5,7 @@
   import type { JSONValue } from 'type-decoder';
   import { SvelteSet } from 'svelte/reactivity';
   import Button from '../Button/Button.svelte';
+  import Input from '../Input/Input.svelte';
   import Menu from '../Menu/Menu.svelte';
   import Tooltip from '../Tooltip/Tooltip.svelte';
   import Pagination from '../Pagination/Pagination.svelte';
@@ -169,23 +170,39 @@
   let hasSearchConfig = $derived(!!searchConfig);
   let isServerSearch = $derived(typeof onSearchChange === 'function');
   let searchInputRef = $state<HTMLInputElement | null>(null);
+  let inlineSearchInputRef = $state<{ focus: () => void } | null>(null);
+  let isInlineSearch = $derived(searchConfig?.displayMode === 'inline');
+  let isInlineSearchExpanded = $state(false);
+
+  const updateSearch = (term: string): void => {
+    searchTerm = term;
+    pageOverride = 1;
+    pagination?.onPageChange?.(1);
+    if (isServerSearch) {
+      onSearchChange?.(term);
+    }
+  };
 
   const handleSearchInput = (): void => {
     if (!searchInputRef) {
       return;
     }
-    searchTerm = searchInputRef.value;
-    pageOverride = 1;
-    if (isServerSearch) {
-      onSearchChange?.(searchTerm);
-    }
+    updateSearch(searchInputRef.value);
   };
 
   const clearSearch = (): void => {
-    searchTerm = '';
-    pageOverride = 1;
-    if (isServerSearch) {
-      onSearchChange?.('');
+    updateSearch('');
+    isInlineSearchExpanded = false;
+  };
+
+  const expandInlineSearch = (): void => {
+    isInlineSearchExpanded = true;
+    queueMicrotask(() => inlineSearchInputRef?.focus());
+  };
+
+  const collapseInlineSearchIfEmpty = (): void => {
+    if (searchTerm.trim() === '') {
+      clearSearch();
     }
   };
 
@@ -561,7 +578,7 @@
   </div>
 {/if}
 
-{#if hasSearchConfig}
+{#if hasSearchConfig && !isInlineSearch}
   <div class="table-search">
     <span class="table-search-icon">
       <!-- eslint-disable svelte/no-at-html-tags -->
@@ -773,6 +790,51 @@
                         </Button>
                       </div>
                     {/if}
+                    {#if hasSearchConfig && isInlineSearch && colIndex === effectiveHeaders.length - 1}
+                      <span class="table-header-inline-search">
+                        {#if isInlineSearchExpanded}
+                          <Input
+                            bind:this={inlineSearchInputRef}
+                            bind:value={searchTerm}
+                            placeholder={searchConfig?.placeholder ?? 'Search…'}
+                            testId={searchConfig?.testId ?? ''}
+                            ariaLabel={searchConfig?.placeholder ?? 'Search'}
+                            autoComplete="off"
+                            onInput={(value: string) => updateSearch(value)}
+                            onBlur={collapseInlineSearchIfEmpty}
+                            classes="table-inline-search-input"
+                          />
+                          <span class="table-inline-search-clear">
+                            <Button
+                              variant="ghost"
+                              iconOnly={true}
+                              ariaLabel="Close search"
+                              onclick={clearSearch}
+                            >
+                              {#snippet icon()}
+                                <!-- eslint-disable svelte/no-at-html-tags -->
+                                {@html closeSvg}
+                              {/snippet}
+                            </Button>
+                          </span>
+                        {:else}
+                          <span class="table-inline-search-trigger">
+                            <Button
+                              variant="ghost"
+                              iconOnly={true}
+                              ariaLabel={searchConfig?.placeholder ?? 'Search'}
+                              testId={searchConfig?.testId && `${searchConfig.testId}-trigger`}
+                              onclick={expandInlineSearch}
+                            >
+                              {#snippet icon()}
+                                <!-- eslint-disable svelte/no-at-html-tags -->
+                                {@html searchSvg}
+                              {/snippet}
+                            </Button>
+                          </span>
+                        {/if}
+                      </span>
+                    {/if}
                   </span>
                 </th>
               {/each}
@@ -1052,6 +1114,43 @@
     height: var(--table-search-clear-icon-size, 14px);
   }
 
+  .table-header-inline-search {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-inline-search-gap, 6px);
+    margin-left: auto;
+  }
+
+  .table-inline-search-trigger {
+    --button-color: transparent;
+    --button-border: none;
+    --button-padding: var(--table-inline-search-trigger-padding, 4px);
+    --button-text-color: var(--table-inline-search-icon-color, #9ca3af);
+  }
+
+  .table-inline-search-trigger :global(svg) {
+    width: var(--table-inline-search-icon-size, 16px);
+    height: var(--table-inline-search-icon-size, 16px);
+    display: block;
+  }
+
+  .table-inline-search-input {
+    --input-margin: 0;
+    width: var(--table-inline-search-input-width, 160px);
+  }
+
+  .table-inline-search-clear {
+    --button-color: transparent;
+    --button-border: none;
+    --button-padding: var(--table-inline-search-clear-padding, 2px);
+    --button-text-color: var(--table-inline-search-clear-color, #6b7280);
+  }
+
+  .table-inline-search-clear :global(svg) {
+    width: var(--table-inline-search-clear-icon-size, 14px);
+    height: var(--table-inline-search-clear-icon-size, 14px);
+  }
+
   /* ── Container ──────────────────────────────────────────────────────────── */
   .table-container {
     border: var(--table-border, 1px solid #e5e7eb);

package/dist/Table/properties.d.ts

@@ -361,6 +361,7 @@ export type TableSearchConfig = {
     placeholder?: string;
     searchableColumnIndices?: number[];
     testId?: string;
+    displayMode?: 'toolbar' | 'inline';
 };
 export type TableProperties = OptionalTableProperties & TableEventProperties;
 export type OptionalTableProperties = {

package/dist/assets/attach.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 7v9a4 4 0 0 1-8 0V6.5a2.5 2.5 0 0 1 5 0V15.5" />
+</svg>

package/dist/assets/chat.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+</svg>

package/dist/assets/mic.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9" y="2" width="6" height="12" rx="3" />
+  <path d="M5 11a7 7 0 0 0 14 0" />
+  <line x1="12" y1="18" x2="12" y2="22" />
+</svg>

package/dist/assets/retry.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="23 4 23 10 17 10" />
+  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+</svg>