@juspay/blend-design-system 0.0.20-beta → 0.0.21-beta

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

@@ -1,187 +1,79 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
+export type CalendarState = 'default' | 'hover' | 'active' | 'disabled';
+export type CalendarSize = 'sm' | 'md' | 'lg';
+/**
+ * DateRangePicker Tokens following proper hierarchy pattern
+ *
+ * Structure:
+ * - Base properties (shared across all components)
+ * - Target sections: trigger, calendar, quickRange, mobileDrawer
+ * - Each target has consistent sub-structure with x/y padding and state management
+ *
+ * Pattern:
+ * - target.property.[size].[state] (for size/state-dependent properties)
+ * - target.text.property (for text styling)
+ * - target.padding.x/y (for consistent padding structure)
+ */
 export type CalendarTokenType = {
-    quickRange: {
-        trigger: {
-            borderLeft: CSSObject['borderLeft'];
-            borderTop: CSSObject['borderTop'];
-            borderBottom: CSSObject['borderBottom'];
-            borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
-            borderBottomLeftRadius: CSSObject['borderBottomLeftRadius'];
-            display: CSSObject['display'];
-            justifyContent: CSSObject['justifyContent'];
-            alignItems: CSSObject['alignItems'];
-            cursor: CSSObject['cursor'];
-            width: CSSObject['width'];
+    trigger: {
+        quickSelector: {
+            borderRadius: {
+                topLeft: CSSObject['borderTopLeftRadius'];
+                topRight: CSSObject['borderTopRightRadius'];
+                bottomLeft: CSSObject['borderBottomLeftRadius'];
+                bottomRight: CSSObject['borderBottomRightRadius'];
+            };
             backgroundColor: CSSObject['backgroundColor'];
-            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'];
-            };
-            disabled: {
-                borderLeft: CSSObject['borderLeft'];
-                borderTop: CSSObject['borderTop'];
-                borderBottom: CSSObject['borderBottom'];
-            };
-        };
-        content: {
-            padding: CSSObject['padding'];
-            width: CSSObject['width'];
-            maxHeight: CSSObject['maxHeight'];
-            zIndex: CSSObject['zIndex'];
-            backgroundColor: CSSObject['backgroundColor'];
-            borderRadius: CSSObject['borderRadius'];
-            boxShadow: CSSObject['boxShadow'];
-            overflowY: CSSObject['overflowY'];
-            overflowX: CSSObject['overflowX'];
-        };
-        item: {
-            width: CSSObject['width'];
-            textAlign: CSSObject['textAlign'];
-            padding: CSSObject['padding'];
-            borderRadius: CSSObject['borderRadius'];
-            transition: CSSObject['transition'];
-            cursor: CSSObject['cursor'];
-            border: CSSObject['border'];
-            backgroundColor: CSSObject['backgroundColor'];
-            display: CSSObject['display'];
-            active: CSSObject;
-            text: CSSObject;
-            '&:hover': CSSObject;
-            '&:focus': CSSObject;
-            '&[data-highlighted]': CSSObject;
-        };
-    };
-    mobileDrawer: {
-        picker: {
-            itemHeight: CSSObject['height'];
-            containerHeight: CSSObject['height'];
-            gradients: {
-                top: CSSObject['background'];
-                bottom: CSSObject['background'];
-            };
-            divider: {
-                width: CSSObject['width'];
-                height: CSSObject['height'];
-                strokeColor: CSSObject['color'];
-                strokeColorEnd: CSSObject['color'];
-            };
-            text: {
-                selected: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
-                    opacity: CSSObject['opacity'];
-                };
-                unselected: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
-                    opacity: CSSObject['opacity'];
+                [key in CalendarSize]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
                 };
             };
-            timeInput: {
-                width: CSSObject['width'];
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
-                color: CSSObject['color'];
-                zIndex: CSSObject['zIndex'];
-            };
-            scrollArea: {
-                zIndex: CSSObject['zIndex'];
-                opacity: CSSObject['opacity'];
+            border: {
+                [key in CalendarState]: {
+                    left: CSSObject['borderLeft'];
+                    top: CSSObject['borderTop'];
+                    bottom: CSSObject['borderBottom'];
+                    right: CSSObject['borderRight'];
+                };
             };
-        };
-        header: {
-            padding: CSSObject['padding'];
-            backgroundColor: CSSObject['backgroundColor'];
-            zIndex: CSSObject['zIndex'];
             text: {
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
                 color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                fontSize: {
+                    [key in CalendarSize]: CSSObject['fontSize'];
+                };
             };
+            iconSize: CSSObject['width'];
         };
-        presetItem: {
-            padding: CSSObject['padding'];
-            borderBottom: CSSObject['borderBottom'];
-            text: {
-                active: {
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
-                };
-                inactive: {
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
-                };
+        dateInput: {
+            borderRadius: {
+                withQuickSelector: CSSObject['borderRadius'];
+                withoutQuickSelector: CSSObject['borderRadius'];
             };
-            icon: {
-                size: CSSObject['width'];
-                color: CSSObject['color'];
+            padding: {
+                [key in CalendarSize]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
             };
-            chevron: {
-                size: CSSObject['width'];
+            text: {
                 color: CSSObject['color'];
-                transition: CSSObject['transition'];
-            };
-        };
-        actionButtons: {
-            container: {
-                gap: CSSObject['gap'];
-                padding: CSSObject['padding'];
-                marginTop: CSSObject['marginTop'];
-                borderTop: CSSObject['borderTop'];
-            };
-        };
-        tabs: {
-            marginTop: CSSObject['marginTop'];
-            content: {
-                marginTop: CSSObject['marginTop'];
+                fontSize: {
+                    [key in CalendarSize]: CSSObject['fontSize'];
+                };
+                fontWeight: CSSObject['fontWeight'];
             };
-        };
-        datePicker: {
-            container: {
-                padding: CSSObject['padding'];
-                gap: CSSObject['gap'];
+            border: {
+                [key in CalendarState]: CSSObject['border'];
             };
-        };
-    };
-    trigger: {
-        display: CSSObject['display'];
-        alignItems: CSSObject['alignItems'];
-        justifyContent: CSSObject['justifyContent'];
-        border: CSSObject['border'];
-        borderRadius: CSSObject['borderRadius'];
-        boxShadow: CSSObject['boxShadow'];
-        backgroundColor: CSSObject['backgroundColor'];
-        color: CSSObject['color'];
-        cursor: CSSObject['cursor'];
-        disabled: {
-            opacity: CSSObject['opacity'];
-            cursor: CSSObject['cursor'];
-            border: CSSObject['border'];
-        };
-        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'];
+            backgroundColor: CSSObject['backgroundColor'];
+            iconSize: CSSObject['width'];
+            gap: CSSObject['gap'];
         };
     };
     calendar: {
@@ -191,9 +83,11 @@ export type CalendarTokenType = {
         border: CSSObject['border'];
         borderRadius: CSSObject['borderRadius'];
         boxShadow: CSSObject['boxShadow'];
-        zIndex: CSSObject['zIndex'];
         inputs: {
-            padding: CSSObject['padding'];
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
+            };
             dateInput: {
                 gap: CSSObject['gap'];
                 label: {
@@ -207,119 +101,108 @@ export type CalendarTokenType = {
             };
         };
         calendarGrid: {
-            container: {
-                maxHeight: CSSObject['maxHeight'];
-                overflowY: CSSObject['overflowY'];
-                overflow: CSSObject['overflow'];
-                position: CSSObject['position'];
-            };
             month: {
                 header: {
                     fontSize: CSSObject['fontSize'];
                     fontWeight: CSSObject['fontWeight'];
                     color: CSSObject['color'];
-                    padding: CSSObject['padding'];
-                };
-                container: {
-                    position: CSSObject['position'];
-                    height: CSSObject['height'];
-                    marginBottom: CSSObject['marginBottom'];
+                    padding: {
+                        x: CSSObject['padding'];
+                        y: CSSObject['padding'];
+                    };
+                    gap: CSSObject['gap'];
                 };
             };
             week: {
-                row: {
-                    display: CSSObject['display'];
-                    gridTemplateColumns: CSSObject['gridTemplateColumns'];
-                    padding: CSSObject['padding'];
-                    gap: CSSObject['gap'];
+                gap: CSSObject['gap'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                boxShadow: CSSObject['boxShadow'];
+                color: CSSObject['color'];
+                padding: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
                 };
-                container: {
-                    display: CSSObject['display'];
-                    flexDirection: CSSObject['flexDirection'];
+                row: {
                     gap: CSSObject['gap'];
                 };
-                header: {
-                    display: CSSObject['display'];
-                    gridTemplateColumns: CSSObject['gridTemplateColumns'];
-                    textAlign: CSSObject['textAlign'];
-                    color: CSSObject['color'];
-                    padding: CSSObject['padding'];
-                    position: CSSObject['position'];
-                    top: CSSObject['top'];
-                    zIndex: CSSObject['zIndex'];
-                    backgroundColor: CSSObject['backgroundColor'];
-                    boxShadow: CSSObject['boxShadow'];
-                };
-                dayName: {
-                    padding: CSSObject['padding'];
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
-                };
             };
             day: {
                 cell: {
-                    cursor: CSSObject['cursor'];
-                    textAlign: CSSObject['textAlign'];
-                    padding: CSSObject['padding'];
-                    position: CSSObject['position'];
+                    padding: {
+                        x: CSSObject['padding'];
+                        y: CSSObject['padding'];
+                    };
                     fontWeight: CSSObject['fontWeight'];
-                    boxSizing: CSSObject['boxSizing'];
-                    outline: CSSObject['outline'];
                     fontSize: CSSObject['fontSize'];
                     lineHeight: CSSObject['lineHeight'];
-                    display: CSSObject['display'];
-                    alignItems: CSSObject['alignItems'];
-                    justifyContent: CSSObject['justifyContent'];
-                    width: CSSObject['width'];
-                    height: CSSObject['height'];
-                };
-                hover: {
-                    outline: CSSObject['outline'];
+                    outline: {
+                        [key in CalendarState]: CSSObject['outline'];
+                    };
                     borderRadius: CSSObject['borderRadius'];
                 };
-                empty: {
-                    padding: CSSObject['padding'];
-                };
                 states: {
-                    startDate: CSSObject;
-                    endDate: CSSObject;
-                    singleDate: CSSObject;
-                    rangeDay: CSSObject;
-                    todayDay: CSSObject;
-                    hoverState: CSSObject;
-                    disabledDay: CSSObject;
+                    startDate: {
+                        backgroundColor: CSSObject['backgroundColor'];
+                        borderRadius: {
+                            topLeft: CSSObject['borderTopLeftRadius'];
+                            bottomLeft: CSSObject['borderBottomLeftRadius'];
+                        };
+                    };
+                    endDate: {
+                        backgroundColor: CSSObject['backgroundColor'];
+                        borderRadius: {
+                            topRight: CSSObject['borderTopRightRadius'];
+                            bottomRight: CSSObject['borderBottomRightRadius'];
+                        };
+                    };
+                    singleDate: {
+                        backgroundColor: CSSObject['backgroundColor'];
+                        borderRadius: CSSObject['borderRadius'];
+                    };
+                    rangeDay: {
+                        backgroundColor: CSSObject['backgroundColor'];
+                    };
+                    todayDay: {
+                        fontWeight: CSSObject['fontWeight'];
+                    };
+                    hoverState: {
+                        boxShadow: CSSObject['boxShadow'];
+                        borderRadius: CSSObject['borderRadius'];
+                    };
+                    disabledDay: {
+                        opacity: CSSObject['opacity'];
+                        cursor: CSSObject['cursor'];
+                        pointerEvents: CSSObject['pointerEvents'];
+                    };
                 };
                 text: {
-                    dayNumber: CSSObject;
-                    selectedDay: CSSObject;
-                    rangeDay: CSSObject;
-                    todayDay: CSSObject;
+                    dayNumber: {
+                        color: CSSObject['color'];
+                    };
+                    selectedDay: {
+                        color: CSSObject['color'];
+                    };
+                    rangeDay: {
+                        color: CSSObject['color'];
+                    };
+                    todayDay: {
+                        color: CSSObject['color'];
+                    };
                 };
                 todayIndicator: {
-                    position: CSSObject['position'];
                     width: CSSObject['width'];
-                    height: CSSObject['height'];
                     backgroundColor: CSSObject['backgroundColor'];
-                    borderRadius: CSSObject['borderRadius'];
-                    bottom: CSSObject['bottom'];
-                    left: CSSObject['left'];
-                    transform: CSSObject['transform'];
                 };
             };
         };
         footer: {
-            padding: CSSObject['padding'];
-            borderTop: CSSObject['borderTop'];
-            timerange: {
-                gap: CSSObject['gap'];
-                color: CSSObject['color'];
-                fontWeight: CSSObject['fontWeight'];
-                fontSize: CSSObject['fontSize'];
-            };
-            button: {
-                gap: CSSObject['gap'];
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
             };
+            borderTop: CSSObject['borderTop'];
+            gap: CSSObject['gap'];
         };
     };
 };

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

@@ -595,7 +595,7 @@ export declare class AppleCalendarHapticManager {
     reset(): void;
     destroy(): void;
 }
-export declare const APPLE_CALENDAR_CONSTANTS: {
+export declare const MOBILE_CALENDAR_CONSTANTS: {
     readonly SNAP_DURATION: 300;
     readonly MOMENTUM_THRESHOLD: 0.03;
     readonly DECELERATION_RATE: 0.95;
@@ -747,6 +747,14 @@ export declare const matchesYesterdayPreset: (range: DateRange) => boolean;
  * Checks if a date range matches "Tomorrow" preset
  */
 export declare const matchesTomorrowPreset: (range: DateRange) => boolean;
+/**
+ * Checks if a date range matches "This Month" preset
+ */
+export declare const matchesThisMonthPreset: (range: DateRange) => boolean;
+/**
+ * Checks if a date range matches "Last Month" preset
+ */
+export declare const matchesLastMonthPreset: (range: DateRange) => boolean;
 /**
  * Robust preset detection that works with both UTC and local timezone dates
  */

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

@@ -16,6 +16,7 @@ export type NavbarItem = {
     rightSlot?: ReactNode;
     onClick?: () => void;
     href?: string;
+    isSelected?: boolean;
 };
 export type SectionProps = {
     section: DirectoryData;

package/dist/components/Drawer/drawer.tokens.d.ts

@@ -1,60 +1,59 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Drawer Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure:
+ * - target: overlay | content | handle | header | body | footer | mobileOffset (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | boxShadow | zIndex | border | padding | fontSize | fontWeight | color | gap | etc.
+ * - variant: top | bottom | left | right (drawer direction)
+ * - state: default (interaction state)
+ *
+ * Pattern examples:
+ * - overlay.backgroundColor.[state]
+ * - overlay.zIndex (no variant dependency)
+ * - content.backgroundColor.[variant].[state]
+ * - content.borderRadius.[variant]
+ * - handle.backgroundColor.[variant].[state]
+ * - header.padding.[variant]
+ * - header.text.title.fontSize (no variant dependency)
+ * - body.padding.[variant]
+ * - footer.gap.[variant]
+ * - mobileOffset.top.[variant]
+ */
 export type DrawerTokensType = {
-    overlay: {
-        backgroundColor: CSSObject['backgroundColor'];
-        zIndex: CSSObject['zIndex'];
+    borderRadius: {
+        topLeft: CSSObject['borderTopLeftRadius'];
+        topRight: CSSObject['borderTopRightRadius'];
+        bottomLeft: CSSObject['borderBottomLeftRadius'];
+        bottomRight: CSSObject['borderBottomRightRadius'];
     };
-    content: {
+    overlay: {
         backgroundColor: CSSObject['backgroundColor'];
-        borderRadius: CSSObject['borderRadius'];
-        boxShadow: CSSObject['boxShadow'];
-        zIndex: CSSObject['zIndex'];
-        border: CSSObject['border'];
     };
-    mobileOffset: {
+    offset: {
         top: CSSObject['top'];
         bottom: CSSObject['bottom'];
         left: CSSObject['left'];
         right: CSSObject['right'];
     };
-    handle: {
-        backgroundColor: CSSObject['backgroundColor'];
-        borderRadius: CSSObject['borderRadius'];
-        width: CSSObject['width'];
-        height: CSSObject['height'];
-    };
-    header: {
-        padding: CSSObject['padding'];
-        borderBottom: CSSObject['borderBottom'];
+    content: {
         backgroundColor: CSSObject['backgroundColor'];
-        title: {
-            color: CSSObject['color'];
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            lineHeight: CSSObject['lineHeight'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
         };
-        description: {
-            color: CSSObject['color'];
-            fontSize: CSSObject['fontSize'];
-            lineHeight: CSSObject['lineHeight'];
+        handle: {
+            backgroundColor: CSSObject['backgroundColor'];
+            borderRadius: CSSObject['borderRadius'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
         };
     };
-    body: {
-        padding: CSSObject['padding'];
-        backgroundColor: CSSObject['backgroundColor'];
-        overflowY: CSSObject['overflowY'];
-        borderRadius: CSSObject['borderRadius'];
-    };
-    footer: {
-        padding: CSSObject['padding'];
-        borderTop: CSSObject['borderTop'];
-        backgroundColor: CSSObject['backgroundColor'];
-        gap: CSSObject['gap'];
-        alignItems: CSSObject['alignItems'];
-        justifyContent: CSSObject['justifyContent'];
-    };
 };
-export declare const drawerTokens: DrawerTokensType;
-export declare const getDrawerComponentTokens: (foundationToken: FoundationTokenType) => DrawerTokensType;
-export default drawerTokens;
+export type ResponsiveDrawerTokens = {
+    [key in keyof BreakpointType]: DrawerTokensType;
+};
+export declare const getDrawerComponentTokens: (foundationToken: FoundationTokenType) => ResponsiveDrawerTokens;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonV2Props } from '../Button/types';
+import { ButtonProps } from '../Button/types';
 export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
 export type DrawerProps = {
     /**
@@ -192,11 +192,11 @@ export type StatusDrawerProps = {
     /**
      * Primary action button props (e.g., Delete, OK, Confirm)
      */
-    primaryButtonProps: ButtonV2Props;
+    primaryButtonProps: ButtonProps;
     /**
      * Secondary action button props (e.g., Cancel) - optional
      */
-    secondaryButtonProps?: ButtonV2Props;
+    secondaryButtonProps?: ButtonProps;
     /**
      * 56x56px slot for any React element (icon, image, etc.)
      */

package/dist/components/Inputs/DropdownInput/DropdownInput.d.ts

@@ -1,3 +1,3 @@
 import { DropdownInputProps } from './types';
-declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, dropdownPosition, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxDropdownHeight, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, dropdownPosition, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxMenuHeight, minMenuWidth, maxMenuWidth, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownInput;