@customafk/lunas-ui 0.2.39 → 0.2.41

package/dist/tanstack-form-Ds_Zjt20.js

@@ -0,0 +1,2 @@
+import{ArrowDownToLine as e,AtSignIcon as t,BanIcon as n,CalendarDaysIcon as r,CheckIcon as i,ChevronDownIcon as a,CopyIcon as o,EyeIcon as s,EyeOffIcon as c,HelpCircleIcon as l,InfoIcon as u,Loader2Icon as d,PackagePlusIcon as f,PlusIcon as p,Trash2Icon as m,XIcon as h}from"lucide-react";import{cn as g}from"@customafk/react-toolkit/utils";import{cva as _}from"class-variance-authority";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";import{memo as x,useCallback as S,useEffect as C,useId as w,useMemo as T,useRef as E,useState as D}from"react";import{endOfToday as O,endOfTomorrow as k,endOfYesterday as A,format as j,lastDayOfMonth as M,startOfMonth as ee,subDays as N}from"@customafk/react-toolkit/date-fns";import{Tooltip as P,TooltipContent as F,TooltipTrigger as te}from"@/components/ui/tooltip";import{Dialog as I,Label as ne,Separator as re,Switch as ie}from"radix-ui";import{useIsMobile as L}from"@customafk/react-toolkit/hooks/useMobile";import{Button as R}from"@/components/ui/button";import{Separator as ae}from"@/components/ui/separator";import{Dialog as oe,DialogClose as z,DialogContent as se,DialogOverlay as ce,DialogPortal as le,DialogTitle as ue}from"@/components/ui/dialog";import{Command as de,CommandEmpty as fe,CommandGroup as pe,CommandInput as me,CommandItem as he,CommandList as ge}from"@/components/ui/command";import{Checkbox as _e}from"@/components/ui/checkbox";import{Input as B}from"@/components/ui/input";import{Label as V}from"@/components/ui/label";import{Popover as ve,PopoverContent as ye,PopoverTrigger as be}from"@/components/ui/popover";import{Select as xe,SelectContent as Se,SelectItem as Ce,SelectTrigger as we,SelectValue as Te}from"@/components/ui/select";import{createFormHook as Ee,createFormHookContexts as De}from"@tanstack/react-form";import{useSelector as H}from"@tanstack/react-store";import{Switch as Oe}from"@/components/ui/switch";import{Drawer as ke,DrawerClose as Ae,DrawerContent as je,DrawerHeader as Me,DrawerTitle as Ne}from"@/components/ui/drawer";import{Calendar as Pe}from"@/components/ui/calendar";import{RadioGroup as Fe,RadioGroupItem as Ie}from"@/components/ui/radio-group";import{NumberInput as Le}from"@/components/ui/inputs/number-input";import{Textarea as Re}from"@/components/ui/textarea";import{Field as ze,FieldContent as Be,FieldContentMain as Ve,FieldDescription as He,FieldError as Ue,FieldGroup as We,FieldLabel as Ge,FieldNote as Ke,FieldSeparator as qe,FieldTooltip as Je}from"@/components/features/tanstack-form/components/ui/field";import{TextEditor as Ye}from"@/components/features/text-editor";import{CloseButton as Xe}from"@/components/ui/buttons/close";function Ze({width:e,className:t,children:n}){let r=e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0};return y(`div`,{"data-slot":`array-col`,style:r,className:t,children:n})}function Qe({className:e,children:t}){return b(`div`,{"data-slot":`array-header-row`,className:g(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,y(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function $e({defaultRow:e,children:t,addLabel:n=`Thêm hàng`,className:r}){let i=$(),a=i.state.value??[],o=S(()=>{i.pushValue({...e})},[i,e]),s=S(e=>{i.removeValue(e)},[i]);return b(`div`,{"data-slot":`simple-array-field`,className:g(`flex flex-col gap-2`,r),children:[a.map((e,n)=>b(`div`,{className:`flex items-start gap-2`,children:[t(n),y(R,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>s(n),children:y(m,{size:14})})]},n)),y(`div`,{children:b(R,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:o,children:[y(p,{size:13}),n]})})]})}function et({className:e,children:t,...n}){return b(ne.Root,{"data-slot":`label`,className:g(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required:*:data-[slot=required-indicator]:inline-block`,e),...n,children:[y(`span`,{className:`flex items-center gap-1`,children:t}),y(`span`,{"data-slot":`required-indicator`,className:`hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white`,children:`Bắt buộc`})]})}const tt=_(`group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center gap-4`,`*:data-[slot=field-content]:basis-1/2`,`*:data-[slot=field-content-main]:flex-1`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-content]:basis-1/2`,`@md/field-group:*:data-[slot=field-content-main]:basis-1/2`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),nt=x(({className:e,...t})=>y(`fieldset`,{"data-slot":`field-set`,className:g(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));nt.displayName=`FieldSet`;const rt=x(({className:e,variant:t=`legend`,...n})=>y(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:g(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));rt.displayName=`FieldLegend`;const U=x(({className:e,...t})=>y(`div`,{"data-slot":`field-group`,className:g(`group/field-group @container/field-group`,`flex flex-col gap-7 pt-4`,`data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));U.displayName=`FieldGroup`;const W=x(({className:e,orientation:t=`vertical`,...n})=>y(`div`,{"data-slot":`field`,"data-orientation":t,className:g(tt({orientation:t}),e),...n}));W.displayName=`Field`;const G=x(({className:e,...t})=>y(`div`,{"data-slot":`field-content`,className:g(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));G.displayName=`FieldContent`;const K=x(({className:e,...t})=>y(`div`,{"data-slot":`field-content-main`,className:g(`relative`,e),...t}));K.displayName=`FieldContentMain`;const q=x(({className:e,...t})=>y(et,{"data-slot":`field-label`,className:g(`group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));q.displayName=`FieldLabel`;const it=x(({className:e,...t})=>y(`div`,{"data-slot":`field-label`,className:g(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));it.displayName=`FieldTitle`;const J=x(({className:e,...t})=>y(`p`,{"data-slot":`field-description`,className:g(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));J.displayName=`FieldDescription`;const Y=x(({isShow:e=!0,className:t,children:n,...r})=>e===!1?null:b(`div`,{"data-slot":`field-note`,className:g(`flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs`,t),...r,children:[y(u,{size:12,className:`mt-0.5 shrink-0 text-primary/70`}),y(`span`,{children:n})]}));Y.displayName=`FieldNote`;const X=x(({tooltip:e})=>b(P,{children:[y(te,{asChild:!0,children:b(`button`,{type:`button`,tabIndex:-1,className:`inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none`,children:[y(l,{size:13,"aria-hidden":`true`}),y(`span`,{className:`sr-only`,children:`Thêm thông tin`})]})}),y(F,{side:`top`,className:`max-w-xs text-balance`,children:e})]}));X.displayName=`FieldTooltip`;const Z=x(({children:e,className:t,...n})=>b(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:g(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,t),...n,children:[y(ae,{className:`absolute inset-0 top-1/2`}),e&&y(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));Z.displayName=`FieldSeparator`;const Q=x(({className:e,children:t,errors:n,requiredMessage:r=`Trường này là bắt buộc`,...i})=>{let a=T(()=>{let e=e=>e.code===`invalid_type`?r:e.message;return t||(n?n?.length===1&&n[0]?.message?y(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:y(`p`,{children:e(n[0])})}):y(`ul`,{className:`flex list-none flex-col`,children:n.map(t=>typeof t==`string`?y(`li`,{children:t},t):t?.message?y(`li`,{children:e(t)},t.code??t.message):null)}):null)},[t,n,r]);return a?y(`div`,{role:`alert`,"data-slot":`field-error`,className:g(`w-full font-medium text-danger-strong text-xs`,e),...i,children:a}):null});Q.displayName=`FieldError`;const at=({label:e,required:t,disabled:n,variant:r=`checkbox`})=>{let i=w(),{form:a,name:o,state:s,handleBlur:c,handleChange:l}=$(),u=H(a.store,({isSubmitting:e})=>e),d=s.meta.isTouched&&!s.meta.isValid,f=s.value??!1,p=n||u,m=S(e=>{u||l(e)},[u,l]);return b(`div`,{className:`flex flex-col gap-1.5`,children:[b(`div`,{className:`flex items-center gap-2 h-9`,children:[y(r===`switch`?Oe:_e,{id:i,name:o,checked:f,disabled:p,"aria-invalid":d,onBlur:c,onCheckedChange:m}),e&&b(V,{htmlFor:i,className:`cursor-pointer`,children:[e,t&&y(`span`,{className:`text-danger-strong`,children:`*`})]})]}),d&&y(Q,{errors:s.meta.errors})]})},ot=({label:e,placeholder:t,required:n,disabled:r,options:i})=>{let a=w(),{form:o,name:s,state:c,handleBlur:l,handleChange:u}=$(),d=H(o.store,({isSubmitting:e})=>e),f=L(),[p,m]=D(!1),h=c.meta.isTouched&&!c.meta.isValid,_=r||d,v=i.find(({value:e})=>e===c.value)?.label,x=b(de,{children:[y(me,{placeholder:t??`Tìm kiếm…`}),b(ge,{children:[y(fe,{children:`Không tìm thấy kết quả.`}),y(pe,{children:i.map(e=>y(he,{value:e.label,onSelect:()=>{u(e.value===c.value?null:e.value),m(!1)},children:e.label},e.value))})]})]});return f?b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:a,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),y(R,{id:a,type:`button`,variant:`outline`,color:`muted`,disabled:_,"aria-invalid":h,className:g(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!c.value&&`text-text-positive-muted`,h&&`outline-danger bg-danger-bg-subtle`),onBlur:l,onClick:()=>m(!0),children:v??y(`span`,{className:`text-text-positive-muted`,children:t})}),y(ke,{open:p,onOpenChange:m,direction:`bottom`,children:b(je,{children:[y(Me,{children:y(Ne,{children:e??t??`Tìm kiếm…`})}),y(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:x})]})}),h&&y(Q,{errors:c.meta.errors})]}):b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:a,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),b(ve,{children:[y(be,{asChild:!0,children:y(R,{id:a,variant:`outline`,color:`muted`,size:`lg`,disabled:_,"aria-invalid":h,className:g(`flex w-full items-center justify-start rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,!c.value&&`text-text-positive-muted`),children:v??y(`span`,{className:`text-text-positive-muted`,children:t})})}),y(ye,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:l,children:x})]}),h&&y(Q,{errors:c.meta.errors})]})},st=({label:e,placeholder:t,required:n,disabled:i,minDate:a,maxDate:o})=>{let s=w(),{form:c,name:l,state:u,handleBlur:d,handleChange:f}=$(),p=H(c.store,({isSubmitting:e})=>e),m=u.meta.isTouched&&!u.meta.isValid;return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:s,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),b(ve,{children:[y(be,{asChild:!0,children:b(R,{id:s,variant:`outline`,color:`muted`,size:`lg`,disabled:i||p,"aria-invalid":m,className:g(`flex w-full items-center justify-between rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,u.value===null&&`text-text-positive-muted`),children:[y(`span`,{children:u.value?j(u.value,`PPP`):t??`Select date`}),y(r,{strokeWidth:1})]})}),y(ye,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:d,children:y(Pe,{mode:`single`,selected:u.value??void 0,hidden:{before:a??new Date(1900,0,1),after:o??new Date(2100,11,31)},onSelect:e=>{e&&f(e)}})})]}),m&&y(Q,{errors:u.meta.errors})]})},ct=({label:e,required:t,disabled:n,options:r,orientation:i=`vertical`})=>{let{form:a,name:o,state:s,handleBlur:c,handleChange:l}=$(),u=H(a.store,({isSubmitting:e})=>e),d=s.meta.isTouched&&!s.meta.isValid,f=n||u;return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{children:[e,t&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),y(Fe,{name:o,value:s.value??``,disabled:f,"aria-invalid":d,className:i===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:l,onBlur:c,children:r.map(e=>b(`div`,{className:`flex items-center gap-2`,children:[y(Ie,{id:`${o}-${e.value}`,value:e.value}),y(V,{htmlFor:`${o}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),d&&y(Q,{errors:s.meta.errors})]})},lt=({label:e,placeholder:n,required:r,maxLength:i,disabled:a})=>{let o=w(),{form:s,name:c,state:l,handleBlur:u,handleChange:d}=$(),f=H(s.store,({isSubmitting:e})=>e),p=l.meta.isTouched&&!l.meta.isValid,m=S(({target:{value:e}})=>{f||i&&e.length>i||d(e||null)},[f,i,d]);return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:o,children:[e,r&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),b(`div`,{className:`relative`,children:[y(B,{id:o,name:c,type:`email`,value:l.value??``,"aria-invalid":p,autoComplete:`email`,placeholder:n,disabled:a||f,className:g(`pl-9`),onBlur:u,onChange:m}),y(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted`,children:y(t,{size:14})})]}),p&&y(Q,{errors:l.meta.errors})]})},ut=({label:e,placeholder:t,required:n,unit:r,allowNegative:i,disabled:a})=>{let o=w(),{form:s,state:c,handleBlur:l,handleChange:u}=$(),d=H(s.store,({isSubmitting:e})=>e),f=c.meta.isTouched&&!c.meta.isValid,p=S(e=>{d||u(e)},[d,u]);return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:o,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),y(Le,{id:o,value:c.value,placeholder:t,unitText:r,allowNegative:i,disabled:a||d,onBlur:l,onValueChange:p}),f&&y(Q,{errors:c.meta.errors})]})},dt=({label:e,placeholder:t,required:n,disabled:r})=>{let i=w(),{form:a,name:o,state:l,handleBlur:u,handleChange:d}=$(),f=H(a.store,({isSubmitting:e})=>e),[p,m]=D(!1),h=l.meta.isTouched&&!l.meta.isValid,g=S(()=>m(e=>!e),[]),_=S(({target:{value:e}})=>{f||d(e||null)},[f,d]);return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:i,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),b(`div`,{className:`relative`,children:[y(B,{id:i,name:o,type:p?`text`:`password`,value:l.value??``,"aria-invalid":h,autoComplete:`current-password`,placeholder:t,disabled:r||f,className:`pr-9`,onBlur:u,onChange:_}),y(`button`,{type:`button`,tabIndex:-1,"aria-label":p?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":p,"aria-controls":i,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:r||f,onClick:g,children:y(p?c:s,{size:16,"aria-hidden":`true`})})]}),h&&y(Q,{errors:l.meta.errors})]})},ft=({label:e,placeholder:t,required:n,options:r})=>{let i=w(),{state:a,handleBlur:o,handleChange:s}=$(),c=L(),[l,u]=D(!1),d=a.meta.isTouched&&!a.meta.isValid,p=r.find(e=>e.value===a.value)?.label;return c?b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:i,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),y(R,{id:i,type:`button`,variant:`outline`,color:`muted`,className:g(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!a.value&&`text-text-positive-muted`,d&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":d,onBlur:o,onClick:()=>u(!0),children:p??y(`span`,{className:`text-text-positive-muted`,children:t})}),y(ke,{open:l,onOpenChange:u,direction:`bottom`,children:b(je,{children:[y(Me,{children:y(Ne,{children:e??t??`Select an option`})}),y(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:r.length>0?r.map(e=>y(Ae,{asChild:!0,children:y(`button`,{type:`button`,className:g(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,a.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{s(e.value),u(!1)},children:e.label})},e.value)):b(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[y(f,{strokeWidth:1}),`No options available`]})})]})}),d&&y(Q,{errors:a.meta.errors})]}):b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:i,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),b(xe,{value:a.value??``,onValueChange:s,children:[y(we,{id:i,"aria-invalid":d?`true`:void 0,onBlur:o,children:y(Te,{placeholder:t})}),y(Se,{children:r.length>0?r.map(e=>y(Ce,{value:e.value,children:e.label},e.value)):b(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[y(f,{strokeWidth:1}),`No options available`]})})]}),d&&y(Q,{errors:a.meta.errors})]})},pt=({label:e,placeholder:t,required:n,maxLength:r,rows:i,disabled:a})=>{let o=w(),{form:s,name:c,state:l,handleBlur:u,handleChange:d}=$(),f=H(s.store,({isSubmitting:e})=>e),p=l.meta.isTouched&&!l.meta.isValid,m=S(({target:{value:e}})=>{f||r&&e.length>r||d(e||null)},[f,r,d]);return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:o,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),y(Re,{id:o,name:c,value:l.value??``,"aria-invalid":p,placeholder:t,rows:i,disabled:a||f,onBlur:u,onChange:m}),p&&y(Q,{errors:l.meta.errors})]})},mt=({label:e,placeholder:t,required:n,maxLength:r,disabled:i})=>{let a=w(),{form:o,name:s,state:c,handleBlur:l,handleChange:u}=$(),d=H(o.store,({isSubmitting:e})=>e),f=c.meta.isTouched&&!c.meta.isValid,p=S(({target:{value:e}})=>{d||r&&e.length>r||u(e||null)},[d,r,u]);return b(`div`,{className:`flex flex-col gap-1.5`,children:[e&&b(V,{htmlFor:a,children:[e,n&&y(`span`,{className:`text-danger-strong`,children:`*`})]}),y(B,{id:a,name:s,value:c.value??``,"aria-invalid":f,placeholder:t,autoComplete:`off`,disabled:i||d,onBlur:l,onChange:p}),f&&y(Q,{errors:c.meta.errors})]})},ht=({label:e,description:t,options:n,tooltip:r,helperText:i,orientation:a})=>{let o=$(),s=H(o.form.store,({isSubmitting:e})=>e);return b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:a,children:[b(G,{children:[b(q,{children:[e,r&&y(X,{tooltip:r})]}),y(J,{children:t}),y(Y,{isShow:!!i,children:i})]}),y(K,{children:y(U,{className:`flex flex-col gap-y-2`,children:n.map(e=>b(W,{orientation:`horizontal`,children:[y(_e,{id:`${o.name}-${e.value}`,name:o.name,checked:o.state.value?.includes(e.value)??!1,disabled:s,onCheckedChange:t=>{if(t&&o.state.value!==null)o.pushValue(e.value);else if(t&&o.state.value===null)o.setValue([e.value]);else if(!t&&o.state.value!==null){let t=o.state.value.indexOf(e.value);t>-1&&o.removeValue(t)}else o.setValue(null)}}),y(q,{htmlFor:`${o.name}-${e.value}`,className:`text-text-positive`,children:e.label})]},e.value))})})]}),y(Z,{})]})},gt=x(({label:e,description:t,placeholder:n,tooltip:r,helperText:i,orientation:a=`responsive`,options:o,required:s=!1,disabled:c=!1,clearable:l=!1,showErrorMessage:u=!0})=>{let d=w(),f=$(),p=L(),[m,_]=D(!1),[x,S]=D(!1),C=H(f.form.store,({isSubmitting:e})=>e),T=c||C,E=f.state.meta.isDirty||f.state.meta.isTouched,O=E&&!f.state.meta.isValid,k=s&&f.state.value===null,A=l&&!!f.state.value&&!T,j=o.find(({value:e})=>e===f.state.value)?.label,M=()=>{f.handleChange(null),f.handleBlur()},ee=e=>y(R,{variant:`outline`,color:`muted`,size:`lg`,disabled:T,"aria-invalid":O?!0:void 0,"aria-describedby":d,className:g(`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`,A&&`pr-8`,!f.state.value&&`text-text-positive-muted`,O&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:e,children:j?y(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:j}):y(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:n})}),N=e=>b(de,{className:`border-none`,children:[y(me,{placeholder:n??`Tìm kiếm…`}),b(ge,{children:[y(fe,{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.`}),y(pe,{className:`max-h-60 overflow-y-auto`,children:o.map(({value:t,label:n})=>y(he,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:a,"data-invalid":O,children:[b(G,{children:[b(q,{"aria-required":k,htmlFor:f.name,children:[e,r&&y(X,{tooltip:r})]}),y(J,{children:t})]}),y(K,{className:`flex justify-end`,children:b(`div`,{className:`flex w-full flex-col`,children:[b(`div`,{className:`relative`,children:[p?b(v,{children:[ee(()=>_(!0)),y(oe,{open:m,onOpenChange:e=>{_(e),e||f.handleBlur()},children:b(le,{children:[y(ce,{}),b(I.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:g(`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:[b(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[y(`span`,{className:`font-semibold text-sm text-text-positive`,children:e}),y(z,{asChild:!0,children:y(`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:y(h,{size:16})})})]}),b(`div`,{className:`flex flex-col overflow-y-auto`,children:[A&&y(z,{asChild:!0,children:b(`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:M,children:[y(h,{size:14}),`Xóa lựa chọn`]})}),N(e=>{f.handleChange(e),_(!1),f.handleBlur()})]}),y(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):b(ve,{open:x,onOpenChange:e=>{S(e),e||f.handleBlur()},children:[y(be,{asChild:!0,children:ee()}),y(ye,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:N(e=>{f.handleChange(e),S(!1),f.handleBlur()})})]}),A&&y(`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:M,children:y(h,{"aria-hidden":`true`})})]}),E&&u&&y(Q,{id:d,className:`mt-1`,errors:f.state.meta.errors}),y(Y,{isShow:!!i,children:i})]})})]}),y(Z,{})]})});gt.displayName=`ComboboxField`;const _t=x(({label:e,description:t,placeholder:n,orientation:i=`responsive`,tooltip:a,helperText:o,showErrorMessage:s=!0,required:c=!1,disabled:l=!1,minDate:u,maxDate:d})=>{let f=w(),p=$(),[m,h]=D(!1),_=H(p.form.store,({isSubmitting:e})=>e),v=l||_,x=p.state.meta.isDirty||p.state.meta.isTouched,S=x&&!p.state.meta.isValid,C=c&&p.state.value===null,T=e=>{p.handleChange(e),h(!1)};return b(U,{className:`px-4`,children:[b(W,{orientation:i,"data-invalid":S,children:[b(G,{children:[b(q,{htmlFor:p.name,"aria-required":C,children:[e,a&&y(X,{tooltip:a})]}),y(J,{children:t})]}),y(K,{className:`flex flex-col space-y-1`,children:b(`div`,{className:`flex w-full flex-col`,children:[b(ve,{open:m,onOpenChange:e=>{h(e),e||p.handleBlur()},children:[y(be,{asChild:!0,children:b(R,{variant:`outline`,color:`muted`,size:`lg`,disabled:v,"aria-invalid":S?!0:void 0,"aria-describedby":f,className:g(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,p.state.value===null&&`text-text-positive-muted`,S&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),children:[y(`p`,{children:p.state.value===null?n??`Select date`:j(p.state.value,`PPPP`)}),y(r,{strokeWidth:1})]})}),b(ye,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,children:[b(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(O()),children:`Hôm nay`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(k()),children:`Ngày mai`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(A()),children:`Hôm qua`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(N(O(),3)),children:`3 ngày qua`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(N(O(),7)),children:`7 ngày qua`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(N(O(),30)),children:`30 ngày qua`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(ee(O())),children:`Tháng này`}),y(R,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>T(M(O())),children:`Tháng trước`})]}),y(`div`,{className:`flex flex-1 flex-col`,children:y(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:y(Pe,{mode:`single`,selected:p.state.value??void 0,hidden:{before:u??new Date(1900,0,1),after:d??new Date(2100,11,31)},onSelect:e=>{e&&T(e)}})})})]})]}),x&&s&&y(Q,{id:f,className:`mt-1`,errors:p.state.meta.errors}),y(Y,{isShow:!!o,children:o})]})})]}),y(Z,{})]})});_t.displayName=`DateField`;const vt=({label:e,description:n,placeholder:r,tooltip:i,helperText:a,orientation:o=`responsive`,showErrorMessage:s=!0,required:c=!1,maxLength:l})=>{let{form:u,name:d,state:f,handleBlur:p,handleChange:m}=$(),_=H(u.store,({isSubmitting:e})=>e),v=f.meta.isDirty&&f.meta.isTouched&&!f.meta.isValid,x=c&&f.value===null,C=!_&&!!f.value,w=S(({target:{value:e}})=>{_||l&&e.length>l||m(e||null)},[_,l,m]),T=S(()=>{_||m(null)},[_,m]);return b(U,{className:`gap-y-4 px-4`,children:[b(W,{"data-invalid":v,orientation:o,children:[b(G,{children:[b(q,{htmlFor:d,"aria-required":x,children:[e,i&&y(X,{tooltip:i})]}),y(J,{children:n})]}),b(K,{children:[y(B,{id:d,name:d,value:f.value===null?``:f.value,"aria-invalid":v,autoComplete:`email`,placeholder:r,className:g(`pl-9`,C&&`pr-9`,_&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:p,onChange:w}),y(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:y(t,{size:14})}),C&&y(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:T,children:y(h,{size:14,"aria-hidden":`true`})}),y(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:s&&f.meta.isDirty&&y(Q,{errors:f.meta.errors})}),y(Y,{isShow:!!a,children:a})]})]}),y(Z,{})]})},yt=x(({label:e,description:t,placeholder:r,tooltip:i,helperText:a,orientation:o=`responsive`,showErrorMessage:s=!0,rounding:c,decimalPlaces:l,precision:u,unit:f,required:p=!1,disabled:m=!1,allowNegative:h})=>{let _=w(),v=w(),x=$(),C=H(x.form.store,({isSubmitting:e})=>e),T=m||C,E=x.state.meta.isDirty||x.state.meta.isTouched,D=E&&!x.state.meta.isValid,O=p&&x.state.value===null,k=!!x.state.meta.errors.length,A=S(e=>{T||x.handleChange(e)},[T,x.handleChange]);return b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:o,"data-invalid":D,children:[b(G,{children:[b(q,{htmlFor:_,"aria-required":O,children:[e,i&&y(X,{tooltip:i})]}),y(J,{children:t})]}),b(K,{children:[b(`div`,{className:`relative w-full`,children:[y(Le,{id:_,value:x.state.value,"aria-invalid":D,"aria-describedby":v,placeholder:r,disabled:T,roundingRule:c,numberAfterDecimalPoint:l,precision:u,unitText:f,allowNegative:h,className:g(T&&`pointer-events-none opacity-60`),onBlur:x.handleBlur,onValueChange:A}),C&&y(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:y(d,{className:`animate-spin text-primary-strong`})}),!C&&E&&s&&k&&y(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:y(n,{})}),y(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:E&&s?y(Q,{id:v,className:`flex-1`,errors:x.state.meta.errors}):y(`div`,{})})]}),y(Y,{isShow:!!a,children:a})]})]}),y(Z,{})]})});yt.displayName=`NumberField`;const bt=({label:e,description:t,placeholder:n,orientation:r=`responsive`,tooltip:i,helperText:a,showErrorMessage:o=!0})=>{let l=w(),{form:u,name:d,state:f,handleBlur:p,handleChange:m}=$(),h=H(u.store,({isSubmitting:e})=>e),[g,_]=D(!1),v=f.meta.isDirty&&f.meta.isTouched&&!f.meta.isValid,x=S(()=>_(e=>!e),[]),C=S(({target:{value:e}})=>{h||m(e||null)},[h,m]);return b(U,{className:`gap-y-4 px-4`,children:[b(W,{"data-invalid":v,orientation:r,children:[b(G,{children:[b(q,{htmlFor:l,children:[e,i&&y(X,{tooltip:i})]}),y(J,{children:t})]}),b(K,{children:[y(B,{id:l,name:d,type:g?`text`:`password`,placeholder:n,value:f.value??``,"aria-invalid":v,autoComplete:`new-password`,onBlur:p,onChange:C}),y(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:x,"aria-label":g?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":g,"aria-controls":l,children:y(g?c:s,{size:16,"aria-hidden":`true`})}),y(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:o&&f.meta.isDirty&&y(Q,{errors:f.meta.errors})}),y(Y,{isShow:!!a,children:a})]})]}),y(Z,{})]})},xt=({label:e,description:t,orientation:n,options:r,tooltip:i,helperText:a})=>{let o=$(),s=H(o.form.store,({isSubmitting:e})=>e);return b(U,{className:`px-4`,children:[b(W,{orientation:n,className:`flex-col gap-2`,children:[b(G,{children:[b(q,{children:[e,i&&y(X,{tooltip:i})]}),y(J,{children:t}),y(Y,{isShow:!!a,children:a})]}),y(K,{children:y(Fe,{value:o.state.value??``,className:`w-full`,onValueChange:o.handleChange,children:r.map(e=>y(q,{className:g(`h-fit`,o.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,s&&`pointer-events-none bg-muted-muted opacity-60`,o.state.value===e.value&&s&&`border-border-strong!`),children:b(W,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[y(Ie,{value:e.value,className:`mt-0.5 shrink-0`}),b(G,{className:`gap-0.5!`,children:[y(it,{children:e.label}),y(J,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),y(Z,{})]})},St=x(({label:e,description:t,placeholder:n,orientation:r=`responsive`,tooltip:i,options:o,helperText:s,clearable:c=!1,required:l=!1,disabled:u=!1,showErrorMessage:d=!0})=>{let p=w(),m=$(),_=L(),[x,S]=D(!1),C=H(m.form.store,({isSubmitting:e})=>e),T=u||C,E=m.state.meta.isDirty||m.state.meta.isTouched,O=E&&!m.state.meta.isValid,k=l&&m.state.value===null,A=c&&!!m.state.value&&!T,j=o.find(e=>e.value===m.state.value)?.label,M=()=>{m.handleChange(null),m.handleBlur()};return b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:r,"data-invalid":O,children:[b(G,{children:[b(q,{htmlFor:m.name,"aria-required":k,children:[e,i&&y(X,{tooltip:i})]}),y(J,{children:t})]}),b(K,{className:`flex flex-col`,children:[_?b(v,{children:[b(`button`,{id:m.name,type:`button`,disabled:T,"aria-invalid":O?`true`:void 0,"aria-describedby":p,onBlur:m.handleBlur,onClick:()=>S(!0),className:g(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,O&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!m.state.value&&`text-text-positive-muted`),children:[y(`span`,{className:`line-clamp-1`,children:j??n}),y(a,{size:16,className:`shrink-0 opacity-50`})]}),y(oe,{open:x,onOpenChange:e=>{S(e),e||m.handleBlur()},children:b(le,{children:[y(ce,{}),b(I.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:g(`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:[b(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[y(`span`,{className:`font-semibold text-sm text-text-positive`,children:e??n??`Chọn một tùy chọn`}),y(z,{asChild:!0,children:y(`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:y(h,{size:16})})})]}),b(`div`,{className:`flex flex-col overflow-y-auto`,children:[A&&y(z,{asChild:!0,children:b(`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:M,children:[y(h,{size:14}),`Xóa lựa chọn`]})}),o.length>0?o.map(e=>y(z,{asChild:!0,children:y(`button`,{type:`button`,className:g(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,m.state.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{m.handleChange(e.value),m.handleBlur()},children:e.label})},e.value)):b(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[y(f,{strokeWidth:1}),`Không có tùy chọn`]})]}),y(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):b(`div`,{className:`relative`,children:[b(xe,{value:m.state.value??``,disabled:T,onValueChange:m.handleChange,children:[y(we,{"aria-invalid":O?`true`:void 0,"aria-describedby":p,onBlur:m.handleBlur,children:y(Te,{placeholder:n})}),y(Se,{children:o.length>0?o.map(e=>y(Ce,{value:e.value,children:e.label},e.value)):b(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[y(f,{strokeWidth:1}),`No options available`]})})]}),A&&y(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 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:M,children:y(h,{"aria-hidden":`true`})})]}),E&&d&&y(Q,{id:p,className:`mt-1`,errors:m.state.meta.errors}),y(Y,{isShow:!!s,children:s})]})]}),y(Z,{})]})});St.displayName=`SelectField`;function Ct({className:e,...t}){return y(ie.Root,{"data-slot":`switch`,className:g(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...t,children:y(ie.Thumb,{"data-slot":`switch-thumb`,className:g(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const wt=({label:e,description:t,helperText:n})=>{let r=$();return b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[b(G,{children:[y(it,{className:`cursor-pointer`,children:y(`label`,{htmlFor:r.name,children:e})}),y(J,{children:t}),y(Ct,{id:r.name,checked:r.state.value??!1,className:`absolute top-1 right-1`,onBlur:r.handleBlur,onCheckedChange:r.handleChange})]}),y(Y,{isShow:!!n,children:n})]}),y(Z,{})]})},Tt=e=>{e.key===`Enter`&&e.preventDefault()},Et=x(({label:e,description:t,placeholder:r,tooltip:i,helperText:a,counter:o=!1,orientation:s=`responsive`,showClearButton:c=!1,showErrorMessage:l=!0,required:u=!1,disabled:f=!1,maxLength:p})=>{let m=w(),_=w(),v=E(null),{form:x,name:C,state:T,handleBlur:D,handleChange:O}=$(),k=H(x.store,({isSubmitting:e})=>e),A=f||k,j=T.meta.isDirty||T.meta.isTouched,M=j&&!T.meta.isValid,ee=u&&T.value===null,N=T.meta.errors.length>0,P=c&&!A&&!!T.value,F=o?T.value?.length??0:0,te=o&&!!p&&F>=p*.8,I=o&&!!p&&F>=p,ne=o?p?`${F} / ${p} ký tự`:`${F} ký tự`:null,re=o||j&&l,ie=S(({target:{value:e}})=>{o&&p&&e.length>p||O(e||null)},[o,p,O]),L=S(()=>{O(null),v.current?.focus()},[O]);return b(We,{className:`gap-y-4 px-4`,children:[b(ze,{orientation:s,"data-invalid":M,children:[b(Be,{children:[b(Ge,{"aria-required":ee,htmlFor:m,children:[e,i&&y(Je,{tooltip:i})]}),t&&y(He,{children:t})]}),b(Ve,{children:[y(B,{ref:v,id:m,name:C,value:T.value??``,"aria-invalid":M,"aria-describedby":_,autoComplete:`off`,placeholder:r,autoCapitalize:`none`,autoCorrect:`off`,disabled:A,className:g(`pr-6`,A&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:D,onChange:ie,onKeyDown:Tt}),P&&y(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-1 top-2.5 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:L,children:y(h,{"aria-hidden":`true`})}),k&&y(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:y(d,{size:14,className:`animate-spin text-primary-strong`})}),!P&&j&&l&&N&&y(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:y(n,{"aria-hidden":`true`,size:14})}),re&&b(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[j&&l?y(Ue,{id:_,className:`flex-1`,errors:T.meta.errors}):y(`div`,{}),o&&y(`p`,{className:g(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,I?`font-medium text-danger-strong`:te?`text-warning-strong`:`text-text-positive-weak`),children:ne})]}),y(Ke,{isShow:!!a,children:a})]})]}),y(qe,{})]})});Et.displayName=`TextField`;const Dt=x(({label:e,description:t,placeholder:r,tooltip:a,helperText:s,counter:c=!1,orientation:l=`responsive`,showErrorMessage:u=!0,required:f=!1,disabled:p=!1,maxLength:m})=>{let h=w(),_=w(),[v,x]=D(!1),O=E(null),{form:k,state:A,name:j,handleBlur:M,handleChange:ee}=$(),N=H(k.store,({isSubmitting:e})=>e),P=p||N,F=A.value?.length??0,te=T(()=>c?m?`${F} / ${m} ký tự`:`${F} ký tự`:``,[F,c,m]),I=!!m&&F>=m*.8,ne=!!m&&F>=m,re=A.meta.isDirty||A.meta.isTouched,ie=re&&!A.meta.isValid,L=f&&A.value===null,R=!!A.meta.errors.length,ae=!!A.value&&!P,oe=T(()=>g(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,ne?`font-medium text-danger-strong`:I?`text-warning-strong`:`text-text-positive-weak`),[ne,I]),z=S(({target:{value:e}})=>{P||c&&m&&e.length>m||ee(e||null)},[P,c,m,ee]),se=S(async()=>{A.value&&(await navigator.clipboard.writeText(A.value),O.current!==null&&clearTimeout(O.current),x(!0),O.current=setTimeout(()=>x(!1),1500))},[A.value]);return C(()=>()=>{O.current!==null&&clearTimeout(O.current)},[]),b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:l,"data-invalid":ie,children:[b(G,{children:[b(q,{"aria-required":L,htmlFor:h,children:[e,a&&y(X,{tooltip:a})]}),y(J,{children:t})]}),b(K,{children:[y(Re,{id:h,name:j,value:A.value??``,"aria-invalid":ie,"aria-describedby":_,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:r,disabled:P,className:g(P&&`pointer-events-none bg-muted-muted opacity-60`),onChange:z,onBlur:M}),ae&&y(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:se,children:v?y(i,{"aria-hidden":`true`,className:`text-success-strong`}):y(o,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),N&&y(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:y(d,{size:14,className:`animate-spin text-primary-strong`})}),!ae&&re&&u&&R&&y(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:y(n,{size:14})}),b(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[re&&u?y(Q,{id:_,className:`flex-1`,errors:A.meta.errors}):y(`div`,{}),!!c&&y(`p`,{className:oe,children:te})]}),y(Y,{isShow:!!s,children:s})]})]}),y(Z,{})]})});Dt.displayName=`TextareaField`;const Ot=x(({label:e,description:t,placeholder:n,tooltip:r,helperText:i,showErrorMessage:a=!0,required:o=!1})=>{let{form:s,state:c,handleChange:l}=$(),u=H(s.store,({isSubmitting:e})=>e),d=c.meta.isDirty&&c.meta.isTouched&&!c.meta.isValid,f=o&&c.value===null,p=S(e=>{u||l(e||null)},[u,l]);return b(U,{className:`gap-y-4 px-4`,children:[b(W,{orientation:`vertical`,"data-invalid":d,children:[b(G,{children:[b(q,{"aria-required":f,children:[e,r&&y(X,{tooltip:r})]}),y(J,{children:t})]}),y(Ye,{value:c.value??``,placeholder:n,readOnly:u,onChange:p}),c.meta.isDirty&&a&&!!c.meta.errors.length&&y(Q,{errors:c.meta.errors}),y(Y,{isShow:!!i,children:i})]}),y(Z,{})]})});Ot.displayName=`TextEditorField`;const kt=({label:e,className:t})=>{let n=Gt(),r=S(async()=>{await n.handleSubmit({submitAction:`submit`}),n.state.isSubmitSuccessful&&n.reset()},[n]);return y(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:n,isSubmitting:i})=>y(R,{type:`button`,size:`md`,disabled:n,isLoading:i,className:g(`min-h-8 min-w-32`,t),onClick:r,children:e??`Xác nhận`})})},At=({type:t=`create`})=>{let n=Gt();return b(`div`,{className:`flex h-8 items-center justify-between`,children:[y(n.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>y(R,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:e,className:`h-full min-w-32`,onClick:()=>n.reset(),children:`Hủy bỏ`})}),t===`create`&&y(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:e,isSubmitting:t})=>b(R,{type:`submit`,size:`md`,disabled:e,isLoading:t,className:`h-full min-w-32`,onClick:async()=>{await n.handleSubmit({submitAction:`create`}),n.state.isSubmitSuccessful&&n.reset()},children:[y(p,{}),`Thêm mới`]})}),t===`update`&&y(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>b(R,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await n.handleSubmit({submitAction:`update`}),n.state.isSubmitSuccessful&&n.reset()},children:[y(e,{}),`Cập nhật`]})})]})};function jt({className:e,orientation:t=`horizontal`,decorative:n=!0,...r}){return y(re.Root,{"data-slot":`separator`,decorative:n,orientation:t,className:g(`shrink-0 bg-border-weak`,`data-[orientation=horizontal]:h-px`,`data-[orientation=horizontal]:w-full`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:w-px`,e),...r})}const Mt=({title:e,description:t,onDelete:n,children:r})=>b(`section`,{"data-slot":`card-form`,className:`relative flex flex-col rounded-md bg-card pb-4 shadow-card ring-1 ring-border`,children:[b(`div`,{"data-slot":`card-form-header`,className:`flex flex-col space-y-0.5 px-4 py-3`,children:[y(`p`,{className:`font-semibold text-base tracking-tight`,children:e}),!!t&&y(`p`,{className:`text-text-positive-weak text-sm`,children:t})]}),y(jt,{}),y(`div`,{"data-slot":`card-form-main`,className:`flex flex-col py-4`,children:r}),!!n&&b(R,{color:`danger`,variant:`ghost`,size:`sm`,className:`absolute top-2.5 right-3`,onClick:e=>{n?.(),e.preventDefault(),e.stopPropagation()},children:[y(m,{}),`Remove`]})]}),Nt=({children:e})=>y(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:e}),Pt=({disabled:e,className:t,onClick:n,children:r})=>y(R,{type:`button`,variant:`outline`,color:`muted`,disabled:e,className:g(`min-w-40`,t),onClick:n,children:r??`Huỷ`}),Ft=({isSubmitting:e,submitText:t=`Xác nhận`,disabled:n,className:r,onClick:i})=>y(R,{type:`button`,isLoading:e,disabled:n||e,className:g(`min-w-40`,r),onClick:i,children:t}),It=({title:e,submitText:t,width:n,maxWidth:r,className:i,open:a,onOpenChange:o,children:s})=>{let c=Gt(),l=S(e=>{e||c.reset(),o?.(e)},[c.reset,o]);return y(oe,{open:a,onOpenChange:l,children:b(le,{"data-slot":`dialog-portal`,children:[y(ce,{}),b(se,{style:{"--width":n,"--max-width":r},className:g(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,n&&`sm:w-(--width)`,r&&`sm:max-w-(--max-width)`,i),onOpenAutoFocus:e=>{e.preventDefault()},children:[y(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:y(ue,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:e})}),y(ae,{}),y(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:s}),y(ae,{}),b(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[y(c.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>y(Pt,{disabled:e,onClick:()=>{c.reset(),l(!1)}})}),y(c.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:n})=>y(Ft,{isSubmitting:e,disabled:n,submitText:t,onClick:()=>c.handleSubmit()})})]})]})]})})},Lt=({label:e,description:t,helperText:n,orientation:r=`responsive`,children:i})=>b(We,{className:`gap-y-4 px-4`,children:[b(ze,{orientation:r,children:[b(Be,{children:[y(Ge,{children:e}),y(He,{children:t})]}),b(Ve,{children:[i,y(Ke,{isShow:!!n,children:n})]})]}),y(qe,{})]}),Rt=({title:e,open:t,contentClassName:n,onOpenChange:r,children:i})=>{let a=Gt();return y(I.Root,{"data-slot":`dialog`,open:t,onOpenChange:r,children:b(I.Portal,{"data-slot":`dialog-portal`,children:[y(I.Overlay,{"data-slot":`dialog-overlay`,className:g(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),y(I.Content,{"data-slot":`dialog-content`,className:g(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:b(`section`,{className:`relative flex size-full flex-col`,children:[y(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:y(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:e})}),y(`div`,{className:g(`flex flex-1 flex-col overflow-y-auto py-4`,n),children:i}),b(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[y(a.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>y(Ft,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>a.handleSubmit()})}),y(a.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>y(Pt,{disabled:e,className:`w-full`,onClick:()=>{a.reset(),r?.(!1)}})})]}),y(I.Close,{asChild:!0,children:y(Xe,{className:`absolute top-2.5 right-3`})})]})})]})})},zt=({children:e})=>y(`header`,{"data-slot":`section-header`,className:`flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight`,children:e}),Bt=({children:e})=>y(`main`,{"data-slot":`section-main`,className:`relative flex flex-col py-4`,children:e}),Vt=({title:e,children:t})=>b(`section`,{"data-slot":`section-form`,className:`flex flex-col rounded-md bg-background shadow-card ring-1 ring-border`,children:[y(zt,{children:e}),y(jt,{}),y(Bt,{children:t})]}),Ht=({title:e,description:t,helperText:n})=>b(U,{className:`gap-y-4 px-4`,children:[b(W,{className:`gap-0`,children:[b(G,{children:[y(rt,{className:`mb-1`,children:e}),y(J,{children:t})]}),y(Y,{isShow:!!n,children:n})]}),y(Z,{})]}),{fieldContext:Ut,formContext:Wt,useFieldContext:$,useFormContext:Gt}=De(),{useAppForm:Kt,withForm:qt,withFieldGroup:Jt}=Ee({fieldContext:Ut,formContext:Wt,fieldComponents:{TextField:Et,TextareaField:Dt,TextEditorField:Ot,NumberField:yt,EmailField:vt,PasswordField:bt,SelectField:St,ComboboxField:gt,DateField:_t,SwitchField:wt,RadioGroupField:xt,CheckboxField:ht,SimpleTextField:mt,SimpleEmailField:lt,SimplePasswordField:dt,SimpleTextareaField:pt,SimpleNumberField:ut,SimpleSelectField:ft,SimpleArrayField:$e,SimpleBooleanField:at,SimpleComboboxField:ot,SimpleDateField:st,SimpleRadioGroupField:ct,FieldGroup:U,Field:W,FieldContent:G,FieldLabel:q,FieldContentMain:K,FieldSeparator:Z,FieldError:Q},formComponents:{TanStackDialogForm:It,TanStackPopoverForm:Rt,TanStackContainerForm:Nt,TanStackSectionForm:Vt,TanStackCardForm:Mt,TanStackFieldGroup:Lt,TanStackTitleField:Ht,TanStackActionsForm:At,TanStackActionSubmit:kt,ArrayCol:Ze,ArrayHeaderRow:Qe}});export{Qe as $,pt as A,G as B,bt as C,gt as D,_t as E,ct as F,q as G,J as H,st as I,Z as J,rt as K,ot as L,dt as M,ut as N,ht as O,lt as P,Ze as Q,at as R,xt as S,vt as T,Q as U,K as V,U as W,it as X,nt as Y,X as Z,Ot as _,qt as a,wt as b,Rt as c,Ft as d,$e as et,Pt as f,kt as g,At as h,Jt as i,ft as j,mt as k,Lt as l,Mt as m,Kt as n,Ht as o,Nt as p,Y as q,Gt as r,Vt as s,$ as t,It as u,Dt as v,yt as w,St as x,Et as y,W as z};
+//# sourceMappingURL=tanstack-form-Ds_Zjt20.js.map