reakit

const Box: any;

const Button: any;

const Checkbox: any;

const Clickable: any;

const Composite: any;

const CompositeGroup: any;

const CompositeItem: any;

const DialogDisclosure: any;

const Disclosure: any;

const DisclosureContent: any;

const Group: any;

const Input: any;

const MenuArrow: any;

const MenuButton: any;

const MenuDisclosure: any;

const MenuGroup: any;

const MenuItemCheckbox: any;

const MenuItemRadio: any;

const MenuSeparator: any;

const Popover: any;

const PopoverBackdrop: any;

const PopoverDisclosure: any;

const Radio: any;

const Role: any;

const Rover: any;

const Separator: any;

const Tab: any;

const Tabbable: any;

const TabPanel: any;

const ToolbarItem: any;

const ToolbarSeparator: any;

const TooltipArrow: any;

const TooltipReference: any;

const unstable_Combobox: any;

const unstable_ComboboxGridCell: any;

const unstable_ComboboxGridRow: any;

const unstable_ComboboxItem: any;

const unstable_ComboboxList: any;

const unstable_ComboboxOption: any;

const unstable_ComboboxPopover: any;

const unstable_Composite: any;

const unstable_CompositeGroup: any;

const unstable_CompositeItem: any;

const unstable_CompositeItemWidget: any;

const unstable_Form: any;

const unstable_FormCheckbox: <V, P extends DeepPath<V, P>, T extends As = 'input'>(
    props: PropsWithAs<unstable_FormCheckboxOptions<V, P>, T>
) => JSX.Element;

const unstable_FormGroup: <V, P extends DeepPath<V, P>, T extends As = 'fieldset'>(
    props: PropsWithAs<unstable_FormGroupOptions<V, P>, T>
) => JSX.Element;

const unstable_FormInput: <V, P extends DeepPath<V, P>, T extends As = 'input'>(
    props: PropsWithAs<unstable_FormInputOptions<V, P>, T>
) => JSX.Element;

const unstable_FormLabel: <V, P extends DeepPath<V, P>, T extends As = 'label'>(
    props: PropsWithAs<unstable_FormLabelOptions<V, P>, T>
) => JSX.Element;

const unstable_FormMessage: <V, P extends DeepPath<V, P>, T extends As = 'div'>(
    props: PropsWithAs<unstable_FormMessageOptions<V, P>, T>
) => JSX.Element;

const unstable_FormPushButton: <
    V,
    P extends DeepPath<V, P>,
    T extends As = 'button'
>(
    props: PropsWithAs<unstable_FormPushButtonOptions<V, P>, T>
) => JSX.Element;

const unstable_FormRadio: <V, P extends DeepPath<V, P>, T extends As = 'input'>(
    props: PropsWithAs<unstable_FormRadioOptions<V, P>, T>
) => JSX.Element;

const unstable_FormRemoveButton: <
    V,
    P extends DeepPath<V, P>,
    T extends As = 'button'
>(
    props: PropsWithAs<unstable_FormRemoveButtonOptions<V, P>, T>
) => JSX.Element;

const unstable_FormSubmitButton: any;

const unstable_GridCell: any;

const unstable_GridRow: any;

const unstable_useCombobox: any;

const unstable_useComboboxGridCell: any;

const unstable_useComboboxGridRow: any;

const unstable_useComboboxItem: any;

const unstable_useComboboxList: any;

const unstable_useComboboxOption: any;

const unstable_useComboboxPopover: any;

const unstable_useCompositeItemWidget: any;

const unstable_useForm: any;

const unstable_useFormCheckbox: <V, P extends DeepPath<V, P>>(
    options: unstable_FormCheckboxOptions<V, P>,
    htmlProps?: unstable_FormCheckboxHTMLProps
) => unstable_FormCheckboxHTMLProps;

const unstable_useFormGroup: <V, P extends DeepPath<V, P>>(
    options: unstable_FormGroupOptions<V, P>,
    htmlProps?: unstable_FormGroupHTMLProps
) => unstable_FormGroupHTMLProps;

