Form Controls

/**
 * Provides button behavior and accessibility
 * @param props - Button configuration options
 * @param ref - Ref to the button element
 * @returns Button props and state
 */
function useButton(props: AriaButtonProps, ref: RefObject<Element>): ButtonAria;

interface AriaButtonProps {
  /** Whether the button is disabled */
  isDisabled?: boolean;
  /** Handler called when the button is pressed */
  onPress?: (e: PressEvent) => void;
  /** Handler called when a press interaction starts */
  onPressStart?: (e: PressEvent) => void;
  /** Handler called when a press interaction ends */
  onPressEnd?: (e: PressEvent) => void;
  /** Handler called when the press is released over the target */
  onPressUp?: (e: PressEvent) => void;
  /** Handler called when a press interaction changes */
  onPressChange?: (isPressed: boolean) => void;
  /** Whether press events should be disabled */
  preventFocusOnPress?: boolean;
  /** Whether the button should receive focus on press (mobile) */
  shouldCancelOnPointerExit?: boolean;
  /** Text description of the button for accessibility */
  'aria-label'?: string;
  /** ID of element that labels the button */
  'aria-labelledby'?: string;
  /** ID of element that describes the button */
  'aria-describedby'?: string;
}

interface ButtonAria {
  /** Props to spread on the button element */
  buttonProps: DOMAttributes<Element>;
  /** Whether the button is currently pressed */
  isPressed: boolean;
}

import { useButton } from "react-aria";

function Button(props) {
  let ref = useRef();
  let { buttonProps, isPressed } = useButton(props, ref);

  return (
    <button
      {...buttonProps}
      ref={ref}
      className={`button ${isPressed ? 'pressed' : ''}`}
    >
      {props.children}
    </button>
  );
}

/**
 * Provides toggle button behavior and accessibility
 * @param props - Toggle button configuration
 * @param ref - Ref to the button element
 * @returns Toggle button props and state
 */
function useToggleButton(props: AriaToggleButtonProps, ref: RefObject<Element>): ButtonAria;

interface AriaToggleButtonProps extends AriaButtonProps {
  /** Whether the button is selected (pressed) */
  isSelected?: boolean;
  /** Handler called when the button's selection state changes */
  onChange?: (isSelected: boolean) => void;
}

/**
 * Provides toggle button group behavior
 * @param props - Toggle button group configuration
 * @param ref - Ref to the group element
 * @returns Toggle button group props
 */
function useToggleButtonGroup(props: AriaToggleButtonGroupProps, ref: RefObject<Element>): ToggleButtonGroupAria;

/**
 * Provides individual toggle button behavior within a group
 * @param props - Toggle button item configuration
 * @param state - Toggle button group state
 * @param ref - Ref to the button element
 * @returns Toggle button item props
 */
function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemProps, state: ToggleButtonGroupState, ref: RefObject<Element>): ButtonAria;

interface AriaToggleButtonGroupProps {
  /** Whether multiple buttons can be selected */
  selectionMode?: 'single' | 'multiple';
  /** Currently selected keys */
  selectedKeys?: Iterable<Key>;
  /** Default selected keys (uncontrolled) */
  defaultSelectedKeys?: Iterable<Key>;
  /** Handler called when selection changes */
  onSelectionChange?: (keys: Set<Key>) => void;
  /** Whether the group is disabled */
  isDisabled?: boolean;
  /** Orientation of the button group */
  orientation?: Orientation;
}

/**
 * Provides text field behavior and accessibility
 * @param props - Text field configuration
 * @param ref - Ref to the input element
 * @returns Text field props and state
 */
function useTextField(props: AriaTextFieldProps, ref: RefObject<Element>): TextFieldAria;

interface AriaTextFieldProps extends AriaTextFieldOptions {
  /** Current value of the text field */
  value?: string;
  /** Default value (uncontrolled) */
  defaultValue?: string;
  /** Handler called when the value changes */
  onChange?: (value: string) => void;
  /** Placeholder text */
  placeholder?: string;
  /** Whether the field is disabled */
  isDisabled?: boolean;
  /** Whether the field is read-only */
  isReadOnly?: boolean;
  /** Whether the field is required */
  isRequired?: boolean;
  /** Type of validation state */
  validationState?: 'valid' | 'invalid';
  /** Auto-complete hint */
  autoComplete?: string;
  /** Maximum number of characters */
  maxLength?: number;
  /** Minimum number of characters */
  minLength?: number;
  /** Pattern for validation */
  pattern?: string;
  /** Input type */
  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password';
  /** Input mode */
  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
}

