@juspay/blend-design-system 0.0.19 → 0.0.20

package/dist/components/SingleSelect/singleSelect.tokens.d.ts

@@ -5,27 +5,60 @@ import { BreakpointType } from '../../breakpoints/breakPoints';
 type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
 export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type SingleSelectTokensType = {
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in SingleSelectItemStates]: CSSObject['color'];
+        };
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in SingleSelectItemStates]: CSSObject['color'];
+        };
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in SingleSelectItemStates]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
     trigger: {
         height: {
-            [key in SelectMenuSize]: CSSObject['height'];
-        };
-        paddingX: {
-            [key in SelectMenuSize]: CSSObject['padding'];
+            [key in SelectMenuSize]: {
+                [key in SelectMenuVariant]: CSSObject['height'];
+            };
         };
-        paddingY: {
-            [key in SelectMenuSize]: CSSObject['padding'];
+        padding: {
+            [key in SelectMenuSize]: {
+                [key in SelectMenuVariant]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+            };
         };
         borderRadius: {
-            [key in SelectMenuSize]: CSSObject['borderRadius'];
+            [key in SelectMenuSize]: {
+                [key in SelectMenuVariant]: CSSObject['borderRadius'];
+            };
         };
         boxShadow: {
             [key in SelectMenuVariant]: CSSObject['boxShadow'];
         };
         backgroundColor: {
-            container: {
-                [key in TriggerStates]: CSSObject['backgroundColor'];
-            };
-            'no-container': {
+            [key in SelectMenuVariant]: {
                 [key in TriggerStates]: CSSObject['backgroundColor'];
             };
         };
@@ -35,14 +68,18 @@ export type SingleSelectTokensType = {
             };
         };
     };
-    dropdown: {
-        shadow: CSSObject['boxShadow'];
+    menu: {
         backgroundColor: CSSObject['backgroundColor'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
         border: CSSObject['border'];
-        outline: CSSObject['outline'];
         borderRadius: CSSObject['borderRadius'];
+        padding: {
+            [key in SelectMenuSize]: {
+                [key in SelectMenuVariant]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+            };
+        };
         item: {
             padding: CSSObject['padding'];
             margin: CSSObject['margin'];
@@ -51,25 +88,32 @@ export type SingleSelectTokensType = {
             backgroundColor: {
                 [key in SingleSelectItemStates]: CSSObject['backgroundColor'];
             };
-            label: {
+            optionsLabel: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: {
                     [key in SingleSelectItemStates]: CSSObject['color'];
                 };
             };
-            subLabel: {
+            option: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: {
                     [key in SingleSelectItemStates]: CSSObject['color'];
                 };
             };
-        };
-        seperator: {
-            color: CSSObject['color'];
-            height: CSSObject['height'];
-            margin: CSSObject['margin'];
+            description: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in SingleSelectItemStates]: CSSObject['color'];
+                };
+            };
+            seperator: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+                margin: CSSObject['margin'];
+            };
         };
     };
     drawer: {

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

@@ -95,4 +95,11 @@ export type SingleSelectProps = {
     error?: boolean;
     errorMessage?: string;
     fullWidth?: boolean;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };

package/dist/components/Snackbar/snackbar.tokens.d.ts

@@ -2,6 +2,26 @@ import { CSSObject } from 'styled-components';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { SnackbarVariant } from './types';
+/**
+ * Snackbar Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure:
+ * - target: container | infoIcon | content | actionButton | crossIcon (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | padding | color | fontSize | fontWeight | gap | size | minWidth | maxWidth | boxShadow
+ * - variant: info | success | warning | error (snackbar variant)
+ * - state: default (no interactive states for snackbar)
+ *
+ * Pattern examples:
+ * - container.backgroundColor
+ * - container.borderRadius
+ * - container.padding
+ * - infoIcon.color.[variant]
+ * - infoIcon.size.[variant]
+ * - content.textContainer.header.color
+ * - content.textContainer.description.color
+ * - content.actionButton.color
+ * - crossIcon.color
+ */
 export type SnackbarTokens = Readonly<{
     backgroundColor: CSSObject['backgroundColor'];
     borderRadius: CSSObject['borderRadius'];
@@ -10,40 +30,46 @@ export type SnackbarTokens = Readonly<{
     maxWidth: CSSObject['maxWidth'];
     boxShadow: CSSObject['boxShadow'];
     gap: CSSObject['gap'];
-    container: {
-        gap: CSSObject['gap'];
-        infoIcon: {
-            [key in SnackbarVariant]: {
-                color: CSSObject['color'];
-                size: CSSObject['size'];
-            };
+    infoIcon: {
+        color: {
+            [key in SnackbarVariant]: CSSObject['color'];
         };
-        content: {
+        height: CSSObject['height' | 'width'];
+    };
+    content: {
+        gap: CSSObject['gap'];
+        textContainer: {
             gap: CSSObject['gap'];
-            textContainer: {
-                gap: CSSObject['gap'];
-                header: {
-                    color: CSSObject['color'];
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
-                description: {
-                    color: CSSObject['color'];
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
+            header: {
+                color: {
+                    [key in SnackbarVariant]: CSSObject['color'];
                 };
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
             };
-            actionButton: {
-                padding: CSSObject['padding'];
-                color: CSSObject['color'];
+            description: {
+                color: {
+                    [key in SnackbarVariant]: CSSObject['color'];
+                };
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
             };
         };
     };
-    crossIcon: {
-        size: CSSObject['fontSize'];
-        color: CSSObject['color'];
+    actions: {
+        primaryAction: {
+            color: {
+                [key in SnackbarVariant]: CSSObject['color'];
+            };
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+        closeButton: {
+            height: CSSObject['height' | 'width'];
+            color: {
+                [key in SnackbarVariant]: CSSObject['color'];
+            };
+        };
     };
 }>;
 export type ResponsiveSnackbarTokens = {

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, height, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, height, direction, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -6,65 +6,59 @@ export type StatCardState = 'default' | 'hover' | 'loading';
 export type StatCardTokenType = {
     height: CSSObject['height'];
     maxWidth: CSSObject['maxWidth'];
-    border: {
-        [key in StatCardState]?: CSSObject['border'];
-    };
+    border: CSSObject['border'];
     borderRadius: CSSObject['borderRadius'];
-    backgroundColor: {
-        [key in StatCardState]?: CSSObject['backgroundColor'];
-    };
+    backgroundColor: CSSObject['backgroundColor'];
     boxShadow: CSSObject['boxShadow'];
-    padding: CSSObject['padding'];
-    gap: CSSObject['gap'];
-    header: {
-        gap: CSSObject['gap'];
-        titleIcon: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            margin: CSSObject['margin'];
-        };
-        title: {
-            [key in StatCardVariant]: {
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
-                color: CSSObject['color'];
-            };
-        };
-        helpIcon: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            color: CSSObject['color'];
-        };
-    };
-    headerStatGap: {
-        gap: CSSObject['gap'];
+    padding: {
+        x: CSSObject['padding'];
+        y: CSSObject['padding'];
     };
-    stats: {
+    textContainer: {
         gap: CSSObject['gap'];
-        value: {
-            [key in StatCardVariant]: {
+        header: {
+            gap: CSSObject['gap'];
+            title: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: CSSObject['color'];
             };
-        };
-        change: {
-            margin: CSSObject['margin'];
-            arrow: {
+            titleIcon: {
                 width: CSSObject['width'];
-                height: CSSObject['height'];
-                margin: CSSObject['margin'];
             };
-            text: {
-                [key in ChangeType]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                    color: CSSObject['color'];
+            helpIcon: {
+                width: CSSObject['width'];
+                color: {
+                    [key in StatCardState]: CSSObject['color'];
                 };
             };
         };
-        subtitle: {
-            [key in StatCardVariant]: {
+        stats: {
+            gap: CSSObject['gap'];
+            title: {
+                gap: CSSObject['gap'];
+                value: {
+                    [key in StatCardVariant]: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: CSSObject['color'];
+                    };
+                };
+                change: {
+                    margin: CSSObject['margin'];
+                    arrow: {
+                        width: CSSObject['width'];
+                    };
+                    text: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: {
+                            [key in ChangeType]: CSSObject['color'];
+                        };
+                    };
+                };
+            };
+            subtitle: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: CSSObject['color'];
@@ -91,7 +85,7 @@ export type StatCardTokenType = {
         line: {
             strokeWidth: CSSObject['strokeWidth'];
             activeDot: {
-                borderRadius: CSSObject['borderRadius'];
+                width: CSSObject['width'];
                 fill: CSSObject['fill'];
             };
         };
@@ -100,9 +94,8 @@ export type StatCardTokenType = {
             borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
             borderBottomRightRadius: CSSObject['borderBottomRightRadius'];
             borderBottomLeftRadius: CSSObject['borderBottomLeftRadius'];
-            fill: CSSObject['fill'];
-            activeBar: {
-                fill: CSSObject['fill'];
+            fill: {
+                [key in StatCardState]: CSSObject['fill'];
             };
         };
         progressBar: {
@@ -124,23 +117,15 @@ export type StatCardTokenType = {
             };
         };
         tooltip: {
-            cursor: {
-                strokeDasharray: string;
-                stroke: CSSObject['stroke'];
-            };
-            container: {
-                backgroundColor: CSSObject['backgroundColor'];
-                padding: CSSObject['padding'];
-                borderRadius: CSSObject['borderRadius'];
-            };
-            text: {
-                color: CSSObject['color'];
-            };
-            bar: {
-                cursor: {
-                    fill: CSSObject['fill'];
-                };
+            backgroundColor: CSSObject['backgroundColor'];
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
             };
+            borderRadius: CSSObject['borderRadius'];
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
         };
     };
 };

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

@@ -20,13 +20,19 @@ export type StatCardChange = {
     valueType: ChangeType;
     tooltip?: ReactNode;
 };
+export declare enum StatCardDirection {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 export type StatCardAxisConfig = {
     type?: AxisType;
     tickFormatter?: (value: string | number) => string;
     dateOnly?: boolean;
-    smart?: boolean;
-    timeZone?: string;
-    hour12?: boolean;
+    useUTC?: boolean;
+    formatString?: string;
+    timeOnly?: boolean;
+    showYear?: boolean;
+    smartDateTimeFormat?: boolean;
 };
 export type StatCardProps = {
     title: string;
@@ -46,4 +52,5 @@ export type StatCardProps = {
     yAxis?: StatCardAxisConfig;
     valueFormatter?: AxisType;
     height?: string;
+    direction?: StatCardDirection;
 };

package/dist/components/Switch/switch.token.d.ts

@@ -3,48 +3,58 @@ import { ThemeType } from '../../tokens';
 import { SwitchSize } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type SwitchState = 'default' | 'hover' | 'disabled' | 'error';
-export type SwitchIndicatorState = 'active' | 'inactive';
+export type SwitchVariant = 'active' | 'inactive';
+/**
+ * Switch Tokens following the design system pattern
+ *
+ * Structure aligned with Checkbox and Radio components:
+ * - switchContainer: Main switch element properties
+ * - content: Text and subtext styling
+ * - slot: Slot element styling
+ * - required: Required indicator styling
+ */
 export type SwitchTokensType = {
     gap: CSSObject['gap'];
-    slotGap: CSSObject['gap'];
-    contentGap: CSSObject['gap'];
-    height: {
-        [key in SwitchSize]: CSSObject['height'];
-    };
-    width: {
-        [key in SwitchSize]: CSSObject['width'];
-    };
-    borderRadius: {
-        base: CSSObject['borderRadius'];
-        thumb: CSSObject['borderRadius'];
-    };
-    indicator: {
-        [key in SwitchIndicatorState]: {
-            background: {
-                [key in Exclude<SwitchState, 'error'>]: CSSObject['backgroundColor'];
+    switchContainer: {
+        height: {
+            [key in SwitchSize]: CSSObject['height'];
+        };
+        width: {
+            [key in SwitchSize]: CSSObject['width'];
+        };
+        borderRadius: {
+            [key in SwitchSize]: CSSObject['borderRadius'];
+        };
+        backgroundColor: {
+            [key in SwitchVariant]: {
+                [key in SwitchState]: CSSObject['backgroundColor'];
             };
+        };
+        thumb: {
+            marginTop: CSSObject['marginTop'];
+            backgroundColor: CSSObject['backgroundColor'];
             border: {
-                [key in Exclude<SwitchState, 'error'>]: CSSObject['borderColor'];
+                color: CSSObject['borderColor'];
+                width: CSSObject['borderWidth'];
             };
-        };
-    };
-    thumb: {
-        background: CSSObject['backgroundColor'];
-        border: {
-            color: CSSObject['borderColor'];
-            width: CSSObject['borderWidth'];
-        };
-        size: {
-            [key in SwitchSize]: {
-                width: CSSObject['width'];
-                height: CSSObject['height'];
-                top: CSSObject['top'];
-                left: CSSObject['left'];
-                offset: {
-                    active: CSSObject['left'];
-                    inactive: CSSObject['left'];
+            borderRadius: {
+                [key in SwitchSize]: CSSObject['borderRadius'];
+            };
+            size: {
+                [key in SwitchSize]: {
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                    top: CSSObject['top'];
+                    left: CSSObject['left'];
+                    offset: {
+                        active: CSSObject['left'];
+                        inactive: CSSObject['left'];
+                    };
                 };
             };
+            outline: CSSObject['outline'];
+            outlineOffset: CSSObject['outlineOffset'];
+            boxShadow: CSSObject['boxShadow'];
         };
     };
     content: {
@@ -52,56 +62,29 @@ export type SwitchTokensType = {
             color: {
                 [key in SwitchState]: CSSObject['color'];
             };
-            font: {
-                [key in SwitchSize]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
+            fontSize: {
+                [key in SwitchSize]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SwitchSize]: CSSObject['fontWeight'];
             };
+            gap: CSSObject['gap'];
         };
-        sublabel: {
+        subtext: {
             color: {
                 [key in SwitchState]: CSSObject['color'];
             };
-            font: {
-                [key in SwitchSize]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
+            fontSize: {
+                [key in SwitchSize]: CSSObject['fontSize'];
             };
-            spacing: {
-                left: {
-                    [key in SwitchSize]: CSSObject['marginLeft'];
-                };
-                top: CSSObject['marginTop'];
+            fontWeight: {
+                [key in SwitchSize]: CSSObject['fontWeight'];
             };
         };
-    };
-    borderWidth: {
-        [key in SwitchIndicatorState]: {
-            [key in Exclude<SwitchState, 'error'>]: number;
-        };
-    };
-    focus: {
-        outline: {
-            width: CSSObject['borderWidth'];
-            color: CSSObject['borderColor'];
-            offset: CSSObject['outlineOffset'];
-        };
-    };
-    slot: {
-        size: {
-            [key in SwitchSize]: CSSObject['width'];
-        };
-        spacing: CSSObject['margin'];
+        gap: CSSObject['gap'];
     };
     required: {
         color: CSSObject['color'];
-        spacing: CSSObject['margin'];
-    };
-    transition: {
-        duration: CSSObject['transitionDuration'];
-        easing: CSSObject['transitionTimingFunction'];
     };
 };
 export type ResponsiveSwitchTokens = {