@rovula/ui 0.1.15 → 0.1.18

package/dist/esm/types/index.d.ts

@@ -44,6 +44,8 @@ export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
+export * from "./patterns/confirm-dialog/ConfirmDialog";
+export * from "./patterns/form-dialog/FormDialog";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { PasswordInputProps } from "./components/PasswordInput/PasswordInput";

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

@@ -20,5 +20,8 @@ export type ConfirmDialogProps = {
      * When true, hides the cancel button — useful for info/error alerts that only need one action.
      */
     hideCancelButton?: boolean;
+    testId?: string;
+    cancelClassName?: string;
+    confirmClassName?: string;
 };
 export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

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

@@ -21,6 +21,9 @@ declare const meta: {
         trigger?: React.ReactNode;
         typeToConfirm?: string | undefined;
         hideCancelButton?: boolean | undefined;
+        testId?: string | undefined;
+        cancelClassName?: string | undefined;
+        confirmClassName?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     argTypes: {
         open: {

package/dist/esm/types/patterns/form-dialog/FormDialog.d.ts

@@ -8,6 +8,7 @@ export type FormDialogAction = {
     disabled?: boolean;
     isLoading?: boolean;
     type?: "button" | "submit" | "reset";
+    className?: string;
 };
 export type FormDialogProps = {
     open?: boolean;
@@ -35,5 +36,6 @@ export type FormDialogProps = {
      * Use together with a <Form id={formId} .../> inside children.
      */
     formId?: string;
+    testId?: string;
 };
 export declare const FormDialog: React.FC<FormDialogProps>;

package/dist/esm/types/patterns/form-dialog/FormDialog.stories.d.ts

@@ -21,6 +21,7 @@ declare const meta: {
         scrollable?: boolean | undefined;
         className?: string | undefined;
         formId?: string | undefined;
+        testId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     argTypes: {
         open: {

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import { ToastProviderProps } from '@radix-ui/react-toast';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
 import * as yup from 'yup';
+import Button$1 from '@/components/Button/Button';
 import { ClassValue } from 'clsx';
 
 type ButtonProps = {
@@ -1281,6 +1282,73 @@ declare const useOptionBridge: <TValue extends OptionValue = string, TOption ext
     optionsByValue: Map<TValue, TOption>;
 };
 
+type ConfirmDialogProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    /** Fires whenever the dialog closes, regardless of how (cancel button, overlay, Escape). */
+    onClose?: () => void;
+    trigger?: React.ReactNode;
+    /**
+     * When provided, the user must type this exact text before the confirm button is enabled.
+     * e.g. typeToConfirm="confirm" or typeToConfirm="delete"
+     */
+    typeToConfirm?: string;
+    /**
+     * When true, hides the cancel button — useful for info/error alerts that only need one action.
+     */
+    hideCancelButton?: boolean;
+    testId?: string;
+    cancelClassName?: string;
+    confirmClassName?: string;
+};
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+
+type FormDialogAction = {
+    label: string;
+    onClick?: () => void;
+    variant?: React.ComponentProps<typeof Button$1>["variant"];
+    color?: React.ComponentProps<typeof Button$1>["color"];
+    disabled?: boolean;
+    isLoading?: boolean;
+    type?: "button" | "submit" | "reset";
+    className?: string;
+};
+type FormDialogProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+    trigger?: React.ReactNode;
+    /**
+     * Primary action (right side of footer).
+     */
+    confirmAction?: FormDialogAction;
+    /**
+     * Secondary cancel action (right side of footer, outline style).
+     */
+    cancelAction?: FormDialogAction;
+    /**
+     * Optional extra action placed on the left side of the footer.
+     */
+    extraAction?: FormDialogAction;
+    scrollable?: boolean;
+    className?: string;
+    /**
+     * When provided, the confirm button becomes type="submit" and is linked to this form id.
+     * Use together with a <Form id={formId} .../> inside children.
+     */
+    formId?: string;
+    testId?: string;
+};
+declare const FormDialog: React.FC<FormDialogProps>;
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -1720,4 +1788,4 @@ declare const srgbToHex: (color: string) => string;
  */
 declare function getLucideIconNames(): Promise<string[]>;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };

package/dist/index.js

@@ -46,6 +46,9 @@ export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
+// Patterns
+export * from "./patterns/confirm-dialog/ConfirmDialog";
+export * from "./patterns/form-dialog/FormDialog";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 // Hooks

package/dist/patterns/confirm-dialog/ConfirmDialog.js

@@ -5,7 +5,7 @@ import * as yup from "yup";
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, AlertDialogTrigger, } from "@/components/AlertDialog/AlertDialog";
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
-export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, }) => {
+export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, cancelClassName, confirmClassName, }) => {
     const formId = React.useId();
     const requiresInput = !!typeToConfirm;
     const validationSchema = React.useMemo(() => yup.object({
@@ -33,12 +33,13 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmL
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), description && (_jsx(AlertDialogDescription, { children: description }))] }), requiresInput && (_jsxs(FormRoot, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { "data-testid": testId, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), requiresInput && (_jsxs(FormRoot, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
                                     label: "Type to confirm",
                                     required: true,
                                     hasClearIcon: true,
                                     keepFooterSpace: true,
                                     fullwidth: true,
-                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { onClick: handleCancel, children: cancelLabel })), _jsx(AlertDialogAction, { type: "submit", form: requiresInput ? formId : undefined, disabled: requiresInput && !isFormValid, onClick: requiresInput ? undefined : () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: confirmLabel })] })] })] }));
+                                    testId: testId && `${testId}-type-to-confirm-input`,
+                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, children: cancelLabel })), _jsx(AlertDialogAction, { type: "submit", form: requiresInput ? formId : undefined, disabled: requiresInput && !isFormValid, onClick: requiresInput ? undefined : () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), className: confirmClassName, "data-testid": testId && `${testId}-confirm-button`, children: confirmLabel })] })] })] }));
 };
 ConfirmDialog.displayName = "ConfirmDialog";

