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

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

import * as React from "react";
/**
 * Variant options for the meter component
 */
export type ALSMeterVariant = "primary" | "success" | "warning" | "error" | "info";
/**
 * Size options for the meter component
 */
export type ALSMeterSize = "sm" | "md" | "lg";
/**
 * Props for the ALSMeter Root component
 */
export interface ALSMeterRootProps {
    /** The current value of the meter */
    value: number;
    /** Minimum value (default: 0) */
    min?: number;
    /** Maximum value (default: 100) */
    max?: number;
    /** Visual variant of the meter */
    variant?: ALSMeterVariant;
    /** Size of the meter */
    size?: ALSMeterSize;
    /** Whether to show the value label */
    showValue?: boolean;
    /** Custom aria-valuetext for accessibility */
    "aria-valuetext"?: string;
    /** Function to generate aria-valuetext */
    getAriaValueText?: (formattedValue: string, value: number) => string;
    /** Locale for number formatting */
    locale?: Intl.LocalesArgument;
    /** Number format options */
    format?: Intl.NumberFormatOptions;
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children elements */
    children?: React.ReactNode;
}
/**
 * Props for the ALSMeter Label component
 */
export interface ALSMeterLabelProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children elements */
    children?: React.ReactNode;
}
/**
 * Props for the ALSMeter Track component
 */
export interface ALSMeterTrackProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children elements (usually the Indicator) */
    children?: React.ReactNode;
}
/**
 * Props for the ALSMeter Indicator component
 */
export interface ALSMeterIndicatorProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the ALSMeter Value component
 */
export interface ALSMeterValueProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Custom render function for the value */
    children?: ((formattedValue: string, value: number) => React.ReactNode) | null;
}
/**
 * ALSMeterRoot - The root component that wraps all meter parts
 *
 * @example
 * ```tsx
 * <ALSMeter.Root value={75}>
 *   <ALSMeter.Label>Progress</ALSMeter.Label>
 *   <ALSMeter.Track>
 *     <ALSMeter.Indicator />
 *   </ALSMeter.Track>
 *   <ALSMeter.Value />
 * </ALSMeter.Root>
 * ```
 */
export declare const ALSMeterRoot: React.ForwardRefExoticComponent<ALSMeterRootProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSMeterLabel - Accessible label for the meter
 */
export declare const ALSMeterLabel: React.ForwardRefExoticComponent<ALSMeterLabelProps & React.RefAttributes<HTMLSpanElement>>;
/**
 * ALSMeterTrack - Contains the indicator and represents the full range
 */
export declare const ALSMeterTrack: React.ForwardRefExoticComponent<ALSMeterTrackProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSMeterIndicator - Visualizes the current value position
 */
export declare const ALSMeterIndicator: React.ForwardRefExoticComponent<ALSMeterIndicatorProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSMeterValue - Displays the current value as text
 */
export declare const ALSMeterValue: React.ForwardRefExoticComponent<ALSMeterValueProps & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=ALSMeter.d.ts.map