@umituz/react-native-design-system 4.25.99 → 4.25.101

package/dist/onboarding/infrastructure/utils/layouts/layoutTypes.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Layout Types
+ * Type definitions for image layout generators
+ */
+import type { ImageSourceType } from "../../../domain/types/ImageSourceType";
+export type { ImageSourceType };
+export interface SafeAreaInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface ImageLayoutStyle {
+    position: "absolute";
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    borderRadius?: number;
+}
+export interface ImageLayoutItem {
+    source: ImageSourceType;
+    style: ImageLayoutStyle;
+}
+export interface LayoutConfig {
+    columns?: number;
+    gap?: number;
+    borderRadius?: number;
+    randomizeSize?: boolean;
+    safeAreaInsets?: SafeAreaInsets;
+}

package/dist/onboarding/infrastructure/utils/layouts/masonryLayout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Masonry Layout Generator
+ * Pinterest-style masonry layout
+ */
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+export declare const generateMasonryLayout: (images: ImageSourceType[], config?: LayoutConfig) => ImageLayoutItem[];

package/dist/onboarding/infrastructure/utils/layouts/scatteredLayout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Scattered Layout Generator
+ * Random small images scattered across screen
+ */
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+export declare const generateScatteredLayout: (images: ImageSourceType[], config?: LayoutConfig) => ImageLayoutItem[];

package/dist/onboarding/infrastructure/utils/layouts/screenDimensions.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Screen Dimensions
+ * Centralized screen dimension values using design system utilities
+ */
+export declare const SCREEN_WIDTH: number;
+export declare const SCREEN_HEIGHT: number;

package/dist/onboarding/infrastructure/utils/layouts/tilesLayout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tiles Layout Generator
+ * Fixed size tiles centered on screen
+ */
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+export declare const generateTilesLayout: (images: ImageSourceType[], config?: LayoutConfig) => ImageLayoutItem[];

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

@@ -0,0 +1,17 @@
+/**
+ * Background Image Collage Component
+ * Displays multiple images in various layout patterns with safe area support.
+ * Uses expo-image when available, falls back to React Native Image.
+ */
+import React from "react";
+import { type ImageSourceType } from "../../infrastructure/utils/layouts";
+export type CollageLayout = "grid" | "dense" | "masonry" | "collage" | "scattered" | "tiles" | "honeycomb";
+export interface BackgroundImageCollageProps {
+    images: ImageSourceType[];
+    layout?: CollageLayout;
+    columns?: number;
+    gap?: number;
+    borderRadius?: number;
+    opacity?: number;
+}
+export declare const BackgroundImageCollage: React.FC<BackgroundImageCollageProps>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type VideoSource = string | {
+    uri: string;
+    [key: string]: unknown;
+};
+interface BackgroundVideoProps {
+    source: VideoSource;
+    overlayOpacity?: number;
+}
+export declare const BackgroundVideo: React.FC<BackgroundVideoProps>;
+export {};

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

@@ -0,0 +1,11 @@
+/**
+ * BaseSlide Component
+ * Single Responsibility: Provide a base layout for all onboarding slides
+ */
+import React from "react";
+import type { ContentPosition } from "../../domain/entities/OnboardingSlide";
+export interface BaseSlideProps {
+    children: React.ReactNode;
+    contentPosition?: ContentPosition;
+}
+export declare const BaseSlide: ({ children, contentPosition, }: BaseSlideProps) => React.JSX.Element;

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

@@ -0,0 +1,33 @@
+/**
+ * Onboarding Background Component
+ * Handles rendering of video, image or solid backgrounds.
+ *
+ * expo-video is an OPTIONAL peer dependency.
+ * Pass a VideoComponent prop to enable video backgrounds.
+ * Without it the video slide type is silently skipped.
+ */
+import React from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+type VideoComponentType = React.ComponentType<{
+    source: unknown;
+    overlayOpacity?: number;
+}>;
+export interface OnboardingBackgroundProps {
+    currentSlide: OnboardingSlide | undefined;
+    useCustomBackground: boolean;
+    showOverlay: boolean;
+    overlayOpacity: number;
+    backgroundColor?: string;
+    /**
+     * Optional video background component.
+     * Required only when slides use `backgroundVideo`.
+     * Import from `./BackgroundVideo` in apps that have expo-video installed.
+     *
+     * @example
+     * import { BackgroundVideo } from '@umituz/react-native-design-system/onboarding';
+     * <OnboardingScreen VideoComponent={BackgroundVideo} ... />
+     */
+    VideoComponent?: VideoComponentType;
+}
+export declare const OnboardingBackground: React.FC<OnboardingBackgroundProps>;
+export {};

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface OnboardingFooterProps {
+    currentIndex: number;
+    totalSlides: number;
+    isLastSlide: boolean;
+    onNext: () => void;
+    showProgressBar?: boolean;
+    showDots?: boolean;
+    showProgressText?: boolean;
+    disabled?: boolean;
+}
+export declare const OnboardingFooter: ({ currentIndex, totalSlides, isLastSlide, onNext, showProgressBar, showDots, showProgressText, disabled, }: OnboardingFooterProps) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface OnboardingHeaderProps {
+    isFirstSlide: boolean;
+    onBack: () => void;
+    onSkip: () => void;
+    showBackButton?: boolean;
+    showSkipButton?: boolean;
+    skipButtonText?: string;
+}
+export declare const OnboardingHeader: ({ isFirstSlide, onBack, onSkip, showBackButton, showSkipButton, skipButtonText, }: OnboardingHeaderProps) => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface OnboardingResetSettingProps {
+    onReset: () => void | Promise<void>;
+    title?: string;
+    description?: string;
+    iconName?: string;
+    iconColor?: string;
+    titleColor?: string;
+    visible?: boolean;
+    isLast?: boolean;
+}
+export declare const OnboardingResetSetting: ({ onReset, title, description, iconName, iconColor, titleColor, visible, isLast, }: OnboardingResetSettingProps) => React.JSX.Element | null;

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,27 @@
+/**
+ * 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;
+    backgroundColor?: string;
+}
+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,26 @@
+/**
+ * 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;
+    background?: 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>;