@birhaus/mobile

Mobile-optimized components for the BIRHAUS design system. Built for touch-first experiences with Spanish-first internationalization.

Features

• 🎯 Touch-Optimized: 44px minimum touch targets (WCAG 2.1 AA compliant)
• 🌍 Spanish-First: All components support Spanish-primary, English-fallback labels
• 📱 Mobile Gestures: Swipe, tap, long-press, and pinch gesture support
• ♿ Accessibility: Full screen reader and keyboard navigation support
• 🎨 BIRHAUS Compliant: Follows all 7 BIRHAUS design principles
• ⚡ Performance: Optimized for mobile devices with efficient rendering

Installation

npm install @birhaus/mobile

Quick Start

import { BirhausTouchButton, BirhausTouchInput, BirhausSwipeActions } from '@birhaus/mobile'

function MobileApp() {
  return (
    <BirhausSwipeActions
      leftActions={[
        {
          id: 'archive',
          labelEs: 'Archivar',
          labelEn: 'Archive',
          color: 'secondary',
          action: () => console.log('Archived')
        }
      ]}
    >
      <div className="p-4">
        <BirhausTouchInput
          placeholderEs="Buscar..."
          placeholderEn="Search..."
          clearable
        />
        
        <BirhausTouchButton
          labelEs="Enviar"
          labelEn="Submit"
          variant="primary"
          size="lg"
          fullWidth
          hapticFeedback
          onClick={() => console.log('Submitted')}
        />
      </div>
    </BirhausSwipeActions>
  )
}

Components

Touch Input Components

• BirhausTouchButton: Mobile-optimized button with haptic feedback
• BirhausTouchInput: Touch-friendly input with clear button
• BirhausTouchSelect: Mobile-optimized dropdown with search
• BirhausTouchTextarea: Expandable textarea for mobile
• BirhausTouchSlider: Thumb-friendly range slider
• BirhausTouchCheckbox: Large touch target checkbox
• BirhausTouchSwitch: iOS-style toggle switch

Mobile Interaction Components

• BirhausSwipeActions: Left/right swipe actions (max 3 per side)
• BirhausPullToRefresh: Pull-down refresh pattern
• BirhausBottomSheet: Mobile-native bottom sheet modal
• BirhausMobileModal: Full-screen and centered modals

Mobile Layout Components

• BirhausMobileContainer: Safe-area aware container
• BirhausMobileHeader: Mobile navigation header
• BirhausMobileNavBar: Bottom tab navigation (max 5 items)
• BirhausMobileCard: Touch-optimized card component

Hooks

useTouchGestures

Handle complex touch interactions:

import { useTouchGestures } from '@birhaus/mobile'

function GestureComponent() {
  const elementRef = useRef<HTMLDivElement>(null)
  
  useTouchGestures(elementRef, {
    onTap: () => console.log('Tapped'),
    onDoubleTap: () => console.log('Double tapped'),
    onLongPress: () => console.log('Long pressed'),
    onSwipe: (direction) => console.log(`Swiped ${direction}`),
    onPinch: (scale) => console.log(`Pinched: ${scale}`)
  })
  
  return <div ref={elementRef}>Touch me!</div>
}

useMobileViewport

Responsive viewport information:

import { useMobileViewport } from '@birhaus/mobile'

function ResponsiveComponent() {
  const viewport = useMobileViewport()
  
  return (
    <div>
      <p>Breakpoint: {viewport.breakpoint}</p>
      <p>Orientation: {viewport.orientation}</p>
      <p>Is Mobile: {viewport.isMobile ? 'Yes' : 'No'}</p>
    </div>
  )
}

Utilities

Touch Target Validation

import { touchTargetSize } from '@birhaus/mobile'

// Validate touch target size
const validation = touchTargetSize.validate({
  width: 40,
  height: 40,
  spacing: 8
})

console.log(validation.isValid) // false
console.log(validation.violations) // ["Width 40px below minimum 44px", ...]

Mobile Breakpoints

import { mobileBreakpoints } from '@birhaus/mobile'

const breakpoint = mobileBreakpoints.getCurrentBreakpoint(375) // 'sm'
const isMobile = mobileBreakpoints.isMobileDevice(768) // true
const deviceCategory = mobileBreakpoints.getDeviceCategory(1024) // 'desktop'

BIRHAUS Principles

This package enforces all 7 BIRHAUS design principles:

1. Cognitive Load Reduction: Max 3 swipe actions, 5 nav items
2. Miller's Law: Form fields and lists respect 7±2 rule
3. Progressive Disclosure: Information revealed appropriately
4. Miller's Law in Forms: Form components limit field count
5. Undo over Confirm: No confirmation dialogs, use undo patterns
6. Accessibility = Dignity: WCAG AA+ compliance built-in
7. Spanish-First: All components require Spanish labels first

TypeScript Support

Full TypeScript support with comprehensive type definitions:

import type { 
  TouchButtonProps,
  SwipeActionsProps,
  MobileViewportInfo,
  TouchGestureOptions
} from '@birhaus/mobile'

License

MIT License - see LICENSE file for details.