@juspay/svelte-ui-components 2.72.0 → 2.73.1

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -30,6 +30,7 @@
     presetCheckmark = false,
     showDateInputs = false,
     showTimeSelection = false,
+    timeSelectionLayout = 'toggle',
     presetToggle = false,
     placeholder = 'Select date',
     dualMonth,
@@ -79,6 +80,14 @@
   let endTimeDisplay: string = $state('11:59 PM');
   let showTimeRow: boolean = $state(false);
 
+  // Inline time layout (timeSelectionLayout="inline"): the start/end time inputs
+  // render beside their date inputs on the same row, always visible — no clock
+  // toggle and no collapsible row. All seeding/validation/fold logic is shared
+  // with the default toggle layout (it keys off showTimeSelection, not the layout).
+  const isInlineTime: boolean = $derived(
+    showTimeSelection && timeSelectionLayout === 'inline' && mode === 'range'
+  );
+
   const MS_PER_DAY = 24 * 60 * 60 * 1000;
 
   function isBaseDisabledDate(date: Date): boolean {
@@ -668,32 +677,82 @@
         <!-- Calendar area -->
         <div class="drp-calendars">
           {#if (showDateInputs || showTimeSelection) && mode === 'range'}
-            <div class="drp-datetime-header">
+            <div class="drp-datetime-header" class:drp-datetime-header-inline={isInlineTime}>
               <div class="drp-date-input-row">
-                <div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
-                  <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span>
-                </div>
-                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
-                <div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
-                  <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
-                </div>
-                {#if showTimeSelection}
-                  <button
-                    type="button"
-                    class="drp-time-toggle"
-                    class:drp-time-toggle-active={showTimeRow}
-                    aria-label="Toggle time selection"
-                    aria-pressed={showTimeRow}
-                    data-pw={testId ? `${testId}-time-toggle` : null}
-                    onclick={() => (showTimeRow = !showTimeRow)}
-                  >
-                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    <span class="drp-time-toggle-icon" aria-hidden="true">{@html clockSvg}</span>
-                  </button>
+                {#if isInlineTime}
+                  <div class="drp-date-time-group">
+                    <div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
+                      <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span
+                      >
+                    </div>
+                    <div
+                      class="drp-time-input drp-time-input-inline"
+                      class:drp-time-input-invalid={!isStartTimeValid}
+                    >
+                      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                      <span class="drp-time-input-icon" aria-hidden="true">{@html clockSvg}</span>
+                      <input
+                        type="text"
+                        class="drp-time-field"
+                        bind:value={startTimeDisplay}
+                        maxlength="8"
+                        placeholder="12:00 AM"
+                        aria-label="Start time"
+                        aria-invalid={!isStartTimeValid}
+                        data-pw={testId ? `${testId}-start-time` : null}
+                      />
+                    </div>
+                  </div>
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
+                  <div class="drp-date-time-group">
+                    <div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
+                      <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
+                    </div>
+                    <div
+                      class="drp-time-input drp-time-input-inline"
+                      class:drp-time-input-invalid={!isEndTimeValid}
+                    >
+                      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                      <span class="drp-time-input-icon" aria-hidden="true">{@html clockSvg}</span>
+                      <input
+                        type="text"
+                        class="drp-time-field"
+                        bind:value={endTimeDisplay}
+                        maxlength="8"
+                        placeholder="11:59 PM"
+                        aria-label="End time"
+                        aria-invalid={!isEndTimeValid}
+                        data-pw={testId ? `${testId}-end-time` : null}
+                      />
+                    </div>
+                  </div>
+                {:else}
+                  <div class="drp-date-input" data-pw={testId ? `${testId}-start-date` : null}>
+                    <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span>
+                  </div>
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
+                  <div class="drp-date-input" data-pw={testId ? `${testId}-end-date` : null}>
+                    <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
+                  </div>
+                  {#if showTimeSelection}
+                    <button
+                      type="button"
+                      class="drp-time-toggle"
+                      class:drp-time-toggle-active={showTimeRow}
+                      aria-label="Toggle time selection"
+                      aria-pressed={showTimeRow}
+                      data-pw={testId ? `${testId}-time-toggle` : null}
+                      onclick={() => (showTimeRow = !showTimeRow)}
+                    >
+                      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                      <span class="drp-time-toggle-icon" aria-hidden="true">{@html clockSvg}</span>
+                    </button>
+                  {/if}
                 {/if}
               </div>
-              {#if showTimeSelection && showTimeRow}
+              {#if showTimeSelection && !isInlineTime && showTimeRow}
                 <div class="drp-time-input-row">
                   <div class="drp-time-input" class:drp-time-input-invalid={!isStartTimeValid}>
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -1207,6 +1266,25 @@
     color: var(--drp-time-field-placeholder-color, #aaaaaa);
   }
 
+  /* ── Inline time layout (timeSelectionLayout="inline") ── */
+  /* Each date input is paired with its time input on the same row: the date box
+     flexes to fill, the time input takes a fixed compact width beside it. */
+  .drp-date-time-group {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    gap: var(--drp-datetime-inline-gap, 8px);
+  }
+
+  .drp-date-time-group .drp-date-input {
+    flex: 1;
+  }
+
+  .drp-time-input.drp-time-input-inline {
+    flex: 0 0 var(--drp-time-inline-width, 116px);
+  }
+
   /* ── Compare calendar slot ── */
   .drp-compare-section {
     display: flex;

package/dist/DateRangePicker/properties.d.ts

@@ -15,6 +15,7 @@ export type DateRangePreset = {
 };
 export type DateRangePickerMode = 'range' | 'single';
 export type DateRangePickerAlign = 'left' | 'right';
+export type DateRangePickerTimeLayout = 'toggle' | 'inline';
 export type OptionalDateRangePickerProperties = {
     /** Currently selected start of range (bindable). */
     rangeStart?: Date | null;
@@ -52,6 +53,14 @@ export type OptionalDateRangePickerProperties = {
      * Opt-in. Default: false.
      */
     showTimeSelection?: boolean;
+    /**
+     * How the time-of-day inputs are presented when showTimeSelection is on (range mode):
+     * 'toggle' (default) shows a clock button that reveals a collapsible start/end time
+     * row below the dates; 'inline' renders each time input beside its date input on the
+     * same row, always visible, with no toggle. Has no effect unless showTimeSelection is
+     * true. Default: 'toggle'.
+     */
+    timeSelectionLayout?: DateRangePickerTimeLayout;
     /**
      * Make presets toggle instead of being one-way: clicking the already-selected
      * preset deselects it and reverts the draft to the committed selection. Lets a

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/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.72.0",
+  "version": "2.73.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",