@payfit/unity-components
Version:
71 lines (70 loc) • 3.46 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { AriaToggleButtonGroupProps } from 'react-aria/useToggleButtonGroup';
import { Key } from 'react-stately';
export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:group uy:flex uy:gap-100 uy:flex-wrap", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:group uy:flex uy:gap-100 uy:flex-wrap", unknown, unknown, undefined>>;
export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'style'> {
/**
* The SelectableButton components to render within the group.
* Each child must be a SelectableButton component with a unique value prop.
*/
children: React.ReactNode;
/**
* The currently selected values in controlled mode.
* Use this prop along with onChange to control the selection state externally.
* The values should match the value props of the SelectableButton children.
*/
value?: AriaToggleButtonGroupProps['selectedKeys'];
/**
* The initially selected values in uncontrolled mode.
* Use this prop to set default selections without controlling the state.
* The values should match the value props of the SelectableButton children.
*/
defaultValue?: AriaToggleButtonGroupProps['defaultSelectedKeys'];
/**
* Callback fired when the selection changes.
* Receives an array of the currently selected values.
* Required when using the component in controlled mode.
*/
onChange?: (keys: Key[]) => void;
/**
* Callback fired when focus leaves the group.
* Useful for form validation and tracking user interaction.
*/
onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
/**
* Marks the group and all contained buttons as invalid, applying error styles.
* Use this to indicate a validation error for the group.
*/
isInvalid?: boolean;
className?: string;
}
/**
* A group component that manages the selection state of multiple SelectableButton components.
* Supports both single and multiple selection modes with controlled and uncontrolled usage patterns.
* @component
* @param {SelectableButtonGroupProps} props - Props for configuring the group's behavior and selection mode
* @see {@link SelectableButtonGroupProps} for all available props
* @example
* ```tsx
* import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
*
* function Example() {
* const [selected, setSelected] = useState(['option1'])
*
* return (
* <SelectableButtonGroup
* selectionMode="multiple"
* value={selected}
* onChange={keys => setSelected(keys)}
* >
* <SelectableButton value="option1">First Option</SelectableButton>
* <SelectableButton value="option2">Second Option</SelectableButton>
* </SelectableButtonGroup>
* )
* }
* ```
* @remarks
* [API](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-selectablebuttongroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/944b5d-selectable-button)
*/
declare const SelectableButtonGroup: import('react').ForwardRefExoticComponent<SelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
export { SelectableButtonGroup };