@axenstudio/axen-form 0.1.17 → 0.1.18

package/dist/index.js

@@ -5,20 +5,21 @@
       var elementStyle = document.createElement("style");
       elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
    axen-form CSS Reset
-   Minimal reset for form elements
+   Reset only inside an Axen form or an explicit data-axen-theme wrapper
    ═══════════════════════════════════════════════ */
 
-*,
-*::before,
-*::after {
+:where([data-axen-theme]),
+:where([data-axen-theme]) *,
+:where([data-axen-theme]) *::before,
+:where([data-axen-theme]) *::after {
   box-sizing: border-box;
 }
 
 /* Reset form element defaults */
-input,
-textarea,
-select,
-button {
+:where([data-axen-theme]) input,
+:where([data-axen-theme]) textarea,
+:where([data-axen-theme]) select,
+:where([data-axen-theme]) button {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -27,46 +28,46 @@ button {
 }
 
 /* Remove default styling from number inputs */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+:where([data-axen-theme]) input[type='number']::-webkit-inner-spin-button,
+:where([data-axen-theme]) input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type='number'] {
+:where([data-axen-theme]) input[type='number'] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
 
 /* Remove default date/time input icons if using custom components */
-input[type='date']::-webkit-calendar-picker-indicator,
-input[type='time']::-webkit-calendar-picker-indicator,
-input[type='datetime-local']::-webkit-calendar-picker-indicator {
+:where([data-axen-theme]) input[type='date']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='time']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='datetime-local']::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
 
 /* Ensure fieldset/legend reset */
-fieldset {
+:where([data-axen-theme]) fieldset {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-legend {
+:where([data-axen-theme]) legend {
   padding: 0;
 }
 
 /* Remove textarea resize handle (can be overridden) */
-textarea {
+:where([data-axen-theme]) textarea {
   resize: vertical;
 }
 
 /* Focus visible only — keyboard navigation (A11y) */
-:focus:not(:focus-visible) {
+:where([data-axen-theme]) :focus:not(:focus-visible) {
   outline: none;
 }
 
-:focus-visible {
+:where([data-axen-theme]) :focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid
     var(--axen-focus-ring-color, rgba(25, 118, 210, 0.5));
   outline-offset: var(--axen-focus-ring-offset, 2px);
@@ -108,9 +109,6 @@ textarea {
    ═══════════════════════════════════════════════ */
 
 :root {
-  /* Force light rendering for all native form controls (select, date, etc.) */
-  color-scheme: light;
-
   /* ── Color Palette ─────────────────────────── */
   --axen-color-primary: #1976d2;
   --axen-color-primary-hover: #1565c0;
@@ -189,6 +187,11 @@ textarea {
   --axen-z-tooltip: 200;
 }
 
+:where([data-axen-theme]) {
+  /* Keep native Axen controls light without changing the host document. */
+  color-scheme: light;
+}
+
 /* ── Dark Mode ───────────────────────────────
    Removed: axen-form ships as light-only by default.
    Form elements are locked to color-scheme: light above.
@@ -231,10 +234,12 @@ import { calculateCursorPosition, formatNumber, getDecimalSeparator, getGroupSep
 import { get, pathToString, set, toPathArray } from "./core/pathUtils.js";
 import { getStrippedFields, mapPayload, pickFields } from "./core/payloadUtils.js";
 import { simpleValidator } from "./core/validation.js";
+import { validateSemanticValue, withValidationPolicy } from "./core/semanticValidation.js";
 import { FormContext, useFormContext } from "./react/FormContext.js";
 import { useAxenForm } from "./react/useAxenForm.js";
 import { useField } from "./react/useField.js";
 import { useFieldArray } from "./react/useFieldArray.js";
+import { useFormState, useWatch } from "./react/useFormState.js";
 import { AxenArrayField } from "./react/AxenArrayField.js";
 import { AxenField } from "./react/AxenField.js";
 import { AxenForm } from "./react/AxenForm.js";
@@ -333,5 +338,9 @@ export {
   useAxenForm,
   useField,
   useFieldArray,
-  useFormContext
+  useFormContext,
+  useFormState,
+  useWatch,
+  validateSemanticValue,
+  withValidationPolicy
 };

package/dist/layout/Box/Box.d.ts

@@ -2,5 +2,4 @@ import { BoxProps } from '../../types';
 /**
  * Utility box component for flex/block layout + spacing.
  */
-export declare function Box({ children, component: Component, display, flexDirection, justifyContent, alignItems, flexWrap, gap, p, px, py, m, mx, my, className, style: userStyle, }: Readonly<BoxProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Box.d.ts.map
+export declare function Box({ children, component: Component, display, flexDirection, justifyContent, alignItems, flexWrap, gap, p, px, py, m, mx, my, className, style: userStyle, }: Readonly<BoxProps>): import("react").JSX.Element;

package/dist/layout/Divider/Divider.d.ts

@@ -2,5 +2,4 @@ import { DividerProps } from '../../types';
 /**
  * Visual divider line — horizontal or vertical.
  */
-export declare function Divider({ orientation, className, style }: Readonly<DividerProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Divider.d.ts.map
+export declare function Divider({ orientation, className, style }: Readonly<DividerProps>): import("react").JSX.Element;

package/dist/layout/Grid/Grid.d.ts

@@ -3,5 +3,4 @@ import { GridProps } from '../../types';
  * CSS Grid-based layout component (MUI v7 Grid API).
  * 12-column responsive grid system.
  */
-export declare function Grid({ children, container, columns, spacing, rowSpacing, columnSpacing, size: sizeProp, xs: xsProp, sm: smProp, md: mdProp, lg: lgProp, xl: xlProp, offset, className, style: userStyle, }: Readonly<GridProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Grid.d.ts.map
+export declare function Grid({ children, container, columns, spacing, rowSpacing, columnSpacing, size: sizeProp, xs: xsProp, sm: smProp, md: mdProp, lg: lgProp, xl: xlProp, offset, className, style: userStyle, }: Readonly<GridProps>): import("react").JSX.Element;

package/dist/layout/Spacer/Spacer.d.ts

@@ -17,5 +17,4 @@ import { SpacerProps } from '../../types';
  * // Flex basis (fixed space in flex container)
  * <Spacer basis={4} />    // 32px flex-basis
  */
-export declare function Spacer({ x, y, basis, grow, className, style: userStyle, }: Readonly<SpacerProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Spacer.d.ts.map
+export declare function Spacer({ x, y, basis, grow, className, style: userStyle, }: Readonly<SpacerProps>): import("react").JSX.Element;

package/dist/layout/Stack/Stack.d.ts

@@ -3,5 +3,4 @@ import { StackProps } from '../../types';
  * Stack component — arranges children in a row or column with spacing.
  * Optionally inserts a divider between items.
  */
-export declare function Stack({ children, direction, spacing, alignItems, justifyContent, divider, className, style: userStyle, }: Readonly<StackProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Stack.d.ts.map
+export declare function Stack({ children, direction, spacing, alignItems, justifyContent, divider, className, style: userStyle, }: Readonly<StackProps>): import("react").JSX.Element;

package/dist/layout/index.d.ts

@@ -3,4 +3,3 @@ export { Divider } from './Divider/Divider';
 export { Grid } from './Grid/Grid';
 export { Spacer } from './Spacer/Spacer';
 export { Stack } from './Stack/Stack';
-//# sourceMappingURL=index.d.ts.map

package/dist/react/AxenArrayField.d.ts

@@ -11,5 +11,4 @@ export interface AxenArrayFieldProps {
 /**
  * Array field component for repeating field groups.
  */
-export declare function AxenArrayField({ name, config, children }: Readonly<AxenArrayFieldProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AxenArrayField.d.ts.map
+export declare function AxenArrayField({ name, config, children }: Readonly<AxenArrayFieldProps>): import("react").JSX.Element;

package/dist/react/AxenField.d.ts

@@ -9,5 +9,4 @@ export interface AxenFieldProps {
  * Standalone field component — can be used outside AxenForm grid
  * when you need fine-grained placement.
  */
-export declare function AxenField({ name, config, component, children }: Readonly<AxenFieldProps>): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=AxenField.d.ts.map
+export declare function AxenField({ name, config, component, children }: Readonly<AxenFieldProps>): import("react").JSX.Element | null;

package/dist/react/AxenForm.cjs

@@ -5,20 +5,21 @@
       var elementStyle = document.createElement("style");
       elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
    axen-form CSS Reset
-   Minimal reset for form elements
+   Reset only inside an Axen form or an explicit data-axen-theme wrapper
    ═══════════════════════════════════════════════ */
 
-*,
-*::before,
-*::after {
+:where([data-axen-theme]),
+:where([data-axen-theme]) *,
+:where([data-axen-theme]) *::before,
+:where([data-axen-theme]) *::after {
   box-sizing: border-box;
 }
 
 /* Reset form element defaults */
-input,
-textarea,
-select,
-button {
+:where([data-axen-theme]) input,
+:where([data-axen-theme]) textarea,
+:where([data-axen-theme]) select,
+:where([data-axen-theme]) button {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -27,46 +28,46 @@ button {
 }
 
 /* Remove default styling from number inputs */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+:where([data-axen-theme]) input[type='number']::-webkit-inner-spin-button,
+:where([data-axen-theme]) input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type='number'] {
+:where([data-axen-theme]) input[type='number'] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
 
 /* Remove default date/time input icons if using custom components */
-input[type='date']::-webkit-calendar-picker-indicator,
-input[type='time']::-webkit-calendar-picker-indicator,
-input[type='datetime-local']::-webkit-calendar-picker-indicator {
+:where([data-axen-theme]) input[type='date']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='time']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='datetime-local']::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
 
 /* Ensure fieldset/legend reset */
-fieldset {
+:where([data-axen-theme]) fieldset {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-legend {
+:where([data-axen-theme]) legend {
   padding: 0;
 }
 
 /* Remove textarea resize handle (can be overridden) */
-textarea {
+:where([data-axen-theme]) textarea {
   resize: vertical;
 }
 
 /* Focus visible only — keyboard navigation (A11y) */
-:focus:not(:focus-visible) {
+:where([data-axen-theme]) :focus:not(:focus-visible) {
   outline: none;
 }
 
-:focus-visible {
+:where([data-axen-theme]) :focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid
     var(--axen-focus-ring-color, rgba(25, 118, 210, 0.5));
   outline-offset: var(--axen-focus-ring-offset, 2px);
@@ -108,9 +109,6 @@ textarea {
    ═══════════════════════════════════════════════ */
 
 :root {
-  /* Force light rendering for all native form controls (select, date, etc.) */
-  color-scheme: light;
-
   /* ── Color Palette ─────────────────────────── */
   --axen-color-primary: #1976d2;
   --axen-color-primary-hover: #1565c0;
@@ -189,6 +187,11 @@ textarea {
   --axen-z-tooltip: 200;
 }
 
+:where([data-axen-theme]) {
+  /* Keep native Axen controls light without changing the host document. */
+  color-scheme: light;
+}
+
 /* ── Dark Mode ───────────────────────────────
    Removed: axen-form ships as light-only by default.
    Form elements are locked to color-scheme: light above.
@@ -243,6 +246,7 @@ function AxenFormInner(props, ref) {
     onSubmit,
     components,
     validationAdapter,
+    validationPolicy,
     payloadFields,
     payloadDiscriminator,
     columns = 12,
@@ -270,6 +274,7 @@ function AxenFormInner(props, ref) {
     config,
     onSubmit: wrappedOnSubmit,
     validationAdapter,
+    validationPolicy,
     validateOnChange,
     validateOnBlur
   });
@@ -366,7 +371,8 @@ function AxenFieldRenderer({
 }) {
   const { store, components } = FormContext.useFormContext();
   const { value, error, touched, onChange, onBlur } = useField.useField(config.name);
-  const hidden = typeof config.hidden === "function" ? config.hidden(store.getState().values) : config.hidden;
+  const getHidden = () => typeof config.hidden === "function" ? Boolean(config.hidden(store.getState().values)) : Boolean(config.hidden);
+  const hidden = react.useSyncExternalStore(store.subscribe, getHidden, getHidden);
   if (hidden) return null;
   const Component = config.component ?? components[config.type];
   if (!Component) {

package/dist/react/AxenForm.d.ts

@@ -4,4 +4,3 @@ export declare const AxenForm: <TValues extends Record<string, unknown>>(props:
     children?: ReactNode;
     ref?: React.Ref<AxenFormRef>;
 }) => ReactNode;
-//# sourceMappingURL=AxenForm.d.ts.map

package/dist/react/AxenForm.js

@@ -5,20 +5,21 @@
       var elementStyle = document.createElement("style");
       elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
    axen-form CSS Reset
-   Minimal reset for form elements
+   Reset only inside an Axen form or an explicit data-axen-theme wrapper
    ═══════════════════════════════════════════════ */
 
-*,
-*::before,
-*::after {
+:where([data-axen-theme]),
+:where([data-axen-theme]) *,
+:where([data-axen-theme]) *::before,
+:where([data-axen-theme]) *::after {
   box-sizing: border-box;
 }
 
 /* Reset form element defaults */
-input,
-textarea,
-select,
-button {
+:where([data-axen-theme]) input,
+:where([data-axen-theme]) textarea,
+:where([data-axen-theme]) select,
+:where([data-axen-theme]) button {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -27,46 +28,46 @@ button {
 }
 
 /* Remove default styling from number inputs */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+:where([data-axen-theme]) input[type='number']::-webkit-inner-spin-button,
+:where([data-axen-theme]) input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type='number'] {
+:where([data-axen-theme]) input[type='number'] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
 
 /* Remove default date/time input icons if using custom components */
-input[type='date']::-webkit-calendar-picker-indicator,
-input[type='time']::-webkit-calendar-picker-indicator,
-input[type='datetime-local']::-webkit-calendar-picker-indicator {
+:where([data-axen-theme]) input[type='date']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='time']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='datetime-local']::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
 
 /* Ensure fieldset/legend reset */
-fieldset {
+:where([data-axen-theme]) fieldset {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-legend {
+:where([data-axen-theme]) legend {
   padding: 0;
 }
 
 /* Remove textarea resize handle (can be overridden) */
-textarea {
+:where([data-axen-theme]) textarea {
   resize: vertical;
 }
 
 /* Focus visible only — keyboard navigation (A11y) */
-:focus:not(:focus-visible) {
+:where([data-axen-theme]) :focus:not(:focus-visible) {
   outline: none;
 }
 
-:focus-visible {
+:where([data-axen-theme]) :focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid
     var(--axen-focus-ring-color, rgba(25, 118, 210, 0.5));
   outline-offset: var(--axen-focus-ring-offset, 2px);
@@ -108,9 +109,6 @@ textarea {
    ═══════════════════════════════════════════════ */
 
 :root {
-  /* Force light rendering for all native form controls (select, date, etc.) */
-  color-scheme: light;
-
   /* ── Color Palette ─────────────────────────── */
   --axen-color-primary: #1976d2;
   --axen-color-primary-hover: #1565c0;
@@ -189,6 +187,11 @@ textarea {
   --axen-z-tooltip: 200;
 }
 
+:where([data-axen-theme]) {
+  /* Keep native Axen controls light without changing the host document. */
+  color-scheme: light;
+}
+
 /* ── Dark Mode ───────────────────────────────
    Removed: axen-form ships as light-only by default.
    Form elements are locked to color-scheme: light above.
@@ -222,7 +225,7 @@ textarea {
   }
 })();
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useImperativeHandle } from "react";
+import { forwardRef, useMemo, useImperativeHandle, useSyncExternalStore } from "react";
 import { mapPayload } from "../core/payloadUtils.js";
 import { defaultComponentMap } from "../fields/defaultComponentMap.js";
 import { defaultPlaceholders } from "../fields/defaultPlaceholders.js";
@@ -241,6 +244,7 @@ function AxenFormInner(props, ref) {
     onSubmit,
     components,
     validationAdapter,
+    validationPolicy,
     payloadFields,
     payloadDiscriminator,
     columns = 12,
@@ -268,6 +272,7 @@ function AxenFormInner(props, ref) {
     config,
     onSubmit: wrappedOnSubmit,
     validationAdapter,
+    validationPolicy,
     validateOnChange,
     validateOnBlur
   });
@@ -364,7 +369,8 @@ function AxenFieldRenderer({
 }) {
   const { store, components } = useFormContext();
   const { value, error, touched, onChange, onBlur } = useField(config.name);
-  const hidden = typeof config.hidden === "function" ? config.hidden(store.getState().values) : config.hidden;
+  const getHidden = () => typeof config.hidden === "function" ? Boolean(config.hidden(store.getState().values)) : Boolean(config.hidden);
+  const hidden = useSyncExternalStore(store.subscribe, getHidden, getHidden);
   if (hidden) return null;
   const Component = config.component ?? components[config.type];
   if (!Component) {

package/dist/react/FormContext.d.ts

@@ -8,4 +8,3 @@ export interface FormContextValue {
 }
 export declare const FormContext: import('react').Context<FormContextValue | null>;
 export declare function useFormContext(): FormContextValue;
-//# sourceMappingURL=FormContext.d.ts.map

package/dist/react/useAxenForm.cjs

@@ -3,25 +3,32 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const formStore = require("../core/formStore.cjs");
 const validation = require("../core/validation.cjs");
+const semanticValidation = require("../core/semanticValidation.cjs");
+const types = require("../types.cjs");
 function useAxenForm(props) {
   const {
     config,
     onSubmit,
     validationAdapter,
+    validationPolicy,
     validateOnChange = true,
     validateOnBlur = true
   } = props;
-  const adapter = validationAdapter ?? validation.simpleValidator;
+  const adapter = semanticValidation.withValidationPolicy(validationAdapter ?? validation.simpleValidator, validationPolicy ?? config.validationPolicy);
+  const onSubmitRef = react.useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const isUpdateRef = react.useRef(config.isUpdate ?? false);
+  isUpdateRef.current = config.isUpdate ?? false;
   const storeRef = react.useRef(null);
   storeRef.current ?? (storeRef.current = formStore.createFormStore({
     initialValues: config.initialValues,
     validationAdapter: adapter,
-    fields: config.fields,
+    fields: config.fields.flatMap((item) => types.isFieldGroup(item) ? item.fields : [item]),
     validateOnChange,
     validateOnBlur,
     onSubmit: async (values) => {
-      await onSubmit(values, {
-        isUpdate: config.isUpdate ?? false,
+      await onSubmitRef.current(values, {
+        isUpdate: isUpdateRef.current,
         resetForm: () => {
           var _a;
           return (_a = storeRef.current) == null ? void 0 : _a.resetForm();

package/dist/react/useAxenForm.d.ts

@@ -4,5 +4,4 @@ export interface UseAxenFormReturn<TValues extends Record<string, unknown>> {
     store: FormStore<TValues>;
     formApi: FormApi<TValues>;
 }
-export declare function useAxenForm<TValues extends Record<string, unknown>>(props: Pick<AxenFormProps<TValues>, 'config' | 'onSubmit' | 'validationAdapter' | 'validateOnChange' | 'validateOnBlur' | 'payloadFields' | 'payloadDiscriminator'>): UseAxenFormReturn<TValues>;
-//# sourceMappingURL=useAxenForm.d.ts.map
+export declare function useAxenForm<TValues extends Record<string, unknown>>(props: Pick<AxenFormProps<TValues>, 'config' | 'onSubmit' | 'validationAdapter' | 'validationPolicy' | 'validateOnChange' | 'validateOnBlur' | 'payloadFields' | 'payloadDiscriminator'>): UseAxenFormReturn<TValues>;

package/dist/react/useAxenForm.js

@@ -1,25 +1,32 @@
 import { useRef, useMemo } from "react";
 import { createFormStore } from "../core/formStore.js";
 import { simpleValidator } from "../core/validation.js";
+import { withValidationPolicy } from "../core/semanticValidation.js";
+import { isFieldGroup } from "../types.js";
 function useAxenForm(props) {
   const {
     config,
     onSubmit,
     validationAdapter,
+    validationPolicy,
     validateOnChange = true,
     validateOnBlur = true
   } = props;
-  const adapter = validationAdapter ?? simpleValidator;
+  const adapter = withValidationPolicy(validationAdapter ?? simpleValidator, validationPolicy ?? config.validationPolicy);
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const isUpdateRef = useRef(config.isUpdate ?? false);
+  isUpdateRef.current = config.isUpdate ?? false;
   const storeRef = useRef(null);
   storeRef.current ?? (storeRef.current = createFormStore({
     initialValues: config.initialValues,
     validationAdapter: adapter,
-    fields: config.fields,
+    fields: config.fields.flatMap((item) => isFieldGroup(item) ? item.fields : [item]),
     validateOnChange,
     validateOnBlur,
     onSubmit: async (values) => {
-      await onSubmit(values, {
-        isUpdate: config.isUpdate ?? false,
+      await onSubmitRef.current(values, {
+        isUpdate: isUpdateRef.current,
         resetForm: () => {
           var _a;
           return (_a = storeRef.current) == null ? void 0 : _a.resetForm();

package/dist/react/useField.cjs

@@ -6,14 +6,17 @@ function useField(name) {
   const { store } = FormContext.useFormContext();
   const value = react.useSyncExternalStore(
     (cb) => store.subscribeField(name, cb),
+    () => store.getFieldValue(name),
     () => store.getFieldValue(name)
   );
   const error = react.useSyncExternalStore(
     (cb) => store.subscribeField(name, cb),
+    () => store.getFieldError(name),
     () => store.getFieldError(name)
   );
   const touched = react.useSyncExternalStore(
     (cb) => store.subscribeField(name, cb),
+    () => store.getFieldTouched(name),
     () => store.getFieldTouched(name)
   );
   const onChange = react.useCallback(

package/dist/react/useField.d.ts

@@ -10,4 +10,3 @@ export interface UseFieldReturn {
     setError: (error: string | undefined) => void;
 }
 export declare function useField(name: string): UseFieldReturn;
-//# sourceMappingURL=useField.d.ts.map

package/dist/react/useField.js

@@ -4,14 +4,17 @@ function useField(name) {
   const { store } = useFormContext();
   const value = useSyncExternalStore(
     (cb) => store.subscribeField(name, cb),
+    () => store.getFieldValue(name),
     () => store.getFieldValue(name)
   );
   const error = useSyncExternalStore(
     (cb) => store.subscribeField(name, cb),
+    () => store.getFieldError(name),
     () => store.getFieldError(name)
   );
   const touched = useSyncExternalStore(
     (cb) => store.subscribeField(name, cb),
+    () => store.getFieldTouched(name),
     () => store.getFieldTouched(name)
   );
   const onChange = useCallback(