analytica-frontend-lib/dist/Radio/index.d.ts

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import * as react from 'react';
import { ReactNode, InputHTMLAttributes, HTMLAttributes } from 'react';
import { StoreApi } from 'zustand';

/**
 * Radio size variants
 */
type RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';
/**
 * Radio visual state
 */
type RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
/**
 * Radio component props interface
 */
type RadioProps = {
    /** Label text to display next to the radio */
    label?: ReactNode;
    /** Size variant of the radio */
    size?: RadioSize;
    /** Visual state of the radio */
    state?: RadioState;
    /** Error message to display */
    errorMessage?: string;
    /** Helper text to display */
    helperText?: string;
    /** Additional CSS classes */
    className?: string;
    /** Label CSS classes */
    labelClassName?: string;
    /** Radio group name */
    name?: string;
    /** Radio value */
    value?: string;
    /** Default checked state for uncontrolled radios */
    defaultChecked?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'defaultChecked'>;
/**
 * Radio component for Analytica Ensino platforms
 *
 * A radio button component with essential states, sizes and themes.
 * Uses the Analytica Ensino Design System colors from styles.css with automatic
 * light/dark mode support. Includes Text component integration for consistent typography.
 *
 * @example
 * ```tsx
 * // Basic radio
 * <Radio name="option" value="1" label="Option 1" />
 *
 * // Small size
 * <Radio size="small" name="option" value="2" label="Small option" />
 *
 * // Invalid state
 * <Radio state="invalid" name="option" value="3" label="Required field" />
 *
 * // Disabled state
 * <Radio disabled name="option" value="4" label="Disabled option" />
 *
 * // Default checked (uncontrolled)
 * <Radio defaultChecked name="option" value="5" label="Initially checked" />
 * ```
 */
declare const Radio: react.ForwardRefExoticComponent<{
    /** Label text to display next to the radio */
    label?: ReactNode;
    /** Size variant of the radio */
    size?: RadioSize;
    /** Visual state of the radio */
    state?: RadioState;
    /** Error message to display */
    errorMessage?: string;
    /** Helper text to display */
    helperText?: string;
    /** Additional CSS classes */
    className?: string;
    /** Label CSS classes */
    labelClassName?: string;
    /** Radio group name */
    name?: string;
    /** Radio value */
    value?: string;
    /** Default checked state for uncontrolled radios */
    defaultChecked?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "defaultChecked" | "type"> & react.RefAttributes<HTMLInputElement>>;
/**
 * RadioGroup store interface
 */
interface RadioGroupStore {
    value: string;
    setValue: (value: string) => void;
    onValueChange?: (value: string) => void;
    disabled: boolean;
    name: string;
}
type RadioGroupStoreApi = StoreApi<RadioGroupStore>;
/**
 * Hook to access RadioGroup store
 */
declare const useRadioGroupStore: (externalStore?: RadioGroupStoreApi) => RadioGroupStoreApi;
/**
 * RadioGroup component props interface
 */
type RadioGroupProps = {
    /** Current selected value */
    value?: string;
    /** Default selected value for uncontrolled usage */
    defaultValue?: string;
    /** Callback when selection changes */
    onValueChange?: (value: string) => void;
    /** Group name for all radios */
    name?: string;
    /** Disabled state for the entire group */
    disabled?: boolean;
    /** Additional CSS classes */
    className?: string;
    /** Children components */
    children: ReactNode;
} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
/**
 * RadioGroup component for flexible radio group composition
 *
 * Uses Zustand for state management with automatic store injection.
 * Allows complete control over layout and styling by composing with RadioGroupItem.
 *
 * @example
 * ```tsx
 * <RadioGroup defaultValue="option1" onValueChange={setValue}>
 *   <div className="flex items-center gap-3">
 *     <RadioGroupItem value="option1" id="r1" />
 *     <label htmlFor="r1">Option 1</label>
 *   </div>
 *   <div className="flex items-center gap-3">
 *     <RadioGroupItem value="option2" id="r2" />
 *     <label htmlFor="r2">Option 2</label>
 *   </div>
 * </RadioGroup>
 * ```
 */
declare const RadioGroup: react.ForwardRefExoticComponent<{
    /** Current selected value */
    value?: string;
    /** Default selected value for uncontrolled usage */
    defaultValue?: string;
    /** Callback when selection changes */
    onValueChange?: (value: string) => void;
    /** Group name for all radios */
    name?: string;
    /** Disabled state for the entire group */
    disabled?: boolean;
    /** Additional CSS classes */
    className?: string;
    /** Children components */
    children: ReactNode;
} & Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & react.RefAttributes<HTMLDivElement>>;
/**
 * RadioGroupItem component props interface
 */
type RadioGroupItemProps = {
    /** Value for this radio item */
    value: string;
    /** Store reference (automatically injected by RadioGroup) */
    store?: RadioGroupStoreApi;
    /** Disabled state for this specific item */
    disabled?: boolean;
    /** Size variant */
    size?: RadioSize;
    /** Visual state */
    state?: RadioState;
    /** Additional CSS classes */
    className?: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'value' | 'checked' | 'onChange' | 'size'>;
/**
 * RadioGroupItem component for use within RadioGroup
 *
 * A radio button without label that works within RadioGroup context.
 * Provides just the radio input for maximum flexibility in composition.
 *
 * @example
 * ```tsx
 * <RadioGroup defaultValue="option1">
 *   <div className="flex items-center gap-3">
 *     <RadioGroupItem value="option1" id="r1" />
 *     <label htmlFor="r1">Option 1</label>
 *   </div>
 * </RadioGroup>
 * ```
 */
declare const RadioGroupItem: react.ForwardRefExoticComponent<{
    /** Value for this radio item */
    value: string;
    /** Store reference (automatically injected by RadioGroup) */
    store?: RadioGroupStoreApi;
    /** Disabled state for this specific item */
    disabled?: boolean;
    /** Size variant */
    size?: RadioSize;
    /** Visual state */
    state?: RadioState;
    /** Additional CSS classes */
    className?: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "checked" | "type" | "name" | "onChange"> & react.RefAttributes<HTMLInputElement>>;

export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioProps, Radio as default, useRadioGroupStore };