@juspay/blend-design-system 0.0.5 → 0.0.6

package/dist/assets/main.css

@@ -1 +1 @@
-.gradient-blur{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-blur:before{content:"";z-index:30;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)}.gradient-blur>div:nth-of-type(1){z-index:32;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);mask:linear-gradient(to top,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)}.gradient-blur>div:nth-of-type(2){z-index:33;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)}.gradient-blur>div:nth-of-type(3){z-index:34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mask:linear-gradient(to top,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)}.gradient-blur>div:nth-of-type(4){z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);mask:linear-gradient(to top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)}.gradient-blur>div:nth-of-type(5){z-index:36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mask:linear-gradient(to top,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}.gradient-blur>div:nth-of-type(6){z-index:37;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);mask:linear-gradient(to top,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)}.gradient-blur:after{content:"";z-index:38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mask:linear-gradient(to top,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.gradient-blur{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-blur:before{content:"";z-index:30;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)}.gradient-blur>div:nth-of-type(1){z-index:32;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);mask:linear-gradient(to top,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)}.gradient-blur>div:nth-of-type(2){z-index:33;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)}.gradient-blur>div:nth-of-type(3){z-index:34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mask:linear-gradient(to top,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)}.gradient-blur>div:nth-of-type(4){z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);mask:linear-gradient(to top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)}.gradient-blur>div:nth-of-type(5){z-index:36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mask:linear-gradient(to top,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}.gradient-blur>div:nth-of-type(6){z-index:37;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);mask:linear-gradient(to top,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)}.gradient-blur:after{content:"";z-index:38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mask:linear-gradient(to top,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)}

package/dist/components/Accordion/AccordionItem.d.ts

