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

package/lib/components/ChartsV2/chartV2.tokens.ts

@@ -1,109 +1,13 @@
-import { CSSObject } from 'styled-components'
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getChartV2DarkTokens } from './chartV2.dark.tokens'
 import { getChartV2LightTokens } from './chartV2.light.tokens'
+import type { ResponsiveChartV2Tokens } from './chartV2.tokens.types'
 
-export type ChartV2TokensType = {
-    border: CSSObject['border']
-    borderRadius: CSSObject['borderRadius']
-    boxShadow: CSSObject['boxShadow']
-    backgroundColor: CSSObject['backgroundColor']
-    header: {
-        padding: {
-            top: CSSObject['padding']
-            right: CSSObject['padding']
-            bottom: CSSObject['padding']
-            left: CSSObject['padding']
-        }
-        backgroundColor: CSSObject['backgroundColor']
-        borderBottom: CSSObject['borderBottom']
-    }
-    legends: {
-        gap: CSSObject['gap']
-        legendItem: {
-            gap: CSSObject['gap']
-            shape: {
-                width: CSSObject['width']
-                height: CSSObject['height']
-                borderRadius: CSSObject['borderRadius']
-            }
-            text: {
-                gap: CSSObject['gap']
-                name: {
-                    fontSize: CSSObject['fontSize']
-
-                    fontWeight: CSSObject['fontWeight']
-                    lineHeight: CSSObject['lineHeight']
-                    color: CSSObject['color']
-                }
-                value: {
-                    fontSize: CSSObject['fontSize']
-                    fontWeight: CSSObject['fontWeight']
-                    lineHeight: CSSObject['lineHeight']
-                    color: CSSObject['color']
-                }
-                separator: {
-                    color: CSSObject['color']
-                    width: CSSObject['width']
-                    height: CSSObject['height']
-                }
-            }
-        }
-    }
-    chart: {
-        backgroundColor: CSSObject['backgroundColor']
-        xAxis: {
-            title: {
-                fontSize: CSSObject['fontSize']
-                color: CSSObject['color']
-                fontWeight: CSSObject['fontWeight']
-                lineHeight: CSSObject['lineHeight']
-            }
-            labels: {
-                fontSize: CSSObject['fontSize']
-                color: CSSObject['color']
-                fontWeight: CSSObject['fontWeight']
-                lineHeight: CSSObject['lineHeight']
-            }
-            line: {
-                width: CSSObject['width']
-                color: CSSObject['color']
-            }
-            gridLine: {
-                width: CSSObject['width']
-                color: CSSObject['color']
-            }
-        }
-        yAxis: {
-            title: {
-                fontSize: CSSObject['fontSize']
-                color: CSSObject['color']
-                fontWeight: CSSObject['fontWeight']
-                lineHeight: CSSObject['lineHeight']
-            }
-            labels: {
-                fontSize: CSSObject['fontSize']
-                color: CSSObject['color']
-                fontWeight: CSSObject['fontWeight']
-                lineHeight: CSSObject['lineHeight']
-            }
-            line: {
-                width: CSSObject['width']
-                color: CSSObject['color']
-            }
-            gridLine: {
-                width: CSSObject['width']
-                color: CSSObject['color']
-            }
-        }
-    }
-}
-
-export type ResponsiveChartV2Tokens = {
-    [key in keyof BreakpointType]: ChartV2TokensType
-}
+export type {
+    ChartV2TokensType,
+    ResponsiveChartV2Tokens,
+} from './chartV2.tokens.types'
 
 export const getChartV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/ChartsV2/chartV2.tokens.types.ts

