@payfit/unity-components/dist/esm/components/number-input/TanstackNumberInput.d.ts

import { NumberProps } from './NumberInput.js';
/**
 * Props for the TanstackNumberInput component.
 *
 * This type mirrors {@link NumberProps} from the Unity NumberInput, while omitting
 * the properties that are managed by the TanStack Form field context:
 * - `name` — provided by <form.AppField name="…"/>
 * - `value` and `defaultValue` — driven by the form field state
 * - `isInvalid` — derived from the field meta (touched + !isValid)
 *
 * You can still pass all other visual/behavioral props supported by the base
 * NumberInput (e.g. `withControls`, `minValue`, `maxValue`, `step`, `prefix`, `suffix`,
 * `formatOptions`, `isReadOnly`, `isDisabled`, `isLoading`, etc.).
 */
export type TanstackNumberInputProps = Omit<NumberProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
/**
 * TanstackNumberInput is a controlled numeric input wired to a TanStack Form field.
 * It composes the Unity {@link NumberInput} and synchronizes value, invalid state,
 * and events through the TanStack field API.
 *
 * Behavior
 * - Value is controlled by the form field state (`field.state.value`).
 * - Invalid state is derived from `meta`: when the field is touched and invalid,
 *   the underlying input receives `isInvalid` and proper a11y attributes.
 * - `onChange` forwards the new numeric value to the form via `field.handleChange`.
 * - `onBlur` triggers `field.handleBlur`.
 * - The clear action sets the value to `NaN` by default, then calls an optional
 *   `onClearButtonPress` handler.
 *
 * Accessibility
 * - `aria-labelledby`, `aria-describedby` (helper and feedback), and `aria-details`
 *   are provided via the TanstackFormField a11y context.
 *
 * Example:
 * ```tsx
 * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
 * import { TanstackNumberInput } from "@/components/number-input/TanstackNumberInput"
 *
 * function ExampleField() {
 *   const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
 *   return (
 *     <form.AppForm>
 *       <form.Form>
 *         <form.AppField name="amount">
 *           {() => <TanstackNumberInput aria-label="Amount" withControls />}
 *         </form.AppField>
 *       </form.Form>
 *     </form.AppForm>
 *   )
 * }
 * ```
 * @see NumberInput for the underlying visual component and props
 * @see TanstackFormField for the enclosing a11y wiring
 * @see useTanstackUnityForm for creating the form context
 * @returns A Unity NumberInput controlled by the TanStack form field
 */
declare const TanstackNumberInput: import('react').ForwardRefExoticComponent<TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
export { TanstackNumberInput };