@rovula/ui 0.1.13 → 0.1.15

package/dist/src/theme/global.css

@@ -3874,10 +3874,6 @@ input[type=number] {
   margin-top: 1rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .mt-\[6px\] {
   margin-top: 6px;
 }
@@ -3910,10 +3906,6 @@ input[type=number] {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
 .hidden {
   display: none;
 }
@@ -4041,6 +4033,10 @@ input[type=number] {
   height: 15rem;
 }
 
+.h-\[200px\] {
+  height: 200px;
+}
+
 .h-\[200vh\] {
   height: 200vh;
 }
@@ -4134,10 +4130,6 @@ input[type=number] {
   min-height: 18px;
 }
 
-.min-h-\[686px\] {
-  min-height: 686px;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -4198,10 +4190,6 @@ input[type=number] {
   width: 140px;
 }
 
-.w-\[180px\] {
-  width: 180px;
-}
-
 .w-\[200px\] {
   width: 200px;
 }
@@ -6148,6 +6136,11 @@ input[type=number] {
   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));
@@ -11019,37 +11012,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) {

package/package.json

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

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   AlertDialog,
@@ -11,6 +11,7 @@ import {
   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 = {
@@ -114,7 +115,8 @@ export const FigmaFail = {
           <AlertDialogHeader>
             <AlertDialogTitle>Infomation update failed</AlertDialogTitle>
             <AlertDialogDescription>
-              Please login again and complete your profile to activate your account.
+              Please login again and complete your profile to activate your
+              account.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -127,3 +129,68 @@ export const FigmaFail = {
     </div>
   ),
 } satisfies StoryObj;
+
+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 (
+      <div className="flex w-full">
+        <AlertDialog defaultOpen>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Title</AlertDialogTitle>
+              <AlertDialogDescription>
+                Subtitle description
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <div className="flex flex-col gap-4 w-full">
+              <p className="typography-small1 text-text-contrast-max">
+                Type &ldquo;confirm&rdquo; to proceed.
+              </p>
+              <TextInput
+                label="Type to confirm"
+                required
+                value={value}
+                onChange={(e) => {
+                  setValue(e.target.value);
+                  setSubmitted(false);
+                }}
+                errorMessage={
+                  isRequired
+                    ? "This field is required."
+                    : isWrongWord
+                    ? "Please type 'confirm' to proceed"
+                    : undefined
+                }
+                hasClearIcon
+                keepFooterSpace
+                fullwidth
+              />
+            </div>
+            <AlertDialogFooter>
+              <AlertDialogCancel
+                onClick={() => {
+                  setValue("");
+                  setSubmitted(false);
+                }}
+              >
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                disabled={!isValid}
+                onClick={() => setSubmitted(true)}
+              >
+                Confirm
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    );
+  },
+} satisfies StoryObj;

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-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
+        "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-col-reverse items-center justify-center gap-3 sm:flex-row sm:gap-4",
-      className
-    )}
+    className={cn("flex flex-row items-center justify-center gap-4", className)}
     {...props}
   />
 );
@@ -92,7 +86,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("typography-small1 text-text-contrast-max", className)}
+    className={cn("typography-body3 text-text-contrast-max", className)}
     {...props}
   />
 ));
@@ -105,7 +99,11 @@ const AlertDialogAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
-    className={cn(buttonVariants({ fullwidth: false }), className)}
+    className={cn(
+      buttonVariants({ fullwidth: false }),
+      "w-[100px] justify-center",
+      className,
+    )}
     {...props}
   />
 ));
