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

package/lib/components/SelectorV2/SwitchV2/switchV2.tokens.types.ts

@@ -0,0 +1,68 @@
+import { type CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../../breakpoints/breakPoints'
+import {
+    type SelectorV2Size,
+    type SelectorV2InteractionState,
+} from '../selectorV2.types'
+
+export type SwitchV2Variant = 'checked' | 'unchecked'
+
+export type SwitchV2TokensType = {
+    gap: CSSObject['gap']
+    switch: {
+        height: {
+            [key in SelectorV2Size]: CSSObject['height']
+        }
+        width: {
+            [key in SelectorV2Size]: CSSObject['width']
+        }
+        backgroundColor: {
+            [key in SwitchV2Variant]: {
+                [key in SelectorV2InteractionState]: CSSObject['backgroundColor']
+            }
+        }
+        thumb: {
+            backgroundColor: CSSObject['backgroundColor']
+            border: CSSObject['border']
+            width: {
+                [key in SelectorV2Size]: CSSObject['width']
+            }
+            height: {
+                [key in SelectorV2Size]: CSSObject['height']
+            }
+            outline: CSSObject['outline']
+        }
+    }
+    content: {
+        gap: CSSObject['gap']
+        label: {
+            gap: CSSObject['gap']
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color']
+            }
+            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
+            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
+            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight']
+                }
+            }
+        }
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color']
+            }
+            fontSize: { [key in SelectorV2Size]: CSSObject['fontSize'] }
+            fontWeight: { [key in SelectorV2Size]: CSSObject['fontWeight'] }
+            lineHeight: { [key in SelectorV2Size]: CSSObject['lineHeight'] }
+        }
+        required: {
+            color: CSSObject['color']
+        }
+    }
+}
+
+export type ResponsiveSwitchV2Tokens = {
+    [key in keyof BreakpointType]: SwitchV2TokensType
+}

package/lib/components/SelectorV2/SwitchV2/switchV2.types.ts

@@ -1,9 +1,12 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react'
-import { SwitchV2TokensType } from './switchV2.tokens'
+import {
+    type SwitchV2TokensType,
+    type SwitchV2Variant,
+} from './switchV2.tokens.types'
 import { CSSObject } from 'styled-components'
 import { SelectorV2Size } from '../selectorV2.types'
 
-export type SwitchV2Variant = 'checked' | 'unchecked'
+export type { SwitchV2Variant }
 
 export type SwitchV2ButtonProps = {
     id: string

package/lib/components/Sidebar/Sidebar.tsx

@@ -323,12 +323,22 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                 passive: true,
             })
 
-            const handleResize = () => setTimeout(updateBlurState, 50)
+            let resizeTimeoutId: ReturnType<typeof setTimeout> | null = null
+
+            const handleResize = () => {
+                if (resizeTimeoutId) {
+                    clearTimeout(resizeTimeoutId)
+                }
+                resizeTimeoutId = setTimeout(updateBlurState, 50)
+            }
             window.addEventListener('resize', handleResize, { passive: true })
 
             return () => {
                 scrollingElement.removeEventListener('scroll', updateBlurState)
                 window.removeEventListener('resize', handleResize)
+                if (resizeTimeoutId) {
+                    clearTimeout(resizeTimeoutId)
+                }
             }
         }, [isExpanded, data, isHovering])
 
@@ -479,7 +489,7 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
                                             defaultActiveItem={
                                                 defaultActiveItem
                                             }
-                                            iconOnlyMode={!isHovering}
+                                            iconOnlyMode={false}
                                             footer={footer}
                                         />
                                     </Block>

package/lib/components/Sidebar/SidebarContent.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import Block from '../Primitives/Block/Block'
 import Directory from '../Directory/Directory'
+import { normalizeDirectoryData } from '../Directory/utils'
 import SidebarHeader from './SidebarHeader'
 import SidebarFooter from './SidebarFooter'
 import type { DirectoryData } from '../Directory/types'