interface TextFieldAria {
  /** Props for the text field label element */
  labelProps: DOMAttributes<Element>;
  /** Props for the input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
  /** Props for the description element */
  descriptionProps: DOMAttributes<Element>;
  /** Props for the error message element */
  errorMessageProps: DOMAttributes<Element>;
}

/**
 * Provides checkbox behavior and accessibility
 * @param props - Checkbox configuration
 * @param ref - Ref to the input element
 * @returns Checkbox props and state
 */
function useCheckbox(props: AriaCheckboxProps, ref: RefObject<Element>): CheckboxAria;

interface AriaCheckboxProps {
  /** Whether the checkbox is selected */
  isSelected?: boolean;
  /** Default selection state (uncontrolled) */
  defaultSelected?: boolean;
  /** Whether the checkbox is in an indeterminate state */
  isIndeterminate?: boolean;
  /** Whether the checkbox is disabled */
  isDisabled?: boolean;
  /** Whether the checkbox is read-only */
  isReadOnly?: boolean;
  /** Handler called when selection changes */
  onChange?: (isSelected: boolean) => void;
  /** Value of the checkbox */
  value?: string;
  /** Name of the checkbox (for forms) */
  name?: string;
  /** The checkbox's validation state */
  validationState?: 'valid' | 'invalid';
  /** Whether the checkbox is required */
  isRequired?: boolean;
}

interface CheckboxAria {
  /** Props for the input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
  /** Props for the label wrapper */
  labelProps: LabelHTMLAttributes<HTMLLabelElement>;
  /** Whether the checkbox is selected */
  isSelected: boolean;
  /** Whether the checkbox is in an invalid state */
  isInvalid: boolean;
  /** Whether the checkbox is disabled */
  isDisabled: boolean;
  /** Whether the checkbox is read-only */
  isReadOnly: boolean;
  /** Whether the checkbox is required */
  isRequired: boolean;
  /** Whether the checkbox is pressed */
  isPressed: boolean;
}

/**
 * Provides checkbox group behavior
 * @param props - Checkbox group configuration
 * @param ref - Ref to the group element
 * @returns Checkbox group props and state
 */
function useCheckboxGroup(props: AriaCheckboxGroupProps, ref: RefObject<Element>): CheckboxGroupAria;

/**
 * Provides individual checkbox behavior within a group
 * @param props - Checkbox configuration within group
 * @param state - Checkbox group state
 * @param ref - Ref to the input element
 * @returns Checkbox props for group item
 */
function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, ref: RefObject<Element>): CheckboxAria;

interface AriaCheckboxGroupProps {
  /** Currently selected values */
  value?: string[];
  /** Default selected values (uncontrolled) */
  defaultValue?: string[];
  /** Handler called when selection changes */
  onChange?: (value: string[]) => void;
  /** Whether the group is disabled */
  isDisabled?: boolean;
  /** Whether the group is read-only */
  isReadOnly?: boolean;
  /** Whether the group is required */
  isRequired?: boolean;
  /** Validation state of the group */
  validationState?: 'valid' | 'invalid';
  /** Name for the checkbox group */
  name?: string;
  /** Label for the group */
  label?: ReactNode;
  /** Description for the group */
  description?: ReactNode;
  /** Error message for the group */
  errorMessage?: ReactNode;
}

/**
 * Provides radio button behavior and accessibility
 * @param props - Radio button configuration
 * @param ref - Ref to the input element
 * @returns Radio button props and state
 */
function useRadio(props: AriaRadioProps, ref: RefObject<Element>): RadioAria;

/**
 * Provides radio group behavior
 * @param props - Radio group configuration
 * @param ref - Ref to the group element
 * @returns Radio group props and state
 */
function useRadioGroup(props: AriaRadioGroupProps, ref: RefObject<Element>): RadioGroupAria;

