@digilogiclabs/saas-factory-ui

A comprehensive cross-platform UI component library built for both Next.js web applications and React Native/Expo mobile applications. This package provides a complete set of accessible, mobile-optimized components with consistent design across platforms.

🌟 Features

• 🎨 Cross-Platform Design System
  • Consistent components for web and mobile
  • Platform-optimized implementations
  • Shared design tokens and theming
• 🌐 Web Support
  • Built with React, Tailwind CSS, Radix UI, and Framer Motion
  • Dark mode support
  • Responsive by default
• 📱 React Native Support
  • Native mobile components with Expo compatibility
  • Platform-specific optimizations
  • Haptic feedback integration
• ♿️ Accessibility First
  • WCAG 2.2 AA compliant components
  • Screen reader support
  • Keyboard navigation and touch alternatives
• ⚡ Performance Optimized
  • Advanced mobile interactions with gesture recognition
  • Lazy loading and progressive image optimization
  • Virtual scrolling for large datasets
  • Network-aware content delivery
• 🌐 Offline Support
  • Comprehensive caching strategies
  • Offline-first component architecture
  • Network detection and graceful degradation
• 🎯 Developer Experience
  • Full TypeScript support
  • Tree-shakeable exports
  • Comprehensive documentation
  • Optimized bundle sizes

📦 Installation

npm install @digilogiclabs/saas-factory-ui

🚀 Platform Requirements

Web Applications

• Node.js >=20.0.0
• Next.js 15+ or React 19+
• Tailwind CSS 3.4 or higher
• TypeScript (recommended)

React Native Applications

• Node.js >=20.0.0
• React Native 0.70 or higher
• Expo SDK 49 or higher
• React 19 or higher

🌐 Web Setup (Next.js)

1. Install Dependencies

npm install @digilogiclabs/saas-factory-ui
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind CSS

Update your tailwind.config.js to include the component library:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // 🚨 IMPORTANT: Include the UI package
    "./node_modules/@digilogiclabs/saas-factory-ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Import Styles (REQUIRED)

Add the CSS import to your root layout or app file:

// app/layout.tsx (Next.js 13+) or pages/_app.tsx (Next.js 12)
import '@digilogiclabs/saas-factory-ui/styles.css';
import './globals.css'; // Your app styles

4. Use Components

import { 
  Button, 
  Card, 
  Container,
  PageTransition,
  SwipeableCard,
  LazyImage 
} from '@digilogiclabs/saas-factory-ui';

export default function HomePage() {
  return (
    <PageTransition type="slide" direction="horizontal">
      <Container>
        <Card className="p-6">
          <h1 className="text-2xl font-bold mb-4">Welcome to Web</h1>
          <LazyImage 
            src="/hero-image.jpg" 
            alt="Hero image"
            className="w-full h-64 object-cover rounded-lg mb-4"
            placeholder="blur"
            webpSupport={true}
          />
          <Button variant="default" size="lg">
            Get Started
          </Button>
        </Card>
      </Container>
    </PageTransition>
  );
}

📱 React Native Setup

1. Install Dependencies

npm install @digilogiclabs/saas-factory-ui
# Required for advanced features
npm install @react-native-community/netinfo
npm install @react-native-async-storage/async-storage
npm install expo-haptics

2. Import Native Components

import { 
  NativeButton, 
  NativeContainer, 
  NativeCard,
  NativePageTransition,
  NativeSwipeableCard,
  NativeLazyImage
} from '@digilogiclabs/saas-factory-ui/native';
import { Text } from 'react-native';

export default function App() {
  return (
    <NativePageTransition type="slide" direction="horizontal">
      <NativeContainer style={{ flex: 1, padding: 20 }}>
        <NativeCard style={{ padding: 20 }}>
          <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>
            Welcome to Mobile
          </Text>
          <NativeLazyImage 
            source={{ uri: 'https://example.com/image.jpg' }}
            style={{ width: '100%', height: 200, borderRadius: 8, marginBottom: 16 }}
            placeholder="skeleton"
          />
          <NativeButton 
            variant="default" 
            size="lg" 
            onPress={() => console.log('Pressed')}
          >
            Get Started
          </NativeButton>
        </NativeCard>
      </NativeContainer>
    </NativePageTransition>
  );
}

📚 Available Components

✅ Core Components (v0.13.0)

