@juspay/svelte-ui-components 2.63.0 → 2.64.0

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -5,6 +5,7 @@
   import Calendar from '../Calendar/Calendar.svelte';
   import Button from '../Button/Button.svelte';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
 
   let {
     rangeStart = $bindable(null),
@@ -16,6 +17,7 @@
     disabledDates = [],
     maxRangeDays = null,
     presets = null,
+    presetCheckmark = false,
     placeholder = 'Select date',
     dualMonth,
     timePicker,
@@ -391,6 +393,14 @@
     ) {
       return preset.label === activePresetLabel;
     }
+    // A preset was explicitly chosen this session — match it by label, not by date.
+    // Several presets can share a calendar day (e.g. "Today", "Last 30 minutes" and
+    // "Last 12 hours" all start today), so same-day matching would light up all of
+    // them at once. selectedPresetLabel is cleared on a direct calendar click, so the
+    // date-based fallbacks below still drive highlighting for manual selections.
+    if (selectedPresetLabel !== null) {
+      return preset.label === selectedPresetLabel;
+    }
     if (mode === 'single') {
       if (draftValue === null) {
         return false;
@@ -537,11 +547,16 @@
                 type="button"
                 class="drp-preset-item"
                 class:drp-preset-active={isPresetActive(preset)}
+                class:drp-preset-checkable={presetCheckmark}
                 role="option"
                 aria-selected={isPresetActive(preset)}
                 onclick={() => handlePreset(preset)}
               >
                 {preset.label}
+                {#if presetCheckmark && isPresetActive(preset)}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  <span class="drp-preset-check" aria-hidden="true">{@html checkmarkSvg}</span>
+                {/if}
               </button>
             {/each}
           </div>
@@ -778,6 +793,29 @@
     background: var(--drp-preset-active-hover-background, #333333);
   }
 
+  /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick
+     sits flush-right while the label stays left. A preset with no tick (or a
+     label-only preset) keeps its single flex child at the start, unchanged. */
+  .drp-preset-checkable {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--drp-preset-check-gap, 8px);
+  }
+
+  .drp-preset-check {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--drp-preset-check-size, 16px);
+    height: var(--drp-preset-check-size, 16px);
+    color: var(--drp-preset-check-color, inherit);
+  }
+
+  .drp-preset-check :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
   /* ── Calendar area ── */
   .drp-calendars {
     display: flex;

package/dist/DateRangePicker/properties.d.ts

@@ -33,6 +33,12 @@ export type OptionalDateRangePickerProperties = {
     maxRangeDays?: number | null;
     /** Preset options shown in the sidebar. Omit to hide the sidebar. */
     presets?: DateRangePreset[] | null;
+    /**
+     * Show a trailing checkmark on the active preset in the sidebar. Opt-in, so
+     * existing layouts are unchanged; the active preset is always distinguished by
+     * its highlighted background regardless of this flag. Default: false.
+     */
+    presetCheckmark?: boolean;
     /** Placeholder shown when no range is selected. */
     placeholder?: string;
     /** Show two months side by side. Defaults to true for range mode, false for single. */

package/package.json

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