@customafk/lunas-ui 0.2.30 → 0.2.32

package/dist/pages/LoginPage.mjs

@@ -1,2 +1,2 @@
-"use client";import"../button.variants-CwcJHcI5.mjs";import{t as e}from"../button-BqxBQ4Kr.mjs";import"../heading-B1t9baTw.mjs";import"../paragraph-J_QbLq9_.mjs";import"../close-BMhGSmGs.mjs";import{i as t,l as n,o as r,r as i,t as a}from"../dialog-jqiIqxlm.mjs";import{t as o}from"../input-CKFQdvqY.mjs";import{t as s}from"../label-CE2m0U_j.mjs";import{n as c,t as l}from"../alert-BC5Nss8t.mjs";import{Eye as u,EyeOff as d}from"lucide-react";import{useId as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{z as g}from"zod";const _=g.object({email:g.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:g.string().min(1,`Vui lòng nhập mật khẩu`)}),v=({open:g,onOpenChange:v,onLogin:y,onForgotPassword:b,onRegister:x,isLoading:S=!1,errorMessage:C,title:w=`Đăng nhập`,subtitle:T=`Nhập thông tin để tiếp tục`})=>{let E=f(),D=f(),[O,k]=p(``),[A,j]=p(``),[M,N]=p(!1),[P,F]=p({});return m(a,{open:g,onOpenChange:v,children:h(i,{className:`sm:max-w-sm`,children:[h(r,{children:[m(n,{children:w}),m(t,{children:T})]}),h(`form`,{onSubmit:async e=>{e.preventDefault();let t=_.safeParse({email:O,password:A});if(!t.success){let e=t.error.flatten().fieldErrors;F({email:e.email?.[0],password:e.password?.[0]});return}F({}),await y(O,A)},noValidate:!0,className:`flex flex-col gap-4`,children:[C&&m(l,{variant:`destructive`,children:m(c,{children:C})}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:E,children:`Email`}),m(o,{id:E,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:O,onChange:e=>k(e.target.value),"aria-invalid":!!P.email,disabled:S}),P.email&&m(`p`,{className:`text-destructive text-xs`,children:P.email})]}),h(`div`,{className:`flex flex-col gap-1.5`,children:[h(`div`,{className:`flex items-center justify-between`,children:[m(s,{htmlFor:D,children:`Mật khẩu`}),b&&m(e,{type:`button`,variant:`link`,size:`sm`,className:`h-auto p-0 text-xs`,onClick:b,children:`Quên mật khẩu?`})]}),h(`div`,{className:`relative`,children:[m(o,{id:D,type:M?`text`:`password`,autoComplete:`current-password`,placeholder:`••••••••`,value:A,onChange:e=>j(e.target.value),"aria-invalid":!!P.password,disabled:S,className:`pr-10`}),m(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),N(e=>!e)},"aria-label":M?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m(M?d:u,{size:16})})]}),P.password&&m(`p`,{className:`text-destructive text-xs`,children:P.password})]}),m(e,{type:`submit`,isLoading:S,className:`w-full`,children:`Đăng nhập`})]}),x&&h(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[m(`span`,{children:`Chưa có tài khoản?`}),m(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:x,children:`Đăng ký`})]})]})})};export{v as LoginPage};
+"use client";import"../button.variants-CwcJHcI5.mjs";import{t as e}from"../button-BqxBQ4Kr.mjs";import"../heading-B1t9baTw.mjs";import"../paragraph-J_QbLq9_.mjs";import"../close-BMhGSmGs.mjs";import{i as t,l as n,o as r,r as i,t as a}from"../dialog-jqiIqxlm.mjs";import{t as o}from"../input-CKFQdvqY.mjs";import{t as s}from"../label-CE2m0U_j.mjs";import{n as c,t as l}from"../alert-BC5Nss8t.mjs";import{Eye as u,EyeOff as d}from"lucide-react";import{useId as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{z as g}from"zod";const _=g.object({email:g.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:g.string().min(1,`Vui lòng nhập mật khẩu`)}),v=({open:g,onOpenChange:v,onLogin:y,onForgotPassword:b,onRegister:x,isLoading:S=!1,errorMessage:C,title:w=`Đăng nhập`,subtitle:T=`Nhập thông tin để tiếp tục`})=>{let E=f(),D=f(),[O,k]=p(``),[A,j]=p(``),[M,N]=p(!1),[P,F]=p({});return m(a,{open:g,onOpenChange:v,children:h(i,{className:`max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm`,children:[h(r,{children:[m(n,{children:w}),m(t,{children:T})]}),h(`form`,{onSubmit:async e=>{e.preventDefault();let t=_.safeParse({email:O,password:A});if(!t.success){let e=t.error.flatten().fieldErrors;F({email:e.email?.[0],password:e.password?.[0]});return}F({}),await y(O,A)},noValidate:!0,className:`flex flex-col gap-4`,children:[C&&m(l,{variant:`destructive`,children:m(c,{children:C})}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:E,children:`Email`}),m(o,{id:E,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:O,onChange:e=>k(e.target.value),"aria-invalid":!!P.email,disabled:S}),P.email&&m(`p`,{className:`text-destructive text-xs`,children:P.email})]}),h(`div`,{className:`flex flex-col gap-1.5`,children:[h(`div`,{className:`flex items-center justify-between`,children:[m(s,{htmlFor:D,children:`Mật khẩu`}),b&&m(e,{type:`button`,variant:`link`,size:`sm`,className:`h-auto p-0 text-xs`,onClick:b,children:`Quên mật khẩu?`})]}),h(`div`,{className:`relative`,children:[m(o,{id:D,type:M?`text`:`password`,autoComplete:`current-password`,placeholder:`••••••••`,value:A,onChange:e=>j(e.target.value),"aria-invalid":!!P.password,disabled:S,className:`pr-10`}),m(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),N(e=>!e)},"aria-label":M?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m(M?d:u,{size:16})})]}),P.password&&m(`p`,{className:`text-destructive text-xs`,children:P.password})]}),m(e,{type:`submit`,isLoading:S,className:`w-full`,children:`Đăng nhập`})]}),x&&h(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[m(`span`,{children:`Chưa có tài khoản?`}),m(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:x,children:`Đăng ký`})]})]})})};export{v as LoginPage};
 //# sourceMappingURL=LoginPage.mjs.map

