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

package/lib/components/StepperV2/stepperV2.tokens.ts

@@ -1,108 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import type { BreakpointType } from '../../breakpoints/breakPoints'
-import type {
-    StepperV2InteractionState,
-    StepperV2StepStatus,
-} from './stepperV2.types'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { Theme } from '../../context/theme.enum'
 import { getStepperV2DarkTokens } from './stepperV2.dark.tokens'
 import { getStepperV2LightTokens } from './stepperV2.light.tokens'
+import type { ResponsiveStepperV2Tokens } from './stepperV2.tokens.types'
 
-export type StepperV2TokensType = {
-    container: {
-        gap: CSSObject['gap']
-        step: {
-            circle: {
-                [key in StepperV2StepStatus]: {
-                    [key in StepperV2InteractionState]: {
-                        backgroundColor: CSSObject['backgroundColor']
-                        borderColor: CSSObject['borderColor']
-                        borderWidth: CSSObject['borderWidth']
-                        borderRadius: CSSObject['borderRadius']
-                        size: CSSObject['width']
-                        transition: CSSObject['transition']
-                        outline: CSSObject['outline']
-                        outlineOffset: CSSObject['outlineOffset']
-                        paddingTop: CSSObject['paddingTop']
-                        paddingRight: CSSObject['paddingRight']
-                        paddingBottom: CSSObject['paddingBottom']
-                        paddingLeft: CSSObject['paddingLeft']
-                    }
-                }
-            }
-            icon: {
-                [key in StepperV2StepStatus]: {
-                    [key in StepperV2InteractionState]: {
-                        color: CSSObject['color']
-                    }
-                }
-            }
-        }
-        connector: {
-            line: {
-                color: CSSObject['color']
-                height: CSSObject['height']
-            }
-        }
-        subConnector: {
-            line: {
-                color: CSSObject['color']
-                height: CSSObject['height']
-            }
-            dot: {
-                border: CSSObject['border']
-                borderRadius: CSSObject['borderRadius']
-                height: CSSObject['height']
-                width: CSSObject['width']
-                paddingTop: CSSObject['paddingTop']
-                paddingRight: CSSObject['paddingRight']
-                paddingBottom: CSSObject['paddingBottom']
-                paddingLeft: CSSObject['paddingLeft']
-            }
-            expander: {
-                icon: {
-                    color: CSSObject['color']
-                }
-                width: CSSObject['width']
-            }
-            text: {
-                [key in StepperV2StepStatus]: {
-                    color: CSSObject['color']
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                }
-            }
-        }
-        title: {
-            text: {
-                [key in StepperV2StepStatus]: {
-                    [key in StepperV2InteractionState]: {
-                        color: CSSObject['color']
-                        fontSize: CSSObject['fontSize']
-                        fontWeight: CSSObject['fontWeight']
-                        gap: CSSObject['gap']
-                        paddingTop: CSSObject['paddingTop']
-                        paddingRight: CSSObject['paddingRight']
-                        paddingBottom: CSSObject['paddingBottom']
-                        paddingLeft: CSSObject['paddingLeft']
-                    }
-                }
-            }
-        }
-        description: {
-            text: {
-                color: CSSObject['color']
-                fontSize: CSSObject['fontSize']
-                fontWeight: CSSObject['fontWeight']
-            }
-        }
-    }
-}
-
-export type ResponsiveStepperV2Tokens = {
-    [key in keyof BreakpointType]: StepperV2TokensType
-}
+export type {
+    StepperV2TokensType,
+    ResponsiveStepperV2Tokens,
+} from './stepperV2.tokens.types'
 
 export const getStepperV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/StepperV2/stepperV2.tokens.types.ts

