UI Library Tamagui

Uma biblioteca de componentes UI baseada em Tamagui, compatível com React (Vite) e React Native (Expo).

Instalação

npm install @your-org/ui-lib-tamagui

Dependências necessárias

npm install tamagui @tamagui/config react react-dom

Para React Native:

npm install tamagui @tamagui/config react react-native

Configuração

React (Vite)

// main.tsx
import { TamaguiProvider } from '@your-org/ui-lib-tamagui';
import { config } from '@your-org/ui-lib-tamagui';

function App() {
  return (
    <TamaguiProvider config={config}>
      {/* Sua aplicação */}
    </TamaguiProvider>
  );
}

React Native (Expo)

// App.tsx
import { TamaguiProvider } from '@your-org/ui-lib-tamagui';
import { config } from '@your-org/ui-lib-tamagui';

export default function App() {
  return (
    <TamaguiProvider config={config}>
      {/* Sua aplicação */}
    </TamaguiProvider>
  );
}

Uso

import { Button, Card, YStack, H1, Paragraph } from '@your-org/ui-lib-tamagui';

function MyComponent() {
  return (
    <Card>
      <H1>Título</H1>
      <Paragraph>Descrição do componente</Paragraph>
      <YStack space="$3">
        <Button variant="primary">Primary</Button>
        <Button variant="success">Success</Button>
        <Button variant="danger">Danger</Button>
      </YStack>
    </Card>
  );
}

Componentes Disponíveis

Customizados

• Button - Botão com variantes (primary, secondary, success, danger)
• Card - Card com espaçamento padrão

Re-exportados do Tamagui

• Layout: YStack, XStack
• Texto: H1, H2, H3, H4, H5, H6, Paragraph, Text
• Formulários: Input, Label, Switch, Checkbox, RadioGroup
• E muitos outros...

Desenvolvimento

# Instalar dependências
npm install

# Executar em modo desenvolvimento
npm run dev

# Build da biblioteca
npm run build:lib

# Build com tipos TypeScript
npm run build