const unstable_useFormInput: <V, P extends DeepPath<V, P>>(
    options: unstable_FormInputOptions<V, P>,
    htmlProps?: unstable_FormInputHTMLProps
) => unstable_FormInputHTMLProps;

const unstable_useFormLabel: <V, P extends DeepPath<V, P>>(
    options: unstable_FormLabelOptions<V, P>,
    htmlProps?: unstable_FormLabelHTMLProps
) => unstable_FormLabelHTMLProps;

const unstable_useFormMessage: <V, P extends DeepPath<V, P>>(
    options: unstable_FormMessageOptions<V, P>,
    htmlProps?: unstable_FormMessageHTMLProps
) => unstable_FormMessageHTMLProps;

const unstable_useFormPushButton: <V, P extends DeepPath<V, P>>(
    options: unstable_FormPushButtonOptions<V, P>,
    htmlProps?: unstable_FormPushButtonHTMLProps
) => unstable_FormPushButtonHTMLProps;

const unstable_useFormRadio: <V, P extends DeepPath<V, P>>(
    options: unstable_FormRadioOptions<V, P>,
    htmlProps?: unstable_FormRadioHTMLProps
) => unstable_FormRadioHTMLProps;

const unstable_useFormRemoveButton: <V, P extends DeepPath<V, P>>(
    options: unstable_FormRemoveButtonOptions<V, P>,
    htmlProps?: unstable_FormRemoveButtonHTMLProps
) => unstable_FormRemoveButtonHTMLProps;

const unstable_useFormSubmitButton: any;

const unstable_useGridCell: any;

const unstable_useGridRow: any;

const useBox: any;

const useButton: any;

const useCheckbox: any;

const useClickable: any;

const useComposite: any;

const useCompositeGroup: any;

const useCompositeItem: any;

const useDialogDisclosure: any;

const useDisclosure: any;

const useDisclosureContent: any;

const useGroup: any;

const useInput: any;

const useMenuArrow: any;

const useMenuButton: any;

const useMenuDisclosure: any;

const useMenuGroup: any;

const useMenuItemCheckbox: any;

const useMenuItemRadio: any;

const useMenuSeparator: any;

const usePopover: any;

const usePopoverBackdrop: any;

const usePopoverDisclosure: any;

const useRadio: any;

const useRole: any;

const useRover: any;

const useSeparator: any;

const useTab: any;

const useTabbable: any;

const useTabPanel: any;

const useToolbarItem: any;

const useToolbarSeparator: any;

const useTooltipArrow: any;

const useTooltipReference: any;

const useVisuallyHidden: any;

const VisuallyHidden: any;

unstable_useComboboxGridState: (
    initialState?: SealedInitialState<unstable_ComboboxGridInitialState>
) => unstable_ComboboxGridStateReturn;

unstable_useComboboxListGridState: (
    initialState?: SealedInitialState<unstable_ComboboxListGridInitialState>
) => unstable_ComboboxListGridStateReturn;

unstable_useComboboxListState: (
    initialState?: SealedInitialState<unstable_ComboboxListInitialState>
) => unstable_ComboboxListStateReturn;

unstable_useComboboxState: (
    initialState?: SealedInitialState<unstable_ComboboxInitialState>
) => unstable_ComboboxStateReturn;

unstable_useCompositeState: (
    initialState?: SealedInitialState<CompositeInitialState>
) => CompositeStateReturn;

unstable_useFormState: <V = Record<any, any>>(
    initialState?: SealedInitialState<unstable_FormInitialState<V>>
) => unstable_FormStateReturn<V>;

unstable_useGridState: (
    initialState?: SealedInitialState<CompositeInitialState>
) => unstable_GridStateReturn;

unstable_useIdState: (
    initialState?: SealedInitialState<Partial<Pick<unstable_IdState, 'baseId'>>>
) => unstable_IdStateReturn;

useCheckboxState: (
    initialState?: SealedInitialState<Partial<Pick<CheckboxState, 'state'>>>
) => CheckboxStateReturn;

