@als-tp/als-react-ts-ui/dist/components/ALSNumberField/ALSNumberField.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import React from "react";
/** Size variants for the number field */
export type ALSNumberFieldSize = "sm" | "md" | "lg";
/** Visual variants for the number field */
export type ALSNumberFieldVariant = "outlined" | "filled";
/**
 * Props for ALSNumberField.Root component
 */
export interface ALSNumberFieldRootProps {
    /** Name attribute for form submission */
    name?: string;
    /** Uncontrolled default value */
    defaultValue?: number;
    /** Controlled value */
    value?: number | null;
    /** Callback fired when value changes */
    onValueChange?: (value: number | null, eventDetails: {
        event: Event | null;
    }) => void;
    /** Locale for number formatting */
    locale?: Intl.LocalesArgument;
    /** Whether value should snap to nearest step */
    snapOnStep?: boolean;
    /** Step amount for increment/decrement */
    step?: number;
    /** Small step when meta key is held */
    smallStep?: number;
    /** Large step when shift key is held */
    largeStep?: number;
    /** Minimum allowed value */
    min?: number;
    /** Maximum allowed value */
    max?: number;
    /** Allow wheel scrub while focused */
    allowWheelScrub?: boolean;
    /** Intl.NumberFormat options for formatting */
    format?: Intl.NumberFormatOptions;
    /** Whether the field is disabled */
    disabled?: boolean;
    /** Whether the field is read-only */
    readOnly?: boolean;
    /** Whether the field is required */
    required?: boolean;
    /** Ref for the hidden input element */
    inputRef?: React.Ref<HTMLInputElement>;
    /** ID for the input element */
    id?: string;
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children components */
    children?: React.ReactNode;
    /** Size variant */
    size?: ALSNumberFieldSize;
    /** Visual variant */
    variant?: ALSNumberFieldVariant;
}
/**
 * Props for ALSNumberField.Group component
 */
export interface ALSNumberFieldGroupProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children components */
    children?: React.ReactNode;
}
/**
 * Props for ALSNumberField.Input component
 */
export interface ALSNumberFieldInputProps {
    /** Accessible role description */
    "aria-roledescription"?: string;
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Placeholder text */
    placeholder?: string;
}
/**
 * Props for ALSNumberField.Increment component
 */
export interface ALSNumberFieldIncrementProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children (icon or text) */
    children?: React.ReactNode;
    /** Accessible label */
    "aria-label"?: string;
}
/**
 * Props for ALSNumberField.Decrement component
 */
export interface ALSNumberFieldDecrementProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children (icon or text) */
    children?: React.ReactNode;
    /** Accessible label */
    "aria-label"?: string;
}
/**
 * Props for ALSNumberField.ScrubArea component
 */
export interface ALSNumberFieldScrubAreaProps {
    /** Cursor movement direction */
    direction?: "horizontal" | "vertical";
    /** Pixels to move before value changes */
    pixelSensitivity?: number;
    /** Distance before cursor loops back */
    teleportDistance?: number;
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children components */
    children?: React.ReactNode;
}
/**
 * Props for ALSNumberField.ScrubAreaCursor component
 */
export interface ALSNumberFieldScrubAreaCursorProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children components */
    children?: React.ReactNode;
}
/**
 * Root component that groups all parts of the number field.
 * Manages state and provides context to child components.
 */
export declare const ALSNumberFieldRoot: React.ForwardRefExoticComponent<ALSNumberFieldRootProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Groups the input with increment and decrement buttons.
 * Provides visual container for the number field controls.
 */
export declare const ALSNumberFieldGroup: React.ForwardRefExoticComponent<ALSNumberFieldGroupProps & React.RefAttributes<HTMLDivElement>>;
/**
 * The native input control for the number field.
 * Handles numeric input and formatting.
 */
export declare const ALSNumberFieldInput: React.ForwardRefExoticComponent<ALSNumberFieldInputProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Stepper button that increases the field value when clicked.
 */
export declare const ALSNumberFieldIncrement: React.ForwardRefExoticComponent<ALSNumberFieldIncrementProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Stepper button that decreases the field value when clicked.
 */
export declare const ALSNumberFieldDecrement: React.ForwardRefExoticComponent<ALSNumberFieldDecrementProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Interactive area where the user can click and drag to change the field value.
 * Useful for fine-grained adjustments.
 */
export declare const ALSNumberFieldScrubArea: React.ForwardRefExoticComponent<ALSNumberFieldScrubAreaProps & React.RefAttributes<HTMLSpanElement>>;
/**
 * Custom cursor element displayed while scrubbing.
 * Replaces the native cursor during drag operations.
 */
export declare const ALSNumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<ALSNumberFieldScrubAreaCursorProps & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=ALSNumberField.d.ts.map