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

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

@@ -1,126 +1,15 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
-import { InputSizeV2, InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getNumberInputV2LightTokens } from './NumberInputV2.light.tokens'
 import { getNumberInputV2DarkTokens } from './NumberInputV2.dark.tokens'
-import type {
-    InputFooterV2Tokens,
-    InputLabelsV2Tokens,
-    FloatingLabelsV2Tokens,
-} from '../inputV2.tokens'
-export type NumberInputV2TokensType = {
-    gap: CSSObject['gap']
-    topContainer: InputLabelsV2Tokens
-    inputContainer: {
-        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']
-            }
-        }
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight']
-        }
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-        borderRadius: {
-            [key in InputSizeV2]: CSSObject['borderRadius']
-        }
-        boxShadow: 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']
-        }
-        lineHeight: {
-            [key in InputSizeV2]: CSSObject['lineHeight']
-        }
+import type { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens.types'
 
-        backgroundColor: {
-            [key in InputStateV2]: CSSObject['backgroundColor']
-        }
-        stepperButton: {
-            width: {
-                [key in InputSizeV2]: CSSObject['width']
-            }
-            backgroundColor: {
-                [key in InputStateV2]: CSSObject['backgroundColor']
-            }
-            icon: {
-                color: {
-                    [key in InputStateV2]: CSSObject['color']
-                }
-                width: {
-                    [key in InputSizeV2]: CSSObject['width']
-                }
-            }
-        }
-        slot: {
-            left: {
-                width: {
-                    [key in InputSizeV2]: CSSObject['width']
-                }
-                height: {
-                    [key in InputSizeV2]: CSSObject['height']
-                }
-                margin: {
-                    [key in InputSizeV2]: CSSObject['margin']
-                }
-            }
-            right: {
-                width: {
-                    [key in InputSizeV2]: CSSObject['width']
-                }
-                height: {
-                    [key in InputSizeV2]: CSSObject['height']
-                }
-                margin: {
-                    [key in InputSizeV2]: CSSObject['margin']
-                }
-            }
-        }
-    }
-    unit: {
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight']
-        }
-        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: { [key in InputSizeV2]: CSSObject['borderRadius'] }
-        border: {
-            [key in InputStateV2]: CSSObject['border']
-        }
-        color: {
-            [key in InputStateV2]: CSSObject['color']
-        }
-    }
-    floatingLabels: FloatingLabelsV2Tokens
-    bottomContainer: InputFooterV2Tokens
-}
-export type ResponsiveNumberInputV2Tokens = {
-    [key in keyof BreakpointType]: NumberInputV2TokensType
-}
+// Re-exported for backward compatibility: these token-shape types now live in
+// the leaf module to break the tokens <-> dark/light cycle (see issue #1473).
+export type {
+    NumberInputV2TokensType,
+    ResponsiveNumberInputV2Tokens,
+} from './numberInputV2.tokens.types'
 
 export const getNumberInputV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/InputsV2/NumberInputV2/numberInputV2.tokens.types.ts

@@ -0,0 +1,120 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+import { InputSizeV2, InputStateV2 } from '../inputV2.types'
+import type {
+    InputFooterV2Tokens,
+    InputLabelsV2Tokens,
+    FloatingLabelsV2Tokens,
+} from '../inputV2.tokens'
+
+export type NumberInputV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        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']
+            }
+        }
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+        borderRadius: {
+            [key in InputSizeV2]: CSSObject['borderRadius']
+        }
+        boxShadow: 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']
+        }
+        lineHeight: {
+            [key in InputSizeV2]: CSSObject['lineHeight']
+        }
+
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor']
+        }
+        stepperButton: {
+            width: {
+                [key in InputSizeV2]: CSSObject['width']
+            }
+            backgroundColor: {
+                [key in InputStateV2]: CSSObject['backgroundColor']
+            }
+            icon: {
+                color: {
+                    [key in InputStateV2]: CSSObject['color']
+                }
+                width: {
+                    [key in InputSizeV2]: CSSObject['width']
+                }
+            }
+        }
+        slot: {
+            left: {
+                width: {
+                    [key in InputSizeV2]: CSSObject['width']
+                }
+                height: {
+                    [key in InputSizeV2]: CSSObject['height']
+                }
+                margin: {
+                    [key in InputSizeV2]: CSSObject['margin']
+                }
+            }
+            right: {
+                width: {
+                    [key in InputSizeV2]: CSSObject['width']
+                }
+                height: {
+                    [key in InputSizeV2]: CSSObject['height']
+                }
+                margin: {
+                    [key in InputSizeV2]: CSSObject['margin']
+                }
+            }
+        }
+    }
+    unit: {
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight']
+        }
+        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: { [key in InputSizeV2]: CSSObject['borderRadius'] }
+        border: {
+            [key in InputStateV2]: CSSObject['border']
+        }
+        color: {
+            [key in InputStateV2]: CSSObject['color']
+        }
+    }
+    floatingLabels: FloatingLabelsV2Tokens
+    bottomContainer: InputFooterV2Tokens
+}
+export type ResponsiveNumberInputV2Tokens = {
+    [key in keyof BreakpointType]: NumberInputV2TokensType
+}

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

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

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

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

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

