@umituz/react-native-design-system 4.28.22 → 4.28.23

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/ChatOnboardingScreen.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Chat Onboarding Screen
+ *
+ * Chat-based onboarding experience for user engagement
+ * Fully configurable flow, optional mascot, lazy-loaded animations
+ *
+ * Responsive Design:
+ * - Uses useSafeAreaInsets() from react-native-safe-area-context for proper device compatibility
+ * - Flexible flex-based layouts that adapt to all screen sizes
+ * - KeyboardAvoidingView for proper keyboard handling on iOS/Android
+ * - Percentage-based maxWidth in chat messages for responsive text layout
+ * - Proper insets integration with device and safe-area modules
+ *
+ * Compatible with:
+ * - @umituz/react-native-design-system/device (useDeviceInfo)
+ * - @umituz/react-native-design-system/safe-area (useSafeAreaInsets)
+ * - All screen sizes (iPhone, iPad, Android phones/tablets)
+ */
+import React from "react";
+import { ViewStyle } from "react-native";
+import type { ChatStep } from "../../domain/entities/ChatStep";
+export interface ChatOnboardingScreenProps {
+    /** Chat onboarding flow configuration */
+    flow: Record<string, ChatStep>;
+    /** Initial step ID */
+    initialStepId?: string;
+    /** Completion callback */
+    onComplete?: () => void;
+    /** Skip callback */
+    onSkip?: () => void;
+    /** Show mascot (default: false) */
+    showMascot?: boolean;
+    /** Mascot component to render */
+    renderMascot?: (state: string) => React.ReactNode;
+    /** Theme colors */
+    theme?: {
+        /** Background color */
+        background?: string;
+        /** Message background color */
+        messageBackground?: string;
+        /** Message text color */
+        messageText?: string;
+        /** User message background color */
+        userMessageBackground?: string;
+        /** User message text color */
+        userMessageText?: string;
+        /** Button background color */
+        buttonBackground?: string;
+        /** Button text color */
+        buttonText?: string;
+        /** Button border color */
+        buttonBorder?: string;
+    };
+    /** Custom styles */
+    style?: ViewStyle;
+    /** Delay between messages */
+    messageDelay?: number;
+    /** Render custom icon */
+    renderIcon?: (iconName: string) => React.ReactNode;
+    /** Storage key for progress persistence */
+    storageKey?: string;
+}
+/**
+ * Chat onboarding screen component
+ */
+export declare const ChatOnboardingScreen: React.MemoExoticComponent<({ flow, initialStepId, onComplete, onSkip, showMascot, renderMascot, theme, style, messageDelay, renderIcon, }: ChatOnboardingScreenProps) => React.JSX.Element>;

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>;

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/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,27 @@
+/**
+ * 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;
+}, dimensions?: {
+    width: number;
+    height: 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;
+};

package/dist/responsive/config.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Responsive Design Configuration
+ *
+ * Centralized configuration for responsive design system.
+ * All magic numbers and breakpoints are defined here for maintainability.
+ */
+/**
+ * Device breakpoints based on standard device sizes
+ * These values determine when responsive behaviors change
+ */
+export declare const DEVICE_BREAKPOINTS: {
+    readonly SMALL_PHONE: 375;
+    readonly MEDIUM_PHONE: 414;
+    readonly LARGE_PHONE: 500;
+    readonly SMALL_TABLET: 768;
+    readonly TABLET: 1024;
+};
+/**
+ * Responsive sizing percentages
+ * These percentages control how elements scale relative to screen dimensions
+ */
+export declare const RESPONSIVE_PERCENTAGES: {
+    readonly LOGO_SMALL_PHONE_MAX: 0.28;
+    readonly LOGO_TABLET_MAX: 0.15;
+    readonly ICON_CONTAINER_SMALL_PHONE: 0.3;
+    readonly ICON_CONTAINER_TABLET: 0.2;
+    readonly CONTENT_SMALL_PHONE: 0.9;
+    readonly CONTENT_PHONE: 0.85;
+    readonly CONTENT_TABLET: 0.6;
+    readonly INPUT_SMALL_DEVICE: 0.15;
+    readonly INPUT_MEDIUM_DEVICE: 0.18;
+    readonly FONT_SMALL_PHONE: 0.9;
+    readonly FONT_TABLET: 1.1;
+};
+/**
+ * Size constraints and limits
+ * These values define minimum and maximum sizes for responsive elements
+ */
+export declare const SIZE_CONSTRAINTS: {
+    readonly LOGO_MIN_SMALL: 100;
+    readonly LOGO_MAX_SMALL: 120;
+    readonly LOGO_MIN_TABLET: 140;
+    readonly LOGO_MAX_TABLET: 200;
+    readonly INPUT_MAX_SMALL: 120;
+    readonly INPUT_MAX_MEDIUM: 150;
+    readonly INPUT_MAX_LARGE: 200;
+    readonly ICON_MAX_SMALL: 120;
+    readonly ICON_MAX_TABLET: 180;
+    readonly CONTENT_MAX_TABLET: 672;
+    readonly MODAL_MIN_SMALL: 250;
+    readonly MODAL_MIN_STANDARD: 300;
+    readonly MODAL_MIN_TABLET: 350;
+    readonly MODAL_MAX_TABLET: 500;
+    readonly FONT_MIN_SIZE: 11;
+};
+/**
+ * Modal layout configuration
+ * Responsive values for modal/overlay components
+ */
+export declare const MODAL_CONFIG: {
+    readonly WIDTH_PERCENT_PHONE: 0.92;
+    readonly WIDTH_PERCENT_TABLET: 0.75;
+    readonly HEIGHT_PERCENT_SMALL: 0.75;
+    readonly HEIGHT_PERCENT_STANDARD: 0.78;
+    readonly HEIGHT_PERCENT_TABLET: 0.7;
+    readonly MIN_HEIGHT_PERCENT_SMALL: 0.4;
+    readonly MIN_HEIGHT_PERCENT_STANDARD: 0.45;
+    readonly MIN_HEIGHT_PERCENT_TABLET: 0.35;
+    readonly MAX_WIDTH_PHONE: 480;
+    readonly MAX_WIDTH_TABLET: 600;
+    readonly BORDER_RADIUS_PHONE: 32;
+    readonly BORDER_RADIUS_TABLET: 24;
+    readonly BACKDROP_OPACITY_DEFAULT: 0.85;
+    readonly BOTTOM_SHEET_MIN_HEIGHT: 400;
+    readonly BOTTOM_SHEET_MAX_HEIGHT_PERCENT: 0.9;
+    readonly DIALOG_WIDTH_PERCENT: 0.94;
+    readonly DIALOG_MAX_WIDTH: 500;
+    readonly DIALOG_MAX_HEIGHT_PERCENT: 0.85;
+};
+/**
+ * Layout spacing and positioning
+ * These values control spacing, padding, and positioning
+ */
+export declare const LAYOUT_CONSTANTS: {
+    readonly SPACING_MULTIPLIER_SMALL: 0.9;
+    readonly SPACING_MULTIPLIER_TABLET: 1.2;
+    readonly SPACING_MULTIPLIER_STANDARD: 1;
+    readonly HORIZONTAL_PADDING_BASE: 16;
+    readonly VERTICAL_PADDING_SMALL: 12;
+    readonly VERTICAL_PADDING_STANDARD: 16;
+    readonly VERTICAL_PADDING_TABLET: 24;
+    readonly BOTTOM_POSITION_BASE: 32;
+    readonly SAFE_AREA_OFFSET: 16;
+    readonly TAB_BAR_OFFSET: 90;
+    readonly FAB_BOTTOM_TABLET: 100;
+    readonly FAB_RIGHT_TABLET: 24;
+    readonly FAB_RIGHT_PHONE: 20;
+    readonly MODAL_HEIGHT_SMALL: "75%";
+    readonly MODAL_HEIGHT_STANDARD: "70%";
+    readonly MODAL_HEIGHT_TABLET: "60%";
+};
+/**
+ * Device height thresholds
+ * These values determine responsive behavior based on screen height
+ */
+export declare const HEIGHT_THRESHOLDS: {
+    readonly SMALL_DEVICE: 667;
+    readonly MEDIUM_DEVICE: 844;
+    readonly LARGE_DEVICE: 1024;
+};
+/**
+ * Grid layout configuration
+ * Controls responsive grid behavior
+ */
+export declare const GRID_CONFIG: {
+    readonly DEFAULT_MOBILE_COLUMNS: 2;
+    readonly DEFAULT_TABLET_COLUMNS: 4;
+};
+/**
+ * Input validation constraints
+ * Defines valid ranges for input parameters
+ */
+export declare const VALIDATION_CONSTRAINTS: {
+    readonly MIN_BASE_SIZE: 0;
+    readonly MAX_BASE_SIZE: 1000;
+    readonly MIN_BASE_FONT_SIZE: 1;
+    readonly MAX_BASE_FONT_SIZE: 1000;
+    readonly MIN_SCREEN_DIMENSION: 100;
+    readonly MAX_SCREEN_DIMENSION: 5000;
+};

package/dist/responsive/gridUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Grid Utilities
+ * Responsive grid sizing and column calculations
+ */
+/**
+ * Responsive grid columns
+ * Returns number of columns for grid layouts
+ *
+ * @param mobileColumns - Number of columns for mobile devices (default: 2)
+ * @param tabletColumns - Number of columns for tablet devices (default: 4)
+ * @returns Responsive number of grid columns
+ */
+export declare const getResponsiveGridColumns: (mobileColumns?: number, tabletColumns?: number) => number;
+export interface GridCellSizeConfig {
+    columns: number;
+    rows: number;
+    horizontalPadding?: number;
+    verticalPadding?: number;
+    gap?: number;
+    headerHeight?: number;
+    tabBarHeight?: number;
+    statusBarHeight?: number;
+}
+/**
+ * Responsive grid cell size
+ * Calculates optimal square cell size for a grid that fills available space
+ *
+ * @param config - Grid configuration
+ * @param dimensions - Optional dimensions override
+ * @returns Responsive cell size (width = height for square cells)
+ */
+export declare const getResponsiveGridCellSize: (config: GridCellSizeConfig, dimensions?: {
+    width: number;
+    height: number;
+}) => number;