### Practical Example: Progress Indicators

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Indicator.md

This example demonstrates using the Indicator component to visualize progress through a series of steps. Indicators are styled to show completed steps up to the 'currentStep'.

```jsx
import React from 'react';
import { Indicator, Flex } from '@livelo/alchemy-web';

function ProgressIndicators() {
  const steps = [0, 1, 2, 3];
  const currentStep = 2;

  return (
    <Flex gap="inline._2XS" justify="center">
      {steps.map((step) => (
        <Indicator
          key={step}
          containerSize="SM"
          size="SM"
          color="primary"
          indicators={steps}
          value={step}
          active={step <= currentStep}
          accessibilityLabel={`Etapa ${step + 1}`}
        />
      ))}
    </Flex>
  );
}
```

--------------------------------

### Basic Loading Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Loading.md

A simple example of rendering the Loading component. It shows the default state of the loading indicator without any specific props.

```typescript
import React from 'react';
import { Loading } from '@livelo/alchemy-web';

function BasicLoading() {
  return <Loading />;
}
```

--------------------------------

### Basic useKeyPress Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/hooks/useKeyPress.md

A simple example showcasing the basic usage of the useKeyPress hook. It monitors the ' ', 'Enter', and 'Escape' keys, displaying their current press status. This illustrates the fundamental functionality of the hook.

```typescript
import React from 'react';
import { useKeyPress } from '@livelo/alchemy-web';
import { Typography } from '@livelo/alchemy-web';

function BasicKeyPress() {
  const isSpacePressed = useKeyPress(' ');
  const isEnterPressed = useKeyPress('Enter');
  const isEscapePressed = useKeyPress('Escape');

  return (
    <div>
      <Typography variant="body2">
        Espaço: {isSpacePressed ? 'Pressionado' : 'Solto'}
      </Typography>
      <Typography variant="body2">
        Enter: {isEnterPressed ? 'Pressionado' : 'Solto'}
      </Typography>
      <Typography variant="body2">
        Escape: {isEscapePressed ? 'Pressionado' : 'Solto'}
      </Typography>
    </div>
  );
}
```

--------------------------------

### Simple Tooltip Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Overlay.md

A practical example of using the Overlay component to create a simple tooltip that appears when hovering over a button. It includes basic styling for the tooltip content.

```typescript
import React from 'react';
import { Overlay, Button, Typography } from '@livelo/alchemy-web';

function SimpleTooltip() {
  return (
    <Overlay
      placement="top"
      hasArrow
      overlayChildren={
        <div style={{ 
          padding: '8px 12px', 
          backgroundColor: '#333',
          color: 'white',
          borderRadius: '4px',
          fontSize: '14px'
        }}>
          Esta é uma dica útil!
        </div>
      }
    >
      <Button>Passe o mouse aqui</Button>
    </Overlay>
  );
}
```

--------------------------------

### Loading Component Usage Examples

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Loading.md

Demonstrates various ways to use the Loading component, including different sizes, colors, and with labels. These examples showcase the component's versatility.

```typescript
<Loading size="XS" />
<Loading size="SM" />
<Loading size="MD" />
<Loading size="LG" />
<Loading size="XL" />
```

```typescript
<Loading color="primary" />
<Loading color="secondary" />
<Loading color="success" />
<Loading color="error" />
<Loading color="warning" />
<Loading color="neutral" />
```

```typescript
<Loading label="Carregando..." />
<Loading label="Salvando dados..." labelPlacement="right" />
<Loading label="Processando..." labelPlacement="top" />
```

--------------------------------

### Basic ThumbnailCard with Image

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/ThumbnailCard.md

Example of using the ThumbnailCard component with the 'image' type. It displays a product title and an image source, demonstrating the basic setup for image-based content.

```typescript
<ThumbnailCard
  title="Produto Incrível"
  type="image"
  source={{ uri: 'https://example.com/product.jpg' }}
/>
```

--------------------------------

### Loading Component in Various Sizes Example (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Loading.md

Presents a practical example of displaying the Loading component in all available sizes (XS, SM, MD, LG) within a view. This is useful for comparing sizes or showcasing different loading states.

```typescript
import React from 'react';
import { View } from 'react-native';
import { Loading, Typography } from '@livelo/alchemy-mobile';

function SizesExample() {
  return (
    <View style={{ gap: 20 }}>
      <View>
        <Typography variant="caption1">Extra Small</Typography>
        <Loading size="XS" />
      </View>
      
      <View>
        <Typography variant="caption1">Small</Typography>
        <Loading size="SM" />
      </View>
      
      <View>
        <Typography variant="caption1">Medium</Typography>
        <Loading size="MD" />
      </View>
      
      <View>
        <Typography variant="caption1">Large</Typography>
        <Loading size="LG" />
      </View>
    </View>
  );
}
```

--------------------------------

### Navigation Links Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Link.md

A practical example demonstrating how to use multiple Link components to create a basic navigation menu. It utilizes the 'Flex' layout component for spacing and arrangement.

