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

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

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

@@ -1,77 +1,10 @@
-import type { CSSObject } from 'styled-components'
-import { TagColor, TagShape, TagSize, TagVariant } from './types'
-import { type BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { getTagLightTokens } from './tag.light.tokens'
 import { getTagDarkTokens } from './tag.dark.tokens'
 import { Theme } from '../../context/theme.enum'
+import type { ResponsiveTagTokens } from './tag.tokens.types'
 
-/**
- * Tag Tokens following the pattern: [target].CSSProp.[size].[variant].[subType]
- *
- * Structure:
- * - target: container | text (defines what element the token applies to)
- * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
- * - size: xs | sm | md | lg (only for size-dependent properties like padding, fontSize, height)
- * - variant: noFill | attentive | subtle (tag variant)
- * - subType: neutral | primary | success | error | warning | purple (tag color)
- *
- * Size-independent properties: backgroundColor, border, color
- * Size-dependent properties: borderRadius, padding, fontSize, fontWeight, gap, height
- */
-export type TagTokensType = Readonly<{
-    minWidth: CSSObject['minWidth']
-    maxWidth: CSSObject['maxWidth']
-    width: CSSObject['width']
-
-    gap: CSSObject['gap']
-    // Pattern: backgroundColor.[variant].[subType]
-    backgroundColor: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['backgroundColor']
-        }
-    }
-    // Pattern: borderRadius.[size].[shape] (size and shape dependent)
-    borderRadius: {
-        [key in TagSize]: {
-            [key in TagShape]: CSSObject['borderRadius']
-        }
-    }
-    // Pattern: padding.[size] (size-dependent)
-    padding: {
-        [key in TagSize]: CSSObject['padding']
-    }
-    // Pattern: border.[variant].[subType]
-    border: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['border']
-        }
-    }
-    // Pattern: height.[size] (size-dependent)
-    // height: {
-    //     [key in TagSize]: CSSObject['height']
-    // }
-    text: {
-        // Pattern: text.color.[variant].[subType]
-        color: {
-            [key in TagVariant]: {
-                [key in TagColor]: CSSObject['color']
-            }
-        }
-        // Pattern: text.fontSize.[size] (size-dependent)
-        fontSize: {
-            [key in TagSize]: CSSObject['fontSize']
-        }
-        // Pattern: text.fontWeight.[size] (size-dependent)
-        fontWeight: {
-            [key in TagSize]: CSSObject['fontWeight']
-        }
-    }
-}>
-
-export type ResponsiveTagTokens = {
-    [key in keyof BreakpointType]: TagTokensType
-}
+export type { ResponsiveTagTokens, TagTokensType } from './tag.tokens.types'
 
 export const getTagTokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,70 @@
+import type { CSSObject } from 'styled-components'
+import { TagColor, TagShape, TagSize, TagVariant } from './types'
+import { type BreakpointType } from '../../breakpoints/breakPoints'
+
+/**
+ * Tag Tokens following the pattern: [target].CSSProp.[size].[variant].[subType]
+ *
+ * Structure:
+ * - target: container | text (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
+ * - size: xs | sm | md | lg (only for size-dependent properties like padding, fontSize, height)
+ * - variant: noFill | attentive | subtle (tag variant)
+ * - subType: neutral | primary | success | error | warning | purple (tag color)
+ *
+ * Size-independent properties: backgroundColor, border, color
+ * Size-dependent properties: borderRadius, padding, fontSize, fontWeight, gap, height
+ */
+export type TagTokensType = Readonly<{
+    minWidth: CSSObject['minWidth']
+    maxWidth: CSSObject['maxWidth']
+    width: CSSObject['width']
+
+    gap: CSSObject['gap']
+    // Pattern: backgroundColor.[variant].[subType]
+    backgroundColor: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['backgroundColor']
+        }
+    }
+    // Pattern: borderRadius.[size].[shape] (size and shape dependent)
+    borderRadius: {
+        [key in TagSize]: {
+            [key in TagShape]: CSSObject['borderRadius']
+        }
+    }
+    // Pattern: padding.[size] (size-dependent)
+    padding: {
+        [key in TagSize]: CSSObject['padding']
+    }
+    // Pattern: border.[variant].[subType]
+    border: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['border']
+        }
+    }
+    // Pattern: height.[size] (size-dependent)
+    // height: {
+    //     [key in TagSize]: CSSObject['height']
+    // }
+    text: {
+        // Pattern: text.color.[variant].[subType]
+        color: {
+            [key in TagVariant]: {
+                [key in TagColor]: CSSObject['color']
+            }
+        }
+        // Pattern: text.fontSize.[size] (size-dependent)
+        fontSize: {
+            [key in TagSize]: CSSObject['fontSize']
+        }
+        // Pattern: text.fontWeight.[size] (size-dependent)
+        fontWeight: {
+            [key in TagSize]: CSSObject['fontWeight']
+        }
+    }
+}>
+
+export type ResponsiveTagTokens = {
+    [key in keyof BreakpointType]: TagTokensType
+}

