@tachui/mobile

Mobile UI components for tachUI framework

Overview

The tachUI mobile package provides essential mobile UI components and interaction patterns. Currently focused on core modal components with plans for expanded mobile functionality in future releases.

Current Features (v0.8.0-alpha)

• 📱 Core Modal Components - ActionSheet and Alert with full modal system
• 🎨 Native Feel - iOS and Android design system compatibility
• 🔄 Smooth Animations - 60fps transitions and micro-interactions
• 📐 Responsive Design - Adapts to different screen sizes and orientations
• 🔧 TypeScript-first - Complete type safety for mobile patterns
• ♿ Accessibility - Full ARIA support and keyboard navigation

Roadmap (Future Releases)

• 👆 Touch Interactions - Swipe actions, pull-to-refresh, and gesture handling
• 📱 Advanced Components - Modal presentations, SafeArea support
• 🎯 Platform Adaptations - iOS/Android specific variants
• 📳 Haptic Feedback - Native-like touch feedback
• 🎭 Gesture System - Advanced gesture recognition

Installation

npm install @tachui/[email protected] @tachui/[email protected]
# or
pnpm add @tachui/[email protected] @tachui/[email protected]

Quick Start

ActionSheet

import { VStack, Button } from '@tachui/primitives'
import { ActionSheet, useActionSheet } from '@tachui/mobile'

const MyComponent = () => {
  const actionSheet = useActionSheet()

  const showOptions = () => {
    actionSheet.present({
      title: 'Choose an action',
      message: 'What would you like to do?',
      actions: [
        {
          title: 'Share',
          style: 'default',
          action: () => console.log('Share tapped'),
        },
        {
          title: 'Edit',
          style: 'default',
          action: () => console.log('Edit tapped'),
        },
        {
          title: 'Delete',
          style: 'destructive',
          action: () => console.log('Delete tapped'),
        },
        {
          title: 'Cancel',
          style: 'cancel',
        },
      ],
    })
  }

  return Button('Show Options', showOptions).modifier.padding(16).build()
}

Alert

import { Alert, useAlert } from '@tachui/mobile-patterns'

const MyComponent = () => {
  const alert = useAlert()

  const showAlert = () => {
    alert.present({
      title: 'Confirm Action',
      message: 'Are you sure you want to delete this item?',
      actions: [
        {
          title: 'Cancel',
          style: 'cancel',
        },
        {
          title: 'Delete',
          style: 'destructive',
          action: () => {
            console.log('Item deleted')
          },
        },
      ],
    })
  }

  return Button('Delete Item', showAlert)
    .modifier.backgroundColor('#ff3b30')
    .foregroundColor('white')
    .build()
}

Implemented Components (v0.1.0)

✅ ActionSheet

Bottom sheet with multiple action options:

import { ActionSheet } from '@tachui/mobile-patterns'

ActionSheet({
  title: 'Photo Options',
  message: 'Choose how to add a photo',
  actions: [
    { title: 'Camera', role: 'default', onPress: () => openCamera() },
    { title: 'Photo Library', role: 'default', onPress: () => openLibrary() },
    { title: 'Cancel', role: 'cancel' },
  ],
  presentationStyle: 'sheet', // 'sheet' | 'popover' | 'adaptive'
}).build()

✅ Alert

Modal alerts with customizable buttons:

import { Alert } from '@tachui/mobile-patterns'

Alert({
  title: 'Network Error',
  message: 'Unable to connect to the server. Please check your connection.',
  buttons: [
    { title: 'Retry', role: 'default', action: () => retryConnection() },
    { title: 'Cancel', role: 'cancel' },
  ],
  isPresented: createSignal(true),
}).build()

Planned Components (Future Releases)

🚧 SwipeActions

Swipe-to-reveal action buttons:

// Planned for v0.2.0
import { SwipeActions, SwipeAction } from '@tachui/mobile-patterns'

SwipeActions({
  content: ListRow({ title: 'John Doe', subtitle: '[email protected]' }),
  leadingActions: [
    SwipeAction({
      title: 'Mark Read',
      backgroundColor: '#007AFF',
      icon: 'envelope.open.fill',
      action: () => markAsRead(),
    }),
  ],
  trailingActions: [
    SwipeAction({
      title: 'Archive',
      backgroundColor: '#FF9500',
      icon: 'archivebox.fill',
      action: () => archive(),
    }),
    SwipeAction({
      title: 'Delete',
      backgroundColor: '#FF3B30',
      icon: 'trash.fill',
      action: () => deleteItem(),
    }),
  ],
}).build()

🚧 PullToRefresh

Pull-down-to-refresh functionality:

// Planned for v0.2.0
import { PullToRefresh } from '@tachui/mobile-patterns'
import { ScrollView } from '@tachui/core'

