@cdx-ui/primitives 0.0.1-alpha.29 → 0.0.1-alpha.30

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const createFormError: <T>(BaseFormError: React.ComponentType<T>) => React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormError.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormError.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,eAAe,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eACtC,KAAK,CAAC,SAAS;iCA2B9C,CAAC"}

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const createFormErrorIcon: <T>(BaseFormErrorIcon: React.ComponentType<T>) => React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormErrorIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormErrorIcon.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormErrorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,mBAAmB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAC9C,KAAK,CAAC,SAAS;iCAI9C,CAAC"}

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const createFormErrorText: <T>(BaseFormErrorText: React.ComponentType<T>) => React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormErrorText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormErrorText.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormErrorText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,mBAAmB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAC9C,KAAK,CAAC,SAAS;iCAI9C,CAAC"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { IFormFieldProps } from './types';
+export declare const createFormField: <T>(BaseFormField: React.ComponentType<T>) => React.ForwardRefExoticComponent<IFormFieldProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormField.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,eAAe,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAEb,KAAK,CAAC,SAAS;iCAmBxE,CAAC"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const createFormHelper: <T>(BaseFormHelper: React.ComponentType<T>) => React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormHelper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormHelper.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,gBAAgB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eACxC,KAAK,CAAC,SAAS;iCAuB9C,CAAC"}

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const createFormHelperText: <T>(BaseFormHelperText: React.ComponentType<T>) => React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormHelperText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormHelperText.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormHelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,oBAAoB,GAAI,CAAC,EAAG,oBAAoB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAChD,KAAK,CAAC,SAAS;iCAI9C,CAAC"}

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

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { IFormLabelProps } from './types';
+export declare const createFormLabel: <T>({ Label: BaseFormLabel }: {
+    Label: React.ComponentType<T>;
+}) => React.ForwardRefExoticComponent<IFormLabelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormLabel.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,0BAA0B;IAAE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;CAAE;eAC1C,KAAK,CAAC,SAAS;iCAsBjE,CAAC"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { IFormProps } from './types';
+export declare const createFormRoot: <T>(BaseFormRoot: React.ComponentType<T>) => React.ForwardRefExoticComponent<IFormProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createFormRoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFormRoot.d.ts","sourceRoot":"","sources":["../../../src/form-control/createFormRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,cAAc,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAEhB,KAAK,CAAC,SAAS;iCAKnE,CAAC"}

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

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { IFormComponentType } from './types';
+export type { IFormProps, IFormFieldProps, IFormLabelProps, IFormHelperProps, IFormHelperTextProps, IFormErrorProps, IFormErrorTextProps, IFormErrorIconProps, IFormComponentType, } from './types';
+export declare function createForm<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText>({ Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText, }: {
+    Root: React.ComponentType<Root>;
+    Field: React.ComponentType<Field>;
+    Error: React.ComponentType<Error>;
+    ErrorText: React.ComponentType<ErrorText>;
+    ErrorIcon: React.ComponentType<ErrorIcon>;
+    Label: React.ComponentType<Label>;
+    Helper: React.ComponentType<Helper>;
+    HelperText: React.ComponentType<HelperText>;
+}): IFormComponentType<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-control/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EACV,UAAU,EACV,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AAEjB,wBAAgB,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,EAC9F,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,GACX,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CAC7C,GA4BO,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAC9F"}

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

