@rovula/ui 0.1.36 → 0.1.38

package/dist/cjs/types/patterns/confirm-dialog/ConfirmDialog.d.ts

@@ -24,6 +24,11 @@ export type ConfirmDialogProps = {
     /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
     isLoading?: boolean;
     testId?: string;
+    contentClassName?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    footerClassName?: string;
     cancelClassName?: string;
     confirmClassName?: string;
 };

package/dist/cjs/types/patterns/confirm-dialog/ConfirmDialog.stories.d.ts

@@ -24,6 +24,11 @@ declare const meta: {
         hideCancelButton?: boolean | undefined;
         isLoading?: boolean | undefined;
         testId?: string | undefined;
+        contentClassName?: string | undefined;
+        headerClassName?: string | undefined;
+        titleClassName?: string | undefined;
+        descriptionClassName?: string | undefined;
+        footerClassName?: string | undefined;
         cancelClassName?: string | undefined;
         confirmClassName?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/Dialog/Dialog.js

@@ -26,7 +26,12 @@ const DialogOverlay = React.forwardRef((_a, ref) => {
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef((_a, ref) => {
     var { className, children, showCloseButton = false, closeButtonClassName } = _a, props = __rest(_a, ["className", "children", "showCloseButton", "closeButtonClassName"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-8 top-8 rounded-sm opacity-70 ring-offset-bg-bg1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-input-active-stroke focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-state-primary-text-solid", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { onCloseAutoFocus: (event) => {
+                    var _a;
+                    event.preventDefault();
+                    document.body.style.pointerEvents = "auto";
+                    (_a = props === null || props === void 0 ? void 0 : props.onCloseAutoFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-8 top-8 rounded-sm opacity-70 ring-offset-bg-bg1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-input-active-stroke focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-state-primary-text-solid", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {

package/dist/components/Dialog/Dialog.stories.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import * as yup from "yup";
 import { Dialog, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./Dialog";
 import Button from "../Button/Button";
 import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
+import { Menu } from "@/patterns/menu/Menu";
 const meta = {
     title: "Components/Dialog",
     component: Dialog,
@@ -97,5 +99,34 @@ export const FigmaFunctionForm = {
     render: () => (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Title" }), _jsx(DialogDescription, { children: "Subtitle description" })] }), _jsx(DialogBody, { children: _jsx("div", { className: "flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm", children: _jsx("p", { className: "typography-body3 text-text-contrast-max", children: "Content - Form Area" }) }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", color: "primary", fullwidth: false, children: "Cancel" }), _jsx(Button, { disabled: true, fullwidth: false, children: "Confirm" })] })] }) }) })),
 };
 export const FigmaFunctionFormWithAction = {
-    render: () => (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Title" }), _jsx(DialogDescription, { children: "Subtitle description" })] }), _jsx(DialogBody, { children: _jsx("div", { className: "flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm", children: _jsx("p", { className: "typography-body3 text-text-contrast-max", children: "Content - Form Area" }) }) }), _jsxs(DialogFooter, { className: "justify-between", children: [_jsx(Button, { variant: "outline", color: "secondary", fullwidth: false, children: "Medium" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "outline", color: "primary", fullwidth: false, children: "Cancel" }), _jsx(Button, { disabled: true, fullwidth: false, children: "Confirm" })] })] })] }) }) })),
+    render: () => {
+        const [open, setOpen] = useState(false);
+        const handleOpenChange = (open) => {
+            setOpen(open);
+        };
+        const handleCancel = () => {
+            setOpen(false);
+        };
+        const handleConfirm = () => {
+            setOpen(false);
+        };
+        return (_jsxs("div", { className: "flex w-full", children: [_jsx(Menu, { items: [
+                        {
+                            type: "item",
+                            item: {
+                                value: "edit",
+                                label: "Edit",
+                                onClick: () => handleOpenChange(true),
+                            },
+                        },
+                        {
+                            type: "item",
+                            item: {
+                                value: "delete",
+                                label: "Delete",
+                                onClick: () => handleOpenChange(true),
+                            },
+                        },
+                    ], trigger: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsx(Dialog, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Title" }), _jsx(DialogDescription, { children: "Subtitle description" })] }), _jsx(DialogBody, { children: _jsx("div", { className: "flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm", children: _jsx("p", { className: "typography-body3 text-text-contrast-max", children: "Content - Form Area" }) }) }), _jsxs(DialogFooter, { className: "justify-between", children: [_jsx(Button, { variant: "outline", color: "secondary", fullwidth: false, children: "Medium" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "outline", color: "primary", fullwidth: false, onClick: handleCancel, children: "Cancel" }), _jsx(Button, { disabled: true, fullwidth: false, onClick: handleConfirm, children: "Confirm" })] })] })] }) })] }));
+    },
 };