@@ -2,5 +2,8 @@ import { AccordionItemProps, AccordionType, AccordionChevronPosition } from './t
 declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & {
     accordionType?: AccordionType;
     chevronPosition?: AccordionChevronPosition;
+    isFirst?: boolean;
+    isLast?: boolean;
+    isIntermediate?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default AccordionItem;

package/dist/components/Accordion/accordion.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { AccordionType } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 export type AccordionState = 'default' | 'hover' | 'active' | 'disabled' | 'open' | 'closed';
 export type AccordionTokenType = {
     gap: {
@@ -46,4 +47,7 @@ export type AccordionTokenType = {
         };
     };
 };
-export declare const getAccordionToken: (foundationToken: FoundationTokenType) => AccordionTokenType;
+export type ResponsiveAccordionTokens = {
+    [key in keyof BreakpointType]: AccordionTokenType;
+};
+export declare const getAccordionToken: (foundationToken: FoundationTokenType) => ResponsiveAccordionTokens;

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { DateRange, DateRangePreset } from './types';
+type MobileDrawerPresetsProps = {
+    drawerOpen: boolean;
+    setDrawerOpen: (open: boolean) => void;
+    renderTrigger: () => React.ReactNode;
+    showPresets: boolean;
+    availablePresets: DateRangePreset[];
+    activePreset: DateRangePreset;
+    selectedRange: DateRange;
+    startTime: string;
+    endTime: string;
+    dateFormat: string;
+    handlePresetSelect: (preset: DateRangePreset) => void;
+    handleStartTimeChange: (time: string) => void;
+    handleEndTimeChange: (time: string) => void;
+    setSelectedRange: (range: DateRange) => void;
+    setStartDate: (date: string) => void;
+    setEndDate: (date: string) => void;
+    handleCancel: () => void;
+    handleApply: () => void;
+    showCustomDropdownOnly?: boolean;
+};
+declare const MobileDrawerPresets: React.FC<MobileDrawerPresetsProps>;
+export default MobileDrawerPresets;

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

@@ -47,6 +47,101 @@ export type CalendarTokenType = {
             '&[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'];
+                };
+            };
+            timeInput: {
+                width: CSSObject['width'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                zIndex: CSSObject['zIndex'];
+            };
+            scrollArea: {
+                zIndex: CSSObject['zIndex'];
+                opacity: CSSObject['opacity'];
+            };
+        };
+        header: {
+            padding: CSSObject['padding'];
+            backgroundColor: CSSObject['backgroundColor'];
+            zIndex: CSSObject['zIndex'];
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+        presetItem: {
+            padding: CSSObject['padding'];
+            borderBottom: CSSObject['borderBottom'];
+            text: {
+                active: {
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                };
+                inactive: {
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                };
+            };
+            icon: {
+                size: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+            chevron: {
+                size: CSSObject['width'];
+                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'];
+            };
+        };
+        datePicker: {
+            marginTop: CSSObject['marginTop'];
+            container: {
+                padding: CSSObject['padding'];
+                gap: CSSObject['gap'];
+            };
+        };
+    };
     trigger: {
         height: CSSObject['height'];
         display: CSSObject['display'];

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

@@ -1,2 +1,3 @@
 export { default as DateRangePicker } from './DateRangePicker';
+export { default as MobileDrawerPresets } from './MobileDrawerPresets';
 export * from './types';

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

@@ -35,4 +35,6 @@ export type DateRangePickerProps = {
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
     triggerElement?: ReactNode;
+    useDrawerOnMobile?: boolean;
+    skipQuickFiltersOnMobile?: boolean;
 };

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

@@ -468,3 +468,69 @@ export declare const calculateDayCellProps: (date: Date, selectedRange: DateRang
     textColor: string | unknown;
     showTodayIndicator: boolean;
 };
+/**
+ * Constants for mobile date picker
+ */
+export declare const MOBILE_PICKER_CONSTANTS: {
+    readonly ITEM_HEIGHT: 44;
+    readonly VISIBLE_ITEMS: 3;
+    readonly SCROLL_DEBOUNCE: 50;
+};
+/**
+ * Validates time input - only allows numbers and colon
+ * @param input The input string to validate
+ * @returns True if input is valid
+ */
+export declare const isValidTimeInput: (input: string) => boolean;
+/**
+ * Formats time input as HH:MM
+ * @param input The input string to format
+ * @returns Formatted time string
+ */
+export declare const formatTimeInput: (input: string) => string;
+/**
+ * Generates picker data for date/time selection
+ * @param tabType Whether this is for start or end date
+ * @param selectedRange Current selected date range
+ * @param startTime Current start time
+ * @param endTime Current end time
+ * @returns Object with picker data for all columns
+ */
+export declare const generatePickerData: (tabType: "start" | "end", selectedRange: DateRange, startTime: string, endTime: string) => {
+    years: {
+        items: number[];
+        selectedIndex: number;
+    };
+    months: {
+        items: string[];
+        selectedIndex: number;
+    };
+    dates: {
+        items: number[];
+        selectedIndex: number;
+    };
+    times: {
+        items: string[];
+        selectedIndex: number;
+    };
+};
+/**
+ * Creates selection handler for picker columns
+ * @param tabType Whether this is for start or end date
+ * @param type The type of selection (year, month, date, time)
+ * @param selectedRange Current selected range
+ * @param dateFormat Date format string
+ * @param handleStartTimeChange Start time change handler
+ * @param handleEndTimeChange End time change handler
+ * @param setSelectedRange Range setter function
+ * @param setStartDate Start date setter function
+ * @param setEndDate End date setter function
+ * @returns Selection handler function
+ */
+export declare const createSelectionHandler: (tabType: "start" | "end", type: "year" | "month" | "date" | "time", selectedRange: DateRange, dateFormat: string, handleStartTimeChange: (time: string) => void, handleEndTimeChange: (time: string) => void, setSelectedRange: (range: DateRange) => void, setStartDate: (date: string) => void, setEndDate: (date: string) => void) => (index: number) => void;
+/**
+ * Gets preset display label with custom mappings
+ * @param preset The preset to get label for
+ * @returns Display label for the preset
+ */
+export declare const getPresetDisplayLabel: (preset: DateRangePreset) => string;

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

@@ -11,6 +11,7 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerConten
     showHandle?: boolean;
     handle?: React.ReactNode;
     hasSnapPoints?: boolean;
+    contentDriven?: boolean;
     mobileOffset?: {
         top?: string;
         bottom?: string;
@@ -25,6 +26,7 @@ export declare const DrawerBody: React.ForwardRefExoticComponent<{
     children: React.ReactNode;
     className?: string;
     overflowY?: "auto" | "hidden" | "scroll" | "visible";
+    noPadding?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -43,8 +43,8 @@ export type DrawerTokensType = {
     body: {
         padding: CSSObject['padding'];
         backgroundColor: CSSObject['backgroundColor'];
-        maxHeight: CSSObject['maxHeight'];
         overflowY: CSSObject['overflowY'];
+        borderRadius: CSSObject['borderRadius'];
     };
     footer: {
         padding: CSSObject['padding'];

package/dist/components/Tabs/tabs.token.d.ts

@@ -1,10 +1,13 @@
 import { CSSObject } from 'styled-components';
 import { ThemeType } from '../../tokens';
 import { TabsVariant, TabsSize } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TabsState = 'default' | 'hover' | 'active' | 'disabled';
 export type TabsTokensType = {
     gap: {
-        [key in TabsVariant]: CSSObject['gap'];
+        [key in TabsSize]: {
+            [key in TabsVariant]: CSSObject['gap'];
+        };
     };
     list: {
         padding: {
@@ -25,7 +28,9 @@ export type TabsTokensType = {
             [key in TabsSize]: CSSObject['height'];
         };
         padding: {
-            [key in TabsSize]: CSSObject['padding'];
+            [key in TabsVariant]: {
+                [key in TabsSize]: CSSObject['padding'];
+            };
         };
         fontSize: {
             [key in TabsSize]: CSSObject['fontSize'];
@@ -49,12 +54,16 @@ export type TabsTokensType = {
         borderRadius: {
             [key in TabsVariant]: CSSObject['borderRadius'];
         };
+        border: {
+            [key in TabsVariant]: CSSObject['border'];
+        };
     };
     underline: {
         height: CSSObject['height'];
         color: CSSObject['color'];
     };
 };
-export declare const getTabsTokens: (foundationToken: ThemeType) => TabsTokensType;
-declare const tabsTokens: TabsTokensType;
-export default tabsTokens;
+export type ResponsiveTabsTokens = {
+    [key in keyof BreakpointType]: TabsTokensType;
+};
+export declare const getTabsTokens: (foundationToken: ThemeType) => ResponsiveTabsTokens;

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

@@ -3,7 +3,8 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare enum TabsVariant {
     BOXED = "boxed",
     FLOATING = "floating",
-    UNDERLINE = "underline"
+    UNDERLINE = "underline",
+    PILLS = "pills"
 }
 export declare enum TabsSize {
     MD = "md",

package/dist/context/ThemeContext.d.ts

@@ -13,7 +13,7 @@ import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitIn
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
 import { ResponsiveDropdownInputTokens } from '../components/Inputs/DropdownInput/dropdownInput.tokens';
 import { ResponsiveCheckboxTokens } from '../components/Checkbox/checkbox.token';
-import { TabsTokensType } from '../components/Tabs/tabs.token';
+import { ResponsiveTabsTokens } from '../components/Tabs/tabs.token';
 import { ResponsiveButtonTokens } from '../components/Button/button.tokens';
 import { ModalTokensType } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
@@ -22,7 +22,7 @@ import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
 import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
-import { AccordionTokenType } from '../components/Accordion/accordion.tokens';
+import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
 import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
 import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
@@ -43,7 +43,7 @@ export type ComponentTokenType = {
     MULTI_VALUE_INPUT?: MultiValueInputTokensType;
     DROPDOWN_INPUT?: ResponsiveDropdownInputTokens;
     CHECKBOX?: ResponsiveCheckboxTokens;
-    TABS?: TabsTokensType;
+    TABS?: ResponsiveTabsTokens;
     BUTTON?: ResponsiveButtonTokens;
     MODAL?: ModalTokensType;
     BREADCRUMB?: ResponsiveBreadcrumbTokens;
@@ -53,7 +53,7 @@ export type ComponentTokenType = {
     SINGLE_SELECT?: ResponsiveSingleSelectTokens;
     TABLE?: TableTokenType;
     CALENDAR?: CalendarTokenType;
-    ACCORDION?: AccordionTokenType;
+    ACCORDION?: ResponsiveAccordionTokens;
     STAT_CARD?: StatCardTokenType;
     PROGRESS_BAR?: ProgressBarTokenType;
     DRAWER?: DrawerTokensType;

package/dist/context/useComponentToken.d.ts

@@ -4,7 +4,7 @@ import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { ResponsiveRadioTokens } from '../components/Radio/radio.token';
 import { ResponsiveSwitchTokens } from '../components/Switch/switch.token';
 import { ResponsiveCheckboxTokens } from '../components/Checkbox/checkbox.token';
-import { TabsTokensType } from '../components/Tabs/tabs.token';
+import { ResponsiveTabsTokens } from '../components/Tabs/tabs.token';
 import { ComponentTokenType } from './ThemeContext';
 import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
 import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
@@ -22,9 +22,9 @@ import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
 import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
-import { AccordionTokenType } from '../components/Accordion/accordion.tokens';
+import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
 import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
 import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | TabsTokensType | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | AccordionTokenType | StatCardTokenType | ProgressBarTokenType | DrawerTokensType;
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | ResponsiveAccordionTokens | StatCardTokenType | ProgressBarTokenType | DrawerTokensType;