package/lib/components/Timeline/timeline.dark.token.ts

@@ -1,11 +1,9 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { TimelineNodeStatus } from './types'
-import type { TimelineTokensType } from './timeline.token'
-import type { BreakpointType } from '../../breakpoints/breakPoints'
-
-type ResponsiveTimelineTokens = {
-    [key in keyof BreakpointType]: TimelineTokensType
-}
+import type {
+    TimelineTokensType,
+    ResponsiveTimelineTokens,
+} from './timeline.tokens.types'
 
 const buildTokens = (
     foundationToken: FoundationTokenType

package/lib/components/Timeline/timeline.light.token.ts

@@ -1,11 +1,9 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { TimelineNodeStatus } from './types'
-import type { TimelineTokensType } from './timeline.token'
-import type { BreakpointType } from '../../breakpoints/breakPoints'
-
-type ResponsiveTimelineTokens = {
-    [key in keyof BreakpointType]: TimelineTokensType
-}
+import type {
+    TimelineTokensType,
+    ResponsiveTimelineTokens,
+} from './timeline.tokens.types'
 
 const buildTokens = (
     foundationToken: FoundationTokenType

package/lib/components/Timeline/timeline.token.ts

@@ -1,145 +1,14 @@
-import type { CSSObject } from 'styled-components'
-import { TimelineNodeStatus } from './types'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { type BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getTimelineDarkTokens } from './timeline.dark.token'
 import { getTimelineLightTokens } from './timeline.light.token'
+import type { ResponsiveTimelineTokens } from './timeline.tokens.types'
 
-export type TimelineStatusColors = {
-    [key in TimelineNodeStatus]: CSSObject['backgroundColor']
-}
-
-export type TimelineTokensType = {
-    track: {
-        width: CSSObject['width']
-        backgroundColor: CSSObject['backgroundColor']
-        left: CSSObject['left']
-    }
-
-    indicator: {
-        left: CSSObject['left']
-        width: CSSObject['width']
-        height: CSSObject['height']
-    }
-
-    statusColors: TimelineStatusColors
-
-    label: {
-        paddingLeft: CSSObject['paddingLeft']
-        marginBottom: CSSObject['marginBottom']
-        circle: {
-            left: CSSObject['left']
-            width: CSSObject['width']
-            height: CSSObject['height']
-            backgroundColor: CSSObject['backgroundColor']
-            border: CSSObject['border']
-        }
-        mask: {
-            backgroundColor: CSSObject['backgroundColor']
-            height: CSSObject['height']
-        }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-        }
-    }
-
-    header: {
-        row: {
-            paddingLeft: CSSObject['paddingLeft']
-            marginBottom: CSSObject['marginBottom']
-            gap: CSSObject['gap']
-        }
-        section: {
-            marginBottom: CSSObject['marginBottom']
-        }
-        title: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-        }
-        timestamp: {
-            fontSize: CSSObject['fontSize']
-            color: CSSObject['color']
-            gap: CSSObject['gap']
-        }
-    }
-
-    subsection: {
-        paddingLeft: CSSObject['paddingLeft']
-        marginTop: CSSObject['marginTop']
-        marginBottom: CSSObject['marginBottom']
-        marginLeft: CSSObject['marginLeft']
-        rootIndicator: {
-            top: CSSObject['top']
-        }
-        headerRow: {
-            gap: CSSObject['gap']
-        }
-        titleRow: {
-            gap: CSSObject['gap']
-        }
-        datetimeGroup: {
-            gap: CSSObject['gap']
-        }
-        title: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-            gap: CSSObject['gap']
-        }
-        description: {
-            fontSize: CSSObject['fontSize']
-            color: CSSObject['color']
-            marginTop: CSSObject['marginTop']
-            marginBottom: CSSObject['marginBottom']
-            lineHeight: CSSObject['lineHeight']
-        }
-        datetime: {
-            fontSize: CSSObject['fontSize']
-            color: CSSObject['color']
-            gap: CSSObject['gap']
-        }
-        connector: {
-            left: CSSObject['left']
-            width: CSSObject['width']
-            height: CSSObject['height']
-            color: CSSObject['color']
-        }
-        avatar: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            marginTop: CSSObject['marginTop']
-        }
-        user: {
-            fontSize: CSSObject['fontSize']
-            color: CSSObject['color']
-            marginLeft: CSSObject['marginLeft']
-        }
-        time: {
-            fontSize: CSSObject['fontSize']
-            color: CSSObject['color']
-        }
-        separator: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            color: CSSObject['color']
-            marginLeft: CSSObject['marginLeft']
-            marginRight: CSSObject['marginRight']
-        }
-    }
-
-    showMore: {
-        paddingLeft: CSSObject['paddingLeft']
-        marginTop: CSSObject['marginTop']
-    }
-}
-
-export type ResponsiveTimelineTokens = {
-    [key in keyof BreakpointType]: TimelineTokensType
-}
+export type {
+    ResponsiveTimelineTokens,
+    TimelineTokensType,
+    TimelineStatusColors,
+} from './timeline.tokens.types'
 
 export const getTimelineTokens = (
     foundationToken: FoundationTokenType,

package/lib/components/Timeline/timeline.tokens.types.ts

@@ -0,0 +1,138 @@
+import type { CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../breakpoints/breakPoints'
+import { TimelineNodeStatus } from './types'
+
+export type TimelineStatusColors = {
+    [key in TimelineNodeStatus]: CSSObject['backgroundColor']
+}
+
+export type TimelineTokensType = {
+    track: {
+        width: CSSObject['width']
+        backgroundColor: CSSObject['backgroundColor']
+        left: CSSObject['left']
+    }
+
+    indicator: {
+        left: CSSObject['left']
+        width: CSSObject['width']
+        height: CSSObject['height']
+    }
+
+    statusColors: TimelineStatusColors
+
+    label: {
+        paddingLeft: CSSObject['paddingLeft']
+        marginBottom: CSSObject['marginBottom']
+        circle: {
+            left: CSSObject['left']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            backgroundColor: CSSObject['backgroundColor']
+            border: CSSObject['border']
+        }
+        mask: {
+            backgroundColor: CSSObject['backgroundColor']
+            height: CSSObject['height']
+        }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+        }
+    }
+
+    header: {
+        row: {
+            paddingLeft: CSSObject['paddingLeft']
+            marginBottom: CSSObject['marginBottom']
+            gap: CSSObject['gap']
+        }
+        section: {
+            marginBottom: CSSObject['marginBottom']
+        }
+        title: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+        }
+        timestamp: {
+            fontSize: CSSObject['fontSize']
+            color: CSSObject['color']
+            gap: CSSObject['gap']
+        }
+    }
+
+    subsection: {
+        paddingLeft: CSSObject['paddingLeft']
+        marginTop: CSSObject['marginTop']
+        marginBottom: CSSObject['marginBottom']
+        marginLeft: CSSObject['marginLeft']
+        rootIndicator: {
+            top: CSSObject['top']
+        }
+        headerRow: {
+            gap: CSSObject['gap']
+        }
+        titleRow: {
+            gap: CSSObject['gap']
+        }
+        datetimeGroup: {
+            gap: CSSObject['gap']
+        }
+        title: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+            gap: CSSObject['gap']
+        }
+        description: {
+            fontSize: CSSObject['fontSize']
+            color: CSSObject['color']
+            marginTop: CSSObject['marginTop']
+            marginBottom: CSSObject['marginBottom']
+            lineHeight: CSSObject['lineHeight']
+        }
+        datetime: {
+            fontSize: CSSObject['fontSize']
+            color: CSSObject['color']
+            gap: CSSObject['gap']
+        }
+        connector: {
+            left: CSSObject['left']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            color: CSSObject['color']
+        }
+        avatar: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+            marginTop: CSSObject['marginTop']
+        }
+        user: {
+            fontSize: CSSObject['fontSize']
+            color: CSSObject['color']
+            marginLeft: CSSObject['marginLeft']
+        }
+        time: {
+            fontSize: CSSObject['fontSize']
+            color: CSSObject['color']
+        }
+        separator: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+            color: CSSObject['color']
+            marginLeft: CSSObject['marginLeft']
+            marginRight: CSSObject['marginRight']
+        }
+    }
+
+    showMore: {
+        paddingLeft: CSSObject['paddingLeft']
+        marginTop: CSSObject['marginTop']
+    }
+}
+
+export type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType
+}

package/lib/components/TooltipV2/tooltipV2.dark.tokens.ts

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

package/lib/components/TooltipV2/tooltipV2.light.tokens.ts

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