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

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

@@ -1,124 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { type BreakpointType } from '../../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getChatInputV2DarkTokens } from './ChatInputV2.dark.tokens'
 import { getChatInputV2LightTokens } from './ChatInputV2.light.tokens'
+import type { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types'
 
-export type ChatInputV2TokensType = {
-    container: {
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-        borderRadius: CSSObject['borderRadius']
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        gap: CSSObject['gap']
-        paddingTop: CSSObject['paddingTop']
-        paddingRight: CSSObject['paddingRight']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        attachedFilesContainer: {
-            gap: CSSObject['gap']
-            overflowMenu: {
-                gap: CSSObject['gap']
-                backgroundColor: {
-                    [key in InputStateV2]: CSSObject['backgroundColor']
-                }
-                borderRadius: CSSObject['borderRadius']
-                padding: CSSObject['padding']
-                top: CSSObject['top']
-                right: CSSObject['right']
-                maxHeight: CSSObject['maxHeight']
-            }
-        }
-        tagContainer: {
-            gap: CSSObject['gap']
-            borderRadius: CSSObject['borderRadius']
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            border: CSSObject['border']
-            backgroundColor: CSSObject['backgroundColor']
-            text: {
-                color: CSSObject['color']
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-            }
-        }
-        inputContainer: {
-            outline: {
-                [key in InputStateV2]: CSSObject['outline']
-            }
-            boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
-            gap: CSSObject['gap']
-            borderRadius: CSSObject['borderRadius']
-            paddingTop: CSSObject['paddingTop']
-            paddingRight: CSSObject['paddingRight']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            border: CSSObject['border']
-            backgroundColor: CSSObject['backgroundColor']
-            input: {
-                color: CSSObject['color']
-                placeholder: CSSObject['color']
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingLeft: CSSObject['paddingLeft']
-                minHeight: CSSObject['minHeight']
-                maxHeight: CSSObject['maxHeight']
-            }
-            actionContainer: {
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-            }
-            topQueriesContainer: {
-                marginRight: CSSObject['marginRight']
-                marginLeft: CSSObject['marginLeft']
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-                borderTop: CSSObject['borderTop']
-                header: {
-                    color: CSSObject['color']
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    textTransform: CSSObject['textTransform']
-                    paddingTop: CSSObject['paddingTop']
-                    paddingRight: CSSObject['paddingRight']
-                    paddingBottom: CSSObject['paddingBottom']
-                    paddingLeft: CSSObject['paddingLeft']
-                    backgroundColor: CSSObject['backgroundColor']
-                }
-                item: {
-                    backgroundColor: {
-                        [key in InputStateV2]: CSSObject['backgroundColor']
-                    }
-                    color: { [key in InputStateV2]: CSSObject['color'] }
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    paddingTop: CSSObject['paddingTop']
-                    paddingRight: CSSObject['paddingRight']
-                    paddingBottom: CSSObject['paddingBottom']
-                    paddingLeft: CSSObject['paddingLeft']
-                    border: CSSObject['border']
-                    transition: CSSObject['transition']
-                    cursor: CSSObject['cursor']
-                    opacity: { [key in InputStateV2]: CSSObject['opacity'] }
-                }
-            }
-        }
-    }
-}
-
-export type ResponsiveChatInputV2TokensType = {
-    [key in keyof BreakpointType]: ChatInputV2TokensType
-}
+export type {
+    ChatInputV2TokensType,
+    ResponsiveChatInputV2TokensType,
+} from './ChatInputV2.tokens.types'
 
 export const getChatInputV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,117 @@
+import type { CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../../breakpoints/breakPoints'
+import { InputStateV2 } from '../inputV2.types'
+
+export type ChatInputV2TokensType = {
+    container: {
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+        borderRadius: CSSObject['borderRadius']
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        attachedFilesContainer: {
+            gap: CSSObject['gap']
+            overflowMenu: {
+                gap: CSSObject['gap']
+                backgroundColor: {
+                    [key in InputStateV2]: CSSObject['backgroundColor']
+                }
+                borderRadius: CSSObject['borderRadius']
+                padding: CSSObject['padding']
+                top: CSSObject['top']
+                right: CSSObject['right']
+                maxHeight: CSSObject['maxHeight']
+            }
+        }
+        tagContainer: {
+            gap: CSSObject['gap']
+            borderRadius: CSSObject['borderRadius']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            border: CSSObject['border']
+            backgroundColor: CSSObject['backgroundColor']
+            text: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+            }
+        }
+        inputContainer: {
+            outline: {
+                [key in InputStateV2]: CSSObject['outline']
+            }
+            boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
+            gap: CSSObject['gap']
+            borderRadius: CSSObject['borderRadius']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            border: CSSObject['border']
+            backgroundColor: CSSObject['backgroundColor']
+            input: {
+                color: CSSObject['color']
+                placeholder: CSSObject['color']
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingLeft: CSSObject['paddingLeft']
+                minHeight: CSSObject['minHeight']
+                maxHeight: CSSObject['maxHeight']
+            }
+            actionContainer: {
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+            }
+            topQueriesContainer: {
+                marginRight: CSSObject['marginRight']
+                marginLeft: CSSObject['marginLeft']
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+                borderTop: CSSObject['borderTop']
+                header: {
+                    color: CSSObject['color']
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    textTransform: CSSObject['textTransform']
+                    paddingTop: CSSObject['paddingTop']
+                    paddingRight: CSSObject['paddingRight']
+                    paddingBottom: CSSObject['paddingBottom']
+                    paddingLeft: CSSObject['paddingLeft']
+                    backgroundColor: CSSObject['backgroundColor']
+                }
+                item: {
+                    backgroundColor: {
+                        [key in InputStateV2]: CSSObject['backgroundColor']
+                    }
+                    color: { [key in InputStateV2]: CSSObject['color'] }
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    paddingTop: CSSObject['paddingTop']
+                    paddingRight: CSSObject['paddingRight']
+                    paddingBottom: CSSObject['paddingBottom']
+                    paddingLeft: CSSObject['paddingLeft']
+                    border: CSSObject['border']
+                    transition: CSSObject['transition']
+                    cursor: CSSObject['cursor']
+                    opacity: { [key in InputStateV2]: CSSObject['opacity'] }
+                }
+            }
+        }
+    }
+}
+
+export type ResponsiveChatInputV2TokensType = {
+    [key in keyof BreakpointType]: ChatInputV2TokensType
+}

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.dark.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens'
+import type { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types'
 
 const focusGlow = (foundationToken: FoundationTokenType) =>
     `0 2px 8px 0 ${foundationToken.colors.primary[50]}, 0 0 0 3px ${foundationToken.colors.primary[50]}`

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.light.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens'
+import type { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types'
 export const getChatInputV2MobileLightTokens = (
     foundationToken: FoundationTokenType
 ): ChatInputV2MobileTokensType => {

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.ts

@@ -1,54 +1,13 @@
-import type { CSSObject } from 'styled-components'
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getChatInputV2MobileDarkTokens } from './ChatInputV2Mobile.dark.tokens'
 import { getChatInputV2MobileLightTokens } from './ChatInputV2Mobile.light.tokens'
+import type { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens.types'
 
-export type Dimensions = {
-    width: CSSObject['width']
-    height: CSSObject['height']
-    minHeight: CSSObject['minHeight']
-    maxHeight: CSSObject['maxHeight']
-    minWidth: CSSObject['minWidth']
-    maxWidth: CSSObject['maxWidth']
-}
-export type ChatInputV2MobileTokensType = {
-    gap: CSSObject['gap']
-    attachmentButtonDimensions: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        border: CSSObject['border']
-        borderRadius: CSSObject['borderRadius']
-        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
-        color: CSSObject['color']
-    }
-    inputContainer: {
-        border: { [key in InputStateV2]: CSSObject['border'] }
-        borderRadius: { [key in InputStateV2]: CSSObject['borderRadius'] }
-        boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
-        paddingLeft: CSSObject['paddingLeft']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        lineHeight: CSSObject['lineHeight']
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: CSSObject['color']
-        placeholder: {
-            color: CSSObject['color']
-        }
-        backgroundColor: CSSObject['backgroundColor']
-    } & Dimensions
-    secondaryAction: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        borderRadius: CSSObject['borderRadius']
-        right: CSSObject['right']
-        bottom: CSSObject['bottom']
-        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
-        color: CSSObject['color']
-    }
-}
+export type {
+    Dimensions,
+    ChatInputV2MobileTokensType,
+} from './ChatInputV2Mobile.tokens.types'
 
 export const getChatInputV2MobileTokens = (
     foundationToken: FoundationTokenType,

package/lib/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.types.ts

@@ -0,0 +1,47 @@
+import type { CSSObject } from 'styled-components'
+import { InputStateV2 } from '../inputV2.types'
+
+export type Dimensions = {
+    width: CSSObject['width']
+    height: CSSObject['height']
+    minHeight: CSSObject['minHeight']
+    maxHeight: CSSObject['maxHeight']
+    minWidth: CSSObject['minWidth']
+    maxWidth: CSSObject['maxWidth']
+}
+export type ChatInputV2MobileTokensType = {
+    gap: CSSObject['gap']
+    attachmentButtonDimensions: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        border: CSSObject['border']
+        borderRadius: CSSObject['borderRadius']
+        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
+        color: CSSObject['color']
+    }
+    inputContainer: {
+        border: { [key in InputStateV2]: CSSObject['border'] }
+        borderRadius: { [key in InputStateV2]: CSSObject['borderRadius'] }
+        boxShadow: { [key in InputStateV2]: CSSObject['boxShadow'] }
+        paddingLeft: CSSObject['paddingLeft']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        lineHeight: CSSObject['lineHeight']
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+        placeholder: {
+            color: CSSObject['color']
+        }
+        backgroundColor: CSSObject['backgroundColor']
+    } & Dimensions
+    secondaryAction: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        borderRadius: CSSObject['borderRadius']
+        right: CSSObject['right']
+        bottom: CSSObject['bottom']
+        backgroundColor: { [key in InputStateV2]: CSSObject['backgroundColor'] }
+        color: CSSObject['color']
+    }
+}

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

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

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

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

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

@@ -1,75 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
-import type { BreakpointType } from '../../../breakpoints/breakPoints'
 import { Theme } from '../../../context/theme.enum'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
 import { getMultiValueInputV2DarkTokens } from './MultiValueInputV2.dark.tokens'
 import { getMultiValueInputV2LightTokens } from './MultiValueInputV2.light.tokens'
-import type {
-    InputFooterV2Tokens,
-    InputLabelsV2Tokens,
-} from '../inputV2.tokens'
+import type { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens.types'
 
-export type MultiValueInputV2TokensType = {
-    gap: CSSObject['gap']
-    borderRadius: CSSObject['borderRadius']
-    topContainer: InputLabelsV2Tokens
-    inputContainer: {
-        offSet: number
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight']
-        }
-        gap: CSSObject['gap']
-        borderRadius?: CSSObject['borderRadius']
-        boxShadow: {
-            [key in InputStateV2]: CSSObject['boxShadow']
-        }
-        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
-        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
-        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
-        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        placeholderColor: {
-            default: CSSObject['color']
-            focus: CSSObject['color']
-            hover: CSSObject['color']
-            error: CSSObject['color']
-            disabled: CSSObject['color']
-        }
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-        closeButton: {
-            width: CSSObject['width']
-        }
-        leftSlot: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-        }
-        rightSlot: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-        }
-        /** Vertical alignment for slot row vs tags (`top` / `marginTop` in layout) */
-        slotAlignTop: {
-            withTags: CSSObject['top']
-            withoutTags: CSSObject['top']
-        }
-    }
-    bottomContainer: InputFooterV2Tokens
-}
-
-export type ResponsiveMultiValueInputV2Tokens = {
-    [key in keyof BreakpointType]: MultiValueInputV2TokensType
-}
+export type {
+    MultiValueInputV2TokensType,
+    ResponsiveMultiValueInputV2Tokens,
+} from './MultiValueInputV2.tokens.types'
 
 export const getMultiValueInputV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,68 @@
