@wavv/ui 2.4.4-alpha.5 → 2.4.4-alpha.7

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 dropdown_caret from "./dropdown-caret.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(dropdown_caret, {}),
+                            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/dropdown-caret.js

@@ -0,0 +1,2 @@
+import dropdown_caret_namespaceObject from "../../static/svg/dropdown-caret.svg";
+export { dropdown_caret_namespaceObject as default };

package/build/components/Dialog.js

@@ -2,8 +2,8 @@ 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 { body1, head3, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.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 })=>{

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

@@ -104,6 +104,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>;

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, 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, 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 createWrappedIcon from "./createWrappedIcon.js";
 const icons = {
     'activity-history': createWrappedIcon(IdCard),
@@ -104,6 +104,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),

package/build/static/svg/dropdown-caret.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="4" viewBox="0 0 6 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0.75L3 3L5.25 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.4.4-alpha.5",
+	"version": "2.4.4-alpha.7",
 	"type": "module",
 	"exports": {
 		".": {