@@ -0,0 +1,73 @@
+import type React from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+/**
+ * Props for the Form container (`<form>` on web, `<View>` on RN).
+ * Does NOT provide field-level context — use `Form.Field` for that.
+ *
+ * Web-only submit props (`onSubmit`, `action`, `method`) belong in the
+ * platform-specific base component (`FormRoot.web.tsx`), not here.
+ */
+export interface IFormProps {
+}
+/**
+ * Props for a single form field (`Form.Field`).
+ * Provides field-level context (name, validation state, ids) to children.
+ *
+ * **Initial focus:** use `autoFocus` on `Input.Field` (or your control). `TextInput` / DOM
+ * inputs support it natively. Do not rely on `Form.Field` for autofocus — it does not forward
+ * to a single child.
+ *
+ * **Submit UX:** "focus first invalid on error" needs form-level validation state; not built in yet.
+ */
+export interface IFormFieldProps extends ViewProps {
+    /** Unique id for this field. Auto-generated if not provided. */
+    readonly id?: string;
+    /**
+     * Field name for form submission. Passed through context so child inputs
+     * automatically receive it as their `name` attribute for `FormData` support.
+     */
+    readonly name?: string;
+    /** If true, the field is marked as invalid. Controls error visibility. */
+    readonly isInvalid?: boolean;
+    /** If true, the field is marked as required. Shows asterisk on label. */
+    readonly isRequired?: boolean;
+    /** If true, the field is disabled. */
+    readonly isDisabled?: boolean;
+    /** If true, the field is read-only. */
+    readonly isReadOnly?: boolean;
+}
+export interface IFormLabelProps extends TextProps {
+    /**
+     * Associates the label with a control `id` on web (`<label htmlFor>`).
+     * If omitted, defaults to the same id `Input.Field` gets from form context: `fieldId + "-input"`.
+     */
+    readonly htmlFor?: string;
+    /**
+     * Element to render after the label text when the field is required.
+     * Rendered by the primitive (which owns the form-control context) so the
+     * styled layer never needs to read `FormControlContext` across packages.
+     */
+    readonly requiredIndicator?: React.ReactNode;
+}
+export interface IFormHelperProps extends ViewProps {
+}
+export interface IFormHelperTextProps extends TextProps {
+}
+export interface IFormErrorProps extends ViewProps {
+}
+export interface IFormErrorTextProps extends TextProps {
+}
+export interface IFormErrorIconProps extends ViewProps {
+}
+export type IFormComponentType<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText> = React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Root> & IFormProps> & {
+    Field: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Field> & IFormFieldProps>;
+    Label: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Label> & IFormLabelProps>;
+    Helper: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Helper> & IFormHelperProps>;
+    HelperText: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<HelperText> & IFormHelperTextProps>;
+    Error: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Error> & IFormErrorProps>;
+    ErrorText: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<ErrorText> & IFormErrorTextProps>;
+    ErrorIcon: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<ErrorIcon> & IFormErrorIconProps>;
+};
+type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/form-control/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;CAAG;AAE9B;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,sCAAsC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9C;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS;CAAG;AAEtD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;CAAG;AAEzD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;CAAG;AAEzD,MAAM,MAAM,kBAAkB,CAC5B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,IACR,KAAK,CAAC,yBAAyB,CAAC,8BAA8B,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,GAAG;IACvF,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,8BAA8B,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,CAAC;IAChG,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,8BAA8B,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,CAAC;IAChG,MAAM,EAAE,KAAK,CAAC,yBAAyB,CACrC,8BAA8B,CAAC,MAAM,CAAC,GAAG,gBAAgB,CAC1D,CAAC;IACF,UAAU,EAAE,KAAK,CAAC,yBAAyB,CACzC,8BAA8B,CAAC,UAAU,CAAC,GAAG,oBAAoB,CAClE,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,8BAA8B,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,CAAC;IAChG,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACxC,8BAA8B,CAAC,SAAS,CAAC,GAAG,mBAAmB,CAChE,CAAC;IACF,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACxC,8BAA8B,CAAC,SAAS,CAAC,GAAG,mBAAmB,CAChE,CAAC;CACH,CAAC;AAEF,KAAK,8BAA8B,CAAC,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC"}

package/lib/typescript/index.d.ts

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './button';
 export * from './checkbox';
 export * from './dialog';
+export * from './form-control';
 export * from './input';
 export * from './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,UAAU,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACnE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,UAAU,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACnE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/typescript/input/createInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createInputField.d.ts","sourceRoot":"","sources":["../../../src/input/createInputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,gBAAgB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,gFA8FxE,CAAC"}