```typescript
import React from 'react';
import { Link, Flex } from '@livelo/alchemy-web';

function Navigation() {
  return (
    <Flex gap="inline._MD">
      <Link to="/">Home</Link>
      <Link to="/products">Produtos</Link>
      <Link to="/about">Sobre</Link>
      <Link to="/contact">Contato</Link>
    </Flex>
  );
}
```

--------------------------------

### Practical Example: Interactive Indicators

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Indicator.md

An example showing interactive Indicator components. Clicking an indicator updates the 'selected' state, which in turn highlights the corresponding indicator, demonstrating how to handle user interaction.

```jsx
import React, { useState } from 'react';
import { Indicator, Flex, Typography } from '@livelo/alchemy-web';

function InteractiveIndicators() {
  const [selected, setSelected] = useState(0);
  const items = [0, 1, 2, 3, 4, 5];

  return (
    <Flex direction="column" gap="stack._XS" align="center">
      <Typography variant="body2">
        Item selecionado: {selected + 1}
      </Typography>
      
      <Flex gap="inline._2XS">
        {items.map((item) => (
          <Indicator
            key={item}
            containerSize="LG"
            size="LG"
            indicators={items}
            value={item}
            active={item === selected}
            onClick={setSelected}
            tabIndex={0}
          />
        ))}
      </Flex>
    </Flex>
  );
}
```

--------------------------------

### Basic Avatar Usage Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Avatar.md

A fundamental example of using the Avatar component. It displays an Avatar with a given name and a specified size ('MD'). This serves as a starting point for integrating the Avatar into applications.

```typescript
import React from 'react';
import { Avatar } from '@livelo/alchemy-mobile';

function BasicExample() {
  return (
    <Avatar 
      name="Maria Santos"
      size="MD"
    />
  );
}
```

--------------------------------

### Basic Layout Example with Flex

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Flex.md

A practical example demonstrating how to use the Flex component to create a basic vertical layout with centered items and padding. It includes importing necessary components like Typography.

```typescript
import React from 'react';
import { Flex, Typography } from '@livelo/alchemy-mobile';

function BasicLayout() {
  return (
    <Flex 
      flexDirection="column" 
      alignItems="center" 
      p="inset._MD"
    >
      <Typography variant="h2">Título</Typography>
      <Typography variant="body1">Conteúdo</Typography>
    </Flex>
  );
}
```

--------------------------------

### Basic Badge Usage Example (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Badge.md

A simple example demonstrating how to render a Badge component with a text value. This is the most basic implementation, useful for displaying simple labels or notifications.

```typescript
import React from 'react';
import { Badge } from '@livelo/alchemy-mobile';

function BasicExample() {
  return <Badge value="Novo" />; 
}
```

--------------------------------

### Textinput with Mask Examples

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Textinput.md

Provides examples of using different mask types (CPF, CNPJ, Phone) with the Textinput component to format user input.

```typescript
// CPF
<Textinput
  label="CPF"
  value={cpf}
  onChange={(masked, raw) => setCpf(raw)}
  mask="cpf"
/>
```

```typescript
// CNPJ
<Textinput
  label="CNPJ"
  value={cnpj}
  onChange={(masked, raw) => setCnpj(raw)}
  mask="cnpj"
/>
```

```typescript
// Telefone
<Textinput
  label="Telefone"
  value={phone}
  onChange={(masked, raw) => setPhone(raw)}
  mask="phone"
/>
```

--------------------------------

### Textinput with Icon Examples

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Textinput.md

Demonstrates how to add icons to the left or right side of the Textinput component, including an example of handling clicks on the right icon.

```typescript
// Ícone à esquerda
<Textinput
  label="E-mail"
  value={email}
  onChange={setEmail}
  leftIcon="mail"
/>
```

```typescript
// Ícone à direita
<Textinput
  label="Senha"
  value={password}
  onChange={setPassword}
  rightIcon="eye"
  onClickRightIcon={() => setShowPassword(!showPassword)}
/>
```

--------------------------------

### Alert Accessibility Props Example (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Alert.md

Provides an example of how to enhance the accessibility of the Alert component using specific accessibility props. It demonstrates setting `accessibilityLabel` for custom screen reader announcements and `accessibilityLiveRegion` to control when screen readers announce changes to the alert content.

```typescript
<Alert 
  type="error"
  title="Erro Crítico"
  message="Sistema temporariamente indisponível"
  accessibilityLabel="Alerta de erro crítico"
  accessibilityLiveRegion="assertive"
/>
```

--------------------------------

### Image Resize Modes Examples

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Image.md

Illustrates the different `resizeMode` options ('cover', 'contain', 'fill') for the Image component, showing how each affects the image display.

