# ame-miniapp-components-web

> Biblioteca de componentes para construção de miniapps web

Latest version **0.11.0** (published 2023-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install ame-miniapp-components-web
pnpm add ame-miniapp-components-web
yarn add ame-miniapp-components-web
bun add ame-miniapp-components-web
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.11.0 |
| Published | 2023-07-04 |
| First published | 2021-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 12.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zupodaniel, fabio.oshiro, services_calindra |

## Links

- npm: https://www.npmjs.com/package/ame-miniapp-components-web
- npm.io page: https://npm.io/package/ame-miniapp-components-web

## Dependencies (8)

- [chart.js](https://npm.io/package/chart.js.md) ^3.8.0
- [loglevel](https://npm.io/package/loglevel.md) ^1.7.1
- [react-imask](https://npm.io/package/react-imask.md) 6.4.2
- [qrcode.react](https://npm.io/package/qrcode.react.md) ^3.1.0
- [react-chartjs-2](https://npm.io/package/react-chartjs-2.md) ^4.2.0
- [react-swipeable](https://npm.io/package/react-swipeable.md) ^7.0.0
- [react-lottie-player](https://npm.io/package/react-lottie-player.md) ^1.4.3
- [react-data-table-component](https://npm.io/package/react-data-table-component.md) 7.5.3

## Recent versions

- 0.11.0 (latest) — 2023-07-04
- 0.11.0-beta3 (beta) — 2023-06-22
- 0.11.0-beta2 — 2023-05-09
- 0.11.0-beta1 — 2023-04-20
- 0.10.0 — 2023-03-29
- 0.9.0 — 2023-01-26
- 0.9.0-beta1 — 2023-01-26
- 0.8.12 — 2022-12-27
- 0.8.12-beta7 — 2022-12-22
- 0.8.12-beta6 — 2022-12-16
- 0.8.12-beta5 — 2022-12-14
- 0.8.12-beta4 — 2022-12-09
- 0.8.12-beta2 — 2022-12-08
- 0.8.12-beta0 — 2022-12-08
- 0.8.11 — 2022-11-29
- … 36 more at https://npm.io/package/ame-miniapp-components-web/versions

## README

# Ame Mini-App Components Web

# Tokens

## Bordas

Alguns componentes experimentam o uso de bordas. Você poderá alterar propriedades básicas de borda como espessura ou cor.

### borderWidth

Os valores abaixo indicam espessuras de borda, começando da mais fina para a mais grossa:

| token    | valor |
|----------|-------|
| none     | 0px   |
| hairline | 1px   |
| thin     | 2px   |
| thick    | 4px   |
| heavy    | 8px   |

### borderRadius

Abaixo os valores aceitos para arredondamento das bordas

| token    | valor |
|----------|-------|
| none     | 0px   |
| micro    | 4px   |
| small    | 8px   |
| medium   | 16px  |
| pill     | 500px |
| circular | 50%   |


### borderColor

### [Veja aqui quais os tokens de corque você pode utilizar no borderColor](#Cores)


## Cores

Os padrões de design estabelem que apenas as cores abaixo podem ser utilizadas. As cores são inseridas através dos tokens em componentes que possuem tais propriedades como: borderColor, color, backgroundColor e etc.

### Primary

<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #b9d5ff; min-width: 240px; color: #1c1c1c; padding: 4px;">primary-100</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #599cff; min-width: 240px; color: #fff; padding: 4px;">primary-300</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #0d6efd; min-width: 240px; color: #fff; padding: 4px;">primary</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #0051c8; min-width: 240px; color: #fff; padding: 4px;">primary-700</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #003584; min-width: 240px; color: #fff; padding: 4px;">primary-900</div>

### Secondary

<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #ffdd99; min-width: 240px; color: #1c1c1c; padding: 4px;">secondary-300</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #ffc247; min-width: 240px; color: #fff; padding: 4px;">secondary</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #f5a300; min-width: 240px; color: #fff; padding: 4px;">primary-700</div>

### Neutral

<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #ffffff; min-width: 240px; color: #1c1c1c; padding: 4px;">neutral-100</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #f2f2f2; min-width: 240px; color: #1c1c1c; padding: 4px;">neutral-300</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #c7c7c7; min-width: 240px; color: #fff; padding: 4px;">neutral-500</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #737373; min-width: 240px; color: #fff; padding: 4px;">neutral-700</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #1c1c1c; min-width: 240px; color: #fff; padding: 4px;">neutral-900</div>

### Feedback

<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #5ce59d; min-width: 240px; color: #1c1c1c; padding: 4px;">positive-300</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #00401e; min-width: 240px; color: #fff; padding: 4px;">positive-700</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #ffefd6; min-width: 240px; color: #1c1c1c; padding: 4px;">warning-300</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #b84e07; min-width: 240px; color: #fff; padding: 4px;">warning-700</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #ff9595; min-width: 240px; color: #1c1c1c; padding: 4px;">negative-300</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #8c0e0e; min-width: 240px; color: #fff; padding: 4px;">negative-700</div>

### Extras

<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #2962ff; min-width: 240px; color: #fff; padding: 4px;">support-01</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #fff; min-width: 240px; color: #1c1c1c; padding: 4px;">support-02</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #542303; min-width: 240px; color: #fff; padding: 4px;">support-03</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: #fafafa; min-width: 240px; color: #1c1c1c; padding: 4px;">background</div>
<div style="height: 120px; display: flex; align-items: center; justify-content: center;background: transparent; min-width: 240px; color: #1c1c1c; padding: 4px;">none</div>


## Espaçamento

Em determinados momentos você precisará de uso de margem, para isso você poderá usar as propriedades descritas abaixo em componentes que aceitam todas ou algumas dessas propriedades.

### Valores para propriedades de Margin e Padding

| token         | valores |
| ------------- | ------- |
| 'none'        | 0px     |
| 'quark'       | 4px     |
| 'nano'        | 8px     |
| 'extra-small' | 16px    |
| 'small'       | 24px    |
| 'medium'      | 32px    |
| 'large'       | 40px    |
| 'extra-large' | 48px    |
| 'big'         | 56px    |
| 'display'     | 64px    |
| 'huge'        | 80px    |
| 'giant'       | 120px   |
| 'jumbo'       | 160px   |
| 'immense'     | 200px   |


## Flex

As propriedades abaixo afetam como os nós internos de um componente são ajustados ao seu conteúdo. São muito parecidas com as propriedades flex do CSS. Veja abaixo quais são:

### Propriedades e Valores

| Propriedade | Valores Aceitos                                  |
| ----------- | ------------------------------------------------ |
| direction   | 'row', 'row-reverse', 'column', 'column-reverse' |
| align       | 'center', 'start', 'end'                         |
| justify     | 'center', 'start', 'end', 'between', 'around'    |
| flexWrap    | 'wrap', 'nowrap', 'reverse'                      |
| flexNone    | boolean                                          |


## Tipografia

### Propriedades e Valores

| Propriedade | Valores Aceitos                                                                                                                                                                                         |
|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| fontSize    | 'quark' (12px), 'nano' (14px), 'extra-small' (16px), 'small' (20px), 'medium'(24px), 'large' (32px), 'extra-large' (40px), 'big' (48px), 'display'(56px), 'huge' (64px), 'giant' (72px), 'jumbo'(80px)  |
| textAlign   | 'left', 'center', 'right', 'justify'                                                                                                                                                                    |
| lineHeight  | 'small' (100%), 'medium' (150%), 'large' (200%)                                                                                                                                                         |
| fontWeight  | 'light' (300), 'regular' (400), 'medium' (500), 'bold' (700)                                                                                                                                            |

### Target

| token                 | valores                                                |
|-----------------------|--------------------------------------------------------|
| 'heading-display'     | font-size: '56px'; line-height: 200%; font-weight: 700 |
| 'heading-extra-large' | font-size: '48px'; line-height: 200%; font-weight: 700 |
| 'heading-large'       | font-size: '40px'; line-height: 200%; font-weight: 700 |
| 'heading-medium'      | font-size: '32px'; line-height: 200%; font-weight: 700 |
| 'heading-small'       | font-size: '24px'; line-height: 200%; font-weight: 700 |
| 'title-large'         | font-size: '32px'; line-height: 150%; font-weight: 700 |
| 'title-medium'        | font-size: '24px'; line-height: 150%; font-weight: 700 |
| 'title-small'         | font-size: '20px'; line-height: 150%; font-weight: 700 |
| 'subtitle-large'      | font-size: '24px'; line-height: 150%; font-weight: 700 |
| 'subtitle-medium'     | font-size: '20px'; line-height: 150%; font-weight: 700 |
| 'subtitle-small'      | font-size: '16px'; line-height: 150%; font-weight: 700 |
| 'body-regular'        | font-size: '16px'; line-height: 150%; font-weight: 400 |
| 'body-medium'         | font-size: '16px'; line-height: 150%; font-weight: 500 |
| 'body-bold'           | font-size: '16px'; line-height: 150%; font-weight: 700 |
| 'caption-regular'     | font-size: '14px'; line-height: 100%; font-weight: 400 |
| 'caption-bold'        | font-size: '14px'; line-height: 100%; font-weight: 700 |
| 'disclaimer-regular'  | font-size: '12px'; line-height: 100%; font-weight: 400 |
| 'disclaimer-bold'     | font-size: '12px'; line-height: 100%; font-weight: 700 |


## Opacidade

Em determinados momentos você pode sentir a necessidade de tornar um elemento um pouco translúcido.

Para isto você deve verificar se o componente presente aceita a propriedade opacity.

## opacity

| token              | valores |
|--------------------|---------|
| 'trnasparent'      | 0       |
| 'semi-transparent' | 0.16    |
| 'light'            | 0.32    |
| 'medium'           | 0.4     |
| 'intense'          | 0.64    |
| 'semiopaque'       | 0.8     |

## Sombras

### Tokens e valores

| token     | valores                         |
|-----------|---------------------------------|
| 'level-1' | 0 4px 8px rgb(28 28 28 / 8%)    |
| 'level-2' | 0 8px 24px rgb(28 28 28 / 16%)  |
| 'level-3' | 0 16px 32px rgb(28 28 28 / 16%) |
| 'level-4' | 0 16px 48px rgb(28 28 28 / 24%) |


# Componentes Simples

## Accordion

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-accordion--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/accordion)

Componente accordion para exibição de textos no estilo FAQ.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![accordion](../../assets/images_components/v1.0.0/accordion.png)

### Utilização

```jsx harmony

 state = {
    lorem: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Reprehenderit doloribus quis magni possimus! Architecto rem
    veritatis est quaerat, ab inventore quidem eaque maxime? Eius
    dolore quod totam vero mollitia saepe! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Ipsam ex itaque sint aliquid quae
    vel ea ratione dolores quia blanditiis dolor nihil, in hic
    praesentium temporibus? Iste porro distinctio nisi! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Fugit sed atque ab ex
    qui ea ullam nisi nemo magni ut maiores mollitia libero corrupti
    cupiditate unde dignissimos, est soluta nesciunt! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Quo, voluptate et
    dignissimos adipisci sit voluptas vero repellendus accusantium,
    nostrum voluptatum maiores totam quidem ipsum ipsam eius ad
    deserunt facere non!`,
  };
  render() {
    return (
      <View padding='nano'>
        <View direction='column' align='center'>
          <Text fontSize='medium' fontWeight='bold'>
            Componente{' '}
            <Text color='primary' fontSize='medium' fontWeight='bold'>
              Accordion
            </Text>
          </Text>
        </View>
        <Accordion>
          <AccordionItem title='Seguro Celular'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Seguro Casa'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Seguro Pet'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Novos Seguros'>
            <Accordion>
              <AccordionItem title='Seguro Celular'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
              <AccordionItem title='Seguro Casa'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
              <AccordionItem title='Seguro Pet'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
            </Accordion>
          </AccordionItem>
        </Accordion>
      </View>
```

### Propriedades Accordion

| Propriedade | Descrição                                                                               | Type      | Default |
| ----------- | --------------------------------------------------------------------------------------- | --------- | ------- |
| children    | Recebe 1 ou mais componente `AccordionItem` para ser renderizado dentro do `Accordion`. | component | null    |generated-doc
| disabled    | Desabilita o Componente.                                                                | boolean   | false   |

### Propriedades AccordionItem

| Propriedade | Descrição                                                                                                         | Type      | Default |
| ----------- | ----------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| title       | Título de cada seção do Accordion                                                                                 | string    | null    |
| children    | Conteúdo de cada seção. Pode receber o próprio componente `Accordion`, para iniciar uma nova cadeia de elementos. | component | null    |


## Ads

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-ads--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/ads)

Componente Ads para renderização de anuncios.

![ads](../../assets/images_components/v1.0.0/ads.png)

### Utilização

```xml
<Ads
  path='/12345678912/circulo_3'
  size={['fluid', [76, 76]]}
  id={'div-gpt-ad-1234567891234-0'}
/>
```

### Propriedades

| Propriedade | Descrição                                               | Type   | Default | Obrigatório |
| ----------- | ------------------------------------------------------- | ------ | ------- | ----------- |
| path        | Valor do path relacionado ao anúncio a ser renderizado. | String | null    | sim         |
| size        | Tamanho desejado para renderização do anúncio.          | Array  | null    | sim         |
| id          | Valor do Id relacionado ao anúncio a ser renderizado.   | String | null    | sim         |
| targetKey   | Chave do target usado para segmentacão do anúncio.      | string | null    | Não         |
| targetValue | Valor do target usado para segmentacão do anúncio.      | string | null    | Não         |


## Animator

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-animator--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/animator)

Utilize este componente para exibir animações.

As animações são aceitas no formato JSON (Lottie).

Animações gratuitas podem ser encontradas no site [LottieFiles](https://lottiefiles.com/).

> Infelizmente, em alguns casos raros, as animações podem não ser renderizadas, isto se dá por falta de compatibilidade ou versão das bibliotecas utilizadas. Estamos investigado para que tudo seja renderizado com eficiência.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![animator](../../assets/images_components/v1.0.0/animator.png)

### Utilização

```xml
<Window>
  <Animator animationData={myAnimationJSON}/>
</Window>
```

### Propriedades

| Propriedade   | Descrição                                                                                                                                                | Type             | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
| animationData | Propriedade que recebe a animação em JSON Lottie. O utilitário `StyleResolver` possui um método para obter um JSON de animação padrão para carregamento. | JSON             | null    |
| width         | Seta uma largura para a animação. O tamanho por padrão é 200px                                                                                           | number ou string | null    |
| height        | Seta uma altura para a animação. O tamanho por padrão é 200px                                                                                            | number ou string | null    |


## Button

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-button--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/button)

Exibe um botão na tela.
Nesta versão temos apenas um Componente **Button** para trabalhar.

### Exemplo

![button-block](../../assets/images_components/v1.0.0/button.png)

### Utilização

```xml
 <Window>
    <View direction='column' align='center'>
      <Text fontSize='medium' fontWeight='bold'>
        Componente Button
      </Text>

      <View>
        <View marginTop='nano' direction='column' align='center'>
          <Button
            display={false}
            dataCy='button-primary'
            onPress={() =>
              this.setState({ buttonPressText: 'Primary Normal Medium' })
            }
            label="Botão padrão"
            size="medium"
        />
        </View>
      </View>
    </View>
  </Window>
```

### Propriedades

| Propriedade | Descrição                                                                                                           | Type     | Default | Obrigatório |
| ----------- | ------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
| variant     | Define qual será o estilo do botão, as propriedades são 'primary', 'secondary' 'global', 'text' e 'danger' | string   | primary | Não         |
| onPress     | Recebe uma função para ser executada ao pressionarmos o botão                                                       | function | null    | Sim         |
| label     | Define um texto a ser renderizado no componente                                                                  | string  | true    | Não         |
| size       | Define o tamanho do componente. os valores são: 'medium' e 'small'                                        | boolean  | true    | Não         |
| disabled    | Insere um estilo de desabilitado e inutiliza a função do onPress                                                    | boolean  | false   | Não         |

### Exemplos

Abaixo, alguns tipos de botões:

![two-buttons](../../assets/images_components/v1.0.0/button_ex_1.png)

```xml
  <Window>
        <View
          direction="column"
          align="center"
          justify="center"
          marginTop="large"
        >
          <View
            align="center"
            justify="center"
            width="780px"
            backgroundColor="neutral-300"
            padding="large"
            borderRadius="small"
            shadow="level-2"
            direction="column"
          >
            <Text fontSize="medium" textAlign="center">
              Exemplo do componente [b]Button[/b]
            </Text>
            <View
              margin="small"
              width="500px"
              direction="column"
              justify="center"
            >
              <Text fontSize="medium">[b]Primary:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button onClick={() => console.log("click")} label="Button" />
                <Button
                  onClick={() => console.log("click")}
                  label="Button"
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Secondary:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="secondary"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                />

                <Button
                  variant="secondary"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Global:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="global"
                  label="Button Global"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="global"
                  label="Button Global"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Text:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="text"
                  label="Button Text"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="text"
                  label="Button Text"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Danger:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="danger"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="danger"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
            </View>
          </View>
        </View>
      </Window>
```


## Carousel

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-carousel--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/carousel)

Componente auxiliar para mostrar conteúdos dentro de um carrossel.
Os conteúdos podem ser qualquer estrutura de componente (View, Banner, Card)
propriedades.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![carrousel](../../assets/images_components/v1.0.0/Carousel.png)

### Utilização

Defina uma lista de componentes a serem exibidos, nesse caso colocamos o Text, mas você pode inserir qualquer componente.

```xml harmony
<Carousel autoplay>
  <Text>Slide 1</Text>
  <Text>Slide 2</Text>
</Carousel>
```

### Propriedades

| Propriedade   | Descrição                                                                                                                           | Type     | Default | Obrigatório |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
| bullets       | Mostrar indicadores de ponto                                                                                                        | Boolean  | true    | não         |
| speed         | Velocidade de animação de slide / fade em milisegundos                                                                              | Number   | 5000    | não         |
| autoplay      | Define que os slides passem de forma automática.                                                                                    | Boolean  | false   | não         |
| slidePosition | Nessa propriedade você pode passar a posição em que o slide deve ser renderizado inicilamente, onde 0 significa a primeira posição. | Number   | 0       | não         |
| lastSlide     | Função que retorna true sempre que o último slide estiver sendo exibido.                                                            | Function | null    | não         |
| firstSlide    | Função que retorna true quando o primeiro slide estiver sendo exibido.                                                              | Function | null    | não         |
| currentSlide  | Função que retorna o index do slide que está sendo exibido.                                                                         | Function | null    | não         |


## Chart

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-chart--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/chart)

O grupo de componentes Chart permitem exibir alguns tipos de dados plotados na tela.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

## Chart.Bar

Utilizado para mostrar dados em um gráfico de barras.

### Exemplo

![chartbar](../../assets/images_components/v1.0.0/chartbar.png)

### Utilização

```xml
 state = {
       labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
       dataOptions:[
        {
            label:"Prata",
            data: [10, 20, 30, 40, 30, 15],
            color: '#c0c0c0',
          },
          {
            label:"Ouro",
            data: [90, 70, 30, 30, 40, 80],
            color :'#ffd700'
          },
       ],
    }
 <Chart.Bar
     data={this.state.dataOptions}
     labels={this.state.labels}
     title="Gráfico em Barra"
  />
```

### Propriedades

| Propriedade | Descrição                                                                     | Type      | Default | Obrigatório |
| ----------- | ----------------------------------------------------------------------------- | --------- | ------- | ----------- |
| labels      | Array de textos que conceberão as propriedades do gráfico .                   | String[]  | null    | sim         |
| data        | Array do tipo DataBar que vai definir os valores, cores das barras do gráfico | DataBar[] | null    | sim         |
| title       | Título do gráfico                                                             | String    | null    | não         |
| position    | Posição do título no gráfico                                                  | String    | null    | não         |

## Chart.Line

Utilizado para a exibição de dados em um gráfico de linhas.

### Exemplo

![chartline](../../assets/images_components/v1.0.0/chartline.png)

### Utilização

```xml
state= {
       labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
       dataOptions:[
        {
            label:"Prata",
            data: [7, 2, 6,10,100,4],
            lineColor: 'blue',
            color: 'blue'
          },
          {
            label:"Ouro",
            data: [10, 20, 10, 40,10,10],
            lineColor: 'orange',
            color: 'orange'
          },
       ],
      }
<Chart.Line
    data={this.state.dataOptions}
    labels={this.state.labels}
    title="Gráfico em Linha"
/>
```

### Propriedades

| Propriedade | Descrição                                                                      | Type       | Default | Obrigatório |
| ----------- | ------------------------------------------------------------------------------ | ---------- | ------- | ----------- |
| labels      | Array de textos que conceberão as propriedades do gráfico.                     | String[]   | null    | sim         |
| data        | Array do tipo DataLine que vai definir os valores, cores das linhas no gráfico | DataLine[] | null    | sim         |
| title       | Título do gráfico                                                              | String     | null    | não         |
| position    | Posição do título no gráfico                                                   | String     | null    | não         |

## Chart.Pie

Utilizado para mostrar dados em formato de gráfico de pizza.

### Exemplo

![chartpie](../../assets/images_components/v1.0.0/chartpie.png)

### Utilização

```xml
 state= {
       labels:['Javascript', 'Java', 'Typescript'],
       dataPieOptions:{
        label: 'Linguagens de programação',
        data: [120, 60, 80],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 206, 86)',
        ],
        borderColor: [
          '#444',
          '#444',
          '#444',
        ],
        borderWidth: 1,
      }
    }
<Chart.Pie
    data={this.state.dataPieOptions}
    labels={this.state.labels}
    title='Gráfico Pie'
/>
```

### Propriedades

| Propriedade | Descrição                                                                           | Type     | Default | Obrigatório |
| ----------- | ----------------------------------------------------------------------------------- | -------- | ------- | ----------- |
| labels      | Array de textos que conceberão as propriedades do gráfico.                          | String[] | null    | sim         |
| data        | Objeto do tipo DataPue que vai definir os valores e cores das das partes do gráfico | DataPie  | null    | sim         |


## Checkbox

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-checkbox--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/checkbox)

Caixa de seleção que permite que o usuário selecione um ou mais itens de um conjunto.

### Exemplo

![checkbox](../../assets/images_components/v1.0.0/checkbox.png)

### Utilização

```xml

 state = {
    checked: false
  };

  <Checkbox
    dataCy='checkbox-test'
    id='3124129'
    value='teste'
    checked={this.state.checked}
    onChange={e => {
      this.setState({ checked: e.checked });
    }}
  >
    Seu texto
  </Checkbox>
```

### Propriedades

| Propriedade | Descrição                                                                                                      | Type     | Default   | Obrigatório |
| ----------- | -------------------------------------------------------------------------------------------------------------- | -------- | --------- | ----------- |
| checked     | Define o estado do checkbox                                                                                    | boolean  | false     | Sim         |
| onChange    | Função que retorna o estado e o value                                                                          | function | null      | Sim         |
| value       | Define o valor para o checkbox                                                                                 | string   | null      | Não         |
| disabled    | Desabilita o checkbox                                                                                          | boolean  | false     | Não         |
| id          | Passa um id para o componente                                                                                  | number   | aleatório | Não         |
| group       | Recebe um array com os estados de outros checkbox para controle do componente que recebe a propriedade 'group' | array    | null      | Não         |


## Chip

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-chip--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/chip)

### Exemplo

![chip](../../assets/images_components/v1.0.0/chip.png)

### Utilização

```xml
 state = {
    data: [
      {
        id: 1,
        label: 'label 1',
        value: 'chip-7',
      },
      {
        id: 2,
        label: 'label 2',
        value: 'chip-8',
        icon: '',
      },
      {
        id: 3,
        label: 'label 3',
        value: 'chip-9',
        icon: '',
      },
    ],
  };

  <Window>
    <View>
      <Text textAlign='center' fontSize='lg'>
        Chip
      </Text>
    </View>
    <View padding='nano'>
      <View
        marginBottom='quark'
        flexWrap='wrap'
        padding='quark'
        backgroundColor='none'>
        <View margin='quark' width='auto'>
          <Chip
            value='chip-1'
            icon='feedback-success'
            label='Label'
            onChange={(e) => console.log(e)}
          />
        </View>
        <View margin='quark' width='auto'>
          <Chip label='Label' value='chip-2' />
        </View>
        <View margin='quark' width='auto'>
          <Chip label='Label' value='chip-3' />
        </View>
      </View>
      <View flexWrap='wrap' padding='quark' backgroundColor='secondary'>
        {this.state.data.map((item, index) => {
          return (
            <View key={index} margin='quark' width='auto'>
              <Chip
                icon={item.icon}
                label={item.label}
                value={item.value}
                index={index}
                data={this.state.data}
                onChange={(e) => console.log(e)}
                dataChange={(e) => this.setState({ data: e })}
              />
            </View>
          );
        })}
      </View>
    </View>
  </Window>

```

### Propriedades

| Propriedade | Descrição                                                                                                    | Type    | Default | Obrigatório |
| ----------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------- | ----------- |
| icon        | Ícone a ser exibido do lado esquerdo do label. Recebe um token da lista de icones que pode ser encontrado [aqui](#Icon)                                                                | String  | none    | não         |
| label       | Texto a ser renderizado no componente                                                                        | String  | none    | sim         |
| active      | Ativa o componente selecionado                                                                               | Boolean | false   | não         |
| disabled    | Desabilita o componente                                                                                      | Boolean | false   | não         |
| value       | Valor do componente                                                                                          | String  | none    | sim         |
| onChange    | Retorna o value do componente                                                                                |


## CurrencyInput

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-currencyinput--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/currencyinput)

Exibe uma entrada de valor monetário na tela.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![currencyinput](../../assets/images_components/v1.0.0/currencyInput.png)

### Utilização

```xml
<CurrencyInput
    maxLength={8}
    prefix={€}
    value={459}
    onChange={value => { ... }}
/>
```

### Propriedades

| Propriedade | Descrição                                                             | Type     | Default | Obrigatório |
| ----------- | --------------------------------------------------------------------- | -------- | ------- | ----------- |
| value       | Valor inicial que será renderizado no componente.                     | number   | null    | Sim         |
| onChange    | Função a ser executada quando o valor é alterado, retornando o valor, | function | null    | Sim         |
| prefix      | Prefixo do tipo de moeda utilizada. Padrão é R$                       | string   | R$      | Não         |
| maxLength   | Quantidade máxima de caracteres.                                      | number   | 9       | Não         |
| disableEdit | Esconde o botão Editar                                                | boolean  | false   | Não         |
| disabled    | Desabilita o componente.                                              | boolean  | false   | Não         |
| flat        | Altera a aparência do componente para uma versão mais simples.        | boolean  | false     | Não         |
| color       | Modifica a cor do CurrencyInput.                                      | string  | 'primary'     | Não         |


## DataTable

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-datatable--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/datatable)

Insere um datatable para exibição de dados

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Componente feito apartir de da biblioteca react-data-table-component.

Documentação da Biblioteca: <https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--page>

### Exemplo

![datatable](../../assets/images_components/v1.0.0/datatable.png)

### Utilização

```jsx
<View>
  <DataTable
    title="Exemplo de DataTable"
    data={this.state.data}
    columns={this.state.columns}
  />
</View>
```


## DatePicker

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-datepicker--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/datepicker)

Componente usado para seleção de data. Essa seleção pode ser aplicada por meio de um input de texto ou selecionando num calendário interativo.

### Exemplo

![datepicker](../../assets/images_components/v1.0.0/date-picker.png)

### Utilização

```jsx
<DatePicker
    value={new Date()}
    onChange={e => this.onDateChange(e)}
    placeholder="Data de Nascimento"
    minDate={new Date(1930, 0, 1)}
    maxDate={new Date(2022, 11, 18)}
/>
```

### Propriedades

| Propriedade | Descrição                                                                      | Type     | Default | Obrigatório |
|-------------|--------------------------------------------------------------------------------|----------|---------|-------------|
| value       | Recebe uma data inicial. É usado para atualizar a data do componente.          | Date     | null    | Sim         |
| onChange    | Função a ser executada quando a data é alterada, pelo input ou pelo calendário | Function | null    | Sim         |
| minDate     | Determina a menor data possível.                                               | Date     | null    | Não         |
| maxDate     | Determina a maior data possível.                                               | Date     | null    | Não         |
| locale      | Determina a localização para formato da data.                                  | string   | "pt-br" | Não         |
| placeholder | Determina o texto de placeholder do componente.                                | boolean  | false   | Não         |
| disabled    | Desabilita o componente.                                                       | boolean  | false   | Não         |
| hint        | Adiciona um texto alternativo ao componente.                                   | string   | null    | Não         |
| error       | Altera o componente para uma cor de aviso.                                     | boolean  | false   | Não         |


## Grid

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-grid--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/grid)

Utilize este componente em conjunto com o `Col` para organização de elementos.  

### Exemplo

![grid](../../assets/images_components/v1.0.0/grid.png)

### Utilização

```xml
<View>
  <Grid>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="negative-300">
        <Text>Coluna 1</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: "hidden", lg: 3 }}>
      <View backgroundColor="positive-300">
        <Text>Coluna 2</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="warning-700">
        <Text>Coluna 3</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="support-01">
        <Text>Coluna 4</Text>
      </View>
    </Col>
  </Grid>
</View>
```

Como visto do exemplo acima, o componente `Col`, é usado como children do componente `Grid` para determinar cada coluna do grid.

### Propriedades

| Propriedade | Descrição                           | Type    | Default |
|-------------|-------------------------------------|---------|---------|
| noGap       | Tira o espaçamento entre as colunas | boolean | false   |


### Propriedades Col

| Propriedade | Descrição                           | Type    | Default |
|-------------|-------------------------------------|---------|---------|
| columnSize  | Recebe um objeto contendo os 3 break-points e seus respectivos valores. Os valores representam quantas colunas, num total de 12, o elemento vai ocupar. Existe ainda a opção de usar "hidden" para o valor caso queira esconder a coluna em um determinado break point. Ex: {sm: 12, md: 6, lg: 3}  | object | false   |



## Hint

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-hint--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/hint)

Componente para exibir alertas em formulários

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![hint](../../assets/images_components/v1.0.0/hint.png)

### Utilização

```xml
  <Hint
    status='success'
    text='Retorno de sucesso'
    show={true}
  />
```

### Propriedades

| Propriedade | Descrição                                                                             | Type    | Default | Obrigatório |
| ----------- | ------------------------------------------------------------------------------------- | ------- | ------- | ----------- |
| type        | Define qual será o estilo do Hint, as propriedades são 'success', 'warning' e 'error' | string  | null    | Não         |
| show        | Parâmetro que define se o Hint será exibido ou não                                    | boolean | false   | não         |


## Icon

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-icon--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/icon)

Componente que exibe um Ícone.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![icon](../../assets/images_components/v1.0.0/ameicon.png)

### Utilização

```xml
<Icon icon="ame-outline"/>
<Icon icon="ame-outline"/>
```

### Propriedades

| Propriedade | Descrição                                                          | Type    | Default     |
|-------------|--------------------------------------------------------------------|---------|-------------|
| icon        | Carrega ícones de acordo com o token recebido.                     | number  | ame-outline |
| colorIcon   | Define a cor do ícone. [Veja os valores](#Cores)                   | boolean | neutral-500 |
| width       | Define a largura do ícone, pode ser usado em porcentagem ou pixels | string  | 33px        |
| height      | Define a altura do ícone, pode ser usado em porcentagem ou pixels  | string  | auto        |

Segue abaixo a lista de ícones:

- ![accounts-outline](../../assets/icones/accounts-outline.png) accounts-outline
- ![accounts-solid](../../assets/icones/accounts-solid.png) accounts-solid
- ![adress-outline](../../assets/icones/adress-outline.png) adress-outline
- ![adress-solid](../../assets/icones/adress-solid.png) adress-solid
- ![agenda-outline](../../assets/icones/agenda-outline.png) agenda-outline
- ![agenda-solid](../../assets/icones/agenda-solid.png) agenda-solid
- ![alert-outline](../../assets/icones/alert-outline.png) alert-outline
- ![alert-solid](../../assets/icones/alert-solid.png) alert-solid
- ![ame-banking](../../assets/icones/ame-banking.png) ame-banking
- ![ame-outline](../../assets/icones/ame-outline.png) ame-outline
- ![ame-solid](../../assets/icones/ame-solid.png) ame-solid
- ![attach](../../assets/icones/attach.png) attach
- ![bank-outline](../../assets/icones/bank-outline.png) bank-outline
- ![bank-solid](../../assets/icones/bank-solid.png) bank-solid
- ![bar-code](../../assets/icones/bar-code.png) bar-code
- ![barbecue-outline](../../assets/icones/barbecue-outline.png) barbecue-outline
- ![barbecue-solid](../../assets/icones/barbecue-solid.png) barbecue-solid
- ![bell-notification-outline](../../assets/icones/bell-notification-outline.png) bell-notification-outline
- ![bell-notification-solid](../../assets/icones/bell-notification-solid.png) bell-notification-solid
- ![bestcb](../../assets/icones/bestcb.png) bestcb
- ![best-deals-outline](../../assets/icones/best-deals-outline.png) best-deals-outline
- ![bikeitau](../../assets/icones/bikeitau.png) bikeitau
- ![bus-outline](../../assets/icones/bus-outline.png) bus-outline
- ![bus-solid](../../assets/icones/bus-solid.png) bus-solid
- ![cabify](../../assets/icones/cabify.png) cabify
- ![caixa](../../assets/icones/caixa.png) caixa
- ![calendar-outline](../../assets/icones/calendar-outline.png) calendar-outline
- ![calendar-solid](../../assets/icones/calendar-solid.png) calendar-solid
- ![camera-outline](../../assets/icones/camera-outline.png) camera-outline
- ![camera-solid](../../assets/icones/camera-solid.png) camera-solid
- ![card-ame-outline](../../assets/icones/card-ame-outline.png) card-ame-outline
- ![card-ame-solid](../../assets/icones/card-ame-solid.png) card-ame-solid
- ![carimbo](../../assets/icones/carimbo.png) carimbo
- ![cart-outline](../../assets/icones/cart-outline.png) cart-outline
- ![cart-solid](../../assets/icones/cart-solid.png) cart-solid
- ![cashback](../../assets/icones/cashback.png) cashback
- ![cat](../../assets/icones/cat.png) cat
- ![chat-mail-outline](../../assets/icones/chat-mail-outline.png) chat-mail-outline
- ![chat-mail-solid](../../assets/icones/chat-mail-solid.png) chat-mail-solid
- ![chat-message-outline](../../assets/icones/chat-message-outline.png) chat-message-outline
- ![chat-message-solid](../../assets/icones/chat-message-solid.png) chat-message-solid
- ![chat-sms-outline](../../assets/icones/chat-sms-outline.png) chat-sms-outline
- ![chat-sms-solid](../../assets/icones/chat-sms-solid.png) chat-sms-solid
- ![chat-whatsapp-outline](../../assets/icones/chat-whatsapp-outline.png) chat-whatsapp-outline
- ![chat-whatsapp-solid](../../assets/icones/chat-whatsapp-solid.png) chat-whatsapp-solid
- ![cinema-outline](../../assets/icones/cinema-outline.png) cinema-outline
- ![cinema-solid](../../assets/icones/cinema-solid.png) cinema-solid
- ![clock-outline](../../assets/icones/clock-outline.png) clock-outline
- ![clock-solid](../../assets/icones/clock-solid.png) clock-solid
- ![close](../../assets/icones/close.png) close
- ![clothing-tshirt-outline](../../assets/icones/clothing-tshirt-outline.png) clothing-tshirt-outline
- ![clothing-tshirt-solid](../../assets/icones/clothing-tshirt-solid.png) clothing-tshirt-solid
- ![colapse](../../assets/icones/colapse.png) colapse
- ![configuration-outline](../../assets/icones/configuration-outline.png) configuration-outline
- ![configuration-solid](../../assets/icones/configuration-solid.png) configuration-solid
- ![conversion](../../assets/icones/conversion.png) conversion
- ![copy-outline](../../assets/icones/copy-outline.png) copy-outline
- ![copy-solid](../../assets/icones/copy-solid.png) copy-solid
- ![cracha](../../assets/icones/cracha.png) cracha
- ![credit-card-ame](../../assets/icones/credit-card-ame.png) credit-card-ame
- ![credit-card-outline](../../assets/icones/credit-card-outline.png) credit-card-outline
- ![credit-card-solid](../../assets/icones/credit-card-solid.png) credit-card-solid
- ![cupom-outline](../../assets/icones/cupom-outline.png) cupom-outline
- ![cupom-solid](../../assets/icones/cupom-solid.png) cupom-solid
- ![curiosities-outline](../../assets/icones/curiosities-outline.png) curiosities-outline
- ![curiosities-solid](../../assets/icones/curiosities-solid.png) curiosities-solid
- ![dashboard-outline](../../assets/icones/dashboard-outline.png) dashboard-outline
- ![dashboard-solid](../../assets/icones/dashboard-solid.png) dashboard-solid
- ![delivery-outline](../../assets/icones/delivery-outline.png) delivery-outline
- ![delivery-solid](../../assets/icones/delivery-solid.png) delivery-solid
- ![deposit-outline](../../assets/icones/deposit-outline.png) deposit-outline
- ![deposit-solid](../../assets/icones/deposit-solid.png) deposit-solid
- ![deslike-no-outline](../../assets/icones/deslike-no-outline.png) deslike-no-outline
- ![deslike-no-solid](../../assets/icones/deslike-no-solid.png) deslike-no-solid
- ![details](../../assets/icones/details.png) details
- ![diarista-outline](../../assets/icones/diarista-outline.png) diarista-outline
- ![diarista-solid](../../assets/icones/diarista-solid.png) diarista-solid
- ![divide](../../assets/icones/divide.png) divide
- ![documents-cpf](../../assets/icones/documents-cpf.png) documents-cpf
- ![documents-id-outline](../../assets/icones/documents-id-outline.png) documents-id-outline
- ![documents-id-solid](../../assets/icones/documents-id-solid.png) documents-id-solid
- ![donation-art](../../assets/icones/donation-art.png) donation-art
- ![donation-autonomous](../../assets/icones/donation-autonomous.png) donation-autonomous
- ![donation-communities](../../assets/icones/donation-communities.png) donation-communities
- ![donation-coronavirus](../../assets/icones/donation-coronavirus.png) donation-coronavirus
- ![donation-environement](../../assets/icones/donation-environement.png) donation-environement
- ![donation-fomezero](../../assets/icones/donation-fomezero.png) donation-fomezero
- ![donation-girlpower](../../assets/icones/donation-girlpower.png) donation-girlpower
- ![donation-healthcare](../../assets/icones/donation-healthcare.png) donation-healthcare
- ![donation-kids](../../assets/icones/donation-kids.png) donation-kids
- ![donation-planet](../../assets/icones/donation-planet.png) donation-planet
- ![donation-rainbow](../../assets/icones/donation-rainbow.png) donation-rainbow
- ![donation-sambarj](../../assets/icones/donation-sambarj.png) donation-sambarj
- ![donation-sambasalvador](../../assets/icones/donation-sambasalvador.png) donation-sambasalvador
- ![donation-sambasp](../../assets/icones/donation-sambasp.png) donation-sambasp
- ![donation-seniors](../../assets/icones/donation-seniors.png) donation-seniors
- ![donations-education](../../assets/icones/donations-education.png) donations-education
- ![donations](../../assets/icones/donations.png) donations
- ![down](../../assets/icones/down.png) down
- ![drconsulta](../../assets/icones/drconsulta.png) drconsulta
- ![edit-outline](../../assets/icones/edit-outline.png) edit-outline
- ![edit-solid](../../assets/icones/edit-solid.png) edit-solid
- ![electrician](../../assets/icones/electrician.png) electrician
- ![emprestimo-loan-outline](../../assets/icones/emprestimo-loan-outline.png) emprestimo-loan-outline
- ![emprestimo-loan-solid](../../assets/icones/emprestimo-loan-solid.png) emprestimo-loan-solid
- ![emprestimopj-loan](../../assets/icones/emprestimopj-loan.png) emprestimopj-loan
- ![ensure](../../assets/icones/ensure.png) ensure
- ![equal](../../assets/icones/equal.png) equal
- ![events-outline](../../assets/icones/events-outline.png) events-outline
- ![events-solid](../../assets/icones/events-solid.png) events-solid
- ![expand](../../assets/icones/expand.png) expand
- ![extended-warranty](../../assets/icones/extended-warranty.png) extended-warranty
- ![extrato-outline](../../assets/icones/extrato-outline.png) extrato-outline
- ![extrato-solid](../../assets/icones/extrato-solid.png) extrato-solid
- ![eye-hide](../../assets/icones/eye-hide.png) eye-hide
- ![eye-show](../../assets/icones/eye-show.png) eye-show
- ![faces-et-outline](../../assets/icones/faces-et-outline.png) faces-et-outline
- ![faces-happy-outline](../../assets/icones/faces-happy-outline.png) faces-happy-outline
- ![faces-happy-solid](../../assets/icones/faces-happy-solid.png) faces-happy-solid
- ![faces-medium](../../assets/icones/faces-medium.png) faces-medium
- ![faces-normal-outline](../../assets/icones/faces-normal-outline.png) faces-normal-outline
- ![faces-normal-solid](../../assets/icones/faces-normal-solid.png) faces-normal-solid
- ![faces-sad-outline](../../assets/icones/faces-sad-outline.png) faces-sad-outline
- ![faces-sad-solid](../../assets/icones/faces-sad-solid.png) faces-sad-solid
- ![faces-veryhappy](../../assets/icones/faces-veryhappy.png) faces-veryhappy
- ![fav-outline](../../assets/icones/fav-outline.png) fav-outline
- ![fav-solid](../../assets/icones/fav-solid.png) fav-solid
- ![feature-bazar-outline](../../assets/icones/feature-bazar-outline.png) feature-bazar-outline
- ![feature-bazar-solid](../../assets/icones/feature-bazar-solid.png) feature-bazar-solid
- ![feature-br-petrobras](../../assets/icones/feature-br-petrobras.png) feature-br-petrobras
- ![feature-news](../../assets/icones/feature-news.png) feature-news
- ![feature-scanandgo](../../assets/icones/feature-scanandgo.png) feature-scanandgo
- ![feature-shell-box](../../assets/icones/feature-shell-box.png) feature-shell-box
- ![feature-taggy](../../assets/icones/feature-taggy.png) feature-taggy
- ![feature-voucher-future](../../assets/icones/feature-voucher-future.png) feature-voucher-future
- ![feedback-error](../../assets/icones/feedback-error.png) feedback-error
- ![feedback-success](../../assets/icones/feedback-success.png) feedback-success
- ![filter-outline](../../assets/icones/filter-outline.png) filter-outline
- ![filter-solid](../../assets/icones/filter-solid.png) filter-solid
- ![fire](../../assets/icones/fire.png) fire
- ![flash-active](../../assets/icones/flash-active.png) flash-active
- ![flash-disabled](../../assets/icones/flash-disabled.png) flash-disabled
- ![food-convenience](../../assets/icones/food-convenience.png) food-convenience
- ![gamerzone](../../assets/icones/gamerzone.png) gamerzone
- ![games-outline](../../assets/icones/games-outline.png) games-outline
- ![games-solid](../../assets/icones/games-solid.png) games-solid
- ![general-services-outline](../../assets/icones/general-services-outline.png) general-services-outline
- ![general-services-solid](../../assets/icones/general-services-solid.png) general-services-solid
- ![ghost](../../assets/icones/ghost.png) ghost
- ![gift-card-outline](../../assets/icones/gift-card-outline.png) gift-card-outline
- ![gift-card-solid](../../assets/icones/gift-card-solid.png) gift-card-solid
- ![gift-outline](../../assets/icones/gift-outline.png) gift-outline
- ![gift-solid](../../assets/icones/gift-solid.png) gift-solid
- ![glutenfree](../../assets/icones/glutenfree.png) glutenfree
- ![gym-outline](../../assets/icones/gym-outline.png) gym-outline
- ![gym-solid](../../assets/icones/gym-solid.png) gym-solid
- ![hand-easy](../../assets/icones/hand-easy.png) hand-easy
- ![hands](../../assets/icones/hands.png) hands
- ![handshake](../../assets/icones/handshake.png) handshake
- ![health-outline](../../assets/icones/health-outline.png) health-outline
- ![health-solid](../../assets/icones/health-solid.png) health-solid
- ![heart-outline](../../assets/icones/heart-outline.png) heart-outline
- ![heart-solid](../../assets/icones/heart-solid.png) heart-solid
- ![help-outline](../../assets/icones/help-outline.png) help-outline
- ![help-solid](../../assets/icones/help-solid.png) help-solid
- ![home-outline](../../assets/icones/home-outline.png) home-outline
- ![home-solid](../../assets/icones/home-solid.png) home-solid
- ![house-outline](../../assets/icones/house-outline.png) house-outline
- ![house-solid](../../assets/icones/house-solid.png) house-solid
- ![image-album-outline](../../assets/icones/image-album-outline.png) image-album-outline
- ![image-album-solid](../../assets/icones/image-album-solid.png) image-album-solid
- ![image-outline](../../assets/icones/image-outline.png) image-outline
- ![image-solid](../../assets/icones/image-solid.png) image-solid
- ![incoming](../../assets/icones/incoming.png) incoming
- ![insurances](../../assets/icones/insurances.png) insurances
- ![investments](../../assets/icones/investments.png) investments
- ![keyboard-numbers-outline](../../assets/icones/keyboard-numbers-outline.png) keyboard-numbers-outline
- ![keyboard-numbers-solid](../../assets/icones/keyboard-numbers-solid.png) keyboard-numbers-solid
- ![lamp-outline](../../assets/icones/lamp-outline.png) lamp-outline
- ![lamp-solid](../../assets/icones/lamp-solid.png) lamp-solid
- ![lavanderia](../../assets/icones/lavanderia.png) lavanderia
- ![lazer-recreation-outline](../../assets/icones/lazer-recreation-outline.png) lazer-recreation-outline
- ![lazer-recreation-solid](../../assets/icones/lazer-recreation-solid.png) lazer-recreation-solid
- ![left-previous](../../assets/icones/left-previous.png) left-previous
- ![like-ok-outline](../../assets/icones/like-ok-outline.png) like-ok-outline
- ![like-ok-solid](../../assets/icones/like-ok-solid.png) like-ok-solid
- ![limit](../../assets/icones/limit.png) limit
- ![list-items-outline](../../assets/icones/list-items-outline.png) list-items-outline
- ![list-items-solid](../../assets/icones/list-items-solid.png) list-items-solid
- ![loan-consignado](../../assets/icones/loan-consignado.png) loan-consignado
- ![location-outline](../../assets/icones/location-outline.png) location-outline
- ![location-solid](../../assets/icones/location-solid.png) location-solid
- ![logo-autentic](../../assets/icones/logo-autentic.png) logo-autentic
- ![map-outline](../../assets/icones/map-outline.png) map-outline
- ![map-solid](../../assets/icones/map-solid.png) map-solid
- ![market-bag-outline](../../assets/icones/market-bag-outline.png) market-bag-outline
- ![market-bag-solid](../../assets/icones/market-bag-solid.png) market-bag-solid
- ![menu-plus-collapse](../../assets/icones/menu-plus-collapse.png) menu-plus-collapse
- ![menu-plus-expand](../../assets/icones/menu-plus-expand.png) menu-plus-expand
- ![mini-games](../../assets/icones/mini-games.png) mini-games
- ![mirror-beuty-outline](../../assets/icones/mirror-beuty-outline.png) mirror-beuty-outline
- ![mirror-beuty-solid](../../assets/icones/mirror-beuty-solid.png) mirror-beuty-solid
- ![mobile-chip](../../assets/icones/mobile-chip.png) mobile-chip
- ![mobile-outline](../../assets/icones/mobile-outline.png) mobile-outline
- ![mobile-solid](../../assets/icones/mobile-solid.png) mobile-solid
- ![mobile-plan](../../assets/icones/mobile-plan.png) mobile-plan
- ![money-balance](../../assets/icones/money-balance.png) money-balance
- ![money-card-outline](../../assets/icones/money-card-outline.png) money-card-outline
- ![money-card-solid](../../assets/icones/money-card-solid.png) money-card-solid
- ![money-outline](../../assets/icones/money-outline.png) money-outline
- ![money-solid](../../assets/icones/money-solid.png) money-solid
- ![montador-outline](../../assets/icones/montador-outline.png) montador-outline
- ![montador-solid](../../assets/icones/montador-solid.png) montador-solid
- ![movimentar-extrato-statement](../../assets/icones/movimentar-extrato-statement.png) movimentar-extrato-statement
- ![multiply](../../assets/icones/multiply.png) multiply
- ![natal](../../assets/icones/natal.png) natal
- ![new-card-segunda-via](../../assets/icones/new-card-segunda-via.png) new-card-segunda-via
- ![newness-outline](../../assets/icones/newness-outline.png) newness-outline
- ![newness-solid](../../assets/icones/newness-solid.png) newness-solid
- ![padlock-lock-outline](../../assets/icones/padlock-lock-outline.png) padlock-lock-outline
- ![padlock-lock-solid](../../assets/icones/padlock-lock-solid.png) padlock-lock-solid
- ![padlock-open-outline](../../assets/icones/padlock-open-outline.png) padlock-open-outline
- ![padlock-open-solid](../../assets/icones/padlock-open-solid.png) padlock-open-solid
- ![parking-outline](../../assets/icones/parking-outline.png) parking-outline
- ![parking-solid](../../assets/icones/parking-solid.png) parking-solid
- ![pet-m-outline](../../assets/icones/pet-m-outline.png) pet-m-outline
- ![pet-m-solid](../../assets/icones/pet-m-solid.png) pet-m-solid
- ![pet-p-outline](../../assets/icones/pet-p-outline.png) pet-p-outline
- ![pet-p-solid](../../assets/icones/pet-p-solid.png) pet-p-solid
- ![pet-xl-outline](../../assets/icones/pet-xl-outline.png) pet-xl-outline
- ![pet-xl-solid](../../assets/icones/pet-xl-solid.png) pet-xl-solid
- ![pets-outline](../../assets/icones/pets-outline.png) pets-outline
- ![pets-solid](../../assets/icones/pets-solid.png) pets-solid
- ![phishing](../../assets/icones/phishing.png) phishing
- ![phone-outline](../../assets/icones/phone-outline.png) phone-outline
- ![phone-solid](../../assets/icones/phone-solid.png) phone-solid
- ![pix](../../assets/icones/pix.png) pix
- ![pixkey](../../assets/icones/pixkey.png) pixkey
- ![play](../../assets/icones/play.png) play
- ![plumber-outline](../../assets/icones/plumber-outline.png) plumber-outline
- ![plumber-solid](../../assets/icones/plumber-solid.png) plumber-solid
- ![poup-pig](../../assets/icones/poup-pig.png) poup-pig
- ![pricing-outline](../../assets/icones/pricing-outline.png) pricing-outline
- ![pricing-solid](../../assets/icones/pricing-solid.png) pricing-solid
- ![profile-outline](../../assets/icones/profile-outline.png) profile-outline
- ![profile-solid](../../assets/icones/profile-solid.png) profile-solid
- ![qrcode](../../assets/icones/qrcode.png) qrcode
- ![randomkey](../../assets/icones/randomkey.png) randomkey
- ![receipt-outline](../../assets/icones/receipt-outline.png) receipt-outline
- ![receipt-solid](../../assets/icones/receipt-solid.png) receipt-solid
- ![recieve](../../assets/icones/recieve.png) recieve
- ![restaurant-outline](../../assets/icones/restaurant-outline.png) restaurant-outline
- ![restaurant-solid](../../assets/icones/restaurant-solid.png) restaurant-solid
- ![right-next](../../assets/icones/right-next.png) right-next
- ![scissor-cut-outline](../../assets/icones/scissor-cut-outline.png) scissor-cut-outline
- ![scissor-cut-solid](../../assets/icones/scissor-cut-solid.png) scissor-cut-solid
- ![search](../../assets/icones/search.png) search
- ![selfie-outline](../../assets/icones/selfie-outline.png) selfie-outline
- ![selfie-solid](../../assets/icones/selfie-solid.png) selfie-solid
- ![send-money](../../assets/icones/send-money.png) send-money
- ![send-outline](../../assets/icones/send-outline.png) send-outline
- ![send-solid](../../assets/icones/send-solid.png) send-solid
- ![serralheiro-outline](../../assets/icones/serralheiro-outline.png) serralheiro-outline
- ![serralheiro-solid](../../assets/icones/serralheiro-solid.png) serralheiro-solid
- ![services-outline](../../assets/icones/services-outline.png) services-outline
- ![services-solid](../../assets/icones/services-solid.png) services-solid
- ![share-outline](../../assets/icones/share-outline.png) share-outline
- ![share-solid](../../assets/icones/share-solid.png) share-solid
- ![spotify](../../assets/icones/spotify.png) spotify
- ![store-outline](../../assets/icones/store-outline.png) store-outline
- ![store-solid](../../assets/icones/store-solid.png) store-solid
- ![subtract](../../assets/icones/subtract.png) subtract
- ![sum](../../assets/icones/sum.png) sum
- ![taxes](../../assets/icones/taxes.png) taxes
- ![taxes-money](../../assets/icones/taxes-money.png) taxes-money
- ![teams-outline](../../assets/icones/teams-outline.png) teams-outline
- ![teams-solid](../../assets/icones/teams-solid.png) teams-solid
- ![tech-outline](../../assets/icones/tech-outline.png) tech-outline
- ![tech-solid](../../assets/icones/tech-solid.png) tech-solid
- ![tecnico-Informatica-outline](../../assets/icones/tecnico-Informatica-outline.png) tecnico-Informatica-outline
- ![tecnico-Informatica-solid](../../assets/icones/tecnico-Informatica-solid.png) tecnico-Informatica-solid
- ![telemedicin](../../assets/icones/telemedicin.png) telemedicin
- ![teste-covid](../../assets/icones/teste-covid.png) teste-covid
- ![thief](../../assets/icones/thief.png) thief
- ![ticket-outline](../../assets/icones/ticket-outline.png) ticket-outline
- ![ticket-solid](../../assets/icones/ticket-solid.png) ticket-solid
- ![tickets-outline](../../assets/icones/tickets-outline.png) tickets-outline
- ![tickets-solid](../../assets/icones/tickets-solid.png) tickets-solid
- ![tools-outline](../../assets/icones/tools-outline.png) tools-outline
- ![tools-solid](../../assets/icones/tools-solid.png) tools-solid
- ![transactions-outline](../../assets/icones/transactions-outline.png) transactions-outline
- ![transactions-solid](../../assets/icones/transactions-solid.png) transactions-solid
- ![transfer-outline](../../assets/icones/transfer-outline.png) transfer-outline
- ![transfer-solid](../../assets/icones/transfer-solid.png) transfer-solid
- ![transport-card](../../assets/icones/transport-card.png) transport-card
- ![transports](../../assets/icones/transports.png) transports
- ![trash-outline](../../assets/icones/trash-outline.png) trash-outline
- ![trash-solid](../../assets/icones/trash-solid.png) trash-solid
- ![trip-plane](../../assets/icones/trip-plane.png) trip-plane
- ![turn-camera-outline](../../assets/icones/turn-camera-outline.png) turn-camera-outline
- ![turn-camera-solid](../../assets/icones/turn-camera-solid.png) turn-camera-solid
- ![uber](../../assets/icones/uber.png) uber
- ![uber-eats](../../assets/icones/uber-eats.png) uber-eats
- ![ultragaz](../../assets/icones/ultragaz.png) ultragaz
- ![up](../../assets/icones/up.png) up
- ![vakinha](../../assets/icones/vakinha.png) vakinha
- ![valueqr](../../assets/icones/valueqr.png) valueqr
- ![vegan](../../assets/icones/vegan.png) vegan
- ![velocimeter](../../assets/icones/velocimeter.png) velocimeter
- ![virtual-card-ame-outline](../../assets/icones/virtual-card-ame-outline.png) virtual-card-ame-outline
- ![virtual-card-ame-solid](../../assets/icones/virtual-card-ame-solid.png) virtual-card-ame-solid
- ![wallet-outline](../../assets/icones/wallet-outline.png) wallet-outline
- ![wallet-solid](../../assets/icones/wallet-solid.png) wallet-solid
- ![wdental](../../assets/icones/wdental.png) wdental
- ![withdraw-retirar-outline](../../assets/icones/withdraw-retirar-outline.png) withdraw-retirar-outline
- ![withdraw-retirar-solid](../../assets/icones/withdraw-retirar-solid.png) withdraw-retirar-solid
- ![work-outline](../../assets/icones/work-outline.png) work-outline
- ![work-solid](../../assets/icones/work-solid.png) work-solid


## Image

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-image--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/image)

O Componente Image pode carregar tanto ícones padrões da Ame quanto imagens para compor os seus layouts

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![image](../../assets/images_components/v1.0.0/image.png)

### Utilização

```xml
<Image src="<link_da_imagem>" alt="Uma Imagem" />
```

### Propriedades

| Propriedade | Descrição                                                           | Type             | Default |
| ----------- | ------------------------------------------------------------------- | ---------------- | ------- |
| src         | Carrega a imagem tanto de require quanto com url                    | string, function | null    |
| cover       | Essa propriedade deixa a imagem com object-fill cover               | boolean          | false   |
| width       | Define a largura da imagem, pode ser usado em porcentagem ou pixels | string           | 100%    |
| height      | Define a altura da imagem, pode ser usado em porcentagem ou pixels  | string           | auto    |
| alt         | Insere um alt na imagem                                             | string           | null    |
| bordeRadius | Insere o borderRadius no componente                                 | string           | none    |


## InfiniteScroll

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-infinitescroll--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/infinitescroll)

Componente focado em perfomance.

### Exemplo

![toggle](../../assets/images_components/v1.0.0/infiniteScroll.png)

### Utilização

```xml harmony

state = {
    maxValue: 16,
    teams: teamsWordCup,
  }

  onEndReach = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.setState({
          maxValue: 32,
        })
        resolve()
      }, 3000)
    })
  }

