@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/dist/components/AccordionV2/index.d.ts

@@ -1,4 +1,7 @@
 export { default as AccordionV2 } from './AccordionV2';
 export { AccordionV2Item } from './AccordionV2Item';
+export { AccordionV2Chevron } from './AccordionV2Chevron';
+export { AccordionV2TriggerContent } from './AccordionV2TriggerContent';
+export * from './accordionV2.animations';
 export * from './accordionV2.tokens';
 export * from './accordionV2.types';

package/dist/components/AvatarV2/avatarV2.utils.d.ts

@@ -21,5 +21,5 @@ export declare function getStatusPositionStyles(position: AvatarV2StatusPosition
     bottom?: string;
     left?: string;
 };
-export declare function createKeyboardHandler(onClick: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined): ((e: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+export declare function createAvatarKeyboardHandler(onClick: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined): ((e: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
 export declare function isInteractive(onClick: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined): boolean;

package/dist/components/AvatarV2/index.d.ts

@@ -1,5 +1,4 @@
 export { default as AvatarV2 } from './AvatarV2';
-export type { AvatarV2Props, AvatarV2SkeletonConfig, AvatarV2StatusConfig, } from './avatarV2.types';
-export { AvatarV2Size, AvatarV2Shape, AvatarV2Status, AvatarV2StatusPosition, AvatarV2Variant, } from './avatarV2.types';
+export * from './avatarV2.types';
 export * from './avatarV2.tokens';
 export * from './avatarV2.utils';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import { BadgeProps } from './Badge.types';
+declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Badge;

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

@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+export declare enum BadgeColor {
+    ALERT = "alert",
+    NEUTRAL = "neutral",
+    WARNING = "warning",
+    PRIMARY = "primary",
+    SUCCESS = "success"
+}
+export declare enum BadgeSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type BaseBadgeProps = {
+    count?: number;
+    maxCount?: number;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    text?: string;
+    showBadge?: boolean;
+    showZero?: boolean;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'size' | 'className' | 'style' | 'children'>;
+type StandaloneBadgeProps = BaseBadgeProps & {
+    children?: undefined;
+};
+type PositionedBadgeProps = BaseBadgeProps & {
+    children: ReactElement;
+    position?: BadgePosition;
+    offset?: [number, number];
+    isCircular?: boolean;
+};
+export type BadgeProps = StandaloneBadgeProps | PositionedBadgeProps;
+export {};

package/dist/components/Badge/badge.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveBadgeTokens } from './badge.tokens';
+export declare const getBadgeDarkTokens: (foundationToken: FoundationTokenType) => ResponsiveBadgeTokens;

package/dist/components/Badge/badge.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveBadgeTokens } from './badge.tokens';
+export declare const getBadgeLightTokens: (foundationToken: FoundationTokenType) => ResponsiveBadgeTokens;

package/dist/components/Badge/badge.tokens.d.ts

@@ -0,0 +1,55 @@
+import { CSSObject } from 'styled-components';
+import { BadgeSize, BadgeColor } from './Badge.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type BadgeTokensType = Readonly<{
+    dot: {
+        width: {
+            [key in BadgeSize]: CSSObject['width'];
+        };
+        height: {
+            [key in BadgeSize]: CSSObject['height'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+    };
+    pill: {
+        minWidth: {
+            [key in BadgeSize]: CSSObject['minWidth'];
+        };
+        height: {
+            [key in BadgeSize]: CSSObject['height'];
+        };
+        paddingLeft: {
+            [key in BadgeSize]: CSSObject['paddingLeft'];
+        };
+        paddingRight: {
+            [key in BadgeSize]: CSSObject['paddingRight'];
+        };
+        borderRadius: {
+            [key in BadgeSize]: CSSObject['borderRadius'];
+        };
+    };
+    backgroundColor: {
+        [key in BadgeColor]: CSSObject['backgroundColor'];
+    };
+    text: {
+        color: CSSObject['color'];
+        fontSize: {
+            [key in BadgeSize]: CSSObject['fontSize'];
+        };
+        fontWeight: CSSObject['fontWeight'];
+        lineHeight: {
+            [key in BadgeSize]: CSSObject['lineHeight'];
+        };
+    };
+    position: {
+        offset: {
+            [key in BadgeSize]: CSSObject['top'];
+        };
+    };
+}>;
+export type ResponsiveBadgeTokens = {
+    [key in keyof BreakpointType]: BadgeTokensType;
+};
+export declare const getBadgeTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveBadgeTokens;

package/dist/components/Badge/badge.utils.d.ts

@@ -0,0 +1,11 @@
+import { BadgeSize, BadgePosition } from './Badge.types';
+import { BadgeTokensType } from './badge.tokens';
+export declare const formatCount: (count: number, maxCount?: number) => string;
+export declare const getPositionStyles: (position: BadgePosition, size: BadgeSize, tokens: BadgeTokensType, customOffset?: [number, number], hasContent?: boolean, isCircular?: boolean) => {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    transform: string;
+};
+export declare const getAccessibleLabel: (count: number | undefined, text: string | undefined, maxCount: number, showBadge: boolean) => string | undefined;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export * from './Badge.types';

package/dist/components/BreadcrumbV2/index.d.ts

@@ -1,3 +1,13 @@
 export { default as BreadcrumbV2 } from './BreadcrumbV2';
+export { default as BreadcrumbV2Icon } from './BreadcrumbV2Icon';
+export { default as BreadcrumbV2Item } from './BreadcrumbV2Item';
+export { default as BreadcrumbV2List } from './BreadcrumbV2List';
+export type { BreadcrumbV2ListProps } from './BreadcrumbV2List';
+export { default as BreadcrumbV2OverflowMenu } from './BreadcrumbV2OverflowMenu';
+export type { BreadcrumbV2OverflowMenuProps } from './BreadcrumbV2OverflowMenu';
+export { default as BreadcrumbV2Page } from './BreadcrumbV2Page';
+export type { BreadcrumbV2PageProps } from './BreadcrumbV2Page';
+export { default as BreadcrumbV2Separator } from './BreadcrumbV2Separator';
 export * from './breadcrumbV2.tokens';
 export * from './breadcrumbV2.types';
+export * from './utils';

package/dist/components/ButtonV2/ButtonGroupV2/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ButtonGroupV2 } from './ButtonGroupV2';
 export type { ButtonGroupV2Props, ButtonGroupPosition, } from './buttonGroupV2.types';
 export * from './buttonGroupV2.types';
+export * from './utils';

package/dist/components/ButtonV2/buttonV2.types.d.ts

@@ -28,10 +28,6 @@ export declare enum PaddingDirection {
     BOTTOM = "bottom",
     LEFT = "left"
 }
-export declare const ButtonType: typeof ButtonV2Type;
-export declare const ButtonSize: typeof ButtonV2Size;
-export declare const ButtonSubType: typeof ButtonV2SubType;
-export declare const ButtonState: typeof ButtonV2State;
 export type ButtonSlot = {
     slot: React.ReactNode;
     maxHeight?: string | number;

package/dist/components/ButtonV2/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ButtonV2 } from './ButtonV2';
+export { renderButtonContent } from './ButtonV2';
 export { default as IconButton } from './IconButton';
 export { default as LinkButton } from './LinkButton';
 export { ButtonGroupV2 } from './ButtonGroupV2';
@@ -6,3 +7,5 @@ export type { ButtonV2Props, LinkButtonProps } from './buttonV2.types';
 export type { IconButtonProps } from './IconButton';
 export type { ButtonGroupV2Props, ButtonGroupPosition } from './ButtonGroupV2';
 export * from './buttonV2.types';
+export * from './buttonV2.tokens';
+export * from './utils';

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

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { ButtonV2Size, ButtonV2State, ButtonV2SubType, ButtonV2Type } from './buttonV2.types';
 import { ButtonV2TokensType } from './buttonV2.tokens';
-export declare function getBorderRadius(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, buttonGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: ButtonV2TokensType): string;
+export declare function getButtonV2BorderRadius(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, buttonGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: ButtonV2TokensType): string;
 export declare function createButtonClickHandler(onClick?: (event?: MouseEvent<HTMLButtonElement>) => void, isSkeleton?: boolean, isDisabled?: boolean, isLoading?: boolean): (event: MouseEvent<HTMLButtonElement>) => void;
 export declare function getButtonHeight(subType: ButtonV2SubType): string | undefined;
 export declare function getIconMaxHeight(subType: ButtonV2SubType, leftSlotMaxHeight: string | number | undefined, rightSlotMaxHeight: string | number | undefined, size: ButtonV2Size): string;

package/dist/components/ChartsV2/chartV2Options.d.ts

@@ -0,0 +1,3 @@
+import { default as Highcharts } from 'highcharts';
+import { ChartV2TokensType } from './chartV2.tokens';
+export declare const mergeChartOptions: (options: Highcharts.Options, tokens: ChartV2TokensType) => Record<string, unknown>;

package/dist/components/ChartsV2/index.d.ts

@@ -7,3 +7,8 @@ export { default as ChartV2Skeleton } from './ChartV2Skeleton';
 export { default as ChartV2NoData } from './ChartV2NoData';
 export * from './chartV2.tokens';
 export * from './chartV2.types';
+export { useChartLegend } from './useChartLegend';
+export { useChartLegendHover } from './useChartLegendHover';
+export { default as useChartRefs } from './useChartRefs';
+export { getLegendItems, applyHoverState } from './utils';
+export { mergeChartOptions } from './chartV2Options';

package/dist/components/ChatInput/ChatInput.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { AttachedFile, TopQuery } from './types';
 export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.ReactNode;
-declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> & {
     value?: string;
     slot1?: React.ReactNode;
     slot2?: React.ReactNode;

package/dist/components/CodeEditorV2/CodeEditorV2.d.ts

@@ -11,7 +11,7 @@ declare const CodeEditorV2: import('react').ForwardRefExoticComponent<{
         rightSlot?: import('react').ReactNode;
         showCopyButton?: boolean;
     };
-    language?: import('./codeEditorV2.types').SupportedLanguage;
+    language?: import('./codeEditorV2.types').CodeEditorV2SupportedLanguage;
     placeholder?: string;
     readOnly?: boolean;
     disabled?: boolean;

package/dist/components/CodeEditorV2/codeEditorV2.tokens.d.ts

@@ -1,14 +1,14 @@
 import { CSSObject } from 'styled-components';
-import { DiffLineType, MonacoTheme } from './codeEditorV2.types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
+import { CodeEditorV2DiffLineType } from './codeEditorV2.types';
 export type CodeEditorV2Tokens = {
     backgroundColor: CSSObject['backgroundColor'];
     border: CSSObject['border'];
     borderRadius: CSSObject['borderRadius'];
     boxShadow: CSSObject['boxShadow'];
-    theme: MonacoTheme;
+    theme: 'light' | 'dark';
     header: {
         backgroundColor: CSSObject['backgroundColor'];
         borderBottom: CSSObject['borderBottom'];
@@ -37,13 +37,13 @@ export type CodeEditorV2Tokens = {
             width: CSSObject['width'];
             color: CSSObject['color'];
             backgroundColor: {
-                [key in DiffLineType]: CSSObject['backgroundColor'];
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor'];
             };
             borderLeft: {
-                [key in DiffLineType]: CSSObject['borderLeft'];
+                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft'];
             };
             borderColor: {
-                [key in DiffLineType]: CSSObject['color'];
+                [key in CodeEditorV2DiffLineType]: CSSObject['color'];
             };
         };
         code: {
@@ -57,7 +57,7 @@ export type CodeEditorV2Tokens = {
         };
         highlightedLine: {
             backgroundColor: {
-                [key in DiffLineType]: CSSObject['backgroundColor'];
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor'];
             };
         };
         syntax: {

package/dist/components/CodeEditorV2/codeEditorV2.types.d.ts

@@ -10,16 +10,16 @@ export declare enum MonacoTheme {
     LIGHT = "light",
     DARK = "dark"
 }
-export declare enum DiffLineType {
+export declare enum CodeEditorV2DiffLineType {
     ADDED = "added",
     REMOVED = "removed",
     UNCHANGED = "unchanged"
 }
-export type DiffLine = {
+export type CodeEditorV2DiffLine = {
     content: string;
-    type: DiffLineType;
+    type: CodeEditorV2DiffLineType;
 };
-export type SupportedLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'json' | 'css' | 'html' | 'markdown' | 'yaml' | 'python' | 'rust' | 'haskell';
+export type CodeEditorV2SupportedLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'json' | 'css' | 'html' | 'markdown' | 'yaml' | 'python' | 'rust' | 'haskell';
 export type CodeEditorV2Dimensions = {
     width?: CSSObject['width'];
     maxWidth?: CSSObject['maxWidth'];
@@ -41,7 +41,7 @@ export type CodeEditorV2Props = {
         rightSlot?: ReactNode;
         showCopyButton?: boolean;
     };
-    language?: SupportedLanguage;
+    language?: CodeEditorV2SupportedLanguage;
     placeholder?: string;
     readOnly?: boolean;
     disabled?: boolean;

package/dist/components/CodeEditorV2/index.d.ts

@@ -1,3 +1,5 @@
 export { default as CodeEditorV2 } from './CodeEditorV2';
+export { CodeEditorV2Header } from './CodeEditorV2Header';
 export * from './codeEditorV2.types';
 export * from './codeEditorV2.tokens';
+export * from './utils';

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

@@ -22,7 +22,7 @@ export declare const isDiffEditorMode: (diff: boolean | undefined, variant: Code
 /**
  * Calculates container styles with min/max height
  */
-export declare const getContainerStyles: (minHeight?: string | number, maxHeight?: string | number) => React.CSSProperties;
+export declare const getCodeEditorV2ContainerStyles: (minHeight?: string | number, maxHeight?: string | number) => React.CSSProperties;
 export declare const toCssValue: (value?: string | number) => string | undefined;
 export declare const toNumericValue: (value: string | number | undefined, fallback?: number) => number;
 export type EditorMetrics = {
@@ -46,6 +46,15 @@ export declare function getPlaceholderPosition(metrics: EditorMetrics, showLineN
     left: string;
 };
 export declare function configureLanguageDefaults(monaco: typeof import('monaco-editor')): void;
+/** Monaco `IEditor` has `focus()` but no `blur()` — clear focus on the editor subtree. */
+export declare function blurMonacoEditorDom(editor: Monaco.editor.ICodeEditor): void;
+/**
+ * Single place for “view only” vs editable: locks model + DOM (no edit tooltip),
+ * empty read-only message, calmer code-block chrome, and restores IDE defaults when editable.
+ */
+export declare function getMonacoViewModeOptions(readOnly: boolean, disabled: boolean): Partial<Monaco.editor.IEditorOptions>;
+/** Diff panes do not always inherit root options — push view mode + scrollbar to both sides. */
+export declare function syncDiffEditorPaneViewMode(diffEditor: Monaco.editor.IStandaloneDiffEditor, readOnly: boolean, disabled: boolean): void;
 /** Options applied on editor mount (full set) */
 export declare function getMountEditorOptions(metrics: EditorMetrics, tokens: CodeEditorV2Tokens, showLineNumbers: boolean, readOnly: boolean, disabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions;
 /** Options applied when props change (subset) */

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { DataTableProps } from './types';
-declare const DataTable: import('react').ForwardRefExoticComponent<DataTableProps<Record<string, unknown>> & import('react').RefAttributes<HTMLDivElement>>;
+declare const DataTable: React.ForwardRefExoticComponent<DataTableProps<Record<string, unknown>> & React.RefAttributes<HTMLDivElement>>;
 export default DataTable;

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

@@ -2,6 +2,7 @@ type DataTablePaginationProps = {
     currentPage: number;
     pageSize: number;
     totalRows: number;
+    visibleRows?: number;
     pageSizeOptions: number[];
     isLoading?: boolean;
     hasData?: boolean;
@@ -9,5 +10,5 @@ type DataTablePaginationProps = {
     onPageChange: (page: number) => void;
     onPageSizeChange: (pageSize: number) => void;
 };
-export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, isLoading, hasData, isNarrowContainer, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, visibleRows, isLoading, hasData, isNarrowContainer, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/PivotTableModal/PivotPreviewPanel.d.ts

@@ -0,0 +1,3 @@
+import { PivotPreviewPanelProps } from './types';
+declare const PivotPreviewPanel: import('react').ForwardRefExoticComponent<PivotPreviewPanelProps & import('react').RefAttributes<HTMLDivElement>>;
+export default PivotPreviewPanel;

package/dist/components/DataTable/PivotTableModal/PivotTableIllustration.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Pivot Table Illustration Component
+ * Displays when no pivot configuration is set
+ * Uses optimized PNG illustration with proper sizing
+ */
+export declare const PivotTableIllustration: () => import("react/jsx-runtime").JSX.Element;
+export default PivotTableIllustration;

package/dist/components/DataTable/PivotTableModal/index.d.ts

@@ -0,0 +1,3 @@
+import { PivotTableModalProps } from './types';
+declare const PivotTableModal: import('react').ForwardRefExoticComponent<PivotTableModalProps<Record<string, unknown>> & import('react').RefAttributes<HTMLDivElement>>;
+export default PivotTableModal;

package/dist/components/DataTable/PivotTableModal/pivotModalStyleTokens.d.ts

@@ -0,0 +1,123 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { TableTokenType } from '../dataTable.tokens';
+export type PivotModalStyleTokens = {
+    modal: {
+        minWidth: string;
+        maxWidth: string;
+        maxHeight: string;
+        bodyPadding: string;
+        bodyGap: string;
+    };
+    rightPanel: {
+        width: string;
+        padding: string;
+        background: string;
+        border: string;
+        borderRadius: string;
+    };
+    shell: {
+        display: 'grid';
+        gridTemplateColumns: string;
+        height: string;
+        overflow: 'hidden';
+    };
+    layout: {
+        wideDesktopMinWidth: number;
+        wideDesktopColumns: string;
+        fallbackColumns: string;
+    };
+    panelPadding: string;
+    configPanelBackground: string;
+    previewPanelBackground: string;
+    text: {
+        sectionTitle: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+        };
+        fieldLabel: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+        };
+        checkboxLabel: {
+            fontSize: string;
+            color: string;
+        };
+    };
+    spacing: {
+        sectionGap: string;
+        builderIntroGap: string;
+        stackGap: string;
+        controlsRowGap: string;
+        iconBadgeGap: string;
+        sectionHeaderMarginBottom: string;
+    };
+    dropZone: {
+        emptyMinHeight: string;
+        padding: string;
+        borderRadius: string;
+        border: string;
+        background: string;
+    };
+    chip: {
+        borderRadius: string;
+        padding: string;
+        hoverShadow: string;
+        hoverTranslateY: string;
+        transition: string;
+    };
+    iconBadge: {
+        size: string;
+        borderRadius: string;
+        glyphFontSize: string | number;
+        glyphFontWeight: number;
+    };
+    sectionLabel: {
+        fontWeight: number;
+        fontSize: string | number;
+        textTransform: 'uppercase';
+        letterSpacing: string;
+    };
+    sectionCount: {
+        fontSize: string | number;
+        color: string;
+    };
+    emptyState: {
+        titleFontSize: string | number;
+        titleColor: string;
+        exampleFontSize: string | number;
+        exampleColor: string;
+        padding: string;
+        titleMarginBottom: string;
+    };
+    fieldRowLabel: {
+        fontSize: string | number;
+        color: string;
+        marginBottom: string;
+    };
+    removeButton: {
+        minWidth: string;
+        padding: string;
+        borderRadius: string;
+        border: string;
+        background: string;
+        hoverBackground: string;
+        iconColor: string;
+        iconSize: number;
+    };
+    menuCheckIconSize: number;
+    preview: {
+        headerMarginBottom: string;
+        titleFontWeight: number;
+        titleFontSize: string | number;
+        titleMarginBottom: string;
+        metaFontSize: string;
+    };
+    bodyLineHeight: string;
+};
+/**
+ * Layout and typography for the pivot modal, derived from foundation tokens + responsive table tokens.
+ * Section chips use `colors.primary` only (see color.tokens).
+ */
+export declare const getPivotModalStyleTokens: (f: FoundationTokenType, tableToken: TableTokenType) => PivotModalStyleTokens;

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

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { TableTokenType } from '../dataTable.tokens';
+import { ColumnDefinition, PivotAggregationType } from '../types';
+import { PivotModalStyleTokens } from './pivotModalStyleTokens';
+export type PivotValueConfig<T extends Record<string, unknown>> = {
+    field: keyof T;
+    aggregation: PivotAggregationType;
+};
+export type PivotTableConfig<T extends Record<string, unknown>> = {
+    rows: Array<keyof T>;
+    columns: Array<keyof T>;
+    values: PivotValueConfig<T>[];
+};
+export type PivotTableModalProps<T extends Record<string, unknown>> = {
+    isOpen: boolean;
+    onClose: () => void;
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    title?: string;
+    description?: string;
+    showExport?: boolean;
+    initialConfig?: Partial<PivotTableConfig<T>>;
+    previewColumns?: PivotPreviewColumn[];
+    previewRows?: PivotPreviewRow[];
+    onConfigChange?: (config: PivotTableConfig<T>) => void;
+    onExport?: (config: PivotTableConfig<T>) => void;
+    trigger?: ReactNode;
+    /**
+     * Callback when trigger is clicked. Use this to open the modal.
+     */
+    onTriggerClick?: () => void;
+    /**
+     * Configure which aggregation operations are available in the Values section.
+     * If not provided, all operations will be shown.
+     * @example ['sum', 'count', 'average'] // Show only sum, count, and average
+     */
+    availableAggregations?: PivotAggregationType[];
+};
+export type PivotPreviewColumn = {
+    key: string;
+    label: string;
+};
+export type PivotPreviewRow = Record<string, unknown> & {
+    __pivotId: string;
+    __pivotRowType?: 'data' | 'subtotal' | 'grand_total';
+};
+export type PivotPreviewPanelProps = {
+    pivot: PivotModalStyleTokens;
+    tableToken: TableTokenType;
+    showExport: boolean;
+    previewRows?: PivotPreviewRow[];
+    previewColumns?: PivotPreviewColumn[];
+    previewTableColumns: ColumnDefinition<Record<string, unknown>>[];
+    onExport: () => void;
+    hasValues: boolean;
+};
+export type PivotFieldConfig = {
+    field: string;
+    showTotal: boolean;
+    aggregation?: PivotAggregationType;
+    header?: string;
+};

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

@@ -0,0 +1,32 @@
+import { ColumnDefinition, PivotAggregationType } from '../types';
+import { PivotPreviewColumn, PivotPreviewRow, PivotValueConfig } from './types';
+export declare const normalizePivotValue: (value: unknown) => string;
+export declare const getPivotFieldOptions: <T extends Record<string, unknown>>(columns: ColumnDefinition<T>[]) => Array<{
+    key: string;
+    label: string;
+}>;
+export declare const isPivotNumericValue: (value: unknown) => boolean;
+export declare const getSupportedAggregationsForField: <T extends Record<string, unknown>>(data: T[], field: keyof T, allowedAggregations: PivotAggregationType[], isNumericColumn?: boolean) => PivotAggregationType[];
+/**
+ * Builds the rectangular grid the modal preview renders as a {@link DataTable}.
+ *
+ * - **Columns:** First column key `__rowLabel` — header is joined row field names
+ *   (or `All Rows`). Each unique combination of **column** dimension values
+ *   becomes a group; for each group, every **value** config adds one column
+ *   (`columnKey__field__aggregation`).
+ * - **Rows:** One row per distinct row-dimension key; cells are aggregated from
+ *   raw rows that match that row key and column key.
+ * - **Grand total:** Appended last with `__pivotRowType: 'grand_total'` and
+ *   `__rowLabel` `"Grand Total"`; each metric is aggregated over the full
+ *   (already filtered) `data` for that column bucket.
+ */
+export declare const buildPivotPreview: <T extends Record<string, unknown>>(data: T[], rowFields: Array<keyof T> | Array<{
+    field: keyof T;
+    showTotal?: boolean;
+}>, columnFields: Array<keyof T> | Array<{
+    field: keyof T;
+    showTotal?: boolean;
+}>, valueConfigs: PivotValueConfig<T>[], fieldLabelByKey?: Record<string, string>) => {
+    columns: PivotPreviewColumn[];
+    rows: PivotPreviewRow[];
+};

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

@@ -3,6 +3,7 @@ import { MobileDataTableConfig } from '../hooks/useMobileDataTable';
 import { SkeletonVariant } from '../../Skeleton/skeleton.tokens';
 export type TableBodyProps<T extends Record<string, unknown>> = {
     currentData: T[];
+    dataVersion?: number | string;
     visibleColumns: ColumnDefinition<T>[];
     idField: string;
     tableTitle?: string;
@@ -11,9 +12,14 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     editValues: Record<string, T>;
     expandedRows: Record<string, boolean>;
     enableInlineEdit?: boolean;
+    showActionsColumn?: boolean;
     enableColumnManager?: boolean;
     enableRowExpansion?: boolean;
     enableRowSelection?: boolean;
+    rowSelectionConfig?: {
+        isDisabled?: (row: T, index: number) => boolean;
+        disabledText?: (row: T, index: number) => string;
+    };
     rowActions?: RowActionsConfig<T>;
     columnFreeze?: number;
     /** Freeze last N columns on the right side (sticky right). */
@@ -30,7 +36,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
         toggleExpansion: () => void;
     }) => React.ReactNode;
     isRowExpandable?: (row: T, index: number) => boolean;
-    onRowSelect: (rowId: unknown) => void;
+    onRowSelect: (rowId: unknown, rowIndex?: number) => void;
     onEditRow: (rowId: unknown) => void;
     onSaveRow: (rowId: unknown) => void;
     onCancelEdit: (rowId: unknown) => void;

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

@@ -4,6 +4,7 @@ export type TableFooterProps = {
     currentPage: number;
     pageSize: number;
     totalRows: number;
+    visibleRows?: number;
     isLoading?: boolean;
     showSkeleton?: boolean;
     hasData?: boolean;