@nice2dev/ui-tools 1.0.10

package/dist/mobile-components.d.ts

@@ -0,0 +1,766 @@
+/**
+ * @file mobile-components.ts
+ * @module @nice2dev/ui-tools
+ * @description PRO-21 — Mobile & Embedded
+ *
+ * Types for mobile-first components, touch optimization,
+ * offline capabilities, and embedded displays.
+ */
+/** Breakpoint */
+export type MobileBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Orientation */
+export type ScreenOrientation = 'portrait' | 'landscape' | 'any';
+/** Touch gesture */
+export type TouchGesture = 'tap' | 'doubleTap' | 'longPress' | 'swipe' | 'pan' | 'pinch' | 'rotate' | 'press';
+/** Swipe direction */
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+/** Mobile config */
+export interface MobileConfig {
+    /** Theme */
+    theme?: MobileTheme;
+    /** Breakpoints */
+    breakpoints?: BreakpointConfig;
+    /** Touch config */
+    touch?: TouchConfig;
+    /** Haptics config */
+    haptics?: HapticsConfig;
+    /** Offline config */
+    offline?: OfflineConfig;
+    /** Kiosk config */
+    kiosk?: KioskConfig;
+}
+/** Mobile theme */
+export interface MobileTheme {
+    name?: string;
+    colors?: MobileColors;
+    spacing?: MobileSpacing;
+    typography?: MobileTypography;
+    safeArea?: SafeAreaConfig;
+}
+/** Mobile colors */
+export interface MobileColors {
+    primary?: string;
+    surface?: string;
+    background?: string;
+    tabBar?: string;
+    statusBar?: string;
+}
+/** Mobile spacing */
+export interface MobileSpacing {
+    touchTarget?: number;
+    contentPadding?: number;
+    listItemHeight?: number;
+    headerHeight?: number;
+    tabBarHeight?: number;
+}
+/** Mobile typography */
+export interface MobileTypography {
+    baseFontSize?: number;
+    scaleFactor?: number;
+    headerSize?: number;
+    bodySize?: number;
+}
+/** Safe area config */
+export interface SafeAreaConfig {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+    respectNotch?: boolean;
+}
+/** Breakpoint config */
+export interface BreakpointConfig {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+}
+/** Touch config */
+export interface TouchConfig {
+    minTargetSize?: number;
+    tapDelay?: number;
+    longPressDelay?: number;
+    swipeThreshold?: number;
+    panThreshold?: number;
+}
+/** Haptics config */
+export interface HapticsConfig {
+    enabled?: boolean;
+    intensity?: HapticsIntensity;
+    patterns?: HapticsPattern[];
+}
+/** Haptics intensity */
+export type HapticsIntensity = 'light' | 'medium' | 'heavy';
+/** Haptics pattern */
+export interface HapticsPattern {
+    name: string;
+    vibrations: VibrationEntry[];
+}
+/** Vibration entry */
+export interface VibrationEntry {
+    duration: number;
+    intensity?: number;
+    pause?: number;
+}
+/** Mobile tabs config */
+export interface MobileTabsConfig {
+    items: MobileTabItem[];
+    position?: 'bottom' | 'top';
+    style?: TabsStyle;
+    badges?: TabBadge[];
+    activeColor?: string;
+    inactiveColor?: string;
+}
+/** Mobile tab item */
+export interface MobileTabItem {
+    id: string;
+    label: string;
+    icon: string;
+    activeIcon?: string;
+    route?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+/** Tabs style */
+export interface TabsStyle {
+    background?: string;
+    height?: number;
+    iconSize?: number;
+    labelSize?: number;
+    showLabels?: boolean;
+    elevated?: boolean;
+}
+/** Tab badge */
+export interface TabBadge {
+    tabId: string;
+    count?: number;
+    dot?: boolean;
+    color?: string;
+}
+/** Mobile drawer config */
+export interface MobileDrawerConfig {
+    position: 'left' | 'right';
+    mode: 'overlay' | 'push';
+    width?: number | string;
+    swipeEnabled?: boolean;
+    swipeEdgeWidth?: number;
+    backdrop?: boolean;
+    backdropOpacity?: number;
+    header?: DrawerHeader;
+    footer?: DrawerFooter;
+    items: DrawerItem[];
+}
+/** Drawer header */
+export interface DrawerHeader {
+    title?: string;
+    subtitle?: string;
+    avatar?: string;
+    background?: string;
+}
+/** Drawer footer */
+export interface DrawerFooter {
+    content?: string;
+    actions?: DrawerAction[];
+}
+/** Drawer action */
+export interface DrawerAction {
+    id: string;
+    label: string;
+    icon?: string;
+    onClick?: () => void;
+}
+/** Drawer item */
+export interface DrawerItem {
+    id: string;
+    type: 'item' | 'divider' | 'header';
+    label?: string;
+    icon?: string;
+    route?: string;
+    badge?: TabBadge;
+    children?: DrawerItem[];
+    expanded?: boolean;
+}
+/** Mobile header config */
+export interface MobileHeaderConfig {
+    title?: string;
+    subtitle?: string;
+    leftAction?: HeaderAction;
+    rightActions?: HeaderAction[];
+    style?: HeaderStyle;
+    collapsible?: CollapsibleConfig;
+}
+/** Header action */
+export interface HeaderAction {
+    id: string;
+    icon: string;
+    label?: string;
+    badge?: number;
+    onClick?: () => void;
+}
+/** Header style */
+export interface HeaderStyle {
+    background?: string;
+    textColor?: string;
+    height?: number;
+    elevated?: boolean;
+    transparent?: boolean;
+}
+/** Collapsible config */
+export interface CollapsibleConfig {
+    enabled: boolean;
+    minHeight?: number;
+    maxHeight?: number;
+    triggerOffset?: number;
+    background?: string;
+}
+/** Pull to refresh config */
+export interface PullToRefreshConfig {
+    enabled?: boolean;
+    threshold?: number;
+    maxPull?: number;
+    indicator?: RefreshIndicator;
+    onRefresh?: () => Promise<void>;
+}
+/** Refresh indicator */
+export interface RefreshIndicator {
+    type: 'spinner' | 'dots' | 'custom';
+    color?: string;
+    size?: number;
+    text?: string;
+}
+/** Swipe actions config */
+export interface SwipeActionsConfig {
+    left?: SwipeAction[];
+    right?: SwipeAction[];
+    threshold?: number;
+    overshoot?: boolean;
+    autoClose?: boolean;
+}
+/** Swipe action */
+export interface SwipeAction {
+    id: string;
+    label?: string;
+    icon?: string;
+    color: string;
+    textColor?: string;
+    width?: number;
+    onAction?: () => void;
+}
+/** Infinite scroll config */
+export interface InfiniteScrollConfig {
+    enabled?: boolean;
+    threshold?: number;
+    loading?: boolean;
+    hasMore?: boolean;
+    loadMore?: () => Promise<void>;
+    loader?: ScrollLoader;
+    endMessage?: string;
+}
+/** Scroll loader */
+export interface ScrollLoader {
+    type: 'spinner' | 'skeleton' | 'custom';
+    count?: number;
+}
+/** Mobile modal config */
+export interface MobileModalConfig {
+    type: 'bottom-sheet' | 'fullscreen' | 'center';
+    snapPoints?: number[];
+    initialSnap?: number;
+    dismissible?: boolean;
+    swipeToClose?: boolean;
+    backdrop?: boolean;
+    handle?: boolean;
+    header?: ModalHeader;
+}
+/** Modal header */
+export interface ModalHeader {
+    title?: string;
+    showClose?: boolean;
+    actions?: HeaderAction[];
+}
+/** Gesture config */
+export interface GestureConfig {
+    enabled?: boolean;
+    gestures: GestureDefinition[];
+}
+/** Gesture definition */
+export interface GestureDefinition {
+    type: TouchGesture;
+    direction?: SwipeDirection;
+    fingers?: number;
+    minDistance?: number;
+    maxDuration?: number;
+    onGesture?: (event: GestureEvent) => void;
+}
+/** Gesture event */
+export interface GestureEvent {
+    type: TouchGesture;
+    direction?: SwipeDirection;
+    scale?: number;
+    rotation?: number;
+    velocity?: GestureVelocity;
+    center?: GesturePoint;
+    delta?: GesturePoint;
+}
+/** Gesture velocity */
+export interface GestureVelocity {
+    x: number;
+    y: number;
+}
+/** Gesture point */
+export interface GesturePoint {
+    x: number;
+    y: number;
+}
+/** Mobile picker config */
+export interface MobilePickerConfig {
+    type: 'wheel' | 'list' | 'grid';
+    columns?: PickerColumn[];
+    visibleItems?: number;
+    itemHeight?: number;
+    haptics?: boolean;
+}
+/** Picker column */
+export interface PickerColumn {
+    id: string;
+    label?: string;
+    options: PickerOption[];
+    width?: number;
+    suffix?: string;
+}
+/** Picker option */
+export interface PickerOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+/** Mobile calendar config */
+export interface MobileCalendarConfig {
+    mode: 'single' | 'range' | 'multiple';
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    markedDates?: MarkedDate[];
+    showWeekNumbers?: boolean;
+    swipeNavigation?: boolean;
+}
+/** Marked date */
+export interface MarkedDate {
+    date: Date;
+    color?: string;
+    dotColor?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    label?: string;
+}
+/** Touch signature config */
+export interface TouchSignatureConfig {
+    width?: number;
+    height?: number;
+    penColor?: string;
+    penWidth?: number;
+    backgroundColor?: string;
+    clearOnResize?: boolean;
+    trimWhitespace?: boolean;
+}
+/** Touch drawing config */
+export interface TouchDrawingConfig {
+    width?: number;
+    height?: number;
+    tools: DrawingTool[];
+    defaultTool?: string;
+    backgroundColor?: string;
+    gridEnabled?: boolean;
+    undoSteps?: number;
+}
+/** Drawing tool */
+export interface DrawingTool {
+    id: string;
+    type: 'pen' | 'brush' | 'eraser' | 'shape' | 'text';
+    color?: string;
+    size?: number;
+    opacity?: number;
+}
+/** Touch color picker config */
+export interface TouchColorPickerConfig {
+    type: 'wheel' | 'spectrum' | 'sliders';
+    showAlpha?: boolean;
+    showHex?: boolean;
+    showRgb?: boolean;
+    presets?: string[];
+    recentColors?: string[];
+}
+/** Touch slider config */
+export interface TouchSliderConfig {
+    min: number;
+    max: number;
+    step?: number;
+    value?: number;
+    range?: boolean;
+    vertical?: boolean;
+    showValue?: boolean;
+    showTicks?: boolean;
+    hapticFeedback?: boolean;
+}
+/** Touch menu config */
+export interface TouchMenuConfig {
+    items: TouchMenuItem[];
+    position?: 'auto' | 'top' | 'bottom';
+    trigger?: 'longPress' | 'tap';
+    haptics?: boolean;
+    backdrop?: boolean;
+}
+/** Touch menu item */
+export interface TouchMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    children?: TouchMenuItem[];
+}
+/** Offline config */
+export interface OfflineConfig {
+    enabled?: boolean;
+    storage?: OfflineStorage;
+    sync?: SyncConfig;
+    indicators?: OfflineIndicators;
+    cacheStrategies?: CacheStrategy[];
+}
+/** Offline storage */
+export interface OfflineStorage {
+    type: 'indexeddb' | 'localstorage' | 'sqlite';
+    name?: string;
+    version?: number;
+    quota?: number;
+    encryption?: boolean;
+}
+/** Sync config */
+export interface SyncConfig {
+    enabled?: boolean;
+    strategy: 'immediate' | 'background' | 'manual';
+    interval?: number;
+    retryAttempts?: number;
+    conflictResolution?: ConflictResolution;
+    backgroundSync?: BackgroundSyncConfig;
+}
+/** Conflict resolution */
+export type ConflictResolution = 'server_wins' | 'client_wins' | 'last_write_wins' | 'manual';
+/** Background sync config */
+export interface BackgroundSyncConfig {
+    enabled: boolean;
+    tag?: string;
+    minInterval?: number;
+    requiresNetwork?: boolean;
+}
+/** Offline indicators */
+export interface OfflineIndicators {
+    showBanner?: boolean;
+    showIcon?: boolean;
+    bannerPosition?: 'top' | 'bottom';
+    bannerMessage?: string;
+    onlineMessage?: string;
+}
+/** Cache strategy */
+export interface CacheStrategy {
+    pattern: string;
+    strategy: CacheStrategyType;
+    maxAge?: number;
+    maxEntries?: number;
+}
+/** Cache strategy type */
+export type CacheStrategyType = 'cache_first' | 'network_first' | 'stale_while_revalidate' | 'network_only' | 'cache_only';
+/** Offline form config */
+export interface OfflineFormConfig {
+    formId: string;
+    saveLocally?: boolean;
+    syncOnOnline?: boolean;
+    conflictResolution?: ConflictResolution;
+    validationOffline?: boolean;
+}
+/** Offline media config */
+export interface OfflineMediaConfig {
+    enabled?: boolean;
+    maxSize?: number;
+    preloadUrls?: string[];
+    cacheImages?: boolean;
+    cacheVideos?: boolean;
+    cacheAudio?: boolean;
+}
+/** Sync status */
+export interface SyncStatus {
+    status: 'idle' | 'syncing' | 'error' | 'offline';
+    lastSync?: Date;
+    pendingChanges?: number;
+    failedItems?: SyncFailure[];
+    progress?: SyncProgress;
+}
+/** Sync failure */
+export interface SyncFailure {
+    id: string;
+    type: string;
+    error: string;
+    retryCount: number;
+    data?: unknown;
+}
+/** Sync progress */
+export interface SyncProgress {
+    total: number;
+    completed: number;
+    percentage: number;
+}
+/** Kiosk config */
+export interface KioskConfig {
+    enabled?: boolean;
+    mode: KioskMode;
+    lockScreen?: LockScreenConfig;
+    screenSaver?: ScreenSaverConfig;
+    autoStart?: AutoStartConfig;
+    remoteManagement?: RemoteManagementConfig;
+    display?: DisplayConfig;
+}
+/** Kiosk mode */
+export type KioskMode = 'fullscreen' | 'locked' | 'semi-locked';
+/** Lock screen config */
+export interface LockScreenConfig {
+    enabled?: boolean;
+    pin?: string;
+    timeout?: number;
+    allowedApps?: string[];
+    adminAccess?: boolean;
+}
+/** Screen saver config */
+export interface ScreenSaverConfig {
+    enabled?: boolean;
+    timeout?: number;
+    type: 'blank' | 'slideshow' | 'clock' | 'logo' | 'custom';
+    media?: string[];
+    brightness?: number;
+}
+/** Auto start config */
+export interface AutoStartConfig {
+    enabled?: boolean;
+    delay?: number;
+    url?: string;
+    showSplash?: boolean;
+    splashDuration?: number;
+}
+/** Remote management config */
+export interface RemoteManagementConfig {
+    enabled?: boolean;
+    provider: 'mdm' | 'custom';
+    endpoint?: string;
+    apiKey?: string;
+    heartbeatInterval?: number;
+    remoteCommands?: boolean;
+}
+/** Display config */
+export interface DisplayConfig {
+    orientation?: ScreenOrientation;
+    orientationLock?: boolean;
+    brightness?: number;
+    autoBrightness?: boolean;
+    timeout?: number;
+    lowPowerMode?: LowPowerConfig;
+    externalDisplay?: ExternalDisplayConfig;
+}
+/** Low power config */
+export interface LowPowerConfig {
+    enabled?: boolean;
+    threshold?: number;
+    dimBrightness?: number;
+    disableAnimations?: boolean;
+    reducedRefresh?: boolean;
+}
+/** External display config */
+export interface ExternalDisplayConfig {
+    enabled?: boolean;
+    mode: 'mirror' | 'extend' | 'separate';
+    preferredDisplay?: number;
+    resolution?: DisplayResolution;
+}
+/** Display resolution */
+export interface DisplayResolution {
+    width: number;
+    height: number;
+    refreshRate?: number;
+}
+/** Touch calibration config */
+export interface TouchCalibrationConfig {
+    enabled?: boolean;
+    points?: CalibrationPoint[];
+    matrix?: number[][];
+}
+/** Calibration point */
+export interface CalibrationPoint {
+    screenX: number;
+    screenY: number;
+    touchX: number;
+    touchY: number;
+}
+/** Responsive layout config */
+export interface ResponsiveLayoutConfig {
+    breakpoints?: BreakpointConfig;
+    columns?: ResponsiveColumns;
+    spacing?: ResponsiveSpacing;
+    visibility?: ResponsiveVisibility;
+}
+/** Responsive columns */
+export interface ResponsiveColumns {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+}
+/** Responsive spacing */
+export interface ResponsiveSpacing {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+/** Responsive visibility */
+export interface ResponsiveVisibility {
+    hidden?: MobileBreakpoint[];
+    visible?: MobileBreakpoint[];
+}
+/** Adaptive component config */
+export interface AdaptiveComponentConfig {
+    xs?: unknown;
+    sm?: unknown;
+    md?: unknown;
+    lg?: unknown;
+    xl?: unknown;
+    '2xl'?: unknown;
+}
+/** Mobile keyboard config */
+export interface MobileKeyboardConfig {
+    type: KeyboardType;
+    returnKeyType?: ReturnKeyType;
+    autoCapitalize?: AutoCapitalize;
+    autoCorrect?: boolean;
+    autoComplete?: AutoCompleteHint;
+    textContentType?: TextContentType;
+}
+/** Keyboard type */
+export type KeyboardType = 'default' | 'numeric' | 'email' | 'phone' | 'url' | 'decimal' | 'search' | 'twitter' | 'web-search';
+/** Return key type */
+export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'default';
+/** Auto capitalize */
+export type AutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
+/** Auto complete hint */
+export type AutoCompleteHint = 'off' | 'username' | 'password' | 'email' | 'name' | 'tel' | 'street-address' | 'postal-code' | 'cc-number';
+/** Text content type */
+export type TextContentType = 'none' | 'URL' | 'addressCity' | 'addressState' | 'countryName' | 'creditCardNumber' | 'emailAddress' | 'familyName' | 'givenName' | 'telephoneNumber' | 'postalCode' | 'oneTimeCode';
+/** Custom keyboard config */
+export interface CustomKeyboardConfig {
+    layout: KeyboardLayout;
+    height?: number;
+    theme?: KeyboardTheme;
+    haptics?: boolean;
+}
+/** Keyboard layout */
+export interface KeyboardLayout {
+    rows: KeyboardRow[];
+}
+/** Keyboard row */
+export interface KeyboardRow {
+    keys: KeyboardKey[];
+}
+/** Keyboard key */
+export interface KeyboardKey {
+    type: 'character' | 'modifier' | 'action' | 'spacer';
+    label?: string;
+    value?: string;
+    width?: number;
+    icon?: string;
+    action?: string;
+}
+/** Keyboard theme */
+export interface KeyboardTheme {
+    background?: string;
+    keyBackground?: string;
+    keyTextColor?: string;
+    specialKeyBackground?: string;
+    borderRadius?: number;
+}
+/** Device capabilities */
+export interface DeviceCapabilities {
+    hasCamera?: boolean;
+    hasMicrophone?: boolean;
+    hasGps?: boolean;
+    hasAccelerometer?: boolean;
+    hasGyroscope?: boolean;
+    hasCompass?: boolean;
+    hasBiometrics?: boolean;
+    hasNfc?: boolean;
+    hasBluetooth?: boolean;
+    hasVibration?: boolean;
+    hasNotch?: boolean;
+    screenSize?: ScreenSize;
+    pixelRatio?: number;
+    os?: DeviceOS;
+    osVersion?: string;
+}
+/** Screen size */
+export interface ScreenSize {
+    width: number;
+    height: number;
+    diagonal?: number;
+}
+/** Device OS */
+export type DeviceOS = 'ios' | 'android' | 'windows' | 'macos' | 'linux' | 'web';
+/** Biometrics config */
+export interface BiometricsConfig {
+    enabled?: boolean;
+    types?: BiometricType[];
+    fallbackToPin?: boolean;
+    promptMessage?: string;
+}
+/** Biometric type */
+export type BiometricType = 'fingerprint' | 'face' | 'iris';
+/** Camera config */
+export interface CameraConfig {
+    mode: 'photo' | 'video' | 'scan';
+    facing?: 'front' | 'back';
+    flash?: 'auto' | 'on' | 'off';
+    resolution?: CameraResolution;
+    overlay?: CameraOverlay;
+}
+/** Camera resolution */
+export interface CameraResolution {
+    width: number;
+    height: number;
+    quality?: 'low' | 'medium' | 'high';
+}
+/** Camera overlay */
+export interface CameraOverlay {
+    type: 'document' | 'face' | 'barcode' | 'custom';
+    aspectRatio?: number;
+    guidelines?: boolean;
+}
+/** Location config */
+export interface LocationConfig {
+    accuracy?: 'low' | 'medium' | 'high';
+    timeout?: number;
+    maximumAge?: number;
+    watchPosition?: boolean;
+    backgroundMode?: boolean;
+}
+/** Location data */
+export interface LocationData {
+    latitude: number;
+    longitude: number;
+    altitude?: number;
+    accuracy?: number;
+    speed?: number;
+    heading?: number;
+    timestamp: Date;
+}
+//# sourceMappingURL=mobile-components.d.ts.map