import { DateTimeInputProps } from './date-time-input.types'; /** * DateTimeInput allows users to enter and edit date and time values using a keyboard. * Each part of a date/time value is displayed in an individually editable segment. * The component supports various granularities from day-level to second-level precision. * * Built on top of React Aria's `useDateField` hook for accessibility and internationalization support. * Automatically formats the displayed date/time based on the locale and provides proper keyboard navigation. * * ## Features * * - **Keyboard Navigation**: Arrow keys, Tab, and direct typing * - **Accessibility**: Full screen reader and keyboard support via React Aria * - **Internationalization**: Automatic formatting based on locale * - **Validation**: Built-in min/max date validation * - **Granularity Control**: Support for day, hour, minute, and second precision * - **Controlled/Uncontrolled**: Supports both controlled and uncontrolled usage * * ## Usage * * ### Basic Usage * ```tsx * import { DateTimeInput } from '@bloomreach/react-banana-ui'; * * function MyComponent() { * const [value, setValue] = useState(new Date()); * * return ( * * ); * } * ``` * * ### With Validation * ```tsx * * ``` * * ### Different Granularities * ```tsx * // Date only * * * // Date and hour * * * // Date, hour, and minute (default) * * * // Full precision including seconds * * ``` * * ### Localization * ```tsx * * ``` * * ## Accessibility * * The component follows WAI-ARIA guidelines and provides: * - Proper focus management between segments * - Screen reader announcements for value changes * - Keyboard navigation with arrow keys * - Support for assistive technologies * * @param props - The props for the DateTimeInput component * @param forwardedRef - Ref to be forwarded to the underlying input element * @returns A date/time input component with editable segments */ declare const DateTimeInput: import('react').ForwardRefExoticComponent>; export default DateTimeInput;