import * as React from 'react'; import { type FieldProps } from '../_shared/index.js'; import { type SelectionColor, type SelectionItem, type SelectionSize, type SelectionVariant } from '../../../ui/selection-group.js'; export type CheckboxGroupVariant = SelectionVariant | 'strikethrough' | 'fancy-strikethrough' | 'avatar-inline' | 'box' | 'box-pills' | 'info-box'; export type CheckboxGroupColor = SelectionColor; export type CheckboxGroupSize = SelectionSize; export type CheckboxGroupItem = SelectionItem & { /** Item-specific validation message. */ error?: React.ReactNode; /** Displays the checkbox as mixed for parent selections. */ indeterminate?: boolean; /** Visual shown after an item, such as a validation status icon. */ trailingVisual?: React.ReactNode; }; interface CheckboxGroupControlProps extends Omit, 'onChange'> { /** Array of checkbox items */ items: CheckboxGroupItem[]; /** Controlled selected values */ value?: string[]; /** Default selected values for uncontrolled mode */ defaultValue?: string[]; /** Callback when selection changes */ onValueChange?: (value: string[]) => void; /** Visual variant */ variant?: CheckboxGroupVariant; /** Size of the checkbox items */ size?: CheckboxGroupSize; /** Layout orientation */ orientation?: 'horizontal' | 'vertical'; /** Gap between items */ gap?: 'sm' | 'md' | 'lg'; /** Color theme */ color?: CheckboxGroupColor; /** Whether to use filled/muted background for card variants */ filled?: boolean; /** Whether the entire group is disabled */ disabled?: boolean; /** Accessible label for the group */ 'aria-label'?: string; /** ID of element that labels the group */ 'aria-labelledby'?: string; } export interface CheckboxGroupProps extends CheckboxGroupControlProps, Omit { } declare const CheckboxGroup: React.ForwardRefExoticComponent>; export { CheckboxGroup };