Toolbar

Toolbar groups controls into one tab stop. Tab to it, then move with the arrow keys, Home and End:

BoldItalicStrikethrough

Pressed: nothing yet

ToolbarDemo.tsx

import { Paragraph, View } from '@hozo/core'
import { Button, Toolbar } from '@hozo/ui'
import { useState } from 'react'

export function ToolbarDemo() {
  const [last, setLast] = useState('nothing yet')
  return (
    <View className="items-start gap-3">
      <Toolbar
        accessibilityLabel="Formatting"
        items={[
          {
            render: (props) => (
              <Button {...props} tone="quiet" size="sm" onPress={() => setLast('Bold')}>
                Bold
              </Button>
            ),
          },
          {
            render: (props) => (
              <Button {...props} tone="quiet" size="sm" onPress={() => setLast('Italic')}>
                Italic
              </Button>
            ),
          },
          {
            disabled: true,
            render: (props) => (
              <Button {...props} tone="quiet" size="sm" disabled>
                Strikethrough
              </Button>
            ),
          },
        ]}
      />
      <Paragraph className="text-sm text-hozo-text-body">{`Pressed: ${last}`}</Paragraph>
    </View>
  )
}

• items: { render, disabled? } for each control. render is given the props that make the control part of the toolbar: a roving tabIndex, the key handler, a focus handler and a ref. Spread them onto your control, as the example does with Button.
• One tab stop. Tab enters the toolbar on the control used last, and leaves it on the next Tab. A disabled item is skipped.
• orientation is horizontal by default, so Left and Right move. vertical uses Up and Down. wrap makes the ends wrap around.
• accessibilityLabel names the toolbar, so a reader hears what the controls are for.