interface AriaRadioProps {
  /** Value of the radio button */
  value: string;
  /** Whether the radio is disabled */
  isDisabled?: boolean;
  /** Whether the radio is required */
  isRequired?: boolean;
  /** Validation state */
  validationState?: 'valid' | 'invalid';
}

interface AriaRadioGroupProps {
  /** Currently selected value */
  value?: string;
  /** Default selected value (uncontrolled) */
  defaultValue?: string;
  /** Handler called when selection changes */
  onChange?: (value: string) => void;
  /** Whether the group is disabled */
  isDisabled?: boolean;
  /** Whether the group is read-only */
  isReadOnly?: boolean;
  /** Whether the group is required */
  isRequired?: boolean;
  /** Validation state of the group */
  validationState?: 'valid' | 'invalid';
  /** Name for the radio group */
  name?: string;
  /** Label for the group */
  label?: ReactNode;
  /** Description for the group */
  description?: ReactNode;
  /** Error message for the group */
  errorMessage?: ReactNode;
  /** Orientation of the radio buttons */
  orientation?: Orientation;
}

/**
 * Provides switch behavior and accessibility
 * @param props - Switch configuration
 * @param ref - Ref to the input element
 * @returns Switch props and state
 */
function useSwitch(props: AriaSwitchProps, ref: RefObject<Element>): SwitchAria;

interface AriaSwitchProps {
  /** Whether the switch is selected */
  isSelected?: boolean;
  /** Default selection state (uncontrolled) */
  defaultSelected?: boolean;
  /** Whether the switch is disabled */
  isDisabled?: boolean;
  /** Whether the switch is read-only */
  isReadOnly?: boolean;
  /** Handler called when selection changes */
  onChange?: (isSelected: boolean) => void;
  /** Value of the switch */
  value?: string;
  /** Name of the switch (for forms) */
  name?: string;
  /** The switch's validation state */
  validationState?: 'valid' | 'invalid';
}

interface SwitchAria {
  /** Props for the input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
  /** Props for the label wrapper */
  labelProps: LabelHTMLAttributes<HTMLLabelElement>;
  /** Whether the switch is selected */
  isSelected: boolean;
  /** Whether the switch is disabled */
  isDisabled: boolean;
  /** Whether the switch is read-only */
  isReadOnly: boolean;
  /** Whether the switch is pressed */
  isPressed: boolean;
}

/**
 * Provides number field behavior and accessibility
 * @param props - Number field configuration
 * @param ref - Ref to the input element
 * @returns Number field props and state
 */
function useNumberField(props: AriaNumberFieldProps, ref: RefObject<Element>): NumberFieldAria;

interface AriaNumberFieldProps {
  /** Current numeric value */
  value?: number;
  /** Default value (uncontrolled) */
  defaultValue?: number;
  /** Handler called when value changes */
  onChange?: (value: number) => void;
  /** Minimum allowed value */
  minValue?: number;
  /** Maximum allowed value */
  maxValue?: number;
  /** Amount to increment/decrement */
  step?: number;
  /** Whether the field is disabled */
  isDisabled?: boolean;
  /** Whether the field is read-only */
  isReadOnly?: boolean;
  /** Whether the field is required */
  isRequired?: boolean;
  /** Number formatting options */
  formatOptions?: Intl.NumberFormatOptions;
  /** Validation state */
  validationState?: 'valid' | 'invalid';
}

interface NumberFieldAria {
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
  /** Props for the number input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
  /** Props for the increment button */
  incrementButtonProps: ButtonHTMLAttributes<HTMLButtonElement>;
  /** Props for the decrement button */
  decrementButtonProps: ButtonHTMLAttributes<HTMLButtonElement>;
  /** Props for the description element */
  descriptionProps: DOMAttributes<Element>;
  /** Props for the error message element */
  errorMessageProps: DOMAttributes<Element>;
}

/**
 * Provides search field behavior and accessibility
 * @param props - Search field configuration
 * @param ref - Ref to the input element
 * @returns Search field props and state
 */
function useSearchField(props: AriaSearchFieldProps, ref: RefObject<Element>): SearchFieldAria;

interface AriaSearchFieldProps extends AriaTextFieldProps {
  /** Handler called when the search is submitted */
  onSubmit?: (value: string) => void;
  /** Handler called when the clear button is pressed */
  onClear?: () => void;
}

interface SearchFieldAria extends TextFieldAria {
  /** Props for the clear button */
  clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>;
}

/**
 * Provides color area behavior for 2D color selection
 * @param props - Color area configuration
 * @param ref - Ref to the color area element
 * @returns Color area props and state
 */
function useColorArea(props: AriaColorAreaProps, ref: RefObject<Element>): ColorAreaAria;

/**
 * Provides color channel field behavior for individual color channels
 * @param props - Color channel field configuration
 * @param ref - Ref to the input element
 * @returns Color channel field props and state
 */
function useColorChannelField(props: AriaColorChannelFieldProps, ref: RefObject<Element>): ColorChannelFieldAria;

/**
 * Provides color field behavior for color input
 * @param props - Color field configuration
 * @param ref - Ref to the input element
 * @returns Color field props and state
 */
function useColorField(props: AriaColorFieldProps, ref: RefObject<Element>): ColorFieldAria;

/**
 * Provides color slider behavior for color channel sliders
 * @param props - Color slider configuration
 * @param ref - Ref to the slider element
 * @returns Color slider props and state
 */
function useColorSlider(props: AriaColorSliderProps, ref: RefObject<Element>): ColorSliderAria;

/**
 * Provides color swatch behavior for color preview
 * @param props - Color swatch configuration
 * @param ref - Ref to the swatch element
 * @returns Color swatch props and state
 */
function useColorSwatch(props: AriaColorSwatchProps, ref: RefObject<Element>): ColorSwatchAria;

/**
 * Provides color wheel behavior for hue selection
 * @param props - Color wheel configuration
 * @param ref - Ref to the color wheel element
 * @returns Color wheel props and state
 */
function useColorWheel(props: AriaColorWheelOptions, ref: RefObject<Element>): ColorWheelAria;

interface AriaColorAreaProps {
  /** Current color value */
  value?: Color;
  /** Default color value (uncontrolled) */
  defaultValue?: Color;
  /** Handler called when color changes */
  onChange?: (value: Color) => void;
  /** Color space and channel for X axis */
  xChannel: ColorChannel;
  /** Color space and channel for Y axis */
  yChannel: ColorChannel;
  /** Whether the color area is disabled */
  isDisabled?: boolean;
  /** Step increment for keyboard navigation */
  step?: number;
  /** Page step increment for page up/down keys */
  pageStep?: number;
}

interface ColorAreaAria {
  /** Props for the color area element */
  colorAreaProps: DOMAttributes<Element>;
  /** Props for the thumb element */
  thumbProps: DOMAttributes<Element>;
  /** Whether the thumb is being dragged */
  isDragging: boolean;
}

interface AriaColorChannelFieldProps {
  /** Current color value */
  value?: Color;
  /** Default color value (uncontrolled) */
  defaultValue?: Color;
  /** Handler called when color changes */
  onChange?: (value: Color) => void;
  /** Color channel to edit */
  channel: ColorChannel;
  /** Color space */
  colorSpace: ColorSpace;
  /** Whether the field is disabled */
  isDisabled?: boolean;
  /** Whether the field is read-only */
  isReadOnly?: boolean;
}

interface ColorChannelFieldAria {
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
  /** Props for the input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
  /** Props for the increment button */
  incrementButtonProps: ButtonHTMLAttributes<HTMLButtonElement>;
  /** Props for the decrement button */
  decrementButtonProps: ButtonHTMLAttributes<HTMLButtonElement>;
}

interface AriaColorFieldProps {
  /** Current color value */
  value?: Color;
  /** Default color value (uncontrolled) */
  defaultValue?: Color;
  /** Handler called when color changes */
  onChange?: (value: Color) => void;
  /** Whether the field is disabled */
  isDisabled?: boolean;
  /** Whether the field is read-only */
  isReadOnly?: boolean;
  /** Validation state */
  validationState?: 'valid' | 'invalid';
}

interface ColorFieldAria {
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
  /** Props for the input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
}

interface AriaColorSliderProps {
  /** Current color value */
  value?: Color;
  /** Default color value (uncontrolled) */
  defaultValue?: Color;
  /** Handler called when color changes */
  onChange?: (value: Color) => void;
  /** Color channel to control */
  channel: ColorChannel;
  /** Color space */
  colorSpace: ColorSpace;
  /** Orientation of the slider */
  orientation?: Orientation;
  /** Whether the slider is disabled */
  isDisabled?: boolean;
  /** Step increment */
  step?: number;
  /** Page step increment */
  pageStep?: number;
}

