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

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

@@ -0,0 +1,8 @@
+import type { UseTableProps } from './use-table';
+export interface TableProps<T = object> extends Omit<UseTableProps<T>, 'isSelectable' | 'isMultiSelectable'> {
+    isVirtualized?: boolean;
+    rowHeight?: number;
+    maxTableHeight?: number;
+}
+declare const Table: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"table", TableProps<object>, never>;
+export default Table;

package/dist/components/UXTable/table.js

@@ -0,0 +1,96 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { forwardRef } from "@heroui/system";
+import table_body from "./table-body.js";
+import table_column_header from "./table-column-header.js";
+import table_header_row from "./table-header-row.js";
+import table_row_group from "./table-row-group.js";
+import table_select_all_checkbox from "./table-select-all-checkbox.js";
+import { useTable } from "./use-table.js";
+import virtualized_table from "./virtualized-table.js";
+const Table = forwardRef((props, ref)=>{
+    const { BaseComponent, Component, collection, values, topContent, topContentPlacement, bottomContentPlacement, bottomContent, removeWrapper, sortIcon, getBaseProps, getWrapperProps, getTableProps } = useTable({
+        ...props,
+        ref
+    });
+    const { isVirtualized, rowHeight = 40, maxTableHeight = 600 } = props;
+    const shouldVirtualize = isVirtualized;
+    const Wrapper = useCallback(({ children })=>{
+        if (removeWrapper) return children;
+        return /*#__PURE__*/ jsx(BaseComponent, {
+            ...getWrapperProps(),
+            children: children
+        });
+    }, [
+        removeWrapper,
+        getWrapperProps
+    ]);
+    if (shouldVirtualize) return /*#__PURE__*/ jsx(virtualized_table, {
+        ...props,
+        ref: ref,
+        maxTableHeight: maxTableHeight,
+        rowHeight: rowHeight
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...getBaseProps(),
+        children: [
+            'outside' === topContentPlacement && topContent,
+            /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        'inside' === topContentPlacement && topContent,
+                        /*#__PURE__*/ jsxs(Component, {
+                            ...getTableProps(),
+                            children: [
+                                /*#__PURE__*/ jsx(table_row_group, {
+                                    classNames: values.classNames,
+                                    slots: values.slots,
+                                    children: collection.headerRows.map((headerRow)=>/*#__PURE__*/ jsx(table_header_row, {
+                                            classNames: values.classNames,
+                                            node: headerRow,
+                                            slots: values.slots,
+                                            state: values.state,
+                                            children: [
+                                                ...headerRow.childNodes
+                                            ].map((column)=>column?.props?.isSelectionCell ? /*#__PURE__*/ jsx(table_select_all_checkbox, {
+                                                    checkboxesProps: values.checkboxesProps,
+                                                    classNames: values.classNames,
+                                                    color: values.color,
+                                                    disableAnimation: values.disableAnimation,
+                                                    node: column,
+                                                    selectionMode: values.selectionMode,
+                                                    slots: values.slots,
+                                                    state: values.state
+                                                }, column?.key) : /*#__PURE__*/ jsx(table_column_header, {
+                                                    classNames: values.classNames,
+                                                    node: column,
+                                                    slots: values.slots,
+                                                    sortIcon: sortIcon,
+                                                    state: values.state
+                                                }, column?.key))
+                                        }, headerRow?.key))
+                                }),
+                                /*#__PURE__*/ jsx(table_body, {
+                                    checkboxesProps: values.checkboxesProps,
+                                    classNames: values.classNames,
+                                    collection: values.collection,
+                                    color: values.color,
+                                    disableAnimation: values.disableAnimation,
+                                    isSelectable: values.isSelectable,
+                                    selectionMode: values.selectionMode,
+                                    slots: values.slots,
+                                    state: values.state
+                                })
+                            ]
+                        }),
+                        'inside' === bottomContentPlacement && bottomContent
+                    ]
+                })
+            }),
+            'outside' === bottomContentPlacement && bottomContent
+        ]
+    });
+});
+Table.displayName = 'HeroUI.Table';
+const table = Table;
+export { table as default };

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