```typescript
import React from 'react';
import { Image, Flex, Typography } from '@livelo/alchemy-web';

function ResizeModes() {
  const imageSrc = "https://example.com/landscape.jpg";
  
  return (
    <Flex direction="column" gap="inline._MD">
      <Flex gap="inline._SM" wrap="wrap">
        <Flex direction="column" gap="inline._XS">
          <Typography variant="body3">Cover (padrão)</Typography>
          <Image 
            src={imageSrc}
            resizeMode="cover"
            width={200}
            height={150}
            alt="Imagem com cover"
          />
        </Flex>
        
        <Flex direction="column" gap="inline._XS">
          <Typography variant="body3">Contain</Typography>
          <Image 
            src={imageSrc}
            resizeMode="contain"
            width={200}
            height={150}
            alt="Imagem com contain"
          />
        </Flex>
        
        <Flex direction="column" gap="inline._XS">
          <Typography variant="body3">Fill</Typography>
          <Image 
            src={imageSrc}
            resizeMode="fill"
            width={200}
            height={150}
            alt="Imagem com fill"
          />
        </Flex>
      </Flex>
    </Flex>
  );
}
```

--------------------------------

### Info Variant Alert Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Alert.md

Specific example of the Alert component using the 'info' variant to display a piece of informational content, complete with a title and message.

```tsx
<Alert 
  variant="info"
  title="Informação"
  message="Manutenção programada para hoje às 22h."
/>
```

--------------------------------

### Active Indicator Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Indicator.md

Shows how to render an Indicator component with its active state enabled and a primary color applied. This example illustrates customization for active status.

```typescript
<Indicator 
  containerSize="MD"
  active={true}
  color="primary"
/>
```

--------------------------------

### Basic Carousel Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Carousel.md

A simple example of using the Carousel component with just data and a renderItem function. This is the most basic implementation for displaying a list of items.

```typescript
<Carousel
  data={items}
  renderItem={({ item }) => (
    <Card>
      <Typography>{item.title}</Typography>
    </Card>
  )}
/>
```

--------------------------------

### Link Sizing Examples

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Link.md

Provides examples of how to change the size of the Link component using the 'size' prop. Available options are 'SM', 'MD' (default), and 'LG', allowing for visual adjustment based on context.

```typescript
<Link size="SM" to="/small">Link Pequeno</Link>
<Link size="MD" to="/medium">Link Médio</Link>
<Link size="LG" to="/large">Link Grande</Link>
```

--------------------------------

### Multiple Overlay Placements Example in React

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Overlay.md

Provides examples of using the Overlay component with different 'placement' values ('top', 'bottom left', 'right') to showcase its versatility in positioning floating content.

```jsx
<View style={{ gap: 16 }}>
  <Overlay
    overlayChildren={<Text>Overlay superior</Text>}
    placement="top">
    <Button>Top</Button>
  </Overlay>
  
  <Overlay
    overlayChildren={<Text>Overlay inferior esquerdo</Text>}
    placement="bottom left"
    hasArrow>
    <Button>Bottom Left</Button>
  </Overlay>
  
  <Overlay
    overlayChildren={<Text>Overlay direito</Text>}
    placement="right">
    <Button>Right</Button>
  </Overlay>
</View>
```

--------------------------------

### ThumbnailCard: Selected State Example (React/TSX)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/ThumbnailCard.md

This snippet demonstrates how to render a ThumbnailCard in its selected state. It takes a thumbnail image URL, a title, and a `selected` prop to indicate its active status. Ensure the `thumbnail` path is correct and the `title` is concise.

```tsx
<ThumbnailCard
  thumbnail="/image.jpg"
  title="Item Selecionado"
  selected
/>
```

--------------------------------

### Basic Image Usage

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Image.md

A simple example of how to use the Image component with essential props like `src`, `alt`, `width`, and `height`.

```typescript
import React from 'react';
import { Image } from '@livelo/alchemy-web';

function BasicImage() {
  return (
    <Image 
      src="https://example.com/image.jpg"
      alt="Descrição da imagem"
      width={300}
      height={200}
    />
  );
}
```

--------------------------------

### Avatar Sizes Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Avatar.md

Demonstrates how to use the Avatar component with different size props ('XS', 'SM', 'MD', 'LG', 'XL'). Each example renders an Avatar with a specified name and size, illustrating the visual variations available.

```typescript
<Avatar name="João Silva" size="XS" />
<Avatar name="João Silva" size="SM" />
<Avatar name="João Silva" size="MD" />
<Avatar name="João Silva" size="LG" />
<Avatar name="João Silva" size="XL" />
```

--------------------------------

### Basic Indicator Usage

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Indicator.md

Demonstrates the simplest way to render an Indicator component with its default props. This example shows the basic structure for including an indicator.

```typescript
<Indicator containerSize="MD" />
```

--------------------------------

### Dialog Confirmation Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Dialog.md

Demonstrates how to implement a confirmation dialog using the Dialog component. It includes state management for opening/closing the dialog, setting titles, button texts, colors, and defining callbacks for button presses. This example is built with React and TypeScript.

```typescript
import React, { useState } from 'react';
import { Dialog, Button } from '@livelo/alchemy-mobile';

function ConfirmationExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>
        Deletar Item
      </Button>
      
      <Dialog
        isOpen={isOpen}
        bodyTitle="Confirmar Exclusão"
        mainButtonText="Deletar"
        mainButtonColor="error"
        onMainButtonPress={() => {
          console.log('Item deletado');
          setIsOpen(false);
        }}
        additionalButtonText="Cancelar"
        onAdditionalButtonPress={() => setIsOpen(false)}
      >
        Esta ação não pode ser desfeita. O item será removido permanentemente.
      </Dialog>
    </>
  );
}

```

--------------------------------

### Complete Form Example with Textfield

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Textfield.md

Illustrates a comprehensive form using multiple Textfield components for different input types: name, email, phone, and amount. It utilizes `useState` to manage form data and applies various props like `mask`, `leftIcon`, `required`, `maxLength`, `keyboardType`, `autoCapitalize`, `prefix`, and `showCounter` for enhanced user experience and data integrity.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import { Textfield } from '@livelo/alchemy-mobile';

function CompleteExample() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    amount: ''
  });

  return (
    <View>
      <Textfield
        label="Nome Completo"
        value={formData.name}
        onChangeText={(text) => setFormData(prev => ({ ...prev, name: text }))}
        leftIcon="user"
        required
        maxLength={50}
        showCounter
      />
      
      <Textfield
        label="Email"
        value={formData.email}
        onChangeText={(text) => setFormData(prev => ({ ...prev, email: text }))}
        leftIcon="mail"
        keyboardType="email-address"
        autoCapitalize="none"
      />
      
      <Textfield
        label="Telefone"
        value={formData.phone}
        mask="phone"
        onChangeText={(masked, raw) => setFormData(prev => ({ ...prev, phone: masked }))}
        leftIcon="phone"
      />
      
      <Textfield
        label="Valor"
        value={formData.amount}
        mask="currency"
        onChangeText={(masked, raw) => setFormData(prev => ({ ...prev, amount: masked }))}
        prefix="R$"
        maxLength={10}
      />
    </View>
  );
}

```

--------------------------------

### User Onboarding Sequence with Stepper

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Stepper.md

This TypeScript code shows how to implement a user onboarding flow using the Stepper component. It manages the current onboarding step and keeps track of completed steps. Users can only navigate to steps that have already been completed, providing a guided onboarding experience. The Stepper visually represents the onboarding progress with labels and icons.

```typescript
const [currentStep, setCurrentStep] = useState(0);
const [completedSteps, setCompletedSteps] = useState<number[]>([]);

const onboardingSteps = [
  { label: "Bem-vindo", icon: "star" },
  { label: "Perfil", icon: "user" },
  { label: "Preferências", icon: "settings" },
  { label: "Concluído", icon: "check" }
];

const completeStep = () => {
  setCompletedSteps([...completedSteps, currentStep]);
  if (currentStep < onboardingSteps.length - 1) {
    setCurrentStep(currentStep + 1);
  }
};

<Stepper
  currentStep={currentStep}
  steps={onboardingSteps}
  onPressStep={(stepIndex) => {
    // Permite navegar apenas para etapas completadas
    if (completedSteps.includes(stepIndex)) {
      setCurrentStep(stepIndex);
    }
  }}
/>
```

--------------------------------

### Calculate Animation Start Point for Bottom Sheet

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/hooks/useSheet.md

Shows how to use the useSheet hook to get the startPoint for a bottom sheet. The calculated 'startPoint' is typically the screen height plus Android insets, useful for initiating animations.

```typescript
import React from 'react';
import { useSheet } from '@livelo/alchemy-mobile';

function BottomSheetExample() {
  const { startPoint } = useSheet('bottom');

  // startPoint será a altura da tela + insets do Android
  console.log('Start point:', startPoint);

  return (
    // Usar startPoint para animação
  );
}
```

--------------------------------

### Basic Loading Component Usage (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Loading.md

A fundamental example of implementing the Loading component. It demonstrates the simplest way to render the component, which will display a default-sized and colored loading indicator.

```typescript
import React from 'react';
import { Loading } from '@livelo/alchemy-mobile';

function BasicExample() {
  return <Loading />;
}
```

--------------------------------

### Dynamically Set Sheet Position and Get Start Point

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/hooks/useSheet.md

Illustrates how to dynamically change the sheet's placement ('top' or 'bottom') and retrieve the corresponding animation startPoint using the useSheet hook. This allows for flexible UI behavior.

```typescript
import React, { useState } from 'react';
import { useSheet } from '@livelo/alchemy-mobile';

function MultiPositionExample() {
  const [placement, setPlacement] = useState<'top' | 'bottom'>('bottom');
  const { startPoint } = useSheet(placement);

  return (
    // Componente que usa startPoint baseado na posição
  );
}
```

--------------------------------

### Practical Example: Filter Sheet

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Sheet.md

A practical example demonstrating a common use case for the Sheet component: a filter panel. This example utilizes various components from '@livelo/alchemy-web' like Button, Flex, Typography, and Checkbox to create an interactive filter interface.

```typescript
import React, { useState } from 'react';
import { Sheet, Button, Flex, Typography, Checkbox } from '@livelo/alchemy-web';

