@bloomreach/react-banana-ui 1.31.2 → 1.32.0

package/dist/components/date/date-time-range-picker/date-time-range-picker.types.d.ts

@@ -0,0 +1,268 @@
+import { DateFieldAria, DateRangePickerAria } from '@react-aria/datepicker';
+import { RangeCalendarState } from '@react-stately/calendar';
+import { DateFieldState, DateRangePickerState } from '@react-stately/datepicker';
+import { GroupDOMAttributes } from '@react-types/shared';
+import { DOMAttributes, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { DateValidationResult } from '../../../utils/date';
+import { DateRangeValue } from '../../../utils/types/date.types';
+import { ButtonProps } from '../../buttons';
+/**
+ * Context object passed to the onChange handler of DateTimeRangePicker.
+ * Contains validation information and state for error handling.
+ */
+export interface DateTimeRangePickerChangeHandlerContext extends DateValidationResult {
+    /**
+     * Whether the current date/time range value is valid.
+     */
+    valid: boolean;
+}
+/**
+ * Props for the DateTimeRangePicker component.
+ *
+ * The DateTimeRangePicker combines date and time range selection in a single component.
+ * It uses DateTimeInput components for both start and end inputs and provides a popup with both
+ * calendar for date selection and time selectors for hour, minute, and second.
+ */
+export interface DateTimeRangePickerProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The date and time range that is selected when the component first mounts (uncontrolled).
+     * Should be an object with start and end Date objects representing the initial range.
+     */
+    defaultValue?: DateRangeValue;
+    /**
+     * Whether the date-time range picker is disabled.
+     * When disabled, the user cannot interact with the picker and it appears grayed out.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the date-time range picker is in an error state.
+     * When true, the picker will display error styling to indicate validation issues.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * The <form> element to associate the input with.
+     * The value of this attribute must be the id of a <form> in the same document.
+     */
+    form?: string;
+    /**
+     * Determines which date and time segments are displayed and editable.
+     * - `'day'`: Shows only date segments (year, month, day)
+     * - `'hour'`: Shows date and hour segments
+     * - `'minute'`: Shows date, hour, and minute segments
+     * - `'second'`: Shows date, hour, minute, and second segments
+     * @default 'minute'
+     */
+    granularity?: 'day' | 'hour' | 'minute' | 'second';
+    /**
+     * The hour cycle to use for formatting the date and time.
+     * @default 12
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * The ID of the input element.
+     * Used for accessibility and form association.
+     */
+    id?: string;
+    /**
+     * The locale to use for formatting the date and time.
+     * Follows BCP 47 language tag format (e.g., 'en-US', 'de-DE', 'ja-JP').
+     * When not provided, uses the user's browser locale.
+     * @example 'en-US', 'de-DE', 'fr-FR'
+     */
+    locale?: string;
+    /**
+     * The maximum date and time that a user can enter.
+     * Dates after this value will be considered invalid.
+     * Should be a JavaScript Date object.
+     */
+    maxDate?: Date;
+    /**
+     * The minimum date and time that a user can enter.
+     * Dates before this value will be considered invalid.
+     * Should be a JavaScript Date object.
+     */
+    minDate?: Date;
+    /**
+     * The name of the input element, used when submitting an HTML form.
+     * See @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name.
+     */
+    name?: string;
+    /**
+     * Handler that is called when the input loses focus.
+     * Receives the blur event from the date/time range inputs.
+     */
+    onBlur?: FocusEventHandler<Element>;
+    /**
+     * Handler that is called when the date/time range value changes.
+     * Receives the new DateRangeValue object or null if the input is cleared,
+     * along with a context object containing validation information.
+     *
+     * @param value - The new date/time range value as a DateRangeValue object, or null if cleared
+     * @param context - Validation context with validity state and messages
+     *
+     * @example
+     * ```tsx
+     * const handleChange = (value: DateRangeValue | null, context: DateTimeRangePickerChangeHandlerContext) => {
+     *   if (context.valid && value) {
+     *     console.log('Valid date/time range selected:', {
+     *       start: value.start.toISOString(),
+     *       end: value.end.toISOString()
+     *     });
+     *   } else {
+     *     console.log('Invalid date/time range or validation errors:', context.validationMessage);
+     *   }
+     * };
+     * ```
+     */
+    onChange?: (value: DateRangeValue | null, context: DateTimeRangePickerChangeHandlerContext) => void;
+    /**
+     * Handler that is called when the input is clicked.
+     * Can be used to programmatically open the picker.
+     */
+    onClick?: MouseEventHandler<Element>;
+    /**
+     * Handler that is called when the input receives focus.
+     * Receives the focus event from the date/time range inputs.
+     */
+    onFocus?: FocusEventHandler<Element>;
+    /**
+     * Handler that is called when a key is pressed within the input.
+     * Receives keyboard events from the date/time range inputs.
+     */
+    onKeyDown?: KeyboardEventHandler<Element>;
+    /**
+     * Handler that is called when a key is released within the input.
+     * Receives keyboard events from the date/time range inputs.
+     */
+    onKeyUp?: KeyboardEventHandler<Element>;
+    /**
+     * Handler that is called when the popup with calendar and time selectors changes state.
+     * Use this to track when the picker is opened or closed.
+     *
+     * @param open - Whether the popup is currently open
+     *
+     * @example
+     * ```tsx
+     * const handleOpenChange = (open: boolean) => {
+     *   console.log(open ? 'Picker opened' : 'Picker closed');
+     * };
+     * ```
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * A placeholder date that influences the format and default values of empty segments.
+     * This date is used to determine the format and structure but is not the actual value.
+     * Useful for setting the year when only month/day are relevant, or timezone context.
+     * Defaults to today's date.
+     *
+     * @default new Date()
+     * @example new Date('2024-12-31T23:59:59') // Shows full format structure
+     */
+    placeholderValue?: Date;
+    /**
+     * Whether the date-time range picker is read-only.
+     * When true, the user can see the value but cannot edit it.
+     * The picker will still be focusable and the popup can be opened to view the calendar.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the date-time range picker is required for form submission.
+     * When true, the picker must have a value for the form to be valid.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether to show the timezone in the date and time range picker.
+     * @default false
+     */
+    showTimezone?: boolean;
+    /**
+     * The current date and time range value (controlled).
+     * Should be a DateRangeValue object with start and end Date objects,
+     * or null if no range is selected.
+     *
+     * @example
+     * ```tsx
+     * const [value, setValue] = useState<DateRangeValue | null>({
+     *   start: new Date('2024-01-01T09:00:00'),
+     *   end: new Date('2024-01-01T17:00:00')
+     * });
+     * return <DateTimeRangePicker value={value} onChange={(newValue) => setValue(newValue)} />;
+     * ```
+     */
+    value?: DateRangeValue | null;
+}
+/**
+ * Return type for the useDateTimeRangePicker hook.
+ * Contains all the props, state, and handlers needed to render the DateTimeRangePicker component.
+ */
+export interface UseDateTimeRangePickerReturn {
+    /** Calendar-related props and state for the date range selection */
+    calendarProps: {
+        /** Props for the calendar component */
+        calendarProps: DOMAttributes<HTMLElement>;
+        /** Ref for the calendar component */
+        calendarRef: RefObject<HTMLDivElement>;
+        /** Range calendar state object for date range selection */
+        calendarState: RangeCalendarState;
+        /** Title for the left calendar month */
+        leftTitle: string;
+        /** Props for the next month button */
+        nextButtonProps: Omit<ButtonProps, 'type'>;
+        /** Props for the previous month button */
+        prevButtonProps: Omit<ButtonProps, 'type'>;
+        /** Title for the right calendar month */
+        rightTitle: string;
+    };
+    /** Date field-related props and state for both start and end inputs */
+    dateFieldProps: {
+        /** Ref for the end date field hidden input component */
+        dateFieldEndInputRef: RefObject<HTMLInputElement>;
+        /** Props for the end date field component */
+        dateFieldEndProps: DateFieldAria['fieldProps'];
+        /** Ref for the end date field component */
+        dateFieldEndRef: RefObject<HTMLElement>;
+        /** End date field state object */
+        dateFieldEndState: DateFieldState;
+        /** Props for the hidden end input element */
+        hiddenInputEndProps: InputHTMLAttributes<HTMLInputElement>;
+        /** Ref for the start date field hidden input component */
+        dateFieldStartInputRef: RefObject<HTMLInputElement>;
+        /** Props for the start date field component */
+        dateFieldStartProps: DateFieldAria['fieldProps'];
+        /** Ref for the start date field component */
+        dateFieldStartRef: RefObject<HTMLElement>;
+        /** Start date field state object */
+        dateFieldStartState: DateFieldState;
+        /** Props for the hidden start input element */
+        hiddenInputStartProps: InputHTMLAttributes<HTMLInputElement>;
+        /** Props for the input group container */
+        groupProps: GroupDOMAttributes;
+    };
+    /** The React Aria date range picker state object */
+    dateRangePickerState: DateRangePickerState;
+    /** Props for the popup component */
+    popupProps: {
+        /** Props for the popup dialog container */
+        dialogProps: DateRangePickerAria['dialogProps'];
+    };
+    /** Time field-related props and handlers for both start and end times */
+    timeFieldProps: {
+        /** Handler for time value changes */
+        onTimeChange: (part: 'end' | 'start', newTime: Date) => void;
+        /** Current time values as Date objects for start and end */
+        timeValue: {
+            /** End time value */
+            end: Date | null;
+            /** Start time value */
+            start: Date | null;
+        };
+    };
+}

