@wallarm-org/design-system 0.23.1 → 0.23.2

package/dist/components/Attribute/Attribute.js

@@ -9,7 +9,7 @@ const Attribute = ({ ref, loading = false, children, className, 'data-testid': t
             ref: ref,
             "data-testid": testId,
             "data-slot": "attribute",
-            className: cn('flex flex-col', className),
+            className: cn('flex flex-col', loading && 'gap-4 py-2', className),
             children: loading ? /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(Skeleton, {
@@ -17,13 +17,10 @@ const Attribute = ({ ref, loading = false, children, className, 'data-testid': t
                         height: "16px",
                         rounded: 6
                     }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "pt-4",
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            width: "100%",
-                            height: "24px",
-                            rounded: 6
-                        })
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        width: "100%",
+                        height: "24px",
+                        rounded: 6
                     })
                 ]
             }) : children

package/dist/components/SplitButton/classes.js

@@ -1,7 +1,8 @@
 import { cva } from "class-variance-authority";
 const splitButtonVariants = cva([
-    'inline-flex items-center gap-1',
+    'inline-flex items-center',
     '[&>:first-child]:rounded-r-none',
-    '[&>:last-child]:rounded-l-none'
+    '[&>:last-child]:rounded-l-none',
+    '[&>:not(:first-child)]:-ml-px'
 ]);
 export { splitButtonVariants };

package/dist/components/Table/Table.js

@@ -1,8 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TestIdProvider } from "../../utils/testId.js";
 import { TableProvider } from "./TableContext/index.js";
 import { TableInner } from "./TableInner/index.js";
-import { TablePreviewDrawer } from "./TablePreviewDrawer.js";
 const Table = (props)=>{
     const { data, isLoading = false, children, className, 'aria-label': ariaLabel, 'data-testid': testId, ...providerProps } = props;
     const isEmpty = 0 === data.length && !isLoading;
@@ -11,20 +10,17 @@ const Table = (props)=>{
         data: data,
         isLoading: isLoading,
         ...providerProps,
-        children: /*#__PURE__*/ jsxs(TestIdProvider, {
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
             value: testId,
-            children: [
-                /*#__PURE__*/ jsx(TableInner, {
-                    isEmpty: isEmpty,
-                    virtualized: props.virtualized,
-                    showSettings: showSettings,
-                    ariaLabel: ariaLabel,
-                    className: className,
-                    "data-testid": testId,
-                    children: children
-                }),
-                /*#__PURE__*/ jsx(TablePreviewDrawer, {})
-            ]
+            children: /*#__PURE__*/ jsx(TableInner, {
+                isEmpty: isEmpty,
+                virtualized: props.virtualized,
+                showSettings: showSettings,
+                ariaLabel: ariaLabel,
+                className: className,
+                "data-testid": testId,
+                children: children
+            })
         })
     });
 };

package/dist/components/Table/TableBody/TableBodyCell.js

@@ -3,12 +3,11 @@ import { flexRender } from "@tanstack/react-table";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
-import { usePreviewCell } from "../hooks/index.js";
+import { useMasterCell } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, getAlignClass, getExpandBorderClass, getPinningStyles, isLastPinnedLeft, useColumnDnd } from "../lib/index.js";
 import { Td } from "../primitives/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableMasterCellActions } from "../TableMasterCellActions.js";
-import { TablePreviewToggle } from "../TablePreviewToggle.js";
 const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
     const { allLeafColumns, masterColumnId } = useTableContext();
     const testId = useTestId('body-cell');
@@ -20,10 +19,10 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
     const { canDnd, setNodeRef, dndStyle } = useColumnDnd(column);
     const pinningStyles = getPinningStyles(column);
     const lastLeft = isLastPinnedLeft(column, allLeafColumns, column.id);
-    const { isMasterTrigger, isButtonTrigger, isActive, togglePreview, tooltipText } = usePreviewCell(column.id, cell.row.id);
+    const { isMasterTrigger, handleClick, tooltipText } = useMasterCell(column.id, cell.row.id);
     const isCut = column.id === masterColumnId || meta?.resizeType === 'cut';
     const content = flexRender(cell.column.columnDef.cell, cell.getContext());
