@customafk/lunas-ui 0.2.84 → 0.2.85

package/dist/LoginPage-DGgThT3s.mjs

@@ -0,0 +1,2 @@
+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{Select as d,SelectContent as f,SelectItem as p,SelectTrigger as m,SelectValue as h}from"./ui/select.mjs";import{InputOTP as g,InputOTPGroup as _,InputOTPSeparator as v,InputOTPSlot as y}from"./ui/input-otp.mjs";import{Eye as b,EyeOff as x}from"lucide-react";import{memo as S,useCallback as C,useEffect as w,useId as T,useMemo as E,useRef as D,useState as O}from"react";import{Fragment as k,jsx as A,jsxs as j}from"react/jsx-runtime";import{z as M}from"zod/v4";const N=S(function({emailId:t,passwordId:n,method:r,onMethodChange:i,email:a,onEmailChange:o,password:c,onPasswordChange:l,showPassword:g,onToggleShowPassword:_,fieldErrors:v,isLoading:y,onForgotPassword:S,onRegister:C,onClose:w,onSubmit:T}){return j(k,{children:[j(`form`,{onSubmit:T,noValidate:!0,className:`flex flex-col gap-4`,children:[j(`div`,{className:`flex flex-col gap-1.5`,children:[A(u,{htmlFor:t,children:`Email`}),A(s,{id:t,type:`email`,autoComplete:`email`,placeholder:`nguyenvana@example.com`,value:a,onChange:e=>o(e.target.value),"aria-invalid":!!v.email,disabled:y}),v.email&&A(`p`,{className:`text-danger text-xs`,children:v.email})]}),r===`password`&&j(`div`,{className:`flex flex-col gap-1.5`,children:[j(`div`,{className:`flex items-center justify-between`,children:[A(u,{htmlFor:n,children:`Mật khẩu`}),S&&A(e,{type:`button`,variant:`link`,size:`sm`,className:`h-auto p-0 text-xs ring-0! ring-offset-0!`,onClick:S,children:`Quên mật khẩu?`})]}),j(`div`,{className:`relative`,children:[A(s,{id:n,type:g?`text`:`password`,autoComplete:`current-password`,placeholder:`••••••••`,value:c,onChange:e=>l(e.target.value),"aria-invalid":!!v.password,disabled:y,className:`pr-10`}),A(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-text-positive-strong`,onMouseDown:e=>{e.preventDefault(),_()},"aria-label":g?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:A(g?x:b,{size:16})})]}),v.password&&A(`p`,{className:`text-danger text-xs`,children:v.password})]}),A(e,{type:`submit`,isLoading:y,className:`w-full`,children:r===`password`?`Đăng nhập`:`Gửi mã đăng nhập`}),A(e,{type:`button`,variant:`outline`,className:`w-full`,disabled:y,onClick:w,children:`Đóng hộp thoại`}),j(`div`,{className:`flex flex-col gap-1.5`,children:[A(u,{children:`Phương thức đăng nhập`}),j(d,{value:r,onValueChange:i,disabled:y,children:[A(m,{className:`w-full`,children:A(h,{})}),j(f,{children:[A(p,{value:`otp`,children:`Mã gửi qua email`}),A(p,{value:`password`,children:`Mật khẩu`})]})]})]})]}),C&&j(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[A(`span`,{children:`Chưa có tài khoản?`}),A(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:C,children:`Đăng ký`})]})]})}),P=M.object({email:M.email(`Email không hợp lệ`).min(1,`Vui lòng nhập email`),password:M.string().min(1,`Vui lòng nhập mật khẩu`)}),F=M.object({email:M.email(`Email không hợp lệ`).min(1,`Vui lòng nhập email`)}),I=S(function({otp:t,onOtpChange:n,onComplete:r,isLoading:i,resendCooldownSeconds:a,onVerify:o,onResend:s,onBack:c}){let[l,u]=O(a),d=D(null),f=C(e=>{d.current&&clearInterval(d.current),u(e),d.current=setInterval(()=>{u(e=>e<=1?(d.current&&clearInterval(d.current),0):e-1)},1e3)},[]);w(()=>(f(a),()=>{d.current&&clearInterval(d.current)}),[]);let p=C(()=>{f(a),s()},[s,a,f]);return j(`div`,{className:`flex flex-col items-center gap-4`,children:[j(g,{maxLength:8,pattern:`^[ABCDEFGHJKMNPQRSTUVWXYZ23456789abcdefghjkmnpqrstuvwxyz23456789]*$`,inputMode:`text`,value:t,onChange:e=>n(e.toUpperCase()),onComplete:r,disabled:i,containerClassName:`gap-1 sm:gap-2`,children:[j(_,{children:[A(y,{index:0,className:`size-7 text-xs sm:size-9 sm:text-sm`}),A(y,{index:1,className:`size-7 text-xs sm:size-9 sm:text-sm`}),A(y,{index:2,className:`size-7 text-xs sm:size-9 sm:text-sm`}),A(y,{index:3,className:`size-7 text-xs sm:size-9 sm:text-sm`})]}),A(v,{className:`max-sm:[&>svg]:size-3`}),j(_,{children:[A(y,{index:4,className:`size-7 text-xs sm:size-9 sm:text-sm`}),A(y,{index:5,className:`size-7 text-xs sm:size-9 sm:text-sm`}),A(y,{index:6,className:`size-7 text-xs sm:size-9 sm:text-sm`}),A(y,{index:7,className:`size-7 text-xs sm:size-9 sm:text-sm`})]})]}),A(e,{type:`button`,isLoading:i,disabled:t.length<8,className:`w-full`,onClick:o,children:`Đăng nhập`}),j(`div`,{className:`flex items-center gap-1 text-text-positive-weak text-sm`,children:[A(`span`,{children:`Chưa nhận được mã?`}),A(e,{variant:`link`,size:`sm`,className:`h-auto p-0`,disabled:l>0||i,onClick:p,children:l>0?`Gửi lại (${l}s)`:`Gửi lại`})]}),A(e,{type:`button`,variant:`ghost`,size:`sm`,className:`w-full`,disabled:i,onClick:c,children:`Quay lại`})]})}),L=({open:e,onOpenChange:s,onLogin:u,onRequestOtp:d,onVerifyOtp:f,onForgotPassword:p,onRegister:m,isLoading:h=!1,errorMessage:g,title:_=`Đăng nhập`,subtitle:v=`Nhập thông tin để tiếp tục`,resendCooldownSeconds:y=60})=>{let b=T(),x=T(),[S,D]=O(`password`),[M,L]=O(`form`),[R,z]=O(``),[B,V]=O(``),[H,U]=O(``),[W,G]=O(!1),[K,q]=O({});w(()=>{e||(L(`form`),U(``),q({}),D(`password`))},[e]);let J=C(e=>{(e===`password`||e===`otp`)&&(D(e),q({}),V(``))},[]),Y=C(async()=>{let e=P.safeParse({email:R,password:B});if(!e.success){let t=e.error.flatten().fieldErrors;q({email:t.email?.[0],password:t.password?.[0]});return}q({}),await u(R,B)},[R,B,u]),X=C(async()=>{let e=F.safeParse({email:R});if(!e.success){q({email:e.error.flatten().fieldErrors.email?.[0]});return}q({}),await d(R)&&L(`otp-verify`)},[R,d]),Z=C(async e=>{e.preventDefault(),S===`password`?await Y():await X()},[S,Y,X]),Q=C(async()=>{await d(R)},[R,d]),$=C(async()=>{H.length<8||await f(R,H)},[R,H,f]),ee=C(()=>{U(``),L(`form`)},[]),te=C(()=>G(e=>!e),[]),ne=C(()=>s(!1),[s]),re=E(()=>M===`otp-verify`?j(k,{children:[`Nhập mã đăng nhập đã được gửi tới `,A(`span`,{className:`font-medium text-text-positive-weak`,children:R}),`. Mã có hiệu lực trong 10 phút.`]}):v,[M,R,v]);return A(n,{open:e,onOpenChange:s,children:j(r,{showCloseButton:!1,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:[j(a,{children:[A(t,{variant:`horizontal`,size:`sm`,className:`mx-auto`}),j(`div`,{className:`flex flex-col gap-0.5 items-center`,children:[A(o,{children:_}),A(i,{children:re})]})]}),g&&A(l,{variant:`destructive`,children:A(c,{children:g})}),M===`form`?A(N,{emailId:b,passwordId:x,method:S,onMethodChange:J,email:R,onEmailChange:z,password:B,onPasswordChange:V,showPassword:W,onToggleShowPassword:te,fieldErrors:K,isLoading:h,onForgotPassword:p,onRegister:m,onClose:ne,onSubmit:Z}):A(I,{otp:H,onOtpChange:U,onComplete:$,isLoading:h,resendCooldownSeconds:y,onVerify:$,onResend:Q,onBack:ee})]})})};export{L as t};
+//# sourceMappingURL=LoginPage-DGgThT3s.mjs.map

package/dist/LoginPage-DGgThT3s.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPage-DGgThT3s.mjs","names":[],"sources":["../packages/components/pages/LoginPage/components/credentials-form.tsx","../packages/components/pages/LoginPage/constants.ts","../packages/components/pages/LoginPage/components/otp-verify-step.tsx","../packages/components/pages/LoginPage/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\n\nimport { Button } from '../../../ui/button';\nimport { Input } from '../../../ui/input';\nimport { Label } from '../../../ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select';\nimport type { LoginMethod } from '../types';\n\nexport interface CredentialsFormProps {\n  emailId: string;\n  passwordId: string;\n  method: LoginMethod;\n  onMethodChange: (value: string) => void;\n  email: string;\n  onEmailChange: (value: string) => void;\n  password: string;\n  onPasswordChange: (value: string) => void;\n  showPassword: boolean;\n  onToggleShowPassword: () => void;\n  fieldErrors: { email?: string; password?: string };\n  isLoading: boolean;\n  onForgotPassword?: () => void;\n  onRegister?: () => void;\n  onClose: () => void;\n  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;\n}\n\nexport const CredentialsForm = memo(function CredentialsForm({\n  emailId,\n  passwordId,\n  method,\n  onMethodChange,\n  email,\n  onEmailChange,\n  password,\n  onPasswordChange,\n  showPassword,\n  onToggleShowPassword,\n  fieldErrors,\n  isLoading,\n  onForgotPassword,\n  onRegister,\n  onClose,\n  onSubmit,\n}: CredentialsFormProps) {\n  return (\n    <>\n      <form onSubmit={onSubmit} noValidate className=\"flex flex-col gap-4\">\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=\"nguyenvana@example.com\"\n            value={email}\n            onChange={e => onEmailChange(e.target.value)}\n            aria-invalid={!!fieldErrors.email}\n            disabled={isLoading}\n          />\n          {fieldErrors.email && <p className=\"text-danger text-xs\">{fieldErrors.email}</p>}\n        </div>\n\n        {method === 'password' && (\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 ring-0! ring-offset-0!\" 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 => onPasswordChange(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-text-positive-strong\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  onToggleShowPassword();\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-danger text-xs\">{fieldErrors.password}</p>}\n          </div>\n        )}\n\n        <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n          {method === 'password' ? 'Đăng nhập' : 'Gửi mã đăng nhập'}\n        </Button>\n        <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={onClose}>\n          Đóng hộp thoại\n        </Button>\n\n        <div className=\"flex flex-col gap-1.5\">\n          <Label>Phương thức đăng nhập</Label>\n          <Select value={method} onValueChange={onMethodChange} disabled={isLoading}>\n            <SelectTrigger className=\"w-full\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"otp\">Mã gửi qua email</SelectItem>\n              <SelectItem value=\"password\">Mật khẩu</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\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    </>\n  );\n});\n","import { z } from 'zod/v4';\n\n// Same alphabet as the backend's generated code — visually confusing\n// characters (0/O, 1/I/L) are excluded.\nexport const OTP_ALPHABET = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';\n// Accepts both cases at the input level — input-otp validates each keystroke\n// against this pattern *before* our onChange runs, so lowercase must be\n// allowed here too or typing it (the common case, no shift/caps-lock) gets\n// silently rejected. onChange still upper-cases the accepted value.\nexport const OTP_PATTERN = `^[${OTP_ALPHABET}${OTP_ALPHABET.toLowerCase()}]*$`;\nexport const OTP_LENGTH = 8;\n\nexport const passwordLoginSchema = z.object({\n  email: z.email('Email không hợp lệ').min(1, 'Vui lòng nhập email'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\nexport const otpRequestSchema = z.object({\n  email: z.email('Email không hợp lệ').min(1, 'Vui lòng nhập email'),\n});\n","'use client';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../../../ui/button';\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../../ui/input-otp';\nimport { OTP_LENGTH, OTP_PATTERN } from '../constants';\n\nexport interface OtpVerifyStepProps {\n  otp: string;\n  onOtpChange: (value: string) => void;\n  onComplete: () => void;\n  isLoading: boolean;\n  resendCooldownSeconds: number;\n  onVerify: () => void;\n  onResend: () => void;\n  onBack: () => void;\n}\n\nexport const OtpVerifyStep = memo(function OtpVerifyStep({\n  otp,\n  onOtpChange,\n  onComplete,\n  isLoading,\n  resendCooldownSeconds,\n  onVerify,\n  onResend,\n  onBack,\n}: OtpVerifyStepProps) {\n  // Đếm ngược sống hẳn trong component này — tick mỗi giây chỉ re-render\n  // OtpVerifyStep, không kéo theo LoginPage cha re-render liên tục.\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  // Bắt đầu đếm ngược ngay khi bước này được mount, dừng khi unmount (quay lại/đóng dialog)\n  // biome-ignore lint/correctness/useExhaustiveDependencies: chỉ chạy 1 lần lúc mount, không cần re-run khi resendCooldownSeconds/startCountdown đổi\n  useEffect(() => {\n    startCountdown(resendCooldownSeconds);\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, []);\n\n  const handleResendClick = useCallback(() => {\n    startCountdown(resendCooldownSeconds);\n    onResend();\n  }, [onResend, resendCooldownSeconds, startCountdown]);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <InputOTP\n        maxLength={OTP_LENGTH}\n        pattern={OTP_PATTERN}\n        inputMode=\"text\"\n        value={otp}\n        onChange={value => onOtpChange(value.toUpperCase())}\n        onComplete={onComplete}\n        disabled={isLoading}\n        containerClassName=\"gap-1 sm:gap-2\"\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={1} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={2} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={3} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n        </InputOTPGroup>\n        <InputOTPSeparator className=\"max-sm:[&>svg]:size-3\" />\n        <InputOTPGroup>\n          <InputOTPSlot index={4} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={5} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={6} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={7} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n        </InputOTPGroup>\n      </InputOTP>\n\n      <Button type=\"button\" isLoading={isLoading} disabled={otp.length < OTP_LENGTH} className=\"w-full\" onClick={onVerify}>\n        Đăng nhập\n      </Button>\n\n      <div className=\"flex items-center gap-1 text-text-positive-weak 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={handleResendClick}>\n          {countdown > 0 ? `Gửi lại (${countdown}s)` : 'Gửi lại'}\n        </Button>\n      </div>\n\n      <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"w-full\" disabled={isLoading} onClick={onBack}>\n        Quay lại\n      </Button>\n    </div>\n  );\n});\n","'use client';\n\nimport { useCallback, useEffect, useId, useMemo, useState } from 'react';\n\nimport { LunasLogo } from '../../features/logo';\nimport { Alert, AlertDescription } from '../../ui/alert';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../ui/dialog';\nimport { CredentialsForm } from './components/credentials-form';\nimport { OtpVerifyStep } from './components/otp-verify-step';\nimport { OTP_LENGTH, otpRequestSchema, passwordLoginSchema } from './constants';\nimport type { LoginMethod, LoginPageProps } from './types';\n\nexport type { LoginMethod, LoginPageProps } from './types';\n\n/**\n * Modal login dialog for the client authentication flow. Defaults to\n * email/password credentials; a select at the bottom of the form switches\n * to a passwordless login code sent by email instead. The code flow's\n * request and verify steps are both handled inside this single dialog.\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 *   onRequestOtp={async (email) => {\n *     const res = await authService.requestLoginOtp(email);\n *     return res.success;\n *   }}\n *   onVerifyOtp={async (email, otp) => {\n *     await authService.verifyLoginOtp(email, otp);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onRequestOtp,\n  onVerifyOtp,\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  resendCooldownSeconds = 60,\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [method, setMethod] = useState<LoginMethod>('password');\n  const [step, setStep] = useState<'form' | 'otp-verify'>('form');\n  const [email, setEmail] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [otp, setOtp] = useState<string>('');\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  useEffect(() => {\n    if (!open) {\n      setStep('form');\n      setOtp('');\n      setFieldErrors({});\n      setMethod('password');\n    }\n  }, [open]);\n\n  // Chuyển đổi giữa phương thức \"password\" và \"otp\", xoá lỗi/mật khẩu cũ\n  const handleMethodChange = useCallback((value: string) => {\n    if (value !== 'password' && value !== 'otp') return;\n    setMethod(value as LoginMethod);\n    setFieldErrors({});\n    setPassword('');\n  }, []);\n\n  // Validate rồi gọi onLogin khi đăng nhập bằng email/mật khẩu\n  const handlePasswordSubmit = useCallback(async () => {\n    const result = passwordLoginSchema.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  }, [email, password, onLogin]);\n\n  // Validate email rồi gửi yêu cầu OTP, chuyển sang bước nhập mã nếu thành công\n  const handleOtpRequestSubmit = useCallback(async () => {\n    const result = otpRequestSchema.safeParse({ email });\n    if (!result.success) {\n      setFieldErrors({ email: result.error.flatten().fieldErrors.email?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    const sent = await onRequestOtp(email);\n    if (sent) setStep('otp-verify');\n  }, [email, onRequestOtp]);\n\n  // Submit form ở bước \"form\" — rẽ nhánh theo method đang chọn\n  const handleSubmit = useCallback(\n    async (e: React.SubmitEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      if (method === 'password') await handlePasswordSubmit();\n      else await handleOtpRequestSubmit();\n    },\n    [method, handlePasswordSubmit, handleOtpRequestSubmit]\n  );\n\n  // Gửi lại mã OTP — đếm ngược tự quản lý bên trong OtpVerifyStep\n  const handleResend = useCallback(async () => {\n    await onRequestOtp(email);\n  }, [email, onRequestOtp]);\n\n  // Xác thực mã OTP khi đã nhập đủ độ dài\n  const handleVerify = useCallback(async () => {\n    if (otp.length < OTP_LENGTH) return;\n    await onVerifyOtp(email, otp);\n  }, [email, otp, onVerifyOtp]);\n\n  // Quay lại bước \"form\" từ bước nhập OTP\n  const handleBackToForm = useCallback(() => {\n    setOtp('');\n    setStep('form');\n  }, []);\n\n  // Đảo trạng thái hiện/ẩn mật khẩu\n  const handleToggleShowPassword = useCallback(() => setShowPassword(v => !v), []);\n\n  // Đóng dialog đăng nhập\n  const handleClose = useCallback(() => onOpenChange(false), [onOpenChange]);\n\n  // Nội dung mô tả dialog đổi theo bước hiện tại — chỉ tính lại khi step/email/subtitle đổi\n  const dialogDescription = useMemo(\n    () =>\n      step === 'otp-verify' ? (\n        <>\n          Nhập mã đăng nhập đã được gửi tới <span className=\"font-medium text-text-positive-weak\">{email}</span>. Mã có hiệu lực trong 10 phút.\n        </>\n      ) : (\n        subtitle\n      ),\n    [step, email, subtitle]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent showCloseButton={false} 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 items-center\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{dialogDescription}</DialogDescription>\n          </div>\n        </DialogHeader>\n\n        {errorMessage && (\n          <Alert variant=\"destructive\">\n            <AlertDescription>{errorMessage}</AlertDescription>\n          </Alert>\n        )}\n\n        {step === 'form' ? (\n          <CredentialsForm\n            emailId={emailId}\n            passwordId={passwordId}\n            method={method}\n            onMethodChange={handleMethodChange}\n            email={email}\n            onEmailChange={setEmail}\n            password={password}\n            onPasswordChange={setPassword}\n            showPassword={showPassword}\n            onToggleShowPassword={handleToggleShowPassword}\n            fieldErrors={fieldErrors}\n            isLoading={isLoading}\n            onForgotPassword={onForgotPassword}\n            onRegister={onRegister}\n            onClose={handleClose}\n            onSubmit={handleSubmit}\n          />\n        ) : (\n          <OtpVerifyStep\n            otp={otp}\n            onOtpChange={setOtp}\n            onComplete={handleVerify}\n            isLoading={isLoading}\n            resendCooldownSeconds={resendCooldownSeconds}\n            onVerify={handleVerify}\n            onResend={handleResend}\n            onBack={handleBackToForm}\n          />\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/LoginPage-DPUdRD0r.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./features/logo/index.cjs"),n=require("./ui/dialog.cjs"),r=require("./ui/input.cjs"),i=require("./alert-D31c6DLq.cjs"),a=require("./ui/label.cjs"),o=require("./ui/select.cjs"),s=require("./ui/input-otp.cjs");let c=require("lucide-react"),l=require("react"),u=require("react/jsx-runtime"),d=require("zod/v4");const f=(0,l.memo)(function({emailId:t,passwordId:n,method:i,onMethodChange:s,email:l,onEmailChange:d,password:f,onPasswordChange:p,showPassword:m,onToggleShowPassword:h,fieldErrors:g,isLoading:_,onForgotPassword:v,onRegister:y,onClose:b,onSubmit:x}){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(`form`,{onSubmit:x,noValidate:!0,className:`flex flex-col gap-4`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,u.jsx)(a.Label,{htmlFor:t,children:`Email`}),(0,u.jsx)(r.Input,{id:t,type:`email`,autoComplete:`email`,placeholder:`nguyenvana@example.com`,value:l,onChange:e=>d(e.target.value),"aria-invalid":!!g.email,disabled:_}),g.email&&(0,u.jsx)(`p`,{className:`text-danger text-xs`,children:g.email})]}),i===`password`&&(0,u.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(a.Label,{htmlFor:n,children:`Mật khẩu`}),v&&(0,u.jsx)(e.Button,{type:`button`,variant:`link`,size:`sm`,className:`h-auto p-0 text-xs ring-0! ring-offset-0!`,onClick:v,children:`Quên mật khẩu?`})]}),(0,u.jsxs)(`div`,{className:`relative`,children:[(0,u.jsx)(r.Input,{id:n,type:m?`text`:`password`,autoComplete:`current-password`,placeholder:`••••••••`,value:f,onChange:e=>p(e.target.value),"aria-invalid":!!g.password,disabled:_,className:`pr-10`}),(0,u.jsx)(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-text-positive-strong`,onMouseDown:e=>{e.preventDefault(),h()},"aria-label":m?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:m?(0,u.jsx)(c.EyeOff,{size:16}):(0,u.jsx)(c.Eye,{size:16})})]}),g.password&&(0,u.jsx)(`p`,{className:`text-danger text-xs`,children:g.password})]}),(0,u.jsx)(e.Button,{type:`submit`,isLoading:_,className:`w-full`,children:i===`password`?`Đăng nhập`:`Gửi mã đăng nhập`}),(0,u.jsx)(e.Button,{type:`button`,variant:`outline`,className:`w-full`,disabled:_,onClick:b,children:`Đóng hộp thoại`}),(0,u.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,u.jsx)(a.Label,{children:`Phương thức đăng nhập`}),(0,u.jsxs)(o.Select,{value:i,onValueChange:s,disabled:_,children:[(0,u.jsx)(o.SelectTrigger,{className:`w-full`,children:(0,u.jsx)(o.SelectValue,{})}),(0,u.jsxs)(o.SelectContent,{children:[(0,u.jsx)(o.SelectItem,{value:`otp`,children:`Mã gửi qua email`}),(0,u.jsx)(o.SelectItem,{value:`password`,children:`Mật khẩu`})]})]})]})]}),y&&(0,u.jsxs)(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[(0,u.jsx)(`span`,{children:`Chưa có tài khoản?`}),(0,u.jsx)(e.Button,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:y,children:`Đăng ký`})]})]})}),p=d.z.object({email:d.z.email(`Email không hợp lệ`).min(1,`Vui lòng nhập email`),password:d.z.string().min(1,`Vui lòng nhập mật khẩu`)}),m=d.z.object({email:d.z.email(`Email không hợp lệ`).min(1,`Vui lòng nhập email`)}),h=(0,l.memo)(function({otp:t,onOtpChange:n,onComplete:r,isLoading:i,resendCooldownSeconds:a,onVerify:o,onResend:c,onBack:d}){let[f,p]=(0,l.useState)(a),m=(0,l.useRef)(null),h=(0,l.useCallback)(e=>{m.current&&clearInterval(m.current),p(e),m.current=setInterval(()=>{p(e=>e<=1?(m.current&&clearInterval(m.current),0):e-1)},1e3)},[]);(0,l.useEffect)(()=>(h(a),()=>{m.current&&clearInterval(m.current)}),[]);let g=(0,l.useCallback)(()=>{h(a),c()},[c,a,h]);return(0,u.jsxs)(`div`,{className:`flex flex-col items-center gap-4`,children:[(0,u.jsxs)(s.InputOTP,{maxLength:8,pattern:`^[ABCDEFGHJKMNPQRSTUVWXYZ23456789abcdefghjkmnpqrstuvwxyz23456789]*$`,inputMode:`text`,value:t,onChange:e=>n(e.toUpperCase()),onComplete:r,disabled:i,containerClassName:`gap-1 sm:gap-2`,children:[(0,u.jsxs)(s.InputOTPGroup,{children:[(0,u.jsx)(s.InputOTPSlot,{index:0,className:`size-7 text-xs sm:size-9 sm:text-sm`}),(0,u.jsx)(s.InputOTPSlot,{index:1,className:`size-7 text-xs sm:size-9 sm:text-sm`}),(0,u.jsx)(s.InputOTPSlot,{index:2,className:`size-7 text-xs sm:size-9 sm:text-sm`}),(0,u.jsx)(s.InputOTPSlot,{index:3,className:`size-7 text-xs sm:size-9 sm:text-sm`})]}),(0,u.jsx)(s.InputOTPSeparator,{className:`max-sm:[&>svg]:size-3`}),(0,u.jsxs)(s.InputOTPGroup,{children:[(0,u.jsx)(s.InputOTPSlot,{index:4,className:`size-7 text-xs sm:size-9 sm:text-sm`}),(0,u.jsx)(s.InputOTPSlot,{index:5,className:`size-7 text-xs sm:size-9 sm:text-sm`}),(0,u.jsx)(s.InputOTPSlot,{index:6,className:`size-7 text-xs sm:size-9 sm:text-sm`}),(0,u.jsx)(s.InputOTPSlot,{index:7,className:`size-7 text-xs sm:size-9 sm:text-sm`})]})]}),(0,u.jsx)(e.Button,{type:`button`,isLoading:i,disabled:t.length<8,className:`w-full`,onClick:o,children:`Đăng nhập`}),(0,u.jsxs)(`div`,{className:`flex items-center gap-1 text-text-positive-weak text-sm`,children:[(0,u.jsx)(`span`,{children:`Chưa nhận được mã?`}),(0,u.jsx)(e.Button,{variant:`link`,size:`sm`,className:`h-auto p-0`,disabled:f>0||i,onClick:g,children:f>0?`Gửi lại (${f}s)`:`Gửi lại`})]}),(0,u.jsx)(e.Button,{type:`button`,variant:`ghost`,size:`sm`,className:`w-full`,disabled:i,onClick:d,children:`Quay lại`})]})}),g=({open:e,onOpenChange:r,onLogin:a,onRequestOtp:o,onVerifyOtp:s,onForgotPassword:c,onRegister:d,isLoading:g=!1,errorMessage:_,title:v=`Đăng nhập`,subtitle:y=`Nhập thông tin để tiếp tục`,resendCooldownSeconds:b=60})=>{let x=(0,l.useId)(),S=(0,l.useId)(),[C,w]=(0,l.useState)(`password`),[T,E]=(0,l.useState)(`form`),[D,O]=(0,l.useState)(``),[k,A]=(0,l.useState)(``),[j,M]=(0,l.useState)(``),[N,P]=(0,l.useState)(!1),[F,I]=(0,l.useState)({});(0,l.useEffect)(()=>{e||(E(`form`),M(``),I({}),w(`password`))},[e]);let L=(0,l.useCallback)(e=>{(e===`password`||e===`otp`)&&(w(e),I({}),A(``))},[]),R=(0,l.useCallback)(async()=>{let e=p.safeParse({email:D,password:k});if(!e.success){let t=e.error.flatten().fieldErrors;I({email:t.email?.[0],password:t.password?.[0]});return}I({}),await a(D,k)},[D,k,a]),z=(0,l.useCallback)(async()=>{let e=m.safeParse({email:D});if(!e.success){I({email:e.error.flatten().fieldErrors.email?.[0]});return}I({}),await o(D)&&E(`otp-verify`)},[D,o]),B=(0,l.useCallback)(async e=>{e.preventDefault(),C===`password`?await R():await z()},[C,R,z]),V=(0,l.useCallback)(async()=>{await o(D)},[D,o]),H=(0,l.useCallback)(async()=>{j.length<8||await s(D,j)},[D,j,s]),U=(0,l.useCallback)(()=>{M(``),E(`form`)},[]),W=(0,l.useCallback)(()=>P(e=>!e),[]),G=(0,l.useCallback)(()=>r(!1),[r]),K=(0,l.useMemo)(()=>T===`otp-verify`?(0,u.jsxs)(u.Fragment,{children:[`Nhập mã đăng nhập đã được gửi tới `,(0,u.jsx)(`span`,{className:`font-medium text-text-positive-weak`,children:D}),`. Mã có hiệu lực trong 10 phút.`]}):y,[T,D,y]);return(0,u.jsx)(n.Dialog,{open:e,onOpenChange:r,children:(0,u.jsxs)(n.DialogContent,{showCloseButton:!1,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,u.jsxs)(n.DialogHeader,{children:[(0,u.jsx)(t.LunasLogo,{variant:`horizontal`,size:`sm`,className:`mx-auto`}),(0,u.jsxs)(`div`,{className:`flex flex-col gap-0.5 items-center`,children:[(0,u.jsx)(n.DialogTitle,{children:v}),(0,u.jsx)(n.DialogDescription,{children:K})]})]}),_&&(0,u.jsx)(i.t,{variant:`destructive`,children:(0,u.jsx)(i.n,{children:_})}),T===`form`?(0,u.jsx)(f,{emailId:x,passwordId:S,method:C,onMethodChange:L,email:D,onEmailChange:O,password:k,onPasswordChange:A,showPassword:N,onToggleShowPassword:W,fieldErrors:F,isLoading:g,onForgotPassword:c,onRegister:d,onClose:G,onSubmit:B}):(0,u.jsx)(h,{otp:j,onOtpChange:M,onComplete:H,isLoading:g,resendCooldownSeconds:b,onVerify:H,onResend:V,onBack:U})]})})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return g}});
+//# sourceMappingURL=LoginPage-DPUdRD0r.cjs.map

