# Item

A linha de lista: alguma coisa a esquerda, texto no meio, ação a direita.

Existe porque metade de qualquer tela e isso, e sem uma peça com nome cada
projeto reinventa com div solta e respiro próprio. Não e componente de dado, e de
arranjo.

Compõe com `ItemMedia` à esquerda, `ItemContent` no meio (com `ItemTitle` e
`ItemDescription` dentro) e `ItemActions` à direita. As três colunas existem
para uma só encolher: o miolo corta o texto com reticências, e a mídia e as
ações ficam do tamanho que têm.

Com `interactive` ganha foco e passagem; use junto com `render` de link ou botão,
porque cor de passagem em div não vira alvo de teclado.

## No React Native

Traduz, e não concorre com o `DataList`: ele resolve os quatro finais de uma consulta e devolve cada linha ao `renderItem` sem opinião sobre o que há dentro dela. O `Item` é esse dentro, e serve igualmente à lista de duas escolhas numa folha, que consulta nenhuma tem. A composição do web (`ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`) vira quatro props, pela mesma regra do `PageHeader`: os lugares são sempre os mesmos, e prop nenhuma deixa trocar a ordem das colunas sem querer. Com `onPress` a linha inteira vira alvo, com 44px de altura mínima, mas quando há `actions`, o alvo passa a ser só a área de texto, senão o `Pressable` acessível por cima engoliria o botão da direita como parada do leitor de tela. Dentro de um `DataList` com `onRowPress`, não passe `onPress`: um `Pressable` dentro do outro segura o toque no de dentro, e a linha responderia aqui e nunca lá.

## Importação

```tsx
import { Item } from '@rivocode/ui'
```

## Exemplos

### Linha de lista

```tsx
import { Avatar, Badge, Button, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@rivocode/ui'

export function ListRow() {
  return (
    <div className="flex w-96 flex-col">
      <Item>
        <ItemMedia>
          <Avatar size="sm" fallback="CS" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Clínica São Lucas</ItemTitle>
          <ItemDescription>12.345.678/0001-99</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge tone="success">Paga</Badge>
        </ItemActions>
      </Item>
      <Item>
        <ItemMedia>
          <Avatar size="sm" fallback="TC" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Transportes Cabo Branco</ItemTitle>
          <ItemDescription>98.765.432/0001-10</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge>Aberta</Badge>
        </ItemActions>
      </Item>
    </div>
  )
}
```

### Com moldura

```tsx
import { Avatar, Badge, Button, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@rivocode/ui'

export function WithFrame() {
  return (
    <Item variant="outline" interactive className="w-96">
      <ItemMedia>
        <Avatar fallback="SM" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Supermercado Tambau</ItemTitle>
        <ItemDescription>Ultima nota em 18/08</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="ghost" size="sm">Abrir</Button>
      </ItemActions>
    </Item>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `interactive` | `boolean \| null` |  | 0.4.0 |  |
| `render` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | - | Troca o elemento renderizado mantendo a aparencia: `<Item render={<a href="..." />}>`. |
| `variant` | `"outline" \| "plain" \| null` |  | 0.4.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### ItemActions

O canto de ação, à direita e sem encolher.

Botão de ícone, `Badge` de estado ou o gatilho de um `Menu`. Duas ações já é
muito para uma linha de lista: a terceira em diante vive dentro do menu, senão
cada linha vira uma barra de ferramentas.

### ItemContent

O miolo de texto, entre a mídia e as ações.

É a única parte que encolhe, e é assim que o título corta com reticências em vez
de empurrar os botões para fora da linha. Uma linha de lista que quebra o
arranjo em telas estreitas quase sempre é texto solto aqui, sem esta peça em
volta.

### ItemDescription

A segunda linha, menor e mais apagada, também cortada quando não cabe.

Uma linha, e não um parágrafo: item de lista que cresce em altura desalinha a
lista inteira, e o lugar do texto longo é a tela que o item abre.

### ItemMedia

O canto de imagem, ícone ou avatar.

Não encolhe. É o que garante que o avatar continue redondo quando o título do
lado é longo: sem isso o flex espreme a imagem antes do texto, e a lista fica
com um círculo achatado por linha.

### ItemTitle

A primeira linha do miolo, cortada com reticências quando não cabe.

## Ver também

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)