<Window>
        <InfiniteScroll
          onEndReach={this.onEndReach}
          endOffset={50}>
          {this.state.teams.map(
            (team, index) =>
              index <= this.state.maxValue && (
                <CardImage
                  key={team.name}
                  onPress={() => console.log("press")}
                  image="https://static.vecteezy.com/system/resources/previews/008/785/472/original/fifa-world-cup-qatar-2022-official-logo-mondial-champion-symbol-design-abstract-illustration-free-vector.jpg"
                  title={team.name}
                  description={team.country}
                />
              ),
          )}
        </InfiniteScroll>
      </Window>
```

### Propriedades

| Propriedade | Descrição                                                    | Type              | Default |
| ----------- | ------------------------------------------------------------ | ----------------- | ------- |
| onEndReach  | Função que carrega ao chegar no bottom da div                | Promise, function | null    |
| endOffset   | Número em pixels para ativação do onEndReach antes do bottom | number            | 0       |
| children    | Conteúdo dentro do InfiniteScroll                            | ReactNode         | null    |
| disabled    | Desabilita o componente                                      | boolean           | false   |


## Input

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-input--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/input)

Insere um campo para inserção de dados.

### Exemplo

![input](../../assets/images_components/v1.0.0/input.png)

### Utilização

```jsx
<View>
  <Input
    placeholder="Digite seu nome:"
    value={this.state.inpuPadrao}
    onChange={e => this.setState({ inputPadrao: e })}
  />
