@mesob/auth-react 0.0.3 → 0.0.5

package/dist/components/{sign-in.js → auth/sign-in.js}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/sign-in.tsx
+// src/components/auth/sign-in.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@mesob/ui/components/button";
 import {
@@ -12,11 +12,32 @@ import {
   FormMessage
 } from "@mesob/ui/components/form";
 import { Input } from "@mesob/ui/components/input";
-import { Eye, EyeOff } from "lucide-react";
+import { Spinner } from "@mesob/ui/components/spinner";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
 import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+
+// src/utils/normalize-phone.ts
+function normalizePhone(phone) {
+  const cleaned = phone.trim().replace(/\s/g, "");
+  if (cleaned.startsWith("+2519")) {
+    return cleaned;
+  }
+  if (cleaned.startsWith("2519")) {
+    return `+${cleaned}`;
+  }
+  if (cleaned.startsWith("09")) {
+    return `+251${cleaned.slice(1)}`;
+  }
+  if (cleaned.startsWith("9") && cleaned.length === 9) {
+    return `+251${cleaned}`;
+  }
+  return cleaned;
+}
+
+// src/components/auth/sign-in.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var SignIn = ({
   onSubmit,
@@ -29,7 +50,17 @@ var SignIn = ({
   const [showPassword, setShowPassword] = useState(false);
   const identifierSchema = useMemo(
     () => z.object({
-      account: z.string().min(1, t("errors.accountRequired")).email(t("errors.invalidEmail"))
+      account: z.string().trim().min(1, { message: t("errors.requiredField") }).refine(
+        (val) => {
+          const isEmail = z.string().email().safeParse(val).success;
+          const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
+          const isPhone = phoneRegex.test(val);
+          return isEmail || isPhone;
+        },
+        {
+          message: t("errors.invalidEmailOrPhone")
+        }
+      )
     }),
     [t]
   );
@@ -52,7 +83,9 @@ var SignIn = ({
     }
   });
   const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {
-    await onSubmit({ account: values.account, password: "" }, "identifier");
+    const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
+    const normalizedAccount = phoneRegex.test(values.account) ? normalizePhone(values.account) : values.account;
+    await onSubmit({ account: normalizedAccount, password: "" }, "identifier");
   });
   const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {
     await onSubmit(
@@ -79,6 +112,7 @@ var SignIn = ({
                 {
                   type: showPassword ? "text" : "password",
                   placeholder: t("form.passwordPlaceholder"),
+                  autoComplete: "current-password",
                   ...field
                 }
               ),
@@ -88,7 +122,7 @@ var SignIn = ({
                   type: "button",
                   onClick: () => setShowPassword(!showPassword),
                   className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+                  children: showPassword ? /* @__PURE__ */ jsx(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconEye, { className: "h-4 w-4" })
                 }
               )
             ] }) }),
