Composite

import * as React from 'react'
import { Composite } from '@hamur/react/composite'

const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry', 'Grape', 'Lemon', 'Mango']

export default function CompositeListboxExample() {
  const [selected, setSelected] = React.useState(fruits[0])
  return (
    <div className="stack">
      <Composite.Root
        className="composite-list"
        role="listbox"
        aria-label="Fruit"
        orientation="vertical"
        loopFocus
        typeahead
        enableHomeAndEndKeys
        onHighlightedIndexChange={(index, eventDetails) => {
          if (eventDetails.reason === 'keyboard') setSelected(fruits[index])
        }}
      >
        {fruits.map((fruit) => (
          <Composite.Item
            key={fruit}
            className="composite-option"
            role="option"
            aria-selected={selected === fruit}
            onClick={() => setSelected(fruit)}
          >
            {fruit}
          </Composite.Item>
        ))}
      </Composite.Root>
      <p className="muted">Selected: {selected}</p>
    </div>
  )
}

import * as React from 'react'
import { Composite } from '@hamur/react/composite'

const rows = [
  ['Top left', 'Top', 'Top right'],
  ['Left', 'Center', 'Right'],
  ['Bottom left', 'Bottom', 'Bottom right'],
]
const cells = rows.flat()

export default function CompositeGridExample() {
  const [align, setAlign] = React.useState(4)
  return (
    <div className="stack">
      <Composite.Root
        className="composite-grid"
        role="grid"
        aria-label="Alignment"
        cols={3}
        loopFocus={false}
        enableHomeAndEndKeys
        defaultHighlightedIndex={4}
        onHighlightedIndexChange={(index) => setAlign(index)}
      >
        {rows.map((row, r) => (
          <div key={r} className="composite-row" role="row">
            {row.map((cell, c) => (
              <Composite.Item
                key={cell}
                className="composite-cell"
                role="gridcell"
                aria-label={cell}
                aria-selected={align === r * 3 + c}
              />
            ))}
          </div>
        ))}
      </Composite.Root>
      <p className="muted">Alignment: {cells[align]}</p>
    </div>
  )
}

import * as React from 'react'
import { Composite } from '@hamur/react/composite'

const plans = ['Free', 'Pro', 'Team', 'Enterprise']

export default function CompositeControlledExample() {
  const [index, setIndex] = React.useState(0)
  const [reason, setReason] = React.useState('none yet')
  const [plan, setPlan] = React.useState(plans[0])
  return (
    <div className="stack">
      <Composite.Root
        className="composite-radios"
        role="radiogroup"
        aria-label="Plan"
        highlightedIndex={index}
        onHighlightedIndexChange={(next, eventDetails) => {
          setIndex(next)
          setReason(eventDetails.reason)
          if (eventDetails.reason === 'keyboard') setPlan(plans[next])
        }}
      >
        {plans.map((name) => (
          <Composite.Item
            key={name}
            className="composite-radio"
            role="radio"
            aria-checked={plan === name}
            onClick={() => setPlan(name)}
          >
            {name}
          </Composite.Item>
        ))}
      </Composite.Root>
      <p className="muted">
        Active index: {index} · reason: {reason}
      </p>
      <p className="muted">Plan: {plan}</p>
    </div>
  )
}