@juspay/svelte-ui-components 2.39.0 → 2.41.0

package/dist/EmptyState/EmptyState.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
   import type { EmptyStateProperties } from './properties';
 
-  let { title, description, icon, children, classes, testId }: EmptyStateProperties = $props();
+  let {
+    title,
+    description,
+    icon,
+    children,
+    classes,
+    testId,
+    titleSnippet,
+    descriptionSnippet
+  }: EmptyStateProperties = $props();
 </script>
 
 <div class="empty-state {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
@@ -10,8 +19,18 @@
       {@render icon()}
     </div>
   {/if}
-  <div class="empty-state-title">{title}</div>
-  {#if typeof description === 'string' && description.length > 0}
+  <div class="empty-state-title">
+    {#if typeof titleSnippet === 'function'}
+      {@render titleSnippet()}
+    {:else}
+      {title}
+    {/if}
+  </div>
+  {#if typeof descriptionSnippet === 'function'}
+    <div class="empty-state-description">
+      {@render descriptionSnippet()}
+    </div>
+  {:else if typeof description === 'string' && description.length > 0}
     <div class="empty-state-description">{description}</div>
   {/if}
   {#if typeof children === 'function'}

package/dist/EmptyState/properties.d.ts

@@ -1,6 +1,13 @@
 import type { Snippet } from 'svelte';
 export type EmptyStateProperties = MandatoryEmptyStateProperties & OptionalEmptyStateProperties;
 export type MandatoryEmptyStateProperties = {
+    /**
+     * Fallback text title rendered when `titleSnippet` is not provided.
+     * This prop is required for backward-compatibility. When `titleSnippet` is supplied,
+     * `title` is still required by TypeScript but its value is not rendered — the snippet
+     * takes priority. Pass an empty string (`title=""`) as the minimal valid value when
+     * using `titleSnippet`.
+     */
     title: string;
 };
 export type OptionalEmptyStateProperties = {
@@ -9,4 +16,17 @@ export type OptionalEmptyStateProperties = {
     children?: Snippet;
     classes?: string;
     testId?: string;
+    /**
+     * Optional snippet that replaces the `title` string at render time.
+     * When provided, the mandatory `title` prop is still required for backward-compatibility
+     * but its value is not rendered — the snippet takes full priority.
+     * Use this when the title needs rich markup (e.g. formatted text, icons inline).
+     */
+    titleSnippet?: Snippet;
+    /**
+     * Optional snippet that replaces the `description` string at render time.
+     * When provided, `description` is silently discarded — only one is rendered.
+     * Use this when the description needs rich markup (e.g. links, emphasis).
+     */
+    descriptionSnippet?: Snippet;
 };

package/dist/Gauge/Gauge.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import type { GaugeProperties } from './properties';
 
-  let { value, showLabel = true, testId, classes }: GaugeProperties = $props();
+  let {
+    value,
+    max = 100,
+    showLabel = true,
+    labelFormatter,
+    testId,
+    classes
+  }: GaugeProperties = $props();
 
   const VIEW_BOX = 100;
   const CENTER = VIEW_BOX / 2;
@@ -9,11 +16,25 @@
   const RADIUS = (VIEW_BOX - STROKE) / 2;
   const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 
-  let clamped = $derived(Math.min(100, Math.max(0, value)));
+  // Guard against max=0 (division by zero yields NaN or Infinity).
+  // When max is 0 or negative the gauge renders empty (0%).
+  let clamped = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0);
   let offset = $derived(CIRCUMFERENCE - (clamped / 100) * CIRCUMFERENCE);
+  // labelFormatter receives the raw (value, max) pair so callers have full
+  // context. The built-in fallback shows the computed percentage string
+  // (e.g. value=50, max=200 → "25%").
+  let labelText = $derived(labelFormatter ? labelFormatter(value, max) : `${Math.round(clamped)}%`);
 </script>
 
-<div class="gauge {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="gauge {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  role="progressbar"
+  aria-valuenow={clamped}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-label="gauge"
+>
   <svg viewBox="0 0 {VIEW_BOX} {VIEW_BOX}">
     <circle class="track" cx={CENTER} cy={CENTER} r={RADIUS} fill="none" />
     <circle
@@ -29,7 +50,7 @@
     />
   </svg>
   {#if showLabel}
-    <div class="label">{Math.round(clamped)}%</div>
+    <div class="label">{labelText}</div>
   {/if}
 </div>
 

package/dist/Gauge/properties.d.ts

@@ -3,7 +3,21 @@ export type MandatoryGaugeProperties = {
     value: number;
 };
 export type OptionalGaugeProperties = {
+    /**
+     * The maximum value of the gauge. `value` is divided by `max` to compute
+     * the fill percentage, so `<Gauge value={50} max={200} />` renders at 25%.
+     * Defaults to `100` (making `value` a direct percentage). When `max` is 0
+     * or negative the gauge renders empty (0%) to avoid division by zero.
+     * @default 100
+     */
+    max?: number;
     showLabel?: boolean;
+    /**
+     * Custom label renderer called with the raw `(value, max)` pair. Return any
+     * string to replace the default `"${Math.round(percentage)}%"` label.
+     * Example: `labelFormatter={(v, m) => \`${v} / ${m}\`}` shows "50 / 200".
+     */
+    labelFormatter?: (value: number, max: number) => string;
     testId?: string;
     classes?: string;
 };

package/package.json

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