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

package/build/components/OptionHelpers/Container.js

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import isPropAllowed from "../helpers/isPropAllowed.js";
+const contentPreventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'maxHeight',
+            'zIndex',
+            'offsetY',
+            'offsetX',
+            'centerY',
+            'centerX',
+            'optionsPosition'
+        ])
+};
+const Container = styled('div', contentPreventProps)(({ theme, width, maxHeight, zIndex })=>({
+        backgroundColor: theme.options.background,
+        borderRadius: 4,
+        boxShadow: theme.elevation3,
+        boxSizing: 'border-box',
+        fontFamily: theme.font.family.default,
+        fontSize: theme.font.size.md,
+        maxHeight,
+        overflowY: 'auto',
+        width: width || 'max-content',
+        zIndex,
+        '& > span > .menu-arrow': {
+            fill: theme.options.background,
+            filter: 'drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.1))'
+        },
+        '&[data-side="bottom"] > span > .menu-arrow': {
+            filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))'
+        }
+    }));
+const OptionHelpers_Container = Container;
+export { OptionHelpers_Container as default };

package/build/components/OptionHelpers/Item.js

@@ -0,0 +1,59 @@
+import styled from "@emotion/styled";
+import isPropAllowed from "../helpers/isPropAllowed.js";
+const contentPreventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'selected',
+            'noSelect',
+            'contentPosition',
+            'color',
+            'accented',
+            'section'
+        ])
+};
+const Item = styled('div', contentPreventProps)({
+    border: 'none',
+    padding: '4px 16px',
+    display: 'flex',
+    alignItems: 'center',
+    userSelect: 'none',
+    position: 'relative'
+}, ({ theme: { optionItem, scale4 }, color, accented, selected, disabled, noSelect = false })=>{
+    const textColor = accented ? optionItem.color.accent : optionItem.color.inactive;
+    return {
+        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': {
+            backgroundColor: disabled || noSelect ? optionItem.background.inactive : optionItem.background.active
+        },
+        '&:focus': {
+            outline: 'none',
+            backgroundColor: optionItem.background.active
+        },
+        '&[data-highlighted]': {
+            backgroundColor: optionItem.background.active
+        },
+        '&[data-disabled], &[data-disabled]:hover': {
+            color: scale4,
+            backgroundColor: optionItem.background.inactive,
+            cursor: 'inherit'
+        }
+    };
+}, ({ contentPosition })=>{
+    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
+    return {
+        justifyContent: position
+    };
+}, ({ theme, section })=>section && {
+        backgroundColor: theme.scale0,
+        padding: '0 16px',
+        color: theme.scale6,
+        fontWeight: theme.font.weight.medium,
+        pointerEvents: 'none',
+        '&:hover': {
+            backgroundColor: theme.scale0
+        }
+    });
+const OptionHelpers_Item = Item;
+export { OptionHelpers_Item as default };

