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

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

import * as React from "react";
/**
 * Size variants for the radio component
 */
export type ALSRadioSize = "sm" | "md" | "lg";
/**
 * Color variants for the radio component
 */
export type ALSRadioVariant = "primary" | "secondary" | "success" | "error";
/**
 * Orientation for the radio group layout
 */
export type ALSRadioOrientation = "horizontal" | "vertical";
/**
 * Props for individual radio option
 */
export interface ALSRadioOption {
    /** Unique value for the radio option */
    value: string;
    /** Display label for the radio option */
    label: React.ReactNode;
    /** Whether this option is disabled */
    disabled?: boolean;
    /** Optional description text */
    description?: string;
}
/**
 * Props for ALSRadioGroup - the root container component
 */
export interface ALSRadioGroupProps {
    /** Array of radio options to render */
    options: ALSRadioOption[];
    /** The name attribute for the radio group (used in forms) */
    name?: string;
    /** Default selected value (uncontrolled) */
    defaultValue?: string;
    /** Controlled selected value */
    value?: string;
    /** Callback when value changes */
    onValueChange?: (value: string) => void;
    /** Size variant */
    size?: ALSRadioSize;
    /** Color variant */
    variant?: ALSRadioVariant;
    /** Layout orientation */
    orientation?: ALSRadioOrientation;
    /** Whether the entire group is disabled */
    disabled?: boolean;
    /** Whether the group is read-only */
    readOnly?: boolean;
    /** Whether a selection is required */
    required?: boolean;
    /** Optional group label */
    label?: React.ReactNode;
    /** Optional error message */
    error?: string;
    /** Optional helper text */
    helperText?: string;
    /** Additional CSS class */
    className?: string;
    /** Additional inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for standalone ALSRadioItem component
 */
export interface ALSRadioItemProps {
    /** Unique value for the radio */
    value: string;
    /** Display label */
    label?: React.ReactNode;
    /** Optional description */
    description?: string;
    /** Whether disabled */
    disabled?: boolean;
    /** Size variant */
    size?: ALSRadioSize;
    /** Color variant */
    variant?: ALSRadioVariant;
    /** Additional CSS class */
    className?: string;
    /** Additional inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the radio indicator (the visual checkmark)
 */
export interface ALSRadioIndicatorProps {
    /** Size variant */
    size?: ALSRadioSize;
    /** Color variant */
    variant?: ALSRadioVariant;
    /** Additional CSS class */
    className?: string;
    /** Additional inline styles */
    style?: React.CSSProperties;
}
/**
 * ALSRadioIndicator - The visual indicator inside the radio button
 */
export declare const ALSRadioIndicator: React.ForwardRefExoticComponent<ALSRadioIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
/**
 * ALSRadioItem - Individual radio button with label
 */
export declare const ALSRadioItem: React.ForwardRefExoticComponent<ALSRadioItemProps & React.RefAttributes<HTMLLabelElement>>;
/**
 * ALSRadioGroup - The main container component for radio buttons
 *
 * @example
 * ```tsx
 * <ALSRadioGroup
 *   label="Select your preference"
 *   options={[
 *     { value: 'option1', label: 'Option 1' },
 *     { value: 'option2', label: 'Option 2' },
 *   ]}
 *   defaultValue="option1"
 *   onValueChange={(value) => console.log(value)}
 * />
 * ```
 */
export declare const ALSRadioGroupRoot: React.FC<ALSRadioGroupProps>;
/**
 * ALSRadioRoot - Wrapper around RadioGroup from Base UI for custom composition
 */
export declare const ALSRadioRoot: React.ForwardRefExoticComponent<Omit<import("@base-ui-components/react/radio-group").RadioGroupProps & React.RefAttributes<HTMLDivElement> & {
    size?: ALSRadioSize;
    variant?: ALSRadioVariant;
    orientation?: ALSRadioOrientation;
    className?: string;
    children?: React.ReactNode;
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=ALSRadio.d.ts.map