@@ -119,7 +153,10 @@ var SignIn = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.continue") })
+    /* @__PURE__ */ jsxs(Button, { type: "submit", className: "w-full", disabled: isLoading, children: [
+      isLoading && /* @__PURE__ */ jsx(Spinner, {}),
+      isLoading ? t("form.submitting") : t("form.continue")
+    ] })
   ] }) });
 };
 export {

package/dist/components/auth/sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/auth/sign-in.tsx","../../../src/utils/normalize-phone.ts"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button } from '@mesob/ui/components/button';\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@mesob/ui/components/form';\nimport { Input } from '@mesob/ui/components/input';\nimport { Spinner } from '@mesob/ui/components/spinner';\nimport { IconEye, IconEyeOff } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { useMemo, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\nimport { normalizePhone } from '../../utils/normalize-phone';\n\ntype SignInFormValues = {\n  account: string;\n  password: string;\n};\n\ntype SignInProps = {\n  onSubmit: (\n    values: SignInFormValues,\n    step: 'identifier' | 'password',\n  ) => Promise<void> | void;\n  isLoading?: boolean;\n  identifier?: string;\n  step?: 'identifier' | 'password';\n  onBack?: () => void;\n};\n\nexport const SignIn = ({\n  onSubmit,\n  isLoading = false,\n  identifier = '',\n  step = 'identifier',\n  onBack: _onBack,\n}: SignInProps) => {\n  const t = useTranslations('Auth.signIn');\n  const [showPassword, setShowPassword] = useState(false);\n\n  const identifierSchema = useMemo(\n    () =>\n      z.object({\n        account: z\n          .string()\n          .trim()\n          .min(1, { message: t('errors.requiredField') })\n          .refine(\n            (val) => {\n              const isEmail = z.string().email().safeParse(val).success;\n              const phoneRegex = /^(\\+2519|2519|09)\\d{8}$/;\n              const isPhone = phoneRegex.test(val);\n              return isEmail || isPhone;\n            },\n            {\n              message: t('errors.invalidEmailOrPhone'),\n            },\n          ),\n      }),\n    [t],\n  );\n\n  const passwordSchema = useMemo(\n    () =>\n      z.object({\n        password: z\n          .string()\n          .min(8, t('errors.passwordLength'))\n          .max(128, t('errors.longPasswordError')),\n      }),\n    [t],\n  );\n\n  const identifierForm = useForm<{ account: string }>({\n    resolver: zodResolver(identifierSchema),\n    defaultValues: {\n      account: identifier,\n    },\n  });\n\n  const passwordForm = useForm<{ password: string }>({\n    resolver: zodResolver(passwordSchema),\n    defaultValues: {\n      password: '',\n    },\n  });\n\n  const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {\n    const phoneRegex = /^(\\+2519|2519|09)\\d{8}$/;\n    const normalizedAccount = phoneRegex.test(values.account)\n      ? normalizePhone(values.account)\n      : values.account;\n    await onSubmit({ account: normalizedAccount, password: '' }, 'identifier');\n  });\n\n  const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {\n    await onSubmit(\n      { account: identifier, password: values.password },\n      'password',\n    );\n  });\n\n  if (step === 'password') {\n    return (\n      <Form {...passwordForm}>\n        <form onSubmit={handlePasswordSubmit} className=\"space-y-4\">\n          <div className=\"text-center\">\n            <p className=\"text-sm text-muted-foreground mb-2\">\n              {t('form.enterPasswordFor')}\n            </p>\n            <p className=\"font-bold\">{identifier}</p>\n          </div>\n          <FormField\n            control={passwordForm.control}\n            name=\"password\"\n            render={({ field }) => (\n              <FormItem>\n                <FormLabel>{t('form.passwordLabel')}</FormLabel>\n                <FormControl>\n                  <div className=\"relative\">\n                    <Input\n                      type={showPassword ? 'text' : 'password'}\n                      placeholder={t('form.passwordPlaceholder')}\n                      autoComplete=\"current-password\"\n                      {...field}\n                    />\n                    <button\n                      type=\"button\"\n                      onClick={() => setShowPassword(!showPassword)}\n                      className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                    >\n                      {showPassword ? (\n                        <IconEyeOff className=\"h-4 w-4\" />\n                      ) : (\n                        <IconEye className=\"h-4 w-4\" />\n                      )}\n                    </button>\n                  </div>\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n            {isLoading ? t('form.submitting') : t('form.submit')}\n          </Button>\n        </form>\n      </Form>\n    );\n  }\n\n  return (\n    <Form {...identifierForm}>\n      <form onSubmit={handleIdentifierSubmit} className=\"space-y-4\">\n        <FormField\n          control={identifierForm.control}\n          name=\"account\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{t('form.accountLabel')}</FormLabel>\n              <FormControl>\n                <Input\n                  type=\"text\"\n                  placeholder={t('form.accountPlaceholder')}\n                  {...field}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n          {isLoading && <Spinner />}\n          {isLoading ? t('form.submitting') : t('form.continue')}\n        </Button>\n      </form>\n    </Form>\n  );\n};\n","export function normalizePhone(phone: string): string {\n  const cleaned = phone.trim().replace(/\\s/g, '');\n  if (cleaned.startsWith('+2519')) {\n    return cleaned;\n  }\n  if (cleaned.startsWith('2519')) {\n    return `+${cleaned}`;\n  }\n  if (cleaned.startsWith('09')) {\n    return `+251${cleaned.slice(1)}`;\n  }\n  if (cleaned.startsWith('9') && cleaned.length === 9) {\n    return `+251${cleaned}`;\n  }\n  return cleaned;\n}\n"],"mappings":"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","names":[]}

