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

package/lib/components/Breadcrumb/types.ts

@@ -1,10 +1,22 @@
-import { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export type BreadcrumbSkeletonProps = {
     show: boolean
     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/BreadcrumbV2/BreadcrumbV2.tsx

@@ -7,7 +7,6 @@ import BreadcrumbV2Separator from './BreadcrumbV2Separator'
 import type { BreadcrumbV2TokensType } from './breadcrumbV2.tokens'
 import type {
     BreadcrumbCompoundItemProps,
-    BreadcrumbV2Component,
     BreadcrumbV2ItemType,
     BreadcrumbV2Props,
 } from './breadcrumbV2.types'
@@ -18,6 +17,19 @@ import {
 } from './utils'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 
+// Defined here (rather than in breadcrumbV2.types) because it references the
+// compound sub-components by value (`typeof`); keeping it here avoids a cycle
+// between the types module and the component files.
+export type BreadcrumbV2Component = ((
+    props: BreadcrumbV2Props
+) => React.ReactElement | null) & {
+    displayName?: string
+    Item: typeof BreadcrumbV2CompoundItem
+    Icon: typeof BreadcrumbV2Icon
+    Separator: typeof BreadcrumbV2Separator
+    Page: typeof BreadcrumbV2Page
+}
+
 function wrapItemsOnClick(
     onClick: BreadcrumbV2ItemType['onClick']
 ): BreadcrumbCompoundItemProps['onClick'] {

package/lib/components/BreadcrumbV2/breadcrumbV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveBreadcrumbV2Tokens } from './breadcrumbV2.tokens'
+import type { ResponsiveBreadcrumbV2Tokens } from './breadcrumbV2.tokens.types'
 
 export const getBreadcrumbV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/BreadcrumbV2/breadcrumbV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveBreadcrumbV2Tokens } from './breadcrumbV2.tokens'
+import type { ResponsiveBreadcrumbV2Tokens } from './breadcrumbV2.tokens.types'
 
 export const getBreadcrumbV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/BreadcrumbV2/breadcrumbV2.tokens.ts

@@ -1,39 +1,14 @@
-import type { CSSObject } from 'styled-components'
-import { type BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { getBreadcrumbV2LightTokens } from './breadcrumbV2.light.tokens'
 import { Theme } from '../../context/theme.enum'
 import { getBreadcrumbV2DarkTokens } from './breadcrumbV2.dark.tokens'
+import type { ResponsiveBreadcrumbV2Tokens } from './breadcrumbV2.tokens.types'
 
-export type BreadcrumbV2State = 'default' | 'hover' | 'active'
-export type BreadcrumbV2TokensType = {
-    gap: CSSObject['gap']
-
-    item: {
-        padding: CSSObject['padding']
-        gap: CSSObject['gap']
-
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            color: {
-                [key in BreadcrumbV2State]: CSSObject['color']
-            }
-        }
-    }
-    ellipsis: {
-        color: CSSObject['color']
-        borderRadius: CSSObject['borderRadius']
-        size: number
-    }
-    separator: {
-        color: CSSObject['color']
-    }
-}
-
-export type ResponsiveBreadcrumbV2Tokens = {
-    [key in keyof BreakpointType]: BreadcrumbV2TokensType
-}
+export type {
+    BreadcrumbV2State,
+    BreadcrumbV2TokensType,
+    ResponsiveBreadcrumbV2Tokens,
+} from './breadcrumbV2.tokens.types'
 
 export const getBreadcrumbV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/BreadcrumbV2/breadcrumbV2.tokens.types.ts

@@ -0,0 +1,32 @@
+import type { CSSObject } from 'styled-components'
+import { type BreakpointType } from '../../breakpoints/breakPoints'
+
+export type BreadcrumbV2State = 'default' | 'hover' | 'active'
+export type BreadcrumbV2TokensType = {
+    gap: CSSObject['gap']
+
+    item: {
+        padding: CSSObject['padding']
+        gap: CSSObject['gap']
+
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: {
+                [key in BreadcrumbV2State]: CSSObject['color']
+            }
+        }
+    }
+    ellipsis: {
+        color: CSSObject['color']
+        borderRadius: CSSObject['borderRadius']
+        size: number
+    }
+    separator: {
+        color: CSSObject['color']
+    }
+}
+
+export type ResponsiveBreadcrumbV2Tokens = {
+    [key in keyof BreakpointType]: BreadcrumbV2TokensType
+}

