formik-yup-smartform/dist/index.js

formik-yup-smartform is a lightweight React component that automatically generates forms using Formik and Yup. Just pass a validation schema, field configuration, and submit handler — the form is built for you with validation, error messages, and minimal

import{useFormik as F}from"formik";import*as a from"yup";import{jsx as r,jsxs as i}from"react/jsx-runtime";var M=({formValues:u,width:b="max-w-xl",formSubmit:f,validationSchema:v,isLoading:m=!1,buttonBgColor:y="bg-blue-600 hover:bg-blue-700",buttonTextColor:x="text-white",labelTextColor:n="text-gray-800 dark:text-gray-100"})=>{let k=u.reduce((t,e)=>{switch(e.type){case"checkbox":t[e.name]=!1;break;case"file":t[e.name]=null;break;default:t[e.name]=""}return t},{}),N=v||a.object().shape(u.reduce((t,e)=>{if(!e.required)return t[e.name]=a.mixed(),t;switch(e.type){case"checkbox":t[e.name]=a.boolean().oneOf([!0],`${e.label||e.name} is required`);break;case"email":t[e.name]=a.string().email("Invalid email").required(`${e.label||e.name} is required`);break;case"number":case"range":t[e.name]=a.number().typeError(`${e.label||e.name} must be a number`).required(`${e.label||e.name} is required`);break;case"file":t[e.name]=a.mixed().required(`${e.label||e.name} is required`);break;default:t[e.name]=a.string().required(`${e.label||e.name} is required`)}return t},{})),{handleChange:g,values:h,handleSubmit:z,setFieldValue:S,resetForm:$,errors:o,touched:c,handleBlur:d}=F({initialValues:k,validationSchema:N,onSubmit:t=>{f(t),$()}});return i("form",{onSubmit:z,className:`${b} mx-auto p-6 space-y-5`,children:[u.map(t=>{let{name:e,type:p,label:l,placeholder:C,options:w}=t;return p==="checkbox"?i("div",{className:"space-y-1",children:[i("label",{className:`flex items-center space-x-3 cursor-pointer ${n}`,children:[r("input",{type:"checkbox",name:e,checked:h[e],onChange:g,onBlur:d,className:"h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-400"}),r("span",{className:"font-medium",children:l||e})]}),c[e]&&o[e]&&r("p",{className:"text-red-500 text-sm",children:o[e]})]},e):p==="radio"&&w?i("div",{className:"space-y-1",children:[r("p",{className:`font-medium ${n}`,children:l||e}),r("div",{className:"flex space-x-4",children:w.map(s=>i("label",{className:"flex items-center space-x-2 cursor-pointer",children:[r("input",{type:"radio",name:e,value:s,checked:h[e]===s,onChange:g,onBlur:d,className:"h-4 w-4 text-blue-600 focus:ring-2 focus:ring-blue-400"}),r("span",{className:"font-medium",children:s})]},s))}),c[e]&&o[e]&&r("p",{className:"text-red-500 text-sm",children:o[e]})]},e):p==="file"?i("div",{className:"space-y-1",children:[r("label",{className:`font-medium ${n}`,children:l||e}),r("input",{type:"file",name:e,onChange:s=>S(e,s.currentTarget.files?.[0]||null),onBlur:d,className:`block w-full ${n} bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400`}),c[e]&&o[e]&&r("p",{className:"text-red-500 text-sm",children:o[e]})]},e):i("div",{className:"space-y-1",children:[r("label",{className:`block font-medium ${n}`,children:l||e}),r("input",{type:p,name:e,placeholder:C||`Enter ${l||e}`,value:h[e],onChange:g,onBlur:d,className:`block w-full ${n} bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400`}),c[e]&&o[e]&&r("p",{className:"text-red-500 text-sm",children:o[e]})]},e)}),i("button",{type:"submit",disabled:m,className:`w-full flex items-center justify-center gap-2 ${y} ${x} font-semibold py-2 rounded-lg shadow-md transition-all duration-200`,children:[m&&i("svg",{className:"animate-spin h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[r("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"})]}),m?"Submitting...":"Submit"]})]})},Y=M;export{Y as SmartForm};
//# sourceMappingURL=index.js.map