@@ -0,0 +1,101 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+import type {
+    StepperV2InteractionState,
+    StepperV2StepStatus,
+} from './stepperV2.types'
+
+export type StepperV2TokensType = {
+    container: {
+        gap: CSSObject['gap']
+        step: {
+            circle: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        backgroundColor: CSSObject['backgroundColor']
+                        borderColor: CSSObject['borderColor']
+                        borderWidth: CSSObject['borderWidth']
+                        borderRadius: CSSObject['borderRadius']
+                        size: CSSObject['width']
+                        transition: CSSObject['transition']
+                        outline: CSSObject['outline']
+                        outlineOffset: CSSObject['outlineOffset']
+                        paddingTop: CSSObject['paddingTop']
+                        paddingRight: CSSObject['paddingRight']
+                        paddingBottom: CSSObject['paddingBottom']
+                        paddingLeft: CSSObject['paddingLeft']
+                    }
+                }
+            }
+            icon: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        color: CSSObject['color']
+                    }
+                }
+            }
+        }
+        connector: {
+            line: {
+                color: CSSObject['color']
+                height: CSSObject['height']
+            }
+        }
+        subConnector: {
+            line: {
+                color: CSSObject['color']
+                height: CSSObject['height']
+            }
+            dot: {
+                border: CSSObject['border']
+                borderRadius: CSSObject['borderRadius']
+                height: CSSObject['height']
+                width: CSSObject['width']
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+            }
+            expander: {
+                icon: {
+                    color: CSSObject['color']
+                }
+                width: CSSObject['width']
+            }
+            text: {
+                [key in StepperV2StepStatus]: {
+                    color: CSSObject['color']
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                }
+            }
+        }
+        title: {
+            text: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        color: CSSObject['color']
+                        fontSize: CSSObject['fontSize']
+                        fontWeight: CSSObject['fontWeight']
+                        gap: CSSObject['gap']
+                        paddingTop: CSSObject['paddingTop']
+                        paddingRight: CSSObject['paddingRight']
+                        paddingBottom: CSSObject['paddingBottom']
+                        paddingLeft: CSSObject['paddingLeft']
+                    }
+                }
+            }
+        }
+        description: {
+            text: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+            }
+        }
+    }
+}
+
+export type ResponsiveStepperV2Tokens = {
+    [key in keyof BreakpointType]: StepperV2TokensType
+}

