form-builder-pro 1.3.0 → 1.3.1

package/dist/index.css

@@ -863,21 +863,21 @@ body {
 .inset-0 {
   inset: 0px;
 }
-.right-1 {
-  right: 0.25rem;
-}
 .right-2 {
   right: 0.5rem;
 }
-.right-6 {
-  right: 1.5rem;
+.right-8 {
+  right: 2rem;
 }
-.top-1 {
-  top: 0.25rem;
+.right-\[16\%\] {
+  right: 16%;
 }
 .top-2 {
   top: 0.5rem;
 }
+.top-\[6px\] {
+  top: 6px;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1005,9 +1005,6 @@ body {
 .min-h-\[100px\] {
   min-height: 100px;
 }
-.min-h-\[120px\] {
-  min-height: 120px;
-}
 .min-h-\[200px\] {
   min-height: 200px;
 }
@@ -1035,6 +1032,9 @@ body {
 .w-8 {
   width: 2rem;
 }
+.w-\[256px\] {
+  width: 256px;
+}
 .w-\[300px\] {
   width: 300px;
 }
@@ -1044,8 +1044,8 @@ body {
 .max-w-2xl {
   max-width: 42rem;
 }
-.max-w-\[180px\] {
-  max-width: 180px;
+.max-w-\[140px\] {
+  max-width: 140px;
 }
 .max-w-full {
   max-width: 100%;
@@ -1254,17 +1254,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(1 159 162 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#3b497e\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 73 126 / var(--tw-bg-opacity, 1));
-}
 .bg-\[\#635bff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#847dff1a\] {
-  background-color: #847dff1a;
-}
 .bg-\[\#e7e7ff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(231 231 255 / var(--tw-bg-opacity, 1));
@@ -1331,8 +1324,8 @@ body {
 .p-8 {
   padding: 2rem;
 }
-.p-\[0\.5px\] {
-  padding: 0.5px;
+.p-\[2px\] {
+  padding: 2px;
 }
 .px-1 {
   padding-left: 0.25rem;
@@ -1757,6 +1750,16 @@ input[type="radio"]:checked::after {
   background-color: rgb(1 138 141 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-\[\#635bff\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-\[\#ef2f2f\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 47 47 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
@@ -1821,6 +1824,11 @@ input[type="radio"]:checked::after {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .hover\:shadow-sm:hover {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

package/dist/index.js

@@ -6279,7 +6279,7 @@ var FieldRenderer = class {
     const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
     const container = createElement("div", { className: "image-field-wrapper flex flex-col gap-3 w-full" });
     const previewWrap = createElement("div", {
-      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[120px] flex items-center justify-center"
+      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[100px] flex items-center justify-center"
     });
     if (imageValue) {
       const img = createElement("img", {
@@ -8936,13 +8936,13 @@ var FieldWrapper = class {
       });
     }
     if (isSelected) {
-      fieldWrapper.classList.add("ring-2", "bg-[#847dff1a]", "dark:bg-blue-900/20");
+      fieldWrapper.classList.add("ring-2", "bg-transparent", "dark:bg-blue-900/20");
     }
     fieldWrapper.appendChild(createElement("div", {
-      className: `absolute top-2 right-6 cursor-move p-1 rounded bg-[#3b497e] p-[0.5px] mr-1 text-white group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
-    }, [getIcon("GripVertical", 16)]));
+      className: `absolute top-[6px] bg-[#e7e7ff]  hover:bg-[#635bff] hover:text-white  right-8 cursor-move p-1 rounded  p-[2px] mr-1 text-[#635bff] group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
+    }, [getIcon("GripVertical", 20)]));
     fieldWrapper.appendChild(createElement("button", {
-      className: `absolute top-1 right-1 p-1 rounded text-red-500  group-hover:opacity-100 transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
+      className: `absolute top-[6px] right-2  rounded text-red-600 bg-[#f7a1a14d] text-red-500 p-1 hover:bg-[#ef2f2f] hover:text-white   group-hover:opacity-100  transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
       onclick: (e) => {
         e.stopPropagation();
         if (confirm("Delete this field?")) {
@@ -8950,7 +8950,7 @@ var FieldWrapper = class {
         }
       }
     }, [getIcon("Trash2", 16)]));
-    const content = createElement("div", { className: "p-3  pointer-events-none" });
+    const content = createElement("div", { className: "p-2  pointer-events-none " });
     content.appendChild(FieldRenderer.render(field, null, void 0, true));
     fieldWrapper.appendChild(content);
     return fieldWrapper;
@@ -9117,7 +9117,7 @@ var SectionList = class {
   }
   render() {
     const listContainer = createElement("div", {
-      className: "space-y-6 min-h-[200px] ",
+      className: "space-y-6 ",
       // pb-20 for extra scrolling space
       id: "sections-list",
       "data-drop-zone": "sections"
@@ -9636,7 +9636,7 @@ var FormBuilder = class {
     }, [getIcon("Cog", 20)]);
     right.appendChild(settingsBtn);
     const clearBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 rounded-md transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 hover:bg-[#ef2f2f] hover:text-white rounded-md transition-colors",
       onclick: () => {
         if (confirm("Are you sure?")) {
           formStore.getState().setSchema({ id: "new", title: "New Form", formName: "newForm", sections: [] });
@@ -9644,7 +9644,7 @@ var FormBuilder = class {
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "", title: "Clear" })]);
     const previewBtn = createElement("button", {
-      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] " : "text-[#635bff] bg-[#e7e7ff]"}`,
+      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white" : "text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white"}`,
       onclick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -9653,7 +9653,7 @@ var FormBuilder = class {
       title: state.isPreviewMode ? "Exit Preview" : "Preview Form"
     }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16)]);
     const saveBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff]  rounded-md shadow-sm transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white  rounded-md shadow-sm transition-colors",
       onclick: () => {
         const schema = formStore.getState().schema;
         const numericFields = schema.sections.flatMap((s) => s.fields).filter((f) => f.type === "number");
@@ -9824,7 +9824,7 @@ var FormBuilder = class {
     const sectionList = new SectionList(state.schema, state.selectedFieldId);
     inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
-      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[180px]  text-white transition-colors flex items-center justify-center font-medium",
+      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[140px]  text-white transition-colors flex items-center justify-center font-medium",
       onclick: () => formStore.getState().addSection()
     }, [getIcon("Plus", 20), createElement("span", { className: "ml-2", text: "Add Section" })]);
     inner.appendChild(addSectionBtn);
@@ -10492,10 +10492,10 @@ var FormBuilder = class {
         };
         const optionsList = createElement("div", { className: "space-y-2 mb-3" });
         options.forEach((opt, index2) => {
-          const optionRow = createElement("div", { className: "flex gap-2 items-center" });
+          const optionRow = createElement("div", { className: "flex gap-2 items-center w-[256px]" });
           const labelInput = createElement("input", {
             type: "text",
-            className: "flex-1 px-2 py-1.5 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+            className: "flex-1 px-2 py-1.5 border border-gray-300 w-full dark:border-gray-700 rounded-md bg-transparent text-sm",
             value: opt.label,
             placeholder: "Option label",
             "data-focus-id": `field-option-label-${selectedField.id}-${index2}`,
@@ -10510,7 +10510,7 @@ var FormBuilder = class {
           });
           const valueInput = createElement("input", {
             type: "text",
-            className: "flex-1 px-2 py-1.5 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+            className: "flex-1 px-2 py-1.5 border border-gray-300 w-full dark:border-gray-700 rounded-md bg-transparent text-sm",
             value: opt.value,
             placeholder: "Option value",
             "data-focus-id": `field-option-value-${selectedField.id}-${index2}`,
@@ -10544,7 +10544,7 @@ var FormBuilder = class {
         body.appendChild(optionsList);
         const addOptionBtn = createElement("button", {
           type: "button",
-          className: "w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
+          className: "w-full mt-6 py-2  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff]   text-white transition-colors flex items-center justify-center font-medium transition-colors",
           text: "Add Option",
           onclick: () => {
             const currentOptions = getCurrentOptions();