</View>
```

### Propriedades

| Propriedade    | Descrição                                                                                                                              | Type     | Default |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| type           | Define o tipo do campo input. as opções são: "text", "number", "password", "email", "file", "search".                                  | string   | text    |
| value          | Define o valor do campo.                                                                                                               | any      | null    |
| placeholder    | Texto descritivo dentro do input.                                                                                                      | string   | null    |
| onChange       | Função a ser executada quando o valor é alterado.                                                                                      | function | null    |
| rightIcon      | Token do ícone a ser exibido no lado direito do Input. [Veja aqui a lista de icones](#Icon).                                           | string   | null    |
| clickRightIcon | Função a ser executada quando tocar no ícone do lado direito.                                                                          | function | null    |
| id             | Atribuiu um **id** ao input.                                                                                                           | string   | null    |
| mask           | Indica que o conteúdo do input deverá ser formatado de acordo com uma máscara. Pode ser usado um array de masks para mudança dinâmica. | string   | null    |
| disabled       | Desabilita o campo.                                                                                                                    | boolean  | false   |
| autoFocus      | Atribui foco automatico ao Input quando a página for carregada.                                                                        | boolean  | false   |
| onBlur         | Executa uma função assim que o Input perde o foco.                                                                                     | function | null    |
| accept         | Define o tipo de arquivo que será aceito no Input. Pode ser usado apenas com o type='file'.                                            | string   | null    |
| status         | Muda a cor da borda e hint de acordo com o status enviado. opções: "positive", "negative".                                             | string   | null    |
| multiline      | Se ativo define um input estilo text area.                                                                                             | boolean  | null    |
| hint           | Pequeno texto auxiliar.                                                                                                                | string   | null    |
| onSubmit       | Função executada ao usuário prescionar a tecla 'Enter' durante o uso do componente Input.                                              | function | null    |

### Exemplos

No exemplo a seguir o componente _Input_ é usado com o 'type="password"', com isso é gerado automáticamente o ícone de visibilidade do campo, que é alterado quando clicado:

![input](../../assets/images_components/v1.0.0/input_password_example.gif)

```jsx
<View>
  <Input
    placeholder="Digite a sua senha"
    value={this.state.inputPassword}
    onChange={e => this.setState({ inputPassword: e })}
    type="password"
    hint="Escolha uma senha segura"
  />
