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

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

@@ -1,9 +1,15 @@
 import { NewNestedDataPoint, FlattenedDataPoint, AxisType, XAxisConfig } from './types';
 export declare function transformNestedData(data: NewNestedDataPoint[], selectedKeys?: string[]): FlattenedDataPoint[];
+export declare function transformScatterData(data: NewNestedDataPoint[], selectedKeys?: string[]): Array<{
+    name: string;
+    x: number;
+    y: number;
+    seriesKey: string;
+}>;
 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

@@ -24,7 +24,8 @@ export declare enum ChartLegendPosition {
 export declare enum ChartType {
     LINE = "line",
     BAR = "bar",
-    PIE = "pie"
+    PIE = "pie",
+    SCATTER = "scatter"
 }
 export declare enum LegendsChangeType {
     INCREASE = "increase",
@@ -69,6 +70,7 @@ export type AxisConfig = {
     smart?: boolean;
     timeZone?: string;
     hour12?: boolean;
+    showYear?: boolean;
 };
 export type XAxisConfig = AxisConfig;
 export type YAxisConfig = AxisConfig;

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, }: ColumnManagerProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -9,6 +9,18 @@ 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;
+    };
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;

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

@@ -87,6 +87,18 @@ 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;
+    };
 };
 export type AdvancedFilterProps = {
     filters: unknown[];
@@ -223,6 +235,18 @@ 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;
+    };
     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

