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

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

@@ -0,0 +1,92 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
+
+export type SearchInputV2TokensType = {
+    gap: CSSObject['gap']
+    label: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+    }
+    subLabel: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+    }
+    hintText: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+    }
+    errorMessage: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+    }
+    required: {
+        color: CSSObject['color']
+    }
+    inputContainer: {
+        paddingTop: {
+            [key in InputSizeV2]: CSSObject['paddingTop']
+        }
+        paddingRight: {
+            [key in InputSizeV2]: CSSObject['paddingRight']
+        }
+        paddingBottom: {
+            [key in InputSizeV2]: CSSObject['paddingBottom']
+        }
+        paddingLeft: {
+            [key in InputSizeV2]: CSSObject['paddingLeft']
+        }
+        borderRadius: CSSObject['borderRadius']
+        borderBottom: {
+            [key in InputStateV2]: CSSObject['borderBottom']
+        }
+        outline: CSSObject['outline']
+        boxShadow: CSSObject['boxShadow']
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        placeholderColor: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        slot: {
+            left: {
+                top: CSSObject['top']
+                left: CSSObject['left']
+                bottom: CSSObject['bottom']
+            }
+            right: {
+                top: CSSObject['top']
+                right: CSSObject['right']
+                bottom: CSSObject['bottom']
+            }
+            transition: CSSObject['transition']
+            transform: CSSObject['transform']
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+    }
+    icon: {
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        width: CSSObject['width']
+    }
+}
+
+export type ResponsiveSearchInputV2Tokens = {
+    [key in keyof BreakpointType]: SearchInputV2TokensType
+}

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

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

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

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

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

@@ -1,69 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
-import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens'
-import { InputStateV2, InputSizeV2 } from '../inputV2.types'
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { Theme } from '../../../context/theme.enum'
 import { getTextAreaV2DarkTokens } from './TextAreaV2.dark.tokens'
 import { getTextAreaV2LightTokens } from './TextAreaV2.light.tokens'
+import type { ResponsiveTextAreaV2Tokens } from './TextAreaV2.tokens.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
-}
+export type {
+    TextAreaV2TokensType,
+    ResponsiveTextAreaV2Tokens,
+} from './TextAreaV2.tokens.types'
 
 export const getTextAreaV2Tokens = (
     foundationToken: FoundationTokenType,

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/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 = (