goobs-frontend/dist/components/RadioGroup/index.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React } from 'react';
/**
 * Interface representing a single radio option
 */
export interface RadioOption {
    label: string;
    color?: string;
}
/**
 * Custom style overrides for the RadioGroup. Theme selects the palette
 * (light default; sacred/dark are CSS [data-theme] overrides); the remaining
 * keys are caller-supplied overrides applied as CSS custom properties on the
 * root so the selectors stay in CSS while runtime values remain dynamic.
 */
export interface RadioGroupStyles {
    /** Theme variant: 'light' (default), 'dark', or 'sacred'. */
    theme?: 'light' | 'dark' | 'sacred';
    /** Group label color. */
    labelColor?: string;
    /** Group label font size. */
    labelFontSize?: string;
    /** Group label font weight. */
    labelFontWeight?: string | number;
    /** Group label font family. */
    labelFontFamily?: string;
    /** Diameter of each radio ring. */
    radioSize?: string;
    /** Radio ring border color. */
    radioOuterBorderColor?: string;
    /** Radio ring border width. */
    radioOuterBorderWidth?: string;
    /**
     * Color of the checked inner dot. Passing this opts the group into the
     * ring-and-dot presentation (`data-inner-dot` on the root): the checked
     * outer ring stays hollow and the inner dot renders in this color. When
     * omitted, checked state is the default solid-filled outer ring.
     */
    radioInnerColor?: string;
    /** Radio ring border color on hover. */
    radioHoverBorderColor?: string;
    /** Radio ring background on hover. */
    radioHoverBackgroundColor?: string;
    /** Option text color. */
    textColor?: string;
    /** Option text font size. */
    textFontSize?: string;
    /** Option text font family. */
    textFontFamily?: string;
    /** Option text color on hover. */
    textHoverColor?: string;
    /** Padding around each option row. */
    padding?: string;
    /** Space below the group label. */
    marginBottom?: string;
    /** Replaces the control transition with `all <duration> <easing>`. */
    transitionDuration?: string;
    /** Easing used with transitionDuration (default cubic-bezier(0.4, 0, 0.2, 1)); ignored without it. */
    transitionEasing?: string;
}
/**
 * Interface for the props of the RadioGroup component
 */
export interface RadioGroupProps {
    /** The group label */
    label?: string;
    /** Array of radio options */
    options: RadioOption[];
    /**
     * Controlled selected value. When provided, the group is controlled by the
     * caller (back-compat / explicit control). When omitted, the group manages
     * its own selection via `defaultValue` — OR, inside a `<Form>`, the form
     * engine owns the value (Tier-1 binding).
     */
    value?: string;
    /** Default selected value */
    defaultValue?: string;
    /** Name for the radio group */
    name: string;
    /** Label text to display */
    labelText?: string;
    /**
     * Stable test selector. Emitted as `data-field-name` on the root — falls
     * back to `name` when not provided.
     */
    dataFieldName?: string;
    /** Change handler */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /** Custom styles to apply using the theme system */
    styles?: RadioGroupStyles;
}
/**
 * RadioGroup component renders a group of radio buttons with customizable options.
 * It allows selecting a single value from a list of options.
 * @param props The props for the RadioGroup component.
 * @returns The rendered RadioGroup component.
 */
declare const RadioGroup: React.FC<RadioGroupProps>;
export default RadioGroup;
//# sourceMappingURL=index.d.ts.map