/**
 * @file NumberInput.tsx
 * @input Uses React, useId, useState, useMemo, useCallback, Field, Icon, InputGroupContext
 * @output Exports NumberInput component, NumberInputProps
 * @position Core implementation; consumed by index.ts, tested by NumberInput.test.tsx
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/NumberInput/NumberInput.doc.mjs (props table, features, implementation notes)
 * - /packages/core/src/NumberInput/NumberInput.test.tsx (tests for new/changed behavior)
 * - /packages/core/src/NumberInput/index.ts (exports if types change)
 * - /apps/storybook/stories/NumberInput.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/NumberInput/ (showcase blocks)
 */
import { type FocusEvent, type KeyboardEvent, type ReactNode } from 'react';
import * as stylex from '@stylexjs/stylex';
import { type InputStatus, type FieldStatusVariant } from '../Field';
import { type IconType } from '../Icon';
declare const sizeStyles: Readonly<{
    readonly sm: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "28px">;
    }>;
    readonly md: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
    }>;
    readonly lg: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "36px">;
    }>;
}>;
export type NumberInputSize = keyof typeof sizeStyles;
export type { InputStatus as NumberInputStatus, InputStatusType as NumberInputStatusType, } from '../Field';
import type { BaseProps } from '../BaseProps';
import type { SizeValue } from '../utils/types';
interface NumberInputPropsBase extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLInputElement>;
    /**
     * Label text for the input (always rendered for accessibility).
     */
    label: string;
    /**
     * Whether to visually hide the label (still accessible to screen readers).
     * @default false
     */
    isLabelHidden?: boolean;
    /**
     * Description text displayed between the label and input.
     */
    description?: string;
    /**
     * Whether the field is optional. Mutually exclusive with isRequired.
     * @default false
     */
    isOptional?: boolean;
    /**
     * Whether the field is required. Mutually exclusive with isOptional.
     * @default false
     */
    isRequired?: boolean;
    /**
     * Whether the input is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Explains why the input is disabled. When set together with `isDisabled`,
     * the input shows a tooltip with this text on hover and keyboard focus, and
     * stays focusable (via `aria-disabled`) so the reason is discoverable by
     * keyboard and assistive technology. The field cannot be edited (it becomes
     * read-only) while disabled.
     *
     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
     * controls don't emit the pointer events an external tooltip needs.
     *
     * @example
     * ```
     * <NumberInput
     *   label="Quantity"
     *   value={quantity}
     *   isDisabled
     *   disabledMessage="Editing is locked while the order is processing"
     * />
     * ```
     */
    disabledMessage?: string;
    /**
     * Icon to display at the start of the input.
     * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
     */
    startIcon?: ReactNode | IconType;
    /**
     * Icon to display before the label text.
     */
    labelIcon?: ReactNode | IconType;
    /**
     * Status indicator for the input.
     * When set, displays a colored border and status icon.
     * If message is provided, displays a floating message box below the input.
     */
    status?: InputStatus;
    /**
     * How the status message is placed relative to the input.
     * - 'attached': message overlaps directly below the input (bordered treatment)
     * - 'detached': message floats below as a separate element with spacing
     * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
     * @default 'attached'
     */
    statusVariant?: FieldStatusVariant;
    /**
     * The size of the input.
     * - 'sm': Compact size (28px height)
     * - 'md': Default size (32px height)
     * - 'lg': Large size (36px height)
     * @default 'md'
     */
    size?: NumberInputSize;
    /**
     * The current value of the input.
     * Use null or undefined to represent an empty/unset value.
     */
    value: number | null | undefined;
    /**
     * Placeholder text shown when the input is empty.
     */
    placeholder?: string;
    /**
     * Width of the field. Numbers are treated as pixels, strings are used as-is
     * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
     * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
     */
    width?: SizeValue;
    /**
     * Tooltip text to display in an info icon at the end of the label.
     */
    labelTooltip?: string;
    /**
     * Whether to automatically focus the input on mount.
     * @default false
     */
    hasAutoFocus?: boolean;
    /**
     * The HTML name attribute for the input.
     * Useful for form submissions.
     */
    htmlName?: string;
    /**
     * The HTML autocomplete attribute for the input.
     */
    autoComplete?: string;
    /**
     * The minimum value allowed.
     */
    min?: number | null;
    /**
     * The maximum value allowed.
     */
    max?: number | null;
    /**
     * The step increment for the input.
     * @default 1
     */
    step?: number | null;
    /**
     * Units text to display at the end of the input (e.g., "%" or "GB").
     */
    units?: string | null;
    /**
     * Whether to only allow integer values (no floating point).
     * @default false
     */
    isIntegerOnly?: boolean;
    /**
     * Callback fired when the input receives focus.
     */
    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback fired when the input loses focus.
     */
    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback fired when the user presses the Enter key.
     */
    onEnter?: () => void;
    /**
     * Callback fired on keydown events on the input.
     */
    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
}
/**
 * Without `hasClear`, onChange only receives valid numbers.
 * With `hasClear`, onChange also receives `null` when the user clears the input.
 */
type NumberInputPropsNonClearable = NumberInputPropsBase & {
    hasClear?: false;
    onChange: (value: number) => void;
};
type NumberInputPropsClearable = NumberInputPropsBase & {
    /**
     * Whether to show a clear button when a value is set.
     * When clicked, resets the value to null and returns focus to the input.
     *
     * When enabled, the `onChange` callback type widens to also accept `null`,
     * signaling that the user cleared the input.
     */
    hasClear: true;
    onChange: (value: number | null) => void;
};
export type NumberInputProps = NumberInputPropsNonClearable | NumberInputPropsClearable;
/**
 * A number input component for collecting numeric user input.
 * Only calls onChange when the entered value passes validation.
 *
 * @example
 * ```
 * <NumberInput label="Quantity" value={quantity} onChange={setQuantity} />
 * <NumberInput label="Price" value={price} onChange={setPrice} min={0} step={0.01} />
 * ```
 */
export declare function NumberInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, startIcon, labelIcon, status, statusVariant, size: sizeProp, onChange, value, placeholder, labelTooltip, hasAutoFocus, htmlName, autoComplete, min, max, step, units, isIntegerOnly, onFocus, onBlur, hasClear, onEnter, onKeyDown, width, xstyle, className, style, ref, ...rest }: NumberInputProps): import("react").JSX.Element;
export declare namespace NumberInput {
    var displayName: string;
}
//# sourceMappingURL=NumberInput.d.ts.map