useCompositeState: (
    initialState?: SealedInitialState<CompositeInitialState>
) => CompositeStateReturn;

useDialogState: (
    initialState?: SealedInitialState<DialogInitialState>
) => DialogStateReturn;

useDisclosureState: (
    initialState?: SealedInitialState<DisclosureInitialState>
) => DisclosureStateReturn;

useMenuBarState: (
    initialState?: SealedInitialState<MenuBarInitialState>
) => MenuBarStateReturn;

useMenuState: (
    initialState?: SealedInitialState<MenuInitialState>
) => MenuStateReturn;

usePopoverState: (
    initialState?: SealedInitialState<PopoverInitialState>
) => PopoverStateReturn;

useRadioState: (
    initialState?: SealedInitialState<RadioInitialState>
) => RadioStateReturn;

useRoverState: (
    initialState?: SealedInitialState<RoverInitialState>
) => RoverStateReturn;

useTabState: (
    initialState?: SealedInitialState<TabInitialState>
) => TabStateReturn;

useToolbarState: (
    initialState?: SealedInitialState<CompositeInitialState>
) => ToolbarStateReturn;

useTooltipState: (
    initialState?: SealedInitialState<TooltipInitialState>
) => TooltipStateReturn;

type BoxHTMLProps = React.HTMLAttributes<any> &
    React.RefAttributes<any> & {
        /**
         * Function returned by the hook to wrap the element to which html props
         * will be passed.
         */
        wrapElement?: (element: React.ReactNode) => React.ReactNode;
    };

type BoxOptions = {
    /**
     * Options passed to `reakit-system-*`
     * @private
     */
    unstable_system?: any;
};

type BoxProps = BoxOptions & BoxHTMLProps;

type ButtonHTMLProps = ClickableHTMLProps & React.ButtonHTMLAttributes<any>;

type ButtonOptions = ClickableOptions;

type ButtonProps = ButtonOptions & ButtonHTMLProps;

type CheckboxActions = {
    /**
     * Sets `state`.
     */
    setState: React.Dispatch<React.SetStateAction<CheckboxState['state']>>;
};

type CheckboxHTMLProps = ClickableHTMLProps &
    React.InputHTMLAttributes<any> & {
        value?: string | number;
    };

type CheckboxInitialState = Partial<Pick<CheckboxState, 'state'>>;

type CheckboxOptions = ClickableOptions &
    Pick<Partial<CheckboxStateReturn>, 'state' | 'setState'> & {
        /**
         * Checkbox's value is going to be used when multiple checkboxes share the
         * same state. Checking a checkbox with value will add it to the state
         * array.
         */
        value?: string | number;
        /**
         * Checkbox's checked state. If present, it's used instead of `state`.
         */
        checked?: boolean;
    };

type CheckboxProps = CheckboxOptions & CheckboxHTMLProps;

type CheckboxState = {
    /**
     * Stores the state of the checkbox.
     * If checkboxes that share this state have defined a `value` prop, it's
     * going to be an array.
     */
    state: boolean | 'indeterminate' | Array<number | string>;
};

type CheckboxStateReturn = CheckboxState & CheckboxActions;

type ClickableHTMLProps = TabbableHTMLProps;

type ClickableOptions = TabbableOptions & {
    /**
     * Whether or not trigger click on pressing <kbd>Enter</kbd>.
     * @private
     */
    unstable_clickOnEnter?: boolean;
    /**
     * Whether or not trigger click on pressing <kbd>Space</kbd>.
     * @private
     */
    unstable_clickOnSpace?: boolean;
};

type ClickableProps = ClickableOptions & ClickableHTMLProps;

