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

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/Text/Text.tsx

@@ -119,6 +119,7 @@ const Text = ({
                 fontWeight={fontWeight}
                 color={color ?? 'inherit'}
                 style={style}
+                truncate={truncate}
                 {...rest}
             >
                 {children}

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

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

@@ -1,54 +1,13 @@
-import { type CSSObject } from 'styled-components'
-import { TooltipV2Size } from './tooltipV2.types'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getTooltipV2LightTokens } from './tooltipV2.light.tokens'
 import { getTooltipV2DarkTokens } from './tooltipV2.dark.tokens'
+import type { ResponsiveTooltipV2Tokens } from './tooltipV2.tokens.types'
 
-export type TooltipV2TokensType = {
-    // Pattern: background (size-independent)
-    background: CSSObject['backgroundColor']
-    // Pattern: borderRadius.[size]
-    borderRadius: {
-        [key in TooltipV2Size]: CSSObject['borderRadius']
-    }
-    // Pattern: maxWidth.[size]
-    maxWidth: {
-        [key in TooltipV2Size]: CSSObject['maxWidth']
-    }
-    // Pattern: padding.[size]
-    padding: {
-        [key in TooltipV2Size]: CSSObject['padding']
-    }
-
-    // Pattern: gap.[size]
-    gap: {
-        [key in TooltipV2Size]: CSSObject['gap']
-    }
-    // Pattern: text.color (size-independent) text.fontWeight.[size] text.fontSize.[size] text.lineHeight.[size]
-    text: {
-        // Pattern: text.color (size-independent)
-        color: CSSObject['color']
-        // Pattern: text.fontWeight.[size]
-        fontWeight: {
-            [key in TooltipV2Size]: CSSObject['fontWeight']
-        }
-        // Pattern: text.fontSize.[size]
-        fontSize: {
-            [key in TooltipV2Size]: CSSObject['fontSize']
-        }
-        // Pattern: text.lineHeight.[size]
-        lineHeight: {
-            [key in TooltipV2Size]: CSSObject['lineHeight']
-        }
-    }
-    zIndex: CSSObject['zIndex']
-}
-
-export type ResponsiveTooltipV2Tokens = {
-    [key in keyof BreakpointType]: TooltipV2TokensType
-}
+export type {
+    TooltipV2TokensType,
+    ResponsiveTooltipV2Tokens,
+} from './tooltipV2.tokens.types'
 
 export const getTooltipV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,47 @@
+import { type CSSObject } from 'styled-components'
+import { TooltipV2Size } from './tooltipV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type TooltipV2TokensType = {
+    // Pattern: background (size-independent)
+    background: CSSObject['backgroundColor']
+    // Pattern: borderRadius.[size]
+    borderRadius: {
+        [key in TooltipV2Size]: CSSObject['borderRadius']
+    }
+    // Pattern: maxWidth.[size]
+    maxWidth: {
+        [key in TooltipV2Size]: CSSObject['maxWidth']
+    }
+    // Pattern: padding.[size]
+    padding: {
+        [key in TooltipV2Size]: CSSObject['padding']
+    }
+
+    // Pattern: gap.[size]
+    gap: {
+        [key in TooltipV2Size]: CSSObject['gap']
+    }
+    // Pattern: text.color (size-independent) text.fontWeight.[size] text.fontSize.[size] text.lineHeight.[size]
+    text: {
+        // Pattern: text.color (size-independent)
+        color: CSSObject['color']
+        // Pattern: text.fontWeight.[size]
+        fontWeight: {
+            [key in TooltipV2Size]: CSSObject['fontWeight']
+        }
+        // Pattern: text.fontSize.[size]
+        fontSize: {
+            [key in TooltipV2Size]: CSSObject['fontSize']
+        }
+        // Pattern: text.lineHeight.[size]
+        lineHeight: {
+            [key in TooltipV2Size]: CSSObject['lineHeight']
+        }
+    }
+    zIndex: CSSObject['zIndex']
+}
+
+export type ResponsiveTooltipV2Tokens = {
+    [key in keyof BreakpointType]: TooltipV2TokensType
+}

package/lib/components/Topbar/types.ts

@@ -1,15 +1,9 @@
 import type { ReactNode } from 'react'
-import type { LeftPanelInfo } from '../Sidebar/types'
-
-export type MerchantInfo = {
-    items: Array<{
-        label: string
-        value: string
-        icon?: ReactNode
-    }>
-    selected: string
-    onSelect: (value: string) => void
-}
+import type { LeftPanelInfo, MerchantInfo } from '../shared/layoutTypes'
+
+// Re-exported for backward compatibility: `MerchantInfo` was previously declared
+// here and is part of the public API via `Topbar/index.ts`.
+export type { MerchantInfo } from '../shared/layoutTypes'
 
 export type TopbarProps = {
     children?: ReactNode

package/lib/components/TopbarV2/topbarV2.dark.tokens.ts

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

package/lib/components/TopbarV2/topbarV2.light.tokens.ts

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