</View>
```

---

> **Observação** Ao definir o type como 'password' ou 'search', o icone é pré-definido, não podendo ser usado junto com a propriedade 'rightIcon'


## Label

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-label--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/label)

Componente select para seleção de itens

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![select](../../assets/images_components/v1.0.0/label.png)

### Utilização

```xml
  <Label
    text='Exemplo do [u]label[/u]'
    htmlFor='inputName'>
    Exemplo do [u]label[/u]
  </Label>
```

### Propriedades

| Propriedade | Descrição                                                               | Type   | Default       | Obrigatório |
|-------------|-------------------------------------------------------------------------|--------|---------------|-------------|
| htmlFor     | Define a qual elemento de form, através do id, o `Label` está atrelado. | string | null          | Não         |
| color       | Define a cor do texto. [Veja os valores](#Cores)                        | string | "neutral-900" | Não         |


## Map

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-map--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/map)

Componente utilizado para a exibir a localização no mapa, a partir da API do Google Map.

Documentação da API: <https://developers.google.com/maps/documentation/javascript/overview>

### Exemplo

![map](../../assets/images_components/v1.0.0/map.png)

### Utilização

```jsx harmony
<Map
  apiKey={'GOOGLE_API_KEY'}
  mapOptions={{
    center: {
      lat: -22.94980821,
      lng: -43.19095194,
    },
    zoom: 12,
  }}
  getMap={(map, markers) => {
    this.setState({ map, markers });
  }}
  onMarkerPress={marker => {
    let info = new window.google.maps.InfoWindow({
      content: 'teste',
    });
    info.open(this.state.map, marker);
  }}
  markers={[
    {
      lat: -22.970722,
      lng: -43.182365,
      options: {
        title: 'Copacabana',
        clickable: false,
        icon:
          'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png',
      },
    },
    {
      lat: -22.9511,
      lng: -43.1809,
      options: {
        title: 'Botafogo',
        draggable: true,
      },
    },
  ]}