package/dist/components/{sign-up.js → auth/sign-up.js}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/sign-up.tsx
+// src/components/auth/sign-up.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@mesob/ui/components/button";
 import {
@@ -12,7 +12,7 @@ import {
   FormMessage
 } from "@mesob/ui/components/form";
 import { Input } from "@mesob/ui/components/input";
-import { Eye, EyeOff } from "lucide-react";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -132,7 +132,7 @@ var SignUp = ({
                 type: "button",
                 onClick: () => setShowPassword(!showPassword),
                 className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+                children: showPassword ? /* @__PURE__ */ jsx(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconEye, { className: "h-4 w-4" })
               }
             )
           ] }) }),
@@ -162,7 +162,7 @@ var SignUp = ({
                 type: "button",
                 onClick: () => setShowConfirmPassword(!showConfirmPassword),
                 className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showConfirmPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+                children: showConfirmPassword ? /* @__PURE__ */ jsx(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconEye, { className: "h-4 w-4" })
               }
             )
           ] }) }),

package/dist/components/auth/sign-up.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/auth/sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button } from '@mesob/ui/components/button';\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@mesob/ui/components/form';\nimport { Input } from '@mesob/ui/components/input';\nimport { IconEye, IconEyeOff } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\n\nconst isPhone = (s: string) => /^\\+?[0-9()[\\]\\s-]{6,}$/.test(s);\n\ntype SignUpFormValues = {\n  fullName: string;\n  identifier: string;\n  handle?: string;\n  password: string;\n  confirmPassword: string;\n};\n\ntype SignUpProps = {\n  onSubmit: (values: SignUpFormValues) => Promise<void> | void;\n  isLoading?: boolean;\n  initialIdentifier?: string;\n};\n\nexport const SignUp = ({\n  onSubmit,\n  isLoading = false,\n  initialIdentifier,\n}: SignUpProps) => {\n  const t = useTranslations('Auth.signUp');\n  const hasInitialIdentifier = !!initialIdentifier;\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n\n  const signUpSchema = useMemo(\n    () =>\n      z\n        .object({\n          fullName: z.string().min(1, t('errors.fullNameRequired')),\n          identifier: z\n            .string()\n            .min(1, t('errors.contactRequired'))\n            .refine(\n              (val) => {\n                if (!val) {\n                  return false;\n                }\n                return val.includes('@') || isPhone(val);\n              },\n              {\n                message: t('errors.invalidEmailOrPhone'),\n              },\n            ),\n          password: z\n            .string()\n            .min(8, t('errors.passwordLength'))\n            .max(128, t('errors.longPasswordError')),\n          confirmPassword: z.string(),\n        })\n        .refine((data) => data.password === data.confirmPassword, {\n          message: t('errors.passwordsMismatch'),\n          path: ['confirmPassword'],\n        }),\n    [t],\n  );\n\n  const form = useForm<SignUpFormValues>({\n    resolver: zodResolver(signUpSchema),\n    defaultValues: {\n      fullName: '',\n      identifier: initialIdentifier || '',\n      password: '',\n      confirmPassword: '',\n    },\n  });\n\n  useEffect(() => {\n    if (initialIdentifier) {\n      form.setValue('identifier', initialIdentifier);\n    }\n  }, [initialIdentifier, form]);\n\n  const handleSubmit = form.handleSubmit(async (values) => {\n    await onSubmit(values);\n  });\n\n  const getIdentifierLabel = () => {\n    if (!hasInitialIdentifier) {\n      return t('form.accountLabel') || 'Email/Phone';\n    }\n    if (initialIdentifier?.includes('@')) {\n      return t('form.emailLabel');\n    }\n    return t('form.phoneLabel');\n  };\n  const identifierLabel = getIdentifierLabel();\n\n  return (\n    <Form {...form}>\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        <FormField\n          control={form.control}\n          name=\"fullName\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{t('form.fullNameLabel')}</FormLabel>\n              <FormControl>\n                <Input placeholder={t('form.fullNamePlaceholder')} {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"identifier\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel className={hasInitialIdentifier ? 'block' : undefined}>\n                {identifierLabel}\n              </FormLabel>\n              <FormControl>\n                <Input\n                  type={field.value.includes('@') ? 'email' : 'tel'}\n                  placeholder={\n                    hasInitialIdentifier\n                      ? undefined\n                      : t('form.accountPlaceholder') || 'Email or phone number'\n                  }\n                  {...field}\n                  disabled={hasInitialIdentifier}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"password\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{t('form.passwordLabel')}</FormLabel>\n              <FormControl>\n                <div className=\"relative\">\n                  <Input\n                    type={showPassword ? 'text' : 'password'}\n                    placeholder={t('form.passwordPlaceholder')}\n                    {...field}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowPassword(!showPassword)}\n                    className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                  >\n                    {showPassword ? (\n                      <IconEyeOff className=\"h-4 w-4\" />\n                    ) : (\n                      <IconEye className=\"h-4 w-4\" />\n                    )}\n                  </button>\n                </div>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"confirmPassword\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{t('form.confirmPasswordLabel')}</FormLabel>\n              <FormControl>\n                <div className=\"relative\">\n                  <Input\n                    type={showConfirmPassword ? 'text' : 'password'}\n                    placeholder={t('form.passwordPlaceholder')}\n                    {...field}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}\n                    className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                  >\n                    {showConfirmPassword ? (\n                      <IconEyeOff className=\"h-4 w-4\" />\n                    ) : (\n                      <IconEye className=\"h-4 w-4\" />\n                    )}\n                  </button>\n                </div>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n          {isLoading ? t('form.submitting') : t('form.submit')}\n        </Button>\n      </form>\n    </Form>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/components/{verification-form.d.ts → auth/verification-form.d.ts}

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { A as AuthErrorContent } from '../../handle-error-H0iqQxJ5.js';
 
 type VerificationFormValues = {
     code: string;
@@ -8,7 +9,7 @@ type VerificationFormProps = {
     onSubmit: (values: VerificationFormValues) => Promise<void> | void;
     onResend: () => Promise<void> | void;
     isLoading?: boolean;
-    error?: string | null;
+    error?: AuthErrorContent | string | null;
 };
 declare const VerificationForm: ({ onSubmit, onResend, isLoading, }: VerificationFormProps) => react_jsx_runtime.JSX.Element;
 

package/dist/components/{verification-form.js → auth/verification-form.js}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/verification-form.tsx
+// src/components/auth/verification-form.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button as Button2 } from "@mesob/ui/components/button";
 import {
@@ -15,16 +15,18 @@ import {
   InputOTPGroup,
   InputOTPSlot
 } from "@mesob/ui/components/input-otp";
+import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
 import { useTranslations as useTranslations2 } from "next-intl";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-// src/components/countdown.tsx
+// src/components/auth/countdown.tsx
 import { Button } from "@mesob/ui/components/button";
+import { Spinner } from "@mesob/ui/components/spinner";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Countdown = ({
   initialSeconds = 60,
   onResend,
@@ -61,19 +63,22 @@ var Countdown = ({
   if (seconds > 0) {
     return /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Button,
     {
       variant: "ghost",
       onClick: handleResend,
       disabled: isResending || resending,
-      children: isResending || resending ? t("resending") : t("resend")
+      children: [
+        isResending || resending && /* @__PURE__ */ jsx(Spinner, {}),
+        t("resend")
+      ]
     }
   );
 };
 
-// src/components/verification-form.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+// src/components/auth/verification-form.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var VerificationForm = ({
   onSubmit,
   onResend,
@@ -92,38 +97,30 @@ var VerificationForm = ({
       code: ""
     }
   });
-  const handleComplete = async (value) => {
-    const valid = await form.trigger("code");
-    if (valid) {
-      await onSubmit({ code: value });
-    }
-  };
-  return /* @__PURE__ */ jsx2(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsx2(Form, { ...form, children: /* @__PURE__ */ jsxs2("form", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx2(
       FormField,
       {
         control: form.control,
         name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
           /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
             InputOTP,
             {
               maxLength: 6,
-              value: field.value,
-              onChange: (value) => {
-                field.onChange(value);
-                if (value.length === 6) {
-                  handleComplete(value);
-                }
-              },
-              disabled: isLoading,
-              children: /* @__PURE__ */ jsxs(InputOTPGroup, { children: [
-                /* @__PURE__ */ jsx2(InputOTPSlot, { index: 0 }),
-                /* @__PURE__ */ jsx2(InputOTPSlot, { index: 1 }),
-                /* @__PURE__ */ jsx2(InputOTPSlot, { index: 2 }),
-                /* @__PURE__ */ jsx2(InputOTPSlot, { index: 3 }),
-                /* @__PURE__ */ jsx2(InputOTPSlot, { index: 4 }),
-                /* @__PURE__ */ jsx2(InputOTPSlot, { index: 5 })
+              id: "otp",
+              required: true,
+              value: field.value ?? "",
+              onChange: field.onChange,
+              onBlur: field.onBlur,
+              containerClassName: "gap-4 justify-center mb-2 flex items-center",
+              children: /* @__PURE__ */ jsxs2(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 0 }),
+                /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 1 }),
+                /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 2 }),
+                /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 3 }),
+                /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 4 }),
+                /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 5 })
               ] })
             }
           ) }) }),