-    const hasActions = isButtonTrigger || !!meta?.renderPreviewAction || !!meta?.renderMenuAction;
+    const hasActions = !!meta?.renderMenuAction;
     const renderContent = ()=>{
         const wrappedContent = tooltipText ? /*#__PURE__*/ jsxs(Tooltip, {
             children: [
@@ -46,15 +45,8 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
             className: "flex items-center justify-between gap-2",
             children: [
                 wrappedContent,
-                /*#__PURE__*/ jsxs(TableMasterCellActions, {
-                    children: [
-                        isButtonTrigger && /*#__PURE__*/ jsx(TablePreviewToggle, {
-                            active: isActive,
-                            onClick: togglePreview
-                        }),
-                        meta?.renderPreviewAction?.(cell.row),
-                        meta?.renderMenuAction?.(cell.row)
-                    ]
+                /*#__PURE__*/ jsx(TableMasterCellActions, {
+                    children: meta?.renderMenuAction?.(cell.row)
                 })
             ]
         });
@@ -74,7 +66,7 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
         lastPinnedLeft: disablePinnedShadow ? false : lastLeft,
         expanded: isExpandedToggle,
         ref: canDnd ? setNodeRef : void 0,
-        onClick: isMasterTrigger ? togglePreview : void 0,
+        onClick: isMasterTrigger ? handleClick : void 0,
         style: {
             ...pinningStyles,
             width: cell.column.getSize(),

package/dist/components/Table/TableBody/useResetVirtualizerOnDataChange.d.ts

@@ -5,4 +5,4 @@ import type { Virtualizer } from '@tanstack/react-virtual';
  * does not retain stale heights from a previous data set.
  * Tracks first row ID to distinguish "new data" from "appended rows" (infinite scroll).
  */
-export declare function useResetVirtualizerOnDataChange(table: Table<unknown>, virtualizer: Virtualizer<Element, Element> | Virtualizer<Window, Element> | Virtualizer<HTMLElement, Element>): void;
+export declare const useResetVirtualizerOnDataChange: (table: Table<unknown>, virtualizer: Virtualizer<Element, Element> | Virtualizer<Window, Element> | Virtualizer<HTMLElement, Element>) => void;

package/dist/components/Table/TableBody/useResetVirtualizerOnDataChange.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-function useResetVirtualizerOnDataChange(table, virtualizer) {
+const useResetVirtualizerOnDataChange = (table, virtualizer)=>{
     const rows = table.getRowModel().rows;
     const firstRowId = rows[0]?.id;
     const prevFirstRowIdRef = useRef(firstRowId);
@@ -12,5 +12,5 @@ function useResetVirtualizerOnDataChange(table, virtualizer) {
         firstRowId,
         virtualizer
     ]);
-}
+};
 export { useResetVirtualizerOnDataChange };

package/dist/components/Table/TableContext/TableProvider.js

@@ -8,13 +8,8 @@ import { useTableState } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, createExpandColumn, createSelectionColumn } from "../lib/index.js";
 import { TableContext } from "./TableContext.js";
 const TableProvider = (props)=>{
-    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, preview } = props;
-    const renderPreviewHeader = preview?.renderHeader;
-    const renderPreviewContent = preview?.renderContent;
-    const previewTrigger = preview?.trigger ?? 'master';
-    const previewTooltipText = preview?.tooltipText ?? 'Open preview';
-    const previewRowIdProp = preview?.rowId;
-    const onPreviewRowChange = preview?.onRowChange;
+    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onMasterCellClick, activeRowId: activeRowIdProp } = props;
+    const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
     const resizingEnabled = !!onColumnSizingChange;
@@ -188,17 +183,6 @@ const TableProvider = (props)=>{
     const lastSelectedRowIndexRef = useRef(null);
     const theadRef = useRef(null);
     const containerRef = useRef(null);
-    const [previewRowId = null, setPreviewRowIdInternal] = useControlled({
-        controlled: previewRowIdProp,
-        default: null
-    });
-    const setPreviewRowId = useCallback((id)=>{
-        setPreviewRowIdInternal(id);
-        onPreviewRowChange?.(id);
-    }, [
-        setPreviewRowIdInternal,
-        onPreviewRowChange
-    ]);
     const contextValue = useMemo(()=>({
             table,
             isLoading,
@@ -226,14 +210,8 @@ const TableProvider = (props)=>{
             containerRef,
             onEndReached,
             onEndReachedThreshold,
-            preview: {
-                rowId: previewRowId,
-                setRowId: setPreviewRowId,
-                renderHeader: renderPreviewHeader,
-                renderContent: renderPreviewContent,
-                trigger: previewTrigger,
-                tooltipText: previewTooltipText
-            }
+            onMasterCellClick,
+            activeRowId: masterCellActiveRowId
         }), [
         table,
         isLoading,
@@ -258,12 +236,8 @@ const TableProvider = (props)=>{
         masterColumnId,
         onEndReached,
         onEndReachedThreshold,
-        previewRowId,
-        setPreviewRowId,
-        renderPreviewHeader,
-        renderPreviewContent,
-        previewTrigger,
-        previewTooltipText
+        masterCellActiveRowId,
+        onMasterCellClick
     ]);
     useEffect(()=>{
         if (!selectionEnabled) return;

package/dist/components/Table/TableContext/types.d.ts

@@ -28,14 +28,8 @@ export interface TableContextValue<T> {
     containerRef: RefObject<HTMLDivElement | null>;
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
-    preview: {
-        rowId: string | null;
-        setRowId: (id: string | null) => void;
-        renderHeader?: (row: Row<T>) => ReactNode;
-        renderContent?: (row: Row<T>) => ReactNode;
-        trigger: 'master' | 'button';
-        tooltipText: string;
-    };
+    onMasterCellClick?: (rowId: string) => void;
+    activeRowId: string | null;
 }
 export interface TableProviderProps<T> extends Omit<TableProps<T>, 'children' | 'aria-label'> {
     children: ReactNode;

package/dist/components/Table/TableRow.js

@@ -12,11 +12,11 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_SELECT_COLUMN_ID
 ]);
 const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
-    const { expandingEnabled, preview } = useTableContext();
+    const { expandingEnabled, activeRowId } = useTableContext();
     const testId = useTestId('row');
     const isGroupParent = row.subRows.length > 0;
     const isSelected = isGroupParent ? row.getIsAllSubRowsSelected() : row.getIsSelected();
-    const isPreviewActive = preview.rowId === row.id;
+    const isPreviewActive = activeRowId === row.id;
     if (isGroupParent) {
         const cells = row.getVisibleCells();
         const systemCells = cells.filter((c)=>SYSTEM_COLUMN_IDS.has(c.column.id));

package/dist/components/Table/hooks/index.d.ts

@@ -1,4 +1,4 @@
 export { useEndReached } from './useEndReached';
 export { useHorizontalScrollState } from './useHorizontalScrollState';
-export { usePreviewCell } from './usePreviewCell';
+export { useMasterCell } from './useMasterCell';
 export { useTableState } from './useTableState';

package/dist/components/Table/hooks/index.js

@@ -1,5 +1,5 @@
 import { useEndReached } from "./useEndReached.js";
 import { useHorizontalScrollState } from "./useHorizontalScrollState.js";
-import { usePreviewCell } from "./usePreviewCell.js";
+import { useMasterCell } from "./useMasterCell.js";
 import { useTableState } from "./useTableState.js";
-export { useEndReached, useHorizontalScrollState, usePreviewCell, useTableState };
+export { useEndReached, useHorizontalScrollState, useMasterCell, useTableState };

package/dist/components/Table/hooks/useMasterCell.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Encapsulates master cell click logic for a body cell.
+ * Returns flags and a click handler for the master column.
+ */
+export declare const useMasterCell: <T>(columnId: string, rowId: string) => {
+    /** Master cell click is enabled */
+    isMasterTrigger: boolean;
+    /** Fire master cell click for this row */
+    handleClick: () => void;
+    /** Tooltip text for master cell hover */
+    tooltipText: string | undefined;
+};

package/dist/components/Table/hooks/useMasterCell.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useTableContext } from "../TableContext/index.js";
+const useMasterCell = (columnId, rowId)=>{
+    const { masterColumnId, onMasterCellClick } = useTableContext();
+    const isMasterColumn = columnId === masterColumnId;
+    const hasMasterClick = isMasterColumn && !!onMasterCellClick;
+    const handleClick = useCallback(()=>{
+        onMasterCellClick?.(rowId);
+    }, [
+        onMasterCellClick,
+        rowId
+    ]);
+    return {
+        isMasterTrigger: hasMasterClick,
+        handleClick,
+        tooltipText: hasMasterClick ? 'Open details' : void 0
+    };
+};
+export { useMasterCell };

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

@@ -3,6 +3,5 @@ export type { TableColumnHelper } from './lib/createTableColumnHelper';
 export { Table } from './Table';
 export { TableActionBar } from './TableActionBar';
 export { TableEmptyState } from './TableEmptyState';
-export { TablePreviewToggle, type TablePreviewToggleProps } from './TablePreviewToggle';
 export { TableSettingsMenu } from './TableSettingsMenu';
-export type { TableAccessorColumnDef, TableCellContext, TableColumnBase, TableColumnDef, TableColumnMeta, TableColumnPinningState, TableColumnSizingState, TableDisplayColumnDef, TableExpandedState, TableGroupingState, TableOnChangeFn, TablePreview, TableProps, TableRow, TableRowSelectionState, TableSortingState, TableUpdater, TableVirtualized, TableVisibilityState, } from './types';
+export type { TableAccessorColumnDef, TableCellContext, TableColumnBase, TableColumnDef, TableColumnMeta, TableColumnPinningState, TableColumnSizingState, TableDisplayColumnDef, TableExpandedState, TableGroupingState, TableOnChangeFn, TableProps, TableRow, TableRowSelectionState, TableSortingState, TableUpdater, TableVirtualized, TableVisibilityState, } from './types';

package/dist/components/Table/index.js

@@ -2,6 +2,5 @@ import { createTableColumnHelper } from "./lib/index.js";
 import { Table } from "./Table.js";
 import { TableActionBar } from "./TableActionBar/index.js";
 import { TableEmptyState } from "./TableEmptyState.js";
-import { TablePreviewToggle } from "./TablePreviewToggle.js";
 import { TableSettingsMenu } from "./TableSettingsMenu/index.js";
-export { Table, TableActionBar, TableEmptyState, TablePreviewToggle, TableSettingsMenu, createTableColumnHelper };
+export { Table, TableActionBar, TableEmptyState, TableSettingsMenu, createTableColumnHelper };

package/dist/components/Table/mocks.d.ts

@@ -44,12 +44,8 @@ export declare const createLargeGroupedData: (groupCount?: number, childrenPerGr
 export declare const renderSecurityPreviewHeader: (row: {
     original: SecurityEvent;
 }) => import("react/jsx-runtime").JSX.Element;
-/** Preview content for use with header (objectName shown in header) */
-export declare const renderSecurityPreview: (row: {
-    original: SecurityEvent;
-}) => import("react/jsx-runtime").JSX.Element;
-/** Preview content for use without header (includes objectName) */
-export declare const renderSecurityPreviewWithTitle: (row: {
+/** Preview content (without title — title shown in DrawerHeader) */
+export declare const renderSecurityPreviewContent: (row: {
     original: SecurityEvent;
 }) => import("react/jsx-runtime").JSX.Element;
 /** Duplicate securityEvents N times with unique IDs */

package/dist/components/Table/mocks.js

@@ -638,14 +638,9 @@ const renderSecurityPreviewHeader = (row)=>/*#__PURE__*/ jsx(DrawerHeader, {
             children: row.original.objectName
         })
     });
-const SecurityPreviewContent = ({ row, showTitle })=>/*#__PURE__*/ jsxs(VStack, {
+const SecurityPreviewContent = ({ row })=>/*#__PURE__*/ jsxs(VStack, {
         gap: 16,
         children: [
-            showTitle && /*#__PURE__*/ jsx(Text, {
-                size: "lg",
-                weight: "medium",
-                children: row.original.objectName
-            }),
             /*#__PURE__*/ jsxs(HStack, {
                 gap: 8,
                 children: [
@@ -705,13 +700,9 @@ const SecurityPreviewContent = ({ row, showTitle })=>/*#__PURE__*/ jsxs(VStack,
         ]
     });
 SecurityPreviewContent.displayName = 'SecurityPreviewContent';
-const renderSecurityPreview = (row)=>/*#__PURE__*/ jsx(SecurityPreviewContent, {
+const renderSecurityPreviewContent = (row)=>/*#__PURE__*/ jsx(SecurityPreviewContent, {
         row: row
     });
-const renderSecurityPreviewWithTitle = (row)=>/*#__PURE__*/ jsx(SecurityPreviewContent, {
-        row: row,
-        showTitle: true
-    });
 const multiplySecurityEvents = (times = 4)=>Array.from({
         length: times
     }, (_, batch)=>securityEvents.map((row)=>({
@@ -967,4 +958,4 @@ const useInfiniteData = ()=>{
         fetchNextPage
     };
 };
-export { METHOD_COLORS, createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, multiplySecurityEvents, renderSecurityPreview, renderSecurityPreviewHeader, renderSecurityPreviewWithTitle, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useInfiniteData };
+export { METHOD_COLORS, createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, multiplySecurityEvents, renderSecurityPreviewContent, renderSecurityPreviewHeader, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useInfiniteData };

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

@@ -16,8 +16,6 @@ declare module '@tanstack/react-table' {
         };
         /** Resize behavior: 'resize' adapts content to fit (default), 'cut' truncates content */
         resizeType?: 'cut' | 'resize';
-        /** Render the preview toggle button shown on hover */
-        renderPreviewAction?: (row: Row<TData>) => ReactNode;
         /** Render the three-dots contextual menu shown on hover */
         renderMenuAction?: (row: Row<TData>) => ReactNode;
     }
@@ -78,8 +76,6 @@ export interface TableColumnMeta<T = unknown> {
     };
     /** Resize behavior: 'resize' adapts content to fit (default), 'cut' truncates content */
     resizeType?: 'cut' | 'resize';
-    /** Render the preview toggle button shown on hover */
-    renderPreviewAction?: (row: TableRow<T>) => ReactNode;
     /** Render the three-dots contextual menu shown on hover */
     renderMenuAction?: (row: TableRow<T>) => ReactNode;
 }
@@ -164,23 +160,8 @@ export interface TableProps<T> extends TestableProps {
     onEndReached?: () => void;
     /** Distance from the bottom (in px) to trigger onEndReached (default: 200) */
     onEndReachedThreshold?: number;
-    /** Preview drawer configuration */
-    preview?: TablePreview<T>;
-}
-/** Preview drawer configuration */
-export interface TablePreview<T> {
-    /** Render drawer header for a row */
-    renderHeader?: (row: TableRow<T>) => ReactNode;
-    /** Render drawer content for a row */
-    renderContent: (row: TableRow<T>) => ReactNode;
-    /** How the preview drawer is triggered:
-     *  - `'master'` — clicking the master cell toggles the drawer (default)
-     *  - `'button'` — a toggle button appears in master cell actions on hover */
-    trigger?: 'master' | 'button';
-    /** Tooltip text on master cell hover (default: 'Open preview') */
-    tooltipText?: string;
-    /** Controlled preview row ID. Pass `null` to close. */
-    rowId?: string | null;
-    /** Callback when preview row changes (open/close/swap). */
-    onRowChange?: (rowId: string | null) => void;
+    /** Callback fired when the master cell is clicked. Receives the row ID. */
+    onMasterCellClick?: (rowId: string) => void;
+    /** ID of the currently active (highlighted) row, or null. Controls row highlighting via data-preview-active attribute. */
+    activeRowId?: string | null;
 }

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.23.0",
-  "generatedAt": "2026-04-10T09:45:32.033Z",
+  "version": "0.23.1",
+  "generatedAt": "2026-04-13T08:49:49.893Z",
   "components": [
     {
       "name": "Alert",
@@ -3482,11 +3482,11 @@
         },
         {
           "name": "WithTags",
-          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>Tags</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4'>\n          <Badge color='slate'>production</Badge>\n          <Badge color='slate'>us-east-1</Badge>\n          <Badge color='slate'>critical</Badge>\n        </div>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
+          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>Tags</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4 flex-wrap'>\n          <Tag>production</Tag>\n          <Tag>us-east-1</Tag>\n          <Tag>critical</Tag>\n        </div>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
         },
         {
           "name": "WithCodeSnippet",
-          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>Payload</AttributeLabel>\n      <AttributeValue>\n        <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
+          "code": "() => (\n  <div className='w-[400px] flex flex-col gap-16'>\n    <Attribute>\n      <AttributeLabel>Payload (inline)</AttributeLabel>\n      <AttributeValue>\n        <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n      </AttributeValue>\n    </Attribute>\n    <Attribute>\n      <AttributeLabel>Payload (code)</AttributeLabel>\n      <AttributeValue>\n        <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
         },
         {
           "name": "WithLink_Value",
@@ -3494,15 +3494,15 @@
         },
         {
           "name": "WithDateTime",
-          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>Created at</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-02T14:03:00Z' />\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
+          "code": "() => (\n  <div className='w-[400px] flex flex-col gap-16'>\n    <Attribute>\n      <AttributeLabel>Created at (relative)</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-02T14:03:00Z' />\n      </AttributeValue>\n    </Attribute>\n    <Attribute>\n      <AttributeLabel>Created at (absolute)</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
         },
         {
           "name": "WithIP",
-          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <Ip>142.198.167.52</Ip>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
+          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <Ip>\n          <IpCountry code='US' />\n          <IpAddress>142.198.167.52</IpAddress>\n          <IpProvider>Azure</IpProvider>\n        </Ip>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
         },
         {
           "name": "Composition",
-          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n    <Attribute>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <Badge color='red' variant='dotted'>\n          Blocked\n        </Badge>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm' decoration='dashed'>\n          Week ago\n        </Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4 flex-wrap'>\n          <Badge color='slate'>XSS</Badge>\n          <Badge color='slate'>BOLA</Badge>\n          <Badge color='slate'>SQL Injection</Badge>\n          <Badge color='slate'>Scanner</Badge>\n          <Badge color='slate'>+5</Badge>\n        </div>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Last seen</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>2 Apr, 2026 14:03</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>3 sessions</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4'>\n          <Text size='sm'>artem@acme.com, uxd@acme.com</Text>\n          <Badge color='slate'>+3</Badge>\n        </div>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>IPs</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4 flex-wrap col-span-2'>\n          <Text size='sm'>142.198.167.52</Text>\n          <Badge color='sky'>Azure</Badge>\n          <Text size='sm'>34.74.73.20</Text>\n          <Badge color='amber'>AWS</Badge>\n          <Text size='sm'>34.74.73.20</Text>\n          <Badge color='teal'>GCP</Badge>\n          <Badge color='slate'>+5</Badge>\n        </div>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
+          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n    <Attribute>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <Badge color='red' variant='dotted'>\n          Blocked\n        </Badge>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-03T10:15:00Z' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4 flex-wrap'>\n          <Tag>XSS</Tag>\n          <Tag>BOLA</Tag>\n          <Tag>SQL Injection</Tag>\n          <Tag>Scanner</Tag>\n          <Tag>+5</Tag>\n        </div>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>3 sessions</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <div className='flex items-center gap-4'>\n          <Text size='sm'>artem@acme.com, uxd@acme.com</Text>\n          <Tag>+3</Tag>\n        </div>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>IPs</AttributeLabel>\n      <AttributeValue>\n        <IpList>\n          <Ip>\n            <IpCountry code='US' />\n            <IpAddress>142.198.167.52</IpAddress>\n            <IpProvider>Azure</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='US' />\n            <IpAddress>34.74.73.20</IpAddress>\n            <IpProvider>AWS</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='DE' />\n            <IpAddress>34.74.73.20</IpAddress>\n            <IpProvider>GCP</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='NL' />\n            <IpAddress>10.0.0.1</IpAddress>\n          </Ip>\n          <Ip>\n            <IpCountry code='JP' />\n            <IpAddress>192.168.1.1</IpAddress>\n          </Ip>\n        </IpList>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"
         }
       ]
     },
@@ -23635,7 +23635,7 @@
         },
         {
           "name": "Variants",
-          "code": "() => (\n  <VStack>\n    <Heading>Primary / Brand</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='primary' color='brand'>\n          Button\n        </Button>\n        <Button variant='primary' color='brand'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Outline / Neutral</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='outline' color='neutral'>\n          Button\n        </Button>\n        <Button variant='outline' color='neutral'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Secondary / Neutral</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='secondary' color='neutral'>\n          Button\n        </Button>\n        <Button variant='secondary' color='neutral'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Ghost / Neutral</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='ghost' color='neutral'>\n          Button\n        </Button>\n        <Button variant='ghost' color='neutral'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Secondary / Brand</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='secondary' color='brand'>\n          Button\n        </Button>\n        <Button variant='secondary' color='brand'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Ghost / Brand</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='ghost' color='brand'>\n          Button\n        </Button>\n        <Button variant='ghost' color='brand'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n  </VStack>\n)"
+          "code": "() => (\n  <VStack>\n    <Heading>Primary / Brand</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='primary' color='brand'>\n          Button\n        </Button>\n        <Button variant='primary' color='brand'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Outline / Neutral</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='outline' color='neutral'>\n          Button\n        </Button>\n        <Button variant='outline' color='neutral'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Secondary / Neutral</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='secondary' color='neutral'>\n          Button\n        </Button>\n        <Button variant='secondary' color='neutral'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Ghost / Neutral</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='ghost' color='neutral'>\n          Button\n        </Button>\n        <Button variant='ghost' color='neutral'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Secondary / Brand</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='secondary' color='brand'>\n          Button\n        </Button>\n        <Button variant='secondary' color='brand'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Ghost / Brand</Heading>\n    <HStack>\n      <SplitButton>\n        <Button variant='ghost' color='brand'>\n          Button\n        </Button>\n        <Button variant='ghost' color='brand'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading className='text-text-primary-alt'>Ghost / Neutral Alt</Heading>\n    <div className='flex flex-col gap-16 rounded-lg bg-component-tooltip-bg p-8'>\n      <HStack>\n        <SplitButton>\n          <Button variant='ghost' color='neutral-alt'>\n            Button\n          </Button>\n          <Button variant='ghost' color='neutral-alt'>\n            <ChevronDown />\n          </Button>\n        </SplitButton>\n      </HStack>\n    </div>\n\n    <Heading className='text-text-primary-alt'>Secondary / Neutral Alt</Heading>\n    <div className='flex flex-col gap-16 rounded-lg bg-component-tooltip-bg p-8'>\n      <HStack>\n        <SplitButton>\n          <Button variant='secondary' color='neutral-alt'>\n            Button\n          </Button>\n          <Button variant='secondary' color='neutral-alt'>\n            <ChevronDown />\n          </Button>\n        </SplitButton>\n      </HStack>\n    </div>\n  </VStack>\n)"
         },
         {
           "name": "Sizes",
@@ -23646,8 +23646,8 @@
           "code": "() => (\n  <VStack>\n    <Heading>Text only</Heading>\n    <HStack align='end'>\n      <SplitButton>\n        <Button variant='primary' color='brand' size='large'>\n          Large\n        </Button>\n        <Button variant='primary' color='brand' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='outline' color='neutral' size='large'>\n          Large\n        </Button>\n        <Button variant='outline' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='secondary' color='neutral' size='large'>\n          Large\n        </Button>\n        <Button variant='secondary' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Icon + Text</Heading>\n    <HStack align='end'>\n      <SplitButton>\n        <Button variant='primary' color='brand' size='large'>\n          <CircleDashed />\n          Large\n        </Button>\n        <Button variant='primary' color='brand' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='outline' color='neutral' size='large'>\n          <CircleDashed />\n          Large\n        </Button>\n        <Button variant='outline' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='secondary' color='neutral' size='large'>\n          <CircleDashed />\n          Large\n        </Button>\n        <Button variant='secondary' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Icon + Text + Badge</Heading>\n    <HStack align='end'>\n      <SplitButton>\n        <Button variant='primary' color='brand' size='large'>\n          <CircleDashed />\n          Large\n          <NumericBadge type='outline'>1</NumericBadge>\n        </Button>\n        <Button variant='primary' color='brand' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='outline' color='neutral' size='large'>\n          <CircleDashed />\n          Large\n          <NumericBadge type='outline'>1</NumericBadge>\n        </Button>\n        <Button variant='outline' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='secondary' color='neutral' size='large'>\n          <CircleDashed />\n          Large\n          <NumericBadge type='outline'>1</NumericBadge>\n        </Button>\n        <Button variant='secondary' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n\n    <Heading>Icon only</Heading>\n    <HStack align='end'>\n      <SplitButton>\n        <Button variant='primary' color='brand' size='large'>\n          <CircleDashed />\n        </Button>\n        <Button variant='primary' color='brand' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='outline' color='neutral' size='large'>\n          <CircleDashed />\n        </Button>\n        <Button variant='outline' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n      <SplitButton>\n        <Button variant='secondary' color='neutral' size='large'>\n          <CircleDashed />\n        </Button>\n        <Button variant='secondary' color='neutral' size='large'>\n          <ChevronDown />\n        </Button>\n      </SplitButton>\n    </HStack>\n  </VStack>\n)"
         },
         {
-          "name": "WithPopover",
-          "code": "() => (\n  <Popover>\n    <SplitButton data-testid='split-button-popover'>\n      <Button variant='primary' color='brand'>\n        Save\n      </Button>\n      <PopoverTrigger asChild>\n        <Button variant='primary' color='brand'>\n          <ChevronDown />\n        </Button>\n      </PopoverTrigger>\n    </SplitButton>\n    <PopoverContent>\n      <VStack>\n        <Text>Save as draft</Text>\n        <Text>Save and publish</Text>\n        <Text>Save as template</Text>\n      </VStack>\n    </PopoverContent>\n  </Popover>\n)"
+          "name": "WithDropdownMenu",
+          "code": "() => (\n  <DropdownMenu>\n    <SplitButton data-testid='split-button-dropdown'>\n      <Button variant='primary' color='brand'>\n        Save\n      </Button>\n      <DropdownMenuTrigger asChild>\n        <Button variant='primary' color='brand'>\n          <ChevronDown />\n        </Button>\n      </DropdownMenuTrigger>\n    </SplitButton>\n    <DropdownMenuContent>\n      <DropdownMenuItem value='draft'>Save as draft</DropdownMenuItem>\n      <DropdownMenuItem value='publish'>Save and publish</DropdownMenuItem>\n      <DropdownMenuItem value='template'>Save as template</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
         }
       ]
     },
@@ -25803,10 +25803,10 @@
           "required": false
         },
         {
-          "name": "preview",
-          "type": "TablePreview<T> | undefined",
+          "name": "activeRowId",
+          "type": "string | null | undefined",
           "required": false,
-          "description": "Preview drawer configuration"
+          "description": "ID of the currently active (highlighted) row, or null. Controls row highlighting via data-preview-active attribute."
         }
       ],
       "variants": [
@@ -25866,20 +25866,7 @@
           ]
         }
       ],
-      "subComponents": [
-        {
-          "name": "TablePreviewToggle",
-          "props": [
-            {
-              "name": "active",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Whether the preview drawer is open for this row",
-              "defaultValue": "false"
-            }
-          ]
-        }
-      ],
+      "subComponents": [],
       "examples": [
         {
           "name": "Basic",
@@ -25963,11 +25950,11 @@
         },
         {
           "name": "MasterCellWithActions",
-          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const data = useMemo(() => multiplySecurityEvents(), []);\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              meta: {\n                ...col.meta,\n                size: 400,\n                resizeType: 'resize',\n                renderMenuAction: (row: { original: SecurityEvent }) => (\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant='ghost' color='neutral' size='small' aria-label='More'>\n                        <Ellipsis />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent>\n                      <DropdownMenuItem\n                        onSelect={() => navigator.clipboard.writeText(row.original.objectName)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Copy />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Copy name</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Filter: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Filter />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Show only</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Exclude: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <FilterX />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Exclude</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                ),\n              },\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      preview={{\n        trigger: 'button',\n        renderHeader: renderSecurityPreviewHeader,\n        renderContent: renderSecurityPreview,\n      }}\n    />\n  );\n}"
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const data = useMemo(() => multiplySecurityEvents(), []);\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              meta: {\n                ...col.meta,\n                size: 400,\n                resizeType: 'resize',\n                renderMenuAction: (row: { original: SecurityEvent }) => (\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant='ghost' color='neutral' size='small' aria-label='More'>\n                        <Ellipsis />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent>\n                      <DropdownMenuItem\n                        onSelect={() => navigator.clipboard.writeText(row.original.objectName)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Copy />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Copy name</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Filter: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Filter />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Show only</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Exclude: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <FilterX />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Exclude</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                ),\n              },\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}"
         },
         {
-          "name": "MasterCellWithPreviewDrawer",
-          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  const data = useMemo(\n    () =>\n      Array.from({ length: 4 }, (_, batch) =>\n        securityEvents.map(row => ({\n          ...row,\n          id: `${row.id}-${batch}`,\n          objectName: batch === 0 ? row.objectName : `${row.objectName} (${batch + 1})`,\n        })),\n      ).flat(),\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              cell: ({ row }: { row: { original: SecurityEvent } }) => (\n                <Text size='xs'>{row.original.objectName}</Text>\n              ),\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      preview={{ renderContent: renderSecurityPreviewWithTitle }}\n    />\n  );\n}"
+          "name": "MasterCellWithDrawer",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [activeRowId, setActiveRowId] = useState<string | null>(null);\n\n  const data = useMemo(\n    () =>\n      Array.from({ length: 4 }, (_, batch) =>\n        securityEvents.map(row => ({\n          ...row,\n          id: `${row.id}-${batch}`,\n          objectName: batch === 0 ? row.objectName : `${row.objectName} (${batch + 1})`,\n        })),\n      ).flat(),\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              cell: ({ row }: { row: { original: SecurityEvent } }) => (\n                <Text size='xs'>{row.original.objectName}</Text>\n              ),\n            }\n          : col,\n      ),\n    [],\n  );\n\n  const handleMasterCellClick = useCallback((rowId: string) => {\n    setActiveRowId(prev => (prev === rowId ? null : rowId));\n  }, []);\n\n  const activeRow = useMemo(() => data.find(d => d.id === activeRowId), [data, activeRowId]);\n\n  return (\n    <>\n      <Table\n        className='max-w-920'\n        data={data}\n        columns={columns}\n        getRowId={row => row.id}\n        sorting={sorting}\n        onSortingChange={setSorting}\n        onMasterCellClick={handleMasterCellClick}\n        activeRowId={activeRowId}\n      />\n      <Drawer\n        open={!!activeRow}\n        onOpenChange={open => {\n          if (!open) setActiveRowId(null);\n        }}\n        modal={false}\n        overlay={false}\n        closeOnOutsideClick={false}\n        width={960}\n      >\n        <DrawerContent>\n          {activeRow ? (\n            renderSecurityPreviewHeader({ original: activeRow })\n          ) : (\n            <DrawerHeader>\n              <span />\n            </DrawerHeader>\n          )}\n          <DrawerBody>\n            {activeRow && renderSecurityPreviewContent({ original: activeRow })}\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </>\n  );\n}"
         },
         {
           "name": "FullFeatured",

package/dist/theme/icon.css

@@ -10,7 +10,7 @@
 @utility icon-* {
     width: --value(--icon-*);
     height: --value(--icon-*);
-    vertical-align: --value(--icon-valign, -0.125em);
+    vertical-align: -0.125em;
     display: inline-block;
     flex-shrink: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

package/dist/components/Table/TablePreviewDrawer.d.ts

@@ -1,2 +0,0 @@
-import type { FC } from 'react';
-export declare const TablePreviewDrawer: FC;

package/dist/components/Table/TablePreviewDrawer.js

@@ -1,39 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Drawer, DrawerBody, DrawerContent, DrawerHeader } from "../Drawer/index.js";
-import { useTableContext } from "./TableContext/index.js";
-const TablePreviewDrawer = ()=>{
-    const { table, preview: previewCtx } = useTableContext();
-    const row = previewCtx.rowId ? table.getRowModel().rowsById[previewCtx.rowId] : void 0;
-    const header = row && previewCtx.renderHeader ? previewCtx.renderHeader(row) : void 0;
-    const content = row && previewCtx.renderContent ? previewCtx.renderContent(row) : void 0;
-    const lastHeaderRef = useRef(null);
-    const lastContentRef = useRef(null);
-    if (header) lastHeaderRef.current = header;
-    if (content) lastContentRef.current = content;
-    const displayHeader = header ?? lastHeaderRef.current;
-    const displayContent = content ?? lastContentRef.current;
-    if (!previewCtx.renderContent) return null;
-    return /*#__PURE__*/ jsx(Drawer, {
-        open: !!row,
-        onOpenChange: (open)=>{
-            if (!open) previewCtx.setRowId(null);
-        },
-        modal: false,
-        overlay: false,
-        closeOnOutsideClick: false,
-        width: 960,
-        children: /*#__PURE__*/ jsxs(DrawerContent, {
-            children: [
-                displayHeader ?? /*#__PURE__*/ jsx(DrawerHeader, {
-                    children: /*#__PURE__*/ jsx("span", {})
-                }),
-                /*#__PURE__*/ jsx(DrawerBody, {
-                    children: displayContent
-                })
-            ]
-        })
-    });
-};
-TablePreviewDrawer.displayName = 'TablePreviewDrawer';
-export { TablePreviewDrawer };

package/dist/components/Table/TablePreviewToggle.d.ts

@@ -1,8 +0,0 @@
-import type { FC } from 'react';
-export interface TablePreviewToggleProps {
-    /** Whether the preview drawer is open for this row */
-    active?: boolean;
-    /** Toggle callback */
-    onClick?: () => void;
-}
-export declare const TablePreviewToggle: FC<TablePreviewToggleProps>;

package/dist/components/Table/TablePreviewToggle.js

@@ -1,32 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PanelRightAnimated } from "../../icons/index.js";
-import { Button } from "../Button/index.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
-const TablePreviewToggle = ({ active = false, onClick })=>{
-    const label = active ? 'Close preview' : 'Preview attack';
-    return /*#__PURE__*/ jsxs(Tooltip, {
-        children: [
-            /*#__PURE__*/ jsx(TooltipTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: active ? 'outline' : 'ghost',
-                    color: "neutral",
-                    size: "small",
-                    className: "p-2",
-                    "aria-pressed": active,
-                    "aria-label": label,
-                    onClick: onClick,
-                    children: /*#__PURE__*/ jsx(PanelRightAnimated, {
-                        active: active,
-                        size: "sm"
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(TooltipContent, {
-                children: label
-            })
-        ]
-    });
-};
-TablePreviewToggle.displayName = 'TablePreviewToggle';
-export { TablePreviewToggle };

package/dist/components/Table/hooks/usePreviewCell.d.ts

@@ -1,16 +0,0 @@
-/**
- * Encapsulates preview drawer logic for a body cell.
- * Returns flags and a click handler based on `preview.trigger` mode.
- */
-export declare const usePreviewCell: <T>(columnId: string, rowId: string) => {
-    /** Preview opens by clicking the master cell */
-    isMasterTrigger: boolean;
-    /** Preview opens via a toggle button in actions */
-    isButtonTrigger: boolean;
-    /** This row is currently shown in the preview drawer */
-    isActive: boolean;
-    /** Toggle preview for this row (open/close) */
-    togglePreview: () => void;
-    /** Tooltip text for master cell hover */
-    tooltipText: string | undefined;
-};

package/dist/components/Table/hooks/usePreviewCell.js

@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-import { useTableContext } from "../TableContext/index.js";
-const usePreviewCell = (columnId, rowId)=>{
-    const { masterColumnId, preview } = useTableContext();
-    const isMasterColumn = columnId === masterColumnId;
-    const hasPreview = isMasterColumn && !!preview.renderContent;
-    const isMasterTrigger = hasPreview && 'master' === preview.trigger;
-    const isButtonTrigger = hasPreview && 'button' === preview.trigger;
-    const isActive = preview.rowId === rowId;
-    const togglePreview = useCallback(()=>{
-        preview.setRowId(isActive ? null : rowId);
-    }, [
-        preview.setRowId,
-        isActive,
-        rowId
-    ]);
-    return {
-        isMasterTrigger,
-        isButtonTrigger,
-        isActive,
-        togglePreview,
-        tooltipText: hasPreview ? preview.tooltipText : void 0
-    };
-};
-export { usePreviewCell };