/>
```

### Propriedades

| Propriedade   | Descrição                                                                                                                                                                                                                                                        | Type     | Default | Obrigatório |
|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------|
| apiKey        | Chave de Api **String** fornecida pelo Google para a exibição de um Mapa.                                                                                                                                                                                        | String   | null    | true        |
| mapOptions    | Aqui vão, obrigatoriamente em formato de objeto, todas as opções para a criação do mapa, como: center, zoom, disableDefaultUI...                                                                                                                                 | Object   | null    | false       |
| getMap        | Função a ser executada que recebe como parametro o mapa criado via props na construção do mapa. Use-a para armazenar o mapa em um estado para usa-lo se necessario no google map.                                                                                | Function | null    | false       |
| height        | Define a altura do mapa. As informações principai necessárias para a criação de um Marker são lat: (latitude) e lng: (longitude), porem, em options, você pode colocar todas as opções que desejar para o marker, como **title**, **clickable** e **draggable**. | Number   | 100vh   | false       |
| markers       | Lista de Pins no mapa.                                                                                                                                                                                                                                           | Array    | null    | false       |
| onMarkerPress | Ação de clique em cada marker. Recebe como parametro da função um objeto **marker**. Tem como valor o marker que está sendo pressionado, para ser utilizado em funções que o requeira.                                                                           | Function | null    | false       |


## Modal

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-modal--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/modal)

Componente que renderiza um modal no meio da tela ou a partir do bottom.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![modal](../../assets/images_components/v1.0.0/modal.png)

### Utilização

```xml
<Modal
  show={showModal}
  position={position}
  closeModalCallback={this.closeModal}