package/dist/LoginPage-DPUdRD0r.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPage-DPUdRD0r.cjs","names":["Label","Input","Button","EyeOff","Eye","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","z","InputOTP","InputOTPGroup","InputOTPSlot","InputOTPSeparator","Button","Dialog","DialogContent","DialogHeader","LunasLogo","DialogTitle","DialogDescription","Alert","AlertDescription"],"sources":["../packages/components/pages/LoginPage/components/credentials-form.tsx","../packages/components/pages/LoginPage/constants.ts","../packages/components/pages/LoginPage/components/otp-verify-step.tsx","../packages/components/pages/LoginPage/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\n\nimport { Button } from '../../../ui/button';\nimport { Input } from '../../../ui/input';\nimport { Label } from '../../../ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select';\nimport type { LoginMethod } from '../types';\n\nexport interface CredentialsFormProps {\n  emailId: string;\n  passwordId: string;\n  method: LoginMethod;\n  onMethodChange: (value: string) => void;\n  email: string;\n  onEmailChange: (value: string) => void;\n  password: string;\n  onPasswordChange: (value: string) => void;\n  showPassword: boolean;\n  onToggleShowPassword: () => void;\n  fieldErrors: { email?: string; password?: string };\n  isLoading: boolean;\n  onForgotPassword?: () => void;\n  onRegister?: () => void;\n  onClose: () => void;\n  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;\n}\n\nexport const CredentialsForm = memo(function CredentialsForm({\n  emailId,\n  passwordId,\n  method,\n  onMethodChange,\n  email,\n  onEmailChange,\n  password,\n  onPasswordChange,\n  showPassword,\n  onToggleShowPassword,\n  fieldErrors,\n  isLoading,\n  onForgotPassword,\n  onRegister,\n  onClose,\n  onSubmit,\n}: CredentialsFormProps) {\n  return (\n    <>\n      <form onSubmit={onSubmit} noValidate className=\"flex flex-col gap-4\">\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=\"nguyenvana@example.com\"\n            value={email}\n            onChange={e => onEmailChange(e.target.value)}\n            aria-invalid={!!fieldErrors.email}\n            disabled={isLoading}\n          />\n          {fieldErrors.email && <p className=\"text-danger text-xs\">{fieldErrors.email}</p>}\n        </div>\n\n        {method === 'password' && (\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 ring-0! ring-offset-0!\" 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 => onPasswordChange(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-text-positive-strong\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  onToggleShowPassword();\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-danger text-xs\">{fieldErrors.password}</p>}\n          </div>\n        )}\n\n        <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n          {method === 'password' ? 'Đăng nhập' : 'Gửi mã đăng nhập'}\n        </Button>\n        <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={onClose}>\n          Đóng hộp thoại\n        </Button>\n\n        <div className=\"flex flex-col gap-1.5\">\n          <Label>Phương thức đăng nhập</Label>\n          <Select value={method} onValueChange={onMethodChange} disabled={isLoading}>\n            <SelectTrigger className=\"w-full\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"otp\">Mã gửi qua email</SelectItem>\n              <SelectItem value=\"password\">Mật khẩu</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\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    </>\n  );\n});\n","import { z } from 'zod/v4';\n\n// Same alphabet as the backend's generated code — visually confusing\n// characters (0/O, 1/I/L) are excluded.\nexport const OTP_ALPHABET = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';\n// Accepts both cases at the input level — input-otp validates each keystroke\n// against this pattern *before* our onChange runs, so lowercase must be\n// allowed here too or typing it (the common case, no shift/caps-lock) gets\n// silently rejected. onChange still upper-cases the accepted value.\nexport const OTP_PATTERN = `^[${OTP_ALPHABET}${OTP_ALPHABET.toLowerCase()}]*$`;\nexport const OTP_LENGTH = 8;\n\nexport const passwordLoginSchema = z.object({\n  email: z.email('Email không hợp lệ').min(1, 'Vui lòng nhập email'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\nexport const otpRequestSchema = z.object({\n  email: z.email('Email không hợp lệ').min(1, 'Vui lòng nhập email'),\n});\n","'use client';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../../../ui/button';\nimport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../../ui/input-otp';\nimport { OTP_LENGTH, OTP_PATTERN } from '../constants';\n\nexport interface OtpVerifyStepProps {\n  otp: string;\n  onOtpChange: (value: string) => void;\n  onComplete: () => void;\n  isLoading: boolean;\n  resendCooldownSeconds: number;\n  onVerify: () => void;\n  onResend: () => void;\n  onBack: () => void;\n}\n\nexport const OtpVerifyStep = memo(function OtpVerifyStep({\n  otp,\n  onOtpChange,\n  onComplete,\n  isLoading,\n  resendCooldownSeconds,\n  onVerify,\n  onResend,\n  onBack,\n}: OtpVerifyStepProps) {\n  // Đếm ngược sống hẳn trong component này — tick mỗi giây chỉ re-render\n  // OtpVerifyStep, không kéo theo LoginPage cha re-render liên tục.\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  // Bắt đầu đếm ngược ngay khi bước này được mount, dừng khi unmount (quay lại/đóng dialog)\n  // biome-ignore lint/correctness/useExhaustiveDependencies: chỉ chạy 1 lần lúc mount, không cần re-run khi resendCooldownSeconds/startCountdown đổi\n  useEffect(() => {\n    startCountdown(resendCooldownSeconds);\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, []);\n\n  const handleResendClick = useCallback(() => {\n    startCountdown(resendCooldownSeconds);\n    onResend();\n  }, [onResend, resendCooldownSeconds, startCountdown]);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <InputOTP\n        maxLength={OTP_LENGTH}\n        pattern={OTP_PATTERN}\n        inputMode=\"text\"\n        value={otp}\n        onChange={value => onOtpChange(value.toUpperCase())}\n        onComplete={onComplete}\n        disabled={isLoading}\n        containerClassName=\"gap-1 sm:gap-2\"\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={1} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={2} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={3} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n        </InputOTPGroup>\n        <InputOTPSeparator className=\"max-sm:[&>svg]:size-3\" />\n        <InputOTPGroup>\n          <InputOTPSlot index={4} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={5} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={6} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n          <InputOTPSlot index={7} className=\"size-7 text-xs sm:size-9 sm:text-sm\" />\n        </InputOTPGroup>\n      </InputOTP>\n\n      <Button type=\"button\" isLoading={isLoading} disabled={otp.length < OTP_LENGTH} className=\"w-full\" onClick={onVerify}>\n        Đăng nhập\n      </Button>\n\n      <div className=\"flex items-center gap-1 text-text-positive-weak 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={handleResendClick}>\n          {countdown > 0 ? `Gửi lại (${countdown}s)` : 'Gửi lại'}\n        </Button>\n      </div>\n\n      <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"w-full\" disabled={isLoading} onClick={onBack}>\n        Quay lại\n      </Button>\n    </div>\n  );\n});\n","'use client';\n\nimport { useCallback, useEffect, useId, useMemo, useState } from 'react';\n\nimport { LunasLogo } from '../../features/logo';\nimport { Alert, AlertDescription } from '../../ui/alert';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../ui/dialog';\nimport { CredentialsForm } from './components/credentials-form';\nimport { OtpVerifyStep } from './components/otp-verify-step';\nimport { OTP_LENGTH, otpRequestSchema, passwordLoginSchema } from './constants';\nimport type { LoginMethod, LoginPageProps } from './types';\n\nexport type { LoginMethod, LoginPageProps } from './types';\n\n/**\n * Modal login dialog for the client authentication flow. Defaults to\n * email/password credentials; a select at the bottom of the form switches\n * to a passwordless login code sent by email instead. The code flow's\n * request and verify steps are both handled inside this single dialog.\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 *   onRequestOtp={async (email) => {\n *     const res = await authService.requestLoginOtp(email);\n *     return res.success;\n *   }}\n *   onVerifyOtp={async (email, otp) => {\n *     await authService.verifyLoginOtp(email, otp);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onRequestOtp,\n  onVerifyOtp,\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  resendCooldownSeconds = 60,\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [method, setMethod] = useState<LoginMethod>('password');\n  const [step, setStep] = useState<'form' | 'otp-verify'>('form');\n  const [email, setEmail] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [otp, setOtp] = useState<string>('');\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  useEffect(() => {\n    if (!open) {\n      setStep('form');\n      setOtp('');\n      setFieldErrors({});\n      setMethod('password');\n    }\n  }, [open]);\n\n  // Chuyển đổi giữa phương thức \"password\" và \"otp\", xoá lỗi/mật khẩu cũ\n  const handleMethodChange = useCallback((value: string) => {\n    if (value !== 'password' && value !== 'otp') return;\n    setMethod(value as LoginMethod);\n    setFieldErrors({});\n    setPassword('');\n  }, []);\n\n  // Validate rồi gọi onLogin khi đăng nhập bằng email/mật khẩu\n  const handlePasswordSubmit = useCallback(async () => {\n    const result = passwordLoginSchema.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  }, [email, password, onLogin]);\n\n  // Validate email rồi gửi yêu cầu OTP, chuyển sang bước nhập mã nếu thành công\n  const handleOtpRequestSubmit = useCallback(async () => {\n    const result = otpRequestSchema.safeParse({ email });\n    if (!result.success) {\n      setFieldErrors({ email: result.error.flatten().fieldErrors.email?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    const sent = await onRequestOtp(email);\n    if (sent) setStep('otp-verify');\n  }, [email, onRequestOtp]);\n\n  // Submit form ở bước \"form\" — rẽ nhánh theo method đang chọn\n  const handleSubmit = useCallback(\n    async (e: React.SubmitEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      if (method === 'password') await handlePasswordSubmit();\n      else await handleOtpRequestSubmit();\n    },\n    [method, handlePasswordSubmit, handleOtpRequestSubmit]\n  );\n\n  // Gửi lại mã OTP — đếm ngược tự quản lý bên trong OtpVerifyStep\n  const handleResend = useCallback(async () => {\n    await onRequestOtp(email);\n  }, [email, onRequestOtp]);\n\n  // Xác thực mã OTP khi đã nhập đủ độ dài\n  const handleVerify = useCallback(async () => {\n    if (otp.length < OTP_LENGTH) return;\n    await onVerifyOtp(email, otp);\n  }, [email, otp, onVerifyOtp]);\n\n  // Quay lại bước \"form\" từ bước nhập OTP\n  const handleBackToForm = useCallback(() => {\n    setOtp('');\n    setStep('form');\n  }, []);\n\n  // Đảo trạng thái hiện/ẩn mật khẩu\n  const handleToggleShowPassword = useCallback(() => setShowPassword(v => !v), []);\n\n  // Đóng dialog đăng nhập\n  const handleClose = useCallback(() => onOpenChange(false), [onOpenChange]);\n\n  // Nội dung mô tả dialog đổi theo bước hiện tại — chỉ tính lại khi step/email/subtitle đổi\n  const dialogDescription = useMemo(\n    () =>\n      step === 'otp-verify' ? (\n        <>\n          Nhập mã đăng nhập đã được gửi tới <span className=\"font-medium text-text-positive-weak\">{email}</span>. Mã có hiệu lực trong 10 phút.\n        </>\n      ) : (\n        subtitle\n      ),\n    [step, email, subtitle]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent showCloseButton={false} 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 items-center\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{dialogDescription}</DialogDescription>\n          </div>\n        </DialogHeader>\n\n        {errorMessage && (\n          <Alert variant=\"destructive\">\n            <AlertDescription>{errorMessage}</AlertDescription>\n          </Alert>\n        )}\n\n        {step === 'form' ? (\n          <CredentialsForm\n            emailId={emailId}\n            passwordId={passwordId}\n            method={method}\n            onMethodChange={handleMethodChange}\n            email={email}\n            onEmailChange={setEmail}\n            password={password}\n            onPasswordChange={setPassword}\n            showPassword={showPassword}\n            onToggleShowPassword={handleToggleShowPassword}\n            fieldErrors={fieldErrors}\n            isLoading={isLoading}\n            onForgotPassword={onForgotPassword}\n            onRegister={onRegister}\n            onClose={handleClose}\n            onSubmit={handleSubmit}\n          />\n        ) : (\n          <OtpVerifyStep\n            otp={otp}\n            onOtpChange={setOtp}\n            onComplete={handleVerify}\n            isLoading={isLoading}\n            resendCooldownSeconds={resendCooldownSeconds}\n            onVerify={handleVerify}\n            onResend={handleResend}\n            onBack={handleBackToForm}\n          />\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/{action-submit-tpgKvZ47.cjs → action-submit-B2qFdfi6.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-BiOihtxs.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({label:a,className:o})=>{let s=t.it(),c=(0,n.useCallback)(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return(0,i.jsx)(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>(0,i.jsx)(e.Button,{type:`button`,size:`md`,disabled:t,isLoading:n,className:(0,r.cn)(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};exports.TanStackActionSubmit=a;
-//# sourceMappingURL=action-submit-tpgKvZ47.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-DCB2addt.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({label:a,className:o})=>{let s=t.it(),c=(0,n.useCallback)(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return(0,i.jsx)(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>(0,i.jsx)(e.Button,{type:`button`,size:`md`,disabled:t,isLoading:n,className:(0,r.cn)(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};exports.TanStackActionSubmit=a;
+//# sourceMappingURL=action-submit-B2qFdfi6.cjs.map

package/dist/{action-submit-tpgKvZ47.cjs.map → action-submit-B2qFdfi6.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"action-submit-tpgKvZ47.cjs","names":["useTanStackFormContext","Button"],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"+KAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAOA,EAAAA,GAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CAAuB,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,WAAA,EAAA,EAAA,GAAA,CAAc,mBAAoB,CAAS,EAAG,QAAS,EACjI,SAAA,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}
+{"version":3,"file":"action-submit-B2qFdfi6.cjs","names":["useTanStackFormContext","Button"],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"+KAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAOA,EAAAA,GAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CAAuB,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,WAAA,EAAA,EAAA,GAAA,CAAc,mBAAoB,CAAS,EAAG,QAAS,EACjI,SAAA,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}

package/dist/{action-submit-BHY2dndL.mjs → action-submit-DyNvI-F2.mjs}

@@ -1,2 +1,2 @@
-import{it as e}from"./tanstack-form-Do6xL2kv.mjs";import{Button as t}from"./ui/button.mjs";import{useCallback as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=({label:a,className:o})=>{let s=e(),c=n(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:n})=>i(t,{type:`button`,size:`md`,disabled:e,isLoading:n,className:r(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};export{a as TanStackActionSubmit};
-//# sourceMappingURL=action-submit-BHY2dndL.mjs.map
+import{it as e}from"./tanstack-form-BhKAn9I0.mjs";import{Button as t}from"./ui/button.mjs";import{useCallback as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=({label:a,className:o})=>{let s=e(),c=n(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:n})=>i(t,{type:`button`,size:`md`,disabled:e,isLoading:n,className:r(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};export{a as TanStackActionSubmit};
+//# sourceMappingURL=action-submit-DyNvI-F2.mjs.map

package/dist/{action-submit-BHY2dndL.mjs.map → action-submit-DyNvI-F2.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"action-submit-BHY2dndL.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"2NAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAO,EAAuB,EAE9B,EAAW,EAAY,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,UAAW,EAAG,mBAAoB,CAAS,EAAG,QAAS,EACjI,SAAA,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}
+{"version":3,"file":"action-submit-DyNvI-F2.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"2NAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAO,EAAuB,EAE9B,EAAW,EAAY,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,UAAW,EAAG,mBAAoB,CAAS,EAAG,QAAS,EACjI,SAAA,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}

package/dist/{actions-form-PByL8_M5.mjs → actions-form-CB0lZlE6.mjs}

@@ -1,2 +1,2 @@
-import{it as e}from"./tanstack-form-Do6xL2kv.mjs";import{Button as t}from"./ui/button.mjs";import{ArrowDownToLine as n,PlusIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({type:o=`create`})=>{let s=e();return a(`div`,{className:`flex h-8 items-center justify-between`,children:[i(s.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>i(t,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:e,className:`h-full min-w-32`,onClick:()=>s.reset(),children:`Hủy bỏ`})}),o===`create`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:n})=>a(t,{type:`submit`,size:`md`,disabled:e,isLoading:n,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`create`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(r,{}),`Thêm mới`]})}),o===`update`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:r})=>a(t,{type:`submit`,size:`md`,disabled:e,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`update`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(n,{}),`Cập nhật`]})})]})};export{o as TanStackActionsForm};
-//# sourceMappingURL=actions-form-PByL8_M5.mjs.map
+import{it as e}from"./tanstack-form-BhKAn9I0.mjs";import{Button as t}from"./ui/button.mjs";import{ArrowDownToLine as n,PlusIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({type:o=`create`})=>{let s=e();return a(`div`,{className:`flex h-8 items-center justify-between`,children:[i(s.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>i(t,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:e,className:`h-full min-w-32`,onClick:()=>s.reset(),children:`Hủy bỏ`})}),o===`create`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:n})=>a(t,{type:`submit`,size:`md`,disabled:e,isLoading:n,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`create`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(r,{}),`Thêm mới`]})}),o===`update`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:r})=>a(t,{type:`submit`,size:`md`,disabled:e,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`update`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(n,{}),`Cập nhật`]})})]})};export{o as TanStackActionsForm};
+//# sourceMappingURL=actions-form-CB0lZlE6.mjs.map

