@rovula/ui 0.1.13 → 0.1.15

package/dist/cjs/types/components/AlertDialog/AlertDialog.stories.d.ts

@@ -25,3 +25,6 @@ export declare const CustomStyle: {
 export declare const FigmaFail: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FigmaConfirmRequirePassword: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts

@@ -23,6 +23,9 @@ export declare const Demo: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const FigmaChangePassword: {
+export declare const FigmaFunctionForm: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaFunctionFormWithAction: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/components/AlertDialog/AlertDialog.js

@@ -25,7 +25,7 @@ const AlertDialogOverlay = React.forwardRef((_a, ref) => {
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ 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-8 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 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))] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ 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 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))] }));
 });
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = (_a) => {
@@ -35,7 +35,7 @@ const AlertDialogHeader = (_a) => {
 AlertDialogHeader.displayName = "AlertDialogHeader";
 const AlertDialogFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse items-center justify-center gap-3 sm:flex-row sm:gap-4", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-row items-center justify-center gap-4", className) }, props)));
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef((_a, ref) => {
@@ -45,18 +45,18 @@ const AlertDialogTitle = React.forwardRef((_a, ref) => {
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 const AlertDialogDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-small1 text-text-contrast-max", className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-body3 text-text-contrast-max", className) }, props)));
 });
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;
 const AlertDialogAction = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false }), className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false }), "w-[100px] justify-center", className) }, props)));
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 const AlertDialogCancel = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false, variant: "outline" }), "mt-2 sm:mt-0", className) }, props)));
+    return (_jsx(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false, variant: "outline" }), "w-[100px] justify-center", className) }, props)));
 });
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/AlertDialog/AlertDialog.stories.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./AlertDialog";
+import { TextInput } from "../TextInput/TextInput";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
     title: "Components/AlertDialog",
@@ -41,3 +43,23 @@ export const CustomStyle = {
 export const FigmaFail = {
     render: () => (_jsx("div", { className: "flex w-full", children: _jsx(AlertDialog, { defaultOpen: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Infomation update failed" }), _jsx(AlertDialogDescription, { children: "Please login again and complete your profile to activate your account." })] }), _jsx(AlertDialogFooter, { children: _jsx(AlertDialogAction, { className: "w-[140px] justify-center", children: "Try again" }) })] }) }) })),
 };
+export const FigmaConfirmRequirePassword = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const [submitted, setSubmitted] = useState(false);
+        const isRequired = submitted && value === "";
+        const isWrongWord = submitted && value !== "" && value !== "confirm";
+        const isValid = value === "confirm";
+        return (_jsx("div", { className: "flex w-full", children: _jsx(AlertDialog, { defaultOpen: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Title" }), _jsx(AlertDialogDescription, { children: "Subtitle description" })] }), _jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsx("p", { className: "typography-small1 text-text-contrast-max", children: "Type \u201Cconfirm\u201D to proceed." }), _jsx(TextInput, { label: "Type to confirm", required: true, value: value, onChange: (e) => {
+                                        setValue(e.target.value);
+                                        setSubmitted(false);
+                                    }, errorMessage: isRequired
+                                        ? "This field is required."
+                                        : isWrongWord
+                                            ? "Please type 'confirm' to proceed"
+                                            : undefined, hasClearIcon: true, keepFooterSpace: true, fullwidth: true })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: () => {
+                                        setValue("");
+                                        setSubmitted(false);
+                                    }, children: "Cancel" }), _jsx(AlertDialogAction, { disabled: !isValid, onClick: () => setSubmitted(true), children: "Confirm" })] })] }) }) }));
+    },
+};

package/dist/components/Dialog/Dialog.js

@@ -26,32 +26,32 @@ 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 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 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, { 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) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col gap-2 text-left", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col gap-1 text-left", className) }, props)));
 };
 DialogHeader.displayName = "DialogHeader";
 const DialogBody = (_a) => {
     var { className, scrollable = false } = _a, props = __rest(_a, ["className", "scrollable"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-1 min-h-0 flex-col mt-8", scrollable && "overflow-y-auto", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-1 min-h-0 flex-col", scrollable && "overflow-y-auto", className) }, props)));
 };
 DialogBody.displayName = "DialogBody";
 const DialogFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-6", className) }, props)));
