form-builder-pro 1.3.8 → 1.4.0

package/dist/index.css

@@ -744,11 +744,6 @@ body {
 /* Slider thumb (Firefox) */
 /* Slider track (Firefox) */
 /* Width value badge animation */
-.width-value-badge {
-    min-width: 40px;
-    text-align: center;
-    transition: transform 0.1s ease, background-color 0.15s ease;
-  }
 /* Preset buttons */
 /* Breakpoint markers */
 /* ===== PHONE ISD SELECTOR STYLES ===== */
@@ -942,6 +937,9 @@ body {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1041,6 +1039,9 @@ body {
 .w-full {
   width: 100%;
 }
+.min-w-0 {
+  min-width: 0px;
+}
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1088,6 +1089,9 @@ body {
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -1141,6 +1145,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)));
@@ -1184,6 +1193,9 @@ body {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
+.rounded-bl-md {
+  border-bottom-left-radius: calc(var(--radius) - 2px);
+}
 .border {
   border-width: 1px;
 }
@@ -1196,6 +1208,9 @@ body {
 .border-l {
   border-left-width: 1px;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1208,6 +1223,13 @@ body {
 .border-dashed {
   border-style: dashed;
 }
+.border-\[\#019FA2\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));
+}
+.border-\[\#635bff\]\/35 {
+  border-color: rgb(99 91 255 / 0.35);
+}
 .border-\[\#e7e7ff\] {
   --tw-border-opacity: 1;
   border-color: rgb(231 231 255 / var(--tw-border-opacity, 1));
@@ -1295,6 +1317,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-50\/50 {
+  background-color: rgb(249 250 251 / 0.5);
+}
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
@@ -1381,12 +1406,24 @@ body {
 .pb-20 {
   padding-bottom: 5rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
+.pl-3 {
+  padding-left: 0.75rem;
+}
 .pl-\[95px\] {
   padding-left: 95px;
 }
+.pt-0 {
+  padding-top: 0px;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
+.pt-3 {
+  padding-top: 0.75rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1444,6 +1481,10 @@ 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));
@@ -1516,6 +1557,11 @@ body {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 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;
@@ -1536,13 +1582,13 @@ body {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-\[\#635bff\] {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 91 255 / var(--tw-ring-opacity, 1));
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1757,6 +1803,10 @@ input[type="radio"]:checked::after {
   background-color: rgb(1 138 141 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-\[\#019FA2\]\/10:hover {
+  background-color: rgb(1 159 162 / 0.1);
+}
+
 .hover\:bg-\[\#635bff\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
@@ -1936,6 +1986,15 @@ input[type="radio"]:checked::after {
   opacity: 0.7;
 }
 
+.dark\:border-\[\#019FA2\]:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));
+}
+
+.dark\:border-\[\#635bff\]\/50:is(.dark *) {
+  border-color: rgb(99 91 255 / 0.5);
+}
+
 .dark\:border-gray-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
@@ -1970,6 +2029,14 @@ input[type="radio"]:checked::after {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-gray-800\/30:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.3);
+}
+
+.dark\:bg-gray-800\/40:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.4);
+}
+
 .dark\:bg-gray-800\/50:is(.dark *) {
   background-color: rgb(31 41 55 / 0.5);
 }
@@ -1984,6 +2051,11 @@ input[type="radio"]:checked::after {
   background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:text-\[\#4dd4d6\]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(77 212 214 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-blue-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity, 1));

package/dist/index.d.mts

@@ -156,6 +156,14 @@ interface ISDConfig {
     showCountryName: boolean;
     allowCustomCode: boolean;
 }
+/** Group / section position on the form canvas (payload: groups[].position) */
+interface GroupPosition {
+    row: number;
+    column: number;
+    /** Grid span 1–12 (group width on parent grid) */
+    width: number;
+    order: number;
+}
 interface FormSection {
     id: string;
     title: string;
@@ -172,6 +180,20 @@ interface FormSection {
         class?: string;
         style?: Record<string, string>;
     };
+    /** API group name (payload groups[].name); mirrors title when set */
+    name?: string;
+    description?: string | null;
+    position?: GroupPosition;
+    /** Payload expanded (preferred); isExpanded kept for legacy */
+    expanded?: boolean;
+    visible?: boolean;
+    collapsible?: boolean;
+    parentGroupId?: string | null;
+    repeatable?: boolean;
+    dataKey?: string | null;
+    addButtonLabel?: string | null;
+    minInstances?: number | null;
+    maxInstances?: number | null;
 }
 interface FormSchema {
     id: string;
@@ -238,6 +260,7 @@ interface MasterType {
 interface FormState {
     schema: FormSchema;
     selectedFieldId: string | null;
+    selectedSectionId: string | null;
     history: FormSchema[];
     historyIndex: number;
     isPreviewMode: boolean;
@@ -280,6 +303,7 @@ interface FormActions {
     removeField: (fieldId: string) => void;
     updateField: (fieldId: string, updates: Partial<FormField>) => void;
     selectField: (fieldId: string | null) => void;
+    selectSection: (sectionId: string | null) => void;
     moveField: (fieldId: string, targetSectionId: string | null, newIndex: number) => void;
     undo: () => void;
     redo: () => void;
@@ -376,6 +400,15 @@ declare class FormBuilder {
     private renderImportList;
     private renderCanvas;
     private createCheckboxField;
+    /**
+     * Shared 1–12 grid span control (Field Settings + Group Settings).
+     */
+    private createGridSpanSelector;
+    /**
+     * Shared Styling block (Padding, Background, Alignment, CSS class, Advanced CSS) — same as Field Settings.
+     */
+    private appendSharedStylingSection;
+    private renderGroupSettingsPanel;
     private renderConfigPanel;
     private initSidebarSortables;
 }
@@ -415,7 +448,7 @@ declare const cleanFormSchema: (schema: any) => FormSchema;
 /**
  * Transforms Form Builder JSON to Platform JSON (standardized payload format)
  * @param builderSchema
- * @returns Standardized payload format
+ * @returns Standardized payload format (root `fields` + `groups` with fieldIds)
  */
 declare const builderToPlatform: (builderSchema: FormSchema) => any;
 /**
@@ -490,4 +523,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };
+export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };

package/dist/index.d.ts

@@ -156,6 +156,14 @@ interface ISDConfig {
     showCountryName: boolean;
     allowCustomCode: boolean;
 }
+/** Group / section position on the form canvas (payload: groups[].position) */
+interface GroupPosition {
+    row: number;
+    column: number;
+    /** Grid span 1–12 (group width on parent grid) */
+    width: number;
+    order: number;
+}
 interface FormSection {
     id: string;
     title: string;
@@ -172,6 +180,20 @@ interface FormSection {
         class?: string;
         style?: Record<string, string>;
     };
+    /** API group name (payload groups[].name); mirrors title when set */
+    name?: string;
+    description?: string | null;
+    position?: GroupPosition;
+    /** Payload expanded (preferred); isExpanded kept for legacy */
+    expanded?: boolean;
+    visible?: boolean;
+    collapsible?: boolean;
+    parentGroupId?: string | null;
+    repeatable?: boolean;
+    dataKey?: string | null;
+    addButtonLabel?: string | null;
+    minInstances?: number | null;
+    maxInstances?: number | null;
 }
 interface FormSchema {
     id: string;
@@ -238,6 +260,7 @@ interface MasterType {
 interface FormState {
     schema: FormSchema;
     selectedFieldId: string | null;
+    selectedSectionId: string | null;
     history: FormSchema[];
     historyIndex: number;
     isPreviewMode: boolean;
@@ -280,6 +303,7 @@ interface FormActions {
     removeField: (fieldId: string) => void;
     updateField: (fieldId: string, updates: Partial<FormField>) => void;
     selectField: (fieldId: string | null) => void;
+    selectSection: (sectionId: string | null) => void;
     moveField: (fieldId: string, targetSectionId: string | null, newIndex: number) => void;
     undo: () => void;
     redo: () => void;
@@ -376,6 +400,15 @@ declare class FormBuilder {
     private renderImportList;
     private renderCanvas;
     private createCheckboxField;
+    /**
+     * Shared 1–12 grid span control (Field Settings + Group Settings).
+     */
+    private createGridSpanSelector;
+    /**
+     * Shared Styling block (Padding, Background, Alignment, CSS class, Advanced CSS) — same as Field Settings.
+     */
+    private appendSharedStylingSection;
+    private renderGroupSettingsPanel;
     private renderConfigPanel;
     private initSidebarSortables;
 }
@@ -415,7 +448,7 @@ declare const cleanFormSchema: (schema: any) => FormSchema;
 /**
  * Transforms Form Builder JSON to Platform JSON (standardized payload format)
  * @param builderSchema
- * @returns Standardized payload format
+ * @returns Standardized payload format (root `fields` + `groups` with fieldIds)
  */
 declare const builderToPlatform: (builderSchema: FormSchema) => any;
 /**
@@ -490,4 +523,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };
+export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };