@rovula/ui 0.1.14 → 0.1.16

package/dist/esm/types/components/Form/Form.d.ts

@@ -40,7 +40,7 @@ export declare const createControlledForm: <TFieldValues extends FieldValues>({
     FormRoot: React.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React.RefAttributes<FormController<TFieldValues>>>;
 };
 export declare const useControlledForm: <TFieldValues extends FieldValues>({ defaultValues, controllerRef, resolver, validationSchema, mode, reValidateMode, }: UseControlledFormOptions<TFieldValues>) => {
-    methods: UseFormReturn<TFieldValues>;
+    methods: UseFormReturn<TFieldValues, any, TFieldValues>;
     FormRoot: React.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React.RefAttributes<FormController<TFieldValues>>>;
 };
 type FormComponent = <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+export 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;
+};
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { ConfirmDialog } from "./ConfirmDialog";
+declare const meta: {
+    title: string;
+    component: React.FC<import("./ConfirmDialog").ConfirmDialogProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        open?: boolean | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        title: string;
+        description?: string | undefined;
+        confirmLabel?: string | undefined;
+        cancelLabel?: string | undefined;
+        onConfirm?: (() => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        trigger?: React.ReactNode;
+        typeToConfirm?: string | undefined;
+        hideCancelButton?: boolean | undefined;
+        testId?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        open: {
+            control: "boolean";
+        };
+        typeToConfirm: {
+            control: "text";
+        };
+        title: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        confirmLabel: {
+            control: "text";
+        };
+        cancelLabel: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ConfirmDialog>;
+export declare const Default: Story;
+export declare const WithoutDescription: Story;
+export declare const WithoutCancelButton: Story;
+export declare const RequireConfirmText: Story;
+export declare const FigmaDefaultOpen: Story;
+export declare const FigmaRequirePasswordDefaultOpen: Story;

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import Button from "@/components/Button/Button";
+export type FormDialogAction = {
+    label: string;
+    onClick?: () => void;
+    variant?: React.ComponentProps<typeof Button>["variant"];
+    color?: React.ComponentProps<typeof Button>["color"];
+    disabled?: boolean;
+    isLoading?: boolean;
+    type?: "button" | "submit" | "reset";
+};
+export 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;
+};
+export declare const FormDialog: React.FC<FormDialogProps>;

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

@@ -0,0 +1,63 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { FormDialog } from "./FormDialog";
+declare const meta: {
+    title: string;
+    component: React.FC<import("./FormDialog").FormDialogProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        open?: boolean | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        title: string;
+        description?: string | undefined;
+        children?: React.ReactNode;
+        trigger?: React.ReactNode;
+        confirmAction?: import("./FormDialog").FormDialogAction | undefined;
+        cancelAction?: import("./FormDialog").FormDialogAction | undefined;
+        extraAction?: import("./FormDialog").FormDialogAction | undefined;
+        scrollable?: boolean | undefined;
+        className?: string | undefined;
+        formId?: string | undefined;
+        testId?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        open: {
+            control: "boolean";
+        };
+        title: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        scrollable: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof FormDialog>;
+export declare const Default: Story;
+export declare const WithExtraAction: Story;
+export declare const WithForm: Story;
+export declare const FigmaFormDefaultOpen: Story;
+export declare const FigmaFormWithActionDefaultOpen: Story;
+/**
+ * Pattern A: useControlledForm
+ *
+ * Use when you need to:
+ * - access formState (isValid, isDirty) to control the confirm button
+ * - reset the form on close
+ * - trigger validation outside the form element
+ */
+export declare const WithRovulaForm: Story;
+/**
+ * Pattern B: useControlledForm + async API call + loading state
+ *
+ * Use when the confirm action calls an API.
+ * isLoading disables + shows spinner on the confirm button while the request is in flight.
+ */
+export declare const WithRovulaFormAndApiLoading: Story;

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 = {
@@ -1207,7 +1208,7 @@ declare const createControlledForm: <TFieldValues extends FieldValues>({ methods
     FormRoot: React__default.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React__default.RefAttributes<FormController<TFieldValues>>>;
 };
 declare const useControlledForm: <TFieldValues extends FieldValues>({ defaultValues, controllerRef, resolver, validationSchema, mode, reValidateMode, }: UseControlledFormOptions<TFieldValues>) => {
-    methods: UseFormReturn<TFieldValues>;
+    methods: UseFormReturn<TFieldValues, any, TFieldValues>;
     FormRoot: React__default.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React__default.RefAttributes<FormController<TFieldValues>>>;
 };
 type FormComponent = <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
@@ -1281,6 +1282,70 @@ 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;
+};
+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";
+};
+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 +1785,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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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, testId, }) => {
+    const formId = React.useId();
+    const requiresInput = !!typeToConfirm;
+    const validationSchema = React.useMemo(() => yup.object({
+        confirmInput: yup
+            .string()
+            .required("This field is required.")
+            .test("type-to-confirm", `Please type '${typeToConfirm}' to proceed`, (value) => value === typeToConfirm),
+    }), [typeToConfirm]);
+    const { methods, FormRoot } = useControlledForm({
+        defaultValues: { confirmInput: "" },
+        validationSchema,
+        mode: "onTouched",
+        reValidateMode: "onChange",
+    });
+    const isFormValid = methods.formState.isValid;
+    const handleOpenChange = (nextOpen) => {
+        if (!nextOpen) {
+            methods.reset();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    };
+    const handleCancel = () => {
+        methods.reset();
+        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, { "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,
+                                    testId: testId && `${testId}-type-to-confirm-input`,
+                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { "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(), "data-testid": testId && `${testId}-confirm-button`, children: confirmLabel })] })] })] }));
+};
+ConfirmDialog.displayName = "ConfirmDialog";

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from "@storybook/preview-api";
+import { ConfirmDialog } from "./ConfirmDialog";
+import Button from "@/components/Button/Button";
+const meta = {
+    title: "Patterns/ConfirmDialog",
+    component: ConfirmDialog,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        open: { control: "boolean" },
+        typeToConfirm: { control: "text" },
+        title: { control: "text" },
+        description: { control: "text" },
+        confirmLabel: { control: "text" },
+        cancelLabel: { control: "text" },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        open: false,
+        title: "Are you sure?",
+        description: "This action cannot be undone.",
+        confirmLabel: "Confirm",
+        cancelLabel: "Cancel",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }) })));
+    },
+};
+export const WithoutDescription = {
+    args: {
+        open: false,
+        title: "Delete item?",
+        confirmLabel: "Delete",
+        cancelLabel: "Cancel",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, color: "error", onClick: () => updateArgs({ open: true }), children: "Delete" }) })));
+    },
+};
+export const WithoutCancelButton = {
+    args: {
+        open: false,
+        title: "Are you sure?",
+        description: "This action cannot be undone.",
+        confirmLabel: "Confirm",
+        hideCancelButton: true,
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, color: "error", onClick: () => updateArgs({ open: true }), children: "Confirm" }) })));
+    },
+};
+export const RequireConfirmText = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+        confirmLabel: "Confirm",
+        cancelLabel: "Cancel",
+        typeToConfirm: "confirm",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open (require confirm)" }) })));
+    },
+};
+export const FigmaDefaultOpen = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+        confirmLabel: "Confirm",
+        cancelLabel: "Cancel",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }) })));
+    },
+};
+export const FigmaRequirePasswordDefaultOpen = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+        confirmLabel: "Confirm",
+        cancelLabel: "Cancel",
+        typeToConfirm: "confirm",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }) })));
+    },
+};

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

@@ -0,0 +1,10 @@
+"use client";
+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, 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, "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, "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, "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, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
+};
+FormDialog.displayName = "FormDialog";