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

package/lib/components/InputsV2/TextAreaV2/TextAreaV2.tokens.types.ts

@@ -0,0 +1,62 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens'
+import { InputStateV2, InputSizeV2 } from '../inputV2.types'
+
+export type TextAreaV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        gap: CSSObject['gap']
+        placeholder: {
+            transition: CSSObject['transition']
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+        }
+        lineHeight: {
+            [key in InputSizeV2]: CSSObject['lineHeight']
+        }
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        padding: {
+            top: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+            right: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+            bottom: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+            left: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+        }
+        borderRadius: CSSObject['borderRadius']
+        boxShadow: CSSObject['boxShadow']
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+    }
+    bottomContainer: InputFooterV2Tokens
+}
+
+export type ResponsiveTextAreaV2Tokens = {
+    [key in keyof BreakpointType]: TextAreaV2TokensType
+}

package/lib/components/InputsV2/TextInputV2/TextInputV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveTextInputV2Tokens } from './TextInputV2.tokens'
+import type { ResponsiveTextInputV2Tokens } from './TextInputV2.tokens.types'
 
 export const getTextInputV2DarkTokens = (
     foundationTokens: FoundationTokenType

package/lib/components/InputsV2/TextInputV2/TextInputV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveTextInputV2Tokens } from './TextInputV2.tokens'
+import type { ResponsiveTextInputV2Tokens } from './TextInputV2.tokens.types'
 
 export const getTextInputV2LightTokens = (
     foundationTokens: FoundationTokenType

package/lib/components/InputsV2/TextInputV2/TextInputV2.tokens.ts

@@ -1,142 +1,13 @@
-import { CSSObject } from 'styled-components'
-import { InputSizeV2, InputStateV2 } from '../inputV2.types'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { Theme } from '../../../context/theme.enum'
 import { getTextInputV2DarkTokens } from './TextInputV2.dark.tokens'
 import { getTextInputV2LightTokens } from './TextInputV2.light.tokens'
+import type { ResponsiveTextInputV2Tokens } from './TextInputV2.tokens.types'
 
-export type TextInputV2TokensType = {
-    gap: CSSObject['gap']
-    topContainer: {
-        label: {
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-        }
-        subLabel: {
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-        }
-        required: {
-            color: CSSObject['color']
-        }
-        helpIcon: {
-            width: {
-                [key in InputSizeV2]: CSSObject['width']
-            }
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-        }
-    }
-    inputContainer: {
-        gap: CSSObject['gap']
-        placeholder: {
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-        }
-        inputText: {
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-        }
-        borderRadius: {
-            [key in InputSizeV2]: CSSObject['borderRadius']
-        }
-        boxShadow: CSSObject['boxShadow']
-        padding: {
-            top: {
-                [key in InputSizeV2]: CSSObject['padding']
-            }
-            right: {
-                [key in InputSizeV2]: CSSObject['padding']
-            }
-            bottom: {
-                [key in InputSizeV2]: CSSObject['padding']
-            }
-            left: {
-                [key in InputSizeV2]: CSSObject['padding']
-            }
-        }
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-    }
-    bottomContainer: {
-        hintText: {
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-        }
-        errorMessage: {
-            fontSize: {
-                [key in InputSizeV2]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in InputSizeV2]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in InputSizeV2]: CSSObject['lineHeight']
-            }
-            color: CSSObject['color']
-        }
-    }
-}
-
-export type ResponsiveTextInputV2Tokens = {
-    [key in keyof BreakpointType]: TextInputV2TokensType
-}
+export type {
+    TextInputV2TokensType,
+    ResponsiveTextInputV2Tokens,
+} from './TextInputV2.tokens.types'
 
 export const getTextInputV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/InputsV2/TextInputV2/TextInputV2.tokens.types.ts

@@ -0,0 +1,135 @@
+import { CSSObject } from 'styled-components'
+import { InputSizeV2, InputStateV2 } from '../inputV2.types'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+export type TextInputV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: {
+        label: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        subLabel: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        required: {
+            color: CSSObject['color']
+        }
+        helpIcon: {
+            width: {
+                [key in InputSizeV2]: CSSObject['width']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+    }
+    inputContainer: {
+        gap: CSSObject['gap']
+        placeholder: {
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+        }
+        inputText: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        borderRadius: {
+            [key in InputSizeV2]: CSSObject['borderRadius']
+        }
+        boxShadow: CSSObject['boxShadow']
+        padding: {
+            top: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+            right: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+            bottom: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+            left: {
+                [key in InputSizeV2]: CSSObject['padding']
+            }
+        }
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+    }
+    bottomContainer: {
+        hintText: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        errorMessage: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: CSSObject['color']
+        }
+    }
+}
+
+export type ResponsiveTextInputV2Tokens = {
+    [key in keyof BreakpointType]: TextInputV2TokensType
+}

