oxform-react 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,179 @@
+let oxform_core = require("oxform-core");
+let react = require("react");
+let _tanstack_react_store = require("@tanstack/react-store");
+
+//#region src/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+
+//#endregion
+//#region src/use-subscribe.ts
+const useSubscribe = (api, selector) => {
+	return (0, _tanstack_react_store.useStore)(api.store(), selector);
+};
+
+//#endregion
+//#region src/use-array-field.ts
+const useArrayField = (options) => {
+	const [api] = (0, react.useState)(() => {
+		return (0, oxform_core.createArrayFieldApi)({ ...options });
+	});
+	useIsomorphicLayoutEffect(api["~mount"], [api]);
+	useIsomorphicLayoutEffect(() => {
+		api["~update"](options);
+	});
+	return (0, react.useMemo)(() => {
+		return {
+			...api,
+			get fields() {
+				return api.state().value;
+			}
+		};
+	}, [api, useSubscribe(api, (state) => Object.keys(state.value ?? []).length)]);
+};
+
+//#endregion
+//#region src/use-field-api.ts
+const useFieldApi = (options) => {
+	const [api] = (0, react.useState)(() => {
+		return (0, oxform_core.createFieldApi)(options);
+	});
+	useIsomorphicLayoutEffect(api["~mount"], [api]);
+	useIsomorphicLayoutEffect(() => {
+		api["~update"](options);
+	});
+	return api;
+};
+
+//#endregion
+//#region src/use-field.ts
+const useField = (options) => {
+	const api = useFieldApi(options);
+	const value = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.value);
+	const defaultValue = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.defaultValue);
+	const dirty = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.meta.dirty);
+	const touched = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.meta.touched);
+	const blurred = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.meta.blurred);
+	const pristine = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.meta.pristine);
+	const valid = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.meta.valid);
+	const isDefault = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.meta.default);
+	const errors = (0, _tanstack_react_store.useStore)(api.store(), (state) => state.errors);
+	return (0, react.useMemo)(() => {
+		return {
+			...api,
+			state: {
+				value,
+				defaultValue,
+				errors,
+				meta: {
+					blurred,
+					default: isDefault,
+					dirty,
+					pristine,
+					touched,
+					valid
+				}
+			},
+			props: {
+				value,
+				onBlur: api.blur,
+				onFocus: api.focus,
+				onChange: (event) => api.change(event.target?.value),
+				ref: api.register
+			}
+		};
+	}, [
+		api,
+		errors,
+		value,
+		defaultValue,
+		dirty,
+		touched,
+		blurred,
+		pristine,
+		valid,
+		isDefault
+	]);
+};
+
+//#endregion
+//#region src/use-form.ts
+const useForm = (options) => {
+	const [api] = (0, react.useState)(() => {
+		return new oxform_core.FormApi({ ...options });
+	});
+	useIsomorphicLayoutEffect(api["~mount"], [api]);
+	useIsomorphicLayoutEffect(() => {
+		api["~update"](options);
+	});
+	return api;
+};
+
+//#endregion
+//#region src/use-form-status.ts
+const useFormStatus = ({ form }) => {
+	const dirty = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.dirty);
+	const valid = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.valid);
+	const submitting = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.submitting);
+	const successful = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.successful);
+	const validating = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.validating);
+	const submits = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.submits);
+	const submitted = (0, _tanstack_react_store.useStore)(form.store(), (state) => state.status.submitted);
+	return (0, react.useMemo)(() => {
+		return {
+			dirty,
+			valid,
+			submitting,
+			successful,
+			validating,
+			submits,
+			submitted
+		};
+	}, [
+		dirty,
+		valid,
+		submitting,
+		successful,
+		validating,
+		submits,
+		submitted
+	]);
+};
+
+//#endregion
+//#region src/array-field.tsx
+const ArrayField = ({ children, ...options }) => {
+	const field = useArrayField(options);
+	return (0, react.useMemo)(() => {
+		return typeof children === "function" ? children(field) : children;
+	}, [children, field]);
+};
+
+//#endregion
+//#region src/field.tsx
+const Field = ({ children, ...options }) => {
+	const field = useField(options);
+	return (0, react.useMemo)(() => {
+		return typeof children === "function" ? children(field) : children;
+	}, [children, field]);
+};
+
+//#endregion
+//#region src/subscribe.tsx
+const Subscribe = ({ api, selector, children }) => {
+	const selected = useSubscribe(api, selector);
+	return (0, react.useMemo)(() => {
+		return typeof children === "function" ? children(selected) : children;
+	}, [children, selected]);
+};
+
+//#endregion
+exports.ArrayField = ArrayField;
+exports.Field = Field;
+exports.Subscribe = Subscribe;
+exports.useArrayField = useArrayField;
+exports.useField = useField;
+exports.useFieldApi = useFieldApi;
+exports.useForm = useForm;
+exports.useFormStatus = useFormStatus;
+exports.useSubscribe = useSubscribe;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useLayoutEffect","useEffect","FormApi"],"sources":["../src/use-isomorphic-layout-effect.ts","../src/use-subscribe.ts","../src/use-array-field.ts","../src/use-field-api.ts","../src/use-field.ts","../src/use-form.ts","../src/use-form-status.ts","../src/array-field.tsx","../src/field.tsx","../src/subscribe.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import { useStore } from '@tanstack/react-store';\nimport { type AnyFormLikeApi, type ApiSelector } from 'oxform-core';\n\nexport const useSubscribe = <Api extends AnyFormLikeApi, Selected>(api: Api, selector: ApiSelector<Api, Selected>) => {\n  return useStore(api.store() as never, selector as never) as Selected;\n};\n\n// const schema = z.object({ name: z.string(), names: z.string().array() });\n// const form = new FormApi({ schema, defaultValues: { name: 'John', names: ['Jane', 'Bob'] } });\n// const field = new FieldApi({ form, name: 'name' });\n// const array = new ArrayFieldApi({ form, name: 'names' });\n\n// const a = useSubscribe(form, state => state.values);\n// const b = useSubscribe(field, state => state.value);\n// const c = useSubscribe(array, state => state.value);\n","import { ArrayFieldApi, createArrayFieldApi } from 'oxform-core';\n\nimport { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';\nimport { useSubscribe } from '#use-subscribe';\nimport type { AnyFormApi, ArrayFieldOptions, ArrayLike, FormArrayFields, FormFieldValue } from 'oxform-core';\nimport { useMemo, useState } from 'react';\n\nexport type UseArrayFieldReturn<Value extends ArrayLike> = Omit<ArrayFieldApi<Value>, '~mount' | '~update'> & {\n  fields: Value;\n};\n\nexport const useArrayField = <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>(\n  options: ArrayFieldOptions<Form, Name>,\n): UseArrayFieldReturn<FormFieldValue<Form, Name>> => {\n  const [api] = useState(() => {\n    return createArrayFieldApi({ ...options });\n  });\n\n  useIsomorphicLayoutEffect(api['~mount'], [api]);\n  useIsomorphicLayoutEffect(() => {\n    api['~update'](options);\n  });\n\n  // todo: re-create api if form or name changes\n  // spike: use optional context to cache the api instance\n\n  const length = useSubscribe(api, state => Object.keys((state.value as unknown) ?? []).length);\n\n  return useMemo(() => {\n    void length;\n\n    return {\n      ...api,\n      get fields() {\n        return api.state().value;\n      },\n    } satisfies UseArrayFieldReturn<FormFieldValue<Form, Name>>;\n  }, [api, length]);\n};\n","import { createFieldApi, FieldApi, type FieldOptions } from 'oxform-core';\n\nimport { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';\nimport type { AnyFormApi, FormFields, FormFieldValue } from 'oxform-core';\nimport { useState } from 'react';\n\nexport type UseFieldApiReturn<Value> = FieldApi<Value>;\n\nexport const useFieldApi = <Form extends AnyFormApi, const Name extends FormFields<Form>>(\n  options: FieldOptions<Form, Name>,\n): UseFieldApiReturn<FormFieldValue<Form, Name>> => {\n  const [api] = useState(() => {\n    return createFieldApi(options);\n  });\n\n  // todo: re-create api if form or name changes\n  // spike: use optional context to cache the api instance\n\n  useIsomorphicLayoutEffect(api['~mount'], [api]);\n  useIsomorphicLayoutEffect(() => {\n    api['~update'](options);\n  });\n\n  return api;\n};\n","import type { AnyFormApi, EventLike, FieldState, FormFields, FormFieldValue } from 'oxform-core';\nimport { FieldApi, type FieldOptions } from 'oxform-core';\n\nimport { useFieldApi } from '#use-field-api';\nimport { useStore } from '@tanstack/react-store';\nimport { useMemo } from 'react';\n\nexport type UseFieldReturn<Value> = Omit<FieldApi<Value>, '~mount' | '~update' | 'state'> & {\n  state: FieldState<Value>;\n  props: {\n    value: Value;\n    ref: (element: HTMLElement | null) => void;\n    onChange: (event: EventLike) => void;\n    onBlur: (event: EventLike) => void;\n    onFocus: (event: EventLike) => void;\n  };\n};\n\nexport const useField = <Form extends AnyFormApi, const Name extends FormFields<Form>>(\n  options: FieldOptions<Form, Name>,\n): UseFieldReturn<FormFieldValue<Form, Name>> => {\n  const api = useFieldApi(options);\n\n  const value = useStore(api.store(), state => state.value);\n  const defaultValue = useStore(api.store(), state => state.defaultValue);\n  const dirty = useStore(api.store(), state => state.meta.dirty);\n  const touched = useStore(api.store(), state => state.meta.touched);\n  const blurred = useStore(api.store(), state => state.meta.blurred);\n  const pristine = useStore(api.store(), state => state.meta.pristine);\n  const valid = useStore(api.store(), state => state.meta.valid);\n  const isDefault = useStore(api.store(), state => state.meta.default);\n  const errors = useStore(api.store(), state => state.errors);\n\n  return useMemo(() => {\n    return {\n      ...api,\n\n      state: {\n        value,\n        defaultValue,\n        errors,\n        meta: {\n          blurred,\n          default: isDefault,\n          dirty,\n          pristine,\n          touched,\n          valid,\n        },\n      },\n\n      props: {\n        value,\n        onBlur: api.blur,\n        onFocus: api.focus,\n        onChange: (event: EventLike) => api.change(event.target?.value),\n        ref: api.register,\n      },\n    } satisfies UseFieldReturn<any> as any;\n  }, [api, errors, value, defaultValue, dirty, touched, blurred, pristine, valid, isDefault]);\n};\n","import { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';\nimport type { FormOptions } from 'oxform-core';\nimport { FormApi } from 'oxform-core';\nimport { useState } from 'react';\n\nexport type UseFormReturn<Values> = FormApi<Values>;\n\nexport const useForm = <Values>(options: FormOptions<Values>) => {\n  const [api] = useState(() => {\n    return new FormApi({ ...options });\n  });\n\n  useIsomorphicLayoutEffect(api['~mount'], [api]);\n  useIsomorphicLayoutEffect(() => {\n    api['~update'](options);\n  });\n\n  // todo: re-create api if id changes\n\n  return api satisfies UseFormReturn<Values> as UseFormReturn<Values>;\n};\n","import { useStore } from '@tanstack/react-store';\nimport type { FormApi, FormStatus } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type UseFormStatusProps<Values> = {\n  form: FormApi<Values>;\n};\n\nexport type UseFormStatusReturn = FormStatus;\n\nexport const useFormStatus = <Values>({ form }: UseFormStatusProps<Values>): UseFormStatusReturn => {\n  const dirty = useStore(form.store(), state => state.status.dirty);\n  const valid = useStore(form.store(), state => state.status.valid);\n  const submitting = useStore(form.store(), state => state.status.submitting);\n  const successful = useStore(form.store(), state => state.status.successful);\n  const validating = useStore(form.store(), state => state.status.validating);\n  const submits = useStore(form.store(), state => state.status.submits);\n  const submitted = useStore(form.store(), state => state.status.submitted);\n\n  return useMemo(() => {\n    return {\n      dirty,\n      valid,\n      submitting,\n      successful,\n      validating,\n      submits,\n      submitted,\n    } satisfies UseFormStatusReturn;\n  }, [dirty, valid, submitting, successful, validating, submits, submitted]);\n};\n","import { useArrayField, type UseArrayFieldReturn } from '#use-array-field';\nimport type { AnyFormApi, FieldOptions, FormArrayFields, FormFieldValue } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type ArrayFieldProps<Form extends AnyFormApi, Name extends FormArrayFields<Form>> = FieldOptions<Form, Name> & {\n  children: React.ReactNode | ((field: UseArrayFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);\n};\n\nexport const ArrayField = <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>({\n  children,\n  ...options\n}: ArrayFieldProps<Form, Name>) => {\n  const field = useArrayField(options);\n\n  return useMemo(() => {\n    return typeof children === 'function' ? children(field) : children;\n  }, [children, field]);\n};\n","import { useField, type UseFieldReturn } from '#use-field';\nimport type { AnyFormApi, FieldOptions, FormFields, FormFieldValue } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type FieldProps<Form extends AnyFormApi, Name extends FormFields<Form>> = FieldOptions<Form, Name> & {\n  children: React.ReactNode | ((field: UseFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);\n};\n\nexport const Field = <Form extends AnyFormApi, const Name extends FormFields<Form>>({\n  children,\n  ...options\n}: FieldProps<Form, Name>) => {\n  const field = useField(options);\n\n  return useMemo(() => {\n    return typeof children === 'function' ? children(field) : children;\n  }, [children, field]);\n};\n","import { useSubscribe } from '#use-subscribe';\nimport type { AnyFormLikeApi, ApiSelector } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type SubscribeProps<Api extends AnyFormLikeApi, Selected> = {\n  api: Api;\n  selector: ApiSelector<Api, Selected>;\n} & {\n  children: React.ReactNode | ((field: Selected) => React.ReactNode);\n};\n\nexport const Subscribe = <Api extends AnyFormLikeApi, Selected>({\n  api,\n  selector,\n  children,\n}: SubscribeProps<Api, Selected>) => {\n  const selected = useSubscribe(api, selector);\n\n  return useMemo(() => {\n    return typeof children === 'function' ? children(selected as never) : children;\n  }, [children, selected]);\n};\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,76 @@
+import { AnyFormApi, AnyFormLikeApi, ApiSelector, ArrayFieldApi, ArrayFieldOptions, ArrayLike, EventLike, FieldApi, FieldOptions, FieldState, FormApi, FormArrayFields, FormFieldValue, FormFields, FormOptions, FormStatus } from "oxform-core";
+import * as react0 from "react";
+export * from "oxform-core";
+
+//#region src/use-array-field.d.ts
+type UseArrayFieldReturn<Value extends ArrayLike> = Omit<ArrayFieldApi<Value>, '~mount' | '~update'> & {
+  fields: Value;
+};
+declare const useArrayField: <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>(options: ArrayFieldOptions<Form, Name>) => UseArrayFieldReturn<FormFieldValue<Form, Name>>;
+//#endregion
+//#region src/use-field.d.ts
+type UseFieldReturn<Value> = Omit<FieldApi<Value>, '~mount' | '~update' | 'state'> & {
+  state: FieldState<Value>;
+  props: {
+    value: Value;
+    ref: (element: HTMLElement | null) => void;
+    onChange: (event: EventLike) => void;
+    onBlur: (event: EventLike) => void;
+    onFocus: (event: EventLike) => void;
+  };
+};
+declare const useField: <Form extends AnyFormApi, const Name extends FormFields<Form>>(options: FieldOptions<Form, Name>) => UseFieldReturn<FormFieldValue<Form, Name>>;
+//#endregion
+//#region src/use-field-api.d.ts
+type UseFieldApiReturn<Value> = FieldApi<Value>;
+declare const useFieldApi: <Form extends AnyFormApi, const Name extends FormFields<Form>>(options: FieldOptions<Form, Name>) => UseFieldApiReturn<FormFieldValue<Form, Name>>;
+//#endregion
+//#region src/use-form.d.ts
+type UseFormReturn<Values> = FormApi<Values>;
+declare const useForm: <Values>(options: FormOptions<Values>) => UseFormReturn<Values>;
+//#endregion
+//#region src/use-form-status.d.ts
+type UseFormStatusProps<Values> = {
+  form: FormApi<Values>;
+};
+type UseFormStatusReturn = FormStatus;
+declare const useFormStatus: <Values>({
+  form
+}: UseFormStatusProps<Values>) => UseFormStatusReturn;
+//#endregion
+//#region src/use-subscribe.d.ts
+declare const useSubscribe: <Api extends AnyFormLikeApi, Selected>(api: Api, selector: ApiSelector<Api, Selected>) => Selected;
+//#endregion
+//#region src/array-field.d.ts
+type ArrayFieldProps<Form extends AnyFormApi, Name extends FormArrayFields<Form>> = FieldOptions<Form, Name> & {
+  children: React.ReactNode | ((field: UseArrayFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);
+};
+declare const ArrayField: <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>({
+  children,
+  ...options
+}: ArrayFieldProps<Form, Name>) => any;
+//#endregion
+//#region src/field.d.ts
+type FieldProps<Form extends AnyFormApi, Name extends FormFields<Form>> = FieldOptions<Form, Name> & {
+  children: React.ReactNode | ((field: UseFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);
+};
+declare const Field: <Form extends AnyFormApi, const Name extends FormFields<Form>>({
+  children,
+  ...options
+}: FieldProps<Form, Name>) => any;
+//#endregion
+//#region src/subscribe.d.ts
+type SubscribeProps<Api extends AnyFormLikeApi, Selected> = {
+  api: Api;
+  selector: ApiSelector<Api, Selected>;
+} & {
+  children: React.ReactNode | ((field: Selected) => React.ReactNode);
+};
+declare const Subscribe: <Api extends AnyFormLikeApi, Selected>({
+  api,
+  selector,
+  children
+}: SubscribeProps<Api, Selected>) => react0.ReactNode;
+//#endregion
+export { ArrayField, type ArrayFieldProps, Field, type FieldProps, Subscribe, type SubscribeProps, type UseArrayFieldReturn, type UseFieldApiReturn, type UseFieldReturn, type UseFormReturn, type UseFormStatusProps, type UseFormStatusReturn, useArrayField, useField, useFieldApi, useForm, useFormStatus, useSubscribe };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import { AnyFormApi, AnyFormLikeApi, ApiSelector, ArrayFieldApi, ArrayFieldOptions, ArrayLike, EventLike, FieldApi, FieldOptions, FieldState, FormApi, FormArrayFields, FormFieldValue, FormFields, FormOptions, FormStatus } from "oxform-core";
+import * as react0 from "react";
+export * from "oxform-core";
+
+//#region src/use-array-field.d.ts
+type UseArrayFieldReturn<Value extends ArrayLike> = Omit<ArrayFieldApi<Value>, '~mount' | '~update'> & {
+  fields: Value;
+};
+declare const useArrayField: <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>(options: ArrayFieldOptions<Form, Name>) => UseArrayFieldReturn<FormFieldValue<Form, Name>>;
+//#endregion
+//#region src/use-field.d.ts
+type UseFieldReturn<Value> = Omit<FieldApi<Value>, '~mount' | '~update' | 'state'> & {
+  state: FieldState<Value>;
+  props: {
+    value: Value;
+    ref: (element: HTMLElement | null) => void;
+    onChange: (event: EventLike) => void;
+    onBlur: (event: EventLike) => void;
+    onFocus: (event: EventLike) => void;
+  };
+};
+declare const useField: <Form extends AnyFormApi, const Name extends FormFields<Form>>(options: FieldOptions<Form, Name>) => UseFieldReturn<FormFieldValue<Form, Name>>;
+//#endregion
+//#region src/use-field-api.d.ts
+type UseFieldApiReturn<Value> = FieldApi<Value>;
+declare const useFieldApi: <Form extends AnyFormApi, const Name extends FormFields<Form>>(options: FieldOptions<Form, Name>) => UseFieldApiReturn<FormFieldValue<Form, Name>>;
+//#endregion
+//#region src/use-form.d.ts
+type UseFormReturn<Values> = FormApi<Values>;
+declare const useForm: <Values>(options: FormOptions<Values>) => UseFormReturn<Values>;
+//#endregion
+//#region src/use-form-status.d.ts
+type UseFormStatusProps<Values> = {
+  form: FormApi<Values>;
+};
+type UseFormStatusReturn = FormStatus;
+declare const useFormStatus: <Values>({
+  form
+}: UseFormStatusProps<Values>) => UseFormStatusReturn;
+//#endregion
+//#region src/use-subscribe.d.ts
+declare const useSubscribe: <Api extends AnyFormLikeApi, Selected>(api: Api, selector: ApiSelector<Api, Selected>) => Selected;
+//#endregion
+//#region src/array-field.d.ts
+type ArrayFieldProps<Form extends AnyFormApi, Name extends FormArrayFields<Form>> = FieldOptions<Form, Name> & {
+  children: React.ReactNode | ((field: UseArrayFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);
+};
+declare const ArrayField: <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>({
+  children,
+  ...options
+}: ArrayFieldProps<Form, Name>) => any;
+//#endregion
+//#region src/field.d.ts
+type FieldProps<Form extends AnyFormApi, Name extends FormFields<Form>> = FieldOptions<Form, Name> & {
+  children: React.ReactNode | ((field: UseFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);
+};
+declare const Field: <Form extends AnyFormApi, const Name extends FormFields<Form>>({
+  children,
+  ...options
+}: FieldProps<Form, Name>) => any;
+//#endregion
+//#region src/subscribe.d.ts
+type SubscribeProps<Api extends AnyFormLikeApi, Selected> = {
+  api: Api;
+  selector: ApiSelector<Api, Selected>;
+} & {
+  children: React.ReactNode | ((field: Selected) => React.ReactNode);
+};
+declare const Subscribe: <Api extends AnyFormLikeApi, Selected>({
+  api,
+  selector,
+  children
+}: SubscribeProps<Api, Selected>) => react0.ReactNode;
+//#endregion
+export { ArrayField, type ArrayFieldProps, Field, type FieldProps, Subscribe, type SubscribeProps, type UseArrayFieldReturn, type UseFieldApiReturn, type UseFieldReturn, type UseFormReturn, type UseFormStatusProps, type UseFormStatusReturn, useArrayField, useField, useFieldApi, useForm, useFormStatus, useSubscribe };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,171 @@
+import { ArrayFieldApi, FieldApi, FormApi, createArrayFieldApi, createFieldApi } from "oxform-core";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { useStore } from "@tanstack/react-store";
+
+//#region src/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+//#endregion
+//#region src/use-subscribe.ts
+const useSubscribe = (api, selector) => {
+	return useStore(api.store(), selector);
+};
+
+//#endregion
+//#region src/use-array-field.ts
+const useArrayField = (options) => {
+	const [api] = useState(() => {
+		return createArrayFieldApi({ ...options });
+	});
+	useIsomorphicLayoutEffect(api["~mount"], [api]);
+	useIsomorphicLayoutEffect(() => {
+		api["~update"](options);
+	});
+	return useMemo(() => {
+		return {
+			...api,
+			get fields() {
+				return api.state().value;
+			}
+		};
+	}, [api, useSubscribe(api, (state) => Object.keys(state.value ?? []).length)]);
+};
+
+//#endregion
+//#region src/use-field-api.ts
+const useFieldApi = (options) => {
+	const [api] = useState(() => {
+		return createFieldApi(options);
+	});
+	useIsomorphicLayoutEffect(api["~mount"], [api]);
+	useIsomorphicLayoutEffect(() => {
+		api["~update"](options);
+	});
+	return api;
+};
+
+//#endregion
+//#region src/use-field.ts
+const useField = (options) => {
+	const api = useFieldApi(options);
+	const value = useStore(api.store(), (state) => state.value);
+	const defaultValue = useStore(api.store(), (state) => state.defaultValue);
+	const dirty = useStore(api.store(), (state) => state.meta.dirty);
+	const touched = useStore(api.store(), (state) => state.meta.touched);
+	const blurred = useStore(api.store(), (state) => state.meta.blurred);
+	const pristine = useStore(api.store(), (state) => state.meta.pristine);
+	const valid = useStore(api.store(), (state) => state.meta.valid);
+	const isDefault = useStore(api.store(), (state) => state.meta.default);
+	const errors = useStore(api.store(), (state) => state.errors);
+	return useMemo(() => {
+		return {
+			...api,
+			state: {
+				value,
+				defaultValue,
+				errors,
+				meta: {
+					blurred,
+					default: isDefault,
+					dirty,
+					pristine,
+					touched,
+					valid
+				}
+			},
+			props: {
+				value,
+				onBlur: api.blur,
+				onFocus: api.focus,
+				onChange: (event) => api.change(event.target?.value),
+				ref: api.register
+			}
+		};
+	}, [
+		api,
+		errors,
+		value,
+		defaultValue,
+		dirty,
+		touched,
+		blurred,
+		pristine,
+		valid,
+		isDefault
+	]);
+};
+
+//#endregion
+//#region src/use-form.ts
+const useForm = (options) => {
+	const [api] = useState(() => {
+		return new FormApi({ ...options });
+	});
+	useIsomorphicLayoutEffect(api["~mount"], [api]);
+	useIsomorphicLayoutEffect(() => {
+		api["~update"](options);
+	});
+	return api;
+};
+
+//#endregion
+//#region src/use-form-status.ts
+const useFormStatus = ({ form }) => {
+	const dirty = useStore(form.store(), (state) => state.status.dirty);
+	const valid = useStore(form.store(), (state) => state.status.valid);
+	const submitting = useStore(form.store(), (state) => state.status.submitting);
+	const successful = useStore(form.store(), (state) => state.status.successful);
+	const validating = useStore(form.store(), (state) => state.status.validating);
+	const submits = useStore(form.store(), (state) => state.status.submits);
+	const submitted = useStore(form.store(), (state) => state.status.submitted);
+	return useMemo(() => {
+		return {
+			dirty,
+			valid,
+			submitting,
+			successful,
+			validating,
+			submits,
+			submitted
+		};
+	}, [
+		dirty,
+		valid,
+		submitting,
+		successful,
+		validating,
+		submits,
+		submitted
+	]);
+};
+
+//#endregion
+//#region src/array-field.tsx
+const ArrayField = ({ children, ...options }) => {
+	const field = useArrayField(options);
+	return useMemo(() => {
+		return typeof children === "function" ? children(field) : children;
+	}, [children, field]);
+};
+
+//#endregion
+//#region src/field.tsx
+const Field = ({ children, ...options }) => {
+	const field = useField(options);
+	return useMemo(() => {
+		return typeof children === "function" ? children(field) : children;
+	}, [children, field]);
+};
+
+//#endregion
+//#region src/subscribe.tsx
+const Subscribe = ({ api, selector, children }) => {
+	const selected = useSubscribe(api, selector);
+	return useMemo(() => {
+		return typeof children === "function" ? children(selected) : children;
+	}, [children, selected]);
+};
+
+//#endregion
+export { ArrayField, Field, Subscribe, useArrayField, useField, useFieldApi, useForm, useFormStatus, useSubscribe };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/use-isomorphic-layout-effect.ts","../src/use-subscribe.ts","../src/use-array-field.ts","../src/use-field-api.ts","../src/use-field.ts","../src/use-form.ts","../src/use-form-status.ts","../src/array-field.tsx","../src/field.tsx","../src/subscribe.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import { useStore } from '@tanstack/react-store';\nimport { type AnyFormLikeApi, type ApiSelector } from 'oxform-core';\n\nexport const useSubscribe = <Api extends AnyFormLikeApi, Selected>(api: Api, selector: ApiSelector<Api, Selected>) => {\n  return useStore(api.store() as never, selector as never) as Selected;\n};\n\n// const schema = z.object({ name: z.string(), names: z.string().array() });\n// const form = new FormApi({ schema, defaultValues: { name: 'John', names: ['Jane', 'Bob'] } });\n// const field = new FieldApi({ form, name: 'name' });\n// const array = new ArrayFieldApi({ form, name: 'names' });\n\n// const a = useSubscribe(form, state => state.values);\n// const b = useSubscribe(field, state => state.value);\n// const c = useSubscribe(array, state => state.value);\n","import { ArrayFieldApi, createArrayFieldApi } from 'oxform-core';\n\nimport { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';\nimport { useSubscribe } from '#use-subscribe';\nimport type { AnyFormApi, ArrayFieldOptions, ArrayLike, FormArrayFields, FormFieldValue } from 'oxform-core';\nimport { useMemo, useState } from 'react';\n\nexport type UseArrayFieldReturn<Value extends ArrayLike> = Omit<ArrayFieldApi<Value>, '~mount' | '~update'> & {\n  fields: Value;\n};\n\nexport const useArrayField = <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>(\n  options: ArrayFieldOptions<Form, Name>,\n): UseArrayFieldReturn<FormFieldValue<Form, Name>> => {\n  const [api] = useState(() => {\n    return createArrayFieldApi({ ...options });\n  });\n\n  useIsomorphicLayoutEffect(api['~mount'], [api]);\n  useIsomorphicLayoutEffect(() => {\n    api['~update'](options);\n  });\n\n  // todo: re-create api if form or name changes\n  // spike: use optional context to cache the api instance\n\n  const length = useSubscribe(api, state => Object.keys((state.value as unknown) ?? []).length);\n\n  return useMemo(() => {\n    void length;\n\n    return {\n      ...api,\n      get fields() {\n        return api.state().value;\n      },\n    } satisfies UseArrayFieldReturn<FormFieldValue<Form, Name>>;\n  }, [api, length]);\n};\n","import { createFieldApi, FieldApi, type FieldOptions } from 'oxform-core';\n\nimport { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';\nimport type { AnyFormApi, FormFields, FormFieldValue } from 'oxform-core';\nimport { useState } from 'react';\n\nexport type UseFieldApiReturn<Value> = FieldApi<Value>;\n\nexport const useFieldApi = <Form extends AnyFormApi, const Name extends FormFields<Form>>(\n  options: FieldOptions<Form, Name>,\n): UseFieldApiReturn<FormFieldValue<Form, Name>> => {\n  const [api] = useState(() => {\n    return createFieldApi(options);\n  });\n\n  // todo: re-create api if form or name changes\n  // spike: use optional context to cache the api instance\n\n  useIsomorphicLayoutEffect(api['~mount'], [api]);\n  useIsomorphicLayoutEffect(() => {\n    api['~update'](options);\n  });\n\n  return api;\n};\n","import type { AnyFormApi, EventLike, FieldState, FormFields, FormFieldValue } from 'oxform-core';\nimport { FieldApi, type FieldOptions } from 'oxform-core';\n\nimport { useFieldApi } from '#use-field-api';\nimport { useStore } from '@tanstack/react-store';\nimport { useMemo } from 'react';\n\nexport type UseFieldReturn<Value> = Omit<FieldApi<Value>, '~mount' | '~update' | 'state'> & {\n  state: FieldState<Value>;\n  props: {\n    value: Value;\n    ref: (element: HTMLElement | null) => void;\n    onChange: (event: EventLike) => void;\n    onBlur: (event: EventLike) => void;\n    onFocus: (event: EventLike) => void;\n  };\n};\n\nexport const useField = <Form extends AnyFormApi, const Name extends FormFields<Form>>(\n  options: FieldOptions<Form, Name>,\n): UseFieldReturn<FormFieldValue<Form, Name>> => {\n  const api = useFieldApi(options);\n\n  const value = useStore(api.store(), state => state.value);\n  const defaultValue = useStore(api.store(), state => state.defaultValue);\n  const dirty = useStore(api.store(), state => state.meta.dirty);\n  const touched = useStore(api.store(), state => state.meta.touched);\n  const blurred = useStore(api.store(), state => state.meta.blurred);\n  const pristine = useStore(api.store(), state => state.meta.pristine);\n  const valid = useStore(api.store(), state => state.meta.valid);\n  const isDefault = useStore(api.store(), state => state.meta.default);\n  const errors = useStore(api.store(), state => state.errors);\n\n  return useMemo(() => {\n    return {\n      ...api,\n\n      state: {\n        value,\n        defaultValue,\n        errors,\n        meta: {\n          blurred,\n          default: isDefault,\n          dirty,\n          pristine,\n          touched,\n          valid,\n        },\n      },\n\n      props: {\n        value,\n        onBlur: api.blur,\n        onFocus: api.focus,\n        onChange: (event: EventLike) => api.change(event.target?.value),\n        ref: api.register,\n      },\n    } satisfies UseFieldReturn<any> as any;\n  }, [api, errors, value, defaultValue, dirty, touched, blurred, pristine, valid, isDefault]);\n};\n","import { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';\nimport type { FormOptions } from 'oxform-core';\nimport { FormApi } from 'oxform-core';\nimport { useState } from 'react';\n\nexport type UseFormReturn<Values> = FormApi<Values>;\n\nexport const useForm = <Values>(options: FormOptions<Values>) => {\n  const [api] = useState(() => {\n    return new FormApi({ ...options });\n  });\n\n  useIsomorphicLayoutEffect(api['~mount'], [api]);\n  useIsomorphicLayoutEffect(() => {\n    api['~update'](options);\n  });\n\n  // todo: re-create api if id changes\n\n  return api satisfies UseFormReturn<Values> as UseFormReturn<Values>;\n};\n","import { useStore } from '@tanstack/react-store';\nimport type { FormApi, FormStatus } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type UseFormStatusProps<Values> = {\n  form: FormApi<Values>;\n};\n\nexport type UseFormStatusReturn = FormStatus;\n\nexport const useFormStatus = <Values>({ form }: UseFormStatusProps<Values>): UseFormStatusReturn => {\n  const dirty = useStore(form.store(), state => state.status.dirty);\n  const valid = useStore(form.store(), state => state.status.valid);\n  const submitting = useStore(form.store(), state => state.status.submitting);\n  const successful = useStore(form.store(), state => state.status.successful);\n  const validating = useStore(form.store(), state => state.status.validating);\n  const submits = useStore(form.store(), state => state.status.submits);\n  const submitted = useStore(form.store(), state => state.status.submitted);\n\n  return useMemo(() => {\n    return {\n      dirty,\n      valid,\n      submitting,\n      successful,\n      validating,\n      submits,\n      submitted,\n    } satisfies UseFormStatusReturn;\n  }, [dirty, valid, submitting, successful, validating, submits, submitted]);\n};\n","import { useArrayField, type UseArrayFieldReturn } from '#use-array-field';\nimport type { AnyFormApi, FieldOptions, FormArrayFields, FormFieldValue } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type ArrayFieldProps<Form extends AnyFormApi, Name extends FormArrayFields<Form>> = FieldOptions<Form, Name> & {\n  children: React.ReactNode | ((field: UseArrayFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);\n};\n\nexport const ArrayField = <Form extends AnyFormApi, const Name extends FormArrayFields<Form>>({\n  children,\n  ...options\n}: ArrayFieldProps<Form, Name>) => {\n  const field = useArrayField(options);\n\n  return useMemo(() => {\n    return typeof children === 'function' ? children(field) : children;\n  }, [children, field]);\n};\n","import { useField, type UseFieldReturn } from '#use-field';\nimport type { AnyFormApi, FieldOptions, FormFields, FormFieldValue } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type FieldProps<Form extends AnyFormApi, Name extends FormFields<Form>> = FieldOptions<Form, Name> & {\n  children: React.ReactNode | ((field: UseFieldReturn<FormFieldValue<Form, Name>>) => React.ReactNode);\n};\n\nexport const Field = <Form extends AnyFormApi, const Name extends FormFields<Form>>({\n  children,\n  ...options\n}: FieldProps<Form, Name>) => {\n  const field = useField(options);\n\n  return useMemo(() => {\n    return typeof children === 'function' ? children(field) : children;\n  }, [children, field]);\n};\n","import { useSubscribe } from '#use-subscribe';\nimport type { AnyFormLikeApi, ApiSelector } from 'oxform-core';\nimport { useMemo } from 'react';\n\nexport type SubscribeProps<Api extends AnyFormLikeApi, Selected> = {\n  api: Api;\n  selector: ApiSelector<Api, Selected>;\n} & {\n  children: React.ReactNode | ((field: Selected) => React.ReactNode);\n};\n\nexport const Subscribe = <Api extends AnyFormLikeApi, Selected>({\n  api,\n  selector,\n  children,\n}: SubscribeProps<Api, Selected>) => {\n  const selected = useSubscribe(api, selector);\n\n  return useMemo(() => {\n    return typeof children === 'function' ? children(selected as never) : children;\n  }, [children, selected]);\n};\n"],"mappings":"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"}

package/package.json

@@ -1,43 +1,49 @@
 {
   "name": "oxform-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Oxform is a lean and flexible framework-agnostic form library.",
   "author": "Frantss <frantss.bongiovanni@gmail.com>",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "imports": {
-    "#*": [
-      "./src/*.ts",
-      "./src/**/*.ts"
-    ]
+    "#*": "./src/*.ts"
   },
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsdown --config-loader unrun",
     "test": "vitest",
-    "lint:types": "tsc --noEmit"
+    "check:types": "tsc --noEmit",
+    "check:package": "publint --strict && attw --pack --no-emoji"
   },
   "dependencies": {
-    "@standard-schema/spec": "catalog:oxform",
+    "@standard-schema/spec": "^1.1.0",
     "@tanstack/react-store": "^0.8.0",
-    "oxform-core": "workspace:*"
+    "oxform-core": "0.1.1"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
+    "publint": "^0.3.16",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "tsdown": "catalog:oxform",
-    "typescript": "catalog:oxform",
-    "vitest": "catalog:oxform",
+    "tsdown": "^0.18.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16",
     "vitest-browser-react": "^2.0.2",
     "zod": "^4.2.1"
   },

package/export/index.ts

@@ -1,3 +0,0 @@
-export { useField } from '#use-field';
-export type { UseFieldReturn } from '#use-field';
-export { useForm } from '#use-form';

package/src/testing/performance.tsx

@@ -1,59 +0,0 @@
-// reference: https://stevekinney.com/courses/react-performance/performance-testing-strategy
-
-import { Profiler, type ProfilerOnRenderCallback } from 'react';
-import { expect } from 'vitest';
-import { render } from 'vitest-browser-react';
-
-interface RenderMetrics {
-  renderTime: number;
-  commitTime: number;
-  actualDuration: number;
-  baseDuration: number;
-  startTime: number;
-}
-
-export function measureRenderPerformance(component: React.ReactElement, testName: string): Promise<RenderMetrics> {
-  return new Promise(resolve => {
-    let metrics: RenderMetrics;
-
-    const onRender: ProfilerOnRenderCallback = (_, phase, actualDuration, baseDuration, startTime, commitTime) => {
-      if (phase === 'mount' || phase === 'update') {
-        metrics = {
-          renderTime: actualDuration,
-          commitTime,
-          actualDuration,
-          baseDuration,
-          startTime,
-        };
-      }
-    };
-
-    void render(
-      <Profiler id={testName} onRender={onRender}>
-        {component}
-      </Profiler>,
-    );
-
-    setTimeout(() => resolve(metrics), 0);
-  });
-}
-
-expect.extend({
-  toRenderWithinTime(received: RenderMetrics, maxTime: number) {
-    const pass = received.renderTime <= maxTime;
-
-    return {
-      message: () => `Expected component to render in ${maxTime}ms, but took ${received.renderTime.toFixed(2)}ms`,
-      pass,
-    };
-  },
-
-  toHaveMaxReRenders(received: number, maxRenders: number) {
-    const pass = received <= maxRenders;
-
-    return {
-      message: () => `Expected component to re-render at most ${maxRenders} times, but re-rendered ${received} times`,
-      pass,
-    };
-  },
-});

package/src/tests/use-field.spec.tsx

@@ -1,116 +0,0 @@
-import { useField } from '#use-field';
-import { FormApi } from 'oxform-core';
-import 'react';
-import { expect, it, test } from 'vitest';
-import { render } from 'vitest-browser-react';
-import { userEvent } from 'vitest/browser';
-import { z } from 'zod';
-
-const setup = async () => {
-  const form = new FormApi({
-    schema: z.object({
-      name: z.string(),
-      nested: z.object({
-        deep: z.object({
-          deeper: z.string().array(),
-        }),
-      }),
-    }),
-    defaultValues: {
-      name: 'John',
-      nested: {
-        deep: {
-          deeper: ['hello'],
-        },
-      },
-    },
-  });
-
-  const Component = () => {
-    const field = useField({ form, name: 'name' });
-
-    return (
-      <>
-        <input {...field.props} />
-        <button type='button'>outside</button>
-      </>
-    );
-  };
-
-  const utils = await render(<Component />);
-
-  const ui = {
-    input: utils.getByRole('textbox'),
-    outside: utils.getByRole('button'),
-  };
-
-  return { utils, ui, form };
-};
-
-it("should update the form's values on change", async () => {
-  const { form, ui } = await setup();
-
-  await userEvent.clear(ui.input);
-  await userEvent.type(ui.input, 'Jane');
-
-  expect(form.store.state.values.name).toBe('Jane');
-});
-
-it('should mark the field as touched on focus', async () => {
-  const { form, ui } = await setup();
-
-  await ui.input.click();
-
-  const meta = form.store.state.fields['name'];
-
-  expect(meta).toBeDefined();
-  expect(meta.touched).toBe(true);
-});
-
-it('should mark the fields as blurred on blur', async () => {
-  const { form, ui } = await setup();
-
-  await ui.input.click();
-  await ui.outside.click(); // blur the input
-
-  const meta = form.store.state.fields['name'];
-
-  expect(meta).toBeDefined();
-  expect(meta.blurred).toBe(true);
-});
-
-it('should keep the field as pristine when field is not dirty', async () => {
-  const { form, ui } = await setup();
-
-  await ui.input.click();
-  await ui.outside.click(); // blur the input
-
-  const meta = form.store.state.fields['name'];
-
-  expect(meta).toBeDefined();
-  expect(meta.pristine).toBe(true);
-});
-
-test('default is true when value is equal to default value', async () => {
-  const { form, ui } = await setup();
-
-  await userEvent.clear(ui.input);
-  await userEvent.type(ui.input, 'Jane');
-  await userEvent.clear(ui.input);
-  await userEvent.type(ui.input, 'John');
-
-  const meta = form.store.state.fields['name'];
-
-  expect(meta.default).toBe(true);
-});
-
-test('default is false when value is not equal to default value', async () => {
-  const { form, ui } = await setup();
-
-  await userEvent.clear(ui.input);
-  await userEvent.type(ui.input, 'Jane');
-
-  const meta = form.store.state.fields['name'];
-
-  expect(meta.default).toBe(false);
-});

package/src/use-field.ts

@@ -1,81 +0,0 @@
-import type { FieldMeta, FormIssue, FormResetFieldOptions, FormSetErrorsOptions, ValidateOptions } from 'oxform-core';
-import { FieldApi, type FieldOptions, type FieldProps } from 'oxform-core';
-
-import { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';
-import { useStore } from '@tanstack/react-store';
-import type { DeepKeys, DeepValue, EventLike } from 'oxform-core';
-import type { StandardSchema } from 'oxform-core/schema';
-import { useCallback, useMemo, useState } from 'react';
-
-export type UseFieldReturn<Value> = {
-  api: FieldApi<any, any, Value>;
-  value: Value;
-  change: (value: Value) => void;
-  blur: () => void;
-  focus: () => void;
-  register: () => void;
-  validate: (options?: ValidateOptions) => Promise<FormIssue[]>;
-  reset: (options?: FormResetFieldOptions<Value>) => void;
-  setErrors: (errors: FormIssue[], options?: FormSetErrorsOptions) => void;
-  props: FieldProps<Value>;
-  meta: FieldMeta;
-  errors: FormIssue[];
-};
-
-export const useField = <Schema extends StandardSchema, Name extends DeepKeys<StandardSchema.InferInput<Schema>>>(
-  options: FieldOptions<Schema, Name>,
-) => {
-  type Value = DeepValue<StandardSchema.InferInput<Schema>, Name>;
-
-  const [api] = useState(() => {
-    return new FieldApi({ ...options });
-  });
-
-  useIsomorphicLayoutEffect(api['~mount'], [api]);
-  useIsomorphicLayoutEffect(() => {
-    api['~update'](options);
-  });
-
-  const value = useStore(api.store, state => state.value);
-  const defaultValue = useStore(api.store, state => state.defaultValue);
-  const dirty = useStore(api.store, state => state.meta.dirty);
-  const touched = useStore(api.store, state => state.meta.touched);
-  const blurred = useStore(api.store, state => state.meta.blurred);
-  const pristine = useStore(api.store, state => state.meta.pristine);
-  const valid = useStore(api.store, state => state.meta.valid);
-  const isDefault = useStore(api.store, state => state.meta.default);
-  const errors = useStore(api.store, state => state.errors);
-
-  const onChange = useCallback((event: EventLike) => api.change(event.target?.value), [api]);
-
-  return useMemo(() => {
-    return {
-      api,
-      value,
-      blur: api.blur,
-      focus: api.focus,
-      change: api.change,
-      register: api.register,
-      validate: api.validate,
-      reset: api.reset,
-      setErrors: api.setErrors,
-      errors,
-      props: {
-        value,
-        defaultValue,
-        ref: api.register(),
-        onBlur: api.blur,
-        onFocus: api.focus,
-        onChange,
-      },
-      meta: {
-        dirty,
-        touched,
-        blurred,
-        pristine,
-        valid,
-        default: isDefault,
-      },
-    } satisfies UseFieldReturn<Value> as UseFieldReturn<Value>;
-  }, [api, errors, value, defaultValue, onChange, dirty, touched, blurred, pristine, valid, isDefault]);
-};

package/src/use-form-status.ts

@@ -1,28 +0,0 @@
-import { useStore } from '@tanstack/react-store';
-import type { FormApi, FormStatus } from 'oxform-core';
-import type { StandardSchema } from 'oxform-core/schema';
-import { useMemo } from 'react';
-
-export type UseFormStatusReturn = FormStatus;
-
-export const useFormStatus = <Schema extends StandardSchema>({ form }: { form: FormApi<Schema> }) => {
-  const dirty = useStore(form.store, state => state.status.dirty);
-  const valid = useStore(form.store, state => state.status.valid);
-  const submitting = useStore(form.store, state => state.status.submitting);
-  const successful = useStore(form.store, state => state.status.successful);
-  const validating = useStore(form.store, state => state.status.validating);
-  const submits = useStore(form.store, state => state.status.submits);
-  const submitted = useStore(form.store, state => state.status.submitted);
-
-  return useMemo(() => {
-    return {
-      dirty,
-      valid,
-      submitting,
-      successful,
-      validating,
-      submits,
-      submitted,
-    } satisfies UseFormStatusReturn as UseFormStatusReturn;
-  }, [dirty, valid, submitting, successful, validating, submits, submitted]);
-};

package/src/use-form.ts

@@ -1,20 +0,0 @@
-import { useIsomorphicLayoutEffect } from '#use-isomorphic-layout-effect';
-import type { FormOptions } from 'oxform-core';
-import { FormApi } from 'oxform-core';
-import type { StandardSchema } from 'oxform-core/schema';
-import { useState } from 'react';
-
-export type UseFormReturn<Schema extends StandardSchema> = FormApi<Schema>;
-
-export const useForm = <Schema extends StandardSchema>(options: FormOptions<Schema>) => {
-  const [api] = useState(() => {
-    return new FormApi({ ...options });
-  });
-
-  useIsomorphicLayoutEffect(api['~mount'], [api]);
-  useIsomorphicLayoutEffect(() => {
-    api['~update'](options);
-  });
-
-  return api satisfies UseFormReturn<Schema> as UseFormReturn<Schema>;
-};

package/src/use-isomorphic-layout-effect.ts

@@ -1,3 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react';
-
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  }
-}

package/tsdown.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'tsdown';
-import base from '../../tsdown.config';
-
-export default defineConfig({
-  ...base,
-  entry: {
-    index: 'export/index.ts',
-  },
-});

package/vitest.config.ts

@@ -1,10 +0,0 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig, mergeConfig } from 'vitest/config';
-import base from '../../vitest.config';
-
-export default mergeConfig(
-  base,
-  defineConfig({
-    plugins: [react()],
-  }),
-);