type CompositeActions = unstable_IdActions & {
    /**
     * Registers a composite item.
     * @example
     * const ref = React.useRef();
     * const composite = useCompositeState();
     * React.useEffect(() => {
     *   composite.registerItem({ ref, id: "id" });
     *   return () => composite.unregisterItem("id");
     * }, []);
     */
    registerItem: (item: Item) => void;
    /**
     * Unregisters a composite item.
     * @example
     * const ref = React.useRef();
     * const composite = useCompositeState();
     * React.useEffect(() => {
     *   composite.registerItem({ ref, id: "id" });
     *   return () => composite.unregisterItem("id");
     * }, []);
     */
    unregisterItem: (id: string) => void;
    /**
     * Registers a composite group.
     * @example
     * const ref = React.useRef();
     * const composite = useCompositeState();
     * React.useEffect(() => {
     *   composite.registerGroup({ ref, id: "id" });
     *   return () => composite.unregisterGroup("id");
     * }, []);
     */
    registerGroup: (group: Group) => void;
    /**
     * Unregisters a composite group.
     * @example
     * const ref = React.useRef();
     * const composite = useCompositeState();
     * React.useEffect(() => {
     *   composite.registerGroup({ ref, id: "id" });
     *   return () => composite.unregisterGroup("id");
     * }, []);
     */
    unregisterGroup: (id: string) => void;
    /**
     * Moves focus to a given item ID.
     * @example
     * const composite = useCompositeState();
     * composite.move("item-2"); // focus item 2
     */
    move: (id: string | null) => void;
    /**
     * Moves focus to the next item.
     */
    next: (unstable_allTheWay?: boolean) => void;
    /**
     * Moves focus to the previous item.
     */
    previous: (unstable_allTheWay?: boolean) => void;
    /**
     * Moves focus to the item above.
     */
    up: (unstable_allTheWay?: boolean) => void;
    /**
     * Moves focus to the item below.
     */
    down: (unstable_allTheWay?: boolean) => void;
    /**
     * Moves focus to the first item.
     */
    first: () => void;
    /**
     * Moves focus to the last item.
     */
    last: () => void;
    /**
     * Sorts the `composite.items` based on the items position in the DOM. This
     * is especially useful after modifying the composite items order in the DOM.
     * Most of the time, though, you don't need to manually call this function as
     * the re-ordering happens automatically.
     */
    sort: () => void;
    /**
     * Sets `virtual`.
     */
    unstable_setVirtual: React.Dispatch<
        React.SetStateAction<CompositeState['unstable_virtual']>
    >;
    /**
     * Sets `rtl`.
     * @example
     * const composite = useCompositeState({ rtl: true });
     * composite.setRTL(false);
     */
    setRTL: React.Dispatch<React.SetStateAction<CompositeState['rtl']>>;
    /**
     * Sets `orientation`.
     */
    setOrientation: React.Dispatch<
        React.SetStateAction<CompositeState['orientation']>
    >;
    /**
     * Sets `currentId`. This is different from `composite.move` as this only
     * updates the `currentId` state without moving focus. When the composite
     * widget gets focused by the user, the item referred by the `currentId`
     * state will get focus.
     * @example
     * const composite = useCompositeState({ currentId: "item-1" });
     * // Updates `composite.currentId` to `item-2`
     * composite.setCurrentId("item-2");
     */
    setCurrentId: React.Dispatch<React.SetStateAction<CompositeState['currentId']>>;
    /**
     * Sets `loop`.
     */
    setLoop: React.Dispatch<React.SetStateAction<CompositeState['loop']>>;
    /**
     * Sets `wrap`.
     */
    setWrap: React.Dispatch<React.SetStateAction<CompositeState['wrap']>>;
    /**
     * Sets `shift`.
     */
    setShift: React.Dispatch<React.SetStateAction<CompositeState['shift']>>;
    /**
     * Resets to initial state.
     * @example
     * // On initial render, currentId will be item-1 and loop will be true
     * const composite = useCompositeState({
     *   currentId: "item-1",
     *   loop: true,
     * });
     * // On next render, currentId will be item-2 and loop will be false
     * composite.setCurrentId("item-2");
     * composite.setLoop(false);
     * // On next render, currentId will be item-1 and loop will be true
     * composite.reset();
     */
    reset: () => void;
    /**
     * Sets `includesBaseElement`.
     * @private
     */
    unstable_setIncludesBaseElement: React.Dispatch<
        React.SetStateAction<CompositeState['unstable_includesBaseElement']>
    >;
    /**
     * Sets `hasActiveWidget`.
     * @private
     */
    unstable_setHasActiveWidget: React.Dispatch<
        React.SetStateAction<CompositeState['unstable_hasActiveWidget']>
    >;
};

