@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/Topbar/types.ts

@@ -0,0 +1,53 @@
+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
+}
+
+export type TopbarProps = {
+    children?: ReactNode
+
+    /** Sidebar expansion state */
+    isExpanded?: boolean
+
+    onToggleExpansion?: () => void
+
+    showToggleButton?: boolean
+
+    /** When true, hides toggle button (used in panel only mode) */
+    panelOnlyMode?: boolean
+
+    /** Controlled mode: Show/hide topbar */
+    isVisible?: boolean
+
+    /** Callback when visibility changes (controlled mode) */
+    onVisibilityChange?: (visible: boolean) => void
+
+    /** Uncontrolled mode: Initial topbar visibility (defaults to true) */
+    defaultIsVisible?: boolean
+
+    sidebarTopSlot?: ReactNode
+    topbar?: ReactNode
+
+    leftAction?: ReactNode
+
+    rightActions?: ReactNode
+
+    showBackButton?: boolean
+
+    onBackClick?: () => void
+
+    leftPanel?: LeftPanelInfo
+
+    merchantInfo?: MerchantInfo
+
+    /** ARIA controls ID for the sidebar navigation */
+    ariaControls?: string
+}

package/lib/components/TopbarV2/TopbarV2.tsx

@@ -0,0 +1,363 @@
+import { forwardRef, useState } from 'react'
+import { ArrowLeft, ChevronDown } from 'lucide-react'
+import Block from '../Primitives/Block/Block'
+import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
+import Text from '../Text/Text'
+import type { TopbarV2Props } from './types'
+import { useBreakpoints } from '../../hooks/useBreakPoints'
+import { SingleSelect } from '../SingleSelect'
+import { SelectMenuSize, SelectMenuVariant } from '../Select/types'
+import { useComponentToken } from '../../context/useComponentToken'
+import type { ResponsiveTopbarV2Tokens } from './topbarV2.tokens'
+import { BREAKPOINTS } from '../../breakpoints/breakPoints'
+import Seperator from '../common/Seperator'
+
+const isControlledTopbarV2 = (isVisible: boolean | undefined): boolean =>
+    isVisible !== undefined
+
+const TopbarV2 = forwardRef<HTMLDivElement, TopbarV2Props>(
+    (
+        {
+            children,
+            isExpanded,
+            isVisible: controlledIsVisible,
+            onVisibilityChange,
+            onToggleExpansion,
+            showToggleButton,
+            panelOnlyMode,
+            ariaControls,
+            defaultIsVisible = true,
+            sidebarTopSlot,
+            topbar,
+            leftAction,
+            rightActions,
+            showBackButton = false,
+            onBackClick,
+            secondarySidebar,
+            merchantInfo,
+        },
+        ref
+    ) => {
+        const isControlled = isControlledTopbarV2(controlledIsVisible)
+        const [internalVisible] = useState<boolean>(defaultIsVisible)
+        const isVisible = isControlled ? controlledIsVisible! : internalVisible
+
+        // Preserve signature parity: these props are accepted for future
+        // controlled-visibility UI but not yet wired to any internal trigger.
+        void onVisibilityChange
+        void onToggleExpansion
+        void showToggleButton
+        void panelOnlyMode
+        void ariaControls
+
+        const { innerWidth } = useBreakpoints()
+        const isMobile = innerWidth < BREAKPOINTS.lg
+        const tokens = useComponentToken('TOPBARV2') as ResponsiveTopbarV2Tokens
+        const topBarToken = isMobile ? tokens.sm : tokens.lg
+
+        if (!isVisible) return null
+
+        if (isMobile) {
+            const renderLeftSection = () => {
+                if (leftAction) return leftAction
+
+                if (showBackButton) {
+                    return (
+                        <PrimitiveButton
+                            type="button"
+                            onClick={onBackClick}
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="center"
+                            border="none"
+                            backgroundColor="transparent"
+                            borderRadius={topBarToken.actionButton.borderRadius}
+                            cursor="pointer"
+                            padding={topBarToken.actionButton.padding}
+                            minWidth={topBarToken.actionButton.minWidth}
+                            height={topBarToken.actionButton.height}
+                            aria-label="Go back"
+                            style={{
+                                transition: topBarToken.actionButton.transition,
+                            }}
+                            _hover={{
+                                backgroundColor:
+                                    topBarToken.actionButton.backgroundColor
+                                        .hover,
+                            }}
+                        >
+                            <ArrowLeft
+                                color={topBarToken.actionButton.icon.color}
+                                size={
+                                    topBarToken.actionButton.icon
+                                        .size as unknown as number
+                                }
+                                aria-hidden="true"
+                            />
+                        </PrimitiveButton>
+                    )
+                }
+
+                return (
+                    <Block
+                        display="flex"
+                        alignItems="center"
+                        gap={topBarToken.leftSection.gap}
+                        maxHeight={topBarToken.leftSection.maxHeight}
+                    >
+                        {secondarySidebar?.items?.length ? (
+                            <SingleSelect
+                                placeholder=""
+                                variant={SelectMenuVariant.NO_CONTAINER}
+                                size={SelectMenuSize.MEDIUM}
+                                items={[
+                                    {
+                                        items: secondarySidebar.items.map(
+                                            (item) => ({
+                                                label: item.label,
+                                                value: item.value,
+                                                slot1: item.icon,
+                                            })
+                                        ),
+                                    },
+                                ]}
+                                selected={secondarySidebar.selected}
+                                onSelect={secondarySidebar.onSelect}
+                                customTrigger={
+                                    <PrimitiveButton
+                                        type="button"
+                                        display="flex"
+                                        alignItems="center"
+                                        justifyContent="center"
+                                        border="none"
+                                        backgroundColor="transparent"
+                                        borderRadius={
+                                            topBarToken.tenantIconButton
+                                                .borderRadius
+                                        }
+                                        cursor="pointer"
+                                        minHeight={
+                                            topBarToken.tenantIconButton
+                                                .minHeight
+                                        }
+                                        aria-label={`Select tenant: ${
+                                            secondarySidebar.selected ||
+                                            secondarySidebar.items[0]?.label ||
+                                            'tenant'
+                                        }`}
+                                        style={{
+                                            transition:
+                                                topBarToken.tenantIconButton
+                                                    .transition,
+                                        }}
+                                        _hover={{
+                                            backgroundColor:
+                                                topBarToken.tenantIconButton
+                                                    .backgroundColor.hover,
+                                        }}
+                                    >
+                                        <span aria-hidden="true">
+                                            {secondarySidebar.items.find(
+                                                (item) =>
+                                                    item.value ===
+                                                    secondarySidebar.selected
+                                            )?.icon ??
+                                                secondarySidebar.items[0]?.icon}
+                                        </span>
+                                    </PrimitiveButton>
+                                }
+                            />
+                        ) : null}
+
+                        {secondarySidebar?.items?.length && merchantInfo ? (
+                            <Text
+                                variant="heading.md"
+                                color={topBarToken.leftSection.divider.color}
+                                fontWeight={
+                                    topBarToken.leftSection.divider.fontWeight
+                                }
+                            >
+                                /
+                            </Text>
+                        ) : null}
+
+                        {merchantInfo ? (
+                            <SingleSelect
+                                placeholder="Select Merchant"
+                                variant={SelectMenuVariant.NO_CONTAINER}
+                                items={[
+                                    {
+                                        items: merchantInfo.items.map((m) => ({
+                                            label: m.label,
+                                            value: m.value,
+                                            slot1: m.icon,
+                                        })),
+                                    },
+                                ]}
+                                selected={merchantInfo.selected}
+                                onSelect={merchantInfo.onSelect}
+                                customTrigger={
+                                    <PrimitiveButton
+                                        type="button"
+                                        display="flex"
+                                        alignItems="center"
+                                        justifyContent="space-between"
+                                        border="none"
+                                        backgroundColor="transparent"
+                                        cursor="pointer"
+                                        gap={
+                                            topBarToken.merchantSelectTrigger
+                                                .gap
+                                        }
+                                        padding="0"
+                                        width="100%"
+                                        overflow="hidden"
+                                        aria-label={`Select merchant: ${
+                                            merchantInfo.items.find(
+                                                (m) =>
+                                                    m.value ===
+                                                    merchantInfo.selected
+                                            )?.label ?? 'Select Merchant'
+                                        }`}
+                                    >
+                                        <Block
+                                            display="flex"
+                                            alignItems="center"
+                                            gap={
+                                                topBarToken
+                                                    .merchantSelectTrigger.gap
+                                            }
+                                        >
+                                            {merchantInfo.items.find(
+                                                (m) =>
+                                                    m.value ===
+                                                    merchantInfo.selected
+                                            )?.icon ? (
+                                                <span aria-hidden="true">
+                                                    {
+                                                        merchantInfo.items.find(
+                                                            (m) =>
+                                                                m.value ===
+                                                                merchantInfo.selected
+                                                        )?.icon
+                                                    }
+                                                </span>
+                                            ) : null}
+                                            <Text
+                                                variant="body.md"
+                                                color={
+                                                    topBarToken
+                                                        .merchantSelectTrigger
+                                                        .text.color
+                                                }
+                                                fontWeight={
+                                                    topBarToken
+                                                        .merchantSelectTrigger
+                                                        .text.fontWeight
+                                                }
+                                                style={{
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }}
+                                            >
+                                                {merchantInfo.items.find(
+                                                    (m) =>
+                                                        m.value ===
+                                                        merchantInfo.selected
+                                                )?.label ?? 'Select Merchant'}
+                                            </Text>
+                                        </Block>
+                                        <ChevronDown
+                                            size={
+                                                topBarToken
+                                                    .merchantSelectTrigger.icon
+                                                    .size as unknown as number
+                                            }
+                                            color={
+                                                topBarToken
+                                                    .merchantSelectTrigger.icon
+                                                    .color
+                                            }
+                                        />
+                                    </PrimitiveButton>
+                                }
+                            />
+                        ) : null}
+                    </Block>
+                )
+            }
+
+            return (
+                <Block
+                    ref={ref}
+                    width="100%"
+                    position="sticky"
+                    top="0"
+                    zIndex={topBarToken.zIndex}
+                    borderBottom={topBarToken.borderBottom}
+                    display="flex"
+                    alignItems="center"
+                    gap={topBarToken.gap}
+                    padding={topBarToken.padding}
+                    backgroundColor={topBarToken.backgroundColor}
+                    style={{ backdropFilter: topBarToken.backdropFilter }}
+                    justifyContent="space-between"
+                    maxHeight={topBarToken.height}
+                    minHeight={topBarToken.height}
+                >
+                    <Block
+                        display="flex"
+                        alignItems="center"
+                        width="fit-content"
+                        flexShrink={0}
+                    >
+                        {renderLeftSection()}
+                    </Block>
+                    <Block
+                        display="flex"
+                        alignItems="center"
+                        gap={topBarToken.rightSection.gap}
+                        width="fit-content"
+                        flexShrink={0}
+                    >
+                        {rightActions}
+                    </Block>
+                </Block>
+            )
+        }
+
+        return (
+            <Block
+                data-topbar="topbar"
+                ref={ref}
+                width="100%"
+                position="sticky"
+                top="0"
+                zIndex={topBarToken.zIndex}
+                borderBottom={topBarToken.borderBottom}
+                display="flex"
+                alignItems="center"
+                gap={topBarToken.gap}
+                padding={topBarToken.padding}
+                backgroundColor={topBarToken.backgroundColor}
+                style={{ backdropFilter: topBarToken.backdropFilter }}
+                maxHeight={topBarToken.height}
+                minHeight={topBarToken.height}
+            >
+                {!isExpanded && sidebarTopSlot}
+                {!isExpanded && sidebarTopSlot && (topbar || children) && (
+                    <Seperator
+                        width={String(topBarToken.separator.width)}
+                        color={String(topBarToken.separator.color)}
+                    />
+                )}
+                <Block flexGrow={1}>{topbar || children}</Block>
+            </Block>
+        )
+    }
+)
+
+TopbarV2.displayName = 'TopbarV2'
+
+export default TopbarV2

