@payfit/unity-components/dist/esm/components/date-range-picker-field/TanstackDateRangePickerField.d.ts

import { ReactNode } from 'react';
import { TanstackDateRangePickerProps } from '../date-range-picker/TanstackDateRangePicker.js';
import { LabelProps } from '../label/Label.js';
export type TanstackDateRangePickerFieldProps = TanstackDateRangePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
    /** The label for the date range picker field. */
    label: string;
    /** Helper text to display below the date range picker field. */
    helperText?: ReactNode;
    /** A contextual link to display below the date range picker field. */
    contextualLink?: ReactNode;
};
/**
 * The `TanstackDateRangePickerField` component renders a full field (label, date range picker)
 * wired to the TanStack Form context. It manages state and accessibility via the
 * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
 *
 * Behavior:
 * - Renders `TanstackDateRangePicker` with calendar overlay for date range selection.
 * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
 *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
 *
 * Accessibility:
 * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
 *   `aria-details` using identifiers from the `a11y` context.
 *
 * Example:
 * ```tsx
 * import { TanstackDateRangePickerField } from "@payfit/unity-components"
 * import { useTanstackUnityForm } from "@payfit/unity-components"
 * import { CalendarDate } from '@internationalized/date'
 *
 * function Example() {
 *   const schema = z.object({
 *     period: z.custom<{ start: CalendarDate; end: CalendarDate } | null>()
 *       .refine(range => range !== null, 'Date range is required'),
 *   })
 *
 *   const form = useTanstackUnityForm({ validators: {
 *     onBlur: schema,
 *   } })
 *   return (
 *     <form>
 *       <form.AppField name="period">
 *         {() => (
 *           <TanstackDateRangePickerField
 *             label="Period"
 *             helperText="Select a date range"
 *           />
 *         )}
 *       </form.AppField>
 *     </form>
 *   )
 * }
 * ```
 */
declare const TanstackDateRangePickerField: import('react').ForwardRefExoticComponent<TanstackDateRangePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
    /** The label for the date range picker field. */
    label: string;
    /** Helper text to display below the date range picker field. */
    helperText?: ReactNode;
    /** A contextual link to display below the date range picker field. */
    contextualLink?: ReactNode;
} & import('react').RefAttributes<HTMLDivElement>>;
export { TanstackDateRangePickerField };