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

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

@@ -108,6 +108,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
                 borderRadius={cardToken.borderRadius}
                 backgroundColor={cardToken.backgroundColor}
                 boxShadow={cardToken.boxShadow}
+                overflow="hidden"
                 display="flex"
                 flexDirection="column"
                 onMouseEnter={handleMouseEnter}

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

@@ -55,8 +55,11 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
             }
             role="group"
             aria-label="Chart header"
+            width="100%"
         >
-            <Block data-element="chart-header-slot">{chartHeaderSlot}</Block>
+            <Block data-element="chart-header-slot" width="100%" minWidth="0">
+                {chartHeaderSlot}
+            </Block>
             <Block
                 display="flex"
                 alignItems="center"

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: {

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

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'