@cube-dev/ui-kit 0.180.0 → 0.182.0

package/dist/components/form/Form/modern/actions.js

@@ -1,38 +1,56 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
+import { getControllerInternals } from "./controller.js";
 import { useFormSelector } from "./react.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/Form/modern/actions.tsx
-function ModernSubmitButton({ form, buttonRef, ...props }) {
+function ModernSubmitButton({ form, buttonRef, onClick, disableOnInvalid = false, ...props }) {
 	const { isDisabled: contextDisabled } = useProviderProps({});
 	const submitting = useFormSelector(form, (state) => state.isSubmitting);
 	const invalid = useFormSelector(form, (state) => state.isInvalid);
+	const click = useEvent((event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		const root = getControllerInternals(form, "<Form.Submit>").getRootElement();
+		const button = event.currentTarget;
+		if (root && button.form === root && button.type === "submit") return;
+		event.preventDefault();
+		if (root?.isConnected) root.requestSubmit();
+		else form.submit();
+	});
 	return /* @__PURE__ */ jsx(Button, {
 		ref: buttonRef,
 		type: "primary",
 		htmlType: "submit",
 		isLoading: submitting,
 		...props,
-		isDisabled: contextDisabled || props.isDisabled || submitting || invalid
+		onClick: click,
+		isDisabled: contextDisabled || props.isDisabled || submitting || disableOnInvalid && invalid
 	});
 }
-function ModernResetButton({ form, buttonRef, onPress, ...props }) {
+function ModernResetButton({ form, buttonRef, onClick, ...props }) {
 	const { isDisabled: contextDisabled } = useProviderProps({});
-	const disabled = useFormSelector(form, (state) => state.isSubmitting || !state.isTouched);
+	const canReset = useFormSelector(form, (state) => state.canReset);
 	const reset = useEvent((event) => {
-		form.reset();
-		onPress?.(event);
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		const root = getControllerInternals(form, "<Form.Reset>").getRootElement();
+		const button = event.currentTarget;
+		if (root && button.form === root && button.type === "reset") return;
+		event.preventDefault();
+		if (root?.isConnected) root.reset();
+		else form.reset();
 	});
 	return /* @__PURE__ */ jsx(Button, {
 		ref: buttonRef,
 		type: "primary",
 		htmlType: "button",
 		...props,
-		onPress: reset,
-		isDisabled: contextDisabled || props.isDisabled || disabled
+		onClick: reset,
+		isDisabled: contextDisabled || props.isDisabled || !canReset
 	});
 }
 

package/dist/components/form/Form/modern/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","names":[],"sources":["../../../../../src/components/form/Form/modern/actions.tsx"],"sourcesContent":["import { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useProviderProps } from '../../../../provider';\nimport { Button } from '../../../actions/Button/Button';\n\nimport { useFormSelector } from './react';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeButtonProps } from '../../../actions/Button/Button';\nimport type { FormController } from './controller';\n\nexport function ModernSubmitButton({\n  form,\n  buttonRef,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const submitting = useFormSelector(form, (state) => state.isSubmitting);\n  const invalid = useFormSelector(form, (state) => state.isInvalid);\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={submitting}\n      {...props}\n      isDisabled={contextDisabled || props.isDisabled || submitting || invalid}\n    />\n  );\n}\n\nexport function ModernResetButton({\n  form,\n  buttonRef,\n  onPress,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const disabled = useFormSelector(\n    form,\n    (state) => state.isSubmitting || !state.isTouched,\n  );\n  const reset = useEvent((event) => {\n    form.reset();\n    onPress?.(event);\n  });\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"button\"\n      {...props}\n      onPress={reset}\n      isDisabled={contextDisabled || props.isDisabled || disabled}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,mBAAmB,EACjC,MACA,WACA,GAAG,SAIF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,aAAa,gBAAgB,OAAO,UAAU,MAAM,aAAa;CACvE,MAAM,UAAU,gBAAgB,OAAO,UAAU,MAAM,UAAU;AACjE,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,WAAW;EACX,GAAI;EACJ,YAAY,mBAAmB,MAAM,cAAc,cAAc;GACjE;;AAIN,SAAgB,kBAAkB,EAChC,MACA,WACA,SACA,GAAG,SAIF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,WAAW,gBACf,OACC,UAAU,MAAM,gBAAgB,CAAC,MAAM,UACzC;CACD,MAAM,QAAQ,UAAU,UAAU;AAChC,OAAK,OAAO;AACZ,YAAU,MAAM;GAChB;AACF,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,GAAI;EACJ,SAAS;EACT,YAAY,mBAAmB,MAAM,cAAc;GACnD"}
+{"version":3,"file":"actions.js","names":[],"sources":["../../../../../src/components/form/Form/modern/actions.tsx"],"sourcesContent":["import { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useProviderProps } from '../../../../provider';\nimport { Button } from '../../../actions/Button/Button';\n\nimport { getControllerInternals } from './controller';\nimport { useFormSelector } from './react';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { MouseEvent } from 'react';\nimport type { CubeButtonProps } from '../../../actions/Button/Button';\nimport type { FormController } from './controller';\n\nexport function ModernSubmitButton({\n  form,\n  buttonRef,\n  onClick,\n  disableOnInvalid = false,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n  disableOnInvalid?: boolean;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const submitting = useFormSelector(form, (state) => state.isSubmitting);\n  const invalid = useFormSelector(form, (state) => state.isInvalid);\n  const click = useEvent((event: MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const root = getControllerInternals(form, '<Form.Submit>').getRootElement();\n    const button = event.currentTarget as HTMLButtonElement;\n    if (root && button.form === root && button.type === 'submit') return;\n    event.preventDefault();\n    if (root?.isConnected) root.requestSubmit();\n    else void form.submit();\n  });\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={submitting}\n      {...props}\n      onClick={click}\n      isDisabled={\n        contextDisabled ||\n        props.isDisabled ||\n        submitting ||\n        (disableOnInvalid && invalid)\n      }\n    />\n  );\n}\n\nexport function ModernResetButton({\n  form,\n  buttonRef,\n  onClick,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const canReset = useFormSelector(form, (state) => state.canReset);\n  const reset = useEvent((event: MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const root = getControllerInternals(form, '<Form.Reset>').getRootElement();\n    const button = event.currentTarget as HTMLButtonElement;\n    if (root && button.form === root && button.type === 'reset') return;\n    event.preventDefault();\n    if (root?.isConnected) root.reset();\n    else form.reset();\n  });\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"button\"\n      {...props}\n      onClick={reset}\n      isDisabled={contextDisabled || props.isDisabled || !canReset}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAAmB,EACjC,MACA,WACA,SACA,mBAAmB,OACnB,GAAG,SAKF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,aAAa,gBAAgB,OAAO,UAAU,MAAM,aAAa;CACvE,MAAM,UAAU,gBAAgB,OAAO,UAAU,MAAM,UAAU;CACjE,MAAM,QAAQ,UAAU,UAAmC;AACzD,YAAU,MAAM;AAChB,MAAI,MAAM,iBAAkB;EAC5B,MAAM,OAAO,uBAAuB,MAAM,gBAAgB,CAAC,gBAAgB;EAC3E,MAAM,SAAS,MAAM;AACrB,MAAI,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,SAAU;AAC9D,QAAM,gBAAgB;AACtB,MAAI,MAAM,YAAa,MAAK,eAAe;MACtC,CAAK,KAAK,QAAQ;GACvB;AACF,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,WAAW;EACX,GAAI;EACJ,SAAS;EACT,YACE,mBACA,MAAM,cACN,cACC,oBAAoB;GAEvB;;AAIN,SAAgB,kBAAkB,EAChC,MACA,WACA,SACA,GAAG,SAIF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,WAAW,gBAAgB,OAAO,UAAU,MAAM,SAAS;CACjE,MAAM,QAAQ,UAAU,UAAmC;AACzD,YAAU,MAAM;AAChB,MAAI,MAAM,iBAAkB;EAC5B,MAAM,OAAO,uBAAuB,MAAM,eAAe,CAAC,gBAAgB;EAC1E,MAAM,SAAS,MAAM;AACrB,MAAI,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,QAAS;AAC7D,QAAM,gBAAgB;AACtB,MAAI,MAAM,YAAa,MAAK,OAAO;MAC9B,MAAK,OAAO;GACjB;AACF,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,GAAI;EACJ,SAAS;EACT,YAAY,mBAAmB,MAAM,cAAc,CAAC;GACpD"}

package/dist/components/form/Form/modern/context.d.ts

@@ -1,5 +1,8 @@
 
+import "./read-types.js";
+import "./types.js";
 import { FormController } from "./controller.js";
+import "./field.js";
 import "react";
 
 //#region src/components/form/Form/modern/context.d.ts

package/dist/components/form/Form/modern/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/form/Form/modern/context.ts

package/dist/components/form/Form/modern/controller.d.ts

@@ -1,23 +1,34 @@
 
+import { FORM_BACKEND } from "../backend.js";
 import { FormPath } from "./values.js";
+import { CheckedFormDependencies, CheckedFormPath, FormValueAtPath } from "./path-types.js";
+import { FormReadValue } from "./read-types.js";
 import { ModernValidationRule as ModernValidationRule$1 } from "./validation.js";
-import { FormValueAtPath } from "./path-types.js";
-import { FormState, FormStore, FormStoreOptions, ModernFieldValidationResult as ModernFieldValidationResult$1, ModernSubmitResult as ModernSubmitResult$1, ModernValidationResult as ModernValidationResult$1, SetValueOptions } from "./types.js";
-import { FORM_BACKEND } from "../backend.js";
+import { FieldState, FormState, FormStore, FormStoreOptions, ModernFieldValidationResult as ModernFieldValidationResult$1, ModernSubmitFailure as ModernSubmitFailure$1, ModernSubmitResult as ModernSubmitResult$1, ModernValidationResult as ModernValidationResult$1, SetValueOptions } from "./types.js";
+import { FormField, FormFieldOptions } from "./field.js";
 import { ReactNode } from "react";
 
 //#region src/components/form/Form/modern/controller.d.ts
 type ModernValidationRule = ModernValidationRule$1<ReactNode>;
 type ModernValidationResult = ModernValidationResult$1<ReactNode>;
 type ModernFieldValidationResult = ModernFieldValidationResult$1<ReactNode>;
+type ModernSubmitFailure = ModernSubmitFailure$1<ReactNode>;
+type ModernFieldState<Value = unknown> = Omit<FieldState<ReactNode>, 'value' | 'defaultValue'> & {
+  readonly value: FormReadValue<Value> | undefined;
+  readonly defaultValue: FormReadValue<Value> | undefined;
+};
 type ModernSubmitResult = ModernSubmitResult$1<ReactNode>;
 type ModernFormState<T extends object = Record<string, unknown>> = FormState<T, ReactNode>;
-type UseFormControllerOptions<T extends object = Record<string, unknown>> = FormStoreOptions<T>;
+type UseFormControllerOptions<T extends object = Record<string, unknown>> = FormStoreOptions<T, ReactNode>;
 /** Public commands; registration and pipeline state tokens stay internal. */
-type FormController<T extends object = Record<string, unknown>> = Readonly<Pick<FormStore<T, ReactNode>, typeof FORM_BACKEND | 'validate' | 'submit' | 'blur' | 'getSnapshot' | 'getFieldSnapshot' | 'getValues' | 'getActiveValues' | 'subscribe' | 'setValues' | 'batch' | 'setDefaultValues' | 'adoptDefaultValues' | 'reset' | 'touch' | 'setFieldErrors' | 'clearFieldErrors' | 'setSubmitError' | 'clearSubmitError'> & {
-  getValue<const Path extends FormPath>(path: Path): FormValueAtPath<T, Path> | undefined;
-  setValue<const Path extends FormPath>(path: Path, value: FormValueAtPath<T, NoInfer<Path>> | undefined, options?: SetValueOptions): void;
+type FormController<T extends object = Record<string, unknown>> = Readonly<Pick<FormStore<T, ReactNode>, typeof FORM_BACKEND | 'validate' | 'submit' | 'blur' | 'getSnapshot' | 'getValues' | 'getActiveValues' | 'subscribe' | 'setValues' | 'batch' | 'setDefaultValues' | 'adoptDefaultValues' | 'reset' | 'touch' | 'setFieldErrors' | 'clearFieldErrors' | 'setSubmitError' | 'clearSubmitError'> & {
+  getFieldSnapshot<const Path extends FormPath>(path: CheckedFormPath<T, Path>): ModernFieldState<FormValueAtPath<T, Path>> | undefined;
+  getValue<const Path extends FormPath>(path: CheckedFormPath<T, Path>): FormReadValue<FormValueAtPath<T, Path>> | undefined;
+  setValue<const Path extends FormPath>(path: CheckedFormPath<T, Path>, value: FormValueAtPath<T, NoInfer<Path>> | undefined, options?: SetValueOptions): void;
+  field<const Path extends FormPath, const Dependencies extends readonly FormPath[] = readonly FormPath[]>(path: CheckedFormPath<T, Path>, options?: FormFieldOptions<T, FormValueAtPath<T, NoInfer<Path>>> & {
+    dependsOn?: Dependencies & CheckedFormDependencies<T, Dependencies>;
+  }): FormField<FormValueAtPath<T, Path>>;
 }>;
 //#endregion
-export { FormController, ModernFieldValidationResult, ModernFormState, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions };
+export { FormController, ModernFieldState, ModernFieldValidationResult, ModernFormState, ModernSubmitFailure, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions };
 //# sourceMappingURL=controller.d.ts.map

package/dist/components/form/Form/modern/controller.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController } from "../backend.js";
+import { createFormField } from "./field.js";
 import { createFormStore } from "./store.js";
 
 //#region src/components/form/Form/modern/controller.ts
@@ -8,11 +9,19 @@ const CONTROLLER_STORE = Symbol.for("@cube-dev/ui-kit/form-controller-store");
 function createFormController(options) {
 	const store = createFormStore(options);
 	const serverSnapshot = store.getSnapshot();
+	let rootElement;
 	const internals = {
 		store,
-		getServerSnapshot: () => serverSnapshot
+		getServerSnapshot: () => serverSnapshot,
+		getRootElement: () => rootElement,
+		bindRootElement(element) {
+			rootElement = element ?? void 0;
+			return () => {
+				if (rootElement === element) rootElement = void 0;
+			};
+		}
 	};
-	return Object.freeze({
+	const controller = Object.freeze({
 		[FORM_BACKEND]: "modern",
 		[CONTROLLER_STORE]: internals,
 		validate: store.validate,
@@ -34,8 +43,10 @@ function createFormController(options) {
 		setFieldErrors: store.setFieldErrors,
 		clearFieldErrors: store.clearFieldErrors,
 		setSubmitError: store.setSubmitError,
-		clearSubmitError: store.clearSubmitError
+		clearSubmitError: store.clearSubmitError,
+		field: (path, config) => createFormField(controller, path, config)
 	});
+	return controller;
 }
 function getControllerInternals(controller, receiver) {
 	const internals = isModernFormController(controller) ? controller[CONTROLLER_STORE] : void 0;

package/dist/components/form/Form/modern/controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/components/form/Form/modern/controller.ts"],"sourcesContent":["import { FORM_BACKEND, isModernFormController } from '../backend';\n\nimport { createFormStore } from './store';\n\nimport type { ReactNode } from 'react';\nimport type { FormValueAtPath } from './path-types';\nimport type {\n  FormState,\n  FormStore,\n  FormStoreOptions,\n  SetValueOptions,\n  ModernFieldValidationResult as StoreFieldValidationResult,\n  ModernSubmitResult as StoreSubmitResult,\n  ModernValidationResult as StoreValidationResult,\n} from './types';\nimport type { ModernValidationRule as StoreValidationRule } from './validation';\nimport type { FormPath } from './values';\n\nexport type ModernValidationRule = StoreValidationRule<ReactNode>;\nexport type ModernValidationResult = StoreValidationResult<ReactNode>;\nexport type ModernFieldValidationResult = StoreFieldValidationResult<ReactNode>;\nexport type ModernSubmitResult = StoreSubmitResult<ReactNode>;\n\nexport type ModernFormState<T extends object = Record<string, unknown>> =\n  FormState<T, ReactNode>;\n\nexport type UseFormControllerOptions<\n  T extends object = Record<string, unknown>,\n> = FormStoreOptions<T>;\n\n/** Public commands; registration and pipeline state tokens stay internal. */\nexport type FormController<T extends object = Record<string, unknown>> =\n  Readonly<\n    Pick<\n      FormStore<T, ReactNode>,\n      | typeof FORM_BACKEND\n      | 'validate'\n      | 'submit'\n      | 'blur'\n      | 'getSnapshot'\n      | 'getFieldSnapshot'\n      | 'getValues'\n      | 'getActiveValues'\n      | 'subscribe'\n      | 'setValues'\n      | 'batch'\n      | 'setDefaultValues'\n      | 'adoptDefaultValues'\n      | 'reset'\n      | 'touch'\n      | 'setFieldErrors'\n      | 'clearFieldErrors'\n      | 'setSubmitError'\n      | 'clearSubmitError'\n    > & {\n      getValue<const Path extends FormPath>(\n        path: Path,\n      ): FormValueAtPath<T, Path> | undefined;\n      setValue<const Path extends FormPath>(\n        path: Path,\n        value: FormValueAtPath<T, NoInfer<Path>> | undefined,\n        options?: SetValueOptions,\n      ): void;\n    }\n  >;\n\n// Symbol.for also lets two copies of the kit share a controller, just as the\n// backend brand does. This symbol and the store are not package exports.\nconst CONTROLLER_STORE = Symbol.for('@cube-dev/ui-kit/form-controller-store');\n\ninterface ControllerInternals<T extends object> {\n  store: FormStore<T, ReactNode>;\n  getServerSnapshot(): ModernFormState<T>;\n}\n\n/** Pure allocation for the creation hook; no listeners or external effects. */\nexport function createFormController<T extends object>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  const store = createFormStore<T, ReactNode>(options);\n  const serverSnapshot = store.getSnapshot();\n  const internals: ControllerInternals<T> = {\n    store,\n    getServerSnapshot: () => serverSnapshot,\n  };\n  return Object.freeze({\n    [FORM_BACKEND]: 'modern' as const,\n    [CONTROLLER_STORE]: internals,\n    validate: store.validate,\n    submit: store.submit,\n    blur: store.blur,\n    getSnapshot: store.getSnapshot,\n    getFieldSnapshot: store.getFieldSnapshot,\n    getValue: store.getValue,\n    getValues: store.getValues,\n    getActiveValues: store.getActiveValues,\n    subscribe: store.subscribe,\n    setValue: store.setValue,\n    setValues: store.setValues,\n    batch: store.batch,\n    setDefaultValues: store.setDefaultValues,\n    adoptDefaultValues: store.adoptDefaultValues,\n    reset: store.reset,\n    touch: store.touch,\n    setFieldErrors: store.setFieldErrors,\n    clearFieldErrors: store.clearFieldErrors,\n    setSubmitError: store.setSubmitError,\n    clearSubmitError: store.clearSubmitError,\n  }) as FormController<T>;\n}\n\nexport function getControllerInternals<T extends object>(\n  controller: FormController<T>,\n  receiver: string,\n): ControllerInternals<T> {\n  const internals = isModernFormController(controller)\n    ? (controller as unknown as Record<symbol, ControllerInternals<T>>)[\n        CONTROLLER_STORE\n      ]\n    : undefined;\n  if (!internals) {\n    throw new Error(\n      `${receiver} requires a modern form controller created by Form.useController(). Legacy Form instances and bare backend brands are not supported.`,\n    );\n  }\n  return internals;\n}\n"],"mappings":";;;;;AAoEA,MAAM,mBAAmB,OAAO,IAAI,yCAAyC;;AAQ7E,SAAgB,qBACd,SACmB;CACnB,MAAM,QAAQ,gBAA8B,QAAQ;CACpD,MAAM,iBAAiB,MAAM,aAAa;CAC1C,MAAM,YAAoC;EACxC;EACA,yBAAyB;EAC1B;AACD,QAAO,OAAO,OAAO;GAClB,eAAe;GACf,mBAAmB;EACpB,UAAU,MAAM;EAChB,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,kBAAkB,MAAM;EACxB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,iBAAiB,MAAM;EACvB,WAAW,MAAM;EACjB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,OAAO,MAAM;EACb,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;EAC1B,OAAO,MAAM;EACb,OAAO,MAAM;EACb,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACxB,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACzB,CAAC;;AAGJ,SAAgB,uBACd,YACA,UACwB;CACxB,MAAM,YAAY,uBAAuB,WAAW,GAC/C,WACC,oBAEF;AACJ,KAAI,CAAC,UACH,OAAM,IAAI,MACR,GAAG,SAAS,sIACb;AAEH,QAAO"}
+{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/components/form/Form/modern/controller.ts"],"sourcesContent":["import { FORM_BACKEND, isModernFormController } from '../backend';\n\nimport { createFormField } from './field';\nimport { createFormStore } from './store';\n\nimport type { ReactNode } from 'react';\nimport type { FormField, FormFieldOptions } from './field';\nimport type {\n  CheckedFormDependencies,\n  CheckedFormPath,\n  FormValueAtPath,\n} from './path-types';\nimport type { FormReadValue } from './read-types';\nimport type {\n  FieldState,\n  FormState,\n  FormStore,\n  FormStoreOptions,\n  SetValueOptions,\n  ModernFieldValidationResult as StoreFieldValidationResult,\n  ModernSubmitFailure as StoreSubmitFailure,\n  ModernSubmitResult as StoreSubmitResult,\n  ModernValidationResult as StoreValidationResult,\n} from './types';\nimport type { ModernValidationRule as StoreValidationRule } from './validation';\nimport type { FormPath } from './values';\n\nexport type ModernValidationRule = StoreValidationRule<ReactNode>;\nexport type ModernValidationResult = StoreValidationResult<ReactNode>;\nexport type ModernFieldValidationResult = StoreFieldValidationResult<ReactNode>;\nexport type ModernSubmitFailure = StoreSubmitFailure<ReactNode>;\nexport type ModernFieldState<Value = unknown> = Omit<\n  FieldState<ReactNode>,\n  'value' | 'defaultValue'\n> & {\n  readonly value: FormReadValue<Value> | undefined;\n  readonly defaultValue: FormReadValue<Value> | undefined;\n};\n\nexport type ModernSubmitResult = StoreSubmitResult<ReactNode>;\n\nexport type ModernFormState<T extends object = Record<string, unknown>> =\n  FormState<T, ReactNode>;\n\nexport type UseFormControllerOptions<\n  T extends object = Record<string, unknown>,\n> = FormStoreOptions<T, ReactNode>;\n\n/** Public commands; registration and pipeline state tokens stay internal. */\nexport type FormController<T extends object = Record<string, unknown>> =\n  Readonly<\n    Pick<\n      FormStore<T, ReactNode>,\n      | typeof FORM_BACKEND\n      | 'validate'\n      | 'submit'\n      | 'blur'\n      | 'getSnapshot'\n      | 'getValues'\n      | 'getActiveValues'\n      | 'subscribe'\n      | 'setValues'\n      | 'batch'\n      | 'setDefaultValues'\n      | 'adoptDefaultValues'\n      | 'reset'\n      | 'touch'\n      | 'setFieldErrors'\n      | 'clearFieldErrors'\n      | 'setSubmitError'\n      | 'clearSubmitError'\n    > & {\n      getFieldSnapshot<const Path extends FormPath>(\n        path: CheckedFormPath<T, Path>,\n      ): ModernFieldState<FormValueAtPath<T, Path>> | undefined;\n      getValue<const Path extends FormPath>(\n        path: CheckedFormPath<T, Path>,\n      ): FormReadValue<FormValueAtPath<T, Path>> | undefined;\n      setValue<const Path extends FormPath>(\n        path: CheckedFormPath<T, Path>,\n        value: FormValueAtPath<T, NoInfer<Path>> | undefined,\n        options?: SetValueOptions,\n      ): void;\n      field<\n        const Path extends FormPath,\n        const Dependencies extends readonly FormPath[] = readonly FormPath[],\n      >(\n        path: CheckedFormPath<T, Path>,\n        options?: FormFieldOptions<T, FormValueAtPath<T, NoInfer<Path>>> & {\n          dependsOn?: Dependencies & CheckedFormDependencies<T, Dependencies>;\n        },\n      ): FormField<FormValueAtPath<T, Path>>;\n    }\n  >;\n\n// Symbol.for also lets two copies of the kit share a controller, just as the\n// backend brand does. This symbol and the store are not package exports.\nconst CONTROLLER_STORE = Symbol.for('@cube-dev/ui-kit/form-controller-store');\n\ninterface ControllerInternals<T extends object> {\n  store: FormStore<T, ReactNode>;\n  getServerSnapshot(): ModernFormState<T>;\n  getRootElement(): HTMLFormElement | undefined;\n  bindRootElement(element: HTMLFormElement | null): () => void;\n}\n\n/** Pure allocation for the creation hook; no listeners or external effects. */\nexport function createFormController<T extends object>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  const store = createFormStore<T, ReactNode>(options);\n  const serverSnapshot = store.getSnapshot();\n  let rootElement: HTMLFormElement | undefined;\n  const internals: ControllerInternals<T> = {\n    store,\n    getServerSnapshot: () => serverSnapshot,\n    getRootElement: () => rootElement,\n    bindRootElement(element) {\n      rootElement = element ?? undefined;\n      return () => {\n        if (rootElement === element) rootElement = undefined;\n      };\n    },\n  };\n  const controller = Object.freeze({\n    [FORM_BACKEND]: 'modern' as const,\n    [CONTROLLER_STORE]: internals,\n    validate: store.validate,\n    submit: store.submit,\n    blur: store.blur,\n    getSnapshot: store.getSnapshot,\n    getFieldSnapshot: store.getFieldSnapshot,\n    getValue: store.getValue,\n    getValues: store.getValues,\n    getActiveValues: store.getActiveValues,\n    subscribe: store.subscribe,\n    setValue: store.setValue,\n    setValues: store.setValues,\n    batch: store.batch,\n    setDefaultValues: store.setDefaultValues,\n    adoptDefaultValues: store.adoptDefaultValues,\n    reset: store.reset,\n    touch: store.touch,\n    setFieldErrors: store.setFieldErrors,\n    clearFieldErrors: store.clearFieldErrors,\n    setSubmitError: store.setSubmitError,\n    clearSubmitError: store.clearSubmitError,\n    field: (path: FormPath, config?: FormFieldOptions<T, unknown>) =>\n      createFormField(controller, path, config),\n  }) as FormController<T>;\n  return controller;\n}\n\nexport function getControllerInternals<T extends object>(\n  controller: FormController<T>,\n  receiver: string,\n): ControllerInternals<T> {\n  const internals = isModernFormController(controller)\n    ? (controller as unknown as Record<symbol, ControllerInternals<T>>)[\n        CONTROLLER_STORE\n      ]\n    : undefined;\n  if (!internals) {\n    throw new Error(\n      `${receiver} requires a modern form controller created by Form.useController(). Legacy Form instances and bare backend brands are not supported.`,\n    );\n  }\n  return internals;\n}\n"],"mappings":";;;;;;AAiGA,MAAM,mBAAmB,OAAO,IAAI,yCAAyC;;AAU7E,SAAgB,qBACd,SACmB;CACnB,MAAM,QAAQ,gBAA8B,QAAQ;CACpD,MAAM,iBAAiB,MAAM,aAAa;CAC1C,IAAI;CACJ,MAAM,YAAoC;EACxC;EACA,yBAAyB;EACzB,sBAAsB;EACtB,gBAAgB,SAAS;AACvB,iBAAc,WAAW;AACzB,gBAAa;AACX,QAAI,gBAAgB,QAAS,eAAc;;;EAGhD;CACD,MAAM,aAAa,OAAO,OAAO;GAC9B,eAAe;GACf,mBAAmB;EACpB,UAAU,MAAM;EAChB,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,kBAAkB,MAAM;EACxB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,iBAAiB,MAAM;EACvB,WAAW,MAAM;EACjB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,OAAO,MAAM;EACb,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;EAC1B,OAAO,MAAM;EACb,OAAO,MAAM;EACb,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACxB,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACxB,QAAQ,MAAgB,WACtB,gBAAgB,YAAY,MAAM,OAAO;EAC5C,CAAC;AACF,QAAO;;AAGT,SAAgB,uBACd,YACA,UACwB;CACxB,MAAM,YAAY,uBAAuB,WAAW,GAC/C,WACC,oBAEF;AACJ,KAAI,CAAC,UACH,OAAM,IAAI,MACR,GAAG,SAAS,sIACb;AAEH,QAAO"}

package/dist/components/form/Form/modern/field-binding.js

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
-import { getFieldKey } from "./values.js";
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+import { getFieldKey, hasPath, normalizePath, readPath } from "./values.js";
 import { getControllerInternals } from "./controller.js";
 
 //#region src/components/form/Form/modern/field-binding.ts
@@ -9,10 +9,26 @@ function sameFieldView(a, b) {
 function createModernFieldBackend(form, name) {
 	const { store, getServerSnapshot } = getControllerInternals(form, `The "${name}" field`);
 	const key = getFieldKey(name);
+	const path = normalizePath(name);
+	const views = /* @__PURE__ */ new WeakMap();
+	const view = (state) => {
+		if (state.fields[key]) return state.fields[key];
+		if (!hasPath(state.values, path)) return void 0;
+		let cached = views.get(state);
+		if (!cached) {
+			cached = Object.freeze({
+				value: readPath(state.values, path),
+				errors: Object.freeze([]),
+				status: "unvalidated"
+			});
+			views.set(state, cached);
+		}
+		return cached;
+	};
 	return {
 		subscribe: store.subscribe,
-		getSnapshot: () => store.getFieldSnapshot(name),
-		getServerSnapshot: () => getServerSnapshot().fields[key],
+		getSnapshot: () => view(store.getSnapshot()),
+		getServerSnapshot: () => view(getServerSnapshot()),
 		register: () => store.register(name),
 		change: (value, dontTouch) => store.setValue(name, value, {
 			source: "user",
@@ -27,9 +43,11 @@ function fieldRegistrationOptions(props, defaultTrigger) {
 	return {
 		...Object.hasOwn(props, "defaultValue") ? { defaultValue: props.defaultValue } : {},
 		preserve: props.preserve,
+		dependsOn: props.dependsOn,
+		deps: props.deps,
 		isEqual: props.isEqual,
 		rules: props.isRequired && !rules?.some((rule) => rule.required) ? [{ required: true }, ...rules ?? []] : rules,
-		rulesKey: props.rulesKey === void 0 ? void 0 : `${props.isRequired ? "required:" : ""}${props.rulesKey}`,
+		rulesKey: props.rulesKey,
 		validationDelay: props.validationDelay,
 		validateTrigger: props.validateTrigger ?? defaultTrigger ?? "onBlur",
 		errorPolicy: props.errorPolicy

package/dist/components/form/Form/modern/field-binding.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/modern/field-binding.ts"],"sourcesContent":["import { getControllerInternals } from './controller';\nimport { getFieldKey } from './values';\n\nimport type { ReactNode } from 'react';\nimport type { FieldCoreProps, ValidateTrigger } from '../../../../shared/form';\nimport type { FormController } from './controller';\nimport type {\n  FieldState,\n  RegistrationOptions,\n  RegistrationToken,\n} from './types';\n\n/** The only state a bound input renders; metadata stays in selector subscribers. */\nexport type FieldView = Pick<\n  FieldState<ReactNode>,\n  'value' | 'errors' | 'status'\n>;\n\nexport interface FieldBackendHandle {\n  subscribe(listener: () => void): () => void;\n  getSnapshot(): FieldView | undefined;\n  getServerSnapshot(): FieldView | undefined;\n  register(): RegistrationToken<ReactNode> | undefined;\n  change(value: unknown, dontTouch: boolean, trigger: ValidateTrigger): void;\n  blur(): void;\n}\n\nexport function sameFieldView(a?: FieldView, b?: FieldView) {\n  return (\n    Object.is(a?.value, b?.value) &&\n    a?.errors === b?.errors &&\n    a?.status === b?.status\n  );\n}\n\nexport function createModernFieldBackend(\n  form: FormController<any>,\n  name: string,\n): FieldBackendHandle {\n  const { store, getServerSnapshot } = getControllerInternals(\n    form,\n    `The \"${name}\" field`,\n  );\n  const key = getFieldKey(name);\n  return {\n    subscribe: store.subscribe,\n    getSnapshot: () => store.getFieldSnapshot(name),\n    getServerSnapshot: () => getServerSnapshot().fields[key],\n    register: () => store.register(name),\n    change: (value, dontTouch) =>\n      store.setValue(name, value, {\n        source: 'user',\n        touch: !dontTouch,\n        validate: dontTouch ? 'never' : 'auto',\n      }),\n    blur: () => store.blur(name),\n  };\n}\n\nexport function fieldRegistrationOptions(\n  props: FieldCoreProps & {\n    defaultValue?: unknown;\n    validateTrigger?: ValidateTrigger;\n  },\n  defaultTrigger?: ValidateTrigger,\n): RegistrationOptions<ReactNode> {\n  const rules = props.rules?.flat(Infinity);\n  return {\n    ...(Object.hasOwn(props, 'defaultValue')\n      ? { defaultValue: props.defaultValue }\n      : {}),\n    preserve: props.preserve,\n    isEqual: props.isEqual,\n    rules:\n      props.isRequired && !rules?.some((rule) => rule.required)\n        ? [{ required: true }, ...(rules ?? [])]\n        : rules,\n    rulesKey:\n      props.rulesKey === undefined\n        ? undefined\n        : `${props.isRequired ? 'required:' : ''}${props.rulesKey}`,\n    validationDelay: props.validationDelay,\n    validateTrigger: props.validateTrigger ?? defaultTrigger ?? 'onBlur',\n    errorPolicy: props.errorPolicy,\n  };\n}\n"],"mappings":";;;;;AA2BA,SAAgB,cAAc,GAAe,GAAe;AAC1D,QACE,OAAO,GAAG,GAAG,OAAO,GAAG,MAAM,IAC7B,GAAG,WAAW,GAAG,UACjB,GAAG,WAAW,GAAG;;AAIrB,SAAgB,yBACd,MACA,MACoB;CACpB,MAAM,EAAE,OAAO,sBAAsB,uBACnC,MACA,QAAQ,KAAK,SACd;CACD,MAAM,MAAM,YAAY,KAAK;AAC7B,QAAO;EACL,WAAW,MAAM;EACjB,mBAAmB,MAAM,iBAAiB,KAAK;EAC/C,yBAAyB,mBAAmB,CAAC,OAAO;EACpD,gBAAgB,MAAM,SAAS,KAAK;EACpC,SAAS,OAAO,cACd,MAAM,SAAS,MAAM,OAAO;GAC1B,QAAQ;GACR,OAAO,CAAC;GACR,UAAU,YAAY,UAAU;GACjC,CAAC;EACJ,YAAY,MAAM,KAAK,KAAK;EAC7B;;AAGH,SAAgB,yBACd,OAIA,gBACgC;CAChC,MAAM,QAAQ,MAAM,OAAO,KAAK,SAAS;AACzC,QAAO;EACL,GAAI,OAAO,OAAO,OAAO,eAAe,GACpC,EAAE,cAAc,MAAM,cAAc,GACpC,EAAE;EACN,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,OACE,MAAM,cAAc,CAAC,OAAO,MAAM,SAAS,KAAK,SAAS,GACrD,CAAC,EAAE,UAAU,MAAM,EAAE,GAAI,SAAS,EAAE,CAAE,GACtC;EACN,UACE,MAAM,aAAa,SACf,SACA,GAAG,MAAM,aAAa,cAAc,KAAK,MAAM;EACrD,iBAAiB,MAAM;EACvB,iBAAiB,MAAM,mBAAmB,kBAAkB;EAC5D,aAAa,MAAM;EACpB"}
+{"version":3,"file":"field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/modern/field-binding.ts"],"sourcesContent":["import { getControllerInternals } from './controller';\nimport { getFieldKey, hasPath, normalizePath, readPath } from './values';\n\nimport type { ReactNode } from 'react';\nimport type { FieldCoreProps, ValidateTrigger } from '../../../../shared/form';\nimport type { FormController, ModernFormState } from './controller';\nimport type {\n  FieldState,\n  RegistrationOptions,\n  RegistrationToken,\n} from './types';\nimport type { FormPath } from './values';\n\n/** The only state a bound input renders; metadata stays in selector subscribers. */\nexport type FieldView = Pick<\n  FieldState<ReactNode>,\n  'value' | 'errors' | 'status'\n>;\n\nexport interface FieldBackendHandle {\n  subscribe(listener: () => void): () => void;\n  getSnapshot(): FieldView | undefined;\n  getServerSnapshot(): FieldView | undefined;\n  register(): RegistrationToken<ReactNode> | undefined;\n  change(value: unknown, dontTouch: boolean, trigger: ValidateTrigger): void;\n  blur(): void;\n}\n\nexport function sameFieldView(a?: FieldView, b?: FieldView) {\n  return (\n    Object.is(a?.value, b?.value) &&\n    a?.errors === b?.errors &&\n    a?.status === b?.status\n  );\n}\n\nexport function createModernFieldBackend(\n  form: FormController<any>,\n  name: FormPath,\n): FieldBackendHandle {\n  const { store, getServerSnapshot } = getControllerInternals(\n    form,\n    `The \"${name}\" field`,\n  );\n  const key = getFieldKey(name);\n  const path = normalizePath(name);\n  const views = new WeakMap<object, FieldView>();\n  const view = (state: ModernFormState): FieldView | undefined => {\n    if (state.fields[key]) return state.fields[key];\n    if (!hasPath(state.values, path)) return undefined;\n    let cached = views.get(state);\n    if (!cached) {\n      cached = Object.freeze({\n        value: readPath(state.values, path),\n        errors: Object.freeze([]),\n        status: 'unvalidated',\n      });\n      views.set(state, cached);\n    }\n    return cached;\n  };\n  return {\n    subscribe: store.subscribe,\n    getSnapshot: () => view(store.getSnapshot()),\n    getServerSnapshot: () => view(getServerSnapshot()),\n    register: () => store.register(name),\n    change: (value, dontTouch) =>\n      store.setValue(name, value, {\n        source: 'user',\n        touch: !dontTouch,\n        validate: dontTouch ? 'never' : 'auto',\n      }),\n    blur: () => store.blur(name),\n  };\n}\n\nexport function fieldRegistrationOptions(\n  props: FieldCoreProps & {\n    defaultValue?: unknown;\n    validateTrigger?: ValidateTrigger;\n  },\n  defaultTrigger?: ValidateTrigger,\n): RegistrationOptions<ReactNode> {\n  const rules = props.rules?.flat(Infinity);\n  return {\n    ...(Object.hasOwn(props, 'defaultValue')\n      ? { defaultValue: props.defaultValue }\n      : {}),\n    preserve: props.preserve,\n    dependsOn: props.dependsOn,\n    deps: props.deps,\n    isEqual: props.isEqual,\n    rules:\n      props.isRequired && !rules?.some((rule) => rule.required)\n        ? [{ required: true }, ...(rules ?? [])]\n        : rules,\n    rulesKey: props.rulesKey,\n    validationDelay: props.validationDelay,\n    validateTrigger: props.validateTrigger ?? defaultTrigger ?? 'onBlur',\n    errorPolicy: props.errorPolicy,\n  };\n}\n"],"mappings":";;;;;AA4BA,SAAgB,cAAc,GAAe,GAAe;AAC1D,QACE,OAAO,GAAG,GAAG,OAAO,GAAG,MAAM,IAC7B,GAAG,WAAW,GAAG,UACjB,GAAG,WAAW,GAAG;;AAIrB,SAAgB,yBACd,MACA,MACoB;CACpB,MAAM,EAAE,OAAO,sBAAsB,uBACnC,MACA,QAAQ,KAAK,SACd;CACD,MAAM,MAAM,YAAY,KAAK;CAC7B,MAAM,OAAO,cAAc,KAAK;CAChC,MAAM,wBAAQ,IAAI,SAA4B;CAC9C,MAAM,QAAQ,UAAkD;AAC9D,MAAI,MAAM,OAAO,KAAM,QAAO,MAAM,OAAO;AAC3C,MAAI,CAAC,QAAQ,MAAM,QAAQ,KAAK,CAAE,QAAO;EACzC,IAAI,SAAS,MAAM,IAAI,MAAM;AAC7B,MAAI,CAAC,QAAQ;AACX,YAAS,OAAO,OAAO;IACrB,OAAO,SAAS,MAAM,QAAQ,KAAK;IACnC,QAAQ,OAAO,OAAO,EAAE,CAAC;IACzB,QAAQ;IACT,CAAC;AACF,SAAM,IAAI,OAAO,OAAO;;AAE1B,SAAO;;AAET,QAAO;EACL,WAAW,MAAM;EACjB,mBAAmB,KAAK,MAAM,aAAa,CAAC;EAC5C,yBAAyB,KAAK,mBAAmB,CAAC;EAClD,gBAAgB,MAAM,SAAS,KAAK;EACpC,SAAS,OAAO,cACd,MAAM,SAAS,MAAM,OAAO;GAC1B,QAAQ;GACR,OAAO,CAAC;GACR,UAAU,YAAY,UAAU;GACjC,CAAC;EACJ,YAAY,MAAM,KAAK,KAAK;EAC7B;;AAGH,SAAgB,yBACd,OAIA,gBACgC;CAChC,MAAM,QAAQ,MAAM,OAAO,KAAK,SAAS;AACzC,QAAO;EACL,GAAI,OAAO,OAAO,OAAO,eAAe,GACpC,EAAE,cAAc,MAAM,cAAc,GACpC,EAAE;EACN,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,MAAM,MAAM;EACZ,SAAS,MAAM;EACf,OACE,MAAM,cAAc,CAAC,OAAO,MAAM,SAAS,KAAK,SAAS,GACrD,CAAC,EAAE,UAAU,MAAM,EAAE,GAAI,SAAS,EAAE,CAAE,GACtC;EACN,UAAU,MAAM;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,MAAM,mBAAmB,kBAAkB;EAC5D,aAAa,MAAM;EACpB"}

package/dist/components/form/Form/modern/field.d.ts

@@ -0,0 +1,30 @@
+
+import { FormPath } from "./values.js";
+import { CheckedFormPath, FormValueAtPath } from "./path-types.js";
+import { FormReadValue, FormValues } from "./read-types.js";
+import { RegistrationOptions } from "./types.js";
+import { FormController } from "./controller.js";
+import { ReactNode } from "react";
+
+//#region src/components/form/Form/modern/field.d.ts
+declare const FIELD_VALUE: unique symbol;
+/** Pure configuration, never a mutable/reactive field instance. */
+interface FormField<Value = unknown> {
+  readonly [FIELD_VALUE]: Value;
+  readonly form: FormController<any>;
+  readonly path: FormPath;
+  readonly options: RegistrationOptions<ReactNode>;
+}
+interface FormFieldContext<T extends object> {
+  readonly signal: AbortSignal;
+  getValue<const Path extends FormPath>(path: CheckedFormPath<T, Path>): FormReadValue<FormValueAtPath<T, Path>> | undefined;
+  getValues(): FormValues<T>;
+}
+interface FormFieldOptions<T extends object, Value> extends Omit<RegistrationOptions<ReactNode>, 'defaultValue' | 'isEqual'> {
+  readonly validate?: (value: FormReadValue<Value> | undefined, context: FormFieldContext<T>) => ReactNode | void | Promise<ReactNode | void>;
+  readonly defaultValue?: Value;
+  readonly isEqual?: (previous: FormReadValue<Value> | undefined, next: FormReadValue<Value> | undefined) => boolean;
+}
+//#endregion
+export { FormField, FormFieldContext, FormFieldOptions };
+//# sourceMappingURL=field.d.ts.map

package/dist/components/form/Form/modern/field.js

@@ -0,0 +1,23 @@
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+import { normalizePath } from "./values.js";
+
+//#region src/components/form/Form/modern/field.ts
+function createFormField(form, path, options = {}) {
+	const { validate, ...registration } = options;
+	const normalized = normalizePath(path);
+	return Object.freeze({
+		form,
+		path: typeof path === "string" ? path : normalized,
+		options: Object.freeze({
+			...registration,
+			...validate && { rules: [...registration.rules ?? [], {
+				authored: validate,
+				validator: (_rule, value, context) => validate(value, context)
+			}] }
+		})
+	});
+}
+
+//#endregion
+export { createFormField };
+//# sourceMappingURL=field.js.map

package/dist/components/form/Form/modern/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../../../../src/components/form/Form/modern/field.ts"],"sourcesContent":["import { normalizePath } from './values';\n\nimport type { ReactNode } from 'react';\nimport type { FormController } from './controller';\nimport type { CheckedFormPath, FormValueAtPath } from './path-types';\nimport type { FormReadValue, FormValues } from './read-types';\nimport type { RegistrationOptions } from './types';\nimport type { FormPath } from './values';\n\ndeclare const FIELD_VALUE: unique symbol;\n\n/** Pure configuration, never a mutable/reactive field instance. */\nexport interface FormField<Value = unknown> {\n  readonly [FIELD_VALUE]: Value;\n  readonly form: FormController<any>;\n  readonly path: FormPath;\n  readonly options: RegistrationOptions<ReactNode>;\n}\n\nexport interface FormFieldContext<T extends object> {\n  readonly signal: AbortSignal;\n  getValue<const Path extends FormPath>(\n    path: CheckedFormPath<T, Path>,\n  ): FormReadValue<FormValueAtPath<T, Path>> | undefined;\n  getValues(): FormValues<T>;\n}\n\nexport interface FormFieldOptions<T extends object, Value>\n  extends Omit<RegistrationOptions<ReactNode>, 'defaultValue' | 'isEqual'> {\n  readonly validate?: (\n    value: FormReadValue<Value> | undefined,\n    context: FormFieldContext<T>,\n  ) => ReactNode | void | Promise<ReactNode | void>;\n  readonly defaultValue?: Value;\n  readonly isEqual?: (\n    previous: FormReadValue<Value> | undefined,\n    next: FormReadValue<Value> | undefined,\n  ) => boolean;\n}\n\nexport function createFormField<T extends object, Value>(\n  form: FormController<T>,\n  path: FormPath,\n  options: FormFieldOptions<T, Value> = {},\n): FormField<Value> {\n  const { validate, ...registration } = options;\n  const normalized = normalizePath(path);\n  return Object.freeze({\n    form,\n    path: typeof path === 'string' ? path : normalized,\n    options: Object.freeze({\n      ...registration,\n      ...(validate && {\n        rules: [\n          ...(registration.rules ?? []),\n          {\n            // The adapter has fixed source. Retain the authored function for\n            // lazy rule comparison, without changing the consumer's deps.\n            authored: validate,\n            validator: (_rule, value, context) =>\n              validate(value, context as FormFieldContext<T>),\n          },\n        ],\n      }),\n    }),\n  }) as FormField<Value>;\n}\n"],"mappings":";;;;AAwCA,SAAgB,gBACd,MACA,MACA,UAAsC,EAAE,EACtB;CAClB,MAAM,EAAE,UAAU,GAAG,iBAAiB;CACtC,MAAM,aAAa,cAAc,KAAK;AACtC,QAAO,OAAO,OAAO;EACnB;EACA,MAAM,OAAO,SAAS,WAAW,OAAO;EACxC,SAAS,OAAO,OAAO;GACrB,GAAG;GACH,GAAI,YAAY,EACd,OAAO,CACL,GAAI,aAAa,SAAS,EAAE,EAC5B;IAGE,UAAU;IACV,YAAY,OAAO,OAAO,YACxB,SAAS,OAAO,QAA+B;IAClD,CACF,EACF;GACF,CAAC;EACH,CAAC"}

package/dist/components/form/Form/modern/path-types.d.ts

@@ -2,11 +2,15 @@
 import { FormPath } from "./values.js";
 
 //#region src/components/form/Form/modern/path-types.d.ts
+type ValidPath<Value, Path extends readonly (string | number)[]> = unknown extends Value ? true : Path extends readonly [infer Key extends string | number, ...infer Rest extends readonly (string | number)[]] ? Key extends keyof NonNullable<Value> ? Rest extends readonly [] ? true : ValidPath<NonNullable<Value>[Key], Rest> : NonNullable<Value> extends readonly (infer Item)[] ? Key extends `${number}` ? ValidPath<Item, Rest> : false : false : true;
+/** Check only the supplied literal path. Widened strings support dynamic models. */
+type CheckedFormPath<T extends object, Path extends FormPath> = Path & (Path extends string ? string extends Path ? unknown : Path extends keyof T ? unknown : never : Path extends readonly (string | number)[] ? ValidPath<T, Path> extends false ? never : unknown : never);
 /** Resolve only the supplied path; never enumerate a model's possible paths. */
 type SegmentValue<Value, Key extends string | number> = Value extends null | undefined ? undefined : Key extends keyof Value ? Value[Key] : Value extends readonly (infer Item)[] ? Key extends `${number}` ? Item : unknown : unknown;
 type TupleValue<Value, Path extends readonly (string | number)[]> = Path extends readonly [infer Key extends string | number, ...infer Rest extends readonly (string | number)[]] ? Rest extends readonly [] ? SegmentValue<Value, Key> : TupleValue<SegmentValue<Value, Key>, Rest> : unknown;
 /** Strings are literal keys; unknown/dynamic names and paths return unknown. */
 type FormValueAtPath<Values extends object, Path extends FormPath> = Path extends string ? Path extends keyof Values ? Values[Path] : unknown : Path extends readonly (string | number)[] ? TupleValue<Values, Path> : unknown;
+type CheckedFormDependencies<T extends object, Dependencies extends readonly FormPath[]> = { readonly [I in keyof Dependencies]: CheckedFormPath<T, Dependencies[I]> };
 //#endregion
-export { FormValueAtPath };
+export { CheckedFormDependencies, CheckedFormPath, FormValueAtPath };
 //# sourceMappingURL=path-types.d.ts.map

package/dist/components/form/Form/modern/react.d.ts

@@ -1,10 +1,15 @@
 
-import { FormController, ModernFormState, UseFormControllerOptions } from "./controller.js";
+import { FormPath } from "./values.js";
+import { CheckedFormPath, FormValueAtPath } from "./path-types.js";
+import { FormReadValue } from "./read-types.js";
+import { FormController, ModernFieldState, ModernFormState, UseFormControllerOptions } from "./controller.js";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form/Form/modern/react.d.ts
 declare function useFormController<T extends object = Record<string, unknown>>(options?: UseFormControllerOptions<T>): FormController<T>;
+declare function useFormValue<T extends object, const Path extends FormPath>(form: FormController<T>, path: CheckedFormPath<T, Path>): FormReadValue<FormValueAtPath<T, Path>> | undefined;
+declare function useFormFieldState<T extends object, const Path extends FormPath>(form: FormController<T>, path: CheckedFormPath<T, Path>): ModernFieldState<FormValueAtPath<T, Path>> | undefined;
 interface FormSelectorOptions<Selected> {
   isEqual?: (previous: Selected, next: Selected) => boolean;
 }
@@ -17,5 +22,5 @@ interface FormSubscribeProps<T extends object, Selected> extends FormSelectorOpt
 }
 declare function FormSubscribe<T extends object = Record<string, unknown>, Selected = unknown>(props: FormSubscribeProps<T, Selected>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormSelector };
+export { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormFieldState, useFormSelector, useFormValue };
 //# sourceMappingURL=react.d.ts.map

package/dist/components/form/Form/modern/react.js

@@ -1,15 +1,33 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { ModernControllerContext } from "./context.js";
+import { getFieldKey, normalizePath, readPath } from "./values.js";
 import { createFormController, getControllerInternals } from "./controller.js";
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
 
 //#region src/components/form/Form/modern/react.tsx
 function useFormController(options) {
 	const [controller] = useState(() => createFormController(options));
+	const { store } = getControllerInternals(controller, "Form.useController()");
+	useLayoutEffect$1(() => {
+		store.updateCallbacks({
+			onSubmit: options?.onSubmit,
+			onSubmitFailed: options?.onSubmitFailed,
+			onValuesChange: options?.onValuesChange
+		});
+	});
 	return controller;
 }
+function useFormValue(form, path) {
+	const normalized = useMemo(() => normalizePath(path), [path]);
+	return useFormSelector(form, (state) => readPath(state.values, normalized));
+}
+function useFormFieldState(form, path) {
+	const key = useMemo(() => getFieldKey(path), [path]);
+	return useFormSelector(form, (state) => state.fields[key]);
+}
 function useFormSelector(controller, selector, options) {
 	const { getServerSnapshot } = getControllerInternals(controller, "Form.useSelector()");
 	return useSyncExternalStoreWithSelector(controller.subscribe, controller.getSnapshot, getServerSnapshot, selector, options?.isEqual);
@@ -23,5 +41,5 @@ function FormSubscribe(props) {
 }
 
 //#endregion
-export { FormSubscribe, useFormController, useFormSelector };
+export { FormSubscribe, useFormController, useFormFieldState, useFormSelector, useFormValue };
 //# sourceMappingURL=react.js.map

package/dist/components/form/Form/modern/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","names":[],"sources":["../../../../../src/components/form/Form/modern/react.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { ModernControllerContext } from './context';\nimport { createFormController, getControllerInternals } from './controller';\n\nimport type { ReactNode } from 'react';\nimport type {\n  FormController,\n  ModernFormState,\n  UseFormControllerOptions,\n} from './controller';\n\nexport function useFormController<T extends object = Record<string, unknown>>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  // Initial options seed synchronously. A new options object never resets the\n  // controller, and the creator does not subscribe its owner to form changes.\n  const [controller] = useState(() => createFormController(options));\n  // Do not dispose from effect cleanup: Strict Mode and hidden React trees\n  // reconnect effects while preserving state. Subscriptions own their cleanup;\n  // the controller has no external resources and is collected with its owner.\n  return controller;\n}\n\nexport interface FormSelectorOptions<Selected> {\n  isEqual?: (previous: Selected, next: Selected) => boolean;\n}\n\nexport function useFormSelector<T extends object, Selected>(\n  controller: FormController<T>,\n  selector: (state: ModernFormState<T>) => Selected,\n  options?: FormSelectorOptions<Selected>,\n): Selected {\n  const { getServerSnapshot } = getControllerInternals(\n    controller,\n    'Form.useSelector()',\n  );\n  return useSyncExternalStoreWithSelector(\n    controller.subscribe,\n    controller.getSnapshot,\n    getServerSnapshot,\n    selector,\n    options?.isEqual,\n  );\n}\n\nexport interface FormSubscribeProps<T extends object, Selected>\n  extends FormSelectorOptions<Selected> {\n  /** Omit to use modern context. An explicit undefined detaches from context. */\n  form?: FormController<T>;\n  selector: (state: ModernFormState<T>) => Selected;\n  children: (selected: Selected) => ReactNode;\n}\n\nexport function FormSubscribe<\n  T extends object = Record<string, unknown>,\n  Selected = unknown,\n>(props: FormSubscribeProps<T, Selected>) {\n  const fromContext = useContext(ModernControllerContext);\n  const controller = Object.hasOwn(props, 'form') ? props.form : fromContext;\n  if (!controller) {\n    throw new Error(\n      '<Form.Subscribe> requires a modern form prop or a modern <Form> root.',\n    );\n  }\n  const selected = useFormSelector(controller, props.selector, {\n    isEqual: props.isEqual,\n  });\n  return <>{props.children(selected)}</>;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,kBACd,SACmB;CAGnB,MAAM,CAAC,cAAc,eAAe,qBAAqB,QAAQ,CAAC;AAIlE,QAAO;;AAOT,SAAgB,gBACd,YACA,UACA,SACU;CACV,MAAM,EAAE,sBAAsB,uBAC5B,YACA,qBACD;AACD,QAAO,iCACL,WAAW,WACX,WAAW,aACX,mBACA,UACA,SAAS,QACV;;AAWH,SAAgB,cAGd,OAAwC;CACxC,MAAM,cAAc,WAAW,wBAAwB;CACvD,MAAM,aAAa,OAAO,OAAO,OAAO,OAAO,GAAG,MAAM,OAAO;AAC/D,KAAI,CAAC,WACH,OAAM,IAAI,MACR,wEACD;CAEH,MAAM,WAAW,gBAAgB,YAAY,MAAM,UAAU,EAC3D,SAAS,MAAM,SAChB,CAAC;AACF,QAAO,4CAAG,MAAM,SAAS,SAAS,GAAI"}
+{"version":3,"file":"react.js","names":[],"sources":["../../../../../src/components/form/Form/modern/react.tsx"],"sourcesContent":["import { useContext, useMemo, useState } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { useLayoutEffect } from '../../../../utils/react/useLayoutEffect';\n\nimport { ModernControllerContext } from './context';\nimport { createFormController, getControllerInternals } from './controller';\nimport { getFieldKey, normalizePath, readPath } from './values';\n\nimport type { ReactNode } from 'react';\nimport type {\n  FormController,\n  ModernFieldState,\n  ModernFormState,\n  UseFormControllerOptions,\n} from './controller';\nimport type { CheckedFormPath, FormValueAtPath } from './path-types';\nimport type { FormReadValue } from './read-types';\nimport type { FormPath } from './values';\n\nexport function useFormController<T extends object = Record<string, unknown>>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  // Initial options seed synchronously. A new options object never resets the\n  // controller, and the creator does not subscribe its owner to form changes.\n  const [controller] = useState(() => createFormController(options));\n  const { store } = getControllerInternals(controller, 'Form.useController()');\n  // Intentionally commit after every render: callbacks are live, unlike the\n  // initial defaults/policy. Abandoned renders must never replace callbacks.\n  useLayoutEffect(() => {\n    store.updateCallbacks({\n      onSubmit: options?.onSubmit,\n      onSubmitFailed: options?.onSubmitFailed,\n      onValuesChange: options?.onValuesChange,\n    });\n  });\n  // Do not dispose from effect cleanup: Strict Mode and hidden React trees\n  // reconnect effects while preserving state. Subscriptions own their cleanup;\n  // the controller has no external resources and is collected with its owner.\n  return controller;\n}\n\nexport function useFormValue<T extends object, const Path extends FormPath>(\n  form: FormController<T>,\n  path: CheckedFormPath<T, Path>,\n): FormReadValue<FormValueAtPath<T, Path>> | undefined {\n  const normalized = useMemo(() => normalizePath(path), [path]);\n  return useFormSelector(form, (state) =>\n    readPath(state.values, normalized),\n  ) as FormReadValue<FormValueAtPath<T, Path>> | undefined;\n}\n\nexport function useFormFieldState<\n  T extends object,\n  const Path extends FormPath,\n>(\n  form: FormController<T>,\n  path: CheckedFormPath<T, Path>,\n): ModernFieldState<FormValueAtPath<T, Path>> | undefined {\n  const key = useMemo(() => getFieldKey(path), [path]);\n  return useFormSelector(form, (state) => state.fields[key]) as\n    | ModernFieldState<FormValueAtPath<T, Path>>\n    | undefined;\n}\n\nexport interface FormSelectorOptions<Selected> {\n  isEqual?: (previous: Selected, next: Selected) => boolean;\n}\n\nexport function useFormSelector<T extends object, Selected>(\n  controller: FormController<T>,\n  selector: (state: ModernFormState<T>) => Selected,\n  options?: FormSelectorOptions<Selected>,\n): Selected {\n  const { getServerSnapshot } = getControllerInternals(\n    controller,\n    'Form.useSelector()',\n  );\n  return useSyncExternalStoreWithSelector(\n    controller.subscribe,\n    controller.getSnapshot,\n    getServerSnapshot,\n    selector,\n    options?.isEqual,\n  );\n}\n\nexport interface FormSubscribeProps<T extends object, Selected>\n  extends FormSelectorOptions<Selected> {\n  /** Omit to use modern context. An explicit undefined detaches from context. */\n  form?: FormController<T>;\n  selector: (state: ModernFormState<T>) => Selected;\n  children: (selected: Selected) => ReactNode;\n}\n\nexport function FormSubscribe<\n  T extends object = Record<string, unknown>,\n  Selected = unknown,\n>(props: FormSubscribeProps<T, Selected>) {\n  const fromContext = useContext(ModernControllerContext);\n  const controller = Object.hasOwn(props, 'form') ? props.form : fromContext;\n  if (!controller) {\n    throw new Error(\n      '<Form.Subscribe> requires a modern form prop or a modern <Form> root.',\n    );\n  }\n  const selected = useFormSelector(controller, props.selector, {\n    isEqual: props.isEqual,\n  });\n  return <>{props.children(selected)}</>;\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAgB,kBACd,SACmB;CAGnB,MAAM,CAAC,cAAc,eAAe,qBAAqB,QAAQ,CAAC;CAClE,MAAM,EAAE,UAAU,uBAAuB,YAAY,uBAAuB;AAG5E,yBAAsB;AACpB,QAAM,gBAAgB;GACpB,UAAU,SAAS;GACnB,gBAAgB,SAAS;GACzB,gBAAgB,SAAS;GAC1B,CAAC;GACF;AAIF,QAAO;;AAGT,SAAgB,aACd,MACA,MACqD;CACrD,MAAM,aAAa,cAAc,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAC7D,QAAO,gBAAgB,OAAO,UAC5B,SAAS,MAAM,QAAQ,WAAW,CACnC;;AAGH,SAAgB,kBAId,MACA,MACwD;CACxD,MAAM,MAAM,cAAc,YAAY,KAAK,EAAE,CAAC,KAAK,CAAC;AACpD,QAAO,gBAAgB,OAAO,UAAU,MAAM,OAAO,KAAK;;AAS5D,SAAgB,gBACd,YACA,UACA,SACU;CACV,MAAM,EAAE,sBAAsB,uBAC5B,YACA,qBACD;AACD,QAAO,iCACL,WAAW,WACX,WAAW,aACX,mBACA,UACA,SAAS,QACV;;AAWH,SAAgB,cAGd,OAAwC;CACxC,MAAM,cAAc,WAAW,wBAAwB;CACvD,MAAM,aAAa,OAAO,OAAO,OAAO,OAAO,GAAG,MAAM,OAAO;AAC/D,KAAI,CAAC,WACH,OAAM,IAAI,MACR,wEACD;CAEH,MAAM,WAAW,gBAAgB,YAAY,MAAM,UAAU,EAC3D,SAAS,MAAM,SAChB,CAAC;AACF,QAAO,4CAAG,MAAM,SAAS,SAAS,GAAI"}

package/dist/components/form/Form/modern/read-types.d.ts

@@ -0,0 +1,11 @@
+
+import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
+
+//#region src/components/form/Form/modern/read-types.d.ts
+type AtomicFormValue = Date | RegExp | File | Blob | Map<any, any> | Set<any> | ((...args: any[]) => any) | CalendarDate | CalendarDateTime | Time | ZonedDateTime;
+/** Partial immutable data; platform and date-control values stay atomic. */
+type FormReadValue<T> = T extends AtomicFormValue ? T : T extends object ? { readonly [K in keyof T]?: FormReadValue<T[K]> } : T;
+type FormValues<T extends object> = FormReadValue<T>;
+//#endregion
+export { FormReadValue, FormValues };
+//# sourceMappingURL=read-types.d.ts.map