@juspay/svelte-ui-components 2.71.0 → 2.73.0

package/dist/AreaChart/AreaChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { AreaChartProperties, AreaChartTooltipContext } from './properties';
+  import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import Axis from '../_chart/Axis.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
@@ -8,17 +9,24 @@
   import { computeChartDimensions, computeStackedValues } from '../_chart/geometry';
   import { linePath, areaPath } from '../_chart/paths';
   import { getColor } from '../_chart/colors';
-  import { formatNumber } from '../_chart/format';
+  import { formatNumber, formatPercent } from '../_chart/format';
   import type { LegendItem, Point } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
+  // Per-instance ID for SVG gradient <linearGradient id> references. Initialised
+  // inside onMount so the value is only ever generated on the client — avoids an
+  // SSR hydration mismatch that would occur if Math.random() ran on both server
+  // and client and produced different strings.
+  let uid = $state('');
+
   let {
     series,
     curve = 'monotone',
     stacked = false,
     stackNormalize = false,
     fillOpacity = 0.3,
+    gradientFill = false,
     showDots = false,
     showLine = true,
     showValues = false,
@@ -51,6 +59,10 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  onMount(() => {
+    uid = Math.random().toString(36).slice(2, 9);
+  });
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
@@ -169,8 +181,23 @@
     if (tooltipContext === null) {
       return null;
     }
+    const title = xTickFormat
+      ? xTickFormat(tooltipContext.x)
+      : `x: ${formatNumber(tooltipContext.x)}`;
+    if (stackNormalize) {
+      const pi = hovered?.pi ?? 0;
+      const columnTotal = series.reduce((sum, s) => sum + Math.max(0, s.data[pi]?.y ?? 0), 0);
+      return {
+        title,
+        items: tooltipContext.points.map((p) => ({
+          label: p.name,
+          value: formatPercent(Math.max(0, p.y), columnTotal),
+          color: p.color
+        }))
+      };
+    }
     return {
-      title: `x: ${formatNumber(tooltipContext.x)}`,
+      title,
       items: tooltipContext.points.map((p) => ({
         label: p.name,
         value: formatNumber(p.y),
@@ -273,6 +300,37 @@
     {/if}
 
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      {#if gradientFill}
+        <!-- <defs> must be a direct child of <svg> (SVG root), not inside a transformed <g>.
+             gradientUnits="userSpaceOnUse" with y1/y2 in the inner coordinate space (0..innerHeight)
+             correctly spans the full chart height regardless of how thin each band is. -->
+        <defs>
+          {#each areas as area, si (si)}
+            <linearGradient
+              id="area-grad-{uid}-{si}"
+              x1="0"
+              y1="0"
+              x2="0"
+              y2={dims.innerHeight}
+              gradientUnits="userSpaceOnUse"
+            >
+              <!-- The gradient top stop is fillOpacity + 0.3 (clamped to 1), giving a richer
+                   anchor at the top that fades to transparent at the bottom. This intentionally
+                   exceeds the base fillOpacity so that gradient-fill areas appear more vivid
+                   than their solid-fill counterparts (where fill-opacity equals fillOpacity). -->
+              <stop
+                offset="0%"
+                stop-color={area.color}
+                stop-opacity={Math.min(
+                  (hovered?.si === si ? fillOpacity + 0.2 : fillOpacity) + 0.3,
+                  1
+                )}
+              />
+              <stop offset="100%" stop-color={area.color} stop-opacity={0} />
+            </linearGradient>
+          {/each}
+        </defs>
+      {/if}
       <g transform="translate({dims.margin.left}, {dims.margin.top})">
         {#if showYAxis}
           <Axis
@@ -295,8 +353,8 @@
             class="area-fill"
             class:dimmed={hovered !== null && hovered.si !== si}
             d={area.areaD}
-            fill={area.color}
-            fill-opacity={hovered?.si === si ? fillOpacity + 0.2 : fillOpacity}
+            fill={gradientFill ? `url(#area-grad-${uid}-${si})` : area.color}
+            fill-opacity={gradientFill ? 1 : hovered?.si === si ? fillOpacity + 0.2 : fillOpacity}
           />
           {#if showLine}
             <path
@@ -308,6 +366,16 @@
               fill="none"
             />
           {/if}
+          {#if area.points.length === 1 && !showDots}
+            <circle
+              class="single-point"
+              class:dimmed={hovered !== null && hovered.si !== si}
+              cx={area.points[0].x}
+              cy={area.points[0].y}
+              r={6}
+              fill={area.color}
+            />
+          {/if}
           {#if showDots}
             {#each area.points as point, pi (pi)}
               <circle
@@ -385,6 +453,12 @@
   .area-line.dimmed {
     opacity: var(--areachart-dimmed-opacity, 0.1);
   }
+  .single-point {
+    pointer-events: none;
+  }
+  .single-point.dimmed {
+    opacity: var(--areachart-dimmed-opacity, 0.1);
+  }
   .dot {
     transition:
       r var(--chart-transition-duration, 0.2s) ease,
@@ -400,9 +474,9 @@
     pointer-events: none;
   }
   .hover-line {
-    stroke: var(--linechart-hover-line-color, #ccc);
+    stroke: var(--areachart-hover-line-color, var(--linechart-hover-line-color, #ccc));
     stroke-width: 1;
-    stroke-dasharray: 4 4;
+    stroke-dasharray: var(--areachart-hover-line-dash, var(--linechart-hover-line-dash, 4 4));
     pointer-events: none;
   }
   .hover-overlay {

package/dist/AreaChart/properties.d.ts

@@ -28,6 +28,7 @@ export type OptionalAreaChartProperties = {
     stacked?: boolean;
     stackNormalize?: boolean;
     fillOpacity?: number;
+    gradientFill?: boolean;
     showDots?: boolean;
     showLine?: boolean;
     showValues?: boolean;

package/dist/LineChart/LineChart.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
   import type { LineChartProperties, LineChartTooltipContext } from './properties';
+  import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import Axis from '../_chart/Axis.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
   import { createLinearScale, niceLinearDomain } from '../_chart/scales';
   import { computeChartDimensions } from '../_chart/geometry';
-  import { linePath } from '../_chart/paths';
+  import { linePath, areaPath } from '../_chart/paths';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
   import type { LegendItem, Point } from '../_chart/types';
 
+  // Per-instance ID for SVG gradient <linearGradient id> references. Initialised
+  // inside onMount so the value is only ever generated on the client — avoids an
+  // SSR hydration mismatch that would occur if Math.random() ran on both server
+  // and client and produced different strings.
+  let uid = $state('');
+
   // ── Props ──────────────────────────────────────────────────────
 
   let {
     series,
     curve = 'monotone',
+    gradientFill = false,
+    fillOpacity = 0.3,
     showDots = true,
     showValues = false,
     dotRadius = 4,
@@ -48,6 +57,10 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  onMount(() => {
+    uid = Math.random().toString(36).slice(2, 9);
+  });
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
@@ -82,7 +95,12 @@
     series.map((s, si) => {
       const color = s.color ?? getColor(si);
       const points: Point[] = s.data.map((d) => ({ x: xScale(d.x), y: yScale(d.y) }));
-      return { color, points, path: linePath(points, curve) };
+      return {
+        color,
+        points,
+        path: linePath(points, curve),
+        areaD: areaPath(points, dims.innerHeight, curve)
+      };
     })
   );
 
@@ -123,7 +141,7 @@
       return null;
     }
     return {
-      title: `x: ${formatNumber(tooltipContext.x)}`,
+      title: xTickFormat ? xTickFormat(tooltipContext.x) : `x: ${formatNumber(tooltipContext.x)}`,
       items: tooltipContext.points.map((p) => ({
         label: p.name,
         value: formatNumber(p.y),
@@ -227,6 +245,34 @@
     {/if}
 
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      {#if gradientFill}
+        <defs>
+          {#each lines as line, si (si)}
+            <linearGradient
+              id="line-grad-{uid}-{si}"
+              x1="0"
+              y1="0"
+              x2="0"
+              y2={dims.innerHeight}
+              gradientUnits="userSpaceOnUse"
+            >
+              <!-- The gradient top stop is fillOpacity + 0.3 (clamped to 1), giving a richer
+                   anchor at the top that fades to transparent at the bottom. This intentionally
+                   exceeds the base fillOpacity so that gradient-fill areas appear more vivid
+                   than a flat solid-fill at fillOpacity alone. -->
+              <stop
+                offset="0%"
+                stop-color={line.color}
+                stop-opacity={Math.min(
+                  (hovered?.si === si ? fillOpacity + 0.2 : fillOpacity) + 0.3,
+                  1
+                )}
+              />
+              <stop offset="100%" stop-color={line.color} stop-opacity={0} />
+            </linearGradient>
+          {/each}
+        </defs>
+      {/if}
       <g transform="translate({dims.margin.left}, {dims.margin.top})">
         {#if showYAxis}
           <Axis
@@ -245,6 +291,14 @@
         {/if}
 
         {#each lines as line, si (si)}
+          {#if gradientFill}
+            <path
+              class="line-area-fill"
+              class:dimmed={hovered !== null && hovered.si !== si}
+              d={line.areaD}
+              fill="url(#line-grad-{uid}-{si})"
+            />
+          {/if}
           <path
             class="line-path"
             class:dimmed={hovered !== null && hovered.si !== si}
@@ -253,6 +307,16 @@
             stroke-width={strokeWidth}
             fill="none"
           />
+          {#if line.points.length === 1 && !showDots}
+            <circle
+              class="single-point"
+              class:dimmed={hovered !== null && hovered.si !== si}
+              cx={line.points[0].x}
+              cy={line.points[0].y}
+              r={dotRadius * 1.5}
+              fill={line.color}
+            />
+          {/if}
           {#if showDots}
             {#each line.points as point, pi (pi)}
               <circle
@@ -313,6 +377,15 @@
     width: 100%;
     position: relative;
   }
+  .line-area-fill {
+    transition:
+      fill-opacity var(--chart-transition-duration, 0.2s) ease,
+      opacity var(--chart-transition-duration, 0.2s) ease;
+    pointer-events: none;
+  }
+  .line-area-fill.dimmed {
+    opacity: var(--linechart-dimmed-opacity, 0.2);
+  }
   .line-path {
     transition: opacity var(--chart-transition-duration, 0.2s) ease;
     stroke-linecap: round;
@@ -322,6 +395,12 @@
   .line-path.dimmed {
     opacity: var(--linechart-dimmed-opacity, 0.2);
   }
+  .single-point {
+    pointer-events: none;
+  }
+  .single-point.dimmed {
+    opacity: var(--linechart-dimmed-opacity, 0.2);
+  }
   .dot {
     transition:
       r var(--chart-transition-duration, 0.2s) ease,

package/dist/LineChart/properties.d.ts

@@ -25,6 +25,8 @@ export type MandatoryLineChartProperties = {
 };
 export type OptionalLineChartProperties = {
     curve?: CurveType;
+    gradientFill?: boolean;
+    fillOpacity?: number;
     showDots?: boolean;
     showValues?: boolean;
     dotRadius?: number;

package/dist/StatCard/StatCard.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { StatCardProperties } from './properties';
+
+  let {
+    title,
+    value,
+    delta,
+    deltaPositive,
+    subtitle,
+    footer,
+    valueSnippet,
+    testId,
+    classes,
+    onclick
+  }: StatCardProperties = $props();
+
+  const isInteractive = $derived(typeof onclick === 'function');
+
+  /**
+   * When `deltaPositive` is explicitly provided use it; otherwise infer from
+   * the leading character of `delta` — '+' → positive, '-' → negative,
+   * anything else (e.g. '0%') → undefined (neutral, no colour applied).
+   */
+  const resolvedDeltaPositive = $derived(
+    typeof deltaPositive === 'boolean'
+      ? deltaPositive
+      : typeof delta === 'string' && delta.trim().length > 0
+        ? delta.trimStart().startsWith('+')
+          ? true
+          : delta.trimStart().startsWith('-')
+            ? false
+            : null
+        : null
+  );
+
+  const hasDelta = $derived(typeof delta === 'string' && delta.trim().length > 0);
+
+  const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      if (event.key === ' ') {
+        event.preventDefault();
+      }
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="statcard {classes ?? ''}"
+  class:statcard-interactive={isInteractive}
+  data-pw={typeof testId === 'string' ? testId : null}
+  role={isInteractive ? 'button' : null}
+  tabindex={isInteractive ? 0 : null}
+  onclick={isInteractive ? onclick : null}
+  onkeydown={isInteractive ? handleKeydown : null}
+>
+  {#if typeof title === 'string' && title.length > 0}
+    <div class="statcard-title">{title}</div>
+  {/if}
+
+  <div class="statcard-value-row">
+    {#if typeof valueSnippet === 'function'}
+      <div class="statcard-value">{@render valueSnippet()}</div>
+    {:else if typeof value === 'string' && value.length > 0}
+      <div class="statcard-value">{value}</div>
+    {/if}
+
+    {#if hasDelta}
+      <div
+        class="statcard-delta"
+        class:statcard-delta-positive={resolvedDeltaPositive === true}
+        class:statcard-delta-negative={resolvedDeltaPositive === false}
+      >
+        {delta}
+      </div>
+    {/if}
+  </div>
+
+  {#if typeof subtitle === 'string' && subtitle.length > 0}
+    <div class="statcard-subtitle">{subtitle}</div>
+  {/if}
+
+  {#if typeof footer === 'function'}
+    <div class="statcard-footer">{@render footer()}</div>
+  {/if}
+</div>
+
+<style>
+  .statcard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--statcard-gap, 4px);
+    padding: var(--statcard-padding, 16px);
+    background: var(--statcard-background, #ffffff);
+    border: var(--statcard-border, 1px solid #e5e7eb);
+    border-radius: var(--statcard-border-radius, 8px);
+    box-shadow: var(--statcard-box-shadow, none);
+    width: var(--statcard-width, auto);
+    min-width: var(--statcard-min-width, 0);
+    max-width: var(--statcard-max-width, none);
+    height: var(--statcard-height, auto);
+    color: var(--statcard-color, inherit);
+    cursor: var(--statcard-cursor, default);
+    box-sizing: border-box;
+  }
+
+  .statcard-interactive {
+    cursor: var(--statcard-cursor, pointer);
+  }
+
+  .statcard-interactive:focus-visible {
+    outline: var(--statcard-focus-outline, 2px solid currentColor);
+    outline-offset: var(--statcard-focus-outline-offset, 2px);
+  }
+
+  .statcard-title {
+    font-size: var(--statcard-title-font-size, 12px);
+    font-weight: var(--statcard-title-font-weight, 500);
+    color: var(--statcard-title-color, #6b7280);
+    line-height: var(--statcard-title-line-height, 1.4);
+    white-space: var(--statcard-title-white-space, nowrap);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .statcard-value-row {
+    display: flex;
+    align-items: var(--statcard-value-row-align, baseline);
+    gap: var(--statcard-value-row-gap, 8px);
+    flex-wrap: wrap;
+  }
+
+  .statcard-value {
+    font-size: var(--statcard-value-font-size, 24px);
+    font-weight: var(--statcard-value-font-weight, 600);
+    color: var(--statcard-value-color, inherit);
+    line-height: var(--statcard-value-line-height, 1.2);
+  }
+
+  .statcard-delta {
+    font-size: var(--statcard-delta-font-size, 13px);
+    font-weight: var(--statcard-delta-font-weight, 500);
+    color: var(--statcard-delta-color, #6b7280);
+    line-height: var(--statcard-delta-line-height, 1.4);
+  }
+
+  .statcard-delta-positive {
+    color: var(--statcard-delta-positive-color, #16a34a);
+  }
+
+  .statcard-delta-negative {
+    color: var(--statcard-delta-negative-color, #dc2626);
+  }
+
+  .statcard-subtitle {
+    font-size: var(--statcard-subtitle-font-size, 12px);
+    font-weight: var(--statcard-subtitle-font-weight, 400);
+    color: var(--statcard-subtitle-color, #9ca3af);
+    line-height: var(--statcard-subtitle-line-height, 1.4);
+  }
+
+  .statcard-footer {
+    margin-top: var(--statcard-footer-margin-top, 8px);
+    padding-top: var(--statcard-footer-padding-top, 8px);
+    border-top: var(--statcard-footer-border-top, 1px solid #e5e7eb);
+  }
+</style>

package/dist/StatCard/StatCard.svelte.d.ts

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

package/dist/StatCard/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type StatCardProperties = OptionalStatCardProperties & StatCardEventProperties;
+export type MandatoryStatCardProperties = Record<string, never>;
+export type OptionalStatCardProperties = {
+    /** Card heading label. */
+    title?: string;
+    /** Pre-formatted metric value string (e.g. "₹1.23Cr", "98.4%"). */
+    value?: string;
+    /** Pre-formatted delta string (e.g. "+12.5%", "-3.2%"). Auto-infers `deltaPositive` from leading sign when `deltaPositive` is not provided. */
+    delta?: string;
+    /** Overrides automatic sign-based inference for delta colour. `true` = positive (green), `false` = negative (red). */
+    deltaPositive?: boolean;
+    /** Secondary label rendered below the value row. */
+    subtitle?: string;
+    /** Snippet rendered in the card footer area. */
+    footer?: Snippet;
+    /** Replaces the string `value` with a custom snippet for advanced value rendering. */
+    valueSnippet?: Snippet;
+    /** Renders as `data-pw` on the root element for Playwright test selection. */
+    testId?: string;
+    /** Extra CSS class names appended to the root element. */
+    classes?: string;
+};
+export type StatCardEventProperties = {
+    /** Makes the card interactive: adds `role="button"`, `tabindex=0`, and wires click/Enter/Space. */
+    onclick?: (event: MouseEvent) => void;
+};

package/dist/StatCard/properties.js

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

package/dist/_chart/paths.js

@@ -118,6 +118,7 @@ export function linePath(points, curve = 'linear') {
         return points.length === 1 ? `M ${points[0].x} ${points[0].y}` : '';
     }
     switch (curve) {
+        case 'spline':
         case 'monotone':
         case 'natural':
             return monotonePath(points);

package/dist/_chart/types.d.ts

@@ -31,7 +31,7 @@ export type BandScale = {
     bandwidth: number;
     step: number;
 };
-export type CurveType = 'linear' | 'monotone' | 'step' | 'natural';
+export type CurveType = 'linear' | 'monotone' | 'spline' | 'step' | 'natural';
 export type AxisOrientation = 'top' | 'right' | 'bottom' | 'left';
 export type PieSliceLayout = {
     index: number;

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { default as LottiePlayer } from './LottiePlayer/LottiePlayer.svelte';
+export { default as StatCard } from './StatCard/StatCard.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -128,5 +129,6 @@ export type * from './BarChart/properties';
 export type * from './PieChart/properties';
 export type * from './SankeyChart/properties';
 export type * from './LottiePlayer/properties';
+export type * from './StatCard/properties';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -66,5 +66,6 @@ export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { default as LottiePlayer } from './LottiePlayer/LottiePlayer.svelte';
+export { default as StatCard } from './StatCard/StatCard.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

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