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

package/lib/components/Skeleton/hooks/useSkeletonBase.ts

@@ -2,11 +2,21 @@ import { type ReactNode } from 'react'
 import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
 import type { SkeletonTokensType } from '../skeleton.tokens'
 
+export type UseSkeletonBaseResult = {
+    shouldRender: boolean
+    fallback: ReactNode | null
+    tokens: SkeletonTokensType | null
+    prefersReducedMotion: boolean
+}
+
 /**
  * Shared hook for all skeleton components to eliminate code duplication
  * Handles token fetching, loading state, and motion preferences
  */
-export const useSkeletonBase = (loading: boolean, children?: ReactNode) => {
+export const useSkeletonBase = (
+    loading: boolean,
+    children?: ReactNode
+): UseSkeletonBaseResult => {
     const tokens = useResponsiveTokens<SkeletonTokensType>('SKELETON')
 
     // Check for motion preferences (accessibility)

package/lib/components/Snackbar/Snackbar.tsx

@@ -45,6 +45,7 @@ export const StyledToast: React.FC<CustomToastProps> = ({
     onClose,
     actionButton,
     toastId,
+    wrap = false,
     ...props
 }) => {
     const snackbarTokens = useResponsiveTokens<SnackbarTokens>('SNACKBAR')
@@ -75,14 +76,17 @@ export const StyledToast: React.FC<CustomToastProps> = ({
         >
             <Block
                 display="flex"
-                alignItems="center"
+                alignItems={wrap ? 'flex-start' : 'center'}
                 justifyContent="space-between"
                 gap={snackbarTokens.gap}
             >
                 <Block
                     display="flex"
-                    alignItems="flex-start"
+                    alignItems="center"
                     flexShrink={0}
+                    height={
+                        snackbarTokens.content.textContainer.header.lineHeight
+                    }
                     data-element="icon"
                     aria-hidden="true"
                 >
@@ -107,12 +111,16 @@ export const StyledToast: React.FC<CustomToastProps> = ({
                         }
                         data-element="header"
                         data-id={header}
-                        style={{
-                            minWidth: 0,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }}
+                        style={
+                            wrap
+                                ? { minWidth: 0 }
+                                : {
+                                      minWidth: 0,
+                                      overflow: 'hidden',
+                                      textOverflow: 'ellipsis',
+                                      whiteSpace: 'nowrap',
+                                  }
+                        }
                     >
                         {header}
                     </Text>
@@ -221,6 +229,7 @@ export const addSnackbar = ({
     actionButton,
     duration,
     position,
+    wrap = false,
 }: AddToastOptions) => {
     // Determine if position includes "center" for proper alignment
     const isCenter = position?.includes('center')
@@ -237,6 +246,7 @@ export const addSnackbar = ({
                 }}
                 actionButton={actionButton}
                 toastId={t}
+                wrap={wrap}
             />
         ),
         {

package/lib/components/Snackbar/snackbar.tokens.ts

@@ -61,6 +61,8 @@ export type SnackbarTokens = Readonly<{
                 fontSize: CSSObject['fontSize']
                 // Pattern: content.textContainer.header.fontWeight
                 fontWeight: CSSObject['fontWeight']
+                // Pattern: content.textContainer.header.lineHeight
+                lineHeight: CSSObject['lineHeight']
             }
 
             // Description text styling
@@ -149,6 +151,8 @@ export const getSnackbarTokens = (
                         },
                         fontSize: foundationToken.font.size.body.md.fontSize,
                         fontWeight: foundationToken.font.weight[500],
+                        lineHeight:
+                            foundationToken.font.size.body.md.lineHeight,
                     },
 
                     description: {
@@ -222,6 +226,8 @@ export const getSnackbarTokens = (
                         },
                         fontSize: foundationToken.font.size.body.lg.fontSize,
                         fontWeight: foundationToken.font.weight[600],
+                        lineHeight:
+                            foundationToken.font.size.body.lg.lineHeight,
                     },
 
                     description: {

package/lib/components/Snackbar/types.ts

@@ -26,6 +26,7 @@ export type AddToastOptions = {
     }
     duration?: number
     position?: SnackbarPosition
+    wrap?: boolean
 }
 
 export type CustomToastProps = {
@@ -39,6 +40,7 @@ export type CustomToastProps = {
         autoDismiss?: boolean
     }
     toastId?: string | number
+    wrap?: boolean
 }
 
 export type SnackbarProps = {

package/lib/components/StatCard/StatCard.tsx

@@ -39,6 +39,7 @@ import type { StatCardTokenType } from './statcard.tokens'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { BREAKPOINTS } from '../../breakpoints/breakPoints'
 import { useBreakpoints } from '../../hooks/useBreakPoints'
+import { useResizeObserver } from '../../hooks/useResizeObserver'
 import {
     SelectMenuSize,
     SelectMenuVariant,
@@ -304,6 +305,12 @@ const StatCard = ({
     const isSmallScreen = breakPointLabel === 'sm'
     const titleIconRef = useRef<HTMLDivElement>(null)
     const titleIconWidth = titleIconRef.current?.offsetWidth || 0
+    const actionIconRef = useRef<HTMLDivElement>(null)
+    const [actionIconWidth, setActionIconWidth] = useState(0)
+
+    useResizeObserver(actionIconRef, (rect) => {
+        setActionIconWidth(rect.width)
+    })
 
     const [hoveredBarIndex, setHoveredBarIndex] = useState<number | null>(null)
 
@@ -588,7 +595,11 @@ const StatCard = ({
                 overflow="hidden"
                 backgroundColor={statCardToken.backgroundColor}
                 boxShadow={showBorder ? statCardToken.boxShadow : undefined}
-                padding={`${statCardToken.padding.y} ${statCardToken.padding.x}`}
+                padding={
+                    showBorder
+                        ? `${statCardToken.padding.y} ${statCardToken.padding.x}`
+                        : undefined
+                }
                 display="flex"
                 flexDirection="column"
                 // gap={statCardToken.gap}
@@ -737,7 +748,11 @@ const StatCard = ({
             overflow="hidden"
             backgroundColor={statCardToken.backgroundColor}
             boxShadow={showBorder ? statCardToken.boxShadow : undefined}
-            padding={`${statCardToken.padding.y} ${statCardToken.padding.x}`}
+            padding={
+                showBorder
+                    ? `${statCardToken.padding.y} ${statCardToken.padding.x}`
+                    : undefined
+            }
             display="flex"
             flexDirection="column"
             // gap={statCardToken.gap}
@@ -816,6 +831,16 @@ const StatCard = ({
                                                 statCardToken.textContainer
                                                     .header.gap
                                             }
+                                            paddingRight={
+                                                actionIcon
+                                                    ? actionIconWidth +
+                                                      toPixels(
+                                                          statCardToken
+                                                              .textContainer
+                                                              .header.gap
+                                                      )
+                                                    : undefined
+                                            }
                                         >
                                             <StatCardHeaderTitleText
                                                 title={title}
@@ -835,6 +860,7 @@ const StatCard = ({
                                         direction !==
                                             StatCardDirection.HORIZONTAL && (
                                             <Block
+                                                ref={actionIconRef}
                                                 data-element="view-more"
                                                 display="flex"
                                                 alignItems="center"
@@ -1083,6 +1109,7 @@ const StatCard = ({
                             >
                                 {actionIcon && (
                                     <Block
+                                        ref={actionIconRef}
                                         data-element="action-icon"
                                         display="flex"
                                         alignItems="flex-start"
@@ -1123,6 +1150,16 @@ const StatCard = ({
                                             statCardToken.textContainer.header
                                                 .gap
                                         }
+                                        paddingRight={
+                                            actionIcon
+                                                ? actionIconWidth +
+                                                  toPixels(
+                                                      statCardToken
+                                                          .textContainer.header
+                                                          .gap
+                                                  )
+                                                : undefined
+                                        }
                                     >
                                         <StatCardHeaderTitleText
                                             title={title}

package/lib/components/StatCardV2/StatCardV2.tsx

@@ -48,6 +48,7 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
             height,
             options,
             skeleton,
+            showBorder = true,
             ...props
         },
         ref
@@ -131,6 +132,7 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
                     tokens={tokens}
                     isSmallScreen={isSmallScreen}
                     filteredProps={filteredProps}
+                    showBorder={showBorder}
                 />
             )
         }
@@ -141,14 +143,14 @@ const StatCardV2 = forwardRef<HTMLDivElement, StatCardV2Props>(
                 display="flex"
                 flexDirection="column"
                 justifyContent="space-between"
-                paddingTop={tokens.paddingTop}
-                paddingBottom={tokens.paddingBottom}
-                paddingLeft={tokens.paddingLeft}
-                paddingRight={tokens.paddingRight}
-                border={tokens.border}
+                paddingTop={showBorder ? tokens.paddingTop : undefined}
+                paddingBottom={showBorder ? tokens.paddingBottom : undefined}
+                paddingLeft={showBorder ? tokens.paddingLeft : undefined}
+                paddingRight={showBorder ? tokens.paddingRight : undefined}
+                border={showBorder ? tokens.border : undefined}
                 borderRadius={tokens.borderRadius}
                 backgroundColor={tokens.backgroundColor}
-                boxShadow={tokens.boxShadow}
+                boxShadow={showBorder ? tokens.boxShadow : undefined}
                 maxWidth={maxWidth ?? tokens.maxWidth}
                 minWidth={minWidth ?? tokens.minWidth}
                 width={width ?? tokens.width}

package/lib/components/StatCardV2/StatCardV2NoData.tsx

@@ -19,6 +19,7 @@ type StatCardV2NoDataProps = Pick<
     | 'minWidth'
     | 'width'
     | 'height'
+    | 'showBorder'
 > & {
     tokens: StatCardV2TokensType
     isSmallScreen: boolean
@@ -35,6 +36,7 @@ const StatCardV2NoData = ({
     minWidth,
     width,
     height,
+    showBorder = true,
     tokens,
     isSmallScreen,
     filteredProps,
@@ -47,14 +49,14 @@ const StatCardV2NoData = ({
             display="flex"
             flexDirection="column"
             justifyContent="space-between"
-            paddingTop={tokens.paddingTop}
-            paddingBottom={tokens.paddingBottom}
-            paddingLeft={tokens.paddingLeft}
-            paddingRight={tokens.paddingRight}
-            border={tokens.border}
+            paddingTop={showBorder ? tokens.paddingTop : undefined}
+            paddingBottom={showBorder ? tokens.paddingBottom : undefined}
+            paddingLeft={showBorder ? tokens.paddingLeft : undefined}
+            paddingRight={showBorder ? tokens.paddingRight : undefined}
+            border={showBorder ? tokens.border : undefined}
             borderRadius={tokens.borderRadius}
             backgroundColor={tokens.backgroundColor}
-            boxShadow={tokens.boxShadow}
+            boxShadow={showBorder ? tokens.boxShadow : undefined}
             maxWidth={maxWidth ?? tokens.maxWidth}
             minWidth={minWidth ?? tokens.minWidth}
             width={width ?? tokens.width}

package/lib/components/StatCardV2/statcardV2.types.ts

@@ -84,5 +84,6 @@ export type StatCardV2Props = {
     options?: ChartV2Options
     skeleton?: StatCardV2SkeletonProps
     dropdownProps?: SingleSelectProps
+    showBorder?: boolean
 } & HTMLAttributes<HTMLDivElement> &
     StatCardV2Dimensions

package/lib/components/TabsV2/TabsV2List.tsx

@@ -343,6 +343,7 @@ const TabsV2List = forwardRef<HTMLDivElement, TabsV2ListProps>(
                 data-element="tabs-list"
                 data-status={expanded ? 'expanded' : 'collapsed'}
                 style={{
+                    width: '100%',
                     position: stickyHeader ? 'sticky' : 'relative',
                     top: stickyHeader ? offsetTop : 'auto',
                     zIndex: stickyHeader
@@ -351,7 +352,10 @@ const TabsV2List = forwardRef<HTMLDivElement, TabsV2ListProps>(
                     backgroundColor: stickyHeader
                         ? stickyHeaderBackground
                         : 'transparent',
-                    borderBottom: 'none',
+                    borderBottom:
+                        variant === TabsV2Variant.UNDERLINE && !hasAnySkeleton
+                            ? tabsToken.tabList.borderBottom[variant]
+                            : 'none',
                     boxShadow: stickyHeader
                         ? tabsToken.tabList.stickyHeader.boxShadow
                         : 'none',

package/lib/components/TabsV2/tabsV2.dark.tokens.ts

@@ -123,6 +123,12 @@ export const getTabsV2DarkTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[700]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[200],
@@ -458,6 +464,12 @@ export const getTabsV2DarkTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[700]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[200],

package/lib/components/TabsV2/tabsV2.light.tokens.ts

@@ -123,6 +123,12 @@ export const getTabsV2LightTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[700],
@@ -458,6 +464,12 @@ export const getTabsV2LightTokens = (
                         },
                     },
                 },
+                borderBottom: {
+                    [TabsV2Variant.UNDERLINE]: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+                    [TabsV2Variant.BOXED]: 'none',
+                    [TabsV2Variant.FLOATING]: 'none',
+                    [TabsV2Variant.PILLS]: 'none',
+                },
                 activeIndicator: {
                     height: foundationToken.border.width[2],
                     color: foundationToken.colors.gray[700],

package/lib/components/TabsV2/tabsV2.tokens.types.ts

@@ -25,6 +25,9 @@ export type TabsV2TokensType = {
                 }
             }
         }
+        borderBottom: {
+            [key in TabsV2Variant]: CSSObject['borderBottom']
+        }
         activeIndicator: {
             height: CSSObject['height']
             color: CSSObject['color']

package/lib/global-utils/GlobalUtils.ts

@@ -18,7 +18,16 @@ export const capitalizeFirstLetter = (string: string): string => {
     return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
 }
 
-export const getTruncatedText = (text: string, limit?: number) => {
+export type TruncatedTextResult = {
+    truncatedValue: string
+    fullValue: string
+    isTruncated: boolean
+}
+
+export const getTruncatedText = (
+    text: string,
+    limit?: number
+): TruncatedTextResult => {
     const shouldTruncate =
         typeof limit === 'number' && limit > 0 && text.length > limit
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.37-beta.6",
+    "version": "0.0.37-beta.8",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",
@@ -23,8 +23,8 @@
             "types": "./dist/node.d.ts"
         },
         "./tokens": {
-            "import": "./dist/tokens.js",
-            "types": "./dist/tokens.d.ts"
+            "import": "./dist/token-engine.js",
+            "types": "./dist/token-engine.d.ts"
         },
         "./tokens/server": {
             "import": "./dist/tokens-server.js",
@@ -36,7 +36,8 @@
     "scripts": {
         "lint": "eslint .",
         "check:circular": "node scripts/check-circular.mjs",
-        "build": "pnpm lint && vite build",
+        "check:dist": "node scripts/check-dist.mjs",
+        "build": "pnpm lint && vite build && pnpm check:dist",
         "prepublishOnly": "pnpm run build",
         "test": "vitest",
         "test:ui": "vitest --ui",

package/dist/tokens.d.ts

@@ -1,2 +0,0 @@
-export * from './token-engine'
-export {}