@insforge/react 0.3.0 → 0.3.2

package/dist/atoms.d.mts

@@ -366,14 +366,14 @@ declare function AuthVerificationCodeInput({ length, value, email, onChange, dis
 type VerificationMethod = 'code' | 'link';
 interface AuthEmailVerificationStepProps {
     email: string;
-    title?: string;
     description?: string;
     method?: VerificationMethod;
     onVerifyCode?: (code: string) => Promise<void>;
 }
 /**
- * Email verification step component
+ * Email verification step component (pure UI, no container)
  *
+ * Designed to be embedded within a form container.
  * Handles the email verification flow:
  * - Automatically sends verification email on mount
  * - Shows countdown timer for resend functionality
@@ -382,6 +382,6 @@ interface AuthEmailVerificationStepProps {
  *
  * @param method - 'code' for OTP input, 'link' for magic link (default: 'code')
  */
-declare function AuthEmailVerificationStep({ email, title, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
+declare function AuthEmailVerificationStep({ email, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
 
 export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };

package/dist/atoms.d.ts

@@ -366,14 +366,14 @@ declare function AuthVerificationCodeInput({ length, value, email, onChange, dis
 type VerificationMethod = 'code' | 'link';
 interface AuthEmailVerificationStepProps {
     email: string;
-    title?: string;
     description?: string;
     method?: VerificationMethod;
     onVerifyCode?: (code: string) => Promise<void>;
 }
 /**
- * Email verification step component
+ * Email verification step component (pure UI, no container)
  *
+ * Designed to be embedded within a form container.
  * Handles the email verification flow:
  * - Automatically sends verification email on mount
  * - Shows countdown timer for resend functionality
@@ -382,6 +382,6 @@ interface AuthEmailVerificationStepProps {
  *
  * @param method - 'code' for OTP input, 'link' for magic link (default: 'code')
  */
-declare function AuthEmailVerificationStep({ email, title, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
+declare function AuthEmailVerificationStep({ email, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
 
 export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };

package/dist/atoms.js

@@ -748,7 +748,6 @@ function useInsforge() {
 }
 function AuthEmailVerificationStep({
   email,
-  title = "Verify Your Email",
   description,
   method = "code",
   onVerifyCode
@@ -825,29 +824,29 @@ function AuthEmailVerificationStep({
     }
   };
   const displayDescription = description || defaultDescription;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-black dark:text-white", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        part,
-        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
-      ] }, index)) }),
-      method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthVerificationCodeInput,
-          {
-            value: verificationCode,
-            onChange: setVerificationCode,
-            email,
-            disabled: isVerifying,
-            onComplete: (code) => {
-              void handleVerifyCode(code);
-            }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 items-stretch", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      part,
+      index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+    ] }, index)) }),
+    verificationError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-6 h-6 text-red-500 shrink-0", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
+    ] }) }),
+    method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying,
+          onComplete: (code) => {
+            void handleVerifyCode(code);
           }
-        ),
-        verificationError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400 text-center", children: verificationError }),
-        isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
-      ] })
+        }
+      ),
+      isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
       "Didn't receive the email?",