function FilterSheet() {
  const [isOpen, setIsOpen] = useState(false);
  const [filters, setFilters] = useState({
    category: [],
    price: '',
    rating: ''
  });

  const categories = ['Eletrônicos', 'Roupas', 'Casa', 'Esportes'];

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Filtros
      </Button>
      
      <Sheet
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        placement="bottom"
        snapPoints={['40%', '80%']}
      >
        <Flex direction="column" gap="stack._MD" style={{ padding: '20px' }}>
          <Typography variant="h3">Filtros</Typography>
          
          <Flex direction="column" gap="stack._SM">
            <Typography variant="h4">Categoria</Typography>
            {categories.map((category) => (
              <Checkbox
                key={category}
                label={category}
                checked={filters.category.includes(category)}
                onChange={(checked) => {
                  setFilters(prev => ({
                    ...prev,
                    category: checked 
                      ? [...prev.category, category]
                      : prev.category.filter(c => c !== category)
                  }));
                }}
              />
            ))}
          </Flex>
          
          <Flex gap="inline._SM">
            <Button 
              variant="secondary" 
              onClick={() => setIsOpen(false)}
            >
              Cancelar
            </Button>
            <Button onClick={() => {
              console.log('Aplicar filtros:', filters);
              setIsOpen(false);
            }}>
              Aplicar
            </Button>
          </Flex>
        </Flex>
      </Sheet>
    </>
  );
}

```

--------------------------------

### Basic useFocusVisible Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/hooks/useFocusVisible.md

This example shows a basic implementation of the useFocusVisible hook within a React functional component. It imports the necessary components from @livelo/alchemy-web and uses the `isFocusVisible` boolean returned by the hook to display a status message. The example highlights how the focus state changes based on user interaction (tabbing vs. clicking).

```typescript
import React from 'react';
import { useFocusVisible } from '@livelo/alchemy-web';
import { Button, Typography, Flex } from '@livelo/alchemy-web';

function FocusVisibleExample() {
  const { isFocusVisible } = useFocusVisible();

  return (
    <Flex direction="column" gap="inline._SM">
      <Typography variant="h3">Focus Visible Demo</Typography>
      
      <Typography variant="body2">
        Status do foco: {isFocusVisible ? 'Visível' : 'Oculto'}
      </Typography>
      
      <Typography variant="body3">
        Use Tab para navegar e veja os indicadores de foco aparecerem.
        Clique com o mouse e eles desaparecerão.
      </Typography>
      
      <Flex gap="inline._SM">
        <Button>Botão 1</Button>
        <Button variant="secondary">Botão 2</Button>
        <Button variant="outline">Botão 3</Button>
      </Flex>
    </Flex>
  );
}
```

--------------------------------

### Exemplo Básico de Uso do Tooltip

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Tooltip.md

Um exemplo simples de como usar o Tooltip para fornecer uma dica de ação ao clicar em um botão 'Salvar'.

```typescript
import React from 'react';
import { Tooltip, Button } from '@livelo/alchemy-web';

function BasicExample() {
  return (
    <Tooltip text="Este botão salva suas alterações">
      <Button>Salvar</Button>
    </Tooltip>
  );
}
```

--------------------------------

### Custom Value Indicator Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Indicator.md

Illustrates rendering an Indicator with a custom value, size, color, and active state. This example demonstrates comprehensive customization options.

```typescript
<Indicator 
  containerSize="LG"
  value={5}
  size="LG"
  color="success"
  active={true}
/>
```

--------------------------------

### Configuração de Stepper para Onboarding em React

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Stepper.md

Define os passos para um processo de onboarding, incluindo identificador, rótulo, descrição e ícone para cada etapa. Utiliza o componente `Stepper` para visualização. O estado `currentOnboardingStep` controla a etapa ativa.

```tsx
const onboardingSteps = [
  {
    id: 'welcome',
    label: 'Bem-vindo',
    description: 'Introdução à plataforma',
    icon: 'hand-wave'
  },
  {
    id: 'setup',
    label: 'Configuração',
    description: 'Configure sua conta',
    icon: 'settings'
  },
  {
    id: 'tutorial',
    label: 'Tutorial',
    description: 'Aprenda o básico',
    icon: 'book-open'
  },
  {
    id: 'complete',
    label: 'Concluído',
    description: 'Tudo pronto!',
    icon: 'check-circle'
  }
];

<Stepper 
  steps={onboardingSteps}
  currentStep={currentOnboardingStep}
  orientation="vertical"
/>
```

--------------------------------

### Image Gallery Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Image.md

Exemplo de como exibir uma galeria de imagens usando o componente Image dentro de um ScrollView. Cada imagem é renderizada com um modo de redimensionamento 'cover'.

```typescript
import React from 'react';
import { ScrollView } from 'react-native';
import { Image, Flex } from '@livelo/alchemy-mobile';

function GalleryExample() {
  const images = [
    'https://example.com/1.jpg',
    'https://example.com/2.jpg',
    'https://example.com/3.jpg',
  ];

  return (
    <ScrollView horizontal>
      <Flex flexDirection="row" gap="inline._SM" p="inset._MD">
        {images.map((uri, index) => (
          <Image
            key={index}
            source={{ uri }}
            width={150}
            height={100}
            resizeMode="cover"
          />
        ))}
      </Flex>
    </ScrollView>
  );
}
```

--------------------------------

### Dropdown Menu Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Overlay.md

Demonstrates creating a dropdown menu using the Overlay component. It displays a list of menu items with icons and handles click events for each item.

```typescript
import React from 'react';
import { Overlay, Button, Flex, MenuItem } from '@livelo/alchemy-web';

