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

package/dist/{node-CJ_Tft0g.js → node-C_DmV86X.js}

@@ -1,4 +1,4 @@
-const L = {
+const E = {
   xs: "0px 1px 1px 0px rgba(5, 5, 6, 0.04)",
   sm: "0px 2px 3px 0px rgba(5, 5, 6, 0.05)",
   md: "0px 2px 8px 1px rgba(5, 5, 6, 0.07)",
@@ -265,7 +265,7 @@ const L = {
   200: "200px",
   350: "350px",
   auto: "auto"
-}, a = {
+}, C = {
   gray: {
     0: "#FFFFFF",
     25: "#FCFCFD",
@@ -361,7 +361,7 @@ const L = {
     900: "#733E0A",
     950: "#432004"
   }
-}, C = {
+}, a = {
   0: 0,
   10: 10,
   99: 99,
@@ -372,13 +372,13 @@ const L = {
   1100: 1100,
   1200: 1200
 }, Ur = {
-  shadows: L,
+  shadows: E,
   border: N,
   font: H,
   opacity: D,
   unit: I,
-  colors: a,
-  zIndex: C
+  colors: C,
+  zIndex: a
 };
 var h = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(h || {});
 const Xr = (r) => ({
@@ -2240,7 +2240,7 @@ const Xr = (r) => ({
       }
     }
   }
-}), W = (r) => ({
+}), G = (r) => ({
   sm: {
     gap: r.unit[10],
     // Pattern: backgroundColor.[variant].[subType].[state]
@@ -3639,7 +3639,7 @@ const Xr = (r) => ({
       }
     }
   }
-}), Vr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? W(r) : A(r), G = (r) => ({
+}), Vr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? G(r) : A(r), W = (r) => ({
   sm: {
     gap: r.unit[6],
     backgroundColor: {
@@ -4309,7 +4309,7 @@ const Xr = (r) => ({
       }
     }
   }
-}), qr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? G(r) : B(r);
+}), qr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? W(r) : B(r);
 var M = /* @__PURE__ */ ((r) => (r.START = "start", r.CENTER = "center", r.END = "end", r))(M || {}), F = /* @__PURE__ */ ((r) => (r.TOP = "top", r.LEFT = "left", r.RIGHT = "right", r.BOTTOM = "bottom", r))(F || {}), m = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.ACTION = "action", r))(m || {}), x = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.DANGER = "danger", r))(x || {});
 const U = (r) => ({
   sm: {
@@ -11649,7 +11649,7 @@ const $r = (r) => ({
       }
     }
   }
-}), l0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Rr(r) : Or(r), Er = (r) => ({
+}), l0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Rr(r) : Or(r), Lr = (r) => ({
   sm: {
     gap: r.unit[8],
     group: {
@@ -11918,7 +11918,7 @@ const $r = (r) => ({
       }
     }
   }
-}), Lr = (r) => ({
+}), Er = (r) => ({
   sm: {
     gap: r.unit[8],
     group: {
@@ -12187,7 +12187,7 @@ const $r = (r) => ({
       }
     }
   }
-}), s0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Lr(r) : Er(r), Nr = (r) => ({
+}), s0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Er(r) : Lr(r), Nr = (r) => ({
   sm: {
     // background (size-independent)
     background: r.colors.gray[0],
@@ -12738,6 +12738,12 @@ const Dr = (r) => ({
           }
         }
       },
+      borderBottom: {
+        [l.UNDERLINE]: `${r.border.width[1]} solid ${r.colors.gray[200]}`,
+        [l.BOXED]: "none",
+        [l.FLOATING]: "none",
+        [l.PILLS]: "none"
+      },
       activeIndicator: {
         height: r.border.width[2],
         color: r.colors.gray[700],
@@ -13051,6 +13057,12 @@ const Dr = (r) => ({
           }
         }
       },
+      borderBottom: {
+        [l.UNDERLINE]: `${r.border.width[1]} solid ${r.colors.gray[200]}`,
+        [l.BOXED]: "none",
+        [l.FLOATING]: "none",
+        [l.PILLS]: "none"
+      },
       activeIndicator: {
         height: r.border.width[2],
         color: r.colors.gray[700],
@@ -13365,6 +13377,12 @@ const Dr = (r) => ({
           }
         }
       },
+      borderBottom: {
+        [l.UNDERLINE]: `${r.border.width[1]} solid ${r.colors.gray[700]}`,
+        [l.BOXED]: "none",
+        [l.FLOATING]: "none",
+        [l.PILLS]: "none"
+      },
       activeIndicator: {
         height: r.border.width[2],
         color: r.colors.gray[200],
@@ -13678,6 +13696,12 @@ const Dr = (r) => ({
           }
         }
       },
+      borderBottom: {
+        [l.UNDERLINE]: `${r.border.width[1]} solid ${r.colors.gray[700]}`,
+        [l.BOXED]: "none",
+        [l.FLOATING]: "none",
+        [l.PILLS]: "none"
+      },
       activeIndicator: {
         height: r.border.width[2],
         color: r.colors.gray[200],
@@ -13881,10 +13905,10 @@ const Dr = (r) => ({
     }
   }
 }), c0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Ir(r) : Dr(r);
-var e = /* @__PURE__ */ ((r) => (r.ADDED = "added", r.REMOVED = "removed", r.UNCHANGED = "unchanged", r))(e || {}), ar = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.NO_GUTTER = "no-gutter", r.DIFF = "diff", r))(ar || {}), E = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(E || {});
-const Cr = (r) => ({
+var e = /* @__PURE__ */ ((r) => (r.ADDED = "added", r.REMOVED = "removed", r.UNCHANGED = "unchanged", r))(e || {}), Cr = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.NO_GUTTER = "no-gutter", r.DIFF = "diff", r))(Cr || {}), L = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(L || {});
+const ar = (r) => ({
   sm: {
-    theme: E.DARK,
+    theme: L.DARK,
     backgroundColor: r.colors.gray[25],
     border: `1px solid ${r.colors.gray[200]}`,
     borderRadius: r.border.radius[8],
@@ -13961,7 +13985,7 @@ const Cr = (r) => ({
     }
   },
   lg: {
-    theme: E.DARK,
+    theme: L.DARK,
     backgroundColor: r.colors.gray[25],
     border: `1px solid ${r.colors.gray[200]}`,
     borderRadius: r.border.radius[8],
@@ -14043,7 +14067,7 @@ const Cr = (r) => ({
     border: `1px solid ${r.colors.gray[200]}`,
     borderRadius: r.border.radius[8],
     boxShadow: "0px 2px 3px 0px rgba(5, 5, 6, 0.05)",
-    theme: E.LIGHT,
+    theme: L.LIGHT,
     header: {
       backgroundColor: r.colors.gray[50],
       borderBottom: `1px solid ${r.colors.gray[200]}`,
@@ -14120,7 +14144,7 @@ const Cr = (r) => ({
     border: `1px solid ${r.colors.gray[200]}`,
     borderRadius: r.border.radius[8],
     boxShadow: "0px 2px 3px 0px rgba(5, 5, 6, 0.05)",
-    theme: E.LIGHT,
+    theme: L.LIGHT,
     header: {
       backgroundColor: r.colors.gray[50],
       borderBottom: `1px solid ${r.colors.gray[200]}`,
@@ -14192,9 +14216,9 @@ const Cr = (r) => ({
       }
     }
   }
-}), t0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Cr(r) : Ar(r);
-var b = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(b || {}), Wr = /* @__PURE__ */ ((r) => (r.LINEAR = "linear", r.CIRCULAR = "circular", r))(Wr || {}), i = /* @__PURE__ */ ((r) => (r.SOLID = "solid", r.SEGMENTED = "segmented", r))(i || {});
-const Gr = (r) => ({
+}), t0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? ar(r) : Ar(r);
+var b = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(b || {}), Gr = /* @__PURE__ */ ((r) => (r.LINEAR = "linear", r.CIRCULAR = "circular", r))(Gr || {}), i = /* @__PURE__ */ ((r) => (r.SOLID = "solid", r.SEGMENTED = "segmented", r))(i || {});
+const Wr = (r) => ({
   sm: {
     linear: {
       height: {
@@ -14576,7 +14600,7 @@ const Gr = (r) => ({
     },
     transition: "width 0.3s ease-in-out"
   }
-}), i0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Gr(r) : Br(r), Mr = (r) => ({
+}), i0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Wr(r) : Br(r), Mr = (r) => ({
   sm: {
     gap: r.unit[0],
     item: {
@@ -14688,7 +14712,7 @@ export {
   rr as I,
   s as J,
   z as K,
-  Wr as L,
+  Gr as L,
   m as M,
   b as N,
   u as O,
@@ -14702,8 +14726,8 @@ export {
   l as W,
   t as X,
   R as Y,
-  ar as Z,
-  E as _,
+  Cr as Z,
+  L as _,
   _r as a,
   v as a0,
   O as a1,

package/dist/node.js

@@ -1,4 +1,4 @@
-import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-CJ_Tft0g.js";
+import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-C_DmV86X.js";
 export {
   a as FOUNDATION_THEME,
   o as Theme,

package/dist/tokens.js

@@ -1,4 +1,4 @@
-import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./node-CJ_Tft0g.js";
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./node-C_DmV86X.js";
 import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as pe, canUserPerformAction as Se, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as me, hexToRgb as _e, incrementVersion as Be, isValidHexColor as Le, listPresets as we, meetsWCAG as Me, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
 function O(e) {
   const o = typeof structuredClone == "function" ? structuredClone(u) : JSON.parse(JSON.stringify(u));

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

@@ -265,7 +265,7 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                             )}
                         </Block>
 
-                        {showCopyButton && (
+                        {showCopyButton && !isDiffMode && (
                             <Button
                                 data-element="copy-button"
                                 type="button"
@@ -301,14 +301,18 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                     backgroundColor={tokens.body.backgroundColor}
                     overflow="auto"
                     position={
-                        !showHeader && showCopyButton ? 'relative' : undefined
+                        !showHeader && showCopyButton && !isDiffMode
+                            ? 'relative'
+                            : undefined
                     }
                     className={
-                        !showHeader && showCopyButton ? 'code-body' : undefined
+                        !showHeader && showCopyButton && !isDiffMode
+                            ? 'code-body'
+                            : undefined
                     }
                     style={{ maxHeight: maxHeight || 'none' }}
                 >
-                    {!showHeader && showCopyButton && (
+                    {!showHeader && showCopyButton && !isDiffMode && (
                         <CopyOverlay>
                             <Button
                                 data-element="copy-button"

package/lib/components/DataTable/DataTable.tsx

@@ -159,6 +159,7 @@ const DataTable = forwardRef(
             mobileColumnsToShow,
             enablePivotTable = false,
             pivotTableConfig,
+            dateLabel,
             ...rest
         }: DataTableProps<T>,
         ref: React.Ref<HTMLDivElement>
@@ -1975,6 +1976,7 @@ const DataTable = forwardRef(
                                                           >
                                                         | undefined
                                                 }
+                                                dateLabel={dateLabel}
                                                 isLoading={
                                                     isLoading ||
                                                     (serverSidePagination &&

package/lib/components/DataTable/TableBody/index.tsx

@@ -564,6 +564,7 @@ const TableBody = forwardRef<
             getColumnWidth,
             getRowStyle,
             getDisplayValue,
+            dateLabel,
             isLoading = false,
             showSkeleton = false,
             skeletonVariant = 'pulse',
@@ -1289,6 +1290,7 @@ const TableBody = forwardRef<
                                                       getDisplayValue={
                                                           getDisplayValue
                                                       }
+                                                      dateLabel={dateLabel}
                                                   />
                                               )
                                           }

package/lib/components/DataTable/TableBody/types.ts

@@ -50,6 +50,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     ) => React.CSSProperties
     getRowStyle?: (row: T, index: number) => React.CSSProperties
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    dateLabel?: string
     isLoading?: boolean
     showSkeleton?: boolean
     skeletonVariant?: SkeletonVariant

package/lib/components/DataTable/TableCell/index.tsx

@@ -11,7 +11,12 @@ import { TableTokenType } from '../dataTable.tokens'
 import Block from '../../Primitives/Block/Block'
 import PrimitiveInput from '../../Primitives/PrimitiveInput/PrimitiveInput'
 import { FOUNDATION_THEME } from '../../../tokens'
-import { ColumnType, DropdownColumnProps, DateColumnProps } from '../types'
+import {
+    ColumnType,
+    DropdownColumnProps,
+    DateColumnProps,
+    DateFormat,
+} from '../types'
 import SingleSelect from '../../SingleSelect/SingleSelect'
 import { SelectMenuVariant } from '../../Select'
 import { SelectMenuGroupType } from '../../Select/types'
@@ -19,7 +24,7 @@ import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
 import { useResizeObserver } from '../../../hooks/useResizeObserver'
 import Tooltip from '../../Tooltip/Tooltip'
 import { TooltipSize } from '../../Tooltip/types'
-import { parseDateLike } from '../utils'
+import { parseDateLike, formatDateString } from '../utils'
 
 const StyledTableCell = styled.td<{
     width?: React.CSSProperties
@@ -79,9 +84,13 @@ const isEmptyValue = (value: unknown, columnType?: ColumnType): boolean => {
 const TruncatedTextWithTooltip = ({
     text,
     style = {},
+    suffix,
+    tableToken,
 }: {
     text: string
     style?: React.CSSProperties
+    suffix?: string
+    tableToken?: TableTokenType
 }) => {
     const textRef = useRef<HTMLSpanElement>(null)
     const [isTruncated, setIsTruncated] = useState(false)
@@ -125,16 +134,32 @@ const TruncatedTextWithTooltip = ({
         <span
             ref={textRef}
             style={{
-                display: 'block',
+                display: 'inline-flex',
+                alignItems: 'baseline',
                 width: '100%',
                 minWidth: 0,
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
+                gap: '3px',
                 ...style,
             }}
         >
             {text}
+            {suffix != null && (
+                <span
+                    style={{
+                        fontSize:
+                            tableToken?.dataTable.table.body.cell.dateLabel
+                                .fontSize,
+                        color: tableToken?.dataTable.table.body.cell.dateLabel
+                            .color,
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    {suffix}
+                </span>
+            )}
         </span>
     )
 
@@ -177,6 +202,7 @@ const TableCell = forwardRef<
             hasCustomBackground,
             onFieldChange,
             getDisplayValue,
+            dateLabel,
             'data-row-index': dataRowIndex,
             'data-col-index': dataColIndex,
             tabIndex: cellTabIndex,
@@ -455,23 +481,22 @@ const TableCell = forwardRef<
                 const date = parseDateLike(dateData.date)
                 const showTime = dateData.showTime || false
 
-                const formatDate = (date: Date): string => {
-                    if (isNaN(date.getTime())) return '-'
+                // Format string precedence: cell-level `DateColumnProps.format`
+                // beats column-level `dateFormat`. Falls back to a sensible
+                // default based on whether time should be shown.
+                const formatStr =
+                    dateData.format ||
+                    (column as { dateFormat?: DateFormat }).dateFormat ||
+                    (showTime ? 'DD MMM YYYY, hh:mm A' : 'DD MMM YYYY')
 
-                    const options: Intl.DateTimeFormatOptions = {
-                        year: 'numeric',
-                        month: 'short',
-                        day: '2-digit',
-                    }
+                const dateLabelStr =
+                    dateData.dateLabel ||
+                    (column as { dateLabel?: string }).dateLabel ||
+                    dateLabel
 
-                    if (showTime) {
-                        options.hour = '2-digit'
-                        options.minute = '2-digit'
-                    }
-
-                    return new Intl.DateTimeFormat('en-US', options).format(
-                        date
-                    )
+                const formatDate = (date: Date): string => {
+                    if (isNaN(date.getTime())) return '-'
+                    return formatDateString(date, formatStr)
                 }
 
                 return (
@@ -485,10 +510,10 @@ const TableCell = forwardRef<
                         <TruncatedTextWithTooltip
                             text={date ? formatDate(date) : '-'}
                             style={{
-                                fontSize:
-                                    FOUNDATION_THEME.font.size.body.sm.fontSize,
                                 color: FOUNDATION_THEME.colors.gray[700],
                             }}
+                            suffix={dateLabelStr}
+                            tableToken={tableToken}
                         />
                     </Block>
                 )

package/lib/components/DataTable/TableCell/types.ts

@@ -15,6 +15,7 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     hasCustomBackground?: boolean
     onFieldChange: (value: unknown) => void
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    dateLabel?: string
     'data-row-index'?: number
     'data-col-index'?: number
     tabIndex?: number

package/lib/components/DataTable/columnTypes.ts

@@ -1,4 +1,4 @@
-import { FilterType, ColumnType } from './types'
+import { FilterType, ColumnType, DateFormat } from './types'
 
 export type ColumnFilterOption = {
     id: string
@@ -45,13 +45,15 @@ export type MultiSelectData = {
 
 export type DateData = {
     date: Date | string
-    format?: string
+    format?: DateFormat
+    dateLabel?: string
 }
 
 export type DateRangeData = {
     startDate: Date | string
     endDate: Date | string
-    format?: string
+    format?: DateFormat
+    dateLabel?: string
 }
 
 export type ColumnDataTypeMap = {

package/lib/components/DataTable/dataTable.tokens.ts

@@ -198,6 +198,11 @@ export type TableTokenType = BasicCSSProps & {
                     color: CSSObject['color']
                     fontSize: CSSObject['fontSize']
                     borderTop: CSSObject['borderTop']
+
+                    dateLabel: {
+                        fontSize: CSSObject['fontSize']
+                        color: CSSObject['color']
+                    }
                     expandable: {
                         padding: CSSObject['padding']
                         borderTop: CSSObject['borderTop']
@@ -467,6 +472,11 @@ export const getTableToken = (
                             fontSize:
                                 foundationToken.font.size.body.md.fontSize,
                             borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
+                            dateLabel: {
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                color: foundationToken.colors.gray[400],
+                            },
                             expandable: {
                                 padding: foundationToken.unit[16],
                                 borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
@@ -732,6 +742,11 @@ export const getTableToken = (
                             fontSize:
                                 foundationToken.font.size.body.md.fontSize,
                             borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
+                            dateLabel: {
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                color: foundationToken.colors.gray[400],
+                            },
                             expandable: {
                                 padding: foundationToken.unit[16],
                                 borderTop: `1px solid ${foundationToken.colors.gray[150]}`,

package/lib/components/DataTable/types.ts

@@ -88,10 +88,30 @@ export type DropdownColumnProps = {
     onSelect?: (value: unknown) => void
 }
 
+/**
+ * Format string for date display in DataTable DATE columns.
+ * @example 'DD MMM YYYY'           → "24 Jun 2026"
+ * @example 'DD/MM/YYYY'            → "24/06/2026"
+ * @example 'DD MMM YYYY, hh:mm A'  → "24 Jun 2026, 10:30 AM"
+ */
+
+export type DateFormat =
+    | 'DD MMM YYYY'
+    | 'DD/MM/YYYY'
+    | 'MM/DD/YYYY'
+    | 'YYYY-MM-DD'
+    | 'DD MMM YYYY, hh:mm A'
+    | 'DD MMM YYYY, HH:mm'
+    | 'MMM DD, YYYY'
+    | 'YYYY/MM/DD HH:mm'
+    | 'HH:mm:ss'
+    | (string & {})
+
 export type DateColumnProps = {
     date: Date | string
-    format?: string
+    format?: DateFormat
     showTime?: boolean
+    dateLabel?: string
 }
 
 export type SliderColumnProps = {
@@ -253,8 +273,13 @@ export type ColumnDefinition<T> =
               row: T,
               index: number
           ) => ReactNode
-          dateFormat?: string
+          dateFormat?: DateFormat
           showTime?: boolean
+          /**
+           * Optional label appended after the formatted date, e.g. "(IST)".
+           * Column-level value can be overridden per-cell via DateColumnProps.dateLabel.
+           */
+          dateLabel?: string
       })
     | (BaseColumnDefinition<T> & {
           type: ColumnType.SLIDER
@@ -457,6 +482,12 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     // Mobile configuration
     mobileColumnsToShow?: number
 
+    /**
+     * Optional label appended after formatted dates in DATE columns,
+     * e.g. "(IST)". Can be overridden per-column or per-cell.
+     */
+    dateLabel?: string
+
     // Internal pivot modal configuration
     enablePivotTable?: boolean
     pivotTableConfig?: {