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

package/build/components/Dialog.d.ts

@@ -1,10 +1,13 @@
 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 */
@@ -60,5 +63,5 @@ type DialogProps = {
     /** The `aria-label` of the dialog */
     'aria-label'?: string;
 } & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
-declare const Dialog: ({ header, 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;
+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

@@ -3,9 +3,10 @@ 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 Icon from "./Icon/index.js";
 import PortalScope from "./PortalScope.js";
-const Dialog_Dialog = ({ header, 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 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();
@@ -38,7 +39,12 @@ const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmT
                         /*#__PURE__*/ jsxs(DialogHeader, {
                             slot: "title",
                             children: [
-                                header,
+                                /*#__PURE__*/ jsxs(HeaderContent, {
+                                    children: [
+                                        headerIcon && getIcon(headerIcon),
+                                        header
+                                    ]
+                                }),
                                 closeIcon && /*#__PURE__*/ jsx(CloseInHeader, {
                                     children: /*#__PURE__*/ jsx(Icon, {
                                         name: "close",
@@ -100,6 +106,11 @@ const DialogHeader = styled(Heading)(({ theme })=>({
         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,

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/package.json

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