package/dist/components/date/date-time-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateTimeRangePicker } from './date-time-range-picker';
+export type { DateTimeRangePickerChangeHandlerContext, DateTimeRangePickerProps } from './date-time-range-picker.types';

package/dist/components/date/date-time-range-picker/use-date-time-range-picker.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+import { DateTimeRangePickerProps, UseDateTimeRangePickerReturn } from './date-time-range-picker.types';
+/**
+ * Custom hook that manages the state and behavior for the DateTimeRangePicker component.
+ * Combines React Aria's date range picker functionality with time selection capabilities.
+ *
+ * This hook handles:
+ * - Date range picker state management via React Aria
+ * - Start and end date/time input states
+ * - Calendar state for the popup
+ * - Time selection integration
+ * - Focus management and keyboard navigation
+ * - Form integration with hidden inputs
+ *
+ * @param props - DateTimeRangePicker component props
+ * @param ref - React ref to the container element
+ * @returns Object containing state, props, and handlers for the component
+ */
+export declare const useDateTimeRangePicker: (props: DateTimeRangePickerProps, ref: RefObject<Element>) => UseDateTimeRangePickerReturn;

package/dist/components/date/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-time-picker';
+export * from './date-time-range-picker';

package/dist/components/date/internal.d.ts

@@ -0,0 +1,5 @@
+export * from './calendar-cell';
+export * from './calendar-grid';
+export * from './date-segment';
+export * from './date-segments';
+export * from './time-selector';

