@moul-dev/ui 2026.8.22 → 2026.8.26

package/dist/src/components/Sidebar/Sidebar.d.ts

@@ -8,6 +8,7 @@ interface SidebarContextValue {
     variant: 'solid' | 'glass';
     onCollapseToggle: () => void;
     showCollapseToggle?: boolean;
+    dense?: boolean;
 }
 export declare function useSidebar(): SidebarContextValue;
 export interface SidebarProps {
@@ -19,12 +20,14 @@ export interface SidebarProps {
     onSelectionChange?: (key: string) => void;
     variant?: 'solid' | 'glass';
     showCollapseToggle?: boolean;
+    dense?: boolean;
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export interface SidebarHeaderProps {
+    dense?: boolean;
     style?: StyleXStyles;
     className?: string;
     children?: React.ReactNode;
@@ -36,6 +39,7 @@ export interface SidebarGroupProps {
     defaultExpanded?: boolean;
     isExpanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
+    dense?: boolean;
     style?: StyleXStyles;
     className?: string;
     children?: React.ReactNode;
@@ -45,6 +49,7 @@ export interface SidebarItemProps extends Omit<AriaLinkProps, 'style' | 'classNa
     id?: string;
     icon?: React.ReactNode;
     isSelected?: boolean;
+    dense?: boolean;
     style?: StyleXStyles;
     className?: string;
     children?: React.ReactNode;
@@ -52,12 +57,14 @@ export interface SidebarItemProps extends Omit<AriaLinkProps, 'style' | 'classNa
 export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
 export interface SidebarFooterProps {
     showBorder?: boolean;
+    dense?: boolean;
     style?: StyleXStyles;
     className?: string;
     children?: React.ReactNode;
 }
 export declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
 export interface SidebarDividerProps {
+    dense?: boolean;
     style?: StyleXStyles;
     className?: string;
 }

package/dist/src/components/Sidebar/Sidebar.styles.d.ts

@@ -49,6 +49,12 @@ export declare const styles: Readonly<{
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
     }>;
+    readonly headerDense: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "48px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
     readonly headerCollapsed: Readonly<{
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
@@ -63,6 +69,9 @@ export declare const styles: Readonly<{
         readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, transform">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.2s">;
     }>;
+    readonly headerContentDense: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
     readonly headerContentCollapsed: Readonly<{
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
     }>;
@@ -79,6 +88,12 @@ export declare const styles: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "64px">;
     }>;
+    readonly footerDense: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "48px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
     readonly footerBorder: Readonly<{
         readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
     }>;
@@ -96,6 +111,9 @@ export declare const styles: Readonly<{
         readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, transform">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.2s">;
     }>;
+    readonly footerContentDense: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
     readonly footerContentCollapsed: Readonly<{
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
     }>;
@@ -106,6 +124,10 @@ export declare const styles: Readonly<{
         readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", string>;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
     }>;
+    readonly groupDense: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", string>;
+    }>;
     readonly groupCollapsed: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -125,6 +147,11 @@ export declare const styles: Readonly<{
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly height: stylex.StyleXClassNameFor<"height", string>;
     }>;
+    readonly groupHeaderDense: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
     readonly groupHeaderCollapsible: Readonly<{
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
@@ -178,6 +205,9 @@ export declare const styles: Readonly<{
         readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
     }>;
+    readonly groupItemsInnerDense: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
+    }>;
     readonly item: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -208,6 +238,12 @@ export declare const styles: Readonly<{
             readonly outlineOffset: "2px";
         }>;
     }>;
+    readonly itemDense: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "30px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
     readonly itemHover: Readonly<{
         readonly ':hover': stylex.StyleXClassNameFor<":hover", {
             readonly backgroundColor: stylex.StyleXVar<string>;
@@ -228,6 +264,10 @@ export declare const styles: Readonly<{
         readonly height: stylex.StyleXClassNameFor<"height", "36px">;
         readonly alignSelf: stylex.StyleXClassNameFor<"alignSelf", "center">;
     }>;
+    readonly itemCollapsedDense: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "30px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "30px">;
+    }>;
     readonly itemIcon: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -261,6 +301,9 @@ export declare const styles: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
     }>;
+    readonly dividerDense: Readonly<{
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
+    }>;
     readonly dividerCollapsed: Readonly<{
         readonly marginInline: stylex.StyleXClassNameFor<"marginInline", string>;
     }>;

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

@@ -1,42 +1,128 @@
 import { StyleXStyles } from '@stylexjs/stylex';
-import { CellProps as AriaCellProps, ColumnProps as AriaColumnProps, RowProps as AriaRowProps, TableBodyProps as AriaTableBodyProps, TableHeaderProps as AriaTableHeaderProps, TableProps as AriaTableProps } from 'react-aria-components';
 import * as React from 'react';
-export interface TableProps extends Omit<AriaTableProps, 'style'> {
+export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    /** Style for the inner table element when wrapInContainer is true */
+    tableStyle?: StyleXStyles;
+    /** Class name for the inner table element when wrapInContainer is true */
+    tableClassName?: string;
+    /** Compact padding for high-density data */
+    dense?: boolean;
+    /** Alternating row background colors */
+    striped?: boolean;
+    /** Highlight rows on hover */
+    hoverable?: boolean;
+    /** Keep table header pinned to top on scroll */
     stickyHeader?: boolean;
-    isLoading?: boolean;
-    loadingState?: React.ReactNode;
-    emptyState?: React.ReactNode;
+    /** Draw vertical column borders between cells */
+    bordered?: boolean;
+    /** Table layout algorithm */
+    layout?: 'auto' | 'fixed';
+    /** Wrap table in a responsive horizontal scroll container (default: true) */
+    wrapInContainer?: boolean;
+    /** Style for the responsive container wrapper */
+    containerStyle?: StyleXStyles;
+    /** Class name for the responsive container wrapper */
+    containerClassName?: string;
 }
 export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
-export interface TableHeaderProps<T> extends Omit<AriaTableHeaderProps<T>, 'style'> {
+export interface TableHeaderProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    /** Pinned sticky header state */
     sticky?: boolean;
 }
-export declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps<any> & React.RefAttributes<HTMLTableSectionElement>>;
-export interface ColumnProps extends Omit<AriaColumnProps, 'style' | 'className'> {
+export declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableBodyProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'style'> {
     style?: StyleXStyles;
-    className?: AriaColumnProps['className'];
+    className?: string;
+}
+export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableFooterProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+    /** Pinned sticky footer state */
+    sticky?: boolean;
+}
+export declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableRowProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+    /** Selected row state */
+    selected?: boolean;
+    /** Enable hover highlight for this row */
+    hoverable?: boolean;
+    /** Indicates the row is clickable */
+    interactive?: boolean;
+}
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'style' | 'align' | 'width'> {
+    style?: StyleXStyles;
+    className?: string;
+    /** Text & content alignment */
+    align?: 'left' | 'center' | 'right' | 'numeric';
+    /** Draw vertical column border */
+    bordered?: boolean;
+    /** Column pinning support */
+    pinned?: 'left' | 'right' | 'start' | 'end';
+    /** Pinning offset (e.g., 0, '120px') */
+    pinOffset?: number | string;
+    /** Explicit column width */
+    width?: number | string;
+    /** Minimum column width */
+    minWidth?: number | string;
+    /** Maximum column width */
+    maxWidth?: number | string;
+    /** Current column sort direction */
+    sortDirection?: 'asc' | 'desc' | 'ascending' | 'descending' | false | null;
+    /** Callback fired when sortable column header is clicked or activated */
+    onSort?: () => void;
+    /** Show sorting chevron indicator */
     showSortIndicator?: boolean;
+    /** Custom sort indicator component slot */
+    sortIndicator?: React.ReactNode;
 }
-export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
-export interface TableBodyProps<T> extends Omit<AriaTableBodyProps<T>, 'style'> {
+export declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'style' | 'align' | 'width'> {
     style?: StyleXStyles;
     className?: string;
-    isLoading?: boolean;
-    loadingState?: React.ReactNode;
-    emptyState?: React.ReactNode;
+    /** Text & numeric alignment */
+    align?: 'left' | 'center' | 'right' | 'numeric';
+    /** Draw vertical column border */
+    bordered?: boolean;
+    /** Column pinning support */
+    pinned?: 'left' | 'right' | 'start' | 'end';
+    /** Pinning offset (e.g., 0, '120px') */
+    pinOffset?: number | string;
+    /** Explicit cell/column width */
+    width?: number | string;
+    /** Minimum cell/column width */
+    minWidth?: number | string;
+    /** Maximum cell/column width */
+    maxWidth?: number | string;
+    /** Enable tabular figures for consistent numeric layout */
+    tabular?: boolean;
 }
-export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps<any> & React.RefAttributes<HTMLTableSectionElement>>;
-export interface RowProps<T> extends Omit<AriaRowProps<T>, 'style'> {
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableCaptionProps extends Omit<React.HTMLAttributes<HTMLTableCaptionElement>, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    /** Placement side of the caption */
+    side?: 'top' | 'bottom';
 }
-export declare const Row: React.ForwardRefExoticComponent<RowProps<any> & React.RefAttributes<HTMLTableRowElement>>;
-export interface CellProps extends Omit<AriaCellProps, 'style'> {
+export declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+export interface TableEmptyProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'style'> {
+    colSpan?: number;
     style?: StyleXStyles;
+    cellStyle?: StyleXStyles;
     className?: string;
+    cellClassName?: string;
+}
+export declare const TableEmpty: React.ForwardRefExoticComponent<TableEmptyProps & React.RefAttributes<HTMLTableRowElement>>;
+export interface TableSkeletonProps {
+    rows?: number;
+    columns?: number;
+    style?: StyleXStyles;
 }
-export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<HTMLTableCellElement>>;
+export declare function TableSkeleton({ rows, columns, style, }: TableSkeletonProps): React.JSX.Element;

package/dist/src/components/Table/Table.styles.d.ts

@@ -1,5 +1,15 @@
 import * as stylex from '@stylexjs/stylex';
 export declare const styles: Readonly<{
+    readonly wrapper: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "auto">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
     readonly table: Readonly<{
         readonly borderCollapse: stylex.StyleXClassNameFor<"borderCollapse", "collapse">;
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
@@ -9,19 +19,75 @@ export declare const styles: Readonly<{
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
     }>;
+    readonly tableFixed: Readonly<{
+        readonly tableLayout: stylex.StyleXClassNameFor<"tableLayout", "fixed">;
+    }>;
+    readonly tableAuto: Readonly<{
+        readonly tableLayout: stylex.StyleXClassNameFor<"tableLayout", "auto">;
+    }>;
     readonly header: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-        readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "2px">;
+        readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
         readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
         readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
     }>;
     readonly headerSticky: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
-        readonly top: stylex.StyleXClassNameFor<"top", 0>;
-        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly insetBlockStart: stylex.StyleXClassNameFor<"insetBlockStart", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 10>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly footer: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "1px">;
+        readonly borderTopStyle: stylex.StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderTopColor: stylex.StyleXClassNameFor<"borderTopColor", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly footerSticky: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly insetBlockEnd: stylex.StyleXClassNameFor<"insetBlockEnd", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 10>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly body: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    }>;
+    readonly row: Readonly<{
+        readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
+        readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
+        readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, color">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
+        readonly ':last-child': stylex.StyleXClassNameFor<":last-child", {
+            readonly borderBottomWidth: 0;
+        }>;
+        readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
+            readonly transitionProperty: "none";
+        }>;
+    }>;
+    readonly rowHoverable: Readonly<{
+        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
+    }>;
+    readonly rowStriped: Readonly<{
+        readonly ':nth-child(even)': stylex.StyleXClassNameFor<":nth-child(even)", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
+    }>;
+    readonly rowSelected: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
     }>;
-    readonly column: Readonly<{
+    readonly rowInteractive: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    }>;
+    readonly head: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
@@ -29,29 +95,45 @@ export declare const styles: Readonly<{
         readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
         readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
         readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
-        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
+        readonly verticalAlign: stylex.StyleXClassNameFor<"verticalAlign", "middle">;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
-        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
-            readonly outlineStyle: "solid";
-            readonly outlineWidth: "2px";
-            readonly outlineOffset: "-2px";
-            readonly outlineColor: stylex.StyleXVar<string>;
+    }>;
+    readonly headBordered: Readonly<{
+        readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
+        readonly borderInlineEndStyle: stylex.StyleXClassNameFor<"borderInlineEndStyle", "solid">;
+        readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
+        readonly ':last-child': stylex.StyleXClassNameFor<":last-child", {
+            readonly borderInlineEndWidth: 0;
         }>;
     }>;
-    readonly columnSortable: Readonly<{
+    readonly headDense: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly headSortable: Readonly<{
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
         readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
+            readonly color: stylex.StyleXVar<string>;
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
     }>;
-    readonly columnHovered: Readonly<{
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-    }>;
-    readonly columnContent: Readonly<{
+    readonly headContent: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
-        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
     }>;
+    readonly headContentAlignLeft: Readonly<{
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-start">;
+    }>;
+    readonly headContentAlignCenter: Readonly<{
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    }>;
+    readonly headContentAlignRight: Readonly<{
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-end">;
+    }>;
     readonly sortIndicator: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -64,68 +146,104 @@ export declare const styles: Readonly<{
     readonly sortIndicatorActive: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
     }>;
-    readonly body: Readonly<{
+    readonly cell: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
+        readonly verticalAlign: stylex.StyleXClassNameFor<"verticalAlign", "middle">;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
     }>;
-    readonly row: Readonly<{
-        readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
-        readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
-        readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
-        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
-        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, color">;
-        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
-        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
-        readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
-            readonly transitionProperty: "none";
+    readonly cellBordered: Readonly<{
+        readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
+        readonly borderInlineEndStyle: stylex.StyleXClassNameFor<"borderInlineEndStyle", "solid">;
+        readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
+        readonly ':last-child': stylex.StyleXClassNameFor<":last-child", {
+            readonly borderInlineEndWidth: 0;
         }>;
     }>;
-    readonly rowHovered: Readonly<{
+    readonly cellDense: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly cellTabular: Readonly<{
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly alignLeft: Readonly<{
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
+    }>;
+    readonly alignCenter: Readonly<{
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly alignRight: Readonly<{
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+    }>;
+    readonly alignNumeric: Readonly<{
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly pinnedLeft: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 2>;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
-    readonly rowSelected: Readonly<{
+    readonly pinnedRight: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 2>;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
-        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 1px 0 0 ${stylex.StyleXVar<string>}`>;
     }>;
-    readonly rowFocused: Readonly<{
-        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
-        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "2px">;
-        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-2px">;
-        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+    readonly pinnedLeftHead: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 12>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
-    readonly cell: Readonly<{
+    readonly pinnedRightHead: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 12>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 1px 0 0 ${stylex.StyleXVar<string>}`>;
+    }>;
+    readonly caption: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
-        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
-        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
-            readonly outlineStyle: "solid";
-            readonly outlineWidth: "2px";
-            readonly outlineOffset: "-2px";
-            readonly outlineColor: stylex.StyleXVar<string>;
-        }>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
+        readonly captionSide: stylex.StyleXClassNameFor<"captionSide", "bottom">;
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "1px">;
+        readonly borderTopStyle: stylex.StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderTopColor: stylex.StyleXClassNameFor<"borderTopColor", string>;
+    }>;
+    readonly captionTop: Readonly<{
+        readonly captionSide: stylex.StyleXClassNameFor<"captionSide", "top">;
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", 0>;
+        readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
+        readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
+        readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
     }>;
-    readonly emptyState: Readonly<{
-        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
-        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
-        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
-        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly emptyCell: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
-        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
     }>;
-    readonly loadingState: Readonly<{
-        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
-        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
-        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
-        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    readonly skeletonCell: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
-        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly skeletonBar: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "14px">;
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "1.6s">;
+        readonly animationIterationCount: stylex.StyleXClassNameFor<"animationIterationCount", "infinite">;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "ease-in-out">;
     }>;
 }>;

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

@@ -1,2 +1,2 @@
-export type { CellProps, ColumnProps, RowProps, TableBodyProps, TableHeaderProps, TableProps, } from './Table';
-export { Cell, Column, Row, Table, TableBody, TableHeader } from './Table';
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableEmptyProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSkeletonProps, } from './Table';
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, } from './Table';

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "2026.08.22";
+export declare const version = "2026.08.26";
 export { Alert } from './components/Alert';
 export type { AlertProps, AlertVariant } from './components/Alert/Alert';
 export { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, } from './components/AlertDialog';
@@ -93,8 +93,8 @@ export type { StatProps } from './components/Stat';
 export { Stat } from './components/Stat';
 export { Switch } from './components/Switch';
 export type { SwitchProps } from './components/Switch/Switch';
-export type { CellProps, ColumnProps, RowProps, TableBodyProps, TableHeaderProps, TableProps, } from './components/Table';
-export { Cell, Column, Row, Table, TableBody, TableHeader, } from './components/Table';
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableEmptyProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSkeletonProps, } from './components/Table';
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, } from './components/Table';
 export type { TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps, } from './components/Tabs';
 export { Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs';
 export { Tag, TagGroup } from './components/TagGroup';