@fluxar/form-react 0.0.1 → 0.0.2

package/dist/index.js

@@ -0,0 +1 @@
+import {Icon,Button,NumberField,Label,FieldError,Description,TextField,InputGroup,CloseButton,TimeField}from'@fluxar/ui-react';import {useFormContext,Controller,useForm,FormProvider}from'react-hook-form';import {jsx,jsxs}from'react/jsx-runtime';import {zodResolver}from'@hookform/resolvers/zod';var z=s=>{let{children:t}=s,{formState:{isSubmitting:o}}=useFormContext();return jsx(Button,{isDisabled:o,isPending:o,type:"submit",children:t})};var N=s=>{let{label:t,name:o,className:e,control:i,description:m,format:F,maxValue:l,minValue:n,readonly:f,disabled:b,required:r,step:u}=s;return jsx(Controller,{name:o,control:i,render:({field:p,fieldState:{invalid:y,error:C}})=>jsxs(NumberField,{fullWidth:true,isInvalid:y,isReadOnly:f,isRequired:r,formatOptions:{style:F},maxValue:l,minValue:n,name:p.name,ref:p.ref,onBlur:p.onBlur,isDisabled:p.disabled??b,step:u,value:p.value??0,onChange:p.onChange,className:e?.wrapper,children:[jsx(Label,{className:e?.label,children:t}),jsxs(NumberField.Group,{className:e?.group,children:[jsx(NumberField.DecrementButton,{className:e?.decrement}),jsx(NumberField.Input,{className:e?.input}),jsx(NumberField.IncrementButton,{className:e?.increment})]}),y?jsx(FieldError,{children:C?.message}):m&&jsx(Description,{className:e?.description,children:m})]})})};var R={email:jsx(Icon,{name:"mail",size:"sm"}),password:jsx(Icon,{name:"lock",size:"sm"}),search:jsx(Icon,{name:"search",size:"sm"}),tel:jsx(Icon,{name:"phone",size:"sm"}),text:void 0,url:jsx(Icon,{name:"global",size:"sm"})},P=s=>{let{label:t,disabled:o,name:e,className:i,description:m,placeholder:F="Enter your input...",required:l=false,type:n="text",readonly:f=false,control:b}=s;return jsx(Controller,{name:e,control:b,render:({field:r,fieldState:{invalid:u,error:p}})=>jsxs(TextField,{onChange:r.onChange,onBlur:r.onBlur,ref:r.ref,isInvalid:u,isRequired:l,isReadOnly:f,fullWidth:true,name:r.name,isDisabled:r.disabled??o,className:i?.wrapper,type:n,children:[jsx(Label,{className:i?.label,children:t}),jsxs(InputGroup,{className:i?.group,children:[R&&jsx(InputGroup.Prefix,{children:R[n]}),jsx(InputGroup.Input,{placeholder:F,value:r.value??"",className:i?.input}),r.value?.length>0&&jsx(InputGroup.Suffix,{onClick:()=>r.onChange(""),children:jsx(CloseButton,{})})]}),u?jsx(FieldError,{children:p?.message}):m&&jsx(Description,{className:i?.description,children:m})]})})};var S=s=>{let{label:t,name:o,className:e,control:i,description:m,disabled:F,maxValue:l,minValue:n,readonly:f,required:b}=s;return jsx(Controller,{name:o,control:i,render:({field:r,fieldState:{invalid:u,error:p}})=>jsxs(TimeField,{fullWidth:true,isRequired:b,className:e?.wrapper,name:r.name,value:r.value??null,ref:r.ref,onChange:r.onChange,onBlur:r.onBlur,isDisabled:r.disabled??F,isInvalid:u,isReadOnly:f,maxValue:l,minValue:n,children:[jsx(Label,{className:e?.label,children:t}),jsx(TimeField.Group,{className:e?.group,children:jsx(TimeField.Input,{className:e?.input,children:y=>jsx(TimeField.Segment,{segment:y})})}),u?jsx(FieldError,{children:p?.message}):m&&jsx(Description,{className:e?.description,children:m})]})})};var _=s=>{let{options:t,schema:o}=s;return {...useForm({...t,resolver:zodResolver(o)}),NumberField:N,TextField:P,TimeField:S}};function $(s,t){let{onValid:o,onError:e,onInvalid:i,onSuccess:m}=t;return {handleSubmit:s.handleSubmit(async l=>{try{await o(l),m?.(l);}catch(n){e?.(n);}},(l,n)=>i?.(l,n))}}var ee=s=>{let{children:t,form:o,onSubmit:e}=s;return jsx(FormProvider,{...o,children:jsx("form",{onSubmit:e,children:t})})};export{ee as FormProvider,z as FormSubmitButton,N as NumberField,P as TextField,S as TimeField,_ as useForm,$ as useFormSubmit};

package/package.json

@@ -4,7 +4,7 @@
 		"name": "TtPhong-FS"
 	},
 	"dependencies": {
-		"@fluxar/ui-react": "^1.0.1",
+		"@fluxar/ui-react": "^1.0.2",
 		"@hookform/resolvers": "^5.2.2",
 		"react-hook-form": "7.72.0"
 	},
@@ -48,5 +48,5 @@
 	},
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"version": "0.0.1"
+	"version": "0.0.2"
 }