@juspay/svelte-ui-components 2.78.0 → 2.80.0

package/dist/ProportionBar/ProportionBar.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  /**
+   * ProportionBar — a horizontal stacked bar that visualises how a total is
+   * distributed across labelled segments. Renders proportional coloured bands in
+   * an SVG track with an optional legend. Each band's width is derived from its
+   * `value` relative to the sum of all segments; non-finite or negative values
+   * are treated as zero so the rendered widths always stay within 0–100%.
+   *
+   * @example
+   * ```svelte
+   * <ProportionBar
+   *   segments={[
+   *     { label: 'UPI', value: 480 },
+   *     { label: 'Cards', value: 220 }
+   *   ]}
+   * />
+   * ```
+   *
+   * @see docs/ProportionBar.md
+   */
+  import type { ProportionBarProperties, ProportionBarSegment } from './properties';
+
+  const DEFAULT_PALETTE = ['#8F49DE', '#FFC533', '#62D5C0', '#FF74CD', '#D1E7FF'];
+
+  let {
+    segments,
+    showLegend = true,
+    valueFormat,
+    trackHeight,
+    testId,
+    classes
+  }: ProportionBarProperties = $props();
+
+  const resolveColor = (segment: ProportionBarSegment, index: number): string => {
+    if (typeof segment.color === 'string' && segment.color.length > 0) {
+      return segment.color;
+    }
+    return DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
+  };
+
+  /** Reject negative or non-finite values so derived percentages stay within 0–100. */
+  const sanitizeValue = (value: number): number =>
+    Number.isFinite(value) && value > 0 ? value : 0;
+
+  const total = $derived(segments.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0));
+
+  const computedSegments = $derived(
+    segments.map((segment, segmentIndex) => {
+      const safeValue = sanitizeValue(segment.value);
+      const percent = total > 0 ? (safeValue / total) * 100 : 0;
+      return {
+        label: segment.label,
+        value: safeValue,
+        percent,
+        color: resolveColor(segment, segmentIndex)
+      };
+    })
+  );
+
+  const defaultFormat = (absoluteValue: number, percent: number): string =>
+    `${absoluteValue.toLocaleString()} (${Math.round(percent)}%)`;
+
+  const formatValue = (absoluteValue: number, percent: number): string =>
+    (valueFormat ?? defaultFormat)(absoluteValue, percent);
+
+  /**
+   * Comma-joined "label: value (percent)" summary. Used as the SVG's accessible
+   * name when the legend is hidden, so screen-reader users still get the full
+   * breakdown even though the bands themselves are presentational.
+   */
+  const ariaSummary = $derived(
+    computedSegments
+      .map(
+        (computedSegment) =>
+          `${computedSegment.label}: ${formatValue(computedSegment.value, computedSegment.percent)}`
+      )
+      .join(', ')
+  );
+
+  /** Cumulative x offsets for SVG rect positions. */
+  const rectSegments = $derived(
+    computedSegments.reduce<{ x: number; width: number; color: string }[]>(
+      (acc, computedSegment) => {
+        const previousX = acc.length > 0 ? acc[acc.length - 1].x + acc[acc.length - 1].width : 0;
+        acc.push({ x: previousX, width: computedSegment.percent, color: computedSegment.color });
+        return acc;
+      },
+      []
+    )
+  );
+
+  const trackHeightStyle = $derived(
+    typeof trackHeight === 'string' && trackHeight.length > 0
+      ? `--proportion-bar-track-height: ${trackHeight};`
+      : ''
+  );
+</script>
+
+<div
+  class="proportion-bar {classes ?? ''}"
+  style={trackHeightStyle}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <div class="proportion-bar-track">
+    <svg
+      viewBox="0 0 100 10"
+      preserveAspectRatio="none"
+      class="proportion-bar-svg"
+      role={showLegend ? null : 'img'}
+      aria-hidden={showLegend ? 'true' : null}
+      aria-label={showLegend ? null : ariaSummary}
+    >
+      {#each rectSegments as rectSegment, rectIndex (rectIndex)}
+        <rect
+          x={rectSegment.x}
+          y={0}
+          width={rectSegment.width}
+          height={10}
+          fill={rectSegment.color}
+        >
+          <title
+            >{computedSegments[rectIndex].label}: {formatValue(
+              computedSegments[rectIndex].value,
+              computedSegments[rectIndex].percent
+            )}</title
+          >
+        </rect>
+      {/each}
+    </svg>
+  </div>
+
+  {#if showLegend}
+    <ul class="proportion-bar-legend" aria-label="Segment breakdown">
+      {#each computedSegments as computedSegment, legendIndex (legendIndex)}
+        <li class="proportion-bar-legend-item">
+          <span
+            class="proportion-bar-swatch"
+            style="background: {computedSegment.color};"
+            aria-hidden="true"
+          ></span>
+          <span class="proportion-bar-legend-label">{computedSegment.label}</span>
+          <span class="proportion-bar-legend-value">
+            {formatValue(computedSegment.value, computedSegment.percent)}
+          </span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .proportion-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--proportion-bar-gap, 10px);
+    width: var(--proportion-bar-width, 100%);
+  }
+
+  .proportion-bar-track {
+    width: 100%;
+    height: var(--proportion-bar-track-height, 10px);
+    border-radius: var(--proportion-bar-track-border-radius, 4px);
+    overflow: hidden;
+    background: var(--proportion-bar-track-bg, #f0f0f0);
+  }
+
+  .proportion-bar-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .proportion-bar-legend {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--proportion-bar-legend-gap, 6px);
+  }
+
+  .proportion-bar-legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--proportion-bar-legend-item-gap, 8px);
+  }
+
+  .proportion-bar-swatch {
+    display: inline-block;
+    width: var(--proportion-bar-swatch-size, 10px);
+    height: var(--proportion-bar-swatch-size, 10px);
+    border-radius: var(--proportion-bar-swatch-border-radius, 2px);
+    flex-shrink: 0;
+  }
+
+  .proportion-bar-legend-label {
+    flex: 1;
+    font-size: var(--proportion-bar-legend-label-font-size, 13px);
+    font-weight: var(--proportion-bar-legend-label-font-weight, 400);
+    color: var(--proportion-bar-legend-label-color, #374151);
+    line-height: 1.4;
+  }
+
+  .proportion-bar-legend-value {
+    font-size: var(--proportion-bar-legend-value-font-size, 13px);
+    font-weight: var(--proportion-bar-legend-value-font-weight, 500);
+    color: var(--proportion-bar-legend-value-color, #111827);
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+</style>

package/dist/ProportionBar/ProportionBar.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+   * ProportionBar — a horizontal stacked bar that visualises how a total is
+   * distributed across labelled segments. Renders proportional coloured bands in
+   * an SVG track with an optional legend. Each band's width is derived from its
+   * `value` relative to the sum of all segments; non-finite or negative values
+   * are treated as zero so the rendered widths always stay within 0–100%.
+   *
+   * @example
+   * ```svelte
+   * <ProportionBar
+   *   segments={[
+   *     { label: 'UPI', value: 480 },
+   *     { label: 'Cards', value: 220 }
+   *   ]}
+   * />
+   * ```
+   *
+   * @see docs/ProportionBar.md
+   */
+import type { ProportionBarProperties } from './properties';
+declare const ProportionBar: import("svelte").Component<ProportionBarProperties, {}, "">;
+type ProportionBar = ReturnType<typeof ProportionBar>;
+export default ProportionBar;

package/dist/ProportionBar/properties.d.ts

@@ -0,0 +1,34 @@
+export type ProportionBarSegment = {
+    /** Display label for this segment. */
+    label: string;
+    /** Absolute numeric value used to compute proportion. */
+    value: number;
+    /** Override fill color for this segment. Falls back to the default palette. */
+    color?: string;
+};
+export type ProportionBarProperties = MandatoryProportionBarProperties & OptionalProportionBarProperties;
+export type MandatoryProportionBarProperties = {
+    /** Array of segments whose values define the proportions shown in the bar. */
+    segments: ProportionBarSegment[];
+};
+export type OptionalProportionBarProperties = {
+    /**
+     * Whether to render a legend list below the bar. Each legend item shows a
+     * colour swatch, the segment label, and the formatted value. Defaults to `true`.
+     */
+    showLegend?: boolean;
+    /**
+     * Custom formatter for the legend value column. Receives the absolute value and
+     * the computed percentage. Defaults to `"N (X%)"`.
+     */
+    valueFormat?: (value: number, percent: number) => string;
+    /**
+     * Height of the bar track (e.g. `"8px"`, `"12px"`). Also settable via the
+     * `--proportion-bar-track-height` CSS variable.
+     */
+    trackHeight?: string;
+    /** Test selector applied as the `data-pw` attribute on the root element. */
+    testId?: string;
+    /** Extra CSS class names appended to the root element. */
+    classes?: string;
+};

package/dist/ProportionBar/properties.js

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

package/dist/StatCard/StatCard.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import type { StatCardProperties } from './properties';
+  import DeltaIndicator from '../DeltaIndicator/DeltaIndicator.svelte';
+  import Tooltip from '../Tooltip/Tooltip.svelte';
+  import CheckListItem from '../CheckListItem/CheckListItem.svelte';
 
   let {
     title,
@@ -9,9 +12,16 @@
     subtitle,
     footer,
     valueSnippet,
+    rows,
+    rowsDirection = 'column',
+    tooltip,
+    checkbox,
+    headerRight,
+    children,
     testId,
     classes,
-    onclick
+    onclick,
+    onCheckboxChange
   }: StatCardProperties = $props();
 
   const isInteractive = $derived(typeof onclick === 'function');
@@ -34,6 +44,16 @@
   );
 
   const hasDelta = $derived(typeof delta === 'string' && delta.trim().length > 0);
+  const hasRows = $derived(Array.isArray(rows) && rows.length > 0);
+  const hasTitle = $derived(typeof title === 'string' && title.length > 0);
+
+  /**
+   * The header is rendered when ANY header content is present — not only a title.
+   * This keeps `checkbox` and `headerRight` visible on title-less cards.
+   */
+  const hasHeaderContent = $derived(
+    hasTitle || Boolean(checkbox) || typeof headerRight === 'function'
+  );
 
   const handleKeydown = (event: KeyboardEvent): void => {
     if (event.key === 'Enter' || event.key === ' ') {
@@ -45,6 +65,19 @@
       }
     }
   };
+
+  const handleCheckboxChange = (checked: boolean): void => {
+    onCheckboxChange?.(checked);
+  };
+
+  /**
+   * Keep header checkbox interaction from bubbling to the card's click/keydown
+   * handler — otherwise toggling the checkbox on an interactive card would also
+   * fire its `onclick` action.
+   */
+  const stopHeaderInteraction = (event: Event): void => {
+    event.stopPropagation();
+  };
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -57,30 +90,122 @@
   onclick={isInteractive ? onclick : null}
   onkeydown={isInteractive ? handleKeydown : null}
 >
-  {#if typeof title === 'string' && title.length > 0}
-    <div class="statcard-title">{title}</div>
+  {#if hasHeaderContent}
+    <div class="statcard-header">
+      <div class="statcard-header-left">
+        {#if hasTitle}
+          {#if tooltip}
+            <Tooltip
+              text={tooltip.text}
+              position={tooltip.position ?? 'top'}
+              testId={tooltip.testId}
+            >
+              <div class="statcard-title statcard-title-tooltip">{title}</div>
+            </Tooltip>
+          {:else}
+            <div class="statcard-title">{title}</div>
+          {/if}
+        {/if}
+        {#if checkbox}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            class="statcard-header-checkbox"
+            onclick={stopHeaderInteraction}
+            onkeydown={stopHeaderInteraction}
+          >
+            <CheckListItem
+              text={checkbox.text}
+              checked={checkbox.checked ?? false}
+              onclick={handleCheckboxChange}
+            />
+          </div>
+        {/if}
+      </div>
+      {#if headerRight}
+        <div class="statcard-header-right">{@render headerRight()}</div>
+      {/if}
+    </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 hasRows && rows}
+    <div class="statcard-rows" class:statcard-rows-horizontal={rowsDirection === 'row'}>
+      {#each rows as row, rowIndex (rowIndex)}
+        {#if rowIndex > 0}
+          <div class="statcard-row-divider"></div>
+        {/if}
+        <div class="statcard-row" data-pw={typeof row.testId === 'string' ? row.testId : null}>
+          {#if typeof row.heading === 'string' && row.heading.length > 0}
+            <div class="statcard-row-heading-wrap">
+              {#if row.tooltip}
+                <Tooltip
+                  text={row.tooltip.text}
+                  position={row.tooltip.position ?? 'top'}
+                  testId={row.tooltip.testId}
+                >
+                  <div class="statcard-row-heading statcard-row-heading-tooltip">{row.heading}</div>
+                </Tooltip>
+              {:else}
+                <div class="statcard-row-heading">{row.heading}</div>
+              {/if}
+            </div>
+          {/if}
+          <div class="statcard-row-value-line">
+            <div class="statcard-value">{row.value}</div>
+            {#if typeof row.change === 'number'}
+              <DeltaIndicator value={row.change} invertColors={row.invertChangeColors ?? false} />
+            {/if}
+            {#if typeof row.additionalContent === 'string' && row.additionalContent.length > 0}
+              <div class="statcard-row-additional">{row.additionalContent}</div>
+            {/if}
+          </div>
+          {#if Array.isArray(row.breakdown) && row.breakdown.length > 0}
+            {#if typeof row.breakdownHeading === 'string' && row.breakdownHeading.length > 0}
+              <div class="statcard-breakdown-heading">{row.breakdownHeading}</div>
+            {/if}
+            <div class="statcard-breakdown-grid">
+              {#each row.breakdown as breakdownItem, breakdownIndex (breakdownIndex)}
+                <div class="statcard-breakdown-item">
+                  <div class="statcard-breakdown-label">{breakdownItem.label}</div>
+                  <div class="statcard-breakdown-value">{breakdownItem.value}</div>
+                  {#if typeof breakdownItem.change === 'number'}
+                    <DeltaIndicator
+                      value={breakdownItem.change}
+                      invertColors={breakdownItem.invertChangeColors ?? false}
+                    />
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <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 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}
-  </div>
+  {/if}
 
-  {#if typeof subtitle === 'string' && subtitle.length > 0}
-    <div class="statcard-subtitle">{subtitle}</div>
+  {#if children}
+    <div class="statcard-children">{@render children()}</div>
   {/if}
 
   {#if typeof footer === 'function'}
@@ -116,6 +241,33 @@
     outline-offset: var(--statcard-focus-outline-offset, 2px);
   }
 
+  .statcard-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--statcard-header-gap, 8px);
+  }
+
+  .statcard-header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--statcard-header-left-gap, 8px);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .statcard-header-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Transparent wrapper: keeps the checkbox in the event path (to stop bubbling to
+     the card action) without altering the header layout. */
+  .statcard-header-checkbox {
+    display: contents;
+  }
+
   .statcard-title {
     font-size: var(--statcard-title-font-size, 12px);
     font-weight: var(--statcard-title-font-weight, 500);
@@ -126,6 +278,12 @@
     text-overflow: ellipsis;
   }
 
+  .statcard-title-tooltip {
+    cursor: default;
+    text-decoration: underline dotted;
+    text-underline-offset: 2px;
+  }
+
   .statcard-value-row {
     display: flex;
     align-items: var(--statcard-value-row-align, baseline);
@@ -162,6 +320,117 @@
     line-height: var(--statcard-subtitle-line-height, 1.4);
   }
 
+  /* Multi-row layout */
+  .statcard-rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--statcard-rows-gap, 0px);
+  }
+
+  .statcard-row-divider {
+    height: var(--statcard-row-divider-height, 1px);
+    background: var(--statcard-row-divider-color, #e5e7eb);
+    margin: var(--statcard-row-divider-margin, 8px 0);
+  }
+
+  /* Horizontal layout: lay the metric sections side by side with vertical
+     dividers. Each section flexes to share the available width equally. */
+  .statcard-rows-horizontal {
+    flex-direction: row;
+  }
+
+  .statcard-rows-horizontal .statcard-row {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .statcard-rows-horizontal .statcard-row-divider {
+    align-self: stretch;
+    flex-shrink: 0;
+    width: var(--statcard-row-divider-height, 1px);
+    height: auto;
+    margin: var(--statcard-row-divider-margin-horizontal, 0 16px);
+  }
+
+  .statcard-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--statcard-row-gap, 4px);
+  }
+
+  .statcard-row-heading-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .statcard-row-heading {
+    font-size: var(--statcard-row-heading-font-size, 12px);
+    font-weight: var(--statcard-row-heading-font-weight, 500);
+    color: var(--statcard-row-heading-color, #6b7280);
+    line-height: var(--statcard-row-heading-line-height, 1.4);
+  }
+
+  .statcard-row-heading-tooltip {
+    cursor: default;
+    text-decoration: underline dotted;
+    text-underline-offset: 2px;
+  }
+
+  .statcard-row-value-line {
+    display: flex;
+    align-items: baseline;
+    gap: var(--statcard-row-value-gap, 8px);
+    flex-wrap: wrap;
+  }
+
+  .statcard-row-additional {
+    font-size: var(--statcard-row-additional-font-size, 12px);
+    font-weight: var(--statcard-row-additional-font-weight, 400);
+    color: var(--statcard-row-additional-color, #9ca3af);
+    line-height: 1.4;
+  }
+
+  /* Breakdown grid */
+  .statcard-breakdown-heading {
+    font-size: var(--statcard-breakdown-heading-font-size, 11px);
+    font-weight: var(--statcard-breakdown-heading-font-weight, 600);
+    color: var(--statcard-breakdown-heading-color, #6b7280);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    margin-top: var(--statcard-breakdown-heading-margin-top, 6px);
+  }
+
+  .statcard-breakdown-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--statcard-breakdown-col-min, 100px), 1fr));
+    gap: var(--statcard-breakdown-gap, 8px);
+    margin-top: var(--statcard-breakdown-margin-top, 4px);
+  }
+
+  .statcard-breakdown-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--statcard-breakdown-item-gap, 2px);
+  }
+
+  .statcard-breakdown-label {
+    font-size: var(--statcard-breakdown-label-font-size, 11px);
+    font-weight: var(--statcard-breakdown-label-font-weight, 400);
+    color: var(--statcard-breakdown-label-color, #9ca3af);
+    line-height: 1.4;
+  }
+
+  .statcard-breakdown-value {
+    font-size: var(--statcard-breakdown-value-font-size, 14px);
+    font-weight: var(--statcard-breakdown-value-font-weight, 600);
+    color: var(--statcard-breakdown-value-color, inherit);
+    line-height: 1.2;
+  }
+
+  .statcard-children {
+    margin-top: var(--statcard-children-margin-top, 4px);
+  }
+
   .statcard-footer {
     margin-top: var(--statcard-footer-margin-top, 8px);
     padding-top: var(--statcard-footer-padding-top, 8px);

package/dist/StatCard/properties.d.ts

@@ -1,6 +1,50 @@
 import type { Snippet } from 'svelte';
 export type StatCardProperties = OptionalStatCardProperties & StatCardEventProperties;
 export type MandatoryStatCardProperties = Record<string, never>;
+export type StatCardTooltip = {
+    text: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    testId?: string;
+};
+export type StatCardBreakdownItem = {
+    label: string;
+    value: string;
+    change?: number;
+    invertChangeColors?: boolean;
+};
+/**
+ * A single metric row inside a multi-row StatCard.
+ *
+ * @example
+ * ```ts
+ * const row: StatCardRow = {
+ *   heading: 'Gross Revenue',
+ *   value: '₹12.4Cr',
+ *   change: 8.2,
+ *   tooltip: { text: 'Revenue before returns' }
+ * };
+ * ```
+ */
+export type StatCardRow = {
+    /** The metric value string for this row (e.g. "₹1.23Cr", "98.4%"). */
+    value: string;
+    /** Optional row-level heading label. */
+    heading?: string;
+    /** Numeric change for the delta indicator. */
+    change?: number;
+    /** Invert delta colors for lower-is-better metrics on this row. */
+    invertChangeColors?: boolean;
+    /** Additional descriptive text rendered after the delta. */
+    additionalContent?: string;
+    /** Tooltip shown on the row heading. */
+    tooltip?: StatCardTooltip;
+    /** Heading rendered above the breakdown grid. */
+    breakdownHeading?: string;
+    /** Breakdown items rendered in a grid below the row value. */
+    breakdown?: StatCardBreakdownItem[];
+    /** Test selector for the row root element. */
+    testId?: string;
+};
 export type OptionalStatCardProperties = {
     /** Card heading label. */
     title?: string;
@@ -16,6 +60,28 @@ export type OptionalStatCardProperties = {
     footer?: Snippet;
     /** Replaces the string `value` with a custom snippet for advanced value rendering. */
     valueSnippet?: Snippet;
+    /**
+     * Multiple metric rows. When provided, replaces the single value/delta row with
+     * a column of rows separated by dividers.
+     */
+    rows?: StatCardRow[];
+    /**
+     * Layout direction for `rows`. `'column'` (default) stacks rows vertically with
+     * horizontal dividers; `'row'` lays the sections side by side with vertical
+     * dividers, each section flexing to share the width equally.
+     */
+    rowsDirection?: 'column' | 'row';
+    /** Tooltip shown on the card title. */
+    tooltip?: StatCardTooltip;
+    /** Checkbox rendered next to the title. */
+    checkbox?: {
+        text: string;
+        checked?: boolean;
+    };
+    /** Snippet rendered at the right edge of the header row. */
+    headerRight?: Snippet;
+    /** Snippet rendered inside the card body, after any rows. */
+    children?: Snippet;
     /** Renders as `data-pw` on the root element for Playwright test selection. */
     testId?: string;
     /** Extra CSS class names appended to the root element. */
@@ -24,4 +90,6 @@ export type OptionalStatCardProperties = {
 export type StatCardEventProperties = {
     /** Makes the card interactive: adds `role="button"`, `tabindex=0`, and wires click/Enter/Space. */
     onclick?: (event: MouseEvent) => void;
+    /** Fired when the header checkbox changes. */
+    onCheckboxChange?: (checked: boolean) => void;
 };

package/dist/index.d.ts

@@ -71,6 +71,7 @@ export { default as StatCard } from './StatCard/StatCard.svelte';
 export { default as DeltaIndicator } from './DeltaIndicator/DeltaIndicator.svelte';
 export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart.svelte';
 export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
+export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -138,6 +139,7 @@ export type * from './StatCard/properties';
 export type * from './DeltaIndicator/properties';
 export type * from './DualAxisBarChart/properties';
 export type * from './FunnelChart/properties';
+export type * from './ProportionBar/properties';
 export type * from './_chart/highlight';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -71,5 +71,6 @@ export { default as StatCard } from './StatCard/StatCard.svelte';
 export { default as DeltaIndicator } from './DeltaIndicator/DeltaIndicator.svelte';
 export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart.svelte';
 export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
+export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

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