| Component | Web | Native | Description | |-----------|-----|--------|-------------| | Layout & Structure | | | | | Container | ✅ | ✅ | Responsive layout containers | | Grid | ✅ | ✅ | Flexible grid layouts | | Section | ✅ | ✅ | Semantic page sections | | Card | ✅ | ✅ | Content containers with elevation | | Interactive Elements | | | | | Button | ✅ | ✅ | Primary action buttons with variants | | SwipeableCard | ✅ | ✅ | NEW Touch-friendly swipe gestures with haptic feedback | | Advanced Mobile Interactions | | | | | PageTransition | ✅ | ✅ | NEW Smooth page transitions with multiple animation types | | PullToRefresh | ✅ | ✅ | NEW Native pull-to-refresh functionality | | Performance & Media | | | | | LazyImage | ✅ | ✅ | NEW Intelligent lazy loading with WebP support | | ProgressiveImage | ✅ | ✅ | NEW Quality-aware progressive image loading | | VirtualScrollList | ✅ | ✅ | NEW Memory-efficient virtual scrolling | | Network & Offline | | | | | NetworkAwareContent | ✅ | ✅ | NEW Smart content delivery based on network conditions | | OfflineWrapper | ✅ | ✅ | NEW Comprehensive offline support with caching |

🌐 Web-Specific Components

• Alert - Contextual feedback messages
• Avatar - User profile pictures and initials
• Badge - Status indicators and counts
• Checkbox - Boolean input controls
• DataTable - Sortable data tables with pagination support
• Dialog - Modal dialogs and overlays
• DropdownMenu - Contextual action menus
• Form - Form validation and state management
• Input - Text input fields with validation
• Label - Accessible form labels
• Modal - Simple modal wrapper component
• Pagination - Data navigation with page controls
• Progress - Progress indicators and loading bars
• Select - Dropdown selection controls
• Skeleton - Loading state placeholders
• Tabs - Tabbed content navigation
• Toast - Notification messages
• Tooltip - Contextual help and information
• AudioPlayer - Advanced audio playback with playlists
• VideoPlayer - Feature-rich video player
• AudioUploader - Audio file upload with preview
• FileUpload - Drag-and-drop file uploads
• Waveform - Audio waveform visualization

📱 Native-Specific Components

• SafeContainer - Safe area aware container
• TouchableCard - Pressable card component

🆕 NEW v0.21.0: Layout & Navigation System

Complete Application Structure

A comprehensive system providing everything needed for modern SaaS applications:

🏗️ App Shell Components

| Component | Web | Native | Description | |-----------|-----|--------|-------------| | AppShell | ✅ | ✅ | Complete application layout orchestration | | Header | ✅ | ✅ | Top navigation with user menu and actions | | Sidebar | ✅ | - | Collapsible navigation sidebar (web) | | Drawer | - | ✅ | Slide-out navigation drawer (mobile) | | Breadcrumbs | ✅ | - | Hierarchical navigation breadcrumbs |

🧭 Navigation Components

| Component | Web | Native | Description | |-----------|-----|--------|-------------| | Tabs | ✅ | ✅ | Feature-rich tabbed navigation | | BottomTabBar | - | ✅ | Mobile-optimized bottom tab navigation | | Stepper | ✅ | ✅ | Step-by-step process visualization | | Pagination | ✅ | ✅ | Data navigation with page controls | | CommandPalette | ✅ | - | Keyboard-driven command palette (Cmd+K) |

🎯 Tour & Onboarding

| Component | Web | Native | Description | |-----------|-----|--------|-------------| | Tour | ✅ | ✅ | Interactive guided tours with spotlights | | Onboarding | ✅ | ✅ | Multi-step onboarding with progress tracking | | Tooltip | ✅ | ✅ | Contextual feature highlights | | WelcomeModal | ✅ | ✅ | Welcome screens with feature showcase | | FeatureHighlight | ✅ | - | Animated feature callouts with pulse effects |

📋 Layout Templates

| Template | Web | Native | Description | |----------|-----|--------|-------------| | DashboardLayout | ✅ | ✅ | Complete dashboard with navigation | | AuthLayout | ✅ | ✅ | Authentication pages with features showcase | | SettingsLayout | ✅ | ✅ | Settings pages with tabbed navigation |

Usage Examples

Web Dashboard with Command Palette

import { 
  DashboardLayout, 
  CommandPalette, 
  useCommandPalette 
} from '@digilogiclabs/saas-factory-ui';

