@umituz/react-native-design-system 4.25.86 → 4.25.88

package/dist/onboarding/presentation/components/OnboardingScreenContent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Onboarding Screen Content Component
+ * Single Responsibility: Render onboarding screen content (header, slide, footer)
+ */
+import React from "react";
+import type { OnboardingScreenContentProps } from "../types/OnboardingProps";
+export declare const OnboardingScreenContent: ({ containerStyle, useCustomBackground, currentSlide, isFirstSlide, isLastSlide, currentIndex, totalSlides, currentAnswer, isAnswerValid, showBackButton, showSkipButton, showProgressBar, showDots, showProgressText, skipButtonText, nextButtonText: _nextButtonText, getStartedButtonText: _getStartedButtonText, onBack, onSkip, onNext, onAnswerChange, renderHeader, renderFooter, renderSlide, onUpgrade, showPaywallOnComplete, variant, VideoComponent, }: OnboardingScreenContentProps) => React.JSX.Element;

package/dist/onboarding/presentation/components/OnboardingSlide.d.ts

@@ -0,0 +1,11 @@
+/**
+ * OnboardingSlide Component
+ * Single Responsibility: Render a single onboarding slide
+ */
+import React from "react";
+import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
+export interface OnboardingSlideProps {
+    slide: OnboardingSlideType;
+    variant?: "default" | "card" | "minimal" | "fullscreen";
+}
+export declare const OnboardingSlide: React.MemoExoticComponent<({ slide, variant, }: OnboardingSlideProps) => React.JSX.Element>;

package/dist/onboarding/presentation/components/QuestionRenderer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Question Renderer Component
+ * Single Responsibility: Render appropriate question component based on type
+ */
+import React from "react";
+import type { OnboardingQuestion, OnboardingAnswerValue } from "../../domain/entities/OnboardingQuestion";
+export interface QuestionRendererProps {
+    question: OnboardingQuestion;
+    value: OnboardingAnswerValue;
+    onChange: (value: OnboardingAnswerValue) => void;
+}
+export declare const QuestionRenderer: ({ question, value, onChange, }: QuestionRendererProps) => React.JSX.Element | null;

package/dist/onboarding/presentation/components/QuestionSlide.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import type { OnboardingAnswerValue } from "../../domain/entities/OnboardingQuestion";
+export interface QuestionSlideProps {
+    slide: OnboardingSlide;
+    value: OnboardingAnswerValue;
+    onChange: (value: OnboardingAnswerValue) => void;
+    variant?: "default" | "card" | "minimal" | "fullscreen";
+    fieldRequiredText?: string;
+}
+export declare const QuestionSlide: ({ slide, value, onChange, fieldRequiredText, }: QuestionSlideProps) => React.JSX.Element | null;

package/dist/onboarding/presentation/components/QuestionSlideHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+export interface QuestionSlideHeaderProps {
+    slide: OnboardingSlide;
+}
+export declare const QuestionSlideHeader: ({ slide }: QuestionSlideHeaderProps) => React.JSX.Element;

package/dist/onboarding/presentation/components/questions/DateQuestion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+export interface DateQuestionProps {
+    question: OnboardingQuestion;
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+export declare const DateQuestion: ({ question, value, onChange, }: DateQuestionProps) => React.JSX.Element;

package/dist/onboarding/presentation/components/questions/MultipleChoiceQuestion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Multiple Choice Question Component
+ * Single Responsibility: Render multiple choice question with options
+ */
+import React from "react";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+export interface MultipleChoiceQuestionProps {
+    question: OnboardingQuestion;
+    value: string[] | undefined;
+    onChange: (value: string[]) => void;
+}
+export declare const MultipleChoiceQuestion: ({ question, value, onChange, }: MultipleChoiceQuestionProps) => React.JSX.Element;

package/dist/onboarding/presentation/components/questions/QuestionOptionItem.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Question Option Item Component
+ * Single Responsibility: Render a single selectable option
+ */
+import React from "react";
+import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import type { OnboardingColors } from "../../types/OnboardingTheme";
+export interface QuestionOptionItemProps {
+    option: QuestionOption;
+    isSelected: boolean;
+    onPress: () => void;
+    colors: OnboardingColors;
+}
+export declare const QuestionOptionItem: React.MemoExoticComponent<({ option, isSelected, onPress, colors, }: QuestionOptionItemProps) => React.JSX.Element>;

package/dist/onboarding/presentation/components/questions/RatingQuestion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+export interface RatingQuestionProps {
+    question: OnboardingQuestion;
+    value: number | undefined;
+    onChange: (value: number) => void;
+}
+export declare const RatingQuestion: ({ question, value, onChange, }: RatingQuestionProps) => React.JSX.Element;

package/dist/onboarding/presentation/components/questions/SingleChoiceQuestion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+export interface SingleChoiceQuestionProps {
+    question: OnboardingQuestion;
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+export declare const SingleChoiceQuestion: ({ question, value, onChange, }: SingleChoiceQuestionProps) => React.JSX.Element;

package/dist/onboarding/presentation/components/questions/TextInputQuestion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+export interface TextInputQuestionProps {
+    question: OnboardingQuestion;
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+export declare const TextInputQuestion: ({ question, value, onChange, }: TextInputQuestionProps) => React.JSX.Element;

package/dist/onboarding/presentation/hooks/useOnboardingContainerStyle.d.ts

@@ -0,0 +1,12 @@
+/**
+ * useOnboardingContainerStyle Hook
+ * Single Responsibility: Manage container styling for onboarding screen
+ */
+import type { StyleProp, ViewStyle } from "react-native";
+export interface UseOnboardingContainerStyleProps {
+    useCustomBackground: boolean;
+}
+export interface UseOnboardingContainerStyleReturn {
+    containerStyle: StyleProp<ViewStyle>;
+}
+export declare function useOnboardingContainerStyle({ useCustomBackground, }: UseOnboardingContainerStyleProps): UseOnboardingContainerStyleReturn;

package/dist/onboarding/presentation/hooks/useOnboardingGestures.d.ts

@@ -0,0 +1,12 @@
+/**
+ * useOnboardingGestures Hook
+ * Handles swipe gestures for onboarding navigation
+ */
+interface UseOnboardingGesturesProps {
+    isFirstSlide: boolean;
+    isAnswerValid: boolean;
+    onNext: () => void;
+    onBack: () => void;
+}
+export declare const useOnboardingGestures: ({ isFirstSlide, isAnswerValid, onNext, onBack, }: UseOnboardingGesturesProps) => import("react-native").PanResponderInstance;
+export {};

package/dist/onboarding/presentation/hooks/useOnboardingScreenHandlers.d.ts

@@ -0,0 +1,23 @@
+/**
+ * useOnboardingScreenHandlers Hook
+ * Single Responsibility: Handle onboarding screen user interactions
+ */
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+export interface UseOnboardingScreenHandlersProps {
+    filteredSlides: OnboardingSlide[];
+    currentSlide: OnboardingSlide | undefined;
+    currentIndex: number;
+    isLastSlide: boolean;
+    saveCurrentAnswer: (slide: OnboardingSlide) => Promise<void>;
+    completeOnboarding: () => Promise<void>;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    skipOnboarding: () => Promise<void>;
+    loadAnswerForSlide: (slide: OnboardingSlide) => void;
+}
+export interface UseOnboardingScreenHandlersReturn {
+    handleNext: () => Promise<void>;
+    handlePrevious: () => void;
+    handleSkip: () => Promise<void>;
+}
+export declare function useOnboardingScreenHandlers({ filteredSlides, currentSlide, currentIndex, isLastSlide, saveCurrentAnswer, completeOnboarding, goToNext, goToPrevious, skipOnboarding, loadAnswerForSlide, }: UseOnboardingScreenHandlersProps): UseOnboardingScreenHandlersReturn;

package/dist/onboarding/presentation/hooks/useOnboardingScreenState.d.ts

@@ -0,0 +1,30 @@
+/**
+ * useOnboardingScreenState Hook
+ * Single Responsibility: Coordinate onboarding screen state
+ */
+import type { StyleProp, ViewStyle } from "react-native";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import type { OnboardingAnswerValue } from "../../domain/entities/OnboardingQuestion";
+export interface UseOnboardingScreenStateProps {
+    slides: OnboardingSlide[] | undefined;
+    storageKey?: string;
+    onComplete?: () => void | Promise<void>;
+    onSkip?: () => void | Promise<void>;
+    globalUseCustomBackground?: boolean;
+}
+export interface UseOnboardingScreenStateReturn {
+    filteredSlides: OnboardingSlide[];
+    currentSlide: OnboardingSlide | undefined;
+    currentIndex: number;
+    isFirstSlide: boolean;
+    isLastSlide: boolean;
+    currentAnswer: OnboardingAnswerValue;
+    isAnswerValid: boolean;
+    useCustomBackground: boolean;
+    containerStyle: StyleProp<ViewStyle>;
+    handleNext: () => Promise<void>;
+    handlePrevious: () => void;
+    handleSkip: () => Promise<void>;
+    setCurrentAnswer: (value: OnboardingAnswerValue) => void;
+}
+export declare function useOnboardingScreenState({ slides, storageKey, onComplete, onSkip, globalUseCustomBackground, }: UseOnboardingScreenStateProps): UseOnboardingScreenStateReturn;

package/dist/onboarding/presentation/providers/OnboardingProvider.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Onboarding Provider
+ *
+ * Central manager for onboarding theme and configuration.
+ * All values are passed from the main application.
+ */
+import React from "react";
+import type { OnboardingTheme, OnboardingColors } from "../types/OnboardingTheme";
+export interface OnboardingTranslations {
+    nextButton: string;
+    getStartedButton: string;
+    of?: string;
+}
+interface OnboardingProviderValue {
+    theme: OnboardingTheme;
+    translations: OnboardingTranslations;
+}
+export interface OnboardingProviderProps {
+    children: React.ReactNode;
+    useCustomBackground: boolean;
+    colors: OnboardingColors;
+    translations: OnboardingTranslations;
+}
+export declare const OnboardingProvider: ({ children, useCustomBackground, colors, translations, }: OnboardingProviderProps) => React.JSX.Element;
+export declare const useOnboardingProvider: () => OnboardingProviderValue;
+export {};

package/dist/onboarding/presentation/screens/OnboardingScreen.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Onboarding Screen
+ *
+ * Main onboarding screen component with theme-aware colors
+ * Generic and reusable across hundreds of apps
+ *
+ * This component only handles UI coordination - no business logic
+ */
+import React from "react";
+import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
+import { type OnboardingTranslations } from "../providers/OnboardingProvider";
+import type { OnboardingColors } from "../types/OnboardingTheme";
+export interface OnboardingScreenProps extends OnboardingOptions {
+    /**
+     * Optional custom header component
+     */
+    renderHeader?: (props: {
+        isFirstSlide: boolean;
+        onBack: () => void;
+        onSkip: () => void;
+    }) => React.ReactNode;
+    /**
+     * Optional custom footer component
+     */
+    renderFooter?: (props: {
+        currentIndex: number;
+        totalSlides: number;
+        isLastSlide: boolean;
+        onNext: () => void;
+        onUpgrade?: () => void;
+        showPaywallOnComplete?: boolean;
+    }) => React.ReactNode;
+    /**
+     * Optional custom slide component
+     */
+    renderSlide?: (slide: OnboardingOptions["slides"][0]) => React.ReactNode;
+    /**
+     * Optional upgrade callback for premium features
+     * Called when user wants to upgrade from onboarding
+     */
+    onUpgrade?: () => void;
+    /**
+     * Show paywall modal on onboarding completion (default: false)
+     * When true, shows premium paywall before completing onboarding
+     */
+    showPaywallOnComplete?: boolean;
+    /**
+     * Theme colors for the onboarding (Optional - will use design tokens if not provided)
+     */
+    themeColors?: OnboardingColors;
+    /**
+     * All translations for the onboarding (required)
+     */
+    translations: OnboardingTranslations;
+    /**
+     * Optional video background component.
+     * Required only when slides use `backgroundVideo`.
+     * Import from expo-video in apps that have it installed.
+     *
+     * @example
+     * import { BackgroundVideo } from '@umituz/react-native-design-system/onboarding';
+     * <OnboardingScreen VideoComponent={BackgroundVideo} ... />
+     */
+    VideoComponent?: React.ComponentType<{
+        source: unknown;
+        overlayOpacity?: number;
+    }>;
+}
+export declare const OnboardingScreen: ({ slides, onComplete, onSkip, skipButtonText, nextButtonText, getStartedButtonText, showSkipButton, showBackButton, showProgressBar, showDots, showProgressText, storageKey, renderHeader, renderFooter, renderSlide, onUpgrade, showPaywallOnComplete, useCustomBackground: globalUseCustomBackground, themeVariant, themeColors: providedThemeColors, translations, VideoComponent, }: OnboardingScreenProps) => React.JSX.Element | null;

package/dist/onboarding/presentation/types/OnboardingProps.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Onboarding Screen Content Props
+ */
+import type React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import type { OnboardingAnswerValue } from "../../domain/entities/OnboardingQuestion";
+export interface OnboardingScreenContentProps {
+    containerStyle?: StyleProp<ViewStyle>;
+    useCustomBackground: boolean;
+    currentSlide: OnboardingSlide | undefined;
+    isFirstSlide: boolean;
+    isLastSlide: boolean;
+    currentIndex: number;
+    totalSlides: number;
+    currentAnswer: OnboardingAnswerValue;
+    isAnswerValid: boolean;
+    showBackButton: boolean;
+    showSkipButton: boolean;
+    showProgressBar: boolean;
+    showDots: boolean;
+    showProgressText: boolean;
+    skipButtonText?: string;
+    nextButtonText?: string;
+    getStartedButtonText?: string;
+    onBack: () => void;
+    onSkip: () => void;
+    onNext: () => void;
+    onAnswerChange: (value: OnboardingAnswerValue) => void;
+    renderHeader?: (props: {
+        isFirstSlide: boolean;
+        onBack: () => void;
+        onSkip: () => void;
+    }) => React.ReactNode;
+    renderFooter?: (props: {
+        currentIndex: number;
+        totalSlides: number;
+        isLastSlide: boolean;
+        onNext: () => void;
+        onUpgrade?: () => void;
+        showPaywallOnComplete?: boolean;
+    }) => React.ReactNode;
+    renderSlide?: (slide: OnboardingSlide) => React.ReactNode;
+    onUpgrade?: () => void;
+    showPaywallOnComplete?: boolean;
+    variant?: "default" | "card" | "minimal" | "fullscreen";
+    VideoComponent?: React.ComponentType<{
+        source: unknown;
+        overlayOpacity?: number;
+    }>;
+}

package/dist/onboarding/presentation/types/OnboardingTheme.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Onboarding Theme Types
+ */
+export interface OnboardingColors {
+    iconColor: string;
+    textColor: string;
+    subTextColor: string;
+    buttonBg: string;
+    buttonTextColor: string;
+    progressBarBg: string;
+    progressFillColor: string;
+    dotColor: string;
+    activeDotColor: string;
+    progressTextColor: string;
+    headerButtonBg: string;
+    headerButtonBorder: string;
+    iconBg: string;
+    iconBorder: string;
+    errorColor: string;
+    featureItemBg: string;
+}
+export interface OnboardingTheme {
+    colors: OnboardingColors;
+    useCustomBackground: boolean;
+}

package/dist/organisms/FormContainer.d.ts

@@ -0,0 +1,81 @@
+/**
+ * FormContainer Component
+ *
+ * A reusable container for forms with proper keyboard handling and responsive layout.
+ *
+ * Features:
+ * - Pure React Native implementation (no Paper dependency)
+ * - Universal keyboard handling (no platform-specific code)
+ * - ScrollView with automatic content padding
+ * - Safe area insets for bottom tab navigation overlap
+ * - Responsive max width for large screens (tablets)
+ * - Consistent vertical spacing between form elements
+ * - Theme-aware surface colors
+ * - Optimized performance with memoized styles
+ *
+ * Usage:
+ * ```tsx
+ * <FormContainer>
+ *   <AtomicInput label="Name" value={name} onChangeText={setName} />
+ *   <AtomicTextArea label="Description" value={desc} onChangeText={setDesc} />
+ *   <AtomicButton variant="primary" onPress={handleSubmit}>
+ *     Submit
+ *   </AtomicButton>
+ * </FormContainer>
+ * ```
+ *
+ * Why This Component:
+ * - Prevents keyboard from covering input fields (universal solution)
+ * - Handles safe area (notch, bottom tabs) automatically
+ * - Consistent form layout across all 100+ generated apps
+ * - Responsive design for tablets (max 700px) and phones (full width)
+ * - Automatic vertical spacing between form elements (no manual marginBottom)
+ * - Reduces boilerplate in form screens
+ * - Universal code - no platform checks, works on iOS, Android, Web
+ *
+ * Technical Details:
+ * - Uses ScrollView with contentContainerStyle for keyboard handling
+ * - Pure React Native View for surface (lightweight)
+ * - Vertical spacing via Children.map() wrapping (universal compatibility)
+ * - Safe area insets from react-native-safe-area-context
+ * - Responsive values from useResponsive hook
+ *
+ * @module FormContainer
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * Props for FormContainer component
+ */
+export interface FormContainerProps {
+    /** Form content (inputs, buttons, etc.) */
+    children: React.ReactNode;
+    /** Container style override (for outer View) */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Content container style override (for ScrollView content) */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Show vertical scroll indicator */
+    showsVerticalScrollIndicator?: boolean;
+    /** Optional test ID for E2E testing */
+    testID?: string;
+    /** Show surface border (default: true) */
+    showBorder?: boolean;
+    /** Accessibility label for the container */
+    accessibilityLabel?: string;
+    /** Accessibility hint for the container */
+    accessibilityHint?: string;
+    /** Whether the container is accessible */
+    accessible?: boolean;
+}
+/**
+ * FormContainer - Universal form wrapper component
+ *
+ * Wraps forms with:
+ * - Pure React Native surface
+ * - Universal keyboard handling (no platform checks)
+ * - ScrollView for content overflow
+ * - Safe area insets (bottom tabs, notch)
+ * - Responsive max width (tablets)
+ * - Theme integration
+ */
+export declare const FormContainer: React.FC<FormContainerProps>;

package/dist/organisms/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @umituz/react-native-design-system-organisms - Public API
+ *
+ * Organism design components for React Native - Complex UI patterns
+ * Built from atoms and molecules following atomic design principles
+ *
+ * Usage:
+ * ```typescript
+ * import { ScreenLayout, AppHeader, FormContainer } from '@umituz/react-native-design-system-organisms';
+ * ```
+ */
+export { FormContainer } from './FormContainer';
+export type { FormContainerProps } from './FormContainer';
+import type { FormContainerProps } from './FormContainer';
+export type OrganismComponentProps = {
+    type: 'FormContainer';
+    props: FormContainerProps;
+};

package/dist/presentation/utils/variants/core.d.ts

@@ -0,0 +1,13 @@
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+export type Style = ViewStyle | TextStyle | ImageStyle;
+export interface VariantConfig<T extends Record<string, Record<string, Style>>> {
+    base?: Style;
+    variants?: T;
+    defaultVariants?: Partial<{
+        [K in keyof T]: keyof T[K];
+    }>;
+}
+export type VariantProps<T extends Record<string, Record<string, Style>>> = {
+    [K in keyof T]?: keyof T[K];
+};
+export declare function createVariants<T extends Record<string, Record<string, Style>>>(config: VariantConfig<T>): (props?: VariantProps<T>) => Style;

package/dist/presentation/utils/variants/helpers.d.ts

@@ -0,0 +1,4 @@
+import { Style } from './core';
+export declare function combineStyles<T extends Style>(...styles: (T | undefined | null | false)[]): T;
+export declare function conditionalStyle<T extends Style>(condition: boolean, trueStyle: T, falseStyle?: T): T | undefined;
+export declare function responsiveStyle<T extends Style>(small: T, medium?: T, large?: T): T;

package/dist/presentation/utils/variants/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Variant utilities for style management
+ */
+export * from './core';
+export * from './helpers';

package/dist/responsive/compute/computeDeviceInfo.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Device Info Computation
+ */
+import type { DeviceType } from '../../device/detection';
+export interface ComputedDeviceInfo {
+    readonly isSmallDevice: boolean;
+    readonly isTabletDevice: boolean;
+    readonly isLandscapeDevice: boolean;
+    readonly deviceType: DeviceType;
+    readonly spacingMultiplier: number;
+}
+export declare const computeDeviceInfo: (dimensions?: {
+    width: number;
+    height: number;
+}) => ComputedDeviceInfo;

package/dist/responsive/compute/computeResponsivePositioning.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Responsive Positioning Computation
+ */
+import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout, ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsive';
+export interface ComputedResponsivePositioning {
+    readonly horizontalPadding: number;
+    readonly verticalPadding: number;
+    readonly bottomPosition: number;
+    readonly fabPosition: {
+        readonly bottom: number;
+        readonly right: number;
+    };
+    readonly screenLayoutConfig: ScreenLayoutConfig;
+    readonly tabBarConfig: ResponsiveTabBarConfig;
+    readonly modalLayout: ResponsiveModalLayout;
+    readonly bottomSheetLayout: ResponsiveBottomSheetLayout;
+    readonly dialogLayout: ResponsiveDialogLayout;
+}
+export declare const computeResponsivePositioning: (insets: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}) => ComputedResponsivePositioning;

package/dist/responsive/compute/computeResponsiveSizes.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Responsive Sizes Computation
+ */
+import type { ComputedDeviceInfo } from './computeDeviceInfo';
+export interface ComputedResponsiveSizes {
+    readonly logoSize: number;
+    readonly inputHeight: number;
+    readonly iconContainerSize: number;
+    readonly maxContentWidth: number;
+    readonly minTouchTarget: number;
+    readonly modalMaxHeight: string;
+    readonly modalMinHeight: number;
+    readonly gridColumns: number;
+}
+export declare const computeResponsiveSizes: (dimensions?: {
+    width: number;
+    height: number;
+}) => ComputedResponsiveSizes;
+export declare const computeOnboardingSizes: (deviceInfo: ComputedDeviceInfo) => {
+    onboardingIconSize: number;
+    onboardingIconMarginTop: number;
+    onboardingIconMarginBottom: number;
+    onboardingTitleMarginBottom: number;
+    onboardingDescriptionMarginTop: number;
+    onboardingTextPadding: number;
+};