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

package/dist/components/DataTable/TableBody/types.d.ts

@@ -46,6 +46,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     getColumnWidth: (column: ColumnDefinition<T>, index: number) => 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/dist/components/DataTable/TableCell/types.d.ts

@@ -14,6 +14,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/dist/components/DataTable/columnTypes.d.ts

@@ -1,4 +1,4 @@
-import { FilterType, ColumnType } from './types';
+import { FilterType, ColumnType, DateFormat } from './types';
 export type ColumnFilterOption = {
     id: string;
     label: string;
@@ -36,12 +36,14 @@ 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 = {
     [ColumnType.TEXT]: string | number;

package/dist/components/DataTable/dataTable.tokens.d.ts

@@ -194,6 +194,10 @@ 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'];

package/dist/components/DataTable/types.d.ts

@@ -73,10 +73,18 @@ export type DropdownColumnProps = {
     placeholder?: string;
     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 = {
     min: number;
@@ -204,8 +212,13 @@ export type ColumnDefinition<T> = (BaseColumnDefinition<T> & {
 }) | (BaseColumnDefinition<T> & {
     type: ColumnType.DATE;
     renderCell?: (value: DateColumnProps, 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;
     renderCell?: (value: number, row: T, index: number) => ReactNode;
@@ -365,6 +378,11 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     tableBodyHeight?: string | number;
     mobileColumnsToShow?: number;
+    /**
+     * Optional label appended after formatted dates in DATE columns,
+     * e.g. "(IST)". Can be overridden per-column or per-cell.
+     */
+    dateLabel?: string;
     enablePivotTable?: boolean;
     pivotTableConfig?: {
         triggerButton?: ReactNode;

package/dist/components/DataTable/utils.d.ts

@@ -1,4 +1,4 @@
-import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition, PivotAggregationType } from './types';
+import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition, PivotAggregationType, DateFormat } from './types';
 import { AvatarData, TagData, SelectData, MultiSelectData, DateData, DateRangeData } from './columnTypes';
 export declare const isDateOnlyString: (value: string) => boolean;
 /**
@@ -20,6 +20,7 @@ export declare const getDefaultColumnWidth: <T extends Record<string, unknown>>(
 };
 export declare const getColumnStyles: <T extends Record<string, unknown>>(column: ColumnDefinition<T>) => React.CSSProperties;
 export declare const formatDate: (dateString: string) => string;
+export declare const formatDateString: (date: Date, format: string) => string;
 export declare const updateColumnFilter: (currentFilters: ColumnFilter[], field: keyof Record<string, unknown>, type: FilterType, value: string | string[] | {
     min: number;
     max: number;
@@ -48,8 +49,8 @@ export declare const createSelectData: (value: string, options?: {
     disabled?: boolean;
 }) => SelectData;
 export declare const createMultiSelectData: (values: string[], labels?: string[]) => MultiSelectData;
-export declare const createDateData: (date: Date | string, format?: string) => DateData;
-export declare const createDateRangeData: (startDate: Date | string, endDate: Date | string, format?: string) => DateRangeData;
+export declare const createDateData: (date: Date | string, format?: DateFormat) => DateData;
+export declare const createDateRangeData: (startDate: Date | string, endDate: Date | string, format?: DateFormat) => DateRangeData;
 export declare const validateDataForColumnType: <T extends Record<string, unknown>>(data: T, columns: ColumnDefinition<T>[]) => {
     isValid: boolean;
     errors: string[];

package/dist/components/Skeleton/hooks/useSkeletonBase.d.ts

@@ -1,17 +1,13 @@
 import { ReactNode } from 'react';
 import { 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 declare const useSkeletonBase: (loading: boolean, children?: ReactNode) => {
-    shouldRender: boolean;
-    fallback: string | number | bigint | true | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
-    tokens: null;
-    prefersReducedMotion: boolean;
-} | {
-    shouldRender: boolean;
-    fallback: null;
-    tokens: SkeletonTokensType;
-    prefersReducedMotion: boolean;
-};
+export declare const useSkeletonBase: (loading: boolean, children?: ReactNode) => UseSkeletonBaseResult;

package/dist/components/StatCardV2/StatCardV2.d.ts

@@ -13,5 +13,6 @@ declare const StatCardV2: import('react').ForwardRefExoticComponent<{
     options?: import('../ChartsV2').ChartV2Options;
     skeleton?: import('./statcardV2.types').StatCardV2SkeletonProps;
     dropdownProps?: import('../SingleSelect').SingleSelectProps;
+    showBorder?: boolean;
 } & import('react').HTMLAttributes<HTMLDivElement> & import('./statcardV2.types').StatCardV2Dimensions & import('react').RefAttributes<HTMLDivElement>>;
 export default StatCardV2;

package/dist/components/StatCardV2/StatCardV2NoData.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { StatCardV2Props } from './statcardV2.types';
 import { StatCardV2TokensType } from './statcardV2.tokens';
-type StatCardV2NoDataProps = Pick<StatCardV2Props, 'title' | 'titleIcon' | 'helpIconText' | 'subtitle' | 'dropdownProps' | 'maxWidth' | 'minWidth' | 'width' | 'height'> & {
+type StatCardV2NoDataProps = Pick<StatCardV2Props, 'title' | 'titleIcon' | 'helpIconText' | 'subtitle' | 'dropdownProps' | 'maxWidth' | 'minWidth' | 'width' | 'height' | 'showBorder'> & {
     tokens: StatCardV2TokensType;
     isSmallScreen: boolean;
     filteredProps: React.ComponentProps<'div'>;
 };
-declare const StatCardV2NoData: ({ title, titleIcon, helpIconText, subtitle, dropdownProps, maxWidth, minWidth, width, height, tokens, isSmallScreen, filteredProps, }: StatCardV2NoDataProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatCardV2NoData: ({ title, titleIcon, helpIconText, subtitle, dropdownProps, maxWidth, minWidth, width, height, showBorder, tokens, isSmallScreen, filteredProps, }: StatCardV2NoDataProps) => import("react/jsx-runtime").JSX.Element;
 export default StatCardV2NoData;

package/dist/components/StatCardV2/statcardV2.types.d.ts

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

package/dist/components/TabsV2/tabsV2.tokens.types.d.ts

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

package/dist/global-utils/GlobalUtils.d.ts

@@ -1,11 +1,12 @@
 import { default as React, ReactNode } from 'react';
 export declare const toPixels: (value: string | number | undefined) => number;
 export declare const capitalizeFirstLetter: (string: string) => string;
-export declare const getTruncatedText: (text: string, limit?: number) => {
+export type TruncatedTextResult = {
     truncatedValue: string;
     fullValue: string;
     isTruncated: boolean;
 };
+export declare const getTruncatedText: (text: string, limit?: number) => TruncatedTextResult;
 export declare const formatTextWithLineBreaks: (content: ReactNode | string) => ReactNode;
 /**
  * Composes multiple refs (forwarded ref + trigger's ref) so both receive the same DOM instance.