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

package/build/components/Tooltip.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useRef } from "react";
+import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
+import Focusable from "./Focusable.js";
+import isPropAllowed from "./helpers/isPropAllowed.js";
+const Tooltip_Tooltip = ({ trigger, triggerProps, children, content, position, offset = 6, zIndex, width, maxWidth, textAlign, open, disabled, bgColor, color, className, afterShow, afterHide, ...props })=>{
+    const triggerRef = useRef(null);
+    const handleOpenChange = (show)=>{
+        if (afterShow && show) afterShow();
+        if (afterHide && !show) afterHide();
+    };
+    return /*#__PURE__*/ jsxs(TooltipTrigger, {
+        delay: 0,
+        onOpenChange: handleOpenChange,
+        isDisabled: disabled,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Focusable, {
+                ref: triggerRef,
+                ...triggerProps,
+                children: trigger
+            }),
+            /*#__PURE__*/ jsxs(TooltipEl, {
+                placement: position,
+                offset: offset,
+                zIndex: zIndex,
+                width: width,
+                maxWidth: maxWidth,
+                textAlign: textAlign,
+                bgColor: bgColor,
+                textColor: color,
+                className: className,
+                triggerRef: triggerRef,
+                children: [
+                    /*#__PURE__*/ jsx(OverlayArrow, {
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: 8,
+                            height: 8,
+                            viewBox: "0 0 8 8",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: "M0 0 L4 4 L8 0"
+                            })
+                        })
+                    }),
+                    content || children
+                ]
+            })
+        ]
+    });
+};
+const slide = keyframes({
+    from: {
+        transform: 'var(--origin)',
+        opacity: 0
+    },
+    to: {
+        transform: 'translateY(0)',
+        opacity: 1
+    }
+});
+const time = '300ms cubic-bezier(0.860, 0.000, 0.070, 1.000)';
+const TooltipEl = styled(Tooltip, {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'maxWidth',
+            'textAlign',
+            'bgColor',
+            'textColor',
+            'zIndex'
+        ])
+})(({ theme, width, maxWidth, textAlign = 'center', bgColor, textColor, zIndex })=>{
+    const { tooltip, font } = theme;
+    const bgTheme = tooltip.background;
+    const backgroundColor = bgColor || bgTheme;
+    return {
+        backgroundColor,
+        boxShadow: theme.elevation1,
+        color: textColor || tooltip.color.default,
+        fontSize: font.size.sm,
+        fontFamily: font.family.default,
+        borderRadius: 4,
+        width,
+        maxWidth,
+        padding: 16,
+        textAlign,
+        zIndex,
+        '& .react-aria-OverlayArrow svg': {
+            display: 'block',
+            fill: backgroundColor,
+            filter: 'drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.1))'
+        },
+        '&[data-placement=top]': {
+            '--origin': 'translateY(4px)'
+        },
+        '&[data-placement=bottom]': {
+            '--origin': 'translateY(-4px)',
+            boxShadow: '0px -1px 4px 2px rgba(0, 0, 0, 0.1)',
+            '& .react-aria-OverlayArrow svg': {
+                transform: 'rotate(180deg)'
+            }
+        },
+        '&[data-placement=right]': {
+            '--origin': 'translateX(-4px)',
+            boxShadow: '2px 0px 4px 2px rgba(0, 0, 0, 0.1)',
+            '& .react-aria-OverlayArrow svg': {
+                transform: 'rotate(90deg)',
+                filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))'
+            }
+        },
+        '&[data-placement=left]': {
+            '--origin': 'translateX(4px)',
+            boxShadow: '-2px 0px 4px 2px rgba(0, 0, 0, 0.1)',
+            '& .react-aria-OverlayArrow svg': {
+                transform: 'rotate(-90deg)',
+                filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))'
+            }
+        },
+        '&[data-entering]': {
+            animation: `${slide} ${time}`
+        },
+        '&[data-exiting]': {
+            animation: `${slide} ${time} reverse`
+        }
+    };
+});
+const TooltipHeader = styled.div(({ theme })=>({
+        color: theme.tooltip.color.default
+    }));
+const TooltipBody = styled.div(({ theme })=>({
+        color: theme.tooltip.color.subtext
+    }));
+Tooltip_Tooltip.Header = TooltipHeader;
+Tooltip_Tooltip.Body = TooltipBody;
+const components_Tooltip = Tooltip_Tooltip;
+export { components_Tooltip as default };