package/dist/patterns/form-dialog/FormDialog.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogTrigger, } from "@/components/Dialog/Dialog";
 import Button from "@/components/Button/Button";
-export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, formId, }) => {
+export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, formId, testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasFooter = confirmAction || cancelAction || extraAction;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description && (_jsx(DialogDescription, { children: description }))] }), children && (_jsx(DialogBody, { scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: extraAction ? "justify-between" : undefined, children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : ((_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button"), form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, children: confirmAction.label }))] })] }))] })] }));
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(DialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: extraAction ? "justify-between" : undefined, children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
 };
 FormDialog.displayName = "FormDialog";

package/dist/src/theme/global.css

@@ -4259,6 +4259,10 @@ input[type=number] {
   min-width: 18rem;
 }
 
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .min-w-\[154px\] {
   min-width: 154px;
 }
@@ -4641,6 +4645,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
 .break-all {
   word-break: break-all;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.15",
+  "version": "0.1.18",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/AlertDialog/AlertDialog.tsx

@@ -101,7 +101,7 @@ const AlertDialogAction = React.forwardRef<
     ref={ref}
     className={cn(
       buttonVariants({ fullwidth: false }),
-      "w-[100px] justify-center",
+      "min-w-[100px] justify-center",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const AlertDialogCancel = React.forwardRef<
     ref={ref}
     className={cn(
       buttonVariants({ fullwidth: false, variant: "outline" }),
-      "w-[100px] justify-center",
+      "min-w-[100px] justify-center whitespace-pre-line",
       className,
     )}
     {...props}

package/src/index.ts

@@ -52,6 +52,10 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
 
+// Patterns
+export * from "./patterns/confirm-dialog/ConfirmDialog";
+export * from "./patterns/form-dialog/FormDialog";
+
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -37,6 +37,9 @@ export type ConfirmDialogProps = {
    * When true, hides the cancel button — useful for info/error alerts that only need one action.
    */
   hideCancelButton?: boolean;
+  testId?: string;
+  cancelClassName?: string;
+  confirmClassName?: string;
 };
 
 type ConfirmFormValues = { confirmInput: string };
@@ -54,6 +57,9 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   trigger,
   typeToConfirm,
   hideCancelButton = false,
+  testId,
+  cancelClassName,
+  confirmClassName,
 }) => {
   const formId = React.useId();
   const requiresInput = !!typeToConfirm;
@@ -99,11 +105,15 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
-      <AlertDialogContent>
+      <AlertDialogContent data-testid={testId}>
         <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogTitle data-testid={testId && `${testId}-title`}>
+            {title}
+          </AlertDialogTitle>
           {description && (
-            <AlertDialogDescription>{description}</AlertDialogDescription>
+            <AlertDialogDescription data-testid={testId && `${testId}-description`}>
+              {description}
+            </AlertDialogDescription>
           )}
         </AlertDialogHeader>
 
@@ -125,6 +135,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                 hasClearIcon: true,
                 keepFooterSpace: true,
                 fullwidth: true,
+                testId: testId && `${testId}-type-to-confirm-input`,
               }}
             />
           </FormRoot>
@@ -132,7 +143,11 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
         <AlertDialogFooter>
           {!hideCancelButton && (
-            <AlertDialogCancel onClick={handleCancel}>
+            <AlertDialogCancel
+              className={cancelClassName}
+              data-testid={testId && `${testId}-cancel-button`}
+              onClick={handleCancel}
+            >
               {cancelLabel}
             </AlertDialogCancel>
           )}
@@ -141,6 +156,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
             form={requiresInput ? formId : undefined}
             disabled={requiresInput && !isFormValid}
             onClick={requiresInput ? undefined : () => onConfirm?.()}
+            className={confirmClassName}
+            data-testid={testId && `${testId}-confirm-button`}
           >
             {confirmLabel}
           </AlertDialogAction>

package/src/patterns/form-dialog/FormDialog.tsx

@@ -22,6 +22,7 @@ export type FormDialogAction = {
   disabled?: boolean;
   isLoading?: boolean;
   type?: "button" | "submit" | "reset";
+  className?: string;
 };
 
 export type FormDialogProps = {
@@ -50,6 +51,7 @@ export type FormDialogProps = {
    * Use together with a <Form id={formId} .../> inside children.
    */
   formId?: string;
+  testId?: string;
 };
 
 export const FormDialog: React.FC<FormDialogProps> = ({
@@ -65,17 +67,20 @@ export const FormDialog: React.FC<FormDialogProps> = ({
   scrollable = false,
   className,
   formId,
+  testId,
 }) => {
   const hasFooter = confirmAction || cancelAction || extraAction;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
-      <DialogContent className={className}>
+      <DialogContent className={className} data-testid={testId}>
         <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
+          <DialogTitle data-testid={testId && `${testId}-title`}>{title}</DialogTitle>
           {description && (
-            <DialogDescription>{description}</DialogDescription>
+            <DialogDescription data-testid={testId && `${testId}-description`}>
+              {description}
+            </DialogDescription>
           )}
         </DialogHeader>
 
@@ -94,6 +99,8 @@ export const FormDialog: React.FC<FormDialogProps> = ({
                 disabled={extraAction.disabled}
                 isLoading={extraAction.isLoading}
                 onClick={extraAction.onClick}
+                className={extraAction.className}
+                data-testid={testId && `${testId}-extra-button`}
               >
                 {extraAction.label}
               </Button>
@@ -108,13 +115,15 @@ export const FormDialog: React.FC<FormDialogProps> = ({
                   disabled={cancelAction.disabled}
                   isLoading={cancelAction.isLoading}
                   onClick={cancelAction.onClick}
+                  className={cancelAction.className}
+                  data-testid={testId && `${testId}-cancel-button`}
                 >
                   {cancelAction.label}
                 </Button>
               )}
               {confirmAction && (
                 <Button
-                  type={formId ? "submit" : (confirmAction.type ?? "button")}
+                  type={formId ? "submit" : confirmAction.type ?? "button"}
                   form={formId}
                   variant={confirmAction.variant ?? "solid"}
                   color={confirmAction.color ?? "primary"}
@@ -122,6 +131,8 @@ export const FormDialog: React.FC<FormDialogProps> = ({
                   disabled={confirmAction.disabled}
                   isLoading={confirmAction.isLoading}
                   onClick={confirmAction.onClick}
+                  className={confirmAction.className}
+                  data-testid={testId && `${testId}-confirm-button`}
                 >
                   {confirmAction.label}
                 </Button>