@juspay/blend-design-system 0.0.37-beta.3 → 0.0.37-beta.5

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/Breadcrumb/Breadcrumb.d.ts

@@ -1,9 +1,6 @@
-import { BreadcrumbItemType, BreadcrumbSkeletonProps } from './types';
+import { BreadcrumbProps } from './types';
 declare const Breadcrumb: {
-    ({ items, skeleton, }: {
-        items: BreadcrumbItemType[];
-        skeleton?: BreadcrumbSkeletonProps;
-    }): import("react/jsx-runtime").JSX.Element | null;
+    ({ items: itemsProp, skeleton }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default Breadcrumb;

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

@@ -3,6 +3,12 @@ export type BreadcrumbSkeletonProps = {
     show: boolean;
     variant: SkeletonVariant;
 };
+/** Replace null, undefined, or non-array `items` with `[]`. */
+export declare function normalizeBreadcrumbItems(items: BreadcrumbItemType[] | null | undefined): BreadcrumbItemType[];
+export type BreadcrumbProps = {
+    items: BreadcrumbItemType[] | null;
+    skeleton?: BreadcrumbSkeletonProps;
+};
 export type BreadcrumbItemType = {
     leftSlot?: React.ReactNode;
     rightSlot?: React.ReactNode;

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/Charts/ChartUtils.d.ts

@@ -1,4 +1,6 @@
 import { NewNestedDataPoint, FlattenedDataPoint, AxisConfig } from './types';
+/** Replace null, undefined, or non-array `data` with `[]` (empty / no-data state). */
+export declare function normalizeChartData(data: NewNestedDataPoint[] | null | undefined): NewNestedDataPoint[];
 export declare function transformNestedData(data: NewNestedDataPoint[], selectedKeys?: string[]): FlattenedDataPoint[];
 export declare function transformScatterData(data: NewNestedDataPoint[], selectedKeys?: string[]): Array<{
     name: string;

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

@@ -144,7 +144,7 @@ export type RenderChartProps = {
 };
 export type CoreChartProps = {
     chartType?: ChartType;
-    data: NewNestedDataPoint[];
+    data?: NewNestedDataPoint[] | null;
     colors?: {
         key: string;
         color: string;
@@ -168,7 +168,7 @@ export type ChartsSkeletonProps = {
 };
 export type ChartsProps = {
     chartType?: ChartType;
-    data: NewNestedDataPoint[];
+    data?: NewNestedDataPoint[] | null;
     colors?: {
         key: string;
         color: string;

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/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,8 +1,8 @@
 import { CSSObject } from 'styled-components';
-import { DiffLineType } 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'];
@@ -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 = {

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/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,6 +12,7 @@ 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;

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

@@ -7,6 +7,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     selectAll: boolean | 'indeterminate';
     sortConfig?: SortConfig | null;
     enableInlineEdit?: boolean;
+    showActionsColumn?: boolean;
     enableColumnManager?: boolean;
     enableColumnReordering?: boolean;
     showSkeleton?: boolean;

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

@@ -8,3 +8,5 @@ export * from './DataTableHeader/types';
 export * from './dataTable.tokens';
 export { validateColumnData, getColumnTypeConfig } from './columnTypes';
 export type { ColumnFilterOption, SelectData, MultiSelectData, DateData, DateRangeData, TagData, ColumnDataTypeMap, GetColumnDataType, ColumnTypeConfig, AvatarData as DataTableAvatarData, } from './columnTypes';
+export { default as PivotTableModal } from './PivotTableModal';
+export * from './PivotTableModal/types';

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

@@ -31,6 +31,15 @@ export declare enum ColumnType {
     SLIDER = "slider",
     CUSTOM = "custom"
 }
+export declare enum PivotAggregationType {
+    SUM = "sum",
+    COUNT = "count",
+    AVERAGE = "average",
+    MEAN = "mean",
+    MEDIAN = "median",
+    MIN = "min",
+    MAX = "max"
+}
 export type AvatarColumnProps = {
     src?: string;
     alt?: string;
@@ -328,10 +337,12 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     headerSlot1?: ReactNode;
     headerSlot2?: ReactNode;
     enableInlineEdit?: boolean;
+    showActionsColumn?: boolean;
     onRowSave?: (rowId: unknown, updatedRow: T) => void;
     onRowCancel?: (rowId: unknown) => void;
     onRowClick?: (row: T, index: number) => void;
     onFieldChange?: (rowId: unknown, fieldName: keyof T, value: unknown) => void;
+    onHeaderChange?: (field: keyof T, newHeader: string) => void;
     enableRowExpansion?: boolean;
     renderExpandedRow?: (expandedData: {
         row: T;
@@ -354,4 +365,49 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     tableBodyHeight?: string | number;
     mobileColumnsToShow?: number;
+    enablePivotTable?: boolean;
+    pivotTableConfig?: {
+        triggerButton?: ReactNode;
+        triggerSlot?: 1 | 2 | 3;
+        title?: string;
+        description?: string;
+        showExport?: boolean;
+        initialConfig?: {
+            rows?: (keyof T)[];
+            columns?: (keyof T)[];
+            values?: Array<{
+                field: keyof T;
+                aggregation: PivotAggregationType;
+            }>;
+        };
+        previewColumns?: Array<{
+            key: string;
+            label: string;
+        }>;
+        previewRows?: Array<Record<string, unknown> & {
+            __pivotId: string;
+        }>;
+        /**
+         * 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[];
+        onConfigChange?: (config: {
+            rows: (keyof T)[];
+            columns: (keyof T)[];
+            values: Array<{
+                field: keyof T;
+                aggregation: PivotAggregationType;
+            }>;
+        }) => void;
+        onExport?: (config: {
+            rows: (keyof T)[];
+            columns: (keyof T)[];
+            values: Array<{
+                field: keyof T;
+                aggregation: PivotAggregationType;
+            }>;
+        }) => void;
+    };
 };

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

@@ -1,4 +1,4 @@
-import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition } from './types';
+import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition, PivotAggregationType } from './types';
 import { AvatarData, TagData, SelectData, MultiSelectData, DateData, DateRangeData } from './columnTypes';
 export declare const isDateOnlyString: (value: string) => boolean;
 /**
@@ -58,3 +58,21 @@ export declare const enforceDataTypeMatching: <T extends Record<string, unknown>
     throwOnError?: boolean;
     logWarnings?: boolean;
 }) => boolean;
+type PivotValueConfig<T extends Record<string, unknown>> = {
+    field: keyof T;
+    aggregation: PivotAggregationType;
+    label?: string;
+};
+type PivotResultRow = Record<string, unknown>;
+export declare const buildPivotData: <T extends Record<string, unknown>>(data: T[], rowFields: (keyof T)[], columnFields: (keyof T)[], valueConfigs: PivotValueConfig<T>[], filterValues?: Record<string, string[]>) => {
+    columns: Array<{
+        key: string;
+        label: string;
+    }>;
+    rows: PivotResultRow[];
+};
+export declare const exportPivotToCSV: (rows: PivotResultRow[], columns: Array<{
+    key: string;
+    label: string;
+}>, filename: string) => void;
+export {};

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

@@ -165,7 +165,7 @@ export type CustomPresetDefinition = {
 /**
  * Presets configuration - can be predefined presets, custom configs, or custom definitions
  */
-export type PresetsConfig = DateRangePreset[] | CustomPresetConfig[] | CustomPresetDefinition[] | (DateRangePreset | CustomPresetConfig | CustomPresetDefinition)[];
+export type PresetsConfig = (DateRangePreset | CustomPresetConfig | CustomPresetDefinition)[];
 /**
  * Function type for custom date disabling logic
  * @param date The date to check

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

@@ -62,6 +62,8 @@ export declare const parseDate: (dateString: string, format: string, hour: numbe
  * @returns True if the date is valid
  */
 export declare const isValidDate: (date: Date) => boolean;
+/** True when a controlled `value` has a usable start date (avoids `.getTime()` on undefined). */
+export declare const isControlledDateRange: (value?: DateRange | null) => value is DateRange;
 /**
  * Formats time in 12-hour format
  * @param date The date to format