@tanstack/solid-form 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
+
+![TanStack Form Header](https://github.com/TanStack/form/raw/beta/media/repo-header.png)
+
+Hooks for managing form state in Solid
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+</a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
+</a><a href="https://github.com/TanStack/form/actions?query=workflow%3A%22solid-form+tests%22">
+<img src="https://github.com/TanStack/form/workflows/solid-form%20tests/badge.svg" />
+</a><a href="https://www.npmjs.com/package/@tanstack/form-core" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/form-core.svg" />
+</a><a href="https://bundlephobia.com/package/@tanstack/solid-form@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/solid-form" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/TanStack/form/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://bestofjs.org/projects/tanstack-form"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%form%26since=daily" /></a><a href="https://github.com/TanStack/form/" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/TanStack/form.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a> <a href="https://gitpod.io/from-referrer/">
+  <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"/>
+</a>
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+<!-- Use the force, Luke -->

package/build/dev.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var formCore = require('@tanstack/form-core');
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidStore = require('@tanstack/solid-store');
+
+// src/index.ts
+var formContext = solidJs.createContext(void 0);
+function useFormContext() {
+  const formApi = solidJs.useContext(formContext);
+  if (!formApi)
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  return formApi;
+}
+
+// src/createField.tsx
+function makeFieldReactive(fieldApi) {
+  const [flag, setFlag] = solidJs.createSignal(false);
+  const fieldApiMemo = solidJs.createMemo(() => [flag(), fieldApi]);
+  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
+  solidJs.onCleanup(unsubscribeStore);
+  return () => fieldApiMemo()[1];
+}
+function createField(opts) {
+  const {
+    formApi,
+    parentFieldName
+  } = useFormContext();
+  const options = opts();
+  const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
+  const fieldApi = new formCore.FieldApi({
+    ...options,
+    form: formApi,
+    name
+  });
+  fieldApi.Field = Field;
+  solidJs.createComputed(() => fieldApi.update({
+    ...opts(),
+    form: formApi
+  }));
+  solidJs.onMount(() => solidJs.onCleanup(fieldApi.mount()));
+  return makeFieldReactive(fieldApi);
+}
+function Field(props) {
+  const fieldApi = createField(() => {
+    const {
+      children,
+      ...fieldOptions
+    } = props;
+    return fieldOptions;
+  });
+  return web.createComponent(formContext.Provider, {
+    get value() {
+      return {
+        formApi: fieldApi().form,
+        parentFieldName: String(fieldApi().name)
+      };
+    },
+    get children() {
+      return solidJs.createComponent(() => props.children(fieldApi), {});
+    }
+  });
+}
+
+// src/createForm.tsx
+function createForm(opts) {
+  const options = opts?.();
+  const formApi = new formCore.FormApi(options);
+  formApi.Provider = function Provider(props) {
+    return web.createComponent(formContext.Provider, web.mergeProps(props, {
+      value: {
+        formApi
+      }
+    }));
+  };
+  formApi.Field = Field;
+  formApi.createField = createField;
+  formApi.useStore = (selector) => solidStore.useStore(formApi.store, selector);
+  formApi.Subscribe = (props) => formCore.functionalUpdate(props.children, solidStore.useStore(formApi.store, props.selector));
+  solidJs.createComputed(() => formApi.update(opts?.()));
+  return formApi;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    createForm: (opts) => createForm(
+      () => solidJs.mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {})
+    ),
+    createField,
+    Field
+  };
+}
+
+Object.defineProperty(exports, 'FieldApi', {
+  enumerable: true,
+  get: function () { return formCore.FieldApi; }
+});
+Object.defineProperty(exports, 'FormApi', {
+  enumerable: true,
+  get: function () { return formCore.FormApi; }
+});
+Object.defineProperty(exports, 'functionalUpdate', {
+  enumerable: true,
+  get: function () { return formCore.functionalUpdate; }
+});
+exports.Field = Field;
+exports.createField = createField;
+exports.createForm = createForm;
+exports.createFormFactory = createFormFactory;

package/build/dev.js

@@ -0,0 +1,93 @@
+import { FieldApi, FormApi, functionalUpdate } from '@tanstack/form-core';
+export { FieldApi, FormApi, functionalUpdate } from '@tanstack/form-core';
+import { createComponent, mergeProps } from 'solid-js/web';
+import { createContext, createComputed, onMount, onCleanup, createComponent as createComponent$1, mergeProps as mergeProps$1, useContext, createSignal, createMemo } from 'solid-js';
+import { useStore } from '@tanstack/solid-store';
+
+// src/index.ts
+var formContext = createContext(void 0);
+function useFormContext() {
+  const formApi = useContext(formContext);
+  if (!formApi)
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  return formApi;
+}
+
+// src/createField.tsx
+function makeFieldReactive(fieldApi) {
+  const [flag, setFlag] = createSignal(false);
+  const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
+  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
+  onCleanup(unsubscribeStore);
+  return () => fieldApiMemo()[1];
+}
+function createField(opts) {
+  const {
+    formApi,
+    parentFieldName
+  } = useFormContext();
+  const options = opts();
+  const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
+  const fieldApi = new FieldApi({
+    ...options,
+    form: formApi,
+    name
+  });
+  fieldApi.Field = Field;
+  createComputed(() => fieldApi.update({
+    ...opts(),
+    form: formApi
+  }));
+  onMount(() => onCleanup(fieldApi.mount()));
+  return makeFieldReactive(fieldApi);
+}
+function Field(props) {
+  const fieldApi = createField(() => {
+    const {
+      children,
+      ...fieldOptions
+    } = props;
+    return fieldOptions;
+  });
+  return createComponent(formContext.Provider, {
+    get value() {
+      return {
+        formApi: fieldApi().form,
+        parentFieldName: String(fieldApi().name)
+      };
+    },
+    get children() {
+      return createComponent$1(() => props.children(fieldApi), {});
+    }
+  });
+}
+
+// src/createForm.tsx
+function createForm(opts) {
+  const options = opts?.();
+  const formApi = new FormApi(options);
+  formApi.Provider = function Provider(props) {
+    return createComponent(formContext.Provider, mergeProps(props, {
+      value: {
+        formApi
+      }
+    }));
+  };
+  formApi.Field = Field;
+  formApi.createField = createField;
+  formApi.useStore = (selector) => useStore(formApi.store, selector);
+  formApi.Subscribe = (props) => functionalUpdate(props.children, useStore(formApi.store, props.selector));
+  createComputed(() => formApi.update(opts?.()));
+  return formApi;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    createForm: (opts) => createForm(
+      () => mergeProps$1(defaultOpts?.() ?? {}, opts?.() ?? {})
+    ),
+    createField,
+    Field
+  };
+}
+
+export { Field, createField, createForm, createFormFactory };

package/build/index.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var formCore = require('@tanstack/form-core');
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidStore = require('@tanstack/solid-store');
+
+// src/index.ts
+var formContext = solidJs.createContext(void 0);
+function useFormContext() {
+  const formApi = solidJs.useContext(formContext);
+  if (!formApi)
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  return formApi;
+}
+
+// src/createField.tsx
+function makeFieldReactive(fieldApi) {
+  const [flag, setFlag] = solidJs.createSignal(false);
+  const fieldApiMemo = solidJs.createMemo(() => [flag(), fieldApi]);
+  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
+  solidJs.onCleanup(unsubscribeStore);
+  return () => fieldApiMemo()[1];
+}
+function createField(opts) {
+  const {
+    formApi,
+    parentFieldName
+  } = useFormContext();
+  const options = opts();
+  const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
+  const fieldApi = new formCore.FieldApi({
+    ...options,
+    form: formApi,
+    name
+  });
+  fieldApi.Field = Field;
+  solidJs.createComputed(() => fieldApi.update({
+    ...opts(),
+    form: formApi
+  }));
+  solidJs.onMount(() => solidJs.onCleanup(fieldApi.mount()));
+  return makeFieldReactive(fieldApi);
+}
+function Field(props) {
+  const fieldApi = createField(() => {
+    const {
+      children,
+      ...fieldOptions
+    } = props;
+    return fieldOptions;
+  });
+  return web.createComponent(formContext.Provider, {
+    get value() {
+      return {
+        formApi: fieldApi().form,
+        parentFieldName: String(fieldApi().name)
+      };
+    },
+    get children() {
+      return solidJs.createComponent(() => props.children(fieldApi), {});
+    }
+  });
+}
+
+// src/createForm.tsx
+function createForm(opts) {
+  const options = opts?.();
+  const formApi = new formCore.FormApi(options);
+  formApi.Provider = function Provider(props) {
+    return web.createComponent(formContext.Provider, web.mergeProps(props, {
+      value: {
+        formApi
+      }
+    }));
+  };
+  formApi.Field = Field;
+  formApi.createField = createField;
+  formApi.useStore = (selector) => solidStore.useStore(formApi.store, selector);
+  formApi.Subscribe = (props) => formCore.functionalUpdate(props.children, solidStore.useStore(formApi.store, props.selector));
+  solidJs.createComputed(() => formApi.update(opts?.()));
+  return formApi;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    createForm: (opts) => createForm(
+      () => solidJs.mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {})
+    ),
+    createField,
+    Field
+  };
+}
+
+Object.defineProperty(exports, 'FieldApi', {
+  enumerable: true,
+  get: function () { return formCore.FieldApi; }
+});
+Object.defineProperty(exports, 'FormApi', {
+  enumerable: true,
+  get: function () { return formCore.FormApi; }
+});
+Object.defineProperty(exports, 'functionalUpdate', {
+  enumerable: true,
+  get: function () { return formCore.functionalUpdate; }
+});
+exports.Field = Field;
+exports.createField = createField;
+exports.createForm = createForm;
+exports.createFormFactory = createFormFactory;

package/build/index.d.cts

@@ -0,0 +1,56 @@
+import { DeepKeys, DeepValue, FieldOptions, Narrow, FieldApi, FormState, FormOptions, FormApi } from '@tanstack/form-core';
+export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
+import { JSXElement } from 'solid-js';
+
+type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
+    mode?: 'value' | 'array';
+};
+
+declare module '@tanstack/form-core' {
+    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
+        Field: FieldComponent<TData, FormValidator>;
+    }
+}
+type CreateField<TParentData> = <TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => {
+    name: Narrow<TName>;
+} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>) => () => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
+declare function createField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): () => FieldApi<TParentData, TName, ValidatorType, FormValidator>;
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
+    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
+} & (TParentData extends any[] ? {
+    name?: TName;
+    index: number;
+} : {
+    name: TName;
+    index?: never;
+}) & Omit<CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
+type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
+declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(props: {
+    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator>) => JSXElement;
+} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): any;
+
+type NoInfer<T> = [T][T extends any ? 0 : never];
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData, ValidatorType> {
+        Provider: (props: {
+            children: any;
+        }) => any;
+        Field: FieldComponent<TFormData, ValidatorType>;
+        createField: CreateField<TFormData>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => () => TSelected;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+            children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement;
+        }) => any;
+    }
+}
+declare function createForm<TData, FormValidator>(opts?: () => FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
+
+type FormFactory<TFormData, FormValidator> = {
+    createForm: (opts?: () => FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
+    createField: CreateField<TFormData>;
+    Field: FieldComponent<TFormData, FormValidator>;
+};
+declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: () => FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
+
+export { CreateField, Field, FieldComponent, FormFactory, createField, createForm, createFormFactory };

package/build/index.d.ts

@@ -0,0 +1,56 @@
+import { DeepKeys, DeepValue, FieldOptions, Narrow, FieldApi, FormState, FormOptions, FormApi } from '@tanstack/form-core';
+export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
+import { JSXElement } from 'solid-js';
+
+type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
+    mode?: 'value' | 'array';
+};
+
+declare module '@tanstack/form-core' {
+    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
+        Field: FieldComponent<TData, FormValidator>;
+    }
+}
+type CreateField<TParentData> = <TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => {
+    name: Narrow<TName>;
+} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>) => () => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
+declare function createField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): () => FieldApi<TParentData, TName, ValidatorType, FormValidator>;
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
+    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
+} & (TParentData extends any[] ? {
+    name?: TName;
+    index: number;
+} : {
+    name: TName;
+    index?: never;
+}) & Omit<CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
+type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
+declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(props: {
+    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator>) => JSXElement;
+} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): any;
+
+type NoInfer<T> = [T][T extends any ? 0 : never];
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData, ValidatorType> {
+        Provider: (props: {
+            children: any;
+        }) => any;
+        Field: FieldComponent<TFormData, ValidatorType>;
+        createField: CreateField<TFormData>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => () => TSelected;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+            children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement;
+        }) => any;
+    }
+}
+declare function createForm<TData, FormValidator>(opts?: () => FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
+
+type FormFactory<TFormData, FormValidator> = {
+    createForm: (opts?: () => FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
+    createField: CreateField<TFormData>;
+    Field: FieldComponent<TFormData, FormValidator>;
+};
+declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: () => FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
+
+export { CreateField, Field, FieldComponent, FormFactory, createField, createForm, createFormFactory };

package/build/index.js

@@ -0,0 +1,93 @@
+import { FieldApi, FormApi, functionalUpdate } from '@tanstack/form-core';
+export { FieldApi, FormApi, functionalUpdate } from '@tanstack/form-core';
+import { createComponent, mergeProps } from 'solid-js/web';
+import { createContext, createComputed, onMount, onCleanup, createComponent as createComponent$1, mergeProps as mergeProps$1, useContext, createSignal, createMemo } from 'solid-js';
+import { useStore } from '@tanstack/solid-store';
+
+// src/index.ts
+var formContext = createContext(void 0);
+function useFormContext() {
+  const formApi = useContext(formContext);
+  if (!formApi)
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  return formApi;
+}
+
+// src/createField.tsx
+function makeFieldReactive(fieldApi) {
+  const [flag, setFlag] = createSignal(false);
+  const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
+  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
+  onCleanup(unsubscribeStore);
+  return () => fieldApiMemo()[1];
+}
+function createField(opts) {
+  const {
+    formApi,
+    parentFieldName
+  } = useFormContext();
+  const options = opts();
+  const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
+  const fieldApi = new FieldApi({
+    ...options,
+    form: formApi,
+    name
+  });
+  fieldApi.Field = Field;
+  createComputed(() => fieldApi.update({
+    ...opts(),
+    form: formApi
+  }));
+  onMount(() => onCleanup(fieldApi.mount()));
+  return makeFieldReactive(fieldApi);
+}
+function Field(props) {
+  const fieldApi = createField(() => {
+    const {
+      children,
+      ...fieldOptions
+    } = props;
+    return fieldOptions;
+  });
+  return createComponent(formContext.Provider, {
+    get value() {
+      return {
+        formApi: fieldApi().form,
+        parentFieldName: String(fieldApi().name)
+      };
+    },
+    get children() {
+      return createComponent$1(() => props.children(fieldApi), {});
+    }
+  });
+}
+
+// src/createForm.tsx
+function createForm(opts) {
+  const options = opts?.();
+  const formApi = new FormApi(options);
+  formApi.Provider = function Provider(props) {
+    return createComponent(formContext.Provider, mergeProps(props, {
+      value: {
+        formApi
+      }
+    }));
+  };
+  formApi.Field = Field;
+  formApi.createField = createField;
+  formApi.useStore = (selector) => useStore(formApi.store, selector);
+  formApi.Subscribe = (props) => functionalUpdate(props.children, useStore(formApi.store, props.selector));
+  createComputed(() => formApi.update(opts?.()));
+  return formApi;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    createForm: (opts) => createForm(
+      () => mergeProps$1(defaultOpts?.() ?? {}, opts?.() ?? {})
+    ),
+    createField,
+    Field
+  };
+}
+
+export { Field, createField, createForm, createFormFactory };

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@tanstack/solid-form",
+  "version": "0.6.0",
+  "description": "Powerful, type-safe forms for Solid.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/form",
+  "homepage": "https://tanstack.com/form",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src"
+  ],
+  "type": "module",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
+      },
+      "require": {
+        "types": "./build/index.d.cts",
+        "default": "./build/dev.cjs"
+      }
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "require": {
+      "types": "./build/index.d.cts",
+      "default": "./build/index.cjs"
+    }
+  },
+  "nx": {
+    "targets": {
+      "test:build": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "solid-js": "^1.7.8",
+    "tsup-preset-solid": "^2.1.0",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "dependencies": {
+    "@tanstack/solid-store": "^0.2.1",
+    "@tanstack/form-core": "0.6.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.6.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc --noEmit",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "tsup"
+  }
+}