export default function Dashboard() {
  const commands = [
    {
      id: 'nav',
      label: 'Navigation',
      items: [
        { id: 'dashboard', label: 'Go to Dashboard', action: () => router.push('/') },
        { id: 'settings', label: 'Open Settings', action: () => router.push('/settings') },
      ]
    }
  ];

  const { isOpen, toggle } = useCommandPalette({
    commands,
    keyboardShortcut: 'cmd+k'
  });

  return (
    <DashboardLayout>
      <div className="p-6">
        <h1>Dashboard Content</h1>
        <p>Press Cmd+K to open command palette</p>
      </div>
      
      <CommandPalette
        open={isOpen}
        onOpenChange={toggle}
        commands={commands}
      />
    </DashboardLayout>
  );
}

Native App with Bottom Tabs

import { 
  DashboardLayout, 
  Tour,
  useTour 
} from '@digilogiclabs/saas-factory-ui/native';

export default function MobileApp() {
  const tourSteps = [
    {
      id: 'welcome',
      title: 'Welcome!',
      content: 'Let me show you around',
      target: '#main-content'
    }
  ];

  const { isOpen, start } = useTour({ 
    steps: tourSteps,
    localStorage: { key: 'app-tour' }
  });

  return (
    <DashboardLayout
      showBottomTabs={true}
      bottomTabs={[
        { id: 'home', label: 'Home', icon: '🏠' },
        { id: 'search', label: 'Search', icon: '🔍' },
        { id: 'profile', label: 'Profile', icon: '👤' },
      ]}
    >
      <ScrollView>
        <Text style={styles.title}>Mobile Dashboard</Text>
        <TouchableOpacity onPress={start}>
          <Text>Start Tour</Text>
        </TouchableOpacity>
      </ScrollView>

      <Tour
        steps={tourSteps}
        isOpen={isOpen}
        onRequestClose={() => {}}
      />
    </DashboardLayout>
  );
}

🔧 Available Hooks

Cross-Platform Hooks

• useMounted - Component mount status detection
• useNetworkInfo - NEW Network connection monitoring
• useOfflineState - NEW Online/offline status detection
• useCache - NEW Persistent caching utilities
• useTour - NEW Tour state management with localStorage persistence
• useOnboarding - NEW Multi-step onboarding flow management

Web-Only Hooks

• useMediaQuery - Responsive breakpoint detection
• useLockBody - Body scroll lock for modals
• useCommandPalette - NEW Command palette state management
• useResponsive - NEW Advanced responsive breakpoint detection

Native-Only Hooks

• useDimensions - Screen dimensions and orientation
• useKeyboard - Keyboard visibility and height

🚀 New v0.13.0 Features

Advanced Mobile Interactions

PageTransition

Smooth, customizable page transitions with multiple animation types:

// Web
import { PageTransition } from '@digilogiclabs/saas-factory-ui';

<PageTransition 
  type="slide" 
  direction="horizontal" 
  duration={300}
  key={pageKey}
>
  <YourPageContent />
</PageTransition>

// Supported types: 'slide', 'fade', 'scale', 'flip', 'elastic'
// Directions: 'horizontal', 'vertical', 'up', 'down', 'left', 'right'

SwipeableCard

Touch-friendly cards with swipe actions and haptic feedback:

// Web
import { SwipeableCard } from '@digilogiclabs/saas-factory-ui';

<SwipeableCard
  leftActions={[{
    id: 'archive',
    label: 'Archive',
    backgroundColor: '#10B981',
    onAction: () => archiveItem()
  }]}
  rightActions={[{
    id: 'delete',
    label: 'Delete',
    backgroundColor: '#EF4444',
    onAction: () => deleteItem()
  }]}
  hapticFeedback={true}
  threshold={80}
>
  <div className="p-4">
    <h3>Swipe me left or right!</h3>
  </div>
</SwipeableCard>

PullToRefresh

Native pull-to-refresh functionality:

// Web
import { PullToRefresh } from '@digilogiclabs/saas-factory-ui';

<PullToRefresh
  onRefresh={async () => {
    await fetchFreshData();
  }}
  threshold={60}
  hapticFeedback={true}
>
  <YourScrollableContent />
</PullToRefresh>

Performance Optimization

LazyImage

Intelligent lazy loading with modern format support:

// Web
import { LazyImage } from '@digilogiclabs/saas-factory-ui';

<LazyImage
  src="/large-image.jpg"
  alt="Description"
  placeholder="blur"
  webpSupport={true}
  mobileOptimization={{
    quality: 75,
    format: "webp",
    sizes: "(max-width: 768px) 100vw, 50vw"
  }}
  loading="lazy"
  fetchPriority="high"
  retryAttempts={3}
/>

ProgressiveImage

Quality-aware progressive loading:

// Web
import { ProgressiveImage } from '@digilogiclabs/saas-factory-ui';

<ProgressiveImage
  lowQualitySrc="/thumbnail.jpg"
  highQualitySrc="/full-quality.jpg"
  alt="Progressive image"
  mobileStrategy="blur-up"
  transition="fade"
  networkAware={true}
/>

VirtualScrollList

Memory-efficient virtual scrolling for large datasets:

// Web
import { VirtualScrollList } from '@digilogiclabs/saas-factory-ui';

<VirtualScrollList
  items={largeDataArray}
  itemHeight={80}
  containerHeight={400}
  renderItem={(item, index) => (
    <div key={index} className="p-4 border-b">
      {item.name}
    </div>
  )}
  onEndReached={() => loadMore()}
  mobileOptimized={true}
  overscan={5}
/>

Network & Offline Support

NetworkAwareContent

Smart content delivery based on connection quality:

// Web
import { NetworkAwareContent } from '@digilogiclabs/saas-factory-ui';

<NetworkAwareContent
  showOnFast={<HighQualityContent />}
  showOnSlow={<LightweightContent />}
  showOnOffline={<OfflineMessage />}
  respectSaveData={true}
>
  <DefaultContent />
</NetworkAwareContent>

OfflineWrapper

Comprehensive offline support with caching:

// Web
import { OfflineWrapper } from '@digilogiclabs/saas-factory-ui';

<OfflineWrapper
  cacheStrategy="stale-while-revalidate"
  cacheKey="user-data"
  cacheDuration={3600000} // 1 hour
  showOfflineIndicator={true}
  retryOnReconnect={true}
>
  <YourOnlineContent />
</OfflineWrapper>

🎨 Advanced Usage Examples

Mobile-Optimized Dashboard

import { 
  PageTransition,
  NetworkAwareContent,
  VirtualScrollList,
  PullToRefresh,
  LazyImage
} from '@digilogiclabs/saas-factory-ui';

