@devopness/ui-react
Version:
Devopness Design System React Components - Painless essential DevOps to everyone
59 lines (58 loc) • 2.08 kB
TypeScript
import { default as React } from 'react';
import { ErrorMessage } from '../../Primitives';
import { Unwrap } from '../../types';
import { Icon } from '../../../icons';
/**
* Props for individual radio card inputs
*/
type CardRadioCardProps = Unwrap<Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value'>> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id'> & {
/** Icon to display in the card */
icon: Icon | Omit<string, Icon> | {
name: Icon | Omit<string, Icon>;
color?: string;
};
/** Label for the card */
label: string;
/** Additional props for the input element */
inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'type' | 'value'> & {
ref?: React.Ref<HTMLInputElement>;
};
}>;
/**
* Props for the RadioSelectCards component
*/
type RadioSelectCardsProps = Unwrap<Pick<CardRadioCardProps, 'name' | 'inputProps'> & Pick<React.HTMLAttributes<HTMLDivElement>, 'style'> & {
/** Array of card data to render */
data: Unwrap<Omit<CardRadioCardProps, 'name' | 'inputProps'> & {
defaultChecked?: boolean;
checked?: boolean;
disabled?: boolean;
}>[];
/** Loader state */
isLoading?: boolean;
/** External error to display */
error?: React.ComponentPropsWithoutRef<typeof ErrorMessage>['error'];
}>;
/**
* RadioSelectCards component
*
* Displays a group of selectable radio cards. Supports loading state and error display.
*
* @example
* ```tsx
* const options = [
* { value: 'option1', label: 'Option 1', icon: 'icon1' },
* { value: 'option2', label: 'Option 2', icon: { name: 'icon2', color: 'blue' } },
* ]
*
* <RadioSelectCards
* name="exampleRadio"
* data={options}
* isLoading={false}
* error="Please select an option"
* />
* ```
*/
declare const RadioSelectCards: ({ data, style, isLoading, error, name, inputProps: sharedInputProps, }: RadioSelectCardsProps) => import("react/jsx-runtime").JSX.Element;
export { RadioSelectCards };
export type { RadioSelectCardsProps };