@@ -1,4 +1,4 @@
-import { DateRangePreset } from './types';
+import { DateRangePreset, DateRangePickerSize } from './types';
 type QuickRangeSelectorProps = {
     isOpen: boolean;
     onToggle: () => void;
@@ -9,6 +9,7 @@ type QuickRangeSelectorProps = {
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
     isDisabled?: boolean;
+    size?: DateRangePickerSize;
 };
 declare const QuickRangeSelector: import('react').ForwardRefExoticComponent<QuickRangeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
 export default QuickRangeSelector;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -4,13 +4,11 @@ import { BreakpointType } from '../../breakpoints/breakPoints';
 export type CalendarTokenType = {
     quickRange: {
         trigger: {
-            height: CSSObject['height'];
             borderLeft: CSSObject['borderLeft'];
             borderTop: CSSObject['borderTop'];
             borderBottom: CSSObject['borderBottom'];
             borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
             borderBottomLeftRadius: CSSObject['borderBottomLeftRadius'];
-            padding: CSSObject['padding'];
             display: CSSObject['display'];
             justifyContent: CSSObject['justifyContent'];
             alignItems: CSSObject['alignItems'];
@@ -20,6 +18,16 @@ export type CalendarTokenType = {
             iconSize: CSSObject['iconSize'];
             text: CSSObject;
             gap: CSSObject['gap'];
+            padding: {
+                sm: CSSObject['padding'];
+                md: CSSObject['padding'];
+                lg: CSSObject['padding'];
+            };
+            fontSize: {
+                sm: CSSObject['fontSize'];
+                md: CSSObject['fontSize'];
+                lg: CSSObject['fontSize'];
+            };
         };
         content: {
             padding: CSSObject['padding'];
@@ -144,16 +152,13 @@ export type CalendarTokenType = {
         };
     };
     trigger: {
-        height: CSSObject['height'];
         display: CSSObject['display'];
         alignItems: CSSObject['alignItems'];
         justifyContent: CSSObject['justifyContent'];
-        padding: CSSObject['padding'];
         border: CSSObject['border'];
         borderRadius: CSSObject['borderRadius'];
         boxShadow: CSSObject['boxShadow'];
         backgroundColor: CSSObject['backgroundColor'];
-        fontSize: CSSObject['fontSize'];
         color: CSSObject['color'];
         cursor: CSSObject['cursor'];
         disabled: {
@@ -162,6 +167,16 @@ export type CalendarTokenType = {
         };
         borderRadiusWithPresets: CSSObject['borderRadius'];
         borderRadiusWithoutPresets: CSSObject['borderRadius'];
+        padding: {
+            sm: CSSObject['padding'];
+            md: CSSObject['padding'];
+            lg: CSSObject['padding'];
+        };
+        fontSize: {
+            sm: CSSObject['fontSize'];
+            md: CSSObject['fontSize'];
+            lg: CSSObject['fontSize'];
+        };
     };
     calendar: {
         minWidth: CSSObject['minWidth'];

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

@@ -15,6 +15,11 @@ export declare enum DateRangePreset {
     NEXT_3_MONTHS = "next3Months",
     NEXT_12_MONTHS = "next12Months"
 }
+export declare enum DateRangePickerSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
 export type DateRange = {
     startDate: Date;
     endDate: Date;
@@ -87,9 +92,12 @@ 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;
 };
@@ -114,6 +122,8 @@ export type ActionButtonsProps = {
     onCancel: () => void;
     onApply: () => void;
     isDisabled?: boolean;
+    isApplyDisabled?: boolean;
+    applyDisabledMessage?: string;
 };
 export type ScrollablePickerProps = {
     items: (string | number)[];
@@ -134,6 +144,8 @@ export type DatePickerComponentProps = {
     setStartDate: (date: string) => void;
     setEndDate: (date: string) => void;
     isDisabled?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
 };
 export type MobileDrawerPresetsProps = {
     drawerOpen: boolean;
@@ -156,4 +168,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
@@ -206,9 +212,11 @@ export declare const getMonthName: (monthIndex: number) => string;
 export declare const getDayNames: () => string[];
 /**
  * Calculates the height of a single month in the calendar
+ * @param year The year of the month
+ * @param month The month (0-based)
  * @returns Height in pixels
  */
-export declare const getMonthHeight: () => number;
+export declare const getMonthHeight: (year?: number, month?: number) => number;
 /**
  * Calculates which months should be visible in the viewport
  * @param scrollTop Current scroll position
@@ -324,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
@@ -354,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;
@@ -656,3 +669,37 @@ 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;

package/dist/components/KeyValuePair/KeyValuePair.tokens.d.ts

@@ -1,16 +1,36 @@
 import { CSSObject } from 'styled-components';
-import { BreakpointType } from '../../breakpoints/breakPoints';
+import { KeyValuePairSize } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { KeyValuePairSize, KeyValuePairStateType } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+/**
+ * KeyValuePair Tokens following the pattern: [target].CSSProp.[size].[state]
+ * component.CSSProp.[size].[variant].[subType].[state].value
+ * Structure:
+ * - target: container | key | value (defines what element the token applies to)
+ * - CSSProp: gap | color | fontSize
+ * - size: sm | md | lg (only for size-dependent properties like value fontSize)
+ * - state: vertical | horizontal (layout state)
+ *
+ * Size-independent properties: gap, key color, key fontSize, value color
+ * Size-dependent properties: value fontSize
+ */
 export type KeyValuePairTokensType = {
-    gap: CSSObject['gap'];
-    keyColor: CSSObject['color'];
-    valueColor: CSSObject['color'];
-    keyFontSize: CSSObject['fontSize'];
-    valueFontSize: {
-        [key in KeyValuePairSize]: {
-            [key in KeyValuePairStateType]: CSSObject['fontSize'];
+    gap: {
+        [key in 'vertical' | 'horizontal']: CSSObject['gap'];
+    };
+    key: {
+        color: CSSObject['color'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        gap: CSSObject['gap'];
+    };
+    value: {
+        color: CSSObject['color'];
+        fontSize: {
+            [key in KeyValuePairSize]: CSSObject['fontSize'];
         };
+        fontWeight: CSSObject['fontWeight'];
+        gap: CSSObject['gap'];
     };
 };
 export type ResponsiveKeyValuePairTokens = {

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/Sidebar/Sidebar.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { SidebarProps } from './types';
-declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: import('react').ForwardRefExoticComponent<SidebarProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Sidebar;

package/dist/components/Sidebar/SidebarFooter.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type SidebarFooterProps = {
+    footer?: React.ReactNode;
+};
+declare const SidebarFooter: React.FC<SidebarFooterProps>;
+export default SidebarFooter;

package/dist/components/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { SidebarMerchantInfo } from './types';
+type SidebarHeaderProps = {
+    sidebarTopSlot?: React.ReactNode;
+    merchantInfo?: SidebarMerchantInfo;
+    isExpanded: boolean;
+    isScrolled: boolean;
+    sidebarCollapseKey: string;
+    onToggle: () => void;
+};
+declare const SidebarHeader: React.FC<SidebarHeaderProps>;
+export default SidebarHeader;

package/dist/components/Sidebar/TenantPanel.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { TenantItem } from './types';
+type TenantPanelProps = {
+    items: TenantItem[];
+    selected: string;
+    onSelect: (label: string) => void;
+    maxVisibleItems?: number;
+};
+declare const TenantPanel: React.FC<TenantPanelProps>;
+declare const TenantItem: React.FC<{
+    tenant: TenantItem;
+    isSelected: boolean;
+    onSelect: () => void;
+}>;
+export default TenantPanel;

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

@@ -12,6 +12,20 @@ export type LeftPanelInfo = {
     onSelect: (value: string) => void;
     maxVisibleItems?: number;
 };
+export type TenantItem = {
+    label: string;
+    value?: string;
+    icon: ReactNode;
+};
+export type SidebarMerchantInfo = {
+    items: Array<{
+        label: string;
+        value: string;
+        icon?: ReactNode;
+    }>;
+    selected: string;
+    onSelect: (value: string) => void;
+};
 export type SidebarProps = {
     children: ReactNode;
     data: DirectoryData[];
@@ -22,4 +36,5 @@ export type SidebarProps = {
     sidebarCollapseKey?: string;
     merchantInfo?: MerchantInfo;
     rightActions?: ReactNode;
+    enableTopbarAutoHide?: boolean;
 };

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

@@ -0,0 +1,25 @@
+import { TenantItem } from './types';
+export declare const arrangeTenants: (tenants: TenantItem[], selectedLabel: string, maxVisible: number) => {
+    visibleTenants: TenantItem[];
+    hiddenTenants: TenantItem[];
+    hasMoreTenants: boolean;
+};
+export declare const getSidebarWidth: (isExpanded: boolean, isHovering: boolean, hasLeftPanel: boolean) => string;
+export declare const getSidebarBorder: (isExpanded: boolean, isHovering: boolean) => string;
+export declare const getTopbarStyles: (enableAutoHide: boolean, showTopbar: boolean) => {
+    transform?: undefined;
+    transition?: undefined;
+} | {
+    transform: string;
+    transition: string;
+};
+export declare const getDefaultMerchantInfo: () => {
+    items: {
+        label: string;
+        value: string;
+        icon: null;
+    }[];
+    selected: string;
+    onSelect: (value: string) => void;
+};
+export declare const useTopbarAutoHide: (enableTopbarAutoHide: boolean) => boolean;

package/dist/components/Topbar/topbar.tokens.d.ts

@@ -3,7 +3,6 @@ import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TopbarState = 'default' | 'hover' | 'active';
 export type TopbarTokensType = {
-    height: CSSObject['height'];
     position: CSSObject['position'];
     top: CSSObject['top'];
     zIndex: CSSObject['zIndex'];