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

package/lib/components/DataTable/utils.ts

@@ -7,6 +7,7 @@ import {
     ColumnDefinition,
     ColumnType,
     PivotAggregationType,
+    DateFormat,
 } from './types'
 import {
     validateColumnData,
@@ -904,6 +905,91 @@ export const formatDate = (dateString: string): string => {
     }).format(date)
 }
 
+/**
+ * Token map for the lightweight format-string parser. Supports the common
+ * dashboard tokens; anything else is passed through literally.
+ *
+ *   YYYY  -> 4-digit year          YY   -> 2-digit year
+ *   MM    -> 2-digit month         MMM  -> short month name (Jan)
+ *   DD    -> 2-digit day           dd   -> 2-digit day (alias)
+ *   HH    -> 24h hour (2-digit)    hh   -> 12h hour (2-digit)
+ *   mm    -> minutes (2-digit)     ss   -> seconds (2-digit)
+ *   A     -> AM/PM                 a    -> am/pm
+ */
+const FORMAT_TOKEN_PATTERN = /YYYY|YY|MMM|MM|dd|DD|HH|hh|mm|ss|A|a/g
+
+const pad2 = (n: number): string => String(n).padStart(2, '0')
+
+// Format a Date using a format string like "DD MMM YYYY, hh:mm A"
+export const formatDateString = (date: Date, format: string): string => {
+    if (isNaN(date.getTime())) return '-'
+
+    const parts = new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    }).formatToParts(date)
+
+    const lookup: Record<string, string> = {}
+    for (const p of parts) {
+        if (p.type !== 'literal') lookup[p.type] = p.value
+    }
+
+    const year = lookup.year ?? ''
+    const monthNum = lookup.month ?? ''
+    const day = lookup.day ?? ''
+    const hour24 = lookup.hour ?? ''
+    const minute = lookup.minute ?? ''
+    const second = lookup.second ?? ''
+
+    // Short month name via a separate formatter (month: 'short' gives 'Jan' etc.)
+    const shortMonth = new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+    }).format(date)
+
+    // Normalize the 24-hour value: some browsers/locales return "24" for
+    // midnight instead of "00". Convert 24 -> 0 so HH always prints 00.
+    const hourNumRaw = parseInt(hour24, 10)
+    const hourNum = hourNumRaw === 24 ? 0 : hourNumRaw
+    const hour12 = (hourNum % 12 || 12).toString()
+    const ampm = hourNum < 12 ? 'AM' : 'PM'
+
+    FORMAT_TOKEN_PATTERN.lastIndex = 0
+    return format.replace(FORMAT_TOKEN_PATTERN, (token) => {
+        switch (token) {
+            case 'YYYY':
+                return year
+            case 'YY':
+                return year.slice(-2)
+            case 'MMM':
+                return shortMonth
+            case 'MM':
+                return monthNum
+            case 'DD':
+            case 'dd':
+                return day
+            case 'HH':
+                return pad2(hourNum)
+            case 'hh':
+                return pad2(parseInt(hour12, 10))
+            case 'mm':
+                return minute
+            case 'ss':
+                return second
+            case 'A':
+                return ampm
+            case 'a':
+                return ampm.toLowerCase()
+            default:
+                return token
+        }
+    })
+}
+
 export const updateColumnFilter = (
     currentFilters: ColumnFilter[],
     field: keyof Record<string, unknown>,
@@ -994,7 +1080,7 @@ const getExportValue = <T extends Record<string, unknown>>(
             ) {
                 const dateData = value as {
                     date: Date | string
-                    format?: string
+                    format?: DateFormat
                     showTime?: boolean
                 }
                 const date = new Date(dateData.date)
@@ -1267,7 +1353,7 @@ export const createMultiSelectData = (
 
 export const createDateData = (
     date: Date | string,
-    format?: string
+    format?: DateFormat
 ): DateData => ({
     date,
     format,
@@ -1276,7 +1362,7 @@ export const createDateData = (
 export const createDateRangeData = (
     startDate: Date | string,
     endDate: Date | string,
-    format?: string
+    format?: DateFormat
 ): DateRangeData => ({
     startDate,
     endDate,
@@ -1317,9 +1403,9 @@ const getExpectedTypeDescription = (columnType: ColumnType): string => {
         case ColumnType.MULTISELECT:
             return 'MultiSelectData { values: string[], labels?: string[] } or string[]'
         case ColumnType.DATE:
-            return 'DateData { date: Date | string, format?: string } or Date or string'
+            return 'DateData { date: Date | string, format?: DateFormat } or Date or string'
         case ColumnType.DATE_RANGE:
-            return 'DateRangeData { startDate: Date | string, endDate: Date | string, format?: string }'
+            return 'DateRangeData { startDate: Date | string, endDate: Date | string, format?: DateFormat }'
         case ColumnType.TEXT:
             return 'string or number'
         case ColumnType.NUMBER:

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

@@ -588,7 +588,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 +741,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}

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.7",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",