@classytic/formkit 1.3.0 → 1.3.1

package/dist/index.d.mts

@@ -761,10 +761,6 @@ declare const field: {
    * Multi-select field (tag choice).
    */
   multiselect: (name: string, label: string, options: (FieldOption | FieldOptionGroup)[], props?: FieldProps) => BaseField;
-  /**
-   * Tag choice field for selecting options as tags/chips.
-   */
-  tagChoice: (name: string, label: string, options: (FieldOption | FieldOptionGroup)[], props?: FieldProps) => BaseField;
   /**
    * Dependent select field that reacts to parent field changes.
    */
@@ -801,22 +797,6 @@ declare const field: {
    * File upload field.
    */
   file: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * OTP/PIN input field.
-   */
-  otp: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * Async searchable combobox with server-side search.
-   */
-  asyncCombobox: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * Async searchable multi-select with server-side search.
-   */
-  asyncMultiselect: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * Date and optional time picker field.
-   */
-  dateTime: (name: string, label: string, props?: FieldProps) => BaseField;
   /**
    * Hidden field (no UI).
    */
@@ -930,4 +910,4 @@ interface UseFormKitReturn<TFieldValues extends FieldValues = FieldValues> exten
  */
 declare function useFormKit<TFieldValues extends FieldValues = FieldValues>(options: UseFormKitOptions<TFieldValues>): UseFormKitReturn<TFieldValues>;
 //#endregion
-export { type BaseField, type ClassValue, type ComponentRegistry, type Condition, type ConditionConfig, type ConditionRule, type DefaultLayoutProps, type DefineField, type FieldComponent, type FieldComponentProps, type FieldOption, type FieldOptionGroup, type FieldType, FieldWrapper, type FormElement, FormGenerator, type FormGeneratorProps, type FormSchema, type FormSystemContextValue, FormSystemProvider, type FormSystemProviderProps, type GridLayoutProps, GridRenderer, type InferSchemaValues, type LayoutComponent, type LayoutComponentProps, type LayoutRegistry, type LayoutType, type SchemaFieldNames, type Section, type SectionLayoutProps, type SectionRenderProps, SectionRenderer, type UseFormKitOptions, type UseFormKitReturn, type ValidationRules, type Variant, buildValidationRules, cn, defineField, defineSchema, defineSection, evaluateCondition, extractDefaultValues, extractWatchNames, field, section, sectionUntitled, shallowEqual, useFieldComponent, useFormKit, useFormSystem, useLayoutComponent };
+export { type BaseField, type ClassValue, type ComponentRegistry, type Condition, type ConditionConfig, type ConditionRule, type DefaultLayoutProps, type DefineField, type FieldComponent, type FieldComponentProps, type FieldOption, type FieldOptionGroup, type FieldType, FieldWrapper, type FieldWrapperProps, type FormElement, FormGenerator, type FormGeneratorProps, type FormSchema, type FormSystemContextValue, FormSystemProvider, type FormSystemProviderProps, type GridLayoutProps, GridRenderer, type GridRendererProps, type InferSchemaValues, type LayoutComponent, type LayoutComponentProps, type LayoutRegistry, type LayoutType, type SchemaFieldNames, type Section, type SectionLayoutProps, type SectionRenderProps, SectionRenderer, type SectionRendererProps, type UseFormKitOptions, type UseFormKitReturn, type ValidationRules, type Variant, buildValidationRules, cn, defineField, defineSchema, defineSection, evaluateCondition, extractDefaultValues, extractWatchNames, field, section, sectionUntitled, shallowEqual, useFieldComponent, useFormKit, useFormSystem, useLayoutComponent };

package/dist/index.mjs

@@ -279,7 +279,12 @@ function toRules(condition) {
 */
 function evaluateCondition(condition, formValues) {
 	if (!condition) return true;
-	if (typeof condition === "function") return condition(formValues);
+	if (typeof condition === "function") try {
+		return condition(formValues);
+	} catch (err) {
+		console.warn("[FormKit] Condition function threw:", err);
+		return false;
+	}
 	const { rules, logic } = toRules(condition);
 	const evalFn = (rule) => evaluateRule(rule, formValues);
 	return logic === "or" ? rules.some(evalFn) : rules.every(evalFn);
@@ -369,10 +374,14 @@ function buildValidationRules(field) {
 		value: field.max,
 		message: `Must be at most ${field.max}`
 	};
-	if (field.pattern) rules.pattern = {
-		value: new RegExp(field.pattern),
-		message: "Invalid format"
-	};
+	if (field.pattern) try {
+		rules.pattern = {
+			value: new RegExp(field.pattern),
+			message: "Invalid format"
+		};
+	} catch {
+		console.warn(`[FormKit] Invalid regex pattern "${field.pattern}" in field "${field.name}", skipping.`);
+	}
 	if (field.validate) rules.validate = field.validate;
 	return rules;
 }
@@ -548,8 +557,50 @@ function GridRenderer({ fields, cols = 1, gap, control, disabled, variant }) {
 */
 function FieldWrapper(props) {
 	if (props.field.condition || props.field.loadOptions) return /* @__PURE__ */ jsx(DynamicFieldWrapper, { ...props });
+	if (props.field.render) return /* @__PURE__ */ jsx(RenderedFieldWrapper, { ...props });
 	return /* @__PURE__ */ jsx(StaticFieldWrapper, { ...props });
 }
+function RenderedFieldWrapper({ field, control, disabled, variant }) {
+	const fieldName = field.name;
+	const fieldId = toFieldId(fieldName);
+	const activeVariant = field.variant ?? variant;
+	const isDisabled = disabled || field.disabled;
+	const { errors, dirtyFields, touchedFields } = useFormState({
+		control,
+		name: fieldName
+	});
+	const fieldError = getNestedError(errors, fieldName);
+	const isDirty = Boolean(getNestedValue(dirtyFields, fieldName));
+	const isTouched = Boolean(getNestedValue(touchedFields, fieldName));
+	const fieldState = useMemo(() => ({
+		invalid: !!fieldError,
+		isDirty,
+		isTouched,
+		isValidating: false,
+		error: fieldError
+	}), [
+		fieldError,
+		isDirty,
+		isTouched
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("formkit-field", field.fullWidth && "col-span-full", field.className),
+		id: fieldId,
+		"data-formkit-field": fieldName,
+		"data-field-type": field.type,
+		children: field.render?.({
+			...field,
+			field,
+			control,
+			disabled: isDisabled,
+			variant: activeVariant,
+			error: fieldError,
+			fieldState,
+			fieldId,
+			isLoading: void 0
+		})
+	});
+}
 /**
 * Dynamic Field Wrapper
 * Conditionally calls `useWatch` to trigger re-renders only when form values change.
@@ -615,7 +666,10 @@ function DynamicFieldWrapper({ field, control, disabled, variant }) {
 		} else executeLoad();
 		return () => {
 			isActive = false;
-			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
 		};
 	}, [
 		watchedValues,
@@ -671,23 +725,6 @@ function StaticFieldWrapper({ field, control, disabled, variant, isLoading }) {
 		isTouched
 	]);
 	const activeVariant = field.variant ?? variant;
-	if (field.render) return /* @__PURE__ */ jsx("div", {
-		className: cn("formkit-field", field.fullWidth && "col-span-full", field.className),
-		id: fieldId,
-		"data-formkit-field": fieldName,
-		"data-field-type": field.type,
-		children: field.render({
-			...field,
-			field,
-			control,
-			disabled: isDisabled,
-			variant: activeVariant,
-			error: fieldError,
-			fieldState,
-			fieldId,
-			isLoading
-		})
-	});
 	if (!Boolean(components[field.type] || activeVariant && components[activeVariant] && typeof components[activeVariant] === "object" && components[activeVariant][field.type]) && field.itemFields && field.itemFields.length > 0) {
 		if (field.type === "array") return /* @__PURE__ */ jsx(ArrayFieldFallback, {
 			field,
@@ -708,23 +745,24 @@ function StaticFieldWrapper({ field, control, disabled, variant, isLoading }) {
 		});
 	}
 	const FieldComponent = useFieldComponent(field.type, activeVariant);
-	if (!FieldComponent) return null;
+	if (!FieldComponent && !field.render) return null;
+	const fieldProps = {
+		...field,
+		field,
+		control,
+		disabled: isDisabled,
+		variant: activeVariant,
+		error: fieldError,
+		fieldState,
+		fieldId,
+		isLoading
+	};
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("formkit-field", field.fullWidth && "col-span-full", field.className),
 		id: fieldId,
 		"data-formkit-field": fieldName,
 		"data-field-type": field.type,
-		children: /* @__PURE__ */ jsx(FieldComponent, {
-			...field,
-			field,
-			control,
-			disabled: isDisabled,
-			variant: activeVariant,
-			error: fieldError,
-			fieldState,
-			fieldId,
-			isLoading
-		})
+		children: field.render ? field.render(fieldProps) : /* @__PURE__ */ jsx(FieldComponent, { ...fieldProps })
 	});
 }
 function ArrayFieldFallback({ field, control, disabled, variant }) {
@@ -763,7 +801,13 @@ function ArrayFieldFallback({ field, control, disabled, variant }) {
 			}, item.id)),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				onClick: () => append({}),
+				onClick: () => {
+					const defaults = {};
+					if (field.itemFields) {
+						for (const f of field.itemFields) if (f.defaultValue !== void 0) defaults[f.name] = f.defaultValue;
+					}
+					append(defaults);
+				},
 				disabled,
 				className: "self-start mt-2 px-4 py-2 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100 disabled:opacity-50",
 				children: "+ Add Item"
@@ -868,13 +912,6 @@ const field = {
 		placeholder: "Select options...",
 		...props
 	}),
