@rovula/ui 0.1.14 → 0.1.15

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-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) }, 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) => {

package/dist/components/Dialog/Dialog.js

@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef((_a, ref) => {
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef((_a, ref) => {
     var { className, children, showCloseButton = false, closeButtonClassName } = _a, props = __rest(_a, ["className", "children", "showCloseButton", "closeButtonClassName"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none 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) => {

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"]);