@cdx-ui/utils 0.0.1-alpha.3 → 0.0.1-alpha.30

package/lib/commonjs/form-control/index.js

@@ -21,5 +21,11 @@ Object.defineProperty(exports, "useFormControlContext", {
     return _useFormControl.useFormControlContext;
   }
 });
+Object.defineProperty(exports, "useFormControlRoot", {
+  enumerable: true,
+  get: function () {
+    return _useFormControl.useFormControlRoot;
+  }
+});
 var _useFormControl = require("./useFormControl");
 //# sourceMappingURL=index.js.map

package/lib/commonjs/form-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_useFormControl","require"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["_useFormControl","require"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/form-control/useFormControl.js

@@ -6,21 +6,87 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormControlContext = void 0;
 exports.useFormControl = useFormControl;
 exports.useFormControlContext = void 0;
+exports.useFormControlRoot = useFormControlRoot;
 var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
 var _accessibilityUtils = require("../common/accessibilityUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FormControlContext = exports.FormControlContext = /*#__PURE__*/_react.default.createContext({});
+
+/** Props for the FormControl root; known fields plus passthrough to the styled root box. */
+
+/**
+ * Builds state and ids for a `Form` primitive root (`createFormRoot`). Pass the returned object
+ * (minus `htmlProps`) to `FormControlContext.Provider` — this is not a React context consumer hook.
+ */
+function useFormControlRoot(props) {
+  const {
+    id: idProp,
+    name,
+    isRequired,
+    isInvalid,
+    isDisabled,
+    isReadOnly,
+    ...htmlProps
+  } = props;
+  const reactId = _react.default.useId();
+  const id = (typeof idProp === 'string' && idProp !== '' ? idProp : null) ?? `field-${reactId}`;
+  const labelId = `${id}-label`;
+  const feedbackId = `${id}-feedback`;
+  const helpTextId = `${id}-helptext`;
+
+  /**
+   * Track whether the `FormErrorMessage` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasFeedbackText, setHasFeedbackText] = _react.default.useState(false);
+
+  /**
+   * Track whether the `FormHelperText` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasHelpText, setHasHelpText] = _react.default.useState(false);
+  const inputRef = _react.default.useRef(null);
+  const focusInput = _react.default.useCallback(() => {
+    const node = inputRef.current;
+    if (node != null && typeof node.focus === 'function') {
+      node.focus();
+    }
+  }, []);
+  const context = {
+    isRequired: Boolean(isRequired),
+    isInvalid: Boolean(isInvalid),
+    isReadOnly: Boolean(isReadOnly),
+    isDisabled: Boolean(isDisabled),
+    hasFeedbackText,
+    setHasFeedbackText,
+    hasHelpText,
+    setHasHelpText,
+    name,
+    id,
+    labelId,
+    feedbackId,
+    helpTextId,
+    htmlProps,
+    ...(_reactNative.Platform.OS !== 'web' ? {
+      inputRef,
+      focusInput
+    } : {})
+  };
+  return context;
+}
+
 /**
- * Hook that merges local field props with the nearest FormControl context
+ * Hook that merges local field props with the nearest form field context
  * and returns normalised HTML / ARIA attributes for input elements.
  */
 function useFormControl(props) {
   const field = useFormControlContext();
   const describedBy = [];
-  if (field?.hasFeedbackText && field.feedbackId) {
+  if (field.hasFeedbackText && field.feedbackId) {
     describedBy.push(field.feedbackId);
   }
-  if (field?.hasHelpText && field.helpTextId) {
+  if (field.hasHelpText && field.helpTextId) {
     describedBy.push(field.helpTextId);
   }
   const ariaDescribedBy = describedBy.join(' ');
@@ -31,17 +97,19 @@ function useFormControl(props) {
     isRequired,
     ...cleanProps
   } = props;
-  const id = props.id ?? (field?.id ? `${field.id}-input` : undefined);
+  const id = props.id ?? (field.id ? `${field.id}-input` : undefined);
   return {
     ...cleanProps,
     id,
-    disabled: isDisabled || field?.isDisabled,
-    readOnly: isReadOnly || field?.isReadOnly,
-    required: isRequired || field?.isRequired,
-    'aria-invalid': (0, _accessibilityUtils.ariaAttr)(isInvalid || field?.isInvalid),
-    'aria-required': (0, _accessibilityUtils.ariaAttr)(isRequired || field?.isRequired),
-    'aria-readonly': (0, _accessibilityUtils.ariaAttr)(isReadOnly || field?.isReadOnly),
-    'aria-describedby': ariaDescribedBy || undefined
+    name: field.name,
+    disabled: isDisabled || field.isDisabled,
+    readOnly: isReadOnly || field.isReadOnly,
+    required: isRequired || field.isRequired,
+    'aria-invalid': (0, _accessibilityUtils.ariaAttr)(isInvalid || field.isInvalid),
+    'aria-required': (0, _accessibilityUtils.ariaAttr)(isRequired || field.isRequired),
+    'aria-readonly': (0, _accessibilityUtils.ariaAttr)(isReadOnly || field.isReadOnly),
+    'aria-describedby': ariaDescribedBy || undefined,
+    'aria-labelledby': field.labelId
   };
 }
 const useFormControlContext = () => {

package/lib/commonjs/form-control/useFormControl.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_accessibilityUtils","e","__esModule","default","FormControlContext","exports","React","createContext","useFormControl","props","field","useFormControlContext","describedBy","hasFeedbackText","feedbackId","push","hasHelpText","helpTextId","ariaDescribedBy","join","isInvalid","isDisabled","isReadOnly","isRequired","cleanProps","id","undefined","disabled","readOnly","required","ariaAttr","useContext"],"sourceRoot":"../../../src","sources":["form-control/useFormControl.tsx"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAAwD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAqBjD,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,gBAAGE,cAAK,CAACC,aAAa,CAAmC,CAAC,CAAC,CAAC;AAM3F;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAACC,KAA4B,EAAE;EAC3D,MAAMC,KAAK,GAAGC,qBAAqB,CAAC,CAAC;EACrC,MAAMC,WAAqB,GAAG,EAAE;EAEhC,IAAIF,KAAK,EAAEG,eAAe,IAAIH,KAAK,CAACI,UAAU,EAAE;IAC9CF,WAAW,CAACG,IAAI,CAACL,KAAK,CAACI,UAAU,CAAC;EACpC;EACA,IAAIJ,KAAK,EAAEM,WAAW,IAAIN,KAAK,CAACO,UAAU,EAAE;IAC1CL,WAAW,CAACG,IAAI,CAACL,KAAK,CAACO,UAAU,CAAC;EACpC;EACA,MAAMC,eAAe,GAAGN,WAAW,CAACO,IAAI,CAAC,GAAG,CAAC;EAE7C,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,UAAU;IAAEC,UAAU;IAAE,GAAGC;EAAW,CAAC,GAAGf,KAAK;EAC9E,MAAMgB,EAAE,GAAGhB,KAAK,CAACgB,EAAE,KAAKf,KAAK,EAAEe,EAAE,GAAG,GAAGf,KAAK,CAACe,EAAE,QAAQ,GAAGC,SAAS,CAAC;EAEpE,OAAO;IACL,GAAGF,UAAU;IACbC,EAAE;IACFE,QAAQ,EAAEN,UAAU,IAAIX,KAAK,EAAEW,UAAU;IACzCO,QAAQ,EAAEN,UAAU,IAAIZ,KAAK,EAAEY,UAAU;IACzCO,QAAQ,EAAEN,UAAU,IAAIb,KAAK,EAAEa,UAAU;IACzC,cAAc,EAAE,IAAAO,4BAAQ,EAACV,SAAS,IAAIV,KAAK,EAAEU,SAAS,CAAC;IACvD,eAAe,EAAE,IAAAU,4BAAQ,EAACP,UAAU,IAAIb,KAAK,EAAEa,UAAU,CAAC;IAC1D,eAAe,EAAE,IAAAO,4BAAQ,EAACR,UAAU,IAAIZ,KAAK,EAAEY,UAAU,CAAC;IAC1D,kBAAkB,EAAEJ,eAAe,IAAIQ;EACzC,CAAC;AACH;AAEO,MAAMf,qBAAqB,GAAGA,CAAA,KAAM;EACzC,OAAOL,cAAK,CAACyB,UAAU,CAAC3B,kBAAkB,CAAC;AAC7C,CAAC;AAACC,OAAA,CAAAM,qBAAA,GAAAA,qBAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_accessibilityUtils","e","__esModule","default","FormControlContext","exports","React","createContext","useFormControlRoot","props","id","idProp","name","isRequired","isInvalid","isDisabled","isReadOnly","htmlProps","reactId","useId","labelId","feedbackId","helpTextId","hasFeedbackText","setHasFeedbackText","useState","hasHelpText","setHasHelpText","inputRef","useRef","focusInput","useCallback","node","current","focus","context","Boolean","Platform","OS","useFormControl","field","useFormControlContext","describedBy","push","ariaDescribedBy","join","cleanProps","undefined","disabled","readOnly","required","ariaAttr","useContext"],"sourceRoot":"../../../src","sources":["form-control/useFormControl.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/form-control/index.js

@@ -1,4 +1,4 @@
 "use strict";
 
-export { FormControlContext, useFormControl, useFormControlContext } from './useFormControl';
+export { FormControlContext, useFormControl, useFormControlContext, useFormControlRoot } from './useFormControl';
 //# sourceMappingURL=index.js.map

package/lib/module/form-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormControlContext","useFormControl","useFormControlContext"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;AAAA,SAIEA,kBAAkB,EAClBC,cAAc,EACdC,qBAAqB,QAChB,kBAAkB","ignoreList":[]}
+{"version":3,"names":["FormControlContext","useFormControl","useFormControlContext","useFormControlRoot"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;AAAA,SAMEA,kBAAkB,EAClBC,cAAc,EACdC,qBAAqB,EACrBC,kBAAkB,QACb,kBAAkB","ignoreList":[]}

package/lib/module/form-control/useFormControl.js

@@ -1,19 +1,84 @@
 "use strict";
 
 import React from 'react';
+import { Platform } from 'react-native';
 import { ariaAttr } from '../common/accessibilityUtils';
 export const FormControlContext = /*#__PURE__*/React.createContext({});
+
+/** Props for the FormControl root; known fields plus passthrough to the styled root box. */
+
+/**
+ * Builds state and ids for a `Form` primitive root (`createFormRoot`). Pass the returned object
+ * (minus `htmlProps`) to `FormControlContext.Provider` — this is not a React context consumer hook.
+ */
+export function useFormControlRoot(props) {
+  const {
+    id: idProp,
+    name,
+    isRequired,
+    isInvalid,
+    isDisabled,
+    isReadOnly,
+    ...htmlProps
+  } = props;
+  const reactId = React.useId();
+  const id = (typeof idProp === 'string' && idProp !== '' ? idProp : null) ?? `field-${reactId}`;
+  const labelId = `${id}-label`;
+  const feedbackId = `${id}-feedback`;
+  const helpTextId = `${id}-helptext`;
+
+  /**
+   * Track whether the `FormErrorMessage` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasFeedbackText, setHasFeedbackText] = React.useState(false);
+
+  /**
+   * Track whether the `FormHelperText` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasHelpText, setHasHelpText] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const focusInput = React.useCallback(() => {
+    const node = inputRef.current;
+    if (node != null && typeof node.focus === 'function') {
+      node.focus();
+    }
+  }, []);
+  const context = {
+    isRequired: Boolean(isRequired),
+    isInvalid: Boolean(isInvalid),
+    isReadOnly: Boolean(isReadOnly),
+    isDisabled: Boolean(isDisabled),
+    hasFeedbackText,
+    setHasFeedbackText,
+    hasHelpText,
+    setHasHelpText,
+    name,
+    id,
+    labelId,
+    feedbackId,
+    helpTextId,
+    htmlProps,
+    ...(Platform.OS !== 'web' ? {
+      inputRef,
+      focusInput
+    } : {})
+  };
+  return context;
+}
+
 /**
- * Hook that merges local field props with the nearest FormControl context
+ * Hook that merges local field props with the nearest form field context
  * and returns normalised HTML / ARIA attributes for input elements.
  */
 export function useFormControl(props) {
   const field = useFormControlContext();
   const describedBy = [];
-  if (field?.hasFeedbackText && field.feedbackId) {
+  if (field.hasFeedbackText && field.feedbackId) {
     describedBy.push(field.feedbackId);
   }
-  if (field?.hasHelpText && field.helpTextId) {
+  if (field.hasHelpText && field.helpTextId) {
     describedBy.push(field.helpTextId);
   }
   const ariaDescribedBy = describedBy.join(' ');
@@ -24,17 +89,19 @@ export function useFormControl(props) {
     isRequired,
     ...cleanProps
   } = props;
-  const id = props.id ?? (field?.id ? `${field.id}-input` : undefined);
+  const id = props.id ?? (field.id ? `${field.id}-input` : undefined);
   return {
     ...cleanProps,
     id,
-    disabled: isDisabled || field?.isDisabled,
-    readOnly: isReadOnly || field?.isReadOnly,
-    required: isRequired || field?.isRequired,
-    'aria-invalid': ariaAttr(isInvalid || field?.isInvalid),
-    'aria-required': ariaAttr(isRequired || field?.isRequired),
-    'aria-readonly': ariaAttr(isReadOnly || field?.isReadOnly),
-    'aria-describedby': ariaDescribedBy || undefined
+    name: field.name,
+    disabled: isDisabled || field.isDisabled,
+    readOnly: isReadOnly || field.isReadOnly,
+    required: isRequired || field.isRequired,
+    'aria-invalid': ariaAttr(isInvalid || field.isInvalid),
+    'aria-required': ariaAttr(isRequired || field.isRequired),
+    'aria-readonly': ariaAttr(isReadOnly || field.isReadOnly),
+    'aria-describedby': ariaDescribedBy || undefined,
+    'aria-labelledby': field.labelId
   };
 }
 export const useFormControlContext = () => {

package/lib/module/form-control/useFormControl.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ariaAttr","FormControlContext","createContext","useFormControl","props","field","useFormControlContext","describedBy","hasFeedbackText","feedbackId","push","hasHelpText","helpTextId","ariaDescribedBy","join","isInvalid","isDisabled","isReadOnly","isRequired","cleanProps","id","undefined","disabled","readOnly","required","useContext"],"sourceRoot":"../../../src","sources":["form-control/useFormControl.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,8BAA8B;AAqBvD,OAAO,MAAMC,kBAAkB,gBAAGF,KAAK,CAACG,aAAa,CAAmC,CAAC,CAAC,CAAC;AAM3F;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAACC,KAA4B,EAAE;EAC3D,MAAMC,KAAK,GAAGC,qBAAqB,CAAC,CAAC;EACrC,MAAMC,WAAqB,GAAG,EAAE;EAEhC,IAAIF,KAAK,EAAEG,eAAe,IAAIH,KAAK,CAACI,UAAU,EAAE;IAC9CF,WAAW,CAACG,IAAI,CAACL,KAAK,CAACI,UAAU,CAAC;EACpC;EACA,IAAIJ,KAAK,EAAEM,WAAW,IAAIN,KAAK,CAACO,UAAU,EAAE;IAC1CL,WAAW,CAACG,IAAI,CAACL,KAAK,CAACO,UAAU,CAAC;EACpC;EACA,MAAMC,eAAe,GAAGN,WAAW,CAACO,IAAI,CAAC,GAAG,CAAC;EAE7C,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,UAAU;IAAEC,UAAU;IAAE,GAAGC;EAAW,CAAC,GAAGf,KAAK;EAC9E,MAAMgB,EAAE,GAAGhB,KAAK,CAACgB,EAAE,KAAKf,KAAK,EAAEe,EAAE,GAAG,GAAGf,KAAK,CAACe,EAAE,QAAQ,GAAGC,SAAS,CAAC;EAEpE,OAAO;IACL,GAAGF,UAAU;IACbC,EAAE;IACFE,QAAQ,EAAEN,UAAU,IAAIX,KAAK,EAAEW,UAAU;IACzCO,QAAQ,EAAEN,UAAU,IAAIZ,KAAK,EAAEY,UAAU;IACzCO,QAAQ,EAAEN,UAAU,IAAIb,KAAK,EAAEa,UAAU;IACzC,cAAc,EAAElB,QAAQ,CAACe,SAAS,IAAIV,KAAK,EAAEU,SAAS,CAAC;IACvD,eAAe,EAAEf,QAAQ,CAACkB,UAAU,IAAIb,KAAK,EAAEa,UAAU,CAAC;IAC1D,eAAe,EAAElB,QAAQ,CAACiB,UAAU,IAAIZ,KAAK,EAAEY,UAAU,CAAC;IAC1D,kBAAkB,EAAEJ,eAAe,IAAIQ;EACzC,CAAC;AACH;AAEA,OAAO,MAAMf,qBAAqB,GAAGA,CAAA,KAAM;EACzC,OAAOP,KAAK,CAAC0B,UAAU,CAACxB,kBAAkB,CAAC;AAC7C,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Platform","ariaAttr","FormControlContext","createContext","useFormControlRoot","props","id","idProp","name","isRequired","isInvalid","isDisabled","isReadOnly","htmlProps","reactId","useId","labelId","feedbackId","helpTextId","hasFeedbackText","setHasFeedbackText","useState","hasHelpText","setHasHelpText","inputRef","useRef","focusInput","useCallback","node","current","focus","context","Boolean","OS","useFormControl","field","useFormControlContext","describedBy","push","ariaDescribedBy","join","cleanProps","undefined","disabled","readOnly","required","useContext"],"sourceRoot":"../../../src","sources":["form-control/useFormControl.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/form-control/index.d.ts

@@ -1,2 +1,2 @@
-export { type FormControlContextValue, type FormControlFieldProps, type FormControlState, FormControlContext, useFormControl, useFormControlContext, } from './useFormControl';
+export { type FormControlContextValue, type FormControlFieldProps, type FormControlRootProps, type FormControlRootReturn, type FormControlState, FormControlContext, useFormControl, useFormControlContext, useFormControlRoot, } from './useFormControl';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/form-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,GACtB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC"}

package/lib/typescript/form-control/useFormControl.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type TextInput } from 'react-native';
 type HTMLProps = Record<string, unknown>;
 export interface FormControlState {
     isRequired: boolean;
@@ -9,22 +10,60 @@ export interface FormControlState {
 export interface FormControlContextValue extends FormControlState {
     hasFeedbackText: boolean;
     hasHelpText: boolean;
+    setHasFeedbackText: React.Dispatch<React.SetStateAction<boolean>>;
+    setHasHelpText: React.Dispatch<React.SetStateAction<boolean>>;
+    name?: string;
     id: string;
     labelId: string;
     feedbackId: string;
     helpTextId: string;
     htmlProps: HTMLProps;
+    /**
+     * @platform native — set by `Input.Field` / `Select.Trigger` for label press-to-focus.
+     * On web, use `<label htmlFor>` with a labelable control (`input`, `button`, `select`, …).
+     */
+    inputRef?: React.RefObject<TextInput | null>;
+    focusInput?: () => void;
 }
 export declare const FormControlContext: React.Context<Partial<FormControlContextValue>>;
 export interface FormControlFieldProps extends Partial<FormControlState> {
     id?: string;
 }
+/** Props for the FormControl root; known fields plus passthrough to the styled root box. */
+export type FormControlRootProps = Partial<FormControlState> & {
+    id?: string;
+    name?: string;
+} & HTMLProps;
+export interface FormControlRootReturn {
+    isRequired: boolean;
+    isInvalid: boolean;
+    isReadOnly: boolean;
+    isDisabled: boolean;
+    hasFeedbackText: boolean;
+    setHasFeedbackText: React.Dispatch<React.SetStateAction<boolean>>;
+    hasHelpText: boolean;
+    setHasHelpText: React.Dispatch<React.SetStateAction<boolean>>;
+    name?: string;
+    id: string;
+    labelId: string;
+    feedbackId: string;
+    helpTextId: string;
+    htmlProps: HTMLProps;
+    inputRef?: React.RefObject<TextInput | null>;
+    focusInput?: () => void;
+}
+/**
+ * Builds state and ids for a `Form` primitive root (`createFormRoot`). Pass the returned object
+ * (minus `htmlProps`) to `FormControlContext.Provider` — this is not a React context consumer hook.
+ */
+export declare function useFormControlRoot(props: FormControlRootProps): FormControlRootReturn;
 /**
- * Hook that merges local field props with the nearest FormControl context
+ * Hook that merges local field props with the nearest form field context
  * and returns normalised HTML / ARIA attributes for input elements.
  */
 export declare function useFormControl(props: FormControlFieldProps): {
     id: string | undefined;
+    name: string | undefined;
     disabled: boolean | undefined;
     readOnly: boolean | undefined;
     required: boolean | undefined;
@@ -32,6 +71,7 @@ export declare function useFormControl(props: FormControlFieldProps): {
     'aria-required': boolean | undefined;
     'aria-readonly': boolean | undefined;
     'aria-describedby': string | undefined;
+    'aria-labelledby': string | undefined;
 };
 export declare const useFormControlContext: () => Partial<FormControlContextValue>;
 export {};

package/lib/typescript/form-control/useFormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormControl.d.ts","sourceRoot":"","sources":["../../../src/form-control/useFormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,iDAA4D,CAAC;AAE5F,MAAM,WAAW,qBAAsB,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB;;;;;;;;;EA0B1D;AAED,eAAO,MAAM,qBAAqB,wCAEjC,CAAC"}
+{"version":3,"file":"useFormControl.d.ts","sourceRoot":"","sources":["../../../src/form-control/useFormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,kBAAkB,iDAA4D,CAAC;AAE5F,MAAM,WAAW,qBAAsB,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,4FAA4F;AAC5F,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,SAAS,CAAC;AAEd,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,GAAG,qBAAqB,CAkDrF;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB;;;;;;;;;;;EA4B1D;AAED,eAAO,MAAM,qBAAqB,wCAEjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/utils",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.30",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -9,7 +9,6 @@
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
-      "source": "./src/index.ts",
       "types": "./lib/typescript/index.d.ts",
       "import": "./lib/module/index.js",
       "require": "./lib/commonjs/index.js",
@@ -34,9 +33,17 @@
     "tailwind-merge": "3.5.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-web": "*"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-web": ">=0.19.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "*",

package/src/form-control/index.ts

@@ -1,8 +1,11 @@
 export {
   type FormControlContextValue,
   type FormControlFieldProps,
+  type FormControlRootProps,
+  type FormControlRootReturn,
   type FormControlState,
   FormControlContext,
   useFormControl,
   useFormControlContext,
+  useFormControlRoot,
 } from './useFormControl';

package/src/form-control/useFormControl.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Platform, type TextInput } from 'react-native';
 import { ariaAttr } from '../common/accessibilityUtils';
 
 type HTMLProps = Record<string, unknown>;
@@ -13,11 +14,20 @@ export interface FormControlState {
 export interface FormControlContextValue extends FormControlState {
   hasFeedbackText: boolean;
   hasHelpText: boolean;
+  setHasFeedbackText: React.Dispatch<React.SetStateAction<boolean>>;
+  setHasHelpText: React.Dispatch<React.SetStateAction<boolean>>;
+  name?: string;
   id: string;
   labelId: string;
   feedbackId: string;
   helpTextId: string;
   htmlProps: HTMLProps;
+  /**
+   * @platform native — set by `Input.Field` / `Select.Trigger` for label press-to-focus.
+   * On web, use `<label htmlFor>` with a labelable control (`input`, `button`, `select`, …).
+   */
+  inputRef?: React.RefObject<TextInput | null>;
+  focusInput?: () => void;
 }
 
 export const FormControlContext = React.createContext<Partial<FormControlContextValue>>({});
@@ -26,35 +36,118 @@ export interface FormControlFieldProps extends Partial<FormControlState> {
   id?: string;
 }
 
+/** Props for the FormControl root; known fields plus passthrough to the styled root box. */
+export type FormControlRootProps = Partial<FormControlState> & {
+  id?: string;
+  name?: string;
+} & HTMLProps;
+
+export interface FormControlRootReturn {
+  isRequired: boolean;
+  isInvalid: boolean;
+  isReadOnly: boolean;
+  isDisabled: boolean;
+  hasFeedbackText: boolean;
+  setHasFeedbackText: React.Dispatch<React.SetStateAction<boolean>>;
+  hasHelpText: boolean;
+  setHasHelpText: React.Dispatch<React.SetStateAction<boolean>>;
+  name?: string;
+  id: string;
+  labelId: string;
+  feedbackId: string;
+  helpTextId: string;
+  htmlProps: HTMLProps;
+  inputRef?: React.RefObject<TextInput | null>;
+  focusInput?: () => void;
+}
+
+/**
+ * Builds state and ids for a `Form` primitive root (`createFormRoot`). Pass the returned object
+ * (minus `htmlProps`) to `FormControlContext.Provider` — this is not a React context consumer hook.
+ */
+export function useFormControlRoot(props: FormControlRootProps): FormControlRootReturn {
+  const { id: idProp, name, isRequired, isInvalid, isDisabled, isReadOnly, ...htmlProps } = props;
+
+  const reactId = React.useId();
+  const id = (typeof idProp === 'string' && idProp !== '' ? idProp : null) ?? `field-${reactId}`;
+
+  const labelId = `${id}-label`;
+  const feedbackId = `${id}-feedback`;
+  const helpTextId = `${id}-helptext`;
+
+  /**
+   * Track whether the `FormErrorMessage` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasFeedbackText, setHasFeedbackText] = React.useState(false);
+
+  /**
+   * Track whether the `FormHelperText` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasHelpText, setHasHelpText] = React.useState(false);
+
+  const inputRef = React.useRef<TextInput | null>(null);
+
+  const focusInput = React.useCallback(() => {
+    const node = inputRef.current;
+    if (node != null && typeof node.focus === 'function') {
+      node.focus();
+    }
+  }, []);
+
+  const context: FormControlRootReturn = {
+    isRequired: Boolean(isRequired),
+    isInvalid: Boolean(isInvalid),
+    isReadOnly: Boolean(isReadOnly),
+    isDisabled: Boolean(isDisabled),
+    hasFeedbackText,
+    setHasFeedbackText,
+    hasHelpText,
+    setHasHelpText,
+    name,
+    id,
+    labelId,
+    feedbackId,
+    helpTextId,
+    htmlProps,
+    ...(Platform.OS !== 'web' ? { inputRef, focusInput } : {}),
+  };
+
+  return context;
+}
+
 /**
- * Hook that merges local field props with the nearest FormControl context
+ * Hook that merges local field props with the nearest form field context
  * and returns normalised HTML / ARIA attributes for input elements.
  */
 export function useFormControl(props: FormControlFieldProps) {
   const field = useFormControlContext();
   const describedBy: string[] = [];
 
-  if (field?.hasFeedbackText && field.feedbackId) {
+  if (field.hasFeedbackText && field.feedbackId) {
     describedBy.push(field.feedbackId);
   }
-  if (field?.hasHelpText && field.helpTextId) {
+  if (field.hasHelpText && field.helpTextId) {
     describedBy.push(field.helpTextId);
   }
   const ariaDescribedBy = describedBy.join(' ');
 
   const { isInvalid, isDisabled, isReadOnly, isRequired, ...cleanProps } = props;
-  const id = props.id ?? (field?.id ? `${field.id}-input` : undefined);
+  const id = props.id ?? (field.id ? `${field.id}-input` : undefined);
 
   return {
     ...cleanProps,
     id,
-    disabled: isDisabled || field?.isDisabled,
-    readOnly: isReadOnly || field?.isReadOnly,
-    required: isRequired || field?.isRequired,
-    'aria-invalid': ariaAttr(isInvalid || field?.isInvalid),
-    'aria-required': ariaAttr(isRequired || field?.isRequired),
-    'aria-readonly': ariaAttr(isReadOnly || field?.isReadOnly),
+    name: field.name,
+    disabled: isDisabled || field.isDisabled,
+    readOnly: isReadOnly || field.isReadOnly,
+    required: isRequired || field.isRequired,
+    'aria-invalid': ariaAttr(isInvalid || field.isInvalid),
+    'aria-required': ariaAttr(isRequired || field.isRequired),
+    'aria-readonly': ariaAttr(isReadOnly || field.isReadOnly),
     'aria-describedby': ariaDescribedBy || undefined,
+    'aria-labelledby': field.labelId,
   };
 }