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

package/lib/hooks/useScrollLock.ts

@@ -0,0 +1,174 @@
+import { useEffect } from 'react'
+
+type ScrollLockEventTarget = EventTarget & {
+    closest?: (selector: string) => Element | null
+    tagName?: string
+}
+
+const isElement = (
+    target: EventTarget | null
+): target is ScrollLockEventTarget => {
+    if (!target) return false
+    try {
+        return (
+            target instanceof Element ||
+            (typeof (target as ScrollLockEventTarget).closest === 'function' &&
+                typeof (target as ScrollLockEventTarget).tagName === 'string')
+        )
+    } catch {
+        return false
+    }
+}
+
+const safeClosest = (
+    el: ScrollLockEventTarget,
+    selector: string
+): Element | null => {
+    if (typeof el.closest !== 'function') return null
+    try {
+        return el.closest(selector) ?? null
+    } catch {
+        return null
+    }
+}
+
+const useScrollLock = (shouldLock?: boolean) => {
+    useEffect(() => {
+        if (!shouldLock) return
+
+        const scrollY = window.scrollY
+        const scrollX = window.scrollX
+
+        const isInsideDropdown = (el: ScrollLockEventTarget) =>
+            safeClosest(el, '[data-radix-popper-content-wrapper]') ||
+            safeClosest(el, '[data-radix-dropdown-menu-content]') ||
+            safeClosest(el, '[role="menu"]')
+
+        const isInsideModal = (el: ScrollLockEventTarget) =>
+            safeClosest(el, '[role="dialog"]') ||
+            safeClosest(el, '[data-modal]') ||
+            safeClosest(el, '[data-element="body"]')
+
+        let dropdownCache: boolean | null = null
+
+        const hasOpenDropdown = () => {
+            if (dropdownCache !== null) return dropdownCache
+            dropdownCache = !!document.querySelector(
+                '[data-radix-popper-content-wrapper], [data-radix-dropdown-menu-content]'
+            )
+            return dropdownCache
+        }
+
+        const resetCache = () => {
+            dropdownCache = null
+        }
+
+        // ---------- SCROLL HANDLER ----------
+        const preventScroll = (e: WheelEvent | TouchEvent) => {
+            resetCache()
+
+            const target = e.target
+
+            if (!isElement(target)) {
+                e.preventDefault()
+                return
+            }
+
+            if (isInsideDropdown(target)) return
+
+            const dropdownOpen = hasOpenDropdown()
+
+            if (dropdownOpen && isInsideModal(target)) {
+                e.preventDefault()
+                return
+            }
+
+            if (!dropdownOpen && isInsideModal(target)) return
+
+            e.preventDefault()
+        }
+
+        // ---------- KEYBOARD HANDLER ----------
+        const preventKeyboardScroll = (e: KeyboardEvent) => {
+            const scrollKeys = [
+                'ArrowUp',
+                'ArrowDown',
+                'PageUp',
+                'PageDown',
+                'Home',
+                'End',
+                ' ',
+            ]
+
+            if (!scrollKeys.includes(e.key)) return
+
+            resetCache()
+
+            const target = e.target
+
+            if (!isElement(target)) {
+                e.preventDefault()
+                return
+            }
+
+            if (isInsideDropdown(target)) return
+
+            if (
+                safeClosest(target, 'input, textarea, [contenteditable="true"]')
+            )
+                return
+
+            const dropdownOpen = hasOpenDropdown()
+
+            if (dropdownOpen && isInsideModal(target)) {
+                e.preventDefault()
+                return
+            }
+
+            if (!dropdownOpen && isInsideModal(target)) return
+
+            e.preventDefault()
+        }
+
+        // ---------- APPLY LOCK ----------
+        document.documentElement.style.overflow = 'hidden'
+        document.documentElement.style.touchAction = 'none'
+        document.documentElement.style.overscrollBehavior = 'none'
+
+        document.body.style.overflow = 'hidden'
+        document.body.style.position = 'fixed'
+        document.body.style.top = `-${scrollY}px`
+        document.body.style.left = `-${scrollX}px`
+        document.body.style.width = '100%'
+        document.body.style.height = '100%'
+
+        // ---------- LISTENERS ----------
+        document.addEventListener('wheel', preventScroll, { passive: false })
+        document.addEventListener('touchmove', preventScroll, {
+            passive: false,
+        })
+        document.addEventListener('keydown', preventKeyboardScroll)
+
+        // ---------- CLEANUP ----------
+        return () => {
+            document.removeEventListener('wheel', preventScroll)
+            document.removeEventListener('touchmove', preventScroll)
+            document.removeEventListener('keydown', preventKeyboardScroll)
+
+            document.documentElement.style.overflow = ''
+            document.documentElement.style.touchAction = ''
+            document.documentElement.style.overscrollBehavior = ''
+
+            document.body.style.overflow = ''
+            document.body.style.position = ''
+            document.body.style.top = ''
+            document.body.style.left = ''
+            document.body.style.width = ''
+            document.body.style.height = ''
+
+            window.scrollTo(scrollX, scrollY)
+        }
+    }, [shouldLock])
+}
+
+export default useScrollLock

