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

package/build/components/ListHelpers/GridListSection.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GridListSection } from "react-aria-components";
+import GridListHeader from "./GridListHeader.js";
+const GridSection = ({ id, title, children })=>/*#__PURE__*/ jsxs(GridListSection, {
+        id: id,
+        children: [
+            title && /*#__PURE__*/ jsx(GridListHeader, {
+                children: title
+            }),
+            children
+        ]
+    });
+const ListHelpers_GridListSection = GridSection;
+export { ListHelpers_GridListSection as default };

package/build/components/ListHelpers/ItemHeaderBody.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "react-aria-components";
+const ItemHeaderBody_ItemHeaderBody = ({ header, body, inline, disabled, isGridItem })=>/*#__PURE__*/ jsxs(HeaderBodyContainer, {
+        inline: inline,
+        children: [
+            /*#__PURE__*/ jsx(ItemHeader, {
+                slot: isGridItem ? void 0 : 'label',
+                disabled: disabled,
+                children: header
+            }),
+            /*#__PURE__*/ jsx(ItemSubtext, {
+                slot: "description",
+                disabled: disabled,
+                children: body
+            })
+        ]
+    });
+const HeaderBodyContainer = styled.div(({ inline })=>({
+        display: 'flex',
+        flexDirection: inline ? 'row' : 'column',
+        alignItems: inline ? 'center' : void 0,
+        gap: inline ? 8 : void 0
+    }));
+const ItemHeader = styled(Text)(({ theme, disabled })=>({
+        fontSize: theme.font.size.md,
+        color: disabled ? theme.scale4 : theme.scale10,
+        cursor: disabled ? 'inherit' : void 0
+    }));
+const ItemSubtext = styled(Text)(({ theme, disabled })=>({
+        fontSize: theme.font.size.sm,
+        color: disabled ? theme.scale4 : theme.scale6,
+        cursor: disabled ? 'inherit' : void 0
+    }));
+const ItemHeaderBody = ItemHeaderBody_ItemHeaderBody;
+export { ItemHeaderBody as default };

package/build/components/ListHelpers/ListHeader.js

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Header } from "react-aria-components";
+const ListHeader = styled(Header)(({ theme })=>({
+        backgroundColor: theme.scale0,
+        padding: '0 16px',
+        color: theme.scale6,
+        fontWeight: theme.font.weight.medium,
+        pointerEvents: 'none',
+        '&:hover': {
+            backgroundColor: theme.scale0
+        }
+    }));
+const ListHelpers_ListHeader = ListHeader;
+export { ListHelpers_ListHeader as default };

package/build/components/ListHelpers/ListItemStyles.js

@@ -0,0 +1,52 @@
+import isPropAllowed from "../helpers/isPropAllowed.js";
+const preventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'selected',
+            'noSelect',
+            'contentPosition',
+            'color',
+            'accented'
+        ])
+};
+const baseStyles = ({ theme: { optionItem, scale4 }, color, accented, selected, disabled, noSelect = false })=>{
+    const textColor = accented ? optionItem.color.accent : optionItem.color.inactive;
+    return {
+        border: 'none',
+        padding: '4px 16px',
+        display: 'flex',
+        alignItems: 'center',
+        userSelect: 'none',
+        position: 'relative',
+        color: disabled ? scale4 : color || textColor,
+        cursor: disabled || noSelect ? 'inherit' : 'pointer',
+        pointerEvents: disabled || noSelect ? 'none' : 'auto',
+        backgroundColor: !noSelect && selected ? optionItem.background.active : optionItem.background.inactive,
+        '&:hover, &[data-hovered], &[data-focused]': {
+            backgroundColor: disabled || noSelect ? optionItem.background.inactive : optionItem.background.hover
+        },
+        '&:focus': {
+            outline: 'none',
+            backgroundColor: optionItem.background.hover
+        },
+        '&[data-selected]': {
+            backgroundColor: optionItem.background.active
+        },
+        '&[data-disabled="true"], &[data-disabled="true"]:hover': {
+            color: scale4,
+            backgroundColor: optionItem.background.inactive,
+            cursor: 'inherit'
+        }
+    };
+};
+const positionStyles = ({ contentPosition })=>{
+    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
+    return {
+        justifyContent: position
+    };
+};
+const listItemStyles = [
+    baseStyles,
+    positionStyles
+];
+const ListItemStyles = listItemStyles;
+export { ListItemStyles as default, preventProps };