package/lib/components/BreadcrumbV2/breadcrumbV2.types.ts

@@ -1,8 +1,4 @@
 import * as React from 'react'
-import BreadcrumbV2CompoundItem from './BreadcrumbV2Item'
-import BreadcrumbV2Icon from './BreadcrumbV2Icon'
-import BreadcrumbV2Page from './BreadcrumbV2Page'
-import BreadcrumbV2Separator from './BreadcrumbV2Separator'
 
 export type BreadcrumbV2ItemType = {
     /** Stable unique id for React list keys when `href` may repeat or collide (e.g. dynamic routes). */
@@ -41,13 +37,3 @@ export type BreadcrumbV2Props = {
      */
     maxItems?: number
 }
-
-export type BreadcrumbV2Component = ((
-    props: BreadcrumbV2Props
-) => React.ReactElement | null) & {
-    displayName?: string
-    Item: typeof BreadcrumbV2CompoundItem
-    Icon: typeof BreadcrumbV2Icon
-    Separator: typeof BreadcrumbV2Separator
-    Page: typeof BreadcrumbV2Page
-}

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/ButtonGroup/types.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import type { ButtonProps } from '../Button'
+import type { ButtonProps } from '../Button/types'
 
 export type ButtonGroupProps = {
     stacked?: boolean

package/lib/components/ButtonV2/buttonV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveButtonV2Tokens } from './buttonV2.tokens'
+import type { ResponsiveButtonV2Tokens } from './buttonV2.tokens.types'
 
 export const getButtonV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/ButtonV2/buttonV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveButtonV2Tokens } from './buttonV2.tokens'
+import type { ResponsiveButtonV2Tokens } from './buttonV2.tokens.types'
 
 export const getButtonV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/ButtonV2/buttonV2.tokens.ts

@@ -1,79 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import {
-    ButtonV2Size,
-    ButtonV2State,
-    ButtonV2SubType,
-    ButtonV2Type,
-    PaddingDirection,
-} from './buttonV2.types'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { getButtonV2LightTokens } from './buttonV2.light.tokens'
 import { Theme } from '../../context/theme.enum'
 import { getButtonV2DarkTokens } from './buttonV2.dark.tokens'
+import type { ResponsiveButtonV2Tokens } from './buttonV2.tokens.types'
 
-export type ButtonV2TokensType = Readonly<{
-    gap: CSSObject['gap']
-    backgroundColor: {
-        [key in ButtonV2Type]: {
-            [key in ButtonV2SubType]: {
-                [key in ButtonV2State]: CSSObject['background']
-            }
-        }
-    }
-    borderRadius: {
-        [key in ButtonV2Size]: {
-            [key in ButtonV2Type]: {
-                [key in ButtonV2SubType]: CSSObject['borderRadius']
-            }
-        }
-    }
-    padding: {
-        [key in PaddingDirection]: {
-            [key in ButtonV2Size]: {
-                [key in ButtonV2Type]: {
-                    [key in ButtonV2SubType]: CSSObject['padding']
-                }
-            }
-        }
-    }
-    border: {
-        [key in ButtonV2Type]: {
-            [key in ButtonV2SubType]: {
-                [key in ButtonV2State]: CSSObject['border']
-            }
-        }
-    }
-    shadow: {
-        [key in ButtonV2Type]: {
-            [key in ButtonV2SubType]: {
-                [key in ButtonV2State]: CSSObject['boxShadow']
-            }
-        }
-    }
-    text: {
-        color: {
-            [key in ButtonV2Type]: {
-                [key in ButtonV2SubType]: {
-                    [key in ButtonV2State]: CSSObject['color']
-                }
-            }
-        }
-        fontSize: {
-            [key in ButtonV2Size]: CSSObject['fontSize']
-        }
-        fontWeight: {
-            [key in ButtonV2Size]: CSSObject['fontWeight']
-        }
-        lineHeight: {
-            [key in ButtonV2Size]: CSSObject['lineHeight']
-        }
-    }
-}>
-
-export type ResponsiveButtonV2Tokens = {
-    [key in keyof BreakpointType]: ButtonV2TokensType
-}
+export type {
+    ButtonV2TokensType,
+    ResponsiveButtonV2Tokens,
+} from './buttonV2.tokens.types'
 
 export const getButtonV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/ButtonV2/buttonV2.tokens.types.ts

