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

package/build/components/Button/Button.js

@@ -0,0 +1,258 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { darken, lighten } from "polished";
+import { useState } from "react";
+import { Button } from "react-aria-components";
+import DropdownMenu from "../DropdownMenu.js";
+import { marginProps } from "../helpers/styledProps.js";
+import Icon from "../Icon/index.js";
+import ButtonLoader from "./ButtonLoader.js";
+import Group from "./Group.js";
+const Button_Button = ({ content, children, dropdown, options, ref, ...rest })=>{
+    const text = content || children;
+    if (dropdown && options) return /*#__PURE__*/ jsx(DropdownButton, {
+        ref: ref,
+        options: options,
+        ...rest,
+        children: text
+    });
+    return /*#__PURE__*/ jsx(BasicButton, {
+        ref: ref,
+        ...rest,
+        children: text
+    });
+};
+const BasicButton = ({ children, onClick, onPress, icon, iconPosition, iconColor, joined, size, small, tiny, large, loading, collapse, backgroundColor, color, type, animation, iconAnimation, disabled, ref, ...props })=>{
+    const { button } = useTheme();
+    const iconOnly = !!(icon && (!children || collapse));
+    const iconRight = 'right' === iconPosition;
+    let buttonSize = size || 'medium';
+    if (small) buttonSize = 'small';
+    else if (large) buttonSize = 'large';
+    else if (tiny) buttonSize = 'tiny';
+    const buttonStyles = button[buttonSize];
+    const { iconSize } = buttonStyles;
+    const hideText = collapse && icon;
+    return /*#__PURE__*/ jsxs(ButtonEl, {
+        ...props,
+        ref: ref,
+        isDisabled: disabled,
+        type: type || 'button',
+        size: buttonSize,
+        iconOnly: iconOnly,
+        iconRight: iconRight,
+        joined: joined,
+        onPress: onPress || onClick,
+        loading: loading,
+        color: color,
+        backgroundColor: backgroundColor,
+        animation: animation,
+        children: [
+            icon ? /*#__PURE__*/ jsx(Icon, {
+                size: iconSize,
+                name: icon,
+                marginRight: iconOnly || iconRight ? 0 : 4,
+                marginLeft: !iconOnly && iconRight ? 4 : 0,
+                color: iconColor,
+                animation: iconAnimation
+            }) : null,
+            !hideText && /*#__PURE__*/ jsx(Inner, {
+                children: children
+            }),
+            loading && /*#__PURE__*/ jsx(ButtonLoader, {
+                size: iconSize
+            })
+        ]
+    });
+};
+const DropdownButton = ({ children, options, onClick, onPress, afterShow, afterHide, secondary, negative, positive, caution, outline, subtle, link, size, small, tiny, large, disabled, buttonDisabled, optionsDisabled, loading, direction, collapse, width, hideDivider, gap, ref, ...props })=>{
+    const [optionsOpen, setOptionsOpen] = useState(false);
+    const buttonStyleProps = {
+        secondary,
+        negative,
+        positive,
+        caution,
+        outline,
+        subtle,
+        link,
+        size,
+        small,
+        tiny,
+        large
+    };
+    const handleMainClick = (event)=>{
+        const clickHandler = onPress || onClick;
+        if (clickHandler) clickHandler(event);
+    };
+    const handleShow = ()=>{
+        if (afterShow) afterShow();
+        setOptionsOpen(true);
+    };
+    const handleHide = ()=>{
+        if (afterHide) afterHide();
+        setOptionsOpen(false);
+    };
+    return /*#__PURE__*/ jsx(DropdownContainer, {
+        children: /*#__PURE__*/ jsxs(Group, {
+            width: collapse ? void 0 : width,
+            children: [
+                /*#__PURE__*/ jsx(BasicButton, {
+                    ...buttonStyleProps,
+                    ...props,
+                    ref: ref,
+                    disabled: disabled || buttonDisabled,
+                    width: width && !collapse ? '100%' : void 0,
+                    collapse: collapse,
+                    loading: loading,
+                    onPress: handleMainClick,
+                    hideJoinedBorder: hideDivider,
+                    joinedPadding: gap,
+                    children: children && /*#__PURE__*/ jsx(DropdownButtonChildren, {
+                        children: children
+                    })
+                }),
+                /*#__PURE__*/ jsx(DropdownMenu, {
+                    options: options,
+                    position: `${direction || 'bottom'} right`,
+                    afterShow: handleShow,
+                    afterHide: handleHide,
+                    isTriggerButton: true,
+                    trigger: /*#__PURE__*/ jsx(BasicButton, {
+                        ...buttonStyleProps,
+                        icon: optionsOpen ? 'caret-up' : 'caret-down',
+                        preventPointerEvents: loading,
+                        tabIndex: -1,
+                        joinedPadding: gap,
+                        disabled: disabled || optionsDisabled
+                    })
+                })
+            ]
+        })
+    });
+};
+const ButtonEl = styled(Button)(({ theme: { accent, font, button }, size = 'medium', joined, circle, iconOnly, iconRight, width, height, animation })=>{
+    const isCircle = circle || iconOnly && !joined;
+    const buttonSize = button[size];
+    const buttonWidth = width || 'max-content';
+    const { height: themeHeight, font: fontSize, padding, iconOnlyPadding } = buttonSize;
+    const buttonHeight = height || themeHeight;
+    const paddingAmount = iconOnly || isCircle ? iconOnlyPadding : padding;
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: iconRight ? 'row-reverse' : 'row',
+        fontSize,
+        width: isCircle ? buttonHeight : buttonWidth,
+        height: buttonHeight,
+        fontFamily: font.family.default,
+        fontWeight: font.weight.bold,
+        borderRadius: isCircle ? '50%' : 30,
+        cursor: 'pointer',
+        outline: 'none',
+        outlineOffset: -1,
+        padding: `0px ${paddingAmount}px`,
+        position: 'relative',
+        animation,
+        '&:focus-visible': {
+            outline: `${accent} solid 1px`
+        }
+    };
+}, ({ theme, joined, hideJoinedBorder, joinedPadding, iconOnly, outline, negative, positive, caution, secondary, isDisabled, subtle, link })=>{
+    const { button, size } = theme;
+    let colors = button.primary;
+    if (subtle) colors = button.subtle;
+    else if (link) colors = button.link;
+    else if (isDisabled) colors = button.disabled;
+    else if (negative) colors = button.negative;
+    else if (positive) colors = button.positive;
+    else if (caution) colors = button.caution;
+    else if (secondary) colors = button.secondary;
+    const buttonBgColor = outline ? colors.outlineBackground : colors.background;
+    let buttonTextColor = outline ? colors.outlineColor : colors.color;
+    if (link || subtle) {
+        let textColors = button.subtle;
+        if (link) textColors = button.link;
+        if (isDisabled) buttonTextColor = button.disabled.color;
+        else if (negative) buttonTextColor = textColors.negativeColor;
+        else if (positive) buttonTextColor = textColors.positiveColor;
+        else if (caution) buttonTextColor = textColors.cautionColor;
+        else if (secondary) buttonTextColor = textColors.secondaryColor;
+    }
+    const alterLeft = 'left' === joined || 'middle' === joined;
+    const alterRight = 'right' === joined || 'middle' === joined;
+    const defaultPaddingAmount = iconOnly ? size.xs : size.sm;
+    const paddingAmount = joinedPadding || defaultPaddingAmount;
+    return {
+        background: buttonBgColor.default,
+        color: buttonTextColor.default,
+        border: outline && !link ? '1px solid' : 'none',
+        borderColor: colors.border.default,
+        '&:hover': {
+            background: buttonBgColor.hover,
+            color: buttonTextColor.hover,
+            borderColor: outline && !isDisabled ? colors.border.hover : void 0
+        },
+        '&:active': {
+            background: buttonBgColor.active,
+            color: buttonTextColor.active,
+            borderColor: outline && !isDisabled ? colors.border.active : void 0
+        },
+        '&:disabled': {
+            background: subtle ? 'transparent' : void 0,
+            cursor: 'not-allowed'
+        },
+        borderTopLeftRadius: alterLeft ? 0 : void 0,
+        borderBottomLeftRadius: alterLeft ? 0 : void 0,
+        borderTopRightRadius: alterRight ? 0 : void 0,
+        borderBottomRightRadius: alterRight ? 0 : void 0,
+        paddingLeft: alterLeft ? paddingAmount : void 0,
+        paddingRight: alterRight ? paddingAmount : void 0,
+        borderRight: alterRight && !hideJoinedBorder ? `1px solid ${outline ? colors.border.default : colors.divider}` : void 0,
+        borderLeft: alterLeft && !hideJoinedBorder ? 'none' : void 0
+    };
+}, ({ link })=>({
+        height: link ? 'max-content' : void 0,
+        width: link ? 'max-content' : void 0,
+        padding: link ? 0 : void 0,
+        outlineOffset: link ? 2 : void 0
+    }), ({ loading, preventPointerEvents })=>({
+        pointerEvents: loading || preventPointerEvents ? 'none' : void 0,
+        '& > *': {
+            visibility: loading ? 'hidden' : void 0
+        },
+        '& > .button-loader': {
+            visibility: loading ? 'visible' : void 0
+        }
+    }), ({ theme: { name }, backgroundColor, color, disabled })=>{
+    const adjustBgColor = 'dark' === name ? darken : lighten;
+    const adjustTextColor = 'dark' === name ? lighten : darken;
+    return !disabled && (color || backgroundColor) ? {
+        background: backgroundColor,
+        color,
+        '&:hover': {
+            background: backgroundColor ? adjustBgColor(0.05, backgroundColor) : void 0,
+            color: color ? adjustTextColor(0.05, color) : void 0
+        },
+        '&:active': {
+            background: backgroundColor ? adjustBgColor(0.1, backgroundColor) : void 0,
+            color: color ? adjustTextColor(0.1, color) : void 0
+        }
+    } : {};
+}, marginProps);
+const DropdownContainer = styled.div({
+    display: 'inline-flex',
+    flexDirection: 'column',
+    position: 'relative'
+});
+const DropdownButtonChildren = styled.div({
+    marginRight: 8
+});
+const Inner = styled.span({
+    pointerEvents: 'none'
+});
+const components_Button_Button = Object.assign(Button_Button, {
+    Group: Group
+});
+export { components_Button_Button as default };