package/lib/hooks/useSectionScroll.ts

@@ -0,0 +1,90 @@
+import { useCallback } from 'react'
+
+interface ScrollOptions {
+    /** Amount of padding (in pixels) from scrollable container edge when scrolling */
+    padding?: number
+    /** Whether to scroll instantly or smoothly */
+    behavior?: ScrollBehavior
+}
+
+/**
+ * A custom hook that provides scroll management utilities for sidebar sections.
+ * Used to automatically scroll elements into view when they expand near the
+ * bottom of their nearest scrollable ancestor container (not the viewport).
+ *
+ * This hook finds the closest scrollable ancestor element (with overflow-y: auto or scroll)
+ * and scrolls within that container, not the viewport. This is important when using
+ * the hook in nested scrollers or modals.
+ *
+ * @example
+ * const { scrollIntoView } = useSectionScroll()
+ * scrollIntoView(sectionRef.current)
+ */
+export const useSectionScroll = (options: ScrollOptions = {}) => {
+    const { padding = 20, behavior = 'smooth' } = options
+
+    /**
+     * Finds the closest scrollable ancestor element by checking CSS overflow properties.
+     * An element is considered scrollable if it has overflow-y: auto or scroll.
+     */
+    const findScrollableAncestor = useCallback(
+        (element: HTMLElement | null): HTMLElement | null => {
+            let current = element?.parentElement
+
+            while (current) {
+                const style = window.getComputedStyle(current)
+                const overflowY = style.overflowY
+
+                if (overflowY === 'auto' || overflowY === 'scroll') {
+                    return current
+                }
+
+                current = current.parentElement
+            }
+
+            return null
+        },
+        []
+    )
+
+    /**
+     * Calculates if an element extends beyond the visible container and scrolls it into view.
+     * Uses getBoundingClientRect for accurate position calculations relative to the viewport.
+     */
+    const scrollIntoView = useCallback(
+        (element: HTMLElement) => {
+            const scrollableContainer = findScrollableAncestor(element)
+
+            if (!scrollableContainer) {
+                return
+            }
+
+            const elementRect = element.getBoundingClientRect()
+            const containerRect = scrollableContainer.getBoundingClientRect()
+
+            // Calculate positions relative to the container
+            const elementBottom =
+                elementRect.bottom -
+                containerRect.top +
+                scrollableContainer.scrollTop
+            const visibleBottom =
+                scrollableContainer.scrollTop + containerRect.height
+
+            // Scroll if element extends beyond visible area
+            if (elementBottom > visibleBottom - padding) {
+                const targetScrollTop =
+                    elementBottom - containerRect.height + padding
+
+                scrollableContainer.scrollTo({
+                    top: targetScrollTop,
+                    behavior,
+                })
+            }
+        },
+        [findScrollableAncestor, padding, behavior]
+    )
+
+    return { scrollIntoView, findScrollableAncestor }
+}
+
+export default useSectionScroll

package/lib/hooks/useTruncationDetection.ts