package/lib/components/TopbarV2/index.ts

@@ -0,0 +1,3 @@
+export { default as TopbarV2 } from './TopbarV2'
+export * from './topbarV2.tokens'
+export type { MerchantInfoV2, TopbarV2Props } from './types'

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

@@ -0,0 +1,159 @@
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import type { ResponsiveTopbarV2Tokens } from './topbarV2.tokens'
+
+export const getTopbarV2DarkTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveTopbarV2Tokens => ({
+    sm: {
+        zIndex: '10',
+        height: foundationToken.unit[48],
+        borderBottom: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[800]}`,
+        backgroundColor: 'hsla(0, 0%, 0%, 0.6)',
+        backdropFilter: 'blur(10px)',
+        padding: `${foundationToken.unit[5]} ${foundationToken.unit[16]}`,
+        gap: foundationToken.unit[12],
+        separator: {
+            width: '1.5px',
+            color: foundationToken.colors.gray[800],
+        },
+        toggleButton: {
+            borderRadius: foundationToken.border.radius[10],
+            padding: foundationToken.unit[9],
+            backgroundColor: {
+                default: 'transparent',
+                hover: foundationToken.colors.gray[900],
+                active: foundationToken.colors.gray[900],
+            },
+            transition: 'background-color 0.15s ease',
+            icon: {
+                size: foundationToken.unit[16],
+                color: foundationToken.colors.gray[100],
+            },
+        },
+        actionButton: {
+            borderRadius: foundationToken.border.radius[8],
+            padding: foundationToken.unit[8],
+            minWidth: foundationToken.unit[40],
+            height: foundationToken.unit[40],
+            backgroundColor: {
+                default: 'transparent',
+                hover: foundationToken.colors.gray[900],
+                active: foundationToken.colors.gray[900],
+            },
+            transition: 'background-color 0.15s ease',
+            icon: {
+                size: foundationToken.unit[20],
+                color: foundationToken.colors.gray[100],
+            },
+        },
+        tenantIconButton: {
+            borderRadius: foundationToken.border.radius[8],
+            minHeight: foundationToken.unit[36],
+            backgroundColor: {
+                default: 'transparent',
+                hover: foundationToken.colors.gray[900],
+                active: foundationToken.colors.gray[900],
+            },
+            transition: 'background-color 0.15s ease',
+        },
+        merchantSelectTrigger: {
+            gap: foundationToken.unit[6],
+            icon: {
+                size: foundationToken.unit[14],
+                color: foundationToken.colors.gray[100],
+            },
+            text: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[600],
+                color: foundationToken.colors.gray[50],
+            },
+        },
+        leftSection: {
+            gap: foundationToken.unit[6],
+            maxHeight: '26px',
+            divider: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[400],
+                color: foundationToken.colors.gray[400],
+            },
+        },
+        rightSection: { gap: foundationToken.unit[8] },
+        sidebarSection: { gap: foundationToken.unit[16] },
+    },
+    lg: {
+        zIndex: '10',
+        height: foundationToken.unit[48],
+        borderBottom: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[800]}`,
+        backgroundColor: 'hsla(0, 0%, 0%, 0.6)',
+        backdropFilter: 'blur(10px)',
+        padding: `${foundationToken.unit[5]} ${foundationToken.unit[32]}`,
+        gap: foundationToken.unit[16],
+        separator: {
+            width: '1.5px',
+            color: foundationToken.colors.gray[800],
+        },
+        toggleButton: {
+            borderRadius: foundationToken.border.radius[10],
+            padding: foundationToken.unit[10],
+            backgroundColor: {
+                default: 'transparent',
+                hover: foundationToken.colors.gray[900],
+                active: foundationToken.colors.gray[900],
+            },
+            transition: 'background-color 0.15s ease',
+            icon: {
+                size: foundationToken.unit[16],
+                color: foundationToken.colors.gray[100],
+            },
+        },
+        actionButton: {
+            borderRadius: foundationToken.border.radius[8],
+            padding: foundationToken.unit[8],
+            minWidth: foundationToken.unit[40],
+            height: foundationToken.unit[36],
+            backgroundColor: {
+                default: 'transparent',
+                hover: foundationToken.colors.gray[900],
+                active: foundationToken.colors.gray[900],
+            },
+            transition: 'background-color 0.15s ease',
+            icon: {
+                size: foundationToken.unit[20],
+                color: foundationToken.colors.gray[100],
+            },
+        },
+        tenantIconButton: {
+            borderRadius: foundationToken.border.radius[8],
+            minHeight: foundationToken.unit[36],
+            backgroundColor: {
+                default: 'transparent',
+                hover: foundationToken.colors.gray[900],
+                active: foundationToken.colors.gray[900],
+            },
+            transition: 'background-color 0.15s ease',
+        },
+        merchantSelectTrigger: {
+            gap: foundationToken.unit[6],
+            icon: {
+                size: foundationToken.unit[14],
+                color: foundationToken.colors.gray[100],
+            },
+            text: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[600],
+                color: foundationToken.colors.gray[50],
+            },
+        },
+        leftSection: {
+            gap: foundationToken.unit[6],
+            maxHeight: '26px',
+            divider: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[400],
+                color: foundationToken.colors.gray[400],
+            },
+        },
+        rightSection: { gap: foundationToken.unit[8] },
+        sidebarSection: { gap: foundationToken.unit[16] },
+    },
+})