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

package/dist/{node-CJ_Tft0g.js → node-CovJEwot.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: {
@@ -7082,6 +7082,14 @@ const f = (r) => {
           color: r.colors.gray[600]
         },
         iconColor: r.colors.gray[400]
+      },
+      footer: {
+        paddingTop: r.unit[16],
+        paddingRight: r.unit[16],
+        paddingBottom: r.unit[16],
+        paddingLeft: r.unit[16],
+        backgroundColor: r.colors.gray[0],
+        borderTop: `${r.border.width[1]} solid ${r.colors.gray[200]}`
       }
     },
     mobilePanel: {
@@ -7428,6 +7436,14 @@ const f = (r) => {
           color: r.colors.gray[200]
         },
         iconColor: r.colors.gray[500]
+      },
+      footer: {
+        paddingTop: r.unit[16],
+        paddingRight: r.unit[16],
+        paddingBottom: r.unit[16],
+        paddingLeft: r.unit[16],
+        backgroundColor: r.colors.gray[800],
+        borderTop: `${r.border.width[1]} solid ${r.colors.gray[700]}`
       }
     },
     mobilePanel: {
@@ -11649,7 +11665,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 +11934,7 @@ const $r = (r) => ({
       }
     }
   }
-}), Lr = (r) => ({
+}), Er = (r) => ({
   sm: {
     gap: r.unit[8],
     group: {
@@ -12187,7 +12203,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 +12754,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 +13073,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 +13393,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 +13712,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 +13921,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 +14001,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 +14083,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 +14160,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 +14232,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 +14616,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 +14728,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 +14742,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-CovJEwot.js";
 export {
   a as FOUNDATION_THEME,
   o as Theme,

package/dist/{tokens.js → token-engine.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-CovJEwot.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/CodeEditor/MonacoEditorWrapper.tsx

@@ -5,9 +5,13 @@ import Block from '../Primitives/Block/Block'
 import type { CodeBlockTokenType } from '../CodeBlock/codeBlock.token'
 import './monaco-editor.css'
 
+// Monaco registers only `javascript`/`typescript` (VS Code's
+// `javascriptreact`/`typescriptreact` IDs are not registered, so they would
+// fall back to plaintext with no highlighting). Monaco's JS/TS tokenizers
+// handle JSX/TSX syntax fine, so map the ergonomic aliases onto them.
 const LANGUAGE_MAP: Record<string, string> = {
-    jsx: 'javascriptreact',
-    tsx: 'typescriptreact',
+    jsx: 'javascript',
+    tsx: 'typescript',
 }
 
 const mapLanguage = (value: string) => LANGUAGE_MAP[value] ?? value

package/lib/components/CodeEditor/types.ts

@@ -1,11 +1,61 @@
 import type { ReactNode } from 'react'
-import type { SupportedLanguage } from '../CodeBlock/types'
 
 export enum CodeEditorVariant {
     DEFAULT = 'default',
     NO_GUTTER = 'no-gutter',
 }
 
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorLanguage}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorLanguage =
+    | 'javascript'
+    | 'typescript'
+    | 'json'
+    | 'css'
+    | 'scss'
+    | 'less'
+    | 'html'
+    | 'xml'
+    | 'markdown'
+    | 'yaml'
+    | 'ini'
+    | 'graphql'
+    | 'sql'
+    | 'python'
+    | 'rust'
+    | 'go'
+    | 'java'
+    | 'kotlin'
+    | 'swift'
+    | 'c'
+    | 'cpp'
+    | 'csharp'
+    | 'php'
+    | 'ruby'
+    | 'shell'
+    | 'powershell'
+    | 'dockerfile'
+    | 'plaintext'
+
+/**
+ * Language accepted by {@link CodeEditorProps.language}: autocomplete for
+ * {@link KnownCodeEditorLanguage}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (the component forwards to Monaco, whose
+ * own `language` option is a plain `string`). Decoupled from `CodeBlock`'s
+ * `SupportedLanguage`, which is scoped to CodeBlock's hand-rolled tokenizer
+ * rather than Monaco.
+ */
+export type CodeEditorLanguage = KnownCodeEditorLanguage | (string & {})
+
 export type CodeEditorProps = {
     value: string
     onChange?: (value: string) => void
@@ -30,7 +80,7 @@ export type CodeEditorProps = {
      */
     showLeftIcon?: boolean
     showCopyButton?: boolean
-    language?: SupportedLanguage
+    language?: CodeEditorLanguage
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

package/lib/components/CodeEditorV2/MonacoEditor/MonacoEditorWrapper.tsx

@@ -25,9 +25,13 @@ import { CSSObject } from 'styled-components'
 // Language mapping
 // ---------------------------------------------------------------------------
 
+// Monaco registers only `javascript`/`typescript` (VS Code's
+// `javascriptreact`/`typescriptreact` IDs are not registered, so they would
+// fall back to plaintext with no highlighting). Monaco's JS/TS tokenizers
+// handle JSX/TSX syntax fine, so map the ergonomic aliases onto them.
 const LANGUAGE_MAP: Record<string, string> = {
-    jsx: 'javascriptreact',
-    tsx: 'typescriptreact',
+    jsx: 'javascript',
+    tsx: 'typescript',
 }
 
 const mapLanguage = (lang: string) => LANGUAGE_MAP[lang] ?? lang

package/lib/components/CodeEditorV2/codeEditorV2.types.ts

@@ -21,19 +21,58 @@ export type CodeEditorV2DiffLine = {
     type: CodeEditorV2DiffLineType
 }
 
-export type CodeEditorV2SupportedLanguage =
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorV2Language}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorV2Language =
     | 'javascript'
     | 'typescript'
-    | 'jsx'
-    | 'tsx'
     | 'json'
     | 'css'
+    | 'scss'
+    | 'less'
     | 'html'
+    | 'xml'
     | 'markdown'
     | 'yaml'
+    | 'ini'
+    | 'graphql'
+    | 'sql'
     | 'python'
     | 'rust'
-    | 'haskell'
+    | 'go'
+    | 'java'
+    | 'kotlin'
+    | 'swift'
+    | 'c'
+    | 'cpp'
+    | 'csharp'
+    | 'php'
+    | 'ruby'
+    | 'shell'
+    | 'powershell'
+    | 'dockerfile'
+    | 'plaintext'
+
+/**
+ * Language accepted by {@link CodeEditorV2Props.language}: autocomplete for
+ * {@link KnownCodeEditorV2Language}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (matching the internal
+ * `MonacoEditorWrapper`'s `language: string` — Monaco itself types the option
+ * as a plain `string`).
+ */
+export type CodeEditorV2Language = KnownCodeEditorV2Language | (string & {})
+
+/** @deprecated Use {@link CodeEditorV2Language} instead. */
+export type CodeEditorV2SupportedLanguage = CodeEditorV2Language
 
 export type CodeEditorV2Dimensions = {
     width?: CSSObject['width']
@@ -56,7 +95,7 @@ export type CodeEditorV2Props = {
         rightSlot?: ReactNode
         showCopyButton?: boolean
     }
-    language?: CodeEditorV2SupportedLanguage
+    language?: CodeEditorV2Language
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

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>
                 )