+{"version":3,"file":"createInputField.d.ts","sourceRoot":"","sources":["../../../src/input/createInputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,gBAAgB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,gFAoGxE,CAAC"}

package/lib/typescript/select/createSelectRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSelectRoot.d.ts","sourceRoot":"","sources":["../../../src/select/createSelectRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,UAAU,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,iFA0HlE,CAAC"}
+{"version":3,"file":"createSelectRoot.d.ts","sourceRoot":"","sources":["../../../src/select/createSelectRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,UAAU,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,iFA8HlE,CAAC"}

package/lib/typescript/select/createSelectTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/select/createSelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,aAAa,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAYxD,CAAC,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS;iCA+IhF,CAAC"}
+{"version":3,"file":"createSelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/select/createSelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,aAAa,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;eAaxD,CAAC,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS;iCAiMhF,CAAC"}

package/lib/typescript/select/types.d.ts

@@ -28,6 +28,8 @@ export interface ISelectTriggerProps extends PressableProps {
     isFocused?: boolean;
     isFocusVisible?: boolean;
     isDisabled?: boolean;
+    /** @platform web — merged with form field helper/error ids */
+    'aria-describedby'?: string;
 }
 export interface ISelectValueProps {
     placeholder?: string;
@@ -78,6 +80,8 @@ export interface SelectContextValue {
     activeValue: string | undefined;
     setActiveValue: (value: string | undefined) => void;
     accessibilityLabel: string | undefined;
+    /** From `Form.Field` via `useFormControl` on the select root (helper/error `aria-describedby`). */
+    ariaDescribedBy?: string;
 }
 export type ISelectComponentType<RootProps, TriggerProps, ValueProps, IconProps, ContentProps, ItemProps, ItemLabelProps, TriggerRef = unknown, ValueRef = unknown> = React.ForwardRefExoticComponent<PropsWithoutRef<RootProps & ISelectProps> & RefAttributes<unknown>> & {
     Trigger: React.ForwardRefExoticComponent<PropsWithoutRef<TriggerProps & ISelectTriggerProps> & RefAttributes<TriggerRef>>;

package/lib/typescript/select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/select/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/select/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-alpha.29",
+  "version": "0.0.1-alpha.30",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -52,7 +52,7 @@
     "@react-native-aria/interactions": "^0.2.16",
     "@react-stately/checkbox": "3.7.4",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/utils": "0.0.1-alpha.29"
+    "@cdx-ui/utils": "0.0.1-alpha.30"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/form-control/createFormError.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+
+export const createFormError = <T,>(BaseFormError: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
+    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
+
+    const visible = Boolean(isInvalid && children);
+
+    React.useEffect(() => {
+      if (!visible) {
+        setHasFeedbackText?.(false);
+        return undefined;
+      }
+      setHasFeedbackText?.(true);
+      return () => {
+        setHasFeedbackText?.(false);
+      };
+    }, [setHasFeedbackText, visible]);
+
+    return visible ? (
+      <BaseFormError
+        ref={ref}
+        {...(props as T)}
+        id={feedbackId}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="assertive"
+      >
+        {children}
+      </BaseFormError>
+    ) : null;
+  });

package/src/form-control/createFormErrorIcon.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+export const createFormErrorIcon = <T,>(BaseFormErrorIcon: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
+    <BaseFormErrorIcon ref={ref} {...(props as T)}>
+      {children}
+    </BaseFormErrorIcon>
+  ));

package/src/form-control/createFormErrorText.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+export const createFormErrorText = <T,>(BaseFormErrorText: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
+    <BaseFormErrorText ref={ref} {...(props as T)}>
+      {children}
+    </BaseFormErrorText>
+  ));

package/src/form-control/createFormField.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import { useFormControlRoot, FormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFormFieldProps } from './types';
+
+export const createFormField = <T,>(BaseFormField: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, ...props }: IFormFieldProps & { children?: React.ReactNode }, ref?: unknown) => {
+      const { htmlProps, ...context } = useFormControlRoot(props);
+
+      return (
+        <FormControlContext.Provider value={context}>
+          <BaseFormField
+            ref={ref}
+            {...(htmlProps as T)}
+            {...dataAttributes({
+              disabled: context.isDisabled,
+              invalid: context.isInvalid,
+              required: context.isRequired,
+            })}
+          >
+            {children}
+          </BaseFormField>
+        </FormControlContext.Provider>
+      );
+    },
+  );

