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

package/dist/components/Card/card.tokens.d.ts

@@ -1,83 +1,107 @@
 import { CSSObject } from 'styled-components';
-import { CardAlignment } from './types';
+import { CardVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type CardState = 'default' | 'hover';
+/**
+ * Card Tokens following proper hierarchy pattern
+ *
+ * Structure:
+ * container (outermost) -> header/body (sections) -> text/content/actions (elements) -> properties
+ *
+ * Pattern:
+ * - container.property.[variant].[state] (for variant-dependent properties)
+ * - container.header.text.title.property (for shared text styling)
+ * - container.body.actions.inline.gap.[variant] (for variant-dependent spacing)
+ *
+ * Hierarchy:
+ * - Container: Outermost wrapper with base styling and variant-dependent properties
+ * - Header: Header section with text styling and variant-specific box styling
+ * - Body: Body section with text, content, actions, and variant-specific spacing
+ */
 export type CardTokenType = {
     maxWidth: CSSObject['maxWidth'];
     borderRadius: CSSObject['borderRadius'];
-    boxShadow: CSSObject['boxShadow'];
-    padding: CSSObject['padding'];
     border: CSSObject['border'];
+    boxShadow: CSSObject['boxShadow'];
     backgroundColor: CSSObject['backgroundColor'];
+    padding: {
+        [key in CardVariant]: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+    };
     header: {
-        backgroundColor: CSSObject['backgroundColor'];
-        padding: CSSObject['padding'];
-        borderBottom: CSSObject['borderBottom'];
-        borderRadius: CSSObject['borderRadius'];
-        title: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
+        [CardVariant.DEFAULT]: {
+            backgroundColor: CSSObject['backgroundColor'];
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
+            };
+            borderBottom: CSSObject['borderBottom'];
         };
-        tag: {
+        [CardVariant.ALIGNED]: undefined;
+        [CardVariant.CUSTOM]: undefined;
+        text: {
+            title: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                gap: CSSObject['gap'];
+            };
+            subTitle: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
             gap: CSSObject['gap'];
         };
-        subHeader: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-        };
     };
     body: {
-        padding: CSSObject['padding'];
-        title: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-        };
-        content: {
-            fontSize: CSSObject['fontSize'];
-            color: CSSObject['color'];
-        };
-    };
-    spacing: {
-        header: {
-            subHeader: {
-                marginTop: CSSObject['marginTop'];
+        padding: {
+            [CardVariant.DEFAULT]: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
             };
+            [CardVariant.ALIGNED]: undefined;
+            [CardVariant.CUSTOM]: undefined;
         };
-        body: {
-            slot1: {
-                marginTop: CSSObject['marginTop'];
-            };
+        gap: {
+            [key in CardVariant]: CSSObject['gap'];
+        };
+        text: {
             title: {
-                marginTop: CSSObject['marginTop'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
             };
             content: {
-                marginTop: CSSObject['marginTop'];
-            };
-            slot2: {
-                marginTop: CSSObject['marginTop'];
-            };
-        };
-        action: {
-            inline: {
-                marginTop: CSSObject['marginTop'];
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
             };
-            regular: {
-                marginTop: CSSObject['marginTop'];
-            };
-        };
-        headerSlot: {
             gap: CSSObject['gap'];
         };
-    };
-    alignment: {
-        [key in CardAlignment]: {
-            padding: CSSObject['padding'];
+        actions: {
             gap: CSSObject['gap'];
-            minHeight?: CSSObject['minHeight'];
+            centerAlignGap: CSSObject['gap'];
+        };
+        alignment: {
+            [CardVariant.ALIGNED]: {
+                cardSlot: {
+                    vertical: {
+                        marginBottom: CSSObject['marginBottom'];
+                        minHeight: CSSObject['minHeight'];
+                    };
+                    horizontal: {
+                        marginRight: CSSObject['marginRight'];
+                        width: CSSObject['width'];
+                        height: CSSObject['height'];
+                    };
+                };
+            };
+            [CardVariant.DEFAULT]: undefined;
+            [CardVariant.CUSTOM]: undefined;
         };
     };
 };

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonV2Props } from '../Button/types';
+import { ButtonProps } from '../Button/types';
 export declare enum CardVariant {
     DEFAULT = "default",
     ALIGNED = "aligned",
@@ -20,7 +20,7 @@ export type DefaultCardProps = {
     bodyTitle?: string;
     content?: ReactNode;
     bodySlot2?: ReactNode;
-    actionButton?: ButtonV2Props;
+    actionButton?: ButtonProps;
 };
 export type AlignedCardProps = {
     variant: CardVariant.ALIGNED;
@@ -34,7 +34,7 @@ export type AlignedCardProps = {
     bodySlot1?: ReactNode;
     bodyTitle?: string;
     content?: ReactNode;
-    actionButton?: ButtonV2Props;
+    actionButton?: ButtonProps;
 };
 export type CustomCardProps = {
     variant: CardVariant.CUSTOM;

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { CardVariant, CardAlignment } from './types';
+import { CardVariant } from './types';
 import { CardTokenType } from './card.tokens';
 import { ButtonSubType } from '../Button/types';
 /**
@@ -23,64 +23,61 @@ export declare const isCustomCard: (variant?: CardVariant) => boolean;
  */
 export declare const getHeaderBoxStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
- * Gets header title styles
+ * Gets header title styles (shared across all variants)
  */
 export declare const getHeaderTitleStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
- * Gets sub header styles
+ * Gets sub header styles (shared across all variants)
  */
 export declare const getSubHeaderStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
- * Gets body title styles
+ * Gets body title styles (shared across all variants)
  */
 export declare const getBodyTitleStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
- * Gets body content styles
+ * Gets body content styles (shared across all variants)
  */
 export declare const getBodyContentStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
- * Gets body container styles
+ * Gets body container styles for default card
  */
 export declare const getBodyStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
- * Gets spacing between header slots
+ * Gets spacing between header elements for a specific variant
  */
-export declare const getHeaderSlotSpacing: (cardToken: CardTokenType) => string;
+export declare const getHeaderSpacing: (cardToken: CardTokenType) => string;
 /**
- * Gets margin bottom for header based on what follows
+ * Gets gap for sub header (replaced marginTop with gap)
  */
 export declare const getHeaderMarginBottom: (hasSubHeader: boolean, cardToken: CardTokenType) => string;
 /**
- * Gets margin bottom for sub header
+ * Gets gap for elements after sub header (using body elements spacing)
  */
-export declare const getSubHeaderMarginBottom: (cardToken: CardTokenType) => string;
+export declare const getSubHeaderMarginBottom: (cardToken: CardTokenType, variant: CardVariant) => string;
 /**
- * Gets margin bottom for body slot 1
+ * Gets gap for body elements (using body elements spacing)
  */
-export declare const getBodySlot1MarginBottom: (hasBodyTitle: boolean, cardToken: CardTokenType) => string;
+export declare const getBodySlot1MarginBottom: (hasBodyTitle: boolean, cardToken: CardTokenType, variant: CardVariant) => string;
 /**
- * Gets margin bottom for body title
+ * Gets gap between body title and content (using title to content spacing)
  */
 export declare const getBodyTitleMarginBottom: (hasContent: boolean, cardToken: CardTokenType) => string;
 /**
- * Gets margin bottom for content
+ * Gets gap after content (using body elements spacing)
  */
-export declare const getContentMarginBottom: (hasBodySlot2: boolean, cardToken: CardTokenType) => string;
+export declare const getContentMarginBottom: (hasBodySlot2: boolean, cardToken: CardTokenType, variant: CardVariant) => string;
 /**
- * Gets margin bottom for body slot 2
+ * Gets gap before action button - Simple logic: 14px default, 24px for center-aligned
  */
-export declare const getBodySlot2MarginBottom: (hasActionButton: boolean, isInlineButton: boolean, cardToken: CardTokenType) => string;
-/**
- * Gets alignment styles for aligned cards
- */
-export declare const getAlignmentStyles: (alignment: CardAlignment, centerAlign: boolean, cardToken: CardTokenType) => React.CSSProperties;
+export declare const getBodySlot2MarginBottom: (hasActionButton: boolean, _isInlineButton: boolean, cardToken: CardTokenType, centerAlign?: boolean) => string;
 /**
  * Gets custom card styles (simple wrapper with padding)
  */
 export declare const getCustomCardStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
  * Determines if action button is inline type
+ * Center-aligned cards use regular buttons, non-center-aligned use inline buttons
  */
-export declare const isInlineActionButton: (actionButton?: {
+export declare const isInlineActionButton: (_actionButton?: {
     subType?: ButtonSubType;
-}) => boolean;
+}, centerAlign?: boolean) => boolean;

package/dist/components/Charts/chart.tokens.d.ts

@@ -1,101 +1,43 @@
 import { CSSObject } from 'styled-components';
-import { ChartLegendPosition } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-export type ChartState = 'default' | 'hover' | 'active' | 'fullscreen' | 'collapsed';
-export type ChartSize = 'sm' | 'md' | 'lg';
-export type ChartVariant = 'container' | 'no-container';
+export type ChartState = 'default' | 'hover' | 'active';
 export type ChartHeight = 'default' | 'fullscreen' | 'small';
 export type ChartTokensType = {
-    container: {
-        backgroundColor: {
-            [key in ChartState]: CSSObject['backgroundColor'];
-        };
-        border: {
-            [key in ChartVariant]: {
-                [key in ChartState]: CSSObject['border'];
-            };
-        };
-        borderRadius: {
-            [key in ChartState]: CSSObject['borderRadius'];
-        };
-        padding: {
-            [key in ChartSize]: CSSObject['padding'];
-        };
-        gap: {
-            [key in ChartSize]: CSSObject['gap'];
-        };
-        shadow: {
-            [key in ChartVariant]: CSSObject['boxShadow'];
-        };
-    };
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
     header: {
         padding: {
-            [key in ChartSize]: CSSObject['padding'];
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
         };
-        gap: CSSObject['gap'];
         backgroundColor: CSSObject['backgroundColor'];
         borderBottom: CSSObject['borderBottom'];
-        minHeight: CSSObject['minHeight'];
-    };
-    content: {
-        padding: CSSObject['padding'];
-        gap: {
-            [key in ChartSize]: CSSObject['gap'];
-        };
-        height: {
-            [key in ChartHeight]: CSSObject['height'];
+        borderRadius: CSSObject['borderRadius'];
+        slots: {
+            gap: CSSObject['gap'];
         };
     };
-    legend: {
-        gap: {
-            [key in ChartSize]: CSSObject['gap'];
-        };
-        padding: {
-            [key in ChartSize]: CSSObject['padding'];
-        };
-        width: {
-            [key in ChartLegendPosition]: CSSObject['width'];
-        };
-        item: {
-            padding: CSSObject['padding'];
+    content: {
+        legend: {
             gap: CSSObject['gap'];
-            borderRadius: CSSObject['borderRadius'];
-            backgroundColor: {
-                [key in ChartState]: CSSObject['backgroundColor'];
-            };
-            color: {
-                [key in ChartState]: CSSObject['color'];
+            item: {
+                gap: CSSObject['gap'];
+                color: {
+                    [key in ChartState]: CSSObject['color'];
+                };
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
             };
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
         };
-        button: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-            backgroundColor: CSSObject['backgroundColor'];
-            border: CSSObject['border'];
-            borderRadius: CSSObject['borderRadius'];
-            padding: CSSObject['padding'];
-        };
-    };
-    fullscreen: {
-        container: {
-            position: CSSObject['position'];
-            top: CSSObject['top'];
-            left: CSSObject['left'];
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            zIndex: CSSObject['zIndex'];
-            backgroundColor: CSSObject['backgroundColor'];
-            transform: CSSObject['transform'];
-            transformOrigin: CSSObject['transformOrigin'];
-        };
-        content: {
-            height: CSSObject['height'];
-            padding: CSSObject['padding'];
+        padding: {
+            top: CSSObject['padding'];
+            right: CSSObject['padding'];
+            bottom: CSSObject['padding'];
+            left: CSSObject['padding'];
         };
+        gap: CSSObject['gap'];
+        backgroundColor: CSSObject['backgroundColor'];
     };
 };
 export type ResponsiveChartTokens = {

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { TooltipProps } from 'recharts';
 import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
-import { ButtonV2Props } from '../Button';
+import { ButtonProps } from '../Button';
 export type DataPoint = {
     primary: {
         label: string;
@@ -56,7 +56,7 @@ export type NoDataProps = {
     title?: string;
     subtitle?: string;
     slot?: ReactNode;
-    button?: ButtonV2Props;
+    button?: ButtonProps;
 };
 export type AxisConfig = {
     label?: string;
@@ -135,6 +135,10 @@ export type ChartsProps = {
     yAxis?: YAxisConfig;
     noData?: NoDataProps;
     height?: number;
+    showHeader?: boolean;
+    showCollapseIcon?: boolean;
+    isExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
 };
 export type FlattenedDataPoint = {
     name: string;
@@ -151,6 +155,7 @@ export type ChartHeaderProps = {
     isSmallScreen?: boolean;
     isExpanded: boolean;
     setIsExpanded: (isExpanded: boolean) => void;
+    showCollapseIcon?: boolean;
 };
 export type ChartLegendsProps = {
     chartContainerRef: React.RefObject<HTMLDivElement>;

package/dist/components/Checkbox/checkbox.token.d.ts

@@ -1,65 +1,49 @@
 import { CSSObject } from 'styled-components';
 import { ThemeType } from '../../tokens';
-import { CheckboxSize, CheckboxInteractionState } from './types';
+import { CheckboxSize, CheckboxInteractionState, CheckboxCheckedState } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type CheckboxTokensType = {
     gap: CSSObject['gap'];
-    slotGap: CSSObject['gap'];
-    checkboxMarginRight: CSSObject['marginRight'];
+    slot: {
+        marginLeft: CSSObject['marginLeft'];
+    };
     indicator: {
-        size: {
-            [key in CheckboxSize]: {
-                width: CSSObject['width'];
-                height: CSSObject['height'];
-            };
+        width: {
+            [key in CheckboxSize]: CSSObject['width'];
         };
-        background: {
-            checked?: {
-                [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
-            };
-            unchecked?: {
-                [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
-            };
-            indeterminate?: {
+        height: {
+            [key in CheckboxSize]: CSSObject['height'];
+        };
+        backgroundColor: {
+            [key in CheckboxCheckedState]?: {
                 [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
             };
         };
+        borderRadius: {
+            [key in CheckboxSize]: CSSObject['borderRadius'];
+        };
         border: {
-            radius: CSSObject['borderRadius'];
-            width: CSSObject['borderWidth'];
+            [key in CheckboxCheckedState]?: {
+                [key in CheckboxInteractionState]?: CSSObject['border'];
+            };
+        };
+        outline: CSSObject['outline'];
+        outlineOffset: CSSObject['outlineOffset'];
+        boxShadow: CSSObject['boxShadow'];
+        icon: {
             color: {
-                checked?: {
-                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
-                };
-                unchecked?: {
-                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
-                };
-                indeterminate?: {
-                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
+                [key in CheckboxCheckedState]?: {
+                    [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
                 };
             };
-        };
-        focus: {
-            outlineColor: CSSObject['borderColor'];
-            outlineWidth: CSSObject['borderWidth'];
-            outlineOffset: CSSObject['outlineOffset'];
-            boxShadow: CSSObject['boxShadow'];
-        };
-    };
-    icon: {
-        color: {
-            checked?: {
-                [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
+            width: {
+                [key in CheckboxSize]: CSSObject['width'];
             };
-            indeterminate?: {
-                [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
+            height: {
+                [key in CheckboxSize]: CSSObject['height'];
             };
-        };
-        size: {
-            [key in CheckboxSize]: {
-                width: CSSObject['width'];
-                height: CSSObject['height'];
-                strokeWidth: CSSObject['strokeWidth'];
+            strokeWidth: {
+                [key in CheckboxSize]: CSSObject['strokeWidth'];
             };
         };
     };
@@ -67,40 +51,29 @@ export type CheckboxTokensType = {
         gap: CSSObject['gap'];
         label: {
             color: {
-                [key in Exclude<CheckboxInteractionState, 'hover'>]: CSSObject['color'];
+                [key in CheckboxInteractionState]: CSSObject['color'];
             };
-            font: {
-                [key in CheckboxSize]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
+            fontSize: {
+                [key in CheckboxSize]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in CheckboxSize]: CSSObject['fontWeight'];
             };
         };
         subtext: {
             color: {
-                [key in Exclude<CheckboxInteractionState, 'hover'>]: CSSObject['color'];
+                [key in CheckboxInteractionState]: CSSObject['color'];
             };
-            font: {
-                [key in CheckboxSize]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
+            fontSize: {
+                [key in CheckboxSize]: CSSObject['fontSize'];
             };
-            spacing: {
-                left: {
-                    [key in CheckboxSize]: CSSObject['marginLeft'];
-                };
-                top: CSSObject['marginTop'];
+            fontWeight: {
+                [key in CheckboxSize]: CSSObject['fontWeight'];
             };
         };
     };
     required: {
         color: CSSObject['color'];
-        spacing: CSSObject['marginLeft'];
-    };
-    transition: {
-        duration: CSSObject['transitionDuration'];
-        easing: CSSObject['transitionTimingFunction'];
     };
 };
 export type ResponsiveCheckboxTokens = {

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

@@ -7,6 +7,7 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     currentValue: unknown;
     width: React.CSSProperties;
     frozenStyles?: React.CSSProperties;
+    isFirstRow?: boolean;
     onFieldChange: (value: unknown) => void;
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
 };

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

@@ -1,4 +1,5 @@
 import { DateRangePreset, DateRangePickerSize, CustomPresetConfig } from './types';
+import { CalendarTokenType } from './dateRangePicker.tokens';
 type QuickRangeSelectorProps = {
     isOpen: boolean;
     onToggle: () => void;
@@ -13,6 +14,7 @@ type QuickRangeSelectorProps = {
     size?: DateRangePickerSize;
     maxMenuHeight?: number;
     isStandalone?: boolean;
+    calendarToken?: CalendarTokenType;
 };
 declare const QuickRangeSelector: import('react').ForwardRefExoticComponent<QuickRangeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
 export default QuickRangeSelector;

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

@@ -1,10 +1,12 @@
 import { default as React } from 'react';
+import { CalendarTokenType } from './dateRangePicker.tokens';
 type TimeSelectorProps = {
     value: string;
     onChange: (time: string) => void;
     className?: string;
     autoFocus?: boolean;
     tabIndex?: number;
+    calendarToken?: CalendarTokenType;
 };
 declare const TimeSelector: React.ForwardRefExoticComponent<TimeSelectorProps & React.RefAttributes<HTMLDivElement>>;
 export default TimeSelector;