interface ColorSliderAria {
  /** Props for the slider container */
  containerProps: DOMAttributes<Element>;
  /** Props for the track element */
  trackProps: DOMAttributes<Element>;
  /** Props for the thumb element */
  thumbProps: DOMAttributes<Element>;
  /** Props for the output element */
  outputProps: DOMAttributes<Element>;
  /** Whether the thumb is being dragged */
  isDragging: boolean;
}

interface AriaColorSwatchProps {
  /** Color to display */
  color: Color;
  /** Whether the swatch is disabled */
  isDisabled?: boolean;
}

interface ColorSwatchAria {
  /** Props for the color swatch element */
  colorSwatchProps: DOMAttributes<Element>;
}

interface AriaColorWheelOptions {
  /** Current color value */
  value?: Color;
  /** Default color value (uncontrolled) */
  defaultValue?: Color;
  /** Handler called when color changes */
  onChange?: (value: Color) => void;
  /** Whether the color wheel is disabled */
  isDisabled?: boolean;
  /** Step increment for keyboard navigation */
  step?: number;
  /** Page step increment for page up/down keys */
  pageStep?: number;
}

interface ColorWheelAria {
  /** Props for the color wheel element */
  colorWheelProps: DOMAttributes<Element>;
  /** Props for the thumb element */
  thumbProps: DOMAttributes<Element>;
  /** Whether the thumb is being dragged */
  isDragging: boolean;
}

// Color-related types
type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha';
type ColorSpace = 'rgb' | 'hsl' | 'hsb';

interface Color {
  /** Convert to hex string */
  toString(format?: 'hex' | 'rgb' | 'hsl' | 'hsb'): string;
  /** Get channel value */
  getChannelValue(channel: ColorChannel): number;
  /** Set channel value */
  withChannelValue(channel: ColorChannel, value: number): Color;
  /** Get color space */
  getColorSpace(): ColorSpace;
  /** Convert to color space */
  toFormat(format: ColorSpace): Color;
}

/**
 * Provides progress bar behavior and accessibility
 * @param props - Progress bar configuration
 * @param ref - Ref to the progress element
 * @returns Progress bar props and state
 */
function useProgressBar(props: AriaProgressBarProps, ref: RefObject<Element>): ProgressBarAria;

/**
 * Provides meter behavior for displaying scalar values
 * @param props - Meter configuration
 * @param ref - Ref to the meter element
 * @returns Meter props and state
 */
function useMeter(props: AriaMeterProps, ref: RefObject<Element>): MeterAria;

/**
 * Provides slider behavior for selecting values from a range
 * @param props - Slider configuration
 * @param ref - Ref to the slider element
 * @returns Slider props and state
 */
function useSlider(props: AriaSliderProps, ref: RefObject<Element>): SliderAria;

/**
 * Provides slider thumb behavior for individual slider handles
 * @param props - Slider thumb configuration
 * @param state - Slider state
 * @param ref - Ref to the thumb element
 * @returns Slider thumb props and state
 */
function useSliderThumb(props: AriaSliderThumbProps, state: SliderState, ref: RefObject<Element>): SliderThumbAria;

interface AriaProgressBarProps {
  /** Current progress value */
  value?: number;
  /** Minimum value */
  minValue?: number;
  /** Maximum value */
  maxValue?: number;
  /** Whether progress is indeterminate */
  isIndeterminate?: boolean;
  /** Format function for value display */
  formatOptions?: Intl.NumberFormatOptions;
  /** Accessible label */
  'aria-label'?: string;
  /** ID of element that labels the progress bar */
  'aria-labelledby'?: string;
}

interface ProgressBarAria {
  /** Props for the progress bar element */
  progressBarProps: ProgressHTMLAttributes<HTMLProgressElement>;
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
}

interface AriaMeterProps {
  /** Current value */
  value: number;
  /** Minimum value */
  minValue?: number;
  /** Maximum value */
  maxValue?: number;
  /** Low threshold value */
  low?: number;
  /** High threshold value */
  high?: number;
  /** Optimum value */
  optimum?: number;
  /** Format function for value display */
  formatOptions?: Intl.NumberFormatOptions;
}

