@formisch/vue 0.1.0

package/README.md

@@ -0,0 +1,58 @@
+# Formisch for Vue
+
+Formisch is a schema-based, headless form library for Vue. It manages form state and validation. It is type-safe, fast by default and its bundle size is small due to its modular design. Try it out in our [playground](https://stackblitz.com/edit/formisch-playground-vue)!
+
+## Highlights
+
+- Small bundle size starting at 2.5 kB
+- Schema-based validation with Valibot
+- Type safety with autocompletion in editor
+- It's fast – DOM updates are fine-grained
+- Minimal, readable and well thought out API
+- Supports all native HTML form fields
+
+## Example
+
+Every form starts with the `useForm` composable. It initializes your form's store based on the provided Valibot schema and infers its types. Next, wrap your form in the `<Form />` component. It's a thin layer around the native `<form />` element that handles form validation and submission. Then, you can access the state of a field with the `useField` composable or the `<Field />` component to connect your inputs.
+
+```vue
+<script setup lang="ts">
+import { Field, Form, type SubmitHandler, useForm } from '@formisch/vue';
+import * as v from 'valibot';
+
+const LoginSchema = v.object({
+  email: v.pipe(v.string(), v.email()),
+  password: v.pipe(v.string(), v.minLength(8)),
+});
+
+const loginForm = useForm({ schema: LoginSchema });
+</script>
+
+<template>
+  <Form :of="loginForm" @submit="(output) => console.log(output)">
+    <Field :of="loginForm" :path="['email']" v-slot="field">
+      <div>
+        <input v-model="field.input" v-bind="field.props" type="email" />
+        <div v-if="field.errors">{{ field.errors[0] }}</div>
+      </div>
+    </Field>
+    <Field :of="loginForm" :path="['password']" v-slot="field">
+      <div>
+        <input v-model="field.input" v-bind="field.props" type="password" />
+        <div v-if="field.errors">{{ field.errors[0] }}</div>
+      </div>
+    </Field>
+    <button type="submit">Login</button>
+  </Form>
+</template>
+```
+
+In addition, Formisch offers several functions (we call them "methods") that can be used to read and manipulate the form state. These include `focus`, `getErrors`, `getAllErrors`, `getInput`, `insert`, `move`, `remove`, `replace`, `reset`, `setErrors`, `setInput`, `submit`, `swap` and `validate`. These methods allow you to control the form programmatically.
+
+## Feedback
+
+Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/formisch/issues/new). Together we can make forms even better!
+
+## License
+
+This project is available free of charge and licensed under the [MIT license](https://github.com/fabian-hiller/formisch/blob/main/LICENSE.md).

package/dist/index.d.ts

@@ -0,0 +1,413 @@
+import * as v from "valibot";
+import * as vue0 from "vue";
+import { ComponentPublicInstance, MaybeRefOrGetter, ShallowRef as Signal } from "vue";
+
+//#region ../../packages/core/dist/index.vue.d.ts
+//#region src/types/schema.d.ts
+type Schema = v.GenericSchema | v.GenericSchemaAsync;
+//#endregion
+//#region src/types/signal.d.ts
+
+//#endregion
+//#region src/types/field.d.ts
+/**
+* Value type of the field element.
+*/
+type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+interface InternalBaseStore {
+  kind: "array" | "object" | "value";
+  name: string;
+  schema: Schema;
+  elements: FieldElement[];
+  errors: Signal<[string, ...string[]] | null>;
+}
+interface InternalArrayStore extends InternalBaseStore {
+  kind: "array";
+  children: InternalFieldStore[];
+  initialItems: Signal<string[]>;
+  startItems: Signal<string[]>;
+  items: Signal<string[]>;
+  isTouched: Signal<boolean>;
+  isDirty: Signal<boolean>;
+}
+interface InternalObjectStore extends InternalBaseStore {
+  kind: "object";
+  children: Record<string, InternalFieldStore>;
+}
+interface InternalValueStore extends InternalBaseStore {
+  kind: "value";
+  initialInput: Signal<unknown>;
+  startInput: Signal<unknown>;
+  input: Signal<unknown>;
+  isTouched: Signal<boolean>;
+  isDirty: Signal<boolean>;
+}
+type InternalFieldStore = InternalArrayStore | InternalObjectStore | InternalValueStore;
+//#endregion
+//#region src/values.d.ts
+declare const INTERNAL: "~internal";
+//#endregion
+//#region src/types/utils.d.ts
+/**
+* Checks if a type is `any`.
+*/
+type IsAny<Type> = 0 extends 1 & Type ? true : false;
+/**
+* Checks if a type is `never`.
+*/
+type IsNever<Type> = [Type] extends [never] ? true : false;
+/**
+* Constructs a type that is maybe a promise.
+*/
+type MaybePromise<TValue> = TValue | Promise<TValue>;
+/**
+* Makes all properties deeply optional.
+*/
+type DeepPartial<TValue> = TValue extends readonly unknown[] ? number extends TValue["length"] ? TValue : { [Key in keyof TValue]?: DeepPartial<TValue[Key]> | undefined } : TValue extends Record<PropertyKey, unknown> ? { [Key in keyof TValue]?: DeepPartial<TValue[Key]> | undefined } : TValue | undefined;
+/**
+* Makes all value properties optional.
+*/
+type PartialValues<TValue> = TValue extends readonly unknown[] ? number extends TValue["length"] ? TValue : { [Key in keyof TValue]: PartialValues<TValue[Key]> } : TValue extends Record<PropertyKey, unknown> ? { [Key in keyof TValue]: PartialValues<TValue[Key]> } : TValue | undefined;
+//#endregion
+//#region src/types/form.d.ts
+/**
+* Value type of the validation mode.
+*/
+type ValidationMode = "initial" | "touch" | "input" | "change" | "blur" | "submit";
+interface FormConfig<TSchema extends Schema = Schema> {
+  readonly schema: TSchema;
+  readonly initialInput?: DeepPartial<v.InferInput<TSchema>> | undefined;
+  readonly validate?: ValidationMode | undefined;
+  readonly revalidate?: Exclude<ValidationMode, "initial"> | undefined;
+}
+interface InternalFormStore<TSchema extends Schema = Schema> extends InternalObjectStore {
+  element?: HTMLFormElement;
+  validators: number;
+  validate: ValidationMode;
+  revalidate: Exclude<ValidationMode, "initial">;
+  parse: (input: unknown) => Promise<v.SafeParseResult<TSchema>>;
+  isSubmitting: Signal<boolean>;
+  isSubmitted: Signal<boolean>;
+  isValidating: Signal<boolean>;
+}
+interface BaseFormStore<TSchema extends Schema = Schema> {
+  [INTERNAL]: InternalFormStore<TSchema>;
+}
+type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<void>;
+//#endregion
+//#region src/types/path.d.ts
+/**
+* Path key type.
+*/
+type PathKey = string | number;
+/**
+* Path type.
+*/
+type Path = readonly PathKey[];
+/**
+* Required path type.
+*/
+type RequiredPath = readonly [PathKey, ...Path];
+/**
+* Extracts the exact keys of a tuple, array or object.
+*/
+type KeyOf<TValue> = IsAny<TValue> extends true ? never : TValue extends readonly unknown[] ? number extends TValue["length"] ? number : { [TKey in keyof TValue]: TKey extends `${infer TIndex extends number}` ? TIndex : never }[number] : TValue extends Record<string, unknown> ? keyof TValue & PathKey : never;
+/**
+* Merges array and object unions into a single object.
+*
+* Hint: This is necessary to make any property accessible. By default,
+* properties that do not exist in all union options are not accessible
+* and result in "any" when accessed.
+*/
+type MergeUnion<T> = { [K in KeyOf<T>]: T extends Record<K, infer V> ? V : never };
+/**
+* Lazily evaluate only the first valid path segment based on the given value.
+*/
+type LazyPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValidPath : TPathToCheck extends readonly [infer TFirstKey extends KeyOf<TValue>, ...infer TPathRest extends Path] ? LazyPath<MergeUnion<TValue>[TFirstKey], TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOf<TValue>> extends false ? readonly [...TValidPath, KeyOf<TValue>] : TValidPath;
+/**
+* Returns the path if valid, otherwise the first possible valid path based on
+* the given value.
+*/
+type ValidPath<TValue, TPath extends RequiredPath> = TPath extends LazyPath<TValue, TPath> ? TPath : LazyPath<TValue, TPath>;
+/**
+* Extracts the value type at the given path.
+*/
+type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends KeyOf<TValue> ? PathValue<MergeUnion<TValue>[TKey], TRest> : unknown : TValue;
+/**
+* Checks if a value is an array or contains one.
+*/
+type IsOrHasArray<TValue> = IsAny<TValue> extends true ? false : TValue extends readonly unknown[] ? true : TValue extends Record<string, unknown> ? true extends { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> }[keyof TValue] ? true : false : false;
+/**
+* Extracts the exact keys of a tuple, array or object that contain arrays.
+*/
+type KeyOfArrayPath<TValue> = IsAny<TValue> extends true ? never : TValue extends readonly (infer TItem)[] ? number extends TValue["length"] ? IsOrHasArray<TItem> extends true ? number : never : { [TKey in keyof TValue]: TKey extends `${infer TIndex extends number}` ? IsOrHasArray<TValue[TKey]> extends true ? TIndex : never : never }[number] : TValue extends Record<string, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> extends true ? TKey : never }[keyof TValue] & PathKey : never;
+/**
+* Lazily evaluate only the first valid array path segment based on the given value.
+*/
+type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, KeyOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends KeyOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<MergeUnion<TValue>[TFirstKey], TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOfArrayPath<TValue>> extends false ? readonly [...TValidPath, KeyOfArrayPath<TValue>] : never;
+/**
+* Returns the path if valid, otherwise the first possible valid array path based on
+* the given value.
+*/
+type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArrayPath<TValue, TPath> ? TPath : LazyArrayPath<TValue, TPath>;
+//#endregion
+//#region src/array/copyItemState/copyItemState.d.ts
+/**
+* Copies the deeply nested state (signal values) from one array item to another.
+* This includes the `isTouched`, `isDirty`, `startInput`, `input`, `startItems`, and `items` properties.
+* Recursively walks through the field stores and copies all signal values.
+*
+* @param internalArrayStore - The field store of the array (not the array item)
+* @param fromIndex - The source index to copy from
+* @param toIndex - The destination index to copy to
+*/
+//#endregion
+//#region ../../packages/methods/dist/index.vue.d.ts
+//#region src/focus/focus.d.ts
+interface FocusFieldConfig<TSchema extends Schema, TFieldPath extends RequiredPath> {
+  readonly form: BaseFormStore<TSchema>;
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+}
+declare function focus<TSchema extends Schema, TFieldPath extends RequiredPath>(config: FocusFieldConfig<TSchema, TFieldPath>): void;
+//#endregion
+//#region src/getAllErrors/getAllErrors.d.ts
+declare function getAllErrors(form: BaseFormStore): [string, ...string[]] | null;
+//#endregion
+//#region src/getErrors/getErrors.d.ts
+interface GetFormErrorsConfig {
+  readonly path?: undefined;
+}
+interface GetFieldErrorsConfig<TSchema extends Schema, TFieldPath extends RequiredPath> {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+}
+declare function getErrors<TSchema extends Schema>(form: BaseFormStore<TSchema>): [string, ...string[]] | null;
+declare function getErrors<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldErrorsConfig<TSchema, TFieldPath> : GetFormErrorsConfig): [string, ...string[]] | null;
+//#endregion
+//#region src/getInput/getInput.d.ts
+interface GetFormInputConfig {
+  readonly path?: undefined;
+}
+interface GetFieldInputConfig<TSchema extends Schema, TFieldPath extends RequiredPath> {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+}
+declare function getInput<TSchema extends Schema>(form: BaseFormStore<TSchema>): PartialValues<v.InferInput<TSchema>>;
+declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldInputConfig<TSchema, TFieldPath> : GetFormInputConfig): PartialValues<TFieldPath extends RequiredPath ? PathValue<v.InferInput<TSchema>, TFieldPath> : v.InferInput<TSchema>>;
+//#endregion
+//#region src/handleSubmit/handleSubmit.d.ts
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): (event: SubmitEvent) => void;
+//#endregion
+//#region src/insert/insert.d.ts
+interface InsertConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+  readonly at?: number | undefined;
+  readonly initialInput?: DeepPartial<PathValue<v.InferInput<TSchema>, [...TFieldArrayPath, number]>> | undefined;
+}
+declare function insert<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: InsertConfig<TSchema, TFieldArrayPath>): void;
+//#endregion
+//#region src/move/move.d.ts
+interface MoveConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+  readonly from: number;
+  readonly to: number;
+}
+declare function move<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: MoveConfig<TSchema, TFieldArrayPath>): void;
+//#endregion
+//#region src/remove/remove.d.ts
+interface RemoveConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+  readonly at: number;
+}
+declare function remove<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: RemoveConfig<TSchema, TFieldArrayPath>): void;
+//#endregion
+//#region src/replace/replace.d.ts
+interface ReplaceConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+  readonly at: number;
+  readonly initialInput?: DeepPartial<PathValue<v.InferInput<TSchema>, [...TFieldArrayPath, number]>> | undefined;
+}
+declare function replace<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: ReplaceConfig<TSchema, TFieldArrayPath>): void;
+//#endregion
+//#region src/reset/reset.d.ts
+interface ResetBaseConfig {
+  readonly keepInput?: boolean | undefined;
+  readonly keepTouched?: boolean | undefined;
+  readonly keepErrors?: boolean | undefined;
+}
+interface ResetFormConfig<TSchema extends Schema> extends ResetBaseConfig {
+  readonly path?: undefined;
+  readonly initialInput?: DeepPartial<v.InferInput<TSchema>> | undefined;
+  readonly keepSubmitCount?: boolean | undefined;
+  readonly keepSubmitted?: boolean | undefined;
+}
+interface ResetFieldConfig<TSchema extends Schema, TFieldPath extends RequiredPath> extends ResetBaseConfig {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+  readonly initialInput?: DeepPartial<PathValue<v.InferInput<TSchema>, TFieldPath>>;
+}
+declare function reset(form: BaseFormStore): void;
+declare function reset<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? ResetFieldConfig<TSchema, TFieldPath> : ResetFormConfig<TSchema>): void;
+//#endregion
+//#region src/setErrors/setErrors.d.ts
+interface SetFormErrorsConfig {
+  readonly path?: undefined;
+  readonly errors: [string, ...string[]] | null;
+}
+interface SetFieldErrorsConfig<TSchema extends Schema, TFieldPath extends RequiredPath> {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+  readonly errors: [string, ...string[]] | null;
+}
+declare function setErrors<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? SetFieldErrorsConfig<TSchema, TFieldPath> : SetFormErrorsConfig): void;
+//#endregion
+//#region src/setInput/setInput.d.ts
+interface SetFormInputConfig<TSchema extends Schema> {
+  readonly path?: undefined;
+  readonly input: v.InferInput<TSchema>;
+}
+interface SetFieldInputConfig<TSchema extends Schema, TFieldPath extends RequiredPath> {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+  readonly input: PathValue<v.InferInput<TSchema>, TFieldPath>;
+}
+declare function setInput<TSchema extends Schema>(form: BaseFormStore<TSchema>, config: SetFormInputConfig<TSchema>): void;
+declare function setInput<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? SetFieldInputConfig<TSchema, TFieldPath> : SetFormInputConfig<TSchema>): void;
+//#endregion
+//#region src/submit/submit.d.ts
+declare function submit(form: BaseFormStore): void;
+//#endregion
+//#region src/swap/swap.d.ts
+interface SwapConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+  readonly at: number;
+  readonly and: number;
+}
+declare function swap<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: BaseFormStore<TSchema>, config: SwapConfig<TSchema, TFieldArrayPath>): void;
+//#endregion
+//#region src/validate/validate.d.ts
+interface ValidateFormConfig {
+  readonly shouldFocus?: boolean | undefined;
+}
+declare function validate<TSchema extends Schema>(form: BaseFormStore<TSchema>, config?: ValidateFormConfig): Promise<v.SafeParseResult<TSchema>>;
+//#endregion
+//#endregion
+//#region src/types/field.d.ts
+/**
+* Value type of the field element props.
+*/
+interface FieldElementProps {
+  readonly name: string;
+  readonly autofocus: boolean;
+  readonly ref: (element: Element | ComponentPublicInstance | null) => void;
+  readonly onFocus: (event: FocusEvent) => void;
+  readonly onChange: (event: Event) => void;
+  readonly onBlur: (event: FocusEvent) => void;
+}
+/**
+* Value type of the field store.
+*/
+interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+  get input(): PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>;
+  set input(value: PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>);
+  readonly errors: [string, ...string[]] | null;
+  readonly isTouched: boolean;
+  readonly isDirty: boolean;
+  readonly isValid: boolean;
+  readonly props: FieldElementProps;
+}
+/**
+* Value type of the field array store.
+*/
+interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+  readonly items: string[];
+  readonly errors: [string, ...string[]] | null;
+  readonly isTouched: boolean;
+  readonly isDirty: boolean;
+  readonly isValid: boolean;
+}
+//#endregion
+//#region src/types/form.d.ts
+interface FormStore<TSchema extends Schema = Schema> extends BaseFormStore<TSchema> {
+  readonly isSubmitting: boolean;
+  readonly isSubmitted: boolean;
+  readonly isValidating: boolean;
+  readonly isTouched: boolean;
+  readonly isDirty: boolean;
+  readonly isValid: boolean;
+  readonly errors: [string, ...string[]] | null;
+}
+//#endregion
+//#region src/components/Field/Field.vue.d.ts
+/**
+ * Properties of the `Field` component.
+ */
+interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+  readonly of: FormStore<TSchema>;
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+}
+declare const _default: <TSchema extends Schema, TFieldPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue0.VNodeProps & vue0.AllowedComponentProps & vue0.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & Partial<{}>> & vue0.PublicProps;
+  expose(exposed: vue0.ShallowUnwrapRef<{}>): void;
+  attrs: any;
+  slots: {
+    default(props: FieldStore<TSchema, TFieldPath>): any;
+  };
+  emit: {};
+}>) => vue0.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal$2<T> = { [K in keyof T as K]: T[K] } & {};
+//#endregion
+//#region src/components/FieldArray/FieldArray.vue.d.ts
+/**
+ * Properties of the `FieldArray` component.
+ */
+interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+  readonly of: FormStore<TSchema>;
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+}
+declare const _default$1: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue0.VNodeProps & vue0.AllowedComponentProps & vue0.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & Partial<{}>> & vue0.PublicProps;
+  expose(exposed: vue0.ShallowUnwrapRef<{}>): void;
+  attrs: any;
+  slots: {
+    default(props: FieldArrayStore<TSchema, TFieldArrayPath>): any;
+  };
+  emit: {};
+}>) => vue0.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal$1<T> = { [K in keyof T as K]: T[K] } & {};
+//#endregion
+//#region src/components/Form/Form.vue.d.ts
+type FormProps<TSchema extends Schema = Schema> = {
+  of: FormStore<TSchema>;
+  onSubmit: SubmitHandler<TSchema>;
+};
+declare const _default$2: <TSchema extends Schema = Schema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue0.VNodeProps & vue0.AllowedComponentProps & vue0.ComponentCustomProps, never>, never> & FormProps<TSchema> & Partial<{}>> & vue0.PublicProps;
+  expose(exposed: vue0.ShallowUnwrapRef<{}>): void;
+  attrs: any;
+  slots: {
+    default?: (props: {}) => any;
+  };
+  emit: {};
+}>) => vue0.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = { [K in keyof T as K]: T[K] } & {};
+//#endregion
+//#region src/composables/useField/useField.d.ts
+interface UseFieldConfig<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+  readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+}
+declare function useField<TSchema extends Schema, TFieldPath extends RequiredPath>(form: MaybeRefOrGetter<FormStore<TSchema>>, config: MaybeRefOrGetter<UseFieldConfig<TSchema, TFieldPath>>): FieldStore<TSchema, TFieldPath>;
+//#endregion
+//#region src/composables/useFieldArray/useFieldArray.d.ts
+interface UseFieldArrayConfig<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+  readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+}
+declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: MaybeRefOrGetter<FormStore<TSchema>>, config: MaybeRefOrGetter<UseFieldArrayConfig<TSchema, TFieldArrayPath>>): FieldArrayStore<TSchema, TFieldArrayPath>;
+//#endregion
+//#region src/composables/useForm/useForm.d.ts
+declare function useForm<TSchema extends Schema>(config: FormConfig<TSchema>): FormStore<TSchema>;
+//#endregion
+export { _default as Field, _default$1 as FieldArray, FieldArrayStore, FieldElementProps, FieldStore, FocusFieldConfig, _default$2 as Form, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, RemoveConfig, ReplaceConfig, ResetFieldConfig, ResetFormConfig, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, ValidateFormConfig, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };

package/dist/index.js

@@ -0,0 +1,718 @@
+import * as v from "valibot";
+import { computed, createElementBlock, defineComponent, guardReactiveProps, normalizeProps, onBeforeMount, onUnmounted, openBlock, renderSlot, shallowRef as createSignal, toValue, unref } from "vue";
+
+//#region ../../packages/core/dist/index.vue.js
+const framework = "vue";
+function createId() {
+	return Math.random().toString(36).slice(2);
+}
+function batch(fn) {
+	return fn();
+}
+function untrack(fn) {
+	return fn();
+}
+/**
+* TODO: Add comment
+* TODO: Should this stay in /primitives or move to /utils?
+*/
+function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
+	if (framework === "qwik" && schema.type === "lazy" || schema.type === "object_with_rest" || schema.type === "record" || schema.type === "tuple_with_rest" || schema.type === "promise") throw new Error(`"${schema.type}" schema is not supported`);
+	else if (schema.type === "lazy") initializeFieldStore(internalFieldStore, schema.getter(void 0), initialInput, path);
+	else if (schema.type === "exact_optional" || schema.type === "non_nullable" || schema.type === "non_nullish" || schema.type === "non_optional" || schema.type === "nullable" || schema.type === "nullish" || schema.type === "optional" || schema.type === "undefinedable") initializeFieldStore(internalFieldStore, schema.wrapped, initialInput ?? v.getDefault(schema), path);
+	else if (schema.type === "intersect" || schema.type === "union" || schema.type === "variant") for (const schemaOption of schema.options) initializeFieldStore(internalFieldStore, schemaOption, initialInput, path);
+	else {
+		internalFieldStore.schema = schema;
+		internalFieldStore.name = JSON.stringify(path);
+		internalFieldStore.elements = [];
+		internalFieldStore.errors = createSignal(null);
+		if (schema.type === "array" || schema.type === "loose_tuple" || schema.type === "strict_tuple" || schema.type === "tuple") {
+			if (internalFieldStore.kind && internalFieldStore.kind !== "array") throw new Error(`Store initialized as "${internalFieldStore.kind}" cannot be reinitialized as "array"`);
+			internalFieldStore.kind = "array";
+			if (internalFieldStore.kind === "array") {
+				internalFieldStore.children ??= [];
+				if (schema.type === "array") {
+					if (initialInput) for (let index = 0; index < initialInput.length; index++) {
+						internalFieldStore.children[index] = {};
+						path.push(index);
+						initializeFieldStore(internalFieldStore.children[index], schema.item, initialInput[index], path);
+						path.pop();
+					}
+				} else for (let index = 0; index < schema.items; index++) {
+					internalFieldStore.children[index] = {};
+					path.push(index);
+					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput && initialInput[index], path);
+					path.pop();
+				}
+				const initialItems = internalFieldStore.children.map(createId);
+				internalFieldStore.initialItems = createSignal(initialItems);
+				internalFieldStore.startItems = createSignal(initialItems);
+				internalFieldStore.items = createSignal(initialItems);
+				internalFieldStore.isTouched = createSignal(false);
+				internalFieldStore.isDirty = createSignal(false);
+			}
+		} else if (schema.type === "loose_object" || schema.type === "object" || schema.type === "strict_object") {
+			if (internalFieldStore.kind && internalFieldStore.kind !== "object") throw new Error(`Store initialized as "${internalFieldStore.kind}" cannot be reinitialized as "object"`);
+			internalFieldStore.kind = "object";
+			if (internalFieldStore.kind === "object") {
+				internalFieldStore.children ??= {};
+				for (const key in schema.entries) {
+					internalFieldStore.children[key] = {};
+					path.push(key);
+					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput && initialInput[key], path);
+					path.pop();
+				}
+			}
+		} else {
+			internalFieldStore.kind = "value";
+			if (internalFieldStore.kind === "value") {
+				internalFieldStore.initialInput = createSignal(initialInput);
+				internalFieldStore.startInput = createSignal(initialInput);
+				internalFieldStore.input = createSignal(initialInput);
+				internalFieldStore.isTouched = createSignal(false);
+				internalFieldStore.isDirty = createSignal(false);
+			}
+		}
+	}
+}
+/**
+* Copies the deeply nested state (signal values) from one array item to another.
+* This includes the `isTouched`, `isDirty`, `startInput`, `input`, `startItems`, and `items` properties.
+* Recursively walks through the field stores and copies all signal values.
+*
+* @param internalArrayStore - The field store of the array (not the array item)
+* @param fromIndex - The source index to copy from
+* @param toIndex - The destination index to copy to
+*/
+function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
+	batch(() => {
+		untrack(() => {
+			if (fromInternalFieldStore.kind === "array" && toInternalFieldStore.kind === "array") {
+				const fromItems = fromInternalFieldStore.items.value;
+				toInternalFieldStore.isTouched.value = fromInternalFieldStore.isTouched.value;
+				toInternalFieldStore.isDirty.value = fromInternalFieldStore.isDirty.value;
+				toInternalFieldStore.startItems.value = fromInternalFieldStore.startItems.value;
+				toInternalFieldStore.items.value = fromItems;
+				let path;
+				for (let index = 0; index < fromItems.length; index++) {
+					if (!toInternalFieldStore.children[index]) {
+						path ??= JSON.parse(toInternalFieldStore.name);
+						toInternalFieldStore.children[index] = {};
+						path.push(index);
+						initializeFieldStore(toInternalFieldStore.children[index], toInternalFieldStore.schema.item, void 0, path);
+						path.pop();
+					}
+					copyItemState(fromInternalFieldStore.children[index], toInternalFieldStore.children[index]);
+				}
+			} else if (fromInternalFieldStore.kind === "object" && toInternalFieldStore.kind === "object") for (const key in fromInternalFieldStore.children) copyItemState(fromInternalFieldStore.children[key], toInternalFieldStore.children[key]);
+			else if (fromInternalFieldStore.kind === "value" && toInternalFieldStore.kind === "value") {
+				toInternalFieldStore.isTouched.value = fromInternalFieldStore.isTouched.value;
+				toInternalFieldStore.isDirty.value = fromInternalFieldStore.isDirty.value;
+				toInternalFieldStore.startInput.value = fromInternalFieldStore.startInput.value;
+				toInternalFieldStore.input.value = fromInternalFieldStore.input.value;
+			}
+		});
+	});
+}
+/**
+* Resets the state of an array item (signal values) deeply nested.
+* Sets `isTouched` and `isDirty` to `false` and `startInput`, `input`,
+* `startItems` and `items` to the new input.
+* Keeps the `initialInput` and `initialItems` state unchanged for form reset functionality.
+*
+* @param internalFieldStore - The field store of the array item
+* @param initialInput - The new input value (can be any type including array or object)
+*/
+function resetItemState(internalFieldStore, initialInput) {
+	batch(() => {
+		internalFieldStore.errors.value = null;
+		if (internalFieldStore.kind === "array") {
+			internalFieldStore.isTouched.value = false;
+			internalFieldStore.isDirty.value = false;
+			if (initialInput) {
+				const newItems = initialInput.map(createId);
+				internalFieldStore.startItems.value = newItems;
+				internalFieldStore.items.value = newItems;
+				for (let index = 0; index < initialInput.length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], initialInput[index]);
+			} else {
+				internalFieldStore.startItems.value = [];
+				internalFieldStore.items.value = [];
+			}
+		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], initialInput?.[key]);
+		else {
+			internalFieldStore.isTouched.value = false;
+			internalFieldStore.isDirty.value = false;
+			internalFieldStore.startInput.value = initialInput;
+			internalFieldStore.input.value = initialInput;
+		}
+	});
+}
+/**
+* Swaps the deeply nested state (signal values) between two field stores.
+* This includes the `isTouched`, `isDirty`, `startInput`, `input`, `startItems`, and `items` properties.
+* Recursively walks through the field stores and swaps all signal values.
+*
+* @param firstInternalFieldStore - The first field store to swap
+* @param secondInternalFieldStore - The second field store to swap
+*/
+function swapItemState(firstInternalFieldStore, secondInternalFieldStore) {
+	batch(() => {
+		untrack(() => {
+			if (firstInternalFieldStore.kind === "array" && secondInternalFieldStore.kind === "array") {
+				const firstItems = firstInternalFieldStore.items.value;
+				const secondItems = secondInternalFieldStore.items.value;
+				const tempIsTouched = firstInternalFieldStore.isTouched.value;
+				firstInternalFieldStore.isTouched.value = secondInternalFieldStore.isTouched.value;
+				secondInternalFieldStore.isTouched.value = tempIsTouched;
+				const tempIsDirty = firstInternalFieldStore.isDirty.value;
+				firstInternalFieldStore.isDirty.value = secondInternalFieldStore.isDirty.value;
+				secondInternalFieldStore.isDirty.value = tempIsDirty;
+				const tempStartItems = firstInternalFieldStore.startItems.value;
+				firstInternalFieldStore.startItems.value = secondInternalFieldStore.startItems.value;
+				secondInternalFieldStore.startItems.value = tempStartItems;
+				firstInternalFieldStore.items.value = secondItems;
+				secondInternalFieldStore.items.value = firstItems;
+				const maxLength = Math.max(firstItems.length, secondItems.length);
+				let firstPath;
+				let secondPath;
+				for (let index = 0; index < maxLength; index++) {
+					if (!firstInternalFieldStore.children[index]) {
+						firstPath ??= JSON.parse(firstInternalFieldStore.name);
+						firstInternalFieldStore.children[index] = {};
+						firstPath.push(index);
+						initializeFieldStore(firstInternalFieldStore.children[index], firstInternalFieldStore.schema.item, void 0, firstPath);
+						firstPath.pop();
+					}
+					if (!secondInternalFieldStore.children[index]) {
+						secondPath ??= JSON.parse(secondInternalFieldStore.name);
+						secondInternalFieldStore.children[index] = {};
+						secondPath.push(index);
+						initializeFieldStore(secondInternalFieldStore.children[index], secondInternalFieldStore.schema.item, void 0, secondPath);
+						secondPath.pop();
+					}
+					swapItemState(firstInternalFieldStore.children[index], secondInternalFieldStore.children[index]);
+				}
+			} else if (firstInternalFieldStore.kind === "object" && secondInternalFieldStore.kind === "object") for (const key in firstInternalFieldStore.children) swapItemState(firstInternalFieldStore.children[key], secondInternalFieldStore.children[key]);
+			else if (firstInternalFieldStore.kind === "value" && secondInternalFieldStore.kind === "value") {
+				const tempIsTouched = firstInternalFieldStore.isTouched.value;
+				firstInternalFieldStore.isTouched.value = secondInternalFieldStore.isTouched.value;
+				secondInternalFieldStore.isTouched.value = tempIsTouched;
+				const tempIsDirty = firstInternalFieldStore.isDirty.value;
+				firstInternalFieldStore.isDirty.value = secondInternalFieldStore.isDirty.value;
+				secondInternalFieldStore.isDirty.value = tempIsDirty;
+				const tempStartInput = firstInternalFieldStore.startInput.value;
+				firstInternalFieldStore.startInput.value = secondInternalFieldStore.startInput.value;
+				secondInternalFieldStore.startInput.value = tempStartInput;
+				const tempInput = firstInternalFieldStore.input.value;
+				firstInternalFieldStore.input.value = secondInternalFieldStore.input.value;
+				secondInternalFieldStore.input.value = tempInput;
+			}
+		});
+	});
+}
+function getFieldInput(internalFieldStore) {
+	if (internalFieldStore.kind === "array") {
+		const value = [];
+		for (let index = 0; index < internalFieldStore.items.value.length; index++) value[index] = getFieldInput(internalFieldStore.children[index]);
+		return value;
+	}
+	if (internalFieldStore.kind === "object") {
+		const value = {};
+		for (const key in internalFieldStore.children) value[key] = getFieldInput(internalFieldStore.children[key]);
+		return value;
+	}
+	return internalFieldStore.input.value;
+}
+function getFieldBool(internalFieldStore, type) {
+	if (internalFieldStore.kind === "array") {
+		if (internalFieldStore[type].value) return true;
+		for (let index = 0; index < internalFieldStore.items.value.length; index++) if (getFieldBool(internalFieldStore.children[index], type)) return true;
+		return false;
+	}
+	if (internalFieldStore.kind == "object") {
+		if (type === "errors" && internalFieldStore[type].value) return true;
+		for (const key in internalFieldStore.children) if (getFieldBool(internalFieldStore.children[key], type)) return true;
+		return false;
+	}
+	return !!internalFieldStore[type].value;
+}
+function getFieldStore(internalFormStore, path) {
+	let internalFieldStore = internalFormStore;
+	for (const key of path) internalFieldStore = internalFieldStore.children[key];
+	return internalFieldStore;
+}
+function setFieldBool(internalFieldStore, type, bool) {
+	batch(() => {
+		if (internalFieldStore.kind === "array") {
+			internalFieldStore[type].value = bool;
+			for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) setFieldBool(internalFieldStore.children[index], type, bool);
+		} else if (internalFieldStore.kind == "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
+		else internalFieldStore[type].value = bool;
+	});
+}
+function setFieldInput(internalFieldStore, input) {
+	batch(() => {
+		if (internalFieldStore.kind === "array") {
+			const items = untrack(() => internalFieldStore.items.value);
+			if (input.length < items.length) internalFieldStore.items.value = items.slice(0, input.length);
+			else if (input.length > items.length) {
+				if (input.length > internalFieldStore.children.length) {
+					const path = JSON.parse(internalFieldStore.name);
+					for (let index = internalFieldStore.children.length; index < input.length; index++) {
+						internalFieldStore.children[index] = {};
+						path.push(index);
+						initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
+						path.pop();
+					}
+				}
+				internalFieldStore.items.value = [...items, ...input.slice(items.length).map(createId)];
+			}
+			for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], input[index]);
+			internalFieldStore.isDirty.value = untrack(() => internalFieldStore.startItems.value).length !== items.length;
+		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input[key]);
+		else {
+			internalFieldStore.input.value = input;
+			internalFieldStore.isTouched.value = true;
+			const startInput = untrack(() => internalFieldStore.startInput.value);
+			internalFieldStore.isDirty.value = startInput !== input && (startInput !== void 0 || input !== "" && !Number.isNaN(input));
+		}
+	});
+}
+function setInitialFieldInput(internalFieldStore, initialInput) {
+	batch(() => {
+		if (internalFieldStore.kind === "array") {
+			if (initialInput.length > internalFieldStore.children.length) {
+				const path = JSON.parse(internalFieldStore.name);
+				for (let index = internalFieldStore.children.length; index < initialInput.length; index++) {
+					internalFieldStore.children[index] = {};
+					path.push(index);
+					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialInput[index], path);
+					path.pop();
+				}
+			}
+			internalFieldStore.initialItems.value = initialInput.map(createId);
+			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialInput?.[index]);
+		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
+		else internalFieldStore.initialInput.value = initialInput;
+	});
+}
+function walkFieldStore(internalFieldStore, callback) {
+	callback(internalFieldStore);
+	if (internalFieldStore.kind === "array") for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) walkFieldStore(internalFieldStore.children[index], callback);
+	else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) walkFieldStore(internalFieldStore.children[key], callback);
+}
+function createFormStore(config, parse) {
+	const store = {};
+	initializeFieldStore(store, config.schema, config.initialInput, []);
+	store.validate = config.validate ?? "submit";
+	store.revalidate = config.revalidate ?? "input";
+	store.parse = parse;
+	store.isSubmitting = createSignal(false);
+	store.isSubmitted = createSignal(false);
+	store.isValidating = createSignal(false);
+	return store;
+}
+async function validateFormInput(internalFormStore, config) {
+	internalFormStore.validators++;
+	internalFormStore.isValidating.value = true;
+	const result = await internalFormStore.parse(untrack(() => getFieldInput(internalFormStore)));
+	let rootErrors;
+	let nestedErrors;
+	if (result.issues) {
+		nestedErrors = {};
+		for (const issue of result.issues) if (issue.path) {
+			const path = [];
+			for (const pathItem of issue.path) {
+				const key = pathItem.key;
+				const keyType = typeof key;
+				const itemType = pathItem.type;
+				if (keyType !== "string" && keyType !== "number" || itemType === "map" || itemType === "set") break;
+				path.push(key);
+			}
+			const name = JSON.stringify(path);
+			const fieldErrors = nestedErrors[name];
+			if (fieldErrors) fieldErrors.push(issue.message);
+			else nestedErrors[name] = [issue.message];
+		} else if (rootErrors) rootErrors.push(issue.message);
+		else rootErrors = [issue.message];
+	}
+	let shouldFocus = config?.shouldFocus ?? false;
+	batch(() => {
+		walkFieldStore(internalFormStore, (internalFieldStore) => {
+			if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
+			else {
+				const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
+				internalFieldStore.errors.value = fieldErrors;
+				if (shouldFocus && fieldErrors) {
+					internalFieldStore.elements[0]?.focus();
+					shouldFocus = false;
+				}
+			}
+		});
+		internalFormStore.validators--;
+		internalFormStore.isValidating.value = internalFormStore.validators > 0;
+	});
+	return result;
+}
+function validateIfRequired(internalFormStore, internalFieldStore, validationModes) {
+	if (validationModes === (internalFormStore.validate === "initial" || (internalFormStore.validate === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidate : internalFormStore.validate)) validateFormInput(internalFormStore);
+}
+const INTERNAL = "~internal";
+
+//#endregion
+//#region ../../packages/methods/dist/index.vue.js
+function focus(config) {
+	getFieldStore(config.form[INTERNAL], config.path).elements[0]?.focus();
+}
+function getAllErrors(form) {
+	let allErrors = null;
+	walkFieldStore(form[INTERNAL], (internalFieldStore) => {
+		const errors = internalFieldStore.errors.value;
+		if (errors) if (allErrors) allErrors.push(...errors);
+		else allErrors = [...errors];
+	});
+	return allErrors;
+}
+function getErrors(form, config) {
+	return (config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]).errors.value;
+}
+function getInput(form, config) {
+	return getFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
+}
+function handleSubmit(form, handler) {
+	return async (event) => {
+		event.preventDefault();
+		const internalFormStore = form[INTERNAL];
+		internalFormStore.isSubmitted.value = true;
+		internalFormStore.isSubmitting.value = true;
+		try {
+			const result = await validateFormInput(internalFormStore, { shouldFocus: true });
+			if (result.success) await handler(result.output, event);
+		} catch (error) {
+			internalFormStore.errors.value = [error instanceof Error ? error.message : "An unknown error has occurred."];
+		} finally {
+			internalFormStore.isSubmitting.value = false;
+		}
+	};
+}
+function insert(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	const insertIndex = config.at === void 0 ? items.length : config.at;
+	if (insertIndex >= 0 && insertIndex <= items.length) batch(() => {
+		const newItems = [...items];
+		newItems.splice(insertIndex, 0, createId());
+		internalArrayStore.items.value = newItems;
+		for (let index = items.length; index > insertIndex; index--) copyItemState(internalArrayStore.children[index - 1], internalArrayStore.children[index]);
+		if (!internalArrayStore.children[insertIndex]) {
+			const path = JSON.parse(internalArrayStore.name);
+			internalArrayStore.children[insertIndex] = {};
+			path.push(insertIndex);
+			initializeFieldStore(internalArrayStore.children[insertIndex], internalArrayStore.schema.item, config.initialInput, path);
+		} else resetItemState(internalArrayStore.children[insertIndex], config.initialInput);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = true;
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+function move(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.from >= 0 && config.from <= items.length - 1 && config.to >= 0 && config.to <= items.length - 1 && config.from !== config.to) batch(() => {
+		const newItems = [...items];
+		newItems.splice(config.to, 0, newItems.splice(config.from, 1)[0]);
+		internalArrayStore.items.value = newItems;
+		const tempInternalFieldStore = {};
+		initializeFieldStore(tempInternalFieldStore, internalArrayStore.schema.item, void 0, []);
+		copyItemState(internalArrayStore.children[config.from < config.to ? config.from : config.to], tempInternalFieldStore);
+		if (config.from < config.to) for (let index = config.from; index < config.to; index++) copyItemState(internalArrayStore.children[index + 1], internalArrayStore.children[index]);
+		else for (let index = config.from; index > config.to; index--) copyItemState(internalArrayStore.children[index - 1], internalArrayStore.children[index]);
+		copyItemState(tempInternalFieldStore, internalArrayStore.children[config.from < config.to ? config.to : config.from]);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = internalArrayStore.startItems.value.join() !== newItems.join();
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+function remove(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.at >= 0 && config.at <= items.length - 1) batch(() => {
+		const newItems = [...items];
+		newItems.splice(config.at, 1);
+		internalArrayStore.items.value = newItems;
+		for (let index = config.at; index < items.length - 1; index++) copyItemState(internalArrayStore.children[index + 1], internalArrayStore.children[index]);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = internalArrayStore.startItems.value.join() !== newItems.join();
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+function replace(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.at >= 0 && config.at <= items.length - 1) batch(() => {
+		const newItems = [...items];
+		newItems[config.at] = createId();
+		internalArrayStore.items.value = newItems;
+		resetItemState(internalArrayStore.children[config.at], config.initialInput);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = true;
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+function reset(form, config) {
+	batch(() => {
+		untrack(() => {
+			const internalFormStore = form[INTERNAL];
+			const internalFieldStore = config?.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
+			if (config?.initialInput) setInitialFieldInput(internalFieldStore, config.initialInput);
+			walkFieldStore(internalFieldStore, (internalFieldStore$1) => {
+				if (!config?.keepErrors) internalFieldStore$1.errors.value = null;
+				if (internalFieldStore$1.kind === "array") {
+					internalFieldStore$1.startItems.value = internalFieldStore$1.initialItems.value;
+					if (!config?.keepInput || internalFieldStore$1.startItems.value.length === internalFieldStore$1.items.value.length) internalFieldStore$1.items.value = internalFieldStore$1.initialItems.value;
+					if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
+					internalFieldStore$1.isDirty.value = internalFieldStore$1.startItems.value !== internalFieldStore$1.items.value;
+				} else if (internalFieldStore$1.kind === "value") {
+					internalFieldStore$1.startInput.value = internalFieldStore$1.initialInput.value;
+					if (!config?.keepInput) internalFieldStore$1.input.value = internalFieldStore$1.initialInput.value;
+					if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
+					internalFieldStore$1.isDirty.value = internalFieldStore$1.startInput.value !== internalFieldStore$1.input.value;
+					for (const element of internalFieldStore$1.elements) if (element.type === "file") element.value = "";
+				}
+			});
+			if (!config?.path) {
+				if (!config?.keepSubmitted) internalFormStore.isSubmitted.value = false;
+				if (internalFormStore.validate === "initial") validateFormInput(internalFormStore);
+			}
+		});
+	});
+}
+function setErrors(form, config) {
+	(config.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]).errors.value = config.errors;
+}
+function setInput(form, config) {
+	batch(() => {
+		const internalFormStore = form[INTERNAL];
+		const internalFieldStore = config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
+		setFieldInput(internalFieldStore, config.input);
+		validateIfRequired(internalFormStore, internalFieldStore, "input");
+	});
+}
+function submit(form) {
+	form[INTERNAL].element?.requestSubmit();
+}
+function swap(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.at >= 0 && config.at <= items.length - 1 && config.and >= 0 && config.and <= items.length - 1 && config.at !== config.and) batch(() => {
+		const newItems = [...items];
+		const tempItemId = newItems[config.at];
+		newItems[config.at] = newItems[config.and];
+		newItems[config.and] = tempItemId;
+		internalArrayStore.items.value = newItems;
+		swapItemState(internalArrayStore.children[config.at], internalArrayStore.children[config.and]);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = internalArrayStore.startItems.value.join() !== newItems.join();
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+function validate(form, config) {
+	return validateFormInput(form[INTERNAL], config);
+}
+
+//#endregion
+//#region src/composables/useField/useField.ts
+function useField(form, config) {
+	const internalFieldStore = computed(() => getFieldStore(toValue(form)[INTERNAL], toValue(config).path));
+	onUnmounted(() => {
+		internalFieldStore.value.elements = internalFieldStore.value.elements.filter((element) => element.isConnected);
+	});
+	const input = computed(() => getFieldInput(internalFieldStore.value));
+	const isTouched = computed(() => getFieldBool(internalFieldStore.value, "isTouched"));
+	const isDirty = computed(() => getFieldBool(internalFieldStore.value, "isDirty"));
+	const isValid = computed(() => !getFieldBool(internalFieldStore.value, "errors"));
+	return {
+		get path() {
+			return toValue(config).path;
+		},
+		get input() {
+			return input.value;
+		},
+		set input(value) {
+			setFieldInput(internalFieldStore.value, value);
+			validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "input");
+		},
+		get errors() {
+			return internalFieldStore.value.errors.value;
+		},
+		get isTouched() {
+			return isTouched.value;
+		},
+		get isDirty() {
+			return isDirty.value;
+		},
+		get isValid() {
+			return isValid.value;
+		},
+		props: {
+			get name() {
+				return internalFieldStore.value.name;
+			},
+			autofocus: !!internalFieldStore.value.errors.value,
+			ref(element) {
+				if (element) internalFieldStore.value.elements.push(element);
+			},
+			onFocus() {
+				setFieldBool(internalFieldStore.value, "isTouched", true);
+				validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "touch");
+			},
+			onChange() {
+				validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "change");
+			},
+			onBlur() {
+				validateIfRequired(toValue(form)[INTERNAL], internalFieldStore.value, "blur");
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/composables/useFieldArray/useFieldArray.ts
+function useFieldArray(form, config) {
+	const internalFieldStore = computed(() => getFieldStore(toValue(form)[INTERNAL], toValue(config).path));
+	const isTouched = computed(() => getFieldBool(internalFieldStore.value, "isTouched"));
+	const isDirty = computed(() => getFieldBool(internalFieldStore.value, "isDirty"));
+	const isValid = computed(() => !getFieldBool(internalFieldStore.value, "errors"));
+	return {
+		get path() {
+			return toValue(config).path;
+		},
+		get items() {
+			return internalFieldStore.value.items.value;
+		},
+		get errors() {
+			return internalFieldStore.value.errors.value;
+		},
+		get isTouched() {
+			return isTouched.value;
+		},
+		get isDirty() {
+			return isDirty.value;
+		},
+		get isValid() {
+			return isValid.value;
+		}
+	};
+}
+
+//#endregion
+//#region src/composables/useForm/useForm.ts
+function useForm(config) {
+	const internalFormStore = createFormStore(config, async (input) => v.safeParseAsync(config.schema, input));
+	onBeforeMount(async () => {
+		if (config.validate === "initial") await validateFormInput(internalFormStore);
+	});
+	const isTouched = computed(() => getFieldBool(internalFormStore, "isTouched"));
+	const isDirty = computed(() => getFieldBool(internalFormStore, "isDirty"));
+	const isValid = computed(() => !getFieldBool(internalFormStore, "errors"));
+	return {
+		[INTERNAL]: internalFormStore,
+		get isSubmitting() {
+			return internalFormStore.isSubmitting.value;
+		},
+		get isSubmitted() {
+			return internalFormStore.isSubmitted.value;
+		},
+		get isValidating() {
+			return internalFormStore.isValidating.value;
+		},
+		get isTouched() {
+			return isTouched.value;
+		},
+		get isDirty() {
+			return isDirty.value;
+		},
+		get isValid() {
+			return isValid.value;
+		},
+		get errors() {
+			return internalFormStore.errors.value;
+		}
+	};
+}
+
+//#endregion
+//#region src/components/Field/Field.vue?vue&type=script&setup=true&lang.ts
+var Field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "Field",
+	props: {
+		of: {},
+		path: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const field = useField(() => props.of, () => ({ path: props.path }));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(field))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Field/Field.vue
+var Field_default = Field_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/FieldArray/FieldArray.vue?vue&type=script&setup=true&lang.ts
+var FieldArray_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "FieldArray",
+	props: {
+		of: {},
+		path: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const field = useFieldArray(() => props.of, () => ({ path: props.path }));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(field))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/FieldArray/FieldArray.vue
+var FieldArray_default = FieldArray_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/Form/Form.vue?vue&type=script&setup=true&lang.ts
+var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: {
+		of: {},
+		onSubmit: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const handler = handleSubmit(props.of, props.onSubmit);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				novalidate: "",
+				onSubmit: _cache[0] || (_cache[0] = (...args) => unref(handler) && unref(handler)(...args))
+			}, [renderSlot(_ctx.$slots, "default")], 32);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Form/Form.vue
+var Form_default = Form_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { Field_default as Field, FieldArray_default as FieldArray, Form_default as Form, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@formisch/vue",
+  "description": "The modular and type-safe form library for Vue",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Fabian Hiller",
+  "homepage": "https://formisch.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fabian-hiller/formisch"
+  },
+  "keywords": [
+    "vue",
+    "form",
+    "typescript",
+    "schema",
+    "validation"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src",
+    "vite": "vite"
+  },
+  "devDependencies": {
+    "@formisch/core": "workspace:*",
+    "@formisch/methods": "workspace:*",
+    "@types/node": "^24.1.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-vue": "~10.3.0",
+    "tsdown": "^0.13.0",
+    "typescript": "~5.8.3",
+    "unplugin-vue": "^7.0.0",
+    "valibot": "^1.1.0",
+    "vue": "^3.5.18",
+    "vue-tsc": "^3.0.4"
+  },
+  "peerDependencies": {
+    "typescript": ">=5",
+    "valibot": "^1.0.0",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  }
+}