@birhaus/patterns/README.md

BIRHAUS v3.0 Radical Minimalist Pattern Components - Glass morphism ApprovalWorkflow, RoleManager, SmartSearch, FinancialDashboard, AuditTimeline

# @birhaus/patterns

Advanced UI patterns for the BIRHAUS design system, implementing complex workflows with cognitive load optimization.

## Installation

```bash
npm install @birhaus/patterns
```

## Components

### BirhausApprovalWorkflow

Complete approval workflow with Spanish-first labeling and undo patterns.

```tsx
import { BirhausApprovalWorkflow } from '@birhaus/patterns'

const approvalSteps = [
  { 
    id: 'review',
    labelEs: 'Revisión',
    labelEn: 'Review',
    status: 'completed' 
  },
  { 
    id: 'approve', 
    labelEs: 'Aprobación',
    labelEn: 'Approval',
    status: 'pending' 
  }
]

function DocumentApproval() {
  return (
    <BirhausApprovalWorkflow
      titleEs="Aprobación de Transferencia"
      titleEn="Transfer Approval"
      steps={approvalSteps}
      onApprove={handleApprove}
      onReject={handleReject}
    />
  )
}
```

### BirhausSmartSearch

Intelligent search with cognitive load management and Spanish-first results.

```tsx
import { BirhausSmartSearch } from '@birhaus/patterns'

function DonorSearch() {
  return (
    <BirhausSmartSearch
      placeholderEs="Buscar donante..."
      placeholderEn="Search donor..."
      onSearch={searchDonors}
      maxResults={7} // Miller's Law compliance
      categories={[
        { id: 'donors', labelEs: 'Donantes', labelEn: 'Donors' },
        { id: 'transactions', labelEs: 'Transacciones', labelEn: 'Transactions' }
      ]}
    />
  )
}
```

### AuditTimeline

Complete audit trail with chronological display and accessibility.

```tsx
import { AuditTimeline } from '@birhaus/patterns'

const auditEvents = [
  {
    id: '1',
    timestamp: new Date(),
    actionEs: 'Donación registrada',
    actionEn: 'Donation recorded',
    user: 'María González',
    details: { amount: 'Gs. 150.000' }
  }
]

function TransactionAudit() {
  return (
    <AuditTimeline
      events={auditEvents}
      titleEs="Historial de Transacción"
      titleEn="Transaction History"
    />
  )
}
```

## BIRHAUS Principles

All patterns implement:

- **Spanish-first Design**: Primary Spanish labels with English fallbacks
- **Cognitive Load Management**: Miller's Law (7±2) applied to all lists
- **Undo over Confirm**: Workflow actions support undo patterns
- **Progressive Disclosure**: Complex information shown on demand
- **Accessibility**: Full WCAG AA+ compliance

## Use Cases

Perfect for:
- Document approval workflows
- Financial transaction management
- Audit trail visualization
- Search interfaces with complex results
- Administrative dashboards

## Integration

Works with:
- `@birhaus/primitives` - Base components for building patterns
- `@birhaus/core` - UndoSystem integration for workflow actions
- `@birhaus/themes` - Consistent visual styling

## License

MIT - see [LICENSE](../../LICENSE) for details.