@zeno-lib/forms 0.2.0 → 0.2.1

package/dist/lib/use-rebased-default-values.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { evaluate } from "@tanstack/react-form";
+import { useCallback, useRef } from "react";
+//#region src/lib/use-rebased-default-values.ts
+function useRebasedDefaultValues(callerDefaults) {
+	const liveForm = useRef(null);
+	const lastCallerDefaults = useRef(callerDefaults);
+	let defaultValues = callerDefaults;
+	if (evaluate(lastCallerDefaults.current, callerDefaults)) {
+		if (liveForm.current) defaultValues = liveForm.current.options.defaultValues;
+	} else lastCallerDefaults.current = callerDefaults;
+	const onMount = useCallback((props) => {
+		liveForm.current = props.formApi;
+	}, []);
+	return {
+		defaultValues,
+		onMount
+	};
+}
+//#endregion
+export { useRebasedDefaultValues };

package/dist/lib/use-unsaved-changes-warning.d.mts

@@ -0,0 +1,6 @@
+import { AnyFormApi } from "@tanstack/react-form";
+//#region src/lib/use-unsaved-changes-warning.d.ts
+type UnsavedChangesMode = "if-changed" | "if-touched";
+declare function useUnsavedChangesWarning(form: AnyFormApi, enabled: boolean | UnsavedChangesMode): void;
+//#endregion
+export { type UnsavedChangesMode, useUnsavedChangesWarning };

package/dist/lib/use-unsaved-changes-warning.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { useSelector } from "@tanstack/react-form";
+import { useEffect } from "react";
+//#region src/lib/use-unsaved-changes-warning.ts
+function useUnsavedChangesWarning(form, enabled) {
+	let mode;
+	if (enabled === false) mode = null;
+	else if (enabled === true) mode = "if-changed";
+	else mode = enabled;
+	const dirty = useSelector(form.store, (state) => mode === "if-touched" ? state.isDirty : !state.isDefaultValue);
+	const isSubmitting = useSelector(form.store, (state) => state.isSubmitting);
+	const active = mode !== null && dirty && !isSubmitting;
+	useEffect(() => {
+		if (!active) return;
+		const handler = (event) => {
+			event.preventDefault();
+			event.returnValue = "";
+		};
+		window.addEventListener("beforeunload", handler);
+		return () => window.removeEventListener("beforeunload", handler);
+	}, [active]);
+}
+//#endregion
+export { useUnsavedChangesWarning };

package/dist/lib/validation-error.d.mts

@@ -0,0 +1,12 @@
+//#region src/lib/validation-error.d.ts
+type FieldMessage = string | readonly string[];
+declare class ValidationError extends Error {
+  readonly fields: Readonly<Record<string, FieldMessage>>;
+  readonly formError?: string;
+  constructor(fields: Readonly<Record<string, FieldMessage>>, options?: {
+    formError?: string;
+    message?: string;
+  });
+}
+//#endregion
+export { type FieldMessage, ValidationError };

package/dist/lib/validation-error.mjs

@@ -0,0 +1,11 @@
+//#region src/lib/validation-error.ts
+var ValidationError = class extends Error {
+	constructor(fields, options = {}) {
+		super(options.message ?? "Validation failed");
+		this.name = "ValidationError";
+		this.fields = fields;
+		this.formError = options.formError;
+	}
+};
+//#endregion
+export { ValidationError };

package/dist/lib/validation-logic.d.mts

@@ -0,0 +1,5 @@
+import { ValidationLogicFn } from "@tanstack/react-form";
+//#region src/lib/validation-logic.d.ts
+declare const blurThenChangeLogic: ValidationLogicFn;
+//#endregion
+export { blurThenChangeLogic };

package/dist/lib/validation-logic.mjs

@@ -0,0 +1,114 @@
+"use client";
+//#region src/lib/validation-logic.ts
+function pickLiveValidator(validators, isAsync) {
+	const fn = isAsync ? validators?.onChangeAsync ?? validators?.onBlurAsync : validators?.onChange ?? validators?.onBlur;
+	return fn ? {
+		cause: "change",
+		fn
+	} : void 0;
+}
+function shouldRunFormChange(form) {
+	if (form.state.submissionAttempts > 0) return true;
+	return Object.values(form.state.fieldMeta).some((meta) => meta?.isBlurred === true);
+}
+function fieldLevelLogic(props) {
+	const { event, validators, form } = props;
+	const run = props.runValidation;
+	if (!validators) return run({
+		form,
+		validators: []
+	});
+	const isAsync = event.async;
+	if (event.type === "mount") return run({
+		form,
+		validators: isAsync ? [] : [{
+			cause: "mount",
+			fn: validators.onMount
+		}]
+	});
+	if (event.type === "change") return run({
+		form,
+		validators: [{
+			cause: "change",
+			fn: isAsync ? validators.onChangeAsync : validators.onChange
+		}]
+	});
+	if (event.type === "blur") return run({
+		form,
+		validators: [{
+			cause: "blur",
+			fn: isAsync ? validators.onBlurAsync : validators.onBlur
+		}]
+	});
+	if (event.type === "submit") return run({
+		form,
+		validators: [
+			{
+				cause: "change",
+				fn: isAsync ? validators.onChangeAsync : validators.onChange
+			},
+			{
+				cause: "blur",
+				fn: isAsync ? validators.onBlurAsync : validators.onBlur
+			},
+			{
+				cause: "submit",
+				fn: isAsync ? validators.onSubmitAsync : validators.onSubmit
+			}
+		]
+	});
+	return run({
+		form,
+		validators: []
+	});
+}
+function buildSubmitValidators(validators, isAsync, liveValidator) {
+	return [
+		...liveValidator ? [liveValidator] : [],
+		{
+			cause: "submit",
+			fn: isAsync ? validators.onSubmitAsync : validators.onSubmit
+		},
+		...isAsync ? [] : [{
+			cause: "server",
+			fn: () => void 0
+		}]
+	];
+}
+function blurThenChangeLogicImpl(props) {
+	if (props.event.fieldName !== void 0) return fieldLevelLogic(props);
+	const { event, validators, form } = props;
+	const run = props.runValidation;
+	if (!validators) return run({
+		form,
+		validators: []
+	});
+	const isAsync = event.async;
+	const liveValidator = pickLiveValidator(validators, isAsync);
+	if (event.type === "mount") return run({
+		form,
+		validators: isAsync ? [] : [{
+			cause: "mount",
+			fn: validators.onMount
+		}]
+	});
+	if (event.type === "blur") return run({
+		form,
+		validators: liveValidator ? [liveValidator] : []
+	});
+	if (event.type === "change") return run({
+		form,
+		validators: liveValidator && shouldRunFormChange(form) ? [liveValidator] : []
+	});
+	if (event.type === "submit") return run({
+		form,
+		validators: buildSubmitValidators(validators, isAsync, liveValidator)
+	});
+	return run({
+		form,
+		validators: []
+	});
+}
+const blurThenChangeLogic = blurThenChangeLogicImpl;
+//#endregion
+export { blurThenChangeLogic };

