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

import { ReactNode } from 'react';
import { TanstackDatePickerProps } from '../date-picker/TanstackDatePicker.js';
import { LabelProps } from '../label/Label.js';
export type TanstackDatePickerFieldProps = TanstackDatePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
    /** The label for the date picker field. */
    label: string;
    /** Helper text to display below the date picker field. */
    helperText?: ReactNode;
    /** A contextual link to display below the date picker field. */
    contextualLink?: ReactNode;
};
/**
 * The `TanstackDatePickerField` component renders a full field (label, date picker)
 * wired to the TanStack Form context. It manages state and accessibility via the
 * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
 *
 * Behavior:
 * - Renders `TanstackDatePicker` with calendar overlay for date 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.
 *
 * Key props:
 * - `label: string` — label text.
 * - `helperText?: ReactNode` — helper text displayed below the field.
 * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
 * - Inherits props from `TanstackDatePicker`.
 * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
 *
 * Example:
 * ```tsx
 * import { TanstackDatePickerField } from "@/components/date-picker-field/TanstackDatePickerField"
 * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
 * import { parseDate } from '@internationalized/date'
 *
 * function Example() {
 *  const schema = z.object({
 *     birthDate: z.custom<CalendarDate | null>()
 *       .refine(date => date !== null, 'Birth date is required'),
 *  })
 *
 *   const form = useTanstackUnityForm({ validators: {
 *     onBlur: schema,
 *   } })
 *   return (
 *     <form>
 *       <form.AppField name="birthDate">
 *         {() => (
 *           <TanstackDatePickerField
 *             label="Birth Date"
 *             helperText="Select your date of birth"
 *           />
 *         )}
 *       </form.AppField>
 *     </form>
 *   )
 * }
 * ```
 */
declare const TanstackDatePickerField: import('react').ForwardRefExoticComponent<TanstackDatePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
    /** The label for the date picker field. */
    label: string;
    /** Helper text to display below the date picker field. */
    helperText?: ReactNode;
    /** A contextual link to display below the date picker field. */
    contextualLink?: ReactNode;
} & import('react').RefAttributes<HTMLDivElement>>;
export { TanstackDatePickerField };