@@ -131,9 +128,9 @@ var VerificationForm = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsx2(Countdown, { onResend, resending: isLoading }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs2(
         Button2,
         {
           type: "button",
@@ -143,7 +140,10 @@ var VerificationForm = ({
             })();
           },
           disabled: isLoading || form.watch("code").length !== 6,
-          children: t("form.confirm")
+          children: [
+            isLoading && /* @__PURE__ */ jsx2(Spinner2, {}),
+            t("form.confirm")
+          ]
         }
       )
     ] })

package/dist/components/auth/verification-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/auth/verification-form.tsx","../../../src/components/auth/countdown.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button } from '@mesob/ui/components/button';\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormMessage,\n} from '@mesob/ui/components/form';\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from '@mesob/ui/components/input-otp';\nimport { Spinner } from '@mesob/ui/components/spinner';\nimport { useTranslations } from 'next-intl';\nimport { useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\nimport type { AuthErrorContent } from '../../utils/handle-error';\nimport { Countdown } from './countdown';\n\ntype VerificationFormValues = {\n  code: string;\n};\n\ntype VerificationFormProps = {\n  verificationId: string;\n  onSubmit: (values: VerificationFormValues) => Promise<void> | void;\n  onResend: () => Promise<void> | void;\n  isLoading?: boolean;\n  error?: AuthErrorContent | string | null;\n};\n\nexport const VerificationForm = ({\n  onSubmit,\n  onResend,\n  isLoading = false,\n}: VerificationFormProps) => {\n  const t = useTranslations('Auth.verification');\n  const verificationSchema = useMemo(\n    () =>\n      z.object({\n        code: z.string().length(6, t('form.codeLength')),\n      }),\n    [t],\n  );\n  const form = useForm<VerificationFormValues>({\n    resolver: zodResolver(verificationSchema),\n    defaultValues: {\n      code: '',\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <form className=\"space-y-4\">\n        <FormField\n          control={form.control}\n          name=\"code\"\n          render={({ field }) => (\n            <FormItem>\n              <FormControl>\n                <div className=\"flex justify-center\">\n                  <InputOTP\n                    maxLength={6}\n                    id=\"otp\"\n                    required\n                    value={field.value ?? ''}\n                    onChange={field.onChange}\n                    onBlur={field.onBlur}\n                    containerClassName=\"gap-4 justify-center mb-2 flex items-center\"\n                  >\n                    <InputOTPGroup className=\"gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                      <InputOTPSlot className=\"h-12\" index={0} />\n                      <InputOTPSlot className=\"h-12\" index={1} />\n                      <InputOTPSlot className=\"h-12\" index={2} />\n                      <InputOTPSlot className=\"h-12\" index={3} />\n                      <InputOTPSlot className=\"h-12\" index={4} />\n                      <InputOTPSlot className=\"h-12\" index={5} />\n                    </InputOTPGroup>\n                  </InputOTP>\n                </div>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <div className=\"flex justify-between items-center\">\n          <Countdown onResend={onResend} resending={isLoading} />\n          <Button\n            type=\"button\"\n            onClick={() => {\n              form.handleSubmit(async (values) => {\n                await onSubmit(values);\n              })();\n            }}\n            disabled={isLoading || form.watch('code').length !== 6}\n          >\n            {isLoading && <Spinner />}\n            {t('form.confirm')}\n          </Button>\n        </div>\n      </form>\n    </Form>\n  );\n};\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { Spinner } from '@mesob/ui/components/spinner';\nimport { useTranslations } from 'next-intl';\nimport { useEffect, useState } from 'react';\n\ntype CountdownProps = {\n  initialSeconds?: number;\n  onResend: () => Promise<void> | void;\n  resending?: boolean;\n};\n\nexport const Countdown = ({\n  initialSeconds = 60,\n  onResend,\n  resending = false,\n}: CountdownProps) => {\n  const t = useTranslations('Common');\n  const [seconds, setSeconds] = useState(initialSeconds);\n  const [isResending, setIsResending] = useState(false);\n\n  useEffect(() => {\n    if (seconds <= 0) {\n      return;\n    }\n\n    const timer = setInterval(() => {\n      setSeconds((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [seconds]);\n\n  const handleResend = async () => {\n    setIsResending(true);\n    try {\n      await onResend();\n      setSeconds(initialSeconds);\n    } catch (_error) {\n      // Error handling is done by parent\n    } finally {\n      setIsResending(false);\n    }\n  };\n\n  if (seconds > 0) {\n    return (\n      <Button variant=\"ghost\" disabled>\n        {t('resendIn', { seconds })}\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      onClick={handleResend}\n      disabled={isResending || resending}\n    >\n      {isResending || (resending && <Spinner />)}\n      {t('resend')}\n    </Button>\n  );\n};\n"],"mappings":"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","names":["Button","Spinner","useTranslations","jsx","jsxs","useTranslations","Button","Spinner"]}

package/dist/handle-error-H0iqQxJ5.d.ts

@@ -0,0 +1,6 @@
+type AuthErrorContent = {
+    title: string;
+    description: string;
+};
+
+export type { AuthErrorContent as A };

package/dist/index.d.ts

@@ -1,19 +1,20 @@
-export { AuthCard } from './components/auth-card.js';
-export { AuthPageLayout } from './components/auth-page-layout.js';
-export { Countdown } from './components/countdown.js';
-export { ForgotPassword } from './components/forgot-password.js';
-export { ForgotPasswordPage } from './components/pages/forgot-password-page.js';
-export { ResetPasswordPage } from './components/pages/reset-password-page.js';
-export { SignInPage } from './components/pages/sign-in-page.js';
-export { SignUpPage } from './components/pages/sign-up-page.js';
-export { VerifyEmailPage } from './components/pages/verify-email-page.js';
-export { VerifyPhonePage } from './components/pages/verify-phone-page.js';
-export { ResetPasswordForm } from './components/reset-password-form.js';
-export { SignIn } from './components/sign-in.js';
-export { SignUp } from './components/sign-up.js';
-export { VerificationForm } from './components/verification-form.js';
+export { AuthCard } from './components/auth/auth-card.js';
+export { AuthPageLayout } from './components/auth/auth-page-layout.js';
+export { Countdown } from './components/auth/countdown.js';
+export { ForgotPassword } from './components/auth/forgot-password.js';
+export { ForgotPasswordPage } from './components/auth/pages/forgot-password-page.js';
+export { ResetPasswordPage } from './components/auth/pages/reset-password-page.js';
+export { SignInPage } from './components/auth/pages/sign-in-page.js';
+export { SignUpPage } from './components/auth/pages/sign-up-page.js';
+export { VerifyEmailPage } from './components/auth/pages/verify-email-page.js';
+export { VerifyPhonePage } from './components/auth/pages/verify-phone-page.js';
+export { ResetPasswordForm } from './components/auth/reset-password-form.js';
+export { SignIn } from './components/auth/sign-in.js';
+export { SignUp } from './components/auth/sign-up.js';
+export { VerificationForm } from './components/auth/verification-form.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import './handle-error-H0iqQxJ5.js';
 
 type User = {
     id: string;
@@ -48,6 +49,16 @@ type SessionResponse = {
     user: User | null;
     session: Session | null;
 };
+type PendingAccountChange = {
+    changeType: 'email' | 'phone';
+    newEmail: string | null;
+    newPhone: string | null;
+    expiresAt: string;
+};
+type PendingAccountChangeResponse = {
+    accountChange: PendingAccountChange | null;
+    verificationId: string | null;
+};
 type AuthErrorCode = 'USER_NOT_FOUND' | 'INVALID_PASSWORD' | 'USER_EXISTS' | 'VERIFICATION_EXPIRED' | 'VERIFICATION_MISMATCH' | 'VERIFICATION_NOT_FOUND' | 'TOO_MANY_ATTEMPTS' | 'REQUIRES_VERIFICATION' | 'UNAUTHORIZED' | 'ACCESS_DENIED' | 'HAS_NO_PASSWORD';
 
 type AuthClientConfig = {
@@ -118,6 +129,11 @@ declare class AuthClient {
         code: string;
         password: string;
     }): Promise<AuthResponse>;
+    verifyPassword(data: {
+        password: string;
+    }): Promise<{
+        message: string;
+    }>;
     changePassword(data: {
         currentPassword: string;
         newPassword: string;
@@ -125,6 +141,22 @@ declare class AuthClient {
         message: string;
     }>;
     getSession(): Promise<SessionResponse>;
+    getPendingAccountChange(): Promise<PendingAccountChangeResponse>;
+    updateProfile(data: {
+        fullName?: string;
+    }): Promise<{
+        user: User;
+    }>;
+    updateEmail(data: {
+        email: string;
+    }): Promise<{
+        user: User;
+    }>;
+    updatePhone(data: {
+        phone: string;
+    }): Promise<{
+        user: User;
+    }>;
 }
 
 type AuthContextValue = {
@@ -219,4 +251,6 @@ declare const useSession: () => {
     refresh: () => Promise<void>;
 };
 
-export { AuthClient, type AuthErrorCode, AuthProvider, type AuthResponse, type Session, type SessionResponse, type User, type VerificationResponse, createAuthClient, useAuth, useSession };
+declare function normalizePhone(phone: string): string;
+
+export { AuthClient, type AuthErrorCode, AuthProvider, type AuthResponse, type PendingAccountChange, type PendingAccountChangeResponse, type Session, type SessionResponse, type User, type VerificationResponse, createAuthClient, normalizePhone, useAuth, useSession };