-	tagChoice: (name, label, options, props = {}) => ({
-		type: "tagChoice",
-		name,
-		label,
-		options,
-		...props
-	}),
 	dependentSelect: (name, label, props = {}) => ({
 		type: "dependentSelect",
 		name,
@@ -932,30 +969,6 @@ const field = {
 		label,
 		...props
 	}),
-	otp: (name, label, props = {}) => ({
-		type: "otp",
-		name,
-		label,
-		...props
-	}),
-	asyncCombobox: (name, label, props = {}) => ({
-		type: "asyncCombobox",
-		name,
-		label,
-		...props
-	}),
-	asyncMultiselect: (name, label, props = {}) => ({
-		type: "asyncMultiselect",
-		name,
-		label,
-		...props
-	}),
-	dateTime: (name, label, props = {}) => ({
-		type: "dateTime",
-		name,
-		label,
-		...props
-	}),
 	hidden: (name, props = {}) => ({
 		type: "hidden",
 		name,
@@ -1046,13 +1059,12 @@ function sectionUntitled(fields, props = {}) {
 */
 function useFormKit(options) {
 	const { schema, disabled, variant, className, defaultValues, ...formOptions } = options;
-	const mergedDefaults = {
-		...extractDefaultValues(schema),
+	const schemaDefaults = useMemo(() => extractDefaultValues(schema), [schema]);
+	const mergedDefaults = useMemo(() => ({
+		...schemaDefaults,
 		...typeof defaultValues === "object" && defaultValues !== null ? defaultValues : {}
-	};
+	}), [schemaDefaults, defaultValues]);
 	const form = useForm({
-		mode: "onBlur",
-		reValidateMode: "onChange",
 		...formOptions,
 		defaultValues: mergedDefaults
 	});

package/dist/server.d.mts

@@ -518,10 +518,6 @@ declare const field: {
    * Multi-select field (tag choice).
    */
   multiselect: (name: string, label: string, options: (FieldOption | FieldOptionGroup)[], props?: FieldProps) => BaseField;
-  /**
-   * Tag choice field for selecting options as tags/chips.
-   */
-  tagChoice: (name: string, label: string, options: (FieldOption | FieldOptionGroup)[], props?: FieldProps) => BaseField;
   /**
    * Dependent select field that reacts to parent field changes.
    */
@@ -558,22 +554,6 @@ declare const field: {
    * File upload field.
    */
   file: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * OTP/PIN input field.
-   */
-  otp: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * Async searchable combobox with server-side search.
-   */
-  asyncCombobox: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * Async searchable multi-select with server-side search.
-   */
-  asyncMultiselect: (name: string, label: string, props?: FieldProps) => BaseField;
-  /**
-   * Date and optional time picker field.
-   */
-  dateTime: (name: string, label: string, props?: FieldProps) => BaseField;
   /**
    * Hidden field (no UI).
    */

package/dist/server.mjs

@@ -95,7 +95,12 @@ function toRules(condition) {
 */
 function evaluateCondition(condition, formValues) {
 	if (!condition) return true;
-	if (typeof condition === "function") return condition(formValues);
+	if (typeof condition === "function") try {
+		return condition(formValues);
+	} catch (err) {
+		console.warn("[FormKit] Condition function threw:", err);
+		return false;
+	}
 	const { rules, logic } = toRules(condition);
 	const evalFn = (rule) => evaluateRule(rule, formValues);
 	return logic === "or" ? rules.some(evalFn) : rules.every(evalFn);
@@ -185,10 +190,14 @@ function buildValidationRules(field) {
 		value: field.max,
 		message: `Must be at most ${field.max}`
 	};
-	if (field.pattern) rules.pattern = {
-		value: new RegExp(field.pattern),
-		message: "Invalid format"
-	};
+	if (field.pattern) try {
+		rules.pattern = {
+			value: new RegExp(field.pattern),
+			message: "Invalid format"
+		};
+	} catch {
+		console.warn(`[FormKit] Invalid regex pattern "${field.pattern}" in field "${field.name}", skipping.`);
+	}
 	if (field.validate) rules.validate = field.validate;
 	return rules;
 }
@@ -289,13 +298,6 @@ const field = {
 		placeholder: "Select options...",
 		...props
 	}),
-	tagChoice: (name, label, options, props = {}) => ({
-		type: "tagChoice",
-		name,
-		label,
-		options,
-		...props
-	}),
 	dependentSelect: (name, label, props = {}) => ({
 		type: "dependentSelect",
 		name,
@@ -353,30 +355,6 @@ const field = {
 		label,
 		...props
 	}),
-	otp: (name, label, props = {}) => ({
-		type: "otp",
-		name,
-		label,
-		...props
-	}),
-	asyncCombobox: (name, label, props = {}) => ({
-		type: "asyncCombobox",
-		name,
-		label,
-		...props
-	}),
-	asyncMultiselect: (name, label, props = {}) => ({
-		type: "asyncMultiselect",
-		name,
-		label,
-		...props
-	}),
-	dateTime: (name, label, props = {}) => ({
-		type: "dateTime",
-		name,
-		label,
-		...props
-	}),
 	hidden: (name, props = {}) => ({
 		type: "hidden",
 		name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classytic/formkit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Headless, type-safe form generation engine for React 19. Schema-driven with full TypeScript support.",
   "author": "Classytic",
   "license": "MIT",
@@ -110,4 +110,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}