package/lib/components/TabsV2/tabsV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveTabsV2Tokens } from './tabsV2.tokens'
+import type { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types'
 import { TabsV2Variant, TabsV2Size } from './tabsV2.types'
 
 export const getTabsV2DarkTokens = (

package/lib/components/TabsV2/tabsV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveTabsV2Tokens } from './tabsV2.tokens'
+import type { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types'
 import { TabsV2Variant, TabsV2Size } from './tabsV2.types'
 
 export const getTabsV2LightTokens = (

package/lib/components/TabsV2/tabsV2.tokens.ts

@@ -1,103 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getTabsV2LightTokens } from './tabsV2.light.tokens'
 import { getTabsV2DarkTokens } from './tabsV2.dark.tokens'
+import type { ResponsiveTabsV2Tokens } from './tabsV2.tokens.types'
 
-export type TabsV2TokensType = {
-    width: CSSObject['width']
-    outline: CSSObject['outline']
-    tabList: {
-        gap: CSSObject['gap']
-        backgroundColor: {
-            [key in TabsV2Variant]: CSSObject['backgroundColor']
-        }
-        borderRadius: {
-            [key in TabsV2Size]: {
-                [key in TabsV2Variant]: CSSObject['borderRadius']
-            }
-        }
-        padding: {
-            [key in TabsV2Size]: {
-                [key in TabsV2Variant]: {
-                    top: CSSObject['paddingTop']
-                    right: CSSObject['paddingRight']
-                    bottom: CSSObject['paddingBottom']
-                    left: CSSObject['paddingLeft']
-                }
-            }
-        }
-        activeIndicator: {
-            height: CSSObject['height']
-            color: CSSObject['color']
-            position: {
-                bottom: CSSObject['bottom']
-            }
-            transition: CSSObject['transition']
-            zIndex: CSSObject['zIndex']
-        }
-        stickyHeader: {
-            boxShadow: CSSObject['boxShadow']
-            zIndex: CSSObject['zIndex']
-        }
-        trigger: {
-            gap: CSSObject['gap']
-            icon: {
-                maxWidth: CSSObject['maxWidth']
-            }
-            backgroundColor: {
-                [key in TabsV2Variant]: {
-                    [key in TabsV2State]: CSSObject['backgroundColor']
-                }
-            }
-            borderRadius: {
-                [key in TabsV2Size]: {
-                    [key in TabsV2Variant]: CSSObject['borderRadius']
-                }
-            }
-            border: {
-                [key in TabsV2Variant]: CSSObject['border']
-            }
-            padding: {
-                [key in TabsV2Size]: {
-                    [key in TabsV2Variant]: {
-                        top: CSSObject['paddingTop']
-                        right: CSSObject['paddingRight']
-                        bottom: CSSObject['paddingBottom']
-                        left: CSSObject['paddingLeft']
-                    }
-                }
-            }
-            text: {
-                color: {
-                    [key in TabsV2Variant]: {
-                        [key in TabsV2State]: CSSObject['color']
-                    }
-                }
-                fontSize: {
-                    [key in TabsV2Size]: CSSObject['fontSize']
-                }
-                fontWeight: {
-                    [key in TabsV2Size]: CSSObject['fontWeight']
-                }
-            }
-            closeButton: {
-                width: CSSObject['width']
-                borderRadius: CSSObject['borderRadius']
-                backgroundColor: {
-                    [key in TabsV2State]: CSSObject['backgroundColor']
-                }
-            }
-            transition: CSSObject['transition']
-        }
-    }
-}
-
-export type ResponsiveTabsV2Tokens = {
-    [key in keyof BreakpointType]: TabsV2TokensType
-}
+export type {
+    ResponsiveTabsV2Tokens,
+    TabsV2TokensType,
+} from './tabsV2.tokens.types'
 
 export const getTabsV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/TabsV2/tabsV2.tokens.types.ts

@@ -0,0 +1,96 @@
+import type { CSSObject } from 'styled-components'
+import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type TabsV2TokensType = {
+    width: CSSObject['width']
+    outline: CSSObject['outline']
+    tabList: {
+        gap: CSSObject['gap']
+        backgroundColor: {
+            [key in TabsV2Variant]: CSSObject['backgroundColor']
+        }
+        borderRadius: {
+            [key in TabsV2Size]: {
+                [key in TabsV2Variant]: CSSObject['borderRadius']
+            }
+        }
+        padding: {
+            [key in TabsV2Size]: {
+                [key in TabsV2Variant]: {
+                    top: CSSObject['paddingTop']
+                    right: CSSObject['paddingRight']
+                    bottom: CSSObject['paddingBottom']
+                    left: CSSObject['paddingLeft']
+                }
+            }
+        }
+        activeIndicator: {
+            height: CSSObject['height']
+            color: CSSObject['color']
+            position: {
+                bottom: CSSObject['bottom']
+            }
+            transition: CSSObject['transition']
+            zIndex: CSSObject['zIndex']
+        }
+        stickyHeader: {
+            boxShadow: CSSObject['boxShadow']
+            zIndex: CSSObject['zIndex']
+        }
+        trigger: {
+            gap: CSSObject['gap']
+            icon: {
+                maxWidth: CSSObject['maxWidth']
+            }
+            backgroundColor: {
+                [key in TabsV2Variant]: {
+                    [key in TabsV2State]: CSSObject['backgroundColor']
+                }
+            }
+            borderRadius: {
+                [key in TabsV2Size]: {
+                    [key in TabsV2Variant]: CSSObject['borderRadius']
+                }
+            }
+            border: {
+                [key in TabsV2Variant]: CSSObject['border']
+            }
+            padding: {
+                [key in TabsV2Size]: {
+                    [key in TabsV2Variant]: {
+                        top: CSSObject['paddingTop']
+                        right: CSSObject['paddingRight']
+                        bottom: CSSObject['paddingBottom']
+                        left: CSSObject['paddingLeft']
+                    }
+                }
+            }
+            text: {
+                color: {
+                    [key in TabsV2Variant]: {
+                        [key in TabsV2State]: CSSObject['color']
+                    }
+                }
+                fontSize: {
+                    [key in TabsV2Size]: CSSObject['fontSize']
+                }
+                fontWeight: {
+                    [key in TabsV2Size]: CSSObject['fontWeight']
+                }
+            }
+            closeButton: {
+                width: CSSObject['width']
+                borderRadius: CSSObject['borderRadius']
+                backgroundColor: {
+                    [key in TabsV2State]: CSSObject['backgroundColor']
+                }
+            }
+            transition: CSSObject['transition']
+        }
+    }
+}
+
+export type ResponsiveTabsV2Tokens = {
+    [key in keyof BreakpointType]: TabsV2TokensType
+}

package/lib/components/TagV2/tagV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveTagV2Tokens } from './tagV2.tokens'
+import type { ResponsiveTagV2Tokens } from './tagV2.tokens.types'
 
 export const getTagV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/TagV2/tagV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveTagV2Tokens } from './tagV2.tokens'
+import type { ResponsiveTagV2Tokens } from './tagV2.tokens.types'
 
 export const getTagV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/TagV2/tagV2.tokens.ts

