import { default as React } from 'react';
import { FieldValues, FieldPath } from 'react-hook-form';
import { default as IFieldProps } from './IFieldProps';
/**
 * Field — context provider with optional react-hook-form integration.
 *
 * **Composition mode** (no `name` prop): renders a `flex flex-col gap` wrapper
 * and provides an empty FieldContext. Layout is fully user-controlled via
 * `<Box>` or `<Grid>` inside children.
 *
 * **Form integration mode** (`name` prop provided): wires RHF state into
 * FieldContext so descendants can consume it at any nesting depth:
 * - `<FieldLabel>` auto-receives `htmlFor={name}` from context
 * - `<FieldControl>` auto-injects `field` props + `id` + `error` into the wrapped control
 *
 * @param props {@link IFieldProps}
 * @returns The Field context provider with layout wrapper
 *
 * @example
 * ```tsx
 * // Basic composition
 * <Field>
 *   <FieldLabel htmlFor="card-name" required>Name on Card</FieldLabel>
 *   <FieldControl>
 *     <Input id="card-name" placeholder="Evil Rabbit" />
 *   </FieldControl>
 *   <FieldDescription>
 *     <Text type="muted">Enter your name as it appears on your card</Text>
 *   </FieldDescription>
 * </Field>
 * ```
 *
 * @example
 * ```tsx
 * // Form integration via FormProvider context
 * <Form form={form} onSubmit={onSubmit}>
 *   <Field name="email">
 *     <FieldLabel required>Email Address</FieldLabel>
 *     <FieldControl><Input type="email" /></FieldControl>
 *   </Field>
 * </Form>
 * ```
 *
 * @example
 * ```tsx
 * // Horizontal layout — label centers with input regardless of description/error below
 * <Field name="username">
 *   <Box className="grid grid-cols-[auto_1fr] gap-x-[var(--spacing-4)] gap-y-[var(--spacing-1)]">
 *     <FieldLabel htmlFor="username" required className="self-center">Username</FieldLabel>
 *     <FieldControl><Input id="username" /></FieldControl>
 *     <FieldDescription className="col-start-2">Choose a unique username</FieldDescription>
 *   </Box>
 * </Field>
 * ```
 *
 * @example
 * ```tsx
 * // Grid alignment — user composes with Grid/GridCell
 * <Field name="email">
 *   <Grid columns={12}>
 *     <GridCell columnSpan={4}><FieldLabel>Email</FieldLabel></GridCell>
 *     <GridCell columnSpan={8}>
 *       <FieldControl><Input type="email" /></FieldControl>
 *     </GridCell>
 *   </Grid>
 * </Field>
 * ```
 *
 * @example
 * ```tsx
 * // Deep nesting — compound pattern works at any depth
 * <Field name="email">
 *   <Box className="custom-wrapper">
 *     <FieldLabel>Email</FieldLabel>
 *     <div>
 *       <FieldControl><Input type="email" /></FieldControl>
 *     </div>
 *   </Box>
 * </Field>
 * ```
 *
 * @example
 * ```tsx
 * // Custom render prop — full control, wrapped in FormControl (form integration)
 * <Field name="active" render={({ field }) => (
 *   <Switch checked={field?.value} onCheckedChange={field?.onChange} />
 * )} />
 * ```
 *
 */
declare const Field: {
    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ children, columnSpan, name, control, render, orientation, isLoading, }: IFieldProps<TFieldValues, TName>): React.ReactElement;
    displayName: string;
};
export default Field;