@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/pages/RegisterPage.d.cts

@@ -1,50 +1,2 @@
-//#region packages/components/pages/RegisterPage.d.ts
-interface RegisterPageProps {
-  /** Controls whether the dialog is open */
-  open: boolean;
-  /** Called when the dialog open state changes */
-  onOpenChange: (open: boolean) => void;
-  /** Called when the user submits registration credentials */
-  onRegister: (email: string, password: string) => Promise<void> | void;
-  /** Called when the "Đăng nhập" link is clicked */
-  onLogin?: () => void;
-  /** Disables the form and shows a spinner on the submit button */
-  isLoading?: boolean;
-  /** Server-side error message rendered in a destructive Alert */
-  errorMessage?: string;
-  /** Dialog heading. Default: "Đăng ký" */
-  title?: string;
-  /** Dialog subheading. Default: "Tạo tài khoản mới để bắt đầu" */
-  subtitle?: string;
-}
-/**
- * Modal registration dialog for the client authentication flow.
- *
- * @example
- * ```tsx
- * import { RegisterPage } from '@customafk/lunas-ui/pages/RegisterPage';
- *
- * <RegisterPage
- *   open={open}
- *   onOpenChange={setOpen}
- *   onRegister={async (email, password) => {
- *     await authService.register(email, password);
- *     setOpen(false);
- *   }}
- *   onLogin={() => { setOpen(false); setLoginOpen(true); }}
- * />
- * ```
- */
-declare const RegisterPage: ({
-  open,
-  onOpenChange,
-  onRegister,
-  onLogin,
-  isLoading,
-  errorMessage,
-  title,
-  subtitle
-}: RegisterPageProps) => import("react").JSX.Element;
-//#endregion
-export { RegisterPage, RegisterPageProps };
-//# sourceMappingURL=RegisterPage.d.cts.map
+import { n as RegisterPageProps, t as RegisterPage } from "../RegisterPage-BBtpEzvL.cjs";
+export { RegisterPage, RegisterPageProps };

package/dist/pages/RegisterPage.d.mts

@@ -1,50 +1,2 @@
-//#region packages/components/pages/RegisterPage.d.ts
-interface RegisterPageProps {
-  /** Controls whether the dialog is open */
-  open: boolean;
-  /** Called when the dialog open state changes */
-  onOpenChange: (open: boolean) => void;
-  /** Called when the user submits registration credentials */
-  onRegister: (email: string, password: string) => Promise<void> | void;
-  /** Called when the "Đăng nhập" link is clicked */
-  onLogin?: () => void;
-  /** Disables the form and shows a spinner on the submit button */
-  isLoading?: boolean;
-  /** Server-side error message rendered in a destructive Alert */
-  errorMessage?: string;
-  /** Dialog heading. Default: "Đăng ký" */
-  title?: string;
-  /** Dialog subheading. Default: "Tạo tài khoản mới để bắt đầu" */
-  subtitle?: string;
-}
-/**
- * Modal registration dialog for the client authentication flow.
- *
- * @example
- * ```tsx
- * import { RegisterPage } from '@customafk/lunas-ui/pages/RegisterPage';
- *
- * <RegisterPage
- *   open={open}
- *   onOpenChange={setOpen}
- *   onRegister={async (email, password) => {
- *     await authService.register(email, password);
- *     setOpen(false);
- *   }}
- *   onLogin={() => { setOpen(false); setLoginOpen(true); }}
- * />
- * ```
- */
-declare const RegisterPage: ({
-  open,
-  onOpenChange,
-  onRegister,
-  onLogin,
-  isLoading,
-  errorMessage,
-  title,
-  subtitle
-}: RegisterPageProps) => import("react").JSX.Element;
-//#endregion
-export { RegisterPage, RegisterPageProps };
-//# sourceMappingURL=RegisterPage.d.mts.map
+import { n as RegisterPageProps, t as RegisterPage } from "../RegisterPage-BBtpEzvL.mjs";
+export { RegisterPage, RegisterPageProps };

package/dist/pages/RegisterPage.mjs