+    return (_jsx("div", Object.assign({ className: cn("flex flex-row items-center justify-end gap-4", className) }, props)));
 };
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h4 tracking-tight text-text-contrast-max", className) }, props)));
+    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h6 tracking-tight text-text-contrast-max", className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-subtitle1 text-text-g-contrast-medium", className) }, props)));
+    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("typography-body3 text-text-contrast-max", className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -1,11 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { Field, Form, ValidationHintList } from "../Form";
-import PasswordInput from "../PasswordInput";
 const meta = {
     title: "Components/Dialog",
     component: Dialog,
@@ -95,35 +93,9 @@ const changePasswordSchema = yup.object({
         .required("Please confirm your password")
         .oneOf([yup.ref("newPassword")], "Passwords must match"),
 });
-export const FigmaChangePassword = {
-    render: () => {
-        return (_jsx("div", { className: "flex w-full", children: _jsx(Dialog, { defaultOpen: true, children: _jsx(DialogContent, { className: "min-h-[686px] max-w-[650px]", children: _jsx(Form, { className: "contents", defaultValues: {
-                            newPassword: "",
-                            confirmPassword: "",
-                        }, mode: "onTouched", validationSchema: changePasswordSchema, onSubmit: (values) => {
-                            // eslint-disable-next-line no-console
-                            console.log("Change password submit:", values);
-                        }, children: ({ formState, watch }) => {
-                            const newPassword = watch("newPassword");
-                            const confirmPassword = watch("confirmPassword");
-                            return (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Welcome!" }), _jsx(DialogDescription, { children: "Please create a new password to replace the temporary password." })] }), _jsx(DialogBody, { children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { name: "newPassword", component: PasswordInput, componentProps: {
-                                                        id: "new-password",
-                                                        label: "New password",
-                                                        type: "password",
-                                                        required: true,
-                                                        fullwidth: true,
-                                                        size: "lg",
-                                                    } }), _jsx(Field, { name: "confirmPassword", component: PasswordInput, componentProps: {
-                                                        id: "confirm-password",
-                                                        label: "Confirm password",
-                                                        type: "password",
-                                                        required: true,
-                                                        fullwidth: true,
-                                                        size: "lg",
-                                                    } }), _jsx(ValidationHintList, { values: {
-                                                        newPassword: newPassword || "",
-                                                        confirmPassword: confirmPassword || "",
-                                                    }, rules: passwordHints })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", color: "primary", size: "lg", fullwidth: false, children: "Back" }), _jsx(Button, { type: "submit", size: "lg", fullwidth: false, className: "w-[180px]", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Save changes" })] })] }));
-                        } }) }) }) }));
-    },
+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" })] })] })] }) }) })),
 };

package/dist/components/Form/Form.js

@@ -35,11 +35,22 @@ export const useControlledForm = ({ defaultValues, controllerRef, resolver, vali
         mode,
         reValidateMode,
     });
-    return createControlledForm({
+    // Keep FormRoot component reference stable across re-renders.
+    // createControlledForm creates a new component type (via forwardRef) on every call —
+    // if FormRoot changes reference, React unmounts + remounts the entire form tree,
+    // causing inputs to lose focus whenever parent state changes (e.g. isValid).
+    const stableRef = React.useRef(null);
+    if (!stableRef.current) {
+        stableRef.current = createControlledForm({
+            methods,
+            defaultValues,
+            controllerRef,
+        });
+    }
+    return {
         methods,
-        defaultValues,
-        controllerRef,
-    });
+        FormRoot: stableRef.current.FormRoot,
+    };
 };
 const FormInner = (_a, ref) => {
     var { children, defaultValues, methods: externalMethods, controllerRef, onSubmit, onInvalidSubmit, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", noValidate = true } = _a, formProps = __rest(_a, ["children", "defaultValues", "methods", "controllerRef", "onSubmit", "onInvalidSubmit", "resolver", "validationSchema", "mode", "reValidateMode", "noValidate"]);

package/dist/esm/bundle.css

@@ -770,9 +770,6 @@ input[type=number] {
 .mt-4{
   margin-top: 1rem;
 }
-.mt-8{
-  margin-top: 2rem;
-}
 .mt-\[6px\]{
   margin-top: 6px;
 }
@@ -797,9 +794,6 @@ input[type=number] {
 .grid{
   display: grid;
 }
-.contents{
-  display: contents;
-}
 .hidden{
   display: none;
 }
@@ -899,6 +893,9 @@ input[type=number] {
 .h-60{
   height: 15rem;
 }
+.h-\[200px\]{
+  height: 200px;
+}
 .h-\[200vh\]{
   height: 200vh;
 }
@@ -969,9 +966,6 @@ input[type=number] {
 .min-h-\[18px\]{
   min-height: 18px;
 }
-.min-h-\[686px\]{
-  min-height: 686px;
-}
 .min-h-screen{
   min-height: 100vh;
 }
@@ -1017,9 +1011,6 @@ input[type=number] {
 .w-\[140px\]{
   width: 140px;
 }
-.w-\[180px\]{
-  width: 180px;
-}
 .w-\[200px\]{
   width: 200px;
 }
@@ -2552,6 +2543,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--transparent-primary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-ramps-secondary-150{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--ramps-secondary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
 .bg-red-100{
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
@@ -6410,37 +6405,13 @@ input[type=number] {
 }
 @media (min-width: 640px){
 
-  .sm\:mt-0{
-    margin-top: 0px;
-  }
-
   .sm\:max-w-\[425px\]{
     max-width: 425px;
   }
 
-  .sm\:flex-row{
-    flex-direction: row;
-  }
-
-  .sm\:items-center{
-    align-items: center;
-  }
-
-  .sm\:justify-end{
-    justify-content: flex-end;
-  }
-
   .sm\:justify-stretch{
     justify-content: stretch;
   }
-
-  .sm\:gap-4{
-    gap: 1rem;
-  }
-
-  .sm\:gap-6{
-    gap: 1.5rem;
-  }
 }
 @media (min-width: 768px){