@payfit/unity-components/dist/esm/components/number-field/TanstackNumberField.d.ts

import { ReactNode } from 'react';
import { LabelProps } from '../label/Label.js';
import { TanstackNumberInputProps } from '../number-input/TanstackNumberInput.js';
/**
 * Base props shared by the TanstackNumberField, including label and field adornments.
 * Inherits `isRequired` and `requiredVariant` from {@link LabelProps} to control
 * the required indicator in the label.
 */
export interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
    /** The plain-text label associated with the number input (required for a11y). */
    label: string;
    /** Optional helper text displayed above the control to guide the user. */
    helperText?: ReactNode;
    /** Optional contextual link rendered below the control for additional info. */
    contextualLink?: ReactNode;
}
/**
 * Props for {@link TanstackNumberField}.
 *
 * Combines field chrome (label, helper/contextual link, feedback) with the
 * input behavior from {@link TanstackNumberInput}. All value/validation aspects
 * are handled by the TanStack Form field context, so you should not pass `name`,
 * `value`, `defaultValue`, or `isInvalid` here.
 */
export type NumberFieldProps = FieldProps & TanstackNumberInputProps;
/**
 * TanstackNumberField renders a complete number field for TanStack forms:
 * label, helper text, the numeric input itself, feedback message, and an
 * optional contextual link.
 *
 * Behavior
 * - Integrates with the TanStack Form field via `<form.AppField name="…">`.
 * - Uses {@link TanstackNumberInput} for the numeric control and forwards visual
 *   props such as `withControls`, `minValue`, `maxValue`, `step`, `formatOptions`,
 *   `prefix`, `suffix`, and state props (`isReadOnly`, `isDisabled`, `isLoading`).
 * - Invalid state is derived from the field meta (touched + !isValid) and is
 *   displayed through the underlying input and feedback area.
 *
 * Accessibility
 * - The surrounding {@link TanstackFormField} provides `aria-labelledby`,
 *   `aria-describedby` (helper/feedback), and `aria-details` wiring so the input
 *   is fully accessible out of the box.
 *
 * Example
 * ```tsx
 * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
 * import { TanstackNumberField } from "@/components/number-field/TanstackNumberField"
 *
 * const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
 *
 * <form.AppForm>
 *   <form.Form>
 *     <form.AppField name="amount">
 *       {() => (
 *         <TanstackNumberField
 *           label="Amount"
 *           withControls
 *           minValue={0}
 *           step={5}
 *           helperText="Enter a positive amount"
 *         />
 *       )}
 *     </form.AppField>
 *   </form.Form>
 * </form.AppForm>
 * ```
 * @see TanstackNumberInput for the underlying numeric control
 * @see TanstackFormField for the a11y and layout context
 * @see useTanstackUnityForm to create a form and field context
 * @returns A composite field bound to the current TanStack form field
 */
declare const TanstackNumberField: import('react').ForwardRefExoticComponent<FieldProps & TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
export type { NumberFieldProps as TanstackNumberFieldProps };
export { TanstackNumberField };