@@ -0,0 +1,87 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+    type DependencyList,
+} from 'react'
+import { useResizeObserver } from './useResizeObserver'
+
+export type UseTruncationDetectionOptions = {
+    disabled?: boolean
+    deps?: DependencyList
+}
+
+export default function useTruncationDetection<
+    T extends HTMLElement = HTMLElement,
+>(
+    elementRef: React.RefObject<T | null>,
+    selector?: string,
+    options: UseTruncationDetectionOptions = {}
+): boolean {
+    const { disabled = false, deps = [] } = options
+    const [isTruncated, setIsTruncated] = useState(false)
+    const rafRef = useRef<number | null>(null)
+
+    const checkTruncation = useCallback(() => {
+        if (disabled) {
+            setIsTruncated(false)
+            return
+        }
+
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current)
+        }
+
+        rafRef.current = requestAnimationFrame(() => {
+            const container = elementRef.current
+            if (!container) {
+                setIsTruncated(false)
+                return
+            }
+
+            const targetElement = selector
+                ? (container.querySelector(selector) as HTMLElement | null)
+                : container
+
+            if (!targetElement) {
+                setIsTruncated(false)
+                return
+            }
+
+            const truncated =
+                targetElement.scrollWidth > targetElement.clientWidth &&
+                targetElement.clientWidth > 0
+
+            setIsTruncated(truncated)
+            rafRef.current = null
+        })
+    }, [elementRef, selector, disabled])
+
+    useResizeObserver(elementRef, () => {
+        if (!disabled) {
+            checkTruncation()
+        }
+    })
+
+    useEffect(() => {
+        if (disabled) {
+            setIsTruncated(false)
+            return
+        }
+
+        checkTruncation()
+        const handleResize = () => checkTruncation()
+        window.addEventListener('resize', handleResize, { passive: true })
+
+        return () => {
+            window.removeEventListener('resize', handleResize)
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current)
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- deps is intentionally spread to allow custom dependencies
+    }, [disabled, checkTruncation, ...deps])
+
+    return isTruncated
+}

package/lib/main.ts

@@ -0,0 +1,97 @@
+import { patchResizeObserver } from './pollyfills/resizeObserverPollyfill'
+
+patchResizeObserver()
+
+// ---------------------------------------------------------------------------
+// Core exports
+// ---------------------------------------------------------------------------
+export * from './context'
+export * from './tokens'
+export { FOUNDATION_THEME } from './tokens'
+export type { FoundationTokenType } from './tokens/theme.token'
+export { Theme } from './context'
+
+// ---------------------------------------------------------------------------
+// V1 components
+// ---------------------------------------------------------------------------
+export * from './components/Accordion'
+export * from './components/Alert'
+export * from './components/Avatar'
+export * from './components/AvatarGroup'
+export * from './components/Badge'
+export * from './components/Breadcrumb'
+export * from './components/Button'
+export * from './components/ButtonGroup'
+export * from './components/Card'
+export * from './components/Charts'
+export * from './components/ChatInput'
+export * from './components/Checkbox'
+export * from './components/CodeBlock'
+export * from './components/CodeEditor'
+export * from './components/DataTable'
+export * from './components/DateRangePicker'
+export * from './components/Directory'
+export * from './components/Drawer'
+export * from './components/Inputs'
+export * from './components/KeyValuePair'
+export * from './components/Menu'
+export * from './components/Modal'
+export * from './components/MultiSelect'
+export * from './components/Popover'
+export * from './components/ProgressBar'
+export * from './components/Radio'
+export * from './components/Sidebar'
+export * from './components/Skeleton'
+export * from './components/SingleSelect'
+export * from './components/Slider'
+export * from './components/Snackbar'
+export * from './components/SplitTag'
+export * from './components/StatCard'
+export * from './components/Stepper'
+export * from './components/Switch'
+export * from './components/Tabs'
+export * from './components/Tags'
+export * from './components/Tooltip'
+export * from './components/Upload'
+export * from './components/VirtualList'
+
+// ---------------------------------------------------------------------------
+// V2 components (namespaced to avoid conflicts with V1)
+// ---------------------------------------------------------------------------
+export * from './components/ButtonV2'
+export * from './components/AlertV2'
+export * from './components/TagV2'
+export * from './components/SelectorV2/CheckboxV2'
+export * from './components/SelectorV2/RadioV2'
+export * from './components/SelectorV2/SwitchV2'
+export * from './components/BreadcrumbV2'
+export * from './components/AvatarV2'
+export * from './components/TooltipV2'
+export * from './components/ProgressBarV2'
+export * from './components/StatCardV2'
+export * from './components/AccordionV2'
+export * from './components/InputsV2/TextInputV2'
+export * from './components/InputsV2/TextAreaV2'
+export * from './components/DrawerV2'
+export * from './components/TabsV2'
+export * from './components/ChartsV2'
+export * from './components/ButtonV2/ButtonGroupV2'
+export * from './components/common/TruncatedTextWithTooltipV2'
+export * from './components/PopoverV2'
+export * from './components/SidebarV2'
+export * from './components/StepperV2'
+export * from './components/TagGroupV2'
+export * from './components/Timeline'
+export * from './components/TopbarV2'
+export * from './components/SelectV2'
+export * from './components/InputsV2/MultiValueInputV2'
+export * from './components/InputsV2/NumberInputV2'
+export * from './components/InputsV2/OTPInputV2'
+export * from './components/InputsV2/SearchInputV2'
+export * from './components/SnackbarV2'
+export * from './components/CodeEditorV2'
+export * from './components/KeyValuePairV2'
+export * from './components/MenuV2'
+export * from './components/MultiSelectV2'
+export * from './components/SingleSelectV2'
+export * from './components/InputsV2/ChatInputV2'

