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

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,6 +78,7 @@ export type StatCardV2Props = {
     value?: string
     progressValue?: number
     helpIconText?: string
+    valueTooltip?: ReactNode
     change?: StatCardV2Change
     subtitle?: string
     options?: ChartV2Options

package/lib/components/Stepper/VerticalStepper.tsx

@@ -440,7 +440,7 @@ const StepComponent = forwardRef<
                         display="flex"
                         justifyContent="space-between"
                         gap={8}
-                        alignItems="flex-start"
+                        alignItems="center"
                     >
                         <Block
                             display="flex"
@@ -566,6 +566,16 @@ const StepComponent = forwardRef<
                                 />
                             </Block>
                         )}
+                        {step.slot && (
+                            <Block
+                                flexShrink={0}
+                                onClick={(e: React.MouseEvent) => {
+                                    e.stopPropagation()
+                                }}
+                            >
+                                {step.slot}
+                            </Block>
+                        )}
                     </Block>
 
                     {isExpanded &&
@@ -623,184 +633,212 @@ const StepComponent = forwardRef<
                                             }
                                         >
                                             <Block
-                                                data-element="substep"
-                                                data-id={`Substep ${index + 1}: ${subStep.title}${
-                                                    isSubstepCompleted
-                                                        ? ', completed'
-                                                        : isSubstepCurrent
-                                                          ? ', current'
-                                                          : isSubstepDisabled
-                                                            ? ', disabled'
-                                                            : isSubstepSkipped
-                                                              ? ', skipped'
-                                                              : ', pending'
-                                                }`}
-                                                data-numeric={subStep.id}
-                                                ref={(el) => {
-                                                    substepRefs.current[index] =
-                                                        el
-                                                }}
-                                                role={
-                                                    clickable
-                                                        ? 'button'
-                                                        : 'group'
-                                                }
-                                                tabIndex={
-                                                    clickable &&
-                                                    !isSubstepDisabled
-                                                        ? 0
-                                                        : -1
-                                                }
-                                                aria-label={`Substep ${index + 1}: ${subStep.title}${
-                                                    isSubstepCompleted
-                                                        ? ', completed'
-                                                        : isSubstepCurrent
-                                                          ? ', current'
-                                                          : isSubstepDisabled
-                                                            ? ', disabled'
-                                                            : isSubstepSkipped
-                                                              ? ', skipped'
-                                                              : ', pending'
-                                                }`}
-                                                aria-disabled={
-                                                    isSubstepDisabled
-                                                        ? 'true'
-                                                        : undefined
-                                                }
-                                                aria-current={
-                                                    isSubstepCurrent
-                                                        ? 'step'
-                                                        : undefined
-                                                }
-                                                style={{
-                                                    cursor: clickable
-                                                        ? 'pointer'
-                                                        : 'default',
-                                                }}
-                                                onClick={
-                                                    clickable && onSubstepClick
-                                                        ? (
-                                                              e: React.MouseEvent
-                                                          ) => {
-                                                              e.preventDefault()
-                                                              e.stopPropagation()
-                                                              onSubstepClick(
-                                                                  stepIndex,
-                                                                  index
-                                                              )
-                                                          }
-                                                        : undefined
-                                                }
-                                                onKeyDown={(
-                                                    event: React.KeyboardEvent
-                                                ) => {
-                                                    if (isSubstepDisabled)
-                                                        return
-
-                                                    switch (event.key) {
-                                                        case 'Enter':
-                                                        case ' ': {
-                                                            if (
-                                                                clickable &&
-                                                                onSubstepClick
-                                                            ) {
+                                                display="flex"
+                                                justifyContent="space-between"
+                                                alignItems="center"
+                                                gap={8}
+                                            >
+                                                <Block
+                                                    data-element="substep"
+                                                    data-id={`Substep ${index + 1}: ${subStep.title}${
+                                                        isSubstepCompleted
+                                                            ? ', completed'
+                                                            : isSubstepCurrent
+                                                              ? ', current'
+                                                              : isSubstepDisabled
+                                                                ? ', disabled'
+                                                                : isSubstepSkipped
+                                                                  ? ', skipped'
+                                                                  : ', pending'
+                                                    }`}
+                                                    data-numeric={subStep.id}
+                                                    ref={(el) => {
+                                                        substepRefs.current[
+                                                            index
+                                                        ] = el
+                                                    }}
+                                                    role={
+                                                        clickable
+                                                            ? 'button'
+                                                            : 'group'
+                                                    }
+                                                    tabIndex={
+                                                        clickable &&
+                                                        !isSubstepDisabled
+                                                            ? 0
+                                                            : -1
+                                                    }
+                                                    aria-label={`Substep ${index + 1}: ${subStep.title}${
+                                                        isSubstepCompleted
+                                                            ? ', completed'
+                                                            : isSubstepCurrent
+                                                              ? ', current'
+                                                              : isSubstepDisabled
+                                                                ? ', disabled'
+                                                                : isSubstepSkipped
+                                                                  ? ', skipped'
+                                                                  : ', pending'
+                                                    }`}
+                                                    aria-disabled={
+                                                        isSubstepDisabled
+                                                            ? 'true'
+                                                            : undefined
+                                                    }
+                                                    aria-current={
+                                                        isSubstepCurrent
+                                                            ? 'step'
+                                                            : undefined
+                                                    }
+                                                    style={{
+                                                        flex: 1,
+                                                        cursor: clickable
+                                                            ? 'pointer'
+                                                            : 'default',
+                                                    }}
+                                                    onClick={
+                                                        clickable &&
+                                                        onSubstepClick
+                                                            ? (
+                                                                  e: React.MouseEvent
+                                                              ) => {
+                                                                  e.preventDefault()
+                                                                  e.stopPropagation()
+                                                                  onSubstepClick(
+                                                                      stepIndex,
+                                                                      index
+                                                                  )
+                                                              }
+                                                            : undefined
+                                                    }
+                                                    onKeyDown={(
+                                                        event: React.KeyboardEvent
+                                                    ) => {
+                                                        if (isSubstepDisabled)
+                                                            return
+
+                                                        switch (event.key) {
+                                                            case 'Enter':
+                                                            case ' ': {
+                                                                if (
+                                                                    clickable &&
+                                                                    onSubstepClick
+                                                                ) {
+                                                                    event.preventDefault()
+                                                                    event.stopPropagation()
+                                                                    onSubstepClick(
+                                                                        stepIndex,
+                                                                        index
+                                                                    )
+                                                                }
+                                                                break
+                                                            }
+                                                            case 'ArrowUp': {
                                                                 event.preventDefault()
-                                                                event.stopPropagation()
-                                                                onSubstepClick(
-                                                                    stepIndex,
-                                                                    index
-                                                                )
+                                                                const prevIndex =
+                                                                    Math.max(
+                                                                        index -
+                                                                            1,
+                                                                        0
+                                                                    )
+                                                                if (
+                                                                    step.substeps &&
+                                                                    !step
+                                                                        .substeps[
+                                                                        prevIndex
+                                                                    ]
+                                                                        ?.disabled &&
+                                                                    substepRefs
+                                                                        .current[
+                                                                        prevIndex
+                                                                    ]
+                                                                ) {
+                                                                    setFocusedSubstepIndex(
+                                                                        prevIndex
+                                                                    )
+                                                                    substepRefs.current[
+                                                                        prevIndex
+                                                                    ]?.focus()
+                                                                }
+                                                                break
                                                             }
-                                                            break
-                                                        }
-                                                        case 'ArrowUp': {
-                                                            event.preventDefault()
-                                                            const prevIndex =
-                                                                Math.max(
-                                                                    index - 1,
-                                                                    0
-                                                                )
-                                                            if (
-                                                                step.substeps &&
-                                                                !step.substeps[
-                                                                    prevIndex
-                                                                ]?.disabled &&
-                                                                substepRefs
-                                                                    .current[
-                                                                    prevIndex
-                                                                ]
-                                                            ) {
-                                                                setFocusedSubstepIndex(
-                                                                    prevIndex
-                                                                )
-                                                                substepRefs.current[
-                                                                    prevIndex
-                                                                ]?.focus()
+                                                            case 'ArrowDown': {
+                                                                event.preventDefault()
+                                                                const nextIndex =
+                                                                    Math.min(
+                                                                        index +
+                                                                            1,
+                                                                        step.substeps
+                                                                            ? step
+                                                                                  .substeps
+                                                                                  .length -
+                                                                                  1
+                                                                            : 0
+                                                                    )
+                                                                if (
+                                                                    step.substeps &&
+                                                                    !step
+                                                                        .substeps[
+                                                                        nextIndex
+                                                                    ]
+                                                                        ?.disabled &&
+                                                                    substepRefs
+                                                                        .current[
+                                                                        nextIndex
+                                                                    ]
+                                                                ) {
+                                                                    setFocusedSubstepIndex(
+                                                                        nextIndex
+                                                                    )
+                                                                    substepRefs.current[
+                                                                        nextIndex
+                                                                    ]?.focus()
+                                                                }
+                                                                break
                                                             }
-                                                            break
-                                                        }
-                                                        case 'ArrowDown': {
-                                                            event.preventDefault()
-                                                            const nextIndex =
-                                                                Math.min(
-                                                                    index + 1,
-                                                                    step.substeps
-                                                                        ? step
-                                                                              .substeps
-                                                                              .length -
-                                                                              1
-                                                                        : 0
-                                                                )
-                                                            if (
-                                                                step.substeps &&
-                                                                !step.substeps[
-                                                                    nextIndex
-                                                                ]?.disabled &&
-                                                                substepRefs
-                                                                    .current[
-                                                                    nextIndex
-                                                                ]
-                                                            ) {
+                                                            case 'ArrowLeft':
+                                                            case 'ArrowRight': {
+                                                                // Move back to parent step
+                                                                event.preventDefault()
                                                                 setFocusedSubstepIndex(
-                                                                    nextIndex
+                                                                    null
                                                                 )
-                                                                substepRefs.current[
-                                                                    nextIndex
-                                                                ]?.focus()
+                                                                if (
+                                                                    ref &&
+                                                                    typeof ref !==
+                                                                        'function'
+                                                                ) {
+                                                                    ref.current?.focus()
+                                                                }
+                                                                break
                                                             }
-                                                            break
                                                         }
-                                                        case 'ArrowLeft':
-                                                        case 'ArrowRight': {
-                                                            // Move back to parent step
-                                                            event.preventDefault()
-                                                            setFocusedSubstepIndex(
-                                                                null
-                                                            )
-                                                            if (
-                                                                ref &&
-                                                                typeof ref !==
-                                                                    'function'
-                                                            ) {
-                                                                ref.current?.focus()
-                                                            }
-                                                            break
-                                                        }
-                                                    }
-                                                }}
-                                                onFocus={() => {
-                                                    setFocusedSubstepIndex(
-                                                        index
-                                                    )
-                                                }}
-                                            >
-                                                <Text
-                                                    fontSize={12}
-                                                    fontWeight={500}
-                                                    color={textColor}
+                                                    }}
+                                                    onFocus={() => {
+                                                        setFocusedSubstepIndex(
+                                                            index
+                                                        )
+                                                    }}
                                                 >
-                                                    {subStep.title}
-                                                </Text>
+                                                    <Text
+                                                        fontSize={12}
+                                                        fontWeight={500}
+                                                        color={textColor}
+                                                    >
+                                                        {subStep.title}
+                                                    </Text>
+                                                </Block>
+                                                {subStep.slot && (
+                                                    <Block
+                                                        flexShrink={0}
+                                                        onClick={(
+                                                            e: React.MouseEvent
+                                                        ) => {
+                                                            e.stopPropagation()
+                                                        }}
+                                                    >
+                                                        {subStep.slot}
+                                                    </Block>
+                                                )}
                                             </Block>
                                         </Block>
                                     )

package/lib/components/Stepper/types.ts

@@ -26,6 +26,7 @@ export type SubStep = {
     title: string
     status?: StepState
     disabled?: boolean
+    slot?: ReactNode
 }
 
 export type Step = {
@@ -35,6 +36,7 @@ export type Step = {
     disabled?: boolean
     description?: string
     icon?: ReactNode
+    slot?: ReactNode
     substeps?: SubStep[]
     isExpandable?: boolean
     isExpanded?: boolean

package/lib/components/StepperV2/Stepper/Steps.tsx

@@ -62,6 +62,9 @@ export const Steps = forwardRef<
         const [isExpanded, setIsExpanded] = useState<boolean>(
             step.isExpanded ?? hasSubsteps
         )
+        const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+            null
+        )
 
         useEffect(() => {
             if (step.isExpanded !== undefined) {
@@ -84,6 +87,14 @@ export const Steps = forwardRef<
             return () => cancelAnimationFrame(animationFrameId)
         }, [isExpanded, hasSubsteps, step.substeps?.length])
 
+        useEffect(() => {
+            return () => {
+                if (focusTimeoutRef.current) {
+                    clearTimeout(focusTimeoutRef.current)
+                }
+            }
+        }, [])
+
         const stepState = getStepState(step, isCompleted, isCurrent)
         const isClickable = Boolean(clickable && !step.disabled && onClick)
 
@@ -192,7 +203,10 @@ export const Steps = forwardRef<
                     if (!isHorizontal && hasSubsteps && !isExpanded) {
                         event.preventDefault()
                         toggleExpand()
-                        setTimeout(() => focusFirstSubstep(), 100)
+                        focusTimeoutRef.current = setTimeout(
+                            () => focusFirstSubstep(),
+                            100
+                        )
                         return
                     }
                     if (!isHorizontal && hasSubsteps && isExpanded) {

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