@frank-auth/react/dist/cjs/components/forms/form-wrapper.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime");require("@emotion/styled");const k=require("../ui/card/card.cjs"),$=require("../../lib/utils.cjs"),S=require("../../utils/format.cjs"),W=require("framer-motion"),t=require("react"),A=require("../../hooks/use-config.cjs"),G=require("../../hooks/use-theme.cjs"),I=require("./field-error.cjs"),J=e=>e&&e.__esModule?e:{default:e},h=J(t),E=t.createContext(null),v=h.default.memo(({children:e,disableAnimations:s})=>s?r.jsx(r.Fragment,{children:e}):r.jsx(W.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.3,ease:"easeOut"},children:e}));v.displayName="AnimatedContent";const P=h.default.memo(({children:e,isSubmitting:s,initialErrors:n})=>{const o=t.useRef(n),l=t.useRef({});h.default.useEffect(()=>{o.current=n},[]);const[,a]=h.default.useReducer(c=>c+1,0),u=t.useCallback((c,d)=>{if(d===null){if(o.current[c]!==void 0){const j={...o.current};delete j[c],o.current=j,a()}}else o.current[c]!==d&&(o.current={...o.current,[c]:d},a())},[]),i=t.useCallback((c,d=!0)=>{l.current[c]!==d&&(l.current={...l.current,[c]:d},a())},[]),x=t.useCallback(c=>{u(c,null)},[u]),m=t.useCallback(()=>{Object.keys(o.current).length>0&&(o.current={},a())},[]),f=t.useCallback(c=>o.current[c]||null,[]),g=t.useCallback(c=>l.current[c]||!1,[]),p=t.useMemo(()=>({isSubmitting:s,errors:o.current,touched:l.current,setFieldError:u,setFieldTouched:i,clearFieldError:x,clearAllErrors:m,hasErrors:Object.keys(o.current).length>0,getFieldError:f,getFieldTouched:g}),[s,u,i,x,m,f,g]);return r.jsx(E.Provider,{value:p,children:e})});P.displayName="FormStateProvider";const z=h.default.memo(({children:e,footer:s,onSubmit:n,isSubmitting:o,loadingContent:l,width:a,centered:u})=>{const{clearAllErrors:i}=w(),x=t.useCallback(async p=>{if(p.preventDefault(),i(),n)try{await n(p)}catch(c){console.error("Form submission error:",c)}},[n,i]),m=t.useMemo(()=>({sm:"w-full max-w-sm",md:"w-full max-w-md",lg:"w-full max-w-lg",xl:"w-full max-w-xl",full:"w-full"}),[]),f=t.useMemo(()=>`relative ${m[a]} ${u?"mx-auto":""}`,[m,a,u]),g=t.useMemo(()=>o?r.jsx("div",{className:"absolute inset-0 bg-background/50 backdrop-blur-sm flex items-center justify-center z-50 rounded-inherit",children:l||r.jsxs("div",{className:"flex items-center gap-3",children:[r.jsx("div",{className:"w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin"}),r.jsx("span",{className:"text-sm text-foreground",children:"Processing..."})]})}):null,[o,l]);return r.jsxs("div",{className:f,children:[r.jsxs("form",{onSubmit:x,className:"space-y-4",noValidate:!0,children:[e,s]}),g]})});z.displayName="FormContent";const H=h.default.memo(({success:e,error:s,disableAnimations:n})=>!e&&!s?null:r.jsxs(r.Fragment,{children:[e&&r.jsx(W.motion.div,{initial:n?!1:{opacity:0,y:-10},animate:{opacity:1,y:0},className:"mb-4 p-3 bg-success-50 dark:bg-success-100/10 border border-success-200 dark:border-success-800 rounded-lg",children:r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx("svg",{className:"w-5 h-5 text-success-600 dark:text-success-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),r.jsx("p",{className:"text-sm text-success-700 dark:text-success-300",children:e})]})}),s&&r.jsx(I.FieldError,{error:s,variant:"default",className:"mb-4 p-3 bg-danger-50 dark:bg-danger-100/10 border border-danger-200 dark:border-danger-800 rounded-lg"})]}));H.displayName="Messages";const U=h.default.memo(({header:e,title:s,subtitle:n,showCard:o,desc:l,titleAlignment:a})=>e?r.jsx(r.Fragment,{children:e}):!s&&!n?null:o?r.jsxs(k.CardHeader,{className:"flex flex-col items-center text-center pb-2",children:[s&&r.jsx("h1",{className:"text-2xl font-bold text-foreground mb-2",children:s}),n&&r.jsx("p",{className:"text-default-500 text-sm",children:n})]}):r.jsxs("div",{className:$.cn("flex flex-col text-center pb-2",S.getTitleAlignment(a??"center")),children:[s&&r.jsx("h1",{className:"text-2xl font-bold text-foreground mb-2",children:s}),n&&r.jsx("p",{className:"text-default-500",children:n}),l]}));U.displayName="Header";const B=h.default.memo(({logo:e,orgLogoUrl:s})=>e?typeof e=="string"?r.jsx("img",{src:e,alt:"Logo",className:"h-8 w-auto mx-auto mb-6"}):r.jsx("div",{className:"flex justify-center mb-6",children:e}):s?r.jsx("img",{src:s,alt:"Organization Logo",className:"h-8 w-auto mx-auto mb-6"}):null);B.displayName="Logo";function D({children:e,title:s,subtitle:n,desc:o,header:l,footer:a,isSubmitting:u=!1,error:i,success:x,onSubmit:m,initialErrors:f={},className:g="",variant:p="shadow",size:c="md",showCard:d=!0,cardProps:j={},loadingContent:b,logo:N,width:y="md",centered:C=!0,disableAnimations:F=!1,titleAlignment:M}){const{theme:X}=G.useTheme(),{components:V,organizationSettings:T}=A.useConfig(),q=V.FormWrapper;if(q)return r.jsx(q,{children:e,title:s,subtitle:n,header:l,footer:a,isSubmitting:u,error:i,success:x,onSubmit:m,initialErrors:f,className:g,variant:p,size:c,showCard:d,cardProps:j,loadingContent:b,logo:N,width:y,centered:C,disableAnimations:F});const _=t.useMemo(()=>r.jsx(B,{logo:N,orgLogoUrl:T?.branding?.logoUrl}),[N,T?.branding?.logoUrl]),R=t.useMemo(()=>r.jsx(U,{header:l,title:s,subtitle:n,desc:o,showCard:d,titleAlignment:M}),[l,s,n,d,M]),L=t.useMemo(()=>r.jsx(H,{success:x,error:i,disableAnimations:F}),[x,i,F]),O=t.useMemo(()=>r.jsxs(P,{isSubmitting:u,initialErrors:f,children:[_,L,r.jsx(z,{onSubmit:m,isSubmitting:u,loadingContent:b,width:y,centered:C,footer:a,children:e})]}),[u,f,_,L,m,b,y,C,a,e]);return d?r.jsx(v,{disableAnimations:F,children:r.jsxs(k.Card,{variant:p,className:g,...j,children:[R,r.jsx(k.CardBody,{className:"pt-0",children:O})]})}):r.jsx(v,{disableAnimations:F,children:r.jsxs("div",{className:g,children:[R,r.jsx("div",{className:"pt-0",children:O})]})})}function w(){const e=t.useContext(E);if(!e)throw new Error("useFormContext must be used within a FormWrapper");return e}function K(e){const s=w(),n=t.useCallback(a=>{s.setFieldError(e,a)},[s.setFieldError,e]),o=t.useCallback((a=!0)=>{s.setFieldTouched(e,a)},[s.setFieldTouched,e]),l=t.useCallback(()=>{s.clearFieldError(e)},[s.clearFieldError,e]);return t.useMemo(()=>({name:e,error:s.getFieldError(e),touched:s.getFieldTouched(e),showError:s.getFieldTouched(e)&&!!s.getFieldError(e),setError:n,setTouched:o,clearError:l,isSubmitting:s.isSubmitting}),[e,s.getFieldError(e),s.getFieldTouched(e),n,o,l,s.isSubmitting])}var Q=D;exports.FormContext=E;exports.FormWrapper=D;exports.default=Q;exports.useFormContext=w;exports.useFormField=K;
//# sourceMappingURL=form-wrapper.cjs.map