type CompositeGroupHTMLProps = GroupHTMLProps & unstable_IdHTMLProps;

type CompositeGroupOptions = GroupOptions &
    unstable_IdOptions &
    Pick<CompositeStateReturn, 'registerGroup' | 'unregisterGroup'> &
    Pick<Partial<CompositeStateReturn>, 'currentId' | 'unstable_moves' | 'items'>;

type CompositeGroupProps = CompositeGroupOptions & CompositeGroupHTMLProps;

type CompositeHTMLProps = TabbableHTMLProps;

type CompositeInitialState = unstable_IdInitialState &
    Partial<
        Pick<
            CompositeState,
            | 'unstable_virtual'
            | 'rtl'
            | 'orientation'
            | 'currentId'
            | 'loop'
            | 'wrap'
            | 'shift'
            | 'unstable_includesBaseElement'
        >
    >;

type CompositeItemHTMLProps = ClickableHTMLProps & unstable_IdHTMLProps;

type CompositeItemOptions = ClickableOptions &
    unstable_IdOptions &
    Pick<
        Partial<CompositeStateReturn>,
        | 'unstable_virtual'
        | 'baseId'
        | 'orientation'
        | 'unstable_moves'
        | 'unstable_hasActiveWidget'
    > &
    Pick<
        CompositeStateReturn,
        | 'items'
        | 'currentId'
        | 'registerItem'
        | 'unregisterItem'
        | 'setCurrentId'
        | 'next'
        | 'previous'
        | 'up'
        | 'down'
        | 'first'
        | 'last'
    >;

type CompositeItemProps = CompositeItemOptions & CompositeItemHTMLProps;

type CompositeOptions = TabbableOptions &
    Pick<
        Partial<CompositeStateReturn>,
        | 'baseId'
        | 'unstable_virtual'
        | 'currentId'
        | 'orientation'
        | 'unstable_moves'
        | 'wrap'
        | 'groups'
    > &
    Pick<CompositeStateReturn, 'items' | 'setCurrentId' | 'first' | 'last' | 'move'>;

type CompositeProps = CompositeOptions & CompositeHTMLProps;

