@wallarm-org/design-system 0.4.1-rc-fix-table-width.1 → 0.4.1-rc-fix-table-width.2

package/dist/components/Stack/Stack.d.ts

@@ -5,6 +5,7 @@ declare const stackVariants: (props?: ({
     align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
     justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "reverse" | "wrap" | "nowrap" | null | undefined;
+    flexGrow?: boolean | null | undefined;
     spacing?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 32 | 24 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;

package/dist/components/Stack/Stack.js

@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { getValidChildren } from "./utils.js";
-const stackVariants = cva('flex flex-1 w-full', {
+const stackVariants = cva('flex w-full', {
     variants: {
         direction: {
             row: 'flex-row',
@@ -32,6 +32,9 @@ const stackVariants = cva('flex flex-1 w-full', {
             nowrap: 'flex-nowrap',
             reverse: 'flex-wrap-reverse'
         },
+        flexGrow: {
+            true: 'flex-1'
+        },
         spacing: {
             0: '',
             1: 'gap-1',
@@ -59,7 +62,7 @@ const stackVariants = cva('flex flex-1 w-full', {
         }
     }
 });
-const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', spacing = 4, asChild = false, children, ...props })=>{
+const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', spacing = 4, flexGrow = true, asChild = false, children, ...props })=>{
     const clones = useMemo(()=>getValidChildren(children).map((child, index)=>{
             const key = void 0 !== child.key ? child.key : index;
             return /*#__PURE__*/ jsx(Fragment, {
@@ -76,7 +79,8 @@ const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wra
             align,
             justify,
             wrap,
-            spacing
+            spacing,
+            flexGrow
         })),
         children: clones
     });

package/dist/components/Table/Table.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { TableProvider } from "./TableContext/index.js";
 import { TableInner } from "./TableInner.js";
 const Table = (props)=>{
-    const { data, isLoading = false, children, 'aria-label': ariaLabel, ...providerProps } = props;
+    const { data, isLoading = false, children, className, 'aria-label': ariaLabel, ...providerProps } = props;
     const isEmpty = 0 === data.length && !isLoading;
     const showSettings = !!props.onColumnVisibilityChange || !!props.onColumnOrderChange;
     return /*#__PURE__*/ jsx(TableProvider, {
@@ -14,6 +14,7 @@ const Table = (props)=>{
             virtualized: !!props.virtualized,
             showSettings: showSettings,
             ariaLabel: ariaLabel,
+            className: className,
             children: children
         })
     });

package/dist/components/Table/TableActionBar/TableActionBarAnchor.d.ts

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from 'react';
 interface TableActionBarAnchorProps {
+    className?: string;
     children: ReactNode;
 }
 export declare const TableActionBarAnchor: FC<TableActionBarAnchorProps>;

package/dist/components/Table/TableActionBar/TableActionBarAnchor.js

@@ -10,12 +10,12 @@ const tableActionBarAnchorVariants = cva(cn('w-full relative outline-none'), {
         }
     }
 });
-const TableActionBarAnchor = ({ children })=>{
+const TableActionBarAnchor = ({ className, children })=>{
     const { virtualized } = useTableContext();
     return /*#__PURE__*/ jsx(Popover.Anchor, {
         className: cn(tableActionBarAnchorVariants({
             virtualized
-        })),
+        }), className),
         children: children
     });
 };

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

@@ -4,6 +4,7 @@ interface TableInnerProps {
     virtualized: boolean;
     showSettings: boolean;
     ariaLabel?: string;
+    className?: string;
     children?: ReactNode;
 }
 export declare const TableInner: FC<TableInnerProps>;

package/dist/components/Table/TableInner.js

@@ -9,7 +9,7 @@ import { TableColGroup } from "./TableColGroup.js";
 import { useTableContext } from "./TableContext/index.js";
 import { TableHead } from "./TableHead.js";
 import { TableSettingsMenu } from "./TableSettingsMenu/index.js";
-const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, children })=>{
+const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, className, children })=>{
     const { containerRef, table } = useTableContext();
     const scrollRootRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
@@ -44,6 +44,7 @@ const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, children })
     const tableWidth = Math.max(containerWidth, totalSize);
     return /*#__PURE__*/ jsx(TableActionBarProvider, {
         children: /*#__PURE__*/ jsxs(TableActionBarAnchor, {
+            className: className,
             children: [
                 /*#__PURE__*/ jsxs(ScrollArea, {
                     ref: scrollRootRef,

package/dist/components/Table/classes.js

@@ -33,7 +33,7 @@ const tableHeadCellVariants = cva(cn(tableCellBase, 'pl-16 pr-4 py-8 text-left t
         draggable: false
     }
 });
-const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'has-[>_[data-state=open]]:ring-2 has-[>_[data-state=open]]:ring-inset has-[>_[data-state=open]]:ring-border-strong-brand', 'has-[>_[data-part=context-trigger]]:p-0', '[&>[data-part=context-trigger]]:px-16 [&>[data-part=context-trigger]]:py-8 [&>[data-part=context-trigger]]:text-left', '[&>[data-part=context-trigger]]:w-full [&>[data-part=context-trigger]]:outline-none'), {
+const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'has-[>_[data-state=open][data-part=context-trigger]]:ring-2', 'has-[>_[data-state=open][data-part=context-trigger]]:ring-inset', 'has-[>_[data-state=open][data-part=context-trigger]]:ring-border-strong-brand', 'has-[>_[data-part=context-trigger]]:p-0', '[&>[data-part=context-trigger]]:w-full', '[&>[data-part=context-trigger]]:px-16 [&>[data-part=context-trigger]]:py-8', '[&>[data-part=context-trigger]]:text-left [&>[data-part=context-trigger]]:outline-none'), {
     variants: {
         pinned: {
             true: 'sticky z-10',

package/dist/components/Table/lib/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const TABLE_SKELETON_ROWS = 6;
-export declare const TABLE_SKELETON_ROWS_APPEND = 3;
+export declare const TABLE_SKELETON_ROWS_APPEND = 6;
 export declare const TABLE_VIRTUALIZATION_OVERSCAN = 5;
 export declare const TABLE_MIN_COLUMN_WIDTH = 96;
 export declare const TABLE_SELECT_COLUMN_ID = "_selection";

package/dist/components/Table/lib/constants.js

@@ -1,5 +1,5 @@
 const TABLE_SKELETON_ROWS = 6;
-const TABLE_SKELETON_ROWS_APPEND = 3;
+const TABLE_SKELETON_ROWS_APPEND = 6;
 const TABLE_VIRTUALIZATION_OVERSCAN = 5;
 const TABLE_MIN_COLUMN_WIDTH = 96;
 const TABLE_SELECT_COLUMN_ID = '_selection';

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

@@ -101,6 +101,8 @@ export interface TableProps<T> {
     getRowId?: (row: T, index: number) => string;
     /** Accessible label for the table */
     'aria-label'?: string;
+    /** Additional CSS class for the root container */
+    className?: string;
     sorting?: TableSortingState;
     onSortingChange?: TableOnChangeFn<TableSortingState>;
     rowSelection?: TableRowSelectionState;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generatedAt": "2026-02-24T13:58:40.318Z",
+  "generatedAt": "2026-02-24T14:22:47.865Z",
   "components": [
     {
       "name": "Alert",
@@ -16341,6 +16341,12 @@
           "required": false,
           "defaultValue": "nowrap"
         },
+        {
+          "name": "flexGrow",
+          "type": "{ true: string; }",
+          "required": false,
+          "defaultValue": "true"
+        },
         {
           "name": "spacing",
           "type": "complex",
@@ -16393,6 +16399,12 @@
             "reverse"
           ]
         },
+        {
+          "name": "flexGrow",
+          "options": [
+            "true"
+          ]
+        },
         {
           "name": "spacing",
           "options": [
@@ -16713,6 +16725,11 @@
               "type": "{ wrap: string; nowrap: string; reverse: string; }",
               "required": false
             },
+            {
+              "name": "flexGrow",
+              "type": "{ true: string; }",
+              "required": false
+            },
             {
               "name": "spacing",
               "type": "complex",
@@ -17014,6 +17031,11 @@
               "type": "{ wrap: string; nowrap: string; reverse: string; }",
               "required": false
             },
+            {
+              "name": "flexGrow",
+              "type": "{ true: string; }",
+              "required": false
+            },
             {
               "name": "spacing",
               "type": "complex",
@@ -18170,6 +18192,10 @@
           "name": "LoadingState",
           "code": "() => (\n  <Table data={[]} columns={securityColumns} isLoading />\n)"
         },
+        {
+          "name": "LoadingWithData",
+          "code": "() => (\n  <Table\n    className='h-500'\n    data={securityEvents}\n    columns={securityColumns}\n    getRowId={row => row.id}\n    isLoading\n  />\n)"
+        },
         {
           "name": "EmptyState",
           "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <VStack align='center' justify='center' spacing={8}>\n        <Text size='sm' weight='medium' color='primary'>\n          No results found\n        </Text>\n        <Text size='sm' color='secondary'>\n          Try to apply different filter or reset it.\n        </Text>\n      </VStack>\n    </TableEmptyState>\n  </Table>\n)"
@@ -18180,7 +18206,7 @@
         },
         {
           "name": "ColumnPinning",
-          "code": "() => {\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <div className='max-w-800'>\n      <Table\n        data={securityEvents}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        columnPinning={columnPinning}\n        onColumnPinningChange={setColumnPinning}\n      />\n    </div>\n  );\n}"
+          "code": "() => {\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-800'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
         },
         {
           "name": "ColumnDragAndDrop",
@@ -18212,11 +18238,11 @@
         },
         {
           "name": "Virtualization",
-          "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n\n  return (\n    <div className='h-500'>\n      <Table data={largeData} columns={securityColumns} getRowId={row => row.id} virtualized />\n    </div>\n  );\n}"
+          "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n\n  return (\n    <Table\n      className='h-500'\n      data={largeData}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      virtualized\n    />\n  );\n}"
         },
         {
           "name": "FullFeatured",
-          "code": "() => {\n  const data = useMemo(() => createLargeGroupedData(12, 50), []);\n\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [expanded, setExpanded] = useState<TableExpandedState>({\n    'group-0': true,\n    'group-1': true,\n  });\n\n  return (\n    <div className='h-500'>\n      <Table<SecurityHeaderEntry>\n        data={data}\n        columns={fullFeaturedColumns}\n        getRowId={row => row.id}\n        getSubRows={row => row.children}\n        // Grouping\n        expanded={expanded}\n        onExpandedChange={setExpanded}\n        // Sorting\n        sorting={sorting}\n        onSortingChange={setSorting}\n        // Row selection\n        rowSelection={rowSelection}\n        onRowSelectionChange={setRowSelection}\n        // Column resizing\n        columnSizing={columnSizing}\n        onColumnSizingChange={setColumnSizing}\n        // Column pinning\n        columnPinning={columnPinning}\n        onColumnPinningChange={setColumnPinning}\n        // Column DnD ordering\n        columnOrder={columnOrder}\n        onColumnOrderChange={setColumnOrder}\n        // Column visibility + settings\n        columnVisibility={columnVisibility}\n        onColumnVisibilityChange={setColumnVisibility}\n        defaultColumnVisibility={{}}\n        defaultColumnOrder={headerColumnIds}\n        // Virtual scrolling\n        virtualized\n      >\n        <TableActionBar>\n          <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n            <Copy /> Duplicate\n          </Button>\n          <Button color='brand' onClick={() => alert('Delete clicked')}>\n            <Trash2 /> Delete\n          </Button>\n        </TableActionBar>\n      </Table>\n    </div>\n  );\n}"
+          "code": "() => {\n  const data = useMemo(() => createLargeGroupedData(12, 50), []);\n\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [expanded, setExpanded] = useState<TableExpandedState>({\n    'group-0': true,\n    'group-1': true,\n  });\n\n  return (\n    <Table<SecurityHeaderEntry>\n      className='h-500'\n      data={data}\n      columns={fullFeaturedColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      // Grouping\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      // Sorting\n      sorting={sorting}\n      onSortingChange={setSorting}\n      // Row selection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      // Column resizing\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      // Column pinning\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n      // Column DnD ordering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n      // Column visibility + settings\n      columnVisibility={columnVisibility}\n      onColumnVisibilityChange={setColumnVisibility}\n      defaultColumnVisibility={{}}\n      defaultColumnOrder={headerColumnIds}\n      // Virtual scrolling\n      virtualized\n    >\n      <TableActionBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => alert('Delete clicked')}>\n          <Trash2 /> Delete\n        </Button>\n      </TableActionBar>\n    </Table>\n  );\n}"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.4.1-rc-fix-table-width.1",
+  "version": "0.4.1-rc-fix-table-width.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",