@particle-network/ui-react 0.7.0-beta.7 → 0.7.0-beta.9

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

@@ -0,0 +1,61 @@
+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 { useHover } from "@react-aria/interactions";
+import { useTableRow } from "@react-aria/table";
+const TableRow = forwardRef((props, ref)=>{
+    const { as, className, children, node, slots, state, isSelectable, classNames, ...otherProps } = props;
+    const Component = as || (props?.href ? 'a' : 'tr');
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { rowProps } = useTableRow({
+        node
+    }, state, domRef);
+    const trStyles = cn(classNames?.tr, className, node.props?.className);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const isDisabled = state.disabledKeys.has(node.key);
+    const isSelected = state.selectionManager.isSelected(node.key);
+    const { isHovered, hoverProps } = useHover({
+        isDisabled
+    });
+    const { isFirst, isLast, isMiddle, isOdd } = useMemo(()=>{
+        const isFirst = node.key === state.collection.getFirstKey();
+        const isLast = node.key === state.collection.getLastKey();
+        const isMiddle = !isFirst && !isLast;
+        const isOdd = node?.index ? (node.index + 1) % 2 === 0 : false;
+        return {
+            isFirst,
+            isLast,
+            isMiddle,
+            isOdd
+        };
+    }, [
+        node,
+        state.collection
+    ]);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        "data-disabled": dataAttr(isDisabled),
+        "data-first": dataAttr(isFirst),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-hover": dataAttr(isHovered),
+        "data-last": dataAttr(isLast),
+        "data-middle": dataAttr(isMiddle),
+        "data-odd": dataAttr(isOdd),
+        "data-selected": dataAttr(isSelected),
+        ...mergeProps(rowProps, focusProps, isSelectable ? hoverProps : {}, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), otherProps),
+        className: slots.tr?.({
+            class: trStyles
+        }),
+        children: children
+    });
+});
+TableRow.displayName = 'HeroUI.TableRow';
+const table_row = TableRow;
+export { table_row as default };

package/dist/components/UXTable/table-select-all-checkbox.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLHeroUIProps } from '@heroui/system';
+import type { GridNode } from '@react-types/grid';
+import type { ValuesType } from './use-table';
+export interface TableSelectAllCheckboxProps<T = object> extends HTMLHeroUIProps<'th'> {
+    /**
+     * The table column.
+     */
+    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 TableSelectAllCheckbox: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"th", TableSelectAllCheckboxProps<object>, never>;
+export default TableSelectAllCheckbox;

package/dist/components/UXTable/table-select-all-checkbox.js

@@ -0,0 +1,46 @@
+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 { useTableColumnHeader, useTableSelectAllCheckbox } from "@react-aria/table";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+const TableSelectAllCheckbox = forwardRef((props, ref)=>{
+    const { as, className, node, slots, state, selectionMode, color, checkboxesProps, disableAnimation, classNames, ...otherProps } = props;
+    const Component = as || 'th';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const { columnHeaderProps } = useTableColumnHeader({
+        node
+    }, state, domRef);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const { checkboxProps } = useTableSelectAllCheckbox(state);
+    const thStyles = cn(classNames?.th, className, node.props?.className);
+    const isSingleSelectionMode = 'single' === selectionMode;
+    const { onChange, ...otherCheckboxProps } = checkboxProps;
+    return /*#__PURE__*/ jsx(Component, {
+        ref: domRef,
+        "data-focus-visible": dataAttr(isFocusVisible),
+        ...mergeProps(columnHeaderProps, focusProps, filterDOMProps(node.props, {
+            enabled: shouldFilterDOMProps
+        }), filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps
+        })),
+        className: slots.th?.({
+            class: thStyles
+        }),
+        children: isSingleSelectionMode ? /*#__PURE__*/ jsx(VisuallyHidden, {
+            children: checkboxProps['aria-label']
+        }) : /*#__PURE__*/ jsx(Checkbox, {
+            color: color,
+            disableAnimation: disableAnimation,
+            onValueChange: onChange,
+            ...mergeProps(checkboxesProps, otherCheckboxProps)
+        })
+    });
+});
+TableSelectAllCheckbox.displayName = 'HeroUI.TableSelectAllCheckbox';
+const table_select_all_checkbox = TableSelectAllCheckbox;
+export { table_select_all_checkbox as default };

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

@@ -0,0 +1,452 @@
+import type { VariantProps } from 'tailwind-variants';
+/**
+ * Table **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, table, thead, tbody, tr, th, td, tfoot} = table({...})
+ *
+ * <div className={base()}>
+ *   <table className={table()}>
+ *    <thead className={thead()}>
+ *      <tr className={tr()}>
+ *        <th className={th()}>...</th>
+ *        <th className={th()}>...</th>
+ *      </tr>
+ *    </thead>
+ *    <tbody className={tbody()}>
+ *      <tr className={tr()}>
+ *        <td className={td()}>...</td>
+ *        <td className={td()}>...</td>
+ *      </tr>
+ *      <tr className={tr()}>
+ *        <td className={td()}>...</td>
+ *        <td className={td()}>...</td>
+ *     </tr>
+ *   </tbody>
+ *    <tfoot className={tfoot()}>
+ *      <tr className={tr()}>
+ *        <td className={td()}>...</td>
+ *        <td className={td()}>...</td>
+ *      </tr>
+ *    </tfoot>
+ *  </table>
+ * </div>
+ * ```
+ */
+declare const table: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            td: string;
+        };
+        primary: {
+            td: string;
+        };
+        secondary: {
+            td: string;
+        };
+        success: {
+            td: string;
+        };
+        warning: {
+            td: string;
+        };
+        danger: {
+            td: string;
+        };
+    };
+    size: {
+        md: {
+            th: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    layout: {
+        auto: {
+            table: string;
+        };
+        fixed: {
+            table: string;
+        };
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    hideHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    isStriped: {
+        true: {
+            td: string[];
+        };
+    };
+    isCompact: {
+        true: {
+            td: string;
+        };
+        false: {};
+    };
+    isHeaderSticky: {
+        true: {
+            thead: string;
+        };
+    };
+    isSelectable: {
+        true: {
+            tr: string;
+            td: string[];
+        };
+    };
+    isMultiSelectable: {
+        true: {
+            td: string[];
+        };
+        false: {
+            td: string[];
+        };
+    };
+    radius: {
+        none: {
+            wrapper: string;
+            th: never[];
+            td: never[];
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            wrapper: string;
+            table: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string[];
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string[];
+    th: string[];
+    td: string[];
+    tfoot: string;
+    sortIcon: string[];
+    emptyWrapper: string;
+    loadingWrapper: string;
+}, undefined, {
+    color: {
+        default: {
+            td: string;
+        };
+        primary: {
+            td: string;
+        };
+        secondary: {
+            td: string;
+        };
+        success: {
+            td: string;
+        };
+        warning: {
+            td: string;
+        };
+        danger: {
+            td: string;
+        };
+    };
+    size: {
+        md: {
+            th: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    layout: {
+        auto: {
+            table: string;
+        };
+        fixed: {
+            table: string;
+        };
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    hideHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    isStriped: {
+        true: {
+            td: string[];
+        };
+    };
+    isCompact: {
+        true: {
+            td: string;
+        };
+        false: {};
+    };
+    isHeaderSticky: {
+        true: {
+            thead: string;
+        };
+    };
+    isSelectable: {
+        true: {
+            tr: string;
+            td: string[];
+        };
+    };
+    isMultiSelectable: {
+        true: {
+            td: string[];
+        };
+        false: {
+            td: string[];
+        };
+    };
+    radius: {
+        none: {
+            wrapper: string;
+            th: never[];
+            td: never[];
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            wrapper: string;
+            table: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string[];
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string[];
+    th: string[];
+    td: string[];
+    tfoot: string;
+    sortIcon: string[];
+    emptyWrapper: string;
+    loadingWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            td: string;
+        };
+        primary: {
+            td: string;
+        };
+        secondary: {
+            td: string;
+        };
+        success: {
+            td: string;
+        };
+        warning: {
+            td: string;
+        };
+        danger: {
+            td: string;
+        };
+    };
+    size: {
+        md: {
+            th: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    layout: {
+        auto: {
+            table: string;
+        };
+        fixed: {
+            table: string;
+        };
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    hideHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    isStriped: {
+        true: {
+            td: string[];
+        };
+    };
+    isCompact: {
+        true: {
+            td: string;
+        };
+        false: {};
+    };
+    isHeaderSticky: {
+        true: {
+            thead: string;
+        };
+    };
+    isSelectable: {
+        true: {
+            tr: string;
+            td: string[];
+        };
+    };
+    isMultiSelectable: {
+        true: {
+            td: string[];
+        };
+        false: {
+            td: string[];
+        };
+    };
+    radius: {
+        none: {
+            wrapper: string;
+            th: never[];
+            td: never[];
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            wrapper: string;
+            table: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string[];
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string[];
+    th: string[];
+    td: string[];
+    tfoot: string;
+    sortIcon: string[];
+    emptyWrapper: string;
+    loadingWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableVariantProps = VariantProps<typeof table>;
+export type TableSlots = keyof ReturnType<typeof table>;
+export type TableReturnType = ReturnType<typeof table>;
+export { table };