Mask

Apresentação

O componente Mask é responsável por criar elementos com máscaras visuais que podem ser aplicadas a imagens ou outros conteúdos. Ele oferece uma estrutura flexível para aplicar efeitos de máscara e transformações visuais.

Quando usar

• Para aplicar máscaras em imagens
• Para criar efeitos visuais
• Para transformar formas de elementos
• Para aplicar filtros visuais
• Para criar overlays com máscaras
• Para efeitos de recorte
• Para transformações de forma
• Para efeitos de transparência

Forma básica de uso

import { Mask, View, Text } from 'eitri-luminus';

// Mask básico
<Mask src="/imagem.jpg">
  <View>Conteúdo com máscara</View>
</Mask>

// Mask com classes personalizadas
<Mask src="/avatar.jpg" className="mask mask-circle">
  <View>Avatar circular</View>
</Mask>

// Mask com diferentes formas
<Mask src="/imagem.jpg" className="mask mask-hexagon">
  <View>Forma hexagonal</View>
</Mask>

// Mask para avatar
<Mask src="/usuario.jpg" className="mask mask-squircle">
  <View>Avatar do usuário</View>
</Mask>

// Mask com id personalizado
<Mask src="/imagem.jpg" id="mascara-principal">
  <View>Máscara identificada</View>
</Mask>

// Mask para logo
<Mask src="/logo.png" className="mask mask-diamond">
  <View>Logo da empresa</View>
</Mask>

// Mask responsivo
<Mask src="/imagem.jpg" className="mask mask-circle w-16 h-16 md:w-24 md:h-24">
  <View>Responsivo</View>
</Mask>

// Mask com overlay
<Mask src="/imagem.jpg" className="mask mask-heart">
  <View className="bg-black bg-opacity-50">
    <Text className="text-white">Coração</Text>
  </View>
</Mask>

// Mask para ícone
<Mask src="/icone.svg" className="mask mask-star">
  <View>Ícone estrela</View>
</Mask>

// Mask com conteúdo complexo
<Mask src="/imagem.jpg" className="mask mask-decagon">
  <View className="p-4 bg-black bg-opacity-30">
    <Text className="text-white text-xl font-bold">Título</Text>
    <Text className="text-white">Descrição</Text>
  </View>
</Mask>

// Mask para thumbnail
<Mask src="/thumbnail.jpg" className="mask mask-parallelogram">
  <View>Thumbnail</View>
</Mask>

// Mask com efeito de transparência
<Mask src="/imagem.jpg" className="mask mask-triangle">
  <View className="bg-gradient-to-t from-black to-transparent">
    <Text className="text-white">Gradiente</Text>
  </View>
</Mask>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do mask
src	string	URL da imagem para máscara
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Mask herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'mask' para estilização base
• Suporta diferentes tipos de máscaras (circle, hexagon, heart, etc)
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tipos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para efeitos visuais
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de transformações
• Funciona bem com imagens e avatares
• Facilita a criação de efeitos visuais
• Suporta overlays e gradientes
• Interface flexível e versátil