form-builder-pro 1.1.9 → 1.2.1

package/dist/index.css

@@ -632,7 +632,7 @@ video {
   }
 /* Grid column spans - explicit !important to override Angular styles */
 .form-builder-field-wrapper.selected-field {
-    border: 1px solid #3b497e !important;
+    border: 1px solid #635bff !important;
     border-radius: 6px;
     box-shadow: none;
   }
@@ -997,6 +997,9 @@ body {
 .w-full {
   width: 100%;
 }
+.max-w-\[180px\] {
+  max-width: 180px;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1134,9 +1137,6 @@ body {
 .border-b {
   border-bottom-width: 1px;
 }
-.border-b-2 {
-  border-bottom-width: 2px;
-}
 .border-l {
   border-left-width: 1px;
 }
@@ -1152,10 +1152,6 @@ body {
 .border-dashed {
   border-style: dashed;
 }
-.border-\[\#019FA2\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));
-}
 .border-\[\#e9e9e9\] {
   --tw-border-opacity: 1;
   border-color: rgb(233 233 233 / var(--tw-border-opacity, 1));
@@ -1198,12 +1194,12 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(59 73 126 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#acbdfe33\] {
-  background-color: #acbdfe33;
-}
-.bg-\[\#f8faff\] {
+.bg-\[\#635bff\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 250 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#847dff1a\] {
+  background-color: #847dff1a;
 }
 .bg-background {
   background-color: hsl(var(--background));
@@ -1360,10 +1356,6 @@ body {
 .tracking-wider {
   letter-spacing: 0.05em;
 }
-.text-\[\#019FA2\] {
-  --tw-text-opacity: 1;
-  color: rgb(1 159 162 / var(--tw-text-opacity, 1));
-}
 .text-\[\#3b497e\] {
   --tw-text-opacity: 1;
   color: rgb(59 73 126 / var(--tw-text-opacity, 1));
@@ -1432,6 +1424,11 @@ body {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow-\[0_17px_20px_-8px_rgba\(77\2c 91\2c 236\2c 0\.231372549\)\] {
+  --tw-shadow: 0 17px 20px -8px rgba(77,91,236,0.231372549);
+  --tw-shadow-colored: 0 17px 20px -8px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1485,17 +1482,21 @@ input[type="checkbox"] {
   -moz-appearance: none;
        appearance: none;
   -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  border: 2px solid #019FA2;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #635bff;
   border-radius: 4px;
   background-color: #f8faff;
   cursor: pointer;
+  min-height: 20px;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
+  
 }
 
 input[type="checkbox"]:checked {
-  background-color: #019FA2;
-  border-color: #019FA2;
+  background-color: #635bff;
+  border-color: #635bff;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 input[type="checkbox"]:checked::after {
@@ -1513,24 +1514,27 @@ input[type="radio"] {
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
-  border: 2px solid #019FA2;
+  border: 2px solid #635bff;
   border-radius: 50%;
   background-color: #fff;
   cursor: pointer;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 input[type="radio"]:checked {
-  border-color: #019FA2;
+  border-color: #635bff;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 input[type="radio"]:checked::after {
   content: "";
   width: 10px;
   height: 10px;
-  background-color: #019FA2;
+  background-color: #635bff;
   border-radius: 50%;
   display: block;
   margin: 2px auto;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 .file\:border-0::file-selector-button {

package/dist/index.js

@@ -8335,7 +8335,7 @@ var FieldWrapper = class {
       });
     }
     if (isSelected) {
-      fieldWrapper.classList.add("ring-2", "bg-[#acbdfe33]", "dark:bg-blue-900/20");
+      fieldWrapper.classList.add("ring-2", "bg-[#847dff1a]", "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" : ""}`
@@ -9032,12 +9032,12 @@ var FormBuilder = class {
     return toolbar;
   }
   renderToolbox() {
-    const toolbox = createElement("div", { className: "bg-[#f8faff] dark:bg-gray-900 flex flex-col h-full" });
-    const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800" });
+    const toolbox = createElement("div", { className: "bg-[#847dff1a] dark:bg-gray-900 flex flex-col h-full" });
+    const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800 p-1" });
     const createTab = (id, label) => {
       const isActive = this.activeTab === id;
       return createElement("button", {
-        className: `flex-1 py-3 text-sm font-medium transition-colors ${isActive ? "text-[#019FA2] border-b-2 border-[#019FA2]" : "text-gray-500 hover:text-gray-700 dark:text-gray-400"}`,
+        className: `flex-1 py-3 text-sm font-medium transition-colors ${isActive ? "text-white bg-[#635bff] rounded " : "text-gray-500 hover:text-gray-700 dark:text-gray-400"}`,
         text: label,
         onclick: () => {
           this.activeTab = id;
@@ -9049,7 +9049,7 @@ var FormBuilder = class {
     tabs.appendChild(createTab("templates", "Templates"));
     tabs.appendChild(createTab("import", "Import"));
     toolbox.appendChild(tabs);
-    const content = createElement("div", { className: "flex-1 overflow-y-auto p-4" });
+    const content = createElement("div", { className: "flex-1 overflow-y-auto p-4 bg-white" });
     if (this.activeTab === "fields") {
       const list = createElement("div", { className: "grid grid-cols-2 gap-3", id: "toolbox-list" });
       FIELD_TYPES.forEach((field) => {
@@ -9131,7 +9131,7 @@ var FormBuilder = class {
   }
   renderCanvas(state) {
     const canvas = createElement("div", {
-      className: "flex-1 bg-[#f8faff] dark:bg-gray-950 p-4 md:p-8 overflow-y-auto",
+      className: "flex-1 dark:bg-gray-950 p-4 md:p-8 overflow-y-auto",
       onclick: (e) => {
         if (e.target === canvas || e.target === canvas.firstElementChild) {
           formStore.getState().selectField(null);
@@ -9152,7 +9152,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-lg text-gray-500 bg-[#3b497e] text-white transition-colors flex items-center justify-center font-medium",
+      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-lg text-gray-500 bg-[#635bff] max-w-[180px] shadow-[0_17px_20px_-8px_rgba(77,91,236,0.231372549)] 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);
@@ -9186,7 +9186,7 @@ var FormBuilder = class {
     return container;
   }
   renderConfigPanel(state, focusState = null) {
-    const panel = createElement("div", { className: "bg-[#f8faff]  dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
+    const panel = createElement("div", { className: " dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
     const selectedField = state.schema.sections.flatMap((s) => s.fields).find((f) => f.id === state.selectedFieldId);
     if (!selectedField) {
       panel.appendChild(createElement("div", { className: "p-4 text-center text-gray-500", text: "Select a field to configure" }));