form-builder-pro 1.3.9 → 1.4.1

package/dist/index.css

@@ -1071,6 +1071,9 @@ body {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-none {
+  resize: none;
+}
 .resize-y {
   resize: vertical;
 }
@@ -1089,6 +1092,9 @@ body {
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -1220,6 +1226,14 @@ 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\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 91 255 / var(--tw-border-opacity, 1));
+}
 .border-\[\#635bff\]\/35 {
   border-color: rgb(99 91 255 / 0.35);
 }
@@ -1310,6 +1324,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));
@@ -1471,6 +1488,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));
@@ -1770,6 +1791,11 @@ input[type="radio"]:checked::after {
   content: var(--tw-content);
 }
 
+.hover\:border-\[\#635bff\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 91 255 / var(--tw-border-opacity, 1));
+}
+
 .hover\:border-blue-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
@@ -1789,6 +1815,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));
@@ -1838,6 +1868,11 @@ input[type="radio"]:checked::after {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:text-\[\#635bff\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(99 91 255 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity, 1));
@@ -1863,6 +1898,11 @@ input[type="radio"]:checked::after {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-red-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1968,6 +2008,11 @@ 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);
 }
@@ -2006,6 +2051,10 @@ 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);
 }
@@ -2024,6 +2073,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

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as zustand_vanilla from 'zustand/vanilla';
 
-type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'datetime' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'binary_choice' | 'repeater' | 'file' | 'image' | 'email' | 'phone' | 'name_generator';
+type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'datetime' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'binary_choice' | 'repeater' | 'file' | 'image' | 'email' | 'phone' | 'name_generator' | 'formula';
 /** Name generator format options for name_generator field type */
 type NameGeneratorFormat = 'TEXT_HYPHEN_ID' | 'TEXT_UNDERSCORE_ID' | 'TEXT_SLASH_ID' | 'TEXT_ID' | 'ID_HYPHEN_TEXT' | 'ID_UNDERSCORE_TEXT' | 'TEXT_YEAR_ID' | 'TEXT_MONTH_ID' | 'TEXT_YEAR_MONTH_ID' | 'TEXT_ACCOUNT_CODE_ID' | 'TEXT_BRANCH_ID' | 'PREFIX_TEXT_ID' | 'TEXT_ID_SUFFIX' | 'TEXT_RANDOM_4' | 'TEXT_YEAR_MONTH_DAY_ID' | 'TEXT_HYPHEN_USER_INPUT' | 'TEXT_UNDERSCORE_USER_INPUT' | 'TEXT_SLASH_USER_INPUT' | 'USER_INPUT_HYPHEN_TEXT' | 'USER_INPUT_UNDERSCORE_TEXT';
 type FieldWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%' | number;
@@ -135,6 +135,7 @@ interface FormField {
     nameGeneratorPrefix?: string;
     nameGeneratorSuffix?: string;
     nameGeneratorIdPadding?: number;
+    formulaConfig?: FormulaConfig;
 }
 /**
  * Conditional date constraint — evaluated at runtime against the current date or another field's value.
@@ -146,6 +147,32 @@ interface DateConstraint {
     compareWith: 'CURRENT_DATE' | 'FIELD';
     fieldName?: string;
 }
+/**
+ * A single condition row for multi-condition formula fields.
+ * When the compare field equals `value`, evaluate `expression`.
+ */
+interface FormulaCondition {
+    value: string;
+    expression: string;
+}
+/**
+ * Configuration for the formula field type.
+ * Supports two modes: single expression or multiple conditions.
+ */
+interface FormulaConfig {
+    mode: 'single' | 'multiple';
+    /** Used when mode === 'single' */
+    single: {
+        expression: string;
+    };
+    /** Used when mode === 'multiple' */
+    multiple: {
+        compareField: string;
+        conditions: FormulaCondition[];
+        fallbackExpression: string;
+    };
+    decimalPlaces: number;
+}
 /**
  * ISD (International Subscriber Dialing) configuration for phone fields
  */
@@ -509,6 +536,52 @@ declare function getNumericFieldsForFormula(schema: FormSchema, excludeFieldId?:
     fieldName: string;
     label: string;
 }[];
+/**
+ * Extracts `{fieldName}` placeholder references from a formula expression.
+ * Returns unique field names in order of first appearance.
+ */
+declare function extractBracketFields(expression: string): string[];
+/**
+ * Evaluates a formula expression that uses `{fieldName}` placeholders.
+ * Placeholders are resolved to numeric values from `values` before evaluation.
+ * Missing/non-numeric values default to 0.
+ * Returns NaN on divide-by-zero or syntax error.
+ */
+declare function evaluateFormulaExpression(expression: string, values: Record<string, number | string | undefined>): number;
+/**
+ * Evaluates a complete FormulaConfig using the provided field values.
+ * For `multiple` mode, `compareValue` is the current value of the compare field.
+ * Returns `{ result, error? }`.
+ */
+declare function evaluateFormulaConfig(config: FormulaConfig, values: Record<string, number | string | undefined>, compareValue?: string): {
+    result: number;
+    error?: string;
+};
+/**
+ * Validates a `{fieldName}` expression for the formula field type.
+ * Checks that all `{ref}` names exist in `availableFieldNames` and parentheses are balanced.
+ */
+declare function validateFormulaExpression(expression: string, availableFieldNames: string[]): {
+    valid: true;
+} | {
+    valid: false;
+    error: string;
+};
+/**
+ * Get all fields usable as formula references for a 'formula' type field.
+ * Includes numeric (number) and other formula-type fields (excluding the field itself).
+ * Returns all non-excluded fields so users can reference any form value.
+ */
+declare function getFieldsForFormula(schema: FormSchema, excludeFieldId?: string): {
+    id: string;
+    fieldName: string;
+    label: string;
+}[];
+/**
+ * Detects circular dependencies for a 'formula' type field.
+ * Builds a dependency graph from all expression placeholders and checks for cycles.
+ */
+declare function detectFormulaFieldCircularDependency(schema: FormSchema, formulaFieldId: string, config: FormulaConfig): boolean;
 
 /** Reset counter (for testing or new form load) */
 declare function resetNameGeneratorCounter(): void;
