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

package/build/components/Dialog.d.ts

@@ -13,12 +13,22 @@ type DialogProps = {
     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 */
@@ -50,5 +60,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, negative, confirmDisabled, onConfirm, 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, 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

@@ -2,10 +2,10 @@ 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 { maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.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, text, children, cancelText = 'Cancel', confirmText = 'Okay', negative, confirmDisabled, onConfirm, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
+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 { 'aria-label': ariaLabel, ...rest } = props;
     const handleOpenChange = (open)=>{
         if (!open) onClose();
@@ -62,9 +62,17 @@ const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmT
                                     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
                                 })
@@ -85,21 +93,18 @@ const DialogHeader = styled(Heading)(({ theme })=>({
         alignItems: 'center',
         justifyContent: 'space-between',
         color: theme.modal.color.header,
-        fontWeight: theme.font.weight.default,
-        fontSize: theme.font.size.xl,
         margin: 0,
         padding: 16,
-        borderBottom: `1px solid ${theme.scale1}`,
+        borderBottom: theme.defaultBorder,
         position: 'relative',
         width: '100%',
         boxSizing: 'border-box'
-    }));
+    }), head3);
 const DialogContent = styled.div(({ theme, hasFooter })=>({
         color: theme.modal.color.body,
-        fontSize: theme.font.size.lg,
         padding: hasFooter ? '16px 16px 8px' : 16,
         boxSizing: 'border-box'
-    }));
+    }), body1);
 const DialogFooter = styled.div({
     display: 'flex',
     alignItems: 'center',

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

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