package/dist/lib/validation-modes.d.mts

@@ -0,0 +1,16 @@
+import { AnyFormApi } from "@tanstack/react-form";
+//#region src/lib/validation-modes.d.ts
+type ValidationMode = "change" | "blur" | "submit" | "blur-then-change";
+declare const DEFAULT_VALIDATION_MODE: ValidationMode;
+type ZenoFormState = {
+  validation: ValidationMode;
+  hideFieldErrors: boolean;
+  requiredIndicator: boolean;
+  requiredFields: ReadonlySet<string>;
+};
+declare function setFormZenoState(form: AnyFormApi, state: Partial<ZenoFormState>): void;
+declare function getFormValidationMode(form: AnyFormApi): ValidationMode;
+declare function getFormHideFieldErrors(form: AnyFormApi): boolean;
+declare function isFieldRequired(form: AnyFormApi, name: string): boolean;
+//#endregion
+export { DEFAULT_VALIDATION_MODE, type ValidationMode, getFormHideFieldErrors, getFormValidationMode, isFieldRequired, setFormZenoState };

package/dist/lib/validation-modes.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { toRequiredPathKey } from "./schema-required.mjs";
+//#region src/lib/validation-modes.ts
+const DEFAULT_VALIDATION_MODE = "blur-then-change";
+const DEFAULT_FORM_STATE = {
+	hideFieldErrors: false,
+	requiredFields: /* @__PURE__ */ new Set(),
+	requiredIndicator: true,
+	validation: DEFAULT_VALIDATION_MODE
+};
+const formZenoState = /* @__PURE__ */ new WeakMap();
+function stateKey(form) {
+	return form.store;
+}
+function setFormZenoState(form, state) {
+	const key = stateKey(form);
+	const current = formZenoState.get(key) ?? DEFAULT_FORM_STATE;
+	formZenoState.set(key, {
+		...current,
+		...state
+	});
+}
+function getFormZenoState(form) {
+	return formZenoState.get(stateKey(form)) ?? DEFAULT_FORM_STATE;
+}
+function getFormValidationMode(form) {
+	return getFormZenoState(form).validation;
+}
+function getFormHideFieldErrors(form) {
+	return getFormZenoState(form).hideFieldErrors;
+}
+function isFieldRequired(form, name) {
+	const state = getFormZenoState(form);
+	if (!state.requiredIndicator) return false;
+	return state.requiredFields.has(toRequiredPathKey(name));
+}
+//#endregion
+export { DEFAULT_VALIDATION_MODE, getFormHideFieldErrors, getFormValidationMode, isFieldRequired, setFormZenoState };

package/dist/tanstack.d.mts

@@ -0,0 +1 @@
+export * from "@tanstack/react-form";

package/dist/tanstack.mjs

@@ -0,0 +1,2 @@
+export * from "@tanstack/react-form";
+export {};

package/package.json

@@ -1,14 +1,28 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.2.0",
+  "version": "0.2.1",
+  "type": "module",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
     "./create-form": "./src/create-form.tsx",
     "./form-dialog": "./src/form-dialog.tsx",
-    "./lib/*": "./src/lib/*.ts",
-    "./tanstack": "./src/tanstack.ts"
+    "./lib/*": {
+      "types": "./dist/lib/*.d.mts",
+      "import": "./dist/lib/*.mjs",
+      "default": "./dist/lib/*.mjs"
+    },
+    "./tanstack": {
+      "types": "./dist/tanstack.d.mts",
+      "import": "./dist/tanstack.mjs",
+      "default": "./dist/tanstack.mjs"
+    }
   },
   "files": [
+    "dist",
     "src"
   ],
   "publishConfig": {
@@ -43,15 +57,17 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "lucide-react": "^1.23.0",
+    "tsdown": "^0.22.14",
     "typescript": "7.0.2",
     "vite": "8.0.16",
-    "vitest": "4.1.11",
+    "vitest": "5.0.2",
     "zod": "^4.3.6",
+    "@zeno-lib/test": "^0.1.0",
     "@zeno-lib/typescript": "^1.1.0",
-    "@zeno-lib/ui": "^0.0.1",
-    "@zeno-lib/test": "^0.1.0"
+    "@zeno-lib/ui": "^0.0.1"
   },
   "scripts": {
+    "build": "tsdown",
     "test": "vitest --run",
     "test:watch": "vitest watch",
     "types:check": "tsc --noEmit"