@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.6

package/dist/components/StatCardV2/StatCardV2Value.d.ts

@@ -1,11 +1,14 @@
+import { ReactNode } from 'react';
 import { StatCardV2Props, StatCardV2Variant } from './statcardV2.types';
 import { StatCardV2TokensType } from './statcardV2.tokens';
 export declare const STATCARD_FALLBACK_DISPLAY = "--";
 export declare const renderVariantFallbackValue: (tokens: StatCardV2TokensType, variant: StatCardV2Variant) => import("react/jsx-runtime").JSX.Element;
-declare const StatCardV2Value: ({ value, tokens, variant, id, }: {
+declare const StatCardV2Value: ({ value, valueTooltip, tokens, variant, id, isSmallScreen, }: {
     value: StatCardV2Props["value"];
+    valueTooltip?: ReactNode;
     tokens: StatCardV2TokensType;
     variant: StatCardV2Variant;
     id?: string;
+    isSmallScreen?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default StatCardV2Value;

package/dist/components/StatCardV2/statcardV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens';
+import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens.types';
 export declare const getStatCardV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveStatCardV2Tokens;

package/dist/components/StatCardV2/statcardV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens';
+import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens.types';
 export declare const getStatCardV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveStatCardV2Tokens;

package/dist/components/StatCardV2/statcardV2.tokens.d.ts

@@ -1,81 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
-import { StatCardV2ChangeType, StatCardV2Variant } from './statcardV2.types';
-export type StatCardV2TokensType = {
-    height: CSSObject['height'];
-    width: CSSObject['width'];
-    maxWidth: CSSObject['maxWidth'];
-    minWidth: CSSObject['minWidth'];
-    paddingTop: CSSObject['paddingTop'];
-    paddingBottom: CSSObject['paddingBottom'];
-    paddingLeft: CSSObject['paddingLeft'];
-    paddingRight: CSSObject['paddingRight'];
-    border: CSSObject['border'];
-    borderRadius: CSSObject['borderRadius'];
-    backgroundColor: CSSObject['backgroundColor'];
-    boxShadow: CSSObject['boxShadow'];
-    topContainer: {
-        gap: CSSObject['gap'];
-        dataContainer: {
-            gap: CSSObject['gap'];
-            titleContainer: {
-                gap: CSSObject['gap'];
-                title: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
-                    lineHeight: CSSObject['lineHeight'];
-                };
-                helpIcon: {
-                    width: CSSObject['width'];
-                    height: CSSObject['height'];
-                    color: {
-                        default: CSSObject['color'];
-                        hover: CSSObject['color'];
-                    };
-                };
-            };
-            statsContainer: {
-                gap: CSSObject['gap'];
-                value: {
-                    [key in StatCardV2Variant]: {
-                        fontSize: CSSObject['fontSize'];
-                        fontWeight: CSSObject['fontWeight'];
-                        color: CSSObject['color'];
-                        lineHeight: CSSObject['lineHeight'];
-                    };
-                };
-                changeContainer: {
-                    gap: CSSObject['gap'];
-                    change: {
-                        fontSize: CSSObject['fontSize'];
-                        fontWeight: CSSObject['fontWeight'];
-                        color: {
-                            [key in StatCardV2ChangeType]: CSSObject['color'];
-                        };
-                        lineHeight: CSSObject['lineHeight'];
-                    };
-                    arrow: {
-                        width: CSSObject['width'];
-                        height: CSSObject['height'];
-                        color: {
-                            [key in StatCardV2ChangeType]: CSSObject['color'];
-                        };
-                    };
-                };
-            };
-            subtitle: {
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
-                color: CSSObject['color'];
-                lineHeight: CSSObject['lineHeight'];
-            };
-        };
-    };
-};
-export type ResponsiveStatCardV2Tokens = {
-    [key in keyof BreakpointType]: StatCardV2TokensType;
-};
+import { ResponsiveStatCardV2Tokens } from './statcardV2.tokens.types';
+export type { ResponsiveStatCardV2Tokens, StatCardV2TokensType, } from './statcardV2.tokens.types';
 export declare const getStatCardV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveStatCardV2Tokens;

package/dist/components/StatCardV2/statcardV2.tokens.types.d.ts

@@ -0,0 +1,86 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export declare enum StatCardV2Variant {
+    CHART = "chart",
+    PROGRESS_BAR = "progress",
+    NUMBER = "number"
+}
+export declare enum StatCardV2ChangeType {
+    INCREASE = "increase",
+    DECREASE = "decrease"
+}
+export type StatCardV2TokensType = {
+    height: CSSObject['height'];
+    width: CSSObject['width'];
+    maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    paddingRight: CSSObject['paddingRight'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    backgroundColor: CSSObject['backgroundColor'];
+    boxShadow: CSSObject['boxShadow'];
+    topContainer: {
+        gap: CSSObject['gap'];
+        dataContainer: {
+            gap: CSSObject['gap'];
+            titleContainer: {
+                gap: CSSObject['gap'];
+                title: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                helpIcon: {
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                    color: {
+                        default: CSSObject['color'];
+                        hover: CSSObject['color'];
+                    };
+                };
+            };
+            statsContainer: {
+                gap: CSSObject['gap'];
+                value: {
+                    [key in StatCardV2Variant]: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: CSSObject['color'];
+                        lineHeight: CSSObject['lineHeight'];
+                    };
+                };
+                changeContainer: {
+                    gap: CSSObject['gap'];
+                    change: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color'];
+                        };
+                        lineHeight: CSSObject['lineHeight'];
+                    };
+                    arrow: {
+                        width: CSSObject['width'];
+                        height: CSSObject['height'];
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color'];
+                        };
+                    };
+                };
+            };
+            subtitle: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+        };
+    };
+};
+export type ResponsiveStatCardV2Tokens = {
+    [key in keyof BreakpointType]: StatCardV2TokensType;
+};

package/dist/components/StatCardV2/statcardV2.types.d.ts

@@ -1,28 +1,20 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { CSSObject } from 'styled-components';
-import { StatCardV2TokensType } from './statcardV2.tokens';
-import { ChartV2Options } from '../ChartsV2';
-import { SkeletonVariant } from '../Skeleton';
-import { SingleSelectProps } from '../SingleSelect';
+import { StatCardV2ChangeType, StatCardV2Variant, StatCardV2TokensType } from './statcardV2.tokens.types';
+import { ChartV2Options } from '../ChartsV2/chartV2.types';
+import { SkeletonVariant } from '../Skeleton/types';
+import { SingleSelectProps } from '../SingleSelect/types';
+export { StatCardV2ChangeType, StatCardV2Variant };
 export type StatCardV2Dimensions = {
     width?: CSSObject['width'];
     maxWidth?: CSSObject['maxWidth'];
     minWidth?: CSSObject['minWidth'];
     height?: CSSObject['height'];
 };
-export declare enum StatCardV2Variant {
-    CHART = "chart",
-    PROGRESS_BAR = "progress",
-    NUMBER = "number"
-}
 export declare enum StatCardV2ArrowDirection {
     UP = "up",
     DOWN = "down"
 }
-export declare enum StatCardV2ChangeType {
-    INCREASE = "increase",
-    DECREASE = "decrease"
-}
 export declare enum StatCardV2Alignment {
     LEFT = "left",
     CENTER = "center"
@@ -47,6 +39,7 @@ export type StatCardV2TitleProps = {
     helpIconText?: string;
     tokens: StatCardV2TokensType;
     id?: string;
+    isSmallScreen?: boolean;
 };
 export type StatCardV2ChangeProps = {
     changeValueText?: string;
@@ -55,6 +48,7 @@ export type StatCardV2ChangeProps = {
     arrowDirection: StatCardV2ArrowDirection;
     changeType: StatCardV2ChangeType;
     tokens: StatCardV2TokensType;
+    tooltip?: ReactNode;
     id?: string;
 };
 export type StatCardV2SubtitleProps = {
@@ -70,6 +64,7 @@ export type StatCardV2Props = {
     value?: string;
     progressValue?: number;
     helpIconText?: string;
+    valueTooltip?: ReactNode;
     change?: StatCardV2Change;
     subtitle?: string;
     options?: ChartV2Options;

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

@@ -22,6 +22,7 @@ export type SubStep = {
     title: string;
     status?: StepState;
     disabled?: boolean;
+    slot?: ReactNode;
 };
 export type Step = {
     id: number;
@@ -30,6 +31,7 @@ export type Step = {
     disabled?: boolean;
     description?: string;
     icon?: ReactNode;
+    slot?: ReactNode;
     substeps?: SubStep[];
     isExpandable?: boolean;
     isExpanded?: boolean;

package/dist/components/StepperV2/stepperV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveStepperV2Tokens } from './stepperV2.tokens';
+import { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types';
 export declare const getStepperV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveStepperV2Tokens;

package/dist/components/StepperV2/stepperV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveStepperV2Tokens } from './stepperV2.tokens';
+import { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types';
 export declare const getStepperV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveStepperV2Tokens;

package/dist/components/StepperV2/stepperV2.tokens.d.ts

@@ -1,99 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { BreakpointType } from '../../breakpoints/breakPoints';
-import { StepperV2InteractionState, StepperV2StepStatus } from './stepperV2.types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
-export type StepperV2TokensType = {
-    container: {
-        gap: CSSObject['gap'];
-        step: {
-            circle: {
-                [key in StepperV2StepStatus]: {
-                    [key in StepperV2InteractionState]: {
-                        backgroundColor: CSSObject['backgroundColor'];
-                        borderColor: CSSObject['borderColor'];
-                        borderWidth: CSSObject['borderWidth'];
-                        borderRadius: CSSObject['borderRadius'];
-                        size: CSSObject['width'];
-                        transition: CSSObject['transition'];
-                        outline: CSSObject['outline'];
-                        outlineOffset: CSSObject['outlineOffset'];
-                        paddingTop: CSSObject['paddingTop'];
-                        paddingRight: CSSObject['paddingRight'];
-                        paddingBottom: CSSObject['paddingBottom'];
-                        paddingLeft: CSSObject['paddingLeft'];
-                    };
-                };
-            };
-            icon: {
-                [key in StepperV2StepStatus]: {
-                    [key in StepperV2InteractionState]: {
-                        color: CSSObject['color'];
-                    };
-                };
-            };
-        };
-        connector: {
-            line: {
-                color: CSSObject['color'];
-                height: CSSObject['height'];
-            };
-        };
-        subConnector: {
-            line: {
-                color: CSSObject['color'];
-                height: CSSObject['height'];
-            };
-            dot: {
-                border: CSSObject['border'];
-                borderRadius: CSSObject['borderRadius'];
-                height: CSSObject['height'];
-                width: CSSObject['width'];
-                paddingTop: CSSObject['paddingTop'];
-                paddingRight: CSSObject['paddingRight'];
-                paddingBottom: CSSObject['paddingBottom'];
-                paddingLeft: CSSObject['paddingLeft'];
-            };
-            expander: {
-                icon: {
-                    color: CSSObject['color'];
-                };
-                width: CSSObject['width'];
-            };
-            text: {
-                [key in StepperV2StepStatus]: {
-                    color: CSSObject['color'];
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
-            };
-        };
-        title: {
-            text: {
-                [key in StepperV2StepStatus]: {
-                    [key in StepperV2InteractionState]: {
-                        color: CSSObject['color'];
-                        fontSize: CSSObject['fontSize'];
-                        fontWeight: CSSObject['fontWeight'];
-                        gap: CSSObject['gap'];
-                        paddingTop: CSSObject['paddingTop'];
-                        paddingRight: CSSObject['paddingRight'];
-                        paddingBottom: CSSObject['paddingBottom'];
-                        paddingLeft: CSSObject['paddingLeft'];
-                    };
-                };
-            };
-        };
-        description: {
-            text: {
-                color: CSSObject['color'];
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
-            };
-        };
-    };
-};
-export type ResponsiveStepperV2Tokens = {
-    [key in keyof BreakpointType]: StepperV2TokensType;
-};
+import { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types';
+export type { StepperV2TokensType, ResponsiveStepperV2Tokens, } from './stepperV2.tokens.types';
 export declare const getStepperV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveStepperV2Tokens;

package/dist/components/StepperV2/stepperV2.tokens.types.d.ts

@@ -0,0 +1,96 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { StepperV2InteractionState, StepperV2StepStatus } from './stepperV2.types';
+export type StepperV2TokensType = {
+    container: {
+        gap: CSSObject['gap'];
+        step: {
+            circle: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        backgroundColor: CSSObject['backgroundColor'];
+                        borderColor: CSSObject['borderColor'];
+                        borderWidth: CSSObject['borderWidth'];
+                        borderRadius: CSSObject['borderRadius'];
+                        size: CSSObject['width'];
+                        transition: CSSObject['transition'];
+                        outline: CSSObject['outline'];
+                        outlineOffset: CSSObject['outlineOffset'];
+                        paddingTop: CSSObject['paddingTop'];
+                        paddingRight: CSSObject['paddingRight'];
+                        paddingBottom: CSSObject['paddingBottom'];
+                        paddingLeft: CSSObject['paddingLeft'];
+                    };
+                };
+            };
+            icon: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        color: CSSObject['color'];
+                    };
+                };
+            };
+        };
+        connector: {
+            line: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+            };
+        };
+        subConnector: {
+            line: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+            };
+            dot: {
+                border: CSSObject['border'];
+                borderRadius: CSSObject['borderRadius'];
+                height: CSSObject['height'];
+                width: CSSObject['width'];
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+            };
+            expander: {
+                icon: {
+                    color: CSSObject['color'];
+                };
+                width: CSSObject['width'];
+            };
+            text: {
+                [key in StepperV2StepStatus]: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+        title: {
+            text: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        color: CSSObject['color'];
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        gap: CSSObject['gap'];
+                        paddingTop: CSSObject['paddingTop'];
+                        paddingRight: CSSObject['paddingRight'];
+                        paddingBottom: CSSObject['paddingBottom'];
+                        paddingLeft: CSSObject['paddingLeft'];
+                    };
+                };
+            };
+        };
+        description: {
+            text: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+            };
+        };
+    };
+};
+export type ResponsiveStepperV2Tokens = {
+    [key in keyof BreakpointType]: StepperV2TokensType;
+};