package/build/components/Button/ButtonLoader.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import Spinner from "../Spinner.js";
+const ButtonLoader = ({ size })=>/*#__PURE__*/ jsx(LoadingContainer, {
+        className: "button-loader",
+        children: /*#__PURE__*/ jsx(Spinner, {
+            size: size
+        })
+    });
+const LoadingContainer = styled.div({
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%,-50%)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+});
+const Button_ButtonLoader = ButtonLoader;
+export { Button_ButtonLoader as default };

package/build/components/Button/Group.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Children, cloneElement } from "react";
+import { marginProps } from "../helpers/styledProps.js";
+const Group = ({ children, disabled, outline, size, tiny, small, large, secondary, negative, positive, caution, collapse, ...props })=>{
+    if (children) {
+        const length = Children.count(children);
+        return /*#__PURE__*/ jsx(GroupContainer, {
+            ...props,
+            children: Children.map(children, (child, i)=>{
+                let joined;
+                if (length > 1) joined = 0 === i ? 'right' : i === length - 1 ? 'left' : 'middle';
+                if (child) {
+                    let element = child;
+                    if ('trigger' in child.props) element = child.props.trigger;
+                    const childEl = element;
+                    const isTiny = tiny || childEl.props.tiny;
+                    const isSmall = small || childEl.props.small;
+                    const isLarge = large || childEl.props.large;
+                    const buttonSize = size || childEl.props.size;
+                    const isDisabled = disabled || childEl.props.disabled;
+                    const isOutline = outline || childEl.props.outline;
+                    const isSecondary = secondary || childEl.props.secondary;
+                    const isNegative = negative || childEl.props.negative;
+                    const isPositive = positive || childEl.props.positive;
+                    const isCaution = caution || childEl.props.caution;
+                    const isCollapse = collapse || childEl.props.collapse;
+                    const clonedButton = /*#__PURE__*/ cloneElement(element, {
+                        joined,
+                        size: buttonSize,
+                        tiny: isTiny,
+                        small: isSmall,
+                        large: isLarge,
+                        disabled: isDisabled,
+                        outline: isOutline,
+                        secondary: isSecondary,
+                        negative: isNegative,
+                        positive: isPositive,
+                        caution: isCaution,
+                        collapse: isCollapse
+                    });
+                    if ('trigger' in child.props) return /*#__PURE__*/ cloneElement(child, {
+                        trigger: clonedButton
+                    });
+                    return clonedButton;
+                }
+                return null;
+            })
+        });
+    }
+    return null;
+};
+const GroupContainer = styled.div(({ width })=>({
+        display: 'inline-flex',
+        width
+    }), marginProps);
+const Button_Group = Group;
+export { Button_Group as default };