package/lib/node.ts

@@ -0,0 +1,39 @@
+/**
+ * Node-safe entrypoint for non-UI consumers (CLI / token-engine).
+ *
+ * This entry intentionally avoids importing any CSS or runtime UI code.
+ * Consumers that need styles should import `@juspay/blend-design-system/style.css`.
+ */
+
+export { Theme } from './context/theme.enum'
+
+export { default as FOUNDATION_THEME } from './tokens/theme.token'
+export type { FoundationTokenType } from './tokens/theme.token'
+
+export { getButtonV2Tokens } from './components/ButtonV2/buttonV2.tokens'
+export { getAccordionV2Tokens } from './components/AccordionV2/accordionV2.tokens'
+export { getAlertV2Tokens } from './components/AlertV2/alertV2.tokens'
+export { getAvatarV2Tokens } from './components/AvatarV2/avatarV2.tokens'
+export { getBreadcrumbV2Tokens } from './components/BreadcrumbV2/breadcrumbV2.tokens'
+export { getChartV2Tokens } from './components/ChartsV2/chartV2.tokens'
+export { getCheckboxV2Tokens } from './components/SelectorV2/CheckboxV2/checkboxV2.tokens'
+export { getCodeEditorV2Tokens } from './components/CodeEditorV2/codeEditorV2.tokens'
+export { getKeyValuePairV2Tokens } from './components/KeyValuePairV2/keyValuePairV2.tokens'
+export { getMenuV2Tokens } from './components/MenuV2/menuV2.tokens'
+export { getMultiSelectV2Tokens } from './components/MultiSelectV2/multiSelectV2.tokens'
+export { getPopoverV2Tokens } from './components/PopoverV2/popoverV2.token'
+export { getProgressBarV2Tokens } from './components/ProgressBarV2/progressBarV2.tokens'
+export { getRadioV2Tokens } from './components/SelectorV2/RadioV2/radioV2.tokens'
+export { getSingleSelectV2Tokens } from './components/SingleSelectV2/singleSelectV2.tokens'
+export { getSwitchV2Tokens } from './components/SelectorV2/SwitchV2/switchV2.tokens'
+export { getSnackbarV2Tokens } from './components/SnackbarV2/snackbarV2.tokens'
+export { getStatCardV2Tokens } from './components/StatCardV2/statcardV2.tokens'
+export { getTabsV2Tokens } from './components/TabsV2/tabsV2.tokens'
+export { getTagV2Tokens } from './components/TagV2/tagV2.tokens'
+export { getTextInputV2Tokens } from './components/InputsV2/TextInputV2/TextInputV2.tokens'
+
+export { getTimelineTokens } from './components/Timeline/timeline.token'
+export { getTopbarTokens } from './components/Topbar/topbar.tokens'
+export { getSidebarTokens } from './components/Sidebar/sidebar.tokens'
+export { getMobileNavigationTokens } from './components/Sidebar/SidebarMobile/mobile.tokens'
+export { getTooltipV2Tokens } from './components/TooltipV2/tooltipV2.tokens'