@@ -523,4 +596,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 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 };
+export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as zustand_vanilla from 'zustand/vanilla';
 
-type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'datetime' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'binary_choice' | 'repeater' | 'file' | 'image' | 'email' | 'phone' | 'name_generator';
+type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'datetime' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'binary_choice' | 'repeater' | 'file' | 'image' | 'email' | 'phone' | 'name_generator' | 'formula';
 /** Name generator format options for name_generator field type */
 type NameGeneratorFormat = 'TEXT_HYPHEN_ID' | 'TEXT_UNDERSCORE_ID' | 'TEXT_SLASH_ID' | 'TEXT_ID' | 'ID_HYPHEN_TEXT' | 'ID_UNDERSCORE_TEXT' | 'TEXT_YEAR_ID' | 'TEXT_MONTH_ID' | 'TEXT_YEAR_MONTH_ID' | 'TEXT_ACCOUNT_CODE_ID' | 'TEXT_BRANCH_ID' | 'PREFIX_TEXT_ID' | 'TEXT_ID_SUFFIX' | 'TEXT_RANDOM_4' | 'TEXT_YEAR_MONTH_DAY_ID' | 'TEXT_HYPHEN_USER_INPUT' | 'TEXT_UNDERSCORE_USER_INPUT' | 'TEXT_SLASH_USER_INPUT' | 'USER_INPUT_HYPHEN_TEXT' | 'USER_INPUT_UNDERSCORE_TEXT';
 type FieldWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%' | number;
@@ -135,6 +135,7 @@ interface FormField {
     nameGeneratorPrefix?: string;
     nameGeneratorSuffix?: string;
     nameGeneratorIdPadding?: number;
+    formulaConfig?: FormulaConfig;
 }
 /**
  * Conditional date constraint — evaluated at runtime against the current date or another field's value.
@@ -146,6 +147,32 @@ interface DateConstraint {
     compareWith: 'CURRENT_DATE' | 'FIELD';
     fieldName?: string;
 }
+/**
+ * A single condition row for multi-condition formula fields.
+ * When the compare field equals `value`, evaluate `expression`.
+ */
+interface FormulaCondition {
+    value: string;
+    expression: string;
+}
+/**
+ * Configuration for the formula field type.
+ * Supports two modes: single expression or multiple conditions.
+ */
+interface FormulaConfig {
+    mode: 'single' | 'multiple';
+    /** Used when mode === 'single' */
+    single: {
+        expression: string;
+    };
+    /** Used when mode === 'multiple' */
+    multiple: {
+        compareField: string;
+        conditions: FormulaCondition[];
+        fallbackExpression: string;
+    };
+    decimalPlaces: number;
+}
 /**
  * ISD (International Subscriber Dialing) configuration for phone fields
  */
@@ -509,6 +536,52 @@ declare function getNumericFieldsForFormula(schema: FormSchema, excludeFieldId?:
     fieldName: string;
     label: string;
 }[];
+/**
+ * Extracts `{fieldName}` placeholder references from a formula expression.
+ * Returns unique field names in order of first appearance.
+ */
+declare function extractBracketFields(expression: string): string[];
+/**
+ * Evaluates a formula expression that uses `{fieldName}` placeholders.
+ * Placeholders are resolved to numeric values from `values` before evaluation.
+ * Missing/non-numeric values default to 0.
+ * Returns NaN on divide-by-zero or syntax error.
+ */
+declare function evaluateFormulaExpression(expression: string, values: Record<string, number | string | undefined>): number;
+/**
+ * Evaluates a complete FormulaConfig using the provided field values.
+ * For `multiple` mode, `compareValue` is the current value of the compare field.
+ * Returns `{ result, error? }`.
+ */
+declare function evaluateFormulaConfig(config: FormulaConfig, values: Record<string, number | string | undefined>, compareValue?: string): {
+    result: number;
+    error?: string;
+};
+/**
+ * Validates a `{fieldName}` expression for the formula field type.
+ * Checks that all `{ref}` names exist in `availableFieldNames` and parentheses are balanced.
+ */
+declare function validateFormulaExpression(expression: string, availableFieldNames: string[]): {
+    valid: true;
+} | {
+    valid: false;
+    error: string;
+};
+/**
+ * Get all fields usable as formula references for a 'formula' type field.
+ * Includes numeric (number) and other formula-type fields (excluding the field itself).
+ * Returns all non-excluded fields so users can reference any form value.
+ */
+declare function getFieldsForFormula(schema: FormSchema, excludeFieldId?: string): {
+    id: string;
+    fieldName: string;
+    label: string;
+}[];
+/**
+ * Detects circular dependencies for a 'formula' type field.
+ * Builds a dependency graph from all expression placeholders and checks for cycles.
+ */
+declare function detectFormulaFieldCircularDependency(schema: FormSchema, formulaFieldId: string, config: FormulaConfig): boolean;
 
 /** Reset counter (for testing or new form load) */
 declare function resetNameGeneratorCounter(): void;
@@ -523,4 +596,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 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 };
+export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };