@strictly/react-form 0.0.3 → 0.0.4

package/.out/types/specs/list_fields_of_fields.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/types/specs/list_fields_of_fields.tests.js

@@ -0,0 +1,12 @@
+describe('ListFieldsOfFields', () => {
+    it('matches the expected type of an empty set of fields', () => {
+        expectTypeOf().toEqualTypeOf();
+    });
+    it('matches the expected type of a set of fields containing a single list', () => {
+        expectTypeOf().toEqualTypeOf();
+    });
+    it('matches the expected type of a set of fields containing a multiple fields, including a list', () => {
+        expectTypeOf().toEqualTypeOf();
+    });
+});
+export {};

package/.out/types/specs/sub_form_fields.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/types/specs/sub_form_fields.tests.js

@@ -0,0 +1,12 @@
+describe('SubFormFields', () => {
+    it('works on single field', () => {
+        expectTypeOf().toEqualTypeOf();
+    });
+    it('works on more two fields', () => {
+        expectTypeOf().toEqualTypeOf();
+    });
+    it('works on subfields', () => {
+        expectTypeOf().toEqualTypeOf();
+    });
+});
+export {};

package/.out/types/sub_form_fields.d.ts

@@ -0,0 +1,7 @@
+import { type StringConcatOf } from '@strictly/base';
+import { type Fields } from './field';
+export type SubFormFields<F extends Fields, P extends keyof F> = P extends string ? {
+    [K in keyof F as K extends StringConcatOf<`${P}.`, infer S> ? `$.${S}` : never]: F[K];
+} & {
+    $: F[P];
+} : never;

package/.out/types/sub_form_fields.js

@@ -0,0 +1 @@
+export {};

package/.storybook/main.ts

@@ -1,10 +1,12 @@
 /* eslint-env node */
 import { type StorybookConfig } from '@storybook/react-vite'
+import { createRequire } from 'module'
 import {
   dirname,
   join,
-} from 'path'
+} from 'node:path'
 
+const require = createRequire(import.meta.url)
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 44.90 KB
-CJS ⚡️ Build success in 113ms
-ESM dist/index.js 41.31 KB
-ESM ⚡️ Build success in 115ms
+CJS dist/index.cjs 46.90 KB
+CJS ⚡️ Build success in 104ms
+ESM dist/index.js 43.20 KB
+ESM ⚡️ Build success in 106ms
 DTS Build start
-DTS ⚡️ Build success in 9820ms
-DTS dist/index.d.cts 34.05 KB
-DTS dist/index.d.ts  34.05 KB
-Done in 10.94s.
+DTS ⚡️ Build success in 9810ms
+DTS dist/index.d.cts 34.83 KB
+DTS dist/index.d.ts  34.83 KB
+Done in 10.96s.

package/.turbo/turbo-check-types.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ tsc
-Done in 7.59s.
+Done in 7.63s.

package/core/mobx/specs/sub_form_field_adapters.tests.ts

@@ -0,0 +1,59 @@
+import { type FieldAdapter } from 'core/mobx/field_adapter'
+import {
+  subFormFieldAdapters,
+} from 'core/mobx/sub_form_field_adapters'
+import { mockDeep } from 'vitest-mock-extended'
+
+describe('subFormFieldAdapters', () => {
+  const fieldAdapter1: FieldAdapter<string, boolean> = mockDeep()
+  const fieldAdapter2: FieldAdapter<number, boolean> = mockDeep()
+
+  describe('empty value', () => {
+    const adapters = subFormFieldAdapters({}, '$.a')
+
+    it('equals expected type', () => {
+      expectTypeOf(adapters).toEqualTypeOf<{}>()
+    })
+
+    it('equals expected value', () => {
+      expect(adapters).toEqual({})
+    })
+  })
+
+  describe('single adapter', () => {
+    const adapters = subFormFieldAdapters({
+      $: fieldAdapter1,
+    }, '$.a')
+
+    it('equals expected type', () => {
+      expectTypeOf(adapters).toEqualTypeOf<{
+        '$.a': FieldAdapter<string, boolean>,
+      }>()
+    })
+
+    it('equals expected value', () => {
+      expect(adapters).toEqual({ '$.a': fieldAdapter1 })
+    })
+  })
+
+  describe('multiple adapters', () => {
+    const adapters = subFormFieldAdapters({
+      '$.x': fieldAdapter1,
+      '$.y': fieldAdapter2,
+    }, '$.a')
+
+    it('equals expected type', () => {
+      expectTypeOf(adapters).toEqualTypeOf<{
+        '$.a.x': FieldAdapter<string, boolean>,
+        '$.a.y': FieldAdapter<number, boolean>,
+      }>()
+    })
+
+    it('equals expected value', () => {
+      expect(adapters).toEqual({
+        '$.a.x': fieldAdapter1,
+        '$.a.y': fieldAdapter2,
+      })
+    })
+  })
+})

package/core/mobx/sub_form_field_adapters.ts

@@ -0,0 +1,21 @@
+import { type StringConcatOf } from '@strictly/base'
+import { type FieldAdapter } from './field_adapter'
+
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string> = {
+  [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: SubAdapters[K]
+}
+
+export function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(
+  subAdapters: SubAdapters,
+  prefix: P,
+): SubFormFieldAdapters<SubAdapters, P> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return Object.entries(subAdapters).reduce<Record<string, FieldAdapter>>((acc, [
+    subKey,
+    subValue,
+  ]) => {
+    const key = subKey.replace('$', prefix)
+    acc[key] = subValue
+    return acc
+  }, {}) as SubFormFieldAdapters<SubAdapters, P>
+}

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(index_exports, {
   mergeFieldAdaptersWithTwoWayConverter: () => mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators: () => mergeValidators,
   prototypingFieldValueFactory: () => prototypingFieldValueFactory,
+  subFormFieldAdapters: () => subFormFieldAdapters,
   useMantineForm: () => useMantineForm,
   usePartialComponent: () => usePartialComponent,
   usePartialObserverComponent: () => usePartialObserverComponent,
@@ -774,6 +775,18 @@ function mergeAdaptersWithValidators(adapters, validators) {
   );
 }
 
+// core/mobx/sub_form_field_adapters.ts
+function subFormFieldAdapters(subAdapters, prefix) {
+  return Object.entries(subAdapters).reduce((acc, [
+    subKey,
+    subValue
+  ]) => {
+    const key = subKey.replace("$", prefix);
+    acc[key] = subValue;
+    return acc;
+  }, {});
+}
+
 // field_converters/integer_to_string_converter.ts
 var IntegerToStringConverter = class {
   constructor(isNanError, base = 10) {
@@ -1282,8 +1295,53 @@ function createRadioGroup(valuePath, RadioGroup) {
   return createUnsafePartialObserverComponent(RadioGroup, propSource, ["ErrorRenderer"]);
 }
 
-// mantine/create_text_input.tsx
+// mantine/create_sub_form.tsx
+var import_mobx_react2 = require("mobx-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function createSubForm(valuePath, SubForm, observableProps) {
+  function toKey(subKey) {
+    return subKey.replace("$", valuePath);
+  }
+  function toSubKey(key) {
+    return key.replace(valuePath, "$");
+  }
+  function onFieldValueChange(subKey, value) {
+    observableProps.onFieldValueChange(toKey(subKey), value);
+  }
+  function onFieldBlur(subKey) {
+    observableProps.onFieldBlur?.(toKey(subKey));
+  }
+  function onFieldFocus(subKey) {
+    observableProps.onFieldFocus?.(toKey(subKey));
+  }
+  function onFieldSubmit(subKey) {
+    observableProps.onFieldSubmit?.(toKey(subKey));
+  }
+  return (0, import_mobx_react2.observer)(function() {
+    const subFields = Object.entries(observableProps.fields).reduce((acc, [
+      fieldKey,
+      fieldValue
+    ]) => {
+      if (fieldKey.startsWith(valuePath)) {
+        acc[toSubKey(fieldKey)] = fieldValue;
+      }
+      return acc;
+    }, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SubForm,
+      {
+        fields: subFields,
+        onFieldBlur,
+        onFieldFocus,
+        onFieldSubmit,
+        onFieldValueChange
+      }
+    );
+  });
+}
+
+// mantine/create_text_input.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     this.onFieldValueChange?.(valuePath, e.target.value);
@@ -1317,7 +1375,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1332,7 +1390,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1366,7 +1424,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1381,9 +1439,9 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SimpleSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core.Select, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core.Select, { ...props });
 }
 function useMantineForm({
   onFieldValueChange,
@@ -1456,6 +1514,9 @@ var MantineFormImpl = class {
   listCache = new import_base6.Cache(
     createList.bind(this)
   );
+  subFormCache = new import_base6.Cache(
+    createSubForm.bind(this)
+  );
   @import_mobx2.observable.ref
   accessor fields;
   onFieldValueChange;
@@ -1521,6 +1582,16 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  // TODO have the returned component take any non-overlapping props as props
+  subForm(valuePath, SubForm) {
+    return this.subFormCache.retrieveOrCreate(
+      valuePath,
+      // strip props from component since we lose information in the cache
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      SubForm,
+      this
+    );
+  }
 };
 
 // types/merge_validators.ts
@@ -1587,6 +1658,7 @@ function mergeValidators(validators1, validators2) {
   mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators,
   prototypingFieldValueFactory,
+  subFormFieldAdapters,
   useMantineForm,
   usePartialComponent,
   usePartialObserverComponent,

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { Maybe, ElementOfArray, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
+import { Maybe, ElementOfArray, StringConcatOf, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
 import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, MobxValueOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
 import { ValueOf, SimplifyDeep, ReadonlyDeep, StringKeyOf, Simplify } from 'type-fest';
 import { ComponentType, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, DependencyList } from 'react';
@@ -168,6 +168,11 @@ type MergedOfFieldAdaptersWithValidators<FieldAdapters extends Readonly<Record<K
 type MergedOfFieldAdapterWithValidator<A extends FieldAdapter, V extends Validator | undefined> = undefined extends V ? A : A extends FieldAdapter<infer From, infer To, infer E1, infer P1, infer C1> ? V extends Validator<From, infer E2, infer P2, infer C2> ? FieldAdapter<From, To, E1 | E2, P1 | P2, C1 | C2> : never : never;
 declare function mergeAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Readonly<Record<string, Validator>>, Key extends keyof Validators = keyof Validators>(adapters: FieldAdapters, validators: Validators): MergedOfFieldAdaptersWithValidators<FieldAdapters, Validators, Key>;
 
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string> = {
+    [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: SubAdapters[K];
+};
+declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(subAdapters: SubAdapters, prefix: P): SubFormFieldAdapters<SubAdapters, P>;
+
 /**
  * Used to extract the supported value paths from a presenter
  */
@@ -279,6 +284,12 @@ type StringFieldsOfFields<F extends Fields> = {
     [K in keyof F as ValueTypeOfField<F[K]> extends string | undefined | null ? K : never]: F[K];
 };
 
+type SubFormFields<F extends Fields, P extends keyof F> = P extends string ? {
+    [K in keyof F as K extends StringConcatOf<`${P}.`, infer S> ? `$.${S}` : never]: F[K];
+} & {
+    $: F[P];
+} : never;
+
 type PartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = Exclude<keyof CurriedProps, keyof ComponentProps<Component>> extends never ? UnsafePartialComponent<Component, CurriedProps, AdditionalProps> : keyof CurriedProps extends (string | number) ? `unmatched prop: ${Exclude<keyof CurriedProps, keyof ComponentProps<Component>>}` : Exclude<keyof CurriedProps, keyof ComponentProps<Component>>;
 type UnsafePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = ForwardRefExoticComponent<PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>>;
 declare function createSimplePartialComponent<Component extends ComponentType<any>, CurriedProps extends Partial<ComponentProps<Component>>>(Component: Component, curriedProps: CurriedProps): PartialComponent<Component, CurriedProps>;
@@ -357,8 +368,9 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
+    private readonly subFormCache;
     accessor fields: F;
-    onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined;
+    onFieldValueChange: <K extends keyof F>(this: void, key: K, value: F[K]['value']) => void;
     onFieldFocus: ((this: void, key: keyof F) => void) | undefined;
     onFieldBlur: ((this: void, key: keyof F) => void) | undefined;
     onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined;
@@ -375,7 +387,8 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     radio<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioProps>(valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<P>): MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>, P extends SuppliedPillProps>(valuePath: K, Pill: ComponentType<P>): MantineFieldComponent<SuppliedPillProps, P>;
-    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<ElementOfArray<F[K]>>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>>;
+    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<`${K}.${number}`>>>;
+    subForm<K extends keyof AllFieldsOfFields<F>, S extends SubFormFields<F, K>>(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType;
 }
 
 type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>> = Simplify<{
@@ -384,4 +397,4 @@ type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Valida
 type MergedOfValidator<Validator1 extends Validator, Validator2 extends Validator> = Validator1 extends Validator<infer V, infer E1, infer P, infer C> ? Validator2 extends Validator<V, infer E2, P, C> ? Validator<V, E1 | E2, P, C> : never : never;
 declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>>(validators1: Validators1, validators2: Validators2): MergedOfValidators<Validators1, Validators2, Keys>;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, type EditorProps, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfPresenter, FormModel, FormPresenter, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfPresenterValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfPresenter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, useMantineForm, usePartialComponent, usePartialObserverComponent, validatingConverter };
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, type EditorProps, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfPresenter, FormModel, FormPresenter, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfPresenterValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfPresenter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, useMantineForm, usePartialComponent, usePartialObserverComponent, validatingConverter };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Maybe, ElementOfArray, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
+import { Maybe, ElementOfArray, StringConcatOf, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
 import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, MobxValueOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
 import { ValueOf, SimplifyDeep, ReadonlyDeep, StringKeyOf, Simplify } from 'type-fest';
 import { ComponentType, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, DependencyList } from 'react';
@@ -168,6 +168,11 @@ type MergedOfFieldAdaptersWithValidators<FieldAdapters extends Readonly<Record<K
 type MergedOfFieldAdapterWithValidator<A extends FieldAdapter, V extends Validator | undefined> = undefined extends V ? A : A extends FieldAdapter<infer From, infer To, infer E1, infer P1, infer C1> ? V extends Validator<From, infer E2, infer P2, infer C2> ? FieldAdapter<From, To, E1 | E2, P1 | P2, C1 | C2> : never : never;
 declare function mergeAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Readonly<Record<string, Validator>>, Key extends keyof Validators = keyof Validators>(adapters: FieldAdapters, validators: Validators): MergedOfFieldAdaptersWithValidators<FieldAdapters, Validators, Key>;
 
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string> = {
+    [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: SubAdapters[K];
+};
+declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(subAdapters: SubAdapters, prefix: P): SubFormFieldAdapters<SubAdapters, P>;
+
 /**
  * Used to extract the supported value paths from a presenter
  */
@@ -279,6 +284,12 @@ type StringFieldsOfFields<F extends Fields> = {
     [K in keyof F as ValueTypeOfField<F[K]> extends string | undefined | null ? K : never]: F[K];
 };
 
+type SubFormFields<F extends Fields, P extends keyof F> = P extends string ? {
+    [K in keyof F as K extends StringConcatOf<`${P}.`, infer S> ? `$.${S}` : never]: F[K];
+} & {
+    $: F[P];
+} : never;
+
 type PartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = Exclude<keyof CurriedProps, keyof ComponentProps<Component>> extends never ? UnsafePartialComponent<Component, CurriedProps, AdditionalProps> : keyof CurriedProps extends (string | number) ? `unmatched prop: ${Exclude<keyof CurriedProps, keyof ComponentProps<Component>>}` : Exclude<keyof CurriedProps, keyof ComponentProps<Component>>;
 type UnsafePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = ForwardRefExoticComponent<PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>>;
 declare function createSimplePartialComponent<Component extends ComponentType<any>, CurriedProps extends Partial<ComponentProps<Component>>>(Component: Component, curriedProps: CurriedProps): PartialComponent<Component, CurriedProps>;
@@ -357,8 +368,9 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
+    private readonly subFormCache;
     accessor fields: F;
-    onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined;
+    onFieldValueChange: <K extends keyof F>(this: void, key: K, value: F[K]['value']) => void;
     onFieldFocus: ((this: void, key: keyof F) => void) | undefined;
     onFieldBlur: ((this: void, key: keyof F) => void) | undefined;
     onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined;
@@ -375,7 +387,8 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     radio<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioProps>(valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<P>): MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>, P extends SuppliedPillProps>(valuePath: K, Pill: ComponentType<P>): MantineFieldComponent<SuppliedPillProps, P>;
-    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<ElementOfArray<F[K]>>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>>;
+    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<`${K}.${number}`>>>;
+    subForm<K extends keyof AllFieldsOfFields<F>, S extends SubFormFields<F, K>>(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType;
 }
 
 type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>> = Simplify<{
@@ -384,4 +397,4 @@ type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Valida
 type MergedOfValidator<Validator1 extends Validator, Validator2 extends Validator> = Validator1 extends Validator<infer V, infer E1, infer P, infer C> ? Validator2 extends Validator<V, infer E2, P, C> ? Validator<V, E1 | E2, P, C> : never : never;
 declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>>(validators1: Validators1, validators2: Validators2): MergedOfValidators<Validators1, Validators2, Keys>;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, type EditorProps, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfPresenter, FormModel, FormPresenter, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfPresenterValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfPresenter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, useMantineForm, usePartialComponent, usePartialObserverComponent, validatingConverter };
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, type EditorProps, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfPresenter, FormModel, FormPresenter, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfPresenterValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfPresenter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, useMantineForm, usePartialComponent, usePartialObserverComponent, validatingConverter };

package/dist/index.js

@@ -746,6 +746,18 @@ function mergeAdaptersWithValidators(adapters, validators) {
   );
 }
 
+// core/mobx/sub_form_field_adapters.ts
+function subFormFieldAdapters(subAdapters, prefix) {
+  return Object.entries(subAdapters).reduce((acc, [
+    subKey,
+    subValue
+  ]) => {
+    const key = subKey.replace("$", prefix);
+    acc[key] = subValue;
+    return acc;
+  }, {});
+}
+
 // field_converters/integer_to_string_converter.ts
 var IntegerToStringConverter = class {
   constructor(isNanError, base = 10) {
@@ -1279,8 +1291,53 @@ function createRadioGroup(valuePath, RadioGroup) {
   return createUnsafePartialObserverComponent(RadioGroup, propSource, ["ErrorRenderer"]);
 }
 
-// mantine/create_text_input.tsx
+// mantine/create_sub_form.tsx
+import { observer as observer2 } from "mobx-react";
 import { jsx as jsx5 } from "react/jsx-runtime";
+function createSubForm(valuePath, SubForm, observableProps) {
+  function toKey(subKey) {
+    return subKey.replace("$", valuePath);
+  }
+  function toSubKey(key) {
+    return key.replace(valuePath, "$");
+  }
+  function onFieldValueChange(subKey, value) {
+    observableProps.onFieldValueChange(toKey(subKey), value);
+  }
+  function onFieldBlur(subKey) {
+    observableProps.onFieldBlur?.(toKey(subKey));
+  }
+  function onFieldFocus(subKey) {
+    observableProps.onFieldFocus?.(toKey(subKey));
+  }
+  function onFieldSubmit(subKey) {
+    observableProps.onFieldSubmit?.(toKey(subKey));
+  }
+  return observer2(function() {
+    const subFields = Object.entries(observableProps.fields).reduce((acc, [
+      fieldKey,
+      fieldValue
+    ]) => {
+      if (fieldKey.startsWith(valuePath)) {
+        acc[toSubKey(fieldKey)] = fieldValue;
+      }
+      return acc;
+    }, {});
+    return /* @__PURE__ */ jsx5(
+      SubForm,
+      {
+        fields: subFields,
+        onFieldBlur,
+        onFieldFocus,
+        onFieldSubmit,
+        onFieldValueChange
+      }
+    );
+  });
+}
+
+// mantine/create_text_input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     this.onFieldValueChange?.(valuePath, e.target.value);
@@ -1314,7 +1371,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx5(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1329,7 +1386,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1363,7 +1420,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1378,9 +1435,9 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function SimpleSelect(props) {
-  return /* @__PURE__ */ jsx7(Select, { ...props });
+  return /* @__PURE__ */ jsx8(Select, { ...props });
 }
 function useMantineForm({
   onFieldValueChange,
@@ -1453,6 +1510,9 @@ var MantineFormImpl = class {
   listCache = new Cache(
     createList.bind(this)
   );
+  subFormCache = new Cache(
+    createSubForm.bind(this)
+  );
   @observable2.ref
   accessor fields;
   onFieldValueChange;
@@ -1518,6 +1578,16 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  // TODO have the returned component take any non-overlapping props as props
+  subForm(valuePath, SubForm) {
+    return this.subFormCache.retrieveOrCreate(
+      valuePath,
+      // strip props from component since we lose information in the cache
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      SubForm,
+      this
+    );
+  }
 };
 
 // types/merge_validators.ts
@@ -1586,6 +1656,7 @@ export {
   mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators,
   prototypingFieldValueFactory,
+  subFormFieldAdapters,
   useMantineForm,
   usePartialComponent,
   usePartialObserverComponent,

package/index.ts

@@ -6,6 +6,7 @@ export * from './core/mobx/form_fields_of_field_adapters'
 export * from './core/mobx/form_presenter'
 export * from './core/mobx/merge_field_adapters_with_two_way_converter'
 export * from './core/mobx/merge_field_adapters_with_validators'
+export * from './core/mobx/sub_form_field_adapters'
 export * from './core/mobx/types'
 export * from './core/props'
 export * from './field_converters/integer_to_string_converter'