@rovula/ui 0.1.14 → 0.1.15

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/patterns/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,24 @@
+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;
+};
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

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

@@ -0,0 +1,53 @@
+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;
+    }>) => 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,39 @@
+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;
+};
+export declare const FormDialog: React.FC<FormDialogProps>;

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

@@ -0,0 +1,62 @@
+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;
+    }>) => 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

@@ -1207,7 +1207,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> & {

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

@@ -0,0 +1,44 @@
+"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, }) => {
+    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, { 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: {
+                                    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 })] })] })] }));
+};
+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, }) => {
+    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 }))] })] }))] })] }));
+};
+FormDialog.displayName = "FormDialog";

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

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { useArgs } from "@storybook/preview-api";
+import { FormDialog } from "./FormDialog";
+import Button from "@/components/Button/Button";
+import { TextInput } from "@/components/TextInput/TextInput";
+import { useControlledForm, Field } from "@/components/Form";
+import * as yup from "yup";
+const meta = {
+    title: "Patterns/FormDialog",
+    component: FormDialog,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        open: { control: "boolean" },
+        title: { control: "text" },
+        description: { control: "text" },
+        scrollable: { control: "boolean" },
+    },
+};
+export default meta;
+const ContentArea = () => (_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" }) }));
+export const Default = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+export const WithExtraAction = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), extraAction: {
+                label: "Medium",
+                onClick: () => console.log("extra action"),
+            }, cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open (with extra action)" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+export const WithForm = {
+    args: {
+        open: false,
+        title: "Edit profile",
+        description: "Make changes to your profile here.",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        const [name, setName] = useState("");
+        const isValid = name.trim().length > 0;
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => {
+                if (!next)
+                    setName("");
+                updateArgs({ open: next });
+            }, cancelAction: {
+                label: "Cancel",
+                onClick: () => {
+                    setName("");
+                    updateArgs({ open: false });
+                },
+            }, confirmAction: {
+                label: "Save changes",
+                disabled: !isValid,
+                onClick: () => {
+                    console.log("save:", name);
+                    updateArgs({ open: false });
+                },
+            }, trigger: _jsx(Button, { variant: "outline", fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Edit profile" }), children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx(TextInput, { label: "Display name", required: true, value: name, onChange: (e) => setName(e.target.value), fullwidth: true }) }) })));
+    },
+};
+export const FigmaFormDefaultOpen = {
+    args: {
+        open: true,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+export const FigmaFormWithActionDefaultOpen = {
+    args: {
+        open: true,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), extraAction: { label: "Medium" }, cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+const editProfileSchema = yup.object({
+    displayName: yup.string().required("Display name is required."),
+    email: yup
+        .string()
+        .required("Email is required.")
+        .email("Must be a valid email."),
+});
+const EditProfileDialog = ({ open, onOpenChange }) => {
+    const formId = React.useId();
+    const { methods, FormRoot } = useControlledForm({
+        defaultValues: { displayName: "", email: "" },
+        validationSchema: editProfileSchema,
+        mode: "onTouched",
+        reValidateMode: "onChange",
+    });
+    const isValid = methods.formState.isValid;
+    const handleClose = () => {
+        methods.reset();
+        onOpenChange(false);
+    };
+    const handleSubmit = (values) => {
+        console.log("submitted:", values);
+        handleClose();
+    };
+    return (_jsx(FormDialog, { open: open, onOpenChange: (next) => {
+            if (!next)
+                handleClose();
+            else
+                onOpenChange(next);
+        }, title: "Edit profile", description: "Make changes to your profile here.", formId: formId, cancelAction: { label: "Cancel", onClick: handleClose }, confirmAction: { label: "Save changes", disabled: !isValid }, children: _jsxs(FormRoot, { id: formId, onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(Field, { name: "displayName", component: TextInput, componentProps: {
+                        label: "Display name",
+                        required: true,
+                        fullwidth: true,
+                    } }), _jsx(Field, { name: "email", component: TextInput, componentProps: { label: "Email", required: true, fullwidth: true } })] }) }));
+};
+const EditProfileDialogWithLoading = ({ open, onOpenChange, }) => {
+    const formId = React.useId();
+    const [isLoading, setIsLoading] = useState(false);
+    const { methods, FormRoot } = useControlledForm({
+        defaultValues: { displayName: "", email: "" },
+        validationSchema: editProfileSchema,
+        mode: "onTouched",
+        reValidateMode: "onChange",
+    });
+    const isValid = methods.formState.isValid;
+    const handleClose = () => {
+        methods.reset();
+        onOpenChange(false);
+    };
+    const handleSubmit = async (values) => {
+        setIsLoading(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            console.log("saved:", values);
+            handleClose();
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsx(FormDialog, { open: open, onOpenChange: (next) => {
+            if (!next && !isLoading)
+                handleClose();
+            else if (next)
+                onOpenChange(next);
+        }, title: "Edit profile", description: "Make changes to your profile here.", formId: formId, cancelAction: {
+            label: "Cancel",
+            onClick: handleClose,
+            disabled: isLoading,
+        }, confirmAction: {
+            label: "Save changes",
+            disabled: !isValid || isLoading,
+            isLoading,
+        }, children: _jsxs(FormRoot, { id: formId, onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(Field, { name: "displayName", component: TextInput, componentProps: {
+                        label: "Display name",
+                        required: true,
+                        fullwidth: true,
+                    } }), _jsx(Field, { name: "email", component: TextInput, componentProps: { label: "Email", required: true, fullwidth: true } })] }) }));
+};
+/**
+ * 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 const WithRovulaForm = {
+    args: { open: false },
+    render: () => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Edit profile" }), _jsx(EditProfileDialog, { open: open, onOpenChange: (next) => updateArgs({ open: next }) })] }));
+    },
+};
+/**
+ * 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 const WithRovulaFormAndApiLoading = {
+    args: { open: false },
+    render: () => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Edit profile (with loading)" }), _jsx(EditProfileDialogWithLoading, { open: open, onOpenChange: (next) => updateArgs({ open: next }) })] }));
+    },
+};

package/package.json

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

package/src/components/AlertDialog/AlertDialog.tsx

@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 bg-modal-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -37,8 +37,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible: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
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max 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}
     />
@@ -51,10 +51,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col items-center gap-2 text-center",
-      className
-    )}
+    className={cn("flex flex-col items-center gap-2 text-center", className)}
     {...props}
   />
 );
@@ -65,10 +62,7 @@ const AlertDialogFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-row items-center justify-center gap-4",
-      className
-    )}
+    className={cn("flex flex-row items-center justify-center gap-4", className)}
     {...props}
   />
 );
@@ -105,7 +99,11 @@ const AlertDialogAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
-    className={cn(buttonVariants({ fullwidth: false }), "w-[100px] justify-center", className)}
+    className={cn(
+      buttonVariants({ fullwidth: false }),
+      "w-[100px] justify-center",
+      className,
+    )}
     {...props}
   />
 ));
@@ -120,7 +118,7 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ fullwidth: false, variant: "outline" }),
       "w-[100px] justify-center",
-      className
+      className,
     )}
     {...props}
   />