package/dist/{actions-form-PByL8_M5.mjs.map → actions-form-CB0lZlE6.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"actions-form-PByL8_M5.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0MAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAO,EAAuB,EACpC,OACE,EAAC,MAAD,CAAK,UAAU,wCAAf,SAAA,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,cAET,EAAC,EAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,EAAG,SAAA,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,CAYE,EAAC,EAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,CAYE,EAAC,EAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}
+{"version":3,"file":"actions-form-CB0lZlE6.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0MAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAO,EAAuB,EACpC,OACE,EAAC,MAAD,CAAK,UAAU,wCAAf,SAAA,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,cAET,EAAC,EAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,EAAG,SAAA,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,CAYE,EAAC,EAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,CAYE,EAAC,EAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}

package/dist/{actions-form-X46W7FVa.cjs → actions-form-DnlpVrgF.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tanstack-form-BiOihtxs.cjs");let n=require("lucide-react"),r=require("react/jsx-runtime");const i=({type:i=`create`})=>{let a=t.it();return(0,r.jsxs)(`div`,{className:`flex h-8 items-center justify-between`,children:[(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>(0,r.jsx)(e.Button,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>a.reset(),children:`Hủy bỏ`})}),i===`create`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`create`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.PlusIcon,{}),`Thêm mới`]})}),i===`update`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`update`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.ArrowDownToLine,{}),`Cập nhật`]})})]})};exports.TanStackActionsForm=i;
-//# sourceMappingURL=actions-form-X46W7FVa.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-DCB2addt.cjs");let n=require("lucide-react"),r=require("react/jsx-runtime");const i=({type:i=`create`})=>{let a=t.it();return(0,r.jsxs)(`div`,{className:`flex h-8 items-center justify-between`,children:[(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>(0,r.jsx)(e.Button,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>a.reset(),children:`Hủy bỏ`})}),i===`create`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`create`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.PlusIcon,{}),`Thêm mới`]})}),i===`update`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`update`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.ArrowDownToLine,{}),`Cập nhật`]})})]})};exports.TanStackActionsForm=i;
+//# sourceMappingURL=actions-form-DnlpVrgF.cjs.map

package/dist/{actions-form-X46W7FVa.cjs.map → actions-form-DnlpVrgF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"actions-form-X46W7FVa.cjs","names":["useTanStackFormContext","Button","PlusIcon","ArrowDownToLine"],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0IAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAOA,EAAAA,GAAuB,EACpC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,eAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,EAAG,SAAA,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,EAYE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,EAYE,EAAA,EAAA,IAAA,CAACE,EAAAA,gBAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}
+{"version":3,"file":"actions-form-DnlpVrgF.cjs","names":["useTanStackFormContext","Button","PlusIcon","ArrowDownToLine"],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0IAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAOA,EAAAA,GAAuB,EACpC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,eAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,EAAG,SAAA,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,EAYE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAVF,SAAA,EAYE,EAAA,EAAA,IAAA,CAACE,EAAAA,gBAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}

package/dist/{button-BGW-LZ3i.d.cts → button-BnoPktln.d.cts}

@@ -4,7 +4,7 @@ import { VariantProps } from "class-variance-authority";
  * Button variants definition for styling using class-variance-authority
  */
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "soft" | "outline" | "ghost" | "subtle" | null | undefined;
+  variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
   color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -155,4 +155,4 @@ interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {
 declare function Button({ className, variant, size, color, asChild, isLoading, children, disabled, type, innerClassName, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-BGW-LZ3i.d.cts.map
+//# sourceMappingURL=button-BnoPktln.d.cts.map

package/dist/{button-BGW-LZ3i.d.mts → button-BnoPktln.d.mts}

@@ -4,7 +4,7 @@ import { VariantProps } from "class-variance-authority";
  * Button variants definition for styling using class-variance-authority
  */
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "soft" | "outline" | "ghost" | "subtle" | null | undefined;
+  variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
   color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -155,4 +155,4 @@ interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {
 declare function Button({ className, variant, size, color, asChild, isLoading, children, disabled, type, innerClassName, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-BGW-LZ3i.d.mts.map
+//# sourceMappingURL=button-BnoPktln.d.mts.map

package/dist/{calendar-BNTvKnwd.d.cts → calendar-BkV5hTX2.d.mts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BGW-LZ3i.cjs";
+import { t as Button } from "./button-BnoPktln.mjs";
 import { DayButton, DayPicker } from "react-day-picker";
 //#region packages/components/ui/calendar.d.ts
 declare const CalendarDayButton: ({ className, day, modifiers, color: _, ...props }: React.ComponentProps<typeof DayButton>) => import("react").JSX.Element;
@@ -25,4 +25,4 @@ declare function Calendar({ className, classNames, showOutsideDays, captionLayou
 }): import("react").JSX.Element;
 //#endregion
 export { CalendarDayButton as n, Calendar as t };
-//# sourceMappingURL=calendar-BNTvKnwd.d.cts.map
+//# sourceMappingURL=calendar-BkV5hTX2.d.mts.map

package/dist/{calendar-DbaIaWr0.d.mts → calendar-iDMPT1kI.d.cts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BGW-LZ3i.mjs";
+import { t as Button } from "./button-BnoPktln.cjs";
 import { DayButton, DayPicker } from "react-day-picker";
 //#region packages/components/ui/calendar.d.ts
 declare const CalendarDayButton: ({ className, day, modifiers, color: _, ...props }: React.ComponentProps<typeof DayButton>) => import("react").JSX.Element;
@@ -25,4 +25,4 @@ declare function Calendar({ className, classNames, showOutsideDays, captionLayou
 }): import("react").JSX.Element;
 //#endregion
 export { CalendarDayButton as n, Calendar as t };
-//# sourceMappingURL=calendar-DbaIaWr0.d.mts.map
+//# sourceMappingURL=calendar-iDMPT1kI.d.cts.map

package/dist/{carousel-Bw-VhPR3.d.mts → carousel-D7VXWJ3S.d.mts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BGW-LZ3i.mjs";
+import { t as Button } from "./button-BnoPktln.mjs";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 //#region packages/components/ui/carousel.d.ts
 type CarouselApi = UseEmblaCarouselType[1];
@@ -42,4 +42,4 @@ declare function CarouselPrevious({ className, variant, size, ...props }: React.
 declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
 //#endregion
 export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
-//# sourceMappingURL=carousel-Bw-VhPR3.d.mts.map
+//# sourceMappingURL=carousel-D7VXWJ3S.d.mts.map

package/dist/{carousel-DRqMTyKS.d.cts → carousel-bBvM31sh.d.cts}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BGW-LZ3i.cjs";
+import { t as Button } from "./button-BnoPktln.cjs";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 //#region packages/components/ui/carousel.d.ts
 type CarouselApi = UseEmblaCarouselType[1];
@@ -42,4 +42,4 @@ declare function CarouselPrevious({ className, variant, size, ...props }: React.
 declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
 //#endregion
 export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
-//# sourceMappingURL=carousel-DRqMTyKS.d.cts.map
+//# sourceMappingURL=carousel-bBvM31sh.d.cts.map

package/dist/{checkbox-field-BG35eKvM.cjs → checkbox-field-CFPHAcwN.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-BiOihtxs.cjs");let n=require("react/jsx-runtime"),r=require("@tanstack/react-form");const i=({label:i,description:a,options:o,tooltip:s,helperText:c,orientation:l})=>{let u=t.rt(),d=(0,r.useStore)(u.form.store,({isSubmitting:e})=>e);return(0,n.jsxs)(t.X,{className:`gap-y-4 px-4`,children:[(0,n.jsxs)(t.G,{orientation:l,children:[(0,n.jsxs)(t.K,{children:[(0,n.jsxs)(t.Z,{children:[i,s&&(0,n.jsx)(t.nt,{tooltip:s})]}),(0,n.jsx)(t.J,{children:a}),(0,n.jsx)(t.$,{isShow:!!c,children:c})]}),(0,n.jsx)(t.q,{children:(0,n.jsx)(t.X,{className:`flex flex-col gap-y-2`,children:o.map(r=>(0,n.jsxs)(t.G,{orientation:`horizontal`,children:[(0,n.jsx)(e.Checkbox,{id:`${u.name}-${r.value}`,name:u.name,checked:u.state.value?.includes(r.value)??!1,disabled:d,onCheckedChange:e=>{if(e&&u.state.value!==null)u.pushValue(r.value);else if(e&&u.state.value===null)u.setValue([r.value]);else if(!e&&u.state.value!==null){let e=u.state.value.indexOf(r.value);e>-1&&u.removeValue(e)}else u.setValue(null)}}),(0,n.jsx)(t.Z,{htmlFor:`${u.name}-${r.value}`,className:`text-text-positive`,children:r.label})]},r.value))})})]}),(0,n.jsx)(t.et,{})]})};exports.CheckboxField=i;
-//# sourceMappingURL=checkbox-field-BG35eKvM.cjs.map
+const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-DCB2addt.cjs");let n=require("react/jsx-runtime"),r=require("@tanstack/react-form");const i=({label:i,description:a,options:o,tooltip:s,helperText:c,orientation:l})=>{let u=t.rt(),d=(0,r.useStore)(u.form.store,({isSubmitting:e})=>e);return(0,n.jsxs)(t.X,{className:`gap-y-4 px-4`,children:[(0,n.jsxs)(t.G,{orientation:l,children:[(0,n.jsxs)(t.K,{children:[(0,n.jsxs)(t.Z,{children:[i,s&&(0,n.jsx)(t.nt,{tooltip:s})]}),(0,n.jsx)(t.J,{children:a}),(0,n.jsx)(t.$,{isShow:!!c,children:c})]}),(0,n.jsx)(t.q,{children:(0,n.jsx)(t.X,{className:`flex flex-col gap-y-2`,children:o.map(r=>(0,n.jsxs)(t.G,{orientation:`horizontal`,children:[(0,n.jsx)(e.Checkbox,{id:`${u.name}-${r.value}`,name:u.name,checked:u.state.value?.includes(r.value)??!1,disabled:d,onCheckedChange:e=>{if(e&&u.state.value!==null)u.pushValue(r.value);else if(e&&u.state.value===null)u.setValue([r.value]);else if(!e&&u.state.value!==null){let e=u.state.value.indexOf(r.value);e>-1&&u.removeValue(e)}else u.setValue(null)}}),(0,n.jsx)(t.Z,{htmlFor:`${u.name}-${r.value}`,className:`text-text-positive`,children:r.label})]},r.value))})})]}),(0,n.jsx)(t.et,{})]})};exports.CheckboxField=i;
+//# sourceMappingURL=checkbox-field-CFPHAcwN.cjs.map

package/dist/{checkbox-field-BG35eKvM.cjs.map → checkbox-field-CFPHAcwN.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-BG35eKvM.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","Checkbox","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"oJA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQA,EAAAA,GAAyC,EACjD,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAoB,cAApB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAY,UAAU,wBACnB,SAAA,EAAQ,IAAI,IAET,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAA0B,YAAY,aAAtC,SAAA,EACE,EAAA,EAAA,IAAA,CAACO,EAAAA,SAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,qBAC7D,SAAA,EAAO,KACE,CAAA,CACP,CAtBK,EAAA,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"checkbox-field-CFPHAcwN.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","Checkbox","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"oJA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQA,EAAAA,GAAyC,EACjD,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAoB,cAApB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAY,UAAU,wBACnB,SAAA,EAAQ,IAAI,IAET,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAA0B,YAAY,aAAtC,SAAA,EACE,EAAA,EAAA,IAAA,CAACO,EAAAA,SAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,qBAC7D,SAAA,EAAO,KACE,CAAA,CACP,CAtBK,EAAA,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{checkbox-field-C-NyMjEm.mjs → checkbox-field-DodKeFS_.mjs}

@@ -1,2 +1,2 @@
-import{$ as e,G as t,J as n,K as r,X as i,Z as a,et as o,nt as s,q as c,rt as l}from"./tanstack-form-Do6xL2kv.mjs";import{Checkbox as u}from"./ui/checkbox.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useStore as p}from"@tanstack/react-form";const m=({label:m,description:h,options:g,tooltip:_,helperText:v,orientation:y})=>{let b=l(),x=p(b.form.store,({isSubmitting:e})=>e);return f(i,{className:`gap-y-4 px-4`,children:[f(t,{orientation:y,children:[f(r,{children:[f(a,{children:[m,_&&d(s,{tooltip:_})]}),d(n,{children:h}),d(e,{isShow:!!v,children:v})]}),d(c,{children:d(i,{className:`flex flex-col gap-y-2`,children:g.map(e=>f(t,{orientation:`horizontal`,children:[d(u,{id:`${b.name}-${e.value}`,name:b.name,checked:b.state.value?.includes(e.value)??!1,disabled:x,onCheckedChange:t=>{if(t&&b.state.value!==null)b.pushValue(e.value);else if(t&&b.state.value===null)b.setValue([e.value]);else if(!t&&b.state.value!==null){let t=b.state.value.indexOf(e.value);t>-1&&b.removeValue(t)}else b.setValue(null)}}),d(a,{htmlFor:`${b.name}-${e.value}`,className:`text-text-positive`,children:e.label})]},e.value))})})]}),d(o,{})]})};export{m as CheckboxField};
-//# sourceMappingURL=checkbox-field-C-NyMjEm.mjs.map
+import{$ as e,G as t,J as n,K as r,X as i,Z as a,et as o,nt as s,q as c,rt as l}from"./tanstack-form-BhKAn9I0.mjs";import{Checkbox as u}from"./ui/checkbox.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useStore as p}from"@tanstack/react-form";const m=({label:m,description:h,options:g,tooltip:_,helperText:v,orientation:y})=>{let b=l(),x=p(b.form.store,({isSubmitting:e})=>e);return f(i,{className:`gap-y-4 px-4`,children:[f(t,{orientation:y,children:[f(r,{children:[f(a,{children:[m,_&&d(s,{tooltip:_})]}),d(n,{children:h}),d(e,{isShow:!!v,children:v})]}),d(c,{children:d(i,{className:`flex flex-col gap-y-2`,children:g.map(e=>f(t,{orientation:`horizontal`,children:[d(u,{id:`${b.name}-${e.value}`,name:b.name,checked:b.state.value?.includes(e.value)??!1,disabled:x,onCheckedChange:t=>{if(t&&b.state.value!==null)b.pushValue(e.value);else if(t&&b.state.value===null)b.setValue([e.value]);else if(!t&&b.state.value!==null){let t=b.state.value.indexOf(e.value);t>-1&&b.removeValue(t)}else b.setValue(null)}}),d(a,{htmlFor:`${b.name}-${e.value}`,className:`text-text-positive`,children:e.label})]},e.value))})})]}),d(o,{})]})};export{m as CheckboxField};
+//# sourceMappingURL=checkbox-field-DodKeFS_.mjs.map

package/dist/{checkbox-field-C-NyMjEm.mjs.map → checkbox-field-DodKeFS_.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-C-NyMjEm.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"kQA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQ,EAAyC,EACjD,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAApB,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,UAAU,wBACnB,SAAA,EAAQ,IAAI,GAET,EAAC,EAAD,CAA0B,YAAY,aAAtC,SAAA,CACE,EAAC,EAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,EACD,EAAC,EAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,qBAC7D,SAAA,EAAO,KACE,CAAA,CACP,CAtBK,EAAA,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"checkbox-field-DodKeFS_.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"kQA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQ,EAAyC,EACjD,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAApB,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,UAAU,wBACnB,SAAA,EAAQ,IAAI,GAET,EAAC,EAAD,CAA0B,YAAY,aAAtC,SAAA,CACE,EAAC,EAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,EACD,EAAC,EAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,qBAC7D,SAAA,EAAO,KACE,CAAA,CACP,CAtBK,EAAA,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{combobox-field-ROYquFD8.cjs → combobox-field-D7cZ8fhZ.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./ui/popover.cjs"),i=require("./tanstack-form-BiOihtxs.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("radix-ui"),u=require("@tanstack/react-form"),d=require("@customafk/react-toolkit/hooks/useMobile");const f=(0,o.memo)(({label:f,description:p,placeholder:m,tooltip:h,helperText:g,orientation:_=`responsive`,options:v,required:y=!1,disabled:b=!1,clearable:x=!1,showErrorMessage:S=!0,modal:C})=>{let w=(0,o.useId)(),T=i.rt(),E=(0,d.useIsMobile)(),[D,O]=(0,o.useState)(!1),[k,A]=(0,o.useState)(!1),j=(0,u.useStore)(T.form.store,({isSubmitting:e})=>e),M=b||j,N=T.state.meta.isDirty||T.state.meta.isTouched,P=N&&!T.state.meta.isValid,F=y&&T.state.value===null,I=x&&!!T.state.value&&!M,L=T.state.meta.errors.length>0,R=v.find(({value:e})=>e===T.state.value)?.label,z=()=>{T.handleChange(null),T.handleBlur()},B=t=>(0,c.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:M,"aria-invalid":P?!0:void 0,"aria-describedby":w,className:(0,s.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,I&&`pr-8`,!T.state.value&&`text-text-positive-muted`,P&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:R?(0,c.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:R}):(0,c.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:m})}),V=e=>(0,c.jsxs)(n.Command,{className:`border-none`,children:[(0,c.jsx)(n.CommandInput,{placeholder:m??`Tìm kiếm…`}),(0,c.jsxs)(n.CommandList,{children:[(0,c.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,c.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:v.map(({value:t,label:r})=>(0,c.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,c.jsxs)(i.X,{className:`gap-y-4 px-4`,children:[(0,c.jsxs)(i.G,{orientation:_,"data-invalid":P,children:[(0,c.jsxs)(i.K,{children:[(0,c.jsxs)(i.Z,{"aria-required":F,htmlFor:T.name,children:[f,h&&(0,c.jsx)(i.nt,{tooltip:h})]}),(0,c.jsx)(i.J,{children:p})]}),(0,c.jsx)(i.q,{className:`flex justify-end`,children:(0,c.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,c.jsxs)(`div`,{className:`relative`,children:[E?(0,c.jsxs)(c.Fragment,{children:[B(()=>O(!0)),(0,c.jsx)(t.Dialog,{open:D,onOpenChange:e=>{O(e),e||T.handleBlur()},children:(0,c.jsxs)(t.DialogPortal,{children:[(0,c.jsx)(t.DialogOverlay,{}),(0,c.jsxs)(l.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,s.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,c.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,c.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:f}),(0,c.jsx)(t.DialogClose,{asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,c.jsx)(a.XIcon,{size:16})})})]}),(0,c.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[I&&(0,c.jsx)(t.DialogClose,{asChild:!0,children:(0,c.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:z,children:[(0,c.jsx)(a.XIcon,{size:14}),`Xóa lựa chọn`]})}),V(e=>{T.handleChange(e),O(!1),T.handleBlur()})]}),(0,c.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,c.jsxs)(r.Popover,{open:k,modal:C,onOpenChange:e=>{A(e),e||T.handleBlur()},children:[(0,c.jsx)(r.PopoverTrigger,{asChild:!0,children:B()}),(0,c.jsx)(r.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:V(e=>{T.handleChange(e),A(!1),T.handleBlur()})})]}),I&&(0,c.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:z,children:(0,c.jsx)(a.XIcon,{"aria-hidden":`true`})})]}),N&&S&&L&&(0,c.jsx)(i.Y,{id:w,className:`mt-1`,errors:T.state.meta.errors}),(0,c.jsx)(i.$,{isShow:!!g,children:g})]})})]}),(0,c.jsx)(i.et,{})]})});f.displayName=`ComboboxField`,exports.ComboboxField=f;
-//# sourceMappingURL=combobox-field-ROYquFD8.cjs.map
+const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./ui/popover.cjs"),i=require("./tanstack-form-DCB2addt.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("radix-ui"),u=require("@tanstack/react-form"),d=require("@customafk/react-toolkit/hooks/useMobile");const f=(0,o.memo)(({label:f,description:p,placeholder:m,tooltip:h,helperText:g,orientation:_=`responsive`,options:v,required:y=!1,disabled:b=!1,clearable:x=!1,showErrorMessage:S=!0,modal:C})=>{let w=(0,o.useId)(),T=i.rt(),E=(0,d.useIsMobile)(),[D,O]=(0,o.useState)(!1),[k,A]=(0,o.useState)(!1),j=(0,u.useStore)(T.form.store,({isSubmitting:e})=>e),M=b||j,N=T.state.meta.isDirty||T.state.meta.isTouched,P=N&&!T.state.meta.isValid,F=y&&T.state.value===null,I=x&&!!T.state.value&&!M,L=T.state.meta.errors.length>0,R=v.find(({value:e})=>e===T.state.value)?.label,z=()=>{T.handleChange(null),T.handleBlur()},B=t=>(0,c.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:M,"aria-invalid":P?!0:void 0,"aria-describedby":w,className:(0,s.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,I&&`pr-8`,!T.state.value&&`text-text-positive-muted`,P&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:R?(0,c.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:R}):(0,c.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:m})}),V=e=>(0,c.jsxs)(n.Command,{className:`border-none`,children:[(0,c.jsx)(n.CommandInput,{placeholder:m??`Tìm kiếm…`}),(0,c.jsxs)(n.CommandList,{children:[(0,c.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,c.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:v.map(({value:t,label:r})=>(0,c.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,c.jsxs)(i.X,{className:`gap-y-4 px-4`,children:[(0,c.jsxs)(i.G,{orientation:_,"data-invalid":P,children:[(0,c.jsxs)(i.K,{children:[(0,c.jsxs)(i.Z,{"aria-required":F,htmlFor:T.name,children:[f,h&&(0,c.jsx)(i.nt,{tooltip:h})]}),(0,c.jsx)(i.J,{children:p})]}),(0,c.jsx)(i.q,{className:`flex justify-end`,children:(0,c.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,c.jsxs)(`div`,{className:`relative`,children:[E?(0,c.jsxs)(c.Fragment,{children:[B(()=>O(!0)),(0,c.jsx)(t.Dialog,{open:D,onOpenChange:e=>{O(e),e||T.handleBlur()},children:(0,c.jsxs)(t.DialogPortal,{children:[(0,c.jsx)(t.DialogOverlay,{}),(0,c.jsxs)(l.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,s.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,c.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,c.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:f}),(0,c.jsx)(t.DialogClose,{asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,c.jsx)(a.XIcon,{size:16})})})]}),(0,c.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[I&&(0,c.jsx)(t.DialogClose,{asChild:!0,children:(0,c.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:z,children:[(0,c.jsx)(a.XIcon,{size:14}),`Xóa lựa chọn`]})}),V(e=>{T.handleChange(e),O(!1),T.handleBlur()})]}),(0,c.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,c.jsxs)(r.Popover,{open:k,modal:C,onOpenChange:e=>{A(e),e||T.handleBlur()},children:[(0,c.jsx)(r.PopoverTrigger,{asChild:!0,children:B()}),(0,c.jsx)(r.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:V(e=>{T.handleChange(e),A(!1),T.handleBlur()})})]}),I&&(0,c.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:z,children:(0,c.jsx)(a.XIcon,{"aria-hidden":`true`})})]}),N&&S&&L&&(0,c.jsx)(i.Y,{id:w,className:`mt-1`,errors:T.state.meta.errors}),(0,c.jsx)(i.$,{isShow:!!g,children:g})]})})]}),(0,c.jsx)(i.et,{})]})});f.displayName=`ComboboxField`,exports.ComboboxField=f;
+//# sourceMappingURL=combobox-field-D7cZ8fhZ.cjs.map