@juspay/blend-design-system 0.0.18-beta → 0.0.19-beta

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

@@ -130,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, columnManagerPrimaryAction, columnManagerSecondaryAction, }: 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

@@ -21,6 +21,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
         disabled?: boolean;
         loading?: boolean;
     };
+    columnManagerWidth?: number;
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;

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

@@ -99,6 +99,7 @@ export type ColumnManagerProps<T extends Record<string, unknown>> = {
         disabled?: boolean;
         loading?: boolean;
     };
+    multiSelectWidth?: number;
 };
 export type AdvancedFilterProps = {
     filters: unknown[];
@@ -247,6 +248,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
         disabled?: boolean;
         loading?: boolean;
     };
+    columnManagerWidth?: number;
     pagination?: PaginationConfig;
     serverSidePagination?: boolean;
     onPageChange?: (page: number) => void;

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

@@ -1,4 +1,4 @@
-import { DateRange } from './types';
+import { DateRange, CustomRangeConfig } from './types';
 type CalendarGridProps = {
     selectedRange: DateRange;
     onDateSelect: (range: DateRange) => void;
@@ -8,6 +8,8 @@ type CalendarGridProps = {
     disablePastDates?: boolean;
     hideFutureDates?: boolean;
     hidePastDates?: boolean;
+    customDisableDates?: (date: Date) => boolean;
+    customRangeConfig?: CustomRangeConfig;
     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/dateRangePicker.tokens.d.ts

@@ -28,6 +28,11 @@ export type CalendarTokenType = {
                 md: CSSObject['fontSize'];
                 lg: CSSObject['fontSize'];
             };
+            disabled: {
+                borderLeft: CSSObject['borderLeft'];
+                borderTop: CSSObject['borderTop'];
+                borderBottom: CSSObject['borderBottom'];
+            };
         };
         content: {
             padding: CSSObject['padding'];
@@ -164,6 +169,7 @@ export type CalendarTokenType = {
         disabled: {
             opacity: CSSObject['opacity'];
             cursor: CSSObject['cursor'];
+            border: CSSObject['border'];
         };
         borderRadiusWithPresets: CSSObject['borderRadius'];
         borderRadiusWithoutPresets: CSSObject['borderRadius'];

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

@@ -4,8 +4,10 @@ export declare enum DateRangePreset {
     TODAY = "today",
     YESTERDAY = "yesterday",
     TOMORROW = "tomorrow",
+    LAST_30_MINS = "last30Mins",
     LAST_1_HOUR = "last1Hour",
     LAST_6_HOURS = "last6Hours",
+    LAST_24_HOURS = "last24Hours",
     LAST_7_DAYS = "last7Days",
     LAST_30_DAYS = "last30Days",
     LAST_3_MONTHS = "last3Months",
@@ -20,11 +22,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 +36,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 +108,107 @@ 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;
+};
+/**
+ * Function type for custom date disabling logic
+ * @param date The date to check
+ * @returns true if the date should be disabled, false otherwise
+ */
+export type CustomDateDisableFunction = (date: Date) => boolean;
+/**
+ * Function type for custom range calculation
+ * @param selectedDate The date that was selected
+ * @param currentRange The current date range
+ * @param isStartDate Whether the selected date is for start or end
+ * @returns The new date range or null to use default behavior
+ */
+export type CustomRangeCalculationFunction = (selectedDate: Date, currentRange: DateRange, isStartDate: boolean) => DateRange | null;
+/**
+ * Configuration for automatic range calculation
+ */
+export type AutoRangeConfig = {
+    /** Number of days to add to start date for end date */
+    rangeDays?: number;
+    /** Number of hours to add to start date for end date */
+    rangeHours?: number;
+    /** Number of minutes to add to start date for end date */
+    rangeMinutes?: number;
+    /** Whether to include the start date in the range (true) or exclude it (false) */
+    includeStartDate?: boolean;
+    /** Custom function to calculate the range */
+    customCalculation?: CustomRangeCalculationFunction;
+};
+/**
+ * Function type for custom range calculation
+ * @param startDate The selected start date
+ * @param currentRange The current selected range (if any)
+ * @returns The calculated end date, or null to use default behavior
+ */
+export type CustomRangeCalculatorFunction = (startDate: Date, currentRange?: DateRange) => Date | null;
+/**
+ * Configuration for custom range behavior
+ */
+export type CustomRangeConfig = {
+    /**
+     * Function to calculate end date based on start date
+     */
+    calculateEndDate?: CustomRangeCalculatorFunction;
+    /**
+     * Fixed number of days for the range (alternative to calculateEndDate)
+     */
+    fixedDayRange?: number;
+    /**
+     * Reference date range to use for comparison/duration calculation
+     * When provided, the component will calculate a range with the same duration
+     */
+    referenceRange?: DateRange;
+    /**
+     * Number of days to go backward for backward ranges (e.g., last 5 days)
+     * Used when calculateEndDate returns the same date as clicked date
+     * @default 6
+     */
+    backwardDays?: number;
+    /**
+     * Whether to allow manual end date selection when using custom range logic
+     * @default false
+     */
+    allowManualEndDateSelection?: boolean;
+    /**
+     * Whether to apply custom range logic to preset selections
+     * @default false
+     */
+    applyToPresets?: boolean;
+};
 export type DateRangePickerProps = {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
@@ -94,21 +225,16 @@ export type DateRangePickerProps = {
     disablePastDates?: boolean;
     hideFutureDates?: boolean;
     hidePastDates?: boolean;
+    customDisableDates?: CustomDateDisableFunction;
+    customRangeConfig?: CustomRangeConfig;
     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;

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

@@ -1,4 +1,4 @@
-import { DateRange, DateRangePreset, DateFormatConfig, CustomFormatFunction, HapticFeedbackType } from './types';
+import { DateRange, DateRangePreset, DateFormatConfig, CustomFormatFunction, HapticFeedbackType, CustomRangeConfig, CustomRangeCalculatorFunction } from './types';
 import { CalendarTokenType } from './dateRangePicker.tokens';
 /**
  * Formats a date according to the specified format
@@ -277,9 +277,10 @@ export declare const getScrollToMonth: (monthIndex: number, monthHeight: number)
  * @param today Today's date
  * @param disableFutureDates Whether future dates are disabled
  * @param disablePastDates Whether past dates are disabled
+ * @param customDisableDates Custom function to disable specific dates
  * @returns Object with all date states
  */
-export declare const getDateCellStates: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean) => {
+export declare const getDateCellStates: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customDisableDates?: (date: Date) => boolean) => {
     isStart: boolean;
     isEnd: boolean;
     isRangeDay: boolean;
@@ -473,9 +474,10 @@ export declare const createCalendarMonthData: (year: number, month: number, mont
  * @param disableFutureDates Whether future dates are disabled
  * @param disablePastDates Whether past dates are disabled
  * @param calendarToken Calendar token for styling
+ * @param customDisableDates Custom function to disable specific dates
  * @returns Day cell props
  */
-export declare const calculateDayCellProps: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates: boolean, disablePastDates: boolean, calendarToken: CalendarTokenType) => {
+export declare const calculateDayCellProps: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates: boolean, disablePastDates: boolean, calendarToken: CalendarTokenType, customDisableDates?: (date: Date) => boolean) => {
     dateStates: ReturnType<typeof getDateCellStates>;
     styles: Record<string, unknown>;
     textColor: string | unknown;
@@ -703,3 +705,124 @@ export declare const shouldHideDateFromCalendar: (date: Date, today: Date, hideF
  * @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;
+/**
+ * Applies custom range calculation logic to a selected start date
+ * @param startDate The selected start date
+ * @param customRangeConfig Custom range configuration
+ * @param currentRange Current selected range (optional)
+ * @returns Calculated range or null to use default behavior
+ */
+export declare const applyCustomRangeCalculation: (startDate: Date, customRangeConfig: CustomRangeConfig, currentRange?: DateRange) => DateRange | null;
+/**
+ * Enhanced calendar date click handler with custom range calculation support
+ * @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 customRangeConfig Custom range configuration
+ * @param isDoubleClick Whether this is a double-click event
+ * @returns New date range or null if click should be ignored
+ */
+export declare const handleCustomRangeCalendarDateClick: (clickedDate: Date, selectedRange: DateRange, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customRangeConfig?: CustomRangeConfig, isDoubleClick?: boolean) => DateRange | null;
+/**
+ * Validates custom range configuration
+ * @param config Custom range configuration to validate
+ * @returns Validation result with error message if invalid
+ */
+export declare const validateCustomRangeConfig: (config: CustomRangeConfig) => {
+    isValid: boolean;
+    error?: string;
+};
+/**
+ * Creates common custom range calculation functions
+ */
+export declare const createCustomRangeCalculators: {
+    /**
+     * Creates a calculator for fixed number of days
+     * @param days Number of days for the range
+     * @returns Custom range calculator function
+     */
+    fixedDays: (days: number) => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for business days (excluding weekends)
+     * @param businessDays Number of business days
+     * @returns Custom range calculator function
+     */
+    businessDays: (businessDays: number) => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for end of week (Sunday)
+     * @returns Custom range calculator function
+     */
+    endOfWeek: () => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for end of month
+     * @returns Custom range calculator function
+     */
+    endOfMonth: () => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for quarter end
+     * @returns Custom range calculator function
+     */
+    endOfQuarter: () => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator that compares with another date range
+     * @param compareRange The range to compare with
+     * @returns Custom range calculator function
+     */
+    compareWithRange: (compareRange: DateRange) => CustomRangeCalculatorFunction;
+};
+/**
+ * Helper function to create common custom range configurations
+ */
+export declare const createCustomRangeConfigs: {
+    /**
+     * Fixed 5-day range
+     */
+    fiveDayRange: () => CustomRangeConfig;
+    /**
+     * Fixed 7-day range (week)
+     */
+    weekRange: () => CustomRangeConfig;
+    /**
+     * Business week (5 business days)
+     */
+    businessWeek: () => CustomRangeConfig;
+    /**
+     * Month range (start date to end of month)
+     */
+    monthRange: () => CustomRangeConfig;
+    /**
+     * Quarter range (start date to end of quarter)
+     */
+    quarterRange: () => CustomRangeConfig;
+    /**
+     * Flexible range with manual override
+     */
+    flexibleRange: (defaultDays: number) => CustomRangeConfig;
+};

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;
 };