package/build/components/Button/index.js

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

package/build/components/Calendar.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { CalendarDate } from "@internationalized/date";
+import { useRef, useState } from "react";
+import { Calendar } from "react-aria-components";
+import CalendarContainerStyles from "./CalendarParts/CalendarContainerStyles.js";
+import CalendarContent from "./CalendarParts/CalendarContent.js";
+import CalendarHeader from "./CalendarParts/CalendarHeader.js";
+import useMinMax from "./CalendarParts/useMinMax.js";
+import { getDateFromObj, getNow, getObjFromDate } from "./CalendarParts/utils.js";
+const now = getNow();
+const Calendar_Calendar = ({ date, onChange, preventPast, preventFuture, noShadow, ...props })=>{
+    const { current: initialDate } = useRef(date ? getObjFromDate(date) : now);
+    const [selectedDate, setSelectedDate] = useState(initialDate);
+    const [focusedDate, setFocusedDate] = useState(initialDate);
+    const { min, max } = useMinMax({
+        past: preventPast,
+        future: preventFuture
+    });
+    const handleDateChange = (val)=>{
+        const { year, month, day } = val;
+        const selected = new CalendarDate(year, month, day);
+        setSelectedDate(selected);
+        const newDate = getDateFromObj(val);
+        if (onChange) onChange(newDate);
+    };
+    return /*#__PURE__*/ jsxs(CalendarContainer, {
+        value: selectedDate,
+        onChange: handleDateChange,
+        minValue: min,
+        maxValue: max,
+        noShadow: noShadow,
+        focusedValue: focusedDate,
+        onFocusChange: setFocusedDate,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(CalendarHeader, {
+                date: focusedDate,
+                setDate: setFocusedDate
+            }),
+            /*#__PURE__*/ jsx(CalendarContent, {
+                initialDate: initialDate
+            })
+        ]
+    });
+};
+const CalendarContainer = styled(Calendar)(CalendarContainerStyles);
+const components_Calendar = Calendar_Calendar;
+export { components_Calendar as default };

