@arudovwen/form-builder-react 1.0.8 → 1.1.0

package/README.md

@@ -71,6 +71,7 @@ function App() {
       <FormBuilder
         onSubmit={(form_data: any) => console.log(form_data)}
         config={config}
+        title="My Form Title"
       />
       <FormViewer
         onSubmit={(e: any) => console.log(e)}
@@ -90,6 +91,7 @@ export default App;
 
 | Prop         | Type               | Description                                      |
 |--------------|--------------------|--------------------------------------------------|
+| `title`      | `string`           | TItle of the form, optional   |
 | `form_data`  | `FormElement[]`    | Array of form elements to render in the form.   |
 | `answerData` | `any[]`            | Array of user-provided answers to the form.     |
 | `config`     | `object`           | Configuration object (e.g., `buttonColor`, `loaderColor`). |

package/dist/form-builder.es.js

@@ -14599,7 +14599,7 @@ const Sw = () => {
         borderColor: s.color,
         color: s.color
       },
-      className: `cursor-move text-[#475467] flex justify-between items-center \r
+      className: `cursor-move text-[#475467] flex justify-between items-center  h-11\r
                            border border-[#98A2B3] rounded-lg py-3 px-[14px] shadow-custom\r
                            hover:shadow-lg transition-all duration-200\r
                            active:opacity-50`,
@@ -14634,42 +14634,48 @@ const Sw = () => {
     /* @__PURE__ */ m.jsx("div", { className: "max-h-[90vh] overflow-y-auto h-full min-h-[600px] w-full", children: /* @__PURE__ */ m.jsx(Mw, { form_data: n, ignoreValidation: !0 }) })
   ] }) }) : null;
 };
-function Ow() {
-  const { addSection: e } = he(Et), [t, n] = W(!1);
-  return /* @__PURE__ */ m.jsxs("div", { className: "px-[30px] py-[10px] flex justify-between items-center", children: [
-    /* @__PURE__ */ m.jsx("div", { className: "flex gap-x-4  items-center" }),
-    t && /* @__PURE__ */ m.jsx(
+function Ow({ title: e }) {
+  const { addSection: t } = he(Et), [n, r] = W(!1);
+  return /* @__PURE__ */ m.jsxs("div", { className: "px-[30px] py-[10px] flex justify-between items-center bg-[#F9F9FB]", children: [
+    /* @__PURE__ */ m.jsx("h1", { className: "font-semibold text-lg", children: e || "" }),
+    n && /* @__PURE__ */ m.jsx(
       Cw,
       {
-        isOpen: t,
-        onClose: () => n(!1),
+        isOpen: n,
+        onClose: () => r(!1),
         element: void 0
       }
     ),
-    /* @__PURE__ */ m.jsxs("div", { className: "py-4 flex justify-end gap-x-6 text-sm", children: [
+    /* @__PURE__ */ m.jsxs("div", { className: "py-4 flex justify-end gap-x-6 text-base", children: [
       /* @__PURE__ */ m.jsx(
         Vn,
         {
-          onClick: () => e(),
+          onClick: () => t(),
           text: "Add section",
-          btnClass: "text-gray-700 border-[#98A2B3] !font-medium bg-transparent"
+          btnClass: "text-gray-700 border-[#98A2B3] !font-medium bg-transparent",
+          icon: "icon-park-outline:plus"
         }
       ),
       /* @__PURE__ */ m.jsx(
         Vn,
         {
-          onClick: () => n(!0),
+          onClick: () => r(!0),
           text: "Preview",
-          btnClass: "text-gray-700 border-[#98A2B3] !font-medium"
+          btnClass: "text-gray-700 border-[#98A2B3] !font-medium",
+          icon: "solar:eye-bold-duotone"
         }
       )
     ] })
   ] });
 }
-function Rw({ onSubmit: e, questionData: t }) {
+function Rw({
+  onSubmit: e,
+  questionData: t,
+  title: n
+}) {
   return /* @__PURE__ */ m.jsx($u, { children: /* @__PURE__ */ m.jsxs("div", { className: "w-full h-screen bg-[#E4E7EC] flex flex-col", children: [
     /* @__PURE__ */ m.jsx(Rd, {}),
-    /* @__PURE__ */ m.jsx("div", { className: "border-b  bg-white  border-[#E4E7EC]", children: /* @__PURE__ */ m.jsx(Ow, {}) }),
+    /* @__PURE__ */ m.jsx("div", { className: "border-b  bg-white  border-[#E4E7EC]", children: /* @__PURE__ */ m.jsx(Ow, { title: n }) }),
     /* @__PURE__ */ m.jsxs("div", { className: "flex flex-1 ", children: [
       /* @__PURE__ */ m.jsx("div", { className: "w-[270px]  h-full border-l border-[#E4E7EC] bg-white", children: /* @__PURE__ */ m.jsx(_w, {}) }),
       /* @__PURE__ */ m.jsx("div", { className: "flex-1 h-full max-h-full p-4 z-[1]", children: /* @__PURE__ */ m.jsx(Tw, { questionData: t }) })
@@ -14683,7 +14689,8 @@ const Hw = ({
   isReadOnly: n,
   config: r = {
     buttonColor: "#333"
-  }
+  },
+  title: i
 }) => (Q(() => {
   r && Nu("config", r);
 }, [r]), /* @__PURE__ */ m.jsx(
@@ -14691,7 +14698,8 @@ const Hw = ({
   {
     onSubmit: e,
     questionData: t,
-    isReadOnly: n
+    isReadOnly: n,
+    title: i
   }
 )), Fw = () => (Q(() => {
   const e = Di("config"), t = (e == null ? void 0 : e.loaderColor) || "#333";