form-builder-pro 1.0.1 → 1.0.2

package/dist/index.css

@@ -594,6 +594,42 @@ video {
     max-width: 1536px;
   }
 }
+/* ===== MOBILE-FIRST RESPONSIVE LAYOUT ===== */
+/* On mobile (< 768px): Stack vertically, make sidebars collapsible */
+/* On desktop (≥ 768px): Horizontal layout with fixed sidebars */
+/* Make sidebars collapsible on mobile only */
+@media (max-width: 767px) {
+
+    /* Toolbox: Collapsible on mobile */
+    .form-builder-toolbox-wrapper {
+      max-height: 300px;
+      overflow-y: auto;
+      border-bottom: 1px solid rgb(229 231 235);
+    }
+
+    .form-builder-toolbox-wrapper.collapsed {
+      max-height: 48px;
+      overflow: hidden;
+    }
+
+    /* Config panel: Collapsible on mobile */
+    .form-builder-config-wrapper {
+      max-height: 400px;
+      overflow-y: auto;
+      border-top: 1px solid rgb(229 231 235);
+    }
+
+    .form-builder-config-wrapper.collapsed {
+      max-height: 48px;
+      overflow: hidden;
+    }
+
+    /* Canvas gets more space on mobile */
+    .form-builder-canvas {
+      flex: 1;
+      min-height: 400px;
+    }
+  }
 /* Grid column spans - explicit !important to override Angular styles */
 .form-builder-field-wrapper.selected-field {
     border: 2px solid #3b82f6 !important;
@@ -645,6 +681,29 @@ video {
     grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
     gap: 1rem !important;
   }
+/* Responsive grid: fewer columns on mobile */
+@media (max-width: 767px) {
+    .form-builder-grid {
+      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+      gap: 0.75rem !important;
+    }
+
+    /* All fields full width on mobile */
+    .form-builder-grid .col-span-1,
+    .form-builder-grid .col-span-2,
+    .form-builder-grid .col-span-3,
+    .form-builder-grid .col-span-4,
+    .form-builder-grid .col-span-5,
+    .form-builder-grid .col-span-6,
+    .form-builder-grid .col-span-7,
+    .form-builder-grid .col-span-8,
+    .form-builder-grid .col-span-9,
+    .form-builder-grid .col-span-10,
+    .form-builder-grid .col-span-11,
+    .form-builder-grid .col-span-12 {
+      grid-column: span 1 / span 1 !important;
+    }
+  }
 body {
     font-family: Poppins, sans-serif;
   }
@@ -751,9 +810,6 @@ body {
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
-.h-10 {
-  height: 2.5rem;
-}
 .h-4 {
   height: 1rem;
 }
@@ -778,15 +834,15 @@ body {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-touch {
+  min-height: 44px;
+}
 .w-4 {
   width: 1rem;
 }
 .w-5 {
   width: 1.25rem;
 }
-.w-80 {
-  width: 20rem;
-}
 .w-9 {
   width: 2.25rem;
 }
@@ -846,21 +902,11 @@ body {
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -909,6 +955,9 @@ body {
 .border-r {
   border-right-width: 1px;
 }
+.border-t {
+  border-top-width: 1px;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1027,10 +1076,6 @@ body {
 .text-center {
   text-align: center;
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1393,4 +1438,94 @@ body {
 .dark\:hover\:bg-gray-800:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+
+@media (min-width: 640px) {
+
+  .sm\:h-5 {
+    height: 1.25rem;
+  }
+
+  .sm\:h-6 {
+    height: 1.5rem;
+  }
+
+  .sm\:w-5 {
+    width: 1.25rem;
+  }
+
+  .sm\:w-6 {
+    width: 1.5rem;
+  }
+
+  .sm\:w-auto {
+    width: auto;
+  }
+
+  .sm\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+
+  .md\:w-80 {
+    width: 20rem;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+
+  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
+  .md\:border-b-0 {
+    border-bottom-width: 0px;
+  }
+
+  .md\:border-l {
+    border-left-width: 1px;
+  }
+
+  .md\:border-r {
+    border-right-width: 1px;
+  }
+
+  .md\:border-t-0 {
+    border-top-width: 0px;
+  }
+
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }

package/dist/index.js

@@ -4501,7 +4501,7 @@ var FieldRenderer = class {
     const wrapper = createElement("div", { className: "w-full" });
     if (field.type !== "checkbox") {
       const label = createElement("label", {
-        className: "text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
+        className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
         text: field.label
       });
       if (field.required) {
@@ -4510,7 +4510,7 @@ var FieldRenderer = class {
       wrapper.appendChild(label);
     } else {
       const label = createElement("label", {
-        className: "text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
+        className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
         text: field.label
       });
       if (field.required) {
@@ -4522,7 +4522,7 @@ var FieldRenderer = class {
     switch (field.type) {
       case "textarea":
         input = createElement("textarea", {
-          className: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: field.placeholder,
           value: value || "",
           disabled: readOnly,
@@ -4531,7 +4531,7 @@ var FieldRenderer = class {
         break;
       case "select":
         input = createElement("select", {
-          className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           value: value || "",
           disabled: readOnly,
           onchange: (e) => onChange?.(e.target.value)
@@ -4542,10 +4542,10 @@ var FieldRenderer = class {
         });
         break;
       case "checkbox":
-        input = createElement("div", { className: "flex items-center h-10" });
+        input = createElement("div", { className: "flex items-center min-h-touch" });
         const checkbox = createElement("input", {
           type: "checkbox",
-          className: "h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer",
+          className: "h-5 w-5 sm:h-6 sm:w-6 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer",
           checked: !!value,
           disabled: readOnly,
           onchange: (e) => onChange?.(e.target.checked)
@@ -4555,18 +4555,18 @@ var FieldRenderer = class {
       case "radio":
         input = createElement("div", { className: "space-y-2" });
         field.options?.forEach((opt) => {
-          const radioWrapper = createElement("div", { className: "flex items-center space-x-2" });
+          const radioWrapper = createElement("div", { className: "flex items-center space-x-2 min-h-touch" });
           const radio = createElement("input", {
             type: "radio",
             name: field.id,
             value: opt.value,
             checked: value === opt.value,
             disabled: readOnly,
-            className: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "aspect-square h-4 w-4 sm:h-5 sm:w-5 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             onchange: (e) => onChange?.(e.target.value)
           });
           const radioLabel = createElement("label", {
-            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            className: "text-xs sm:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
             text: opt.label
           });
           radioWrapper.appendChild(radio);
@@ -4577,7 +4577,7 @@ var FieldRenderer = class {
       default:
         input = createElement("input", {
           type: field.type === "phone" ? "tel" : field.type,
-          className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: field.placeholder,
           value: value || "",
           disabled: readOnly,
@@ -4586,7 +4586,7 @@ var FieldRenderer = class {
     }
     wrapper.appendChild(input);
     if (field.description) {
-      wrapper.appendChild(createElement("p", { className: "text-sm text-muted-foreground mt-1", text: field.description }));
+      wrapper.appendChild(createElement("p", { className: "text-xs sm:text-sm text-muted-foreground mt-1", text: field.description }));
     }
     return wrapper;
   }
@@ -4610,11 +4610,11 @@ var FormRenderer = class {
   }
   render() {
     this.container.innerHTML = "";
-    const form = createElement("form", { className: "space-y-8" });
-    form.appendChild(createElement("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", text: this.schema.title }));
+    const form = createElement("form", { className: "space-y-6 md:space-y-8" });
+    form.appendChild(createElement("h1", { className: "text-xl md:text-2xl font-bold text-gray-900 dark:text-white", text: this.schema.title }));
     this.schema.sections.forEach((section) => {
-      const sectionEl = createElement("div", { className: "space-y-4" });
-      sectionEl.appendChild(createElement("h2", { className: "text-xl font-semibold text-gray-800 dark:text-gray-200 border-b pb-2", text: section.title }));
+      const sectionEl = createElement("div", { className: "space-y-3 md:space-y-4" });
+      sectionEl.appendChild(createElement("h2", { className: "text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-200 border-b pb-2", text: section.title }));
       const grid = createElement("div", { className: "form-builder-grid" });
       section.fields.forEach((field) => {
         const fieldWrapper = createElement("div");
@@ -4641,14 +4641,14 @@ var FormRenderer = class {
     });
     const submitBtn = createElement("button", {
       type: "submit",
-      className: "px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
+      className: "w-full sm:w-auto px-6 py-3 min-h-touch bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
       text: "Submit"
     });
     form.onsubmit = (e) => {
       e.preventDefault();
       this.onSubmit?.(this.data);
     };
-    const btnWrapper = createElement("div", { className: "pt-4" });
+    const btnWrapper = createElement("div", { className: "pt-4 flex justify-center sm:justify-start" });
     btnWrapper.appendChild(submitBtn);
     form.appendChild(btnWrapper);
     this.container.appendChild(form);
@@ -7007,7 +7007,7 @@ var FormBuilder = class {
     this.container.innerHTML = "";
     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" });
+    const main = createElement("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden" });
     if (state.isPreviewMode) {
       const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
       const inner = createElement("div", { className: "w-full max-w-3xl" });
@@ -7015,9 +7015,15 @@ var FormBuilder = class {
       previewContainer.appendChild(inner);
       main.appendChild(previewContainer);
     } else {
-      main.appendChild(this.renderToolbox());
-      main.appendChild(this.renderCanvas(state));
-      main.appendChild(this.renderConfigPanel(state));
+      const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
+      toolboxWrapper.appendChild(this.renderToolbox());
+      main.appendChild(toolboxWrapper);
+      const canvasWrapper = createElement("div", { className: "form-builder-canvas flex-1 overflow-y-auto" });
+      canvasWrapper.appendChild(this.renderCanvas(state));
+      main.appendChild(canvasWrapper);
+      const configWrapper = createElement("div", { className: "form-builder-config-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-l md:border-l border-t md:border-t-0 border-gray-200 dark:border-gray-800" });
+      configWrapper.appendChild(this.renderConfigPanel(state));
+      main.appendChild(configWrapper);
     }
     wrapper.appendChild(main);
     this.container.appendChild(wrapper);
@@ -7115,7 +7121,7 @@ var FormBuilder = class {
     return toolbar;
   }
   renderToolbox() {
-    const toolbox = createElement("div", { className: "w-80 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-full" });
+    const toolbox = createElement("div", { className: "bg-white 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 createTab = (id, label) => {
       const isActive = this.activeTab === id;
@@ -7214,7 +7220,7 @@ var FormBuilder = class {
   }
   renderCanvas(state) {
     const canvas = createElement("div", {
-      className: "flex-1 bg-white dark:bg-gray-950 p-8 overflow-y-auto h-full",
+      className: "flex-1 bg-white 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);
@@ -7331,7 +7337,7 @@ var FormBuilder = class {
     return canvas;
   }
   renderConfigPanel(state) {
-    const panel = createElement("div", { className: "w-80 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 flex flex-col h-full" });
+    const panel = createElement("div", { className: "bg-white dark:bg-gray-900 flex flex-col h-full" });
     const selectedField = state.schema.sections.flatMap((s) => s.fields).find((f) => f.id === state.selectedFieldId);
     if (!selectedField) {
       panel.appendChild(createElement("div", { className: "p-6 text-center text-gray-500", text: "Select a field to configure" }));