type CompositeState = unstable_IdState & {
    /**
     * If enabled, the composite element will act as an
     * [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)
     * container instead of
     * [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).
     * DOM focus will remain on the composite while its items receive virtual focus.
     * @default false
     */
    unstable_virtual: boolean;
    /**
     * Determines how `next` and `previous` functions will behave. If `rtl` is
     * set to `true`, they will be inverted. This only affects the composite
     * widget behavior. You still need to set `dir="rtl"` on HTML/CSS.
     * @default false
     */
    rtl: boolean;
    /**
     * Defines the orientation of the composite widget. If the composite has a
     * single row or column (one-dimensional), the `orientation` value determines
     * which arrow keys can be used to move focus:
     *   - `undefined`: all arrow keys work.
     *   - `horizontal`: only left and right arrow keys work.
     *   - `vertical`: only up and down arrow keys work.
     *
     * It doesn't have any effect on two-dimensional composites.
     * @default undefined
     */
    orientation?: Orientation;
    /**
     * Lists all the composite items with their `id`, DOM `ref`, `disabled` state
     * and `groupId` if any. This state is automatically updated when
     * `registerItem` and `unregisterItem` are called.
     * @example
     * const composite = useCompositeState();
     * composite.items.forEach((item) => {
     *   const { id, ref, disabled, groupId } = item;
     *   ...
     * });
     */
    items: Item[];
    /**
     * Lists all the composite groups with their `id` and DOM `ref`. This state
     * is automatically updated when `registerGroup` and `unregisterGroup` are
     * called.
     * @example
     * const composite = useCompositeState();
     * composite.groups.forEach((group) => {
     *   const { id, ref } = group;
     *   ...
     * });
     */
    groups: Group[];
    /**
     * The current focused item `id`.
     *   - `undefined` will automatically focus the first enabled composite item.
     *   - `null` will focus the base composite element and users will be able to
     * navigate out of it using arrow keys.
     *   - If `currentId` is initially set to `null`, the base composite element
     * itself will have focus and users will be able to navigate to it using
     * arrow keys.
     * @default undefined
     * @example
     * // First enabled item has initial focus
     * useCompositeState();
     * // Base composite element has initial focus
     * useCompositeState({ currentId: null });
     * // Specific composite item element has initial focus
     * useCompositeState({ currentId: "item-id" });
     */
    currentId?: string | null;
    /**
     * On one-dimensional composites:
     *   - `true` loops from the last item to the first item and vice-versa.
     *   - `horizontal` loops only if `orientation` is `horizontal` or not set.
     *   - `vertical` loops only if `orientation` is `vertical` or not set.
     *   - If `currentId` is initially set to `null`, the composite element will
     * be focused in between the last and first items.
     *
     * On two-dimensional composites:
     *   - `true` loops from the last row/column item to the first item in the
     * same row/column and vice-versa. If it's the last item in the last row, it
     * moves to the first item in the first row and vice-versa.
     *   - `horizontal` loops only from the last row item to the first item in
     * the same row.
     *   - `vertical` loops only from the last column item to the first item in
     * the column row.
     *   - If `currentId` is initially set to `null`, vertical loop will have no
     * effect as moving down from the last row or up from the first row will
     * focus the composite element.
     *   - If `wrap` matches the value of `loop`, it'll wrap between the last
     * item in the last row or column and the first item in the first row or
     * column and vice-versa.
     * @default false
     */
    loop: boolean | Orientation;
    /**
     * **Has effect only on two-dimensional composites**. If enabled, moving to
     * the next item from the last one in a row or column will focus the first
     * item in the next row or column and vice-versa.
     *   - `true` wraps between rows and columns.
     *   - `horizontal` wraps only between rows.
     *   - `vertical` wraps only between columns.
     *   - If `loop` matches the value of `wrap`, it'll wrap between the last
     * item in the last row or column and the first item in the first row or
     * column and vice-versa.
     * @default false
     */
    wrap: boolean | Orientation;
    /**
     * **Has effect only on two-dimensional composites**. If enabled, moving up
     * or down when there's no next item or the next item is disabled will shift
     * to the item right before it.
     * @default false
     */
    shift: boolean;
    /**
     * Stores the number of moves that have been performed by calling `move`,
     * `next`, `previous`, `up`, `down`, `first` or `last`.
     * @default 0
     */
    unstable_moves: number;
    /**
     * @default false
     * @private
     */
    unstable_hasActiveWidget: boolean;
    /**
     * @default false
     * @private
     */
    unstable_includesBaseElement: boolean;
};

type CompositeStateReturn = unstable_IdStateReturn &
    CompositeState &
    CompositeActions;

type DialogActions = DisclosureActions & {
    /**
     * Sets `modal`.
     */
    setModal: React.Dispatch<React.SetStateAction<DialogState['modal']>>;
};

type DialogDisclosureHTMLProps = DisclosureHTMLProps;

type DialogDisclosureOptions = DisclosureOptions &
    Pick<Partial<DialogStateReturn>, 'unstable_disclosureRef'> &
    Pick<DialogStateReturn, 'toggle'>;

type DialogDisclosureProps = DialogDisclosureOptions & DialogDisclosureHTMLProps;

type DialogInitialState = DisclosureInitialState &
    Partial<Pick<DialogState, 'modal'>>;

type DialogState = DisclosureState & {
    /**
     * Toggles Dialog's `modal` state.
     *   - Non-modal: `preventBodyScroll` doesn't work and focus is free.
     *   - Modal: `preventBodyScroll` is automatically enabled, focus is
     * trapped within the dialog and the dialog is rendered within a `Portal`
     * by default.
     */
    modal: boolean;
    /**
     * @private
     */
    unstable_disclosureRef: React.MutableRefObject<HTMLElement | null>;
};