package/build/components/ListHelpers/ListRootStyles.js

@@ -0,0 +1,14 @@
+import isPropAllowed from "../helpers/isPropAllowed.js";
+const preventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'textOnly'
+        ])
+};
+const baseStyles = ({ width, textOnly })=>({
+        width: textOnly ? 'max-content' : width || '100%'
+    });
+const rootStyles = [
+    baseStyles
+];
+const ListRootStyles = rootStyles;
+export { ListRootStyles as default, preventProps };

package/build/components/ListHelpers/ListSection.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ListBoxSection } from "react-aria-components";
+import ListHeader from "./ListHeader.js";
+const ListSection_ListSection = ({ id, title, children })=>/*#__PURE__*/ jsxs(ListBoxSection, {
+        id: id,
+        children: [
+            title && /*#__PURE__*/ jsx(ListHeader, {
+                children: title
+            }),
+            children
+        ]
+    });
+const ListSection = ListSection_ListSection;
+export { ListSection as default };

package/build/components/ListHelpers/ListStyles.js

@@ -0,0 +1,29 @@
+import isPropAllowed from "../helpers/isPropAllowed.js";
+const preventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'zIndex',
+            'autoWidth'
+        ])
+};
+const baseStyles = ({ theme, width, zIndex, autoWidth, readOnly, background })=>({
+        background: background || theme.options.background,
+        backdropFilter: theme.options.backdropFilter,
+        borderRadius: 4,
+        boxShadow: theme.elevation3,
+        boxSizing: 'border-box',
+        fontFamily: theme.font.family.default,
+        fontSize: theme.font.size.md,
+        overflowY: 'auto',
+        width: width || (autoWidth ? 'max-content' : 'var(--trigger-width)'),
+        maxHeight: 'inherit',
+        zIndex,
+        outline: 'none',
+        '& > div': {
+            pointerEvents: readOnly ? 'none' : void 0
+        }
+    });
+const listStyles = [
+    baseStyles
+];
+const ListStyles = listStyles;
+export { ListStyles as default, preventProps };

package/build/components/Menu.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import react, { cloneElement, useState } from "react";
+import react_keyed_flatten_children from "react-keyed-flatten-children";
+import { paddingProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+const Menu = ({ vertical, backgroundColor, children, ...rest })=>{
+    const getChildren = ()=>{
+        if (children) return react_keyed_flatten_children(children).map((child)=>{
+            if (child) return /*#__PURE__*/ cloneElement(child, {
+                vertical,
+                backgroundColor
+            });
+            return null;
+        });
+        return null;
+    };
+    return /*#__PURE__*/ jsx(MenuComponent, {
+        vertical: vertical,
+        backgroundColor: backgroundColor,
+        role: "menu",
+        ...rest,
+        children: getChildren()
+    });
+};
+const Item = ({ vertical, selected, disabled, contentPosition, onClick, id, children, indent = 1, ...rest })=>/*#__PURE__*/ jsx(MenuItem, {
+        vertical: vertical,
+        selected: selected,
+        disabled: disabled,
+        contentPosition: contentPosition,
+        onClick: onClick,
+        id: id,
+        role: "menuitem",
+        indent: indent,
+        ...rest,
+        children: children
+    });
+Item.displayName = 'Menu.Item';
+const Group = ({ label, defaultOpen, vertical, selected, disabled, contentPosition, onClick, id, children, indent = 1, backgroundColor, className })=>{
+    const [isOpen, setIsOpen] = useState(defaultOpen || selected);
+    const getChildren = (_children)=>{
+        const childItems = react_keyed_flatten_children(_children);
+        return childItems.map((child)=>{
+            if (/*#__PURE__*/ react.isValidElement(child)) {
+                const childEl = child;
+                if (childEl.props.selected && !isOpen) setIsOpen(true);
+                if (Array.isArray(childEl.props.children)) getChildren(childEl.props.children);
+                return /*#__PURE__*/ cloneElement(child, {
+                    vertical,
+                    indent: indent + 1,
+                    backgroundColor
+                });
+            }
+            return null;
+        });
+    };
+    const subMenuItems = getChildren(children);
+    const toggle = ()=>setIsOpen((prevOpen)=>!prevOpen);
+    const handleToggleClick = (event)=>{
+        event.stopPropagation();
+        toggle();
+    };
+    const handleClick = (event)=>{
+        if (onClick) {
+            onClick(event);
+            if (!isOpen) toggle();
+        } else toggle();
+    };
+    return /*#__PURE__*/ jsxs(MenuGroup, {
+        backgroundColor: backgroundColor,
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(MenuItem, {
+                vertical: vertical,
+                selected: selected || false,
+                disabled: disabled,
+                contentPosition: contentPosition,
+                onClick: handleClick,
+                id: id,
+                role: "menuitem",
+                indent: indent,
+                children: [
+                    label,
+                    /*#__PURE__*/ jsx(ToggleContainer, {
+                        onClick: handleToggleClick,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: isOpen ? 'chevron-up' : 'chevron-down',
+                            pointer: true
+                        })
+                    })
+                ]
+            }),
+            isOpen && subMenuItems
+        ]
+    });
+};
+Group.displayName = 'Menu.Group';
+const MenuComponent = styled.div(({ theme: { menu }, vertical, backgroundColor, width, height })=>({
+        display: 'flex',
+        flexFlow: vertical ? 'column' : 'row',
+        overflowY: vertical ? 'auto' : void 0,
+        backgroundColor: backgroundColor || menu.background,
+        padding: vertical ? '16px 0' : '0 16px',
+        width,
+        height
+    }), ({ theme: { defaultBorder }, border, borderTop, borderBottom, borderLeft, borderRight, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius })=>({
+        border: border ? defaultBorder : void 0,
+        borderTop: borderTop ? defaultBorder : void 0,
+        borderBottom: borderBottom ? defaultBorder : void 0,
+        borderLeft: borderLeft ? defaultBorder : void 0,
+        borderRight: borderRight ? defaultBorder : void 0,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius
+    }), paddingProps);
+const MenuItem = styled.button({
+    userSelect: 'none',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center'
+}, ({ theme: { accent, font, menuItem }, selected, vertical, disabled, indent = 1 })=>({
+        color: selected ? menuItem.color.active : menuItem.color.inactive,
+        backgroundColor: selected ? menuItem.background.active : menuItem.background.inactive,
+        borderLeft: vertical ? '4px solid transparent' : void 0,
+        borderLeftColor: vertical && selected ? menuItem.borderColor : void 0,
+        borderBottom: vertical ? void 0 : '4px solid transparent',
+        borderBottomColor: !vertical && selected ? menuItem.borderColor : void 0,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontSize: font.size.lg,
+        padding: vertical ? `0 0 0 ${32 * indent}px` : '0 16px',
+        minHeight: 40,
+        '&:hover': {
+            backgroundColor: menuItem.background.hover,
+            color: menuItem.color.hover
+        },
+        '&:focus-visible': {
+            outline: `${accent} solid 1px`,
+            outlineOffset: -1
+        }
+    }), ({ contentPosition })=>{
+    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
+    return {
+        justifyContent: position
+    };
+});
+const MenuGroup = styled.div(({ theme, backgroundColor })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: backgroundColor || theme.menu.background
+    }));
+const ToggleContainer = styled.div({
+    marginLeft: 'auto',
+    marginRight: 8
+});
+Menu.Item = Item;
+Menu.Group = Group;
+const components_Menu = Menu;
+export { Group, Item, components_Menu as default };

package/build/components/Message.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import Button from "./Button/index.js";
+import { marginProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+const getByType = (type, theme, solid)=>{
+    const { color, toast } = theme;
+    switch(type){
+        case 'info':
+            return {
+                iconName: 'info',
+                borderColor: color.brand,
+                backgroundColor: solid ? toast.background.info : color.brandTint2
+            };
+        case 'error':
+            return {
+                iconName: 'warning',
+                borderColor: color.error,
+                backgroundColor: solid ? toast.background.error : color.errorTint2
+            };
+        case 'success':
+            return {
+                iconName: 'check-circle',
+                borderColor: color.success,
+                backgroundColor: solid ? toast.background.success : color.successTint2
+            };
+        case 'warning':
+            return {
+                iconName: 'warning',
+                borderColor: color.warning,
+                backgroundColor: solid ? toast.background.warning : color.warningTint2
+            };
+        default:
+            return {
+                iconName: 'info',
+                borderColor: theme.scale8,
+                backgroundColor: solid ? toast.background.default : theme.scale0
+            };
+    }
+};
+const Message = ({ type, content, closeIcon, onClose, width, children, solid, ...rest })=>{
+    const theme = useTheme();
+    const { iconName, borderColor, backgroundColor } = getByType(type || '', theme, solid);
+    return /*#__PURE__*/ jsxs(MessageContainer, {
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+        width: width,
+        showingClose: closeIcon,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: iconName,
+                color: borderColor
+            }),
+            /*#__PURE__*/ jsx(Content, {
+                children: content || children
+            }),
+            closeIcon && /*#__PURE__*/ jsx(Button, {
+                small: true,
+                subtle: true,
+                secondary: true,
+                icon: "close",
+                onClick: onClose,
+                marginLeft: "auto"
+            })
+        ]
+    });
+};
+const MessageHeader = styled.div(({ theme })=>({
+        fontWeight: theme.font.weight.medium
+    }));
+MessageHeader.displayName = 'Message.Header';
+const MessageBody = styled.div(({ theme })=>({
+        fontWeight: theme.font.weight.default
+    }));
+MessageBody.displayName = 'Message.Body';
+Message.Header = MessageHeader;
+Message.Body = MessageBody;
+const MessageContainer = styled.div(({ theme, borderColor, backgroundColor, width })=>({
+        width,
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.size.sm,
+        position: 'relative',
+        padding: `${theme.size.sm}px ${theme.size.md}px`,
+        border: '1px solid',
+        borderColor,
+        borderRadius: theme.size.xs,
+        backgroundColor,
+        color: theme.scale10,
+        fontSize: theme.font.size.sm,
+        '& a': {
+            textDecoration: 'none',
+            color: theme.accent,
+            '&:hover': {
+                textDecoration: 'underline'
+            }
+        }
+    }), ({ theme, showingClose })=>({
+        paddingRight: showingClose ? theme.size.sm : void 0
+    }), marginProps);
+const Content = styled.div({
+    width: '100%'
+});
+const components_Message = Message;
+export { MessageBody, MessageHeader, components_Message as default };

package/build/components/MessageHr.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+const MessageHr = ({ text, color, style, ...rest })=>/*#__PURE__*/ jsxs(HrContainer, {
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Bar, {}),
+            /*#__PURE__*/ jsx(Text, {
+                color: color,
+                style: style,
+                children: text
+            }),
+            /*#__PURE__*/ jsx(Bar, {})
+        ]
+    });
+const Text = styled.div(({ color })=>({
+        fontSize: 12,
+        padding: '0 5px',
+        color
+    }));
+const Bar = styled.div(({ theme })=>({
+        height: 1,
+        backgroundColor: theme.scale4,
+        width: '100%'
+    }));
+const HrContainer = styled.div({
+    display: 'grid',
+    gridTemplateColumns: '1fr auto 1fr',
+    alignItems: 'center',
+    padding: '10px 0'
+});
+const components_MessageHr = MessageHr;
+export { components_MessageHr as default };