package/build/components/CalendarParts/CalendarContainerStyles.js

@@ -0,0 +1,15 @@
+const baseStyles = ({ theme, noShadow })=>({
+        display: 'inline-flex',
+        flexDirection: 'column',
+        borderRadius: 4,
+        width: 'min-content',
+        padding: 8,
+        backgroundColor: theme.calendar.background.container,
+        boxShadow: noShadow ? void 0 : theme.elevation3,
+        userSelect: 'none'
+    });
+const calendarContainerStyles = [
+    baseStyles
+];
+const CalendarContainerStyles = calendarContainerStyles;
+export { CalendarContainerStyles as default };

package/build/components/CalendarParts/CalendarContent.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { isSameDay } from "@internationalized/date";
+import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell } from "react-aria-components";
+const DATE_SIZE = 28;
+const CalendarContent = ({ range, initialDate })=>/*#__PURE__*/ jsxs(CalendarGrid, {
+        children: [
+            /*#__PURE__*/ jsx(CalendarGridHeader, {
+                children: (day)=>/*#__PURE__*/ jsx(Day, {
+                        children: day
+                    })
+            }),
+            /*#__PURE__*/ jsx(Dates, {
+                range: range,
+                children: (calDate)=>/*#__PURE__*/ jsx(DateItem, {
+                        date: calDate,
+                        current: initialDate ? isSameDay(calDate, initialDate) : void 0,
+                        range: range
+                    })
+            })
+        ]
+    });
+const Dates = styled(CalendarGridBody)({
+    '& > tr > td': {
+        padding: '2px 4px'
+    },
+    '& > tr > td:first-of-type': {
+        paddingLeft: 0
+    },
+    '& > tr > td:last-of-type': {
+        paddingRight: 0
+    },
+    '& > tr:first-of-type > td': {
+        paddingTop: 0
+    },
+    '& > tr:last-of-type > td': {
+        paddingBottom: 0
+    },
+    '& > tr > td[aria-disabled]': {
+        cursor: 'default'
+    },
+    '& > tr > td[aria-selected]': {
+        position: 'relative'
+    }
+}, ({ theme: { calendar, color }, range })=>range && {
+        '& > tr > td[aria-selected]::after': {
+            background: calendar.background.activeRange,
+            content: '""',
+            height: DATE_SIZE,
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            zIndex: 0
+        },
+        '& > tr > td[aria-selected][aria-invalid]::after': {
+            backgroundColor: color.errorTint2
+        },
+        '& > tr > td[aria-selected]:has(div[data-selection-start])::after': {
+            left: '50%'
+        },
+        '& > tr > td[aria-selected]:has(div[data-selection-end])::after': {
+            right: '50%'
+        },
+        '& > tr:first-of-type > td[aria-selected]::after': {
+            transform: 'translateY(calc(-50% - 1px))'
+        },
+        '& > tr:last-of-type > td[aria-selected]::after': {
+            transform: 'translateY(calc(-50% + 1px))'
+        }
+    });
+const DateItem = styled(CalendarCell)(({ theme: { accent, font, calendar, color }, range = false })=>({
+        width: DATE_SIZE,
+        height: DATE_SIZE,
+        lineHeight: `${DATE_SIZE}px`,
+        textAlign: 'center',
+        borderRadius: '50%',
+        cursor: 'pointer',
+        border: 'none',
+        fontSize: font.size.md,
+        fontWeight: font.weight.default,
+        color: calendar.color.default,
+        outline: 'none',
+        outlineOffset: -1,
+        position: 'relative',
+        zIndex: 1,
+        '&[data-disabled]': {
+            color: calendar.color.disabled,
+            cursor: 'default',
+            '&:hover': {
+                backgroundColor: 'transparent'
+            }
+        },
+        '&[data-hovered]': {
+            backgroundColor: calendar.background.hover
+        },
+        '&[data-focus-visible]': {
+            outline: `${accent} solid 1px`
+        },
+        '&[data-outside-month]': {
+            display: 'none'
+        },
+        '&[data-selected]': {
+            backgroundColor: calendar.background.active,
+            color: calendar.color.active,
+            '&[data-hovered]': {
+                backgroundColor: calendar.background.activeHover
+            },
+            '&[data-focus-visible]': {
+                outline: `${accent} solid 1px`
+            }
+        },
+        '&[data-selected]:not([data-selection-start]):not([data-selection-end])': {
+            backgroundColor: range ? 'transparent' : void 0,
+            '&[data-hovered]:not([data-invalid])': {
+                backgroundColor: calendar.background.activeHover
+            }
+        },
+        '&[data-selected][data-invalid]': {
+            backgroundColor: color.error,
+            '&[data-hovered]': {
+                backgroundColor: color.errorShade2
+            }
+        }
+    }), ({ theme: { calendar }, current })=>({
+        color: current ? calendar.color.current : void 0
+    }));
+const Day = styled(CalendarHeaderCell)(({ theme: { font, calendar } })=>({
+        fontSize: font.size.sm,
+        fontWeight: font.weight.medium,
+        color: calendar.color.weekday,
+        textAlign: 'center',
+        paddingBottom: 8,
+        width: 40
+    }));
+const CalendarParts_CalendarContent = CalendarContent;
+export { CalendarParts_CalendarContent as default };