@@ -1,2 +1,2 @@
-"use client";import{Button as e}from"../ui/button.mjs";import{LunasLogo as t}from"../features/logo/index.mjs";import{Dialog as n,DialogContent as r,DialogDescription as i,DialogHeader as a,DialogTitle as o}from"../ui/dialog.mjs";import{Input as s}from"../ui/input.mjs";import{Label as c}from"../ui/label.mjs";import{n as l,t as u}from"../alert-OD1KJTEV.mjs";import{Eye as d,EyeOff as f}from"lucide-react";import{useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{z as _}from"zod";const v=_.object({email:_.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:_.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:_.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`]}),y=({open:_,onOpenChange:y,onRegister:b,onLogin:x,isLoading:S=!1,errorMessage:C,title:w=`Đăng ký`,subtitle:T=`Tạo tài khoản mới để bắt đầu`})=>{let E=p(),D=p(),O=p(),[k,A]=m(``),[j,M]=m(``),[N,P]=m(``),[F,I]=m(!1),[L,R]=m(!1),[z,B]=m({});return h(n,{open:_,onOpenChange:y,children:g(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:[g(a,{children:[h(t,{variant:`horizontal`,size:`sm`,className:`mx-auto`}),g(`div`,{className:`flex flex-col gap-0.5`,children:[h(o,{children:w}),h(i,{children:T})]})]}),g(`form`,{onSubmit:async e=>{e.preventDefault();let t=v.safeParse({email:k,password:j,confirmPassword:N});if(!t.success){let e=t.error.flatten().fieldErrors;B({email:e.email?.[0],password:e.password?.[0],confirmPassword:e.confirmPassword?.[0]});return}B({}),await b(k,j)},noValidate:!0,className:`flex flex-col gap-4`,children:[C&&h(u,{variant:`destructive`,children:h(l,{children:C})}),g(`div`,{className:`flex flex-col gap-1.5`,children:[h(c,{htmlFor:E,children:`Email`}),h(s,{id:E,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:k,onChange:e=>A(e.target.value),"aria-invalid":!!z.email,disabled:S}),z.email&&h(`p`,{className:`text-destructive text-xs`,children:z.email})]}),g(`div`,{className:`flex flex-col gap-1.5`,children:[h(c,{htmlFor:D,children:`Mật khẩu`}),g(`div`,{className:`relative`,children:[h(s,{id:D,type:F?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:j,onChange:e=>M(e.target.value),"aria-invalid":!!z.password,disabled:S,className:`pr-10`}),h(`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(),I(e=>!e)},"aria-label":F?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:h(F?f:d,{size:16})})]}),z.password?h(`p`,{className:`text-destructive text-xs`,children:z.password}):h(`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.`})]}),g(`div`,{className:`flex flex-col gap-1.5`,children:[h(c,{htmlFor:O,children:`Xác nhận mật khẩu`}),g(`div`,{className:`relative`,children:[h(s,{id:O,type:L?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:N,onChange:e=>P(e.target.value),"aria-invalid":!!z.confirmPassword,disabled:S,className:`pr-10`}),h(`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(),R(e=>!e)},"aria-label":L?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:h(L?f:d,{size:16})})]}),z.confirmPassword&&h(`p`,{className:`text-destructive text-xs`,children:z.confirmPassword})]}),h(e,{type:`submit`,isLoading:S,className:`w-full`,children:`Đăng ký`}),h(e,{type:`button`,variant:`outline`,className:`w-full`,disabled:S,onClick:()=>y(!1),children:`Đóng hộp thoại`})]}),x&&g(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[h(`span`,{children:`Đã có tài khoản?`}),h(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:x,children:`Đăng nhập`})]})]})})};export{y as RegisterPage};
+"use client";import{Button as e}from"../ui/button.mjs";import{LunasLogo as t}from"../features/logo/index.mjs";import{Dialog as n,DialogContent as r,DialogDescription as i,DialogHeader as a,DialogTitle as o}from"../ui/dialog.mjs";import{Input as s}from"../ui/input.mjs";import{n as c,t as l}from"../alert-OD1KJTEV.mjs";import{Label as u}from"../ui/label.mjs";import{Eye as d,EyeOff as f}from"lucide-react";import{useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{z as _}from"zod/v4";const v=_.object({email:_.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:_.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:_.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`]}),y=({open:_,onOpenChange:y,onRegister:b,onLogin:x,isLoading:S=!1,errorMessage:C,title:w=`Đăng ký`,subtitle:T=`Tạo tài khoản mới để bắt đầu`})=>{let E=p(),D=p(),O=p(),[k,A]=m(``),[j,M]=m(``),[N,P]=m(``),[F,I]=m(!1),[L,R]=m(!1),[z,B]=m({});return h(n,{open:_,onOpenChange:y,children:g(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:[g(a,{children:[h(t,{variant:`horizontal`,size:`sm`,className:`mx-auto`}),g(`div`,{className:`flex flex-col gap-0.5`,children:[h(o,{children:w}),h(i,{children:T})]})]}),g(`form`,{onSubmit:async e=>{e.preventDefault();let t=v.safeParse({email:k,password:j,confirmPassword:N});if(!t.success){let e=t.error.flatten().fieldErrors;B({email:e.email?.[0],password:e.password?.[0],confirmPassword:e.confirmPassword?.[0]});return}B({}),await b(k,j)},noValidate:!0,className:`flex flex-col gap-4`,children:[C&&h(l,{variant:`destructive`,children:h(c,{children:C})}),g(`div`,{className:`flex flex-col gap-1.5`,children:[h(u,{htmlFor:E,children:`Email`}),h(s,{id:E,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:k,onChange:e=>A(e.target.value),"aria-invalid":!!z.email,disabled:S}),z.email&&h(`p`,{className:`text-destructive text-xs`,children:z.email})]}),g(`div`,{className:`flex flex-col gap-1.5`,children:[h(u,{htmlFor:D,children:`Mật khẩu`}),g(`div`,{className:`relative`,children:[h(s,{id:D,type:F?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:j,onChange:e=>M(e.target.value),"aria-invalid":!!z.password,disabled:S,className:`pr-10`}),h(`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(),I(e=>!e)},"aria-label":F?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:h(F?f:d,{size:16})})]}),z.password?h(`p`,{className:`text-destructive text-xs`,children:z.password}):h(`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.`})]}),g(`div`,{className:`flex flex-col gap-1.5`,children:[h(u,{htmlFor:O,children:`Xác nhận mật khẩu`}),g(`div`,{className:`relative`,children:[h(s,{id:O,type:L?`text`:`password`,autoComplete:`new-password`,placeholder:`••••••••`,value:N,onChange:e=>P(e.target.value),"aria-invalid":!!z.confirmPassword,disabled:S,className:`pr-10`}),h(`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(),R(e=>!e)},"aria-label":L?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:h(L?f:d,{size:16})})]}),z.confirmPassword&&h(`p`,{className:`text-destructive text-xs`,children:z.confirmPassword})]}),h(e,{type:`submit`,isLoading:S,className:`w-full`,children:`Đăng ký`}),h(e,{type:`button`,variant:`outline`,className:`w-full`,disabled:S,onClick:()=>y(!1),children:`Đóng hộp thoại`})]}),x&&g(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[h(`span`,{children:`Đã có tài khoản?`}),h(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:x,children:`Đăng nhập`})]})]})})};export{y 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 { LunasLogo } from '../features/logo';\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          <LunasLogo variant=\"horizontal\" size=\"sm\" className=\"mx-auto\" />\n          <div className=\"flex flex-col gap-0.5\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{subtitle}</DialogDescription>\n          </div>\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          <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={() => onOpenChange(false)}>\n            Đóng hộp thoại\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/v4';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { LunasLogo } from '../features/logo';\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          <LunasLogo variant=\"horizontal\" size=\"sm\" className=\"mx-auto\" />\n          <div className=\"flex flex-col gap-0.5\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{subtitle}</DialogDescription>\n          </div>\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          <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={() => onOpenChange(false)}>\n            Đóng hộp thoại\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.d.cts

@@ -1,62 +1,2 @@
-//#region packages/components/pages/VerifyEmailPage.d.ts
-interface VerifyEmailPageProps {
-  /** Controls whether the dialog is open */
-  open: boolean;
-  /** Called when the dialog open state changes */
-  onOpenChange: (open: boolean) => void;
-  /** The email address the OTP was dispatched to — displayed as context and passed to callbacks */
-  email: string;
-  /** Called when the user submits the OTP code */
-  onVerify: (email: string, otp: string) => Promise<void> | void;
-  /** Called when the user requests a new OTP; triggers a fresh cooldown */
-  onResend: (email: string) => Promise<void> | void;
-  /** Called when the back link is clicked */
-  onBack?: () => void;
-  /** Disables the form and shows a spinner on the submit button */
-  isLoading?: boolean;
-  /** Server-side error message rendered in a destructive Alert */
-  errorMessage?: string;
-  /** Dialog heading. Default: "Xác thực email" */
-  title?: string;
-  /** Dialog subheading. Default: built from the email prop */
-  subtitle?: string;
-  /** Seconds before the resend button becomes available. Default: 60 */
-  resendCooldownSeconds?: number;
-}
-/**
- * Modal email OTP verification dialog for the client authentication flow.
- *
- * @example
- * ```tsx
- * import { VerifyEmailPage } from '@customafk/lunas-ui/pages/VerifyEmailPage';
- *
- * <VerifyEmailPage
- *   open={open}
- *   onOpenChange={setOpen}
- *   email="user@example.com"
- *   onVerify={async (email, otp) => {
- *     await authService.verifyEmail(email, otp);
- *     setOpen(false);
- *   }}
- *   onResend={async (email) => {
- *     await authService.resendVerification(email);
- *   }}
- * />
- * ```
- */
-declare const VerifyEmailPage: ({
-  open,
-  onOpenChange,
-  email,
-  onVerify,
-  onResend,
-  onBack,
-  isLoading,
-  errorMessage,
-  title,
-  subtitle,
-  resendCooldownSeconds
-}: VerifyEmailPageProps) => import("react").JSX.Element;
-//#endregion
-export { VerifyEmailPage, VerifyEmailPageProps };
-//# sourceMappingURL=VerifyEmailPage.d.cts.map
+import { n as VerifyEmailPageProps, t as VerifyEmailPage } from "../VerifyEmailPage-CsmIeYLu.cjs";
+export { VerifyEmailPage, VerifyEmailPageProps };

package/dist/pages/VerifyEmailPage.d.mts

@@ -1,62 +1,2 @@
-//#region packages/components/pages/VerifyEmailPage.d.ts
-interface VerifyEmailPageProps {
-  /** Controls whether the dialog is open */
-  open: boolean;
-  /** Called when the dialog open state changes */
-  onOpenChange: (open: boolean) => void;
-  /** The email address the OTP was dispatched to — displayed as context and passed to callbacks */
-  email: string;
-  /** Called when the user submits the OTP code */
-  onVerify: (email: string, otp: string) => Promise<void> | void;
-  /** Called when the user requests a new OTP; triggers a fresh cooldown */
-  onResend: (email: string) => Promise<void> | void;
-  /** Called when the back link is clicked */
-  onBack?: () => void;
-  /** Disables the form and shows a spinner on the submit button */
-  isLoading?: boolean;
-  /** Server-side error message rendered in a destructive Alert */
-  errorMessage?: string;
-  /** Dialog heading. Default: "Xác thực email" */
-  title?: string;
-  /** Dialog subheading. Default: built from the email prop */
-  subtitle?: string;
-  /** Seconds before the resend button becomes available. Default: 60 */
-  resendCooldownSeconds?: number;
-}
-/**
- * Modal email OTP verification dialog for the client authentication flow.
- *
- * @example
- * ```tsx
- * import { VerifyEmailPage } from '@customafk/lunas-ui/pages/VerifyEmailPage';
- *
- * <VerifyEmailPage
- *   open={open}
- *   onOpenChange={setOpen}
- *   email="user@example.com"
- *   onVerify={async (email, otp) => {
- *     await authService.verifyEmail(email, otp);
- *     setOpen(false);
- *   }}
- *   onResend={async (email) => {
- *     await authService.resendVerification(email);
- *   }}
- * />
- * ```
- */
-declare const VerifyEmailPage: ({
-  open,
-  onOpenChange,
-  email,
-  onVerify,
-  onResend,
-  onBack,
-  isLoading,
-  errorMessage,
-  title,
-  subtitle,
-  resendCooldownSeconds
-}: VerifyEmailPageProps) => import("react").JSX.Element;
-//#endregion
-export { VerifyEmailPage, VerifyEmailPageProps };
-//# sourceMappingURL=VerifyEmailPage.d.mts.map
+import { n as VerifyEmailPageProps, t as VerifyEmailPage } from "../VerifyEmailPage-CsmIeYLu.mjs";
+export { VerifyEmailPage, VerifyEmailPageProps };

package/dist/pagination-B2fyP0J2.d.cts

@@ -0,0 +1,64 @@
+import { t as Button } from "./button-Bk4Y6_9I.cjs";
+
+//#region packages/components/ui/pagination.d.ts
+/**
+ * Root `<nav>` wrapper for a Pagination control with accessible ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Pagination, PaginationContent, PaginationItem,
+ *   PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
+ * } from '@customafk/lunas-ui/ui/pagination';
+ *
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ */
+declare function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<'nav'>): import("react").JSX.Element;
+/** Horizontal list that holds PaginationItem elements. */
+declare function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>): import("react").JSX.Element;
+/** Wrapper `<li>` for a single pagination button or link. */
+declare function PaginationItem({
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+type PaginationLinkProps = {
+  /** When true, the link is styled as the currently active page. */isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
+/** An anchor-based page link styled as a button, highlighted when `isActive` is true. */
+declare function PaginationLink({
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps): import("react").JSX.Element;
+/** "Previous page" navigation link with a left chevron icon. */
+declare function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+/** "Next page" navigation link with a right chevron icon. */
+declare function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+/** Ellipsis indicator rendered between non-adjacent page numbers. */
+declare function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { PaginationLink as a, PaginationItem as i, PaginationContent as n, PaginationNext as o, PaginationEllipsis as r, PaginationPrevious as s, Pagination as t };
+//# sourceMappingURL=pagination-B2fyP0J2.d.cts.map

package/dist/pagination-DY0PBCnI.d.mts

@@ -0,0 +1,64 @@
+import { t as Button } from "./button-Bk4Y6_9I.mjs";
+
+//#region packages/components/ui/pagination.d.ts
+/**
+ * Root `<nav>` wrapper for a Pagination control with accessible ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Pagination, PaginationContent, PaginationItem,
+ *   PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
+ * } from '@customafk/lunas-ui/ui/pagination';
+ *
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ */
+declare function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<'nav'>): import("react").JSX.Element;
+/** Horizontal list that holds PaginationItem elements. */
+declare function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>): import("react").JSX.Element;
+/** Wrapper `<li>` for a single pagination button or link. */
+declare function PaginationItem({
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+type PaginationLinkProps = {
+  /** When true, the link is styled as the currently active page. */isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
+/** An anchor-based page link styled as a button, highlighted when `isActive` is true. */
+declare function PaginationLink({
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps): import("react").JSX.Element;
+/** "Previous page" navigation link with a left chevron icon. */
+declare function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+/** "Next page" navigation link with a right chevron icon. */
+declare function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+/** Ellipsis indicator rendered between non-adjacent page numbers. */
+declare function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { PaginationLink as a, PaginationItem as i, PaginationContent as n, PaginationNext as o, PaginationEllipsis as r, PaginationPrevious as s, Pagination as t };
+//# sourceMappingURL=pagination-DY0PBCnI.d.mts.map

package/dist/paragraph-BTmvVS1S.d.mts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef } from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/typography/paragraph.d.ts
+declare const paragraphVariants: (props?: ({
+  variant?: "xs" | "sm" | "lg" | "muted" | "p" | "lead" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props for the {@link Paragraph} component.
+ *
+ * Extends all native `<p>` HTML attributes plus the CVA variant.
+ *
+ * @property variant - Visual style variant.
+ *   - `'lead'` — large, medium-weight introductory text (default size `text-base` / `md:text-lg`)
+ *   - `'lg'`  — large normal-weight text
+ *   - `'p'`   — standard body text (default)
+ *   - `'sm'`  — small normal-weight text with tighter leading
+ *   - `'muted'` — subdued colour, standard body size
+ *   - `'xs'`  — extra-small text in a muted colour
+ */
+type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragraphVariants>;
+/**
+ * A styled `<p>` element with semantic size and weight variants for body text.
+ *
+ * @example
+ * ```tsx
+ * import { Paragraph } from '@customafk/lunas-ui/typography/paragraph';
+ *
+ * // Default body paragraph
+ * <Paragraph>This is body text.</Paragraph>
+ *
+ * // Lead paragraph with larger, medium-weight text
+ * <Paragraph variant="lead">Introducing our new feature.</Paragraph>
+ *
+ * // Muted helper text
+ * <Paragraph variant="muted">Last updated 3 days ago.</Paragraph>
+ * ```
+ */
+declare const Paragraph: ({
+  variant,
+  className,
+  ...props
+}: ParagraphProps) => import("react").JSX.Element;
+//#endregion
+export { ParagraphProps as n, paragraphVariants as r, Paragraph as t };
+//# sourceMappingURL=paragraph-BTmvVS1S.d.mts.map

package/dist/paragraph-DbYYv0A0.d.cts

@@ -0,0 +1,46 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region packages/components/typography/paragraph.d.ts
+declare const paragraphVariants: (props?: ({
+  variant?: "xs" | "sm" | "lg" | "muted" | "p" | "lead" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props for the {@link Paragraph} component.
+ *
+ * Extends all native `<p>` HTML attributes plus the CVA variant.
+ *
+ * @property variant - Visual style variant.
+ *   - `'lead'` — large, medium-weight introductory text (default size `text-base` / `md:text-lg`)
+ *   - `'lg'`  — large normal-weight text
+ *   - `'p'`   — standard body text (default)
+ *   - `'sm'`  — small normal-weight text with tighter leading
+ *   - `'muted'` — subdued colour, standard body size
+ *   - `'xs'`  — extra-small text in a muted colour
+ */
+type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragraphVariants>;
+/**
+ * A styled `<p>` element with semantic size and weight variants for body text.
+ *
+ * @example
+ * ```tsx
+ * import { Paragraph } from '@customafk/lunas-ui/typography/paragraph';
+ *
+ * // Default body paragraph
+ * <Paragraph>This is body text.</Paragraph>
+ *
+ * // Lead paragraph with larger, medium-weight text
+ * <Paragraph variant="lead">Introducing our new feature.</Paragraph>
+ *
+ * // Muted helper text
+ * <Paragraph variant="muted">Last updated 3 days ago.</Paragraph>
+ * ```
+ */
+declare const Paragraph: ({
+  variant,
+  className,
+  ...props
+}: ParagraphProps) => import("react").JSX.Element;
+//#endregion
+export { ParagraphProps as n, paragraphVariants as r, Paragraph as t };
+//# sourceMappingURL=paragraph-DbYYv0A0.d.cts.map

package/dist/password-field-C5FsQUa8.mjs

@@ -0,0 +1,2 @@
+import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-BKyUqvzh.mjs";import{EyeIcon as f,EyeOffIcon as p}from"lucide-react";import{useCallback as m,useId as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{useStore as y}from"@tanstack/react-form";const b=({label:b,description:x,placeholder:S,orientation:C=`responsive`,tooltip:w,helperText:T,showErrorMessage:E=!0})=>{let D=h(),{form:O,name:k,state:A,handleBlur:j,handleChange:M}=e(),N=y(O.store,({isSubmitting:e})=>e),[P,F]=g(!1),I=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,L=m(()=>F(e=>!e),[]),R=m(({target:{value:e}})=>{N||M(e||null)},[N,M]);return v(s,{className:`gap-y-4 px-4`,children:[v(n,{"data-invalid":I,orientation:C,children:[v(r,{children:[v(c,{htmlFor:D,children:[b,w&&_(d,{tooltip:w})]}),_(a,{children:x})]}),v(i,{children:[_(t,{id:D,name:k,type:P?`text`:`password`,placeholder:S,value:A.value??``,"aria-invalid":I,autoComplete:`new-password`,onBlur:j,onChange:R}),_(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:L,"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":P,"aria-controls":D,children:_(P?p:f,{size:16,"aria-hidden":`true`})}),_(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:E&&A.meta.isDirty&&_(o,{errors:A.meta.errors})}),_(l,{isShow:!!T,children:T})]})]}),_(u,{})]})};export{b as PasswordField};
+//# sourceMappingURL=password-field-C5FsQUa8.mjs.map

package/dist/password-field-C5FsQUa8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field-C5FsQUa8.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"8fA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAkB,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,uBAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,WAArB,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,EAED,EAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,WAEF,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,EAER,EAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/password-field-gHYDiXWY.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/input.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("lucide-react"),i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,description:c,placeholder:l,orientation:u=`responsive`,tooltip:d,helperText:f,showErrorMessage:p=!0})=>{let m=(0,i.useId)(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=e.G(),b=(0,o.useStore)(h.store,({isSubmitting:e})=>e),[x,S]=(0,i.useState)(!1),C=_.meta.isDirty&&_.meta.isTouched&&!_.meta.isValid,w=(0,i.useCallback)(()=>S(e=>!e),[]),T=(0,i.useCallback)(({target:{value:e}})=>{b||y(e||null)},[b,y]);return(0,a.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,a.jsxs)(n.Field,{"data-invalid":C,orientation:u,children:[(0,a.jsxs)(n.FieldContent,{children:[(0,a.jsxs)(n.FieldLabel,{htmlFor:m,children:[s,d&&(0,a.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,a.jsx)(n.FieldDescription,{children:c})]}),(0,a.jsxs)(n.FieldContentMain,{children:[(0,a.jsx)(t.Input,{id:m,name:g,type:x?`text`:`password`,placeholder:l,value:_.value??``,"aria-invalid":C,autoComplete:`new-password`,onBlur:v,onChange:T}),(0,a.jsx)(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:w,"aria-label":x?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":x,"aria-controls":m,children:x?(0,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})}),(0,a.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:p&&_.meta.isDirty&&(0,a.jsx)(n.FieldError,{errors:_.meta.errors})}),(0,a.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,a.jsx)(n.FieldSeparator,{})]})};exports.PasswordField=s;
+//# sourceMappingURL=password-field-gHYDiXWY.cjs.map

package/dist/password-field-gHYDiXWY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field-gHYDiXWY.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","EyeOffIcon","EyeIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n *\n * @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"password\">\n *   {() => (\n *     <PasswordField\n *       label=\"Password\"\n *       placeholder=\"Enter your password\"\n *       helperText=\"Must be at least 8 characters\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  orientation = 'responsive',\n  tooltip,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={id}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={id}\n            name={name}\n            type={isVisible ? 'text' : 'password'}\n            placeholder={placeholder}\n            value={state.value ?? ''}\n            aria-invalid={_invalid}\n            autoComplete=\"new-password\"\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n\n          <button\n            className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n            aria-pressed={isVisible}\n            aria-controls={id}\n          >\n            {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n          </button>\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gOA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAkC,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,WAArB,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,WAEd,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/payment-layout-Cb-Q8KD2.cjs

@@ -0,0 +1,2 @@
+const e=require("./dist-DzA--RwW.cjs"),t=require("./ui/button.cjs"),n=require("./typography/paragraph.cjs");require("./ui/skeleton.cjs");const r=require("./layouts/flex.cjs"),i=require("./ui/tooltip.cjs"),a=require("./ui/avatar.cjs"),o=require("./features/logo/index.cjs"),s=require("./ui/sheet.cjs"),c=require("./ui/dropdown-menu.cjs");require("./ui/input.cjs"),require("./ui/separator.cjs");let l=require("lucide-react"),u=require("react"),d=require("@customafk/react-toolkit/utils"),f=require("class-variance-authority"),p=require("react/jsx-runtime"),m=require("@customafk/react-toolkit/color-hash"),h=require("@customafk/react-toolkit/hooks/useMobile");const g=(0,u.createContext)(null);function _(){let e=(0,u.useContext)(g);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function v({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:a,children:o,...s}){let c=(0,h.useIsMobile)(),[l,f]=(0,u.useState)(!1),[m,_]=(0,u.useState)(e),v=t??m,y=(0,u.useCallback)(e=>{let t=typeof e==`function`?e(v):e;n?n(t):_(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,v]),b=(0,u.useCallback)(()=>c?f(e=>!e):y(e=>!e),[c,y]);(0,u.useEffect)(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),b())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[b]);let x=v?`expanded`:`collapsed`,S=(0,u.useMemo)(()=>({state:x,open:v,setOpen:y,isMobile:c,openMobile:l,setOpenMobile:f,toggleSidebar:b}),[x,v,y,c,l,b]);return(0,p.jsx)(g.Provider,{value:S,children:(0,p.jsx)(i.TooltipProvider,{delayDuration:0,children:(0,p.jsx)(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:(0,d.cn)(`group/sidebar-wrapper flex h-dvh w-full`,r),...s,children:o})})})}function y({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o}){let{isMobile:c,state:u,openMobile:f,setOpenMobile:m,toggleSidebar:h}=_();return r===`none`?(0,p.jsx)(`aside`,{"data-slot":`sidebar`,className:(0,d.cn)(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...o,children:a}):c?(0,p.jsx)(s.Sheet,{open:f,onOpenChange:m,...o,children:(0,p.jsxs)(s.SheetContent,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden`,style:{"--sidebar-width":`18rem`},side:e,children:[(0,p.jsxs)(s.SheetHeader,{className:`sr-only`,children:[(0,p.jsx)(s.SheetTitle,{children:`Sidebar`}),(0,p.jsx)(s.SheetDescription,{children:`Displays the mobile sidebar.`})]}),(0,p.jsxs)(`div`,{className:`flex size-full flex-col`,children:[(0,p.jsxs)(`div`,{className:`flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4`,children:[(0,p.jsxs)(t.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:(0,d.cn)(`size-10 rounded-full`,i),onClick:e=>{h(),e.preventDefault(),e.stopPropagation()},children:[(0,p.jsx)(l.MenuIcon,{className:`size-6!`}),(0,p.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,p.jsx)(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:(0,p.jsx)(l.ShoppingCartIcon,{size:20})}),(0,p.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,p.jsx)(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),(0,p.jsx)(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),(0,p.jsx)(`div`,{className:`flex flex-1 flex-col p-2`,children:a})]})]})}):(0,p.jsxs)(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":u,"data-collapsible":u===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[(0,p.jsx)(`div`,{"data-slot":`sidebar-gap`,className:(0,d.cn)(`relative`,`bg-transparent`,`transition-[width] duration-200 ease-linear`,`h-(--header-height) w-(--sidebar-width)`,`sm:h-[calc(var(--header-height)+0.5rem)]`,`group-data-[collapsible=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)}),(0,p.jsx)(`div`,{"data-slot":`sidebar-container`,className:(0,d.cn)(`hidden md:flex`,`fixed inset-y-0 top-14 z-10 shadow-nav`,`h-[calc(100dvh-3.5rem)] w-(--sidebar-width)`,`transition-[left,right,width] duration-200 ease-linear`,e===`left`&&`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`,e===`right`&&`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,n===`floating`||n===`inset`?`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l`,i),...o,children:(0,p.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:(0,d.cn)(`flex size-full flex-col`,`group-data-[variant=floating]:rounded-lg`,`group-data-[variant=floating]:border`,`group-data-[variant=floating]:border-sidebar-border`,`group-data-[variant=floating]:shadow-sm`),children:a})})]})}function b({className:e,children:t,...n}){return(0,p.jsxs)(`main`,{"data-slot":`sidebar-inset`,className:(0,d.cn)(`relative flex w-full flex-1 flex-col`,e),...n,children:[(0,p.jsx)(`div`,{className:`h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]`}),(0,p.jsx)(`div`,{className:`inset-shadow-sm flex-1`,children:t})]})}function x({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:(0,d.cn)(`flex flex-col gap-2 p-2`,e),...t})}function S({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:(0,d.cn)(`flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t})}function C({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,d.cn)(`relative flex w-full min-w-0 flex-col`,e),...t})}function w({className:t,asChild:n=!1,...r}){return(0,p.jsx)(n?e.t:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,d.cn)(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r})}function T({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,d.cn)(`w-full text-sm`,e),...t})}function E({className:e,...t}){return(0,p.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:(0,d.cn)(`flex w-full min-w-0 flex-col gap-1`,e),...t})}function D({className:e,...t}){return(0,p.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:(0,d.cn)(`group/menu-item relative`,e),...t})}const O=(0,f.cva)([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,width,height,padding]`,`hover:bg-sidebar-accent`,`hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent`,`active:text-sidebar-accent-foreground`,`disabled:pointer-events-none`,`disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none`,`aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted`,`data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent`,`data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12!`,`group-data-[collapsible=icon]:p-3!`,`group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6`,`[&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground/80`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});function k({asChild:t=!1,isActive:n=!1,variant:r=`default`,size:a=`default`,tooltip:o,className:s,...c}){let l=t?e.t:`button`,{isMobile:u,state:f}=_(),m=(0,p.jsx)(l,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":n,className:(0,d.cn)(O({variant:r,size:a}),s),...c});return o?(typeof o==`string`&&(o={children:o}),(0,p.jsxs)(i.Tooltip,{children:[(0,p.jsx)(i.TooltipTrigger,{asChild:!0,children:m}),(0,p.jsx)(i.TooltipContent,{side:`right`,align:`center`,hidden:f!==`collapsed`||u,...o})]})):m}const A=({uuid:e,username:t,email:i})=>(0,p.jsxs)(r.Flex,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[(0,p.jsx)(a.Avatar,{className:`size-9 shadow-card`,children:(0,p.jsx)(a.AvatarFallback,{style:{backgroundColor:m.colorHashLight.hex(e)},children:(0,p.jsx)(l.UserRoundIcon,{size:28,className:`text-white`})})}),(0,p.jsxs)(r.Flex,{vertical:!0,padding:`none`,gap:`none`,align:`start`,className:`hidden sm:flex`,children:[(0,p.jsx)(n.Paragraph,{className:`text-sm font-medium text-text-positive`,children:t}),(0,p.jsx)(n.Paragraph,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:i})]})]}),j=({user:e,isLogin:n=!0,onLogin:r,onLogout:i,logo:a})=>{let{toggleSidebar:s}=_(),f=(0,u.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),s()},[s]),m=(0,u.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),i?.()},[i]),h=(0,u.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return(0,p.jsxs)(`header`,{"data-slot":`payment-layout-header`,className:(0,d.cn)(`bg-card`,`h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6`,`absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5`,`flex items-center shadow-nav`,`transition-[width,height] ease-linear`),children:[n&&(0,p.jsxs)(t.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`hidden size-10 rounded-full transition-all hover:text-text-positive md:flex`,onClick:f,children:[(0,p.jsx)(l.MenuIcon,{className:`size-6!`}),(0,p.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,p.jsx)(`div`,{className:`flex flex-1 items-center sm:ml-2.5`,children:a??(0,p.jsx)(o.LunasLogo,{variant:`horizontal`,size:`xs`})}),e?(0,p.jsxs)(c.DropdownMenu,{children:[(0,p.jsx)(c.DropdownMenuTrigger,{asChild:!0,children:(0,p.jsx)(t.Button,{variant:`ghost`,color:`muted`,className:`gap-x-2 rounded-full px-2 transition-all hover:text-text-positive`,children:(0,p.jsx)(A,{uuid:e?.uuid??``,username:e.fullname,email:e.email})})}),(0,p.jsxs)(c.DropdownMenuContent,{align:`end`,className:`w-56`,children:[(0,p.jsxs)(c.DropdownMenuLabel,{className:`font-normal`,children:[(0,p.jsx)(`p`,{className:`font-medium`,children:e.fullname}),(0,p.jsx)(`p`,{className:`text-muted-foreground text-xs`,children:e.email})]}),(0,p.jsx)(c.DropdownMenuSeparator,{}),(0,p.jsx)(c.DropdownMenuGroup,{children:(0,p.jsxs)(c.DropdownMenuItem,{onClick:m,children:[(0,p.jsx)(l.LogOutIcon,{size:14}),`Đăng xuất`]})})]})]}):(0,p.jsx)(t.Button,{size:`sm`,onClick:h,children:`Đăng nhập`})]})},M=({items:e,activeNavItemId:t})=>{let{isMobile:n}=_();return!n||e.length===0?null:(0,p.jsx)(`nav`,{"data-slot":`mobile-bottom-nav`,className:`fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-border border-t bg-card md:hidden`,children:e.slice(0,5).map(e=>(0,p.jsxs)(`button`,{type:`button`,onClick:e.onClick,"data-active":e.id===t,className:(0,d.cn)(`flex flex-1 flex-col items-center justify-center gap-0.5`,`text-muted-foreground transition-colors`,`data-[active=true]:text-sidebar-primary`,`[&>svg]:size-5 [&>svg]:shrink-0`),children:[e.icon,(0,p.jsx)(`span`,{className:`max-w-16 truncate text-[10px] leading-3`,children:e.label})]},e.id))})},N=({activeNavItemId:e,sidebar:t,user:n,isLogin:r=!0,onLogin:i,onLogout:a,children:o})=>{let s=(0,u.useMemo)(()=>t?.groupcontent||[],[t]),c=(0,u.useMemo)(()=>s.flatMap(e=>e.items),[s]);return(0,p.jsxs)(v,{children:[(0,p.jsx)(j,{user:n,isLogin:r,onLogin:i,onLogout:a}),r&&(0,p.jsxs)(y,{variant:`inset`,collapsible:`icon`,children:[(0,p.jsx)(S,{children:s.map(t=>(0,p.jsxs)(C,{children:[(0,p.jsx)(w,{children:t.label}),(0,p.jsx)(T,{children:(0,p.jsx)(E,{children:t.items.map(t=>(0,p.jsx)(D,{children:(0,p.jsxs)(k,{isActive:t.id===e,onClick:e=>{t.onClick?.(),e.preventDefault(),e.stopPropagation()},children:[t.icon,t.label]})},t.id))})})]},t.id))}),(0,p.jsx)(x,{children:(0,p.jsx)(E,{children:(0,p.jsx)(D,{className:`mt-2 border-t border-t-border`,children:(0,p.jsx)(`p`,{className:`pt-2 text-center text-muted-foreground text-xs`,children:`Copyright © 2025, Lunas.`})})})})]}),(0,p.jsx)(b,{children:(0,p.jsx)(`section`,{className:`relative size-full`,children:(0,p.jsx)(`div`,{className:(0,d.cn)(`absolute inset-0 overflow-y-auto`,r&&`pb-16 md:pb-0`),children:o})})}),r&&(0,p.jsx)(M,{items:c,activeNavItemId:e})]})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return N}});
+//# sourceMappingURL=payment-layout-Cb-Q8KD2.cjs.map