form-builder-pro 1.4.0 → 1.4.2

package/dist/index.css

@@ -530,6 +530,36 @@ video {
 
     --radius: 0.5rem;
   }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 019FA2;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
   * {
   border-color: hsl(var(--border));
 }
@@ -740,9 +770,15 @@ body {
   }
 /* ===== WIDTH SLIDER STYLES ===== */
 /* Custom range slider styling */
+.dark .width-slider {
+    background: linear-gradient(to right, #019FA2 0%, #019FA2 var(--slider-progress, 50%), #374151 var(--slider-progress, 50%), #374151 100%);
+  }
 /* Slider thumb (WebKit - Chrome, Safari, Edge) */
 /* Slider thumb (Firefox) */
 /* Slider track (Firefox) */
+.dark .width-slider::-moz-range-track {
+    background: #374151;
+  }
 /* Width value badge animation */
 /* Preset buttons */
 /* Breakpoint markers */
@@ -843,6 +879,9 @@ body {
 .visible {
   visibility: visible;
 }
+.collapse {
+  visibility: collapse;
+}
 .static {
   position: static;
 }
@@ -1057,6 +1096,9 @@ body {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .cursor-move {
   cursor: move;
 }
@@ -1227,6 +1269,10 @@ body {
   --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);
 }
@@ -1577,6 +1623,9 @@ body {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.outline {
+  outline-style: solid;
+}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1784,6 +1833,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));
@@ -1856,6 +1910,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));
@@ -1881,6 +1940,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));

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 };