@juspay/blend-design-system 0.0.17-beta → 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/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/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'];