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

package/dist/tokens.js

@@ -1,5 +1,5 @@
-import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as S, f as p, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as _, q as m, r as B, s as L, t as M, u as w, v as j, w as U, x as D, y as G, z as H } from "./node-C2uf3sNA.js";
-import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as Se, canUserPerformAction as pe, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as _e, hexToRgb as me, incrementVersion as Be, isValidHexColor as Le, listPresets as Me, meetsWCAG as we, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./node-C2uf3sNA.js";
+import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as pe, canUserPerformAction as Se, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as me, hexToRgb as _e, incrementVersion as Be, isValidHexColor as Le, listPresets as we, meetsWCAG as Me, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
 function O(e) {
   const o = typeof structuredClone == "function" ? structuredClone(u) : JSON.parse(JSON.stringify(u));
   return x(o, e), K(o, e), F(o, e), J(o, e), o;
@@ -30,8 +30,9 @@ function F(e, o) {
 function J(e, o) {
   if (o.font) {
     if (o.font.family) {
-      const t = e.font;
-      "family" in t && (t.family = o.font.family);
+      const t = e.font.family, n = o.font.family.trim(), s = n.toLowerCase() === "system ui" ? "system-ui, sans-serif" : n;
+      for (const r of Object.keys(t))
+        r !== "mono" && (t[r] = s);
     }
     if (o.font.weight) {
       const t = e.font.weight;
@@ -46,12 +47,12 @@ const l = {
   ALERTV2: D,
   AVATARV2: U,
   BREADCRUMBV2: j,
-  CHARTSV2: w,
-  CHECKBOXV2: M,
+  CHARTSV2: M,
+  CHECKBOXV2: w,
   CODEEDITORV2: L,
   KEYVALUEPAIRV2: B,
-  MENU_V2: m,
-  MULTI_SELECT_V2: _,
+  MENU_V2: _,
+  MULTI_SELECT_V2: m,
   POPOVERV2: P,
   PROGRESS_BARV2: I,
   RADIOV2: N,
@@ -60,8 +61,8 @@ const l = {
   SNACKBARV2: A,
   STATCARDV2: R,
   TABSV2: h,
-  TAGV2: p,
-  TEXT_INPUTV2: S,
+  TAGV2: S,
+  TEXT_INPUTV2: p,
   TIMELINE: v,
   TOOLTIPV2: g,
   TOPBARV2: V,
@@ -198,9 +199,9 @@ export {
   te as V2_COMPONENT_KEYS,
   ge as VERSION_PATTERN,
   ve as VERSION_SUBCOLLECTION,
-  Se as analyzeContrast,
+  pe as analyzeContrast,
   O as buildBrandFoundation,
-  pe as canUserPerformAction,
+  Se as canUserPerformAction,
   z as clearTokenCache,
   he as diffBrandConfigs,
   Re as extractOverridePaths,
@@ -210,12 +211,12 @@ export {
   Ne as getContrastRatioHex,
   Ie as getDefaultOnboardingState,
   Pe as getDefaultPreferences,
-  _e as getPreset,
-  me as hexToRgb,
+  me as getPreset,
+  _e as hexToRgb,
   Be as incrementVersion,
   Le as isValidHexColor,
-  Me as listPresets,
-  we as meetsWCAG,
+  we as listPresets,
+  Me as meetsWCAG,
   je as parseBranchId,
   oe as registerResolver,
   Ue as relativeLuminance,

package/lib/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 import {
     type AvatarProps,
     AvatarSize,
@@ -33,6 +33,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
         ref
     ) => {
         const [imageError, setImageError] = useState(false)
+
+        useEffect(() => {
+            setImageError(false)
+        }, [src])
+
         const hasImage = src && !imageError
         const shouldShowSkeleton = skeleton?.show
         const variant = hasImage ? 'withImage' : 'withoutImage'

package/lib/components/AvatarGroup/AvatarGroup.tsx

@@ -17,7 +17,7 @@ import { AvatarTokensType } from '../Avatar/avatar.tokens'
 const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     (
         {
-            avatars,
+            avatars = [],
             maxCount = 5,
             size = AvatarSize.MD,
             shape = AvatarShape.CIRCULAR,

package/lib/components/AvatarV2/AvatarV2.tsx

@@ -1,4 +1,9 @@
-import React, { forwardRef, useState, type ReactElement } from 'react'
+import React, {
+    forwardRef,
+    useEffect,
+    useState,
+    type ReactElement,
+} from 'react'
 import {
     AvatarV2Props,
     AvatarV2Size,
@@ -176,6 +181,10 @@ const AvatarV2 = forwardRef<HTMLDivElement, AvatarV2Props>(
     ) => {
         const [imageError, setImageError] = useState(false)
 
+        useEffect(() => {
+            setImageError(false)
+        }, [src])
+
         const tokens = useResponsiveTokens<AvatarV2TokensType>('AVATARV2')
 
         const hasImage = src && !imageError

package/lib/components/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,12 @@ import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
 import { FOUNDATION_THEME } from '../../tokens'
 import type { BreadcrumbTokenType } from './breadcrumb.tokens'
-import type { BreadcrumbItemType, BreadcrumbSkeletonProps } from './types'
+import type {
+    BreadcrumbItemType,
+    BreadcrumbProps,
+    BreadcrumbSkeletonProps,
+} from './types'
+import { normalizeBreadcrumbItems } from './types'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { SkeletonVariant } from '../Skeleton'
 import BreadcrumbSkeleton from './BreadcrumbSkeleton'
@@ -111,13 +116,9 @@ const BreadcrumbItem = ({
     )
 }
 
-const Breadcrumb = ({
-    items,
-    skeleton,
-}: {
-    items: BreadcrumbItemType[]
-    skeleton?: BreadcrumbSkeletonProps
-}) => {
+const Breadcrumb = ({ items: itemsProp, skeleton }: BreadcrumbProps) => {
+    const items = normalizeBreadcrumbItems(itemsProp)
+
     const breadcrumbTokens =
         useResponsiveTokens<BreadcrumbTokenType>('BREADCRUMB')
     if (items.length === 0) return null

package/lib/components/Breadcrumb/types.ts

@@ -5,6 +5,18 @@ export type BreadcrumbSkeletonProps = {
     variant: SkeletonVariant
 }
 
+/** Replace null, undefined, or non-array `items` with `[]`. */
+export function normalizeBreadcrumbItems(
+    items: BreadcrumbItemType[] | null | undefined
+): BreadcrumbItemType[] {
+    return Array.isArray(items) ? items : []
+}
+
+export type BreadcrumbProps = {
+    items: BreadcrumbItemType[] | null
+    skeleton?: BreadcrumbSkeletonProps
+}
+
 export type BreadcrumbItemType = {
     leftSlot?: React.ReactNode
     rightSlot?: React.ReactNode

package/lib/components/Button/ButtonBase.tsx

@@ -11,7 +11,7 @@ import type { ButtonTokensType } from './button.tokens'
 import { LoaderCircle } from 'lucide-react'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { FOUNDATION_THEME } from '../../tokens'
-const StyledButtonText = styled(Text)`
+const StyledButtonText = styled.span`
     display: flex;
     align-items: center;
     justify-content: center;

package/lib/components/Card/CardComponents.tsx

@@ -44,6 +44,37 @@ type CustomCardComponentProps = {
     baseId?: string
 }
 
+const isPlainTextContent = (content: React.ReactNode) =>
+    typeof content === 'string' || typeof content === 'number'
+
+const CardBodyContent = ({
+    content,
+    contentId,
+    cardToken,
+    describedBy,
+}: {
+    content: React.ReactNode
+    contentId: string
+    cardToken: CardTokenType
+    describedBy?: string
+}) => {
+    const sharedProps = {
+        id: contentId,
+        style: getBodyContentStyles(cardToken),
+        'aria-describedby': describedBy,
+    }
+
+    if (isPlainTextContent(content)) {
+        return (
+            <Text as="p" {...sharedProps}>
+                {content}
+            </Text>
+        )
+    }
+
+    return <Block {...sharedProps}>{content}</Block>
+}
+
 export const DefaultCard: React.FC<CardComponentProps> = ({
     props,
     cardToken,
@@ -80,6 +111,9 @@ export const DefaultCard: React.FC<CardComponentProps> = ({
     const subHeaderId = `${baseId}-subheader`
     const bodyTitleId = `${baseId}-body-title`
     const contentId = `${baseId}-content`
+    const contentDataId = isPlainTextContent(content)
+        ? String(content)
+        : undefined
 
     return (
         <>
@@ -228,22 +262,20 @@ export const DefaultCard: React.FC<CardComponentProps> = ({
                             ),
                         }}
                         data-element="card-body-content"
-                        data-id={content}
+                        data-id={contentDataId}
                     >
-                        <Text
-                            as="p"
-                            id={contentId}
-                            style={getBodyContentStyles(cardToken)}
-                            aria-describedby={
+                        <CardBodyContent
+                            content={content}
+                            contentId={contentId}
+                            cardToken={cardToken}
+                            describedBy={
                                 bodyTitle
                                     ? bodyTitleId
                                     : headerTitle
                                       ? headerTitleId
                                       : undefined
                             }
-                        >
-                            {content}
-                        </Text>
+                        />
                     </Block>
                 )}
 
@@ -461,20 +493,18 @@ const CardContent: React.FC<{
                 }
             >
                 {hasContent && (
-                    <Text
-                        as="p"
-                        id={contentId}
-                        style={getBodyContentStyles(cardToken)}
-                        aria-describedby={
+                    <CardBodyContent
+                        content={content}
+                        contentId={contentId}
+                        cardToken={cardToken}
+                        describedBy={
                             bodyTitle
                                 ? bodyTitleId
                                 : headerTitle
                                   ? headerTitleId
                                   : undefined
                         }
-                    >
-                        {content}
-                    </Text>
+                    />
                 )}
 
                 {hasActionButton && (
@@ -612,7 +642,12 @@ export const CustomCard: React.FC<CustomCardComponentProps> = ({
 
     return (
         <Block
+            display="flex"
+            flexDirection="column"
+            flexGrow={1}
             style={{
+                minHeight: 0,
+                width: '100%',
                 ...(maxHeight && {
                     overflowY: 'auto',
                     overflowX: 'hidden',

package/lib/components/Charts/ChartUtils.tsx

@@ -6,6 +6,13 @@ import {
 } from './types'
 import { parseTimestamp, dateFormat } from './DateTimeFormatter'
 
+/** Replace null, undefined, or non-array `data` with `[]` (empty / no-data state). */
+export function normalizeChartData(
+    data: NewNestedDataPoint[] | null | undefined
+): NewNestedDataPoint[] {
+    return Array.isArray(data) ? data : []
+}
+
 export function transformNestedData(
     data: NewNestedDataPoint[],
     selectedKeys: string[] = []

package/lib/components/Charts/Charts.tsx

@@ -5,7 +5,7 @@ import ChartHeader from './ChartHeader'
 import ChartLegends from './ChartLegend'
 import { useRef, useState, useEffect, useCallback, useId, useMemo } from 'react'
 import { renderChart } from './renderChart'
-import { transformNestedData } from './ChartUtils'
+import { normalizeChartData, transformNestedData } from './ChartUtils'
 import Block from '../../components/Primitives/Block/Block'
 import { ChartTokensType } from './chart.tokens'
 import { FOUNDATION_THEME } from '../../tokens'
@@ -20,7 +20,7 @@ import ChartsSkeleton from './ChartsSkeleton'
 
 const Charts: React.FC<ChartsProps> = ({
     chartType = ChartType.LINE,
-    data,
+    data: dataProp,
     colors,
     slot1,
     slot2,
@@ -46,6 +46,8 @@ const Charts: React.FC<ChartsProps> = ({
     lineSeriesKeys,
     ...props
 }) => {
+    const data = normalizeChartData(dataProp)
+
     const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
     const isSmallScreen = breakPointLabel === 'sm'
     const chartTokens = useResponsiveTokens<ChartTokensType>('CHARTS')

package/lib/components/Charts/CoreChart.tsx

@@ -3,11 +3,11 @@ import { ResponsiveContainer } from 'recharts'
 import { ChartType, CoreChartProps } from './types'
 import { DEFAULT_COLORS } from './utils'
 import { renderChart } from './renderChart'
-import { transformNestedData } from './ChartUtils'
+import { normalizeChartData, transformNestedData } from './ChartUtils'
 
 export const CoreChart: React.FC<CoreChartProps> = ({
     chartType = ChartType.LINE,
-    data,
+    data: dataProp,
     colors = DEFAULT_COLORS,
     barsize,
     xAxis,
@@ -22,6 +22,8 @@ export const CoreChart: React.FC<CoreChartProps> = ({
     enableHover = false,
     lineSeriesKeys,
 }) => {
+    const data = normalizeChartData(dataProp)
+
     const [internalHoveredKey, setInternalHoveredKey] = useState<string | null>(
         null
     )

package/lib/components/Charts/types.tsx

@@ -151,7 +151,7 @@ export type RenderChartProps = {
 
 export type CoreChartProps = {
     chartType?: ChartType
-    data: NewNestedDataPoint[]
+    data?: NewNestedDataPoint[] | null
     colors?: { key: string; color: string }[]
     barsize?: number
     xAxis?: XAxisConfig
@@ -175,7 +175,7 @@ export type ChartsSkeletonProps = {
 
 export type ChartsProps = {
     chartType?: ChartType
-    data: NewNestedDataPoint[]
+    data?: NewNestedDataPoint[] | null
     colors?: { key: string; color: string }[]
     slot1?: ReactNode
     slot2?: ReactNode

package/lib/components/ChartsV2/ChartV2.tsx

@@ -32,7 +32,7 @@ const ChartV2 = forwardRef<ChartV2ReactRefObject, ChartV2Props>(
         ref
     ) => {
         const tokens = useResponsiveTokens<ChartV2TokensType>('CHARTSV2')
-        const { options, ...restProps } = props
+        const { options = {}, ...restProps } = props
 
         const hasSeriesData =
             (options.series as ChartV2SeriesOptionsType[] | undefined)?.some(

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
+            )
         }
     }