package/lib/components/KeyValuePairV2/keyValuePairV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveKeyValuePairV2Tokens } from './keyValuePairV2.tokens'
+import type { ResponsiveKeyValuePairV2Tokens } from './keyValuePairV2.tokens.types'
 import { KeyValuePairV2Size } from './keyValuePairV2.types'
 
 export const getKeyValuePairV2DarkTokens = (

package/lib/components/KeyValuePairV2/keyValuePairV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveKeyValuePairV2Tokens } from './keyValuePairV2.tokens'
+import type { ResponsiveKeyValuePairV2Tokens } from './keyValuePairV2.tokens.types'
 import { KeyValuePairV2Size } from './keyValuePairV2.types'
 
 export const getKeyValuePairV2LightTokens = (

package/lib/components/KeyValuePairV2/keyValuePairV2.tokens.ts

@@ -1,34 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { KeyValuePairV2Size } from './keyValuePairV2.types'
-import type { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { Theme } from '../../context/theme.enum'
 import { getKeyValuePairV2LightTokens } from './keyValuePairV2.light.tokens'
 import { getKeyValuePairV2DarkTokens } from './keyValuePairV2.dark.tokens'
+import type { ResponsiveKeyValuePairV2Tokens } from './keyValuePairV2.tokens.types'
 
-export type KeyValuePairV2TokensType = {
-    gap: {
-        [key in 'vertical' | 'horizontal']: CSSObject['gap']
-    }
-    key: {
-        color: CSSObject['color']
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        gap: CSSObject['gap']
-    }
-    value: {
-        color: CSSObject['color']
-        fontSize: {
-            [key in KeyValuePairV2Size]: CSSObject['fontSize']
-        }
-        fontWeight: CSSObject['fontWeight']
-        gap: CSSObject['gap']
-    }
-}
-
-export type ResponsiveKeyValuePairV2Tokens = {
-    [key in keyof BreakpointType]: KeyValuePairV2TokensType
-}
+export type {
+    KeyValuePairV2TokensType,
+    ResponsiveKeyValuePairV2Tokens,
+} from './keyValuePairV2.tokens.types'
 
 export const getKeyValuePairV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/KeyValuePairV2/keyValuePairV2.tokens.types.ts

@@ -0,0 +1,27 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+import { KeyValuePairV2Size } from './keyValuePairV2.types'
+
+export type KeyValuePairV2TokensType = {
+    gap: {
+        [key in 'vertical' | 'horizontal']: CSSObject['gap']
+    }
+    key: {
+        color: CSSObject['color']
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        gap: CSSObject['gap']
+    }
+    value: {
+        color: CSSObject['color']
+        fontSize: {
+            [key in KeyValuePairV2Size]: CSSObject['fontSize']
+        }
+        fontWeight: CSSObject['fontWeight']
+        gap: CSSObject['gap']
+    }
+}
+
+export type ResponsiveKeyValuePairV2Tokens = {
+    [key in keyof BreakpointType]: KeyValuePairV2TokensType
+}

package/lib/components/Menu/Menu.tsx

@@ -7,7 +7,7 @@ import {
     MenuSide,
     type MenuItemType,
 } from './types'
-import React, { useState, useRef, useMemo, useCallback } from 'react'
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'
 import { filterMenuGroups } from './utils'
 import MenuItem from './MenuItem'
 import Block from '../Primitives/Block/Block'
@@ -115,6 +115,14 @@ const Menu = ({
         onOpenChange?.(newOpen)
     }
 
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current)
+            }
+        }
+    }, [])
+
     const handleOutsideInteraction = useCallback((e: Event) => {
         if (justOpenedRef.current) {
             e.preventDefault()

package/lib/components/Menu/MenuItem.tsx

@@ -1,6 +1,7 @@
 import * as RadixMenu from '@radix-ui/react-dropdown-menu'
 import React from 'react'
 import { MenuItemActionType, type MenuItemType, MenuItemVariant } from './types'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: MenuItem renders SubMenu which renders MenuItem
 import { SubMenu } from './SubMenu'
 import Block from '../Primitives/Block/Block'
 import Text from '../Text/Text'

package/lib/components/Menu/SubMenu.tsx

@@ -3,6 +3,7 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu'
 import { MenuItemActionType, type MenuItemType, MenuItemVariant } from './types'
 import Block from '../Primitives/Block/Block'
 import Text from '../Text/Text'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: SubMenu renders MenuItem which renders SubMenu
 import MenuItem from './MenuItem'
 import { ChevronRightIcon, Search } from 'lucide-react'
 import { type MenuItemStates, type MenuTokensType } from './menu.tokens'

package/lib/components/Menu/types.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
 
 export enum MenuAlignment {

package/lib/components/MenuV2/menuV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveMenuV2TokensType } from './menuV2.tokens'
+import type { ResponsiveMenuV2TokensType } from './menuV2.tokens.types'
 import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types'
 
 export const getMenuV2DarkTokens = (

package/lib/components/MenuV2/menuV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveMenuV2TokensType } from './menuV2.tokens'
+import type { ResponsiveMenuV2TokensType } from './menuV2.tokens.types'
 import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types'
 
 export const getMenuV2LightTokens = (

package/lib/components/MenuV2/menuV2.tokens.ts

@@ -1,119 +1,15 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import type { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
-import type { SelectV2ItemStates } from '../SelectV2/selectV2.tokenStates'
-import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types'
+import type { ResponsiveMenuV2TokensType } from './menuV2.tokens.types'
 import { getMenuV2LightTokens } from './menuV2.light.tokens'
 import { getMenuV2DarkTokens } from './menuV2.dark.tokens'
 
 export type { SelectV2ItemStates as MenuV2ItemStates } from '../SelectV2/selectV2.tokenStates'
 
-type StateToken<T> = Record<SelectV2ItemStates, T>
-
-type MenuV2VariantToken<T> = {
-    [MenuV2ItemVariant.DEFAULT]: T
-    [MenuV2ItemVariant.ACTION]: {
-        [MenuV2ItemActionType.PRIMARY]: T
-        [MenuV2ItemActionType.DANGER]: T
-    }
-}
-
-export type MenuV2TokensType = {
-    backgroundColor: CSSObject['backgroundColor']
-    border: CSSObject['border']
-    borderRadius: CSSObject['borderRadius']
-    boxShadow: CSSObject['boxShadow']
-    zIndex: CSSObject['zIndex']
-
-    minWidth: CSSObject['minWidth']
-    maxWidth: CSSObject['maxWidth']
-
-    paddingTop: CSSObject['paddingTop']
-    paddingRight: CSSObject['paddingRight']
-    paddingBottom: CSSObject['paddingBottom']
-    paddingLeft: CSSObject['paddingLeft']
-
-    searchIcon: {
-        width: CSSObject['width']
-    }
-
-    group: {
-        label: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            lineHeight: CSSObject['lineHeight']
-            color: CSSObject['color']
-
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-
-            marginTop: CSSObject['marginTop']
-            marginRight: CSSObject['marginRight']
-            marginBottom: CSSObject['marginBottom']
-            marginLeft: CSSObject['marginLeft']
-        }
-        item: {
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-
-            marginTop: CSSObject['marginTop']
-            marginRight: CSSObject['marginRight']
-            marginBottom: CSSObject['marginBottom']
-            marginLeft: CSSObject['marginLeft']
-
-            gap: CSSObject['gap']
-            borderRadius: CSSObject['borderRadius']
-
-            backgroundColor: MenuV2VariantToken<
-                StateToken<CSSObject['backgroundColor']>
-            >
-
-            text: {
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-                lineHeight: CSSObject['lineHeight']
-
-                color: MenuV2VariantToken<StateToken<CSSObject['color']>>
-
-                subText: {
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    lineHeight: CSSObject['lineHeight']
-
-                    color: MenuV2VariantToken<StateToken<CSSObject['color']>>
-                }
-
-                leftSlot: {
-                    maxWidth: CSSObject['maxWidth']
-                    maxHeight: CSSObject['maxHeight']
-                }
-
-                rightChevron: {
-                    color: CSSObject['color']
-                    width: CSSObject['width']
-                }
-            }
-        }
-    }
-    separator: {
-        color: CSSObject['color']
-        height: CSSObject['height']
-
-        marginTop: CSSObject['marginTop']
-        marginRight: CSSObject['marginRight']
-        marginBottom: CSSObject['marginBottom']
-        marginLeft: CSSObject['marginLeft']
-    }
-}
-
-export type ResponsiveMenuV2TokensType = {
-    [key in keyof BreakpointType]: MenuV2TokensType
-}
+export type {
+    MenuV2TokensType,
+    ResponsiveMenuV2TokensType,
+} from './menuV2.tokens.types'
 
 export const getMenuV2Tokens = (
     foundationToken: FoundationTokenType,