interface MeterAria {
  /** Props for the meter element */
  meterProps: MeterHTMLAttributes<HTMLMeterElement>;
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
}

interface AriaSliderProps {
  /** Current values */
  value?: number | number[];
  /** Default values (uncontrolled) */
  defaultValue?: number | number[];
  /** Handler called when values change */
  onChange?: (value: number | number[]) => void;
  /** Minimum value */
  minValue?: number;
  /** Maximum value */
  maxValue?: number;
  /** Step increment */
  step?: number;
  /** Page step increment */
  pageStep?: number;
  /** Orientation of the slider */
  orientation?: Orientation;
  /** Whether the slider is disabled */
  isDisabled?: boolean;
  /** Format function for value display */
  formatOptions?: Intl.NumberFormatOptions;
  /** Whether to show thumb labels */
  showValueLabel?: boolean;
  /** Function to get thumb label */
  getThumbLabel?: (index: number) => string;
}

interface SliderAria {
  /** Props for the slider container */
  containerProps: DOMAttributes<Element>;
  /** Props for the track element */
  trackProps: DOMAttributes<Element>;
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
  /** Props for the output element */
  outputProps: DOMAttributes<Element>;
}

interface AriaSliderThumbProps {
  /** Index of the thumb */
  index: number;
  /** Whether the thumb is disabled */
  isDisabled?: boolean;
  /** Name for form integration */
  name?: string;
}

interface SliderThumbAria {
  /** Props for the thumb element */
  thumbProps: DOMAttributes<Element>;
  /** Props for the input element */
  inputProps: InputHTMLAttributes<HTMLInputElement>;
  /** Whether the thumb is being dragged */
  isDragging: boolean;
  /** Whether the thumb is focused */
  isFocused: boolean;
  /** Value of this thumb */
  value: number;
}

interface SliderState {
  /** Array of thumb values */
  values: number[];
  /** Get value for thumb index */
  getThumbValue(index: number): number;
  /** Set value for thumb index */
  setThumbValue(index: number, value: number): void;
  /** Set dragging state for thumb */
  setThumbDragging(index: number, dragging: boolean): void;
  /** Whether thumb is being dragged */
  isThumbDragging(index: number): boolean;
  /** Get percent for value */
  getValuePercent(value: number): number;
  /** Get value for percent */
  getPercentValue(percent: number): number;
  /** Get display value */
  getDisplayValue(value: number): string;
}

/**
 * Provides form field behavior and accessibility
 * @param props - Field configuration
 * @param ref - Ref to the field element
 * @returns Field props and state
 */
function useField(props: AriaFieldProps, ref: RefObject<Element>): FieldAria;

/**
 * Provides label behavior and accessibility
 * @param props - Label configuration
 * @param ref - Ref to the label element
 * @returns Label props
 */
function useLabel(props: LabelAriaProps, ref: RefObject<Element>): LabelAria;

interface AriaFieldProps {
  /** Label for the field */
  label?: ReactNode;
  /** Description for the field */
  description?: ReactNode;
  /** Error message for the field */
  errorMessage?: ReactNode;
  /** Whether the field is required */
  isRequired?: boolean;
  /** Whether the field is disabled */
  isDisabled?: boolean;
  /** Whether the field is read-only */
  isReadOnly?: boolean;
  /** Validation state */
  validationState?: 'valid' | 'invalid';
  /** Whether to include required asterisk in label */
  necessityIndicator?: 'icon' | 'label';
}

interface FieldAria {
  /** Props for the field wrapper */
  fieldProps: DOMAttributes<Element>;
  /** Props for the label element */
  labelProps: DOMAttributes<Element>;
  /** Props for the description element */
  descriptionProps: DOMAttributes<Element>;
  /** Props for the error message element */
  errorMessageProps: DOMAttributes<Element>;
}

interface LabelAriaProps {
  /** Label content */
  children: ReactNode;
  /** Target element for the label */
  for?: string;
  /** Element type to render */
  elementType?: React.ElementType;
}

interface LabelAria {
  /** Props for the label element */
  labelProps: LabelHTMLAttributes<HTMLLabelElement>;
}