@@ -0,0 +1,145 @@
+import type React from 'react';
+import type { Key, ReactNode } from 'react';
+import type { CheckboxProps } from '@heroui/checkbox';
+import type { ReactRef } from '@heroui/react-utils';
+import type { HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import type { SlotsToClasses } from '@heroui/theme';
+import type { AriaTableProps } from '@react-aria/table';
+import type { TableState, TableStateProps } from '@react-stately/table';
+import type { Layout } from '@react-stately/virtualizer';
+import type { DisabledBehavior, Node, SelectionBehavior } from '@react-types/shared';
+import type { TableCollection } from '@react-types/table';
+import type { TableReturnType, TableSlots, TableVariantProps } from './table-theme';
+type TableContentPlacement = 'inside' | 'outside';
+interface Props<T> extends HTMLHeroUIProps<'table'> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    children?: ReactNode;
+    layoutNode?: Layout<Node<T>>;
+    /**
+     * A custom wrapper component for the table.
+     * @default "div"
+     */
+    BaseComponent?: React.ComponentType<any>;
+    /**
+     * Ref to the container element.
+     */
+    baseRef?: ReactRef<HTMLElement | null>;
+    /**
+     * Where to place the `topContent` component.
+     * @default "inside"
+     */
+    topContentPlacement?: TableContentPlacement;
+    /**
+     * Provides content to include a component in the top of the table.
+     */
+    topContent?: ReactNode;
+    /**
+     * Where to place the `bottomContent` component.
+     * @default "inside"
+     */
+    bottomContentPlacement?: TableContentPlacement;
+    /**
+     * Provides content to include a component in the bottom of the table.
+     */
+    bottomContent?: ReactNode;
+    /**
+     * Whether the table base container should not be rendered.
+     * @default false
+     */
+    removeWrapper?: boolean;
+    /**
+     * How multiple selection should behave in the collection.
+     * The selection behavior for the table. If selectionMode is `"none"`, this will be `null`.
+     * otherwise, this will be `toggle` or `replace`.
+     * @default "toggle"
+     */
+    selectionBehavior?: SelectionBehavior | null;
+    /**
+     * Whether `disabledKeys` applies to all interactions, or only selection.
+     * @default "selection"
+     */
+    disabledBehavior?: DisabledBehavior;
+    /**
+     * Whether to disable the table and checkbox animations.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Whether to disable the keyboard navigation functionality.
+     * @default false
+     */
+    isKeyboardNavigationDisabled?: boolean;
+    /**
+     * Props to be passed to the checkboxes.
+     */
+    checkboxesProps?: CheckboxProps;
+    /**
+     * Custom Icon to be displayed in the table header - overrides the default chevron one
+     */
+    sortIcon?: ReactNode | ((props: unknown) => ReactNode);
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: (key: Key) => void;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: (key: Key) => void;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Table classNames={{
+     *    base:"base-classes", // table wrapper
+     *    table: "table-classes",
+     *    thead: "thead-classes",
+     *    tbody: "tbody-classes",
+     *    tr: "tr-classes",
+     *    th: "th-classes",
+     *    td: "td-classes",
+     *    tfoot: "tfoot-classes",
+     *    sortIcon: "sort-icon-classes",
+     *    emptyWrapper: "empty-wrapper-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<TableSlots>;
+}
+export type UseTableProps<T = object> = Props<T> & TableStateProps<T> & Omit<AriaTableProps, 'layout'> & TableVariantProps;
+export interface ValuesType<T = object> {
+    state: TableState<T>;
+    slots: TableReturnType;
+    collection: TableCollection<T>;
+    color: TableVariantProps['color'];
+    isSelectable: boolean;
+    selectionMode: UseTableProps<T>['selectionMode'];
+    selectionBehavior: SelectionBehavior | null;
+    checkboxesProps?: CheckboxProps;
+    disabledBehavior: UseTableProps<T>['disabledBehavior'];
+    disableAnimation?: UseTableProps<T>['disableAnimation'];
+    isHeaderSticky?: UseTableProps<T>['isHeaderSticky'];
+    showSelectionCheckboxes: UseTableProps<T>['showSelectionCheckboxes'];
+    classNames?: SlotsToClasses<TableSlots>;
+    onRowAction?: UseTableProps<T>['onRowAction'];
+    onCellAction?: UseTableProps<T>['onCellAction'];
+}
+export declare function useTable<T extends object>(originalProps: UseTableProps<T>): {
+    BaseComponent: string | React.ComponentType<any>;
+    Component: import("@heroui/system-rsc").As<any>;
+    children: ((string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null) & [React.ReactElement<import("@react-types/table").TableHeaderProps<T>, string | React.JSXElementConstructor<any>>, React.ReactElement<import("@react-types/table").TableBodyProps<T>, string | React.JSXElementConstructor<any>>]) | undefined;
+    state: TableState<T>;
+    collection: TableCollection<T>;
+    values: ValuesType<T>;
+    topContent: React.ReactNode;
+    bottomContent: React.ReactNode;
+    removeWrapper: boolean;
+    topContentPlacement: TableContentPlacement;
+    bottomContentPlacement: TableContentPlacement;
+    sortIcon: React.ReactNode | ((props: unknown) => ReactNode);
+    getBaseProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getTableProps: PropGetter;
+};
+export type UseTableReturn = ReturnType<typeof useTable>;
+export {};

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

@@ -0,0 +1,127 @@
+import { useCallback, useMemo } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { mergeProps, objectToDeps } from "@heroui/shared-utils";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useTable } from "@react-aria/table";
+import { useTableState } from "@react-stately/table";
+import { table } from "./table-theme.js";
+function use_table_useTable(originalProps) {
+    const globalContext = useProviderContext();
+    const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
+    const { ref, as, baseRef, children, className, classNames, removeWrapper = false, disableAnimation = globalContext?.disableAnimation ?? false, isKeyboardNavigationDisabled = false, selectionMode = 'none', topContentPlacement = 'inside', bottomContentPlacement = 'inside', selectionBehavior = 'none' === selectionMode ? null : 'toggle', disabledBehavior = 'selection', showSelectionCheckboxes = 'multiple' === selectionMode && 'replace' !== selectionBehavior, BaseComponent = 'div', checkboxesProps, topContent, bottomContent, sortIcon, onRowAction, onCellAction, ...otherProps } = props;
+    const Component = as || 'table';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const domBaseRef = useDOMRef(baseRef);
+    const state = useTableState({
+        ...originalProps,
+        children,
+        showSelectionCheckboxes
+    });
+    if (isKeyboardNavigationDisabled && !state.isKeyboardNavigationDisabled) state.setKeyboardNavigationDisabled(true);
+    const { collection } = state;
+    const { layout, ...otherOriginalProps } = originalProps;
+    const { gridProps } = useTable({
+        ...otherOriginalProps
+    }, state, domRef);
+    const isSelectable = 'none' !== selectionMode;
+    const isMultiSelectable = 'multiple' === selectionMode;
+    const slots = useMemo(()=>table({
+            ...variantProps,
+            isSelectable,
+            isMultiSelectable
+        }), [
+        objectToDeps(variantProps),
+        isSelectable,
+        isMultiSelectable
+    ]);
+    const baseStyles = cn(classNames?.base, className);
+    const values = useMemo(()=>({
+            state,
+            slots,
+            isSelectable,
+            collection,
+            classNames,
+            color: originalProps?.color,
+            disableAnimation,
+            checkboxesProps,
+            isHeaderSticky: originalProps?.isHeaderSticky ?? false,
+            selectionMode,
+            selectionBehavior,
+            disabledBehavior,
+            showSelectionCheckboxes,
+            onRowAction,
+            onCellAction
+        }), [
+        slots,
+        state,
+        collection,
+        isSelectable,
+        classNames,
+        selectionMode,
+        selectionBehavior,
+        checkboxesProps,
+        disabledBehavior,
+        disableAnimation,
+        showSelectionCheckboxes,
+        originalProps?.color,
+        originalProps?.isHeaderSticky,
+        onRowAction,
+        onCellAction
+    ]);
+    const getBaseProps = useCallback((props)=>({
+            ...props,
+            ref: domBaseRef,
+            className: slots.base({
+                class: cn(baseStyles, props?.className)
+            })
+        }), [
+        baseStyles,
+        slots
+    ]);
+    const getWrapperProps = useCallback((props)=>({
+            ...props,
+            ref: domBaseRef,
+            className: slots.wrapper({
+                class: cn(classNames?.wrapper, props?.className)
+            })
+        }), [
+        classNames?.wrapper,
+        slots
+    ]);
+    const getTableProps = useCallback((props)=>({
+            ...mergeProps(gridProps, filterDOMProps(otherProps, {
+                enabled: shouldFilterDOMProps
+            }), props),
+            onKeyDownCapture: void 0,
+            ref: domRef,
+            className: slots.table({
+                class: cn(classNames?.table, props?.className)
+            })
+        }), [
+        classNames?.table,
+        shouldFilterDOMProps,
+        slots,
+        gridProps,
+        otherProps
+    ]);
+    return {
+        BaseComponent,
+        Component,
+        children,
+        state,
+        collection,
+        values,
+        topContent,
+        bottomContent,
+        removeWrapper,
+        topContentPlacement,
+        bottomContentPlacement,
+        sortIcon,
+        getBaseProps,
+        getWrapperProps,
+        getTableProps
+    };
+}
+export { use_table_useTable as useTable };

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

@@ -0,0 +1,17 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { ValuesType } from './use-table';
+export interface VirtualizedTableBodyProps 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'];
+    rowVirtualizer: Virtualizer<any, Element>;
+}
+declare const VirtualizedTableBody: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"tbody", VirtualizedTableBodyProps, never>;
+export default VirtualizedTableBody;

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

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 VirtualizedTableBody = forwardRef((props, ref)=>{
+    const { as, className, slots, state, collection, isSelectable, color, disableAnimation, checkboxesProps, selectionMode, classNames, rowVirtualizer, ...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 items = [
+        ...collection.body.childNodes
+    ];
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    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, {})
+        })
+    });
+    if (isLoading && bodyProps.loadingContent) loadingContent = /*#__PURE__*/ jsxs("tr", {
+        role: "row",
+        children: [
+            /*#__PURE__*/ jsx("td", {
+                className: slots?.loadingWrapper({
+                    class: classNames?.loadingWrapper
+                }),
+                colSpan: collection.columnCount,
+                role: "gridcell",
+                children: bodyProps.loadingContent
+            }),
+            emptyContent || 0 !== collection.size ? null : /*#__PURE__*/ jsx("td", {
+                className: slots?.emptyWrapper({
+                    class: classNames?.emptyWrapper
+                })
+            })
+        ]
+    });
+    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: [
+            virtualItems.map((virtualRow, index)=>{
+                const row = items[virtualRow.index];
+                if (!row) return null;
+                return /*#__PURE__*/ jsx(table_row, {
+                    classNames: classNames,
+                    isSelectable: isSelectable,
+                    node: row,
+                    slots: slots,
+                    state: state,
+                    style: {
+                        transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+                        height: `${virtualRow.size}px`
+                    },
+                    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
+                        }, String(cell.key)) : /*#__PURE__*/ jsx(table_cell, {
+                            classNames: classNames,
+                            node: cell,
+                            rowKey: row.key,
+                            slots: slots,
+                            state: state
+                        }, String(cell.key)))
+                }, String(row.key));
+            }),
+            loadingContent,
+            emptyContent
+        ]
+    });
+});
+VirtualizedTableBody.displayName = 'HeroUI.VirtualizedTableBody';
+const virtualized_table_body = VirtualizedTableBody;
+export { virtualized_table_body as default };

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

@@ -0,0 +1,8 @@
+import type { UseTableProps } from './use-table';
+export interface TableProps<T = object> extends Omit<UseTableProps<T>, 'isSelectable' | 'isMultiSelectable'> {
+    isVirtualized?: boolean;
+    rowHeight?: number;
+    maxTableHeight?: number;
+}
+declare const VirtualizedTable: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"table", TableProps<object>, never>;
+export default VirtualizedTable;

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

@@ -0,0 +1,115 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { forwardRef } from "@heroui/system";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import table_column_header from "./table-column-header.js";
+import table_header_row from "./table-header-row.js";
+import table_row_group from "./table-row-group.js";
+import table_select_all_checkbox from "./table-select-all-checkbox.js";
+import { useTable } from "./use-table.js";
+import virtualized_table_body from "./virtualized-table-body.js";
+const VirtualizedTable = forwardRef((props, ref)=>{
+    const { BaseComponent, Component, collection, values, topContent, topContentPlacement, bottomContentPlacement, bottomContent, getBaseProps, getWrapperProps, getTableProps } = useTable({
+        ...props,
+        ref
+    });
+    const { rowHeight = 40, maxTableHeight = 600 } = props;
+    const parentRef = useRef(null);
+    const Wrapper = useCallback(({ children })=>/*#__PURE__*/ jsx(BaseComponent, {
+            ...getWrapperProps(),
+            ref: parentRef,
+            style: {
+                height: maxTableHeight,
+                display: 'block'
+            },
+            children: children
+        }), [
+        getWrapperProps,
+        maxTableHeight
+    ]);
+    const items = [
+        ...collection.body.childNodes
+    ];
+    const count = items.length;
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const headerRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (headerRef.current) setHeaderHeight(headerRef.current.getBoundingClientRect().height);
+    }, [
+        headerRef
+    ]);
+    const rowVirtualizer = useVirtualizer({
+        count,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: ()=>rowHeight,
+        overscan: 5
+    });
+    const tableProps = getTableProps();
+    return /*#__PURE__*/ jsxs("div", {
+        ...getBaseProps(),
+        children: [
+            'outside' === topContentPlacement && topContent,
+            /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        'inside' === topContentPlacement && topContent,
+                        /*#__PURE__*/ jsxs(Component, {
+                            ...tableProps,
+                            style: {
+                                height: `calc(${rowVirtualizer.getTotalSize() + headerHeight}px)`,
+                                ...tableProps.style
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx(table_row_group, {
+                                    ref: headerRef,
+                                    classNames: values.classNames,
+                                    slots: values.slots,
+                                    children: collection.headerRows.map((headerRow)=>/*#__PURE__*/ jsx(table_header_row, {
+                                            classNames: values.classNames,
+                                            node: headerRow,
+                                            slots: values.slots,
+                                            state: values.state,
+                                            children: [
+                                                ...headerRow.childNodes
+                                            ].map((column)=>column?.props?.isSelectionCell ? /*#__PURE__*/ jsx(table_select_all_checkbox, {
+                                                    checkboxesProps: values.checkboxesProps,
+                                                    classNames: values.classNames,
+                                                    color: values.color,
+                                                    disableAnimation: values.disableAnimation,
+                                                    node: column,
+                                                    selectionMode: values.selectionMode,
+                                                    slots: values.slots,
+                                                    state: values.state
+                                                }, column?.key) : /*#__PURE__*/ jsx(table_column_header, {
+                                                    classNames: values.classNames,
+                                                    node: column,
+                                                    slots: values.slots,
+                                                    state: values.state
+                                                }, column?.key))
+                                        }, headerRow?.key))
+                                }),
+                                /*#__PURE__*/ jsx(virtualized_table_body, {
+                                    checkboxesProps: values.checkboxesProps,
+                                    classNames: values.classNames,
+                                    collection: values.collection,
+                                    color: values.color,
+                                    disableAnimation: values.disableAnimation,
+                                    isSelectable: values.isSelectable,
+                                    rowVirtualizer: rowVirtualizer,
+                                    selectionMode: values.selectionMode,
+                                    slots: values.slots,
+                                    state: values.state
+                                })
+                            ]
+                        }),
+                        'inside' === bottomContentPlacement && bottomContent
+                    ]
+                })
+            }),
+            'outside' === bottomContentPlacement && bottomContent
+        ]
+    });
+});
+VirtualizedTable.displayName = 'HeroUI.VirtualizedTable';
+const virtualized_table = VirtualizedTable;
+export { virtualized_table as default };

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useDisclosure } from "@heroui/use-disclosure";
-import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
+import ChartColorSwitchIcon from "@particle-network/icons/web/ChartColorSwitchIcon";
+import CopyIcon from "@particle-network/icons/web/CopyIcon";
 import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
 import { cn } from "../../utils/index.js";
@@ -18,6 +19,7 @@ import { UXTooltip } from "../UXTooltip/index.js";
 import { CustomThemeConfig } from "./custom-theme-config.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
+import { preloadFonts } from "./utils.js";
 const FONT_EXAMPLES = [
     {
         title: 'Manrope',
@@ -39,6 +41,11 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
     useEffect(()=>{
         initTheme();
     }, []);
+    useEffect(()=>{
+        if (isOpen) preloadFonts();
+    }, [
+        isOpen
+    ]);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes

package/dist/components/UXThemeSwitch/use-theme.js

@@ -42,7 +42,7 @@ const useTheme = ()=>{
         wait: 300
     });
     const initTheme = ()=>{
-        preloadFonts();
+        if (theme.fontName || fontUrl) preloadFonts();
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
     };