package/dist/pages/LoginPage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginPage.mjs","names":[],"sources":["../../packages/components/pages/LoginPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface LoginPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits login credentials */\n  onLogin: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Quên mật khẩu?\" link is clicked */\n  onForgotPassword?: () => void;\n  /** Called when the \"Đăng ký\" link is clicked */\n  onRegister?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng nhập\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Nhập thông tin để tiếp tục\" */\n  subtitle?: string;\n}\n\nconst loginSchema = z.object({\n  email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\n/**\n * Modal login dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { LoginPage } from '@customafk/lunas-ui/pages/LoginPage';\n *\n * <LoginPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onLogin={async (email, password) => {\n *     await authService.login(email, password);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onForgotPassword,\n  onRegister,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng nhập',\n  subtitle = 'Nhập thông tin để tiếp tục',\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = loginSchema.safeParse({ email, password });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({ email: errors.email?.[0], password: errors.password?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    await onLogin(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor={passwordId}>Mật khẩu</Label>\n              {onForgotPassword && (\n                <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"h-auto p-0 text-xs\" onClick={onForgotPassword}>\n                  Quên mật khẩu?\n                </Button>\n              )}\n            </div>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"current-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password && <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng nhập\n          </Button>\n        </form>\n\n        {onRegister && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onRegister}>\n              Đăng ký\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"ijBAkCA,MAAM,EAAc,EAAE,OAAO,CAC3B,MAAO,EAAE,QAAQ,CAAC,IAAI,EAAG,sBAAsB,CAAC,MAAM,qBAAqB,CAC3E,SAAU,EAAE,QAAQ,CAAC,IAAI,EAAG,yBAAyB,CACtD,CAAC,CAoBW,GAAa,CACxB,OACA,eACA,UACA,mBACA,aACA,YAAY,GACZ,eACA,QAAQ,YACR,WAAW,gCACS,CACpB,IAAM,EAAU,GAAO,CACjB,EAAa,GAAO,CACpB,CAAC,EAAO,GAAY,EAAS,GAAG,CAChC,CAAC,EAAU,GAAe,EAAS,GAAG,CACtC,CAAC,EAAc,GAAmB,EAAS,GAAM,CACjD,CAAC,EAAa,GAAkB,EAAgD,EAAE,CAAC,CAczF,OACE,EAAC,EAAA,CAAa,OAAoB,wBAChC,EAAC,EAAA,CAAc,UAAU,wBACvB,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAa,EAAA,CAAoB,CAClC,EAAC,EAAA,CAAA,SAAmB,EAAA,CAA6B,CAAA,CAAA,CACpC,CAEf,EAAC,OAAA,CAAK,SApBS,KAAO,IAAwC,CAClE,EAAE,gBAAgB,CAClB,IAAM,EAAS,EAAY,UAAU,CAAE,QAAO,WAAU,CAAC,CACzD,GAAI,CAAC,EAAO,QAAS,CACnB,IAAM,EAAS,EAAO,MAAM,SAAS,CAAC,YACtC,EAAe,CAAE,MAAO,EAAO,QAAQ,GAAI,SAAU,EAAO,WAAW,GAAI,CAAC,CAC5E,OAEF,EAAe,EAAE,CAAC,CAClB,MAAM,EAAQ,EAAO,EAAS,EAWI,WAAA,GAAW,UAAU,gCAChD,GACC,EAAC,EAAA,CAAM,QAAQ,uBACb,EAAC,EAAA,CAAA,SAAkB,EAAA,CAAgC,EAC7C,CAGV,EAAC,MAAA,CAAI,UAAU,kCACb,EAAC,EAAA,CAAM,QAAS,WAAS,SAAa,CACtC,EAAC,EAAA,CACC,GAAI,EACJ,KAAK,QACL,aAAa,QACb,YAAY,kBACZ,MAAO,EACP,SAAU,GAAK,EAAS,EAAE,OAAO,MAAM,CACvC,eAAc,CAAC,CAAC,EAAY,MAC5B,SAAU,GACV,CACD,EAAY,OAAS,EAAC,IAAA,CAAE,UAAU,oCAA4B,EAAY,OAAU,GACjF,CAEN,EAAC,MAAA,CAAI,UAAU,kCACb,EAAC,MAAA,CAAI,UAAU,8CACb,EAAC,EAAA,CAAM,QAAS,WAAY,YAAgB,CAC3C,GACC,EAAC,EAAA,CAAO,KAAK,SAAS,QAAQ,OAAO,KAAK,KAAK,UAAU,qBAAqB,QAAS,WAAkB,kBAEhG,CAAA,EAEP,CACN,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CACC,GAAI,EACJ,KAAM,EAAe,OAAS,WAC9B,aAAa,mBACb,YAAY,WACZ,MAAO,EACP,SAAU,GAAK,EAAY,EAAE,OAAO,MAAM,CAC1C,eAAc,CAAC,CAAC,EAAY,SAC5B,SAAU,EACV,UAAU,SACV,CACF,EAAC,SAAA,CACC,KAAK,SACL,UAAU,gGACV,YAAa,GAAK,CAChB,EAAE,gBAAgB,CAClB,EAAgB,GAAK,CAAC,EAAE,EAE1B,aAAY,EAAe,cAAgB,yBAE3B,EAAf,EAAgB,EAAuB,EAAvB,CAAO,KAAM,GAAA,CAA0B,EACjD,CAAA,EACL,CACL,EAAY,UAAY,EAAC,IAAA,CAAE,UAAU,oCAA4B,EAAY,UAAa,GACvF,CAEN,EAAC,EAAA,CAAO,KAAK,SAAoB,YAAW,UAAU,kBAAS,aAEtD,GACJ,CAEN,GACC,EAAC,MAAA,CAAI,UAAU,oEACb,EAAC,OAAA,CAAA,SAAK,qBAAA,CAAyB,CAC/B,EAAC,EAAA,CAAO,QAAQ,OAAO,KAAK,KAAK,UAAU,aAAa,QAAS,WAAY,WAEpE,CAAA,EACL,GAEM,EACT"}
+{"version":3,"file":"LoginPage.mjs","names":[],"sources":["../../packages/components/pages/LoginPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface LoginPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits login credentials */\n  onLogin: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Quên mật khẩu?\" link is clicked */\n  onForgotPassword?: () => void;\n  /** Called when the \"Đăng ký\" link is clicked */\n  onRegister?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng nhập\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Nhập thông tin để tiếp tục\" */\n  subtitle?: string;\n}\n\nconst loginSchema = z.object({\n  email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\n/**\n * Modal login dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { LoginPage } from '@customafk/lunas-ui/pages/LoginPage';\n *\n * <LoginPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onLogin={async (email, password) => {\n *     await authService.login(email, password);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onForgotPassword,\n  onRegister,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng nhập',\n  subtitle = 'Nhập thông tin để tiếp tục',\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = loginSchema.safeParse({ email, password });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({ email: errors.email?.[0], password: errors.password?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    await onLogin(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor={passwordId}>Mật khẩu</Label>\n              {onForgotPassword && (\n                <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"h-auto p-0 text-xs\" onClick={onForgotPassword}>\n                  Quên mật khẩu?\n                </Button>\n              )}\n            </div>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"current-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password && <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng nhập\n          </Button>\n        </form>\n\n        {onRegister && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onRegister}>\n              Đăng ký\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/NotAuthorized.d.cts

@@ -1,4 +1,4 @@
-import * as react29 from "react";
+import * as react68 from "react";
 
 //#region packages/components/pages/NotAuthorized.d.ts
 interface NotAuthorizedProps {
@@ -37,7 +37,7 @@ declare const NotAuthorized: ({
   onButtonClick,
   className,
   iconClassName
-}: NotAuthorizedProps) => react29.JSX.Element;
+}: NotAuthorizedProps) => react68.JSX.Element;
 //#endregion
 export { NotAuthorized, NotAuthorized as default, NotAuthorizedProps };
 //# sourceMappingURL=NotAuthorized.d.cts.map

package/dist/pages/NotAuthorized.d.mts

@@ -1,4 +1,4 @@
-import * as react46 from "react";
+import * as react28 from "react";
 
 //#region packages/components/pages/NotAuthorized.d.ts
 interface NotAuthorizedProps {
@@ -37,7 +37,7 @@ declare const NotAuthorized: ({
   onButtonClick,
   className,
   iconClassName
-}: NotAuthorizedProps) => react46.JSX.Element;
+}: NotAuthorizedProps) => react28.JSX.Element;
 //#endregion
 export { NotAuthorized, NotAuthorized as default, NotAuthorizedProps };
 //# sourceMappingURL=NotAuthorized.d.mts.map

package/dist/pages/NotFound.d.cts

@@ -1,4 +1,4 @@
-import * as react30 from "react";
+import * as react3 from "react";
 
 //#region packages/components/pages/NotFound.d.ts
 interface NotFoundProps {
@@ -37,7 +37,7 @@ declare const NotFound: ({
   onButtonClick,
   className,
   iconClassName
-}: NotFoundProps) => react30.JSX.Element;
+}: NotFoundProps) => react3.JSX.Element;
 //#endregion
 export { NotFound, NotFound as default, NotFoundProps };
 //# sourceMappingURL=NotFound.d.cts.map

package/dist/pages/NotFound.d.mts

@@ -1,4 +1,4 @@
-import * as react7 from "react";
+import * as react27 from "react";
 
 //#region packages/components/pages/NotFound.d.ts
 interface NotFoundProps {
@@ -37,7 +37,7 @@ declare const NotFound: ({
   onButtonClick,
   className,
   iconClassName
-}: NotFoundProps) => react7.JSX.Element;
+}: NotFoundProps) => react27.JSX.Element;
 //#endregion
 export { NotFound, NotFound as default, NotFoundProps };
 //# sourceMappingURL=NotFound.d.mts.map

