@arolariu/components/dist/components/ui/field.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import * as React from "react";
/** Supported layouts for {@link Field}. */
export type FieldOrientation = "vertical" | "horizontal" | "responsive";
/** Supported legend render styles for {@link FieldLegend}. */
export type FieldLegendVariant = "legend" | "label";
/** Shape of error objects accepted by {@link FieldError}. */
export interface FieldErrorItem {
    /** Human-readable validation error message. @default undefined */
    message?: string;
}
/**
 * Props for the {@link FieldSet} component.
 */
export type FieldSetProps = React.ComponentPropsWithoutRef<"fieldset">;
/**
 * Props for the {@link FieldLegend} component.
 */
export interface FieldLegendProps extends React.ComponentPropsWithoutRef<"legend"> {
    /** Visual treatment used for the legend content. @default "legend" */
    variant?: FieldLegendVariant;
}
/**
 * Props for the {@link FieldGroup} component.
 */
export type FieldGroupProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Props for the {@link Field} component.
 */
export interface FieldProps extends React.ComponentPropsWithoutRef<"div"> {
    /** Layout used to arrange labels and controls. @default "vertical" */
    orientation?: FieldOrientation;
}
/**
 * Props for the {@link FieldContent} component.
 */
export type FieldContentProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Props for the {@link FieldLabel} component.
 */
export type FieldLabelProps = React.ComponentPropsWithoutRef<"label">;
/**
 * Props for the {@link FieldTitle} component.
 */
export type FieldTitleProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Props for the {@link FieldDescription} component.
 */
export type FieldDescriptionProps = React.ComponentPropsWithoutRef<"p">;
/**
 * Props for the {@link FieldSeparator} component.
 */
export type FieldSeparatorProps = React.ComponentPropsWithoutRef<"div">;
/**
 * Props for the {@link FieldError} component.
 */
export interface FieldErrorProps extends React.ComponentPropsWithoutRef<"div"> {
    /** Validation errors rendered when children are not provided. @default undefined */
    errors?: Array<FieldErrorItem | undefined>;
}
/**
 * Groups related controls within a semantic fieldset.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<fieldset>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldSet>
 *   <FieldLegend>Preferences</FieldLegend>
 * </FieldSet>
 * ```
 *
 * @see {@link FieldSetProps} for available props
 */
declare const FieldSet: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
/**
 * Labels a grouped set of controls within {@link FieldSet}.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<legend>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldLegend variant='label'>Billing address</FieldLegend>
 * ```
 *
 * @see {@link FieldLegendProps} for available props
 */
declare const FieldLegend: React.ForwardRefExoticComponent<FieldLegendProps & React.RefAttributes<HTMLLegendElement>>;
/**
 * Stacks multiple field rows under a shared container.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldGroup>
 *   <Field />
 * </FieldGroup>
 * ```
 *
 * @see {@link FieldGroupProps} for available props
 */
declare const FieldGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Creates a styled field row for labels, descriptions, and controls.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <Field orientation='responsive'>...</Field>
 * ```
 *
 * @see {@link FieldProps} for available props
 */
declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Wraps field controls and supporting content.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldContent>{control}</FieldContent>
 * ```
 *
 * @see {@link FieldContentProps} for available props
 */
declare const FieldContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders the label associated with a form control.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<label>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldLabel htmlFor='email'>Email</FieldLabel>
 * ```
 *
 * @see {@link FieldLabelProps} for available props
 */
declare const FieldLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
/**
 * Displays the leading title content for a field row.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldTitle>Account</FieldTitle>
 * ```
 *
 * @see {@link FieldTitleProps} for available props
 */
declare const FieldTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders supplementary descriptive text for a field.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<p>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldDescription>Used for account recovery.</FieldDescription>
 * ```
 *
 * @see {@link FieldDescriptionProps} for available props
 */
declare const FieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
/**
 * Separates field sections with optional inline content.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldSeparator>or</FieldSeparator>
 * ```
 *
 * @see {@link FieldSeparatorProps} for available props
 */
declare const FieldSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Presents validation feedback for a field.
 *
 * @remarks
 * - Pure CSS component (no Base UI primitive)
 * - Renders a `<div>` element when content exists
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example
 * ```tsx
 * <FieldError errors={[{message: "Required"}]} />
 * ```
 *
 * @see {@link FieldErrorProps} for available props
 */
declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
//# sourceMappingURL=field.d.ts.map