@@ -119,8 +117,8 @@ const AlertDialogCancel = React.forwardRef<
     ref={ref}
     className={cn(
       buttonVariants({ fullwidth: false, variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
+      "w-[100px] justify-center",
+      className,
     )}
     {...props}
   />

package/src/components/Dialog/Dialog.stories.tsx

@@ -188,104 +188,67 @@ const changePasswordSchema = yup.object({
     .oneOf([yup.ref("newPassword")], "Passwords must match"),
 });
 
-export const FigmaChangePassword = {
-  render: () => {
-    return (
-      <div className="flex w-full">
-        <Dialog defaultOpen>
-          <DialogContent className="min-h-[686px] max-w-[650px]">
-            <Form<ChangePasswordFormValues>
-              className="contents"
-              defaultValues={{
-                newPassword: "",
-                confirmPassword: "",
-              }}
-              mode="onTouched"
-              validationSchema={changePasswordSchema}
-              onSubmit={(values) => {
-                // eslint-disable-next-line no-console
-                console.log("Change password submit:", values);
-              }}
-            >
-              {({ formState, watch }) => {
-                const newPassword = watch("newPassword");
-                const confirmPassword = watch("confirmPassword");
-
-                return (
-                  <>
-                    <DialogHeader>
-                      <DialogTitle>Welcome!</DialogTitle>
-                      <DialogDescription>
-                        Please create a new password to replace the temporary
-                        password.
-                      </DialogDescription>
-                    </DialogHeader>
-
-                    <DialogBody>
-                      <div className="flex flex-col gap-4">
-                        <Field<ChangePasswordFormValues, "newPassword">
-                          name="newPassword"
-                          component={PasswordInput}
-                          componentProps={{
-                            id: "new-password",
-                            label: "New password",
-                            type: "password",
-                            required: true,
-                            fullwidth: true,
-                            size: "lg",
-                          }}
-                        />
-                        <Field<ChangePasswordFormValues, "confirmPassword">
-                          name="confirmPassword"
-                          component={PasswordInput}
-                          componentProps={{
-                            id: "confirm-password",
-                            label: "Confirm password",
-                            type: "password",
-                            required: true,
-                            fullwidth: true,
-                            size: "lg",
-                          }}
-                        />
-
-                        <ValidationHintList<ChangePasswordFormValues>
-                          values={{
-                            newPassword: newPassword || "",
-                            confirmPassword: confirmPassword || "",
-                          }}
-                          rules={passwordHints}
-                        />
-                      </div>
-                    </DialogBody>
+export const FigmaFunctionForm = {
+  render: () => (
+    <div className="flex w-full">
+      <Dialog defaultOpen>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Title</DialogTitle>
+            <DialogDescription>Subtitle description</DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
+              <p className="typography-body3 text-text-contrast-max">
+                Content - Form Area
+              </p>
+            </div>
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="outline" color="primary" fullwidth={false}>
+              Cancel
+            </Button>
+            <Button disabled fullwidth={false}>
+              Confirm
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  ),
+} satisfies StoryObj;
 
-                    <DialogFooter>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        color="primary"
-                        size="lg"
-                        fullwidth={false}
-                      >
-                        Back
-                      </Button>
-                      <Button
-                        type="submit"
-                        size="lg"
-                        fullwidth={false}
-                        className="w-[180px]"
-                        disabled={!formState.isValid || formState.isSubmitting}
-                        isLoading={formState.isSubmitting}
-                      >
-                        Save changes
-                      </Button>
-                    </DialogFooter>
-                  </>
-                );
-              }}
-            </Form>
-          </DialogContent>
-        </Dialog>
-      </div>
-    );
-  },
+export const FigmaFunctionFormWithAction = {
+  render: () => (
+    <div className="flex w-full">
+      <Dialog defaultOpen>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Title</DialogTitle>
+            <DialogDescription>Subtitle description</DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
+              <p className="typography-body3 text-text-contrast-max">
+                Content - Form Area
+              </p>
+            </div>
+          </DialogBody>
+          <DialogFooter className="justify-between">
+            <Button variant="outline" color="secondary" fullwidth={false}>
+              Medium
+            </Button>
+            <div className="flex items-center gap-4">
+              <Button variant="outline" color="primary" fullwidth={false}>
+                Cancel
+              </Button>
+              <Button disabled fullwidth={false}>
+                Confirm
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  ),
 } satisfies StoryObj;

package/src/components/Dialog/Dialog.tsx

@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         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%]",
+          "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}
@@ -78,7 +78,7 @@ const DialogHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />
+  <div className={cn("flex flex-col gap-1 text-left", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 
@@ -89,7 +89,7 @@ const DialogBody = ({
 }: React.HTMLAttributes<HTMLDivElement> & { scrollable?: boolean }) => (
   <div
     className={cn(
-      "flex flex-1 min-h-0 flex-col mt-8",
+      "flex flex-1 min-h-0 flex-col",
       scrollable && "overflow-y-auto",
       className,
     )}
@@ -103,10 +103,7 @@ const DialogFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-6",
-      className,
-    )}
+    className={cn("flex flex-row items-center justify-end gap-4", className)}
     {...props}
   />
 );
@@ -119,7 +116,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "typography-h4 tracking-tight text-text-contrast-max",
+      "typography-h6 tracking-tight text-text-contrast-max",
       className,
     )}
     {...props}
@@ -133,10 +130,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn(
-      "typography-subtitle1 text-text-g-contrast-medium",
-      className,
-    )}
+    className={cn("typography-body3 text-text-contrast-max", className)}
     {...props}
   />
 ));

package/src/components/Form/Form.tsx

@@ -110,11 +110,26 @@ export const useControlledForm = <TFieldValues extends FieldValues>({
     reValidateMode,
   });
 
-  return createControlledForm<TFieldValues>({
+  // 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<ReturnType<
+    typeof createControlledForm<TFieldValues>
+  > | null>(null);
+
+  if (!stableRef.current) {
+    stableRef.current = createControlledForm<TFieldValues>({
+      methods,
+      defaultValues,
+      controllerRef,
+    });
+  }
+
+  return {
     methods,
-    defaultValues,
-    controllerRef,
-  });
+    FormRoot: stableRef.current.FormRoot,
+  };
 };
 
 const FormInner = <TFieldValues extends FieldValues>(