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

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

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

@@ -1,77 +1,14 @@
-import type { CSSObject } from 'styled-components'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getTopbarV2DarkTokens } from './topbarV2.dark.tokens'
 import { getTopbarV2LightTokens } from './topbarV2.light.tokens'
+import type { ResponsiveTopbarV2Tokens } from './topbarV2.tokens.types'
 
-export type TopbarV2State = 'default' | 'hover' | 'active'
-
-export type TopbarV2TokenType = {
-    zIndex: CSSObject['zIndex']
-    height: CSSObject['height']
-    borderBottom: CSSObject['borderBottom']
-    backgroundColor: CSSObject['backgroundColor']
-    backdropFilter: CSSObject['backdropFilter']
-    padding: CSSObject['padding']
-    gap: CSSObject['gap']
-    separator: {
-        width: CSSObject['width']
-        color: CSSObject['color']
-    }
-    toggleButton: {
-        borderRadius: CSSObject['borderRadius']
-        padding: CSSObject['padding']
-        backgroundColor: {
-            [key in TopbarV2State]: CSSObject['backgroundColor']
-        }
-        transition: CSSObject['transition']
-        icon: { size: CSSObject['width']; color: CSSObject['color'] }
-    }
-    actionButton: {
-        borderRadius: CSSObject['borderRadius']
-        padding: CSSObject['padding']
-        minWidth: CSSObject['minWidth']
-        height: CSSObject['height']
-        backgroundColor: {
-            [key in TopbarV2State]: CSSObject['backgroundColor']
-        }
-        transition: CSSObject['transition']
-        icon: { size: CSSObject['width']; color: CSSObject['color'] }
-    }
-    tenantIconButton: {
-        borderRadius: CSSObject['borderRadius']
-        minHeight: CSSObject['minHeight']
-        backgroundColor: {
-            [key in TopbarV2State]: CSSObject['backgroundColor']
-        }
-        transition: CSSObject['transition']
-    }
-    merchantSelectTrigger: {
-        gap: CSSObject['gap']
-        icon: { size: CSSObject['width']; color: CSSObject['color'] }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-        }
-    }
-    leftSection: {
-        gap: CSSObject['gap']
-        maxHeight: CSSObject['maxHeight']
-        divider: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: CSSObject['color']
-        }
-    }
-    rightSection: { gap: CSSObject['gap'] }
-    sidebarSection: { gap: CSSObject['gap'] }
-}
-
-export type ResponsiveTopbarV2Tokens = {
-    [key in keyof BreakpointType]: TopbarV2TokenType
-}
+export type {
+    TopbarV2State,
+    TopbarV2TokenType,
+    ResponsiveTopbarV2Tokens,
+} from './topbarV2.tokens.types'
 
 export const getTopbarV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,70 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type TopbarV2State = 'default' | 'hover' | 'active'
+
+export type TopbarV2TokenType = {
+    zIndex: CSSObject['zIndex']
+    height: CSSObject['height']
+    borderBottom: CSSObject['borderBottom']
+    backgroundColor: CSSObject['backgroundColor']
+    backdropFilter: CSSObject['backdropFilter']
+    padding: CSSObject['padding']
+    gap: CSSObject['gap']
+    separator: {
+        width: CSSObject['width']
+        color: CSSObject['color']
+    }
+    toggleButton: {
+        borderRadius: CSSObject['borderRadius']
+        padding: CSSObject['padding']
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition']
+        icon: { size: CSSObject['width']; color: CSSObject['color'] }
+    }
+    actionButton: {
+        borderRadius: CSSObject['borderRadius']
+        padding: CSSObject['padding']
+        minWidth: CSSObject['minWidth']
+        height: CSSObject['height']
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition']
+        icon: { size: CSSObject['width']; color: CSSObject['color'] }
+    }
+    tenantIconButton: {
+        borderRadius: CSSObject['borderRadius']
+        minHeight: CSSObject['minHeight']
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition']
+    }
+    merchantSelectTrigger: {
+        gap: CSSObject['gap']
+        icon: { size: CSSObject['width']; color: CSSObject['color'] }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+        }
+    }
+    leftSection: {
+        gap: CSSObject['gap']
+        maxHeight: CSSObject['maxHeight']
+        divider: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: CSSObject['color']
+        }
+    }
+    rightSection: { gap: CSSObject['gap'] }
+    sidebarSection: { gap: CSSObject['gap'] }
+}
+
+export type ResponsiveTopbarV2Tokens = {
+    [key in keyof BreakpointType]: TopbarV2TokenType
+}

package/lib/components/Upload/components/FileListDisplay.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
 import Block from '../../Primitives/Block/Block'
 import Text from '../../Text/Text'
-import { Tag, Tooltip, Popover } from '../../../main'
+import { Tag } from '../../Tags'
+import { Tooltip } from '../../Tooltip'
+import { Popover } from '../../Popover'
 import { TagColor, TagVariant, TagShape } from '../../Tags/types'
 import { X, ChevronUp, ChevronDown } from 'lucide-react'
 import type { UploadedFileWithStatus } from '../types'