package/dist/components/date/time-selector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimeSelector } from './time-selector';
+export type { TimeSelectorProps } from './time-selector.types';

package/dist/components/date/time-selector/time-selector.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import { TimeSelectorProps } from './time-selector.types';
+/**
+ * TimeSelector provides hour, minute, and second selection using Select dropdowns.
+ *
+ * This component is used within the DateTimePicker popup to allow users to select
+ * specific time values. It shows different selectors based on the granularity prop
+ * and maintains the current date while updating only the time components.
+ *
+ * ## Features
+ *
+ * - **Granular Control**: Shows appropriate selectors based on granularity
+ * - **24-hour Format**: Uses 24-hour time format (0-23 for hours)
+ * - **Current Value Preservation**: Maintains existing date when updating time
+ * - **Accessibility**: Uses semantic Select components with proper labeling
+ *
+ * @param props - The props for the TimeSelector component
+ * @returns A time selection panel with appropriate selectors
+ */
+declare const TimeSelector: {
+    (props: TimeSelectorProps): null | ReactElement;
+    displayName: string;
+};
+export default TimeSelector;

package/dist/components/date/time-selector/time-selector.types.d.ts

@@ -0,0 +1,52 @@
+import { TimeGranularity, TimeRangeType } from '../../../utils';
+/**
+ * Props for the TimeSelectorPanel component.
+ */
+export interface TimeSelectorProps {
+    /**
+     * The current date/time value. Used to extract current hour, minute, and second.
+     */
+    value?: Date | null;
+    /**
+     * Determines which time components are shown based on granularity.
+     * - `'day'`: No time selectors shown
+     * - `'hour'`: Show hour selector only
+     * - `'minute'`: Show hour and minute selectors
+     * - `'second'`: Show hour, minute, and second selectors
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Whether to display time in 12 or 24 hour format.
+     * - `12`: Shows time in 12-hour format with AM/PM selector
+     * - `24`: Shows time in 24-hour format without AM/PM
+     * @default 12
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * Called when any time component changes.
+     * @param newValue - The updated Date object with new time values
+     */
+    onChange?: (newValue: Date) => void;
+    /**
+     * Whether the time selectors are disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the time selectors are read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specifies which part of a date/time range this TimeSelector represents.
+     * - `'end'`: End of range, defaults to end-of-day time (23:59:59) based on granularity
+     * - `'single'`: Single date/time picker, defaults to beginning-of-day time (00:00:00)
+     * - `'start'`: Start of range, defaults to beginning-of-day time (00:00:00)
+     * @default 'single'
+     */
+    rangeType?: TimeRangeType;
+    /**
+     * Additional CSS class names to apply to the time selector container.
+     */
+    className?: string;
+}