@@ -1,40 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import type { BreakpointType } from '../../../breakpoints/breakPoints'
-import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens'
-import type { InputStateV2 } from '../inputV2.types'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
 import { Theme } from '../../../context/theme.enum'
 import { getOTPInputV2DarkTokens } from './OTPInputV2.dark.tokens'
 import { getOTPInputV2LightTokens } from './OTPInputV2.light.tokens'
+import type { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens.types'
 
-export type OTPInputV2TokensType = {
-    gap: CSSObject['gap']
-    topContainer: InputLabelsV2Tokens
-    inputContainer: {
-        gap: CSSObject['gap']
-        input: {
-            height: CSSObject['height']
-            width: CSSObject['width']
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: {
-                [key in InputStateV2]: CSSObject['color']
-            }
-            borderRadius: CSSObject['borderRadius']
-            border: {
-                [key in InputStateV2]: CSSObject['border']
-            }
-            backgroundColor: {
-                [key in InputStateV2]: CSSObject['backgroundColor']
-            }
-        }
-    }
-    bottomContainer: InputFooterV2Tokens
-}
-
-export type ResponsiveOTPInputV2Tokens = {
-    [key in keyof BreakpointType]: OTPInputV2TokensType
-}
+export type {
+    OTPInputV2TokensType,
+    ResponsiveOTPInputV2Tokens,
+} from './OTPInputV2.tokens.types'
 
 export const getOTPInputV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,36 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../../breakpoints/breakPoints'
+import type {
+    InputFooterV2Tokens,
+    InputLabelsV2Tokens,
+} from '../inputV2.tokens'
+import type { InputStateV2 } from '../inputV2.types'
+
+export type OTPInputV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: InputLabelsV2Tokens
+    inputContainer: {
+        gap: CSSObject['gap']
+        input: {
+            height: CSSObject['height']
+            width: CSSObject['width']
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+            borderRadius: CSSObject['borderRadius']
+            border: {
+                [key in InputStateV2]: CSSObject['border']
+            }
+            backgroundColor: {
+                [key in InputStateV2]: CSSObject['backgroundColor']
+            }
+        }
+    }
+    bottomContainer: InputFooterV2Tokens
+}
+
+export type ResponsiveOTPInputV2Tokens = {
+    [key in keyof BreakpointType]: OTPInputV2TokensType
+}

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

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

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

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

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

@@ -1,99 +1,14 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../../tokens/theme.token'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 
-import type { InputSizeV2, InputStateV2 } from '../inputV2.types'
 import { Theme } from '../../../context/theme.enum'
 import { getSearchInputV2DarkTokens } from './SearchInputV2.dark.tokens'
 import { getSearchInputV2LightTokens } from './SearchInputV2.light.tokens'
+import type { ResponsiveSearchInputV2Tokens } from './SearchInputV2.tokens.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
-}
+export type {
+    SearchInputV2TokensType,
+    ResponsiveSearchInputV2Tokens,
+} from './SearchInputV2.tokens.types'
 
 export const getSearchInputV2Tokens = (
     foundationTokens: FoundationTokenType,

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,