form-builder-pro 0.0.3 → 0.0.5

package/dist/index.mjs

@@ -4053,6 +4053,7 @@ var NEVER = INVALID;
 var FormSchemaValidation = external_exports.object({
   id: external_exports.string(),
   title: external_exports.string(),
+  formName: external_exports.string(),
   sections: external_exports.array(external_exports.object({
     id: external_exports.string(),
     title: external_exports.string(),
@@ -4127,6 +4128,7 @@ var DEFAULT_FIELD_CONFIG = {
 var INITIAL_SCHEMA = {
   id: "form_1",
   title: "My New Form",
+  formName: "myNewForm",
   sections: [
     {
       id: generateId(),
@@ -25181,7 +25183,7 @@ var FormBuilder = class {
       }
     }
     this.container.innerHTML = "";
-    const wrapper = createElement("div", { className: "flex flex-col h-screen bg-gray-100 dark:bg-gray-950" });
+    const wrapper = createElement("div", { className: "flex flex-col h-screen " });
     wrapper.appendChild(this.renderToolbar(state));
     const main = createElement("div", { className: "flex flex-1 overflow-hidden" });
     if (state.isPreviewMode) {
@@ -25216,7 +25218,7 @@ var FormBuilder = class {
   renderToolbar(state) {
     const toolbar = createElement("div", { className: "flex items-center justify-between p-4 border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800" });
     const left = createElement("div", { className: "flex items-center space-x-2" });
-    left.appendChild(createElement("h1", { className: "text-xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent mr-4", text: "FormBuilder Pro" }));
+    left.appendChild(createElement("h1", { className: "text-xl font-semibold mb-2 text-primary  mr-4", text: "FormBuilder Pro" }));
     const undoBtn = createElement("button", {
       className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
       title: "Undo",
@@ -25237,7 +25239,7 @@ var FormBuilder = class {
       className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-md transition-colors",
       onclick: () => {
         if (confirm("Are you sure?")) {
-          formStore.getState().setSchema({ id: "new", title: "New Form", sections: [] });
+          formStore.getState().setSchema({ id: "new", title: "New Form", formName: "newForm", sections: [] });
         }
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "ml-2", text: "Clear" })]);
@@ -25246,7 +25248,7 @@ var FormBuilder = class {
       onclick: () => formStore.getState().togglePreview()
     }, [getIcon("Eye", 16), createElement("span", { className: "ml-2", text: state.isPreviewMode ? "Edit" : "Preview" })]);
     const saveBtn = createElement("button", {
-      className: "flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm transition-colors",
+      className: "flex items-center px-4 py-2 text-sm font-medium text-white bg-[#019FA2] hover:bg-[#3B497E] rounded-md shadow-sm transition-colors",
       onclick: () => {
         const schema = formStore.getState().schema;
         console.log("Schema saved:", schema);
@@ -25262,16 +25264,16 @@ var FormBuilder = class {
     return toolbar;
   }
   renderToolbox() {
-    const toolbox = createElement("div", { className: "w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-4 overflow-y-auto h-full" });
+    const toolbox = createElement("div", { className: "w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-4 overflow-y-auto h-full" });
     toolbox.appendChild(createElement("h2", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4", text: "Form Fields" }));
-    const list = createElement("div", { className: "space-y-1", id: "toolbox-list" });
+    const list = createElement("div", { className: " grid grid-cols-2 gap-3", id: "toolbox-list" });
     FIELD_TYPES.forEach((field) => {
       const item = createElement("div", {
-        className: "flex items-center p-3 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md cursor-move hover:border-blue-500 hover:shadow-sm transition-all toolbox-item",
+        className: "grid justify-center items-center p-3 bg-[#f2f3f7] dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md cursor-move hover:border-secondary hover:shadow-sm transition-all toolbox-item mt-0",
         "data-type": field.type
       });
-      item.appendChild(createElement("span", { className: "mr-3 text-gray-500 dark:text-gray-400" }, [getIcon(field.icon, 16)]));
-      item.appendChild(createElement("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", text: field.label }));
+      item.appendChild(createElement("span", { className: " text-gray-500 mb-1 dark:text-gray-400 inline-flex mx-auto bg-[#019FA2] text-white w-9 h-9 rounded-sm p-1 justify-center items-center" }, [getIcon(field.icon, 16)]));
+      item.appendChild(createElement("span", { className: "text-xs font-semibold text-gray-700 dark:text-gray-200", text: field.label }));
       list.appendChild(item);
     });
     toolbox.appendChild(list);
@@ -25279,29 +25281,29 @@ var FormBuilder = class {
   }
   renderCanvas(state) {
     const canvas = createElement("div", {
-      className: "flex-1 bg-gray-100 dark:bg-gray-950 p-8 overflow-y-auto h-full",
+      className: "flex-1 bg-white dark:bg-gray-950 p-8 overflow-y-auto h-full",
       onclick: (e) => {
         if (e.target === canvas || e.target === canvas.firstElementChild) {
           formStore.getState().selectField(null);
         }
       }
     });
-    const inner = createElement("div", { className: "max-w-3xl mx-auto" });
-    const titleInput = createElement("input", {
-      className: "text-3xl font-bold text-center bg-transparent border-none focus:outline-none focus:ring-0 w-full text-gray-900 dark:text-white mb-8",
-      value: state.schema.title,
-      placeholder: "Form Title",
-      "data-focus-id": "form-title",
-      oninput: (e) => formStore.getState().setSchema({ ...state.schema, title: e.target.value })
+    const inner = createElement("div", { className: "mx-auto" });
+    const formNameInput = createElement("input", {
+      className: "text-lg border border-gray-200 dark:border-gray-700 rounded-md border-gray-200 p-2 bg-[#f2f3f7]  focus:outline-none focus:ring-0 w-full text-gray-600 dark:text-gray-400 mb-8",
+      value: state.schema.formName,
+      placeholder: "formName (e.g., contactForm)",
+      "data-focus-id": "form-name",
+      oninput: (e) => formStore.getState().setSchema({ ...state.schema, formName: e.target.value })
     });
-    inner.appendChild(titleInput);
+    inner.appendChild(formNameInput);
     const sectionsContainer = createElement("div", { className: "space-y-6 min-h-[200px]", id: "sections-list" });
     state.schema.sections.forEach((section) => {
       const sectionEl = createElement("div", {
         className: "mb-6 rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all border-gray-200 dark:border-gray-800",
         "data-id": section.id
       });
-      const header = createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 rounded-t-lg" });
+      const header = createElement("div", { className: "flex items-center justify-between  p-2 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 rounded-t-lg" });
       const headerLeft = createElement("div", { className: "flex items-center flex-1" });
       headerLeft.appendChild(createElement("div", { className: "cursor-move mr-3 text-gray-400 hover:text-gray-600 section-handle" }, [getIcon("GripVertical", 20)]));
       headerLeft.appendChild(createElement("input", {
@@ -25312,7 +25314,7 @@ var FormBuilder = class {
       }));
       header.appendChild(headerLeft);
       header.appendChild(createElement("button", {
-        className: "text-gray-400 hover:text-red-500 transition-colors p-1",
+        className: "text-gray-600 hover:text-red-500 transition-colors p-1",
         onclick: () => formStore.getState().removeSection(section.id)
       }, [getIcon("Trash2", 18)]));
       sectionEl.appendChild(header);