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

import { StandardSchemaV1 } from '@standard-schema/spec';
import { ForwardedRef, JSX, ReactNode } from 'react';
import { FieldPath, FieldValues } from 'react-hook-form';
import { Schema } from '../../hooks/use-form.types.js';
import { LabelProps } from '../label/Label.js';
import { NumberProps } from '../number-input/NumberInput.js';
export declare const numberField: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-100", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-100", unknown, unknown, undefined>>;
export interface NumberFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<NumberProps, 'name'> {
    /** The name of the field, which should match the form schema. */
    name: TName;
    /** The label for the text field. */
    label: string;
    /** Helper text to display below the text field. */
    helperText?: ReactNode;
    /** Feedback text to display below the text field. */
    feedbackText?: ReactNode;
    /** A contextual link to display below the text field. */
    contextualLink?: ReactNode;
}
type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
    ref?: ForwardedRef<HTMLInputElement>;
}) => JSX.Element) & {
    displayName?: string;
};
/**
 * NumberField is a form control component that combines a number input with form field functionality.
 * It integrates with React Hook Form and provides features like validation, labels, helper text, and feedback.
 * @template TFieldValues - The type of the form values
 * @template TName - The type of the field name (must be a key of TFieldValues)
 * @example
 * ```tsx
 * import { NumberField } from '@payfit/unity-components'
 *
 * <NumberField
 *   name="age"
 *   label="Age"
 *   helperText="Enter your age in years"
 *   isRequired
 * />
 * ```
 * @template TSchema - The Zod schema type for form validation
 * @param {NumberFieldProps<StandardSchemaV1.InferOutput<TSchema>>} props - The props for the NumberField component
 * @param {ForwardedRef<HTMLInputElement>} ref - Ref forwarded to the underlying input element
 * @returns {JSX.Element} A NumberField component
 * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
 * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
 */
declare const NumberField: NumberFieldComponent;
export { NumberField };