package/src/form-control/createFormHelper.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+
+export const createFormHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
+    const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
+
+    React.useEffect(() => {
+      if (isInvalid) {
+        setHasHelpText?.(false);
+        return undefined;
+      }
+      setHasHelpText?.(true);
+      return () => {
+        setHasHelpText?.(false);
+      };
+    }, [setHasHelpText, isInvalid]);
+
+    if (isInvalid) {
+      return null;
+    }
+
+    return (
+      <BaseFormHelper ref={ref} {...(props as T)} id={helpTextId}>
+        {children}
+      </BaseFormHelper>
+    );
+  });

package/src/form-control/createFormHelperText.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+export const createFormHelperText = <T,>(BaseFormHelperText: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
+    <BaseFormHelperText ref={ref} {...(props as T)}>
+      {children}
+    </BaseFormHelperText>
+  ));

package/src/form-control/createFormLabel.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFormLabelProps } from './types';
+
+export const createFormLabel = <T,>({ Label: BaseFormLabel }: { Label: React.ComponentType<T> }) =>
+  forwardRef<unknown, IFormLabelProps & { children?: React.ReactNode }>(
+    ({ children, htmlFor: htmlForProp, requiredIndicator, ...props }, ref) => {
+      const field = useFormControlContext();
+      const fieldId = field.id;
+      const labelId = field.labelId;
+
+      /** Must match `useFormControl` default: `props.id ?? \`${field.id}-input\``. */
+      const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
+
+      return (
+        <BaseFormLabel
+          ref={ref}
+          {...(props as T)}
+          id={labelId}
+          htmlFor={htmlFor}
+          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
+        >
+          {children}
+          {field.isRequired ? requiredIndicator : null}
+        </BaseFormLabel>
+      );
+    },
+  );

package/src/form-control/createFormRoot.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import type { IFormProps } from './types';
+
+// TODO: Handle web submission (button type submit)
+
+export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, ...props }: IFormProps & { children?: React.ReactNode }, ref?: unknown) => (
+      <BaseFormRoot ref={ref} {...(props as T)}>
+        {children}
+      </BaseFormRoot>
+    ),
+  );

package/src/form-control/index.tsx

@@ -0,0 +1,71 @@
+import type React from 'react';
+import { createFormError } from './createFormError';
+import { createFormErrorText } from './createFormErrorText';
+import { createFormErrorIcon } from './createFormErrorIcon';
+import { createFormField } from './createFormField';
+import { createFormHelper } from './createFormHelper';
+import { createFormHelperText } from './createFormHelperText';
+import { createFormLabel } from './createFormLabel';
+import { createFormRoot } from './createFormRoot';
+import type { IFormComponentType } from './types';
+
+export type {
+  IFormProps,
+  IFormFieldProps,
+  IFormLabelProps,
+  IFormHelperProps,
+  IFormHelperTextProps,
+  IFormErrorProps,
+  IFormErrorTextProps,
+  IFormErrorIconProps,
+  IFormComponentType,
+} from './types';
+
+export function createForm<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText>({
+  Root,
+  Field,
+  Error,
+  ErrorText,
+  ErrorIcon,
+  Label,
+  Helper,
+  HelperText,
+}: {
+  Root: React.ComponentType<Root>;
+  Field: React.ComponentType<Field>;
+  Error: React.ComponentType<Error>;
+  ErrorText: React.ComponentType<ErrorText>;
+  ErrorIcon: React.ComponentType<ErrorIcon>;
+  Label: React.ComponentType<Label>;
+  Helper: React.ComponentType<Helper>;
+  HelperText: React.ComponentType<HelperText>;
+}) {
+  const FormRoot = createFormRoot(Root);
+  FormRoot.displayName = 'FormPrimitive';
+
+  const FormField = createFormField(Field);
+  FormField.displayName = 'FormPrimitive.Field';
+  const FormLabel = createFormLabel({ Label });
+  const FormHelper = createFormHelper(Helper);
+  const FormHelperText = createFormHelperText(HelperText);
+  const FormError = createFormError(Error);
+  const FormErrorText = createFormErrorText(ErrorText);
+  const FormErrorIcon = createFormErrorIcon(ErrorIcon);
+
+  FormLabel.displayName = 'FormPrimitive.Label';
+  FormHelper.displayName = 'FormPrimitive.Helper';
+  FormHelperText.displayName = 'FormPrimitive.HelperText';
+  FormError.displayName = 'FormPrimitive.Error';
+  FormErrorText.displayName = 'FormPrimitive.ErrorText';
+  FormErrorIcon.displayName = 'FormPrimitive.ErrorIcon';
+
+  return Object.assign(FormRoot, {
+    Field: FormField,
+    Label: FormLabel,
+    Helper: FormHelper,
+    HelperText: FormHelperText,
+    Error: FormError,
+    ErrorText: FormErrorText,
+    ErrorIcon: FormErrorIcon,
+  }) as IFormComponentType<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText>;
+}