package/lib/components/shared/layoutTypes.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react'
+import type { BadgeColor, BadgePosition, BadgeSize } from '../Badge/Badge.types'
+
+/**
+ * Layout-level types shared between the Sidebar and Topbar components.
+ *
+ * These live in a neutral module to avoid a circular dependency between
+ * `Sidebar/types` and `Topbar/types` (see issue #1473). Both components import
+ * from here, keeping the type graph a clean DAG.
+ */
+
+export type TenantBadge = {
+    text: string
+    size?: BadgeSize
+    color?: BadgeColor
+    position?: BadgePosition
+}
+
+export type LeftPanelItem = {
+    label: string
+    icon: ReactNode
+    value?: string
+    showInPanel?: boolean
+    badge?: TenantBadge
+}
+
+export type LeftPanelInfo = {
+    items: LeftPanelItem[]
+    selected: string
+    onSelect: (value: string) => void
+    tenantSlot1?: ReactNode
+    tenantSlot2?: ReactNode
+    tenantFooter?: ReactNode
+}
+
+export type MerchantInfo = {
+    items: Array<{
+        label: string
+        value: string
+        icon?: ReactNode
+    }>
+    selected: string
+    onSelect: (value: string) => void
+}

package/lib/context/useComponentToken.ts

@@ -46,9 +46,9 @@ import { ResponsiveMobileNavigationV2Tokens } from '../components/SidebarV2/Side
 import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tokens'
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens'
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens'
-import { ResponsiveAlertV2Tokens } from '../components/AlertV2'
-import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2'
-import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2'
+import type { ResponsiveAlertV2Tokens } from '../components/AlertV2/alertV2.tokens.types'
+import type { ResponsiveAccordionV2Tokens } from '../components/AccordionV2/accordionV2.tokens.types'
+import type { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.tokens.types'
 import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens'
 import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens'
 import type { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens'

package/lib/global-utils/GlobalUtils.ts

@@ -18,7 +18,16 @@ export const capitalizeFirstLetter = (string: string): string => {
     return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
 }
 
-export const getTruncatedText = (text: string, limit?: number) => {
+export type TruncatedTextResult = {
+    truncatedValue: string
+    fullValue: string
+    isTruncated: boolean
+}
+
+export const getTruncatedText = (
+    text: string,
+    limit?: number
+): TruncatedTextResult => {
     const shouldTruncate =
         typeof limit === 'number' && limit > 0 && text.length > limit
 

package/lib/hooks/useTruncationDetection.ts

@@ -12,6 +12,8 @@ export type UseTruncationDetectionOptions = {
     deps?: DependencyList
 }
 
+const DEBOUNCE_MS = 100
+
 export default function useTruncationDetection<
     T extends HTMLElement = HTMLElement,
 >(
@@ -22,13 +24,9 @@ export default function useTruncationDetection<
     const { disabled = false, deps = [] } = options
     const [isTruncated, setIsTruncated] = useState(false)
     const rafRef = useRef<number | null>(null)
+    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-    const checkTruncation = useCallback(() => {
-        if (disabled) {
-            setIsTruncated(false)
-            return
-        }
-
+    const runTruncationCheck = useCallback(() => {
         if (rafRef.current !== null) {
             cancelAnimationFrame(rafRef.current)
         }
@@ -56,11 +54,35 @@ export default function useTruncationDetection<
             setIsTruncated(truncated)
             rafRef.current = null
         })
-    }, [elementRef, selector, disabled])
+    }, [elementRef, selector])
+
+    const checkTruncation = useCallback(() => {
+        if (disabled) {
+            setIsTruncated(false)
+            return
+        }
+        runTruncationCheck()
+    }, [disabled, runTruncationCheck])
+
+    const debouncedCheckTruncation = useCallback(() => {
+        if (disabled) {
+            setIsTruncated(false)
+            return
+        }
+
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current)
+        }
+
+        debounceRef.current = setTimeout(() => {
+            runTruncationCheck()
+            debounceRef.current = null
+        }, DEBOUNCE_MS)
+    }, [disabled, runTruncationCheck])
 
     useResizeObserver(elementRef, () => {
         if (!disabled) {
-            checkTruncation()
+            debouncedCheckTruncation()
         }
     })
 
@@ -79,6 +101,9 @@ export default function useTruncationDetection<
             if (rafRef.current !== null) {
                 cancelAnimationFrame(rafRef.current)
             }
+            if (debounceRef.current !== null) {
+                clearTimeout(debounceRef.current)
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- deps is intentionally spread to allow custom dependencies
     }, [disabled, checkTruncation, ...deps])

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.37-beta.5",
+    "version": "0.0.37-beta.7",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",
@@ -35,6 +35,7 @@
     },
     "scripts": {
         "lint": "eslint .",
+        "check:circular": "node scripts/check-circular.mjs",
         "build": "pnpm lint && vite build",
         "prepublishOnly": "pnpm run build",
         "test": "vitest",
@@ -98,6 +99,8 @@
         "@vitest/coverage-v8": "^3.2.4",
         "@vitest/ui": "^3.2.4",
         "eslint": "^9.25.0",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "eslint-plugin-import-x": "^4.6.1",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-storybook": "^0.12.0",
@@ -105,6 +108,7 @@
         "jest-axe": "^10.0.0",
         "jest-styled-components": "^7.2.0",
         "jsdom": "^26.1.0",
+        "madge": "^8.0.0",
         "prettier": "^3.1.0",
         "react": "^19.2.1",
         "react-dom": "^19.2.1",