package/dist/components/deprecated/date-time-input/date-time-input.d.ts

@@ -0,0 +1,89 @@
+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<Date | null>(new Date());
+ *
+ *   return (
+ *     <DateTimeInput
+ *       value={value}
+ *       onChange={setValue}
+ *       granularity="minute"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ### With Validation
+ * ```tsx
+ * <DateTimeInput
+ *   value={value}
+ *   onChange={setValue}
+ *   minDate={new Date('2024-01-01')}
+ *   maxDate={new Date('2024-12-31')}
+ *   granularity="hour"
+ *   error={!isValid}
+ *   required
+ * />
+ * ```
+ *
+ * ### Different Granularities
+ * ```tsx
+ * // Date only
+ * <DateTimeInput granularity="day" />
+ *
+ * // Date and hour
+ * <DateTimeInput granularity="hour" />
+ *
+ * // Date, hour, and minute (default)
+ * <DateTimeInput granularity="minute" />
+ *
+ * // Full precision including seconds
+ * <DateTimeInput granularity="second" />
+ * ```
+ *
+ * ### Localization
+ * ```tsx
+ * <DateTimeInput
+ *   locale="de-DE"
+ *   value={value}
+ *   onChange={setValue}
+ *   placeholderValue={new Date('2024-12-31T23:59:59')}
+ * />
+ * ```
+ *
+ * ## 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<DateTimeInputProps & import('react').RefAttributes<HTMLElement>>;
+export default DateTimeInput;

package/dist/components/deprecated/date-time-input/date-time-input.stories.d.ts

@@ -0,0 +1,26 @@
+import { default as DateTimeInput } from './date-time-input';
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<typeof DateTimeInput>;
+export default meta;
+export type Story = StoryObj<typeof DateTimeInput>;
+export declare const Basic: Story;
+export declare const WithDefaultValue: Story;
+export declare const Controlled: Story;
+export declare const GranularityDay: Story;
+export declare const GranularityHour: Story;
+export declare const GranularityMinute: Story;
+export declare const GranularitySecond: Story;
+export declare const AllGranularities: Story;
+export declare const PlaceholderValue: Story;
+export declare const MinDateTime: Story;
+export declare const MaxDateTime: Story;
+export declare const MinMaxDateTime: Story;
+export declare const ErrorState: Story;
+export declare const ValidationWithErrorHandling: Story;
+export declare const DisabledState: Story;
+export declare const ReadOnlyState: Story;
+export declare const RequiredField: Story;
+export declare const MultipleLocales: Story;
+export declare const EventHandling: Story;
+export declare const FormIntegration: Story;
+export declare const RealWorldScenarios: Story;

package/dist/components/deprecated/date-time-input/date-time-input.types.d.ts

@@ -0,0 +1,142 @@
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from 'react';
+/**
+ * Props for the DateTimeInput component.
+ *
+ * The 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.
+ */
+export interface DateTimeInputProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The date and time that is selected when the input first mounts (uncontrolled).
+     * Should be a JavaScript Date object representing the initial value.
+     */
+    defaultValue?: Date;
+    /**
+     * Whether the input is disabled.
+     * When disabled, the user cannot interact with the input and it appears grayed out.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is in an error state.
+     * When true, the input will display error styling to indicate validation issues.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Determines which date and time segments are displayed and editable.
+     * - `'day'`: Shows only date segments (year, month, day)
+     * - `'hour'`: Shows date and hour segments
+     * - `'minute'`: Shows date, hour, and minute segments
+     * - `'second'`: Shows date, hour, minute, and second segments
+     * @default 'minute'
+     */
+    granularity?: 'day' | 'hour' | 'minute' | 'second';
+    /**
+     * Whether to display time in 12 or 24 hour format.
+     * By default, this is determined by the user's locale.
+     * - `12`: Shows time in 12-hour format with AM/PM
+     * - `24`: Shows time in 24-hour format
+     * @default 12
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * The ID of the input element.
+     * Used for accessibility and form association.
+     */
+    id?: string;
+    /**
+     * The locale to use for formatting the date and time.
+     * Follows BCP 47 language tag format (e.g., 'en-US', 'de-DE', 'ja-JP').
+     * When not provided, uses the user's browser locale.
+     * @example 'en-US', 'de-DE', 'fr-FR'
+     */
+    locale?: string;
+    /**
+     * The maximum date and time that a user can enter.
+     * Dates after this value will be considered invalid.
+     * Should be a JavaScript Date object.
+     */
+    maxDate?: Date;
+    /**
+     * The minimum date and time that a user can enter.
+     * Dates before this value will be considered invalid.
+     * Should be a JavaScript Date object.
+     */
+    minDate?: Date;
+    /**
+     * Handler that is called when the input loses focus.
+     * Receives the blur event from any of the date/time segments.
+     */
+    onBlur?: FocusEventHandler<Element>;
+    /**
+     * Handler that is called when the date/time value changes.
+     * Receives the new Date object or null if the input is cleared.
+     *
+     * @param value - The new date/time value as a Date object, or null if cleared
+     *
+     * @example
+     * ```tsx
+     * const handleChange = (value: Date | null) => {
+     *   if (value) {
+     *     console.log('Selected date/time:', value.toISOString());
+     *   } else {
+     *     console.log('Input cleared');
+     *   }
+     * };
+     * ```
+     */
+    onChange?: (value: Date | null) => void;
+    /**
+     * Handler that is called when the input is clicked.
+     */
+    onClick?: MouseEventHandler<Element>;
+    /**
+     * Handler that is called when the input receives focus.
+     * Receives the focus event from any of the date/time segments.
+     */
+    onFocus?: FocusEventHandler<Element>;
+    /**
+     * Handler that is called when a key is pressed within the input.
+     * Receives keyboard events from any of the date/time segments.
+     */
+    onKeyDown?: KeyboardEventHandler<Element>;
+    /**
+     * A placeholder date that influences the format and default values of empty segments.
+     * This date is used to determine the format and structure but is not the actual value.
+     * Useful for setting the year when only month/day are relevant, or timezone context.
+     *
+     * @example new Date('2024-12-31T23:59:59') // Shows full format structure
+     */
+    placeholderValue?: Date;
+    /**
+     * Whether the input is read-only.
+     * When true, the user can see the value but cannot edit it.
+     * The input will still be focusable and selectable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the input is required for form submission.
+     * When true, the input must have a value for the form to be valid.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The current date and time value (controlled).
+     * Should be a JavaScript Date object representing the current value,
+     * or null if no value is selected.
+     *
+     * @example
+     * ```tsx
+     * const [value, setValue] = useState<Date | null>(new Date());
+     * return <DateTimeInput value={value} onChange={setValue} />;
+     * ```
+     */
+    value?: Date | null;
+}