package/src/form-control/types.tsx

@@ -0,0 +1,92 @@
+import type React from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+
+/**
+ * Props for the Form container (`<form>` on web, `<View>` on RN).
+ * Does NOT provide field-level context — use `Form.Field` for that.
+ *
+ * Web-only submit props (`onSubmit`, `action`, `method`) belong in the
+ * platform-specific base component (`FormRoot.web.tsx`), not here.
+ */
+export interface IFormProps {}
+
+/**
+ * Props for a single form field (`Form.Field`).
+ * Provides field-level context (name, validation state, ids) to children.
+ *
+ * **Initial focus:** use `autoFocus` on `Input.Field` (or your control). `TextInput` / DOM
+ * inputs support it natively. Do not rely on `Form.Field` for autofocus — it does not forward
+ * to a single child.
+ *
+ * **Submit UX:** "focus first invalid on error" needs form-level validation state; not built in yet.
+ */
+export interface IFormFieldProps extends ViewProps {
+  /** Unique id for this field. Auto-generated if not provided. */
+  readonly id?: string;
+  /**
+   * Field name for form submission. Passed through context so child inputs
+   * automatically receive it as their `name` attribute for `FormData` support.
+   */
+  readonly name?: string;
+  /** If true, the field is marked as invalid. Controls error visibility. */
+  readonly isInvalid?: boolean;
+  /** If true, the field is marked as required. Shows asterisk on label. */
+  readonly isRequired?: boolean;
+  /** If true, the field is disabled. */
+  readonly isDisabled?: boolean;
+  /** If true, the field is read-only. */
+  readonly isReadOnly?: boolean;
+}
+
+export interface IFormLabelProps extends TextProps {
+  /**
+   * Associates the label with a control `id` on web (`<label htmlFor>`).
+   * If omitted, defaults to the same id `Input.Field` gets from form context: `fieldId + "-input"`.
+   */
+  readonly htmlFor?: string;
+  /**
+   * Element to render after the label text when the field is required.
+   * Rendered by the primitive (which owns the form-control context) so the
+   * styled layer never needs to read `FormControlContext` across packages.
+   */
+  readonly requiredIndicator?: React.ReactNode;
+}
+
+export interface IFormHelperProps extends ViewProps {}
+
+export interface IFormHelperTextProps extends TextProps {}
+
+export interface IFormErrorProps extends ViewProps {}
+
+export interface IFormErrorTextProps extends TextProps {}
+
+export interface IFormErrorIconProps extends ViewProps {}
+
+export type IFormComponentType<
+  Root,
+  Field,
+  Error,
+  ErrorText,
+  ErrorIcon,
+  Label,
+  Helper,
+  HelperText,
+> = React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Root> & IFormProps> & {
+  Field: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Field> & IFormFieldProps>;
+  Label: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Label> & IFormLabelProps>;
+  Helper: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<Helper> & IFormHelperProps
+  >;
+  HelperText: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<HelperText> & IFormHelperTextProps
+  >;
+  Error: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Error> & IFormErrorProps>;
+  ErrorText: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<ErrorText> & IFormErrorTextProps
+  >;
+  ErrorIcon: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<ErrorIcon> & IFormErrorIconProps
+  >;
+};
+
+type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './button';
 export * from './checkbox';
 export * from './dialog';
+export * from './form-control';
 export * from './input';
 export * from './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';