package/build/components/Pagination.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Fragment, useState } from "react";
+import { chunk, range } from "../utils/index.js";
+import { marginProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+const toNum = (val)=>val ? +val : 0;
+const Pagination_Pagination = ({ onPageNav, page, totalPages, maxVisibleNumbers, width, ...props })=>{
+    const [currentPage, setCurrentPage] = useState(toNum(page) || 1);
+    const [currentChunk, setCurrentChunk] = useState(0);
+    const numbers = range(1, totalPages);
+    const max = toNum(maxVisibleNumbers) || numbers.length;
+    const pages = chunk(numbers, max);
+    const getChunkIndex = (index)=>{
+        for(let i = 0; i < pages.length; i++)if (pages[i].includes(index)) return i;
+        return -1;
+    };
+    const handlePageChange = (newPage)=>{
+        if (newPage >= 1 && newPage <= totalPages) {
+            const index = getChunkIndex(newPage);
+            setCurrentChunk(index);
+            setCurrentPage(newPage);
+            onPageNav(newPage);
+        }
+    };
+    const hasLeftOverflow = 0 !== currentChunk;
+    const hasRightOverflow = currentChunk !== pages.length - 1;
+    return /*#__PURE__*/ jsxs(Controls, {
+        width: width,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(NavControl, {
+                disabled: 1 === currentPage,
+                onClick: ()=>handlePageChange(1),
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "double-arrow-left",
+                    title: "first"
+                })
+            }),
+            /*#__PURE__*/ jsx(NavControl, {
+                disabled: 1 === currentPage,
+                onClick: ()=>handlePageChange(currentPage - 1),
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "chevron-left",
+                    title: "prev"
+                })
+            }),
+            pages[currentChunk].map((pageNumber, i, chunkArray)=>/*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        0 === i && hasLeftOverflow ? /*#__PURE__*/ jsx(Ellipses, {
+                            children: "... "
+                        }) : '',
+                        /*#__PURE__*/ jsx(Page, {
+                            selected: pageNumber === currentPage,
+                            onClick: ()=>handlePageChange(pageNumber),
+                            children: pageNumber
+                        }),
+                        i === chunkArray.length - 1 && hasRightOverflow ? /*#__PURE__*/ jsx(Ellipses, {
+                            children: " ..."
+                        }) : ''
+                    ]
+                }, `pageIndex-${pageNumber}`)),
+            /*#__PURE__*/ jsx(NavControl, {
+                disabled: currentPage === totalPages,
+                onClick: ()=>handlePageChange(currentPage + 1),
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "chevron-right",
+                    title: "next"
+                })
+            }),
+            /*#__PURE__*/ jsx(NavControl, {
+                disabled: currentPage === totalPages,
+                onClick: ()=>handlePageChange(totalPages),
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "double-arrow-right",
+                    title: "last"
+                })
+            })
+        ]
+    });
+};
+const Controls = styled.nav({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    columnGap: 4
+}, ({ width })=>({
+        width: width || 'max-content'
+    }), marginProps);
+const Control = styled.button(({ theme, disabled })=>({
+        border: 'none',
+        borderRadius: theme.size.xs,
+        backgroundColor: 'transparent',
+        '&:hover': {
+            backgroundColor: disabled ? void 0 : theme.scale1,
+            color: disabled ? void 0 : theme.scale10
+        },
+        '&:focus-visible': {
+            outline: `${theme.accent} solid 1px`,
+            outlineOffset: -1
+        }
+    }));
+const NavControl = styled(Control)(({ theme, disabled })=>({
+        color: disabled ? theme.scale4 : theme.scale8,
+        cursor: disabled ? 'default' : 'pointer'
+    }));
+const Page = styled(Control)(({ theme, selected })=>({
+        color: selected ? theme.scale10 : theme.scale6,
+        backgroundColor: selected ? theme.scale0 : void 0,
+        fontSize: theme.font.size.sm,
+        cursor: 'pointer',
+        width: 'max-content',
+        minWidth: theme.size.lg,
+        height: theme.size.lg,
+        padding: 0
+    }));
+const Ellipses = styled.span(({ theme })=>({
+        color: theme.scale6
+    }));
+const Pagination = Pagination_Pagination;
+export { Pagination as default };

package/build/components/PieChart.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart } from "recharts";
+import { ChartContainer, Tooltip } from "./ChartHelpers.js";
+const PieChart_PieChart = ({ size = 200, data, innerRadius, showWhenEmpty, tooltipLegendPostfix, ...rest })=>{
+    const haveData = data?.length > 0;
+    const backupData = showWhenEmpty ? [
+        {
+            name: '1',
+            value: 1,
+            color: '#999'
+        }
+    ] : void 0;
+    const dataToDisplay = haveData ? data : backupData;
+    const radius = size / 2 - 1;
+    return /*#__PURE__*/ jsx(ChartContainer, {
+        width: size,
+        height: size,
+        ...rest,
+        children: /*#__PURE__*/ jsxs(PieChart, {
+            width: size,
+            height: size,
+            children: [
+                /*#__PURE__*/ jsx(Pie, {
+                    dataKey: "value",
+                    data: dataToDisplay,
+                    innerRadius: innerRadius,
+                    outerRadius: radius,
+                    children: dataToDisplay?.map((entry)=>/*#__PURE__*/ jsx(Cell, {
+                            fill: entry.color || '#999'
+                        }, entry.name))
+                }),
+                haveData && Tooltip({
+                    legendPostfix: tooltipLegendPostfix
+                })
+            ]
+        })
+    });
+};
+const components_PieChart = PieChart_PieChart;
+export { components_PieChart as default };