@@ -35,7 +36,7 @@ export type SidebarContentProps = {
     sidebarNavId?: string
     showTopBlur: boolean
     showBottomBlur: boolean
-    data: DirectoryData[]
+    data: DirectoryData[] | null
     idPrefix: string
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void
@@ -66,6 +67,8 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
     setIsHovering,
     sidebarState = 'expanded',
 }) => {
+    const directoryData = normalizeDirectoryData(data)
+
     return (
         <Block
             data-element="sidebar-content"
@@ -81,6 +84,7 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
             style={{
                 willChange: 'width',
                 transform: 'translateZ(0)',
+                contain: 'layout paint',
             }}
         >
             <SidebarHeader
@@ -104,7 +108,7 @@ const SidebarContent: React.FC<SidebarContentProps> = ({
                 onMouseEnter={() => setIsHovering?.(true)}
             >
                 <Directory
-                    directoryData={data}
+                    directoryData={directoryData}
                     idPrefix={idPrefix}
                     activeItem={activeItem}
                     onActiveItemChange={onActiveItemChange}

package/lib/components/Sidebar/SidebarHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { PanelsTopLeft, UserIcon } from 'lucide-react'
 import Block from '../Primitives/Block/Block'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
@@ -57,16 +57,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({
 
     const merchantData = merchantInfo || defaultMerchantInfo
 
-    const [selectVisible, setSelectVisible] = useState(!iconOnlyMode)
-    useEffect(() => {
-        if (iconOnlyMode) {
-            setSelectVisible(false)
-        } else {
-            const t = setTimeout(() => setSelectVisible(true), 180)
-            return () => clearTimeout(t)
-        }
-    }, [iconOnlyMode])
-
     const headerSlot = sidebarTopSlot ? (
         iconOnlyMode ? null : (
             sidebarTopSlot
@@ -123,7 +113,7 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({
                 width={iconOnlyMode ? 0 : '100%'}
                 minWidth={0}
                 overflow="hidden"
-                opacity={iconOnlyMode ? 0 : selectVisible ? 1 : 0}
+                opacity={iconOnlyMode ? 0 : 1}
                 pointerEvents={iconOnlyMode ? 'none' : 'auto'}
                 transition="opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), flex-grow 0.35s cubic-bezier(0.4, 0, 0.2, 1)"
                 style={{

package/lib/components/Sidebar/TenantPanel.tsx

@@ -13,6 +13,7 @@ import { arrangeTenants } from './utils'
 import type { TenantItem } from './types'
 import { Tooltip } from '../Tooltip'
 import { TooltipSide, TooltipSize } from '../Tooltip/types'
+import { Badge, BadgeColor, BadgeSize } from '../Badge'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import type { SidebarTokenType } from './sidebar.tokens'
 
@@ -125,6 +126,56 @@ const TenantItem: React.FC<{
 }> = ({ tenant, isSelected, onSelect }) => {
     const tokens = useResponsiveTokens<SidebarTokenType>('SIDEBAR')
 
+    const tenantButton = (
+        <PrimitiveButton
+            data-element="sidebar-section"
+            data-id={tenant.label}
+            data-status={isSelected ? 'selected' : 'not selected'}
+            type="button"
+            onClick={onSelect}
+            backgroundColor={tokens.leftPanel.item.backgroundColor.default}
+            width={tokens.leftPanel.item.width}
+            height={tokens.leftPanel.item.width}
+            borderRadius={tokens.leftPanel.item.borderRadius}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            cursor="pointer"
+            border={
+                isSelected
+                    ? tokens.leftPanel.item.border.active
+                    : tokens.leftPanel.item.border.default
+            }
+            aria-label={`Select tenant: ${tenant.label}`}
+            aria-pressed={isSelected}
+            style={{
+                transition: 'all 75ms ease',
+            }}
+            _hover={{
+                backgroundColor: tokens.leftPanel.item.backgroundColor.hover,
+                outline: isSelected
+                    ? tokens.leftPanel.item.border.active
+                    : tokens.leftPanel.item.border.hover,
+            }}
+        >
+            <span aria-hidden="true">{tenant.icon}</span>
+        </PrimitiveButton>
+    )
+
+    const trigger = tenant.badge ? (
+        <Badge
+            text={tenant.badge.text.slice(0, 2)}
+            size={BadgeSize.SM}
+            color={BadgeColor.NEUTRAL}
+            position={'bottom-right'}
+            isCircular
+        >
+            {tenantButton}
+        </Badge>
+    ) : (
+        tenantButton
+    )
+
     return (
         <Tooltip
             content={tenant.label}
@@ -132,40 +183,7 @@ const TenantItem: React.FC<{
             delayDuration={500}
             size={TooltipSize.SMALL}
         >
-            <PrimitiveButton
-                data-element="sidebar-section"
-                data-id={tenant.label}
-                data-status={isSelected ? 'selected' : 'not selected'}
-                type="button"
-                onClick={onSelect}
-                backgroundColor={tokens.leftPanel.item.backgroundColor.default}
-                width={tokens.leftPanel.item.width}
-                height={tokens.leftPanel.item.width}
-                borderRadius={tokens.leftPanel.item.borderRadius}
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                cursor="pointer"
-                border={
-                    isSelected
-                        ? tokens.leftPanel.item.border.active
-                        : tokens.leftPanel.item.border.default
-                }
-                aria-label={`Select tenant: ${tenant.label}`}
-                aria-pressed={isSelected}
-                style={{
-                    transition: 'all 75ms ease',
-                }}
-                _hover={{
-                    backgroundColor:
-                        tokens.leftPanel.item.backgroundColor.hover,
-                    outline: isSelected
-                        ? tokens.leftPanel.item.border.active
-                        : tokens.leftPanel.item.border.hover,
-                }}
-            >
-                <span aria-hidden="true">{tenant.icon}</span>
-            </PrimitiveButton>
+            {trigger}
         </Tooltip>
     )
 }

package/lib/components/Sidebar/types.ts

@@ -1,28 +1,25 @@
 import { type ReactNode } from 'react'
 import type { DirectoryData, NavbarItem } from '../Directory/types'
-import type { MerchantInfo } from '../Topbar/types'
+import type {
+    MerchantInfo,
+    LeftPanelInfo,
+    TenantBadge,
+} from '../shared/layoutTypes'
 
-export type LeftPanelItem = {
-    label: string
-    icon: ReactNode
-    value?: string
-    showInPanel?: boolean
-}
-
-export type LeftPanelInfo = {
-    items: LeftPanelItem[]
-    selected: string
-    onSelect: (value: string) => void
-    tenantSlot1?: ReactNode
-    tenantSlot2?: ReactNode
-    tenantFooter?: ReactNode
-}
+// Re-exported for backward compatibility: these types were previously declared
+// here and are part of the public API via `Sidebar/index.ts` (`export * from './types'`).
+export type {
+    LeftPanelInfo,
+    LeftPanelItem,
+    TenantBadge,
+} from '../shared/layoutTypes'
 
 export type TenantItem = {
     label: string
     value?: string
     icon: ReactNode
     showInPanel?: boolean
+    badge?: TenantBadge
 }
 
 export type SidebarMerchantInfo = {
@@ -39,7 +36,7 @@ export type SidebarStateChangeType = 'collapsed' | 'expanded' | 'intermediate'
 export type SidebarProps = {
     showLeftPanel?: boolean
     children: ReactNode
-    data: DirectoryData[]
+    data: DirectoryData[] | null
     leftPanel?: LeftPanelInfo
     topbar: ReactNode
     footer?: ReactNode

package/lib/components/Sidebar/utils.ts

@@ -144,7 +144,7 @@ export const isControlledSidebar = (
 }
 
 export const getMobileNavigationItems = (
-    directory: DirectoryData[]
+    directory?: DirectoryData[] | null
 ): MobileNavigationItem[] => {
     if (!directory || !Array.isArray(directory)) {
         return []

package/lib/components/SidebarV2/SecondarySidebar.tsx

@@ -1,8 +1,10 @@
+import type { ButtonHTMLAttributes } from 'react'
 import { SidebarV2TokensType } from './sidebarV2.tokens'
-import type { SecondarySidebarInfo } from './types'
+import type { SecondarySidebarInfo, SecondarySidebarItem } from './types'
 import Block from '../Primitives/Block/Block'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import { TooltipV2, TooltipV2Side, TooltipV2Size } from '../TooltipV2'
+import { Badge, BadgeColor, BadgeSize } from '../Badge'
 import styled from 'styled-components'
 
 const ScrollableContainer = styled(Block)`
@@ -22,6 +24,82 @@ type Props = {
     tokens: SidebarV2TokensType
 }
 
+type SecondarySidebarItemButtonProps = {
+    item: SecondarySidebarItem
+    isSelected: boolean
+    onSelect: (value: string) => void
+    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>
+    tokens: SidebarV2TokensType
+}
+
+function SecondarySidebarItemButton({
+    item,
+    isSelected,
+    onSelect,
+    buttonProps,
+    tokens,
+}: SecondarySidebarItemButtonProps) {
+    const itemButton = (
+        <PrimitiveButton
+            {...buttonProps}
+            type="button"
+            cursor="pointer"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            width={tokens.secondarySidebar.item.width}
+            height={tokens.secondarySidebar.item.height}
+            borderRadius={tokens.secondarySidebar.item.borderRadius}
+            border={
+                isSelected
+                    ? tokens.secondarySidebar.item.border.active
+                    : tokens.secondarySidebar.item.border.default
+            }
+            _hover={{
+                backgroundColor:
+                    tokens.secondarySidebar.item.backgroundColor.hover,
+                outline: 'none',
+                border: isSelected
+                    ? tokens.secondarySidebar.item.border.active
+                    : tokens.secondarySidebar.item.border.hover,
+            }}
+            onClick={(e) => {
+                onSelect(item.value)
+                buttonProps?.onClick?.(e)
+            }}
+            aria-label={`Select tenant: ${item.label}`}
+            aria-pressed={isSelected}
+        >
+            <span aria-hidden="true">{item.icon}</span>
+        </PrimitiveButton>
+    )
+
+    const trigger = item.badge ? (
+        <Badge
+            text={item.badge.text.slice(0, 2)}
+            size={item.badge.size || BadgeSize.SM}
+            color={item.badge.color || BadgeColor.PRIMARY}
+            position={item.badge.position || 'bottom-right'}
+            isCircular
+        >
+            {itemButton}
+        </Badge>
+    ) : (
+        itemButton
+    )
+
+    return (
+        <TooltipV2
+            content={item.label}
+            side={TooltipV2Side.RIGHT}
+            delayDuration={500}
+            size={TooltipV2Size.SM}
+        >
+            {trigger}
+        </TooltipV2>
+    )
+}
+
 export function SecondarySidebar({ id, secondarySidebar, tokens }: Props) {
     if (!secondarySidebar || (secondarySidebar?.items?.length ?? 0) === 0) {
         return null
@@ -59,50 +137,14 @@ export function SecondarySidebar({ id, secondarySidebar, tokens }: Props) {
                 style={{ minHeight: 0 }}
             >
                 {items?.map((item) => (
-                    <TooltipV2
+                    <SecondarySidebarItemButton
                         key={item.value}
-                        content={item.label}
-                        side={TooltipV2Side.RIGHT}
-                        delayDuration={500}
-                        size={TooltipV2Size.SM}
-                    >
-                        <PrimitiveButton
-                            {...buttonProps}
-                            type="button"
-                            cursor="pointer"
-                            display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            width={tokens.secondarySidebar.item.width}
-                            height={tokens.secondarySidebar.item.height}
-                            borderRadius={
-                                tokens.secondarySidebar.item.borderRadius
-                            }
-                            border={
-                                isSelected(item.value)
-                                    ? tokens.secondarySidebar.item.border.active
-                                    : tokens.secondarySidebar.item.border
-                                          .default
-                            }
-                            _hover={{
-                                backgroundColor:
-                                    tokens.secondarySidebar.item.backgroundColor
-                                        .hover,
-                                outline: 'none',
-                                border: isSelected(item.value)
-                                    ? tokens.secondarySidebar.item.border.active
-                                    : tokens.secondarySidebar.item.border.hover,
-                            }}
-                            onClick={(e) => {
-                                onSelect?.(item.value)
-                                buttonProps?.onClick?.(e)
-                            }}
-                            aria-label={`Select tenant: ${item.label}`}
-                            aria-pressed={isSelected(item.value)}
-                        >
-                            <span aria-hidden="true">{item.icon}</span>
-                        </PrimitiveButton>
-                    </TooltipV2>
+                        item={item}
+                        isSelected={isSelected(item.value)}
+                        onSelect={onSelect}
+                        buttonProps={buttonProps}
+                        tokens={tokens}
+                    />
                 ))}
             </ScrollableContainer>
 

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.dark.tokens.ts

@@ -1,8 +1,8 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import {
+import type {
     ResponsiveMobileNavigationV2Tokens,
     MobileNavigationV2TokenType,
-} from './mobile.tokens'
+} from './mobile.tokens.types'
 
 export const getMobileNavigationV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.light.tokens.ts

@@ -1,8 +1,8 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import {
+import type {
     ResponsiveMobileNavigationV2Tokens,
     MobileNavigationV2TokenType,
-} from './mobile.tokens'
+} from './mobile.tokens.types'
 
 export const getMobileNavigationV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.ts

@@ -1,92 +1,14 @@
-import type { CSSObject } from 'styled-components'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { type FoundationTokenType } from '../../../tokens/theme.token'
 import { Theme } from '../../../context/theme.enum'
 import { getMobileNavigationV2LightTokens } from './mobile.light.tokens'
 import { getMobileNavigationV2DarkTokens } from './mobile.dark.tokens'
+import type { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens.types'
 
-export type MobileNavigationV2State = 'default' | 'active'
-
-export type MobileNavigationV2TokenType = {
-    /**
-     * MobileNavigationV2 anatomy
-     * - container: floating dock surface
-     * - layout: padding/gaps/safe-area offsets used for height calculations
-     * - row: a horizontal strip of items (primary and optional secondary rows)
-     * - item: each navigation button
-     * - primaryAction: optional center primary action button
-     */
-    container: {
-        zIndex: CSSObject['zIndex']
-        /** Base/fallback dock fill; use a color that already includes alpha (e.g. `#RRGGBBAA`). */
-        backgroundColor: CSSObject['backgroundColor']
-        /** Optional fill when `backdrop-filter` is supported (typically slightly lower alpha). */
-        background?: CSSObject['background']
-        border: CSSObject['border']
-        borderWidth: CSSObject['borderWidth']
-        borderRadius: CSSObject['borderRadius']
-        backdropFilter: CSSObject['backdropFilter']
-        transition: CSSObject['transition']
-    }
-    layout: {
-        safeAreaOffset: CSSObject['padding']
-        floatingPadding: CSSObject['padding']
-        primaryActionMarginX: CSSObject['margin']
-        itemLabelMarginTop: CSSObject['margin']
-        itemLabelLineHeight: CSSObject['lineHeight']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        gap: CSSObject['gap']
-        rowPaddingTop: CSSObject['paddingTop']
-        rowPaddingBottom: CSSObject['paddingBottom']
-        rowPaddingLeft: CSSObject['paddingLeft']
-        rowPaddingRight: CSSObject['paddingRight']
-        rowGap: CSSObject['gap']
-    }
-    item: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        borderRadius: CSSObject['borderRadius']
-        gap: CSSObject['gap']
-        backgroundColor: {
-            [key in MobileNavigationV2State]: CSSObject['backgroundColor']
-        }
-        color: { [key in MobileNavigationV2State]: CSSObject['color'] }
-        fontWeight: CSSObject['fontWeight']
-        icon: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            borderRadius: CSSObject['borderRadius']
-            transition: CSSObject['transition']
-            /** SVG stroke width for Lucide-style icons. */
-            strokeWidth: number
-        }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            textAlign: CSSObject['textAlign']
-        }
-    }
-    primaryAction: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        borderRadius: CSSObject['borderRadius']
-        background: CSSObject['background']
-        boxShadow: CSSObject['boxShadow']
-        color: CSSObject['color']
-        icon: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            strokeWidth: number
-        }
-    }
-}
-
-export type ResponsiveMobileNavigationV2Tokens = {
-    [key in keyof BreakpointType]: MobileNavigationV2TokenType
-}
+export type {
+    MobileNavigationV2State,
+    MobileNavigationV2TokenType,
+    ResponsiveMobileNavigationV2Tokens,
+} from './mobile.tokens.types'
 
 export const getMobileNavigationV2Tokens = (
     foundationToken: FoundationTokenType,