package/build/components/TransferList.js

@@ -0,0 +1,234 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { isEqual } from "es-toolkit/predicate";
+import { useEffect, useRef, useState } from "react";
+import Button from "./Button/index.js";
+import { marginProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+const TransferList = ({ items, onChange, beforeItemChange, listTitle, noItemsMessage = 'No items', hideSelectAll, hideRemoveAll, readOnly, width, ...rest })=>{
+    const itemsRef = useRef([]);
+    const [base, setBase] = useState([]);
+    const [selected, setSelected] = useState([]);
+    const removeSelected = (item)=>{
+        const newItem = {
+            ...item
+        };
+        newItem.selected = void 0;
+        return newItem;
+    };
+    useEffect(()=>{
+        if (!isEqual(items, itemsRef.current)) {
+            itemsRef.current = items;
+            const initialSelected = items.filter((item)=>item.selected).map(removeSelected);
+            const initialBase = items.filter((item)=>!item.selected).map(removeSelected);
+            setSelected(initialSelected);
+            setBase(initialBase);
+        }
+    }, [
+        items,
+        itemsRef
+    ]);
+    useEffect(()=>{
+        onChange(selected);
+    }, [
+        selected
+    ]);
+    const filterItem = (array, itemToFilter)=>array.filter((item)=>item.id !== itemToFilter.id);
+    const doAction = (itemToMove, action)=>{
+        const isSelect = 'select' === action;
+        const removeAction = isSelect ? setBase : setSelected;
+        const addAction = isSelect ? setSelected : setBase;
+        removeAction((prevArray)=>filterItem(prevArray, itemToMove));
+        addAction((prevArray)=>[
+                ...prevArray,
+                itemToMove
+            ]);
+    };
+    const moveItem = (itemToMove, action)=>{
+        const next = (newItem)=>doAction(newItem || itemToMove, action);
+        if (beforeItemChange) beforeItemChange(itemToMove, action, next);
+        else next();
+    };
+    const moveAllItems = (action)=>{
+        const removeAction = 'select' === action ? setBase : setSelected;
+        const addAction = 'select' === action ? setSelected : setBase;
+        const itemsToMove = 'select' === action ? base : selected;
+        addAction((prevArray)=>[
+                ...prevArray,
+                ...itemsToMove
+            ]);
+        removeAction([]);
+    };
+    const itemContents = (item)=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+                columnGap: 8
+            },
+            children: [
+                item.leftElement || null,
+                item.header && item.body ? /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'column'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(ItemHeader, {
+                            children: item.header
+                        }),
+                        /*#__PURE__*/ jsx(ItemSubtext, {
+                            children: item.body
+                        })
+                    ]
+                }) : item.label,
+                item.rightElement && /*#__PURE__*/ jsx("div", {
+                    style: {
+                        marginLeft: 'auto'
+                    },
+                    children: item.rightElement
+                })
+            ]
+        });
+    const keepButtonContainer = !(hideSelectAll && hideRemoveAll);
+    return /*#__PURE__*/ jsxs(TransferContainer, {
+        width: width,
+        readOnly: readOnly,
+        ...rest,
+        children: [
+            listTitle && /*#__PURE__*/ jsx(Title, {
+                children: listTitle
+            }),
+            /*#__PURE__*/ jsxs(HalvesWrapper, {
+                children: [
+                    !readOnly && /*#__PURE__*/ jsxs(Half, {
+                        children: [
+                            keepButtonContainer && /*#__PURE__*/ jsx(ButtonContainer, {
+                                children: base.length > 0 && !hideSelectAll && /*#__PURE__*/ jsx(Button, {
+                                    small: true,
+                                    outline: true,
+                                    onClick: ()=>moveAllItems('select'),
+                                    icon: "arrow-right",
+                                    iconPosition: "right",
+                                    children: "All"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(List, {
+                                children: base.map((item)=>/*#__PURE__*/ jsxs(ListItem, {
+                                        onClick: ()=>moveItem(item, 'select'),
+                                        color: item.color,
+                                        children: [
+                                            itemContents(item),
+                                            /*#__PURE__*/ jsx(Icon, {
+                                                name: "chevron-right"
+                                            })
+                                        ]
+                                    }, item.id))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Half, {
+                        children: [
+                            keepButtonContainer && !readOnly && /*#__PURE__*/ jsx(ButtonContainer, {
+                                children: selected.length > 0 && !hideRemoveAll && !readOnly && /*#__PURE__*/ jsx(Button, {
+                                    small: true,
+                                    outline: true,
+                                    secondary: true,
+                                    onClick: ()=>moveAllItems('remove'),
+                                    icon: "arrow-left",
+                                    children: "All"
+                                })
+                            }),
+                            readOnly && 0 === selected.length ? /*#__PURE__*/ jsx("div", {
+                                children: noItemsMessage
+                            }) : /*#__PURE__*/ jsx(List, {
+                                children: selected.map((item)=>/*#__PURE__*/ jsxs(ListItem, {
+                                        onClick: ()=>moveItem(item, 'remove'),
+                                        color: item.color,
+                                        children: [
+                                            itemContents(item),
+                                            /*#__PURE__*/ jsx(Icon, {
+                                                name: "chevron-left"
+                                            })
+                                        ]
+                                    }, item.id))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const TransferContainer = styled.div(({ width, readOnly })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: 16,
+        width,
+        pointerEvents: readOnly ? 'none' : void 0
+    }), marginProps);
+const Title = styled.div(({ theme })=>({
+        fontSize: theme.font.size.lg,
+        fontWeight: theme.font.weight.medium
+    }));
+const HalvesWrapper = styled.div({
+    display: 'grid',
+    columnGap: 16,
+    gridTemplateColumns: '1fr 1fr'
+});
+const Half = styled.div({
+    display: 'flex',
+    flexDirection: 'column'
+});
+const ButtonContainer = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: 8,
+    minHeight: 35
+});
+const List = styled.div(({ theme })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 16,
+        border: theme.defaultBorder,
+        borderRadius: 4,
+        height: '100%',
+        backgroundColor: theme.background1,
+        rowGap: 4
+    }));
+const isThemeColor = (themeColors, color)=>{
+    const colorKeys = Object.keys(themeColors);
+    return 'string' == typeof color && colorKeys.includes(color);
+};
+const ListItem = styled.div(({ theme, color })=>{
+    let borderColor = theme.scale1;
+    if (color) borderColor = isThemeColor(theme.color, color) ? theme.color[color] : color;
+    return {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '4px 8px',
+        cursor: 'pointer',
+        background: theme.scale0,
+        borderLeft: '4px solid',
+        borderColor,
+        '&:hover': {
+            background: theme.scale1
+        },
+        '& > :last-child': {
+            visibility: 'hidden'
+        },
+        '&:hover > :last-child': {
+            visibility: 'visible'
+        }
+    };
+});
+const ItemHeader = styled.div(({ theme })=>({
+        fontSize: theme.font.size.lg,
+        color: theme.scale10
+    }));
+const ItemSubtext = styled.div(({ theme })=>({
+        fontSize: theme.font.size.sm,
+        color: theme.scale6
+    }));
+const components_TransferList = TransferList;
+export { components_TransferList as default };

package/build/components/Tree/Tree.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useCallback, useMemo, useState } from "react";
+import { Tree } from "react-aria-components";
+import { paddingProps } from "../helpers/styledProps.js";
+import { TreeContext } from "./TreeContext.js";
+import TreeItem from "./TreeItem.js";
+const Tree_Tree = ({ backgroundColor, expandedKeys: expandedKeysProp, onExpandedChange, defaultExpandedKeys, selectedKeys, onSelectionChange, ...props })=>{
+    const initialExpanded = new Set(defaultExpandedKeys ?? []);
+    const [internalExpandedKeys, setInternalExpandedKeys] = useState(initialExpanded);
+    const isControlled = void 0 !== expandedKeysProp;
+    const expandedKeys = isControlled ? expandedKeysProp : internalExpandedKeys;
+    const handleExpandedChange = useCallback((keys)=>{
+        if (onExpandedChange) onExpandedChange(keys);
+        if (!isControlled) setInternalExpandedKeys(keys);
+    }, [
+        isControlled,
+        onExpandedChange
+    ]);
+    const requestExpand = useCallback((keys)=>{
+        if (!keys.length) return;
+        if ('all' === expandedKeys) return;
+        const next = new Set(expandedKeys);
+        keys.forEach((k)=>{
+            next.add(k);
+        });
+        handleExpandedChange(next);
+    }, [
+        expandedKeys,
+        handleExpandedChange
+    ]);
+    const handleSelectionChange = useCallback((keys)=>{
+        if ('all' === keys) return;
+        onSelectionChange?.(keys);
+    }, [
+        onSelectionChange
+    ]);
+    const ctx = useMemo(()=>({
+            requestExpand
+        }), [
+        requestExpand
+    ]);
+    return /*#__PURE__*/ jsx(TreeContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/ jsx(TreeContainer, {
+            selectionMode: "single",
+            disallowEmptySelection: true,
+            backgroundColor: backgroundColor,
+            expandedKeys: expandedKeys,
+            onExpandedChange: handleExpandedChange,
+            selectedKeys: selectedKeys,
+            onSelectionChange: handleSelectionChange,
+            ...props,
+            children: props.children
+        })
+    });
+};
+Tree_Tree.Item = TreeItem;
+const TreeContainer = styled(Tree)(({ theme: { menu }, width, height, backgroundColor })=>({
+        display: 'flex',
+        flexFlow: 'column',
+        overflowY: 'auto',
+        backgroundColor: backgroundColor || menu.background,
+        padding: '8px 0',
+        width: width || '100%',
+        height
+    }), paddingProps);
+const components_Tree_Tree = Tree_Tree;
+export { components_Tree_Tree as default };

package/build/components/Tree/TreeContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const TreeContext = createContext({});
+export { TreeContext };

package/build/components/Tree/TreeItem.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import { TreeItem, TreeItemContent } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import Icon from "../Icon/index.js";
+import AriaButton from "../Inputs/helpers/AriaButton.js";
+import { TreeContext } from "./TreeContext.js";
+const Item = ({ children, title, id, iconLeft, iconRight, expandOnSelect, indent, content, ...props })=>{
+    const { requestExpand } = useContext(TreeContext);
+    return /*#__PURE__*/ jsxs(TreeItemContainer, {
+        id: id || title,
+        textValue: title,
+        indent: indent,
+        ...expandOnSelect && children ? {
+            onPress: ()=>{
+                requestExpand?.([
+                    id || title
+                ]);
+            }
+        } : {},
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(Content, {
+                children: [
+                    iconLeft && getIcon(iconLeft),
+                    title,
+                    content,
+                    iconRight && getIcon(iconRight),
+                    children && /*#__PURE__*/ jsx(AriaButton, {
+                        slot: "chevron",
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "chevron-right"
+                        })
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+};
+const Content = (props)=>/*#__PURE__*/ jsx(TreeItemContent, {
+        ...props,
+        children: props.children
+    });
+const TreeItemContainer = styled(TreeItem)(({ theme: { accent, font, menuItem }, indent = 1 })=>({
+        userSelect: 'none',
+        border: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        color: menuItem.color.inactive,
+        backgroundColor: menuItem.background.inactive,
+        borderLeft: '4px solid transparent',
+        cursor: 'pointer',
+        fontSize: font.size.lg,
+        paddingLeft: `calc(var(--tree-item-level) * ${16 * indent}px)`,
+        paddingRight: 8,
+        minHeight: 40,
+        '&[data-selected]': {
+            backgroundColor: menuItem.background.active,
+            color: menuItem.color.active,
+            borderLeftColor: menuItem.borderColor
+        },
+        '&[data-disabled]': {
+            color: menuItem.color.inactive,
+            backgroundColor: menuItem.background.inactive,
+            cursor: 'not-allowed'
+        },
+        '&[data-hovered]': {
+            backgroundColor: menuItem.background.hover,
+            color: menuItem.color.hover
+        },
+        '&:focus-visible': {
+            outline: `${accent} solid 1px`,
+            outlineOffset: -1
+        },
+        '& > div > button[slot="chevron"]': {
+            marginLeft: 'auto',
+            transition: 'transform 0.2s ease-in-out'
+        },
+        '&[data-expanded] > div > button[slot="chevron"]': {
+            transform: 'rotate(90deg)'
+        },
+        '&[data-level="2"]': {
+            fontSize: font.size.md
+        },
+        '&[data-level="3"]': {
+            fontSize: font.size.sm
+        }
+    }));
+const Tree_TreeItem = Item;
+export { Tree_TreeItem as default };

package/build/components/Tree/index.js

@@ -0,0 +1,2 @@
+import Tree from "./Tree.js";
+export { Tree as default };

package/build/components/UnstyledButton.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "react-aria-components";
+const UnstyledButton_UnstyledButton = ({ children, ...props })=>/*#__PURE__*/ jsx(Button, {
+        ...props,
+        children: children
+    });
+const UnstyledButton = UnstyledButton_UnstyledButton;
+export { UnstyledButton as default };