function DropdownMenu() {
  const menuItems = [
    { id: 'edit', label: 'Editar', icon: 'edit' },
    { id: 'copy', label: 'Copiar', icon: 'copy' },
    { id: 'delete', label: 'Excluir', icon: 'trash' }
  ];

  return (
    <Overlay
      placement="bottom start"
      overlayChildren={
        <Flex 
          direction="column" 
          style={{
            backgroundColor: 'white',
            border: '1px solid #ccc',
            borderRadius: '8px',
            padding: '8px',
            minWidth: '150px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
          }}
        >
          {menuItems.map((item) => (
            <MenuItem
              key={item.id}
              leftIcon={item.icon}
              onClick={() => console.log(item.id)}
            >
              {item.label}
            </MenuItem>
          ))}
        </Flex>
      }
    >
      <Button rightIcon="chevronDown">
        Ações
      </Button>
    </Overlay>
  );
}
```

--------------------------------

### Typography Component Disabled State Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Typography.md

A minimal example showcasing the disabled state of the Typography component. This is useful for indicating non-interactive text elements.

```typescript
<Typography disabled>
  Texto desabilitado
</Typography>

```

--------------------------------

### Responsive Image Implementation

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Image.md

Shows how to create a responsive image using the Image component by setting `width` to '100%' and `height` to 'auto', along with CSS styles for `maxWidth` and `minHeight`.

```typescript
import React from 'react';
import { Image } from '@livelo/alchemy-web';

function ResponsiveImage() {
  return (
    <Image 
      src="https://example.com/hero-image.jpg"
      alt="Imagem hero responsiva"
      width="100%"
      height="auto"
      resizeMode="cover"
      style={{
        maxWidth: '800px',
        minHeight: '300px'
      }}
    />
  );
}
```

--------------------------------

### MenuItem States Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/MenuItem.md

Presents examples of MenuItem in different states: normal, active, and disabled. This showcases how to visually represent the interactive status of menu items.

```typescript
<View style={{ gap: 8 }}>
  <MenuItem>Item Normal</MenuItem>
  <MenuItem active>Item Ativo</MenuItem>
  <MenuItem disabled>Item Desabilitado</MenuItem>
</View>
```

--------------------------------

### Initialize Module Configuration with App SDK

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-mobile-at-scale-customization/regras.md

Configures the main module using the Livelo App SDK. It sets default feature flags and provides module initialization details. This function relies on the '@livelo/app-sdk/configManager' and '@livelo/app-sdk/utils' modules.

```typescript
import { setDefaults } from '@livelo/app-sdk/configManager';
import { IInitModuleProps } from '@livelo/app-sdk/utils';
import { name } from '../../package.json';

const initFn: IInitModuleProps['initFn'] = ({ featureFlagsKey }) => {
  const featureFlagDefaultValue = {
    [featureFlagsKey]: JSON.stringify({
      enabled: true,
      description: 'Descrição do Módulo',
      features: {
        feature_key: {
          description: 'Descrição da feature',
          enabled: true,
        },
      },
    }),
  };
  setDefaults(featureFlagDefaultValue);
};

export const getNomeDoModuloInitModule: () => IInitModuleProps = () => ({
  moduleName: name,
  initFn,
});

```

--------------------------------

### Exibir Tooltip em Diferentes Posicionamentos

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Tooltip.md

Demonstra como posicionar o Tooltip em diferentes direções (top, right, bottom, left) em relação ao elemento ativador.

```typescript
<Tooltip text="Tooltip no topo" placement="top">
  <button>Hover me (top)</button>
</Tooltip>

<Tooltip text="Tooltip na direita" placement="right">
  <button>Hover me (right)</button>
</Tooltip>

<Tooltip text="Tooltip embaixo" placement="bottom">
  <button>Hover me (bottom)</button>
</Tooltip>

<Tooltip text="Tooltip na esquerda" placement="left">
  <button>Hover me (left)</button>
</Tooltip>
```

--------------------------------

### Basic Overlay Positioning Examples

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Overlay.md

Illustrates the basic usage of the Overlay component with different 'placement' props to position the overlay below, above, or to the right of the trigger element.

```typescript
// Abaixo
<Overlay 
  placement="bottom"
  overlayChildren={<div>Conteúdo abaixo</div>}
>
  <button>Clique aqui</button>
</Overlay>

// Acima
<Overlay 
  placement="top"
  overlayChildren={<div>Conteúdo acima</div>}
>
  <button>Clique aqui</button>
</Overlay>

// À direita
<Overlay 
  placement="right"
  overlayChildren={<div>Conteúdo à direita</div>}
>
  <button>Clique aqui</button>
</Overlay>
```

--------------------------------

### Conventional Commits Git Command

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-mobile-at-scale-customization/regras.md

Demonstrates the basic Git commands for preparing and committing code using the Conventional Commits standard. It includes staging all changes with `git add .` and initiating an interactive commit prompt with `git commit`.

```bash
# Preparar arquivos
git add .

