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

package/lib/components/Topbar/Topbar.tsx

@@ -0,0 +1,370 @@
+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 { TopbarProps } from './types'
+import { useBreakpoints } from '../../hooks/useBreakPoints'
+import { SingleSelect } from '../SingleSelect'
+import { SelectMenuSize, SelectMenuVariant } from '../Select/types'
+import { useComponentToken } from '../../context/useComponentToken'
+import type { ResponsiveTopbarTokens } from './topbar.tokens'
+import { BREAKPOINTS } from '../../breakpoints/breakPoints'
+import Seperator from '../common/Seperator'
+import { FOUNDATION_THEME } from '../../tokens'
+
+/**
+ * Helper to check if Topbar is in controlled mode
+ */
+const isControlledTopbar = (isVisible: boolean | undefined): boolean => {
+    return isVisible !== undefined
+}
+
+const Topbar = forwardRef<HTMLDivElement, TopbarProps>(
+    (
+        {
+            children,
+            isExpanded,
+            isVisible: controlledIsVisible,
+            // @ts-expect-error - onVisibilityChange is part of the controlled API but not used internally
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            onVisibilityChange,
+            defaultIsVisible = true,
+            sidebarTopSlot,
+            topbar,
+            leftAction,
+            rightActions,
+            showBackButton = false,
+            onBackClick,
+            leftPanel,
+            merchantInfo,
+        },
+        ref
+    ) => {
+        const isControlled = isControlledTopbar(controlledIsVisible)
+        const [internalVisible] = useState<boolean>(defaultIsVisible)
+
+        const isVisible = isControlled ? controlledIsVisible! : internalVisible
+
+        const { innerWidth } = useBreakpoints()
+        const isMobile = innerWidth < BREAKPOINTS.lg
+        const tokens = useComponentToken('TOPBAR') as ResponsiveTopbarTokens
+        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}
+                                aria-hidden="true"
+                            />
+                        </PrimitiveButton>
+                    )
+                }
+
+                return (
+                    <Block
+                        display="flex"
+                        alignItems="center"
+                        gap={topBarToken.leftSection.gap}
+                        maxHeight={topBarToken.leftSection.maxHeight}
+                    >
+                        {leftPanel &&
+                            leftPanel.items &&
+                            leftPanel.items.length > 0 && (
+                                <SingleSelect
+                                    placeholder=""
+                                    variant={SelectMenuVariant.NO_CONTAINER}
+                                    size={SelectMenuSize.MEDIUM}
+                                    items={[
+                                        {
+                                            items: leftPanel.items.map(
+                                                (tenant) => ({
+                                                    label: tenant.label,
+                                                    value:
+                                                        tenant.value ||
+                                                        tenant.label,
+                                                    slot1: tenant.icon,
+                                                })
+                                            ),
+                                        },
+                                    ]}
+                                    selected={leftPanel.selected}
+                                    onSelect={leftPanel.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: ${leftPanel.selected || leftPanel.items[0]?.label || 'tenant'}`}
+                                            style={{
+                                                transition:
+                                                    topBarToken.tenantIconButton
+                                                        .transition,
+                                            }}
+                                            _hover={{
+                                                backgroundColor:
+                                                    topBarToken.tenantIconButton
+                                                        .backgroundColor.hover,
+                                            }}
+                                        >
+                                            <span aria-hidden="true">
+                                                {leftPanel.items.find(
+                                                    (item) =>
+                                                        (item.value ||
+                                                            item.label) ===
+                                                        leftPanel.selected
+                                                )?.icon ||
+                                                    leftPanel.items[0]?.icon}
+                                            </span>
+                                        </PrimitiveButton>
+                                    }
+                                />
+                            )}
+
+                        {leftPanel &&
+                            leftPanel.items &&
+                            leftPanel.items.length > 0 &&
+                            merchantInfo && (
+                                <Text
+                                    variant="heading.md"
+                                    color={
+                                        topBarToken.leftSection.divider.color
+                                    }
+                                    fontWeight={
+                                        topBarToken.leftSection.divider
+                                            .fontWeight
+                                    }
+                                >
+                                    /
+                                </Text>
+                            )}
+
+                        {merchantInfo && (
+                            <SingleSelect
+                                placeholder="Select Merchant"
+                                variant={SelectMenuVariant.NO_CONTAINER}
+                                items={[
+                                    {
+                                        items: merchantInfo.items.map(
+                                            (merchant) => ({
+                                                label: merchant.label,
+                                                value: merchant.value,
+                                                slot1: merchant.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(
+                                                (merchant) =>
+                                                    merchant.value ===
+                                                    merchantInfo.selected
+                                            )?.label || 'Select Merchant'
+                                        }`}
+                                    >
+                                        <Block
+                                            display="flex"
+                                            alignItems="center"
+                                            gap={
+                                                topBarToken
+                                                    .merchantSelectTrigger.gap
+                                            }
+                                        >
+                                            {merchantInfo.items.find(
+                                                (merchant) =>
+                                                    merchant.value ===
+                                                    merchantInfo.selected
+                                            )?.icon && (
+                                                <span aria-hidden="true">
+                                                    {
+                                                        merchantInfo.items.find(
+                                                            (merchant) =>
+                                                                merchant.value ===
+                                                                merchantInfo.selected
+                                                        )?.icon
+                                                    }
+                                                </span>
+                                            )}
+                                            <Text
+                                                variant="body.md"
+                                                color={
+                                                    topBarToken
+                                                        .merchantSelectTrigger
+                                                        .text.color
+                                                }
+                                                fontWeight={
+                                                    topBarToken
+                                                        .merchantSelectTrigger
+                                                        .text.fontWeight
+                                                }
+                                                style={{
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }}
+                                            >
+                                                {merchantInfo.items.find(
+                                                    (merchant) =>
+                                                        merchant.value ===
+                                                        merchantInfo.selected
+                                                )?.label || 'Select Merchant'}
+                                            </Text>
+                                        </Block>
+                                        <ChevronDown
+                                            size={
+                                                topBarToken
+                                                    .merchantSelectTrigger.icon
+                                                    .size
+                                            }
+                                            color={
+                                                topBarToken
+                                                    .merchantSelectTrigger.icon
+                                                    .color
+                                            }
+                                        />
+                                    </PrimitiveButton>
+                                }
+                            />
+                        )}
+                    </Block>
+                )
+            }
+
+            return (
+                <Block
+                    ref={ref}
+                    width="100%"
+                    position="sticky"
+                    top="0"
+                    borderBottom={topBarToken.borderBottom}
+                    display="flex"
+                    alignItems="center"
+                    gap={topBarToken.gap}
+                    padding={topBarToken.padding}
+                    backgroundColor={topBarToken.backgroundColor}
+                    style={{
+                        backdropFilter: topBarToken.backdropFilter,
+                    }}
+                    justifyContent="space-between"
+                    maxHeight={'48px'}
+                    minHeight={'48px'}
+                >
+                    <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%"
+                top="0"
+                borderBottom={topBarToken.borderBottom}
+                display="flex"
+                alignItems="center"
+                gap={topBarToken.gap}
+                padding={topBarToken.padding}
+                backgroundColor={topBarToken.backgroundColor}
+                style={{
+                    backdropFilter: topBarToken.backdropFilter,
+                }}
+                maxHeight={'48px'}
+                minHeight={'48px'}
+            >
+                {!isExpanded && sidebarTopSlot}
+                {!isExpanded && (
+                    <Seperator
+                        width="1.5px"
+                        color={FOUNDATION_THEME.colors.gray[200]}
+                    />
+                )}
+                <Block flexGrow={1}>{topbar || children}</Block>
+            </Block>
+        )
+    }
+)
+
+Topbar.displayName = 'Topbar'
+
+export default Topbar

