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

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)
 
@@ -824,6 +831,16 @@ const StatCard = ({
                                                 statCardToken.textContainer
                                                     .header.gap
                                             }
+                                            paddingRight={
+                                                actionIcon
+                                                    ? actionIconWidth +
+                                                      toPixels(
+                                                          statCardToken
+                                                              .textContainer
+                                                              .header.gap
+                                                      )
+                                                    : undefined
+                                            }
                                         >
                                             <StatCardHeaderTitleText
                                                 title={title}
@@ -843,6 +860,7 @@ const StatCard = ({
                                         direction !==
                                             StatCardDirection.HORIZONTAL && (
                                             <Block
+                                                ref={actionIconRef}
                                                 data-element="view-more"
                                                 display="flex"
                                                 alignItems="center"
@@ -1091,6 +1109,7 @@ const StatCard = ({
                             >
                                 {actionIcon && (
                                     <Block
+                                        ref={actionIconRef}
                                         data-element="action-icon"
                                         display="flex"
                                         alignItems="flex-start"
@@ -1131,6 +1150,16 @@ const StatCard = ({
                                             statCardToken.textContainer.header
                                                 .gap
                                         }
+                                        paddingRight={
+                                            actionIcon
+                                                ? actionIconWidth +
+                                                  toPixels(
+                                                      statCardToken
+                                                          .textContainer.header
+                                                          .gap
+                                                  )
+                                                : undefined
+                                        }
                                     >
                                         <StatCardHeaderTitleText
                                             title={title}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.37-beta.7",
+    "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 {}