package/dist/components/TabsV2/tabsV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTabsV2Tokens } from './tabsV2.tokens';
+import { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types';
 export declare const getTabsV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTabsV2Tokens;

package/dist/components/TabsV2/tabsV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTabsV2Tokens } from './tabsV2.tokens';
+import { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types';
 export declare const getTabsV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveTabsV2Tokens;

package/dist/components/TabsV2/tabsV2.tokens.d.ts

@@ -1,97 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types';
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { Theme } from '../../context/theme.enum';
-export type TabsV2TokensType = {
-    width: CSSObject['width'];
-    outline: CSSObject['outline'];
-    tabList: {
-        gap: CSSObject['gap'];
-        backgroundColor: {
-            [key in TabsV2Variant]: CSSObject['backgroundColor'];
-        };
-        borderRadius: {
-            [key in TabsV2Size]: {
-                [key in TabsV2Variant]: CSSObject['borderRadius'];
-            };
-        };
-        padding: {
-            [key in TabsV2Size]: {
-                [key in TabsV2Variant]: {
-                    top: CSSObject['paddingTop'];
-                    right: CSSObject['paddingRight'];
-                    bottom: CSSObject['paddingBottom'];
-                    left: CSSObject['paddingLeft'];
-                };
-            };
-        };
-        activeIndicator: {
-            height: CSSObject['height'];
-            color: CSSObject['color'];
-            position: {
-                bottom: CSSObject['bottom'];
-            };
-            transition: CSSObject['transition'];
-            zIndex: CSSObject['zIndex'];
-        };
-        stickyHeader: {
-            boxShadow: CSSObject['boxShadow'];
-            zIndex: CSSObject['zIndex'];
-        };
-        trigger: {
-            gap: CSSObject['gap'];
-            icon: {
-                maxWidth: CSSObject['maxWidth'];
-            };
-            backgroundColor: {
-                [key in TabsV2Variant]: {
-                    [key in TabsV2State]: CSSObject['backgroundColor'];
-                };
-            };
-            borderRadius: {
-                [key in TabsV2Size]: {
-                    [key in TabsV2Variant]: CSSObject['borderRadius'];
-                };
-            };
-            border: {
-                [key in TabsV2Variant]: CSSObject['border'];
-            };
-            padding: {
-                [key in TabsV2Size]: {
-                    [key in TabsV2Variant]: {
-                        top: CSSObject['paddingTop'];
-                        right: CSSObject['paddingRight'];
-                        bottom: CSSObject['paddingBottom'];
-                        left: CSSObject['paddingLeft'];
-                    };
-                };
-            };
-            text: {
-                color: {
-                    [key in TabsV2Variant]: {
-                        [key in TabsV2State]: CSSObject['color'];
-                    };
-                };
-                fontSize: {
-                    [key in TabsV2Size]: CSSObject['fontSize'];
-                };
-                fontWeight: {
-                    [key in TabsV2Size]: CSSObject['fontWeight'];
-                };
-            };
-            closeButton: {
-                width: CSSObject['width'];
-                borderRadius: CSSObject['borderRadius'];
-                backgroundColor: {
-                    [key in TabsV2State]: CSSObject['backgroundColor'];
-                };
-            };
-            transition: CSSObject['transition'];
-        };
-    };
-};
-export type ResponsiveTabsV2Tokens = {
-    [key in keyof BreakpointType]: TabsV2TokensType;
-};
+import { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types';
+export type { ResponsiveTabsV2Tokens, TabsV2TokensType, } from './tabsV2.tokens.types';
 export declare const getTabsV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTabsV2Tokens;