# Usar template de conventional commits
git commit

```

--------------------------------

### TypeScript: ItemList with Overline and Tag

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/ItemList.md

Shows an example of the ItemList component configured with an overline for categorization and a tag for status indication, such as 'New'. It also includes an image and a detailed description, suitable for product listings or featured items.

```typescript
<ItemList
  overline="CATEGORIA"
  headline="Produto Premium"
  supporting="Descrição detalhada do produto"
  tag={{ children: "Novo", color: "success" }}
  image={{ source: { uri: "product.jpg" }, alt: "Produto" }}
/>
```

--------------------------------

### Import Loading Component (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Loading.md

Demonstrates how to import the Loading component from the '@livelo/alchemy-mobile' library. This is the initial step required to use the component in your application.

```typescript
import { Loading } from '@livelo/alchemy-mobile';
```

--------------------------------

### Componente de Alertas de Onboarding (React/TSX)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Alert.md

Renderiza um alerta específico com base no passo atual do onboarding (`step`). Define um objeto de configuração para diferentes estados ('welcome', 'verification', 'complete'), incluindo variante, título, mensagem e ação. Retorna `null` se o passo não for reconhecido.

```tsx
function OnboardingAlerts({ step }) {
  const alerts = {
    welcome: {
      variant: 'info',
      title: 'Bem-vindo!',
      message: 'Complete seu perfil para começar a usar a plataforma.',
      action: <Button size="sm">Completar Perfil</Button>
    },
    verification: {
      variant: 'warning',
      title: 'Verifique seu Email',
      message: 'Enviamos um link de verificação para seu email.',
      action: <Button size="sm">Reenviar Email</Button>
    },
    complete: {
      variant: 'success',
      title: 'Perfil Completo!',
      message: 'Agora você pode aproveitar todos os recursos.',
      closable: true
    }
  };

  const currentAlert = alerts[step];
  if (!currentAlert) return null;

  return <Alert {...currentAlert} />;
}
```

--------------------------------

### Badge with Number and Color Example (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Badge.md

This example shows how to use the Badge component to display a numerical value and apply a specific color, such as 'error'. This is useful for indicating counts or critical status information.

```typescript
import React from 'react';
import { Badge } from '@livelo/alchemy-mobile';

function NumberExample() {
  return <Badge value={5} color="error" />; 
}
```

--------------------------------

### Product Gallery using Image Component

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Image.md

An example of a product gallery using the Image component within a Grid layout. It maps over product data to display product images and names.

```typescript
import React from 'react';
import { Image, Grid, Typography, Flex } from '@livelo/alchemy-web';

function ProductGallery() {
  const products = [
    { id: 1, name: "Produto 1", image: "/products/product1.jpg" },
    { id: 2, name: "Produto 2", image: "/products/product2.jpg" },
    { id: 3, name: "Produto 3", image: "/products/product3.jpg" },
    { id: 4, name: "Produto 4", image: "/products/product4.jpg" }
  ];

  return (
    <Grid gap={16}>
      <Grid.Row>
        {products.map(product => (
          <Grid.Col key={product.id} sm={6} md={3}>
            <Flex direction="column" gap="inline._XS">
              <Image 
                src={product.image}
                alt={product.name}
                width="100%"
                height={200}
                resizeMode="cover"
                style={{
                  borderRadius: '8px',
                  cursor: 'pointer'
                }}
              />
              <Typography variant="body2" align="center">
                {product.name}
              </Typography>
            </Flex>
          </Grid.Col>
        ))}
      </Grid.Row>
    </Grid>
  );
}
```

--------------------------------

### Basic Bottom Sheet Example with useSheet

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/hooks/useSheet.md

Demonstrates a basic usage of the useSheet hook for a bottom sheet. It takes 'bottom' as placement and an array of percentage strings for snap points. It logs the calculated initial point, snap points in pixels, and the first snap position.

```typescript
import React from 'react';
import { useSheet } from '@livelo/alchemy-web';

function BottomSheetExample() {
  const [startPoint, snapPoints, firstSnap] = useSheet(
    'bottom',
    ['30%', '60%', '90%']
  );

  console.log('Ponto inicial:', startPoint); // Altura da janela
  console.log('Pontos de encaixe:', snapPoints); // [30% da altura, 60% da altura, 90% da altura]
  console.log('Primeiro encaixe:', firstSnap); // Altura - 30% da altura

  return (
    <div>
      <p>Altura da janela: {startPoint}px</p>
      <p>Pontos de encaixe: {snapPoints.join(', ')}px</p>
      <p>Posição inicial aberta: {firstSnap}px</p>
    </div>
  );
}
```

--------------------------------

### Implement Responsive Layout with useWindowDimensions

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/hooks/useWindowDimensions.md

Illustrates how to create a responsive layout using the `useWindowDimensions` hook. It determines the device type (Mobile, Tablet, Desktop) and the number of columns based on the window width, dynamically adjusting the grid layout accordingly. This example leverages components from '@livelo/alchemy-web' for layout and typography.

```javascript
import React from 'react';
import { useWindowDimensions } from '@livelo/alchemy-web';
import { Typography, Flex, Grid } from '@livelo/alchemy-web';

