@als-tp/als-react-ts-ui/dist/components/ALSForm/ALSForm.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import * as React from "react";
/**
 * Error object structure for form validation
 * Keys correspond to field names, values are error messages
 * Must match Base UI's Errors type
 */
export type ALSFormErrors = Record<string, string | string[]>;
/**
 * Form layout variants
 */
export type ALSFormLayout = "vertical" | "horizontal" | "inline";
/**
 * Form size variants
 */
export type ALSFormSize = "sm" | "md" | "lg";
/**
 * Field validation mode
 */
export type ALSFieldValidationMode = "onBlur" | "onChange";
/**
 * Props for ALSForm.Root component
 */
export interface ALSFormRootProps extends React.FormHTMLAttributes<HTMLFormElement> {
    /** Error object for server-side validation */
    errors?: ALSFormErrors;
    /** Callback when errors should be cleared */
    onClearErrors?: (errors: ALSFormErrors) => void;
    /** Form layout variant */
    layout?: ALSFormLayout;
    /** Form size variant */
    size?: ALSFormSize;
    /** Additional CSS class */
    className?: string;
    /** Form children */
    children?: React.ReactNode;
}
/**
 * Props for ALSForm.Field component
 */
export interface ALSFormFieldProps {
    /** Field name for form submission */
    name: string;
    /** Whether the field is disabled */
    disabled?: boolean;
    /** Whether the field is invalid */
    invalid?: boolean;
    /** Custom validation function */
    validate?: (value: unknown, formValues: Record<string, unknown>) => string | string[] | Promise<string | string[] | null> | null;
    /** When to trigger validation */
    validationMode?: ALSFieldValidationMode;
    /** Debounce time for onChange validation (ms) */
    validationDebounceTime?: number;
    /** Additional CSS class */
    className?: string;
    /** Field children */
    children?: React.ReactNode;
}
/**
 * Props for ALSForm.Label component
 */
export interface ALSFormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
    /** Whether the field is required (shows asterisk) */
    required?: boolean;
    /** Additional CSS class */
    className?: string;
    /** Label content */
    children?: React.ReactNode;
}
/**
 * Props for ALSForm.Control component (input)
 */
export interface ALSFormControlProps extends React.InputHTMLAttributes<HTMLInputElement> {
    /** Default value for uncontrolled input */
    defaultValue?: string | number | readonly string[];
    /** Callback fired when value changes */
    onValueChange?: (value: string) => void;
    /** Additional CSS class */
    className?: string;
}
/**
 * Props for ALSForm.Textarea component
 * Note: We define specific props instead of extending TextareaHTMLAttributes
 * to avoid type conflicts with Base UI's input-based Field.Control
 */
export interface ALSFormTextareaProps {
    /** Number of visible text columns */
    cols?: number;
    /** Number of visible text rows */
    rows?: number;
    /** Placeholder text */
    placeholder?: string;
    /** Whether the textarea is disabled */
    disabled?: boolean;
    /** Whether the textarea is read-only */
    readOnly?: boolean;
    /** Whether the textarea is required */
    required?: boolean;
    /** Maximum length of the textarea value */
    maxLength?: number;
    /** Minimum length of the textarea value */
    minLength?: number;
    /** Name attribute for form submission */
    name?: string;
    /** Default value for uncontrolled textarea */
    defaultValue?: string;
    /** Controlled value */
    value?: string;
    /** Autocomplete attribute */
    autoComplete?: string;
    /** Whether to auto-focus the textarea */
    autoFocus?: boolean;
    /** Additional CSS class */
    className?: string;
}
/**
 * Props for ALSForm.Error component
 */
export interface ALSFormErrorProps {
    /** Match specific validity state or always show */
    match?: boolean | "valid" | "badInput" | "customError" | "patternMismatch" | "rangeOverflow" | "rangeUnderflow" | "stepMismatch" | "tooLong" | "tooShort" | "typeMismatch" | "valueMissing";
    /** Additional CSS class */
    className?: string;
    /** Error message content */
    children?: React.ReactNode;
}
/**
 * Props for ALSForm.Description component
 */
export interface ALSFormDescriptionProps {
    /** Additional CSS class */
    className?: string;
    /** Description content */
    children?: React.ReactNode;
}
/**
 * Props for ALSForm.Actions component
 */
export interface ALSFormActionsProps {
    /** Alignment of actions */
    align?: "left" | "center" | "right" | "between";
    /** Additional CSS class */
    className?: string;
    /** Action buttons/content */
    children?: React.ReactNode;
}
/**
 * Props for ALSForm.Group component (groups related fields)
 */
export interface ALSFormGroupProps {
    /** Group title */
    title?: string;
    /** Group description */
    description?: string;
    /** Additional CSS class */
    className?: string;
    /** Group children */
    children?: React.ReactNode;
}
/**
 * ALSForm.Root - Main form container with error handling
 *
 * @example
 * ```tsx
 * <ALSForm.Root onSubmit={handleSubmit} errors={errors} onClearErrors={setErrors}>
 *   <ALSForm.Field name="email">
 *     <ALSForm.Label required>Email</ALSForm.Label>
 *     <ALSForm.Control type="email" placeholder="Enter email" />
 *     <ALSForm.Error match="valueMissing">Email is required</ALSForm.Error>
 *   </ALSForm.Field>
 * </ALSForm.Root>
 * ```
 */
export declare const ALSFormRoot: React.ForwardRefExoticComponent<ALSFormRootProps & React.RefAttributes<HTMLFormElement>>;
/**
 * ALSForm.Field - Wrapper for form field with validation
 */
export declare const ALSFormField: React.ForwardRefExoticComponent<ALSFormFieldProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSForm.Label - Accessible label for form control
 */
export declare const ALSFormLabel: React.ForwardRefExoticComponent<ALSFormLabelProps & React.RefAttributes<HTMLLabelElement>>;
/**
 * ALSForm.Control - Input control for the field
 */
export declare const ALSFormControl: React.ForwardRefExoticComponent<ALSFormControlProps & React.RefAttributes<HTMLInputElement>>;
/**
 * ALSForm.Textarea - Textarea control for the field
 * Note: Due to Base UI's Field.Control typing being input-focused,
 * we pass props explicitly to avoid event handler type conflicts.
 */
export declare const ALSFormTextarea: React.FC<ALSFormTextareaProps>;
/**
 * ALSForm.Error - Error message for field validation
 */
export declare const ALSFormError: React.FC<ALSFormErrorProps>;
/**
 * ALSForm.Description - Helper text for the field
 */
export declare const ALSFormDescription: React.FC<ALSFormDescriptionProps>;
/**
 * ALSForm.Actions - Container for form action buttons
 */
export declare const ALSFormActions: React.FC<ALSFormActionsProps>;
/**
 * ALSForm.Group - Groups related fields with optional title
 */
export declare const ALSFormGroup: React.FC<ALSFormGroupProps>;
/**
 * ALSForm.Row - Horizontal row for inline fields
 */
export interface ALSFormRowProps {
    /** Gap between fields */
    gap?: "sm" | "md" | "lg";
    /** Additional CSS class */
    className?: string;
    /** Row children */
    children?: React.ReactNode;
}
export declare const ALSFormRow: React.FC<ALSFormRowProps>;
//# sourceMappingURL=ALSForm.d.ts.map