package/lib/pollyfills/resizeObserverPollyfill.ts

@@ -0,0 +1,35 @@
+export function patchResizeObserver() {
+    if (
+        typeof window === 'undefined' ||
+        typeof ResizeObserver === 'undefined'
+    ) {
+        return
+    }
+
+    const OriginalResizeObserver = window.ResizeObserver
+
+    window.ResizeObserver = class PatchedResizeObserver extends (
+        OriginalResizeObserver
+    ) {
+        constructor(callback: ResizeObserverCallback) {
+            const wrappedCallback: ResizeObserverCallback = (
+                entries,
+                observer
+            ) => {
+                window.requestAnimationFrame(() => {
+                    try {
+                        callback(entries, observer)
+                    } catch (e: unknown) {
+                        if (
+                            e instanceof Error &&
+                            !e.message?.includes('ResizeObserver loop')
+                        ) {
+                            throw e
+                        }
+                    }
+                })
+            }
+            super(wrappedCallback)
+        }
+    }
+}

package/lib/token-engine-server.ts

@@ -0,0 +1,95 @@
+/**
+ * Token Engine (server-safe) — re-exported from @blend-design/token-engine/server
+ *
+ * Consumer import: import { validateBrandConfig } from '@juspay/blend-design-system/tokens/server'
+ *
+ * No React dependencies. Safe for Cloud Run, Next.js API routes, CLI, etc.
+ */
+
+export {
+    validateBrandConfig,
+    diffBrandConfigs,
+    generateColorScale,
+    isValidHexColor,
+    getContrastRatio,
+    getContrastRatioHex,
+    analyzeContrast,
+    validatePaletteContrast,
+    suggestForeground,
+    hexToRgb,
+    relativeLuminance,
+    meetsWCAG,
+    getPreset,
+    listPresets,
+    PRESETS,
+    PRESET_BLEND_DEFAULT,
+    PRESET_JUSPAY,
+    PRESET_PURPLE,
+    PRESET_GREEN,
+    PRESET_ORANGE,
+    resolveWithInheritance,
+    validateAgainstLocks,
+    extractOverridePaths,
+    RADIUS_PRESETS,
+    BRANCH_ID_PATTERN,
+    VERSION_PATTERN,
+    generateBranchId,
+    parseBranchId,
+    validateBranchId,
+    validateVersion,
+    incrementVersion,
+    TEAM_ROLE_PERMISSIONS,
+    BRANCH_COLLECTION,
+    VERSION_SUBCOLLECTION,
+    SNAPSHOT_SUBCOLLECTION,
+    versionsPath,
+    snapshotsPath,
+    getDefaultPreferences,
+    getDefaultOnboardingState,
+    STORAGE_KEYS,
+    canUserPerformAction,
+} from '@blend-design/token-engine/server'
+
+export type {
+    BrandConfig,
+    BrandColors,
+    ColorOverrides,
+    RadiusOverrides,
+    ShadowOverrides,
+    FontOverrides,
+    ComponentOverrides,
+    RadiusPreset,
+    ValidationResult,
+    ValidationError,
+    ValidationWarning,
+    TokenDiff,
+    ContrastResult,
+    ContrastViolation,
+    WCAGLevel,
+    WCAGContext,
+    LockViolation,
+    InheritanceResult,
+    TokenLockEntry,
+    BranchStatus,
+    BranchVisibility,
+    BranchPermissions,
+    BranchOwner,
+    BranchMeta,
+    BranchReference,
+    Branch,
+    CreateBranchInput,
+    UpdateBranchInput,
+    Version,
+    CreateVersionInput,
+    Snapshot,
+    CreateSnapshotInput,
+    BranchListFilters,
+    BranchListOptions,
+    BranchListResult,
+    BranchDiff,
+    ResolvedTokensResponse,
+    TeamRole,
+    TeamPermissions,
+    UserPreferences,
+    OnboardingState,
+} from '@blend-design/token-engine/server'