@particle-network/ui-react 0.7.0-beta.2 → 0.7.0-beta.20

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

@@ -1,115 +1,125 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import react, { cloneElement, isValidElement, useCallback, useId, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import react, { useCallback, useRef } from "react";
 import { cn } from "../../utils/index.js";
-const UXSimplePopover = (props)=>{
-    const { content, children, triggerType = 'hover', placement = 'top', delay = 300, closeDelay = 100, classNames = {
-        trigger: '',
-        content: ''
-    } } = props;
-    const id = useId().replace(/:/g, '');
-    const popoverId = `simple-popover-${id}`;
-    const anchorName = `--simple-popover-${id}`;
-    const popoverRef = useRef(null);
-    const openTimerRef = useRef(null);
-    const closeTimerRef = useRef(null);
-    const clearOpenTimer = useCallback(()=>{
-        if (null !== openTimerRef.current) {
-            clearTimeout(openTimerRef.current);
-            openTimerRef.current = null;
-        }
-    }, []);
-    const clearCloseTimer = useCallback(()=>{
-        if (null !== closeTimerRef.current) {
-            clearTimeout(closeTimerRef.current);
-            closeTimerRef.current = null;
-        }
-    }, []);
-    const showPopover = useCallback(()=>{
-        clearCloseTimer();
-        openTimerRef.current = setTimeout(()=>{
-            openTimerRef.current = null;
-            popoverRef.current?.showPopover();
-        }, delay);
-    }, [
+import { useSimplePopoverContext } from "./provider.js";
+const warnedRef = {
+    current: false
+};
+const warnedChildRef = {
+    current: false
+};
+function composeEventHandlers(original, next) {
+    return (event)=>{
+        original?.(event);
+        if (!event.defaultPrevented) next?.(event);
+    };
+}
+function isIntrinsicInteractiveElement(element) {
+    return 'string' == typeof element.type && [
+        'button',
+        'a',
+        'input',
+        'select',
+        'textarea',
+        'summary'
+    ].includes(element.type);
+}
+const UXSimplePopover = ({ content, children, triggerType = 'hover', placement = 'top', size = 'md', offset = 8, delay = 300, closeDelay = 100, classNames })=>{
+    const ctx = useSimplePopoverContext();
+    const contentRef = useRef(content);
+    contentRef.current = content;
+    const optionsRef = useRef({
+        placement,
+        size,
+        offset,
+        delay,
+        closeDelay,
+        contentClassName: classNames?.content
+    });
+    optionsRef.current = {
+        placement,
+        size,
+        offset,
         delay,
-        clearCloseTimer
+        closeDelay,
+        contentClassName: classNames?.content
+    };
+    const isClick = 'click' === triggerType;
+    const handleEnter = useCallback((e)=>{
+        if (ctx && !isClick) ctx.show(e.currentTarget, contentRef.current, optionsRef.current);
+    }, [
+        ctx,
+        isClick
     ]);
-    const hidePopover = useCallback(()=>{
-        clearOpenTimer();
-        closeTimerRef.current = setTimeout(()=>{
-            closeTimerRef.current = null;
-            popoverRef.current?.hidePopover();
-        }, closeDelay);
+    const handleLeave = useCallback(()=>{
+        if (ctx && !isClick) ctx.hide(optionsRef.current.closeDelay);
     }, [
-        closeDelay,
-        clearOpenTimer
+        ctx,
+        isClick
     ]);
-    react.useEffect(()=>()=>{
-            clearOpenTimer();
-            clearCloseTimer();
-        }, [
-        clearOpenTimer,
-        clearCloseTimer
+    const handlePointerDown = useCallback((e)=>{
+        if (ctx && isClick) ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
+    }, [
+        ctx,
+        isClick
     ]);
-    const triggerAnchorStyle = {
-        anchorName
-    };
-    const popoverAnchorStyle = {
-        positionAnchor: anchorName,
-        positionArea: placement
-    };
-    const isClick = 'click' === triggerType;
-    const trigger = isClick ? /*#__PURE__*/ jsx("button", {
-        type: "button",
-        popoverTarget: popoverId,
-        popoverTargetAction: "toggle",
-        className: classNames.trigger,
-        style: {
-            margin: 0,
-            padding: 0,
-            border: 'none',
-            font: 'inherit',
-            color: 'inherit',
-            backgroundColor: 'transparent',
-            cursor: 'pointer',
-            ...triggerAnchorStyle
-        },
-        children: children
-    }) : (()=>{
-        const childElement = /*#__PURE__*/ isValidElement(children) && 1 === react.Children.count(children) ? children : null;
-        return childElement ? /*#__PURE__*/ cloneElement(childElement, {
-            onMouseEnter: showPopover,
-            onMouseLeave: hidePopover,
-            className: [
-                classNames.trigger,
-                childElement.props?.className
-            ].filter(Boolean).join(' '),
-            style: {
-                ...childElement.props?.style,
-                ...triggerAnchorStyle
+    const handleClick = useCallback((e)=>{
+        if (ctx && isClick) {
+            ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
+            ctx.toggle();
+        }
+    }, [
+        ctx,
+        isClick
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (isClick && ('Enter' === e.key || ' ' === e.key)) {
+            e.preventDefault();
+            if (ctx) {
+                ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
+                ctx.toggle();
             }
-        }) : /*#__PURE__*/ jsx("span", {
-            className: classNames.trigger,
-            style: triggerAnchorStyle,
-            role: "button",
-            tabIndex: 0,
-            onMouseEnter: showPopover,
-            onMouseLeave: hidePopover,
-            children: children
+        }
+    }, [
+        ctx,
+        isClick
+    ]);
+    if (!ctx && !warnedRef.current) {
+        warnedRef.current = true;
+        console.warn('[UXSimplePopover] must be used inside <UXSimplePopoverProvider>. Popover will not work.');
+    }
+    if (/*#__PURE__*/ react.isValidElement(children) && children.type !== react.Fragment) {
+        const child = children;
+        const interactiveElement = isIntrinsicInteractiveElement(child);
+        return /*#__PURE__*/ react.cloneElement(child, {
+            className: cn(child.props.className, classNames?.trigger),
+            onMouseEnter: composeEventHandlers(child.props.onMouseEnter, handleEnter),
+            onMouseLeave: composeEventHandlers(child.props.onMouseLeave, handleLeave),
+            ...isClick ? {
+                role: child.props.role ?? (interactiveElement ? void 0 : 'button'),
+                tabIndex: child.props.tabIndex ?? (interactiveElement ? void 0 : 0),
+                onPointerDown: composeEventHandlers(child.props.onPointerDown, handlePointerDown),
+                onClick: composeEventHandlers(child.props.onClick, handleClick),
+                onKeyDown: composeEventHandlers(child.props.onKeyDown, handleKeyDown)
+            } : {}
         });
-    })();
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            trigger,
-            /*#__PURE__*/ jsx("div", {
-                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),
-                style: popoverAnchorStyle,
-                children: content
-            })
-        ]
+    }
+    if (!warnedChildRef.current) {
+        warnedChildRef.current = true;
+        console.warn('[UXSimplePopover] children should be a single React element to avoid the fallback <span> wrapper.');
+    }
+    return /*#__PURE__*/ jsx("span", {
+        className: classNames?.trigger,
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        ...isClick ? {
+            role: 'button',
+            tabIndex: 0,
+            onPointerDown: handlePointerDown,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        } : {},
+        children: children
     });
 };
 UXSimplePopover.displayName = 'UXSimplePopover';

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 };