+import type { CSSObject } from 'styled-components'
+import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
+import type { BreakpointType } from '../../../breakpoints/breakPoints'
+import type {
+    InputFooterV2Tokens,
+    InputLabelsV2Tokens,
+} from '../inputV2.tokens'
+
+export type MultiValueInputV2TokensType = {
+    gap: CSSObject['gap']
+    borderRadius: CSSObject['borderRadius']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        offSet: number
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight']
+        }
+        gap: CSSObject['gap']
+        borderRadius?: CSSObject['borderRadius']
+        boxShadow: {
+            [key in InputStateV2]: CSSObject['boxShadow']
+        }
+        paddingTop: { [key in InputSizeV2]: CSSObject['paddingTop'] }
+        paddingRight: { [key in InputSizeV2]: CSSObject['paddingRight'] }
+        paddingBottom: { [key in InputSizeV2]: CSSObject['paddingBottom'] }
+        paddingLeft: { [key in InputSizeV2]: CSSObject['paddingLeft'] }
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        placeholderColor: {
+            default: CSSObject['color']
+            focus: CSSObject['color']
+            hover: CSSObject['color']
+            error: CSSObject['color']
+            disabled: CSSObject['color']
+        }
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+        closeButton: {
+            width: CSSObject['width']
+        }
+        leftSlot: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+        }
+        rightSlot: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+        }
+        /** Vertical alignment for slot row vs tags (`top` / `marginTop` in layout) */
+        slotAlignTop: {
+            withTags: CSSObject['top']
+            withoutTags: CSSObject['top']
+        }
+    }
+    bottomContainer: InputFooterV2Tokens
+}
+
+export type ResponsiveMultiValueInputV2Tokens = {
+    [key in keyof BreakpointType]: MultiValueInputV2TokensType
+}

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens'
+import type { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens.types'
 
 /** Dark theme: aligned with TextInputV2 dark — light foreground on gray[900] field, slate-like borders */
 const labelTopContainer = (foundationToken: FoundationTokenType) => ({

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens'
+import type { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens.types'
 
 const labelTopContainer = (foundationToken: FoundationTokenType) => ({
     label: {

package/lib/components/InputsV2/NumberInputV2/NumberInputV2.tsx

@@ -49,7 +49,7 @@ import { filterBlockedProps } from '../../../utils/prop-helpers'
 import { generateAccessibilityIds, setExternalRef } from '../utils/utils'
 import NumberInputV2Stepper from './NumberInputV2Stepper'
 import NumberInputV2Unit from './NumberInputV2Unit'
-import { NumberInputV2Direction } from '.'
+import { NumberInputV2Direction } from './numberInputV2.types'
 
 const NumberInputV2 = forwardRef<HTMLInputElement, NumberInputV2Props>(
     (