@kbgarcia8/react-dynamic-form 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -39,7 +39,7 @@
39
39
  display: flex;
40
40
  align-items: center;
41
41
  justify-content: center;
42
- `,f=({onClick:n,id:o,buttonType:l,source:s,svg:r,alt:h="alt-button-icon",text:d="",className:i="",dataAttributes:b={}})=>e.jsx(Q,{onClick:n,id:o,type:l,className:i,...b,children:e.jsxs(V,{className:"button-icon-text-space",children:[s?e.jsx(X,{src:s,alt:h}):r||"",d&&e.jsx(Y,{id:o,children:d})]})}),Z=c.div`
42
+ `,u=({onClick:n,id:o,buttonType:l,source:s,svg:r,alt:h="alt-button-icon",text:d="",className:i="",dataAttributes:b={}})=>e.jsx(Q,{onClick:n,id:o,type:l,className:i,...b,children:e.jsxs(V,{className:"button-icon-text-space",children:[s?e.jsx(X,{src:s,alt:h}):r||"",d&&e.jsx(Y,{id:o,children:d})]})}),Z=c.div`
43
43
  display: flex;
44
44
  flex-direction: column;
45
45
  align-items: left;
@@ -105,7 +105,7 @@
105
105
  max-width: 100%;
106
106
  resize: none;
107
107
  overflow-y: auto;