function ResponsiveLayout() {
  const { width } = useWindowDimensions();
  
  const isMobile = width < 768;
  const isTablet = width >= 768 && width < 1024;
  const isDesktop = width >= 1024;

  const getDeviceType = () => {
    if (isMobile) return 'Mobile';
    if (isTablet) return 'Tablet';
    return 'Desktop';
  };

  const getColumns = () => {
    if (isMobile) return 1;
    if (isTablet) return 2;
    return 3;
  };

  return (
    <Flex direction="column" gap="inline._MD">
      <Typography variant="h2">
        Layout Responsivo - {getDeviceType()}
      </Typography>
      
      <Typography variant="body3" color="grayscale.dark">
        Largura: {width}px | Colunas: {getColumns()}
      </Typography>

      <Grid gap={16}>
        <Grid.Row>
          {Array.from({ length: 6 }, (_, i) => (
            <Grid.Col key={i} md={12 / getColumns()}>
              <div 
                style={{
                  padding: '20px',
                  backgroundColor: '#f0f0f0',
                  borderRadius: '8px',
                  textAlign: 'center'
                }}
              >
                <Typography variant="body2">
                  Card {i + 1}
                </Typography>
              </div>
            </Grid.Col>
          ))}
        </Grid.Row>
      </Grid>
    </Flex>
  );
}
```

--------------------------------

### Tooltip em Ícones com Informações Adicionais

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Tooltip.md

Utiliza o Tooltip para fornecer informações detalhadas (título e descrição) quando o usuário interage com um ícone de informação.

```typescript
import React from 'react';
import { Tooltip, Button } from '@livelo/alchemy-web';
import { InfoIcon } from '@livelo/alchemy-icons';

function IconTooltip() {
  return (
    <Tooltip 
      title="Informação Importante"
      text="Esta ação não pode ser desfeita. Certifique-se antes de continuar."
      placement="top"
      hasArrow
    >
      <Button float>
        <InfoIcon />
      </Button>
    </Tooltip>
  );
}
```

--------------------------------

### Avatar with Image and Status Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Avatar.md

This example demonstrates how to render an Avatar with both an image source and a presence status ('online'). It shows the configuration for displaying a user's profile picture along with their current status.

```typescript
import React from 'react';
import { Avatar } from '@livelo/alchemy-mobile';

function ImageExample() {
  return (
    <Avatar 
      name="João Silva"
      image={{ uri: 'https://example.com/avatar.jpg' }}
      size="LG"
      status="online"
    />
  );
}
```

--------------------------------

### Basic BottomSheet Example

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/BottomSheet.md

Demonstrates the basic usage of the BottomSheet component. It requires defining snap points, controlling its open state, and providing a close handler. The content is passed as children.

```typescript
<BottomSheet
  snapPoints={['50%']}
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}>
  <Typography>Conteúdo do BottomSheet</Typography>
</BottomSheet>
```

--------------------------------

### Badge Size Variations Example (TypeScript)

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Badge.md

Illustrates how to render Badge components in different sizes ('SM', 'MD', 'LG') using the `size` prop. This example utilizes the `Flex` component for layout to display badges side-by-side.

```typescript
import React from 'react';
import { Flex } from '@livelo/alchemy-mobile';

function SizesExample() {
  return (
    <Flex flexDirection="row" gap="inline._SM">
      <Badge value="SM" size="SM" />
      <Badge value="MD" size="MD" />
      <Badge value="LG" size="LG" />
    </Flex>
  );
}
```

--------------------------------

### Practical Example: Carousel Indicators

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-web-docs/components/Indicator.md

A practical example of using the Indicator component to create navigation indicators for a carousel. It dynamically renders indicators based on the number of slides and updates the active indicator based on the current slide state.

```jsx
import React, { useState } from 'react';
import { Indicator, Flex } from '@livelo/alchemy-web';

function CarouselIndicators() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const slides = [0, 1, 2, 3, 4];

  return (
    <Flex gap="inline._3XS" justify="center">
      {slides.map((slide) => (
        <Indicator
          key={slide}
          containerSize="MD"
          size="MD"
          indicators={slides}
          value={slide}
          active={slide === currentSlide}
          onClick={setCurrentSlide}
        />
      ))}
    </Flex>
  );
}
```

--------------------------------

### Horizontal Layout Example with Flex

Source: https://github.com/billyfranklim1/amazon-q-customizations/blob/main/livelo-design-system-customization/alchemy-mobile-docs/components/Flex.md

Shows an example of using the Flex component to create a horizontal layout with space between elements, suitable for buttons or navigation bars. It demonstrates setting flexDirection to 'row' and justifyContent to 'space-between'.

```typescript
import React from 'react';
import { Flex, Button } from '@livelo/alchemy-mobile';

function HorizontalLayout() {
  return (
    <Flex 
      flexDirection="row" 
      justifyContent="space-between"
      alignItems="center"
      p="inset._SM"
    >
      <Button type="outlined">Cancelar</Button>
      <Button>Confirmar</Button>
    </Flex>
  );
}
```