function MobileDashboard() {
  const [data, setData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = async () => {
    setRefreshing(true);
    await fetchFreshData();
    setRefreshing(false);
  };

  return (
    <PageTransition type="slide" direction="up">
      <div className="h-screen flex flex-col">
        <NetworkAwareContent
          showOnSlow={<SimpleDashboardHeader />}
          showOnFast={<RichDashboardHeader />}
        >
          <DashboardHeader />
        </NetworkAwareContent>

        <PullToRefresh 
          onRefresh={handleRefresh}
          className="flex-1"
        >
          <VirtualScrollList
            items={data}
            itemHeight={120}
            renderItem={(item, index) => (
              <div className="p-4 border-b">
                <div className="flex items-center space-x-3">
                  <LazyImage
                    src={item.avatar}
                    alt={item.name}
                    className="w-12 h-12 rounded-full"
                    placeholder="blur"
                  />
                  <div>
                    <h3 className="font-semibold">{item.name}</h3>
                    <p className="text-sm text-gray-500">{item.status}</p>
                  </div>
                </div>
              </div>
            )}
            onEndReached={loadMoreData}
            mobileOptimized={true}
          />
        </PullToRefresh>
      </div>
    </PageTransition>
  );
}

Swipeable Card List with Actions

import { SwipeableCard, LazyImage, Button } from '@digilogiclabs/saas-factory-ui';

function MessageList({ messages }) {
  return (
    <div className="space-y-2">
      {messages.map((message) => (
        <SwipeableCard
          key={message.id}
          leftActions={[{
            id: 'archive',
            label: 'Archive',
            icon: '📁',
            backgroundColor: '#10B981',
            onAction: () => archiveMessage(message.id)
          }]}
          rightActions={[{
            id: 'delete',
            label: 'Delete',
            icon: '🗑️',
            backgroundColor: '#EF4444',
            onAction: () => deleteMessage(message.id)
          }]}
          threshold={100}
          hapticFeedback={true}
        >
          <div className="flex items-center p-4 bg-white rounded-lg shadow">
            <LazyImage
              src={message.sender.avatar}
              alt={message.sender.name}
              className="w-12 h-12 rounded-full mr-3"
              placeholder="skeleton"
            />
            <div className="flex-1">
              <h4 className="font-semibold">{message.sender.name}</h4>
              <p className="text-gray-600 truncate">{message.preview}</p>
            </div>
            <span className="text-xs text-gray-400">{message.time}</span>
          </div>
        </SwipeableCard>
      ))}
    </div>
  );
}

Progressive Image Gallery

import { ProgressiveImage, VirtualScrollList } from '@digilogiclabs/saas-factory-ui';

function ImageGallery({ images }) {
  return (
    <VirtualScrollList
      items={images}
      itemHeight={300}
      renderItem={(image, index) => (
        <div className="p-2">
          <ProgressiveImage
            lowQualitySrc={image.thumbnail}
            highQualitySrc={image.fullSize}
            alt={image.description}
            className="w-full h-64 object-cover rounded-lg"
            mobileStrategy="blur-up"
            transition="crossfade"
            networkAware={true}
          />
        </div>
      )}
      containerHeight={600}
      mobileOptimized={true}
    />
  );
}

🌐 Network-Aware Development

Connection-Based Content Delivery

import { NetworkAwareContent, useNetworkInfo } from '@digilogiclabs/saas-factory-ui';

function AdaptiveApp() {
  const networkInfo = useNetworkInfo();

  return (
    <div>
      <NetworkAwareContent
        fastThreshold={['4g', 'fast']}
        slowThreshold={['2g', '3g', 'slow']}
        showOnFast={
          <div>
            <HighResolutionImages />
            <AnimatedComponents />
            <VideoContent />
          </div>
        }
        showOnSlow={
          <div>
            <CompressedImages />
            <StaticComponents />
            <TextContent />
          </div>
        }
        showOnOffline={<OfflineFallback />}
        respectSaveData={true}
        onNetworkChange={(info) => {
          console.log('Network changed:', info);
          // Adjust app behavior based on network
        }}
      >
        <DefaultContent />
      </NetworkAwareContent>
    </div>
  );
}

Offline-First Architecture

import { OfflineWrapper, useOfflineState, useCache } from '@digilogiclabs/saas-factory-ui';

function OfflineCapableComponent() {
  const isOnline = useOfflineState();
  const { get, set } = useCache('user-preferences', 3600000);

  return (
    <OfflineWrapper
      cacheStrategy="stale-while-revalidate"
      cacheKey="dashboard-data"
      showOfflineIndicator={true}
      enableServiceWorker={true}
      onOffline={() => console.log('Gone offline')}
      onOnline={() => console.log('Back online')}
      fallback={
        <div className="text-center p-8">
          <h3>You're offline</h3>
          <p>Some features may not be available</p>
        </div>
      }
    >
      <div>
        <h2>Dashboard {isOnline ? '🟢' : '🔴'}</h2>
        <DashboardContent />
      </div>
    </OfflineWrapper>
  );
}

🎨 Theming & Styling

Custom Theme Configuration

Create a custom theme by extending the default CSS variables:

/* custom-theme.css */
:root {
  /* Primary colors */
  --primary: 262 83% 58%;        /* Purple */
  --primary-foreground: 0 0% 98%;

  /* Secondary colors */
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 9% 46%;

  /* Accent colors */
  --accent: 262 83% 58%;
  --accent-foreground: 0 0% 98%;

  /* Custom border radius */
  --radius: 0.75rem;
}

/* Dark mode overrides */
.dark {
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 98%;
  --background: 224 71% 4%;
  --foreground: 213 31% 91%;
}

📝 Migration Guide

From v0.12.x to v0.13.0

New Dependencies (Optional)

For full functionality, install additional dependencies:

# For React Native projects
npm install @react-native-community/netinfo
npm install @react-native-async-storage/async-storage
npm install expo-haptics

# These are optional and only needed if using specific components

Breaking Changes

• None. All new components are additive.

New Features Available

• Advanced mobile interactions (PageTransition, SwipeableCard, PullToRefresh)
• Performance optimization components (LazyImage, ProgressiveImage, VirtualScrollList)
• Network and offline support (NetworkAwareContent, OfflineWrapper)
• New hooks (useNetworkInfo, useOfflineState, useCache)

🏗 Development Status

✅ Completed (v0.13.0) - Mobile-First Optimization Release

Advanced Mobile Interactions

• ✅ PageTransition - Smooth page transitions with gesture support
• ✅ SwipeableCard - Touch-friendly swipe gestures with haptic feedback
• ✅ PullToRefresh - Native pull-to-refresh functionality

Performance Optimization

• ✅ LazyImage - Intelligent lazy loading with WebP support
• ✅ ProgressiveImage - Quality-aware progressive image loading
• ✅ VirtualScrollList - Memory-efficient virtual scrolling

Network & Offline Support

• ✅ NetworkAwareContent - Smart content delivery based on network conditions
• ✅ OfflineWrapper - Comprehensive offline support with caching strategies
• ✅ Network detection hooks and utilities

Developer Experience

• ✅ Cross-platform architecture (Web + React Native)
• ✅ Full TypeScript support with platform-specific types
• ✅ Accessibility-first design (WCAG 2.2 AA compliant)
• ✅ Tree-shakeable exports and optimized bundle sizes
• ✅ Comprehensive documentation and examples

🚧 Coming Next (v0.14.0)

Enhanced Authentication Components

• 🔄 MobileAuthForm with biometric authentication
• 🔄 MobileUserMenu with gesture-enabled navigation
• 🔄 Social login optimizations

Mobile Payment Optimization

• 🔄 MobileCheckout with Apple Pay/Google Pay
• 🔄 MobileBilling dashboard
• 🔄 MobilePricing with comparison tables

📋 Future Roadmap

• Advanced UI components (BottomSheet, InfiniteScroll, FAB)
• Enhanced theming system with brand color extraction
• Real-time components with WebSocket integration
• PWA optimization features
• Advanced accessibility features
• Comprehensive Storybook documentation

🚀 Performance Metrics

Bundle Sizes (v0.13.0)

• Main Bundle: 270KB ESM (295KB CJS) + 73KB CSS
• Web Bundle: 295KB optimized for web platforms
• Native Bundle: 18KB optimized for React Native
• Tree-shakeable: Import only what you need

Performance Targets ✅

• Bundle Size: < 250KB gzipped ✅ (Optimized)
• Load Time: < 3s on 3G networks ✅
• First Paint: < 1.5s ✅
• Interaction Ready: < 2.5s ✅
• Accessibility Score: 95+ Lighthouse ✅

🔧 Development & Contributing

Local Development

# Clone the repository
git clone https://github.com/DigiLogicLabs/saas-factory-ui
cd saas-factory-ui

# Install dependencies
npm install

# Build the package
npm run build

# Run tests
npm run test

# Type check
npm run type-check

# Lint
npm run lint

# Link for local testing
npm link

# In your test project
npm link @digilogiclabs/saas-factory-ui

Testing Your Changes

1. Build the package: npm run build
2. Test in a Next.js app with mobile interactions
3. Test in a React Native/Expo app
4. Verify TypeScript types work correctly
5. Test offline/online scenarios
6. Verify accessibility with screen readers

🐛 Troubleshooting

Quick Diagnostic Commands

# Check if package is installed correctly
npm ls @digilogiclabs/saas-factory-ui

# Check package contents
ls node_modules/@digilogiclabs/saas-factory-ui/dist/

# Verify CSS file exists
find node_modules/@digilogiclabs/saas-factory-ui -name "*.css"

# Test network features (in browser console)
navigator.onLine  // Should return true/false
navigator.connection  // Should show connection info

Common Solutions

1. Clear cache: rm -rf .next node_modules package-lock.json && npm install
2. Rebuild: npm run build in your project
3. Check imports: Verify import paths match package exports
4. Update dependencies: Ensure compatible React/Next.js versions
5. Network features not working: Check browser support and permissions
6. Haptic feedback not working: Verify device and browser support

Mobile-Specific Issues

1. Gestures not working: Ensure touch-action CSS is not preventing interactions
2. Performance issues: Enable mobileOptimized props where available
3. Network detection not working on mobile: Check app permissions and service worker registration

📄 License

MIT © DigiLogic Labs

🔗 Links

• Documentation
• NPM Package
• Issues
• Changelog
• Migration Guide

Current Version: 0.13.0
Release Date: September 2025
Platforms: Web (Next.js/React) + React Native/Expo
License: MIT