package/build/components/Popover.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { DialogTrigger } from "react-aria-components";
+import { useControlledOpenState } from "../hooks/index.js";
+import AriaButton from "./Inputs/helpers/AriaButton.js";
+import MotionPopover from "./MotionPopover.js";
+const Popover_Popover = ({ children, position = 'bottom', fixedPosition, trigger, isTriggerButton, triggerProps, offset = 4, afterShow, afterHide, open, onOpenChange, ...props })=>{
+    const [isOpen, handleOpenChange] = useControlledOpenState({
+        open,
+        onOpenChange,
+        afterShow,
+        afterHide
+    });
+    useEffect(()=>()=>{
+            handleOpenChange(false);
+        }, []);
+    const triggerEl = isTriggerButton ? trigger : /*#__PURE__*/ jsx(AriaButton, {
+        "aria-label": "Menu",
+        ...triggerProps,
+        children: trigger
+    });
+    return /*#__PURE__*/ jsxs(DialogTrigger, {
+        onOpenChange: handleOpenChange,
+        isOpen: isOpen,
+        children: [
+            triggerEl,
+            /*#__PURE__*/ jsx(MotionPopover, {
+                placement: position,
+                offset: offset,
+                shouldFlip: fixedPosition ? false : void 0,
+                onClick: (event)=>event.stopPropagation(),
+                onMouseDown: (event)=>event.stopPropagation(),
+                ...props,
+                children: children
+            })
+        ]
+    });
+};
+const Popover = Popover_Popover;
+export { Popover as default };

package/build/components/PortalScope.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { UNSAFE_PortalProvider } from "react-aria";
+const PortalScope = ({ containerRef, children })=>/*#__PURE__*/ jsx(UNSAFE_PortalProvider, {
+        getContainer: ()=>containerRef.current,
+        children: children
+    });
+const components_PortalScope = PortalScope;
+export { components_PortalScope as default };

package/build/components/Progress/CirclePercent.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { marginProps } from "../helpers/styledProps.js";
+const CirclePercent = ({ percent, size = 24, thickness = 2, color, margin, marginTop, marginBottom, marginRight, marginLeft })=>{
+    const rest = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    };
+    const radius = (size - thickness) / 2;
+    const circumference = radius * Math.PI * 2;
+    const cirComplete = circumference - circumference * percent / 100;
+    const half = size / 2;
+    return /*#__PURE__*/ jsxs(ProgressCircle, {
+        size: size,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Circle, {
+                cx: half,
+                cy: half,
+                r: radius,
+                thickness: thickness
+            }),
+            /*#__PURE__*/ jsx(CircleProgress, {
+                color: color,
+                cx: half,
+                cy: half,
+                r: radius,
+                thickness: thickness,
+                transform: `rotate(-90 ${half} ${half})`,
+                circ: circumference,
+                complete: cirComplete
+            })
+        ]
+    });
+};
+const ProgressCircle = styled.svg(({ size })=>({
+        display: 'block',
+        width: size,
+        height: size
+    }), marginProps);
+const Circle = styled.circle(({ theme, thickness })=>({
+        fill: 'none',
+        stroke: theme.scale1,
+        strokeWidth: thickness
+    }));
+const CircleProgress = styled(Circle)(({ theme, color, circ, complete })=>({
+        stroke: color || theme.color.brand,
+        strokeDasharray: circ,
+        strokeDashoffset: complete,
+        transition: 'stroke-dashoffset 0.5s'
+    }));
+const Progress_CirclePercent = CirclePercent;
+export { Progress_CirclePercent as default };

package/build/components/Progress/Progress.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { marginProps } from "../helpers/styledProps.js";
+import CirclePercent from "./CirclePercent.js";
+const getSafePercent = (percent)=>{
+    if (percent > 100) return 100;
+    if (percent < 0) return 0;
+    return percent;
+};
+const Progress = ({ percent, color, circle, width, height, size, thickness = 8, borderRadius, goal, ...rest })=>{
+    const safePercent = getSafePercent(percent);
+    const safeGoal = goal ? getSafePercent(goal) : void 0;
+    return circle ? /*#__PURE__*/ jsx(CirclePercent, {
+        percent: safePercent,
+        size: size,
+        thickness: thickness,
+        color: color,
+        ...rest
+    }) : /*#__PURE__*/ jsxs(ProgressBar, {
+        width: width,
+        height: height || thickness,
+        borderRadius: borderRadius,
+        ...rest,
+        children: [
+            safeGoal && /*#__PURE__*/ jsx(GoalLine, {
+                percent: safeGoal
+            }),
+            /*#__PURE__*/ jsx(ProgressInner, {
+                color: color,
+                width: safePercent
+            })
+        ]
+    });
+};
+const ProgressBar = styled.div(({ theme, width, height, borderRadius = 24 })=>({
+        backgroundColor: theme.scale1,
+        borderRadius,
+        width: width || '100%',
+        height,
+        overflow: 'hidden',
+        position: 'relative'
+    }), marginProps);
+const ProgressInner = styled.div(({ theme, color, width })=>({
+        backgroundColor: color || theme.color.brand,
+        width: `${width}%`,
+        height: '100%',
+        transition: 'width 0.5s'
+    }));
+const GoalLine = styled.div(({ theme, percent })=>({
+        backgroundColor: 'transparent',
+        width: 1,
+        height: '100%',
+        borderLeft: `1px dashed ${theme.scale4}`,
+        position: 'absolute',
+        left: `${percent}%`,
+        top: 0
+    }));
+const Progress_Progress = Progress;
+export { Progress_Progress as default };