>
  <Text>Lorem ipsum ....</Text>
</Modal>
```

### Propriedades

| Propriedade        | Descrição                                                                                                        | Type     | Default |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| show               | Essa propriedade recebe true ou false e controla a visibilidade do modal.                                        | boolean  | false   |
| position           | Position pode receber as strings bottom ou center (Veja nos exemplos no fim da página as diferenças entre eles). | string   | center  |
| closeModalCallback | Essa propriedade chama a função que muda o status presente em show, ela é acionada quando clica fora do modal.   | function | null    |
pressOutCloseModal | Essa propriedade impede que a Modal feche caso clique fora do conteúdo   | function | null    |
### Exemplos

![modal](../../assets/images_components/v1.0.0/modal_ex_1.png)

Modal com

```xml
import img from '../../assets/images/image_example.jpg';

 state = {
    showModal: false,
    position: 'center',
  };
  closeModal = () => {
    this.setState({
      showModal: false,
    });
  };
  openModal = position => {
    this.setState({
      showModal: true,
      position: position,
    });
  };

   <Modal
      show={showModal}
      position={position}
      closeModalCallback={this.closeModal}>
      <Image height={200} src={img} />
      <Text>Lorem ipsum dolor sit amet</Text>
      <View padding='nano'>
        <Button onPress={() => console.log('Continuar')}>Continuar</Button>
      </View>
      <View padding='nano'>
        <Button variant='secondary' onPress={() => this.closeModal()}>
          Cancelar
        </Button>
      </View>
    </Modal>
```


## Pagination

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-pagination--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/pagination)

Componente de paginação. A renderização do conteúdo de cada página fica a cargo do desenvolvedor.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.


![modal](../../assets/images_components/v1.0.0/pagination.png)

### Utilização

```jsx
  <Pagination
    currentPage={1}
    pages={10}
    onClick={page => console.log(page)}
    showFirstButton
    showLastButton
    pageRange={10}
  />
```

### Propriedades

| Propriedade     | Descrição                                                                                                               | Type     | Default | Obrigatório |
|-----------------|-------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------|
| pages           | Informa o número de páginas.                                                                                            | number   | null    | sim         |
| currentPage     | Informa o número da página corrente.                                                                                    | number   | null    | sim         |
| onClick         | Função que será chamada ao clicar em um dos botões do paginador, o número da página é enviado como argumento da função. | function | null    | sim         |
| showFirstButton | Mostrar o botão “ir para primeira página".                                                                              | boolean  | false   | não         |
| showlastButton  | Mostrar o botão “ir para última página".                                                                                | boolean  | false   | não         |
| disabled        | Desabilita o paginador.                                                                                                 | boolean  | false   | não         |
| pageRange       | Define quantos botões o paginador deve mostrar.                                                                         | number   | 5       | não         |


### Exemplos

![pagination](../../assets/images_components/v1.0.0/pagination_ex_1.png)

Modal com

```js

 state = {
    pages: 10,
    currentPage: 1,
    pagesContent: [
      { colorPage: "primary", textPage: "Primary color" },
      { colorPage: "secondary", textPage: "Secondary color" },
      { colorPage: "neutral-500", textPage: "Neutral 500 color" },
      { colorPage: "primary-700", textPage: "Primary 700 color" },
      { colorPage: "secondary-700", textPage: "Secondary 700 color" },
      { colorPage: "positive-700", textPage: "Positive 700 color" },
      { colorPage: "warning-700", textPage: "Warning 700 color" },
      { colorPage: "negative-700", textPage: "Negative 700 color" },
      { colorPage: "support-01", textPage: "Support 01 color" },
      { colorPage: "support-03", textPage: "Support 02 color" },
    ],
  }
```
```jsx
   <View
    direction="column"
    align="center"
    justify="center">
    <View
      width="80%"
      height="320px"
      align="center"
      justify="center"
      backgroundColor={
        this.state.pagesContent[this.state.currentPage - 1].colorPage
      }>
      {this.state.pagesContent[this.state.currentPage - 1].textPage}
    </View>
    <View height="16px" />
    <Pagination
      currentPage={this.state.currentPage}
      pages={this.state.pages}
      onClick={page => this.setState({ currentPage: page })}
      showFirstButton
      showLastButton
    />
  </View>
```


## ProgressIndicator

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-progressindicator--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/progressindicator)

Componente para visualização de transição de elementos/telas através de bullets animados.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![bullet](../../assets/images_components/v1.0.0/bullet.png)

<!-- Modifique esse componente em tempo real pelo [Storybook](https://ame-miniapp-components.calindra.com.br/storybook/?path=/story/intera%C3%A7%C3%B5es-bulletanimation--basic) -->

### Utilização

```xml
<View>
   <ProgressIndicator
      returnSelected={index => console.log(index)}
      bullets={this.state.bullets}
      selected={this.state.selected}
    />
</View>
```

### Propriedades

| Propriedade    | Descrição                                                    | Type     | Default | Obrigatório |
| -------------- | ------------------------------------------------------------ | -------- | ------- | ----------- |
| bullets        | Define quantos bullets irão aparecer                         | number   | 3       | Sim         |
| returnSelected | Retorna qual o bullet ativo                                  | function | null    | Não         |
| selected       | Define qual é o bullet default na renderização do componente | number   | 1       | Não         |


## QRCode

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-qrcode--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/qrcode)

Utilize este componente para mostrar um QRCode na tela.

### Utilização

```xml
<QRCode value="Meu valor do QRCode" />
```

### Propriedades

| Propriedade | Descrição                                       | Type    | Default |
| ----------- | ----------------------------------------------- | ------- | ------- |
| value     | Valor contido no QRCode | string  | null    |
| size     | Tamanho do QRCode | number  | null    |


## Radio

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-radio--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/radio)

O Radio é usado para seleções únicas, onde somente uma opção pode ser selecionada

### Exemplo

![Radio](../../assets/images_components/v1.0.0/radio.png)

### Utilização

```xml
  <Radio
      name='primary'
      value='primary1'
      id='primary'
      checked={this.state.valueRadioSelected}
      onChange={value => {
        this.selectValue(value);
      }}
  />
```

### Propriedades

| Propriedade | Descrição                                                                                | Type     | Default   | Obrigatório |
| ----------- | ---------------------------------------------------------------------------------------- | -------- | --------- | ----------- |
| name        | Define o name do radio                                                                   | string   | null      | Sim         |
| checked     | Aqui é passado qual o value selecionado                                                  | string   | null      | Sim         |
| onChange    | Função que retorna o value                                                               | function | null      | Sim         |
| value       | Define o valor para o radio                                                              | string   | null      | Sim         |
| disabled    | Desabilita o radio                                                                       | boolean  | false     | Não         |
| id          | Passa um id para o componente                                                            | number   | aleatório | Não         |


## SegmentedControl

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-segmentedcontrol--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/segmentedcontrol)

Componente de tab que recebe diversas propriedades

### Exemplo

![segmented-control](../../assets/images_components/v1.0.0/segmented-control.png)

### Utilização

```jsx harmonic
 state = {
    tabIndex: 0,
    tabs: [
      {
        title: "Anual",
        valor: "R$ [b][color=primary]75,90[/color][/b]",
      },
      {
        title: "Semestral",
        valor: "R$ [b][color=primary]89,90[/color][/b]",
      },
      {
        title: "Mensal",
        valor: "R$ [b][color=primary]109,90[/color][/b]",
      },
    ],
  };
  
  <Window>
   <View
      margin="large"
      width="auto">
      <SegmentedControl
        activeTab={this.state.tabIndex}
        onChange={this.handleTabChange}
        items={[
          { title: this.state.tabs[0].title },
          { title: this.state.tabs[1].title },
          { title: this.state.tabs[2].title },
        ]}
      />
      <View
        width="312px"
        backgroundColor="neutral-300"
        paddingBottom="big"
        paddingTop="big"
        borderRadius="small"
        borderWidth="thin"
        borderTopWidth="none"
        borderColor="primary-700"
        justify="center">
        <Text
          textAlign="center"
          fontSize="large">
          {this.state.tabs[this.state.tabIndex].valor}
          <Text fontSize="nano">/Mês</Text>
        </Text>
      </View>
    </View>
  </Window>
```

### Propriedades

| Propriedade | Descrição                                               | Type     | Default | Obrigatório |
|-------------|---------------------------------------------------------|----------|---------|-------------|
| activeTab   | Define qual aba começará ativa                          | Number   | 0       | não         |
| onChange    | Função de mudança na aba                                | Function | null    | sim         |
| disabled    | Desabilita o componente                                 | Boolean  | false   | não         |
| items       | Recebe um array de objetos que definirá o título da aba | Array    | null    | sim         |

---

OBS: A parte da renderização do conteúdo ficará a cargo do desenvolvedor.


## Select

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-select--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/select)

Componente select para seleção de itens

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![select](../../assets/images_components/v1.0.0/select.png)

### Utilização

```xml
state = {
    selected: '',
  };
  options = [
    {
      label: 'teste 1',
      value: 'teste 1',
    },
    {
      label: 'teste 2',
      value: 'teste 2',
    },
    {
      label: 'teste 3',
      value: 'teste 3',
    },
    {
      label: 'teste 4',
      value: 'teste 4',
    },
    {
      label: 'teste 5',
      value: 'teste 5',
    },
    {
      label: 'teste 6',
      value: 'teste 6',
    },
  ];

  <Select
    label='Label do select'
    placeholder='Selecione Aqui'
    keySelectLabel='label'
    options={this.options}
    value={this.state.selected}
    onChange={e => this.setState({ selected: e })}
  />
