@wavv/ui 2.4.3 → 2.4.4-alpha.10

package/build/components/Accordion/Accordion.d.ts

@@ -146,17 +146,17 @@ declare const Accordion: {
             onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
             onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
             onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-            onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+            onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
             onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-            onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-            onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+            onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+            onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+            onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+            onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+            onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+            onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+            onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+            onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+            onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
             onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
             onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
             onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;

package/build/components/Button/Button.d.ts

@@ -120,17 +120,17 @@ declare const _default: (({ content, children, dropdown, options, ref, ...rest }
         onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;

package/build/components/Button/Button.js

@@ -8,12 +8,14 @@ import DropdownMenu from "../DropdownMenu.js";
 import { marginProps } from "../helpers/styledProps.js";
 import Icon from "../Icon/index.js";
 import ButtonLoader from "./ButtonLoader.js";
+import DropdownCaretIcon from "./DropdownCaretIcon.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, {
+    if ((true === dropdown || 'single' === dropdown) && options) return /*#__PURE__*/ jsx(DropdownButton, {
         ref: ref,
         options: options,
+        dropdown: dropdown,
         ...rest,
         children: text
     });
@@ -66,8 +68,20 @@ const BasicButton = ({ children, onClick, onPress, icon, iconPosition, iconColor
         ]
     });
 };
-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 DropdownButton = ({ children, options, dropdown = true, onClick, onPress, afterShow, afterHide, secondary, negative, positive, caution, outline, subtle, link, size, small, tiny, large, disabled, buttonDisabled, optionsDisabled, loading, direction, collapse, width, hideDivider, gap, icon, iconPosition, ref, ...props })=>{
     const [optionsOpen, setOptionsOpen] = useState(false);
+    const isSingle = 'single' === dropdown;
+    let buttonSize = size || 'medium';
+    if (small) buttonSize = 'small';
+    else if (large) buttonSize = 'large';
+    else if (tiny) buttonSize = 'tiny';
+    const caretDimensions = {
+        large: 7,
+        medium: 6,
+        small: 5,
+        tiny: 4
+    };
+    const caretSize = caretDimensions[buttonSize];
     const buttonStyleProps = {
         secondary,
         negative,
@@ -93,6 +107,38 @@ const DropdownButton = ({ children, options, onClick, onPress, afterShow, afterH
         if (afterHide) afterHide();
         setOptionsOpen(false);
     };
+    if (isSingle) return /*#__PURE__*/ jsx(DropdownContainer, {
+        children: /*#__PURE__*/ jsx(DropdownMenu, {
+            options: options,
+            position: `${direction || 'bottom'} right`,
+            afterShow: handleShow,
+            afterHide: handleHide,
+            isTriggerButton: true,
+            trigger: /*#__PURE__*/ jsxs(BasicButton, {
+                ...buttonStyleProps,
+                ...props,
+                ref: ref,
+                disabled: disabled,
+                width: width && !collapse ? '100%' : void 0,
+                collapse: collapse,
+                loading: loading,
+                icon: icon,
+                iconPosition: iconPosition,
+                children: [
+                    children && /*#__PURE__*/ jsx(DropdownButtonChildren, {
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(CaretIconWrapper, {
+                        isOpen: optionsOpen,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            svg: /*#__PURE__*/ jsx(DropdownCaretIcon, {}),
+                            size: caretSize
+                        })
+                    })
+                ]
+            })
+        })
+    });
     return /*#__PURE__*/ jsx(DropdownContainer, {
         children: /*#__PURE__*/ jsxs(Group, {
             width: collapse ? void 0 : width,
@@ -247,10 +293,23 @@ const DropdownContainer = styled.div({
     position: 'relative'
 });
 const DropdownButtonChildren = styled.div({
-    marginRight: 8
+    marginRight: 8,
+    display: 'inline-flex',
+    alignItems: 'center'
 });
+const CaretIconWrapper = styled.span(({ isOpen })=>({
+        display: 'inline-flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        '& > div': {
+            transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s ease-in-out'
+        }
+    }));
 const Inner = styled.span({
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    display: 'inline-flex',
+    alignItems: 'center'
 });
 const components_Button_Button = Object.assign(Button_Button, {
     Group: Group

package/build/components/Button/ButtonTypes.d.ts

@@ -112,7 +112,7 @@ export type DropdownProps = {
     optionsDisabled?: never;
 } | {
     /** Adds a dropdown button to the main button, allowing for multiple button options */
-    dropdown: true;
+    dropdown: true | 'single';
     /** The dropdown options array of { id: string; label: string; action: () => void; } */
     options: ListItem[];
     /** The direction the options should open in relation to the button  */
@@ -131,6 +131,7 @@ export type DropdownProps = {
     optionsDisabled?: boolean;
 };
 export type ButtonDropdownProps = {
+    dropdown: true | 'single';
     options: ListItem[];
     direction?: 'top' | 'bottom';
     afterShow?: () => void;

package/build/components/Button/DropdownCaretIcon.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+declare function DropdownCaretIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export default DropdownCaretIcon;

package/build/components/Button/DropdownCaretIcon.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+function DropdownCaretIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        width: "6",
+        height: "4",
+        viewBox: "0 0 6 4",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M0.75 0.75L3 3L5.25 0.75",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+const Button_DropdownCaretIcon = DropdownCaretIcon;
+export { Button_DropdownCaretIcon as default };

package/build/components/Dialog.d.ts

@@ -0,0 +1,67 @@
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type { IconName } from './Icon/Icon';
+import type { Attributes } from './typeDefs/elementTypes';
+import type { MaxWidthHeight, MinWidthHeight, Padding, PositionType, WidthHeight } from './types';
+type DivAttributes = Attributes<HTMLDivElement>;
+type DialogProps = {
+    /** The header content displayed at the top of the dialog */
+    header: ReactNode;
+    /** The icon displayed to the left of the header text */
+    headerIcon?: IconName;
+    /** The main text content displayed in the dialog body */
+    text?: ReactNode;
+    /** Additional children content */
+    children?: ReactNode;
+    /** The text of the cancel button */
+    cancelText?: string;
+    /** The text of the confirm button */
+    confirmText?: string;
+    /** The text of the middle button (between cancel and confirm) */
+    middleText?: string;
+    /** The confirm button will be negative (red) */
+    negative?: boolean;
+    /** Disables the confirm button */
+    confirmDisabled?: boolean;
+    /** Shows loading state on the confirm button */
+    confirmLoading?: boolean;
+    /** Disables the middle button */
+    middleDisabled?: boolean;
+    /** Shows loading state on the middle button */
+    middleLoading?: boolean;
+    /** The function called when the confirm button is clicked */
+    onConfirm?: () => void;
+    /** The function called when the middle button is clicked */
+    onMiddle?: () => void;
+    /** The function called when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Controls whether or not the Dialog is open */
+    visible: boolean;
+    /** The function called when the Dialog is closed */
+    onClose: () => void;
+    /** Displays a close icon in the top right of the Dialog */
+    closeIcon?: boolean;
+    /** Prevents the Dialog from closing if the overlay outside the dialog is clicked */
+    preventOverlayClose?: boolean;
+    /** Adjust or disable the blur effect of the dialog overlay */
+    overlayBlur?: boolean | number;
+    /** Sets the color of the dialog overlay */
+    overlayColor?: string;
+    /** Overrides the backgroundColor of the dialog container */
+    backgroundColor?: string;
+    /** Overrides the borderRadius of the dialog container */
+    borderRadius?: number | string;
+    /** Overrides the overflow of the dialog container */
+    overflow?: CSSProperties['overflow'];
+    /** Prevents the dialog from being interacted with */
+    inert?: boolean;
+    /** Renders the Dialog scoped inside a container */
+    scopeRef?: RefObject<HTMLElement | null>;
+    /** Sets the position of the dialog container */
+    position?: PositionType;
+    /** Sets the zIndex of the dialog container */
+    zIndex?: number;
+    /** The `aria-label` of the dialog */
+    'aria-label'?: string;
+} & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
+declare const Dialog: ({ header, headerIcon, text, children, cancelText, confirmText, middleText, negative, confirmDisabled, confirmLoading, middleDisabled, middleLoading, onConfirm, onMiddle, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export default Dialog;

package/build/components/Dialog.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
+import Button from "./Button/index.js";
+import getIcon from "./helpers/getIcon.js";
+import { body1, head3, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+import PortalScope from "./PortalScope.js";
+const Dialog_Dialog = ({ header, headerIcon, text, children, cancelText = 'Cancel', confirmText = 'Okay', middleText, negative, confirmDisabled, confirmLoading, middleDisabled, middleLoading, onConfirm, onMiddle, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
+    const { 'aria-label': ariaLabel, ...rest } = props;
+    const handleOpenChange = (open)=>{
+        if (!open) onClose();
+    };
+    const hasFooter = !!onConfirm;
+    const dialog = /*#__PURE__*/ jsx(Overlay, {
+        isDismissable: !preventOverlayClose,
+        isOpen: visible,
+        onOpenChange: handleOpenChange,
+        color: overlayColor,
+        position: scopeRef ? 'absolute' : position,
+        width: scopeRef ? '100%' : void 0,
+        height: scopeRef ? '100%' : void 0,
+        zIndex: zIndex,
+        blur: overlayBlur,
+        ref: (node)=>{
+            if (!node) return;
+            if (inert) node.setAttribute('inert', '');
+            else node.removeAttribute('inert');
+        },
+        children: /*#__PURE__*/ jsx(StyledModal, {
+            children: /*#__PURE__*/ jsx(StyledDialog, {
+                "aria-label": ariaLabel,
+                children: /*#__PURE__*/ jsxs(DialogContainer, {
+                    width: width,
+                    height: height,
+                    backgroundColor: backgroundColor,
+                    ...rest,
+                    children: [
+                        /*#__PURE__*/ jsxs(DialogHeader, {
+                            slot: "title",
+                            children: [
+                                /*#__PURE__*/ jsxs(HeaderContent, {
+                                    children: [
+                                        headerIcon && getIcon(headerIcon),
+                                        header
+                                    ]
+                                }),
+                                closeIcon && /*#__PURE__*/ jsx(CloseInHeader, {
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        name: "close",
+                                        size: "small",
+                                        onClick: onClose
+                                    })
+                                })
+                            ]
+                        }),
+                        (text || children) && /*#__PURE__*/ jsxs(DialogContent, {
+                            hasFooter: hasFooter,
+                            children: [
+                                text,
+                                children
+                            ]
+                        }),
+                        hasFooter && /*#__PURE__*/ jsxs(DialogFooter, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    secondary: true,
+                                    onClick: onCancel || onClose,
+                                    children: cancelText
+                                }),
+                                onMiddle && /*#__PURE__*/ jsx(Button, {
+                                    secondary: true,
+                                    disabled: middleDisabled,
+                                    loading: middleLoading,
+                                    onClick: onMiddle,
+                                    children: middleText
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    negative: negative,
+                                    disabled: confirmDisabled,
+                                    loading: confirmLoading,
+                                    onClick: onConfirm,
+                                    children: confirmText
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        })
+    });
+    return scopeRef ? /*#__PURE__*/ jsx(PortalScope, {
+        containerRef: scopeRef,
+        children: dialog
+    }) : dialog;
+};
+const DialogHeader = styled(Heading)(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        color: theme.modal.color.header,
+        margin: 0,
+        padding: 16,
+        borderBottom: theme.defaultBorder,
+        position: 'relative',
+        width: '100%',
+        boxSizing: 'border-box'
+    }), head3);
+const HeaderContent = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8
+});
+const DialogContent = styled.div(({ theme, hasFooter })=>({
+        color: theme.modal.color.body,
+        padding: hasFooter ? '16px 16px 8px' : 16,
+        boxSizing: 'border-box'
+    }), body1);
+const DialogFooter = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 16,
+    gap: 8,
+    boxSizing: 'border-box'
+});
+const DialogContainer = styled.div(({ theme, width, height, backgroundColor, borderRadius, overflow })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: backgroundColor || theme.modal.background,
+        color: theme.scale10,
+        boxShadow: theme.elevation3,
+        width: width || 'max-content',
+        height: height || 'max-content',
+        borderRadius: borderRadius || theme.size.sm,
+        overflow: overflow || 'hidden'
+    }), {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%,-50%)'
+}, paddingProps, minWidthHeightProps, maxWidthHeightProps);
+const CloseInHeader = styled.div(({ theme })=>({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: 'auto',
+        cursor: 'pointer',
+        color: theme.scale10
+    }));
+const Overlay = styled(ModalOverlay)(({ color, blur, position, zIndex, width, height })=>({
+        position: position || 'fixed',
+        top: 0,
+        left: 0,
+        width: width || '100vw',
+        height: height || 'var(--visual-viewport-height)',
+        zIndex: zIndex || 100,
+        backgroundColor: color || 'rgba(0, 0, 0, 0.2)',
+        backdropFilter: blur ? `blur(${'number' == typeof blur ? blur : 4}px)` : 'none'
+    }));
+const StyledModal = styled(Modal)({
+    outline: 'none'
+});
+const StyledDialog = styled(Dialog)({
+    outline: 'none'
+});
+const components_Dialog = Dialog_Dialog;
+export { components_Dialog as default };

package/build/components/Icon/Icon.js

@@ -9,6 +9,14 @@ const Icon = ({ name, svg, external, size, width, height, color, hoverColor, poi
     let SvgComponent = null;
     let svgContent = null;
     let WrappedIconComponent = null;
+    const iconSizes = {
+        tiny: 12,
+        small: 18,
+        medium: 24,
+        large: 40
+    };
+    let iconSize = 'number' == typeof size ? size : iconSizes.medium;
+    if ('tiny' === size || 'small' === size || 'medium' === size || 'large' === size) iconSize = iconSizes[size];
     if (name) {
         if (name in customIcons) SvgComponent = customIcons[name];
         else if (name in icons) WrappedIconComponent = icons[name];
@@ -16,19 +24,11 @@ const Icon = ({ name, svg, external, size, width, height, color, hoverColor, poi
         let element = svg;
         if ('function' == typeof svg) element = svg();
         const clonedSvg = /*#__PURE__*/ cloneElement(element, {
-            width: width || size,
-            height: height || size
+            width: width || iconSize,
+            height: height || iconSize
         });
         svgContent = clonedSvg;
     }
-    const iconSizes = {
-        tiny: 12,
-        small: 18,
-        medium: 24,
-        large: 40
-    };
-    let iconSize = 'number' == typeof size ? size : iconSizes.medium;
-    if ('tiny' === size || 'small' === size || 'medium' === size || 'large' === size) iconSize = iconSizes[size];
     if (external) return /*#__PURE__*/ jsx(DynamicIcon, {
         ...props,
         name: external,

package/build/components/Icon/icons.d.ts

@@ -32,6 +32,7 @@ declare const icons: {
     readonly clapperboard: ComponentType<WrappedIconProps>;
     readonly close: ComponentType<WrappedIconProps>;
     readonly 'close-circle': ComponentType<WrappedIconProps>;
+    readonly compose: ComponentType<WrappedIconProps>;
     readonly copy: ComponentType<WrappedIconProps>;
     readonly 'copy-check': ComponentType<WrappedIconProps>;
     readonly 'copy-plus': ComponentType<WrappedIconProps>;
@@ -86,6 +87,8 @@ declare const icons: {
     readonly loading: ComponentType<WrappedIconProps>;
     readonly 'local-area': ComponentType<WrappedIconProps>;
     readonly location: ComponentType<WrappedIconProps>;
+    readonly lock: ComponentType<WrappedIconProps>;
+    readonly 'lock-open': ComponentType<WrappedIconProps>;
     readonly logout: ComponentType<WrappedIconProps>;
     readonly maximize: ComponentType<WrappedIconProps>;
     readonly menu: ComponentType<WrappedIconProps>;
@@ -104,6 +107,8 @@ declare const icons: {
     readonly 'pause-circle': ComponentType<WrappedIconProps>;
     readonly person: ComponentType<WrappedIconProps>;
     readonly 'person-add': ComponentType<WrappedIconProps>;
+    readonly pin: ComponentType<WrappedIconProps>;
+    readonly 'pin-off': ComponentType<WrappedIconProps>;
     readonly play: ComponentType<WrappedIconProps>;
     readonly 'play-circle': ComponentType<WrappedIconProps>;
     readonly priority: ComponentType<WrappedIconProps>;
@@ -113,6 +118,7 @@ declare const icons: {
     readonly rocket: ComponentType<WrappedIconProps>;
     readonly schedule: ComponentType<WrappedIconProps>;
     readonly search: ComponentType<WrappedIconProps>;
+    readonly send: ComponentType<WrappedIconProps>;
     readonly settings: ComponentType<WrappedIconProps>;
     readonly share: ComponentType<WrappedIconProps>;
     readonly 'share-arrow': ComponentType<WrappedIconProps>;

package/build/components/Icon/icons.js

@@ -1,4 +1,4 @@
-import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpWideNarrow, BadgeCheck, Ban, Bell, BellDot, Bold, Bot, Braces, Bug, CalendarDays, Camera, ChartColumn, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CirclePause, CirclePlay, CirclePlus, CircleQuestionMark, CircleStop, CircleUserRound, CircleX, Clapperboard, Clock, Copy, CopyCheck, CopyPlus, CreditCard, Download, Ear, EllipsisVertical, ExternalLink, Eye, EyeOff, Facebook, FileText, Flag, FlaskConical, Frown, Funnel, Globe, GripVertical, Hash, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Headset, Heart, Highlighter, Hourglass, House, IdCard, Info, Instagram, Italic, Kanban, Layers2, LayoutDashboard, Lightbulb, Link, Linkedin, List, ListChecks, ListFilter, ListOrdered, ListTodo, Loader, LogIn, LogOut, MapPin, MapPinned, Maximize2, Meh, Menu, Merge, MessageSquareMore, Mic, MicOff, Minimize2, Minus, MonitorSmartphone, NotebookPen, Paperclip, Pause, Pencil, Pilcrow, Play, Plus, Redo, RefreshCcwDot, RefreshCw, Rocket, RotateCw, Search, Settings, Share, Share2, Shield, ShieldCheck, ShieldOff, ShieldPlus, ShoppingCart, Smartphone, Smile, Sparkles, Square, SquareStack, Star, Strikethrough, TextQuote, Trash2, TriangleAlert, Trophy, Underline, Undo, Upload, UserRound, UserRoundPlus, Users, Video, Voicemail, Volume2, X, Youtube } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpWideNarrow, BadgeCheck, Ban, Bell, BellDot, Bold, Bot, Braces, Bug, CalendarDays, Camera, ChartColumn, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CirclePause, CirclePlay, CirclePlus, CircleQuestionMark, CircleStop, CircleUserRound, CircleX, Clapperboard, Clock, Copy, CopyCheck, CopyPlus, CreditCard, Download, Ear, EllipsisVertical, ExternalLink, Eye, EyeOff, Facebook, FileText, Flag, FlaskConical, Frown, Funnel, Globe, GripVertical, Hash, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Headset, Heart, Highlighter, Hourglass, House, IdCard, Info, Instagram, Italic, Kanban, Layers2, LayoutDashboard, Lightbulb, Link, Linkedin, List, ListChecks, ListFilter, ListOrdered, ListTodo, Loader, LockKeyhole, LockKeyholeOpen, LogIn, LogOut, MapPin, MapPinned, Maximize2, Meh, Menu, Merge, MessageSquareMore, Mic, MicOff, Minimize2, Minus, MonitorSmartphone, NotebookPen, Paperclip, Pause, Pencil, Pilcrow, Pin, PinOff, Play, Plus, Redo, RefreshCcwDot, RefreshCw, Rocket, RotateCw, Search, Send, Settings, Share, Share2, Shield, ShieldCheck, ShieldOff, ShieldPlus, ShoppingCart, Smartphone, Smile, Sparkles, Square, SquarePen, SquareStack, Star, Strikethrough, TextQuote, Trash2, TriangleAlert, Trophy, Underline, Undo, Upload, UserRound, UserRoundPlus, Users, Video, Voicemail, Volume2, X, Youtube } from "lucide-react";
 import createWrappedIcon from "./createWrappedIcon.js";
 const icons = {
     'activity-history': createWrappedIcon(IdCard),
@@ -32,6 +32,7 @@ const icons = {
     clapperboard: createWrappedIcon(Clapperboard),
     close: createWrappedIcon(X),
     'close-circle': createWrappedIcon(CircleX),
+    compose: createWrappedIcon(SquarePen),
     copy: createWrappedIcon(Copy),
     'copy-check': createWrappedIcon(CopyCheck),
     'copy-plus': createWrappedIcon(CopyPlus),
@@ -86,6 +87,8 @@ const icons = {
     loading: createWrappedIcon(Loader),
     'local-area': createWrappedIcon(MapPinned),
     location: createWrappedIcon(MapPin),
+    lock: createWrappedIcon(LockKeyhole),
+    'lock-open': createWrappedIcon(LockKeyholeOpen),
     logout: createWrappedIcon(LogOut),
     maximize: createWrappedIcon(Maximize2),
     menu: createWrappedIcon(Menu),
@@ -104,6 +107,8 @@ const icons = {
     'pause-circle': createWrappedIcon(CirclePause),
     person: createWrappedIcon(UserRound),
     'person-add': createWrappedIcon(UserRoundPlus),
+    pin: createWrappedIcon(Pin),
+    'pin-off': createWrappedIcon(PinOff),
     play: createWrappedIcon(Play),
     'play-circle': createWrappedIcon(CirclePlay),
     priority: createWrappedIcon(ArrowUpWideNarrow),
@@ -113,6 +118,7 @@ const icons = {
     rocket: createWrappedIcon(Rocket),
     schedule: createWrappedIcon(Clock),
     search: createWrappedIcon(Search),
+    send: createWrappedIcon(Send),
     settings: createWrappedIcon(Settings),
     share: createWrappedIcon(Share2),
     'share-arrow': createWrappedIcon(Share),

package/build/components/ListHelpers/GridListHeader.d.ts

@@ -1,5 +1,3 @@
-import type { ThemeProp } from '../types';
-declare const ListHeader: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-} & ThemeProp, {}, {}>;
-export default ListHeader;
+import { GridListHeader as GridListHeaderBase } from 'react-aria-components';
+declare const GridListHeader: typeof GridListHeaderBase;
+export default GridListHeader;

package/build/components/ListHelpers/GridListHeader.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { GridListHeader } from "react-aria-components";
-const ListHeader = styled(GridListHeader)(({ theme })=>({
+const GridListHeader_GridListHeader = styled(GridListHeader)(({ theme })=>({
         backgroundColor: theme.scale0,
         padding: '0 16px',
         color: theme.scale6,
@@ -10,5 +10,5 @@ const ListHeader = styled(GridListHeader)(({ theme })=>({
             backgroundColor: theme.scale0
         }
     }));
-const ListHelpers_GridListHeader = ListHeader;
+const ListHelpers_GridListHeader = GridListHeader_GridListHeader;
 export { ListHelpers_GridListHeader as default };

package/build/components/ListHelpers/ListHeader.d.ts

@@ -1,5 +1,3 @@
-import type { ThemeProp } from '../types';
-declare const ListHeader: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement> & {
-    theme?: import("@emotion/react").Theme;
-} & ThemeProp, {}, {}>;
+import { Header } from 'react-aria-components';
+declare const ListHeader: typeof Header;
 export default ListHeader;

package/build/components/Table/Table.d.ts

@@ -178,17 +178,17 @@ declare const Table: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLTableRowElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLTableRowElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLTableRowElement> | undefined;
-        onChangeCapture?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
+        onChangeCapture?: import("react").ChangeEventHandler<HTMLTableRowElement, Element> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLTableRowElement> | undefined;
-        onBeforeInputCapture?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onInput?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onInputCapture?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onReset?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onResetCapture?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onSubmit?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onSubmitCapture?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onInvalid?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
-        onInvalidCapture?: import("react").FormEventHandler<HTMLTableRowElement> | undefined;
+        onBeforeInputCapture?: import("react").InputEventHandler<HTMLTableRowElement> | undefined;
+        onInput?: import("react").InputEventHandler<HTMLTableRowElement> | undefined;
+        onInputCapture?: import("react").InputEventHandler<HTMLTableRowElement> | undefined;
+        onReset?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;
+        onResetCapture?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;
+        onSubmit?: import("react").SubmitEventHandler<HTMLTableRowElement> | undefined;
+        onSubmitCapture?: import("react").SubmitEventHandler<HTMLTableRowElement> | undefined;
+        onInvalid?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;
+        onInvalidCapture?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;
         onLoadCapture?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLTableRowElement> | undefined;

package/build/components/helpers/styledProps.d.ts

@@ -6,3 +6,14 @@ export declare const minWidthHeightProps: ({ minWidth, minHeight }: MinWidthHeig
 export declare const paddingProps: ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: Padding) => CSSObject;
 export declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marginLeft }: Margin) => CSSObject;
 export declare const positionProps: ({ position, top, bottom, right, left }: Position) => CSSObject;
+export declare const head1: () => CSSObject;
+export declare const head2: () => CSSObject;
+export declare const head3: () => CSSObject;
+export declare const body1: () => CSSObject;
+export declare const body1Medium: () => CSSObject;
+export declare const body2: () => CSSObject;
+export declare const body2Medium: () => CSSObject;
+export declare const body3: () => CSSObject;
+export declare const body3Medium: () => CSSObject;
+export declare const body4: () => CSSObject;
+export declare const body4Medium: () => CSSObject;

package/build/components/helpers/styledProps.js

@@ -31,4 +31,59 @@ const positionProps = ({ position, top, bottom, right, left })=>({
         right,
         left
     });
-export { marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps, positionProps, widthHeightProps };
+const head1 = ()=>({
+        fontSize: 28,
+        fontWeight: 500,
+        lineHeight: '33px'
+    });
+const head2 = ()=>({
+        fontSize: 20,
+        fontWeight: 500,
+        lineHeight: '24px'
+    });
+const head3 = ()=>({
+        fontSize: 18,
+        fontWeight: 400,
+        lineHeight: '22px'
+    });
+const body1 = ()=>({
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: '19px'
+    });
+const body1Medium = ()=>({
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '19px'
+    });
+const body2 = ()=>({
+        fontSize: 14,
+        fontWeight: 400,
+        lineHeight: '17px'
+    });
+const body2Medium = ()=>({
+        fontSize: 14,
+        fontWeight: 500,
+        lineHeight: '17px'
+    });
+const body3 = ()=>({
+        fontSize: 12,
+        fontWeight: 400,
+        lineHeight: '15px'
+    });
+const body3Medium = ()=>({
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: '15px'
+    });
+const body4 = ()=>({
+        fontSize: 10,
+        fontWeight: 400,
+        lineHeight: '12px'
+    });
+const body4Medium = ()=>({
+        fontSize: 10,
+        fontWeight: 500,
+        lineHeight: '12px'
+    });
+export { body1, body1Medium, body2, body2Medium, body3, body3Medium, body4, body4Medium, head1, head2, head3, marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps, positionProps, widthHeightProps };

package/build/index.d.ts

@@ -8,6 +8,7 @@ export { default as Checkbox } from './components/Checkbox';
 export { default as Code } from './components/Code';
 export { default as ComboBox } from './components/ComboBox';
 export { default as CommandMenu } from './components/CommandMenu';
+export { default as Dialog } from './components/Dialog';
 export { default as DocTable } from './components/DocTable';
 export { default as Dot } from './components/Dot';
 export { default as DraftEditor } from './components/DraftEditor';

package/build/index.js

@@ -8,6 +8,7 @@ import Checkbox from "./components/Checkbox.js";
 import Code from "./components/Code/index.js";
 import ComboBox from "./components/ComboBox.js";
 import CommandMenu from "./components/CommandMenu/index.js";
+import Dialog from "./components/Dialog.js";
 import DocTable from "./components/DocTable.js";
 import Dot from "./components/Dot.js";
 import DraftEditor from "./components/DraftEditor.js";
@@ -82,4 +83,4 @@ import formatDate from "./utils/formatDate.js";
 import formatNumber from "./utils/formatNumber.js";
 import numberWithCommas from "./utils/numberWithCommas.js";
 import matchesFileTypes from "./utils/matchesFileTypes.js";
-export { Accordion, Audio, Avatar, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PaymentLogo, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, matchesFileTypes, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, Audio, Avatar, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, Dialog, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PaymentLogo, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, matchesFileTypes, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.4.3",
+	"version": "2.4.4-alpha.10",
 	"type": "module",
 	"exports": {
 		".": {
@@ -28,62 +28,62 @@
 	"author": "Raleigh Wayland",
 	"license": "MIT",
 	"dependencies": {
-		"@emotion/styled": "^11.14.1",
-		"@internationalized/date": "3.10.1",
-		"@react-hook/resize-observer": "^2.0.2",
-		"@tiptap/core": "^3.15.3",
-		"@tiptap/extension-character-count": "^3.15.3",
-		"@tiptap/extension-highlight": "^3.15.3",
-		"@tiptap/extension-placeholder": "^3.15.3",
-		"@tiptap/extension-task-item": "^3.15.3",
-		"@tiptap/extension-task-list": "^3.15.3",
-		"@tiptap/markdown": "^3.15.3",
-		"@tiptap/pm": "^3.15.3",
-		"@tiptap/react": "^3.15.3",
-		"@tiptap/starter-kit": "^3.15.3",
-		"cmdk": "^1.1.1",
-		"date-fns": "^4.1.0",
-		"draft-js": "^0.11.7",
-		"es-toolkit": "^1.44.0",
-		"libphonenumber-js": "^1.12.34",
-		"lucide-react": "^0.562.0",
-		"polished": "^4.1.4",
-		"prism-react-renderer": "^2.4.1",
-		"react-aria": "3.45.0",
-		"react-aria-components": "1.14.0",
-		"react-keyed-flatten-children": "^5.1.1",
-		"react-phone-input-auto-format": "^0.1.0",
-		"recharts": "^3.6.0",
-		"sanitize.css": "^13.0.0",
-		"webfontloader": "^1.6.28"
+		"@emotion/styled": "11.14.1",
+		"@internationalized/date": "3.11.0",
+		"@react-hook/resize-observer": "2.0.2",
+		"@tiptap/core": "3.19.0",
+		"@tiptap/extension-character-count": "3.19.0",
+		"@tiptap/extension-highlight": "3.19.0",
+		"@tiptap/extension-placeholder": "3.19.0",
+		"@tiptap/extension-task-item": "3.19.0",
+		"@tiptap/extension-task-list": "3.19.0",
+		"@tiptap/markdown": "3.19.0",
+		"@tiptap/pm": "3.19.0",
+		"@tiptap/react": "3.19.0",
+		"@tiptap/starter-kit": "3.19.0",
+		"cmdk": "1.1.1",
+		"date-fns": "4.1.0",
+		"draft-js": "0.11.7",
+		"es-toolkit": "1.44.0",
+		"libphonenumber-js": "1.12.36",
+		"lucide-react": "0.563.0",
+		"polished": "4.3.1",
+		"prism-react-renderer": "2.4.1",
+		"react-aria": "3.46.0",
+		"react-aria-components": "1.15.0",
+		"react-keyed-flatten-children": "5.1.1",
+		"react-phone-input-auto-format": "0.1.0",
+		"recharts": "3.7.0",
+		"sanitize.css": "13.0.0",
+		"webfontloader": "1.6.28"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.28.6",
-		"@babel/preset-env": "^7.28.6",
+		"@babel/core": "^7.29.0",
+		"@babel/preset-env": "^7.29.0",
 		"@babel/preset-typescript": "^7.28.5",
-		"@biomejs/biome": "2.3.11",
+		"@biomejs/biome": "2.3.14",
 		"@chromatic-com/storybook": "^4.1.3",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
-		"@rsbuild/core": "1.7.2",
-		"@rsbuild/plugin-react": "^1.4.3",
-		"@rsbuild/plugin-svgr": "^1.2.4",
-		"@rslib/core": "^0.19.2",
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/addon-links": "^10.1.11",
-		"@storybook/addon-themes": "^10.1.11",
+		"@rsbuild/core": "1.7.3",
+		"@rsbuild/plugin-react": "^1.4.5",
+		"@rsbuild/plugin-svgr": "^1.3.0",
+		"@rslib/core": "^0.19.5",
+		"@storybook/addon-docs": "^10.2.7",
+		"@storybook/addon-links": "^10.2.7",
+		"@storybook/addon-themes": "^10.2.7",
 		"@storybook/test-runner": "^0.24.2",
 		"@svgr/core": "^8.1.0",
 		"@svgr/plugin-jsx": "^8.1.0",
 		"@svgr/plugin-prettier": "^8.1.0",
-		"@swc/plugin-emotion": "14.3.0",
+		"@swc/plugin-emotion": "14.5.0",
 		"@types/draft-js": "^0.11.20",
 		"@types/jest": "^30.0.0",
 		"@types/ncp": "^2.0.8",
-		"@types/node": "^25.0.9",
+		"@types/node": "^25.2.1",
 		"@types/prompts": "^2.4.9",
 		"@types/randomcolor": "^0.5.9",
-		"@types/react": "^19.2.8",
+		"@types/react": "^19.2.13",
 		"@types/react-dom": "^19.2.3",
 		"@types/signale": "^1.4.7",
 		"@types/webfontloader": "^1.6.38",
@@ -91,20 +91,20 @@
 		"change-case": "^5.4.4",
 		"chromatic": "^13.3.5",
 		"jest": "^30.2.0",
-		"lefthook": "^2.0.15",
+		"lefthook": "^2.1.0",
 		"ncp": "^2.0.0",
 		"path": "^0.12.7",
-		"phone": "^3.1.69",
-		"playwright": "^1.57.0",
+		"phone": "^3.1.70",
+		"playwright": "^1.58.1",
 		"postcss": "^8.5.6",
-		"prettier": "^3.8.0",
+		"prettier": "^3.8.1",
 		"prompts": "^2.4.2",
 		"randomcolor": "^0.6.2",
-		"react": "^19.2.3",
-		"react-dom": "^19.2.3",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
 		"replace": "^1.2.2",
 		"signale": "^1.4.0",
-		"storybook": "^10.1.11",
+		"storybook": "^10.2.7",
 		"storybook-react-rsbuild": "^3.2.2",
 		"tsc-files": "^1.1.4",
 		"tslib": "^2.8.1",