@particle-network/ui-react 0.7.0-beta.6 → 0.7.0-beta.8

package/dist/components/ProgressWrapper/index.js

@@ -82,7 +82,7 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
         ...restProps,
         children: [
             /*#__PURE__*/ jsxs("svg", {
-                className: cn('absolute left-0 top-0', svgClassName),
+                className: cn('absolute top-0 left-0', svgClassName),
                 width: widthValue,
                 height: heightValue,
                 children: [

package/dist/components/UXColorPicker/color-fields.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { Switch3Icon } from "@particle-network/icons/web";
+import Switch3Icon from "@particle-network/icons/web/Switch3Icon";
 import { Flex, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";

package/dist/components/UXSimplePopover/simple-popover.js

@@ -105,7 +105,7 @@ const UXSimplePopover = (props)=>{
                 ref: popoverRef,
                 id: popoverId,
                 popover: isClick ? 'auto' : 'manual',
-                className: cn('bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 wrap-break-word rounded-medium max-w-[300px] break-words p-2.5 antialiased', classNames.content),
+                className: cn('bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 rounded-medium max-w-[300px] p-2.5 break-words wrap-break-word antialiased', classNames.content),
                 style: popoverAnchorStyle,
                 children: content
             })

package/dist/components/UXTable/base/index.d.ts

@@ -0,0 +1,10 @@
+export { default as TableBody } from './table-body';
+export { default as TableCell } from './table-cell';
+export { default as TableColumn } from './table-column';
+export { default as TableHeader } from './table-header';
+export { default as TableRow } from './table-row';
+export type { TableBodyProps } from './table-body';
+export type { TableCellProps } from './table-cell';
+export type { TableColumnProps } from './table-column';
+export type { TableHeaderProps } from './table-header';
+export type { TableRowProps } from './table-row';

package/dist/components/UXTable/base/index.js

@@ -0,0 +1,6 @@
+import table_body from "./table-body.js";
+import table_cell from "./table-cell.js";
+import table_column from "./table-column.js";
+import table_header from "./table-header.js";
+import table_row from "./table-row.js";
+export { table_body as TableBody, table_cell as TableCell, table_column as TableColumn, table_header as TableHeader, table_row as TableRow };

package/dist/components/UXTable/base/table-body.d.ts

@@ -0,0 +1,20 @@
+import type { JSX, ReactNode } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { TableBodyProps as TableBodyBaseProps } from '@react-types/table';
+export interface TableBodyProps<T> extends TableBodyBaseProps<T>, Omit<HTMLHeroUIProps<'tbody'>, keyof TableBodyBaseProps<T>> {
+    /**
+     * Provides content to display a loading component when the `loadingState` is `loading` or `loadingMore`.
+     */
+    loadingContent?: ReactNode;
+    /**
+     * Whether the table data is currently loading.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     *  Provides content to display when there are no rows in the table.
+     * */
+    emptyContent?: ReactNode;
+}
+declare const TableBody: <T>(props: TableBodyProps<T>) => JSX.Element;
+export default TableBody;

package/dist/components/UXTable/base/table-body.js

@@ -0,0 +1,4 @@
+import { TableBody } from "@react-stately/table";
+const table_body_TableBody = TableBody;
+const table_body = table_body_TableBody;
+export { table_body as default };

package/dist/components/UXTable/base/table-cell.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { CellProps } from '@react-types/table';
+export type TableCellProps = CellProps & HTMLHeroUIProps<'td'>;
+declare const TableCell: (props: TableCellProps) => JSX.Element;
+export default TableCell;

package/dist/components/UXTable/base/table-cell.js

@@ -0,0 +1,4 @@
+import { Cell } from "@react-stately/table";
+const TableCell = Cell;
+const table_cell = TableCell;
+export { table_cell as default };

package/dist/components/UXTable/base/table-column.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { SpectrumColumnProps } from '@react-types/table';
+export type TableColumnProps<T> = Omit<SpectrumColumnProps<T>, 'showDivider'> & Omit<HTMLHeroUIProps<'th'>, keyof SpectrumColumnProps<T>>;
+declare const TableColumn: <T>(props: TableColumnProps<T>) => JSX.Element;
+export default TableColumn;

package/dist/components/UXTable/base/table-column.js

@@ -0,0 +1,4 @@
+import { Column } from "@react-stately/table";
+const TableColumn = Column;
+const table_column = TableColumn;
+export { table_column as default };

package/dist/components/UXTable/base/table-header.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { TableHeaderProps as TableHeaderBaseProps } from '@react-types/table';
+export type TableHeaderProps<T> = TableHeaderBaseProps<T> & Omit<HTMLHeroUIProps<'thead'>, keyof TableHeaderBaseProps<T>>;
+declare const TableHeader: <T>(props: TableHeaderProps<T>) => JSX.Element;
+export default TableHeader;

package/dist/components/UXTable/base/table-header.js

@@ -0,0 +1,4 @@
+import { TableHeader } from "@react-stately/table";
+const table_header_TableHeader = TableHeader;
+const table_header = table_header_TableHeader;
+export { table_header as default };

package/dist/components/UXTable/base/table-row.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { RowProps } from '@react-types/table';
+export type TableRowProps<T = object> = RowProps<T> & Omit<HTMLHeroUIProps<'tr'>, keyof RowProps<T>>;
+declare const TableRow: (props: TableRowProps) => JSX.Element;
+export default TableRow;

package/dist/components/UXTable/base/table-row.js

@@ -0,0 +1,4 @@
+import { Row } from "@react-stately/table";
+const TableRow = Row;
+const table_row = TableRow;
+export { table_row as default };

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

@@ -1,37 +1,7 @@
-import React from 'react';
-import ExtendedTable from './table.extend';
-export type UXTableProps = React.ComponentPropsWithRef<typeof ExtendedTable>;
-export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"table", (Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
-    as?: import("@heroui/system-rsc").As<any> | undefined;
-} & {
-    color?: "default" | undefined;
-    size?: "md" | "lg" | undefined;
-    layout?: "auto" | "fixed" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | undefined;
-    hideHeader?: boolean | undefined;
-    isStriped?: boolean | undefined;
-    isCompact?: boolean | undefined;
-    isHeaderSticky?: boolean | undefined;
-    isSelectable?: boolean | undefined;
-    isMultiSelectable?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
-}, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
-    as?: import("@heroui/system-rsc").As<any> | undefined;
-} & {
-    color?: "default" | undefined;
-    size?: "md" | "lg" | undefined;
-    layout?: "auto" | "fixed" | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | undefined;
-    hideHeader?: boolean | undefined;
-    isStriped?: boolean | undefined;
-    isCompact?: boolean | undefined;
-    isHeaderSticky?: boolean | undefined;
-    isSelectable?: boolean | undefined;
-    isMultiSelectable?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    align?: "start" | "end" | "center" | undefined;
-}, "ref">) & React.RefAttributes<HTMLElement>, never>;
-export { TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow, } from '@heroui/table';
+export type { TableProps as UXTableProps } from './table';
+export type { DisabledBehavior, Selection, SelectionBehavior, SelectionMode, SortDescriptor, } from '@react-types/shared';
+export { useTable } from './use-table';
+export { getKeyValue } from '@heroui/shared-utils';
+export { default as UXTable } from './table';
+export type { TableBodyProps as UXTableBodyProps, TableCellProps as UXTableCellProps, TableColumnProps as UXTableColumnProps, TableHeaderProps as UXTableHeaderProps, TableRowProps as UXTableRowProps, } from './base';
+export { TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow, } from './base';

package/dist/components/UXTable/index.js

@@ -1,14 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { forwardRef } from "@heroui/system";
-import table_extend from "./table.extend.js";
-import { TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@heroui/table";
-const UXTable = forwardRef((props, ref)=>{
-    const { selectionMode = 'single', ...restProps } = props;
-    return /*#__PURE__*/ jsx(table_extend, {
-        selectionMode: selectionMode,
-        ...restProps,
-        ref: ref
-    });
-});
-export { UXTable, TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow };
+import { useTable } from "./use-table.js";
+import { getKeyValue } from "@heroui/shared-utils";
+import table from "./table.js";
+import { TableBody, TableCell, TableColumn, TableHeader, TableRow } from "./base/index.js";
+export { table as UXTable, TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow, getKeyValue, useTable };

package/dist/components/UXTable/table-body.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { ValuesType } from './use-table';
+export interface TableBodyProps extends HTMLHeroUIProps<'tbody'> {
+    slots: ValuesType['slots'];
+    collection: ValuesType['collection'];
+    state: ValuesType['state'];
+    isSelectable: ValuesType['isSelectable'];
+    color: ValuesType['color'];
+    disableAnimation: ValuesType['disableAnimation'];
+    checkboxesProps: ValuesType['checkboxesProps'];
+    selectionMode: ValuesType['selectionMode'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableBody: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tbody", TableBodyProps, never>;
+export default TableBody;

package/dist/components/UXTable/table-body.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useTableRowGroup } from "@react-aria/table";
+import { UXEmpty } from "../UXEmpty/index.js";
+import table_cell from "./table-cell.js";
+import table_checkbox_cell from "./table-checkbox-cell.js";
+import table_row from "./table-row.js";
+const TableBody = forwardRef((props, ref)=>{
+    const { as, className, slots, state, collection, isSelectable, color, disableAnimation, checkboxesProps, selectionMode, classNames, ...otherProps } = props;
+    const Component = as || 'tbody';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { rowGroupProps } = useTableRowGroup();
+    const tbodyStyles = cn(classNames?.tbody, className);
+    const bodyProps = collection?.body.props;
+    const isLoading = bodyProps?.isLoading || bodyProps?.loadingState === 'loading' || bodyProps?.loadingState === 'loadingMore';
+    const renderRows = useMemo(()=>[
+            ...collection.body.childNodes
+        ].map((row)=>/*#__PURE__*/ jsx(table_row, {
+                classNames: classNames,
+                isSelectable: isSelectable,
+                node: row,
+                slots: slots,
+                state: state,
+                children: [
+                    ...row.childNodes
+                ].map((cell)=>cell.props.isSelectionCell ? /*#__PURE__*/ jsx(table_checkbox_cell, {
+                        checkboxesProps: checkboxesProps,
+                        classNames: classNames,
+                        color: color,
+                        disableAnimation: disableAnimation,
+                        node: cell,
+                        rowKey: row.key,
+                        selectionMode: selectionMode,
+                        slots: slots,
+                        state: state
+                    }, cell.key) : /*#__PURE__*/ jsx(table_cell, {
+                        classNames: classNames,
+                        node: cell,
+                        rowKey: row.key,
+                        slots: slots,
+                        state: state
+                    }, cell.key))
+            }, row.key)), [
+        collection.body.childNodes,
+        classNames,
+        isSelectable,
+        slots,
+        state
+    ]);
+    let emptyContent;
+    let loadingContent;
+    if (0 === collection.size) emptyContent = /*#__PURE__*/ jsx("tr", {
+        role: "row",
+        children: /*#__PURE__*/ jsx("td", {
+            className: slots?.emptyWrapper({
+                class: classNames?.emptyWrapper
+            }),
+            colSpan: collection.columnCount,
+            role: "gridcell",
+            children: !isLoading && /*#__PURE__*/ jsx(UXEmpty, {})
+        })
+    });
+    return /*#__PURE__*/ jsxs(Component, {
+        ref: domRef,
+        ...mergeProps(rowGroupProps, filterDOMProps(bodyProps, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.tbody?.({
+            class: tbodyStyles
+        }),
+        "data-empty": dataAttr(0 === collection.size),
+        "data-loading": dataAttr(isLoading),
+        children: [
+            renderRows,
+            loadingContent,
+            emptyContent
+        ]
+    });
+});
+TableBody.displayName = 'HeroUI.TableBody';
+const table_body = TableBody;
+export { table_body as default };

package/dist/components/UXTable/table-cell.d.ts

@@ -0,0 +1,19 @@
+import type { Key as ReactKey } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface TableCellProps<T = object> extends HTMLHeroUIProps<'td'> {
+    /**
+     * The key of the table row.
+     */
+    rowKey: ReactKey;
+    /**
+     * The table cell.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableCell: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"td", TableCellProps<object>, never>;
+export default TableCell;

package/dist/components/UXTable/table-cell.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useFocusRing } from "@react-aria/focus";
+import { useTableCell } from "@react-aria/table";
+const TableCell = forwardRef((props, ref)=>{
+    const { as, className, node, rowKey, slots, state, classNames, ...otherProps } = props;
+    const Component = as || 'td';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { gridCellProps } = useTableCell({
+        node
+    }, state, domRef);
+    const tdStyles = cn(classNames?.td, className, node.props?.className);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const isRowSelected = state.selectionManager.isSelected(rowKey);
+    const cell = useMemo(()=>{
+        const cellType = typeof node.rendered;
+        return 'object' !== cellType && 'function' !== cellType ? /*#__PURE__*/ jsx("span", {
+            children: node.rendered
+        }) : node.rendered;
+    }, [
+        node.rendered
+    ]);
+    const columnProps = node.column?.props || {};
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-selected": dataAttr(isRowSelected),
+        ...mergeProps(gridCellProps, focusProps, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.td?.({
+            align: columnProps.align,
+            class: tdStyles
+        }),
+        children: cell
+    });
+});
+TableCell.displayName = 'HeroUI.TableCell';
+const table_cell = TableCell;
+export { table_cell as default };

package/dist/components/UXTable/table-checkbox-cell.d.ts

@@ -0,0 +1,23 @@
+import type { Key as ReactKey } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface TableCheckboxCellProps<T = object> extends HTMLHeroUIProps<'td'> {
+    /**
+     * The key of the table row.
+     */
+    rowKey: ReactKey;
+    /**
+     * The table cell.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    color: ValuesType['color'];
+    disableAnimation: ValuesType['disableAnimation'];
+    checkboxesProps: ValuesType['checkboxesProps'];
+    selectionMode: ValuesType['selectionMode'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableCheckboxCell: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"td", TableCheckboxCellProps<object>, never>;
+export default TableCheckboxCell;

package/dist/components/UXTable/table-checkbox-cell.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@heroui/checkbox";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useFocusRing } from "@react-aria/focus";
+import { useTableCell, useTableSelectionCheckbox } from "@react-aria/table";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+const TableCheckboxCell = forwardRef((props, ref)=>{
+    const { as, className, node, rowKey, slots, state, color, disableAnimation, checkboxesProps, selectionMode, classNames, ...otherProps } = props;
+    const Component = as || 'td';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { gridCellProps } = useTableCell({
+        node
+    }, state, domRef);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const { checkboxProps } = useTableSelectionCheckbox({
+        key: node?.parentKey || node.key
+    }, state);
+    const tdStyles = cn(classNames?.td, className, node.props?.className);
+    const isSingleSelectionMode = 'single' === selectionMode;
+    const { onChange, ...otherCheckboxProps } = checkboxProps;
+    const isRowSelected = state.selectionManager.isSelected(rowKey);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-selected": dataAttr(isRowSelected),
+        ...mergeProps(gridCellProps, focusProps, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.td?.({
+            class: tdStyles
+        }),
+        children: isSingleSelectionMode ? /*#__PURE__*/ jsx(VisuallyHidden, {
+            children: checkboxProps['aria-label']
+        }) : /*#__PURE__*/ jsx(Checkbox, {
+            color: color,
+            disableAnimation: disableAnimation,
+            onValueChange: onChange,
+            ...mergeProps(checkboxesProps, otherCheckboxProps)
+        })
+    });
+});
+TableCheckboxCell.displayName = 'HeroUI.TableCheckboxCell';
+const table_checkbox_cell = TableCheckboxCell;
+export { table_checkbox_cell as default };