package/dist/pages/RegisterPage.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-tnhb123u.cjs`);const t=require(`../button-Bu4ejNOW.cjs`);require(`../heading-wUXEbicM.cjs`),require(`../paragraph-D-JHj7EP.cjs`),require(`../close-DUBEKxhw.cjs`);const n=require(`../dialog-DEnyBH2X.cjs`),r=require(`../input-1ceJxxFI.cjs`),i=require(`../label-BHbqbBtO.cjs`),a=require(`../alert-4rfsFtN6.cjs`);let o=require(`lucide-react`),s=require(`react`),c=require(`react/jsx-runtime`),l=require(`zod`);const u=l.z.object({email:l.z.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:l.z.string().min(8,`Mật khẩu phải có ít nhất 8 ký tự`).max(50,`Mật khẩu không được vượt quá 50 ký tự`).regex(/[A-Z]/,`Phải có ít nhất một chữ hoa`).regex(/[a-z]/,`Phải có ít nhất một chữ thường`).regex(/[0-9]/,`Phải có ít nhất một chữ số`).regex(/[^A-Za-z0-9]/,`Phải có ít nhất một ký tự đặc biệt`),confirmPassword:l.z.string().min(1,`Vui lòng xác nhận mật khẩu`)}).refine(e=>e.password===e.confirmPassword,{message:`Mật khẩu xác nhận không khớp`,path:[`confirmPassword`]}),d=({open:e,onOpenChange:l,onRegister:d,onLogin:f,isLoading:p=!1,errorMessage:m,title:h=`Đăng ký`,subtitle:g=`Tạo tài khoản mới để bắt đầu`})=>{let _=(0,s.useId)(),v=(0,s.useId)(),y=(0,s.useId)(),[b,x]=(0,s.useState)(``),[S,C]=(0,s.useState)(``),[w,T]=(0,s.useState)(``),[E,D]=(0,s.useState)(!1),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)({});return(0,c.jsx)(n.t,{open:e,onOpenChange:l,children:(0,c.jsxs)(n.r,{className:`sm:max-w-sm`,children:[(0,c.jsxs)(n.o,{children:[(0,c.jsx)(n.l,{children:h}),(0,c.jsx)(n.i,{children:g})]}),(0,c.jsxs)(`form`,{onSubmit:async e=>{e.preventDefault();let t=u.safeParse({email:b,password:S,confirmPassword:w});if(!t.success){let e=t.error.flatten().fieldErrors;j({email:e.email?.[0],password:e.password?.[0],confirmPassword:e.confirmPassword?.[0]});return}j({}),await d(b,S)},noValidate:!0,className:`flex flex-col gap-4`,children:[m&&(0,c.jsx)(a.t,{variant:`destructive`,children:(0,c.jsx)(a.n,{children:m})}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,c.jsx)(i.t,{htmlFor:_,children:`Email`}),(0,c.jsx)(r.t,{id:_,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:b,onChange:e=>x(e.target.value),"aria-invalid":!!A.email,disabled:p}),A.email&&(0,c.jsx)(`p`,{className:`text-destructive text-xs`,children:A.email})]}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,c.jsx)(i.t,{htmlFor:v,children:`Mật khẩu`}),(0,c.jsxs)(`div`,{className:`relative`,children:[(0,c.jsx)(r.t,{id:v,type:E?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:S,onChange:e=>C(e.target.value),"aria-invalid":!!A.password,disabled:p,className:`pr-10`}),(0,c.jsx)(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),D(e=>!e)},"aria-label":E?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:E?(0,c.jsx)(o.EyeOff,{size:16}):(0,c.jsx)(o.Eye,{size:16})})]}),A.password?(0,c.jsx)(`p`,{className:`text-destructive text-xs`,children:A.password}):(0,c.jsx)(`p`,{className:`text-muted-foreground text-xs`,children:`Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.`})]}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,c.jsx)(i.t,{htmlFor:y,children:`Xác nhận mật khẩu`}),(0,c.jsxs)(`div`,{className:`relative`,children:[(0,c.jsx)(r.t,{id:y,type:O?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:w,onChange:e=>T(e.target.value),"aria-invalid":!!A.confirmPassword,disabled:p,className:`pr-10`}),(0,c.jsx)(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),k(e=>!e)},"aria-label":O?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:O?(0,c.jsx)(o.EyeOff,{size:16}):(0,c.jsx)(o.Eye,{size:16})})]}),A.confirmPassword&&(0,c.jsx)(`p`,{className:`text-destructive text-xs`,children:A.confirmPassword})]}),(0,c.jsx)(t.t,{type:`submit`,isLoading:p,className:`w-full`,children:`Đăng ký`})]}),f&&(0,c.jsxs)(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[(0,c.jsx)(`span`,{children:`Đã có tài khoản?`}),(0,c.jsx)(t.t,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:f,children:`Đăng nhập`})]})]})})};exports.RegisterPage=d;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-tnhb123u.cjs`);const t=require(`../button-Bu4ejNOW.cjs`);require(`../heading-wUXEbicM.cjs`),require(`../paragraph-D-JHj7EP.cjs`),require(`../close-DUBEKxhw.cjs`);const n=require(`../dialog-DEnyBH2X.cjs`),r=require(`../input-1ceJxxFI.cjs`),i=require(`../label-BHbqbBtO.cjs`),a=require(`../alert-4rfsFtN6.cjs`);let o=require(`lucide-react`),s=require(`react`),c=require(`react/jsx-runtime`),l=require(`zod`);const u=l.z.object({email:l.z.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:l.z.string().min(8,`Mật khẩu phải có ít nhất 8 ký tự`).max(50,`Mật khẩu không được vượt quá 50 ký tự`).regex(/[A-Z]/,`Phải có ít nhất một chữ hoa`).regex(/[a-z]/,`Phải có ít nhất một chữ thường`).regex(/[0-9]/,`Phải có ít nhất một chữ số`).regex(/[^A-Za-z0-9]/,`Phải có ít nhất một ký tự đặc biệt`),confirmPassword:l.z.string().min(1,`Vui lòng xác nhận mật khẩu`)}).refine(e=>e.password===e.confirmPassword,{message:`Mật khẩu xác nhận không khớp`,path:[`confirmPassword`]}),d=({open:e,onOpenChange:l,onRegister:d,onLogin:f,isLoading:p=!1,errorMessage:m,title:h=`Đăng ký`,subtitle:g=`Tạo tài khoản mới để bắt đầu`})=>{let _=(0,s.useId)(),v=(0,s.useId)(),y=(0,s.useId)(),[b,x]=(0,s.useState)(``),[S,C]=(0,s.useState)(``),[w,T]=(0,s.useState)(``),[E,D]=(0,s.useState)(!1),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)({});return(0,c.jsx)(n.t,{open:e,onOpenChange:l,children:(0,c.jsxs)(n.r,{className:`max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm`,children:[(0,c.jsxs)(n.o,{children:[(0,c.jsx)(n.l,{children:h}),(0,c.jsx)(n.i,{children:g})]}),(0,c.jsxs)(`form`,{onSubmit:async e=>{e.preventDefault();let t=u.safeParse({email:b,password:S,confirmPassword:w});if(!t.success){let e=t.error.flatten().fieldErrors;j({email:e.email?.[0],password:e.password?.[0],confirmPassword:e.confirmPassword?.[0]});return}j({}),await d(b,S)},noValidate:!0,className:`flex flex-col gap-4`,children:[m&&(0,c.jsx)(a.t,{variant:`destructive`,children:(0,c.jsx)(a.n,{children:m})}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,c.jsx)(i.t,{htmlFor:_,children:`Email`}),(0,c.jsx)(r.t,{id:_,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:b,onChange:e=>x(e.target.value),"aria-invalid":!!A.email,disabled:p}),A.email&&(0,c.jsx)(`p`,{className:`text-destructive text-xs`,children:A.email})]}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,c.jsx)(i.t,{htmlFor:v,children:`Mật khẩu`}),(0,c.jsxs)(`div`,{className:`relative`,children:[(0,c.jsx)(r.t,{id:v,type:E?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:S,onChange:e=>C(e.target.value),"aria-invalid":!!A.password,disabled:p,className:`pr-10`}),(0,c.jsx)(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),D(e=>!e)},"aria-label":E?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:E?(0,c.jsx)(o.EyeOff,{size:16}):(0,c.jsx)(o.Eye,{size:16})})]}),A.password?(0,c.jsx)(`p`,{className:`text-destructive text-xs`,children:A.password}):(0,c.jsx)(`p`,{className:`text-muted-foreground text-xs`,children:`Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.`})]}),(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,c.jsx)(i.t,{htmlFor:y,children:`Xác nhận mật khẩu`}),(0,c.jsxs)(`div`,{className:`relative`,children:[(0,c.jsx)(r.t,{id:y,type:O?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:w,onChange:e=>T(e.target.value),"aria-invalid":!!A.confirmPassword,disabled:p,className:`pr-10`}),(0,c.jsx)(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),k(e=>!e)},"aria-label":O?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:O?(0,c.jsx)(o.EyeOff,{size:16}):(0,c.jsx)(o.Eye,{size:16})})]}),A.confirmPassword&&(0,c.jsx)(`p`,{className:`text-destructive text-xs`,children:A.confirmPassword})]}),(0,c.jsx)(t.t,{type:`submit`,isLoading:p,className:`w-full`,children:`Đăng ký`})]}),f&&(0,c.jsxs)(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[(0,c.jsx)(`span`,{children:`Đã có tài khoản?`}),(0,c.jsx)(t.t,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:f,children:`Đăng nhập`})]})]})})};exports.RegisterPage=d;
 //# sourceMappingURL=RegisterPage.cjs.map

package/dist/pages/RegisterPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RegisterPage.cjs","names":["z","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","Alert","AlertDescription","Label","Input","EyeOff","Eye","Button"],"sources":["../../packages/components/pages/RegisterPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface RegisterPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits registration credentials */\n  onRegister: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Đăng nhập\" link is clicked */\n  onLogin?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng ký\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Tạo tài khoản mới để bắt đầu\" */\n  subtitle?: string;\n}\n\nconst registerSchema = z\n  .object({\n    email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n    password: z\n      .string()\n      .min(8, 'Mật khẩu phải có ít nhất 8 ký tự')\n      .max(50, 'Mật khẩu không được vượt quá 50 ký tự')\n      .regex(/[A-Z]/, 'Phải có ít nhất một chữ hoa')\n      .regex(/[a-z]/, 'Phải có ít nhất một chữ thường')\n      .regex(/[0-9]/, 'Phải có ít nhất một chữ số')\n      .regex(/[^A-Za-z0-9]/, 'Phải có ít nhất một ký tự đặc biệt'),\n    confirmPassword: z.string().min(1, 'Vui lòng xác nhận mật khẩu'),\n  })\n  .refine(data => data.password === data.confirmPassword, {\n    message: 'Mật khẩu xác nhận không khớp',\n    path: ['confirmPassword'],\n  });\n\n/**\n * Modal registration dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { RegisterPage } from '@customafk/lunas-ui/pages/RegisterPage';\n *\n * <RegisterPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onRegister={async (email, password) => {\n *     await authService.register(email, password);\n *     setOpen(false);\n *   }}\n *   onLogin={() => { setOpen(false); setLoginOpen(true); }}\n * />\n * ```\n */\nexport const RegisterPage = ({\n  open,\n  onOpenChange,\n  onRegister,\n  onLogin,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng ký',\n  subtitle = 'Tạo tài khoản mới để bắt đầu',\n}: RegisterPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const confirmPasswordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{\n    email?: string;\n    password?: string;\n    confirmPassword?: string;\n  }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = registerSchema.safeParse({ email, password, confirmPassword });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({\n        email: errors.email?.[0],\n        password: errors.password?.[0],\n        confirmPassword: errors.confirmPassword?.[0],\n      });\n      return;\n    }\n    setFieldErrors({});\n    await onRegister(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={passwordId}>Mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password ? (\n              <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>\n            ) : (\n              <p className=\"text-muted-foreground text-xs\">Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.</p>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={confirmPasswordId}>Xác nhận mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={confirmPasswordId}\n                type={showConfirmPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={confirmPassword}\n                onChange={e => setConfirmPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.confirmPassword}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowConfirmPassword(v => !v);\n                }}\n                aria-label={showConfirmPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.confirmPassword && <p className=\"text-destructive text-xs\">{fieldErrors.confirmPassword}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng ký\n          </Button>\n        </form>\n\n        {onLogin && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Đã có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onLogin}>\n              Đăng nhập\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"RegisterPage.cjs","names":["z","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","Alert","AlertDescription","Label","Input","EyeOff","Eye","Button"],"sources":["../../packages/components/pages/RegisterPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface RegisterPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits registration credentials */\n  onRegister: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Đăng nhập\" link is clicked */\n  onLogin?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng ký\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Tạo tài khoản mới để bắt đầu\" */\n  subtitle?: string;\n}\n\nconst registerSchema = z\n  .object({\n    email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n    password: z\n      .string()\n      .min(8, 'Mật khẩu phải có ít nhất 8 ký tự')\n      .max(50, 'Mật khẩu không được vượt quá 50 ký tự')\n      .regex(/[A-Z]/, 'Phải có ít nhất một chữ hoa')\n      .regex(/[a-z]/, 'Phải có ít nhất một chữ thường')\n      .regex(/[0-9]/, 'Phải có ít nhất một chữ số')\n      .regex(/[^A-Za-z0-9]/, 'Phải có ít nhất một ký tự đặc biệt'),\n    confirmPassword: z.string().min(1, 'Vui lòng xác nhận mật khẩu'),\n  })\n  .refine(data => data.password === data.confirmPassword, {\n    message: 'Mật khẩu xác nhận không khớp',\n    path: ['confirmPassword'],\n  });\n\n/**\n * Modal registration dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { RegisterPage } from '@customafk/lunas-ui/pages/RegisterPage';\n *\n * <RegisterPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onRegister={async (email, password) => {\n *     await authService.register(email, password);\n *     setOpen(false);\n *   }}\n *   onLogin={() => { setOpen(false); setLoginOpen(true); }}\n * />\n * ```\n */\nexport const RegisterPage = ({\n  open,\n  onOpenChange,\n  onRegister,\n  onLogin,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng ký',\n  subtitle = 'Tạo tài khoản mới để bắt đầu',\n}: RegisterPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const confirmPasswordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{\n    email?: string;\n    password?: string;\n    confirmPassword?: string;\n  }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = registerSchema.safeParse({ email, password, confirmPassword });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({\n        email: errors.email?.[0],\n        password: errors.password?.[0],\n        confirmPassword: errors.confirmPassword?.[0],\n      });\n      return;\n    }\n    setFieldErrors({});\n    await onRegister(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={passwordId}>Mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password ? (\n              <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>\n            ) : (\n              <p className=\"text-muted-foreground text-xs\">Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.</p>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={confirmPasswordId}>Xác nhận mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={confirmPasswordId}\n                type={showConfirmPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={confirmPassword}\n                onChange={e => setConfirmPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.confirmPassword}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowConfirmPassword(v => !v);\n                }}\n                aria-label={showConfirmPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.confirmPassword && <p className=\"text-destructive text-xs\">{fieldErrors.confirmPassword}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng ký\n          </Button>\n        </form>\n\n        {onLogin && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Đã có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onLogin}>\n              Đăng nhập\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/RegisterPage.d.cts