```

### Propriedades

| Propriedade      | Descrição                                                                                                  | Type     | Default | Obrigatório |
|------------------|------------------------------------------------------------------------------------------------------------|----------|---------|-------------|
| options          | Array de objetos contendo valores de `label` e `value`.                                                    | array    | null    | Sim         |
| value            | Valor que pode ser passado para iniciar o componente. Recebe objeto com {value: 'string', label: 'string'} | objeto   | null    | Sim         |
| keySelectLabel   | Indica se o valor informado como value e o retorno da função OnChange é o `label` ou o `value do objeto.   | string   | label   | Não         |
| disabled         | Desabilita o componente.                                                                                   | boolean  | false   | Não         |
| onChange         | Função a ser executada quando selecionar valor, deve alimentar o estado do `value`.                        | function | null    | Sim         |
| placeholder      | Texto descritivo dentro do Select caso o value inicial seja vazio.                                         | string   | null    | Não         |
| inputValue       | Valor do inicial do Input. Recebe objeto com {value: 'string', label: 'string'}                            | objeto   | null    | Não         |
hint | Define um hint para o select                                                                       | string   | null    | Não         |
status|Define um status. Pode receber 'positive' ou 'negative'                                                                       | string   | null    | Não         |

## Slider

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-slider--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/slider)

Componente utilizado para seleção de valor através de um slider range.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![slider](../../assets/images_components/v1.0.0/slider.png)

### Utilização

```jsx
<Slider
  minAmount={0}
  maxAmount={10000}
  value={200000}
  onChange={(value) => {
    setValue(value)
  }}
/>
```

### Propriedades

| Propriedade | Descrição                                                                                                                                             | Type     | Default   | Obrigatório |
|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------|-------------|
| monetary    | Define se os valores do componente será monetário (ex: 150,00) ou number (ex: 150)                                                                    | Boolean  | true      | false       |
| minAmount   | Valor mínimo para seleção. Se a prop _monetary_ for _true_, deve ser acrescentado _00_ ao final do número. (ex: 15000 => 150,00)                      | Number   | 0         | false       |
| maxAmount   | Valor máximo para seleção. Se a prop _monetary_ for _true_, deve ser acrescentado _00_ ao final do número. (ex: 700000 => 7000,00)                    | Number   | 7500      | false       |
| value       | Valor inicial que será renderizado no componente.                                                                                                     | Number   | null      | false       |
| onChange    | Função que será executada quando o valor for alterado.                                                                                                | Function | undefined | true        |
| step        | Quantidade que será incrementada ou decrementada no value ao alterar o slider. (Ex: se o valor desta prop for 5, a alteração será de 5 em 5)          | Number   | 100       | false       |
| disabled    | Desabilita a interação com o componente.                                                                                                              | Boolean  | false     | false       |
| infoLabel   | Indica se os labels laterais serão representados pelos values de min e max, ou por icones. opções: "value" ou "icon"                                  | string   | value     | false       |
| leftIcon    | Quando infoLabel="icon", renderiza um icone na esquerda do componente. Recebe um token da lista de icones que pode ser encontrado [aqui](#Icon) | string   | null      | false       |
| rightIcon   | Quando infoLabel="icon", renderiza um icone na direitoa do componente. Recebe um token da lista de icones que pode ser encontrado [aqui](#Icon) | string   | null      | false       |
| label       | Habilita a renderoização de um label acima do knobe do slider representando o valor selecionado                                                       | boolean  | false     | false       |

### Outros exemplos

Abaixo, alguns exemplos usando o Slider:

![slider](../../assets/images_components/v1.0.0/slider_ex_1.png)

```xml
<Window>
     <Slider
        monetary
        minAmount={20000}
        maxAmount={700000}
        value={200000}
        step={20000}
        onChange={value => {
          setValueMonetary(value);
        }}
      />
```

## Status

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-status--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/status)

Componente de status que recebe diversas propriedades

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![view](../../assets/images_components/v1.0.0/status.png)

### Utilização

```jsx harmonic
state = {
    inputValue: "",
    statusText: "",
    showStatus: false,
    typeStatus: "",
  };

  getInputValue = (text) => {
    this.setState({ inputValue: text });
    if (text.length < 8) {
      this.setState({ statusText: "Recusado" });
      this.setState({ showStatus: true });
      this.setState({ typeStatus: "error" });
    } else if (text.length > 13) {
      this.setState({ statusText: "Em validação" });
      this.setState({ typeStatus: "warning" });
    } else {
      this.setState({ statusText: "Validado" });
      this.setState({ typeStatus: "success" });
    }
  };

  <Window>
    <View marginTop="small">
      <View direction="row">
        <Text>Contrato social</Text>
        <Status show={this.state.showStatus} type={this.state.typeStatus}>
          {this.state.statusText}
        </Status>
      </View>
      <Input
        placeholder="Teste Status"
        value={this.state.inputValue}
        onChange={(e) => this.getInputValue(e)}
      />
    </View>
  </Window>
```

### Propriedades

| Propriedade | Descrição                                           | Type             | Default    | Obrigatório |
| ----------- | --------------------------------------------------- | ---------------- | ---------- | ----------- |
| show        | Exibe o status                                      | boolean          | false      | Não         |
| type        | Tipo do status. 'positive', 'warning' ou 'negative' | string           | 'negative' | Não         |
| theme       | Tema do status                                      | string | '700        | Não         |

### Propriedades

| Propriedade | Descrição                                           | Type        | Default | Obrigatório |
| ----------- | --------------------------------------------------- | ----------- | ------- | ----------- |
| hint        | Recebr um objeto do tipo hint com suas definições   | HintProps   | none    | não         |
| status      | Recebe um objeto do tipo status com suas definições | StatusProps | primary | não         |
| label       | Texto a ser renderizado no componente               | string      | none    | sim         |
| info        | Info                                                | string      | false   | não         |
| disabled    | Desabilita o componente                             | boolean     | false   | não         |


## Text

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-text--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/text)

Componente de texto que recebe diversas propriedades

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade.

### Exemplo

![view](../../assets/images_components/v1.0.0/text.png)

### Utilização

```xml
<View>
  <Text>
    Componente Text
  </Text>
</View>
```

### Propriedades

| Propriedade | Descrição                                                                                                                   | Type    | Default                   |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------- |
| fontSize    | Define o tamanho da font. [Veja os valores](#Tipografia)                                                                   | string  | xxs                       |
| fontWeight  | Define o peso da font. [Veja os valores](#Tipografia)                                                                     | string  | regular                   |
| lineHeight  | Define a altura da linha font. [Veja os valores](#Bordas)                                                                 | string  | medium                    |
| textAlign   | Define o alimanhento do texto. [Veja os valores](#Tipografia)                                                              | string  | left                      |
| selectable  | Define se o texto será selecionavel.                                                                                        | boolean | false                     |
| truncate    | Define uma quantidade de linhas para mostrar o texto. Ao fim dessas linhas, caso tenha mais textos, será acresentado '...'. | number  | null                      |
| color       | Define a cor do texto. [Veja os valores](#Cores)                                                                          | string  | neutracolor-brand-darkest |
| target      | Define um estilo para o texto pré determinado. [Veja os valores](#Target)                                                                          | string  | null                      |


## Toggle

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-toggle--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/toggle)

Componente para escolhas com retorno true e false.

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![toggle](../../assets/images_components/v1.0.0/toggle.png)

### Utilização

```xml harmony
state = {
  checked: false
}

<Toggle
  checked={this.state.checked}
  value="teste"
  onChange={(e) => this.setState({ checked: e.state })}
/>
```

### Propriedades

| Propriedade | Descrição                                                                                                    | Type     | Default |
| ----------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------- |
| checked     | Define se o Toggle está ou não ativo                                                                         | boolean  | false   |
| disabled    | Desabilita o componente                                                                                      | boolean  | false   |
| value       | Valor atribuído ao componente                                                                                | string   | null    |
| id          | Atribui um id ao Toggle                                                                                      | string   | null    |
| onChange    | Função que retorna o estado do componente.                                                                   | function | null    |

### Outros exemplos

Abaixo um exemplo do toggle sendo usado em aceite de termos e etc.

![toggle](../../assets/images_components/v1.0.0/toggle_ex_1.png)

```xml harmony
state = {
  checked: false
}
<View align="center">
  <Toggle
    checked={this.state.checked}
    value="teste"
    onChange={(e) => this.setState({ checked: e.state })}
  />
  <View paddingLeft="nano">
    <Text>
      Aceito os{' '}
      <Text onClick={() => console.log('clique')}>termos de uso</Text>
    </Text>
  </View>
</View>
```


## Tooltip

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-tooltip--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/tooltip)

Componente focado em acessibilidade.

### Exemplo

![toggle](../../assets/images_components/v1.0.0/tooltip.png)

### Utilização

```xml harmony

<Text>

Lorem Ipsum is{` `}

<Tooltip

label="Olá eu sou o Tooltip"

position="bottom">

<Text>[b]simply[/b]</Text>

</Tooltip>

{` `}

dummy text of the printing and typesetting industry. Lorem

Ipsum has been the industry's standard dummy text ever

since the 1500s, when an unknown printer took a galley of

type and scrambled it to make a type specimen book. It has

survived not only five centuries, but also the leap into

electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of

Letraset sheets containing Lorem Ipsum passages, and more

recently with desktop publishing software like Aldus

PageMaker including versions of Lorem Ipsu

</Text>
```

### Propriedades

| Propriedade | Descrição | Type | Default |

| ----------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------- |

| showArrow | Define se a flecha indicadora aparecerá | boolean | false |

| position | Define a posição onde ficará o Tooltip | string | bottom |

| label | Define o que estará escrito dentro do Tooltip | string | null |


## Touchable

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-touchable--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/touchable)

Envolva um componente com Touchable para que ele passe a ter interação.

### Exemplo

![Touchable](../../assets/images_components/v1.0.0/touchable.png)

### Utilização

```xml
<Touchable onClick={() => {console.log('Clicado!')}}>
  <Text>Agora sou clicável</Text>
</Touchable>
```

### Propriedades

| Propriedade     | Descrição                                                     | Type     | Default |
| --------------- | ------------------------------------------------------------- | -------- | ------- |
| onPress         | Função que será chamada ao tocar no componente.               | function | null    |
| disabledOnPress | Função que será chamada caso o Touchable esteja desabilitado. | function | null    |
| disabled        | Desabilita o componente                                       | boolean  | false   |
| width           | Define a largura do componente                                | string   | null    |
| height          | Define a altura do componente                                 | string   | null    |


## ValueInput

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-valueinput--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/valueinput)

Use o ValueInput para entradas de valores numéricos

> **Importante:** Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

### Exemplo

![Touchable](../../assets/images_components/v1.0.0/valueInput.png)

### Utilização

```xml

  state = {
    valueInteger: 10,
  };

  <Window>
    <View>
    <ValueInput
        value={this.state.valueInteger}
        onChange={(v) =>
             this.setState({ valueInteger: v }, console.log(v))
        }
        />
    </View>
   </Window>
```

### Propriedades

| Propriedade | Descrição                                                             | Type     | Default   | Obrigatório |
|-------------|-----------------------------------------------------------------------|----------|-----------|-------------|
| value       | Valor inicial que será renderizado no componente.                     | number   | null      | Sim         |
| valueType   | Tipo do valor 'integer', 'decimal' ou 'currency'                      | number   | 'integer' | Sim         |
| onChange    | Função a ser executada quando o valor é alterado, retornando o valor, | function | null      | Sim         |
| prefix      | Propriedade responsável por definir um prefixo no valor.              | string   | null      | Não         |
| suffix      | Acrescenta um sufixo após o valor.                                    | string   | null      | Não         |
| maxLength   | Quantidade máxima de caracteres.                                      | number   | 9         | Não         |
| disableEdit | Esconde o botão Editar                                                | boolean  | false     | Não         |
| disabled    | Desabilita o componente.                                              | boolean  | false     | Não         |
| flat        | Altera a aparência do componente para uma versão mais simples.        | boolean  | false     | Não         |


## Video

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-video--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/video)

Componente para renderização de vídeo.

### Exemplo

![video](../../assets/images_components/v1.0.0/video.png)

### Utilização

```jsx harmony
<Video source="https://s3.amazonaws.com/calindra.com.br/ame.mp4" />
```

### Propriedades

| Propriedade | Descrição                                                                                                          | Type             | Default | Obrigatório |
| ----------- | ------------------------------------------------------------------------------------------------------------------ | ---------------- | ------- | ----------- |
| source      | Aceita arquivos de vídeo em formato MP4 e player externo como o Vimeo.                                             | string           | null    | Não         |
| youtubeId   | Aceita o ID de um vídeo do youtubeId. OBS: O ID pode ser encontrado na URL do vídeo apois o caracter '='.          | string           | null    | Não         |
| width       | Define a largura do componente.                                                                                    | string ou number | 100%    | Não         |
| height      | Define a altura do componente.                                                                                     | string ou number | 100%    | Não         |
| controls    | Permite o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução. | boolean          | false   | Não         |
| autoPlay    | O vídeo é executado automaticamente. OBS: Funciona apenas com a propriedade source.                                | boolean          | false   | Não         |
| thumbnail   | Imagem para a capa do vídeo enquanto não carregado. OBS: Funciona apenas com a propriedade source.                 | string           | null    | Não         |
| muted       | Inicia o vídeo mutado.                                                                                             | boolean          | false   | Não         |

> Importante: No Android, mesmo a propriedade `autoPlay={true}`, para que o vídeo seja reproduzido automaticamente, é necessário que `muted={true}`


## View

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-view--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/view)