type DialogStateReturn = DisclosureStateReturn & DialogState & DialogActions;

type DisclosureActions = unstable_IdActions & {
    /**
     * Changes the `visible` state to `true`
     */
    show: () => void;
    /**
     * Changes the `visible` state to `false`
     */
    hide: () => void;
    /**
     * Toggles the `visible` state
     */
    toggle: () => void;
    /**
     * Sets `visible`.
     */
    setVisible: React.Dispatch<React.SetStateAction<DisclosureState['visible']>>;
    /**
     * Sets `animated`.
     */
    setAnimated: React.Dispatch<React.SetStateAction<DisclosureState['animated']>>;
    /**
     * Stops animation. It's called automatically if there's a CSS transition.
     */
    stopAnimation: () => void;
};

type DisclosureContentHTMLProps = RoleHTMLProps;

type DisclosureContentOptions = RoleOptions &
    Pick<
        Partial<DisclosureStateReturn>,
        'baseId' | 'visible' | 'animating' | 'animated' | 'stopAnimation'
    >;

type DisclosureContentProps = DisclosureContentOptions & DisclosureContentHTMLProps;

type DisclosureHTMLProps = ButtonHTMLProps;

type DisclosureInitialState = unstable_IdInitialState &
    Partial<Pick<DisclosureState, 'visible' | 'animated'>>;

type DisclosureOptions = ButtonOptions &
    Pick<Partial<DisclosureStateReturn>, 'visible'> &
    Pick<DisclosureStateReturn, 'toggle' | 'baseId'>;

type DisclosureProps = DisclosureOptions & DisclosureHTMLProps;

type DisclosureState = unstable_IdState & {
    /**
     * Whether it's visible or not.
     */
    visible: boolean;
    /**
     * If `true`, `animating` will be set to `true` when `visible` is updated.
     * It'll wait for `stopAnimation` to be called or a CSS transition ends.
     * If `animated` is set to a `number`, `stopAnimation` will be called only
     * after the same number of milliseconds have passed.
     */
    animated: boolean | number;
    /**
     * Whether it's animating or not.
     */
    animating: boolean;
};

type DisclosureStateReturn = DisclosureState & DisclosureActions;

type GroupHTMLProps = RoleHTMLProps;

type GroupOptions = RoleOptions;

type GroupProps = GroupOptions & GroupHTMLProps;

type InputHTMLProps = TabbableHTMLProps & React.InputHTMLAttributes<any>;

type InputOptions = TabbableOptions;

type InputProps = InputOptions & InputHTMLProps;

type MenuActions = MenuBarActions & PopoverActions;

type MenuArrowHTMLProps = PopoverArrowHTMLProps;

type MenuArrowOptions = PopoverArrowOptions;

type MenuArrowProps = MenuArrowOptions & MenuArrowHTMLProps;

type MenuBarActions = CompositeActions & {
    /**
     * Updates checkboxes and radios values within the menu.
     */
    unstable_setValue: (name: string, value?: any) => void;
};

type MenuBarInitialState = CompositeInitialState &
    Partial<Pick<MenuBarState, 'unstable_values'>>;

type MenuBarState = CompositeState & {
    /**
     * Stores the values of radios and checkboxes within the menu.
     */
    unstable_values: Record<string, any>;
};

type MenuBarStateReturn = MenuBarState & MenuBarActions;

type MenuButtonHTMLProps = PopoverDisclosureHTMLProps;

type MenuButtonOptions = PopoverDisclosureOptions &
    Pick<
        Partial<MenuStateReturn>,
        | 'hide'
        | 'unstable_popoverStyles'
        | 'unstable_arrowStyles'
        | 'currentId'
        | 'unstable_moves'
        | 'move'
    > &
    Pick<MenuStateReturn, 'show' | 'placement' | 'first' | 'last'>;

type MenuButtonProps = MenuButtonOptions & MenuButtonHTMLProps;