@@ -0,0 +1,72 @@
+import type { CSSObject } from 'styled-components'
+import {
+    ButtonV2Size,
+    ButtonV2State,
+    ButtonV2SubType,
+    ButtonV2Type,
+    PaddingDirection,
+} from './buttonV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type ButtonV2TokensType = Readonly<{
+    gap: CSSObject['gap']
+    backgroundColor: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['background']
+            }
+        }
+    }
+    borderRadius: {
+        [key in ButtonV2Size]: {
+            [key in ButtonV2Type]: {
+                [key in ButtonV2SubType]: CSSObject['borderRadius']
+            }
+        }
+    }
+    padding: {
+        [key in PaddingDirection]: {
+            [key in ButtonV2Size]: {
+                [key in ButtonV2Type]: {
+                    [key in ButtonV2SubType]: CSSObject['padding']
+                }
+            }
+        }
+    }
+    border: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['border']
+            }
+        }
+    }
+    shadow: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['boxShadow']
+            }
+        }
+    }
+    text: {
+        color: {
+            [key in ButtonV2Type]: {
+                [key in ButtonV2SubType]: {
+                    [key in ButtonV2State]: CSSObject['color']
+                }
+            }
+        }
+        fontSize: {
+            [key in ButtonV2Size]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in ButtonV2Size]: CSSObject['fontWeight']
+        }
+        lineHeight: {
+            [key in ButtonV2Size]: CSSObject['lineHeight']
+        }
+    }
+}>
+
+export type ResponsiveButtonV2Tokens = {
+    [key in keyof BreakpointType]: ButtonV2TokensType
+}

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/Card/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import type { ButtonProps } from '../Button/types'
-import { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export enum CardVariant {
     DEFAULT = 'default',

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/renderChart.tsx

@@ -22,6 +22,7 @@ import {
     RenderChartProps,
     TickProps,
     AxisType,
+    AxisIntervalType,
     SankeyData,
     DotItemDotProps,
     FlattenedDataPoint,
@@ -117,9 +118,12 @@ export const renderChart = ({
         }
     }
 
-    // When using custom ticks, set interval to 0 to show all ticks
+    // When using custom ticks, set interval to 0 to show all ticks.
+    // On small screens use preserveStartEnd so recharts auto-hides
     if (finalXAxis.ticks && finalXAxis.interval === undefined) {
-        finalXAxis.interval = 0
+        finalXAxis.interval = isSmallScreen
+            ? AxisIntervalType.PRESERVE_START_END
+            : 0
     }
 
     const getColor = (key: string, chartType: ChartType) => {

package/lib/components/Charts/types.tsx

@@ -4,8 +4,8 @@ import {
     NameType,
     ValueType,
 } from 'recharts/types/component/DefaultTooltipContent'
-import { ButtonProps } from '../Button'
-import { SkeletonVariant } from '../Skeleton'
+import type { ButtonProps } from '../Button/types'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export type DataPoint = {
     primary: {
@@ -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/ChartsV2/chartV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveChartV2Tokens } from './chartV2.tokens'
+import type { ResponsiveChartV2Tokens } from './chartV2.tokens.types'
 
 export const getChartV2DarkTokens = (
     foundationToken: FoundationTokenType

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

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveChartV2Tokens } from './chartV2.tokens'
+import type { ResponsiveChartV2Tokens } from './chartV2.tokens.types'
 
 export const getChartV2LightTokens = (
     foundationToken: FoundationTokenType