@juspay/blend-design-system 0.0.16 → 0.0.17

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

@@ -1,5 +1,11 @@
 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;

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",

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;
@@ -90,6 +95,7 @@ export type DateRangePickerProps = {
     triggerElement?: ReactNode;
     useDrawerOnMobile?: boolean;
     skipQuickFiltersOnMobile?: boolean;
+    size?: DateRangePickerSize;
     formatConfig?: DateFormatConfig;
     triggerConfig?: TriggerConfig;
 };

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

@@ -206,9 +206,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

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

@@ -1,3 +1,3 @@
 import { TextInputProps } from './types';
-declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, cursor, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;

package/dist/components/Inputs/TextInput/types.d.ts

@@ -24,4 +24,5 @@ export type TextInputProps = {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    cursor?: 'text' | 'pointer' | 'default' | 'not-allowed';
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

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

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

@@ -76,9 +76,9 @@ export type MultiSelectProps = {
     maxSelections?: number;
     customTrigger?: React.ReactNode;
     useDrawerOnMobile?: boolean;
-    minWidth?: number;
-    maxWidth?: number;
-    maxHeight?: number;
+    minMenuWidth?: number;
+    maxMenuWidth?: number;
+    maxMenuHeight?: number;
     alignment?: MultiSelectMenuAlignment;
     side?: MultiSelectMenuSide;
     sideOffset?: number;
@@ -103,15 +103,16 @@ export type MultiSelectProps = {
     };
     showItemDividers?: boolean;
     showHeaderBorder?: boolean;
+    fullWidth?: boolean;
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
     selected: string[];
     onSelect: (value: string) => void;
     trigger: React.ReactNode;
-    minWidth?: number;
-    maxWidth?: number;
-    maxHeight?: number;
+    minMenuWidth?: number;
+    maxMenuWidth?: number;
+    maxMenuHeight?: number;
     disabled?: boolean;
     enableSearch?: boolean;
     searchPlaceholder?: string;

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

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minWidth, maxWidth, maxHeight, onBlur, onFocus, inline, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectMenu.d.ts

@@ -5,9 +5,9 @@ type SingleSelectMenuProps = {
     selected: string;
     onSelect: (value: string) => void;
     trigger: React.ReactNode;
-    minWidth?: number;
-    maxWidth?: number;
-    maxHeight?: number;
+    minMenuWidth?: number;
+    maxMenuWidth?: number;
+    maxMenuHeight?: number;
     enableSearch?: boolean;
     searchPlaceholder?: string;
     disabled?: boolean;
@@ -18,5 +18,5 @@ type SingleSelectMenuProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minWidth, maxWidth, maxHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -86,12 +86,13 @@ export type SingleSelectProps = {
     side?: SelectMenuSide;
     sideOffset?: number;
     alignOffset?: number;
-    minWidth?: number;
-    maxWidth?: number;
-    maxHeight?: number;
+    minMenuWidth?: number;
+    maxMenuWidth?: number;
+    maxMenuHeight?: number;
     inline?: boolean;
     onBlur?: () => void;
     onFocus?: () => void;
     error?: boolean;
     errorMessage?: string;
+    fullWidth?: boolean;
 };

package/dist/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, height, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -45,4 +45,5 @@ export type StatCardProps = {
     xAxis?: StatCardAxisConfig;
     yAxis?: StatCardAxisConfig;
     valueFormatter?: AxisType;
+    height?: string;
 };

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'];

package/dist/main.d.ts

@@ -30,6 +30,7 @@ export * from './components/Slider';
 export * from './components/ProgressBar';
 export * from './components/Drawer';
 export * from './components/Skeleton';
+export * from './components/KeyValuePair';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';