@@ -0,0 +1,102 @@
+import { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type ChartV2TokensType = {
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    boxShadow: CSSObject['boxShadow']
+    backgroundColor: CSSObject['backgroundColor']
+    header: {
+        padding: {
+            top: CSSObject['padding']
+            right: CSSObject['padding']
+            bottom: CSSObject['padding']
+            left: CSSObject['padding']
+        }
+        backgroundColor: CSSObject['backgroundColor']
+        borderBottom: CSSObject['borderBottom']
+    }
+    legends: {
+        gap: CSSObject['gap']
+        legendItem: {
+            gap: CSSObject['gap']
+            shape: {
+                width: CSSObject['width']
+                height: CSSObject['height']
+                borderRadius: CSSObject['borderRadius']
+            }
+            text: {
+                gap: CSSObject['gap']
+                name: {
+                    fontSize: CSSObject['fontSize']
+
+                    fontWeight: CSSObject['fontWeight']
+                    lineHeight: CSSObject['lineHeight']
+                    color: CSSObject['color']
+                }
+                value: {
+                    fontSize: CSSObject['fontSize']
+                    fontWeight: CSSObject['fontWeight']
+                    lineHeight: CSSObject['lineHeight']
+                    color: CSSObject['color']
+                }
+                separator: {
+                    color: CSSObject['color']
+                    width: CSSObject['width']
+                    height: CSSObject['height']
+                }
+            }
+        }
+    }
+    chart: {
+        backgroundColor: CSSObject['backgroundColor']
+        xAxis: {
+            title: {
+                fontSize: CSSObject['fontSize']
+                color: CSSObject['color']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+            labels: {
+                fontSize: CSSObject['fontSize']
+                color: CSSObject['color']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+            line: {
+                width: CSSObject['width']
+                color: CSSObject['color']
+            }
+            gridLine: {
+                width: CSSObject['width']
+                color: CSSObject['color']
+            }
+        }
+        yAxis: {
+            title: {
+                fontSize: CSSObject['fontSize']
+                color: CSSObject['color']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+            labels: {
+                fontSize: CSSObject['fontSize']
+                color: CSSObject['color']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+            line: {
+                width: CSSObject['width']
+                color: CSSObject['color']
+            }
+            gridLine: {
+                width: CSSObject['width']
+                color: CSSObject['color']
+            }
+        }
+    }
+}
+
+export type ResponsiveChartV2Tokens = {
+    [key in keyof BreakpointType]: ChartV2TokensType
+}

package/lib/components/ChartsV2/chartV2.types.ts

@@ -3,8 +3,8 @@ import { HighchartsReactProps } from 'highcharts-react-official'
 
 import type { HighchartsReactRefObject } from 'highcharts-react-official'
 import Highcharts from 'highcharts'
-import type { ButtonProps } from '../Button'
-import type { SkeletonVariant } from '../Skeleton'
+import type { ButtonProps } from '../Button/types'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export const ChartV2BaseInstance = Highcharts
 export type ChartV2Type = typeof Highcharts

package/lib/components/ChatInput/AttachmentFile.tsx

@@ -6,23 +6,14 @@ import React, {
     useRef,
     useState,
 } from 'react'
-import {
-    AttachedFile,
-    Button,
-    ButtonSize,
-    ButtonSubType,
-    ButtonType,
-    MenuProps,
-    Tag,
-    TagColor,
-    TagSize,
-    TagVariant,
-    Tooltip,
-    Menu,
-} from '../../main'
+import type { AttachedFile } from './types'
+import { Button, ButtonSize, ButtonSubType, ButtonType } from '../Button'
+import { Menu, type MenuProps } from '../Menu'
+import { Tag, TagColor, TagSize, TagVariant } from '../Tags'
+import { Tooltip } from '../Tooltip'
 import Block from '../Primitives/Block/Block'
 import { capitalizeFirstLetter } from '../../global-utils/GlobalUtils'
-import { getDocIcon } from './ChatInput'
+import { getDocIcon } from './getDocIcon'
 import { Plus, X } from 'lucide-react'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { ChatInputTokensType } from './chatInput.tokens'

package/lib/components/ChatInput/ChatInput.tsx

@@ -7,13 +7,13 @@ import React, {
     useEffect,
     useId,
 } from 'react'
-import { ChatInputProps, AttachedFile, TopQuery } from './types'
+import { ChatInputProps, TopQuery } from './types'
 import Block from '../Primitives/Block/Block'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import Button from '../Button/Button'
 import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types'
 import Text from '../Text/Text'
-import { Paperclip, FileMinus, Image, FileText } from 'lucide-react'
+import { Paperclip } from 'lucide-react'
 import { ChatInputTokensType } from './chatInput.tokens'
 import { FOUNDATION_THEME } from '../../tokens'
 import {
@@ -30,38 +30,7 @@ import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import PrimitiveTextarea from '../Primitives/PrimitiveTextArea'
 import AttachmentFile from './AttachmentFile'
 
-export const getDocIcon = (fileType: AttachedFile['type']): React.ReactNode => {
-    switch (fileType) {
-        case 'image':
-            return <Image color={FOUNDATION_THEME.colors.gray[600]} size={12} />
-        case 'pdf':
-            return (
-                <FileMinus
-                    color={FOUNDATION_THEME.colors.gray[600]}
-                    size={12}
-                />
-            )
-        case 'csv':
-            return (
-                <FileMinus
-                    color={FOUNDATION_THEME.colors.gray[600]}
-                    size={12}
-                />
-            )
-        case 'text':
-            return (
-                <FileText color={FOUNDATION_THEME.colors.gray[600]} size={12} />
-            )
-        default:
-            return (
-                <FileMinus
-                    color={FOUNDATION_THEME.colors.gray[600]}
-                    size={12}
-                />
-            )
-    }
-    return '📎'
-}
+export { getDocIcon } from './getDocIcon'
 
 const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
     (

package/lib/components/ChatInput/MobileChatInput.tsx

@@ -6,7 +6,8 @@ import PrimitiveTextarea from '../Primitives/PrimitiveTextArea'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import { FOUNDATION_THEME } from '../../tokens'
 import { ChatInputTokensType } from './chatInput.tokens'
-import { AttachedFile, MenuProps } from '../../main'
+import type { AttachedFile } from './types'
+import type { MenuProps } from '../Menu/types'
 import AttachmentFile from './AttachmentFile'
 import { truncatePlaceholder } from './utils'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'

package/lib/components/ChatInput/getDocIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { FileMinus, Image, FileText } from 'lucide-react'
+import type { AttachedFile } from './types'
+import { FOUNDATION_THEME } from '../../tokens'
+
+export const getDocIcon = (fileType: AttachedFile['type']): React.ReactNode => {
+    switch (fileType) {
+        case 'image':
+            return <Image color={FOUNDATION_THEME.colors.gray[600]} size={12} />
+        case 'pdf':
+            return (
+                <FileMinus
+                    color={FOUNDATION_THEME.colors.gray[600]}
+                    size={12}
+                />
+            )
+        case 'csv':
+            return (
+                <FileMinus
+                    color={FOUNDATION_THEME.colors.gray[600]}
+                    size={12}
+                />
+            )
+        case 'text':
+            return (
+                <FileText color={FOUNDATION_THEME.colors.gray[600]} size={12} />
+            )
+        default:
+            return (
+                <FileMinus
+                    color={FOUNDATION_THEME.colors.gray[600]}
+                    size={12}
+                />
+            )
+    }
+}

package/lib/components/ChatInput/utils.ts

@@ -2,7 +2,7 @@ import { AttachedFile } from './types'
 import { MenuItemType } from '../Menu/types'
 import { X } from 'lucide-react'
 import React from 'react'
-import { getDocIcon } from './ChatInput'
+import { getDocIcon } from './getDocIcon'
 import { capitalizeFirstLetter } from '../../global-utils/GlobalUtils'
 
 /**

package/lib/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId } from 'react'
+import { forwardRef, useEffect, useId, useState } from 'react'
 import { Check, Minus } from 'lucide-react'
 import type { CheckboxProps } from './types'
 import { CheckboxSize } from './types'
@@ -46,6 +46,26 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         const generatedId = useId()
         const uniqueId = id || generatedId
         const shouldShake = useErrorShake(error)
+        const isControlled = checked !== undefined
+        const [uncontrolledChecked, setUncontrolledChecked] = useState<
+            boolean | 'indeterminate'
+        >(defaultChecked ?? false)
+        const resolvedChecked = isControlled ? checked : uncontrolledChecked
+
+        useEffect(() => {
+            if (!isControlled) {
+                setUncontrolledChecked(defaultChecked ?? false)
+            }
+        }, [defaultChecked, isControlled])
+
+        const handleCheckedChange = (
+            nextChecked: boolean | 'indeterminate'
+        ) => {
+            if (!isControlled) {
+                setUncontrolledChecked(nextChecked)
+            }
+            onCheckedChange?.(nextChecked)
+        }
 
         const labelMaxLength = maxLength?.label
         const subtextMaxLength = maxLength?.subtext
@@ -76,28 +96,30 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
                     id={uniqueId}
                     name={name}
                     ref={ref}
-                    checked={checked ?? defaultChecked ?? false}
-                    onCheckedChange={onCheckedChange}
+                    {...(isControlled
+                        ? { checked }
+                        : { defaultChecked: defaultChecked ?? false })}
+                    onCheckedChange={handleCheckedChange}
                     disabled={disabled}
                     required={required}
                     size={size}
                     $isDisabled={disabled}
-                    $checked={checked ?? defaultChecked ?? false}
+                    $checked={resolvedChecked}
                     $error={error}
                     style={getErrorShakeStyle(shouldShake)}
                     {...ariaAttributes}
                     {...restProps}
                     data-element="checkbox"
                     data-state={
-                        checked === 'indeterminate'
+                        resolvedChecked === 'indeterminate'
                             ? 'indeterminate'
-                            : checked
+                            : resolvedChecked
                               ? 'checked'
                               : 'unchecked'
                     }
                 >
                     <CheckboxIndicator
-                        checked={checked ?? defaultChecked ?? false}
+                        checked={resolvedChecked}
                         size={size}
                         tokens={tokens}
                         disabled={disabled}

package/lib/components/CodeBlock/CodeBlock.tsx

@@ -7,6 +7,7 @@ import {
     useCallback,
     useMemo,
 } from 'react'
+import styled from 'styled-components'
 import { Check, Copy, FileCode } from 'lucide-react'
 import Block from '../Primitives/Block/Block'
 import Button from '../Button/Button'
@@ -33,6 +34,21 @@ import {
     buildDiffViewSegments,
 } from './utils'
 
+const CopyOverlay = styled.div`
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+
+    .code-body:hover & {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`
+
 const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     (
         {
@@ -255,7 +271,7 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                                 type="button"
                                 onClick={copyToClipboard}
                                 buttonType={ButtonType.SECONDARY}
-                                subType={ButtonSubType.ICON_ONLY}
+                                subType={ButtonSubType.INLINE}
                                 size={ButtonSize.SMALL}
                                 aria-label={
                                     isCopied
@@ -284,8 +300,38 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                     }
                     backgroundColor={tokens.body.backgroundColor}
                     overflow="auto"
+                    position={
+                        !showHeader && showCopyButton ? 'relative' : undefined
+                    }
+                    className={
+                        !showHeader && showCopyButton ? 'code-body' : undefined
+                    }
                     style={{ maxHeight: maxHeight || 'none' }}
                 >
+                    {!showHeader && showCopyButton && (
+                        <CopyOverlay>
+                            <Button
+                                data-element="copy-button"
+                                type="button"
+                                onClick={copyToClipboard}
+                                buttonType={ButtonType.SECONDARY}
+                                subType={ButtonSubType.ICON_ONLY}
+                                size={ButtonSize.SMALL}
+                                aria-label={
+                                    isCopied
+                                        ? 'Code copied to clipboard'
+                                        : 'Copy code'
+                                }
+                                leadingIcon={
+                                    isCopied ? (
+                                        <Check size={16} aria-hidden="true" />
+                                    ) : (
+                                        <Copy size={16} aria-hidden="true" />
+                                    )
+                                }
+                            />
+                        </CopyOverlay>
+                    )}
                     {isDiffMode && diffLines?.length ? (
                         <CodeBlockDiffView
                             diffLines={diffLines}

package/lib/components/CodeBlock/codeBlock.token.ts

@@ -130,9 +130,9 @@ export const getCodeBlockTokens = (
                 borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
                 padding: {
                     x: foundationToken.unit[12],
-                    y: foundationToken.unit[10],
+                    y: foundationToken.unit[8],
                 },
-                gap: foundationToken.unit[8],
+                gap: foundationToken.unit[6],
                 icon: {
                     width: 16,
                 },
@@ -229,11 +229,11 @@ export const getCodeBlockTokens = (
                 borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
                 padding: {
                     x: foundationToken.unit[16],
-                    y: foundationToken.unit[10],
+                    y: foundationToken.unit[8],
                 },
-                gap: foundationToken.unit[12],
+                gap: foundationToken.unit[8],
                 icon: {
-                    width: 20,
+                    width: 16,
                 },
                 text: {
                     fontSize: foundationToken.font.size.body.md.fontSize,

package/lib/components/CodeEditor/CodeEditor.tsx

@@ -1,9 +1,8 @@
-import { forwardRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import Block from '../Primitives/Block/Block'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import type { CodeBlockTokenType } from '../CodeBlock/codeBlock.token'
 import { CodeEditorVariant, type CodeEditorProps } from './types'
-import { createCopyToClipboard } from '../CodeBlock/utils'
 import { shouldShowLineNumbers, getContainerStyles } from './utils'
 import { CodeEditorHeader } from './CodeEditorHeader'
 import { MonacoEditorWrapper } from './MonacoEditorWrapper'
@@ -37,6 +36,31 @@ const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
     ) => {
         const tokens = useResponsiveTokens<CodeBlockTokenType>('CODE_BLOCK')
         const [isCopied, setIsCopied] = useState(false)
+        const copyFeedbackTimeoutRef = useRef<ReturnType<
+            typeof setTimeout
+        > | null>(null)
+
+        useEffect(() => {
+            return () => {
+                if (copyFeedbackTimeoutRef.current !== null) {
+                    clearTimeout(copyFeedbackTimeoutRef.current)
+                }
+            }
+        }, [])
+
+        const copyToClipboard = useCallback(() => {
+            navigator.clipboard.writeText(value)
+            setIsCopied(true)
+
+            if (copyFeedbackTimeoutRef.current !== null) {
+                clearTimeout(copyFeedbackTimeoutRef.current)
+            }
+
+            copyFeedbackTimeoutRef.current = setTimeout(() => {
+                setIsCopied(false)
+                copyFeedbackTimeoutRef.current = null
+            }, 2000)
+        }, [value])
 
         // Determine if line numbers should be shown
         const shouldShowLineNumbersValue = shouldShowLineNumbers(
@@ -44,8 +68,6 @@ const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
             variant
         )
 
-        // Handlers
-        const copyToClipboard = createCopyToClipboard(value, setIsCopied)
         const containerStyles = getContainerStyles(minHeight, maxHeight)
 
         return (

package/lib/components/CodeEditor/MonacoEditorWrapper.tsx

@@ -342,6 +342,7 @@ export const MonacoEditorWrapper = ({
     const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null)
     const monacoRef = useRef<typeof import('monaco-editor') | null>(null)
     const shortcutDisposables = useRef<Monaco.IDisposable[]>([])
+    const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
     const [isEditorReady, setIsEditorReady] = useState(false)
     const monacoLanguage = useMemo(() => mapLanguage(language), [language])
 
@@ -449,6 +450,14 @@ export const MonacoEditorWrapper = ({
         }
     }, [disposeShortcuts, isEditorReady, registerKeyboardShortcuts])
 
+    useEffect(() => {
+        return () => {
+            if (focusTimeoutRef.current !== null) {
+                clearTimeout(focusTimeoutRef.current)
+            }
+        }
+    }, [])
+
     const handleEditorDidMount: OnMount = (editor, monacoInstance) => {
         editorRef.current = editor
         monacoRef.current = monacoInstance
@@ -502,7 +511,10 @@ export const MonacoEditorWrapper = ({
         editor.onDidBlurEditorText(() => onBlur?.())
 
         if (autoFocus && !disabled && !readOnly) {
-            setTimeout(() => editor.focus(), EDITOR_FOCUS_DELAY_MS)
+            focusTimeoutRef.current = setTimeout(
+                () => editor.focus(),
+                EDITOR_FOCUS_DELAY_MS
+            )
         }
     }
 

package/lib/components/CodeEditorV2/codeEditorV2.dark.tokens.ts

@@ -1,6 +1,7 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
-import { CodeEditorV2DiffLineType, MonacoTheme } from './codeEditorV2.types'
+import type { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens.types'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
+import { MonacoTheme } from './codeEditorV2.types'
 
 export const darkCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType

package/lib/components/CodeEditorV2/codeEditorV2.light.token.ts

@@ -1,6 +1,7 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
-import { CodeEditorV2DiffLineType, MonacoTheme } from './codeEditorV2.types'
+import type { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens.types'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
+import { MonacoTheme } from './codeEditorV2.types'
 
 export const lightCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType