@wavv/ui 2.2.2-alpha.4 → 2.2.2-alpha.6

package/build/components/Select.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { Button, FieldError, Select, SelectValue } from "react-aria-components";
+import { useControlledOpenState } from "../hooks/index.js";
+import getIcon from "./helpers/getIcon.js";
+import { paddingProps as styledProps_js_paddingProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+import InputContainerStyles from "./Inputs/helpers/InputContainerStyles.js";
+import InputMessage from "./Inputs/helpers/InputMessage.js";
+import Label from "./Inputs/helpers/Label.js";
+import ListBoxItem from "./ListBoxParts/ListBoxItem.js";
+import ListOptions from "./ListBoxParts/ListOptions.js";
+import ListRootStyles, { preventProps } from "./ListHelpers/ListRootStyles.js";
+import ListSection from "./ListHelpers/ListSection.js";
+import MotionPopover from "./MotionPopover.js";
+import Spinner from "./Spinner.js";
+const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, ref, ...props })=>{
+    const [isOpen, handleOpenChange] = useControlledOpenState({
+        open,
+        onOpenChange,
+        afterShow,
+        afterHide
+    });
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const isControlled = void 0 !== value;
+    const currentValue = isControlled ? value : internalValue;
+    const { padding, paddingTop, paddingBottom, paddingRight, paddingLeft } = props;
+    const { margin, marginTop, marginBottom, marginRight, marginLeft } = props;
+    const paddingProps = {
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingRight,
+        paddingLeft
+    };
+    const marginProps = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    };
+    const handleSelect = (val)=>{
+        if (!val) return;
+        if (!allowRepeatSelection && val === currentValue) return;
+        if (!isControlled) setInternalValue(val);
+        if (onChange) onChange(val);
+    };
+    const hasValue = !!(currentValue || defaultValue);
+    const hidePlaceholder = !hasValue && label;
+    const caret = hideCaret ? null : /*#__PURE__*/ jsx(Icon, {
+        name: isOpen ? 'caret-up' : 'caret-down',
+        color: color
+    });
+    return /*#__PURE__*/ jsxs(SelectRoot, {
+        placeholder: placeholder,
+        isOpen: isOpen,
+        onOpenChange: handleOpenChange,
+        onChange: handleSelect,
+        isDisabled: disabled || readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        value: currentValue,
+        defaultValue: defaultValue,
+        textOnly: textOnly,
+        width: width,
+        selectionMode: "single",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(SelectContainer, {
+                backgroundColor: backgroundColor,
+                textOnly: textOnly,
+                hasLabel: !!label,
+                isDisabled: disabled,
+                isReadOnly: readOnly || loading,
+                isInvalid: invalid,
+                borderRadius: borderRadius,
+                height: height,
+                pointer: true,
+                ref: ref,
+                iconLeft: !!iconLeft,
+                ...paddingProps,
+                ...marginProps,
+                children: [
+                    iconLeft && getIcon(iconLeft, {
+                        marginRight: 8
+                    }),
+                    leftElement,
+                    /*#__PURE__*/ jsx(Label, {
+                        label: label,
+                        filled: hasValue,
+                        disabled: disabled,
+                        disablePointerEvents: true,
+                        children: /*#__PURE__*/ jsx(DisplayValue, {
+                            fontSize: fontSize,
+                            fontWeight: fontWeight,
+                            color: color,
+                            placeholderColor: placeholderColor,
+                            isDisabled: disabled,
+                            style: ({ isPlaceholder })=>isPlaceholder && hidePlaceholder ? {
+                                    opacity: 0,
+                                    position: 'absolute'
+                                } : {},
+                            children: ({ isPlaceholder, selectedText, defaultChildren })=>isPlaceholder ? defaultChildren : selectedText
+                        })
+                    }),
+                    rightElement,
+                    loading ? /*#__PURE__*/ jsx(Spinner, {
+                        size: "small"
+                    }) : caret,
+                    /*#__PURE__*/ jsx(InputMessage, {
+                        description: description,
+                        errorMessage: errorMessage
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FieldError, {}),
+            /*#__PURE__*/ jsx(MotionPopover, {
+                offset: 2,
+                placement: position,
+                shouldFlip: fixedPosition ? false : void 0,
+                maxHeight: maxHeight,
+                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsx(ListOptions, {
+                        options: options,
+                        autoWidth: textOnly,
+                        readOnly: isEntering || isExiting,
+                        before: before,
+                        after: after,
+                        menuBackground: menuBackground,
+                        children: children
+                    })
+            })
+        ]
+    });
+};
+const Item = ListBoxItem;
+const Section = ListSection;
+const SelectRoot = styled(Select, preventProps)(ListRootStyles);
+const SelectContainer = styled(Button)(InputContainerStyles, ({ iconLeft, textOnly })=>({
+        paddingLeft: iconLeft ? 8 : void 0,
+        paddingRight: textOnly ? void 0 : 8
+    }), styledProps_js_paddingProps);
+const DisplayValue = styled(SelectValue)(({ theme: { input, font }, fontSize, fontWeight, color, placeholderColor, isDisabled })=>({
+        color: color || (isDisabled ? input.color.disabled : input.color.default),
+        fontFamily: font.family.default,
+        fontSize: fontSize || font.size.lg,
+        fontWeight: fontWeight || font.weight.default,
+        width: '100%',
+        textAlign: 'start',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        '&[data-placeholder]': {
+            color: placeholderColor || (isDisabled ? input.color.disabled : input.color.placeholder)
+        }
+    }));
+const components_Select = Object.assign(Select_Select, {
+    Item,
+    Section
+});
+export { components_Select as default };

package/build/components/Slider.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { marginProps } from "./helpers/styledProps.js";
+const Slider_Slider = ({ value, max = 100, step = 1, width, height, disabled, onChange, ...props })=>{
+    const handleControlGrab = (event)=>{
+        const { value: progressValue } = event.target;
+        if (onChange) onChange(+progressValue);
+    };
+    return /*#__PURE__*/ jsx(ProgressSlider, {
+        ...props,
+        type: "range",
+        max: max,
+        value: value,
+        percent: value / max * 100,
+        onChange: handleControlGrab,
+        step: step,
+        width: width,
+        height: height,
+        disabled: disabled,
+        readOnly: !onChange
+    });
+};
+const thumbControlStyles = (theme, disabled)=>({
+        appearance: 'none',
+        backgroundColor: disabled ? 'transparent' : theme.color.brand,
+        height: theme.size.sm,
+        width: theme.size.sm,
+        border: 'none',
+        borderRadius: '50%'
+    });
+const ProgressSlider = styled.input(({ theme, percent, width, height, disabled, readOnly })=>{
+    const trackColor = disabled ? theme.scale0 : theme.scale1;
+    const progressColor = disabled ? theme.scale1 : theme.color.brand;
+    return {
+        appearance: 'none',
+        display: 'block',
+        width: width || '100%',
+        height: height || 2,
+        borderRadius: 24,
+        outline: 'none',
+        background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${percent}%, ${trackColor} ${percent}%, ${trackColor} 100%)`,
+        '&::-webkit-slider-thumb': thumbControlStyles(theme, disabled || readOnly),
+        '&::-moz-range-thumb': thumbControlStyles(theme, disabled || readOnly),
+        '&:focus-visible': {
+            outline: disabled || readOnly ? 'none' : `${theme.accent} solid 1px`
+        }
+    };
+}, marginProps);
+const Slider = Slider_Slider;
+export { Slider as default };

package/build/components/Spinner.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { marginProps, positionProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/Icon.js";
+const Spinner = ({ size, color, center, background, zIndex, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, className, ...props })=>{
+    const rest = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft,
+        position,
+        top,
+        bottom,
+        right,
+        left,
+        className
+    };
+    return /*#__PURE__*/ jsx(SpinContainer, {
+        ...rest,
+        center: center,
+        background: background,
+        zIndex: zIndex,
+        children: /*#__PURE__*/ jsx(Spin, {
+            children: /*#__PURE__*/ jsx(Icon, {
+                ...props,
+                size: size,
+                name: "loading",
+                color: color
+            })
+        })
+    });
+};
+const SpinContainer = styled.div({
+    width: 'max-content',
+    height: 'max-content'
+}, ({ center, zIndex })=>center && {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: zIndex ?? 1
+    }, ({ center, background })=>{
+    if (!center || !background) return null;
+    const backgroundColor = 'string' == typeof background ? background : 'rgba(0, 0, 0, 0.5)';
+    return {
+        background: backgroundColor,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    };
+}, marginProps, positionProps);
+const spin = keyframes({
+    '0%': {
+        transform: 'rotate(0deg)'
+    },
+    '100%': {
+        transform: 'rotate(360deg)'
+    }
+});
+const Spin = styled.div({
+    animation: `${spin} 1s linear infinite`,
+    width: 'max-content',
+    height: 'max-content'
+});
+const components_Spinner = Spinner;
+export { components_Spinner as default };

package/build/components/Table/Body.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { TableBody, TableLoadMoreItem } from "react-aria-components";
+import Spinner from "../Spinner.js";
+const Body_Body = ({ children, emptyFallback, fetching, loading, scrollOffset, onLoadMore, ...rest })=>{
+    const emptyContent = loading ? /*#__PURE__*/ jsx(SpinnerContainer, {
+        children: /*#__PURE__*/ jsx(Spinner, {})
+    }) : emptyFallback;
+    return /*#__PURE__*/ jsxs(BodyEl, {
+        renderEmptyState: ({ isEmpty })=>isEmpty && emptyContent ? emptyContent : null,
+        loading: loading,
+        ...rest,
+        children: [
+            !loading && children,
+            /*#__PURE__*/ jsx(LoadingRow, {
+                isLoading: fetching,
+                onLoadMore: onLoadMore,
+                scrollOffset: scrollOffset,
+                children: /*#__PURE__*/ jsx(SpinnerContainer, {
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "small"
+                    })
+                })
+            })
+        ]
+    });
+};
+const BodyEl = styled(TableBody)(({ theme, loading })=>({
+        '&[data-empty]': {
+            textAlign: 'center',
+            color: theme.table.color.body,
+            fontSize: theme.font.size.sm,
+            '& > tr:last-of-type > td:first-of-type': {
+                paddingTop: loading ? void 0 : 16
+            }
+        }
+    }));
+const LoadingRow = styled(TableLoadMoreItem)(({ theme })=>({
+        borderTop: `1px solid ${theme.table.borderColor}`
+    }));
+const SpinnerContainer = styled.div(({ theme })=>({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: theme.scale6,
+        paddingTop: 4
+    }));
+const Body = Body_Body;
+export { Body as default };

package/build/components/Table/Cell.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import { Cell } from "react-aria-components";
+import Ellipsis from "../Ellipsis.js";
+import contentStyles from "./contentStyles.js";
+import context from "./context.js";
+const Cell_Cell = ({ children, defaultValue, direction, justify, align, gap, clampLines, ...props })=>{
+    const { rowPadding } = useContext(context);
+    const contentProps = {
+        direction,
+        justify,
+        align,
+        gap
+    };
+    const content = children ?? defaultValue;
+    return /*#__PURE__*/ jsx(TableCell, {
+        parentPadding: rowPadding,
+        ...props,
+        children: /*#__PURE__*/ jsx(Content, {
+            showDefault: !!defaultValue && null == children,
+            ...contentProps,
+            children: 'string' == typeof content ? /*#__PURE__*/ jsx(Ellipsis, {
+                paddingRight: 2,
+                clampLines: clampLines,
+                children: content
+            }) : content
+        })
+    });
+};
+const TableCell = styled(Cell)(({ theme })=>({
+        padding: 0,
+        outline: 'none',
+        outlineOffset: -1,
+        '&:focus-visible': {
+            outline: `${theme.accent} solid 1px`
+        }
+    }), ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft, parentPadding })=>{
+    const { top, right, bottom, left } = parentPadding || {};
+    const leftVal = void 0 !== left ? left - 2 : void 0;
+    return {
+        '& > div': {
+            paddingTop: paddingTop ?? top ?? 16,
+            paddingBottom: paddingBottom ?? bottom ?? 16,
+            paddingLeft,
+            paddingRight,
+            padding
+        },
+        '&:first-of-type > div': {
+            paddingLeft: paddingLeft ?? leftVal ?? 24
+        },
+        '&:last-of-type > div': {
+            paddingRight: paddingRight ?? right ?? 24
+        }
+    };
+});
+const Content = styled.div(contentStyles, ({ showDefault })=>showDefault && {
+        '& > *': {
+            opacity: 0.3
+        }
+    });
+const Table_Cell = Cell_Cell;
+export { Table_Cell as default };

package/build/components/Table/Check.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Checkbox } from "react-aria-components";
+import icons_Checkbox from "../../assets/icons/Checkbox.js";
+import CheckboxOff from "../../assets/icons/CheckboxOff.js";
+import CheckboxPartial from "../../assets/icons/CheckboxPartial.js";
+import Icon from "../Icon/index.js";
+const Check = ({ ...props })=>/*#__PURE__*/ jsx(CheckContainer, {
+        ...props,
+        children: ({ isIndeterminate, isSelected, isDisabled })=>{
+            let svg = /*#__PURE__*/ jsx(CheckboxOff, {});
+            if (isIndeterminate) svg = /*#__PURE__*/ jsx(CheckboxPartial, {});
+            else if (isSelected) svg = /*#__PURE__*/ jsx(icons_Checkbox, {});
+            return /*#__PURE__*/ jsx(Icon, {
+                svg: svg,
+                pointer: !isDisabled
+            });
+        }
+    });
+const CheckContainer = styled(Checkbox)(({ theme: { formControl }, isDisabled })=>({
+        '&[data-hovered] > div': {
+            color: isDisabled ? void 0 : formControl.color.hover
+        },
+        '&[data-selected] > div, &[data-indeterminate] > div': {
+            color: formControl.color.active
+        },
+        '&[data-hovered][data-selected] > div': {
+            color: isDisabled ? void 0 : formControl.color.activeHover
+        },
+        '&[data-disabled] > div': {
+            color: formControl.color.disabled
+        }
+    }));
+const Table_Check = Check;
+export { Table_Check as default };

package/build/components/Table/Column.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContext, useEffect, useState } from "react";
+import { Column } from "react-aria-components";
+import Ellipsis from "../Ellipsis.js";
+import Icon from "../Icon/index.js";
+import ColumnSort from "./ColumnSort.js";
+import contentStyles from "./contentStyles.js";
+import context from "./context.js";
+import Resizer from "./Resizer.js";
+const Column_Column = ({ children, sortKey, sorted, onClick, resize, direction, justify, align, gap, ...props })=>{
+    const [sortDirection, setSortDirection] = useState(sorted || 'inactive');
+    const { activeColumn, setActiveColumn, headerPadding } = useContext(context);
+    const sortEnabled = sortKey || sorted;
+    const active = 'asc' === sortDirection || 'desc' === sortDirection;
+    const contentProps = {
+        direction,
+        justify,
+        align,
+        gap
+    };
+    const sort = (dir)=>{
+        setSortDirection(dir);
+        if (setActiveColumn && sortKey) {
+            const column = 'inactive' === dir ? void 0 : {
+                key: sortKey,
+                dir
+            };
+            setActiveColumn(column);
+        }
+    };
+    const handleCellClick = (event)=>{
+        if (sortKey) if ('inactive' === sortDirection) sort('asc');
+        else 'asc' === sortDirection ? sort('desc') : sort('inactive');
+        else if (onClick) onClick(event);
+    };
+    useEffect(()=>{
+        if (sortKey && ('asc' === sorted || 'desc' === sorted)) sort(sorted);
+    }, []);
+    useEffect(()=>{
+        if (sorted) setSortDirection(sorted);
+    }, [
+        sorted
+    ]);
+    useEffect(()=>{
+        const initialSetup = !activeColumn && sorted;
+        const activeColumnChanged = sortKey && activeColumn && activeColumn.key !== sortKey;
+        const sortSet = 'inactive' !== sortDirection;
+        if (activeColumnChanged && sortSet && !initialSetup) setSortDirection('inactive');
+    }, [
+        activeColumn,
+        sortDirection
+    ]);
+    const clickFn = sortEnabled || onClick ? handleCellClick : void 0;
+    const handleKeyDown = (e)=>{
+        if ('Enter' === e.key || ' ' === e.key) clickFn?.(e);
+    };
+    return /*#__PURE__*/ jsx(HeaderColumn, {
+        parentPadding: headerPadding,
+        ...props,
+        children: /*#__PURE__*/ jsxs(Content, {
+            sorting: !!sortEnabled,
+            active: active,
+            ...contentProps,
+            children: [
+                'string' == typeof children ? /*#__PURE__*/ jsx(Ellipsis, {
+                    onClick: clickFn,
+                    children: children
+                }) : children,
+                sortEnabled && /*#__PURE__*/ jsx("span", {
+                    onClick: clickFn,
+                    onKeyDown: handleKeyDown,
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        svg: /*#__PURE__*/ jsx(ColumnSort, {
+                            sortDirection: sortDirection
+                        }),
+                        marginLeft: -8,
+                        style: {
+                            borderRadius: 4
+                        }
+                    })
+                }),
+                resize && /*#__PURE__*/ jsx(Resizer, {})
+            ]
+        })
+    });
+};
+const HeaderColumn = styled(Column)(({ theme, width, maxWidth, minWidth })=>({
+        textAlign: 'left',
+        verticalAlign: 'middle',
+        color: theme.table.color.header,
+        fontSize: theme.font.size.sm,
+        fontWeight: theme.font.weight.medium,
+        padding: 0,
+        outline: 'none',
+        outlineOffset: -1,
+        width: width || void 0,
+        maxWidth: maxWidth || void 0,
+        minWidth: minWidth || void 0,
+        '&:focus-visible': {
+            outline: `${theme.accent} solid 1px`
+        }
+    }), ({ theme, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, parentPadding })=>({
+        '& > div': {
+            paddingTop: paddingTop ?? parentPadding?.top ?? 8,
+            paddingBottom: paddingBottom ?? parentPadding?.bottom ?? 8,
+            paddingLeft,
+            paddingRight,
+            padding,
+            borderBottom: `1px solid ${theme.table.borderColor}`
+        },
+        '&:first-of-type > div': {
+            paddingLeft: paddingLeft ?? parentPadding?.left ?? 24
+        },
+        '&:last-of-type > div': {
+            paddingRight: paddingRight ?? parentPadding?.right ?? 24
+        }
+    }));
+const Content = styled.div(contentStyles, ({ theme, sorting, active })=>({
+        '& > div:first-of-type, & > span': {
+            cursor: sorting ? 'pointer' : void 0,
+            color: active ? theme.scale10 : theme.table.color.header,
+            '&:hover': {
+                color: sorting ? theme.scale8 : void 0
+            }
+        }
+    }));
+const Table_Column = Column_Column;
+export { Table_Column as default };

package/build/components/Table/ColumnSort.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+const ColumnSort_ColumnSort = ({ sortDirection })=>{
+    const { accent, scale4 } = useTheme();
+    const topColor = 'asc' === sortDirection ? accent : scale4;
+    const bottomColor = 'desc' === sortDirection ? accent : scale4;
+    return /*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M11.3739 3.29206C11.7639 2.90239 12.3941 2.90226 12.7841 3.29206L17.3739 7.88288C17.7636 8.2728 17.7635 8.90211 17.3739 9.29206C16.9839 9.68206 16.3537 9.68206 15.9637 9.29206L12.0839 5.41218L8.20398 9.29206C7.81398 9.68206 7.18382 9.68206 6.79382 9.29206C6.40405 8.90205 6.40416 8.26281 6.78406 7.88288L11.3739 3.29206Z",
+                fill: topColor,
+                transform: "scale(0.8) translate(3, 3)"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M15.9725 13.878C16.3625 13.488 16.9927 13.488 17.3827 13.878C17.7723 14.2679 17.7723 14.8973 17.3827 15.2872L12.7928 19.878C12.4029 20.2678 11.7727 20.2677 11.3827 19.878L6.79285 15.2872C6.40288 14.8972 6.40292 14.268 6.79285 13.878C7.17285 13.498 7.813 13.488 8.203 13.878L12.0829 17.7579L15.9725 13.878Z",
+                fill: bottomColor,
+                transform: "scale(0.8) translate(3, 3)"
+            })
+        ]
+    });
+};
+const ColumnSort = ColumnSort_ColumnSort;
+export { ColumnSort as default };

package/build/components/Table/Header.js

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContext, useEffect } from "react";
+import { TableHeader } from "react-aria-components";
+import mergePadding from "../helpers/mergePadding.js";
+import Check from "./Check.js";
+import Column from "./Column.js";
+import context from "./context.js";
+const Header_Header = ({ children, backgroundColor, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest })=>{
+    const { setHeaderPadding, selectionMode } = useContext(context);
+    useEffect(()=>{
+        const values = padding ?? paddingTop ?? paddingRight ?? paddingBottom ?? paddingLeft;
+        if (null != values && setHeaderPadding) {
+            const paddingValues = mergePadding({
+                padding,
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft
+            });
+            setHeaderPadding(paddingValues);
+        }
+    }, [
+        padding,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        setHeaderPadding
+    ]);
+    const columnsToRender = selectionMode ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Column, {
+                width: 70,
+                children: 'multiple' === selectionMode && /*#__PURE__*/ jsx(Check, {
+                    slot: "selection"
+                })
+            }),
+            children
+        ]
+    }) : children;
+    return /*#__PURE__*/ jsx(TableHead, {
+        backgroundColor: backgroundColor,
+        ...rest,
+        children: columnsToRender
+    });
+};
+const TableHead = styled(TableHeader)(({ backgroundColor })=>({
+        position: 'sticky',
+        top: 0,
+        zIndex: 1,
+        backgroundColor: 'inherit',
+        '& > tr': {
+            height: '100%'
+        },
+        '& > tr > th': {
+            backgroundColor: backgroundColor || 'inherit'
+        },
+        '& > tr > th:first-of-type > div': {
+            borderLeft: '2px solid transparent'
+        }
+    }));
+const Header = Header_Header;
+export { Header as default };

package/build/components/Table/Resizer.js

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import { ColumnResizer } from "react-aria-components";
+const Resizer_Resizer = styled(ColumnResizer)(({ theme })=>({
+        width: 9,
+        height: 18,
+        backgroundColor: theme.scale4,
+        marginLeft: 'auto',
+        backgroundClip: 'content-box',
+        border: '4px transparent',
+        borderStyle: 'none solid',
+        '&[data-resizable-direction=both]': {
+            cursor: 'col-resize'
+        },
+        '&[data-resizable-direction=left]': {
+            cursor: 'e-resize'
+        },
+        '&[data-resizable-direction=right]': {
+            cursor: 'w-resize'
+        },
+        '&[data-focus-visible]': {
+            backgroundColor: theme.accent
+        }
+    }));
+const Resizer = Resizer_Resizer;
+export { Resizer as default };