PullToRefresh({
  onRefresh: async () => {
    await loadNewData()
  },
  content: ScrollView({
    children: [
      // Your content here
    ],
  }),
}).build()

Advanced Patterns (Implemented)

✅ Modal System

Both ActionSheet and Alert provide full modal systems with:

• Backdrop dismissal
• Keyboard navigation
• Focus management
• Animation coordination
• Accessibility support

✅ Utility Functions

import { ActionSheetUtils, AlertUtils } from '@tachui/mobile-patterns'

// Pre-configured action sheets
const deleteConfirmation = ActionSheetUtils.deleteConfirmation(
  'Delete Item',
  () => deleteItem(),
  () => console.log('Cancelled')
)

// Pre-configured alerts
const confirmAlert = AlertUtils.confirm(
  'Confirm Action',
  'Are you sure?',
  () => performAction(),
  () => console.log('Cancelled')
)

Advanced Patterns (Planned for Future Releases)

🚧 Modal Presentation System

// Planned for v0.2.0
import { presentModal, dismissModal } from '@tachui/mobile-patterns'

const presentSettings = () => {
  presentModal({
    content: SettingsView(),
    presentationStyle: 'sheet', // 'sheet' | 'fullscreen' | 'popover'
    detents: [.medium(), .large()], // iOS-style sheet sizing
    dismissible: true,
    onDismiss: () => console.log('Modal dismissed')
  })
}

🚧 Haptic Feedback

// Planned for v0.2.0
import { hapticFeedback } from '@tachui/mobile-patterns'

Button('Success Action', () => {
  // Perform action
  hapticFeedback('success') // 'success' | 'error' | 'warning' | 'light' | 'medium' | 'heavy'
})

🚧 SafeArea Support

// Planned for v0.2.0
import { SafeAreaView } from '@tachui/mobile-patterns'

const app = SafeAreaView({
  children: [
    // Your app content
  ],
})
  .modifier.backgroundColor('#ffffff')
  .build()

🚧 Gesture Handling

// Planned for v0.2.0
import { GestureRecognizer } from '@tachui/mobile-patterns'

GestureRecognizer({
  content: MyView(),
  gestures: {
    tap: {
      action: () => console.log('Tapped'),
      numberOfTapsRequired: 1,
    },
    longPress: {
      action: () => console.log('Long pressed'),
      minimumPressDuration: 0.5,
    },
    swipe: {
      direction: 'left',
      action: () => console.log('Swiped left'),
    },
  },
}).build()

Platform Adaptations (Planned for Future Releases)

🚧 iOS-style Components

// Planned for v0.3.0
import { IOSActionSheet, IOSAlert } from '@tachui/mobile-patterns'

// iOS-specific styling and behavior
IOSActionSheet({
  title: 'Options',
  actions: actions,
})
  .modifier.iosStyle(true)
  .build()

🚧 Android-style Components

// Planned for v0.3.0
import { MaterialActionSheet, MaterialAlert } from '@tachui/mobile-patterns'

// Material Design styling
MaterialActionSheet({
  title: 'Choose action',
  actions: actions,
})
  .modifier.materialStyle(true)
  .build()

Animation and Transitions

import { createMobileTransition } from '@tachui/mobile-patterns'

const slideUpTransition = createMobileTransition({
  type: 'slide',
  direction: 'up',
  duration: 0.3,
  easing: 'ease-out',
})

ActionSheet({ actions })
  .modifier.presentationTransition(slideUpTransition)
  .build()

Touch and Gesture Optimization

Built-in mobile optimizations:

• Touch targets - Minimum 44pt touch areas
• Scroll momentum - Native-like scrolling behavior
• Bounce effects - Elastic scrolling boundaries
• Gesture conflicts - Automatic gesture precedence handling
• Performance - 60fps animations on mobile devices

Accessibility

Mobile accessibility features:

• VoiceOver/TalkBack support
• Dynamic Type scaling for text
• Reduce Motion preference handling
• High Contrast mode support
• Voice Control compatibility

Examples

Check out complete examples:

• Mobile App Demo
• ActionSheet Gallery
• Swipe Actions List

API Reference

• ActionSheet API
• Alert API
• SwipeActions API

Current Status

Version 0.1.0 - Core modal components (ActionSheet, Alert)

• ✅ ActionSheet: Full implementation with animations, accessibility, responsive design
• ✅ Alert: Complete modal system with reactive support and keyboard navigation
• 🚧 Future Releases: SwipeActions, PullToRefresh, Modal system, Haptic feedback, Gesture handling

Requirements

• @tachui/core ^0.1.0 or later
• TypeScript 5.0+ (recommended)

Contributing

See the main Contributing Guide for information on contributing to tachUI mobile patterns.

License

Mozilla Public License 2.0 - see LICENSE for details.