package/lib/components/Topbar/index.ts

@@ -0,0 +1,3 @@
+export { default as Topbar } from './Topbar'
+export * from './topbar.tokens'
+export type { TopbarProps, MerchantInfo } from './types'

package/lib/components/Topbar/topbar.tokens.ts

@@ -0,0 +1,304 @@
+import type { CSSObject } from 'styled-components'
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type TopbarState = 'default' | 'hover' | 'active'
+
+/**
+ * Topbar Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure matches Sidebar pattern for consistency:
+ * - Base properties: borderBottom, backgroundColor, backdropFilter, padding, gap
+ * - Target sections: toggleButton.*, actionButton.*, tenantIconButton.*, merchantSelectTrigger.*, leftSection.*, rightSection.*, sidebarSection.*
+ * - Each target has: backgroundColor, padding, borderRadius, gap, specific properties
+ * - Interactive elements have state-based styling: [state] = default | hover | active
+ *
+ * Pattern examples:
+ * - backgroundColor (topbar background color)
+ * - padding (topbar content padding)
+ * - toggleButton.backgroundColor.[state] (interactive toggle button)
+ * - actionButton.padding (action button spacing)
+ * - leftSection.gap (left section item spacing)
+ * - merchantSelectTrigger.text.color (merchant text color)
+ */
+export type TopbarTokenType = {
+    zIndex: CSSObject['zIndex']
+    // Base topbar properties
+    borderBottom: CSSObject['borderBottom'] // Bottom border separating topbar from content
+    backgroundColor: CSSObject['backgroundColor'] // Background color (usually with transparency)
+    backdropFilter: CSSObject['backdropFilter'] // Blur effect for glassmorphism
+    padding: CSSObject['padding'] // Content padding
+    gap: CSSObject['gap'] // Space between main sections
+
+    // Sidebar toggle button (shows when sidebar is collapsed)
+    toggleButton: {
+        borderRadius: CSSObject['borderRadius'] // Button corner rounding
+        padding: CSSObject['padding'] // Button internal spacing
+        // Button background for different interaction states
+        backgroundColor: {
+            [key in TopbarState]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition'] // Smooth state transitions
+        icon: {
+            size: CSSObject['width'] // Icon dimensions
+            color: CSSObject['color'] // Icon color
+        }
+    }
+
+    // Action buttons (e.g., notifications, settings in topbar)
+    actionButton: {
+        borderRadius: CSSObject['borderRadius'] // Button corner rounding
+        padding: CSSObject['padding'] // Button internal spacing
+        minWidth: CSSObject['minWidth'] // Minimum button width
+        height: CSSObject['height'] // Button height
+        // Button background for different interaction states
+        backgroundColor: {
+            [key in TopbarState]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition'] // Smooth state transitions
+        icon: {
+            size: CSSObject['width'] // Icon dimensions
+            color: CSSObject['color'] // Icon color
+        }
+    }
+
+    // Tenant icon button (for mobile tenant switching)
+    tenantIconButton: {
+        borderRadius: CSSObject['borderRadius'] // Button corner rounding
+        minHeight: CSSObject['minHeight'] // Minimum button height
+        // Button background for different interaction states
+        backgroundColor: {
+            [key in TopbarState]: CSSObject['backgroundColor']
+        }
+        transition: CSSObject['transition'] // Smooth state transitions
+    }
+
+    // Merchant select dropdown trigger button
+    merchantSelectTrigger: {
+        gap: CSSObject['gap'] // Space between icon and text
+        icon: {
+            size: CSSObject['width'] // Dropdown icon size
+            color: CSSObject['color'] // Dropdown icon color
+        }
+        text: {
+            fontSize: CSSObject['fontSize'] // Merchant name text size
+            fontWeight: CSSObject['fontWeight'] // Merchant name text weight
+            color: CSSObject['color'] // Merchant name text color
+        }
+    }
+
+    // Left section (tenant/merchant selectors on mobile)
+    leftSection: {
+        gap: CSSObject['gap'] // Space between items
+        maxHeight: CSSObject['maxHeight'] // Maximum section height
+        divider: {
+            fontSize: CSSObject['fontSize'] // Divider text size (/)
+            fontWeight: CSSObject['fontWeight'] // Divider text weight
+            color: CSSObject['color'] // Divider text color
+        }
+    }
+
+    // Right section (action buttons area)
+    rightSection: {
+        gap: CSSObject['gap'] // Space between action buttons
+    }
+
+    // Sidebar section (toggle + sidebar top slot when collapsed)
+    sidebarSection: {
+        gap: CSSObject['gap'] // Space between toggle and slot
+    }
+}
+
+export type ResponsiveTopbarTokens = {
+    [key in keyof BreakpointType]: TopbarTokenType
+}
+
+export const getTopbarTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveTopbarTokens => {
+    return {
+        // Small breakpoint (mobile)
+        sm: {
+            // Base properties
+            zIndex: '10',
+            borderBottom: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+            backgroundColor: 'hsla(0, 0%, 100%, 0.8)',
+            backdropFilter: 'blur(10px)',
+            padding: `${foundationToken.unit[5]} ${foundationToken.unit[16]}`,
+            gap: foundationToken.unit[12],
+
+            // Toggle button (sidebar collapse/expand)
+            toggleButton: {
+                borderRadius: foundationToken.border.radius[10],
+                padding: foundationToken.unit[9],
+                backgroundColor: {
+                    default: 'transparent',
+                    hover: foundationToken.colors.gray[100],
+                    active: foundationToken.colors.gray[150],
+                },
+                transition: 'background-color 0.15s ease',
+                icon: {
+                    size: foundationToken.unit[16],
+                    color: foundationToken.colors.gray[600],
+                },
+            },
+
+            // Action buttons
+            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[100],
+                    active: foundationToken.colors.gray[150],
+                },
+                transition: 'background-color 0.15s ease',
+                icon: {
+                    size: foundationToken.unit[20],
+                    color: foundationToken.colors.gray[600],
+                },
+            },
+
+            // Tenant icon button (mobile)
+            tenantIconButton: {
+                borderRadius: foundationToken.border.radius[8],
+                minHeight: foundationToken.unit[36],
+                backgroundColor: {
+                    default: 'transparent',
+                    hover: foundationToken.colors.gray[100],
+                    active: foundationToken.colors.gray[150],
+                },
+                transition: 'background-color 0.15s ease',
+            },
+
+            // Merchant select trigger
+            merchantSelectTrigger: {
+                gap: foundationToken.unit[6],
+                icon: {
+                    size: foundationToken.unit[14],
+                    color: foundationToken.colors.gray[600],
+                },
+                text: {
+                    fontSize: foundationToken.font.size.body.md.fontSize,
+                    fontWeight: foundationToken.font.weight[600],
+                    color: foundationToken.colors.gray[800],
+                },
+            },
+
+            // Left section (mobile)
+            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],
+                },
+            },
+
+            // Right section (action buttons area)
+            rightSection: {
+                gap: foundationToken.unit[8],
+            },
+
+            // Sidebar section (toggle + slot)
+            sidebarSection: {
+                gap: foundationToken.unit[16],
+            },
+        },
+
+        // Large breakpoint (desktop)
+        lg: {
+            // Base properties
+            zIndex: '10',
+            borderBottom: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+            backgroundColor: 'hsla(0, 0%, 100%, 0.8)',
+            backdropFilter: 'blur(10px)',
+            padding: `${foundationToken.unit[5]} ${foundationToken.unit[32]}`,
+            gap: foundationToken.unit[16],
+
+            // Toggle button (sidebar collapse/expand)
+            toggleButton: {
+                borderRadius: foundationToken.border.radius[10],
+                padding: foundationToken.unit[10],
+                backgroundColor: {
+                    default: 'transparent',
+                    hover: foundationToken.colors.gray[100],
+                    active: foundationToken.colors.gray[150],
+                },
+                transition: 'background-color 0.15s ease',
+                icon: {
+                    size: foundationToken.unit[16],
+                    color: foundationToken.colors.gray[600],
+                },
+            },
+
+            // Action buttons
+            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[100],
+                    active: foundationToken.colors.gray[150],
+                },
+                transition: 'background-color 0.15s ease',
+                icon: {
+                    size: foundationToken.unit[20],
+                    color: foundationToken.colors.gray[600],
+                },
+            },
+
+            // Tenant icon button (mobile)
+            tenantIconButton: {
+                borderRadius: foundationToken.border.radius[8],
+                minHeight: foundationToken.unit[36],
+                backgroundColor: {
+                    default: 'transparent',
+                    hover: foundationToken.colors.gray[100],
+                    active: foundationToken.colors.gray[150],
+                },
+                transition: 'background-color 0.15s ease',
+            },
+
+            // Merchant select trigger
+            merchantSelectTrigger: {
+                gap: foundationToken.unit[6],
+                icon: {
+                    size: foundationToken.unit[14],
+                    color: foundationToken.colors.gray[600],
+                },
+                text: {
+                    fontSize: foundationToken.font.size.body.md.fontSize,
+                    fontWeight: foundationToken.font.weight[600],
+                    color: foundationToken.colors.gray[800],
+                },
+            },
+
+            // Left section (mobile)
+            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],
+                },
+            },
+
+            // Right section (action buttons area)
+            rightSection: {
+                gap: foundationToken.unit[8],
+            },
+
+            // Sidebar section (toggle + slot)
+            sidebarSection: {
+                gap: foundationToken.unit[16],
+            },
+        },
+    }
+}