@juspay/blend-design-system 0.0.37-beta.5 → 0.0.37-beta.7

package/lib/components/StatCardV2/statcardV2.tokens.types.ts

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export enum StatCardV2Variant {
+    CHART = 'chart',
+    PROGRESS_BAR = 'progress',
+    NUMBER = 'number',
+}
+
+export 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/lib/components/StatCardV2/statcardV2.types.ts

@@ -1,9 +1,15 @@
 import { HTMLAttributes, ReactNode } from 'react'
 import { CSSObject } from 'styled-components'
-import { StatCardV2TokensType } from './statcardV2.tokens'
-import { ChartV2Options } from '../ChartsV2'
-import { SkeletonVariant } from '../Skeleton'
-import type { SingleSelectProps } from '../SingleSelect'
+import {
+    StatCardV2ChangeType,
+    StatCardV2Variant,
+} from './statcardV2.tokens.types'
+import type { StatCardV2TokensType } from './statcardV2.tokens.types'
+import type { ChartV2Options } from '../ChartsV2/chartV2.types'
+import type { SkeletonVariant } from '../Skeleton/types'
+import type { SingleSelectProps } from '../SingleSelect/types'
+
+export { StatCardV2ChangeType, StatCardV2Variant }
 
 export type StatCardV2Dimensions = {
     width?: CSSObject['width']
@@ -12,22 +18,11 @@ export type StatCardV2Dimensions = {
     height?: CSSObject['height']
 }
 
-export enum StatCardV2Variant {
-    CHART = 'chart',
-    PROGRESS_BAR = 'progress',
-    NUMBER = 'number',
-}
-
 export enum StatCardV2ArrowDirection {
     UP = 'up',
     DOWN = 'down',
 }
 
-export enum StatCardV2ChangeType {
-    INCREASE = 'increase',
-    DECREASE = 'decrease',
-}
-
 export enum StatCardV2Alignment {
     LEFT = 'left',
     CENTER = 'center',
@@ -55,6 +50,7 @@ export type StatCardV2TitleProps = {
     helpIconText?: string
     tokens: StatCardV2TokensType
     id?: string
+    isSmallScreen?: boolean
 }
 
 export type StatCardV2ChangeProps = {
@@ -64,6 +60,7 @@ export type StatCardV2ChangeProps = {
     arrowDirection: StatCardV2ArrowDirection
     changeType: StatCardV2ChangeType
     tokens: StatCardV2TokensType
+    tooltip?: ReactNode
     id?: string
 }
 
@@ -81,10 +78,12 @@ export type StatCardV2Props = {
     value?: string
     progressValue?: number
     helpIconText?: string
+    valueTooltip?: ReactNode
     change?: StatCardV2Change
     subtitle?: string
     options?: ChartV2Options
     skeleton?: StatCardV2SkeletonProps
     dropdownProps?: SingleSelectProps
+    showBorder?: boolean
 } & HTMLAttributes<HTMLDivElement> &
     StatCardV2Dimensions

package/lib/components/StepperV2/stepperV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveStepperV2Tokens } from './stepperV2.tokens'
+import type { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types'
 
 export const getStepperV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/StepperV2/stepperV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveStepperV2Tokens } from './stepperV2.tokens'
+import type { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types'
 
 export const getStepperV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/StepperV2/stepperV2.tokens.ts

@@ -1,108 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import type { BreakpointType } from '../../breakpoints/breakPoints'
-import type {
-    StepperV2InteractionState,
-    StepperV2StepStatus,
-} from './stepperV2.types'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { Theme } from '../../context/theme.enum'
 import { getStepperV2DarkTokens } from './stepperV2.dark.tokens'
 import { getStepperV2LightTokens } from './stepperV2.light.tokens'
+import type { ResponsiveStepperV2Tokens } from './stepperV2.tokens.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
-}
+export type {
+    StepperV2TokensType,
+    ResponsiveStepperV2Tokens,
+} from './stepperV2.tokens.types'
 
 export const getStepperV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/StepperV2/stepperV2.tokens.types.ts

@@ -0,0 +1,101 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+import type {
+    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/lib/components/TabsV2/TabsV2List.tsx

@@ -343,6 +343,7 @@ const TabsV2List = forwardRef<HTMLDivElement, TabsV2ListProps>(
                 data-element="tabs-list"
                 data-status={expanded ? 'expanded' : 'collapsed'}
                 style={{
+                    width: '100%',
                     position: stickyHeader ? 'sticky' : 'relative',
                     top: stickyHeader ? offsetTop : 'auto',
                     zIndex: stickyHeader
@@ -351,7 +352,10 @@ const TabsV2List = forwardRef<HTMLDivElement, TabsV2ListProps>(
                     backgroundColor: stickyHeader
                         ? stickyHeaderBackground
                         : 'transparent',
-                    borderBottom: 'none',
+                    borderBottom:
+                        variant === TabsV2Variant.UNDERLINE && !hasAnySkeleton
+                            ? tabsToken.tabList.borderBottom[variant]
+                            : 'none',
                     boxShadow: stickyHeader
                         ? tabsToken.tabList.stickyHeader.boxShadow
                         : 'none',

package/lib/components/TabsV2/tabsV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveTabsV2Tokens } from './tabsV2.tokens'
+import type { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types'
 import { TabsV2Variant, TabsV2Size } from './tabsV2.types'
 
 export const getTabsV2DarkTokens = (
@@ -123,6 +123,12 @@ export const getTabsV2DarkTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[700]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[200],
@@ -458,6 +464,12 @@ export const getTabsV2DarkTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[700]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[200],

package/lib/components/TabsV2/tabsV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveTabsV2Tokens } from './tabsV2.tokens'
+import type { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types'
 import { TabsV2Variant, TabsV2Size } from './tabsV2.types'
 
 export const getTabsV2LightTokens = (
@@ -123,6 +123,12 @@ export const getTabsV2LightTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[700],
@@ -458,6 +464,12 @@ export const getTabsV2LightTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[700],

package/lib/components/TabsV2/tabsV2.tokens.ts

@@ -1,103 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getTabsV2LightTokens } from './tabsV2.light.tokens'
 import { getTabsV2DarkTokens } from './tabsV2.dark.tokens'
+import type { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types'
 
-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
-}
+export type {
+    ResponsiveTabsV2Tokens,
+    TabsV2TokensType,
+} from './tabsV2.tokens.types'
 
 export const getTabsV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/TabsV2/tabsV2.tokens.types.ts

@@ -0,0 +1,99 @@
+import type { CSSObject } from 'styled-components'
+import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+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']
+                }
+            }
+        }
+        borderBottom: {
+            [key in TabsV2Variant]: CSSObject['borderBottom']
+        }
+        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
+}