@@ -1,77 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import {
-    TagV2Color,
-    TagV2Size,
-    TagV2Type,
-    TagV2SubType,
-    TagV2PaddingDirection,
-} from './TagV2.types'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { Theme } from '../../context/theme.enum'
 import { getTagV2DarkTokens } from './tagV2.dark.tokens'
 import { getTagV2LightTokens } from './tagV2.light.tokens'
+import type { ResponsiveTagV2Tokens } from './tagV2.tokens.types'
 
-//Tokens Pattern: component.[target].CSSProp.[size].[variant/type].[subVariant/subType].[state].value
-
-export type TagV2TokensType = Readonly<{
-    border: {
-        [key in TagV2Type]: {
-            [key in TagV2Color]: CSSObject['border']
-        }
-    }
-    borderRadius: {
-        [key in TagV2Size]: {
-            [key in TagV2SubType]: CSSObject['borderRadius']
-        }
-    }
-    backgroundColor: {
-        [key in TagV2Type]: {
-            [key in TagV2Color]: CSSObject['backgroundColor']
-        }
-    }
-    height: {
-        [key in TagV2Size]: CSSObject['height']
-    }
-    padding: {
-        [key in TagV2PaddingDirection]: {
-            [key in TagV2Size]: CSSObject['padding']
-        }
-    }
-    gap: CSSObject['gap']
-
-    leftSlot: {
-        maxHeight: {
-            [key in TagV2Size]: CSSObject['maxHeight']
-        }
-    }
-    rightSlot: {
-        maxHeight: {
-            [key in TagV2Size]: CSSObject['maxHeight']
-        }
-    }
-
-    text: {
-        color: {
-            [key in TagV2Type]: {
-                [key in TagV2Color]: CSSObject['color']
-            }
-        }
-        fontSize: {
-            [key in TagV2Size]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in TagV2Size]: CSSObject['fontWeight']
-        }
-        lineHeight: {
-            [key in TagV2Size]: CSSObject['lineHeight']
-        }
-    }
-}>
-
-export type ResponsiveTagV2Tokens = {
-    [key in keyof BreakpointType]: TagV2TokensType
-}
+export type {
+    ResponsiveTagV2Tokens,
+    TagV2TokensType,
+} from './tagV2.tokens.types'
 
 export const getTagV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/TagV2/tagV2.tokens.types.ts

@@ -0,0 +1,70 @@
+import type { CSSObject } from 'styled-components'
+import {
+    TagV2Color,
+    TagV2Size,
+    TagV2Type,
+    TagV2SubType,
+    TagV2PaddingDirection,
+} from './TagV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+//Tokens Pattern: component.[target].CSSProp.[size].[variant/type].[subVariant/subType].[state].value
+
+export type TagV2TokensType = Readonly<{
+    border: {
+        [key in TagV2Type]: {
+            [key in TagV2Color]: CSSObject['border']
+        }
+    }
+    borderRadius: {
+        [key in TagV2Size]: {
+            [key in TagV2SubType]: CSSObject['borderRadius']
+        }
+    }
+    backgroundColor: {
+        [key in TagV2Type]: {
+            [key in TagV2Color]: CSSObject['backgroundColor']
+        }
+    }
+    height: {
+        [key in TagV2Size]: CSSObject['height']
+    }
+    padding: {
+        [key in TagV2PaddingDirection]: {
+            [key in TagV2Size]: CSSObject['padding']
+        }
+    }
+    gap: CSSObject['gap']
+
+    leftSlot: {
+        maxHeight: {
+            [key in TagV2Size]: CSSObject['maxHeight']
+        }
+    }
+    rightSlot: {
+        maxHeight: {
+            [key in TagV2Size]: CSSObject['maxHeight']
+        }
+    }
+
+    text: {
+        color: {
+            [key in TagV2Type]: {
+                [key in TagV2Color]: CSSObject['color']
+            }
+        }
+        fontSize: {
+            [key in TagV2Size]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in TagV2Size]: CSSObject['fontWeight']
+        }
+        lineHeight: {
+            [key in TagV2Size]: CSSObject['lineHeight']
+        }
+    }
+}>
+
+export type ResponsiveTagV2Tokens = {
+    [key in keyof BreakpointType]: TagV2TokensType
+}

package/lib/components/Tags/tag.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveTagTokens } from './tag.tokens'
+import type { ResponsiveTagTokens } from './tag.tokens.types'
 
 export const getTagDarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/Tags/tag.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveTagTokens } from './tag.tokens'
+import type { ResponsiveTagTokens } from './tag.tokens.types'
 
 export const getTagLightTokens = (
     foundationToken: FoundationTokenType