@@ -1,4 +1,4 @@
-import * as react32 from "react";
+import * as react6 from "react";
 
 //#region packages/components/pages/RegisterPage.d.ts
 interface RegisterPageProps {
@@ -46,7 +46,7 @@ declare const RegisterPage: ({
   errorMessage,
   title,
   subtitle
-}: RegisterPageProps) => react32.JSX.Element;
+}: RegisterPageProps) => react6.JSX.Element;
 //#endregion
 export { RegisterPage, RegisterPageProps };
 //# sourceMappingURL=RegisterPage.d.cts.map

package/dist/pages/RegisterPage.d.mts

@@ -1,4 +1,4 @@
-import * as react38 from "react";
+import * as react26 from "react";
 
 //#region packages/components/pages/RegisterPage.d.ts
 interface RegisterPageProps {
@@ -46,7 +46,7 @@ declare const RegisterPage: ({
   errorMessage,
   title,
   subtitle
-}: RegisterPageProps) => react38.JSX.Element;
+}: RegisterPageProps) => react26.JSX.Element;
 //#endregion
 export { RegisterPage, RegisterPageProps };
 //# sourceMappingURL=RegisterPage.d.mts.map

package/dist/pages/RegisterPage.mjs

@@ -1,2 +1,2 @@
-"use client";import"../button.variants-CwcJHcI5.mjs";import{t as e}from"../button-BqxBQ4Kr.mjs";import"../heading-B1t9baTw.mjs";import"../paragraph-J_QbLq9_.mjs";import"../close-BMhGSmGs.mjs";import{i as t,l as n,o as r,r as i,t as a}from"../dialog-jqiIqxlm.mjs";import{t as o}from"../input-CKFQdvqY.mjs";import{t as s}from"../label-CE2m0U_j.mjs";import{n as c,t as l}from"../alert-BC5Nss8t.mjs";import{Eye as u,EyeOff as d}from"lucide-react";import{useId as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{z as g}from"zod";const _=g.object({email:g.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:g.string().min(8,`Mật khẩu phải có ít nhất 8 ký tự`).max(50,`Mật khẩu không được vượt quá 50 ký tự`).regex(/[A-Z]/,`Phải có ít nhất một chữ hoa`).regex(/[a-z]/,`Phải có ít nhất một chữ thường`).regex(/[0-9]/,`Phải có ít nhất một chữ số`).regex(/[^A-Za-z0-9]/,`Phải có ít nhất một ký tự đặc biệt`),confirmPassword:g.string().min(1,`Vui lòng xác nhận mật khẩu`)}).refine(e=>e.password===e.confirmPassword,{message:`Mật khẩu xác nhận không khớp`,path:[`confirmPassword`]}),v=({open:g,onOpenChange:v,onRegister:y,onLogin:b,isLoading:x=!1,errorMessage:S,title:C=`Đăng ký`,subtitle:w=`Tạo tài khoản mới để bắt đầu`})=>{let T=f(),E=f(),D=f(),[O,k]=p(``),[A,j]=p(``),[M,N]=p(``),[P,F]=p(!1),[I,L]=p(!1),[R,z]=p({});return m(a,{open:g,onOpenChange:v,children:h(i,{className:`sm:max-w-sm`,children:[h(r,{children:[m(n,{children:C}),m(t,{children:w})]}),h(`form`,{onSubmit:async e=>{e.preventDefault();let t=_.safeParse({email:O,password:A,confirmPassword:M});if(!t.success){let e=t.error.flatten().fieldErrors;z({email:e.email?.[0],password:e.password?.[0],confirmPassword:e.confirmPassword?.[0]});return}z({}),await y(O,A)},noValidate:!0,className:`flex flex-col gap-4`,children:[S&&m(l,{variant:`destructive`,children:m(c,{children:S})}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:T,children:`Email`}),m(o,{id:T,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:O,onChange:e=>k(e.target.value),"aria-invalid":!!R.email,disabled:x}),R.email&&m(`p`,{className:`text-destructive text-xs`,children:R.email})]}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:E,children:`Mật khẩu`}),h(`div`,{className:`relative`,children:[m(o,{id:E,type:P?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:A,onChange:e=>j(e.target.value),"aria-invalid":!!R.password,disabled:x,className:`pr-10`}),m(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),F(e=>!e)},"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m(P?d:u,{size:16})})]}),R.password?m(`p`,{className:`text-destructive text-xs`,children:R.password}):m(`p`,{className:`text-muted-foreground text-xs`,children:`Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.`})]}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:D,children:`Xác nhận mật khẩu`}),h(`div`,{className:`relative`,children:[m(o,{id:D,type:I?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:M,onChange:e=>N(e.target.value),"aria-invalid":!!R.confirmPassword,disabled:x,className:`pr-10`}),m(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),L(e=>!e)},"aria-label":I?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m(I?d:u,{size:16})})]}),R.confirmPassword&&m(`p`,{className:`text-destructive text-xs`,children:R.confirmPassword})]}),m(e,{type:`submit`,isLoading:x,className:`w-full`,children:`Đăng ký`})]}),b&&h(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[m(`span`,{children:`Đã có tài khoản?`}),m(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:b,children:`Đăng nhập`})]})]})})};export{v as RegisterPage};
+"use client";import"../button.variants-CwcJHcI5.mjs";import{t as e}from"../button-BqxBQ4Kr.mjs";import"../heading-B1t9baTw.mjs";import"../paragraph-J_QbLq9_.mjs";import"../close-BMhGSmGs.mjs";import{i as t,l as n,o as r,r as i,t as a}from"../dialog-jqiIqxlm.mjs";import{t as o}from"../input-CKFQdvqY.mjs";import{t as s}from"../label-CE2m0U_j.mjs";import{n as c,t as l}from"../alert-BC5Nss8t.mjs";import{Eye as u,EyeOff as d}from"lucide-react";import{useId as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{z as g}from"zod";const _=g.object({email:g.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:g.string().min(8,`Mật khẩu phải có ít nhất 8 ký tự`).max(50,`Mật khẩu không được vượt quá 50 ký tự`).regex(/[A-Z]/,`Phải có ít nhất một chữ hoa`).regex(/[a-z]/,`Phải có ít nhất một chữ thường`).regex(/[0-9]/,`Phải có ít nhất một chữ số`).regex(/[^A-Za-z0-9]/,`Phải có ít nhất một ký tự đặc biệt`),confirmPassword:g.string().min(1,`Vui lòng xác nhận mật khẩu`)}).refine(e=>e.password===e.confirmPassword,{message:`Mật khẩu xác nhận không khớp`,path:[`confirmPassword`]}),v=({open:g,onOpenChange:v,onRegister:y,onLogin:b,isLoading:x=!1,errorMessage:S,title:C=`Đăng ký`,subtitle:w=`Tạo tài khoản mới để bắt đầu`})=>{let T=f(),E=f(),D=f(),[O,k]=p(``),[A,j]=p(``),[M,N]=p(``),[P,F]=p(!1),[I,L]=p(!1),[R,z]=p({});return m(a,{open:g,onOpenChange:v,children:h(i,{className:`max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm`,children:[h(r,{children:[m(n,{children:C}),m(t,{children:w})]}),h(`form`,{onSubmit:async e=>{e.preventDefault();let t=_.safeParse({email:O,password:A,confirmPassword:M});if(!t.success){let e=t.error.flatten().fieldErrors;z({email:e.email?.[0],password:e.password?.[0],confirmPassword:e.confirmPassword?.[0]});return}z({}),await y(O,A)},noValidate:!0,className:`flex flex-col gap-4`,children:[S&&m(l,{variant:`destructive`,children:m(c,{children:S})}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:T,children:`Email`}),m(o,{id:T,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:O,onChange:e=>k(e.target.value),"aria-invalid":!!R.email,disabled:x}),R.email&&m(`p`,{className:`text-destructive text-xs`,children:R.email})]}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:E,children:`Mật khẩu`}),h(`div`,{className:`relative`,children:[m(o,{id:E,type:P?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:A,onChange:e=>j(e.target.value),"aria-invalid":!!R.password,disabled:x,className:`pr-10`}),m(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),F(e=>!e)},"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m(P?d:u,{size:16})})]}),R.password?m(`p`,{className:`text-destructive text-xs`,children:R.password}):m(`p`,{className:`text-muted-foreground text-xs`,children:`Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.`})]}),h(`div`,{className:`flex flex-col gap-1.5`,children:[m(s,{htmlFor:D,children:`Xác nhận mật khẩu`}),h(`div`,{className:`relative`,children:[m(o,{id:D,type:I?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:M,onChange:e=>N(e.target.value),"aria-invalid":!!R.confirmPassword,disabled:x,className:`pr-10`}),m(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),L(e=>!e)},"aria-label":I?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m(I?d:u,{size:16})})]}),R.confirmPassword&&m(`p`,{className:`text-destructive text-xs`,children:R.confirmPassword})]}),m(e,{type:`submit`,isLoading:x,className:`w-full`,children:`Đăng ký`})]}),b&&h(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[m(`span`,{children:`Đã có tài khoản?`}),m(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:b,children:`Đăng nhập`})]})]})})};export{v as RegisterPage};
 //# sourceMappingURL=RegisterPage.mjs.map

package/dist/pages/RegisterPage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RegisterPage.mjs","names":[],"sources":["../../packages/components/pages/RegisterPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface RegisterPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits registration credentials */\n  onRegister: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Đăng nhập\" link is clicked */\n  onLogin?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng ký\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Tạo tài khoản mới để bắt đầu\" */\n  subtitle?: string;\n}\n\nconst registerSchema = z\n  .object({\n    email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n    password: z\n      .string()\n      .min(8, 'Mật khẩu phải có ít nhất 8 ký tự')\n      .max(50, 'Mật khẩu không được vượt quá 50 ký tự')\n      .regex(/[A-Z]/, 'Phải có ít nhất một chữ hoa')\n      .regex(/[a-z]/, 'Phải có ít nhất một chữ thường')\n      .regex(/[0-9]/, 'Phải có ít nhất một chữ số')\n      .regex(/[^A-Za-z0-9]/, 'Phải có ít nhất một ký tự đặc biệt'),\n    confirmPassword: z.string().min(1, 'Vui lòng xác nhận mật khẩu'),\n  })\n  .refine(data => data.password === data.confirmPassword, {\n    message: 'Mật khẩu xác nhận không khớp',\n    path: ['confirmPassword'],\n  });\n\n/**\n * Modal registration dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { RegisterPage } from '@customafk/lunas-ui/pages/RegisterPage';\n *\n * <RegisterPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onRegister={async (email, password) => {\n *     await authService.register(email, password);\n *     setOpen(false);\n *   }}\n *   onLogin={() => { setOpen(false); setLoginOpen(true); }}\n * />\n * ```\n */\nexport const RegisterPage = ({\n  open,\n  onOpenChange,\n  onRegister,\n  onLogin,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng ký',\n  subtitle = 'Tạo tài khoản mới để bắt đầu',\n}: RegisterPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const confirmPasswordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{\n    email?: string;\n    password?: string;\n    confirmPassword?: string;\n  }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = registerSchema.safeParse({ email, password, confirmPassword });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({\n        email: errors.email?.[0],\n        password: errors.password?.[0],\n        confirmPassword: errors.confirmPassword?.[0],\n      });\n      return;\n    }\n    setFieldErrors({});\n    await onRegister(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={passwordId}>Mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password ? (\n              <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>\n            ) : (\n              <p className=\"text-muted-foreground text-xs\">Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.</p>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={confirmPasswordId}>Xác nhận mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={confirmPasswordId}\n                type={showConfirmPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={confirmPassword}\n                onChange={e => setConfirmPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.confirmPassword}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowConfirmPassword(v => !v);\n                }}\n                aria-label={showConfirmPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.confirmPassword && <p className=\"text-destructive text-xs\">{fieldErrors.confirmPassword}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng ký\n          </Button>\n        </form>\n\n        {onLogin && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Đã có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onLogin}>\n              Đăng nhập\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"RegisterPage.mjs","names":[],"sources":["../../packages/components/pages/RegisterPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface RegisterPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits registration credentials */\n  onRegister: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Đăng nhập\" link is clicked */\n  onLogin?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng ký\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Tạo tài khoản mới để bắt đầu\" */\n  subtitle?: string;\n}\n\nconst registerSchema = z\n  .object({\n    email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n    password: z\n      .string()\n      .min(8, 'Mật khẩu phải có ít nhất 8 ký tự')\n      .max(50, 'Mật khẩu không được vượt quá 50 ký tự')\n      .regex(/[A-Z]/, 'Phải có ít nhất một chữ hoa')\n      .regex(/[a-z]/, 'Phải có ít nhất một chữ thường')\n      .regex(/[0-9]/, 'Phải có ít nhất một chữ số')\n      .regex(/[^A-Za-z0-9]/, 'Phải có ít nhất một ký tự đặc biệt'),\n    confirmPassword: z.string().min(1, 'Vui lòng xác nhận mật khẩu'),\n  })\n  .refine(data => data.password === data.confirmPassword, {\n    message: 'Mật khẩu xác nhận không khớp',\n    path: ['confirmPassword'],\n  });\n\n/**\n * Modal registration dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { RegisterPage } from '@customafk/lunas-ui/pages/RegisterPage';\n *\n * <RegisterPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onRegister={async (email, password) => {\n *     await authService.register(email, password);\n *     setOpen(false);\n *   }}\n *   onLogin={() => { setOpen(false); setLoginOpen(true); }}\n * />\n * ```\n */\nexport const RegisterPage = ({\n  open,\n  onOpenChange,\n  onRegister,\n  onLogin,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng ký',\n  subtitle = 'Tạo tài khoản mới để bắt đầu',\n}: RegisterPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const confirmPasswordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{\n    email?: string;\n    password?: string;\n    confirmPassword?: string;\n  }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = registerSchema.safeParse({ email, password, confirmPassword });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({\n        email: errors.email?.[0],\n        password: errors.password?.[0],\n        confirmPassword: errors.confirmPassword?.[0],\n      });\n      return;\n    }\n    setFieldErrors({});\n    await onRegister(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={passwordId}>Mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password ? (\n              <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>\n            ) : (\n              <p className=\"text-muted-foreground text-xs\">Tối thiểu 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.</p>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={confirmPasswordId}>Xác nhận mật khẩu</Label>\n            <div className=\"relative\">\n              <Input\n                id={confirmPasswordId}\n                type={showConfirmPassword ? 'text' : 'password'}\n                autoComplete=\"new-password\"\n                placeholder=\"••••••••\"\n                value={confirmPassword}\n                onChange={e => setConfirmPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.confirmPassword}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowConfirmPassword(v => !v);\n                }}\n                aria-label={showConfirmPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.confirmPassword && <p className=\"text-destructive text-xs\">{fieldErrors.confirmPassword}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng ký\n          </Button>\n        </form>\n\n        {onLogin && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Đã có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onLogin}>\n              Đăng nhập\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/VerifyEmailPage.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-tnhb123u.cjs`);const t=require(`../button-Bu4ejNOW.cjs`);require(`../heading-wUXEbicM.cjs`),require(`../paragraph-D-JHj7EP.cjs`),require(`../close-DUBEKxhw.cjs`);const n=require(`../dialog-DEnyBH2X.cjs`),r=require(`../alert-4rfsFtN6.cjs`),i=require(`../ui/input-otp.cjs`);let a=require(`react`),o=require(`react/jsx-runtime`);const s=({open:e,onOpenChange:s,email:c,onVerify:l,onResend:u,onBack:d,isLoading:f=!1,errorMessage:p,title:m=`Xác thực email`,subtitle:h,resendCooldownSeconds:g=60})=>{let[_,v]=(0,a.useState)(``),[y,b]=(0,a.useState)(g),x=(0,a.useRef)(null),S=(0,a.useCallback)(e=>{x.current&&clearInterval(x.current),b(e),x.current=setInterval(()=>{b(e=>e<=1?(x.current&&clearInterval(x.current),0):e-1)},1e3)},[]);(0,a.useEffect)(()=>(e&&g>0&&S(g),()=>{x.current&&clearInterval(x.current)}),[e,g,S]);let C=(0,a.useCallback)(async()=>{S(g),await u(c)},[c,u,g,S]),w=(0,a.useCallback)(async()=>{_.length<6||await l(c,_)},[c,_,l]);return(0,o.jsx)(n.t,{open:e,onOpenChange:s,children:(0,o.jsxs)(n.r,{className:`sm:max-w-sm`,children:[(0,o.jsxs)(n.o,{children:[(0,o.jsx)(n.l,{children:m}),(0,o.jsx)(n.i,{children:h??(0,o.jsxs)(o.Fragment,{children:[`Nhập mã OTP đã được gửi tới `,(0,o.jsx)(`span`,{className:`font-medium text-foreground`,children:c}),`. Mã có hiệu lực trong 10 phút.`]})})]}),(0,o.jsxs)(`div`,{className:`flex flex-col items-center gap-4`,children:[p&&(0,o.jsx)(r.t,{variant:`destructive`,className:`w-full`,children:(0,o.jsx)(r.n,{children:p})}),(0,o.jsxs)(i.InputOTP,{maxLength:6,value:_,onChange:v,onComplete:w,disabled:f,children:[(0,o.jsxs)(i.InputOTPGroup,{children:[(0,o.jsx)(i.InputOTPSlot,{index:0}),(0,o.jsx)(i.InputOTPSlot,{index:1}),(0,o.jsx)(i.InputOTPSlot,{index:2})]}),(0,o.jsx)(i.InputOTPSeparator,{}),(0,o.jsxs)(i.InputOTPGroup,{children:[(0,o.jsx)(i.InputOTPSlot,{index:3}),(0,o.jsx)(i.InputOTPSlot,{index:4}),(0,o.jsx)(i.InputOTPSlot,{index:5})]})]}),(0,o.jsx)(t.t,{type:`button`,isLoading:f,disabled:_.length<6,className:`w-full`,onClick:w,children:`Xác thực`}),(0,o.jsxs)(`div`,{className:`flex items-center gap-1 text-muted-foreground text-sm`,children:[(0,o.jsx)(`span`,{children:`Chưa nhận được mã?`}),(0,o.jsx)(t.t,{variant:`link`,size:`sm`,className:`h-auto p-0`,disabled:y>0||f,onClick:C,children:y>0?`Gửi lại (${y}s)`:`Gửi lại`})]}),d&&(0,o.jsx)(t.t,{variant:`ghost`,size:`sm`,className:`w-full`,onClick:d,children:`Quay lại`})]})]})})};exports.VerifyEmailPage=s;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-tnhb123u.cjs`);const t=require(`../button-Bu4ejNOW.cjs`);require(`../heading-wUXEbicM.cjs`),require(`../paragraph-D-JHj7EP.cjs`),require(`../close-DUBEKxhw.cjs`);const n=require(`../dialog-DEnyBH2X.cjs`),r=require(`../alert-4rfsFtN6.cjs`),i=require(`../ui/input-otp.cjs`);let a=require(`react`),o=require(`react/jsx-runtime`);const s=({open:e,onOpenChange:s,email:c,onVerify:l,onResend:u,onBack:d,isLoading:f=!1,errorMessage:p,title:m=`Xác thực email`,subtitle:h,resendCooldownSeconds:g=60})=>{let[_,v]=(0,a.useState)(``),[y,b]=(0,a.useState)(g),x=(0,a.useRef)(null),S=(0,a.useCallback)(e=>{x.current&&clearInterval(x.current),b(e),x.current=setInterval(()=>{b(e=>e<=1?(x.current&&clearInterval(x.current),0):e-1)},1e3)},[]);(0,a.useEffect)(()=>(e&&g>0&&S(g),()=>{x.current&&clearInterval(x.current)}),[e,g,S]);let C=(0,a.useCallback)(async()=>{S(g),await u(c)},[c,u,g,S]),w=(0,a.useCallback)(async()=>{_.length<6||await l(c,_)},[c,_,l]);return(0,o.jsx)(n.t,{open:e,onOpenChange:s,children:(0,o.jsxs)(n.r,{className:`max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm`,children:[(0,o.jsxs)(n.o,{children:[(0,o.jsx)(n.l,{children:m}),(0,o.jsx)(n.i,{children:h??(0,o.jsxs)(o.Fragment,{children:[`Nhập mã OTP đã được gửi tới `,(0,o.jsx)(`span`,{className:`font-medium text-foreground`,children:c}),`. Mã có hiệu lực trong 10 phút.`]})})]}),(0,o.jsxs)(`div`,{className:`flex flex-col items-center gap-4`,children:[p&&(0,o.jsx)(r.t,{variant:`destructive`,className:`w-full`,children:(0,o.jsx)(r.n,{children:p})}),(0,o.jsxs)(i.InputOTP,{maxLength:6,value:_,onChange:v,onComplete:w,disabled:f,children:[(0,o.jsxs)(i.InputOTPGroup,{children:[(0,o.jsx)(i.InputOTPSlot,{index:0}),(0,o.jsx)(i.InputOTPSlot,{index:1}),(0,o.jsx)(i.InputOTPSlot,{index:2})]}),(0,o.jsx)(i.InputOTPSeparator,{}),(0,o.jsxs)(i.InputOTPGroup,{children:[(0,o.jsx)(i.InputOTPSlot,{index:3}),(0,o.jsx)(i.InputOTPSlot,{index:4}),(0,o.jsx)(i.InputOTPSlot,{index:5})]})]}),(0,o.jsx)(t.t,{type:`button`,isLoading:f,disabled:_.length<6,className:`w-full`,onClick:w,children:`Xác thực`}),(0,o.jsxs)(`div`,{className:`flex items-center gap-1 text-muted-foreground text-sm`,children:[(0,o.jsx)(`span`,{children:`Chưa nhận được mã?`}),(0,o.jsx)(t.t,{variant:`link`,size:`sm`,className:`h-auto p-0`,disabled:y>0||f,onClick:C,children:y>0?`Gửi lại (${y}s)`:`Gửi lại`})]}),d&&(0,o.jsx)(t.t,{variant:`ghost`,size:`sm`,className:`w-full`,onClick:d,children:`Quay lại`})]})]})})};exports.VerifyEmailPage=s;
 //# sourceMappingURL=VerifyEmailPage.cjs.map

package/dist/pages/VerifyEmailPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerifyEmailPage.cjs","names":["Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","Alert","AlertDescription","InputOTP","InputOTPGroup","InputOTPSlot","InputOTPSeparator","Button"],"sources":["../../packages/components/pages/VerifyEmailPage.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../ui/input-otp';\n\nexport interface VerifyEmailPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** The email address the OTP was dispatched to — displayed as context and passed to callbacks */\n  email: string;\n  /** Called when the user submits the OTP code */\n  onVerify: (email: string, otp: string) => Promise<void> | void;\n  /** Called when the user requests a new OTP; triggers a fresh cooldown */\n  onResend: (email: string) => Promise<void> | void;\n  /** Called when the back link is clicked */\n  onBack?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Xác thực email\" */\n  title?: string;\n  /** Dialog subheading. Default: built from the email prop */\n  subtitle?: string;\n  /** Seconds before the resend button becomes available. Default: 60 */\n  resendCooldownSeconds?: number;\n}\n\n/**\n * Modal email OTP verification dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { VerifyEmailPage } from '@customafk/lunas-ui/pages/VerifyEmailPage';\n *\n * <VerifyEmailPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   email=\"user@example.com\"\n *   onVerify={async (email, otp) => {\n *     await authService.verifyEmail(email, otp);\n *     setOpen(false);\n *   }}\n *   onResend={async (email) => {\n *     await authService.resendVerification(email);\n *   }}\n * />\n * ```\n */\nexport const VerifyEmailPage = ({\n  open,\n  onOpenChange,\n  email,\n  onVerify,\n  onResend,\n  onBack,\n  isLoading = false,\n  errorMessage,\n  title = 'Xác thực email',\n  subtitle,\n  resendCooldownSeconds = 60,\n}: VerifyEmailPageProps) => {\n  const [otp, setOtp] = useState('');\n  const [countdown, setCountdown] = useState(resendCooldownSeconds);\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const startCountdown = useCallback((seconds: number) => {\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    setCountdown(seconds);\n    intervalRef.current = setInterval(() => {\n      setCountdown(prev => {\n        if (prev <= 1) {\n          if (intervalRef.current) clearInterval(intervalRef.current);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n  }, []);\n\n  useEffect(() => {\n    if (open && resendCooldownSeconds > 0) startCountdown(resendCooldownSeconds);\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, [open, resendCooldownSeconds, startCountdown]);\n\n  const handleResend = useCallback(async () => {\n    startCountdown(resendCooldownSeconds);\n    await onResend(email);\n  }, [email, onResend, resendCooldownSeconds, startCountdown]);\n\n  const handleVerify = useCallback(async () => {\n    if (otp.length < 6) return;\n    await onVerify(email, otp);\n  }, [email, otp, onVerify]);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>\n            {subtitle ?? (\n              <>\n                Nhập mã OTP đã được gửi tới <span className=\"font-medium text-foreground\">{email}</span>. Mã có hiệu lực trong 10 phút.\n              </>\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"flex flex-col items-center gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\" className=\"w-full\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <InputOTP maxLength={6} value={otp} onChange={setOtp} onComplete={handleVerify} disabled={isLoading}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n\n          <Button type=\"button\" isLoading={isLoading} disabled={otp.length < 6} className=\"w-full\" onClick={handleVerify}>\n            Xác thực\n          </Button>\n\n          <div className=\"flex items-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa nhận được mã?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" disabled={countdown > 0 || isLoading} onClick={handleResend}>\n              {countdown > 0 ? `Gửi lại (${countdown}s)` : 'Gửi lại'}\n            </Button>\n          </div>\n\n          {onBack && (\n            <Button variant=\"ghost\" size=\"sm\" className=\"w-full\" onClick={onBack}>\n              Quay lại\n            </Button>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"VerifyEmailPage.cjs","names":["Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","Alert","AlertDescription","InputOTP","InputOTPGroup","InputOTPSlot","InputOTPSeparator","Button"],"sources":["../../packages/components/pages/VerifyEmailPage.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../ui/input-otp';\n\nexport interface VerifyEmailPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** The email address the OTP was dispatched to — displayed as context and passed to callbacks */\n  email: string;\n  /** Called when the user submits the OTP code */\n  onVerify: (email: string, otp: string) => Promise<void> | void;\n  /** Called when the user requests a new OTP; triggers a fresh cooldown */\n  onResend: (email: string) => Promise<void> | void;\n  /** Called when the back link is clicked */\n  onBack?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Xác thực email\" */\n  title?: string;\n  /** Dialog subheading. Default: built from the email prop */\n  subtitle?: string;\n  /** Seconds before the resend button becomes available. Default: 60 */\n  resendCooldownSeconds?: number;\n}\n\n/**\n * Modal email OTP verification dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { VerifyEmailPage } from '@customafk/lunas-ui/pages/VerifyEmailPage';\n *\n * <VerifyEmailPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   email=\"user@example.com\"\n *   onVerify={async (email, otp) => {\n *     await authService.verifyEmail(email, otp);\n *     setOpen(false);\n *   }}\n *   onResend={async (email) => {\n *     await authService.resendVerification(email);\n *   }}\n * />\n * ```\n */\nexport const VerifyEmailPage = ({\n  open,\n  onOpenChange,\n  email,\n  onVerify,\n  onResend,\n  onBack,\n  isLoading = false,\n  errorMessage,\n  title = 'Xác thực email',\n  subtitle,\n  resendCooldownSeconds = 60,\n}: VerifyEmailPageProps) => {\n  const [otp, setOtp] = useState('');\n  const [countdown, setCountdown] = useState(resendCooldownSeconds);\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const startCountdown = useCallback((seconds: number) => {\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    setCountdown(seconds);\n    intervalRef.current = setInterval(() => {\n      setCountdown(prev => {\n        if (prev <= 1) {\n          if (intervalRef.current) clearInterval(intervalRef.current);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n  }, []);\n\n  useEffect(() => {\n    if (open && resendCooldownSeconds > 0) startCountdown(resendCooldownSeconds);\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, [open, resendCooldownSeconds, startCountdown]);\n\n  const handleResend = useCallback(async () => {\n    startCountdown(resendCooldownSeconds);\n    await onResend(email);\n  }, [email, onResend, resendCooldownSeconds, startCountdown]);\n\n  const handleVerify = useCallback(async () => {\n    if (otp.length < 6) return;\n    await onVerify(email, otp);\n  }, [email, otp, onVerify]);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>\n            {subtitle ?? (\n              <>\n                Nhập mã OTP đã được gửi tới <span className=\"font-medium text-foreground\">{email}</span>. Mã có hiệu lực trong 10 phút.\n              </>\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"flex flex-col items-center gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\" className=\"w-full\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <InputOTP maxLength={6} value={otp} onChange={setOtp} onComplete={handleVerify} disabled={isLoading}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n\n          <Button type=\"button\" isLoading={isLoading} disabled={otp.length < 6} className=\"w-full\" onClick={handleVerify}>\n            Xác thực\n          </Button>\n\n          <div className=\"flex items-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa nhận được mã?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" disabled={countdown > 0 || isLoading} onClick={handleResend}>\n              {countdown > 0 ? `Gửi lại (${countdown}s)` : 'Gửi lại'}\n            </Button>\n          </div>\n\n          {onBack && (\n            <Button variant=\"ghost\" size=\"sm\" className=\"w-full\" onClick={onBack}>\n              Quay lại\n            </Button>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/VerifyEmailPage.d.cts

@@ -1,4 +1,4 @@
-import * as react34 from "react";
+import * as react0 from "react";
 
 //#region packages/components/pages/VerifyEmailPage.d.ts
 interface VerifyEmailPageProps {
@@ -58,7 +58,7 @@ declare const VerifyEmailPage: ({
   title,
   subtitle,
   resendCooldownSeconds
-}: VerifyEmailPageProps) => react34.JSX.Element;
+}: VerifyEmailPageProps) => react0.JSX.Element;
 //#endregion
 export { VerifyEmailPage, VerifyEmailPageProps };
 //# sourceMappingURL=VerifyEmailPage.d.cts.map

package/dist/pages/VerifyEmailPage.d.mts

@@ -1,4 +1,4 @@
-import * as react32 from "react";
+import * as react46 from "react";
 
 //#region packages/components/pages/VerifyEmailPage.d.ts
 interface VerifyEmailPageProps {
@@ -58,7 +58,7 @@ declare const VerifyEmailPage: ({
   title,
   subtitle,
   resendCooldownSeconds
-}: VerifyEmailPageProps) => react32.JSX.Element;
+}: VerifyEmailPageProps) => react46.JSX.Element;
 //#endregion
 export { VerifyEmailPage, VerifyEmailPageProps };
 //# sourceMappingURL=VerifyEmailPage.d.mts.map

package/dist/pages/VerifyEmailPage.mjs

@@ -1,2 +1,2 @@
-"use client";import"../button.variants-CwcJHcI5.mjs";import{t as e}from"../button-BqxBQ4Kr.mjs";import"../heading-B1t9baTw.mjs";import"../paragraph-J_QbLq9_.mjs";import"../close-BMhGSmGs.mjs";import{i as t,l as n,o as r,r as i,t as a}from"../dialog-jqiIqxlm.mjs";import{n as o,t as s}from"../alert-BC5Nss8t.mjs";import{InputOTP as c,InputOTPGroup as l,InputOTPSeparator as u,InputOTPSlot as d}from"../ui/input-otp.mjs";import{useCallback as f,useEffect as p,useRef as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=({open:y,onOpenChange:b,email:x,onVerify:S,onResend:C,onBack:w,isLoading:T=!1,errorMessage:E,title:D=`Xác thực email`,subtitle:O,resendCooldownSeconds:k=60})=>{let[A,j]=h(``),[M,N]=h(k),P=m(null),F=f(e=>{P.current&&clearInterval(P.current),N(e),P.current=setInterval(()=>{N(e=>e<=1?(P.current&&clearInterval(P.current),0):e-1)},1e3)},[]);p(()=>(y&&k>0&&F(k),()=>{P.current&&clearInterval(P.current)}),[y,k,F]);let I=f(async()=>{F(k),await C(x)},[x,C,k,F]),L=f(async()=>{A.length<6||await S(x,A)},[x,A,S]);return _(a,{open:y,onOpenChange:b,children:v(i,{className:`sm:max-w-sm`,children:[v(r,{children:[_(n,{children:D}),_(t,{children:O??v(g,{children:[`Nhập mã OTP đã được gửi tới `,_(`span`,{className:`font-medium text-foreground`,children:x}),`. Mã có hiệu lực trong 10 phút.`]})})]}),v(`div`,{className:`flex flex-col items-center gap-4`,children:[E&&_(s,{variant:`destructive`,className:`w-full`,children:_(o,{children:E})}),v(c,{maxLength:6,value:A,onChange:j,onComplete:L,disabled:T,children:[v(l,{children:[_(d,{index:0}),_(d,{index:1}),_(d,{index:2})]}),_(u,{}),v(l,{children:[_(d,{index:3}),_(d,{index:4}),_(d,{index:5})]})]}),_(e,{type:`button`,isLoading:T,disabled:A.length<6,className:`w-full`,onClick:L,children:`Xác thực`}),v(`div`,{className:`flex items-center gap-1 text-muted-foreground text-sm`,children:[_(`span`,{children:`Chưa nhận được mã?`}),_(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,disabled:M>0||T,onClick:I,children:M>0?`Gửi lại (${M}s)`:`Gửi lại`})]}),w&&_(e,{variant:`ghost`,size:`sm`,className:`w-full`,onClick:w,children:`Quay lại`})]})]})})};export{y as VerifyEmailPage};
+"use client";import"../button.variants-CwcJHcI5.mjs";import{t as e}from"../button-BqxBQ4Kr.mjs";import"../heading-B1t9baTw.mjs";import"../paragraph-J_QbLq9_.mjs";import"../close-BMhGSmGs.mjs";import{i as t,l as n,o as r,r as i,t as a}from"../dialog-jqiIqxlm.mjs";import{n as o,t as s}from"../alert-BC5Nss8t.mjs";import{InputOTP as c,InputOTPGroup as l,InputOTPSeparator as u,InputOTPSlot as d}from"../ui/input-otp.mjs";import{useCallback as f,useEffect as p,useRef as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=({open:y,onOpenChange:b,email:x,onVerify:S,onResend:C,onBack:w,isLoading:T=!1,errorMessage:E,title:D=`Xác thực email`,subtitle:O,resendCooldownSeconds:k=60})=>{let[A,j]=h(``),[M,N]=h(k),P=m(null),F=f(e=>{P.current&&clearInterval(P.current),N(e),P.current=setInterval(()=>{N(e=>e<=1?(P.current&&clearInterval(P.current),0):e-1)},1e3)},[]);p(()=>(y&&k>0&&F(k),()=>{P.current&&clearInterval(P.current)}),[y,k,F]);let I=f(async()=>{F(k),await C(x)},[x,C,k,F]),L=f(async()=>{A.length<6||await S(x,A)},[x,A,S]);return _(a,{open:y,onOpenChange:b,children:v(i,{className:`max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm`,children:[v(r,{children:[_(n,{children:D}),_(t,{children:O??v(g,{children:[`Nhập mã OTP đã được gửi tới `,_(`span`,{className:`font-medium text-foreground`,children:x}),`. Mã có hiệu lực trong 10 phút.`]})})]}),v(`div`,{className:`flex flex-col items-center gap-4`,children:[E&&_(s,{variant:`destructive`,className:`w-full`,children:_(o,{children:E})}),v(c,{maxLength:6,value:A,onChange:j,onComplete:L,disabled:T,children:[v(l,{children:[_(d,{index:0}),_(d,{index:1}),_(d,{index:2})]}),_(u,{}),v(l,{children:[_(d,{index:3}),_(d,{index:4}),_(d,{index:5})]})]}),_(e,{type:`button`,isLoading:T,disabled:A.length<6,className:`w-full`,onClick:L,children:`Xác thực`}),v(`div`,{className:`flex items-center gap-1 text-muted-foreground text-sm`,children:[_(`span`,{children:`Chưa nhận được mã?`}),_(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,disabled:M>0||T,onClick:I,children:M>0?`Gửi lại (${M}s)`:`Gửi lại`})]}),w&&_(e,{variant:`ghost`,size:`sm`,className:`w-full`,onClick:w,children:`Quay lại`})]})]})})};export{y as VerifyEmailPage};
 //# sourceMappingURL=VerifyEmailPage.mjs.map

package/dist/pages/VerifyEmailPage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerifyEmailPage.mjs","names":[],"sources":["../../packages/components/pages/VerifyEmailPage.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../ui/input-otp';\n\nexport interface VerifyEmailPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** The email address the OTP was dispatched to — displayed as context and passed to callbacks */\n  email: string;\n  /** Called when the user submits the OTP code */\n  onVerify: (email: string, otp: string) => Promise<void> | void;\n  /** Called when the user requests a new OTP; triggers a fresh cooldown */\n  onResend: (email: string) => Promise<void> | void;\n  /** Called when the back link is clicked */\n  onBack?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Xác thực email\" */\n  title?: string;\n  /** Dialog subheading. Default: built from the email prop */\n  subtitle?: string;\n  /** Seconds before the resend button becomes available. Default: 60 */\n  resendCooldownSeconds?: number;\n}\n\n/**\n * Modal email OTP verification dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { VerifyEmailPage } from '@customafk/lunas-ui/pages/VerifyEmailPage';\n *\n * <VerifyEmailPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   email=\"user@example.com\"\n *   onVerify={async (email, otp) => {\n *     await authService.verifyEmail(email, otp);\n *     setOpen(false);\n *   }}\n *   onResend={async (email) => {\n *     await authService.resendVerification(email);\n *   }}\n * />\n * ```\n */\nexport const VerifyEmailPage = ({\n  open,\n  onOpenChange,\n  email,\n  onVerify,\n  onResend,\n  onBack,\n  isLoading = false,\n  errorMessage,\n  title = 'Xác thực email',\n  subtitle,\n  resendCooldownSeconds = 60,\n}: VerifyEmailPageProps) => {\n  const [otp, setOtp] = useState('');\n  const [countdown, setCountdown] = useState(resendCooldownSeconds);\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const startCountdown = useCallback((seconds: number) => {\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    setCountdown(seconds);\n    intervalRef.current = setInterval(() => {\n      setCountdown(prev => {\n        if (prev <= 1) {\n          if (intervalRef.current) clearInterval(intervalRef.current);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n  }, []);\n\n  useEffect(() => {\n    if (open && resendCooldownSeconds > 0) startCountdown(resendCooldownSeconds);\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, [open, resendCooldownSeconds, startCountdown]);\n\n  const handleResend = useCallback(async () => {\n    startCountdown(resendCooldownSeconds);\n    await onResend(email);\n  }, [email, onResend, resendCooldownSeconds, startCountdown]);\n\n  const handleVerify = useCallback(async () => {\n    if (otp.length < 6) return;\n    await onVerify(email, otp);\n  }, [email, otp, onVerify]);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>\n            {subtitle ?? (\n              <>\n                Nhập mã OTP đã được gửi tới <span className=\"font-medium text-foreground\">{email}</span>. Mã có hiệu lực trong 10 phút.\n              </>\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"flex flex-col items-center gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\" className=\"w-full\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <InputOTP maxLength={6} value={otp} onChange={setOtp} onComplete={handleVerify} disabled={isLoading}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n\n          <Button type=\"button\" isLoading={isLoading} disabled={otp.length < 6} className=\"w-full\" onClick={handleVerify}>\n            Xác thực\n          </Button>\n\n          <div className=\"flex items-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa nhận được mã?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" disabled={countdown > 0 || isLoading} onClick={handleResend}>\n              {countdown > 0 ? `Gửi lại (${countdown}s)` : 'Gửi lại'}\n            </Button>\n          </div>\n\n          {onBack && (\n            <Button variant=\"ghost\" size=\"sm\" className=\"w-full\" onClick={onBack}>\n              Quay lại\n            </Button>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"gjBAuDA,MAAa,GAAmB,CAC9B,OACA,eACA,QACA,WACA,WACA,SACA,YAAY,GACZ,eACA,QAAQ,iBACR,WACA,wBAAwB,MACE,CAC1B,GAAM,CAAC,EAAK,GAAU,EAAS,GAAG,CAC5B,CAAC,EAAW,GAAgB,EAAS,EAAsB,CAC3D,EAAc,EAA8C,KAAK,CAEjE,EAAiB,EAAa,GAAoB,CAClD,EAAY,SAAS,cAAc,EAAY,QAAQ,CAC3D,EAAa,EAAQ,CACrB,EAAY,QAAU,gBAAkB,CACtC,EAAa,GACP,GAAQ,GACN,EAAY,SAAS,cAAc,EAAY,QAAQ,CACpD,GAEF,EAAO,EACd,EACD,IAAK,EACP,EAAE,CAAC,CAEN,OACM,GAAQ,EAAwB,GAAG,EAAe,EAAsB,KAC/D,CACP,EAAY,SAAS,cAAc,EAAY,QAAQ,GAE5D,CAAC,EAAM,EAAuB,EAAe,CAAC,CAEjD,IAAM,EAAe,EAAY,SAAY,CAC3C,EAAe,EAAsB,CACrC,MAAM,EAAS,EAAM,EACpB,CAAC,EAAO,EAAU,EAAuB,EAAe,CAAC,CAEtD,EAAe,EAAY,SAAY,CACvC,EAAI,OAAS,GACjB,MAAM,EAAS,EAAO,EAAI,EACzB,CAAC,EAAO,EAAK,EAAS,CAAC,CAE1B,OACE,EAAC,EAAA,CAAa,OAAoB,wBAChC,EAAC,EAAA,CAAc,UAAU,wBACvB,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAa,EAAA,CAAoB,CAClC,EAAC,EAAA,CAAA,SACE,GACC,EAAA,EAAA,CAAA,SAAA,CAAE,+BAC4B,EAAC,OAAA,CAAK,UAAU,uCAA+B,GAAa,qCACvF,CAAA,CAEa,CAAA,CAAA,CACP,CAEf,EAAC,MAAA,CAAI,UAAU,6CACZ,GACC,EAAC,EAAA,CAAM,QAAQ,cAAc,UAAU,kBACrC,EAAC,EAAA,CAAA,SAAkB,EAAA,CAAgC,EAC7C,CAGV,EAAC,EAAA,CAAS,UAAW,EAAG,MAAO,EAAK,SAAU,EAAQ,WAAY,EAAc,SAAU,YACxF,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,GACZ,CAChB,EAAC,EAAA,EAAA,CAAoB,CACrB,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,GACZ,GACP,CAEX,EAAC,EAAA,CAAO,KAAK,SAAoB,YAAW,SAAU,EAAI,OAAS,EAAG,UAAU,SAAS,QAAS,WAAc,YAEvG,CAET,EAAC,MAAA,CAAI,UAAU,kEACb,EAAC,OAAA,CAAA,SAAK,qBAAA,CAAyB,CAC/B,EAAC,EAAA,CAAO,QAAQ,OAAO,KAAK,KAAK,UAAU,aAAa,SAAU,EAAY,GAAK,EAAW,QAAS,WACpG,EAAY,EAAI,YAAY,EAAU,IAAM,WACtC,CAAA,EACL,CAEL,GACC,EAAC,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,UAAU,SAAS,QAAS,WAAQ,YAE7D,GAEP,CAAA,EACQ,EACT"}
+{"version":3,"file":"VerifyEmailPage.mjs","names":[],"sources":["../../packages/components/pages/VerifyEmailPage.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../ui/input-otp';\n\nexport interface VerifyEmailPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** The email address the OTP was dispatched to — displayed as context and passed to callbacks */\n  email: string;\n  /** Called when the user submits the OTP code */\n  onVerify: (email: string, otp: string) => Promise<void> | void;\n  /** Called when the user requests a new OTP; triggers a fresh cooldown */\n  onResend: (email: string) => Promise<void> | void;\n  /** Called when the back link is clicked */\n  onBack?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Xác thực email\" */\n  title?: string;\n  /** Dialog subheading. Default: built from the email prop */\n  subtitle?: string;\n  /** Seconds before the resend button becomes available. Default: 60 */\n  resendCooldownSeconds?: number;\n}\n\n/**\n * Modal email OTP verification dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { VerifyEmailPage } from '@customafk/lunas-ui/pages/VerifyEmailPage';\n *\n * <VerifyEmailPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   email=\"user@example.com\"\n *   onVerify={async (email, otp) => {\n *     await authService.verifyEmail(email, otp);\n *     setOpen(false);\n *   }}\n *   onResend={async (email) => {\n *     await authService.resendVerification(email);\n *   }}\n * />\n * ```\n */\nexport const VerifyEmailPage = ({\n  open,\n  onOpenChange,\n  email,\n  onVerify,\n  onResend,\n  onBack,\n  isLoading = false,\n  errorMessage,\n  title = 'Xác thực email',\n  subtitle,\n  resendCooldownSeconds = 60,\n}: VerifyEmailPageProps) => {\n  const [otp, setOtp] = useState('');\n  const [countdown, setCountdown] = useState(resendCooldownSeconds);\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const startCountdown = useCallback((seconds: number) => {\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    setCountdown(seconds);\n    intervalRef.current = setInterval(() => {\n      setCountdown(prev => {\n        if (prev <= 1) {\n          if (intervalRef.current) clearInterval(intervalRef.current);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n  }, []);\n\n  useEffect(() => {\n    if (open && resendCooldownSeconds > 0) startCountdown(resendCooldownSeconds);\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, [open, resendCooldownSeconds, startCountdown]);\n\n  const handleResend = useCallback(async () => {\n    startCountdown(resendCooldownSeconds);\n    await onResend(email);\n  }, [email, onResend, resendCooldownSeconds, startCountdown]);\n\n  const handleVerify = useCallback(async () => {\n    if (otp.length < 6) return;\n    await onVerify(email, otp);\n  }, [email, otp, onVerify]);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>\n            {subtitle ?? (\n              <>\n                Nhập mã OTP đã được gửi tới <span className=\"font-medium text-foreground\">{email}</span>. Mã có hiệu lực trong 10 phút.\n              </>\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"flex flex-col items-center gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\" className=\"w-full\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <InputOTP maxLength={6} value={otp} onChange={setOtp} onComplete={handleVerify} disabled={isLoading}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n\n          <Button type=\"button\" isLoading={isLoading} disabled={otp.length < 6} className=\"w-full\" onClick={handleVerify}>\n            Xác thực\n          </Button>\n\n          <div className=\"flex items-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa nhận được mã?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" disabled={countdown > 0 || isLoading} onClick={handleResend}>\n              {countdown > 0 ? `Gửi lại (${countdown}s)` : 'Gửi lại'}\n            </Button>\n          </div>\n\n          {onBack && (\n            <Button variant=\"ghost\" size=\"sm\" className=\"w-full\" onClick={onBack}>\n              Quay lại\n            </Button>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"gjBAuDA,MAAa,GAAmB,CAC9B,OACA,eACA,QACA,WACA,WACA,SACA,YAAY,GACZ,eACA,QAAQ,iBACR,WACA,wBAAwB,MACE,CAC1B,GAAM,CAAC,EAAK,GAAU,EAAS,GAAG,CAC5B,CAAC,EAAW,GAAgB,EAAS,EAAsB,CAC3D,EAAc,EAA8C,KAAK,CAEjE,EAAiB,EAAa,GAAoB,CAClD,EAAY,SAAS,cAAc,EAAY,QAAQ,CAC3D,EAAa,EAAQ,CACrB,EAAY,QAAU,gBAAkB,CACtC,EAAa,GACP,GAAQ,GACN,EAAY,SAAS,cAAc,EAAY,QAAQ,CACpD,GAEF,EAAO,EACd,EACD,IAAK,EACP,EAAE,CAAC,CAEN,OACM,GAAQ,EAAwB,GAAG,EAAe,EAAsB,KAC/D,CACP,EAAY,SAAS,cAAc,EAAY,QAAQ,GAE5D,CAAC,EAAM,EAAuB,EAAe,CAAC,CAEjD,IAAM,EAAe,EAAY,SAAY,CAC3C,EAAe,EAAsB,CACrC,MAAM,EAAS,EAAM,EACpB,CAAC,EAAO,EAAU,EAAuB,EAAe,CAAC,CAEtD,EAAe,EAAY,SAAY,CACvC,EAAI,OAAS,GACjB,MAAM,EAAS,EAAO,EAAI,EACzB,CAAC,EAAO,EAAK,EAAS,CAAC,CAE1B,OACE,EAAC,EAAA,CAAa,OAAoB,wBAChC,EAAC,EAAA,CAAc,UAAU,iVACvB,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAa,EAAA,CAAoB,CAClC,EAAC,EAAA,CAAA,SACE,GACC,EAAA,EAAA,CAAA,SAAA,CAAE,+BAC4B,EAAC,OAAA,CAAK,UAAU,uCAA+B,GAAa,qCACvF,CAAA,CAEa,CAAA,CAAA,CACP,CAEf,EAAC,MAAA,CAAI,UAAU,6CACZ,GACC,EAAC,EAAA,CAAM,QAAQ,cAAc,UAAU,kBACrC,EAAC,EAAA,CAAA,SAAkB,EAAA,CAAgC,EAC7C,CAGV,EAAC,EAAA,CAAS,UAAW,EAAG,MAAO,EAAK,SAAU,EAAQ,WAAY,EAAc,SAAU,YACxF,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,GACZ,CAChB,EAAC,EAAA,EAAA,CAAoB,CACrB,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,CAC1B,EAAC,EAAA,CAAa,MAAO,EAAA,CAAK,GACZ,GACP,CAEX,EAAC,EAAA,CAAO,KAAK,SAAoB,YAAW,SAAU,EAAI,OAAS,EAAG,UAAU,SAAS,QAAS,WAAc,YAEvG,CAET,EAAC,MAAA,CAAI,UAAU,kEACb,EAAC,OAAA,CAAA,SAAK,qBAAA,CAAyB,CAC/B,EAAC,EAAA,CAAO,QAAQ,OAAO,KAAK,KAAK,UAAU,aAAa,SAAU,EAAY,GAAK,EAAW,QAAS,WACpG,EAAY,EAAI,YAAY,EAAU,IAAM,WACtC,CAAA,EACL,CAEL,GACC,EAAC,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,UAAU,SAAS,QAAS,WAAQ,YAE7D,GAEP,CAAA,EACQ,EACT"}