@payfit/unity-components
Version:
79 lines (78 loc) • 3.17 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ReactNode } from 'react';
import { RadioFieldProps } from 'react-aria-components/RadioGroup';
export { RadioIndicator } from './RadioIndicator.js';
export type { RadioIndicatorProps, RadioState } from './RadioIndicator.js';
export declare const radioButton: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
container?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
label?: import('tailwind-merge').ClassNameValue;
radio?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
container?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
label?: import('tailwind-merge').ClassNameValue;
radio?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
container: string[];
base: string[];
radio: string[];
label: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
container?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
label?: import('tailwind-merge').ClassNameValue;
radio?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
container: string[];
base: string[];
radio: string[];
label: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
container: string[];
base: string[];
radio: string[];
label: string[];
}, undefined, unknown, unknown, undefined>>;
/**
* The `RadioButton` component enables users to select a single option from a set of choices.
* It displays as a circular button that can be selected, and provides visual feedback for various states including selected, unselected, disabled, and read-only.
* @param {RadioButtonProps} props - The props for the `RadioButton` component
* @example
* ```tsx
* import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'
*
* <RadioButtonGroup>
* <RadioButton value="option1">Option 1</RadioButton>
* <RadioButton value="option2">Option 2</RadioButton>
* <RadioButton value="option3" isDisabled>Option 3</RadioButton>
* </RadioButtonGroup>
* ```
* @see {@link RadioButtonProps} for all available props
* @see {@link RadioButtonGroup} for the parent component
*/
declare const RadioButton: import('react').ForwardRefExoticComponent<RadioButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
export interface RadioButtonProps extends Omit<RadioFieldProps, 'children'>, VariantProps<typeof radioButton> {
/**
* The content to display as the radio button's label.
*/
children: ReactNode;
/**
* Optional helper text to display below the radio button.
* Provides additional context or instructions for the option.
*/
helperText?: ReactNode;
}
export { RadioButton };