Talvez um dos componentes mais úteis para construir telas e recebe diversas propriedades para te ajudar nessa tarefa.

### Exemplo

![view](../../assets/images_components/v1.0.0/view.png)

### Utilização

```xml
<View>
  <Text>
    Este paragráfo está dentro da view
  </Text>
</View>
```

### Propriedades

| Propriedade             | Descrição                                                                                                                                                     | Type    | Default |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| background              | Adiciona uma cor de fundo. [Veja os valores](#Cores)                                                                                                          | string  | null    |
| border                  | Adiciona uma borda na View. [Veja os valores](#borderWidth)                                                                                                   | string  | null    |
| borderRadius            | Define o arredondamento da borda. [Veja os valores](#borderRadius)                                                                                            | string  | null    |
| borderRadiusLeftTop     | Define o arredondamento da borda no canto esquerdo superior. [Veja os valores](#borderRadius)                                                                 | string  | null    |
| borderRadiusRightTop    | Define o arredondamento da borda no canto direito superior. [Veja os valores](#borderRadius)                                                                  | string  | null    |
| borderRadiusLeftBottom  | Define o arredondamento da borda no canto esquerdo inferior. [Veja os valores](#borderRadius)                                                                 | string  | null    |
| borderRadiusRightBottom | Define o arredondamento da borda no canto direito inferior. [Veja os valores](#borderRadius)                                                                  | string  | null    |
| borderColor             | Define qual será a cor da borda. [Veja os valores](#Cores)                                                                                                    | string  | null    |
| direction               | Define qual será a direção do display flex. [Veja os valores](#Flex)                                                                                          | string  | null    |
| align                   | Define qual será o alinhamento vertical do display flex. [Veja os valores](#Flex)                                                                             | string  | null    |
| justify                 | Define qual sera o alinhamento horizontal do display flex. [Veja os valores](#Flex)                                                                           | string  | null    |
| paddingLeft             | Define o padding no lado esquerdo. [Veja os valores](#Espaçamento)                                                                                            | string  | xxxs    |
| paddingRight            | Define o padding no lado direito. [Veja os valores](#Espaçamento)                                                                                             | string  | xxxs    |
| paddingTop              | Define o padding em cima. [Veja os valores](#Espaçamento)                                                                                                     | string  | xxxs    |
| paddingBottom           | Define o padding em baixo. [Veja os valores](#Espaçamento)                                                                                                    | string  | xxxs    |
| paddingX                | Define o padding no eixo X. [Veja os valores](#Espaçamento)                                                                                                   | string  | null    |
| paddingY                | Define o padding no eixo Y. [Veja os valores](#Espaçamento)                                                                                                   | string  | null    |
| margin                  | Define a margem no eixo X e Y. [Veja os valores](#Espaçamento)                                                                                                | string  | null    |
| marginLeft              | Define a margem no lado esquerdo. [Veja os valores](#Espaçamento)                                                                                             | string  | null    |
| marginRight             | Define a margem no lado direito. [Veja os valores](#Espaçamento)                                                                                              | string  | null    |
| marginTop               | Define a margem em cima. [Veja os valores](#Espaçamento)                                                                                                      | string  | null    |
| marginBottom            | Define a margem em baixo. [Veja os valores](#Espaçamento)                                                                                                     | string  | null    |
| marginY                 | Define a margem no eixo Y. [Veja os valores](#Espaçamento)                                                                                                    | string  | null    |
| marginX                 | Define a margem no eixo X. [Veja os valores](#Espaçamento)                                                                                                    | string  | null    |
| width                   | Define qual será a largura da View em % ou px                                                                                                                 | string  | 100%    |
| minWidth                | Define qual será a largura miníma da View em % ou px                                                                                                          | string  | 100%    |
| maxWidth                | Define qual será a largura máxima da View em % ou px                                                                                                          | string  | 100%    |
| height                  | Define qual será a altura da View em % ou px                                                                                                                  | string  | auto    |
| minHeight               | Define qual será a altura máxima da View em % ou px                                                                                                           | string  | auto    |
| maxHeight               | Define qual será a altura máxima da View em % ou px                                                                                                           | string  | auto    |
| display                 | Define qual será o display. [Veja os valores](#Flex)                                                                                                          | string  | block   |
| flexWrap                | Define se os itens são forçados em uma linha ou podem ser agrupados em várias linhas. [Veja os valores](#Flex)                                                | string  | null    |
| flexShrink              | Define uma redução caso os valores do container ultrapassarem o limite. Veja mais em [exemplos](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) | number  | null    |
| FlexGrow                | Define um aumento caso os valores do container ultrapassarem o limite. Veja mais em [exemplos](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)    | number  | null    |
| flexBasis               | Define qual será a largura base dos elementos. Seus valores podem ser em %, px ou 'auto'                                                                      | string  | null    |
| flexNone                | Passando essa propriedade a View respeitará o tamanho de width independente do flex                                                                           | boolean | false   |
| opacity                 | Define a opacidade da View. [Veja os valores](#Opacidade)                                                                                                     | string  | null    |
| shadow                  | Aplica niveis de sombra na View. [Veja os valores](#Sombras)                                                                                                  | string  | null    |


## Window

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/componentes-base-window--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/window)

É um componente mestre que precisa envolver toda tela.
Seu uso é **obrigatório** e ele deverá ser o primeiro nó de todas as telas.
Nunca utilize Window dentro de outro Window.

Você deve usar o componente Window como no exemplo abaixo.

### Utilização

```xml
<Window>
    Todas as outras tags devem ficar aqui dentro
</Window>
```


# Super Componentes

## CardNavigation

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/super-componentes-cardnavigation--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/cardnavigation)

Componente de CardNavigation que recebe diversas propriedades

### Exemplo

![view](../../assets/images_components/v1.0.0/cardNavigation.png)

<!--
Modifique esse componente em tempo real pelo [Storybook](https://ame-miniapp-components.calindra.com.br/storybook/?path=/story/textos-text--basic) -->

### Utilização

```jsx harmonic
  state = {
    item: {
      title: "Posto BR Itaquaquecetuba",
      description: "Vendedor",
      rightIcon: "Vendedor",
    },
  };

  <Window>
      <View aligin="row" marginBottom="small">
        <CardNavigation
          
          leftIcon="ame-outline"
          width="469px"
          title={this.state.item.title}
          description={this.state.item.description}
          rightIcon="right-next"></CardNavigation>
      </View>
      <View aligin="row" marginBottom="small">
        <CardNavigation
          width="469px"
          title={this.state.item.title}
          description={this.state.item.description}
          rightIcon="right-next"
          onClick={() => {
            console.log("Segundo card clicado");
          }}></CardNavigation>
      </View>
      <View aligin="row">
        <CardNavigation
          leftImage={img}
          width="469px"
          title={this.state.item.title}
          description={this.state.item.description}></CardNavigation>
      </View>
              
  </Window>
```

### Propriedades

| Propriedade | Descrição                    | Type     | Default | Obrigatório |
| ----------- | ---------------------------- | -------- | ------- | ----------- |
| title       | Título do CardNavigation     | string   | center  | não         |
| width       | Largura do card              | Boolean  | false   | não         |
| description | Descrição do card            | string | null    | não         |
| leftIcon    | Nome do ícone da na esquerda | string | null    | não         |
| rightIcon   | Nome do ícone da na direita  | string | null    | não         |
| leftImage   | Nome da imagem na esquerda   | string | null    | não         |
| description | Descrição do card            | string | null    | não         |
| onClick     | Função de clique no card     | Function | null    | não         |


## FormSelect

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/super-componentes-formselect--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/formselect)

Componente FormSelect que recebe diversas propriedades

### Exemplo

![view](../../assets/images_components/v1.0.0/formSelect.png)

<!--
Modifique esse componente em tempo real pelo [Storybook](https://ame-miniapp-components.calindra.com.br/storybook/?path=/story/textos-text--basic) -->

### Utilização

```jsx harmonic
 options = [
    {
      label: "teste 1",
      value: "teste 1",
    },
    {
      label: "teste 2",
      value: "teste 2",
    },
    {
      label: "teste 3",
      value: "teste 3",
    },
    {
      label: "teste 4",
      value: "teste 4",
    },
    {
      label: "teste 5",
      value: "teste 5",
    },
    {
      label: "teste 6",
      value: "teste 6",
    },
  ];

   <Window>
    <View padding="large" height="500px">
        <Text target="title">FormSelect</Text>
        <View marginTop="large">
        <FormSelect
            label="Label"
            options={this.options}
            placeholder="Selecione Aqui"
            keySelectLabel="label"
            onChange={(e) => console.log("selected: ", e)}
        />
        </View>
    </View>
    </Window>
```

### Propriedades

| Propriedade | Descrição                                           | Type        | Default | Obrigatório |
| ----------- | --------------------------------------------------- | ----------- | ------- | ----------- |
| hint        | Recebr um objeto do tipo hint com suas definições   | HintProps   | none    | não         |
| status      | Recebe um objeto do tipo status com suas definições | StatusProps | primary | não         |
| label       | Texto a ser renderizado no componente               | string      | none    | sim         |
| info        | Info                                                | string      | false   | não         |
| disabled    | Desabilita o componente                             | boolean     | false   | não         |


## List

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/super-componentes-list--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/list)

Este componente fornece uma lista útil para ser usada como um navegador, exibir produtos ou outras coisas.

### Exemplo

![list](../../assets/images_components/v1.0.0/list.png)

### Utilização

```xml harmony
state = {
  ListItems: [{ title: 'Compras' }, { title: 'Saldo' }, { title: 'Extrato' }]
}
goTo = (index) => {
  console.log(index)
}
<View padding="sm">
  <List items={this.state.ListItems} onItemPress={(i) => this.goTo(i)} />
</View>
```

### Propriedades

| Propriedade  | Descrição                                                                                                | Type     | Default | Obrigatório |
| ------------ | -------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
| items        | Recebe um array de objetos contendo a propriedade `title`.                                               | array    | null    | Sim         |
| disabled     | Desabilita o Componente.                                                                                 | boolean  | false   | Não         |
| onIntemPress | Função a ser executada quando um item é clicado. Retorna o index do item no array da propriedade `items` | function | null    | Não         |

#### items

Valores aceitos em cada objeto do array. Todos os valores são do tipo `string`.

```js
{
  title: 'Titulo do item.'
}
```


## TextLink

Modifique esse componente em tempo real pelo Storybook [clique aqui](https://ame-miniapp-storybook.calindra.com.br/web/0.11.0/?path=/docs/super-componentes-textlink--base)

Veja um exemplo desse componente [aqui](https://example-components.calindra.com.br/web/0.11.0/#/web/0.11.0/textlink)

Executa a função semelhante a um link html. Evite o uso excessivo.

### Exemplo

![textlink](../../assets/images_components/v1.0.0/textLink.png)

### Utilização

O TextLink pode ser usado com o Text, assim você consegue controlar o tamanho da fonte sem precisar passar um parâmetro para o text e outro para o textLink por exemplo.

```xml
<Text size='md'>
  Um texto qualquer
  <TextLink onClick='() => { funcaoClick() }'/> Texto Link </TextLink>
  [b]um texto bold[/b]
</Text>
```

### Propriedades

| Propriedade | Descrição                                                        | Type     | Default | Obrigatório |
| ----------- | ---------------------------------------------------------------- | -------- | ------- | ----------- |
| onPress     | Recebe uma função para ser executada ao pressionarmos o TextLink | function | null    | Sim         |

---
_Source: https://npm.io/package/ame-miniapp-components-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._