package/dist/components/UXTable/table-column-header.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface SortIconProps {
+    'aria-hidden'?: boolean;
+    'data-direction'?: 'ascending' | 'descending';
+    'data-visible'?: boolean | 'true' | 'false';
+    className?: string;
+}
+export interface TableColumnHeaderProps<T = object> extends HTMLHeroUIProps<'th'> {
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    classNames?: ValuesType['classNames'];
+    /**
+     * Custom Icon to be displayed in the table header - overrides the default chevron one
+     */
+    sortIcon?: ReactNode | ((props: SortIconProps) => ReactNode);
+    /**
+     * The table node to render.
+     */
+    node: GridNode<T>;
+}
+declare const TableColumnHeader: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"th", TableColumnHeaderProps<object>, never>;
+export default TableColumnHeader;

package/dist/components/UXTable/table-column-header.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { ChevronDownIcon } from "@heroui/shared-icons";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { useTableColumnHeader } from "@react-aria/table";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+const normalizeWidth = (value)=>'number' == typeof value ? `${value}px` : value;
+const TableColumnHeader = forwardRef((props, ref)=>{
+    const { as, className, state, node, slots, classNames, sortIcon, ...otherProps } = props;
+    const Component = as || 'th';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { columnHeaderProps } = useTableColumnHeader({
+        node
+    }, state, domRef);
+    const thStyles = cn(classNames?.th, className, node.props?.className);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const { isHovered, hoverProps } = useHover({});
+    const { hideHeader, align, width, minWidth, maxWidth, ...columnProps } = node.props;
+    const { allowsSorting } = columnProps;
+    const columnStyles = {};
+    if (width) columnStyles.width = normalizeWidth(width);
+    if (minWidth) columnStyles.minWidth = normalizeWidth(minWidth);
+    if (maxWidth) columnStyles.maxWidth = normalizeWidth(maxWidth);
+    const sortIconProps = {
+        'aria-hidden': true,
+        'data-direction': state.sortDescriptor?.direction,
+        'data-visible': dataAttr(state.sortDescriptor?.column === node.key),
+        className: slots.sortIcon?.({
+            class: classNames?.sortIcon
+        })
+    };
+    const customSortIcon = 'function' == typeof sortIcon ? sortIcon(sortIconProps) : /*#__PURE__*/ isValidElement(sortIcon) && /*#__PURE__*/ cloneElement(sortIcon, sortIconProps);
+    return /*#__PURE__*/ jsxs(Component, {
+        ref: domRef,
+        colSpan: node.colspan,
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-hover": dataAttr(isHovered),
+        "data-sortable": dataAttr(allowsSorting),
+        style: columnStyles,
+        ...mergeProps(columnHeaderProps, focusProps, filterDOMProps(columnProps, {
+            enabled: shouldFilterDOMProps
+        }), allowsSorting ? hoverProps : {}, otherProps),
+        className: slots.th?.({
+            align,
+            class: thStyles
+        }),
+        children: [
+            hideHeader ? /*#__PURE__*/ jsx(VisuallyHidden, {
+                children: node.rendered
+            }) : node.rendered,
+            allowsSorting && (customSortIcon || /*#__PURE__*/ jsx(ChevronDownIcon, {
+                strokeWidth: 3,
+                ...sortIconProps
+            }))
+        ]
+    });
+});
+TableColumnHeader.displayName = 'HeroUI.TableColumnHeader';
+const table_column_header = TableColumnHeader;
+export { table_column_header as default };