package/dist/components/deprecated/date-time-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DateTimeInput } from './date-time-input';
+export { useDateTimeInput } from './use-date-time-input';
+export type { DateTimeInputProps } from './date-time-input.types';

package/dist/components/deprecated/date-time-input/use-date-time-input.d.ts

@@ -0,0 +1,23 @@
+import { DateFieldAria } from '@react-aria/datepicker';
+import { DateFieldState } from '@react-stately/datepicker';
+import { InputHTMLAttributes, RefObject } from 'react';
+import { DateTimeInputProps } from './date-time-input.types';
+/**
+ * Combined hook that provides both state management and behavior for a date-time input component.
+ * Handles the conversion between Date objects and React Aria's internal date representation,
+ * manages locale settings, and provides accessibility implementation.
+ *
+ * Built on top of React Aria's useDateField and useDateFieldState hooks to provide proper
+ * keyboard navigation, screen reader support, and ARIA attributes for date-time input segments.
+ *
+ * @param props - The props for the DateTimeInput component
+ * @param forwardedRef - Optional ref to be forwarded to the input element
+ * @returns Object containing state, field props, hidden input props, and internal ref
+ * @internal
+ */
+export declare function useDateTimeInput(props: DateTimeInputProps, forwardedRef?: null | RefObject<Element>): {
+    fieldProps: DateFieldAria['fieldProps'];
+    hiddenInputProps: InputHTMLAttributes<HTMLInputElement>;
+    ref: RefObject<Element>;
+    state: DateFieldState;
+};

package/dist/components/deprecated/index.d.ts

@@ -0,0 +1,6 @@
+export * from './calendar';
+export * from './date-input';
+export * from './date-picker';
+export * from './date-range-picker';
+export * from './date-time-input';
+export * from './range-calendar';