package/build/components/Progress/index.js

@@ -0,0 +1,3 @@
+import Progress from "./Progress.js";
+const components_Progress = Progress;
+export { components_Progress as default };

package/build/components/Radio.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import RadioButton from "../assets/icons/RadioButton.js";
+import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
+import Icon from "./Icon/index.js";
+const Radio_Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
+    const labelRight = 'right' === labelPosition;
+    const marginProps = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    };
+    return /*#__PURE__*/ jsxs(ControlContainer, {
+        htmlFor: id,
+        labelRight: labelRight,
+        disabled: disabled,
+        readOnly: readOnly,
+        className: className,
+        iconColor: iconColor,
+        ...marginProps,
+        children: [
+            label && /*#__PURE__*/ jsx(ControlLabel, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(ControlInput, {
+                id: id,
+                type: "radio",
+                checked: checked,
+                disabled: disabled,
+                readOnly: readOnly,
+                iconColor: iconColor,
+                ...props
+            }),
+            /*#__PURE__*/ jsx(Icon, {
+                svg: /*#__PURE__*/ jsx(RadioButton, {}),
+                marginLeft: label && !labelRight ? 8 : 0,
+                marginRight: label && labelRight ? 8 : 0,
+                pointer: !disabled
+            })
+        ]
+    });
+};
+const Radio = Radio_Radio;
+export { Radio as default };

package/build/components/RangeCalendar.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { CalendarDate } from "@internationalized/date";
+import { useRef, useState } from "react";
+import { RangeCalendar } 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 RangeCalendar_RangeCalendar = ({ startDate, endDate, onChange, preventPast, preventFuture, noShadow, ...props })=>{
+    const { current: initialStart } = useRef(startDate ? getObjFromDate(startDate) : now);
+    const { current: initialEnd } = useRef(endDate ? getObjFromDate(endDate) : initialStart);
+    const [selectedStart, setSelectedStart] = useState(initialStart);
+    const [selectedEnd, setSelectedEnd] = useState(initialEnd);
+    const [focusedDate, setFocusedDate] = useState(initialStart);
+    const { min, max } = useMinMax({
+        past: preventPast,
+        future: preventFuture
+    });
+    const handleDateChange = (val)=>{
+        if (!val) return;
+        const { start, end } = val;
+        const { year: sYear, month: sMonth, day: sDay } = start;
+        const { year: eYear, month: eMonth, day: eDay } = end;
+        const newStart = new CalendarDate(sYear, sMonth, sDay);
+        setSelectedStart(newStart);
+        const newEnd = new CalendarDate(eYear, eMonth, eDay);
+        setSelectedEnd(newEnd);
+        const newStartDate = getDateFromObj(start);
+        const newEndDate = getDateFromObj(end);
+        if (onChange) onChange(newStartDate, newEndDate);
+    };
+    return /*#__PURE__*/ jsxs(CalendarContainer, {
+        value: {
+            start: selectedStart,
+            end: selectedEnd
+        },
+        onChange: handleDateChange,
+        minValue: min,
+        maxValue: max,
+        noShadow: noShadow,
+        focusedValue: focusedDate,
+        onFocusChange: setFocusedDate,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(CalendarHeader, {
+                date: focusedDate,
+                setDate: setFocusedDate
+            }),
+            /*#__PURE__*/ jsx(CalendarContent, {
+                range: true
+            })
+        ]
+    });
+};
+const CalendarContainer = styled(RangeCalendar)(CalendarContainerStyles);
+const components_RangeCalendar = RangeCalendar_RangeCalendar;
+export { components_RangeCalendar as default };