open-index/open-npm huggingface dataset:
npm package: @luizmauro/lib-tamagui
Description: Uma biblioteca de componentes UI baseada em Tamagui, compatível com React (Vite) e React Native (Expo).
Latest version: 1.2.0

# UI Library Tamagui

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

## Instalação

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

### Dependências necessárias

```bash
npm install tamagui @tamagui/config react react-dom
```

Para React Native:
```bash
npm install tamagui @tamagui/config react react-native
```

## Configuração

### React (Vite)

```tsx
// 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)

```tsx
// 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

```tsx
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

```bash
# 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
```
npm package: @luizmauro/ui
Description: Biblioteca UI baseada em **Tamagui**, compatível com **React Native** e **Web**.
Latest version: 1.1.1

# @seu-org/ui

Biblioteca UI baseada em **Tamagui**, compatível com **React Native** e **Web**.

## Instalação

```bash
npm install @seu-org/ui tamagui react-native-web
```

## Uso

```tsx
import { TamaguiProvider } from 'tamagui'
import { Button, Card, config } from '@seu-org/ui'

export function App() {
  return (
    <TamaguiProvider config={config}>
      <Card>
        <Button>Olá Tamagui</Button>
      </Card>
    </TamaguiProvider>
  )
}
```
npm package: @luizmauro/ui-kit
Description: Cross-platform UI library using Tamagui for React and React Native
Latest version: 1.1.0

# Raizen Banking UI Kit

Uma biblioteca de componentes UI inspirada no design do Raizen Banking, construída com Tamagui para React e React Native.

## Instalação

```bash
npm install @luizmauro/ui-kit
```

## Configuração

```tsx
import { TamaguiProvider } from '@tamagui/core'
import { config } from '@luizmauro/ui-kit/tamagui.config'

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

## Componentes

### Layout Completo

```tsx
import { Layout, BalanceCard, ActionButton } from '@luizmauro/ui-kit'
import { CreditCard, DollarSign, Users } from '@tamagui/lucide-icons'

const sidebarItems = [
  { id: 'home', label: 'Início', icon: <Home size={20} /> },
  { 
    id: 'payments', 
    label: 'Pagamentos', 
    icon: <CreditCard size={20} />,
    expandable: true,
    children: [
      { id: 'anticipation', label: 'Antecipação de recebíveis', active: true }
    ]
  }
]

function App() {
  return (
    <Layout 
      sidebarItems={sidebarItems}
      userName="João Silva"
      userRole="Administrador"
    >
      <BalanceCard
        title="Disponível para antecipação"
        balance={40985.88}
        details={[
          { label: 'Será recebido', value: 'R$ 12.900,00' },
          { label: 'Data do crédito', value: 'dd/mm/aaaa' }
        ]}
      />
    </Layout>
  )
}
```

### Componentes Individuais

#### BalanceCard
```tsx
<BalanceCard
  title="Disponível para antecipação"
  balance={40985.88}
  details={[
    { label: 'Será recebido', value: 'R$ 12.900,00' },
    { label: 'Data do crédito', value: 'dd/mm/aaaa' }
  ]}
/>
```

#### ActionButton
```tsx
<ActionButton
  title="Configure sua antecipação automática"
  variant="primary"
  fullWidth
  onPress={() => console.log('Configurar')}
/>
```

#### StatusBadge
```tsx
<StatusBadge label="Ativo" variant="success" />
<StatusBadge label="Pendente" variant="warning" />
<StatusBadge label="Erro" variant="error" />
```

#### InfoCard
```tsx
<InfoCard
  title="Histórico de antecipações"
  icon={<History size={20} />}
  onPress={() => navigate('/history')}
/>
```

#### Breadcrumb
```tsx
<Breadcrumb
  items={[
    { label: 'Antecipação de recebíveis', active: true }
  ]}
/>
```

## Tema e Cores

O tema segue as cores do Raizen Banking:

- **Primary**: `#4A4A4A` (cinza escuro)
- **Background**: `#FFFFFF` (branco)
- **Surface**: `#F9FAFB` (cinza claro)
- **Text**: `#111827` (preto)
- **Border**: `#E5E7EB` (cinza borda)

## Componentes Disponíveis

- `Layout` - Layout completo com header e sidebar
- `Header` - Cabeçalho com logo e informações do usuário
- `Sidebar` - Menu lateral navegável
- `BalanceCard` - Card para exibir saldos e valores
- `ActionButton` - Botões de ação personalizáveis
- `InfoCard` - Cards informativos clicáveis
- `StatusBadge` - Badges de status coloridos
- `Breadcrumb` - Navegação breadcrumb
- `Button` - Botão básico
- `Card` - Card genérico
- `Input` - Campo de entrada
- `Text` - Componente de texto

## Licença

MIT