108
- `,z=v.forwardRef((n,o)=>{const{type:l,id:s,onChange:r,isRequired:h,dataAttributes:d,disabled:i,className:b}=n;if(l==="textarea"){const{rows:j=5,cols:w=30,value:T,...D}=n;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:w,...d,className:b,ref:o,disabled:i,required:h})}if(l==="radio"||l==="checkbox"){const{checked:j,...w}=n;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:i,className:b,...d})}const g=n,{value:y,pattern:u,placeholderText:p,...C}=g;return e.jsx(W,{id:s,name:s,placeholder:p,onChange:r,value:y,type:l,required:h,...d,className:b,ref:o,disabled:i,pattern:u})}),E=n=>{const{className:o,type:l,id:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,labelClass:b,onChange:g,isRequired:y,dataAttributes:u,inputClass:p,ref:C,disabled:j,isEditable:w,editIcon:T,onClickEdit:D,deleteIcon:L,onClickDelete:B,idx:S,children:q}=n;return e.jsxs(Z,{className:`${o} ${s.replace("#","")}-label-input-container`,children:[l!=="radio"&&l!=="checkbox"&&e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b}),l!=="radio"&&l!=="checkbox"&&l==="textarea"&&(()=>{const{rows:k=5,cols:F=30,value:A,...a}=n;return e.jsx(z,{id:s,name:s,type:"textarea",isRequired:y,onChange:g,value:A,rows:k,cols:F,...u,className:p,ref:C,disabled:j})})(),l!=="radio"&&l!=="checkbox"&&l!=="textarea"&&(()=>{const k=n,{value:F,pattern:A,placeholderText:a,...$}=k;return e.jsx(z,{id:s,name:s,placeholderText:a,onChange:g,value:F,type:l,isRequired:y,...u,className:p,ref:C,disabled:j,pattern:A})})(),(l==="radio"||l==="checkbox")&&(()=>{const{checked:k,...F}=n;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:C,type:"checkbox",name:s,id:s,isRequired:y,checked:k,onChange:g,disabled:j,className:p,...u}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b})]})})(),"// * Radio inputs usually have labels next to them",w&&e.jsxs(_,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${s}-edit-btn`,svg:T,buttonType:"button",onClick:D,className:`edit-radio-${S}`,dataAttributes:u}),e.jsx(f,{id:`editable-${s}-delete-btn`,svg:L,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:u})]}),q]})},se=c.fieldset`
108
+ `,z=v.forwardRef((n,o)=>{const{type:l,id:s,onChange:r,isRequired:h,dataAttributes:d,disabled:i,className:b}=n;if(l==="textarea"){const{rows:j=5,cols:w=30,value:T,...D}=n;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:w,...d,className:b,ref:o,disabled:i,required:h})}if(l==="radio"||l==="checkbox"){const{checked:j,...w}=n;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:i,className:b,...d})}const g=n,{value:y,pattern:f,placeholderText:p,...C}=g;return e.jsx(W,{id:s,name:s,placeholder:p,onChange:r,value:y,type:l,required:h,...d,className:b,ref:o,disabled:i,pattern:f})}),E=n=>{const{className:o,type:l,id:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,labelClass:b,onChange:g,isRequired:y,dataAttributes:f,inputClass:p,ref:C,disabled:j,isEditable:w,editIcon:T,onClickEdit:D,deleteIcon:R,onClickDelete:B,idx:S,children:q}=n;return e.jsxs(Z,{className:`${o} ${s.replace("#","")}-label-input-container`,children:[l!=="radio"&&l!=="checkbox"&&e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b}),l!=="radio"&&l!=="checkbox"&&l==="textarea"&&(()=>{const{rows:k=5,cols:F=30,value:A,...a}=n;return e.jsx(z,{id:s,name:s,type:"textarea",isRequired:y,onChange:g,value:A,rows:k,cols:F,...f,className:p,ref:C,disabled:j})})(),l!=="radio"&&l!=="checkbox"&&l!=="textarea"&&(()=>{const k=n,{value:F,pattern:A,placeholderText:a,...$}=k;return e.jsx(z,{id:s,name:s,placeholderText:a,onChange:g,value:F,type:l,isRequired:y,...f,className:p,ref:C,disabled:j,pattern:A})})(),(l==="radio"||l==="checkbox")&&(()=>{const{checked:k,...F}=n;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:C,type:"checkbox",name:s,id:s,isRequired:y,checked:k,onChange:g,disabled:j,className:p,...f}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b})]})})(),w&&e.jsxs(_,{className:"input-edit-buttons",children:[e.jsx(u,{id:`editable-${s}-edit-btn`,svg:T,buttonType:"button",onClick:D,className:`edit-radio-${S}`,dataAttributes:f}),e.jsx(u,{id:`editable-${s}-delete-btn`,svg:R,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:f})]}),q]})},se=c.fieldset`
109
109
  padding: 0;
110
110
  height: auto;
111
111
  width: 100%;
@@ -125,11 +125,11 @@
125
125
  display: flex;
126
126
  justify-content: space-between;
127
127
  width: 100%;
128
- `,I=({legend:n,idx:o,editableInformation:l,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:h,onClickDeleteEntry:d})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(le,{children:`${n} ${o+1}`}),l.map((i,b)=>e.jsx(ie,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:i.name.charAt(0).toUpperCase()+i.name.slice(1),onChange:s,value:i.info,type:i.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":i.info}})},`${i.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(f,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(f,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:h,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(f,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
128
+ `,I=({legend:n,idx:o,editableInformation:l,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:h,onClickDeleteEntry:d})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(le,{children:`${n} ${o+1}`}),l.map((i,b)=>e.jsx(ie,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:i.name.charAt(0).toUpperCase()+i.name.slice(1),onChange:s,value:i.info,type:i.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":i.info}})},`${i.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(u,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(u,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:h,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(u,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
129
129
  display: flex;
130
130
  justify-content: space-between;
131
131
  max-width: 100%;
132
- `,de=({id:n,hasSubmit:o,submitText:l,handleSubmit:s,hasEdit:r,editText:h,handleEdit:d,hasCancel:i,cancelText:b,handleCancel:g,hasDelete:y,deleteText:u,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx(f,{id:`form-${n}-submit`,buttonType:"submit",text:l??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(f,{id:`form-${n}-edit`,buttonType:"button",text:h??"Edit",onClick:d,className:"edit-form-btn"}),i&&e.jsx(f,{id:`form-${n}-cancel`,buttonType:"button",text:b??"Cancel",onClick:g,className:"cancel-form-btn"}),y&&e.jsx(f,{id:`form-${n}-delete`,buttonType:"button",text:u??"Delete",onClick:p,className:"delete-form-btn"})]}),M=c.legend`
132
+ `,de=({id:n,hasSubmit:o,submitText:l,handleSubmit:s,hasEdit:r,editText:h,handleEdit:d,hasCancel:i,cancelText:b,handleCancel:g,hasDelete:y,deleteText:f,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx(u,{id:`form-${n}-submit`,buttonType:"submit",text:l??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(u,{id:`form-${n}-edit`,buttonType:"button",text:h??"Edit",onClick:d,className:"edit-form-btn"}),i&&e.jsx(u,{id:`form-${n}-cancel`,buttonType:"button",text:b??"Cancel",onClick:g,className:"cancel-form-btn"}),y&&e.jsx(u,{id:`form-${n}-delete`,buttonType:"button",text:f??"Delete",onClick:p,className:"delete-form-btn"})]}),M=c.legend`
133
133
  font-size: ${t.spacing.medium};
134
134
  font-weight: 500;
135
135
  margin-bottom: ${t.spacing.small};
@@ -168,4 +168,4 @@
168
168
  flex-direction: column;
169
169
  align-items: center;
170
170
  justify-content: center;
171
- `,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:u=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:D,handleCancel:L,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:F,children:A})=>e.jsxs(me,{id:`${s}-form`,className:F,onSubmit:w,children:[n?n.map((a,$)=>e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(M,{children:a.legend}),a.inputs.length!==0?a.inputs.map((x,N)=>e.jsxs(v.Fragment,{children:[x.type==="textarea"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),(x.type==="radio"||x.type==="checkbox")&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.type!=="textarea"&&x.type!=="radio"&&x.type!=="checkbox"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),"//* For editable data e.g. address entry, education entry",x.editable&&x.editing&&e.jsx(I,{legend:`${a.legend} ${N+1}`,idx:N,editableInformation:x?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:x?.onClickSave,onClickCancelEdit:x?.onClickCancel,onClickDeleteEntry:x?.onClickDelete})]},`form-${s}-${N}`)):a.expandable?e.jsx(G,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(M,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),"//*For editable data e.g. address entry, education entry",a.editable&&a.editing&&e.jsx(I,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):l?e.jsx(G,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),l&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:u,cancelText:D,handleCancel:L,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(be,{className:"children-container",children:A})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(n)||l.test(n)||CSS.supports("color",n)},m=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},ue={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},R={name:"light",colors:{text:m("#333446"),bg:m("#EEEEEE"),blue:m("#7F8CAA"),blue2:m("#80A6FF"),teal:m("#5b8280ff"),teal2:m("#AEEAE7"),gray:m("#AEAEAE"),information:m("#202234"),success:m("#123524"),warning:m("#F2C265"),error:m("#990000")}},K={name:"dark",colors:{bg:m("#333446"),text:m("#EEEEEE"),blue:m("#80A6FF"),blue2:m("#7F8CAA"),teal:m("#AEEAE7"),teal2:m("#5b8280ff"),gray:m("#D0D0DD"),information:m("#C9E6F0"),success:m("#9EDF9C"),warning:m("#FCFFC1"),error:m("#FAD4D4")}},O=v.createContext(void 0),fe=({children:n})=>{const[o,l]=v.useState(R),s=()=>{l(r=>r===R?K:R)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ge=()=>v.useContext(O);exports.DynamicForm=xe;exports.ThemeContext=O;exports.ThemeContextProvider=fe;exports.breakpoints=ue;exports.darkTheme=K;exports.lightTheme=R;exports.useTheme=ge;
171
+ `,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:f=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:D,handleCancel:R,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:F,children:A})=>e.jsxs(me,{id:`${s}-form`,className:F,onSubmit:w,children:[n?n.map((a,$)=>e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(M,{children:a.legend}),a.inputs.length!==0?a.inputs.map((x,N)=>e.jsxs(v.Fragment,{children:[x.type==="textarea"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),(x.type==="radio"||x.type==="checkbox")&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.type!=="textarea"&&x.type!=="radio"&&x.type!=="checkbox"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.editable&&x.editing&&e.jsx(I,{legend:`${a.legend} ${N+1}`,idx:N,editableInformation:x?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:x?.onClickSave,onClickCancelEdit:x?.onClickCancel,onClickDeleteEntry:x?.onClickDelete})]},`form-${s}-${N}`)):a.expandable?e.jsx(G,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(u,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(M,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.editable&&a.editing&&e.jsx(I,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):l?e.jsx(G,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),l&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(u,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:f,cancelText:D,handleCancel:R,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(be,{className:"children-container",children:A})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(n)||l.test(n)||CSS.supports("color",n)},m=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},fe={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},L={name:"light",colors:{text:m("#333446"),bg:m("#EEEEEE"),blue:m("#7F8CAA"),blue2:m("#80A6FF"),teal:m("#5b8280ff"),teal2:m("#AEEAE7"),gray:m("#AEAEAE"),information:m("#202234"),success:m("#123524"),warning:m("#F2C265"),error:m("#990000")}},K={name:"dark",colors:{bg:m("#333446"),text:m("#EEEEEE"),blue:m("#80A6FF"),blue2:m("#7F8CAA"),teal:m("#AEEAE7"),teal2:m("#5b8280ff"),gray:m("#D0D0DD"),information:m("#C9E6F0"),success:m("#9EDF9C"),warning:m("#FCFFC1"),error:m("#FAD4D4")}},O=v.createContext(void 0),ue=({children:n})=>{const[o,l]=v.useState(L),s=()=>{l(r=>r===L?K:L)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ge=()=>v.useContext(O);exports.DynamicForm=xe;exports.ThemeContext=O;exports.ThemeContextProvider=ue;exports.breakpoints=fe;exports.darkTheme=K;exports.lightTheme=L;exports.useTheme=ge;
@@ -179,7 +179,7 @@ const t = {
179
179
  `, j = V((n, o) => {
180
180
  const { type: i, id: l, onChange: r, isRequired: f, dataAttributes: d, disabled: s, className: b } = n;
181
181
  if (i === "textarea") {
182
- const { rows: C = 5, cols: N = 30, value: T, ...S } = n;
182
+ const { rows: C = 5, cols: F = 30, value: T, ...S } = n;
183
183
  return /* @__PURE__ */ e(
184
184
  de,
185
185
  {
@@ -187,7 +187,7 @@ const t = {
187
187
  onChange: r,
188
188
  value: T,
189
189
  rows: C,
190
- cols: N,
190
+ cols: F,
191
191
  ...d,
192
192
  className: b,
193
193
  ref: o,
@@ -197,7 +197,7 @@ const t = {
197
197
  );
198
198
  }
199
199
  if (i === "radio" || i === "checkbox") {
200
- const { checked: C, ...N } = n;
200
+ const { checked: C, ...F } = n;
201
201
  return /* @__PURE__ */ e(
202
202
  q,
203
203
  {
@@ -212,7 +212,7 @@ const t = {
212
212
  }
213
213
  );
214
214
  }
215
- const $ = n, { value: p, pattern: g, placeholderText: k, ...F } = $;
215
+ const $ = n, { value: p, pattern: g, placeholderText: k, ...N } = $;
216
216
  return /* @__PURE__ */ e(
217
217
  q,
218
218
  {
@@ -244,15 +244,15 @@ const t = {
244
244
  isRequired: p,
245
245
  dataAttributes: g,
246
246
  inputClass: k,
247
- ref: F,
247
+ ref: N,
248
248
  disabled: C,
249
- isEditable: N,
249
+ isEditable: F,
250
250
  editIcon: T,
251
251
  onClickEdit: S,
252
252
  deleteIcon: L,
253
- onClickDelete: R,
253
+ onClickDelete: B,
254
254
  idx: z,
255
- children: B
255
+ children: R
256
256
  } = n;
257
257
  return /* @__PURE__ */ u(oe, { className: `${o} ${l.replace("#", "")}-label-input-container`, children: [
258
258
  i !== "radio" && i !== "checkbox" && /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b }),
@@ -271,7 +271,7 @@ const t = {
271
271
  cols: E,
272
272
  ...g,
273
273
  className: k,
274
- ref: F,
274
+ ref: N,
275
275
  disabled: C
276
276
  }
277
277
  );
@@ -290,7 +290,7 @@ const t = {
290
290
  isRequired: p,
291
291
  ...g,
292
292
  className: k,
293
- ref: F,
293
+ ref: N,
294
294
  disabled: C,
295
295
  pattern: D
296
296
  }
@@ -302,7 +302,7 @@ const t = {
302
302
  /* @__PURE__ */ e(
303
303
  j,
304
304
  {
305
- ref: F,
305
+ ref: N,
306
306
  type: "checkbox",
307
307
  name: l,
308
308
  id: l,
@@ -317,12 +317,11 @@ const t = {
317
317
  /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b })
318
318
  ] });
319
319
  })(),
320
- "// * Radio inputs usually have labels next to them",
321
- N && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
320
+ F && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
322
321
  /* @__PURE__ */ e(x, { id: `editable-${l}-edit-btn`, svg: T, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: g }),
323
- /* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick: R, className: `delete-radio-${z}`, dataAttributes: g })
322
+ /* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: g })
324
323
  ] }),
325
- B
324
+ R
326
325
  ] });
327
326
  }, me = c.fieldset`
328
327
  padding: 0;
@@ -439,7 +438,7 @@ const t = {
439
438
  flex-direction: column;
440
439
  align-items: center;
441
440
  justify-content: center;
442
- `, Fe = ({
441
+ `, Ne = ({
443
442
  fieldsets: n = null,
444
443
  //* if a form has differrent fieldsets
445
444
  legendText: o,
@@ -458,20 +457,20 @@ const t = {
458
457
  hasSubmit: p = !1,
459
458
  hasCancel: g = !1,
460
459
  hasDelete: k = !1,
461
- hasEdit: F = !1,
460
+ hasEdit: N = !1,
462
461
  submitText: C,
463
- handleSubmitForm: N,
462
+ handleSubmitForm: F,
464
463
  handleSubmit: T,
465
464
  cancelText: S,
466
465
  handleCancel: L,
467
- deleteText: R,
466
+ deleteText: B,
468
467
  handleDelete: z,
469
- editText: B,
468
+ editText: R,
470
469
  handleEdit: w,
471
470
  className: E,
472
471
  children: D
473
472
  //* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
474
- }) => /* @__PURE__ */ u(xe, { id: `${l}-form`, className: E, onSubmit: N, children: [
473
+ }) => /* @__PURE__ */ u(xe, { id: `${l}-form`, className: E, onSubmit: F, children: [
475
474
  n ? n.map((a, y) => /* @__PURE__ */ u(H, { children: [
476
475
  /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${y}`, className: "form-fieldset", children: [
477
476
  a.legend && /* @__PURE__ */ e(M, { children: a.legend }),
@@ -506,7 +505,6 @@ const t = {
506
505
  idx: v
507
506
  }
508
507
  ),
509
- "//* For editable data e.g. address entry, education entry",
510
508
  h.editable && h.editing && /* @__PURE__ */ e(
511
509
  I,
512
510
  {
@@ -556,7 +554,6 @@ const t = {
556
554
  idx: y
557
555
  }
558
556
  ),
559
- "//*For editable data e.g. address entry, education entry",
560
557
  a.editable && a.editing && /* @__PURE__ */ e(
561
558
  I,
562
559
  {
@@ -580,14 +577,14 @@ const t = {
580
577
  hasSubmit: p,
581
578
  submitText: C,
582
579
  handleSubmit: T,
583
- hasEdit: F,
584
- editText: B,
580
+ hasEdit: N,
581
+ editText: R,
585
582
  handleEdit: w,
586
583
  hasCancel: g,
587
584
  cancelText: S,
588
585
  handleCancel: L,
589
586
  hasDelete: k,
590
- deleteText: R,
587
+ deleteText: B,
591
588
  handleDelete: z
592
589
  }
593
590
  ),
@@ -598,7 +595,7 @@ const t = {
598
595
  }, m = (n) => {
599
596
  if (!ye(n)) throw new Error(`Invalid color: ${n}`);
600
597
  return n;
601
- }, Ne = {
598
+ }, Fe = {
602
599
  mobile: "320px",
603
600
  //Small iPhone SE & Medium: iPhone 12-15
604
601
  tablet: "768px",
@@ -644,10 +641,10 @@ const t = {
644
641
  return /* @__PURE__ */ e(K.Provider, { value: { currentTheme: o, toggleTheme: l }, children: /* @__PURE__ */ e(_, { theme: o, children: n }) });
645
642
  }, ve = () => Z(K);
646
643
  export {
647
- Fe as DynamicForm,
644
+ Ne as DynamicForm,
648
645
  K as ThemeContext,
649
646
  Ee as ThemeContextProvider,
650
- Ne as breakpoints,
647
+ Fe as breakpoints,
651
648
  pe as darkTheme,
652
649
  O as lightTheme,
653
650
  ve as useTheme
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kbgarcia8/react-dynamic-form",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A form that can be nested with editable, expandable and flexible input-forms",
5
5
  "keywords": [
6
6
  "form",