@juspay/blend-design-system 0.0.17 → 0.0.18

package/dist/components/Charts/ChartUtils.d.ts

@@ -9,7 +9,7 @@ export declare function transformScatterData(data: NewNestedDataPoint[], selecte
 export declare function lightenHexColor(hex: string, amount?: number): string;
 export declare const formatNumber: (value: number | string) => string;
 export declare const capitaliseCamelCase: (text: string) => string;
-export declare const createSmartDateTimeFormatter: (timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
-export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
+export declare const createSmartDateTimeFormatter: (timeZone?: string, hour12?: boolean, showYear?: boolean) => ((value: string | number) => string);
+export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean, timeZone?: string, hour12?: boolean, showYear?: boolean, forTooltip?: boolean) => ((value: string | number) => string);
 export declare const createStableSmartFormatter: (xAxisConfig: XAxisConfig, flattenedData: FlattenedDataPoint[]) => ((value: string | number) => string) | undefined;
 export declare const getAxisFormatter: (axisType: AxisType, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);

package/dist/components/Charts/types.d.ts

@@ -70,6 +70,7 @@ export type AxisConfig = {
     smart?: boolean;
     timeZone?: string;
     hour12?: boolean;
+    showYear?: boolean;
 };
 export type XAxisConfig = AxisConfig;
 export type YAxisConfig = AxisConfig;
@@ -129,6 +130,7 @@ export type ChartsProps = {
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
     noData?: NoDataProps;
+    height?: number;
 };
 export type FlattenedDataPoint = {
     name: string;

package/dist/components/DataTable/ColumnManager.d.ts

@@ -1,5 +1,5 @@
 import { ColumnManagerProps } from './types';
 export declare const ColumnManager: {
-    <T extends Record<string, unknown>>({ columns, visibleColumns, onColumnChange, maxSelections, alwaysSelectedColumns, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends Record<string, unknown>>({ columns, visibleColumns, onColumnChange, maxSelections, alwaysSelectedColumns, columnManagerPrimaryAction, columnManagerSecondaryAction, multiSelectWidth, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -9,6 +9,19 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     enableColumnManager?: boolean;
     columnManagerMaxSelections?: number;
     columnManagerAlwaysSelected?: string[];
+    columnManagerPrimaryAction?: {
+        text: string;
+        onClick: (selectedColumns: string[]) => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    columnManagerSecondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    columnManagerWidth?: number;
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;

package/dist/components/DataTable/types.d.ts

@@ -87,6 +87,19 @@ export type ColumnManagerProps<T extends Record<string, unknown>> = {
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
     maxSelections?: number;
     alwaysSelectedColumns?: string[];
+    columnManagerPrimaryAction?: {
+        text: string;
+        onClick: (selectedColumns: string[]) => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    columnManagerSecondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    multiSelectWidth?: number;
 };
 export type AdvancedFilterProps = {
     filters: unknown[];
@@ -223,6 +236,19 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     enableColumnManager?: boolean;
     columnManagerMaxSelections?: number;
     columnManagerAlwaysSelected?: (keyof T)[];
+    columnManagerPrimaryAction?: {
+        text: string;
+        onClick: (selectedColumns: string[]) => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    columnManagerSecondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    columnManagerWidth?: number;
     pagination?: PaginationConfig;
     serverSidePagination?: boolean;
     onPageChange?: (page: number) => void;

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -6,6 +6,8 @@ type CalendarGridProps = {
     allowSingleDateSelection?: boolean;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    hideFutureDates?: boolean;
+    hidePastDates?: boolean;
     showDateTimePicker?: boolean;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/DateRangePicker/QuickRangeSelector.d.ts

@@ -10,6 +10,7 @@ type QuickRangeSelectorProps = {
     disablePastDates?: boolean;
     isDisabled?: boolean;
     size?: DateRangePickerSize;
+    maxMenuHeight?: number;
 };
 declare const QuickRangeSelector: import('react').ForwardRefExoticComponent<QuickRangeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
 export default QuickRangeSelector;

package/dist/components/DateRangePicker/constants.d.ts

@@ -0,0 +1,23 @@
+export declare const DATE_RANGE_PICKER_CONSTANTS: {
+    readonly DEFAULT_DATE_FORMAT: "dd/MM/yyyy";
+    readonly TIME_FORMAT: "HH:mm";
+    readonly PRESET_DETECTION_TOLERANCE_MS: number;
+    readonly TIMEZONE_TOLERANCE_HOURS: 25;
+    readonly CALENDAR_CONTAINER_HEIGHT: 340;
+    readonly CALENDAR_LOAD_THRESHOLD: 100;
+    readonly MONTH_BUFFER_SIZE: 2;
+    readonly MOBILE_PICKER: {
+        readonly ITEM_HEIGHT: 44;
+        readonly VISIBLE_ITEMS: 3;
+    };
+    readonly HAPTIC_PATTERNS: {
+        readonly SELECTION: readonly [8];
+        readonly IMPACT: readonly [15];
+        readonly NOTIFICATION: readonly [25, 40, 25];
+    };
+    readonly MIN_YEAR: 2012;
+    readonly MAX_YEAR_OFFSET: 10;
+    readonly TIME_MINUTE_INCREMENT: 15;
+    readonly SCROLL_DEBOUNCE_MS: 80;
+    readonly HAPTIC_COOLDOWN_MS: 50;
+};

package/dist/components/DateRangePicker/types.d.ts

@@ -20,11 +20,6 @@ export declare enum DateRangePickerSize {
     MEDIUM = "md",
     LARGE = "lg"
 }
-export type DateRange = {
-    startDate: Date;
-    endDate: Date;
-    showTimePicker?: boolean;
-};
 /**
  * Predefined format presets for common date display patterns
  */
@@ -39,6 +34,39 @@ export declare enum DateFormatPreset {
     US_RANGE = "us-range",// "09/03/2025 - 09/05/2025"
     CUSTOM = "custom"
 }
+/**
+ * Haptic feedback types for different interactions
+ */
+export declare enum HapticFeedbackType {
+    SELECTION = "selection",
+    IMPACT = "impact",
+    NOTIFICATION = "notification"
+}
+/**
+ * Validation error types for date inputs
+ */
+export declare enum DateValidationError {
+    NONE = "none",
+    INVALID_FORMAT = "format",
+    INVALID_DATE = "invalid-date",
+    OUT_OF_RANGE = "out-of-range",
+    INVALID_TIME_ORDER = "invalid-time-order",
+    MISSING_DATES = "missing-dates",
+    FUTURE_DATE_DISABLED = "future-date-disabled",
+    PAST_DATE_DISABLED = "past-date-disabled"
+}
+/**
+ * Calendar interaction modes
+ */
+export declare enum CalendarInteractionMode {
+    SINGLE_DATE = "single-date",
+    DATE_RANGE = "date-range"
+}
+export type DateRange = {
+    startDate: Date;
+    endDate: Date;
+    showTimePicker?: boolean;
+};
 /**
  * Custom format function type for advanced formatting
  */
@@ -78,6 +106,37 @@ export type TriggerConfig = {
         onClick: () => void;
     }) => ReactNode;
 };
+/**
+ * Date validation result
+ */
+export type DateValidationResult = {
+    isValid: boolean;
+    error: DateValidationError;
+    message?: string;
+};
+/**
+ * Date range validation result
+ */
+export type DateRangeValidationResult = {
+    isValid: boolean;
+    error: DateValidationError;
+    message?: string;
+};
+/**
+ * Calendar month data structure
+ */
+export type CalendarMonth = {
+    month: number;
+    year: number;
+    index?: number;
+};
+/**
+ * Picker column data
+ */
+export type PickerColumnData = {
+    items: (string | number)[];
+    selectedIndex: number;
+};
 export type DateRangePickerProps = {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
@@ -92,21 +151,16 @@ export type DateRangePickerProps = {
     allowSingleDateSelection?: boolean;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
+    hideFutureDates?: boolean;
+    hidePastDates?: boolean;
     triggerElement?: ReactNode;
     useDrawerOnMobile?: boolean;
     skipQuickFiltersOnMobile?: boolean;
     size?: DateRangePickerSize;
     formatConfig?: DateFormatConfig;
     triggerConfig?: TriggerConfig;
+    maxMenuHeight?: number;
 };
-/**
- * Haptic feedback types for different interactions
- */
-export declare enum HapticFeedbackType {
-    SELECTION = "selection",
-    IMPACT = "impact",
-    NOTIFICATION = "notification"
-}
 export type PresetItemProps = {
     preset: DateRangePreset;
     isActive: boolean;
@@ -120,6 +174,8 @@ export type ActionButtonsProps = {
     onCancel: () => void;
     onApply: () => void;
     isDisabled?: boolean;
+    isApplyDisabled?: boolean;
+    applyDisabledMessage?: string;
 };
 export type ScrollablePickerProps = {
     items: (string | number)[];
@@ -140,6 +196,8 @@ export type DatePickerComponentProps = {
     setStartDate: (date: string) => void;
     setEndDate: (date: string) => void;
     isDisabled?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
 };
 export type MobileDrawerPresetsProps = {
     drawerOpen: boolean;
@@ -162,4 +220,8 @@ export type MobileDrawerPresetsProps = {
     handleApply: () => void;
     showCustomDropdownOnly?: boolean;
     isDisabled?: boolean;
+    isApplyDisabled?: boolean;
+    applyDisabledMessage?: string;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
 };

package/dist/components/DateRangePicker/utils.d.ts

@@ -109,10 +109,10 @@ export declare const generateCalendarGrid: (year: number, month: number) => (num
  */
 export declare const isStartDate: (date: Date, selectedRange: DateRange) => boolean;
 /**
- * Checks if a date is the end date of a range
+ * Checks if a date is the end date of a range (but not if it's the same as start date)
  * @param date The date to check
  * @param selectedRange The selected date range
- * @returns True if the date is the end date
+ * @returns True if the date is the end date and different from start date
  */
 export declare const isEndDate: (date: Date, selectedRange: DateRange) => boolean;
 /**
@@ -130,7 +130,13 @@ export declare const isInSelectedRange: (date: Date, selectedRange: DateRange) =
  */
 export declare const isDateToday: (date: Date, today: Date) => boolean;
 /**
- * Handles date click logic for calendar
+ * Creates a proper single date range (24-hour selection within the same day)
+ * @param date The date to create a range for
+ * @returns DateRange spanning the entire day (same date, different times)
+ */
+export declare const createSingleDateRange: (date: Date) => DateRange;
+/**
+ * Handles date click logic for calendar with clean first click = start, second click = end pattern
  * @param clickedDate The date that was clicked
  * @param selectedRange Current selected range
  * @param allowSingleDateSelection Whether single date selection is allowed
@@ -326,9 +332,11 @@ export type DateRangePickerTokens = {
  * Validates date format and date values
  * @param value The input value to validate
  * @param format The expected format (e.g., 'dd/MM/yyyy')
+ * @param disableFutureDates Whether future dates should be disabled
+ * @param disablePastDates Whether past dates should be disabled
  * @returns Validation result with specific error type
  */
-export declare const validateDateInput: (value: string, format: string) => DateValidationResult;
+export declare const validateDateInput: (value: string, format: string, disableFutureDates?: boolean, disablePastDates?: boolean) => DateValidationResult;
 /**
  * Formats date input as user types, adding slashes automatically
  * @param value The input value to format
@@ -356,9 +364,12 @@ export declare const formatDateDisplay: (selectedRange: DateRange, allowSingleDa
  * @param dateFormat Date format string
  * @param currentRange Current selected range
  * @param timeValue Current time value (HH:mm)
+ * @param isStartDate Whether this is start date or end date
+ * @param disableFutureDates Whether future dates should be disabled
+ * @param disablePastDates Whether past dates should be disabled
  * @returns Object with formatted value, validation result, and updated range
  */
-export declare const handleDateInputChange: (value: string, dateFormat: string, currentRange: DateRange, timeValue: string, isStartDate?: boolean) => {
+export declare const handleDateInputChange: (value: string, dateFormat: string, currentRange: DateRange, timeValue: string, isStartDate?: boolean, disableFutureDates?: boolean, disablePastDates?: boolean) => {
     formattedValue: string;
     validation: DateValidationResult;
     updatedRange?: DateRange;
@@ -658,3 +669,61 @@ export declare const isValidTimeInput: (input: string) => boolean;
  * @returns Formatted time string
  */
 export declare const formatTimeInput: (input: string) => string;
+/**
+ * Validates if a date range has valid date/time combinations
+ * @param range The date range to validate
+ * @param allowSingleDateSelection Whether single date selection is allowed
+ * @returns Validation result with specific error information
+ */
+export declare const validateDateTimeRange: (range: DateRange) => {
+    isValid: boolean;
+    error: "none" | "invalid-time-order" | "missing-dates" | "invalid-single-date";
+    message?: string;
+};
+/**
+ * Checks if a date should be hidden from calendar view
+ * @param date The date to check
+ * @param today Today's date
+ * @param disableFutureDates Whether future dates should be hidden
+ * @param disablePastDates Whether past dates should be hidden
+ * @param hideFutureDates Whether to completely hide future dates (not just disable)
+ * @param hidePastDates Whether to completely hide past dates (not just disable)
+ * @returns True if the date should be hidden
+ */
+export declare const shouldHideDateFromCalendar: (date: Date, today: Date, hideFutureDates?: boolean, hidePastDates?: boolean) => boolean;
+/**
+ * Enhanced calendar date click handler with proper single date selection
+ * @param clickedDate The date that was clicked
+ * @param selectedRange Current selected range
+ * @param allowSingleDateSelection Whether single date selection is allowed
+ * @param today Today's date for validation
+ * @param disableFutureDates Whether future dates are disabled
+ * @param disablePastDates Whether past dates are disabled
+ * @param isDoubleClick Whether this is a double-click event
+ * @returns New date range or null if click should be ignored
+ */
+export declare const handleEnhancedCalendarDateClick: (clickedDate: Date, selectedRange: DateRange, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, isDoubleClick?: boolean) => DateRange | null;
+/**
+ * Checks if two dates represent the same calendar day (ignoring time and timezone)
+ */
+export declare const isSameCalendarDay: (date1: Date, date2: Date) => boolean;
+/**
+ * Checks if a date range represents a full day in any timezone
+ */
+export declare const isFullDayRange: (startDate: Date, endDate: Date) => boolean;
+/**
+ * Checks if a date range matches "Today" preset
+ */
+export declare const matchesTodayPreset: (range: DateRange) => boolean;
+/**
+ * Checks if a date range matches "Yesterday" preset
+ */
+export declare const matchesYesterdayPreset: (range: DateRange) => boolean;
+/**
+ * Checks if a date range matches "Tomorrow" preset
+ */
+export declare const matchesTomorrowPreset: (range: DateRange) => boolean;
+/**
+ * Robust preset detection that works with both UTC and local timezone dates
+ */
+export declare const detectPresetFromRange: (range: DateRange) => DateRangePreset;

package/dist/components/MultiSelect/types.d.ts

@@ -91,7 +91,7 @@ export type MultiSelectProps = {
     showActionButtons?: boolean;
     primaryAction?: {
         text: string;
-        onClick: () => void;
+        onClick: (selectedValues: string[]) => void;
         disabled?: boolean;
         loading?: boolean;
     };
@@ -129,7 +129,7 @@ export type MultiSelectMenuProps = {
     showActionButtons?: boolean;
     primaryAction?: {
         text: string;
-        onClick: () => void;
+        onClick: (selectedValues: string[]) => void;
         disabled?: boolean;
         loading?: boolean;
     };

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import { PopoverProps } from './types';
 declare const Popover: {
-    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, shadow, useDrawerOnMobile, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, shadow, useDrawerOnMobile, avoidCollisions, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Popover;

package/dist/components/Popover/types.d.ts

@@ -30,4 +30,5 @@ export type PopoverProps = {
     onClose?: () => void;
     shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
     useDrawerOnMobile?: boolean;
+    avoidCollisions?: boolean;
 };