package/dist/components/UXTable/table-header-row.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface TableHeaderRowProps<T = object> extends HTMLHeroUIProps<'tr'> {
+    /**
+     * The table node to render.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableHeaderRow: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tr", TableHeaderRowProps<object>, never>;
+export default TableHeaderRow;

package/dist/components/UXTable/table-header-row.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { mergeProps } from "@heroui/shared-utils";
+import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useTableHeaderRow } from "@react-aria/table";
+const TableHeaderRow = forwardRef((props, ref)=>{
+    const { as, className, children, node, slots, classNames, state, ...otherProps } = props;
+    const Component = as || 'tr';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { rowProps } = useTableHeaderRow({
+        node
+    }, state, domRef);
+    const trStyles = cn(classNames?.tr, className, node.props?.className);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        ...mergeProps(rowProps, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.tr?.({
+            class: trStyles
+        }),
+        children: children
+    });
+});
+TableHeaderRow.displayName = 'HeroUI.TableHeaderRow';
+const table_header_row = TableHeaderRow;
+export { table_header_row as default };

package/dist/components/UXTable/table-row-group.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { ValuesType } from './use-table';
+export interface TableRowGroupProps extends HTMLHeroUIProps<'thead'> {
+    slots: ValuesType['slots'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableRowGroup: import("react").ForwardRefExoticComponent<TableRowGroupProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export default TableRowGroup;

package/dist/components/UXTable/table-row-group.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef } from "@heroui/react-utils";
+import { mergeProps } from "@heroui/shared-utils";
+import { cn } from "@heroui/theme";
+import { useTableRowGroup } from "@react-aria/table";
+const TableRowGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { as, className, children, slots, classNames, ...otherProps } = props;
+    const Component = as || 'thead';
+    const domRef = useDOMRef(ref);
+    const { rowGroupProps } = useTableRowGroup();
+    const theadStyles = cn(classNames?.thead, className);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        className: slots.thead?.({
+            class: theadStyles
+        }),
+        ...mergeProps(rowGroupProps, otherProps),
+        children: children
+    });
+});
+TableRowGroup.displayName = 'HeroUI.TableRowGroup';
+const table_row_group = TableRowGroup;
+export { table_row_group as default };

package/dist/components/UXTable/table-row.d.ts

@@ -0,0 +1,15 @@
+import type { GridNode } from '@react-types/grid';
+import type { TableRowProps as BaseTableRowProps } from './base/table-row';
+import type { ValuesType } from './use-table';
+export interface TableRowProps<T = object> extends Omit<BaseTableRowProps, 'children'> {
+    /**
+     * The table row.
+     */
+    node: GridNode<T>;
+    slots: ValuesType['slots'];
+    state: ValuesType['state'];
+    isSelectable?: ValuesType['isSelectable'];
+    classNames?: ValuesType['classNames'];
+}
+declare const TableRow: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tr", TableRowProps<object>, never>;
+export default TableRow;