@codeimplants/ui-kit 1.0.0

package/README.md

@@ -0,0 +1,144 @@
+# @codeimplants/ui-kit
+
+> Enterprise-grade error UI screens and components for React Native
+
+[![Platform](https://img.shields.io/badge/platform-iOS%20%7C%20Android%20%7C%20Web-blue)]()
+[![React Native](https://img.shields.io/badge/React%20Native-0.70%2B-green)]()
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0%2B-blue)]()
+
+## Overview
+
+`@codeimplants/ui-kit` provides beautiful, production-ready error screens and UI components for React Native applications. Designed with 100% customizability in mind, every pixel, color, and text can be controlled via props.
+
+This package contains **22 unique screens** categorized into four main domains: Errors, Network, Permissions, and System.
+
+## Project Structure
+
+The package is organized into a modular structure for better maintainability and discoverability:
+```
+src/
+├── components/       # Shared UI components (buttons, cards, icons, etc.)
+├── screens/          # Full-screen views (errors, system, permissions)
+├── types/            # Modular type definitions
+├── utils/            # Utility functions
+└── index.ts          # Public API export
+```
+
+## Common Configuration
+
+All screens share a set of common configuration props that unify the design and behavior across your app.
+
+### 🎨 Theme & Styling
+Customize the look and feel globally or per-screen using the `theme` prop.
+```tsx
+<Screen
+  theme={{
+    primary: '#6200EE',       // Main brand color
+    background: '#FFFFFF',    // Screen background
+    surface: '#F5F5F5',       // Card/Input background
+    textPrimary: '#000000',   // Main text color
+    textSecondary: '#757575', // Subtitle text color
+    error: '#B00020',         // Error state color
+    success: '#00C853',       // Success state color
+    warning: '#FFAB00',       // Warning state color
+  }}
+/>
+```
+
+### 🛠 Support Integration
+Integrates seamlessly with `@codeimplants/support`. All screens accept a `support` prop to display contact options.
+```tsx
+<Screen
+  support={{
+    whatsapp: { number: '1234567890', label: 'Chat Support' },
+    phone: { number: '1800-123-456', label: 'Call Us' },
+    email: { address: 'support@example.com', label: 'Email Us' }
+  }}
+  supportVariant="icon-only" // 'icon-only' | 'compact' | 'full'
+/>
+```
+
+### 🔄 Retry Logic
+For error and network screens, the optional `retryInfo` prop displays attempt counts and limits.
+```tsx
+<Screen
+  onRetry={handleRetry}
+  retryInfo={{
+    attempt: 2,
+    maxAttempts: 5
+  }} // Displays "Retrying (2/5)..."
+/>
+```
+
+## Screen Reference
+
+### 1. Error Screens (5 Screens)
+*Generic and specific handlers for API and runtime errors.*
+
+| Screen | Description | Key Props |
+|--------|-------------|-----------|
+| `ApiErrorScreen` | General API error handler. | `onRetry`, `errorCode`, `statusCode` |
+| `ClientErrorScreen` | Handler for 4xx series errors (e.g., 404). | `statusCode`, `onGoBack` |
+| `ServerErrorScreen` | Handler for 5xx series errors (e.g., 500). | `statusCode`, `onRetry`, `retryInfo` |
+| `ErrorBoundaryScreen` | Global fallback for app crashes. | `error`, `errorDetails`, `onReset` |
+| `InvalidResponseScreen` | For malformed/unexpected server data. | `errorDetails`, `onReportError` |
+
+### 2. Network Screens (3 Screens)
+*Connectivity states handling.*
+
+| Screen | Description | Key Props |
+|--------|-------------|-----------|
+| `NetworkOfflineScreen` | No internet connection. | `onRetry`, `tips` (troubleshooting steps) |
+| `NetworkSlowConnectionScreen` | High latency / poor connection. | `connectionSpeed`, `onContinue` (ignore warning) |
+| `ApiTimeoutScreen` | Request timeout. | `timeoutDuration`, `onRetry` |
+
+### 3. Permission Screens (4 Screens)
+*OS permission request flows.*
+
+| Screen | Description | Key Props |
+|--------|-------------|-----------|
+| `PermissionScreen` | Simple single-permission request. | `permissionType`, `onAllow`, `onDeny` |
+| `PermissionRequestScreen` | Detailed request with "Why we need this". | `reasons` (array), `icon` |
+| `PermissionDeniedScreen` | Help screen when permission is permanently denied. | `steps` (how to enable in settings), `onOpenSettings` |
+| `MultiPermissionRequestScreen`| Request multiple permissions in one flow. | `permissions` (array of status objects) |
+
+### 4. System Screens (10 Screens)
+*App lifecycle and maintenance events.*
+
+**Update Screens:**
+| Screen | Description | Key Props |
+|--------|-------------|-----------|
+| `AppUpdateScreen` | Unified update handler (soft/force/security). | `updateType`, `newVersion`, `releaseNotes` |
+| `SoftUpdateScreen` | Optional update with "Skip" option. | `features`, `onSkip` |
+| `OptionalUpdateScreen` | Standard update with "Remind Later". | `onMaybeLater` |
+| `ForceUpdateScreen` | Mandatory blocking update. | `onUpdate` (no skip option) |
+| `SecurityUpdateScreen` | Critical security patch alert. | `features` (security fixes details) |
+
+**Maintenance Screens:**
+| Screen | Description | Key Props |
+|--------|-------------|-----------|
+| `SystemMaintenanceScreen` | Unified maintenance handler. | `type` (planned/emergency), `estimatedEndTime` |
+| `PlannedMaintenanceScreen` | Scheduled maintenance with countdown. | `onNotifyWhenBack` |
+| `UnplannedOutageScreen` | Unexpected downtime apology. | `onCheckAgain` |
+| `EmergencyOutageScreen` | Critical service failure. | `incidentDetails`, `onGetUpdates` |
+| `ServiceUnavailableScreen` | 503 Service Unavailable fallback. | `onRetry` |
+
+## Installation
+
+```bash
+npm install @codeimplants/ui-kit @codeimplants/support
+```
+
+## Platform Compatibility
+
+| Platform | Status |
+|----------|--------|
+| iOS | ✅ |
+| Android | ✅ |
+| Web (React Native Web) | ✅ |
+| Expo | ✅ |
+| Bare React Native | ✅ |
+
+## License
+
+MIT

package/dist/adapters/index.d.ts

@@ -0,0 +1 @@
+export * from './supportAdapter';

package/dist/adapters/index.js

@@ -0,0 +1,2 @@
+// Adapters - Barrel Export
+export * from './supportAdapter';

package/dist/adapters/supportAdapter.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Support Adapter
+ *
+ * Clean adapter layer that connects UI Kit screens to Support package.
+ * UI screens remain agnostic of support implementation details.
+ */
+/**
+ * Error Context Type
+ * Shared between ui-kit and support packages
+ */
+export interface ErrorContext {
+    errorMessage: string;
+    errorCode?: string;
+    screenName?: string;
+    timestamp: string;
+    appVersion: string;
+    platform: 'web' | 'ios' | 'android';
+    os: string;
+    userId?: string;
+    retryCount?: number;
+}
+/**
+ * Retry Handler Type
+ *
+ * Future-proof interface for retry logic.
+ * Even if retry implementation changes internally, UI remains stable.
+ */
+export type RetryHandler = () => Promise<void>;
+/**
+ * Support Callback Handler
+ *
+ * Returns a callback function that can be passed to UI screens.
+ * The callback will be invoked with the support hook methods.
+ *
+ * @example
+ * ```tsx
+ * const supportHandler = createSupportHandler('ApiErrorScreen', errorContext);
+ *
+ * <ApiErrorScreen
+ *   onRetry={retryHandler}
+ *   support={{
+ *     onWhatsApp: () => supportHandler((support) => support.openWhatsApp()),
+ *     onEmail: () => supportHandler((support) => support.sendEmail()),
+ *     onCall: () => supportHandler((support) => support.makeCall()),
+ *   }}
+ * />
+ * ```
+ */
+export interface SupportHandler {
+    /**
+     * Execute a support action using the support hook
+     * @param action - Function that receives the support hook and executes an action
+     */
+    (action: (support: any) => Promise<any>): Promise<void>;
+}
+/**
+ * Create a support handler for a specific screen
+ *
+ * This function is meant to be used in test apps to connect UI screens
+ * to the support package. In production apps, you would implement this
+ * based on your specific requirements.
+ *
+ * @param screenName - Name of the screen (for logging/debugging)
+ * @param errorContext - Error context to pass to support methods
+ * @returns A handler function that can execute support actions
+ */
+export declare function createSupportHandler(screenName: string, errorContext: ErrorContext): SupportHandler;
+/**
+ * Create a retry handler for a specific screen
+ *
+ * Placeholder for future retry logic implementation.
+ * UI screens can use this type without knowing retry implementation details.
+ *
+ * @param screenName - Name of the screen (for logging/debugging)
+ * @param retryAction - The actual retry logic to execute
+ * @returns A retry handler function
+ */
+export declare function createRetryHandler(screenName: string, retryAction: () => Promise<void>): RetryHandler;
+/**
+ * Utility to create error context from screen data
+ *
+ * @param screenName - Name of the screen
+ * @param errorMessage - Error message to include
+ * @param errorCode - Optional error code
+ * @returns ErrorContext object
+ */
+export declare function createErrorContext(screenName: string, errorMessage: string, errorCode?: string): ErrorContext;

package/dist/adapters/supportAdapter.js

@@ -0,0 +1,99 @@
+/**
+ * Support Adapter
+ *
+ * Clean adapter layer that connects UI Kit screens to Support package.
+ * UI screens remain agnostic of support implementation details.
+ */
+/**
+ * Create a support handler for a specific screen
+ *
+ * This function is meant to be used in test apps to connect UI screens
+ * to the support package. In production apps, you would implement this
+ * based on your specific requirements.
+ *
+ * @param screenName - Name of the screen (for logging/debugging)
+ * @param errorContext - Error context to pass to support methods
+ * @returns A handler function that can execute support actions
+ */
+export function createSupportHandler(screenName, errorContext) {
+    return async (action) => {
+        try {
+            // In a real implementation, you would get the support hook here
+            // For now, this is a placeholder that test apps will override
+            console.log(`[${screenName}] Support action triggered`, {
+                errorContext,
+                timestamp: new Date().toISOString(),
+            });
+            // The test app will provide the actual support hook
+            await action({ errorContext });
+        }
+        catch (error) {
+            console.error(`[${screenName}] Support action failed:`, error);
+            throw error;
+        }
+    };
+}
+/**
+ * Create a retry handler for a specific screen
+ *
+ * Placeholder for future retry logic implementation.
+ * UI screens can use this type without knowing retry implementation details.
+ *
+ * @param screenName - Name of the screen (for logging/debugging)
+ * @param retryAction - The actual retry logic to execute
+ * @returns A retry handler function
+ */
+export function createRetryHandler(screenName, retryAction) {
+    return async () => {
+        try {
+            console.log(`[${screenName}] Retry triggered`, {
+                timestamp: new Date().toISOString(),
+            });
+            await retryAction();
+            console.log(`[${screenName}] Retry completed successfully`);
+        }
+        catch (error) {
+            console.error(`[${screenName}] Retry failed:`, error);
+            throw error;
+        }
+    };
+}
+/**
+ * Utility to create error context from screen data
+ *
+ * @param screenName - Name of the screen
+ * @param errorMessage - Error message to include
+ * @param errorCode - Optional error code
+ * @returns ErrorContext object
+ */
+export function createErrorContext(screenName, errorMessage, errorCode) {
+    return {
+        errorMessage,
+        errorCode,
+        screenName,
+        timestamp: new Date().toISOString(),
+        appVersion: '1.0.0', // Should be replaced with actual app version
+        platform: getPlatform(),
+        os: getOS(),
+    };
+}
+/**
+ * Get current platform
+ */
+function getPlatform() {
+    // This is a simplified version - in production use proper platform detection
+    if (typeof window !== 'undefined') {
+        return 'web';
+    }
+    // For React Native, you would use Platform.OS
+    return 'web';
+}
+/**
+ * Get OS information
+ */
+function getOS() {
+    if (typeof window !== 'undefined' && window.navigator) {
+        return window.navigator.userAgent;
+    }
+    return 'Unknown';
+}

package/dist/client.d.ts

@@ -0,0 +1,55 @@
+import type { ErrorContext, UIKitConfig } from './types';
+export declare const initializeUIKit: (customConfig: UIKitConfig) => void;
+export declare const getConfig: () => UIKitConfig;
+export declare const isWeb: () => boolean;
+export declare const isIOS: () => boolean;
+export declare const isAndroid: () => boolean;
+export declare const getPlatformName: () => "web" | "ios" | "android";
+export declare const getOSInfo: () => string;
+export declare const buildErrorContext: (errorMessage: string, options?: Partial<ErrorContext>) => ErrorContext;
+export declare const formatErrorForSupport: (context: ErrorContext) => string;
+export declare const getWhatsAppUrl: (context?: ErrorContext) => string;
+/**
+ * Get phone URL for support
+ */
+export declare const getPhoneUrl: () => string;
+/**
+ * Calculate exponential backoff delay
+ */
+export declare const calculateBackoffDelay: (attempt: number, baseDelay?: number, maxDelay?: number) => number;
+/**
+ * Format delay time for display
+ */
+export declare const formatDelayTime: (milliseconds: number) => string;
+/**
+ * Get connection speed label (UI only)
+ */
+export declare const getConnectionSpeedLabel: (speed: string) => string;
+/**
+ * Get connection tips based on speed (UI only)
+ */
+export declare const getConnectionTips: (speed: string) => string[];
+/**
+ * Get permission display name
+ */
+export declare const getPermissionDisplayName: (permission: string) => string;
+/**
+ * Get permission description
+ */
+export declare const getPermissionDescription: (permission: string) => string;
+/**
+ * Get color by type
+ */
+export declare const getColor: (type: keyof NonNullable<UIKitConfig["colors"]>) => string;
+/**
+ * Get color with opacity
+ */
+export declare const getColorWithOpacity: (colorOrKey: keyof NonNullable<UIKitConfig["colors"]> | string, opacity: number) => string;
+/**
+ * Get responsive padding based on platform
+ */
+export declare const getResponsivePadding: () => number;
+/**
+ * Get responsive font size
+ */
+export declare const getResponsiveFontSize: (base: number) => number;

package/dist/client.js

@@ -0,0 +1,229 @@
+import { Platform } from 'react-native';
+let config = {
+    appVersion: '1.0.0',
+    supportPhone: '+919850929690',
+    colors: {
+        error: '#EF4444',
+        warning: '#F59E0B',
+        success: '#10B981',
+        offline: '#6B7280',
+        primary: '#3B82F6',
+    },
+};
+export const initializeUIKit = (customConfig) => {
+    config = { ...config, ...customConfig };
+};
+export const getConfig = () => config;
+export const isWeb = () => {
+    return Platform.OS === 'web';
+};
+export const isIOS = () => {
+    return Platform.OS === 'ios';
+};
+export const isAndroid = () => {
+    return Platform.OS === 'android';
+};
+export const getPlatformName = () => {
+    return Platform.OS;
+};
+export const getOSInfo = () => {
+    if (isIOS())
+        return `iOS ${Platform.Version || 'Unknown'}`;
+    if (isAndroid())
+        return `Android ${Platform.Version || 'Unknown'}`;
+    if (isWeb()) {
+        // For web, we can try to detect from user agent
+        if (typeof navigator !== 'undefined') {
+            const ua = navigator.userAgent;
+            if (/Macintosh/.test(ua))
+                return 'macOS';
+            if (/Windows/.test(ua))
+                return 'Windows';
+            if (/Linux/.test(ua))
+                return 'Linux';
+        }
+        return 'Web';
+    }
+    return 'Unknown';
+};
+export const buildErrorContext = (errorMessage, options) => {
+    return {
+        errorMessage,
+        timestamp: new Date().toISOString(),
+        appVersion: config.appVersion || '1.0.0',
+        platform: getPlatformName(),
+        os: getOSInfo(),
+        ...options,
+    };
+};
+export const formatErrorForSupport = (context) => {
+    const maskedUserId = context.userId
+        ? `${context.userId.slice(0, 4)}****${context.userId.slice(-4)}`
+        : 'Guest';
+    return `
+🚨 *Support Request*
+
+📱 *App Version:* ${context.appVersion}
+💻 *Platform:* ${context.platform}
+🖥️ *OS:* ${context.os}
+👤 *User:* ${maskedUserId}
+⏰ *Time:* ${new Date(context.timestamp).toLocaleString()}
+
+❌ *Error:* ${context.errorMessage}
+${context.errorCode ? `📋 *Code:* ${context.errorCode}` : ''}
+${context.screenName ? `📍 *Screen:* ${context.screenName}` : ''}
+${context.retryCount ? `🔄 *Retry Count:* ${context.retryCount}` : ''}
+`.trim();
+};
+export const getWhatsAppUrl = (context) => {
+    const phone = config.supportPhone?.replace(/[^0-9]/g, '') || '919850929690';
+    if (context) {
+        const message = encodeURIComponent(formatErrorForSupport(context));
+        return `https://wa.me/${phone}?text=${message}`;
+    }
+    return `https://wa.me/${phone}`;
+};
+/**
+ * Get phone URL for support
+ */
+export const getPhoneUrl = () => {
+    return `tel:${config.supportPhone || '+919850929690'}`;
+};
+// ============================================================================
+// Retry Logic Utilities
+// ============================================================================
+/**
+ * Calculate exponential backoff delay
+ */
+export const calculateBackoffDelay = (attempt, baseDelay = 1000, maxDelay = 30000) => {
+    const delay = Math.min(baseDelay * Math.pow(2, attempt), maxDelay);
+    // Add jitter (±20%)
+    const jitter = delay * 0.2 * (Math.random() - 0.5);
+    return Math.round(delay + jitter);
+};
+/**
+ * Format delay time for display
+ */
+export const formatDelayTime = (milliseconds) => {
+    const seconds = Math.ceil(milliseconds / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+};
+// ============================================================================
+// Network Utilities (UI Only - for display purposes)
+// ============================================================================
+/**
+ * Get connection speed label (UI only)
+ */
+export const getConnectionSpeedLabel = (speed) => {
+    const labels = {
+        '2G': 'Very Slow (2G)',
+        '3G': 'Slow (3G)',
+        '4G': 'Good (4G)',
+        '5G': 'Excellent (5G)',
+        slow: 'Slow Connection',
+        fast: 'Fast Connection',
+    };
+    return labels[speed] || 'Unknown';
+};
+/**
+ * Get connection tips based on speed (UI only)
+ */
+export const getConnectionTips = (speed) => {
+    const tips = {
+        '2G': [
+            'Try moving to an area with better signal',
+            'Connect to Wi-Fi if available',
+            'Close other apps using internet',
+        ],
+        '3G': [
+            'Consider switching to Wi-Fi',
+            'Some features may load slowly',
+            'Try again in a moment',
+        ],
+        slow: [
+            'Check your internet connection',
+            'Try moving closer to your router',
+            'Restart your device if needed',
+        ],
+    };
+    return tips[speed] || tips.slow;
+};
+// ============================================================================
+// Permission Utilities (UI Only)
+// ============================================================================
+/**
+ * Get permission display name
+ */
+export const getPermissionDisplayName = (permission) => {
+    const names = {
+        camera: 'Camera',
+        location: 'Location',
+        notifications: 'Notifications',
+        storage: 'Storage',
+        microphone: 'Microphone',
+        contacts: 'Contacts',
+        calendar: 'Calendar',
+    };
+    return names[permission] || permission;
+};
+/**
+ * Get permission description
+ */
+export const getPermissionDescription = (permission) => {
+    const descriptions = {
+        camera: 'Take photos and videos',
+        location: 'Access your location for better experience',
+        notifications: 'Receive important updates and alerts',
+        storage: 'Save and access files on your device',
+        microphone: 'Record audio and voice messages',
+        contacts: 'Find and connect with friends',
+        calendar: 'Sync events and reminders',
+    };
+    return descriptions[permission] || 'Required for app functionality';
+};
+// ============================================================================
+// Color Utilities
+// ============================================================================
+/**
+ * Get color by type
+ */
+export const getColor = (type) => {
+    return config.colors?.[type] || '#3B82F6';
+};
+/**
+ * Get color with opacity
+ */
+export const getColorWithOpacity = (colorOrKey, opacity) => {
+    // Check if it's a hex color (starts with #) or a color key
+    const color = colorOrKey.startsWith('#') ? colorOrKey : getColor(colorOrKey);
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+// ============================================================================
+// Dimension Utilities
+// ============================================================================
+/**
+ * Get responsive padding based on platform
+ */
+export const getResponsivePadding = () => {
+    if (isWeb())
+        return 24;
+    if (isIOS())
+        return 20;
+    return 16; // Android
+};
+/**
+ * Get responsive font size
+ */
+export const getResponsiveFontSize = (base) => {
+    if (isWeb())
+        return base;
+    return base; // Can be adjusted based on platform needs
+};

package/dist/components/IconLibrary.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+}
+export declare const AlertTriangleIcon: React.FC<IconProps>;
+export declare const WifiOffIcon: React.FC<IconProps>;
+export declare const ServerCrashIcon: React.FC<IconProps>;
+export declare const ClockIcon: React.FC<IconProps>;
+export declare const RefreshIcon: React.FC<IconProps>;
+export declare const CheckCircleIcon: React.FC<IconProps>;
+export declare const DownloadIcon: React.FC<IconProps>;
+export declare const WrenchIcon: React.FC<IconProps>;
+export declare const ShieldIcon: React.FC<IconProps>;
+export declare const HomeIcon: React.FC<IconProps>;
+export declare const PhoneIcon: React.FC<IconProps>;
+export declare const MessageCircleIcon: React.FC<IconProps>;
+export declare const GaugeIcon: React.FC<IconProps>;
+export declare const SettingsIcon: React.FC<IconProps>;
+export declare const XIcon: React.FC<IconProps>;
+export declare const ChevronRightIcon: React.FC<IconProps>;
+export declare const MailIcon: React.FC<IconProps>;
+export {};

package/dist/components/IconLibrary.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, Circle, Line, Polyline } from 'react-native-svg';
+export const AlertTriangleIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Line, { x1: "12", y1: "9", x2: "12", y2: "13", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Circle, { cx: "12", cy: "17", r: "1", fill: color })] }));
+export const WifiOffIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Line, { x1: "1", y1: "1", x2: "23", y2: "23", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Path, { d: "M16.72 11.06A10.94 10.94 0 0119 12.55M5 12.55a10.94 10.94 0 015.17-2.39M10.71 5.05A16 16 0 0122.58 9M1.42 9a15.91 15.91 0 014.7-2.88M8.53 16.11a6 6 0 016.95 0", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Circle, { cx: "12", cy: "20", r: "1", fill: color })] }));
+export const ServerCrashIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M4 2h16a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2zM4 14h16a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4a2 2 0 012-2z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Line, { x1: "6", y1: "6", x2: "6.01", y2: "6", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Line, { x1: "6", y1: "18", x2: "6.01", y2: "18", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Line, { x1: "10", y1: "6", x2: "14", y2: "6", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Line, { x1: "10", y1: "18", x2: "14", y2: "18", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
+export const ClockIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Circle, { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: 2 }), _jsx(Polyline, { points: "12 6 12 12 16 14", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const RefreshIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Polyline, { points: "23 4 23 10 17 10", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Polyline, { points: "1 20 1 14 7 14", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Path, { d: "M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const CheckCircleIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Circle, { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: 2 }), _jsx(Polyline, { points: "9 12 11 14 15 10", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const DownloadIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Polyline, { points: "7 10 12 15 17 10", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Line, { x1: "12", y1: "15", x2: "12", y2: "3", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
+export const WrenchIcon = ({ size = 24, color = '#000' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const ShieldIcon = ({ size = 24, color = '#000' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const HomeIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Polyline, { points: "9 22 9 12 15 12 15 22", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const PhoneIcon = ({ size = 24, color = '#000' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const MessageCircleIcon = ({ size = 24, color = '#000' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const GaugeIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M12 2a10 10 0 0110 10h-4a6 6 0 00-6-6V2z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Circle, { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: 2 }), _jsx(Polyline, { points: "12 6 12 12 16 14", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const SettingsIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Circle, { cx: "12", cy: "12", r: "3", stroke: color, strokeWidth: 2 }), _jsx(Path, { d: "M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
+export const XIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Line, { x1: "18", y1: "6", x2: "6", y2: "18", stroke: color, strokeWidth: 2, strokeLinecap: "round" }), _jsx(Line, { x1: "6", y1: "6", x2: "18", y2: "18", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
+export const ChevronRightIcon = ({ size = 24, color = '#000' }) => (_jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx(Polyline, { points: "9 18 15 12 9 6", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const MailIcon = ({ size = 24, color = '#000' }) => (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx(Polyline, { points: "22,6 12,13 2,6", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }));